feat: Implement interactive wire rendering with segment-based dragging and snapping capabilities.

pull/10/head
David Montero Crespo 2026-03-07 13:34:25 -03:00
parent 13d87a6961
commit 2277389ea5
1 changed files with 3 additions and 24 deletions

View File

@ -66,35 +66,14 @@ function generateMultiSegmentPath(
): string {
let path = `M ${start.x} ${start.y}`;
// Add control points with orthogonal constraint
// Control points already represent exact corners, so connect them sequentially
for (let i = 0; i < controlPoints.length; i++) {
const cp = controlPoints[i];
const prev = i === 0 ? start : controlPoints[i - 1];
// Determine if we should go horizontal-first or vertical-first
// Based on which axis has more distance to cover
const dx = Math.abs(cp.x - prev.x);
const dy = Math.abs(cp.y - prev.y);
if (dx > dy) {
// More horizontal movement - go horizontal first, then vertical
path += ` L ${cp.x} ${prev.y} L ${cp.x} ${cp.y}`;
} else {
// More vertical movement - go vertical first, then horizontal
path += ` L ${prev.x} ${cp.y} L ${cp.x} ${cp.y}`;
}
path += ` L ${cp.x} ${cp.y}`;
}
// Connect last control point to end
const lastPoint = controlPoints.length > 0 ? controlPoints[controlPoints.length - 1] : start;
const dx = Math.abs(end.x - lastPoint.x);
const dy = Math.abs(end.y - lastPoint.y);
if (dx > dy) {
path += ` L ${end.x} ${lastPoint.y} L ${end.x} ${end.y}`;
} else {
path += ` L ${lastPoint.x} ${end.y} L ${end.x} ${end.y}`;
}
path += ` L ${end.x} ${end.y}`;
return path;
}