@tmagic/editor 1.0.3 → 1.1.0-beta.0

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('@element-plus/icons'), require('lodash-es'), require('monaco-editor'), require('@tmagic/schema'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('gesto'), require('element-plus'), require('keycon'), require('@tmagic/stage')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', '@element-plus/icons', 'lodash-es', 'monaco-editor', '@tmagic/schema', '@tmagic/utils', 'events', '@tmagic/core', 'gesto', 'element-plus', 'keycon', '@tmagic/stage'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.serialize, global.icons, global.lodashEs, global.monaco, global.schema, global.utils, global.events, global.core, global.Gesto, global.ElementPlus, global.KeyController, global.StageCore));
-})(this, (function (exports, vue, serialize, icons, lodashEs, monaco, schema, utils, events, core, Gesto, elementPlus, KeyController, StageCore) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('serialize-javascript'), require('@element-plus/icons'), require('lodash-es'), require('monaco-editor'), require('@tmagic/stage'), require('@tmagic/schema'), require('@tmagic/utils'), require('events'), require('@tmagic/core'), require('gesto'), require('element-plus'), require('keycon')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'serialize-javascript', '@element-plus/icons', 'lodash-es', 'monaco-editor', '@tmagic/stage', '@tmagic/schema', '@tmagic/utils', 'events', '@tmagic/core', 'gesto', 'element-plus', 'keycon'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.TMagicEditor = {}, global.Vue, global.serialize, global.icons, global.lodashEs, global.monaco, global.StageCore, global.schema, global.utils, global.events, global.core, global.Gesto, global.ElementPlus, global.KeyController));
+})(this, (function (exports, vue, serialize, icons, lodashEs, monaco, StageCore, schema, utils, events, core, Gesto, elementPlus, KeyController) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,9 +26,9 @@
 
   var serialize__default = /*#__PURE__*/_interopDefaultLegacy(serialize);
   var monaco__namespace = /*#__PURE__*/_interopNamespace(monaco);
+  var StageCore__default = /*#__PURE__*/_interopDefaultLegacy(StageCore);
   var Gesto__default = /*#__PURE__*/_interopDefaultLegacy(Gesto);
   var KeyController__default = /*#__PURE__*/_interopDefaultLegacy(KeyController);
-  var StageCore__default = /*#__PURE__*/_interopDefaultLegacy(StageCore);
 
   if (typeof global === "undefined") {
     window.global = window;
@@ -206,7 +206,7 @@
       };
     }
   });
-  const _hoisted_1$c = /* @__PURE__ */ vue.createTextVNode("\u53D6\u6D88");
+  const _hoisted_1$d = /* @__PURE__ */ vue.createTextVNode("\u53D6\u6D88");
   function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_button = vue.resolveComponent("el-button");
     const _component_el_tooltip = vue.resolveComponent("el-tooltip");
@@ -222,7 +222,7 @@
         style: { "padding": "0" }
       }, {
         default: vue.withCtx(() => [
-          _hoisted_1$c
+          _hoisted_1$d
         ]),
         _: 1
       }, 8, ["icon"])
@@ -387,12 +387,12 @@
       };
     }
   });
-  const _hoisted_1$b = {
+  const _hoisted_1$c = {
     ref: "codeEditor",
     class: "magic-code-editor"
   };
   function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, null, 512);
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, null, 512);
   }
   var CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$j]]);
 
@@ -768,56 +768,50 @@
     const items = parent?.items || [];
     return items.findIndex((item) => `${item.id}` === `${node.id}`);
   };
