From 5cfbbd3dee30d2119a654f9ee63d2888cb397489 Mon Sep 17 00:00:00 2001 From: Stargazer1010 Date: Wed, 8 Jan 2025 18:43:45 +0530 Subject: [PATCH 1/9] Verticle and horizontal lines achieved(#2170) --- frontend/src/components/views/Graph.svelte | 125 +++++++++++++-------- 1 file changed, 79 insertions(+), 46 deletions(-) diff --git a/frontend/src/components/views/Graph.svelte b/frontend/src/components/views/Graph.svelte index bfa6592113..6604175e9f 100644 --- a/frontend/src/components/views/Graph.svelte +++ b/frontend/src/components/views/Graph.svelte @@ -100,7 +100,7 @@ const pathString = buildWirePathString(outputPortRect, inputPortRect, verticalOut, verticalIn); const dataType = (outputPort.getAttribute("data-datatype") as FrontendGraphDataType) || "General"; - const thick = verticalIn && verticalOut; + const thick = (verticalIn && verticalOut) || (verticalOut && !verticalIn); return { pathString, dataType, thick, dashed }; } @@ -137,7 +137,6 @@ if (!nodesContainer) return []; 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; @@ -149,55 +148,89 @@ 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 horizontalGap = Math.abs(outConnectorX - inConnectorX); - const verticalGap = Math.abs(outConnectorY - inConnectorY); - - // TODO: Finish this commented out code replacement for the code below it based on this diagram: - // // Straight: stacking lines which are always straight, or a straight horizontal wire between two aligned nodes - // if ((verticalOut && verticalIn) || (!verticalOut && !verticalIn && verticalGap === 0)) { - // return [ - // { x: outConnectorX, y: outConnectorY }, - // { x: inConnectorX, y: inConnectorY }, - // ]; - // } - - // // L-shape bend - // if (verticalOut !== verticalIn) { - // } - - const curveLength = 24; - const curveFalloffRate = curveLength * Math.PI * 2; - - const horizontalCurveAmount = -(2 ** ((-10 * horizontalGap) / curveFalloffRate)) + 1; - const verticalCurveAmount = -(2 ** ((-10 * verticalGap) / curveFalloffRate)) + 1; - const horizontalCurve = horizontalCurveAmount * curveLength; - const verticalCurve = verticalCurveAmount * curveLength; - - return [ - { x: outConnectorX, y: outConnectorY }, - { x: verticalOut ? outConnectorX : outConnectorX + horizontalCurve, y: verticalOut ? outConnectorY - verticalCurve : outConnectorY }, - { x: verticalIn ? inConnectorX : inConnectorX - horizontalCurve, y: verticalIn ? inConnectorY + verticalCurve : inConnectorY }, - { x: inConnectorX, y: inConnectorY }, - ]; + + // Handle straight lines + if ((verticalOut && verticalIn && outConnectorX === inConnectorX) || (!verticalOut && !verticalIn && outConnectorY === inConnectorY)) { + return [ + { x: outConnectorX, y: outConnectorY }, + { x: inConnectorX, y: inConnectorY }, + ]; + } + + // Handle L-shaped paths + if ((verticalOut && !verticalIn && outConnectorX === inConnectorX) || (!verticalOut && verticalIn && outConnectorY === inConnectorY)) { + return [ + { x: outConnectorX, y: outConnectorY }, + { x: inConnectorX, y: inConnectorY }, + ]; + } + + // Handle standard right-angle paths + if (verticalOut) { + // Start vertical, then horizontal + + return [ + { x: outConnectorX, y: outConnectorY }, + { x: outConnectorX, y: inConnectorY }, + { x: inConnectorX, y: inConnectorY }, + ]; + } else if (verticalIn) { + // Start horizontal, then vertical + + return [ + { x: outConnectorX, y: outConnectorY }, + { x: inConnectorX, y: outConnectorY }, + { x: inConnectorX, y: inConnectorY }, + ]; + } else { + // Both horizontal - use horizontal middle point + + const midX = (outConnectorX + inConnectorX) / 2; + return [ + { x: outConnectorX, y: outConnectorY }, + { x: midX, y: outConnectorY }, + { x: midX, y: inConnectorY }, + { x: inConnectorX, y: inConnectorY }, + ]; + } } function buildWirePathString(outputBounds: DOMRect, inputBounds: DOMRect, verticalOut: boolean, verticalIn: boolean): string { const locations = buildWirePathLocations(outputBounds, inputBounds, verticalOut, verticalIn); if (locations.length === 0) return "[error]"; - const SMOOTHING = 0.5; - const delta01 = { x: (locations[1].x - locations[0].x) * SMOOTHING, y: (locations[1].y - locations[0].y) * SMOOTHING }; - const delta23 = { x: (locations[3].x - locations[2].x) * SMOOTHING, y: (locations[3].y - locations[2].y) * SMOOTHING }; - return ` - M${locations[0].x},${locations[0].y} - L${locations[1].x},${locations[1].y} - C${locations[1].x + delta01.x},${locations[1].y + delta01.y} - ${locations[2].x - delta23.x},${locations[2].y - delta23.y} - ${locations[2].x},${locations[2].y} - L${locations[3].x},${locations[3].y} - ` - .split("\n") - .map((line) => line.trim()) - .join(" "); + + if (locations.length === 2) { + return `M${locations[0].x},${locations[0].y} L${locations[1].x},${locations[1].y}`; + } + + const CORNER_RADIUS = 10; + + // Create path with rounded corners + let path = `M${locations[0].x},${locations[0].y}`; + + for (let i = 1; i < locations.length - 1; i++) { + const prev = locations[i - 1]; + const curr = locations[i]; + const next = locations[i + 1]; + + // Calculate corner points + const isVertical = curr.x === prev.x; + const cornerStart = { + x: curr.x + (isVertical ? 0 : prev.x < curr.x ? -CORNER_RADIUS : CORNER_RADIUS), + y: curr.y + (isVertical ? (prev.y < curr.y ? -CORNER_RADIUS : CORNER_RADIUS) : 0), + }; + const cornerEnd = { + x: curr.x + (isVertical ? (next.x < curr.x ? -CORNER_RADIUS : CORNER_RADIUS) : 0), + y: curr.y + (isVertical ? 0 : next.y < curr.y ? -CORNER_RADIUS : CORNER_RADIUS), + }; + + // Add line to corner start, quadratic curve for corner, then continue to next point + path += ` L${cornerStart.x},${cornerStart.y}`; + path += ` Q${curr.x},${curr.y} ${cornerEnd.x},${cornerEnd.y}`; + } + + path += ` L${locations[locations.length - 1].x},${locations[locations.length - 1].y}`; + return path; } function toggleLayerDisplay(displayAsLayer: boolean, toggleId: bigint) { From 3504f9d3f4788426a180081dfa2505beff231f44 Mon Sep 17 00:00:00 2001 From: Stargazer1010 Date: Fri, 10 Jan 2025 12:33:56 +0530 Subject: [PATCH 2/9] vertical lines alligned with grid dots --- frontend/src/components/views/Graph.svelte | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/views/Graph.svelte b/frontend/src/components/views/Graph.svelte index 6604175e9f..4cb11740c5 100644 --- a/frontend/src/components/views/Graph.svelte +++ b/frontend/src/components/views/Graph.svelte @@ -100,8 +100,7 @@ const pathString = buildWirePathString(outputPortRect, inputPortRect, verticalOut, verticalIn); const dataType = (outputPort.getAttribute("data-datatype") as FrontendGraphDataType) || "General"; - const thick = (verticalIn && verticalOut) || (verticalOut && !verticalIn); - + const thick = verticalIn && verticalOut; return { pathString, dataType, thick, dashed }; } @@ -136,6 +135,8 @@ function buildWirePathLocations(outputBounds: DOMRect, inputBounds: DOMRect, verticalOut: boolean, verticalIn: boolean): { x: number; y: number }[] { if (!nodesContainer) return []; + const lineWidth = 2; + const halfLineWidth = lineWidth / 2; const VERTICAL_WIRE_OVERLAP_ON_SHAPED_CAP = 1; const containerBounds = nodesContainer.getBoundingClientRect(); @@ -188,8 +189,8 @@ const midX = (outConnectorX + inConnectorX) / 2; return [ { x: outConnectorX, y: outConnectorY }, - { x: midX, y: outConnectorY }, - { x: midX, y: inConnectorY }, + { x: midX - halfLineWidth, y: outConnectorY }, + { x: midX - halfLineWidth, y: inConnectorY }, { x: inConnectorX, y: inConnectorY }, ]; } From 32db4a9c108c2d18e8954c1f7856f298bb0ba716 Mon Sep 17 00:00:00 2001 From: Stargazer1010 Date: Fri, 10 Jan 2025 13:44:58 +0530 Subject: [PATCH 3/9] fixed vertical lines positioning --- frontend/src/components/views/Graph.svelte | 27 +++++++++++++++------- 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/views/Graph.svelte b/frontend/src/components/views/Graph.svelte index 4cb11740c5..6194be04a6 100644 --- a/frontend/src/components/views/Graph.svelte +++ b/frontend/src/components/views/Graph.svelte @@ -185,14 +185,25 @@ ]; } else { // Both horizontal - use horizontal middle point - - const midX = (outConnectorX + inConnectorX) / 2; - return [ - { x: outConnectorX, y: outConnectorY }, - { x: midX - halfLineWidth, y: outConnectorY }, - { x: midX - halfLineWidth, y: inConnectorY }, - { x: inConnectorX, y: inConnectorY }, - ]; + if (outConnectorX > inConnectorX) { + const midY = (inConnectorY + outConnectorY) / 2; + return [ + { x: outConnectorX, y: outConnectorY }, + { x: outConnectorX + gridSpacing, y: outConnectorY }, + { x: outConnectorX + gridSpacing, y: midY }, + { x: inConnectorX - gridSpacing, y: midY }, + { x: inConnectorX - gridSpacing, y: inConnectorY }, + { x: inConnectorX, y: inConnectorY }, + ]; + } else { + const midX = (outConnectorX + inConnectorX) / 2 + (((outConnectorX + inConnectorX) / 2) % gridSpacing); + return [ + { x: outConnectorX, y: outConnectorY }, + { x: midX - halfLineWidth, y: outConnectorY }, + { x: midX - halfLineWidth, y: inConnectorY }, + { x: inConnectorX, y: inConnectorY }, + ]; + } } } From d7744dcdf44c96a048eb85a8e15bc42011c67f79 Mon Sep 17 00:00:00 2001 From: Stargazer1010 Date: Fri, 10 Jan 2025 14:06:28 +0530 Subject: [PATCH 4/9] Deals with cases 5 and 6 --- frontend/src/components/views/Graph.svelte | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/views/Graph.svelte b/frontend/src/components/views/Graph.svelte index 6194be04a6..588154d975 100644 --- a/frontend/src/components/views/Graph.svelte +++ b/frontend/src/components/views/Graph.svelte @@ -186,21 +186,21 @@ } else { // Both horizontal - use horizontal middle point if (outConnectorX > inConnectorX) { - const midY = (inConnectorY + outConnectorY) / 2; + const midY = (inConnectorY + outConnectorY) / 2 + (((inConnectorY + outConnectorY) / 2) % gridSpacing); return [ { x: outConnectorX, y: outConnectorY }, - { x: outConnectorX + gridSpacing, y: outConnectorY }, - { x: outConnectorX + gridSpacing, y: midY }, - { x: inConnectorX - gridSpacing, y: midY }, - { x: inConnectorX - gridSpacing, y: inConnectorY }, + { x: outConnectorX + gridSpacing - 2 * lineWidth, y: outConnectorY }, + { x: outConnectorX + gridSpacing - 2 * lineWidth, y: midY }, + { x: inConnectorX - gridSpacing + lineWidth, y: midY }, + { x: inConnectorX - gridSpacing + lineWidth, y: inConnectorY }, { x: inConnectorX, y: inConnectorY }, ]; } else { const midX = (outConnectorX + inConnectorX) / 2 + (((outConnectorX + inConnectorX) / 2) % gridSpacing); return [ { x: outConnectorX, y: outConnectorY }, - { x: midX - halfLineWidth, y: outConnectorY }, - { x: midX - halfLineWidth, y: inConnectorY }, + { x: midX - lineWidth, y: outConnectorY }, + { x: midX - lineWidth, y: inConnectorY }, { x: inConnectorX, y: inConnectorY }, ]; } From c576ab775ef5ad5e0c7c063dc7e7a62c0448efd5 Mon Sep 17 00:00:00 2001 From: Stargazer1010 Date: Sun, 12 Jan 2025 21:41:35 +0530 Subject: [PATCH 5/9] Fixed case 5 and other problematic zones --- frontend/src/components/views/Graph.svelte | 59 +++++++++++++++++++--- 1 file changed, 53 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/views/Graph.svelte b/frontend/src/components/views/Graph.svelte index 588154d975..b98a55017f 100644 --- a/frontend/src/components/views/Graph.svelte +++ b/frontend/src/components/views/Graph.svelte @@ -135,6 +135,7 @@ 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; @@ -142,13 +143,13 @@ 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,7 +168,7 @@ } // Handle standard right-angle paths - if (verticalOut) { + if (verticalOut && inConnectorX > outConnectorX) { // Start vertical, then horizontal return [ @@ -175,6 +176,15 @@ { 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 [ From 15dbeb6161353df2cb1f120cc6acb67b749d2ca8 Mon Sep 17 00:00:00 2001 From: Stargazer1010 Date: Thu, 16 Jan 2025 05:05:01 +0530 Subject: [PATCH 6/9] edge cases solved --- frontend/src/components/views/Graph.svelte | 407 +++++++++++++++++++-- 1 file changed, 371 insertions(+), 36 deletions(-) diff --git a/frontend/src/components/views/Graph.svelte b/frontend/src/components/views/Graph.svelte index b98a55017f..a89e62ff5c 100644 --- a/frontend/src/components/views/Graph.svelte +++ b/frontend/src/components/views/Graph.svelte @@ -153,10 +153,22 @@ // Handle straight lines if ((verticalOut && verticalIn && outConnectorX === inConnectorX) || (!verticalOut && !verticalIn && outConnectorY === inConnectorY)) { - return [ - { x: outConnectorX, y: outConnectorY }, - { x: inConnectorX, y: inConnectorY }, - ]; + if (!verticalOut && !verticalIn && outConnectorY === inConnectorY && outConnectorX > inConnectorX) { + // outConnector point and inConnector point lying on the same horizontal grid line and outConnector lies to the right of inconnector. + return [ + { x: outConnectorX, y: outConnectorY }, + { x: outConnectorX + gridSpacing, y: outConnectorY }, + { x: outConnectorX + gridSpacing, y: outConnectorY - gridSpacing }, + { x: inConnectorX - 2 * gridSpacing, y: outConnectorY - gridSpacing }, + { x: inConnectorX - 2 * gridSpacing, y: inConnectorY }, + { x: inConnectorX, y: inConnectorY }, + ]; + } else { + return [ + { x: outConnectorX, y: outConnectorY }, + { x: inConnectorX, y: inConnectorY }, + ]; + } } // Handle L-shaped paths @@ -168,34 +180,351 @@ } // Handle standard right-angle paths + // Start vertical, then horizontal + if (verticalOut && inConnectorX > outConnectorX) { - // Start vertical, then horizontal + //outConnector point lies to the left of inConnector point. - return [ - { x: outConnectorX, y: outConnectorY }, - { x: outConnectorX, y: inConnectorY }, - { x: inConnectorX, y: inConnectorY }, - ]; + if (outConnectorY < inConnectorY) { + // outConnector point lies above inConnector point. + if (-4 * gridSpacing <= outConnectorX - inConnectorX && outConnectorX - inConnectorX < -3 * gridSpacing) { + //3 units above inConnector point. + return [ + { x: outConnectorX, y: outConnectorY }, + { x: outConnectorX, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, + { x: inConnectorX - 2 * gridSpacing + lineWidth, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, + { x: inConnectorX - 2 * gridSpacing + lineWidth, y: inConnectorY }, + { x: inConnectorX, y: inConnectorY }, + ]; + } else if (-3 * gridSpacing <= outConnectorX - inConnectorX && outConnectorX - inConnectorX <= -1 * gridSpacing) { + if (-2 * gridSpacing <= outConnectorY - inConnectorY && outConnectorY - inConnectorY <= -1 * gridSpacing) { + return [ + { x: outConnectorX, y: outConnectorY }, + { x: outConnectorX, y: outConnectorY - gridSpacing }, + { x: outConnectorX + gridSpacing, y: outConnectorY - gridSpacing }, + { x: outConnectorX + gridSpacing, y: inConnectorY }, + { x: inConnectorX, y: inConnectorY }, + ]; + } else if (-1 * gridSpacing <= outConnectorY - inConnectorY && outConnectorY - inConnectorY <= 0 * gridSpacing) { + return [ + { x: outConnectorX, y: outConnectorY }, + { x: outConnectorX, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, + { x: outConnectorX + gridSpacing + lineWidth, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, + { x: outConnectorX + gridSpacing + lineWidth, y: inConnectorY }, + + { x: inConnectorX, y: inConnectorY }, + ]; + } else { + return [ + { x: outConnectorX, y: outConnectorY }, + { x: outConnectorX, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, + { x: outConnectorX + 2 * gridSpacing + lineWidth, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, + { x: outConnectorX + 2 * gridSpacing + lineWidth, y: inConnectorY - 2 * gridSpacing }, + { x: inConnectorX - 2 * gridSpacing, y: inConnectorY - 2 * gridSpacing }, + { x: inConnectorX - 2 * gridSpacing, y: inConnectorY }, + { x: inConnectorX, y: inConnectorY }, + ]; + } + } else if (-1 * gridSpacing < outConnectorX - inConnectorX && outConnectorX - inConnectorX <= 0 * gridSpacing) { + if (-2 * gridSpacing <= outConnectorY - inConnectorY && outConnectorY - inConnectorY <= -1 * gridSpacing) { + return [ + { x: outConnectorX, y: outConnectorY + 4 * lineWidth }, + { x: outConnectorX + gridSpacing, y: outConnectorY + 4 * lineWidth }, + + { x: inConnectorX + lineWidth, y: inConnectorY }, + ]; + } else if (-1 * gridSpacing <= outConnectorY - inConnectorY && outConnectorY - inConnectorY <= 0 * gridSpacing) { + return [ + { x: outConnectorX, y: outConnectorY + 5 * lineWidth }, + + { x: inConnectorX, y: inConnectorY }, + ]; + } else { + return [ + { x: outConnectorX, y: outConnectorY }, + { x: outConnectorX, y: outConnectorY - gridSpacing }, + { x: outConnectorX + 2 * gridSpacing, y: outConnectorY - gridSpacing }, + { x: outConnectorX + 2 * gridSpacing, y: inConnectorY - 2 * gridSpacing }, + { x: inConnectorX - 2 * gridSpacing, y: inConnectorY - 2 * gridSpacing }, + { x: inConnectorX - 2 * gridSpacing, y: inConnectorY }, + { x: inConnectorX, y: inConnectorY }, + ]; + } + } else { + const midX = (inConnectorX + outConnectorX) / 2 + (((inConnectorX + outConnectorX) / 2) % gridSpacing); + return [ + { x: outConnectorX, y: outConnectorY }, + { x: outConnectorX, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, + { x: midX + lineWidth, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, + { x: midX + lineWidth, y: inConnectorY }, + { x: inConnectorX, y: inConnectorY }, + ]; + } + } else { + // outConnector point lies below inConnector point. + if (-1 * gridSpacing <= outConnectorX - inConnectorX && outConnectorX - inConnectorX <= 0 * gridSpacing) { + if (0 * gridSpacing <= outConnectorY - inConnectorY && outConnectorY - inConnectorY <= 2 * gridSpacing) { + return [ + { x: outConnectorX, y: outConnectorY + 4 * lineWidth }, + { x: outConnectorX - gridSpacing, y: outConnectorY + 4 * lineWidth }, + { x: outConnectorX - gridSpacing, y: inConnectorY }, + + { x: inConnectorX, y: inConnectorY }, + ]; + } + + const midY = (inConnectorY + outConnectorY) / 2 - (((inConnectorY + outConnectorY) / 2) % gridSpacing); + return [ + { x: outConnectorX, y: outConnectorY }, + { x: outConnectorX, y: midY }, + { x: inConnectorX - 2 * gridSpacing, y: midY }, + { x: inConnectorX - 2 * gridSpacing, y: inConnectorY }, + { x: inConnectorX, y: inConnectorY }, + ]; + } else { + 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 }, - ]; + //outConnector point lies to the right of inConnector point. + + if (outConnectorY < inConnectorY) { + // outConnector point lies above inConnector point. + + /*return [ + { x: outConnectorX, y: outConnectorY }, + { x: 36, y: 36 }, + { x: inConnectorX, y: inConnectorY }, + ];*/ + if (-2 * gridSpacing < outConnectorY - inConnectorY && outConnectorY - inConnectorY <= -1 * gridSpacing) { + return [ + { x: outConnectorX, y: outConnectorY }, + { x: outConnectorX, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, + + { x: inConnectorX - 2 * gridSpacing + lineWidth, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, + { x: inConnectorX - 2 * gridSpacing + lineWidth, y: inConnectorY }, + { x: inConnectorX, y: inConnectorY }, + ]; + } else if (-1 * gridSpacing < outConnectorY - inConnectorY && outConnectorY - inConnectorY <= 0 * gridSpacing) { + return [ + { x: outConnectorX, y: outConnectorY }, + { x: outConnectorX, y: outConnectorY - 2 * gridSpacing + 5.5 * lineWidth }, + + { x: inConnectorX - 2 * gridSpacing + lineWidth, y: outConnectorY - 2 * gridSpacing + 5.5 * lineWidth }, + { x: inConnectorX - 2 * gridSpacing + lineWidth, y: inConnectorY }, + { x: inConnectorX, y: inConnectorY }, + ]; + } + + if (gridSpacing <= outConnectorX - inConnectorX && outConnectorX - inConnectorX <= 3 * gridSpacing) { + return [ + { x: outConnectorX, y: outConnectorY }, + { x: outConnectorX, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, + { x: outConnectorX + 2 * gridSpacing, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, + { x: outConnectorX + 2 * gridSpacing, y: inConnectorY - 2 * gridSpacing }, + { x: inConnectorX - 2 * gridSpacing, y: inConnectorY - 2 * gridSpacing }, + { x: inConnectorX - 2 * gridSpacing, y: inConnectorY }, + { x: inConnectorX, y: inConnectorY }, + ]; + } else { + const midX = (inConnectorX + outConnectorX) / 2 + (((inConnectorX + outConnectorX) / 2) % gridSpacing); + return [ + { x: outConnectorX, y: outConnectorY }, + { x: outConnectorX, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, + { x: midX + lineWidth, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, + { x: midX + lineWidth, y: inConnectorY - 2 * gridSpacing }, + { x: inConnectorX - 2 * gridSpacing + lineWidth, y: inConnectorY - 2 * gridSpacing }, + { x: inConnectorX - 2 * gridSpacing + lineWidth, y: inConnectorY }, + { x: inConnectorX, y: inConnectorY }, + ]; + } + } else { + //outConnector point lies below inConnector point. + if (outConnectorY - inConnectorY <= gridSpacing) { + //outConnector point lies on the horizontal grid line 1 unit below the inConnector Point + if (0 <= outConnectorX - inConnectorX && outConnectorX - inConnectorX <= 13 * gridSpacing) { + return [ + { x: outConnectorX, y: outConnectorY + 6 * lineWidth }, + { x: inConnectorX - 2 * gridSpacing, y: outConnectorY + 6 * lineWidth }, + { x: inConnectorX - 2 * gridSpacing, y: inConnectorY }, + { x: inConnectorX, y: inConnectorY }, + ]; + } else if (13 < outConnectorX - inConnectorX && outConnectorX - inConnectorX <= 18 * gridSpacing) { + return [ + { x: outConnectorX, y: outConnectorY }, + { x: outConnectorX, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, + { x: outConnectorX - 4 * gridSpacing, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, + { x: outConnectorX - 4 * gridSpacing, y: inConnectorY + 2 * gridSpacing }, + { x: inConnectorX - 2 * gridSpacing, y: inConnectorY + 2 * gridSpacing }, + { x: inConnectorX - 2 * gridSpacing, y: inConnectorY }, + { x: inConnectorX, y: inConnectorY }, + ]; + } else { + const midX = (inConnectorX + outConnectorX) / 2 + (((inConnectorX + outConnectorX) / 2) % gridSpacing); + return [ + { x: outConnectorX, y: outConnectorY }, + { x: outConnectorX, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, + { x: midX, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, + { x: midX, y: inConnectorY + 2 * gridSpacing }, + { x: inConnectorX - 2 * gridSpacing, y: inConnectorY + 2 * gridSpacing }, + { x: inConnectorX - 2 * gridSpacing, y: inConnectorY }, + { x: inConnectorX, y: inConnectorY }, + ]; + } + } else if (1 * gridSpacing <= outConnectorY - inConnectorY && outConnectorY - inConnectorY <= 2 * gridSpacing) { + // outConnector point lies on the horizontal grid line 2 units below outConnector point. + + if (0 <= outConnectorX - inConnectorX && outConnectorX - inConnectorX <= 13 * gridSpacing) { + return [ + { x: outConnectorX, y: outConnectorY + 5 * lineWidth }, + { x: inConnectorX - 2 * gridSpacing + lineWidth, y: outConnectorY + 5 * lineWidth }, + { x: inConnectorX - 2 * gridSpacing + lineWidth, y: inConnectorY }, + + { x: inConnectorX, y: inConnectorY }, + ]; + } else if (13 < outConnectorX - inConnectorX && outConnectorX - inConnectorX <= 18 * gridSpacing) { + return [ + { x: outConnectorX, y: outConnectorY }, + { x: outConnectorX, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, + { x: outConnectorX - 4 * gridSpacing, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, + { x: outConnectorX - 4 * gridSpacing, y: inConnectorY + 2 * gridSpacing }, + { x: inConnectorX - 2 * gridSpacing, y: inConnectorY + 2 * gridSpacing }, + { x: inConnectorX - 2 * gridSpacing, y: inConnectorY }, + { x: inConnectorX, y: inConnectorY }, + ]; + } else { + const midX = (inConnectorX + outConnectorX) / 2 + (((inConnectorX + outConnectorX) / 2) % gridSpacing); + return [ + { x: outConnectorX, y: outConnectorY }, + { x: outConnectorX, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, + { x: midX, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, + { x: midX, y: inConnectorY + 2 * gridSpacing }, + { x: inConnectorX - 2 * gridSpacing, y: inConnectorY + 2 * gridSpacing }, + { x: inConnectorX - 2 * gridSpacing, y: inConnectorY }, + { x: inConnectorX, y: inConnectorY }, + ]; + } + } + + if (outConnectorY - inConnectorY <= 4 * gridSpacing) { + //0 to 4 units below the outConnector Point + return [ + { x: outConnectorX, y: outConnectorY }, + { x: outConnectorX, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, + { x: inConnectorX - 2 * gridSpacing + lineWidth, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, + { x: inConnectorX - 2 * gridSpacing + lineWidth, y: inConnectorY }, + { x: inConnectorX, y: inConnectorY }, + ]; + } else { + const midY = (inConnectorY + outConnectorY) / 2 - (((inConnectorY + outConnectorY) / 2) % gridSpacing); + return [ + { x: outConnectorX, y: outConnectorY }, + { x: outConnectorX, y: midY }, + { x: inConnectorX - 2 * gridSpacing, y: midY }, + { x: inConnectorX - 2 * gridSpacing, y: inConnectorY }, + { x: inConnectorX, y: inConnectorY }, + ]; + } + } } else if (verticalIn) { // Start horizontal, then vertical - return [ - { x: outConnectorX, y: outConnectorY }, - { x: inConnectorX, y: outConnectorY }, - { x: inConnectorX, y: inConnectorY }, - ]; + if (outConnectorY > inConnectorY) { + // when outConnector lies below inConnector + if (outConnectorX < inConnectorX) { + // outConnectorX lies to the left of inConnectorX + + return [ + { x: outConnectorX, y: outConnectorY }, + { x: inConnectorX, y: outConnectorY }, + { x: inConnectorX, y: inConnectorY }, + ]; + } else { + // outConnectorX lies to the right of inConnectorX. + if (outConnectorY - inConnectorY <= gridSpacing) { + if (0 <= outConnectorX - inConnectorX && outConnectorX - inConnectorX <= gridSpacing) { + // outConnector point directly below inConnector point + + return [ + { x: outConnectorX, y: outConnectorY }, + { x: inConnectorX + gridSpacing, y: outConnectorY }, + { x: inConnectorX + gridSpacing, y: outConnectorY - gridSpacing }, + { x: inConnectorX, y: outConnectorY - gridSpacing }, + { x: inConnectorX, y: inConnectorY }, + ]; + } else { + // outConnector point lies below inConnector point and strictly to the right of inConnector Point. + return [ + { x: outConnectorX, y: outConnectorY }, + { x: outConnectorX + gridSpacing, y: outConnectorY }, + { x: outConnectorX + gridSpacing, y: inConnectorY + gridSpacing + 6.5 * lineWidth }, + { x: inConnectorX, y: inConnectorY + gridSpacing + 6.5 * lineWidth }, + { x: inConnectorX, y: inConnectorY }, + ]; + } + } else { + return [ + { x: outConnectorX, y: outConnectorY }, + { x: outConnectorX + gridSpacing, y: outConnectorY }, + { x: outConnectorX + gridSpacing, y: outConnectorY - gridSpacing }, + { x: inConnectorX, y: outConnectorY - gridSpacing }, + { x: inConnectorX, y: inConnectorY }, + ]; + } + } + } else { + //outConnectorY lies on or above the inConnectorY point. + if (-6 * gridSpacing < inConnectorX - outConnectorX && inConnectorX - outConnectorX < 4 * gridSpacing) { + // edge case + if (-1 * gridSpacing < inConnectorX - outConnectorX && inConnectorX - outConnectorX < 4 * gridSpacing) { + return [ + { x: outConnectorX, y: outConnectorY }, + { x: outConnectorX + gridSpacing, y: outConnectorY }, + { x: outConnectorX + gridSpacing, y: outConnectorY - gridSpacing }, + { x: inConnectorX - 4 * gridSpacing, y: outConnectorY - gridSpacing }, + { x: inConnectorX - 4 * gridSpacing, y: inConnectorY + gridSpacing - 5.5 * lineWidth }, + { x: inConnectorX, y: inConnectorY + gridSpacing - 5.5 * lineWidth }, + { x: inConnectorX, y: inConnectorY }, + ]; + } else { + return [ + { x: outConnectorX, y: outConnectorY }, + { x: inConnectorX + 8 * gridSpacing, y: outConnectorY }, + { x: inConnectorX + 8 * gridSpacing, y: inConnectorY + gridSpacing - 5.5 * lineWidth }, + { x: inConnectorX, y: inConnectorY + gridSpacing - 5.5 * lineWidth }, + + { x: inConnectorX, y: inConnectorY }, + ]; + } + } else if (4 * gridSpacing < inConnectorX - outConnectorX) { + // left of edge case + const midX = (inConnectorX + outConnectorX) / 2 + (((inConnectorX + outConnectorX) / 2) % gridSpacing); + return [ + { x: outConnectorX, y: outConnectorY }, + { x: midX - 2 * lineWidth, y: outConnectorY }, + { x: midX - 2 * lineWidth, y: inConnectorY + gridSpacing - 5.5 * lineWidth }, + { x: inConnectorX, y: inConnectorY + gridSpacing - 5.5 * lineWidth }, + { x: inConnectorX, y: inConnectorY }, + ]; + } else if (6 * gridSpacing > inConnectorX - outConnectorX) { + // right of edge case + + return [ + { x: outConnectorX, y: outConnectorY }, + { x: outConnectorX + gridSpacing - 2 * lineWidth, y: outConnectorY }, + { x: outConnectorX + gridSpacing - 2 * lineWidth, y: inConnectorY + gridSpacing - 5.5 * lineWidth }, + { x: inConnectorX, y: inConnectorY + gridSpacing - 5.5 * lineWidth }, + { x: inConnectorX, y: inConnectorY }, + ]; + } + } } else { // Both horizontal - use horizontal middle point - // Whwn outConnector point is one of the two closest diagonally opposite points. + // When inConnector 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 }, @@ -204,46 +533,52 @@ ]; } - // When inConnector point lies on the horizontal line above and below the outConnector point. + // When inConnector point lies on the horizontal line 1 unit above and below the outConnector point. else if (-1 * gridSpacing <= outConnectorY - inConnectorY && outConnectorY - inConnectorY <= gridSpacing && outConnectorX > inConnectorX) { if (inConnectorY < outConnectorY) { + //horizontal line above outConnectorY return [ { x: outConnectorX, y: outConnectorY }, - { x: outConnectorX, y: inConnectorY - gridSpacing }, - { x: inConnectorX - gridSpacing, y: inConnectorY - gridSpacing }, - { x: inConnectorX - gridSpacing, y: inConnectorY }, + { x: outConnectorX + gridSpacing, y: outConnectorY }, + { x: outConnectorX + gridSpacing, y: inConnectorY - gridSpacing }, + { x: inConnectorX - 2 * gridSpacing, y: inConnectorY - gridSpacing }, + { x: inConnectorX - 2 * gridSpacing, y: inConnectorY }, { x: inConnectorX, y: inConnectorY }, ]; } else { + // horizontal line below outConnectorY return [ { x: outConnectorX, y: outConnectorY }, - { x: outConnectorX, y: inConnectorY + gridSpacing }, - { x: inConnectorX - gridSpacing, y: inConnectorY + gridSpacing }, - { x: inConnectorX - gridSpacing, y: inConnectorY }, + { x: outConnectorX + gridSpacing, y: outConnectorY }, + { x: outConnectorX + gridSpacing, y: inConnectorY + gridSpacing }, + { x: inConnectorX - 2 * gridSpacing, y: inConnectorY + gridSpacing }, + { x: inConnectorX - 2 * gridSpacing, y: inConnectorY }, { x: inConnectorX, y: inConnectorY }, ]; } } else if (outConnectorX > inConnectorX - gridSpacing) { + // outConnector point to the right of inConnector point const midY = (inConnectorY + outConnectorY) / 2 + (((inConnectorY + outConnectorY) / 2) % gridSpacing); return [ { x: outConnectorX, y: outConnectorY }, { x: outConnectorX + gridSpacing - 2 * lineWidth, y: outConnectorY }, { x: outConnectorX + gridSpacing - 2 * lineWidth, y: midY }, - { x: inConnectorX - gridSpacing + lineWidth, y: midY }, - { x: inConnectorX - gridSpacing + lineWidth, y: inConnectorY }, + { x: inConnectorX - 2 * gridSpacing + lineWidth, y: midY }, + { x: inConnectorX - 2 * 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: outConnectorX - 2 * lineWidth, y: outConnectorY }, + { x: outConnectorX - 2 * lineWidth, y: inConnectorY }, + { x: inConnectorX, y: inConnectorY }, ]; } else { const midX = (outConnectorX + inConnectorX) / 2 + (((outConnectorX + inConnectorX) / 2) % gridSpacing); + return [ { x: outConnectorX, y: outConnectorY }, { x: midX - lineWidth, y: outConnectorY }, From 651fdb97ee1be379cc57216233eaeded7c7c76ca Mon Sep 17 00:00:00 2001 From: Stargazer1010 Date: Thu, 16 Jan 2025 09:06:25 +0530 Subject: [PATCH 7/9] edge cases fixed: HorizontalOut & HorizontalIn --- frontend/src/components/views/Graph.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/views/Graph.svelte b/frontend/src/components/views/Graph.svelte index a89e62ff5c..691fa30194 100644 --- a/frontend/src/components/views/Graph.svelte +++ b/frontend/src/components/views/Graph.svelte @@ -571,9 +571,9 @@ // 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 - 2 * lineWidth, y: outConnectorY }, - { x: outConnectorX - 2 * lineWidth, y: inConnectorY }, - + { x: outConnectorX, y: outConnectorY }, + { x: outConnectorX + gridSpacing - 2 * lineWidth, y: outConnectorY }, + { x: outConnectorX + gridSpacing - 2 * lineWidth, y: inConnectorY }, { x: inConnectorX, y: inConnectorY }, ]; } else { From ab5fa9284c03c55e3172772e7e2793980ad0eb4f Mon Sep 17 00:00:00 2001 From: Stargazer1010 Date: Thu, 16 Jan 2025 15:11:18 +0530 Subject: [PATCH 8/9] added comments --- frontend/src/components/views/Graph.svelte | 60 ++++++++++++---------- 1 file changed, 32 insertions(+), 28 deletions(-) diff --git a/frontend/src/components/views/Graph.svelte b/frontend/src/components/views/Graph.svelte index 691fa30194..6f351d9c9f 100644 --- a/frontend/src/components/views/Graph.svelte +++ b/frontend/src/components/views/Graph.svelte @@ -137,7 +137,7 @@ 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(); @@ -154,7 +154,7 @@ // Handle straight lines if ((verticalOut && verticalIn && outConnectorX === inConnectorX) || (!verticalOut && !verticalIn && outConnectorY === inConnectorY)) { if (!verticalOut && !verticalIn && outConnectorY === inConnectorY && outConnectorX > inConnectorX) { - // outConnector point and inConnector point lying on the same horizontal grid line and outConnector lies to the right of inconnector. + // outConnector point and inConnector point lying on the same horizontal grid line and outConnector point lies to the right of inConnector point. return [ { x: outConnectorX, y: outConnectorY }, { x: outConnectorX + gridSpacing, y: outConnectorY }, @@ -180,15 +180,16 @@ } // Handle standard right-angle paths - // Start vertical, then horizontal + // Start vertical, then horizontal if (verticalOut && inConnectorX > outConnectorX) { //outConnector point lies to the left of inConnector point. if (outConnectorY < inConnectorY) { // outConnector point lies above inConnector point. if (-4 * gridSpacing <= outConnectorX - inConnectorX && outConnectorX - inConnectorX < -3 * gridSpacing) { - //3 units above inConnector point. + //outConnector point lies on the vertical grid line 4 units to the left of inConnector point point. + return [ { x: outConnectorX, y: outConnectorY }, { x: outConnectorX, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, @@ -196,7 +197,9 @@ { x: inConnectorX - 2 * gridSpacing + lineWidth, y: inConnectorY }, { x: inConnectorX, y: inConnectorY }, ]; - } else if (-3 * gridSpacing <= outConnectorX - inConnectorX && outConnectorX - inConnectorX <= -1 * gridSpacing) { + } + if (-3 * gridSpacing <= outConnectorX - inConnectorX && outConnectorX - inConnectorX <= -1 * gridSpacing) { + // outConnector point lying on vertical grid lines 3 and 2 units to the left of inConnector point. if (-2 * gridSpacing <= outConnectorY - inConnectorY && outConnectorY - inConnectorY <= -1 * gridSpacing) { return [ { x: outConnectorX, y: outConnectorY }, @@ -226,7 +229,9 @@ ]; } } else if (-1 * gridSpacing < outConnectorX - inConnectorX && outConnectorX - inConnectorX <= 0 * gridSpacing) { + // outConnector point lying on vertical grid line 1 units to the left of inConnector point. if (-2 * gridSpacing <= outConnectorY - inConnectorY && outConnectorY - inConnectorY <= -1 * gridSpacing) { + // outConnector point lying on horizontal grid line 1 unit above inConnector point. return [ { x: outConnectorX, y: outConnectorY + 4 * lineWidth }, { x: outConnectorX + gridSpacing, y: outConnectorY + 4 * lineWidth }, @@ -234,9 +239,9 @@ { x: inConnectorX + lineWidth, y: inConnectorY }, ]; } else if (-1 * gridSpacing <= outConnectorY - inConnectorY && outConnectorY - inConnectorY <= 0 * gridSpacing) { + // outConnector point lying on the same horizontal grid line as inConnector point. return [ { x: outConnectorX, y: outConnectorY + 5 * lineWidth }, - { x: inConnectorX, y: inConnectorY }, ]; } else { @@ -263,24 +268,25 @@ } else { // outConnector point lies below inConnector point. if (-1 * gridSpacing <= outConnectorX - inConnectorX && outConnectorX - inConnectorX <= 0 * gridSpacing) { + // outConnector point lying on vertical grid line 1 unit to the left of inConnector point. if (0 * gridSpacing <= outConnectorY - inConnectorY && outConnectorY - inConnectorY <= 2 * gridSpacing) { + //outConnector point lying on the horizontal grid lines 1 and 2 units below the inConnector point. return [ { x: outConnectorX, y: outConnectorY + 4 * lineWidth }, { x: outConnectorX - gridSpacing, y: outConnectorY + 4 * lineWidth }, { x: outConnectorX - gridSpacing, y: inConnectorY }, - + { x: inConnectorX, y: inConnectorY }, + ]; + } else { + const midY = (inConnectorY + outConnectorY) / 2 - (((inConnectorY + outConnectorY) / 2) % gridSpacing); + return [ + { x: outConnectorX, y: outConnectorY }, + { x: outConnectorX, y: midY }, + { x: inConnectorX - 2 * gridSpacing, y: midY }, + { x: inConnectorX - 2 * gridSpacing, y: inConnectorY }, { x: inConnectorX, y: inConnectorY }, ]; } - - const midY = (inConnectorY + outConnectorY) / 2 - (((inConnectorY + outConnectorY) / 2) % gridSpacing); - return [ - { x: outConnectorX, y: outConnectorY }, - { x: outConnectorX, y: midY }, - { x: inConnectorX - 2 * gridSpacing, y: midY }, - { x: inConnectorX - 2 * gridSpacing, y: inConnectorY }, - { x: inConnectorX, y: inConnectorY }, - ]; } else { return [ { x: outConnectorX, y: outConnectorY }, @@ -293,14 +299,10 @@ //outConnector point lies to the right of inConnector point. if (outConnectorY < inConnectorY) { - // outConnector point lies above inConnector point. + // outConnector point lying on any horizontal grid line above inConnector point. - /*return [ - { x: outConnectorX, y: outConnectorY }, - { x: 36, y: 36 }, - { x: inConnectorX, y: inConnectorY }, - ];*/ if (-2 * gridSpacing < outConnectorY - inConnectorY && outConnectorY - inConnectorY <= -1 * gridSpacing) { + // outConnector point lying on horizontal grid line 1 unit above inConnector point. return [ { x: outConnectorX, y: outConnectorY }, { x: outConnectorX, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, @@ -310,6 +312,7 @@ { x: inConnectorX, y: inConnectorY }, ]; } else if (-1 * gridSpacing < outConnectorY - inConnectorY && outConnectorY - inConnectorY <= 0 * gridSpacing) { + // outConnector point lying on the same horizontal grid line as inConnector point. return [ { x: outConnectorX, y: outConnectorY }, { x: outConnectorX, y: outConnectorY - 2 * gridSpacing + 5.5 * lineWidth }, @@ -318,9 +321,8 @@ { x: inConnectorX - 2 * gridSpacing + lineWidth, y: inConnectorY }, { x: inConnectorX, y: inConnectorY }, ]; - } - - if (gridSpacing <= outConnectorX - inConnectorX && outConnectorX - inConnectorX <= 3 * gridSpacing) { + } else if (gridSpacing <= outConnectorX - inConnectorX && outConnectorX - inConnectorX <= 3 * gridSpacing) { + // outConnector point lying on vertical grid lines 1 and 2 units to the right of inConnector point. return [ { x: outConnectorX, y: outConnectorY }, { x: outConnectorX, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, @@ -479,7 +481,8 @@ } else { //outConnectorY lies on or above the inConnectorY point. if (-6 * gridSpacing < inConnectorX - outConnectorX && inConnectorX - outConnectorX < 4 * gridSpacing) { - // edge case + // edge case: outConnector point lying on vertical grid lines ranging from 4 units to left to 5 units to right of inConnector point. + if (-1 * gridSpacing < inConnectorX - outConnectorX && inConnectorX - outConnectorX < 4 * gridSpacing) { return [ { x: outConnectorX, y: outConnectorY }, @@ -501,7 +504,7 @@ ]; } } else if (4 * gridSpacing < inConnectorX - outConnectorX) { - // left of edge case + // left of edge case: outConnector point lying on vertical grid lines more than 4 units to left of inConnector point. const midX = (inConnectorX + outConnectorX) / 2 + (((inConnectorX + outConnectorX) / 2) % gridSpacing); return [ { x: outConnectorX, y: outConnectorY }, @@ -511,7 +514,7 @@ { x: inConnectorX, y: inConnectorY }, ]; } else if (6 * gridSpacing > inConnectorX - outConnectorX) { - // right of edge case + // right of edge case: outConnector point lying on the vertical grid lines more than 5 units to right of inConnector point. return [ { x: outConnectorX, y: outConnectorY }, @@ -587,6 +590,7 @@ ]; } } + return []; } function buildWirePathString(outputBounds: DOMRect, inputBounds: DOMRect, verticalOut: boolean, verticalIn: boolean): string { From 2faa45a265a0d0cdb0d9b761b148f7e877f4b512 Mon Sep 17 00:00:00 2001 From: Stargazer1010 Date: Thu, 30 Jan 2025 12:40:24 +0530 Subject: [PATCH 9/9] Changed midX and midY --- frontend/src/components/views/Graph.svelte | 55 ++++++++++------------ 1 file changed, 25 insertions(+), 30 deletions(-) diff --git a/frontend/src/components/views/Graph.svelte b/frontend/src/components/views/Graph.svelte index 6f351d9c9f..5aa3063990 100644 --- a/frontend/src/components/views/Graph.svelte +++ b/frontend/src/components/views/Graph.svelte @@ -151,6 +151,13 @@ const inConnectorX = Math.round((inX - containerBounds.x) / scale); // Adjust for scale const inConnectorY = Math.round((inY - containerBounds.y) / scale); // Adjust for scale + function calculateMidX() { + return (inConnectorX + outConnectorX) / 2 + (((inConnectorX + outConnectorX) / 2) % gridSpacing); + } + function calculateMidY() { + return (inConnectorY + outConnectorY) / 2 - (((inConnectorY + outConnectorY) / 2) % gridSpacing); + } + // Handle straight lines if ((verticalOut && verticalIn && outConnectorX === inConnectorX) || (!verticalOut && !verticalIn && outConnectorY === inConnectorY)) { if (!verticalOut && !verticalIn && outConnectorY === inConnectorY && outConnectorX > inConnectorX) { @@ -235,7 +242,6 @@ return [ { x: outConnectorX, y: outConnectorY + 4 * lineWidth }, { x: outConnectorX + gridSpacing, y: outConnectorY + 4 * lineWidth }, - { x: inConnectorX + lineWidth, y: inConnectorY }, ]; } else if (-1 * gridSpacing <= outConnectorY - inConnectorY && outConnectorY - inConnectorY <= 0 * gridSpacing) { @@ -256,12 +262,11 @@ ]; } } else { - const midX = (inConnectorX + outConnectorX) / 2 + (((inConnectorX + outConnectorX) / 2) % gridSpacing); return [ { x: outConnectorX, y: outConnectorY }, { x: outConnectorX, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, - { x: midX + lineWidth, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, - { x: midX + lineWidth, y: inConnectorY }, + { x: calculateMidX() + lineWidth, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, + { x: calculateMidX() + lineWidth, y: inConnectorY }, { x: inConnectorX, y: inConnectorY }, ]; } @@ -278,11 +283,10 @@ { x: inConnectorX, y: inConnectorY }, ]; } else { - const midY = (inConnectorY + outConnectorY) / 2 - (((inConnectorY + outConnectorY) / 2) % gridSpacing); return [ { x: outConnectorX, y: outConnectorY }, - { x: outConnectorX, y: midY }, - { x: inConnectorX - 2 * gridSpacing, y: midY }, + { x: outConnectorX, y: calculateMidY() }, + { x: inConnectorX - 2 * gridSpacing, y: calculateMidY() }, { x: inConnectorX - 2 * gridSpacing, y: inConnectorY }, { x: inConnectorX, y: inConnectorY }, ]; @@ -306,7 +310,6 @@ return [ { x: outConnectorX, y: outConnectorY }, { x: outConnectorX, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, - { x: inConnectorX - 2 * gridSpacing + lineWidth, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, { x: inConnectorX - 2 * gridSpacing + lineWidth, y: inConnectorY }, { x: inConnectorX, y: inConnectorY }, @@ -316,7 +319,6 @@ return [ { x: outConnectorX, y: outConnectorY }, { x: outConnectorX, y: outConnectorY - 2 * gridSpacing + 5.5 * lineWidth }, - { x: inConnectorX - 2 * gridSpacing + lineWidth, y: outConnectorY - 2 * gridSpacing + 5.5 * lineWidth }, { x: inConnectorX - 2 * gridSpacing + lineWidth, y: inConnectorY }, { x: inConnectorX, y: inConnectorY }, @@ -333,12 +335,11 @@ { x: inConnectorX, y: inConnectorY }, ]; } else { - const midX = (inConnectorX + outConnectorX) / 2 + (((inConnectorX + outConnectorX) / 2) % gridSpacing); return [ { x: outConnectorX, y: outConnectorY }, { x: outConnectorX, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, - { x: midX + lineWidth, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, - { x: midX + lineWidth, y: inConnectorY - 2 * gridSpacing }, + { x: calculateMidX() + lineWidth, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, + { x: calculateMidX() + lineWidth, y: inConnectorY - 2 * gridSpacing }, { x: inConnectorX - 2 * gridSpacing + lineWidth, y: inConnectorY - 2 * gridSpacing }, { x: inConnectorX - 2 * gridSpacing + lineWidth, y: inConnectorY }, { x: inConnectorX, y: inConnectorY }, @@ -366,12 +367,11 @@ { x: inConnectorX, y: inConnectorY }, ]; } else { - const midX = (inConnectorX + outConnectorX) / 2 + (((inConnectorX + outConnectorX) / 2) % gridSpacing); return [ { x: outConnectorX, y: outConnectorY }, { x: outConnectorX, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, - { x: midX, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, - { x: midX, y: inConnectorY + 2 * gridSpacing }, + { x: calculateMidX(), y: outConnectorY - gridSpacing + 5.5 * lineWidth }, + { x: calculateMidX(), y: inConnectorY + 2 * gridSpacing }, { x: inConnectorX - 2 * gridSpacing, y: inConnectorY + 2 * gridSpacing }, { x: inConnectorX - 2 * gridSpacing, y: inConnectorY }, { x: inConnectorX, y: inConnectorY }, @@ -385,7 +385,6 @@ { x: outConnectorX, y: outConnectorY + 5 * lineWidth }, { x: inConnectorX - 2 * gridSpacing + lineWidth, y: outConnectorY + 5 * lineWidth }, { x: inConnectorX - 2 * gridSpacing + lineWidth, y: inConnectorY }, - { x: inConnectorX, y: inConnectorY }, ]; } else if (13 < outConnectorX - inConnectorX && outConnectorX - inConnectorX <= 18 * gridSpacing) { @@ -399,12 +398,11 @@ { x: inConnectorX, y: inConnectorY }, ]; } else { - const midX = (inConnectorX + outConnectorX) / 2 + (((inConnectorX + outConnectorX) / 2) % gridSpacing); return [ { x: outConnectorX, y: outConnectorY }, { x: outConnectorX, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, - { x: midX, y: outConnectorY - gridSpacing + 5.5 * lineWidth }, - { x: midX, y: inConnectorY + 2 * gridSpacing }, + { x: calculateMidX(), y: outConnectorY - gridSpacing + 5.5 * lineWidth }, + { x: calculateMidX(), y: inConnectorY + 2 * gridSpacing }, { x: inConnectorX - 2 * gridSpacing, y: inConnectorY + 2 * gridSpacing }, { x: inConnectorX - 2 * gridSpacing, y: inConnectorY }, { x: inConnectorX, y: inConnectorY }, @@ -422,11 +420,10 @@ { x: inConnectorX, y: inConnectorY }, ]; } else { - const midY = (inConnectorY + outConnectorY) / 2 - (((inConnectorY + outConnectorY) / 2) % gridSpacing); return [ { x: outConnectorX, y: outConnectorY }, - { x: outConnectorX, y: midY }, - { x: inConnectorX - 2 * gridSpacing, y: midY }, + { x: outConnectorX, y: calculateMidY() }, + { x: inConnectorX - 2 * gridSpacing, y: calculateMidY() }, { x: inConnectorX - 2 * gridSpacing, y: inConnectorY }, { x: inConnectorX, y: inConnectorY }, ]; @@ -499,17 +496,16 @@ { x: inConnectorX + 8 * gridSpacing, y: outConnectorY }, { x: inConnectorX + 8 * gridSpacing, y: inConnectorY + gridSpacing - 5.5 * lineWidth }, { x: inConnectorX, y: inConnectorY + gridSpacing - 5.5 * lineWidth }, - { x: inConnectorX, y: inConnectorY }, ]; } } else if (4 * gridSpacing < inConnectorX - outConnectorX) { // left of edge case: outConnector point lying on vertical grid lines more than 4 units to left of inConnector point. - const midX = (inConnectorX + outConnectorX) / 2 + (((inConnectorX + outConnectorX) / 2) % gridSpacing); + return [ { x: outConnectorX, y: outConnectorY }, - { x: midX - 2 * lineWidth, y: outConnectorY }, - { x: midX - 2 * lineWidth, y: inConnectorY + gridSpacing - 5.5 * lineWidth }, + { x: calculateMidX() - 2 * lineWidth, y: outConnectorY }, + { x: calculateMidX() - 2 * lineWidth, y: inConnectorY + gridSpacing - 5.5 * lineWidth }, { x: inConnectorX, y: inConnectorY + gridSpacing - 5.5 * lineWidth }, { x: inConnectorX, y: inConnectorY }, ]; @@ -562,6 +558,7 @@ } else if (outConnectorX > inConnectorX - gridSpacing) { // outConnector point to the right of inConnector point const midY = (inConnectorY + outConnectorY) / 2 + (((inConnectorY + outConnectorY) / 2) % gridSpacing); + return [ { x: outConnectorX, y: outConnectorY }, { x: outConnectorX + gridSpacing - 2 * lineWidth, y: outConnectorY }, @@ -580,12 +577,10 @@ { x: inConnectorX, y: inConnectorY }, ]; } else { - const midX = (outConnectorX + inConnectorX) / 2 + (((outConnectorX + inConnectorX) / 2) % gridSpacing); - return [ { x: outConnectorX, y: outConnectorY }, - { x: midX - lineWidth, y: outConnectorY }, - { x: midX - lineWidth, y: inConnectorY }, + { x: calculateMidX() - lineWidth, y: outConnectorY }, + { x: calculateMidX() - lineWidth, y: inConnectorY }, { x: inConnectorX, y: inConnectorY }, ]; }