From 8d8ef55b81ecbfe8b1fa2a8ee738c7b4952369c1 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 4 Nov 2022 19:39:47 +0800
Subject: [PATCH] =?UTF-8?q?fix(editor):=20=E7=94=BB=E5=B8=83=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E6=9D=A1=E5=87=BA=E7=8E=B0=E7=9A=84=E4=B8=8D=E5=87=86?=
 =?UTF-8?q?=E7=A1=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/src/components/ScrollViewer.vue    |  9 +++++++++
 .../editor/src/layouts/workspace/Stage.vue    | 14 ++++++++-----
 packages/editor/src/utils/scroll-viewer.ts    | 20 +++++++++++++++++--
 3 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/packages/editor/src/components/ScrollViewer.vue b/packages/editor/src/components/ScrollViewer.vue
index d59dcd4b..a411db29 100644
--- a/packages/editor/src/components/ScrollViewer.vue
+++ b/packages/editor/src/components/ScrollViewer.vue
@@ -37,6 +37,10 @@ const props = withDefaults(
     wrapWidth?: number;
     wrapHeight?: number;
     zoom?: number;
+    correctionScrollSize?: {
+      width: number;
+      height: number;
+    };
   }>(),
   {
     width: 0,
@@ -44,6 +48,10 @@ const props = withDefaults(
     wrapWidth: 0,
     wrapHeight: 0,
     zoom: 1,
+    correctionScrollSize: () => ({
+      width: 0,
+      height: 0,
+    }),
   },
 );
 
@@ -69,6 +77,7 @@ onMounted(() => {
     container: container.value,
     target: el.value,
     zoom: props.zoom,
+    correctionScrollSize: props.correctionScrollSize,
   });
 
   scrollViewer.on('scroll', (data: ScrollViewerEvent) => {
diff --git a/packages/editor/src/layouts/workspace/Stage.vue b/packages/editor/src/layouts/workspace/Stage.vue
index 5069fcff..06e6b18f 100644
--- a/packages/editor/src/layouts/workspace/Stage.vue
+++ b/packages/editor/src/layouts/workspace/Stage.vue
@@ -1,5 +1,5 @@
 <template>
-  <scroll-viewer
+  <ScrollViewer
     class="m-editor-stage"
     ref="stageWrap"
     :width="stageRect?.width"
@@ -7,6 +7,10 @@
     :wrap-width="stageContainerRect?.width"
     :wrap-height="stageContainerRect?.height"
     :zoom="zoom"
+    :correction-scroll-size="{
+      width: 60,
+      height: 50,
+    }"
   >
     <div
       class="m-editor-stage-container"
@@ -16,10 +20,10 @@
       @drop="dropHandler"
       @dragover="dragoverHandler"
     ></div>
-    <teleport to="body">
-      <viewer-menu ref="menu" :is-multi-select="isMultiSelect" :stage-content-menu="stageContentMenu"></viewer-menu>
-    </teleport>
-  </scroll-viewer>
+    <Teleport to="body">
+      <ViewerMenu ref="menu" :is-multi-select="isMultiSelect" :stage-content-menu="stageContentMenu"></ViewerMenu>
+    </Teleport>
+  </ScrollViewer>
 </template>
 
 <script lang="ts" setup name="MEditorStage">
diff --git a/packages/editor/src/utils/scroll-viewer.ts b/packages/editor/src/utils/scroll-viewer.ts
index c98ff7be..f6645589 100644
--- a/packages/editor/src/utils/scroll-viewer.ts
+++ b/packages/editor/src/utils/scroll-viewer.ts
@@ -4,6 +4,10 @@ interface ScrollViewerOptions {
   container: HTMLDivElement;
   target: HTMLDivElement;
   zoom: number;
+  correctionScrollSize?: {
+    width: number;
+    height: number;
+  };
 }
 
 export class ScrollViewer extends EventEmitter {
@@ -23,6 +27,11 @@ export class ScrollViewer extends EventEmitter {
   private translateXCorrectionValue = 0;
   private translateYCorrectionValue = 0;
 
+  private correctionScrollSize = {
+    width: 0,
+    height: 0,
+  };
+
   private resizeObserver = new ResizeObserver(() => {
     this.setSize();
     this.setScrollSize();
@@ -35,6 +44,13 @@ export class ScrollViewer extends EventEmitter {
     this.target = options.target;
     this.zoom = options.zoom;
 
+    if (this.correctionScrollSize) {
+      this.correctionScrollSize = {
+        ...this.correctionScrollSize,
+        ...options.correctionScrollSize,
+      };
+    }
+
     this.container.addEventListener('wheel', this.wheelHandler, false);
 
     this.setSize();
@@ -109,9 +125,9 @@ export class ScrollViewer extends EventEmitter {
 
   private setScrollSize = () => {
     const targetRect = this.target.getBoundingClientRect();
-    this.scrollWidth = targetRect.width * this.zoom + 100;
+    this.scrollWidth = targetRect.width * this.zoom + this.correctionScrollSize.width;
     const targetMarginTop = Number(this.target.style.marginTop) || 0;
-    this.scrollHeight = (targetRect.height + targetMarginTop) * this.zoom + 100;
+    this.scrollHeight = (targetRect.height + targetMarginTop) * this.zoom + this.correctionScrollSize.height;
 
     let left: number | undefined;
     let top: number | undefined;