feat: 升级vue3-sketch-ruler到2X

package.json

@@ -48,7 +48,7 @@
     "vue-i18n": "9.2.2",
     "vue-router": "4.0.12",
     "vue3-lazyload": "^0.2.5-beta",
-    "vue3-sketch-ruler": "^1.3.3",
+    "vue3-sketch-ruler": "^2.4.1",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -111,8 +111,8 @@ importers:
         specifier: ^0.2.5-beta
         version: 0.2.5-beta(@vue/compiler-sfc@3.5.16)(vue@3.5.16(typescript@4.6.3))
       vue3-sketch-ruler:
-        specifier: ^1.3.3
+        specifier: ^2.4.1
-        version: 1.3.16(vue@3.5.16(typescript@4.6.3))
+        version: 2.4.1
       vuedraggable:
         specifier: ^4.1.0
         version: 4.1.0(vue@3.5.16(typescript@4.6.3))
@@ -3946,18 +3946,8 @@ packages:
       '@vue/compiler-sfc': '>=3.0.0'
       vue: '>=3.0.0'
 
-  vue3-sketch-ruler@1.3.16:
+  vue3-sketch-ruler@2.4.1:
-    resolution: {integrity: sha512-k/TBOwbueU9eWOF7k/emsZMwtEqFk/FxG+h//TlaZ2B8RWbxhIe6hPFgggO4Jng10ARsuH4cMGAR+ZOuN4ozgg==}
+    resolution: {integrity: sha512-TMMJ5v3cqDA94DPUa1iFHBx4D+FqEqpNXwzGU310aaMDllqyvyFfZigBFryeCRO7Q7EuOD5J5Zwc++LOCHB7Jw==}
-    deprecated: This version is deprecated. Please upgrade to version 2X for better features and performance.See https://github.com/kakajun/vue3-sketch-ruler
-    hasBin: true
-    peerDependencies:
-      '@vue/composition-api': ^1.1.0
-      vue: ^2.6.0 || ^3.2.0
-    peerDependenciesMeta:
-      '@vue/composition-api':
-        optional: true
-      vue:
-        optional: true
 
   vue@3.5.16:
     resolution: {integrity: sha512-rjOV2ecxMd5SiAmof2xzh2WxntRcigkX/He4YFJ6WdRvVUrbt6DxC1Iujh10XLl8xCDRDtGKMeO3D+pRQ1PP9w==}
@@ -4323,7 +4313,7 @@ snapshots:
       '@types/node': 20.5.1
       chalk: 4.1.2
       cosmiconfig: 8.3.6(typescript@5.8.3)
-      cosmiconfig-typescript-loader: 4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@5.8.3))(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.8.3))(typescript@5.8.3)
+      cosmiconfig-typescript-loader: 4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@4.6.3))(ts-node@10.9.2(@types/node@16.18.126)(typescript@4.6.3))(typescript@5.8.3)
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       lodash.uniq: 4.5.0
@@ -5556,7 +5546,7 @@ snapshots:
 
   core-util-is@1.0.3: {}
 
-  cosmiconfig-typescript-loader@4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@5.8.3))(ts-node@10.9.2(@types/node@20.5.1)(typescript@5.8.3))(typescript@5.8.3):
+  cosmiconfig-typescript-loader@4.4.0(@types/node@20.5.1)(cosmiconfig@8.3.6(typescript@4.6.3))(ts-node@10.9.2(@types/node@16.18.126)(typescript@4.6.3))(typescript@5.8.3):
     dependencies:
       '@types/node': 20.5.1
       cosmiconfig: 8.3.6(typescript@5.8.3)
@@ -8186,9 +8176,7 @@ snapshots:
       '@vue/compiler-sfc': 3.5.16
       vue: 3.5.16(typescript@4.6.3)
 
-  vue3-sketch-ruler@1.3.16(vue@3.5.16(typescript@4.6.3)):
+  vue3-sketch-ruler@2.4.1: {}
-    optionalDependencies:
-      vue: 3.5.16(typescript@4.6.3)
 
   vue@3.5.16(typescript@4.6.3):
     dependencies:

