From 272637395f89c6958f83348bf58cc88d14c55f75 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 7 Nov 2024 18:18:03 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):=20?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F=E6=94=AF=E6=8C=81=E6=8C=89?=
 =?UTF-8?q?=E4=BD=8F=E7=A9=BA=E6=A0=BC=E9=94=AE=E6=97=B6=E4=BD=BF=E7=94=A8?=
 =?UTF-8?q?=E9=BC=A0=E6=A0=87=E7=9B=B4=E6=8E=A5=E7=A7=BB=E5=8A=A8=E6=95=B4?=
 =?UTF-8?q?=E4=B8=AA=E5=A4=A7=E5=B1=8F=20#12787?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data-visualization/canvas/CanvasCore.vue  |  1 +
 .../modules/data-visualization/compose.ts     |  5 ++
 core/core-frontend/src/utils/DeShortcutKey.ts | 11 +++-
 .../src/views/data-visualization/index.vue    | 66 ++++++++++++++++++-
 4 files changed, 80 insertions(+), 3 deletions(-)

diff --git a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
index 6857004247..8a929df9d0 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
@@ -1519,6 +1519,7 @@ defineExpose({
     :style="editStyle"
     @contextmenu="handleContextMenu"
   >
+    <slot name="canvasDragTips" />
     <drag-info v-if="dragInfoShow"></drag-info>
     <canvas-opt-bar
       v-if="dvInfo.type === 'dataV'"
diff --git a/core/core-frontend/src/store/modules/data-visualization/compose.ts b/core/core-frontend/src/store/modules/data-visualization/compose.ts
index 498bac3e55..40036b61c9 100644
--- a/core/core-frontend/src/store/modules/data-visualization/compose.ts
+++ b/core/core-frontend/src/store/modules/data-visualization/compose.ts
@@ -30,6 +30,7 @@ export const composeStore = defineStore('compose', {
       },
       editorMap: {},
       isCtrlOrCmdDown: false,
+      isSpaceDown: false,
       isShiftDown: false,
       laterIndex: null, //最后点击组件的索引
       editor: null
@@ -43,6 +44,10 @@ export const composeStore = defineStore('compose', {
     setLaterIndex(value) {
       this.laterIndex = value
     },
+    setSpaceDownStatus(value) {
+      this.isSpaceDown = value
+      console.log('====isSpaceDown=' + this.isSpaceDown)
+    },
     setIsCtrlOrCmdDownStatus(value) {
       this.isCtrlOrCmdDown = value
     },
diff --git a/core/core-frontend/src/utils/DeShortcutKey.ts b/core/core-frontend/src/utils/DeShortcutKey.ts
index 1a383f99cc..2e92d6970a 100644
--- a/core/core-frontend/src/utils/DeShortcutKey.ts
+++ b/core/core-frontend/src/utils/DeShortcutKey.ts
@@ -38,7 +38,8 @@ const ctrlKey = 17,
   dKey = 68, // 删除
   deleteKey = 46, // 删除
   macDeleteKey = 8, // 删除
-  eKey = 69 // 清空画布
+  eKey = 69, // 清空画布
+  spaceKey = 32 // 空格键
 
 export const keycodes = [8, 37, 38, 39, 40, 66, 67, 68, 69, 71, 76, 80, 83, 85, 86, 88, 89, 90]
 
@@ -118,6 +119,10 @@ export function listenGlobalKeyDown() {
       isCtrlOrCommandDown = true
       composeStore.setIsCtrlOrCmdDownStatus(true)
       releaseKeyCheck('ctrl')
+    } else if (keyCode === spaceKey) {
+      composeStore.setSpaceDownStatus(true)
+      e.preventDefault()
+      e.stopPropagation()
     } else if ((keyCode == deleteKey || keyCode == macDeleteKey) && curComponent.value) {
       deleteComponent()
     } else if (isCtrlOrCommandDown) {
@@ -138,6 +143,10 @@ export function listenGlobalKeyDown() {
     } else if (e.keyCode === shiftKey) {
       isShiftDown = true
       composeStore.setIsShiftDownStatus(false)
+    } else if (e.keyCode === spaceKey) {
+      composeStore.setSpaceDownStatus(false)
+      e.preventDefault()
+      e.stopPropagation()
     }
   }
 
diff --git a/core/core-frontend/src/views/data-visualization/index.vue b/core/core-frontend/src/views/data-visualization/index.vue
index 7f60d3b76c..a3e705ab70 100644
--- a/core/core-frontend/src/views/data-visualization/index.vue
+++ b/core/core-frontend/src/views/data-visualization/index.vue
@@ -85,7 +85,7 @@ const {
   canvasState,
   batchOptStatus
 } = storeToRefs(dvMainStore)
-const { editorMap } = storeToRefs(composeStore)
+const { editorMap, isSpaceDown } = storeToRefs(composeStore)
 const canvasOut = ref(null)
 const canvasInner = ref(null)
 const leftSidebarRef = ref(null)
@@ -93,6 +93,8 @@ const dvLayout = ref(null)
 const canvasCenterRef = ref(null)
 const mainHeight = ref(300)
 let createType = null
+let isDragging = false // 标记是否在拖动
+let startX, startY, scrollLeft, scrollTop
 const state = reactive({
   datasetTree: [],
   scaleHistory: null,
@@ -103,6 +105,39 @@ const state = reactive({
   opt: null
 })
 
+// 启用拖动
+const enableDragging = e => {
+  if (isSpaceDown.value) {
+    // 仅在空格键按下时启用拖动
+    isDragging = true
+    startX = e.pageX - canvasOut.value.wrapRef.offsetLeft
+    startY = e.pageY - canvasOut.value.wrapRef.offsetTop
+    scrollLeft = canvasOut.value.wrapRef.scrollLeft
+    scrollTop = canvasOut.value.wrapRef.scrollTop
+    e.preventDefault()
+    e.stopPropagation()
+  }
+}
+
+// 执行拖动
+const onMouseMove = e => {
+  if (!isDragging) return
+  e.preventDefault()
+  e.stopPropagation()
+  const x = e.pageX - canvasOut.value.wrapRef.offsetLeft
+  const y = e.pageY - canvasOut.value.wrapRef.offsetTop
+  const walkX = x - startX
+  const walkY = y - startY
+  canvasOut.value.wrapRef.scrollLeft = scrollLeft - walkX
+  canvasOut.value.wrapRef.scrollTop = scrollTop - walkY
+  console.log('====onMouseMove==walkX=' + walkX + ';walkY=' + walkY)
+}
+
+// 禁用拖动
+const disableDragging = () => {
+  isDragging = false
+}
+
 const contentStyle = computed(() => {
   const { width, height } = canvasStyleData.value
   if (editMode.value === 'preview') {
@@ -421,6 +456,8 @@ eventBus.on('handleNew', handleNew)
     :class="isDataEaseBi && !newWindowFromDiv && 'dataease-w-h'"
   >
     <DvToolbar />
+    <span style="color: blue">---{{ isSpaceDown }}</span>
+
     <div class="custom-dv-divider" />
     <el-container
       v-if="loadFinish"
@@ -456,7 +493,12 @@ eventBus.on('handleNew', handleNew)
           @scroll="scrollCanvas"
           class="content"
           :class="{ 'preview-content': previewStatus }"
+          @mousedown="enableDragging"
+          @mouseup="disableDragging"
+          @mousemove="onMouseMove"
+          @mouseleave="disableDragging"
         >
+          <div v-if="isSpaceDown" class="canvas-drag" :style="contentStyle"></div>
           <div
             id="canvas-dv-outer"
             ref="canvasInner"
@@ -476,7 +518,11 @@ eventBus.on('handleNew', handleNew)
                 :canvas-style-data="canvasStyleData"
                 :canvas-view-info="canvasViewInfo"
                 :canvas-id="state.canvasId"
-              ></canvas-core>
+              >
+                <template v-slot:canvasDragTips>
+                  <div class="canvas-drag-tip">按住空格可拖动画布</div>
+                </template>
+              </canvas-core>
             </div>
           </div>
         </el-scrollbar>
@@ -580,6 +626,7 @@ eventBus.on('handleNew', handleNew)
       background-color: rgba(51, 51, 51, 1);
       overflow: auto;
       .content {
+        position: relative;
         flex: 1;
         width: 100%;
         overflow: auto;
@@ -644,4 +691,19 @@ eventBus.on('handleNew', handleNew)
     color: #ebebeb;
   }
 }
+
+.canvas-drag {
+  position: absolute;
+  z-index: 1;
+  opacity: 0.3;
+  cursor: pointer;
+}
+
+.canvas-drag-tip {
+  position: absolute;
+  right: 5px;
+  bottom: -20px;
+  font-size: 12px;
+  color: rgb(169, 175, 184);
+}
 </style>