feat(editor): stage overlay 支持放大缩小

packages/editor/src/hooks/use-stage.ts

@@ -45,6 +45,7 @@ export const useStage = (stageOptions: StageOptions) => {
     updateDragEl: stageOptions.updateDragEl,
     guidesOptions: stageOptions.guidesOptions,
     disabledMultiSelect: stageOptions.disabledMultiSelect,
+    disabledRule: stageOptions.disabledRule,
   });
 
   watch(

packages/editor/src/layouts/workspace/viewer/StageOverlay.vue

@@ -1,9 +1,19 @@
 <template>
-  <div v-if="stageOverlayVisible" class="m-editor-stage-overlay" @click="closeOverlayHandler">
+  <div v-if="stageOverlayVisible" class="m-editor-stage-overlay">
-    <TMagicIcon class="m-editor-stage-overlay-close" :size="'20'" @click="closeOverlayHandler"
+    <TMagicIcon class="m-editor-stage-overlay-close" :size="'30'" @click="closeOverlayHandler"
       ><CloseBold
     /></TMagicIcon>
-    <div ref="stageOverlay" class="m-editor-stage-overlay-container" :style="style" @click.stop></div>
+
+    <ScrollViewer
+      class="m-editor-stage"
+      :width="wrapWidth"
+      :height="wrapHeight"
+      :wrap-width="columnWidth.center"
+      :wrap-height="frameworkRect.height"
+      :zoom="zoom"
+    >
+      <div ref="stageOverlay" class="m-editor-stage-container" :style="style"></div>
+    </ScrollViewer>
   </div>
 </template>
 
@@ -13,10 +23,11 @@ import { CloseBold } from '@element-plus/icons-vue';
 
 import { TMagicIcon } from '@tmagic/design';
 
+import ScrollViewer from '@editor/components/ScrollViewer.vue';
 import { useServices } from '@editor/hooks/use-services';
 import type { StageOptions } from '@editor/type';
 
-const { stageOverlayService, editorService } = useServices();
+const { stageOverlayService, editorService, uiService } = useServices();
 
 const stageOptions = inject<StageOptions>('stageOptions');
 
@@ -26,10 +37,12 @@ const stageOverlayVisible = computed(() => stageOverlayService.get('stageOverlay
 const wrapWidth = computed(() => stageOverlayService.get('wrapWidth'));
 const wrapHeight = computed(() => stageOverlayService.get('wrapHeight'));
 const stage = computed(() => editorService.get('stage'));
+const zoom = computed(() => uiService.get('zoom'));
+const columnWidth = computed(() => uiService.get('columnWidth'));
+const frameworkRect = computed(() => uiService.get('frameworkRect'));
 
 const style = computed(() => ({
-  width: `${wrapWidth.value}px`,
+  transform: `scale(${zoom.value})`,
-  height: `${wrapHeight.value}px`,
 }));
 
 watch(stage, (stage) => {
@@ -43,6 +56,12 @@ watch(stage, (stage) => {
   }
 });
 
+watch(zoom, (zoom) => {
+  const stage = stageOverlayService.get('stage');
+  if (!stage || !zoom) return;
+  stage.setZoom(zoom);
+});
+
 watch(stageOverlayEl, (stageOverlay) => {
   const subStage = stageOverlayService.createStage(stageOptions);
   stageOverlayService.set('stage', subStage);

packages/editor/src/services/stageOverlay.ts

@@ -97,9 +97,9 @@ class StageOverlay extends BaseService {
   public createStage(stageOptions: StageOptions = {}) {
     return useStage({
       ...stageOptions,
-      zoom: 1,
       runtimeUrl: '',
       autoScrollIntoView: false,
+      disabledRule: true,
       render: async (stage: StageCore) => {
         this.copyDocumentElement();
 

packages/editor/src/theme/stage.scss

@@ -35,22 +35,15 @@
   width: 100%;
   height: 100%;
   background-color: #fff;
-  display: flex;
   z-index: 20;
-  overflow: auto;
-}
-
-.m-editor-stage-overlay-container {
-  position: relative;
-  flex-shrink: 0;
-  margin: auto;
-  box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
 }
 
 .m-editor-stage-overlay-close.tmagic-design-icon {
   position: fixed;
   right: 20px;
   top: 10px;
+  cursor: pointer;
+  z-index: 1;
 }
 
 .m-editor-stage-float-button {
@@ -66,8 +59,10 @@
   background-color: #ffffff;
   transition: background-color 0.2s;
   color: rgba(0, 0, 0, 0.88);
-  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+  box-shadow:
-    0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+    0 6px 16px 0 rgba(0, 0, 0, 0.08),
+    0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 9px 28px 8px rgba(0, 0, 0, 0.05);
 }
 
 .m-editor-node-list-menu {

packages/editor/src/type.ts

@@ -164,6 +164,7 @@ export interface StageOptions {
   renderType?: RenderType;
   guidesOptions?: Partial<GuidesOptions>;
   disabledMultiSelect?: boolean;
+  disabledRule?: boolean;
   zoom?: number;
 }