@tmagic/editor 1.1.0 → 1.1.3

package/dist/tmagic-editor.mjs

@@ -12,13 +12,6 @@ import Gesto from 'gesto';
 import { ElMessage } from 'element-plus';
 import KeyController from 'keycon';
 
-if (typeof global === "undefined") {
-  window.global = window;
-}
-if (typeof globalThis === "undefined") {
-  window.globalThis = window;
-}
-
 const _sfc_main$o = defineComponent({
   name: "m-fields-vs-code",
   props: ["model", "name", "config", "prop"],
@@ -45,7 +38,7 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 
-function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_magic_code_editor = resolveComponent("magic-code-editor");
   return openBlock(), createBlock(_component_magic_code_editor, {
     style: normalizeStyle(`height: ${_ctx.height}`),
@@ -54,7 +47,7 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
     onSave: _ctx.save
   }, null, 8, ["style", "init-values", "language", "onSave"]);
 }
-const Code = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$b]]);
+const Code = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$a]]);
 
 const _sfc_main$n = defineComponent({
   name: "m-fields-code-link",
@@ -112,7 +105,7 @@ const _sfc_main$n = defineComponent({
   }
 });
 
-function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_m_fields_link = resolveComponent("m-fields-link");
   return openBlock(), createBlock(_component_m_fields_link, {
     config: _ctx.formConfig,
@@ -121,9 +114,9 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
     onChange: _ctx.changeHandler
   }, null, 8, ["config", "model", "onChange"]);
 }
-const CodeLink = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$a]]);
+const CodeLink = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$9]]);
 
-const _hoisted_1$b = /* @__PURE__ */ createTextVNode("\u53D6\u6D88");
+const _hoisted_1$c = /* @__PURE__ */ createTextVNode("\u53D6\u6D88");
 const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "UISelect",
   props: {
@@ -189,7 +182,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
           style: { "padding": "0" }
         }, {
           default: withCtx(() => [
-            _hoisted_1$b
+            _hoisted_1$c
           ]),
           _: 1
         }, 8, ["icon"])
@@ -360,14 +353,14 @@ const _sfc_main$l = defineComponent({
   }
 });
 
-const _hoisted_1$a = {
+const _hoisted_1$b = {
   ref: "codeEditor",
   class: "magic-code-editor"
 };
-function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$a, null, 512);
+function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1$b, null, 512);
 }
