animot-presenter 0.2.6 → 0.2.7

package/dist/AnimotPresenter.svelte

@@ -1240,6 +1240,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 +1270,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 '';
 		}