Updating with coloured boxes

readme.md

@@ -1,5 +1,7 @@
 # rehype-jsoncanvas
 
+NOTE: This project is currently in development/prove of concept stage and isn't usable in a project. But feel free to fork, PR, or add issues if you have requests.
+
 ## What does this do?
 
 A rehype plugin that renders a [json-canvas](https://jsoncanvas.org/) element, probably downstream from a markdown file.
@@ -16,6 +18,19 @@ Parses the html content (If it's from markdown, usually after the markdown has b
 
 ## Use
 
+This is an example of using Unified to render out the base.md markdown. Basically you need to process the markdown first, then transform the markdown rehype. The plugin will then look for rendered images with a .canvas extension to render out the jsonCanvas.
+
+```js
+const md = await unified()
+  .use(parser)
+  .use(mdast2hast)
+  .use(remarkGfm)
+  .use(remarkRehype)
+  .use(rehypeJsonCanvas)
+  .use(compiler, production)
+  .process(markdown);
+```
+
 See [base.md](example/base.md) for an examples. A simple react app lives [in this repo](hhttps://github.com/lovettbarron/shims/tree/main/rehype-jsoncanvas) to see how it might be used.
 
 ## References along the way

src/jsoncanvas.ts

@@ -10,7 +10,7 @@ export function render(jsc: JSONCanvas, options: object): String | null {
   console.log("render", jsc, options);
 
   // Init Canvas objects
-  const { canvas, ctx } = initRender("jsc", 800, 600);
+  const { canvas, ctx } = initRender("jsc", 1280, 960);
 
   if (canvas === null || ctx === null) return null;
 
@@ -58,16 +58,36 @@ function drawNode(
   ctx: CanvasRenderingContext2D,
   node: GenericNode | any
 ) {
+  console.log("Drawing Node", node);
+
+  ctx.fillStyle = "rgba(255, 255, 255, .5)";
+
   ctx.beginPath();
-  ctx.rect(
+  if (node.color === "1") {
+    ctx.fillStyle = "rgba(255, 0, 0, .5)";
+  } else if (node.color === "2") {
+    ctx.fillStyle = "rgba(255, 100, 0, .5)";
+  } else if (node.color === "3") {
+    ctx.fillStyle = "rgba(255, 255, 0, .5)";
+  } else if (node.color === "4") {
+    ctx.fillStyle = "rgba(0, 255, 100, .5)";
+  } else if (node.color === "5") {
+    ctx.fillStyle = "rgba(0, 255, 255, .5)";
+  } else if (node.color === "6") {
+    ctx.fillStyle = "rgba(100, 10, 100, .5)";
+  }
+  ctx.roundRect(
     node.x + canvas.width / 2,
     node.y + canvas.height / 2,
     node.width,
-    node.height
+    node.height,
+    [5]
   );
   ctx.stroke();
+  ctx.fill();
   ctx.closePath();
 
+  ctx.fillStyle = "rgba(0, 0, 0, .5)";
   if (node.label) {
     ctx.fillText(
       node.label,
@@ -93,9 +113,19 @@ function drawEdge(
   edge: Edge | any
 ) {
   if (fromNode && toNode) {
-    let startX = fromNode.x + fromNode.width + canvas.width / 2;
+    let startX =
+      fromNode.x +
+      (edge.fromSide == "top" || edge.fromSide == "bottom"
+        ? fromNode.width / 2
+        : fromNode.width) +
+      canvas.width / 2;
     let startY = fromNode.y + fromNode.height / 2 + canvas.height / 2;
-    let endX = toNode.x + canvas.width / 2;
+    let endX =
+      toNode.x +
+      (edge.toSide == "top" || edge.toSide == "bottom"
+        ? toNode.width / 2
+        : toNode.width) +
+      canvas.width / 2;
     let endY = toNode.y + toNode.height / 2 + canvas.height / 2;
 
     if (edge.fromSide === "left") {
@@ -112,11 +142,35 @@ function drawEdge(
       endY = toNode.y + canvas.height / 2;
     } else if (edge.toSide === "bottom") {
       endY = toNode.y + toNode.height + canvas.height / 2;
+    } else if (edge.toSide === "left") {
+      endX = toNode.x + canvas.width / 2;
     }
+
     ctx.beginPath();
     ctx.moveTo(startX, startY);
     ctx.lineTo(endX, endY);
     ctx.stroke();
     ctx.closePath();
+
+    // Draw arrowhead
+    const headlen = 10; // length of head in pixels
+    const angle = Math.atan2(endY - startY, endX - startX);
+    ctx.beginPath();
+    ctx.moveTo(endX, endY);
+    ctx.lineTo(
+      endX - headlen * Math.cos(angle - Math.PI / 6),
+      endY - headlen * Math.sin(angle - Math.PI / 6)
+    );
+    ctx.lineTo(
+      endX - headlen * Math.cos(angle + Math.PI / 6),
+      endY - headlen * Math.sin(angle + Math.PI / 6)
+    );
+    ctx.lineTo(endX, endY);
+    ctx.lineTo(
+      endX - headlen * Math.cos(angle - Math.PI / 6),
+      endY - headlen * Math.sin(angle - Math.PI / 6)
+    );
+    ctx.stroke();
+    ctx.fill();
   }
 }

src/plugin.ts

@@ -62,9 +62,12 @@ export const rehypeJsonCanvas: Plugin<[], Root> = () => {
 
       console.log(canvas);
 
-      const canvasHast = fromHtmlIsomorphic(`<img alt='' src='${canvas}' />`, {
-        fragment: true,
-      });
+      const canvasHast = fromHtmlIsomorphic(
+        `<img alt='' src='${canvas}' style='width:100%' />`,
+        {
+          fragment: true,
+        }
+      );
       node.properties = {
         ...node.properties,
       };