@plait/mind 0.2.0-next.8 → 0.2.0

package/fesm2020/plait-mind.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, NgModule, Directive, Input } from '@angular/core';
 import * as i2 from '@plait/core';
-import { distanceBetweenPointAndRectangle, PlaitElement, PlaitBoard, PlaitNode, NODE_TO_PARENT, Path, ELEMENT_TO_COMPONENT, Transforms, idCreator, isNullOrUndefined, clearSelectedElement, addSelectedElement, drawRoundRectangle, getRectangleByElements, RectangleClient, getSelectedElements, createG, drawAbstractRoundRectangle, PlaitPluginElementComponent, PlaitPointerType, NODE_TO_INDEX, createText, IS_TEXT_EDITABLE, MERGING, transformPoint, toPoint, depthFirstRecursion, PlaitModule, distanceBetweenPointAndPoint, CLIP_BOARD_FORMAT_KEY, BOARD_TO_HOST, removeSelectedElement, PlaitHistoryBoard, hotkeys } from '@plait/core';
-import { AbstractNode, isChildOfAbstract, isIndentedLayout, getAbstractLayout, MindLayoutType, isStandardLayout, isTopLayout, isLeftLayout, isHorizontalLogicLayout, isVerticalLogicLayout, isBottomLayout, isRightLayout, isHorizontalLayout, getNonAbstractChildren, getCorrectStartEnd, ConnectingPosition, GlobalLayout } from '@plait/layouts';
+import { distanceBetweenPointAndRectangle, PlaitBoard, PlaitNode, NODE_TO_PARENT, Path, ELEMENT_TO_COMPONENT, PlaitElement, Transforms, idCreator, isNullOrUndefined, clearSelectedElement, addSelectedElement, drawRoundRectangle, getRectangleByElements, RectangleClient, getSelectedElements, createG, drawAbstractRoundRectangle, PlaitPluginElementComponent, PlaitPointerType, NODE_TO_INDEX, createText, IS_TEXT_EDITABLE, MERGING, transformPoint, toPoint, depthFirstRecursion, PlaitModule, distanceBetweenPointAndPoint, updateForeignObject as updateForeignObject$1, CLIP_BOARD_FORMAT_KEY, BOARD_TO_HOST, Selection, removeSelectedElement, PlaitHistoryBoard, hotkeys } from '@plait/core';
+import { MindLayoutType, AbstractNode, getAbstractLayout, isIndentedLayout, isStandardLayout, isHorizontalLogicLayout, isVerticalLogicLayout, isTopLayout, isLeftLayout, isBottomLayout, isRightLayout, isHorizontalLayout, getNonAbstractChildren, getCorrectStartEnd, ConnectingPosition, GlobalLayout } from '@plait/layouts';
 import { getSizeByText, ROOT_DEFAULT_HEIGHT, TEXT_DEFAULT_HEIGHT, drawRichtext, updateForeignObject, createForeignObject, updateRichText, setFullSelectionAndFocus, getRichtextContentSize, hasEditableTarget, RichtextModule } from '@plait/richtext';
 import { fromEvent, Subject, timer } from 'rxjs';
 import { take, takeUntil, filter, debounceTime } from 'rxjs/operators';
@@ -16,34 +16,44 @@ const ELEMENT_TO_NODE = new WeakMap();
 
 const BASE = 4;
 const PRIMARY_COLOR = '#6698FF';
-const MINDMAP_KEY = 'plait-mindmap';
-const MAX_RADIUS = BASE * 4;
 const TRANSPARENT = 'transparent';
 const GRAY_COLOR = '#AAAAAA';
 const STROKE_WIDTH = 3;
+const BRANCH_WIDTH = 3;
 const EXTEND_OFFSET = 8;
 const EXTEND_RADIUS = 16;
 const QUICK_INSERT_CIRCLE_OFFSET = 9;
 const QUICK_INSERT_CIRCLE_COLOR = '#6698FF';
 const QUICK_INSERT_INNER_CROSS_COLOR = 'white';
 
+const DefaultAbstractNodeStyle = {
+    strokeColor: GRAY_COLOR,
+    strokeWidth: 2,
+    branchColor: GRAY_COLOR,
+    branchWidth: 2,
+    fill: '#FFFFFF'
+};
+const DefaultNodeStyle = {
+    strokeWidth: 3,
+    branchWidth: 3,
+    fill: '#FFFFFF'
+};
+const DefaultRootStyle = {
+    fill: '#F5F5F5',
+    strokeColor: '#F5F5F5',
+};
+const BRANCH_COLORS = ['#A287E1', '#6F81DB', '#6EC4C4', '#DFB85D', '#B1C774', '#77C386', '#C28976', '#E48484', '#E482D4', '#69B1E4'];
+
 const TOPIC_COLOR = '#333';
 const TOPIC_FONT_SIZE = 14;
-const NODE_FILL = '#FFFFFF';
-const ROOT_NODE_FILL = '#F5F5F5';
-const ROOT_NODE_STROKE = '#F5F5F5';
 const ROOT_TOPIC_FONT_SIZE = 18;
+const TOPIC_DEFAULT_MAX_WORD_COUNT = 34;
+
 const NODE_MIN_WIDTH = 18;
-const COLORS = ['#A287E1', '#6F81DB', '#6EC4C4', '#DFB85D', '#B1C774', '#77C386', '#C28976', '#E48484', '#E482D4', '#69B1E4'];
-var MindNodeShape;
-(function (MindNodeShape) {
-    MindNodeShape["roundRectangle"] = "round-rectangle";
-    MindNodeShape["underline"] = "underline";
-})(MindNodeShape || (MindNodeShape = {}));
-const ABSTRACT_HANDLE_COLOR = '#6698FF80'; //PRIMARY_COLOR 50% 透明度
+
+const ABSTRACT_HANDLE_COLOR = '#6698FF80'; //primary color 50% opacity
 const ABSTRACT_INCLUDED_OUTLINE_OFFSET = 3.5;
 const ABSTRACT_HANDLE_LENGTH = 10;
