animot-presenter 0.5.22 → 0.5.23

package/dist/AnimotPresenter.svelte

@@ -55,28 +55,35 @@
 		if (motionPathLoopAbort) { motionPathLoopAbort.abort(); motionPathLoopAbort = null; }
 	}
 
-	// Keyframe schedule loop — independent from motion-path / morph engines.
-	// Plain (non-reactive) state: no $state for the abort controller because
-	// the keyframe loop only retargets existing tweens and doesn't need to
-	// drive any reactive UI of its own. Adding reactive state here proved to
-	// crowd out the existing tween reactivity in 0.5.20.
+	// 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; }
 	}
-	function easingForTween(name: string | undefined): string {
-		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';
-		}
+	function setKeyframeOverride(elementId: string, prop: string, value: any) {
+		const cur = keyframeOverrides.get(elementId) ?? {};
+		keyframeOverrides.set(elementId, { ...cur, [prop]: value });
+		keyframeOverrides = new Map(keyframeOverrides);
+	}
+	// 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();
-		// Bail if nothing on the slide actually has keyframes — avoids
-		// allocating an AbortController + iterating elements for the common
-		// case (no keyframes anywhere).
 		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;
@@ -86,6 +93,7 @@
 			if (!animated) continue;
 			const sorted = [...element.keyframes].sort((a, b) => a.time - b.time);
 			const first = sorted[0];
+			// 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 });
@@ -104,6 +112,8 @@
 			if (first.contrast !== undefined) animated.contrast?.to(first.contrast, { duration: 0 });
 			if (first.saturate !== undefined) animated.saturate?.to(first.saturate, { duration: 0 });
 			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)) {
 				setTimeout(() => {
 					if (signal.aborted) return;
@@ -129,6 +139,8 @@
 					if (kf.contrast !== undefined) animated.contrast?.to(kf.contrast, { duration: span, easing });
 					if (kf.saturate !== undefined) animated.saturate?.to(kf.saturate, { duration: span, easing });
 					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);
 				}, Math.max(0, kf.time));
 			}
 		}
@@ -347,6 +359,35 @@
 		return slide?.canvas.elements.find(el => el.id === elementId);
 	}
 
