animot-presenter 0.6.4 → 0.6.6

package/dist/types.d.ts

@@ -432,6 +432,7 @@ export interface DrawElement extends BaseElement {
     streamline?: number;
     taperStart?: boolean;
     taperEnd?: boolean;
+    animation?: ArrowAnimationConfig;
 }
 export interface StickyElement extends BaseElement {
     type: 'sticky';

package/dist/utils/arrow-clip-draw.d.ts

@@ -1,9 +1,12 @@
 /**
  * Svelte action for arrow animations. Two strategies depending on mode:
  *
- *  • 'draw' / 'undraw' / 'draw-undraw' — clip-path inset on the host <svg>.
- *    Doesn't touch stroke-dasharray, so dashed/dotted patterns are preserved
- *    while the path is progressively revealed/hidden from one side.
+ *  • 'draw' / 'undraw' / 'draw-undraw' — reveals the stroke ALONG THE PATH using
+ *    stroke-dasharray/offset keyed to the path's total length. This follows the
+ *    real geometry, so curved, looping and spiral arrows draw the way they're
+ *    shaped (a linear clip-path wipe could only sweep left↔right / top↔bottom).
+ *    The arrowhead (a separate sub-path) is revealed in step. Any dashed/dotted
+ *    pattern is overridden during the reveal and restored when fully drawn.
  *
  *  • 'flow' — marching ants. Continuously shifts stroke-dashoffset on the
  *    inner .arrow-path, so the dash pattern appears to flow along the path

package/dist/utils/arrow-clip-draw.js

@@ -1,9 +1,12 @@
 /**
  * Svelte action for arrow animations. Two strategies depending on mode:
  *
- *  • 'draw' / 'undraw' / 'draw-undraw' — clip-path inset on the host <svg>.
- *    Doesn't touch stroke-dasharray, so dashed/dotted patterns are preserved
- *    while the path is progressively revealed/hidden from one side.
+ *  • 'draw' / 'undraw' / 'draw-undraw' — reveals the stroke ALONG THE PATH using
+ *    stroke-dasharray/offset keyed to the path's total length. This follows the
+ *    real geometry, so curved, looping and spiral arrows draw the way they're
+ *    shaped (a linear clip-path wipe could only sweep left↔right / top↔bottom).
+ *    The arrowhead (a separate sub-path) is revealed in step. Any dashed/dotted
+ *    pattern is overridden during the reveal and restored when fully drawn.
  *
  *  • 'flow' — marching ants. Continuously shifts stroke-dashoffset on the
  *    inner .arrow-path, so the dash pattern appears to flow along the path
@@ -13,55 +16,37 @@
 export function arrowClipDraw(node, params) {
     let raf = 0;
     let pathEl = null;
+    let headEl = null;
     let baseDash = '';
     let baseOffset = '';
-    function clearArrowPath() {
-        if (!pathEl)
-            return;
-        pathEl.style.strokeDasharray = baseDash;
-        pathEl.style.strokeDashoffset = baseOffset;
+    function restorePath() {
+        // Back to the element's natural (fully-drawn) appearance.
+        if (pathEl) {
+            pathEl.style.strokeDasharray = baseDash;
+            pathEl.style.strokeDashoffset = baseOffset;
+        }
+        if (headEl)
+            headEl.style.opacity = '';
     }
     function reset() {
         if (raf)
             cancelAnimationFrame(raf);
         raf = 0;
         node.style.clipPath = '';
-        clearArrowPath();
+        restorePath();
     }
     function run() {
         reset();
         if (!params.enabled || params.mode === 'none')
             return;
-        // Capture the inner arrow path (used by 'flow' mode).
         pathEl = node.querySelector('.arrow-path');
-        if (pathEl) {
-            baseDash = pathEl.style.strokeDasharray || '';
-            baseOffset = pathEl.style.strokeDashoffset || '';
-        }
-        // Pick the dominant axis so vertical arrows reveal top↔bottom and horizontal
-        // arrows reveal left↔right. clip-path inset(top right bottom left).
-        const dx = params.endX - params.startX;
-        const dy = params.endY - params.startY;
-        const horizontal = Math.abs(dx) >= Math.abs(dy);
-        const positive = horizontal ? dx >= 0 : dy >= 0;
-        const goesPositive = params.reverse ? !positive : positive;
-        // Build the clip-path string for a given progress (0 = fully hidden,
-        // 100 = fully visible) on the dominant axis.
-        function clip(insetPct) {
-            if (horizontal) {
-                return goesPositive
-                    ? `inset(0 ${insetPct}% 0 0)` // hide from right edge
-                    : `inset(0 0 0 ${insetPct}%)`; // hide from left edge
-            }
-            return goesPositive
-                ? `inset(0 0 ${insetPct}% 0)` // hide from bottom
-                : `inset(${insetPct}% 0 0 0)`; // hide from top
-        }
-        const clipFull = clip(100); // fully hidden (100% inset on hide side)
-        const clipNone = clip(0);
+        headEl = node.querySelector('.arrow-head');
+        if (!pathEl)
+            return;
+        baseDash = pathEl.style.strokeDasharray || '';
+        baseOffset = pathEl.style.strokeDashoffset || '';
         // Round duration so an integer number of cycles fits in slide_duration.
-        // Without this, GIF loop boundary shows the arrow mid-draw → snap to
-        // invisible → re-draw, which the user perceives as a reset.
+        // Without this, a GIF loop boundary can show the arrow mid-draw → snap.
         const requested = Math.max(50, params.duration);
         const dur = params.slideDuration && params.slideDuration > 0 && (params.loop || params.mode === 'flow')
             ? params.slideDuration / Math.max(1, Math.round(params.slideDuration / requested))
@@ -70,21 +55,15 @@ export function arrowClipDraw(node, params) {
         const m = params.mode;
         // FLOW: marching ants — animate dashoffset continuously, keep base pattern.
         if (m === 'flow') {
-            if (!pathEl)
-                return;
-            // If the arrow has no inline dasharray (i.e. it's solid), give it one
-            // so dashes are visible to flow. Otherwise keep the user's pattern.
             const dashAttr = pathEl.getAttribute('stroke-dasharray');
             if (!dashAttr || dashAttr === 'none') {
                 pathEl.style.strokeDasharray = '8 5';
             }
-            // One pixel of dashoffset shift per ms feels like a steady current; use
-            // `duration` as the ms per cycle of 24px (one base dash repeat-ish).
             const cycle = 24;
             const dir = params.reverse ? 1 : -1;
             function flowStep(now) {
                 const elapsed = now - start;
-                const offset = (dir * (elapsed / dur) * cycle) % (cycle * 1000); // huge mod just to keep it bounded
+                const offset = (dir * (elapsed / dur) * cycle) % (cycle * 1000);
                 if (pathEl)
                     pathEl.style.strokeDashoffset = String(offset);
                 raf = requestAnimationFrame(flowStep);
@@ -92,59 +71,95 @@ export function arrowClipDraw(node, params) {
             raf = requestAnimationFrame(flowStep);
             return;
         }
-        // Initial clip-path state for draw modes.
-        if (m === 'draw' || m === 'draw-undraw') {
-            node.style.clipPath = clipFull;
+        // PATH-LENGTH REVEAL for draw / undraw / draw-undraw.
+        let len = 0;
+        try {
+            len = pathEl.getTotalLength();
+        }
+        catch {
+            len = 0;
+        }
+        if (!len) {
+            // Degenerate path — nothing sensible to animate.
+            restorePath();
+            return;
         }
-        else if (m === 'undraw') {
-            node.style.clipPath = clipNone;
+        // dashoffset reveals from the path start (positive) or the path end
+        // (negative) toward the other end, so `reverse` flips the draw direction.
+        const hideOffset = params.reverse ? -len : len;
+        // p: 0 = nothing drawn, 1 = fully drawn (along the path).
+        function setProgress(p) {
+            if (!pathEl)
+                return;
+            pathEl.style.strokeDasharray = `${len} ${len}`;
+            pathEl.style.strokeDashoffset = String(hideOffset * (1 - p));
+        }
+        // Head only shows once the end of the line is reached.
+        function setHead(p) {
+            if (headEl)
+                headEl.style.opacity = p >= 0.999 ? '1' : '0';
+        }
+        const cubicOut = (t) => 1 - Math.pow(1 - t, 3);
+        // Initial frame.
+        if (m === 'undraw') {
+            setProgress(1);
+            setHead(1);
+        }
+        else {
+            setProgress(0);
+            setHead(0);
         }
         function step(now) {
             const elapsed = now - start;
             if (m === 'draw') {
                 const t = Math.min(elapsed / dur, 1);
-                const eased = 1 - Math.pow(1 - t, 3);
-                node.style.clipPath = clip(100 * (1 - eased));
+                const p = cubicOut(t);
+                setProgress(p);
+                setHead(p);
                 if (t < 1)
                     raf = requestAnimationFrame(step);
                 else if (params.loop)
                     run();
                 else {
-                    node.style.clipPath = clipNone;
+                    restorePath();
                     raf = 0;
-                }
+                } // settle fully drawn (restores dashes)
             }
             else if (m === 'undraw') {
                 const t = Math.min(elapsed / dur, 1);
-                const eased = 1 - Math.pow(1 - t, 3);
-                node.style.clipPath = clip(100 * eased);
+                const p = 1 - cubicOut(t);
+                setProgress(p);
+                setHead(p);
                 if (t < 1)
                     raf = requestAnimationFrame(step);
                 else if (params.loop)
                     run();
                 else {
-                    node.style.clipPath = clipFull;
+                    setProgress(0);
+                    setHead(0);
                     raf = 0;
-                }
+                } // settle hidden
             }
             else if (m === 'draw-undraw') {
                 const half = dur / 2;
                 if (elapsed < half) {
-                    const t = Math.min(elapsed / half, 1);
-                    const eased = 1 - Math.pow(1 - t, 3);
-                    node.style.clipPath = clip(100 * (1 - eased));
+                    const p = cubicOut(Math.min(elapsed / half, 1));
+                    setProgress(p);
+                    setHead(p);
                     raf = requestAnimationFrame(step);
                 }
                 else {
                     const t = Math.min((elapsed - half) / half, 1);
-                    const eased = 1 - Math.pow(1 - t, 3);
-                    node.style.clipPath = clip(100 * eased);
+                    const p = 1 - cubicOut(t);
+                    setProgress(p);
+                    setHead(p);
                     if (t < 1)
                         raf = requestAnimationFrame(step);
                     else if (params.loop)
                         run();
                     else {
-                        node.style.clipPath = clipFull;
+                        setProgress(0);
+                        setHead(0);
                         raf = 0;
                     }
                 }

package/dist/utils/freehand-draw-reveal.d.ts

@@ -0,0 +1,19 @@
+import type { DrawElement } from '../types';
+type DrawStrokeEl = Pick<DrawElement, 'points' | 'brush' | 'strokeWidth' | 'thinning' | 'smoothing' | 'streamline' | 'taperStart' | 'taperEnd'>;
+export interface FreehandDrawRevealParams {
+    enabled: boolean;
+    mode: 'draw' | 'undraw' | 'draw-undraw' | 'none' | string;
+    duration: number;
+    el: DrawStrokeEl;
+    loop?: boolean;
+    reverse?: boolean;
+    /** Slide loop duration in ms — when looping, the effective duration is
+     *  rounded so an integer number of cycles fits (seamless GIF loop). */
+    slideDuration?: number;
+    key?: unknown;
+}
+export declare function freehandDrawReveal(node: SVGPathElement, params: FreehandDrawRevealParams): {
+    update(p: FreehandDrawRevealParams): void;
+    destroy(): void;
+};
+export {};