src/plugins/customComponents.ts

@@ -1,7 +1,7 @@
 import type { App } from 'vue'
 import { GoSkeleton } from '@/components/GoSkeleton'
 import { GoLoading } from '@/components/GoLoading'
-import { SketchRule } from 'vue3-sketch-ruler'
+import  SketchRule  from 'vue3-sketch-ruler'
 
 /**
  * 全局注册自定义组件

src/store/modules/chartLayoutStore/chartLayoutStore.d.ts

@@ -31,6 +31,4 @@ export interface ChartLayoutType {
   [ChartLayoutStoreEnum.LAYER_TYPE]: LayerModeEnum
   // 当前正在加载的数量
   [ChartLayoutStoreEnum.PERCENTAGE]: number
-  // 是否重置当前画布位置
-  [ChartLayoutStoreEnum.RE_POSITION_CANVAS]: boolean
 }

src/store/modules/chartLayoutStore/chartLayoutStore.ts

@@ -49,9 +49,6 @@ export const useChartLayoutStore = defineStore({
     },
     getPercentage(): number {
       return this.percentage
-    },
-    getRePositionCanvas(): boolean {
-      return this.rePositionCanvas
     }
   },
   actions: {
@@ -65,8 +62,6 @@ export const useChartLayoutStore = defineStore({
       })
       // 存储本地
       setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state)
-      // 这里需要标记重置画布位置
-      this.rePositionCanvas = true;
       // 重新计算拖拽区域缩放比例
       if (computedScale) {
         setTimeout(() => {

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

@@ -62,10 +62,15 @@ import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
-import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 
 const { LockClosedOutlineIcon, LockOpenOutlineIcon } = icon.ionicons5
 
+const props = defineProps<{
+  reset?: () => void
+  zoomIn?: () => void
+  zoomOut?: () => void
+}>()
+
 // 全局颜色
 const designStore = useDesignStore()
 const themeColor = ref(designStore.getAppTheme)
@@ -105,8 +110,7 @@ const filterValue = ref('')
 const selectHandle = (v: number) => {
   selectInstRef.value?.blur()
   if (v === 0) {
-    chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.RE_POSITION_CANVAS, true)
+    props.reset?.()
-    chartEditStore.computedScale()
     return
   }
   chartEditStore.setScale(v / 100)

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="go-edit-range go-transition" :style="rangeStyle" @mousedown="mousedownBoxSelect($event, undefined)">
+  <div class="go-edit-range go-transition" @mousedown="mousedownBoxSelect($event, undefined)">
     <slot></slot>
     <!-- 水印 -->
     <edit-watermark></edit-watermark>
@@ -33,15 +33,6 @@ const size = computed(() => {
   }
 })
 
-const rangeStyle = computed(() => {
-  // 缩放
-  const scale = {
-    transform: `scale(${getEditCanvas.value.scale})`
-  }
-  // @ts-ignore
-  return { ...useSizeStyle(size.value), ...scale }
-})
-
 // 模态层
 const rangeModelStyle = computed(() => {
   const dragStyle = getEditCanvas.value.isCreate && { 'z-index': 99999 }
@@ -52,6 +43,7 @@ const rangeModelStyle = computed(() => {
 
 <style lang="scss" scoped>
 @include go(edit-range) {
+  height: 100%;
   position: relative;
   transform-origin: left top;
   background-size: cover;

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

@@ -2,82 +2,72 @@
   <div class="go-sketch-rule">
     <sketch-rule
       v-if="sketchRuleReDraw"
+      ref="sketchRuleRef"
       :thick="thick"
       :scale="scale"
       :width="canvasBox().width"
       :height="canvasBox().height"
-      :startX="startX"
+      :canvasWidth="width"
-      :startY="startY"
+      :canvasHeight="height"
       :lines="lines"
       :palette="paletteStyle"
+      :isShowReferLine="true"
+      :shadow="shadow"
+      @zoomchange="handleZoomChange"
     >
-    </sketch-rule>
+      <template #default>
-    <div ref="$app" class="edit-screens" @scroll="handleScroll">
+        <div ref="refSketchRuleBox" class="abc" :style="canvasStyle" @mousedown="dragCanvas">
-      <div ref="$container" class="edit-screen-container" :style="{ width: containerWidth }">
+          <slot></slot>
-        <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>
+      </template>
-    </div>
+    </sketch-rule>
-    <!-- 修复右下角白点用的 -->
-    <!-- <div v-if="designStore.getDarkTheme" class="fix-edit-screens-block"></div> -->
   </div>
 </template>
+
 <script setup lang="ts">
 import { ref, reactive, onMounted, toRefs, watch, onUnmounted, computed } from 'vue'
+import type { CSSProperties } from 'vue'
 import { listen } from 'dom-helpers'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
-import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
 import throttle from 'lodash/throttle'
 
 const chartEditStore = useChartEditStore()
-const chartLayoutStore = useChartLayoutStore()
 const designStore = useDesignStore()
 
 const thick = 20
-let prevMoveXValue = [0, 0]
-let prevMoveYValue = [0, 0]
 
-const $app = ref()
+const sketchRuleRef = ref()
-const sketchRuleReDraw = ref(true)
+const sketchRuleReDraw = ref(false)
-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(() => {
+const scale = computed(() => chartEditStore.getEditCanvas.scale)
-  return chartEditStore.getEditCanvas.scale
-})
 
-// 滚动条拖动的宽度
+// 防止 panzoom 与 store 互相触发造成循环
-const containerWidth = computed(() => {
+let isUpdatingFromPanzoom = false
-  return `${window.innerWidth * 2}px`
+watch(
-})
+  () => chartEditStore.getEditCanvas.scale,
-
+  newScale => {
-// 滚动条拖动的高度
+    if (isUpdatingFromPanzoom) {
-const containerHeight = computed(() => {
+      isUpdatingFromPanzoom = false
-  return `${height.value * 2}px`
+      return
-})
+    }
+    const panzoom = sketchRuleRef.value?.panzoomInstance
+    if (panzoom && Math.abs(panzoom.getScale() - newScale) > 0.001) {
+      panzoom.zoom(newScale)
+    }
+  }
+)
 
 // 主题
 const paletteStyle = computed(() => {
   const isDarkTheme = designStore.getDarkTheme
   return isDarkTheme
     ? {
-        bgColor: '#18181c',
+        bgColor: 'transparent',
         longfgColor: '#4d4d4d',
         shortfgColor: '#4d4d4d',
         fontColor: '#4d4d4d',
@@ -85,42 +75,29 @@ const paletteStyle = computed(() => {
         borderColor: '#18181c',
         cornerActiveColor: '#18181c'
       }
-    : {}
+    : { bgColor: 'transparent' }
 })
 
 // 颜色
 const themeColor = computed(() => {
   return designStore.getAppTheme
 })
-
+const canvasStyle = computed((): CSSProperties => {
-// 处理鼠标拖动
+  return {
-const handleWheel = (e: any) => {
+    pointerEvents: isPressSpace.value ? ('none' as const) : ('auto' as const),
-  if (e.ctrlKey || e.metaKey) {
+    width: `${width.value}px`,
-    e.preventDefault()
+    height: `${height.value}px`
-    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)
-    }
   }
-}
+})
-
+// 阴影（画布在标尺坐标系中的位置，从 thick 偏移开始）
-// 滚动条处理
+const shadow = computed(() => {
-const handleScroll = () => {
+  return {
-  if (!$app.value) return
+    x: 0,
-  const screensRect = $app.value.getBoundingClientRect()
+    y: 0,
-  const canvasRect = refSketchRuleBox.value.getBoundingClientRect()
+    width: 200,
-  // 标尺开始的刻度
+    height: 200
-  startX.value = (screensRect.left + thick - canvasRect.left) / scale.value
+  }
-  startY.value = (screensRect.top + thick - canvasRect.top) / scale.value
+})
-}
 
 // 拖拽处理
 const dragCanvas = (e: any) => {
@@ -132,30 +109,8 @@ const dragCanvas = (e: any) => {
   // @ts-ignore
   document.activeElement?.blur()
 
-  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] = prevMoveXValue
-    const [prevMoveY1, prevMoveY2] = prevMoveYValue
-
-    prevMoveXValue = [prevMoveX2, nx]
-    prevMoveYValue = [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()
-    prevMoveXValue = [0, 0]
-    prevMoveYValue = [0, 0]
     isPressSpace.value = false
   })
 }
@@ -164,7 +119,7 @@ const dragCanvas = (e: any) => {
 const canvasBox = () => {
   const layoutDom = document.getElementById('go-chart-edit-layout')
   if (layoutDom) {
-    // 此处减去滚动条的宽度和高度 
+    // 此处减去滚动条的宽度和高度
     const scrollW = 20
     return {
       height: layoutDom.clientHeight - scrollW,
@@ -183,16 +138,7 @@ const reDraw = throttle(() => {
   setTimeout(() => {
     sketchRuleReDraw.value = true
   }, 10)
-},20)
+}, 20)
-
-// 滚动居中
-const canvasPosCenter = () => {
-  const { width: containerWidth, height: containerHeight } = $container.value.getBoundingClientRect()
-  const { width, height } = canvasBox()
-
-  $app.value.scrollLeft = containerWidth / 2 - width / 2
-  $app.value.scrollTop = containerHeight / 2 - height / 2
-}
 
 // 处理主题变化
 watch(
@@ -202,21 +148,6 @@ watch(
   }
 )
 
-// // 处理标尺重制大小
-watch(
-  () => scale.value,
-  (newValue, oldValue) => {
-    if (oldValue !== newValue && chartLayoutStore.getRePositionCanvas) {
-      chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.RE_POSITION_CANVAS, false)
-    }
-    handleScroll()
-    setTimeout(() => {
-        canvasPosCenter()
-        reDraw()
-    }, 400)
-  }
-)
-
 // 处理鼠标样式
 watch(
   () => isPressSpace.value,
@@ -225,68 +156,71 @@ watch(
   }
 )
 
+const handleZoomChange = (detail: any) => {
+  isUpdatingFromPanzoom = true
+  chartEditStore.setScale(detail.scale)
+}
+
 onMounted(() => {
-  if ($app.value) {
+  // 防止 canvasBox() 拿不准尺寸
-    $app.value.addEventListener('wheel', handleWheel, { passive: false })
+  sketchRuleReDraw.value = true
-    canvasPosCenter()
+  window.onKeySpacePressHold = (isHold: boolean) => {
+    isPressSpace.value = isHold
   }
 })
 
 onUnmounted(() => {
-  if ($app.value) {
+  window.onKeySpacePressHold = undefined
-    $app.value.removeEventListener('wheel', handleWheel)
-  }
 })
 
-window.onKeySpacePressHold = (isHold: boolean) => {
+const reset = () => sketchRuleRef.value?.reset?.()
-  isPressSpace.value = isHold
+const zoomIn = () => sketchRuleRef.value?.zoomIn?.()
-}
+const zoomOut = () => sketchRuleRef.value?.zoomOut?.()
+
+defineExpose({
+  reset,
+  zoomIn,
+  zoomOut
+})
 </script>
 
 <style>
-/* 使用 SCSS 会报错，直接使用最基础的 CSS 进行修改，
-此库有计划 Vue3 版本，但是开发的时候还没发布 */
-#mb-ruler {
-  top: 0;
-  left: 0;
-}
-
 /* 横线 */
