@tmagic/editor 1.0.0-rc.1 → 1.0.0-rc.10

package/src/layouts/CodeEditor.vue

@@ -94,11 +94,7 @@ export default defineComponent({
       const options = {
         value: values.value,
         language: props.language,
-        tabSize: 2,
         theme: 'vs-dark',
-        fontFamily: 'dm, Menlo, Monaco, "Courier New", monospace',
-        fontSize: 14,
-        formatOnPaste: true,
         ...props.options,
       };
 
@@ -117,6 +113,7 @@ export default defineComponent({
       codeEditor.value.addEventListener('keydown', (e) => {
         if (e.keyCode === 83 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)) {
           e.preventDefault();
+          e.stopPropagation();
           emit('save', getEditorValue());
         }
       });

package/src/layouts/Framework.vue

@@ -2,7 +2,13 @@
   <div class="m-editor">
     <slot name="nav" class="m-editor-nav-menu"></slot>
 
-    <magic-code-editor v-if="showSrc" class="m-editor-content" :init-values="root" @save="saveCode"></magic-code-editor>
+    <magic-code-editor
+      v-if="showSrc"
+      class="m-editor-content"
+      :init-values="root"
+      :options="codeOptions"
+      @save="saveCode"
+    ></magic-code-editor>
 
     <div class="m-editor-content" v-else>
       <div class="m-editor-framework-left" :style="`width: ${columnWidth?.left}px`">
@@ -48,6 +54,13 @@ export default defineComponent({
     Resizer,
   },
 
+  props: {
+    codeOptions: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
   setup() {
     const { editorService, uiService } = inject<Services>('services') || {};
 

package/src/layouts/PropsPanel.vue

@@ -1,7 +1,7 @@
 <template>
   <m-form
     :class="`m-editor-props-panel ${propsPanelSize}`"
-    popper-class="m-editor-props-panel-popper"
+    :popper-class="`m-editor-props-panel-popper ${propsPanelSize}`"
     ref="configForm"
     :size="propsPanelSize"
     :init-values="values"

package/src/layouts/sidebar/LayerMenu.vue

@@ -22,6 +22,8 @@ export default defineComponent({
     const isPage = computed(() => node.value?.type === NodeType.PAGE);
     const componentList = computed(() => services?.componentListService.getList() || []);
 
+    const layerContentMenu = inject<MenuItem[]>('layerContentMenu', []);
+
     const createMenuItems = (group: ComponentGroup): MenuButton[] =>
       group.items.map((component) => ({
         text: component.text,
@@ -101,6 +103,7 @@ export default defineComponent({
             node.value && services?.editorService.remove(node.value);
           },
         },
+        ...layerContentMenu,
       ]),
 
       show(e: MouseEvent) {

package/src/layouts/sidebar/TabPane.vue

@@ -30,7 +30,7 @@ export default defineComponent({
 
   props: {
     data: {
-      type: Object as PropType<SideItem>,
+      type: [Object, String] as PropType<SideItem>,
     },
   },
 

package/src/layouts/workspace/Stage.vue

@@ -28,7 +28,6 @@ import {
   markRaw,
   onMounted,
   onUnmounted,
-  PropType,
   ref,
   toRaw,
   watch,
@@ -37,11 +36,11 @@ import {
 import { cloneDeep } from 'lodash-es';
 
 import type { MApp, MNode, MPage } from '@tmagic/schema';
-import type { MoveableOptions, Runtime, SortEventData, UpdateEventData } from '@tmagic/stage';
+import type { Runtime, SortEventData, UpdateEventData } from '@tmagic/stage';
 import StageCore from '@tmagic/stage';
 
 import ScrollViewer from '@editor/components/ScrollViewer.vue';
-import { Layout, Services, StageRect } from '@editor/type';
+import { Layout, Services, StageOptions, StageRect } from '@editor/type';
 
 import ViewerMenu from './ViewerMenu.vue';
 
@@ -53,28 +52,9 @@ export default defineComponent({
     ScrollViewer,
   },
 
-  props: {
-    render: {
-      type: Function as PropType<() => HTMLDivElement>,
-    },
-
-    runtimeUrl: String,
-
-    canSelect: {
-      type: Function as PropType<(el: HTMLElement) => boolean | Promise<boolean>>,
-      default: (el: HTMLElement) => Boolean(el.id),
-    },
-
-    moveableOptions: {
-      type: [Object, Function] as PropType<MoveableOptions | ((core?: StageCore) => MoveableOptions)>,
-      default: () => (core?: StageCore) => ({
-        container: core?.renderer?.contentWindow?.document.getElementById('app'),
-      }),
-    },
-  },
-
-  setup(props) {
+  setup() {
     const services = inject<Services>('services');
+    const stageOptions = inject<StageOptions>('stageOptions');
 
     const stageWrap = ref<InstanceType<typeof ScrollViewer>>();
     const stageContainer = ref<HTMLDivElement>();
@@ -94,14 +74,15 @@ export default defineComponent({
       if (stage) return;
 
       if (!stageContainer.value) return;
-      if (!(props.runtimeUrl || props.render) || !root.value) return;
+      if (!(stageOptions?.runtimeUrl || stageOptions?.render) || !root.value) return;
 
       stage = new StageCore({
-        render: props.render,
-        runtimeUrl: props.runtimeUrl,
+        render: stageOptions.render,
+        runtimeUrl: stageOptions.runtimeUrl,
         zoom: zoom.value,
+        autoScrollIntoView: stageOptions.autoScrollIntoView,
         canSelect: (el, event, stop) => {
-          const elCanSelect = props.canSelect(el);
+          const elCanSelect = stageOptions.canSelect(el);
           // 在组件联动过程中不能再往下选择，返回并触发 ui-select
           if (uiSelectMode.value && elCanSelect && event.type === 'mousedown') {
             document.dispatchEvent(new CustomEvent('ui-select', { detail: el }));
@@ -110,7 +91,8 @@ export default defineComponent({
 
           return elCanSelect;
         },
-        moveableOptions: props.moveableOptions,
+        moveableOptions: stageOptions.moveableOptions,
+        updateDragEl: stageOptions.updateDragEl,
       });
 
       services?.editorService.set('stage', markRaw(stage));
@@ -209,6 +191,7 @@ export default defineComponent({
           const { scrollTop, scrollLeft } = stage.mask;
           if (layout === Layout.ABSOLUTE) {
             config.style = {
+              ...(config.style || {}),
               position: 'absolute',
               top: e.clientY - containerRect.top + scrollTop,
               left: e.clientX - containerRect.left + scrollLeft,

package/src/layouts/workspace/ViewerMenu.vue

@@ -27,6 +27,8 @@ export default defineComponent({
     const parent = computed(() => editorService?.get('parent'));
     const isPage = computed(() => node.value?.type === NodeType.PAGE);
 
+    const stageContentMenu = inject<MenuItem[]>('stageContentMenu', []);
+
     onMounted(() => {
       const data = globalThis.localStorage.getItem(COPY_STORAGE_KEY);
       canPaste.value = data !== 'undefined' && !!data;
@@ -69,8 +71,20 @@ export default defineComponent({
           text: '粘贴',
           display: () => canPaste.value,
           handler: () => {
-            const top = menu.value?.$el.offsetTop || 0;
-            const left = menu.value?.$el.offsetLeft || 0;
+            const stage = editorService?.get<StageCore>('stage');
+
+            const rect = menu.value?.$el.getBoundingClientRect();
+            const parentRect = stage?.container?.getBoundingClientRect();
+            let left = (rect?.left || 0) - (parentRect?.left || 0);
+            let top = (rect?.top || 0) - (parentRect?.top || 0);
+
+            if (node.value?.items && stage) {
+              const parentEl = stage.renderer.contentWindow?.document.getElementById(`${node.value.id}`);
+              const parentElRect = parentEl?.getBoundingClientRect();
+              left = left - (parentElRect?.left || 0);
+              top = top - (parentElRect?.top || 0);
+            }
+
             editorService?.paste({ left, top });
           },
         },
@@ -138,6 +152,7 @@ export default defineComponent({
             editorService?.get<StageCore>('stage').clearGuides();
           },
         },
+        ...stageContentMenu,
       ]),
 
       show(e: MouseEvent) {

package/src/layouts/workspace/Workspace.vue

@@ -1,12 +1,6 @@
 <template>
   <div class="m-editor-workspace" tabindex="1" ref="workspace">
-    <magic-stage
-      :key="page?.id"
-      :runtime-url="runtimeUrl"
-      :render="render"
-      :moveable-options="moveableOptions"
-      :can-select="canSelect"
-    ></magic-stage>
+    <magic-stage :key="page?.id"></magic-stage>
 
     <slot name="workspace-content"></slot>
 
@@ -18,12 +12,10 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, onMounted, onUnmounted, PropType, ref } from 'vue';
+import { computed, defineComponent, inject, onMounted, onUnmounted, ref } from 'vue';
 import KeyController from 'keycon';
 
 import type { MNode, MPage } from '@tmagic/schema';
-import type { MoveableOptions } from '@tmagic/stage';
-import StageCore from '@tmagic/stage';
 import { isPage } from '@tmagic/utils';
 
 import type { Services } from '@editor/type';
@@ -39,22 +31,6 @@ export default defineComponent({
     MagicStage,
   },
 
-  props: {
-    runtimeUrl: String,
-
-    render: {
-      type: Function as PropType<() => HTMLDivElement>,
-    },
-
-    moveableOptions: {
-      type: [Object, Function] as PropType<MoveableOptions | ((core?: StageCore) => MoveableOptions)>,
-    },
-
-    canSelect: {
-      type: Function as PropType<(el: HTMLElement) => boolean | Promise<boolean>>,
-    },
-  },
-
   setup() {
     const services = inject<Services>('services');
     const workspace = ref<HTMLDivElement>();
@@ -65,8 +41,13 @@ export default defineComponent({
       workspace.value?.focus();
     };
 
+    const mouseleaveHandler = () => {
+      workspace.value?.blur();
+    };
+
     onMounted(() => {
       workspace.value?.addEventListener('mouseenter', mouseenterHandler);
+      workspace.value?.addEventListener('mouseleave', mouseleaveHandler);
 
       keycon = new KeyController(workspace.value);
 
@@ -80,6 +61,11 @@ export default defineComponent({
           if (!node.value || isPage(node.value)) return;
           services?.editorService.remove(node.value);
         })
+        .keyup('backspace', (e) => {
+          e.inputEvent.preventDefault();
+          if (!node.value || isPage(node.value)) return;
+          services?.editorService.remove(node.value);
+        })
         .keydown([ctrl, 'c'], (e) => {
           e.inputEvent.preventDefault();
           node.value && services?.editorService.copy(node.value);
@@ -146,14 +132,23 @@ export default defineComponent({
           e.inputEvent.preventDefault();
           services?.uiService.zoom(0.1);
         })
+        .keydown([ctrl, 'numpadplus'], (e) => {
+          e.inputEvent.preventDefault();
+          services?.uiService.zoom(0.1);
+        })
         .keydown([ctrl, '-'], (e) => {
           e.inputEvent.preventDefault();
           services?.uiService.zoom(-0.1);
+        })
+        .keydown([ctrl, 'numpad-'], (e) => {
+          e.inputEvent.preventDefault();
+          services?.uiService.zoom(-0.1);
         });
     });
 
     onUnmounted(() => {
       workspace.value?.removeEventListener('mouseenter', mouseenterHandler);
+      workspace.value?.removeEventListener('mouseleave', mouseleaveHandler);
       keycon.destroy();
     });
 

package/src/services/BaseService.ts

@@ -91,7 +91,7 @@ const doAction = async (
  *    editorService.afterAdd();
  *   }
  *
- * 调用时的参数会透传到before方法的参数中, 然后before的return 会作为原方法的参数和after的参数，after最后一个参数则是原方法的return值;
+ * 调用时的参数会透传到before方法的参数中, 然后before的return 会作为原方法的参数和after的参数，after第一个参数则是原方法的return值;
  * 如需终止后续方法调用可以return new Error();
  *
  * 方法2：

package/src/services/editor.ts

@@ -33,11 +33,11 @@ import {
   change2Fixed,
   COPY_STORAGE_KEY,
   Fixed2Other,
+  generatePageNameByApp,
   getNodeIndex,
   initPosition,
   isFixed,
   setLayout,
-  setNewItemId,
 } from '@editor/utils/editor';
 import { log } from '@editor/utils/logger';
 
@@ -194,6 +194,20 @@ class Editor extends BaseService {
       historyService.empty();
     }
 
+    if (node?.id) {
+      this.get<StageCore>('stage')
+        ?.renderer.runtime?.getApp?.()
+        ?.emit(
+          'editor:select',
+          {
+            node,
+            page,
+            parent,
+          },
+          getNodePath(node.id, this.get<MApp>('root').items),
+        );
+    }
+
     this.emit('select', node);
 
     return node!;
@@ -480,7 +494,7 @@ class Editor extends BaseService {
       return;
     }
 
-    setNewItemId(config, this.get('root'));
+    await propsService.setNewItemId(config, this.get('root'));
     if (config.style) {
       config.style = {
         ...config.style,
@@ -488,6 +502,10 @@ class Editor extends BaseService {
       };
     }
 
+    if (isPage(config)) {
+      config.name = generatePageNameByApp(this.get('root'));
+    }
+
     return await this.add(config);
   }
 
@@ -504,7 +522,18 @@ class Editor extends BaseService {
       return;
     }
 
-    if (parent.style?.width && node.style?.width) {
+    if (!node.style) return;
+
+    const stage = this.get<StageCore>('stage');
+    const doc = stage?.renderer.contentWindow?.document;
+
+    if (doc) {
+      const parentEl = doc.getElementById(`${parent.id}`);
+      const el = doc.getElementById(`${node.id}`);
+      if (parentEl && el) {
+        node.style.left = (parentEl.clientWidth - el.clientWidth) / 2;
+      }
+    } else if (parent.style && isNumber(parent.style?.width) && isNumber(node.style?.width)) {
       node.style.left = (parent.style.width - node.style.width) / 2;
     }
 
@@ -526,9 +555,9 @@ class Editor extends BaseService {
     const brothers: MNode[] = parent?.items || [];
     const index = brothers.findIndex((item) => `${item.id}` === `${node?.id}`);
 
-    if (offset === LayerOffset.BOTTOM) {
+    if (offset === LayerOffset.TOP) {
       brothers.splice(brothers.length - 1, 0, brothers.splice(index, 1)[0]);
-    } else if (offset === LayerOffset.TOP) {
+    } else if (offset === LayerOffset.BOTTOM) {
       brothers.splice(0, 0, brothers.splice(index, 1)[0]);
     } else {
       brothers.splice(index + parseInt(`${offset}`, 10), 0, brothers.splice(index, 1)[0]);

package/src/services/props.ts

@@ -17,11 +17,12 @@
  */
 
 import { reactive } from 'vue';
-import { cloneDeep, mergeWith } from 'lodash-es';
+import { cloneDeep, mergeWith, random } from 'lodash-es';
 
 import type { FormConfig } from '@tmagic/form';
-import type { MComponent, MNode } from '@tmagic/schema';
-import { toLine } from '@tmagic/utils';
+import type { Id, MComponent, MNode, MPage } from '@tmagic/schema';
+import { NodeType } from '@tmagic/schema';
+import { isPop, toLine } from '@tmagic/utils';
 
 import type { PropsState } from '@editor/type';
 import { DEFAULT_CONFIG, fillConfig, getDefaultPropsValue } from '@editor/utils/props';
@@ -35,7 +36,7 @@ class Props extends BaseService {
   });
 
   constructor() {
-    super(['setPropsConfig', 'getPropsConfig', 'setPropsValue', 'getPropsValue']);
+    super(['setPropsConfig', 'getPropsConfig', 'setPropsValue', 'getPropsValue', 'createId', 'setNewItemId']);
   }
 
   public setPropsConfigs(configs: Record<string, FormConfig>) {
@@ -87,7 +88,7 @@ class Props extends BaseService {
    * @param type 组件类型
    * @returns 组件初始值
    */
-  public async getPropsValue(type: string, defaultValue = {}) {
+  public async getPropsValue(type: string, defaultValue: Record<string, any> = {}) {
     if (type === 'area') {
       const value = (await this.getPropsValue('button')) as MComponent;
       value.className = 'action-area';
@@ -98,13 +99,67 @@ class Props extends BaseService {
       return value;
     }
 
-    return cloneDeep({
-      ...getDefaultPropsValue(type),
-      ...mergeWith(this.state.propsValueMap[type] || {}, defaultValue),
-    });
+    const data = cloneDeep(defaultValue as any);
+
+    await this.setNewItemId(data);
+
+    return {
+      ...getDefaultPropsValue(type, await this.createId(type)),
+      ...mergeWith(cloneDeep(this.state.propsValueMap[type] || {}), data),
+    };
+  }
+
+  public async createId(type: string | number): Promise<string> {
+    return `${type}_${random(10000, false)}`;
+  }
+
+  /**
+   * 将组件与组件的子元素配置中的id都设置成一个新的ID
+   * @param {Object} config 组件配置
+   */
+  /* eslint no-param-reassign: ["error", { "props": false }] */
+  public async setNewItemId(config: MNode, parent?: MPage) {
+    const oldId = config.id;
+
+    config.id = await this.createId(config.type || 'component');
+
+    // 只有弹窗在页面下的一级子元素才有效
+    if (isPop(config) && parent?.type === NodeType.PAGE) {
+      updatePopId(oldId, config.id, parent);
+    }
+
+    if (config.items && Array.isArray(config.items)) {
+      for (const item of config.items) {
+        await this.setNewItemId(item, config as MPage);
+      }
+    }
   }
 }
 
+/**
+ * 复制页面时，需要把组件下关联的弹窗id换测复制出来的弹窗的id
+ * @param {number} oldId 复制的源弹窗id
+ * @param {number} popId 新的弹窗id
+ * @param {Object} pageConfig 页面配置
+ */
+const updatePopId = (oldId: Id, popId: Id, pageConfig: MPage) => {
+  pageConfig.items?.forEach((config) => {
+    if (config.pop === oldId) {
+      config.pop = popId;
+      return;
+    }
+
+    if (config.popId === oldId) {
+      config.popId = popId;
+      return;
+    }
+
+    if (Array.isArray(config.items)) {
+      updatePopId(oldId, popId, config as MPage);
+    }
+  });
+};
+
 export type PropsService = Props;
 
 export default new Props();

package/src/theme/props-panel.scss

@@ -23,9 +23,11 @@
 }
 
 .m-editor-props-panel-popper {
-  span,
-  a,
-  p {
-    font-size: 12px;
+  &.small {
+    span,
+    a,
+    p {
+      font-size: 12px;
+    }
   }
 }

package/src/theme/workspace.scss

@@ -2,4 +2,8 @@
   height: 100%;
   width: 100%;
   user-select: none;
+
+  &:focus-visible {
+    outline: 0;
+  }
 }

package/src/type.ts

@@ -21,6 +21,7 @@ import type { Component } from 'vue';
 import type { FormConfig } from '@tmagic/form';
 import type { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
+import type { MoveableOptions } from '@tmagic/stage';
 
 import type { ComponentListService } from '@editor/services/componentList';
 import type { EditorService } from '@editor/services/editor';
@@ -45,6 +46,15 @@ export interface Services {
   uiService: UiService;
 }
 
+export interface StageOptions {
+  runtimeUrl: string;
+  autoScrollIntoView: boolean;
+  render: () => HTMLDivElement;
+  moveableOptions: MoveableOptions | ((core?: StageCore) => MoveableOptions);
+  canSelect: (el: HTMLElement) => boolean | Promise<boolean>;
+  updateDragEl: (el: HTMLDivElement) => void;
+}
+
 export interface StoreState {
   root: MApp | null;
   page: MPage | null;

package/src/utils/editor.ts

@@ -16,9 +16,7 @@
  * limitations under the License.
  */
 
-import { random } from 'lodash-es';
-
-import type { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
+import type { MApp, MContainer, MNode, MPage } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import { getNodePath, isNumber, isPage, isPop } from '@tmagic/utils';
@@ -27,8 +25,6 @@ import { Layout } from '@editor/type';
 
 export const COPY_STORAGE_KEY = '$MagicEditorCopyData';
 
-export const generateId = (type: string | number): string => `${type}_${random(10000, false)}`;
-
 /**
  * 获取所有页面配置
  * @param app DSL跟节点
@@ -74,51 +70,6 @@ export const generatePageName = (pageNameList: string[]): string => {
  */
 export const generatePageNameByApp = (app: MApp): string => generatePageName(getPageNameList(getPageList(app)));
 
-/**
- * 复制页面时，需要把组件下关联的弹窗id换测复制出来的弹窗的id
- * @param {number} oldId 复制的源弹窗id
- * @param {number} popId 新的弹窗id
- * @param {Object} pageConfig 页面配置
- */
-const updatePopId = (oldId: Id, popId: Id, pageConfig: MPage) => {
-  pageConfig.items?.forEach((config) => {
-    if (config.pop === oldId) {
-      config.pop = popId;
-      return;
-    }
-
-    if (config.popId === oldId) {
-      config.popId = popId;
-      return;
-    }
-
-    if (Array.isArray(config.items)) {
-      updatePopId(oldId, popId, config as MPage);
-    }
-  });
-};
-
-/**
- * 将组件与组件的子元素配置中的id都设置成一个新的ID
- * @param {Object} config 组件配置
- */
-/* eslint no-param-reassign: ["error", { "props": false }] */
-export const setNewItemId = (config: MNode, parent?: MPage) => {
-  const oldId = config.id;
-
-  config.id = generateId(config.type || 'component');
-  config.name = `${config.name?.replace(/_(\d+)$/, '')}_${config.id}`;
-
-  // 只有弹窗在页面下的一级子元素才有效
-  if (isPop(config) && parent?.type === NodeType.PAGE) {
-    updatePopId(oldId, config.id, parent);
-  }
-
-  if (config.items && Array.isArray(config.items)) {
-    config.items.forEach((item) => setNewItemId(item, config as MPage));
-  }
-};
-
 /**
  * @param {Object} node
  * @returns {boolean}
@@ -142,9 +93,13 @@ export const toRelative = (node: MNode) => {
 
 const setTop2Middle = (node: MNode, parentNode: MNode, stage: StageCore) => {
   const style = node.style || {};
-  const height = style.height || 0;
+  let height = style.height || 0;
 
-  if (!stage || typeof style.top !== 'undefined' || !parentNode.style || !isNumber(height)) return style;
+  if (!stage || typeof style.top !== 'undefined' || !parentNode.style) return style;
+
+  if (!isNumber(height)) {
+    height = 0;
+  }
 
   const { height: parentHeight } = parentNode.style;
 

package/src/utils/polyfills.ts

@@ -1,22 +1,8 @@
-/*
- * Tencent is pleased to support the open source community by making TMagicEditor available.
- *
- * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
 // serialize-javascript 依赖的 randombytes 依赖全局的 global 对象，因此此处需添加 global polyfill
-if (typeof (window as any).global === 'undefined') {
+if (typeof global === 'undefined') {
   (window as any).global = window;
 }
+
+if (typeof globalThis === 'undefined') {
+  (window as any).globalThis = window;
+}