@tmagic/editor 1.4.8 → 1.4.10

package/src/utils/editor.ts

@@ -0,0 +1,313 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import serialize from 'serialize-javascript';
+
+import type { Id, MApp, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
+import { NodeType } from '@tmagic/schema';
+import type StageCore from '@tmagic/stage';
+import { calcValueByFontsize, getNodePath, isNumber, isPage, isPageFragment, isPop } from '@tmagic/utils';
+
+import { Layout } from '@editor/type';
+export const COPY_STORAGE_KEY = '$MagicEditorCopyData';
+export const COPY_CODE_STORAGE_KEY = '$MagicEditorCopyCode';
+export const COPY_DS_STORAGE_KEY = '$MagicEditorCopyDataSource';
+
+/**
+ * 获取所有页面配置
+ * @param root DSL跟节点
+ * @returns 所有页面配置
+ */
+export const getPageList = (root?: MApp | null): MPage[] => {
+  if (!root) return [];
+  if (!Array.isArray(root.items)) return [];
+  return root.items.filter((item) => isPage(item)) as MPage[];
+};
+
+export const getPageFragmentList = (root?: MApp | null): MPageFragment[] => {
+  if (!root) return [];
+  if (!Array.isArray(root.items)) return [];
+  return root.items.filter((item) => isPageFragment(item)) as MPageFragment[];
+};
+
+/**
+ * 获取所有页面名称
+ * @param pages 所有页面配置
+ * @returns 所有页面名称
+ */
+export const getPageNameList = (pages: (MPage | MPageFragment)[]): string[] =>
+  pages.map((page) => page.name || 'index');
+
+/**
+ * 新增页面时，生成页面名称
+ * @param {Object} pageNameList 所有页面名称
+ * @returns {string}
+ */
+export const generatePageName = (pageNameList: string[], type: NodeType.PAGE | NodeType.PAGE_FRAGMENT): string => {
+  let pageLength = pageNameList.length;
+
+  if (!pageLength) return `${type}_index`;
+
+  let pageName = `${type}_${pageLength}`;
+  while (pageNameList.includes(pageName)) {
+    pageLength += 1;
+    pageName = `${type}_${pageLength}`;
+  }
+
+  return pageName;
+};
+
+/**
+ * 新增页面时，生成页面名称
+ * @param {Object} app 所有页面配置
+ * @returns {string}
+ */
+export const generatePageNameByApp = (app: MApp, type: NodeType.PAGE | NodeType.PAGE_FRAGMENT): string =>
+  generatePageName(getPageNameList(type === 'page' ? getPageList(app) : getPageFragmentList(app)), type);
+
+/**
+ * @param {Object} node
+ * @returns {boolean}
+ */
+export const isFixed = (node: MNode): boolean => node.style?.position === 'fixed';
+
+export const getNodeIndex = (id: Id, parent: MContainer | MApp): number => {
+  const items = parent?.items || [];
+  return items.findIndex((item: MNode) => `${item.id}` === `${id}`);
+};
+
+export const getRelativeStyle = (style: Record<string, any> = {}): Record<string, any> => ({
+  ...style,
+  position: 'relative',
+  top: 0,
+  left: 0,
+});
+
+const getMiddleTop = (node: MNode, parentNode: MNode, stage: StageCore | null) => {
+  let height = node.style?.height || 0;
+
+  if (!stage || typeof node.style?.top !== 'undefined' || !parentNode.style) return node.style?.top;
+
+  if (!isNumber(height)) {
+    height = 0;
+  }
+
+  const { height: parentHeight } = parentNode.style;
+  // wrapperHeight 是未 calcValue的高度, 所以要将其calcValueByFontsize一下, 否则在pad or pc端计算的结果有误
+  const { scrollTop = 0, wrapperHeight } = stage.mask;
+  const wrapperHeightDeal = calcValueByFontsize(stage.renderer.getDocument()!, wrapperHeight);
+  const scrollTopDeal = calcValueByFontsize(stage.renderer.getDocument()!, scrollTop);
+  if (isPage(parentNode)) {
+    return (wrapperHeightDeal - height) / 2 + scrollTopDeal;
+  }
+
+  // 如果容器的元素高度大于当前视口高度的2倍, 添加的元素居中位置也会看不见, 所以要取最小值计算
+  return (Math.min(parentHeight, wrapperHeightDeal) - height) / 2;
+};
+
+export const getInitPositionStyle = (style: Record<string, any> = {}, layout: Layout) => {
+  if (layout === Layout.ABSOLUTE) {
+    const newStyle: Record<string, any> = {
+      ...style,
+      position: 'absolute',
+    };
+
+    if (typeof newStyle.left === 'undefined' && typeof newStyle.right === 'undefined') {
+      newStyle.left = 0;
+    }
+
+    return newStyle;
+  }
+
+  if (layout === Layout.RELATIVE) {
+    return getRelativeStyle(style);
+  }
+
+  return style;
+};
+
+export const setChildrenLayout = (node: MContainer, layout: Layout) => {
+  node.items?.forEach((child: MNode) => {
+    setLayout(child, layout);
+  });
+  return node;
+};
+
+export const setLayout = (node: MNode, layout: Layout) => {
+  if (isPop(node)) return;
+
+  const style = node.style || {};
+
+  // 是 fixed 不做处理
+  if (style.position === 'fixed') return;
+
+  if (layout !== Layout.RELATIVE) {
+    style.position = 'absolute';
+  } else {
+    node.style = getRelativeStyle(style);
+    node.style.right = 'auto';
+    node.style.bottom = 'auto';
+  }
+  return node;
+};
+
+export const change2Fixed = (node: MNode, root: MApp) => {
+  const path = getNodePath(node.id, root.items);
+  const offset = {
+    left: 0,
+    top: 0,
+  };
+
+  path.forEach((value) => {
+    offset.left = offset.left + globalThis.parseFloat(value.style?.left || 0);
+    offset.top = offset.top + globalThis.parseFloat(value.style?.top || 0);
+  });
+
+  return {
+    ...(node.style || {}),
+    ...offset,
+  };
+};
+
+export const Fixed2Other = async (
+  node: MNode,
+  root: MApp,
+  getLayout: (parent: MNode, node?: MNode) => Promise<Layout>,
+) => {
+  const path = getNodePath(node.id, root.items);
+  const cur = path.pop();
+  const offset = {
+    left: cur?.style?.left || 0,
+    top: cur?.style?.top || 0,
+    right: '',
+    bottom: '',
+  };
+
+  path.forEach((value) => {
+    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 getRelativeStyle(style);
+  }
+
+  const layout = await getLayout(parent);
+  if (layout !== Layout.RELATIVE) {
+    return {
+      ...style,
+      ...offset,
+      position: 'absolute',
+    };
+  }
+
+  return getRelativeStyle(style);
+};
+
+export const getGuideLineFromCache = (key: string): number[] => {
+  if (!key) return [];
+
+  const guideLineCacheData = globalThis.localStorage.getItem(key);
+  if (guideLineCacheData) {
+    try {
+      return JSON.parse(guideLineCacheData) || [];
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  return [];
+};
+
+export const fixNodeLeft = (config: MNode, parent: MContainer, doc?: Document) => {
+  if (!doc || !config.style || !isNumber(config.style.left)) return config.style?.left;
+
+  const el = doc.getElementById(`${config.id}`);
+  const parentEl = doc.getElementById(`${parent.id}`);
+
+  const left = Number(config.style?.left) || 0;
+  if (el && parentEl) {
+    const calcParentOffsetWidth = calcValueByFontsize(doc, parentEl.offsetWidth);
+    const calcElOffsetWidth = calcValueByFontsize(doc, el.offsetWidth);
+    if (calcElOffsetWidth + left > calcParentOffsetWidth) {
+      return calcParentOffsetWidth - calcElOffsetWidth;
+    }
+  }
+
+  return config.style.left;
+};
+
+export const fixNodePosition = (config: MNode, parent: MContainer, stage: StageCore | null) => {
+  if (config.style?.position !== 'absolute') {
+    return config.style;
+  }
+
+  return {
+    ...(config.style || {}),
+    top: getMiddleTop(config, parent, stage),
+    left: fixNodeLeft(config, parent, stage?.renderer.contentWindow?.document),
+  };
+};
+
+// 序列化配置
+export const serializeConfig = (config: any) =>
+  serialize(config, {
+    space: 2,
+    unsafe: true,
+  }).replace(/"(\w+)":\s/g, '$1: ');
+
+export interface NodeItem {
+  items?: NodeItem[];
+  [key: string]: any;
+}
+
+export const traverseNode = <T extends NodeItem = NodeItem>(
+  node: T,
+  cb: (node: T, parents: T[]) => void,
+  parents: T[] = [],
+) => {
+  cb(node, parents);
+
+  if (Array.isArray(node.items) && node.items.length) {
+    parents.push(node);
+    node.items.forEach((item) => {
+      traverseNode(item as T, cb, [...parents]);
+    });
+  }
+};
+
+export const moveItemsInContainer = (sourceIndices: number[], parent: MContainer, targetIndex: number) => {
+  sourceIndices.sort((a, b) => a - b);
+  for (let i = sourceIndices.length - 1; i >= 0; i--) {
+    const sourceIndex = sourceIndices[i];
+    if (sourceIndex === targetIndex) {
+      continue;
+    }
+    const [item] = parent.items.splice(sourceIndex, 1);
+    parent.items.splice(sourceIndex < targetIndex ? targetIndex - 1 : targetIndex, 0, item);
+
+    // 更新后续源索引（因为数组已经改变）
+    for (let j = i - 1; j >= 0; j--) {
+      if (sourceIndices[j] >= targetIndex) {
+        sourceIndices[j] += 1;
+      }
+    }
+  }
+};

package/src/utils/idle-task.ts

@@ -0,0 +1,72 @@
+import { EventEmitter } from 'events';
+
+export interface IdleTaskEvents {
+  finish: [];
+}
+
+globalThis.requestIdleCallback =
+  globalThis.requestIdleCallback ||
+  function (cb) {
+    const start = Date.now();
+    return setTimeout(() => {
+      cb({
+        didTimeout: false,
+        timeRemaining() {
+          return Math.max(0, 50 - (Date.now() - start));
+        },
+      });
+    }, 1);
+  };
+
+export class IdleTask<T = any> extends EventEmitter {
+  private taskList: {
+    handler: (data: T) => void;
+    data: T;
+  }[] = [];
+
+  private taskHandle: number | null = null;
+
+  public enqueueTask(taskHandler: (data: T) => void, taskData: T) {
+    this.taskList.push({
+      handler: taskHandler,
+      data: taskData,
+    });
+
+    if (!this.taskHandle) {
+      this.taskHandle = globalThis.requestIdleCallback(this.runTaskQueue.bind(this), { timeout: 10000 });
+    }
+  }
+
+  public on<Name extends keyof IdleTaskEvents, Param extends IdleTaskEvents[Name]>(
+    eventName: Name,
+    listener: (...args: Param) => void | Promise<void>,
+  ) {
+    return super.on(eventName, listener as any);
+  }
+
+  public once<Name extends keyof IdleTaskEvents, Param extends IdleTaskEvents[Name]>(
+    eventName: Name,
+    listener: (...args: Param) => void | Promise<void>,
+  ) {
+    return super.once(eventName, listener as any);
+  }
+
+  public emit<Name extends keyof IdleTaskEvents, Param extends IdleTaskEvents[Name]>(eventName: Name, ...args: Param) {
+    return super.emit(eventName, ...args);
+  }
+
+  private runTaskQueue(deadline: IdleDeadline) {
+    while ((deadline.timeRemaining() > 15 || deadline.didTimeout) && this.taskList.length) {
+      const task = this.taskList.shift();
+      task!.handler(task!.data);
+    }
+
+    if (this.taskList.length) {
+      this.taskHandle = globalThis.requestIdleCallback(this.runTaskQueue.bind(this), { timeout: 10000 });
+    } else {
+      this.taskHandle = 0;
+
+      this.emit('finish');
+    }
+  }
+}

package/src/utils/index.ts

@@ -0,0 +1,24 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './config';
+export * from './props';
+export * from './logger';
+export * from './editor';
+export * from './operator';
+export * from './data-source';

package/src/utils/keybinding-config.ts

@@ -0,0 +1,125 @@
+import { KeyBindingCommand, KeyBindingItem } from '@editor/type';
+
+export enum KeyBindingContainerKey {
+  STAGE = 'stage',
+  LAYER_PANEL = 'layer-panel',
+}
+
+export default [
+  {
+    command: KeyBindingCommand.DELETE_NODE,
+    keybinding: ['delete', 'backspace'],
+    when: [
+      [KeyBindingContainerKey.STAGE, 'keyup'],
+      [KeyBindingContainerKey.LAYER_PANEL, 'keydown'],
+    ],
+  },
+  {
+    command: KeyBindingCommand.COPY_NODE,
+    keybinding: 'ctrl+c',
+    when: [
+      [KeyBindingContainerKey.STAGE, 'keydown'],
+      [KeyBindingContainerKey.LAYER_PANEL, 'keydown'],
+    ],
+  },
+  {
+    command: KeyBindingCommand.PASTE_NODE,
+    keybinding: 'ctrl+v',
+    when: [
+      [KeyBindingContainerKey.STAGE, 'keydown'],
+      [KeyBindingContainerKey.LAYER_PANEL, 'keydown'],
+    ],
+  },
+  {
+    command: KeyBindingCommand.CUT_NODE,
+    keybinding: 'ctrl+x',
+    when: [
+      [KeyBindingContainerKey.STAGE, 'keydown'],
+      [KeyBindingContainerKey.LAYER_PANEL, 'keydown'],
+    ],
+  },
+  {
+    command: KeyBindingCommand.UNDO,
+    keybinding: 'ctrl+z',
+    when: [
+      [KeyBindingContainerKey.STAGE, 'keydown'],
+      [KeyBindingContainerKey.LAYER_PANEL, 'keydown'],
+    ],
+  },
+  {
+    command: KeyBindingCommand.REDO,
+    keybinding: 'ctrl+shift+z',
+    when: [
+      [KeyBindingContainerKey.STAGE, 'keydown'],
+      [KeyBindingContainerKey.LAYER_PANEL, 'keydown'],
+    ],
+  },
+  {
+    command: KeyBindingCommand.MOVE_UP_1,
+    keybinding: 'up',
+    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
+  },
+  {
+    command: KeyBindingCommand.MOVE_DOWN_1,
+    keybinding: 'down',
+    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
+  },
+  {
+    command: KeyBindingCommand.MOVE_LEFT_1,
+    keybinding: 'left',
+    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
+  },
+  {
+    command: KeyBindingCommand.MOVE_RIGHT_1,
+    keybinding: 'right',
+    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
+  },
+  {
+    command: KeyBindingCommand.MOVE_UP_10,
+    keybinding: 'ctrl+up',
+    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
+  },
+  {
+    command: KeyBindingCommand.MOVE_DOWN_10,
+    keybinding: 'ctrl+down',
+    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
+  },
+  {
+    command: KeyBindingCommand.MOVE_LEFT_10,
+    keybinding: 'ctrl+left',
+    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
+  },
+  {
+    command: KeyBindingCommand.MOVE_RIGHT_10,
+    keybinding: 'ctrl+right',
+    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
+  },
+  {
+    command: KeyBindingCommand.SWITCH_NODE,
+    keybinding: 'tab',
+    when: [
+      [KeyBindingContainerKey.STAGE, 'keydown'],
+      [KeyBindingContainerKey.LAYER_PANEL, 'keydown'],
+    ],
+  },
+  {
+    command: KeyBindingCommand.ZOOM_IN,
+    keybinding: ['ctrl+=', 'ctrl+numpadplus'],
+    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
+  },
+  {
+    command: KeyBindingCommand.ZOOM_OUT,
+    keybinding: ['ctrl+-', 'ctrl+numpad-'],
+    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
+  },
+  {
+    command: KeyBindingCommand.ZOOM_FIT,
+    keybinding: 'ctrl+0',
+    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
+  },
+  {
+    command: KeyBindingCommand.ZOOM_RESET,
+    keybinding: 'ctrl+1',
+    when: [[KeyBindingContainerKey.STAGE, 'keydown']],
+  },
+] as KeyBindingItem[];

package/src/utils/logger.ts

@@ -0,0 +1,47 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const log = (...args: any[]) => {
+  if (process.env.NODE_ENV === 'development') {
+    console.log('magic editor: ', ...args);
+  }
+};
+
+export const info = (...args: any[]) => {
+  if (process.env.NODE_ENV === 'development') {
+    console.info('magic editor: ', ...args);
+  }
+};
+
+export const warn = (...args: any[]) => {
+  if (process.env.NODE_ENV === 'development') {
+    console.warn('magic editor: ', ...args);
+  }
+};
+
+export const debug = (...args: any[]) => {
+  if (process.env.NODE_ENV === 'development') {
+    console.debug('magic editor: ', ...args);
+  }
+};
+
+export const error = (...args: any[]) => {
+  if (process.env.NODE_ENV === 'development') {
+    console.error('magic editor: ', ...args);
+  }
+};

package/src/utils/monaco-editor.ts

@@ -0,0 +1,8 @@
+import { emmetCSS, emmetHTML } from 'emmet-monaco-es';
+import * as monaco from 'monaco-editor';
+
+// 注册emmet插件
+emmetHTML(monaco);
+emmetCSS(monaco, ['css', 'scss']);
+
+export default monaco;

package/src/utils/operator.ts

@@ -0,0 +1,106 @@
+import { toRaw } from 'vue';
+import { isEmpty } from 'lodash-es';
+
+import { Id, MContainer, MNode, NodeType } from '@tmagic/schema';
+import { calcValueByFontsize, isPage, isPageFragment } from '@tmagic/utils';
+
+import editorService from '@editor/services/editor';
+import propsService from '@editor/services/props';
+import type { AddMNode, PastePosition } from '@editor/type';
+import { generatePageNameByApp, getInitPositionStyle } from '@editor/utils/editor';
+
+/**
+ * 粘贴前置操作：返回分配了新id以及校准了坐标的配置
+ * @param position 粘贴的坐标
+ * @param config 待粘贴的元素配置(复制时保存的那份配置)
+ * @returns
+ */
+export const beforePaste = (position: PastePosition, config: MNode[], doc?: Document): MNode[] => {
+  if (!config[0]?.style) return config;
+  const curNode = editorService.get('node');
+  // 将数组中第一个元素的坐标作为参照点
+  const { left: referenceLeft, top: referenceTop } = config[0].style;
+  // 坐标校准后的粘贴数据
+  const pasteConfigs: MNode[] = config.map((configItem: MNode): MNode => {
+    // 解构 position 对象，从 position 删除 offsetX、offsetY字段
+    const { offsetX = 0, offsetY = 0, ...positionClone } = position;
+    let pastePosition = positionClone;
+
+    if (!isEmpty(pastePosition) && curNode?.items) {
+      // 如果没有传入粘贴坐标则可能为键盘操作，不再转换
+      // 如果粘贴时选中了容器，则将元素粘贴到容器内，坐标需要转换为相对于容器的坐标
+      pastePosition = getPositionInContainer(pastePosition, curNode.id, doc);
+    }
+
+    // 将所有待粘贴元素坐标相对于多选第一个元素坐标重新计算，以保证多选粘贴后元素间距不变
+    if (pastePosition.left && configItem.style?.left) {
+      pastePosition.left = configItem.style.left - referenceLeft + pastePosition.left;
+    }
+    if (pastePosition.top && configItem.style?.top) {
+      pastePosition.top = configItem.style?.top - referenceTop + pastePosition.top;
+    }
+    const pasteConfig = propsService.setNewItemId(configItem, false);
+
+    if (pasteConfig.style) {
+      const { left, top } = pasteConfig.style;
+      // 判断能转换为数字时，做粘贴偏移量计算
+      if (typeof left === 'number' || (!!left && !isNaN(Number(left)))) {
+        pasteConfig.style.left = Number(left) + offsetX;
+      }
+      if (typeof top === 'number' || (!!top && !isNaN(Number(top)))) {
+        pasteConfig.style.top = Number(top) + offsetY;
+      }
+
+      pasteConfig.style = {
+        ...pasteConfig.style,
+        ...pastePosition,
+      };
+    }
+    const root = editorService.get('root');
+    if ((isPage(pasteConfig) || isPageFragment(pasteConfig)) && root) {
+      pasteConfig.name = generatePageNameByApp(root, isPage(pasteConfig) ? NodeType.PAGE : NodeType.PAGE_FRAGMENT);
+    }
+    return pasteConfig as MNode;
+  });
+  return pasteConfigs;
+};
+
+/**
+ * 将元素粘贴到容器内时，将相对于画布坐标转换为相对于容器的坐标
+ * @param position PastePosition 粘贴时相对于画布的坐标
+ * @param id 元素id
+ * @returns PastePosition 转换后的坐标
+ */
+export const getPositionInContainer = (position: PastePosition = {}, id: Id, doc?: Document) => {
+  let { left = 0, top = 0 } = position;
+  const parentEl = editorService.get('stage')?.renderer?.contentWindow?.document.getElementById(`${id}`);
+  const parentElRect = parentEl?.getBoundingClientRect();
+  left = left - calcValueByFontsize(doc, parentElRect?.left || 0);
+  top = top - calcValueByFontsize(doc, parentElRect?.top || 0);
+  return {
+    left,
+    top,
+  };
+};
+
+export const getAddParent = (node: MNode) => {
+  const curNode = editorService.get('node');
+
+  let parentNode;
+  if (isPage(node)) {
+    parentNode = editorService.get('root');
+  } else if (curNode?.items) {
+    parentNode = curNode as MContainer;
+  } else if (curNode?.id) {
+    parentNode = editorService.getParentById(curNode.id, false);
+  }
+  return parentNode;
+};
+
+export const getDefaultConfig = async (addNode: AddMNode, parentNode: MContainer) => {
+  const { type, inputEvent, ...config } = addNode;
+  const layout = await editorService.getLayout(toRaw(parentNode), addNode as MNode);
+  const newNode = { ...toRaw(await propsService.getPropsValue(type, config)) };
+  newNode.style = getInitPositionStyle(newNode.style, layout);
+  return newNode;
+};