animot-presenter 0.2.5 → 0.2.6

package/dist/AnimotPresenter.svelte

@@ -111,6 +111,22 @@
 		return { x: points[0].x, y: points[0].y, angle: 0 };
 	}
 
+	function computeMotionPathPosition(
+		mpPoint: { x: number; y: number; angle: number },
+		startPoint: { x: number; y: number; angle: number },
+		animX: number, animY: number, animW: number, animH: number
+	): { x: number; y: number } {
+		const offsetX = (animX + animW / 2) - startPoint.x;
+		const offsetY = (animY + animH / 2) - startPoint.y;
+		const angleDelta = (mpPoint.angle - startPoint.angle) * Math.PI / 180;
+		const cos = Math.cos(angleDelta);
+		const sin = Math.sin(angleDelta);
+		return {
+			x: mpPoint.x + offsetX * cos - offsetY * sin - animW / 2,
+			y: mpPoint.y + offsetX * sin + offsetY * cos - animH / 2
+		};
+	}
+
 	let {
 		src, data, autoplay = false, loop = false, controls = true, arrows = false,
 		progress: showProgress = true, keyboard = true, duration: durationOverride,
@@ -316,7 +332,7 @@
 			for (const element of slide.canvas.elements) {
 				if (!animatedElements.has(element.id)) {
 					const inCurrent = getElementInSlide(currentSlide, element.id);
-					const startOpacity = inCurrent ? 1 : 0;
+					const startOpacity = inCurrent ? ((inCurrent as any).opacity ?? 1) : 0;
 					const br = (element as any).borderRadius ?? 0;
 					const isShape = element.type === 'shape';
 					const shapeEl = isShape ? element as ShapeElement : null;
@@ -382,11 +398,14 @@
 					const shouldLoop = element.motionPathConfig.loop;
 
 					if (shouldLoop) {
+						const laps = element.motionPathConfig.laps ?? 0;
 						(async () => {
-							while (!signal.aborted) {
+							let lap = 0;
+							while (!signal.aborted && (laps === 0 || lap < laps)) {
 								await animated.motionPathProgress!.to(0, { duration: 0 });
 								await animated.motionPathProgress!.to(1, { duration, easing });
-								if (!signal.aborted) await new Promise(r => setTimeout(r, 50));
+								lap++;
+								if (!signal.aborted && (laps === 0 || lap < laps)) await new Promise(r => setTimeout(r, 50));
 							}
 						})();
 					} else {
@@ -435,7 +454,7 @@
 						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(1, { 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 });
@@ -510,7 +529,7 @@
 				await animated.contrast.to(currentEl.contrast ?? 100, { duration: 0 });
 				await animated.saturate.to(currentEl.saturate ?? 100, { duration: 0 });
 				await animated.grayscale.to(currentEl.grayscale ?? 0, { duration: 0 });
-				await animated.opacity.to(1, { duration: 0 });
+				await animated.opacity.to((currentEl as any).opacity ?? 1, { duration: 0 });
 				if (currentEl.type === 'text' && animated.fontSize) await animated.fontSize.to((currentEl as TextElement).fontSize, { duration: 0 });
 				if (currentEl.type === 'shape') {
 					const s = currentEl as ShapeElement;
@@ -578,6 +597,10 @@
 								animated.grayscale.to(targetEl.grayscale ?? 0, { duration: elementDuration, easing });
 							}
 							if (!sequencedProps.has('perspective')) anims.push(animated.perspective.to(targetEl.perspective ?? 1000, { duration: elementDuration, easing }));
+							if (!sequencedProps.has('opacity')) {
+								const targetOpacity = (targetEl as any).opacity ?? 1;
+								if (animated.opacity.current !== targetOpacity) anims.push(animated.opacity.to(targetOpacity, { duration: elementDuration, easing }));
+							}
 							const sortedSeqs = [...propertySequences].sort((a, b) => a.order - b.order);
 							let cumulativeDelay = 0;
 							for (const seq of sortedSeqs) {
@@ -604,6 +627,7 @@
 										animated.strokeWidth?.to(s.strokeWidth, { duration: seqDuration, easing });
 									}
 									else if (seq.property === 'perspective') animated.perspective.to(targetEl.perspective ?? 1000, { duration: seqDuration, easing });
+									else if (seq.property === 'opacity') animated.opacity.to((targetEl as any).opacity ?? 1, { duration: seqDuration, easing });
 								}, seqDelay);
 								cumulativeDelay = seqDelay + seqDuration;
 							}
@@ -625,6 +649,12 @@
 							anims.push(animated.contrast.to(targetEl.contrast ?? 100, { duration: elementDuration, easing }));
 							anims.push(animated.saturate.to(targetEl.saturate ?? 100, { duration: elementDuration, easing }));
 							anims.push(animated.grayscale.to(targetEl.grayscale ?? 0, { duration: elementDuration, easing }));
+							// Opacity interpolation for morphing elements
+							const currOpacity = animated.opacity.current;
+							const targetOpacity = (targetEl as any).opacity ?? 1;
+							if (currOpacity !== targetOpacity) {
+								anims.push(animated.opacity.to(targetOpacity, { duration: elementDuration, easing }));
+							}
 						}
 						// Motion path progress — await reset, then animate forward
 						if (animated.motionPathProgress && targetEl.motionPathConfig) {
@@ -686,10 +716,11 @@
 								if (animated.strokeWidth) anims.push(animated.strokeWidth.to(s.strokeWidth, { duration: 0 }));
 							}
 							const entrance = targetEl.animationConfig?.entrance ?? 'fade';
+							const targetOpacity = (targetEl as any).opacity ?? 1;
 							if (entrance === 'fade') {
-								anims.push(animated.opacity.to(1, { duration: elementDuration / 2, easing }));
+								anims.push(animated.opacity.to(targetOpacity, { duration: elementDuration / 2, easing }));
 							} else {
-								anims.push(animated.opacity.to(1, { duration: 0 }));
+								anims.push(animated.opacity.to(targetOpacity, { duration: 0 }));
 							}
 						}
 						return anims;