-#mb-ruler .v-container .lines .line {
+.sketch-ruler .v-container .lines .line {
   /* 最大缩放 200% */
   width: 200vw !important;
   border-top: 1px dashed v-bind('themeColor') !important;
 }
 
-#mb-ruler .v-container .indicator {
+.sketch-ruler .v-container .indicator {
   border-bottom: 1px dashed v-bind('themeColor') !important;
 }
 
 /* 竖线 */
-#mb-ruler .h-container .lines .line {
+.sketch-ruler .h-container .lines .line {
   /* 最大缩放 200% */
   height: 200vh !important;
   border-left: 1px dashed v-bind('themeColor') !important;
 }
 
-#mb-ruler .h-container .indicator {
+.sketch-ruler .h-container .indicator {
   border-left: 1px dashed v-bind('themeColor') !important;
 }
 
 /* 坐标数值背景颜色 */
-#mb-ruler .indicator .value {
+.sketch-ruler .indicator .value {
   background-color: rgba(0, 0, 0, 0);
 }
 
 /* 删除按钮 */
-#mb-ruler .line .del {
+.sketch-ruler .line .del {
   padding: 0;
   color: v-bind('themeColor');
   font-size: 26px;
   font-weight: bolder;
 }
 
-#mb-ruler .corner {
+.sketch-ruler .corner {
   border-width: 0 !important;
 }
 </style>
