sketchmark 1.3.5 → 1.3.7

package/dist/index.js

@@ -8278,6 +8278,36 @@ function setParentGroupData(el, groupId) {
     if (groupId)
         el.dataset.parentGroup = groupId;
 }
+function resolveEdgeEndpointKind(id, nm, tm, gm, cm) {
+    if (nm.has(id))
+        return "node";
+    if (gm.has(id))
+        return "group";
+    if (tm.has(id))
+        return "table";
+    if (cm.has(id))
+        return "chart";
+    return null;
+}
+function collectEdgeGroupLineage(endpointId, endpointKind, parentGroups) {
+    const lineage = [];
+    let groupId = endpointKind === "group"
+        ? endpointId
+        : parentGroups.get(`${endpointKind}:${endpointId}`);
+    while (groupId) {
+        lineage.push(groupId);
+        groupId = parentGroups.get(`group:${groupId}`);
+    }
+    return lineage;
+}
+function resolveEdgeParentGroupId(fromId, toId, nm, tm, gm, cm, parentGroups) {
+    const fromKind = resolveEdgeEndpointKind(fromId, nm, tm, gm, cm);
+    const toKind = resolveEdgeEndpointKind(toId, nm, tm, gm, cm);
+    if (!fromKind || !toKind)
+        return undefined;
+    const toLineage = new Set(collectEdgeGroupLineage(toId, toKind, parentGroups));
+    return collectEdgeGroupLineage(fromId, fromKind, parentGroups).find((groupId) => toLineage.has(groupId));
+}
 // ── Node shapes ───────────────────────────────────────────────────────────
 function renderShape$1(rc, n, palette) {
     const s = n.style ?? {};
@@ -8435,6 +8465,7 @@ function renderToSVG(sg, container, options = {}) {
         const [x1, y1] = getConnPoint(src, dstCX, dstCY, e.fromAnchor);
         const [x2, y2] = getConnPoint(dst, srcCX, srcCY, e.toAnchor);
         const eg = mkGroup(`edge-${e.from}-${e.to}`, "eg");
+        setParentGroupData(eg, resolveEdgeParentGroupId(e.from, e.to, nm, tm, gmMap, cm, parentGroups));
         if (e.style?.opacity != null)
             eg.setAttribute("opacity", String(e.style.opacity));
         const len = Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2) || 1;
@@ -9481,7 +9512,7 @@ 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}`);
-const POSITIONABLE_SELECTOR = ".ng, .gg, .tg, .ntg, .cg, .mdg";
+const POSITIONABLE_SELECTOR = ".ng, .gg, .tg, .ntg, .cg, .eg, .mdg";
 function resolveNonEdgeDrawEl(svg, target) {
     return (getGroupEl(svg, target) ??
         getTableEl(svg, target) ??
@@ -9989,8 +10020,12 @@ class AnimationController {
         this._rc = _rc;
         this._config = _config;
         this._step = -1;
+        this._isPlaying = false;
+        this._playRunId = 0;
         this._pendingStepTimers = new Set();
         this._pendingNarrationTimers = new Set();
+        this._playbackDelayTimerId = null;
+        this._resolvePlaybackDelay = null;
         this._transforms = new Map();
         this._listeners = [];
         // ── Narration caption ──
@@ -10006,6 +10041,7 @@ class AnimationController {
         // ── TTS ──
         this._tts = false;
         this._speechDone = null;
+        this._resolveSpeechDone = null;
         this.drawTargetEdges = getDrawTargetEdgeIds(steps);
         this.drawTargetNodes = getDrawTargetNodeIds(steps);
         // Groups: non-edge draw steps whose target has a #group-{id} element in the SVG.
@@ -10070,8 +10106,16 @@ class AnimationController {
     _buildDrawStepIndex() {
         const drawStepIndexByElementId = new Map();
         forEachPlaybackStep(this.steps, (step, stepIndex) => {
-            if (step.action !== "draw" || parseEdgeTarget(step.target))
+            if (step.action !== "draw")
+                return;
+            const edge = parseEdgeTarget(step.target);
+            if (edge) {
+                const edgeEl = getEdgeEl(this.svg, edge.from, edge.to);
+                if (edgeEl && !drawStepIndexByElementId.has(edgeEl.id)) {
+                    drawStepIndexByElementId.set(edgeEl.id, stepIndex);
+                }
                 return;
+            }
             const el = resolveNonEdgeDrawEl(this.svg, step.target);
             if (el && !drawStepIndexByElementId.has(el.id)) {
                 drawStepIndexByElementId.set(el.id, stepIndex);
@@ -10229,6 +10273,9 @@ class AnimationController {
     get atEnd() {
         return this._step === this.steps.length - 1;
     }
+    get isPlaying() {
+        return this._isPlaying;
+    }
     on(listener) {
         this._listeners.push(listener);
         return () => {
@@ -10246,12 +10293,14 @@ class AnimationController {
             l(e);
     }
     reset() {
+        this.stop();
         this._step = -1;
         this._clearAll();
         this.emit("animation-reset");
     }
     /** Remove caption and annotation layer from the DOM */
     destroy() {
+        this.stop();
         this._clearAll();
         this._captionEl?.remove();
         this._captionEl = null;
@@ -10262,16 +10311,11 @@ class AnimationController {
         this._pointerEl = null;
     }
     next() {
-        if (!this.canNext)
-            return false;
-        this._step++;
-        this._applyStep(this._step, false);
-        this.emit("step-change");
-        if (!this.canNext)
-            this.emit("animation-end");
-        return true;
+        this.stop();
+        return this._advanceNext();
     }
     prev() {
+        this.stop();
         if (!this.canPrev)
             return false;
         this._step--;
@@ -10282,18 +10326,33 @@ class AnimationController {
         return true;
     }
     async play(msPerStep = 900) {
+        if (this._isPlaying || !this.canNext)
+            return;
+        const runId = ++this._playRunId;
+        this._isPlaying = true;
         this.emit("animation-start");
-        while (this.canNext) {
-            const nextStep = this.steps[this._step + 1];
-            this.next();
-            // Wait for timer AND speech to finish (whichever is longer)
-            await Promise.all([
-                new Promise((r) => setTimeout(r, this._playbackWaitMs(nextStep, msPerStep))),
-                this._speechDone ?? Promise.resolve(),
-            ]);
+        try {
+            while (this.canNext && this._playRunId === runId) {
+                const nextStep = this.steps[this._step + 1];
+                if (!this._advanceNext())
+                    break;
+                if (this._playRunId !== runId)
+                    break;
+                await Promise.all([
+                    this._waitForPlaybackDelay(this._playbackWaitMs(nextStep, msPerStep)),
+                    this._speechDone ?? Promise.resolve(),
+                ]);
+            }
+        }
+        finally {
+            if (this._playRunId === runId) {
+                this._isPlaying = false;
+                this._cancelPlaybackDelay();
+            }
         }
     }
     goTo(index) {
+        this.stop();
         index = Math.max(-1, Math.min(this.steps.length - 1, index));
         if (index === this._step)
             return;
@@ -10307,6 +10366,30 @@ class AnimationController {
         }
         this.emit("step-change");
     }
+    stop() {
+        if (!this._isPlaying && !this._resolvePlaybackDelay) {
+            this._clearPendingStepTimers();
+            this._cancelNarrationTyping();
+            this._cancelSpeech();
+            return;
+        }
+        this._isPlaying = false;
+        this._playRunId += 1;
+        this._cancelPlaybackDelay();
+        this._clearPendingStepTimers();
+        this._cancelNarrationTyping();
+        this._cancelSpeech();
+    }
+    _advanceNext() {
+        if (!this.canNext)
+            return false;
+        this._step++;
+        this._applyStep(this._step, false);
+        this.emit("step-change");
+        if (!this.canNext)
+            this.emit("animation-end");
+        return true;
+    }
     _clearTimerBucket(bucket) {
         bucket.forEach((id) => window.clearTimeout(id));
         bucket.clear();
@@ -10332,6 +10415,34 @@ class AnimationController {
     _scheduleStep(fn, delayMs) {
         this._scheduleTimer(fn, delayMs, this._pendingStepTimers);
     }
+    _waitForPlaybackDelay(delayMs) {
+        this._cancelPlaybackDelay();
+        return new Promise((resolve) => {
+            let settled = false;
+            const finish = () => {
+                if (settled)
+                    return;
+                settled = true;
+                if (this._playbackDelayTimerId !== null) {
+                    window.clearTimeout(this._playbackDelayTimerId);
+                    this._playbackDelayTimerId = null;
+                }
+                if (this._resolvePlaybackDelay === finish) {
+                    this._resolvePlaybackDelay = null;
+                }
+                resolve();
+            };
+            this._resolvePlaybackDelay = finish;
+            if (delayMs <= 0) {
+                finish();
+                return;
+            }
+            this._playbackDelayTimerId = window.setTimeout(finish, delayMs);
+        });
+    }
+    _cancelPlaybackDelay() {
+        this._resolvePlaybackDelay?.();
+    }
     _stepWaitMs(step, fallbackMs) {
         const delay = Math.max(0, step.delay ?? 0);
         const duration = Math.max(0, step.duration ?? 0);
@@ -10373,6 +10484,7 @@ class AnimationController {
         return this._stepWaitMs(step, fallbackMs);
     }
     _clearAll() {
+        this._cancelPlaybackDelay();
         this._clearPendingStepTimers();
         this._cancelNarrationTyping();
         this._cancelSpeech();
@@ -10703,6 +10815,7 @@ class AnimationController {
             const el = getEdgeEl(this.svg, edge.from, edge.to);
             if (!el)
                 return;
+            showDrawEl(el);
             if (silent) {
                 revealEdgeInstant(el);
                 requestAnimationFrame(() => requestAnimationFrame(() => {
@@ -10984,16 +11097,30 @@ class AnimationController {
         utter.rate = 0.95;
         utter.pitch = 1;
         utter.lang = "en-US";
-        // Track when speech actually finishes
+        // Track when speech actually finishes so play() can block until the utterance ends.
         this._speechDone = new Promise((resolve) => {
-            utter.onend = () => resolve();
-            utter.onerror = () => resolve();
+            let settled = false;
+            const finish = () => {
+                if (settled)
+                    return;
+                settled = true;
+                if (this._resolveSpeechDone === finish) {
+                    this._resolveSpeechDone = null;
+                    this._speechDone = null;
+                }
+                resolve();
+            };
+            this._resolveSpeechDone = finish;
+            utter.onend = finish;
+            utter.onerror = finish;
         });
         speechSynthesis.speak(utter);
     }
     _cancelSpeech() {
         if (typeof speechSynthesis !== "undefined")
             speechSynthesis.cancel();
+        this._resolveSpeechDone?.();
+        this._resolveSpeechDone = null;
         this._speechDone = null;
     }
     /** Pre-warm the speech engine with a silent utterance to eliminate cold-start delay */
@@ -11302,11 +11429,12 @@ const ANIMATION_CSS = `
 .cg.faded, .eg.faded, .mdg.faded { opacity: 0.22; }
 
 .ng.hidden { opacity: 0; pointer-events: none; }
