@tmagic/editor 1.0.0-rc.9 → 1.0.2

package/dist/style.css

@@ -443,6 +443,7 @@
   justify-items: center;
   align-items: center;
   background-color: #f3f3f3;
+  white-space: nowrap;
 }
 .m-editor-page-bar-item.active {
   background-color: #fff;

package/dist/tmagic-editor.es.js

@@ -10,7 +10,7 @@ import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
 import Gesto from 'gesto';
 import { ElMessage } from 'element-plus';
 import KeyController from 'keycon';
-import StageCore from '@tmagic/stage';
+import StageCore, { GuidesType } from '@tmagic/stage';
 
 if (typeof global === "undefined") {
   window.global = window;
@@ -722,6 +722,8 @@ var Keys = /* @__PURE__ */ ((Keys2) => {
   Keys2["ESCAPE"] = "Space";
   return Keys2;
 })(Keys || {});
+const H_GUIDE_LINE_STORAGE_KEY = "$MagicStageHorizontalGuidelinesData";
+const V_GUIDE_LINE_STORAGE_KEY = "$MagicStageVerticalGuidelinesData";
 
 const COPY_STORAGE_KEY = "$MagicEditorCopyData";
 const getPageList = (app) => {
@@ -848,6 +850,19 @@ const Fixed2Other = async (node, root, getLayout) => {
   }
   return toRelative(node);
 };
+const getGuideLineFromCache = (key) => {
+  if (!key)
+    return [];
+  const guideLineCacheData = globalThis.localStorage.getItem(key);
+  if (guideLineCacheData) {
+    try {
+      return JSON.parse(guideLineCacheData) || [];
+    } catch (e) {
+      console.error(e);
+    }
+  }
+  return [];
+};
 
 const log = (...args) => {
 };
@@ -900,8 +915,11 @@ class Editor$1 extends BaseService {
   get(name) {
     return this.state[name];
   }
-  getNodeInfo(id) {
-    const root = toRaw(this.get("root"));
+  getNodeInfo(id, raw = true) {
+    let root = this.get("root");
+    if (raw) {
+      root = toRaw(root);
+    }
     if (!root)
       return {};
     if (id === root.id) {
@@ -922,14 +940,14 @@ class Editor$1 extends BaseService {
     });
     return info;
   }
-  getNodeById(id) {
-    const { node } = this.getNodeInfo(id);
+  getNodeById(id, raw = true) {
+    const { node } = this.getNodeInfo(id, raw);
     return node;
   }
-  getParentById(id) {
+  getParentById(id, raw = true) {
     if (!this.get("root"))
       return;
-    const { parent } = this.getNodeInfo(id);
+    const { parent } = this.getNodeInfo(id, raw);
     return parent;
   }
   async getLayout(parent, node) {
@@ -1004,7 +1022,7 @@ class Editor$1 extends BaseService {
     } else if (curNode.items) {
       parentNode = curNode;
     } else {
-      parentNode = this.getParentById(curNode.id);
+      parentNode = this.getParentById(curNode.id, false);
     }
     if (!parentNode)
       throw new Error("\u672A\u627E\u5230\u7236\u5143\u7D20");
@@ -1034,7 +1052,7 @@ class Editor$1 extends BaseService {
     const root = this.get("root");
     if (!root)
       throw new Error("\u6CA1\u6709root");
-    const { parent, node: curNode } = this.getNodeInfo(node.id);
+    const { parent, node: curNode } = this.getNodeInfo(node.id, false);
     if (!parent || !curNode)
       throw new Error("\u627E\u4E0D\u8981\u5220\u9664\u7684\u8282\u70B9");
     const index = getNodeIndex(curNode, parent);
@@ -1071,7 +1089,7 @@ class Editor$1 extends BaseService {
   async update(config2) {
     if (!config2?.id)
       throw new Error("\u6CA1\u6709\u914D\u7F6E\u6216\u8005\u914D\u7F6E\u7F3A\u5C11id\u503C");
-    const info = this.getNodeInfo(config2.id);
+    const info = this.getNodeInfo(config2.id, false);
     if (!info.node)
       throw new Error(`\u83B7\u53D6\u4E0D\u5230id\u4E3A${config2.id}\u7684\u8282\u70B9`);
     const node = cloneDeep(toRaw(info.node));
@@ -1549,6 +1567,7 @@ const DEFAULT_CONFIG = fillConfig([]);
 const getDefaultPropsValue = (type, id) => ["page", "container"].includes(type) ? {
   type,
   id,
+  layout: "absolute",
   style: {},
   name: type,
   items: []
@@ -3408,6 +3427,7 @@ const _sfc_main$2 = defineComponent({
     const node = computed(() => services?.editorService.get("node"));
     let stage = null;
     let runtime = null;
+    const getGuideLineKey = (key) => `${key}_${root.value?.id}_${page.value?.id}`;
     watchEffect(() => {
       if (stage)
         return;
@@ -3433,6 +3453,10 @@ const _sfc_main$2 = defineComponent({
       });
       services?.editorService.set("stage", markRaw(stage));
       stage?.mount(stageContainer.value);
+      stage.mask.setGuides([
+        getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY)),
+        getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY))
+      ]);
       stage?.on("select", (el) => {
         services?.editorService.select(el.id);
       });
@@ -3445,14 +3469,22 @@ const _sfc_main$2 = defineComponent({
       stage?.on("sort", (ev) => {
         services?.editorService.sort(ev.src, ev.dist);
       });
-      stage?.on("changeGuides", () => {
+      stage?.on("changeGuides", (e2) => {
         services?.uiService.set("showGuides", true);
+        if (!root.value || !page.value)
+          return;
+        const storageKey = getGuideLineKey(e2.type === GuidesType.HORIZONTAL ? H_GUIDE_LINE_STORAGE_KEY : V_GUIDE_LINE_STORAGE_KEY);
+        if (e2.guides.length) {
+          globalThis.localStorage.setItem(storageKey, JSON.stringify(e2.guides));
+        } else {
+          globalThis.localStorage.removeItem(storageKey);
+        }
       });
       if (!node.value?.id)
         return;
       stage?.on("runtime-ready", (rt) => {
         runtime = rt;
-        root.value && runtime?.updateRootConfig(cloneDeep(toRaw(root.value)));
+        root.value && runtime?.updateRootConfig?.(cloneDeep(toRaw(root.value)));
         page.value?.id && runtime?.updatePageId?.(page.value.id);
         setTimeout(() => {
           node.value && stage?.select(toRaw(node.value.id));
@@ -3466,7 +3498,7 @@ const _sfc_main$2 = defineComponent({
     });
     watch(root, (root2) => {
       if (runtime && root2) {
-        runtime.updateRootConfig(cloneDeep(toRaw(root2)));
+        runtime.updateRootConfig?.(cloneDeep(toRaw(root2)));
       }
     });
     const resizeObserver = new ResizeObserver((entries) => {
@@ -3699,7 +3731,9 @@ class ComponentList extends BaseService {
 var componentListService = new ComponentList();
 
 const DEFAULT_LEFT_COLUMN_WIDTH = 310;
+const MIN_LEFT_COLUMN_WIDTH = 45;
 const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
+const MIN_RIGHT_COLUMN_WIDTH = 1;
 const COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorColumnWidthData";
 const defaultColumnWidth = {
   left: DEFAULT_LEFT_COLUMN_WIDTH,
@@ -3775,10 +3809,10 @@ class Ui extends BaseService {
       ...toRaw(this.get("columnWidth"))
     };
     if (left) {
-      columnWidth.left = left;
+      columnWidth.left = Math.max(left, MIN_LEFT_COLUMN_WIDTH);
     }
     if (right) {
-      columnWidth.right = right;
+      columnWidth.right = Math.max(right, MIN_RIGHT_COLUMN_WIDTH);
     }
     if (!center || center === "auto") {
       const bodyWidth = globalThis.document.body.clientWidth;
@@ -3866,10 +3900,7 @@ const _sfc_main = defineComponent({
       default: () => ({})
     },
     moveableOptions: {
-      type: [Object, Function],
-      default: () => (core) => ({
-        container: core?.renderer?.contentWindow?.document.getElementById("app")
-      })
+      type: [Object, Function]
     },
     defaultSelected: {
       type: [Number, String]
@@ -3967,7 +3998,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       ])
     ]),
     workspace: withCtx(() => [
-      renderSlot(_ctx.$slots, "workspace", {}, () => [
+      renderSlot(_ctx.$slots, "workspace", { editorService: _ctx.editorService }, () => [
         createVNode(_component_workspace, null, {
           "workspace-content": withCtx(() => [
             renderSlot(_ctx.$slots, "workspace-content", { editorService: _ctx.editorService })
@@ -3998,7 +4029,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 }
 var Editor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
-var index$1 = /* #__PURE__ */ (() => ".m-editor-nav-menu {\n  display: flex;\n  z-index: 5;\n  -webkit-box-pack: justify;\n  justify-content: space-between;\n  -webkit-box-align: center;\n  align-items: center;\n  background-color: #ffffff;\n  font-size: 19.2px;\n  color: #070303;\n  font-weight: 400;\n  box-sizing: border-box;\n  margin: 0px;\n  flex: 0 0 35px;\n  border-bottom: 1px solid #d8dee8;\n}\n.m-editor-nav-menu > div {\n  display: flex;\n  height: 100%;\n  z-index: 1;\n  align-items: center;\n}\n.m-editor-nav-menu .menu-center {\n  justify-content: center;\n}\n.m-editor-nav-menu .menu-right {\n  justify-content: flex-end;\n}\n.m-editor-nav-menu .menu-item {\n  flex-direction: row;\n  -webkit-box-align: center;\n  align-items: center;\n  vertical-align: middle;\n  font-size: 14px;\n  line-height: 1;\n  height: 100%;\n  color: rgba(255, 255, 255, 0.7);\n  box-sizing: inherit;\n  z-index: 1;\n  display: flex !important;\n  transition: all 0.3s ease 0s;\n  border-bottom: 2px solid transparent;\n  margin: 0;\n}\n.m-editor-nav-menu .menu-item .is-disabled {\n  opacity: 0.5;\n}\n.m-editor-nav-menu .menu-item .is-text {\n  padding: 5px;\n}\n.m-editor-nav-menu .menu-item .is-text,\n.m-editor-nav-menu .menu-item i {\n  color: #070303;\n}\n.m-editor-nav-menu .menu-item .icon {\n  display: flex;\n  -webkit-box-align: center;\n  align-items: center;\n  height: 100%;\n  padding: 0px 8px;\n}\n.m-editor-nav-menu .menu-item .menu-item-text {\n  color: #070303;\n}\n.m-editor {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n.m-editor-content {\n  width: 100%;\n  height: calc(100% - 35px);\n  display: flex;\n  justify-self: space-between;\n}\n.m-editor-framework-center {\n  position: relative;\n  transform: translateZ(0);\n  flex: 1;\n}\n.m-editor-framework-left {\n  background-color: #ffffff;\n}\n.m-editor-framework-center .el-scrollbar__view {\n  height: 100%;\n  min-height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.m-editor-empty-panel {\n  display: flex;\n  flex: 1;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  height: calc(100% - 32px);\n}\n.m-editor-empty-content {\n  display: flex;\n  justify-content: space-evenly;\n  flex-direction: row;\n  width: 100%;\n}\n.m-editor-empty-button {\n  border: 3px solid rgba(0, 0, 0, 0.2);\n  padding: 10px 40px;\n  color: rgba(0, 0, 0, 0.6);\n  cursor: pointer;\n}\n.m-editor-empty-button i {\n  height: 180px;\n  line-height: 180px;\n  font-size: 100px;\n}\n.m-editor-empty-button p {\n  text-align: center;\n  font-size: 20px;\n  margin-top: 5px;\n}\n.m-editor-empty-button:hover {\n  border-color: #2882e0;\n  color: #2882e0;\n}\n.m-editor-sidebar {\n  height: 100%;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header {\n  background: #2882e0;\n  border: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header.is-left {\n  width: 40px;\n  margin-right: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__nav-wrap {\n  margin: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__nav {\n  border: 0;\n  border-radius: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .tab-label {\n  margin-left: 2px;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left {\n  line-height: 15px;\n  border: 0;\n  height: auto;\n  padding: 8px;\n  color: rgb(255, 255, 255);\n  box-sizing: border-box;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active {\n  background: #ffffff;\n  border: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active i {\n  color: #353140;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active .magic-editor-tab-panel-title {\n  color: #353140;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left:first-child {\n  border-right: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header i {\n  font-size: 25px;\n  color: rgba(255, 255, 255, 0.6);\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header i:hover {\n  color: rgb(255, 255, 255);\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .magic-editor-tab-panel-title {\n  font-size: 12px;\n  white-space: normal;\n}\n.m-editor-sidebar .el-scrollbar {\n  height: 100%;\n}\n.m-editor-sidebar .el-tree {\n  min-height: 100%;\n}\n.m-editor-sidebar .fold-icon {\n  position: absolute;\n  bottom: 8px;\n  left: 0px;\n  width: 45px;\n  padding-left: 8px;\n  color: #fff;\n  font-size: 32px;\n  opacity: 0.8;\n  cursor: pointer;\n}\n.m-editor-sidebar .fold-icon:hover {\n  background: rgba(0, 0, 0, 0.2);\n}\n.m-editor-sidebar .el-tabs__content,\n.m-editor-sidebar .el-tab-pane {\n  height: 100%;\n}\n.magic-editor-layer-panel {\n  background: #ffffff;\n}\n.magic-editor-layer-panel .search-input {\n  background: #ffffff;\n  color: #bbbbbb;\n  padding: 10px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 1;\n}\n.magic-editor-layer-panel .search-input .el-input__suffix {\n  padding: 10px 5px;\n}\n.magic-editor-layer-panel .node-content {\n  flex: 1;\n  display: flex;\n  width: 100%;\n}\n.magic-editor-layer-panel .node-content > div {\n  width: 8px;\n}\n.magic-editor-layer-panel .node-content > span {\n  width: calc(100% - 68px);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.magic-editor-layer-panel .node-content > i {\n  margin-right: 10px;\n  font-size: 20px;\n}\n.magic-editor-layer-panel .node-content > i.lock {\n  color: #bbb;\n}\n.magic-editor-layer-panel,\n.magic-editor-layer-panel .el-tree {\n  background-color: #ffffff;\n  color: #313a40;\n}\n.magic-editor-layer-panel .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {\n  background-color: #2882e0;\n  color: #fff;\n}\n.magic-editor-layer-panel .cus-tree-node {\n  width: 100%;\n  overflow: hidden;\n}\n.magic-editor-layer-panel .cus-tree-node-hover {\n  background-color: #f3f5f9;\n  width: 100%;\n}\n.magic-editor-layer-panel .el-tree-node:focus > .el-tree-node__content {\n  background-color: #2882e0;\n  color: #fff;\n}\n.ui-tree-tip {\n  width: 100%;\n  height: 25px;\n  margin-left: 10px;\n  background: #ffffff;\n  font-style: italic;\n  color: #555554;\n  position: absolute;\n  top: 40px;\n  left: 0;\n  z-index: 1;\n}\n.ui-component-panel {\n  height: 100%;\n  border-top: 0 !important;\n  margin-top: 50px;\n  background-color: #ffffff;\n}\n.ui-component-panel .search-input {\n  background: #f8fbff;\n  color: #bbbbbb;\n  padding: 10px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  box-sizing: border-box;\n  z-index: 1;\n}\n.ui-component-panel .search-input .el-input__prefix {\n  padding: 10px;\n}\n.ui-component-panel .search-input .el-input__suffix {\n  padding: 10px 5px;\n}\n.ui-component-panel .el-collapse-item > div:first-of-type {\n  border-bottom: 1px solid #d9dbdd;\n  margin-bottom: 10px;\n}\n.ui-component-panel .el-collapse-item__header {\n  background: #ffffff;\n  color: #070303;\n  height: 25px;\n  line-height: 25px;\n  padding-left: 10px;\n  font-size: 12px;\n}\n.ui-component-panel .el-collapse-item__header i {\n  margin-right: 5px;\n  font-size: 14px;\n}\n.ui-component-panel .el-collapse-item__wrap {\n  background: #ffffff;\n  border-bottom: 0;\n}\n.ui-component-panel .el-collapse-item__wrap .el-collapse-item__content {\n  padding: 10px;\n  display: flex;\n  flex-wrap: wrap;\n}\n.ui-component-panel .el-collapse-item__wrap .component-item {\n  display: flex;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin: 5px 10px;\n  box-sizing: border-box;\n  color: #070303;\n  flex-direction: column;\n  width: 42px;\n  cursor: pointer;\n}\n.ui-component-panel .el-collapse-item__wrap .component-item i {\n  font-size: 20px;\n  background: #fff;\n  height: 40px;\n  width: 40px;\n  line-height: 40px;\n  border-radius: 5px;\n  color: #909090;\n  border: 1px solid #d9dbdd;\n  display: flex;\n  justify-content: space-evenly;\n  align-items: center;\n  margin-bottom: 5px;\n}\n.ui-component-panel .el-collapse-item__wrap .component-item i:hover {\n  background: #2882e0;\n  color: #fff;\n  border-color: #4e8be1;\n}\n.ui-component-panel .el-collapse-item__wrap .component-item span {\n  font-size: 12px;\n  text-align: center;\n}\n.ui-component-panel .el-collapse-item__wrap .component-item .el-tooltip {\n  width: 50px;\n  height: 30px;\n  line-height: 15px;\n  display: block;\n  white-space: normal;\n  margin: 0;\n}\n.m-editor-resizer {\n  border-left: 1px solid transparent;\n  border-right: 1px solid transparent;\n  width: 8px;\n  margin: 0 -5px;\n  height: 100%;\n  opacity: 0.9;\n  background: padding-box #d8dee8;\n  box-sizing: border-box;\n  cursor: col-resize;\n  z-index: 1;\n}\n.m-editor-resizer:hover {\n  border-color: #d8dee8;\n}\n.m-editor-resizer .icon-container {\n  visibility: hidden;\n  opacity: 0;\n  transition: opacity 0.4s;\n  width: 20px;\n  height: 120px;\n  line-height: 120px;\n  text-align: center;\n  background: #d8dee8;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  cursor: pointer;\n}\n.m-editor-resizer .icon-container.position-left {\n  transform: translate(calc(-100% - 4px), -50%);\n}\n.m-editor-resizer .icon-container.position-right {\n  transform: translate(calc(100% + 4px), -50%);\n}\n.m-editor-resizer .icon {\n  color: #fff;\n  font-size: 18px;\n}\n.magic-editor-resizer:hover .icon-container {\n  visibility: visible;\n  opacity: 1;\n}\n.m-editor-workspace {\n  height: 100%;\n  width: 100%;\n  user-select: none;\n}\n.m-editor-workspace:focus-visible {\n  outline: 0;\n}\n.m-editor-page-bar {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  width: 100%;\n  height: 32px;\n  line-height: 32px;\n  color: #070303;\n  background-color: #f3f3f3;\n  border-top: 1px solid #d9dbdd;\n  z-index: 2;\n  overflow: hidden;\n}\n.m-editor-page-bar-items {\n  display: flex;\n  transition: transform 0.3s;\n}\n.m-editor-page-bar-item {\n  padding: 0 10px;\n  cursor: pointer;\n  border-right: 1px solid #d9dbdd;\n  display: flex;\n  justify-items: center;\n  align-items: center;\n  background-color: #f3f3f3;\n}\n.m-editor-page-bar-item.active {\n  background-color: #fff;\n  cursor: text;\n}\n.m-editor-page-bar-item.active .m-editor-page-bar-menu-icon {\n  cursor: pointer;\n}\n.m-editor-page-bar-item-icon {\n  position: relative;\n  z-index: 1;\n}\n.m-editor-page-bar-item-title {\n  max-width: 150px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.page-bar-popover.el-popper.el-popover {\n  padding: 10px 0;\n}\n.page-bar-popover .menu-item {\n  cursor: pointer;\n  transition: all 0.2s ease 0s;\n  padding: 5px 14px;\n}\n.page-bar-popover .menu-item .el-button--text,\n.page-bar-popover .menu-item i {\n  color: #070303;\n}\n.page-bar-popover .menu-item:hover {\n  background-color: #f3f5f9;\n}\n.m-editor-props-panel {\n  padding: 0 10px;\n}\n.m-editor-props-panel.small .el-form-item__label {\n  font-size: 12px;\n}\n.m-editor-props-panel.small .m-fieldset legend {\n  font-size: 12px;\n}\n.m-editor-props-panel.small .el-tabs__item {\n  font-size: 12px;\n}\n.m-editor-props-panel .el-input__wrapper {\n  border-radius: 0;\n}\n.m-editor-props-panel-popper.small span,\n.m-editor-props-panel-popper.small a,\n.m-editor-props-panel-popper.small p {\n  font-size: 12px;\n}\n.magic-editor-content-menu {\n  position: fixed;\n  font-size: 12px;\n  background: #fff;\n  box-shadow: 0 2px 8px 2px rgba(68, 73, 77, 0.16);\n  z-index: 9999;\n  transform-origin: 0% 0%;\n  font-weight: 600;\n  padding: 4px 0px;\n  overflow: auto;\n  max-height: 100%;\n}\n.magic-editor-content-menu .menu-item {\n  color: #333;\n  display: flex;\n  -webkit-box-align: center;\n  align-items: center;\n  cursor: pointer;\n  min-width: 140px;\n  transition: all 0.2s ease 0s;\n  padding: 5px 14px;\n  border-left: 2px solid transparent;\n}\n.magic-editor-content-menu .menu-item .el-button {\n  width: 100%;\n  justify-content: flex-start;\n}\n.magic-editor-content-menu .menu-item .el-button--text,\n.magic-editor-content-menu .menu-item i {\n  color: #070303;\n}\n.magic-editor-content-menu .menu-item.divider {\n  padding: 0 14px;\n}\n.magic-editor-content-menu .menu-item.divider .el-divider {\n  margin: 0;\n}\n.magic-editor-content-menu .menu-item:hover {\n  background-color: #f3f5f9;\n}\n.m-editor-stage {\n  position: relative;\n  width: 100%;\n  height: calc(100% - 32px);\n  overflow: hidden;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.m-editor-stage-container {\n  width: 100%;\n  height: 100%;\n  z-index: 0;\n  position: relative;\n  border: 1px solid #d9dbdd;\n  transition: transform 0.3s;\n  box-sizing: content-box;\n}\n.m-editor-stage-container::-webkit-scrollbar {\n  width: 0 !important;\n}\n.magic-code-editor {\n  width: 100%;\n}\n.magic-code-editor .margin {\n  margin: 0;\n}")();
+var index$1 = /* #__PURE__ */ (() => ".m-editor-nav-menu {\n  display: flex;\n  z-index: 5;\n  -webkit-box-pack: justify;\n  justify-content: space-between;\n  -webkit-box-align: center;\n  align-items: center;\n  background-color: #ffffff;\n  font-size: 19.2px;\n  color: #070303;\n  font-weight: 400;\n  box-sizing: border-box;\n  margin: 0px;\n  flex: 0 0 35px;\n  border-bottom: 1px solid #d8dee8;\n}\n.m-editor-nav-menu > div {\n  display: flex;\n  height: 100%;\n  z-index: 1;\n  align-items: center;\n}\n.m-editor-nav-menu .menu-center {\n  justify-content: center;\n}\n.m-editor-nav-menu .menu-right {\n  justify-content: flex-end;\n}\n.m-editor-nav-menu .menu-item {\n  flex-direction: row;\n  -webkit-box-align: center;\n  align-items: center;\n  vertical-align: middle;\n  font-size: 14px;\n  line-height: 1;\n  height: 100%;\n  color: rgba(255, 255, 255, 0.7);\n  box-sizing: inherit;\n  z-index: 1;\n  display: flex !important;\n  transition: all 0.3s ease 0s;\n  border-bottom: 2px solid transparent;\n  margin: 0;\n}\n.m-editor-nav-menu .menu-item .is-disabled {\n  opacity: 0.5;\n}\n.m-editor-nav-menu .menu-item .is-text {\n  padding: 5px;\n}\n.m-editor-nav-menu .menu-item .is-text,\n.m-editor-nav-menu .menu-item i {\n  color: #070303;\n}\n.m-editor-nav-menu .menu-item .icon {\n  display: flex;\n  -webkit-box-align: center;\n  align-items: center;\n  height: 100%;\n  padding: 0px 8px;\n}\n.m-editor-nav-menu .menu-item .menu-item-text {\n  color: #070303;\n}\n.m-editor {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n.m-editor-content {\n  width: 100%;\n  height: calc(100% - 35px);\n  display: flex;\n  justify-self: space-between;\n}\n.m-editor-framework-center {\n  position: relative;\n  transform: translateZ(0);\n  flex: 1;\n}\n.m-editor-framework-left {\n  background-color: #ffffff;\n}\n.m-editor-framework-center .el-scrollbar__view {\n  height: 100%;\n  min-height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.m-editor-empty-panel {\n  display: flex;\n  flex: 1;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  height: calc(100% - 32px);\n}\n.m-editor-empty-content {\n  display: flex;\n  justify-content: space-evenly;\n  flex-direction: row;\n  width: 100%;\n}\n.m-editor-empty-button {\n  border: 3px solid rgba(0, 0, 0, 0.2);\n  padding: 10px 40px;\n  color: rgba(0, 0, 0, 0.6);\n  cursor: pointer;\n}\n.m-editor-empty-button i {\n  height: 180px;\n  line-height: 180px;\n  font-size: 100px;\n}\n.m-editor-empty-button p {\n  text-align: center;\n  font-size: 20px;\n  margin-top: 5px;\n}\n.m-editor-empty-button:hover {\n  border-color: #2882e0;\n  color: #2882e0;\n}\n.m-editor-sidebar {\n  height: 100%;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header {\n  background: #2882e0;\n  border: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header.is-left {\n  width: 40px;\n  margin-right: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__nav-wrap {\n  margin: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__nav {\n  border: 0;\n  border-radius: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .tab-label {\n  margin-left: 2px;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left {\n  line-height: 15px;\n  border: 0;\n  height: auto;\n  padding: 8px;\n  color: rgb(255, 255, 255);\n  box-sizing: border-box;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active {\n  background: #ffffff;\n  border: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active i {\n  color: #353140;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left.is-active .magic-editor-tab-panel-title {\n  color: #353140;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .el-tabs__item.is-left.is-left:first-child {\n  border-right: 0;\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header i {\n  font-size: 25px;\n  color: rgba(255, 255, 255, 0.6);\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header i:hover {\n  color: rgb(255, 255, 255);\n}\n.m-editor-sidebar.el-tabs--left .el-tabs__header .magic-editor-tab-panel-title {\n  font-size: 12px;\n  white-space: normal;\n}\n.m-editor-sidebar .el-scrollbar {\n  height: 100%;\n}\n.m-editor-sidebar .el-tree {\n  min-height: 100%;\n}\n.m-editor-sidebar .fold-icon {\n  position: absolute;\n  bottom: 8px;\n  left: 0px;\n  width: 45px;\n  padding-left: 8px;\n  color: #fff;\n  font-size: 32px;\n  opacity: 0.8;\n  cursor: pointer;\n}\n.m-editor-sidebar .fold-icon:hover {\n  background: rgba(0, 0, 0, 0.2);\n}\n.m-editor-sidebar .el-tabs__content,\n.m-editor-sidebar .el-tab-pane {\n  height: 100%;\n}\n.magic-editor-layer-panel {\n  background: #ffffff;\n}\n.magic-editor-layer-panel .search-input {\n  background: #ffffff;\n  color: #bbbbbb;\n  padding: 10px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 1;\n}\n.magic-editor-layer-panel .search-input .el-input__suffix {\n  padding: 10px 5px;\n}\n.magic-editor-layer-panel .node-content {\n  flex: 1;\n  display: flex;\n  width: 100%;\n}\n.magic-editor-layer-panel .node-content > div {\n  width: 8px;\n}\n.magic-editor-layer-panel .node-content > span {\n  width: calc(100% - 68px);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.magic-editor-layer-panel .node-content > i {\n  margin-right: 10px;\n  font-size: 20px;\n}\n.magic-editor-layer-panel .node-content > i.lock {\n  color: #bbb;\n}\n.magic-editor-layer-panel,\n.magic-editor-layer-panel .el-tree {\n  background-color: #ffffff;\n  color: #313a40;\n}\n.magic-editor-layer-panel .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {\n  background-color: #2882e0;\n  color: #fff;\n}\n.magic-editor-layer-panel .cus-tree-node {\n  width: 100%;\n  overflow: hidden;\n}\n.magic-editor-layer-panel .cus-tree-node-hover {\n  background-color: #f3f5f9;\n  width: 100%;\n}\n.magic-editor-layer-panel .el-tree-node:focus > .el-tree-node__content {\n  background-color: #2882e0;\n  color: #fff;\n}\n.ui-tree-tip {\n  width: 100%;\n  height: 25px;\n  margin-left: 10px;\n  background: #ffffff;\n  font-style: italic;\n  color: #555554;\n  position: absolute;\n  top: 40px;\n  left: 0;\n  z-index: 1;\n}\n.ui-component-panel {\n  height: 100%;\n  border-top: 0 !important;\n  margin-top: 50px;\n  background-color: #ffffff;\n}\n.ui-component-panel .search-input {\n  background: #f8fbff;\n  color: #bbbbbb;\n  padding: 10px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  box-sizing: border-box;\n  z-index: 1;\n}\n.ui-component-panel .search-input .el-input__prefix {\n  padding: 10px;\n}\n.ui-component-panel .search-input .el-input__suffix {\n  padding: 10px 5px;\n}\n.ui-component-panel .el-collapse-item > div:first-of-type {\n  border-bottom: 1px solid #d9dbdd;\n  margin-bottom: 10px;\n}\n.ui-component-panel .el-collapse-item__header {\n  background: #ffffff;\n  color: #070303;\n  height: 25px;\n  line-height: 25px;\n  padding-left: 10px;\n  font-size: 12px;\n}\n.ui-component-panel .el-collapse-item__header i {\n  margin-right: 5px;\n  font-size: 14px;\n}\n.ui-component-panel .el-collapse-item__wrap {\n  background: #ffffff;\n  border-bottom: 0;\n}\n.ui-component-panel .el-collapse-item__wrap .el-collapse-item__content {\n  padding: 10px;\n  display: flex;\n  flex-wrap: wrap;\n}\n.ui-component-panel .el-collapse-item__wrap .component-item {\n  display: flex;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin: 5px 10px;\n  box-sizing: border-box;\n  color: #070303;\n  flex-direction: column;\n  width: 42px;\n  cursor: pointer;\n}\n.ui-component-panel .el-collapse-item__wrap .component-item i {\n  font-size: 20px;\n  background: #fff;\n  height: 40px;\n  width: 40px;\n  line-height: 40px;\n  border-radius: 5px;\n  color: #909090;\n  border: 1px solid #d9dbdd;\n  display: flex;\n  justify-content: space-evenly;\n  align-items: center;\n  margin-bottom: 5px;\n}\n.ui-component-panel .el-collapse-item__wrap .component-item i:hover {\n  background: #2882e0;\n  color: #fff;\n  border-color: #4e8be1;\n}\n.ui-component-panel .el-collapse-item__wrap .component-item span {\n  font-size: 12px;\n  text-align: center;\n}\n.ui-component-panel .el-collapse-item__wrap .component-item .el-tooltip {\n  width: 50px;\n  height: 30px;\n  line-height: 15px;\n  display: block;\n  white-space: normal;\n  margin: 0;\n}\n.m-editor-resizer {\n  border-left: 1px solid transparent;\n  border-right: 1px solid transparent;\n  width: 8px;\n  margin: 0 -5px;\n  height: 100%;\n  opacity: 0.9;\n  background: padding-box #d8dee8;\n  box-sizing: border-box;\n  cursor: col-resize;\n  z-index: 1;\n}\n.m-editor-resizer:hover {\n  border-color: #d8dee8;\n}\n.m-editor-resizer .icon-container {\n  visibility: hidden;\n  opacity: 0;\n  transition: opacity 0.4s;\n  width: 20px;\n  height: 120px;\n  line-height: 120px;\n  text-align: center;\n  background: #d8dee8;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  cursor: pointer;\n}\n.m-editor-resizer .icon-container.position-left {\n  transform: translate(calc(-100% - 4px), -50%);\n}\n.m-editor-resizer .icon-container.position-right {\n  transform: translate(calc(100% + 4px), -50%);\n}\n.m-editor-resizer .icon {\n  color: #fff;\n  font-size: 18px;\n}\n.magic-editor-resizer:hover .icon-container {\n  visibility: visible;\n  opacity: 1;\n}\n.m-editor-workspace {\n  height: 100%;\n  width: 100%;\n  user-select: none;\n}\n.m-editor-workspace:focus-visible {\n  outline: 0;\n}\n.m-editor-page-bar {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  width: 100%;\n  height: 32px;\n  line-height: 32px;\n  color: #070303;\n  background-color: #f3f3f3;\n  border-top: 1px solid #d9dbdd;\n  z-index: 2;\n  overflow: hidden;\n}\n.m-editor-page-bar-items {\n  display: flex;\n  transition: transform 0.3s;\n}\n.m-editor-page-bar-item {\n  padding: 0 10px;\n  cursor: pointer;\n  border-right: 1px solid #d9dbdd;\n  display: flex;\n  justify-items: center;\n  align-items: center;\n  background-color: #f3f3f3;\n  white-space: nowrap;\n}\n.m-editor-page-bar-item.active {\n  background-color: #fff;\n  cursor: text;\n}\n.m-editor-page-bar-item.active .m-editor-page-bar-menu-icon {\n  cursor: pointer;\n}\n.m-editor-page-bar-item-icon {\n  position: relative;\n  z-index: 1;\n}\n.m-editor-page-bar-item-title {\n  max-width: 150px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.page-bar-popover.el-popper.el-popover {\n  padding: 10px 0;\n}\n.page-bar-popover .menu-item {\n  cursor: pointer;\n  transition: all 0.2s ease 0s;\n  padding: 5px 14px;\n}\n.page-bar-popover .menu-item .el-button--text,\n.page-bar-popover .menu-item i {\n  color: #070303;\n}\n.page-bar-popover .menu-item:hover {\n  background-color: #f3f5f9;\n}\n.m-editor-props-panel {\n  padding: 0 10px;\n}\n.m-editor-props-panel.small .el-form-item__label {\n  font-size: 12px;\n}\n.m-editor-props-panel.small .m-fieldset legend {\n  font-size: 12px;\n}\n.m-editor-props-panel.small .el-tabs__item {\n  font-size: 12px;\n}\n.m-editor-props-panel .el-input__wrapper {\n  border-radius: 0;\n}\n.m-editor-props-panel-popper.small span,\n.m-editor-props-panel-popper.small a,\n.m-editor-props-panel-popper.small p {\n  font-size: 12px;\n}\n.magic-editor-content-menu {\n  position: fixed;\n  font-size: 12px;\n  background: #fff;\n  box-shadow: 0 2px 8px 2px rgba(68, 73, 77, 0.16);\n  z-index: 9999;\n  transform-origin: 0% 0%;\n  font-weight: 600;\n  padding: 4px 0px;\n  overflow: auto;\n  max-height: 100%;\n}\n.magic-editor-content-menu .menu-item {\n  color: #333;\n  display: flex;\n  -webkit-box-align: center;\n  align-items: center;\n  cursor: pointer;\n  min-width: 140px;\n  transition: all 0.2s ease 0s;\n  padding: 5px 14px;\n  border-left: 2px solid transparent;\n}\n.magic-editor-content-menu .menu-item .el-button {\n  width: 100%;\n  justify-content: flex-start;\n}\n.magic-editor-content-menu .menu-item .el-button--text,\n.magic-editor-content-menu .menu-item i {\n  color: #070303;\n}\n.magic-editor-content-menu .menu-item.divider {\n  padding: 0 14px;\n}\n.magic-editor-content-menu .menu-item.divider .el-divider {\n  margin: 0;\n}\n.magic-editor-content-menu .menu-item:hover {\n  background-color: #f3f5f9;\n}\n.m-editor-stage {\n  position: relative;\n  width: 100%;\n  height: calc(100% - 32px);\n  overflow: hidden;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.m-editor-stage-container {\n  width: 100%;\n  height: 100%;\n  z-index: 0;\n  position: relative;\n  border: 1px solid #d9dbdd;\n  transition: transform 0.3s;\n  box-sizing: content-box;\n}\n.m-editor-stage-container::-webkit-scrollbar {\n  width: 0 !important;\n}\n.magic-code-editor {\n  width: 100%;\n}\n.magic-code-editor .margin {\n  margin: 0;\n}")();
 
 const defaultInstallOpt = {};
 var index = {
@@ -4014,5 +4045,5 @@ var index = {
   }
 };
 
-export { COPY_STORAGE_KEY, ComponentListPanel, DEFAULT_CONFIG, Fixed2Other, Keys, LayerOffset, LayerPanel, Layout, PropsPanel, CodeEditor as TMagicCodeEditor, Editor as TMagicEditor, ToolButton, change2Fixed, debug, index as default, editorService, error, eventsService, fillConfig, generatePageName, generatePageNameByApp, getConfig, getDefaultPropsValue, getNodeIndex, getPageList, getPageNameList, historyService, info, initPosition, isFixed, log, propsService, setConfig, setLayout, toRelative, uiService, warn };
+export { COPY_STORAGE_KEY, ComponentListPanel, DEFAULT_CONFIG, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, Keys, LayerOffset, LayerPanel, Layout, PropsPanel, CodeEditor as TMagicCodeEditor, Editor as TMagicEditor, ToolButton, V_GUIDE_LINE_STORAGE_KEY, change2Fixed, debug, index as default, editorService, error, eventsService, fillConfig, generatePageName, generatePageNameByApp, getConfig, getDefaultPropsValue, getGuideLineFromCache, getNodeIndex, getPageList, getPageNameList, historyService, info, initPosition, isFixed, log, propsService, setConfig, setLayout, toRelative, uiService, warn };
 //# sourceMappingURL=tmagic-editor.es.js.map