@tmagic/editor 1.0.4 → 1.1.0-beta.1

package/dist/tmagic-editor.es.js

@@ -1,16 +1,16 @@
 import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, ref, watchEffect, inject, markRaw, createElementBlock, createVNode, withCtx, withModifiers, createCommentVNode, createTextVNode, toDisplayString, watch, onMounted, onUnmounted, reactive, toRaw, createElementVNode, renderSlot, Fragment, normalizeClass, resolveDynamicComponent, renderList, normalizeProps, mergeProps, getCurrentInstance, nextTick, Teleport, toHandlers, createSlots, provide } from 'vue';
 import serialize from 'serialize-javascript';
-import { Delete, Pointer, Close, Plus, Edit, ArrowDown, Grid, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Files, DocumentCopy, Coin, ArrowLeftBold, ArrowRightBold, CaretBottom, Top, Bottom } from '@element-plus/icons';
+import { Delete, Pointer, Close, Plus, Edit, ArrowDown, Grid, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Files, DocumentCopy, Coin, ArrowLeftBold, ArrowRightBold, CaretBottom, Top, Bottom } from '@element-plus/icons-vue';
 import { throttle, cloneDeep, mergeWith, random } from 'lodash-es';
 import * as monaco from 'monaco-editor';
+import StageCore, { GHOST_EL_ID_PREFIX, GuidesType, getOffset, calcValueByFontsize, CONTAINER_HIGHLIGHT_CLASS } from '@tmagic/stage';
 import { NodeType } from '@tmagic/schema';
-import { toLine, isPop, getNodePath, isNumber, isPage } from '@tmagic/utils';
+import { toLine, isPop, getNodePath, isNumber, isPage, removeClassNameByClassName, addClassName } from '@tmagic/utils';
 import { EventEmitter } from 'events';
 import { DEFAULT_EVENTS, DEFAULT_METHODS } from '@tmagic/core';
 import Gesto from 'gesto';
 import { ElMessage } from 'element-plus';
 import KeyController from 'keycon';
-import StageCore, { GuidesType } from '@tmagic/stage';
 
 if (typeof global === "undefined") {
   window.global = window;
@@ -188,7 +188,7 @@ const _sfc_main$k = defineComponent({
     };
   }
 });
-const _hoisted_1$c = /* @__PURE__ */ createTextVNode("\u53D6\u6D88");
+const _hoisted_1$d = /* @__PURE__ */ createTextVNode("\u53D6\u6D88");
 function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_button = resolveComponent("el-button");
   const _component_el_tooltip = resolveComponent("el-tooltip");
@@ -204,7 +204,7 @@ function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
       style: { "padding": "0" }
     }, {
       default: withCtx(() => [
-        _hoisted_1$c
+        _hoisted_1$d
       ]),
       _: 1
     }, 8, ["icon"])
@@ -369,12 +369,12 @@ const _sfc_main$j = defineComponent({
     };
   }
 });
-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 openBlock(), createElementBlock("div", _hoisted_1$b, null, 512);
+  return openBlock(), createElementBlock("div", _hoisted_1$c, null, 512);
 }
 var CodeEditor = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$j]]);
 
