From 355c95785ab3d4cf1730bd2acdd8983902eae170 Mon Sep 17 00:00:00 2001
From: jeo young <1414294708@qq.com>
Date: Sat, 17 Dec 2022 00:56:42 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=94=BB=E5=B8=83=E5=8F=98=E5=8C=96?=
 =?UTF-8?q?=E5=90=8E=E5=A7=8B=E7=BB=88=E5=B1=85=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/chartEditStore/chartEditStore.ts  |  2 ++
 src/utils/utils.ts                            |  2 +-
 .../ContentEdit/components/EditRule/ruler.vue | 23 +++++++++++++++----
 src/views/chart/ContentEdit/index.vue         |  1 -
 types/global.d.ts                             |  3 +++
 5 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts
index 16a4eda4..75c3f8db 100644
--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/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('请先创建画布，再进行缩放')
       }
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 71368a51..51b296ae 100644
--- a/src/utils/utils.ts
+++ b/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
   }
diff --git a/src/views/chart/ContentEdit/components/EditRule/ruler.vue b/src/views/chart/ContentEdit/components/EditRule/ruler.vue
index 79668649..0fe42a01 100644
--- a/src/views/chart/ContentEdit/components/EditRule/ruler.vue
+++ b/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');
diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue
index f43d426f..e421387b 100644
--- a/src/views/chart/ContentEdit/index.vue
+++ b/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');
diff --git a/types/global.d.ts b/types/global.d.ts
index aabfe766..03b0a48e 100644
--- a/types/global.d.ts
+++ b/types/global.d.ts
@@ -11,6 +11,9 @@ interface Window {
 
   // 编辑 JSON 的存储对象
   opener: any
+
+  //当画布大小重新计算后
+  onCanvsSizecomputed:Function
 }
 
 declare type Recordable<T = any> = Record<string, T>