@plait/mind 0.27.0-next.0 → 0.27.0-next.10

package/{fesm2020 → fesm2022}/plait-mind.mjs

@@ -1,17 +1,14 @@
 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 { Component, ChangeDetectionStrategy, NgZone, Directive, Input, HostListener } from '@angular/core';
+import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, PlaitElement, PlaitNode, Path, isNullOrUndefined, PlaitBoard, distanceBetweenPointAndRectangle, RectangleClient, PlaitPluginKey, getSelectedElements, idCreator, Transforms, clearSelectedElement, addSelectedElement, depthFirstRecursion, getIsRecursionFunc, drawRoundRectangle, drawLinearPath, drawBezierPath, createG, updateForeignObject, getRectangleByElements, NODE_TO_PARENT, createForeignObject, setStrokeLinecap, ACTIVE_STROKE_WIDTH, createText, PlaitPointerType, NODE_TO_INDEX, PlaitChildrenElementComponent, isMainPointer, transformPoint, toPoint, getHitElements, distanceBetweenPointAndPoint, CoreTransforms, BOARD_TO_HOST, BoardTransforms, throttleRAF, removeSelectedElement, PlaitHistoryBoard, hotkeys, setClipboardDataByMedia, getClipboardDataByMedia, ResizeCursorClass, preventTouchMove, PRESS_AND_MOVE_BUFFER, MERGING, setClipboardData, setClipboardDataByText, getDataFromClipboard } from '@plait/core';
+import { MindLayoutType, AbstractNode, isIndentedLayout, isHorizontalLayout, isHorizontalLogicLayout, ConnectingPosition, getNonAbstractChildren, isStandardLayout, isLeftLayout, isRightLayout, isVerticalLogicLayout, isTopLayout, isBottomLayout, getCorrectStartEnd, getAbstractLayout, GlobalLayout } from '@plait/layouts';
+import { PlaitMarkEditor, MarkTypes, DEFAULT_FONT_SIZE, TEXT_DEFAULT_HEIGHT, buildText, getTextSize, TextManage, ExitOrigin, getTextFromClipboard } from '@plait/text';
 import { fromEvent, Subject } from 'rxjs';
-import { RESIZE_HANDLE_DIAMETER, getRectangleResizeTargets, MediaKeys, ResizeDirection, withResize, ActiveGenerator } from '@plait/common';
+import { RESIZE_HANDLE_DIAMETER, getRectangleResizeHandleRefs, Generator, CommonPluginElement, ImageGenerator, WithTextPluginKey, isDrawingMode, isDndMode, setCreationMode, BoardCreationMode, isExpandHotkey, isTabHotkey, isEnterHotkey, isVirtualKey, isDelete, isSpaceHotkey, MediaKeys, acceptImageTypes, buildImage, ResizeHandle, withResize } from '@plait/common';
 import { Node as Node$1, Path as Path$1 } from 'slate';
-import { isKeyHotkey } from 'is-hotkey';
 import { pointsOnBezierCurves } from 'points-on-curve';
 import { take, filter } from 'rxjs/operators';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { NgIf } from '@angular/common';
 
 const ELEMENT_TO_NODE = new WeakMap();
 
@@ -192,6 +189,7 @@ const EXTEND_DIAMETER = 16;
 const QUICK_INSERT_CIRCLE_OFFSET = 9;
 const QUICK_INSERT_CIRCLE_COLOR = '#6698FF';
 const QUICK_INSERT_INNER_CROSS_COLOR = 'white';
+const DEFAULT_MIND_IMAGE_WIDTH = 240;
 
 function getEmojisWidthHeight(board, element) {
     const options = board.getPluginOptions(WithMindPluginKey);
@@ -215,980 +213,888 @@ const TOPIC_COLOR = '#333';
 const TOPIC_FONT_SIZE = 14;
 const ROOT_TOPIC_FONT_SIZE = 18;
 const ROOT_TOPIC_HEIGHT = 25;
+const ROOT_TOPIC_WIDTH = 72;
 const TOPIC_DEFAULT_MAX_WORD_COUNT = 34;
 const DEFAULT_FONT_FAMILY = 'PingFangSC-Regular, "PingFang SC"';
 const BRANCH_FONT_FAMILY = 'PingFangSC-Medium, "PingFang SC"';
+const NodeTopicThreshold = {
+    defaultTextMaxWidth: 34 * 14
+};
 
-const NodeDefaultSpace = {
-    horizontal: {
-        nodeAndText: BASE * 2.5,
-        emojiAndText: BASE * 1.5
-    },
-    vertical: {
-        nodeAndText: BASE,
-        nodeAndImage: BASE,
-        imageAndText: BASE * 1.5
+const getAvailableProperty = (board, element, propertyKey) => {
+    return element[propertyKey];
+};
+
+const DefaultAbstractNodeStyle = {
+    branch: { color: GRAY_COLOR, width: 2 },
+    shape: {
+        strokeColor: GRAY_COLOR,
+        strokeWidth: 2
     }
 };
-const RootDefaultSpace = {
-    horizontal: {
-        nodeAndText: BASE * 4,
-        emojiAndText: BASE * 2
+const DefaultNodeStyle = {
+    branch: {
+        width: 3
     },
-    vertical: {
-        nodeAndText: BASE * 2
+    shape: {
+        rectangleRadius: 4,
+        strokeWidth: 3,
+        fill: 'none'
     }
 };
-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) {
-        const width = element.manualWidth || element.width;
-        const imageWidth = MindElement.hasImage(element) ? element.data.image?.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);
+
+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;
         }
-        else {
-            return nodeAndText;
+        if (AbstractNode.isAbstract(child) && child.start >= rightNodeCount) {
+            leftChildren.push(child);
+            continue;
         }
-    },
-    getTextTopSpace(board, element) {
-        const nodeAndText = getVerticalSpaceBetweenNodeAndText(board, element);
-        if (MindElement.hasImage(element)) {
-            return NodeSpace.getImageTopSpace(board, element) + element.data.image.height + NodeDefaultSpace.vertical.imageAndText;
+        if (i < rightNodeCount) {
+            rightChildren.push(child);
         }
         else {
-            return nodeAndText;
+            leftChildren.push(child);
         }
-    },
-    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;
     }
+    return { leftChildren, rightChildren };
 };
-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 isSetAbstract = (element) => {
+    return !!getCorrespondingAbstract(element);
 };
-const getNodeDefaultFontSize = (isRoot = false) => {
-    const defaultFontSize = isRoot ? ROOT_TOPIC_FONT_SIZE : DEFAULT_FONT_SIZE;
-    return defaultFontSize;
+const canSetAbstract = (element) => {
+    return !PlaitElement.isRootElement(element) && !AbstractNode.isAbstract(element) && !isSetAbstract(element);
 };
-
-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));
+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;
+    });
 };
-
-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 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);
 };
