animot-presenter 0.6.3 → 0.6.5

package/dist/styles/presenter.css

@@ -217,6 +217,44 @@
 	0% { opacity: 1; } 100% { opacity: 0; }
 }
 
+/* Freehand draw element */
+.animot-draw-element { display: block; width: 100%; height: 100%; overflow: visible; }
+
+/* Sticky note element */
+.animot-sticky-element {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	box-sizing: border-box;
+	overflow: hidden;
+}
+.animot-sticky-sheen {
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+	background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.06));
+}
+.animot-sticky-fold {
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	width: 22px;
+	height: 22px;
+	pointer-events: none;
+	background: linear-gradient(135deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.18) 50%);
+	border-top-left-radius: 4px;
+	box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.12);
+}
+.animot-sticky-text {
+	position: relative;
+	z-index: 1;
+	width: 100%;
+	line-height: 1.3;
+	white-space: pre-wrap;
+	word-break: break-word;
+}
+
 /* SVG path-trace animations (Icon + Svg elements) */
 .animot-svg-element.icon-anim-draw path,
 .animot-svg-element.icon-anim-draw circle,

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-export type ElementType = 'code' | 'text' | 'arrow' | 'image' | 'shape' | 'counter' | 'chart' | 'icon' | 'svg' | 'motionPath' | 'video' | 'progress' | 'container';
+export type ElementType = 'code' | 'text' | 'arrow' | 'image' | 'shape' | 'counter' | 'chart' | 'icon' | 'svg' | 'motionPath' | 'video' | 'progress' | 'container' | 'draw' | 'sticky';
 /**
  * Per-element keyframe — animates state at a specific time WITHIN a slide's
  * display window. Layered on top of slide-to-slide morphing: morphing handles
@@ -28,6 +28,7 @@ export interface Keyframe {
     contrast?: number;
     saturate?: number;
     grayscale?: number;
+    path?: string;
 }
 export type ShapeType = 'rectangle' | 'circle' | 'triangle' | 'ellipse' | 'star' | 'hexagon';
 export interface Position {
@@ -118,6 +119,8 @@ export interface BaseElement {
     depth?: number;
     motionPathId?: string;
     motionPathConfig?: MotionPathConfig;
+    /** Solid color for the shape-morph transition only (render-time override). */
+    morphColor?: string;
     blur?: number;
     brightness?: number;
     contrast?: number;
@@ -416,6 +419,34 @@ export interface SvgElement extends BaseElement {
     viewBox?: string;
     animation?: SvgPathAnimationConfig;
 }
