{"version":3,"sources":["https://lively-kernel.org/lively4/lively4-constraints/src/components/d3/d3-tree.js"],"names":["Morph","d3","D3Tree","getTreeData","treeData","setTreeData","data","updateViz","initialize","bounds","getBoundingClientRect","shadowRoot","querySelector","innerHTML","margin","top","right","bottom","left","width","height","console","log","svg","select","attr","append","i","duration","root","treemap","tree","size","hierarchy","d","children","x0","y0","forEach","ea","collapse","update","_children","click","source","nodes","descendants","links","slice","y","depth","node","selectAll","id","nodeEnter","enter","on","style","text","dataName","name","nodeUpdate","merge","transition","x","nodeExit","exit","remove","link","linkEnter","insert","o","diagonal","linkUpdate","parent","linkExit","s","path","livelyExample","json","lively4url","livelyMigrate","other"],"mappings":"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","file":"d3-tree.js","sourcesContent":["\n/*MD \n# D3 Tree\n![](d3-tree.png){height=200}\nMD*/\n\nimport Morph from \"src/components/widgets/lively-morph.js\"\nimport d3 from \"src/external/d3.v5.js\"\n\n\nexport default class D3Tree extends Morph {\n\n  getTreeData() {\n    if (!this.treeData) {\n      this.treeData = {\n          \"name\": \"Top Level\",\n          \"children\": [\n            { \n              \"name\": \"Level 2: A\",\n              \"children\": [\n                { \"name\": \"Son of A\" },\n                { \"name\": \"Daughter of A\" }\n              ]\n            },\n            { \"name\": \"Level 2: B\" }\n          ]\n        };\n    }\n    return this.treeData\n  }\n  \n  setTreeData(data) {\n    this.treeData = data;\n    this.updateViz()\n  }\n  \n  async initialize() {   \n    this.updateViz()\n    \n    // window.d3 = d3\n    // System.import(\"src/client/container-scoped-d3.js\")\n  }\n  \n  updateViz() {\n    if(!this.bounds) {\n      this.bounds = this.getBoundingClientRect() \n    }\n    this.shadowRoot.querySelector(\"svg\").innerHTML = \"\"\n\n    var treeData = this.getTreeData()\n        \n    var margin = {top: 20, right: 120, bottom: 20, left: 120},\n      width = this.bounds.width - margin.right - margin.left,\n      height = this.bounds.height - margin.top - margin.bottom;\n    \n    console.log(height);\n    if(height < 100) {\n      height = 400;\n    }\n\n    var svg = d3.select(this.shadowRoot.querySelector(\"svg\"))\n      .attr(\"width\", width + margin.right + margin.left)\n      .attr(\"height\", height + margin.top + margin.bottom)\n      .append(\"g\")\n      .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\n    this.svg  = svg\n    \n    this.i = 0;\n    \n    this.duration = 750\n    var root;\n\n    var treemap = d3.tree().size([height, width]);\n    this.treemap = treemap\n\n    root = d3.hierarchy(treeData, d => d.children );\n    root.x0 = height / 2;\n    root.y0 = 0;\n    this.root = root\n\n    // Collapse after the second level\n    root.children && root.children.forEach(ea => this.collapse(ea));\n    \n    this.update(root);\n    // d3.select(self.frameElement).style(\"height\", \"500px\");    \n  }\n  \n  // Collapse the node and all it's children\n  collapse(d) {\n    if(d.children) {\n      d._children = d.children\n      d._children.forEach(ea => this.collapse(ea))\n      d.children = null\n    }\n  }\n  \n  // Toggle children on click.\n  click(d) {\n    if (d.children) {\n      d._children = d.children;\n      d.children = null;\n    } else {\n      d.children = d._children;\n      d._children = null;\n    }\n    this.update(d);\n  }\n  \n  update(source) {\n\n    // Assigns the x and y position for the nodes\n    var treeData = this.treemap(this.root);\n    \n    // Compute the new tree layout\n    const nodes = treeData.descendants()\n    const links = treeData.descendants().slice(1) // links() // \n        \n    // Normalize for fixed-depth.\n    nodes.forEach((d) => { d.y = d.depth * 180; });\n\n    // Update the nodes…\n    var node = this.svg.selectAll(\"g.node\")\n      .data(nodes, (d) => d.id || (d.id = ++this.i));\n\n    // Enter any new nodes at the parent's previous position.\n    var nodeEnter = node.enter().append(\"g\")\n      .attr(\"class\", \"node\")\n      .attr(\"transform\", d => \"translate(\" + source.y0 + \",\" + source.x0 + \")\")\n      .on(\"click\", (d) => this.click(d));\n\n    // Add Circle for the nodes\n    nodeEnter.append(\"circle\")\n      .attr('class', 'node')\n      .attr(\"r\", 1e-6)\n      .style(\"fill\", d => d._children ? \"lightsteelblue\" : \"#fff\");\n\n    // Add labels for the nodes\n    nodeEnter.append(\"text\")\n      .attr(\"x\", d => d.children || d._children ? -13 : 13)\n      .attr(\"dy\", \".35em\")\n      .attr(\"text-anchor\", d  => d.children || d._children ? \"end\" : \"start\")\n      .text(d =>  this.dataName ? this.dataName(d.data) : d.data.name)\n    // .style(\"fill-opacity\", 1e-6);\n\n    // UPDATE\n    var nodeUpdate = nodeEnter.merge(node)\n        \n    // Transition nodes to their new position.\n    nodeUpdate.transition()\n      .duration(this.duration)\n      .attr(\"transform\", d => \"translate(\" + d.y + \",\" + d.x + \")\");\n    \n    \n    // Update the node attributes and style\n    nodeUpdate.select(\"circle.node\")\n      .attr(\"r\", 10)\n      .style(\"fill\", d => d._children ? \"lightsteelblue\" : \"#fff\")\n      .attr('cursor', 'pointer');\n\n    // nodeUpdate.select(\"text\")\n    //   .style(\"fill-opacity\", 1);\n\n    // Transition exiting nodes to the parent's new position.\n    var nodeExit = node.exit().transition()\n      .duration(this.duration)\n      .attr(\"transform\", d => \"translate(\" + source.y + \",\" + source.x + \")\")\n      .remove();\n\n    // On exit reduce the node circles size to 0\n    nodeExit.select(\"circle\")\n      .attr(\"r\", 1e-6);\n\n    // On exit reduce the opacity of text labels\n    nodeExit.select(\"text\")\n      .style(\"fill-opacity\", 1e-6);\n\n    // Update the links...\n    var link = this.svg.selectAll(\"path.link\")\n      .data(links, d => d.id);\n\n    // Enter any new links at the parent's previous position.\n    var linkEnter = link.enter().insert(\"path\", \"g\")\n      .attr(\"class\", \"link\")\n      .attr(\"d\", (d) => {\n        var o = {x: source.x0, y: source.y0};\n        return this.diagonal(o, o);\n      });\n\n    // UPDATE\n    var linkUpdate = linkEnter.merge(link);\n    \n     // Transition back to the parent element position\n    linkUpdate.transition()\n      .duration(this.duration)\n      .attr('d', d => {\n        return this.diagonal(d, d.parent)\n      })\n      \n    // Remove any exiting links\n    var linkExit = link.exit().transition()\n      .duration(d => this.duration)\n      .attr(\"d\", (d) => {\n        var o = {x: source.x, y: source.y};\n        return this.diagonal(o, o);\n      })\n      .remove();\n\n    // Stash the old positions for transition.\n    nodes.forEach(d => {\n      d.x0 = d.x;\n      d.y0 = d.y;\n    });\n  }  \n  \n  // Creates a curved (diagonal) path from parent to the child nodes\n  diagonal(s, d) {\n    var path = `M ${s.y} ${s.x}\n            C ${(s.y + d.y) / 2} ${s.x},\n              ${(s.y + d.y) / 2} ${d.x},\n              ${d.y} ${d.x}`\n    return path\n  }\n  \n  async livelyExample() {\n    this.setTreeData(await d3.json(lively4url + \"/src/components/demo/flare.json\"))\n  }\n  \n  livelyMigrate(other) {\n    this.treeData = other.treeData\n    this.dataName = other.dataName\n    this.bounds = other.bounds\n  }\n  \n}\n"]}