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

package/dist/tmagic-editor.umd.js

@@ -1,7 +1,7 @@
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('@element-plus/icons'), require('lodash-es'), require('monaco-editor'), require('@tmagic/schema'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('gesto'), require('element-plus'), require('keycon'), require('@tmagic/stage')) :
   typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', '@element-plus/icons', 'lodash-es', 'monaco-editor', '@tmagic/schema', '@tmagic/utils', 'events', '@tmagic/core', 'gesto', 'element-plus', 'keycon', '@tmagic/stage'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.vue, global.serialize, global.icons, global.lodashEs, global.monaco, global.schema, global.utils, global.events, global.core, global.Gesto, global.elementPlus, global.KeyController, global.StageCore));
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.serialize, global.icons, global.lodashEs, global.monaco, global.schema, global.utils, global.events, global.core, global.Gesto, global.ElementPlus, global.KeyController, global.StageCore));
 })(this, (function (exports, vue, serialize, icons, lodashEs, monaco, schema, utils, events, core, Gesto, elementPlus, KeyController, StageCore) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -684,10 +684,10 @@
         }
         return value;
       }
-      return lodashEs.cloneDeep({
+      return {
         ...getDefaultPropsValue(type),
-        ...lodashEs.mergeWith(this.state.propsValueMap[type] || {}, defaultValue)
-      });
+        ...lodashEs.mergeWith(lodashEs.cloneDeep(this.state.propsValueMap[type] || {}), lodashEs.cloneDeep(defaultValue))
+      };
     }
   }
   var propsService = new Props();
@@ -772,9 +772,12 @@
   };
   const setTop2Middle = (node, parentNode, stage) => {
     const style = node.style || {};
-    const height = style.height || 0;
-    if (!stage || typeof style.top !== "undefined" || !parentNode.style || !utils.isNumber(height))
+    let height = style.height || 0;
+    if (!stage || typeof style.top !== "undefined" || !parentNode.style)
       return style;
+    if (!utils.isNumber(height)) {
+      height = 0;
+    }
     const { height: parentHeight } = parentNode.style;
     if (utils.isPage(parentNode)) {
       const { scrollTop = 0, wrapperHeight } = stage.mask;
@@ -963,6 +966,13 @@
       } else {
         historyService.empty();
       }
+      if (node?.id) {
+        this.get("stage")?.renderer.runtime?.getApp?.()?.emit("editor:select", {
+          node,
+          page,
+          parent
+        }, utils.getNodePath(node.id, this.get("root").items));
+      }
       this.emit("select", node);
       return node;
     }
@@ -1151,6 +1161,9 @@
           ...position
         };
       }
+      if (utils.isPage(config)) {
+        config.name = generatePageNameByApp(this.get("root"));
+      }
       return await this.add(config);
     }
     async alignCenter(config2) {
@@ -1160,7 +1173,17 @@
       if (layout === Layout.RELATIVE) {
         return;
       }
-      if (parent.style?.width && node.style?.width) {
+      if (!node.style)
+        return;
+      const stage = this.get("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 && utils.isNumber(parent.style?.width) && utils.isNumber(node.style?.width)) {
         node.style.left = (parent.style.width - node.style.width) / 2;
       }
       await this.update(node);
@@ -1174,9 +1197,9 @@
       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]);
@@ -2244,9 +2267,14 @@
       menuData: {
         type: Array,
         default: () => []
+      },
+      isSubMenu: {
+        type: Boolean,
+        default: false
       }
     },
