From 821386a0e44b2bf70e565ac0f4d065fdba8df1e2 Mon Sep 17 00:00:00 2001
From: "Chen, Tai-Lin" <neil.chentl@gmail.com>
Date: Wed, 22 Nov 2023 23:06:52 +0800
Subject: [PATCH] quest map modify

---
 app/src/components/QuestMap.vue | 30 +++++++++++++++++++++++++-----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/app/src/components/QuestMap.vue b/app/src/components/QuestMap.vue
index a4fcc1d..1f24735 100644
--- a/app/src/components/QuestMap.vue
+++ b/app/src/components/QuestMap.vue
@@ -5,18 +5,28 @@ import { useToast } from 'vue-toastification'
 import { use, init } from 'echarts/core'
 import { GraphChart } from 'echarts/charts'
 import { SVGRenderer } from 'echarts/renderers'
-import { TitleComponent, TooltipComponent } from 'echarts/components'
+import {
+  TitleComponent,
+  TooltipComponent,
+  DataZoomComponent,
+} from 'echarts/components'
 import { DAG } from '@linux-odyssey/utils'
 import api from '../utils/api'
 import { NodeImage } from '../img/svg.js'
 
-const marginX = 100
+const marginX = 200
 const marginY = 65
 const chartContainer = ref(null)
 let chartInstance = null
 const fullwidth = window.screen.width
 
-use([GraphChart, SVGRenderer, TitleComponent, TooltipComponent])
+use([
+  GraphChart,
+  SVGRenderer,
+  TitleComponent,
+  TooltipComponent,
+  DataZoomComponent,
+])
 
 async function getQuests() {
   try {
@@ -43,6 +53,15 @@ const genOption = (nodes, edges) => ({
   tooltip: {},
   animationDurationUpdate: 1500,
   animationEasingUpdate: 'quinticInOut',
+  // dataZoom: [
+  //   {
+  //     type: 'slider', // This type means "slider data zoom" which provides a slider bar for zooming
+  //     orient: 'vertical', // This makes the data zoom component vertical
+  //     start: 0, // The starting percentage of the window out of the data extent
+  //     end: 100, // The ending percentage of the window out of the data extent
+  //     show: true,
+  //   },
+  // ],
   series: [
     {
       type: 'graph',
@@ -50,8 +69,9 @@ const genOption = (nodes, edges) => ({
       symbol: () => {
         return NodeImage
       },
-      symbolSize: [fullwidth / 10, fullwidth / 20],
-      roam: false,
+      symbolSize: [fullwidth / 10, fullwidth / 25],
+      roam: 'move',
+      zoom: 2,
       label: {
         show: true,
         fontSize: fullwidth / 90,