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

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/NavMenu.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="m-editor-nav-menu" :style="{ height: `${height}px` }">
-    <div v-for="key in keys" :class="`menu-${key}`" :key="key">
+    <div v-for="key in keys" :class="`menu-${key}`" :key="key" :style="`width: ${columnWidth?.[key]}px`">
       <tool-button :data="item" v-for="(item, index) in data[key]" :key="index"></tool-button>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue';
+import { computed, defineComponent, inject, PropType } from 'vue';
 
 import ToolButton from '@editor/components/ToolButton.vue';
-import { MenuBarData } from '@editor/type';
+import { GetColumnWidth, MenuBarData, Services } from '@editor/type';
 
 export default defineComponent({
   name: 'nav-menu',
@@ -29,8 +29,12 @@ export default defineComponent({
   },
 
   setup(props) {
+    const services = inject<Services>('services');
+
     return {
       keys: computed(() => Object.keys(props.data) as Array<keyof MenuBarData>),
+
+      columnWidth: computed(() => services?.uiService.get<GetColumnWidth>('columnWidth')),
     };
   },
 });

package/src/layouts/PropsPanel.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, getCurrentInstance, inject, onMounted, ref, watchEffect } from 'vue';
+import { computed, defineComponent, getCurrentInstance, inject, onMounted, ref, watchEffect } from 'vue';
 import { ElMessage } from 'element-plus';
 
 import type { FormValue, MForm } from '@tmagic/form';
@@ -30,21 +30,16 @@ export default defineComponent({
     // ts类型应该是FormConfig， 但是打包时会出错，所以暂时用any
     const curFormConfig = ref<any>([]);
     const services = inject<Services>('services');
+    const node = computed(() => services?.editorService.get<MNode | null>('node'));
 
     const init = async () => {
-      const node = services?.editorService.get<MNode | null>('node');
-
-      if (!node) {
+      if (!node.value) {
         curFormConfig.value = [];
         return;
       }
 
-      if (node.devconfig && node.style && !isNaN(+node.style.height) && !isNaN(+node.style.width)) {
-        node.devconfig.ratio = node.style.height / node.style.width || 1;
-      }
-
-      values.value = node;
-      const type = node.type || (node.items ? 'container' : 'text');
+      values.value = node.value;
+      const type = node.value.type || (node.value.items ? 'container' : 'text');
       curFormConfig.value = (await services?.propsService.getPropsConfig(type)) || [];
     };
 

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

@@ -17,7 +17,7 @@
  */
 
 import { reactive, toRaw } from 'vue';
-import { cloneDeep } from 'lodash-es';
+import { cloneDeep, mergeWith } from 'lodash-es';
 import serialize from 'serialize-javascript';
 
 import type { Id, MApp, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
@@ -31,7 +31,6 @@ import { LayerOffset, Layout } from '@editor/type';
 import {
   change2Fixed,
   COPY_STORAGE_KEY,
-  defaults,
   Fixed2Other,
   getNodeIndex,
   initPosition,
@@ -292,7 +291,11 @@ class Editor extends BaseService {
 
     let newConfig = await this.toggleFixedPosition(toRaw(config), node, this.get<MApp>('root'));
 
-    defaults(newConfig, node);
+    newConfig = mergeWith(node, newConfig, (objValue, srcValue) => {
+      if (Array.isArray(srcValue)) {
+        return srcValue;
+      }
+    });
 
     if (!newConfig.type) throw new Error('配置缺少type值');
 

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/nav-menu.scss

@@ -21,12 +21,12 @@
     align-items: center;
   }
 
-  .menu-left {
-    padding-left: 16px;
+  .menu-center {
+    justify-content: center;
   }
 
   .menu-right {
-    padding-right: 16px;
+    justify-content: flex-end;
   }
 
   .menu-item {

package/src/theme/stage.scss

@@ -2,19 +2,20 @@
   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;
+  box-sizing: content-box;
 
   &::-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',
+}