Image and embed working

lovettbarron · Jul 5, 2024 · fcd184e · fcd184e
1 parent 1ec826d
commit fcd184e
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 24 deletions.
diff --git a/src/embed.ts b/src/embed.ts
@@ -20,24 +20,32 @@ export function checkImagesLoaded(callback: Function) {
 }
 
 // This renders out the images
-export async function drawEmbedded(svg: Element, node: GenericNode | any) {
+export async function drawEmbedded(
+  svg: Element,
+  grp: Element,
+  node: GenericNode | any
+) {
   if (node.type === "file" && svg) {
     if (node.file.match(/\.(jpg|jpeg|png|gif)$/i)) {
       const image = s("image", {
-        x: node.x,
-        y: node.y,
-        width: node.width,
-        height: node.height,
+        x: 5 + node.x + <number>svg.properties!.renWidth / 2,
+        y: 5 + node.y + <number>svg.properties!.renHeight / 2,
+        width: node.width - 10,
+        height: node.height - 10,
         "xlink:href": node.file,
       });
 
-      svg.children.push(image);
+      grp.children.push(image);
     }
   }
 }
 
 // This renders out the images
-export async function drawMarkdownEmbed(svg: Element, node: GenericNode | any) {
+export async function drawMarkdownEmbed(
+  svg: Element,
+  grp: Element,
+  node: GenericNode | any
+) {
   if (node.type === "file" && svg) {
     if (node.file.match(/\.(md|mdx)$/i)) {
       const mdFile = await getCanvasFromEmbed(node.file);
@@ -47,14 +55,14 @@ export async function drawMarkdownEmbed(svg: Element, node: GenericNode | any) {
 
       // Ref: https://stackoverflow.com/questions/45518545/svg-foreignobject-not-showing-on-any-browser-why
       const embed = s("foreignObject", {
-        x: node.x,
-        y: node.y,
-        width: node.width,
-        height: node.height,
+        x: 5 + node.x + <number>svg.properties!.renWidth / 2,
+        y: 5 + node.y + <number>svg.properties!.renHeight / 2,
+        width: node.width - 10,
+        height: node.height - 10,
       });
       embed.children.push(hast as Element); // If this breaks, this is probably the spot it breaks
 
-      svg.children.push(embed);
+      grp.children.push(embed);
     }
   }
 }
diff --git a/src/jsoncanvas.ts b/src/jsoncanvas.ts
@@ -148,24 +148,24 @@ async function drawNode(
 
   group.children.push(rect);
 
-  drawEmbedded(svg, node);
-  drawMarkdownEmbed(svg, node);
+  drawEmbedded(svg, group, node);
+  drawMarkdownEmbed(svg, group, node);
 
   // ctx.fillStyle = "rgba(0, 0, 0, 1)";
   if (node.label) {
-    // ctx.fillText(
-    //   node.label,
-    //   node.x + 5 + canvas.width / 2,
-    //   node.y + 20 + canvas.height / 2
-    // );
+    s("text", {
+      x: node.x + 5 + <number>svg.properties!.renWidth / 2,
+      y: node.y + 10 + <number>svg.properties!.renHeight / 2,
+      children: node.label,
+    });
   }
 
   if (node.type === "text" && node.text) {
-    // ctx.fillText(
-    //   node.text,
-    //   node.x + 5 + canvas.width / 2,
-    //   node.y + 40 + canvas.height / 2
-    // );
+    s("text", {
+      x: node.x + 5 + <number>svg.properties!.renWidth / 2,
+      y: node.y + 40 + <number>svg.properties!.renHeight / 2,
+      children: node.label,
+    });
   }
 
   svg.children.push(group);