-const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$9]]);
+const CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$8]]);
 
 let $TMAGIC_EDITOR = {};
 const setConfig = (option) => {
@@ -1278,7 +1271,7 @@ class Editor$1 extends BaseService {
         await this.select(root.items[0]);
         stage?.select(root.items[0].id);
       } else {
-        this.set("node", null);
+        this.set("nodes", [root]);
         this.set("parent", null);
         this.set("page", null);
         this.set("stage", null);
@@ -1424,12 +1417,15 @@ class Editor$1 extends BaseService {
     const node = this.get("node");
     const brothers = parent?.items || [];
     const index = brothers.findIndex((item) => `${item.id}` === `${node?.id}`);
+    const layout = await this.getLayout(parent, node);
+    const isRelative = layout === Layout.RELATIVE;
+    brothers.splice(index, 1);
     if (offset === LayerOffset.TOP) {
-      brothers.splice(brothers.length - 1, 0, brothers.splice(index, 1)[0]);
+      brothers.splice(isRelative ? 0 : brothers.length - 1, 0, node);
     } else if (offset === LayerOffset.BOTTOM) {
-      brothers.splice(0, 0, brothers.splice(index, 1)[0]);
+      brothers.splice(isRelative ? brothers.length - 1 : 0, 0, node);
     } else {
-      brothers.splice(index + parseInt(`${offset}`, 10), 0, brothers.splice(index, 1)[0]);
+      brothers.splice(index + (isRelative ? -offset : offset), 0, node);
     }
     const grandparent = this.getParentById(parent.id);
     this.get("stage")?.update({
@@ -1883,7 +1879,8 @@ const state = reactive({
   columnWidth: defaultColumnWidth,
   showGuides: true,
   showRule: true,
-  propsPanelSize: "small"
+  propsPanelSize: "small",
+  showAddPageButton: true
 });
 class Ui extends BaseService {
   constructor() {
@@ -2063,13 +2060,13 @@ const _sfc_main$k = defineComponent({
   }
 });
 
-const _hoisted_1$9 = { class: "m-editor-empty-panel" };
+const _hoisted_1$a = { class: "m-editor-empty-panel" };
 const _hoisted_2$4 = { class: "m-editor-empty-content" };
 const _hoisted_3 = /* @__PURE__ */ createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
-function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_plus = resolveComponent("plus");
   const _component_el_icon = resolveComponent("el-icon");
-  return openBlock(), createElementBlock("div", _hoisted_1$9, [
+  return openBlock(), createElementBlock("div", _hoisted_1$a, [
     createElementVNode("div", _hoisted_2$4, [
       createElementVNode("div", {
         class: "m-editor-empty-button",
@@ -2088,7 +2085,7 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ]);
 }
-const AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$8]]);
+const AddPageBox = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$7]]);
 
 const _sfc_main$j = defineComponent({
   name: "m-editor-resize",
@@ -2133,16 +2130,16 @@ const _sfc_main$j = defineComponent({
   }
 });
 
-const _hoisted_1$8 = {
+const _hoisted_1$9 = {
   ref: "target",
   class: "m-editor-resizer"
 };
-function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("span", _hoisted_1$8, [
+function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", _hoisted_1$9, [
     renderSlot(_ctx.$slots, "default")
   ], 512);
 }
-const Resizer = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$7]]);
+const Resizer = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$6]]);
 
 const _sfc_main$i = defineComponent({
   components: {
@@ -2174,17 +2171,17 @@ const _sfc_main$i = defineComponent({
   }
 });
 
-const _hoisted_1$7 = { class: "m-editor" };
+const _hoisted_1$8 = { class: "m-editor" };
 const _hoisted_2$3 = {
   key: 1,
   class: "m-editor-content"
 };
-function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_magic_code_editor = resolveComponent("magic-code-editor");
   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$7, [
+  return openBlock(), createElementBlock("div", _hoisted_1$8, [
     renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
     _ctx.showSrc ? (openBlock(), createBlock(_component_magic_code_editor, {
       key: 0,
@@ -2225,9 +2222,9 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
     ]))
   ]);
 }
-const Framework = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$6]]);
+const Framework = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$5]]);
 
