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

package/dist/tmagic-editor.es.js

@@ -666,10 +666,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))
+    };
   }
 }
 var propsService = new Props();
@@ -1179,9 +1179,9 @@ class Editor$1 extends BaseService {
     const node = this.get("node");
     const brothers = 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]);
@@ -2249,9 +2249,14 @@ const _sfc_main$a = defineComponent({
     menuData: {
       type: Array,
       default: () => []
+    },
+    isSubMenu: {
+      type: Boolean,
+      default: false
     }
   },
-  setup() {
+  emits: ["hide", "show"],
+  setup(props, { emit }) {
     const menu = ref();
     const subMenu = ref();
     const visible = ref(false);
@@ -2261,15 +2266,31 @@ const _sfc_main$a = defineComponent({
       top: "0"
     });
     const hide = () => {
+      if (!visible.value)
+        return;
       visible.value = false;
+      subMenu.value?.hide();
+      emit("hide");
+    };
+    const hideHandler = (e) => {
+      const target = e.target;
+      if (!visible.value || !target) {
+        return;
+      }
+      if (menu.value?.contains(target) || subMenu.value?.$el?.contains(target)) {
+        return;
+      }
+      hide();
     };
     onMounted(() => {
-      globalThis.addEventListener("mouseup", (e) => {
-        if (!visible.value || e.target && menu.value?.contains(e.target)) {
-          return;
-        }
-        hide();
-      }, true);
+      if (props.isSubMenu)
+        return;
+      globalThis.addEventListener("mousedown", hideHandler, true);
+    });
+    onUnmounted(() => {
+      if (props.isSubMenu)
+        return;
+      globalThis.removeEventListener("mousedown", hideHandler, true);
     });
     return {
       menu,
@@ -2279,18 +2300,21 @@ const _sfc_main$a = defineComponent({
       subMenuData,
       hide,
       show(e) {
-        visible.value = true;
-        nextTick(() => {
-          const menuHeight = menu.value?.clientHeight || 0;
-          let top = e.clientY;
-          if (menuHeight + e.clientY > document.body.clientHeight) {
-            top = document.body.clientHeight - menuHeight;
-          }
-          menuStyle.value = {
-            top: `${top}px`,
-            left: `${e.clientX + 2}px`
-          };
-        });
+        setTimeout(() => {
+          visible.value = true;
+          nextTick(() => {
+            const menuHeight = menu.value?.clientHeight || 0;
+            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`
+            };
+            emit("show");
+          });
+        }, 300);
       },
       showSubMenu(item) {
         const menuItem = item;
@@ -2332,8 +2356,10 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode(_component_content_menu, {
         class: "sub-menu",
         ref: "subMenu",
-        "menu-data": _ctx.subMenuData
-      }, null, 8, ["menu-data"])
+        "menu-data": _ctx.subMenuData,
+        "is-sub-menu": true,
+        onHide: _ctx.hide
+      }, null, 8, ["menu-data", "onHide"])
     ]))
   ], 4)) : createCommentVNode("", true);
 }
@@ -2348,6 +2374,7 @@ const _sfc_main$9 = defineComponent({
     const isRoot = computed(() => node.value?.type === NodeType.ROOT);
     const isPage = computed(() => node.value?.type === NodeType.PAGE);
     const componentList = computed(() => services?.componentListService.getList() || []);
+    const layerContentMenu = inject("layerContentMenu", []);
     const createMenuItems = (group) => group.items.map((component) => ({
       text: component.text,
       type: "button",
@@ -2412,7 +2439,8 @@ const _sfc_main$9 = defineComponent({
           handler: () => {
             node.value && services?.editorService.remove(node.value);
           }
-        }
+        },
+        ...layerContentMenu
       ]),
       show(e) {
         menu.value?.show(e);
@@ -3203,6 +3231,7 @@ const _sfc_main$3 = defineComponent({
     const node = computed(() => editorService?.get("node"));
     const parent = computed(() => editorService?.get("parent"));
     const isPage = computed(() => node.value?.type === NodeType.PAGE);
+    const stageContentMenu = inject("stageContentMenu", []);
     onMounted(() => {
       const data = globalThis.localStorage.getItem(COPY_STORAGE_KEY);
       canPaste.value = data !== "undefined" && !!data;
@@ -3315,7 +3344,8 @@ const _sfc_main$3 = defineComponent({
           handler: () => {
             editorService?.get("stage").clearGuides();
           }
-        }
+        },
+        ...stageContentMenu
       ]),
       show(e) {
         menu.value?.show(e);
@@ -3813,6 +3843,14 @@ const _sfc_main = defineComponent({
     sidebar: {
       type: Object
     },
+    layerContentMenu: {
+      type: Array,
+      default: () => []
+    },
+    stageContentMenu: {
+      type: Array,
+      default: () => []
+    },
     menu: {
       type: Object,
       default: () => ({ left: [], right: [] })
@@ -3898,6 +3936,8 @@ const _sfc_main = defineComponent({
       uiService
     };
     provide("services", services);
+    provide("layerContentMenu", props.layerContentMenu);
+    provide("stageContentMenu", props.stageContentMenu);
     return services;
   }
 });