@tmagic/editor 1.3.0-beta.3 → 1.3.0-beta.5

package/dist/tmagic-editor.umd.cjs

@@ -1260,6 +1260,7 @@
       {
         name: "events",
         src: "component",
+        labelWidth: "100px",
         type: "event-select"
       }
     ]
@@ -1490,6 +1491,7 @@
     DragType2["LAYER_TREE"] = "layer-tree";
     return DragType2;
   })(DragType || {});
+  const UI_SELECT_MODE_EVENT_NAME = "ui-select";
 
   const COPY_STORAGE_KEY = "$MagicEditorCopyData";
   const getPageList = (app) => {
@@ -2940,6 +2942,7 @@
       icon: {}
     },
     setup(__props) {
+      const isRelativePath = (str) => /^(\.|(\.\.)?\/)/.test(str);
       return (_ctx, _cache) => {
         return !_ctx.icon ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
           key: 0,
@@ -2949,7 +2952,7 @@
             vue.createVNode(vue.unref(iconsVue.Edit))
           ]),
           _: 1
-        })) : typeof _ctx.icon === "string" && _ctx.icon.startsWith("http") ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
+        })) : typeof _ctx.icon === "string" && (_ctx.icon.startsWith("http") || isRelativePath(_ctx.icon)) ? (vue.openBlock(), vue.createBlock(vue.unref(design.TMagicIcon), {
           key: 1,
           class: "magic-editor-icon"
         }, {
@@ -3077,9 +3080,7 @@
       );
       const selectConfig = {
         type: "select",
-        text: "代码块",
         name: props.name,
-        labelWidth: "80px",
         options: () => {
           if (codeDsl.value) {
             return lodashEs.map(codeDsl.value, (value, key) => ({
@@ -3113,8 +3114,9 @@
               class: "select",
               config: selectConfig,
               model: _ctx.model,
+              size: _ctx.size,
               onChange: onParamsChangeHandler
-            }, null, 8, ["model"]),
+            }, null, 8, ["model", "size"]),
             _ctx.model[_ctx.name] ? (vue.openBlock(), vue.createBlock(_sfc_main$M, {
               key: 0,
               class: "icon",
@@ -3933,7 +3935,6 @@
         if (!paramStatements)
           return [];
         return paramStatements.map((paramState) => ({
-          labelWidth: "100px",
           text: paramState.name,
           ...paramState
         }));
@@ -3962,9 +3963,7 @@
       );
       const cascaderConfig = vue.computed(() => ({
         type: "cascader",
-        text: "数据源方法",
         name: props.name,
-        labelWidth: "80px",
         options: methodsOptions.value,
         onChange: (formState, dataSourceMethod) => {
           setParamsConfig(dataSourceMethod, formState);
@@ -4370,7 +4369,6 @@
         const defaultActionTypeConfig = {
           name: "actionType",
           text: "联动类型",
-          labelWidth: "80px",
           type: "select",
           defaultValue: schema.ActionType.COMP,
           options: () => [
@@ -4399,7 +4397,6 @@
         const defaultTargetCompConfig = {
           name: "to",
           text: "联动组件",
-          labelWidth: "80px",
           type: "ui-select",
           display: (mForm, { model }) => model.actionType === schema.ActionType.COMP
         };
@@ -4409,7 +4406,6 @@
         const defaultCompActionConfig = {
           name: "method",
           text: "动作",
-          labelWidth: "80px",
           type: "select",
           display: (mForm, { model }) => model.actionType === schema.ActionType.COMP,
           options: (mForm, { model }) => {
@@ -4427,7 +4423,7 @@
       const codeActionConfig = vue.computed(() => {
         const defaultCodeActionConfig = {
           type: "code-select-col",
-          labelWidth: 0,
+          text: "代码块",
           name: "codeId",
           disabled: () => !codeBlockService?.getEditStatus(),
           display: (mForm, { model }) => model.actionType === schema.ActionType.CODE
@@ -4437,8 +4433,8 @@
       const dataSourceActionConfig = vue.computed(() => {
         const defaultDataSourceActionConfig = {
           type: "data-source-method-select",
+          text: "数据源方法",
           name: "dataSourceMethod",
-          labelWidth: 0,
           display: (mForm, { model }) => model.actionType === schema.ActionType.DATA_SOURCE
         };
         return { ...defaultDataSourceActionConfig, ...props.config.dataSourceActionConfig };
@@ -4484,6 +4480,7 @@
             name: "actions",
             expandAll: true,
             enableToggleMode: false,
+            titlePrefix: "动作",
             items: [
               actionTypeConfig.value,
               targetCompConfig.value,
@@ -4553,6 +4550,7 @@
                 size: _ctx.size,
                 config: actionsConfig.value,
                 model: cardItem,
+                "label-width": _ctx.config.labelWidth || "100px",
                 onChange: onChangeHandler
               }, {
                 header: vue.withCtx(() => [
@@ -4574,7 +4572,7 @@
                   }, null, 8, ["icon", "disabled", "size", "onClick"])
                 ]),
                 _: 2
-              }, 1032, ["disabled", "size", "config", "model"]);
+              }, 1032, ["disabled", "size", "config", "model", "label-width"]);
             }), 128))
           ]))
         ]);
@@ -4715,7 +4713,7 @@
           return;
         services.uiService.set("uiSelectMode", false);
         uiSelectMode.value = false;
-        globalThis.document.removeEventListener("ui-select", clickHandler);
+        globalThis.document.removeEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler);
       };
       const clickHandler = ({ detail }) => {
         if (detail.id) {
@@ -4736,7 +4734,7 @@
           return;
         services.uiService.set("uiSelectMode", true);
         uiSelectMode.value = true;
-        globalThis.document.addEventListener("ui-select", clickHandler);
+        globalThis.document.addEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler);
       };
       const deleteHandler = () => {
         if (props.model) {
@@ -6894,7 +6892,7 @@
         if (!nodeStatusMap?.value)
           return;
         if (uiService?.get("uiSelectMode")) {
-          document.dispatchEvent(new CustomEvent("ui-select", { detail: props.data }));
+          document.dispatchEvent(new CustomEvent(UI_SELECT_MODE_EVENT_NAME, { detail: props.data }));
           return;
         }
         if (hasChilren.value && !props.isCtrlKeyDown) {
@@ -6908,7 +6906,10 @@
       };
       const contextmenuHandler = (event) => {
         event.preventDefault();
-        nodeClickHandler();
+        const nodes = editorService?.get("nodes") || [];
+        if (nodes.length < 2 || !nodes.includes(props.data)) {
+          nodeClickHandler();
+        }
         emit("node-contextmenu", event, props.data);
       };
       const nodeContentmenuHandler = (event, node) => {
@@ -7013,7 +7014,131 @@
     }
   });
 
-  const useKeybinding = (services) => {
+  var KeyBindingContainerKey = /* @__PURE__ */ ((KeyBindingContainerKey2) => {
+    KeyBindingContainerKey2["STAGE"] = "stage";
+    KeyBindingContainerKey2["LAYER_PANEL"] = "layer-panel";
+    return KeyBindingContainerKey2;
+  })(KeyBindingContainerKey || {});
+  const keybindingConfig = [
+    {
+      command: KeyBindingCommand.DELETE_NODE,
+      keybinding: ["delete", "backspace"],
+      when: [
+        ["stage" /* STAGE */, "keyup"],
+        ["layer-panel" /* LAYER_PANEL */, "keydown"]
+      ]
+    },
+    {
+      command: KeyBindingCommand.COPY_NODE,
+      keybinding: "ctrl+c",
+      when: [
+        ["stage" /* STAGE */, "keydown"],
+        ["layer-panel" /* LAYER_PANEL */, "keydown"]
+      ]
+    },
+    {
+      command: KeyBindingCommand.PASTE_NODE,
+      keybinding: "ctrl+v",
+      when: [
+        ["stage" /* STAGE */, "keydown"],
+        ["layer-panel" /* LAYER_PANEL */, "keydown"]
+      ]
+    },
+    {
+      command: KeyBindingCommand.CUT_NODE,
+      keybinding: "ctrl+x",
+      when: [
+        ["stage" /* STAGE */, "keydown"],
+        ["layer-panel" /* LAYER_PANEL */, "keydown"]
+      ]
+    },
+    {
+      command: KeyBindingCommand.UNDO,
+      keybinding: "ctrl+z",
+      when: [
+        ["stage" /* STAGE */, "keydown"],
+        ["layer-panel" /* LAYER_PANEL */, "keydown"]
+      ]
+    },
+    {
+      command: KeyBindingCommand.REDO,
+      keybinding: "ctrl+shift+z",
+      when: [
+        ["stage" /* STAGE */, "keydown"],
+        ["layer-panel" /* LAYER_PANEL */, "keydown"]
+      ]
+    },
+    {
+      command: KeyBindingCommand.MOVE_UP_1,
+      keybinding: "up",
+      when: [["stage" /* STAGE */, "keydown"]]
+    },
+    {
+      command: KeyBindingCommand.MOVE_DOWN_1,
+      keybinding: "down",
+      when: [["stage" /* STAGE */, "keydown"]]
+    },
+    {
+      command: KeyBindingCommand.MOVE_LEFT_1,
+      keybinding: "left",
+      when: [["stage" /* STAGE */, "keydown"]]
+    },
+    {
+      command: KeyBindingCommand.MOVE_RIGHT_1,
+      keybinding: "right",
+      when: [["stage" /* STAGE */, "keydown"]]
+    },
+    {
+      command: KeyBindingCommand.MOVE_UP_10,
+      keybinding: "ctrl+up",
+      when: [["stage" /* STAGE */, "keydown"]]
+    },
+    {
+      command: KeyBindingCommand.MOVE_DOWN_10,
+      keybinding: "ctrl+down",
+      when: [["stage" /* STAGE */, "keydown"]]
+    },
+    {
+      command: KeyBindingCommand.MOVE_LEFT_10,
+      keybinding: "ctrl+left",
+      when: [["stage" /* STAGE */, "keydown"]]
+    },
+    {
+      command: KeyBindingCommand.MOVE_RIGHT_10,
+      keybinding: "ctrl+right",
+      when: [["stage" /* STAGE */, "keydown"]]
+    },
+    {
+      command: KeyBindingCommand.SWITCH_NODE,
+      keybinding: "tab",
+      when: [
+        ["stage" /* STAGE */, "keydown"],
+        ["layer-panel" /* LAYER_PANEL */, "keydown"]
+      ]
+    },
+    {
+      command: KeyBindingCommand.ZOOM_IN,
+      keybinding: ["ctrl+=", "ctrl+numpadplus"],
+      when: [["stage" /* STAGE */, "keydown"]]
+    },
+    {
+      command: KeyBindingCommand.ZOOM_OUT,
+      keybinding: ["ctrl+-", "ctrl+numpad-"],
+      when: [["stage" /* STAGE */, "keydown"]]
+    },
+    {
+      command: KeyBindingCommand.ZOOM_FIT,
+      keybinding: "ctrl+0",
+      when: [["stage" /* STAGE */, "keydown"]]
+    },
+    {
+      command: KeyBindingCommand.ZOOM_RESET,
+      keybinding: "ctrl+1",
+      when: [["stage" /* STAGE */, "keydown"]]
+    }
+  ];
+
+  const useKeybinding = (services, contianer) => {
     const keybindingService = services?.keybindingService;
     const isCtrlKeyDown = vue.ref(false);
     const windowBlurHandler = () => {
@@ -7037,11 +7162,14 @@
         when: [["global", "keyup"]]
       }
     ]);
-    vue.onMounted(() => {
-      globalThis.addEventListener("blur", windowBlurHandler);
-    });
-    vue.onBeforeUnmount(() => {
-      globalThis.removeEventListener("blur", windowBlurHandler);
+    vue.watchEffect(() => {
+      if (contianer.value) {
+        globalThis.addEventListener("blur", windowBlurHandler);
+        keybindingService?.registeEl(KeyBindingContainerKey.LAYER_PANEL, contianer.value);
+      } else {
+        globalThis.removeEventListener("blur", windowBlurHandler);
+        keybindingService?.unregisteEl(KeyBindingContainerKey.LAYER_PANEL);
+      }
     });
     return {
       isCtrlKeyDown
@@ -7106,16 +7234,20 @@
     );
     services?.editorService.on("add", (newNodes) => {
       newNodes.forEach((node) => {
-        nodeStatusMap.value?.set(node.id, {
-          visible: true,
-          expand: Array.isArray(node.items),
-          selected: true
+        traverseNode(node, (node2) => {
+          nodeStatusMap.value?.set(node2.id, {
+            visible: true,
+            expand: Array.isArray(node2.items),
+            selected: true
+          });
         });
       });
     });
     services?.editorService.on("remove", (nodes2) => {
       nodes2.forEach((node) => {
-        nodeStatusMap.value?.delete(node.id);
+        traverseNode(node, (node2) => {
+          nodeStatusMap.value?.delete(node2.id);
+        });
       });
     });
     return {
@@ -7135,10 +7267,11 @@
     setup(__props) {
       const services = vue.inject("services");
       const editorService = services?.editorService;
+      const layerTreeContainer = vue.ref();
       const page = vue.computed(() => editorService?.get("page"));
       const root = vue.computed(() => editorService?.get("root"));
       const { nodeStatusMap } = useNodeStatus(services, page);
-      const { isCtrlKeyDown } = useKeybinding(services);
+      const { isCtrlKeyDown } = useKeybinding(services, layerTreeContainer);
       vue.provide("nodeStatusMap", nodeStatusMap);
       const { filterText, filterTextChangeHandler } = useFilter(nodeStatusMap, page);
       const collapseAllHandler = () => {
@@ -7165,6 +7298,8 @@
             vue.createVNode(_sfc_main$t, { onSearch: vue.unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
             vue.createElementVNode("div", {
               class: "magic-editor-layer-tree",
+              ref_key: "layerTreeContainer",
+              ref: layerTreeContainer,
               tabindex: "-1",
               onDragover: _cache[0] || (_cache[0] = //@ts-ignore
               (...args) => vue.unref(handleDragOver) && vue.unref(handleDragOver)(...args))
@@ -7181,7 +7316,7 @@
                 ]),
                 _: 3
               }, 8, ["data", "filter-text", "is-ctrl-key-down"])) : vue.createCommentVNode("", true)
-            ], 32),
+            ], 544),
             (vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
               vue.createVNode(_sfc_main$j, {
                 ref_key: "menu",
@@ -7302,10 +7437,18 @@
                             onDrag: dragHandler
                           }, [
                             vue.renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
-                              vue.createVNode(_sfc_main$M, {
-                                title: item.text,
-                                icon: item.icon
-                              }, null, 8, ["title", "icon"]),
+                              vue.createVNode(vue.unref(design.TMagicTooltip), {
+                                placement: "right",
+                                disabled: !Boolean(item.desc),
+                                content: item.desc
+                              }, {
+                                default: vue.withCtx(() => [
+                                  vue.createVNode(_sfc_main$M, {
+                                    icon: item.icon
+                                  }, null, 8, ["icon"])
+                                ]),
+                                _: 2
+                              }, 1032, ["disabled", "content"]),
                               vue.createElementVNode("span", {
                                 title: item.text
                               }, vue.toDisplayString(item.text), 9, _hoisted_2$7)
@@ -7916,7 +8059,7 @@
       canSelect: (el, event, stop) => {
         const elCanSelect = stageOptions.canSelect(el);
         if (uiSelectMode.value && elCanSelect && event.type === "mousedown") {
-          document.dispatchEvent(new CustomEvent("ui-select", { detail: el }));
+          document.dispatchEvent(new CustomEvent(UI_SELECT_MODE_EVENT_NAME, { detail: el }));
           return stop();
         }
         return elCanSelect;
@@ -8521,7 +8664,7 @@
       vue.onMounted(() => {
         if (stageWrap.value?.container) {
           resizeObserver.observe(stageWrap.value.container);
-          services?.keybindingService.registeEl("stage", stageWrap.value.container);
+          services?.keybindingService.registeEl(KeyBindingContainerKey.STAGE, stageWrap.value.container);
         }
       });
       vue.onUnmounted(() => {
@@ -9593,125 +9736,6 @@
   }
   const keybindingService = new Keybinding();
 
-  const keybindingConfig = [
-    {
-      command: KeyBindingCommand.DELETE_NODE,
-      keybinding: ["delete", "backspace"],
-      when: [
-        ["stage", "keyup"],
-        ["layer-panel", "keydown"]
-      ]
-    },
-    {
-      command: KeyBindingCommand.COPY_NODE,
-      keybinding: "ctrl+c",
-      when: [
-        ["stage", "keydown"],
-        ["layer-panel", "keydown"]
-      ]
-    },
-    {
-      command: KeyBindingCommand.PASTE_NODE,
-      keybinding: "ctrl+v",
-      when: [
-        ["stage", "keydown"],
-        ["layer-panel", "keydown"]
-      ]
-    },
-    {
-      command: KeyBindingCommand.CUT_NODE,
-      keybinding: "ctrl+x",
-      when: [
-        ["stage", "keydown"],
-        ["layer-panel", "keydown"]
-      ]
-    },
-    {
-      command: KeyBindingCommand.UNDO,
-      keybinding: "ctrl+z",
-      when: [
-        ["stage", "keydown"],
-        ["layer-panel", "keydown"]
-      ]
-    },
-    {
-      command: KeyBindingCommand.REDO,
-      keybinding: "ctrl+shift+z",
-      when: [
-        ["stage", "keydown"],
-        ["layer-panel", "keydown"]
-      ]
-    },
-    {
-      command: KeyBindingCommand.MOVE_UP_1,
-      keybinding: "up",
-      when: [["stage", "keydown"]]
-    },
-    {
-      command: KeyBindingCommand.MOVE_DOWN_1,
-      keybinding: "down",
-      when: [["stage", "keydown"]]
-    },
-    {
-      command: KeyBindingCommand.MOVE_LEFT_1,
-      keybinding: "left",
-      when: [["stage", "keydown"]]
-    },
-    {
-      command: KeyBindingCommand.MOVE_RIGHT_1,
-      keybinding: "right",
-      when: [["stage", "keydown"]]
-    },
-    {
-      command: KeyBindingCommand.MOVE_UP_10,
-      keybinding: "ctrl+up",
-      when: [["stage", "keydown"]]
-    },
-    {
-      command: KeyBindingCommand.MOVE_DOWN_10,
-      keybinding: "ctrl+down",
-      when: [["stage", "keydown"]]
-    },
-    {
-      command: KeyBindingCommand.MOVE_LEFT_10,
-      keybinding: "ctrl+left",
-      when: [["stage", "keydown"]]
-    },
-    {
-      command: KeyBindingCommand.MOVE_RIGHT_10,
-      keybinding: "ctrl+right",
-      when: [["stage", "keydown"]]
-    },
-    {
-      command: KeyBindingCommand.SWITCH_NODE,
-      keybinding: "tab",
-      when: [
-        ["stage", "keydown"],
-        ["layer-panel", "keydown"]
-      ]
-    },
-    {
-      command: KeyBindingCommand.ZOOM_IN,
-      keybinding: ["ctrl+=", "ctrl+numpadplus"],
-      when: [["stage", "keydown"]]
-    },
-    {
-      command: KeyBindingCommand.ZOOM_OUT,
-      keybinding: ["ctrl+-", "ctrl+numpad-"],
-      when: [["stage", "keydown"]]
-    },
-    {
-      command: KeyBindingCommand.ZOOM_FIT,
-      keybinding: "ctrl+0",
-      when: [["stage", "keydown"]]
-    },
-    {
-      command: KeyBindingCommand.ZOOM_RESET,
-      keybinding: "ctrl+1",
-      when: [["stage", "keydown"]]
-    }
-  ];
-
   const defaultEditorProps = {
     componentGroupList: () => [],
     datasourceList: () => [],
@@ -10327,6 +10351,7 @@
   exports.TMagicCodeEditor = _sfc_main$S;
   exports.TMagicEditor = _sfc_main;
   exports.ToolButton = _sfc_main$w;
+  exports.UI_SELECT_MODE_EVENT_NAME = UI_SELECT_MODE_EVENT_NAME;
   exports.V_GUIDE_LINE_STORAGE_KEY = V_GUIDE_LINE_STORAGE_KEY;
   exports.advancedTabConfig = advancedTabConfig;
   exports.beforePaste = beforePaste;