sketchmark 1.2.1 → 1.3.0

package/dist/index.js

@@ -377,6 +377,7 @@ function parse(src, options = {}) {
     const ast = {
         kind: "diagram",
         layout: "column",
+        style: {},
         nodes: [],
         edges: [],
         groups: [],
@@ -433,6 +434,54 @@ function parse(src, options = {}) {
         }
         return props;
     }
+    function parseConfigValue(value) {
+        if (value === "true" || value === "on")
+            return true;
+        if (value === "false" || value === "off")
+            return false;
+        const numeric = Number(value);
+        return Number.isNaN(numeric) ? value : numeric;
+    }
+    function applyRootProps(props) {
+        const styleProps = propsToStyle(props);
+        const styleKeys = new Set([
+            "fill",
+            "stroke",
+            "stroke-width",
+            "color",
+            "opacity",
+            "font-size",
+            "font-weight",
+            "font",
+            "dash",
+            "stroke-dash",
+            "padding",
+            "text-align",
+            "vertical-align",
+            "line-height",
+            "letter-spacing",
+        ]);
+        ast.style = { ...(ast.style ?? {}), ...styleProps };
+        if (props.layout) {
+            ast.layout = props.layout;
+        }
+        if (props.width !== undefined) {
+            ast.width = parseFloat(props.width);
+        }
+        if (props.height !== undefined) {
+            ast.height = parseFloat(props.height);
+        }
+        if (props.font !== undefined) {
+            ast.config.font = parseConfigValue(props.font);
+        }
+        for (const [key, value] of Object.entries(props)) {
+            if (key === "layout" || key === "width" || key === "height")
+                continue;
+            if (styleKeys.has(key))
+                continue;
+            ast.config[key] = parseConfigValue(value);
+        }
+    }
     function parseGroupProps(toks, startIndex) {
         const props = {};
         const itemIds = [];
@@ -914,8 +963,12 @@ function parse(src, options = {}) {
         };
     }
     skipNL();
-    if (cur().value === "diagram")
+    if (cur().value === "diagram") {
         skip();
+        const toks = lineTokens();
+        const props = parseSimpleProps(toks, 0);
+        applyRootProps(props);
+    }
     skipNL();
     while (cur().type !== "EOF" && cur().value !== "end") {
         skipNL();
@@ -926,7 +979,7 @@ function parse(src, options = {}) {
             continue;
         }
         if (v === "diagram") {
-            skip();
+            lineTokens();
             continue;
         }
         if (v === "end")
@@ -936,10 +989,7 @@ function parse(src, options = {}) {
             continue;
         }
         if (v === "layout") {
-            skip();
-            ast.layout = cur().value ?? "column";
-            skip();
-            continue;
+            throw new ParseError(`Root layout must be declared on the diagram line, e.g. diagram layout=absolute`, t.line, t.col);
         }
         if (v === "title") {
             skip();
@@ -963,15 +1013,7 @@ function parse(src, options = {}) {
             continue;
         }
         if (v === "config") {
-            skip();
-            const key = cur().value;
-            skip();
-            if (cur().type === "EQUALS")
-                skip();
-            const value = cur().value;
-            skip();
-            ast.config[key] = value;
-            continue;
+            throw new ParseError(`Root config must be declared on the diagram line, e.g. diagram gap=40 margin=0 tts=true`, t.line, t.col);
         }
         if (v === "style") {
             skip();
@@ -3624,6 +3666,7 @@ function buildSceneGraph(ast) {
         title: ast.title,
         description: ast.description,
         layout: ast.layout,
+        style: ast.style ?? {},
         nodes,
         edges,
         groups,
@@ -3636,6 +3679,8 @@ function buildSceneGraph(ast) {
         rootOrder: ast.rootOrder ?? [],
         width: 0,
         height: 0,
+        fixedWidth: ast.width,
+        fixedHeight: ast.height,
     };
 }
 // ── Helpers ───────────────────────────────────────────────
@@ -5212,8 +5257,10 @@ function computeBounds(sg, margin) {
         ...sg.charts.map((c) => c.y + c.h),
         ...sg.markdowns.map((m) => m.y + m.h),
     ];
-    sg.width = (allX.length ? Math.max(...allX) : 400) + margin;
-    sg.height = (allY.length ? Math.max(...allY) : 300) + margin;
+    const autoWidth = (allX.length ? Math.max(...allX) : 400) + margin;
+    const autoHeight = (allY.length ? Math.max(...allY) : 300) + margin;
+    sg.width = sg.fixedWidth ?? autoWidth;
+    sg.height = sg.fixedHeight ?? autoHeight;
 }
 // ── Public entry point ────────────────────────────────────
 function layout(sg) {
@@ -8249,7 +8296,7 @@ function renderToSVG(sg, container, options = {}) {
     const palette = resolvePalette(themeName);
     // ── Diagram-level font ──────────────────────────────────
     const diagramFont = (() => {
-        const raw = String(sg.config["font"] ?? "");
+        const raw = String(sg.style?.font ?? sg.config["font"] ?? "");
         if (raw) {
             loadFont(raw);
             return resolveFont(raw);
@@ -8279,8 +8326,22 @@ function renderToSVG(sg, container, options = {}) {
         bgRect.setAttribute("y", "0");
         bgRect.setAttribute("width", String(sg.width));
         bgRect.setAttribute("height", String(sg.height));
-        bgRect.setAttribute("fill", palette.background);
+        bgRect.setAttribute("fill", String(sg.style?.fill ?? palette.background));
         svg.appendChild(bgRect);
+        const rootStroke = sg.style?.stroke;
+        const rootStrokeWidth = Number(sg.style?.strokeWidth ?? 0);
+        if (rootStroke && rootStroke !== "none" && rootStrokeWidth > 0) {
+            const frame = se("rect");
+            const inset = rootStrokeWidth / 2;
+            frame.setAttribute("x", String(inset));
+            frame.setAttribute("y", String(inset));
+            frame.setAttribute("width", String(Math.max(0, sg.width - rootStrokeWidth)));
+            frame.setAttribute("height", String(Math.max(0, sg.height - rootStrokeWidth)));
+            frame.setAttribute("fill", "none");
+            frame.setAttribute("stroke", String(rootStroke));
+            frame.setAttribute("stroke-width", String(rootStrokeWidth));
+            svg.appendChild(frame);
+        }
     }
     const rc = rough.svg(svg);
     // ── Title ────────────────────────────────────────────────
@@ -9008,7 +9069,7 @@ function renderToCanvas(sg, canvas, options = {}) {
     const palette = resolvePalette(themeName);
     // ── Diagram-level font ───────────────────────────────────
     const diagramFont = (() => {
-        const raw = String(sg.config['font'] ?? '');
+        const raw = String(sg.style?.font ?? sg.config['font'] ?? '');
         if (raw) {
             loadFont(raw);
             return resolveFont(raw);
@@ -9017,8 +9078,18 @@ function renderToCanvas(sg, canvas, options = {}) {
     })();
     // ── Background ───────────────────────────────────────────
     if (!options.transparent) {
-        ctx.fillStyle = options.background ?? palette.background;
+        ctx.fillStyle = options.background ?? String(sg.style?.fill ?? palette.background);
         ctx.fillRect(0, 0, sg.width, sg.height);
+        const rootStroke = sg.style?.stroke;
+        const rootStrokeWidth = Number(sg.style?.strokeWidth ?? 0);
+        if (rootStroke && rootStroke !== 'none' && rootStrokeWidth > 0) {
+            const inset = rootStrokeWidth / 2;
+            ctx.save();
+            ctx.strokeStyle = String(rootStroke);
+            ctx.lineWidth = rootStrokeWidth;
+            ctx.strokeRect(inset, inset, Math.max(0, sg.width - rootStrokeWidth), Math.max(0, sg.height - rootStrokeWidth));
+            ctx.restore();
+        }
     }
     else {
         ctx.clearRect(0, 0, sg.width, sg.height);
@@ -10068,6 +10139,10 @@ class AnimationController {
         if (!el.id.startsWith("group-")) {
             const ids = new Set([el.id]);
             this._relatedElementIdsByPrimaryId.get(el.id)?.forEach((id) => ids.add(id));
+            this.svg.querySelectorAll(POSITIONABLE_SELECTOR).forEach((candidate) => {
+                if (candidate.dataset.animationParent === target)
+                    ids.add(candidate.id);
+            });
             return Array.from(ids)
                 .map((id) => getEl(this.svg, id))
                 .filter((candidate) => candidate != null);
@@ -10268,6 +10343,7 @@ class AnimationController {
             el.classList.remove("hl", "faded", "hidden");
             el.style.opacity = el.style.filter = "";
             if (this.drawTargetNodes.has(el.id)) {
+                hideDrawEl(el);
                 prepareNodeForDraw(el);
             }
             else {
@@ -10766,6 +10842,15 @@ class AnimationController {
     _doColor(target, color) {
         if (!color)
             return;
+        const applyTextColor = (root) => {
+            root.querySelectorAll("text").forEach((t) => {
+                t.style.fill = color;
+                const existingStyle = t.getAttribute("style") ?? "";
+                const nextStyle = `${existingStyle.replace(/(?:^|;)\s*fill\s*:[^;]*/g, "").trim().replace(/;?$/, ";")}fill:${color};`;
+                t.setAttribute("style", nextStyle);
+                t.setAttribute("fill", color);
+            });
+        };
         for (const el of this._resolveCascadeTargets(target)) {
             if (parseEdgeTarget(target)) {
                 el.querySelectorAll("path, line, polyline").forEach((p) => {
@@ -10788,11 +10873,14 @@ class AnimationController {
                 hit = true;
             });
             if (!hit) {
-                el.querySelectorAll("text").forEach((t) => {
-                    t.style.fill = color;
-                });
+                applyTextColor(el);
             }
         }
+        this.svg.querySelectorAll(`${POSITIONABLE_SELECTOR}[data-animation-parent]`).forEach((el) => {
+            if (el.dataset.animationParent === target) {
+                applyTextColor(el);
+            }
+        });
     }
     // ── narration ───────────────────────────────────────────
     _initCaption() {