@@ -297,60 +231,10 @@ window.onKeySpacePressHold = (isHold: boolean) => {
   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);
-    }
-    // 修复右下角白点用的
-    &::-webkit-scrollbar-corner {
-      background-color: transparent;
-    }
-  }
-
-  .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('containerHeight');
-    top: 0;
-    left: 0;
-  }
-
   .canvas {
     position: absolute;
-    top:50%;
+    top: 0;
-    left: 50%;
+    left: 0;
-    transform-origin: 50% 0;
-    transform: translateY(-50%);
 
     &:hover {
       cursor: v-bind('cursorStyle');

src/views/chart/ContentEdit/index.vue

@@ -1,5 +1,4 @@
 <template>
-  <!-- <edit-rule></edit-rule> -->
   <content-box
     id="go-chart-edit-layout"
     :flex="true"
@@ -13,7 +12,7 @@
     @dragover="dragoverHandle"
     @dragenter="dragoverHandle"
   >
-    <edit-rule>
+    <edit-rule ref="editRuleRef">
       <!-- 画布主体 -->
       <div id="go-chart-edit-content" @contextmenu="handleContextMenu">
         <!-- 展示 -->
@@ -30,7 +29,7 @@
               <!-- 分组 -->
               <edit-group
                 v-if="item.isGroup"
-                :groupData="(item as CreateComponentGroupType)"
+                :groupData="item as CreateComponentGroupType"
                 :groupIndex="index"
               ></edit-group>
 
@@ -40,9 +39,9 @@
                 :data-id="item.id"
                 :index="index"
                 :style="{
-                ...useComponentStyle(item.attr, index),
+                  ...useComponentStyle(item.attr, index),
-                ...getBlendModeStyle(item.styles) as any
+                  ...(getBlendModeStyle(item.styles) as any),
-              }"
+                }"
                 :item="item"
                 @click="mouseClickHandle($event, item)"
                 @mousedown="mousedownHandle($event, item)"
