@plait/mind 0.3.0 → 0.4.0

package/fesm2015/plait-mind.mjs

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, NgModule, Directive, Input } from '@angular/core';
 import * as i2 from '@plait/core';
-import { PlaitBoard, PlaitNode, NODE_TO_PARENT, Path, distanceBetweenPointAndRectangle, RectangleClient, ELEMENT_TO_COMPONENT, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, PlaitElement, depthFirstRecursion, drawRoundRectangle, createG, getRectangleByElements, getSelectedElements, drawAbstractRoundRectangle, PlaitPluginElementComponent, PlaitPointerType, NODE_TO_INDEX, createText, IS_TEXT_EDITABLE, MERGING, transformPoint, toPoint, PlaitModule, distanceBetweenPointAndPoint, CLIP_BOARD_FORMAT_KEY, BOARD_TO_HOST, throttleRAF, updateForeignObject as updateForeignObject$1, BoardTransforms, Selection, removeSelectedElement, PlaitHistoryBoard, hotkeys } from '@plait/core';
-import { MindLayoutType, AbstractNode, getAbstractLayout, isIndentedLayout, isStandardLayout, isLeftLayout, isRightLayout, getNonAbstractChildren, isTopLayout, isVerticalLogicLayout, isHorizontalLogicLayout, isBottomLayout, isHorizontalLayout, getCorrectStartEnd, ConnectingPosition, GlobalLayout } from '@plait/layouts';
+import { distanceBetweenPointAndRectangle, RectangleClient, PlaitElement, PlaitBoard, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, depthFirstRecursion, Path, drawRoundRectangle, drawLinearPath, createG, PlaitNode, getRectangleByElements, getSelectedElements, NODE_TO_PARENT, drawAbstractRoundRectangle, PlaitPluginElementComponent, PlaitPointerType, NODE_TO_INDEX, createText, IS_TEXT_EDITABLE, MERGING, transformPoint, toPoint, PlaitModule, distanceBetweenPointAndPoint, CLIP_BOARD_FORMAT_KEY, isMainPointer, BOARD_TO_HOST, throttleRAF, updateForeignObject as updateForeignObject$1, BoardTransforms, Selection, removeSelectedElement, PlaitHistoryBoard, hotkeys } from '@plait/core';
+import { MindLayoutType, isIndentedLayout, getNonAbstractChildren, isStandardLayout, AbstractNode, isLeftLayout, isRightLayout, isTopLayout, isVerticalLogicLayout, isHorizontalLogicLayout, isBottomLayout, isHorizontalLayout, getCorrectStartEnd, getAbstractLayout, ConnectingPosition, GlobalLayout } from '@plait/layouts';
 import { getSizeByText, ROOT_DEFAULT_HEIGHT, TEXT_DEFAULT_HEIGHT, updateForeignObject, drawRichtext, createForeignObject, updateRichText, setFullSelectionAndFocus, getRichtextContentSize, hasEditableTarget, RichtextModule } from '@plait/richtext';
 import { fromEvent, Subject, timer } from 'rxjs';
 import { take, takeUntil, filter, debounceTime } from 'rxjs/operators';
 import { Node, Path as Path$1, Editor, Operation } from 'slate';
-import { pointsOnBezierCurves } from 'points-on-curve';
 import { isKeyHotkey } from 'is-hotkey';
+import { pointsOnBezierCurves } from 'points-on-curve';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
@@ -93,122 +93,310 @@ var MindPointerType;
     MindPointerType["mind"] = "mind";
 })(MindPointerType || (MindPointerType = {}));
 
