@plait/mind 0.2.0-next.3 → 0.2.0-next.5

package/fesm2020/plait-mind.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, NgModule, Directive, Input } from '@angular/core';
 import * as i2 from '@plait/core';
-import { distanceBetweenPointAndRectangle, PlaitElement, drawRoundRectangle, PlaitBoard, Path, Transforms, getRectangleByElements, RectangleClient, getSelectedElements, PlaitNode, NODE_TO_PARENT, ELEMENT_TO_COMPONENT, idCreator, isNullOrUndefined, clearSelectedElement, addSelectedElement, createG, drawAbstractRoundRectangle, PlaitPluginElementComponent, PlaitPointerType, NODE_TO_INDEX, createText, IS_TEXT_EDITABLE, MERGING, transformPoint, toPoint, depthFirstRecursion, PlaitModule, distanceBetweenPointAndPoint, CLIP_BOARD_FORMAT_KEY, BOARD_TO_HOST, removeSelectedElement, PlaitHistoryBoard, hotkeys } from '@plait/core';
-import { isIndentedLayout, MindLayoutType, isStandardLayout, isTopLayout, isLeftLayout, isHorizontalLogicLayout, isVerticalLogicLayout, isBottomLayout, isRightLayout, isHorizontalLayout, AbstractNode, getCorrectStartEnd, isChildOfAbstract, getAbstractLayout, ConnectingPosition, GlobalLayout } from '@plait/layouts';
+import { distanceBetweenPointAndRectangle, PlaitElement, PlaitBoard, PlaitNode, NODE_TO_PARENT, Path, ELEMENT_TO_COMPONENT, Transforms, idCreator, isNullOrUndefined, clearSelectedElement, addSelectedElement, drawRoundRectangle, getRectangleByElements, RectangleClient, getSelectedElements, createG, drawAbstractRoundRectangle, PlaitPluginElementComponent, PlaitPointerType, NODE_TO_INDEX, createText, IS_TEXT_EDITABLE, MERGING, transformPoint, toPoint, depthFirstRecursion, PlaitModule, distanceBetweenPointAndPoint, CLIP_BOARD_FORMAT_KEY, BOARD_TO_HOST, removeSelectedElement, PlaitHistoryBoard, hotkeys } from '@plait/core';
+import { AbstractNode, isChildOfAbstract, isIndentedLayout, getAbstractLayout, MindLayoutType, isStandardLayout, isTopLayout, isLeftLayout, isHorizontalLogicLayout, isVerticalLogicLayout, isBottomLayout, isRightLayout, isHorizontalLayout, getCorrectStartEnd, ConnectingPosition, GlobalLayout } from '@plait/layouts';
 import { getSizeByText, ROOT_DEFAULT_HEIGHT, TEXT_DEFAULT_HEIGHT, drawRichtext, updateForeignObject, createForeignObject, updateRichText, setFullSelectionAndFocus, getRichtextContentSize, hasEditableTarget, RichtextModule } from '@plait/richtext';
 import { fromEvent, Subject, timer } from 'rxjs';
 import { take, takeUntil, filter, debounceTime } from 'rxjs/operators';
-import { Node, Editor, Operation, Path as Path$1 } from 'slate';
+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';
@@ -68,6 +68,249 @@ function hitMindElement(board, point, element) {
     }
 }
 
