animot-presenter 0.5.23 → 0.5.24

package/dist/AnimotPresenter.svelte

@@ -29,6 +29,42 @@
 
 	type TweenValue = ReturnType<typeof tween<number>>;
 
+	// Svelte's underlying Tween.set() leaks: when retargeted before completion,
+	// the previous rAF task is aborted but its promise is NEVER fulfilled
+	// (see svelte/src/internal/client/loop.js — abort() only deletes the task,
+	// doesn't call fulfill). The presenter calls .to() on 15+ tween properties
+	// per element per slide transition, so a deck running in a loop accumulates
+	// hundreds of thousands of orphaned promises plus the async-function
+	// Contexts of any awaiter that's stuck on them. wrapTween() patches each
+	// tween instance so:
+	//   1) .to() on a value the tween is already at is a no-op (Promise.resolve)
+	//   2) Each .to() resolves the previous wrapper promise immediately on
+	//      retarget, so any await chain unwinds and releases its Context even
+	//      if the underlying Svelte promise is left dangling.
+	function wrapTween<TV extends { current: unknown; to: (v: never, o?: unknown) => Promise<void> }>(tv: TV): TV {
+		const origTo = tv.to.bind(tv);
+		let prevResolve: (() => void) | null = null;
+		(tv as unknown as { to: (v: unknown, o?: unknown) => Promise<void> }).to = (value, options) => {
+			if (tv.current === value) {
+				if (prevResolve) { const r = prevResolve; prevResolve = null; r(); }
+				return Promise.resolve();
+			}
+			if (prevResolve) { const r = prevResolve; prevResolve = null; r(); }
+			const inner = origTo(value as never, options);
+			return new Promise<void>((resolve) => {
+				prevResolve = resolve;
+				const done = () => {
+					if (prevResolve === resolve) { prevResolve = null; resolve(); }
+				};
+				inner.then(done, done);
+			});
+		};
+		return tv;
+	}
+	function mkTween<T>(value: T, options?: Parameters<typeof tween<T>>[1]): ReturnType<typeof tween<T>> {
+		return wrapTween(tween(value, options)) as ReturnType<typeof tween<T>>;
+	}
+
 	interface AnimatedElement {
 		x: TweenValue; y: TweenValue; width: TweenValue; height: TweenValue;
 		rotation: TweenValue; skewX: TweenValue; skewY: TweenValue;
@@ -49,6 +85,33 @@
 
 	interface ShapeMorphState { fromType: string; toType: string; }
 
+	// Race a promise against an AbortSignal so awaits unwind the instant a
+	// loop is cancelled — otherwise tween.to() / setTimeout promises keep
+	// pending and pin their async-function Context to the heap. Long-running
+	// loops without this leak millions of closure contexts (see commit notes).
+	function abortable<T>(p: Promise<T>, signal: AbortSignal): Promise<T> {
+		if (signal.aborted) return Promise.reject(new DOMException('aborted', 'AbortError'));
+		return new Promise<T>((resolve, reject) => {
+			const onAbort = () => reject(new DOMException('aborted', 'AbortError'));
+			signal.addEventListener('abort', onAbort, { once: true });
+			p.then(
+				(v) => { signal.removeEventListener('abort', onAbort); resolve(v); },
+				(e) => { signal.removeEventListener('abort', onAbort); reject(e); }
+			);
+		});
+	}
+	function abortableSleep(ms: number, signal: AbortSignal): Promise<void> {
+		if (signal.aborted) return Promise.reject(new DOMException('aborted', 'AbortError'));
+		return new Promise<void>((resolve, reject) => {
+			const id = setTimeout(() => { signal.removeEventListener('abort', onAbort); resolve(); }, ms);
+			const onAbort = () => { clearTimeout(id); reject(new DOMException('aborted', 'AbortError')); };
+			signal.addEventListener('abort', onAbort, { once: true });
+		});
+	}
+	function isAbortError(e: unknown): boolean {
+		return !!(e && typeof e === 'object' && (e as { name?: string }).name === 'AbortError');
+	}
+
 	// Active motion path loop cancellation tokens
 	let motionPathLoopAbort: AbortController | null = null;
 	function cancelMotionPathLoops() {
@@ -60,12 +123,20 @@
 	// 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;
+	// Scheduled-but-not-yet-fired keyframe timeouts. We track these so cancel
+	// also clears them — otherwise their closures (which capture `signal`,
+	// `animated`, etc.) survive until natural firing time and pin a Context.
+	let keyframeTimeouts: ReturnType<typeof setTimeout>[] = [];
 	// 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; }
+		if (keyframeTimeouts.length) {
+			for (const id of keyframeTimeouts) clearTimeout(id);
+			keyframeTimeouts = [];
+		}
 	}
 	function setKeyframeOverride(elementId: string, prop: string, value: any) {
 		const cur = keyframeOverrides.get(elementId) ?? {};
@@ -115,7 +186,7 @@
 			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(() => {
+				const tid = setTimeout(() => {
 					if (signal.aborted) return;
 					const easing = easingForTween(kf.easing);
 					const idx = sorted.indexOf(kf);
@@ -142,6 +213,7 @@
 					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));
+				keyframeTimeouts.push(tid);
 			}
 		}
 	}
@@ -570,29 +642,29 @@
 					const seedGray = k0?.grayscale !== undefined ? k0.grayscale : (element.grayscale ?? 0);
 
 					animatedElements.set(element.id, {
-						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(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(seedBlur, { duration: 500 }),
-						brightness: tween(seedBright, { duration: 500 }),
-						contrast: tween(seedContrast, { duration: 500 }),
-						saturate: tween(seedSat, { duration: 500 }),
-						grayscale: tween(seedGray, { duration: 500 })
+						x: mkTween(seedX, { duration: 500 }),
+						y: mkTween(seedY, { duration: 500 }),
+						width: mkTween(seedW, { duration: 500 }),
+						height: mkTween(seedH, { duration: 500 }),
+						rotation: mkTween(seedRot, { duration: 500 }),
+						skewX: mkTween(seedSkewX, { duration: 500 }),
+						skewY: mkTween(seedSkewY, { duration: 500 }),
+						tiltX: mkTween(seedTiltX, { duration: 500 }),
+						tiltY: mkTween(seedTiltY, { duration: 500 }),
+						perspective: mkTween(element.perspective ?? 1000, { duration: 500 }),
+						opacity: mkTween(startOpacity, { duration: 300 }),
+						borderRadius: mkTween(seedBR, { duration: 500 }),
+						fontSize: textEl ? mkTween(seedFontSize, { duration: 500 }) : null,
+						fillColor: shapeEl ? mkTween(seedFill, { duration: 500 }) : null,
+						strokeColor: shapeEl ? mkTween(seedStroke, { duration: 500 }) : null,
+						strokeWidth: shapeEl ? mkTween(seedStrokeW, { duration: 500 }) : null,
+						shapeMorph: shapeEl ? mkTween(1, { duration: 500 }) : null,
+						motionPathProgress: element.motionPathConfig ? mkTween(0, { duration: 500 }) : null,
+						blur: mkTween(seedBlur, { duration: 500 }),
+						brightness: mkTween(seedBright, { duration: 500 }),
+						contrast: mkTween(seedContrast, { duration: 500 }),
+						saturate: mkTween(seedSat, { duration: 500 }),
+						grayscale: mkTween(seedGray, { duration: 500 })
 					});
 					const currentSlideEl = getElementInSlide(currentSlide, element.id);
 					elementContent.set(element.id, JSON.parse(JSON.stringify(currentSlideEl || element)));
@@ -631,16 +703,20 @@
 					if (shouldLoop) {
 						const laps = element.motionPathConfig.laps ?? 0;
 						(async () => {
-							let lap = 0;
-							while (!signal.aborted && (laps === 0 || lap < laps)) {
-								await animated.motionPathProgress!.to(0, { duration: 0 });
-								await animated.motionPathProgress!.to(1, { duration, easing });
-								lap++;
-								if (!signal.aborted && (laps === 0 || lap < laps)) await new Promise(r => setTimeout(r, 50));
+							try {
+								let lap = 0;
+								while (!signal.aborted && (laps === 0 || lap < laps)) {
+									await abortable(animated.motionPathProgress!.to(0, { duration: 0 }), signal);
+									await abortable(animated.motionPathProgress!.to(1, { duration, easing }), signal);
+									lap++;
+									if (!signal.aborted && (laps === 0 || lap < laps)) await abortableSleep(50, signal);
+								}
+							} catch (e) {
+								if (!isAbortError(e)) throw e;
 							}
 						})();
 					} else {
-						animated.motionPathProgress.to(1, { duration, easing });
+						animated.motionPathProgress.to(1, { duration, easing }).catch(() => {});
 					}
 				}
 			}
@@ -1593,15 +1669,15 @@
 								{@const morphProgress = animated.shapeMorph?.current ?? 1}
 								{@const effectiveShapeType = mState ? (morphProgress >= 1 ? mState.toType : (morphProgress <= 0 ? mState.fromType : null)) : shapeEl.shapeType}
 								{@const isMorphing = mState && morphProgress > 0 && morphProgress < 1}
-								<svg class="animot-shape-element" viewBox="0 0 {animated.width.current} {animated.height.current}" fill-opacity={shapeEl.fillOpacity ?? 1} stroke-opacity={shapeEl.strokeOpacity ?? 1} style:filter={shapeEl.boxShadow?.enabled ? `drop-shadow(${shapeEl.boxShadow.offsetX}px ${shapeEl.boxShadow.offsetY}px ${shapeEl.boxShadow.blur}px ${shapeEl.boxShadow.color})` : 'none'}>
+								<svg class="animot-shape-element" viewBox="0 0 {Math.max(0, animated.width.current)} {Math.max(0, animated.height.current)}" fill-opacity={shapeEl.fillOpacity ?? 1} stroke-opacity={shapeEl.strokeOpacity ?? 1} style:filter={shapeEl.boxShadow?.enabled ? `drop-shadow(${shapeEl.boxShadow.offsetX}px ${shapeEl.boxShadow.offsetY}px ${shapeEl.boxShadow.blur}px ${shapeEl.boxShadow.color})` : 'none'}>
 									{#if isMorphing}
-										{@const w = animated.width.current}
-										{@const h = animated.height.current}
+										{@const w = Math.max(0, animated.width.current)}
+										{@const h = Math.max(0, animated.height.current)}
 										{@const sw = animStrokeWidth}
 										<g style:opacity={1 - morphProgress}>{@html renderShape(mState!.fromType, w, h, animated.borderRadius.current, animFill, animStroke, sw, shapeEl.strokeStyle, shapeEl.strokeDashGap)}</g>
 										<g style:opacity={morphProgress}>{@html renderShape(mState!.toType, w, h, animated.borderRadius.current, animFill, animStroke, sw, shapeEl.strokeStyle, shapeEl.strokeDashGap)}</g>
 									{:else}
-										{@html renderShape(effectiveShapeType ?? shapeEl.shapeType, animated.width.current, animated.height.current, animated.borderRadius.current, animFill, animStroke, animStrokeWidth, shapeEl.strokeStyle, shapeEl.strokeDashGap)}
+										{@html renderShape(effectiveShapeType ?? shapeEl.shapeType, Math.max(0, animated.width.current), Math.max(0, animated.height.current), animated.borderRadius.current, animFill, animStroke, animStrokeWidth, shapeEl.strokeStyle, shapeEl.strokeDashGap)}
 									{/if}
 								</svg>
 							{:else if element.type === 'counter'}
@@ -1650,7 +1726,7 @@
 							{:else if element.type === 'motionPath'}
 								{@const mpEl = element as MotionPathElement}
 								{#if mpEl.showInPresentation}
-									<svg width="100%" height="100%" viewBox="0 0 {animated.width.current} {animated.height.current}" style="position:absolute;top:0;left:0;pointer-events:none;overflow:visible;">
+									<svg width="100%" height="100%" viewBox="0 0 {Math.max(0, animated.width.current)} {Math.max(0, animated.height.current)}" style="position:absolute;top:0;left:0;pointer-events:none;overflow:visible;">
 										<path d={buildPresenterPathD(mpEl.points, mpEl.closed)} stroke={mpEl.pathColor} stroke-width={mpEl.pathWidth} fill="none" stroke-dasharray="8 4" />
 									</svg>
 								{/if}
@@ -1719,6 +1795,8 @@
 	}
 
 	function renderShape(type: string, w: number, h: number, br: number, fill: string, stroke: string, sw: number, strokeStyle?: string, strokeDashGap?: number): string {
+		const nn = (v: number) => (v > 0 ? v : 0);
+		w = nn(w); h = nn(h); br = nn(br); sw = nn(sw);
 		let dashAttr = '';
 		if (strokeStyle && strokeStyle !== 'solid') {
 			const s = sw || 1;
@@ -1732,17 +1810,17 @@
 			return `<polygon points="${pts}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}"${dashAttr} stroke-linejoin="round"/>`;
 		};
 		switch (type) {
-			case 'rectangle': return `<rect x="${sw/2}" y="${sw/2}" width="${w-sw}" height="${h-sw}" rx="${br}" ry="${br}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}"${dashAttr}/>`;
-			case 'circle': return `<circle cx="${w/2}" cy="${h/2}" r="${Math.min(w,h)/2-sw/2}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}"${dashAttr}/>`;
-			case 'ellipse': return `<ellipse cx="${w/2}" cy="${h/2}" rx="${w/2-sw/2}" ry="${h/2-sw/2}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}"${dashAttr}/>`;
+			case 'rectangle': return `<rect x="${sw/2}" y="${sw/2}" width="${nn(w-sw)}" height="${nn(h-sw)}" rx="${nn(Math.min(br, (w-sw)/2, (h-sw)/2))}" ry="${nn(Math.min(br, (w-sw)/2, (h-sw)/2))}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}"${dashAttr}/>`;
+			case 'circle': return `<circle cx="${w/2}" cy="${h/2}" r="${nn(Math.min(w,h)/2-sw/2)}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}"${dashAttr}/>`;
+			case 'ellipse': return `<ellipse cx="${w/2}" cy="${h/2}" rx="${nn(w/2-sw/2)}" ry="${nn(h/2-sw/2)}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}"${dashAttr}/>`;
 			case 'triangle': return polyOrPath(`${w/2},${sw/2} ${sw/2},${h-sw/2} ${w-sw/2},${h-sw/2}`);
 			case 'star': {
-				const cx = w/2, cy = h/2, outerR = Math.min(w,h)/2-sw/2, innerR = outerR*0.4;
+				const cx = w/2, cy = h/2, outerR = nn(Math.min(w,h)/2-sw/2), innerR = outerR*0.4;
 				const pts = Array.from({length:10},(_,i)=>{const a=(i*Math.PI/5)-Math.PI/2;const r=i%2===0?outerR:innerR;return`${cx+r*Math.cos(a)},${cy+r*Math.sin(a)}`;}).join(' ');
 				return polyOrPath(pts);
 			}
 			case 'hexagon': {
-				const cx = w/2, cy = h/2, r = Math.min(w,h)/2-sw/2;
+				const cx = w/2, cy = h/2, r = nn(Math.min(w,h)/2-sw/2);
 				const pts = Array.from({length:6},(_,i)=>{const a=(i*Math.PI/3)-Math.PI/2;return`${cx+r*Math.cos(a)},${cy+r*Math.sin(a)}`;}).join(' ');
 				return polyOrPath(pts);
 			}