@tmagic/editor 1.0.3 → 1.1.0-beta.0

package/dist/types/src/Editor.vue.d.ts

@@ -3,7 +3,7 @@ import { PropType } from 'vue';
 import type { FormConfig } from '@tmagic/form';
 import type { MApp, MNode } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
-import type { MoveableOptions } from '@tmagic/stage';
+import { MoveableOptions } from '@tmagic/stage';
 import type { ComponentGroup, MenuBarData, MenuItem, Services, SideBarData, StageRect } from './type';
 declare const _default: DefineComponent<{
     /** 页面初始值 */
@@ -72,6 +72,18 @@ declare const _default: DefineComponent<{
         type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
         default: (el: HTMLElement) => boolean;
     };
+    isContainer: {
+        type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
+        default: (el: HTMLElement) => boolean;
+    };
+    containerHighlightClassName: {
+        type: StringConstructor;
+        default: string;
+    };
+    containerHighlightDuration: {
+        type: NumberConstructor;
+        default: number;
+    };
     stageRect: {
         type: PropType<StageRect>;
     };
@@ -149,6 +161,18 @@ declare const _default: DefineComponent<{
         type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
         default: (el: HTMLElement) => boolean;
     };
+    isContainer: {
+        type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
+        default: (el: HTMLElement) => boolean;
+    };
+    containerHighlightClassName: {
+        type: StringConstructor;
+        default: string;
+    };
+    containerHighlightDuration: {
+        type: NumberConstructor;
+        default: number;
+    };
     stageRect: {
         type: PropType<StageRect>;
     };
@@ -174,5 +198,8 @@ declare const _default: DefineComponent<{
     propsValues: Record<string, MNode>;
     eventMethodList: Record<string, any>;
     canSelect: (el: HTMLElement) => boolean | Promise<boolean>;
+    isContainer: (el: HTMLElement) => boolean | Promise<boolean>;
+    containerHighlightClassName: string;
+    containerHighlightDuration: number;
 }>;
 export default _default;

package/dist/types/src/layouts/sidebar/ComponentListPanel.vue.d.ts

@@ -10,5 +10,7 @@ declare const _default: DefineComponent<{}, {
     }[] | undefined>;
     appendComponent({ text, type, data }: ComponentItem): void;
     dragstartHandler({ text, type, data }: ComponentItem, e: DragEvent): void;
+    dragendHandler(): void;
+    dragHandler(e: DragEvent): void;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{}>>, {}>;
 export default _default;

package/dist/types/src/services/editor.d.ts

@@ -111,6 +111,12 @@ declare class Editor extends BaseService {
      * @param offset 偏移量
      */
     moveLayer(offset: number | LayerOffset): Promise<void>;
+    /**
+     * 移动到指定容器中
+     * @param config 需要移动的节点
+     * @param targetId 容器ID
+     */
+    moveToContainer(config: MNode, targetId: Id): Promise<MNode | undefined>;
     /**
      * 撤销当前操作
      * @returns 上一次数据

package/dist/types/src/type.d.ts

@@ -25,9 +25,12 @@ export interface Services {
 export interface StageOptions {
     runtimeUrl: string;
     autoScrollIntoView: boolean;
+    containerHighlightClassName: string;
+    containerHighlightDuration: number;
     render: () => HTMLDivElement;
     moveableOptions: MoveableOptions | ((core?: StageCore) => MoveableOptions);
     canSelect: (el: HTMLElement) => boolean | Promise<boolean>;
+    isContainer: (el: HTMLElement) => boolean | Promise<boolean>;
     updateDragEl: (el: HTMLDivElement) => void;
 }
 export interface StoreState {

package/dist/types/src/utils/editor.d.ts

@@ -32,9 +32,13 @@ export declare const generatePageNameByApp: (app: MApp) => string;
  */
 export declare const isFixed: (node: MNode) => boolean;
 export declare const getNodeIndex: (node: MNode, parent: MContainer | MApp) => number;
-export declare const toRelative: (node: MNode) => MNode;
-export declare const initPosition: (node: MNode, layout: Layout, parentNode: MNode, stage: StageCore) => MNode;
+export declare const getRelativeStyle: (style?: Record<string, any>) => Record<string, any>;
+export declare const getInitPositionStyle: (style: Record<string, any> | undefined, layout: Layout, parentNode: MNode, stage: StageCore) => Record<string, any>;
 export declare const setLayout: (node: MNode, layout: Layout) => MNode;
-export declare const change2Fixed: (node: MNode, root: MApp) => MNode;
-export declare const Fixed2Other: (node: MNode, root: MApp, getLayout: (parent: MNode, node?: MNode | undefined) => Promise<Layout>) => Promise<MNode>;
+export declare const change2Fixed: (node: MNode, root: MApp) => {
+    left: number;
+    top: number;
+};
+export declare const Fixed2Other: (node: MNode, root: MApp, getLayout: (parent: MNode, node?: MNode | undefined) => Promise<Layout>) => Promise<Record<string, any>>;
 export declare const getGuideLineFromCache: (key: string) => number[];
+export declare const fixNodeLeft: (config: MNode, parent: MContainer, doc?: Document | undefined) => any;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.3",
+  "version": "1.1.0-beta.0",
   "name": "@tmagic/editor",
   "sideEffects": [
     "dist/*",
@@ -43,11 +43,11 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons": "0.0.11",
-    "@tmagic/core": "1.0.3",
-    "@tmagic/form": "1.0.3",
-    "@tmagic/schema": "1.0.3",
-    "@tmagic/stage": "1.0.3",
-    "@tmagic/utils": "1.0.3",
+    "@tmagic/core": "1.1.0-beta.0",
+    "@tmagic/form": "1.1.0-beta.0",
+    "@tmagic/schema": "1.1.0-beta.0",
+    "@tmagic/stage": "1.1.0-beta.0",
+    "@tmagic/utils": "1.1.0-beta.0",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "element-plus": "^2.2.6",
@@ -60,7 +60,7 @@
     "vue": "^3.2.0"
   },
   "peerDependencies": {
-    "@tmagic/form": "1.0.3",
+    "@tmagic/form": "1.1.0-beta.0",
     "element-plus": "^2.2.6",
     "monaco-editor": "^0.32.1",
     "vue": "^3.2.0"

package/src/Editor.vue

@@ -6,7 +6,15 @@
 
     <template #sidebar>
       <slot name="sidebar" :editorService="editorService">
-        <sidebar :data="sidebar"></sidebar>
+        <sidebar :data="sidebar">
+          <template #layer-panel-header>
+            <slot name="layer-panel-header"></slot>
+          </template>
+
+          <template #component-list-panel-header>
+            <slot name="component-list-panel-header"></slot>
+          </template>
+        </sidebar>
       </slot>
     </template>
 
@@ -20,9 +28,13 @@
       </slot>
     </template>
 
-    <template #propsPanel>
-      <slot name="propsPanel">
-        <props-panel ref="propsPanel" @mounted="(instance) => $emit('props-panel-mounted', instance)"></props-panel>
+    <template #props-panel>
+      <slot name="props-panel">
+        <props-panel ref="propsPanel" @mounted="(instance) => $emit('props-panel-mounted', instance)">
+          <template #props-panel-header>
+            <slot name="props-panel-header"></slot>
+          </template>
+        </props-panel>
       </slot>
     </template>
 
@@ -37,7 +49,7 @@ import { EventOption } from '@tmagic/core';
 import type { FormConfig } from '@tmagic/form';
 import type { MApp, MNode } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
-import type { MoveableOptions } from '@tmagic/stage';
+import { CONTAINER_HIGHLIGHT_CLASS, MoveableOptions } from '@tmagic/stage';
 
 import Framework from '@editor/layouts/Framework.vue';
 import NavMenu from '@editor/layouts/NavMenu.vue';
@@ -142,6 +154,21 @@ export default defineComponent({
       default: (el: HTMLElement) => Boolean(el.id),
     },
 
+    isContainer: {
+      type: Function as PropType<(el: HTMLElement) => boolean | Promise<boolean>>,
+      default: (el: HTMLElement) => el.classList.contains('magic-ui-container'),
+    },
+
+    containerHighlightClassName: {
+      type: String,
+      default: CONTAINER_HIGHLIGHT_CLASS,
+    },
+
+    containerHighlightDuration: {
+      type: Number,
+      default: 800,
+    },
+
     stageRect: {
       type: [String, Object] as PropType<StageRect>,
     },
@@ -257,6 +284,9 @@ export default defineComponent({
         moveableOptions: props.moveableOptions,
         canSelect: props.canSelect,
         updateDragEl: props.updateDragEl,
+        isContainer: props.isContainer,
+        containerHighlightClassName: props.containerHighlightClassName,
+        containerHighlightDuration: props.containerHighlightDuration,
       }),
     );
 

package/src/layouts/Framework.vue

@@ -26,7 +26,7 @@
 
         <div class="m-editor-framework-right" :style="`width: ${columnWidth?.right}px`">
           <el-scrollbar>
-            <slot name="propsPanel"></slot>
+            <slot name="props-panel"></slot>
           </el-scrollbar>
         </div>
       </template>

package/src/layouts/PropsPanel.vue

@@ -1,13 +1,16 @@
 <template>
-  <m-form
-    :class="`m-editor-props-panel ${propsPanelSize}`"
-    :popper-class="`m-editor-props-panel-popper ${propsPanelSize}`"
-    ref="configForm"
-    :size="propsPanelSize"
-    :init-values="values"
-    :config="curFormConfig"
-    @change="submit"
-  ></m-form>
+  <div class="`m-editor-props-panel">
+    <slot name="props-panel-header"></slot>
+    <m-form
+      :class="`m-editor-props-panel ${propsPanelSize}`"
+      :popper-class="`m-editor-props-panel-popper ${propsPanelSize}`"
+      ref="configForm"
+      :size="propsPanelSize"
+      :init-values="values"
+      :config="curFormConfig"
+      @change="submit"
+    ></m-form>
+  </div>
 </template>
 
 <script lang="ts">

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -1,5 +1,7 @@
 <template>
   <el-scrollbar>
+    <slot name="component-list-panel-header"></slot>
+
     <el-collapse class="ui-component-panel" :model-value="collapseValue">
       <el-input
         prefix-icon="el-icon-search"
@@ -19,6 +21,8 @@
             :key="item.type"
             @click="appendComponent(item)"
             @dragstart="dragstartHandler(item, $event)"
+            @dragend="dragendHandler"
+            @drag="dragHandler"
           >
             <m-icon :icon="item.icon"></m-icon>
 
@@ -36,8 +40,12 @@
 import { computed, defineComponent, inject, ref } from 'vue';
 import serialize from 'serialize-javascript';
 
+import type StageCore from '@tmagic/stage';
+import { GHOST_EL_ID_PREFIX } from '@tmagic/stage';
+import { addClassName, removeClassNameByClassName } from '@tmagic/utils';
+
 import MIcon from '@editor/components/Icon.vue';
-import type { ComponentGroup, ComponentItem, Services } from '@editor/type';
+import type { ComponentGroup, ComponentItem, Services, StageOptions } from '@editor/type';
 
 export default defineComponent({
   name: 'ui-component-panel',
@@ -47,6 +55,9 @@ export default defineComponent({
   setup() {
     const searchText = ref('');
     const services = inject<Services>('services');
+    const stageOptions = inject<StageOptions>('stageOptions');
+
+    const stage = computed(() => services?.editorService.get<StageCore>('stage'));
     const list = computed(() =>
       services?.componentListService.getList().map((group: ComponentGroup) => ({
         ...group,
@@ -59,6 +70,10 @@ export default defineComponent({
         .map((x, i) => i),
     );
 
+    let timeout: NodeJS.Timeout | undefined;
+    let clientX: number;
+    let clientY: number;
+
     return {
       searchText,
       collapseValue,
@@ -85,6 +100,45 @@ export default defineComponent({
           );
         }
       },
+
+      dragendHandler() {
+        if (timeout) {
+          globalThis.clearTimeout(timeout);
+          timeout = undefined;
+        }
+        const doc = stage.value?.renderer.contentWindow?.document;
+        if (doc && stageOptions) {
+          removeClassNameByClassName(doc, stageOptions.containerHighlightClassName);
+        }
+        clientX = 0;
+        clientY = 0;
+      },
+
+      dragHandler(e: DragEvent) {
+        if (e.clientX !== clientX || e.clientY !== clientY) {
+          clientX = e.clientX;
+          clientY = e.clientY;
+          if (timeout) {
+            globalThis.clearTimeout(timeout);
+            timeout = undefined;
+          }
+          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);
+      },
     };
   },
 });

package/src/layouts/sidebar/LayerPanel.vue

@@ -1,5 +1,7 @@
 <template>
   <el-scrollbar class="magic-editor-layer-panel">
+    <slot name="layer-panel-header"></slot>
+
     <el-input
       class="filterInput"
       size="small"

package/src/layouts/sidebar/Sidebar.vue

@@ -6,7 +6,15 @@
     type="card"
     tab-position="left"
   >
-    <tab-pane v-for="(item, index) in data.items" :key="index" :data="item"></tab-pane>
+    <tab-pane v-for="(item, index) in data.items" :key="index" :data="item">
+      <template #layer-panel-header v-if="item === 'layer'">
+        <slot name="layer-panel-header"></slot>
+      </template>
+
+      <template #component-list-panel-header v-if="item === 'component-list'">
+        <slot name="component-list-panel-header"></slot>
+      </template>
+    </tab-pane>
   </el-tabs>
 </template>
 

package/src/layouts/sidebar/TabPane.vue

@@ -8,6 +8,16 @@
     </template>
 
     <component :is="config.component" v-bind="config.props || {}" v-on="config?.listeners || {}">
+      <template #component-list-panel-header v-if="data === 'component-list' || config.slots?.componentListPanelHeader">
+        <slot v-if="data === 'component-list'" name="component-list-panel-header"></slot>
+        <component v-else-if="config.slots?.componentListPanelHeader" :is="config.slots.componentListPanelHeader" />
+      </template>
+
+      <template #layer-panel-header v-if="data === 'layer' || config.slots?.layerPanelHeader">
+        <slot v-if="data === 'layer'" name="layer-panel-header"></slot>
+        <component v-else-if="config.slots?.layerPanelHeader" :is="config.slots.layerPanelHeader" />
+      </template>
+
       <template #layer-node-content="{ data, node }" v-if="config.slots?.layerNodeContent">
         <component :is="config.slots?.layerNodeContent" :data="data" :node="node" />
       </template>

package/src/layouts/workspace/Stage.vue

@@ -35,8 +35,15 @@ import {
 } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
-import type { MApp, MNode, MPage } from '@tmagic/schema';
-import StageCore, { GuidesType, Runtime, SortEventData, UpdateEventData } from '@tmagic/stage';
+import type { MApp, MContainer, MNode, MPage } from '@tmagic/schema';
+import StageCore, {
+  calcValueByFontsize,
+  getOffset,
+  GuidesType,
+  Runtime,
+  SortEventData,
+  UpdateEventData,
+} from '@tmagic/stage';
 
 import ScrollViewer from '@editor/components/ScrollViewer.vue';
 import {
@@ -90,6 +97,9 @@ export default 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);
           // 在组件联动过程中不能再往下选择，返回并触发 ui-select
@@ -122,6 +132,10 @@ export default defineComponent({
       });
 
       stage?.on('update', (ev: UpdateEventData) => {
+        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 });
       });
 
@@ -207,23 +221,50 @@ export default defineComponent({
 
       async dropHandler(e: DragEvent) {
         e.preventDefault();
-        if (e.dataTransfer && page.value && stageContainer.value && stage) {
+
+        const doc = stage?.renderer.contentWindow?.document;
+        const parentEl: HTMLElement | null | undefined = doc?.querySelector(
+          `.${stageOptions?.containerHighlightClassName}`,
+        );
+
+        let parent: MContainer | undefined = page.value;
+        if (parentEl) {
+          parent = services?.editorService.getNodeById(parentEl.id, false) as MContainer;
+        }
+
+        if (e.dataTransfer && parent && stageContainer.value && stage) {
           // eslint-disable-next-line no-eval
           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);
         }
       },
     };

package/src/services/editor.ts

@@ -33,9 +33,10 @@ import {
   change2Fixed,
   COPY_STORAGE_KEY,
   Fixed2Other,
+  fixNodeLeft,
   generatePageNameByApp,
+  getInitPositionStyle,
   getNodeIndex,
-  initPosition,
   isFixed,
   setLayout,
 } from '@editor/utils/editor';
@@ -70,6 +71,7 @@ class Editor extends BaseService {
         'paste',
         'alignCenter',
         'moveLayer',
+        'moveToContainer',
         'move',
         'undo',
         'redo',
@@ -274,7 +276,7 @@ class Editor extends BaseService {
     const { type, ...config } = addNode;
     const curNode = this.get<MContainer>('node');
 
-    let parentNode: MNode | undefined;
+    let parentNode: MContainer | undefined;
     const isPage = type === NodeType.PAGE;
 
     if (isPage) {
@@ -291,12 +293,8 @@ class Editor extends BaseService {
     if (!parentNode) throw new Error('未找到父元素');
 
     const layout = await this.getLayout(toRaw(parentNode), addNode as MNode);
-    const newNode = initPosition(
-      { ...toRaw(await propsService.getPropsValue(type, config)) },
-      layout,
-      parentNode,
-      this.get<StageCore>('stage'),
-    );
+    const newNode = { ...toRaw(await propsService.getPropsValue(type, config)) };
+    newNode.style = getInitPositionStyle(newNode.style, layout, parentNode, this.get<StageCore>('stage'));
 
     if ((parentNode?.type === NodeType.ROOT || curNode.type === NodeType.ROOT) && newNode.type !== NodeType.PAGE) {
       throw new Error('app下不能添加组件');
@@ -305,8 +303,17 @@ class Editor extends BaseService {
     parentNode?.items?.push(newNode);
 
     const stage = this.get<StageCore | null>('stage');
+    const root = this.get<MApp>('root');
+
+    await stage?.add({ config: cloneDeep(newNode), root: cloneDeep(root) });
 
-    await stage?.add({ config: cloneDeep(newNode), root: cloneDeep(this.get('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);
 
@@ -348,7 +355,7 @@ class Editor extends BaseService {
 
     parent.items?.splice(index, 1);
     const stage = this.get<StageCore | null>('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;
@@ -431,7 +438,7 @@ class Editor extends BaseService {
       this.set('node', newConfig);
     }
 
-    this.get<StageCore | null>('stage')?.update({ config: cloneDeep(newConfig), root: this.get('root') });
+    this.get<StageCore | null>('stage')?.update({ config: cloneDeep(newConfig), root: cloneDeep(this.get('root')) });
 
     if (newConfig.type === NodeType.PAGE) {
       this.set('page', newConfig);
@@ -464,7 +471,7 @@ class Editor extends BaseService {
     await this.update(parent);
     await this.select(node);
 
-    this.get<StageCore | null>('stage')?.update({ config: cloneDeep(node), root: this.get('root') });
+    this.get<StageCore | null>('stage')?.update({ config: cloneDeep(node), root: cloneDeep(this.get('root')) });
 
     this.addModifiedNodeId(parent.id);
     this.pushHistoryState();
@@ -544,7 +551,10 @@ class Editor extends BaseService {
     }
 
     await this.update(node);
-    this.get<StageCore | null>('stage')?.update({ config: cloneDeep(toRaw(node)), root: this.get('root') });
+    this.get<StageCore | null>('stage')?.update({
+      config: cloneDeep(toRaw(node)),
+      root: cloneDeep(this.get<MApp>('root')),
+    });
     this.addModifiedNodeId(config.id);
     this.pushHistoryState();
 
@@ -569,7 +579,54 @@ class Editor extends BaseService {
       brothers.splice(index + parseInt(`${offset}`, 10), 0, brothers.splice(index, 1)[0]);
     }
 
-    this.get<StageCore | null>('stage')?.update({ config: cloneDeep(toRaw(parent)), root: this.get('root') });
+    this.get<StageCore | null>('stage')?.update({
+      config: cloneDeep(toRaw(parent)),
+      root: cloneDeep(this.get<MApp>('root')),
+    });
+  }
+
+  /**
+   * 移动到指定容器中
+   * @param config 需要移动的节点
+   * @param targetId 容器ID
+   */
+  public async moveToContainer(config: MNode, targetId: Id): Promise<MNode | undefined> {
+    const { node, parent } = this.getNodeInfo(config.id, false);
+    const target = this.getNodeById(targetId, false) as MContainer;
+
+    const stage = this.get<StageCore | null>('stage');
+
+    if (node && parent && stage) {
+      const root = cloneDeep(this.get<MApp>('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), config, (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;
+    }
   }
 
   /**
@@ -656,13 +713,13 @@ class Editor extends BaseService {
   }
 
   private async toggleFixedPosition(dist: MNode, src: MNode, root: MApp) {
-    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);
       }
     }