arrowheads

1 files changed, 10 insertions, 53 deletions

diff --git a/src/layout.js b/src/layout.js
index 4762f4a..a19bc00 100644
--- a/src/layout.js
+++ b/src/layout.js
@@ -40,6 +40,7 @@ export const render = async (dot, canvas, setPosition, setSize) => {
   ctx.lineCap = 'round';
   ctx.lineJoin = 'round';
   ctx.strokeStyle = '#696969';
+  ctx.fillStyle = '#696969';
 
   for (const edge of info.edges) {
     const pos = edge.pos.slice(2);
@@ -56,61 +57,17 @@ export const render = async (dot, canvas, setPosition, setSize) => {
       const [x, y] = points[i];
       ctx.bezierCurveTo(ax, ay, bx, by, x, y);
     }
-    ctx.lineTo(...points[0]);
     ctx.stroke();
-  }
-}
-
-/*
-import * as dagre from 'dagre';
-
-export const init = () => {
-  const graph = new dagre.graphlib.Graph();
-
-  graph.setGraph({
-    rankSep: 20,
-    nodeSep: 40,
-  });
-  graph.setDefaultEdgeLabel(() => ({}));
-
-  return graph;
-};
-
-export const addNode = (graph, node) => {
-  graph.setNode(node.data.id, node);
-
-  for (const reply of node.data.replies || []) {
-    graph.setEdge(node.data.id, reply);
-  }
-
-  return graph;
-};
 
-export const render = (graph, canvas, setPosition, setSize) => {
-  dagre.layout(graph);
-  const info = graph.graph();
-
-	setSize(info.width, info.height);
-
-  for (const id of graph.nodes()) {
-    const node = graph.node(id);
-    setPosition(node, node.x, node.y);
-  }
-
-  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);
+    const [lx, ly] = points[points.length - 1];
+    const [tx, ty] = points[0];
+    const [dx, dy] = [tx - lx, ty - ly];
+    const [hx, hy] = [dy*0.7, dx*-0.7];
 
     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();
+    ctx.moveTo(lx + dx*0.8, ly + dy*0.8);
+    ctx.lineTo(lx - dx*0.5 + hx, ly - dy*0.5 + hy);
+    ctx.lineTo(lx - dx*0.5 - hx, ly - dy*0.5 - hy);
+    ctx.fill();
   }
-};
-*/
+}