fix(editor): 画布滚动条出现的不准确

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) => {

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">

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;