@tmagic/editor 1.0.0-beta.6 → 1.0.0-beta.9

package/dist/tmagic-editor.es.js

@@ -2,7 +2,8 @@ import { defineComponent, computed, resolveComponent, openBlock, createBlock, no
 import serialize from 'serialize-javascript';
 import * as monaco from 'monaco-editor';
 import { Plus, Edit, ArrowDown, Grid, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Delete, Files, Coin, CaretBottom } from '@element-plus/icons';
-import { cloneDeep, random, mergeWith } from 'lodash-es';
+import { NodeType } from '@tmagic/schema';
+import { cloneDeep, random, mergeWith, throttle } from 'lodash-es';
 import { toLine, isPop, getNodePath } from '@tmagic/utils';
 import { EventEmitter as EventEmitter$2 } from 'events';
 import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
@@ -175,12 +176,12 @@ const _sfc_main$i = defineComponent({
     };
   }
 });
-const _hoisted_1$d = /* @__PURE__ */ createElementVNode("i", {
+const _hoisted_1$e = /* @__PURE__ */ createElementVNode("i", {
   class: "el-icon-delete",
   style: { "color": "rgb(221, 75, 57)" }
 }, "\u53D6\u6D88", -1);
 const _hoisted_2$7 = [
-  _hoisted_1$d
+  _hoisted_1$e
 ];
 const _hoisted_3$5 = /* @__PURE__ */ createElementVNode("i", { class: "el-icon-thumb" }, null, -1);
 function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
@@ -324,12 +325,12 @@ const _sfc_main$h = defineComponent({
     };
   }
 });
-const _hoisted_1$c = {
+const _hoisted_1$d = {
   ref: "codeEditor",
   class: "magic-code-editor"
 };
 function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$c, null, 512);
+  return openBlock(), createElementBlock("div", _hoisted_1$d, null, 512);
 }
 var CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$h]]);
 
@@ -613,7 +614,7 @@ const COPY_STORAGE_KEY = "$MagicEditorCopyData";
 const generateId = (type) => `${type}_${random(1e4, false)}`;
 const getPageList = (app) => {
   if (app.items && Array.isArray(app.items)) {
-    return app.items.filter((item) => item.type === "page");
+    return app.items.filter((item) => item.type === NodeType.PAGE);
   }
   return [];
 };
