@tmagic/editor 1.0.0-beta.2 → 1.0.0-beta.3

package/package.json

@@ -1,6 +1,7 @@
 {
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.3",
   "name": "@tmagic/editor",
+  "sideEffects": false,
   "main": "dist/tmagic-editor.umd.js",
   "module": "dist/tmagic-editor.es.js",
   "style": "dist/style.css",
@@ -27,15 +28,16 @@
   },
   "dependencies": {
     "@element-plus/icons": "0.0.11",
-    "@tmagic/core": "^1.0.0-beta.2",
-    "@tmagic/form": "^1.0.0-beta.2",
-    "@tmagic/schema": "^1.0.0-beta.2",
-    "@tmagic/stage": "^1.0.0-beta.2",
-    "@tmagic/utils": "^1.0.0-beta.2",
+    "@tmagic/core": "^1.0.0-beta.3",
+    "@tmagic/form": "^1.0.0-beta.3",
+    "@tmagic/schema": "^1.0.0-beta.3",
+    "@tmagic/stage": "^1.0.0-beta.3",
+    "@tmagic/utils": "^1.0.0-beta.3",
     "color": "^3.1.3",
     "element-plus": "^2.0.2",
     "events": "^3.3.0",
     "lodash-es": "^4.17.21",
+    "monaco-editor": "^0.32.1",
     "serialize-javascript": "^6.0.0",
     "vue": "^3.2.0"
   },

package/src/Editor.vue

@@ -55,7 +55,7 @@ import eventsService from '@editor/services/events';
 import historyService from '@editor/services/history';
 import propsService from '@editor/services/props';
 import uiService from '@editor/services/ui';
