Add dragging in SubSkillView

Lauritz-Tieste · Lauritz-Tieste · commit d0c7cc14902a · 2024-08-28T20:32:04.000+02:00
diff --git a/pages/skill-tree/[id]/index.vue b/pages/skill-tree/[id]/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <main class="relative h-screen-main grid place-items-center">
+  <main class="relative h-screen-main grid place-items-center select-none">
     <Head>
       <Title>Sub Skill Tree - {{ subTreeName }}</Title>
     </Head>
@@ -17,6 +17,8 @@
       v-else-if="nodes && nodes.length"
       class="map w-screen h-fit m-auto max-w-[100vw] h-screen-main overflow-scroll"
       ref="mainRef"
+      @mousedown="startDrag"
+      :class="{ 'cursor-grabbing': isDragging }"
     >
       <svg :width="mapWidth" :height="mapHeight" :viewBox="mapViewBox">
         <g v-if="setupComplete && selectedNode.id == ''">
@@ -69,7 +71,7 @@
 
 <script lang="ts">
 import { useI18n } from "vue-i18n";
-import type { Ref } from "vue";
+import { useSubSkillTree, getSubSkillTree, createPathwaysForTree } from "~/composables/skilltree";
 
 export default {
   head: {
@@ -359,6 +361,50 @@ export default {
       { immediate: true, deep: true }
     );
 
+    // ! ======================================================= Dragging
+    const isDragging = ref(false);
+    const startX = ref(0);
+    const startY = ref(0);
+    const scrollLeft = ref(0);
+    const scrollTop = ref(0);
+
+    const startDrag = (event: MouseEvent) => {
+      if (event.button !== 0) return;
+
+      const target = event.target as HTMLElement;
+      if (target.tagName === "foreignObject" || target.tagName === "path") return;
+
+      isDragging.value = true;
+      startX.value = event.pageX - mainRef.value!.offsetLeft;
+      startY.value = event.pageY - mainRef.value!.offsetTop;
+      scrollLeft.value = mainRef.value!.scrollLeft;
+      scrollTop.value = mainRef.value!.scrollTop;
+      document.addEventListener("mousemove", drag);
+      document.addEventListener("mouseup", stopDrag);
+    };
+
+    const drag = (event: MouseEvent) => {
+      if (!isDragging.value) return;
+      event.preventDefault();
+      const x = event.pageX - mainRef.value!.offsetLeft;
+      const y = event.pageY - mainRef.value!.offsetTop;
+      const walkX = x - startX.value;
+      const walkY = y - startY.value;
+
+      mainRef.value!.scrollLeft = scrollLeft.value - walkX;
+      mainRef.value!.scrollTop = scrollTop.value - walkY;
+
+      if (event.clientX <= 0 || event.clientX >= window.innerWidth || event.clientY <= 0 || event.clientY >= window.innerHeight) {
+        stopDrag();
+      }
+    };
+
+    const stopDrag = () => {
+      isDragging.value = false;
+      document.removeEventListener("mousemove", drag);
+      document.removeEventListener("mouseup", stopDrag);
+    };
+
     return {
       setupComplete,
       loading,
@@ -387,6 +433,9 @@ export default {
       t,
       subTreeName,
       breadcrumbs,
+
+      isDragging,
+      startDrag,
     };
   },
 };