-const _hoisted_1$6 = ["src"];
+const _hoisted_1$7 = ["src"];
 const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "Icon",
   props: {
@@ -2236,20 +2233,29 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       const _component_el_icon = resolveComponent("el-icon");
-      return !__props.icon ? (openBlock(), createBlock(_component_el_icon, { key: 0 }, {
+      return !__props.icon ? (openBlock(), createBlock(_component_el_icon, {
+        key: 0,
+        class: "magic-editor-icon"
+      }, {
         default: withCtx(() => [
           createVNode(unref(Edit))
         ]),
         _: 1
-      })) : typeof __props.icon === "string" && __props.icon.startsWith("http") ? (openBlock(), createBlock(_component_el_icon, { key: 1 }, {
+      })) : typeof __props.icon === "string" && __props.icon.startsWith("http") ? (openBlock(), createBlock(_component_el_icon, {
+        key: 1,
+        class: "magic-editor-icon"
+      }, {
         default: withCtx(() => [
-          createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$6)
+          createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1$7)
         ]),
         _: 1
       })) : typeof __props.icon === "string" ? (openBlock(), createElementBlock("i", {
         key: 2,
-        class: normalizeClass(__props.icon)
-      }, null, 2)) : (openBlock(), createBlock(_component_el_icon, { key: 3 }, {
+        class: normalizeClass(["magic-editor-icon", __props.icon])
+      }, null, 2)) : (openBlock(), createBlock(_component_el_icon, {
+        key: 3,
+        class: "magic-editor-icon"
+      }, {
         default: withCtx(() => [
           (openBlock(), createBlock(resolveDynamicComponent(toRaw(__props.icon))))
         ]),
@@ -2259,7 +2265,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$5 = {
+const _hoisted_1$6 = {
   key: 1,
   class: "menu-item-text"
 };
@@ -2347,7 +2353,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         __props.data.type === "divider" ? (openBlock(), createBlock(_component_el_divider, {
           key: 0,
           direction: __props.data.direction || "vertical"
-        }, null, 8, ["direction"])) : __props.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$5, toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+        }, null, 8, ["direction"])) : __props.data.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$6, toDisplayString(__props.data.text), 1)) : __props.data.type === "button" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
           __props.data.tooltip ? (openBlock(), createBlock(_component_el_tooltip, {
             key: 0,
             effect: "dark",
@@ -2590,7 +2596,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$4 = { class: "`m-editor-props-panel" };
+const _hoisted_1$5 = { class: "`m-editor-props-panel" };
 const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "PropsPanel",
   emits: ["mounted"],
@@ -2640,7 +2646,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     expose({ submit });
     return (_ctx, _cache) => {
       const _component_m_form = resolveComponent("m-form");
-      return openBlock(), createElementBlock("div", _hoisted_1$4, [
+      return openBlock(), createElementBlock("div", _hoisted_1$5, [
         renderSlot(_ctx.$slots, "props-panel-header"),
         createVNode(_component_m_form, {
           ref_key: "configForm",
@@ -2657,10 +2663,11 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$d = defineComponent({
-  name: "ui-component-panel",
-  components: { MIcon: _sfc_main$h },
-  setup() {
+const _hoisted_1$4 = /* @__PURE__ */ createElementVNode("i", { class: "el-icon-s-grid" }, null, -1);
+const _hoisted_2$1 = ["onClick", "onDragstart"];
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
+  __name: "ComponentListPanel",
+  setup(__props) {
     const searchText = ref("");
     const services = inject("services");
     const stageOptions = inject("stageOptions");
@@ -2673,132 +2680,124 @@ const _sfc_main$d = defineComponent({
     let timeout;
     let clientX;
     let clientY;
-    return {
-      searchText,
-      collapseValue,
-      list,
-      appendComponent({ text, type, data = {} }) {
-        services?.editorService.add({
+    const appendComponent = ({ text, type, data = {} }) => {
+      services?.editorService.add({
+        name: text,
+        type,
+        ...data
+      });
+    };
+    const dragstartHandler = ({ text, type, data = {} }, e) => {
+      if (e.dataTransfer) {
+        e.dataTransfer.effectAllowed = "move";
+        e.dataTransfer.setData("data", serialize({
           name: text,
           type,
           ...data
-        });
-      },
-      dragstartHandler({ text, type, data = {} }, e) {
-        if (e.dataTransfer) {
-          e.dataTransfer.effectAllowed = "move";
-          e.dataTransfer.setData("data", serialize({
-            name: text,
-            type,
-            ...data
-          }).replace(/"(\w+)":\s/g, "$1: "));
-        }
-      },
-      dragendHandler() {
+        }).replace(/"(\w+)":\s/g, "$1: "));
+      }
+    };
+    const dragendHandler = () => {
+      if (timeout) {
+        globalThis.clearTimeout(timeout);
+        timeout = void 0;
+      }
+      const doc = stage.value?.renderer.contentWindow?.document;
+      if (doc && stageOptions) {
+        removeClassNameByClassName(doc, stageOptions.containerHighlightClassName);
+      }
+      clientX = 0;
+      clientY = 0;
+    };
+    const dragHandler = (e) => {
+      if (e.clientX !== clientX || e.clientY !== clientY) {
+        clientX = e.clientX;
+        clientY = e.clientY;
         if (timeout) {
           globalThis.clearTimeout(timeout);
           timeout = void 0;
         }
-        const doc = stage.value?.renderer.contentWindow?.document;
-        if (doc && stageOptions) {
-          removeClassNameByClassName(doc, stageOptions.containerHighlightClassName);
-        }
-        clientX = 0;
-        clientY = 0;
-      },
-      dragHandler(e) {
-        if (e.clientX !== clientX || e.clientY !== clientY) {
-          clientX = e.clientX;
-          clientY = e.clientY;
-          if (timeout) {
-            globalThis.clearTimeout(timeout);
-            timeout = void 0;
-          }
-          return;
-        }
-        if (timeout || !stage.value)
-          return;
-        timeout = stage.value.getAddContainerHighlightClassNameTimeout(e);
+        return;
       }
+      if (timeout || !stage.value)
+        return;
+      timeout = stage.value.getAddContainerHighlightClassNameTimeout(e);
     };
-  }
-});
-
-const _hoisted_1$3 = /* @__PURE__ */ createElementVNode("i", { class: "el-icon-s-grid" }, null, -1);
-const _hoisted_2$1 = ["onClick", "onDragstart"];
-function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_el_input = resolveComponent("el-input");
-  const _component_m_icon = resolveComponent("m-icon");
-  const _component_el_tooltip = resolveComponent("el-tooltip");
-  const _component_el_collapse_item = resolveComponent("el-collapse-item");
-  const _component_el_collapse = resolveComponent("el-collapse");
-  const _component_el_scrollbar = resolveComponent("el-scrollbar");
-  return openBlock(), createBlock(_component_el_scrollbar, null, {
-    default: withCtx(() => [
-      renderSlot(_ctx.$slots, "component-list-panel-header"),
-      createVNode(_component_el_collapse, {
-        class: "ui-component-panel",
-        "model-value": _ctx.collapseValue
-      }, {
+    return (_ctx, _cache) => {
+      const _component_el_input = resolveComponent("el-input");
+      const _component_el_tooltip = resolveComponent("el-tooltip");
+      const _component_el_collapse_item = resolveComponent("el-collapse-item");
+      const _component_el_collapse = resolveComponent("el-collapse");
+      const _component_el_scrollbar = resolveComponent("el-scrollbar");
+      return openBlock(), createBlock(_component_el_scrollbar, null, {
         default: withCtx(() => [
-          createVNode(_component_el_input, {
-            "prefix-icon": "el-icon-search",
-            placeholder: "\u8F93\u5165\u5173\u952E\u5B57\u8FDB\u884C\u8FC7\u6EE4",
-            class: "search-input",
-            size: "small",
-            clearable: "",
-            modelValue: _ctx.searchText,
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.searchText = $event)
-          }, null, 8, ["modelValue"]),
-          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.list, (group, index) => {
-            return openBlock(), createElementBlock(Fragment, null, [
-              group.items && group.items.length ? (openBlock(), createBlock(_component_el_collapse_item, {
-                key: index,
-                name: index
-              }, {
-                title: withCtx(() => [
-                  _hoisted_1$3,
-                  createTextVNode(toDisplayString(group.title), 1)
-                ]),
-                default: withCtx(() => [
-                  (openBlock(true), createElementBlock(Fragment, null, renderList(group.items, (item) => {
-                    return openBlock(), createElementBlock("div", {
-                      class: "component-item",
-                      draggable: "true",
-                      key: item.type,
-                      onClick: ($event) => _ctx.appendComponent(item),
-                      onDragstart: ($event) => _ctx.dragstartHandler(item, $event),
-                      onDragend: _cache[1] || (_cache[1] = (...args) => _ctx.dragendHandler && _ctx.dragendHandler(...args)),
-                      onDrag: _cache[2] || (_cache[2] = (...args) => _ctx.dragHandler && _ctx.dragHandler(...args))
-                    }, [
-                      createVNode(_component_m_icon, {
-                        icon: item.icon
-                      }, null, 8, ["icon"]),
-                      createVNode(_component_el_tooltip, {
-                        effect: "dark",
-                        placement: "bottom",
-                        content: item.text
-                      }, {
-                        default: withCtx(() => [
-                          createElementVNode("span", null, toDisplayString(item.text), 1)
-                        ]),
-                        _: 2
-                      }, 1032, ["content"])
-                    ], 40, _hoisted_2$1);
-                  }), 128))
-                ]),
-                _: 2
-              }, 1032, ["name"])) : createCommentVNode("", true)
-            ], 64);
-          }), 256))
+          renderSlot(_ctx.$slots, "component-list-panel-header"),
+          createVNode(_component_el_collapse, {
+            class: "ui-component-panel",
+            "model-value": unref(collapseValue)
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_el_input, {
+                "prefix-icon": "el-icon-search",
+                placeholder: "\u8F93\u5165\u5173\u952E\u5B57\u8FDB\u884C\u8FC7\u6EE4",
+                class: "search-input",
+                size: "small",
+                clearable: "",
+                modelValue: searchText.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchText.value = $event)
+              }, null, 8, ["modelValue"]),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(list), (group, index) => {
+                return openBlock(), createElementBlock(Fragment, null, [
+                  group.items && group.items.length ? (openBlock(), createBlock(_component_el_collapse_item, {
+                    key: index,
+                    name: index
+                  }, {
+                    title: withCtx(() => [
+                      _hoisted_1$4,
+                      createTextVNode(toDisplayString(group.title), 1)
+                    ]),
+                    default: withCtx(() => [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(group.items, (item) => {
+                        return openBlock(), createElementBlock("div", {
+                          class: "component-item",
+                          draggable: "true",
+                          key: item.type,
+                          onClick: ($event) => appendComponent(item),
+                          onDragstart: ($event) => dragstartHandler(item, $event),
+                          onDragend: dragendHandler,
+                          onDrag: dragHandler
+                        }, [
+                          renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [
+                            createVNode(_sfc_main$h, {
+                              icon: item.icon
+                            }, null, 8, ["icon"]),
+                            createVNode(_component_el_tooltip, {
+                              effect: "dark",
+                              placement: "bottom",
+                              content: item.text
+                            }, {
+                              default: withCtx(() => [
+                                createElementVNode("span", null, toDisplayString(item.text), 1)
+                              ]),
+                              _: 2
+                            }, 1032, ["content"])
+                          ])
+                        ], 40, _hoisted_2$1);
+                      }), 128))
+                    ]),
+                    _: 2
+                  }, 1032, ["name"])) : createCommentVNode("", true)
+                ], 64);
+              }), 256))
+            ]),
+            _: 3
+          }, 8, ["model-value"])
         ]),
-        _: 1
-      }, 8, ["model-value"])
-    ]),
-    _: 3
-  });
-}
-const ComponentListPanel = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$5]]);
+        _: 3
+      });
+    };
+  }
+});
 
 const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "ContentMenu",