-import type { ComponentGroup, MenuBarData, Services, SideBarData } from '@editor/type';
+import type { ComponentGroup, MenuBarData, Services, SideBarData, StageRect } from '@editor/type';
 
 export default defineComponent({
   name: 'm-editor',
@@ -133,8 +133,8 @@ export default defineComponent({
       type: Function as PropType<(el: HTMLElement) => boolean | Promise<boolean>>,
     },
 
-    stageStyle: {
-      type: [String, Object] as PropType<Record<string, string | number>>,
+    stageRect: {
+      type: [String, Object] as PropType<StageRect>,
     },
   },
 
@@ -208,8 +208,8 @@ export default defineComponent({
     );
 
     watch(
-      () => props.stageStyle,
-      (stageStyle) => uiService.set('stageStyle', stageStyle),
+      () => props.stageRect,
+      (stageRect) => stageRect && uiService.set('stageRect', stageRect),
       {
         immediate: true,
       },

package/src/components/ScrollViewer.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="m-editor-scroll-viewer-container" ref="container">
+    <div ref="el" :style="style">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
+
+import { ScrollViewer } from '@editor/utils/scroll-viewer';
+
+export default defineComponent({
+  name: 'm-editor-scroll-viewer',
+
+  props: {
+    width: Number,
+    height: Number,
+    zoom: {
+      type: Number,
+      default: 1,
+    },
+  },
+
+  setup(props) {
+    const container = ref<HTMLDivElement>();
+    const el = ref<HTMLDivElement>();
+    let scrollViewer: ScrollViewer;
+
+    onMounted(() => {
+      if (!container.value || !el.value) return;
+      scrollViewer = new ScrollViewer({
+        container: container.value,
+        target: el.value,
+        zoom: props.zoom,
+      });
+    });
+
+    onUnmounted(() => {
+      scrollViewer.destroy();
+    });
+
+    watch(
+      () => props.zoom,
+      () => {
+        scrollViewer.setZoom(props.zoom);
+      },
+    );
+
+    return {
+      container,
+      el,
+
+      style: computed(
+        () => `
+        width: ${props.width}px;
+        height: ${props.height}px;
+        position: absolute;
+      `,
+      ),
+    };
+  },
+});
+</script>

package/src/layouts/CodeEditor.vue

@@ -4,28 +4,10 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
+import * as monaco from 'monaco-editor';
 import serialize from 'serialize-javascript';
 
-import { asyncLoadJs } from '@tmagic/utils';
-
-const initEditor = () => {
-  if ((globalThis as any).monaco) {
-    Promise.resolve((globalThis as any).monaco);
-  }
-
-  return asyncLoadJs(`https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs/loader.min.js`).then(() => {
-    (globalThis as any).require.config({
-      paths: { vs: `https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs` },
-    });
-    return new Promise((resolve) => {
-      (globalThis as any).require(['vs/editor/editor.main'], () => {
-        resolve((globalThis as any).monaco);
-      });
-    });
-  });
-};
-
-const toString = (v: any, language: string): string => {
+const toString = (v: string | any, language: string): string => {
   let value = '';
   if (typeof v !== 'string') {
     value = serialize(v, {
@@ -64,60 +46,63 @@ export default defineComponent({
     },
   },
 
-  emits: ['inited', 'save'],
+  emits: ['initd', 'save'],
 
   setup(props, { emit }) {
-    let vsEditor: any = null;
+    let vsEditor: monaco.editor.IStandaloneCodeEditor | null = null;
+    let vsDiffEditor: monaco.editor.IStandaloneDiffEditor | null = null;
     const values = ref('');
     const loading = ref(false);
     const codeEditor = ref<HTMLDivElement>();
 
-    const setEditorValue = (v: any, m: any) => {
+    const setEditorValue = (v: string | any, m: string | any) => {
       values.value = toString(v, props.language);
 
       if (props.type === 'diff') {
-        const originalModel = (globalThis as any).monaco.editor.createModel(values.value, 'text/javascript');
-        const modifiedModel = (globalThis as any).monaco.editor.createModel(
-          toString(m, props.language),
-          'text/javascript',
-        );
+        const originalModel = monaco.editor.createModel(values.value, 'text/javascript');
+        const modifiedModel = monaco.editor.createModel(toString(m, props.language), 'text/javascript');
 
-        return vsEditor.setModel({
+        return vsDiffEditor?.setModel({
           original: originalModel,
           modified: modifiedModel,
         });
       }
 
-      return vsEditor.setValue?.(values.value);
+      return vsEditor?.setValue(values.value);
     };
 
     const resizeHandler = () => {
       vsEditor?.layout();
+      vsDiffEditor?.layout();
     };
 
-    const getEditorValue = () => vsEditor.getValue?.() || '';
+    const getEditorValue = () =>
+      props.type === 'diff' ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue();
 
     const init = async () => {
       if (!codeEditor.value) return;
 
-      vsEditor = (globalThis as any).monaco.editor[props.type === 'diff' ? 'createDiffEditor' : 'create'](
-        codeEditor.value,
-        {
-          value: values.value,
-          language: props.language,
-          tabSize: 2,
-          theme: 'vs-dark',
-          fontFamily: 'dm, Menlo, Monaco, "Courier New", monospace',
-          fontSize: 15,
-          formatOnPaste: true,
-        },
-      );
+      const options = {
+        value: values.value,
+        language: props.language,
+        tabSize: 2,
+        theme: 'vs-dark',
+        fontFamily: 'dm, Menlo, Monaco, "Courier New", monospace',
+        fontSize: 15,
+        formatOnPaste: true,
+      };
+
+      if (props.type === 'diff') {
+        vsDiffEditor = monaco.editor.createDiffEditor(codeEditor.value, options);
+      } else {
+        vsEditor = monaco.editor.create(codeEditor.value, options);
+      }
 
       setEditorValue(props.initValues, props.modifiedValues);
 
       loading.value = false;
 
-      emit('inited', vsEditor);
+      emit('initd', vsEditor);
 
       codeEditor.value.addEventListener('keydown', (e) => {
         if (e.keyCode === 83 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)) {
@@ -127,7 +112,7 @@ export default defineComponent({
       });
 
       if (props.type !== 'diff') {
-        vsEditor.onDidBlurEditorWidget(() => {
+        vsEditor?.onDidBlurEditorWidget(() => {
           emit('save', getEditorValue());
         });
       }
@@ -138,7 +123,7 @@ export default defineComponent({
     watch(
       () => props.initValues,
       (v, preV) => {
-        if (vsEditor && v !== preV) {
+        if (v !== preV) {
           setEditorValue(props.initValues, props.modifiedValues);
         }
       },
@@ -151,17 +136,7 @@ export default defineComponent({
     onMounted(async () => {
       loading.value = true;
 
-      await initEditor();
-      if (!(globalThis as any).monaco) {
-        const interval = setInterval(() => {
-          if ((globalThis as any).monaco) {
-            clearInterval(interval);
-            init();
-          }
-        }, 300);
-      } else {
-        init();
-      }
+      init();
     });
 
     onUnmounted(() => {
@@ -174,13 +149,14 @@ export default defineComponent({
       codeEditor,
 
       getEditor() {
-        return vsEditor;
+        return vsEditor || vsDiffEditor;
       },
 
       setEditorValue,
 
       focus() {
-        vsEditor.focus();
+        vsEditor?.focus();
+        vsDiffEditor?.focus();
       },
     };
   },

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/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;