{"version":3,"sources":["https://lively-kernel.org/lively4/swd21-pipes-and-filters/demos/swd21/tutorial/graph-app.js"],"names":["Panning","MyGraph","query","lively","ctx","dotSource","edges","size","nodesSize","count","edge","Math","round","random","push","join","pane","querySelector","value","update","innerHTML","source","graphviz","updateViz","create","markdownComp","style","document","createElement","textContent","parameters","display","evt","nodes"],"mappings":"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","file":"graph-app.js","sourcesContent":["\n  import {Panning} from \"src/client/html.js\"\n   \n  export default class MyGraph {\n\n    static query(query) {\n      return lively.query(this.ctx, query)\n    }\n\n    static async dotSource() {\n      var edges = []\n    \n      var size = this.size()\n      var nodesSize = this.nodesSize()\n      for(let count=1; count < size; count++) {\n        var edge = \"\" + ((count % nodesSize) + 1) + \" -> \" + Math.round(Math.random(nodesSize) * nodesSize)\n        edges.push(edge)\n      }\n      \n      return `digraph {\n        rankdir=LR;\n        graph [  \n          splines=\"false\"  \n          overlap=\"true\"  ];\n        node [ style=\"solid\"  shape=\"plain\"  fontname=\"Arial\"  fontsize=\"14\"  fontcolor=\"black\" ];\n        edge [  fontname=\"Arial\"  fontsize=\"8\" ];\n\n\n        ${edges.join(\";\\n\")}\n      }`\n    }\n    \n    static size() {\n      return this.pane.querySelector(\"input#size\").value \n    }\n\n    static nodesSize() {\n      return this.pane.querySelector(\"input#nodes\").value \n    }\n\n    static async update() {\n      this.pane.querySelector(\"#nodeslabel\").innerHTML = this.nodesSize()\n      this.pane.querySelector(\"#sizelabel\").innerHTML = this.size()\n      var source = await this.dotSource()\n      this.graphviz.innerHTML = `<` +`script type=\"graphviz\">${source}<` + `/script>}`\n      await this.graphviz.updateViz()\n    }\n\n\n    static async create(ctx) {  \n      this.ctx = ctx\n\n      var markdownComp = lively.query(ctx, \"lively-markdown\")\n      this.graphviz = await (<graphviz-dot></graphviz-dot>)\n\n\n      var style = document.createElement(\"style\")\n      style.textContent = `\n      td.comment {\n        max-width: 300px\n      }\n      div#root {\n        position: relative; \n        top: 20px; left: 0px; \n        overflow-x: auto; \n        overflow-y: scroll; \n        width: calc(100% - 0px); \n        height: calc(100% - 20px);\n      }\n      `\n      var parameters = markdownComp.parameters\n      this.graphviz.style.display = \"inline-block\" // so it takes the width of children and not parent\n      this.pane = <div id=\"root\">\n        {style}\n         <h2>Random Graph</h2>\n         <div>Nodes: \n          <span id=\"nodeslabel\"></span>  <br /> \n          <input input={evt => this.update() } type=\"range\" min=\"1\" max=\"300\" value={parameters.edges || 50} class=\"slider\" id=\"nodes\"></input>\n         </div>\n         <div>Egdes: <span id=\"sizelabel\"></span>  <br />\n          <input input={evt => this.update() } type=\"range\" min=\"1\" max=\"300\" value={parameters.nodes || 50} class=\"slider\" id=\"size\"></input>\n        </div>\n         <div style=\"height: 20px\"></div>\n        {this.graphviz}\n      </div>\n      this.update()\n      \n      new Panning(this.pane)\n      return this.pane\n    }\n  }"]}