@tmagic/editor 1.1.0-beta.0 → 1.1.0-beta.3

package/dist/tmagic-editor.umd.js

@@ -1,8 +1,8 @@
 (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/stage'), require('@tmagic/schema'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('gesto'), require('element-plus'), require('keycon')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', '@element-plus/icons', 'lodash-es', 'monaco-editor', '@tmagic/stage', '@tmagic/schema', '@tmagic/utils', 'events', '@tmagic/core', 'gesto', 'element-plus', 'keycon'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.serialize, global.icons, global.lodashEs, global.monaco, global.StageCore, global.schema, global.utils, global.events, global.core, global.Gesto, global.ElementPlus, global.KeyController));
-})(this, (function (exports, vue, serialize, icons, lodashEs, monaco, StageCore, schema, utils, events, core, Gesto, elementPlus, KeyController) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('@element-plus/icons-vue'), require('lodash-es'), require('monaco-editor'), require('@tmagic/stage'), require('@tmagic/schema'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('gesto'), require('element-plus'), require('keycon')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', '@element-plus/icons-vue', 'lodash-es', 'monaco-editor', '@tmagic/stage', '@tmagic/schema', '@tmagic/utils', 'events', '@tmagic/core', 'gesto', 'element-plus', 'keycon'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.serialize, global.iconsVue, global.lodashEs, global.monaco, global.StageCore, global.schema, global.utils, global.events, global.core, global.Gesto, global.ElementPlus, global.KeyController));
+})(this, (function (exports, vue, serialize, iconsVue, lodashEs, monaco, StageCore, schema, utils, events, core, Gesto, elementPlus, KeyController) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -179,9 +179,9 @@
         }
       };
       return {
-        Delete: vue.markRaw(icons.Delete),
-        Pointer: vue.markRaw(icons.Pointer),
-        Close: vue.markRaw(icons.Close),
+        Delete: vue.markRaw(iconsVue.Delete),
+        Pointer: vue.markRaw(iconsVue.Pointer),
+        Close: vue.markRaw(iconsVue.Close),
         val,
         uiSelectMode,
         toName: vue.computed(() => {
@@ -479,17 +479,12 @@
     try {
       let beforeArgs = args;
       for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
-        let beforeReturnValue = await beforeMethod(...beforeArgs) || [];
-        if (isError(beforeReturnValue))
-          throw beforeReturnValue;
-        if (!Array.isArray(beforeReturnValue)) {
-          beforeReturnValue = [beforeReturnValue];
+        beforeArgs = await beforeMethod(...beforeArgs) || [];
+        if (isError(beforeArgs))
+          throw beforeArgs;
+        if (!Array.isArray(beforeArgs)) {
+          beforeArgs = [beforeArgs];
         }
-        beforeArgs = beforeArgs.map((v, index) => {
-          if (typeof beforeReturnValue[index] === "undefined")
-            return v;
-          return beforeReturnValue[index];
-        });
       }
       let returnValue = await fn(beforeArgs, sourceMethod.bind(scope));
       for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
@@ -879,23 +874,13 @@
       return config.style?.left;
     const el = doc.getElementById(`${config.id}`);
     const parentEl = doc.getElementById(`${parent.id}`);
-    if (el && parentEl && el.offsetWidth + config.style?.left > parentEl.offsetWidth) {
+    const left = Number(config.style?.left) || 0;
+    if (el && parentEl && el.offsetWidth + left > parentEl.offsetWidth) {
       return parentEl.offsetWidth - el.offsetWidth;
     }
     return config.style.left;
   };
 
-  const log = (...args) => {
-  };
-  const info = (...args) => {
-  };
-  const warn = (...args) => {
-  };
-  const debug = (...args) => {
-  };
-  const error = (...args) => {
-  };
-
   class Editor$1 extends BaseService {
     constructor() {
       super([
@@ -1057,7 +1042,7 @@
       parentNode?.items?.push(newNode);
       const stage = this.get("stage");
       const root = this.get("root");
-      await stage?.add({ config: lodashEs.cloneDeep(newNode), root: lodashEs.cloneDeep(root) });
+      await stage?.add({ config: lodashEs.cloneDeep(newNode), parent: lodashEs.cloneDeep(parentNode), root: lodashEs.cloneDeep(root) });
       if (layout === Layout.ABSOLUTE) {
         const fixedLeft = fixNodeLeft(newNode, parentNode, stage?.renderer.contentWindow?.document);
         if (typeof fixedLeft !== "undefined") {
@@ -1642,8 +1627,19 @@
     name: type
   };
 
+  const log = (...args) => {
+  };
+  const info = (...args) => {
+  };
+  const warn = (...args) => {
+  };
+  const debug = (...args) => {
+  };
+  const error = (...args) => {
+  };
+
   const _sfc_main$i = vue.defineComponent({
-    components: { Plus: icons.Plus },
+    components: { Plus: iconsVue.Plus },
     setup() {
       const services = vue.inject("services");
       return {
@@ -1823,7 +1819,7 @@
 
   const _sfc_main$f = vue.defineComponent({
     name: "m-icon",
-    components: { Edit: icons.Edit },
+    components: { Edit: iconsVue.Edit },
     props: {
       icon: {
         type: [String, Object]
@@ -1860,7 +1856,7 @@
   var MIcon = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$f]]);
 
   const _sfc_main$e = vue.defineComponent({
-    components: { MIcon, ArrowDown: icons.ArrowDown },
+    components: { MIcon, ArrowDown: iconsVue.ArrowDown },
     props: {
       data: {
         type: [Object, String],
@@ -1899,7 +1895,7 @@
           case "delete":
             return {
               type: "button",
-              icon: vue.markRaw(icons.Delete),
+              icon: vue.markRaw(iconsVue.Delete),
               tooltip: "\u522A\u9664",
               disabled: () => services?.editorService.get("node")?.type === schema.NodeType.PAGE,
               handler: () => services?.editorService.remove(services?.editorService.get("node"))
@@ -1907,7 +1903,7 @@
           case "undo":
             return {
               type: "button",
-              icon: vue.markRaw(icons.Back),
+              icon: vue.markRaw(iconsVue.Back),
               tooltip: "\u540E\u9000",
               disabled: () => !services?.historyService.state.canUndo,
               handler: () => services?.editorService.undo()
@@ -1915,7 +1911,7 @@
           case "redo":
             return {
               type: "button",
-              icon: vue.markRaw(icons.Right),
+              icon: vue.markRaw(iconsVue.Right),
               tooltip: "\u524D\u8FDB",
               disabled: () => !services?.historyService.state.canRedo,
               handler: () => services?.editorService.redo()
@@ -1923,28 +1919,28 @@
           case "zoom-in":
             return {
               type: "button",
-              icon: vue.markRaw(icons.ZoomIn),
+              icon: vue.markRaw(iconsVue.ZoomIn),
               tooltip: "\u653E\u5927",
               handler: zoomInHandler
             };
           case "zoom-out":
             return {
               type: "button",
-              icon: vue.markRaw(icons.ZoomOut),
+              icon: vue.markRaw(iconsVue.ZoomOut),
               tooltip: "\u7E2E\u5C0F",
               handler: zoomOutHandler
             };
           case "rule":
             return {
               type: "button",
-              icon: vue.markRaw(icons.ScaleToOriginal),
+              icon: vue.markRaw(iconsVue.ScaleToOriginal),
               tooltip: showRule.value ? "\u9690\u85CF\u6807\u5C3A" : "\u663E\u793A\u6807\u5C3A",
               handler: () => uiService?.set("showRule", !showRule.value)
             };
           case "guides":
             return {
               type: "button",
-              icon: vue.markRaw(icons.Grid),
+              icon: vue.markRaw(iconsVue.Grid),
               tooltip: showGuides.value ? "\u9690\u85CF\u53C2\u8003\u7EBF" : "\u663E\u793A\u53C2\u8003\u7EBF",
               handler: () => uiService?.set("showGuides", !showGuides.value)
             };
@@ -1973,8 +1969,8 @@
         }
       };
       return {
-        ZoomIn: vue.markRaw(icons.ZoomIn),
-        ZoomOut: vue.markRaw(icons.ZoomOut),
+        ZoomIn: vue.markRaw(iconsVue.ZoomIn),
+        ZoomOut: vue.markRaw(iconsVue.ZoomOut),
         item,
         zoom,
         disabled,
@@ -2307,20 +2303,9 @@
             }
             return;
           }
-          if (timeout)
+          if (timeout || !stage.value)
             return;
-          timeout = globalThis.setTimeout(async () => {
-            if (!stageOptions || !stage.value)
-              return;
-            const doc = stage.value.renderer.contentWindow?.document;
-            const els = stage.value.getElementsFromPoint(e);
-            for (const el of els) {
-              if (doc && !el.id.startsWith(StageCore.GHOST_EL_ID_PREFIX) && await stageOptions.isContainer(el)) {
-                utils.addClassName(el, doc, stageOptions?.containerHighlightClassName);
-                break;
-              }
-            }
-          }, stageOptions?.containerHighlightDuration);
+          timeout = stage.value.getAddContainerHighlightClassNameTimeout(e);
         }
       };
     }
@@ -2551,7 +2536,7 @@
             {
               text: "\u6807\u7B7E\u9875",
               type: "button",
-              icon: icons.Files,
+              icon: iconsVue.Files,
               handler: () => {
                 services?.editorService.add({
                   type: "tab-pane"
@@ -2576,14 +2561,14 @@
           {
             type: "button",
             text: "\u65B0\u589E",
-            icon: vue.markRaw(icons.Plus),
+            icon: vue.markRaw(iconsVue.Plus),
             display: () => node.value?.items,
             items: getSubMenuData.value
           },
           {
             type: "button",
             text: "\u590D\u5236",
-            icon: vue.markRaw(icons.DocumentCopy),
+            icon: vue.markRaw(iconsVue.DocumentCopy),
             display: () => !isRoot.value,
             handler: () => {
               node.value && services?.editorService.copy(node.value);
@@ -2592,7 +2577,7 @@
           {
             type: "button",
             text: "\u5220\u9664",
-            icon: vue.markRaw(icons.Delete),
+            icon: vue.markRaw(iconsVue.Delete),
             display: () => !isRoot.value && !isPage.value,
             handler: () => {
               node.value && services?.editorService.remove(node.value);
@@ -2835,7 +2820,7 @@
             case "component-list":
               return {
                 type: "component",
-                icon: icons.Coin,
+                icon: iconsVue.Coin,
                 text: "\u7EC4\u4EF6",
                 component: ComponentListPanel,
                 slots: {}
@@ -2843,7 +2828,7 @@
             case "layer":
               return {
                 type: "component",
-                icon: icons.Files,
+                icon: iconsVue.Files,
                 text: "\u5DF2\u9009\u7EC4\u4EF6",
                 component: LayerPanel,
                 slots: {}
@@ -3028,14 +3013,14 @@
     };
   };
   const _sfc_main$5 = vue.defineComponent({
-    components: { ArrowLeftBold: icons.ArrowLeftBold, ArrowRightBold: icons.ArrowRightBold, CaretBottom: icons.CaretBottom, Plus: icons.Plus, ToolButton },
+    components: { ArrowLeftBold: iconsVue.ArrowLeftBold, ArrowRightBold: iconsVue.ArrowRightBold, CaretBottom: iconsVue.CaretBottom, Plus: iconsVue.Plus, ToolButton },
     setup() {
       const services = vue.inject("services");
       const editorService = services?.editorService;
       const root = vue.computed(() => editorService?.get("root"));
       return {
-        Delete: vue.markRaw(icons.Delete),
-        DocumentCopy: vue.markRaw(icons.DocumentCopy),
+        Delete: vue.markRaw(iconsVue.Delete),
+        DocumentCopy: vue.markRaw(iconsVue.DocumentCopy),
         ...useScroll(root),
         root,
         page: vue.computed(() => editorService?.get("page")),
@@ -3440,7 +3425,7 @@
           {
             type: "button",
             text: "\u590D\u5236",
-            icon: vue.markRaw(icons.DocumentCopy),
+            icon: vue.markRaw(iconsVue.DocumentCopy),
             handler: () => {
               node.value && editorService?.copy(node.value);
               canPaste.value = true;
@@ -3473,7 +3458,7 @@
           {
             type: "button",
             text: "\u4E0A\u79FB\u4E00\u5C42",
-            icon: vue.markRaw(icons.Top),
+            icon: vue.markRaw(iconsVue.Top),
             display: () => !isPage.value,
             handler: () => {
               editorService?.moveLayer(1);
@@ -3482,7 +3467,7 @@
           {
             type: "button",
             text: "\u4E0B\u79FB\u4E00\u5C42",
-            icon: vue.markRaw(icons.Bottom),
+            icon: vue.markRaw(iconsVue.Bottom),
             display: () => !isPage.value,
             handler: () => {
               editorService?.moveLayer(-1);
@@ -3512,7 +3497,7 @@
           {
             type: "button",
             text: "\u5220\u9664",
-            icon: icons.Delete,
+            icon: iconsVue.Delete,
             display: () => !isPage.value,
             handler: () => {
               node.value && editorService?.remove(node.value);