animot-presenter 0.6.5 → 0.6.7

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/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/dist/utils/path-morph.js

@@ -49,18 +49,31 @@ export function shapeToPath(type, w, h, borderRadius = 0) {
                 return `M0,0 L${w},0 L${w},${h} L0,${h} Z`;
             return `M${r},0 L${w - r},0 Q${w},0 ${w},${r} L${w},${h - r} Q${w},${h} ${w - r},${h} L${r},${h} Q0,${h} 0,${h - r} L0,${r} Q0,0 ${r},0 Z`;
         }
-        case 'circle':
+        case 'circle': {
+            // A `circle` shape renders as a TRUE circle (radius = min side / 2,
+            // centered) — see Shape.svelte. Match that here so booleans / morphs /
+            // masks of a circle in a non-square box stay round, not oval.
+            const cr = Math.min(w, h) / 2;
+            return ellipsePath(w / 2, h / 2, cr, cr);
+        }
         case 'ellipse':
             return ellipsePath(w / 2, h / 2, w / 2, h / 2);
         case 'triangle':
             return `M${w / 2},0 L${w},${h} L0,${h} Z`;
         case 'hexagon': {
-            // Pointy-left/right flat hexagon fitted to the box.
-            const q = w * 0.25;
-            return `M${q},0 L${w - q},0 L${w},${h / 2} L${w - q},${h} L${q},${h} L0,${h / 2} Z`;
+            // Regular pointy-top hexagon (radius = min side / 2, centered) — matches
+            // Shape.svelte so booleans / morphs / masks line up with the render.
+            const hcx = w / 2, hcy = h / 2, hr = Math.min(w, h) / 2;
+            let hd = '';
+            for (let i = 0; i < 6; i++) {
+                const ang = -Math.PI / 2 + (i * Math.PI) / 3;
+                hd += (i === 0 ? 'M' : 'L') + (hcx + hr * Math.cos(ang)).toFixed(2) + ',' + (hcy + hr * Math.sin(ang)).toFixed(2) + ' ';
+            }
+            return hd + 'Z';
         }
         case 'star': {
-            const cx = w / 2, cy = h / 2, outer = Math.min(w, h) / 2, inner = outer * 0.5;
+            // Inner radius 0.4×outer to match Shape.svelte (was 0.5).
+            const cx = w / 2, cy = h / 2, outer = Math.min(w, h) / 2, inner = outer * 0.4;
             let d = '';
             for (let i = 0; i < 10; i++) {
                 const rad = i % 2 === 0 ? outer : inner;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "animot-presenter",
-	"version": "0.6.5",
+	"version": "0.6.7",
 	"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",