-  const toRelative = (node) => {
-    node.style = {
-      ...node.style || {},
-      position: "relative",
-      top: 0,
-      left: 0
-    };
-    return node;
-  };
-  const setTop2Middle = (node, parentNode, stage) => {
-    const style = node.style || {};
+  const getRelativeStyle = (style = {}) => ({
+    ...style,
+    position: "relative",
+    top: 0,
+    left: 0
+  });
+  const getMiddleTop = (style = {}, parentNode, stage) => {
     let height = style.height || 0;
     if (!stage || typeof style.top !== "undefined" || !parentNode.style)
-      return style;
+      return style.top;
     if (!utils.isNumber(height)) {
       height = 0;
     }
     const { height: parentHeight } = parentNode.style;
     if (utils.isPage(parentNode)) {
       const { scrollTop = 0, wrapperHeight } = stage.mask;
-      style.top = (wrapperHeight - height) / 2 + scrollTop;
-    } else {
-      style.top = (parentHeight - height) / 2;
+      return (wrapperHeight - height) / 2 + scrollTop;
     }
-    return style;
+    return (parentHeight - height) / 2;
   };
-  const initPosition = (node, layout, parentNode, stage) => {
+  const getInitPositionStyle = (style = {}, layout, parentNode, stage) => {
     if (layout === Layout.ABSOLUTE) {
-      node.style = {
+      return {
+        ...style,
         position: "absolute",
-        ...setTop2Middle(node, parentNode, stage)
+        top: getMiddleTop(style, parentNode, stage)
       };
-      return node;
     }
     if (layout === Layout.RELATIVE) {
-      return toRelative(node);
+      return getRelativeStyle(style);
     }
-    return node;
+    return style;
   };
   const setLayout = (node, layout) => {
     node.items?.forEach((child) => {
       if (utils.isPop(child))
         return;
-      child.style = child.style || {};
-      if (child.style.position === "fixed")
+      const style = child.style || {};
+      if (style.position === "fixed")
         return;
       if (layout !== Layout.RELATIVE) {
-        child.style.position = "absolute";
+        style.position = "absolute";
       } else {
-        toRelative(child);
+        child.style = getRelativeStyle(style);
         child.style.right = "auto";
         child.style.bottom = "auto";
       }
@@ -834,11 +828,10 @@
       offset.left = offset.left + globalThis.parseFloat(value.style?.left || 0);
       offset.top = offset.top + globalThis.parseFloat(value.style?.top || 0);
     });
-    node.style = {
+    return {
       ...node.style || {},
       ...offset
     };
-    return node;
   };
   const Fixed2Other = async (node, root, getLayout) => {
     const path = utils.getNodePath(node.id, root.items);
@@ -853,20 +846,20 @@
       offset.left = offset.left - globalThis.parseFloat(value.style?.left || 0);
       offset.top = offset.top - globalThis.parseFloat(value.style?.top || 0);
     });
+    const style = node.style || {};
     const parent = path.pop();
     if (!parent) {
-      return toRelative(node);
+      return getRelativeStyle(style);
     }
     const layout = await getLayout(parent);
     if (layout !== Layout.RELATIVE) {
-      node.style = {
-        ...node.style || {},
+      return {
+        ...style,
         ...offset,
         position: "absolute"
       };
-      return node;
     }
-    return toRelative(node);
+    return getRelativeStyle(style);
   };
   const getGuideLineFromCache = (key) => {
     if (!key)
@@ -881,6 +874,16 @@
     }
     return [];
   };
+  const fixNodeLeft = (config, parent, doc) => {
+    if (!doc || !config.style || !utils.isNumber(config.style.left))
+      return config.style?.left;
+    const el = doc.getElementById(`${config.id}`);
+    const parentEl = doc.getElementById(`${parent.id}`);
+    if (el && parentEl && el.offsetWidth + config.style?.left > parentEl.offsetWidth) {
+      return parentEl.offsetWidth - el.offsetWidth;
+    }
+    return config.style.left;
+  };
 
   const log = (...args) => {
   };
@@ -906,6 +909,7 @@
         "paste",
         "alignCenter",
         "moveLayer",
+        "moveToContainer",
         "move",
         "undo",
         "redo",
@@ -1045,13 +1049,22 @@
       if (!parentNode)
         throw new Error("\u672A\u627E\u5230\u7236\u5143\u7D20");
       const layout = await this.getLayout(vue.toRaw(parentNode), addNode);
-      const newNode = initPosition({ ...vue.toRaw(await propsService.getPropsValue(type, config2)) }, layout, parentNode, this.get("stage"));
+      const newNode = { ...vue.toRaw(await propsService.getPropsValue(type, config2)) };
+      newNode.style = getInitPositionStyle(newNode.style, layout, parentNode, this.get("stage"));
       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);
       const stage = this.get("stage");
-      await stage?.add({ config: lodashEs.cloneDeep(newNode), root: lodashEs.cloneDeep(this.get("root")) });
+      const root = this.get("root");
+      await stage?.add({ config: lodashEs.cloneDeep(newNode), root: lodashEs.cloneDeep(root) });
+      if (layout === Layout.ABSOLUTE) {
+        const fixedLeft = fixNodeLeft(newNode, parentNode, stage?.renderer.contentWindow?.document);
+        if (typeof fixedLeft !== "undefined") {
+          newNode.style.left = fixedLeft;
+          await stage?.update({ config: lodashEs.cloneDeep(newNode), root: lodashEs.cloneDeep(root) });
+        }
+      }
       await this.select(newNode);
       this.addModifiedNodeId(newNode.id);
       if (!isPage2) {
@@ -1078,7 +1091,7 @@
         throw new Error("\u627E\u4E0D\u8981\u5220\u9664\u7684\u8282\u70B9");
       parent.items?.splice(index, 1);
       const stage = this.get("stage");
-      stage?.remove({ id: node.id, root: this.get("root") });
+      stage?.remove({ id: node.id, root: lodashEs.cloneDeep(this.get("root")) });
       if (node.type === schema.NodeType.PAGE) {
         this.state.pageLength -= 1;
         if (root.items[0]) {
@@ -1139,7 +1152,7 @@
       if (`${newConfig.id}` === `${this.get("node").id}`) {
         this.set("node", newConfig);
       }
-      this.get("stage")?.update({ config: lodashEs.cloneDeep(newConfig), root: this.get("root") });
+      this.get("stage")?.update({ config: lodashEs.cloneDeep(newConfig), root: lodashEs.cloneDeep(this.get("root")) });
       if (newConfig.type === schema.NodeType.PAGE) {
         this.set("page", newConfig);
       }
@@ -1158,7 +1171,7 @@
       parent.items.splice(index2, 0, ...parent.items.splice(index1, 1));
       await this.update(parent);
       await this.select(node);
-      this.get("stage")?.update({ config: lodashEs.cloneDeep(node), root: this.get("root") });
+      this.get("stage")?.update({ config: lodashEs.cloneDeep(node), root: lodashEs.cloneDeep(this.get("root")) });
       this.addModifiedNodeId(parent.id);
       this.pushHistoryState();
     }
@@ -1210,7 +1223,10 @@
         node.style.left = (parent.style.width - node.style.width) / 2;
       }
       await this.update(node);
-      this.get("stage")?.update({ config: lodashEs.cloneDeep(vue.toRaw(node)), root: this.get("root") });
+      this.get("stage")?.update({
+        config: lodashEs.cloneDeep(vue.toRaw(node)),
+        root: lodashEs.cloneDeep(this.get("root"))
+      });
       this.addModifiedNodeId(config2.id);
       this.pushHistoryState();
       return config2;
@@ -1227,7 +1243,37 @@
       } else {
         brothers.splice(index + parseInt(`${offset}`, 10), 0, brothers.splice(index, 1)[0]);
       }
-      this.get("stage")?.update({ config: lodashEs.cloneDeep(vue.toRaw(parent)), root: this.get("root") });
+      this.get("stage")?.update({
+        config: lodashEs.cloneDeep(vue.toRaw(parent)),
+        root: lodashEs.cloneDeep(this.get("root"))
+      });
+    }
+    async moveToContainer(config2, targetId) {
+      const { node, parent } = this.getNodeInfo(config2.id, false);
+      const target = this.getNodeById(targetId, false);
+      const stage = this.get("stage");
+      if (node && parent && stage) {
+        const root = lodashEs.cloneDeep(this.get("root"));
+        const index = getNodeIndex(node, parent);
+        parent.items?.splice(index, 1);
+        await stage.remove({ id: node.id, root });
+        const layout = await this.getLayout(target);
+        const newConfig = lodashEs.mergeWith(lodashEs.cloneDeep(node), config2, (objValue, srcValue) => {
+          if (Array.isArray(srcValue)) {
+            return srcValue;
+          }
+        });
+        newConfig.style = getInitPositionStyle(newConfig.style, layout, target, stage);
+        target.items.push(newConfig);
+        await stage.select(targetId);
+        await stage.update({ config: lodashEs.cloneDeep(target), root });
+        await this.select(newConfig);
+        stage.select(newConfig.id);
+        this.addModifiedNodeId(target.id);
+        this.addModifiedNodeId(parent.id);
+        this.pushHistoryState();
+        return newConfig;
+      }
     }
     async undo() {
       const value = historyService.undo();
@@ -1299,12 +1345,12 @@
       }, 0);
     }
     async toggleFixedPosition(dist, src, root) {
-      let newConfig = lodashEs.cloneDeep(dist);
+      const newConfig = lodashEs.cloneDeep(dist);
       if (!utils.isPop(src) && newConfig.style?.position) {
         if (isFixed(newConfig) && !isFixed(src)) {
-          newConfig = change2Fixed(newConfig, root);
+          newConfig.style = change2Fixed(newConfig, root);
         } else if (!isFixed(newConfig) && isFixed(src)) {
-          newConfig = await Fixed2Other(newConfig, root, this.getLayout);
+          newConfig.style = await Fixed2Other(newConfig, root, this.getLayout);
         }
       }
       return newConfig;
@@ -1613,13 +1659,13 @@
       };
     }
   });