-const getHitImageResizeHandleDirection = (board, element, point) => {
-    const imageRectangle = getImageForeignRectangle(board, element);
-    const resizeTargets = getRectangleResizeTargets(imageRectangle, RESIZE_HANDLE_DIAMETER);
-    const result = resizeTargets.find(resizeTarget => {
-        return RectangleClient.isHit(RectangleClient.toRectangleClient([point, point]), resizeTarget.rectangle);
+/**
+ * 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 result;
+    return overallAbstracts;
 };
-
-function editTopic(element) {
-    const component = PlaitElement.getComponent(element);
-    component?.editTopic();
-}
-const temporaryDisableSelection = (board) => {
-    const currentOptions = board.getPluginOptions(PlaitPluginKey.withSelection);
-    board.setPluginOptions(PlaitPluginKey.withSelection, {
-        isDisabledSelect: true
-    });
-    setTimeout(() => {
-        board.setPluginOptions(PlaitPluginKey.withSelection, { ...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, {});
+/**
+ * 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);
+            }
+        }
     });
-    root.children = children;
-    return root;
+    return validAbstractRefs;
 };
-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];
-        }
+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));
     }
-    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;
+    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);
         }
-        parent = MindElement.findParent(parent);
+        newProperties.end = newProperties.end + step;
     }
-    return false;
+    return effectedAbstracts;
 };
-const getFirstLevelElement = (elements) => {
-    let result = [];
-    elements.forEach(element => {
-        const isChild = elements.some(node => {
-            return isChildElement(node, element);
-        });
-        if (!isChild) {
-            result.push(element);
+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 result;
-};
-const isChildRight = (node, child) => {
-    return node.x < child.x;
+    return effectedAbstracts;
 };
-const isChildUp = (node, child) => {
-    return node.y > child.y;
+const isChildOfAbstract = (board, element) => {
+    const ancestors = MindElement.getAncestors(board, element);
+    return !!ancestors.find(value => AbstractNode.isAbstract(value));
 };
-const copyNewNode = (node) => {
-    const newNode = { ...node };
-    newNode.id = idCreator();
-    newNode.children = [];
-    for (const childNode of node.children) {
-        newNode.children.push(copyNewNode(childNode));
+
+/**
+ * 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);
     }
-    return newNode;
+    const branchColor = getAvailableProperty(board, element, 'branchColor');
+    return branchColor || getDefaultBranchColor(board, element);
 };
-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 getBranchShapeByMindElement = (board, element) => {
+    const branchShape = getAvailableProperty(board, element, 'branchShape');
+    return branchShape || BranchShape.bight;
 };
-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 getBranchWidthByMindElement = (board, element) => {
+    const branchWidth = getAvailableProperty(board, element, 'branchWidth');
+    return branchWidth || BRANCH_WIDTH;
 };
-const findLastChild = (child) => {
-    let result = child;
-    while (result.children.length !== 0) {
-        result = result.children[result.children.length - 1];
+const getAbstractBranchWidth = (board, element) => {
+    if (!isNullOrUndefined(element.branchWidth)) {
+        return element.branchWidth;
     }
-    return result;
+    return DefaultAbstractNodeStyle.branch.width;
 };
-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]);
-        }
+const getAbstractBranchColor = (board, element) => {
+    if (element.branchColor) {
+        return element.branchColor;
     }
-    return { parentElements, abstractIncludedGroups };
+    return DefaultAbstractNodeStyle.branch.color;
 };
-
-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 getNextBranchColor = (board, root) => {
+    const index = root.children.length;
+    return getDefaultBranchColorByIndex(board, index);
 };
-const isCorrectLayout = (root, layout) => {
-    const rootLayout = root.layout || getDefaultLayout();
-    return !getInCorrectLayoutDirection(rootLayout, layout);
+const getDefaultBranchColor = (board, element) => {
+    const path = PlaitBoard.findPath(board, element);
+    return getDefaultBranchColorByIndex(board, path[1]);
 };
-const isMixedLayout = (parentLayout, layout) => {
-    return (!isIndentedLayout(parentLayout) && isIndentedLayout(layout)) || (isIndentedLayout(parentLayout) && !isIndentedLayout(layout));
+const getDefaultBranchColorByIndex = (board, index) => {
+    const themeColor = getMindThemeColor(board);
+    const length = themeColor.branchColors.length;
+    const remainder = index % length;
+    return themeColor.branchColors[remainder];
 };
-const getInCorrectLayoutDirection = (rootLayout, layout) => {
-    const directions = LayoutDirectionsMap[rootLayout];
-    const subLayoutDirections = LayoutDirectionsMap[layout];
-    if (!subLayoutDirections) {
-        throw new Error(`unexpected layout: ${layout} on correct layout`);
+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;
     }
-    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;
+    else {
+        return MindDefaultThemeColor;
     }
-    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);
-            }
-        }
+
+const getStrokeByMindElement = (board, element) => {
+    if (PlaitMind.isMind(element)) {
+        const defaultRootStroke = getMindThemeColor(board).rootFill;
+        return element.strokeColor || defaultRootStroke;
     }
-    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;
+    if (AbstractNode.isAbstract(element) || isChildOfAbstract(board, element)) {
+        return element.strokeColor || DefaultAbstractNodeStyle.shape.strokeColor;
     }
-    return reverseDirection;
+    return getAvailableProperty(board, element, 'strokeColor') || getDefaultBranchColor(board, element);
 };
-const getRootLayout = (root) => {
-    return root.layout || getDefaultLayout();
+const getStrokeWidthByElement = (board, element) => {
+    const strokeWidth = element.strokeWidth ||
+        (AbstractNode.isAbstract(element) ? DefaultAbstractNodeStyle.shape.strokeWidth : DefaultNodeStyle.shape.strokeWidth);
+    return strokeWidth;
 };
-
-const adjustRootToNode = (board, node) => {
-    const newNode = { ...node };
-    delete newNode.isRoot;
-    delete newNode.rightNodeCount;
-    delete newNode.type;
-    if (newNode.layout === MindLayoutType.standard) {
-        delete newNode.layout;
+const getFillByElement = (board, element) => {
+    if (element.fill) {
+        return element.fill;
     }
-    return newNode;
-};
-const adjustAbstractToNode = (node) => {
-    const newNode = { ...node };
-    delete newNode.start;
-    delete newNode.end;
-    return newNode;
+    const defaultRootFill = getMindThemeColor(board).rootFill;
+    return element.isRoot ? defaultRootFill : DefaultNodeStyle.shape.fill;
 };
-const adjustNodeToRoot = (board, node) => {
-    const newElement = { ...node };
-    if (!Node$1.string(newElement.data.topic)) {
-        newElement.data.topic = { children: [{ text: '思维导图' }] };
-    }
-    delete newElement?.strokeColor;
-    delete newElement?.fill;
-    delete newElement?.shape;
-    delete newElement?.strokeWidth;
-    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 {
-        ...newElement,
-        layout: newElement.layout ?? MindLayoutType.right,
-        isRoot: true,
-        type: 'mindmap'
-    };
+const getShapeByElement = (board, element) => {
+    const shape = getAvailableProperty(board, element, 'shape');
+    return shape || MindElementShape.roundRectangle;
 };
 
-const DefaultAbstractNodeStyle = {
-    branch: { color: GRAY_COLOR, width: 2 },
-    shape: {
-        strokeColor: GRAY_COLOR,
-        strokeWidth: 2
-    }
-};
-const DefaultNodeStyle = {
-    branch: {
-        width: 3
+const NodeDefaultSpace = {
+    horizontal: {
+        nodeAndText: BASE * 2.5,
+        emojiAndText: BASE * 1.5
     },
-    shape: {
-        rectangleRadius: 4,
-        strokeWidth: 3,
-        fill: 'none'
+    vertical: {
+        nodeAndText: BASE,
+        nodeAndImage: BASE,
+        imageAndText: BASE * 1.5
     }
 };
-
-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 RootDefaultSpace = {
+    horizontal: {
+        nodeAndText: BASE * 4,
+        emojiAndText: BASE * 2
+    },
+    vertical: {
+        nodeAndText: BASE * 2
     }
 };
-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 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;
 };
-const setAbstractByElements = (board, groupParent, group) => {
-    const indexArray = group.map(child => groupParent.children.indexOf(child)).sort((a, b) => a - b);
-    const rightNodeCount = groupParent?.rightNodeCount;
-    const start = indexArray[0], end = indexArray[indexArray.length - 1];
-    if (isStandardLayout(MindQueries.getLayoutByElement(groupParent)) &&
-        rightNodeCount &&
-        start < rightNodeCount &&
-        end >= rightNodeCount) {
-        const childrenLength = groupParent.children.length;
-        const path = [...PlaitBoard.findPath(board, groupParent), childrenLength];
-        const leftChildren = indexArray.filter(index => index >= rightNodeCount);
-        const rightChildren = indexArray.filter(index => index < rightNodeCount);
-        insertAbstractNode(board, path, rightChildren[0], rightChildren[rightChildren.length - 1]);
-        insertAbstractNode(board, Path.next(path), leftChildren[0], leftChildren[leftChildren.length - 1]);
-    }
-    else {
-        const path = [...PlaitBoard.findPath(board, groupParent), groupParent.children.length];
-        insertAbstractNode(board, path, start, end);
-    }
+const 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;
 };
-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 getSpaceEmojiAndText = (element) => {
+    const isMind = PlaitMind.isMind(element);
+    const emojiAndText = isMind ? RootDefaultSpace.horizontal.emojiAndText : NodeDefaultSpace.horizontal.emojiAndText;
+    return emojiAndText;
 };
-
-const setLayout = (board, layout, path) => {
-    correctLogicLayoutNode(board, layout, path);
-    const element = PlaitNode.get(board, path);
-    if (PlaitMind.isMind(element) && isStandardLayout(layout)) {
-        MindTransforms.setAbstractByStandardLayout(board, element);
-    }
-    Transforms.setNode(board, { layout }, path);
-};
-const correctLogicLayoutNode = (board, layout, path) => {
-    const node = PlaitNode.get(board, path);
-    if (node && layout) {
-        node.children?.forEach((value, index) => {
-            if (value.layout) {
-                if ((isHorizontalLogicLayout(layout) && isVerticalLogicLayout(value.layout)) ||
-                    (isVerticalLogicLayout(layout) && isHorizontalLogicLayout(value.layout))) {
-                    Transforms.setNode(board, { layout: null }, [...path, index]);
-                }
-                if (value.children?.length) {
-                    correctLogicLayoutNode(board, layout, [...path, index]);
-                }
-            }
-        });
-    }
-};
-
-const 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;
+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);
         }
-        if (AbstractNode.isAbstract(child) && child.start >= rightNodeCount) {
-            leftChildren.push(child);
-            continue;
+        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;
         }
-        if (i < rightNodeCount) {
-            rightChildren.push(child);
+        return nodeAndText + element.height + nodeAndText;
+    },
+    getNodeDynamicWidth(board, element) {
+        const width = element.manualWidth || element.width;
+        const imageWidth = MindElement.hasImage(element) ? element.data.image?.width : 0;
+        return Math.max(width, imageWidth);
+    },
+    /**
+     * use it when upload image first or resize image
+     */
+    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 {
-            leftChildren.push(child);
+            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 + NodeDefaultSpace.vertical.nodeAndImage;
+    },
+    getEmojiLeftSpace(board, element) {
+        const options = board.getPluginOptions(WithMindPluginKey);
+        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
+        return nodeAndText - options.emojiPadding;
+    },
+    getEmojiTopSpace(board, element) {
+        const nodeAndText = getVerticalSpaceBetweenNodeAndText(board, element);
+        return nodeAndText;
     }
-    return { leftChildren, rightChildren };
 };
-const isSetAbstract = (element) => {
-    return !!getCorrespondingAbstract(element);
+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 canSetAbstract = (element) => {
-    return !PlaitElement.isRootElement(element) && !AbstractNode.isAbstract(element) && !isSetAbstract(element);
+const getNodeDefaultFontSize = (isRoot = false) => {
+    const defaultFontSize = isRoot ? ROOT_TOPIC_FONT_SIZE : DEFAULT_FONT_SIZE;
+    return defaultFontSize;
 };
-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;
-    });
+
+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, element) {
+    const width = NodeSpace.getNodeWidth(board, element);
+    const height = NodeSpace.getNodeHeight(board, element);
+    const nodeRectangle = {
+        x: element.points[0][0],
+        y: element.points[0][1],
+        width,
+        height
+    };
+    return nodeRectangle;
+}
+function isHitMindElement(board, point, element) {
+    const node = MindElement.getNode(element);
+    if (node && distanceBetweenPointAndRectangle(point[0], point[1], getRectangleByNode(node)) === 0) {
+        return true;
+    }
+    else {
+        return false;
+    }
+}
+
+function getEmojiRectangle(board, element) {
+    let { x, y } = getRectangleByNode(MindElement.getNode(element));
+    x = x + NodeSpace.getEmojiLeftSpace(board, element);
+    const { width, height } = getEmojisWidthHeight(board, element);
+    return {
+        x,
+        y,
+        width,
+        height
+    };
+}
+function getEmojiForeignRectangle(board, element) {
+    let { x, y } = getRectangleByNode(MindElement.getNode(element));
+    x = x + NodeSpace.getEmojiLeftSpace(board, element);
+    const { width } = 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));
 };