@@ -3180,7 +3179,7 @@ const _sfc_main$a = defineComponent({
   }
 });
 
-const _hoisted_1$2 = ["id", "onMouseenter"];
+const _hoisted_1$3 = ["id", "onMouseenter"];
 function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_input = resolveComponent("el-input");
   const _component_el_tree = resolveComponent("el-tree");
@@ -3234,7 +3233,7 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
             }, () => [
               createElementVNode("span", null, toDisplayString(`${data.name} (${data.id})`), 1)
             ])
-          ], 42, _hoisted_1$2)
+          ], 42, _hoisted_1$3)
         ]),
         _: 3
       }, 8, ["default-expanded-keys", "load", "data", "filter-node-method", "allow-drop", "onNodeClick", "onNodeContextmenu", "onNodeDragEnd", "onNodeCollapse", "onNodeExpand"])) : createCommentVNode("", true),
@@ -3266,7 +3265,7 @@ const _sfc_main$9 = defineComponent({
               type: "component",
               icon: Coin,
               text: "\u7EC4\u4EF6",
-              component: ComponentListPanel,
+              component: _sfc_main$d,
               slots: {}
             };
           case "layer":
@@ -3285,7 +3284,7 @@ const _sfc_main$9 = defineComponent({
   }
 });
 
-const _hoisted_1$1 = {
+const _hoisted_1$2 = {
   key: 1,
   class: "magic-editor-tab-panel-title"
 };
@@ -3304,7 +3303,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
           key: 0,
           icon: _ctx.config.icon
         }, null, 8, ["icon"])) : createCommentVNode("", true),
