@tmagic/editor 1.3.0-alpha.11 → 1.3.0-alpha.13

package/dist/tmagic-editor.js

@@ -192,7 +192,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$p = ["src"];
+const _hoisted_1$q = ["src"];
 const _sfc_main$E = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorIcon"
@@ -216,7 +216,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
         class: "magic-editor-icon"
       }, {
         default: withCtx(() => [
-          createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$p)
+          createElementVNode("img", { src: _ctx.icon }, null, 8, _hoisted_1$q)
         ]),
         _: 1
       })) : typeof _ctx.icon === "string" ? (openBlock(), createElementBlock("i", {
@@ -235,7 +235,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$o = { class: "m-fields-code-select-col" };
+const _hoisted_1$p = { class: "m-fields-code-select-col" };
 const _hoisted_2$f = { class: "code-select-container" };
 const _sfc_main$D = /* @__PURE__ */ defineComponent({
   ...{
@@ -329,7 +329,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       const _component_m_form_container = resolveComponent("m-form-container");
-      return openBlock(), createElementBlock("div", _hoisted_1$o, [
+      return openBlock(), createElementBlock("div", _hoisted_1$p, [
         createElementVNode("div", _hoisted_2$f, [
           createVNode(_component_m_form_container, {
             class: "select",
@@ -353,7 +353,7 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$n = { class: "m-editor-data-source-fields" };
+const _hoisted_1$o = { class: "m-editor-data-source-fields" };
 const _hoisted_2$e = { class: "m-editor-data-source-fields-footer" };
 const _sfc_main$C = /* @__PURE__ */ defineComponent({
   ...{
@@ -501,7 +501,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
       }
     ];
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$n, [
+      return openBlock(), createElementBlock("div", _hoisted_1$o, [
         createVNode(unref(MagicTable), {
           data: _ctx.model[_ctx.name],
           columns: filedColumns
@@ -534,7 +534,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$m = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
+const _hoisted_1$n = { style: { "display": "flex", "flex-direction": "column", "line-height": "1.2em" } };
 const _hoisted_2$d = { style: { "font-size": "10px", "color": "rgba(0, 0, 0, 0.6)" } };
 const _hoisted_3$6 = { class: "el-input__inner" };
 const _sfc_main$B = /* @__PURE__ */ defineComponent({
@@ -759,7 +759,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
           createVNode(_sfc_main$E, { icon: unref(Coin) }, null, 8, ["icon"])
         ]),
         default: withCtx(({ item }) => [
-          createElementVNode("div", _hoisted_1$m, [
+          createElementVNode("div", _hoisted_1$n, [
             createElementVNode("div", null, toDisplayString(item.text), 1),
             createElementVNode("span", _hoisted_2$d, toDisplayString(item.value), 1)
           ])
@@ -855,7 +855,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$l = { class: "m-fields-event-select" };
+const _hoisted_1$m = { class: "m-fields-event-select" };
 const _hoisted_2$c = {
   key: 1,
   class: "fullWidth"
@@ -1022,7 +1022,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
       const _component_m_form_table = resolveComponent("m-form-table");
       const _component_m_form_container = resolveComponent("m-form-container");
       const _component_m_form_panel = resolveComponent("m-form-panel");
-      return openBlock(), createElementBlock("div", _hoisted_1$l, [
+      return openBlock(), createElementBlock("div", _hoisted_1$m, [
         isOldVersion.value ? (openBlock(), createBlock(_component_m_form_table, {
           key: 0,
           ref: "eventForm",
@@ -1073,7 +1073,7 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$k = { class: "m-fields-key-value" };
+const _hoisted_1$l = { class: "m-fields-key-value" };
 const _hoisted_2$b = /* @__PURE__ */ createElementVNode("span", { class: "m-fileds-key-value-delimiter" }, ":", -1);
 const _sfc_main$y = /* @__PURE__ */ defineComponent({
   ...{
@@ -1118,7 +1118,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
       records.value.splice(index, 1);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$k, [
+      return openBlock(), createElementBlock("div", _hoisted_1$l, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(records.value, (item, index) => {
           return openBlock(), createElementBlock("div", {
             class: "m-fields-key-value-item",
@@ -1169,6 +1169,11 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
   }
 });
 
+const _hoisted_1$k = {
+  key: 1,
+  class: "m-fields-ui-select",
+  style: { "display": "flex" }
+};
 const _sfc_main$x = /* @__PURE__ */ defineComponent({
   ...{
     name: "MEditorUISelect"
@@ -1222,6 +1227,18 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
         mForm?.$emit("field-change", props.prop, "");
       }
     };
+    const selectNode = async (id) => {
+      await services?.editorService.select(id);
+      services?.editorService.get("stage")?.select(id);
+    };
+    const highlight = throttle((id) => {
+      services?.editorService.highlight(id);
+      services?.editorService.get("stage")?.highlight(id);
+    }, 150);
+    const unhightlight = () => {
+      services?.editorService.set("highlightNode", null);
+      services?.editorService.get("stage")?.clearHighlight();
+    };
     return (_ctx, _cache) => {
       return uiSelectMode.value ? (openBlock(), createElementBlock("div", {
         key: 0,
@@ -1239,43 +1256,62 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 8, ["icon"])
-      ])) : (openBlock(), createElementBlock("div", {
-        key: 1,
-        class: "m-fields-ui-select",
-        onClick: startSelect,
-        style: { "display": "flex" }
-      }, [
-        val.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
-          key: 0,
-          content: "清除"
-        }, {
-          default: withCtx(() => [
-            createVNode(unref(TMagicButton), {
-              style: { "padding": "0" },
-              type: "danger",
-              icon: unref(Close),
-              text: "",
-              onClick: withModifiers(deleteHandler, ["stop"])
-            }, null, 8, ["icon", "onClick"])
-          ]),
-          _: 1
-        })) : createCommentVNode("", true),
-        createVNode(unref(TMagicTooltip), {
-          content: val.value ? toName.value + "_" + val.value : "点击此处选择"
+      ])) : (openBlock(), createElementBlock("div", _hoisted_1$k, [
+        val.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          createVNode(unref(TMagicTooltip), {
+            content: "清除",
+            placement: "top"
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(TMagicButton), {
+                style: { "padding": "0" },
+                type: "danger",
+                icon: unref(Close),
+                text: "",
+                onClick: withModifiers(deleteHandler, ["stop"])
+              }, null, 8, ["icon", "onClick"])
+            ]),
+            _: 1
+          }),
+          createVNode(unref(TMagicTooltip), {
+            content: "点击选中组件",
+            placement: "top"
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(TMagicButton), {
+                text: "",
+                style: { "padding": "0", "margin": "0" },
+                onClick: _cache[0] || (_cache[0] = ($event) => selectNode(val.value)),
+                onMouseenter: _cache[1] || (_cache[1] = ($event) => unref(highlight)(val.value)),
+                onMouseleave: unhightlight
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(`${toName.value}_${val.value}`), 1)
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ], 64)) : (openBlock(), createBlock(unref(TMagicTooltip), {
+          key: 1,
+          content: "点击此处选择",
+          placement: "top"
         }, {
           default: withCtx(() => [
             createVNode(unref(TMagicButton), {
               text: "",
-              style: { "padding": "0", "margin": "0" }
+              style: { "padding": "0", "margin": "0" },
+              onClick: startSelect
             }, {
               default: withCtx(() => [
-                createTextVNode(toDisplayString(val.value ? toName.value + "_" + val.value : "点击此处选择"), 1)
+                createTextVNode("点击此处选择")
               ]),
               _: 1
             })
           ]),
           _: 1
-        }, 8, ["content"])
+        }))
       ]));
     };
   }
@@ -4660,11 +4696,16 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     const editCode = async (key) => {
       codeBlockService?.setCodeEditorContent(true, key);
     };
-    const deleteCode = (key) => {
+    const deleteCode = async (key) => {
       const currentCode = codeList.value.find((codeItem) => codeItem.id === key);
       const existBinds = Boolean(currentCode?.children.length);
       const undeleteableList = codeBlockService?.getUndeletableList() || [];
       if (!existBinds && !undeleteableList.includes(key)) {
+        await tMagicMessageBox.confirm("确定删除该代码块吗？", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        });
         codeBlockService?.deleteCodeDslByIds([key]);
       } else {
         if (typeof props.customError === "function") {
@@ -5109,7 +5150,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     const dragstartHandler = ({ text, type, data = {} }, e) => {
       if (e.dataTransfer) {
         e.dataTransfer.setData(
-          "text/html",
+          "text/json",
           serialize({
             name: text,
             type,
@@ -6892,7 +6933,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       }
       if (e.dataTransfer && parent && stageContainer.value && stage) {
         const parseDSL = getConfig("parseDSL");
-        const data = e.dataTransfer.getData("text/html");
+        const data = e.dataTransfer.getData("text/json");
         if (!data)
           return;
         const config = parseDSL(`(${data})`);