-    setup() {
+    emits: ["hide", "show"],
+    setup(props, { emit }) {
       const menu = vue.ref();
       const subMenu = vue.ref();
       const visible = vue.ref(false);
@@ -2256,15 +2284,31 @@
         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();
       };
       vue.onMounted(() => {
-        globalThis.addEventListener("mousedown", (e) => {
-          if (!visible.value || e.target && menu.value?.contains(e.target)) {
-            return;
-          }
-          hide();
-        }, true);
+        if (props.isSubMenu)
+          return;
+        globalThis.addEventListener("mousedown", hideHandler, true);
+      });
+      vue.onUnmounted(() => {
+        if (props.isSubMenu)
+          return;
+        globalThis.removeEventListener("mousedown", hideHandler, true);
       });
       return {
         menu,
@@ -2274,18 +2318,21 @@
         subMenuData,
         hide,
         show(e) {
-          visible.value = true;
-          vue.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`
-            };
-          });
+          setTimeout(() => {
+            visible.value = true;
+            vue.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;
@@ -2306,7 +2353,7 @@
   function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_tool_button = vue.resolveComponent("tool-button");
     const _component_content_menu = vue.resolveComponent("content-menu", true);
-    return _ctx.menuData.length ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+    return _ctx.menuData.length && _ctx.visible ? (vue.openBlock(), vue.createElementBlock("div", {
       key: 0,
       class: "magic-editor-content-menu",
       ref: "menu",
@@ -2327,12 +2374,12 @@
         vue.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)), [
-      [vue.vShow, _ctx.visible]
-    ]) : vue.createCommentVNode("", true);
+    ], 4)) : vue.createCommentVNode("", true);
   }
   var ContentMenu = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a]]);
 
@@ -2345,6 +2392,7 @@
       const isRoot = vue.computed(() => node.value?.type === schema.NodeType.ROOT);
       const isPage = vue.computed(() => node.value?.type === schema.NodeType.PAGE);
       const componentList = vue.computed(() => services?.componentListService.getList() || []);
+      const layerContentMenu = vue.inject("layerContentMenu", []);
       const createMenuItems = (group) => group.items.map((component) => ({
         text: component.text,
         type: "button",
@@ -2409,7 +2457,8 @@
             handler: () => {
               node.value && services?.editorService.remove(node.value);
             }
-          }
+          },
+          ...layerContentMenu
         ]),
         show(e) {
           menu.value?.show(e);
@@ -2632,7 +2681,7 @@
     components: { MIcon },
     props: {
       data: {
-        type: Object
+        type: [Object, String]
       }
     },
     setup(props) {
@@ -3200,6 +3249,7 @@
       const node = vue.computed(() => editorService?.get("node"));
       const parent = vue.computed(() => editorService?.get("parent"));
       const isPage = vue.computed(() => node.value?.type === schema.NodeType.PAGE);
+      const stageContentMenu = vue.inject("stageContentMenu", []);
       vue.onMounted(() => {
         const data = globalThis.localStorage.getItem(COPY_STORAGE_KEY);
         canPaste.value = data !== "undefined" && !!data;
@@ -3235,8 +3285,17 @@
             text: "\u7C98\u8D34",
             display: () => canPaste.value,
             handler: () => {
-              const top = menu.value?.$el.offsetTop || 0;
-              const left = menu.value?.$el.offsetLeft || 0;
+              const stage = editorService?.get("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 });
             }
           },
@@ -3303,7 +3362,8 @@
             handler: () => {
               editorService?.get("stage").clearGuides();
             }
-          }
+          },
+          ...stageContentMenu
         ]),
         show(e) {
           menu.value?.show(e);
@@ -3533,10 +3593,7 @@
         keycon = new KeyController__default["default"](workspace.value);
         const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
         const ctrl = isMac ? "meta" : "ctrl";
-        keycon.keydown((e) => {
-          console.log(e);
-          e.inputEvent.preventDefault();
-        }).keyup("delete", (e) => {
+        keycon.keyup("delete", (e) => {
           e.inputEvent.preventDefault();
           if (!node.value || utils.isPage(node.value))
             return;
@@ -3546,46 +3603,65 @@
           if (!node.value || utils.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 || utils.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);
         });
       });
@@ -3785,6 +3861,14 @@
       sidebar: {
         type: Object
       },
+      layerContentMenu: {
+        type: Array,
+        default: () => []
+      },
+      stageContentMenu: {
+        type: Array,
+        default: () => []
+      },
       menu: {
         type: Object,
         default: () => ({ left: [], right: [] })
@@ -3870,6 +3954,8 @@
         uiService
       };
       vue.provide("services", services);
+      vue.provide("layerContentMenu", props.layerContentMenu);
+      vue.provide("stageContentMenu", props.stageContentMenu);
       return services;
     }
   });