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

package/src/components/ContentMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="menuData.length" v-show="visible" class="magic-editor-content-menu" ref="menu" :style="menuStyle">
+  <div v-if="menuData.length && visible" class="magic-editor-content-menu" ref="menu" :style="menuStyle">
     <div>
       <tool-button
         v-for="(item, index) in menuData"
@@ -11,13 +11,19 @@
       ></tool-button>
     </div>
     <teleport to="body">
-      <content-menu class="sub-menu" ref="subMenu" :menu-data="subMenuData"></content-menu>
+      <content-menu
+        class="sub-menu"
+        ref="subMenu"
+        :menu-data="subMenuData"
+        :is-sub-menu="true"
+        @hide="hide"
+      ></content-menu>
     </teleport>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, nextTick, onMounted, PropType, ref } from 'vue';
+import { defineComponent, nextTick, onMounted, onUnmounted, PropType, ref } from 'vue';
 
 import { MenuButton, MenuItem } from '@editor/type';
 
@@ -31,9 +37,16 @@ export default defineComponent({
       type: Array as PropType<MenuItem[]>,
       default: () => [],
     },
+
+    isSubMenu: {
+      type: Boolean,
+      default: false,
+    },
   },
 
-  setup() {
+  emits: ['hide', 'show'],
+
+  setup(props, { emit }) {
     const menu = ref<HTMLDivElement>();
     const subMenu = ref<any>();
     const visible = ref(false);
@@ -44,20 +57,35 @@ export default defineComponent({
     });
 
     const hide = () => {
+      if (!visible.value) return;
+
       visible.value = false;
+      subMenu.value?.hide();
+
+      emit('hide');
+    };
+
+    const hideHandler = (e: MouseEvent) => {
+      const target = e.target as HTMLElement | undefined;
+      if (!visible.value || !target) {
+        return;
+      }
+      if (menu.value?.contains(target) || subMenu.value?.$el?.contains(target)) {
+        return;
+      }
+      hide();
     };
 
     onMounted(() => {
-      globalThis.addEventListener(
-        'mousedown',
-        (e: MouseEvent) => {
-          if (!visible.value || (e.target && menu.value?.contains(e.target as HTMLElement))) {
-            return;
-          }
-          hide();
-        },
-        true,
-      );
+      if (props.isSubMenu) return;
+
+      globalThis.addEventListener('mousedown', hideHandler, true);
+    });
+
+    onUnmounted(() => {
+      if (props.isSubMenu) return;
+
+      globalThis.removeEventListener('mousedown', hideHandler, true);
     });
 
     return {
@@ -70,21 +98,26 @@ export default defineComponent({
       hide,
 
       show(e: MouseEvent) {
-        visible.value = true;
+        // 加settimeout是以为，如果菜单中的按钮监听的是mouseup，那么菜单显示出来时鼠标如果正好在菜单上就会马上触发按钮的mouseup
+        setTimeout(() => {
+          visible.value = true;
+
+          nextTick(() => {
+            const menuHeight = menu.value?.clientHeight || 0;
 
-        nextTick(() => {
-          const menuHeight = menu.value?.clientHeight || 0;
+            let top = e.clientY;
+            if (menuHeight + e.clientY > document.body.clientHeight) {
+              top = document.body.clientHeight - menuHeight;
+            }
 
-          let top = e.clientY;
-          if (menuHeight + e.clientY > document.body.clientHeight) {
-            top = document.body.clientHeight - menuHeight;
-          }
+            menuStyle.value = {
+              top: `${top}px`,
+              left: `${e.clientX}px`,
+            };
 
-          menuStyle.value = {
-            top: `${top}px`,
-            left: `${e.clientX}px`,
-          };
-        });
+            emit('show');
+          });
+        }, 300);
       },
 
       showSubMenu(item: MenuItem) {

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));
@@ -141,7 +123,7 @@ export default defineComponent({
       stage?.on('runtime-ready', (rt) => {
         runtime = rt;
         // toRaw返回的值是一个引用而非快照，需要cloneDeep
-        root.value && runtime?.updateRootConfig(cloneDeep(toRaw(root.value)));
+        root.value && runtime?.updateRootConfig?.(cloneDeep(toRaw(root.value)));
         page.value?.id && runtime?.updatePageId?.(page.value.id);
         setTimeout(() => {
           node.value && stage?.select(toRaw(node.value.id));
@@ -156,7 +138,7 @@ export default defineComponent({
 
     watch(root, (root) => {
       if (runtime && root) {
-        runtime.updateRootConfig(cloneDeep(toRaw(root)));
+        runtime.updateRootConfig?.(cloneDeep(toRaw(root)));
       }
     });
 
@@ -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';
 
@@ -108,10 +108,14 @@ class Editor extends BaseService {
   /**
    * 根据id获取组件、组件的父组件以及组件所属的页面节点
    * @param {number | string} id 组件id
+   * @param {boolean} raw 是否使用toRaw
    * @returns {EditorNodeInfo}
    */
-  public getNodeInfo(id: Id): EditorNodeInfo {
-    const root = toRaw(this.get<MApp | null>('root'));
+  public getNodeInfo(id: Id, raw = true): EditorNodeInfo {
+    let root = this.get<MApp | null>('root');
+    if (raw) {
+      root = toRaw(root);
+    }
     if (!root) return {};
 
     if (id === root.id) {
@@ -141,21 +145,23 @@ class Editor extends BaseService {
   /**
    * 根据ID获取指点节点配置
    * @param id 组件ID
+   * @param {boolean} raw 是否使用toRaw
    * @returns 组件节点配置
    */
-  public getNodeById(id: Id): MNode | undefined {
-    const { node } = this.getNodeInfo(id);
+  public getNodeById(id: Id, raw = true): MNode | undefined {
+    const { node } = this.getNodeInfo(id, raw);
     return node;
   }
 
   /**
    * 根据ID获取指点节点的父节点配置
    * @param id 组件ID
+   * @param {boolean} raw 是否使用toRaw
    * @returns 指点组件的父节点配置
    */
-  public getParentById(id: Id): MContainer | undefined {
+  public getParentById(id: Id, raw = true): MContainer | undefined {
     if (!this.get<MApp | null>('root')) return;
-    const { parent } = this.getNodeInfo(id);
+    const { parent } = this.getNodeInfo(id, raw);
     return parent;
   }
 
@@ -194,6 +200,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!;
@@ -265,7 +285,7 @@ class Editor extends BaseService {
     } else if (curNode.items) {
       parentNode = curNode;
     } else {
-      parentNode = this.getParentById(curNode.id);
+      parentNode = this.getParentById(curNode.id, false);
     }
 
     if (!parentNode) throw new Error('未找到父元素');
@@ -318,7 +338,7 @@ class Editor extends BaseService {
 
     if (!root) throw new Error('没有root');
 
-    const { parent, node: curNode } = this.getNodeInfo(node.id);
+    const { parent, node: curNode } = this.getNodeInfo(node.id, false);
 
     if (!parent || !curNode) throw new Error('找不要删除的节点');
 
@@ -370,7 +390,7 @@ class Editor extends BaseService {
   public async update(config: MNode): Promise<MNode> {
     if (!config?.id) throw new Error('没有配置或者配置缺少id值');
 
-    const info = this.getNodeInfo(config.id);
+    const info = this.getNodeInfo(config.id, false);
 
     if (!info.node) throw new Error(`获取不到id为${config.id}的节点`);
 
@@ -480,7 +500,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 +508,10 @@ class Editor extends BaseService {
       };
     }
 
+    if (isPage(config)) {
+      config.name = generatePageNameByApp(this.get('root'));
+    }
+
     return await this.add(config);
   }
 
@@ -504,7 +528,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 +561,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]);