-  const _hoisted_1$a = { class: "m-editor-empty-panel" };
+  const _hoisted_1$b = { class: "m-editor-empty-panel" };
   const _hoisted_2$4 = { class: "m-editor-empty-content" };
   const _hoisted_3$2 = /* @__PURE__ */ vue.createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
   function _sfc_render$i(_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$a, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
       vue.createElementVNode("div", _hoisted_2$4, [
         vue.createElementVNode("div", {
           class: "m-editor-empty-button",
@@ -1682,12 +1728,12 @@
       };
     }
   });
-  const _hoisted_1$9 = {
+  const _hoisted_1$a = {
     ref: "target",
     class: "m-editor-resizer"
   };
   function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("span", _hoisted_1$9, [
+    return vue.openBlock(), vue.createElementBlock("span", _hoisted_1$a, [
       vue.renderSlot(_ctx.$slots, "default")
     ], 512);
   }
@@ -1722,7 +1768,7 @@
       };
     }
   });
-  const _hoisted_1$8 = { class: "m-editor" };
+  const _hoisted_1$9 = { class: "m-editor" };
   const _hoisted_2$3 = {
     key: 1,
     class: "m-editor-content"
@@ -1732,7 +1778,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$8, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
       vue.renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
       _ctx.showSrc ? (vue.openBlock(), vue.createBlock(_component_magic_code_editor, {
         key: 0,
@@ -1762,7 +1808,7 @@
           }, [
             vue.createVNode(_component_el_scrollbar, null, {
               default: vue.withCtx(() => [
-                vue.renderSlot(_ctx.$slots, "propsPanel")
+                vue.renderSlot(_ctx.$slots, "props-panel")
               ]),
               _: 3
             })
@@ -1789,7 +1835,7 @@
       };
     }
   });
