animot-presenter 0.6.2 → 0.6.4

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/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;