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

package/README.md

@@ -0,0 +1 @@
+# [文档](https://tencent.github.io/tmagic-editor/docs/)

package/dist/tmagic-editor.es.js

@@ -4,10 +4,11 @@ import * as monaco from 'monaco-editor';
 import { Plus, Edit, ArrowDown, Grid, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Delete, Files, Coin, ArrowLeftBold, ArrowRightBold, CaretBottom } from '@element-plus/icons';
 import { NodeType } from '@tmagic/schema';
 import { cloneDeep, random, mergeWith, throttle } from 'lodash-es';
-import { toLine, isPop, getNodePath } from '@tmagic/utils';
+import { toLine, isPop, getNodePath, isNumber, isPage } from '@tmagic/utils';
 import { EventEmitter as EventEmitter$2 } from 'events';
 import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
 import { ElMessage } from 'element-plus';
+import KeyController from 'keycon';
 import StageCore from '@tmagic/stage';
 
 var _export_sfc = (sfc, props) => {
@@ -609,7 +610,7 @@ class Props extends BaseService {
   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";
@@ -621,6 +622,7 @@ class Props extends BaseService {
     }
     return cloneDeep({
       ...getDefaultPropsValue(type),
+      ...defaultValue,
       ...this.state.propsValueMap[type] || {}
     });
   }
@@ -682,7 +684,7 @@ const updatePopId = (oldId, popId, pageConfig) => {
 };
 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 (isPop(config) && parent?.type === NodeType.PAGE) {
     updatePopId(oldId, config.id, parent);
@@ -705,11 +707,25 @@ const toRelative = (node) => {
   };
   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 || !isNumber(height))
+    return style;
+  const { height: parentHeight } = parentNode.style;
+  if (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;
   }
@@ -756,7 +772,9 @@ const Fixed2Other = async (node, root, getLayout) => {
   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);
@@ -901,7 +919,7 @@ class Editor$1 extends BaseService {
     if (!parentNode)
       throw new Error("\u672A\u627E\u5230\u7236\u5143\u7D20");
     const layout = await this.getLayout(parentNode);
-    const newNode = initPosition({ ...toRaw(await propsService.getPropsValue(type)), ...config2 }, layout);
+    const newNode = initPosition({ ...toRaw(await propsService.getPropsValue(type, config2)) }, layout, parentNode, this.get("stage"));
     if ((parentNode?.type === NodeType.ROOT || curNode.type === NodeType.ROOT) && newNode.type !== NodeType.PAGE) {
       throw new Error("app\u4E0B\u4E0D\u80FD\u6DFB\u52A0\u7EC4\u4EF6");
     }
@@ -1326,7 +1344,7 @@ const fillConfig = (config = []) => [
                 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,
@@ -3049,9 +3067,9 @@ const _sfc_main$a = defineComponent({
         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;
     };
     watchEffect(init);
     services?.propsService.on("props-configs-change", init);
@@ -3109,11 +3127,11 @@ const _sfc_main$9 = defineComponent({
       searchText,
       collapseValue,
       list,
-      appendComponent({ text, type, ...config }) {
+      appendComponent({ text, type, data = {} }) {
         services?.editorService.add({
           name: text,
           type,
-          ...config
+          ...data
         });
       }
     };
@@ -3203,7 +3221,8 @@ const _sfc_main$8 = defineComponent({
       append(config) {
         services?.editorService.add({
           name: config.text,
-          type: config.type
+          type: config.type,
+          ...config.data || {}
         });
       },
       remove() {
@@ -4348,12 +4367,48 @@ const _sfc_main$1 = defineComponent({
   },
   setup() {
     const services = inject("services");
+    const workspace = ref();
+    const node = computed(() => services?.editorService.get("node"));
+    let keycon;
+    const mouseenterHandler = () => {
+      workspace.value?.focus();
+    };
+    const mouseleaveHandler = () => {
+      workspace.value?.blur();
+    };
+    onMounted(() => {
+      workspace.value?.addEventListener("mouseenter", mouseenterHandler);
+      workspace.value?.addEventListener("mouseleave", mouseleaveHandler);
+      keycon = new KeyController(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);
+        }
+      });
+    });
+    onUnmounted(() => {
+      workspace.value?.removeEventListener("mouseenter", mouseenterHandler);
+      workspace.value?.removeEventListener("mouseleave", mouseleaveHandler);
+      keycon.destroy();
+    });
     return {
+      workspace,
       page: 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 = resolveComponent("magic-stage");
   const _component_page_bar = resolveComponent("page-bar");
@@ -4375,7 +4430,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       _: 3
     })
-  ]);
+  ], 512);
 }
 var Workspace = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);