-  const _hoisted_1$7 = ["src"];
+  const _hoisted_1$8 = ["src"];
   function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_edit = vue.resolveComponent("edit");
     const _component_el_icon = vue.resolveComponent("el-icon");
@@ -1801,7 +1847,7 @@
     })) : typeof _ctx.icon === "string" && _ctx.icon.startsWith("http") ? (vue.openBlock(), vue.createElementBlock("img", {
       key: 1,
       src: _ctx.icon
-    }, null, 8, _hoisted_1$7)) : typeof _ctx.icon === "string" ? (vue.openBlock(), vue.createElementBlock("i", {
+    }, null, 8, _hoisted_1$8)) : 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 }, {
@@ -1973,7 +2019,7 @@
       };
     }
   });
-  const _hoisted_1$6 = {
+  const _hoisted_1$7 = {
     key: 1,
     class: "menu-item-text"
   };
@@ -2003,7 +2049,7 @@
       _ctx.item.type === "divider" ? (vue.openBlock(), vue.createBlock(_component_el_divider, {
         key: 0,
         direction: _ctx.item.direction || "vertical"
-      }, null, 8, ["direction"])) : _ctx.item.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, vue.toDisplayString(_ctx.item.text), 1)) : _ctx.item.type === "zoom" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+      }, null, 8, ["direction"])) : _ctx.item.type === "text" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$7, vue.toDisplayString(_ctx.item.text), 1)) : _ctx.item.type === "zoom" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
         vue.createVNode(_component_tool_button, {
           data: { type: "button", icon: _ctx.ZoomOut, handler: _ctx.zoomOutHandler, tooltip: "\u7F29\u5C0F" },
           "event-type": _ctx.eventType
@@ -2184,17 +2230,21 @@
       };
     }
   });
+  const _hoisted_1$6 = { class: "`m-editor-props-panel" };
   function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_m_form = vue.resolveComponent("m-form");