-        _ctx.config.text ? (openBlock(), createElementBlock("div", _hoisted_1$1, toDisplayString(_ctx.config.text), 1)) : createCommentVNode("", true)
+        _ctx.config.text ? (openBlock(), createElementBlock("div", _hoisted_1$2, toDisplayString(_ctx.config.text), 1)) : createCommentVNode("", true)
       ]))
     ]),
     default: withCtx(() => [
@@ -3315,6 +3314,18 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
             _ctx.data === "component-list" ? renderSlot(_ctx.$slots, "component-list-panel-header", { key: 0 }) : _ctx.config.slots?.componentListPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.config.slots.componentListPanelHeader), { key: 1 })) : createCommentVNode("", true)
           ])
         } : void 0,
+        _ctx.data === "component-list" || _ctx.config.slots?.componentListItem ? {
+          name: "component-list-item",
+          fn: withCtx(({ component }) => [
+            _ctx.data === "component-list" ? renderSlot(_ctx.$slots, "component-list-item", {
+              key: 0,
+              component
+            }) : _ctx.config.slots?.componentListItem ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.config.slots.componentListItem), {
+              key: 1,
+              component
+            }, null, 8, ["component"])) : createCommentVNode("", true)
+          ])
+        } : void 0,
         _ctx.data === "layer" || _ctx.config.slots?.layerPanelHeader ? {
           name: "layer-panel-header",
           fn: withCtx(() => [
@@ -3385,6 +3396,12 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
             fn: withCtx(() => [
               renderSlot(_ctx.$slots, "component-list-panel-header")
             ])
+          } : void 0,
+          item === "component-list" ? {
+            name: "component-list-item",
+            fn: withCtx(({ component }) => [
+              renderSlot(_ctx.$slots, "component-list-item", { component })
+            ])
           } : void 0
         ]), 1032, ["data"]);
       }), 128))
