feat: add dragging

app/src/components/QuestMap.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue'
-import { IQuest } from '@linux-odyssey/models'
 import { useRouter } from 'vue-router'
 import { useToast } from 'vue-toastification'
 import { DAG } from '@linux-odyssey/utils'
-import api from '../utils/api'
+import { getQuests } from '../utils/api'
 import useUserProfile from '../store/userProfile'
 
 const store = useUserProfile()
@@ -14,22 +13,12 @@ const toast = useToast()
 const svgWidth = ref(window.innerWidth)
 const svgHeight = ref(window.innerHeight)
 
-const marginX = 80
-const marginY = 80
+const marginX = 100
+const marginY = 100
 
 const nodeWidth = 150
 const nodeHeight = 50
 
-async function getQuests() {
-  try {
-    const res = await api.get<IQuest[]>('/quests')
-    return res.data
-  } catch (err) {
-    console.error(err)
-    throw err
-  }
-}
-
 type Node = {
   id: string
   title: string
@@ -49,6 +38,28 @@ const graphData = ref<{ nodes: Node[]; edges: Edge[] }>({
   edges: [],
 })
 
+const isDragging = ref(false)
+const dragStartX = ref(0)
+const dragStartY = ref(0)
+const offsetX = ref(0)
+const offsetY = ref(0)
+
+function startDrag(event: MouseEvent) {
+  isDragging.value = true
+  dragStartX.value = event.clientX - offsetX.value
+  dragStartY.value = event.clientY - offsetY.value
+}
+
+function drag(event: MouseEvent) {
+  if (!isDragging.value) return
+  offsetX.value = event.clientX - dragStartX.value
+  offsetY.value = event.clientY - dragStartY.value
+}
+
+function endDrag() {
+  isDragging.value = false
+}
+
 async function computeGraphData() {
   if (!store.progress) return
 
@@ -112,7 +123,16 @@ watch(() => store.progress, computeGraphData, { deep: true })
     >
       踏上你的Linux冒險之旅吧！
     </h1>
-    <svg :width="svgWidth" :height="svgHeight" class="absolute">
+    <svg
+      :width="svgWidth"
+      :height="svgHeight"
+      class="absolute"
+      @mousedown="startDrag"
+      @mousemove="drag"
+      @mouseup="endDrag"
+      @mouseleave="endDrag"
+    >
+      <g :transform="`translate(${offsetX}, ${offsetY})`">
         <!-- <g
           v-for="edge in graphData.edges"
           :key="`${edge.source.id}-${edge.target.id}`"
@@ -154,6 +174,7 @@ watch(() => store.progress, computeGraphData, { deep: true })
             {{ node.title }}
           </text>
         </g>
+      </g>
     </svg>
   </div>
 </template>

app/src/utils/api.ts

@@ -43,3 +43,8 @@ export async function getActiveSession(
   })
   return res.data
 }
+
+export async function getQuests(): Promise<IQuest[]> {
+  const res = await api.get<IQuest[]>('/quests')
+  return res.data
+}