@@ -649,7 +650,7 @@ const setNewItemId = (config, parent) => {
   const oldId = config.id;
   config.id = generateId(config.type);
   config.name = `${config.name?.replace(/_(\d+)$/, "")}_${config.id}`;
-  if (isPop(config) && parent?.type === "page") {
+  if (isPop(config) && parent?.type === NodeType.PAGE) {
     updatePopId(oldId, config.id, parent);
   }
   if (config.items && Array.isArray(config.items)) {
@@ -762,6 +763,7 @@ class Editor$1 extends BaseService {
     parent: null,
     node: null,
     stage: null,
+    highlightNode: null,
     modifiedNodeIds: /* @__PURE__ */ new Map()
   });
   constructor() {
@@ -777,7 +779,8 @@ class Editor$1 extends BaseService {
       "alignCenter",
       "moveLayer",
       "undo",
-      "redo"
+      "redo",
+      "highlight"
     ]);
   }
   set(name, value) {
@@ -804,7 +807,7 @@ class Editor$1 extends BaseService {
     info.node = path[path.length - 1];
     info.parent = path[path.length - 2];
     path.forEach((item) => {
-      if (item.type === "page") {
+      if (item.type === NodeType.PAGE) {
         info.page = item;
         return;
       }
@@ -831,21 +834,7 @@ class Editor$1 extends BaseService {
     return Layout.ABSOLUTE;
   }
   async select(config2) {
-    let id;
-    if (typeof config2 === "string" || typeof config2 === "number") {
-      id = config2;
-    } else {
-      id = config2.id;
-    }
-    if (!id) {
-      throw new Error("\u6CA1\u6709ID\uFF0C\u65E0\u6CD5\u9009\u4E2D");
-    }
-    const { node, parent, page } = this.getNodeInfo(id);
-    if (!node)
-      throw new Error("\u83B7\u53D6\u4E0D\u5230\u7EC4\u4EF6\u4FE1\u606F");
-    if (node.id === this.state.root?.id) {
-      throw new Error("\u4E0D\u80FD\u9009\u6839\u8282\u70B9");
-    }
+    const { node, page, parent } = this.selectedConfigExceptionHandler(config2);
     this.set("node", node);
     this.set("page", page || null);
     this.set("parent", parent || null);
@@ -856,10 +845,17 @@ class Editor$1 extends BaseService {
     }
     return node;
   }
+  highlight(config2) {
+    const { node } = this.selectedConfigExceptionHandler(config2);
+    const currentHighligtNode = this.get("highlightNode");
+    if (currentHighligtNode === node)
+      return;
+    this.set("highlightNode", node);
+  }
   async add({ type, ...config2 }, parent) {
     const curNode = this.get("node");
     let parentNode;
-    if (type === "page") {
+    if (type === NodeType.PAGE) {
       parentNode = this.get("root");
     } else if (parent && typeof parent !== "function") {
       parentNode = parent;
@@ -872,14 +868,16 @@ class Editor$1 extends BaseService {
       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);
-    if ((parentNode?.type === "app" || curNode.type === "app") && newNode.type !== "page") {
+    if ((parentNode?.type === NodeType.ROOT || curNode.type === NodeType.ROOT) && newNode.type !== NodeType.PAGE) {
       throw new Error("app\u4E0B\u4E0D\u80FD\u6DFB\u52A0\u7EC4\u4EF6");
     }
     parentNode?.items?.push(newNode);
     await this.get("stage")?.add({ config: cloneDeep(newNode), root: cloneDeep(this.get("root")) });
     await this.select(newNode);
     this.addModifiedNodeId(newNode.id);
-    this.pushHistoryState();
+    if (type !== NodeType.PAGE) {
+      this.pushHistoryState();
+    }
     return newNode;
   }
   async remove(node) {
@@ -896,7 +894,7 @@ class Editor$1 extends BaseService {
       throw new Error("\u627E\u4E0D\u8981\u5220\u9664\u7684\u8282\u70B9");
     parent.items?.splice(index, 1);
     this.get("stage")?.remove({ id: node.id, root: this.get("root") });
-    if (node.type === "page") {
+    if (node.type === NodeType.PAGE) {
       await this.select(root.items[0] || root);
     } else {
       await this.select(parent);
@@ -913,14 +911,14 @@ class Editor$1 extends BaseService {
       throw new Error(`\u83B7\u53D6\u4E0D\u5230id\u4E3A${config2.id}\u7684\u8282\u70B9`);
     const node = cloneDeep(toRaw(info.node));
     let newConfig = await this.toggleFixedPosition(toRaw(config2), node, this.get("root"));
-    newConfig = mergeWith(node, newConfig, (objValue, srcValue) => {
+    newConfig = mergeWith(cloneDeep(node), newConfig, (objValue, srcValue) => {
       if (Array.isArray(srcValue)) {
         return srcValue;
       }
     });
     if (!newConfig.type)
       throw new Error("\u914D\u7F6E\u7F3A\u5C11type\u503C");
-    if (newConfig.type === "app") {
+    if (newConfig.type === NodeType.ROOT) {
       this.set("root", newConfig);
       return newConfig;
     }
@@ -941,7 +939,7 @@ class Editor$1 extends BaseService {
       this.set("node", newConfig);
     }
     this.get("stage")?.update({ config: cloneDeep(newConfig), root: this.get("root") });
-    if (newConfig.type === "page") {
+    if (newConfig.type === NodeType.PAGE) {
       this.set("page", newConfig);
     }
     this.addModifiedNodeId(newConfig.id);
@@ -958,6 +956,7 @@ class Editor$1 extends BaseService {
     parent.items.splice(index2, 0, ...parent.items.splice(index1, 1));
     await this.update(parent);
     await this.select(node);
+    this.get("stage")?.update({ config: cloneDeep(node), root: this.get("root") });
     this.addModifiedNodeId(parent.id);
     this.pushHistoryState();
   }
@@ -1070,6 +1069,28 @@ class Editor$1 extends BaseService {
     }
     return newConfig;
   }
+  selectedConfigExceptionHandler(config2) {
+    let id;
+    if (typeof config2 === "string" || typeof config2 === "number") {
+      id = config2;
+    } else {
+      id = config2.id;
+    }
+    if (!id) {
+      throw new Error("\u6CA1\u6709ID\uFF0C\u65E0\u6CD5\u9009\u4E2D");
+    }
+    const { node, parent, page } = this.getNodeInfo(id);
+    if (!node)
+      throw new Error("\u83B7\u53D6\u4E0D\u5230\u7EC4\u4EF6\u4FE1\u606F");
+    if (node.id === this.state.root?.id) {
+      throw new Error("\u4E0D\u80FD\u9009\u6839\u8282\u70B9");
+    }
+    return {
+      node,
+      parent,
+      page
+    };
+  }
 }
 var editorService = new Editor$1();
 
@@ -1304,20 +1325,20 @@ const _sfc_main$g = defineComponent({
         if (!editorService)
           return;
         editorService.add({
-          type: "page",
+          type: NodeType.PAGE,
           name: generatePageNameByApp(toRaw(editorService.get("root")))
         });
       }
     };
   }
 });
-const _hoisted_1$b = { class: "m-editor-empty-panel" };
+const _hoisted_1$c = { class: "m-editor-empty-panel" };
 const _hoisted_2$6 = { class: "m-editor-empty-content" };
 const _hoisted_3$4 = /* @__PURE__ */ createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
 function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_plus = resolveComponent("plus");
   const _component_el_icon = resolveComponent("el-icon");
-  return openBlock(), createElementBlock("div", _hoisted_1$b, [
+  return openBlock(), createElementBlock("div", _hoisted_1$c, [
     createElementVNode("div", _hoisted_2$6, [
       createElementVNode("div", {
         class: "m-editor-empty-button",
@@ -2547,12 +2568,12 @@ const _sfc_main$f = defineComponent({
     };
   }
 });
-const _hoisted_1$a = {
+const _hoisted_1$b = {
   ref: "target",
   class: "m-editor-resizer"
 };
 function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("span", _hoisted_1$a, [
+  return openBlock(), createElementBlock("span", _hoisted_1$b, [
     renderSlot(_ctx.$slots, "default")
   ], 512);
 }
@@ -2581,7 +2602,7 @@ const _sfc_main$e = defineComponent({
     };
   }
 });
-const _hoisted_1$9 = { class: "m-editor" };
+const _hoisted_1$a = { class: "m-editor" };
 const _hoisted_2$5 = {
   key: 1,
   class: "m-editor-content"
@@ -2591,7 +2612,7 @@ function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_resizer = resolveComponent("resizer");
   const _component_el_scrollbar = resolveComponent("el-scrollbar");
   const _component_add_page_box = resolveComponent("add-page-box");
-  return openBlock(), createElementBlock("div", _hoisted_1$9, [
+  return openBlock(), createElementBlock("div", _hoisted_1$a, [
     renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
     _ctx.showSrc ? (openBlock(), createBlock(_component_magic_code_editor, {
       key: 0,
@@ -2647,7 +2668,7 @@ const _sfc_main$d = defineComponent({
     };
   }
 });
-const _hoisted_1$8 = ["src"];
+const _hoisted_1$9 = ["src"];
 function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_edit = resolveComponent("edit");
   const _component_el_icon = resolveComponent("el-icon");
@@ -2659,7 +2680,7 @@ function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
   })) : typeof _ctx.icon === "string" && _ctx.icon.startsWith("http") ? (openBlock(), createElementBlock("img", {
     key: 1,
     src: _ctx.icon
-  }, null, 8, _hoisted_1$8)) : typeof _ctx.icon === "string" ? (openBlock(), createElementBlock("i", {
+  }, null, 8, _hoisted_1$9)) : typeof _ctx.icon === "string" ? (openBlock(), createElementBlock("i", {
     key: 2,
     class: normalizeClass(_ctx.icon)
   }, null, 2)) : (openBlock(), createBlock(_component_el_icon, { key: 3 }, {
@@ -2709,7 +2730,7 @@ const _sfc_main$c = defineComponent({
             type: "button",
             icon: Delete,
             tooltip: "\u522A\u9664",
-            disabled: () => services?.editorService.get("node")?.type === "page",
+            disabled: () => services?.editorService.get("node")?.type === NodeType.PAGE,
             handler: () => services?.editorService.remove(services?.editorService.get("node"))
           };
         case "undo":
@@ -2806,7 +2827,7 @@ const _sfc_main$c = defineComponent({
     };
   }
 });
-const _hoisted_1$7 = {
+const _hoisted_1$8 = {
   key: 0,
   class: "menu-item"
 };
@@ -2829,7 +2850,7 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_dropdown_item = resolveComponent("el-dropdown-item");
   const _component_el_dropdown_menu = resolveComponent("el-dropdown-menu");
   const _component_el_dropdown = resolveComponent("el-dropdown");
-  return _ctx.display ? (openBlock(), createElementBlock("div", _hoisted_1$7, [
+  return _ctx.display ? (openBlock(), createElementBlock("div", _hoisted_1$8, [
     _ctx.item.type === "divider" ? (openBlock(), createBlock(_component_el_divider, {
       key: 0,
       direction: "vertical"
@@ -3001,6 +3022,7 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_m_form = resolveComponent("m-form");
   return openBlock(), createBlock(_component_m_form, {
     class: "m-editor-props-panel",
+    "popper-class": "m-editor-props-panel-popper",
     ref: "configForm",
     size: "small",
     "init-values": _ctx.values,
@@ -3035,7 +3057,7 @@ const _sfc_main$9 = defineComponent({
     };
   }
 });
-const _hoisted_1$6 = /* @__PURE__ */ createElementVNode("i", { class: "el-icon-s-grid" }, null, -1);
+const _hoisted_1$7 = /* @__PURE__ */ createElementVNode("i", { class: "el-icon-s-grid" }, null, -1);
 const _hoisted_2$3 = ["onClick"];
 function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_input = resolveComponent("el-input");
@@ -3067,7 +3089,7 @@ function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
                 name: index
               }, {
                 title: withCtx(() => [
-                  _hoisted_1$6,
+                  _hoisted_1$7,
                   createTextVNode(toDisplayString(group.title), 1)
                 ]),
                 default: withCtx(() => [
@@ -3148,7 +3170,7 @@ const _sfc_main$8 = defineComponent({
     };
   }
 });
-const _hoisted_1$5 = {
+const _hoisted_1$6 = {
   key: 0,
   class: "magic-editor-content-menu"
 };
@@ -3157,7 +3179,7 @@ const _hoisted_3$2 = ["onClick"];
 const _hoisted_4$2 = /* @__PURE__ */ createElementVNode("div", { class: "separation" }, null, -1);
 function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_scrollbar = resolveComponent("el-scrollbar");
-  return _ctx.node ? (openBlock(), createElementBlock("div", _hoisted_1$5, [
+  return _ctx.node ? (openBlock(), createElementBlock("div", _hoisted_1$6, [
     _ctx.node.items ? (openBlock(), createElementBlock("div", {
       key: 0,
       class: "magic-editor-content-menu-item",
@@ -3219,20 +3241,27 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
 }
 var LayerMenu = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8]]);
 
+const throttleTime = 150;
 const select = (data, editorService) => {
   if (!data.id) {
     throw new Error("\u6CA1\u6709id");
   }
   editorService?.select(data);
 };
+const highlight = (data, editorService) => {
+  if (!data?.id) {
+    throw new Error("\u6CA1\u6709id");
+  }
+  editorService?.highlight(data);
+};
 const useDrop = (tree, editorService) => ({
   allowDrop: (draggingNode, dropNode, type) => {
     const { data } = dropNode || {};
     const { data: ingData } = draggingNode;
     const { type: ingType } = ingData;
-    if (ingType !== "page" && data.type === "page")
+    if (ingType !== NodeType.PAGE && data.type === NodeType.PAGE)
       return false;
-    if (ingType === "page" && data.type !== "page")
+    if (ingType === NodeType.PAGE && data.type !== NodeType.PAGE)
       return false;
     if (!data || !data.type)
       return false;
@@ -3251,29 +3280,34 @@ const useDrop = (tree, editorService) => ({
   }
 });
 const useStatus = (tree, editorService) => {
+  const highlightNode = ref();
+  const node = ref();
   const page = computed(() => editorService?.get("page"));
   watchEffect(() => {
     if (!tree.value)
       return;
-    const node = editorService?.get("node");
-    node && tree.value.setCurrentKey(node.id, true);
+    node.value = editorService?.get("node");
+    node.value && tree.value.setCurrentKey(node.value.id, true);
     const parent = editorService?.get("parent");
     if (!parent?.id)
       return;
     const treeNode = tree.value.getNode(parent.id);
     treeNode?.updateChildren();
+    highlightNode.value = editorService?.get("highlightNode");
   });
   return {
     values: computed(() => page.value ? [page.value] : []),
-    loadItems: (node, resolve) => {
-      if (Array.isArray(node.data)) {
-        return resolve(node.data);
+    loadItems: (node2, resolve) => {
+      if (Array.isArray(node2.data)) {
+        return resolve(node2.data);
       }
-      if (Array.isArray(node.data?.items)) {
-        return resolve(node.data?.items);
+      if (Array.isArray(node2.data?.items)) {
+        return resolve(node2.data?.items);
       }
       resolve([]);
-    }
+    },
+    highlightNode,
+    clickNode: node
   };
 };
 const useFilter = (tree) => ({
@@ -3330,11 +3364,20 @@ const _sfc_main$7 = defineComponent({
   setup() {
     const services = inject("services");
     const tree = ref();
+    const clicked = ref(false);
     const editorService = services?.editorService;
+    const highlightHandler = throttle((data) => {
+      highlight(data, editorService);
+    }, throttleTime);
+    const toogleClickFlag = () => {
+      clicked.value = !clicked.value;
+    };
+    const statusData = useStatus(tree, editorService);
+    const canHighlight = computed(() => statusData.highlightNode.value?.id !== statusData.clickNode.value?.id && !clicked.value);
     return {
       tree,
+      ...statusData,
       ...useDrop(tree, editorService),
-      ...useStatus(tree, editorService),
       ...useFilter(tree),
       ...useContentMenu(editorService),
       clickHandler(data) {
@@ -3342,11 +3385,16 @@ const _sfc_main$7 = defineComponent({
           document.dispatchEvent(new CustomEvent("ui-select", { detail: data }));
           return;
         }
+        tree.value?.setCurrentKey(data.id);
         select(data, editorService);
-      }
+      },
+      highlightHandler,
+      toogleClickFlag,
+      canHighlight
     };
   }
 });
+const _hoisted_1$5 = ["id", "onMouseenter"];
 function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_input = resolveComponent("el-input");
   const _component_el_tree = resolveComponent("el-tree");
@@ -3383,12 +3431,20 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
         "empty-text": "\u9875\u9762\u7A7A\u8361\u8361\u7684"
       }, {
         default: withCtx(({ node, data }) => [
-          renderSlot(_ctx.$slots, "layer-node-content", {
-            node,
-            data
-          }, () => [
-            createElementVNode("span", null, toDisplayString(`${data.name} (${data.id})`), 1)
-          ])
+          createElementVNode("div", {
+            id: data.id,
+            class: normalizeClass(["cus-tree-node", { "cus-tree-node-hover": _ctx.canHighlight && data.id === _ctx.highlightNode?.id }]),
+            onMousedown: _cache[1] || (_cache[1] = (...args) => _ctx.toogleClickFlag && _ctx.toogleClickFlag(...args)),
+            onMouseup: _cache[2] || (_cache[2] = (...args) => _ctx.toogleClickFlag && _ctx.toogleClickFlag(...args)),
+            onMouseenter: ($event) => _ctx.highlightHandler(data)
+          }, [
+            renderSlot(_ctx.$slots, "layer-node-content", {
+              node,
+              data
+            }, () => [
+              createElementVNode("span", null, toDisplayString(`${data.name} (${data.id})`), 1)
+            ])
+          ], 42, _hoisted_1$5)
         ]),
         _: 3
       }, 8, ["load", "data", "filter-node-method", "allow-drop", "onNodeClick", "onNodeContextmenu", "onNodeDragEnd"])) : createCommentVNode("", true),
@@ -3515,7 +3571,7 @@ const _sfc_main$5 = defineComponent({
         if (!editorService)
           return;
         const pageConfig = {
-          type: "page",
+          type: NodeType.PAGE,
           name: generatePageNameByApp(toRaw(editorService.get("root")))
         };
         editorService.add(pageConfig);
@@ -3535,11 +3591,13 @@ const _sfc_main$5 = defineComponent({
 });
 const _hoisted_1$3 = { class: "m-editor-page-bar" };
 const _hoisted_2$1 = ["onClick"];
-const _hoisted_3$1 = ["onClick"];
+const _hoisted_3$1 = { class: "m-editor-page-bar-title" };
 const _hoisted_4$1 = ["onClick"];
+const _hoisted_5 = ["onClick"];
 function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_plus = resolveComponent("plus");
   const _component_el_icon = resolveComponent("el-icon");
+  const _component_el_tooltip = resolveComponent("el-tooltip");
   const _component_caret_bottom = resolveComponent("caret-bottom");
   const _component_el_popover = resolveComponent("el-popover");
   return openBlock(), createElementBlock("div", _hoisted_1$3, [
@@ -3560,8 +3618,19 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
         class: normalizeClass(["m-editor-page-bar-item", { active: _ctx.page?.id === item.id }]),
         onClick: ($event) => _ctx.switchPage(item)
       }, [
-        renderSlot(_ctx.$slots, "page-bar-title", { page: item }, () => [
-          createElementVNode("span", null, toDisplayString(item.name), 1)
+        createElementVNode("div", _hoisted_3$1, [
+          renderSlot(_ctx.$slots, "page-bar-title", { page: item }, () => [
+            createVNode(_component_el_tooltip, {
+              effect: "dark",
+              placement: "top-start",
+              content: item.name
+            }, {
+              default: withCtx(() => [
+                createElementVNode("span", null, toDisplayString(item.name), 1)
+              ]),
+              _: 2
+            }, 1032, ["content"])
+          ])
         ]),
         createVNode(_component_el_popover, {
           placement: "top",
@@ -3582,11 +3651,11 @@ function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
                 createElementVNode("div", {
                   class: "magic-editor-content-menu-item",
                   onClick: () => _ctx.copy(item)
-                }, "\u590D\u5236", 8, _hoisted_3$1),
+                }, "\u590D\u5236", 8, _hoisted_4$1),
                 createElementVNode("div", {
                   class: "magic-editor-content-menu-item",
                   onClick: () => _ctx.remove(item)
-                }, "\u5220\u9664", 8, _hoisted_4$1)
+                }, "\u5220\u9664", 8, _hoisted_5)
               ])
             ])
           ]),
@@ -3835,13 +3904,13 @@ const _sfc_main$3 = defineComponent({
       if (!parent.value || !editorService)
         return canCenter.value = false;
       const layout = await editorService.getLayout(parent.value);
-      canCenter.value = [Layout.ABSOLUTE, Layout.FIXED].includes(layout) && !["app", "page", "pop"].includes(`${node.value?.type}`);
+      canCenter.value = [Layout.ABSOLUTE, Layout.FIXED].includes(layout) && ![NodeType.ROOT, NodeType.PAGE, "pop"].includes(`${node.value?.type}`);
     }, { immediate: true });
     return {
       menu,
       canPaste,
-      canDelete: computed(() => node.value?.type !== "page"),
-      canMoveZPos: computed(() => node.value?.type !== "page"),
+      canDelete: computed(() => node.value?.type !== NodeType.PAGE),
+      canMoveZPos: computed(() => node.value?.type !== NodeType.PAGE),
       canCenter,
       center() {
         node.value && editorService?.alignCenter(node.value);
@@ -3988,7 +4057,7 @@ const _sfc_main$2 = defineComponent({
       })
     }
   },
-  emits: ["select", "update", "sort"],
+  emits: ["select", "update", "sort", "highlight"],
   setup(props, { emit }) {
     const services = inject("services");
     const stageWrap = ref();
@@ -3999,6 +4068,7 @@ const _sfc_main$2 = defineComponent({
     const page = computed(() => services?.editorService.get("page"));
     const zoom = computed(() => services?.uiService.get("zoom"));
     const node = computed(() => services?.editorService.get("node"));
+    const highlightNode = computed(() => services?.editorService.get("highlightNode"));
     let stage = null;
     let runtime = null;
     watchEffect(() => {
@@ -4024,7 +4094,12 @@ const _sfc_main$2 = defineComponent({
       });
       services?.editorService.set("stage", stage);
       stage?.mount(stageContainer.value);
-      stage?.on("select", (el) => emit("select", el));
+      stage?.on("select", (el) => {
+        emit("select", el);
+      });
+      stage?.on("highlight", (el) => {
+        emit("highlight", el);
+      });
       stage?.on("update", (ev) => {
         emit("update", { id: ev.el.id, style: ev.style });
       });
@@ -4060,6 +4135,11 @@ const _sfc_main$2 = defineComponent({
         id && stage?.select(id);
       });
     });
+    watch(() => highlightNode.value?.id, (id) => {
+      nextTick(() => {
+        id && stage?.highlight(id);
+      });
+    });
     const resizeObserver = new ResizeObserver((entries) => {
       for (const { contentRect } of entries) {
         services?.uiService.set("stageContainerRect", {
@@ -4144,6 +4224,9 @@ const _sfc_main$1 = defineComponent({
       },
       sortNodeHandler(ev) {
         services?.editorService.sort(ev.src, ev.dist);
+      },
+      highlightHandler(el) {
+        services?.editorService.highlight(el.id);
       }
     };
   }
@@ -4160,9 +4243,10 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
       "moveable-options": _ctx.moveableOptions,
       "can-select": _ctx.canSelect,
       onSelect: _ctx.selectHandler,
+      onHighlight: _ctx.highlightHandler,
       onUpdate: _ctx.updateNodeHandler,
       onSort: _ctx.sortNodeHandler
-    }, null, 8, ["runtime-url", "render", "moveable-options", "can-select", "onSelect", "onUpdate", "onSort"])),
+    }, null, 8, ["runtime-url", "render", "moveable-options", "can-select", "onSelect", "onHighlight", "onUpdate", "onSort"])),
     renderSlot(_ctx.$slots, "workspace-content"),
     createVNode(_component_page_bar, null, {
       "page-bar-title": withCtx(({ page }) => [