+export type DrawBrush = 'pen' | 'marker' | 'highlighter';
+export interface DrawElement extends BaseElement {
+    type: 'draw';
+    points: number[][];
+    color: string;
+    opacity: number;
+    brush: DrawBrush;
+    strokeWidth: number;
+    thinning?: number;
+    smoothing?: number;
+    streamline?: number;
+    taperStart?: boolean;
+    taperEnd?: boolean;
+}
+export interface StickyElement extends BaseElement {
+    type: 'sticky';
+    text: string;
+    bgColor: string;
+    textColor: string;
+    fontSize: number;
+    fontFamily: string;
+    fontWeight: number;
+    textAlign: 'left' | 'center' | 'right';
+    padding: number;
+    borderRadius: number;
+    opacity: number;
+    shadow?: boolean;
+}
 export interface MotionPathElement extends BaseElement {
     type: 'motionPath';
     points: PathPoint[];
@@ -480,7 +511,7 @@ export interface ContainerElement extends BaseElement {
     borderWidth?: number;
     borderRadius?: number;
 }
-export type CanvasElement = CodeElement | TextElement | ArrowElement | ImageElement | VideoElement | ShapeElement | CounterElement | ChartElement | IconElement | SvgElement | MotionPathElement | ProgressElement | ContainerElement;
+export type CanvasElement = CodeElement | TextElement | ArrowElement | ImageElement | VideoElement | ShapeElement | CounterElement | ChartElement | IconElement | SvgElement | MotionPathElement | ProgressElement | ContainerElement | DrawElement | StickyElement;
 export type ParticleShape = 'circle' | 'square' | 'star' | 'triangle';
 export interface ParticlesConfig {
     enabled: boolean;

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.d.ts

@@ -0,0 +1,26 @@
+import type { DrawElement } from '../types';
+export interface StrokeOptions {
+    size: number;
+    thinning: number;
+    smoothing: number;
+    streamline: number;
+    taperStart: boolean;
+    taperEnd: boolean;
+}
+export declare function resolveStrokeOptions(el: Pick<DrawElement, 'brush' | 'strokeWidth' | 'thinning' | 'smoothing' | 'streamline' | 'taperStart' | 'taperEnd'>): StrokeOptions;
+/** Compute the axis-aligned bounding box of raw input points. */
+export declare function pointsBounds(points: number[][]): {
+    minX: number;
+    minY: number;
+    width: number;
+    height: number;
+};
+/**
+ * Build the renderable path + viewBox for a draw element. Points are assumed
+ * to already be in a 0,0-origin local space; the viewBox spans their bounds
+ * (plus stroke padding) so the element box scales the stroke on resize.
+ */
+export declare function drawElementToPath(el: Pick<DrawElement, 'points' | 'brush' | 'strokeWidth' | 'thinning' | 'smoothing' | 'streamline' | 'taperStart' | 'taperEnd'>): {
+    d: string;
+    viewBox: string;
+};

package/dist/utils/freehand.js

@@ -0,0 +1,70 @@
+import getStroke from 'perfect-freehand';
+const BRUSH_DEFAULTS = {
+    // Tapered, pressure-responsive — feels like an ink pen.
+    pen: { thinning: 0.6, smoothing: 0.5, streamline: 0.5, taperStart: true, taperEnd: true },
+    // Flat, even width — a chisel marker.
+    marker: { thinning: 0.1, smoothing: 0.55, streamline: 0.5, taperStart: false, taperEnd: false },
+    // Even width like marker; the translucency comes from element opacity.
+    highlighter: { thinning: 0, smoothing: 0.6, streamline: 0.5, taperStart: false, taperEnd: false }
+};
+export function resolveStrokeOptions(el) {
+    const d = BRUSH_DEFAULTS[el.brush] ?? BRUSH_DEFAULTS.pen;
+    return {
+        size: el.strokeWidth,
+        thinning: el.thinning ?? d.thinning ?? 0.5,
+        smoothing: el.smoothing ?? d.smoothing ?? 0.5,
+        streamline: el.streamline ?? d.streamline ?? 0.5,
+        taperStart: el.taperStart ?? d.taperStart ?? false,
+        taperEnd: el.taperEnd ?? d.taperEnd ?? false
+    };
+}
+/** Turn a perfect-freehand outline polygon into an SVG path `d` string. */
+function outlineToPath(points) {
+    if (points.length === 0)
+        return '';
+    const d = points.reduce((acc, [x0, y0], i, arr) => {
+        const [x1, y1] = arr[(i + 1) % arr.length];
+        acc.push(x0, y0, (x0 + x1) / 2, (y0 + y1) / 2);
+        return acc;
+    }, ['M', points[0][0], points[0][1], 'Q']);
+    d.push('Z');
+    return d.join(' ');
+}
+/** Compute the axis-aligned bounding box of raw input points. */
+export function pointsBounds(points) {
+    if (points.length === 0)
+        return { minX: 0, minY: 0, width: 0, height: 0 };
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const [x, y] of points) {
+        if (x < minX)
+            minX = x;
+        if (y < minY)
+            minY = y;
+        if (x > maxX)
+            maxX = x;
+        if (y > maxY)
+            maxY = y;
+    }
+    return { minX, minY, width: maxX - minX, height: maxY - minY };
+}
+/**
+ * Build the renderable path + viewBox for a draw element. Points are assumed
+ * to already be in a 0,0-origin local space; the viewBox spans their bounds
+ * (plus stroke padding) so the element box scales the stroke on resize.
+ */
+export function drawElementToPath(el) {
+    const opts = resolveStrokeOptions(el);
+    const stroke = getStroke(el.points, {
+        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: opts.taperEnd ? opts.size * 4 : 0, cap: !opts.taperEnd }
+    });
+    const d = outlineToPath(stroke);
+    const b = pointsBounds(el.points);
+    const pad = opts.size;
+    const vb = `${b.minX - pad} ${b.minY - pad} ${b.width + pad * 2} ${b.height + pad * 2}`;
+    return { d, viewBox: vb };
+}

