fix: 画布变化后始终居中

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 })
-    // 滚动居中
-    $app.value.scrollLeft = $container.value.getBoundingClientRect().width / 2 - canvasBox().width / 2
+    canvasPosCenter()
 
 })
 
+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');