+	/**
+	 * 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;
+		const overrides = keyframeOverrides.get(element.id);
+		if (!hasKeyframes && !overrides) return element;
+		const a = animatedElements.get(element.id) as any;
+		const e = element as any;
+		const out: any = { ...element };
+		if (a && hasKeyframes) {
+			if (a.borderRadius && e.borderRadius !== undefined) out.borderRadius = a.borderRadius.current;
+			if (a.fontSize && e.fontSize !== undefined) out.fontSize = a.fontSize.current;
+			if (a.fillColor && e.fillColor !== undefined) out.fillColor = a.fillColor.current;
+			if (a.strokeColor && e.strokeColor !== undefined) out.strokeColor = a.strokeColor.current;
+			if (a.strokeWidth && e.strokeWidth !== undefined) out.strokeWidth = a.strokeWidth.current;
+			if (a.blur && e.blur !== undefined) out.blur = a.blur.current;
+			if (a.brightness && e.brightness !== undefined) out.brightness = a.brightness.current;
+			if (a.contrast && e.contrast !== undefined) out.contrast = a.contrast.current;
+			if (a.saturate && e.saturate !== undefined) out.saturate = a.saturate.current;
+			if (a.grayscale && e.grayscale !== undefined) out.grayscale = a.grayscale.current;
+		}
+		if (overrides) Object.assign(out, overrides);
+		return out as T;
+	}
+
 	// Typewriter
 	function startTypewriterAnimation(elementId: string, fullText: string, speed: number) {
 		const existing = typewriterIntervals.get(elementId);
@@ -487,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)));
@@ -1384,7 +1460,7 @@
 							use:decorations={{ config: element.decorations, slideDuration: currentSlide?.duration, shape: element.type === 'shape' ? { type: (element as any).shapeType, borderRadius: (element as any).borderRadius } : undefined, key: `${currentSlideIndex}-${JSON.stringify(element.decorations ?? null)}-${element.type === 'shape' ? (element as any).shapeType + ':' + ((element as any).borderRadius ?? 0) : ''}` }}
 						>
 							{#if element.type === 'code'}
-								{@const codeEl = element as CodeElement}
+								{@const codeEl = liveProps(element) as CodeElement}
 								{@const morphState = codeMorphState.get(codeEl.id)}
 								<div class="animot-code-block" class:transparent-bg={codeEl.transparentBackground} style:font-size="{codeEl.fontSize}px" style:font-weight={codeEl.fontWeight || 400} style:padding="{codeEl.padding}px" style:border-radius="{animated.borderRadius.current}px" style:background={codeEl.bgColor ?? '#0d1117'}>
 									{#if codeEl.showHeader}
@@ -1441,7 +1517,7 @@
 									</div>
 								</div>
 							{:else if element.type === 'text'}
-								{@const textEl = element as TextElement}
+								{@const textEl = liveProps(element) as TextElement}
 								{@const animFontSize = animated.fontSize?.current ?? textEl.fontSize}
 								{@const typewriterState = textTypewriterState.get(element.id)}
 								{@const displayText = typewriterState?.isAnimating ? typewriterState.fullText.slice(0, typewriterState.displayedChars) : textEl.content}
@@ -1472,7 +1548,7 @@
 									{#if !isActionTextMode}{displayText}{#if typewriterState?.isAnimating}<span class="animot-typewriter-cursor">|</span>{/if}{/if}
 								</div>
 							{:else if element.type === 'arrow'}
-								{@const arrowEl = element as ArrowElement}
+								{@const arrowEl = liveProps(element) as ArrowElement}
 								{@const cp = arrowEl.controlPoints || []}
 								{@const pathD = cp.length === 0 ? `M ${arrowEl.startPoint.x} ${arrowEl.startPoint.y} L ${arrowEl.endPoint.x} ${arrowEl.endPoint.y}` : cp.length === 1 ? `M ${arrowEl.startPoint.x} ${arrowEl.startPoint.y} Q ${cp[0].x} ${cp[0].y} ${arrowEl.endPoint.x} ${arrowEl.endPoint.y}` : cp.length === 2 ? `M ${arrowEl.startPoint.x} ${arrowEl.startPoint.y} C ${cp[0].x} ${cp[0].y} ${cp[1].x} ${cp[1].y} ${arrowEl.endPoint.x} ${arrowEl.endPoint.y}` : buildCatmullRomPath(arrowEl.startPoint, cp, arrowEl.endPoint)}
 								{@const lastCp = cp.length > 0 ? cp[cp.length - 1] : arrowEl.startPoint}
@@ -1495,11 +1571,11 @@
 									{/if}
 								</svg>
 							{:else if element.type === 'image'}
-								{@const imgEl = element as ImageElement}
+								{@const imgEl = liveProps(element) as ImageElement}
 								{@const clipPath = imgEl.clipMask?.enabled ? (imgEl.clipMask.shapeType === 'circle' ? 'circle(50% at 50% 50%)' : imgEl.clipMask.shapeType === 'ellipse' ? 'ellipse(50% 50% at 50% 50%)' : imgEl.clipMask.shapeType === 'triangle' ? 'polygon(50% 0%, 0% 100%, 100% 100%)' : imgEl.clipMask.shapeType === 'star' ? 'polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)' : imgEl.clipMask.shapeType === 'hexagon' ? 'polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)' : (imgEl.clipMask.borderRadius ?? 0) > 0 ? `inset(0 round ${imgEl.clipMask.borderRadius}px)` : 'none') : 'none'}
 								<img class="animot-image-element" src={imgEl.src} alt="" style:object-fit={imgEl.objectFit} style:border-radius="{imgEl.clipMask?.enabled ? 0 : imgEl.borderRadius}px" style:clip-path={clipPath} style:background-color={imgEl.backgroundColor ?? 'transparent'} />
 								{:else if element.type === 'video'}
-									{@const videoEl = element as VideoElement}
+									{@const videoEl = liveProps(element) as VideoElement}
 									{@const videoEmbed = parseEmbedUrl(videoEl.src)}
 									{#if videoEmbed}
 										<div class="animot-video-element animot-embed-wrap" style:border-radius="{videoEl.borderRadius}px" style:opacity={videoEl.opacity}>
@@ -1509,7 +1585,7 @@
 										<video class="animot-video-element" src={videoEl.src} poster={videoEl.posterImage} autoplay={videoEl.autoplay} loop={videoEl.loop} muted={videoEl.muted} controls={!!videoEl.showControls} playsinline preload="auto" style:object-fit={videoEl.objectFit} style:border-radius="{videoEl.borderRadius}px" style:opacity={videoEl.opacity}></video>
 									{/if}
 							{:else if element.type === 'shape'}
-								{@const shapeEl = element as ShapeElement}
+								{@const shapeEl = liveProps(element) as ShapeElement}
 								{@const animFill = animated.fillColor?.current ?? shapeEl.fillColor}
 								{@const animStroke = animated.strokeColor?.current ?? shapeEl.strokeColor}
 								{@const animStrokeWidth = animated.strokeWidth?.current ?? shapeEl.strokeWidth}