@@ -3394,16 +3411,22 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
 }
 const Sidebar = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$1]]);
 
+const _hoisted_1$1 = {
+  key: 1,
+  style: { "width": "21px" }
+};
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "PageBarScrollContainer",
   setup(__props) {
     const services = inject("services");
     const editorService = services?.editorService;
+    const uiService = services?.uiService;
     const pageBar = ref();
     const itemsContainer = ref();
     const pageBarWidth = ref(0);
     const canScroll = ref(false);
-    const itemsContainerWidth = computed(() => pageBarWidth.value - 105);
+    const showAddPageButton = computed(() => uiService?.get("showAddPageButton"));
+    const itemsContainerWidth = computed(() => pageBarWidth.value - 35 * 2 - (showAddPageButton.value ? 35 : 21));
     let translateLeft = 0;
     const resizeObserver = new ResizeObserver((entries) => {
       for (const { contentRect } of entries) {
@@ -3414,7 +3437,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     });
     const setCanScroll = () => {
       if (itemsContainer.value) {
-        canScroll.value = itemsContainer.value.scrollWidth > pageBarWidth.value - 105;
+        canScroll.value = itemsContainer.value.scrollWidth > itemsContainerWidth.value;
       }
     };
     const scroll = (type) => {
@@ -3471,7 +3494,8 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         ref_key: "pageBar",
         ref: pageBar
       }, [
-        createElementVNode("div", {
+        unref(showAddPageButton) ? (openBlock(), createElementBlock("div", {
+          key: 0,
           id: "m-editor-page-bar-add-icon",
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: addPage
@@ -3482,9 +3506,9 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           })
-        ]),
+        ])) : (openBlock(), createElementBlock("div", _hoisted_1$1)),
         canScroll.value ? (openBlock(), createElementBlock("div", {
-          key: 0,
+          key: 2,
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
         }, [
@@ -3496,7 +3520,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           })
         ])) : createCommentVNode("", true),
         unref(root) ? (openBlock(), createElementBlock("div", {
-          key: 1,
+          key: 3,
           class: "m-editor-page-bar-items",
           ref_key: "itemsContainer",
           ref: itemsContainer,
@@ -3505,7 +3529,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "default")
         ], 4)) : createCommentVNode("", true),
         canScroll.value ? (openBlock(), createElementBlock("div", {
-          key: 2,
+          key: 4,
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
         }, [
@@ -4161,8 +4185,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         config.style = {
           ...style,
           position,
-          top,
-          left
+          top: top / zoom.value,
+          left: left / zoom.value
         };
         config.inputEvent = e;
         services?.editorService.add(config, parent);
@@ -4443,9 +4467,14 @@ const _sfc_main = defineComponent({
   },
   emits: ["props-panel-mounted", "update:modelValue"],
   setup(props, { emit }) {
-    editorService.on("root-change", () => {
-      const node = editorService.get("node") || props.defaultSelected;
-      node && editorService.select(node);
+    editorService.on("root-change", (value) => {
+      const node = editorService.get("node");
+      const nodeId = node?.id || props.defaultSelected;
+      if (nodeId && node !== value) {
+        editorService.select(nodeId);
+      } else {
+        editorService.set("nodes", [value]);
+      }
       emit("update:modelValue", toRaw(editorService.get("root")));
     });
     watch(() => props.modelValue, (modelValue) => editorService.set("root", modelValue), {
@@ -4536,6 +4565,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           "component-list-panel-header": withCtx(() => [
             renderSlot(_ctx.$slots, "component-list-panel-header")
           ]),
+          "component-list-item": withCtx(({ component }) => [
+            renderSlot(_ctx.$slots, "component-list-item", { component })
+          ]),
           _: 3
         }, 8, ["data"])
       ])
@@ -4595,5 +4627,5 @@ const index = {
   }
 };
 
-export { COPY_STORAGE_KEY, ColumnLayout, ComponentListPanel, _sfc_main$c as ContentMenu, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$h as Icon, Keys, LayerOffset, LayerPanel, Layout, _sfc_main$e as PropsPanel, CodeEditor as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$g as ToolButton, V_GUIDE_LINE_STORAGE_KEY, change2Fixed, debug, index as default, editorService, error, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getRelativeStyle, historyService, info, isFixed, log, propsService, setConfig, setLayout, storageService, uiService, useStage, warn };
+export { COPY_STORAGE_KEY, ColumnLayout, _sfc_main$d as ComponentListPanel, _sfc_main$c as ContentMenu, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$h as Icon, Keys, LayerOffset, LayerPanel, Layout, _sfc_main$e as PropsPanel, CodeEditor as TMagicCodeEditor, Editor as TMagicEditor, _sfc_main$g as ToolButton, V_GUIDE_LINE_STORAGE_KEY, change2Fixed, debug, index as default, editorService, error, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getConfig, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getRelativeStyle, historyService, info, isFixed, log, propsService, setConfig, setLayout, storageService, uiService, useStage, warn };
 //# sourceMappingURL=tmagic-editor.mjs.map