fix: 画布变化后始终居中

src/store/modules/chartEditStore/chartEditStore.ts

@@ -928,6 +928,8 @@ export const useChartEditStore = defineStore({
           const scaleHeight = parseFloat((width / baseProportion / editCanvasHeight).toFixed(5))
           this.setScale(scaleHeight > 1 ? 1 : scaleHeight)
         }
+
+        window.onCanvsSizecomputed?.()
       } else {
         window['$message'].warning('请先创建画布，再进行缩放')
       }

src/utils/utils.ts

@@ -281,7 +281,7 @@ export const setKeyboardDressShow = (keyCode?: number) => {
   const dom = document.getElementById('keyboard-dress-show')
   if (!dom) return
   if (!keyCode) {
-    if (keyCode == 32) window.onKeySpacePressHold?.(false)
+    window.onKeySpacePressHold?.(false)
     dom.innerText = ''
     return
   }

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

@@ -63,13 +63,27 @@ watch(
     }
 )
 
+// 滚动居中
+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
+}
+
 onMounted(() => {
     $app.value.addEventListener('wheel', handleWheel, { passive: false })
-    // 滚动居中
+    canvasPosCenter()
-    $app.value.scrollLeft = $container.value.getBoundingClientRect().width / 2 - canvasBox().width / 2
 
 })
 
+window.onCanvsSizecomputed = () => {
+    setTimeout(() => {
+        canvasPosCenter()
+    }, 500)
+}
+
 const handleScroll = () => {
     const screensRect = $app.value.getBoundingClientRect()
     const canvasRect = refcanvasBox.value.getBoundingClientRect()
@@ -133,7 +147,7 @@ const canvasBox = () => {
     const layoutDom = document.getElementById('go-chart-edit-layout')
     if (layoutDom) {
         return {
-            height: layoutDom.clientHeight - 40 - 44,
+            height: layoutDom.clientHeight - 25,
             width: layoutDom.clientWidth
         }
     }
@@ -178,9 +192,10 @@ const canvasBox = () => {
 
 .canvas {
     position: absolute;
-    top: 80px;
+    top: 50%;
     left: 50%;
     transform-origin: 50% 0;
+    transform: translateY(-50%);
 
     &:hover {
         cursor: v-bind('cursorStyle');

src/views/chart/ContentEdit/index.vue

@@ -161,7 +161,6 @@ onMounted(() => {
 
   @include goId('chart-edit-content') {
     border-radius: 10px;
-    margin: 25px;
     overflow: hidden;
     @extend .go-transition;
     @include fetch-theme('box-shadow');

types/global.d.ts

@@ -11,6 +11,9 @@ interface Window {
 
   // 编辑 JSON 的存储对象
   opener: any
+
+  //当画布大小重新计算后
+  onCanvsSizecomputed:Function
 }
 
 declare type Recordable<T = any> = Record<string, T>