diff --git a/src/embed.ts b/src/embed.ts index 4a4fd0c..aa9afcc 100644 --- a/src/embed.ts +++ b/src/embed.ts @@ -8,17 +8,6 @@ import type { GenericNode } from "@trbn/jsoncanvas" // import { applyDefaults, Options } from "./options"; import { getCanvasFromEmbed } from "./plugin" -const imagesLoaded = [] as Array - -export function checkImagesLoaded(callback: Function) { - const 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( svg: Element, @@ -28,8 +17,8 @@ export async function drawEmbedded( if (node.type === "file" && svg) { if (node.file.match(/\.(jpg|jpeg|png|gif)$/i)) { const image = s("image", { - x: 5 + node.x + svg.properties!.renWidth / 2, - y: 5 + node.y + svg.properties!.renHeight / 2, + x: 5 + node.x + svg.properties.renWidth / 2, + y: 5 + node.y + svg.properties.renHeight / 2, width: node.width - 10, height: node.height - 10, "xlink:href": node.file, @@ -55,8 +44,8 @@ export async function drawMarkdownEmbed( // Ref: https://stackoverflow.com/questions/45518545/svg-foreignobject-not-showing-on-any-browser-why const embed = s("foreignObject", { - x: 5 + node.x + svg.properties!.renWidth / 2, - y: 5 + node.y + svg.properties!.renHeight / 2, + x: 5 + node.x + svg.properties.renWidth / 2, + y: 5 + node.y + svg.properties.renHeight / 2, width: node.width - 10, height: node.height - 10, }) diff --git a/src/jsoncanvas.ts b/src/jsoncanvas.ts index fd2ce70..08a7122 100644 --- a/src/jsoncanvas.ts +++ b/src/jsoncanvas.ts @@ -5,20 +5,20 @@ import type { Edge, GenericNode, JSONCanvas } from "@trbn/jsoncanvas" import { type Options, applyDefaults } from "./options" -import { checkImagesLoaded, drawEmbedded, drawMarkdownEmbed } from "./embed" +import { drawEmbedded, drawMarkdownEmbed } from "./embed" function calculateMinimumCanvasSize(canvas: JSONCanvas) { - let minX = Number.POSITIVE_INFINITY, - minY = Number.POSITIVE_INFINITY, - maxX = Number.NEGATIVE_INFINITY, - maxY = Number.NEGATIVE_INFINITY + let minX = Number.POSITIVE_INFINITY + let minY = Number.POSITIVE_INFINITY + let maxX = Number.NEGATIVE_INFINITY + let maxY = Number.NEGATIVE_INFINITY - canvas.getNodes().forEach((node) => { + for (const node in canvas.getNodes()) { minX = Math.min(minX, node.x) minY = Math.min(minY, node.y) maxX = Math.max(maxX, node.x + node.width) maxY = Math.max(maxY, node.y + node.height) - }) + } const canvasWidth = maxX - minX const canvasHeight = maxY - minY @@ -47,19 +47,19 @@ export function render( if (svg === null) return null // Draw nodes - jsc.getNodes().forEach((node) => { + for (const node in jsc.getNodes()) { drawNode(svg, node, options) - }) + } // Draw Edges - jsc.getEdges().forEach((edge) => { + for (const edge in jsc.getEdges()) { const fromNode = jsc.getNodes().find((node) => node.id === edge.fromNode) const toNode = jsc.getNodes().find((node) => node.id === edge.toNode) if (toNode !== undefined && fromNode !== undefined) drawEdge(svg, toNode, fromNode, edge, options) - }) + } - return checkImagesLoaded(() => renderToBuffer(svg)) + return renderToBuffer(svg) } function renderToBuffer(svg: Element, config?: Partial): Element { @@ -197,7 +197,7 @@ function drawEdge( config?: Partial, ) { const options = applyDefaults(config) - if (svg === null || svg == undefined) return + if (svg === null || svg === undefined) return const cWidth = svg.properties.renWidth || (1 as number) const cHeight = svg.properties.renHeight || (1 as number) diff --git a/src/plugin.ts b/src/plugin.ts index aaf25ab..5f68217 100644 --- a/src/plugin.ts +++ b/src/plugin.ts @@ -1,5 +1,5 @@ -import fs from "fs" -import path from "path" +import fs from "node:fs" +import path from "node:path" import JSONCanvas from "@trbn/jsoncanvas" import type { Element, Root } from "hast" import { h } from "hastscript" @@ -53,7 +53,7 @@ export const rehypeJsonCanvas: Plugin<[], Root> = () => { const jsonCanvasFromString = JSONCanvas.fromString(canvasMarkdown) - let canvas + let canvas = null if (validate(jsonCanvasFromString)) { canvas = render(jsonCanvasFromString, {}) @@ -61,20 +61,13 @@ export const rehypeJsonCanvas: Plugin<[], Root> = () => { canvas = h("div", "
Not a properly formatted JsonCanvas
") } - console.log(canvas) - - // const canvasHast = fromHtmlIsomorphic( - // ``, - // { - // fragment: true, - // } - // ); + if (!canvas) return node.properties = { ...node.properties, } node.tagName = "div" node.children = [] - node.children.push(canvas!) //canvasHast.children as ElementContent[]; + node.children.push(canvas) } } } @@ -90,7 +83,9 @@ export async function getCanvasFromEmbed( if (webcheck.startsWith("https://") || typeof window !== "undefined") { await fetch(markdownPath) .then((res) => res.text()) - .then((text) => (canvasMarkdown = text)) + .then((text) => { + canvasMarkdown = text + }) } else { // To accomodate ssr const ssrPath = options.assetPath