Stabilize EPC waypoint dragging: constrain endpoints to slide along segment

- First/last waypoints now only extend/shorten along their segment direction,
  preventing unwanted rotation of the end boxes
- Middle waypoints remain freely draggable for direction changes
- Add default middle waypoint so new EPCs have 3 control points

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

svelte-app/src/lib/canvas/interactions.ts

@@ -469,6 +469,26 @@ function onMousemove(e: MouseEvent) {
       localY = worldSnappedY - sym.y;
     }
 
+    // Constrain first/last waypoint to slide along their segment direction only
+    // (extend/shorten without rotating the end boxes)
+    if (wpIdx === 0 && wps.length >= 2) {
+      const next = wps[1];
+      const dx = wps[0].x - next.x, dy = wps[0].y - next.y;
+      const len = Math.sqrt(dx * dx + dy * dy) || 1;
+      const ux = dx / len, uy = dy / len;
+      const dot = (localX - next.x) * ux + (localY - next.y) * uy;
+      localX = next.x + ux * dot;
+      localY = next.y + uy * dot;
+    } else if (wpIdx === wps.length - 1 && wps.length >= 2) {
+      const prev = wps[wps.length - 2];
+      const dx = wps[wpIdx].x - prev.x, dy = wps[wpIdx].y - prev.y;
+      const len = Math.sqrt(dx * dx + dy * dy) || 1;
+      const ux = dx / len, uy = dy / len;
+      const dot = (localX - prev.x) * ux + (localY - prev.y) * uy;
+      localX = prev.x + ux * dot;
+      localY = prev.y + uy * dot;
+    }
+
     wps[wpIdx] = { x: localX, y: localY };
     // Recalculate bounding box
     recalcEpcBounds(sym);

svelte-app/src/lib/symbol-config.ts

@@ -7,6 +7,7 @@ export const EPC_CONFIG = {
   lineWidth: 1.5,
   defaultWaypoints: [
     { x: 26, y: 10 },   // exit from left box center-right
+    { x: 41.5, y: 10 }, // middle control point
     { x: 57, y: 10 },   // entry to right box center-left
   ],
 } as const;