@@ -750,56 +750,50 @@ const getNodeIndex = (node, parent) => {
   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 (!isNumber(height)) {
     height = 0;
   }
   const { height: parentHeight } = parentNode.style;
   if (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 (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";
     }
@@ -816,11 +810,10 @@ const change2Fixed = (node, root) => {
     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 = getNodePath(node.id, root.items);
@@ -835,20 +828,20 @@ const Fixed2Other = async (node, root, getLayout) => {
     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)
@@ -863,6 +856,16 @@ const getGuideLineFromCache = (key) => {
   }
   return [];
 };
+const fixNodeLeft = (config, parent, doc) => {
+  if (!doc || !config.style || !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) => {
 };
@@ -888,6 +891,7 @@ class Editor$1 extends BaseService {
       "paste",
       "alignCenter",
       "moveLayer",
+      "moveToContainer",
       "move",
       "undo",
       "redo",
@@ -1027,13 +1031,22 @@ class Editor$1 extends BaseService {
     if (!parentNode)
       throw new Error("\u672A\u627E\u5230\u7236\u5143\u7D20");
     const layout = await this.getLayout(toRaw(parentNode), addNode);
-    const newNode = initPosition({ ...toRaw(await propsService.getPropsValue(type, config2)) }, layout, parentNode, this.get("stage"));
+    const newNode = { ...toRaw(await propsService.getPropsValue(type, config2)) };
+    newNode.style = getInitPositionStyle(newNode.style, layout, parentNode, this.get("stage"));
     if ((parentNode?.type === NodeType.ROOT || curNode.type === NodeType.ROOT) && newNode.type !== NodeType.PAGE) {
       throw new Error("app\u4E0B\u4E0D\u80FD\u6DFB\u52A0\u7EC4\u4EF6");
     }
     parentNode?.items?.push(newNode);
     const stage = this.get("stage");
-    await stage?.add({ config: cloneDeep(newNode), root: cloneDeep(this.get("root")) });
+    const root = this.get("root");
+    await stage?.add({ config: cloneDeep(newNode), root: 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: cloneDeep(newNode), root: cloneDeep(root) });
+      }
+    }
     await this.select(newNode);
     this.addModifiedNodeId(newNode.id);
     if (!isPage2) {
@@ -1060,7 +1073,7 @@ class Editor$1 extends BaseService {
       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: cloneDeep(this.get("root")) });
     if (node.type === NodeType.PAGE) {
       this.state.pageLength -= 1;
       if (root.items[0]) {
@@ -1121,7 +1134,7 @@ class Editor$1 extends BaseService {
     if (`${newConfig.id}` === `${this.get("node").id}`) {
       this.set("node", newConfig);
     }
-    this.get("stage")?.update({ config: cloneDeep(newConfig), root: this.get("root") });
+    this.get("stage")?.update({ config: cloneDeep(newConfig), root: cloneDeep(this.get("root")) });
     if (newConfig.type === NodeType.PAGE) {
       this.set("page", newConfig);
     }
@@ -1140,7 +1153,7 @@ class Editor$1 extends BaseService {
     parent.items.splice(index2, 0, ...parent.items.splice(index1, 1));
     await this.update(parent);
     await this.select(node);
-    this.get("stage")?.update({ config: cloneDeep(node), root: this.get("root") });
+    this.get("stage")?.update({ config: cloneDeep(node), root: cloneDeep(this.get("root")) });
     this.addModifiedNodeId(parent.id);
     this.pushHistoryState();
   }
@@ -1192,7 +1205,10 @@ class Editor$1 extends BaseService {
       node.style.left = (parent.style.width - node.style.width) / 2;
     }
     await this.update(node);
-    this.get("stage")?.update({ config: cloneDeep(toRaw(node)), root: this.get("root") });
+    this.get("stage")?.update({
+      config: cloneDeep(toRaw(node)),
+      root: cloneDeep(this.get("root"))
+    });
     this.addModifiedNodeId(config2.id);
     this.pushHistoryState();
     return config2;
@@ -1209,7 +1225,37 @@ class Editor$1 extends BaseService {
     } else {
       brothers.splice(index + parseInt(`${offset}`, 10), 0, brothers.splice(index, 1)[0]);
     }
-    this.get("stage")?.update({ config: cloneDeep(toRaw(parent)), root: this.get("root") });
+    this.get("stage")?.update({
+      config: cloneDeep(toRaw(parent)),
+      root: 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 = 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 = mergeWith(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: 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();
@@ -1281,12 +1327,12 @@ class Editor$1 extends BaseService {
     }, 0);
   }
   async toggleFixedPosition(dist, src, root) {
-    let newConfig = cloneDeep(dist);
+    const newConfig = cloneDeep(dist);
     if (!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;
@@ -1595,13 +1641,13 @@ const _sfc_main$i = defineComponent({
     };
   }
 });
-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__ */ createElementVNode("p", null, "\u65B0\u589E\u9875\u9762", -1);
 function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_plus = resolveComponent("plus");
   const _component_el_icon = resolveComponent("el-icon");
-  return openBlock(), createElementBlock("div", _hoisted_1$a, [
+  return openBlock(), createElementBlock("div", _hoisted_1$b, [
     createElementVNode("div", _hoisted_2$4, [
       createElementVNode("div", {
         class: "m-editor-empty-button",
@@ -1664,12 +1710,12 @@ const _sfc_main$h = defineComponent({
     };
   }
 });
-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 openBlock(), createElementBlock("span", _hoisted_1$9, [
+  return openBlock(), createElementBlock("span", _hoisted_1$a, [
     renderSlot(_ctx.$slots, "default")
   ], 512);
 }
@@ -1704,7 +1750,7 @@ const _sfc_main$g = defineComponent({
     };
   }
 });
-const _hoisted_1$8 = { class: "m-editor" };
+const _hoisted_1$9 = { class: "m-editor" };
 const _hoisted_2$3 = {
   key: 1,
   class: "m-editor-content"
@@ -1714,7 +1760,7 @@ function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_resizer = resolveComponent("resizer");
   const _component_el_scrollbar = resolveComponent("el-scrollbar");
   const _component_add_page_box = resolveComponent("add-page-box");
-  return openBlock(), createElementBlock("div", _hoisted_1$8, [
+  return openBlock(), createElementBlock("div", _hoisted_1$9, [
     renderSlot(_ctx.$slots, "nav", { class: "m-editor-nav-menu" }),
     _ctx.showSrc ? (openBlock(), createBlock(_component_magic_code_editor, {
       key: 0,
@@ -1771,7 +1817,7 @@ const _sfc_main$f = defineComponent({
     };
   }
 });
-const _hoisted_1$7 = ["src"];
+const _hoisted_1$8 = ["src"];
 function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_edit = resolveComponent("edit");
   const _component_el_icon = resolveComponent("el-icon");
@@ -1783,7 +1829,7 @@ function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
   })) : typeof _ctx.icon === "string" && _ctx.icon.startsWith("http") ? (openBlock(), createElementBlock("img", {
     key: 1,
     src: _ctx.icon
-  }, null, 8, _hoisted_1$7)) : typeof _ctx.icon === "string" ? (openBlock(), createElementBlock("i", {
+  }, null, 8, _hoisted_1$8)) : typeof _ctx.icon === "string" ? (openBlock(), createElementBlock("i", {
     key: 2,
     class: normalizeClass(_ctx.icon)
   }, null, 2)) : (openBlock(), createBlock(_component_el_icon, { key: 3 }, {
@@ -1955,7 +2001,7 @@ const _sfc_main$e = defineComponent({
     };
   }
 });
-const _hoisted_1$6 = {
+const _hoisted_1$7 = {
   key: 1,
   class: "menu-item-text"
 };
@@ -1985,7 +2031,7 @@ function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
     _ctx.item.type === "divider" ? (openBlock(), createBlock(_component_el_divider, {
       key: 0,
       direction: _ctx.item.direction || "vertical"
-    }, null, 8, ["direction"])) : _ctx.item.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$6, toDisplayString(_ctx.item.text), 1)) : _ctx.item.type === "zoom" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+    }, null, 8, ["direction"])) : _ctx.item.type === "text" ? (openBlock(), createElementBlock("div", _hoisted_1$7, toDisplayString(_ctx.item.text), 1)) : _ctx.item.type === "zoom" ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
       createVNode(_component_tool_button, {
         data: { type: "button", icon: _ctx.ZoomOut, handler: _ctx.zoomOutHandler, tooltip: "\u7F29\u5C0F" },
         "event-type": _ctx.eventType
@@ -2166,17 +2212,21 @@ const _sfc_main$c = defineComponent({
     };
   }
 });
+const _hoisted_1$6 = { class: "`m-editor-props-panel" };
 function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_m_form = resolveComponent("m-form");
-  return openBlock(), createBlock(_component_m_form, {
-    class: 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 openBlock(), createElementBlock("div", _hoisted_1$6, [
+    renderSlot(_ctx.$slots, "props-panel-header"),
+    createVNode(_component_m_form, {
+      class: 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]]);
 
@@ -2186,11 +2236,16 @@ const _sfc_main$b = defineComponent({
   setup() {
     const searchText = ref("");
     const services = inject("services");
+    const stageOptions = inject("stageOptions");
+    const stage = computed(() => services?.editorService.get("stage"));
     const list = computed(() => services?.componentListService.getList().map((group) => ({
       ...group,
       items: group.items.filter((item) => item.text.includes(searchText.value))
     })));
     const collapseValue = computed(() => Array(list.value?.length).fill(1).map((x, i) => i));
+    let timeout;
+    let clientX;
+    let clientY;
     return {
       searchText,
       collapseValue,
@@ -2211,6 +2266,43 @@ const _sfc_main$b = defineComponent({
             ...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) {
+          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(GHOST_EL_ID_PREFIX) && await stageOptions.isContainer(el)) {
+              addClassName(el, doc, stageOptions?.containerHighlightClassName);
+              break;
+            }
+          }
+        }, stageOptions?.containerHighlightDuration);
       }
     };
   }
@@ -2226,7 +2318,7 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_scrollbar = resolveComponent("el-scrollbar");
   return openBlock(), createBlock(_component_el_scrollbar, null, {
     default: withCtx(() => [
-      renderSlot(_ctx.$slots, "component-list-panel"),
+      renderSlot(_ctx.$slots, "component-list-panel-header"),
       createVNode(_component_el_collapse, {
         class: "ui-component-panel",
         "model-value": _ctx.collapseValue
@@ -2258,7 +2350,9 @@ function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
                       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))
                     }, [
                       createVNode(_component_m_icon, {
                         icon: item.icon
@@ -2649,7 +2743,7 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_scrollbar = resolveComponent("el-scrollbar");
   return openBlock(), createBlock(_component_el_scrollbar, { class: "magic-editor-layer-panel" }, {
     default: withCtx(() => [
-      renderSlot(_ctx.$slots, "layer-panel"),
+      renderSlot(_ctx.$slots, "layer-panel-header"),
       createVNode(_component_el_input, {
         class: "filterInput",
         size: "small",
@@ -2767,16 +2861,16 @@ function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
     ]),
     default: withCtx(() => [
       (openBlock(), createBlock(resolveDynamicComponent(_ctx.config.component), mergeProps(_ctx.config.props || {}, toHandlers(_ctx.config?.listeners || {})), createSlots({ _: 2 }, [
-        _ctx.data === "layer" ? {
-          name: "layer-panel",
+        _ctx.data === "component-list" || _ctx.config.slots?.componentListPanelHeader ? {
+          name: "component-list-panel-header",
           fn: withCtx(() => [
-            renderSlot(_ctx.$slots, "layer-panel")
+            _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" ? {
-          name: "component-list-panel",
+        _ctx.data === "layer" || _ctx.config.slots?.layerPanelHeader ? {
+          name: "layer-panel-header",
           fn: withCtx(() => [
-            renderSlot(_ctx.$slots, "component-list-panel")
+            _ctx.data === "layer" ? renderSlot(_ctx.$slots, "layer-panel-header", { key: 0 }) : _ctx.config.slots?.layerPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.config.slots.layerPanelHeader), { key: 1 })) : createCommentVNode("", true)
           ])
         } : void 0,
         _ctx.config.slots?.layerNodeContent ? {
@@ -2832,15 +2926,15 @@ function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
           data: item
         }, createSlots({ _: 2 }, [
           item === "layer" ? {
-            name: "layer-panel",
+            name: "layer-panel-header",
             fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "layer-panel")
+              renderSlot(_ctx.$slots, "layer-panel-header")
             ])
           } : void 0,
           item === "component-list" ? {
-            name: "component-list-panel",
+            name: "component-list-panel-header",
             fn: withCtx(() => [
-              renderSlot(_ctx.$slots, "component-list-panel")
+              renderSlot(_ctx.$slots, "component-list-panel-header")
             ])
           } : void 0
         ]), 1032, ["data"]);
@@ -3467,6 +3561,9 @@ const _sfc_main$2 = defineComponent({
         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") {
@@ -3491,6 +3588,10 @@ const _sfc_main$2 = defineComponent({
         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) => {
@@ -3562,20 +3663,38 @@ const _sfc_main$2 = defineComponent({
       },
       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 } = getOffset(parentEl);
+              left = left - calcValueByFontsize(doc, parentLeft);
+              top = top - calcValueByFontsize(doc, parentTop);
+            }
           }
-          services?.editorService.add(config, page.value);
+          config.style = {
+            ...style,
+            position,
+            top,
+            left
+          };
+          services?.editorService.add(config, parent);
         }
       }
     };
@@ -3936,6 +4055,18 @@ const _sfc_main = defineComponent({
       type: Function,
       default: (el) => Boolean(el.id)
     },
+    isContainer: {
+      type: Function,
+      default: (el) => el.classList.contains("magic-ui-container")
+    },
+    containerHighlightClassName: {
+      type: String,
+      default: CONTAINER_HIGHLIGHT_CLASS
+    },
+    containerHighlightDuration: {
+      type: Number,
+      default: 800
+    },
     stageRect: {
       type: [String, Object]
     },
@@ -4002,7 +4133,10 @@ const _sfc_main = defineComponent({
       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;
   }
@@ -4022,11 +4156,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     sidebar: withCtx(() => [
       renderSlot(_ctx.$slots, "sidebar", { editorService: _ctx.editorService }, () => [
         createVNode(_component_sidebar, { data: _ctx.sidebar }, {
-          "layer-panel": withCtx(() => [
-            renderSlot(_ctx.$slots, "layer-panel")
+          "layer-panel-header": withCtx(() => [
+            renderSlot(_ctx.$slots, "layer-panel-header")
           ]),
-          "component-list-panel": withCtx(() => [
-            renderSlot(_ctx.$slots, "component-list-panel")
+          "component-list-panel-header": withCtx(() => [
+            renderSlot(_ctx.$slots, "component-list-panel-header")
           ]),
           _: 3
         }, 8, ["data"])
@@ -4053,7 +4187,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         createVNode(_component_props_panel, {
           ref: "propsPanel",
           onMounted: _cache[0] || (_cache[0] = (instance) => _ctx.$emit("props-panel-mounted", instance))
-        }, null, 512)
+        }, {
+          "props-panel-header": withCtx(() => [
+            renderSlot(_ctx.$slots, "props-panel-header")
+          ]),
+          _: 3
+        }, 512)
       ])
     ]),
     empty: withCtx(() => [
@@ -4080,5 +4219,5 @@ var index = {
   }
 };
 
-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 };
+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, fixNodeLeft, generatePageName, generatePageNameByApp, getConfig, getDefaultPropsValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageList, getPageNameList, getRelativeStyle, historyService, info, isFixed, log, propsService, setConfig, setLayout, uiService, warn };
 //# sourceMappingURL=tmagic-editor.es.js.map