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

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('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', '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.lodashEs, global.utils, global.events, global.core, global.elementPlus, global.StageCore));
-})(this, (function (exports, vue, serialize, monaco, icons, 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('@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';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -194,12 +194,12 @@
       };
     }
   });
-  const _hoisted_1$d = /* @__PURE__ */ vue.createElementVNode("i", {
+  const _hoisted_1$e = /* @__PURE__ */ vue.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__ */ vue.createElementVNode("i", { class: "el-icon-thumb" }, null, -1);
   function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
@@ -343,12 +343,12 @@
       };
     }
   });
-  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 vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, null, 512);
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$d, null, 512);
   }
   var CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$h]]);
 
@@ -632,7 +632,7 @@
   const generateId = (type) => `${type}_${lodashEs.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 === schema.NodeType.PAGE);
     }
     return [];
   };
@@ -668,7 +668,7 @@
     const oldId = config.id;
     config.id = generateId(config.type);
     config.name = `${config.name?.replace(/_(\d+)$/, "")}_${config.id}`;
-    if (utils.isPop(config) && parent?.type === "page") {
+    if (utils.isPop(config) && parent?.type === schema.NodeType.PAGE) {
       updatePopId(oldId, config.id, parent);
     }
     if (config.items && Array.isArray(config.items)) {
@@ -781,6 +781,7 @@
       parent: null,
       node: null,
       stage: null,
+      highlightNode: null,
       modifiedNodeIds: /* @__PURE__ */ new Map()
     });
     constructor() {
@@ -796,7 +797,8 @@
         "alignCenter",
         "moveLayer",
         "undo",
-        "redo"
+        "redo",
+        "highlight"
       ]);
     }
     set(name, value) {
@@ -823,7 +825,7 @@
       info.node = path[path.length - 1];
       info.parent = path[path.length - 2];
       path.forEach((item) => {
-        if (item.type === "page") {
+        if (item.type === schema.NodeType.PAGE) {
           info.page = item;
           return;
         }
@@ -850,21 +852,7 @@
       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);
@@ -875,10 +863,17 @@
       }
       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 === schema.NodeType.PAGE) {
         parentNode = this.get("root");
       } else if (parent && typeof parent !== "function") {
         parentNode = parent;
@@ -891,14 +886,16 @@
         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);
-      if ((parentNode?.type === "app" || curNode.type === "app") && newNode.type !== "page") {
+      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");
       }
       parentNode?.items?.push(newNode);
       await this.get("stage")?.add({ config: lodashEs.cloneDeep(newNode), root: lodashEs.cloneDeep(this.get("root")) });
       await this.select(newNode);
       this.addModifiedNodeId(newNode.id);
-      this.pushHistoryState();
+      if (type !== schema.NodeType.PAGE) {
+        this.pushHistoryState();
+      }
       return newNode;
     }
     async remove(node) {
@@ -915,7 +912,7 @@
         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 === schema.NodeType.PAGE) {
         await this.select(root.items[0] || root);
       } else {
         await this.select(parent);
@@ -939,7 +936,7 @@
       });
       if (!newConfig.type)
         throw new Error("\u914D\u7F6E\u7F3A\u5C11type\u503C");
-      if (newConfig.type === "app") {
+      if (newConfig.type === schema.NodeType.ROOT) {
         this.set("root", newConfig);
         return newConfig;
       }
@@ -960,7 +957,7 @@
         this.set("node", newConfig);
       }
       this.get("stage")?.update({ config: lodashEs.cloneDeep(newConfig), root: this.get("root") });
-      if (newConfig.type === "page") {
+      if (newConfig.type === schema.NodeType.PAGE) {
         this.set("page", newConfig);
       }
       this.addModifiedNodeId(newConfig.id);
@@ -1090,6 +1087,28 @@
       }
       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();
 
@@ -1324,20 +1343,20 @@
           if (!editorService)
             return;
           editorService.add({
-            type: "page",
+            type: schema.NodeType.PAGE,
             name: generatePageNameByApp(vue.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__ */ vue.createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
   function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_plus = vue.resolveComponent("plus");
     const _component_el_icon = vue.resolveComponent("el-icon");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
       vue.createElementVNode("div", _hoisted_2$6, [
         vue.createElementVNode("div", {
           class: "m-editor-empty-button",
@@ -2567,12 +2586,12 @@
       };
     }
   });
-  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 vue.openBlock(), vue.createElementBlock("span", _hoisted_1$a, [
+    return vue.openBlock(), vue.createElementBlock("span", _hoisted_1$b, [
       vue.renderSlot(_ctx.$slots, "default")
     ], 512);
   }
@@ -2601,7 +2620,7 @@
       };
     }
   });
-  const _hoisted_1$9 = { class: "m-editor" };
+  const _hoisted_1$a = { class: "m-editor" };
   const _hoisted_2$5 = {
     key: 1,
     class: "m-editor-content"
@@ -2611,7 +2630,7 @@
     const _component_resizer = vue.resolveComponent("resizer");
     const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
     const _component_add_page_box = vue.resolveComponent("add-page-box");
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
       vue.renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
       _ctx.showSrc ? (vue.openBlock(), vue.createBlock(_component_magic_code_editor, {
         key: 0,
@@ -2667,7 +2686,7 @@
       };
     }
   });
-  const _hoisted_1$8 = ["src"];
+  const _hoisted_1$9 = ["src"];
   function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_edit = vue.resolveComponent("edit");
     const _component_el_icon = vue.resolveComponent("el-icon");
@@ -2679,7 +2698,7 @@
     })) : typeof _ctx.icon === "string" && _ctx.icon.startsWith("http") ? (vue.openBlock(), vue.createElementBlock("img", {
       key: 1,
       src: _ctx.icon
-    }, null, 8, _hoisted_1$8)) : typeof _ctx.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
+    }, null, 8, _hoisted_1$9)) : typeof _ctx.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
       key: 2,
       class: vue.normalizeClass(_ctx.icon)
     }, null, 2)) : (vue.openBlock(), vue.createBlock(_component_el_icon, { key: 3 }, {
@@ -2729,7 +2748,7 @@
               type: "button",
               icon: icons.Delete,
               tooltip: "\u522A\u9664",
-              disabled: () => services?.editorService.get("node")?.type === "page",
+              disabled: () => services?.editorService.get("node")?.type === schema.NodeType.PAGE,
               handler: () => services?.editorService.remove(services?.editorService.get("node"))
             };
           case "undo":
@@ -2826,7 +2845,7 @@
       };
     }
   });
-  const _hoisted_1$7 = {
+  const _hoisted_1$8 = {
     key: 0,
     class: "menu-item"
   };
@@ -2849,7 +2868,7 @@
     const _component_el_dropdown_item = vue.resolveComponent("el-dropdown-item");
     const _component_el_dropdown_menu = vue.resolveComponent("el-dropdown-menu");
     const _component_el_dropdown = vue.resolveComponent("el-dropdown");
-    return _ctx.display ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, [
+    return _ctx.display ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
       _ctx.item.type === "divider" ? (vue.openBlock(), vue.createBlock(_component_el_divider, {
         key: 0,
         direction: "vertical"
@@ -3056,7 +3075,7 @@
       };
     }
   });
-  const _hoisted_1$6 = /* @__PURE__ */ vue.createElementVNode("i", { class: "el-icon-s-grid" }, null, -1);
+  const _hoisted_1$7 = /* @__PURE__ */ vue.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 = vue.resolveComponent("el-input");
@@ -3088,7 +3107,7 @@
                   name: index
                 }, {
                   title: vue.withCtx(() => [
-                    _hoisted_1$6,
+                    _hoisted_1$7,
                     vue.createTextVNode(vue.toDisplayString(group.title), 1)
                   ]),
                   default: vue.withCtx(() => [
@@ -3169,7 +3188,7 @@
       };
     }
   });
-  const _hoisted_1$5 = {
+  const _hoisted_1$6 = {
     key: 0,
     class: "magic-editor-content-menu"
   };
@@ -3178,7 +3197,7 @@
   const _hoisted_4$2 = /* @__PURE__ */ vue.createElementVNode("div", { class: "separation" }, null, -1);
   function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
-    return _ctx.node ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
+    return _ctx.node ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
       _ctx.node.items ? (vue.openBlock(), vue.createElementBlock("div", {
         key: 0,
         class: "magic-editor-content-menu-item",
@@ -3240,20 +3259,27 @@
   }
   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 !== schema.NodeType.PAGE && data.type === schema.NodeType.PAGE)
         return false;
-      if (ingType === "page" && data.type !== "page")
+      if (ingType === schema.NodeType.PAGE && data.type !== schema.NodeType.PAGE)
         return false;
       if (!data || !data.type)
         return false;
@@ -3272,29 +3298,34 @@
     }
   });
   const useStatus = (tree, editorService) => {
+    const highlightNode = vue.ref();
+    const node = vue.ref();
     const page = vue.computed(() => editorService?.get("page"));
     vue.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: vue.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) => ({
@@ -3351,11 +3382,20 @@
     setup() {
       const services = vue.inject("services");
       const tree = vue.ref();
+      const clicked = vue.ref(false);
       const editorService = services?.editorService;
+      const highlightHandler = lodashEs.throttle((data) => {
+        highlight(data, editorService);
+      }, throttleTime);
+      const toogleClickFlag = () => {
+        clicked.value = !clicked.value;
+      };
+      const statusData = useStatus(tree, editorService);
+      const canHighlight = vue.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) {
@@ -3363,11 +3403,16 @@
             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 = vue.resolveComponent("el-input");
     const _component_el_tree = vue.resolveComponent("el-tree");
@@ -3404,12 +3449,20 @@
           "empty-text": "\u9875\u9762\u7A7A\u8361\u8361\u7684"
         }, {
           default: vue.withCtx(({ node, data }) => [
-            vue.renderSlot(_ctx.$slots, "layer-node-content", {
-              node,
-              data
-            }, () => [
-              vue.createElementVNode("span", null, vue.toDisplayString(`${data.name} (${data.id})`), 1)
-            ])
+            vue.createElementVNode("div", {
+              id: data.id,
+              class: vue.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)
+            }, [
+              vue.renderSlot(_ctx.$slots, "layer-node-content", {
+                node,
+                data
+              }, () => [
+                vue.createElementVNode("span", null, vue.toDisplayString(`${data.name} (${data.id})`), 1)
+              ])
+            ], 42, _hoisted_1$5)
           ]),
           _: 3
         }, 8, ["load", "data", "filter-node-method", "allow-drop", "onNodeClick", "onNodeContextmenu", "onNodeDragEnd"])) : vue.createCommentVNode("", true),
@@ -3536,7 +3589,7 @@
           if (!editorService)
             return;
           const pageConfig = {
-            type: "page",
+            type: schema.NodeType.PAGE,
             name: generatePageNameByApp(vue.toRaw(editorService.get("root")))
           };
           editorService.add(pageConfig);
@@ -3556,11 +3609,13 @@
   });
   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 = vue.resolveComponent("plus");
     const _component_el_icon = vue.resolveComponent("el-icon");
+    const _component_el_tooltip = vue.resolveComponent("el-tooltip");
     const _component_caret_bottom = vue.resolveComponent("caret-bottom");
     const _component_el_popover = vue.resolveComponent("el-popover");
     return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
@@ -3581,8 +3636,19 @@
           class: vue.normalizeClass(["m-editor-page-bar-item", { active: _ctx.page?.id === item.id }]),
           onClick: ($event) => _ctx.switchPage(item)
         }, [
-          vue.renderSlot(_ctx.$slots, "page-bar-title", { page: item }, () => [
-            vue.createElementVNode("span", null, vue.toDisplayString(item.name), 1)
+          vue.createElementVNode("div", _hoisted_3$1, [
+            vue.renderSlot(_ctx.$slots, "page-bar-title", { page: item }, () => [
+              vue.createVNode(_component_el_tooltip, {
+                effect: "dark",
+                placement: "top-start",
+                content: item.name
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createElementVNode("span", null, vue.toDisplayString(item.name), 1)
+                ]),
+                _: 2
+              }, 1032, ["content"])
+            ])
           ]),
           vue.createVNode(_component_el_popover, {
             placement: "top",
@@ -3603,11 +3669,11 @@
                   vue.createElementVNode("div", {
                     class: "magic-editor-content-menu-item",
                     onClick: () => _ctx.copy(item)
-                  }, "\u590D\u5236", 8, _hoisted_3$1),
+                  }, "\u590D\u5236", 8, _hoisted_4$1),
                   vue.createElementVNode("div", {
                     class: "magic-editor-content-menu-item",
                     onClick: () => _ctx.remove(item)
-                  }, "\u5220\u9664", 8, _hoisted_4$1)
+                  }, "\u5220\u9664", 8, _hoisted_5)
                 ])
               ])
             ]),
@@ -3856,13 +3922,13 @@
         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) && ![schema.NodeType.ROOT, schema.NodeType.PAGE, "pop"].includes(`${node.value?.type}`);
       }, { immediate: true });
       return {
         menu,
         canPaste,
-        canDelete: vue.computed(() => node.value?.type !== "page"),
-        canMoveZPos: vue.computed(() => node.value?.type !== "page"),
+        canDelete: vue.computed(() => node.value?.type !== schema.NodeType.PAGE),
+        canMoveZPos: vue.computed(() => node.value?.type !== schema.NodeType.PAGE),
         canCenter,
         center() {
           node.value && editorService?.alignCenter(node.value);
@@ -4009,7 +4075,7 @@
         })
       }
     },
-    emits: ["select", "update", "sort"],
+    emits: ["select", "update", "sort", "highlight"],
     setup(props, { emit }) {
       const services = vue.inject("services");
       const stageWrap = vue.ref();
@@ -4020,6 +4086,7 @@
       const page = vue.computed(() => services?.editorService.get("page"));
       const zoom = vue.computed(() => services?.uiService.get("zoom"));
       const node = vue.computed(() => services?.editorService.get("node"));
+      const highlightNode = vue.computed(() => services?.editorService.get("highlightNode"));
       let stage = null;
       let runtime = null;
       vue.watchEffect(() => {
@@ -4045,7 +4112,12 @@
         });
         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 });
         });
@@ -4081,6 +4153,11 @@
           id && stage?.select(id);
         });
       });
+      vue.watch(() => highlightNode.value?.id, (id) => {
+        vue.nextTick(() => {
+          id && stage?.highlight(id);
+        });
+      });
       const resizeObserver = new ResizeObserver((entries) => {
         for (const { contentRect } of entries) {
           services?.uiService.set("stageContainerRect", {
@@ -4165,6 +4242,9 @@
         },
         sortNodeHandler(ev) {
           services?.editorService.sort(ev.src, ev.dist);
+        },
+        highlightHandler(el) {
+          services?.editorService.highlight(el.id);
         }
       };
     }
@@ -4181,9 +4261,10 @@
         "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"])),
       vue.renderSlot(_ctx.$slots, "workspace-content"),
       vue.createVNode(_component_page_bar, null, {
         "page-bar-title": vue.withCtx(({ page }) => [