animot-presenter 0.2.6 → 0.2.8

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;
@@ -1017,10 +1034,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)}
@@ -1240,6 +1258,27 @@
 </div>
 
 <script module lang="ts">
+	function roundedPolygonPath(pointsStr: string, radius: number): string {
+		const pts = pointsStr.split(/\s+/).map(p => { const [x, y] = p.split(',').map(Number); return { x, y }; });
+		if (pts.length < 3 || radius <= 0) return 'M' + pts.map(p => `${p.x},${p.y}`).join('L') + 'Z';
+		const n = pts.length;
+		const parts: string[] = [];
+		for (let i = 0; i < n; i++) {
+			const prev = pts[(i - 1 + n) % n], curr = pts[i], next = pts[(i + 1) % n];
+			const dx1 = prev.x - curr.x, dy1 = prev.y - curr.y;
+			const dx2 = next.x - curr.x, dy2 = next.y - curr.y;
+			const len1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
+			const len2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
+			const r = Math.min(radius, len1 / 2, len2 / 2);
+			const sx = curr.x + (dx1 / len1) * r, sy = curr.y + (dy1 / len1) * r;
+			const ex = curr.x + (dx2 / len2) * r, ey = curr.y + (dy2 / len2) * r;
+			parts.push(i === 0 ? `M${sx},${sy}` : `L${sx},${sy}`);
+			parts.push(`Q${curr.x},${curr.y} ${ex},${ey}`);
+		}
+		parts.push('Z');
+		return parts.join(' ');
+	}
+
 	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') {
@@ -1249,20 +1288,24 @@
 			const lc = strokeStyle === 'dotted' ? 'round' : 'butt';
 			dashAttr = ` stroke-dasharray="${da}" stroke-linecap="${lc}"`;
 		}
+		const polyOrPath = (pts: string) => {
+			if (br > 0) return `<path d="${roundedPolygonPath(pts, br)}" fill="${fill}" stroke="${stroke}" stroke-width="${sw}"${dashAttr}/>`;
+			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 '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 '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 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}"${dashAttr} stroke-linejoin="round"/>`;
+				return polyOrPath(pts);
 			}
 			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}"${dashAttr} stroke-linejoin="round"/>`;
+				return polyOrPath(pts);
 			}
 			default: return '';
 		}