-/**
- * get correctly layout：
- * 1. root is standard -> left or right
- * 2. correct layout by incorrect layout direction
- * @param element
- */
-const getCorrectLayoutByElement = (board, element) => {
-    const ancestors = MindElement.getAncestors(board, element);
-    ancestors.unshift(element);
-    const root = ancestors[ancestors.length - 1];
-    let rootLayout = getRootLayout(root);
-    if (PlaitMind.isMind(element)) {
-        return rootLayout;
-    }
+function getRectangleByNode(node) {
+    const x = node.x + node.hGap;
+    let y = node.y + node.vGap;
+    const width = node.width - node.hGap * 2;
+    const height = node.height - node.vGap * 2;
+    return {
+        x,
+        y,
+        width,
+        height
+    };
+}
+function getRectangleByElement(board, originPoint, element) {
+    const nodeRectangle = {
+        x: originPoint[0],
+        y: originPoint[1],
+        width: NodeSpace.getNodeWidth(board, element),
+        height: NodeSpace.getNodeHeight(board, element)
+    };
+    return nodeRectangle;
+}
+function isHitMindElement(board, point, element) {
     const node = MindElement.getNode(element);
-    let correctRootLayout = rootLayout;
-    if (rootLayout === MindLayoutType.standard) {
-        correctRootLayout = node.left ? MindLayoutType.left : MindLayoutType.right;
+    if (node && distanceBetweenPointAndRectangle(point[0], point[1], getRectangleByNode(node)) === 0) {
+        return true;
     }
-    let layout = null;
-    const elementWithLayout = ancestors.find(value => value.layout || AbstractNode.isAbstract(value));
-    if (elementWithLayout) {
-        if (AbstractNode.isAbstract(elementWithLayout)) {
-            const parent = MindElement.getParent(elementWithLayout);
-            const parentLayout = getCorrectLayoutByElement(board, parent);
-            layout = getAbstractLayout(parentLayout);
-        }
-        else {
-            layout = elementWithLayout === null || elementWithLayout === void 0 ? void 0 : elementWithLayout.layout;
-        }
+    else {
+        return false;
     }
-    if (layout === MindLayoutType.standard || !layout) {
-        return correctRootLayout;
+}
+
+function getEmojisWidthHeight(board, element) {
+    const options = board.getMindOptions();
+    const count = element.data.emojis.length;
+    const fontSize = getEmojiFontSize(element);
+    return {
+        width: fontSize * count + count * 2 * options.emojiPadding + (count - 1) * options.spaceBetweenEmojis,
+        height: element.height
+    };
+}
+function getEmojiFontSize(element) {
+    if (PlaitMind.isMind(element)) {
+        return 18 + 2;
     }
     else {
-        const incorrectDirection = getInCorrectLayoutDirection(correctRootLayout, layout);
-        if (incorrectDirection) {
-            return correctLayoutByDirection(layout, incorrectDirection);
-        }
-        else {
-            return layout;
-        }
+        return 14 + 2;
     }
+}
+
+function getEmojiRectangle(board, element) {
+    let { x, y } = getRectangleByNode(MindElement.getNode(element));
+    x = x + NodeSpace.getEmojiLeftSpace(board, element);
+    const { width, height } = getEmojisWidthHeight(board, element);
+    return {
+        x,
+        y,
+        width,
+        height
+    };
+}
+function getEmojiForeignRectangle(board, element) {
+    let { x, y } = getRectangleByNode(MindElement.getNode(element));
+    x = x + NodeSpace.getEmojiLeftSpace(board, element);
+    const { width, height } = getEmojisWidthHeight(board, element);
+    return {
+        x,
+        y,
+        width,
+        height: height + NodeSpace.getEmojiTopSpace(element) * 2
+    };
+}
+const isHitEmojis = (board, element, point) => {
+    return RectangleClient.isHit(RectangleClient.toRectangleClient([point, point]), getEmojiRectangle(board, element));
 };
 
-const getBranchLayouts = (board, element) => {
-    const layouts = [];
-    if (element.layout) {
-        // TODO: getCorrectLayoutByElement 含有递归操作，getBranchLayouts 本身也有递归操作，有待优化
-        layouts.unshift(getCorrectLayoutByElement(board, element));
-    }
-    let parent = MindElement.findParent(element);
-    while (parent) {
-        if (parent.layout) {
-            layouts.unshift(parent.layout);
-        }
-        parent = MindElement.findParent(parent);
+function enterNodeEditing(element) {
+    const component = PlaitElement.getComponent(element);
+    component.startEditText(false, false);
+}
+
+const adjustRootToNode = (board, node) => {
+    const newNode = Object.assign({}, node);
+    delete newNode.isRoot;
+    delete newNode.rightNodeCount;
+    delete newNode.type;
+    const text = Node.string(node.data.topic.children[0]) || ' ';
+    const { width, height } = getSizeByText(text, PlaitBoard.getViewportContainer(board), TOPIC_DEFAULT_MAX_WORD_COUNT);
+    newNode.width = Math.max(width, NODE_MIN_WIDTH);
+    newNode.height = height;
+    if (newNode.layout === MindLayoutType.standard) {
+        delete newNode.layout;
     }
-    return layouts;
+    return newNode;
 };
-
-const getAvailableSubLayoutsByElement = (board, element) => {
-    const parentElement = MindElement.findParent(element);
-    if (parentElement) {
-        const branchLayouts = getBranchLayouts(board, parentElement);
-        if (branchLayouts[0] === MindLayoutType.standard) {
-            const node = MindElement.getNode(element);
-            branchLayouts[0] = node.left ? MindLayoutType.left : MindLayoutType.right;
-        }
-        const currentLayoutDirections = getBranchDirectionsByLayouts(branchLayouts);
-        let availableSubLayouts = getAvailableSubLayoutsByLayoutDirections(currentLayoutDirections);
-        const parentLayout = [branchLayouts[branchLayouts.length - 1]];
-        const parentDirections = getBranchDirectionsByLayouts(parentLayout);
-        const parentAvailableSubLayouts = getAvailableSubLayoutsByLayoutDirections(parentDirections);
-        availableSubLayouts = availableSubLayouts.filter(layout => parentAvailableSubLayouts.some(parentAvailableSubLayout => parentAvailableSubLayout === layout));
-        return availableSubLayouts;
+const adjustAbstractToNode = (node) => {
+    const newNode = Object.assign({}, node);
+    delete newNode.start;
+    delete newNode.end;
+    return newNode;
+};
+const adjustNodeToRoot = (board, node) => {
+    var _a;
+    const newElement = Object.assign({}, node);
+    let text = Node.string(newElement.data.topic);
+    if (!text) {
+        text = '思维导图';
+        newElement.data.topic = { children: [{ text }] };
     }
-    return undefined;
+    newElement === null || newElement === void 0 ? true : delete newElement.strokeColor;
+    newElement === null || newElement === void 0 ? true : delete newElement.fill;
+    newElement === null || newElement === void 0 ? true : delete newElement.shape;
+    newElement === null || newElement === void 0 ? true : 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 Object.assign(Object.assign({}, newElement), { layout: (_a = newElement.layout) !== null && _a !== void 0 ? _a : MindLayoutType.right, isCollapsed: false, isRoot: true, type: 'mindmap' });
 };
 
-const getBranchDirectionsByLayouts = (branchLayouts) => {
-    const branchDirections = [];
-    branchLayouts.forEach(l => {
-        const directions = LayoutDirectionsMap[l];
-        directions.forEach(d => {
-            if (!branchDirections.includes(d) && !branchDirections.includes(getLayoutReverseDirection(d))) {
-                branchDirections.push(d);
-            }
-        });
-    });
-    return branchDirections;
-};
-const isCorrectLayout = (root, layout) => {
-    const rootLayout = root.layout || getDefaultLayout();
-    return !getInCorrectLayoutDirection(rootLayout, layout);
+const createEmptyMind = (board, point) => {
+    const element = createMindElement('', 0, 0, { layout: MindLayoutType.right });
+    const rootElement = adjustNodeToRoot(board, element);
+    rootElement.points = [point];
+    return rootElement;
 };
-const isMixedLayout = (parentLayout, layout) => {
-    return (!isIndentedLayout(parentLayout) && isIndentedLayout(layout)) || (isIndentedLayout(parentLayout) && !isIndentedLayout(layout));
+const createDefaultMind = (point, rightNodeCount, layout) => {
+    const root = createMindElement('思维导图', 72, ROOT_DEFAULT_HEIGHT, { shape: MindElementShape.roundRectangle, layout });
+    root.rightNodeCount = rightNodeCount;
+    root.isRoot = true;
+    root.type = 'mindmap';
+    root.points = [point];
+    const children = [1, 1, 1].map(() => {
+        return createMindElement('新建节点', 56, TEXT_DEFAULT_HEIGHT, { shape: MindElementShape.roundRectangle });
+    });
+    root.children = children;
+    return root;
 };
-const getInCorrectLayoutDirection = (rootLayout, layout) => {
-    const directions = LayoutDirectionsMap[rootLayout];
-    const subLayoutDirections = LayoutDirectionsMap[layout];
-    if (!subLayoutDirections) {
-        throw new Error(`unexpected layout: ${layout} on correct layout`);
+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;
     }
-    return subLayoutDirections.find(d => directions.includes(getLayoutReverseDirection(d)));
+    if (options.strokeColor) {
+        newElement.strokeColor = options.strokeColor;
+    }
+    if (!isNullOrUndefined(options.strokeWidth)) {
+        newElement.strokeWidth = options.strokeWidth;
+    }
+    if (options.shape) {
+        newElement.shape = options.shape;
+    }
+    if (options.layout) {
+        newElement.layout = options.layout;
+    }
+    if (options.branchColor) {
+        newElement.branchColor = options.branchColor;
+    }
+    if (!isNullOrUndefined(options.branchWidth)) {
+        newElement.branchWidth = options.branchWidth;
+    }
+    return newElement;
 };
-const correctLayoutByDirection = (layout, direction) => {
-    const isHorizontal = direction === LayoutDirection.left || direction === LayoutDirection.right ? true : false;
-    let inverseDirectionLayout = MindLayoutType.standard;
-    switch (layout) {
-        case MindLayoutType.left:
-            inverseDirectionLayout = MindLayoutType.right;
-            break;
-        case MindLayoutType.right:
-            inverseDirectionLayout = MindLayoutType.left;
+
+const getChildrenCount = (element) => {
+    const count = element.children.reduce((p, c) => {
+        return p + getChildrenCount(c);
+    }, 0);
+    return count + element.children.length;
+};
+const isChildElement = (origin, child) => {
+    let parent = MindElement.findParent(child);
+    while (parent) {
+        if (parent === origin) {
+            return true;
+        }
+        parent = MindElement.findParent(parent);
+    }
+    return false;
+};
+const getFirstLevelElement = (elements) => {
+    let result = [];
+    elements.forEach(element => {
+        const isChild = elements.some(node => {
+            return isChildElement(node, element);
+        });
+        if (!isChild) {
+            result.push(element);
+        }
+    });
+    return result;
+};
+const isChildRight = (node, child) => {
+    return node.x < child.x;
+};
+const isChildUp = (node, child) => {
+    return node.y > child.y;
+};
+const copyNewNode = (node) => {
+    const newNode = Object.assign({}, node);
+    newNode.id = idCreator();
+    newNode.children = [];
+    for (const childNode of node.children) {
+        newNode.children.push(copyNewNode(childNode));
+    }
+    return newNode;
+};
+const extractNodesText = (node) => {
+    let str = '';
+    if (node) {
+        str += Node.string(node.data.topic.children[0]) + ' ';
+        for (const childNode of node.children) {
+            str += extractNodesText(childNode);
+        }
+    }
+    return str;
+};
+// layoutLevel 用来表示插入兄弟节点还是子节点
+const insertMindElement = (board, inheritNode, path) => {
+    let fill, strokeColor, strokeWidth, shape = MindElementShape.roundRectangle;
+    if (!inheritNode.isRoot) {
+        fill = inheritNode.fill;
+        strokeColor = inheritNode.strokeColor;
+        strokeWidth = inheritNode.strokeWidth;
+    }
+    shape = inheritNode.shape;
+    const newElement = createMindElement('', NODE_MIN_WIDTH, TEXT_DEFAULT_HEIGHT, { fill, strokeColor, strokeWidth, shape });
+    Transforms.insertNode(board, newElement, path);
+    clearSelectedElement(board);
+    addSelectedElement(board, newElement);
+    setTimeout(() => {
+        enterNodeEditing(newElement);
+    });
+};
+const findLastChild = (child) => {
+    let result = child;
+    while (result.children.length !== 0) {
+        result = result.children[result.children.length - 1];
+    }
+    return result;
+};
+const divideElementByParent = (elements) => {
+    const abstractIncludedGroups = [];
+    const parentElements = [];
+    for (let i = 0; i < elements.length; i++) {
+        const parent = MindElement.getParent(elements[i]);
+        const parentIndex = parentElements.indexOf(parent);
+        if (parentIndex === -1) {
+            parentElements.push(parent);
+            abstractIncludedGroups.push([elements[i]]);
+        }
+        else {
+            abstractIncludedGroups[parentIndex].push(elements[i]);
+        }
+    }
+    return { parentElements, abstractIncludedGroups };
+};
+
+const getBranchDirectionsByLayouts = (branchLayouts) => {
+    const branchDirections = [];
+    branchLayouts.forEach(l => {
+        const directions = LayoutDirectionsMap[l];
+        directions.forEach(d => {
+            if (!branchDirections.includes(d) && !branchDirections.includes(getLayoutReverseDirection(d))) {
+                branchDirections.push(d);
+            }
+        });
+    });
+    return branchDirections;
+};
+const isCorrectLayout = (root, layout) => {
+    const rootLayout = root.layout || getDefaultLayout();
+    return !getInCorrectLayoutDirection(rootLayout, layout);
+};
+const isMixedLayout = (parentLayout, layout) => {
+    return (!isIndentedLayout(parentLayout) && isIndentedLayout(layout)) || (isIndentedLayout(parentLayout) && !isIndentedLayout(layout));
+};
+const getInCorrectLayoutDirection = (rootLayout, layout) => {
+    const directions = LayoutDirectionsMap[rootLayout];
+    const subLayoutDirections = LayoutDirectionsMap[layout];
+    if (!subLayoutDirections) {
+        throw new Error(`unexpected layout: ${layout} on correct layout`);
+    }
+    return subLayoutDirections.find(d => directions.includes(getLayoutReverseDirection(d)));
+};
+const correctLayoutByDirection = (layout, direction) => {
+    const isHorizontal = direction === LayoutDirection.left || direction === LayoutDirection.right ? true : false;
+    let inverseDirectionLayout = MindLayoutType.standard;
+    switch (layout) {
+        case MindLayoutType.left:
+            inverseDirectionLayout = MindLayoutType.right;
+            break;
+        case MindLayoutType.right:
+            inverseDirectionLayout = MindLayoutType.left;
             break;
         case MindLayoutType.downward:
             inverseDirectionLayout = MindLayoutType.upward;
@@ -276,523 +464,44 @@ const getRootLayout = (root) => {
     return root.layout || getDefaultLayout();
 };
 
-const getLayoutByElement = (element) => {
-    const layout = element.layout;
-    if (layout) {
-        return layout;
-    }
-    const parent = !PlaitMind.isMind(element) && MindElement.getParent(element);
-    if (AbstractNode.isAbstract(element) && parent) {
-        return getAbstractLayout(getLayoutByElement(parent));
+const getAvailableProperty = (board, element, propertyKey) => {
+    const ancestors = MindElement.getAncestors(board, element);
+    ancestors.unshift(element);
+    const ancestor = ancestors.find(value => value[propertyKey]);
+    if (ancestor) {
+        return ancestor[propertyKey];
     }
-    if (parent) {
-        return getLayoutByElement(parent);
+    else {
+        return undefined;
     }
-    return getDefaultLayout();
 };
 
-const MindQueries = {
-    getAvailableSubLayoutsByElement,
-    getBranchLayouts,
-    getLayoutByElement,
-    getCorrectLayoutByElement
+/**
+ * Processing of branch color, width, style, etc. of the mind node
+ */
+const getBranchColorByMindElement = (board, element) => {
+    const branchColor = getAvailableProperty(board, element, 'branchColor');
+    return branchColor || getDefaultBranchColor(board, element);
 };
-
-const PlaitMind = {
-    isMind: (value) => {
-        return value.type === 'mindmap';
+const getBranchShapeByMindElement = (board, element) => {
+    const branchShape = getAvailableProperty(board, element, 'branchShape');
+    return branchShape || BranchShape.bight;
+};
+const getBranchWidthByMindElement = (board, element) => {
+    const branchWidth = getAvailableProperty(board, element, 'branchWidth');
+    return branchWidth || BRANCH_WIDTH;
+};
+const getAbstractBranchWidth = (board, element) => {
+    if (!isNullOrUndefined(element.branchWidth)) {
+        return element.branchWidth;
     }
+    return DefaultAbstractNodeStyle.branchWidth;
 };
-const MindElement = {
-    hasLayout(value, layout) {
-        const _layout = MindQueries.getLayoutByElement(value);
-        return _layout === layout;
-    },
-    isIndentedLayout(value) {
-        const _layout = MindQueries.getLayoutByElement(value);
-        return isIndentedLayout(_layout);
-    },
-    isMindElement(board, element) {
-        const path = PlaitBoard.findPath(board, element);
-        const rootElement = PlaitNode.get(board, path.slice(0, 1));
-        if (PlaitMind.isMind(rootElement)) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    },
-    getParent(node) {
-        if (PlaitMind.isMind(node)) {
-            throw new Error('mind root node can not get parent');
-        }
-        const parent = NODE_TO_PARENT.get(node);
-        return parent;
-    },
-    findParent(node) {
-        if (PlaitMind.isMind(node)) {
-            return undefined;
-        }
-        const parent = NODE_TO_PARENT.get(node);
-        return parent;
-    },
-    getRoot(board, element) {
-        const path = PlaitBoard.findPath(board, element);
-        return PlaitNode.get(board, path.slice(0, 1));
-    },
-    getAncestors(board, element) {
-        const path = PlaitBoard.findPath(board, element);
-        const parents = [];
-        for (const p of Path.ancestors(path, { reverse: true })) {
-            const n = PlaitNode.get(board, p);
-            if (n && !PlaitBoard.isBoard(n)) {
-                parents.push(n);
-            }
-        }
-        return parents;
-    },
-    getNode(element) {
-        const node = ELEMENT_TO_NODE.get(element);
-        if (!node) {
-            throw new Error(`can not get node from ${JSON.stringify(element)}`);
-        }
-        return node;
-    },
-    findParentNode(element) {
-        if (PlaitMind.isMind(element)) {
-            return undefined;
-        }
-        const parent = MindElement.getParent(element);
-        return MindElement.getNode(parent);
-    },
-    hasEmojis(element) {
-        if (element.data.emojis) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    },
-    getEmojis(element) {
-        return element.data.emojis;
+const getAbstractBranchColor = (board, element) => {
+    if (element.branchColor) {
+        return element.branchColor;
     }
-};
-var MindElementShape;
-(function (MindElementShape) {
-    MindElementShape["roundRectangle"] = "round-rectangle";
-    MindElementShape["underline"] = "underline";
-})(MindElementShape || (MindElementShape = {}));
-
-function getEmojisWidthHeight(board, element) {
-    const options = board.getMindOptions();
-    const count = element.data.emojis.length;
-    const fontSize = getEmojiFontSize(element);
-    return {
-        width: fontSize * count + count * 2 * options.emojiPadding + (count - 1) * options.spaceBetweenEmojis,
-        height: element.height
-    };
-}
-function getEmojiFontSize(element) {
-    if (PlaitMind.isMind(element)) {
-        return 18 + 2;
-    }
-    else {
-        return 14 + 2;
-    }
-}
-
-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 = (board, element) => {
-    const isMind = PlaitMind.isMind(element);
-    const nodeAndText = isMind ? RootDefaultSpace.horizontal.nodeAndText : NodeDefaultSpace.horizontal.nodeAndText;
-    return nodeAndText;
-};
-const getVerticalSpaceBetweenNodeAndText = (element) => {
-    const isMind = PlaitMind.isMind(element);
-    const nodeAndText = isMind ? RootDefaultSpace.vertical.nodeAndText : NodeDefaultSpace.vertical.nodeAndText;
-    return nodeAndText;
-};
-const getSpaceEmojiAndText = (element) => {
-    const isMind = PlaitMind.isMind(element);
-    const emojiAndText = isMind ? RootDefaultSpace.horizontal.emojiAndText : NodeDefaultSpace.horizontal.emojiAndText;
-    return emojiAndText;
-};
-const NodeSpace = {
-    getNodeWidth(board, element) {
-        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
-        if (MindElement.hasEmojis(element)) {
-            return (NodeSpace.getEmojiLeftSpace(board, element) +
-                getEmojisWidthHeight(board, element).width +
-                getSpaceEmojiAndText(element) +
-                element.width +
-                nodeAndText);
-        }
-        return nodeAndText + element.width + nodeAndText;
-    },
-    getNodeHeight(board, element) {
-        const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
-        return nodeAndText + element.height + nodeAndText;
-    },
-    getTextLeftSpace(board, element) {
-        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
-        if (MindElement.hasEmojis(element)) {
-            return NodeSpace.getEmojiLeftSpace(board, element) + getEmojisWidthHeight(board, element).width + getSpaceEmojiAndText(element);
-        }
-        else {
-            return nodeAndText;
-        }
-    },
-    getTextTopSpace(element) {
-        const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
-        return nodeAndText;
-    },
-    getEmojiLeftSpace(board, element) {
-        const options = board.getMindOptions();
-        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
-        return nodeAndText - options.emojiPadding;
-    },
-    getEmojiTopSpace(element) {
-        const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
-        return nodeAndText;
-    }
-};
-
-function getRectangleByNode(node) {
-    const x = node.x + node.hGap;
-    let y = node.y + node.vGap;
-    const width = node.width - node.hGap * 2;
-    const height = node.height - node.vGap * 2;
-    return {
-        x,
-        y,
-        width,
-        height
-    };
-}
-function getRectangleByElement(board, originPoint, element) {
-    const nodeRectangle = {
-        x: originPoint[0],
-        y: originPoint[1],
-        width: NodeSpace.getNodeWidth(board, element),
-        height: NodeSpace.getNodeHeight(board, element)
-    };
-    return nodeRectangle;
-}
-function isHitMindElement(board, point, element) {
-    const node = MindElement.getNode(element);
-    if (node && distanceBetweenPointAndRectangle(point[0], point[1], getRectangleByNode(node)) === 0) {
-        return true;
-    }
-    else {
-        return false;
-    }
-}
-
-function getEmojiRectangle(board, element) {
-    let { x, y } = getRectangleByNode(MindElement.getNode(element));
-    x = x + NodeSpace.getEmojiLeftSpace(board, element);
-    const { width, height } = getEmojisWidthHeight(board, element);
-    return {
-        x,
-        y,
-        width,
-        height
-    };
-}
-function getEmojiForeignRectangle(board, element) {
-    let { x, y } = getRectangleByNode(MindElement.getNode(element));
-    x = x + NodeSpace.getEmojiLeftSpace(board, element);
-    const { width, height } = getEmojisWidthHeight(board, element);
-    return {
-        x,
-        y,
-        width,
-        height: height + NodeSpace.getEmojiTopSpace(element) * 2
-    };
-}
-const isHitEmojis = (board, element, point) => {
-    return RectangleClient.isHit(RectangleClient.toRectangleClient([point, point]), getEmojiRectangle(board, element));
-};
-
-function getTopicRectangleByNode(board, node) {
-    let nodeRectangle = getRectangleByNode(node);
-    return getTopicRectangleByElement(board, nodeRectangle, node.origin);
-}
-function getTopicRectangleByElement(board, nodeRectangle, element) {
-    const x = nodeRectangle.x + NodeSpace.getTextLeftSpace(board, element);
-    const y = nodeRectangle.y + NodeSpace.getTextTopSpace(element);
-    const width = Math.ceil(element.width);
-    const height = Math.ceil(element.height);
-    return { height, width, x, y };
-}
-
-function enterNodeEditing(element) {
-    const component = ELEMENT_TO_COMPONENT.get(element);
-    component.startEditText(false, false);
-}
-
-const adjustRootToNode = (board, node) => {
-    const newNode = Object.assign({}, node);
-    delete newNode.isRoot;
-    delete newNode.rightNodeCount;
-    delete newNode.type;
-    const text = Node.string(node.data.topic.children[0]) || ' ';
-    const { width, height } = getSizeByText(text, PlaitBoard.getViewportContainer(board), TOPIC_DEFAULT_MAX_WORD_COUNT);
-    newNode.width = Math.max(width, NODE_MIN_WIDTH);
-    newNode.height = height;
-    if (newNode.layout === MindLayoutType.standard) {
-        delete newNode.layout;
-    }
-    return newNode;
-};
-const adjustAbstractToNode = (node) => {
-    const newNode = Object.assign({}, node);
-    delete newNode.start;
-    delete newNode.end;
-    return newNode;
-};
-const adjustNodeToRoot = (board, node) => {
-    var _a;
-    const newElement = Object.assign({}, node);
-    let text = Node.string(newElement.data.topic);
-    if (!text) {
-        text = '思维导图';
-        newElement.data.topic = { children: [{ text }] };
-    }
-    newElement === null || newElement === void 0 ? true : delete newElement.strokeColor;
-    newElement === null || newElement === void 0 ? true : delete newElement.fill;
-    newElement === null || newElement === void 0 ? true : delete newElement.shape;
-    newElement === null || newElement === void 0 ? true : 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 Object.assign(Object.assign({}, newElement), { layout: (_a = newElement.layout) !== null && _a !== void 0 ? _a : MindLayoutType.right, isCollapsed: false, isRoot: true, type: 'mindmap' });
-};
-
-const createEmptyMind = (board, point) => {
-    const element = createMindElement('', 0, 0, { layout: MindLayoutType.right });
-    const rootElement = adjustNodeToRoot(board, element);
-    rootElement.points = [point];
-    return rootElement;
-};
-const createDefaultMind = (point, rightNodeCount, layout) => {
-    const root = createMindElement('思维导图', 72, ROOT_DEFAULT_HEIGHT, { shape: MindElementShape.roundRectangle, layout });
-    root.rightNodeCount = rightNodeCount;
-    root.isRoot = true;
-    root.type = 'mindmap';
-    root.points = [point];
-    const children = [1, 1, 1].map(() => {
-        return createMindElement('新建节点', 56, TEXT_DEFAULT_HEIGHT, { shape: MindElementShape.roundRectangle });
-    });
-    root.children = children;
-    return root;
-};
-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.branchColor) {
-        newElement.branchColor = options.branchColor;
-    }
-    if (!isNullOrUndefined(options.branchWidth)) {
-        newElement.branchWidth = options.branchWidth;
-    }
-    return newElement;
-};
-
-const getChildrenCount = (element) => {
-    const count = element.children.reduce((p, c) => {
-        return p + getChildrenCount(c);
-    }, 0);
-    return count + element.children.length;
-};
-const isChildElement = (origin, child) => {
-    let parent = MindElement.findParent(child);
-    while (parent) {
-        if (parent === origin) {
-            return true;
-        }
-        parent = MindElement.findParent(parent);
-    }
-    return false;
-};
-const getFirstLevelElement = (elements) => {
-    let result = [];
-    elements.forEach(element => {
-        const isChild = elements.some(node => {
-            return isChildElement(node, element);
-        });
-        if (!isChild) {
-            result.push(element);
-        }
-    });
-    return result;
-};
-const isChildRight = (node, child) => {
-    return node.x < child.x;
-};
-const isChildUp = (node, child) => {
-    return node.y > child.y;
-};
-const copyNewNode = (node) => {
-    const newNode = Object.assign({}, node);
-    newNode.id = idCreator();
-    newNode.children = [];
-    for (const childNode of node.children) {
-        newNode.children.push(copyNewNode(childNode));
-    }
-    return newNode;
-};
-const extractNodesText = (node) => {
-    let str = '';
-    if (node) {
-        str += Node.string(node.data.topic.children[0]) + ' ';
-        for (const childNode of node.children) {
-            str += extractNodesText(childNode);
-        }
-    }
-    return str;
-};
-const changeRightNodeCount = (board, parentPath, changeNumber) => {
-    const _rightNodeCount = board.children[parentPath[0]].rightNodeCount;
-    Transforms.setNode(board, {
-        rightNodeCount: changeNumber >= 0
-            ? _rightNodeCount + changeNumber
-            : _rightNodeCount + changeNumber < 0
-                ? 0
-                : _rightNodeCount + changeNumber
-    }, parentPath);
-};
-const isInRightBranchOfStandardLayout = (selectedElement) => {
-    const parentElement = MindElement.findParent(selectedElement);
-    if (parentElement) {
-        const nodeIndex = parentElement.children.findIndex(item => item.id === selectedElement.id);
-        if (parentElement.isRoot &&
-            getRootLayout(parentElement) === MindLayoutType.standard &&
-            parentElement.rightNodeCount &&
-            nodeIndex <= parentElement.rightNodeCount - 1) {
-            return true;
-        }
-    }
-    return false;
-};
-// layoutLevel 用来表示插入兄弟节点还是子节点
-const insertMindElement = (board, inheritNode, path) => {
-    let fill, strokeColor, strokeWidth, shape = MindElementShape.roundRectangle;
-    if (!inheritNode.isRoot) {
-        fill = inheritNode.fill;
-        strokeColor = inheritNode.strokeColor;
-        strokeWidth = inheritNode.strokeWidth;
-    }
-    shape = inheritNode.shape;
-    const newElement = createMindElement('', NODE_MIN_WIDTH, TEXT_DEFAULT_HEIGHT, { fill, strokeColor, strokeWidth, shape });
-    Transforms.insertNode(board, newElement, path);
-    clearSelectedElement(board);
-    addSelectedElement(board, newElement);
-    setTimeout(() => {
-        enterNodeEditing(newElement);
-    });
-};
-const findLastChild = (child) => {
-    let result = child;
-    while (result.children.length !== 0) {
-        result = result.children[result.children.length - 1];
-    }
-    return result;
-};
-const divideElementByParent = (elements) => {
-    const abstractIncludedGroups = [];
-    const parentElements = [];
-    for (let i = 0; i < elements.length; i++) {
-        const parent = MindElement.getParent(elements[i]);
-        const parentIndex = parentElements.indexOf(parent);
-        if (parentIndex === -1) {
-            parentElements.push(parent);
-            abstractIncludedGroups.push([elements[i]]);
-        }
-        else {
-            abstractIncludedGroups[parentIndex].push(elements[i]);
-        }
-    }
-    return { parentElements, abstractIncludedGroups };
-};
-
-const getAvailableProperty = (board, element, propertyKey) => {
-    const ancestors = MindElement.getAncestors(board, element);
-    ancestors.unshift(element);
-    const ancestor = ancestors.find(value => value[propertyKey]);
-    if (ancestor) {
-        return ancestor[propertyKey];
-    }
-    else {
-        return undefined;
-    }
-};
-
-/**
- * Processing of branch color, width, style, etc. of the mind node
- */
-const getBranchColorByMindElement = (board, element) => {
-    const branchColor = getAvailableProperty(board, element, 'branchColor');
-    return branchColor || getDefaultBranchColor(board, element);
-};
-const getBranchWidthByMindElement = (board, element) => {
-    const branchWidth = getAvailableProperty(board, element, 'branchWidth');
-    return branchWidth || BRANCH_WIDTH;
-};
-const getAbstractBranchWidth = (board, element) => {
-    if (!isNullOrUndefined(element.branchWidth)) {
-        return element.branchWidth;
-    }
-    return DefaultAbstractNodeStyle.branchWidth;
-};
-const getAbstractBranchColor = (board, element) => {
-    if (element.branchColor) {
-        return element.branchColor;
-    }
-    return DefaultAbstractNodeStyle.branchColor;
+    return DefaultAbstractNodeStyle.branchColor;
 };
 const getNextBranchColor = (root) => {
     const index = root.children.length;
@@ -870,13 +579,32 @@ const isDragging = (board) => {
 const setIsDragging = (board, state) => {
     IS_DRAGGING.set(board, state);
 };
+const hasPreviousOrNextOfDropPath = (parent, target, dropPath) => {
+    const children = getNonAbstractChildren(parent);
+    let hasPreviousNode = dropPath[dropPath.length - 1] !== 0;
+    let hasNextNode = dropPath[dropPath.length - 1] !== ((children === null || children === void 0 ? void 0 : children.length) || 0);
+    if (PlaitMind.isMind(parent) && isStandardLayout(getRootLayout(parent))) {
+        const dropStandardRightBottom = target === parent.children[parent.rightNodeCount - 1] && dropPath[dropPath.length - 1] === parent.rightNodeCount;
+        const dropStandardLeftTop = target === parent.children[parent.rightNodeCount] && dropPath[dropPath.length - 1] === parent.rightNodeCount;
+        if (dropStandardRightBottom) {
+            hasPreviousNode = true;
+            hasNextNode = false;
+        }
+        if (dropStandardLeftTop) {
+            hasPreviousNode = false;
+            hasNextNode = true;
+        }
+    }
+    if (parent.isCollapsed) {
+        hasNextNode = false;
+        hasPreviousNode = false;
+    }
+    return {
+        hasPreviousNode,
+        hasNextNode
+    };
+};
 
-/**
- *
- * @param targetNode
- * @param centerPoint
- * @returns DetectResult[] | null
- */
 const directionCorrector = (board, node, detectResults) => {
     if (!node.origin.isRoot && !AbstractNode.isAbstract(node.origin)) {
         const parentLayout = MindQueries.getCorrectLayoutByElement(board, node === null || node === void 0 ? void 0 : node.parent.origin);
@@ -1276,9 +1004,57 @@ const transformPlacement = (placement, direction) => {
             placement[1] = VerticalPlacement.bottom;
         }
     }
-};
+};
+
+function drawIndentedLink(board, node, child, defaultStroke = null, needDrawUnderline = true, defaultStrokeWidth) {
+    const branchShape = getBranchShapeByMindElement(board, node.origin);
+    const branchWidth = defaultStrokeWidth || getBranchWidthByMindElement(board, child.origin);
+    const branchColor = defaultStroke || getBranchColorByMindElement(board, child.origin);
+    const isUnderlineShape = getShapeByElement(board, child.origin) === MindElementShape.underline;
+    let beginX, beginY, endX, endY, beginNode = node, endNode = child;
+    const beginRectangle = getRectangleByNode(beginNode);
+    const endRectangle = getRectangleByNode(endNode);
+    beginX = beginNode.x + beginNode.width / 2;
+    beginY = isChildUp(node, child) ? beginRectangle.y : beginRectangle.y + beginRectangle.height;
+    endX = node.left ? endNode.x + endNode.hGap + endRectangle.width : endNode.x + endNode.hGap;
+    endY = isUnderlineShape ? endNode.y + endNode.height - endNode.vGap : endNode.y + endNode.height / 2;
+    //根据位置，设置正负参数
+    let plusMinus = isChildUp(node, child) ? (node.left ? [-1, -1] : [1, -1]) : node.left ? [-1, 1] : [1, 1];
+    const layout = MindQueries.getCorrectLayoutByElement(board, node.origin);
+    if (beginNode.origin.isRoot) {
+        if (layout === MindLayoutType.leftBottomIndented || layout === MindLayoutType.rightBottomIndented) {
+            beginY += branchWidth;
+        }
+        if (layout === MindLayoutType.leftTopIndented || layout === MindLayoutType.rightTopIndented) {
+            beginY -= branchWidth;
+        }
+    }
+    let curve = [
+        [beginX, beginY],
+        [beginX, beginY],
+        [beginX, beginY],
+        [beginX, endY - (endNode.hGap * 3 * plusMinus[1]) / 5],
+        [beginX, endY - (endNode.hGap * plusMinus[1]) / 5],
+        [beginX + (endNode.hGap * plusMinus[0]) / 4, endY],
+        [beginX + (endNode.hGap * plusMinus[0] * 3) / 5, endY],
+        isUnderlineShape && needDrawUnderline ? [endX + (endNode.width - endNode.hGap * 2) * plusMinus[0], endY] : [endX, endY],
+        isUnderlineShape && needDrawUnderline ? [endX + (endNode.width - endNode.hGap * 2) * plusMinus[0], endY] : [endX, endY],
+        isUnderlineShape && needDrawUnderline ? [endX + (endNode.width - endNode.hGap * 2) * plusMinus[0], endY] : [endX, endY]
+    ];
+    if (branchShape === BranchShape.polyline) {
+        const polylinePoints = [
+            [beginX, beginY],
+            [beginX, endY],
+            [endX, endY]
+        ];
+        return drawLinearPath(polylinePoints, { stroke: branchColor, strokeWidth: branchWidth });
+    }
+    const points = pointsOnBezierCurves(curve);
+    return PlaitBoard.getRoughSVG(board).curve(points, { stroke: branchColor, strokeWidth: branchWidth });
+}
 
-function drawLogicLink(board, node, parent, isHorizontal, defaultStroke = null, defaultStrokeWidth) {
+function drawLogicLink(board, parent, node, isHorizontal, defaultStroke = null, defaultStrokeWidth) {
+    const branchShape = getBranchShapeByMindElement(board, parent.origin);
     const branchColor = defaultStroke || getBranchColorByMindElement(board, node.origin);
     const branchWidth = defaultStrokeWidth || getBranchWidthByMindElement(board, node.origin);
     const hasStraightLine = !parent.origin.isRoot;
@@ -1322,9 +1098,27 @@ function drawLogicLink(board, node, parent, isHorizontal, defaultStroke = null,
     const underlineEnd = moveXOfPoint(endPoint, nodeClient.width, linkDirection);
     const underline = hasUnderlineShape && isHorizontal ? [underlineEnd, underlineEnd, underlineEnd] : [];
     const points = pointsOnBezierCurves([...straightLine, ...curve, ...underline]);
+    if (branchShape === BranchShape.polyline) {
+        const buffer = 8;
+        const movePoint = moveXOfPoint(beginPoint2, buffer, linkDirection);
+        const polylinePoints = [
+            ...straightLine,
+            movePoint,
+            isHorizontal ? [movePoint[0], endPoint[1]] : [endPoint[0], movePoint[1]],
+            endPoint,
+            ...underline
+        ];
+        return drawLinearPath(polylinePoints, { stroke: branchColor, strokeWidth: branchWidth });
+    }
     return PlaitBoard.getRoughSVG(board).curve(points, { stroke: branchColor, strokeWidth: branchWidth });
 }
 
+function drawLink(board, parentNode, node, isHorizontal, needDrawUnderline, defaultStroke, defaultStrokeWidth) {
+    return MindElement.isIndentedLayout(parentNode.origin)
+        ? drawIndentedLink(board, parentNode, node, defaultStroke, needDrawUnderline, defaultStrokeWidth)
+        : drawLogicLink(board, parentNode, node, isHorizontal, defaultStroke, defaultStrokeWidth);
+}
+
 const drawFakeDragNode = (board, activeComponent, offsetX, offsetY) => {
     var _a;
     const dragFakeNodeG = createG();
@@ -1333,17 +1127,17 @@ const drawFakeDragNode = (board, activeComponent, offsetX, offsetY) => {
     const textRectangle = getTopicRectangleByNode(board, activeComponent.node);
     const fakeNodeG = drawRoundRectangleByNode(board, fakeDraggingNode);
     const richtextG = (_a = activeComponent.richtextG) === null || _a === void 0 ? void 0 : _a.cloneNode(true);
-    updateForeignObject(richtextG, textRectangle.width + BASE * 10, textRectangle.height, textRectangle.x + offsetX, textRectangle.y + offsetY);
+    updateForeignObject(richtextG, textRectangle.width, textRectangle.height, textRectangle.x + offsetX, textRectangle.y + offsetY);
     dragFakeNodeG === null || dragFakeNodeG === void 0 ? void 0 : dragFakeNodeG.append(fakeNodeG);
     dragFakeNodeG === null || dragFakeNodeG === void 0 ? void 0 : dragFakeNodeG.append(richtextG);
     return dragFakeNodeG;
 };
-const drawFakeDropNodeByPath = (board, target, path) => {
+const drawFakeDropNode = (board, target, path) => {
     const fakeDropNodeG = createG();
     const parent = PlaitNode.get(board, Path.parent(path));
     const layout = MindQueries.getLayoutByElement(parent);
     const isHorizontal = isHorizontalLayout(layout);
-    const { hasNextNode, hasPreviousNode } = getPreviousAndNextByPath(parent, target, path);
+    const { hasNextNode, hasPreviousNode } = hasPreviousOrNextOfDropPath(parent, target, path);
     const width = 30;
     const height = 12;
     let fakeNode, centerPoint, basicNode, linkDirection;
@@ -1430,38 +1224,11 @@ const drawFakeDropNodeByPath = (board, target, path) => {
         fill: PRIMARY_COLOR,
         fillStyle: 'solid'
     });
-    const link = MindElement.isIndentedLayout(parent)
-        ? drawIndentedLink(board, MindElement.getNode(parent), fakeNode, PRIMARY_COLOR, false, STROKE_WIDTH)
-        : drawLogicLink(board, fakeNode, MindElement.getNode(parent), isHorizontal, PRIMARY_COLOR, STROKE_WIDTH);
+    const link = drawLink(board, MindElement.getNode(parent), fakeNode, isHorizontal, false, PRIMARY_COLOR, STROKE_WIDTH);
     fakeDropNodeG === null || fakeDropNodeG === void 0 ? void 0 : fakeDropNodeG.appendChild(link);
     fakeDropNodeG === null || fakeDropNodeG === void 0 ? void 0 : fakeDropNodeG.appendChild(fakeRectangleG);
     return fakeDropNodeG;
 };
-const getPreviousAndNextByPath = (parent, target, path) => {
-    const children = getNonAbstractChildren(parent);
-    let hasPreviousNode = path[path.length - 1] !== 0;
-    let hasNextNode = path[path.length - 1] !== ((children === null || children === void 0 ? void 0 : children.length) || 0);
-    if (PlaitMind.isMind(parent) && isStandardLayout(getRootLayout(parent))) {
-        const dropStandardRightBottom = target === parent.children[parent.rightNodeCount - 1] && path[path.length - 1] === parent.rightNodeCount;
-        const dropStandardLeftTop = target === parent.children[parent.rightNodeCount] && path[path.length - 1] === parent.rightNodeCount;
-        if (dropStandardRightBottom) {
-            hasPreviousNode = true;
-            hasNextNode = false;
-        }
-        if (dropStandardLeftTop) {
-            hasPreviousNode = false;
-            hasNextNode = true;
-        }
-    }
-    if (parent.isCollapsed) {
-        hasNextNode = false;
-        hasPreviousNode = false;
-    }
-    return {
-        hasPreviousNode,
-        hasNextNode
-    };
-};
 
 const separateChildren = (parentElement) => {
     const rightNodeCount = parentElement.rightNodeCount;
@@ -1581,271 +1348,551 @@ isExtendPreviousNode = true, effectedAbstracts = new Map()) => {
             newProperties.end = newProperties.end + step;
         });
     }
-    if (!hasPreviousNode) {
-        return effectedAbstracts;
+    if (!hasPreviousNode) {
+        return effectedAbstracts;
+    }
+    const selectedElement = PlaitNode.get(board, Path.previous(path));
+    const correspondingAbstract = getCorrespondingAbstract(selectedElement);
+    const isDragToLast = !isExtendPreviousNode && correspondingAbstract && correspondingAbstract.end === path[path.length - 1] - 1;
+    if (correspondingAbstract && !isDragToLast) {
+        let newProperties = effectedAbstracts.get(correspondingAbstract);
+        if (!newProperties) {
+            newProperties = { start: 0, end: 0 };
+            effectedAbstracts.set(correspondingAbstract, newProperties);
+        }
+        newProperties.end = newProperties.end + step;
+    }
+    return effectedAbstracts;
+};
+const deleteElementHandleAbstract = (board, deletableElements, effectedAbstracts = new Map()) => {
+    deletableElements.forEach(node => {
+        if (!PlaitMind.isMind(node)) {
+            const behindAbstracts = getBehindAbstracts(node).filter(abstract => !deletableElements.includes(abstract));
+            if (behindAbstracts.length) {
+                behindAbstracts.forEach(abstract => {
+                    let newProperties = effectedAbstracts.get(abstract);
+                    if (!newProperties) {
+                        newProperties = { start: 0, end: 0 };
+                        effectedAbstracts.set(abstract, newProperties);
+                    }
+                    newProperties.start = newProperties.start - 1;
+                    newProperties.end = newProperties.end - 1;
+                });
+            }
+            const correspondingAbstract = getCorrespondingAbstract(node);
+            if (correspondingAbstract && !deletableElements.includes(correspondingAbstract)) {
+                let newProperties = effectedAbstracts.get(correspondingAbstract);
+                if (!newProperties) {
+                    newProperties = { start: 0, end: 0 };
+                    effectedAbstracts.set(correspondingAbstract, newProperties);
+                }
+                newProperties.end = newProperties.end - 1;
+            }
+        }
+    });
+    return effectedAbstracts;
+};
+
+var AbstractHandlePosition;
+(function (AbstractHandlePosition) {
+    AbstractHandlePosition["start"] = "start";
+    AbstractHandlePosition["end"] = "end";
+})(AbstractHandlePosition || (AbstractHandlePosition = {}));
+var AbstractResizeState;
+(function (AbstractResizeState) {
+    AbstractResizeState["start"] = "start";
+    AbstractResizeState["resizing"] = "resizing";
+    AbstractResizeState["end"] = "end";
+})(AbstractResizeState || (AbstractResizeState = {}));
+
+const getRectangleByResizingLocation = (abstractRectangle, location, activeHandlePosition, isHorizontal) => {
+    if (isHorizontal) {
+        if (activeHandlePosition === AbstractHandlePosition.start) {
+            return Object.assign(Object.assign({}, abstractRectangle), { y: location, height: abstractRectangle.height + abstractRectangle.y - location });
+        }
+        else {
+            return Object.assign(Object.assign({}, abstractRectangle), { height: location - abstractRectangle.y });
+        }
+    }
+    else {
+        if (activeHandlePosition === AbstractHandlePosition.start) {
+            return Object.assign(Object.assign({}, abstractRectangle), { x: location, width: abstractRectangle.width + abstractRectangle.x - location });
+        }
+        else {
+            return Object.assign(Object.assign({}, abstractRectangle), { width: location - abstractRectangle.x });
+        }
+    }
+};
+const getLocationScope = (board, handlePosition, parentChildren, element, parent, isHorizontal) => {
+    const node = MindElement.getNode(element);
+    const { start, end } = getCorrectStartEnd(node.origin, parent);
+    const startNode = parentChildren[start];
+    const endNode = parentChildren[end];
+    if (handlePosition === AbstractHandlePosition.start) {
+        const abstractNode = parentChildren.filter(child => AbstractNode.isAbstract(child) && child.end < element.start);
+        let minNode;
+        if (abstractNode.length) {
+            const index = abstractNode
+                .map(node => {
+                const { end } = getCorrectStartEnd(node, parent);
+                return end;
+            })
+                .sort((a, b) => b - a)[0];
+            minNode = parentChildren[index + 1];
+        }
+        else {
+            minNode = parentChildren[0];
+        }
+        const minNodeRectangle = getRectangleByElements(board, [minNode], true);
+        const endNodeRectangle = getRectangleByElements(board, [endNode], false);
+        if (isHorizontal) {
+            return {
+                max: endNodeRectangle.y - ABSTRACT_INCLUDED_OUTLINE_OFFSET,
+                min: minNodeRectangle.y - ABSTRACT_INCLUDED_OUTLINE_OFFSET
+            };
+        }
+        else {
+            return {
+                max: endNodeRectangle.x - ABSTRACT_INCLUDED_OUTLINE_OFFSET,
+                min: minNodeRectangle.x - ABSTRACT_INCLUDED_OUTLINE_OFFSET
+            };
+        }
+    }
+    else {
+        const abstractNode = parentChildren.filter(child => AbstractNode.isAbstract(child) && child.start > element.end);
+        let maxNode;
+        if (abstractNode.length) {
+            const index = abstractNode
+                .map(node => {
+                const { start } = getCorrectStartEnd(node, parent);
+                return start;
+            })
+                .sort((a, b) => a - b)[0];
+            maxNode = parentChildren[index - 1];
+        }
+        else {
+            const children = parentChildren.filter(child => !AbstractNode.isAbstract(child));
+            maxNode = parentChildren[children.length - 1];
+        }
+        const maxNodeRectangle = getRectangleByElements(board, [maxNode], true);
+        const startNodeRectangle = getRectangleByElements(board, [startNode], false);
+        if (isHorizontal) {
+            return {
+                max: maxNodeRectangle.y + maxNodeRectangle.height + ABSTRACT_INCLUDED_OUTLINE_OFFSET,
+                min: startNodeRectangle.y + startNodeRectangle.height + ABSTRACT_INCLUDED_OUTLINE_OFFSET
+            };
+        }
+        else {
+            return {
+                max: maxNodeRectangle.x + maxNodeRectangle.width + ABSTRACT_INCLUDED_OUTLINE_OFFSET,
+                min: startNodeRectangle.x + startNodeRectangle.width + ABSTRACT_INCLUDED_OUTLINE_OFFSET
+            };
+        }
+    }
+};
+const getHitAbstractHandle = (board, element, point) => {
+    const nodeLayout = MindQueries.getCorrectLayoutByElement(board, element);
+    const isHorizontal = isHorizontalLayout(nodeLayout);
+    const parentElement = MindElement.getParent(element);
+    const includedElements = parentElement.children.slice(element.start, element.end + 1);
+    let abstractRectangle = getRectangleByElements(board, includedElements, true);
+    abstractRectangle = RectangleClient.getOutlineRectangle(abstractRectangle, -ABSTRACT_INCLUDED_OUTLINE_OFFSET);
+    const startHandleRec = getAbstractHandleRectangle(abstractRectangle, isHorizontal, AbstractHandlePosition.start);
+    const endHandleRec = getAbstractHandleRectangle(abstractRectangle, isHorizontal, AbstractHandlePosition.end);
+    const pointRec = RectangleClient.toRectangleClient([point, point]);
+    if (RectangleClient.isHit(pointRec, startHandleRec))
+        return AbstractHandlePosition.start;
+    if (RectangleClient.isHit(pointRec, endHandleRec))
+        return AbstractHandlePosition.end;
+    return undefined;
+};
+const getAbstractHandleRectangle = (rectangle, isHorizontal, position) => {
+    let result;
+    if (position === AbstractHandlePosition.start) {
+        const location = isHorizontal ? rectangle.y : rectangle.x;
+        result = getRectangleByResizingLocation(rectangle, location + ABSTRACT_HANDLE_MASK_WIDTH / 2, AbstractHandlePosition.end, isHorizontal);
+        result = getRectangleByResizingLocation(result, location - ABSTRACT_HANDLE_MASK_WIDTH / 2, position, isHorizontal);
+    }
+    else {
+        const location = isHorizontal ? rectangle.y + rectangle.height : rectangle.x + rectangle.width;
+        result = getRectangleByResizingLocation(rectangle, location - ABSTRACT_HANDLE_MASK_WIDTH / 2, AbstractHandlePosition.start, isHorizontal);
+        result = getRectangleByResizingLocation(result, location + ABSTRACT_HANDLE_MASK_WIDTH / 2, position, isHorizontal);
+    }
+    return result;
+};
+function findLocationLeftIndex(board, parentChildren, location, isHorizontal) {
+    const children = parentChildren.filter(child => {
+        return !AbstractNode.isAbstract(child);
+    });
+    const recArray = children.map(child => {
+        return getRectangleByElements(board, [child], false);
+    });
+    const firstRec = getRectangleByElements(board, [children[0]], true);
+    const fakeLeftRec = {
+        x: firstRec.x - firstRec.width,
+        y: firstRec.y - firstRec.height,
+        width: firstRec.width,
+        height: firstRec.height
+    };
+    const lastRec = getRectangleByElements(board, [children[children.length - 1]], true);
+    const fakeRightRec = {
+        x: lastRec.x + lastRec.width,
+        y: lastRec.y + lastRec.height,
+        width: lastRec.width,
+        height: lastRec.height
+    };
+    recArray.push(fakeRightRec);
+    recArray.unshift(fakeLeftRec);
+    for (let i = 0; i < recArray.length - 1; i++) {
+        const recXOrY = isHorizontal ? recArray[i].y : recArray[i].x;
+        const recWidthOrHeight = isHorizontal ? recArray[i].height : recArray[i].width;
+        if (location >= recXOrY + recWidthOrHeight / 2 &&
+            location <= recArray[i + 1][isHorizontal ? 'y' : 'x'] + recArray[i + 1][isHorizontal ? 'height' : 'width'] / 2) {
+            return i - 1;
+        }
+    }
+    return 0;
+}
+function handleTouchedAbstract(board, touchedAbstract, endPoint) {
+    let touchedHandle;
+    const abstract = getSelectedElements(board)
+        .filter(element => AbstractNode.isAbstract(element))
+        .find(element => {
+        touchedHandle = getHitAbstractHandle(board, element, endPoint);
+        return touchedHandle;
+    });
+    if (touchedAbstract === abstract) {
+        return touchedAbstract;
+    }
+    if (touchedAbstract) {
+        const component = PlaitElement.getComponent(touchedAbstract);
+        component.updateAbstractIncludedOutline();
+        touchedAbstract = undefined;
+    }
+    if (abstract) {
+        touchedAbstract = abstract;
+        const component = PlaitElement.getComponent(touchedAbstract);
+        component.updateAbstractIncludedOutline(touchedHandle);
     }
-    const selectedElement = PlaitNode.get(board, Path.previous(path));
-    const correspondingAbstract = getCorrespondingAbstract(selectedElement);
-    const isDragToLast = !isExtendPreviousNode && correspondingAbstract && correspondingAbstract.end === path[path.length - 1] - 1;
-    if (correspondingAbstract && !isDragToLast) {
-        let newProperties = effectedAbstracts.get(correspondingAbstract);
-        if (!newProperties) {
-            newProperties = { start: 0, end: 0 };
-            effectedAbstracts.set(correspondingAbstract, newProperties);
+    return touchedAbstract;
+}
+
+const isInRightBranchOfStandardLayout = (selectedElement) => {
+    const parentElement = MindElement.findParent(selectedElement);
+    if (parentElement) {
+        const nodeIndex = parentElement.children.findIndex(item => item.id === selectedElement.id);
+        if (parentElement.isRoot &&
+            getRootLayout(parentElement) === MindLayoutType.standard &&
+            parentElement.rightNodeCount &&
+            nodeIndex <= parentElement.rightNodeCount - 1) {
+            return true;
         }
-        newProperties.end = newProperties.end + step;
     }
-    return effectedAbstracts;
+    return false;
 };
-const deleteElementHandleAbstract = (board, deletableElements, effectedAbstracts = new Map()) => {
-    deletableElements.forEach(node => {
-        if (!PlaitMind.isMind(node)) {
-            const behindAbstracts = getBehindAbstracts(node).filter(abstract => !deletableElements.includes(abstract));
-            if (behindAbstracts.length) {
-                behindAbstracts.forEach(abstract => {
-                    let newProperties = effectedAbstracts.get(abstract);
-                    if (!newProperties) {
-                        newProperties = { start: 0, end: 0 };
-                        effectedAbstracts.set(abstract, newProperties);
-                    }
-                    newProperties.start = newProperties.start - 1;
-                    newProperties.end = newProperties.end - 1;
-                });
+const insertElementHandleRightNodeCount = (board, path, insertCount, effectedRightNodeCount = []) => {
+    let index = effectedRightNodeCount.findIndex(ref => Path.equals(ref.path, path));
+    const mind = PlaitNode.get(board, path);
+    if (index === -1) {
+        effectedRightNodeCount.push({ path, rightNodeCount: mind.rightNodeCount + insertCount });
+    }
+    else {
+        effectedRightNodeCount[index].rightNodeCount += insertCount;
+    }
+    return effectedRightNodeCount;
+};
+const deleteElementsHandleRightNodeCount = (board, deletableElements, effectedRightNodeCount = []) => {
+    deletableElements.forEach(element => {
+        if (isInRightBranchOfStandardLayout(element)) {
+            const mind = MindElement.getParent(element);
+            const path = PlaitBoard.findPath(board, mind);
+            let index = effectedRightNodeCount.findIndex(ref => Path.equals(ref.path, path));
+            if (index === -1) {
+                effectedRightNodeCount.push({ path, rightNodeCount: mind.rightNodeCount - 1 });
             }
-            const correspondingAbstract = getCorrespondingAbstract(node);
-            if (correspondingAbstract && !deletableElements.includes(correspondingAbstract)) {
-                let newProperties = effectedAbstracts.get(correspondingAbstract);
-                if (!newProperties) {
-                    newProperties = { start: 0, end: 0 };
-                    effectedAbstracts.set(correspondingAbstract, newProperties);
-                }
-                newProperties.end = newProperties.end - 1;
+            else {
+                effectedRightNodeCount[index].rightNodeCount -= 1;
             }
         }
     });
-    return effectedAbstracts;
+    return effectedRightNodeCount;
 };
 
-var AbstractHandlePosition;
-(function (AbstractHandlePosition) {
-    AbstractHandlePosition["start"] = "start";
-    AbstractHandlePosition["end"] = "end";
-})(AbstractHandlePosition || (AbstractHandlePosition = {}));
-var AbstractResizeState;
-(function (AbstractResizeState) {
-    AbstractResizeState["start"] = "start";
-    AbstractResizeState["resizing"] = "resizing";
-    AbstractResizeState["end"] = "end";
-})(AbstractResizeState || (AbstractResizeState = {}));
-
-const getRectangleByResizingLocation = (abstractRectangle, location, activeHandlePosition, isHorizontal) => {
-    if (isHorizontal) {
-        if (activeHandlePosition === AbstractHandlePosition.start) {
-            return Object.assign(Object.assign({}, abstractRectangle), { y: location, height: abstractRectangle.height + abstractRectangle.y - location });
+/**
+ * get correctly layout：
+ * 1. root is standard -> left or right
+ * 2. correct layout by incorrect layout direction
+ * @param element
+ */
+const getCorrectLayoutByElement = (board, element) => {
+    const ancestors = MindElement.getAncestors(board, element);
+    ancestors.unshift(element);
+    const root = ancestors[ancestors.length - 1];
+    let rootLayout = getRootLayout(root);
+    if (PlaitMind.isMind(element)) {
+        return rootLayout;
+    }
+    const node = MindElement.getNode(element);
+    let correctRootLayout = rootLayout;
+    if (rootLayout === MindLayoutType.standard) {
+        correctRootLayout = node.left ? MindLayoutType.left : MindLayoutType.right;
+    }
+    let layout = null;
+    const elementWithLayout = ancestors.find(value => value.layout || AbstractNode.isAbstract(value));
+    if (elementWithLayout) {
+        if (AbstractNode.isAbstract(elementWithLayout)) {
+            const parent = MindElement.getParent(elementWithLayout);
+            const parentLayout = getCorrectLayoutByElement(board, parent);
+            layout = getAbstractLayout(parentLayout);
         }
         else {
-            return Object.assign(Object.assign({}, abstractRectangle), { height: location - abstractRectangle.y });
+            layout = elementWithLayout === null || elementWithLayout === void 0 ? void 0 : elementWithLayout.layout;
         }
     }
+    if (layout === MindLayoutType.standard || !layout) {
+        return correctRootLayout;
+    }
     else {
-        if (activeHandlePosition === AbstractHandlePosition.start) {
-            return Object.assign(Object.assign({}, abstractRectangle), { x: location, width: abstractRectangle.width + abstractRectangle.x - location });
+        const incorrectDirection = getInCorrectLayoutDirection(correctRootLayout, layout);
+        if (incorrectDirection) {
+            return correctLayoutByDirection(layout, incorrectDirection);
         }
         else {
-            return Object.assign(Object.assign({}, abstractRectangle), { width: location - abstractRectangle.x });
+            return layout;
         }
     }
 };
-const getLocationScope = (board, handlePosition, parentChildren, element, parent, isHorizontal) => {
-    const node = MindElement.getNode(element);
-    const { start, end } = getCorrectStartEnd(node.origin, parent);
-    const startNode = parentChildren[start];
-    const endNode = parentChildren[end];
-    if (handlePosition === AbstractHandlePosition.start) {
-        const abstractNode = parentChildren.filter(child => AbstractNode.isAbstract(child) && child.end < element.start);
-        let minNode;
-        if (abstractNode.length) {
-            const index = abstractNode
-                .map(node => {
-                const { end } = getCorrectStartEnd(node, parent);
-                return end;
-            })
-                .sort((a, b) => b - a)[0];
-            minNode = parentChildren[index + 1];
+
+const getBranchLayouts = (board, element) => {
+    const layouts = [];
+    if (element.layout) {
+        // TODO: getCorrectLayoutByElement 含有递归操作，getBranchLayouts 本身也有递归操作，有待优化
+        layouts.unshift(getCorrectLayoutByElement(board, element));
+    }
+    let parent = MindElement.findParent(element);
+    while (parent) {
+        if (parent.layout) {
+            layouts.unshift(parent.layout);
         }
-        else {
-            minNode = parentChildren[0];
+        parent = MindElement.findParent(parent);
+    }
+    return layouts;
+};
+
+const getAvailableSubLayoutsByElement = (board, element) => {
+    const parentElement = MindElement.findParent(element);
+    if (parentElement) {
+        const branchLayouts = getBranchLayouts(board, parentElement);
+        if (branchLayouts[0] === MindLayoutType.standard) {
+            const node = MindElement.getNode(element);
+            branchLayouts[0] = node.left ? MindLayoutType.left : MindLayoutType.right;
         }
-        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
-            };
+        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;
+};
+
+const getLayoutByElement = (element) => {
+    const layout = element.layout;
+    if (layout) {
+        return layout;
+    }
+    const parent = !PlaitMind.isMind(element) && MindElement.getParent(element);
+    if (AbstractNode.isAbstract(element) && parent) {
+        return getAbstractLayout(getLayoutByElement(parent));
+    }
+    if (parent) {
+        return getLayoutByElement(parent);
+    }
+    return getDefaultLayout();
+};
+
+const MindQueries = {
+    getAvailableSubLayoutsByElement,
+    getBranchLayouts,
+    getLayoutByElement,
+    getCorrectLayoutByElement
+};
+
+const PlaitMind = {
+    isMind: (value) => {
+        return value.type === 'mindmap';
+    }
+};
+const MindElement = {
+    hasLayout(value, layout) {
+        const _layout = MindQueries.getLayoutByElement(value);
+        return _layout === layout;
+    },
+    isIndentedLayout(value) {
+        const _layout = MindQueries.getLayoutByElement(value);
+        return isIndentedLayout(_layout);
+    },
+    isMindElement(board, element) {
+        const path = PlaitBoard.findPath(board, element);
+        const rootElement = PlaitNode.get(board, path.slice(0, 1));
+        if (PlaitMind.isMind(rootElement)) {
+            return true;
         }
         else {
-            return {
-                max: endNodeRectangle.x - ABSTRACT_INCLUDED_OUTLINE_OFFSET,
-                min: minNodeRectangle.x - ABSTRACT_INCLUDED_OUTLINE_OFFSET
-            };
+            return false;
         }
-    }
-    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];
+    },
+    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;
+    },
+    findParent(node) {
+        if (PlaitMind.isMind(node)) {
+            return undefined;
+        }
+        const parent = NODE_TO_PARENT.get(node);
+        return parent;
+    },
+    getRoot(board, element) {
+        const path = PlaitBoard.findPath(board, element);
+        return PlaitNode.get(board, path.slice(0, 1));
+    },
+    getAncestors(board, element) {
+        const path = PlaitBoard.findPath(board, element);
+        const parents = [];
+        for (const p of Path.ancestors(path, { reverse: true })) {
+            const n = PlaitNode.get(board, p);
+            if (n && !PlaitBoard.isBoard(n)) {
+                parents.push(n);
+            }
         }
-        else {
-            const children = parentChildren.filter(child => !AbstractNode.isAbstract(child));
-            maxNode = parentChildren[children.length - 1];
+        return parents;
+    },
+    getNode(element) {
+        const node = ELEMENT_TO_NODE.get(element);
+        if (!node) {
+            throw new Error(`can not get node from ${JSON.stringify(element)}`);
         }
-        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
-            };
+        return node;
+    },
+    findParentNode(element) {
+        if (PlaitMind.isMind(element)) {
+            return undefined;
+        }
+        const parent = MindElement.getParent(element);
+        return MindElement.getNode(parent);
+    },
+    hasEmojis(element) {
+        if (element.data.emojis) {
+            return true;
         }
         else {
-            return {
-                max: maxNodeRectangle.x + maxNodeRectangle.width + ABSTRACT_INCLUDED_OUTLINE_OFFSET,
-                min: startNodeRectangle.x + startNodeRectangle.width + ABSTRACT_INCLUDED_OUTLINE_OFFSET
-            };
+            return false;
         }
+    },
+    getEmojis(element) {
+        return element.data.emojis;
     }
 };
-const getHitAbstractHandle = (board, element, point) => {
-    const nodeLayout = MindQueries.getCorrectLayoutByElement(board, element);
-    const isHorizontal = isHorizontalLayout(nodeLayout);
-    const parentElement = MindElement.getParent(element);
-    const includedElements = parentElement.children.slice(element.start, element.end + 1);
-    let abstractRectangle = getRectangleByElements(board, includedElements, true);
-    abstractRectangle = RectangleClient.getOutlineRectangle(abstractRectangle, -ABSTRACT_INCLUDED_OUTLINE_OFFSET);
-    const startHandleRec = getAbstractHandleRectangle(abstractRectangle, isHorizontal, AbstractHandlePosition.start);
-    const endHandleRec = getAbstractHandleRectangle(abstractRectangle, isHorizontal, AbstractHandlePosition.end);
-    const pointRec = RectangleClient.toRectangleClient([point, point]);
-    if (RectangleClient.isHit(pointRec, startHandleRec))
-        return AbstractHandlePosition.start;
-    if (RectangleClient.isHit(pointRec, endHandleRec))
-        return AbstractHandlePosition.end;
-    return undefined;
-};
-const getAbstractHandleRectangle = (rectangle, isHorizontal, position) => {
-    let result;
-    if (position === AbstractHandlePosition.start) {
-        const location = isHorizontal ? rectangle.y : rectangle.x;
-        result = getRectangleByResizingLocation(rectangle, location + ABSTRACT_HANDLE_MASK_WIDTH / 2, AbstractHandlePosition.end, isHorizontal);
-        result = getRectangleByResizingLocation(result, location - ABSTRACT_HANDLE_MASK_WIDTH / 2, position, isHorizontal);
+var MindElementShape;
+(function (MindElementShape) {
+    MindElementShape["roundRectangle"] = "round-rectangle";
+    MindElementShape["underline"] = "underline";
+})(MindElementShape || (MindElementShape = {}));
+var BranchShape;
+(function (BranchShape) {
+    BranchShape["bight"] = "bight";
+    BranchShape["polyline"] = "polyline";
+})(BranchShape || (BranchShape = {}));
+
+const NodeDefaultSpace = {
+    horizontal: {
+        nodeAndText: BASE * 3,
+        emojiAndText: BASE * 1.5
+    },
+    vertical: {
+        nodeAndText: BASE * 1.5
     }
-    else {
-        const location = isHorizontal ? rectangle.y + rectangle.height : rectangle.x + rectangle.width;
-        result = getRectangleByResizingLocation(rectangle, location - ABSTRACT_HANDLE_MASK_WIDTH / 2, AbstractHandlePosition.start, isHorizontal);
-        result = getRectangleByResizingLocation(result, location + ABSTRACT_HANDLE_MASK_WIDTH / 2, position, isHorizontal);
+};
+const RootDefaultSpace = {
+    horizontal: {
+        nodeAndText: BASE * 4,
+        emojiAndText: BASE * 2
+    },
+    vertical: {
+        nodeAndText: BASE * 2
     }
-    return result;
 };
-function findLocationLeftIndex(board, parentChildren, location, isHorizontal) {
-    const children = parentChildren.filter(child => {
-        return !AbstractNode.isAbstract(child);
-    });
-    const recArray = children.map(child => {
-        return getRectangleByElements(board, [child], false);
-    });
-    const firstRec = getRectangleByElements(board, [children[0]], true);
-    const fakeLeftRec = {
-        x: firstRec.x - firstRec.width,
-        y: firstRec.y - firstRec.height,
-        width: firstRec.width,
-        height: firstRec.height
-    };
-    const lastRec = getRectangleByElements(board, [children[children.length - 1]], true);
-    const fakeRightRec = {
-        x: lastRec.x + lastRec.width,
-        y: lastRec.y + lastRec.height,
-        width: lastRec.width,
-        height: lastRec.height
-    };
-    recArray.push(fakeRightRec);
-    recArray.unshift(fakeLeftRec);
-    for (let i = 0; i < recArray.length - 1; i++) {
-        const recXOrY = isHorizontal ? recArray[i].y : recArray[i].x;
-        const recWidthOrHeight = isHorizontal ? recArray[i].height : recArray[i].width;
-        if (location >= recXOrY + recWidthOrHeight / 2 &&
-            location <= recArray[i + 1][isHorizontal ? 'y' : 'x'] + recArray[i + 1][isHorizontal ? 'height' : 'width'] / 2) {
-            return i - 1;
+const getHorizontalSpaceBetweenNodeAndText = (board, element) => {
+    const isMind = PlaitMind.isMind(element);
+    const nodeAndText = isMind ? RootDefaultSpace.horizontal.nodeAndText : NodeDefaultSpace.horizontal.nodeAndText;
+    return nodeAndText;
+};
+const getVerticalSpaceBetweenNodeAndText = (element) => {
+    const isMind = PlaitMind.isMind(element);
+    const nodeAndText = isMind ? RootDefaultSpace.vertical.nodeAndText : NodeDefaultSpace.vertical.nodeAndText;
+    return nodeAndText;
+};
+const getSpaceEmojiAndText = (element) => {
+    const isMind = PlaitMind.isMind(element);
+    const emojiAndText = isMind ? RootDefaultSpace.horizontal.emojiAndText : NodeDefaultSpace.horizontal.emojiAndText;
+    return emojiAndText;
+};
+const NodeSpace = {
+    getNodeWidth(board, element) {
+        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
+        if (MindElement.hasEmojis(element)) {
+            return (NodeSpace.getEmojiLeftSpace(board, element) +
+                getEmojisWidthHeight(board, element).width +
+                getSpaceEmojiAndText(element) +
+                element.width +
+                nodeAndText);
         }
-    }
-    return 0;
-}
-function handleTouchedAbstract(board, touchedAbstract, endPoint) {
-    let touchedHandle;
-    const abstract = getSelectedElements(board)
-        .filter(element => AbstractNode.isAbstract(element))
-        .find(element => {
-        touchedHandle = getHitAbstractHandle(board, element, endPoint);
-        return touchedHandle;
-    });
-    if (touchedAbstract === abstract) {
-        return touchedAbstract;
-    }
-    if (touchedAbstract) {
-        const component = PlaitElement.getComponent(touchedAbstract);
-        component.updateAbstractIncludedOutline();
-        touchedAbstract = undefined;
-    }
-    if (abstract) {
-        touchedAbstract = abstract;
-        const component = PlaitElement.getComponent(touchedAbstract);
-        component.updateAbstractIncludedOutline(touchedHandle);
-    }
-    return touchedAbstract;
-}
-
-function drawIndentedLink(board, node, child, defaultStroke = null, needDrawUnderline = true, defaultStrokeWidth) {
-    const branchWidth = defaultStrokeWidth || getBranchWidthByMindElement(board, child.origin);
-    const branchColor = defaultStroke || getBranchColorByMindElement(board, child.origin);
-    const isUnderlineShape = getShapeByElement(board, child.origin) === MindElementShape.underline;
-    let beginX, beginY, endX, endY, beginNode = node, endNode = child;
-    const beginRectangle = getRectangleByNode(beginNode);
-    const endRectangle = getRectangleByNode(endNode);
-    beginX = beginNode.x + beginNode.width / 2;
-    beginY = isChildUp(node, child) ? beginRectangle.y : beginRectangle.y + beginRectangle.height;
-    endX = node.left ? endNode.x + endNode.hGap + endRectangle.width : endNode.x + endNode.hGap;
-    endY = isUnderlineShape ? endNode.y + endNode.height - endNode.vGap : endNode.y + endNode.height / 2;
-    //根据位置，设置正负参数
-    let plusMinus = isChildUp(node, child) ? (node.left ? [-1, -1] : [1, -1]) : node.left ? [-1, 1] : [1, 1];
-    const layout = MindQueries.getCorrectLayoutByElement(board, node.origin);
-    if (beginNode.origin.isRoot) {
-        if (layout === MindLayoutType.leftBottomIndented || layout === MindLayoutType.rightBottomIndented) {
-            beginY += branchWidth;
+        return nodeAndText + element.width + nodeAndText;
+    },
+    getNodeHeight(board, element) {
+        const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
+        return nodeAndText + element.height + nodeAndText;
+    },
+    getTextLeftSpace(board, element) {
+        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
+        if (MindElement.hasEmojis(element)) {
+            return NodeSpace.getEmojiLeftSpace(board, element) + getEmojisWidthHeight(board, element).width + getSpaceEmojiAndText(element);
         }
-        if (layout === MindLayoutType.leftTopIndented || layout === MindLayoutType.rightTopIndented) {
-            beginY -= branchWidth;
+        else {
+            return nodeAndText;
         }
+    },
+    getTextTopSpace(element) {
+        const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
+        return nodeAndText;
+    },
+    getEmojiLeftSpace(board, element) {
+        const options = board.getMindOptions();
+        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
+        return nodeAndText - options.emojiPadding;
+    },
+    getEmojiTopSpace(element) {
+        const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
+        return nodeAndText;
     }
-    let curve = [
-        [beginX, beginY],
-        [beginX, beginY],
-        [beginX, beginY],
-        [beginX, endY - (endNode.hGap * 3 * plusMinus[1]) / 5],
-        [beginX, endY - (endNode.hGap * plusMinus[1]) / 5],
-        [beginX + (endNode.hGap * plusMinus[0]) / 4, endY],
-        [beginX + (endNode.hGap * plusMinus[0] * 3) / 5, endY],
-        isUnderlineShape && needDrawUnderline ? [endX + (endNode.width - endNode.hGap * 2) * plusMinus[0], endY] : [endX, endY],
-        isUnderlineShape && needDrawUnderline ? [endX + (endNode.width - endNode.hGap * 2) * plusMinus[0], endY] : [endX, endY],
-        isUnderlineShape && needDrawUnderline ? [endX + (endNode.width - endNode.hGap * 2) * plusMinus[0], endY] : [endX, endY]
-    ];
-    const points = pointsOnBezierCurves(curve);
-    return PlaitBoard.getRoughSVG(board).curve(points, { stroke: branchColor, strokeWidth: branchWidth });
+};
+
+function getTopicRectangleByNode(board, node) {
+    let nodeRectangle = getRectangleByNode(node);
+    return getTopicRectangleByElement(board, nodeRectangle, node.origin);
+}
+function getTopicRectangleByElement(board, nodeRectangle, element) {
+    const x = nodeRectangle.x + NodeSpace.getTextLeftSpace(board, element);
+    const y = nodeRectangle.y + NodeSpace.getTextTopSpace(element);
+    const width = Math.ceil(element.width);
+    const height = Math.ceil(element.height);
+    return { height, width, x, y };
 }
 
 function drawTopicByNode(board, node, viewContainerRef) {
@@ -1882,6 +1929,7 @@ function drawAbstractLink(board, node, isHorizontal) {
     const branchWidth = getAbstractBranchWidth(board, node.origin);
     const branchColor = getAbstractBranchColor(board, node.origin);
     const parent = node.parent;
+    const branchShape = getBranchShapeByMindElement(board, parent.origin);
     const abstractRectangle = getRectangleByNode(node);
     let includedElements = parent.children.slice(node.origin.start, node.origin.end + 1).map(node => {
         return node.origin;
@@ -1903,6 +1951,20 @@ function drawAbstractLink(board, node, isHorizontal) {
     bezierEndPoint = moveXOfPoint(bezierEndPoint, linkPadding, linkDirection);
     let c2 = moveXOfPoint(bezierEndPoint, curveDistance, linkDirection);
     let bezierConnectorPoint = moveXOfPoint(abstractConnectorPoint, -linkPadding, linkDirection);
+    if (branchShape === BranchShape.polyline) {
+        const g = createG();
+        const polyline = drawLinearPath([bezierBeginPoint, c1, bezierConnectorPoint, c2, bezierEndPoint], {
+            stroke: branchColor,
+            strokeWidth: branchWidth
+        });
+        const straightLine = drawLinearPath([abstractConnectorPoint, bezierConnectorPoint], {
+            stroke: branchColor,
+            strokeWidth: branchWidth
+        });
+        g.appendChild(polyline);
+        g.appendChild(straightLine);
+        return g;
+    }
     const link = PlaitBoard.getRoughSVG(board).path(`M${bezierBeginPoint[0]},${bezierBeginPoint[1]} Q${c1[0]},${c1[1]} ${bezierConnectorPoint[0]},${bezierConnectorPoint[1]} Q${c2[0]},${c2[1]} ${bezierEndPoint[0]},${bezierEndPoint[1]} M${abstractConnectorPoint[0]},${abstractConnectorPoint[1]} L${bezierConnectorPoint[0]},${bezierConnectorPoint[1]}`, {
         stroke: branchColor,
         strokeWidth: branchWidth
@@ -2089,16 +2151,14 @@ const setTopicSize = (board, element, width, height) => {
     Transforms.setNode(board, newElement, path);
 };
 const removeElements = (board, elements) => {
-    const deletableElements = getFirstLevelElement(elements).reverse();
-    //翻转，从下到上修改，防止找不到 path
+    const deletableElements = getFirstLevelElement(elements);
     deletableElements
         .map(element => {
         const path = PlaitBoard.findPath(board, element);
+        const ref = board.pathRef(path);
         return () => {
-            if (isInRightBranchOfStandardLayout(element)) {
-                changeRightNodeCount(board, path.slice(0, 1), -1);
-            }
-            Transforms.removeNode(board, path);
+            Transforms.removeNode(board, ref.current);
+            ref.unref();
         };
     })
         .forEach(action => {
@@ -2124,6 +2184,11 @@ const insertAbstractNodes = (board, validAbstractRefs, elements, path) => {
     });
     insertNodes(board, abstracts, abstractPath);
 };
+const setRightNodeCountByRefs = (board, refs) => {
+    refs.forEach(ref => {
+        Transforms.setNode(board, { rightNodeCount: ref.rightNodeCount }, ref.path);
+    });
+};
 
 const addEmoji = (board, element, emojiItem) => {
     const emojis = element.data.emojis || [];
@@ -2173,7 +2238,8 @@ const MindTransforms = {
     setAbstractByStandardLayout,
     removeElements,
     insertNodes,
-    insertAbstractNodes
+    insertAbstractNodes,
+    setRightNodeCountByRefs
 };
 
 function drawAbstractIncludedOutline(board, roughSVG, element, activeHandlePosition, resizingLocation) {
@@ -2581,11 +2647,8 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         if (AbstractNode.isAbstract(this.node.origin)) {
             this.linkG = drawAbstractLink(this.board, this.node, isHorizontalLayout(layout));
         }
-        else if (MindElement.isIndentedLayout(parent)) {
-            this.linkG = drawIndentedLink(this.board, parentNode, this.node);
-        }
         else {
-            this.linkG = drawLogicLink(this.board, this.node, parentNode, isHorizontalLayout(layout));
+            this.linkG = drawLink(this.board, parentNode, this.node, isHorizontalLayout(layout));
         }
         this.g.append(this.linkG);
     }
@@ -2988,8 +3051,8 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         }
     }
 }
-MindNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: MindNodeComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-MindNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: MindNodeComponent, selector: "plait-mind-node", usesInheritance: true, ngImport: i0, template: `
+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 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+MindNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: MindNodeComponent, selector: "plait-mind-node", usesInheritance: true, ngImport: i0, template: `
         <plait-children
             *ngIf="!element.isCollapsed"
             [board]="board"
@@ -2998,7 +3061,7 @@ MindNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             [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.2", ngImport: i0, type: MindNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindNodeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'plait-mind-node',
@@ -3108,11 +3171,11 @@ class PlaitMindComponent extends MindNodeComponent {
         });
     }
 }
-PlaitMindComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: PlaitMindComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PlaitMindComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: PlaitMindComponent, selector: "plait-mind", usesInheritance: true, ngImport: i0, template: `
+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.2", ngImport: i0, type: PlaitMindComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitMindComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'plait-mind',
@@ -3125,10 +3188,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
 
 class MindModule {
 }
-MindModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: MindModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MindModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.2", ngImport: i0, type: MindModule, declarations: [PlaitMindComponent, MindNodeComponent], imports: [CommonModule, RichtextModule, PlaitModule], exports: [PlaitMindComponent, MindNodeComponent] });
-MindModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: MindModule, imports: [CommonModule, RichtextModule, PlaitModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: MindModule, decorators: [{
+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: [CommonModule, RichtextModule, PlaitModule], exports: [PlaitMindComponent, MindNodeComponent] });
+MindModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindModule, imports: [CommonModule, RichtextModule, PlaitModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [PlaitMindComponent, MindNodeComponent],
@@ -3197,7 +3260,7 @@ const withDnd = (board) => {
             dropTarget = detectDropTarget(board, detectPoint, dropTarget, [...activeElements, ...correspondingElements]);
             if (dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.target) {
                 targetPath = getPathByDropTarget(board, dropTarget);
-                fakeDropNodeG = drawFakeDropNodeByPath(board, dropTarget.target, targetPath);
+                fakeDropNodeG = drawFakeDropNode(board, dropTarget.target, targetPath);
                 PlaitBoard.getHost(board).appendChild(fakeDropNodeG);
             }
             const offsetX = endPoint[0] - startPoint[0];
@@ -3240,6 +3303,14 @@ const withDnd = (board) => {
                 const effectedAbstracts = deleteElementHandleAbstract(board, elements);
                 insertElementHandleAbstract(board, targetPath, normalElements.length, false, effectedAbstracts);
                 MindTransforms.setAbstractsByRefs(board, effectedAbstracts);
+                let refs = deleteElementsHandleRightNodeCount(board, elements);
+                const shouldChangeRoot = isInRightBranchOfStandardLayout(dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.target) &&
+                    targetElementPathRef.current &&
+                    (Path.isSibling(targetPath, targetElementPathRef.current) || Path.equals(targetPath, targetElementPathRef.current));
+                if (shouldChangeRoot && targetElementPathRef.current) {
+                    refs = insertElementHandleRightNodeCount(board, targetElementPathRef.current.slice(0, 1), normalElements.length, refs);
+                }
+                MindTransforms.setRightNodeCountByRefs(board, refs);
                 MindTransforms.removeElements(board, elements);
                 let insertPath = targetPathRef.current;
                 const parentPath = Path.parent(targetPathRef.current || targetPath);
@@ -3252,12 +3323,6 @@ const withDnd = (board) => {
                 if (abstractRefs.length) {
                     MindTransforms.insertAbstractNodes(board, abstractRefs, normalElements, insertPath);
                 }
-                const shouldChangeRoot = isInRightBranchOfStandardLayout(dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.target) &&
-                    targetElementPathRef.current &&
-                    (Path.isSibling(targetPath, targetElementPathRef.current) || Path.equals(targetPath, targetElementPathRef.current));
-                if (shouldChangeRoot && targetElementPathRef.current) {
-                    changeRightNodeCount(board, targetElementPathRef.current.slice(0, 1), normalElements.length);
-                }
                 if (targetElementPathRef.current &&
                     targetPathRef.current &&
                     Path.isAncestor(targetElementPathRef.current, targetPathRef.current) &&
@@ -3266,10 +3331,9 @@ const withDnd = (board) => {
                 }
                 targetElementPathRef.unref();
                 targetPathRef.unref();
-                const selectedElements = getSelectedElements(board);
                 let setActiveElements = [];
                 depthFirstRecursion(board, node => {
-                    const isSelected = selectedElements.some(element => element.id === node.id);
+                    const isSelected = activeElements.some(element => element.id === node.id);
                     if (isSelected) {
                         setActiveElements.push(node);
                     }
@@ -3398,6 +3462,10 @@ const withAbstract = (board) => {
     let startPoint;
     let newProperty;
     board.mousedown = (event) => {
+        if (!isMainPointer(event)) {
+            mousedown(event);
+            return;
+        }
         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));
@@ -3551,6 +3619,7 @@ const withCreateMind = (board) => {
             const targetPoint = transformPoint(board, toPoint(movingPoint[0], movingPoint[1], PlaitBoard.getHost(board)));
             const emptyMind = createEmptyMind(board, targetPoint);
             Transforms.insertNode(board, emptyMind, [board.children.length]);
+            addSelectedElement(board, emptyMind);
             BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
         }
         destroy();
@@ -3644,7 +3713,8 @@ const withMind = (board) => {
                 }
                 else {
                     if (isInRightBranchOfStandardLayout(selectedElement)) {
-                        changeRightNodeCount(board, selectedElementPath.slice(0, 1), 1);
+                        const refs = insertElementHandleRightNodeCount(board, selectedElementPath.slice(0, 1), 1);
+                        MindTransforms.setRightNodeCountByRefs(board, refs);
                     }
                     const abstractRefs = insertElementHandleAbstract(board, Path.next(selectedElementPath));
                     MindTransforms.setAbstractsByRefs(board, abstractRefs);
@@ -3657,6 +3727,8 @@ const withMind = (board) => {
                 const deletableElements = getFirstLevelElement(selectedElements).reverse();
                 const abstractRefs = deleteElementHandleAbstract(board, deletableElements);
                 MindTransforms.setAbstractsByRefs(board, abstractRefs);
+                const refs = deleteElementsHandleRightNodeCount(board, selectedElements);
+                MindTransforms.setRightNodeCountByRefs(board, refs);
                 MindTransforms.removeElements(board, selectedElements);
                 let activeElement;
                 const firstLevelElements = getFirstLevelElement(selectedElements);
@@ -3762,6 +3834,8 @@ const withMind = (board) => {
         const deletableElements = getFirstLevelElement(selectedElements).reverse();
         const abstractRefs = deleteElementHandleAbstract(board, deletableElements);
         MindTransforms.setAbstractsByRefs(board, abstractRefs);
+        const refs = deleteElementsHandleRightNodeCount(board, selectedElements);
+        MindTransforms.setRightNodeCountByRefs(board, refs);
         MindTransforms.removeElements(board, selectedElements);
         deleteFragment(data);
     };
@@ -3780,9 +3854,9 @@ class MindEmojiBaseComponent {
         this.elementRef.nativeElement.style.fontSize = `${this.fontSize}px`;
     }
 }
-MindEmojiBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: MindEmojiBaseComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-MindEmojiBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", type: MindEmojiBaseComponent, inputs: { fontSize: "fontSize", emojiItem: "emojiItem", board: "board", element: "element" }, host: { classAttribute: "mind-node-emoji" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: MindEmojiBaseComponent, decorators: [{
+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", board: "board", element: "element" }, host: { classAttribute: "mind-node-emoji" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindEmojiBaseComponent, decorators: [{
             type: Directive,
             args: [{
                     host: {
@@ -3807,5 +3881,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, AbstractHandlePosition, AbstractResizeState, BASE, BRANCH_COLORS, BRANCH_WIDTH, BaseDrawer, DefaultAbstractNodeStyle, DefaultNodeStyle, DefaultRootStyle, ELEMENT_TO_NODE, EXTEND_OFFSET, EXTEND_RADIUS, GRAY_COLOR, IS_DRAGGING, LayoutDirection, LayoutDirectionsMap, MindElement, MindElementShape, MindEmojiBaseComponent, MindModule, MindNode, MindNodeComponent, MindPointerType, MindQueries, MindTransforms, NODE_MIN_WIDTH, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, QUICK_INSERT_CIRCLE_COLOR, QUICK_INSERT_CIRCLE_OFFSET, QUICK_INSERT_INNER_CROSS_COLOR, ROOT_TOPIC_FONT_SIZE, STROKE_WIDTH, TOPIC_COLOR, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, TRANSPARENT, addActiveOnDragOrigin, canSetAbstract, changeRightNodeCount, copyNewNode, correctLayoutByDirection, deleteElementHandleAbstract, detectDropTarget, directionCorrector, directionDetector, divideElementByParent, drawFakeDragNode, drawFakeDropNodeByPath, extractNodesText, findLastChild, findLocationLeftIndex, getAbstractBranchColor, getAbstractBranchWidth, getAbstractHandleRectangle, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getBranchWidthByMindElement, getChildrenCount, getCorrespondingAbstract, getDefaultBranchColor, getDefaultBranchColorByIndex, getDefaultLayout, getEmojiForeignRectangle, getEmojiRectangle, getFirstLevelElement, getHitAbstractHandle, getInCorrectLayoutDirection, getLayoutDirection$1 as getLayoutDirection, getLayoutReverseDirection, getLocationScope, getNextBranchColor, getOverallAbstracts, getPathByDropTarget, getPreviousAndNextByPath, getRectangleByElement, getRectangleByNode, getRectangleByResizingLocation, getRelativeStartEndByAbstractRef, getRootLayout, getShapeByElement, getStrokeByMindElement, getTopicRectangleByElement, getTopicRectangleByNode, getValidAbstractRefs, handleTouchedAbstract, hasAfterDraw, insertElementHandleAbstract, insertMindElement, isChildElement, isChildRight, isChildUp, isCorrectLayout, isDragging, isHitEmojis, isHitMindElement, isInRightBranchOfStandardLayout, isMixedLayout, isSetAbstract, isValidTarget, isVirtualKey, readjustmentDropTarget, removeActiveOnDragOrigin, separateChildren, setIsDragging, withMind, withMindExtend };
+export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, AbstractHandlePosition, AbstractResizeState, BASE, BRANCH_COLORS, BRANCH_WIDTH, BaseDrawer, BranchShape, DefaultAbstractNodeStyle, DefaultNodeStyle, DefaultRootStyle, ELEMENT_TO_NODE, EXTEND_OFFSET, EXTEND_RADIUS, GRAY_COLOR, IS_DRAGGING, LayoutDirection, LayoutDirectionsMap, MindElement, MindElementShape, MindEmojiBaseComponent, MindModule, MindNode, MindNodeComponent, MindPointerType, MindQueries, MindTransforms, NODE_MIN_WIDTH, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, QUICK_INSERT_CIRCLE_COLOR, QUICK_INSERT_CIRCLE_OFFSET, QUICK_INSERT_INNER_CROSS_COLOR, ROOT_TOPIC_FONT_SIZE, STROKE_WIDTH, TOPIC_COLOR, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, TRANSPARENT, addActiveOnDragOrigin, adjustAbstractToNode, adjustNodeToRoot, adjustRootToNode, canSetAbstract, copyNewNode, correctLayoutByDirection, createDefaultMind, createEmptyMind, createMindElement, deleteElementHandleAbstract, deleteElementsHandleRightNodeCount, detectDropTarget, directionCorrector, directionDetector, divideElementByParent, drawFakeDragNode, drawFakeDropNode, enterNodeEditing, extractNodesText, findLastChild, findLocationLeftIndex, getAbstractBranchColor, getAbstractBranchWidth, getAbstractHandleRectangle, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getBranchShapeByMindElement, getBranchWidthByMindElement, getChildrenCount, getCorrespondingAbstract, getDefaultBranchColor, getDefaultBranchColorByIndex, getDefaultLayout, getEmojiForeignRectangle, getEmojiRectangle, getFirstLevelElement, getHitAbstractHandle, getInCorrectLayoutDirection, getLayoutDirection$1 as getLayoutDirection, getLayoutReverseDirection, getLocationScope, getNextBranchColor, getOverallAbstracts, getPathByDropTarget, getRectangleByElement, getRectangleByNode, getRectangleByResizingLocation, getRelativeStartEndByAbstractRef, getRootLayout, getShapeByElement, getStrokeByMindElement, getTopicRectangleByElement, getTopicRectangleByNode, getValidAbstractRefs, handleTouchedAbstract, hasAfterDraw, hasPreviousOrNextOfDropPath, insertElementHandleAbstract, insertElementHandleRightNodeCount, insertMindElement, isChildElement, isChildRight, isChildUp, isCorrectLayout, isDragging, isHitEmojis, isHitMindElement, isInRightBranchOfStandardLayout, isMixedLayout, isSetAbstract, isValidTarget, isVirtualKey, readjustmentDropTarget, removeActiveOnDragOrigin, separateChildren, setIsDragging, withMind, withMindExtend };
 //# sourceMappingURL=plait-mind.mjs.map