From 4ed4db5656b8da0cd93314423781a561846f9157 Mon Sep 17 00:00:00 2001 From: Andrew Lovett-Barron Date: Mon, 8 Jul 2024 09:32:25 +0200 Subject: [PATCH] Ran check --- src/jsoncanvas.ts | 174 +++++++++++++++++++++++----------------------- src/plugin.ts | 82 +++++++++++----------- 2 files changed, 128 insertions(+), 128 deletions(-) diff --git a/src/jsoncanvas.ts b/src/jsoncanvas.ts index 8fbb146..c421355 100644 --- a/src/jsoncanvas.ts +++ b/src/jsoncanvas.ts @@ -1,80 +1,80 @@ -import type { Element } from "hast"; -import { s } from "hastscript"; +import type { Element } from "hast" +import { s } from "hastscript" -import type { Edge, GenericNode, JSONCanvas } from "@trbn/jsoncanvas"; +import type { Edge, GenericNode, JSONCanvas } from "@trbn/jsoncanvas" -import { type Options, applyDefaults } from "./options"; +import { type Options, applyDefaults } from "./options" -import { drawEmbedded, drawMarkdownEmbed } from "./embed"; +import { drawEmbedded, drawMarkdownEmbed } from "./embed" function calculateMinimumCanvasSize(jsc: JSONCanvas) { - let minX = Number.POSITIVE_INFINITY; - let minY = Number.POSITIVE_INFINITY; - let maxX = Number.NEGATIVE_INFINITY; - let maxY = Number.NEGATIVE_INFINITY; + let minX = Number.POSITIVE_INFINITY + let minY = Number.POSITIVE_INFINITY + let maxX = Number.NEGATIVE_INFINITY + let maxY = Number.NEGATIVE_INFINITY for (const node of jsc.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); + 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; + const canvasWidth = maxX - minX + const canvasHeight = maxY - minY - return { canvasWidth, canvasHeight, offsetX: -minX, offsetY: -minY }; + return { canvasWidth, canvasHeight, offsetX: -minX, offsetY: -minY } } export function validate(jsonCanvasData: JSONCanvas) { // Use the typescript lib to vlaidate? - console.log("Validate!", jsonCanvasData); - return true; + console.log("Validate!", jsonCanvasData) + return true } export function render( jsc: JSONCanvas, - config?: Partial + config?: Partial, ): Element | null { - const options = applyDefaults(config); + const options = applyDefaults(config) const { canvasWidth, canvasHeight, offsetX, offsetY } = - calculateMinimumCanvasSize(jsc); + calculateMinimumCanvasSize(jsc) // Init Canvas objects - const svg = initRender(canvasWidth + offsetX, canvasHeight + offsetY); + const svg = initRender(canvasWidth + offsetX, canvasHeight + offsetY) - if (svg === null) return null; + if (svg === null) return null // Draw nodes for (const node of jsc.getNodes()) { - drawNode(svg, node, options); + drawNode(svg, node, options) } // Draw Edges for (const edge of jsc.getEdges()) { - const fromNode = jsc.getNodes().find((node) => node.id === edge.fromNode); - const toNode = jsc.getNodes().find((node) => node.id === edge.toNode); + 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); + drawEdge(svg, toNode, fromNode, edge, options) } - return renderToBuffer(svg); + return renderToBuffer(svg) } function renderToBuffer(svg: Element, config?: Partial): Element { - const options = applyDefaults(config); - console.log("Rendering", svg, options); - return svg; + const options = applyDefaults(config) + console.log("Rendering", svg, options) + return svg } function initRender( width: number, height: number, - config?: Partial + config?: Partial, ): Element { - const options = applyDefaults(config); - console.log(options); + const options = applyDefaults(config) + console.log(options) const BASE_SVG_PROPS = { version: "1.1", xmlns: "http://www.w3.org/2000/svg", @@ -85,7 +85,7 @@ function initRender( "fill-rule": "evenodd", fill: "currentColor", stroke: "currentColor", - }; + } const props = { ...BASE_SVG_PROPS, @@ -95,44 +95,44 @@ function initRender( renHeight: height as number, viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "none", - }; + } - const svg = s("svg", props); - svg.properties; - return svg; + const svg = s("svg", props) + svg.properties + return svg } async function drawNode( svg: Element, node: GenericNode | any, - config?: Partial + config?: Partial, ) { - const options = applyDefaults(config); + const options = applyDefaults(config) - let fillStyle = "rgba(255, 255, 255, .5)"; - let strokeStyle = "rgba(0,0,0,1)"; + let fillStyle = "rgba(255, 255, 255, .5)" + let strokeStyle = "rgba(0,0,0,1)" if (node.color === "1") { - fillStyle = "rgba(255, 0, 0, .5)"; - strokeStyle = "rgba(255,0,0,1)"; + fillStyle = "rgba(255, 0, 0, .5)" + strokeStyle = "rgba(255,0,0,1)" } else if (node.color === "2") { - fillStyle = "rgba(255, 100, 0, .5)"; - strokeStyle = "rgba(255,100,0,1)"; + fillStyle = "rgba(255, 100, 0, .5)" + strokeStyle = "rgba(255,100,0,1)" } else if (node.color === "3") { - fillStyle = "rgba(255, 255, 0, .5)"; - strokeStyle = "rgba(255,255,0,1)"; + fillStyle = "rgba(255, 255, 0, .5)" + strokeStyle = "rgba(255,255,0,1)" } else if (node.color === "4") { - fillStyle = "rgba(0, 255, 100, .5)"; - strokeStyle = "rgba(0,100,0,1)"; + fillStyle = "rgba(0, 255, 100, .5)" + strokeStyle = "rgba(0,100,0,1)" } else if (node.color === "5") { - fillStyle = "rgba(0, 255, 255, .5)"; - strokeStyle = "rgba(0,255,255,1)"; + fillStyle = "rgba(0, 255, 255, .5)" + strokeStyle = "rgba(0,255,255,1)" } else if (node.color === "6") { - fillStyle = "rgba(100, 10, 100, .5)"; - strokeStyle = "rgba(100,10,100,1)"; + fillStyle = "rgba(100, 10, 100, .5)" + strokeStyle = "rgba(100,10,100,1)" } - const group = s("g"); + const group = s("g") const rect = s("rect", { x: node.x + svg.properties.renWidth / 2, @@ -144,12 +144,12 @@ async function drawNode( stroke: strokeStyle, fill: fillStyle, "stroke-width": options.lineStrokeWidth, - }); + }) - group.children.push(rect); + group.children.push(rect) - drawEmbedded(svg, group, node); - drawMarkdownEmbed(svg, group, node); + drawEmbedded(svg, group, node) + drawMarkdownEmbed(svg, group, node) // Group Label if (node.label) { @@ -162,9 +162,9 @@ async function drawNode( "font-size": 20, "stroke-width": 1, }, - node.label - ); - group.children.push(t); + node.label, + ) + group.children.push(t) } // Node within a rect @@ -182,12 +182,12 @@ async function drawNode( "font-size": 20, "stroke-width": 1, }, - node.text - ); - group.children.push(t); + node.text, + ) + group.children.push(t) } - svg.children.push(group); + svg.children.push(group) } function drawEdge( @@ -195,13 +195,13 @@ function drawEdge( toNode: GenericNode, fromNode: GenericNode, edge: Edge | any, - config?: Partial + config?: Partial, ) { - const options = applyDefaults(config); - if (svg === null || svg === undefined) return; + const options = applyDefaults(config) + if (svg === null || svg === undefined) return - const cWidth = svg.properties.renWidth || (1 as number); - const cHeight = svg.properties.renHeight || (1 as number); + const cWidth = svg.properties.renWidth || (1 as number) + const cHeight = svg.properties.renHeight || (1 as number) if (fromNode && toNode) { let startX = @@ -209,51 +209,51 @@ function drawEdge( (edge.fromSide === "top" || edge.fromSide === "bottom" ? fromNode.width / 2 : fromNode.width) + - cWidth / 2; - let startY = fromNode.y + fromNode.height / 2 + cHeight / 2; + cWidth / 2 + let startY = fromNode.y + fromNode.height / 2 + cHeight / 2 let endX = toNode.x + (edge.toSide === "top" || edge.toSide === "bottom" ? toNode.width / 2 : toNode.width) + - cWidth / 2; - let endY = toNode.y + toNode.height / 2 + cHeight / 2; + cWidth / 2 + let endY = toNode.y + toNode.height / 2 + cHeight / 2 if (edge.fromSide === "left") { - startX = fromNode.x + cWidth / 2; + startX = fromNode.x + cWidth / 2 } else if (edge.fromSide === "top") { - startY = fromNode.y + cHeight / 2; + startY = fromNode.y + cHeight / 2 } else if (edge.fromSide === "bottom") { - startY = fromNode.y + fromNode.height + cHeight / 2; + startY = fromNode.y + fromNode.height + cHeight / 2 } if (edge.toSide === "right") { - endX = toNode.x + toNode.width + cWidth / 2; + endX = toNode.x + toNode.width + cWidth / 2 } else if (edge.toSide === "top") { - endY = toNode.y + cHeight / 2; + endY = toNode.y + cHeight / 2 } else if (edge.toSide === "bottom") { - endY = toNode.y + toNode.height + cHeight / 2; + endY = toNode.y + toNode.height + cHeight / 2 } else if (edge.toSide === "left") { - endX = toNode.x + cWidth / 2; + endX = toNode.x + cWidth / 2 } // Change the control point logic based on fromSide/toSide const cp1 = { x: startX, y: endY, - }; + } const cp2 = { x: endX, y: startY, - }; + } const line = s("path", { d: `M ${startX} ${startY} C ${cp1.x} ${cp1.y}, ${cp2.x} ${cp2.y}, ${endX} ${endY}`, stroke: "black", "stroke-width": options.lineStrokeWidth, fill: "none", - }); - svg.children.push(line); + }) + svg.children.push(line) } } diff --git a/src/plugin.ts b/src/plugin.ts index 68fe041..49295ad 100644 --- a/src/plugin.ts +++ b/src/plugin.ts @@ -1,14 +1,14 @@ -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"; -import type { Plugin } from "unified"; +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" +import type { Plugin } from "unified" // import { fromHtmlIsomorphic } from "hast-util-from-html-isomorphic"; -import { visit } from "unist-util-visit"; -import { render, validate } from "./jsoncanvas"; +import { visit } from "unist-util-visit" +import { render, validate } from "./jsoncanvas" -import { type Options, applyDefaults } from "./options"; +import { type Options, applyDefaults } from "./options" /* Let's think this through. @@ -32,80 +32,80 @@ Things decide: export const rehypeJsonCanvas: Plugin<[], Root> = () => { return async (tree) => { - const nodesToReplace = [] as Array; + const nodesToReplace = [] as Array // Iterate over the markdown file as tree visit(tree, "element", (node, index) => { - console.log(node, index); + console.log(node, index) // only match image embeds if (node.tagName !== "img" || index === undefined) { - return; + return } // This makes sure that the file in the image tag is a canvas - const canvasCheck = node.properties.src as string; - if (!canvasCheck.includes(".canvas")) return; + const canvasCheck = node.properties.src as string + if (!canvasCheck.includes(".canvas")) return - nodesToReplace.push(node); + nodesToReplace.push(node) // index = index += 1; - }); + }) for (const node of nodesToReplace) { - const canvasPath = node.properties.src as string; - const canvasMarkdown = await getCanvasFromEmbed(canvasPath); + const canvasPath = node.properties.src as string + const canvasMarkdown = await getCanvasFromEmbed(canvasPath) - const jsonCanvasFromString = JSONCanvas.fromString(canvasMarkdown); + const jsonCanvasFromString = JSONCanvas.fromString(canvasMarkdown) - let canvas = null; + let canvas = null if (validate(jsonCanvasFromString)) { - canvas = render(jsonCanvasFromString, {}); + canvas = render(jsonCanvasFromString, {}) } else { - canvas = h("div", "
Not a properly formatted JsonCanvas
"); + canvas = h("div", "
Not a properly formatted JsonCanvas
") } - if (!canvas) return; + if (!canvas) return node.properties = { ...node.properties, - }; - node.tagName = "div"; - node.children = []; - node.children.push(canvas); + } + node.tagName = "div" + node.children = [] + node.children.push(canvas) } - }; -}; + } +} export async function getCanvasFromEmbed( markdownPath: string, - config?: Partial + config?: Partial, ): Promise { - const options = applyDefaults(config); - let canvasMarkdown = "Loading"; - const webcheck = markdownPath.trim().toLowerCase(); + const options = applyDefaults(config) + let canvasMarkdown = "Loading" + const webcheck = markdownPath.trim().toLowerCase() if (webcheck.startsWith("https://") || typeof window !== "undefined") { await fetch(markdownPath) .then((res) => res.text()) .then((text) => { - canvasMarkdown = text; - }); + canvasMarkdown = text + }) } else { // To accomodate ssr const ssrPath = options.assetPath ? path.join(process.cwd(), options.assetPath, markdownPath) - : path.join(process.cwd(), markdownPath); - console.log("File Path", ssrPath); + : path.join(process.cwd(), markdownPath) + console.log("File Path", ssrPath) try { canvasMarkdown = fs.readFileSync(ssrPath, { encoding: "utf8", flag: "r", - }); + }) } catch (err) { - console.log("No Canvas File Found. Try using the assetPath option!", err); + console.log("No Canvas File Found. Try using the assetPath option!", err) } } - if (canvasMarkdown === null) return ""; + if (canvasMarkdown === null) return "" - return canvasMarkdown; + return canvasMarkdown }