animot-presenter 0.2.8 → 0.2.9

package/dist/AnimotPresenter.svelte

@@ -433,6 +433,86 @@
 		}
 	}
 
+	// Reset presentation to first slide (snap all elements back to initial state)
+	async function resetToFirstSlide() {
+		if (isTransitioning) return;
+		isTransitioning = true;
+		clearAllTypewriterAnimations();
+		cancelMotionPathLoops();
+		const firstSlide = slides[0];
+		if (!firstSlide) { isTransitioning = false; return; }
+
+		for (const elementId of allElementIds) {
+			const targetEl = getElementInSlide(firstSlide, elementId);
+			const animated = animatedElements.get(elementId);
+			if (!animated) continue;
+			if (targetEl) {
+				animated.x.to(targetEl.position.x, { duration: 0 }); animated.y.to(targetEl.position.y, { duration: 0 });
+				animated.width.to(targetEl.size.width, { duration: 0 }); animated.height.to(targetEl.size.height, { duration: 0 });
+				animated.rotation.to(targetEl.rotation, { duration: 0 });
+				animated.skewX.to(targetEl.skewX ?? 0, { duration: 0 }); animated.skewY.to(targetEl.skewY ?? 0, { duration: 0 });
+				animated.tiltX.to(targetEl.tiltX ?? 0, { duration: 0 }); animated.tiltY.to(targetEl.tiltY ?? 0, { duration: 0 });
+				animated.perspective.to(targetEl.perspective ?? 1000, { duration: 0 });
+				animated.opacity.to((targetEl as any).opacity ?? 1, { duration: 0 });
+				animated.borderRadius.to((targetEl as any).borderRadius ?? 0, { duration: 0 });
+				animated.blur.to(targetEl.blur ?? 0, { duration: 0 });
+				animated.brightness.to(targetEl.brightness ?? 100, { duration: 0 });
+				animated.contrast.to(targetEl.contrast ?? 100, { duration: 0 });
+				animated.saturate.to(targetEl.saturate ?? 100, { duration: 0 });
+				animated.grayscale.to(targetEl.grayscale ?? 0, { duration: 0 });
+				if (targetEl.type === 'text' && animated.fontSize) animated.fontSize.to((targetEl as TextElement).fontSize, { duration: 0 });
+				if (targetEl.type === 'shape') {
+					const s = targetEl as ShapeElement;
+					if (animated.fillColor) animated.fillColor.to(s.fillColor, { duration: 0 });
+					if (animated.strokeColor) animated.strokeColor.to(s.strokeColor, { duration: 0 });
+					if (animated.strokeWidth) animated.strokeWidth.to(s.strokeWidth, { duration: 0 });
+				}
+				if (animated.motionPathProgress) animated.motionPathProgress.to(0, { duration: 0 });
+			} else {
+				animated.opacity.to(0, { duration: 0 });
+			}
+		}
+
+		for (const elementId of allElementIds) {
+			const targetEl = getElementInSlide(firstSlide, elementId);
+			if (targetEl) elementContent.set(elementId, JSON.parse(JSON.stringify(targetEl)));
+		}
+
+		const newPreviousCodeContent = new Map<string, string>();
+		for (const element of firstSlide.canvas.elements) {
+			if (element.type === 'code') newPreviousCodeContent.set(element.id, (element as CodeElement).code);
+		}
+
+		for (const element of firstSlide.canvas.elements) {
+			if (element.type === 'code') {
+				const codeEl = element as CodeElement;
+				const key = `${codeEl.id}-${codeEl.code}-${codeEl.language}-${codeEl.showLineNumbers}`;
+				if (!codeHighlights.has(key)) {
+					const html = await highlightCode(codeEl.code, codeEl.language, codeEl.theme, { showLineNumbers: codeEl.showLineNumbers });
+					codeHighlights.set(key, html);
+				}
+			}
+		}
+		codeHighlights = new Map(codeHighlights);
+
+		codeMorphState = new Map();
+		previousCodeContent = newPreviousCodeContent;
+		shapeMorphStates = new Map();
+		elementContent = new Map(elementContent);
+		currentSlideIndex = 0;
+		isTransitioning = false;
+
+		for (const element of firstSlide.canvas.elements) {
+			if (element.type === 'text') {
+				const textEl = element as TextElement;
+				if (textEl.animation?.mode === 'typewriter') startTypewriterAnimation(element.id, textEl.content, textEl.animation.typewriterSpeed || 50);
+			}
+		}
+
+		animateMotionPaths(firstSlide);
+		onslidechange?.(0, slides.length);
+	}
+
 	// Animate to slide
 	async function animateToSlide(targetIndex: number) {
 		if (isTransitioning || targetIndex < 0 || targetIndex >= slides.length) return;
@@ -828,17 +908,34 @@
 		const slideDuration = durationOverride ?? currentSlide?.duration ?? 3000;
 		autoplayTimer = setTimeout(() => {
 			if (currentSlideIndex < slides.length - 1) animateToSlide(currentSlideIndex + 1);
-			else if (loop) animateToSlide(0);
+			else if (loop) {
+				const loopMode = project?.settings?.loopMode ?? 'reset';
+				if (loopMode === 'transition') animateToSlide(0);
+				else resetToFirstSlide();
+			}
 			else isAutoplay = false;
 		}, slideDuration);
 	}
 	$effect(() => { if (isAutoplay && !isTransitioning) scheduleNextSlide(); });
 	$effect(() => () => clearAutoplayTimer());
 