package/dist/utils/freehand-draw-reveal.js

@@ -0,0 +1,116 @@
+/**
+ * Svelte action for freehand stroke-reveal (draw / undraw / draw-undraw).
+ *
+ * Unlike arrows (a thin stroked line revealed via stroke-dashoffset), a freehand
+ * element is a FILLED brush outline. Revealing it by masking leaks the future
+ * segment at self-crossings (the thick already-drawn mask overlaps wherever a
+ * later part of the loop passes through). So instead we rebuild the filled
+ * outline from the points up to the current arc-length each frame — the
+ * not-yet-drawn part simply doesn't exist yet, so loops draw cleanly.
+ *
+ * The action owns the host <path>'s `d` attribute (don't bind `d=` on it).
+ */
+import { drawOutlineAtProgress } from './freehand';
+export function freehandDrawReveal(node, params) {
+    let raf = 0;
+    const setShown = (shown) => node.setAttribute('d', drawOutlineAtProgress(params.el, shown, !!params.reverse));
+    const full = () => node.setAttribute('d', drawOutlineAtProgress(params.el, 1, !!params.reverse));
+    function reset() {
+        if (raf)
+            cancelAnimationFrame(raf);
+        raf = 0;
+    }
+    function run() {
+        reset();
+        if (!params.enabled || params.mode === 'none') {
+            full();
+            return;
+        }
+        const requested = Math.max(50, params.duration);
+        const dur = params.slideDuration && params.slideDuration > 0 && params.loop
+            ? params.slideDuration / Math.max(1, Math.round(params.slideDuration / requested))
+            : requested;
+        const start = performance.now();
+        const m = params.mode;
+        const cubicOut = (t) => 1 - Math.pow(1 - t, 3);
+        // Initial frame.
+        setShown(m === 'undraw' ? 1 : 0);
+        function step(now) {
+            const elapsed = now - start;
+            if (m === 'draw') {
+                const t = Math.min(elapsed / dur, 1);
+                setShown(cubicOut(t));
+                if (t < 1)
+                    raf = requestAnimationFrame(step);
+                else if (params.loop)
+                    run();
+                else {
+                    full();
+                    raf = 0;
+                }
+            }
+            else if (m === 'undraw') {
+                const t = Math.min(elapsed / dur, 1);
+                setShown(1 - cubicOut(t));
+                if (t < 1)
+                    raf = requestAnimationFrame(step);
+                else if (params.loop)
+                    run();
+                else {
+                    setShown(0);
+                    raf = 0;
+                }
+            }
+            else if (m === 'draw-undraw') {
+                const half = dur / 2;
+                if (elapsed < half) {
+                    setShown(cubicOut(Math.min(elapsed / half, 1)));
+                    raf = requestAnimationFrame(step);
+                }
+                else {
+                    const t = Math.min((elapsed - half) / half, 1);
+                    setShown(1 - cubicOut(t));
+                    if (t < 1)
+                        raf = requestAnimationFrame(step);
+                    else if (params.loop)
+                        run();
+                    else {
+                        setShown(0);
+                        raf = 0;
+                    }
+                }
+            }
+        }
+        raf = requestAnimationFrame(step);
+    }
+    queueMicrotask(run);
+    // Let the video-export pipeline restart this under the virtual clock.
+    if (typeof window !== 'undefined') {
+        const reg = (window.__svgAnimRestart ||= []);
+        reg.push(run);
+        node.__svgAnimRestart = run;
+    }
+    let lastKey = params.key;
+    return {
+        update(p) {
+            const keyChanged = p.key !== lastKey;
+            params = p;
+            if (keyChanged) {
+                lastKey = p.key;
+                queueMicrotask(run);
+            }
+        },
+        destroy() {
+            reset();
+            if (typeof window !== 'undefined') {
+                const reg = window.__svgAnimRestart;
+                const fn = node.__svgAnimRestart;
+                if (reg && fn) {
+                    const idx = reg.indexOf(fn);
+                    if (idx >= 0)
+                        reg.splice(idx, 1);
+                }
+            }
+        }
+    };
+}

