sketchmark 0.2.0 → 0.2.1

package/dist/index.js

@@ -6397,6 +6397,7 @@ const getEdgeEl = (svg, f, t) => getEl(svg, `edge-${f}-${t}`);
 const getTableEl = (svg, id) => getEl(svg, `table-${id}`);
 const getNoteEl = (svg, id) => getEl(svg, `note-${id}`);
 const getChartEl = (svg, id) => getEl(svg, `chart-${id}`);
+const getMarkdownEl = (svg, id) => getEl(svg, `markdown-${id}`);
 function resolveEl(svg, target) {
     // check edge first — target contains connector like "a-->b"
     const edge = parseEdgeTarget(target);
@@ -6408,6 +6409,7 @@ function resolveEl(svg, target) {
         getTableEl(svg, target) ??
         getNoteEl(svg, target) ??
         getChartEl(svg, target) ??
+        getMarkdownEl(svg, target) ??
         null);
 }
 function pathLength(p) {
@@ -6418,6 +6420,15 @@ function pathLength(p) {
         return 200;
     }
 }
+function clearDashOverridesAfter(el, delayMs) {
+    setTimeout(() => {
+        el.querySelectorAll('path').forEach(p => {
+            p.style.strokeDasharray = '';
+            p.style.strokeDashoffset = '';
+            p.style.transition = '';
+        });
+    }, delayMs);
+}
 // ── Arrow connector parser ────────────────────────────────
 const ARROW_CONNECTORS = ["<-->", "<->", "-->", "<--", "->", "<-", "---", "--"];
 function parseEdgeTarget(target) {
@@ -6525,32 +6536,39 @@ function clearEdgeDrawStyles(el) {
     });
 }
 function animateEdgeDraw(el, conn) {
-    const paths = Array.from(el.querySelectorAll("path"));
+    const paths = Array.from(el.querySelectorAll('path'));
     if (!paths.length)
         return;
     const linePath = paths[0];
     const headPaths = paths.slice(1);
     const STROKE_DUR = 360;
     const len = pathLength(linePath);
-    const reversed = conn.startsWith("<") && !conn.includes(">");
+    const reversed = conn.startsWith('<') && !conn.includes('>');
     linePath.style.strokeDasharray = `${len}`;
     linePath.style.strokeDashoffset = reversed ? `${-len}` : `${len}`;
-    linePath.style.transition = "none";
-    headPaths.forEach((p) => {
-        p.style.opacity = "0";
-        p.style.transition = "none";
+    linePath.style.transition = 'none';
+    headPaths.forEach(p => {
+        p.style.opacity = '0';
+        p.style.transition = 'none';
     });
-    el.classList.remove("draw-hidden");
-    el.classList.add("draw-reveal");
-    el.style.opacity = "1";
+    el.classList.remove('draw-hidden');
+    el.classList.add('draw-reveal');
+    el.style.opacity = '1';
     requestAnimationFrame(() => requestAnimationFrame(() => {
         linePath.style.transition = `stroke-dashoffset ${STROKE_DUR}ms cubic-bezier(.4,0,.2,1)`;
-        linePath.style.strokeDashoffset = "0";
+        linePath.style.strokeDashoffset = '0';
         setTimeout(() => {
-            headPaths.forEach((p) => {
-                p.style.transition = "opacity 120ms ease";
-                p.style.opacity = "1";
+            headPaths.forEach(p => {
+                p.style.transition = 'opacity 120ms ease';
+                p.style.opacity = '1';
             });
+            // ── ADD: clear inline dash overrides so SVG attribute
+            //    (stroke-dasharray="6,5" for dashed arrows) takes over again
+            setTimeout(() => {
+                linePath.style.strokeDasharray = '';
+                linePath.style.strokeDashoffset = '';
+                linePath.style.transition = '';
+            }, 160);
         }, STROKE_DUR - 40);
     }));
 }
@@ -6574,6 +6592,7 @@ class AnimationController {
         this.drawTargetTables = new Set();
         this.drawTargetNotes = new Set();
         this.drawTargetCharts = new Set();
+        this.drawTargetMarkdowns = new Set();
         for (const s of steps) {
             if (s.action !== "draw" || parseEdgeTarget(s.target))
                 continue;
@@ -6594,6 +6613,10 @@ class AnimationController {
                 this.drawTargetCharts.add(`chart-${s.target}`);
                 this.drawTargetNodes.delete(`node-${s.target}`);
             }
+            if (svg.querySelector(`#markdown-${s.target}`)) {
+                this.drawTargetMarkdowns.add(`markdown-${s.target}`);
+                this.drawTargetNodes.delete(`node-${s.target}`);
+            }
         }
         this._clearAll();
     }
@@ -6765,7 +6788,24 @@ class AnimationController {
                 });
             }
         });
