@plait/mind 0.2.0-next.0

package/fesm2020/plait-mind.mjs

@@ -0,0 +1,3595 @@
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, NgModule, Directive, Input } from '@angular/core';
+import * as i2 from '@plait/core';
+import { distanceBetweenPointAndRectangle, drawRoundRectangle, getRectangleByElements, RectangleClient, PlaitBoard, PlaitNode, NODE_TO_PARENT, ELEMENT_TO_COMPONENT, idCreator, Transforms, isNullOrUndefined, addSelectedElement, createG, drawAbstractRoundRectangle, PlaitPluginElementComponent, PlaitPointerType, NODE_TO_INDEX, PlaitElement, createText, IS_TEXT_EDITABLE, MERGING, transformPoint, toPoint, depthFirstRecursion, PlaitModule, getSelectedElements, distanceBetweenPointAndPoint, Path, CLIP_BOARD_FORMAT_KEY, BOARD_TO_HOST, removeSelectedElement, PlaitHistoryBoard, hotkeys } from '@plait/core';
+import { isIndentedLayout, MindmapLayoutType, isStandardLayout, isTopLayout, isLeftLayout, isHorizontalLogicLayout, isVerticalLogicLayout, isBottomLayout, isRightLayout, isHorizontalLayout, AbstractNode, getCorrectStartEnd, isChildOfAbstract, getAbstractLayout, 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 { Subject, fromEvent, timer } from 'rxjs';
+import { takeUntil, filter, take, debounceTime } from 'rxjs/operators';
+import { Node, Editor, Operation, Path as Path$1 } from 'slate';
+import { pointsOnBezierCurves } from 'points-on-curve';
+import { isKeyHotkey } from 'is-hotkey';
+import * as i1 from '@angular/common';
+import { BrowserModule } from '@angular/platform-browser';
+
+const MINDMAP_ELEMENT_TO_COMPONENT = new WeakMap();
+const ELEMENT_TO_NODE = new WeakMap();
+
+const BASE = 4;
+const PRIMARY_COLOR = '#6698FF';
+const MINDMAP_KEY = 'plait-mindmap';
+const MAX_RADIUS = BASE * 4;
+const TRANSPARENT = 'transparent';
+const GRAY_COLOR = '#AAAAAA';
+const STROKE_WIDTH = 3;
+const EXTEND_OFFSET = 8;
+const EXTEND_RADIUS = 16;
+const QUICK_INSERT_CIRCLE_OFFSET = 9;
+const QUICK_INSERT_CIRCLE_COLOR = '#6698FF';
+const QUICK_INSERT_INNER_CROSS_COLOR = 'white';
+
+const TOPIC_COLOR = '#333';
+const TOPIC_FONT_SIZE = 14;
+const NODE_FILL = '#FFFFFF';
+const ROOT_NODE_FILL = '#F5F5F5';
+const ROOT_NODE_STROKE = '#F5F5F5';
+const ROOT_TOPIC_FONT_SIZE = 18;
+const NODE_MIN_WIDTH = 18;
+const COLORS = ['#A287E1', '#6F81DB', '#6EC4C4', '#DFB85D', '#B1C774', '#77C386', '#C28976', '#E48484', '#E482D4', '#69B1E4'];
+var MindmapNodeShape;
+(function (MindmapNodeShape) {
+    MindmapNodeShape["roundRectangle"] = "round-rectangle";
+    MindmapNodeShape["underline"] = "underline";
+})(MindmapNodeShape || (MindmapNodeShape = {}));
+const ABSTRACT_HANDLE_COLOR = '#6698FF80'; //PRIMARY_COLOR 50% 透明度
+const ABSTRACT_INCLUDED_OUTLINE_OFFSET = 3.5;
+const ABSTRACT_HANDLE_LENGTH = 12;
+const TOPIC_DEFAULT_MAX_WORD_COUNT = 34;
+const ABSTRACT_HANDLE_MASK_WIDTH = 8;
+
+function getRectangleByNode(node) {
+    const x = node.x + node.hGap;
+    let y = node.y + node.vGap;
+    const width = node.width - node.hGap * 2;
+    const height = node.height - node.vGap * 2;
+    return {
+        x,
+        y,
+        width,
+        height
+    };
+}
+function hitMindmapElement(board, point, element) {
+    const node = ELEMENT_TO_NODE.get(element);
+    if (node && distanceBetweenPointAndRectangle(point[0], point[1], getRectangleByNode(node)) === 0) {
+        return true;
+    }
+    else {
+        return false;
+    }
+}
+
+const 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 MindmapNodeShape.roundRectangle;
+};
+
+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 = MindmapQueries.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(MindmapQueries.getLayoutByElement(node.parent?.origin)) &&
+            getNodeShapeByElement(node.origin) === MindmapNodeShape.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 || getLinkLineColorByMindmapElement(child.origin);
+    const strokeWidth = child.origin.linkLineWidth ? child.origin.linkLineWidth : STROKE_WIDTH;
+    if (endNode.origin.isRoot) {
+        if (layout === MindmapLayoutType.left || isStandardLayout(layout)) {
+            endX -= strokeWidth;
+        }
+        if (layout === MindmapLayoutType.upward) {
+            endY -= strokeWidth;
+        }
+    }
+    if (beginNode.origin.isRoot) {
+        if (layout === MindmapLayoutType.right || isStandardLayout(layout)) {
+            beginX += strokeWidth;
+        }
+        if (layout === MindmapLayoutType.downward) {
+            beginY += strokeWidth;
+        }
+    }
+    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 === MindmapNodeShape.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 });
+    }
+    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 drawPlaceholderDropNodeG = (dropTarget, roughSVG, fakeDropNodeG) => {
+    const targetComponent = MINDMAP_ELEMENT_TO_COMPONENT.get(dropTarget.target);
+    const targetRect = getRectangleByNode(targetComponent.node);
+    if (dropTarget.detectResult && ['right', 'left'].includes(dropTarget.detectResult)) {
+        drawStraightDropNodeG(targetRect, dropTarget.detectResult, targetComponent, roughSVG, fakeDropNodeG);
+    }
+    if (targetComponent.parent && dropTarget.detectResult && ['top', 'bottom'].includes(dropTarget.detectResult)) {
+        const parentComponent = MINDMAP_ELEMENT_TO_COMPONENT.get(targetComponent.parent.origin);
+        const targetIndex = parentComponent.node.origin.children.indexOf(targetComponent.node.origin);
+        drawCurvePlaceholderDropNodeG(targetRect, dropTarget.detectResult, targetIndex, targetComponent, roughSVG, parentComponent, fakeDropNodeG);
+    }
+};
+const drawCurvePlaceholderDropNodeG = (targetRect, detectResult, targetIndex, targetComponent, roughSVG, parentComponent, fakeDropNodeG) => {
+    const parentNodeLayout = MindmapQueries.getCorrectLayoutByElement(parentComponent.node.origin);
+    const layout = MindmapQueries.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;
+    }
+    if (isHorizontalLogicLayout(parentNodeLayout)) {
+        fakeY = getHorizontalFakeY(detectResult, targetIndex, parentComponent.node, targetRect, layout, fakeY);
+        if (isStandardLayout(parentNodeLayout)) {
+            const rightNodeCount = parentComponent.node.origin.rightNodeCount || 0;
+            const idx = parentComponent.node.children.findIndex(x => x === targetComponent.node);
+            const isLeft = idx >= rightNodeCount;
+            // 标准布局的左，需要调整 x
+            if (isLeft) {
+                fakeX = targetComponent.node.x + targetComponent.node.width - 30;
+                fakeRectangleStartX = targetRect.x + targetRect.width - 30;
+                fakeRectangleEndX = targetRect.x + targetRect.width;
+            }
+            const isLeftFirst = idx === rightNodeCount;
+            const isRightLast = idx === rightNodeCount - 1;
+            // 拖拽至左第一个节点的情况
+            if (detectResult === 'top' && isLeftFirst) {
+                fakeY = targetRect.y - targetRect.height;
+            }
+            if (detectResult === 'bottom' && isRightLast) {
+                fakeY = targetRect.y + targetRect.height + 30;
+            }
+        }
+        fakeRectangleStartY = fakeY;
+        fakeRectangleEndY = fakeRectangleStartY + 12;
+    }
+    if (isVerticalLogicLayout(layout)) {
+        parentComponent = targetComponent;
+        targetComponent = MINDMAP_ELEMENT_TO_COMPONENT.get(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;
+    }
+    if (isIndentedLayout(layout)) {
+        // 偏移一个 Gap
+        if (isLeftLayout(layout)) {
+            fakeX -= BASE * 4;
+        }
+        if (isRightLayout(layout)) {
+            fakeX += BASE * 4;
+        }
+        if (isTopLayout(layout)) {
+            if (detectResult === 'top') {
+                const isLastNode = targetIndex === parentComponent.node.origin.children.length - 1;
+                if (isLastNode) {
+                    fakeY = targetRect.y - targetRect.height - BASE;
+                }
+                else {
+                    const nextComponent = MINDMAP_ELEMENT_TO_COMPONENT.get(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 = MINDMAP_ELEMENT_TO_COMPONENT.get(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(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'
+    });
+    fakeDropNodeG?.appendChild(linkSVGG);
+    fakeDropNodeG?.appendChild(fakeRectangleG);
+};
+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,
+        width,
+        height,
+        strokeWidth
+    };
+    const parentLayout = MindmapQueries.getCorrectLayoutByElement(targetComponent.node.origin.isRoot ? targetComponent.node.origin : targetComponent.node.parent.origin);
+    const layout = MindmapQueries.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 = MINDMAP_ELEMENT_TO_COMPONENT.get(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 = MINDMAP_ELEMENT_TO_COMPONENT.get(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 = MINDMAP_ELEMENT_TO_COMPONENT.get(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(roughSVG, parentComponent.node, fakeNode, PRIMARY_COLOR, false, false);
+                fakeDropNodeG?.appendChild(linkSVGG);
+            }
+        }
+        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;
+            }
+        }
+    }
+};
+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 = MINDMAP_ELEMENT_TO_COMPONENT.get(parentNode.origin.children[targetIndex - 1]);
+            const previousRect = getRectangleByNode(previousComponent.node);
+            const topY = previousRect.y + previousRect.height;
+            fakeY = topY + (targetRect.y - topY) / 5;
+        }
+    }
+    if (detectResult === 'bottom') {
+        fakeY = targetRect.y + targetRect.height + 30;
+        if (targetIndex < parentNode.origin.children.length - 1) {
+            const nextComponent = MINDMAP_ELEMENT_TO_COMPONENT.get(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;
+        }
+    }
+    return fakeY;
+};
+const getIndentedFakePoint = (layout, pointOptions) => {
+    let { fakeX, fakeY, x, y, width, height, strokeWidth } = pointOptions;
+    const hGap = BASE * 4;
+    const vGap = BASE * 6;
+    const offsetX = hGap + width / 2 + strokeWidth;
+    const offsetY = vGap + height / 2 + strokeWidth;
+    if (isLeftLayout(layout)) {
+        fakeX = x - offsetX;
+    }
+    if (isRightLayout(layout)) {
+        fakeX = x + offsetX;
+    }
+    if (isTopLayout(layout)) {
+        fakeY = y - offsetY;
+    }
+    if (isBottomLayout(layout)) {
+        fakeY = y + height + offsetY;
+    }
+    return { fakeX, fakeY };
+};
+const drawIndentNodeG = (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');
+        }
+        // 重合区域，返回两个方向
+        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;
+    }
+    // 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;
+    }
+    return null;
+};
+
+const directionCorrector = (node, detectResults) => {
+    if (!node.origin.isRoot) {
+        const parentlayout = MindmapQueries.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 === MindmapLayoutType.upward) {
+            return getAllowedDirection(detectResults, ['bottom']);
+        }
+        if (parentlayout === MindmapLayoutType.downward) {
+            return getAllowedDirection(detectResults, ['top']);
+        }
+    }
+    else {
+        const layout = MindmapQueries.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 === MindmapLayoutType.left) {
+            return getAllowedDirection(detectResults, ['right', 'top', 'bottom']);
+        }
+        if (layout === MindmapLayoutType.right) {
+            return getAllowedDirection(detectResults, ['left', 'top', 'bottom']);
+        }
+    }
+    return null;
+};
+const getAllowedDirection = (detectResults, illegalDirections) => {
+    const directions = detectResults;
+    illegalDirections.forEach(item => {
+        const bottomDirectionIndex = directions.findIndex(direction => direction === item);
+        if (bottomDirectionIndex !== -1) {
+            directions.splice(bottomDirectionIndex, 1);
+        }
+    });
+    return directions.length ? directions : null;
+};
+
+/* 根据布局调整 target 以及 direction */
+const readjustmentDropTarget = (dropTarget) => {
+    const { target, detectResult } = dropTarget;
+    const newDropTarget = { target, detectResult };
+    const targetComponent = MINDMAP_ELEMENT_TO_COMPONENT.get(target);
+    if (targetComponent.node.children.length > 0 && dropTarget.detectResult) {
+        const layout = MindmapQueries.getCorrectLayoutByElement(targetComponent.node.origin);
+        const parentLayout = MindmapQueries.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 = MindmapQueries.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 ([MindmapLayoutType.left, MindmapLayoutType.right].includes(parentLayout)) {
+                    const layout = MindmapQueries.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 = MindmapQueries.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 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 getRectangleByResizingLocation = (abstractRectangle, location, handlePosition, isHorizontal) => {
+    if (isHorizontal) {
+        if (handlePosition === AbstractHandlePosition.start) {
+            return {
+                ...abstractRectangle,
+                y: location,
+                height: abstractRectangle.height + abstractRectangle.y - location
+            };
+        }
+        else {
+            return {
+                ...abstractRectangle,
+                height: location - abstractRectangle.y
+            };
+        }
+    }
+    else {
+        if (handlePosition === AbstractHandlePosition.start) {
+            return {
+                ...abstractRectangle,
+                x: location,
+                width: abstractRectangle.width + abstractRectangle.x - location
+            };
+        }
+        else {
+            return {
+                ...abstractRectangle,
+                width: location - abstractRectangle.x
+            };
+        }
+    }
+};
+const getLocationScope = (board, handlePosition, parentChildren, element, parent, isHorizontal) => {
+    const node = MindElement.getNode(element);
+    const { start, end } = getCorrectStartEnd(node.origin, parent);
+    const startNode = parentChildren[start];
+    const endNode = parentChildren[end];
+    if (handlePosition === AbstractHandlePosition.start) {
+        const abstractNode = parentChildren.filter(child => AbstractNode.isAbstract(child) && child.end < element.start);
+        let minNode;
+        if (abstractNode.length) {
+            const index = abstractNode
+                .map(node => {
+                const { end } = getCorrectStartEnd(node, parent);
+                return end;
+            })
+                .sort((a, b) => b - a)[0];
+            minNode = parentChildren[index + 1];
+        }
+        else {
+            minNode = parentChildren[0];
+        }
+        const minNodeRectangle = getRectangleByElements(board, [minNode], true);
+        const endNodeRectangle = getRectangleByElements(board, [endNode], false);
+        if (isHorizontal) {
+            return {
+                max: endNodeRectangle.y - ABSTRACT_INCLUDED_OUTLINE_OFFSET,
+                min: minNodeRectangle.y - ABSTRACT_INCLUDED_OUTLINE_OFFSET
+            };
+        }
+        else {
+            return {
+                max: endNodeRectangle.x - ABSTRACT_INCLUDED_OUTLINE_OFFSET,
+                min: minNodeRectangle.x - ABSTRACT_INCLUDED_OUTLINE_OFFSET
+            };
+        }
+    }
+    else {
+        const abstractNode = parentChildren.filter(child => AbstractNode.isAbstract(child) && child.start > element.end);
+        let maxNode;
+        if (abstractNode.length) {
+            const index = abstractNode
+                .map(node => {
+                const { start } = getCorrectStartEnd(node, parent);
+                return start;
+            })
+                .sort((a, b) => a - b)[0];
+            maxNode = parentChildren[index - 1];
+        }
+        else {
+            const children = parentChildren.filter(child => !AbstractNode.isAbstract(child));
+            maxNode = parentChildren[children.length - 1];
+        }
+        const maxNodeRectangle = getRectangleByElements(board, [maxNode], true);
+        const startNodeRectangle = getRectangleByElements(board, [startNode], false);
+        if (isHorizontal) {
+            return {
+                max: maxNodeRectangle.y + maxNodeRectangle.height + ABSTRACT_INCLUDED_OUTLINE_OFFSET,
+                min: startNodeRectangle.y + startNodeRectangle.height + ABSTRACT_INCLUDED_OUTLINE_OFFSET
+            };
+        }
+        else {
+            return {
+                max: maxNodeRectangle.x + maxNodeRectangle.width + ABSTRACT_INCLUDED_OUTLINE_OFFSET,
+                min: startNodeRectangle.x + startNodeRectangle.width + ABSTRACT_INCLUDED_OUTLINE_OFFSET
+            };
+        }
+    }
+};
+const getHitAbstractHandle = (board, element, point) => {
+    const nodeLayout = MindmapQueries.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.isIntersect(pointRec, startHandleRec))
+        return AbstractHandlePosition.start;
+    if (RectangleClient.isIntersect(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);
+    }
+    return result;
+};
+function findLocationLeftIndex(board, parentChildren, location, isHorizontal) {
+    const children = parentChildren.filter(child => {
+        return !AbstractNode.isAbstract(child);
+    });
+    const recArray = children.map(child => {
+        return getRectangleByElements(board, [child], false);
+    });
+    const firstRec = getRectangleByElements(board, [children[0]], true);
+    const fakeLeftRec = {
+        x: firstRec.x - firstRec.width,
+        y: firstRec.y - firstRec.height,
+        width: firstRec.width,
+        height: firstRec.height
+    };
+    const lastRec = getRectangleByElements(board, [children[children.length - 1]], true);
+    const fakeRightRec = {
+        x: lastRec.x + lastRec.width,
+        y: lastRec.y + lastRec.height,
+        width: lastRec.width,
+        height: lastRec.height
+    };
+    recArray.push(fakeRightRec);
+    recArray.unshift(fakeLeftRec);
+    for (let i = 0; i < recArray.length - 1; i++) {
+        const recXOrY = isHorizontal ? recArray[i].y : recArray[i].x;
+        const recWidthOrHeight = isHorizontal ? recArray[i].height : recArray[i].width;
+        if (location >= recXOrY + recWidthOrHeight / 2 &&
+            location <= recArray[i + 1][isHorizontal ? 'y' : 'x'] + recArray[i + 1][isHorizontal ? 'height' : 'width'] / 2) {
+            return i - 1;
+        }
+    }
+    return 0;
+}
+
+/**
+ * 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 || getDefaultMindmapLayout();
+    let correctRootLayout = rootLayout;
+    if (element.isRoot) {
+        return correctRootLayout;
+    }
+    const component = MINDMAP_ELEMENT_TO_COMPONENT.get(element);
+    let layout = component?.node.origin.layout;
+    let parentComponent;
+    let parent = component?.parent?.origin;
+    while (!layout && parent) {
+        parentComponent = MINDMAP_ELEMENT_TO_COMPONENT.get(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 === MindmapLayoutType.standard) {
+        correctRootLayout = component?.node.left ? MindmapLayoutType.left : MindmapLayoutType.right;
+    }
+    if (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 getBranchMindmapLayouts = (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 MindmapLayoutType[]
+ */
+const getAvailableSubLayoutsByElement = (element) => {
+    const parentElement = findParentElement(element);
+    if (parentElement) {
+        const branchLayouts = getBranchMindmapLayouts(parentElement);
+        if (branchLayouts[0] === MindmapLayoutType.standard) {
+            const component = MINDMAP_ELEMENT_TO_COMPONENT.get(element);
+            if (component) {
+                branchLayouts[0] = component.node.left ? MindmapLayoutType.left : MindmapLayoutType.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 MindmapLayoutType
+ */
+const getLayoutParentByElement = (element) => {
+    let parent = findParentElement(element);
+    while (parent) {
+        if (parent.layout) {
+            return parent.layout;
+        }
+        parent = findParentElement(parent);
+    }
+    return getDefaultMindmapLayout();
+};
+
+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 MindmapQueries = {
+    getAvailableSubLayoutsByElement,
+    getLayoutParentByElement,
+    getBranchMindmapLayouts,
+    getLayoutByElement,
+    getCorrectLayoutByElement
+};
+
+const PlaitMind = {
+    isMind: (value) => {
+        return value.type === 'mindmap';
+    }
+};
+const MindElement = {
+    hasLayout(value, layout) {
+        const _layout = MindmapQueries.getLayoutByElement(value);
+        return _layout === layout;
+    },
+    isIndentedLayout(value) {
+        const _layout = MindmapQueries.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));
+    },
+    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 MindmapNode = {
+    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 = {
+    [MindmapLayoutType.right]: [LayoutDirection.right],
+    [MindmapLayoutType.left]: [LayoutDirection.left],
+    [MindmapLayoutType.upward]: [LayoutDirection.top],
+    [MindmapLayoutType.downward]: [LayoutDirection.bottom],
+    [MindmapLayoutType.rightBottomIndented]: [LayoutDirection.right, LayoutDirection.bottom],
+    [MindmapLayoutType.rightTopIndented]: [LayoutDirection.right, LayoutDirection.top],
+    [MindmapLayoutType.leftBottomIndented]: [LayoutDirection.left, LayoutDirection.bottom],
+    [MindmapLayoutType.leftTopIndented]: [LayoutDirection.left, LayoutDirection.top]
+};
+
+var AbstractHandlePosition;
+(function (AbstractHandlePosition) {
+    AbstractHandlePosition["start"] = "start";
+    AbstractHandlePosition["end"] = "end";
+})(AbstractHandlePosition || (AbstractHandlePosition = {}));
+
+const getBranchDirectionsByLayouts = (branchLayouts) => {
+    const branchDirections = [];
+    branchLayouts.forEach(l => {
+        const directions = LayoutDirectionsMap[l];
+        directions.forEach(d => {
+            if (!branchDirections.includes(d) && !branchDirections.includes(getLayoutReverseDirection(d))) {
+                branchDirections.push(d);
+            }
+        });
+    });
+    return branchDirections;
+};
+const isCorrectLayout = (root, layout) => {
+    const rootLayout = root.layout || getDefaultMindmapLayout();
+    return !getInCorrectLayoutDirection(rootLayout, layout);
+};
+const isMixedLayout = (parentLayout, layout) => {
+    return (!isIndentedLayout(parentLayout) && isIndentedLayout(layout)) || (isIndentedLayout(parentLayout) && !isIndentedLayout(layout));
+};
+const getInCorrectLayoutDirection = (rootLayout, layout) => {
+    const mindmapDirections = LayoutDirectionsMap[rootLayout];
+    const subLayoutDirections = LayoutDirectionsMap[layout];
+    if (!subLayoutDirections) {
+        throw new Error(`unexpection layout: ${layout} on correct layout`);
+    }
+    return subLayoutDirections.find(d => mindmapDirections.includes(getLayoutReverseDirection(d)));
+};
+const correctLayoutByDirection = (layout, direction) => {
+    const isHorizontal = direction === LayoutDirection.left || direction === LayoutDirection.right ? true : false;
+    let inverseDirectionLayout = MindmapLayoutType.standard;
+    switch (layout) {
+        case MindmapLayoutType.left:
+            inverseDirectionLayout = MindmapLayoutType.right;
+            break;
+        case MindmapLayoutType.right:
+            inverseDirectionLayout = MindmapLayoutType.left;
+            break;
+        case MindmapLayoutType.downward:
+            inverseDirectionLayout = MindmapLayoutType.upward;
+            break;
+        case MindmapLayoutType.upward:
+            inverseDirectionLayout = MindmapLayoutType.downward;
+            break;
+        case MindmapLayoutType.rightBottomIndented:
+            inverseDirectionLayout = isHorizontal ? MindmapLayoutType.leftBottomIndented : MindmapLayoutType.rightTopIndented;
+            break;
+        case MindmapLayoutType.leftBottomIndented:
+            inverseDirectionLayout = isHorizontal ? MindmapLayoutType.rightBottomIndented : MindmapLayoutType.leftTopIndented;
+            break;
+        case MindmapLayoutType.rightTopIndented:
+            inverseDirectionLayout = isHorizontal ? MindmapLayoutType.leftTopIndented : MindmapLayoutType.rightBottomIndented;
+            break;
+        case MindmapLayoutType.leftTopIndented:
+            inverseDirectionLayout = isHorizontal ? MindmapLayoutType.rightTopIndented : MindmapLayoutType.leftBottomIndented;
+            break;
+    }
+    return inverseDirectionLayout;
+};
+const getMindmapDirection = (root) => {
+    const layout = root.layout || getDefaultMindmapLayout();
+    return LayoutDirectionsMap[layout];
+};
+const getDefaultMindmapLayout = () => {
+    return MindmapLayoutType.standard;
+};
+const getAvailableSubLayoutsByLayoutDirections = (directions) => {
+    const result = [];
+    const reverseDirections = directions.map(getLayoutReverseDirection);
+    for (const key in MindmapLayoutType) {
+        const layout = MindmapLayoutType[key];
+        const layoutDirections = LayoutDirectionsMap[layout];
+        if (layoutDirections) {
+            const hasSameDirection = layoutDirections.some(d => directions.includes(d));
+            const hasReverseDirection = layoutDirections.some(r => reverseDirections.includes(r));
+            if (hasSameDirection && !hasReverseDirection) {
+                result.push(layout);
+            }
+        }
+    }
+    return result;
+};
+const getLayoutReverseDirection = (layoutDirection) => {
+    let reverseDirection = LayoutDirection.right;
+    switch (layoutDirection) {
+        case LayoutDirection.top:
+            reverseDirection = LayoutDirection.bottom;
+            break;
+        case LayoutDirection.bottom:
+            reverseDirection = LayoutDirection.top;
+            break;
+        case LayoutDirection.right:
+            reverseDirection = LayoutDirection.left;
+            break;
+        case LayoutDirection.left:
+            reverseDirection = LayoutDirection.right;
+            break;
+    }
+    return reverseDirection;
+};
+const getRootLayout = (root) => {
+    return root.layout || getDefaultMindmapLayout();
+};
+
+function enterNodeEditing(element) {
+    const component = ELEMENT_TO_COMPONENT.get(element);
+    component.startEditText(false, false);
+}
+
+function findParentElement(element) {
+    const component = MINDMAP_ELEMENT_TO_COMPONENT.get(element);
+    if (component && component.parent) {
+        return component.parent.origin;
+    }
+    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 isChildElement = (origin, child) => {
+    let parent = findParentElement(child);
+    while (parent) {
+        if (parent === origin) {
+            return true;
+        }
+        parent = findParentElement(parent);
+    }
+    return false;
+};
+const filterChildElement = (elements) => {
+    let result = [];
+    elements.forEach(element => {
+        const isChild = elements.some(node => {
+            return isChildElement(node, element);
+        });
+        if (!isChild) {
+            result.push(element);
+        }
+    });
+    return result;
+};
+const isChildRight = (node, child) => {
+    return node.x < child.x;
+};
+const isChildUp = (node, child) => {
+    return node.y > child.y;
+};
+const copyNewNode = (node) => {
+    const newNode = { ...node };
+    newNode.id = idCreator();
+    newNode.children = [];
+    for (const childNode of node.children) {
+        newNode.children.push(copyNewNode(childNode));
+    }
+    return newNode;
+};
+const transformRootToNode = (board, node) => {
+    const 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 === MindmapLayoutType.standard) {
+        delete newNode.layout;
+    }
+    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 ?? MindmapLayoutType.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);
+        }
+    }
+    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);
+    const MindNodeComponent = MINDMAP_ELEMENT_TO_COMPONENT.get(selectedElement);
+    if (parentElement && MindNodeComponent) {
+        const nodeIndex = MindNodeComponent.parent.children.findIndex(item => item.origin.id === selectedElement.id);
+        if (parentElement.isRoot &&
+            getRootLayout(parentElement) === MindmapLayoutType.standard &&
+            parentElement.rightNodeCount &&
+            nodeIndex <= parentElement.rightNodeCount - 1) {
+            return true;
+        }
+    }
+    return false;
+};
+const createMindmapData = (rightNodeCount, layout) => {
+    const mindmapData = {
+        type: 'mindmap',
+        id: idCreator(),
+        isRoot: true,
+        rightNodeCount,
+        layout,
+        width: 72,
+        height: ROOT_DEFAULT_HEIGHT,
+        points: [[230, 208]],
+        value: { children: [{ text: '思维导图' }] },
+        shape: MindmapNodeShape.roundRectangle,
+        children: [
+            {
+                id: idCreator(),
+                value: { children: [{ text: '新建节点' }] },
+                children: [],
+                width: 56,
+                height: TEXT_DEFAULT_HEIGHT,
+                shape: MindmapNodeShape.roundRectangle
+            },
+            {
+                id: idCreator(),
+                value: { children: [{ text: '新建节点' }] },
+                children: [],
+                width: 56,
+                height: TEXT_DEFAULT_HEIGHT,
+                shape: MindmapNodeShape.roundRectangle
+            },
+            {
+                id: idCreator(),
+                value: { children: [{ text: '新建节点' }] },
+                children: [],
+                width: 56,
+                height: TEXT_DEFAULT_HEIGHT,
+                shape: MindmapNodeShape.roundRectangle
+            }
+        ]
+    };
+    return [mindmapData];
+};
+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;
+    }
+    return newElement;
+};
+// layoutLevel 用来表示插入兄弟节点还是子节点
+const insertMindElement = (board, inheritNode, path) => {
+    let fill, strokeColor, strokeWidth, shape = MindmapNodeShape.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);
+    }
+    Transforms.insertNode(board, newElement, path);
+    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 => {
+        const MindNodeComponent = MINDMAP_ELEMENT_TO_COMPONENT.get(node);
+        if (MindNodeComponent && MindNodeComponent.parent) {
+            const index = MindNodeComponent.parent.origin.children.indexOf(node);
+            const abstracts = MindNodeComponent.parent.children.filter(value => AbstractNode.isAbstract(value.origin));
+            abstracts.forEach(abstract => {
+                const abstractNode = abstract.origin;
+                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 abstractHandles = relativeAbstracts.map(value => {
+        const newProperties = accumulativeProperties.get(value);
+        if (newProperties) {
+            const path = PlaitBoard.findPath(board, value);
+            return () => {
+                if (newProperties.start > newProperties.end) {
+                    Transforms.removeNode(board, path);
+                }
+                else {
+                    Transforms.setNode(board, newProperties, path);
+                }
+            };
+        }
+        return () => { };
+    });
+    const deletableHandles = deletableElements.map(node => {
+        const path = PlaitBoard.findPath(board, node);
+        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 getStrokeByMindmapElement = (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];
+    }
+    else {
+        return ROOT_NODE_STROKE;
+    }
+};
+const getLinkLineColorByMindmapElement = (element) => {
+    let color = element.linkLineColor;
+    if (color) {
+        return color;
+    }
+    const { root, branch } = findUpElement(element);
+    if (branch) {
+        const index = root.children.indexOf(branch);
+        const length = COLORS.length;
+        const remainder = index % length;
+        return COLORS[remainder];
+    }
+    else {
+        throw new Error('root element should not have link line');
+    }
+};
+const getRootLinkLineColorByMindmapElement = (root) => {
+    const index = root.children.length;
+    const length = COLORS.length;
+    const remainder = index % length;
+    return COLORS[remainder];
+};
+
+function drawIndentedLink(roughSVG, node, child, defaultStroke = null, needDrawUnderline = true) {
+    const isUnderlineShap = getNodeShapeByElement(child.origin) === MindmapNodeShape.underline;
+    let beginX, beginY, endX, endY, beginNode = node, endNode = child;
+    const beginRectangle = getRectangleByNode(beginNode);
+    const endRectangle = getRectangleByNode(endNode);
+    beginX = beginNode.x + beginNode.width / 2;
+    beginY = isChildUp(node, child) ? beginRectangle.y : beginRectangle.y + beginRectangle.height;
+    endX = node.left ? endNode.x + endNode.hGap + endRectangle.width : endNode.x + endNode.hGap;
+    endY = isUnderlineShap ? endNode.y + endNode.height - endNode.vGap : endNode.y + endNode.height / 2;
+    //根据位置，设置正负参数
+    let plusMinus = isChildUp(node, child) ? (node.left ? [-1, -1] : [1, -1]) : node.left ? [-1, 1] : [1, 1];
+    const layout = MindmapQueries.getCorrectLayoutByElement(node.origin);
+    const strokeWidth = child.origin.linkLineWidth ? child.origin.linkLineWidth : STROKE_WIDTH;
+    if (beginNode.origin.isRoot) {
+        if (layout === MindmapLayoutType.leftBottomIndented || layout === MindmapLayoutType.rightBottomIndented) {
+            beginY += strokeWidth;
+        }
+        if (layout === MindmapLayoutType.leftTopIndented || layout === MindmapLayoutType.rightTopIndented) {
+            beginY -= strokeWidth;
+        }
+    }
+    let curve = [
+        [beginX, beginY],
+        [beginX, beginY],
+        [beginX, beginY],
+        [beginX, endY - (endNode.hGap * 3 * plusMinus[1]) / 5],
+        [beginX, endY - (endNode.hGap * plusMinus[1]) / 5],
+        [beginX + (endNode.hGap * plusMinus[0]) / 4, endY],
+        [beginX + (endNode.hGap * plusMinus[0] * 3) / 5, endY],
+        isUnderlineShap && needDrawUnderline ? [endX + (endNode.width - endNode.hGap * 2) * plusMinus[0], endY] : [endX, endY],
+        isUnderlineShap && needDrawUnderline ? [endX + (endNode.width - endNode.hGap * 2) * plusMinus[0], endY] : [endX, endY],
+        isUnderlineShap && needDrawUnderline ? [endX + (endNode.width - endNode.hGap * 2) * plusMinus[0], endY] : [endX, endY]
+    ];
+    const stroke = defaultStroke || getLinkLineColorByMindmapElement(child.origin);
+    const points = pointsOnBezierCurves(curve);
+    return roughSVG.curve(points, { stroke, strokeWidth });
+}
+
+var HorizontalPlacement;
+(function (HorizontalPlacement) {
+    HorizontalPlacement["left"] = "left";
+    HorizontalPlacement["center"] = "center";
+    HorizontalPlacement["right"] = "right";
+})(HorizontalPlacement || (HorizontalPlacement = {}));
+var VerticalPlacement;
+(function (VerticalPlacement) {
+    VerticalPlacement["top"] = "top";
+    VerticalPlacement["middle"] = "middle";
+    VerticalPlacement["bottom"] = "bottom";
+})(VerticalPlacement || (VerticalPlacement = {}));
+
+const getPointByPlacement = (client, placement) => {
+    let x = client.x;
+    let y = client.y;
+    if (placement[0] === HorizontalPlacement.center) {
+        x = client.x + client.width / 2;
+    }
+    if (placement[0] === HorizontalPlacement.right) {
+        x = client.x + client.width;
+    }
+    if (placement[1] === VerticalPlacement.middle) {
+        y = client.y + client.height / 2;
+    }
+    if (placement[1] === VerticalPlacement.bottom) {
+        y = client.y + client.height;
+    }
+    return [x, y];
+};
+const getLayoutDirection = (node, isHorizontal) => {
+    if (isHorizontal) {
+        if (node.left) {
+            return LayoutDirection.left;
+        }
+        else {
+            return LayoutDirection.right;
+        }
+    }
+    else {
+        if (node.up) {
+            return LayoutDirection.top;
+        }
+        else {
+            return LayoutDirection.bottom;
+        }
+    }
+};
+// 以右为基准
+// 右 -> 左:
+// 1. 终点 -> 起点/起点 -> 终点
+// 2. 加 -> 减
+// 水平 -> 垂直:
+// 1. 起点/终点 -> 纵轴
+// 2. 加减 -> 纵轴
+// 下 -> 上:
+// 1. 终点 -> 起点/终点 -> 起点
+// 2. 加 -> 减
+const movePoint = (point, distance, direction = LayoutDirection.right) => {
+    if (direction === LayoutDirection.left) {
+        return [point[0] - distance, point[1]];
+    }
+    if (direction === LayoutDirection.bottom) {
+        return [point[0], point[1] + distance];
+    }
+    if (direction === LayoutDirection.top) {
+        return [point[0], point[1] - distance];
+    }
+    return [point[0] + distance, point[1]];
+};
+const transformPlacement = (placement, direction) => {
+    // to left
+    if (direction === LayoutDirection.left) {
+        if (placement[0] === HorizontalPlacement.right) {
+            placement[0] = HorizontalPlacement.left;
+        }
+        else if (placement[0] === HorizontalPlacement.left) {
+            placement[0] = HorizontalPlacement.right;
+        }
+    }
+    // to bottom
+    if (direction === LayoutDirection.bottom || direction === LayoutDirection.top) {
+        let horizontal = HorizontalPlacement.center;
+        let vertical = VerticalPlacement.middle;
+        if (placement[1] === VerticalPlacement.top) {
+            horizontal = HorizontalPlacement.left;
+        }
+        if (placement[1] === VerticalPlacement.bottom) {
+            horizontal = HorizontalPlacement.right;
+        }
+        if (placement[0] === HorizontalPlacement.left) {
+            vertical = VerticalPlacement.top;
+        }
+        if (placement[0] === HorizontalPlacement.right) {
+            vertical = VerticalPlacement.bottom;
+        }
+        placement[0] = horizontal;
+        placement[1] = vertical;
+    }
+    // to up
+    if (direction === LayoutDirection.top) {
+        if (placement[1] === VerticalPlacement.bottom) {
+            placement[1] = VerticalPlacement.top;
+        }
+        else if (placement[1] === VerticalPlacement.top) {
+            placement[1] = VerticalPlacement.bottom;
+        }
+    }
+};
+
+function drawLogicLink(roughSVG, node, parent, isHorizontal) {
+    const stroke = getLinkLineColorByMindmapElement(node.origin);
+    const strokeWidth = node.origin.linkLineWidth ? node.origin.linkLineWidth : STROKE_WIDTH;
+    const hasStraightLine = !parent.origin.isRoot;
+    const hasUnderlineShape = node.origin.shape === MindmapNodeShape.underline;
+    const hasUnderlineShapeOfParent = parent.origin.shape === MindmapNodeShape.underline;
+    const nodeClient = getRectangleByNode(node);
+    const parentClient = getRectangleByNode(parent);
+    const linkDirection = getLayoutDirection(node, isHorizontal);
+    // ① ensure begin placement and end placement
+    // begin placement represent parent connector position and end placement represent child connector
+    const beginPlacement = [HorizontalPlacement.right, VerticalPlacement.middle];
+    const endPlacement = [HorizontalPlacement.left, VerticalPlacement.middle];
+    transformPlacement(beginPlacement, linkDirection);
+    transformPlacement(endPlacement, linkDirection);
+    // underline shape and horizontal
+    if (isHorizontal && hasUnderlineShapeOfParent && !parent.origin.isRoot) {
+        beginPlacement[1] = VerticalPlacement.bottom;
+    }
+    if (isHorizontal && hasUnderlineShape) {
+        endPlacement[1] = VerticalPlacement.bottom;
+    }
+    let beginPoint = getPointByPlacement(parentClient, beginPlacement);
+    let endPoint = getPointByPlacement(nodeClient, endPlacement);
+    // ② 确定凸出直线，从起始点开始画一条直线，从直线的结束位置绘制曲线，保证收起图标可以完美覆盖起始连线，根节点不需要这条直线
+    // 绘制贝塞尔曲线要求，需要增加三个点，正常两个点就可以确定这条直线
+    const straightLineDistance = 8;
+    const beginPoint2 = hasStraightLine ? movePoint(beginPoint, straightLineDistance, linkDirection) : beginPoint;
+    let straightLine = hasStraightLine ? [beginPoint, beginPoint2, beginPoint2] : [];
+    // ③ 确定曲线
+    const beginBufferDistance = (parent.hGap + node.hGap) / 3;
+    const endBufferDistance = -(parent.hGap + node.hGap) / 2.4;
+    let curve = [
+        beginPoint2,
+        movePoint(beginPoint2, beginBufferDistance, linkDirection),
+        movePoint(endPoint, endBufferDistance, linkDirection),
+        endPoint
+    ];
+    // ④ 下划线绘制，underline shape and horizontal
+    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 });
+}
+
+function getEmojisRectangle(element) {
+    const count = element.data.emojis.length;
+    const fontSize = getEmojiFontSize(element);
+    return { width: fontSize * count, height: fontSize * 1.5 };
+}
+function getEmojiFontSize(element) {
+    if (PlaitMind.isMind(element)) {
+        return 18;
+    }
+    else {
+        return 14;
+    }
+}
+
+const NodeDefaultSpace = {
+    horizontal: {
+        nodeAndText: BASE * 3,
+        emojiAndText: BASE * 1.5
+    },
+    vertical: {
+        nodeAndText: BASE * 1.5
+    }
+};
+const RootDefaultSpace = {
+    horizontal: {
+        nodeAndText: BASE * 4,
+        emojiAndText: BASE * 2
+    },
+    vertical: {
+        nodeAndText: BASE * 2
+    }
+};
+const getHorizontalSpaceBetweenNodeAndText = (element) => {
+    const isMind = PlaitMind.isMind(element);
+    const nodeAndText = isMind ? RootDefaultSpace.horizontal.nodeAndText : NodeDefaultSpace.horizontal.nodeAndText;
+    return nodeAndText;
+};
+const getHorizontalSpaceEmojiAndText = (element) => {
+    const isMind = PlaitMind.isMind(element);
+    const emojiAndText = isMind ? RootDefaultSpace.horizontal.emojiAndText : NodeDefaultSpace.horizontal.emojiAndText;
+    return emojiAndText;
+};
+const getVerticalSpaceBetweenNodeAndText = (element) => {
+    const isMind = PlaitMind.isMind(element);
+    const nodeAndText = isMind ? RootDefaultSpace.vertical.nodeAndText : NodeDefaultSpace.vertical.nodeAndText;
+    return nodeAndText;
+};
+const NodeSpace = {
+    getNodeWidth(element) {
+        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(element);
+        if (MindElement.hasEmojis(element)) {
+            return nodeAndText + getEmojisRectangle(element).width + getHorizontalSpaceEmojiAndText(element) + element.width + nodeAndText;
+        }
+        return nodeAndText + element.width + nodeAndText;
+    },
+    getNodeHeight(element) {
+        const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
+        return nodeAndText + element.height + nodeAndText;
+    },
+    getTextHorizontalSpace(element) {
+        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(element);
+        if (MindElement.hasEmojis(element)) {
+            return nodeAndText + getEmojisRectangle(element).width + getHorizontalSpaceEmojiAndText(element);
+        }
+        else {
+            return nodeAndText;
+        }
+    },
+    getTextVerticalSpace(element) {
+        const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
+        return nodeAndText;
+    },
+    getEmojiHorizontalSpace(element) {
+        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(element);
+        return nodeAndText;
+    },
+    getEmojiVerticalSpace(element) {
+        const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
+        return nodeAndText;
+    }
+};
+
+function drawMindmapNodeRichtext(node, viewContainerRef) {
+    const { x, y } = getRichtextRectangleByNode(node);
+    const classList = [];
+    if (node.origin.isRoot) {
+        classList.push('root-node');
+        classList.push('font-size-18');
+    }
+    else if (node.parent?.origin?.isRoot) {
+        classList.push('root-child-node');
+    }
+    else {
+        classList.push('child-node');
+    }
+    return drawRichtext(x, y, node.origin.width, node.origin.height, node.origin.data.topic, viewContainerRef, classList);
+}
+function updateMindNodeTopicSize(node, g, isEditable) {
+    const { x, y, width, height } = getRichtextRectangleByNode(node);
+    if (isEditable) {
+        // add 999， avoid changing lines when paste more text
+        updateForeignObject(g, width + 999, height + 999, x, y);
+    }
+    else {
+        updateForeignObject(g, node.origin.width, node.origin.height, x, y);
+    }
+}
+function getRichtextRectangleByNode(node) {
+    let { x, y, width, height } = getRectangleByNode(node);
+    x = x + NodeSpace.getTextHorizontalSpace(node.origin);
+    y = y + NodeSpace.getTextVerticalSpace(node.origin);
+    return { width, height, x, y };
+}
+
+function drawRectangleNode(board, node) {
+    const { x, y, width, height } = getRectangleByNode(node);
+    const fill = node.origin.fill ? node.origin.fill : node.origin.isRoot ? ROOT_NODE_FILL : NODE_FILL;
+    const stroke = getStrokeByMindmapElement(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,
+        strokeWidth,
+        fill,
+        fillStyle: 'solid'
+    });
+    return nodeG;
+}
+
+function drawAbstractLink(board, node, isHorizontal) {
+    const linkPadding = 15;
+    const parent = node.parent;
+    const abstractRectangle = getRectangleByNode(node);
+    let includedElements = parent.children.slice(node.origin.start, node.origin.end + 1).map(node => {
+        return node.origin;
+    });
+    const includedElementsRectangle = getRectangleByElements(board, includedElements, true);
+    const linkDirection = getLayoutDirection(node, isHorizontal);
+    const bezierBeginPlacement = [HorizontalPlacement.right, VerticalPlacement.top];
+    const bezierEndPlacement = [HorizontalPlacement.right, VerticalPlacement.bottom];
+    const abstractConnectorPlacement = [HorizontalPlacement.left, VerticalPlacement.middle];
+    transformPlacement(bezierBeginPlacement, linkDirection);
+    transformPlacement(bezierEndPlacement, linkDirection);
+    transformPlacement(abstractConnectorPlacement, linkDirection);
+    let bezierBeginPoint = getPointByPlacement(includedElementsRectangle, bezierBeginPlacement);
+    let bezierEndPoint = getPointByPlacement(includedElementsRectangle, bezierEndPlacement);
+    let abstractConnectorPoint = getPointByPlacement(abstractRectangle, abstractConnectorPlacement);
+    let curveDistance = 0;
+    if (isHorizontal) {
+        curveDistance = Math.abs(abstractConnectorPoint[0] - bezierBeginPoint[0]) - linkPadding * 2;
+    }
+    else {
+        curveDistance = Math.abs(abstractConnectorPoint[1] - bezierBeginPoint[1]) - linkPadding * 2;
+    }
+    bezierBeginPoint = movePoint(bezierBeginPoint, linkPadding, linkDirection);
+    let c1 = movePoint(bezierBeginPoint, curveDistance, linkDirection);
+    bezierEndPoint = movePoint(bezierEndPoint, linkPadding, linkDirection);
+    let c2 = movePoint(bezierEndPoint, curveDistance, linkDirection);
+    let bezierConnectorPoint = movePoint(abstractConnectorPoint, -linkPadding, linkDirection);
+    const link = PlaitBoard.getRoughSVG(board).path(`M${bezierBeginPoint[0]},${bezierBeginPoint[1]} Q${c1[0]},${c1[1]} ${bezierConnectorPoint[0]},${bezierConnectorPoint[1]} Q${c2[0]},${c2[1]} ${bezierEndPoint[0]},${bezierEndPoint[1]} M${abstractConnectorPoint[0]},${abstractConnectorPoint[1]} L${bezierConnectorPoint[0]},${bezierConnectorPoint[1]}`, {
+        stroke: GRAY_COLOR,
+        strokeWidth: 2
+    });
+    return link;
+}
+
+class EmojiDrawer {
+    constructor(board, viewContainerRef) {
+        this.board = board;
+        this.viewContainerRef = viewContainerRef;
+        this.componentRef = null;
+    }
+    draw(emoji, element) {
+        this.destroy();
+        const componentType = this.board.drawEmoji(emoji, element);
+        this.componentRef = this.viewContainerRef.createComponent(componentType);
+        this.componentRef.instance.emojiItem = emoji;
+        const fontSize = PlaitMind.isMind(element) ? 18 : 14;
+        this.componentRef.instance.fontSize = fontSize;
+    }
+    get nativeElement() {
+        if (this.componentRef) {
+            return this.componentRef.instance.nativeElement;
+        }
+        else {
+            return null;
+        }
+    }
+    destroy() {
+        if (this.componentRef) {
+            this.componentRef.destroy();
+            this.componentRef = null;
+        }
+    }
+}
+class EmojisDrawer {
+    constructor(board, viewContainerRef) {
+        this.board = board;
+        this.viewContainerRef = viewContainerRef;
+        this.emojiDrawers = [];
+    }
+    drawEmojis(element) {
+        this.destroy();
+        if (MindElement.hasEmojis(element)) {
+            const node = MindElement.getNode(element);
+            this.g = createG();
+            this.g.classList.add('emojis');
+            let { x, y } = getRectangleByNode(MindElement.getNode(element));
+            x = x + NodeSpace.getEmojiHorizontalSpace(element);
+            y = y + NodeSpace.getEmojiVerticalSpace(element);
+            const { width, height } = getEmojisRectangle(element);
+            const fontSize = getEmojiFontSize(element);
+            const foreignObject = createForeignObject(x, y, width, height);
+            this.g.append(foreignObject);
+            const container = document.createElement('div');
+            container.classList.add('node-emojis-container');
+            container.classList.add(`emoji-font-size-${fontSize}`);
+            foreignObject.append(container);
+            this.emojiDrawers = element.data.emojis.map(emojiItem => {
+                const drawer = new EmojiDrawer(this.board, this.viewContainerRef);
+                drawer.draw(emojiItem, element);
+                return drawer;
+            });
+            this.emojiDrawers.forEach(drawer => {
+                container.append(drawer.nativeElement);
+            });
+            return this.g;
+        }
+        return undefined;
+    }
+    destroy() {
+        if (this.g) {
+            this.g.remove();
+        }
+        this.emojiDrawers.forEach(drawer => drawer.destroy());
+        this.emojiDrawers = [];
+    }
+}
+
+const setLayout = (board, layout, path) => {
+    correctLogicLayoutNode(board, layout, path);
+    Transforms.setNode(board, { layout }, path);
+};
+const correctLogicLayoutNode = (board, layout, path) => {
+    const node = PlaitNode.get(board, path);
+    if (node && layout) {
+        node.children?.forEach((value, index) => {
+            if (value.layout) {
+                if ((isHorizontalLogicLayout(layout) && isVerticalLogicLayout(value.layout)) ||
+                    (isVerticalLogicLayout(layout) && isHorizontalLogicLayout(value.layout))) {
+                    Transforms.setNode(board, { layout: null }, [...path, index]);
+                }
+                if (value.children?.length) {
+                    correctLogicLayoutNode(board, layout, [...path, index]);
+                }
+            }
+        });
+    }
+};
+
+const setTopic = (board, element, topic, width, height) => {
+    const newElement = {
+        data: { topic },
+        width: width < NODE_MIN_WIDTH * board.viewport.zoom ? NODE_MIN_WIDTH : width / board.viewport.zoom,
+        height: height / board.viewport.zoom
+    };
+    if (MindElement.hasEmojis(element)) {
+        newElement.data.emojis = element.data.emojis;
+    }
+    const path = PlaitBoard.findPath(board, element);
+    Transforms.setNode(board, newElement, path);
+};
+const setTopicSize = (board, element, width, height) => {
+    const newElement = {
+        width: width < NODE_MIN_WIDTH * board.viewport.zoom ? NODE_MIN_WIDTH : width / board.viewport.zoom,
+        height: height / board.viewport.zoom
+    };
+    const path = PlaitBoard.findPath(board, element);
+    Transforms.setNode(board, newElement, path);
+};
+const addEmoji = (board, element, emojiItem) => {
+    const emojis = element.data.emojis || [];
+    emojis.push(emojiItem);
+    const newElement = {
+        data: { topic: element.data.topic, emojis }
+    };
+    const path = PlaitBoard.findPath(board, element);
+    Transforms.setNode(board, newElement, path);
+};
+const removeEmoji = (board, element, emojiItem) => {
+    const emojis = element.data.emojis.filter(value => value !== emojiItem);
+    const newElement = {
+        data: { topic: element.data.topic }
+    };
+    if (emojis.length > 0) {
+        newElement.data.emojis = emojis;
+    }
+    const path = PlaitBoard.findPath(board, element);
+    Transforms.setNode(board, newElement, path);
+};
+
+const MindTransforms = {
+    setLayout,
+    setTopic,
+    setTopicSize,
+    addEmoji,
+    removeEmoji
+};
+
+function drawAbstractIncludedOutline(board, roughSVG, element, handlePosition = AbstractHandlePosition.start, resizingLocation) {
+    const abstractIncludedG = createG();
+    const parentElement = MindElement.getParent(element);
+    const nodeLayout = MindmapQueries.getCorrectLayoutByElement(element);
+    const isHorizontal = isHorizontalLayout(nodeLayout);
+    const includedElements = parentElement.children.slice(element.start, element.end + 1);
+    let abstractRectangle = getRectangleByElements(board, includedElements, true);
+    abstractRectangle = RectangleClient.getOutlineRectangle(abstractRectangle, -ABSTRACT_INCLUDED_OUTLINE_OFFSET);
+    if (resizingLocation) {
+        abstractRectangle = getRectangleByResizingLocation(abstractRectangle, resizingLocation, handlePosition, isHorizontal);
+    }
+    const rectangle = drawAbstractRoundRectangle(roughSVG, abstractRectangle.x, abstractRectangle.y, abstractRectangle.x + abstractRectangle.width, abstractRectangle.y + abstractRectangle.height, isHorizontal, {
+        stroke: PRIMARY_COLOR,
+        strokeWidth: 1,
+        fillStyle: 'solid'
+    });
+    const handleOptions = {
+        stroke: ABSTRACT_HANDLE_COLOR,
+        strokeWidth: 3,
+        fillStyle: 'solid'
+    };
+    const startPlacement = [HorizontalPlacement.center, VerticalPlacement.top];
+    const endPlacement = [HorizontalPlacement.center, VerticalPlacement.bottom];
+    const linkDirection = getLayoutDirection(MindElement.getNode(element), isHorizontal);
+    transformPlacement(startPlacement, linkDirection);
+    transformPlacement(endPlacement, linkDirection);
+    let startCenterPoint = getPointByPlacement(abstractRectangle, startPlacement);
+    let endCenterPoint = getPointByPlacement(abstractRectangle, endPlacement);
+    const startPoint1 = movePoint(startCenterPoint, -ABSTRACT_HANDLE_LENGTH / 2, linkDirection);
+    const startPoint2 = movePoint(startCenterPoint, ABSTRACT_HANDLE_LENGTH / 2, linkDirection);
+    const endPoint1 = movePoint(endCenterPoint, -ABSTRACT_HANDLE_LENGTH / 2, linkDirection);
+    const endPoint2 = movePoint(endCenterPoint, ABSTRACT_HANDLE_LENGTH / 2, linkDirection);
+    const startHandle = roughSVG.line(startPoint1[0], startPoint1[1], startPoint2[0], startPoint2[1], handleOptions);
+    const endHandle = roughSVG.line(endPoint1[0], endPoint1[1], endPoint2[0], endPoint2[1], handleOptions);
+    abstractIncludedG.append(startHandle);
+    abstractIncludedG.append(endHandle);
+    abstractIncludedG.append(rectangle);
+    return abstractIncludedG;
+}
+
+class MindNodeComponent extends PlaitPluginElementComponent {
+    get handActive() {
+        return this.board.pointer === PlaitPointerType.hand;
+    }
+    constructor(viewContainerRef, cdr, render2) {
+        super(cdr);
+        this.viewContainerRef = viewContainerRef;
+        this.cdr = cdr;
+        this.render2 = render2;
+        this.isEditable = false;
+        this.activeG = [];
+        this.shapeG = null;
+        this.destroy$ = new Subject();
+        this.trackBy = (index, node) => {
+            return node.origin.id;
+        };
+    }
+    ngOnInit() {
+        this.emojisDrawer = new EmojisDrawer(this.board, this.viewContainerRef);
+        MINDMAP_ELEMENT_TO_COMPONENT.set(this.element, this);
+        super.ngOnInit();
+        this.node = ELEMENT_TO_NODE.get(this.element);
+        if (!PlaitMind.isMind(this.element)) {
+            this.parent = MindElement.getNode(MindElement.getParent(this.element));
+        }
+        this.index = NODE_TO_INDEX.get(this.element) || 0;
+        this.roughSVG = PlaitBoard.getRoughSVG(this.board);
+        this.parentG = PlaitElement.getComponent(MindElement.getRoot(this.board, this.element)).rootG;
+        this.drawShape();
+        this.drawLink();
+        this.drawRichtext();
+        this.drawEmojis();
+        this.drawActiveG();
+        this.updateActiveClass();
+        this.drawMaskG();
+        this.drawExtend();
+    }
+    onContextChanged(value, previous) {
+        const newNode = ELEMENT_TO_NODE.get(this.element);
+        if (!PlaitMind.isMind(this.element)) {
+            this.parent = MindElement.getNode(MindElement.getParent(this.element));
+        }
+        MINDMAP_ELEMENT_TO_COMPONENT.set(this.element, this);
+        // resolve move node richtext lose issue
+        if (this.node !== newNode) {
+            if (this.foreignObject && this.foreignObject.children.length <= 0) {
+                this.foreignObject?.appendChild(this.richtextComponentRef?.instance.editable);
+            }
+        }
+        const isEquals = MindmapNode.isEquals(this.node, newNode);
+        this.node = newNode;
+        this.drawActiveG();
+        this.updateActiveClass();
+        if (!isEquals) {
+            this.drawShape();
+            this.drawLink();
+            this.updateRichtext();
+            this.drawMaskG();
+            this.drawExtend();
+            this.drawEmojis();
+        }
+    }
+    drawShape() {
+        this.destroyShape();
+        const shape = getNodeShapeByElement(this.node.origin);
+        switch (shape) {
+            case MindmapNodeShape.roundRectangle:
+                this.shapeG = drawRectangleNode(this.board, this.node);
+                this.g.prepend(this.shapeG);
+                break;
+            default:
+                break;
+        }
+    }
+    drawEmojis() {
+        const g = this.emojisDrawer.drawEmojis(this.element);
+        if (g) {
+            this.g.append(g);
+        }
+    }
+    destroyShape() {
+        if (this.shapeG) {
+            this.shapeG.remove();
+            this.shapeG = null;
+        }
+    }
+    drawLink() {
+        if (!this.parent) {
+            return;
+        }
+        if (this.linkG) {
+            this.linkG.remove();
+        }
+        const layout = MindmapQueries.getLayoutByElement(this.parent.origin);
+        if (AbstractNode.isAbstract(this.node.origin)) {
+            this.linkG = drawAbstractLink(this.board, this.node, isHorizontalLayout(layout));
+        }
+        else if (MindElement.isIndentedLayout(this.parent.origin)) {
+            this.linkG = drawIndentedLink(this.roughSVG, this.parent, this.node);
+        }
+        else {
+            this.linkG = drawLogicLink(this.roughSVG, this.node, this.parent, isHorizontalLayout(layout));
+        }
+        this.g.append(this.linkG);
+    }
+    destroyLine() {
+        if (this.parent) {
+            if (this.linkG) {
+                this.linkG.remove();
+            }
+        }
+    }
+    drawMaskG() {
+        this.destroyMaskG();
+        const lineWidthOffset = 2;
+        const extendOffset = 15;
+        const nodeLayout = MindmapQueries.getLayoutByElement(this.node.origin);
+        const isTop = isTopLayout(nodeLayout);
+        const isRight = isRightLayout(nodeLayout);
+        const isBottom = isBottomLayout(nodeLayout);
+        const isLeft = isLeftLayout(nodeLayout);
+        const { x, y, width, height } = getRectangleByNode(this.node);
+        let drawX = x;
+        let drawY = y;
+        let drawWidth = x + width;
+        let drawHeight = y + height;
+        switch (true) {
+            case isTop:
+                drawX = x - lineWidthOffset;
+                drawY = y - extendOffset;
+                drawWidth = x + width + lineWidthOffset;
+                drawHeight = y + height + lineWidthOffset;
+                break;
+            case isBottom:
+                drawX = x - lineWidthOffset;
+                drawY = y - lineWidthOffset;
+                drawWidth = x + width + lineWidthOffset;
+                drawHeight = y + height + extendOffset;
+                break;
+            case isLeft:
+                drawX = x - extendOffset;
+                drawY = y - lineWidthOffset;
+                drawWidth = x + width + lineWidthOffset;
+                drawHeight = y + height + lineWidthOffset;
+                break;
+            case isRight:
+                drawX = x - lineWidthOffset;
+                drawY = y - lineWidthOffset;
+                drawWidth = x + width + extendOffset;
+                drawHeight = y + height + lineWidthOffset;
+                break;
+        }
+        this.maskG = drawRoundRectangle(this.roughSVG, drawX, drawY, drawWidth, drawHeight, { stroke: 'none', fill: 'rgba(255,255,255,0)', fillStyle: 'solid' }, true);
+        this.maskG.classList.add('mask');
+        this.maskG.setAttribute('visibility', 'visible');
+        this.g.append(this.maskG);
+        if (this.isEditable) {
+            this.disabledMaskG();
+        }
+        fromEvent(this.maskG, 'mouseenter')
+            .pipe(takeUntil(this.destroy$), filter(() => {
+            return PlaitBoard.isFocus(this.board) && !this.element.isCollapsed && !this.handActive;
+        }))
+            .subscribe(() => {
+            this.g.classList.add('hovered');
+        });
+        fromEvent(this.maskG, 'mouseleave')
+            .pipe(takeUntil(this.destroy$), filter(() => {
+            return PlaitBoard.isFocus(this.board) && !this.element.isCollapsed;
+        }))
+            .subscribe(() => {
+            this.g.classList.remove('hovered');
+        });
+    }
+    destroyMaskG() {
+        if (this.maskG) {
+            this.maskG.remove();
+            this.g.classList.remove('hovered');
+        }
+    }
+    enableMaskG() {
+        if (this.maskG) {
+            this.maskG.setAttribute('visibility', 'visible');
+        }
+    }
+    disabledMaskG() {
+        if (this.maskG) {
+            this.maskG.setAttribute('visibility', 'hidden');
+        }
+    }
+    drawActiveG() {
+        this.destroyActiveG();
+        this.abstractIncludedOutlineG?.remove();
+        if (this.selected) {
+            if (AbstractNode.isAbstract(this.element)) {
+                this.updateAbstractIncludedOutline();
+            }
+            let { x, y, width, height } = getRectangleByNode(this.node);
+            const selectedStrokeG = drawRoundRectangle(this.roughSVG, x - 2, y - 2, x + width + 2, y + height + 2, { stroke: PRIMARY_COLOR, strokeWidth: 2, fill: '' }, true);
+            // 影响 mask 移入移出事件
+            selectedStrokeG.style.pointerEvents = 'none';
+            this.g.appendChild(selectedStrokeG);
+            this.activeG.push(selectedStrokeG);
+            if (this.richtextComponentRef?.instance.plaitReadonly === true) {
+                const selectedBackgroundG = drawRoundRectangle(this.roughSVG, x - 2, y - 2, x + width + 2, y + height + 2, { stroke: PRIMARY_COLOR, fill: PRIMARY_COLOR, fillStyle: 'solid' }, true);
+                selectedBackgroundG.style.opacity = '0.15';
+                // 影响双击事件
+                selectedBackgroundG.style.pointerEvents = 'none';
+                this.g.appendChild(selectedBackgroundG);
+                this.activeG.push(selectedBackgroundG, selectedStrokeG);
+            }
+        }
+    }
+    destroyActiveG() {
+        this.activeG.forEach(g => g.remove());
+        this.activeG = [];
+    }
+    updateActiveClass() {
+        if (!this.g) {
+            return;
+        }
+        if (this.selected) {
+            this.render2.addClass(this.g, 'active');
+        }
+        else {
+            this.render2.removeClass(this.g, 'active');
+        }
+    }
+    drawRichtext() {
+        const { richtextG, richtextComponentRef, foreignObject } = drawMindmapNodeRichtext(this.node, this.viewContainerRef);
+        this.richtextComponentRef = richtextComponentRef;
+        this.richtextG = richtextG;
+        this.foreignObject = foreignObject;
+        this.render2.addClass(richtextG, 'richtext');
+        this.g.append(richtextG);
+    }
+    drawQuickInsert(offset = 0) {
+        if (this.board.options.readonly) {
+            return;
+        }
+        const quickInsertG = createG();
+        quickInsertG.classList.add('quick-insert');
+        this.extendG?.append(quickInsertG);
+        const { x, y, width, height } = getRectangleByNode(this.node);
+        /**
+         * 方位：
+         *    1. 左、左上、左下
+         *    2. 右、右上、右下
+         *    3. 上、上左、上右
+         *    4. 下、下左、下右
+         */
+        const shape = getNodeShapeByElement(this.node.origin);
+        // 形状是矩形要偏移边框的线宽
+        const strokeWidth = this.node.origin.linkLineWidth ? this.node.origin.linkLineWidth : STROKE_WIDTH;
+        let offsetBorderLineWidth = 0;
+        if (shape === MindmapNodeShape.roundRectangle && offset === 0) {
+            offsetBorderLineWidth = strokeWidth;
+        }
+        let offsetRootBorderLineWidth = 0;
+        if (this.node.origin.isRoot) {
+            offsetRootBorderLineWidth = strokeWidth;
+        }
+        // 当没有子节点时，需要缩小的偏移量
+        const extraOffset = 3;
+        const underlineCoordinates = {
+            // 画线方向：右向左 <--
+            [MindmapLayoutType.left]: {
+                // EXTEND_RADIUS * 0.5 是 左方向，折叠/收起的偏移量
+                startX: x - (offset > 0 ? offset + EXTEND_RADIUS * 0.5 : 0) - offsetRootBorderLineWidth,
+                startY: y + height,
+                endX: x -
+                    offsetBorderLineWidth -
+                    offsetRootBorderLineWidth -
+                    (offset > 0 ? offset + QUICK_INSERT_CIRCLE_OFFSET - extraOffset : 0) -
+                    EXTEND_RADIUS,
+                endY: y + height
+            },
+            // 画线方向：左向右 -->
+            [MindmapLayoutType.right]: {
+                startX: x + width + (offset > 0 ? offset + QUICK_INSERT_CIRCLE_OFFSET : 0) + offsetRootBorderLineWidth,
+                startY: y + height,
+                endX: x +
+                    width +
+                    offsetBorderLineWidth +
+                    (offset > 0 ? offset + QUICK_INSERT_CIRCLE_OFFSET - extraOffset : 0) +
+                    EXTEND_RADIUS +
+                    offsetRootBorderLineWidth,
+                endY: y + height
+            },
+            // 画线方向：下向上 -->
+            [MindmapLayoutType.upward]: {
+                startX: x + width * 0.5,
+                startY: y - offsetBorderLineWidth - (offset > 0 ? offset + QUICK_INSERT_CIRCLE_OFFSET : 0) - offsetRootBorderLineWidth,
+                endX: x + width * 0.5,
+                endY: y -
+                    offsetBorderLineWidth -
+                    (offset > 0 ? offset + QUICK_INSERT_CIRCLE_OFFSET - extraOffset : 0) -
+                    EXTEND_RADIUS -
+                    offsetRootBorderLineWidth
+            },
+            // 画线方向：上向下 -->
+            [MindmapLayoutType.downward]: {
+                startX: x + width * 0.5,
+                startY: y + height + offsetBorderLineWidth + (offset > 0 ? offset + QUICK_INSERT_CIRCLE_OFFSET : 0) + offsetRootBorderLineWidth,
+                endX: x + width * 0.5,
+                endY: y +
+                    height +
+                    offsetBorderLineWidth +
+                    (offset > 0 ? offset + QUICK_INSERT_CIRCLE_OFFSET - extraOffset : 0) +
+                    EXTEND_RADIUS +
+                    offsetRootBorderLineWidth
+            },
+            [MindmapLayoutType.leftBottomIndented]: {
+                startX: x + width * 0.5,
+                startY: y + height + offsetBorderLineWidth + (offset > 0 ? offset + QUICK_INSERT_CIRCLE_OFFSET : 0) + offsetRootBorderLineWidth,
+                endX: x + width * 0.5,
+                endY: y +
+                    height +
+                    offsetBorderLineWidth +
+                    (offset > 0 ? offset + QUICK_INSERT_CIRCLE_OFFSET - extraOffset : 0) +
+                    EXTEND_RADIUS +
+                    offsetRootBorderLineWidth
+            },
+            [MindmapLayoutType.leftTopIndented]: {
+                startX: x + width * 0.5,
+                startY: y - offsetBorderLineWidth - (offset > 0 ? offset + QUICK_INSERT_CIRCLE_OFFSET : 0) - offsetRootBorderLineWidth,
+                endX: x + width * 0.5,
+                endY: y -
+                    offsetBorderLineWidth -
+                    (offset > 0 ? offset + QUICK_INSERT_CIRCLE_OFFSET : 0) -
+                    EXTEND_RADIUS -
+                    offsetRootBorderLineWidth
+            },
+            [MindmapLayoutType.rightBottomIndented]: {
+                startX: x + width * 0.5,
+                startY: y + height + offsetBorderLineWidth + (offset > 0 ? offset + QUICK_INSERT_CIRCLE_OFFSET : 0) + offsetRootBorderLineWidth,
+                endX: x + width * 0.5,
+                endY: y +
+                    height +
+                    offsetBorderLineWidth +
+                    (offset > 0 ? offset + QUICK_INSERT_CIRCLE_OFFSET - extraOffset : 0) +
+                    EXTEND_RADIUS +
+                    offsetRootBorderLineWidth
+            },
+            [MindmapLayoutType.rightTopIndented]: {
+                startX: x + width * 0.5,
+                startY: y - offsetBorderLineWidth - (offset > 0 ? offset + QUICK_INSERT_CIRCLE_OFFSET : 0) - offsetRootBorderLineWidth,
+                endX: x + width * 0.5,
+                endY: y -
+                    offsetBorderLineWidth -
+                    (offset > 0 ? offset + QUICK_INSERT_CIRCLE_OFFSET : 0) -
+                    EXTEND_RADIUS -
+                    offsetRootBorderLineWidth
+            }
+        };
+        if (shape === MindmapNodeShape.roundRectangle || this.node.origin.isRoot) {
+            underlineCoordinates[MindmapLayoutType.left].startY -= height * 0.5;
+            underlineCoordinates[MindmapLayoutType.left].endY -= height * 0.5;
+            underlineCoordinates[MindmapLayoutType.right].startY -= height * 0.5;
+            underlineCoordinates[MindmapLayoutType.right].endY -= height * 0.5;
+        }
+        const stroke = this.node.origin.isRoot
+            ? getRootLinkLineColorByMindmapElement(this.element)
+            : getLinkLineColorByMindmapElement(this.element);
+        let nodeLayout = MindmapQueries.getCorrectLayoutByElement(this.node.origin);
+        if (this.node.origin.isRoot && isStandardLayout(nodeLayout)) {
+            const root = this.node.origin;
+            nodeLayout = root.children.length >= root.rightNodeCount ? MindmapLayoutType.left : MindmapLayoutType.right;
+        }
+        const underlineCoordinate = underlineCoordinates[nodeLayout];
+        if (underlineCoordinate) {
+            const underline = this.roughSVG.line(underlineCoordinate.startX, underlineCoordinate.startY, underlineCoordinate.endX, underlineCoordinate.endY, { stroke, strokeWidth });
+            const circleCoordinates = {
+                startX: underlineCoordinate.endX,
+                startY: underlineCoordinate.endY
+            };
+            const circle = this.roughSVG.circle(circleCoordinates.startX, circleCoordinates.startY, EXTEND_RADIUS, {
+                fill: QUICK_INSERT_CIRCLE_COLOR,
+                stroke: QUICK_INSERT_CIRCLE_COLOR,
+                fillStyle: 'solid'
+            });
+            const innerCrossCoordinates = {
+                horizontal: {
+                    startX: circleCoordinates.startX - EXTEND_RADIUS * 0.5 + 3,
+                    startY: circleCoordinates.startY,
+                    endX: circleCoordinates.startX + EXTEND_RADIUS * 0.5 - 3,
+                    endY: circleCoordinates.startY
+                },
+                vertical: {
+                    startX: circleCoordinates.startX,
+                    startY: circleCoordinates.startY - EXTEND_RADIUS * 0.5 + 3,
+                    endX: circleCoordinates.startX,
+                    endY: circleCoordinates.startY + EXTEND_RADIUS * 0.5 - 3
+                }
+            };
+            const innerCrossHLine = this.roughSVG.line(innerCrossCoordinates.horizontal.startX, innerCrossCoordinates.horizontal.startY, innerCrossCoordinates.horizontal.endX, innerCrossCoordinates.horizontal.endY, {
+                stroke: QUICK_INSERT_INNER_CROSS_COLOR,
+                strokeWidth: 2
+            });
+            const innerRingVLine = this.roughSVG.line(innerCrossCoordinates.vertical.startX, innerCrossCoordinates.vertical.startY, innerCrossCoordinates.vertical.endX, innerCrossCoordinates.vertical.endY, {
+                stroke: QUICK_INSERT_INNER_CROSS_COLOR,
+                strokeWidth: 2
+            });
+            quickInsertG.appendChild(underline);
+            quickInsertG.appendChild(circle);
+            quickInsertG.appendChild(innerCrossHLine);
+            quickInsertG.appendChild(innerRingVLine);
+        }
+        fromEvent(quickInsertG, 'mouseup')
+            .pipe(take(1))
+            .subscribe(() => {
+            const path = PlaitBoard.findPath(this.board, this.element).concat(this.element.children.filter(child => !AbstractNode.isAbstract(child)).length);
+            insertMindElement(this.board, this.node.origin, path);
+        });
+    }
+    drawExtend() {
+        // destroy
+        this.destroyExtend();
+        // create extend
+        this.extendG = createG();
+        const collapseG = createG();
+        this.extendG.classList.add('extend');
+        collapseG.classList.add('collapse-container');
+        this.g.append(this.extendG);
+        this.extendG.append(collapseG);
+        if (this.node.origin.isRoot) {
+            this.drawQuickInsert();
+            return;
+        }
+        // interactive
+        fromEvent(collapseG, 'mouseup')
+            .pipe(filter(() => !this.handActive || this.board.options.readonly), take(1))
+            .subscribe(() => {
+            const isCollapsed = !this.node.origin.isCollapsed;
+            const newElement = { isCollapsed };
+            const path = PlaitBoard.findPath(this.board, this.element);
+            Transforms.setNode(this.board, newElement, path);
+        });
+        const { x, y, width, height } = getRectangleByNode(this.node);
+        const stroke = getLinkLineColorByMindmapElement(this.element);
+        const strokeWidth = this.node.origin.linkLineWidth ? this.node.origin.linkLineWidth : STROKE_WIDTH;
+        const extendY = y + height / 2;
+        const nodeLayout = MindmapQueries.getCorrectLayoutByElement(this.element);
+        let extendLineXY = [
+            [x + width, extendY],
+            [x + width + EXTEND_OFFSET, extendY]
+        ];
+        let arrowYOffset = [-4, 1, -0.6, 4];
+        let arrowXOffset = [10, 5.5, 5.5, 10];
+        let extendLineXOffset = [0, 0];
+        let extendLineYOffset = [0, 0];
+        let circleOffset = [EXTEND_RADIUS / 2, 0];
+        if (isHorizontalLayout(nodeLayout) && !isIndentedLayout(nodeLayout)) {
+            extendLineYOffset =
+                getNodeShapeByElement(this.node.origin) === MindmapNodeShape.roundRectangle
+                    ? [0, 0]
+                    : [height / 2, height / 2];
+            if (isLeftLayout(nodeLayout)) {
+                //左
+                extendLineXOffset = [-width, -width - EXTEND_OFFSET * 2];
+                circleOffset = [-EXTEND_RADIUS / 2, 0];
+                arrowXOffset = [-10, -5.5, -5.5, -10];
+            }
+        }
+        else {
+            arrowXOffset = [-4, 0.6, -1, 4];
+            if (isTopLayout(nodeLayout)) {
+                //上
+                extendLineXOffset = [-width / 2, -width / 2 - EXTEND_OFFSET];
+                extendLineYOffset = [-height / 2, -height / 2 - EXTEND_OFFSET];
+                arrowYOffset = [-10, -5.5, -5.5, -10];
+                circleOffset = [0, -EXTEND_RADIUS / 2];
+            }
+            else {
+                //下
+                extendLineXOffset = [-width / 2, -width / 2 - EXTEND_OFFSET];
+                extendLineYOffset = [height / 2, height / 2 + EXTEND_OFFSET];
+                arrowYOffset = [10, 5.5, 5.5, 10];
+                circleOffset = [0, EXTEND_RADIUS / 2];
+            }
+        }
+        extendLineXY = [
+            [extendLineXY[0][0] + extendLineXOffset[0], extendLineXY[0][1] + extendLineYOffset[0]],
+            [extendLineXY[1][0] + extendLineXOffset[1], extendLineXY[1][1] + extendLineYOffset[1]]
+        ];
+        const extendLine = this.roughSVG.line(extendLineXY[0][0], extendLineXY[0][1], extendLineXY[1][0], extendLineXY[1][1], {
+            strokeWidth,
+            stroke
+        });
+        //绘制箭头
+        const hideArrowTopLine = this.roughSVG.line(extendLineXY[1][0] + arrowXOffset[0], extendLineXY[1][1] + arrowYOffset[0], extendLineXY[1][0] + arrowXOffset[1], extendLineXY[1][1] + arrowYOffset[1], {
+            stroke,
+            strokeWidth: 2
+        });
+        const hideArrowBottomLine = this.roughSVG.line(extendLineXY[1][0] + arrowXOffset[2], extendLineXY[1][1] + arrowYOffset[2], extendLineXY[1][0] + arrowXOffset[3], extendLineXY[1][1] + arrowYOffset[3], {
+            stroke,
+            strokeWidth: 2
+        });
+        if (this.node.origin.isCollapsed) {
+            const badge = this.roughSVG.circle(extendLineXY[1][0] + circleOffset[0], extendLineXY[1][1] + circleOffset[1], EXTEND_RADIUS, {
+                fill: stroke,
+                stroke,
+                fillStyle: 'solid'
+            });
+            let numberOffset = 0;
+            if (getChildrenCount(this.node.origin) >= 10)
+                numberOffset = -2;
+            if (getChildrenCount(this.node.origin) === 1)
+                numberOffset = 1;
+            const badgeText = createText(extendLineXY[1][0] + circleOffset[0] - 4 + numberOffset, extendLineXY[1][1] + circleOffset[1] + 4, stroke, `${getChildrenCount(this.node.origin)}`);
+            this.g.classList.add('collapsed');
+            badge.setAttribute('style', 'opacity: 0.15');
+            badgeText.setAttribute('style', 'font-size: 12px');
+            collapseG.appendChild(badge);
+            collapseG.appendChild(badgeText);
+            collapseG.appendChild(extendLine);
+        }
+        else {
+            this.g.classList.remove('collapsed');
+            if (this.node.origin.children.length > 0) {
+                const hideCircleG = this.roughSVG.circle(extendLineXY[1][0] + circleOffset[0], extendLineXY[1][1] + circleOffset[1], EXTEND_RADIUS - 1, {
+                    fill: '#fff',
+                    stroke,
+                    strokeWidth,
+                    fillStyle: 'solid'
+                });
+                collapseG.appendChild(hideCircleG);
+                collapseG.appendChild(hideArrowTopLine);
+                collapseG.appendChild(hideArrowBottomLine);
+                this.drawQuickInsert(EXTEND_RADIUS);
+            }
+            else {
+                this.drawQuickInsert();
+            }
+        }
+    }
+    destroyExtend() {
+        if (this.extendG) {
+            this.extendG.remove();
+        }
+    }
+    destroyRichtext() {
+        if (this.richtextG) {
+            this.richtextG.remove();
+        }
+        if (this.richtextComponentRef) {
+            this.richtextComponentRef.destroy();
+        }
+    }
+    updateAbstractIncludedOutline(resizingLocation, handlePosition) {
+        this.abstractIncludedOutlineG?.remove();
+        this.abstractIncludedOutlineG = drawAbstractIncludedOutline(this.board, this.roughSVG, this.element, handlePosition, resizingLocation);
+        PlaitBoard.getHost(this.board).append(this.abstractIncludedOutlineG);
+    }
+    updateRichtext() {
+        updateRichText(this.node.origin.data.topic, this.richtextComponentRef);
+        updateMindNodeTopicSize(this.node, this.richtextG, this.isEditable);
+    }
+    startEditText(isEnd, isClear) {
+        if (!this.richtextComponentRef) {
+            throw new Error('undefined richtextComponentRef');
+        }
+        const richtextInstance = this.richtextComponentRef.instance;
+        this.isEditable = true;
+        IS_TEXT_EDITABLE.set(this.board, true);
+        this.disabledMaskG();
+        updateMindNodeTopicSize(this.node, this.richtextG, this.isEditable);
+        if (richtextInstance.plaitReadonly) {
+            richtextInstance.plaitReadonly = false;
+            this.richtextComponentRef.changeDetectorRef.detectChanges();
+            this.drawActiveG();
+            const location = isEnd ? Editor.end(richtextInstance.editor, [0]) : [0];
+            setFullSelectionAndFocus(richtextInstance.editor, location);
+            if (isClear) {
+                Editor.deleteBackward(richtextInstance.editor);
+            }
+            // handle invalid width and height (old data)
+            let { width, height } = getRichtextContentSize(richtextInstance.editable);
+            if (width !== this.element.width || height !== this.element.height) {
+                MindTransforms.setTopicSize(this.board, this.element, width, height);
+            }
+        }
+        let richtext = richtextInstance.plaitValue;
+        // use debounceTime to wait DOM render complete
+        const valueChange$ = richtextInstance.plaitChange
+            .pipe(debounceTime(0), filter(event => {
+            // 过滤掉 operations 中全是 set_selection 的操作
+            return !event.operations.every(op => Operation.isSelectionOperation(op));
+        }))
+            .subscribe(event => {
+            if (richtext === event.value) {
+                return;
+            }
+            this.updateRichtext();
+            // 更新富文本、更新宽高
+            let { width, height } = getRichtextContentSize(richtextInstance.editable);
+            MindTransforms.setTopic(this.board, this.element, event.value, width, height);
+            MERGING.set(this.board, true);
+        });
+        const composition$ = richtextInstance.plaitComposition.pipe(debounceTime(0)).subscribe(event => {
+            let { width, height } = getRichtextContentSize(richtextInstance.editable);
+            if (width < NODE_MIN_WIDTH) {
+                width = NODE_MIN_WIDTH;
+            }
+            if (event.isComposing && (width !== this.node.origin.width || height !== this.node.origin.height)) {
+                const newElement = {
+                    width: width / this.board.viewport.zoom,
+                    height: height / this.board.viewport.zoom
+                };
+                const path = PlaitBoard.findPath(this.board, this.element);
+                Transforms.setNode(this.board, newElement, path);
+                MERGING.set(this.board, true);
+            }
+        });
+        const mousedown$ = fromEvent(document, 'mousedown').subscribe((event) => {
+            const point = transformPoint(this.board, toPoint(event.x, event.y, PlaitBoard.getHost(this.board)));
+            const clickInNode = hitMindmapElement(this.board, point, this.element);
+            if (clickInNode && !hasEditableTarget(richtextInstance.editor, event.target)) {
+                event.preventDefault();
+            }
+            else if (!clickInNode) {
+                // handle composition input state, like: Chinese IME Composition Input
+                timer(0).subscribe(() => {
+                    exitHandle();
+                    this.enableMaskG();
+                });
+            }
+        });
+        const editor = richtextInstance.editor;
+        const { keydown } = editor;
+        editor.keydown = (event) => {
+            if (event.isComposing) {
+                return;
+            }
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                event.stopPropagation();
+                exitHandle();
+                this.drawActiveG();
+                this.enableMaskG();
+                return;
+            }
+            if (event.key === 'Enter' && !event.shiftKey) {
+                event.preventDefault();
+                event.stopPropagation();
+                exitHandle();
+                this.drawActiveG();
+                this.enableMaskG();
+                return;
+            }
+            if (event.key === 'Tab') {
+                event.preventDefault();
+                event.stopPropagation();
+                exitHandle();
+                this.drawActiveG();
+                this.drawMaskG();
+            }
+        };
+        const exitHandle = () => {
+            // unsubscribe
+            valueChange$.unsubscribe();
+            composition$.unsubscribe();
+            mousedown$.unsubscribe();
+            editor.keydown = keydown; // reset keydown
+            // editable status
+            MERGING.set(this.board, false);
+            richtextInstance.plaitReadonly = true;
+            this.richtextComponentRef?.changeDetectorRef.markForCheck();
+            this.isEditable = false;
+            updateMindNodeTopicSize(this.node, this.richtextG, this.isEditable);
+            IS_TEXT_EDITABLE.set(this.board, false);
+        };
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.abstractIncludedOutlineG?.remove();
+        this.destroyRichtext();
+        this.destroy$.next();
+        this.destroy$.complete();
+        if (ELEMENT_TO_NODE.get(this.element) === this.node) {
+            ELEMENT_TO_NODE.delete(this.element);
+        }
+        if (MINDMAP_ELEMENT_TO_COMPONENT.get(this.element) === this) {
+            MINDMAP_ELEMENT_TO_COMPONENT.delete(this.element);
+        }
+    }
+}
+MindNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindNodeComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+MindNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: MindNodeComponent, selector: "plait-mindmap-node", usesInheritance: true, ngImport: i0, template: `
+        <plait-children
+            *ngIf="!element.isCollapsed"
+            [board]="board"
+            [parent]="element"
+            [effect]="effect"
+            [parentG]="parentG"
+        ></plait-children>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PlaitChildrenElement, selector: "plait-children", inputs: ["board", "parent", "effect", "parentG"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindNodeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'plait-mindmap-node',
+                    template: `
+        <plait-children
+            *ngIf="!element.isCollapsed"
+            [board]="board"
+            [parent]="element"
+            [effect]="effect"
+            [parentG]="parentG"
+        ></plait-children>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }]; } });
+
+const getLayoutOptions = () => {
+    function getMainAxle(element, parent) {
+        const strokeWidth = element.strokeWidth || STROKE_WIDTH;
+        if (element.isRoot) {
+            return BASE * 12;
+        }
+        if (parent && parent.isRoot()) {
+            return BASE * 3 + strokeWidth / 2;
+        }
+        return BASE * 3 + strokeWidth / 2;
+    }
+    function getSecondAxle(element, parent) {
+        const strokeWidth = element.strokeWidth || STROKE_WIDTH;
+        if (element.isRoot) {
+            return BASE * 10 + strokeWidth / 2;
+        }
+        return BASE * 6 + strokeWidth / 2;
+    }
+    return {
+        getHeight(element) {
+            return NodeSpace.getNodeHeight(element);
+        },
+        getWidth(element) {
+            return NodeSpace.getNodeWidth(element);
+        },
+        getHorizontalGap(element, parent) {
+            const _layout = (parent && parent.layout) || getRootLayout(element);
+            const isHorizontal = isHorizontalLayout(_layout);
+            const strokeWidth = element.strokeWidth || STROKE_WIDTH;
+            if (isIndentedLayout(_layout)) {
+                return BASE * 4 + strokeWidth;
+            }
+            if (!isHorizontal) {
+                return getMainAxle(element, parent);
+            }
+            else {
+                return getSecondAxle(element, parent);
+            }
+        },
+        getVerticalGap(element, parent) {
+            const _layout = (parent && parent.layout) || getRootLayout(element);
+            if (isIndentedLayout(_layout)) {
+                return BASE;
+            }
+            const isHorizontal = isHorizontalLayout(_layout);
+            if (isHorizontal) {
+                return getMainAxle(element, parent);
+            }
+            else {
+                return getSecondAxle(element, parent);
+            }
+        },
+        getVerticalConnectingPosition(element, parent) {
+            if (element.shape === MindmapNodeShape.underline && parent && isHorizontalLogicLayout(parent.layout)) {
+                return ConnectingPosition.bottom;
+            }
+            return undefined;
+        },
+        getExtendHeight(node) {
+            return BASE * 6;
+        },
+        getIndentedCrossLevelGap() {
+            return BASE * 2;
+        }
+    };
+};
+
+class PlaitMindComponent extends MindNodeComponent {
+    ngOnInit() {
+        this.updateMindmap();
+        super.ngOnInit();
+    }
+    beforeContextChange(value) {
+        if (value.element !== this.element && this.initialized) {
+            this.updateMindmap(value.element);
+        }
+    }
+    updateMindmap(element = this.element) {
+        const mindLayoutType = element.layout || getDefaultMindmapLayout();
+        this.root = GlobalLayout.layout(element, getLayoutOptions(), mindLayoutType);
+        this.updateMindmapLocation(element);
+    }
+    updateMindmapLocation(element) {
+        const { x, y, hGap, vGap } = this.root;
+        const offsetX = x + hGap;
+        const offsetY = y + vGap;
+        depthFirstRecursion(this.root, node => {
+            node.x = node.x - offsetX + element.points[0][0];
+            node.y = node.y - offsetY + element.points[0][1];
+            ELEMENT_TO_NODE.set(node.origin, node);
+        });
+    }
+}
+PlaitMindComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitMindComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PlaitMindComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: PlaitMindComponent, selector: "plait-mind", usesInheritance: true, ngImport: i0, template: `
+        <plait-children [board]="board" [parent]="element" [effect]="effect" [parentG]="rootG"></plait-children>
+    `, isInline: true, dependencies: [{ kind: "component", type: i2.PlaitChildrenElement, selector: "plait-children", inputs: ["board", "parent", "effect", "parentG"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitMindComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'plait-mind',
+                    template: `
+        <plait-children [board]="board" [parent]="element" [effect]="effect" [parentG]="rootG"></plait-children>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+class MindModule {
+}
+MindModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+MindModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.5", ngImport: i0, type: MindModule, declarations: [PlaitMindComponent, MindNodeComponent], imports: [BrowserModule, RichtextModule, PlaitModule], exports: [PlaitMindComponent, MindNodeComponent] });
+MindModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindModule, imports: [BrowserModule, RichtextModule, PlaitModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [PlaitMindComponent, MindNodeComponent],
+                    imports: [BrowserModule, RichtextModule, PlaitModule],
+                    exports: [PlaitMindComponent, MindNodeComponent]
+                }]
+        }] });
+
+const DRAG_MOVE_BUFFER = 5;
+const withDnd = (board) => {
+    const { mousedown, mousemove, globalMouseup, keydown } = board;
+    let activeElement;
+    let startPoint;
+    let fakeDragNodeG;
+    let fakeDropNodeG;
+    let dropTarget = null;
+    board.mousedown = (event) => {
+        if (board.options.readonly || IS_TEXT_EDITABLE.get(board) || event.button === 2) {
+            mousedown(event);
+            return;
+        }
+        // 确认是否 hit 节点
+        const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+        const selectedElements = getSelectedElements(board);
+        board.children.forEach((value) => {
+            if (activeElement) {
+                return;
+            }
+            if (PlaitMind.isMind(value)) {
+                const mindmapComponent = ELEMENT_TO_COMPONENT.get(value);
+                const root = mindmapComponent?.root;
+                root.eachNode((node) => {
+                    if (activeElement) {
+                        return;
+                    }
+                    if (hitMindmapElement(board, point, node.origin) && !node.origin.isRoot && selectedElements.length <= 1) {
+                        activeElement = node.origin;
+                        startPoint = point;
+                    }
+                });
+            }
+        });
+        if (activeElement) {
+            event.preventDefault();
+        }
+        mousedown(event);
+    };
+    board.mousemove = (event) => {
+        if (!board.options.readonly && activeElement && startPoint) {
+            const endPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            const distance = distanceBetweenPointAndPoint(startPoint[0], startPoint[1], endPoint[0], endPoint[1]);
+            if (distance < DRAG_MOVE_BUFFER) {
+                return;
+            }
+            if (!isDragging(board)) {
+                setIsDragging(board, true);
+                fakeDragNodeG = createG();
+                fakeDragNodeG.classList.add('dragging', 'fake-node', 'plait-board-attached');
+                fakeDropNodeG = createG();
+                addActiveOnDragOrigin(activeElement);
+                PlaitBoard.getHost(board).appendChild(fakeDropNodeG);
+                PlaitBoard.getHost(board).appendChild(fakeDragNodeG);
+            }
+            else {
+                fakeDragNodeG?.childNodes.forEach(node => {
+                    node.remove();
+                });
+                fakeDropNodeG?.childNodes.forEach(node => {
+                    node.remove();
+                });
+            }
+            // fake dragging origin node
+            const offsetX = endPoint[0] - startPoint[0];
+            const offsetY = endPoint[1] - startPoint[1];
+            const activeComponent = MINDMAP_ELEMENT_TO_COMPONENT.get(activeElement);
+            const roughSVG = PlaitBoard.getRoughSVG(board);
+            const fakeDraggingNode = {
+                ...activeComponent.node,
+                children: [],
+                x: activeComponent.node.x + offsetX,
+                y: activeComponent.node.y + offsetY
+            };
+            const textRectangle = getRichtextRectangleByNode(activeComponent.node);
+            const fakeNodeG = drawRectangleNode(board, fakeDraggingNode);
+            const richtextG = activeComponent.richtextG?.cloneNode(true);
+            updateForeignObject(richtextG, textRectangle.width + BASE * 10, textRectangle.height, textRectangle.x + offsetX, textRectangle.y + offsetY);
+            fakeDragNodeG?.append(fakeNodeG);
+            fakeDragNodeG?.append(richtextG);
+            // drop position detect
+            const { x, y } = getRectangleByNode(fakeDraggingNode);
+            const detectCenterPoint = [x + textRectangle.width / 2, y + textRectangle.height / 2];
+            let detectResult = null;
+            board.children.forEach((value) => {
+                if (detectResult) {
+                    return;
+                }
+                if (PlaitMind.isMind(value)) {
+                    const mindmapComponent = ELEMENT_TO_COMPONENT.get(value);
+                    const root = mindmapComponent?.root;
+                    root.eachNode((node) => {
+                        if (detectResult) {
+                            return;
+                        }
+                        const directions = directionDetector(node, detectCenterPoint);
+                        if (directions) {
+                            detectResult = directionCorrector(node, directions);
+                        }
+                        dropTarget = null;
+                        if (detectResult && isValidTarget(activeComponent.node.origin, node.origin)) {
+                            dropTarget = { target: node.origin, detectResult: detectResult[0] };
+                        }
+                    });
+                }
+            });
+            if (dropTarget?.target) {
+                dropTarget = readjustmentDropTarget(dropTarget);
+                drawPlaceholderDropNodeG(dropTarget, roughSVG, fakeDropNodeG);
+            }
+        }
+        mousemove(event);
+    };
+    board.globalMouseup = (event) => {
+        if (!board.options.readonly && activeElement) {
+            if (dropTarget?.target) {
+                const activeComponent = MINDMAP_ELEMENT_TO_COMPONENT.get(activeElement);
+                const targetComponent = MINDMAP_ELEMENT_TO_COMPONENT.get(dropTarget.target);
+                let targetPath = PlaitBoard.findPath(board, targetComponent.element);
+                const mindmapElement = findUpElement(dropTarget.target).root;
+                const mindmapComponent = ELEMENT_TO_COMPONENT.get(mindmapElement);
+                const layout = MindmapQueries.getCorrectLayoutByElement(mindmapComponent?.root.origin);
+                targetPath = updatePathByLayoutAndDropTarget(targetPath, layout, dropTarget);
+                const originPath = PlaitBoard.findPath(board, activeComponent.element);
+                let newElement = { isCollapsed: false }, rightTargetPath = PlaitBoard.findPath(board, targetComponent.element);
+                if (isStandardLayout(layout)) {
+                    updateRightNodeCount(board, activeComponent, targetComponent, dropTarget.detectResult);
+                }
+                if (dropTarget.detectResult === 'right') {
+                    if (targetComponent.node.origin.isRoot) {
+                        targetPath = PlaitBoard.findPath(board, targetComponent.element);
+                        targetPath.push(0);
+                        const rightNodeCount = targetComponent.node.origin.rightNodeCount + 1;
+                        newElement = { isCollapsed: false, rightNodeCount };
+                    }
+                    Transforms.setNode(board, newElement, rightTargetPath);
+                }
+                Transforms.moveNode(board, originPath, targetPath);
+            }
+            if (isDragging(board)) {
+                removeActiveOnDragOrigin(activeElement);
+            }
+            setIsDragging(board, false);
+            activeElement = null;
+            fakeDragNodeG?.remove();
+            fakeDragNodeG = undefined;
+            fakeDropNodeG?.remove();
+            fakeDropNodeG = undefined;
+            dropTarget = null;
+        }
+        globalMouseup(event);
+    };
+    board.keydown = (event) => {
+        keydown(event);
+    };
+    return board;
+};
+const isValidTarget = (origin, target) => {
+    return origin !== target && !isChildElement(origin, target);
+};
+const addActiveOnDragOrigin = (activeElement, isOrigin = true) => {
+    const activeComponent = MINDMAP_ELEMENT_TO_COMPONENT.get(activeElement);
+    if (isOrigin) {
+        activeComponent.g.classList.add('dragging-origin');
+    }
+    else {
+        activeComponent.g.classList.add('dragging-child');
+    }
+    !activeElement.isCollapsed &&
+        activeElement.children.forEach(child => {
+            addActiveOnDragOrigin(child, false);
+        });
+};
+const removeActiveOnDragOrigin = (activeElement, isOrigin = true) => {
+    const activeComponent = MINDMAP_ELEMENT_TO_COMPONENT.get(activeElement);
+    if (isOrigin) {
+        activeComponent.g.classList.remove('dragging-origin');
+    }
+    else {
+        activeComponent.g.classList.remove('dragging-child');
+    }
+    !activeElement.isCollapsed &&
+        activeElement.children.forEach(child => {
+            removeActiveOnDragOrigin(child, false);
+        });
+};
+const updatePathByLayoutAndDropTarget = (targetPath, layout, dropTarget) => {
+    // 上下布局：左右是兄弟节点，上下是子节点
+    if (isVerticalLogicLayout(layout)) {
+        if (isTopLayout(layout) && dropTarget.detectResult === 'top') {
+            targetPath.push(dropTarget.target.children.length);
+        }
+        if (isBottomLayout(layout) && dropTarget.detectResult === 'bottom') {
+            targetPath.push(dropTarget.target.children.length);
+        }
+        // 如果是左，位置不变，右则插入到下一个兄弟节点
+        if (dropTarget.detectResult === 'right') {
+            targetPath = Path.next(targetPath);
+        }
+    }
+    // 水平布局/标准布局：上下是兄弟节点，左右是子节点
+    if (isHorizontalLogicLayout(layout)) {
+        if (dropTarget.detectResult === 'right') {
+            targetPath.push(dropTarget.target.children.length);
+        }
+        if (dropTarget.detectResult === 'left') {
+            targetPath.push(dropTarget.target.children.length);
+        }
+        // 如果是上，位置不变，下插入到下一个兄弟节点
+        if (dropTarget.detectResult === 'bottom') {
+            targetPath = Path.next(targetPath);
+        }
+    }
+    // 缩进布局：上下是兄弟节点，左右是子节点，但上（左上/右上），探测到上是子节点，下则位置不变，反之同理。
+    if (isIndentedLayout(layout)) {
+        if (isTopLayout(layout) && dropTarget.detectResult === 'top') {
+            targetPath = Path.next(targetPath);
+        }
+        if (isBottomLayout(layout) && dropTarget.detectResult === 'bottom') {
+            targetPath = Path.next(targetPath);
+        }
+        if (isLeftLayout(layout) && dropTarget.detectResult === 'left') {
+            targetPath.push(dropTarget.target.children.length);
+        }
+        if (isRightLayout(layout) && dropTarget.detectResult === 'right') {
+            targetPath.push(dropTarget.target.children.length);
+        }
+    }
+    return targetPath;
+};
+const updateRightNodeCount = (board, activeComponent, targetComponent, detectResult) => {
+    let rightNodeCount;
+    const mindmapElement = findUpElement(targetComponent.node.origin).root;
+    const mindmapComponent = ELEMENT_TO_COMPONENT.get(mindmapElement);
+    const activeIndex = mindmapComponent?.root.children.indexOf(activeComponent.node);
+    const targetIndex = mindmapComponent?.root.children.indexOf(targetComponent.node);
+    const isActiveOnRight = activeIndex !== -1 && activeIndex <= activeComponent.parent.origin.rightNodeCount - 1;
+    const isTargetOnRight = targetComponent.parent && targetIndex !== -1 && targetIndex <= targetComponent.parent.origin.rightNodeCount - 1;
+    const isBothOnRight = isActiveOnRight && isTargetOnRight;
+    const rootChildCount = mindmapComponent.root.children?.length;
+    const rootRightNodeCount = mindmapComponent?.root.origin.rightNodeCount;
+    if (!isBothOnRight) {
+        if (isActiveOnRight) {
+            rightNodeCount = rootChildCount < rootRightNodeCount ? rootChildCount - 1 : rootRightNodeCount - 1;
+            Transforms.setNode(board, { rightNodeCount }, PlaitBoard.findPath(board, activeComponent.parent.origin));
+        }
+        if (isTargetOnRight && detectResult !== 'right') {
+            rightNodeCount = rootChildCount < rootRightNodeCount ? rootRightNodeCount : rootRightNodeCount + 1;
+            Transforms.setNode(board, { rightNodeCount }, PlaitBoard.findPath(board, targetComponent.parent.origin));
+        }
+        //二级子节点拖动到根节点左侧
+        if (targetComponent.node.origin.isRoot && detectResult === 'left' && activeIndex === -1) {
+            rightNodeCount = rootChildCount;
+            Transforms.setNode(board, { rightNodeCount }, PlaitBoard.findPath(board, targetComponent.element));
+        }
+    }
+};
+const IS_DRAGGING = new WeakMap();
+const isDragging = (board) => {
+    return !!IS_DRAGGING.get(board);
+};
+const setIsDragging = (board, state) => {
+    IS_DRAGGING.set(board, state);
+};
+
+const buildClipboardData = (board, selectedElements) => {
+    let result = [];
+    const selectedMindmapNodes = Array.from(selectedElements, node => {
+        return MINDMAP_ELEMENT_TO_COMPONENT.get(node)?.node;
+    });
+    const nodesRectangle = getRectangleByElements(board, selectedElements, true);
+    selectedElements.forEach((node, index) => {
+        const nodeRectangle = getRectangleByNode(selectedMindmapNodes[index]);
+        result.push({
+            ...node,
+            points: [[nodeRectangle.x - nodesRectangle.x, nodeRectangle.y - nodesRectangle.y]]
+        });
+    });
+    return result;
+};
+const setClipboardData = (data, elements) => {
+    const stringObj = JSON.stringify(elements);
+    const encoded = window.btoa(encodeURIComponent(stringObj));
+    const text = elements.reduce((string, currentNode) => {
+        return string + extractNodesText(currentNode);
+    }, '');
+    data?.setData(`application/${CLIP_BOARD_FORMAT_KEY}`, encoded);
+    data?.setData(`text/plain`, text);
+};
+const getDataFromClipboard = (data) => {
+    const encoded = data?.getData(`application/${CLIP_BOARD_FORMAT_KEY}`);
+    let nodesData = [];
+    if (encoded) {
+        const decoded = decodeURIComponent(window.atob(encoded));
+        nodesData = JSON.parse(decoded);
+    }
+    return nodesData;
+};
+const insertClipboardData = (board, elements, targetPoint) => {
+    let newElement, path;
+    const selectedElements = getSelectedElements(board);
+    let newELements = [];
+    elements.forEach((item, index) => {
+        newElement = copyNewNode(item);
+        if (selectedElements.length === 1) {
+            if (item.isRoot) {
+                newElement = transformRootToNode(board, 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 (!item.isRoot) {
+                newElement = transformNodeToRoot(board, newElement);
+            }
+            path = [board.children.length];
+        }
+        newELements.push(newElement);
+        Transforms.insertNode(board, newElement, path);
+        return;
+    });
+    Transforms.setSelectionWithTemporaryElements(board, newELements);
+};
+const insertClipboardText = (board, parentElement, text, width, height) => {
+    const newElement = createMindElement(text, width, height, {});
+    const path = PlaitBoard.findPath(board, parentElement).concat((parentElement.children || []).length);
+    Transforms.insertNode(board, newElement, path);
+    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) => {
+        throw new Error('Not implement drawEmoji method error.');
+    };
+    return newBoard;
+};
+
+const withAbstract = (board) => {
+    const { mousedown, mousemove, mouseup } = board;
+    let activeAbstractElement;
+    let abstractHandlePosition;
+    let startPoint;
+    let newProperty;
+    board.mousedown = (event) => {
+        const activeAbstractElements = getSelectedElements(board).filter(element => AbstractNode.isAbstract(element));
+        const host = BOARD_TO_HOST.get(board);
+        const point = transformPoint(board, toPoint(event.x, event.y, host));
+        activeAbstractElement = activeAbstractElements.find(element => {
+            abstractHandlePosition = getHitAbstractHandle(board, element, point);
+            return abstractHandlePosition;
+        });
+        if (activeAbstractElement) {
+            startPoint = point;
+            return;
+        }
+        mousedown(event);
+    };
+    board.mousemove = (event) => {
+        getSelectedElements(board);
+        const host = BOARD_TO_HOST.get(board);
+        const endPoint = transformPoint(board, toPoint(event.x, event.y, host));
+        if (abstractHandlePosition && activeAbstractElement) {
+            const abstractComponent = PlaitElement.getComponent(activeAbstractElement);
+            const element = abstractComponent.element;
+            const nodeLayout = MindmapQueries.getCorrectLayoutByElement(activeAbstractElement);
+            const isHorizontal = isHorizontalLayout(nodeLayout);
+            const parentElement = MindElement.getParent(element);
+            let children = parentElement.children;
+            const parentLayout = MindmapQueries.getLayoutByElement(parentElement);
+            if (isStandardLayout(parentLayout)) {
+                const rightNodeCount = parentElement.rightNodeCount;
+                const { leftChildren, rightChildren } = separateChildren(parentElement);
+                if (activeAbstractElement.end < rightNodeCount) {
+                    children = rightChildren;
+                }
+                if (activeAbstractElement.start >= rightNodeCount) {
+                    children = leftChildren;
+                }
+            }
+            const resizingLocation = isHorizontal ? endPoint[1] : endPoint[0];
+            const parent = MindElement.getNode(parentElement);
+            const scope = getLocationScope(board, abstractHandlePosition, children, element, parent, isHorizontal);
+            const location = Math.min(scope.max, Math.max(scope.min, resizingLocation));
+            let locationIndex = findLocationLeftIndex(board, children, location, isHorizontal);
+            const isPropertyUnchanged = (abstractHandlePosition === AbstractHandlePosition.start &&
+                locationIndex + 1 === activeAbstractElement.start) ||
+                (abstractHandlePosition === AbstractHandlePosition.end && locationIndex === activeAbstractElement.end);
+            if (isPropertyUnchanged) {
+                newProperty = undefined;
+            }
+            else {
+                if (isStandardLayout(parent.layout)) {
+                    const rightNodeCount = parent.origin.rightNodeCount;
+                    let start = element.start;
+                    if (start >= rightNodeCount) {
+                        locationIndex += rightNodeCount;
+                    }
+                }
+                newProperty =
+                    abstractHandlePosition === AbstractHandlePosition.start ? { start: locationIndex + 1 } : { end: locationIndex };
+            }
+            abstractComponent.updateAbstractIncludedOutline(location, abstractHandlePosition);
+        }
+        mousemove(event);
+    };
+    board.mouseup = (event) => {
+        startPoint = undefined;
+        abstractHandlePosition = null;
+        if (activeAbstractElement) {
+            if (newProperty) {
+                const path = PlaitBoard.findPath(board, activeAbstractElement);
+                Transforms.setNode(board, newProperty, path);
+            }
+            else {
+                const abstractComponent = PlaitElement.getComponent(activeAbstractElement);
+                abstractComponent.updateAbstractIncludedOutline();
+            }
+        }
+        mouseup(event);
+    };
+    return board;
+};
+
+const withMind = (board) => {
+    const { drawElement, dblclick, keydown, insertFragment, setFragment, deleteFragment, isHitSelection, getRectangle, isMovable, isRecursion } = board;
+    board.drawElement = (context) => {
+        if (PlaitMind.isMind(context.element)) {
+            return PlaitMindComponent;
+        }
+        else if (MindElement.isMindElement(board, context.element)) {
+            return MindNodeComponent;
+        }
+        return drawElement(context);
+    };
+    board.getRectangle = element => {
+        if (MindElement.isMindElement(board, element)) {
+            return getRectangleByNode(MindElement.getNode(element));
+        }
+        return getRectangle(element);
+    };
+    board.isRecursion = element => {
+        if (MindElement.isMindElement(board, element) && element.isCollapsed) {
+            return false;
+        }
+        return isRecursion(element);
+    };
+    board.isHitSelection = (element, range) => {
+        if (MindElement.isMindElement(board, element) && board.selection) {
+            const client = getRectangleByNode(MindElement.getNode(element));
+            return RectangleClient.isIntersect(RectangleClient.toRectangleClient([range.anchor, range.focus]), client);
+        }
+        return isHitSelection(element, range);
+    };
+    board.isMovable = element => {
+        if (PlaitMind.isMind(element) && element.isRoot) {
+            return true;
+        }
+        return isMovable(element);
+    };
+    board.keydown = (event) => {
+        if (board.options.readonly || IS_TEXT_EDITABLE.get(board)) {
+            keydown(event);
+            return;
+        }
+        const selectedElements = getSelectedElements(board);
+        if (selectedElements.length) {
+            if (selectedElements.length === 1 &&
+                (event.key === 'Tab' ||
+                    (event.key === 'Enter' && !selectedElements[0].isRoot && !AbstractNode.isAbstract(selectedElements[0])))) {
+                event.preventDefault();
+                const selectedElement = selectedElements[0];
+                removeSelectedElement(board, selectedElement);
+                const selectedElementPath = PlaitBoard.findPath(board, selectedElement);
+                if (event.key === 'Tab') {
+                    if (selectedElement.isCollapsed) {
+                        const newElement = { isCollapsed: false };
+                        PlaitHistoryBoard.withoutSaving(board, () => {
+                            Transforms.setNode(board, newElement, selectedElementPath);
+                        });
+                    }
+                    insertMindElement(board, selectedElement, findNewChildNodePath(board, selectedElement));
+                }
+                else {
+                    if (shouldChangeRightNodeCount(selectedElement)) {
+                        changeRightNodeCount(board, selectedElementPath.slice(0, 1), 1);
+                    }
+                    insertMindElement(board, selectedElement, findNewSiblingNodePath(board, selectedElement));
+                }
+                return;
+            }
+            if (hotkeys.isDeleteBackward(event) || hotkeys.isDeleteForward(event)) {
+                event.preventDefault();
+                deleteSelectedELements(board, selectedElements);
+                let lastNode = null;
+                const elementGroup = filterChildElement(selectedElements);
+                const selectNode = elementGroup[0];
+                const MindNodeComponent = MINDMAP_ELEMENT_TO_COMPONENT.get(selectNode);
+                const nodeIndex = MindNodeComponent?.parent?.children.findIndex(item => item.origin.id === selectNode.id);
+                const isSameParent = elementGroup.every(element => {
+                    return findParentElement(element) && findParentElement(elementGroup[0]) === findParentElement(element);
+                });
+                if (isSameParent) {
+                    const childCount = MindNodeComponent.parent?.children.length - elementGroup.length;
+                    if (childCount === 0) {
+                        lastNode = MindNodeComponent?.parent;
+                    }
+                    else if (nodeIndex === 0) {
+                        lastNode = MindNodeComponent?.parent.children[elementGroup.length];
+                    }
+                    else if (nodeIndex > 0) {
+                        lastNode = MindNodeComponent?.parent.children[nodeIndex - 1];
+                    }
+                }
+                if (lastNode) {
+                    addSelectedElement(board, lastNode.origin);
+                }
+                return;
+            }
+            // auto enter edit status
+            if (!isVirtualKey(event)) {
+                event.preventDefault();
+                const selectedElement = selectedElements[0];
+                enterNodeEditing(selectedElement);
+                return;
+            }
+        }
+        if (board.selection && event.code === 'Space') {
+            if (selectedElements?.length) {
+                return;
+            }
+        }
+        keydown(event);
+    };
+    board.dblclick = (event) => {
+        if (board.options.readonly || IS_TEXT_EDITABLE.get(board)) {
+            dblclick(event);
+            return;
+        }
+        const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+        board.children
+            .filter(value => PlaitMind.isMind(value))
+            .forEach(mindmap => {
+            depthFirstRecursion(mindmap, node => {
+                if (!PlaitBoard.hasBeenTextEditing(board) && hitMindmapElement(board, point, node)) {
+                    enterNodeEditing(node);
+                }
+            });
+        });
+        if (PlaitBoard.hasBeenTextEditing(board)) {
+            return;
+        }
+        dblclick(event);
+    };
+    board.setFragment = (data) => {
+        const selectedElements = filterChildElement(getSelectedElements(board));
+        if (selectedElements.length) {
+            const elements = buildClipboardData(board, selectedElements);
+            setClipboardData(data, elements);
+            return;
+        }
+        setFragment(data);
+    };
+    board.insertFragment = (data, targetPoint) => {
+        if (board.options.readonly) {
+            insertFragment(data, targetPoint);
+            return;
+        }
+        const elements = getDataFromClipboard(data);
+        if (elements.length) {
+            insertClipboardData(board, elements, targetPoint || [0, 0]);
+        }
+        else {
+            const text = data?.getData(`text/plain`);
+            const { width, height } = getSizeByText(text, PlaitBoard.getHost(board).parentElement, TOPIC_DEFAULT_MAX_WORD_COUNT);
+            const selectedElements = getSelectedElements(board);
+            if (text && selectedElements.length === 1) {
+                insertClipboardText(board, selectedElements[0], text, width, height);
+            }
+        }
+        insertFragment(data, targetPoint);
+    };
+    board.deleteFragment = (data) => {
+        const selectedElements = getSelectedElements(board);
+        deleteSelectedELements(board, selectedElements);
+        deleteFragment(data);
+    };
+    return withEmoji(withAbstract(withDnd(board)));
+};
+
+class MindEmojiBaseComponent {
+    get nativeElement() {
+        return this.elementRef.nativeElement;
+    }
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.fontSize = 14;
+    }
+}
+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 });
+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
+            }] } });
+
+/*
+ * Public API Surface of mind
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, AbstractHandlePosition, BASE, COLORS, ELEMENT_TO_NODE, EXTEND_OFFSET, EXTEND_RADIUS, GRAY_COLOR, LayoutDirection, LayoutDirectionsMap, MAX_RADIUS, MINDMAP_ELEMENT_TO_COMPONENT, MINDMAP_KEY, MindElement, MindEmojiBaseComponent, MindModule, MindNodeComponent, MindTransforms, MindmapNode, MindmapNodeShape, MindmapQueries, 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, changeRightNodeCount, copyNewNode, correctLayoutByDirection, createMindElement, createMindmapData, deleteSelectedELements, directionCorrector, directionDetector, drawCurvePlaceholderDropNodeG, drawIndentNodeG, drawPlaceholderDropNodeG, drawStraightDropNodeG, extractNodesText, filterChildElement, findLastChild, findLocationLeftIndex, findParentElement, findUpElement, getAbstractHandleRectangle, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBranchDirectionsByLayouts, getChildrenCount, getDefaultMindmapLayout, getEmojiFontSize, getEmojisRectangle, getHitAbstractHandle, getHorizontalFakeY, getInCorrectLayoutDirection, getIndentedFakePoint, getLayoutReverseDirection, getLinkLineColorByMindmapElement, getLocationScope, getMindmapDirection, getNodeShapeByElement, getRectangleByNode, getRectangleByResizingLocation, getRootLayout, getRootLinkLineColorByMindmapElement, getStrokeByMindmapElement, hitMindmapElement, insertMindElement, isChildElement, isChildRight, isChildUp, isCorrectLayout, isMixedLayout, isVirtualKey, readjustmentDropTarget, separateChildren, shouldChangeRightNodeCount, transformNodeToRoot, transformRootToNode, withEmoji, withMind };
+//# sourceMappingURL=plait-mind.mjs.map