@@ -77,13 +76,17 @@
 
     <!-- 底部控制 -->
     <template #bottom>
-      <EditBottom></EditBottom>
+      <EditBottom
+        :reset="editRuleMethods.reset"
+        :zoom-in="editRuleMethods.zoomIn"
+        :zoom-out="editRuleMethods.zoomOut"
+      ></EditBottom>
     </template>
   </content-box>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, computed, provide, watch } from 'vue'
+import { onMounted, computed, provide, watch, ref } from 'vue'
 import { chartColors } from '@/settings/chartThemes/index'
 import { MenuEnum } from '@/enums/editPageEnum'
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
@@ -181,6 +184,13 @@ const rangeStyle = computed(() => {
 // 处理全局的 vChart 主题
 useInitVChartsTheme(chartEditStore)
 
+const editRuleRef = ref()
+const editRuleMethods = {
+  reset: () => editRuleRef.value?.reset?.(),
+  zoomIn: () => editRuleRef.value?.zoomIn?.(),
+  zoomOut: () => editRuleRef.value?.zoomOut?.()
+}
+
 // 键盘事件
 onMounted(() => {
   useAddKeyboard()
@@ -197,6 +207,7 @@ onMounted(() => {
 
   @include goId('chart-edit-content') {
     overflow: hidden;
+    height: 100%;
     @extend .go-transition;
     @include fetch-theme('box-shadow');