-    return vue.openBlock(), vue.createBlock(_component_m_form, {
-      class: vue.normalizeClass(`m-editor-props-panel ${_ctx.propsPanelSize}`),
-      "popper-class": `m-editor-props-panel-popper ${_ctx.propsPanelSize}`,
-      ref: "configForm",
-      size: _ctx.propsPanelSize,
-      "init-values": _ctx.values,
-      config: _ctx.curFormConfig,
-      onChange: _ctx.submit
-    }, null, 8, ["class", "popper-class", "size", "init-values", "config", "onChange"]);
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
+      vue.renderSlot(_ctx.$slots, "props-panel-header"),
+      vue.createVNode(_component_m_form, {
+        class: vue.normalizeClass(`m-editor-props-panel ${_ctx.propsPanelSize}`),
+        "popper-class": `m-editor-props-panel-popper ${_ctx.propsPanelSize}`,
+        ref: "configForm",
+        size: _ctx.propsPanelSize,
+        "init-values": _ctx.values,
+        config: _ctx.curFormConfig,
+        onChange: _ctx.submit
+      }, null, 8, ["class", "popper-class", "size", "init-values", "config", "onChange"])
+    ]);
   }
   var PropsPanel = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c]]);
 
@@ -2204,11 +2254,16 @@
     setup() {
       const searchText = vue.ref("");
       const services = vue.inject("services");
+      const stageOptions = vue.inject("stageOptions");
+      const stage = vue.computed(() => services?.editorService.get("stage"));
       const list = vue.computed(() => services?.componentListService.getList().map((group) => ({
         ...group,
         items: group.items.filter((item) => item.text.includes(searchText.value))
       })));
       const collapseValue = vue.computed(() => Array(list.value?.length).fill(1).map((x, i) => i));
+      let timeout;
+      let clientX;
+      let clientY;
       return {
         searchText,
         collapseValue,
@@ -2229,6 +2284,43 @@
               ...data
             }).replace(/"(\w+)":\s/g, "$1: "));
           }
+        },
+        dragendHandler() {
+          if (timeout) {
+            globalThis.clearTimeout(timeout);
+            timeout = void 0;
+          }
+          const doc = stage.value?.renderer.contentWindow?.document;
+          if (doc && stageOptions) {
+            utils.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)
+            return;
+          timeout = globalThis.setTimeout(async () => {
+            if (!stageOptions || !stage.value)
+              return;
+            const doc = stage.value.renderer.contentWindow?.document;
+            const els = stage.value.getElementsFromPoint(e);
+            for (const el of els) {
+              if (doc && !el.id.startsWith(StageCore.GHOST_EL_ID_PREFIX) && await stageOptions.isContainer(el)) {
+                utils.addClassName(el, doc, stageOptions?.containerHighlightClassName);
+                break;
+              }
+            }
+          }, stageOptions?.containerHighlightDuration);
         }
       };
     }
@@ -2244,6 +2336,7 @@
     const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
     return vue.openBlock(), vue.createBlock(_component_el_scrollbar, null, {
       default: vue.withCtx(() => [
+        vue.renderSlot(_ctx.$slots, "component-list-panel-header"),
         vue.createVNode(_component_el_collapse, {
           class: "ui-component-panel",
           "model-value": _ctx.collapseValue
@@ -2275,7 +2368,9 @@
                         draggable: "true",
                         key: item.type,
                         onClick: ($event) => _ctx.appendComponent(item),
-                        onDragstart: ($event) => _ctx.dragstartHandler(item, $event)
+                        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))
                       }, [
                         vue.createVNode(_component_m_icon, {
                           icon: item.icon
@@ -2301,7 +2396,7 @@
           _: 1
         }, 8, ["model-value"])
       ]),
-      _: 1
+      _: 3
     });
   }
   var ComponentListPanel = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b]]);