+	function handleNextSlide() {
+		if (currentSlideIndex < slides.length - 1) {
+			animateToSlide(currentSlideIndex + 1);
+		} else if (loop) {
+			const loopMode = project?.settings?.loopMode ?? 'reset';
+			if (loopMode === 'transition') {
+				animateToSlide(0);
+			} else {
+				resetToFirstSlide();
+			}
+		}
+	}
+
 	// Keyboard
 	function handleKeyDown(e: KeyboardEvent) {
 		if (!keyboard) return;
-		if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'Enter') { e.preventDefault(); animateToSlide(currentSlideIndex + 1); }
+		if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'Enter') { e.preventDefault(); handleNextSlide(); }
 		else if (e.key === 'ArrowLeft' || e.key === 'Backspace') { e.preventDefault(); animateToSlide(currentSlideIndex - 1); }
 		else if (e.key === 'Home') animateToSlide(0);
 		else if (e.key === 'End') animateToSlide(slides.length - 1);
@@ -884,7 +981,7 @@
 
 	// Public API (exposed via bind:this)
 	export async function goto(slideIndex: number) { await animateToSlide(slideIndex); }
-	export async function next() { await animateToSlide(currentSlideIndex + 1); }
+	export async function next() { handleNextSlide(); }
 	export async function prev() { await animateToSlide(currentSlideIndex - 1); }
 	export function play() { isAutoplay = true; }
 	export function pause() { isAutoplay = false; clearAutoplayTimer(); }
@@ -1227,7 +1324,7 @@
 			<button class="animot-arrow animot-arrow-left" onclick={() => animateToSlide(currentSlideIndex - 1)} disabled={currentSlideIndex === 0 || isTransitioning} aria-label="Previous slide">
 				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg>
 			</button>
-			<button class="animot-arrow animot-arrow-right" onclick={() => animateToSlide(currentSlideIndex + 1)} disabled={currentSlideIndex === slides.length - 1 || isTransitioning} aria-label="Next slide">
+			<button class="animot-arrow animot-arrow-right" onclick={() => handleNextSlide()} disabled={(!loop && currentSlideIndex === slides.length - 1) || isTransitioning} aria-label="Next slide">
 				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
 			</button>
 		{/if}
@@ -1238,7 +1335,7 @@
 					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
 				</button>
 				<span class="animot-slide-indicator">{currentSlideIndex + 1} / {slides.length}</span>
-				<button onclick={() => animateToSlide(currentSlideIndex + 1)} disabled={currentSlideIndex === slides.length - 1 || isTransitioning} aria-label="Next">
+				<button onclick={() => handleNextSlide()} disabled={(!loop && currentSlideIndex === slides.length - 1) || isTransitioning} aria-label="Next">
 					<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
 				</button>
 				<button onclick={() => { isAutoplay = !isAutoplay; if (!isAutoplay) clearAutoplayTimer(); }} class:active={isAutoplay} aria-label={isAutoplay ? 'Pause' : 'Play'}>