@plait/mind 0.2.2 → 0.3.1

package/fesm2020/plait-mind.mjs

@@ -1,16 +1,16 @@
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, NgModule, Directive, Input } from '@angular/core';
 import * as i2 from '@plait/core';
-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 { PlaitBoard, PlaitNode, NODE_TO_PARENT, Path, distanceBetweenPointAndRectangle, RectangleClient, PlaitElement, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, depthFirstRecursion, drawRoundRectangle, createG, getRectangleByElements, getSelectedElements, drawAbstractRoundRectangle, PlaitPluginElementComponent, PlaitPointerType, NODE_TO_INDEX, createText, IS_TEXT_EDITABLE, MERGING, transformPoint, toPoint, PlaitModule, distanceBetweenPointAndPoint, CLIP_BOARD_FORMAT_KEY, BOARD_TO_HOST, throttleRAF, updateForeignObject as updateForeignObject$1, BoardTransforms, Selection, removeSelectedElement, PlaitHistoryBoard, hotkeys } from '@plait/core';
+import { MindLayoutType, AbstractNode, getAbstractLayout, isIndentedLayout, isStandardLayout, isLeftLayout, isRightLayout, getNonAbstractChildren, isTopLayout, isVerticalLogicLayout, isHorizontalLogicLayout, isBottomLayout, isHorizontalLayout, getCorrectStartEnd, ConnectingPosition, GlobalLayout } from '@plait/layouts';
+import { getSizeByText, ROOT_DEFAULT_HEIGHT, TEXT_DEFAULT_HEIGHT, updateForeignObject, drawRichtext, createForeignObject, updateRichText, setFullSelectionAndFocus, getRichtextContentSize, hasEditableTarget, RichtextModule } from '@plait/richtext';
 import { fromEvent, Subject, timer } from 'rxjs';
 import { take, takeUntil, filter, debounceTime } from 'rxjs/operators';
 import { Node, Path as Path$1, Editor, Operation } from 'slate';
 import { pointsOnBezierCurves } from 'points-on-curve';
 import { isKeyHotkey } from 'is-hotkey';
 import * as i1 from '@angular/common';
-import { BrowserModule } from '@angular/platform-browser';
+import { CommonModule } from '@angular/common';
 
 const ELEMENT_TO_NODE = new WeakMap();
 
@@ -56,27 +56,42 @@ const ABSTRACT_INCLUDED_OUTLINE_OFFSET = 3.5;
 const ABSTRACT_HANDLE_LENGTH = 10;
 const ABSTRACT_HANDLE_MASK_WIDTH = 8;
 
