@tmagic/editor 1.0.0-beta.1 → 1.0.0-beta.4

package/src/layouts/workspace/Stage.vue

@@ -1,15 +1,21 @@
 <template>
-  <div class="m-editor-stage">
+  <scroll-viewer
+    class="m-editor-stage"
+    ref="stageWrap"
+    :width="stageRect?.width"
+    :height="stageRect?.height"
+    :zoom="zoom"
+  >
     <div
       class="m-editor-stage-container"
       ref="stageContainer"
-      :style="stageStyle"
       @contextmenu="contextmenuHandler"
+      :style="`transform: scale(${zoom})`"
     ></div>
     <teleport to="body">
       <viewer-menu ref="menu" :style="menuStyle"></viewer-menu>
     </teleport>
-  </div>
+  </scroll-viewer>
 </template>
 
 <script lang="ts">
@@ -17,6 +23,7 @@ import {
   computed,
   defineComponent,
   inject,
+  nextTick,
   onMounted,
   onUnmounted,
   PropType,
@@ -31,7 +38,8 @@ import type { MApp, MNode, MPage } from '@tmagic/schema';
 import type { MoveableOptions, Runtime, SortEventData, UpdateEventData } from '@tmagic/stage';
 import StageCore from '@tmagic/stage';
 
-import type { Services } from '@editor/type';
+import ScrollViewer from '@editor/components/ScrollViewer.vue';
+import type { Services, StageRect } from '@editor/type';
 
 import ViewerMenu from './ViewerMenu.vue';
 
@@ -79,6 +87,7 @@ export default defineComponent({
 
   components: {
     ViewerMenu,
+    ScrollViewer,
   },
 
   props: {
@@ -88,26 +97,6 @@ export default defineComponent({
 
     runtimeUrl: String,
 
-    root: {
-      type: Object as PropType<MApp>,
-    },
-
-    page: {
-      type: Object as PropType<MPage>,
-    },
-
-    node: {
-      type: Object as PropType<MNode>,
-    },
-
-    uiSelectMode: {
-      type: Boolean,
-    },
-
-    zoom: {
-      type: Number,
-    },
-
     canSelect: {
       type: Function as PropType<(el: HTMLElement) => boolean | Promise<boolean>>,
       default: (el: HTMLElement) => Boolean(el.id),
@@ -125,12 +114,16 @@ export default defineComponent({
 
   setup(props, { emit }) {
     const services = inject<Services>('services');
+
+    const stageWrap = ref<InstanceType<typeof ScrollViewer>>();
     const stageContainer = ref<HTMLDivElement>();
 
-    const stageStyle = computed(() => ({
-      ...services?.uiService.get<Record<string, string | number>>('stageStyle'),
-      transform: `scale(${props.zoom}) translate3d(0, -50%, 0)`,
-    }));
+    const stageRect = computed(() => services?.uiService.get<StageRect>('stageRect'));
+    const uiSelectMode = computed(() => services?.uiService.get<boolean>('uiSelectMode'));
+    const root = computed(() => services?.editorService.get<MApp>('root'));
+    const page = computed(() => services?.editorService.get<MPage>('page'));
+    const zoom = computed(() => services?.uiService.get<number>('zoom'));
+    const node = computed(() => services?.editorService.get<MNode>('node'));
 
     let stage: StageCore | null = null;
     let runtime: Runtime | null = null;
@@ -139,16 +132,16 @@ export default defineComponent({
       if (stage) return;
 
       if (!stageContainer.value) return;
-      if (!(props.runtimeUrl || props.render) || !props.root) return;
+      if (!(props.runtimeUrl || props.render) || !root.value) return;
 
       stage = new StageCore({
         render: props.render,
         runtimeUrl: props.runtimeUrl,
-        zoom: props.zoom,
+        zoom: zoom.value,
         canSelect: (el, stop) => {
           const elCanSelect = props.canSelect(el);
           // 在组件联动过程中不能再往下选择，返回并触发 ui-select
-          if (props.uiSelectMode && elCanSelect) {
+          if (uiSelectMode.value && elCanSelect) {
             document.dispatchEvent(new CustomEvent('ui-select', { detail: el }));
             return stop();
           }
@@ -176,45 +169,64 @@ export default defineComponent({
         services?.uiService.set('showGuides', true);
       });
 
-      if (!props.node?.id) return;
+      if (!node.value?.id) return;
       stage?.on('runtime-ready', (rt) => {
         runtime = rt;
         // toRaw返回的值是一个引用而非快照，需要cloneDeep
-        props.root && runtime?.updateRootConfig(cloneDeep(toRaw(props.root)));
-        props.page?.id && runtime?.updatePageId?.(props.page.id);
+        root.value && runtime?.updateRootConfig(cloneDeep(toRaw(root.value)));
+        page.value?.id && runtime?.updatePageId?.(page.value.id);
         setTimeout(() => {
-          props.node && stage?.select(toRaw(props.node.id));
+          node.value && stage?.select(toRaw(node.value.id));
         });
       });
     });
 
-    watch(
-      () => props.zoom,
-      (zoom) => {
-        if (!stage || !zoom) return;
-        stage?.setZoom(zoom);
-      },
-    );
+    watch(zoom, (zoom) => {
+      if (!stage || !zoom) return;
+      stage.setZoom(zoom);
+    });
+
+    watch(root, (root) => {
+      if (runtime && root) {
+        runtime.updateRootConfig(cloneDeep(toRaw(root)));
+      }
+    });
 
     watch(
-      () => props.root,
-      (root) => {
-        if (runtime && root) {
-          runtime.updateRootConfig(cloneDeep(toRaw(root)));
-        }
+      () => node.value?.id,
+      (id) => {
+        nextTick(() => {
+          // 等待相关dom变更完成后，再select，适用大多数场景
+          id && stage?.select(id);
+        });
       },
     );
 
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const { contentRect } of entries) {
+        services?.uiService.set('stageContainerRect', {
+          width: contentRect.width,
+          height: contentRect.height,
+        });
+      }
+    });
+
+    onMounted(() => {
+      stageWrap.value?.container && resizeObserver.observe(stageWrap.value.container);
+    });
+
     onUnmounted(() => {
       stage?.destroy();
+      resizeObserver.disconnect();
       services?.editorService.set('stage', null);
     });
 
     return {
-      stageStyle,
-      ...useMenu(),
-
+      stageWrap,
       stageContainer,
+      stageRect,
+      zoom,
+      ...useMenu(),
     };
   },
 });

package/src/layouts/workspace/Workspace.vue

@@ -4,11 +4,6 @@
       :key="page?.id"
       :runtime-url="runtimeUrl"
       :render="render"
-      :ui-select-mode="uiSelectMode"
-      :root="root"
-      :page="page"
-      :node="node"
-      :zoom="zoom"
       :moveable-options="moveableOptions"
       :can-select="canSelect"
       @select="selectHandler"
@@ -26,9 +21,9 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, nextTick, PropType, watch } from 'vue';
+import { computed, defineComponent, inject, PropType } from 'vue';
 
-import type { MApp, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
+import type { MComponent, MContainer, MPage } from '@tmagic/schema';
 import type { MoveableOptions, SortEventData } from '@tmagic/stage';
 import StageCore from '@tmagic/stage';
 
@@ -63,23 +58,9 @@ export default defineComponent({
 
   setup() {
     const services = inject<Services>('services');
-    const node = computed(() => services?.editorService.get<MNode>('node'));
-    const stage = computed(() => services?.editorService.get<StageCore>('stage'));
-
-    watch([() => node.value?.id, stage], ([id, stage]) => {
-      nextTick(() => {
-        // 等待相关dom变更完成后，再select，适用大多数场景
-        id && stage?.select(id);
-      });
-    });
 
     return {
-      uiSelectMode: computed(() => services?.uiService.get<boolean>('uiSelectMode')),
-      root: computed(() => services?.editorService.get<MApp>('root')),
       page: computed(() => services?.editorService.get<MPage>('page')),
-      zoom: computed(() => services?.uiService.get<number>('zoom')),
-
-      node,
 
       selectHandler(el: HTMLElement) {
         services?.editorService.select(el.id);

package/src/services/editor.ts

@@ -289,8 +289,6 @@ class Editor extends BaseService {
     if (!info.node) throw new Error(`获取不到id为${config.id}的节点`);
 
     const node = cloneDeep(toRaw(info.node));
-    const { parent } = info;
-    if (!parent) throw new Error('获取不到父级节点');
 
     let newConfig = await this.toggleFixedPosition(toRaw(config), node, this.get<MApp>('root'));
 
@@ -303,6 +301,9 @@ class Editor extends BaseService {
       return newConfig;
     }
 
+    const { parent } = info;
+    if (!parent) throw new Error('获取不到父级节点');
+
     const parentNodeItems = parent.items;
     const index = getNodeIndex(newConfig, parent);
 

package/src/services/ui.ts

@@ -21,7 +21,7 @@ import { reactive, toRaw } from 'vue';
 import type StageCore from '@tmagic/stage';
 
 import editorService from '@editor/services/editor';
-import { GetColumnWidth, SetColumnWidth, UiState } from '@editor/type';
+import type { GetColumnWidth, SetColumnWidth, StageRect, UiState } from '@editor/type';
 
 import BaseService from './BaseService';
 
@@ -29,7 +29,14 @@ const state = reactive<UiState>({
   uiSelectMode: false,
   showSrc: false,
   zoom: 1,
-  stageStyle: {},
+  stageContainerRect: {
+    width: 0,
+    height: 0,
+  },
+  stageRect: {
+    width: 375,
+    height: 817,
+  },
   columnWidth: {
     left: 310,
     center: globalThis.document.body.clientWidth - 310 - 400,
@@ -57,6 +64,11 @@ class Ui extends BaseService {
       return;
     }
 
+    if (name === 'stageRect') {
+      this.setStageRect(value as unknown as StageRect);
+      return;
+    }
+
     if (name === 'showGuides') {
       mask?.showGuides(value as unknown as boolean);
     }
@@ -66,6 +78,10 @@ class Ui extends BaseService {
     }
 
     (state as any)[name] = value;
+
+    if (name === 'stageContainerRect') {
+      state.zoom = this.calcZoom();
+    }
   }
 
   public get<T>(name: keyof typeof state): T {
@@ -94,6 +110,24 @@ class Ui extends BaseService {
 
     state.columnWidth = columnWidth;
   }
+
+  private setStageRect(value: StageRect) {
+    state.stageRect = {
+      ...state.stageRect,
+      ...value,
+    };
+    state.zoom = this.calcZoom();
+  }
+
+  private calcZoom() {
+    const { stageRect, stageContainerRect } = state;
+    const { height, width } = stageContainerRect;
+    if (!width || !height) return 1;
+    if (width > stageRect.width && height > stageRect.height) {
+      return 1;
+    }
+    return Math.min((width - 100) / stageRect.width || 1, (height - 100) / stageRect.height || 1);
+  }
 }
 
 export type UiService = Ui;

package/src/theme/stage.scss

@@ -2,19 +2,19 @@
   position: relative;
   width: 100%;
   height: calc(100% - $--page-bar-height);
-  overflow: auto;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .m-editor-stage-container {
-  transition: transform 0.3s;
-  transform-origin: center -50%;
+  width: 100%;
+  height: 100%;
   z-index: 0;
-  top: 50%;
-  margin: 0 auto;
   position: relative;
-  width: 375px;
-  height: 80%;
   border: 1px solid $--border-color;
+  transition: transform 0.3s;
 
   &::-webkit-scrollbar {
     width: 0 !important;

package/src/type.ts

@@ -16,11 +16,11 @@
  * limitations under the License.
  */
 
-import { Component } from 'vue';
+import type { Component } from 'vue';
 
-import { FormConfig } from '@tmagic/form';
-import { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
-import StageCore from '@tmagic/stage';
+import type { FormConfig } from '@tmagic/form';
+import type { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
+import type StageCore from '@tmagic/stage';
 
 import type { ComponentListService } from '@editor/services/componentList';
 import type { EditorService } from '@editor/services/editor';
@@ -75,6 +75,11 @@ export interface GetColumnWidth {
   right: number;
 }
 
+export interface StageRect {
+  width: number;
+  height: number;
+}
+
 export interface UiState {
   /** 当前点击画布是否触发选中，true: 不触发，false: 触发，默认为false */
   uiSelectMode: boolean;
@@ -82,8 +87,10 @@ export interface UiState {
   showSrc: boolean;
   /** 画布显示放大倍数，默认为 1 */
   zoom: number;
-  /** 画布顶层div的样式，可用于改变画布的大小 */
-  stageStyle: Record<string, string | number>;
+  /** 画布容器的宽高 */
+  stageContainerRect: StageRect;
+  /** 画布顶层div的宽高，可用于改变画布的大小 */
+  stageRect: StageRect;
   /** 编辑器列布局每一列的宽度，分为左中右三列 */
   columnWidth: GetColumnWidth;
   /** 是否显示画布参考线，true: 显示，false: 不显示，默认为true */
@@ -234,3 +241,7 @@ export enum Layout {
   RELATIVE = 'relative',
   ABSOLUTE = 'absolute',
 }
+
+export enum Keys {
+  ESCAPE = 'Space',
+}

package/src/utils/scroll-viewer.ts

@@ -0,0 +1,213 @@
+import { Keys } from '@editor/type';
+
+interface ScrollViewerOptions {
+  container: HTMLDivElement;
+  target: HTMLDivElement;
+  zoom: number;
+}
+
+export class ScrollViewer {
+  private enter = false;
+  private targetEnter = false;
+  private keydown = false;
+  private container: HTMLDivElement;
+  private target: HTMLDivElement;
+  private zoom = 1;
+
+  private scrollLeft = 0;
+  private scrollTop = 0;
+
+  private x = 0;
+  private y = 0;
+
+  private resizeObserver = new ResizeObserver((entries) => {
+    for (const { contentRect } of entries) {
+      const { width, height } = contentRect;
+      const targetRect = this.target.getBoundingClientRect();
+      const targetWidth = targetRect.width * this.zoom;
+      const targetHeight = targetRect.height * this.zoom;
+
+      if (targetWidth < width) {
+        (this.target as any)._left = 0;
+      }
+      if (targetHeight < height) {
+        (this.target as any)._top = 0;
+      }
+
+      this.scroll();
+    }
+  });
+
+  constructor(options: ScrollViewerOptions) {
+    this.container = options.container;
+    this.target = options.target;
+    this.zoom = options.zoom;
+
+    globalThis.addEventListener('keydown', this.keydownHandler);
+    globalThis.addEventListener('keyup', this.keyupHandler);
+
+    this.container.addEventListener('mouseenter', this.mouseEnterHandler);
+    this.container.addEventListener('mouseleave', this.mouseLeaveHandler);
+    this.target.addEventListener('mouseenter', this.targetMouseEnterHandler);
+    this.target.addEventListener('mouseleave', this.targetMouseLeaveHandler);
+
+    this.container.addEventListener('wheel', this.wheelHandler);
+
+    this.resizeObserver.observe(this.container);
+  }
+
+  public destroy() {
+    this.resizeObserver.disconnect();
+
+    this.container.removeEventListener('mouseenter', this.mouseEnterHandler);
+    this.container.removeEventListener('mouseleave', this.mouseLeaveHandler);
+    this.target.removeEventListener('mouseenter', this.targetMouseEnterHandler);
+    this.target.removeEventListener('mouseleave', this.targetMouseLeaveHandler);
+    globalThis.removeEventListener('keydown', this.keydownHandler);
+    globalThis.removeEventListener('keyup', this.keyupHandler);
+  }
+
+  public setZoom(zoom: number) {
+    this.zoom = zoom;
+  }
+
+  private scroll() {
+    const scrollLeft = (this.target as any)._left;
+    const scrollTop = (this.target as any)._top;
+
+    this.target.style.transform = `translate(${scrollLeft}px, ${scrollTop}px)`;
+  }
+
+  private removeHandler() {
+    this.target.style.cursor = '';
+    this.target.removeEventListener('mousedown', this.mousedownHandler);
+    document.removeEventListener('mousemove', this.mousemoveHandler);
+    document.removeEventListener('mouseup', this.mouseupHandler);
+  }
+
+  private wheelHandler = (event: WheelEvent) => {
+    if (this.targetEnter) return;
+
+    const { deltaX, deltaY, currentTarget } = event;
+
+    if (currentTarget !== this.container) return;
+
+    this.setScrollOffset(deltaX, deltaY);
+    this.scroll();
+    this.scrollLeft = (this.target as any)._left;
+    this.scrollTop = (this.target as any)._top;
+  };
+
+  private mouseEnterHandler = () => {
+    this.enter = true;
+  };
+
+  private mouseLeaveHandler = () => {
+    this.enter = false;
+  };
+
+  private targetMouseEnterHandler = () => {
+    this.targetEnter = true;
+  };
+
+  private targetMouseLeaveHandler = () => {
+    this.targetEnter = false;
+  };
+
+  private mousedownHandler = (event: MouseEvent) => {
+    if (!this.keydown) return;
+
+    event.stopImmediatePropagation();
+    event.stopPropagation();
+
+    this.target.style.cursor = 'grabbing';
+
+    this.x = event.clientX;
+    this.y = event.clientY;
+
+    document.addEventListener('mousemove', this.mousemoveHandler);
+    document.addEventListener('mouseup', this.mouseupHandler);
+  };
+
+  private mouseupHandler = () => {
+    this.x = 0;
+    this.y = 0;
+
+    this.scrollLeft = (this.target as any)._left;
+    this.scrollTop = (this.target as any)._top;
+    this.removeHandler();
+  };
+
+  private mousemoveHandler = (event: MouseEvent) => {
+    event.stopImmediatePropagation();
+    event.stopPropagation();
+
+    const deltaX = event.clientX - this.x;
+    const deltaY = event.clientY - this.y;
+
+    this.setScrollOffset(deltaX, deltaY);
+    this.scroll();
+  };
+
+  private keydownHandler = (event: KeyboardEvent) => {
+    if (event.code === Keys.ESCAPE && this.enter) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      event.stopPropagation();
+    } else if (this.keydown) return;
+
+    this.keydown = true;
+
+    event.preventDefault();
+
+    this.target.style.cursor = 'grab';
+    this.container.addEventListener('mousedown', this.mousedownHandler);
+  };
+
+  private keyupHandler = (event: KeyboardEvent) => {
+    if (event.code !== Keys.ESCAPE || !this.keydown) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    event.stopPropagation();
+
+    this.keydown = false;
+
+    event.preventDefault();
+
+    this.removeHandler();
+  };
+
+  private setScrollOffset(deltaX: number, deltaY: number) {
+    const { width, height } = this.container.getBoundingClientRect();
+    const targetRect = this.target.getBoundingClientRect();
+
+    const targetWidth = targetRect.width * this.zoom;
+    const targetHeight = targetRect.height * this.zoom;
+
+    let y = 0;
+
+    if (targetHeight > height) {
+      if (deltaY > 0) {
+        y = this.scrollTop + Math.min(targetHeight - height - this.scrollTop, deltaY);
+      } else {
+        y = this.scrollTop + Math.max(-(targetHeight - height + this.scrollTop), deltaY);
+      }
+    }
+
+    let x = 0;
+
+    if (targetWidth > width) {
+      if (deltaX > 0) {
+        x = this.scrollLeft + Math.min(targetWidth - width - this.scrollLeft, deltaX);
+      } else {
+        x = this.scrollLeft + Math.max(-(targetWidth - width + this.scrollLeft), deltaX);
+      }
+    }
+
+    (this.target as any)._left = x;
+    (this.target as any)._top = y;
+  }
+}