feat: 新增预览拖拽

src/styles/common/mixins/mixins.scss

@@ -9,6 +9,12 @@
   }
 }
 
+@mixin dark {
+  [data-theme='dark'] {
+    @content;
+  }
+}
+
 @mixin goId($block) {
   $B: $namespace + '-' + $block;
   ##{$B} {

src/styles/pages/index.scss

@@ -7,3 +7,9 @@
 .amap-copyright {
   opacity: 0 !important;
 }
+
+[data-theme='dark'] {
+  body {
+    background-color: #18181c;
+  }
+}

src/views/preview/hooks/useScale.hook.ts

@@ -23,16 +23,27 @@ export const useScale = (localStorageInfo: ChartEditStorageType) => {
           e.preventDefault()
           e.stopPropagation()
           removeEvent()
-          const fitDom = document.querySelector(".go-preview.fit") as HTMLElement
+          const transform = previewRef.value?.style.transform
-          if (fitDom) fitDom.style.overflow = 'auto'
-          const transform = previewRef.value.style.transform
-          // 使用正则解析 scale(1, 1) 中的两个数值
           const regRes = transform.match(/scale\((\d+\.?\d*)*/) as RegExpMatchArray
           const width = regRes[1]
+          const previewBoxDom = document.querySelector('.go-preview') as HTMLElement
+          const entityDom = document.querySelector('.go-preview-entity') as HTMLElement
+          if (previewBoxDom) {
+            previewBoxDom.style.overflow = 'unset'
+            previewBoxDom.style.position = 'absolute'
+            previewBoxDom.style.top = '10px'
+            previewBoxDom.style.left = '20px'
+          }
+          if (entityDom) {
+            entityDom.style.overflow = 'unset'
+          }
+
           if (e.wheelDelta > 0) {
-            previewRef.value.style.transform = `scale(${parseFloat(Number(width).toFixed(2)) + 0.1})`
+            const resNum = parseFloat(Number(width).toFixed(2))
+            previewRef.value.style.transform = `scale(${resNum > 5 ? 5 : resNum + 0.1})`
           } else {
-            previewRef.value.style.transform = `scale(${parseFloat(Number(width).toFixed(2)) - 0.1})`
+            const resNum = parseFloat(Number(width).toFixed(2))
+            previewRef.value.style.transform = `scale(${resNum < 0.2 ? 0.2 : resNum - 0.1})`
           }
         }
       },

src/views/preview/suspenseIndex.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="`go-preview ${chartEditStore.editCanvasConfig.previewScaleType}`">
+  <div :class="`go-preview ${chartEditStore.editCanvasConfig.previewScaleType}`" @mousedown="dragCanvas">
     <template v-if="showEntity">
       <!-- 实体区域 -->
       <div ref="entityRef" class="go-preview-entity">
@@ -30,7 +30,7 @@
 import { computed } from 'vue'
 import { PreviewRenderList } from './components/PreviewRenderList'
 import { getFilterStyle, setTitle } from '@/utils'
-import { getEditCanvasConfigStyle, getSessionStorageInfo, keyRecordHandle } from './utils'
+import { getEditCanvasConfigStyle, getSessionStorageInfo, keyRecordHandle, dragCanvas } from './utils'
 import { useComInstall } from './hooks/useComInstall.hook'
 import { useScale } from './hooks/useScale.hook'
 import { useStore } from './hooks/useStore.hook'

src/views/preview/utils/drag.ts

@@ -0,0 +1,55 @@
+import { listen } from 'dom-helpers'
+import throttle from 'lodash/throttle'
+
+let prevMoveXValue = [0, 0]
+let prevMoveYValue = [0, 0]
+
+// 拖拽处理
+export const dragCanvas = (e: MouseEvent) => {
+  const previewBoxDom = document.querySelector('.go-preview') as HTMLElement
+  if (!previewBoxDom || previewBoxDom.style.position !== 'absolute') return
+  if (!window.$KeyboardActive?.space) return
+
+  e.preventDefault()
+  e.stopPropagation()
+  // @ts-ignore
+  document.activeElement?.blur()
+  const startX = e.screenX
+  const startY = e.screenY
+
+  const listenMousemove = listen(
+    window,
+    'mousemove',
+    throttle((moveEvent: MouseEvent) => {
+      const nx = moveEvent.screenX - startX
+      const ny = moveEvent.screenY - startY
+
+      const [prevMoveX1, prevMoveX2] = prevMoveXValue
+      const [prevMoveY1, prevMoveY2] = prevMoveYValue
+
+      prevMoveXValue = [prevMoveX2, nx]
+      prevMoveYValue = [prevMoveY2, ny]
+
+      // 去除小数部分
+      if (previewBoxDom) {
+        const oldLeft = previewBoxDom.style.left ? Number(previewBoxDom.style.left.split('px')[0]) : 0
+        const oldTop = previewBoxDom.style.top ? Number(previewBoxDom.style.top.split('px')[0]) : 0
+        previewBoxDom.style.left =
+          oldLeft +
+          (prevMoveX2 > prevMoveX1 ? Math.abs(prevMoveX2 - prevMoveX1) : -Math.abs(prevMoveX2 - prevMoveX1)) +
+          'px'
+        previewBoxDom.style.top =
+          oldTop +
+          (prevMoveY2 > prevMoveY1 ? Math.abs(prevMoveY2 - prevMoveY1) : -Math.abs(prevMoveY2 - prevMoveY1)) +
+          'px'
+      }
+    }, 20)
+  )
+
+  const listenMouseup = listen(window, 'mouseup', () => {
+    prevMoveXValue = [0, 0]
+    prevMoveYValue = [0, 0]
+    listenMousemove()
+    listenMouseup()
+  })
+}

src/views/preview/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './style'
 export * from './storage'
 export * from './keyboard'
+export * from './drag'

src/views/preview/utils/keyboard.ts

@@ -12,8 +12,16 @@ export const keyRecordHandle = () => {
 
     if ([17, 32].includes(keyCode) && window.$KeyboardActive) {
       switch (keyCode) {
-        case 17: window.$KeyboardActive.ctrl = true; break
+        case 17:
-        case 32: window.$KeyboardActive.space = true; break
+          window.$KeyboardActive.ctrl = true
+          break
+        case 32:
+          window.$KeyboardActive.space = true
+          const previewBoxDom = document.querySelector('.go-preview') as HTMLElement
+          if (previewBoxDom && previewBoxDom.style.position === 'absolute') {
+            previewBoxDom.style.cursor = 'move'
+          }
+          break
       }
     }
   }
@@ -24,9 +32,18 @@ export const keyRecordHandle = () => {
 
     if ([17, 32].includes(keyCode) && window.$KeyboardActive) {
       switch (keyCode) {
-        case 17: window.$KeyboardActive.ctrl = false; break
+        case 17:
-        case 32: window.$KeyboardActive.space = false; break
+          window.$KeyboardActive.ctrl = false
+          break
+        case 32:
+          window.$KeyboardActive.space = false
+          break
       }
     }
+
+    const previewBoxDom = document.querySelector('.go-preview') as HTMLElement
+    if (previewBoxDom) {
+      previewBoxDom.style.cursor = 'default'
+    }
   }
 }