fix(editor): 画布大小与stageRect配置不相符

packages/editor/src/components/ScrollViewer.vue

@@ -55,7 +55,7 @@ export default defineComponent({
       style: computed(
         () => `
         width: ${props.width}px;
-        height: ${(props.height || 0) - 40}px;
+        height: ${props.height}px;
         position: absolute;
         margin-top: 30px;
       `,

packages/editor/src/services/ui.ts

@@ -155,10 +155,16 @@ class Ui extends BaseService {
     const { stageRect, stageContainerRect } = state;
     const { height, width } = stageContainerRect;
     if (!width || !height) return 1;
-    if (width > stageRect.width && height > stageRect.height) {
+
+    // 30为标尺的大小
+    const stageWidth = stageRect.width + 30;
+    const stageHeight = stageRect.height + 30;
+
+    if (width > stageWidth && height > stageHeight) {
       return 1;
     }
-    return Math.min((width - 100) / stageRect.width || 1, (height - 100) / stageRect.height || 1);
+    // 60/80是为了不要让画布太过去贴住四周（这样好看些）
+    return Math.min((width - 60) / stageWidth || 1, (height - 80) / stageHeight || 1);
   }
 }
 

packages/editor/src/theme/stage.scss

@@ -13,9 +13,9 @@
   height: 100%;
   z-index: 0;
   position: relative;
-  border: 1px solid $--border-color;
   transition: transform 0.3s;
   box-sizing: content-box;
+  box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
 
   &::-webkit-scrollbar {
     width: 0 !important;