Really don't get what's going on with the image thing here

lovettbarron · Jul 2, 2024 · 66c7ea0 · 66c7ea0
1 parent 8cbf5b3
commit 66c7ea0
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 24 deletions.
diff --git a/src/embed.ts b/src/embed.ts
@@ -7,7 +7,20 @@ import html2canvas from "html2canvas";
 import { GenericNode } from "@trbn/jsoncanvas";
 
 import { loadImage, Canvas, CanvasRenderingContext2D } from "canvas";
-//   import { applyDefaults, Options } from "./options";
+// import { applyDefaults, Options } from "./options";
+
+const imagesLoaded = [] as Array<any>;
+
+export function checkImagesLoaded(callback: Function) {
+  let allLoaded = imagesLoaded.every((el) => el.complete);
+  console.group("Images loading", imagesLoaded, allLoaded);
+  if (imagesLoaded.length < 1) return callback();
+  return callback();
+  //   if (allLoaded)
+
+  //     callback();
+  //   else checkImagesLoaded(callback);
+}
 
 // This renders out the images
 export async function drawEmbedded(
@@ -22,18 +35,20 @@ export async function drawEmbedded(
       console.log("img", img);
 
       const aspect = img.width / img.height;
-
-      ctx.drawImage(
-        img,
-        0,
-        0,
-        img.width,
-        img.height,
-        node.width - node.width / aspect,
-        node.height - node.height / aspect,
-        node.width / aspect,
-        node.height / aspect
-      );
+      img.onload = () => {
+        ctx.drawImage(
+          img,
+          0,
+          0,
+          img.width,
+          img.height,
+          node.width - node.width / aspect,
+          node.height - node.height / aspect,
+          node.width / aspect,
+          node.height / aspect
+        );
+      };
+      imagesLoaded.push(img);
     }
   }
 }
@@ -60,28 +75,31 @@ export async function drawMarkdownEmbed(
 
       div.style.width = `${node.width}px`;
       div.style.height = `${node.height}px`;
+      div.style.color = "black";
+      div.style.backgroundColor = "red";
       div.style.position = "absolute";
-      div.style.left = "-9999px";
+      //   div.style.left = "-9999px";
       document.body.appendChild(div);
 
       // Use html2canvas to render the div to an image
       const canvasElement = await html2canvas(div);
       const img = new Image(node.width, node.height) as any;
-      img.src = canvasElement.toDataURL();
-      img.onload = () => {
-        ctx.drawImage(
+      img.onload = async () => {
+        await ctx.drawImage(
           img,
           node.x + canvas.width / 2,
           node.y + canvas.height / 2,
           node.width,
           node.height
         );
-      };
 
-      console.log("Markdown", img);
+        console.log("Markdown", img);
 
-      // Cleanup
-      document.body.removeChild(div);
+        // Cleanup
+        document.body.removeChild(div);
+      };
+      img.src = canvasElement.toDataURL();
+      imagesLoaded.push(img);
     }
   }
 }
diff --git a/src/jsoncanvas.ts b/src/jsoncanvas.ts
@@ -9,7 +9,7 @@ export function validate(jsonCanvasData: JSONCanvas) {
   return true;
 }
 
-import { drawEmbedded, drawMarkdownEmbed } from "./embed";
+import { drawEmbedded, drawMarkdownEmbed, checkImagesLoaded } from "./embed";
 
 export function render(
   jsc: JSONCanvas,
@@ -45,11 +45,17 @@ export function render(
       drawEdge(canvas, ctx, toNode, fromNode, edge, options);
   });
 
+  return checkImagesLoaded(() => renderToBuffer(canvas));
+}
+
+function renderToBuffer(canvas: Canvas, config?: Partial<Options>) {
+  const options = applyDefaults(config);
+
   if (options.renderMode == "svg" || options.renderMode == "canvas") {
     if (typeof window !== "undefined") {
-      return canvas.toDataURL(); // This isnøt the right approach
+      return canvas.toDataURL(); // This isn't the right approach
     } else {
-      return canvas && canvas.toBuffer(); // How to define as svg tho?
+      return canvas && canvas.toBuffer(); // svg declaration is on canvas
     }
   } else return canvas.toDataURL();
 }