feat: 按住鼠标中键 可以拖拽画布

src/views/chart/ContentEdit/components/EditRule/ruler.vue

@@ -46,7 +46,7 @@ const handleWheel = (e: any) => {
         // const nextScale = parseFloat(Math.max(.2, scale.value - e.deltaY / canvasBox().height).toFixed(2))
         // chartEditStore.setScale(nextScale)
 
-        chartEditStore.setScale(e.wheelDelta >= 120 ? scale.value + 0.01 : e.wheelDelta <= 120 ? scale.value - 0.01 : scale.value)
+        chartEditStore.setScale(e.wheelDelta >= 120 ? scale.value + 0.02 : e.wheelDelta <= 120 ? scale.value - 0.02 : scale.value)
     }
 }
 
@@ -108,14 +108,15 @@ onUnmounted(() => {
 })
 
 const dragCanvas = (e: any) => {
-    if (!window.$KeyboardActive?.space) return
+    e.preventDefault()
+    e.stopPropagation()
 
+    if (e.which == 2) {
+        window.onKeySpacePressHold?.(true)
+    } else if (!window.$KeyboardActive?.space) return
     // @ts-ignore
     document.activeElement?.blur()
 
-    e.preventDefault()
-    e.stopPropagation()
-
     const startX = e.pageX
     const startY = e.pageY
 
@@ -138,6 +139,7 @@ const dragCanvas = (e: any) => {
         un2()
         prevMoveXVallue = [0, 0]
         prevMoveYVallue = [0, 0]
+        window.onKeySpacePressHold?.(false)
     })
 }
 

src/views/chart/ContentEdit/hooks/useDrag.hook.ts

@@ -62,6 +62,8 @@ export const mousedownHandleUnStop = (e: MouseEvent, item?: CreateComponentType
 
 // * 框选
 export const mousedownBoxSelect = (e: MouseEvent, item?: CreateComponentType | CreateComponentGroupType) => {
+  if (e.which == 2) return
+
   mousedownHandleUnStop(e)
 
   // 记录点击初始位置