animot-presenter 0.2.7 → 0.2.9

package/dist/AnimotPresenter.svelte

@@ -100,10 +100,23 @@
 		for (const seg of segs) {
 			if (accum + seg.length >= targetLength || seg === segs[segs.length - 1]) {
 				const t = Math.max(0, Math.min(1, seg.length > 0 ? (targetLength - accum) / seg.length : 0));
+				let dx = cubicBezDeriv(seg.p0x, seg.p1x, seg.p2x, seg.p3x, t);
+				let dy = cubicBezDeriv(seg.p0y, seg.p1y, seg.p2y, seg.p3y, t);
+				// Degenerate tangent at endpoints (no Bezier handles) — sample nearby
+				if (Math.abs(dx) < 0.001 && Math.abs(dy) < 0.001) {
+					const epsilon = t < 0.5 ? 0.01 : -0.01;
+					dx = cubicBezDeriv(seg.p0x, seg.p1x, seg.p2x, seg.p3x, t + epsilon);
+					dy = cubicBezDeriv(seg.p0y, seg.p1y, seg.p2y, seg.p3y, t + epsilon);
+				}
+				// Still zero (fully degenerate segment) — use chord direction
+				if (Math.abs(dx) < 0.001 && Math.abs(dy) < 0.001) {
+					dx = seg.p3x - seg.p0x;
+					dy = seg.p3y - seg.p0y;
+				}
 				return {
 					x: cubicBez(seg.p0x, seg.p1x, seg.p2x, seg.p3x, t),
 					y: cubicBez(seg.p0y, seg.p1y, seg.p2y, seg.p3y, t),
-					angle: Math.atan2(cubicBezDeriv(seg.p0y, seg.p1y, seg.p2y, seg.p3y, t), cubicBezDeriv(seg.p0x, seg.p1x, seg.p2x, seg.p3x, t)) * (180 / Math.PI)
+					angle: Math.atan2(dy, dx) * (180 / Math.PI)
 				};
 			}
 			accum += seg.length;
@@ -114,8 +127,12 @@
 	function computeMotionPathPosition(
 		mpPoint: { x: number; y: number; angle: number },
 		startPoint: { x: number; y: number; angle: number },
-		animX: number, animY: number, animW: number, animH: number
+		animX: number, animY: number, animW: number, animH: number,
+		closed: boolean
 	): { x: number; y: number } {
+		if (!closed) {
+			return { x: mpPoint.x - animW / 2, y: mpPoint.y - animH / 2 };
+		}
 		const offsetX = (animX + animW / 2) - startPoint.x;
 		const offsetY = (animY + animH / 2) - startPoint.y;
 		const angleDelta = (mpPoint.angle - startPoint.angle) * Math.PI / 180;
@@ -416,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;
@@ -811,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);
@@ -867,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(); }
@@ -1017,10 +1131,11 @@
 					{@const mpProgress = animated?.motionPathProgress?.current ?? 0}
 					{@const mpPoint = mpElement && mpConfig ? getPresenterPointOnPath(mpElement.points, mpElement.closed, (mpConfig.startPercent + (mpConfig.endPercent - mpConfig.startPercent) * mpProgress) / 100) : null}
 					{@const mpStartPoint = mpElement && mpConfig ? getPresenterPointOnPath(mpElement.points, mpElement.closed, mpConfig.startPercent / 100) : null}
-					{@const mpPos = mpPoint && mpStartPoint && animated
+					{@const mpPos = mpPoint && mpStartPoint && animated && mpElement
 						? computeMotionPathPosition(mpPoint, mpStartPoint,
 							animated.x.current, animated.y.current,
-							animated.width.current, animated.height.current)
+							animated.width.current, animated.height.current,
+							mpElement.closed)
 						: null}
 					{@const elemX = mpPos ? mpPos.x : (animated?.x.current ?? 0)}
 					{@const elemY = mpPos ? mpPos.y : (animated?.y.current ?? 0)}
@@ -1209,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}
@@ -1220,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'}>