-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);
+
+function getTopicRectangleByNode(board, node) {
+    let nodeRectangle = getRectangleByNode(node);
+    const result = getTopicRectangleByElement(board, nodeRectangle, node.origin);
+    result.width = result.width;
+    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);
 };
-/**
- * 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);
-            }
-        }
+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 overallAbstracts;
+    return result;
 };
-/**
- * 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);
+
+function editTopic(element) {
+    const component = PlaitElement.getComponent(element);
+    component?.editTopic();
+}
+const temporaryDisableSelection = (board) => {
+    const currentOptions = board.getPluginOptions(PlaitPluginKey.withSelection);
+    board.setPluginOptions(PlaitPluginKey.withSelection, {
+        isDisabledSelect: true
+    });
+    setTimeout(() => {
+        board.setPluginOptions(PlaitPluginKey.withSelection, { ...currentOptions });
+    }, 0);
+};
+const getSelectedMindElements = (board) => {
+    const selectedElements = getSelectedElements(board).filter(value => MindElement.isMindElement(board, value));
+    return selectedElements;
+};
+
+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 validAbstractRefs;
+    return branchDirections;
 };
-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));
+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`);
     }
-    else {
-        const selectedElement = PlaitNode.get(board, Path.previous(path));
-        behindAbstracts = getBehindAbstracts(selectedElement);
+    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;
     }
-    if (behindAbstracts.length) {
-        behindAbstracts.forEach(abstract => {
-            let newProperties = effectedAbstracts.get(abstract);
-            if (!newProperties) {
-                newProperties = { start: 0, end: 0 };
-                effectedAbstracts.set(abstract, newProperties);
+    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);
             }
-            newProperties.start = newProperties.start + step;
-            newProperties.end = newProperties.end + step;
-        });
+        }
     }
-    if (!hasPreviousNode) {
-        return effectedAbstracts;
+    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;
     }
-    const selectedElement = PlaitNode.get(board, Path.previous(path));
-    const correspondingAbstract = getCorrespondingAbstract(selectedElement);
-    const isDragToLast = !isExtendPreviousNode && correspondingAbstract && correspondingAbstract.end === path[path.length - 1] - 1;
-    if (correspondingAbstract && !isDragToLast) {
-        let newProperties = effectedAbstracts.get(correspondingAbstract);
-        if (!newProperties) {
-            newProperties = { start: 0, end: 0 };
-            effectedAbstracts.set(correspondingAbstract, newProperties);
+    return reverseDirection;
+};
+const getRootLayout = (root) => {
+    return root.layout || getDefaultLayout();
+};
+
+const getLayoutOptions = (board) => {
+    function getMainAxle(element, parent) {
+        if (element.isRoot) {
+            return BASE * 12;
         }
-        newProperties.end = newProperties.end + step;
+        if (parent && parent.isRoot()) {
+            return BASE * 3;
+        }
+        return BASE * 3;
     }
-    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;
-                });
+    function getSecondAxle(element, parent) {
+        if (element.isRoot) {
+            return BASE * 10;
+        }
+        return BASE * 6;
+    }
+    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);
+            if (isIndentedLayout(_layout)) {
+                return BASE * 4;
             }
-            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;
+            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;
         }
-    });
-    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 = {
-        data: { ...element.data, topic },
-        ...normalizeWidthAndHeight(board, element, width, height)
-    };
-    const path = PlaitBoard.findPath(board, element);
-    Transforms.setNode(board, newElement, path);
+const createEmptyMind = (board, point) => {
+    const element = createMindElement('思维导图', ROOT_TOPIC_WIDTH, ROOT_TOPIC_HEIGHT, { layout: MindLayoutType.right });
+    element.isRoot = true;
+    element.type = 'mindmap';
+    const width = NodeSpace.getNodeWidth(board, element);
+    const height = NodeSpace.getNodeHeight(board, element);
+    element.points = [[point[0] - width / 2, point[1] - height / 2]];
+    return element;
 };
-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 createDefaultMind = (point, rightNodeCount, layout) => {
+    const root = createMindElement('思维导图', ROOT_TOPIC_WIDTH, 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 setTopicSize = (board, element, width, height) => {
+const createMindElement = (text, width, height, options) => {
     const newElement = {
-        ...normalizeWidthAndHeight(board, element, width, height)
+        id: idCreator(),
+        data: {
+            topic: buildText(text)
+        },
+        children: [],
+        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);
+    let key;
+    for (key in options) {
+        if (!isNullOrUndefined(options[key])) {
+            newElement[key] = options[key];
+        }
     }
+    return newElement;
 };
-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 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 insertNodes = (board, elements, path) => {
-    const pathRef = board.pathRef(path);
-    elements.forEach(element => {
-        if (pathRef.current) {
-            Transforms.insertNode(board, element, pathRef.current);
+const isChildElement = (origin, child) => {
+    let parent = MindElement.findParent(child);
+    while (parent) {
+        if (parent === origin) {
+            return true;
         }
-    });
-    pathRef.unref();
+        parent = MindElement.findParent(parent);
+    }
+    return false;
 };
-const insertAbstractNodes = (board, validAbstractRefs, elements, path) => {
-    const parent = PlaitNode.get(board, Path$1.parent(path));
-    const abstractPath = [...Path$1.parent(path), parent.children?.length];
-    const abstracts = validAbstractRefs.map(refs => {
-        const { start, end } = getRelativeStartEndByAbstractRef(refs, elements);
-        return {
-            ...refs.abstract,
-            start: start + path[path.length - 1],
-            end: end + path[path.length - 1]
-        };
+const getFirstLevelElement = (elements) => {
+    let result = [];
+    elements.forEach(element => {
+        const isChild = elements.some(node => {
+            return isChildElement(node, element);
+        });
+        if (!isChild) {
+            result.push(element);
+        }
     });
-    insertNodes(board, abstracts, abstractPath);
+    return result;
 };
-const setRightNodeCountByRefs = (board, refs) => {
-    refs.forEach(ref => {
-        Transforms.setNode(board, { rightNodeCount: ref.rightNodeCount }, ref.path);
-    });
+const isChildRight = (node, child) => {
+    return node.x < child.x;
 };
-
-const addEmoji = (board, element, emojiItem) => {
-    const emojis = element.data.emojis || [];
-    const newEmojis = [...emojis];
-    newEmojis.push(emojiItem);
-    const newElement = {
-        data: { ...element.data, emojis: newEmojis }
-    };
-    const path = PlaitBoard.findPath(board, element);
-    Transforms.setNode(board, newElement, path);
+const isChildUp = (node, child) => {
+    return node.y > child.y;
 };
-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 copyNewNode = (node) => {
+    const newNode = { ...node };
+    newNode.id = idCreator();
+    newNode.children = [];
+    for (const childNode of node.children) {
+        newNode.children.push(copyNewNode(childNode));
     }
-    const path = PlaitBoard.findPath(board, element);
-    Transforms.setNode(board, newElement, path);
+    return newNode;
 };
-const replaceEmoji = (board, element, oldEmoji, newEmoji) => {
-    const newElement = {
-        data: { ...element.data }
-    };
-    const newEmojis = element.data.emojis.map(value => {
-        if (value === oldEmoji) {
-            return newEmoji;
+const extractNodesText = (node) => {
+    let str = '';
+    if (node) {
+        str += Node$1.string(node.data.topic) + ' ';
+        for (const childNode of node.children) {
+            str += extractNodesText(childNode);
         }
-        return value;
-    });
-    newElement.data.emojis = newEmojis;
-    const path = PlaitBoard.findPath(board, element);
-    Transforms.setNode(board, newElement, path);
+    }
+    return str;
 };
-
-/**
- * 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);
+const insertMindElement = (board, inheritNode, path) => {
+    const newNode = {};
+    if (!inheritNode.isRoot) {
+        INHERIT_ATTRIBUTE_KEYS.forEach(attr => {
+            newNode[attr] = inheritNode[attr];
+        });
+        delete newNode.layout;
     }
-    if (height !== newHeight) {
-        return newHeight;
+    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];
     }
-    if (Math.abs(newHeight / board.viewport.zoom - element.height) > 2) {
-        return newHeight;
+    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 undefined;
+    return { parentElements, abstractIncludedGroups };
 };
 
-const removeImage = (board, element) => {
-    setImageFocus(board, element, false);
-    const newElement = {
-        data: { ...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;
+const adjustRootToNode = (board, node) => {
+    const newNode = { ...node };
+    delete newNode.isRoot;
+    delete newNode.rightNodeCount;
+    delete newNode.type;
+    if (newNode.layout === MindLayoutType.standard) {
+        delete newNode.layout;
     }
-    Transforms.setNode(board, newElement, path);
+    return newNode;
 };
-const setImage = (board, element, imageItem) => {
-    const newElement = {
-        data: { ...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 adjustAbstractToNode = (node) => {
+    const newNode = { ...node };
+    delete newNode.start;
+    delete newNode.end;
+    return newNode;
 };
-
-const MindTransforms = {
-    setLayout,
-    setTopic,
-    setTopicSize,
-    setNodeManualWidth,
-    addEmoji,
-    removeEmoji,
-    replaceEmoji,
-    insertAbstract,
-    setAbstractsByRefs,
-    setAbstractByStandardLayout,
-    removeElements,
-    insertNodes,
-    insertAbstractNodes,
-    setRightNodeCountByRefs,
-    removeImage,
-    setImage
+const adjustNodeToRoot = (board, node) => {
+    const newElement = { ...node };
+    if (!Node$1.string(newElement.data.topic)) {
+        newElement.data.topic = { children: [{ text: '思维导图' }] };
+    }
+    delete newElement?.strokeColor;
+    delete newElement?.fill;
+    delete newElement?.shape;
+    delete newElement?.strokeWidth;
+    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 {
+        ...newElement,
+        layout: newElement.layout ?? MindLayoutType.right,
+        isRoot: true,
+        type: 'mindmap'
+    };
 };
 
-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);
@@ -1207,146 +1113,28 @@ const setImageFocus = (board, element, isFocus) => {
         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 = async (board, element, imageFile) => {
-    let width = 0, height = 0;
-    await 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];
+    elementComponent.imageGenerator.componentRef.instance.isFocus = isFocus;
+    elementComponent.imageGenerator.componentRef.instance.cdr.markForCheck();
 };
 
 /**
- * Processing of branch color, width, style, etc. of the mind node
+ * 1. return new node height if height changed
+ * 2. new height is effected by zoom
  */