-const TOPIC_DEFAULT_MAX_WORD_COUNT = 34;
 const ABSTRACT_HANDLE_MASK_WIDTH = 8;
 
 function getRectangleByNode(node) {
@@ -74,34 +84,35 @@ function hitMindElement(board, point, element) {
  * 2. correct layout by incorrect layout direction
  * @param element
  */
-const getCorrectLayoutByElement = (element) => {
-    const { root } = findUpElement(element);
-    const rootLayout = root.layout || getDefaultLayout();
-    let correctRootLayout = rootLayout;
-    if (element.isRoot) {
-        return correctRootLayout;
-    }
-    const component = PlaitElement.getComponent(element);
-    let layout = element.layout;
-    let parentComponent = null;
-    let parent = component.parent.origin;
-    while (!layout && parent) {
-        parentComponent = PlaitElement.getComponent(parent);
-        layout = parentComponent.node.origin.layout;
-        parent = parentComponent.parent?.origin;
-    }
-    if ((AbstractNode.isAbstract(element) || isChildOfAbstract(MindElement.getNode(element))) &&
-        isIndentedLayout(layout)) {
-        return getAbstractLayout(layout);
+const getCorrectLayoutByElement = (board, element) => {
+    const ancestors = MindElement.getAncestors(board, element);
+    ancestors.unshift(element);
+    const root = ancestors[ancestors.length - 1];
+    let rootLayout = getRootLayout(root);
+    if (PlaitMind.isMind(element)) {
+        return rootLayout;
     }
-    // handle root standard
+    const node = MindElement.getNode(element);
+    let correctRootLayout = rootLayout;
     if (rootLayout === MindLayoutType.standard) {
-        correctRootLayout = component?.node.left ? MindLayoutType.left : MindLayoutType.right;
+        correctRootLayout = node.left ? MindLayoutType.left : MindLayoutType.right;
     }
-    if (parentComponent && parentComponent.node.origin.isRoot) {
+    let layout = null;
+    const elementWithLayout = ancestors.find(value => value.layout || AbstractNode.isAbstract(value));
+    if (elementWithLayout) {
+        if (AbstractNode.isAbstract(elementWithLayout)) {
+            const parent = MindElement.getParent(elementWithLayout);
+            const parentLayout = getCorrectLayoutByElement(board, parent);
+            layout = getAbstractLayout(parentLayout);
+        }
+        else {
+            layout = elementWithLayout?.layout;
+        }
+    }
+    if (layout === MindLayoutType.standard || !layout) {
         return correctRootLayout;
     }
-    if (layout) {
+    else {
         const incorrectDirection = getInCorrectLayoutDirection(correctRootLayout, layout);
         if (incorrectDirection) {
             return correctLayoutByDirection(layout, incorrectDirection);
@@ -110,36 +121,28 @@ const getCorrectLayoutByElement = (element) => {
             return layout;
         }
     }
-    else {
-        return correctRootLayout;
-    }
 };
 
-const getBranchLayouts = (element) => {
+const getBranchLayouts = (board, element) => {
     const layouts = [];
     if (element.layout) {
-        //getCorrectLayoutByElement含有递归操作，getBranchMindmapLayouts本身也有递归操作，有待优化
-        layouts.unshift(getCorrectLayoutByElement(element));
+        // TODO: getCorrectLayoutByElement 含有递归操作，getBranchLayouts 本身也有递归操作，有待优化
+        layouts.unshift(getCorrectLayoutByElement(board, element));
     }
-    let parent = findParentElement(element);
+    let parent = MindElement.findParent(element);
     while (parent) {
         if (parent.layout) {
             layouts.unshift(parent.layout);
         }
-        parent = findParentElement(parent);
+        parent = MindElement.findParent(parent);
     }
     return layouts;
 };
 
-/**
- *  get available sub layouts by element
- * @param element
- * @returns MindLayoutType[]
- */
-const getAvailableSubLayoutsByElement = (element) => {
-    const parentElement = findParentElement(element);
+const getAvailableSubLayoutsByElement = (board, element) => {
+    const parentElement = MindElement.findParent(element);
     if (parentElement) {
-        const branchLayouts = getBranchLayouts(parentElement);
+        const branchLayouts = getBranchLayouts(board, parentElement);
         if (branchLayouts[0] === MindLayoutType.standard) {
             const node = MindElement.getNode(element);
             branchLayouts[0] = node.left ? MindLayoutType.left : MindLayoutType.right;
@@ -155,20 +158,107 @@ const getAvailableSubLayoutsByElement = (element) => {
     return undefined;
 };
 
-/**
- * 获取父节点布局类型
- * @param element
- * @returns MindLayoutType
- */
-const getLayoutParentByElement = (element) => {
-    let parent = findParentElement(element);
-    while (parent) {
-        if (parent.layout) {
-            return parent.layout;
+const getBranchDirectionsByLayouts = (branchLayouts) => {
+    const branchDirections = [];
+    branchLayouts.forEach(l => {
+        const directions = LayoutDirectionsMap[l];
+        directions.forEach(d => {
+            if (!branchDirections.includes(d) && !branchDirections.includes(getLayoutReverseDirection(d))) {
+                branchDirections.push(d);
+            }
+        });
+    });
+    return branchDirections;
+};
+const isCorrectLayout = (root, layout) => {
+    const rootLayout = root.layout || getDefaultLayout();
+    return !getInCorrectLayoutDirection(rootLayout, layout);
+};
+const isMixedLayout = (parentLayout, layout) => {
+    return (!isIndentedLayout(parentLayout) && isIndentedLayout(layout)) || (isIndentedLayout(parentLayout) && !isIndentedLayout(layout));
+};
+const getInCorrectLayoutDirection = (rootLayout, layout) => {
+    const directions = LayoutDirectionsMap[rootLayout];
+    const subLayoutDirections = LayoutDirectionsMap[layout];
+    if (!subLayoutDirections) {
+        throw new Error(`unexpected layout: ${layout} on correct layout`);
+    }
+    return subLayoutDirections.find(d => directions.includes(getLayoutReverseDirection(d)));
+};
+const correctLayoutByDirection = (layout, direction) => {
+    const isHorizontal = direction === LayoutDirection.left || direction === LayoutDirection.right ? true : false;
+    let inverseDirectionLayout = MindLayoutType.standard;
+    switch (layout) {
+        case MindLayoutType.left:
+            inverseDirectionLayout = MindLayoutType.right;
+            break;
+        case MindLayoutType.right:
+            inverseDirectionLayout = MindLayoutType.left;
+            break;
+        case MindLayoutType.downward:
+            inverseDirectionLayout = MindLayoutType.upward;
+            break;
+        case MindLayoutType.upward:
+            inverseDirectionLayout = MindLayoutType.downward;
+            break;
+        case MindLayoutType.rightBottomIndented:
+            inverseDirectionLayout = isHorizontal ? MindLayoutType.leftBottomIndented : MindLayoutType.rightTopIndented;
+            break;
+        case MindLayoutType.leftBottomIndented:
+            inverseDirectionLayout = isHorizontal ? MindLayoutType.rightBottomIndented : MindLayoutType.leftTopIndented;
+            break;
+        case MindLayoutType.rightTopIndented:
+            inverseDirectionLayout = isHorizontal ? MindLayoutType.leftTopIndented : MindLayoutType.rightBottomIndented;
+            break;
+        case MindLayoutType.leftTopIndented:
+            inverseDirectionLayout = isHorizontal ? MindLayoutType.rightTopIndented : MindLayoutType.leftBottomIndented;
+            break;
+    }
+    return inverseDirectionLayout;
+};
+const getLayoutDirection$1 = (root) => {
+    const layout = root.layout || getDefaultLayout();
+    return LayoutDirectionsMap[layout];
+};
+const getDefaultLayout = () => {
+    return MindLayoutType.standard;
+};
+const getAvailableSubLayoutsByLayoutDirections = (directions) => {
+    const result = [];
+    const reverseDirections = directions.map(getLayoutReverseDirection);
+    for (const key in MindLayoutType) {
+        const layout = MindLayoutType[key];
+        const layoutDirections = LayoutDirectionsMap[layout];
+        if (layoutDirections) {
+            const hasSameDirection = layoutDirections.some(d => directions.includes(d));
+            const hasReverseDirection = layoutDirections.some(r => reverseDirections.includes(r));
+            if (hasSameDirection && !hasReverseDirection) {
+                result.push(layout);
+            }
         }
-        parent = findParentElement(parent);
     }
-    return getDefaultLayout();
+    return result;
+};
+const getLayoutReverseDirection = (layoutDirection) => {
+    let reverseDirection = LayoutDirection.right;
+    switch (layoutDirection) {
+        case LayoutDirection.top:
+            reverseDirection = LayoutDirection.bottom;
+            break;
+        case LayoutDirection.bottom:
+            reverseDirection = LayoutDirection.top;
+            break;
+        case LayoutDirection.right:
+            reverseDirection = LayoutDirection.left;
+            break;
+        case LayoutDirection.left:
+            reverseDirection = LayoutDirection.right;
+            break;
+    }
+    return reverseDirection;
+};
+const getRootLayout = (root) => {
+    return root.layout || getDefaultLayout();
 };
 
 const getLayoutByElement = (element) => {
@@ -176,17 +266,18 @@ const getLayoutByElement = (element) => {
     if (layout) {
         return layout;
     }
-    if (AbstractNode.isAbstract(element) ||
-        (isChildOfAbstract(MindElement.getNode(element)) && isIndentedLayout(layout))) {
-        const parentLayout = getLayoutParentByElement(element);
-        return getAbstractLayout(parentLayout);
+    const parent = !PlaitMind.isMind(element) && MindElement.getParent(element);
+    if (AbstractNode.isAbstract(element) && parent) {
+        return getAbstractLayout(getLayoutByElement(parent));
+    }
+    if (parent) {
+        return getLayoutByElement(parent);
     }
-    return getLayoutParentByElement(element);
+    return getDefaultLayout();
 };
 
 const MindQueries = {
     getAvailableSubLayoutsByElement,
-    getLayoutParentByElement,
     getBranchLayouts,
     getLayoutByElement,
     getCorrectLayoutByElement
@@ -223,6 +314,13 @@ const MindElement = {
         const parent = NODE_TO_PARENT.get(node);
         return parent;
     },
+    findParent(node) {
+        if (PlaitMind.isMind(node)) {
+            return undefined;
+        }
+        const parent = NODE_TO_PARENT.get(node);
+        return parent;
+    },
     getRoot(board, element) {
         const path = PlaitBoard.findPath(board, element);
         return PlaitNode.get(board, path.slice(0, 1));
@@ -245,6 +343,13 @@ const MindElement = {
         }
         return node;
     },
+    findParentNode(element) {
+        if (PlaitMind.isMind(element)) {
+            return undefined;
+        }
+        const parent = MindElement.getParent(element);
+        return MindElement.getNode(parent);
+    },
     hasEmojis(element) {
         if (element.data.emojis) {
             return true;
@@ -257,6 +362,11 @@ const MindElement = {
         return element.data.emojis;
     }
 };
+var MindElementShape;
+(function (MindElementShape) {
+    MindElementShape["roundRectangle"] = "round-rectangle";
+    MindElementShape["underline"] = "underline";
+})(MindElementShape || (MindElementShape = {}));
 
 const MindNode = {
     get(root, path) {
@@ -269,15 +379,6 @@ const MindNode = {
             node = node.children[p];
         }
         return node;
-    },
-    isEquals(node, otherNode) {
-        const hasSameSize = node.x === otherNode.x && node.y === otherNode.y && node.width === otherNode.width && node.height === otherNode.height;
-        const hasSameOrigin = node.origin === otherNode.origin;
-        let hasSameParentOriginChildren = false;
-        if (node.parent && otherNode.parent) {
-            hasSameParentOriginChildren = node.parent.origin.children == otherNode.parent.origin.children;
-        }
-        return hasSameSize && hasSameOrigin && hasSameParentOriginChildren;
     }
 };
 
@@ -311,109 +412,6 @@ var AbstractResizeState;
     AbstractResizeState["end"] = "end";
 })(AbstractResizeState || (AbstractResizeState = {}));
 
-const getBranchDirectionsByLayouts = (branchLayouts) => {
-    const branchDirections = [];
-    branchLayouts.forEach(l => {
-        const directions = LayoutDirectionsMap[l];
-        directions.forEach(d => {
-            if (!branchDirections.includes(d) && !branchDirections.includes(getLayoutReverseDirection(d))) {
-                branchDirections.push(d);
-            }
-        });
-    });
-    return branchDirections;
-};
-const isCorrectLayout = (root, layout) => {
-    const rootLayout = root.layout || getDefaultLayout();
-    return !getInCorrectLayoutDirection(rootLayout, layout);
-};
-const isMixedLayout = (parentLayout, layout) => {
-    return (!isIndentedLayout(parentLayout) && isIndentedLayout(layout)) || (isIndentedLayout(parentLayout) && !isIndentedLayout(layout));
-};
-const getInCorrectLayoutDirection = (rootLayout, layout) => {
-    const directions = LayoutDirectionsMap[rootLayout];
-    const subLayoutDirections = LayoutDirectionsMap[layout];
-    if (!subLayoutDirections) {
-        throw new Error(`unexpected layout: ${layout} on correct layout`);
-    }
-    return subLayoutDirections.find(d => directions.includes(getLayoutReverseDirection(d)));
-};
-const correctLayoutByDirection = (layout, direction) => {
-    const isHorizontal = direction === LayoutDirection.left || direction === LayoutDirection.right ? true : false;
-    let inverseDirectionLayout = MindLayoutType.standard;
-    switch (layout) {
-        case MindLayoutType.left:
-            inverseDirectionLayout = MindLayoutType.right;
-            break;
-        case MindLayoutType.right:
-            inverseDirectionLayout = MindLayoutType.left;
-            break;
-        case MindLayoutType.downward:
-            inverseDirectionLayout = MindLayoutType.upward;
-            break;
-        case MindLayoutType.upward:
-            inverseDirectionLayout = MindLayoutType.downward;
-            break;
-        case MindLayoutType.rightBottomIndented:
-            inverseDirectionLayout = isHorizontal ? MindLayoutType.leftBottomIndented : MindLayoutType.rightTopIndented;
-            break;
-        case MindLayoutType.leftBottomIndented:
-            inverseDirectionLayout = isHorizontal ? MindLayoutType.rightBottomIndented : MindLayoutType.leftTopIndented;
-            break;
-        case MindLayoutType.rightTopIndented:
-            inverseDirectionLayout = isHorizontal ? MindLayoutType.leftTopIndented : MindLayoutType.rightBottomIndented;
-            break;
-        case MindLayoutType.leftTopIndented:
-            inverseDirectionLayout = isHorizontal ? MindLayoutType.rightTopIndented : MindLayoutType.leftBottomIndented;
-            break;
-    }
-    return inverseDirectionLayout;
-};
-const getLayoutDirection$1 = (root) => {
-    const layout = root.layout || getDefaultLayout();
-    return LayoutDirectionsMap[layout];
-};
-const getDefaultLayout = () => {
-    return MindLayoutType.standard;
-};
-const getAvailableSubLayoutsByLayoutDirections = (directions) => {
-    const result = [];
-    const reverseDirections = directions.map(getLayoutReverseDirection);
-    for (const key in MindLayoutType) {
-        const layout = MindLayoutType[key];
-        const layoutDirections = LayoutDirectionsMap[layout];
-        if (layoutDirections) {
-            const hasSameDirection = layoutDirections.some(d => directions.includes(d));
-            const hasReverseDirection = layoutDirections.some(r => reverseDirections.includes(r));
-            if (hasSameDirection && !hasReverseDirection) {
-                result.push(layout);
-            }
-        }
-    }
-    return result;
-};
-const getLayoutReverseDirection = (layoutDirection) => {
-    let reverseDirection = LayoutDirection.right;
-    switch (layoutDirection) {
-        case LayoutDirection.top:
-            reverseDirection = LayoutDirection.bottom;
-            break;
-        case LayoutDirection.bottom:
-            reverseDirection = LayoutDirection.top;
-            break;
-        case LayoutDirection.right:
-            reverseDirection = LayoutDirection.left;
-            break;
-        case LayoutDirection.left:
-            reverseDirection = LayoutDirection.right;
-            break;
-    }
-    return reverseDirection;
-};
-const getRootLayout = (root) => {
-    return root.layout || getDefaultLayout();
-};
-
 function enterNodeEditing(element) {
     const component = ELEMENT_TO_COMPONENT.get(element);
     component.startEditText(false, false);
@@ -443,13 +441,137 @@ const separateChildren = (parentElement) => {
     return { leftChildren, rightChildren };
 };
 const isSetAbstract = (element) => {
-    return !!getCorrespondingAbstract(element);
+    const parent = MindElement.getParent(element);
+    return !!getCorrespondingAbstract(parent, element);
 };
 const canSetAbstract = (element) => {
     return !PlaitElement.isRootElement(element) && !AbstractNode.isAbstract(element) && !isSetAbstract(element);
 };
-const setAbstract = (board, elements) => {
-    let elementGroup = filterChildElement(elements);
+const getCorrespondingAbstract = (parent, element) => {
+    if (!parent)
+        return undefined;
+    const elementIndex = parent.children.indexOf(element);
+    return parent.children.find(child => {
+        return AbstractNode.isAbstract(child) && elementIndex >= child.start && elementIndex <= child.end;
+    });
+};
+const getBehindAbstracts = (parent, element) => {
+    const index = parent.children.indexOf(element);
+    return parent.children.filter(child => AbstractNode.isAbstract(child) && child.start > index);
+};
+const getOverallAbstracts = (board, elements) => {
+    const overallAbstracts = [];
+    elements
+        .filter(value => !AbstractNode.isAbstract(value) && !PlaitMind.isMind(value))
+        .forEach(value => {
+        const parent = MindElement.getParent(value);
+        const abstract = getCorrespondingAbstract(parent, value);
+        if (abstract && overallAbstracts.indexOf(abstract) === -1) {
+            const { start, end } = abstract;
+            const parent = MindElement.getParent(value);
+            const isOverall = parent.children.slice(start, end + 1).every(includedElement => elements.indexOf(includedElement) > -1);
+            if (isOverall) {
+                overallAbstracts.push(abstract);
+            }
+        }
+    });
+    return overallAbstracts;
+};
+const insertElementHandleAbstract = (board, path, 
+//由此区分拖拽和新增到概要概括最后一个节点
+isExtendPreviousNode = true, abstractRefs = new Map()) => {
+    const parent = PlaitNode.parent(board, path);
+    const hasPreviousNode = path[path.length - 1] !== 0;
+    let behindAbstracts;
+    if (!hasPreviousNode) {
+        behindAbstracts = parent.children.filter(child => AbstractNode.isAbstract(child));
+    }
+    else {
+        const selectedElement = PlaitNode.get(board, Path.previous(path));
+        behindAbstracts = getBehindAbstracts(parent, selectedElement);
+    }
+    if (behindAbstracts.length) {
+        behindAbstracts.forEach(abstract => {
+            let newProperties = abstractRefs.get(abstract);
+            if (!newProperties) {
+                newProperties = { start: 0, end: 0 };
+                abstractRefs.set(abstract, newProperties);
+            }
+            newProperties.start = newProperties.start + 1;
+            newProperties.end = newProperties.end + 1;
+        });
+    }
+    if (!hasPreviousNode) {
+        return abstractRefs;
+    }
+    const selectedElement = PlaitNode.get(board, Path.previous(path));
+    const correspondingAbstract = getCorrespondingAbstract(parent, selectedElement);
+    const isDragToLast = !isExtendPreviousNode && correspondingAbstract && correspondingAbstract.end === path[path.length - 1] - 1;
+    if (correspondingAbstract && !isDragToLast) {
+        let newProperties = abstractRefs.get(correspondingAbstract);
+        if (!newProperties) {
+            newProperties = { start: 0, end: 0 };
+            abstractRefs.set(correspondingAbstract, newProperties);
+        }
+        newProperties.end = newProperties.end + 1;
+    }
+    return abstractRefs;
+};
+const deleteElementHandleAbstract = (board, deletableElements, abstractRefs = new Map()) => {
+    deletableElements.forEach(node => {
+        if (!PlaitMind.isMind(node)) {
+            const parent = PlaitNode.parent(board, PlaitBoard.findPath(board, node));
+            const behindAbstracts = getBehindAbstracts(parent, node).filter(abstract => !deletableElements.includes(abstract));
+            if (behindAbstracts.length) {
+                behindAbstracts.forEach(abstract => {
+                    let newProperties = abstractRefs.get(abstract);
+                    if (!newProperties) {
+                        newProperties = { start: 0, end: 0 };
+                        abstractRefs.set(abstract, newProperties);
+                    }
+                    newProperties.start = newProperties.start - 1;
+                    newProperties.end = newProperties.end - 1;
+                });
+            }
+            const correspondingAbstract = getCorrespondingAbstract(parent, node);
+            if (correspondingAbstract && !deletableElements.includes(correspondingAbstract)) {
+                let newProperties = abstractRefs.get(correspondingAbstract);
+                if (!newProperties) {
+                    newProperties = { start: 0, end: 0 };
+                    abstractRefs.set(correspondingAbstract, newProperties);
+                }
+                newProperties.end = newProperties.end - 1;
+            }
+        }
+    });
+    return abstractRefs;
+};
+
+const setAbstractsByRefs = (board, abstractRefs) => {
+    abstractRefs.forEach((newProperty, element) => {
+        const start = element.start + newProperty.start;
+        const end = element.end + newProperty.end;
+        const path = PlaitBoard.findPath(board, element);
+        if (start > end) {
+            Transforms.removeNode(board, path);
+        }
+        else {
+            Transforms.setNode(board, { start, end }, path);
+        }
+    });
+};
+const setAbstractByStandardLayout = (board, element) => {
+    const rightNodeCount = element.rightNodeCount;
+    const abstract = element.children.find(child => {
+        return AbstractNode.isAbstract(child) && child.end >= rightNodeCount && child.start < rightNodeCount;
+    });
+    if (abstract) {
+        const path = PlaitBoard.findPath(board, abstract);
+        Transforms.setNode(board, { end: rightNodeCount - 1 }, path);
+    }
+};
+const insertAbstract = (board, elements) => {
+    let elementGroup = getFirstLevelElement(elements);
     const { parentElements, abstractIncludedGroups } = divideElementByParent(elementGroup);
     abstractIncludedGroups.forEach((group, index) => {
         const groupParent = parentElements[index];
@@ -476,71 +598,119 @@ const setAbstractByElements = (board, groupParent, group) => {
         insertAbstractNode(board, path, start, end);
     }
 };
-const insertAbstractNode = (board, path, start, end) => {
-    const mindElement = createMindElement('概要', 28, 20, {
-        strokeColor: GRAY_COLOR,
-        branchColor: GRAY_COLOR
-    });
-    mindElement.start = start;
-    mindElement.end = end;
-    Transforms.insertNode(board, mindElement, path);
-};
-const handleAbstractIncluded = (board, element) => {
-    const rightNodeCount = element.rightNodeCount;
-    const abstract = element.children.find(child => {
-        return AbstractNode.isAbstract(child) && child.end >= rightNodeCount && child.start < rightNodeCount;
-    });
-    if (abstract) {
-        const path = PlaitBoard.findPath(board, abstract);
-        Transforms.setNode(board, { end: rightNodeCount - 1 }, path);
+const insertAbstractNode = (board, path, start, end) => {
+    const mindElement = createMindElement('概要', 28, 20, {
+        strokeColor: DefaultAbstractNodeStyle.strokeColor,
+        strokeWidth: DefaultAbstractNodeStyle.branchWidth,
+        branchColor: DefaultAbstractNodeStyle.branchColor,
+        branchWidth: DefaultAbstractNodeStyle.branchWidth
+    });
+    mindElement.start = start;
+    mindElement.end = end;
+    Transforms.insertNode(board, mindElement, path);
+};
+
+const setLayout = (board, layout, path) => {
+    correctLogicLayoutNode(board, layout, path);
+    const element = PlaitNode.get(board, path);
+    if (PlaitMind.isMind(element) && isStandardLayout(layout)) {
+        MindTransforms.setAbstractByStandardLayout(board, element);
+    }
+    Transforms.setNode(board, { layout }, path);
+};
+const correctLogicLayoutNode = (board, layout, path) => {
+    const node = PlaitNode.get(board, path);
+    if (node && layout) {
+        node.children?.forEach((value, index) => {
+            if (value.layout) {
+                if ((isHorizontalLogicLayout(layout) && isVerticalLogicLayout(value.layout)) ||
+                    (isVerticalLogicLayout(layout) && isHorizontalLogicLayout(value.layout))) {
+                    Transforms.setNode(board, { layout: null }, [...path, index]);
+                }
+                if (value.children?.length) {
+                    correctLogicLayoutNode(board, layout, [...path, index]);
+                }
+            }
+        });
+    }
+};
+
+const setTopic = (board, element, topic, width, height) => {
+    const newElement = {
+        data: { topic },
+        width: width < NODE_MIN_WIDTH * board.viewport.zoom ? NODE_MIN_WIDTH : width / board.viewport.zoom,
+        height: height / board.viewport.zoom
+    };
+    if (MindElement.hasEmojis(element)) {
+        newElement.data.emojis = element.data.emojis;
     }
+    const path = PlaitBoard.findPath(board, element);
+    Transforms.setNode(board, newElement, path);
 };
-const getCorrespondingAbstract = (element) => {
-    const parent = MindElement.getParent(element);
-    if (!parent)
-        return undefined;
-    const elementIndex = parent.children.indexOf(element);
-    return parent.children.find(child => {
-        return AbstractNode.isAbstract(child) && elementIndex >= child.start && elementIndex <= child.end;
-    });
+const setTopicSize = (board, element, width, height) => {
+    const newElement = {
+        width: width < NODE_MIN_WIDTH * board.viewport.zoom ? NODE_MIN_WIDTH : width / board.viewport.zoom,
+        height: height / board.viewport.zoom
+    };
+    const path = PlaitBoard.findPath(board, element);
+    Transforms.setNode(board, newElement, path);
 };
-const getBehindAbstracts = (element) => {
-    const parent = MindElement.getParent(element);
-    const index = parent.children.indexOf(element);
-    return parent.children.filter(child => AbstractNode.isAbstract(child) && child.start > index);
+const addEmoji = (board, element, emojiItem) => {
+    const emojis = element.data.emojis || [];
+    const newEmojis = [...emojis];
+    newEmojis.push(emojiItem);
+    const newElement = {
+        data: { topic: element.data.topic, emojis: newEmojis }
+    };
+    const path = PlaitBoard.findPath(board, element);
+    Transforms.setNode(board, newElement, path);
 };
-const insertSiblingElementHandleAbstract = (board, selectedElement) => {
-    const abstract = getCorrespondingAbstract(selectedElement);
-    if (abstract) {
-        PlaitBoard.findPath(board, abstract);
-        Transforms.setNode(board, { end: abstract.end + 1 }, PlaitBoard.findPath(board, abstract));
-    }
-    const abstracts = getBehindAbstracts(selectedElement);
-    if (abstracts.length) {
-        moveAbstractPosition(board, abstracts, 1);
+const removeEmoji = (board, element, emojiItem) => {
+    const emojis = element.data.emojis.filter(value => value !== emojiItem);
+    const newElement = {
+        data: { topic: element.data.topic }
+    };
+    if (emojis.length > 0) {
+        newElement.data.emojis = emojis;
     }
+    const path = PlaitBoard.findPath(board, element);
+    Transforms.setNode(board, newElement, path);
 };
-const moveAbstractPosition = (board, abstracts, step) => {
-    abstracts.forEach(abstract => {
-        Transforms.setNode(board, { start: abstract.start + step, end: abstract.end + step }, PlaitBoard.findPath(board, abstract));
+const replaceEmoji = (board, element, oldEmoji, newEmoji) => {
+    const newElement = {
+        data: { topic: element.data.topic }
+    };
+    const newEmojis = element.data.emojis.map(value => {
+        if (value === oldEmoji) {
+            return newEmoji;
+        }
+        return value;
     });
+    newElement.data.emojis = newEmojis;
+    const path = PlaitBoard.findPath(board, element);
+    Transforms.setNode(board, newElement, path);
+};
+
+const MindTransforms = {
+    setLayout,
+    setTopic,
+    setTopicSize,
+    addEmoji,
+    removeEmoji,
+    replaceEmoji,
+    insertAbstract,
+    setAbstractsByRefs,
+    setAbstractByStandardLayout
 };
 
-function findParentElement(element) {
-    const component = PlaitElement.getComponent(element);
-    if (component && component.parent) {
-        return component.parent.origin;
-    }
-    return undefined;
-}
 function findUpElement(element) {
     let branch;
     let root = element;
-    let parent = findParentElement(element);
+    let parent = MindElement.findParent(element);
     while (parent) {
         branch = root;
         root = parent;
-        parent = findParentElement(parent);
+        parent = MindElement.findParent(parent);
     }
     return { root, branch };
 }
@@ -551,16 +721,16 @@ const getChildrenCount = (element) => {
     return count + element.children.length;
 };
 const isChildElement = (origin, child) => {
-    let parent = findParentElement(child);
+    let parent = MindElement.findParent(child);
     while (parent) {
         if (parent === origin) {
             return true;
         }
-        parent = findParentElement(parent);
+        parent = MindElement.findParent(parent);
     }
     return false;
 };
-const filterChildElement = (elements) => {
+const getFirstLevelElement = (elements) => {
     let result = [];
     elements.forEach(element => {
         const isChild = elements.some(node => {
@@ -650,7 +820,7 @@ const changeRightNodeCount = (board, parentPath, changeNumber) => {
     }, parentPath);
 };
 const shouldChangeRightNodeCount = (selectedElement) => {
-    const parentElement = findParentElement(selectedElement);
+    const parentElement = MindElement.findParent(selectedElement);
     if (parentElement) {
         const nodeIndex = parentElement.children.findIndex(item => item.id === selectedElement.id);
         if (parentElement.isRoot &&
@@ -663,13 +833,13 @@ const shouldChangeRightNodeCount = (selectedElement) => {
     return false;
 };
 const createDefaultMindMapElement = (point, rightNodeCount, layout) => {
-    const root = createMindElement('思维导图', 72, ROOT_DEFAULT_HEIGHT, { shape: MindNodeShape.roundRectangle, layout });
+    const root = createMindElement('思维导图', 72, ROOT_DEFAULT_HEIGHT, { shape: MindElementShape.roundRectangle, layout });
     root.rightNodeCount = rightNodeCount;
     root.isRoot = true;
     root.type = 'mindmap';
     root.points = [point];
     const children = [1, 1, 1].map(() => {
-        return createMindElement('新建节点', 56, TEXT_DEFAULT_HEIGHT, { shape: MindNodeShape.roundRectangle });
+        return createMindElement('新建节点', 56, TEXT_DEFAULT_HEIGHT, { shape: MindElementShape.roundRectangle });
     });
     root.children = children;
     return root;
@@ -706,11 +876,14 @@ const createMindElement = (text, width, height, options) => {
     if (options.branchColor) {
         newElement.branchColor = options.branchColor;
     }
+    if (!isNullOrUndefined(options.branchWidth)) {
+        newElement.branchWidth = options.branchWidth;
+    }
     return newElement;
 };
 // layoutLevel 用来表示插入兄弟节点还是子节点
 const insertMindElement = (board, inheritNode, path) => {
-    let fill, strokeColor, strokeWidth, shape = MindNodeShape.roundRectangle;
+    let fill, strokeColor, strokeWidth, shape = MindElementShape.roundRectangle;
     if (!inheritNode.isRoot) {
         fill = inheritNode.fill;
         strokeColor = inheritNode.strokeColor;
@@ -733,63 +906,23 @@ const findLastChild = (child) => {
     return result;
 };
 const deleteSelectedELements = (board, selectedElements) => {
+    const deletableElements = getFirstLevelElement(selectedElements).reverse();
+    const abstractRefs = deleteElementHandleAbstract(board, deletableElements);
+    MindTransforms.setAbstractsByRefs(board, abstractRefs);
     //翻转，从下到上修改，防止找不到 path
-    const deletableElements = filterChildElement(selectedElements).reverse();
-    const relativeAbstracts = [];
-    const accumulativeProperties = new WeakMap();
-    deletableElements.forEach(node => {
-        if (!PlaitMind.isMind(node)) {
-            const behindAbstracts = getBehindAbstracts(node).filter(abstract => !deletableElements.includes(abstract));
-            if (behindAbstracts.length) {
-                behindAbstracts.forEach(abstract => {
-                    let newProperties = accumulativeProperties.get(abstract);
-                    if (!newProperties) {
-                        newProperties = { start: abstract.start, end: abstract.end };
-                        accumulativeProperties.set(abstract, newProperties);
-                        relativeAbstracts.push(abstract);
-                    }
-                    newProperties.start = newProperties.start - 1;
-                    newProperties.end = newProperties.end - 1;
-                });
-            }
-            const correspondingAbstract = getCorrespondingAbstract(node);
-            if (correspondingAbstract && !deletableElements.includes(correspondingAbstract)) {
-                let newProperties = accumulativeProperties.get(correspondingAbstract);
-                if (!newProperties) {
-                    newProperties = { start: correspondingAbstract.start, end: correspondingAbstract.end };
-                    accumulativeProperties.set(correspondingAbstract, newProperties);
-                    relativeAbstracts.push(correspondingAbstract);
-                }
-                newProperties.end = newProperties.end - 1;
-            }
-        }
-    });
-    const abstractHandles = relativeAbstracts.map(value => {
-        const newProperties = accumulativeProperties.get(value);
-        if (newProperties) {
-            const path = PlaitBoard.findPath(board, value);
-            return () => {
-                if (newProperties.start > newProperties.end) {
-                    Transforms.removeNode(board, path);
-                }
-                else {
-                    Transforms.setNode(board, newProperties, path);
-                }
-            };
-        }
-        return () => { };
-    });
-    const deletableHandles = deletableElements.map(node => {
-        const path = PlaitBoard.findPath(board, node);
+    deletableElements
+        .map(element => {
+        const path = PlaitBoard.findPath(board, element);
         return () => {
-            if (shouldChangeRightNodeCount(node)) {
-                changeRightNodeCount(board, path.slice(0, path.length - 1), -1);
+            if (shouldChangeRightNodeCount(element)) {
+                changeRightNodeCount(board, path.slice(0, 1), -1);
             }
             Transforms.removeNode(board, path);
         };
+    })
+        .forEach(action => {
+        action();
     });
-    abstractHandles.forEach(action => action());
-    deletableHandles.forEach(action => action());
 };
 const divideElementByParent = (elements) => {
     const abstractIncludedGroups = [];
@@ -808,65 +941,70 @@ const divideElementByParent = (elements) => {
     return { parentElements, abstractIncludedGroups };
 };
 
-const getNodeShapeByElement = (element) => {
-    let nodeShape = element.shape;
-    if (nodeShape) {
-        return nodeShape;
+const getAvailableProperty = (board, element, propertyKey) => {
+    const ancestors = MindElement.getAncestors(board, element);
+    ancestors.unshift(element);
+    const ancestor = ancestors.find(value => value[propertyKey]);
+    if (ancestor) {
+        return ancestor[propertyKey];
     }
-    let parent = findParentElement(element);
-    while (parent) {
-        if (parent.shape) {
-            return parent.shape;
-        }
-        parent = findParentElement(parent);
+    else {
+        return undefined;
     }
-    return MindNodeShape.roundRectangle;
 };
 
+/**
+ * Processing of branch color, width, style, etc. of the mind node
+ */
 const getBranchColorByMindElement = (board, element) => {
-    const ancestors = MindElement.getAncestors(board, element);
-    ancestors.unshift(element);
-    const ancestor = ancestors.find(value => value.branchColor);
-    if (ancestor && ancestor.branchColor) {
-        return ancestor.branchColor;
-    }
-    const root = ancestors[ancestors.length - 1];
-    const branch = ancestors[ancestors.length - 2];
-    if (branch) {
-        const index = root.children.indexOf(branch);
-        const length = COLORS.length;
-        const remainder = index % length;
-        return COLORS[remainder];
+    const branchColor = getAvailableProperty(board, element, 'branchColor');
+    return branchColor || getDefaultBranchColor(board, element);
+};
+const getBranchWidthByMindElement = (board, element) => {
+    const branchWidth = getAvailableProperty(board, element, 'branchWidth');
+    return branchWidth || BRANCH_WIDTH;
+};
+const getAbstractBranchWidth = (board, element) => {
+    if (!isNullOrUndefined(element.branchWidth)) {
+        return element.branchWidth;
     }
-    else {
-        throw new Error('root element should not have branch color');
+    return DefaultAbstractNodeStyle.branchWidth;
+};
+const getAbstractBranchColor = (board, element) => {
+    if (element.branchColor) {
+        return element.branchColor;
     }
+    return DefaultAbstractNodeStyle.branchColor;
 };
 const getNextBranchColor = (root) => {
     const index = root.children.length;
-    const length = COLORS.length;
+    return getDefaultBranchColorByIndex(index);
+};
+const getDefaultBranchColor = (board, element) => {
+    const path = PlaitBoard.findPath(board, element);
+    return getDefaultBranchColorByIndex(path[1]);
+};
+const getDefaultBranchColorByIndex = (index) => {
+    const length = BRANCH_COLORS.length;
     const remainder = index % length;
-    return COLORS[remainder];
+    return BRANCH_COLORS[remainder];
 };
 
 const getStrokeByMindElement = (board, element) => {
+    if (PlaitMind.isMind(element)) {
+        return element.strokeColor || DefaultRootStyle.strokeColor;
+    }
     const ancestors = MindElement.getAncestors(board, element);
     ancestors.unshift(element);
     const ancestor = ancestors.find(value => value.strokeColor);
-    if (ancestor && ancestor.strokeColor) {
+    if (ancestor && ancestor.strokeColor && !PlaitMind.isMind(ancestor)) {
         return ancestor.strokeColor;
     }
-    const root = ancestors[ancestors.length - 1];
-    const branch = ancestors[ancestors.length - 2];
-    if (branch) {
-        const index = root.children.indexOf(branch);
-        const length = COLORS.length;
-        const remainder = index % length;
-        return COLORS[remainder];
-    }
-    else {
-        return ROOT_NODE_STROKE;
-    }
+    return getDefaultBranchColor(board, element);
+};
+const getShapeByElement = (board, element) => {
+    const shape = getAvailableProperty(board, element, 'shape');
+    return shape || MindElementShape.roundRectangle;
 };
 
 function isVirtualKey(e) {
@@ -883,7 +1021,7 @@ function isVirtualKey(e) {
 
 function drawLink(board, node, child, defaultStroke = null, isHorizontal = true, needDrawUnderline = true) {
     let beginX, beginY, endX, endY, beginNode = node, endNode = child;
-    const layout = MindQueries.getCorrectLayoutByElement(node.origin);
+    const layout = MindQueries.getCorrectLayoutByElement(board, node.origin);
     if (isHorizontal) {
         if (!isChildRight(node, child)) {
             beginNode = child;
@@ -895,7 +1033,7 @@ function drawLink(board, node, child, defaultStroke = null, isHorizontal = true,
         endY = endNode.y + endNode.height / 2;
         if (node.parent &&
             isIndentedLayout(MindQueries.getLayoutByElement(node.parent?.origin)) &&
-            getNodeShapeByElement(node.origin) === MindNodeShape.underline) {
+            getShapeByElement(board, node.origin) === MindElementShape.underline) {
             if (isChildRight(node, child)) {
                 beginY = node.y + node.height - node.vGap;
             }
@@ -939,7 +1077,7 @@ function drawLink(board, node, child, defaultStroke = null, isHorizontal = true,
             [endX - (beginNode.hGap + endNode.hGap) / 2, endY],
             [endX, endY]
         ];
-        const shape = getNodeShapeByElement(child.origin);
+        const shape = getShapeByElement(board, child.origin);
         if (!node.origin.isRoot) {
             if (node.x > child.x) {
                 curve = [
@@ -970,7 +1108,7 @@ function drawLink(board, node, child, defaultStroke = null, isHorizontal = true,
                 curve = [...line, ...curve];
             }
         }
-        if (needDrawUnderline && shape === MindNodeShape.underline) {
+        if (needDrawUnderline && shape === MindElementShape.underline) {
             if (child.left) {
                 const underline = [
                     [beginX - (beginNode.width - beginNode.hGap * 2), beginY],
@@ -1039,15 +1177,16 @@ const drawPlaceholderDropNodeG = (board, dropTarget, fakeDropNodeG) => {
     if (dropTarget.detectResult && ['right', 'left'].includes(dropTarget.detectResult)) {
         drawStraightDropNodeG(board, targetRect, dropTarget.detectResult, targetComponent, fakeDropNodeG);
     }
-    if (targetComponent.parent && dropTarget.detectResult && ['top', 'bottom'].includes(dropTarget.detectResult)) {
-        const parentComponent = PlaitElement.getComponent(targetComponent.parent.origin);
+    const targetParent = MindElement.findParent(targetComponent.element);
+    if (targetParent && dropTarget.detectResult && ['top', 'bottom'].includes(dropTarget.detectResult)) {
+        const parentComponent = PlaitElement.getComponent(targetParent);
         const targetIndex = parentComponent.node.origin.children.indexOf(targetComponent.node.origin);
         drawCurvePlaceholderDropNodeG(board, targetRect, dropTarget.detectResult, targetIndex, targetComponent, parentComponent, fakeDropNodeG);
     }
 };
 const drawCurvePlaceholderDropNodeG = (board, targetRect, detectResult, targetIndex, targetComponent, parentComponent, fakeDropNodeG) => {
-    const parentNodeLayout = MindQueries.getCorrectLayoutByElement(parentComponent.node.origin);
-    const layout = MindQueries.getCorrectLayoutByElement(targetComponent.node.parent.origin);
+    const parentNodeLayout = MindQueries.getCorrectLayoutByElement(board, parentComponent.node.origin);
+    const layout = MindQueries.getCorrectLayoutByElement(board, targetComponent.node.parent.origin);
     const strokeWidth = targetComponent.node.origin.branchWidth ? targetComponent.node.origin.branchWidth : STROKE_WIDTH;
     let fakeX = targetComponent.node.x, fakeY = targetRect.y - 30, fakeRectangleStartX = targetRect.x, fakeRectangleEndX = targetRect.x + 30, fakeRectangleStartY = fakeY, fakeRectangleEndY = fakeRectangleStartY + 12, width = 30;
     if (isLeftLayout(layout)) {
@@ -1082,7 +1221,7 @@ const drawCurvePlaceholderDropNodeG = (board, targetRect, detectResult, targetIn
     }
     if (isVerticalLogicLayout(layout)) {
         parentComponent = targetComponent;
-        targetComponent = PlaitElement.getComponent(targetComponent.parent.origin);
+        targetComponent = PlaitElement.getComponent(MindElement.getParent(targetComponent.element));
         fakeX = parentComponent.node.x;
         width = parentComponent.node.width;
         const vGap = BASE * 6 + strokeWidth;
@@ -1178,8 +1317,8 @@ const drawStraightDropNodeG = (board, targetRect, detectResult, targetComponent,
         height,
         strokeWidth
     };
-    const parentLayout = MindQueries.getCorrectLayoutByElement(targetComponent.node.origin.isRoot ? targetComponent.node.origin : targetComponent.node.parent.origin);
-    const layout = MindQueries.getCorrectLayoutByElement(targetComponent.node.origin);
+    const parentLayout = MindQueries.getCorrectLayoutByElement(board, targetComponent.node.origin.isRoot ? targetComponent.node.origin : targetComponent.node.parent.origin);
+    const layout = MindQueries.getCorrectLayoutByElement(board, targetComponent.node.origin);
     if (!isMixedLayout(parentLayout, layout)) {
         // 构造一条直线
         let linePoints = [
@@ -1203,7 +1342,7 @@ const drawStraightDropNodeG = (board, targetRect, detectResult, targetComponent,
                  *      b. 最后一个节点的右侧：固定值（来源于 getMainAxle，第二级节点：BASE * 8，其他 BASE * 3 + strokeWidth / 2）；
                  */
                 fakeY = targetComponent.node.y;
-                const parentComponent = PlaitElement.getComponent(targetComponent.parent.origin);
+                const parentComponent = PlaitElement.getComponent(MindElement.getParent(targetComponent.element));
                 const targetIndex = parentComponent.node.origin.children.indexOf(targetComponent.node.origin);
                 if (detectResult === 'left') {
                     let offsetX = 0;
@@ -1389,29 +1528,29 @@ const directionDetector = (targetNode, centerPoint) => {
     return null;
 };
 
-const directionCorrector = (node, detectResults) => {
-    if (!node.origin.isRoot) {
-        const parentlayout = MindQueries.getCorrectLayoutByElement(node?.parent.origin);
-        if (isStandardLayout(parentlayout)) {
+const directionCorrector = (board, node, detectResults) => {
+    if (!node.origin.isRoot && !AbstractNode.isAbstract(node.origin)) {
+        const parentLayout = MindQueries.getCorrectLayoutByElement(board, node?.parent.origin);
+        if (isStandardLayout(parentLayout)) {
             const idx = node.parent.children.findIndex(x => x === node);
             const isLeft = idx >= (node.parent.origin.rightNodeCount || 0);
             return getAllowedDirection(detectResults, [isLeft ? 'right' : 'left']);
         }
-        if (isLeftLayout(parentlayout)) {
+        if (isLeftLayout(parentLayout)) {
             return getAllowedDirection(detectResults, ['right']);
         }
-        if (isRightLayout(parentlayout)) {
+        if (isRightLayout(parentLayout)) {
             return getAllowedDirection(detectResults, ['left']);
         }
-        if (parentlayout === MindLayoutType.upward) {
+        if (parentLayout === MindLayoutType.upward) {
             return getAllowedDirection(detectResults, ['bottom']);
         }
-        if (parentlayout === MindLayoutType.downward) {
+        if (parentLayout === MindLayoutType.downward) {
             return getAllowedDirection(detectResults, ['top']);
         }
     }
     else {
-        const layout = MindQueries.getCorrectLayoutByElement(node?.origin);
+        const layout = MindQueries.getCorrectLayoutByElement(board, node?.origin);
         if (isStandardLayout(layout)) {
             return getAllowedDirection(detectResults, ['top', 'bottom']);
         }
@@ -1442,17 +1581,18 @@ const getAllowedDirection = (detectResults, illegalDirections) => {
 };
 
 /* 根据布局调整 target 以及 direction */
-const readjustmentDropTarget = (dropTarget) => {
+const readjustmentDropTarget = (board, dropTarget) => {
     const { target, detectResult } = dropTarget;
     const newDropTarget = { target, detectResult };
     const targetComponent = PlaitElement.getComponent(target);
     if (targetComponent.node.children.length > 0 && dropTarget.detectResult) {
-        const layout = MindQueries.getCorrectLayoutByElement(targetComponent.node.origin);
-        const parentLayout = MindQueries.getCorrectLayoutByElement(targetComponent.node.origin.isRoot ? targetComponent.node.origin : targetComponent.node.parent.origin);
+        const layout = MindQueries.getCorrectLayoutByElement(board, targetComponent.node.origin);
+        const parentLayout = MindQueries.getCorrectLayoutByElement(board, targetComponent.node.origin.isRoot ? targetComponent.node.origin : targetComponent.node.parent.origin);
+        const children = getNonAbstractChildren(targetComponent.node);
         if (['right', 'left'].includes(dropTarget.detectResult)) {
             if (!isMixedLayout(parentLayout, layout)) {
                 if (targetComponent.node.origin.isRoot) {
-                    const layout = MindQueries.getCorrectLayoutByElement(targetComponent.node.origin);
+                    const layout = MindQueries.getCorrectLayoutByElement(board, targetComponent.node.origin);
                     // 标准布局，根节点
                     if (isStandardLayout(layout)) {
                         const rightNodeCount = targetComponent.node.origin.rightNodeCount;
@@ -1486,14 +1626,14 @@ const readjustmentDropTarget = (dropTarget) => {
                     return newDropTarget;
                 }
                 // 剩下是水平布局的默认情况：插入最后一个子节点的下方
-                const lastChildNodeIndex = targetComponent.node.children.length - 1;
+                const lastChildNodeIndex = children.length - 1;
                 newDropTarget.target = targetComponent.node.children[lastChildNodeIndex].origin;
                 newDropTarget.detectResult = 'bottom';
             }
             else {
                 // 处理左右布局下的混合布局
                 if ([MindLayoutType.left, MindLayoutType.right].includes(parentLayout)) {
-                    const layout = MindQueries.getCorrectLayoutByElement(targetComponent.node.origin);
+                    const layout = MindQueries.getCorrectLayoutByElement(board, targetComponent.node.origin);
                     if (isIndentedLayout(layout)) {
                         newDropTarget.target = targetComponent.node.children[0].origin;
                         newDropTarget.detectResult = isTopLayout(layout) ? 'bottom' : 'top';
@@ -1510,9 +1650,9 @@ const readjustmentDropTarget = (dropTarget) => {
                 return newDropTarget;
             }
             // 上下布局，插到右边
-            const parentLayout = MindQueries.getCorrectLayoutByElement(targetComponent.node.origin.isRoot ? targetComponent.node.origin : targetComponent.node.parent.origin);
+            const parentLayout = MindQueries.getCorrectLayoutByElement(board, targetComponent.node.origin.isRoot ? targetComponent.node.origin : targetComponent.node.parent.origin);
             if (isVerticalLogicLayout(parentLayout)) {
-                const lastChildNodeIndex = targetComponent.node.children.length - 1;
+                const lastChildNodeIndex = children.length - 1;
                 newDropTarget.target = targetComponent.node.children[lastChildNodeIndex].origin;
                 newDropTarget.detectResult = 'right';
                 return newDropTarget;
@@ -1623,7 +1763,7 @@ const getLocationScope = (board, handlePosition, parentChildren, element, parent
     }
 };
 const getHitAbstractHandle = (board, element, point) => {
-    const nodeLayout = MindQueries.getCorrectLayoutByElement(element);
+    const nodeLayout = MindQueries.getCorrectLayoutByElement(board, element);
     const isHorizontal = isHorizontalLayout(nodeLayout);
     const parentElement = MindElement.getParent(element);
     const includedElements = parentElement.children.slice(element.start, element.end + 1);
@@ -1710,24 +1850,25 @@ function handleTouchedAbstract(board, touchedAbstract, endPoint) {
 }
 
 function drawIndentedLink(board, node, child, defaultStroke = null, needDrawUnderline = true) {
-    const isUnderlineShap = getNodeShapeByElement(child.origin) === MindNodeShape.underline;
+    const branchWidth = getBranchWidthByMindElement(board, child.origin);
+    const branchColor = defaultStroke || getBranchColorByMindElement(board, child.origin);
+    const isUnderlineShape = getShapeByElement(board, child.origin) === MindElementShape.underline;
     let beginX, beginY, endX, endY, beginNode = node, endNode = child;
     const beginRectangle = getRectangleByNode(beginNode);
     const endRectangle = getRectangleByNode(endNode);
     beginX = beginNode.x + beginNode.width / 2;
     beginY = isChildUp(node, child) ? beginRectangle.y : beginRectangle.y + beginRectangle.height;
     endX = node.left ? endNode.x + endNode.hGap + endRectangle.width : endNode.x + endNode.hGap;
-    endY = isUnderlineShap ? endNode.y + endNode.height - endNode.vGap : endNode.y + endNode.height / 2;
+    endY = isUnderlineShape ? endNode.y + endNode.height - endNode.vGap : endNode.y + endNode.height / 2;
     //根据位置，设置正负参数
     let plusMinus = isChildUp(node, child) ? (node.left ? [-1, -1] : [1, -1]) : node.left ? [-1, 1] : [1, 1];
-    const layout = MindQueries.getCorrectLayoutByElement(node.origin);
-    const strokeWidth = child.origin.branchWidth ? child.origin.branchWidth : STROKE_WIDTH;
+    const layout = MindQueries.getCorrectLayoutByElement(board, node.origin);
     if (beginNode.origin.isRoot) {
         if (layout === MindLayoutType.leftBottomIndented || layout === MindLayoutType.rightBottomIndented) {
-            beginY += strokeWidth;
+            beginY += branchWidth;
         }
         if (layout === MindLayoutType.leftTopIndented || layout === MindLayoutType.rightTopIndented) {
-            beginY -= strokeWidth;
+            beginY -= branchWidth;
         }
     }
     let curve = [
@@ -1738,13 +1879,12 @@ function drawIndentedLink(board, node, child, defaultStroke = null, needDrawUnde
         [beginX, endY - (endNode.hGap * plusMinus[1]) / 5],
         [beginX + (endNode.hGap * plusMinus[0]) / 4, endY],
         [beginX + (endNode.hGap * plusMinus[0] * 3) / 5, endY],
-        isUnderlineShap && needDrawUnderline ? [endX + (endNode.width - endNode.hGap * 2) * plusMinus[0], endY] : [endX, endY],
-        isUnderlineShap && needDrawUnderline ? [endX + (endNode.width - endNode.hGap * 2) * plusMinus[0], endY] : [endX, endY],
-        isUnderlineShap && needDrawUnderline ? [endX + (endNode.width - endNode.hGap * 2) * plusMinus[0], endY] : [endX, endY]
+        isUnderlineShape && needDrawUnderline ? [endX + (endNode.width - endNode.hGap * 2) * plusMinus[0], endY] : [endX, endY],
+        isUnderlineShape && needDrawUnderline ? [endX + (endNode.width - endNode.hGap * 2) * plusMinus[0], endY] : [endX, endY],
+        isUnderlineShape && needDrawUnderline ? [endX + (endNode.width - endNode.hGap * 2) * plusMinus[0], endY] : [endX, endY]
     ];
-    const stroke = defaultStroke || getBranchColorByMindElement(board, child.origin);
     const points = pointsOnBezierCurves(curve);
-    return PlaitBoard.getRoughSVG(board).curve(points, { stroke, strokeWidth });
+    return PlaitBoard.getRoughSVG(board).curve(points, { stroke: branchColor, strokeWidth: branchWidth });
 }
 
 var HorizontalPlacement;
@@ -1859,10 +1999,12 @@ const transformPlacement = (placement, direction) => {
 
 function drawLogicLink(board, node, parent, isHorizontal) {
     const branchColor = getBranchColorByMindElement(board, node.origin);
-    const strokeWidth = node.origin.branchWidth ? node.origin.branchWidth : STROKE_WIDTH;
+    const branchWidth = getBranchWidthByMindElement(board, node.origin);
     const hasStraightLine = !parent.origin.isRoot;
-    const hasUnderlineShape = node.origin.shape === MindNodeShape.underline;
-    const hasUnderlineShapeOfParent = parent.origin.shape === MindNodeShape.underline;
+    const parentShape = getShapeByElement(board, parent.origin);
+    const shape = node.origin.shape ? node.origin.shape : parentShape;
+    const hasUnderlineShape = shape === MindElementShape.underline;
+    const hasUnderlineShapeOfParent = parentShape === MindElementShape.underline;
     const nodeClient = getRectangleByNode(node);
     const parentClient = getRectangleByNode(parent);
     const linkDirection = getLayoutDirection(node, isHorizontal);
@@ -1899,10 +2041,10 @@ function drawLogicLink(board, node, parent, isHorizontal) {
     const underlineEnd = movePoint(endPoint, nodeClient.width, linkDirection);
     const underline = hasUnderlineShape && isHorizontal ? [underlineEnd, underlineEnd, underlineEnd] : [];
     const points = pointsOnBezierCurves([...straightLine, ...curve, ...underline]);
-    return PlaitBoard.getRoughSVG(board).curve(points, { stroke: branchColor, strokeWidth });
+    return PlaitBoard.getRoughSVG(board).curve(points, { stroke: branchColor, strokeWidth: branchWidth });
 }
 
-function getEmojisRectangle(board, element) {
+function getEmojisWidthHeight(board, element) {
     const options = board.getMindOptions();
     const count = element.data.emojis.length;
     const fontSize = getEmojiFontSize(element);
@@ -1919,6 +2061,31 @@ function getEmojiFontSize(element) {
         return 14 + 2;
     }
 }
+function getEmojiRectangle(board, element) {
+    let { x, y } = getRectangleByNode(MindElement.getNode(element));
+    x = x + NodeSpace.getEmojiLeftSpace(board, element);
+    const { width, height } = getEmojisWidthHeight(board, element);
+    return {
+        x,
+        y,
+        width,
+        height
+    };
+}
+function getEmojiForeignRectangle(board, element) {
+    let { x, y } = getRectangleByNode(MindElement.getNode(element));
+    x = x + NodeSpace.getEmojiLeftSpace(board, element);
+    const { width, height } = getEmojisWidthHeight(board, element);
+    return {
+        x,
+        y,
+        width,
+        height: height + NodeSpace.getEmojiTopSpace(element) * 2
+    };
+}
+const isHitEmojis = (board, element, point) => {
+    return RectangleClient.isHit(RectangleClient.toRectangleClient([point, point]), getEmojiRectangle(board, element));
+};
 
 const NodeDefaultSpace = {
     horizontal: {
@@ -1938,26 +2105,30 @@ const RootDefaultSpace = {
         nodeAndText: BASE * 2
     }
 };
-const getHorizontalSpaceBetweenNodeAndText = (element) => {
+const getHorizontalSpaceBetweenNodeAndText = (board, element) => {
     const isMind = PlaitMind.isMind(element);
     const nodeAndText = isMind ? RootDefaultSpace.horizontal.nodeAndText : NodeDefaultSpace.horizontal.nodeAndText;
     return nodeAndText;
 };
-const getHorizontalSpaceEmojiAndText = (element) => {
-    const isMind = PlaitMind.isMind(element);
-    const emojiAndText = isMind ? RootDefaultSpace.horizontal.emojiAndText : NodeDefaultSpace.horizontal.emojiAndText;
-    return emojiAndText;
-};
 const getVerticalSpaceBetweenNodeAndText = (element) => {
     const isMind = PlaitMind.isMind(element);
     const nodeAndText = isMind ? RootDefaultSpace.vertical.nodeAndText : NodeDefaultSpace.vertical.nodeAndText;
     return nodeAndText;
 };
+const getSpaceEmojiAndText = (element) => {
+    const isMind = PlaitMind.isMind(element);
+    const emojiAndText = isMind ? RootDefaultSpace.horizontal.emojiAndText : NodeDefaultSpace.horizontal.emojiAndText;
+    return emojiAndText;
+};
 const NodeSpace = {
     getNodeWidth(board, element) {
-        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(element);
+        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
         if (MindElement.hasEmojis(element)) {
-            return nodeAndText + getEmojisRectangle(board, element).width + getHorizontalSpaceEmojiAndText(element) + element.width + nodeAndText;
+            return (NodeSpace.getEmojiLeftSpace(board, element) +
+                getEmojisWidthHeight(board, element).width +
+                getSpaceEmojiAndText(element) +
+                element.width +
+                nodeAndText);
         }
         return nodeAndText + element.width + nodeAndText;
     },
@@ -1965,31 +2136,32 @@ const NodeSpace = {
         const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
         return nodeAndText + element.height + nodeAndText;
     },
-    getTextHorizontalSpace(board, element) {
-        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(element);
+    getTextLeftSpace(board, element) {
+        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
         if (MindElement.hasEmojis(element)) {
-            return nodeAndText + getEmojisRectangle(board, element).width + getHorizontalSpaceEmojiAndText(element);
+            return NodeSpace.getEmojiLeftSpace(board, element) + getEmojisWidthHeight(board, element).width + getSpaceEmojiAndText(element);
         }
         else {
             return nodeAndText;
         }
     },
-    getTextVerticalSpace(element) {
+    getTextTopSpace(element) {
         const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
         return nodeAndText;
     },
-    getEmojiHorizontalSpace(element) {
-        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(element);
-        return nodeAndText;
+    getEmojiLeftSpace(board, element) {
+        const options = board.getMindOptions();
+        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
+        return nodeAndText - options.emojiPadding;
     },
-    getEmojiVerticalSpace(element) {
+    getEmojiTopSpace(element) {
         const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
         return nodeAndText;
     }
 };
 
 function drawMindNodeRichtext(board, node, viewContainerRef) {
-    const { x, y } = getRichtextRectangleByNode(board, node);
+    const { x, y, width, height } = getRichtextRectangleByNode(board, node);
     const classList = [];
     if (node.origin.isRoot) {
         classList.push('root-node');
@@ -2002,7 +2174,7 @@ function drawMindNodeRichtext(board, node, viewContainerRef) {
         classList.push('child-node');
     }
     // COMPAT: last character can not show in safari browser
-    return drawRichtext(x, y, Math.ceil(node.origin.width), Math.ceil(node.origin.height), node.origin.data.topic, viewContainerRef, classList);
+    return drawRichtext(x, y, width, height, node.origin.data.topic, viewContainerRef, classList);
 }
 function updateMindNodeTopicSize(board, node, g, isEditable) {
     const { x, y, width, height } = getRichtextRectangleByNode(board, node);
@@ -2012,21 +2184,23 @@ function updateMindNodeTopicSize(board, node, g, isEditable) {
     }
     else {
         // COMPAT: last character can not show in safari browser
-        updateForeignObject(g, Math.ceil(node.origin.width), Math.ceil(node.origin.height), x, y);
+        updateForeignObject(g, width, height, x, y);
     }
 }
 function getRichtextRectangleByNode(board, node) {
-    let { x, y, width, height } = getRectangleByNode(node);
-    x = x + NodeSpace.getTextHorizontalSpace(board, node.origin);
-    y = y + NodeSpace.getTextVerticalSpace(node.origin);
-    return { width, height, x, y };
+    let { x, y } = getRectangleByNode(node);
+    x = x + NodeSpace.getTextLeftSpace(board, node.origin);
+    y = y + NodeSpace.getTextTopSpace(node.origin);
+    const width = Math.ceil(node.origin.width);
+    const height = Math.ceil(node.origin.height);
+    return { height, width, x, y };
 }
 
 function drawRectangleNode(board, node) {
     const { x, y, width, height } = getRectangleByNode(node);
-    const fill = node.origin.fill ? node.origin.fill : node.origin.isRoot ? ROOT_NODE_FILL : NODE_FILL;
+    const fill = node.origin.fill ? node.origin.fill : node.origin.isRoot ? DefaultRootStyle.fill : DefaultNodeStyle.fill;
     const stroke = getStrokeByMindElement(board, node.origin);
-    const strokeWidth = node.origin.strokeWidth ? node.origin.strokeWidth : STROKE_WIDTH;
+    const strokeWidth = node.origin.strokeWidth ? node.origin.strokeWidth : DefaultNodeStyle.strokeWidth;
     const nodeG = drawRoundRectangle(PlaitBoard.getRoughSVG(board), x, y, x + width, y + height, {
         stroke,
         strokeWidth,
@@ -2038,6 +2212,8 @@ function drawRectangleNode(board, node) {
 
 function drawAbstractLink(board, node, isHorizontal) {
     const linkPadding = 15;
+    const branchWidth = getAbstractBranchWidth(board, node.origin);
+    const branchColor = getAbstractBranchColor(board, node.origin);
     const parent = node.parent;
     const abstractRectangle = getRectangleByNode(node);
     let includedElements = parent.children.slice(node.origin.start, node.origin.end + 1).map(node => {
@@ -2067,8 +2243,8 @@ function drawAbstractLink(board, node, isHorizontal) {
     let c2 = movePoint(bezierEndPoint, curveDistance, linkDirection);
     let bezierConnectorPoint = movePoint(abstractConnectorPoint, -linkPadding, linkDirection);
     const link = PlaitBoard.getRoughSVG(board).path(`M${bezierBeginPoint[0]},${bezierBeginPoint[1]} Q${c1[0]},${c1[1]} ${bezierConnectorPoint[0]},${bezierConnectorPoint[1]} Q${c2[0]},${c2[1]} ${bezierEndPoint[0]},${bezierEndPoint[1]} M${abstractConnectorPoint[0]},${abstractConnectorPoint[1]} L${bezierConnectorPoint[0]},${bezierConnectorPoint[1]}`, {
-        stroke: GRAY_COLOR,
-        strokeWidth: 2
+        stroke: branchColor,
+        strokeWidth: branchWidth
     });
     return link;
 }
@@ -2114,10 +2290,8 @@ class EmojisDrawer {
         if (MindElement.hasEmojis(element)) {
             this.g = createG();
             this.g.classList.add('emojis');
-            let { x, y } = getRectangleByNode(MindElement.getNode(element));
-            x = x + NodeSpace.getEmojiHorizontalSpace(element);
-            const { width, height } = getEmojisRectangle(this.board, element);
-            const foreignObject = createForeignObject(x, y, width, height + NodeSpace.getEmojiVerticalSpace(element) * 2);
+            const foreignRectangle = getEmojiForeignRectangle(this.board, element);
+            const foreignObject = createForeignObject(foreignRectangle.x, foreignRectangle.y, foreignRectangle.width, foreignRectangle.height);
             this.g.append(foreignObject);
             const container = document.createElement('div');
             container.classList.add('node-emojis-container');
@@ -2126,117 +2300,27 @@ class EmojisDrawer {
                 const drawer = new EmojiDrawer(this.board, this.viewContainerRef);
                 drawer.draw(emojiItem, element);
                 return drawer;
-            });
-            this.emojiDrawers.forEach(drawer => {
-                container.append(drawer.nativeElement);
-            });
-            return this.g;
-        }
-        return undefined;
-    }
-    destroy() {
-        if (this.g) {
-            this.g.remove();
-        }
-        this.emojiDrawers.forEach(drawer => drawer.destroy());
-        this.emojiDrawers = [];
-    }
-}
-
-const setLayout = (board, layout, path) => {
-    correctLogicLayoutNode(board, layout, path);
-    const element = PlaitNode.get(board, path);
-    if (PlaitMind.isMind(element) && isStandardLayout(layout)) {
-        handleAbstractIncluded(board, element);
-    }
-    Transforms.setNode(board, { layout }, path);
-};
-const correctLogicLayoutNode = (board, layout, path) => {
-    const node = PlaitNode.get(board, path);
-    if (node && layout) {
-        node.children?.forEach((value, index) => {
-            if (value.layout) {
-                if ((isHorizontalLogicLayout(layout) && isVerticalLogicLayout(value.layout)) ||
-                    (isVerticalLogicLayout(layout) && isHorizontalLogicLayout(value.layout))) {
-                    Transforms.setNode(board, { layout: null }, [...path, index]);
-                }
-                if (value.children?.length) {
-                    correctLogicLayoutNode(board, layout, [...path, index]);
-                }
-            }
-        });
-    }
-};
-
-const setTopic = (board, element, topic, width, height) => {
-    const newElement = {
-        data: { topic },
-        width: width < NODE_MIN_WIDTH * board.viewport.zoom ? NODE_MIN_WIDTH : width / board.viewport.zoom,
-        height: height / board.viewport.zoom
-    };
-    if (MindElement.hasEmojis(element)) {
-        newElement.data.emojis = element.data.emojis;
-    }
-    const path = PlaitBoard.findPath(board, element);
-    Transforms.setNode(board, newElement, path);
-};
-const setTopicSize = (board, element, width, height) => {
-    const newElement = {
-        width: width < NODE_MIN_WIDTH * board.viewport.zoom ? NODE_MIN_WIDTH : width / board.viewport.zoom,
-        height: height / board.viewport.zoom
-    };
-    const path = PlaitBoard.findPath(board, element);
-    Transforms.setNode(board, newElement, path);
-};
-const addEmoji = (board, element, emojiItem) => {
-    const emojis = element.data.emojis || [];
-    const newEmojis = [...emojis];
-    newEmojis.push(emojiItem);
-    const newElement = {
-        data: { topic: element.data.topic, emojis: newEmojis }
-    };
-    const path = PlaitBoard.findPath(board, element);
-    Transforms.setNode(board, newElement, path);
-};
-const removeEmoji = (board, element, emojiItem) => {
-    const emojis = element.data.emojis.filter(value => value !== emojiItem);
-    const newElement = {
-        data: { topic: element.data.topic }
-    };
-    if (emojis.length > 0) {
-        newElement.data.emojis = emojis;
-    }
-    const path = PlaitBoard.findPath(board, element);
-    Transforms.setNode(board, newElement, path);
-};
-const replaceEmoji = (board, element, oldEmoji, newEmoji) => {
-    const newElement = {
-        data: { topic: element.data.topic }
-    };
-    const newEmojis = element.data.emojis.map(value => {
-        if (value === oldEmoji) {
-            return newEmoji;
+            });
+            this.emojiDrawers.forEach(drawer => {
+                container.append(drawer.nativeElement);
+            });
+            return this.g;
         }
-        return value;
-    });
-    newElement.data.emojis = newEmojis;
-    const path = PlaitBoard.findPath(board, element);
-    Transforms.setNode(board, newElement, path);
-};
-
-const MindTransforms = {
-    setLayout,
-    setTopic,
-    setTopicSize,
-    addEmoji,
-    removeEmoji,
-    replaceEmoji
-};
+        return undefined;
+    }
+    destroy() {
+        if (this.g) {
+            this.g.remove();
+        }
+        this.emojiDrawers.forEach(drawer => drawer.destroy());
+        this.emojiDrawers = [];
+    }
+}
 
 function drawAbstractIncludedOutline(board, roughSVG, element, activeHandlePosition, resizingLocation) {
     const abstractIncludedG = createG();
     const parentElement = MindElement.getParent(element);
-    const nodeLayout = MindQueries.getCorrectLayoutByElement(element);
+    const nodeLayout = MindQueries.getCorrectLayoutByElement(board, element);
     const isHorizontal = isHorizontalLayout(nodeLayout);
     const includedElements = parentElement.children.slice(element.start, element.end + 1);
     let abstractRectangle = getRectangleByElements(board, includedElements, true);
@@ -2316,7 +2400,8 @@ function hasAfterDraw(value) {
 }
 
 function findNewChildNodePath(board, element) {
-    return PlaitBoard.findPath(board, element).concat((element.children || []).filter(child => !AbstractNode.isAbstract(child)).length);
+    const children = getNonAbstractChildren(element);
+    return PlaitBoard.findPath(board, element).concat(children.length);
 }
 function findNewSiblingNodePath(board, element) {
     const path = PlaitBoard.findPath(board, element);
@@ -2344,16 +2429,16 @@ class QuickInsertDrawer extends BaseDrawer {
          *    3. 上、上左、上右
          *    4. 下、下左、下右
          */
-        const shape = getNodeShapeByElement(element);
+        const shape = getShapeByElement(this.board, element);
         // 形状是矩形要偏移边框的线宽
-        const strokeWidth = element.branchWidth ? element.branchWidth : STROKE_WIDTH;
+        const branchWidth = getBranchWidthByMindElement(this.board, element);
         let offsetBorderLineWidth = 0;
-        if (shape === MindNodeShape.roundRectangle && offset === 0) {
-            offsetBorderLineWidth = strokeWidth;
+        if (shape === MindElementShape.roundRectangle && offset === 0) {
+            offsetBorderLineWidth = branchWidth;
         }
         let offsetRootBorderLineWidth = 0;
         if (element.isRoot) {
-            offsetRootBorderLineWidth = strokeWidth;
+            offsetRootBorderLineWidth = branchWidth;
         }
         // 当没有子节点时，需要缩小的偏移量
         const extraOffset = 3;
@@ -2448,21 +2533,21 @@ class QuickInsertDrawer extends BaseDrawer {
                     offsetRootBorderLineWidth
             }
         };
-        if (shape === MindNodeShape.roundRectangle || element.isRoot) {
+        if (shape === MindElementShape.roundRectangle || element.isRoot) {
             underlineCoordinates[MindLayoutType.left].startY -= height * 0.5;
             underlineCoordinates[MindLayoutType.left].endY -= height * 0.5;
             underlineCoordinates[MindLayoutType.right].startY -= height * 0.5;
             underlineCoordinates[MindLayoutType.right].endY -= height * 0.5;
         }
         const branchColor = PlaitMind.isMind(element) ? getNextBranchColor(element) : getBranchColorByMindElement(this.board, element);
-        let nodeLayout = MindQueries.getCorrectLayoutByElement(element);
+        let nodeLayout = MindQueries.getCorrectLayoutByElement(this.board, element);
         if (element.isRoot && isStandardLayout(nodeLayout)) {
             const root = element;
             nodeLayout = root.children.length >= root.rightNodeCount ? MindLayoutType.left : MindLayoutType.right;
         }
         const underlineCoordinate = underlineCoordinates[nodeLayout];
         if (underlineCoordinate) {
-            const underline = PlaitBoard.getRoughSVG(this.board).line(underlineCoordinate.startX, underlineCoordinate.startY, underlineCoordinate.endX, underlineCoordinate.endY, { stroke: branchColor, strokeWidth });
+            const underline = PlaitBoard.getRoughSVG(this.board).line(underlineCoordinate.startX, underlineCoordinate.startY, underlineCoordinate.endX, underlineCoordinate.endY, { stroke: branchColor, strokeWidth: branchWidth });
             const circleCoordinates = {
                 startX: underlineCoordinate.endX,
                 startY: underlineCoordinate.endY
@@ -2540,10 +2625,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         this.emojisDrawer = new EmojisDrawer(this.board, this.viewContainerRef);
         this.quickInsertDrawer = new QuickInsertDrawer(this.board);
         super.ngOnInit();
-        this.node = ELEMENT_TO_NODE.get(this.element);
-        if (!PlaitMind.isMind(this.element)) {
-            this.parent = MindElement.getNode(MindElement.getParent(this.element));
-        }
+        this.node = MindElement.getNode(this.element);
         this.index = NODE_TO_INDEX.get(this.element) || 0;
         this.roughSVG = PlaitBoard.getRoughSVG(this.board);
         this.parentG = PlaitElement.getComponent(MindElement.getRoot(this.board, this.element)).rootG;
@@ -2558,21 +2640,18 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         this.drawQuickInsert();
     }
     onContextChanged(value, previous) {
-        const newNode = ELEMENT_TO_NODE.get(this.element);
-        if (!PlaitMind.isMind(this.element)) {
-            this.parent = MindElement.getNode(MindElement.getParent(this.element));
-        }
+        const newNode = MindElement.getNode(value.element);
         // resolve move node richtext lose issue
         if (this.node !== newNode) {
             if (this.foreignObject && this.foreignObject.children.length <= 0) {
                 this.foreignObject?.appendChild(this.richtextComponentRef?.instance.editable);
             }
         }
-        const isEquals = MindNode.isEquals(this.node, newNode);
+        const isEqualNode = RectangleClient.isEqual(this.node, newNode);
         this.node = newNode;
-        this.drawActiveG();
-        this.updateActiveClass();
-        if (!isEquals) {
+        if (!isEqualNode || value.element !== previous.element) {
+            this.drawActiveG();
+            this.updateActiveClass();
             this.drawShape();
             this.drawLink();
             this.updateRichtext();
@@ -2581,6 +2660,20 @@ class MindNodeComponent extends PlaitPluginElementComponent {
             this.drawQuickInsert();
             this.drawEmojis();
         }
+        else {
+            if (value.selected !== previous.selected) {
+                this.drawActiveG();
+                this.updateActiveClass();
+            }
+            if (!PlaitMind.isMind(value.element)) {
+                const parent = MindElement.getParent(previous.element);
+                const newParent = MindElement.getParent(value.element);
+                const hasSameChildren = parent.children.length === newParent.children.length;
+                if (!hasSameChildren) {
+                    this.drawLink();
+                }
+            }
+        }
     }
     drawEmojis() {
         const g = this.emojisDrawer.drawEmojis(this.element);
@@ -2600,9 +2693,9 @@ class MindNodeComponent extends PlaitPluginElementComponent {
     }
     drawShape() {
         this.destroyShape();
-        const shape = getNodeShapeByElement(this.node.origin);
+        const shape = getShapeByElement(this.board, this.node.origin);
         switch (shape) {
-            case MindNodeShape.roundRectangle:
+            case MindElementShape.roundRectangle:
                 this.shapeG = drawRectangleNode(this.board, this.node);
                 this.g.prepend(this.shapeG);
                 break;
@@ -2617,29 +2710,29 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         }
     }
     drawLink() {
-        if (!this.parent) {
+        if (PlaitMind.isMind(this.element)) {
             return;
         }
+        const parent = MindElement.getParent(this.element);
+        const parentNode = MindElement.getNode(parent);
         if (this.linkG) {
             this.linkG.remove();
         }
-        const layout = MindQueries.getLayoutByElement(this.parent.origin);
+        const layout = MindQueries.getLayoutByElement(parent);
         if (AbstractNode.isAbstract(this.node.origin)) {
             this.linkG = drawAbstractLink(this.board, this.node, isHorizontalLayout(layout));
         }
-        else if (MindElement.isIndentedLayout(this.parent.origin)) {
-            this.linkG = drawIndentedLink(this.board, this.parent, this.node);
+        else if (MindElement.isIndentedLayout(parent)) {
+            this.linkG = drawIndentedLink(this.board, parentNode, this.node);
         }
         else {
-            this.linkG = drawLogicLink(this.board, this.node, this.parent, isHorizontalLayout(layout));
+            this.linkG = drawLogicLink(this.board, this.node, parentNode, isHorizontalLayout(layout));
         }
         this.g.append(this.linkG);
     }
     destroyLine() {
-        if (this.parent) {
-            if (this.linkG) {
-                this.linkG.remove();
-            }
+        if (this.linkG) {
+            this.linkG.remove();
         }
     }
     drawMaskG() {
@@ -2789,9 +2882,9 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         });
         const { x, y, width, height } = getRectangleByNode(this.node);
         const stroke = getBranchColorByMindElement(this.board, this.element);
-        const strokeWidth = this.node.origin.branchWidth ? this.node.origin.branchWidth : STROKE_WIDTH;
+        const branchWidth = getBranchWidthByMindElement(this.board, this.element);
         const extendY = y + height / 2;
-        const nodeLayout = MindQueries.getCorrectLayoutByElement(this.element);
+        const nodeLayout = MindQueries.getCorrectLayoutByElement(this.board, this.element);
         let extendLineXY = [
             [x + width, extendY],
             [x + width + EXTEND_OFFSET, extendY]
@@ -2803,7 +2896,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         let circleOffset = [EXTEND_RADIUS / 2, 0];
         if (isHorizontalLayout(nodeLayout) && !isIndentedLayout(nodeLayout)) {
             extendLineYOffset =
-                getNodeShapeByElement(this.node.origin) === MindNodeShape.roundRectangle
+                getShapeByElement(this.board, this.node.origin) === MindElementShape.roundRectangle
                     ? [0, 0]
                     : [height / 2, height / 2];
             if (isLeftLayout(nodeLayout)) {
@@ -2835,7 +2928,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
             [extendLineXY[1][0] + extendLineXOffset[1], extendLineXY[1][1] + extendLineYOffset[1]]
         ];
         const extendLine = this.roughSVG.line(extendLineXY[0][0], extendLineXY[0][1], extendLineXY[1][0], extendLineXY[1][1], {
-            strokeWidth,
+            strokeWidth: branchWidth,
             stroke
         });
         //绘制箭头
@@ -2872,7 +2965,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
                 const hideCircleG = this.roughSVG.circle(extendLineXY[1][0] + circleOffset[0], extendLineXY[1][1] + circleOffset[1], EXTEND_RADIUS - 1, {
                     fill: '#fff',
                     stroke,
-                    strokeWidth,
+                    strokeWidth: branchWidth,
                     fillStyle: 'solid'
                 });
                 collapseG.appendChild(hideCircleG);
@@ -3109,7 +3202,7 @@ const getLayoutOptions = (board) => {
             }
         },
         getVerticalConnectingPosition(element, parent) {
-            if (element.shape === MindNodeShape.underline && parent && isHorizontalLogicLayout(parent.layout)) {
+            if (element.shape === MindElementShape.underline && parent && isHorizontalLogicLayout(parent.layout)) {
                 return ConnectingPosition.bottom;
             }
             return undefined;
@@ -3178,6 +3271,122 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
                 }]
         }] });
 
+const isValidTarget = (origin, target) => {
+    return origin !== target && !isChildElement(origin, target);
+};
+const addActiveOnDragOrigin = (activeElement, isOrigin = true) => {
+    const activeComponent = PlaitElement.getComponent(activeElement);
+    if (isOrigin) {
+        activeComponent.g.classList.add('dragging-origin');
+    }
+    else {
+        activeComponent.g.classList.add('dragging-child');
+    }
+    !activeElement.isCollapsed &&
+        activeElement.children.forEach(child => {
+            addActiveOnDragOrigin(child, false);
+        });
+};
+const removeActiveOnDragOrigin = (activeElement, isOrigin = true) => {
+    const activeComponent = PlaitElement.getComponent(activeElement);
+    if (isOrigin) {
+        activeComponent.g.classList.remove('dragging-origin');
+    }
+    else {
+        activeComponent.g.classList.remove('dragging-child');
+    }
+    !activeElement.isCollapsed &&
+        activeElement.children.forEach(child => {
+            removeActiveOnDragOrigin(child, false);
+        });
+};
+const updatePathByLayoutAndDropTarget = (targetPath, layout, dropTarget) => {
+    // 上下布局：左右是兄弟节点，上下是子节点
+    if (isVerticalLogicLayout(layout)) {
+        if (isTopLayout(layout) && dropTarget.detectResult === 'top') {
+            targetPath.push(dropTarget.target.children.length);
+        }
+        if (isBottomLayout(layout) && dropTarget.detectResult === 'bottom') {
+            targetPath.push(dropTarget.target.children.length);
+        }
+        // 如果是左，位置不变，右则插入到下一个兄弟节点
+        if (dropTarget.detectResult === 'right') {
+            targetPath = Path.next(targetPath);
+        }
+    }
+    // 水平布局/标准布局：上下是兄弟节点，左右是子节点
+    if (isHorizontalLogicLayout(layout)) {
+        if (dropTarget.detectResult === 'right') {
+            targetPath.push(dropTarget.target.children.length);
+        }
+        if (dropTarget.detectResult === 'left') {
+            targetPath.push(dropTarget.target.children.length);
+        }
+        // 如果是上，位置不变，下插入到下一个兄弟节点
+        if (dropTarget.detectResult === 'bottom') {
+            targetPath = Path.next(targetPath);
+        }
+    }
+    // 缩进布局：上下是兄弟节点，左右是子节点，但上（左上/右上），探测到上是子节点，下则位置不变，反之同理。
+    if (isIndentedLayout(layout)) {
+        if (isTopLayout(layout) && dropTarget.detectResult === 'top') {
+            targetPath = Path.next(targetPath);
+        }
+        if (isBottomLayout(layout) && dropTarget.detectResult === 'bottom') {
+            targetPath = Path.next(targetPath);
+        }
+        if (isLeftLayout(layout) && dropTarget.detectResult === 'left') {
+            targetPath.push(dropTarget.target.children.length);
+        }
+        if (isRightLayout(layout) && dropTarget.detectResult === 'right') {
+            targetPath.push(dropTarget.target.children.length);
+        }
+    }
+    return targetPath;
+};
+const updateRightNodeCount = (board, activeComponent, targetComponent, detectResult) => {
+    let rightNodeCount;
+    const mindElement = findUpElement(targetComponent.node.origin).root;
+    const mindComponent = ELEMENT_TO_COMPONENT.get(mindElement);
+    const activeIndex = mindComponent?.root.children.indexOf(activeComponent.node);
+    const targetIndex = mindComponent?.root.children.indexOf(targetComponent.node);
+    const activeParent = MindElement.getParent(activeComponent.element);
+    const targetParent = MindElement.findParent(targetComponent.element);
+    const isActiveOnRight = activeIndex !== -1 && activeIndex <= activeParent.rightNodeCount - 1;
+    const isTargetOnRight = targetParent && targetIndex !== -1 && targetIndex <= targetParent.rightNodeCount - 1;
+    const isBothOnRight = isActiveOnRight && isTargetOnRight;
+    const rootChildCount = mindComponent.root.children?.length;
+    const rootRightNodeCount = mindComponent?.root.origin.rightNodeCount;
+    if (!isBothOnRight) {
+        if (isActiveOnRight) {
+            rightNodeCount = rootChildCount < rootRightNodeCount ? rootChildCount - 1 : rootRightNodeCount - 1;
+            Transforms.setNode(board, { rightNodeCount }, PlaitBoard.findPath(board, activeParent));
+        }
+        if (isTargetOnRight && detectResult !== 'right') {
+            rightNodeCount = rootChildCount < rootRightNodeCount ? rootRightNodeCount : rootRightNodeCount + 1;
+            const parent = MindElement.getParent(targetComponent.element);
+            Transforms.setNode(board, { rightNodeCount }, PlaitBoard.findPath(board, parent));
+        }
+        //二级子节点拖动到根节点左侧
+        if (targetComponent.node.origin.isRoot && detectResult === 'left' && activeIndex === -1) {
+            rightNodeCount = rootChildCount;
+            Transforms.setNode(board, { rightNodeCount }, PlaitBoard.findPath(board, targetComponent.element));
+        }
+    }
+};
+const IS_DRAGGING = new WeakMap();
+const isDragging = (board) => {
+    return !!IS_DRAGGING.get(board);
+};
+const setIsDragging = (board, state) => {
+    IS_DRAGGING.set(board, state);
+};
+const updateAbstractInDnd = (board, deletableElements, originPath) => {
+    const refs = insertElementHandleAbstract(board, originPath, false);
+    deleteElementHandleAbstract(board, deletableElements, refs);
+    MindTransforms.setAbstractsByRefs(board, refs);
+};
+
 const DRAG_MOVE_BUFFER = 5;
 const withDnd = (board) => {
     const { mousedown, mousemove, globalMouseup, keydown } = board;
@@ -3199,8 +3408,8 @@ const withDnd = (board) => {
                 return;
             }
             if (PlaitMind.isMind(value)) {
-                const mindmapComponent = ELEMENT_TO_COMPONENT.get(value);
-                const root = mindmapComponent?.root;
+                const mindComponent = ELEMENT_TO_COMPONENT.get(value);
+                const root = mindComponent.root;
                 root.eachNode((node) => {
                     if (activeElement) {
                         return;
@@ -3249,7 +3458,6 @@ const withDnd = (board) => {
             const offsetX = endPoint[0] - startPoint[0];
             const offsetY = endPoint[1] - startPoint[1];
             const activeComponent = PlaitElement.getComponent(activeElement);
-            const roughSVG = PlaitBoard.getRoughSVG(board);
             const fakeDraggingNode = {
                 ...activeComponent.node,
                 children: [],
@@ -3259,9 +3467,16 @@ const withDnd = (board) => {
             const textRectangle = getRichtextRectangleByNode(board, activeComponent.node);
             const fakeNodeG = drawRectangleNode(board, fakeDraggingNode);
             const richtextG = activeComponent.richtextG?.cloneNode(true);
-            updateForeignObject(richtextG, textRectangle.width + BASE * 10, textRectangle.height, textRectangle.x + offsetX, textRectangle.y + offsetY);
+            updateForeignObject$1(richtextG, textRectangle.width, textRectangle.height, textRectangle.x + offsetX, textRectangle.y + offsetY);
             fakeDragNodeG?.append(fakeNodeG);
             fakeDragNodeG?.append(richtextG);
+            // draw emojis
+            if (MindElement.hasEmojis(activeElement)) {
+                const fakeEmojisG = activeComponent.emojisDrawer.g.cloneNode(true);
+                const foreignRectangle = getEmojiForeignRectangle(board, activeElement);
+                updateForeignObject$1(fakeEmojisG, foreignRectangle.width, foreignRectangle.height, foreignRectangle.x + offsetX, foreignRectangle.y + offsetY);
+                fakeDragNodeG?.append(fakeEmojisG);
+            }
             // drop position detect
             const { x, y } = getRectangleByNode(fakeDraggingNode);
             const detectCenterPoint = [x + textRectangle.width / 2, y + textRectangle.height / 2];
@@ -3279,7 +3494,7 @@ const withDnd = (board) => {
                         }
                         const directions = directionDetector(node, detectCenterPoint);
                         if (directions) {
-                            detectResult = directionCorrector(node, directions);
+                            detectResult = directionCorrector(board, node, directions);
                         }
                         dropTarget = null;
                         if (detectResult && isValidTarget(activeComponent.node.origin, node.origin)) {
@@ -3289,7 +3504,7 @@ const withDnd = (board) => {
                 }
             });
             if (dropTarget?.target) {
-                dropTarget = readjustmentDropTarget(dropTarget);
+                dropTarget = readjustmentDropTarget(board, dropTarget);
                 drawPlaceholderDropNodeG(board, dropTarget, fakeDropNodeG);
             }
         }
@@ -3301,12 +3516,13 @@ const withDnd = (board) => {
                 const activeComponent = PlaitElement.getComponent(activeElement);
                 const targetComponent = PlaitElement.getComponent(dropTarget.target);
                 let targetPath = PlaitBoard.findPath(board, targetComponent.element);
-                const mindmapElement = findUpElement(dropTarget.target).root;
-                const mindmapComponent = ELEMENT_TO_COMPONENT.get(mindmapElement);
-                const layout = MindQueries.getCorrectLayoutByElement(mindmapComponent?.root.origin);
+                const mindElement = findUpElement(dropTarget.target).root;
+                const mindComponent = ELEMENT_TO_COMPONENT.get(mindElement);
+                const layout = MindQueries.getCorrectLayoutByElement(board, mindComponent?.root.origin);
                 targetPath = updatePathByLayoutAndDropTarget(targetPath, layout, dropTarget);
                 const originPath = PlaitBoard.findPath(board, activeComponent.element);
                 let newElement = { isCollapsed: false }, rightTargetPath = PlaitBoard.findPath(board, targetComponent.element);
+                updateAbstractInDnd(board, [activeElement], targetPath);
                 if (isStandardLayout(layout)) {
                     updateRightNodeCount(board, activeComponent, targetComponent, dropTarget.detectResult);
                 }
@@ -3339,124 +3555,51 @@ const withDnd = (board) => {
     };
     return board;
 };
-const isValidTarget = (origin, target) => {
-    return origin !== target && !isChildElement(origin, target);
-};
-const addActiveOnDragOrigin = (activeElement, isOrigin = true) => {
-    const activeComponent = PlaitElement.getComponent(activeElement);
-    if (isOrigin) {
-        activeComponent.g.classList.add('dragging-origin');
-    }
-    else {
-        activeComponent.g.classList.add('dragging-child');
-    }
-    !activeElement.isCollapsed &&
-        activeElement.children.forEach(child => {
-            addActiveOnDragOrigin(child, false);
-        });
-};
-const removeActiveOnDragOrigin = (activeElement, isOrigin = true) => {
-    const activeComponent = PlaitElement.getComponent(activeElement);
-    if (isOrigin) {
-        activeComponent.g.classList.remove('dragging-origin');
-    }
-    else {
-        activeComponent.g.classList.remove('dragging-child');
-    }
-    !activeElement.isCollapsed &&
-        activeElement.children.forEach(child => {
-            removeActiveOnDragOrigin(child, false);
-        });
-};
-const updatePathByLayoutAndDropTarget = (targetPath, layout, dropTarget) => {
-    // 上下布局：左右是兄弟节点，上下是子节点
-    if (isVerticalLogicLayout(layout)) {
-        if (isTopLayout(layout) && dropTarget.detectResult === 'top') {
-            targetPath.push(dropTarget.target.children.length);
-        }
-        if (isBottomLayout(layout) && dropTarget.detectResult === 'bottom') {
-            targetPath.push(dropTarget.target.children.length);
-        }
-        // 如果是左，位置不变，右则插入到下一个兄弟节点
-        if (dropTarget.detectResult === 'right') {
-            targetPath = Path.next(targetPath);
-        }
-    }
-    // 水平布局/标准布局：上下是兄弟节点，左右是子节点
-    if (isHorizontalLogicLayout(layout)) {
-        if (dropTarget.detectResult === 'right') {
-            targetPath.push(dropTarget.target.children.length);
-        }
-        if (dropTarget.detectResult === 'left') {
-            targetPath.push(dropTarget.target.children.length);
-        }
-        // 如果是上，位置不变，下插入到下一个兄弟节点
-        if (dropTarget.detectResult === 'bottom') {
-            targetPath = Path.next(targetPath);
-        }
-    }
-    // 缩进布局：上下是兄弟节点，左右是子节点，但上（左上/右上），探测到上是子节点，下则位置不变，反之同理。
-    if (isIndentedLayout(layout)) {
-        if (isTopLayout(layout) && dropTarget.detectResult === 'top') {
-            targetPath = Path.next(targetPath);
-        }
-        if (isBottomLayout(layout) && dropTarget.detectResult === 'bottom') {
-            targetPath = Path.next(targetPath);
-        }
-        if (isLeftLayout(layout) && dropTarget.detectResult === 'left') {
-            targetPath.push(dropTarget.target.children.length);
-        }
-        if (isRightLayout(layout) && dropTarget.detectResult === 'right') {
-            targetPath.push(dropTarget.target.children.length);
-        }
-    }
-    return targetPath;
-};
-const updateRightNodeCount = (board, activeComponent, targetComponent, detectResult) => {
-    let rightNodeCount;
-    const mindmapElement = findUpElement(targetComponent.node.origin).root;
-    const mindmapComponent = ELEMENT_TO_COMPONENT.get(mindmapElement);
-    const activeIndex = mindmapComponent?.root.children.indexOf(activeComponent.node);
-    const targetIndex = mindmapComponent?.root.children.indexOf(targetComponent.node);
-    const isActiveOnRight = activeIndex !== -1 && activeIndex <= activeComponent.parent.origin.rightNodeCount - 1;
-    const isTargetOnRight = targetComponent.parent && targetIndex !== -1 && targetIndex <= targetComponent.parent.origin.rightNodeCount - 1;
-    const isBothOnRight = isActiveOnRight && isTargetOnRight;
-    const rootChildCount = mindmapComponent.root.children?.length;
-    const rootRightNodeCount = mindmapComponent?.root.origin.rightNodeCount;
-    if (!isBothOnRight) {
-        if (isActiveOnRight) {
-            rightNodeCount = rootChildCount < rootRightNodeCount ? rootChildCount - 1 : rootRightNodeCount - 1;
-            Transforms.setNode(board, { rightNodeCount }, PlaitBoard.findPath(board, activeComponent.parent.origin));
-        }
-        if (isTargetOnRight && detectResult !== 'right') {
-            rightNodeCount = rootChildCount < rootRightNodeCount ? rootRightNodeCount : rootRightNodeCount + 1;
-            Transforms.setNode(board, { rightNodeCount }, PlaitBoard.findPath(board, targetComponent.parent.origin));
-        }
-        //二级子节点拖动到根节点左侧
-        if (targetComponent.node.origin.isRoot && detectResult === 'left' && activeIndex === -1) {
-            rightNodeCount = rootChildCount;
-            Transforms.setNode(board, { rightNodeCount }, PlaitBoard.findPath(board, targetComponent.element));
-        }
-    }
-};
-const IS_DRAGGING = new WeakMap();
-const isDragging = (board) => {
-    return !!IS_DRAGGING.get(board);
-};
-const setIsDragging = (board, state) => {
-    IS_DRAGGING.set(board, state);
-};
 
 const buildClipboardData = (board, selectedElements) => {
     let result = [];
-    const selectedMindNodes = selectedElements.map(value => MindElement.getNode(value));
-    const nodesRectangle = getRectangleByElements(board, selectedElements, true);
-    selectedElements.forEach((node, index) => {
+    // get overall abstract
+    const overallAbstracts = getOverallAbstracts(board, selectedElements);
+    // keep correct order
+    const newSelectedElements = selectedElements.filter((value) => !overallAbstracts.includes(value));
+    newSelectedElements.push(...overallAbstracts);
+    // get correct start and end in selected elements
+    function getCorrectStartEnd(abstract) {
+        const parent = MindElement.getParent(abstract);
+        const startElement = parent.children[abstract.start];
+        const index = selectedElements.indexOf(startElement);
+        return { start: index, end: index + (abstract.end - abstract.start) };
+    }
+    const selectedMindNodes = newSelectedElements.map(value => MindElement.getNode(value));
+    const nodesRectangle = getRectangleByElements(board, newSelectedElements, true);
+    newSelectedElements.forEach((element, index) => {
+        // handle relative location
         const nodeRectangle = getRectangleByNode(selectedMindNodes[index]);
-        result.push({
-            ...node,
-            points: [[nodeRectangle.x - nodesRectangle.x, nodeRectangle.y - nodesRectangle.y]]
-        });
+        const points = [[nodeRectangle.x - nodesRectangle.x, nodeRectangle.y - nodesRectangle.y]];
+        // handle invalid abstract
+        if (AbstractNode.isAbstract(element) && overallAbstracts.includes(element)) {
+            const { start, end } = getCorrectStartEnd(element);
+            result.push({
+                ...element,
+                points,
+                start,
+                end
+            });
+        }
+        else {
+            if (AbstractNode.isAbstract(element)) {
+                let newElement = { ...element, points };
+                delete newElement.start;
+                delete newElement.end;
+                result.push(newElement);
+            }
+            else {
+                result.push({
+                    ...element,
+                    points: points
+                });
+            }
+        }
     });
     return result;
 };
@@ -3482,17 +3625,22 @@ const insertClipboardData = (board, elements, targetPoint) => {
     let newElement, path;
     const selectedElements = getSelectedElements(board);
     let newELements = [];
+    const hasTargetParent = selectedElements.length === 1;
+    const targetParent = selectedElements[0];
+    const targetParentPath = targetParent && PlaitBoard.findPath(board, targetParent);
+    const nonAbstractChildrenLength = targetParent && getNonAbstractChildren(targetParent).length;
     elements.forEach((item, index) => {
         newElement = copyNewNode(item);
-        if (selectedElements.length === 1) {
+        if (hasTargetParent) {
             if (item.isRoot) {
                 newElement = transformRootToNode(board, newElement);
             }
-            if (AbstractNode.isAbstract(item)) {
-                newElement = transformAbstractToNode(newElement);
+            // handle abstract start and end
+            if (AbstractNode.isAbstract(newElement)) {
+                newElement.start = newElement.start + nonAbstractChildrenLength;
+                newElement.end = newElement.end + nonAbstractChildrenLength;
             }
-            const selectedElementPath = PlaitBoard.findPath(board, selectedElements[0]);
-            path = selectedElementPath.concat((selectedElements[0].children || []).length + index);
+            path = [...targetParentPath, nonAbstractChildrenLength + index];
         }
         else {
             const point = [targetPoint[0] + item.points[0][0], targetPoint[1] + item.points[0][1]];
@@ -3552,7 +3700,7 @@ const withAbstract = (board) => {
             event.preventDefault();
             const abstractComponent = PlaitElement.getComponent(activeAbstractElement);
             const element = abstractComponent.element;
-            const nodeLayout = MindQueries.getCorrectLayoutByElement(activeAbstractElement);
+            const nodeLayout = MindQueries.getCorrectLayoutByElement(board, activeAbstractElement);
             const isHorizontal = isHorizontalLayout(nodeLayout);
             const parentElement = MindElement.getParent(element);
             let children = parentElement.children;
@@ -3655,7 +3803,11 @@ const withMind = (board) => {
     board.isHitSelection = (element, range) => {
         if (MindElement.isMindElement(board, element) && board.selection) {
             const client = getRectangleByNode(MindElement.getNode(element));
-            return RectangleClient.isHit(RectangleClient.toRectangleClient([range.anchor, range.focus]), client);
+            const isHit = RectangleClient.isHit(RectangleClient.toRectangleClient([range.anchor, range.focus]), client);
+            if (isHit && MindElement.hasEmojis(element) && Selection.isCollapsed(range) && isHitEmojis(board, element, range.anchor)) {
+                return false;
+            }
+            return isHit;
         }
         return isHitSelection(element, range);
     };
@@ -3692,7 +3844,8 @@ const withMind = (board) => {
                     if (shouldChangeRightNodeCount(selectedElement)) {
                         changeRightNodeCount(board, selectedElementPath.slice(0, 1), 1);
                     }
-                    insertSiblingElementHandleAbstract(board, selectedElement);
+                    const abstractRefs = insertElementHandleAbstract(board, Path.next(selectedElementPath));
+                    MindTransforms.setAbstractsByRefs(board, abstractRefs);
                     insertMindElement(board, selectedElement, findNewSiblingNodePath(board, selectedElement));
                 }
                 return;
@@ -3700,31 +3853,32 @@ const withMind = (board) => {
             if (hotkeys.isDeleteBackward(event) || hotkeys.isDeleteForward(event)) {
                 event.preventDefault();
                 deleteSelectedELements(board, selectedElements);
-                let lastNode = null;
-                const firstLevelElements = filterChildElement(selectedElements);
+                let activeElement;
+                const firstLevelElements = getFirstLevelElement(selectedElements);
+                if (AbstractNode.isAbstract(firstLevelElements[0])) {
+                    const parent = MindElement.getParent(firstLevelElements[0]);
+                    activeElement = parent.children[firstLevelElements[0].start];
+                }
                 const firstElement = firstLevelElements[0];
-                const firstComponent = PlaitElement.getComponent(firstElement);
-                const nodeIndex = firstComponent?.parent?.children.findIndex(item => item.origin.id === firstElement.id);
-                const isSameParent = firstLevelElements.every(element => {
-                    return findParentElement(element) && findParentElement(firstLevelElements[0]) === findParentElement(element);
+                const firstElementParent = MindElement.findParent(firstElement);
+                const hasSameParent = firstLevelElements.every(element => {
+                    return MindElement.findParent(element) === firstElementParent;
                 });
-                if (isSameParent) {
-                    const childCount = firstComponent.parent?.children.length - firstLevelElements.length;
-                    if (childCount === 0) {
-                        lastNode = firstComponent?.parent;
+                if (firstElementParent && hasSameParent && !activeElement) {
+                    const firstElementIndex = firstElementParent.children.indexOf(firstElement);
+                    const childrenCount = firstElementParent.children.length;
+                    // active parent element
+                    if (childrenCount === firstLevelElements.length) {
+                        activeElement = firstElementParent;
                     }
-                    else if (nodeIndex === 0) {
-                        lastNode = firstComponent?.parent.children[firstLevelElements.length];
-                    }
-                    else if (nodeIndex > 0) {
-                        lastNode = firstComponent?.parent.children[nodeIndex - 1];
+                    else {
+                        if (firstElementIndex > 0) {
+                            activeElement = firstElementParent.children[firstElementIndex - 1];
+                        }
                     }
                 }
-                if (firstLevelElements.length === 1 && AbstractNode.isAbstract(firstElement)) {
-                    lastNode = firstComponent.parent.children[firstElement.start];
-                }
-                if (lastNode) {
-                    addSelectedElement(board, lastNode.origin);
+                if (activeElement) {
+                    addSelectedElement(board, activeElement);
                 }
                 return;
             }
@@ -3751,8 +3905,8 @@ const withMind = (board) => {
         const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
         board.children
             .filter(value => PlaitMind.isMind(value))
-            .forEach(mindmap => {
-            depthFirstRecursion(mindmap, node => {
+            .forEach(mindMap => {
+            depthFirstRecursion(mindMap, node => {
                 if (!PlaitBoard.hasBeenTextEditing(board) && hitMindElement(board, point, node)) {
                     enterNodeEditing(node);
                 }
@@ -3764,7 +3918,7 @@ const withMind = (board) => {
         dblclick(event);
     };
     board.setFragment = (data) => {
-        const selectedElements = filterChildElement(getSelectedElements(board));
+        const selectedElements = getFirstLevelElement(getSelectedElements(board));
         if (selectedElements.length) {
             const elements = buildClipboardData(board, selectedElements);
             setClipboardData(data, elements);
@@ -3838,5 +3992,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, AbstractHandlePosition, AbstractResizeState, BASE, COLORS, ELEMENT_TO_NODE, EXTEND_OFFSET, EXTEND_RADIUS, GRAY_COLOR, LayoutDirection, LayoutDirectionsMap, MAX_RADIUS, MINDMAP_KEY, MindElement, MindEmojiBaseComponent, MindModule, MindNode, MindNodeComponent, MindNodeShape, MindQueries, MindTransforms, NODE_FILL, NODE_MIN_WIDTH, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, QUICK_INSERT_CIRCLE_COLOR, QUICK_INSERT_CIRCLE_OFFSET, QUICK_INSERT_INNER_CROSS_COLOR, ROOT_NODE_FILL, ROOT_NODE_STROKE, ROOT_TOPIC_FONT_SIZE, STROKE_WIDTH, TOPIC_COLOR, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, TRANSPARENT, canSetAbstract, changeRightNodeCount, copyNewNode, correctLayoutByDirection, createDefaultMindMapElement, createMindElement, deleteSelectedELements, directionCorrector, directionDetector, divideElementByParent, drawCurvePlaceholderDropNodeG, drawIndentNodeG, drawPlaceholderDropNodeG, drawStraightDropNodeG, extractNodesText, filterChildElement, findLastChild, findLocationLeftIndex, findParentElement, findUpElement, getAbstractHandleRectangle, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getChildrenCount, getCorrespondingAbstract, getDefaultLayout, getEmojiFontSize, getEmojisRectangle, getHitAbstractHandle, getHorizontalFakeY, getInCorrectLayoutDirection, getIndentedFakePoint, getLayoutDirection$1 as getLayoutDirection, getLayoutReverseDirection, getLocationScope, getNextBranchColor, getNodeShapeByElement, getRectangleByNode, getRectangleByResizingLocation, getRootLayout, getStrokeByMindElement, handleAbstractIncluded, handleTouchedAbstract, hitMindElement, insertAbstractNode, insertMindElement, insertSiblingElementHandleAbstract, isChildElement, isChildRight, isChildUp, isCorrectLayout, isMixedLayout, isSetAbstract, isVirtualKey, moveAbstractPosition, readjustmentDropTarget, separateChildren, setAbstract, setAbstractByElements, shouldChangeRightNodeCount, transformAbstractToNode, transformNodeToRoot, transformRootToNode, withExtendMind, withMind };
+export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, AbstractHandlePosition, AbstractResizeState, BASE, BRANCH_COLORS, BRANCH_WIDTH, DefaultAbstractNodeStyle, DefaultNodeStyle, DefaultRootStyle, ELEMENT_TO_NODE, EXTEND_OFFSET, EXTEND_RADIUS, GRAY_COLOR, LayoutDirection, LayoutDirectionsMap, MindElement, MindElementShape, MindEmojiBaseComponent, MindModule, MindNode, MindNodeComponent, MindQueries, MindTransforms, NODE_MIN_WIDTH, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, QUICK_INSERT_CIRCLE_COLOR, QUICK_INSERT_CIRCLE_OFFSET, QUICK_INSERT_INNER_CROSS_COLOR, ROOT_TOPIC_FONT_SIZE, STROKE_WIDTH, TOPIC_COLOR, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, TRANSPARENT, canSetAbstract, changeRightNodeCount, copyNewNode, correctLayoutByDirection, createDefaultMindMapElement, createMindElement, deleteElementHandleAbstract, deleteSelectedELements, directionCorrector, directionDetector, divideElementByParent, drawCurvePlaceholderDropNodeG, drawIndentNodeG, drawPlaceholderDropNodeG, drawStraightDropNodeG, extractNodesText, findLastChild, findLocationLeftIndex, findUpElement, getAbstractBranchColor, getAbstractBranchWidth, getAbstractHandleRectangle, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getBranchWidthByMindElement, getChildrenCount, getCorrespondingAbstract, getDefaultBranchColor, getDefaultBranchColorByIndex, getDefaultLayout, getEmojiFontSize, getEmojiForeignRectangle, getEmojiRectangle, getEmojisWidthHeight, getFirstLevelElement, getHitAbstractHandle, getHorizontalFakeY, getInCorrectLayoutDirection, getIndentedFakePoint, getLayoutDirection$1 as getLayoutDirection, getLayoutReverseDirection, getLocationScope, getNextBranchColor, getOverallAbstracts, getRectangleByNode, getRectangleByResizingLocation, getRootLayout, getShapeByElement, getStrokeByMindElement, handleTouchedAbstract, hitMindElement, insertElementHandleAbstract, insertMindElement, isChildElement, isChildRight, isChildUp, isCorrectLayout, isHitEmojis, isMixedLayout, isSetAbstract, isVirtualKey, readjustmentDropTarget, separateChildren, shouldChangeRightNodeCount, transformAbstractToNode, transformNodeToRoot, transformRootToNode, withExtendMind, withMind };
 //# sourceMappingURL=plait-mind.mjs.map