@tmagic/editor 1.0.0-rc.5 → 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/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-rc.5",
+  "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.5",
-    "@tmagic/form": "^1.0.0-rc.5",
-    "@tmagic/schema": "^1.0.0-rc.5",
-    "@tmagic/stage": "^1.0.0-rc.5",
-    "@tmagic/utils": "^1.0.0-rc.5",
+    "@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": "d147b361d7e6123cda99c6ba68a2ac7e074be37f"
+  "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

@@ -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(
-        'mouseup',
-        (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 + 2}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/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;
@@ -150,6 +152,7 @@ export default defineComponent({
             editorService?.get<StageCore>('stage').clearGuides();
           },
         },
+        ...stageContentMenu,
       ]),
 
       show(e: MouseEvent) {

package/src/services/editor.ts

@@ -556,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)),
+    };
   }
 }