package/dist/utils/freehand.d.ts

@@ -8,6 +8,15 @@ export interface StrokeOptions {
     taperEnd: boolean;
 }
 export declare function resolveStrokeOptions(el: Pick<DrawElement, 'brush' | 'strokeWidth' | 'thinning' | 'smoothing' | 'streamline' | 'taperStart' | 'taperEnd'>): StrokeOptions;
+type DrawStrokeEl = Pick<DrawElement, 'points' | 'brush' | 'strokeWidth' | 'thinning' | 'smoothing' | 'streamline' | 'taperStart' | 'taperEnd'>;
+/**
+ * Filled-outline `d` for the stroke revealed up to `fraction` (0..1) of its arc
+ * length. Rebuilds the geometry from the partial point list each call — so at a
+ * self-crossing the not-yet-drawn segment simply isn't there (a mask reveal
+ * leaks the future segment wherever the thick already-drawn mask overlaps it).
+ * The growing tip is left capped (a pen nib); the real taper applies at full.
+ */
+export declare function drawOutlineAtProgress(el: DrawStrokeEl, fraction: number, reverse?: boolean): string;
 /** Compute the axis-aligned bounding box of raw input points. */
 export declare function pointsBounds(points: number[][]): {
     minX: number;
@@ -24,3 +33,4 @@ export declare function drawElementToPath(el: Pick<DrawElement, 'points' | 'brus
     d: string;
     viewBox: string;
 };
+export {};

package/dist/utils/freehand.js

@@ -30,6 +30,72 @@ function outlineToPath(points) {
     d.push('Z');
     return d.join(' ');
 }
+/** Slice the input points to the first `fraction` (0..1) of total arc length,
+ *  interpolating the final partial segment. `reverse` slices from the far end
+ *  so the reveal can run end→start. */
+function pointsUpToFraction(points, fraction, reverse) {
+    let pts = reverse ? [...points].reverse() : points;
+    const n = pts.length;
+    if (n === 0)
+        return [];
+    if (fraction >= 1)
+        return pts;
+    let total = 0;
+    const seg = [];
+    for (let i = 1; i < n; i++) {
+        const l = Math.hypot(pts[i][0] - pts[i - 1][0], pts[i][1] - pts[i - 1][1]);
+        seg.push(l);
+        total += l;
+    }
+    if (total === 0)
+        return [pts[0]];
+    const target = fraction * total;
+    const out = [pts[0]];
+    let acc = 0;
+    for (let i = 1; i < n; i++) {
+        const l = seg[i - 1];
+        if (acc + l >= target) {
+            const t = l > 0 ? (target - acc) / l : 0;
+            const x = pts[i - 1][0] + (pts[i][0] - pts[i - 1][0]) * t;
+            const y = pts[i - 1][1] + (pts[i][1] - pts[i - 1][1]) * t;
+            const p0 = pts[i - 1][2], p1 = pts[i][2];
+            out.push(p0 !== undefined && p1 !== undefined ? [x, y, p0 + (p1 - p0) * t] : [x, y]);
+            break;
+        }
+        acc += l;
+        out.push(pts[i]);
+    }
+    return out;
+}
+/**
+ * Filled-outline `d` for the stroke revealed up to `fraction` (0..1) of its arc
+ * length. Rebuilds the geometry from the partial point list each call — so at a
+ * self-crossing the not-yet-drawn segment simply isn't there (a mask reveal
+ * leaks the future segment wherever the thick already-drawn mask overlaps it).
+ * The growing tip is left capped (a pen nib); the real taper applies at full.
+ */
+export function drawOutlineAtProgress(el, fraction, reverse = false) {
+    const f = Math.max(0, Math.min(1, fraction));
+    if (f <= 0)
+        return '';
+    if (f >= 1)
+        return drawElementToPath(el).d;
+    const opts = resolveStrokeOptions(el);
+    const sliced = pointsUpToFraction(el.points, f, reverse);
+    if (sliced.length < 2) {
+        const [x, y] = sliced[0] ?? [0, 0];
+        sliced.push([x + 0.01, y]);
+    }
+    const stroke = getStroke(sliced, {
+        size: opts.size,
+        thinning: opts.thinning,
+        smoothing: opts.smoothing,
+        streamline: opts.streamline,
+        start: { taper: opts.taperStart ? opts.size * 4 : 0, cap: !opts.taperStart },
+        end: { taper: 0, cap: true }
+    });
+    return outlineToPath(stroke);
+}
 /** Compute the axis-aligned bounding box of raw input points. */
 export function pointsBounds(points) {
     if (points.length === 0)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "animot-presenter",
-	"version": "0.6.4",
+	"version": "0.6.6",
 	"description": "Embed animated presentations anywhere. Works with vanilla JS, React, Vue, Angular, Svelte, and any frontend framework. Morphing animations, code highlighting, charts, particles, and more.",
 	"type": "module",
 	"svelte": "./dist/index.js",