@tmagic/editor 1.0.0-rc.3 → 1.0.0-rc.6

package/dist/types/src/Editor.vue.d.ts

@@ -3,7 +3,7 @@ import type { FormConfig } from '@tmagic/form';
 import type { MApp, MNode } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import type { MoveableOptions } from '@tmagic/stage';
-import type { ComponentGroup, MenuBarData, Services, SideBarData, StageRect } from './type';
+import type { ComponentGroup, MenuBarData, MenuItem, Services, SideBarData, StageRect } from './type';
 declare const _default: DefineComponent<{
     /** 页面初始值 */
     modelValue: {
@@ -20,6 +20,14 @@ declare const _default: DefineComponent<{
     sidebar: {
         type: PropType<SideBarData>;
     };
+    layerContentMenu: {
+        type: PropType<MenuItem[]>;
+        default: () => never[];
+    };
+    stageContentMenu: {
+        type: PropType<MenuItem[]>;
+        default: () => never[];
+    };
     /** 顶部工具栏配置 */
     menu: {
         type: PropType<MenuBarData>;
@@ -85,6 +93,14 @@ declare const _default: DefineComponent<{
     sidebar: {
         type: PropType<SideBarData>;
     };
+    layerContentMenu: {
+        type: PropType<MenuItem[]>;
+        default: () => never[];
+    };
+    stageContentMenu: {
+        type: PropType<MenuItem[]>;
+        default: () => never[];
+    };
     /** 顶部工具栏配置 */
     menu: {
         type: PropType<MenuBarData>;
@@ -139,6 +155,8 @@ declare const _default: DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     menu: MenuBarData;
+    layerContentMenu: MenuItem[];
+    stageContentMenu: MenuItem[];
     autoScrollIntoView: boolean;
     codeOptions: Record<string, any>;
     modelValue: MApp;

package/dist/types/src/services/BaseService.d.ts

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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-rc.3",
+  "version": "1.0.0-rc.6",
   "name": "@tmagic/editor",
   "sideEffects": [
     "dist/*",
@@ -45,11 +45,11 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons": "0.0.11",
-    "@tmagic/core": "^1.0.0-rc.3",
-    "@tmagic/form": "^1.0.0-rc.3",
-    "@tmagic/schema": "^1.0.0-rc.3",
-    "@tmagic/stage": "^1.0.0-rc.3",
-    "@tmagic/utils": "^1.0.0-rc.3",
+    "@tmagic/core": "^1.0.0-rc.6",
+    "@tmagic/form": "^1.0.0-rc.6",
+    "@tmagic/schema": "^1.0.0-rc.6",
+    "@tmagic/stage": "^1.0.0-rc.6",
+    "@tmagic/utils": "^1.0.0-rc.6",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "element-plus": "^2.2.0",
@@ -88,5 +88,5 @@
     "vite-plugin-dts": "^0.9.6",
     "vue-tsc": "^0.0.24"
   },
-  "gitHead": "d9f6ca25a0a6efba35d183e643a306e164b74af7"
+  "gitHead": "a93928e56d73b7924991e899a4dfaf9614cd357c"
 }

package/src/Editor.vue

@@ -56,7 +56,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, StageRect } from '@editor/type';
+import type { ComponentGroup, MenuBarData, MenuItem, Services, SideBarData, StageRect } from '@editor/type';
 
 export default defineComponent({
   name: 'm-editor',
@@ -88,6 +88,16 @@ export default defineComponent({
       type: Object as PropType<SideBarData>,
     },
 
+    layerContentMenu: {
+      type: Array as PropType<MenuItem[]>,
+      default: () => [],
+    },
+
+    stageContentMenu: {
+      type: Array as PropType<MenuItem[]>,
+      default: () => [],
+    },
+
     /** 顶部工具栏配置 */
     menu: {
       type: Object as PropType<MenuBarData>,
@@ -237,6 +247,9 @@ export default defineComponent({
 
     provide('services', services);
 
+    provide('layerContentMenu', props.layerContentMenu);
+    provide('stageContentMenu', props.stageContentMenu);
+
     return services;
   },
 });

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

@@ -82,10 +82,6 @@ export default defineComponent({
       const ctrl = isMac ? 'meta' : 'ctrl';
 
       keycon
-        .keydown((e) => {
-          console.log(e);
-          e.inputEvent.preventDefault();
-        })
         .keyup('delete', (e) => {
           e.inputEvent.preventDefault();
           if (!node.value || isPage(node.value)) return;
@@ -96,63 +92,82 @@ export default defineComponent({
           if (!node.value || isPage(node.value)) return;
           services?.editorService.remove(node.value);
         })
-        .keydown([ctrl, 'c'], () => {
+        .keydown([ctrl, 'c'], (e) => {
+          e.inputEvent.preventDefault();
           node.value && services?.editorService.copy(node.value);
         })
-        .keydown([ctrl, 'v'], () => {
+        .keydown([ctrl, 'v'], (e) => {
+          e.inputEvent.preventDefault();
           node.value && services?.editorService.paste();
         })
-        .keydown([ctrl, 'x'], () => {
+        .keydown([ctrl, 'x'], (e) => {
+          e.inputEvent.preventDefault();
           if (!node.value || isPage(node.value)) return;
           services?.editorService.copy(node.value);
           services?.editorService.remove(node.value);
         })
-        .keydown([ctrl, 'z'], () => {
+        .keydown([ctrl, 'z'], (e) => {
+          e.inputEvent.preventDefault();
           services?.editorService.undo();
         })
-        .keydown([ctrl, 'shift', 'z'], () => {
+        .keydown([ctrl, 'shift', 'z'], (e) => {
+          e.inputEvent.preventDefault();
           services?.editorService.redo();
         })
-        .keydown('up', () => {
+        .keydown('up', (e) => {
+          e.inputEvent.preventDefault();
           services?.editorService.move(0, -1);
         })
-        .keydown('down', () => {
+        .keydown('down', (e) => {
+          e.inputEvent.preventDefault();
           services?.editorService.move(0, 1);
         })
-        .keydown('left', () => {
+        .keydown('left', (e) => {
+          e.inputEvent.preventDefault();
           services?.editorService.move(-1, 0);
         })
-        .keydown('right', () => {
+        .keydown('right', (e) => {
+          e.inputEvent.preventDefault();
           services?.editorService.move(1, 0);
         })
-        .keydown([ctrl, 'up'], () => {
+        .keydown([ctrl, 'up'], (e) => {
+          e.inputEvent.preventDefault();
           services?.editorService.move(0, -10);
         })
-        .keydown([ctrl, 'down'], () => {
+        .keydown([ctrl, 'down'], (e) => {
+          e.inputEvent.preventDefault();
           services?.editorService.move(0, 10);
         })
-        .keydown([ctrl, 'left'], () => {
+        .keydown([ctrl, 'left'], (e) => {
+          e.inputEvent.preventDefault();
           services?.editorService.move(-10, 0);
         })
-        .keydown([ctrl, 'right'], () => {
+        .keydown([ctrl, 'right'], (e) => {
+          e.inputEvent.preventDefault();
           services?.editorService.move(10, 0);
         })
-        .keydown('tab', () => {
+        .keydown('tab', (e) => {
+          e.inputEvent.preventDefault();
           services?.editorService.selectNextNode();
         })
-        .keydown([ctrl, 'tab'], () => {
+        .keydown([ctrl, 'tab'], (e) => {
+          e.inputEvent.preventDefault();
           services?.editorService.selectNextPage();
         })
-        .keydown([ctrl, '='], () => {
+        .keydown([ctrl, '='], (e) => {
+          e.inputEvent.preventDefault();
           services?.uiService.zoom(0.1);
         })
-        .keydown([ctrl, 'numpadplus'], () => {
+        .keydown([ctrl, 'numpadplus'], (e) => {
+          e.inputEvent.preventDefault();
           services?.uiService.zoom(0.1);
         })
-        .keydown([ctrl, '-'], () => {
+        .keydown([ctrl, '-'], (e) => {
+          e.inputEvent.preventDefault();
           services?.uiService.zoom(-0.1);
         })
-        .keydown([ctrl, 'numpad-'], () => {
+        .keydown([ctrl, 'numpad-'], (e) => {
+          e.inputEvent.preventDefault();
           services?.uiService.zoom(-0.1);
         });
     });

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,6 +33,7 @@ import {
   change2Fixed,
   COPY_STORAGE_KEY,
   Fixed2Other,
+  generatePageNameByApp,
   getNodeIndex,
   initPosition,
   isFixed,
@@ -194,6 +195,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!;
@@ -488,6 +503,10 @@ class Editor extends BaseService {
       };
     }
 
+    if (isPage(config)) {
+      config.name = generatePageNameByApp(this.get('root'));
+    }
+
     return await this.add(config);
   }
 
@@ -504,7 +523,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 +556,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

@@ -98,10 +98,10 @@ class Props extends BaseService {
       return value;
     }
 
-    return cloneDeep({
+    return {
       ...getDefaultPropsValue(type),
-      ...mergeWith(this.state.propsValueMap[type] || {}, defaultValue),
-    });
+      ...mergeWith(cloneDeep(this.state.propsValueMap[type] || {}), cloneDeep(defaultValue)),
+    };
   }
 }
 

package/src/utils/editor.ts

@@ -142,9 +142,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;