@@ -2666,6 +2761,7 @@
     const _component_el_scrollbar = vue.resolveComponent("el-scrollbar");
     return vue.openBlock(), vue.createBlock(_component_el_scrollbar, { class: "magic-editor-layer-panel" }, {
       default: vue.withCtx(() => [
+        vue.renderSlot(_ctx.$slots, "layer-panel-header"),
         vue.createVNode(_component_el_input, {
           class: "filterInput",
           size: "small",
@@ -2783,6 +2879,18 @@
       ]),
       default: vue.withCtx(() => [
         (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.config.component), vue.mergeProps(_ctx.config.props || {}, vue.toHandlers(_ctx.config?.listeners || {})), vue.createSlots({ _: 2 }, [
+          _ctx.data === "component-list" || _ctx.config.slots?.componentListPanelHeader ? {
+            name: "component-list-panel-header",
+            fn: vue.withCtx(() => [
+              _ctx.data === "component-list" ? vue.renderSlot(_ctx.$slots, "component-list-panel-header", { key: 0 }) : _ctx.config.slots?.componentListPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.config.slots.componentListPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
+            ])
+          } : void 0,
+          _ctx.data === "layer" || _ctx.config.slots?.layerPanelHeader ? {
+            name: "layer-panel-header",
+            fn: vue.withCtx(() => [
+              _ctx.data === "layer" ? vue.renderSlot(_ctx.$slots, "layer-panel-header", { key: 0 }) : _ctx.config.slots?.layerPanelHeader ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.config.slots.layerPanelHeader), { key: 1 })) : vue.createCommentVNode("", true)
+            ])
+          } : void 0,
           _ctx.config.slots?.layerNodeContent ? {
             name: "layer-node-content",
             fn: vue.withCtx(({ data, node }) => [
@@ -2794,7 +2902,7 @@
           } : void 0
         ]), 1040))
       ]),
-      _: 1
+      _: 3
     }, 8, ["name"])) : vue.createCommentVNode("", true);
   }
   var TabPane = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7]]);
@@ -2834,10 +2942,23 @@
           return vue.openBlock(), vue.createBlock(_component_tab_pane, {
             key: index,
             data: item
-          }, null, 8, ["data"]);
+          }, vue.createSlots({ _: 2 }, [
+            item === "layer" ? {
+              name: "layer-panel-header",
+              fn: vue.withCtx(() => [
+                vue.renderSlot(_ctx.$slots, "layer-panel-header")
+              ])
+            } : void 0,
+            item === "component-list" ? {
+              name: "component-list-panel-header",
+              fn: vue.withCtx(() => [
+                vue.renderSlot(_ctx.$slots, "component-list-panel-header")
+              ])
+            } : void 0
+          ]), 1032, ["data"]);
         }), 128))
       ]),
-      _: 1
+      _: 3
     }, 8, ["modelValue"])) : vue.createCommentVNode("", true);
   }
   var Sidebar = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6]]);
@@ -3458,6 +3579,9 @@
           runtimeUrl: stageOptions.runtimeUrl,
           zoom: zoom.value,
           autoScrollIntoView: stageOptions.autoScrollIntoView,
+          isContainer: stageOptions.isContainer,
+          containerHighlightClassName: stageOptions.containerHighlightClassName,
+          containerHighlightDuration: stageOptions.containerHighlightDuration,
           canSelect: (el, event, stop) => {
             const elCanSelect = stageOptions.canSelect(el);
             if (uiSelectMode.value && elCanSelect && event.type === "mousedown") {
@@ -3482,6 +3606,10 @@
           services?.editorService.highlight(el.id);
         });
         stage?.on("update", (ev) => {
+          if (ev.parentEl) {
+            services?.editorService.moveToContainer({ id: ev.el.id, style: ev.style }, ev.parentEl.id);
+            return;
+          }
           services?.editorService.update({ id: ev.el.id, style: ev.style });
         });
         stage?.on("sort", (ev) => {
@@ -3553,20 +3681,38 @@
         },
         async dropHandler(e) {
           e.preventDefault();
-          if (e.dataTransfer && page.value && stageContainer.value && stage) {
+          const doc = stage?.renderer.contentWindow?.document;
+          const parentEl = doc?.querySelector(`.${stageOptions?.containerHighlightClassName}`);
+          let parent = page.value;
+          if (parentEl) {
+            parent = services?.editorService.getNodeById(parentEl.id, false);
+          }
+          if (e.dataTransfer && parent && stageContainer.value && stage) {
             const config = eval(`(${e.dataTransfer.getData("data")})`);
-            const layout = await services?.editorService.getLayout(page.value);
+            const layout = await services?.editorService.getLayout(parent);
             const containerRect = stageContainer.value.getBoundingClientRect();
             const { scrollTop, scrollLeft } = stage.mask;
+            const { style = {} } = config;
+            let top = 0;
+            let left = 0;
+            let position = "relative";
             if (layout === Layout.ABSOLUTE) {
-              config.style = {
-                ...config.style || {},
-                position: "absolute",
-                top: e.clientY - containerRect.top + scrollTop,
-                left: e.clientX - containerRect.left + scrollLeft
-              };
+              position = "absolute";
+              top = e.clientY - containerRect.top + scrollTop;
+              left = e.clientX - containerRect.left + scrollLeft;
+              if (parentEl && doc) {
+                const { left: parentLeft, top: parentTop } = StageCore.getOffset(parentEl);
+                left = left - StageCore.calcValueByFontsize(doc, parentLeft);
+                top = top - StageCore.calcValueByFontsize(doc, parentTop);
+              }
             }
-            services?.editorService.add(config, page.value);
+            config.style = {
+              ...style,
+              position,
+              top,
+              left
+            };
+            services?.editorService.add(config, parent);
           }
         }
       };
@@ -3927,6 +4073,18 @@
         type: Function,
         default: (el) => Boolean(el.id)
       },
