1 files changed, 23 insertions, 47 deletions

diff --git a/src/index.js b/src/index.js
index 7e9cdc6..2fbbcce 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,8 +1,8 @@
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 import * as jsonld from 'jsonld';
-import dagre from 'dagre';
 import * as dom from './dom';
+import * as layout from './layout';
 import { Note } from './ui';
 
 dom.css`
@@ -50,26 +50,21 @@ const loadData = async () => {
 const article = document.createElement('article');
 document.body.appendChild(article);
 
-loadData().then(data => {
-  const graph = new dagre.graphlib.Graph();
+loadData().then(async (data) => {
+  let state = layout.init();
 
   article.textContent = '';
   const canvas = document.createElement('canvas');
   article.appendChild(canvas);
 
-  graph.setGraph({
-    rankSep: 20,
-    nodeSep: 40,
-  });
-  graph.setDefaultEdgeLabel(() => ({}));
-
-  let rootId;
-
   const indexedData = {};
   for (const data of data['@graph'])
     indexedData[data.id] = data;
 
   window.dagData = indexedData;
+  const graph = {};
+
+  let rootId;
 
   for (const data of data['@graph']) {
     if (data.inReplyTo.length === 0)
@@ -89,45 +84,26 @@ loadData().then(data => {
     );
     article.appendChild(dom);
 
-    graph.setNode(data.id, {
+    const node = {
       dom, data,
       width: dom.offsetWidth,
       height: dom.offsetHeight,
-    });
-
-    for (const reply of data.replies || []) {
-      graph.setEdge(data.id, reply);
-    }
-  }
-
-  dagre.layout(graph);
-  const info = graph.graph();
-
-  canvas.width = info.width;
-  canvas.height = info.height;
-
-  for (const id of graph.nodes()) {
-    const node = graph.node(id);
-    node.dom.style.left = `${node.x - node.width / 2}px`;
-    node.dom.style.top = `${node.y - node.height / 2}px`;
-  }
-
-  const ctx = canvas.getContext('2d');
-  ctx.lineWidth = 4;
-  ctx.lineCap = 'round';
-  ctx.lineJoin = 'round';
-  ctx.strokeStyle = '#696969';
-
-  for (const eo of graph.edges()) {
-    const edge = graph.edge(eo);
-
-    ctx.beginPath();
-    ctx.moveTo(edge.points[0].x, edge.points[0].y);
-    for (const p of edge.points.slice(1))
-      ctx.lineTo(p.x, p.y);
-    ctx.stroke();
+    };
+    graph[data.id] = node;
+    state = layout.addNode(state, node);
   }
 
-  const rootNode = graph.node(rootId);
-  window.scrollTo(rootNode.x - window.innerWidth / 2, rootNode.y);
+  await layout.render(state, canvas,
+    (id, x, y) => {
+      const dom = graph[id].dom;
+      dom.style.left = `${x - dom.offsetWidth/2}px`;
+      dom.style.top = `${y - dom.offsetHeight/2}px`;
+    },
+  	(width, height) => {
+      canvas.width = width;
+      canvas.height = height;
+    },
+  );
+
+  graph[rootId].dom.scrollIntoView();
 });