@plait/mind 0.27.0-next.1 → 0.27.0-next.2

package/fesm2015/plait-mind.mjs

@@ -1,4382 +0,0 @@
-import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, NgModule, NgZone, Directive, Input, HostListener } from '@angular/core';
-import * as i2 from '@plait/core';
-import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, RectangleClient, PlaitElement, PlaitPluginKey, getSelectedElements, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, PlaitBoard, Path, PlaitNode, PlaitContextService, depthFirstRecursion, getIsRecursionFunc, drawLinearPath, drawBezierPath, createG, updateForeignObject, drawRoundRectangle, getRectangleByElements, NODE_TO_PARENT, distanceBetweenPointAndRectangle, createForeignObject, createText, PlaitPointerType, PlaitPluginElementComponent, NODE_TO_INDEX, PlaitModule, isMainPointer, transformPoint, toPoint, getHitElements, distanceBetweenPointAndPoint, setClipboardData, setClipboardDataByText, BOARD_TO_HOST, throttleRAF, BoardTransforms, removeSelectedElement, PlaitHistoryBoard, hotkeys, setClipboardDataByMedia, getClipboardDataByMedia, ResizeCursorClass, preventTouchMove, PRESS_AND_MOVE_BUFFER, MERGING, getDataFromClipboard } from '@plait/core';
-import { MindLayoutType, isIndentedLayout, AbstractNode, isStandardLayout, isHorizontalLogicLayout, isVerticalLogicLayout, getNonAbstractChildren, isLeftLayout, isRightLayout, isTopLayout, isBottomLayout, isHorizontalLayout, getCorrectStartEnd, ConnectingPosition, getAbstractLayout, GlobalLayout } from '@plait/layouts';
-import { PlaitMarkEditor, MarkTypes, DEFAULT_FONT_SIZE, TEXT_DEFAULT_HEIGHT, buildText, getTextSize, TextManage, ExitOrigin, TextModule, getTextFromClipboard } from '@plait/text';
-import { fromEvent, Subject } from 'rxjs';
-import { RESIZE_HANDLE_DIAMETER, getRectangleResizeHandleRefs, isExpandHotkey, isTabHotkey, isEnterHotkey, isVirtualKey, isSpaceHotkey, MediaKeys, ResizeHandle, withResize, ActiveGenerator } from '@plait/common';
-import { Node as Node$1, Path as Path$1 } from 'slate';
-import { __awaiter } from 'tslib';
-import { pointsOnBezierCurves } from 'points-on-curve';
-import { take, filter } from 'rxjs/operators';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-
-const ELEMENT_TO_NODE = new WeakMap();
-
-const MindNode = {
-    get(root, path) {
-        let node = root;
-        for (let i = 0; i < path.length; i++) {
-            const p = path[i];
-            if (!node || !node.children || !node.children[p]) {
-                throw new Error(`Cannot find a descendant at path [${path}]`);
-            }
-            node = node.children[p];
-        }
-        return node;
-    }
-};
-
-var LayoutDirection;
-(function (LayoutDirection) {
-    LayoutDirection["top"] = "top";
-    LayoutDirection["right"] = "right";
-    LayoutDirection["bottom"] = "bottom";
-    LayoutDirection["left"] = "left";
-})(LayoutDirection || (LayoutDirection = {}));
-const LayoutDirectionsMap = {
-    [MindLayoutType.right]: [LayoutDirection.right],
-    [MindLayoutType.left]: [LayoutDirection.left],
-    [MindLayoutType.upward]: [LayoutDirection.top],
-    [MindLayoutType.downward]: [LayoutDirection.bottom],
-    [MindLayoutType.rightBottomIndented]: [LayoutDirection.right, LayoutDirection.bottom],
-    [MindLayoutType.rightTopIndented]: [LayoutDirection.right, LayoutDirection.top],
-    [MindLayoutType.leftBottomIndented]: [LayoutDirection.left, LayoutDirection.bottom],
-    [MindLayoutType.leftTopIndented]: [LayoutDirection.left, LayoutDirection.top]
-};
-
-var MindPointerType;
-(function (MindPointerType) {
-    MindPointerType["mind"] = "mind";
-})(MindPointerType || (MindPointerType = {}));
-
-const DEFAULT_BRANCH_COLORS = [
-    '#A287E0',
-    '#6E80DB',
-    '#6DC4C4',
-    '#E0B75E',
-    '#B1C675',
-    '#77C386',
-    '#C18976',
-    '#E48484',
-    '#E582D4',
-    '#6AB1E4'
-];
-const COLORFUL_BRANCH_COLORS = [
-    '#F94239',
-    '#FF8612',
-    '#F3D222',
-    '#B3D431',
-    '#00BC7B',
-    '#06ADBF',
-    '#476BFF',
-    '#4E49BE',
-    '#8957E5',
-    '#FE5DA1'
-];
-const SOFT_BRANCH_COLORS = [
-    '#6D89C1',
-    '#F2BDC7',
-    '#B796D9',
-    '#5BA683',
-    '#B3D431 ',
-    '#F2DC6C',
-    '#F7C98D',
-    '#60B4D1',
-    '#838F9E',
-    '#C1A381'
-];
-const RETRO_BRANCH_COLORS = [
-    '#459476',
-    '#9A894F',
-    '#D48444',
-    '#E9C358 ',
-    '#4B9D9D',
-    '#C14C41',
-    '#827086 ',
-    '#60718D',
-    '#D38183',
-    '#9DC19D'
-];
-const DARK_BRANCH_COLORS = [
-    '#3DD1AE',
-    '#F6C659',
-    '#A9E072',
-    '#FF877B ',
-    '#F693E7',
-    '#5DCFFF',
-    '#868AF6',
-    '#4C6DC7',
-    '#D97C26',
-    '#268FAC'
-];
-const STARRY_BRANCH_COLORS = [
-    '#E46C57',
-    '#579360',
-    '#B98339',
-    '#3A62D1 ',
-    '#B883B7',
-    '#42ABE5',
-    '#2B9D8F',
-    '#A4705E',
-    '#265833',
-    '#787865'
-];
-
-const MindDefaultThemeColor = Object.assign(Object.assign({}, DefaultThemeColor), { branchColors: DEFAULT_BRANCH_COLORS, rootFill: '#f5f5f5', rootTextColor: '#333333' });
-const MindColorfulThemeColor = Object.assign(Object.assign({}, ColorfulThemeColor), { branchColors: COLORFUL_BRANCH_COLORS, rootFill: '#333333', rootTextColor: '#FFFFFF' });
-const MindSoftThemeColor = Object.assign(Object.assign({}, SoftThemeColor), { branchColors: SOFT_BRANCH_COLORS, rootFill: '#FFFFFF', rootTextColor: '#333333' });
-const MindRetroThemeColor = Object.assign(Object.assign({}, RetroThemeColor), { branchColors: RETRO_BRANCH_COLORS, rootFill: '#153D5D', rootTextColor: '#FFFFFF' });
-const MindDarkThemeColor = Object.assign(Object.assign({}, DarkThemeColor), { branchColors: DARK_BRANCH_COLORS, rootFill: '#FFFFFF', rootTextColor: '#333333' });
-const MindStarryThemeColor = Object.assign(Object.assign({}, StarryThemeColor), { branchColors: STARRY_BRANCH_COLORS, rootFill: '#FFFFFF', rootTextColor: '#333333' });
-const MindThemeColors = [
-    MindDefaultThemeColor,
-    MindColorfulThemeColor,
-    MindSoftThemeColor,
-    MindRetroThemeColor,
-    MindDarkThemeColor,
-    MindStarryThemeColor
-];
-const MindThemeColor = {
-    isMindThemeColor(value) {
-        if (value.branchColors && value.rootFill && value.rootTextColor) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    }
-};
-
-const WithMindPluginKey = 'plait-mind-plugin-key';
-const BASE = 4;
-const PRIMARY_COLOR = '#6698FF';
-const TRANSPARENT = 'transparent';
-const GRAY_COLOR = '#AAAAAA';
-const STROKE_WIDTH = 3;
-const BRANCH_WIDTH = 3;
-const EXTEND_OFFSET = 8;
-const EXTEND_DIAMETER = 16;
-const QUICK_INSERT_CIRCLE_OFFSET = 9;
-const QUICK_INSERT_CIRCLE_COLOR = '#6698FF';
-const QUICK_INSERT_INNER_CROSS_COLOR = 'white';
-
-function getEmojisWidthHeight(board, element) {
-    const options = board.getPluginOptions(WithMindPluginKey);
-    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 TOPIC_COLOR = '#333';
-const TOPIC_FONT_SIZE = 14;
-const ROOT_TOPIC_FONT_SIZE = 18;
-const ROOT_TOPIC_HEIGHT = 25;
-const TOPIC_DEFAULT_MAX_WORD_COUNT = 34;
-const DEFAULT_FONT_FAMILY = 'PingFangSC-Regular, "PingFang SC"';
-const BRANCH_FONT_FAMILY = 'PingFangSC-Medium, "PingFang SC"';
-
-const NodeDefaultSpace = {
-    horizontal: {
-        nodeAndText: BASE * 2.5,
-        emojiAndText: BASE * 1.5
-    },
-    vertical: {
-        nodeAndText: BASE,
-        nodeAndImage: BASE,
-        imageAndText: 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;
-    const strokeWidth = getStrokeWidthByElement(board, element);
-    return nodeAndText + strokeWidth / 2;
-};
-const getVerticalSpaceBetweenNodeAndText = (board, element) => {
-    const isMind = PlaitMind.isMind(element);
-    const strokeWidth = getStrokeWidthByElement(board, element);
-    const nodeAndText = isMind ? RootDefaultSpace.vertical.nodeAndText : NodeDefaultSpace.vertical.nodeAndText;
-    return nodeAndText + strokeWidth / 2;
-};
-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) +
-                NodeSpace.getNodeDynamicWidth(board, element) +
-                nodeAndText);
-        }
-        return nodeAndText + NodeSpace.getNodeDynamicWidth(board, element) + nodeAndText;
-    },
-    getNodeHeight(board, element) {
-        const nodeAndText = getVerticalSpaceBetweenNodeAndText(board, element);
-        if (MindElement.hasImage(element)) {
-            return NodeSpace.getTextTopSpace(board, element) + element.height + nodeAndText;
-        }
-        return nodeAndText + element.height + nodeAndText;
-    },
-    getNodeDynamicWidth(board, element) {
-        var _a;
-        const width = element.manualWidth || element.width;
-        const imageWidth = MindElement.hasImage(element) ? (_a = element.data.image) === null || _a === void 0 ? void 0 : _a.width : 0;
-        return Math.max(width, imageWidth);
-    },
-    /**
-     * use this when upload image first or resize image
-     * @param board
-     * @param element
-     * @param imageWidth
-     * @returns
-     */
-    getNodeNewDynamicWidth(board, element, imageWidth) {
-        const width = element.manualWidth || element.width;
-        return Math.max(width, imageWidth);
-    },
-    getNodeResizableMinWidth(board, element) {
-        const minTopicWidth = NodeSpace.getNodeTopicMinWidth(board, element);
-        if (MindElement.hasImage(element) && element.data.image.width > minTopicWidth) {
-            return element.data.image.width;
-        }
-        else {
-            return minTopicWidth;
-        }
-    },
-    getNodeTopicMinWidth(board, element, isRoot = false) {
-        const defaultFontSize = getNodeDefaultFontSize(isRoot);
-        const editor = MindElement.getTextEditor(element);
-        const marks = PlaitMarkEditor.getMarks(editor);
-        const fontSize = marks[MarkTypes.fontSize] || defaultFontSize;
-        return fontSize;
-    },
-    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(board, element) {
-        const nodeAndText = getVerticalSpaceBetweenNodeAndText(board, element);
-        if (MindElement.hasImage(element)) {
-            return NodeSpace.getImageTopSpace(board, element) + element.data.image.height + NodeDefaultSpace.vertical.imageAndText;
-        }
-        else {
-            return nodeAndText;
-        }
-    },
-    getImageTopSpace(board, element) {
-        const strokeWidth = getStrokeWidthByElement(board, element);
-        return strokeWidth / 2 + NodeDefaultSpace.vertical.nodeAndImage;
-    },
-    getEmojiLeftSpace(board, element) {
-        const options = board.getPluginOptions(WithMindPluginKey);
-        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
-        const strokeWidth = getStrokeWidthByElement(board, element);
-        return strokeWidth / 2 + nodeAndText - options.emojiPadding;
-    },
-    getEmojiTopSpace(board, element) {
-        const nodeAndText = getVerticalSpaceBetweenNodeAndText(board, element);
-        return nodeAndText;
-    }
-};
-const getFontSizeBySlateElement = (text) => {
-    const defaultFontSize = DEFAULT_FONT_SIZE;
-    if (typeof text === 'string') {
-        return defaultFontSize;
-    }
-    const marks = PlaitMarkEditor.getMarksByElement(text);
-    const fontSize = marks[MarkTypes.fontSize] || defaultFontSize;
-    return fontSize;
-};
-const getNodeDefaultFontSize = (isRoot = false) => {
-    const defaultFontSize = isRoot ? ROOT_TOPIC_FONT_SIZE : DEFAULT_FONT_SIZE;
-    return defaultFontSize;
-};
-
-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 } = getEmojisWidthHeight(board, element);
-    return {
-        x,
-        y,
-        width,
-        height: NodeSpace.getNodeHeight(board, element)
-    };
-}
-const isHitEmojis = (board, element, point) => {
-    return RectangleClient.isHit(RectangleClient.toRectangleClient([point, point]), getEmojiRectangle(board, element));
-};
-
-function getTopicRectangleByNode(board, node) {
-    let nodeRectangle = getRectangleByNode(node);
-    const result = getTopicRectangleByElement(board, nodeRectangle, node.origin);
-    // add buffer width to avoid unexpected text breaks in different scene
-    result.width = result.width + 4;
-    return result;
-}
-function getTopicRectangleByElement(board, nodeRectangle, element) {
-    const x = nodeRectangle.x + NodeSpace.getTextLeftSpace(board, element);
-    const y = nodeRectangle.y + NodeSpace.getTextTopSpace(board, element);
-    const width = NodeSpace.getNodeDynamicWidth(board, element);
-    const height = Math.ceil(element.height);
-    return { height, width, x, y };
-}
-
-function getImageForeignRectangle(board, element) {
-    let { x, y } = getRectangleByNode(MindElement.getNode(element));
-    const elementWidth = element.manualWidth || element.width;
-    x =
-        elementWidth > element.data.image.width
-            ? x + NodeSpace.getTextLeftSpace(board, element) + (elementWidth - element.data.image.width) / 2
-            : x + NodeSpace.getTextLeftSpace(board, element);
-    y = NodeSpace.getImageTopSpace(board, element) + y;
-    const { width, height } = element.data.image;
-    const rectangle = {
-        x,
-        y,
-        width,
-        height
-    };
-    return rectangle;
-}
-const isHitImage = (board, element, range) => {
-    const imageRectangle = getImageForeignRectangle(board, element);
-    const imageOutlineRectangle = RectangleClient.getOutlineRectangle(imageRectangle, -RESIZE_HANDLE_DIAMETER / 2);
-    return RectangleClient.isHit(RectangleClient.toRectangleClient([range.anchor, range.focus]), imageOutlineRectangle);
-};
-const getHitImageResizeHandleDirection = (board, element, point) => {
-    const imageRectangle = getImageForeignRectangle(board, element);
-    const resizeHandleRefs = getRectangleResizeHandleRefs(imageRectangle, RESIZE_HANDLE_DIAMETER);
-    const result = resizeHandleRefs.find(resizeHandleRef => {
-        return RectangleClient.isHit(RectangleClient.toRectangleClient([point, point]), resizeHandleRef.rectangle);
-    });
-    return result;
-};
-
-function editTopic(element) {
-    const component = PlaitElement.getComponent(element);
-    component === null || component === void 0 ? void 0 : component.editTopic();
-}
-const temporaryDisableSelection = (board) => {
-    const currentOptions = board.getPluginOptions(PlaitPluginKey.withSelection);
-    board.setPluginOptions(PlaitPluginKey.withSelection, {
-        isDisabledSelect: true
-    });
-    setTimeout(() => {
-        board.setPluginOptions(PlaitPluginKey.withSelection, Object.assign({}, currentOptions));
-    }, 0);
-};
-const getSelectedMindElements = (board) => {
-    const selectedElements = getSelectedElements(board).filter(value => MindElement.isMindElement(board, value));
-    return selectedElements;
-};
-
-const createEmptyMind = (point) => {
-    const element = createMindElement('思维导图', 72, ROOT_TOPIC_HEIGHT, { layout: MindLayoutType.right });
-    element.isRoot = true;
-    element.points = [point];
-    element.type = 'mindmap';
-    return element;
-};
-const createDefaultMind = (point, rightNodeCount, layout) => {
-    const root = createMindElement('思维导图', 72, ROOT_TOPIC_HEIGHT, { 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, {});
-    });
-    root.children = children;
-    return root;
-};
-const createMindElement = (text, width, height, options) => {
-    const newElement = {
-        id: idCreator(),
-        data: {
-            topic: buildText(text)
-        },
-        children: [],
-        width,
-        height
-    };
-    let key;
-    for (key in options) {
-        if (!isNullOrUndefined(options[key])) {
-            newElement[key] = options[key];
-        }
-    }
-    return newElement;
-};
-const INHERIT_ATTRIBUTE_KEYS = [
-    'fill',
-    'strokeColor',
-    'strokeWidth',
-    'shape',
-    'layout',
-    'branchColor',
-    'branchWidth',
-    'branchShape'
-];
-
-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$1.string(node.data.topic) + ' ';
-        for (const childNode of node.children) {
-            str += extractNodesText(childNode);
-        }
-    }
-    return str;
-};
-const insertMindElement = (board, inheritNode, path) => {
-    const newNode = {};
-    if (!inheritNode.isRoot) {
-        INHERIT_ATTRIBUTE_KEYS.forEach(attr => {
-            newNode[attr] = inheritNode[attr];
-        });
-        delete newNode.layout;
-    }
-    const newElement = createMindElement('', getNodeDefaultFontSize(), TEXT_DEFAULT_HEIGHT, newNode);
-    Transforms.insertNode(board, newElement, path);
-    clearSelectedElement(board);
-    addSelectedElement(board, newElement);
-    setTimeout(() => {
-        editTopic(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;
-            break;
-        case MindLayoutType.upward:
-            inverseDirectionLayout = MindLayoutType.downward;
-            break;
-        case MindLayoutType.rightBottomIndented:
-            inverseDirectionLayout = isHorizontal ? MindLayoutType.leftBottomIndented : MindLayoutType.rightTopIndented;
-            break;
-        case MindLayoutType.leftBottomIndented:
-            inverseDirectionLayout = isHorizontal ? MindLayoutType.rightBottomIndented : MindLayoutType.leftTopIndented;
-            break;
-        case MindLayoutType.rightTopIndented:
-            inverseDirectionLayout = isHorizontal ? MindLayoutType.leftTopIndented : MindLayoutType.rightBottomIndented;
-            break;
-        case MindLayoutType.leftTopIndented:
-            inverseDirectionLayout = isHorizontal ? MindLayoutType.rightTopIndented : MindLayoutType.leftBottomIndented;
-            break;
-    }
-    return inverseDirectionLayout;
-};
-const getLayoutDirection$1 = (root) => {
-    const layout = root.layout || getDefaultLayout();
-    return LayoutDirectionsMap[layout];
-};
-const getDefaultLayout = () => {
-    return MindLayoutType.standard;
-};
-const getAvailableSubLayoutsByLayoutDirections = (directions) => {
-    const result = [];
-    const reverseDirections = directions.map(getLayoutReverseDirection);
-    for (const key in MindLayoutType) {
-        const layout = MindLayoutType[key];
-        const layoutDirections = LayoutDirectionsMap[layout];
-        if (layoutDirections) {
-            const hasSameDirection = layoutDirections.some(d => directions.includes(d));
-            const hasReverseDirection = layoutDirections.some(r => reverseDirections.includes(r));
-            if (hasSameDirection && !hasReverseDirection) {
-                result.push(layout);
-            }
-        }
-    }
-    return result;
-};
-const getLayoutReverseDirection = (layoutDirection) => {
-    let reverseDirection = LayoutDirection.right;
-    switch (layoutDirection) {
-        case LayoutDirection.top:
-            reverseDirection = LayoutDirection.bottom;
-            break;
-        case LayoutDirection.bottom:
-            reverseDirection = LayoutDirection.top;
-            break;
-        case LayoutDirection.right:
-            reverseDirection = LayoutDirection.left;
-            break;
-        case LayoutDirection.left:
-            reverseDirection = LayoutDirection.right;
-            break;
-    }
-    return reverseDirection;
-};
-const getRootLayout = (root) => {
-    return root.layout || getDefaultLayout();
-};
-
-const adjustRootToNode = (board, node) => {
-    const newNode = Object.assign({}, node);
-    delete newNode.isRoot;
-    delete newNode.rightNodeCount;
-    delete newNode.type;
-    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);
-    if (!Node$1.string(newElement.data.topic)) {
-        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;
-    newElement === null || newElement === void 0 ? true : delete newElement.isCollapsed;
-    const { width, height } = getTextSize(board, newElement.data.topic, TOPIC_DEFAULT_MAX_WORD_COUNT, {
-        fontSize: ROOT_TOPIC_FONT_SIZE,
-        fontFamily: BRANCH_FONT_FAMILY,
-        width: node.manualWidth ? node.manualWidth : undefined
-    });
-    newElement.width = Math.max(width, getNodeDefaultFontSize(true));
-    newElement.height = height;
-    return Object.assign(Object.assign({}, newElement), { layout: (_a = newElement.layout) !== null && _a !== void 0 ? _a : MindLayoutType.right, isRoot: true, type: 'mindmap' });
-};
-
-const DefaultAbstractNodeStyle = {
-    branch: { color: GRAY_COLOR, width: 2 },
-    shape: {
-        strokeColor: GRAY_COLOR,
-        strokeWidth: 2
-    }
-};
-const DefaultNodeStyle = {
-    branch: {
-        width: 3
-    },
-    shape: {
-        rectangleRadius: 4,
-        strokeWidth: 3,
-        fill: 'none'
-    }
-};
-
-const setAbstractsByRefs = (board, abstractRefs) => {
-    abstractRefs.forEach((newProperty, element) => {
-        const start = element.start + newProperty.start;
-        const end = element.end + newProperty.end;
-        const path = PlaitBoard.findPath(board, element);
-        if (start > end) {
-            Transforms.removeNode(board, path);
-        }
-        else {
-            Transforms.setNode(board, { start, end }, path);
-        }
-    });
-};
-const setAbstractByStandardLayout = (board, element) => {
-    const rightNodeCount = element.rightNodeCount;
-    const abstract = element.children.find(child => {
-        return AbstractNode.isAbstract(child) && child.end >= rightNodeCount && child.start < rightNodeCount;
-    });
-    if (abstract) {
-        const path = PlaitBoard.findPath(board, abstract);
-        Transforms.setNode(board, { end: rightNodeCount - 1 }, path);
-    }
-};
-const insertAbstract = (board, elements) => {
-    let elementGroup = getFirstLevelElement(elements);
-    const { parentElements, abstractIncludedGroups } = divideElementByParent(elementGroup);
-    abstractIncludedGroups.forEach((group, index) => {
-        const groupParent = parentElements[index];
-        setAbstractByElements(board, groupParent, group);
-    });
-};
-const setAbstractByElements = (board, groupParent, group) => {
-    const indexArray = group.map(child => groupParent.children.indexOf(child)).sort((a, b) => a - b);
-    const rightNodeCount = groupParent === null || groupParent === void 0 ? void 0 : groupParent.rightNodeCount;
-    const start = indexArray[0], end = indexArray[indexArray.length - 1];
-    if (isStandardLayout(MindQueries.getLayoutByElement(groupParent)) &&
-        rightNodeCount &&
-        start < rightNodeCount &&
-        end >= rightNodeCount) {
-        const childrenLength = groupParent.children.length;
-        const path = [...PlaitBoard.findPath(board, groupParent), childrenLength];
-        const leftChildren = indexArray.filter(index => index >= rightNodeCount);
-        const rightChildren = indexArray.filter(index => index < rightNodeCount);
-        insertAbstractNode(board, path, rightChildren[0], rightChildren[rightChildren.length - 1]);
-        insertAbstractNode(board, Path.next(path), leftChildren[0], leftChildren[leftChildren.length - 1]);
-    }
-    else {
-        const path = [...PlaitBoard.findPath(board, groupParent), groupParent.children.length];
-        insertAbstractNode(board, path, start, end);
-    }
-};
-const insertAbstractNode = (board, path, start, end) => {
-    const mindElement = createMindElement('概要', 28, 20, {
-        strokeWidth: DefaultAbstractNodeStyle.branch.width,
-        branchWidth: DefaultAbstractNodeStyle.branch.width
-    });
-    mindElement.start = start;
-    mindElement.end = end;
-    Transforms.insertNode(board, mindElement, path);
-    clearSelectedElement(board);
-    addSelectedElement(board, mindElement);
-};
-
-const setLayout = (board, layout, path) => {
-    correctLogicLayoutNode(board, layout, path);
-    const element = PlaitNode.get(board, path);
-    if (PlaitMind.isMind(element) && isStandardLayout(layout)) {
-        MindTransforms.setAbstractByStandardLayout(board, element);
-    }
-    Transforms.setNode(board, { layout }, path);
-};
-const correctLogicLayoutNode = (board, layout, path) => {
-    var _a;
-    const node = PlaitNode.get(board, path);
-    if (node && layout) {
-        (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach((value, index) => {
-            var _a;
-            if (value.layout) {
-                if ((isHorizontalLogicLayout(layout) && isVerticalLogicLayout(value.layout)) ||
-                    (isVerticalLogicLayout(layout) && isHorizontalLogicLayout(value.layout))) {
-                    Transforms.setNode(board, { layout: null }, [...path, index]);
-                }
-                if ((_a = value.children) === null || _a === void 0 ? void 0 : _a.length) {
-                    correctLogicLayoutNode(board, layout, [...path, index]);
-                }
-            }
-        });
-    }
-};
-
-const separateChildren = (parentElement) => {
-    const rightNodeCount = parentElement.rightNodeCount;
-    const children = parentElement.children;
-    let rightChildren = [], leftChildren = [];
-    for (let i = 0; i < children.length; i++) {
-        const child = children[i];
-        if (AbstractNode.isAbstract(child) && child.end < rightNodeCount) {
-            rightChildren.push(child);
-            continue;
-        }
-        if (AbstractNode.isAbstract(child) && child.start >= rightNodeCount) {
-            leftChildren.push(child);
-            continue;
-        }
-        if (i < rightNodeCount) {
-            rightChildren.push(child);
-        }
-        else {
-            leftChildren.push(child);
-        }
-    }
-    return { leftChildren, rightChildren };
-};
-const isSetAbstract = (element) => {
-    return !!getCorrespondingAbstract(element);
-};
-const canSetAbstract = (element) => {
-    return !PlaitElement.isRootElement(element) && !AbstractNode.isAbstract(element) && !isSetAbstract(element);
-};
-const getCorrespondingAbstract = (element) => {
-    const parent = MindElement.findParent(element);
-    if (!parent)
-        return undefined;
-    const elementIndex = parent.children.indexOf(element);
-    return parent.children.find(child => {
-        return AbstractNode.isAbstract(child) && elementIndex >= child.start && elementIndex <= child.end;
-    });
-};
-const getBehindAbstracts = (element) => {
-    const parent = MindElement.findParent(element);
-    if (!parent)
-        return [];
-    const index = parent.children.indexOf(element);
-    return parent.children.filter(child => AbstractNode.isAbstract(child) && child.start > index);
-};
-/**
- * return corresponding abstract that is not child of elements
- */
-const getOverallAbstracts = (board, elements) => {
-    const overallAbstracts = [];
-    elements
-        .filter(value => !AbstractNode.isAbstract(value) && !PlaitMind.isMind(value))
-        .forEach(value => {
-        const abstract = getCorrespondingAbstract(value);
-        if (abstract && elements.indexOf(abstract) === -1 && overallAbstracts.indexOf(abstract) === -1) {
-            const { start, end } = abstract;
-            const parent = MindElement.getParent(value);
-            const isOverall = parent.children.slice(start, end + 1).every(includedElement => elements.indexOf(includedElement) > -1);
-            if (isOverall) {
-                overallAbstracts.push(abstract);
-            }
-        }
-    });
-    return overallAbstracts;
-};
-/**
- * abstract node is valid when elements contains at least one element it is referenced with
- */
-const getValidAbstractRefs = (board, elements) => {
-    const validAbstractRefs = [];
-    elements
-        .filter(value => !AbstractNode.isAbstract(value) && !PlaitMind.isMind(value))
-        .forEach(value => {
-        const abstract = getCorrespondingAbstract(value);
-        if (abstract && elements.indexOf(abstract) > 0) {
-            const index = validAbstractRefs.findIndex(value => value.abstract === abstract);
-            if (index === -1) {
-                validAbstractRefs.push({
-                    abstract: abstract,
-                    references: [value]
-                });
-            }
-            else {
-                validAbstractRefs[index].references.push(value);
-            }
-        }
-    });
-    return validAbstractRefs;
-};
-function getRelativeStartEndByAbstractRef(abstractRef, elements) {
-    const start = elements.indexOf(abstractRef.references[0]);
-    const end = elements.indexOf(abstractRef.references[abstractRef.references.length - 1]);
-    return { start, end };
-}
-const insertElementHandleAbstract = (board, path, step = 1, 
-//由此区分拖拽和新增到概要概括最后一个节点
-isExtendPreviousNode = true, effectedAbstracts = new Map()) => {
-    const parent = PlaitNode.parent(board, path);
-    const hasPreviousNode = path[path.length - 1] !== 0;
-    let behindAbstracts;
-    if (!hasPreviousNode) {
-        behindAbstracts = parent.children.filter(child => AbstractNode.isAbstract(child));
-    }
-    else {
-        const selectedElement = PlaitNode.get(board, Path.previous(path));
-        behindAbstracts = getBehindAbstracts(selectedElement);
-    }
-    if (behindAbstracts.length) {
-        behindAbstracts.forEach(abstract => {
-            let newProperties = effectedAbstracts.get(abstract);
-            if (!newProperties) {
-                newProperties = { start: 0, end: 0 };
-                effectedAbstracts.set(abstract, newProperties);
-            }
-            newProperties.start = newProperties.start + step;
-            newProperties.end = newProperties.end + step;
-        });
-    }
-    if (!hasPreviousNode) {
-        return effectedAbstracts;
-    }
-    const selectedElement = PlaitNode.get(board, Path.previous(path));
-    const correspondingAbstract = getCorrespondingAbstract(selectedElement);
-    const isDragToLast = !isExtendPreviousNode && correspondingAbstract && correspondingAbstract.end === path[path.length - 1] - 1;
-    if (correspondingAbstract && !isDragToLast) {
-        let newProperties = effectedAbstracts.get(correspondingAbstract);
-        if (!newProperties) {
-            newProperties = { start: 0, end: 0 };
-            effectedAbstracts.set(correspondingAbstract, newProperties);
-        }
-        newProperties.end = newProperties.end + step;
-    }
-    return effectedAbstracts;
-};
-const deleteElementHandleAbstract = (board, deletableElements, effectedAbstracts = new Map()) => {
-    deletableElements.forEach(node => {
-        if (!PlaitMind.isMind(node)) {
-            const behindAbstracts = getBehindAbstracts(node).filter(abstract => !deletableElements.includes(abstract));
-            if (behindAbstracts.length) {
-                behindAbstracts.forEach(abstract => {
-                    let newProperties = effectedAbstracts.get(abstract);
-                    if (!newProperties) {
-                        newProperties = { start: 0, end: 0 };
-                        effectedAbstracts.set(abstract, newProperties);
-                    }
-                    newProperties.start = newProperties.start - 1;
-                    newProperties.end = newProperties.end - 1;
-                });
-            }
-            const correspondingAbstract = getCorrespondingAbstract(node);
-            if (correspondingAbstract && !deletableElements.includes(correspondingAbstract)) {
-                let newProperties = effectedAbstracts.get(correspondingAbstract);
-                if (!newProperties) {
-                    newProperties = { start: 0, end: 0 };
-                    effectedAbstracts.set(correspondingAbstract, newProperties);
-                }
-                newProperties.end = newProperties.end - 1;
-            }
-        }
-    });
-    return effectedAbstracts;
-};
-const isChildOfAbstract = (board, element) => {
-    const ancestors = MindElement.getAncestors(board, element);
-    return !!ancestors.find((value) => AbstractNode.isAbstract(value));
-};
-
-const normalizeWidthAndHeight = (board, element, width, height) => {
-    const minWidth = NodeSpace.getNodeTopicMinWidth(board, element, element.isRoot);
-    const newWidth = width < minWidth * board.viewport.zoom ? minWidth : width / board.viewport.zoom;
-    const newHeight = height / board.viewport.zoom;
-    return { width: newWidth, height: newHeight };
-};
-const setTopic = (board, element, topic, width, height) => {
-    const newElement = Object.assign({ data: Object.assign(Object.assign({}, element.data), { topic }) }, normalizeWidthAndHeight(board, element, width, height));
-    const path = PlaitBoard.findPath(board, element);
-    Transforms.setNode(board, newElement, path);
-};
-const setNodeManualWidth = (board, element, width, height) => {
-    const path = PlaitBoard.findPath(board, element);
-    const { width: normalizedWidth, height: normalizedHeight } = normalizeWidthAndHeight(board, element, width, height);
-    const newElement = { manualWidth: normalizedWidth, height: normalizedHeight };
-    Transforms.setNode(board, newElement, path);
-};
-const setTopicSize = (board, element, width, height) => {
-    const newElement = Object.assign({}, normalizeWidthAndHeight(board, element, width, height));
-    let isEqualWidth = Math.ceil(element.width) === Math.ceil(newElement.width);
-    let isEqualHeight = Math.ceil(element.height) === Math.ceil(newElement.height);
-    if (element.manualWidth) {
-        isEqualWidth = true;
-    }
-    if (!isEqualWidth || !isEqualHeight) {
-        const path = PlaitBoard.findPath(board, element);
-        Transforms.setNode(board, newElement, path);
-    }
-};
-const removeElements = (board, elements) => {
-    const deletableElements = getFirstLevelElement(elements);
-    deletableElements
-        .map(element => {
-        const path = PlaitBoard.findPath(board, element);
-        const ref = board.pathRef(path);
-        return () => {
-            Transforms.removeNode(board, ref.current);
-            ref.unref();
-        };
-    })
-        .forEach(action => {
-        action();
-    });
-};
-const insertNodes = (board, elements, path) => {
-    const pathRef = board.pathRef(path);
-    elements.forEach(element => {
-        if (pathRef.current) {
-            Transforms.insertNode(board, element, pathRef.current);
-        }
-    });
-    pathRef.unref();
-};
-const insertAbstractNodes = (board, validAbstractRefs, elements, path) => {
-    var _a;
-    const parent = PlaitNode.get(board, Path$1.parent(path));
-    const abstractPath = [...Path$1.parent(path), (_a = parent.children) === null || _a === void 0 ? void 0 : _a.length];
-    const abstracts = validAbstractRefs.map(refs => {
-        const { start, end } = getRelativeStartEndByAbstractRef(refs, elements);
-        return Object.assign(Object.assign({}, refs.abstract), { start: start + path[path.length - 1], end: end + path[path.length - 1] });
-    });
-    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 || [];
-    const newEmojis = [...emojis];
-    newEmojis.push(emojiItem);
-    const newElement = {
-        data: Object.assign(Object.assign({}, element.data), { emojis: newEmojis })
-    };
-    const path = PlaitBoard.findPath(board, element);
-    Transforms.setNode(board, newElement, path);
-};
-const removeEmoji = (board, element, emojiItem) => {
-    const emojis = element.data.emojis.filter(value => value !== emojiItem);
-    const newElement = {
-        data: { topic: element.data.topic }
-    };
-    if (MindElement.hasImage(element)) {
-        newElement.data.image = element.data.image;
-    }
-    if (emojis.length > 0) {
-        newElement.data.emojis = emojis;
-    }
-    const path = PlaitBoard.findPath(board, element);
-    Transforms.setNode(board, newElement, path);
-};
-const replaceEmoji = (board, element, oldEmoji, newEmoji) => {
-    const newElement = {
-        data: Object.assign({}, element.data)
-    };
-    const newEmojis = element.data.emojis.map(value => {
-        if (value === oldEmoji) {
-            return newEmoji;
-        }
-        return value;
-    });
-    newElement.data.emojis = newEmojis;
-    const path = PlaitBoard.findPath(board, element);
-    Transforms.setNode(board, newElement, path);
-};
-
-/**
- * 1. return new node height if height changed
- * 2. new height is effected by zoom
- */
-const getNewNodeHeight = (board, element, newNodeDynamicWidth) => {
-    const textManage = PlaitElement.getComponent(element).textManage;
-    const { height } = textManage.getSize();
-    textManage.updateWidth(newNodeDynamicWidth);
-    const { height: newHeight } = textManage.getSize();
-    if (!element.manualWidth) {
-        textManage.updateWidth(0);
-    }
-    if (height !== newHeight) {
-        return newHeight;
-    }
-    if (Math.abs(newHeight / board.viewport.zoom - element.height) > 2) {
-        return newHeight;
-    }
-    return undefined;
-};
-
-const removeImage = (board, element) => {
-    setImageFocus(board, element, false);
-    const newElement = {
-        data: Object.assign({}, element.data)
-    };
-    delete newElement.data.image;
-    const path = PlaitBoard.findPath(board, element);
-    const newDynamicWidth = NodeSpace.getNodeNewDynamicWidth(board, element, 0);
-    const newHeight = getNewNodeHeight(board, element, newDynamicWidth);
-    if (newHeight) {
-        newElement.height = newHeight / board.viewport.zoom;
-    }
-    Transforms.setNode(board, newElement, path);
-};
-const setImage = (board, element, imageItem) => {
-    const newElement = {
-        data: Object.assign(Object.assign({}, element.data), { image: imageItem })
-    };
-    const newDynamicWidth = NodeSpace.getNodeNewDynamicWidth(board, element, imageItem.width);
-    const newHeight = getNewNodeHeight(board, element, newDynamicWidth);
-    if (newHeight) {
-        newElement.height = newHeight / board.viewport.zoom;
-    }
-    const path = PlaitBoard.findPath(board, element);
-    Transforms.setNode(board, newElement, path);
-};
-
-const MindTransforms = {
-    setLayout,
-    setTopic,
-    setTopicSize,
-    setNodeManualWidth,
-    addEmoji,
-    removeEmoji,
-    replaceEmoji,
-    insertAbstract,
-    setAbstractsByRefs,
-    setAbstractByStandardLayout,
-    removeElements,
-    insertNodes,
-    insertAbstractNodes,
-    setRightNodeCountByRefs,
-    removeImage,
-    setImage
-};
-
-const PICTURE_ACCEPTED_UPLOAD_SIZE = 20;
-const acceptImageTypes = ['png', 'jpeg', 'gif', 'bmp'];
-const DEFAULT_IMAGE_WIDTH = 240;
-
-const BOARD_TO_SELECTED_IMAGE_ELEMENT = new WeakMap();
-const getSelectedImageElement = (board) => {
-    return BOARD_TO_SELECTED_IMAGE_ELEMENT.get(board);
-};
-const addSelectedImageElement = (board, element) => {
-    BOARD_TO_SELECTED_IMAGE_ELEMENT.set(board, element);
-};
-const removeSelectedImageElement = (board) => {
-    BOARD_TO_SELECTED_IMAGE_ELEMENT.delete(board);
-};
-const setImageFocus = (board, element, isFocus) => {
-    if (isFocus) {
-        addSelectedImageElement(board, element);
-    }
-    else {
-        removeSelectedImageElement(board);
-    }
-    const elementComponent = PlaitElement.getComponent(element);
-    elementComponent.imageDrawer.componentRef.instance.isFocus = isFocus;
-    elementComponent.imageDrawer.componentRef.instance.cdr.markForCheck();
-};
-const selectImage = (board, element, acceptImageTypes = ['png', 'jpeg', 'gif', 'bmp']) => {
-    const inputFile = document.createElement('input');
-    inputFile.setAttribute('type', 'file');
-    const acceptImageTypesString = '.' + acceptImageTypes.join(',.');
-    inputFile.setAttribute('accept', acceptImageTypesString);
-    inputFile.onchange = (event) => {
-        buildImage(board, element, event.target.files[0]);
-    };
-    inputFile.click();
-};
-const buildImage = (board, element, imageFile) => __awaiter(void 0, void 0, void 0, function* () {
-    let width = 0, height = 0;
-    yield getImageSize(imageFile).then((value) => {
-        width = value.width;
-        height = value.height;
-    });
-    let imageItem = null;
-    const url = URL.createObjectURL(imageFile);
-    const context = PlaitBoard.getComponent(board).viewContainerRef.injector.get(PlaitContextService);
-    context.setUploadingFile({ url, file: imageFile });
-    imageItem = {
-        url,
-        width,
-        height
-    };
-    MindTransforms.setImage(board, element, imageItem);
-});
-function getImageSize(file, defaultImageWidth = DEFAULT_IMAGE_WIDTH) {
-    return new Promise((resolve, reject) => {
-        const image = new Image();
-        image.src = URL.createObjectURL(file);
-        image.onload = function () {
-            const width = defaultImageWidth;
-            const height = (defaultImageWidth * image.naturalHeight) / image.naturalWidth;
-            resolve(image.naturalWidth > defaultImageWidth ? { width, height } : { width: image.naturalWidth, height: image.naturalHeight });
-        };
-    });
-}
-
-const getAvailableProperty = (board, element, propertyKey) => {
-    return element[propertyKey];
-};
-
-/**
- * Processing of branch color, width, style, etc. of the mind node
- */
-const getBranchColorByMindElement = (board, element) => {
-    if (AbstractNode.isAbstract(element) || isChildOfAbstract(board, element)) {
-        return getAbstractBranchColor(board, element);
-    }
-    const branchColor = getAvailableProperty(board, element, 'branchColor');
-    return branchColor || getDefaultBranchColor(board, element);
-};
-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.branch.width;
-};
-const getAbstractBranchColor = (board, element) => {
-    if (element.branchColor) {
-        return element.branchColor;
-    }
-    return DefaultAbstractNodeStyle.branch.color;
-};
-const getNextBranchColor = (board, root) => {
-    const index = root.children.length;
-    return getDefaultBranchColorByIndex(board, index);
-};
-const getDefaultBranchColor = (board, element) => {
-    const path = PlaitBoard.findPath(board, element);
-    return getDefaultBranchColorByIndex(board, path[1]);
-};
-const getDefaultBranchColorByIndex = (board, index) => {
-    const themeColor = getMindThemeColor(board);
-    const length = themeColor.branchColors.length;
-    const remainder = index % length;
-    return themeColor.branchColors[remainder];
-};
-const getMindThemeColor = (board) => {
-    const themeColors = PlaitBoard.getThemeColors(board);
-    const themeColor = themeColors.find(val => val.mode === board.theme.themeColorMode);
-    if (themeColor && MindThemeColor.isMindThemeColor(themeColor)) {
-        return themeColor;
-    }
-    else {
-        return MindDefaultThemeColor;
-    }
-};
-
-const getStrokeByMindElement = (board, element) => {
-    if (PlaitMind.isMind(element)) {
-        const defaultRootStroke = getMindThemeColor(board).rootFill;
-        return element.strokeColor || defaultRootStroke;
-    }
-    if (AbstractNode.isAbstract(element) || isChildOfAbstract(board, element)) {
-        return element.strokeColor || DefaultAbstractNodeStyle.shape.strokeColor;
-    }
-    return getAvailableProperty(board, element, 'strokeColor') || getDefaultBranchColor(board, element);
-};
-const getStrokeWidthByElement = (board, element) => {
-    const strokeWidth = element.strokeWidth ||
-        (AbstractNode.isAbstract(element) ? DefaultAbstractNodeStyle.shape.strokeWidth : DefaultNodeStyle.shape.strokeWidth);
-    return strokeWidth;
-};
-const getFillByElement = (board, element) => {
-    if (element.fill) {
-        return element.fill;
-    }
-    const defaultRootFill = getMindThemeColor(board).rootFill;
-    return element.isRoot ? defaultRootFill : DefaultNodeStyle.shape.fill;
-};
-const getShapeByElement = (board, element) => {
-    const shape = getAvailableProperty(board, element, 'shape');
-    return shape || MindElementShape.roundRectangle;
-};
-
-const IS_DRAGGING = new WeakMap();
-const addActiveOnDragOrigin = (activeElement) => {
-    const activeComponent = PlaitElement.getComponent(activeElement);
-    activeComponent.g.classList.add('dragging-node');
-    !activeElement.isCollapsed &&
-        activeElement.children.forEach(child => {
-            addActiveOnDragOrigin(child);
-        });
-};
-const removeActiveOnDragOrigin = (activeElement) => {
-    const activeComponent = PlaitElement.getComponent(activeElement);
-    activeComponent.g.classList.remove('dragging-node');
-    !activeElement.isCollapsed &&
-        activeElement.children.forEach(child => {
-            removeActiveOnDragOrigin(child);
-        });
-};
-const isDragging = (board) => {
-    return !!IS_DRAGGING.get(board);
-};
-const setIsDragging = (board, state) => {
-    IS_DRAGGING.set(board, state);
-    if (state) {
-        PlaitBoard.getBoardContainer(board).classList.add('mind-node-dragging');
-    }
-    else {
-        PlaitBoard.getBoardContainer(board).classList.remove('mind-node-dragging');
-    }
-};
-const hasPreviousOrNextOfDropPath = (parent, dropTarget, dropPath) => {
-    let children = getNonAbstractChildren(parent);
-    if (PlaitMind.isMind(parent) && isStandardLayout(getRootLayout(parent))) {
-        const isDropRight = isDropStandardRight(parent, dropTarget);
-        if (isDropRight) {
-            children = children.slice(0, parent.rightNodeCount);
-        }
-        if (!isDropRight) {
-            children = children.slice(parent.rightNodeCount, children.length);
-            dropPath = [...dropPath, dropPath[dropPath.length - 1] - parent.rightNodeCount];
-        }
-    }
-    let hasPreviousNode = dropPath[dropPath.length - 1] !== 0;
-    let hasNextNode = dropPath[dropPath.length - 1] !== ((children === null || children === void 0 ? void 0 : children.length) || 0);
-    if (parent.isCollapsed) {
-        hasNextNode = false;
-        hasPreviousNode = false;
-    }
-    return {
-        hasPreviousNode,
-        hasNextNode
-    };
-};
-const isDropStandardRight = (parent, dropTarget) => {
-    const target = dropTarget.target;
-    return ((PlaitMind.isMind(parent) &&
-        isStandardLayout(getRootLayout(parent)) &&
-        parent.children.indexOf(target) !== -1 &&
-        parent.children.indexOf(target) < parent.rightNodeCount) ||
-        (PlaitMind.isMind(target) && isStandardLayout(getRootLayout(target)) && dropTarget.detectResult === 'right'));
-};
-
-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);
-        if (isStandardLayout(parentLayout)) {
-            const idx = node.parent.children.findIndex(x => x === node);
-            const isLeft = idx >= (node.parent.origin.rightNodeCount || 0);
-            return getAllowedDirection(detectResults, [isLeft ? 'right' : 'left']);
-        }
-        if (isLeftLayout(parentLayout)) {
-            return getAllowedDirection(detectResults, ['right']);
-        }
-        if (isRightLayout(parentLayout)) {
-            return getAllowedDirection(detectResults, ['left']);
-        }
-        if (parentLayout === MindLayoutType.upward) {
-            return getAllowedDirection(detectResults, ['bottom']);
-        }
-        if (parentLayout === MindLayoutType.downward) {
-            return getAllowedDirection(detectResults, ['top']);
-        }
-    }
-    else {
-        const layout = MindQueries.getCorrectLayoutByElement(board, node === null || node === void 0 ? void 0 : node.origin);
-        if (isStandardLayout(layout)) {
-            return getAllowedDirection(detectResults, ['top', 'bottom']);
-        }
-        if (layout === MindLayoutType.upward) {
-            return getAllowedDirection(detectResults, ['left', 'right', 'bottom']);
-        }
-        if (layout === MindLayoutType.downward) {
-            return getAllowedDirection(detectResults, ['left', 'right', 'top']);
-        }
-        if (isLeftLayout(layout)) {
-            return getAllowedDirection(detectResults, ['right', 'top', 'bottom']);
-        }
-        if (isRightLayout(layout)) {
-            return getAllowedDirection(detectResults, ['left', 'top', 'bottom']);
-        }
-    }
-    return null;
-};
-const getAllowedDirection = (detectResults, illegalDirections) => {
-    const directions = detectResults;
-    illegalDirections.forEach(item => {
-        const bottomDirectionIndex = directions.findIndex(direction => direction === item);
-        if (bottomDirectionIndex !== -1) {
-            directions.splice(bottomDirectionIndex, 1);
-        }
-    });
-    return directions.length ? directions : null;
-};
-const detectDropTarget = (board, detectPoint, dropTarget, activeElements) => {
-    let detectResult = null;
-    depthFirstRecursion(board, element => {
-        if (!MindElement.isMindElement(board, element) || detectResult) {
-            return;
-        }
-        const node = MindElement.getNode(element);
-        const directions = directionDetector(node, detectPoint);
-        if (directions) {
-            detectResult = directionCorrector(board, node, directions);
-        }
-        dropTarget = null;
-        const isValid = activeElements.every(element => isValidTarget(element, node.origin));
-        if (detectResult && isValid) {
-            dropTarget = { target: node.origin, detectResult: detectResult[0] };
-        }
-    }, getIsRecursionFunc(board));
-    return dropTarget;
-};
-const directionDetector = (targetNode, centerPoint) => {
-    const { x, y, width, height } = getRectangleByNode(targetNode);
-    const yCenter = y + height / 2;
-    const xCenter = x + width / 2;
-    const top = targetNode.y;
-    const bottom = targetNode.y + targetNode.height;
-    const left = targetNode.x;
-    const right = targetNode.x + targetNode.width;
-    const direction = [];
-    // x 轴
-    if (centerPoint[1] > y && centerPoint[1] < y + height) {
-        if (centerPoint[0] > left && centerPoint[0] < xCenter) {
-            direction.push('left');
-        }
-        if (centerPoint[0] > xCenter && centerPoint[0] < right) {
-            direction.push('right');
-        }
-        // 重合区域，返回两个方向
-        if ((centerPoint[0] > x && centerPoint[0] < xCenter) || (centerPoint[0] > xCenter && centerPoint[0] < x + width)) {
-            if (centerPoint[1] < yCenter) {
-                direction.push('top');
-            }
-            else {
-                direction.push('bottom');
-            }
-        }
-        return direction.length ? direction : null;
-    }
-    // y 轴
-    if (centerPoint[0] > x && centerPoint[0] < x + width) {
-        if (centerPoint[1] > top && centerPoint[1] < yCenter) {
-            direction.push('top');
-        }
-        if (centerPoint[1] > yCenter && centerPoint[1] < bottom) {
-            direction.push('bottom');
-        }
-        if ((centerPoint[1] > y && centerPoint[1] < y + height) || (centerPoint[1] > yCenter && centerPoint[1] < y + height)) {
-            if (centerPoint[0] < xCenter) {
-                direction.push('left');
-            }
-            else {
-                direction.push('right');
-            }
-        }
-        return direction.length ? direction : null;
-    }
-    return null;
-};
-const isValidTarget = (origin, target) => {
-    return origin !== target && !isChildElement(origin, target);
-};
-const getPathByDropTarget = (board, dropTarget) => {
-    let targetPath = PlaitBoard.findPath(board, dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.target);
-    const layout = PlaitMind.isMind(dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.target)
-        ? getRootLayout(dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.target)
-        : MindQueries.getCorrectLayoutByElement(board, MindElement.getParent(dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.target));
-    const children = getNonAbstractChildren(dropTarget.target);
-    // 上下布局：左右是兄弟节点，上下是子节点
-    if (isVerticalLogicLayout(layout)) {
-        if (dropTarget.detectResult === 'top' || dropTarget.detectResult === 'bottom') {
-            targetPath.push(children.length);
-        }
-        // 如果是左，位置不变，右则插入到下一个兄弟节点
-        if (dropTarget.detectResult === 'right') {
-            targetPath = Path.next(targetPath);
-        }
-    }
-    // 水平布局/标准布局：上下是兄弟节点，左右是子节点
-    if (isHorizontalLogicLayout(layout)) {
-        if (dropTarget.detectResult === 'right') {
-            if (PlaitMind.isMind(dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.target) && isStandardLayout(layout)) {
-                targetPath.push(dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.target.rightNodeCount);
-            }
-            else {
-                targetPath.push(children.length);
-            }
-        }
-        if (dropTarget.detectResult === 'left') {
-            targetPath.push(children.length);
-        }
-        // 如果是上，位置不变，下插入到下一个兄弟节点
-        if (dropTarget.detectResult === 'bottom') {
-            targetPath = Path.next(targetPath);
-        }
-    }
-    // 缩进布局：上下是兄弟节点，左右是子节点，但上（左上/右上），探测到上是子节点，下则位置不变，反之同理。
-    if (isIndentedLayout(layout)) {
-        if (isTopLayout(layout) && dropTarget.detectResult === 'top') {
-            targetPath = Path.next(targetPath);
-        }
-        if (isBottomLayout(layout) && dropTarget.detectResult === 'bottom') {
-            targetPath = Path.next(targetPath);
-        }
-        if (isLeftLayout(layout) && dropTarget.detectResult === 'left') {
-            targetPath.push(children.length);
-        }
-        if (isRightLayout(layout) && dropTarget.detectResult === 'right') {
-            targetPath.push(children.length);
-        }
-    }
-    return targetPath;
-};
-
-const ABSTRACT_HANDLE_COLOR = '#6698FF80'; //primary color 50% opacity
-const ABSTRACT_INCLUDED_OUTLINE_OFFSET = 3.5;
-const ABSTRACT_HANDLE_LENGTH = 10;
-const ABSTRACT_HANDLE_MASK_WIDTH = 8;
-
-var HorizontalPlacement;
-(function (HorizontalPlacement) {
-    HorizontalPlacement["left"] = "left";
-    HorizontalPlacement["center"] = "center";
-    HorizontalPlacement["right"] = "right";
-})(HorizontalPlacement || (HorizontalPlacement = {}));
-var VerticalPlacement;
-(function (VerticalPlacement) {
-    VerticalPlacement["top"] = "top";
-    VerticalPlacement["middle"] = "middle";
-    VerticalPlacement["bottom"] = "bottom";
-})(VerticalPlacement || (VerticalPlacement = {}));
-
-const getPointByPlacement = (client, placement) => {
-    let x = client.x;
-    let y = client.y;
-    if (placement[0] === HorizontalPlacement.center) {
-        x = client.x + client.width / 2;
-    }
-    if (placement[0] === HorizontalPlacement.right) {
-        x = client.x + client.width;
-    }
-    if (placement[1] === VerticalPlacement.middle) {
-        y = client.y + client.height / 2;
-    }
-    if (placement[1] === VerticalPlacement.bottom) {
-        y = client.y + client.height;
-    }
-    return [x, y];
-};
-const getXDistanceBetweenPoint = (point1, point2, isHorizontalLayout) => {
-    if (isHorizontalLayout) {
-        return Math.abs(point1[0] - point2[0]);
-    }
-    else {
-        return Math.abs(point1[1] - point2[1]);
-    }
-};
-const getYDistanceBetweenPoint = (point1, point2, isHorizontalLayout) => {
-    getXDistanceBetweenPoint(point1, point2, !isHorizontalLayout);
-};
-const getLayoutDirection = (node, isHorizontal) => {
-    if (isHorizontal) {
-        if (node.left) {
-            return LayoutDirection.left;
-        }
-        else {
-            return LayoutDirection.right;
-        }
-    }
-    else {
-        if (node.up) {
-            return LayoutDirection.top;
-        }
-        else {
-            return LayoutDirection.bottom;
-        }
-    }
-};
-// 以右为基准
-// 右 -> 左:
-// 1. 终点 -> 起点/起点 -> 终点
-// 2. 加 -> 减
-// 水平 -> 垂直:
-// 1. 起点/终点 -> 纵轴
-// 2. 加减 -> 纵轴
-// 下 -> 上:
-// 1. 终点 -> 起点/终点 -> 起点
-// 2. 加 -> 减
-const moveXOfPoint = (point, distance, direction = LayoutDirection.right) => {
-    if (direction === LayoutDirection.left) {
-        return [point[0] - distance, point[1]];
-    }
-    if (direction === LayoutDirection.bottom) {
-        return [point[0], point[1] + distance];
-    }
-    if (direction === LayoutDirection.top) {
-        return [point[0], point[1] - distance];
-    }
-    return [point[0] + distance, point[1]];
-};
-const moveYOfPoint = (point, distance, direction = LayoutDirection.right) => {
-    if (direction === LayoutDirection.bottom) {
-        return [point[0] + distance, point[1]];
-    }
-    if (direction === LayoutDirection.top) {
-        return [point[0] + distance, point[1]];
-    }
-    return [point[0], point[1] + distance];
-};
-const transformPlacement = (placement, direction) => {
-    // to left
-    if (direction === LayoutDirection.left) {
-        if (placement[0] === HorizontalPlacement.right) {
-            placement[0] = HorizontalPlacement.left;
-        }
-        else if (placement[0] === HorizontalPlacement.left) {
-            placement[0] = HorizontalPlacement.right;
-        }
-    }
-    // to bottom
-    if (direction === LayoutDirection.bottom || direction === LayoutDirection.top) {
-        let horizontal = HorizontalPlacement.center;
-        let vertical = VerticalPlacement.middle;
-        if (placement[1] === VerticalPlacement.top) {
-            horizontal = HorizontalPlacement.left;
-        }
-        if (placement[1] === VerticalPlacement.bottom) {
-            horizontal = HorizontalPlacement.right;
-        }
-        if (placement[0] === HorizontalPlacement.left) {
-            vertical = VerticalPlacement.top;
-        }
-        if (placement[0] === HorizontalPlacement.right) {
-            vertical = VerticalPlacement.bottom;
-        }
-        placement[0] = horizontal;
-        placement[1] = vertical;
-    }
-    // to up
-    if (direction === LayoutDirection.top) {
-        if (placement[1] === VerticalPlacement.bottom) {
-            placement[1] = VerticalPlacement.top;
-        }
-        else if (placement[1] === VerticalPlacement.top) {
-            placement[1] = VerticalPlacement.bottom;
-        }
-    }
-};
-
-function drawIndentedLink(board, node, child, defaultStroke = null, needDrawUnderline = true, defaultStrokeWidth) {
-    var _a;
-    const branchShape = getBranchShapeByMindElement(board, node.origin);
-    const branchWidth = defaultStrokeWidth || getBranchWidthByMindElement(board, node.origin);
-    const branchColor = defaultStroke || ((_a = node.origin) === null || _a === void 0 ? void 0 : _a.branchColor) || 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];
-    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],
-            isUnderlineShape && needDrawUnderline ? [endX + (endNode.width - endNode.hGap * 2) * plusMinus[0], endY] : [endX, endY]
-        ];
-        return drawLinearPath(polylinePoints, { stroke: branchColor, strokeWidth: branchWidth });
-    }
-    const points = pointsOnBezierCurves(curve, 0.001);
-    return drawBezierPath(points, { stroke: branchColor, strokeWidth: branchWidth });
-}
-
-function drawLogicLink(board, parent, node, isHorizontal, defaultStroke = null, defaultStrokeWidth) {
-    var _a;
-    const branchShape = getBranchShapeByMindElement(board, parent.origin);
-    const branchColor = defaultStroke || ((_a = parent.origin) === null || _a === void 0 ? void 0 : _a.branchColor) || getBranchColorByMindElement(board, node.origin);
-    const branchWidth = defaultStrokeWidth || getBranchWidthByMindElement(board, parent.origin);
-    const hasStraightLine = branchShape === BranchShape.polyline ? true : !parent.origin.isRoot;
-    const parentShape = getShapeByElement(board, parent.origin);
-    const shape = getShapeByElement(board, node.origin);
-    const hasUnderlineShape = shape === MindElementShape.underline;
-    const hasUnderlineShapeOfParent = parentShape === MindElementShape.underline;
-    const nodeClient = getRectangleByNode(node);
-    const parentClient = getRectangleByNode(parent);
-    const linkDirection = getLayoutDirection(node, isHorizontal);
-    // ① ensure begin placement and end placement
-    // begin placement represent parent connector position and end placement represent child connector
-    const beginPlacement = [HorizontalPlacement.right, VerticalPlacement.middle];
-    const endPlacement = [HorizontalPlacement.left, VerticalPlacement.middle];
-    transformPlacement(beginPlacement, linkDirection);
-    transformPlacement(endPlacement, linkDirection);
-    // underline shape and horizontal
-    if (isHorizontal && hasUnderlineShapeOfParent && !parent.origin.isRoot) {
-        beginPlacement[1] = VerticalPlacement.bottom;
-    }
-    if (isHorizontal && hasUnderlineShape) {
-        endPlacement[1] = VerticalPlacement.bottom;
-    }
-    let beginPoint = getPointByPlacement(parentClient, beginPlacement);
-    let endPoint = getPointByPlacement(nodeClient, endPlacement);
-    // ② 确定凸出直线，从起始点开始画一条直线，从直线的结束位置绘制曲线，保证收起图标可以完美覆盖起始连线，根节点不需要这条直线
-    // 绘制贝塞尔曲线要求，需要增加三个点，正常两个点就可以确定这条直线
-    const straightLineDistance = 8;
-    const beginPoint2 = hasStraightLine ? moveXOfPoint(beginPoint, straightLineDistance, linkDirection) : beginPoint;
-    let straightLine = hasStraightLine ? [beginPoint, beginPoint2, beginPoint2] : [];
-    // ③ 确定曲线
-    const beginBufferDistance = (parent.hGap + node.hGap) / 3;
-    const endBufferDistance = -(parent.hGap + node.hGap) / 2.4;
-    let curve = [
-        beginPoint2,
-        moveXOfPoint(beginPoint2, beginBufferDistance, linkDirection),
-        moveXOfPoint(endPoint, endBufferDistance, linkDirection),
-        endPoint
-    ];
-    // ④ 下划线绘制，underline shape and horizontal
-    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, element, offsetX, offsetY) => {
-    const activeComponent = PlaitElement.getComponent(element);
-    const dragFakeNodeG = createG();
-    dragFakeNodeG.classList.add('dragging', 'fake-node', 'plait-board-attached');
-    const fakeDraggingNode = Object.assign(Object.assign({}, activeComponent.node), { children: [], x: activeComponent.node.x + offsetX, y: activeComponent.node.y + offsetY });
-    const textRectangle = getTopicRectangleByNode(board, activeComponent.node);
-    const fakeNodeG = drawRoundRectangleByNode(board, fakeDraggingNode);
-    const richtextG = activeComponent.textManage.g.cloneNode(true);
-    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);
-    // draw emojis
-    if (MindElement.hasEmojis(element)) {
-        const fakeEmojisG = activeComponent.nodeEmojisDrawer.g.cloneNode(true);
-        const foreignRectangle = getEmojiForeignRectangle(board, element);
-        updateForeignObject(fakeEmojisG, foreignRectangle.width, foreignRectangle.height, foreignRectangle.x + offsetX, foreignRectangle.y + offsetY);
-        dragFakeNodeG === null || dragFakeNodeG === void 0 ? void 0 : dragFakeNodeG.append(fakeEmojisG);
-    }
-    if (MindElement.hasImage(element)) {
-        const fakeImageG = activeComponent.imageDrawer.g.cloneNode(true);
-        const foreignRectangle = getImageForeignRectangle(board, element);
-        updateForeignObject(fakeImageG, foreignRectangle.width, foreignRectangle.height, foreignRectangle.x + offsetX, foreignRectangle.y + offsetY);
-        dragFakeNodeG === null || dragFakeNodeG === void 0 ? void 0 : dragFakeNodeG.append(fakeImageG);
-    }
-    return dragFakeNodeG;
-};
-const drawFakeDropNode = (board, dropTarget, path) => {
-    const target = dropTarget.target;
-    const fakeDropNodeG = createG();
-    const parent = PlaitNode.get(board, Path.parent(path));
-    const layout = MindQueries.getLayoutByElement(parent);
-    const isHorizontal = isHorizontalLayout(layout);
-    const { hasNextNode, hasPreviousNode } = hasPreviousOrNextOfDropPath(parent, dropTarget, path);
-    const width = 30;
-    const height = 12;
-    let fakeNode, centerPoint, basicNode, linkDirection;
-    if (!hasPreviousNode && !hasNextNode) {
-        const parentNode = MindElement.getNode(parent);
-        const parentRect = getRectangleByNode(parentNode);
-        linkDirection = getLayoutDirection(parentNode, isHorizontal);
-        basicNode = parentNode;
-        if (PlaitMind.isMind(target) && isStandardLayout(layout)) {
-            if (dropTarget.detectResult === 'left') {
-                linkDirection = LayoutDirection.left;
-                basicNode.left = true;
-            }
-            else {
-                linkDirection = LayoutDirection.right;
-                basicNode.left = false;
-            }
-        }
-        const placement = [HorizontalPlacement.right, VerticalPlacement.middle];
-        transformPlacement(placement, linkDirection);
-        const parentCenterPoint = getPointByPlacement(parentRect, placement);
-        if (isIndentedLayout(layout)) {
-            const placement = [
-                HorizontalPlacement.center,
-                isTopLayout(layout) ? VerticalPlacement.top : VerticalPlacement.bottom
-            ];
-            const parentCenterPoint = getPointByPlacement(parentRect, placement);
-            centerPoint = moveXOfPoint(parentCenterPoint, height, linkDirection);
-            centerPoint[1] = isTopLayout(layout) ? centerPoint[1] - height : centerPoint[1] + height;
-        }
-        else {
-            centerPoint = moveXOfPoint(parentCenterPoint, width, linkDirection);
-        }
-    }
-    else if (!hasPreviousNode && hasNextNode) {
-        const nextElement = PlaitNode.get(board, path);
-        basicNode = MindElement.getNode(nextElement);
-        const nextRect = getRectangleByNode(basicNode);
-        linkDirection = getLayoutDirection(basicNode, isHorizontal);
-        const placement = [HorizontalPlacement.left, VerticalPlacement.top];
-        transformPlacement(placement, linkDirection);
-        let offset = -height;
-        if (MindElement.isIndentedLayout(parent)) {
-            offset = isTopLayout(layout) ? offset / 2 + basicNode.height - basicNode.vGap : 0;
-        }
-        centerPoint = getPointByPlacement(nextRect, placement);
-        centerPoint = moveYOfPoint(centerPoint, offset, linkDirection);
-    }
-    else if (hasPreviousNode && !hasNextNode) {
-        const previousElement = PlaitNode.get(board, Path.previous(path));
-        basicNode = MindElement.getNode(previousElement);
-        const previousRect = getRectangleByNode(basicNode);
-        linkDirection = getLayoutDirection(basicNode, isHorizontal);
-        const placement = [HorizontalPlacement.left, VerticalPlacement.bottom];
-        transformPlacement(placement, linkDirection);
-        let offset = height;
-        if (MindElement.isIndentedLayout(parent)) {
-            offset = isTopLayout(layout) ? -offset - (basicNode.height - basicNode.vGap) : offset;
-        }
-        centerPoint = getPointByPlacement(previousRect, placement);
-        centerPoint = moveYOfPoint(centerPoint, offset, linkDirection);
-    }
-    else {
-        const previousElement = PlaitNode.get(board, Path.previous(path));
-        basicNode = MindElement.getNode(previousElement);
-        const previousRect = getRectangleByNode(basicNode);
-        const nextElement = PlaitNode.get(board, path);
-        const nextNode = MindElement.getNode(nextElement);
-        const nextRect = getRectangleByNode(nextNode);
-        const beginPlacement = [HorizontalPlacement.left, VerticalPlacement.bottom];
-        const endPlacement = [HorizontalPlacement.left, VerticalPlacement.top];
-        linkDirection = getLayoutDirection(basicNode, isHorizontal);
-        transformPlacement(beginPlacement, linkDirection);
-        transformPlacement(endPlacement, linkDirection);
-        const previousPoint = getPointByPlacement(previousRect, beginPlacement);
-        const nextPoint = getPointByPlacement(nextRect, endPlacement);
-        centerPoint = [(previousPoint[0] + nextPoint[0]) / 2, (previousPoint[1] + nextPoint[1]) / 2];
-    }
-    let cornerPoint = centerPoint, oppositePoint = centerPoint;
-    const offsetY = isHorizontal ? height : width;
-    const offsetX = isHorizontal ? width : height;
-    cornerPoint = moveYOfPoint(cornerPoint, -offsetY / 2, linkDirection);
-    oppositePoint = moveYOfPoint(oppositePoint, offsetY / 2, linkDirection);
-    oppositePoint = moveXOfPoint(oppositePoint, offsetX, linkDirection);
-    const x = Math.min(cornerPoint[0], oppositePoint[0]);
-    const y = Math.min(cornerPoint[1], oppositePoint[1]);
-    fakeNode = Object.assign(Object.assign({}, basicNode), { x,
-        y,
-        width,
-        height, hGap: MindElement.isIndentedLayout(parent) ? BASE * 4 + (basicNode.origin.strokeWidth || STROKE_WIDTH) : 0, vGap: MindElement.isIndentedLayout(parent) ? BASE : 0 });
-    const fakeRectangleG = drawRoundRectangle(PlaitBoard.getRoughSVG(board), fakeNode.x, fakeNode.y, fakeNode.x + width, fakeNode.y + height, {
-        stroke: PRIMARY_COLOR,
-        strokeWidth: 2,
-        fill: PRIMARY_COLOR,
-        fillStyle: 'solid'
-    });
-    const link = 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;
-};
-
-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.activeDrawer.updateAbstractOutline(touchedAbstract);
-        touchedAbstract = undefined;
-    }
-    if (abstract) {
-        touchedAbstract = abstract;
-        const component = PlaitElement.getComponent(touchedAbstract);
-        component.activeDrawer.updateAbstractOutline(touchedAbstract, touchedHandle);
-    }
-    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;
-        }
-    }
-    return false;
-};
-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 });
-            }
-            else {
-                effectedRightNodeCount[index].rightNodeCount -= 1;
-            }
-        }
-    });
-    return effectedRightNodeCount;
-};
-
-const getLayoutOptions = (board) => {
-    function getMainAxle(element, parent) {
-        const strokeWidth = element.strokeWidth || STROKE_WIDTH;
-        if (element.isRoot) {
-            return BASE * 12;
-        }
-        if (parent && parent.isRoot()) {
-            return BASE * 3 + strokeWidth / 2;
-        }
-        return BASE * 3 + strokeWidth / 2;
-    }
-    function getSecondAxle(element, parent) {
-        const strokeWidth = element.strokeWidth || STROKE_WIDTH;
-        if (element.isRoot) {
-            return BASE * 10 + strokeWidth / 2;
-        }
-        return BASE * 6 + strokeWidth / 2;
-    }
-    return {
-        getHeight(element) {
-            return NodeSpace.getNodeHeight(board, element);
-        },
-        getWidth(element) {
-            return NodeSpace.getNodeWidth(board, element);
-        },
-        getHorizontalGap(element, parent) {
-            const _layout = (parent && parent.layout) || getRootLayout(element);
-            const isHorizontal = isHorizontalLayout(_layout);
-            const strokeWidth = element.strokeWidth || STROKE_WIDTH;
-            if (isIndentedLayout(_layout)) {
-                return BASE * 4 + strokeWidth;
-            }
-            if (!isHorizontal) {
-                return getMainAxle(element, parent);
-            }
-            else {
-                return getSecondAxle(element, parent);
-            }
-        },
-        getVerticalGap(element, parent) {
-            const _layout = (parent && parent.layout) || getRootLayout(element);
-            if (isIndentedLayout(_layout)) {
-                return BASE;
-            }
-            const isHorizontal = isHorizontalLayout(_layout);
-            if (isHorizontal) {
-                return getMainAxle(element, parent);
-            }
-            else {
-                return getSecondAxle(element, parent);
-            }
-        },
-        getVerticalConnectingPosition(element, parent) {
-            if (element.shape === MindElementShape.underline && parent && isHorizontalLogicLayout(parent.layout)) {
-                return ConnectingPosition.bottom;
-            }
-            return undefined;
-        },
-        getExtendHeight(node) {
-            return BASE * 6;
-        },
-        getIndentedCrossLevelGap() {
-            return BASE * 2;
-        }
-    };
-};
-
-/**
- * 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 {
-            layout = elementWithLayout === null || elementWithLayout === void 0 ? void 0 : elementWithLayout.layout;
-        }
-    }
-    if (layout === MindLayoutType.standard || !layout) {
-        return correctRootLayout;
-    }
-    else {
-        const incorrectDirection = getInCorrectLayoutDirection(correctRootLayout, layout);
-        if (incorrectDirection) {
-            return correctLayoutByDirection(layout, incorrectDirection);
-        }
-        else {
-            return layout;
-        }
-    }
-};
-
-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);
-    }
-    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 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) {
-        if (element.data && element.data.topic && element.width && element.height) {
-            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;
-        }
-    },
-    hasImage(element) {
-        if (element.data.image) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    },
-    getEmojis(element) {
-        return element.data.emojis;
-    },
-    hasMounted(element) {
-        const component = PlaitElement.getComponent(element);
-        return !!component;
-    },
-    getTextEditor(element) {
-        const component = PlaitElement.getComponent(element);
-        if (component) {
-            return component.textManage.componentRef.instance.editor;
-        }
-        throw new Error('can not get correctly component in get text editor');
-    }
-};
-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 = {}));
-
-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 drawRoundRectangleByNode(board, node) {
-    const rectangle = getRectangleByNode(node);
-    return drawRoundRectangleByElement(board, rectangle, node.origin);
-}
-function drawRoundRectangleByElement(board, nodeRectangle, element) {
-    const fill = getFillByElement(board, element);
-    const stroke = getStrokeByMindElement(board, element);
-    const strokeWidth = getStrokeWidthByElement(board, element);
-    const nodeG = drawRoundRectangle(PlaitBoard.getRoughSVG(board), nodeRectangle.x, nodeRectangle.y, nodeRectangle.x + nodeRectangle.width, nodeRectangle.y + nodeRectangle.height, {
-        stroke,
-        strokeWidth,
-        fill,
-        fillStyle: 'solid'
-    }, false, DefaultNodeStyle.shape.rectangleRadius);
-    return nodeG;
-}
-
-function drawAbstractLink(board, node, isHorizontal) {
-    const linkPadding = 15;
-    const branchWidth = getAbstractBranchWidth(board, node.origin);
-    const branchColor = getAbstractBranchColor(board, node.origin);
-    const parent = node.parent;
-    const branchShape = getBranchShapeByMindElement(board, node.origin);
-    const abstractRectangle = getRectangleByNode(node);
-    let includedElements = parent.children.slice(node.origin.start, node.origin.end + 1).map(node => {
-        return node.origin;
-    });
-    const includedElementsRectangle = getRectangleByElements(board, includedElements, true);
-    const linkDirection = getLayoutDirection(node, isHorizontal);
-    const bezierBeginPlacement = [HorizontalPlacement.right, VerticalPlacement.top];
-    const bezierEndPlacement = [HorizontalPlacement.right, VerticalPlacement.bottom];
-    const abstractConnectorPlacement = [HorizontalPlacement.left, VerticalPlacement.middle];
-    transformPlacement(bezierBeginPlacement, linkDirection);
-    transformPlacement(bezierEndPlacement, linkDirection);
-    transformPlacement(abstractConnectorPlacement, linkDirection);
-    let bezierBeginPoint = getPointByPlacement(includedElementsRectangle, bezierBeginPlacement);
-    let bezierEndPoint = getPointByPlacement(includedElementsRectangle, bezierEndPlacement);
-    let abstractConnectorPoint = getPointByPlacement(abstractRectangle, abstractConnectorPlacement);
-    let curveDistance = getXDistanceBetweenPoint(abstractConnectorPoint, bezierBeginPoint, isHorizontal) - linkPadding * 2;
-    bezierBeginPoint = moveXOfPoint(bezierBeginPoint, linkPadding, linkDirection);
-    let c1 = moveXOfPoint(bezierBeginPoint, curveDistance, linkDirection);
-    bezierEndPoint = moveXOfPoint(bezierEndPoint, linkPadding, linkDirection);
-    let c2 = moveXOfPoint(bezierEndPoint, curveDistance, linkDirection);
-    let bezierConnectorPoint = moveXOfPoint(abstractConnectorPoint, -linkPadding, linkDirection);
-    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
-    });
-    return link;
-}
-
-class EmojiDrawer {
-    constructor(board, viewContainerRef) {
-        this.board = board;
-        this.viewContainerRef = viewContainerRef;
-        this.componentRef = null;
-    }
-    draw(emoji, element) {
-        this.destroy();
-        const componentType = this.board.drawEmoji(emoji, element);
-        this.componentRef = this.viewContainerRef.createComponent(componentType);
-        this.componentRef.instance.emojiItem = emoji;
-        this.componentRef.instance.board = this.board;
-        this.componentRef.instance.element = element;
-        this.componentRef.instance.fontSize = getEmojiFontSize(element);
-    }
-    get nativeElement() {
-        if (this.componentRef) {
-            return this.componentRef.instance.nativeElement;
-        }
-        else {
-            return null;
-        }
-    }
-    destroy() {
-        if (this.componentRef) {
-            this.componentRef.destroy();
-            this.componentRef = null;
-        }
-    }
-}
-class NodeEmojisDrawer {
-    constructor(board, viewContainerRef) {
-        this.board = board;
-        this.viewContainerRef = viewContainerRef;
-        this.emojiDrawers = [];
-    }
-    drawEmojis(element) {
-        this.destroy();
-        if (MindElement.hasEmojis(element)) {
-            this.g = createG();
-            this.g.classList.add('emojis');
-            const foreignRectangle = getEmojiForeignRectangle(this.board, element);
-            const foreignObject = createForeignObject(foreignRectangle.x, foreignRectangle.y, foreignRectangle.width, foreignRectangle.height);
-            this.g.append(foreignObject);
-            const container = document.createElement('div');
-            container.classList.add('node-emojis-container');
-            foreignObject.append(container);
-            this.emojiDrawers = element.data.emojis.map(emojiItem => {
-                const drawer = new EmojiDrawer(this.board, this.viewContainerRef);
-                drawer.draw(emojiItem, element);
-                return drawer;
-            });
-            this.emojiDrawers.forEach(drawer => {
-                container.append(drawer.nativeElement);
-            });
-            return this.g;
-        }
-        return undefined;
-    }
-    destroy() {
-        if (this.g) {
-            this.g.remove();
-        }
-        this.emojiDrawers.forEach(drawer => drawer.destroy());
-        this.emojiDrawers = [];
-    }
-}
-
-class BaseDrawer {
-    constructor(board) {
-        this.board = board;
-    }
-    draw(element, parentG, data) {
-        this.destroy();
-        if (this.canDraw && this.canDraw(element, data)) {
-            const g = this.baseDraw(element, data);
-            if (g) {
-                parentG.append(g);
-            }
-            if (hasAfterDraw(this)) {
-                this.afterDraw(element);
-            }
-        }
-    }
-    destroy() {
-        if (this.g) {
-            this.g.remove();
-        }
-    }
-}
-function hasAfterDraw(value) {
-    if (value.afterDraw) {
-        return true;
-    }
-    return false;
-}
-
-function findNewChildNodePath(board, element) {
-    const children = getNonAbstractChildren(element);
-    return PlaitBoard.findPath(board, element).concat(children.length);
-}
-function findNewSiblingNodePath(board, element) {
-    const path = PlaitBoard.findPath(board, element);
-    return Path$1.next(path);
-}
-
-class NodeInsertDrawer extends BaseDrawer {
-    canDraw(element) {
-        if (PlaitBoard.isReadonly(this.board) || (element === null || element === void 0 ? void 0 : element.isCollapsed)) {
-            return false;
-        }
-        return true;
-    }
-    baseDraw(element) {
-        const quickInsertG = createG();
-        this.g = quickInsertG;
-        quickInsertG.classList.add('quick-insert');
-        const node = MindElement.getNode(element);
-        const layout = MindQueries.getLayoutByElement(element);
-        const isHorizontal = isHorizontalLayout(layout);
-        let linkDirection = getLayoutDirection(node, isHorizontal);
-        if (isIndentedLayout(layout)) {
-            linkDirection = isTopLayout(layout) ? LayoutDirection.top : LayoutDirection.bottom;
-        }
-        const isUnderlineShape = getShapeByElement(this.board, element) === MindElementShape.underline;
-        const nodeClient = getRectangleByNode(node);
-        const branchWidth = getBranchWidthByMindElement(this.board, element);
-        const branchColor = PlaitMind.isMind(element)
-            ? getNextBranchColor(this.board, element)
-            : getBranchColorByMindElement(this.board, element);
-        let distance = 8;
-        let placement = [HorizontalPlacement.right, VerticalPlacement.middle];
-        transformPlacement(placement, linkDirection);
-        // underline shape and horizontal
-        if (isHorizontal && isUnderlineShape && !element.isRoot) {
-            placement[1] = VerticalPlacement.bottom;
-        }
-        let beginPoint = getPointByPlacement(nodeClient, placement);
-        if (element.children.length > 0 && !element.isRoot) {
-            beginPoint = moveXOfPoint(beginPoint, EXTEND_DIAMETER + 8, linkDirection);
-            distance = 5;
-        }
-        const endPoint = moveXOfPoint(beginPoint, distance, linkDirection);
-        const circleCenter = moveXOfPoint(endPoint, 8, linkDirection);
-        const line = PlaitBoard.getRoughSVG(this.board).line(beginPoint[0], beginPoint[1], endPoint[0], endPoint[1], {
-            stroke: branchColor,
-            strokeWidth: branchWidth
-        });
-        const circle = PlaitBoard.getRoughSVG(this.board).circle(circleCenter[0], circleCenter[1], EXTEND_DIAMETER, {
-            fill: QUICK_INSERT_CIRCLE_COLOR,
-            stroke: QUICK_INSERT_CIRCLE_COLOR,
-            fillStyle: 'solid'
-        });
-        const HLineBeginPoint = [circleCenter[0] - 5, circleCenter[1]];
-        const HLineEndPoint = [circleCenter[0] + 5, circleCenter[1]];
-        const VLineBeginPoint = [circleCenter[0], circleCenter[1] - 5];
-        const VLineEndPoint = [circleCenter[0], circleCenter[1] + 5];
-        const innerCrossHLine = PlaitBoard.getRoughSVG(this.board).line(HLineBeginPoint[0], HLineBeginPoint[1], HLineEndPoint[0], HLineEndPoint[1], {
-            stroke: QUICK_INSERT_INNER_CROSS_COLOR,
-            strokeWidth: 2
-        });
-        const innerCrossVLine = PlaitBoard.getRoughSVG(this.board).line(VLineBeginPoint[0], VLineBeginPoint[1], VLineEndPoint[0], VLineEndPoint[1], {
-            stroke: QUICK_INSERT_INNER_CROSS_COLOR,
-            strokeWidth: 2
-        });
-        quickInsertG.appendChild(line);
-        quickInsertG.appendChild(circle);
-        quickInsertG.appendChild(innerCrossHLine);
-        quickInsertG.appendChild(innerCrossVLine);
-        return quickInsertG;
-    }
-    afterDraw(element) {
-        if (!this.g) {
-            throw new Error(`can not find quick insert g`);
-        }
-        fromEvent(this.g, 'mousedown')
-            .pipe(take(1))
-            .subscribe(e => {
-            e.stopPropagation();
-        });
-        fromEvent(this.g, 'mouseup')
-            .pipe(take(1))
-            .subscribe(() => {
-            const path = findNewChildNodePath(this.board, element);
-            insertMindElement(this.board, element, path);
-        });
-    }
-}
-
-function drawAbstractIncludedOutline(board, roughSVG, element, activeHandlePosition, resizingLocation) {
-    const abstractIncludedG = createG();
-    const parentElement = MindElement.getParent(element);
-    const nodeLayout = MindQueries.getCorrectLayoutByElement(board, element);
-    const isHorizontal = isHorizontalLayout(nodeLayout);
-    const includedElements = parentElement.children.slice(element.start, element.end + 1);
-    let abstractRectangle = getRectangleByElements(board, includedElements, true);
-    abstractRectangle = RectangleClient.getOutlineRectangle(abstractRectangle, -ABSTRACT_INCLUDED_OUTLINE_OFFSET);
-    if (resizingLocation) {
-        abstractRectangle = getRectangleByResizingLocation(abstractRectangle, resizingLocation, activeHandlePosition, isHorizontal);
-    }
-    const rectangle = drawAbstractRoundRectangle(roughSVG, abstractRectangle.x, abstractRectangle.y, abstractRectangle.x + abstractRectangle.width, abstractRectangle.y + abstractRectangle.height, isHorizontal, {
-        stroke: PRIMARY_COLOR,
-        strokeWidth: 1,
-        fillStyle: 'solid'
-    });
-    const startPlacement = [HorizontalPlacement.center, VerticalPlacement.top];
-    const endPlacement = [HorizontalPlacement.center, VerticalPlacement.bottom];
-    const linkDirection = getLayoutDirection(MindElement.getNode(element), isHorizontal);
-    transformPlacement(startPlacement, linkDirection);
-    transformPlacement(endPlacement, linkDirection);
-    let startCenterPoint = getPointByPlacement(abstractRectangle, startPlacement);
-    let endCenterPoint = getPointByPlacement(abstractRectangle, endPlacement);
-    const startPoint1 = moveXOfPoint(startCenterPoint, -ABSTRACT_HANDLE_LENGTH / 2, linkDirection);
-    const startPoint2 = moveXOfPoint(startCenterPoint, ABSTRACT_HANDLE_LENGTH / 2, linkDirection);
-    const endPoint1 = moveXOfPoint(endCenterPoint, -ABSTRACT_HANDLE_LENGTH / 2, linkDirection);
-    const endPoint2 = moveXOfPoint(endCenterPoint, ABSTRACT_HANDLE_LENGTH / 2, linkDirection);
-    const startHandle = roughSVG.line(startPoint1[0], startPoint1[1], startPoint2[0], startPoint2[1], getHandleOption(activeHandlePosition === AbstractHandlePosition.start));
-    const endHandle = roughSVG.line(endPoint1[0], endPoint1[1], endPoint2[0], endPoint2[1], getHandleOption(activeHandlePosition === AbstractHandlePosition.end));
-    handleBoardClass(board, activeHandlePosition, isHorizontal);
-    startHandle.setAttribute('stroke-linecap', 'round');
-    endHandle.setAttribute('stroke-linecap', 'round');
-    abstractIncludedG.append(startHandle);
-    abstractIncludedG.append(endHandle);
-    abstractIncludedG.append(rectangle);
-    return abstractIncludedG;
-}
-function getHandleOption(isHover) {
-    return isHover
-        ? {
-            stroke: PRIMARY_COLOR,
-            strokeWidth: 4,
-            fillStyle: 'solid'
-        }
-        : {
-            stroke: ABSTRACT_HANDLE_COLOR,
-            strokeWidth: 3,
-            fillStyle: 'solid'
-        };
-}
-function handleBoardClass(board, activeHandlePosition, isHorizontal) {
-    if (activeHandlePosition) {
-        if (isHorizontal) {
-            PlaitBoard.getBoardContainer(board).classList.add('abstract-resizing-horizontal');
-        }
-        else {
-            PlaitBoard.getBoardContainer(board).classList.add('abstract-resizing-vertical');
-        }
-    }
-    else {
-        PlaitBoard.getBoardContainer(board).classList.remove('abstract-resizing-horizontal');
-        PlaitBoard.getBoardContainer(board).classList.remove('abstract-resizing-vertical');
-    }
-}
-function drawAbstractRoundRectangle(rs, x1, y1, x2, y2, isHorizontal, options) {
-    const width = Math.abs(x1 - x2);
-    const height = Math.abs(y1 - y2);
-    const radius = 5;
-    const handleGap = 4;
-    const handleLength = 10;
-    const handleSpace = handleLength + handleGap * 2;
-    if (isHorizontal) {
-        const handleSideLine = (width - handleSpace - radius * 2) / 2;
-        const sideLine = height - radius * 2;
-        return rs.path(`M${x1 + radius},${y1}
-            l${handleSideLine},0
-            m${handleSpace},0
-            l${handleSideLine},0
-            a${radius},${radius},0,0,1,${radius},${radius}
-            l0,${sideLine}
-            a${radius},${radius},0,0,1,-${radius},${radius}
-            l-${handleSideLine},0
-            m-${handleSpace},0
-            l-${handleSideLine},0
-            a${radius},${radius},0,0,1,-${radius},-${radius}
-            l0,-${sideLine}
-            a${radius},${radius},0,0,1,${radius},-${radius}`, options);
-    }
-    else {
-        const handleSideLine = (height - handleSpace - radius * 2) / 2;
-        const sideLine = width - radius * 2;
-        return rs.path(`M${x1 + radius},${y1}
-            l${sideLine},0
-            a${radius},${radius},0,0,1,${radius},${radius}
-            l0,${handleSideLine}
-            m0,${handleSpace}
-            l0,${handleSideLine}
-            a${radius},${radius},0,0,1,-${radius},${radius}
-            l-${sideLine},0
-            a${radius},${radius},0,0,1,-${radius},-${radius}
-            l0,-${handleSideLine}
-            m0,-${handleSpace}
-            l0,-${handleSideLine}
-            a${radius},${radius},0,0,1,${radius},-${radius}`, options);
-    }
-}
-
-class NodeActiveDrawer extends BaseDrawer {
-    canDraw(element, data) {
-        if (data.selected) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    }
-    baseDraw(element, data) {
-        const activeG = createG();
-        this.g = activeG;
-        if (AbstractNode.isAbstract(element)) {
-            this.abstractOutlineG = drawAbstractIncludedOutline(this.board, PlaitBoard.getRoughSVG(this.board), element);
-            activeG.append(this.abstractOutlineG);
-        }
-        const node = MindElement.getNode(element);
-        const rectangle = getRectangleByNode(node);
-        const activeStrokeWidth = 2;
-        // add 0.1 to avoid white gap
-        const offset = (getStrokeWidthByElement(this.board, element) + activeStrokeWidth) / 2 - 0.1;
-        const activeRectangle = RectangleClient.getOutlineRectangle(rectangle, -offset);
-        const strokeG = drawRoundRectangle(PlaitBoard.getRoughSVG(this.board), activeRectangle.x, activeRectangle.y, activeRectangle.x + activeRectangle.width, activeRectangle.y + activeRectangle.height, { stroke: PRIMARY_COLOR, strokeWidth: activeStrokeWidth, fill: '' }, true, DefaultNodeStyle.shape.rectangleRadius + offset);
-        this.g.appendChild(strokeG);
-        return activeG;
-    }
-    updateAbstractOutline(element, activeHandlePosition, resizingLocation) {
-        if (this.abstractOutlineG) {
-            this.abstractOutlineG.remove();
-        }
-        this.abstractOutlineG = drawAbstractIncludedOutline(this.board, PlaitBoard.getRoughSVG(this.board), element, activeHandlePosition, resizingLocation);
-        this.g.append(this.abstractOutlineG);
-    }
-}
-
-class CollapseDrawer extends BaseDrawer {
-    canDraw(element) {
-        if (element.children.length && !PlaitMind.isMind(element)) {
-            return true;
-        }
-        return false;
-    }
-    baseDraw(element) {
-        const collapseG = createG();
-        this.g = collapseG;
-        collapseG.classList.add('collapse-container');
-        const node = MindElement.getNode(element);
-        const stroke = getBranchColorByMindElement(this.board, element);
-        const branchWidth = getBranchWidthByMindElement(this.board, element);
-        const layout = MindQueries.getLayoutByElement(element);
-        const isUnderlineShape = getShapeByElement(this.board, element) === MindElementShape.underline;
-        const isHorizontal = isHorizontalLayout(layout);
-        const nodeClient = getRectangleByNode(node);
-        let linkDirection = getLayoutDirection(node, isHorizontal);
-        if (isIndentedLayout(layout)) {
-            linkDirection = isTopLayout(layout) ? LayoutDirection.top : LayoutDirection.bottom;
-        }
-        let placement = [HorizontalPlacement.right, VerticalPlacement.middle];
-        transformPlacement(placement, linkDirection);
-        // underline shape and horizontal
-        if (isHorizontal && isUnderlineShape && !element.isRoot) {
-            placement[1] = VerticalPlacement.bottom;
-        }
-        let startPoint = getPointByPlacement(nodeClient, placement);
-        const endPoint = moveXOfPoint(startPoint, EXTEND_OFFSET, linkDirection);
-        const circleCenter = moveXOfPoint(endPoint, EXTEND_DIAMETER / 2, linkDirection);
-        const arrowPoints = this.getArrowPoints(circleCenter, linkDirection);
-        const arrowLine = drawLinearPath(arrowPoints, {
-            stroke,
-            strokeWidth: 2
-        });
-        const extendLine = PlaitBoard.getRoughSVG(this.board).line(startPoint[0], startPoint[1], endPoint[0], endPoint[1], {
-            strokeWidth: branchWidth,
-            stroke
-        });
-        const badge = PlaitBoard.getRoughSVG(this.board).circle(circleCenter[0], circleCenter[1], EXTEND_DIAMETER, {
-            fill: stroke,
-            stroke,
-            fillStyle: 'solid'
-        });
-        const hideCircleG = PlaitBoard.getRoughSVG(this.board).circle(circleCenter[0], circleCenter[1], EXTEND_DIAMETER, {
-            fill: '#fff',
-            stroke,
-            strokeWidth: branchWidth > 3 ? 3 : branchWidth,
-            fillStyle: 'solid'
-        });
-        if (element.isCollapsed) {
-            let numberOffset = 0;
-            if (getChildrenCount(element) >= 10)
-                numberOffset = -2;
-            if (getChildrenCount(element) === 1)
-                numberOffset = 1;
-            const badgeText = createText(circleCenter[0] - 4 + numberOffset, circleCenter[1] + 4, stroke, `${getChildrenCount(element)}`);
-            badge.setAttribute('style', 'opacity: 0.15');
-            badgeText.setAttribute('style', 'font-size: 12px');
-            collapseG.appendChild(badge);
-            collapseG.appendChild(badgeText);
-            collapseG.appendChild(extendLine);
-        }
-        else {
-            collapseG.appendChild(hideCircleG);
-            collapseG.appendChild(arrowLine);
-        }
-        collapseG.appendChild(extendLine);
-        return collapseG;
-    }
-    afterDraw(element) {
-        if (!this.g) {
-            throw new Error(`can not find quick insert g`);
-        }
-        fromEvent(this.g, 'mouseup')
-            .pipe(filter(() => !PlaitBoard.isPointer(this.board, PlaitPointerType.hand) || !!PlaitBoard.isReadonly(this.board)), take(1))
-            .subscribe(() => {
-            const isCollapsed = !element.isCollapsed;
-            const newElement = { isCollapsed };
-            const path = PlaitBoard.findPath(this.board, element);
-            Transforms.setNode(this.board, newElement, path);
-        });
-    }
-    getArrowPoints(circleCenter, linkDirection) {
-        let arrowTopPoint = moveXOfPoint(circleCenter, 2, linkDirection);
-        arrowTopPoint = moveYOfPoint(arrowTopPoint, 4, linkDirection);
-        const arrowMiddlePoint = moveXOfPoint(circleCenter, -2, linkDirection);
-        let arrowBottomPoint = moveXOfPoint(circleCenter, 2, linkDirection);
-        arrowBottomPoint = moveYOfPoint(arrowBottomPoint, -4, linkDirection);
-        return [arrowTopPoint, arrowMiddlePoint, arrowBottomPoint];
-    }
-}
-
-class NodeImageDrawer {
-    constructor(board, viewContainerRef) {
-        this.board = board;
-        this.viewContainerRef = viewContainerRef;
-        this.componentRef = null;
-    }
-    drawImage(nodeG, element) {
-        if (!MindElement.hasImage(element)) {
-            this.destroy();
-            return;
-        }
-        this.g = createG();
-        const foreignRectangle = getImageForeignRectangle(this.board, element);
-        this.foreignObject = createForeignObject(foreignRectangle.x, foreignRectangle.y, foreignRectangle.width, foreignRectangle.height);
-        this.g.append(this.foreignObject);
-        const componentType = this.board.getPluginOptions(WithMindPluginKey).imageComponentType;
-        if (!componentType) {
-            throw new Error('Not implement drawEmoji method error.');
-        }
-        this.componentRef = this.viewContainerRef.createComponent(componentType);
-        this.componentRef.instance.board = this.board;
-        this.componentRef.instance.element = element;
-        this.componentRef.instance.imageItem = element.data.image;
-        this.componentRef.instance.cdr.markForCheck();
-        this.foreignObject.append(this.componentRef.instance.nativeElement);
-        nodeG.appendChild(this.g);
-    }
-    updateImage(nodeG, previous, current) {
-        var _a;
-        if (!MindElement.hasImage(previous) || !MindElement.hasImage(current)) {
-            this.drawImage(nodeG, current);
-            return;
-        }
-        if (previous !== current && this.componentRef) {
-            this.componentRef.instance.element = current;
-            this.componentRef.instance.imageItem = current.data.image;
-        }
-        const currentForeignObject = getImageForeignRectangle(this.board, current);
-        updateForeignObject(this.g, currentForeignObject.width, currentForeignObject.height, currentForeignObject.x, currentForeignObject.y);
-        // solve image lose on move node
-        if (this.foreignObject.children.length === 0) {
-            this.foreignObject.append(this.componentRef.instance.nativeElement);
-        }
-        (_a = this.componentRef) === null || _a === void 0 ? void 0 : _a.instance.cdr.markForCheck();
-    }
-    destroy() {
-        if (this.g) {
-            this.g.remove();
-        }
-        if (this.componentRef) {
-            this.componentRef.destroy();
-            this.componentRef = null;
-        }
-    }
-}
-
-// 1. When the text at the end has an italic attribute, the text is partially covered
-// 2. There will be some differences in the width measured by different browsers
-const WIDTH_BUFFER = 4;
-class MindNodeComponent extends PlaitPluginElementComponent {
-    constructor(viewContainerRef, cdr) {
-        super(cdr);
-        this.viewContainerRef = viewContainerRef;
-        this.cdr = cdr;
-        this.shapeG = null;
-        this.destroy$ = new Subject();
-        this.trackBy = (index, node) => {
-            return node.origin.id;
-        };
-    }
-    initializeDrawer() {
-        this.nodeEmojisDrawer = new NodeEmojisDrawer(this.board, this.viewContainerRef);
-        this.nodeInsertDrawer = new NodeInsertDrawer(this.board);
-        this.activeDrawer = new NodeActiveDrawer(this.board);
-        this.collapseDrawer = new CollapseDrawer(this.board);
-        this.imageDrawer = new NodeImageDrawer(this.board, this.viewContainerRef);
-        const plugins = this.board.getPluginOptions(WithMindPluginKey).textPlugins;
-        this.textManage = new TextManage(this.board, this.viewContainerRef, {
-            getRectangle: () => {
-                const rect = getTopicRectangleByNode(this.board, this.node);
-                return rect;
-            },
-            onValueChangeHandle: (textManageRef) => {
-                const width = textManageRef.width;
-                const height = textManageRef.height;
-                if (textManageRef.newValue) {
-                    MindTransforms.setTopic(this.board, this.element, textManageRef.newValue, width, height);
-                }
-                else {
-                    MindTransforms.setTopicSize(this.board, this.element, width, height);
-                }
-            },
-            textPlugins: plugins
-        });
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        this.initializeDrawer();
-        this.node = MindElement.getNode(this.element);
-        this.index = NODE_TO_INDEX.get(this.element) || 0;
-        this.roughSVG = PlaitBoard.getRoughSVG(this.board);
-        this.parentG = PlaitElement.getComponent(MindElement.getRoot(this.board, this.element)).rootG;
-        this.drawShape();
-        this.drawLink();
-        this.drawTopic();
-        this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: this.textManage.isEditing });
-        this.drawEmojis();
-        this.drawExtend();
-        this.imageDrawer.drawImage(this.g, this.element);
-        if (PlaitMind.isMind(this.context.parent)) {
-            this.g.classList.add('branch');
-        }
-    }
-    onContextChanged(value, previous) {
-        const newNode = MindElement.getNode(value.element);
-        const isEqualNode = RectangleClient.isEqual(this.node, newNode);
-        this.node = newNode;
-        const isChangeTheme = this.board.operations.find(op => op.type === 'set_theme');
-        if (!isEqualNode || value.element !== previous.element || isChangeTheme) {
-            this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: this.textManage.isEditing });
-            this.drawShape();
-            this.drawLink();
-            this.drawEmojis();
-            this.drawExtend();
-            this.imageDrawer.updateImage(this.g, previous.element, value.element);
-            this.updateTopic();
-        }
-        else {
-            const hasSameSelected = value.selected === previous.selected;
-            const hasSameParent = value.parent === previous.parent;
-            if (!hasSameSelected) {
-                this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: this.textManage.isEditing });
-            }
-            if (!hasSameParent) {
-                this.drawLink();
-            }
-        }
-    }
-    drawEmojis() {
-        const g = this.nodeEmojisDrawer.drawEmojis(this.element);
-        if (g) {
-            this.g.append(g);
-        }
-    }
-    drawShape() {
-        this.destroyShape();
-        const shape = getShapeByElement(this.board, this.node.origin);
-        switch (shape) {
-            case MindElementShape.roundRectangle:
-                this.shapeG = drawRoundRectangleByNode(this.board, this.node);
-                this.g.prepend(this.shapeG);
-                break;
-            default:
-                break;
-        }
-    }
-    destroyShape() {
-        if (this.shapeG) {
-            this.shapeG.remove();
-            this.shapeG = null;
-        }
-    }
-    drawLink() {
-        if (PlaitMind.isMind(this.element)) {
-            return;
-        }
-        const parent = MindElement.getParent(this.element);
-        const parentNode = MindElement.getNode(parent);
-        if (this.linkG) {
-            this.linkG.remove();
-        }
-        const layout = MindQueries.getLayoutByElement(parent);
-        if (AbstractNode.isAbstract(this.node.origin)) {
-            this.linkG = drawAbstractLink(this.board, this.node, isHorizontalLayout(layout));
-        }
-        else {
-            this.linkG = drawLink(this.board, parentNode, this.node, isHorizontalLayout(layout));
-        }
-        this.g.append(this.linkG);
-    }
-    destroyLine() {
-        if (this.linkG) {
-            this.linkG.remove();
-        }
-    }
-    drawExtend() {
-        this.destroyExtend();
-        this.extendG = createG();
-        this.extendG.classList.add('extend');
-        this.g.append(this.extendG);
-        if (this.element.isCollapsed) {
-            this.g.classList.add('collapsed');
-        }
-        else {
-            this.g.classList.remove('collapsed');
-        }
-        this.nodeInsertDrawer.draw(this.element, this.extendG);
-        this.collapseDrawer.draw(this.element, this.extendG);
-    }
-    destroyExtend() {
-        if (this.extendG) {
-            this.extendG.remove();
-        }
-    }
-    drawTopic() {
-        this.textManage.draw(this.element.data.topic);
-        this.g.append(this.textManage.g);
-        if (this.element.manualWidth) {
-            const width = NodeSpace.getNodeDynamicWidth(this.board, this.element);
-            this.textManage.updateWidth(width);
-        }
-    }
-    updateTopic() {
-        this.textManage.updateText(this.element.data.topic);
-        this.textManage.updateRectangle();
-        if (this.element.manualWidth) {
-            const width = NodeSpace.getNodeDynamicWidth(this.board, this.element);
-            this.textManage.updateWidth(width);
-        }
-    }
-    editTopic() {
-        this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: true });
-        // update text max-width when image width greater than topic default max width to cover node topic default max width style
-        const defaultMaxWidth = TOPIC_DEFAULT_MAX_WORD_COUNT * (PlaitMind.isMind(this.element) ? ROOT_TOPIC_FONT_SIZE : TOPIC_FONT_SIZE);
-        let hasMaxWidth = false;
-        if (!this.element.manualWidth && MindElement.hasImage(this.element) && this.element.data.image.width > defaultMaxWidth) {
-            const width = NodeSpace.getNodeDynamicWidth(this.board, this.element);
-            this.textManage.updateWidth(width);
-            hasMaxWidth = true;
-        }
-        this.textManage.edit((origin) => {
-            if (origin === ExitOrigin.default) {
-                this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: false });
-            }
-            if (hasMaxWidth) {
-                this.textManage.updateWidth(0);
-            }
-        });
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-        this.textManage.destroy();
-        this.nodeEmojisDrawer.destroy();
-        this.imageDrawer.destroy();
-        this.destroy$.next();
-        this.destroy$.complete();
-        if (ELEMENT_TO_NODE.get(this.element) === this.node) {
-            ELEMENT_TO_NODE.delete(this.element);
-        }
-    }
-}
-MindNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindNodeComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], 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"
-            [parent]="element"
-            [effect]="effect"
-            [parentG]="parentG"
-        ></plait-children>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PlaitChildrenElement, selector: "plait-children", inputs: ["board", "parent", "effect", "parentG"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindNodeComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'plait-mind-node',
-                    template: `
-        <plait-children
-            *ngIf="!element.isCollapsed"
-            [board]="board"
-            [parent]="element"
-            [effect]="effect"
-            [parentG]="parentG"
-        ></plait-children>
-    `,
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; } });
-
-class PlaitMindComponent extends MindNodeComponent {
-    ngOnInit() {
-        this.updateMindLayout();
-        super.ngOnInit();
-        this.g.classList.add('root');
-    }
-    beforeContextChange(value) {
-        if (value.element !== this.element && this.initialized) {
-            this.updateMindLayout(value.element);
-        }
-    }
-    updateMindLayout(element = this.element) {
-        const mindLayoutType = element.layout || getDefaultLayout();
-        this.root = GlobalLayout.layout(element, getLayoutOptions(this.board), mindLayoutType);
-        this.updateMindNodeLocation(element);
-    }
-    updateMindNodeLocation(element) {
-        const { x, y, hGap, vGap } = this.root;
-        const offsetX = x + hGap;
-        const offsetY = y + vGap;
-        depthFirstRecursion(this.root, node => {
-            node.x = node.x - offsetX + element.points[0][0];
-            node.y = node.y - offsetY + element.points[0][1];
-            ELEMENT_TO_NODE.set(node.origin, node);
-        });
-    }
-}
-PlaitMindComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitMindComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PlaitMindComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: PlaitMindComponent, selector: "plait-mind", usesInheritance: true, ngImport: i0, template: `
-        <plait-children [board]="board" [parent]="element" [effect]="effect" [parentG]="rootG"></plait-children>
-    `, isInline: true, dependencies: [{ kind: "component", type: i2.PlaitChildrenElement, selector: "plait-children", inputs: ["board", "parent", "effect", "parentG"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitMindComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'plait-mind',
-                    template: `
-        <plait-children [board]="board" [parent]="element" [effect]="effect" [parentG]="rootG"></plait-children>
-    `,
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }] });
-
-class MindModule {
-}
-MindModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MindModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.5", ngImport: i0, type: MindModule, declarations: [PlaitMindComponent, MindNodeComponent], imports: [CommonModule, TextModule, PlaitModule], exports: [PlaitMindComponent, MindNodeComponent] });
-MindModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindModule, imports: [CommonModule, TextModule, PlaitModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [PlaitMindComponent, MindNodeComponent],
-                    imports: [CommonModule, TextModule, PlaitModule],
-                    exports: [PlaitMindComponent, MindNodeComponent]
-                }]
-        }] });
-
-const DRAG_MOVE_BUFFER = 5;
-const withNodeDnd = (board) => {
-    const { pointerDown, pointerMove, globalPointerUp } = board;
-    let activeElements = [];
-    let correspondingElements = [];
-    let startPoint;
-    let dragFakeNodeG;
-    let fakeDropNodeG;
-    let dropTarget = null;
-    let targetPath;
-    board.pointerDown = (event) => {
-        if (PlaitBoard.isReadonly(board) ||
-            PlaitBoard.hasBeenTextEditing(board) ||
-            !PlaitBoard.isPointer(board, PlaitPointerType.selection) ||
-            !isMainPointer(event)) {
-            pointerDown(event);
-            return;
-        }
-        const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-        const selectedElements = getSelectedElements(board);
-        const hitTarget = getHitElements(board, { ranges: [{ anchor: point, focus: point }] }, (element) => {
-            return MindElement.isMindElement(board, element);
-        });
-        const targetElement = hitTarget && hitTarget.length === 1 ? hitTarget[0] : null;
-        if (targetElement &&
-            MindElement.isMindElement(board, targetElement) &&
-            !targetElement.isRoot &&
-            !AbstractNode.isAbstract(targetElement)) {
-            const targetElements = selectedElements.filter(element => MindElement.isMindElement(board, element) && !element.isRoot && !AbstractNode.isAbstract(element));
-            const isMultiple = selectedElements.length > 0 && selectedElements.includes(targetElement);
-            if (isMultiple) {
-                activeElements = targetElements;
-                startPoint = point;
-            }
-            else {
-                activeElements = [targetElement];
-                startPoint = point;
-            }
-        }
-        if (activeElements.length) {
-            correspondingElements = getOverallAbstracts(board, activeElements);
-        }
-        pointerDown(event);
-    };
-    board.pointerMove = (event) => {
-        if (!board.options.readonly && (activeElements === null || activeElements === void 0 ? void 0 : activeElements.length) && startPoint) {
-            // prevent text from being selected
-            event.preventDefault();
-            const endPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-            const distance = distanceBetweenPointAndPoint(startPoint[0], startPoint[1], endPoint[0], endPoint[1]);
-            if (distance < DRAG_MOVE_BUFFER) {
-                return;
-            }
-            setIsDragging(board, true);
-            fakeDropNodeG === null || fakeDropNodeG === void 0 ? void 0 : fakeDropNodeG.remove();
-            const detectPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-            dropTarget = detectDropTarget(board, detectPoint, dropTarget, [...activeElements, ...correspondingElements]);
-            if (dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.target) {
-                targetPath = getPathByDropTarget(board, dropTarget);
-                fakeDropNodeG = drawFakeDropNode(board, dropTarget, targetPath);
-                PlaitBoard.getHost(board).appendChild(fakeDropNodeG);
-            }
-            const offsetX = endPoint[0] - startPoint[0];
-            const offsetY = endPoint[1] - startPoint[1];
-            dragFakeNodeG === null || dragFakeNodeG === void 0 ? void 0 : dragFakeNodeG.remove();
-            dragFakeNodeG = createG();
-            [...activeElements, ...correspondingElements].forEach(element => {
-                addActiveOnDragOrigin(element);
-            });
-            activeElements.forEach(element => {
-                const nodeG = drawFakeDragNode(board, element, offsetX, offsetY);
-                dragFakeNodeG === null || dragFakeNodeG === void 0 ? void 0 : dragFakeNodeG.appendChild(nodeG);
-            });
-            PlaitBoard.getHost(board).appendChild(dragFakeNodeG);
-        }
-        pointerMove(event);
-    };
-    board.globalPointerUp = (event) => {
-        const firstLevelElements = getFirstLevelElement(activeElements);
-        if (!board.options.readonly && firstLevelElements.length) {
-            firstLevelElements.push(...correspondingElements);
-            if (isDragging(board)) {
-                firstLevelElements.forEach(element => {
-                    removeActiveOnDragOrigin(element);
-                });
-            }
-            if (dropTarget) {
-                const targetPathRef = board.pathRef(targetPath);
-                const targetPreviousPathRef = Path.hasPrevious(targetPath) && board.pathRef(Path.previous(targetPath));
-                const targetElementPathRef = board.pathRef(PlaitBoard.findPath(board, dropTarget.target));
-                let abstractRefs = getValidAbstractRefs(board, firstLevelElements);
-                const normalElements = firstLevelElements
-                    .filter(element => !abstractRefs.some(refs => refs.abstract === element))
-                    .map(element => {
-                    if (AbstractNode.isAbstract(element)) {
-                        return adjustAbstractToNode(element);
-                    }
-                    return element;
-                });
-                const hasPreviousNode = targetPath[targetPath.length - 1] !== 0;
-                if (hasPreviousNode) {
-                    const previousElement = PlaitNode.get(board, Path.previous(targetPath));
-                    const correspondingAbstract = getCorrespondingAbstract(previousElement);
-                    const targetHasCorrespondAbstract = correspondingAbstract && correspondingAbstract.end !== targetPath[targetPath.length - 1] - 1;
-                    if (targetHasCorrespondAbstract) {
-                        const adjustedNode = abstractRefs.map(ref => {
-                            return adjustAbstractToNode(ref.abstract);
-                        });
-                        normalElements.push(...adjustedNode);
-                        abstractRefs = [];
-                    }
-                }
-                const effectedAbstracts = deleteElementHandleAbstract(board, firstLevelElements);
-                insertElementHandleAbstract(board, targetPath, normalElements.length, false, effectedAbstracts);
-                MindTransforms.setAbstractsByRefs(board, effectedAbstracts);
-                let refs = deleteElementsHandleRightNodeCount(board, firstLevelElements);
-                const parent = PlaitNode.get(board, Path.parent(targetPath));
-                const shouldChangeRoot = isDropStandardRight(parent, dropTarget);
-                if (shouldChangeRoot && targetElementPathRef.current) {
-                    refs = insertElementHandleRightNodeCount(board, targetElementPathRef.current.slice(0, 1), normalElements.length, refs);
-                }
-                MindTransforms.setRightNodeCountByRefs(board, refs);
-                MindTransforms.removeElements(board, firstLevelElements);
-                let insertPath = targetPathRef.current;
-                const parentPath = Path.parent(targetPathRef.current || targetPath);
-                if (!insertPath) {
-                    //当插入位置和选中节点位置相同时，使用记录的 previousPath
-                    const previousPath = targetPreviousPathRef && targetPreviousPathRef.unref();
-                    if (previousPath) {
-                        insertPath = Path.next(previousPath);
-                    }
-                    else {
-                        const parent = PlaitNode.get(board, parentPath);
-                        const children = getNonAbstractChildren(parent);
-                        insertPath = [...parentPath, children.length || 0];
-                    }
-                }
-                MindTransforms.insertNodes(board, normalElements, insertPath);
-                if (abstractRefs.length) {
-                    MindTransforms.insertAbstractNodes(board, abstractRefs, normalElements, insertPath);
-                }
-                if (targetElementPathRef.current &&
-                    targetPathRef.current &&
-                    Path.isAncestor(targetElementPathRef.current, targetPathRef.current) &&
-                    dropTarget.target.isCollapsed) {
-                    Transforms.setNode(board, { isCollapsed: false }, targetElementPathRef.current);
-                }
-                targetElementPathRef.unref();
-                targetPathRef.unref();
-                let setActiveElements = [];
-                depthFirstRecursion(board, node => {
-                    const isSelected = activeElements.some(element => element.id === node.id);
-                    if (isSelected) {
-                        setActiveElements.push(node);
-                    }
-                });
-                Transforms.setSelectionWithTemporaryElements(board, setActiveElements);
-            }
-            setIsDragging(board, false);
-            activeElements = [];
-            dragFakeNodeG === null || dragFakeNodeG === void 0 ? void 0 : dragFakeNodeG.remove();
-            dragFakeNodeG = undefined;
-            fakeDropNodeG === null || fakeDropNodeG === void 0 ? void 0 : fakeDropNodeG.remove();
-            fakeDropNodeG = undefined;
-            dropTarget = null;
-        }
-        globalPointerUp(event);
-    };
-    return board;
-};
-
-const buildClipboardData = (board, selectedElements, startPoint) => {
-    let result = [];
-    // get overall abstract
-    const overallAbstracts = getOverallAbstracts(board, selectedElements);
-    // get valid abstract refs
-    const validAbstractRefs = getValidAbstractRefs(board, [...selectedElements, ...overallAbstracts]);
-    // keep correct order
-    const newSelectedElements = selectedElements.filter(value => !validAbstractRefs.find(ref => ref.abstract === value));
-    newSelectedElements.push(...validAbstractRefs.map(value => value.abstract));
-    const selectedMindNodes = newSelectedElements.map(value => MindElement.getNode(value));
-    newSelectedElements.forEach((element, index) => {
-        // handle relative location
-        const nodeRectangle = getRectangleByNode(selectedMindNodes[index]);
-        const points = [[nodeRectangle.x - startPoint[0], nodeRectangle.y - startPoint[1]]];
-        // handle invalid abstract
-        const abstractRef = validAbstractRefs.find(ref => ref.abstract === element);
-        if (AbstractNode.isAbstract(element) && abstractRef) {
-            const { start, end } = getRelativeStartEndByAbstractRef(abstractRef, newSelectedElements);
-            result.push(Object.assign(Object.assign({}, element), { points,
-                start,
-                end }));
-        }
-        else {
-            if (AbstractNode.isAbstract(element)) {
-                let newElement = Object.assign(Object.assign({}, element), { points });
-                delete newElement.start;
-                delete newElement.end;
-                result.push(newElement);
-            }
-            else {
-                result.push(Object.assign(Object.assign({}, element), { points: points }));
-            }
-        }
-    });
-    return result;
-};
-const setMindClipboardData = (data, elements) => {
-    const text = elements.reduce((string, currentNode) => {
-        return string + extractNodesText(currentNode);
-    }, '');
-    setClipboardData(data, elements);
-    setClipboardDataByText(data, text);
-};
-const insertClipboardData = (board, elements, targetPoint) => {
-    let newElement, path;
-    const selectedElements = getSelectedElements(board);
-    let newELements = [];
-    const hasTargetParent = selectedElements.length === 1;
-    const targetParent = selectedElements[0];
-    const targetParentPath = targetParent && PlaitBoard.findPath(board, targetParent);
-    const nonAbstractChildrenLength = targetParent && getNonAbstractChildren(targetParent).length;
-    elements.forEach((item, index) => {
-        newElement = copyNewNode(item);
-        if (hasTargetParent) {
-            if (item.isRoot) {
-                newElement = adjustRootToNode(board, newElement);
-                const styles = PlaitMind.isMind(targetParent) ? { fontFamily: BRANCH_FONT_FAMILY } : { fontFamily: DEFAULT_FONT_FAMILY };
-                const { width, height } = getTextSize(board, newElement.data.topic, TOPIC_DEFAULT_MAX_WORD_COUNT, Object.assign(Object.assign({}, styles), { width: newElement.manualWidth ? newElement.manualWidth : undefined }));
-                newElement.width = Math.max(width, getNodeDefaultFontSize());
-                newElement.height = height;
-            }
-            // handle abstract start and end
-            if (AbstractNode.isAbstract(newElement)) {
-                newElement.start = newElement.start + nonAbstractChildrenLength;
-                newElement.end = newElement.end + nonAbstractChildrenLength;
-            }
-            path = [...targetParentPath, nonAbstractChildrenLength + index];
-        }
-        else {
-            const point = [targetPoint[0] + item.points[0][0], targetPoint[1] + item.points[0][1]];
-            newElement.points = [point];
-            if (AbstractNode.isAbstract(item)) {
-                newElement = adjustAbstractToNode(newElement);
-            }
-            if (!item.isRoot) {
-                newElement = adjustNodeToRoot(board, newElement);
-            }
-            path = [board.children.length];
-        }
-        newELements.push(newElement);
-        Transforms.insertNode(board, newElement, path);
-        return;
-    });
-    Transforms.setSelectionWithTemporaryElements(board, newELements);
-};
-const insertClipboardText = (board, targetParent, text) => {
-    const styles = PlaitMind.isMind(targetParent) ? { fontFamily: BRANCH_FONT_FAMILY } : { fontFamily: DEFAULT_FONT_FAMILY };
-    const { width, height } = getTextSize(board, text, TOPIC_DEFAULT_MAX_WORD_COUNT, styles);
-    const newElement = createMindElement(text, Math.max(width, getFontSizeBySlateElement(text)), height, {});
-    Transforms.insertNode(board, newElement, findNewChildNodePath(board, targetParent));
-    return;
-};
-
-const withAbstract = (board) => {
-    const newBoard = board;
-    const { mousedown, mousemove, mouseup } = board;
-    let activeAbstractElement;
-    let abstractHandlePosition;
-    let touchedAbstract;
-    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));
-        activeAbstractElement = activeAbstractElements.find(element => {
-            abstractHandlePosition = getHitAbstractHandle(board, element, point);
-            return abstractHandlePosition;
-        });
-        if (activeAbstractElement) {
-            if (newBoard === null || newBoard === void 0 ? void 0 : newBoard.onAbstractResize) {
-                newBoard.onAbstractResize(AbstractResizeState.start);
-            }
-            startPoint = point;
-            return;
-        }
-        mousedown(event);
-    };
-    board.mousemove = (event) => {
-        getSelectedElements(board);
-        const host = BOARD_TO_HOST.get(board);
-        const endPoint = transformPoint(board, toPoint(event.x, event.y, host));
-        touchedAbstract = handleTouchedAbstract(board, touchedAbstract, endPoint);
-        if (abstractHandlePosition && activeAbstractElement) {
-            // prevent text from being selected
-            event.preventDefault();
-            const abstractComponent = PlaitElement.getComponent(activeAbstractElement);
-            const element = abstractComponent.element;
-            const nodeLayout = MindQueries.getCorrectLayoutByElement(board, activeAbstractElement);
-            const isHorizontal = isHorizontalLayout(nodeLayout);
-            const parentElement = MindElement.getParent(element);
-            let children = parentElement.children;
-            const parentLayout = MindQueries.getLayoutByElement(parentElement);
-            if (isStandardLayout(parentLayout)) {
-                const rightNodeCount = parentElement.rightNodeCount;
-                const { leftChildren, rightChildren } = separateChildren(parentElement);
-                if (activeAbstractElement.end < rightNodeCount) {
-                    children = rightChildren;
-                }
-                if (activeAbstractElement.start >= rightNodeCount) {
-                    children = leftChildren;
-                }
-            }
-            if (newBoard === null || newBoard === void 0 ? void 0 : newBoard.onAbstractResize) {
-                newBoard.onAbstractResize(AbstractResizeState.resizing);
-            }
-            const resizingLocation = isHorizontal ? endPoint[1] : endPoint[0];
-            const parent = MindElement.getNode(parentElement);
-            const scope = getLocationScope(board, abstractHandlePosition, children, element, parent, isHorizontal);
-            const location = Math.min(scope.max, Math.max(scope.min, resizingLocation));
-            let locationIndex = findLocationLeftIndex(board, children, location, isHorizontal);
-            const isPropertyUnchanged = (abstractHandlePosition === AbstractHandlePosition.start &&
-                locationIndex + 1 === activeAbstractElement.start) ||
-                (abstractHandlePosition === AbstractHandlePosition.end && locationIndex === activeAbstractElement.end);
-            if (isPropertyUnchanged) {
-                newProperty = undefined;
-            }
-            else {
-                if (isStandardLayout(parent.layout)) {
-                    const rightNodeCount = parent.origin.rightNodeCount;
-                    let start = element.start;
-                    if (start >= rightNodeCount) {
-                        locationIndex += rightNodeCount;
-                    }
-                }
-                newProperty =
-                    abstractHandlePosition === AbstractHandlePosition.start ? { start: locationIndex + 1 } : { end: locationIndex };
-            }
-            abstractComponent.activeDrawer.updateAbstractOutline(activeAbstractElement, abstractHandlePosition, location);
-        }
-        mousemove(event);
-    };
-    board.mouseup = (event) => {
-        startPoint = undefined;
-        abstractHandlePosition = undefined;
-        if (activeAbstractElement) {
-            if (newBoard === null || newBoard === void 0 ? void 0 : newBoard.onAbstractResize) {
-                newBoard.onAbstractResize(AbstractResizeState.end);
-            }
-            if (newProperty) {
-                const path = PlaitBoard.findPath(board, activeAbstractElement);
-                Transforms.setNode(board, newProperty, path);
-            }
-            else {
-                const abstractComponent = PlaitElement.getComponent(activeAbstractElement);
-                abstractComponent.activeDrawer.updateAbstractOutline(activeAbstractElement);
-            }
-            activeAbstractElement = undefined;
-        }
-        mouseup(event);
-    };
-    return board;
-};
-
-const withMindExtend = (board) => {
-    const newBoard = board;
-    newBoard.drawEmoji = (emoji, element) => {
-        throw new Error('Not implement drawEmoji method error.');
-    };
-    board.setPluginOptions(WithMindPluginKey, { spaceBetweenEmojis: 4, emojiPadding: 0 });
-    return newBoard;
-};
-
-const DefaultHotkey = 'm';
-const withCreateMind = (board) => {
-    const newBoard = board;
-    const { keydown, mousedown, mousemove, mouseup } = board;
-    let fakeCreateNodeRef = null;
-    newBoard.mousedown = (event) => {
-        if (fakeCreateNodeRef && PlaitBoard.isPointer(board, MindPointerType.mind)) {
-            const currentOptions = board.getPluginOptions(PlaitPluginKey.withSelection);
-            board.setPluginOptions(PlaitPluginKey.withSelection, {
-                isDisabledSelect: true
-            });
-            setTimeout(() => {
-                board.setPluginOptions(PlaitPluginKey.withSelection, Object.assign({}, currentOptions));
-            }, 0);
-        }
-        mousedown(event);
-    };
-    newBoard.mousemove = (event) => {
-        if (PlaitBoard.isReadonly(board)) {
-            mousemove(event);
-            return;
-        }
-        if (PlaitBoard.isPointer(board, MindPointerType.mind)) {
-            throttleRAF(() => {
-                const movingPoint = PlaitBoard.getMovingPointInBoard(board);
-                if (movingPoint) {
-                    const targetPoint = transformPoint(board, toPoint(movingPoint[0], movingPoint[1], PlaitBoard.getHost(board)));
-                    const emptyMind = createEmptyMind(targetPoint);
-                    const nodeRectangle = getRectangleByElement(newBoard, targetPoint, emptyMind);
-                    const nodeG = drawRoundRectangleByElement(board, nodeRectangle, emptyMind);
-                    const topicRectangle = getTopicRectangleByElement(newBoard, nodeRectangle, emptyMind);
-                    if (!fakeCreateNodeRef) {
-                        const textManage = new TextManage(board, PlaitBoard.getComponent(board).viewContainerRef, {
-                            getRectangle: () => {
-                                return topicRectangle;
-                            }
-                        });
-                        PlaitBoard.getComponent(board)
-                            .viewContainerRef.injector.get(NgZone)
-                            .run(() => {
-                            textManage.draw(emptyMind.data.topic);
-                        });
-                        fakeCreateNodeRef = {
-                            g: createG(),
-                            nodeG,
-                            textManage
-                        };
-                        fakeCreateNodeRef.g.classList.add('root');
-                        fakeCreateNodeRef.g.setAttribute('plait-mind-temporary', 'true');
-                        PlaitBoard.getHost(board).append(fakeCreateNodeRef.g);
-                        fakeCreateNodeRef.g.append(...[fakeCreateNodeRef.nodeG, textManage.g]);
-                    }
-                    else {
-                        fakeCreateNodeRef.textManage.updateRectangle(topicRectangle);
-                        fakeCreateNodeRef.nodeG.remove();
-                        fakeCreateNodeRef.nodeG = nodeG;
-                        fakeCreateNodeRef.g.append(nodeG);
-                        fakeCreateNodeRef.g.append(fakeCreateNodeRef.textManage.g);
-                    }
-                }
-            });
-        }
-        else {
-            destroy();
-        }
-        mousemove(event);
-    };
-    newBoard.mouseup = (event) => {
-        const movingPoint = PlaitBoard.getMovingPointInBoard(board);
-        if (movingPoint && fakeCreateNodeRef && PlaitBoard.isPointer(board, MindPointerType.mind)) {
-            const targetPoint = transformPoint(board, toPoint(movingPoint[0], movingPoint[1], PlaitBoard.getHost(board)));
-            const emptyMind = createEmptyMind(targetPoint);
-            Transforms.insertNode(board, emptyMind, [board.children.length]);
-            clearSelectedElement(board);
-            addSelectedElement(board, emptyMind);
-            BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
-        }
-        destroy();
-        mouseup(event);
-    };
-    board.keydown = (event) => {
-        if (PlaitBoard.isReadonly(board) || getSelectedElements(board).length > 0) {
-            keydown(event);
-            return;
-        }
-        if (event.key === DefaultHotkey && !PlaitBoard.isPointer(board, MindPointerType.mind)) {
-            BoardTransforms.updatePointerType(board, MindPointerType.mind);
-            event.preventDefault();
-            return;
-        }
-        keydown(event);
-    };
-    function destroy() {
-        if (fakeCreateNodeRef) {
-            fakeCreateNodeRef.textManage.destroy();
-            fakeCreateNodeRef.g.remove();
-            fakeCreateNodeRef = null;
-        }
-    }
-    return newBoard;
-};
-
-const withMindHotkey = (baseBoard) => {
-    const board = baseBoard;
-    const { keydown, deleteFragment } = board;
-    board.keydown = (event) => {
-        const selectedElements = getSelectedElements(board);
-        const isSingleSelection = selectedElements.length === 1;
-        const isSingleMindElement = selectedElements.length === 1 && MindElement.isMindElement(board, selectedElements[0]);
-        const targetElement = selectedElements[0];
-        if (isExpandHotkey(event) && isSingleMindElement && !PlaitMind.isMind(targetElement)) {
-            if (targetElement.children && targetElement.children.length > 0) {
-                Transforms.setNode(board, { isCollapsed: targetElement.isCollapsed ? false : true }, PlaitBoard.findPath(board, targetElement));
-                return;
-            }
-        }
-        if (!PlaitBoard.isReadonly(board)) {
-            if (isTabHotkey(event) && isSingleMindElement) {
-                event.preventDefault();
-                removeSelectedElement(board, targetElement);
-                const targetElementPath = PlaitBoard.findPath(board, targetElement);
-                if (targetElement.isCollapsed) {
-                    const newElement = { isCollapsed: false };
-                    PlaitHistoryBoard.withoutSaving(board, () => {
-                        Transforms.setNode(board, newElement, targetElementPath);
-                    });
-                }
-                insertMindElement(board, targetElement, findNewChildNodePath(board, targetElement));
-                return;
-            }
-            if (isEnterHotkey(event) &&
-                isSingleMindElement &&
-                !PlaitMind.isMind(targetElement) &&
-                !AbstractNode.isAbstract(targetElement)) {
-                const targetElementPath = PlaitBoard.findPath(board, targetElement);
-                if (isInRightBranchOfStandardLayout(targetElement)) {
-                    const refs = insertElementHandleRightNodeCount(board, targetElementPath.slice(0, 1), 1);
-                    MindTransforms.setRightNodeCountByRefs(board, refs);
-                }
-                const abstractRefs = insertElementHandleAbstract(board, Path.next(targetElementPath));
-                MindTransforms.setAbstractsByRefs(board, abstractRefs);
-                insertMindElement(board, targetElement, findNewSiblingNodePath(board, targetElement));
-                return;
-            }
-            if (!isVirtualKey(event) && !isSpaceHotkey(event) && isSingleSelection && MindElement.isMindElement(board, targetElement)) {
-                event.preventDefault();
-                editTopic(targetElement);
-                return;
-            }
-        }
-        keydown(event);
-    };
-    board.deleteFragment = (data) => {
-        const targetMindElements = getSelectedMindElements(board);
-        if (targetMindElements.length) {
-            const firstLevelElements = getFirstLevelElement(targetMindElements).reverse();
-            const abstractRefs = deleteElementHandleAbstract(board, firstLevelElements);
-            MindTransforms.setAbstractsByRefs(board, abstractRefs);
-            const refs = deleteElementsHandleRightNodeCount(board, targetMindElements);
-            MindTransforms.setRightNodeCountByRefs(board, refs);
-            MindTransforms.removeElements(board, targetMindElements);
-            const nextSelected = getNextSelectedElement(board, firstLevelElements);
-            if (nextSelected) {
-                addSelectedElement(board, nextSelected);
-            }
-        }
-        deleteFragment(data);
-    };
-    return board;
-};
-const getNextSelectedElement = (board, firstLevelElements) => {
-    let activeElement;
-    const firstLevelElement = firstLevelElements[0];
-    const firstLevelElementPath = PlaitBoard.findPath(board, firstLevelElement);
-    let nextSelectedPath = firstLevelElementPath;
-    if (Path.hasPrevious(firstLevelElementPath)) {
-        nextSelectedPath = Path.previous(firstLevelElementPath);
-    }
-    if (AbstractNode.isAbstract(firstLevelElement)) {
-        const parent = MindElement.getParent(firstLevelElement);
-        if (!firstLevelElements.includes(parent.children[firstLevelElement.start])) {
-            activeElement = parent.children[firstLevelElement.start];
-        }
-    }
-    try {
-        if (!activeElement) {
-            activeElement = PlaitNode.get(board, nextSelectedPath);
-        }
-    }
-    catch (error) { }
-    const firstElement = firstLevelElements[0];
-    const firstElementParent = MindElement.findParent(firstElement);
-    const hasSameParent = firstLevelElements.every(element => {
-        return MindElement.findParent(element) === firstElementParent;
-    });
-    if (firstElementParent && hasSameParent && !activeElement) {
-        activeElement = firstElementParent;
-    }
-    return activeElement;
-};
-
-const mouseMoveHandle = (board, event, nodeHoveredExtendRef) => {
-    let target = null;
-    const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-    depthFirstRecursion(board, element => {
-        if (target) {
-            return;
-        }
-        if (!MindElement.isMindElement(board, element)) {
-            return;
-        }
-        const isHitElement = isHitMindElement(board, point, element);
-        if (isHitElement) {
-            target = element;
-        }
-    }, getIsRecursionFunc(board), true);
-    if (nodeHoveredExtendRef && target && nodeHoveredExtendRef.element === target) {
-        return nodeHoveredExtendRef;
-    }
-    if (nodeHoveredExtendRef) {
-        removeHovered(nodeHoveredExtendRef.element);
-    }
-    if (target) {
-        addHovered(target);
-        if (nodeHoveredExtendRef) {
-            nodeHoveredExtendRef.element = target;
-        }
-        else {
-            nodeHoveredExtendRef = { element: target };
-        }
-    }
-    else {
-        nodeHoveredExtendRef = null;
-    }
-    return nodeHoveredExtendRef;
-};
-const mouseLeaveHandle = (board, event, nodeHoveredExtendRef) => {
-    if (nodeHoveredExtendRef) {
-        removeHovered(nodeHoveredExtendRef.element);
-    }
-};
-const addHovered = (element) => {
-    const component = PlaitElement.getComponent(element);
-    component.g.classList.add('hovered');
-};
-const removeHovered = (element) => {
-    const component = PlaitElement.getComponent(element);
-    if (component && component.g) {
-        component.g.classList.remove('hovered');
-    }
-};
-
-const withNodeHoverDetect = (board) => {
-    const { mousemove, mouseleave } = board;
-    let nodeHoveredExtendRef = null;
-    board.mousemove = (event) => {
-        nodeHoveredExtendRef = mouseMoveHandle(board, event, nodeHoveredExtendRef);
-        mousemove(event);
-    };
-    board.mouseleave = (event) => {
-        mouseLeaveHandle(board, event, nodeHoveredExtendRef);
-        nodeHoveredExtendRef = null;
-        mouseleave(event);
-    };
-    return board;
-};
-
-const withNodeImage = (board) => {
-    const { keydown, pointerDown, globalPointerUp, setFragment, insertFragment, deleteFragment } = board;
-    board.pointerDown = (event) => {
-        const selectedImageElement = getSelectedImageElement(board);
-        if (PlaitBoard.isReadonly(board) || !isMainPointer(event) || !PlaitBoard.isPointer(board, PlaitPointerType.selection)) {
-            if (selectedImageElement) {
-                setImageFocus(board, selectedImageElement, false);
-            }
-            pointerDown(event);
-            return;
-        }
-        const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-        const range = { anchor: point, focus: point };
-        const hitImageElements = getHitElements(board, { ranges: [range] }, (value) => MindElement.isMindElement(board, value) && MindElement.hasImage(value));
-        const hasImage = hitImageElements.length;
-        const hitImage = hasImage > 0 && isHitImage(board, hitImageElements[0], range);
-        if (selectedImageElement && hitImage && hitImageElements[0] === selectedImageElement) {
-            temporaryDisableSelection(board);
-            pointerDown(event);
-            return;
-        }
-        if (selectedImageElement) {
-            setImageFocus(board, selectedImageElement, false);
-        }
-        if (hitImage) {
-            temporaryDisableSelection(board);
-            setImageFocus(board, hitImageElements[0], true);
-        }
-        pointerDown(event);
-    };
-    board.keydown = (event) => {
-        const selectedImageElement = getSelectedImageElement(board);
-        if (!PlaitBoard.isReadonly(board) && selectedImageElement && (hotkeys.isDeleteBackward(event) || hotkeys.isDeleteForward(event))) {
-            addSelectedElement(board, selectedImageElement);
-            MindTransforms.removeImage(board, selectedImageElement);
-            return;
-        }
-        keydown(event);
-    };
-    board.globalPointerUp = (event) => {
-        if (PlaitBoard.isFocus(board)) {
-            const isInBoard = event.target instanceof Node && PlaitBoard.getBoardContainer(board).contains(event.target);
-            const selectedImageElement = getSelectedImageElement(board);
-            // Clear image selection when mouse board outside area
-            if (selectedImageElement && !isInBoard) {
-                setImageFocus(board, selectedImageElement, false);
-            }
-        }
-        globalPointerUp(event);
-    };
-    board.setFragment = (data, rectangle) => {
-        const selectedImageElement = getSelectedImageElement(board);
-        if (selectedImageElement) {
-            setClipboardDataByMedia(data, selectedImageElement.data.image, MediaKeys.image);
-            return;
-        }
-        setFragment(data, rectangle);
-    };
-    board.deleteFragment = (data) => {
-        const selectedImageElement = getSelectedImageElement(board);
-        if (selectedImageElement) {
-            MindTransforms.removeImage(board, selectedImageElement);
-        }
-        deleteFragment(data);
-    };
-    board.insertFragment = (data, targetPoint) => {
-        const selectedElements = getSelectedElements(board);
-        const isSelectedImage = !!getSelectedImageElement(board);
-        const isSingleSelection = selectedElements.length === 1 && MindElement.isMindElement(board, selectedElements[0]);
-        if ((data === null || data === void 0 ? void 0 : data.files.length) && (isSingleSelection || isSelectedImage)) {
-            const selectedElement = (selectedElements[0] || getSelectedImageElement(board));
-            const acceptImageArray = acceptImageTypes.map(type => 'image/' + type);
-            if (acceptImageArray.includes(data === null || data === void 0 ? void 0 : data.files[0].type)) {
-                const imageFile = data.files[0];
-                buildImage(board, selectedElement, imageFile);
-                return;
-            }
-        }
-        const imageItem = getClipboardDataByMedia(data, MediaKeys.image);
-        if (imageItem && (isSingleSelection || isSelectedImage)) {
-            const selectedElement = (selectedElements[0] || getSelectedImageElement(board));
-            MindTransforms.setImage(board, selectedElement, imageItem);
-            return;
-        }
-        insertFragment(data, targetPoint);
-    };
-    return board;
-};
-
-const withNodeResize = (board) => {
-    const { pointerDown, pointerMove, globalPointerUp } = board;
-    let targetElement = null;
-    let targetElementRef = null;
-    let startPoint = null;
-    board.pointerDown = (event) => {
-        const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-        const newTargetElement = getSelectedTarget(board, point);
-        if (newTargetElement) {
-            PlaitBoard.getBoardContainer(board).classList.add(ResizeCursorClass['ew-resize']);
-            targetElement = newTargetElement;
-            startPoint = [event.x, event.y];
-            return;
-        }
-        pointerDown(event);
-    };
-    board.pointerMove = (event) => {
-        if (PlaitBoard.isReadonly(board) || PlaitBoard.hasBeenTextEditing(board)) {
-            pointerMove(event);
-            return;
-        }
-        if (startPoint && targetElement && !isMindNodeResizing(board)) {
-            // prevent text from being selected
-            event.preventDefault();
-            preventTouchMove(board, true);
-            const endPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-            const distance = distanceBetweenPointAndPoint(startPoint[0], startPoint[1], endPoint[0], endPoint[1]);
-            if (distance > PRESS_AND_MOVE_BUFFER) {
-                addResizing(board, targetElement);
-                targetElementRef = {
-                    minWidth: NodeSpace.getNodeResizableMinWidth(board, targetElement),
-                    currentWidth: NodeSpace.getNodeDynamicWidth(board, targetElement),
-                    path: PlaitBoard.findPath(board, targetElement),
-                    textManage: PlaitElement.getComponent(targetElement).textManage
-                };
-                MERGING.set(board, true);
-            }
-        }
-        if (isMindNodeResizing(board) && startPoint && targetElementRef) {
-            // prevent text from being selected
-            event.preventDefault();
-            preventTouchMove(board, true);
-            throttleRAF(() => {
-                if (!startPoint) {
-                    return;
-                }
-                const endPoint = [event.x, event.y];
-                const offsetX = endPoint[0] - startPoint[0];
-                const zoom = board.viewport.zoom;
-                let resizedWidth = targetElementRef.currentWidth + offsetX / zoom;
-                if (resizedWidth <= targetElementRef.minWidth) {
-                    resizedWidth = targetElementRef.minWidth;
-                }
-                const newTarget = PlaitNode.get(board, targetElementRef.path);
-                if (newTarget && NodeSpace.getNodeTopicMinWidth(board, newTarget) !== resizedWidth) {
-                    targetElementRef.textManage.updateWidth(resizedWidth);
-                    const { height } = targetElementRef.textManage.getSize();
-                    MindTransforms.setNodeManualWidth(board, newTarget, resizedWidth * zoom, height);
-                }
-            });
-            return;
-        }
-        else {
-            // press and start drag when node is non selected
-            if (!isDragging(board)) {
-                const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-                const newTargetElement = getSelectedTarget(board, point);
-                if (newTargetElement) {
-                    PlaitBoard.getBoardContainer(board).classList.add(ResizeCursorClass['ew-resize']);
-                }
-                else {
-                    PlaitBoard.getBoardContainer(board).classList.remove(ResizeCursorClass['ew-resize']);
-                }
-            }
-        }
-        pointerMove(event);
-    };
-    board.globalPointerUp = (event) => {
-        globalPointerUp(event);
-        if (isMindNodeResizing(board) || targetElement) {
-            targetElement && removeResizing(board, targetElement);
-            targetElementRef = null;
-            targetElement = null;
-            startPoint = null;
-            MERGING.set(board, false);
-            preventTouchMove(board, false);
-        }
-    };
-    return board;
-};
-const IS_MIND_NODE_RESIZING = new WeakMap();
-const isMindNodeResizing = (board) => {
-    return !!IS_MIND_NODE_RESIZING.get(board);
-};
-const addResizing = (board, element) => {
-    PlaitBoard.getBoardContainer(board).classList.add('mind-node-resizing');
-    const component = PlaitElement.getComponent(element);
-    component.g.classList.add('resizing');
-    IS_MIND_NODE_RESIZING.set(board, true);
-};
-const removeResizing = (board, element) => {
-    PlaitBoard.getBoardContainer(board).classList.remove('mind-node-resizing');
-    PlaitBoard.getBoardContainer(board).classList.remove(ResizeCursorClass['ew-resize']);
-    const component = PlaitElement.getComponent(element);
-    if (component && component.g) {
-        component.g.classList.remove('resizing');
-    }
-    IS_MIND_NODE_RESIZING.set(board, false);
-};
-const getSelectedTarget = (board, point) => {
-    const selectedElements = getSelectedElements(board).filter(value => MindElement.isMindElement(board, value));
-    if (selectedElements.length > 0) {
-        const target = selectedElements.find(value => {
-            const rectangle = getResizeActiveRectangle(board, value);
-            return distanceBetweenPointAndRectangle(point[0], point[1], rectangle) <= 0;
-        });
-        return target ? target : null;
-    }
-    return null;
-};
-const getResizeActiveRectangle = (board, element) => {
-    const node = MindElement.getNode(element);
-    const rectangle = getRectangleByNode(node);
-    return { x: rectangle.x + rectangle.width - EXTEND_OFFSET, y: rectangle.y, width: EXTEND_OFFSET * 2, height: rectangle.height };
-};
-
-const withNodeImageResize = (board) => {
-    const options = {
-        key: 'mind-node-image',
-        canResize: () => {
-            return true;
-        },
-        detect: (point) => {
-            const selectedMindElement = getSelectedImageElement(board);
-            if (selectedMindElement) {
-                const result = getHitImageResizeHandleDirection(board, selectedMindElement, point);
-                if (result) {
-                    return {
-                        element: selectedMindElement,
-                        handle: result.handle,
-                        cursorClass: result.cursorClass
-                    };
-                }
-            }
-            return null;
-        },
-        onResize: (resizeRef, resizeState) => {
-            let offsetX = resizeState.offsetX;
-            let offsetY = resizeState.offsetY;
-            if (resizeRef.handle === ResizeHandle.nw || resizeRef.handle === ResizeHandle.sw) {
-                offsetX = -offsetX;
-            }
-            const originWidth = resizeRef.element.data.image.width;
-            const originHeight = resizeRef.element.data.image.height;
-            let width = originWidth + offsetX;
-            if (width <= 100) {
-                width = 100;
-            }
-            const ratio = originWidth / width;
-            const height = originHeight / ratio;
-            const imageItem = Object.assign(Object.assign({}, resizeRef.element.data.image), { width, height });
-            MindTransforms.setImage(board, PlaitNode.get(board, resizeRef.path), imageItem);
-            addSelectedImageElement(board, PlaitNode.get(board, resizeRef.path));
-        }
-    };
-    withResize(board, options);
-    return board;
-};
-
-const withMind = (baseBoard) => {
-    const board = baseBoard;
-    const { drawElement, dblclick, insertFragment, setFragment, isHitSelection, getRectangle, isMovable, isRecursion } = board;
-    board.drawElement = (context) => {
-        if (PlaitMind.isMind(context.element)) {
-            return PlaitMindComponent;
-        }
-        else if (MindElement.isMindElement(board, context.element)) {
-            return MindNodeComponent;
-        }
-        return drawElement(context);
-    };
-    board.applyTheme = (element) => {
-        const mindElement = element;
-        const shouldClearProperty = !PlaitBoard.isBoard(element) && ((mindElement === null || mindElement === void 0 ? void 0 : mindElement.branchColor) || (mindElement === null || mindElement === void 0 ? void 0 : mindElement.fill) || (mindElement === null || mindElement === void 0 ? void 0 : mindElement.strokeColor));
-        if (shouldClearProperty) {
-            const path = PlaitBoard.findPath(board, element);
-            Transforms.setNode(board, { fill: null, strokeColor: null, branchColor: null }, path);
-        }
-    };
-    board.getRectangle = element => {
-        if (MindElement.isMindElement(board, element)) {
-            return getRectangleByNode(MindElement.getNode(element));
-        }
-        return getRectangle(element);
-    };
-    board.isRecursion = element => {
-        if (MindElement.isMindElement(board, element) && element.isCollapsed) {
-            return false;
-        }
-        return isRecursion(element);
-    };
-    board.isHitSelection = (element, range) => {
-        if (MindElement.isMindElement(board, element)) {
-            const client = getRectangleByNode(MindElement.getNode(element));
-            const isHit = RectangleClient.isHit(RectangleClient.toRectangleClient([range.anchor, range.focus]), client);
-            return isHit;
-        }
-        return isHitSelection(element, range);
-    };
-    board.isMovable = element => {
-        if (PlaitMind.isMind(element) && element.isRoot) {
-            return true;
-        }
-        return isMovable(element);
-    };
-    board.dblclick = (event) => {
-        if (PlaitBoard.isReadonly(board)) {
-            dblclick(event);
-            return;
-        }
-        const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-        board.children
-            .filter(value => PlaitMind.isMind(value))
-            .forEach(mindMap => {
-            depthFirstRecursion(mindMap, node => {
-                if (!PlaitBoard.hasBeenTextEditing(board) && isHitMindElement(board, point, node)) {
-                    editTopic(node);
-                }
-            }, getIsRecursionFunc(board));
-        });
-        if (PlaitBoard.hasBeenTextEditing(board)) {
-            return;
-        }
-        dblclick(event);
-    };
-    board.setFragment = (data, rectangle) => {
-        const targetMindElements = getSelectedMindElements(board);
-        const firstLevelElements = getFirstLevelElement(targetMindElements);
-        if (firstLevelElements.length) {
-            const elements = buildClipboardData(board, firstLevelElements, rectangle ? [rectangle.x, rectangle.y] : [0, 0]);
-            setMindClipboardData(data, elements);
-        }
-        setFragment(data, rectangle);
-    };
-    board.insertFragment = (data, targetPoint) => {
-        const elements = getDataFromClipboard(data);
-        const mindElements = elements.filter(value => MindElement.isMindElement(board, value));
-        if (elements.length > 0 && mindElements.length > 0) {
-            insertClipboardData(board, mindElements, targetPoint);
-        }
-        else if (elements.length === 0) {
-            const mindElements = getSelectedMindElements(board);
-            if (mindElements.length === 1) {
-                const text = getTextFromClipboard(data);
-                if (text) {
-                    insertClipboardText(board, mindElements[0], buildText(text));
-                    return;
-                }
-            }
-        }
-        insertFragment(data, targetPoint);
-    };
-    return withNodeResize(withNodeImageResize(withNodeImage(withNodeHoverDetect(withMindHotkey(withMindExtend(withCreateMind(withAbstract(withNodeDnd(board)))))))));
-};
-
-class MindEmojiBaseComponent {
-    get nativeElement() {
-        return this.elementRef.nativeElement;
-    }
-    handleClick() {
-        const currentOptions = this.board.getPluginOptions(PlaitPluginKey.withSelection);
-        this.board.setPluginOptions(PlaitPluginKey.withSelection, {
-            isDisabledSelect: true
-        });
-        setTimeout(() => {
-            this.board.setPluginOptions(PlaitPluginKey.withSelection, Object.assign({}, currentOptions));
-        }, 0);
-    }
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        this.fontSize = 14;
-    }
-    ngOnInit() {
-        this.elementRef.nativeElement.style.fontSize = `${this.fontSize}px`;
-    }
-}
-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: { listeners: { "mousedown": "handleClick()" }, 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: {
-                        class: 'mind-node-emoji'
-                    }
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { fontSize: [{
-                type: Input
-            }], emojiItem: [{
-                type: Input
-            }], board: [{
-                type: Input
-            }], element: [{
-                type: Input
-            }], handleClick: [{
-                type: HostListener,
-                args: ['mousedown']
-            }] } });
-
-class MindImageBaseComponent {
-    set imageItem(value) {
-        this.afterImageItemChange(this._imageItem, value);
-        this._imageItem = value;
-        this.drawFocus();
-    }
-    get imageItem() {
-        return this._imageItem;
-    }
-    set isFocus(value) {
-        this._isFocus = value;
-        this.drawFocus();
-    }
-    get isFocus() {
-        return this._isFocus;
-    }
-    get nativeElement() {
-        return this.elementRef.nativeElement;
-    }
-    constructor(elementRef, cdr) {
-        this.elementRef = elementRef;
-        this.cdr = cdr;
-        this.initialized = false;
-    }
-    ngOnInit() {
-        this.activeGenerator = new ActiveGenerator(this.board, {
-            activeStrokeWidth: 1,
-            getRectangle: (element) => {
-                return getImageForeignRectangle(this.board, this.element);
-            },
-            getStrokeWidthByElement: () => {
-                return 0;
-            }
-        });
-        this.initialized = true;
-    }
-    drawFocus() {
-        if (this.initialized) {
-            const com = PlaitElement.getComponent(this.element);
-            this.activeGenerator.draw(this.element, com.g, { selected: this._isFocus });
-        }
-    }
-    ngOnDestroy() {
-        if (this.activeGenerator) {
-            this.activeGenerator.destroy();
-        }
-    }
-}
-MindImageBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindImageBaseComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-MindImageBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: MindImageBaseComponent, inputs: { imageItem: "imageItem", board: "board", element: "element", isFocus: "isFocus" }, host: { classAttribute: "mind-node-image" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindImageBaseComponent, decorators: [{
-            type: Directive,
-            args: [{
-                    host: {
-                        class: 'mind-node-image'
-                    }
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { imageItem: [{
-                type: Input
-            }], board: [{
-                type: Input
-            }], element: [{
-                type: Input
-            }], isFocus: [{
-                type: Input
-            }] } });
-
-/*
- * Public API Surface of mind
- */
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, AbstractHandlePosition, AbstractResizeState, BASE, BRANCH_FONT_FAMILY, BRANCH_WIDTH, BaseDrawer, BranchShape, DEFAULT_FONT_FAMILY, DefaultAbstractNodeStyle, DefaultNodeStyle, ELEMENT_TO_NODE, EXTEND_DIAMETER, EXTEND_OFFSET, GRAY_COLOR, INHERIT_ATTRIBUTE_KEYS, IS_DRAGGING, LayoutDirection, LayoutDirectionsMap, MindColorfulThemeColor, MindDarkThemeColor, MindDefaultThemeColor, MindElement, MindElementShape, MindEmojiBaseComponent, MindImageBaseComponent, MindModule, MindNode, MindNodeComponent, MindPointerType, MindQueries, MindRetroThemeColor, MindSoftThemeColor, MindStarryThemeColor, MindThemeColor, MindThemeColors, MindTransforms, NodeSpace, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, QUICK_INSERT_CIRCLE_COLOR, QUICK_INSERT_CIRCLE_OFFSET, QUICK_INSERT_INNER_CROSS_COLOR, ROOT_TOPIC_FONT_SIZE, ROOT_TOPIC_HEIGHT, STROKE_WIDTH, TOPIC_COLOR, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, TRANSPARENT, WithMindPluginKey, addActiveOnDragOrigin, addSelectedImageElement, adjustAbstractToNode, adjustNodeToRoot, adjustRootToNode, buildImage, canSetAbstract, copyNewNode, correctLayoutByDirection, createDefaultMind, createEmptyMind, createMindElement, deleteElementHandleAbstract, deleteElementsHandleRightNodeCount, detectDropTarget, directionCorrector, directionDetector, divideElementByParent, drawFakeDragNode, drawFakeDropNode, editTopic, extractNodesText, findLastChild, findLocationLeftIndex, getAbstractBranchColor, getAbstractBranchWidth, getAbstractHandleRectangle, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getBranchShapeByMindElement, getBranchWidthByMindElement, getChildrenCount, getCorrespondingAbstract, getDefaultBranchColor, getDefaultBranchColorByIndex, getDefaultLayout, getEmojiFontSize, getEmojiForeignRectangle, getEmojiRectangle, getEmojisWidthHeight, getFillByElement, getFirstLevelElement, getFontSizeBySlateElement, getHitAbstractHandle, getHitImageResizeHandleDirection, getImageForeignRectangle, getInCorrectLayoutDirection, getLayoutDirection$1 as getLayoutDirection, getLayoutOptions, getLayoutReverseDirection, getLocationScope, getMindThemeColor, getNewNodeHeight, getNextBranchColor, getNodeDefaultFontSize, getOverallAbstracts, getPathByDropTarget, getRectangleByElement, getRectangleByNode, getRectangleByResizingLocation, getRelativeStartEndByAbstractRef, getRootLayout, getSelectedImageElement, getSelectedMindElements, getShapeByElement, getStrokeByMindElement, getStrokeWidthByElement, getTopicRectangleByElement, getTopicRectangleByNode, getValidAbstractRefs, handleTouchedAbstract, hasAfterDraw, hasPreviousOrNextOfDropPath, insertElementHandleAbstract, insertElementHandleRightNodeCount, insertMindElement, isChildElement, isChildOfAbstract, isChildRight, isChildUp, isCorrectLayout, isDragging, isDropStandardRight, isHitEmojis, isHitImage, isHitMindElement, isInRightBranchOfStandardLayout, isMixedLayout, isSetAbstract, isValidTarget, removeActiveOnDragOrigin, removeSelectedImageElement, selectImage, separateChildren, setImageFocus, setIsDragging, temporaryDisableSelection, withMind, withMindExtend };
-//# sourceMappingURL=plait-mind.mjs.map