@plait/mind 0.2.0-next.8 → 0.2.0-next.9

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, CLIP_BOARD_FORMAT_KEY, BOARD_TO_HOST, 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 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;
     }
-    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);
-    }
-    // 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;
+    }
+    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 (parentComponent && parentComponent.node.origin.isRoot) {
+    if (layout === MindLayoutType.standard || !layout) {
         return correctRootLayout;
     }
-    if (layout) {
+    else {
         const incorrectDirection = getInCorrectLayoutDirection(correctRootLayout, layout);
         if (incorrectDirection) {
             return correctLayoutByDirection(layout, incorrectDirection);
@@ -110,16 +121,13 @@ 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);
     while (parent) {
@@ -131,15 +139,10 @@ const getBranchLayouts = (element) => {
     return layouts;
 };
 
-/**
- *  get available sub layouts by element
- * @param element
- * @returns MindLayoutType[]
- */
-const getAvailableSubLayoutsByElement = (element) => {
+const getAvailableSubLayoutsByElement = (board, element) => {
     const parentElement = findParentElement(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 = MindElement.getParent(element);
+    if (AbstractNode.isAbstract(element)) {
+        return getAbstractLayout(getLayoutByElement(parent));
+    }
+    if (parent) {
+        return getLayoutByElement(parent);
     }
-    return getLayoutParentByElement(element);
+    return getDefaultLayout();
 };
 
 const MindQueries = {
     getAvailableSubLayoutsByElement,
-    getLayoutParentByElement,
     getBranchLayouts,
     getLayoutByElement,
     getCorrectLayoutByElement
@@ -257,6 +348,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) {
@@ -311,109 +407,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);
@@ -433,22 +426,146 @@ const separateChildren = (parentElement) => {
             leftChildren.push(child);
             continue;
         }
-        if (i < rightNodeCount) {
-            rightChildren.push(child);
+        if (i < rightNodeCount) {
+            rightChildren.push(child);
+        }
+        else {
+            leftChildren.push(child);
+        }
+    }
+    return { leftChildren, rightChildren };
+};
+const isSetAbstract = (element) => {
+    const parent = MindElement.getParent(element);
+    return !!getCorrespondingAbstract(parent, element);
+};
+const canSetAbstract = (element) => {
+    return !PlaitElement.isRootElement(element) && !AbstractNode.isAbstract(element) && !isSetAbstract(element);
+};
+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 {
-            leftChildren.push(child);
+            Transforms.setNode(board, { start, end }, path);
         }
-    }
-    return { leftChildren, rightChildren };
-};
-const isSetAbstract = (element) => {
-    return !!getCorrespondingAbstract(element);
+    });
 };
-const canSetAbstract = (element) => {
-    return !PlaitElement.isRootElement(element) && !AbstractNode.isAbstract(element) && !isSetAbstract(element);
+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 setAbstract = (board, elements) => {
+const insertAbstract = (board, elements) => {
     let elementGroup = filterChildElement(elements);
     const { parentElements, abstractIncludedGroups } = divideElementByParent(elementGroup);
     abstractIncludedGroups.forEach((group, index) => {
@@ -478,52 +595,107 @@ const setAbstractByElements = (board, groupParent, group) => {
 };
 const insertAbstractNode = (board, path, start, end) => {
     const mindElement = createMindElement('概要', 28, 20, {
-        strokeColor: GRAY_COLOR,
-        branchColor: GRAY_COLOR
+        strokeColor: DefaultAbstractNodeStyle.strokeColor,
+        strokeWidth: DefaultAbstractNodeStyle.branchWidth,
+        branchColor: DefaultAbstractNodeStyle.branchColor,
+        branchWidth: DefaultAbstractNodeStyle.branchWidth
     });
     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 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 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 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 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 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 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 abstracts = getBehindAbstracts(selectedElement);
-    if (abstracts.length) {
-        moveAbstractPosition(board, abstracts, 1);
+    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 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) {
@@ -663,13 +835,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 +878,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 +908,23 @@ const findLastChild = (child) => {
     return result;
 };
 const deleteSelectedELements = (board, selectedElements) => {
-    //翻转，从下到上修改，防止找不到 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);
+    const abstractRefs = deleteElementHandleAbstract(board, deletableElements);
+    MindTransforms.setAbstractsByRefs(board, abstractRefs);
+    //翻转，从下到上修改，防止找不到 path
+    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 = [];
@@ -820,9 +955,12 @@ const getNodeShapeByElement = (element) => {
         }
         parent = findParentElement(parent);
     }
-    return MindNodeShape.roundRectangle;
+    return MindElementShape.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);
@@ -834,19 +972,40 @@ const getBranchColorByMindElement = (board, element) => {
     const branch = ancestors[ancestors.length - 2];
     if (branch) {
         const index = root.children.indexOf(branch);
-        const length = COLORS.length;
+        const length = BRANCH_COLORS.length;
         const remainder = index % length;
-        return COLORS[remainder];
+        return BRANCH_COLORS[remainder];
     }
     else {
         throw new Error('root element should not have branch color');
     }
 };
+const getBranchWidthByMindElement = (board, element) => {
+    const ancestors = MindElement.getAncestors(board, element);
+    ancestors.unshift(element);
+    const ancestor = ancestors.find(value => value.branchColor);
+    if (ancestor && ancestor.branchWidth) {
+        return ancestor.branchWidth;
+    }
+    return BRANCH_WIDTH;
+};
+const getAbstractBranchWidth = (board, element) => {
+    if (!isNullOrUndefined(element.branchWidth)) {
+        return element.branchWidth;
+    }
+    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;
+    const length = BRANCH_COLORS.length;
     const remainder = index % length;
-    return COLORS[remainder];
+    return BRANCH_COLORS[remainder];
 };
 
 const getStrokeByMindElement = (board, element) => {
@@ -860,12 +1019,12 @@ const getStrokeByMindElement = (board, element) => {
     const branch = ancestors[ancestors.length - 2];
     if (branch) {
         const index = root.children.indexOf(branch);
-        const length = COLORS.length;
+        const length = BRANCH_COLORS.length;
         const remainder = index % length;
-        return COLORS[remainder];
+        return BRANCH_COLORS[remainder];
     }
     else {
-        return ROOT_NODE_STROKE;
+        return DefaultRootStyle.strokeColor;
     }
 };
 
@@ -883,7 +1042,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 +1054,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) {
+            getNodeShapeByElement(node.origin) === MindElementShape.underline) {
             if (isChildRight(node, child)) {
                 beginY = node.y + node.height - node.vGap;
             }
@@ -970,7 +1129,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],
@@ -1046,8 +1205,8 @@ const drawPlaceholderDropNodeG = (board, dropTarget, 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)) {
@@ -1178,8 +1337,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 = [
@@ -1389,29 +1548,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 +1601,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 +1646,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 +1670,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 +1783,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 +1870,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 = getNodeShapeByElement(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 +1899,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 +2019,10 @@ 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 hasUnderlineShape = node.origin.shape === MindElementShape.underline;
+    const hasUnderlineShapeOfParent = parent.origin.shape === MindElementShape.underline;
     const nodeClient = getRectangleByNode(node);
     const parentClient = getRectangleByNode(parent);
     const linkDirection = getLayoutDirection(node, isHorizontal);
@@ -1899,7 +2059,7 @@ 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) {
@@ -2024,9 +2184,9 @@ function getRichtextRectangleByNode(board, node) {
 
 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 +2198,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 +2229,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;
 }
@@ -2123,120 +2285,30 @@ class EmojisDrawer {
             container.classList.add('node-emojis-container');
             foreignObject.append(container);
             this.emojiDrawers = element.data.emojis.map(emojiItem => {
-                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 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;
     }
-    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;
+    destroy() {
+        if (this.g) {
+            this.g.remove();
         }
-        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
-};
+        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 +2388,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);
@@ -2346,14 +2419,14 @@ class QuickInsertDrawer extends BaseDrawer {
          */
         const shape = getNodeShapeByElement(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 +2521,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
@@ -2602,7 +2675,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         this.destroyShape();
         const shape = getNodeShapeByElement(this.node.origin);
         switch (shape) {
-            case MindNodeShape.roundRectangle:
+            case MindElementShape.roundRectangle:
                 this.shapeG = drawRectangleNode(this.board, this.node);
                 this.g.prepend(this.shapeG);
                 break;
@@ -2789,9 +2862,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 +2876,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         let circleOffset = [EXTEND_RADIUS / 2, 0];
         if (isHorizontalLayout(nodeLayout) && !isIndentedLayout(nodeLayout)) {
             extendLineYOffset =
-                getNodeShapeByElement(this.node.origin) === MindNodeShape.roundRectangle
+                getNodeShapeByElement(this.node.origin) === MindElementShape.roundRectangle
                     ? [0, 0]
                     : [height / 2, height / 2];
             if (isLeftLayout(nodeLayout)) {
@@ -2835,7 +2908,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 +2945,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 +3182,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 +3251,119 @@ 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 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 = 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, 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 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;
@@ -3279,7 +3465,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 +3475,7 @@ const withDnd = (board) => {
                 }
             });
             if (dropTarget?.target) {
-                dropTarget = readjustmentDropTarget(dropTarget);
+                dropTarget = readjustmentDropTarget(board, dropTarget);
                 drawPlaceholderDropNodeG(board, dropTarget, fakeDropNodeG);
             }
         }
@@ -3301,12 +3487,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 +3526,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 +3596,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 +3671,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;
@@ -3692,7 +3811,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;
@@ -3838,5 +3958,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, filterChildElement, findLastChild, findLocationLeftIndex, findParentElement, findUpElement, getAbstractBranchColor, getAbstractBranchWidth, getAbstractHandleRectangle, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getBranchWidthByMindElement, getChildrenCount, getCorrespondingAbstract, getDefaultLayout, getEmojiFontSize, getEmojisRectangle, getHitAbstractHandle, getHorizontalFakeY, getInCorrectLayoutDirection, getIndentedFakePoint, getLayoutDirection$1 as getLayoutDirection, getLayoutReverseDirection, getLocationScope, getNextBranchColor, getNodeShapeByElement, getOverallAbstracts, getRectangleByNode, getRectangleByResizingLocation, getRootLayout, getStrokeByMindElement, handleTouchedAbstract, hitMindElement, insertElementHandleAbstract, insertMindElement, isChildElement, isChildRight, isChildUp, isCorrectLayout, isMixedLayout, isSetAbstract, isVirtualKey, readjustmentDropTarget, separateChildren, shouldChangeRightNodeCount, transformAbstractToNode, transformNodeToRoot, transformRootToNode, withExtendMind, withMind };
 //# sourceMappingURL=plait-mind.mjs.map