-function getRectangleByNode(node) {
-    const x = node.x + node.hGap;
-    let y = node.y + node.vGap;
-    const width = node.width - node.hGap * 2;
-    const height = node.height - node.vGap * 2;
-    return {
-        x,
-        y,
-        width,
-        height
-    };
-}
-function hitMindElement(board, point, element) {
-    const node = ELEMENT_TO_NODE.get(element);
-    if (node && distanceBetweenPointAndRectangle(point[0], point[1], getRectangleByNode(node)) === 0) {
-        return true;
-    }
-    else {
-        return false;
+const MindNode = {
+    get(root, path) {
+        let node = root;
+        for (let i = 0; i < path.length; i++) {
+            const p = path[i];
+            if (!node || !node.children || !node.children[p]) {
+                throw new Error(`Cannot find a descendant at path [${path}]`);
+            }
+            node = node.children[p];
+        }
+        return node;
     }
-}
+};
+
+var LayoutDirection;
+(function (LayoutDirection) {
+    LayoutDirection["top"] = "top";
+    LayoutDirection["right"] = "right";
+    LayoutDirection["bottom"] = "bottom";
+    LayoutDirection["left"] = "left";
+})(LayoutDirection || (LayoutDirection = {}));
+const LayoutDirectionsMap = {
+    [MindLayoutType.right]: [LayoutDirection.right],
+    [MindLayoutType.left]: [LayoutDirection.left],
+    [MindLayoutType.upward]: [LayoutDirection.top],
+    [MindLayoutType.downward]: [LayoutDirection.bottom],
+    [MindLayoutType.rightBottomIndented]: [LayoutDirection.right, LayoutDirection.bottom],
+    [MindLayoutType.rightTopIndented]: [LayoutDirection.right, LayoutDirection.top],
+    [MindLayoutType.leftBottomIndented]: [LayoutDirection.left, LayoutDirection.bottom],
+    [MindLayoutType.leftTopIndented]: [LayoutDirection.left, LayoutDirection.top]
+};
+
+var MindPointerType;
+(function (MindPointerType) {
+    MindPointerType["mind"] = "mind";
+})(MindPointerType || (MindPointerType = {}));
 
 /**
  * get correctly layout：
@@ -368,396 +383,172 @@ var MindElementShape;
     MindElementShape["underline"] = "underline";
 })(MindElementShape || (MindElementShape = {}));
 
-const MindNode = {
-    get(root, path) {
-        let node = root;
-        for (let i = 0; i < path.length; i++) {
-            const p = path[i];
-            if (!node || !node.children || !node.children[p]) {
-                throw new Error(`Cannot find a descendant at path [${path}]`);
-            }
-            node = node.children[p];
-        }
-        return node;
+function getEmojisWidthHeight(board, element) {
+    const options = board.getMindOptions();
+    const count = element.data.emojis.length;
+    const fontSize = getEmojiFontSize(element);
+    return {
+        width: fontSize * count + count * 2 * options.emojiPadding + (count - 1) * options.spaceBetweenEmojis,
+        height: element.height
+    };
+}
+function getEmojiFontSize(element) {
+    if (PlaitMind.isMind(element)) {
+        return 18 + 2;
+    }
+    else {
+        return 14 + 2;
     }
-};
-
-var LayoutDirection;
-(function (LayoutDirection) {
-    LayoutDirection["top"] = "top";
-    LayoutDirection["right"] = "right";
-    LayoutDirection["bottom"] = "bottom";
-    LayoutDirection["left"] = "left";
-})(LayoutDirection || (LayoutDirection = {}));
-const LayoutDirectionsMap = {
-    [MindLayoutType.right]: [LayoutDirection.right],
-    [MindLayoutType.left]: [LayoutDirection.left],
-    [MindLayoutType.upward]: [LayoutDirection.top],
-    [MindLayoutType.downward]: [LayoutDirection.bottom],
-    [MindLayoutType.rightBottomIndented]: [LayoutDirection.right, LayoutDirection.bottom],
-    [MindLayoutType.rightTopIndented]: [LayoutDirection.right, LayoutDirection.top],
-    [MindLayoutType.leftBottomIndented]: [LayoutDirection.left, LayoutDirection.bottom],
-    [MindLayoutType.leftTopIndented]: [LayoutDirection.left, LayoutDirection.top]
-};
-
-var AbstractHandlePosition;
-(function (AbstractHandlePosition) {
-    AbstractHandlePosition["start"] = "start";
-    AbstractHandlePosition["end"] = "end";
-})(AbstractHandlePosition || (AbstractHandlePosition = {}));
-var AbstractResizeState;
-(function (AbstractResizeState) {
-    AbstractResizeState["start"] = "start";
-    AbstractResizeState["resizing"] = "resizing";
-    AbstractResizeState["end"] = "end";
-})(AbstractResizeState || (AbstractResizeState = {}));
-
-function enterNodeEditing(element) {
-    const component = ELEMENT_TO_COMPONENT.get(element);
-    component.startEditText(false, false);
 }
 
-const separateChildren = (parentElement) => {
-    const rightNodeCount = parentElement.rightNodeCount;
-    const children = parentElement.children;
-    let rightChildren = [], leftChildren = [];
-    for (let i = 0; i < children.length; i++) {
-        const child = children[i];
-        if (AbstractNode.isAbstract(child) && child.end < rightNodeCount) {
-            rightChildren.push(child);
-            continue;
-        }
-        if (AbstractNode.isAbstract(child) && child.start >= rightNodeCount) {
-            leftChildren.push(child);
-            continue;
-        }
-        if (i < rightNodeCount) {
-            rightChildren.push(child);
-        }
-        else {
-            leftChildren.push(child);
-        }
+const NodeDefaultSpace = {
+    horizontal: {
+        nodeAndText: BASE * 3,
+        emojiAndText: BASE * 1.5
+    },
+    vertical: {
+        nodeAndText: BASE * 1.5
     }
-    return { leftChildren, rightChildren };
 };
-const isSetAbstract = (element) => {
-    const parent = MindElement.getParent(element);
-    return !!getCorrespondingAbstract(parent, element);
+const RootDefaultSpace = {
+    horizontal: {
+        nodeAndText: BASE * 4,
+        emojiAndText: BASE * 2
+    },
+    vertical: {
+        nodeAndText: BASE * 2
+    }
 };
-const canSetAbstract = (element) => {
-    return !PlaitElement.isRootElement(element) && !AbstractNode.isAbstract(element) && !isSetAbstract(element);
+const getHorizontalSpaceBetweenNodeAndText = (board, element) => {
+    const isMind = PlaitMind.isMind(element);
+    const nodeAndText = isMind ? RootDefaultSpace.horizontal.nodeAndText : NodeDefaultSpace.horizontal.nodeAndText;
+    return nodeAndText;
 };
-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 getVerticalSpaceBetweenNodeAndText = (element) => {
+    const isMind = PlaitMind.isMind(element);
+    const nodeAndText = isMind ? RootDefaultSpace.vertical.nodeAndText : NodeDefaultSpace.vertical.nodeAndText;
+    return nodeAndText;
 };
-const getBehindAbstracts = (parent, element) => {
-    const index = parent.children.indexOf(element);
-    return parent.children.filter(child => AbstractNode.isAbstract(child) && child.start > index);
+const getSpaceEmojiAndText = (element) => {
+    const isMind = PlaitMind.isMind(element);
+    const emojiAndText = isMind ? RootDefaultSpace.horizontal.emojiAndText : NodeDefaultSpace.horizontal.emojiAndText;
+    return emojiAndText;
 };
-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);
-            }
+const NodeSpace = {
+    getNodeWidth(board, element) {
+        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
+        if (MindElement.hasEmojis(element)) {
+            return (NodeSpace.getEmojiLeftSpace(board, element) +
+                getEmojisWidthHeight(board, element).width +
+                getSpaceEmojiAndText(element) +
+                element.width +
+                nodeAndText);
         }
-    });
-    return overallAbstracts;
+        return nodeAndText + element.width + nodeAndText;
+    },
+    getNodeHeight(board, element) {
+        const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
+        return nodeAndText + element.height + nodeAndText;
+    },
+    getTextLeftSpace(board, element) {
+        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
+        if (MindElement.hasEmojis(element)) {
+            return NodeSpace.getEmojiLeftSpace(board, element) + getEmojisWidthHeight(board, element).width + getSpaceEmojiAndText(element);
+        }
+        else {
+            return nodeAndText;
+        }
+    },
+    getTextTopSpace(element) {
+        const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
+        return nodeAndText;
+    },
+    getEmojiLeftSpace(board, element) {
+        const options = board.getMindOptions();
+        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
+        return nodeAndText - options.emojiPadding;
+    },
+    getEmojiTopSpace(element) {
+        const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
+        return nodeAndText;
+    }
 };
-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));
+
+function getRectangleByNode(node) {
+    const x = node.x + node.hGap;
+    let y = node.y + node.vGap;
+    const width = node.width - node.hGap * 2;
+    const height = node.height - node.vGap * 2;
+    return {
+        x,
+        y,
+        width,
+        height
+    };
+}
+function getRectangleByElement(board, originPoint, element) {
+    const nodeRectangle = {
+        x: originPoint[0],
+        y: originPoint[1],
+        width: NodeSpace.getNodeWidth(board, element),
+        height: NodeSpace.getNodeHeight(board, element)
+    };
+    return nodeRectangle;
+}
+function isHitMindElement(board, point, element) {
+    const node = MindElement.getNode(element);
+    if (node && distanceBetweenPointAndRectangle(point[0], point[1], getRectangleByNode(node)) === 0) {
+        return true;
     }
     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;
+        return false;
     }
-    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];
-        setAbstractByElements(board, groupParent, group);
-    });
-};
-const setAbstractByElements = (board, groupParent, group) => {
-    const indexArray = group.map(child => groupParent.children.indexOf(child)).sort((a, b) => a - b);
-    const rightNodeCount = groupParent?.rightNodeCount;
-    const start = indexArray[0], end = indexArray[indexArray.length - 1];
-    if (isStandardLayout(MindQueries.getLayoutByElement(groupParent)) &&
-        rightNodeCount &&
-        start < rightNodeCount &&
-        end >= rightNodeCount) {
-        const childrenLength = groupParent.children.length;
-        const path = [...PlaitBoard.findPath(board, groupParent), childrenLength];
-        const leftChildren = indexArray.filter(index => index >= rightNodeCount);
-        const rightChildren = indexArray.filter(index => index < rightNodeCount);
-        insertAbstractNode(board, path, rightChildren[0], rightChildren[rightChildren.length - 1]);
-        insertAbstractNode(board, Path.next(path), leftChildren[0], leftChildren[leftChildren.length - 1]);
-    }
-    else {
-        const path = [...PlaitBoard.findPath(board, groupParent), groupParent.children.length];
-        insertAbstractNode(board, path, start, end);
-    }
-};
-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 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 }
+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
     };
-    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 }
+}
+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 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 isHitEmojis = (board, element, point) => {
+    return RectangleClient.isHit(RectangleClient.toRectangleClient([point, point]), getEmojiRectangle(board, element));
 };
 
-const MindTransforms = {
-    setLayout,
-    setTopic,
-    setTopicSize,
-    addEmoji,
-    removeEmoji,
-    replaceEmoji,
-    insertAbstract,
-    setAbstractsByRefs,
-    setAbstractByStandardLayout
-};
+function getTopicRectangleByNode(board, node) {
+    let nodeRectangle = getRectangleByNode(node);
+    return getTopicRectangleByElement(board, nodeRectangle, node.origin);
+}
+function getTopicRectangleByElement(board, nodeRectangle, element) {
+    const x = nodeRectangle.x + NodeSpace.getTextLeftSpace(board, element);
+    const y = nodeRectangle.y + NodeSpace.getTextTopSpace(element);
+    const width = Math.ceil(element.width);
+    const height = Math.ceil(element.height);
+    return { height, width, x, y };
+}
 
-function findUpElement(element) {
-    let branch;
-    let root = element;
-    let parent = MindElement.findParent(element);
-    while (parent) {
-        branch = root;
-        root = parent;
-        parent = MindElement.findParent(parent);
-    }
-    return { root, branch };
+function enterNodeEditing(element) {
+    const component = PlaitElement.getComponent(element);
+    component.startEditText(false, false);
 }
-const getChildrenCount = (element) => {
-    const count = element.children.reduce((p, c) => {
-        return p + getChildrenCount(c);
-    }, 0);
-    return count + element.children.length;
-};
-const isChildElement = (origin, child) => {
-    let parent = MindElement.findParent(child);
-    while (parent) {
-        if (parent === origin) {
-            return true;
-        }
-        parent = MindElement.findParent(parent);
-    }
-    return false;
-};
-const getFirstLevelElement = (elements) => {
-    let result = [];
-    elements.forEach(element => {
-        const isChild = elements.some(node => {
-            return isChildElement(node, element);
-        });
-        if (!isChild) {
-            result.push(element);
-        }
-    });
-    return result;
-};
-const isChildRight = (node, child) => {
-    return node.x < child.x;
-};
-const isChildUp = (node, child) => {
-    return node.y > child.y;
-};
-const copyNewNode = (node) => {
-    const newNode = { ...node };
-    newNode.id = idCreator();
-    newNode.children = [];
-    for (const childNode of node.children) {
-        newNode.children.push(copyNewNode(childNode));
-    }
-    return newNode;
-};
-const transformRootToNode = (board, node) => {
+
+const adjustRootToNode = (board, node) => {
     const newNode = { ...node };
     delete newNode.isRoot;
     delete newNode.rightNodeCount;
@@ -771,13 +562,13 @@ const transformRootToNode = (board, node) => {
     }
     return newNode;
 };
-const transformAbstractToNode = (node) => {
+const adjustAbstractToNode = (node) => {
     const newNode = { ...node };
     delete newNode.start;
     delete newNode.end;
     return newNode;
 };
-const transformNodeToRoot = (board, node) => {
+const adjustNodeToRoot = (board, node) => {
     const newElement = { ...node };
     let text = Node.string(newElement.data.topic);
     if (!text) {
@@ -799,40 +590,14 @@ const transformNodeToRoot = (board, node) => {
         type: 'mindmap'
     };
 };
-const extractNodesText = (node) => {
-    let str = '';
-    if (node) {
-        str += Node.string(node.data.topic.children[0]) + ' ';
-        for (const childNode of node.children) {
-            str += extractNodesText(childNode);
-        }
-    }
-    return str;
-};
-const changeRightNodeCount = (board, parentPath, changeNumber) => {
-    const _rightNodeCount = board.children[parentPath[0]].rightNodeCount;
-    Transforms.setNode(board, {
-        rightNodeCount: changeNumber >= 0
-            ? _rightNodeCount + changeNumber
-            : _rightNodeCount + changeNumber < 0
-                ? 0
-                : _rightNodeCount + changeNumber
-    }, parentPath);
-};
-const shouldChangeRightNodeCount = (selectedElement) => {
-    const parentElement = MindElement.findParent(selectedElement);
-    if (parentElement) {
-        const nodeIndex = parentElement.children.findIndex(item => item.id === selectedElement.id);
-        if (parentElement.isRoot &&
-            getRootLayout(parentElement) === MindLayoutType.standard &&
-            parentElement.rightNodeCount &&
-            nodeIndex <= parentElement.rightNodeCount - 1) {
-            return true;
-        }
-    }
-    return false;
+
+const createEmptyMind = (board, point) => {
+    const element = createMindElement('', 0, 0, { layout: MindLayoutType.right });
+    const rootElement = adjustNodeToRoot(board, element);
+    rootElement.points = [point];
+    return rootElement;
 };
-const createDefaultMindMapElement = (point, rightNodeCount, layout) => {
+const createDefaultMind = (point, rightNodeCount, layout) => {
     const root = createMindElement('思维导图', 72, ROOT_DEFAULT_HEIGHT, { shape: MindElementShape.roundRectangle, layout });
     root.rightNodeCount = rightNodeCount;
     root.isRoot = true;
@@ -881,6 +646,83 @@ const createMindElement = (text, width, height, options) => {
     }
     return newElement;
 };
+
+const getChildrenCount = (element) => {
+    const count = element.children.reduce((p, c) => {
+        return p + getChildrenCount(c);
+    }, 0);
+    return count + element.children.length;
+};
+const isChildElement = (origin, child) => {
+    let parent = MindElement.findParent(child);
+    while (parent) {
+        if (parent === origin) {
+            return true;
+        }
+        parent = MindElement.findParent(parent);
+    }
+    return false;
+};
+const getFirstLevelElement = (elements) => {
+    let result = [];
+    elements.forEach(element => {
+        const isChild = elements.some(node => {
+            return isChildElement(node, element);
+        });
+        if (!isChild) {
+            result.push(element);
+        }
+    });
+    return result;
+};
+const isChildRight = (node, child) => {
+    return node.x < child.x;
+};
+const isChildUp = (node, child) => {
+    return node.y > child.y;
+};
+const copyNewNode = (node) => {
+    const newNode = { ...node };
+    newNode.id = idCreator();
+    newNode.children = [];
+    for (const childNode of node.children) {
+        newNode.children.push(copyNewNode(childNode));
+    }
+    return newNode;
+};
+const extractNodesText = (node) => {
+    let str = '';
+    if (node) {
+        str += Node.string(node.data.topic.children[0]) + ' ';
+        for (const childNode of node.children) {
+            str += extractNodesText(childNode);
+        }
+    }
+    return str;
+};
+const changeRightNodeCount = (board, parentPath, changeNumber) => {
+    const _rightNodeCount = board.children[parentPath[0]].rightNodeCount;
+    Transforms.setNode(board, {
+        rightNodeCount: changeNumber >= 0
+            ? _rightNodeCount + changeNumber
+            : _rightNodeCount + changeNumber < 0
+                ? 0
+                : _rightNodeCount + changeNumber
+    }, parentPath);
+};
+const isInRightBranchOfStandardLayout = (selectedElement) => {
+    const parentElement = MindElement.findParent(selectedElement);
+    if (parentElement) {
+        const nodeIndex = parentElement.children.findIndex(item => item.id === selectedElement.id);
+        if (parentElement.isRoot &&
+            getRootLayout(parentElement) === MindLayoutType.standard &&
+            parentElement.rightNodeCount &&
+            nodeIndex <= parentElement.rightNodeCount - 1) {
+            return true;
+        }
+    }
+    return false;
+};
 // layoutLevel 用来表示插入兄弟节点还是子节点
 const insertMindElement = (board, inheritNode, path) => {
     let fill, strokeColor, strokeWidth, shape = MindElementShape.roundRectangle;
@@ -905,25 +747,6 @@ const findLastChild = (child) => {
     }
     return result;
 };
-const deleteSelectedELements = (board, selectedElements) => {
-    const deletableElements = getFirstLevelElement(selectedElements).reverse();
-    const abstractRefs = deleteElementHandleAbstract(board, deletableElements);
-    MindTransforms.setAbstractsByRefs(board, abstractRefs);
-    //翻转，从下到上修改，防止找不到 path
-    deletableElements
-        .map(element => {
-        const path = PlaitBoard.findPath(board, element);
-        return () => {
-            if (shouldChangeRightNodeCount(element)) {
-                changeRightNodeCount(board, path.slice(0, 1), -1);
-            }
-            Transforms.removeNode(board, path);
-        };
-    })
-        .forEach(action => {
-        action();
-    });
-};
 const divideElementByParent = (elements) => {
     const abstractIncludedGroups = [];
     const parentElements = [];
@@ -1019,466 +842,123 @@ function isVirtualKey(e) {
     return isCapsLock || isMod || isAlt || isArrow || isShift || isTab || isEsc || isF;
 }
 
-function drawLink(board, node, child, defaultStroke = null, isHorizontal = true, needDrawUnderline = true) {
-    let beginX, beginY, endX, endY, beginNode = node, endNode = child;
-    const layout = MindQueries.getCorrectLayoutByElement(board, node.origin);
-    if (isHorizontal) {
-        if (!isChildRight(node, child)) {
-            beginNode = child;
-            endNode = node;
-        }
-        beginX = beginNode.x + beginNode.width - beginNode.hGap;
-        beginY = beginNode.y + beginNode.height / 2;
-        endX = endNode.x + endNode.hGap;
-        endY = endNode.y + endNode.height / 2;
-        if (node.parent &&
-            isIndentedLayout(MindQueries.getLayoutByElement(node.parent?.origin)) &&
-            getShapeByElement(board, node.origin) === MindElementShape.underline) {
-            if (isChildRight(node, child)) {
-                beginY = node.y + node.height - node.vGap;
-            }
-            else {
-                endY = node.y + node.height - node.vGap;
-            }
-        }
+const IS_DRAGGING = new WeakMap();
+const addActiveOnDragOrigin = (activeElement, isOrigin = true) => {
+    const activeComponent = PlaitElement.getComponent(activeElement);
+    if (isOrigin) {
+        activeComponent.g.classList.add('dragging-origin');
     }
     else {
-        if (node.y > child.y) {
-            beginNode = child;
-            endNode = node;
-        }
-        beginX = beginNode.x + beginNode.width / 2;
-        beginY = beginNode.y + beginNode.height - beginNode.vGap;
-        endX = endNode.x + endNode.width / 2;
-        endY = endNode.y + endNode.vGap;
+        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');
     }
-    const stroke = defaultStroke || getBranchColorByMindElement(board, child.origin);
-    const strokeWidth = child.origin.branchWidth ? child.origin.branchWidth : STROKE_WIDTH;
-    if (endNode.origin.isRoot) {
-        if (layout === MindLayoutType.left || isStandardLayout(layout)) {
-            endX -= strokeWidth;
+    else {
+        activeComponent.g.classList.remove('dragging-child');
+    }
+    !activeElement.isCollapsed &&
+        activeElement.children.forEach(child => {
+            removeActiveOnDragOrigin(child, false);
+        });
+};
+const isDragging = (board) => {
+    return !!IS_DRAGGING.get(board);
+};
+const setIsDragging = (board, state) => {
+    IS_DRAGGING.set(board, state);
+};
+
+/**
+ *
+ * @param targetNode
+ * @param centerPoint
+ * @returns DetectResult[] | null
+ */
+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 (layout === MindLayoutType.upward) {
-            endY -= strokeWidth;
+        if (isLeftLayout(parentLayout)) {
+            return getAllowedDirection(detectResults, ['right']);
         }
-    }
-    if (beginNode.origin.isRoot) {
-        if (layout === MindLayoutType.right || isStandardLayout(layout)) {
-            beginX += strokeWidth;
+        if (isRightLayout(parentLayout)) {
+            return getAllowedDirection(detectResults, ['left']);
         }
-        if (layout === MindLayoutType.downward) {
-            beginY += strokeWidth;
+        if (parentLayout === MindLayoutType.upward) {
+            return getAllowedDirection(detectResults, ['bottom']);
         }
-    }
-    if (isHorizontal) {
-        let curve = [
-            [beginX, beginY],
-            [beginX + (beginNode.hGap + endNode.hGap) / 3, beginY],
-            [endX - (beginNode.hGap + endNode.hGap) / 2, endY],
-            [endX, endY]
-        ];
-        const shape = getShapeByElement(board, child.origin);
-        if (!node.origin.isRoot) {
-            if (node.x > child.x) {
-                curve = [
-                    [beginX, beginY],
-                    [beginX + (beginNode.hGap + endNode.hGap) / 3, beginY],
-                    [endX - (beginNode.hGap + endNode.hGap) / 2, endY],
-                    [endX - 12, endY]
-                ];
-                const line = [
-                    [endX - 12, endY],
-                    [endX - 12, endY],
-                    [endX, endY]
-                ];
-                curve = [...curve, ...line];
-            }
-            else {
-                curve = [
-                    [beginX + 12, beginY],
-                    [beginX + (beginNode.hGap + endNode.hGap) / 2, beginY],
-                    [endX - (beginNode.hGap + endNode.hGap) / 3, endY],
-                    [endX, endY]
-                ];
-                const line = [
-                    [beginX, beginY],
-                    [beginX + 12, beginY],
-                    [beginX + 12, beginY]
-                ];
-                curve = [...line, ...curve];
-            }
-        }
-        if (needDrawUnderline && shape === MindElementShape.underline) {
-            if (child.left) {
-                const underline = [
-                    [beginX - (beginNode.width - beginNode.hGap * 2), beginY],
-                    [beginX - (beginNode.width - beginNode.hGap * 2), beginY],
-                    [beginX - (beginNode.width - beginNode.hGap * 2), beginY]
-                ];
-                curve = [...underline, ...curve];
-            }
-            else {
-                const underline = [
-                    [endX + (endNode.width - endNode.hGap * 2), endY],
-                    [endX + (endNode.width - endNode.hGap * 2), endY],
-                    [endX + (endNode.width - endNode.hGap * 2), endY]
-                ];
-                curve = [...curve, ...underline];
-            }
+        if (parentLayout === MindLayoutType.downward) {
+            return getAllowedDirection(detectResults, ['top']);
         }
-        const points = pointsOnBezierCurves(curve);
-        return PlaitBoard.getRoughSVG(board).curve(points, { stroke, strokeWidth });
     }
     else {
-        let curve = [
-            [beginX, beginY],
-            [beginX, beginY + (beginNode.vGap + endNode.vGap) / 2],
-            [endX, endY - (beginNode.vGap + endNode.vGap) / 2],
-            [endX, endY]
-        ];
-        if (!node.origin.isRoot) {
-            if (isTopLayout(layout)) {
-                curve = [
-                    [beginX, beginY],
-                    [beginX, beginY + (beginNode.vGap + endNode.vGap) / 2],
-                    [endX, endY - (beginNode.vGap + endNode.vGap) / 2],
-                    [endX, endY - 12]
-                ];
-                const line = [
-                    [endX, endY - 12],
-                    [endX, endY - 12],
-                    [endX, endY]
-                ];
-                curve = [...curve, ...line];
-            }
-            else {
-                curve = [
-                    [beginX, beginY + 12],
-                    [beginX, beginY + (beginNode.vGap + endNode.vGap) / 2],
-                    [endX, endY - (beginNode.vGap + endNode.vGap) / 2],
-                    [endX, endY]
-                ];
-                const line = [
-                    [beginX, beginY],
-                    [beginX, beginY + 12],
-                    [beginX, beginY + 12]
-                ];
-                curve = [...line, ...curve];
-            }
-        }
-        const points = pointsOnBezierCurves(curve);
-        return PlaitBoard.getRoughSVG(board).curve(points, { stroke, strokeWidth });
-    }
-}
-
-const drawPlaceholderDropNodeG = (board, dropTarget, fakeDropNodeG) => {
-    const targetComponent = PlaitElement.getComponent(dropTarget.target);
-    const targetRect = getRectangleByNode(targetComponent.node);
-    if (dropTarget.detectResult && ['right', 'left'].includes(dropTarget.detectResult)) {
-        drawStraightDropNodeG(board, targetRect, dropTarget.detectResult, targetComponent, fakeDropNodeG);
-    }
-    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(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)) {
-        fakeX = targetComponent.node.x + targetComponent.node.width - 30;
-        fakeRectangleStartX = targetRect.x + targetRect.width - 30;
-        fakeRectangleEndX = targetRect.x + targetRect.width;
-    }
-    if (isHorizontalLogicLayout(parentNodeLayout)) {
-        fakeY = getHorizontalFakeY(detectResult, targetIndex, parentComponent.node, targetRect, layout, fakeY);
-        if (isStandardLayout(parentNodeLayout)) {
-            const rightNodeCount = parentComponent.node.origin.rightNodeCount || 0;
-            const idx = parentComponent.node.children.findIndex(x => x === targetComponent.node);
-            const isLeft = idx >= rightNodeCount;
-            // 标准布局的左，需要调整 x
-            if (isLeft) {
-                fakeX = targetComponent.node.x + targetComponent.node.width - 30;
-                fakeRectangleStartX = targetRect.x + targetRect.width - 30;
-                fakeRectangleEndX = targetRect.x + targetRect.width;
-            }
-            const isLeftFirst = idx === rightNodeCount;
-            const isRightLast = idx === rightNodeCount - 1;
-            // 拖拽至左第一个节点的情况
-            if (detectResult === 'top' && isLeftFirst) {
-                fakeY = targetRect.y - targetRect.height;
-            }
-            if (detectResult === 'bottom' && isRightLast) {
-                fakeY = targetRect.y + targetRect.height + 30;
-            }
-        }
-        fakeRectangleStartY = fakeY;
-        fakeRectangleEndY = fakeRectangleStartY + 12;
-    }
-    if (isVerticalLogicLayout(layout)) {
-        parentComponent = targetComponent;
-        targetComponent = PlaitElement.getComponent(MindElement.getParent(targetComponent.element));
-        fakeX = parentComponent.node.x;
-        width = parentComponent.node.width;
-        const vGap = BASE * 6 + strokeWidth;
-        if (isTopLayout(layout) && detectResult === 'top') {
-            fakeY = targetRect.y - vGap;
-            fakeRectangleStartY = fakeY - vGap + strokeWidth;
-        }
-        if (isBottomLayout(layout) && detectResult === 'bottom') {
-            fakeY = targetRect.y + targetRect.height + vGap;
-            fakeRectangleStartY = fakeY + vGap - strokeWidth;
-        }
-        fakeRectangleStartX = fakeX + Math.ceil(parentComponent.node.width / 2) - parentComponent.node.hGap - Math.ceil(strokeWidth / 2);
-        fakeRectangleEndX = fakeRectangleStartX + 30;
-        fakeRectangleEndY = fakeRectangleStartY + 12;
-    }
-    if (isIndentedLayout(layout)) {
-        // 偏移一个 Gap
+        const layout = MindQueries.getCorrectLayoutByElement(board, node?.origin);
+        if (isStandardLayout(layout)) {
+            return getAllowedDirection(detectResults, ['top', 'bottom']);
+        }
+        if (layout === MindLayoutType.upward) {
+            return getAllowedDirection(detectResults, ['left', 'right', 'bottom']);
+        }
+        if (layout === MindLayoutType.downward) {
+            return getAllowedDirection(detectResults, ['left', 'right', 'top']);
+        }
         if (isLeftLayout(layout)) {
-            fakeX -= BASE * 4;
+            return getAllowedDirection(detectResults, ['right', 'top', 'bottom']);
         }
         if (isRightLayout(layout)) {
-            fakeX += BASE * 4;
-        }
-        if (isTopLayout(layout)) {
-            if (detectResult === 'top') {
-                const isLastNode = targetIndex === parentComponent.node.origin.children.length - 1;
-                if (isLastNode) {
-                    fakeY = targetRect.y - targetRect.height - BASE;
-                }
-                else {
-                    const nextComponent = PlaitElement.getComponent(parentComponent.node.origin.children[targetIndex + 1]);
-                    const nextRect = getRectangleByNode(nextComponent.node);
-                    fakeY = targetRect.y - Math.abs((nextRect.y + nextRect.height - targetRect.y) / 2);
-                }
-            }
-            if (detectResult === 'bottom') {
-                const isFirstNode = targetIndex === 0;
-                if (isFirstNode) {
-                    const parentRect = getRectangleByNode(parentComponent.node);
-                    fakeY = parentRect.y - parentRect.height / 2 - BASE;
-                }
-                else {
-                    const previousComponent = PlaitElement.getComponent(parentComponent.node.origin.children[targetIndex + 1]);
-                    const previousRect = getRectangleByNode(previousComponent.node);
-                    fakeY = previousRect.y - Math.abs((targetRect.y + targetRect.height - previousRect.y) / 2);
-                }
-            }
+            return getAllowedDirection(detectResults, ['left', 'top', 'bottom']);
         }
-        fakeRectangleStartX = fakeX;
-        fakeRectangleEndX = fakeRectangleStartX + 30;
-        fakeRectangleStartY = fakeY;
-        fakeRectangleEndY = fakeRectangleStartY + 12;
     }
-    // 构造一条曲线
-    const fakeNode = { ...targetComponent.node, x: fakeX, y: fakeY, width, height: 12 };
-    const linkSVGG = isIndentedLayout(layout)
-        ? drawIndentedLink(board, parentComponent.node, fakeNode, PRIMARY_COLOR, false)
-        : drawLink(board, parentComponent.node, fakeNode, PRIMARY_COLOR, isHorizontalLayout(layout), false);
-    // 构造一个矩形框坐标
-    const fakeRectangleG = drawRoundRectangle(PlaitBoard.getRoughSVG(board), fakeRectangleStartX, fakeRectangleStartY, fakeRectangleEndX, fakeRectangleEndY, {
-        stroke: PRIMARY_COLOR,
-        strokeWidth: 2,
-        fill: PRIMARY_COLOR,
-        fillStyle: 'solid'
+    return null;
+};
+const getAllowedDirection = (detectResults, illegalDirections) => {
+    const directions = detectResults;
+    illegalDirections.forEach(item => {
+        const bottomDirectionIndex = directions.findIndex(direction => direction === item);
+        if (bottomDirectionIndex !== -1) {
+            directions.splice(bottomDirectionIndex, 1);
+        }
     });
-    fakeDropNodeG?.appendChild(linkSVGG);
-    fakeDropNodeG?.appendChild(fakeRectangleG);
+    return directions.length ? directions : null;
 };
-const drawStraightDropNodeG = (board, targetRect, detectResult, targetComponent, fakeDropNodeG) => {
-    const { x, y, width, height } = targetRect;
-    const lineLength = 40;
-    let startLinePoint = x + width;
-    let endLinePoint = x + width + lineLength;
-    let startRectanglePointX = x + width + lineLength;
-    let endRectanglePointX = x + lineLength + width + 30;
-    let startRectanglePointY = y + height / 2 - 6;
-    let endRectanglePointY = y + height / 2 - 6 + 12;
-    if (detectResult === 'left') {
-        startLinePoint = x - lineLength;
-        endLinePoint = x;
-        startRectanglePointX = x - lineLength - 30;
-        endRectanglePointX = x - lineLength;
-    }
-    let fakeY = targetComponent.node.y;
-    let fakeX = targetRect.x;
-    const strokeWidth = targetComponent.node.origin.branchWidth ? targetComponent.node.origin.branchWidth : STROKE_WIDTH;
-    const pointOptions = {
-        fakeX,
-        fakeY,
-        x,
-        y,
-        width,
-        height,
-        strokeWidth
-    };
-    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 = [
-            [startLinePoint, y + height / 2],
-            [endLinePoint, y + height / 2]
-        ];
-        if (isIndentedLayout(parentLayout)) {
-            const fakePoint = getIndentedFakePoint(parentLayout, pointOptions);
-            drawIndentNodeG(board, fakeDropNodeG, fakePoint, targetComponent.node);
+const detectDropTarget = (board, detectPoint, dropTarget, activeElements) => {
+    let detectResult = null;
+    depthFirstRecursion(board, element => {
+        if (!MindElement.isMindElement(board, element) || detectResult) {
             return;
         }
-        else if (isVerticalLogicLayout(parentLayout)) {
-            if (!targetComponent.node.origin.isRoot) {
-                /**
-                 * 计算逻辑：
-                 *  1. 移动到左侧：当前节点 startX - 偏移值，偏移值计算如下：
-                 *      a. 第一个节点： 固定值（来源于 getMainAxle，第二级节点：BASE * 8，其他 BASE * 3 + strokeWidth / 2）；
-                 *      b. 第二个节点到最后一个节点之间：上一个节点到当前节点间距的一半（(当前节点 startX - 上一个节点的 endX) / 2)，endX = 当前节点的 startX + width;
-                 *  2. 移动到右侧：当前节点 x + width + 偏移值，偏移值计算如下：
-                 *      a. 第二个节点到最后一个节点之间的右侧：当前节点到下一个节点间距的一半（(下一个节点 startX - 当前节点的 endX) / 2)，endX = 当前节点的 startX + width;
-                 *      b. 最后一个节点的右侧：固定值（来源于 getMainAxle，第二级节点：BASE * 8，其他 BASE * 3 + strokeWidth / 2）；
-                 */
-                fakeY = targetComponent.node.y;
-                const parentComponent = PlaitElement.getComponent(MindElement.getParent(targetComponent.element));
-                const targetIndex = parentComponent.node.origin.children.indexOf(targetComponent.node.origin);
-                if (detectResult === 'left') {
-                    let offsetX = 0;
-                    const isFirstNode = targetIndex === 0;
-                    if (isFirstNode) {
-                        offsetX = parentComponent.node.origin.isRoot ? BASE * 8 : BASE * 3 + strokeWidth / 2;
-                    }
-                    else {
-                        const previousComponent = PlaitElement.getComponent(parentComponent.node.origin.children[targetIndex - 1]);
-                        const previousRect = getRectangleByNode(previousComponent.node);
-                        const space = targetRect.x - (previousRect.x + previousRect.width);
-                        offsetX = space / 2;
-                    }
-                    fakeX = targetRect.x - offsetX - width / 2 - Math.ceil(strokeWidth / 2);
-                }
-                if (detectResult === 'right') {
-                    let offsetX = 0;
-                    const isLastNode = targetIndex === parentComponent.node.origin.children.length - 1;
-                    if (isLastNode) {
-                        offsetX = parentComponent.node.origin.isRoot ? BASE * 8 : BASE * 3 + strokeWidth / 2;
-                    }
-                    else {
-                        const nextComponent = PlaitElement.getComponent(parentComponent.node.origin.children[targetIndex + 1]);
-                        const nextRect = getRectangleByNode(nextComponent.node);
-                        const space = nextRect.x - (targetRect.x + targetRect.width);
-                        offsetX = space / 2;
-                    }
-                    fakeX = targetRect.x + width + offsetX - width / 2 - Math.ceil(strokeWidth / 2);
-                }
-                startRectanglePointX = fakeX;
-                if (isTopLayout(parentLayout)) {
-                    // 因为矩形是从左上角为起点向下画的，所以需要向上偏移一个矩形的高度（-12）
-                    startRectanglePointY = fakeY + height + targetComponent.node.vGap - 12;
-                }
-                if (isBottomLayout(parentLayout)) {
-                    startRectanglePointY = fakeY + targetComponent.node.vGap;
-                }
-                endRectanglePointX = startRectanglePointX + 30;
-                endRectanglePointY = startRectanglePointY + 12;
-                const fakeNode = { ...targetComponent.node, x: fakeX, y: fakeY, width: 30 };
-                const linkSVGG = drawLink(board, parentComponent.node, fakeNode, PRIMARY_COLOR, false, false);
-                fakeDropNodeG?.appendChild(linkSVGG);
-            }
+        const node = MindElement.getNode(element);
+        const directions = directionDetector(node, detectPoint);
+        if (directions) {
+            detectResult = directionCorrector(board, node, directions);
+        }
+        dropTarget = null;
+        const isValid = activeElements.every(element => isValidTarget(element, node.origin));
+        if (detectResult && isValid) {
+            dropTarget = { target: node.origin, detectResult: detectResult[0] };
+        }
+    }, node => {
+        if (PlaitBoard.isBoard(node) || board.isRecursion(node)) {
+            return true;
         }
         else {
-            let linkSVGG = PlaitBoard.getRoughSVG(board).linearPath(linePoints, { stroke: PRIMARY_COLOR, strokeWidth });
-            fakeDropNodeG?.appendChild(linkSVGG);
+            return false;
         }
-        // 构造一个矩形框坐标
-        let fakeRectangleG = drawRoundRectangle(PlaitBoard.getRoughSVG(board), startRectanglePointX, startRectanglePointY, endRectanglePointX, endRectanglePointY, {
-            stroke: PRIMARY_COLOR,
-            strokeWidth: 2,
-            fill: PRIMARY_COLOR,
-            fillStyle: 'solid'
-        });
-        fakeDropNodeG?.appendChild(fakeRectangleG);
-    }
-    else {
-        // 混合布局画线逻辑
-        if (isHorizontalLogicLayout(parentLayout)) {
-            if (isIndentedLayout(layout)) {
-                const fakePoint = getIndentedFakePoint(layout, pointOptions);
-                drawIndentNodeG(board, fakeDropNodeG, fakePoint, targetComponent.node);
-                return;
-            }
-        }
-    }
-};
-const getHorizontalFakeY = (detectResult, targetIndex, parentNode, targetRect, layout, fakeY) => {
-    const childrenLength = getNonAbstractChildren(parentNode).length;
-    if (detectResult === 'top') {
-        if (targetIndex === 0 && isTopLayout(layout)) {
-            fakeY = targetRect.y + targetRect.height;
-        }
-        if (targetIndex > 0) {
-            const previousComponent = PlaitElement.getComponent(parentNode.origin.children[targetIndex - 1]);
-            const previousRect = getRectangleByNode(previousComponent.node);
-            const topY = previousRect.y + previousRect.height;
-            fakeY = topY + (targetRect.y - topY) / 5;
-        }
-    }
-    if (detectResult === 'bottom') {
-        fakeY = targetRect.y + targetRect.height + 30;
-        if (targetIndex < childrenLength - 1) {
-            const nextComponent = PlaitElement.getComponent(parentNode.origin.children[targetIndex + 1]);
-            const nextRect = getRectangleByNode(nextComponent.node);
-            const topY = targetRect.y + targetRect.height;
-            fakeY = topY + (nextRect.y - topY) / 5;
-        }
-        if (targetIndex === childrenLength - 1) {
-            fakeY = targetRect.y + targetRect.height + 30;
-        }
-    }
-    return fakeY;
-};
-const getIndentedFakePoint = (layout, pointOptions) => {
-    let { fakeX, fakeY, x, y, width, height, strokeWidth } = pointOptions;
-    const hGap = BASE * 4;
-    const vGap = BASE * 6;
-    const offsetX = hGap + width / 2 + strokeWidth;
-    const offsetY = vGap + height / 2 + strokeWidth;
-    if (isLeftLayout(layout)) {
-        fakeX = x - offsetX;
-    }
-    if (isRightLayout(layout)) {
-        fakeX = x + offsetX;
-    }
-    if (isTopLayout(layout)) {
-        fakeY = y - offsetY;
-    }
-    if (isBottomLayout(layout)) {
-        fakeY = y + height + offsetY;
-    }
-    return { fakeX, fakeY };
-};
-const drawIndentNodeG = (board, fakeDropNodeG, fakePoint, node) => {
-    const { fakeX, fakeY } = fakePoint;
-    const fakeNode = { ...node, x: fakeX, y: fakeY, width: 30, height: 12 };
-    const linkSVGG = drawIndentedLink(board, node, fakeNode, PRIMARY_COLOR, false);
-    const startRectanglePointX = fakeX, startRectanglePointY = fakeY, endRectanglePointX = fakeX + 30, endRectanglePointY = fakeY + 12;
-    const fakeRectangleG = drawRoundRectangle(PlaitBoard.getRoughSVG(board), startRectanglePointX, startRectanglePointY, endRectanglePointX, endRectanglePointY, {
-        stroke: PRIMARY_COLOR,
-        strokeWidth: 2,
-        fill: PRIMARY_COLOR,
-        fillStyle: 'solid'
     });
-    fakeDropNodeG?.appendChild(linkSVGG);
-    fakeDropNodeG?.appendChild(fakeRectangleG);
+    return dropTarget;
 };
-
-/**
- *
- * @param targetNode
- * @param centerPoint
- * @returns DetectResult[] | null
- */
 const directionDetector = (targetNode, centerPoint) => {
     const { x, y, width, height } = getRectangleByNode(targetNode);
     const yCenter = y + height / 2;
@@ -1527,59 +1007,6 @@ const directionDetector = (targetNode, centerPoint) => {
     }
     return null;
 };
-
-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)) {
-            return getAllowedDirection(detectResults, ['right']);
-        }
-        if (isRightLayout(parentLayout)) {
-            return getAllowedDirection(detectResults, ['left']);
-        }
-        if (parentLayout === MindLayoutType.upward) {
-            return getAllowedDirection(detectResults, ['bottom']);
-        }
-        if (parentLayout === MindLayoutType.downward) {
-            return getAllowedDirection(detectResults, ['top']);
-        }
-    }
-    else {
-        const layout = MindQueries.getCorrectLayoutByElement(board, node?.origin);
-        if (isStandardLayout(layout)) {
-            return getAllowedDirection(detectResults, ['top', 'bottom']);
-        }
-        if (isTopLayout(layout)) {
-            return getAllowedDirection(detectResults, ['left', 'right', 'bottom']);
-        }
-        if (isBottomLayout(layout)) {
-            return getAllowedDirection(detectResults, ['left', 'right', 'top']);
-        }
-        if (layout === MindLayoutType.left) {
-            return getAllowedDirection(detectResults, ['right', 'top', 'bottom']);
-        }
-        if (layout === MindLayoutType.right) {
-            return getAllowedDirection(detectResults, ['left', 'top', 'bottom']);
-        }
-    }
-    return null;
-};
-const getAllowedDirection = (detectResults, illegalDirections) => {
-    const directions = detectResults;
-    illegalDirections.forEach(item => {
-        const bottomDirectionIndex = directions.findIndex(direction => direction === item);
-        if (bottomDirectionIndex !== -1) {
-            directions.splice(bottomDirectionIndex, 1);
-        }
-    });
-    return directions.length ? directions : null;
-};
-
 /* 根据布局调整 target 以及 direction */
 const readjustmentDropTarget = (board, dropTarget) => {
     const { target, detectResult } = dropTarget;
@@ -1662,276 +1089,126 @@ const readjustmentDropTarget = (board, dropTarget) => {
     }
     return dropTarget;
 };
-
-const getRectangleByResizingLocation = (abstractRectangle, location, activeHandlePosition, isHorizontal) => {
-    if (isHorizontal) {
-        if (activeHandlePosition === AbstractHandlePosition.start) {
-            return {
-                ...abstractRectangle,
-                y: location,
-                height: abstractRectangle.height + abstractRectangle.y - location
-            };
+const isValidTarget = (origin, target) => {
+    return origin !== target && !isChildElement(origin, target);
+};
+const getPathByDropTarget = (board, dropTarget) => {
+    let targetPath = PlaitBoard.findPath(board, dropTarget?.target);
+    const layout = PlaitMind.isMind(dropTarget?.target)
+        ? getRootLayout(dropTarget?.target)
+        : MindQueries.getCorrectLayoutByElement(board, MindElement.getParent(dropTarget?.target));
+    const children = getNonAbstractChildren(dropTarget.target);
+    // 上下布局：左右是兄弟节点，上下是子节点
+    if (isVerticalLogicLayout(layout)) {
+        if (dropTarget.detectResult === 'top' || dropTarget.detectResult === 'bottom') {
+            targetPath.push(children.length);
         }
-        else {
-            return {
-                ...abstractRectangle,
-                height: location - abstractRectangle.y
-            };
+        // 如果是左，位置不变，右则插入到下一个兄弟节点
+        if (dropTarget.detectResult === 'right') {
+            targetPath = Path.next(targetPath);
         }
     }
-    else {
-        if (activeHandlePosition === AbstractHandlePosition.start) {
-            return {
-                ...abstractRectangle,
-                x: location,
-                width: abstractRectangle.width + abstractRectangle.x - location
-            };
+    // 水平布局/标准布局：上下是兄弟节点，左右是子节点
+    if (isHorizontalLogicLayout(layout)) {
+        if (dropTarget.detectResult === 'right' || dropTarget.detectResult === 'left') {
+            targetPath.push(children.length);
         }
-        else {
-            return {
-                ...abstractRectangle,
-                width: location - abstractRectangle.x
-            };
+        // 如果是上，位置不变，下插入到下一个兄弟节点
+        if (dropTarget.detectResult === 'bottom') {
+            targetPath = Path.next(targetPath);
         }
     }
-};
-const getLocationScope = (board, handlePosition, parentChildren, element, parent, isHorizontal) => {
-    const node = MindElement.getNode(element);
-    const { start, end } = getCorrectStartEnd(node.origin, parent);
-    const startNode = parentChildren[start];
-    const endNode = parentChildren[end];
-    if (handlePosition === AbstractHandlePosition.start) {
-        const abstractNode = parentChildren.filter(child => AbstractNode.isAbstract(child) && child.end < element.start);
-        let minNode;
-        if (abstractNode.length) {
-            const index = abstractNode
-                .map(node => {
-                const { end } = getCorrectStartEnd(node, parent);
-                return end;
-            })
-                .sort((a, b) => b - a)[0];
-            minNode = parentChildren[index + 1];
+    // 缩进布局：上下是兄弟节点，左右是子节点，但上（左上/右上），探测到上是子节点，下则位置不变，反之同理。
+    if (isIndentedLayout(layout)) {
+        if (isTopLayout(layout) && dropTarget.detectResult === 'top') {
+            targetPath = Path.next(targetPath);
         }
-        else {
-            minNode = parentChildren[0];
+        if (isBottomLayout(layout) && dropTarget.detectResult === 'bottom') {
+            targetPath = Path.next(targetPath);
         }
-        const minNodeRectangle = getRectangleByElements(board, [minNode], true);
-        const endNodeRectangle = getRectangleByElements(board, [endNode], false);
-        if (isHorizontal) {
-            return {
-                max: endNodeRectangle.y - ABSTRACT_INCLUDED_OUTLINE_OFFSET,
-                min: minNodeRectangle.y - ABSTRACT_INCLUDED_OUTLINE_OFFSET
-            };
+        if (isLeftLayout(layout) && dropTarget.detectResult === 'left') {
+            targetPath.push(children.length);
         }
-        else {
-            return {
-                max: endNodeRectangle.x - ABSTRACT_INCLUDED_OUTLINE_OFFSET,
-                min: minNodeRectangle.x - ABSTRACT_INCLUDED_OUTLINE_OFFSET
-            };
+        if (isRightLayout(layout) && dropTarget.detectResult === 'right') {
+            targetPath.push(children.length);
         }
     }
+    return targetPath;
+};
+
+function drawRoundRectangleByNode(board, node) {
+    const rectangle = getRectangleByNode(node);
+    return drawRoundRectangleByElement(board, rectangle, node.origin);
+}
+function drawRoundRectangleByElement(board, nodeRectangle, element) {
+    const fill = element.fill ? element.fill : element.isRoot ? DefaultRootStyle.fill : DefaultNodeStyle.fill;
+    const stroke = getStrokeByMindElement(board, element);
+    const strokeWidth = element.strokeWidth ? element.strokeWidth : DefaultNodeStyle.strokeWidth;
+    const nodeG = drawRoundRectangle(PlaitBoard.getRoughSVG(board), nodeRectangle.x, nodeRectangle.y, nodeRectangle.x + nodeRectangle.width, nodeRectangle.y + nodeRectangle.height, {
+        stroke,
+        strokeWidth,
+        fill,
+        fillStyle: 'solid'
+    });
+    return nodeG;
+}
+
+var HorizontalPlacement;
+(function (HorizontalPlacement) {
+    HorizontalPlacement["left"] = "left";
+    HorizontalPlacement["center"] = "center";
+    HorizontalPlacement["right"] = "right";
+})(HorizontalPlacement || (HorizontalPlacement = {}));
+var VerticalPlacement;
+(function (VerticalPlacement) {
+    VerticalPlacement["top"] = "top";
+    VerticalPlacement["middle"] = "middle";
+    VerticalPlacement["bottom"] = "bottom";
+})(VerticalPlacement || (VerticalPlacement = {}));
+
+const getPointByPlacement = (client, placement) => {
+    let x = client.x;
+    let y = client.y;
+    if (placement[0] === HorizontalPlacement.center) {
+        x = client.x + client.width / 2;
+    }
+    if (placement[0] === HorizontalPlacement.right) {
+        x = client.x + client.width;
+    }
+    if (placement[1] === VerticalPlacement.middle) {
+        y = client.y + client.height / 2;
+    }
+    if (placement[1] === VerticalPlacement.bottom) {
+        y = client.y + client.height;
+    }
+    return [x, y];
+};
+const getXDistanceBetweenPoint = (point1, point2, isHorizontalLayout) => {
+    if (isHorizontalLayout) {
+        return Math.abs(point1[0] - point2[0]);
+    }
     else {
-        const abstractNode = parentChildren.filter(child => AbstractNode.isAbstract(child) && child.start > element.end);
-        let maxNode;
-        if (abstractNode.length) {
-            const index = abstractNode
-                .map(node => {
-                const { start } = getCorrectStartEnd(node, parent);
-                return start;
-            })
-                .sort((a, b) => a - b)[0];
-            maxNode = parentChildren[index - 1];
+        return Math.abs(point1[1] - point2[1]);
+    }
+};
+const getYDistanceBetweenPoint = (point1, point2, isHorizontalLayout) => {
+    getXDistanceBetweenPoint(point1, point2, !isHorizontalLayout);
+};
+const getLayoutDirection = (node, isHorizontal) => {
+    if (isHorizontal) {
+        if (node.left) {
+            return LayoutDirection.left;
         }
         else {
-            const children = parentChildren.filter(child => !AbstractNode.isAbstract(child));
-            maxNode = parentChildren[children.length - 1];
+            return LayoutDirection.right;
         }
-        const maxNodeRectangle = getRectangleByElements(board, [maxNode], true);
-        const startNodeRectangle = getRectangleByElements(board, [startNode], false);
-        if (isHorizontal) {
-            return {
-                max: maxNodeRectangle.y + maxNodeRectangle.height + ABSTRACT_INCLUDED_OUTLINE_OFFSET,
-                min: startNodeRectangle.y + startNodeRectangle.height + ABSTRACT_INCLUDED_OUTLINE_OFFSET
-            };
+    }
+    else {
+        if (node.up) {
+            return LayoutDirection.top;
         }
         else {
-            return {
-                max: maxNodeRectangle.x + maxNodeRectangle.width + ABSTRACT_INCLUDED_OUTLINE_OFFSET,
-                min: startNodeRectangle.x + startNodeRectangle.width + ABSTRACT_INCLUDED_OUTLINE_OFFSET
-            };
-        }
-    }
-};
-const getHitAbstractHandle = (board, element, point) => {
-    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);
-    let abstractRectangle = getRectangleByElements(board, includedElements, true);
-    abstractRectangle = RectangleClient.getOutlineRectangle(abstractRectangle, -ABSTRACT_INCLUDED_OUTLINE_OFFSET);
-    const startHandleRec = getAbstractHandleRectangle(abstractRectangle, isHorizontal, AbstractHandlePosition.start);
-    const endHandleRec = getAbstractHandleRectangle(abstractRectangle, isHorizontal, AbstractHandlePosition.end);
-    const pointRec = RectangleClient.toRectangleClient([point, point]);
-    if (RectangleClient.isHit(pointRec, startHandleRec))
-        return AbstractHandlePosition.start;
-    if (RectangleClient.isHit(pointRec, endHandleRec))
-        return AbstractHandlePosition.end;
-    return undefined;
-};
-const getAbstractHandleRectangle = (rectangle, isHorizontal, position) => {
-    let result;
-    if (position === AbstractHandlePosition.start) {
-        const location = isHorizontal ? rectangle.y : rectangle.x;
-        result = getRectangleByResizingLocation(rectangle, location + ABSTRACT_HANDLE_MASK_WIDTH / 2, AbstractHandlePosition.end, isHorizontal);
-        result = getRectangleByResizingLocation(result, location - ABSTRACT_HANDLE_MASK_WIDTH / 2, position, isHorizontal);
-    }
-    else {
-        const location = isHorizontal ? rectangle.y + rectangle.height : rectangle.x + rectangle.width;
-        result = getRectangleByResizingLocation(rectangle, location - ABSTRACT_HANDLE_MASK_WIDTH / 2, AbstractHandlePosition.start, isHorizontal);
-        result = getRectangleByResizingLocation(result, location + ABSTRACT_HANDLE_MASK_WIDTH / 2, position, isHorizontal);
-    }
-    return result;
-};
-function findLocationLeftIndex(board, parentChildren, location, isHorizontal) {
-    const children = parentChildren.filter(child => {
-        return !AbstractNode.isAbstract(child);
-    });
-    const recArray = children.map(child => {
-        return getRectangleByElements(board, [child], false);
-    });
-    const firstRec = getRectangleByElements(board, [children[0]], true);
-    const fakeLeftRec = {
-        x: firstRec.x - firstRec.width,
-        y: firstRec.y - firstRec.height,
-        width: firstRec.width,
-        height: firstRec.height
-    };
-    const lastRec = getRectangleByElements(board, [children[children.length - 1]], true);
-    const fakeRightRec = {
-        x: lastRec.x + lastRec.width,
-        y: lastRec.y + lastRec.height,
-        width: lastRec.width,
-        height: lastRec.height
-    };
-    recArray.push(fakeRightRec);
-    recArray.unshift(fakeLeftRec);
-    for (let i = 0; i < recArray.length - 1; i++) {
-        const recXOrY = isHorizontal ? recArray[i].y : recArray[i].x;
-        const recWidthOrHeight = isHorizontal ? recArray[i].height : recArray[i].width;
-        if (location >= recXOrY + recWidthOrHeight / 2 &&
-            location <= recArray[i + 1][isHorizontal ? 'y' : 'x'] + recArray[i + 1][isHorizontal ? 'height' : 'width'] / 2) {
-            return i - 1;
-        }
-    }
-    return 0;
-}
-function handleTouchedAbstract(board, touchedAbstract, endPoint) {
-    let touchedHandle;
-    const abstract = getSelectedElements(board)
-        .filter(element => AbstractNode.isAbstract(element))
-        .find(element => {
-        touchedHandle = getHitAbstractHandle(board, element, endPoint);
-        return touchedHandle;
-    });
-    if (touchedAbstract === abstract) {
-        return touchedAbstract;
-    }
-    if (touchedAbstract) {
-        const component = PlaitElement.getComponent(touchedAbstract);
-        component.updateAbstractIncludedOutline();
-        touchedAbstract = undefined;
-    }
-    if (abstract) {
-        touchedAbstract = abstract;
-        const component = PlaitElement.getComponent(touchedAbstract);
-        component.updateAbstractIncludedOutline(touchedHandle);
-    }
-    return touchedAbstract;
-}
-
-function drawIndentedLink(board, node, child, defaultStroke = null, needDrawUnderline = true) {
-    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 = 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(board, node.origin);
-    if (beginNode.origin.isRoot) {
-        if (layout === MindLayoutType.leftBottomIndented || layout === MindLayoutType.rightBottomIndented) {
-            beginY += branchWidth;
-        }
-        if (layout === MindLayoutType.leftTopIndented || layout === MindLayoutType.rightTopIndented) {
-            beginY -= branchWidth;
-        }
-    }
-    let curve = [
-        [beginX, beginY],
-        [beginX, beginY],
-        [beginX, beginY],
-        [beginX, endY - (endNode.hGap * 3 * plusMinus[1]) / 5],
-        [beginX, endY - (endNode.hGap * plusMinus[1]) / 5],
-        [beginX + (endNode.hGap * plusMinus[0]) / 4, endY],
-        [beginX + (endNode.hGap * plusMinus[0] * 3) / 5, 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 points = pointsOnBezierCurves(curve);
-    return PlaitBoard.getRoughSVG(board).curve(points, { stroke: branchColor, strokeWidth: branchWidth });
-}
-
-var HorizontalPlacement;
-(function (HorizontalPlacement) {
-    HorizontalPlacement["left"] = "left";
-    HorizontalPlacement["center"] = "center";
-    HorizontalPlacement["right"] = "right";
-})(HorizontalPlacement || (HorizontalPlacement = {}));
-var VerticalPlacement;
-(function (VerticalPlacement) {
-    VerticalPlacement["top"] = "top";
-    VerticalPlacement["middle"] = "middle";
-    VerticalPlacement["bottom"] = "bottom";
-})(VerticalPlacement || (VerticalPlacement = {}));
-
-const getPointByPlacement = (client, placement) => {
-    let x = client.x;
-    let y = client.y;
-    if (placement[0] === HorizontalPlacement.center) {
-        x = client.x + client.width / 2;
-    }
-    if (placement[0] === HorizontalPlacement.right) {
-        x = client.x + client.width;
-    }
-    if (placement[1] === VerticalPlacement.middle) {
-        y = client.y + client.height / 2;
-    }
-    if (placement[1] === VerticalPlacement.bottom) {
-        y = client.y + client.height;
-    }
-    return [x, y];
-};
-const getLayoutDirection = (node, isHorizontal) => {
-    if (isHorizontal) {
-        if (node.left) {
-            return LayoutDirection.left;
-        }
-        else {
-            return LayoutDirection.right;
-        }
-    }
-    else {
-        if (node.up) {
-            return LayoutDirection.top;
-        }
-        else {
-            return LayoutDirection.bottom;
+            return LayoutDirection.bottom;
         }
     }
 };
@@ -1945,7 +1222,7 @@ const getLayoutDirection = (node, isHorizontal) => {
 // 下 -> 上:
 // 1. 终点 -> 起点/终点 -> 起点
 // 2. 加 -> 减
-const movePoint = (point, distance, direction = LayoutDirection.right) => {
+const moveXOfPoint = (point, distance, direction = LayoutDirection.right) => {
     if (direction === LayoutDirection.left) {
         return [point[0] - distance, point[1]];
     }
@@ -1957,6 +1234,15 @@ const movePoint = (point, distance, direction = LayoutDirection.right) => {
     }
     return [point[0] + distance, point[1]];
 };
+const moveYOfPoint = (point, distance, direction = LayoutDirection.right) => {
+    if (direction === LayoutDirection.bottom) {
+        return [point[0] + distance, point[1]];
+    }
+    if (direction === LayoutDirection.top) {
+        return [point[0] + distance, point[1]];
+    }
+    return [point[0], point[1] + distance];
+};
 const transformPlacement = (placement, direction) => {
     // to left
     if (direction === LayoutDirection.left) {
@@ -1997,9 +1283,9 @@ const transformPlacement = (placement, direction) => {
     }
 };
 
-function drawLogicLink(board, node, parent, isHorizontal) {
-    const branchColor = getBranchColorByMindElement(board, node.origin);
-    const branchWidth = getBranchWidthByMindElement(board, node.origin);
+function drawLogicLink(board, node, parent, isHorizontal, defaultStroke = null, defaultStrokeWidth) {
+    const branchColor = defaultStroke || getBranchColorByMindElement(board, node.origin);
+    const branchWidth = defaultStrokeWidth || getBranchWidthByMindElement(board, node.origin);
     const hasStraightLine = !parent.origin.isRoot;
     const parentShape = getShapeByElement(board, parent.origin);
     const shape = node.origin.shape ? node.origin.shape : parentShape;
@@ -2026,158 +1312,589 @@ function drawLogicLink(board, node, parent, isHorizontal) {
     // ② 确定凸出直线，从起始点开始画一条直线，从直线的结束位置绘制曲线，保证收起图标可以完美覆盖起始连线，根节点不需要这条直线
     // 绘制贝塞尔曲线要求，需要增加三个点，正常两个点就可以确定这条直线
     const straightLineDistance = 8;
-    const beginPoint2 = hasStraightLine ? movePoint(beginPoint, straightLineDistance, linkDirection) : beginPoint;
+    const beginPoint2 = hasStraightLine ? moveXOfPoint(beginPoint, straightLineDistance, linkDirection) : beginPoint;
     let straightLine = hasStraightLine ? [beginPoint, beginPoint2, beginPoint2] : [];
     // ③ 确定曲线
     const beginBufferDistance = (parent.hGap + node.hGap) / 3;
     const endBufferDistance = -(parent.hGap + node.hGap) / 2.4;
     let curve = [
         beginPoint2,
-        movePoint(beginPoint2, beginBufferDistance, linkDirection),
-        movePoint(endPoint, endBufferDistance, linkDirection),
+        moveXOfPoint(beginPoint2, beginBufferDistance, linkDirection),
+        moveXOfPoint(endPoint, endBufferDistance, linkDirection),
         endPoint
     ];
     // ④ 下划线绘制，underline shape and horizontal
-    const underlineEnd = movePoint(endPoint, nodeClient.width, linkDirection);
+    const underlineEnd = moveXOfPoint(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: branchWidth });
 }
 
-function getEmojisWidthHeight(board, element) {
-    const options = board.getMindOptions();
-    const count = element.data.emojis.length;
-    const fontSize = getEmojiFontSize(element);
-    return {
-        width: fontSize * count + count * 2 * options.emojiPadding + (count - 1) * options.spaceBetweenEmojis,
-        height: element.height
+const drawFakeDragNode = (board, activeComponent, offsetX, offsetY) => {
+    const dragFakeNodeG = createG();
+    dragFakeNodeG.classList.add('dragging', 'fake-node', 'plait-board-attached');
+    const fakeDraggingNode = {
+        ...activeComponent.node,
+        children: [],
+        x: activeComponent.node.x + offsetX,
+        y: activeComponent.node.y + offsetY
     };
-}
-function getEmojiFontSize(element) {
-    if (PlaitMind.isMind(element)) {
-        return 18 + 2;
+    const textRectangle = getTopicRectangleByNode(board, activeComponent.node);
+    const fakeNodeG = drawRoundRectangleByNode(board, fakeDraggingNode);
+    const richtextG = activeComponent.richtextG?.cloneNode(true);
+    updateForeignObject(richtextG, textRectangle.width + BASE * 10, textRectangle.height, textRectangle.x + offsetX, textRectangle.y + offsetY);
+    dragFakeNodeG?.append(fakeNodeG);
+    dragFakeNodeG?.append(richtextG);
+    return dragFakeNodeG;
+};
+const drawFakeDropNodeByPath = (board, target, path) => {
+    const fakeDropNodeG = createG();
+    const parent = PlaitNode.get(board, Path.parent(path));
+    const layout = MindQueries.getLayoutByElement(parent);
+    const isHorizontal = isHorizontalLayout(layout);
+    const { hasNextNode, hasPreviousNode } = getPreviousAndNextByPath(parent, target, path);
+    const width = 30;
+    const height = 12;
+    let fakeNode, centerPoint, basicNode, linkDirection;
+    if (!hasPreviousNode && !hasNextNode) {
+        const parentNode = MindElement.getNode(parent);
+        const parentRect = getRectangleByNode(parentNode);
+        linkDirection = getLayoutDirection(parentNode, isHorizontal);
+        basicNode = parentNode;
+        const placement = [HorizontalPlacement.right, VerticalPlacement.middle];
+        transformPlacement(placement, linkDirection);
+        const parentCenterPoint = getPointByPlacement(parentRect, placement);
+        if (isIndentedLayout(layout)) {
+            const placement = [
+                HorizontalPlacement.center,
+                isTopLayout(layout) ? VerticalPlacement.top : VerticalPlacement.bottom
+            ];
+            const parentCenterPoint = getPointByPlacement(parentRect, placement);
+            centerPoint = moveXOfPoint(parentCenterPoint, height, linkDirection);
+            centerPoint[1] = isTopLayout(layout) ? centerPoint[1] - height : centerPoint[1] + height;
+        }
+        else {
+            centerPoint = moveXOfPoint(parentCenterPoint, width, linkDirection);
+        }
+    }
+    else if (!hasPreviousNode && hasNextNode) {
+        const nextElement = PlaitNode.get(board, path);
+        basicNode = MindElement.getNode(nextElement);
+        const nextRect = getRectangleByNode(basicNode);
+        linkDirection = getLayoutDirection(basicNode, isHorizontal);
+        const placement = [HorizontalPlacement.left, VerticalPlacement.top];
+        transformPlacement(placement, linkDirection);
+        let offset = -height;
+        if (MindElement.isIndentedLayout(parent)) {
+            offset = isTopLayout(layout) ? offset / 2 + basicNode.height - basicNode.vGap : 0;
+        }
+        centerPoint = getPointByPlacement(nextRect, placement);
+        centerPoint = moveYOfPoint(centerPoint, offset, linkDirection);
+    }
+    else if (hasPreviousNode && !hasNextNode) {
+        const previousElement = PlaitNode.get(board, Path.previous(path));
+        basicNode = MindElement.getNode(previousElement);
+        const previousRect = getRectangleByNode(basicNode);
+        linkDirection = getLayoutDirection(basicNode, isHorizontal);
+        const placement = [HorizontalPlacement.left, VerticalPlacement.bottom];
+        transformPlacement(placement, linkDirection);
+        let offset = height;
+        if (MindElement.isIndentedLayout(parent)) {
+            offset = isTopLayout(layout) ? -offset - (basicNode.height - basicNode.vGap) : offset;
+        }
+        centerPoint = getPointByPlacement(previousRect, placement);
+        centerPoint = moveYOfPoint(centerPoint, offset, linkDirection);
     }
     else {
-        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 {
+        const previousElement = PlaitNode.get(board, Path.previous(path));
+        basicNode = MindElement.getNode(previousElement);
+        const previousRect = getRectangleByNode(basicNode);
+        const nextElement = PlaitNode.get(board, path);
+        const nextNode = MindElement.getNode(nextElement);
+        const nextRect = getRectangleByNode(nextNode);
+        const beginPlacement = [HorizontalPlacement.left, VerticalPlacement.bottom];
+        const endPlacement = [HorizontalPlacement.left, VerticalPlacement.top];
+        linkDirection = getLayoutDirection(basicNode, isHorizontal);
+        transformPlacement(beginPlacement, linkDirection);
+        transformPlacement(endPlacement, linkDirection);
+        const previousPoint = getPointByPlacement(previousRect, beginPlacement);
+        const nextPoint = getPointByPlacement(nextRect, endPlacement);
+        centerPoint = [(previousPoint[0] + nextPoint[0]) / 2, (previousPoint[1] + nextPoint[1]) / 2];
+    }
+    let cornerPoint = centerPoint, oppositePoint = centerPoint;
+    const offsetY = isHorizontal ? height : width;
+    const offsetX = isHorizontal ? width : height;
+    cornerPoint = moveYOfPoint(cornerPoint, -offsetY / 2, linkDirection);
+    oppositePoint = moveYOfPoint(oppositePoint, offsetY / 2, linkDirection);
+    oppositePoint = moveXOfPoint(oppositePoint, offsetX, linkDirection);
+    const x = Math.min(cornerPoint[0], oppositePoint[0]);
+    const y = Math.min(cornerPoint[1], oppositePoint[1]);
+    fakeNode = {
+        ...basicNode,
         x,
         y,
         width,
-        height
+        height,
+        hGap: MindElement.isIndentedLayout(parent) ? BASE * 4 + (basicNode.origin.strokeWidth || STROKE_WIDTH) : 0,
+        vGap: MindElement.isIndentedLayout(parent) ? BASE : 0
     };
-}
-function getEmojiForeignRectangle(board, element) {
-    let { x, y } = getRectangleByNode(MindElement.getNode(element));
-    x = x + NodeSpace.getEmojiLeftSpace(board, element);
-    const { width, height } = getEmojisWidthHeight(board, element);
+    const fakeRectangleG = drawRoundRectangle(PlaitBoard.getRoughSVG(board), fakeNode.x, fakeNode.y, fakeNode.x + width, fakeNode.y + height, {
+        stroke: PRIMARY_COLOR,
+        strokeWidth: 2,
+        fill: PRIMARY_COLOR,
+        fillStyle: 'solid'
+    });
+    const link = MindElement.isIndentedLayout(parent)
+        ? drawIndentedLink(board, MindElement.getNode(parent), fakeNode, PRIMARY_COLOR, false, STROKE_WIDTH)
+        : drawLogicLink(board, fakeNode, MindElement.getNode(parent), isHorizontal, PRIMARY_COLOR, STROKE_WIDTH);
+    fakeDropNodeG?.appendChild(link);
+    fakeDropNodeG?.appendChild(fakeRectangleG);
+    return fakeDropNodeG;
+};
+const getPreviousAndNextByPath = (parent, target, path) => {
+    const children = getNonAbstractChildren(parent);
+    let hasPreviousNode = path[path.length - 1] !== 0;
+    let hasNextNode = path[path.length - 1] !== (children?.length || 0);
+    if (PlaitMind.isMind(parent) && isStandardLayout(getRootLayout(parent))) {
+        const dropStandardRightBottom = target === parent.children[parent.rightNodeCount - 1] && path[path.length - 1] === parent.rightNodeCount;
+        const dropStandardLeftTop = target === parent.children[parent.rightNodeCount] && path[path.length - 1] === parent.rightNodeCount;
+        if (dropStandardRightBottom) {
+            hasPreviousNode = true;
+            hasNextNode = false;
+        }
+        if (dropStandardLeftTop) {
+            hasPreviousNode = false;
+            hasNextNode = true;
+        }
+    }
+    if (parent.isCollapsed) {
+        hasNextNode = false;
+        hasPreviousNode = false;
+    }
     return {
-        x,
-        y,
-        width,
-        height: height + NodeSpace.getEmojiTopSpace(element) * 2
+        hasPreviousNode,
+        hasNextNode
     };
+};
+
+const separateChildren = (parentElement) => {
+    const rightNodeCount = parentElement.rightNodeCount;
+    const children = parentElement.children;
+    let rightChildren = [], leftChildren = [];
+    for (let i = 0; i < children.length; i++) {
+        const child = children[i];
+        if (AbstractNode.isAbstract(child) && child.end < rightNodeCount) {
+            rightChildren.push(child);
+            continue;
+        }
+        if (AbstractNode.isAbstract(child) && child.start >= rightNodeCount) {
+            leftChildren.push(child);
+            continue;
+        }
+        if (i < rightNodeCount) {
+            rightChildren.push(child);
+        }
+        else {
+            leftChildren.push(child);
+        }
+    }
+    return { leftChildren, rightChildren };
+};
+const isSetAbstract = (element) => {
+    return !!getCorrespondingAbstract(element);
+};
+const canSetAbstract = (element) => {
+    return !PlaitElement.isRootElement(element) && !AbstractNode.isAbstract(element) && !isSetAbstract(element);
+};
+const getCorrespondingAbstract = (element) => {
+    const parent = MindElement.findParent(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.findParent(element);
+    if (!parent)
+        return [];
+    const index = parent.children.indexOf(element);
+    return parent.children.filter(child => AbstractNode.isAbstract(child) && child.start > index);
+};
+/**
+ * return corresponding abstract that is not child of elements
+ */
+const getOverallAbstracts = (board, elements) => {
+    const overallAbstracts = [];
+    elements
+        .filter(value => !AbstractNode.isAbstract(value) && !PlaitMind.isMind(value))
+        .forEach(value => {
+        const abstract = getCorrespondingAbstract(value);
+        if (abstract && elements.indexOf(abstract) === -1 && 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;
+};
+/**
+ * abstract node is valid when elements contains at least one element it is referenced with
+ */
+const getValidAbstractRefs = (board, elements) => {
+    const validAbstractRefs = [];
+    elements
+        .filter(value => !AbstractNode.isAbstract(value) && !PlaitMind.isMind(value))
+        .forEach(value => {
+        const abstract = getCorrespondingAbstract(value);
+        if (abstract && elements.indexOf(abstract) > 0) {
+            const index = validAbstractRefs.findIndex(value => value.abstract === abstract);
+            if (index === -1) {
+                validAbstractRefs.push({
+                    abstract: abstract,
+                    references: [value]
+                });
+            }
+            else {
+                validAbstractRefs[index].references.push(value);
+            }
+        }
+    });
+    return validAbstractRefs;
+};
+function getRelativeStartEndByAbstractRef(abstractRef, elements) {
+    const start = elements.indexOf(abstractRef.references[0]);
+    const end = elements.indexOf(abstractRef.references[abstractRef.references.length - 1]);
+    return { start, end };
 }
-const isHitEmojis = (board, element, point) => {
-    return RectangleClient.isHit(RectangleClient.toRectangleClient([point, point]), getEmojiRectangle(board, element));
+const insertElementHandleAbstract = (board, path, step = 1, 
+//由此区分拖拽和新增到概要概括最后一个节点
+isExtendPreviousNode = true, effectedAbstracts = 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(selectedElement);
+    }
+    if (behindAbstracts.length) {
+        behindAbstracts.forEach(abstract => {
+            let newProperties = effectedAbstracts.get(abstract);
+            if (!newProperties) {
+                newProperties = { start: 0, end: 0 };
+                effectedAbstracts.set(abstract, newProperties);
+            }
+            newProperties.start = newProperties.start + step;
+            newProperties.end = newProperties.end + step;
+        });
+    }
+    if (!hasPreviousNode) {
+        return effectedAbstracts;
+    }
+    const selectedElement = PlaitNode.get(board, Path.previous(path));
+    const correspondingAbstract = getCorrespondingAbstract(selectedElement);
+    const isDragToLast = !isExtendPreviousNode && correspondingAbstract && correspondingAbstract.end === path[path.length - 1] - 1;
+    if (correspondingAbstract && !isDragToLast) {
+        let newProperties = effectedAbstracts.get(correspondingAbstract);
+        if (!newProperties) {
+            newProperties = { start: 0, end: 0 };
+            effectedAbstracts.set(correspondingAbstract, newProperties);
+        }
+        newProperties.end = newProperties.end + step;
+    }
+    return effectedAbstracts;
+};
+const deleteElementHandleAbstract = (board, deletableElements, effectedAbstracts = new Map()) => {
+    deletableElements.forEach(node => {
+        if (!PlaitMind.isMind(node)) {
+            const behindAbstracts = getBehindAbstracts(node).filter(abstract => !deletableElements.includes(abstract));
+            if (behindAbstracts.length) {
+                behindAbstracts.forEach(abstract => {
+                    let newProperties = effectedAbstracts.get(abstract);
+                    if (!newProperties) {
+                        newProperties = { start: 0, end: 0 };
+                        effectedAbstracts.set(abstract, newProperties);
+                    }
+                    newProperties.start = newProperties.start - 1;
+                    newProperties.end = newProperties.end - 1;
+                });
+            }
+            const correspondingAbstract = getCorrespondingAbstract(node);
+            if (correspondingAbstract && !deletableElements.includes(correspondingAbstract)) {
+                let newProperties = effectedAbstracts.get(correspondingAbstract);
+                if (!newProperties) {
+                    newProperties = { start: 0, end: 0 };
+                    effectedAbstracts.set(correspondingAbstract, newProperties);
+                }
+                newProperties.end = newProperties.end - 1;
+            }
+        }
+    });
+    return effectedAbstracts;
 };
 
-const NodeDefaultSpace = {
-    horizontal: {
-        nodeAndText: BASE * 3,
-        emojiAndText: BASE * 1.5
-    },
-    vertical: {
-        nodeAndText: BASE * 1.5
+var AbstractHandlePosition;
+(function (AbstractHandlePosition) {
+    AbstractHandlePosition["start"] = "start";
+    AbstractHandlePosition["end"] = "end";
+})(AbstractHandlePosition || (AbstractHandlePosition = {}));
+var AbstractResizeState;
+(function (AbstractResizeState) {
+    AbstractResizeState["start"] = "start";
+    AbstractResizeState["resizing"] = "resizing";
+    AbstractResizeState["end"] = "end";
+})(AbstractResizeState || (AbstractResizeState = {}));
+
+const getRectangleByResizingLocation = (abstractRectangle, location, activeHandlePosition, isHorizontal) => {
+    if (isHorizontal) {
+        if (activeHandlePosition === AbstractHandlePosition.start) {
+            return {
+                ...abstractRectangle,
+                y: location,
+                height: abstractRectangle.height + abstractRectangle.y - location
+            };
+        }
+        else {
+            return {
+                ...abstractRectangle,
+                height: location - abstractRectangle.y
+            };
+        }
+    }
+    else {
+        if (activeHandlePosition === AbstractHandlePosition.start) {
+            return {
+                ...abstractRectangle,
+                x: location,
+                width: abstractRectangle.width + abstractRectangle.x - location
+            };
+        }
+        else {
+            return {
+                ...abstractRectangle,
+                width: location - abstractRectangle.x
+            };
+        }
+    }
+};
+const getLocationScope = (board, handlePosition, parentChildren, element, parent, isHorizontal) => {
+    const node = MindElement.getNode(element);
+    const { start, end } = getCorrectStartEnd(node.origin, parent);
+    const startNode = parentChildren[start];
+    const endNode = parentChildren[end];
+    if (handlePosition === AbstractHandlePosition.start) {
+        const abstractNode = parentChildren.filter(child => AbstractNode.isAbstract(child) && child.end < element.start);
+        let minNode;
+        if (abstractNode.length) {
+            const index = abstractNode
+                .map(node => {
+                const { end } = getCorrectStartEnd(node, parent);
+                return end;
+            })
+                .sort((a, b) => b - a)[0];
+            minNode = parentChildren[index + 1];
+        }
+        else {
+            minNode = parentChildren[0];
+        }
+        const minNodeRectangle = getRectangleByElements(board, [minNode], true);
+        const endNodeRectangle = getRectangleByElements(board, [endNode], false);
+        if (isHorizontal) {
+            return {
+                max: endNodeRectangle.y - ABSTRACT_INCLUDED_OUTLINE_OFFSET,
+                min: minNodeRectangle.y - ABSTRACT_INCLUDED_OUTLINE_OFFSET
+            };
+        }
+        else {
+            return {
+                max: endNodeRectangle.x - ABSTRACT_INCLUDED_OUTLINE_OFFSET,
+                min: minNodeRectangle.x - ABSTRACT_INCLUDED_OUTLINE_OFFSET
+            };
+        }
+    }
+    else {
+        const abstractNode = parentChildren.filter(child => AbstractNode.isAbstract(child) && child.start > element.end);
+        let maxNode;
+        if (abstractNode.length) {
+            const index = abstractNode
+                .map(node => {
+                const { start } = getCorrectStartEnd(node, parent);
+                return start;
+            })
+                .sort((a, b) => a - b)[0];
+            maxNode = parentChildren[index - 1];
+        }
+        else {
+            const children = parentChildren.filter(child => !AbstractNode.isAbstract(child));
+            maxNode = parentChildren[children.length - 1];
+        }
+        const maxNodeRectangle = getRectangleByElements(board, [maxNode], true);
+        const startNodeRectangle = getRectangleByElements(board, [startNode], false);
+        if (isHorizontal) {
+            return {
+                max: maxNodeRectangle.y + maxNodeRectangle.height + ABSTRACT_INCLUDED_OUTLINE_OFFSET,
+                min: startNodeRectangle.y + startNodeRectangle.height + ABSTRACT_INCLUDED_OUTLINE_OFFSET
+            };
+        }
+        else {
+            return {
+                max: maxNodeRectangle.x + maxNodeRectangle.width + ABSTRACT_INCLUDED_OUTLINE_OFFSET,
+                min: startNodeRectangle.x + startNodeRectangle.width + ABSTRACT_INCLUDED_OUTLINE_OFFSET
+            };
+        }
+    }
+};
+const getHitAbstractHandle = (board, element, point) => {
+    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);
+    let abstractRectangle = getRectangleByElements(board, includedElements, true);
+    abstractRectangle = RectangleClient.getOutlineRectangle(abstractRectangle, -ABSTRACT_INCLUDED_OUTLINE_OFFSET);
+    const startHandleRec = getAbstractHandleRectangle(abstractRectangle, isHorizontal, AbstractHandlePosition.start);
+    const endHandleRec = getAbstractHandleRectangle(abstractRectangle, isHorizontal, AbstractHandlePosition.end);
+    const pointRec = RectangleClient.toRectangleClient([point, point]);
+    if (RectangleClient.isHit(pointRec, startHandleRec))
+        return AbstractHandlePosition.start;
+    if (RectangleClient.isHit(pointRec, endHandleRec))
+        return AbstractHandlePosition.end;
+    return undefined;
+};
+const getAbstractHandleRectangle = (rectangle, isHorizontal, position) => {
+    let result;
+    if (position === AbstractHandlePosition.start) {
+        const location = isHorizontal ? rectangle.y : rectangle.x;
+        result = getRectangleByResizingLocation(rectangle, location + ABSTRACT_HANDLE_MASK_WIDTH / 2, AbstractHandlePosition.end, isHorizontal);
+        result = getRectangleByResizingLocation(result, location - ABSTRACT_HANDLE_MASK_WIDTH / 2, position, isHorizontal);
+    }
+    else {
+        const location = isHorizontal ? rectangle.y + rectangle.height : rectangle.x + rectangle.width;
+        result = getRectangleByResizingLocation(rectangle, location - ABSTRACT_HANDLE_MASK_WIDTH / 2, AbstractHandlePosition.start, isHorizontal);
+        result = getRectangleByResizingLocation(result, location + ABSTRACT_HANDLE_MASK_WIDTH / 2, position, isHorizontal);
+    }
+    return result;
+};
+function findLocationLeftIndex(board, parentChildren, location, isHorizontal) {
+    const children = parentChildren.filter(child => {
+        return !AbstractNode.isAbstract(child);
+    });
+    const recArray = children.map(child => {
+        return getRectangleByElements(board, [child], false);
+    });
+    const firstRec = getRectangleByElements(board, [children[0]], true);
+    const fakeLeftRec = {
+        x: firstRec.x - firstRec.width,
+        y: firstRec.y - firstRec.height,
+        width: firstRec.width,
+        height: firstRec.height
+    };
+    const lastRec = getRectangleByElements(board, [children[children.length - 1]], true);
+    const fakeRightRec = {
+        x: lastRec.x + lastRec.width,
+        y: lastRec.y + lastRec.height,
+        width: lastRec.width,
+        height: lastRec.height
+    };
+    recArray.push(fakeRightRec);
+    recArray.unshift(fakeLeftRec);
+    for (let i = 0; i < recArray.length - 1; i++) {
+        const recXOrY = isHorizontal ? recArray[i].y : recArray[i].x;
+        const recWidthOrHeight = isHorizontal ? recArray[i].height : recArray[i].width;
+        if (location >= recXOrY + recWidthOrHeight / 2 &&
+            location <= recArray[i + 1][isHorizontal ? 'y' : 'x'] + recArray[i + 1][isHorizontal ? 'height' : 'width'] / 2) {
+            return i - 1;
+        }
     }
-};
-const RootDefaultSpace = {
-    horizontal: {
-        nodeAndText: BASE * 4,
-        emojiAndText: BASE * 2
-    },
-    vertical: {
-        nodeAndText: BASE * 2
+    return 0;
+}
+function handleTouchedAbstract(board, touchedAbstract, endPoint) {
+    let touchedHandle;
+    const abstract = getSelectedElements(board)
+        .filter(element => AbstractNode.isAbstract(element))
+        .find(element => {
+        touchedHandle = getHitAbstractHandle(board, element, endPoint);
+        return touchedHandle;
+    });
+    if (touchedAbstract === abstract) {
+        return touchedAbstract;
     }
-};
-const getHorizontalSpaceBetweenNodeAndText = (board, element) => {
-    const isMind = PlaitMind.isMind(element);
-    const nodeAndText = isMind ? RootDefaultSpace.horizontal.nodeAndText : NodeDefaultSpace.horizontal.nodeAndText;
-    return nodeAndText;
-};
-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(board, element);
-        if (MindElement.hasEmojis(element)) {
-            return (NodeSpace.getEmojiLeftSpace(board, element) +
-                getEmojisWidthHeight(board, element).width +
-                getSpaceEmojiAndText(element) +
-                element.width +
-                nodeAndText);
-        }
-        return nodeAndText + element.width + nodeAndText;
-    },
-    getNodeHeight(element) {
-        const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
-        return nodeAndText + element.height + nodeAndText;
-    },
-    getTextLeftSpace(board, element) {
-        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
-        if (MindElement.hasEmojis(element)) {
-            return NodeSpace.getEmojiLeftSpace(board, element) + getEmojisWidthHeight(board, element).width + getSpaceEmojiAndText(element);
+    if (touchedAbstract) {
+        const component = PlaitElement.getComponent(touchedAbstract);
+        component.updateAbstractIncludedOutline();
+        touchedAbstract = undefined;
+    }
+    if (abstract) {
+        touchedAbstract = abstract;
+        const component = PlaitElement.getComponent(touchedAbstract);
+        component.updateAbstractIncludedOutline(touchedHandle);
+    }
+    return touchedAbstract;
+}
+
+function drawIndentedLink(board, node, child, defaultStroke = null, needDrawUnderline = true, defaultStrokeWidth) {
+    const branchWidth = defaultStrokeWidth || 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 = 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(board, node.origin);
+    if (beginNode.origin.isRoot) {
+        if (layout === MindLayoutType.leftBottomIndented || layout === MindLayoutType.rightBottomIndented) {
+            beginY += branchWidth;
         }
-        else {
-            return nodeAndText;
+        if (layout === MindLayoutType.leftTopIndented || layout === MindLayoutType.rightTopIndented) {
+            beginY -= branchWidth;
         }
-    },
-    getTextTopSpace(element) {
-        const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
-        return nodeAndText;
-    },
-    getEmojiLeftSpace(board, element) {
-        const options = board.getMindOptions();
-        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
-        return nodeAndText - options.emojiPadding;
-    },
-    getEmojiTopSpace(element) {
-        const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
-        return nodeAndText;
     }
-};
+    let curve = [
+        [beginX, beginY],
+        [beginX, beginY],
+        [beginX, beginY],
+        [beginX, endY - (endNode.hGap * 3 * plusMinus[1]) / 5],
+        [beginX, endY - (endNode.hGap * plusMinus[1]) / 5],
+        [beginX + (endNode.hGap * plusMinus[0]) / 4, endY],
+        [beginX + (endNode.hGap * plusMinus[0] * 3) / 5, 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 points = pointsOnBezierCurves(curve);
+    return PlaitBoard.getRoughSVG(board).curve(points, { stroke: branchColor, strokeWidth: branchWidth });
+}
 
-function drawMindNodeRichtext(board, node, viewContainerRef) {
-    const { x, y, width, height } = getRichtextRectangleByNode(board, node);
+function drawTopicByNode(board, node, viewContainerRef) {
+    const rectangle = getTopicRectangleByNode(board, node);
+    return drawTopicByElement(board, rectangle, node.origin, viewContainerRef);
+}
+function drawTopicByElement(board, rectangle, element, viewContainerRef) {
+    const containerRef = viewContainerRef || PlaitBoard.getComponent(board).viewContainerRef;
     const classList = [];
-    if (node.origin.isRoot) {
+    if (element.isRoot) {
         classList.push('root-node');
         classList.push('font-size-18');
     }
-    else if (node.parent?.origin?.isRoot) {
-        classList.push('root-child-node');
-    }
     else {
         classList.push('child-node');
     }
     // COMPAT: last character can not show in safari browser
-    return drawRichtext(x, y, width, height, node.origin.data.topic, viewContainerRef, classList);
+    return drawRichtext(rectangle.x, rectangle.y, rectangle.width, rectangle.height, element.data.topic, containerRef, classList);
 }
 function updateMindNodeTopicSize(board, node, g, isEditable) {
-    const { x, y, width, height } = getRichtextRectangleByNode(board, node);
+    const { x, y, width, height } = getTopicRectangleByNode(board, node);
     if (isEditable) {
         // add 999， avoid changing lines when paste more text
         updateForeignObject(g, width + 999, height + 999, x, y);
@@ -2187,28 +1904,6 @@ function updateMindNodeTopicSize(board, node, g, isEditable) {
         updateForeignObject(g, width, height, x, y);
     }
 }
-function getRichtextRectangleByNode(board, node) {
-    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 ? DefaultRootStyle.fill : DefaultNodeStyle.fill;
-    const stroke = getStrokeByMindElement(board, node.origin);
-    const strokeWidth = node.origin.strokeWidth ? node.origin.strokeWidth : DefaultNodeStyle.strokeWidth;
-    const nodeG = drawRoundRectangle(PlaitBoard.getRoughSVG(board), x, y, x + width, y + height, {
-        stroke,
-        strokeWidth,
-        fill,
-        fillStyle: 'solid'
-    });
-    return nodeG;
-}
 
 function drawAbstractLink(board, node, isHorizontal) {
     const linkPadding = 15;
@@ -2230,18 +1925,12 @@ function drawAbstractLink(board, node, isHorizontal) {
     let bezierBeginPoint = getPointByPlacement(includedElementsRectangle, bezierBeginPlacement);
     let bezierEndPoint = getPointByPlacement(includedElementsRectangle, bezierEndPlacement);
     let abstractConnectorPoint = getPointByPlacement(abstractRectangle, abstractConnectorPlacement);
-    let curveDistance = 0;
-    if (isHorizontal) {
-        curveDistance = Math.abs(abstractConnectorPoint[0] - bezierBeginPoint[0]) - linkPadding * 2;
-    }
-    else {
-        curveDistance = Math.abs(abstractConnectorPoint[1] - bezierBeginPoint[1]) - linkPadding * 2;
-    }
-    bezierBeginPoint = movePoint(bezierBeginPoint, linkPadding, linkDirection);
-    let c1 = movePoint(bezierBeginPoint, curveDistance, linkDirection);
-    bezierEndPoint = movePoint(bezierEndPoint, linkPadding, linkDirection);
-    let c2 = movePoint(bezierEndPoint, curveDistance, linkDirection);
-    let bezierConnectorPoint = movePoint(abstractConnectorPoint, -linkPadding, linkDirection);
+    let curveDistance = getXDistanceBetweenPoint(abstractConnectorPoint, bezierBeginPoint, isHorizontal) - linkPadding * 2;
+    bezierBeginPoint = moveXOfPoint(bezierBeginPoint, linkPadding, linkDirection);
+    let c1 = moveXOfPoint(bezierBeginPoint, curveDistance, linkDirection);
+    bezierEndPoint = moveXOfPoint(bezierEndPoint, linkPadding, linkDirection);
+    let c2 = moveXOfPoint(bezierEndPoint, curveDistance, linkDirection);
+    let bezierConnectorPoint = moveXOfPoint(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: branchColor,
         strokeWidth: branchWidth
@@ -2285,37 +1974,236 @@ class EmojisDrawer {
         this.viewContainerRef = viewContainerRef;
         this.emojiDrawers = [];
     }
-    drawEmojis(element) {
-        this.destroy();
-        if (MindElement.hasEmojis(element)) {
-            this.g = createG();
-            this.g.classList.add('emojis');
-            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');
-            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;
+    drawEmojis(element) {
+        this.destroy();
+        if (MindElement.hasEmojis(element)) {
+            this.g = createG();
+            this.g.classList.add('emojis');
+            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');
+            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 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];
+        setAbstractByElements(board, groupParent, group);
+    });
+};
+const setAbstractByElements = (board, groupParent, group) => {
+    const indexArray = group.map(child => groupParent.children.indexOf(child)).sort((a, b) => a - b);
+    const rightNodeCount = groupParent?.rightNodeCount;
+    const start = indexArray[0], end = indexArray[indexArray.length - 1];
+    if (isStandardLayout(MindQueries.getLayoutByElement(groupParent)) &&
+        rightNodeCount &&
+        start < rightNodeCount &&
+        end >= rightNodeCount) {
+        const childrenLength = groupParent.children.length;
+        const path = [...PlaitBoard.findPath(board, groupParent), childrenLength];
+        const leftChildren = indexArray.filter(index => index >= rightNodeCount);
+        const rightChildren = indexArray.filter(index => index < rightNodeCount);
+        insertAbstractNode(board, path, rightChildren[0], rightChildren[rightChildren.length - 1]);
+        insertAbstractNode(board, Path.next(path), leftChildren[0], leftChildren[leftChildren.length - 1]);
+    }
+    else {
+        const path = [...PlaitBoard.findPath(board, groupParent), groupParent.children.length];
+        insertAbstractNode(board, path, start, end);
+    }
+};
+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 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 removeElements = (board, elements) => {
+    const deletableElements = getFirstLevelElement(elements).reverse();
+    //翻转，从下到上修改，防止找不到 path
+    deletableElements
+        .map(element => {
+        const path = PlaitBoard.findPath(board, element);
+        return () => {
+            if (isInRightBranchOfStandardLayout(element)) {
+                changeRightNodeCount(board, path.slice(0, 1), -1);
+            }
+            Transforms.removeNode(board, path);
+        };
+    })
+        .forEach(action => {
+        action();
+    });
+};
+const insertNodes = (board, elements, path) => {
+    const pathRef = board.pathRef(path);
+    elements.forEach(element => {
+        if (pathRef.current) {
+            Transforms.insertNode(board, element, pathRef.current);
         }
-        return undefined;
+    });
+    pathRef.unref();
+};
+const insertAbstractNodes = (board, validAbstractRefs, elements, path) => {
+    const parent = PlaitNode.get(board, Path$1.parent(path));
+    const abstractPath = [...Path$1.parent(path), parent.children?.length];
+    const abstracts = validAbstractRefs.map(refs => {
+        const { start, end } = getRelativeStartEndByAbstractRef(refs, elements);
+        return {
+            ...refs.abstract,
+            start: start + path[path.length - 1],
+            end: end + path[path.length - 1]
+        };
+    });
+    insertNodes(board, abstracts, abstractPath);
+};
+
+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;
     }
-    destroy() {
-        if (this.g) {
-            this.g.remove();
+    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 => drawer.destroy());
-        this.emojiDrawers = [];
-    }
-}
+        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,
+    removeElements,
+    insertNodes,
+    insertAbstractNodes
+};
 
 function drawAbstractIncludedOutline(board, roughSVG, element, activeHandlePosition, resizingLocation) {
     const abstractIncludedG = createG();
@@ -2340,10 +2228,10 @@ function drawAbstractIncludedOutline(board, roughSVG, element, activeHandlePosit
     transformPlacement(endPlacement, linkDirection);
     let startCenterPoint = getPointByPlacement(abstractRectangle, startPlacement);
     let endCenterPoint = getPointByPlacement(abstractRectangle, endPlacement);
-    const startPoint1 = movePoint(startCenterPoint, -ABSTRACT_HANDLE_LENGTH / 2, linkDirection);
-    const startPoint2 = movePoint(startCenterPoint, ABSTRACT_HANDLE_LENGTH / 2, linkDirection);
-    const endPoint1 = movePoint(endCenterPoint, -ABSTRACT_HANDLE_LENGTH / 2, linkDirection);
-    const endPoint2 = movePoint(endCenterPoint, ABSTRACT_HANDLE_LENGTH / 2, linkDirection);
+    const startPoint1 = moveXOfPoint(startCenterPoint, -ABSTRACT_HANDLE_LENGTH / 2, linkDirection);
+    const startPoint2 = moveXOfPoint(startCenterPoint, ABSTRACT_HANDLE_LENGTH / 2, linkDirection);
+    const endPoint1 = moveXOfPoint(endCenterPoint, -ABSTRACT_HANDLE_LENGTH / 2, linkDirection);
+    const endPoint2 = moveXOfPoint(endCenterPoint, ABSTRACT_HANDLE_LENGTH / 2, linkDirection);
     const startHandle = roughSVG.line(startPoint1[0], startPoint1[1], startPoint2[0], startPoint2[1], getHandleOption(activeHandlePosition === AbstractHandlePosition.start));
     const endHandle = roughSVG.line(endPoint1[0], endPoint1[1], endPoint2[0], endPoint2[1], getHandleOption(activeHandlePosition === AbstractHandlePosition.end));
     changeBoardClass(board, activeHandlePosition, isHorizontal);
@@ -2694,7 +2582,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         const shape = getShapeByElement(this.board, this.node.origin);
         switch (shape) {
             case MindElementShape.roundRectangle:
-                this.shapeG = drawRectangleNode(this.board, this.node);
+                this.shapeG = drawRoundRectangleByNode(this.board, this.node);
                 this.g.prepend(this.shapeG);
                 break;
             default:
@@ -2850,7 +2738,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         }
     }
     drawRichtext() {
-        const { richtextG, richtextComponentRef, foreignObject } = drawMindNodeRichtext(this.board, this.node, this.viewContainerRef);
+        const { richtextG, richtextComponentRef, foreignObject } = drawTopicByNode(this.board, this.node, this.viewContainerRef);
         this.richtextComponentRef = richtextComponentRef;
         this.richtextG = richtextG;
         this.foreignObject = foreignObject;
@@ -2871,7 +2759,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         }
         // interactive
         fromEvent(collapseG, 'mouseup')
-            .pipe(filter(() => !this.handActive || this.board.options.readonly), take(1))
+            .pipe(filter(() => !this.handActive || !PlaitBoard.isReadonly(this.board)), take(1))
             .subscribe(() => {
             const isCollapsed = !this.node.origin.isCollapsed;
             const newElement = { isCollapsed };
@@ -3052,7 +2940,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         });
         const mousedown$ = fromEvent(document, 'mousedown').subscribe((event) => {
             const point = transformPoint(this.board, toPoint(event.x, event.y, PlaitBoard.getHost(this.board)));
-            const clickInNode = hitMindElement(this.board, point, this.element);
+            const clickInNode = isHitMindElement(this.board, point, this.element);
             if (clickInNode && !hasEditableTarget(richtextInstance.editor, event.target)) {
                 event.preventDefault();
             }
@@ -3115,6 +3003,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         super.ngOnDestroy();
         this.abstractIncludedOutlineG?.remove();
         this.destroyRichtext();
+        this.emojisDrawer.destroy();
         this.destroy$.next();
         this.destroy$.complete();
         if (ELEMENT_TO_NODE.get(this.element) === this.node) {
@@ -3169,7 +3058,7 @@ const getLayoutOptions = (board) => {
     }
     return {
         getHeight(element) {
-            return NodeSpace.getNodeHeight(element);
+            return NodeSpace.getNodeHeight(board, element);
         },
         getWidth(element) {
             return NodeSpace.getNodeWidth(board, element);
@@ -3260,141 +3149,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
 class MindModule {
 }
 MindModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MindModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.5", ngImport: i0, type: MindModule, declarations: [PlaitMindComponent, MindNodeComponent], imports: [BrowserModule, RichtextModule, PlaitModule], exports: [PlaitMindComponent, MindNodeComponent] });
-MindModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindModule, imports: [BrowserModule, RichtextModule, PlaitModule] });
+MindModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.5", ngImport: i0, type: MindModule, declarations: [PlaitMindComponent, MindNodeComponent], imports: [CommonModule, RichtextModule, PlaitModule], exports: [PlaitMindComponent, MindNodeComponent] });
+MindModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindModule, imports: [CommonModule, RichtextModule, PlaitModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [PlaitMindComponent, MindNodeComponent],
-                    imports: [BrowserModule, RichtextModule, PlaitModule],
+                    imports: [CommonModule, RichtextModule, PlaitModule],
                     exports: [PlaitMindComponent, MindNodeComponent]
                 }]
         }] });
 
-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;
-    let activeElement;
+    const { mousedown, mousemove, globalMouseup } = board;
+    let activeElements = [];
+    let correspondingElements = [];
     let startPoint;
-    let fakeDragNodeG;
+    let dragFakeNodeG;
     let fakeDropNodeG;
     let dropTarget = null;
+    let targetPath;
     board.mousedown = (event) => {
         if (board.options.readonly || IS_TEXT_EDITABLE.get(board) || event.button === 2) {
             mousedown(event);
@@ -3403,156 +3178,137 @@ const withDnd = (board) => {
         // 确认是否 hit 节点
         const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
         const selectedElements = getSelectedElements(board);
-        board.children.forEach((value) => {
-            if (activeElement) {
+        depthFirstRecursion(board, element => {
+            if (activeElements.length || !MindElement.isMindElement(board, element)) {
                 return;
             }
-            if (PlaitMind.isMind(value)) {
-                const mindComponent = ELEMENT_TO_COMPONENT.get(value);
-                const root = mindComponent.root;
-                root.eachNode((node) => {
-                    if (activeElement) {
-                        return;
-                    }
-                    const canDrag = hitMindElement(board, point, node.origin) &&
-                        !node.origin.isRoot &&
-                        !AbstractNode.isAbstract(node.origin) &&
-                        selectedElements.length <= 1;
-                    if (canDrag) {
-                        activeElement = node.origin;
-                        startPoint = point;
-                    }
-                });
+            const isHitElement = isHitMindElement(board, point, element) && !element.isRoot && !AbstractNode.isAbstract(element);
+            const isAllMindElement = selectedElements.every(element => MindElement.isMindElement(board, element));
+            const isMultiple = isHitElement && selectedElements.length > 1 && selectedElements.includes(element) && isAllMindElement;
+            const isSingle = isHitElement && !(selectedElements.length > 1 && selectedElements.includes(element));
+            if (isSingle) {
+                activeElements = [element];
+                startPoint = point;
+            }
+            else if (isMultiple) {
+                activeElements = getFirstLevelElement(selectedElements);
+                startPoint = point;
+            }
+        }, node => {
+            if (PlaitBoard.isBoard(node) || board.isRecursion(node)) {
+                return true;
+            }
+            else {
+                return false;
             }
         });
-        if (activeElement) {
-            event.preventDefault();
+        if (activeElements.length) {
+            correspondingElements = getOverallAbstracts(board, activeElements);
         }
         mousedown(event);
     };
     board.mousemove = (event) => {
-        if (!board.options.readonly && activeElement && startPoint) {
+        if (!board.options.readonly && activeElements?.length && startPoint) {
             const endPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
             const distance = distanceBetweenPointAndPoint(startPoint[0], startPoint[1], endPoint[0], endPoint[1]);
             if (distance < DRAG_MOVE_BUFFER) {
                 return;
             }
-            if (!isDragging(board)) {
-                setIsDragging(board, true);
-                fakeDragNodeG = createG();
-                fakeDragNodeG.classList.add('dragging', 'fake-node', 'plait-board-attached');
-                fakeDropNodeG = createG();
-                addActiveOnDragOrigin(activeElement);
+            setIsDragging(board, true);
+            fakeDropNodeG?.remove();
+            const detectPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            dropTarget = detectDropTarget(board, detectPoint, dropTarget, [...activeElements, ...correspondingElements]);
+            if (dropTarget?.target) {
+                targetPath = getPathByDropTarget(board, dropTarget);
+                fakeDropNodeG = drawFakeDropNodeByPath(board, dropTarget.target, targetPath);
                 PlaitBoard.getHost(board).appendChild(fakeDropNodeG);
-                PlaitBoard.getHost(board).appendChild(fakeDragNodeG);
-            }
-            else {
-                if (fakeDragNodeG) {
-                    fakeDragNodeG.innerHTML = '';
-                }
-                fakeDropNodeG?.childNodes.forEach(node => {
-                    node.remove();
-                });
             }
-            // fake dragging origin node
             const offsetX = endPoint[0] - startPoint[0];
             const offsetY = endPoint[1] - startPoint[1];
-            const activeComponent = PlaitElement.getComponent(activeElement);
-            const fakeDraggingNode = {
-                ...activeComponent.node,
-                children: [],
-                x: activeComponent.node.x + offsetX,
-                y: activeComponent.node.y + offsetY
-            };
-            const textRectangle = getRichtextRectangleByNode(board, activeComponent.node);
-            const fakeNodeG = drawRectangleNode(board, fakeDraggingNode);
-            const richtextG = activeComponent.richtextG?.cloneNode(true);
-            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];
-            let detectResult = null;
-            board.children.forEach((value) => {
-                if (detectResult) {
-                    return;
-                }
-                if (PlaitMind.isMind(value)) {
-                    const mindmapComponent = ELEMENT_TO_COMPONENT.get(value);
-                    const root = mindmapComponent?.root;
-                    root.eachNode((node) => {
-                        if (detectResult) {
-                            return;
-                        }
-                        const directions = directionDetector(node, detectCenterPoint);
-                        if (directions) {
-                            detectResult = directionCorrector(board, node, directions);
-                        }
-                        dropTarget = null;
-                        if (detectResult && isValidTarget(activeComponent.node.origin, node.origin)) {
-                            dropTarget = { target: node.origin, detectResult: detectResult[0] };
-                        }
-                    });
+            dragFakeNodeG?.remove();
+            dragFakeNodeG = createG();
+            [...activeElements, ...correspondingElements].forEach(element => {
+                addActiveOnDragOrigin(element);
+                if (activeElements.includes(element)) {
+                    const activeComponent = PlaitElement.getComponent(element);
+                    const nodeG = drawFakeDragNode(board, activeComponent, offsetX, offsetY);
+                    dragFakeNodeG?.appendChild(nodeG);
                 }
             });
-            if (dropTarget?.target) {
-                dropTarget = readjustmentDropTarget(board, dropTarget);
-                drawPlaceholderDropNodeG(board, dropTarget, fakeDropNodeG);
-            }
+            PlaitBoard.getHost(board).appendChild(dragFakeNodeG);
         }
         mousemove(event);
     };
     board.globalMouseup = (event) => {
-        if (!board.options.readonly && activeElement) {
-            if (dropTarget?.target) {
-                const activeComponent = PlaitElement.getComponent(activeElement);
-                const targetComponent = PlaitElement.getComponent(dropTarget.target);
-                let targetPath = PlaitBoard.findPath(board, targetComponent.element);
-                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);
-                }
-                if (dropTarget.detectResult === 'right') {
-                    if (targetComponent.node.origin.isRoot) {
-                        targetPath = PlaitBoard.findPath(board, targetComponent.element);
-                        targetPath.push(0);
-                        const rightNodeCount = targetComponent.node.origin.rightNodeCount + 1;
-                        newElement = { isCollapsed: false, rightNodeCount };
+        if (!board.options.readonly && activeElements?.length) {
+            const elements = [...activeElements, ...correspondingElements];
+            if (isDragging(board)) {
+                elements.forEach(element => removeActiveOnDragOrigin(element));
+            }
+            if (dropTarget) {
+                const targetPathRef = board.pathRef(targetPath);
+                const targetElementPathRef = board.pathRef(PlaitBoard.findPath(board, dropTarget.target));
+                const abstractRefs = getValidAbstractRefs(board, elements);
+                const normalElements = elements
+                    .filter(element => !abstractRefs.some(refs => refs.abstract === element))
+                    .map(element => {
+                    if (AbstractNode.isAbstract(element)) {
+                        return adjustAbstractToNode(element);
+                    }
+                    if (PlaitMind.isMind(element)) {
+                        return adjustRootToNode(board, element);
                     }
-                    Transforms.setNode(board, newElement, rightTargetPath);
+                    return element;
+                });
+                const effectedAbstracts = deleteElementHandleAbstract(board, elements);
+                insertElementHandleAbstract(board, targetPath, normalElements.length, false, effectedAbstracts);
+                MindTransforms.setAbstractsByRefs(board, effectedAbstracts);
+                MindTransforms.removeElements(board, elements);
+                let insertPath = targetPathRef.current;
+                const parentPath = Path.parent(targetPathRef.current || targetPath);
+                if (!insertPath) {
+                    const parent = PlaitNode.get(board, parentPath);
+                    const children = getNonAbstractChildren(parent);
+                    insertPath = [...parentPath, children.length || 0];
                 }
-                Transforms.moveNode(board, originPath, targetPath);
-            }
-            if (isDragging(board)) {
-                removeActiveOnDragOrigin(activeElement);
+                MindTransforms.insertNodes(board, normalElements, insertPath);
+                if (abstractRefs.length) {
+                    MindTransforms.insertAbstractNodes(board, abstractRefs, normalElements, insertPath);
+                }
+                const shouldChangeRoot = isInRightBranchOfStandardLayout(dropTarget?.target) &&
+                    targetElementPathRef.current &&
+                    (Path.isSibling(targetPath, targetElementPathRef.current) || Path.equals(targetPath, targetElementPathRef.current));
+                if (shouldChangeRoot && targetElementPathRef.current) {
+                    changeRightNodeCount(board, targetElementPathRef.current.slice(0, 1), normalElements.length);
+                }
+                if (targetElementPathRef.current &&
+                    targetPathRef.current &&
+                    Path.isAncestor(targetElementPathRef.current, targetPathRef.current) &&
+                    dropTarget.target.isCollapsed) {
+                    Transforms.setNode(board, { isCollapsed: false }, targetElementPathRef.current);
+                }
+                targetElementPathRef.unref();
+                targetPathRef.unref();
+                const selectedElements = getSelectedElements(board);
+                let setActiveElements = [];
+                depthFirstRecursion(board, node => {
+                    const isSelected = selectedElements.some(element => element.id === node.id);
+                    if (isSelected) {
+                        setActiveElements.push(node);
+                    }
+                });
+                Transforms.setSelectionWithTemporaryElements(board, setActiveElements);
             }
             setIsDragging(board, false);
-            activeElement = null;
-            fakeDragNodeG?.remove();
-            fakeDragNodeG = undefined;
+            activeElements = [];
+            dragFakeNodeG?.remove();
+            dragFakeNodeG = undefined;
             fakeDropNodeG?.remove();
             fakeDropNodeG = undefined;
             dropTarget = null;
         }
         globalMouseup(event);
     };
-    board.keydown = (event) => {
-        keydown(event);
-    };
     return board;
 };
 
@@ -3560,16 +3316,11 @@ const buildClipboardData = (board, selectedElements) => {
     let result = [];
     // get overall abstract
     const overallAbstracts = getOverallAbstracts(board, selectedElements);
+    // get valid abstract refs
+    const validAbstractRefs = getValidAbstractRefs(board, [...selectedElements, ...overallAbstracts]);
     // 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 newSelectedElements = selectedElements.filter(value => !validAbstractRefs.find(ref => ref.abstract === value));
+    newSelectedElements.push(...validAbstractRefs.map(value => value.abstract));
     const selectedMindNodes = newSelectedElements.map(value => MindElement.getNode(value));
     const nodesRectangle = getRectangleByElements(board, newSelectedElements, true);
     newSelectedElements.forEach((element, index) => {
@@ -3577,8 +3328,9 @@ const buildClipboardData = (board, selectedElements) => {
         const nodeRectangle = getRectangleByNode(selectedMindNodes[index]);
         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);
+        const abstractRef = validAbstractRefs.find(ref => ref.abstract === element);
+        if (AbstractNode.isAbstract(element) && abstractRef) {
+            const { start, end } = getRelativeStartEndByAbstractRef(abstractRef, newSelectedElements);
             result.push({
                 ...element,
                 points,
@@ -3633,7 +3385,7 @@ const insertClipboardData = (board, elements, targetPoint) => {
         newElement = copyNewNode(item);
         if (hasTargetParent) {
             if (item.isRoot) {
-                newElement = transformRootToNode(board, newElement);
+                newElement = adjustRootToNode(board, newElement);
             }
             // handle abstract start and end
             if (AbstractNode.isAbstract(newElement)) {
@@ -3646,10 +3398,10 @@ const insertClipboardData = (board, elements, targetPoint) => {
             const point = [targetPoint[0] + item.points[0][0], targetPoint[1] + item.points[0][1]];
             newElement.points = [point];
             if (AbstractNode.isAbstract(item)) {
-                newElement = transformAbstractToNode(newElement);
+                newElement = adjustAbstractToNode(newElement);
             }
             if (!item.isRoot) {
-                newElement = transformNodeToRoot(board, newElement);
+                newElement = adjustNodeToRoot(board, newElement);
             }
             path = [board.children.length];
         }
@@ -3680,8 +3432,8 @@ const withAbstract = (board) => {
         const point = transformPoint(board, toPoint(event.x, event.y, host));
         activeAbstractElement = activeAbstractElements.find(element => {
             abstractHandlePosition = getHitAbstractHandle(board, element, point);
-            if (newBoard?.abstractResize) {
-                newBoard.abstractResize(AbstractResizeState.start);
+            if (newBoard?.onAbstractResize) {
+                newBoard.onAbstractResize(AbstractResizeState.start);
             }
             return abstractHandlePosition;
         });
@@ -3715,8 +3467,8 @@ const withAbstract = (board) => {
                     children = leftChildren;
                 }
             }
-            if (newBoard?.abstractResize) {
-                newBoard.abstractResize(AbstractResizeState.resizing);
+            if (newBoard?.onAbstractResize) {
+                newBoard.onAbstractResize(AbstractResizeState.resizing);
             }
             const resizingLocation = isHorizontal ? endPoint[1] : endPoint[0];
             const parent = MindElement.getNode(parentElement);
@@ -3748,8 +3500,8 @@ const withAbstract = (board) => {
         startPoint = undefined;
         abstractHandlePosition = undefined;
         if (activeAbstractElement) {
-            if (newBoard?.abstractResize) {
-                newBoard.abstractResize(AbstractResizeState.end);
+            if (newBoard?.onAbstractResize) {
+                newBoard.onAbstractResize(AbstractResizeState.end);
             }
             if (newProperty) {
                 const path = PlaitBoard.findPath(board, activeAbstractElement);
@@ -3766,7 +3518,7 @@ const withAbstract = (board) => {
     return board;
 };
 
-const withExtendMind = (board) => {
+const withMindExtend = (board) => {
     const newBoard = board;
     newBoard.drawEmoji = (emoji, element) => {
         throw new Error('Not implement drawEmoji method error.');
@@ -3777,6 +3529,85 @@ const withExtendMind = (board) => {
     return newBoard;
 };
 
+const DefaultHotkey = 'm';
+const withCreateMind = (board) => {
+    const newBoard = board;
+    const { keydown, mousemove, mouseup } = board;
+    let fakeCreateNodeRef = null;
+    newBoard.mousemove = (event) => {
+        if (PlaitBoard.isReadonly(board)) {
+            mousemove(event);
+            return;
+        }
+        if (PlaitBoard.isPointer(board, MindPointerType.mind)) {
+            throttleRAF(() => {
+                const movingPoint = PlaitBoard.getMovingPoint(board);
+                if (movingPoint) {
+                    const targetPoint = transformPoint(board, toPoint(movingPoint[0], movingPoint[1], PlaitBoard.getHost(board)));
+                    const emptyMind = createEmptyMind(board, targetPoint);
+                    const nodeRectangle = getRectangleByElement(newBoard, targetPoint, emptyMind);
+                    const nodeG = drawRoundRectangleByElement(board, nodeRectangle, emptyMind);
+                    const topicRectangle = getTopicRectangleByElement(newBoard, nodeRectangle, emptyMind);
+                    if (!fakeCreateNodeRef) {
+                        const { richtextComponentRef, richtextG, foreignObject } = drawTopicByElement(newBoard, topicRectangle, emptyMind);
+                        fakeCreateNodeRef = {
+                            instanceRef: richtextComponentRef,
+                            nodeG,
+                            foreignObject,
+                            topicG: richtextG
+                        };
+                        richtextComponentRef.changeDetectorRef.detectChanges();
+                        PlaitBoard.getHost(board).append(...[fakeCreateNodeRef.nodeG, fakeCreateNodeRef.topicG]);
+                    }
+                    else {
+                        fakeCreateNodeRef.nodeG.remove();
+                        fakeCreateNodeRef.nodeG = nodeG;
+                        PlaitBoard.getHost(board).append(nodeG);
+                        PlaitBoard.getHost(board).append(fakeCreateNodeRef.topicG);
+                        updateForeignObject$1(fakeCreateNodeRef.topicG, topicRectangle.width, topicRectangle.height, topicRectangle.x, topicRectangle.y);
+                    }
+                }
+            });
+        }
+        else {
+            destroy();
+        }
+        mousemove(event);
+    };
+    newBoard.mouseup = (event) => {
+        const movingPoint = PlaitBoard.getMovingPoint(board);
+        if (movingPoint && fakeCreateNodeRef && PlaitBoard.isPointer(board, MindPointerType.mind)) {
+            const targetPoint = transformPoint(board, toPoint(movingPoint[0], movingPoint[1], PlaitBoard.getHost(board)));
+            const emptyMind = createEmptyMind(board, targetPoint);
+            Transforms.insertNode(board, emptyMind, [board.children.length]);
+            BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
+        }
+        destroy();
+        mouseup(event);
+    };
+    board.keydown = (event) => {
+        if (PlaitBoard.isReadonly(board) || getSelectedElements(board).length > 0) {
+            keydown(event);
+            return;
+        }
+        if (event.key === DefaultHotkey && !PlaitBoard.isPointer(board, MindPointerType.mind)) {
+            BoardTransforms.updatePointerType(board, MindPointerType.mind);
+            event.preventDefault();
+            return;
+        }
+        keydown(event);
+    };
+    function destroy() {
+        if (fakeCreateNodeRef) {
+            fakeCreateNodeRef.instanceRef.destroy();
+            fakeCreateNodeRef.nodeG.remove();
+            fakeCreateNodeRef.topicG.remove();
+            fakeCreateNodeRef = null;
+        }
+    }
+    return newBoard;
+};
+
 const withMind = (board) => {
     const { drawElement, dblclick, keydown, insertFragment, setFragment, deleteFragment, isHitSelection, getRectangle, isMovable, isRecursion } = board;
     board.drawElement = (context) => {
@@ -3818,7 +3649,7 @@ const withMind = (board) => {
         return isMovable(element);
     };
     board.keydown = (event) => {
-        if (board.options.readonly || IS_TEXT_EDITABLE.get(board)) {
+        if (PlaitBoard.isReadonly(board)) {
             keydown(event);
             return;
         }
@@ -3841,7 +3672,7 @@ const withMind = (board) => {
                     insertMindElement(board, selectedElement, findNewChildNodePath(board, selectedElement));
                 }
                 else {
-                    if (shouldChangeRightNodeCount(selectedElement)) {
+                    if (isInRightBranchOfStandardLayout(selectedElement)) {
                         changeRightNodeCount(board, selectedElementPath.slice(0, 1), 1);
                     }
                     const abstractRefs = insertElementHandleAbstract(board, Path.next(selectedElementPath));
@@ -3852,7 +3683,10 @@ const withMind = (board) => {
             }
             if (hotkeys.isDeleteBackward(event) || hotkeys.isDeleteForward(event)) {
                 event.preventDefault();
-                deleteSelectedELements(board, selectedElements);
+                const deletableElements = getFirstLevelElement(selectedElements).reverse();
+                const abstractRefs = deleteElementHandleAbstract(board, deletableElements);
+                MindTransforms.setAbstractsByRefs(board, abstractRefs);
+                MindTransforms.removeElements(board, selectedElements);
                 let activeElement;
                 const firstLevelElements = getFirstLevelElement(selectedElements);
                 if (AbstractNode.isAbstract(firstLevelElements[0])) {
@@ -3898,7 +3732,7 @@ const withMind = (board) => {
         keydown(event);
     };
     board.dblclick = (event) => {
-        if (board.options.readonly || IS_TEXT_EDITABLE.get(board)) {
+        if (PlaitBoard.isReadonly(board)) {
             dblclick(event);
             return;
         }
@@ -3907,9 +3741,16 @@ const withMind = (board) => {
             .filter(value => PlaitMind.isMind(value))
             .forEach(mindMap => {
             depthFirstRecursion(mindMap, node => {
-                if (!PlaitBoard.hasBeenTextEditing(board) && hitMindElement(board, point, node)) {
+                if (!PlaitBoard.hasBeenTextEditing(board) && isHitMindElement(board, point, node)) {
                     enterNodeEditing(node);
                 }
+            }, node => {
+                if (PlaitBoard.isBoard(node) || board.isRecursion(node)) {
+                    return true;
+                }
+                else {
+                    return false;
+                }
             });
         });
         if (PlaitBoard.hasBeenTextEditing(board)) {
@@ -3947,10 +3788,13 @@ const withMind = (board) => {
     };
     board.deleteFragment = (data) => {
         const selectedElements = getSelectedElements(board);
-        deleteSelectedELements(board, selectedElements);
+        const deletableElements = getFirstLevelElement(selectedElements).reverse();
+        const abstractRefs = deleteElementHandleAbstract(board, deletableElements);
+        MindTransforms.setAbstractsByRefs(board, abstractRefs);
+        MindTransforms.removeElements(board, selectedElements);
         deleteFragment(data);
     };
-    return withExtendMind(withAbstract(withDnd(board)));
+    return withMindExtend(withCreateMind(withAbstract(withDnd(board))));
 };
 
 class MindEmojiBaseComponent {
@@ -3992,5 +3836,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, 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 };
+export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, AbstractHandlePosition, AbstractResizeState, BASE, BRANCH_COLORS, BRANCH_WIDTH, BaseDrawer, DefaultAbstractNodeStyle, DefaultNodeStyle, DefaultRootStyle, ELEMENT_TO_NODE, EXTEND_OFFSET, EXTEND_RADIUS, GRAY_COLOR, IS_DRAGGING, LayoutDirection, LayoutDirectionsMap, MindElement, MindElementShape, MindEmojiBaseComponent, MindModule, MindNode, MindNodeComponent, MindPointerType, 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, addActiveOnDragOrigin, adjustAbstractToNode, adjustNodeToRoot, adjustRootToNode, canSetAbstract, changeRightNodeCount, copyNewNode, correctLayoutByDirection, createDefaultMind, createEmptyMind, createMindElement, deleteElementHandleAbstract, detectDropTarget, directionCorrector, directionDetector, divideElementByParent, drawFakeDragNode, drawFakeDropNodeByPath, enterNodeEditing, extractNodesText, findLastChild, findLocationLeftIndex, getAbstractBranchColor, getAbstractBranchWidth, getAbstractHandleRectangle, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getBranchWidthByMindElement, getChildrenCount, getCorrespondingAbstract, getDefaultBranchColor, getDefaultBranchColorByIndex, getDefaultLayout, getEmojiForeignRectangle, getEmojiRectangle, getFirstLevelElement, getHitAbstractHandle, getInCorrectLayoutDirection, getLayoutDirection$1 as getLayoutDirection, getLayoutReverseDirection, getLocationScope, getNextBranchColor, getOverallAbstracts, getPathByDropTarget, getPreviousAndNextByPath, getRectangleByElement, getRectangleByNode, getRectangleByResizingLocation, getRelativeStartEndByAbstractRef, getRootLayout, getShapeByElement, getStrokeByMindElement, getTopicRectangleByElement, getTopicRectangleByNode, getValidAbstractRefs, handleTouchedAbstract, hasAfterDraw, insertElementHandleAbstract, insertMindElement, isChildElement, isChildRight, isChildUp, isCorrectLayout, isDragging, isHitEmojis, isHitMindElement, isInRightBranchOfStandardLayout, isMixedLayout, isSetAbstract, isValidTarget, isVirtualKey, readjustmentDropTarget, removeActiveOnDragOrigin, separateChildren, setIsDragging, withMind, withMindExtend };
 //# sourceMappingURL=plait-mind.mjs.map