animot-presenter 0.5.21 → 0.5.23

package/dist/AnimotPresenter.svelte

@@ -55,8 +55,14 @@
 		if (motionPathLoopAbort) { motionPathLoopAbort.abort(); motionPathLoopAbort = null; }
 	}
 
-	// Keyframe schedule loop — independent from motion-path / morph engines.
+	// Keyframe schedule loop. Plain (non-reactive) module-scope state — adding
+	// $state for keyframe overrides in 0.5.20 broke reactivity for the existing
+	// tween-driven render. This implementation only retargets existing tweens
+	// via setTimeout; nothing here is reactive, nothing is read from render.
 	let keyframeLoopAbort: AbortController | null = null;
+	// Per-element overrides for keyframe-driven props that aren't tweened
+	// (backgroundColor, text color). The schedule writes these at each
+	// keyframe boundary; liveProps reads them at render time.
 	let keyframeOverrides = $state<Map<string, Record<string, any>>>(new Map());
 	function cancelKeyframeLoops() {
 		if (keyframeLoopAbort) { keyframeLoopAbort.abort(); keyframeLoopAbort = null; }
@@ -66,27 +72,28 @@
 		keyframeOverrides.set(elementId, { ...cur, [prop]: value });
 		keyframeOverrides = new Map(keyframeOverrides);
 	}
-	function easingForTween(name: string | undefined): string {
-		// Animotion tween easing accepts strings; pass-through with default.
-		switch (name) {
-			case 'linear': case 'ease-in': case 'ease-out': case 'ease-in-out': return name;
-			case 'spring': return 'ease-out';
-			case 'ease': default: return 'ease-out';
-		}
+	// Tweens take an easing FUNCTION (t→number), not a CSS keyword. Returning
+	// a string here was the cause of "r is not a function" thrown deep in the
+	// tween animation loop — `r(t)` crashed because `r` was the literal string
+	// passed in. Reuse the engine's `getEasingFn` so keyframe easing matches
+	// the slide-morph engine's vocabulary.
+	function easingForTween(name: string | undefined): (t: number) => number {
+		return getEasingFn(name ?? 'ease-out');
 	}
 	function animateKeyframes(slide: Slide) {
 		cancelKeyframeLoops();
+		const hasAnyKeyframes = slide.canvas.elements.some((el) => el.keyframes && el.keyframes.length > 0);
+		if (keyframeOverrides.size > 0) keyframeOverrides = new Map();
+		if (!hasAnyKeyframes) return;
 		keyframeLoopAbort = new AbortController();
 		const signal = keyframeLoopAbort.signal;
-		if (keyframeOverrides.size > 0) keyframeOverrides = new Map();
 		for (const element of slide.canvas.elements) {
 			if (!element.keyframes || element.keyframes.length === 0) continue;
 			const animated = animatedElements.get(element.id) as any;
 			if (!animated) continue;
 			const sorted = [...element.keyframes].sort((a, b) => a.time - b.time);
 			const first = sorted[0];
-
-			// Snap to KF1 instantly so the slide-displayed pose IS the start.
+			// Snap tweens to KF1 instantly so the slide-displayed pose IS the start.
 			if (first.position) { animated.x?.to(first.position.x, { duration: 0 }); animated.y?.to(first.position.y, { duration: 0 }); }
 			if (first.size) { animated.width?.to(first.size.width, { duration: 0 }); animated.height?.to(first.size.height, { duration: 0 }); }
 			if (first.rotation !== undefined) animated.rotation?.to(first.rotation, { duration: 0 });
@@ -107,9 +114,7 @@
 			if (first.grayscale !== undefined) animated.grayscale?.to(first.grayscale, { duration: 0 });
 			if (first.backgroundColor !== undefined) setKeyframeOverride(element.id, 'backgroundColor', first.backgroundColor);
 			if (first.color !== undefined) setKeyframeOverride(element.id, 'color', first.color);
-
 			for (const kf of sorted.slice(1)) {
-				const delay = Math.max(0, kf.time);
 				setTimeout(() => {
 					if (signal.aborted) return;
 					const easing = easingForTween(kf.easing);
@@ -136,7 +141,7 @@
 					if (kf.grayscale !== undefined) animated.grayscale?.to(kf.grayscale, { duration: span, easing });
 					if (kf.backgroundColor !== undefined) setKeyframeOverride(element.id, 'backgroundColor', kf.backgroundColor);
 					if (kf.color !== undefined) setKeyframeOverride(element.id, 'color', kf.color);
-				}, delay);
+				}, Math.max(0, kf.time));
 			}
 		}
 	}
