{"version":3,"sources":["https://lively-kernel.org/lively4/lively4-stable/templates/blockchain-node-view.js"],"names":["Morph","d3","BlockchainNode","TransactionNetworkView","BlockNetworkView","BlockchainNodeView","initialize","windowTitle","_svg","shadowRoot","querySelector","nodeClickHandler","node","console","log","name","_displayedNodes","_displayedLinks","_newNodes","_newLinks","setAttribute","offsetWidth","offsetHeight","reset","addNode","push","addNodes","nodes","concat","addLink","link","addLinks","links","resize","width","height","draw","that","allNodes","allLinks","svg","select","attr","newMarker","oldMarker","selectAll","remove","force","layout","gravity","distance","Math","min","charge","size","start","_addMarker","data","enter","append","classed","each","d","i","length","classList","add","call","drag","on","text","source","x","y","target","markerName","animation","marker","String","livelyExample","node1","node2","mine","Promise","sleep","setTimeout","tx1","sendTransaction","wallet","value","tx2","view","blockchain","forEach","block","addBlock","__livelyExample2"],"mappings":"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","file":"blockchain-node-view.js","sourcesContent":["import Morph from 'src/components/widgets/lively-morph.js';\nimport d3 from 'src/external/d3.v3.js';\n\nimport BlockchainNode from 'src/blockchain/model/blockchainNode/blockchainNode.js';\nimport TransactionNetworkView from 'src/blockchain/view/transactionNetworkView.js';\n\nimport BlockNetworkView from 'src/blockchain/view/blockNetworkView.js';\n\nexport default class BlockchainNodeView extends Morph {\n  async initialize() {\n    this.windowTitle = \"BlockchainNodeView\";\n    this._svg = this.shadowRoot.querySelector(\"#svgContainer\");\n    \n    this.nodeClickHandler = (node) => { console.log(\"click! --> \" + node.name); }\n    this._displayedNodes = [];\n    this._displayedLinks = [];\n    this._newNodes = [];\n    this._newLinks = [];\n    this._svg.setAttribute('width', this.shadowRoot.querySelector(\"#content\").offsetWidth);\n    this._svg.setAttribute('height', this.shadowRoot.querySelector(\"#content\").offsetHeight);\n  }\n  \n  reset() {\n    this._displayedNodes = [];\n    this._displayedLinks = [];\n    this._newNodes = [];\n    this._newLinks = [];\n  }\n  \n  addNode(node) {\n    this._newNodes.push(node);\n    return this;\n  }\n  \n  addNodes(nodes) {\n    this._newNodes = this._newNodes.concat(nodes);\n    return this;\n  }\n  \n  addLink(link) {\n    this._newLinks.push(link);\n    return this;\n  }\n  \n  addLinks(links) {\n    this._newLinks = this._newLinks.concat(links);\n    return this;\n  }\n  \n  resize(width, height) {\n    this._svg.setAttribute(\"width\", width);\n    this._svg.setAttribute(\"height\", height);\n    return this;\n  }\n  \n  draw() {\n    const that = this;\n    const allNodes = this._displayedNodes.concat(this._newNodes);\n    const allLinks = this._displayedLinks.concat(this._newLinks);\n    const svg = d3.select(this._svg);\n    const width = svg.attr(\"width\");\n    const height = svg.attr(\"height\");\n    const newMarker = \"newEnd\";\n    const oldMarker = \"oldEnd\";\n    \n    // remove all elements before drawing new ones\n    svg.selectAll(\"*\").remove();\n    \n    const force = d3.layout.force()\n      .gravity(0.05)\n      .distance(Math.min(width, height) / 4)\n      .charge(-100)\n      .size([width, height]);\n    \n    force\n      .nodes(allNodes)\n      .links(allLinks)\n      .start();\n    \n    this._addMarker(svg, oldMarker, false);\n    this._addMarker(svg, newMarker, true);\n\n    const link = svg.selectAll(\".link\")\n      .data(allLinks)\n      .enter()\n      .append(\"line\")\n      .classed(\"link\", true)\n      .each(function(d, i) {\n        if (i < that._displayedLinks.length) {\n          this.setAttribute(\"marker-end\", \"url(#\" + oldMarker + \")\")\n          return;\n        }\n        \n        // overwrite marker end with new marker\n        this.classList.add(\"animationStroke\");\n        this.setAttribute(\"marker-end\", \"url(#\" + newMarker + \")\")\n      });\n\n    const node = svg.selectAll(\".node\")\n      .data(allNodes)\n      .enter()\n      .append(\"g\")\n      .call(force.drag)\n      .classed(\"node\", true)\n      .on(\"click\", function(d) {\n        if (!that.nodeClickHandler) {\n          return;\n        }\n        \n        that.nodeClickHandler(d);\n      })\n      .each(function(d, i) {\n        if (i < that._displayedNodes.length) {\n          // must be an old node\n          return;\n        }\n        \n        this.classList.add(\"animationFill\");\n      });\n    \n    node\n      .append(\"circle\")\n      .classed(\"bubble\", true)\n      .each(function(d, i) {\n        if (i < that._displayedNodes.length) {\n          // must be an old node\n          return;\n        }\n\n        this.classList.add(\"animationFill\");\n      });\n    \n    node.append(\"text\")\n      .attr(\"dx\", 12)\n      .attr(\"dy\", \".35em\")\n      .text(function(d) { return d.name });\n    \n    \n    force.on(\"tick\", function() {\n      link\n          .attr(\"x1\", function(d) { return d.source.x; })\n          .attr(\"y1\", function(d) { return d.source.y; })\n          .attr(\"x2\", function(d) { return d.target.x; })\n          .attr(\"y2\", function(d) { return d.target.y; });\n      \n      node.attr(\"transform\", function(d) { return \"translate(\" + d.x + \",\" + d.y + \")\"; });\n    });\n    \n    this._displayedNodes = allNodes;\n    this._displayedLinks = allLinks;\n    this._newNodes = [];\n    this._newLinks = [];\n  }\n  \n  _addMarker(svg, markerName, animation) {\n    // build the arrow.\n    const marker = svg.append(\"svg:defs\").selectAll(\"marker\")\n      .data([markerName])      // Different link/path types can be defined here\n      .enter().append(\"svg:marker\")    // This section adds in the arrows\n      .attr(\"id\", String)\n      .attr(\"viewBox\", \"0 -5 10 10\")\n      .attr(\"refX\", 15)\n      .attr(\"refY\", -1.5)\n      .attr(\"markerWidth\", 6)\n      .attr(\"markerHeight\", 6)\n      .attr(\"orient\", \"auto\")\n      .append(\"svg:path\")\n      .attr(\"d\", \"M0,-5L10,0L0,5\")\n      .classed(\"linkEnd\", true);\n    \n    if (!animation) {\n      return marker;\n    }\n    \n    return marker.classed(\"animationFill\", true);\n  }\n  \n  async livelyExample() {\n    const node1 = new BlockchainNode();\n    const node2 = new BlockchainNode();\n    \n    node1.mine();\n    await new Promise(sleep => setTimeout(sleep, 3000));\n    \n    const tx1 = node1.sendTransaction([\n      {\"receiver\": node2.wallet, \"value\": node1.wallet.value / 2}\n    ]);\n    \n    node1.mine();\n    await new Promise(sleep => setTimeout(sleep, 3000));\n    \n    const tx2 = node2.sendTransaction([\n      {\"receiver\": node1.wallet, \"value\": node2.wallet.value / 2},\n    ]);\n    \n    /*\n    const view = new TransactionNetworkView(this)\n      .addTransactions([\n        tx1,\n        tx2,\n      ]);\n    */\n    \n    const view = new BlockNetworkView(this);\n    \n    node1.blockchain.forEach((block) => view.addBlock(block));\n    \n    view.draw();\n  }\n  \n  async __livelyExample2() {\n    this._newNodes = [\n      {\n        \"name\": \"#1234567890\",\n        \"group\": 1\n      },\n      {\n        \"name\": \"#0987654321\",\n        \"group\": 1\n      },\n      {\n        \"name\": \"#abcdef1234\",\n        \"group\": 1\n      },\n      {\n        \"name\": \"#0123abcdef\",\n        \"group\": 1\n      }\n    ];\n    \n    this._newLinks = [\n      {\n        \"source\": 0,\n        \"target\": 1,\n        \"value\": 1\n      },\n      {\n        \"source\": 0,\n        \"target\": 2,\n        \"value\": 1\n      },\n      {\n        \"source\": 0,\n        \"target\": 3,\n        \"value\": 1\n      }\n    ];\n    \n    this.draw();\n\n  }\n}"]}