+      isContainer: {
+        type: Function,
+        default: (el) => el.classList.contains("magic-ui-container")
+      },
+      containerHighlightClassName: {
+        type: String,
+        default: StageCore.CONTAINER_HIGHLIGHT_CLASS
+      },
+      containerHighlightDuration: {
+        type: Number,
+        default: 800
+      },
       stageRect: {
         type: [String, Object]
       },
@@ -3993,7 +4151,10 @@
         render: props.render,
         moveableOptions: props.moveableOptions,
         canSelect: props.canSelect,
-        updateDragEl: props.updateDragEl
+        updateDragEl: props.updateDragEl,
+        isContainer: props.isContainer,
+        containerHighlightClassName: props.containerHighlightClassName,
+        containerHighlightDuration: props.containerHighlightDuration
       }));
       return services;
     }
@@ -4012,7 +4173,15 @@
       ]),
       sidebar: vue.withCtx(() => [
         vue.renderSlot(_ctx.$slots, "sidebar", { editorService: _ctx.editorService }, () => [
-          vue.createVNode(_component_sidebar, { data: _ctx.sidebar }, null, 8, ["data"])
+          vue.createVNode(_component_sidebar, { data: _ctx.sidebar }, {
+            "layer-panel-header": vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "layer-panel-header")
+            ]),
+            "component-list-panel-header": vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "component-list-panel-header")
+            ]),
+            _: 3
+          }, 8, ["data"])
         ])
       ]),
       workspace: vue.withCtx(() => [
@@ -4031,12 +4200,17 @@
           })
         ])
       ]),
-      propsPanel: vue.withCtx(() => [
-        vue.renderSlot(_ctx.$slots, "propsPanel", {}, () => [
+      "props-panel": vue.withCtx(() => [
+        vue.renderSlot(_ctx.$slots, "props-panel", {}, () => [
           vue.createVNode(_component_props_panel, {
             ref: "propsPanel",
             onMounted: _cache[0] || (_cache[0] = (instance) => _ctx.$emit("props-panel-mounted", instance))
-          }, null, 512)
+          }, {
+            "props-panel-header": vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "props-panel-header")
+            ]),
+            _: 3
+          }, 512)
         ])
       ]),
       empty: vue.withCtx(() => [
@@ -4084,23 +4258,24 @@
   exports.error = error;
   exports.eventsService = eventsService;
   exports.fillConfig = fillConfig;
+  exports.fixNodeLeft = fixNodeLeft;
   exports.generatePageName = generatePageName;
   exports.generatePageNameByApp = generatePageNameByApp;
   exports.getConfig = getConfig;
   exports.getDefaultPropsValue = getDefaultPropsValue;
   exports.getGuideLineFromCache = getGuideLineFromCache;
+  exports.getInitPositionStyle = getInitPositionStyle;
   exports.getNodeIndex = getNodeIndex;
   exports.getPageList = getPageList;
   exports.getPageNameList = getPageNameList;
+  exports.getRelativeStyle = getRelativeStyle;
   exports.historyService = historyService;
   exports.info = info;
-  exports.initPosition = initPosition;
   exports.isFixed = isFixed;
   exports.log = log;
   exports.propsService = propsService;
   exports.setConfig = setConfig;
   exports.setLayout = setLayout;
-  exports.toRelative = toRelative;
   exports.uiService = uiService;
   exports.warn = warn;