@tmagic/editor 1.0.0-beta.11 → 1.0.0-beta.12

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('monaco-editor'), require('@element-plus/icons'), require('@tmagic/schema'), require('lodash-es'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('element-plus'), require('@tmagic/stage')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', 'monaco-editor', '@element-plus/icons', '@tmagic/schema', 'lodash-es', '@tmagic/utils', 'events', '@tmagic/core', 'element-plus', '@tmagic/stage'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.vue, global.serialize, global.monaco, global.icons, global.schema, global.lodashEs, global.utils, global.events, global.core, global.elementPlus, global.StageCore));
-})(this, (function (exports, vue, serialize, monaco, icons, schema, lodashEs, utils, events, core, elementPlus, StageCore) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('monaco-editor'), require('@element-plus/icons'), require('@tmagic/schema'), require('lodash-es'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('element-plus'), require('keycon'), require('@tmagic/stage')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', 'monaco-editor', '@element-plus/icons', '@tmagic/schema', 'lodash-es', '@tmagic/utils', 'events', '@tmagic/core', 'element-plus', 'keycon', '@tmagic/stage'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.vue, global.serialize, global.monaco, global.icons, global.schema, global.lodashEs, global.utils, global.events, global.core, global.elementPlus, global.KeyController, global.StageCore));
+})(this, (function (exports, vue, serialize, monaco, icons, schema, lodashEs, utils, events, core, elementPlus, KeyController, StageCore) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,6 +26,7 @@
 
   var serialize__default = /*#__PURE__*/_interopDefaultLegacy(serialize);
   var monaco__namespace = /*#__PURE__*/_interopNamespace(monaco);
+  var KeyController__default = /*#__PURE__*/_interopDefaultLegacy(KeyController);
   var StageCore__default = /*#__PURE__*/_interopDefaultLegacy(StageCore);
 
   var _export_sfc = (sfc, props) => {
@@ -627,7 +628,7 @@
     setPropsValue(type, value) {
       this.state.propsValueMap[type] = value;
     }
-    async getPropsValue(type) {
+    async getPropsValue(type, defaultValue = {}) {
       if (type === "area") {
         const value = await this.getPropsValue("button");
         value.className = "action-area";
@@ -639,6 +640,7 @@
       }
       return lodashEs.cloneDeep({
         ...getDefaultPropsValue(type),
+        ...defaultValue,
         ...this.state.propsValueMap[type] || {}
       });
     }
@@ -700,7 +702,7 @@
   };
   const setNewItemId = (config, parent) => {
     const oldId = config.id;
-    config.id = generateId(config.type);
+    config.id = generateId(config.type || "component");
     config.name = `${config.name?.replace(/_(\d+)$/, "")}_${config.id}`;
     if (utils.isPop(config) && parent?.type === schema.NodeType.PAGE) {
       updatePopId(oldId, config.id, parent);
@@ -723,11 +725,25 @@
     };
     return node;
   };
-  const initPosition = (node, layout) => {
+  const setTop2Middle = (node, parentNode, stage) => {
+    const style = node.style || {};
+    const height = style.height || 0;
+    if (!stage || style.top || !parentNode.style || !utils.isNumber(height))
+      return style;
+    const { height: parentHeight } = parentNode.style;
+    if (utils.isPage(parentNode)) {
+      const { scrollTop = 0, wrapperHeight } = stage.mask;
+      style.top = (wrapperHeight - height) / 2 + scrollTop;
+    } else {
+      style.top = (parentHeight - height) / 2;
+    }
+    return style;
+  };
+  const initPosition = (node, layout, parentNode, stage) => {
     if (layout === Layout.ABSOLUTE) {
       node.style = {
         position: "absolute",
-        ...node.style || {}
+        ...setTop2Middle(node, parentNode, stage)
       };
       return node;
     }
@@ -774,7 +790,9 @@
     const cur = path.pop();
     const offset = {
       left: cur?.style?.left || 0,
-      top: cur?.style?.top || 0
+      top: cur?.style?.top || 0,
+      right: "",
+      bottom: ""
     };
     path.forEach((value) => {
       offset.left = offset.left - globalThis.parseFloat(value.style?.left || 0);
@@ -919,7 +937,7 @@
       if (!parentNode)
         throw new Error("\u672A\u627E\u5230\u7236\u5143\u7D20");
       const layout = await this.getLayout(parentNode);
-      const newNode = initPosition({ ...vue.toRaw(await propsService.getPropsValue(type)), ...config2 }, layout);
+      const newNode = initPosition({ ...vue.toRaw(await propsService.getPropsValue(type, config2)) }, layout, parentNode, this.get("stage"));
       if ((parentNode?.type === schema.NodeType.ROOT || curNode.type === schema.NodeType.ROOT) && newNode.type !== schema.NodeType.PAGE) {
         throw new Error("app\u4E0B\u4E0D\u80FD\u6DFB\u52A0\u7EC4\u4EF6");
       }
@@ -1344,7 +1362,7 @@
                   type: "select",
                   options: (mForm, { model }) => {
                     const node = editorService.getNodeById(model.to);
-                    if (!node)
+                    if (!node?.type)
                       return [];
                     return eventsService.getMethod(node.type).map((option) => ({
                       text: option.label,
@@ -3067,9 +3085,9 @@
           curFormConfig.value = [];
           return;
         }
-        values.value = node.value;
         const type = node.value.type || (node.value.items ? "container" : "text");
         curFormConfig.value = await services?.propsService.getPropsConfig(type) || [];
+        values.value = node.value;
       };
       vue.watchEffect(init);
       services?.propsService.on("props-configs-change", init);
@@ -3127,11 +3145,11 @@
         searchText,
         collapseValue,
         list,
-        appendComponent({ text, type, ...config }) {
+        appendComponent({ text, type, data = {} }) {
           services?.editorService.add({
             name: text,
             type,
-            ...config
+            ...data
           });
         }
       };
@@ -3221,7 +3239,8 @@
         append(config) {
           services?.editorService.add({
             name: config.text,
-            type: config.type
+            type: config.type,
+            ...config.data || {}
           });
         },
         remove() {
@@ -4366,12 +4385,48 @@
     },
     setup() {
       const services = vue.inject("services");
+      const workspace = vue.ref();
+      const node = vue.computed(() => services?.editorService.get("node"));
+      let keycon;
+      const mouseenterHandler = () => {
+        workspace.value?.focus();
+      };
+      const mouseleaveHandler = () => {
+        workspace.value?.blur();
+      };
+      vue.onMounted(() => {
+        workspace.value?.addEventListener("mouseenter", mouseenterHandler);
+        workspace.value?.addEventListener("mouseleave", mouseleaveHandler);
+        keycon = new KeyController__default["default"](workspace.value);
+        keycon.keyup("delete", () => {
+          node.value && services?.editorService.remove(node.value);
+        }).keyup(["ctrl", "c"], () => {
+          node.value && services?.editorService.copy(node.value);
+        }).keyup(["ctrl", "v"], () => {
+          node.value && services?.editorService.paste();
+        }).keyup(["ctrl", "x"], () => {
+          if (node.value && services) {
+            services.editorService.copy(node.value);
+            services.editorService.remove(node.value);
+          }
+        });
+      });
+      vue.onUnmounted(() => {
+        workspace.value?.removeEventListener("mouseenter", mouseenterHandler);
+        workspace.value?.removeEventListener("mouseleave", mouseleaveHandler);
+        keycon.destroy();
+      });
       return {
+        workspace,
         page: vue.computed(() => services?.editorService.get("page"))
       };
     }
   });
-  const _hoisted_1 = { class: "m-editor-workspace" };
+  const _hoisted_1 = {
+    class: "m-editor-workspace",
+    tabindex: "1",
+    ref: "workspace"
+  };
   function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_magic_stage = vue.resolveComponent("magic-stage");
     const _component_page_bar = vue.resolveComponent("page-bar");
@@ -4393,7 +4448,7 @@
         ]),
         _: 3
       })
-    ]);
+    ], 512);
   }
   var Workspace = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);