feat(数据大屏): 数据大屏支持按住空格键时使用鼠标直接移动整个大屏 #12787

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'"

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
     },

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()
     }
   }
 

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>