animot-presenter 0.5.20 → 0.5.22

package/dist/AnimotPresenter.svelte

@@ -56,18 +56,15 @@
 	}
 
 	// 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.
 	let keyframeLoopAbort: AbortController | null = null;
-	let keyframeOverrides = $state<Map<string, Record<string, any>>>(new Map());
 	function cancelKeyframeLoops() {
 		if (keyframeLoopAbort) { keyframeLoopAbort.abort(); keyframeLoopAbort = null; }
 	}
-	function setKeyframeOverride(elementId: string, prop: string, value: any) {
-		const cur = keyframeOverrides.get(elementId) ?? {};
-		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';
@@ -76,17 +73,19 @@
 	}
 	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 (!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.
 			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 });
@@ -105,11 +104,7 @@
 			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)) {
-				const delay = Math.max(0, kf.time);
 				setTimeout(() => {
 					if (signal.aborted) return;
 					const easing = easingForTween(kf.easing);
@@ -134,9 +129,7 @@
 					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);
-				}, delay);
+				}, Math.max(0, kf.time));
 			}
 		}
 	}
@@ -350,67 +343,8 @@
 		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;
-	}
-
-	/**
-	 * 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).
-	 */
-	function liveProps<T extends CanvasElement>(element: T): T {
-		const a = animatedElements.get(element.id);
-		const overrides = keyframeOverrides.get(element.id);
-		if (!a && !overrides) return element;
-		const e = element as any;
-		const out: any = { ...element };
-		if (a) {
-			if ((a as any).borderRadius && e.borderRadius !== undefined) out.borderRadius = (a as any).borderRadius.current;
-			if ((a as any).fontSize && e.fontSize !== undefined) out.fontSize = (a as any).fontSize.current;
-			if ((a as any).fillColor && e.fillColor !== undefined) out.fillColor = (a as any).fillColor.current;
-			if ((a as any).strokeColor && e.strokeColor !== undefined) out.strokeColor = (a as any).strokeColor.current;
-			if ((a as any).strokeWidth && e.strokeWidth !== undefined) out.strokeWidth = (a as any).strokeWidth.current;
-			if ((a as any).blur && e.blur !== undefined) out.blur = (a as any).blur.current;
-			if ((a as any).brightness && e.brightness !== undefined) out.brightness = (a as any).brightness.current;
-			if ((a as any).contrast && e.contrast !== undefined) out.contrast = (a as any).contrast.current;
-			if ((a as any).saturate && e.saturate !== undefined) out.saturate = (a as any).saturate.current;
-			if ((a as any).grayscale && e.grayscale !== undefined) out.grayscale = (a as any).grayscale.current;
-		}
-		if (overrides) Object.assign(out, overrides);
-		return out as T;
+	function getElementInSlide(slide: Slide | null, elementId: string): CanvasElement | undefined {
+		return slide?.canvas.elements.find(el => el.id === elementId);
 	}
 
 	// Typewriter
@@ -844,9 +778,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) {
@@ -907,8 +839,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;
@@ -1452,7 +1384,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 = liveProps(element) as CodeElement}
+								{@const codeEl = 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}
@@ -1509,7 +1441,7 @@
 									</div>
 								</div>
 							{:else if element.type === 'text'}
-								{@const textEl = liveProps(element) as TextElement}
+								{@const textEl = 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}
@@ -1540,7 +1472,7 @@
 									{#if !isActionTextMode}{displayText}{#if typewriterState?.isAnimating}<span class="animot-typewriter-cursor">|</span>{/if}{/if}
 								</div>
 							{:else if element.type === 'arrow'}
-								{@const arrowEl = liveProps(element) as ArrowElement}
+								{@const arrowEl = 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}
@@ -1563,11 +1495,11 @@
 									{/if}
 								</svg>
 							{:else if element.type === 'image'}
-								{@const imgEl = liveProps(element) as ImageElement}
+								{@const imgEl = 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 = liveProps(element) as VideoElement}
+									{@const videoEl = 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}>
@@ -1577,7 +1509,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 = liveProps(element) as ShapeElement}
+								{@const shapeEl = element as ShapeElement}
 								{@const animFill = animated.fillColor?.current ?? shapeEl.fillColor}
 								{@const animStroke = animated.strokeColor?.current ?? shapeEl.strokeColor}
 								{@const animStrokeWidth = animated.strokeWidth?.current ?? shapeEl.strokeWidth}