package/dist/utils/path-morph.d.ts

@@ -0,0 +1,89 @@
+import type { ShapeType, CanvasElement } from '../types';
+/** Build a `d` string for a shape type, fitted to a w×h box (origin 0,0). */
+export declare function shapeToPath(type: ShapeType, w: number, h: number, borderRadius?: number): string;
+/**
+ * Extract drawable path `d` strings from raw SVG markup. Returns an array of
+ * subpath `d` strings (one per primitive). Empty when nothing is drawable.
+ */
+export declare function extractPaths(svgContent: string): string[];
+/**
+ * Like extractPaths, but pairs each subpath with its own fill color so a
+ * multi-color SVG morphs per-piece (one `<path>` per subpath) instead of
+ * flattening to a single representative color. Primitives without their own
+ * fill inherit the root `<svg fill="…">` (default black, matching the
+ * browser), which is exactly the black outline strokes on icon SVGs.
+ */
+export declare function extractPathsWithFill(svgContent: string): Array<{
+    d: string;
+    fill: string;
+}>;
+/** Single combined `d` (all subpaths concatenated) — for simple morphs. */
+export declare function extractCombinedPath(svgContent: string): string | null;
+/**
+ * Pick a representative fill color from SVG markup — the first non-"none"
+ * `fill` attribute. Used to color the flattened morph path (which loses
+ * per-subpath fills). Returns null if none found.
+ */
+export declare function extractFill(svgContent: string): string | null;
+/**
+ * Re-fit a path `d` from its own viewBox into a target W×H box (origin 0,0).
+ * Morph stops must share a coordinate space or flubber produces scale jumps;
+ * authoring normalizes every stop into the element's box via this. Parses to
+ * absolute cubics, scales anchors + handles, re-serializes.
+ */
+export declare function fitPathToBox(d: string, sourceViewBox: string, targetW: number, targetH: number): string;
+/**
+ * Resolve any vector element (shape / svg / draw) to its current geometry as
+ * a path `d` plus the viewBox that `d` lives in. Single source of truth for
+ * both the morph engine and the "snapshot current" authoring action.
+ */
+export declare function resolveElementPath(el: CanvasElement): {
+    d: string;
+    viewBox: string;
+} | null;
+/**
+ * Like resolveElementPath but keeps subpaths SEPARATE, each with its own fill,
+ * so multi-color SVGs morph per-piece. Shapes/draws return a single part.
+ */
+export declare function resolveElementPathParts(el: CanvasElement): {
+    parts: Array<{
+        d: string;
+        fill: string;
+    }>;
+    viewBox: string;
+} | null;
+export type PathInterpolator = (t: number) => string;
+/** One morphing piece: a `d` interpolator plus the color it lerps across. */
+export interface MorphPart {
+    interp: PathInterpolator;
+    fromColor: string;
+    toColor: string;
+}
+/**
+ * Build per-piece morph parts between two fill-tagged subpath lists. Each `d`
+ * MUST already be in the same coordinate space (caller fits the source into
+ * the target viewBox). Picks the right flubber routine by count so 1↔many and
+ * many↔1 map correctly, and pairs colors per piece so multi-color SVGs keep
+ * their colors instead of flattening to one.
+ */
+export declare function makeMorphParts(from: Array<{
+    d: string;
+    fill: string;
+}>, to: Array<{
+    d: string;
+    fill: string;
+}>): MorphPart[];
+/**
+ * Build an interpolator between two `d` strings. Handles differing subpath
+ * counts via flubber's many-to-many interpolation, falling back to a simple
+ * single-path interpolate. Always returns a function (t:0..1) => d.
+ */
+export declare function makePathInterpolator(fromD: string, toD: string): PathInterpolator;
+/**
+ * Build a single interpolator that morphs through an ordered list of `d`
+ * stops. `t` runs 0..1 across the whole sequence; the segment is picked by
+ * scaling `t` across (stops.length - 1) and interpolating within it. Used by
+ * the within-slide multi-target morph (circle → star → hexagon → …).
+ * When `loop` is true the sequence wraps back to the first stop.
+ */
+export declare function makeSequenceInterpolator(stops: string[], loop?: boolean): PathInterpolator;