Fixed case 5 and other problematic zones

GraphiteEditor · Jan 12, 2025 · c576ab7 · c576ab7
1 parent d7744dc
commit c576ab7
Showing 1 changed file with 53 additions and 6 deletions.
diff --git a/frontend/src/components/views/Graph.svelte b/frontend/src/components/views/Graph.svelte
@@ -135,20 +135,21 @@
 	function buildWirePathLocations(outputBounds: DOMRect, inputBounds: DOMRect, verticalOut: boolean, verticalIn: boolean): { x: number; y: number }[] {
 		if (!nodesContainer) return [];
 
+		const scale = $nodeGraph.transform.scale; // Get the current scale
 		const lineWidth = 2;
 		const halfLineWidth = lineWidth / 2;
 		const VERTICAL_WIRE_OVERLAP_ON_SHAPED_CAP = 1;
 		const containerBounds = nodesContainer.getBoundingClientRect();
 
 		const outX = verticalOut ? outputBounds.x + outputBounds.width / 2 : outputBounds.x + outputBounds.width - 1;
 		const outY = verticalOut ? outputBounds.y + VERTICAL_WIRE_OVERLAP_ON_SHAPED_CAP : outputBounds.y + outputBounds.height / 2;
-		const outConnectorX = (outX - containerBounds.x) / $nodeGraph.transform.scale;
-		const outConnectorY = (outY - containerBounds.y) / $nodeGraph.transform.scale;
+		const outConnectorX = Math.round((outX - containerBounds.x) / scale); // Adjust for scale
+		const outConnectorY = Math.round((outY - containerBounds.y) / scale); // Adjust for scale
 
 		const inX = verticalIn ? inputBounds.x + inputBounds.width / 2 : inputBounds.x + 1;
 		const inY = verticalIn ? inputBounds.y + inputBounds.height - VERTICAL_WIRE_OVERLAP_ON_SHAPED_CAP : inputBounds.y + inputBounds.height / 2;
-		const inConnectorX = (inX - containerBounds.x) / $nodeGraph.transform.scale;
-		const inConnectorY = (inY - containerBounds.y) / $nodeGraph.transform.scale;
+		const inConnectorX = Math.round((inX - containerBounds.x) / scale); // Adjust for scale
+		const inConnectorY = Math.round((inY - containerBounds.y) / scale); // Adjust for scale
 
 		// Handle straight lines
 		if ((verticalOut && verticalIn && outConnectorX === inConnectorX) || (!verticalOut && !verticalIn && outConnectorY === inConnectorY)) {
@@ -167,14 +168,23 @@
 		}
 
 		// Handle standard right-angle paths
-		if (verticalOut) {
+		if (verticalOut && inConnectorX > outConnectorX) {
 			// Start vertical, then horizontal
 
 			return [
 				{ x: outConnectorX, y: outConnectorY },
 				{ x: outConnectorX, y: inConnectorY },
 				{ x: inConnectorX, y: inConnectorY },
 			];
+		} else if (verticalOut && inConnectorX <= outConnectorX) {
+			const midY = (inConnectorY + outConnectorY) / 2 + (((inConnectorY + outConnectorY) / 2) % gridSpacing);
+			return [
+				{ x: outConnectorX, y: outConnectorY },
+				{ x: outConnectorX, y: midY + 5.5 * lineWidth },
+				{ x: inConnectorX - gridSpacing + lineWidth, y: midY + 5.5 * lineWidth },
+				{ x: inConnectorX - gridSpacing + lineWidth, y: inConnectorY },
+				{ x: inConnectorX, y: inConnectorY },
+			];
 		} else if (verticalIn) {
 			// Start horizontal, then vertical
 
@@ -185,7 +195,35 @@
 			];
 		} else {
 			// Both horizontal - use horizontal middle point
-			if (outConnectorX > inConnectorX) {
+			// Whwn outConnector point is one of the two closest diagonally opposite points.
+			if (0 <= inConnectorX - outConnectorX && inConnectorX - outConnectorX <= gridSpacing && inConnectorY - outConnectorY >= -1 * gridSpacing && inConnectorY - outConnectorY <= gridSpacing) {
+				return [
+					{ x: outConnectorX - 2 * lineWidth, y: outConnectorY },
+					{ x: outConnectorX - 2 * lineWidth, y: inConnectorY },
+					{ x: inConnectorX, y: inConnectorY },
+				];
+			}
+
+			// When inConnector point lies on the horizontal line above and below the outConnector point.
+			else if (-1 * gridSpacing <= outConnectorY - inConnectorY && outConnectorY - inConnectorY <= gridSpacing && outConnectorX > inConnectorX) {
+				if (inConnectorY < outConnectorY) {
+					return [
+						{ x: outConnectorX, y: outConnectorY },
+						{ x: outConnectorX, y: inConnectorY - gridSpacing },
+						{ x: inConnectorX - gridSpacing, y: inConnectorY - gridSpacing },
+						{ x: inConnectorX - gridSpacing, y: inConnectorY },
+						{ x: inConnectorX, y: inConnectorY },
+					];
+				} else {
+					return [
+						{ x: outConnectorX, y: outConnectorY },
+						{ x: outConnectorX, y: inConnectorY + gridSpacing },
+						{ x: inConnectorX - gridSpacing, y: inConnectorY + gridSpacing },
+						{ x: inConnectorX - gridSpacing, y: inConnectorY },
+						{ x: inConnectorX, y: inConnectorY },
+					];
+				}
+			} else if (outConnectorX > inConnectorX - gridSpacing) {
 				const midY = (inConnectorY + outConnectorY) / 2 + (((inConnectorY + outConnectorY) / 2) % gridSpacing);
 				return [
 					{ x: outConnectorX, y: outConnectorY },
@@ -195,6 +233,15 @@
 					{ x: inConnectorX - gridSpacing + lineWidth, y: inConnectorY },
 					{ x: inConnectorX, y: inConnectorY },
 				];
+			}
+			// when inConnector point lies on the vertical grid line two units to the right of outConnector point.
+			else if (gridSpacing <= inConnectorX - outConnectorX && inConnectorX - outConnectorX <= 2 * gridSpacing) {
+				return [
+					{ x: outConnectorX, y: outConnectorY },
+					{ x: outConnectorX + gridSpacing - 2 * lineWidth, y: outConnectorY },
+					{ x: outConnectorX + gridSpacing - 2 * lineWidth, y: inConnectorY },
+					{ x: inConnectorX, y: inConnectorY },
+				];
 			} else {
 				const midX = (outConnectorX + inConnectorX) / 2 + (((outConnectorX + inConnectorX) / 2) % gridSpacing);
 				return [