-        this.svg.querySelectorAll(".tg, .ntg, .cg").forEach((el) => {
+        // Markdown
+        this.svg.querySelectorAll(".mdg").forEach((el) => {
+            clearDrawStyles(el);
+            el.style.transition = "none";
+            el.style.opacity = "";
+            if (this.drawTargetMarkdowns.has(el.id)) {
+                el.classList.add("gg-hidden");
+            }
+            else {
+                el.classList.remove("gg-hidden");
+                requestAnimationFrame(() => {
+                    el.style.transition = "";
+                });
+            }
+        });
+        this.svg
+            .querySelectorAll(".tg, .ntg, .cg, .mdg")
+            .forEach((el) => {
             el.style.transform = "";
             el.style.transition = "";
             el.style.opacity = "";
@@ -6943,6 +6983,9 @@ class AnimationController {
                 if (!firstPath?.style.strokeDasharray)
                     prepareForDraw(groupEl);
                 animateShapeDraw(groupEl, 550, 40);
+                const pathCount = groupEl.querySelectorAll('path').length;
+                const totalMs = pathCount * 40 + 550 + 120; // stagger + duration + buffer
+                clearDashOverridesAfter(groupEl, totalMs);
             }
             return;
         }
@@ -6963,6 +7006,8 @@ class AnimationController {
                 tableEl.classList.remove("gg-hidden");
                 prepareForDraw(tableEl);
                 animateShapeDraw(tableEl, 500, 40);
+                const tablePathCount = tableEl.querySelectorAll('path').length;
+                clearDashOverridesAfter(tableEl, tablePathCount * 40 + 500 + 120);
             }
             return;
         }
@@ -6983,6 +7028,8 @@ class AnimationController {
                 noteEl.classList.remove("gg-hidden");
                 prepareForDraw(noteEl);
                 animateShapeDraw(noteEl, 420, 55);
+                const notePathCount = noteEl.querySelectorAll('path').length;
+                clearDashOverridesAfter(noteEl, notePathCount * 55 + 420 + 120);
             }
             return;
         }
@@ -7010,6 +7057,28 @@ class AnimationController {
             }
             return;
         }
+        // ── Markdown ──────────────────────────────────────────
+        const markdownEl = getMarkdownEl(this.svg, target);
+        if (markdownEl) {
+            if (silent) {
+                markdownEl.style.transition = "none";
+                markdownEl.style.opacity = "";
+                markdownEl.classList.remove("gg-hidden");
+                markdownEl.style.opacity = "1";
+                requestAnimationFrame(() => requestAnimationFrame(() => {
+                    markdownEl.style.transition = "";
+                }));
+            }
+            else {
+                markdownEl.style.opacity = "0";
+                markdownEl.classList.remove("gg-hidden");
+                requestAnimationFrame(() => requestAnimationFrame(() => {
+                    markdownEl.style.transition = "opacity 500ms ease";
+                    markdownEl.style.opacity = "1";
+                }));
+            }
+            return;
+        }
         // ── Node draw ──────────────────────────────────────
         const nodeEl = getNodeEl(this.svg, target);
         if (!nodeEl)
