animot-presenter 0.2.1 → 0.2.2

package/dist/AnimotPresenter.svelte

@@ -444,6 +444,16 @@
 			}
 		}
 
+		// Update elementContent BEFORE animations start so rendered elements
+		// (especially SVG viewBox) use target slide data while animating
+		for (const elementId of allElementIds) {
+			const targetEl = getElementInSlide(targetSlide, elementId);
+			if (targetEl && targetEl.type !== 'code') {
+				elementContent.set(elementId, JSON.parse(JSON.stringify(targetEl)));
+			}
+		}
+		elementContent = new Map(elementContent);
+
 		interface AnimationTask { elementId: string; order: number; delay: number; elementDuration: number; run: () => Promise<void>[]; }
 		const animationTasks: AnimationTask[] = [];
 
@@ -552,6 +562,28 @@
 							if (animated.strokeWidth) anims.push(animated.strokeWidth.to(s.strokeWidth, { duration: elementDuration, easing }));
 						}
 						if (!currentEl) {
+							// Snap ALL properties to target instantly — the tween may hold
+							// stale values from a previous slide where the element last appeared
+							anims.push(animated.x.to(targetEl.position.x, { duration: 0 }));
+							anims.push(animated.y.to(targetEl.position.y, { duration: 0 }));
+							anims.push(animated.width.to(targetEl.size.width, { duration: 0 }));
+							anims.push(animated.height.to(targetEl.size.height, { duration: 0 }));
+							anims.push(animated.rotation.to(targetEl.rotation, { duration: 0 }));
+							anims.push(animated.skewX.to(targetEl.skewX ?? 0, { duration: 0 }));
+							anims.push(animated.skewY.to(targetEl.skewY ?? 0, { duration: 0 }));
+							anims.push(animated.tiltX.to(targetEl.tiltX ?? 0, { duration: 0 }));
+							anims.push(animated.tiltY.to(targetEl.tiltY ?? 0, { duration: 0 }));
+							anims.push(animated.perspective.to(targetEl.perspective ?? 1000, { duration: 0 }));
+							anims.push(animated.borderRadius.to((targetEl as any).borderRadius ?? 0, { duration: 0 }));
+							if (targetEl.type === 'text' && animated.fontSize) {
+								anims.push(animated.fontSize.to((targetEl as TextElement).fontSize, { duration: 0 }));
+							}
+							if (targetEl.type === 'shape') {
+								const s = targetEl as ShapeElement;
+								if (animated.fillColor) anims.push(animated.fillColor.to(s.fillColor, { duration: 0 }));
+								if (animated.strokeColor) anims.push(animated.strokeColor.to(s.strokeColor, { duration: 0 }));
+								if (animated.strokeWidth) anims.push(animated.strokeWidth.to(s.strokeWidth, { duration: 0 }));
+							}
 							const entrance = targetEl.animationConfig?.entrance ?? 'fade';
 							if (entrance === 'fade') {
 								anims.push(animated.opacity.to(1, { duration: elementDuration / 2, easing }));
@@ -920,11 +952,11 @@
 								<IconRenderer element={element as IconElement} />
 							{:else if element.type === 'svg'}
 								{@const svgEl = element as SvgElement}
-								{@const svgInner = (() => { const m = svgEl.svgContent.trim().match(/^<svg[^>]*>([\s\S]*)<\/svg>$/i); return m ? m[1] : svgEl.svgContent; })()}
+								{@const svgParsed = (() => { const m = svgEl.svgContent.trim().match(/^<svg([^>]*)>([\s\S]*)<\/svg>$/i); if (m) { const vb = m[1].match(/viewBox=["']([^"']+)["']/i); return { inner: m[2], viewBox: vb ? vb[1] : null }; } return { inner: svgEl.svgContent, viewBox: null }; })()}
 								<div class="animot-svg-element" style:opacity={svgEl.opacity}>
-									<svg width="100%" height="100%" viewBox="0 0 {svgEl.size.width} {svgEl.size.height}" preserveAspectRatio={svgEl.preserveAspectRatio} xmlns="http://www.w3.org/2000/svg">
+									<svg width="100%" height="100%" viewBox={svgEl.viewBox ?? svgParsed.viewBox ?? `0 0 ${svgEl.size.width} ${svgEl.size.height}`} preserveAspectRatio={svgEl.preserveAspectRatio} xmlns="http://www.w3.org/2000/svg">
 										<g style={svgEl.color ? `fill:${svgEl.color};stroke:${svgEl.color}` : ''}>
-											{@html svgInner}
+											{@html svgParsed.inner}
 										</g>
 									</svg>
 								</div>