@@ -985,8 +1016,14 @@
 					{@const mpElement = mpConfig ? currentSlide?.canvas.elements.find(el => el.id === mpConfig.motionPathId) as MotionPathElement | undefined : undefined}
 					{@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 elemX = mpPoint ? mpPoint.x - (animated?.width.current ?? 0) / 2 : animated?.x.current ?? 0}
-					{@const elemY = mpPoint ? mpPoint.y - (animated?.height.current ?? 0) / 2 : animated?.y.current ?? 0}
+					{@const mpStartPoint = mpElement && mpConfig ? getPresenterPointOnPath(mpElement.points, mpElement.closed, mpConfig.startPercent / 100) : null}
+					{@const mpPos = mpPoint && mpStartPoint && animated
+						? computeMotionPathPosition(mpPoint, mpStartPoint,
+							animated.x.current, animated.y.current,
+							animated.width.current, animated.height.current)
+						: null}
+					{@const elemX = mpPos ? mpPos.x : (animated?.x.current ?? 0)}
+					{@const elemY = mpPos ? mpPos.y : (animated?.y.current ?? 0)}
 					{@const mpRotation = mpPoint && mpConfig?.autoRotate
 						? mpPoint.angle + (mpConfig.orientationOffset ?? 0)
 						: null}
@@ -1089,7 +1126,6 @@
 									style:border-radius="{textEl.borderRadius}px"
 									style:text-align={textEl.textAlign}
 									style:justify-content={textEl.textAlign === 'center' ? 'center' : textEl.textAlign === 'right' ? 'flex-end' : 'flex-start'}
-									style:opacity={textEl.opacity ?? 1}
 									style:-webkit-text-stroke={textEl.textStroke?.enabled ? `${textEl.textStroke.width}px ${textEl.textStroke.color}` : '0'}
 									style:text-shadow={textEl.textShadow?.enabled ? `${textEl.textShadow.offsetX}px ${textEl.textShadow.offsetY}px ${textEl.textShadow.blur}px ${textEl.textShadow.color}` : 'none'}
 								>