@@ -7023,14 +7092,16 @@ class AnimationController {
             if (!firstPath?.style.strokeDasharray)
                 prepareForDraw(nodeEl);
             animateShapeDraw(nodeEl, 420, 55);
+            const nodePathCount = nodeEl.querySelectorAll('path').length;
+            clearDashOverridesAfter(nodeEl, nodePathCount * 55 + 420 + 120);
         }
     }
     // ── erase ─────────────────────────────────────────────────
     _doErase(target) {
         const el = resolveEl(this.svg, target); // handles edges too now
         if (el) {
-            el.style.transition = 'opacity 0.4s';
-            el.style.opacity = '0';
+            el.style.transition = "opacity 0.4s";
+            el.style.opacity = "0";
         }
     }
     // ── show / hide ───────────────────────────────────────────
@@ -7058,10 +7129,10 @@ class AnimationController {
             return;
         // edge — color stroke
         if (parseEdgeTarget(target)) {
-            el.querySelectorAll('path, line, polyline').forEach(p => {
+            el.querySelectorAll("path, line, polyline").forEach((p) => {
                 p.style.stroke = color;
             });
-            el.querySelectorAll('polygon').forEach(p => {
+            el.querySelectorAll("polygon").forEach((p) => {
                 p.style.fill = color;
                 p.style.stroke = color;
             });
@@ -7069,22 +7140,24 @@ class AnimationController {
         }
         // everything else — color fill
         let hit = false;
-        el.querySelectorAll('path, rect, ellipse, polygon').forEach(c => {
-            const attrFill = c.getAttribute('fill');
-            if (attrFill === 'none')
+        el.querySelectorAll("path, rect, ellipse, polygon").forEach((c) => {
+            const attrFill = c.getAttribute("fill");
+            if (attrFill === "none")
                 return;
-            if (attrFill === null && c.tagName === 'path')
+            if (attrFill === null && c.tagName === "path")
                 return;
             c.style.fill = color;
             hit = true;
         });
         if (!hit) {
-            el.querySelectorAll('text').forEach(t => { t.style.fill = color; });
+            el.querySelectorAll("text").forEach((t) => {
+                t.style.fill = color;
+            });
         }
     }
 }
 const ANIMATION_CSS = `
-.ng, .gg, .tg, .ntg, .cg, .eg {
+.ng, .gg, .tg, .ntg, .cg, .eg, .mdg {
   transform-box: fill-box;
   transform-origin: center;
   transition: filter 0.3s, opacity 0.35s;
@@ -7095,9 +7168,10 @@ const ANIMATION_CSS = `
 .tg.hl path, .tg.hl rect,
 .ntg.hl path, .ntg.hl polygon,
 .cg.hl path, .cg.hl rect,
+.mdg.hl text,
 .eg.hl path, .eg.hl line, .eg.hl polygon { stroke-width: 2.8 !important; }
 
-.ng.hl, .tg.hl, .ntg.hl, .cg.hl, .eg.hl {
+.ng.hl, .tg.hl, .ntg.hl, .cg.hl, .mdg.hl, .eg.hl {
   animation: ng-pulse 1.4s ease-in-out infinite;
 }
 @keyframes ng-pulse {
@@ -7106,7 +7180,8 @@ const ANIMATION_CSS = `
 }
 
 /* fade */
-.ng.faded, .gg.faded, .tg.faded, .ntg.faded, .cg.faded, .eg.faded { opacity: 0.22; }
+.ng.faded, .gg.faded, .tg.faded, .ntg.faded,
+.cg.faded, .eg.faded, .mdg.faded { opacity: 0.22; }
 
 .ng.hidden { opacity: 0; pointer-events: none; }
 .eg.draw-hidden { opacity: 0; }
@@ -7115,6 +7190,7 @@ const ANIMATION_CSS = `
 .tg.gg-hidden  { opacity: 0; }
 .ntg.gg-hidden { opacity: 0; }
 .cg.gg-hidden  { opacity: 0; }
+.mdg.gg-hidden { opacity: 0; }
 `;
 
 // ============================================================