perf: 优化画布拖拽逻辑

src/views/chart/ContentEdit/components/EditRange/index.vue

@@ -55,6 +55,8 @@ const rangeModelStyle = computed(() => {
   position: relative;
   transform-origin: left top;
   background-size: cover;
+  border-radius: 20px;
+  overflow: hidden;
   @include fetch-border-color('hover-border-color');
   @include fetch-bg-color('background-color2');
   @include go(edit-range-model) {

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

@@ -1,6 +1,7 @@
 <template>
+  <div class="go-sketch-rule">
     <sketch-rule
-    v-if="configShow"
+      v-if="sketchRuleReDraw"
       :thick="thick"
       :scale="scale"
       :width="canvasBox().width"
@@ -8,42 +9,149 @@
       :startX="startX"
       :startY="startY"
       :lines="lines"
-  ></sketch-rule>
+      :palette="paletteStyle"
+    >
+    </sketch-rule>
+    <div ref="$app" class="edit-screens" @scroll="handleScroll">
+      <div ref="$container" class="edit-screen-container" :style="{ width: width * 2 + 'px' }">
+        <div
+          ref="refSketchRuleBox"
+          class="canvas"
+          @mousedown="dragCanvas"
+          :style="{ marginLeft: '-' + (canvasBox().width / 2 - 25) + 'px' }"
+        >
+          <div :style="{ pointerEvents: isPressSpace ? 'none' : 'auto' }">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 修复右下角白点用的 -->
+    <div v-if="designStore.getDarkTheme" class="fix-edit-screens-block"></div>
+  </div>
 </template>
-
 <script setup lang="ts">
-import { ref, toRefs, computed, watch, nextTick, onBeforeUnmount } from 'vue'
+import { ref, reactive, onMounted, toRefs, watch, onUnmounted, computed } from 'vue'
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { listen } from 'dom-helpers'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
-import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 
 const chartEditStore = useChartEditStore()
-const chartLayoutStore = useChartLayoutStore()
 const designStore = useDesignStore()
 
-const { width, height } = toRefs(chartEditStore.getEditCanvasConfig)
-const { scale, lockScale } = toRefs(chartEditStore.getEditCanvas)
-const { getLayers, getCharts, getDetails } = toRefs(chartLayoutStore)
-
-const configShow = ref(true)
-
-// x轴标尺开始的坐标数值
-const startX = -10
-// y轴标尺开始的坐标数值
-const startY = -10
-// 标尺的厚度
 const thick = 20
-// 初始化水平标尺上的参考线
+let prevMoveXVallue = [0, 0]
-const lines = {
+let prevMoveYVallue = [0, 0]
-  h: [],
+
-  v: []
+const $app = ref()
+const sketchRuleReDraw = ref(true)
+const refSketchRuleBox = ref()
+const $container = ref()
+const isPressSpace = ref(false)
+const cursorStyle = ref('auto')
+const { width, height } = toRefs(chartEditStore.getEditCanvasConfig)
+const startX = ref(0)
+const startY = ref(0)
+const lines = reactive({ h: [], v: [] })
+
+const scale = computed(() => {
+  return chartEditStore.getEditCanvas.scale
+})
+
+// 滚动条拖动的高度
+const containerWidth = computed(() => {
+  return `${height.value * 2}px`
+})
+
+// 主题
+const paletteStyle = computed(() => {
+  const isDarkTheme = designStore.getDarkTheme
+  return isDarkTheme
+    ? {
+        bgColor: '#18181c',
+        longfgColor: '#4d4d4d',
+        shortfgColor: '#4d4d4d',
+        fontColor: '#4d4d4d',
+        shadowColor: '#18181c',
+        borderColor: '#18181c',
+        cornerActiveColor: '#18181c'
+      }
+    : {}
+})
+
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
+const handleWheel = (e: any) => {
+  e.preventDefault()
+  if (e.ctrlKey || e.metaKey) {
+    let resScale = scale.value
+    // 放大(200%)
+    if (e.wheelDelta >= 0 && scale.value < 2) {
+      resScale = scale.value + 0.05
+      chartEditStore.setScale(resScale)
+      return
+    }
+    // 缩小(10%)
+    if (e.wheelDelta < 0 && scale.value > 0.1) {
+      resScale = scale.value - 0.05
+      chartEditStore.setScale(resScale)
+    }
+  }
+}
+
+const handleScroll = () => {
+  if (!$app.value) return
+  const screensRect = $app.value.getBoundingClientRect()
+  const canvasRect = refSketchRuleBox.value.getBoundingClientRect()
+  // 标尺开始的刻度
+  startX.value = (screensRect.left + thick - canvasRect.left) / scale.value
+  startY.value = (screensRect.top + thick - canvasRect.top) / scale.value
+}
+
+const dragCanvas = (e: any) => {
+  if (!window.$KeyboardActive?.space) return
+
+  // @ts-ignore
+  document.activeElement?.blur()
+
+  e.preventDefault()
+  e.stopPropagation()
+
+  const startX = e.pageX
+  const startY = e.pageY
+
+  const listenMousemove = listen(window, 'mousemove', (e: any) => {
+    const nx = e.pageX - startX
+    const ny = e.pageY - startY
+
+    const [prevMoveX1, prevMoveX2] = prevMoveXVallue
+    const [prevMoveY1, prevMoveY2] = prevMoveYVallue
+
+    prevMoveXVallue = [prevMoveX2, nx]
+    prevMoveYVallue = [prevMoveY2, ny]
+
+    $app.value.scrollLeft -=
+      prevMoveX2 > prevMoveX1 ? Math.abs(prevMoveX2 - prevMoveX1) : -Math.abs(prevMoveX2 - prevMoveX1)
+    $app.value.scrollTop -=
+      prevMoveY2 > prevMoveY1 ? Math.abs(prevMoveY2 - prevMoveY1) : -Math.abs(prevMoveY2 - prevMoveY1)
+  })
+
+  const listenMouseup = listen(window, 'mouseup', () => {
+    listenMousemove()
+    listenMouseup()
+    prevMoveXVallue = [0, 0]
+    prevMoveYVallue = [0, 0]
+  })
 }
 
 const canvasBox = () => {
   const layoutDom = document.getElementById('go-chart-edit-layout')
   if (layoutDom) {
     return {
-      height: layoutDom.clientHeight - 40,
+      height: layoutDom.clientHeight - 40 - 44,
       width: layoutDom.clientWidth
     }
   }
@@ -53,53 +161,61 @@ const canvasBox = () => {
   }
 }
 
-// 颜色
+// 在位置不动的情况下重绘标尺
-const themeColor = computed(() => {
+const reDraw = () => {
-  return designStore.getAppTheme
+  sketchRuleReDraw.value = false
-})
+  setTimeout(() => {
+    sketchRuleReDraw.value = true
+  }, 10)
+}
+
+watch(
+  () => designStore.getDarkTheme,
+  () => {
+    reDraw()
+  }
+)
 
 // 处理标尺重制大小
-const ruleChangeHandle = () => {
-  configShow.value = false
-  setTimeout(() => {
-    configShow.value = true
-  })
-}
-
-const ruleChangeHandleTimeOut = () => {
-  if (lockScale.value) {
-    setTimeout(() => {
-      ruleChangeHandle()
-    }, 500)
-  }
-}
-
 watch(
   () => scale.value,
-  () => ruleChangeHandle()
+  (newValue, oldValue) => {
+    if (oldValue !== newValue) {
+      handleScroll()
+      chartEditStore.setScale(newValue)
+    }
+  }
 )
 
 watch(
-  () => getLayers.value,
+  () => isPressSpace.value,
-  () => ruleChangeHandleTimeOut()
+  newValue => {
+    cursorStyle.value = newValue ? 'grab' : 'auto'
+  }
 )
 
-watch(
+onMounted(() => {
-  () => getCharts.value,
+  if ($app.value) {
-  () => ruleChangeHandleTimeOut()
+    $app.value.addEventListener('wheel', handleWheel, { passive: false })
-)
+    // 滚动居中
+    $app.value.scrollLeft = $container.value.getBoundingClientRect().width / 2 - canvasBox().width / 2
+  }
+})
 
-watch(
+onUnmounted(() => {
-  () => getDetails.value,
+  if ($app.value) {
-  () => ruleChangeHandleTimeOut()
+    $app.value.removeEventListener('wheel', handleWheel)
-)
+  }
+})
 
+window.onKeySpacePressHold = (isHold: boolean) => {
+  isPressSpace.value = isHold
+}
 </script>
 
 <style>
 /* 使用 SCSS 会报错，直接使用最基础的 CSS 进行修改，
 此库有计划 Vue3 版本，但是开发的时候还没发布 */
-
 #mb-ruler {
   top: 0;
   left: 0;
@@ -142,3 +258,69 @@ watch(
   border-width: 0 !important;
 }
 </style>
+
+<style lang="scss" scoped>
+@include go('sketch-rule') {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+
+  .edit-screens {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    user-select: none;
+    padding-bottom: 0px;
+
+    /* firefox */
+    scrollbar-color: rgba(144, 146, 152, 0.3) transparent;
+    scrollbar-width: thin;
+
+    /* chrome */
+    &::-webkit-scrollbar,
+    &::-webkit-scrollbar-track-piece {
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar {
+      width: 7px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 5px;
+      background-color: rgba(144, 146, 152, 0.3);
+    }
+  }
+
+  .fix-edit-screens-block {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 10px;
+    height: 10px;
+    background-color: $--color-dark-bg-1;
+  }
+
+  .edit-screen-container {
+    position: absolute;
+    height: v-bind('containerWidth');
+  }
+
+  .canvas {
+    position: absolute;
+    top: 80px;
+    left: 50%;
+    transform-origin: 50% 0;
+
+    &:hover {
+      cursor: v-bind('cursorStyle');
+    }
+
+    &:active {
+      cursor: crosshair;
+    }
+  }
+}
+</style>

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

@@ -1,193 +0,0 @@
-<template>
-    <div :style="{ position: 'relative', overflow: 'hidden', width: '100%', height: '100%' }">
-        <sketch-rule :thick="thick" :scale="scale" :width="canvasBox().width" :height="canvasBox().height"
-            :startX="startX" :startY="startY" :lines="lines"
-            :palette="{ bgColor: '#18181c', longfgColor: '#4d4d4d', shortfgColor: '#4d4d4d', fontColor: '#4d4d4d', shadowColor: '#18181c', borderColor: '#18181c', cornerActiveColor: '#18181c' }">
-        </sketch-rule>
-        <div ref="$app" class="screens" @scroll="handleScroll">
-            <div ref="$container" class="screenContainer" :style="{ width: screenContainerWidth + 'px' }">
-                <div id="refcanvasBox" ref="refcanvasBox" class="canvas" @mousedown="dragCanvas"
-                    :style="{ marginLeft: '-' + (canvasBox().width / 2 - 25) + 'px' }">
-                    <div :style="{ pointerEvents: isPressSpace ? 'none' : 'auto' }">
-                        <slot></slot>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-<script setup lang="ts">
-import { ref, reactive, onMounted, toRefs, watch, onUnmounted, computed } from 'vue'
-import { listen } from "dom-helpers"
-
-import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-
-const chartEditStore = useChartEditStore()
-
-const thick = 20
-const screenContainerWidth = 5000
-var prevMoveXVallue = [0, 0]
-var prevMoveYVallue = [0, 0]
-
-const $app = ref()
-const refcanvasBox = ref()
-const $container = ref()
-
-const scale = computed(() => {
-    return chartEditStore.getEditCanvas.scale
-})
-const startX = ref(0)
-const startY = ref(0)
-const lines = reactive({ h: [], v: [] })
-
-const handleWheel = (e: any) => {
-    e.preventDefault()
-    if (e.ctrlKey || e.metaKey) {
-        // 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)
-    }
-}
-
-const isPressSpace = ref(false)
-const cursorStyle = ref('auto')
-
-window.onKeySpacePressHold = (isHold: boolean) => {
-    isPressSpace.value = isHold
-}
-watch(
-    () => isPressSpace.value,
-    newValue => {
-        cursorStyle.value = newValue ? 'grab' : 'auto'
-    }
-)
-
-onMounted(() => {
-    $app.value.addEventListener('wheel', handleWheel, { passive: false })
-    // 滚动居中
-    $app.value.scrollLeft = $container.value.getBoundingClientRect().width / 2 - canvasBox().width / 2
-
-})
-
-const handleScroll = () => {
-    const screensRect = $app.value.getBoundingClientRect()
-    const canvasRect = refcanvasBox.value.getBoundingClientRect()
-
-    // 标尺开始的刻度
-    startX.value = (screensRect.left + thick - canvasRect.left) / scale.value
-    startY.value = (screensRect.top + thick - canvasRect.top) / scale.value
-}
-// 处理标尺重制大小
-watch(
-    () => scale.value,
-    (newValue, oldValue) => {
-        if (oldValue !== newValue) {
-            handleScroll()
-            chartEditStore.setScale(newValue)
-        }
-    }
-)
-
-onUnmounted(() => {
-    $app.value.removeEventListener('wheel', handleWheel)
-})
-
-const dragCanvas = (e: any) => {
-    if (!window.$KeyboardActive?.space) return
-
-    // @ts-ignore
-    document.activeElement?.blur()
-
-    e.preventDefault()
-    e.stopPropagation()
-
-    const startX = e.pageX
-    const startY = e.pageY
-
-    const un1 = listen(window, "mousemove", (e: any) => {
-
-        const nx = e.pageX - startX
-        const ny = e.pageY - startY
-
-        const [prevMoveX1, prevMoveX2] = prevMoveXVallue
-        const [prevMoveY1, prevMoveY2] = prevMoveYVallue
-
-        prevMoveXVallue = [prevMoveX2, nx]
-        prevMoveYVallue = [prevMoveY2, ny]
-
-        $app.value.scrollLeft -= prevMoveX2 > prevMoveX1 ? Math.abs(prevMoveX2 - prevMoveX1) : -Math.abs(prevMoveX2 - prevMoveX1)
-        $app.value.scrollTop -= prevMoveY2 > prevMoveY1 ? Math.abs(prevMoveY2 - prevMoveY1) : -Math.abs(prevMoveY2 - prevMoveY1)
-    })
-    const un2 = listen(window, "mouseup", () => {
-        un1()
-        un2()
-        prevMoveXVallue = [0, 0]
-        prevMoveYVallue = [0, 0]
-    })
-}
-
-const { width, height } = toRefs(chartEditStore.getEditCanvasConfig)
-
-const canvasBox = () => {
-    const layoutDom = document.getElementById('go-chart-edit-layout')
-    if (layoutDom) {
-        return {
-            height: layoutDom.clientHeight - 40 - 44,
-            width: layoutDom.clientWidth
-        }
-    }
-    return {
-        width: width.value,
-        height: height.value
-    }
-}
-</script>
-<style lang="scss" scoped>
-.screens {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    user-select: none;
-
-    /* firefox */
-    scrollbar-color: rgba(144, 146, 152, .3) transparent;
-    scrollbar-width: thin;
-
-    /* chrome */
-    &::-webkit-scrollbar,
-    &::-webkit-scrollbar-track-piece {
-        background-color: transparent;
-    }
-
-    &::-webkit-scrollbar {
-        width: 7px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        border-radius: 5px;
-        background-color: rgba(144, 146, 152, .3);
-    }
-}
-
-.screenContainer {
-    position: absolute;
-    height: 3000px;
-}
-
-.canvas {
-    position: absolute;
-    top: 80px;
-    left: 50%;
-    transform-origin: 50% 0;
-
-    &:hover {
-        cursor: v-bind('cursorStyle');
-    }
-
-    &:active {
-        cursor: crosshair;
-    }
-}
-</style>

src/views/chart/ContentEdit/index.vue

@@ -1,43 +1,74 @@
 <template>
   <!-- <edit-rule></edit-rule> -->
-  <content-box id="go-chart-edit-layout" :flex="true" :showTop="false" :showBottom="true" :depth="1" :xScroll="true" :disabledScroll="true"
+  <content-box
-    @mousedown="mousedownHandleUnStop" @drop="dragHandle" @dragover="dragoverHandle" @dragenter="dragoverHandle">
+    id="go-chart-edit-layout"
-    <ruler>
+    :flex="true"
+    :showTop="false"
+    :showBottom="true"
+    :depth="1"
+    :xScroll="true"
+    :disabledScroll="true"
+    @mousedown="mousedownHandleUnStop"
+    @drop="dragHandle"
+    @dragover="dragoverHandle"
+    @dragenter="dragoverHandle"
+  >
+    <edit-rule>
       <!-- 画布主体 -->
       <div id="go-chart-edit-content" @contextmenu="handleContextMenu">
         <!-- 展示 -->
         <edit-range>
           <!-- 滤镜预览 -->
-          <div :style="{
+          <div
+            :style="{
               ...getFilterStyle(chartEditStore.getEditCanvasConfig),
               ...rangeStyle
-          }">
+            }"
+          >
             <!-- 图表 -->
             <div v-for="(item, index) in chartEditStore.getComponentList" :key="item.id">
               <!-- 分组 -->
-              <edit-group v-if="item.isGroup" :groupData="(item as CreateComponentGroupType)"
+              <edit-group
-                :groupIndex="index"></edit-group>
+                v-if="item.isGroup"
+                :groupData="(item as CreateComponentGroupType)"
+                :groupIndex="index"
+              ></edit-group>
 
               <!-- 单组件 -->
-              <edit-shape-box v-else :data-id="item.id" :index="index" :style="{
+              <edit-shape-box
+                v-else
+                :data-id="item.id"
+                :index="index"
+                :style="{
                 ...useComponentStyle(item.attr, index),
                 ...getBlendModeStyle(item.styles) as any
-              }" :item="item" @click="mouseClickHandle($event, item)" @mousedown="mousedownHandle($event, item)"
+              }"
-                @mouseenter="mouseenterHandle($event, item)" @mouseleave="mouseleaveHandle($event, item)"
+                :item="item"
-                @contextmenu="handleContextMenu($event, item, optionsHandle)">
+                @click="mouseClickHandle($event, item)"
-                <component class="edit-content-chart" :class="animationsClass(item.styles.animations)"
+                @mousedown="mousedownHandle($event, item)"
-                  :is="item.chartConfig.chartKey" :chartConfig="item" :themeSetting="themeSetting"
+                @mouseenter="mouseenterHandle($event, item)"
-                  :themeColor="themeColor" :style="{
+                @mouseleave="mouseleaveHandle($event, item)"
+                @contextmenu="handleContextMenu($event, item, optionsHandle)"
+              >
+                <component
+                  class="edit-content-chart"
+                  :class="animationsClass(item.styles.animations)"
+                  :is="item.chartConfig.chartKey"
+                  :chartConfig="item"
+                  :themeSetting="themeSetting"
+                  :themeColor="themeColor"
+                  :style="{
                     ...useSizeStyle(item.attr),
                     ...getFilterStyle(item.styles),
                     ...getTransformStyle(item.styles)
-                  }"></component>
+                  }"
+                ></component>
               </edit-shape-box>
             </div>
           </div>
         </edit-range>
       </div>
-    </ruler>
+    </edit-rule>
 
     <!-- 工具栏 -->
     <template #aside>
@@ -69,8 +100,7 @@ import { useComponentStyle, useSizeStyle } from './hooks/useStyle.hook'
 import { ContentBox } from '../ContentBox/index'
 import { EditGroup } from './components/EditGroup'
 import { EditRange } from './components/EditRange'
-// import { EditRule } from './components/EditRule'
+import { EditRule } from './components/EditRule'
-import Ruler from './components/EditRule/ruler.vue'
 import { EditBottom } from './components/EditBottom'
 import { EditShapeBox } from './components/EditShapeBox'
 import { EditTools } from './components/EditTools'
@@ -161,7 +191,6 @@ onMounted(() => {
 
   @include goId('chart-edit-content') {
     border-radius: 10px;
-    margin: 25px;
     overflow: hidden;
     @extend .go-transition;
     @include fetch-theme('box-shadow');