-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;
+const getNewNodeHeight = (board, element, newNodeDynamicWidth) => {
+    const textManage = MindElement.getTextManage(element);
+    const { height } = textManage.getSize();
+    textManage.updateRectangleWidth(newNodeDynamicWidth);
+    const { height: newHeight } = textManage.getSize();
+    if (height !== newHeight) {
+        return newHeight;
     }
-    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;
+    if (Math.abs(newHeight / board.viewport.zoom - element.height) > 2) {
+        return newHeight;
     }
-    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;
+    return undefined;
 };
 
-function isVirtualKey(e) {
-    const isMod = e.ctrlKey || e.metaKey;
-    const isAlt = isKeyHotkey('alt', e);
-    const isShift = isKeyHotkey('shift', e);
-    const isCapsLock = e.key.includes('CapsLock');
-    const isTab = e.key.includes('Tab');
-    const isEsc = e.key.includes('Escape');
-    const isF = e.key.startsWith('F');
-    const isArrow = e.key.includes('Arrow') ? true : false;
-    return isCapsLock || isMod || isAlt || isArrow || isShift || isTab || isEsc || isF;
-}
-
 const IS_DRAGGING = new WeakMap();
 const addActiveOnDragOrigin = (activeElement) => {
     const activeComponent = PlaitElement.getComponent(activeElement);
@@ -1581,6 +1369,24 @@ const getPathByDropTarget = (board, dropTarget) => {
     return targetPath;
 };
 
+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 newNodeRectangle = RectangleClient.inflate(nodeRectangle, -strokeWidth);
+    const nodeG = drawRoundRectangle(PlaitBoard.getRoughSVG(board), newNodeRectangle.x, newNodeRectangle.y, newNodeRectangle.x + newNodeRectangle.width, newNodeRectangle.y + newNodeRectangle.height, {
+        stroke,
+        strokeWidth,
+        fill,
+        fillStyle: 'solid'
+    }, false, DefaultNodeStyle.shape.rectangleRadius);
+    return nodeG;
+}
+
 const ABSTRACT_HANDLE_COLOR = '#6698FF80'; //primary color 50% opacity
 const ABSTRACT_INCLUDED_OUTLINE_OFFSET = 3.5;
 const ABSTRACT_HANDLE_LENGTH = 10;