-.gg.gg-hidden  { opacity: 0; }
-.tg.gg-hidden  { opacity: 0; }
-.ntg.gg-hidden { opacity: 0; }
-.cg.gg-hidden  { opacity: 0; }
-.mdg.gg-hidden { opacity: 0; }
+.gg.gg-hidden  { opacity: 0; }
+.tg.gg-hidden  { opacity: 0; }
+.ntg.gg-hidden { opacity: 0; }
+.cg.gg-hidden  { opacity: 0; }
+.eg.gg-hidden  { opacity: 0; }
+.mdg.gg-hidden { opacity: 0; }
 
 /* narration caption */
 .skm-caption { pointer-events: none; user-select: none; }
@@ -11802,7 +11930,13 @@ class SketchmarkCanvas {
         this.resetButton.addEventListener("click", () => this.resetAnimation());
         this.prevButton.addEventListener("click", () => this.prevStep());
         this.nextButton.addEventListener("click", () => this.nextStep());
-        this.playButton.addEventListener("click", () => void this.play());
+        this.playButton.addEventListener("click", () => {
+            if (this.playInFlight) {
+                this.stopPlayback();
+                return;
+            }
+            void this.play();
+        });
         this.captionButton.addEventListener("click", () => this.setCaptionVisible(!this.showCaption));
         this.ttsButton.addEventListener("click", () => this.setTtsEnabled(!this.getTtsEnabled()));
         this.viewport.addEventListener("pointerdown", this.onPointerDown);
@@ -11866,6 +12000,7 @@ class SketchmarkCanvas {
             this.dsl = normalizeNewlines(nextDsl);
         this.clearError();
         this.mirroredEditor?.clearError();
+        this.playInFlight = false;
         this.animUnsub?.();
         this.animUnsub = null;
         this.instance?.anim?.destroy();
@@ -11936,9 +12071,16 @@ class SketchmarkCanvas {
             this.syncAnimationUi();
         }
     }
+    stopPlayback() {
+        this.playInFlight = false;
+        if (this.renderer === "svg")
+            this.instance?.anim.stop();
+        this.syncAnimationUi();
+    }
     nextStep() {
         if (!this.instance || this.renderer !== "svg")
             return;
+        this.playInFlight = false;
         this.instance.anim.next();
         this.syncAnimationUi();
         this.focusCurrentStep();
@@ -11946,6 +12088,7 @@ class SketchmarkCanvas {
     prevStep() {
         if (!this.instance || this.renderer !== "svg")
             return;
+        this.playInFlight = false;
         this.instance.anim.prev();
         this.syncAnimationUi();
         this.focusCurrentStep();
@@ -11953,6 +12096,7 @@ class SketchmarkCanvas {
     resetAnimation() {
         if (!this.instance || this.renderer !== "svg")
             return;
+        this.playInFlight = false;
         this.instance.anim.reset();
         this.syncAnimationUi();
     }
@@ -11981,6 +12125,7 @@ class SketchmarkCanvas {
         this.render();
     }
     destroy() {
+        this.playInFlight = false;
         this.editorCleanup?.();
         this.animUnsub?.();
         this.instance?.anim?.destroy();
@@ -12055,6 +12200,9 @@ class SketchmarkCanvas {
             this.prevButton.disabled = true;
             this.nextButton.disabled = true;
             this.resetButton.disabled = true;
+            this.playButton.textContent = "Play";
+            this.playButton.classList.remove("is-active");
+            this.playButton.setAttribute("aria-pressed", "false");
             this.playButton.disabled = true;
             this.syncToggleUi();
             return;
@@ -12064,7 +12212,10 @@ class SketchmarkCanvas {
         this.prevButton.disabled = !anim.canPrev;
         this.nextButton.disabled = !anim.canNext;
         this.resetButton.disabled = false;
-        this.playButton.disabled = this.playInFlight || !anim.canNext;
+        this.playButton.textContent = this.playInFlight ? "Stop" : "Play";
+        this.playButton.classList.toggle("is-active", this.playInFlight);
+        this.playButton.setAttribute("aria-pressed", this.playInFlight ? "true" : "false");
+        this.playButton.disabled = this.playInFlight ? false : !anim.canNext;
         this.syncToggleUi();
     }
     getStepTarget(stepItem) {
@@ -12970,6 +13121,10 @@ class SketchmarkEmbed {
         this.btnPrev.addEventListener("click", () => this.prevStep());
         this.btnNext.addEventListener("click", () => this.nextStep());
         this.btnPlay.addEventListener("click", () => {
+            if (this.playInFlight) {
+                this.stopPlayback();
+                return;
+            }
             void this.play();
         });
         this.btnCaption.addEventListener("click", () => this.setCaptionVisible(!this.showCaption));
@@ -13027,6 +13182,7 @@ class SketchmarkEmbed {
         }
         this.clearError();
         this.stopMotion();
+        this.playInFlight = false;
         this.animUnsub?.();
         this.animUnsub = null;
         this.instance?.anim?.destroy();
@@ -13099,9 +13255,15 @@ class SketchmarkEmbed {
             this.syncControls();
         }
     }
+    stopPlayback() {
+        this.playInFlight = false;
+        this.instance?.anim.stop();
+        this.syncControls();
+    }
     nextStep() {
         if (!this.instance)
             return;
+        this.playInFlight = false;
         this.instance.anim.next();
         this.syncControls();
         if (this.options.autoFocus !== false && this.options.autoFocusOnStep !== false) {
@@ -13111,6 +13273,7 @@ class SketchmarkEmbed {
     prevStep() {
         if (!this.instance)
             return;
+        this.playInFlight = false;
         this.instance.anim.prev();
         this.syncControls();
         if (this.options.autoFocus !== false && this.options.autoFocusOnStep !== false) {
@@ -13120,6 +13283,7 @@ class SketchmarkEmbed {
     resetAnimation() {
         if (!this.instance)
             return;
+        this.playInFlight = false;
         this.instance.anim.reset();
         this.syncControls();
     }
@@ -13146,6 +13310,7 @@ class SketchmarkEmbed {
     }
     destroy() {
         this.stopMotion();
+        this.playInFlight = false;
         this.animUnsub?.();
         this.instance?.anim?.destroy();
         this.instance = null;
@@ -13178,6 +13343,9 @@ class SketchmarkEmbed {
             this.btnRestart.disabled = true;
             this.btnPrev.disabled = true;
             this.btnNext.disabled = true;
+            this.btnPlay.textContent = "Play";
+            this.btnPlay.classList.remove("is-active");
+            this.btnPlay.setAttribute("aria-pressed", "false");
             this.btnPlay.disabled = true;
             return;
         }
@@ -13186,7 +13354,10 @@ class SketchmarkEmbed {
         this.btnRestart.disabled = false;
         this.btnPrev.disabled = !anim.canPrev;
         this.btnNext.disabled = !anim.canNext;
-        this.btnPlay.disabled = this.playInFlight || !anim.canNext;
+        this.btnPlay.textContent = this.playInFlight ? "Stop" : "Play";
+        this.btnPlay.classList.toggle("is-active", this.playInFlight);
+        this.btnPlay.setAttribute("aria-pressed", this.playInFlight ? "true" : "false");
+        this.btnPlay.disabled = this.playInFlight ? false : !anim.canNext;
     }
     syncViewControls() {
         const hasView = !!this.instance?.svg;