@@ -350,54 +355,15 @@
 		return elements.map(e => e.id);
 	});
 
-	/**
-	 * Resolve an element's pose on a slide, taking per-element keyframes
-	 * into account. Keyframes turn the element's "effective state" into
-	 * something time-dependent — `pose='enter'` returns the FIRST keyframe's
-	 * state (used as morph TARGET / initial-tween-seed), `pose='exit'` the
-	 * LAST keyframe's (used as morph SOURCE on slide leave).
-	 */
-	function getElementInSlide(slide: Slide | null, elementId: string, pose: 'enter' | 'exit' = 'enter'): CanvasElement | undefined {
-		const el = slide?.canvas.elements.find(el => el.id === elementId);
-		if (!el) return el;
-		if (!el.keyframes || el.keyframes.length === 0) return el;
-		const sorted = [...el.keyframes].sort((a, b) => a.time - b.time);
-		const k = pose === 'exit' ? sorted[sorted.length - 1] : sorted[0];
-		const out: any = { ...el };
-		if (k.position) out.position = k.position;
-		if (k.size) out.size = k.size;
-		if (k.rotation !== undefined) out.rotation = k.rotation;
-		if (k.opacity !== undefined) out.opacity = k.opacity;
-		if (k.skewX !== undefined) out.skewX = k.skewX;
-		if (k.skewY !== undefined) out.skewY = k.skewY;
-		if (k.tiltX !== undefined) out.tiltX = k.tiltX;
-		if (k.tiltY !== undefined) out.tiltY = k.tiltY;
-		if (k.borderRadius !== undefined) out.borderRadius = k.borderRadius;
-		if (k.fontSize !== undefined) out.fontSize = k.fontSize;
-		if (k.fillColor !== undefined) out.fillColor = k.fillColor;
-		if (k.strokeColor !== undefined) out.strokeColor = k.strokeColor;
-		if (k.strokeWidth !== undefined) out.strokeWidth = k.strokeWidth;
-		if (k.blur !== undefined) out.blur = k.blur;
-		if (k.brightness !== undefined) out.brightness = k.brightness;
-		if (k.contrast !== undefined) out.contrast = k.contrast;
-		if (k.saturate !== undefined) out.saturate = k.saturate;
-		if (k.grayscale !== undefined) out.grayscale = k.grayscale;
-		return out as CanvasElement;
+	function getElementInSlide(slide: Slide | null, elementId: string): CanvasElement | undefined {
+		return slide?.canvas.elements.find(el => el.id === elementId);
 	}
 
 	/**
-	 * Overlay the current LIVE tween values for properties that the renderer
-	 * reads directly from element data. Lets per-element keyframes drive
-	 * borderRadius / fontSize / shape colors / stroke width / CSS filters
-	 * at render time, plus non-tweened overrides (backgroundColor, color).
-	 */
-	/**
-	 * Overlay tween-driven values for properties that the renderer reads
-	 * directly from element data (instead of via tween.current). Only
-	 * applies when this element has keyframes OR has an active override —
-	 * for everything else this is a passthrough so the existing slide-morph
-	 * render pipeline is left exactly as it was. Without this gate, every
-	 * render frame allocated a new copy and crowded out the tween reads.
+	 * Overlay tween-driven values + non-tweened keyframe overrides onto the
+	 * element used in render. Gated: returns the element unchanged when it
+	 * has no keyframes AND no active override — that's the 99% case and
+	 * keeps the existing slide-morph render pipeline allocation-free.
 	 */
 	function liveProps<T extends CanvasElement>(element: T): T {
 		const hasKeyframes = !!element.keyframes && element.keyframes.length > 0;
@@ -562,36 +528,71 @@
 			for (const element of slide.canvas.elements) {
 				if (!animatedElements.has(element.id)) {
 					const inCurrent = getElementInSlide(currentSlide, element.id);
-					const startOpacity = inCurrent ? ((inCurrent as any).opacity ?? 1) : 0;
+					let startOpacity = inCurrent ? ((inCurrent as any).opacity ?? 1) : 0;
 					const br = (element as any).borderRadius ?? 0;
 					const isShape = element.type === 'shape';
 					const shapeEl = isShape ? element as ShapeElement : null;
 					const isText = element.type === 'text';
 					const textEl = isText ? element as TextElement : null;
+
+					// If the element has keyframes, seed each tween with the FIRST
+					// keyframe's value instead of the persisted (last-captured)
+					// state. The persisted state is whatever was on the canvas
+					// at the moment the user captured their final keyframe; using
+					// it as the tween's starting value would cause the slide to
+					// flash at the "wrong" pose before the keyframe schedule
+					// snaps it to KF1. Doing it here also avoids depending on a
+					// duration:0 snap that the tween library may not apply
+					// synchronously.
+					const sortedKfs = element.keyframes && element.keyframes.length > 0
+						? [...element.keyframes].sort((a, b) => a.time - b.time)
+						: null;
+					const k0 = sortedKfs ? sortedKfs[0] : null;
+					const seedX = k0?.position ? k0.position.x : element.position.x;
+					const seedY = k0?.position ? k0.position.y : element.position.y;
+					const seedW = k0?.size ? k0.size.width : element.size.width;
+					const seedH = k0?.size ? k0.size.height : element.size.height;
+					const seedRot = k0?.rotation !== undefined ? k0.rotation : element.rotation;
+					const seedSkewX = k0?.skewX !== undefined ? k0.skewX : (element.skewX ?? 0);
+					const seedSkewY = k0?.skewY !== undefined ? k0.skewY : (element.skewY ?? 0);
+					const seedTiltX = k0?.tiltX !== undefined ? k0.tiltX : (element.tiltX ?? 0);
+					const seedTiltY = k0?.tiltY !== undefined ? k0.tiltY : (element.tiltY ?? 0);
+					if (k0?.opacity !== undefined) startOpacity = k0.opacity;
+					const seedBR = k0?.borderRadius !== undefined ? k0.borderRadius : br;
+					const seedFontSize = k0?.fontSize !== undefined ? k0.fontSize : (textEl ? textEl.fontSize : 0);
+					const seedFill = k0?.fillColor !== undefined ? k0.fillColor : (shapeEl ? shapeEl.fillColor : '');
+					const seedStroke = k0?.strokeColor !== undefined ? k0.strokeColor : (shapeEl ? shapeEl.strokeColor : '');
+					const seedStrokeW = k0?.strokeWidth !== undefined ? k0.strokeWidth : (shapeEl ? shapeEl.strokeWidth : 0);
+					const seedBlur = k0?.blur !== undefined ? k0.blur : (element.blur ?? 0);
+					const seedBright = k0?.brightness !== undefined ? k0.brightness : (element.brightness ?? 100);
+					const seedContrast = k0?.contrast !== undefined ? k0.contrast : (element.contrast ?? 100);
+					const seedSat = k0?.saturate !== undefined ? k0.saturate : (element.saturate ?? 100);
+					const seedGray = k0?.grayscale !== undefined ? k0.grayscale : (element.grayscale ?? 0);
+
 					animatedElements.set(element.id, {
-						x: tween(element.position.x, { duration: 500 }),
-						y: tween(element.position.y, { duration: 500 }),
-						width: tween(element.size.width, { duration: 500 }),
-						height: tween(element.size.height, { duration: 500 }),
-						rotation: tween(element.rotation, { duration: 500 }),
-						skewX: tween(element.skewX ?? 0, { duration: 500 }),
-						skewY: tween(element.skewY ?? 0, { duration: 500 }),
-						tiltX: tween(element.tiltX ?? 0, { duration: 500 }),
-						tiltY: tween(element.tiltY ?? 0, { duration: 500 }),
+						x: tween(seedX, { duration: 500 }),
+						y: tween(seedY, { duration: 500 }),
+						width: tween(seedW, { duration: 500 }),
+						height: tween(seedH, { duration: 500 }),
+						rotation: tween(seedRot, { duration: 500 }),
+						skewX: tween(seedSkewX, { duration: 500 }),
+						skewY: tween(seedSkewY, { duration: 500 }),
+						tiltX: tween(seedTiltX, { duration: 500 }),
+						tiltY: tween(seedTiltY, { duration: 500 }),
 						perspective: tween(element.perspective ?? 1000, { duration: 500 }),
 						opacity: tween(startOpacity, { duration: 300 }),
-						borderRadius: tween(br, { duration: 500 }),
-						fontSize: textEl ? tween(textEl.fontSize, { duration: 500 }) : null,
-						fillColor: shapeEl ? tween(shapeEl.fillColor, { duration: 500 }) : null,
-						strokeColor: shapeEl ? tween(shapeEl.strokeColor, { duration: 500 }) : null,
-						strokeWidth: shapeEl ? tween(shapeEl.strokeWidth, { duration: 500 }) : null,
+						borderRadius: tween(seedBR, { duration: 500 }),
+						fontSize: textEl ? tween(seedFontSize, { duration: 500 }) : null,
+						fillColor: shapeEl ? tween(seedFill, { duration: 500 }) : null,
+						strokeColor: shapeEl ? tween(seedStroke, { duration: 500 }) : null,
+						strokeWidth: shapeEl ? tween(seedStrokeW, { duration: 500 }) : null,
 						shapeMorph: shapeEl ? tween(1, { duration: 500 }) : null,
 						motionPathProgress: element.motionPathConfig ? tween(0, { duration: 500 }) : null,
-						blur: tween(element.blur ?? 0, { duration: 500 }),
-						brightness: tween(element.brightness ?? 100, { duration: 500 }),
-						contrast: tween(element.contrast ?? 100, { duration: 500 }),
-						saturate: tween(element.saturate ?? 100, { duration: 500 }),
-						grayscale: tween(element.grayscale ?? 0, { duration: 500 })
+						blur: tween(seedBlur, { duration: 500 }),
+						brightness: tween(seedBright, { duration: 500 }),
+						contrast: tween(seedContrast, { duration: 500 }),
+						saturate: tween(seedSat, { duration: 500 }),
+						grayscale: tween(seedGray, { duration: 500 })
 					});
 					const currentSlideEl = getElementInSlide(currentSlide, element.id);
 					elementContent.set(element.id, JSON.parse(JSON.stringify(currentSlideEl || element)));
@@ -853,9 +854,7 @@
 		// Per-element morphing (transition type = 'none')
 		const animations: Promise<void>[] = [];
 		for (const elementId of allElementIds) {
-			// FROM-sync: use the EXIT pose (last keyframe) so morph starts
-			// from where the keyframe loop left the element on screen.
-			const currentEl = getElementInSlide(currentSlide, elementId, 'exit');
+			const currentEl = getElementInSlide(currentSlide, elementId);
 			const animated = animatedElements.get(elementId);
 			if (!animated) continue;
 			if (currentEl) {
@@ -916,8 +915,8 @@
 		const animationTasks: AnimationTask[] = [];
 
 		for (const elementId of allElementIds) {
-			const currentEl = getElementInSlide(currentSlide, elementId, 'exit');
-			const targetEl = getElementInSlide(targetSlide, elementId, 'enter');
+			const currentEl = getElementInSlide(currentSlide, elementId);
+			const targetEl = getElementInSlide(targetSlide, elementId);
 			const animated = animatedElements.get(elementId);
 			if (!animated) continue;
 			const animConfig = targetEl?.animationConfig || currentEl?.animationConfig;