@@ -1833,7 +1639,7 @@ const drawFakeDragNode = (board, element, offsetX, offsetY) => {
     };
     const textRectangle = getTopicRectangleByNode(board, activeComponent.node);
     const fakeNodeG = drawRoundRectangleByNode(board, fakeDraggingNode);
-    const richtextG = activeComponent.textManage.g.cloneNode(true);
+    const richtextG = MindElement.getTextManage(element).g.cloneNode(true);
     updateForeignObject(richtextG, textRectangle.width, textRectangle.height, textRectangle.x + offsetX, textRectangle.y + offsetY);
     dragFakeNodeG?.append(fakeNodeG);
     dragFakeNodeG?.append(richtextG);
@@ -1845,7 +1651,7 @@ const drawFakeDragNode = (board, element, offsetX, offsetY) => {
         dragFakeNodeG?.append(fakeEmojisG);
     }
     if (MindElement.hasImage(element)) {
-        const fakeImageG = activeComponent.imageDrawer.g.cloneNode(true);
+        const fakeImageG = activeComponent.imageGenerator.g.cloneNode(true);
         const foreignRectangle = getImageForeignRectangle(board, element);
         updateForeignObject(fakeImageG, foreignRectangle.width, foreignRectangle.height, foreignRectangle.x + offsetX, foreignRectangle.y + offsetY);
         dragFakeNodeG?.append(fakeImageG);
@@ -2151,13 +1957,13 @@ function handleTouchedAbstract(board, touchedAbstract, endPoint) {
     }
     if (touchedAbstract) {
         const component = PlaitElement.getComponent(touchedAbstract);
-        component.activeDrawer.updateAbstractOutline(touchedAbstract);
+        component.activeGenerator.updateAbstractOutline(touchedAbstract);
         touchedAbstract = undefined;
     }
     if (abstract) {
         touchedAbstract = abstract;
         const component = PlaitElement.getComponent(touchedAbstract);
-        component.activeDrawer.updateAbstractOutline(touchedAbstract, touchedHandle);
+        component.activeGenerator.updateAbstractOutline(touchedAbstract, touchedHandle);
     }
     return touchedAbstract;
 }
@@ -2195,79 +2001,12 @@ const deleteElementsHandleRightNodeCount = (board, deletableElements, effectedRi
             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;
+            else {
+                effectedRightNodeCount[index].rightNodeCount -= 1;
             }
-            return undefined;
-        },
-        getExtendHeight(node) {
-            return BASE * 6;
-        },
-        getIndentedCrossLevelGap() {
-            return BASE * 2;
         }
