{"version":3,"sources":["https://lively-kernel.org/lively4/swd21-pipes-and-filters/src/components/demo/lively-module-graph.js"],"names":["Morph","LivelyModuleGraph","initialize","lively","notify","window","d3","cola","ScopedD3","console","log","loadJavaScriptThroughDOM","System","import","d3cola","d3adaptor","convergenceThreshold","bounds","getBoundingClientRect","width","height","scale","zoom","behavior","zoomWidth","zoomHeight","translate","shadowRoot","querySelector","innerHTML","outer","select","attr","append","class","call","on","redraw","vis","id","viewBox","refX","markerWidth","markerHeight","orient","d","fill","render","graph","nodes","links","graphModules","Object","values","loads","map","ea","key","moduleName","match","push","name","length","forEach","mod","dependencies","dependency","depKey","normalizeSync","targetIdx","indexOf","source","target","value","edges","avoidOverlaps","flowLayout","size","jaccardLinkLengths","link","selectAll","data","enter","margin","pad","node","classed","rx","ry","drag","text","label","replace","event","defaultPrevented","openBrowser","each","b","getBBox","extra","lineFunction","svg","line","x","y","interpolate","routeEdges","prepareEdgeRouting","routeEdge","start","innerBounds","inflate","route","vpsc","makeEdgeBetween","sourceIntersection","arrowStart","e","showError"],"mappings":"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","file":"lively-module-graph.js","sourcesContent":["import Morph from \"src/components/widgets/lively-morph.js\"\n\n\nexport default class LivelyModuleGraph extends Morph {\n\n  async initialize() {\n    lively.notify(\"initialize!\")\n      if (!window.d3 || !window.cola || !window.ScopedD3) {\n        console.log(\"LOAD D3\");\n        await lively.loadJavaScriptThroughDOM(\"d3\", \"src/external/d3.v3.js\");\n        await System.import(\"src/client/container-scoped-d3.js\");\n        await lively.loadJavaScriptThroughDOM(\"cola\", \"src/external/cola.js\");\n        await lively.loadJavaScriptThroughDOM(\"cola-layout\", \"src/external/cola-layout.js\");\n        await lively.loadJavaScriptThroughDOM(\"cola-shortestpaths\", \"src/external/cola-shortestpaths.js\");\n      }\n      this.d3cola = cola.d3adaptor().convergenceThreshold(0.1);\n\n      var bounds = this.getBoundingClientRect()\n      var width = bounds.width, height = bounds.height;\n      var scale = 0.3;\n      var zoom = d3.behavior.zoom();\n      \n      var zoomWidth = (width-scale*width)/2\n      var zoomHeight = (height-scale*height)/2\n      zoom.translate([zoomWidth,zoomHeight]).scale(scale);\n      this.shadowRoot.querySelector(\"svg\").innerHTML = \"\"\n      \n      var outer = d3.select(this.shadowRoot.querySelector(\"svg\"))\n          .attr({ width: width, height: height, \"pointer-events\": \"all\" });\n      outer.append('rect')\n          .attr({ class: 'background', width: \"100%\", height: \"100%\" })\n          .call(zoom.on(\"zoom\", () => this.redraw()));\n\n      \n\n      this.vis = outer\n          .append('g')\n          .attr('transform', \"translate(\"+zoomWidth+\",\"+zoomHeight+\") scale(\" + scale +' )');\n\n      outer.append('svg:defs').append('svg:marker')\n          .attr({\n              id: 'end-arrow',\n              viewBox: '0 -5 10 10',\n              refX: 8,\n              markerWidth: 6,\n              markerHeight: 6,\n              orient: 'auto'\n          })\n        .append('svg:path')\n          .attr({\n              d: 'M0,-5L10,0L0,5L2,0',\n              'stroke-width': '0px',\n              fill: '#000'});\n\n        this.render()\n    }\n    \n    render() {\n      var bounds = this.getBoundingClientRect()\n      var width = bounds.width, height = bounds.height;\n\n      var graph = {nodes: [], links: []},\n          graphModules = [];\n          \n      Object.values(System.loads).map( ea => ea.key).map(function (moduleName) {\n        if (moduleName.match(/\\.js\\?[0-9]+/)) return;\n        if (moduleName.match(/lively.js/)) return;\n        if (moduleName.match(/graphics.js/)) return;\n        if (moduleName.match(/Morph.js/)) return;\n        \n        \n        graphModules.push(moduleName);\n        graph.nodes.push({name: moduleName, id: graphModules.length - 1});\n        return moduleName;\n      }).forEach(function (moduleName) {\n          if (!moduleName) return;\n          var mod = System.loads[moduleName]\n          mod.dependencies.forEach(function (dependency) {\n            var depKey = System.normalizeSync(dependency, mod.key)\n            var targetIdx = graphModules.indexOf(depKey);\n            if (targetIdx < 0) return;\n            graph.links.push({\n              source: targetIdx,\n              target: graphModules.indexOf(moduleName), value: 1\n            });\n          });\n      })\n      var nodes = graph.nodes;\n      var edges = graph.links;\n\n      this.d3cola\n          .avoidOverlaps(true)\n          .convergenceThreshold(1e-3)\n          .flowLayout('x', 350)\n          .size([width, height])\n          .nodes(nodes)\n          .links(edges)\n          .jaccardLinkLengths(250);\n\n      var link = this.vis.selectAll(\".link\")\n          .data(edges)\n          .enter().append(\"path\")\n          .attr(\"class\", \"link\");\n\n      var margin = 10, pad = 12;\n      var node = this.vis.selectAll(\".node\")\n          .data(nodes)\n          .enter().append(\"rect\")\n          .classed(\"node\", true)\n          .attr({ rx: 5, ry: 5 })\n          .call(this.d3cola.drag);\n      node.append(\"title\").text(function(d) { return d.name; });\n      var label = this.vis.selectAll(\".label\")\n          .data(nodes)\n          .enter().append(\"text\")\n          .attr(\"class\", \"label\")\n          .text(function (d) { return d.name.replace(/.*\\//, \"\"); })\n          //.style(\"user-select\", \"none\")\n          \n          .call(this.d3cola.drag)\n          .on(\"click\", (d) => {\n            if (d3.event.defaultPrevented) return; // click suppressed\n            lively.openBrowser(d.name, true);\n          })\n          .each(function (d) {\n              var b = this.getBBox();\n              var extra = 2 * margin + 2 * pad;\n              d.width = b.width + extra;\n              d.height = b.height + extra;\n          });\n      label\n        .append(\"title\")\n        .text(function(d) { return d.name; });\n      \n\n      var lineFunction = d3.svg.line()\n          .x(function (d) { return d.x; })\n          .y(function (d) { return d.y; })\n          .interpolate(\"linear\");\n\n      var routeEdges = () => {\n          this.d3cola.prepareEdgeRouting();\n          link.attr(\"d\", (d) => {\n            \n              return lineFunction(this.d3cola.routeEdge(d\n              // show visibility graph\n                  //, function (g) {\n                  //    if (d.source.id === 10 && d.target.id === 11) {\n                  //    g.E.forEach(function (e) {\n                  //        this.vis.append(\"line\").attr(\"x1\", e.source.p.x).attr(\"y1\", e.source.p.y)\n                  //            .attr(\"x2\", e.target.p.x).attr(\"y2\", e.target.p.y)\n                  //            .attr(\"stroke\", \"green\");\n                  //    });\n                  //    }\n                  //}\n              ));\n          });\n        }\n        \n      this.d3cola.start(50, 100, 200).on(\"tick\", function () {\n          node.each(function (d) { d.innerBounds = d.bounds.inflate(-margin); })\n              .attr(\"x\", function (d) { return d.innerBounds.x; })\n              .attr(\"y\", function (d) { return d.innerBounds.y; })\n              .attr(\"width\", function (d) {\n                  return d.innerBounds.width();\n              })\n              .attr(\"height\", function (d) { return d.innerBounds.height(); });\n\n          link.attr(\"d\", function (d) {\n              var route = cola.vpsc.makeEdgeBetween(d.source.innerBounds, d.target.innerBounds, 5);\n              return lineFunction([route.sourceIntersection, route.arrowStart]);\n          });\n\n          label\n              .attr(\"x\", function (d) { return d.x })\n              .attr(\"y\", function (d) { return d.y + (margin + pad) / 2 });\n\n      }).on(\"end\", () => {\n        try {\n          routeEdges()\n        } catch(e) {\n          lively.showError(e)\n        }\n      });\n    }\n    \n    redraw() {\n      // console.log(\"translate \" + d3.event.translate + \" scale \" + d3.event.scale)\n        \n      this.vis.attr(\"transform\", \"translate(\" + d3.event.translate + \")\" + \" scale(\" + d3.event.scale + \")\");\n    }\n    \n}\n"]}