From 208ee5b944c570566163dc62bc5f47f06050f733 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 21 Aug 2023 18:01:11 +0200
Subject: [PATCH] fix(step-edge): handle routes for same positions

---
 .../src/lib/components/KeyHandler/KeyHandler.svelte  |  1 -
 packages/svelte/src/routes/customnode/+page.svelte   |  7 +++++++
 packages/system/src/utils/edges/smoothstep-edge.ts   | 12 ++++++------
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte b/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte
index d31d0781..a7c852ab 100644
--- a/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte
+++ b/packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte
@@ -55,7 +55,6 @@
         key: deleteKeyString,
         modifier: deleteKeyModifier,
         callback: () => {
-          console.log('delete');
           deleteKeyPressed.set(true);
         }
       }
diff --git a/packages/svelte/src/routes/customnode/+page.svelte b/packages/svelte/src/routes/customnode/+page.svelte
index 384c0420..28d92038 100644
--- a/packages/svelte/src/routes/customnode/+page.svelte
+++ b/packages/svelte/src/routes/customnode/+page.svelte
@@ -57,6 +57,13 @@
       style: 'border: 1px solid #777; padding: 10px',
       position: { x: 250, y: 50 }
     },
+    {
+      id: '2a',
+      type: 'colorNode',
+      data: { onChange: onChange, color: $bgColor },
+      style: 'border: 1px solid #777; padding: 10px',
+      position: { x: 250, y: 520 }
+    },
     {
       id: '3',
       type: 'output',
diff --git a/packages/system/src/utils/edges/smoothstep-edge.ts b/packages/system/src/utils/edges/smoothstep-edge.ts
index 60e0e9dc..ba3e95a9 100644
--- a/packages/system/src/utils/edges/smoothstep-edge.ts
+++ b/packages/system/src/utils/edges/smoothstep-edge.ts
@@ -121,9 +121,9 @@ function getPoints({
       if (diff <= offset) {
         const gapOffset = Math.min(offset - 1, offset - diff);
         if (sourceDir[dirAccessor] === currDir) {
-          sourceGapOffset[dirAccessor] = gapOffset;
+          sourceGapOffset[dirAccessor] = (sourceGapped[dirAccessor] > source[dirAccessor] ? -1 : 1) * gapOffset;
         } else {
-          targetGapOffset[dirAccessor] = gapOffset;
+          targetGapOffset[dirAccessor] = (targetGapped[dirAccessor] > target[dirAccessor] ? -1 : 1) * gapOffset;
         }
       }
     }
@@ -143,8 +143,8 @@ function getPoints({
       }
     }
 
-    const sourceGapPoint = { x: sourceGapped.x - sourceGapOffset.x, y: sourceGapped.y - sourceGapOffset.y };
-    const targetGapPoint = { x: targetGapped.x - targetGapOffset.x, y: targetGapped.y - targetGapOffset.y };
+    const sourceGapPoint = { x: sourceGapped.x + sourceGapOffset.x, y: sourceGapped.y + sourceGapOffset.y };
+    const targetGapPoint = { x: targetGapped.x + targetGapOffset.x, y: targetGapped.y + targetGapOffset.y };
     const maxXDistance = Math.max(Math.abs(sourceGapPoint.x - points[0].x), Math.abs(targetGapPoint.x - points[0].x));
     const maxYDistance = Math.max(Math.abs(sourceGapPoint.y - points[0].y), Math.abs(targetGapPoint.y - points[0].y));
 
@@ -160,9 +160,9 @@ function getPoints({
 
   const pathPoints = [
     source,
-    { x: sourceGapped.x - sourceGapOffset.x, y: sourceGapped.y - sourceGapOffset.y },
+    { x: sourceGapped.x + sourceGapOffset.x, y: sourceGapped.y + sourceGapOffset.y },
     ...points,
-    { x: targetGapped.x - targetGapOffset.x, y: targetGapped.y - targetGapOffset.y },
+    { x: targetGapped.x + targetGapOffset.x, y: targetGapped.y + targetGapOffset.y },
     target,
   ];