From 006bfdf65d921d74a037be9542869c0cfe6ce394 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Sun, 14 May 2023 18:30:35 -0500
Subject: [PATCH] Make node links follow dragging

---
 src/features/boards/Board.vue     | 11 ++++++++++-
 src/features/boards/BoardLink.vue | 19 ++++++++++++++++---
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/features/boards/Board.vue b/src/features/boards/Board.vue
index a1b5a58..218b302 100644
--- a/src/features/boards/Board.vue
+++ b/src/features/boards/Board.vue
@@ -28,7 +28,16 @@
                         v-for="link in unref(links) || []"
                         :key="`${link.startNode.id}-${link.endNode.id}`"
                     >
-                        <BoardLinkVue :link="link" />
+                        <BoardLinkVue
+                            :link="link"
+                            :dragging="unref(draggingNode)"
+                            :dragged="
+                                link.startNode === unref(draggingNode) ||
+                                link.endNode === unref(draggingNode)
+                                    ? dragged
+                                    : undefined
+                            "
+                        />
                     </g>
                 </transition-group>
                 <transition-group name="grow" :duration="500" appear>
diff --git a/src/features/boards/BoardLink.vue b/src/features/boards/BoardLink.vue
index 441d996..1f5ca17 100644
--- a/src/features/boards/BoardLink.vue
+++ b/src/features/boards/BoardLink.vue
@@ -11,29 +11,42 @@
 </template>
 
 <script setup lang="ts">
-import type { BoardNodeLink } from "features/boards/board";
+import type { BoardNode, BoardNodeLink } from "features/boards/board";
 import { computed, toRefs, unref } from "vue";
 
 const _props = defineProps<{
     link: BoardNodeLink;
+    dragging: BoardNode | null;
+    dragged?: {
+        x: number;
+        y: number;
+    };
 }>();
 const props = toRefs(_props);
 
 const startPosition = computed(() => {
-    const position = props.link.value.startNode.position;
+    const position = { ...props.link.value.startNode.position };
     if (props.link.value.offsetStart) {
         position.x += unref(props.link.value.offsetStart).x;
         position.y += unref(props.link.value.offsetStart).y;
     }
+    if (props.dragging?.value === props.link.value.startNode) {
+        position.x += props.dragged?.value?.x ?? 0;
+        position.y += props.dragged?.value?.y ?? 0;
+    }
     return position;
 });
 
 const endPosition = computed(() => {
-    const position = props.link.value.endNode.position;
+    const position = { ...props.link.value.endNode.position };
     if (props.link.value.offsetEnd) {
         position.x += unref(props.link.value.offsetEnd).x;
         position.y += unref(props.link.value.offsetEnd).y;
     }
+    if (props.dragging?.value === props.link.value.endNode) {
+        position.x += props.dragged?.value?.x ?? 0;
+        position.y += props.dragged?.value?.y ?? 0;
+    }
     return position;
 });
 </script>