-    };
+    });
+    return effectedRightNodeCount;
 };
 
 /**
@@ -2463,7 +2202,14 @@ const MindElement = {
     getTextEditor(element) {
         const component = PlaitElement.getComponent(element);
         if (component) {
-            return component.textManage.componentRef.instance.editor;
+            return MindElement.getTextManage(element).componentRef.instance.editor;
+        }
+        throw new Error('can not get correctly component in get text editor');
+    },
+    getTextManage(element) {
+        const component = PlaitElement.getComponent(element);
+        if (component) {
+            return component.textManage;
         }
         throw new Error('can not get correctly component in get text editor');
     }
@@ -2479,54 +2225,6 @@ var BranchShape;
     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);
@@ -2632,16 +2330,250 @@ class NodeEmojisDrawer {
             });
             return this.g;
         }
-        return undefined;
+        return undefined;
+    }
+    destroy() {
+        if (this.g) {
+            this.g.remove();
+        }
+        this.emojiDrawers.forEach(drawer => drawer.destroy());
+        this.emojiDrawers = [];
+    }
+}
+
+const setAbstractsByRefs = (board, abstractRefs) => {
+    abstractRefs.forEach((newProperty, element) => {
+        const start = element.start + newProperty.start;
+        const end = element.end + newProperty.end;
+        const path = PlaitBoard.findPath(board, element);
+        if (start > end) {
+            Transforms.removeNode(board, path);
+        }
+        else {
+            Transforms.setNode(board, { start, end }, path);
+        }
+    });
+};
+const setAbstractByStandardLayout = (board, element) => {
+    const rightNodeCount = element.rightNodeCount;
+    const abstract = element.children.find(child => {
+        return AbstractNode.isAbstract(child) && child.end >= rightNodeCount && child.start < rightNodeCount;
+    });
+    if (abstract) {
+        const path = PlaitBoard.findPath(board, abstract);
+        Transforms.setNode(board, { end: rightNodeCount - 1 }, path);
+    }
+};
+const insertAbstract = (board, elements) => {
+    let elementGroup = getFirstLevelElement(elements);
+    const { parentElements, abstractIncludedGroups } = divideElementByParent(elementGroup);
+    abstractIncludedGroups.forEach((group, index) => {
+        const groupParent = parentElements[index];
+        setAbstractByElements(board, groupParent, group);
+    });
+};
+const setAbstractByElements = (board, groupParent, group) => {
+    const indexArray = group.map(child => groupParent.children.indexOf(child)).sort((a, b) => a - b);
+    const rightNodeCount = groupParent?.rightNodeCount;
+    const start = indexArray[0], end = indexArray[indexArray.length - 1];
+    if (isStandardLayout(MindQueries.getLayoutByElement(groupParent)) &&
+        rightNodeCount &&
+        start < rightNodeCount &&
+        end >= rightNodeCount) {
+        const childrenLength = groupParent.children.length;
+        const path = [...PlaitBoard.findPath(board, groupParent), childrenLength];
+        const leftChildren = indexArray.filter(index => index >= rightNodeCount);
+        const rightChildren = indexArray.filter(index => index < rightNodeCount);
+        insertAbstractNode(board, path, rightChildren[0], rightChildren[rightChildren.length - 1]);
+        insertAbstractNode(board, Path.next(path), leftChildren[0], leftChildren[leftChildren.length - 1]);
+    }
+    else {
+        const path = [...PlaitBoard.findPath(board, groupParent), groupParent.children.length];
+        insertAbstractNode(board, path, start, end);
+    }
+};
+const insertAbstractNode = (board, path, start, end) => {
+    const mindElement = createMindElement('概要', 28, 20, {
+        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) => {
+    const node = PlaitNode.get(board, path);
+    if (node && layout) {
+        node.children?.forEach((value, index) => {
+            if (value.layout) {
+                if ((isHorizontalLogicLayout(layout) && isVerticalLogicLayout(value.layout)) ||
+                    (isVerticalLogicLayout(layout) && isHorizontalLogicLayout(value.layout))) {
+                    Transforms.setNode(board, { layout: null }, [...path, index]);
+                }
+                if (value.children?.length) {
+                    correctLogicLayoutNode(board, layout, [...path, index]);
+                }
+            }
+        });
+    }
+};
+
+const 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: Math.ceil(newWidth), height: newHeight };
+};
+const setTopic = (board, element, topic, width, height) => {
+    const newElement = {
+        data: { ...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 = {
+        ...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 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) => {
+    const parent = PlaitNode.get(board, Path$1.parent(path));
+    const abstractPath = [...Path$1.parent(path), parent.children?.length];
+    const abstracts = validAbstractRefs.map(refs => {
+        const { start, end } = getRelativeStartEndByAbstractRef(refs, elements);
+        return {
+            ...refs.abstract,
+            start: start + path[path.length - 1],
+            end: end + path[path.length - 1]
+        };
+    });
+    insertNodes(board, abstracts, abstractPath);
+};
+const 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: { ...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: { ...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);
+};
+
+const removeImage = (board, element) => {
+    setImageFocus(board, element, false);
+    const newElement = {
+        data: { ...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;
     }
-    destroy() {
-        if (this.g) {
-            this.g.remove();
-        }
-        this.emojiDrawers.forEach(drawer => drawer.destroy());
-        this.emojiDrawers = [];
+    Transforms.setNode(board, newElement, path);
+};
+const setImage = (board, element, imageItem) => {
+    const newElement = {
+        data: { ...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,
+    insertNodes,
+    insertAbstractNodes,
+    setRightNodeCountByRefs,
+    removeImage,
+    setImage
+};
 
 class BaseDrawer {
     constructor(board) {
@@ -2794,8 +2726,8 @@ function drawAbstractIncludedOutline(board, roughSVG, element, activeHandlePosit
     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');
+    setStrokeLinecap(startHandle, 'round');
+    setStrokeLinecap(endHandle, 'round');
     abstractIncludedG.append(startHandle);
     abstractIncludedG.append(endHandle);
     abstractIncludedG.append(rectangle);
@@ -2871,7 +2803,7 @@ function drawAbstractRoundRectangle(rs, x1, y1, x2, y2, isHorizontal, options) {
     }
 }
 
-class NodeActiveDrawer extends BaseDrawer {
+class NodeActiveGenerator extends Generator {
     canDraw(element, data) {
         if (data.selected) {
             return true;
@@ -2882,19 +2814,17 @@ class NodeActiveDrawer extends BaseDrawer {
     }
     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);
+        const strokeWidth = getStrokeWidthByElement(this.board, element);
+        const activeStrokeWidth = ACTIVE_STROKE_WIDTH;
+        const activeRectangle = RectangleClient.inflate(rectangle, activeStrokeWidth);
+        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 + (activeStrokeWidth + strokeWidth) / 2);
+        activeG.appendChild(strokeG);
         return activeG;
     }
     updateAbstractOutline(element, activeHandlePosition, resizingLocation) {
@@ -3000,65 +2930,24 @@ class CollapseDrawer extends BaseDrawer {
     }
 }
 
-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) {
-        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);
+class NodeShapeGenerator extends Generator {
+    canDraw(element, data) {
+        const shape = getShapeByElement(this.board, element);
+        if (shape === MindElementShape.roundRectangle) {
+            return true;
         }
-        this.componentRef?.instance.cdr.markForCheck();
+        return false;
     }
-    destroy() {
-        if (this.g) {
-            this.g.remove();
-        }
-        if (this.componentRef) {
-            this.componentRef.destroy();
-            this.componentRef = null;
-        }
+    baseDraw(element, data) {
+        const rectangle = getRectangleByNode(data.node);
+        return drawRoundRectangleByElement(this.board, rectangle, data.node.origin);
     }
 }
 
-// 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 {
+class MindNodeComponent extends CommonPluginElement {
+    get textManage() {
+        return this.getTextManages()[0];
+    }
     constructor(viewContainerRef, cdr) {
         super(cdr);
         this.viewContainerRef = viewContainerRef;
@@ -3070,13 +2959,21 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         };
     }
     initializeDrawer() {
+        this.nodeShapeGenerator = new NodeShapeGenerator(this.board);
         this.nodeEmojisDrawer = new NodeEmojisDrawer(this.board, this.viewContainerRef);
         this.nodeInsertDrawer = new NodeInsertDrawer(this.board);
-        this.activeDrawer = new NodeActiveDrawer(this.board);
+        this.activeGenerator = new NodeActiveGenerator(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, {
+        this.imageGenerator = new ImageGenerator(this.board, {
+            getRectangle: (element) => {
+                return getImageForeignRectangle(this.board, element);
+            },
+            getImageItem: (element) => {
+                return element.data.image;
+            }
+        });
+        const plugins = this.board.getPluginOptions(WithTextPluginKey).textPlugins;
+        const textManage = new TextManage(this.board, this.viewContainerRef, {
             getRectangle: () => {
                 const rect = getTopicRectangleByNode(this.board, this.node);
                 return rect;
@@ -3091,8 +2988,17 @@ class MindNodeComponent extends PlaitPluginElementComponent {
                     MindTransforms.setTopicSize(this.board, this.element, width, height);
                 }
             },
-            textPlugins: plugins
+            textPlugins: plugins,
+            getMaxWidth: () => {
+                if (this.element.manualWidth) {
+                    return NodeSpace.getNodeDynamicWidth(this.board, this.element);
+                }
+                else {
+                    return Math.max(NodeSpace.getNodeDynamicWidth(this.board, this.element), NodeTopicThreshold.defaultTextMaxWidth);
+                }
+            }
         });
+        this.initializeTextManages([textManage]);
     }
     ngOnInit() {
         super.ngOnInit();
@@ -3101,13 +3007,13 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         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.nodeShapeGenerator.draw(this.element, this.g, { node: this.node });
         this.drawLink();
         this.drawTopic();
-        this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: this.textManage.isEditing });
+        this.activeGenerator.draw(this.element, this.g, { selected: this.selected, isEditing: this.textManage.isEditing });
         this.drawEmojis();
         this.drawExtend();
-        this.imageDrawer.drawImage(this.g, this.element);
+        this.imageGenerator.draw(this.element, this.g, this.viewContainerRef);
         if (PlaitMind.isMind(this.context.parent)) {
             this.g.classList.add('branch');
         }
@@ -3118,19 +3024,27 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         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.activeGenerator.draw(this.element, this.g, { selected: this.selected, isEditing: this.textManage.isEditing });
+            this.nodeShapeGenerator.draw(this.element, this.g, { node: this.node });
             this.drawLink();
             this.drawEmojis();
             this.drawExtend();
-            this.imageDrawer.updateImage(this.g, previous.element, value.element);
+            if (!MindElement.hasImage(previous.element) && MindElement.hasImage(this.element)) {
+                this.imageGenerator.draw(this.element, this.g, this.viewContainerRef);
+            }
+            if (MindElement.hasImage(previous.element) && MindElement.hasImage(this.element)) {
+                this.imageGenerator.updateImage(this.g, previous.element, value.element);
+            }
+            if (MindElement.hasImage(previous.element) && !MindElement.hasImage(this.element)) {
+                this.imageGenerator.destroy();
+            }
             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 });
+                this.activeGenerator.draw(this.element, this.g, { selected: this.selected, isEditing: this.textManage.isEditing });
             }
             if (!hasSameParent) {
                 this.drawLink();
@@ -3143,24 +3057,6 @@ class MindNodeComponent extends PlaitPluginElementComponent {
             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;
@@ -3206,35 +3102,16 @@ class MindNodeComponent extends PlaitPluginElementComponent {
     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.activeGenerator.draw(this.element, this.g, { selected: this.selected, isEditing: 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);
+                this.activeGenerator.draw(this.element, this.g, { selected: this.selected, isEditing: false });
             }
         });
     }
@@ -3242,16 +3119,15 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         super.ngOnDestroy();
         this.textManage.destroy();
         this.nodeEmojisDrawer.destroy();
-        this.imageDrawer.destroy();
+        this.imageGenerator.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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: MindNodeComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: MindNodeComponent, isStandalone: true, selector: "plait-mind-node", usesInheritance: true, ngImport: i0, template: `
         <plait-children
             *ngIf="!element.isCollapsed"
             [board]="board"
@@ -3259,8 +3135,9 @@ MindNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             [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: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PlaitChildrenElementComponent, selector: "plait-children", inputs: ["board", "parent", "effect", "parentG"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: MindNodeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'plait-mind-node',
@@ -3273,7 +3150,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
             [parentG]="parentG"
         ></plait-children>
     `,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true,
+                    imports: [NgIf, PlaitChildrenElementComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; } });
 
@@ -3303,33 +3182,21 @@ class PlaitMindComponent extends MindNodeComponent {
             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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitMindComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: PlaitMindComponent, isStandalone: true, 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: [{
+    `, isInline: true, dependencies: [{ kind: "component", type: PlaitChildrenElementComponent, selector: "plait-children", inputs: ["board", "parent", "effect", "parentG"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", 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]
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true,
+                    imports: [PlaitChildrenElementComponent, MindNodeComponent]
                 }]
         }] });
 
@@ -3455,7 +3322,7 @@ const withNodeDnd = (board) => {
                     refs = insertElementHandleRightNodeCount(board, targetElementPathRef.current.slice(0, 1), normalElements.length, refs);
                 }
                 MindTransforms.setRightNodeCountByRefs(board, refs);
-                MindTransforms.removeElements(board, firstLevelElements);
+                CoreTransforms.removeElements(board, firstLevelElements);
                 let insertPath = targetPathRef.current;
                 const parentPath = Path.parent(targetPathRef.current || targetPath);
                 if (!insertPath) {
@@ -3489,7 +3356,7 @@ const withNodeDnd = (board) => {
                         setActiveElements.push(node);
                     }
                 });
-                Transforms.setSelectionWithTemporaryElements(board, setActiveElements);
+                Transforms.addSelectionWithTemporaryElements(board, setActiveElements);
             }
             setIsDragging(board, false);
             activeElements = [];
@@ -3504,108 +3371,6 @@ const withNodeDnd = (board) => {
     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({
-                ...element,
-                points,
-                start,
-                end
-            });
-        }
-        else {
-            if (AbstractNode.isAbstract(element)) {
-                let newElement = { ...element, points };
-                delete newElement.start;
-                delete newElement.end;
-                result.push(newElement);
-            }
-            else {
-                result.push({
-                    ...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, {
-                    ...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;
@@ -3685,7 +3450,7 @@ const withAbstract = (board) => {
                 newProperty =
                     abstractHandlePosition === AbstractHandlePosition.start ? { start: locationIndex + 1 } : { end: locationIndex };
             }
-            abstractComponent.activeDrawer.updateAbstractOutline(activeAbstractElement, abstractHandlePosition, location);
+            abstractComponent.activeGenerator.updateAbstractOutline(activeAbstractElement, abstractHandlePosition, location);
         }
         mousemove(event);
     };
@@ -3702,7 +3467,7 @@ const withAbstract = (board) => {
             }
             else {
                 const abstractComponent = PlaitElement.getComponent(activeAbstractElement);
-                abstractComponent.activeDrawer.updateAbstractOutline(activeAbstractElement);
+                abstractComponent.activeGenerator.updateAbstractOutline(activeAbstractElement);
             }
             activeAbstractElement = undefined;
         }
@@ -3725,15 +3490,17 @@ const withCreateMind = (board) => {
     const newBoard = board;
     const { keydown, mousedown, mousemove, mouseup } = board;
     let fakeCreateNodeRef = null;
+    let emptyMind = 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, { ...currentOptions });
-            }, 0);
+        const isMindPointer = PlaitBoard.isPointer(board, MindPointerType.mind);
+        let movingPoint = PlaitBoard.getMovingPointInBoard(board);
+        if (movingPoint && isDrawingMode(board) && isMindPointer) {
+            movingPoint = transformPoint(board, toPoint(movingPoint[0], movingPoint[1], PlaitBoard.getHost(board)));
+            const emptyMind = createEmptyMind(newBoard, movingPoint);
+            Transforms.insertNode(board, emptyMind, [board.children.length]);
+            clearSelectedElement(board);
+            addSelectedElement(board, emptyMind);
+            BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
         }
         mousedown(event);
     };
@@ -3742,13 +3509,14 @@ const withCreateMind = (board) => {
             mousemove(event);
             return;
         }
-        if (PlaitBoard.isPointer(board, MindPointerType.mind)) {
+        const isMindPointer = PlaitBoard.isPointer(board, MindPointerType.mind);
+        if (isDndMode(board) && isMindPointer) {
             throttleRAF(() => {
-                const movingPoint = PlaitBoard.getMovingPointInBoard(board);
+                let 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);
+                    movingPoint = transformPoint(newBoard, toPoint(movingPoint[0], movingPoint[1], PlaitBoard.getHost(board)));
+                    emptyMind = createEmptyMind(newBoard, movingPoint);
+                    const nodeRectangle = getRectangleByElement(newBoard, emptyMind);
                     const nodeG = drawRoundRectangleByElement(board, nodeRectangle, emptyMind);
                     const topicRectangle = getTopicRectangleByElement(newBoard, nodeRectangle, emptyMind);
                     if (!fakeCreateNodeRef) {
@@ -3788,14 +3556,12 @@ const withCreateMind = (board) => {
         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);
+        if (emptyMind) {
             Transforms.insertNode(board, emptyMind, [board.children.length]);
             clearSelectedElement(board);
             addSelectedElement(board, emptyMind);
             BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
+            emptyMind = null;
         }
         destroy();
         mouseup(event);
@@ -3807,6 +3573,7 @@ const withCreateMind = (board) => {
         }
         if (event.key === DefaultHotkey && !PlaitBoard.isPointer(board, MindPointerType.mind)) {
             BoardTransforms.updatePointerType(board, MindPointerType.mind);
+            setCreationMode(board, BoardCreationMode.drawing);
             event.preventDefault();
             return;
         }
@@ -3824,7 +3591,7 @@ const withCreateMind = (board) => {
 
 const withMindHotkey = (baseBoard) => {
     const board = baseBoard;
-    const { keydown, deleteFragment } = board;
+    const { keydown } = board;
     board.keydown = (event) => {
         const selectedElements = getSelectedElements(board);
         const isSingleSelection = selectedElements.length === 1;
@@ -3864,73 +3631,19 @@ const withMindHotkey = (baseBoard) => {
                 insertMindElement(board, targetElement, findNewSiblingNodePath(board, targetElement));
                 return;
             }
-            if (!isVirtualKey(event) && !isSpaceHotkey(event) && isSingleSelection) {
+            if (!isVirtualKey(event) &&
+                !isDelete(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);
+                return;
+            }
         }
-    }
-    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 isExpandHotkey = (event) => {
-    return isKeyHotkey('mod+/', event);
-};
-const isTabHotkey = (event) => {
-    return event.key === 'Tab';
-};
-const isEnterHotkey = (event) => {
-    return event.key === 'Enter';
-};
-const isSpaceHotkey = (event) => {
-    return event.code === 'Space';
+        keydown(event);
+    };
+    return board;
 };
 
 const mouseMoveHandle = (board, event, nodeHoveredExtendRef) => {
@@ -4049,13 +3762,13 @@ const withNodeImage = (board) => {
         }
         globalPointerUp(event);
     };
-    board.setFragment = (data, rectangle) => {
+    board.setFragment = (data, rectangle, type) => {
         const selectedImageElement = getSelectedImageElement(board);
         if (selectedImageElement) {
             setClipboardDataByMedia(data, selectedImageElement.data.image, MediaKeys.image);
             return;
         }
-        setFragment(data, rectangle);
+        setFragment(data, rectangle, type);
     };
     board.deleteFragment = (data) => {
         const selectedImageElement = getSelectedImageElement(board);
@@ -4069,11 +3782,13 @@ const withNodeImage = (board) => {
         const isSelectedImage = !!getSelectedImageElement(board);
         const isSingleSelection = selectedElements.length === 1 && MindElement.isMindElement(board, selectedElements[0]);
         if (data?.files.length && (isSingleSelection || isSelectedImage)) {
-            const selectedElement = (selectedElements[0] || getSelectedImageElement(board));
             const acceptImageArray = acceptImageTypes.map(type => 'image/' + type);
+            const selectedElement = (selectedElements[0] || getSelectedImageElement(board));
             if (acceptImageArray.includes(data?.files[0].type)) {
                 const imageFile = data.files[0];
-                buildImage(board, selectedElement, imageFile);
+                buildImage(board, imageFile, DEFAULT_MIND_IMAGE_WIDTH, imageItem => {
+                    MindTransforms.setImage(board, selectedElement, imageItem);
+                });
                 return;
             }
         }
@@ -4100,6 +3815,7 @@ const withNodeResize = (board) => {
             PlaitBoard.getBoardContainer(board).classList.add(ResizeCursorClass['ew-resize']);
             targetElement = newTargetElement;
             startPoint = [event.x, event.y];
+            preventTouchMove(board, event, true);
             return;
         }
         pointerDown(event);
@@ -4112,7 +3828,6 @@ const withNodeResize = (board) => {
         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) {
@@ -4121,7 +3836,7 @@ const withNodeResize = (board) => {
                     minWidth: NodeSpace.getNodeResizableMinWidth(board, targetElement),
                     currentWidth: NodeSpace.getNodeDynamicWidth(board, targetElement),
                     path: PlaitBoard.findPath(board, targetElement),
-                    textManage: PlaitElement.getComponent(targetElement).textManage
+                    textManage: MindElement.getTextManage(targetElement)
                 };
                 MERGING.set(board, true);
             }
@@ -4129,7 +3844,7 @@ const withNodeResize = (board) => {
         if (isMindNodeResizing(board) && startPoint && targetElementRef) {
             // prevent text from being selected
             event.preventDefault();
-            preventTouchMove(board, true);
+            preventTouchMove(board, event, true);
             throttleRAF(() => {
                 if (!startPoint) {
                     return;
@@ -4143,7 +3858,7 @@ const withNodeResize = (board) => {
                 }
                 const newTarget = PlaitNode.get(board, targetElementRef.path);
                 if (newTarget && NodeSpace.getNodeTopicMinWidth(board, newTarget) !== resizedWidth) {
-                    targetElementRef.textManage.updateWidth(resizedWidth);
+                    targetElementRef.textManage.updateRectangleWidth(resizedWidth);
                     const { height } = targetElementRef.textManage.getSize();
                     MindTransforms.setNodeManualWidth(board, newTarget, resizedWidth * zoom, height);
                 }
@@ -4173,7 +3888,7 @@ const withNodeResize = (board) => {
             targetElement = null;
             startPoint = null;
             MERGING.set(board, false);
-            preventTouchMove(board, false);
+            preventTouchMove(board, event, false);
         }
     };
     return board;
@@ -4227,7 +3942,7 @@ const withNodeImageResize = (board) => {
                 if (result) {
                     return {
                         element: selectedMindElement,
-                        direction: result.direction,
+                        handle: result.handle,
                         cursorClass: result.cursorClass
                     };
                 }
@@ -4237,7 +3952,7 @@ const withNodeImageResize = (board) => {
         onResize: (resizeRef, resizeState) => {
             let offsetX = resizeState.offsetX;
             let offsetY = resizeState.offsetY;
-            if (resizeRef.direction === ResizeDirection.nw || resizeRef.direction === ResizeDirection.sw) {
+            if (resizeRef.handle === ResizeHandle.nw || resizeRef.handle === ResizeHandle.sw) {
                 offsetX = -offsetX;
             }
             const originWidth = resizeRef.element.data.image.width;
@@ -4257,9 +3972,191 @@ const withNodeImageResize = (board) => {
     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({
+                ...element,
+                points,
+                start,
+                end
+            });
+        }
+        else {
+            if (AbstractNode.isAbstract(element)) {
+                let newElement = { ...element, points };
+                delete newElement.start;
+                delete newElement.end;
+                result.push(newElement);
+            }
+            else {
+                result.push({
+                    ...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, {
+                    ...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.addSelectionWithTemporaryElements(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));
+    Transforms.addSelectionWithTemporaryElements(board, [newElement]);
+};
+
+const withMindFragment = (baseBoard) => {
+    const board = baseBoard;
+    const { getDeletedFragment, insertFragment, setFragment } = board;
+    board.getDeletedFragment = (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);
+            const deletableElements = getFirstLevelElement(targetMindElements);
+            data.push(...deletableElements);
+            const nextSelected = getNextSelectedElement(board, firstLevelElements);
+            if (nextSelected) {
+                addSelectedElement(board, nextSelected);
+            }
+        }
+        return getDeletedFragment(data);
+    };
+    board.setFragment = (data, rectangle, type) => {
+        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, type);
+    };
+    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 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 withMind = (baseBoard) => {
     const board = baseBoard;
-    const { drawElement, dblclick, insertFragment, setFragment, isHitSelection, getRectangle, isMovable, isRecursion } = board;
+    const { drawElement, dblclick, isHitSelection, getRectangle, isMovable, isRecursion, isAlign } = board;
     board.drawElement = (context) => {
         if (PlaitMind.isMind(context.element)) {
             return PlaitMindComponent;
@@ -4303,6 +4200,12 @@ const withMind = (baseBoard) => {
         }
         return isMovable(element);
     };
+    board.isAlign = (element) => {
+        if (PlaitMind.isMind(element) && element.isRoot) {
+            return true;
+        }
+        return isAlign(element);
+    };
     board.dblclick = (event) => {
         if (PlaitBoard.isReadonly(board)) {
             dblclick(event);
@@ -4323,41 +4226,14 @@ const withMind = (baseBoard) => {
         }
         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)))))))));
+    return withNodeResize(withNodeImageResize(withNodeImage(withNodeHoverDetect(withMindFragment(withMindHotkey(withMindExtend(withCreateMind(withAbstract(withNodeDnd(board))))))))));
 };
 
 class MindEmojiBaseComponent {
     get nativeElement() {
         return this.elementRef.nativeElement;
     }
-    handleClick() {
+    handlePointerDown() {
         const currentOptions = this.board.getPluginOptions(PlaitPluginKey.withSelection);
         this.board.setPluginOptions(PlaitPluginKey.withSelection, {
             isDisabledSelect: true
@@ -4373,10 +4249,10 @@ class MindEmojiBaseComponent {
     ngOnInit() {
         this.elementRef.nativeElement.style.fontSize = `${this.fontSize}px`;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: MindEmojiBaseComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.3", type: MindEmojiBaseComponent, inputs: { fontSize: "fontSize", emojiItem: "emojiItem", board: "board", element: "element" }, host: { listeners: { "pointerdown": "handlePointerDown()" }, classAttribute: "mind-node-emoji" }, ngImport: i0 }); }
 }
-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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: MindEmojiBaseComponent, decorators: [{
             type: Directive,
             args: [{
                     host: {
@@ -4391,71 +4267,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
                 type: Input
             }], element: [{
                 type: Input
-            }], handleClick: [{
+            }], handlePointerDown: [{
                 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 });
-        }
-    }
-}
-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
+                args: ['pointerdown']
             }] } });
 
 /*
@@ -4466,5 +4280,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, AbstractHandlePosition, AbstractResizeState, BASE, BRANCH_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, isVirtualKey, removeActiveOnDragOrigin, removeSelectedImageElement, selectImage, separateChildren, setImageFocus, setIsDragging, temporaryDisableSelection, withMind, withMindExtend };
+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, DEFAULT_MIND_IMAGE_WIDTH, DefaultAbstractNodeStyle, DefaultNodeStyle, ELEMENT_TO_NODE, EXTEND_DIAMETER, EXTEND_OFFSET, GRAY_COLOR, INHERIT_ATTRIBUTE_KEYS, IS_DRAGGING, LayoutDirection, LayoutDirectionsMap, MindColorfulThemeColor, MindDarkThemeColor, MindDefaultThemeColor, MindElement, MindElementShape, MindEmojiBaseComponent, MindNode, MindNodeComponent, MindPointerType, MindQueries, MindRetroThemeColor, MindSoftThemeColor, MindStarryThemeColor, MindThemeColor, MindThemeColors, MindTransforms, NodeSpace, NodeTopicThreshold, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, QUICK_INSERT_CIRCLE_COLOR, QUICK_INSERT_CIRCLE_OFFSET, QUICK_INSERT_INNER_CROSS_COLOR, ROOT_TOPIC_FONT_SIZE, ROOT_TOPIC_HEIGHT, ROOT_TOPIC_WIDTH, STROKE_WIDTH, TOPIC_COLOR, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, TRANSPARENT, WithMindPluginKey, addActiveOnDragOrigin, addSelectedImageElement, adjustAbstractToNode, adjustNodeToRoot, adjustRootToNode, 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, separateChildren, setImageFocus, setIsDragging, temporaryDisableSelection, withMind, withMindExtend };
 //# sourceMappingURL=plait-mind.mjs.map