@@ -1118,7 +1154,7 @@
 							{:else if element.type === 'image'}
 								{@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:opacity={imgEl.opacity} style:clip-path={clipPath} style:background-color={imgEl.backgroundColor ?? 'transparent'} />
+								<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 === 'shape'}
 								{@const shapeEl = element as ShapeElement}
 								{@const animFill = animated.fillColor?.current ?? shapeEl.fillColor}
@@ -1128,15 +1164,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}" style:opacity={shapeEl.opacity} 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 {animated.width.current} {animated.height.current}" 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 sw = animStrokeWidth}
-										<g style:opacity={1 - morphProgress}>{@html renderShape(mState!.fromType, w, h, animated.borderRadius.current, animFill, animStroke, sw)}</g>
-										<g style:opacity={morphProgress}>{@html renderShape(mState!.toType, w, h, animated.borderRadius.current, animFill, animStroke, sw)}</g>
+										<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)}
+										{@html renderShape(effectiveShapeType ?? shapeEl.shapeType, animated.width.current, animated.height.current, animated.borderRadius.current, animFill, animStroke, animStrokeWidth, shapeEl.strokeStyle, shapeEl.strokeDashGap)}
 									{/if}
 								</svg>
 							{:else if element.type === 'counter'}
@@ -1148,7 +1184,7 @@
 							{:else if element.type === 'svg'}
 								{@const svgEl = element as SvgElement}
 								{@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}>
+								<div class="animot-svg-element">
 									<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 svgParsed.inner}
@@ -1158,7 +1194,7 @@
 							{:else if element.type === 'motionPath'}
 								{@const mpEl = element as MotionPathElement}
 								{#if mpEl.showInPresentation}
-									<svg width="100%" height="100%" style="position:absolute;top:0;left:0;pointer-events:none;overflow:visible;">
+									<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;">
 										<path d={buildPresenterPathD(mpEl.points, mpEl.closed)} stroke={mpEl.pathColor} stroke-width={mpEl.pathWidth} fill="none" stroke-dasharray="8 4" />
 									</svg>
 								{/if}
@@ -1204,21 +1240,29 @@
 </div>
 
 <script module lang="ts">
-	function renderShape(type: string, w: number, h: number, br: number, fill: string, stroke: string, sw: number): string {
+	function renderShape(type: string, w: number, h: number, br: number, fill: string, stroke: string, sw: number, strokeStyle?: string, strokeDashGap?: number): string {
+		let dashAttr = '';
+		if (strokeStyle && strokeStyle !== 'solid') {
+			const s = sw || 1;
+			const gap = strokeDashGap ?? (strokeStyle === 'dashed' ? s * 3 : s * 2);
+			const da = strokeStyle === 'dashed' ? `${s * 3},${gap}` : `${s * 0.1},${gap}`;
+			const lc = strokeStyle === 'dotted' ? 'round' : 'butt';
+			dashAttr = ` stroke-dasharray="${da}" stroke-linecap="${lc}"`;
+		}
 		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}"/>`;
-			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}"/>`;
-			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}"/>`;
-			case 'triangle': return `<polygon points="${w/2},${sw/2} ${sw/2},${h-sw/2} ${w-sw/2},${h-sw/2}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}" stroke-linejoin="round"/>`;
+			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 'triangle': return `<polygon points="${w/2},${sw/2} ${sw/2},${h-sw/2} ${w-sw/2},${h-sw/2}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}"${dashAttr} stroke-linejoin="round"/>`;
 			case 'star': {
 				const cx = w/2, cy = h/2, outerR = 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 `<polygon points="${pts}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}" stroke-linejoin="round"/>`;
+				return `<polygon points="${pts}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}"${dashAttr} stroke-linejoin="round"/>`;
 			}
 			case 'hexagon': {
 				const cx = w/2, cy = h/2, r = 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 `<polygon points="${pts}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}" stroke-linejoin="round"/>`;
+				return `<polygon points="${pts}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}"${dashAttr} stroke-linejoin="round"/>`;
 			}
 			default: return '';
 		}