+/**
+ * get correctly layout：
+ * 1. root is standard -> left or right
+ * 2. correct layout by incorrect layout direction
+ * @param element
+ */
+const getCorrectLayoutByElement = (element) => {
+    const { root } = findUpElement(element);
+    const rootLayout = root.layout || getDefaultLayout();
+    let correctRootLayout = rootLayout;
+    if (element.isRoot) {
+        return correctRootLayout;
+    }
+    const component = PlaitElement.getComponent(element);
+    let layout = element.layout;
+    let parentComponent = null;
+    let parent = component.parent.origin;
+    while (!layout && parent) {
+        parentComponent = PlaitElement.getComponent(parent);
+        layout = parentComponent.node.origin.layout;
+        parent = parentComponent.parent?.origin;
+    }
+    if ((AbstractNode.isAbstract(element) || isChildOfAbstract(MindElement.getNode(element))) &&
+        isIndentedLayout(layout)) {
+        return getAbstractLayout(layout);
+    }
+    // handle root standard
+    if (rootLayout === MindLayoutType.standard) {
+        correctRootLayout = component?.node.left ? MindLayoutType.left : MindLayoutType.right;
+    }
+    if (parentComponent && parentComponent.node.origin.isRoot) {
+        return correctRootLayout;
+    }
+    if (layout) {
+        const incorrectDirection = getInCorrectLayoutDirection(correctRootLayout, layout);
+        if (incorrectDirection) {
+            return correctLayoutByDirection(layout, incorrectDirection);
+        }
+        else {
+            return layout;
+        }
+    }
+    else {
+        return correctRootLayout;
+    }
+};
+
+const getBranchLayouts = (element) => {
+    const layouts = [];
+    if (element.layout) {
+        //getCorrectLayoutByElement含有递归操作，getBranchMindmapLayouts本身也有递归操作，有待优化
+        layouts.unshift(getCorrectLayoutByElement(element));
+    }
+    let parent = findParentElement(element);
+    while (parent) {
+        if (parent.layout) {
+            layouts.unshift(parent.layout);
+        }
+        parent = findParentElement(parent);
+    }
+    return layouts;
+};
+
+/**
+ *  get available sub layouts by element
+ * @param element
+ * @returns MindLayoutType[]
+ */
+const getAvailableSubLayoutsByElement = (element) => {
+    const parentElement = findParentElement(element);
+    if (parentElement) {
+        const branchLayouts = getBranchLayouts(parentElement);
+        if (branchLayouts[0] === MindLayoutType.standard) {
+            const node = MindElement.getNode(element);
+            branchLayouts[0] = node.left ? MindLayoutType.left : MindLayoutType.right;
+        }
+        const currentLayoutDirections = getBranchDirectionsByLayouts(branchLayouts);
+        let availableSubLayouts = getAvailableSubLayoutsByLayoutDirections(currentLayoutDirections);
+        const parentLayout = [branchLayouts[branchLayouts.length - 1]];
+        const parentDirections = getBranchDirectionsByLayouts(parentLayout);
+        const parentAvailableSubLayouts = getAvailableSubLayoutsByLayoutDirections(parentDirections);
+        availableSubLayouts = availableSubLayouts.filter(layout => parentAvailableSubLayouts.some(parentAvailableSubLayout => parentAvailableSubLayout === layout));
+        return availableSubLayouts;
+    }
+    return undefined;
+};
+
+/**
+ * 获取父节点布局类型
+ * @param element
+ * @returns MindLayoutType
+ */
+const getLayoutParentByElement = (element) => {
+    let parent = findParentElement(element);
+    while (parent) {
+        if (parent.layout) {
+            return parent.layout;
+        }
+        parent = findParentElement(parent);
+    }
+    return getDefaultLayout();
+};
+
+const getLayoutByElement = (element) => {
+    const layout = element.layout;
+    if (layout) {
+        return layout;
+    }
+    if (AbstractNode.isAbstract(element) ||
+        (isChildOfAbstract(MindElement.getNode(element)) && isIndentedLayout(layout))) {
+        const parentLayout = getLayoutParentByElement(element);
+        return getAbstractLayout(parentLayout);
+    }
+    return getLayoutParentByElement(element);
+};
+
+const MindQueries = {
+    getAvailableSubLayoutsByElement,
+    getLayoutParentByElement,
+    getBranchLayouts,
+    getLayoutByElement,
+    getCorrectLayoutByElement
+};
+
+const PlaitMind = {
+    isMind: (value) => {
+        return value.type === 'mindmap';
+    }
+};
+const MindElement = {
+    hasLayout(value, layout) {
+        const _layout = MindQueries.getLayoutByElement(value);
+        return _layout === layout;
+    },
+    isIndentedLayout(value) {
+        const _layout = MindQueries.getLayoutByElement(value);
+        return isIndentedLayout(_layout);
+    },
+    isMindElement(board, element) {
+        const path = PlaitBoard.findPath(board, element);
+        const rootElement = PlaitNode.get(board, path.slice(0, 1));
+        if (PlaitMind.isMind(rootElement)) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    },
+    getParent(node) {
+        if (PlaitMind.isMind(node)) {
+            throw new Error('mind root node can not get parent');
+        }
+        const parent = NODE_TO_PARENT.get(node);
+        return parent;
+    },
+    getRoot(board, element) {
+        const path = PlaitBoard.findPath(board, element);
+        return PlaitNode.get(board, path.slice(0, 1));
+    },
+    getAncestors(board, element) {
+        const path = PlaitBoard.findPath(board, element);
+        const parents = [];
+        for (const p of Path.ancestors(path, { reverse: true })) {
+            const n = PlaitNode.get(board, p);
+            if (n && !PlaitBoard.isBoard(n)) {
+                parents.push(n);
+            }
+        }
+        return parents;
+    },
+    getNode(element) {
+        const node = ELEMENT_TO_NODE.get(element);
+        if (!node) {
+            throw new Error(`can not get node from ${JSON.stringify(element)}`);
+        }
+        return node;
+    },
+    hasEmojis(element) {
+        if (element.data.emojis) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    },
+    getEmojis(element) {
+        return element.data.emojis;
+    }
+};
+
+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;
+    },
+    isEquals(node, otherNode) {
+        const hasSameSize = node.x === otherNode.x && node.y === otherNode.y && node.width === otherNode.width && node.height === otherNode.height;
+        const hasSameOrigin = node.origin === otherNode.origin;
+        let hasSameParentOriginChildren = false;
+        if (node.parent && otherNode.parent) {
+            hasSameParentOriginChildren = node.parent.origin.children == otherNode.parent.origin.children;
+        }
+        return hasSameSize && hasSameOrigin && hasSameParentOriginChildren;
+    }
+};
+
+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 = {}));
+
 const getBranchDirectionsByLayouts = (branchLayouts) => {
     const branchDirections = [];
     branchLayouts.forEach(l => {
@@ -171,1485 +414,1301 @@ const getRootLayout = (root) => {
     return root.layout || getDefaultLayout();
 };
 
-const getNodeShapeByElement = (element) => {
-    let nodeShape = element.shape;
-    if (nodeShape) {
-        return nodeShape;
-    }
-    let parent = findParentElement(element);
-    while (parent) {
-        if (parent.shape) {
-            return parent.shape;
-        }
-        parent = findParentElement(parent);
-    }
-    return MindNodeShape.roundRectangle;
-};
+function enterNodeEditing(element) {
+    const component = ELEMENT_TO_COMPONENT.get(element);
+    component.startEditText(false, false);
+}
 
-function isVirtualKey(e) {
-    const isMod = e.ctrlKey || e.metaKey;
-    const isAlt = isKeyHotkey('alt', e);
-    const isShift = isKeyHotkey('shift', e);
-    const isCapsLock = e.key.includes('CapsLock');
-    const isTab = e.key.includes('Tab');
-    const isEsc = e.key.includes('Escape');
-    const isF = e.key.startsWith('F');
-    const isArrow = e.key.includes('Arrow') ? true : false;
-    return isCapsLock || isMod || isAlt || isArrow || isShift || isTab || isEsc || isF;
-}
-
-function drawLink(roughSVG, node, child, defaultStroke = null, isHorizontal = true, needDrawUnderline = true) {
-    let beginX, beginY, endX, endY, beginNode = node, endNode = child;
-    const layout = MindQueries.getCorrectLayoutByElement(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)) &&
-            getNodeShapeByElement(node.origin) === MindNodeShape.underline) {
-            if (isChildRight(node, child)) {
-                beginY = node.y + node.height - node.vGap;
-            }
-            else {
-                endY = node.y + node.height - node.vGap;
-            }
-        }
-    }
-    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;
-    }
-    const stroke = defaultStroke || getLinkLineColorByMindElement(child.origin);
-    const strokeWidth = child.origin.linkLineWidth ? child.origin.linkLineWidth : STROKE_WIDTH;
-    if (endNode.origin.isRoot) {
-        if (layout === MindLayoutType.left || isStandardLayout(layout)) {
-            endX -= strokeWidth;
+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 (layout === MindLayoutType.upward) {
-            endY -= strokeWidth;
+        if (AbstractNode.isAbstract(child) && child.start >= rightNodeCount) {
+            leftChildren.push(child);
+            continue;
         }
-    }
-    if (beginNode.origin.isRoot) {
-        if (layout === MindLayoutType.right || isStandardLayout(layout)) {
-            beginX += strokeWidth;
+        if (i < rightNodeCount) {
+            rightChildren.push(child);
         }
-        if (layout === MindLayoutType.downward) {
-            beginY += strokeWidth;
+        else {
+            leftChildren.push(child);
         }
     }
-    if (isHorizontal) {
-        let curve = [
-            [beginX, beginY],
-            [beginX + (beginNode.hGap + endNode.hGap) / 3, beginY],
-            [endX - (beginNode.hGap + endNode.hGap) / 2, endY],
-            [endX, endY]
-        ];
-        const shape = getNodeShapeByElement(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 === MindNodeShape.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];
-            }
-        }
-        const points = pointsOnBezierCurves(curve);
-        return roughSVG.curve(points, { stroke, strokeWidth });
+    return { leftChildren, rightChildren };
+};
+const isSetAbstract = (element) => {
+    return !!getCorrespondingAbstract(element);
+};
+const canSetAbstract = (element) => {
+    return !PlaitElement.isRootElement(element) && !AbstractNode.isAbstract(element) && !isSetAbstract(element);
+};
+const setAbstract = (board, elements) => {
+    let elementGroup = filterChildElement(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 {
-        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 roughSVG.curve(points, { stroke, strokeWidth });
+        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: GRAY_COLOR,
+        branchColor: GRAY_COLOR
+    });
+    mindElement.start = start;
+    mindElement.end = end;
+    Transforms.insertNode(board, mindElement, path);
+};
+const handleAbstractIncluded = (board, element) => {
+    const rightNodeCount = element.rightNodeCount;
+    const abstract = element.children.find(child => {
+        return AbstractNode.isAbstract(child) && child.end >= rightNodeCount && child.start < rightNodeCount;
+    });
+    if (abstract) {
+        const path = PlaitBoard.findPath(board, abstract);
+        Transforms.setNode(board, { end: rightNodeCount - 1 }, path);
+    }
+};
+const getCorrespondingAbstract = (element) => {
+    const parent = MindElement.getParent(element);
+    if (!parent)
+        return undefined;
+    const elementIndex = parent.children.indexOf(element);
+    return parent.children.find(child => {
+        return AbstractNode.isAbstract(child) && elementIndex >= child.start && elementIndex <= child.end;
+    });
+};
+const getBehindAbstracts = (element) => {
+    const parent = MindElement.getParent(element);
+    const index = parent.children.indexOf(element);
+    return parent.children.filter(child => AbstractNode.isAbstract(child) && child.start > index);
+};
+const insertSiblingElementHandleAbstract = (board, selectedElement) => {
+    const abstract = getCorrespondingAbstract(selectedElement);
+    if (abstract) {
+        PlaitBoard.findPath(board, abstract);
+        Transforms.setNode(board, { end: abstract.end + 1 }, PlaitBoard.findPath(board, abstract));
+    }
+    const abstracts = getBehindAbstracts(selectedElement);
+    if (abstracts.length) {
+        moveAbstractPosition(board, abstracts, 1);
+    }
+};
+const moveAbstractPosition = (board, abstracts, step) => {
+    abstracts.forEach(abstract => {
+        Transforms.setNode(board, { start: abstract.start + step, end: abstract.end + step }, PlaitBoard.findPath(board, abstract));
+    });
+};
 
-const drawPlaceholderDropNodeG = (dropTarget, roughSVG, fakeDropNodeG) => {
-    const targetComponent = PlaitElement.getComponent(dropTarget.target);
-    const targetRect = getRectangleByNode(targetComponent.node);
-    if (dropTarget.detectResult && ['right', 'left'].includes(dropTarget.detectResult)) {
-        drawStraightDropNodeG(targetRect, dropTarget.detectResult, targetComponent, roughSVG, fakeDropNodeG);
+function findParentElement(element) {
+    const component = PlaitElement.getComponent(element);
+    if (component && component.parent) {
+        return component.parent.origin;
     }
-    if (targetComponent.parent && dropTarget.detectResult && ['top', 'bottom'].includes(dropTarget.detectResult)) {
-        const parentComponent = PlaitElement.getComponent(targetComponent.parent.origin);
-        const targetIndex = parentComponent.node.origin.children.indexOf(targetComponent.node.origin);
-        drawCurvePlaceholderDropNodeG(targetRect, dropTarget.detectResult, targetIndex, targetComponent, roughSVG, parentComponent, fakeDropNodeG);
+    return undefined;
+}
+function findUpElement(element) {
+    let branch;
+    let root = element;
+    let parent = findParentElement(element);
+    while (parent) {
+        branch = root;
+        root = parent;
+        parent = findParentElement(parent);
     }
+    return { root, branch };
+}
+const getChildrenCount = (element) => {
+    const count = element.children.reduce((p, c) => {
+        return p + getChildrenCount(c);
+    }, 0);
+    return count + element.children.length;
 };
-const drawCurvePlaceholderDropNodeG = (targetRect, detectResult, targetIndex, targetComponent, roughSVG, parentComponent, fakeDropNodeG) => {
-    const parentNodeLayout = MindQueries.getCorrectLayoutByElement(parentComponent.node.origin);
-    const layout = MindQueries.getCorrectLayoutByElement(targetComponent.node.parent.origin);
-    const strokeWidth = targetComponent.node.origin.linkLineWidth ? targetComponent.node.origin.linkLineWidth : 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;
+const isChildElement = (origin, child) => {
+    let parent = findParentElement(child);
+    while (parent) {
+        if (parent === origin) {
+            return true;
+        }
+        parent = findParentElement(parent);
     }
-    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;
-            }
+    return false;
+};
+const filterChildElement = (elements) => {
+    let result = [];
+    elements.forEach(element => {
+        const isChild = elements.some(node => {
+            return isChildElement(node, element);
+        });
+        if (!isChild) {
+            result.push(element);
         }
-        fakeRectangleStartY = fakeY;
-        fakeRectangleEndY = fakeRectangleStartY + 12;
+    });
+    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));
     }
-    if (isVerticalLogicLayout(layout)) {
-        parentComponent = targetComponent;
-        targetComponent = PlaitElement.getComponent(targetComponent.parent.origin);
-        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;
+    return newNode;
+};
+const transformRootToNode = (board, node) => {
+    const newNode = { ...node };
+    delete newNode.isRoot;
+    delete newNode.rightNodeCount;
+    delete newNode.type;
+    const text = Node.string(node.data.topic.children[0]) || ' ';
+    const { width, height } = getSizeByText(text, PlaitBoard.getViewportContainer(board), TOPIC_DEFAULT_MAX_WORD_COUNT);
+    newNode.width = Math.max(width, NODE_MIN_WIDTH);
+    newNode.height = height;
+    if (newNode.layout === MindLayoutType.standard) {
+        delete newNode.layout;
     }
-    if (isIndentedLayout(layout)) {
-        // 偏移一个 Gap
-        if (isLeftLayout(layout)) {
-            fakeX -= BASE * 4;
-        }
-        if (isRightLayout(layout)) {
-            fakeX += BASE * 4;
+    return newNode;
+};
+const transformAbstractToNode = (node) => {
+    const newNode = { ...node };
+    delete newNode.start;
+    delete newNode.end;
+    return newNode;
+};
+const transformNodeToRoot = (board, node) => {
+    const newElement = { ...node };
+    let text = Node.string(newElement.data.topic);
+    if (!text) {
+        text = '思维导图';
+        newElement.data.topic = { children: [{ text }] };
+    }
+    delete newElement?.strokeColor;
+    delete newElement?.fill;
+    delete newElement?.shape;
+    delete newElement?.strokeWidth;
+    const { width, height } = getSizeByText(text, PlaitBoard.getViewportContainer(board), TOPIC_DEFAULT_MAX_WORD_COUNT, ROOT_TOPIC_FONT_SIZE);
+    newElement.width = Math.max(width, NODE_MIN_WIDTH);
+    newElement.height = height;
+    return {
+        ...newElement,
+        layout: newElement.layout ?? MindLayoutType.right,
+        isCollapsed: false,
+        isRoot: true,
+        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);
         }
-        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 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 = findParentElement(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;
         }
-        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(roughSVG, parentComponent.node, fakeNode, PRIMARY_COLOR, false)
-        : drawLink(roughSVG, parentComponent.node, fakeNode, PRIMARY_COLOR, isHorizontalLayout(layout), false);
-    // 构造一个矩形框坐标
-    const fakeRectangleG = drawRoundRectangle(roughSVG, fakeRectangleStartX, fakeRectangleStartY, fakeRectangleEndX, fakeRectangleEndY, {
-        stroke: PRIMARY_COLOR,
-        strokeWidth: 2,
-        fill: PRIMARY_COLOR,
-        fillStyle: 'solid'
+    return false;
+};
+const createDefaultMindMapElement = (point, rightNodeCount, layout) => {
+    const root = createMindElement('思维导图', 72, ROOT_DEFAULT_HEIGHT, { shape: MindNodeShape.roundRectangle, layout });
+    root.rightNodeCount = rightNodeCount;
+    root.isRoot = true;
+    root.type = 'mindmap';
+    root.points = [point];
+    const children = [1, 1, 1].map(() => {
+        return createMindElement('新建节点', 56, TEXT_DEFAULT_HEIGHT, { shape: MindNodeShape.roundRectangle });
     });
-    fakeDropNodeG?.appendChild(linkSVGG);
-    fakeDropNodeG?.appendChild(fakeRectangleG);
+    root.children = children;
+    return root;
 };
-const drawStraightDropNodeG = (targetRect, detectResult, targetComponent, roughSVG, 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.linkLineWidth ? targetComponent.node.origin.linkLineWidth : STROKE_WIDTH;
-    const pointOptions = {
-        fakeX,
-        fakeY,
-        x,
-        y,
+const createMindElement = (text, width, height, options) => {
+    const newElement = {
+        id: idCreator(),
+        data: {
+            topic: { children: [{ text }] }
+        },
+        children: [],
         width,
         height,
-        strokeWidth
+        fill: options.fill,
+        strokeColor: options.strokeColor,
+        strokeWidth: options.strokeWidth,
+        shape: options.shape
     };
-    const parentLayout = MindQueries.getCorrectLayoutByElement(targetComponent.node.origin.isRoot ? targetComponent.node.origin : targetComponent.node.parent.origin);
-    const layout = MindQueries.getCorrectLayoutByElement(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(fakeDropNodeG, roughSVG, fakePoint, targetComponent.node);
-            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(targetComponent.parent.origin);
-                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;
+    if (options.fill) {
+        newElement.fill = options.fill;
+    }
+    if (options.strokeColor) {
+        newElement.strokeColor = options.strokeColor;
+    }
+    if (!isNullOrUndefined(options.strokeWidth)) {
+        newElement.strokeWidth = options.strokeWidth;
+    }
+    if (options.shape) {
+        newElement.shape = options.shape;
+    }
+    if (options.layout) {
+        newElement.layout = options.layout;
+    }
+    if (options.branchColor) {
+        newElement.branchColor = options.branchColor;
+    }
+    return newElement;
+};
+// layoutLevel 用来表示插入兄弟节点还是子节点
+const insertMindElement = (board, inheritNode, path) => {
+    let fill, strokeColor, strokeWidth, shape = MindNodeShape.roundRectangle;
+    if (!inheritNode.isRoot) {
+        fill = inheritNode.fill;
+        strokeColor = inheritNode.strokeColor;
+        strokeWidth = inheritNode.strokeWidth;
+    }
+    shape = inheritNode.shape;
+    const newElement = createMindElement('', NODE_MIN_WIDTH, TEXT_DEFAULT_HEIGHT, { fill, strokeColor, strokeWidth, shape });
+    Transforms.insertNode(board, newElement, path);
+    clearSelectedElement(board);
+    addSelectedElement(board, newElement);
+    setTimeout(() => {
+        enterNodeEditing(newElement);
+    });
+};
+const findLastChild = (child) => {
+    let result = child;
+    while (result.children.length !== 0) {
+        result = result.children[result.children.length - 1];
+    }
+    return result;
+};
+const deleteSelectedELements = (board, selectedElements) => {
+    //翻转，从下到上修改，防止找不到 path
+    const deletableElements = filterChildElement(selectedElements).reverse();
+    const relativeAbstracts = [];
+    const accumulativeProperties = new WeakMap();
+    deletableElements.forEach(node => {
+        if (!PlaitMind.isMind(node)) {
+            const behindAbstracts = getBehindAbstracts(node).filter(abstract => !deletableElements.includes(abstract));
+            if (behindAbstracts.length) {
+                behindAbstracts.forEach(abstract => {
+                    let newProperties = accumulativeProperties.get(abstract);
+                    if (!newProperties) {
+                        newProperties = { start: abstract.start, end: abstract.end };
+                        accumulativeProperties.set(abstract, newProperties);
+                        relativeAbstracts.push(abstract);
                     }
-                    fakeX = targetRect.x + width + offsetX - width / 2 - Math.ceil(strokeWidth / 2);
+                    newProperties.start = newProperties.start - 1;
+                    newProperties.end = newProperties.end - 1;
+                });
+            }
+            const correspondingAbstract = getCorrespondingAbstract(node);
+            if (correspondingAbstract && !deletableElements.includes(correspondingAbstract)) {
+                let newProperties = accumulativeProperties.get(correspondingAbstract);
+                if (!newProperties) {
+                    newProperties = { start: correspondingAbstract.start, end: correspondingAbstract.end };
+                    accumulativeProperties.set(correspondingAbstract, newProperties);
+                    relativeAbstracts.push(correspondingAbstract);
                 }
-                startRectanglePointX = fakeX;
-                if (isTopLayout(parentLayout)) {
-                    // 因为矩形是从左上角为起点向下画的，所以需要向上偏移一个矩形的高度（-12）
-                    startRectanglePointY = fakeY + height + targetComponent.node.vGap - 12;
+                newProperties.end = newProperties.end - 1;
+            }
+        }
+    });
+    const abstractHandles = relativeAbstracts.map(value => {
+        const newProperties = accumulativeProperties.get(value);
+        if (newProperties) {
+            const path = PlaitBoard.findPath(board, value);
+            return () => {
+                if (newProperties.start > newProperties.end) {
+                    Transforms.removeNode(board, path);
                 }
-                if (isBottomLayout(parentLayout)) {
-                    startRectanglePointY = fakeY + targetComponent.node.vGap;
+                else {
+                    Transforms.setNode(board, newProperties, path);
                 }
-                endRectanglePointX = startRectanglePointX + 30;
-                endRectanglePointY = startRectanglePointY + 12;
-                const fakeNode = { ...targetComponent.node, x: fakeX, y: fakeY, width: 30 };
-                const linkSVGG = drawLink(roughSVG, parentComponent.node, fakeNode, PRIMARY_COLOR, false, false);
-                fakeDropNodeG?.appendChild(linkSVGG);
+            };
+        }
+        return () => { };
+    });
+    const deletableHandles = deletableElements.map(node => {
+        const path = PlaitBoard.findPath(board, node);
+        return () => {
+            if (shouldChangeRightNodeCount(node)) {
+                changeRightNodeCount(board, path.slice(0, path.length - 1), -1);
             }
+            Transforms.removeNode(board, path);
+        };
+    });
+    abstractHandles.forEach(action => action());
+    deletableHandles.forEach(action => action());
+};
+const divideElementByParent = (elements) => {
+    const abstractIncludedGroups = [];
+    const parentElements = [];
+    for (let i = 0; i < elements.length; i++) {
+        const parent = MindElement.getParent(elements[i]);
+        const parentIndex = parentElements.indexOf(parent);
+        if (parentIndex === -1) {
+            parentElements.push(parent);
+            abstractIncludedGroups.push([elements[i]]);
         }
         else {
-            let linkSVGG = roughSVG.linearPath(linePoints, { stroke: PRIMARY_COLOR, strokeWidth });
-            fakeDropNodeG?.appendChild(linkSVGG);
-        }
-        // 构造一个矩形框坐标
-        let fakeRectangleG = drawRoundRectangle(roughSVG, 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(fakeDropNodeG, roughSVG, fakePoint, targetComponent.node);
-                return;
-            }
+            abstractIncludedGroups[parentIndex].push(elements[i]);
         }
     }
+    return { parentElements, abstractIncludedGroups };
 };
-const getHorizontalFakeY = (detectResult, targetIndex, parentNode, targetRect, layout, fakeY) => {
-    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;
-        }
+
+const getNodeShapeByElement = (element) => {
+    let nodeShape = element.shape;
+    if (nodeShape) {
+        return nodeShape;
     }
-    if (detectResult === 'bottom') {
-        fakeY = targetRect.y + targetRect.height + 30;
-        if (targetIndex < parentNode.origin.children.length - 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 === parentNode.origin.children.length - 1) {
-            fakeY = targetRect.y + targetRect.height + 30;
+    let parent = findParentElement(element);
+    while (parent) {
+        if (parent.shape) {
+            return parent.shape;
         }
+        parent = findParentElement(parent);
     }
-    return fakeY;
+    return MindNodeShape.roundRectangle;
 };
-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;
+
+const getBranchColorByMindElement = (board, element) => {
+    const ancestors = MindElement.getAncestors(board, element);
+    ancestors.unshift(element);
+    const ancestor = ancestors.find(value => value.branchColor);
+    if (ancestor && ancestor.branchColor) {
+        return ancestor.branchColor;
+    }
+    const root = ancestors[ancestors.length - 1];
+    const branch = ancestors[ancestors.length - 2];
+    if (branch) {
+        const index = root.children.indexOf(branch);
+        const length = COLORS.length;
+        const remainder = index % length;
+        return COLORS[remainder];
     }
-    if (isRightLayout(layout)) {
-        fakeX = x + offsetX;
+    else {
+        throw new Error('root element should not have branch color');
     }
-    if (isTopLayout(layout)) {
-        fakeY = y - offsetY;
+};
+const getNextBranchColor = (root) => {
+    const index = root.children.length;
+    const length = COLORS.length;
+    const remainder = index % length;
+    return COLORS[remainder];
+};
+
+const getStrokeByMindElement = (board, element) => {
+    const ancestors = MindElement.getAncestors(board, element);
+    ancestors.unshift(element);
+    const ancestor = ancestors.find(value => value.strokeColor);
+    if (ancestor && ancestor.strokeColor) {
+        return ancestor.strokeColor;
+    }
+    const root = ancestors[ancestors.length - 1];
+    const branch = ancestors[ancestors.length - 2];
+    if (branch) {
+        const index = root.children.indexOf(branch);
+        const length = COLORS.length;
+        const remainder = index % length;
+        return COLORS[remainder];
     }
-    if (isBottomLayout(layout)) {
-        fakeY = y + height + offsetY;
+    else {
+        return ROOT_NODE_STROKE;
     }
-    return { fakeX, fakeY };
-};
-const drawIndentNodeG = (fakeDropNodeG, roughSVG, fakePoint, node) => {
-    const { fakeX, fakeY } = fakePoint;
-    const fakeNode = { ...node, x: fakeX, y: fakeY, width: 30, height: 12 };
-    const linkSVGG = drawIndentedLink(roughSVG, node, fakeNode, PRIMARY_COLOR, false);
-    const startRectanglePointX = fakeX, startRectanglePointY = fakeY, endRectanglePointX = fakeX + 30, endRectanglePointY = fakeY + 12;
-    const fakeRectangleG = drawRoundRectangle(roughSVG, startRectanglePointX, startRectanglePointY, endRectanglePointX, endRectanglePointY, {
-        stroke: PRIMARY_COLOR,
-        strokeWidth: 2,
-        fill: PRIMARY_COLOR,
-        fillStyle: 'solid'
-    });
-    fakeDropNodeG?.appendChild(linkSVGG);
-    fakeDropNodeG?.appendChild(fakeRectangleG);
 };
 
-/**
- *
- * @param targetNode
- * @param centerPoint
- * @returns DetectResult[] | null
- */
-const directionDetector = (targetNode, centerPoint) => {
-    const { x, y, width, height } = getRectangleByNode(targetNode);
-    const yCenter = y + height / 2;
-    const xCenter = x + width / 2;
-    const top = targetNode.y;
-    const bottom = targetNode.y + targetNode.height;
-    const left = targetNode.x;
-    const right = targetNode.x + targetNode.width;
-    const direction = [];
-    // x 轴
-    if (centerPoint[1] > y && centerPoint[1] < y + height) {
-        if (centerPoint[0] > left && centerPoint[0] < xCenter) {
-            direction.push('left');
-        }
-        if (centerPoint[0] > xCenter && centerPoint[0] < right) {
-            direction.push('right');
+function isVirtualKey(e) {
+    const isMod = e.ctrlKey || e.metaKey;
+    const isAlt = isKeyHotkey('alt', e);
+    const isShift = isKeyHotkey('shift', e);
+    const isCapsLock = e.key.includes('CapsLock');
+    const isTab = e.key.includes('Tab');
+    const isEsc = e.key.includes('Escape');
+    const isF = e.key.startsWith('F');
+    const isArrow = e.key.includes('Arrow') ? true : false;
+    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(node.origin);
+    if (isHorizontal) {
+        if (!isChildRight(node, child)) {
+            beginNode = child;
+            endNode = node;
         }
-        // 重合区域，返回两个方向
-        if ((centerPoint[0] > x && centerPoint[0] < xCenter) || (centerPoint[0] > xCenter && centerPoint[0] < x + width)) {
-            if (centerPoint[1] < yCenter) {
-                direction.push('top');
+        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)) &&
+            getNodeShapeByElement(node.origin) === MindNodeShape.underline) {
+            if (isChildRight(node, child)) {
+                beginY = node.y + node.height - node.vGap;
             }
             else {
-                direction.push('bottom');
+                endY = node.y + node.height - node.vGap;
             }
         }
-        return direction.length ? direction : null;
     }
-    // y 轴
-    if (centerPoint[0] > x && centerPoint[0] < x + width) {
-        if (centerPoint[1] > top && centerPoint[1] < yCenter) {
-            direction.push('top');
-        }
-        if (centerPoint[1] > yCenter && centerPoint[1] < bottom) {
-            direction.push('bottom');
-        }
-        if ((centerPoint[1] > y && centerPoint[1] < y + height) || (centerPoint[1] > yCenter && centerPoint[1] < y + height)) {
-            if (centerPoint[0] < xCenter) {
-                direction.push('left');
-            }
-            else {
-                direction.push('right');
-            }
+    else {
+        if (node.y > child.y) {
+            beginNode = child;
+            endNode = node;
         }
-        return direction.length ? direction : null;
+        beginX = beginNode.x + beginNode.width / 2;
+        beginY = beginNode.y + beginNode.height - beginNode.vGap;
+        endX = endNode.x + endNode.width / 2;
+        endY = endNode.y + endNode.vGap;
     }
-    return null;
-};
-
-const directionCorrector = (node, detectResults) => {
-    if (!node.origin.isRoot) {
-        const parentlayout = MindQueries.getCorrectLayoutByElement(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']);
+    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;
         }
-        if (parentlayout === MindLayoutType.downward) {
-            return getAllowedDirection(detectResults, ['top']);
+        if (layout === MindLayoutType.upward) {
+            endY -= strokeWidth;
         }
     }
-    else {
-        const layout = MindQueries.getCorrectLayoutByElement(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 (beginNode.origin.isRoot) {
+        if (layout === MindLayoutType.right || isStandardLayout(layout)) {
+            beginX += strokeWidth;
         }
-        if (layout === MindLayoutType.right) {
-            return getAllowedDirection(detectResults, ['left', 'top', 'bottom']);
+        if (layout === MindLayoutType.downward) {
+            beginY += strokeWidth;
         }
     }
-    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 = (dropTarget) => {
-    const { target, detectResult } = dropTarget;
-    const newDropTarget = { target, detectResult };
-    const targetComponent = PlaitElement.getComponent(target);
-    if (targetComponent.node.children.length > 0 && dropTarget.detectResult) {
-        const layout = MindQueries.getCorrectLayoutByElement(targetComponent.node.origin);
-        const parentLayout = MindQueries.getCorrectLayoutByElement(targetComponent.node.origin.isRoot ? targetComponent.node.origin : targetComponent.node.parent.origin);
-        if (['right', 'left'].includes(dropTarget.detectResult)) {
-            if (!isMixedLayout(parentLayout, layout)) {
-                if (targetComponent.node.origin.isRoot) {
-                    const layout = MindQueries.getCorrectLayoutByElement(targetComponent.node.origin);
-                    // 标准布局，根节点
-                    if (isStandardLayout(layout)) {
-                        const rightNodeCount = targetComponent.node.origin.rightNodeCount;
-                        if (detectResult === 'left') {
-                            // 作为左的第一个节点
-                            if (targetComponent.node.children.length === rightNodeCount) {
-                                return newDropTarget;
-                            }
-                        }
-                        else {
-                            // 作为右的第一个节点或最后一个节点
-                            if (rightNodeCount === 0) {
-                                newDropTarget.target = target;
-                            }
-                            else {
-                                newDropTarget.target = targetComponent.node.children[rightNodeCount - 1].origin;
-                                newDropTarget.detectResult = 'bottom';
-                            }
-                            return newDropTarget;
-                        }
-                    }
-                }
-                // 缩进布局探测到第一个子节点
-                if (isIndentedLayout(parentLayout)) {
-                    newDropTarget.target = targetComponent.node.children[0].origin;
-                    newDropTarget.detectResult = isTopLayout(parentLayout) ? 'bottom' : 'top';
-                    return newDropTarget;
-                }
-                // 上下布局的根节点只可以探测到上或者下，子节点的左右探测不处理，跳过。
-                if (isVerticalLogicLayout(parentLayout)) {
-                    return newDropTarget;
-                }
-                // 剩下是水平布局的默认情况：插入最后一个子节点的下方
-                const lastChildNodeIndex = targetComponent.node.children.length - 1;
-                newDropTarget.target = targetComponent.node.children[lastChildNodeIndex].origin;
-                newDropTarget.detectResult = '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 = getNodeShapeByElement(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 {
-                // 处理左右布局下的混合布局
-                if ([MindLayoutType.left, MindLayoutType.right].includes(parentLayout)) {
-                    const layout = MindQueries.getCorrectLayoutByElement(targetComponent.node.origin);
-                    if (isIndentedLayout(layout)) {
-                        newDropTarget.target = targetComponent.node.children[0].origin;
-                        newDropTarget.detectResult = isTopLayout(layout) ? 'bottom' : 'top';
-                        return newDropTarget;
-                    }
-                }
+                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 (['top', 'bottom'].includes(dropTarget.detectResult)) {
-            // 缩进布局移动至第一个节点
-            if (targetComponent.node.origin.isRoot && isIndentedLayout(layout)) {
-                newDropTarget.target = targetComponent.node.children[0].origin;
-                newDropTarget.detectResult = isTopLayout(layout) ? 'bottom' : 'top';
-                return newDropTarget;
+        if (needDrawUnderline && shape === MindNodeShape.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];
             }
-            // 上下布局，插到右边
-            const parentLayout = MindQueries.getCorrectLayoutByElement(targetComponent.node.origin.isRoot ? targetComponent.node.origin : targetComponent.node.parent.origin);
-            if (isVerticalLogicLayout(parentLayout)) {
-                const lastChildNodeIndex = targetComponent.node.children.length - 1;
-                newDropTarget.target = targetComponent.node.children[lastChildNodeIndex].origin;
-                newDropTarget.detectResult = 'right';
-                return newDropTarget;
+            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];
             }
         }
-        return newDropTarget;
-    }
-    return dropTarget;
-};
-
-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) => {
-    const component = PlaitElement.getComponent(element);
-    const parent = component.parent;
-    if (!parent)
-        return false;
-    const elementIndex = parent.children.indexOf(component.node);
-    return parent.children.some(child => {
-        return AbstractNode.isAbstract(child.origin) && elementIndex >= child.origin.start && elementIndex <= child.origin.end;
-    });
-};
-const canSetAbstract = (element) => {
-    return !PlaitElement.isRootElement(element) && !AbstractNode.isAbstract(element) && !isSetAbstract(element);
-};
-const setAbstract = (board, elements) => {
-    let elementGroup = filterChildElement(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);
-        insetAbstractNode(board, path, rightCHildren[0], rightCHildren[rightCHildren.length - 1]);
-        insetAbstractNode(board, Path.next(path), leftChildren[0], leftChildren[leftChildren.length - 1]);
+        const points = pointsOnBezierCurves(curve);
+        return PlaitBoard.getRoughSVG(board).curve(points, { stroke, strokeWidth });
     }
     else {
-        const path = [...PlaitBoard.findPath(board, groupParent), groupParent.children.length];
-        insetAbstractNode(board, path, start, end);
+        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 insetAbstractNode = (board, path, start, end) => {
-    const mindElement = createMindElement('概要', 28, 20, {
-        strokeColor: GRAY_COLOR,
-        linkLineColor: GRAY_COLOR
-    });
-    mindElement.start = start;
-    mindElement.end = end;
-    Transforms.insertNode(board, mindElement, path);
-};
+}
 
-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
-            };
-        }
+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);
     }
-    else {
-        if (activeHandlePosition === AbstractHandlePosition.start) {
-            return {
-                ...abstractRectangle,
-                x: location,
-                width: abstractRectangle.width + abstractRectangle.x - location
-            };
-        }
-        else {
-            return {
-                ...abstractRectangle,
-                width: location - abstractRectangle.x
-            };
-        }
+    if (targetComponent.parent && dropTarget.detectResult && ['top', 'bottom'].includes(dropTarget.detectResult)) {
+        const parentComponent = PlaitElement.getComponent(targetComponent.parent.origin);
+        const targetIndex = parentComponent.node.origin.children.indexOf(targetComponent.node.origin);
+        drawCurvePlaceholderDropNodeG(board, targetRect, dropTarget.detectResult, targetIndex, targetComponent, parentComponent, fakeDropNodeG);
     }
 };
-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 drawCurvePlaceholderDropNodeG = (board, targetRect, detectResult, targetIndex, targetComponent, parentComponent, fakeDropNodeG) => {
+    const parentNodeLayout = MindQueries.getCorrectLayoutByElement(parentComponent.node.origin);
+    const layout = MindQueries.getCorrectLayoutByElement(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;
+            }
         }
-        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
-            };
+        fakeRectangleStartY = fakeY;
+        fakeRectangleEndY = fakeRectangleStartY + 12;
+    }
+    if (isVerticalLogicLayout(layout)) {
+        parentComponent = targetComponent;
+        targetComponent = PlaitElement.getComponent(targetComponent.parent.origin);
+        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;
         }
-        else {
-            return {
-                max: endNodeRectangle.x - ABSTRACT_INCLUDED_OUTLINE_OFFSET,
-                min: minNodeRectangle.x - ABSTRACT_INCLUDED_OUTLINE_OFFSET
-            };
+        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;
     }
-    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];
+    if (isIndentedLayout(layout)) {
+        // 偏移一个 Gap
+        if (isLeftLayout(layout)) {
+            fakeX -= BASE * 4;
         }
-        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
-            };
+        if (isRightLayout(layout)) {
+            fakeX += BASE * 4;
         }
-        else {
-            return {
-                max: maxNodeRectangle.x + maxNodeRectangle.width + ABSTRACT_INCLUDED_OUTLINE_OFFSET,
-                min: startNodeRectangle.x + startNodeRectangle.width + ABSTRACT_INCLUDED_OUTLINE_OFFSET
-            };
+        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);
+                }
+            }
         }
+        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'
+    });
+    fakeDropNodeG?.appendChild(linkSVGG);
+    fakeDropNodeG?.appendChild(fakeRectangleG);
 };
-const getHitAbstractHandle = (board, element, point) => {
-    const nodeLayout = MindQueries.getCorrectLayoutByElement(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 null;
-};
-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);
+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;
     }
-    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
+    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
     };
-    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;
-}
-
-/**
- * get correctly layout：
- * 1. root is standard -> left or right
- * 2. correct layout by incorrect layout direction
- * @param element
- */
-const getCorrectLayoutByElement = (element) => {
-    const { root } = findUpElement(element);
-    const rootLayout = root.layout || getDefaultLayout();
-    let correctRootLayout = rootLayout;
-    if (element.isRoot) {
-        return correctRootLayout;
-    }
-    const component = PlaitElement.getComponent(element);
-    let layout = element.layout;
-    let parentComponent = null;
-    let parent = component.parent.origin;
-    while (!layout && parent) {
-        parentComponent = PlaitElement.getComponent(parent);
-        layout = parentComponent.node.origin.layout;
-        parent = parentComponent.parent?.origin;
-    }
-    if ((AbstractNode.isAbstract(element) || isChildOfAbstract(MindElement.getNode(element))) &&
-        isIndentedLayout(layout)) {
-        return getAbstractLayout(layout);
-    }
-    // handle root standard
-    if (rootLayout === MindLayoutType.standard) {
-        correctRootLayout = component?.node.left ? MindLayoutType.left : MindLayoutType.right;
-    }
-    if (parentComponent && parentComponent.node.origin.isRoot) {
-        return correctRootLayout;
-    }
-    if (layout) {
-        const incorrectDirection = getInCorrectLayoutDirection(correctRootLayout, layout);
-        if (incorrectDirection) {
-            return correctLayoutByDirection(layout, incorrectDirection);
-        }
-        else {
-            return layout;
-        }
-    }
-    else {
-        return correctRootLayout;
-    }
-};
-
-const getBranchLayouts = (element) => {
-    const layouts = [];
-    if (element.layout) {
-        //getCorrectLayoutByElement含有递归操作，getBranchMindmapLayouts本身也有递归操作，有待优化
-        layouts.unshift(getCorrectLayoutByElement(element));
-    }
-    let parent = findParentElement(element);
-    while (parent) {
-        if (parent.layout) {
-            layouts.unshift(parent.layout);
-        }
-        parent = findParentElement(parent);
-    }
-    return layouts;
-};
-
-/**
- *  get available sub layouts by element
- * @param element
- * @returns MindLayoutType[]
- */
-const getAvailableSubLayoutsByElement = (element) => {
-    const parentElement = findParentElement(element);
-    if (parentElement) {
-        const branchLayouts = getBranchLayouts(parentElement);
-        if (branchLayouts[0] === MindLayoutType.standard) {
-            const node = MindElement.getNode(element);
-            branchLayouts[0] = node.left ? MindLayoutType.left : MindLayoutType.right;
-        }
-        const currentLayoutDirections = getBranchDirectionsByLayouts(branchLayouts);
-        let availableSubLayouts = getAvailableSubLayoutsByLayoutDirections(currentLayoutDirections);
-        const parentLayout = [branchLayouts[branchLayouts.length - 1]];
-        const parentDirections = getBranchDirectionsByLayouts(parentLayout);
-        const parentAvailableSubLayouts = getAvailableSubLayoutsByLayoutDirections(parentDirections);
-        availableSubLayouts = availableSubLayouts.filter(layout => parentAvailableSubLayouts.some(parentAvailableSubLayout => parentAvailableSubLayout === layout));
-        return availableSubLayouts;
-    }
-    return undefined;
-};
-
-/**
- * 获取父节点布局类型
- * @param element
- * @returns MindLayoutType
- */
-const getLayoutParentByElement = (element) => {
-    let parent = findParentElement(element);
-    while (parent) {
-        if (parent.layout) {
-            return parent.layout;
+    const parentLayout = MindQueries.getCorrectLayoutByElement(targetComponent.node.origin.isRoot ? targetComponent.node.origin : targetComponent.node.parent.origin);
+    const layout = MindQueries.getCorrectLayoutByElement(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);
+            return;
         }
-        parent = findParentElement(parent);
-    }
-    return getDefaultLayout();
-};
-
-const getLayoutByElement = (element) => {
-    const layout = element.layout;
-    if (layout) {
-        return layout;
-    }
-    if (AbstractNode.isAbstract(element) ||
-        (isChildOfAbstract(MindElement.getNode(element)) && isIndentedLayout(layout))) {
-        const parentLayout = getLayoutParentByElement(element);
-        return getAbstractLayout(parentLayout);
-    }
-    return getLayoutParentByElement(element);
-};
-
-const MindQueries = {
-    getAvailableSubLayoutsByElement,
-    getLayoutParentByElement,
-    getBranchLayouts,
-    getLayoutByElement,
-    getCorrectLayoutByElement
-};
-
-const PlaitMind = {
-    isMind: (value) => {
-        return value.type === 'mindmap';
-    }
-};
-const MindElement = {
-    hasLayout(value, layout) {
-        const _layout = MindQueries.getLayoutByElement(value);
-        return _layout === layout;
-    },
-    isIndentedLayout(value) {
-        const _layout = MindQueries.getLayoutByElement(value);
-        return isIndentedLayout(_layout);
-    },
-    isMindElement(board, element) {
-        const path = PlaitBoard.findPath(board, element);
-        const rootElement = PlaitNode.get(board, path.slice(0, 1));
-        if (PlaitMind.isMind(rootElement)) {
-            return true;
+        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(targetComponent.parent.origin);
+                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);
+            }
         }
         else {
-            return false;
-        }
-    },
-    getParent(node) {
-        if (PlaitMind.isMind(node)) {
-            throw new Error('mind root node can not get parent');
+            let linkSVGG = PlaitBoard.getRoughSVG(board).linearPath(linePoints, { stroke: PRIMARY_COLOR, strokeWidth });
+            fakeDropNodeG?.appendChild(linkSVGG);
         }
-        const parent = NODE_TO_PARENT.get(node);
-        return parent;
-    },
-    getRoot(board, element) {
-        const path = PlaitBoard.findPath(board, element);
-        return PlaitNode.get(board, path.slice(0, 1));
-    },
-    getNode(element) {
-        const node = ELEMENT_TO_NODE.get(element);
-        if (!node) {
-            throw new Error(`can not get node from ${JSON.stringify(element)}`);
+        // 构造一个矩形框坐标
+        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;
+            }
         }
-        return node;
-    },
-    hasEmojis(element) {
-        if (element.data.emojis) {
-            return true;
+    }
+};
+const getHorizontalFakeY = (detectResult, targetIndex, parentNode, targetRect, layout, fakeY) => {
+    if (detectResult === 'top') {
+        if (targetIndex === 0 && isTopLayout(layout)) {
+            fakeY = targetRect.y + targetRect.height;
         }
-        else {
-            return false;
+        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;
         }
-    },
-    getEmojis(element) {
-        return element.data.emojis;
     }
-};
-
-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];
+    if (detectResult === 'bottom') {
+        fakeY = targetRect.y + targetRect.height + 30;
+        if (targetIndex < parentNode.origin.children.length - 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;
         }
-        return node;
-    },
-    isEquals(node, otherNode) {
-        const hasSameSize = node.x === otherNode.x && node.y === otherNode.y && node.width === otherNode.width && node.height === otherNode.height;
-        const hasSameOrigin = node.origin === otherNode.origin;
-        let hasSameParentOriginChildren = false;
-        if (node.parent && otherNode.parent) {
-            hasSameParentOriginChildren = node.parent.origin.children == otherNode.parent.origin.children;
+        if (targetIndex === parentNode.origin.children.length - 1) {
+            fakeY = targetRect.y + targetRect.height + 30;
         }
-        return hasSameSize && hasSameOrigin && hasSameParentOriginChildren;
     }
+    return fakeY;
 };
-
-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);
-}
-
-function findParentElement(element) {
-    const component = PlaitElement.getComponent(element);
-    if (component && component.parent) {
-        return component.parent.origin;
+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;
     }
-    return undefined;
-}
-function findUpElement(element) {
-    let branch;
-    let root = element;
-    let parent = findParentElement(element);
-    while (parent) {
-        branch = root;
-        root = parent;
-        parent = findParentElement(parent);
+    if (isRightLayout(layout)) {
+        fakeX = x + offsetX;
     }
-    return { root, branch };
-}
-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 = findParentElement(child);
-    while (parent) {
-        if (parent === origin) {
-            return true;
-        }
-        parent = findParentElement(parent);
+    if (isTopLayout(layout)) {
+        fakeY = y - offsetY;
     }
-    return false;
+    if (isBottomLayout(layout)) {
+        fakeY = y + height + offsetY;
+    }
+    return { fakeX, fakeY };
 };
-const filterChildElement = (elements) => {
-    let result = [];
-    elements.forEach(element => {
-        const isChild = elements.some(node => {
-            return isChildElement(node, element);
-        });
-        if (!isChild) {
-            result.push(element);
-        }
+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'
     });
-    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;
+    fakeDropNodeG?.appendChild(linkSVGG);
+    fakeDropNodeG?.appendChild(fakeRectangleG);
 };
-const transformRootToNode = (board, node) => {
-    const newNode = { ...node };
-    delete newNode.isRoot;
-    delete newNode.rightNodeCount;
-    delete newNode.type;
-    const text = Node.string(node.data.topic.children[0]) || ' ';
-    const { width, height } = getSizeByText(text, PlaitBoard.getViewportContainer(board), TOPIC_DEFAULT_MAX_WORD_COUNT);
-    newNode.width = Math.max(width, NODE_MIN_WIDTH);
-    newNode.height = height;
-    if (newNode.layout === MindLayoutType.standard) {
-        delete newNode.layout;
+
+/**
+ *
+ * @param targetNode
+ * @param centerPoint
+ * @returns DetectResult[] | null
+ */
+const directionDetector = (targetNode, centerPoint) => {
+    const { x, y, width, height } = getRectangleByNode(targetNode);
+    const yCenter = y + height / 2;
+    const xCenter = x + width / 2;
+    const top = targetNode.y;
+    const bottom = targetNode.y + targetNode.height;
+    const left = targetNode.x;
+    const right = targetNode.x + targetNode.width;
+    const direction = [];
+    // x 轴
+    if (centerPoint[1] > y && centerPoint[1] < y + height) {
+        if (centerPoint[0] > left && centerPoint[0] < xCenter) {
+            direction.push('left');
+        }
+        if (centerPoint[0] > xCenter && centerPoint[0] < right) {
+            direction.push('right');
+        }
+        // 重合区域，返回两个方向
+        if ((centerPoint[0] > x && centerPoint[0] < xCenter) || (centerPoint[0] > xCenter && centerPoint[0] < x + width)) {
+            if (centerPoint[1] < yCenter) {
+                direction.push('top');
+            }
+            else {
+                direction.push('bottom');
+            }
+        }
+        return direction.length ? direction : null;
     }
-    return newNode;
-};
-const transformNodeToRoot = (board, node) => {
-    const newElement = { ...node };
-    let text = Node.string(newElement.data.topic);
-    if (!text) {
-        text = '思维导图';
-        newElement.data.topic = { children: [{ text }] };
+    // y 轴
+    if (centerPoint[0] > x && centerPoint[0] < x + width) {
+        if (centerPoint[1] > top && centerPoint[1] < yCenter) {
+            direction.push('top');
+        }
+        if (centerPoint[1] > yCenter && centerPoint[1] < bottom) {
+            direction.push('bottom');
+        }
+        if ((centerPoint[1] > y && centerPoint[1] < y + height) || (centerPoint[1] > yCenter && centerPoint[1] < y + height)) {
+            if (centerPoint[0] < xCenter) {
+                direction.push('left');
+            }
+            else {
+                direction.push('right');
+            }
+        }
+        return direction.length ? direction : null;
     }
-    delete newElement?.strokeColor;
-    delete newElement?.fill;
-    delete newElement?.shape;
-    delete newElement?.strokeWidth;
-    const { width, height } = getSizeByText(text, PlaitBoard.getViewportContainer(board), TOPIC_DEFAULT_MAX_WORD_COUNT, ROOT_TOPIC_FONT_SIZE);
-    newElement.width = Math.max(width, NODE_MIN_WIDTH);
-    newElement.height = height;
-    return {
-        ...newElement,
-        layout: newElement.layout ?? MindLayoutType.right,
-        isCollapsed: false,
-        isRoot: true,
-        type: 'mindmap'
-    };
+    return null;
 };
-const extractNodesText = (node) => {
-    let str = '';
-    if (node) {
-        str += Node.string(node.data.topic.children[0]) + ' ';
-        for (const childNode of node.children) {
-            str += extractNodesText(childNode);
+
+const directionCorrector = (node, detectResults) => {
+    if (!node.origin.isRoot) {
+        const parentlayout = MindQueries.getCorrectLayoutByElement(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']);
         }
     }
-    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 = findParentElement(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;
+    else {
+        const layout = MindQueries.getCorrectLayoutByElement(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 false;
+    return null;
 };
-const createDefaultMindMapElement = (point, rightNodeCount, layout) => {
-    const root = createMindElement('思维导图', 72, ROOT_DEFAULT_HEIGHT, { shape: MindNodeShape.roundRectangle, layout });
-    root.rightNodeCount = rightNodeCount;
-    root.isRoot = true;
-    root.type = 'mindmap';
-    root.points = [point];
-    const children = [1, 1, 1].map(() => {
-        return createMindElement('新建节点', 56, TEXT_DEFAULT_HEIGHT, { shape: MindNodeShape.roundRectangle });
+const getAllowedDirection = (detectResults, illegalDirections) => {
+    const directions = detectResults;
+    illegalDirections.forEach(item => {
+        const bottomDirectionIndex = directions.findIndex(direction => direction === item);
+        if (bottomDirectionIndex !== -1) {
+            directions.splice(bottomDirectionIndex, 1);
+        }
     });
-    root.children = children;
-    return root;
+    return directions.length ? directions : null;
 };
-const createMindElement = (text, width, height, options) => {
-    const newElement = {
-        id: idCreator(),
-        data: {
-            topic: { children: [{ text }] }
-        },
-        children: [],
-        width,
-        height,
-        fill: options.fill,
-        strokeColor: options.strokeColor,
-        strokeWidth: options.strokeWidth,
-        shape: options.shape
-    };
-    if (options.fill) {
-        newElement.fill = options.fill;
-    }
-    if (options.strokeColor) {
-        newElement.strokeColor = options.strokeColor;
-    }
-    if (!isNullOrUndefined(options.strokeWidth)) {
-        newElement.strokeWidth = options.strokeWidth;
-    }
-    if (options.shape) {
-        newElement.shape = options.shape;
-    }
-    if (options.layout) {
-        newElement.layout = options.layout;
-    }
-    if (options.linkLineColor) {
-        newElement.linkLineColor = options.linkLineColor;
+
+/* 根据布局调整 target 以及 direction */
+const readjustmentDropTarget = (dropTarget) => {
+    const { target, detectResult } = dropTarget;
+    const newDropTarget = { target, detectResult };
+    const targetComponent = PlaitElement.getComponent(target);
+    if (targetComponent.node.children.length > 0 && dropTarget.detectResult) {
+        const layout = MindQueries.getCorrectLayoutByElement(targetComponent.node.origin);
+        const parentLayout = MindQueries.getCorrectLayoutByElement(targetComponent.node.origin.isRoot ? targetComponent.node.origin : targetComponent.node.parent.origin);
+        if (['right', 'left'].includes(dropTarget.detectResult)) {
+            if (!isMixedLayout(parentLayout, layout)) {
+                if (targetComponent.node.origin.isRoot) {
+                    const layout = MindQueries.getCorrectLayoutByElement(targetComponent.node.origin);
+                    // 标准布局，根节点
+                    if (isStandardLayout(layout)) {
+                        const rightNodeCount = targetComponent.node.origin.rightNodeCount;
+                        if (detectResult === 'left') {
+                            // 作为左的第一个节点
+                            if (targetComponent.node.children.length === rightNodeCount) {
+                                return newDropTarget;
+                            }
+                        }
+                        else {
+                            // 作为右的第一个节点或最后一个节点
+                            if (rightNodeCount === 0) {
+                                newDropTarget.target = target;
+                            }
+                            else {
+                                newDropTarget.target = targetComponent.node.children[rightNodeCount - 1].origin;
+                                newDropTarget.detectResult = 'bottom';
+                            }
+                            return newDropTarget;
+                        }
+                    }
+                }
+                // 缩进布局探测到第一个子节点
+                if (isIndentedLayout(parentLayout)) {
+                    newDropTarget.target = targetComponent.node.children[0].origin;
+                    newDropTarget.detectResult = isTopLayout(parentLayout) ? 'bottom' : 'top';
+                    return newDropTarget;
+                }
+                // 上下布局的根节点只可以探测到上或者下，子节点的左右探测不处理，跳过。
+                if (isVerticalLogicLayout(parentLayout)) {
+                    return newDropTarget;
+                }
+                // 剩下是水平布局的默认情况：插入最后一个子节点的下方
+                const lastChildNodeIndex = targetComponent.node.children.length - 1;
+                newDropTarget.target = targetComponent.node.children[lastChildNodeIndex].origin;
+                newDropTarget.detectResult = 'bottom';
+            }
+            else {
+                // 处理左右布局下的混合布局
+                if ([MindLayoutType.left, MindLayoutType.right].includes(parentLayout)) {
+                    const layout = MindQueries.getCorrectLayoutByElement(targetComponent.node.origin);
+                    if (isIndentedLayout(layout)) {
+                        newDropTarget.target = targetComponent.node.children[0].origin;
+                        newDropTarget.detectResult = isTopLayout(layout) ? 'bottom' : 'top';
+                        return newDropTarget;
+                    }
+                }
+            }
+        }
+        if (['top', 'bottom'].includes(dropTarget.detectResult)) {
+            // 缩进布局移动至第一个节点
+            if (targetComponent.node.origin.isRoot && isIndentedLayout(layout)) {
+                newDropTarget.target = targetComponent.node.children[0].origin;
+                newDropTarget.detectResult = isTopLayout(layout) ? 'bottom' : 'top';
+                return newDropTarget;
+            }
+            // 上下布局，插到右边
+            const parentLayout = MindQueries.getCorrectLayoutByElement(targetComponent.node.origin.isRoot ? targetComponent.node.origin : targetComponent.node.parent.origin);
+            if (isVerticalLogicLayout(parentLayout)) {
+                const lastChildNodeIndex = targetComponent.node.children.length - 1;
+                newDropTarget.target = targetComponent.node.children[lastChildNodeIndex].origin;
+                newDropTarget.detectResult = 'right';
+                return newDropTarget;
+            }
+        }
+        return newDropTarget;
     }
-    return newElement;
+    return dropTarget;
 };
-// layoutLevel 用来表示插入兄弟节点还是子节点
-const insertMindElement = (board, inheritNode, path) => {
-    let fill, strokeColor, strokeWidth, shape = MindNodeShape.roundRectangle;
-    if (!inheritNode.isRoot) {
-        fill = inheritNode.fill;
-        strokeColor = inheritNode.strokeColor;
-        strokeWidth = inheritNode.strokeWidth;
-    }
-    shape = inheritNode.shape;
-    const newElement = createMindElement('', NODE_MIN_WIDTH, TEXT_DEFAULT_HEIGHT, { fill, strokeColor, strokeWidth, shape });
-    const index = path[path.length - 1];
-    const abstractNode = inheritNode.children.find(child => AbstractNode.isAbstract(child) && index > child.start && index <= child.end + 1);
-    if (abstractNode) {
-        const path = PlaitBoard.findPath(board, abstractNode);
-        Transforms.setNode(board, { end: abstractNode.end + 1 }, path);
+
+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
+            };
+        }
     }
-    Transforms.insertNode(board, newElement, path);
-    clearSelectedElement(board);
-    addSelectedElement(board, newElement);
-    setTimeout(() => {
-        enterNodeEditing(newElement);
-    });
-};
-const findLastChild = (child) => {
-    let result = child;
-    while (result.children.length !== 0) {
-        result = result.children[result.children.length - 1];
+    else {
+        if (activeHandlePosition === AbstractHandlePosition.start) {
+            return {
+                ...abstractRectangle,
+                x: location,
+                width: abstractRectangle.width + abstractRectangle.x - location
+            };
+        }
+        else {
+            return {
+                ...abstractRectangle,
+                width: location - abstractRectangle.x
+            };
+        }
     }
-    return result;
 };
-const deleteSelectedELements = (board, selectedElements) => {
-    //翻转，从下到上修改，防止找不到 path
-    const deletableElements = filterChildElement(selectedElements).reverse();
-    const relativeAbstracts = [];
-    const accumulativeProperties = new WeakMap();
-    deletableElements.forEach(node => {
-        if (!PlaitMind.isMind(node)) {
-            const parentElement = MindElement.getParent(node);
-            const index = parentElement.children.indexOf(node);
-            const abstracts = parentElement.children.filter(value => AbstractNode.isAbstract(value));
-            abstracts.forEach(abstract => {
-                const abstractNode = abstract;
-                if (index >= abstractNode.start && index <= abstractNode.end) {
-                    let newProperties = accumulativeProperties.get(abstractNode);
-                    if (!newProperties) {
-                        newProperties = { start: abstractNode.start, end: abstractNode.end };
-                        accumulativeProperties.set(abstractNode, newProperties);
-                        relativeAbstracts.push(abstractNode);
-                    }
-                    newProperties.end = newProperties.end - 1;
-                }
-            });
+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];
         }
-    });
-    const abstractHandles = relativeAbstracts.map(value => {
-        const newProperties = accumulativeProperties.get(value);
-        if (newProperties) {
-            const path = PlaitBoard.findPath(board, value);
-            return () => {
-                if (newProperties.start > newProperties.end) {
-                    Transforms.removeNode(board, path);
-                }
-                else {
-                    Transforms.setNode(board, newProperties, path);
-                }
+        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
             };
         }
-        return () => { };
-    });
-    const deletableHandles = deletableElements.map(node => {
-        const path = PlaitBoard.findPath(board, node);
-        return () => {
-            if (shouldChangeRightNodeCount(node)) {
-                changeRightNodeCount(board, path.slice(0, path.length - 1), -1);
-            }
-            Transforms.removeNode(board, path);
-        };
-    });
-    abstractHandles.forEach(action => action());
-    deletableHandles.forEach(action => action());
-};
-const divideElementByParent = (elements) => {
-    const abstractIncludedGroups = [];
-    const parentElements = [];
-    for (let i = 0; i < elements.length; i++) {
-        const parent = MindElement.getParent(elements[i]);
-        const parentIndex = parentElements.indexOf(parent);
-        if (parentIndex === -1) {
-            parentElements.push(parent);
-            abstractIncludedGroups.push([elements[i]]);
+        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 {
-            abstractIncludedGroups[parentIndex].push(elements[i]);
+            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
+            };
         }
     }
-    return { parentElements, abstractIncludedGroups };
 };
-
-const getStrokeByMindElement = (element) => {
-    let stroke = element.strokeColor;
-    if (stroke) {
-        return stroke;
-    }
-    const { root, branch } = findUpElement(element);
-    if (branch) {
-        const index = root.children.indexOf(branch);
-        const length = COLORS.length;
-        const remainder = index % length;
-        return COLORS[remainder];
+const getHitAbstractHandle = (board, element, point) => {
+    const nodeLayout = MindQueries.getCorrectLayoutByElement(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 {
-        return ROOT_NODE_STROKE;
+        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;
 };
-const getLinkLineColorByMindElement = (element) => {
-    let color = element.linkLineColor;
-    if (color) {
-        return color;
+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 { root, branch } = findUpElement(element);
-    if (branch) {
-        const index = root.children.indexOf(branch);
-        const length = COLORS.length;
-        const remainder = index % length;
-        return COLORS[remainder];
+    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;
     }
-    else {
-        throw new Error('root element should not have link line');
+    if (touchedAbstract) {
+        const component = PlaitElement.getComponent(touchedAbstract);
+        component.updateAbstractIncludedOutline();
+        touchedAbstract = undefined;
     }
-};
-const getRootLinkLineColorByMindElement = (root) => {
-    const index = root.children.length;
-    const length = COLORS.length;
-    const remainder = index % length;
-    return COLORS[remainder];
-};
+    if (abstract) {
+        touchedAbstract = abstract;
+        const component = PlaitElement.getComponent(touchedAbstract);
+        component.updateAbstractIncludedOutline(touchedHandle);
+    }
+    return touchedAbstract;
+}
 
-function drawIndentedLink(roughSVG, node, child, defaultStroke = null, needDrawUnderline = true) {
+function drawIndentedLink(board, node, child, defaultStroke = null, needDrawUnderline = true) {
     const isUnderlineShap = getNodeShapeByElement(child.origin) === MindNodeShape.underline;
     let beginX, beginY, endX, endY, beginNode = node, endNode = child;
     const beginRectangle = getRectangleByNode(beginNode);
@@ -1661,7 +1720,7 @@ function drawIndentedLink(roughSVG, node, child, defaultStroke = null, needDrawU
     //根据位置，设置正负参数
     let plusMinus = isChildUp(node, child) ? (node.left ? [-1, -1] : [1, -1]) : node.left ? [-1, 1] : [1, 1];
     const layout = MindQueries.getCorrectLayoutByElement(node.origin);
-    const strokeWidth = child.origin.linkLineWidth ? child.origin.linkLineWidth : STROKE_WIDTH;
+    const strokeWidth = child.origin.branchWidth ? child.origin.branchWidth : STROKE_WIDTH;
     if (beginNode.origin.isRoot) {
         if (layout === MindLayoutType.leftBottomIndented || layout === MindLayoutType.rightBottomIndented) {
             beginY += strokeWidth;
@@ -1682,9 +1741,9 @@ function drawIndentedLink(roughSVG, node, child, defaultStroke = null, needDrawU
         isUnderlineShap && needDrawUnderline ? [endX + (endNode.width - endNode.hGap * 2) * plusMinus[0], endY] : [endX, endY],
         isUnderlineShap && needDrawUnderline ? [endX + (endNode.width - endNode.hGap * 2) * plusMinus[0], endY] : [endX, endY]
     ];
-    const stroke = defaultStroke || getLinkLineColorByMindElement(child.origin);
+    const stroke = defaultStroke || getBranchColorByMindElement(board, child.origin);
     const points = pointsOnBezierCurves(curve);
-    return roughSVG.curve(points, { stroke, strokeWidth });
+    return PlaitBoard.getRoughSVG(board).curve(points, { stroke, strokeWidth });
 }
 
 var HorizontalPlacement;
@@ -1797,9 +1856,9 @@ const transformPlacement = (placement, direction) => {
     }
 };
 
-function drawLogicLink(roughSVG, node, parent, isHorizontal) {
-    const stroke = getLinkLineColorByMindElement(node.origin);
-    const strokeWidth = node.origin.linkLineWidth ? node.origin.linkLineWidth : STROKE_WIDTH;
+function drawLogicLink(board, node, parent, isHorizontal) {
+    const branchColor = getBranchColorByMindElement(board, node.origin);
+    const strokeWidth = node.origin.branchWidth ? node.origin.branchWidth : STROKE_WIDTH;
     const hasStraightLine = !parent.origin.isRoot;
     const hasUnderlineShape = node.origin.shape === MindNodeShape.underline;
     const hasUnderlineShapeOfParent = parent.origin.shape === MindNodeShape.underline;
@@ -1839,7 +1898,7 @@ function drawLogicLink(roughSVG, node, parent, isHorizontal) {
     const underlineEnd = movePoint(endPoint, nodeClient.width, linkDirection);
     const underline = hasUnderlineShape && isHorizontal ? [underlineEnd, underlineEnd, underlineEnd] : [];
     const points = pointsOnBezierCurves([...straightLine, ...curve, ...underline]);
-    return roughSVG.curve(points, { stroke, strokeWidth });
+    return PlaitBoard.getRoughSVG(board).curve(points, { stroke: branchColor, strokeWidth });
 }
 
 function getEmojisRectangle(element) {
@@ -1961,7 +2020,7 @@ function getRichtextRectangleByNode(node) {
 function drawRectangleNode(board, node) {
     const { x, y, width, height } = getRectangleByNode(node);
     const fill = node.origin.fill ? node.origin.fill : node.origin.isRoot ? ROOT_NODE_FILL : NODE_FILL;
-    const stroke = getStrokeByMindElement(node.origin);
+    const stroke = getStrokeByMindElement(board, node.origin);
     const strokeWidth = node.origin.strokeWidth ? node.origin.strokeWidth : STROKE_WIDTH;
     const nodeG = drawRoundRectangle(PlaitBoard.getRoughSVG(board), x, y, x + width, y + height, {
         stroke,
@@ -2020,6 +2079,7 @@ class EmojiDrawer {
         const componentType = this.board.drawEmoji(emoji, element);
         this.componentRef = this.viewContainerRef.createComponent(componentType);
         this.componentRef.instance.emojiItem = emoji;
+        this.componentRef.instance.board = this.board;
         const fontSize = PlaitMind.isMind(element) ? 18 : 14;
         this.componentRef.instance.fontSize = fontSize;
     }
@@ -2084,6 +2144,10 @@ class EmojisDrawer {
 
 const setLayout = (board, layout, path) => {
     correctLogicLayoutNode(board, layout, path);
+    const element = PlaitNode.get(board, path);
+    if (PlaitMind.isMind(element) && isStandardLayout(layout)) {
+        handleAbstractIncluded(board, element);
+    }
     Transforms.setNode(board, { layout }, path);
 };
 const correctLogicLayoutNode = (board, layout, path) => {
@@ -2250,6 +2314,14 @@ function hasAfterDraw(value) {
     return false;
 }
 
+function findNewChildNodePath(board, element) {
+    return PlaitBoard.findPath(board, element).concat((element.children || []).filter(child => !AbstractNode.isAbstract(child)).length);
+}
+function findNewSiblingNodePath(board, element) {
+    const path = PlaitBoard.findPath(board, element);
+    return Path$1.next(path);
+}
+
 class QuickInsertDrawer extends BaseDrawer {
     canDraw(element) {
         if (PlaitBoard.isReadonly(this.board) || element?.isCollapsed) {
@@ -2273,7 +2345,7 @@ class QuickInsertDrawer extends BaseDrawer {
          */
         const shape = getNodeShapeByElement(element);
         // 形状是矩形要偏移边框的线宽
-        const strokeWidth = element.linkLineWidth ? element.linkLineWidth : STROKE_WIDTH;
+        const strokeWidth = element.branchWidth ? element.branchWidth : STROKE_WIDTH;
         let offsetBorderLineWidth = 0;
         if (shape === MindNodeShape.roundRectangle && offset === 0) {
             offsetBorderLineWidth = strokeWidth;
@@ -2381,7 +2453,7 @@ class QuickInsertDrawer extends BaseDrawer {
             underlineCoordinates[MindLayoutType.right].startY -= height * 0.5;
             underlineCoordinates[MindLayoutType.right].endY -= height * 0.5;
         }
-        const stroke = element.isRoot ? getRootLinkLineColorByMindElement(element) : getLinkLineColorByMindElement(element);
+        const branchColor = PlaitMind.isMind(element) ? getNextBranchColor(element) : getBranchColorByMindElement(this.board, element);
         let nodeLayout = MindQueries.getCorrectLayoutByElement(element);
         if (element.isRoot && isStandardLayout(nodeLayout)) {
             const root = element;
@@ -2389,7 +2461,7 @@ class QuickInsertDrawer extends BaseDrawer {
         }
         const underlineCoordinate = underlineCoordinates[nodeLayout];
         if (underlineCoordinate) {
-            const underline = PlaitBoard.getRoughSVG(this.board).line(underlineCoordinate.startX, underlineCoordinate.startY, underlineCoordinate.endX, underlineCoordinate.endY, { stroke, strokeWidth });
+            const underline = PlaitBoard.getRoughSVG(this.board).line(underlineCoordinate.startX, underlineCoordinate.startY, underlineCoordinate.endX, underlineCoordinate.endY, { stroke: branchColor, strokeWidth });
             const circleCoordinates = {
                 startX: underlineCoordinate.endX,
                 startY: underlineCoordinate.endY
@@ -2440,7 +2512,7 @@ class QuickInsertDrawer extends BaseDrawer {
         fromEvent(this.g, 'mouseup')
             .pipe(take(1))
             .subscribe(() => {
-            const path = PlaitBoard.findPath(this.board, element).concat(element.children.filter(child => !AbstractNode.isAbstract(child)).length);
+            const path = findNewChildNodePath(this.board, element);
             insertMindElement(this.board, element, path);
         });
     }
@@ -2555,10 +2627,10 @@ class MindNodeComponent extends PlaitPluginElementComponent {
             this.linkG = drawAbstractLink(this.board, this.node, isHorizontalLayout(layout));
         }
         else if (MindElement.isIndentedLayout(this.parent.origin)) {
-            this.linkG = drawIndentedLink(this.roughSVG, this.parent, this.node);
+            this.linkG = drawIndentedLink(this.board, this.parent, this.node);
         }
         else {
-            this.linkG = drawLogicLink(this.roughSVG, this.node, this.parent, isHorizontalLayout(layout));
+            this.linkG = drawLogicLink(this.board, this.node, this.parent, isHorizontalLayout(layout));
         }
         this.g.append(this.linkG);
     }
@@ -2715,8 +2787,8 @@ class MindNodeComponent extends PlaitPluginElementComponent {
             Transforms.setNode(this.board, newElement, path);
         });
         const { x, y, width, height } = getRectangleByNode(this.node);
-        const stroke = getLinkLineColorByMindElement(this.element);
-        const strokeWidth = this.node.origin.linkLineWidth ? this.node.origin.linkLineWidth : STROKE_WIDTH;
+        const stroke = getBranchColorByMindElement(this.board, this.element);
+        const strokeWidth = this.node.origin.branchWidth ? this.node.origin.branchWidth : STROKE_WIDTH;
         const extendY = y + height / 2;
         const nodeLayout = MindQueries.getCorrectLayoutByElement(this.element);
         let extendLineXY = [
@@ -3217,7 +3289,7 @@ const withDnd = (board) => {
             });
             if (dropTarget?.target) {
                 dropTarget = readjustmentDropTarget(dropTarget);
-                drawPlaceholderDropNodeG(dropTarget, roughSVG, fakeDropNodeG);
+                drawPlaceholderDropNodeG(board, dropTarget, fakeDropNodeG);
             }
         }
         mousemove(event);
@@ -3376,7 +3448,7 @@ const setIsDragging = (board, state) => {
 
 const buildClipboardData = (board, selectedElements) => {
     let result = [];
-    const selectedMindNodes = selectedElements.map((value) => MindElement.getNode(value));
+    const selectedMindNodes = selectedElements.map(value => MindElement.getNode(value));
     const nodesRectangle = getRectangleByElements(board, selectedElements, true);
     selectedElements.forEach((node, index) => {
         const nodeRectangle = getRectangleByNode(selectedMindNodes[index]);
@@ -3415,12 +3487,18 @@ const insertClipboardData = (board, elements, targetPoint) => {
             if (item.isRoot) {
                 newElement = transformRootToNode(board, newElement);
             }
+            if (AbstractNode.isAbstract(item)) {
+                newElement = transformAbstractToNode(newElement);
+            }
             const selectedElementPath = PlaitBoard.findPath(board, selectedElements[0]);
             path = selectedElementPath.concat((selectedElements[0].children || []).length + index);
         }
         else {
             const point = [targetPoint[0] + item.points[0][0], targetPoint[1] + item.points[0][1]];
             newElement.points = [point];
+            if (AbstractNode.isAbstract(item)) {
+                newElement = transformAbstractToNode(newElement);
+            }
             if (!item.isRoot) {
                 newElement = transformNodeToRoot(board, newElement);
             }
@@ -3439,15 +3517,6 @@ const insertClipboardText = (board, parentElement, text, width, height) => {
     return;
 };
 
-function findNewChildNodePath(board, element) {
-    const path = PlaitBoard.findPath(board, element);
-    return path.concat((element.children || []).length);
-}
-function findNewSiblingNodePath(board, element) {
-    const path = PlaitBoard.findPath(board, element);
-    return Path$1.next(path);
-}
-
 const withEmoji = (board) => {
     const newBoard = board;
     newBoard.drawEmoji = (emoji, element) => {
@@ -3535,7 +3604,7 @@ const withAbstract = (board) => {
     };
     board.mouseup = (event) => {
         startPoint = undefined;
-        abstractHandlePosition = null;
+        abstractHandlePosition = undefined;
         if (activeAbstractElement) {
             if (newBoard?.abstractResize) {
                 newBoard.abstractResize(AbstractResizeState.end);
@@ -3618,6 +3687,7 @@ const withMind = (board) => {
                     if (shouldChangeRightNodeCount(selectedElement)) {
                         changeRightNodeCount(board, selectedElementPath.slice(0, 1), 1);
                     }
+                    insertSiblingElementHandleAbstract(board, selectedElement);
                     insertMindElement(board, selectedElement, findNewSiblingNodePath(board, selectedElement));
                 }
                 return;
@@ -3734,13 +3804,15 @@ class MindEmojiBaseComponent {
     }
 }
 MindEmojiBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindEmojiBaseComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-MindEmojiBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: MindEmojiBaseComponent, inputs: { fontSize: "fontSize", emojiItem: "emojiItem" }, ngImport: i0 });
+MindEmojiBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: MindEmojiBaseComponent, inputs: { fontSize: "fontSize", emojiItem: "emojiItem", board: "board" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindEmojiBaseComponent, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { fontSize: [{
                 type: Input
             }], emojiItem: [{
                 type: Input
+            }], board: [{
+                type: Input
             }] } });
 
 /*
@@ -3751,5 +3823,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, AbstractHandlePosition, AbstractResizeState, BASE, COLORS, ELEMENT_TO_NODE, EXTEND_OFFSET, EXTEND_RADIUS, GRAY_COLOR, LayoutDirection, LayoutDirectionsMap, MAX_RADIUS, MINDMAP_KEY, MindElement, MindEmojiBaseComponent, MindModule, MindNode, MindNodeComponent, MindNodeShape, MindQueries, MindTransforms, NODE_FILL, NODE_MIN_WIDTH, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, QUICK_INSERT_CIRCLE_COLOR, QUICK_INSERT_CIRCLE_OFFSET, QUICK_INSERT_INNER_CROSS_COLOR, ROOT_NODE_FILL, ROOT_NODE_STROKE, ROOT_TOPIC_FONT_SIZE, STROKE_WIDTH, TOPIC_COLOR, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, TRANSPARENT, canSetAbstract, changeRightNodeCount, copyNewNode, correctLayoutByDirection, createDefaultMindMapElement, createMindElement, deleteSelectedELements, directionCorrector, directionDetector, divideElementByParent, drawCurvePlaceholderDropNodeG, drawIndentNodeG, drawPlaceholderDropNodeG, drawStraightDropNodeG, extractNodesText, filterChildElement, findLastChild, findLocationLeftIndex, findParentElement, findUpElement, getAbstractHandleRectangle, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBranchDirectionsByLayouts, getChildrenCount, getDefaultLayout, getEmojiFontSize, getEmojisRectangle, getHitAbstractHandle, getHorizontalFakeY, getInCorrectLayoutDirection, getIndentedFakePoint, getLayoutDirection$1 as getLayoutDirection, getLayoutReverseDirection, getLinkLineColorByMindElement, getLocationScope, getNodeShapeByElement, getRectangleByNode, getRectangleByResizingLocation, getRootLayout, getRootLinkLineColorByMindElement, getStrokeByMindElement, handleTouchedAbstract, hitMindElement, insertMindElement, insetAbstractNode, isChildElement, isChildRight, isChildUp, isCorrectLayout, isMixedLayout, isSetAbstract, isVirtualKey, readjustmentDropTarget, separateChildren, setAbstract, setAbstractByElements, shouldChangeRightNodeCount, transformNodeToRoot, transformRootToNode, withEmoji, withMind };
+export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, AbstractHandlePosition, AbstractResizeState, BASE, COLORS, ELEMENT_TO_NODE, EXTEND_OFFSET, EXTEND_RADIUS, GRAY_COLOR, LayoutDirection, LayoutDirectionsMap, MAX_RADIUS, MINDMAP_KEY, MindElement, MindEmojiBaseComponent, MindModule, MindNode, MindNodeComponent, MindNodeShape, MindQueries, MindTransforms, NODE_FILL, NODE_MIN_WIDTH, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, QUICK_INSERT_CIRCLE_COLOR, QUICK_INSERT_CIRCLE_OFFSET, QUICK_INSERT_INNER_CROSS_COLOR, ROOT_NODE_FILL, ROOT_NODE_STROKE, ROOT_TOPIC_FONT_SIZE, STROKE_WIDTH, TOPIC_COLOR, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, TRANSPARENT, canSetAbstract, changeRightNodeCount, copyNewNode, correctLayoutByDirection, createDefaultMindMapElement, createMindElement, deleteSelectedELements, directionCorrector, directionDetector, divideElementByParent, drawCurvePlaceholderDropNodeG, drawIndentNodeG, drawPlaceholderDropNodeG, drawStraightDropNodeG, extractNodesText, filterChildElement, findLastChild, findLocationLeftIndex, findParentElement, findUpElement, getAbstractHandleRectangle, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getChildrenCount, getCorrespondingAbstract, getDefaultLayout, getEmojiFontSize, getEmojisRectangle, getHitAbstractHandle, getHorizontalFakeY, getInCorrectLayoutDirection, getIndentedFakePoint, getLayoutDirection$1 as getLayoutDirection, getLayoutReverseDirection, getLocationScope, getNextBranchColor, getNodeShapeByElement, getRectangleByNode, getRectangleByResizingLocation, getRootLayout, getStrokeByMindElement, handleAbstractIncluded, handleTouchedAbstract, hitMindElement, insertAbstractNode, insertMindElement, insertSiblingElementHandleAbstract, isChildElement, isChildRight, isChildUp, isCorrectLayout, isMixedLayout, isSetAbstract, isVirtualKey, moveAbstractPosition, readjustmentDropTarget, separateChildren, setAbstract, setAbstractByElements, shouldChangeRightNodeCount, transformAbstractToNode, transformNodeToRoot, transformRootToNode, withEmoji, withMind };
 //# sourceMappingURL=plait-mind.mjs.map