@plait/mind 0.23.1 → 0.24.1

package/fesm2015/plait-mind.mjs

@@ -1,11 +1,12 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, Component, ChangeDetectionStrategy, NgModule, NgZone, HostListener } 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, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, PlaitNode, Path, PlaitBoard, depthFirstRecursion, getIsRecursionFunc, drawLinearPath, drawBezierPath, createG, updateForeignObject, drawRoundRectangle, getRectangleByElements, getSelectedElements, NODE_TO_PARENT, distanceBetweenPointAndRectangle, createForeignObject, createText, PlaitPointerType, PlaitPluginElementComponent, NODE_TO_INDEX, PlaitModule, isMainPointer, transformPoint, toPoint, getHitElements, distanceBetweenPointAndPoint, CLIP_BOARD_FORMAT_KEY, BOARD_TO_HOST, throttleRAF, BoardTransforms, removeSelectedElement, PlaitHistoryBoard, hotkeys, PRESS_AND_MOVE_BUFFER, MERGING, ResizeCursorClass } from '@plait/core';
-import { MindLayoutType, isIndentedLayout, AbstractNode, getNonAbstractChildren, isStandardLayout, isLeftLayout, isRightLayout, isVerticalLogicLayout, isHorizontalLogicLayout, isTopLayout, isBottomLayout, isHorizontalLayout, getCorrectStartEnd, getAbstractLayout, ConnectingPosition, GlobalLayout } from '@plait/layouts';
+import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, RectangleClient, PlaitElement, PlaitPluginKey, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, PlaitBoard, Path, PlaitNode, PlaitContextService, depthFirstRecursion, getIsRecursionFunc, drawLinearPath, drawBezierPath, createG, updateForeignObject, drawRoundRectangle, getRectangleByElements, getSelectedElements, NODE_TO_PARENT, distanceBetweenPointAndRectangle, createForeignObject, createText, PlaitPointerType, PlaitPluginElementComponent, NODE_TO_INDEX, PlaitModule, isMainPointer, transformPoint, toPoint, getHitElements, distanceBetweenPointAndPoint, CLIP_BOARD_FORMAT_KEY, BOARD_TO_HOST, throttleRAF, BoardTransforms, removeSelectedElement, PlaitHistoryBoard, hotkeys, PRESS_AND_MOVE_BUFFER, MERGING, ResizeCursorClass } from '@plait/core';
+import { MindLayoutType, isIndentedLayout, AbstractNode, isStandardLayout, isHorizontalLogicLayout, isVerticalLogicLayout, getNonAbstractChildren, isLeftLayout, isRightLayout, isTopLayout, isBottomLayout, isHorizontalLayout, getCorrectStartEnd, ConnectingPosition, getAbstractLayout, GlobalLayout } from '@plait/layouts';
 import { PlaitMarkEditor, MarkTypes, DEFAULT_FONT_SIZE, TEXT_DEFAULT_HEIGHT, buildText, getTextSize, TextManage, ExitOrigin, TextModule, getTextFromClipboard } from '@plait/text';
 import { fromEvent, Subject } from 'rxjs';
 import { Node as Node$1, Path as Path$1 } from 'slate';
+import { __awaiter } from 'tslib';
 import { isKeyHotkey } from 'is-hotkey';
 import { pointsOnBezierCurves } from 'points-on-curve';
 import { take, filter } from 'rxjs/operators';
@@ -232,10 +233,10 @@ const NodeSpace = {
             return (NodeSpace.getEmojiLeftSpace(board, element) +
                 getEmojisWidthHeight(board, element).width +
                 getSpaceEmojiAndText(element) +
-                NodeSpace.getNodeResizableWidth(board, element) +
+                NodeSpace.getNodeDynamicWidth(board, element) +
                 nodeAndText);
         }
-        return nodeAndText + NodeSpace.getNodeResizableWidth(board, element) + nodeAndText;
+        return nodeAndText + NodeSpace.getNodeDynamicWidth(board, element) + nodeAndText;
     },
     getNodeHeight(board, element) {
         const nodeAndText = getVerticalSpaceBetweenNodeAndText(board, element);
@@ -244,12 +245,23 @@ const NodeSpace = {
         }
         return nodeAndText + element.height + nodeAndText;
     },
-    getNodeResizableWidth(board, element) {
+    getNodeDynamicWidth(board, element) {
         var _a;
         const width = element.manualWidth || element.width;
         const imageWidth = MindElement.hasImage(element) ? (_a = element.data.image) === null || _a === void 0 ? void 0 : _a.width : 0;
         return Math.max(width, imageWidth);
     },
+    /**
+     * use this when upload image first or resize image
+     * @param board
+     * @param element
+     * @param imageWidth
+     * @returns
+     */
+    getNodeNewDynamicWidth(board, element, imageWidth) {
+        const width = element.manualWidth || element.width;
+        return Math.max(width, imageWidth);
+    },
     getNodeResizableMinWidth(board, element) {
         const minTopicWidth = NodeSpace.getNodeTopicMinWidth(board, element);
         if (MindElement.hasImage(element) && element.data.image.width > minTopicWidth) {
@@ -349,7 +361,7 @@ function getTopicRectangleByNode(board, node) {
 function getTopicRectangleByElement(board, nodeRectangle, element) {
     const x = nodeRectangle.x + NodeSpace.getTextLeftSpace(board, element);
     const y = nodeRectangle.y + NodeSpace.getTextTopSpace(board, element);
-    const width = NodeSpace.getNodeResizableWidth(board, element);
+    const width = NodeSpace.getNodeDynamicWidth(board, element);
     const height = Math.ceil(element.height);
     return { height, width, x, y };
 }
@@ -671,28 +683,6 @@ const adjustNodeToRoot = (board, node) => {
     return Object.assign(Object.assign({}, newElement), { layout: (_a = newElement.layout) !== null && _a !== void 0 ? _a : MindLayoutType.right, isRoot: true, type: 'mindmap' });
 };
 
-const BOARD_TO_SELECTED_IMAGE_ELEMENT = new WeakMap();
-const getSelectedImageElement = (board) => {
-    return BOARD_TO_SELECTED_IMAGE_ELEMENT.get(board);
-};
-const addSelectedImageElement = (board, element) => {
-    BOARD_TO_SELECTED_IMAGE_ELEMENT.set(board, element);
-};
-const removeSelectedImageElement = (board) => {
-    BOARD_TO_SELECTED_IMAGE_ELEMENT.delete(board);
-};
-const setImageFocus = (board, element, isFocus) => {
-    if (isFocus) {
-        addSelectedImageElement(board, element);
-    }
-    else {
-        removeSelectedImageElement(board);
-    }
-    const elementComponent = PlaitElement.getComponent(element);
-    elementComponent.imageDrawer.componentRef.instance.isFocus = isFocus;
-    elementComponent.imageDrawer.componentRef.instance.cdr.markForCheck();
-};
-
 const DefaultAbstractNodeStyle = {
     branch: { color: GRAY_COLOR, width: 2 },
     shape: {
@@ -711,8 +701,94 @@ const DefaultNodeStyle = {
     }
 };
 
-const getAvailableProperty = (board, element, propertyKey) => {
-    return element[propertyKey];
+const setAbstractsByRefs = (board, abstractRefs) => {
+    abstractRefs.forEach((newProperty, element) => {
+        const start = element.start + newProperty.start;
+        const end = element.end + newProperty.end;
+        const path = PlaitBoard.findPath(board, element);
+        if (start > end) {
+            Transforms.removeNode(board, path);
+        }
+        else {
+            Transforms.setNode(board, { start, end }, path);
+        }
+    });
+};
+const setAbstractByStandardLayout = (board, element) => {
+    const rightNodeCount = element.rightNodeCount;
+    const abstract = element.children.find(child => {
+        return AbstractNode.isAbstract(child) && child.end >= rightNodeCount && child.start < rightNodeCount;
+    });
+    if (abstract) {
+        const path = PlaitBoard.findPath(board, abstract);
+        Transforms.setNode(board, { end: rightNodeCount - 1 }, path);
+    }
+};
+const insertAbstract = (board, elements) => {
+    let elementGroup = getFirstLevelElement(elements);
+    const { parentElements, abstractIncludedGroups } = divideElementByParent(elementGroup);
+    abstractIncludedGroups.forEach((group, index) => {
+        const groupParent = parentElements[index];
+        setAbstractByElements(board, groupParent, group);
+    });
+};
+const setAbstractByElements = (board, groupParent, group) => {
+    const indexArray = group.map(child => groupParent.children.indexOf(child)).sort((a, b) => a - b);
+    const rightNodeCount = groupParent === null || groupParent === void 0 ? void 0 : groupParent.rightNodeCount;
+    const start = indexArray[0], end = indexArray[indexArray.length - 1];
+    if (isStandardLayout(MindQueries.getLayoutByElement(groupParent)) &&
+        rightNodeCount &&
+        start < rightNodeCount &&
+        end >= rightNodeCount) {
+        const childrenLength = groupParent.children.length;
+        const path = [...PlaitBoard.findPath(board, groupParent), childrenLength];
+        const leftChildren = indexArray.filter(index => index >= rightNodeCount);
+        const rightChildren = indexArray.filter(index => index < rightNodeCount);
+        insertAbstractNode(board, path, rightChildren[0], rightChildren[rightChildren.length - 1]);
+        insertAbstractNode(board, Path.next(path), leftChildren[0], leftChildren[leftChildren.length - 1]);
+    }
+    else {
+        const path = [...PlaitBoard.findPath(board, groupParent), groupParent.children.length];
+        insertAbstractNode(board, path, start, end);
+    }
+};
+const insertAbstractNode = (board, path, start, end) => {
+    const mindElement = createMindElement('概要', 28, 20, {
+        strokeWidth: DefaultAbstractNodeStyle.branch.width,
+        branchWidth: DefaultAbstractNodeStyle.branch.width
+    });
+    mindElement.start = start;
+    mindElement.end = end;
+    Transforms.insertNode(board, mindElement, path);
+    clearSelectedElement(board);
+    addSelectedElement(board, mindElement);
+};
+
+const setLayout = (board, layout, path) => {
+    correctLogicLayoutNode(board, layout, path);
+    const element = PlaitNode.get(board, path);
+    if (PlaitMind.isMind(element) && isStandardLayout(layout)) {
+        MindTransforms.setAbstractByStandardLayout(board, element);
+    }
+    Transforms.setNode(board, { layout }, path);
+};
+const correctLogicLayoutNode = (board, layout, path) => {
+    var _a;
+    const node = PlaitNode.get(board, path);
+    if (node && layout) {
+        (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach((value, index) => {
+            var _a;
+            if (value.layout) {
+                if ((isHorizontalLogicLayout(layout) && isVerticalLogicLayout(value.layout)) ||
+                    (isVerticalLogicLayout(layout) && isHorizontalLogicLayout(value.layout))) {
+                    Transforms.setNode(board, { layout: null }, [...path, index]);
+                }
+                if ((_a = value.children) === null || _a === void 0 ? void 0 : _a.length) {
+                    correctLogicLayoutNode(board, layout, [...path, index]);
+                }
+            }
+        });
+    }
 };
 
 const separateChildren = (parentElement) => {
@@ -882,84 +958,327 @@ const isChildOfAbstract = (board, element) => {
     return !!ancestors.find((value) => AbstractNode.isAbstract(value));
 };
 
-/**
- * Processing of branch color, width, style, etc. of the mind node
- */
-const getBranchColorByMindElement = (board, element) => {
-    if (AbstractNode.isAbstract(element) || isChildOfAbstract(board, element)) {
-        return getAbstractBranchColor(board, element);
-    }
-    const branchColor = getAvailableProperty(board, element, 'branchColor');
-    return branchColor || getDefaultBranchColor(board, element);
+const 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 getBranchShapeByMindElement = (board, element) => {
-    const branchShape = getAvailableProperty(board, element, 'branchShape');
-    return branchShape || BranchShape.bight;
+const setTopic = (board, element, topic, width, height) => {
+    const newElement = Object.assign({ data: Object.assign(Object.assign({}, element.data), { topic }) }, normalizeWidthAndHeight(board, element, width, height));
+    const path = PlaitBoard.findPath(board, element);
+    Transforms.setNode(board, newElement, path);
 };
-const getBranchWidthByMindElement = (board, element) => {
-    const branchWidth = getAvailableProperty(board, element, 'branchWidth');
-    return branchWidth || BRANCH_WIDTH;
+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 getAbstractBranchWidth = (board, element) => {
-    if (!isNullOrUndefined(element.branchWidth)) {
-        return element.branchWidth;
+const setTopicSize = (board, element, width, height) => {
+    const newElement = Object.assign({}, normalizeWidthAndHeight(board, element, width, height));
+    let isEqualWidth = Math.ceil(element.width) === Math.ceil(newElement.width);
+    let isEqualHeight = Math.ceil(element.height) === Math.ceil(newElement.height);
+    if (element.manualWidth) {
+        isEqualWidth = true;
     }
-    return DefaultAbstractNodeStyle.branch.width;
-};
-const getAbstractBranchColor = (board, element) => {
-    if (element.branchColor) {
-        return element.branchColor;
+    if (!isEqualWidth || !isEqualHeight) {
+        const path = PlaitBoard.findPath(board, element);
+        Transforms.setNode(board, newElement, path);
     }
-    return DefaultAbstractNodeStyle.branch.color;
 };
-const getNextBranchColor = (board, root) => {
-    const index = root.children.length;
-    return getDefaultBranchColorByIndex(board, index);
+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 getDefaultBranchColor = (board, element) => {
-    const path = PlaitBoard.findPath(board, element);
-    return getDefaultBranchColorByIndex(board, path[1]);
+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 getDefaultBranchColorByIndex = (board, index) => {
-    const themeColor = getMindThemeColor(board);
-    const length = themeColor.branchColors.length;
-    const remainder = index % length;
-    return themeColor.branchColors[remainder];
+const insertAbstractNodes = (board, validAbstractRefs, elements, path) => {
+    var _a;
+    const parent = PlaitNode.get(board, Path$1.parent(path));
+    const abstractPath = [...Path$1.parent(path), (_a = parent.children) === null || _a === void 0 ? void 0 : _a.length];
+    const abstracts = validAbstractRefs.map(refs => {
+        const { start, end } = getRelativeStartEndByAbstractRef(refs, elements);
+        return Object.assign(Object.assign({}, refs.abstract), { start: start + path[path.length - 1], end: end + path[path.length - 1] });
+    });
+    insertNodes(board, abstracts, abstractPath);
 };
-const 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 setRightNodeCountByRefs = (board, refs) => {
+    refs.forEach(ref => {
+        Transforms.setNode(board, { rightNodeCount: ref.rightNodeCount }, ref.path);
+    });
 };
 
-const getStrokeByMindElement = (board, element) => {
-    if (PlaitMind.isMind(element)) {
-        const defaultRootStroke = getMindThemeColor(board).rootFill;
-        return element.strokeColor || defaultRootStroke;
-    }
-    if (AbstractNode.isAbstract(element) || isChildOfAbstract(board, element)) {
-        return element.strokeColor || DefaultAbstractNodeStyle.shape.strokeColor;
-    }
-    return getAvailableProperty(board, element, 'strokeColor') || getDefaultBranchColor(board, element);
-};
-const getStrokeWidthByElement = (board, element) => {
-    const strokeWidth = element.strokeWidth ||
-        (AbstractNode.isAbstract(element) ? DefaultAbstractNodeStyle.shape.strokeWidth : DefaultNodeStyle.shape.strokeWidth);
-    return strokeWidth;
+const addEmoji = (board, element, emojiItem) => {
+    const emojis = element.data.emojis || [];
+    const newEmojis = [...emojis];
+    newEmojis.push(emojiItem);
+    const newElement = {
+        data: Object.assign(Object.assign({}, element.data), { emojis: newEmojis })
+    };
+    const path = PlaitBoard.findPath(board, element);
+    Transforms.setNode(board, newElement, path);
 };
-const getFillByElement = (board, element) => {
-    if (element.fill) {
-        return element.fill;
+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;
     }
-    const defaultRootFill = getMindThemeColor(board).rootFill;
-    return element.isRoot ? defaultRootFill : DefaultNodeStyle.shape.fill;
+    if (emojis.length > 0) {
+        newElement.data.emojis = emojis;
+    }
+    const path = PlaitBoard.findPath(board, element);
+    Transforms.setNode(board, newElement, path);
 };
-const getShapeByElement = (board, element) => {
+const replaceEmoji = (board, element, oldEmoji, newEmoji) => {
+    const newElement = {
+        data: Object.assign({}, element.data)
+    };
+    const newEmojis = element.data.emojis.map(value => {
+        if (value === oldEmoji) {
+            return newEmoji;
+        }
+        return value;
+    });
+    newElement.data.emojis = newEmojis;
+    const path = PlaitBoard.findPath(board, element);
+    Transforms.setNode(board, newElement, path);
+};
+
+/**
+ * 1. return new node height if height changed
+ * 2. new height is effected by zoom
+ */
+const getNewNodeHeight = (board, element, newNodeDynamicWidth) => {
+    const textManage = PlaitElement.getComponent(element).textManage;
+    const { height } = textManage.getSize();
+    textManage.updateWidth(newNodeDynamicWidth);
+    const { height: newHeight } = textManage.getSize();
+    if (!element.manualWidth) {
+        textManage.updateWidth(0);
+    }
+    if (height !== newHeight) {
+        return newHeight;
+    }
+    if (Math.abs(newHeight / board.viewport.zoom - element.height) > 2) {
+        return newHeight;
+    }
+    return undefined;
+};
+
+const removeImage = (board, element) => {
+    setImageFocus(board, element, false);
+    const newElement = {
+        data: Object.assign({}, element.data)
+    };
+    delete newElement.data.image;
+    const path = PlaitBoard.findPath(board, element);
+    const newDynamicWidth = NodeSpace.getNodeNewDynamicWidth(board, element, 0);
+    const newHeight = getNewNodeHeight(board, element, newDynamicWidth);
+    if (newHeight) {
+        newElement.height = newHeight / board.viewport.zoom;
+    }
+    Transforms.setNode(board, newElement, path);
+};
+const setImage = (board, element, imageItem) => {
+    const newElement = {
+        data: Object.assign(Object.assign({}, element.data), { image: imageItem })
+    };
+    const newDynamicWidth = NodeSpace.getNodeNewDynamicWidth(board, element, imageItem.width);
+    const newHeight = getNewNodeHeight(board, element, newDynamicWidth);
+    if (newHeight) {
+        newElement.height = newHeight / board.viewport.zoom;
+    }
+    const path = PlaitBoard.findPath(board, element);
+    Transforms.setNode(board, newElement, path);
+};
+
+const MindTransforms = {
+    setLayout,
+    setTopic,
+    setTopicSize,
+    setNodeManualWidth,
+    addEmoji,
+    removeEmoji,
+    replaceEmoji,
+    insertAbstract,
+    setAbstractsByRefs,
+    setAbstractByStandardLayout,
+    removeElements,
+    insertNodes,
+    insertAbstractNodes,
+    setRightNodeCountByRefs,
+    removeImage,
+    setImage
+};
+
+const PICTURE_ACCEPTED_UPLOAD_SIZE = 20;
+const acceptImageTypes = ['png', 'jpeg', 'gif', 'bmp'];
+const DEFAULT_IMAGE_WIDTH = 240;
+
+const BOARD_TO_SELECTED_IMAGE_ELEMENT = new WeakMap();
+const getSelectedImageElement = (board) => {
+    return BOARD_TO_SELECTED_IMAGE_ELEMENT.get(board);
+};
+const addSelectedImageElement = (board, element) => {
+    BOARD_TO_SELECTED_IMAGE_ELEMENT.set(board, element);
+};
+const removeSelectedImageElement = (board) => {
+    BOARD_TO_SELECTED_IMAGE_ELEMENT.delete(board);
+};
+const setImageFocus = (board, element, isFocus) => {
+    if (isFocus) {
+        addSelectedImageElement(board, element);
+    }
+    else {
+        removeSelectedImageElement(board);
+    }
+    const elementComponent = PlaitElement.getComponent(element);
+    elementComponent.imageDrawer.componentRef.instance.isFocus = isFocus;
+    elementComponent.imageDrawer.componentRef.instance.cdr.markForCheck();
+};
+const selectImage = (board, element, acceptImageTypes = ['png', 'jpeg', 'gif', 'bmp']) => {
+    const inputFile = document.createElement('input');
+    inputFile.setAttribute('type', 'file');
+    const acceptImageTypesString = '.' + acceptImageTypes.join(',.');
+    inputFile.setAttribute('accept', acceptImageTypesString);
+    inputFile.onchange = (event) => {
+        buildImage(board, element, event.target.files[0]);
+    };
+    inputFile.click();
+};
+const buildImage = (board, element, imageFile) => __awaiter(void 0, void 0, void 0, function* () {
+    let width = 0, height = 0;
+    yield getImageSize(imageFile).then((value) => {
+        width = value.width;
+        height = value.height;
+    });
+    let imageItem = null;
+    const url = URL.createObjectURL(imageFile);
+    const context = PlaitBoard.getComponent(board).viewContainerRef.injector.get(PlaitContextService);
+    context.setUploadingFile({ url, file: imageFile });
+    imageItem = {
+        url,
+        width,
+        height
+    };
+    MindTransforms.setImage(board, element, imageItem);
+});
+function getImageSize(file, defaultImageWidth = DEFAULT_IMAGE_WIDTH) {
+    return new Promise((resolve, reject) => {
+        const image = new Image();
+        image.src = URL.createObjectURL(file);
+        image.onload = function () {
+            const width = defaultImageWidth;
+            const height = (defaultImageWidth * image.naturalHeight) / image.naturalWidth;
+            resolve(image.naturalWidth > defaultImageWidth ? { width, height } : { width: image.naturalWidth, height: image.naturalHeight });
+        };
+    });
+}
+
+const getAvailableProperty = (board, element, propertyKey) => {
+    return element[propertyKey];
+};
+
+/**
+ * Processing of branch color, width, style, etc. of the mind node
+ */
+const getBranchColorByMindElement = (board, element) => {
+    if (AbstractNode.isAbstract(element) || isChildOfAbstract(board, element)) {
+        return getAbstractBranchColor(board, element);
+    }
+    const branchColor = getAvailableProperty(board, element, 'branchColor');
+    return branchColor || getDefaultBranchColor(board, element);
+};
+const getBranchShapeByMindElement = (board, element) => {
+    const branchShape = getAvailableProperty(board, element, 'branchShape');
+    return branchShape || BranchShape.bight;
+};
+const getBranchWidthByMindElement = (board, element) => {
+    const branchWidth = getAvailableProperty(board, element, 'branchWidth');
+    return branchWidth || BRANCH_WIDTH;
+};
+const getAbstractBranchWidth = (board, element) => {
+    if (!isNullOrUndefined(element.branchWidth)) {
+        return element.branchWidth;
+    }
+    return DefaultAbstractNodeStyle.branch.width;
+};
+const getAbstractBranchColor = (board, element) => {
+    if (element.branchColor) {
+        return element.branchColor;
+    }
+    return DefaultAbstractNodeStyle.branch.color;
+};
+const getNextBranchColor = (board, root) => {
+    const index = root.children.length;
+    return getDefaultBranchColorByIndex(board, index);
+};
+const getDefaultBranchColor = (board, element) => {
+    const path = PlaitBoard.findPath(board, element);
+    return getDefaultBranchColorByIndex(board, path[1]);
+};
+const getDefaultBranchColorByIndex = (board, index) => {
+    const themeColor = getMindThemeColor(board);
+    const length = themeColor.branchColors.length;
+    const remainder = index % length;
+    return themeColor.branchColors[remainder];
+};
+const getMindThemeColor = (board) => {
+    const themeColors = PlaitBoard.getThemeColors(board);
+    const themeColor = themeColors.find(val => val.mode === board.theme.themeColorMode);
+    if (themeColor && MindThemeColor.isMindThemeColor(themeColor)) {
+        return themeColor;
+    }
+    else {
+        return MindDefaultThemeColor;
+    }
+};
+
+const getStrokeByMindElement = (board, element) => {
+    if (PlaitMind.isMind(element)) {
+        const defaultRootStroke = getMindThemeColor(board).rootFill;
+        return element.strokeColor || defaultRootStroke;
+    }
+    if (AbstractNode.isAbstract(element) || isChildOfAbstract(board, element)) {
+        return element.strokeColor || DefaultAbstractNodeStyle.shape.strokeColor;
+    }
+    return getAvailableProperty(board, element, 'strokeColor') || getDefaultBranchColor(board, element);
+};
+const getStrokeWidthByElement = (board, element) => {
+    const strokeWidth = element.strokeWidth ||
+        (AbstractNode.isAbstract(element) ? DefaultAbstractNodeStyle.shape.strokeWidth : DefaultNodeStyle.shape.strokeWidth);
+    return strokeWidth;
+};
+const getFillByElement = (board, element) => {
+    if (element.fill) {
+        return element.fill;
+    }
+    const defaultRootFill = getMindThemeColor(board).rootFill;
+    return element.isRoot ? defaultRootFill : DefaultNodeStyle.shape.fill;
+};
+const getShapeByElement = (board, element) => {
     const shape = getAvailableProperty(board, element, 'shape');
     return shape || MindElementShape.roundRectangle;
 };
@@ -1810,6 +2129,73 @@ const deleteElementsHandleRightNodeCount = (board, deletableElements, effectedRi
     return effectedRightNodeCount;
 };
 
+const getLayoutOptions = (board) => {
+    function getMainAxle(element, parent) {
+        const strokeWidth = element.strokeWidth || STROKE_WIDTH;
+        if (element.isRoot) {
+            return BASE * 12;
+        }
+        if (parent && parent.isRoot()) {
+            return BASE * 3 + strokeWidth / 2;
+        }
+        return BASE * 3 + strokeWidth / 2;
+    }
+    function getSecondAxle(element, parent) {
+        const strokeWidth = element.strokeWidth || STROKE_WIDTH;
+        if (element.isRoot) {
+            return BASE * 10 + strokeWidth / 2;
+        }
+        return BASE * 6 + strokeWidth / 2;
+    }
+    return {
+        getHeight(element) {
+            return NodeSpace.getNodeHeight(board, element);
+        },
+        getWidth(element) {
+            return NodeSpace.getNodeWidth(board, element);
+        },
+        getHorizontalGap(element, parent) {
+            const _layout = (parent && parent.layout) || getRootLayout(element);
+            const isHorizontal = isHorizontalLayout(_layout);
+            const strokeWidth = element.strokeWidth || STROKE_WIDTH;
+            if (isIndentedLayout(_layout)) {
+                return BASE * 4 + strokeWidth;
+            }
+            if (!isHorizontal) {
+                return getMainAxle(element, parent);
+            }
+            else {
+                return getSecondAxle(element, parent);
+            }
+        },
+        getVerticalGap(element, parent) {
+            const _layout = (parent && parent.layout) || getRootLayout(element);
+            if (isIndentedLayout(_layout)) {
+                return BASE;
+            }
+            const isHorizontal = isHorizontalLayout(_layout);
+            if (isHorizontal) {
+                return getMainAxle(element, parent);
+            }
+            else {
+                return getSecondAxle(element, parent);
+            }
+        },
+        getVerticalConnectingPosition(element, parent) {
+            if (element.shape === MindElementShape.underline && parent && isHorizontalLogicLayout(parent.layout)) {
+                return ConnectingPosition.bottom;
+            }
+            return undefined;
+        },
+        getExtendHeight(node) {
+            return BASE * 6;
+        },
+        getIndentedCrossLevelGap() {
+            return BASE * 2;
+        }
+    };
+};
+
 /**
  * get correctly layout：
  * 1. root is standard -> left or right
@@ -2110,303 +2496,80 @@ function drawAbstractLink(board, node, isHorizontal) {
         g.appendChild(straightLine);
         return g;
     }
-    const link = PlaitBoard.getRoughSVG(board).path(`M${bezierBeginPoint[0]},${bezierBeginPoint[1]} Q${c1[0]},${c1[1]} ${bezierConnectorPoint[0]},${bezierConnectorPoint[1]} Q${c2[0]},${c2[1]} ${bezierEndPoint[0]},${bezierEndPoint[1]} M${abstractConnectorPoint[0]},${abstractConnectorPoint[1]} L${bezierConnectorPoint[0]},${bezierConnectorPoint[1]}`, {
-        stroke: branchColor,
-        strokeWidth: branchWidth
-    });
-    return link;
-}
-
-class EmojiDrawer {
-    constructor(board, viewContainerRef) {
-        this.board = board;
-        this.viewContainerRef = viewContainerRef;
-        this.componentRef = null;
-    }
-    draw(emoji, element) {
-        this.destroy();
-        const componentType = this.board.drawEmoji(emoji, element);
-        this.componentRef = this.viewContainerRef.createComponent(componentType);
-        this.componentRef.instance.emojiItem = emoji;
-        this.componentRef.instance.board = this.board;
-        this.componentRef.instance.element = element;
-        this.componentRef.instance.fontSize = getEmojiFontSize(element);
-    }
-    get nativeElement() {
-        if (this.componentRef) {
-            return this.componentRef.instance.nativeElement;
-        }
-        else {
-            return null;
-        }
-    }
-    destroy() {
-        if (this.componentRef) {
-            this.componentRef.destroy();
-            this.componentRef = null;
-        }
-    }
-}
-class NodeEmojisDrawer {
-    constructor(board, viewContainerRef) {
-        this.board = board;
-        this.viewContainerRef = viewContainerRef;
-        this.emojiDrawers = [];
-    }
-    drawEmojis(element) {
-        this.destroy();
-        if (MindElement.hasEmojis(element)) {
-            this.g = createG();
-            this.g.classList.add('emojis');
-            const foreignRectangle = getEmojiForeignRectangle(this.board, element);
-            const foreignObject = createForeignObject(foreignRectangle.x, foreignRectangle.y, foreignRectangle.width, foreignRectangle.height);
-            this.g.append(foreignObject);
-            const container = document.createElement('div');
-            container.classList.add('node-emojis-container');
-            foreignObject.append(container);
-            this.emojiDrawers = element.data.emojis.map(emojiItem => {
-                const drawer = new EmojiDrawer(this.board, this.viewContainerRef);
-                drawer.draw(emojiItem, element);
-                return drawer;
-            });
-            this.emojiDrawers.forEach(drawer => {
-                container.append(drawer.nativeElement);
-            });
-            return this.g;
-        }
-        return undefined;
-    }
-    destroy() {
-        if (this.g) {
-            this.g.remove();
-        }
-        this.emojiDrawers.forEach(drawer => drawer.destroy());
-        this.emojiDrawers = [];
-    }
-}
-
-const setAbstractsByRefs = (board, abstractRefs) => {
-    abstractRefs.forEach((newProperty, element) => {
-        const start = element.start + newProperty.start;
-        const end = element.end + newProperty.end;
-        const path = PlaitBoard.findPath(board, element);
-        if (start > end) {
-            Transforms.removeNode(board, path);
-        }
-        else {
-            Transforms.setNode(board, { start, end }, path);
-        }
-    });
-};
-const setAbstractByStandardLayout = (board, element) => {
-    const rightNodeCount = element.rightNodeCount;
-    const abstract = element.children.find(child => {
-        return AbstractNode.isAbstract(child) && child.end >= rightNodeCount && child.start < rightNodeCount;
-    });
-    if (abstract) {
-        const path = PlaitBoard.findPath(board, abstract);
-        Transforms.setNode(board, { end: rightNodeCount - 1 }, path);
-    }
-};
-const insertAbstract = (board, elements) => {
-    let elementGroup = getFirstLevelElement(elements);
-    const { parentElements, abstractIncludedGroups } = divideElementByParent(elementGroup);
-    abstractIncludedGroups.forEach((group, index) => {
-        const groupParent = parentElements[index];
-        setAbstractByElements(board, groupParent, group);
-    });
-};
-const setAbstractByElements = (board, groupParent, group) => {
-    const indexArray = group.map(child => groupParent.children.indexOf(child)).sort((a, b) => a - b);
-    const rightNodeCount = groupParent === null || groupParent === void 0 ? void 0 : groupParent.rightNodeCount;
-    const start = indexArray[0], end = indexArray[indexArray.length - 1];
-    if (isStandardLayout(MindQueries.getLayoutByElement(groupParent)) &&
-        rightNodeCount &&
-        start < rightNodeCount &&
-        end >= rightNodeCount) {
-        const childrenLength = groupParent.children.length;
-        const path = [...PlaitBoard.findPath(board, groupParent), childrenLength];
-        const leftChildren = indexArray.filter(index => index >= rightNodeCount);
-        const rightChildren = indexArray.filter(index => index < rightNodeCount);
-        insertAbstractNode(board, path, rightChildren[0], rightChildren[rightChildren.length - 1]);
-        insertAbstractNode(board, Path.next(path), leftChildren[0], leftChildren[leftChildren.length - 1]);
-    }
-    else {
-        const path = [...PlaitBoard.findPath(board, groupParent), groupParent.children.length];
-        insertAbstractNode(board, path, start, end);
-    }
-};
-const insertAbstractNode = (board, path, start, end) => {
-    const mindElement = createMindElement('概要', 28, 20, {
-        strokeWidth: DefaultAbstractNodeStyle.branch.width,
-        branchWidth: DefaultAbstractNodeStyle.branch.width
-    });
-    mindElement.start = start;
-    mindElement.end = end;
-    Transforms.insertNode(board, mindElement, path);
-    clearSelectedElement(board);
-    addSelectedElement(board, mindElement);
-};
-
-const setLayout = (board, layout, path) => {
-    correctLogicLayoutNode(board, layout, path);
-    const element = PlaitNode.get(board, path);
-    if (PlaitMind.isMind(element) && isStandardLayout(layout)) {
-        MindTransforms.setAbstractByStandardLayout(board, element);
-    }
-    Transforms.setNode(board, { layout }, path);
-};
-const correctLogicLayoutNode = (board, layout, path) => {
-    var _a;
-    const node = PlaitNode.get(board, path);
-    if (node && layout) {
-        (_a = node.children) === null || _a === void 0 ? void 0 : _a.forEach((value, index) => {
-            var _a;
-            if (value.layout) {
-                if ((isHorizontalLogicLayout(layout) && isVerticalLogicLayout(value.layout)) ||
-                    (isVerticalLogicLayout(layout) && isHorizontalLogicLayout(value.layout))) {
-                    Transforms.setNode(board, { layout: null }, [...path, index]);
-                }
-                if ((_a = value.children) === null || _a === void 0 ? void 0 : _a.length) {
-                    correctLogicLayoutNode(board, layout, [...path, index]);
-                }
-            }
-        });
-    }
-};
-
-const normalizeWidthAndHeight = (board, element, width, height) => {
-    const minWidth = NodeSpace.getNodeTopicMinWidth(board, element, element.isRoot);
-    const newWidth = width < minWidth * board.viewport.zoom ? minWidth : width / board.viewport.zoom;
-    const newHeight = height / board.viewport.zoom;
-    return { width: newWidth, height: newHeight };
-};
-const setTopic = (board, element, topic, width, height) => {
-    const newElement = Object.assign({ data: Object.assign(Object.assign({}, element.data), { topic }) }, normalizeWidthAndHeight(board, element, width, height));
-    const path = PlaitBoard.findPath(board, element);
-    Transforms.setNode(board, newElement, path);
-};
-const setNodeManualWidth = (board, element, width, height) => {
-    const path = PlaitBoard.findPath(board, element);
-    const { width: normalizedWidth, height: normalizedHeight } = normalizeWidthAndHeight(board, element, width, height);
-    const newElement = { manualWidth: normalizedWidth, height: normalizedHeight };
-    Transforms.setNode(board, newElement, path);
-};
-const setTopicSize = (board, element, width, height) => {
-    const newElement = Object.assign({}, normalizeWidthAndHeight(board, element, width, height));
-    let isEqualWidth = Math.ceil(element.width) === Math.ceil(newElement.width);
-    let isEqualHeight = Math.ceil(element.height) === Math.ceil(newElement.height);
-    if (element.manualWidth) {
-        isEqualWidth = true;
-    }
-    if (!isEqualWidth || !isEqualHeight) {
-        const path = PlaitBoard.findPath(board, element);
-        Transforms.setNode(board, newElement, path);
-    }
-};
-const removeElements = (board, elements) => {
-    const deletableElements = getFirstLevelElement(elements);
-    deletableElements
-        .map(element => {
-        const path = PlaitBoard.findPath(board, element);
-        const ref = board.pathRef(path);
-        return () => {
-            Transforms.removeNode(board, ref.current);
-            ref.unref();
-        };
-    })
-        .forEach(action => {
-        action();
-    });
-};
-const insertNodes = (board, elements, path) => {
-    const pathRef = board.pathRef(path);
-    elements.forEach(element => {
-        if (pathRef.current) {
-            Transforms.insertNode(board, element, pathRef.current);
-        }
-    });
-    pathRef.unref();
-};
-const insertAbstractNodes = (board, validAbstractRefs, elements, path) => {
-    var _a;
-    const parent = PlaitNode.get(board, Path$1.parent(path));
-    const abstractPath = [...Path$1.parent(path), (_a = parent.children) === null || _a === void 0 ? void 0 : _a.length];
-    const abstracts = validAbstractRefs.map(refs => {
-        const { start, end } = getRelativeStartEndByAbstractRef(refs, elements);
-        return Object.assign(Object.assign({}, refs.abstract), { start: start + path[path.length - 1], end: end + path[path.length - 1] });
-    });
-    insertNodes(board, abstracts, abstractPath);
-};
-const setRightNodeCountByRefs = (board, refs) => {
-    refs.forEach(ref => {
-        Transforms.setNode(board, { rightNodeCount: ref.rightNodeCount }, ref.path);
-    });
-};
-
-const addEmoji = (board, element, emojiItem) => {
-    const emojis = element.data.emojis || [];
-    const newEmojis = [...emojis];
-    newEmojis.push(emojiItem);
-    const newElement = {
-        data: Object.assign(Object.assign({}, element.data), { emojis: newEmojis })
-    };
-    const path = PlaitBoard.findPath(board, element);
-    Transforms.setNode(board, newElement, path);
-};
-const removeEmoji = (board, element, emojiItem) => {
-    const emojis = element.data.emojis.filter(value => value !== emojiItem);
-    const newElement = {
-        data: Object.assign({}, element.data)
-    };
-    if (emojis.length > 0) {
-        newElement.data.emojis = emojis;
-    }
-    const path = PlaitBoard.findPath(board, element);
-    Transforms.setNode(board, newElement, path);
-};
-const replaceEmoji = (board, element, oldEmoji, newEmoji) => {
-    const newElement = {
-        data: Object.assign({}, element.data)
-    };
-    const newEmojis = element.data.emojis.map(value => {
-        if (value === oldEmoji) {
-            return newEmoji;
-        }
-        return value;
+    const link = PlaitBoard.getRoughSVG(board).path(`M${bezierBeginPoint[0]},${bezierBeginPoint[1]} Q${c1[0]},${c1[1]} ${bezierConnectorPoint[0]},${bezierConnectorPoint[1]} Q${c2[0]},${c2[1]} ${bezierEndPoint[0]},${bezierEndPoint[1]} M${abstractConnectorPoint[0]},${abstractConnectorPoint[1]} L${bezierConnectorPoint[0]},${bezierConnectorPoint[1]}`, {
+        stroke: branchColor,
+        strokeWidth: branchWidth
     });
-    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: Object.assign({}, element.data)
-    };
-    delete newElement.data.image;
-    const path = PlaitBoard.findPath(board, element);
-    Transforms.setNode(board, newElement, path);
-};
+    return link;
+}
 
-const MindTransforms = {
-    setLayout,
-    setTopic,
-    setTopicSize,
-    setNodeManualWidth,
-    addEmoji,
-    removeEmoji,
-    replaceEmoji,
-    insertAbstract,
-    setAbstractsByRefs,
-    setAbstractByStandardLayout,
-    removeElements,
-    insertNodes,
-    insertAbstractNodes,
-    setRightNodeCountByRefs,
-    removeImage
-};
+class EmojiDrawer {
+    constructor(board, viewContainerRef) {
+        this.board = board;
+        this.viewContainerRef = viewContainerRef;
+        this.componentRef = null;
+    }
+    draw(emoji, element) {
+        this.destroy();
+        const componentType = this.board.drawEmoji(emoji, element);
+        this.componentRef = this.viewContainerRef.createComponent(componentType);
+        this.componentRef.instance.emojiItem = emoji;
+        this.componentRef.instance.board = this.board;
+        this.componentRef.instance.element = element;
+        this.componentRef.instance.fontSize = getEmojiFontSize(element);
+    }
+    get nativeElement() {
+        if (this.componentRef) {
+            return this.componentRef.instance.nativeElement;
+        }
+        else {
+            return null;
+        }
+    }
+    destroy() {
+        if (this.componentRef) {
+            this.componentRef.destroy();
+            this.componentRef = null;
+        }
+    }
+}
+class NodeEmojisDrawer {
+    constructor(board, viewContainerRef) {
+        this.board = board;
+        this.viewContainerRef = viewContainerRef;
+        this.emojiDrawers = [];
+    }
+    drawEmojis(element) {
+        this.destroy();
+        if (MindElement.hasEmojis(element)) {
+            this.g = createG();
+            this.g.classList.add('emojis');
+            const foreignRectangle = getEmojiForeignRectangle(this.board, element);
+            const foreignObject = createForeignObject(foreignRectangle.x, foreignRectangle.y, foreignRectangle.width, foreignRectangle.height);
+            this.g.append(foreignObject);
+            const container = document.createElement('div');
+            container.classList.add('node-emojis-container');
+            foreignObject.append(container);
+            this.emojiDrawers = element.data.emojis.map(emojiItem => {
+                const drawer = new EmojiDrawer(this.board, this.viewContainerRef);
+                drawer.draw(emojiItem, element);
+                return drawer;
+            });
+            this.emojiDrawers.forEach(drawer => {
+                container.append(drawer.nativeElement);
+            });
+            return this.g;
+        }
+        return undefined;
+    }
+    destroy() {
+        if (this.g) {
+            this.g.remove();
+        }
+        this.emojiDrawers.forEach(drawer => drawer.destroy());
+        this.emojiDrawers = [];
+    }
+}
 
 class BaseDrawer {
     constructor(board) {
@@ -2765,36 +2928,6 @@ class CollapseDrawer extends BaseDrawer {
     }
 }
 
-class MindImageBaseComponent {
-    get nativeElement() {
-        return this.elementRef.nativeElement;
-    }
-    constructor(elementRef, cdr) {
-        this.elementRef = elementRef;
-        this.cdr = cdr;
-        this.isFocus = false;
-    }
-    ngOnInit() { }
-}
-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
-            }] } });
-
 class NodeImageDrawer {
     constructor(board, viewContainerRef) {
         this.board = board;
@@ -2808,9 +2941,9 @@ class NodeImageDrawer {
         }
         this.g = createG();
         const foreignRectangle = getImageForeignRectangle(this.board, element);
-        const foreignObject = createForeignObject(foreignRectangle.x, foreignRectangle.y, foreignRectangle.width, foreignRectangle.height);
-        this.g.append(foreignObject);
-        const componentType = this.board.getPluginOptions(WithMindPluginKey).imageComponentType || MindImageBaseComponent;
+        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.');
         }
@@ -2819,7 +2952,7 @@ class NodeImageDrawer {
         this.componentRef.instance.element = element;
         this.componentRef.instance.imageItem = element.data.image;
         this.componentRef.instance.cdr.markForCheck();
-        foreignObject.append(this.componentRef.instance.nativeElement);
+        this.foreignObject.append(this.componentRef.instance.nativeElement);
         nodeG.appendChild(this.g);
     }
     updateImage(nodeG, previous, current) {
@@ -2834,6 +2967,10 @@ class NodeImageDrawer {
         }
         const currentForeignObject = getImageForeignRectangle(this.board, current);
         updateForeignObject(this.g, currentForeignObject.width, currentForeignObject.height, currentForeignObject.x, currentForeignObject.y);
+        // solve image lose on move node
+        if (this.foreignObject.children.length === 0) {
+            this.foreignObject.append(this.componentRef.instance.nativeElement);
+        }
         (_a = this.componentRef) === null || _a === void 0 ? void 0 : _a.instance.cdr.markForCheck();
     }
     destroy() {
@@ -2871,8 +3008,6 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         this.textManage = new TextManage(this.board, this.viewContainerRef, () => {
             const rect = getTopicRectangleByNode(this.board, this.node);
             return rect;
-        }, (point) => {
-            return isHitMindElement(this.board, point, this.element);
         }, (textManageRef) => {
             const width = textManageRef.width;
             const height = textManageRef.height;
@@ -2997,20 +3132,35 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         this.textManage.draw(this.element.data.topic);
         this.g.append(this.textManage.g);
         if (this.element.manualWidth) {
-            const width = NodeSpace.getNodeResizableWidth(this.board, this.element);
+            const width = NodeSpace.getNodeDynamicWidth(this.board, this.element);
             this.textManage.updateWidth(width);
         }
     }
     updateTopic() {
         this.textManage.updateText(this.element.data.topic);
         this.textManage.updateRectangle();
+        if (this.element.manualWidth) {
+            const width = NodeSpace.getNodeDynamicWidth(this.board, this.element);
+            this.textManage.updateWidth(width);
+        }
     }
     editTopic() {
         this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: true });
+        // update text max-width when image width greater than topic default max width to cover node topic default max width style
+        const defaultMaxWidth = TOPIC_DEFAULT_MAX_WORD_COUNT * (PlaitMind.isMind(this.element) ? ROOT_TOPIC_FONT_SIZE : TOPIC_FONT_SIZE);
+        let hasMaxWidth = false;
+        if (!this.element.manualWidth && MindElement.hasImage(this.element) && this.element.data.image.width > defaultMaxWidth) {
+            const width = NodeSpace.getNodeDynamicWidth(this.board, this.element);
+            this.textManage.updateWidth(width);
+            hasMaxWidth = true;
+        }
         this.textManage.edit((origin) => {
             if (origin === ExitOrigin.default) {
                 this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: false });
             }
+            if (hasMaxWidth) {
+                this.textManage.updateWidth(0);
+            }
         });
     }
     ngOnDestroy() {
@@ -3052,73 +3202,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; } });
 
-const getLayoutOptions = (board) => {
-    function getMainAxle(element, parent) {
-        const strokeWidth = element.strokeWidth || STROKE_WIDTH;
-        if (element.isRoot) {
-            return BASE * 12;
-        }
-        if (parent && parent.isRoot()) {
-            return BASE * 3 + strokeWidth / 2;
-        }
-        return BASE * 3 + strokeWidth / 2;
-    }
-    function getSecondAxle(element, parent) {
-        const strokeWidth = element.strokeWidth || STROKE_WIDTH;
-        if (element.isRoot) {
-            return BASE * 10 + strokeWidth / 2;
-        }
-        return BASE * 6 + strokeWidth / 2;
-    }
-    return {
-        getHeight(element) {
-            return NodeSpace.getNodeHeight(board, element);
-        },
-        getWidth(element) {
-            return NodeSpace.getNodeWidth(board, element);
-        },
-        getHorizontalGap(element, parent) {
-            const _layout = (parent && parent.layout) || getRootLayout(element);
-            const isHorizontal = isHorizontalLayout(_layout);
-            const strokeWidth = element.strokeWidth || STROKE_WIDTH;
-            if (isIndentedLayout(_layout)) {
-                return BASE * 4 + strokeWidth;
-            }
-            if (!isHorizontal) {
-                return getMainAxle(element, parent);
-            }
-            else {
-                return getSecondAxle(element, parent);
-            }
-        },
-        getVerticalGap(element, parent) {
-            const _layout = (parent && parent.layout) || getRootLayout(element);
-            if (isIndentedLayout(_layout)) {
-                return BASE;
-            }
-            const isHorizontal = isHorizontalLayout(_layout);
-            if (isHorizontal) {
-                return getMainAxle(element, parent);
-            }
-            else {
-                return getSecondAxle(element, parent);
-            }
-        },
-        getVerticalConnectingPosition(element, parent) {
-            if (element.shape === MindElementShape.underline && parent && isHorizontalLogicLayout(parent.layout)) {
-                return ConnectingPosition.bottom;
-            }
-            return undefined;
-        },
-        getExtendHeight(node) {
-            return BASE * 6;
-        },
-        getIndentedCrossLevelGap() {
-            return BASE * 2;
-        }
-    };
-};
-
 class PlaitMindComponent extends MindNodeComponent {
     ngOnInit() {
         this.updateMindLayout();
@@ -3845,7 +3928,7 @@ const withNodeHoverDetect = (board) => {
 };
 
 const withNodeImage = (board) => {
-    const { keydown, mousedown, globalMouseup } = board;
+    const { keydown, mousedown, globalMouseup, insertFragment } = board;
     board.mousedown = (event) => {
         const selectedImageElement = getSelectedImageElement(board);
         if (PlaitBoard.isReadonly(board) || !isMainPointer(event) || !PlaitBoard.isPointer(board, PlaitPointerType.selection)) {
@@ -3871,7 +3954,6 @@ const withNodeImage = (board) => {
         if (hitImage) {
             temporaryDisableSelection(board);
             setImageFocus(board, hitElements[0], true);
-            clearSelectedElement(board);
         }
         mousedown(event);
     };
@@ -3895,6 +3977,21 @@ const withNodeImage = (board) => {
         }
         globalMouseup(event);
     };
+    board.insertFragment = (data, targetPoint) => {
+        const selectedElements = getSelectedElements(board);
+        const isSelectedImage = !!getSelectedImageElement(board);
+        const isSingleSelection = selectedElements.length === 1 && MindElement.isMindElement(board, selectedElements[0]);
+        if ((data === null || data === void 0 ? void 0 : data.files.length) && (isSingleSelection || isSelectedImage)) {
+            const selectedElement = (selectedElements[0] || getSelectedImageElement(board));
+            const acceptImageArray = acceptImageTypes.map(type => 'image/' + type);
+            if (acceptImageArray.includes(data === null || data === void 0 ? void 0 : data.files[0].type)) {
+                const imageFile = data.files[0];
+                buildImage(board, selectedElement, imageFile);
+                return;
+            }
+        }
+        insertFragment(data, targetPoint);
+    };
     return board;
 };
 
@@ -3924,7 +4021,7 @@ const withNodeResize = (board) => {
                 addResizing(board, targetElement);
                 targetElementRef = {
                     minWidth: NodeSpace.getNodeResizableMinWidth(board, targetElement),
-                    currentWidth: NodeSpace.getNodeResizableWidth(board, targetElement),
+                    currentWidth: NodeSpace.getNodeDynamicWidth(board, targetElement),
                     path: PlaitBoard.findPath(board, targetElement),
                     textManage: PlaitElement.getComponent(targetElement).textManage
                 };
@@ -3940,7 +4037,7 @@ const withNodeResize = (board) => {
                 const offsetX = endPoint[0] - startPoint[0];
                 const zoom = board.viewport.zoom;
                 let resizedWidth = targetElementRef.currentWidth + offsetX / zoom;
-                if (resizedWidth < targetElementRef.minWidth) {
+                if (resizedWidth <= targetElementRef.minWidth) {
                     resizedWidth = targetElementRef.minWidth;
                 }
                 const newTarget = PlaitNode.get(board, targetElementRef.path);
@@ -4167,6 +4264,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
                 args: ['mousedown']
             }] } });
 
+class MindImageBaseComponent {
+    set imageItem(value) {
+        this.afterImageItemChange(this._imageItem, value);
+        this._imageItem = value;
+    }
+    get imageItem() {
+        return this._imageItem;
+    }
+    get nativeElement() {
+        return this.elementRef.nativeElement;
+    }
+    constructor(elementRef, cdr) {
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.isFocus = false;
+    }
+}
+MindImageBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindImageBaseComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+MindImageBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: MindImageBaseComponent, inputs: { imageItem: "imageItem", board: "board", element: "element", isFocus: "isFocus" }, host: { classAttribute: "mind-node-image" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindImageBaseComponent, decorators: [{
+            type: Directive,
+            args: [{
+                    host: {
+                        class: 'mind-node-image'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { imageItem: [{
+                type: Input
+            }], board: [{
+                type: Input
+            }], element: [{
+                type: Input
+            }], isFocus: [{
+                type: Input
+            }] } });
+
 /*
  * Public API Surface of mind
  */
@@ -4175,5 +4308,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, 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, 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, getEmojiForeignRectangle, getEmojiRectangle, getFillByElement, getFirstLevelElement, getHitAbstractHandle, getImageForeignRectangle, getInCorrectLayoutDirection, getLayoutDirection$1 as getLayoutDirection, getLayoutReverseDirection, getLocationScope, getMindThemeColor, getNextBranchColor, getOverallAbstracts, getPathByDropTarget, getRectangleByElement, getRectangleByNode, getRectangleByResizingLocation, getRelativeStartEndByAbstractRef, getRootLayout, getSelectedImageElement, 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, 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, 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, getImageForeignRectangle, getInCorrectLayoutDirection, getLayoutDirection$1 as getLayoutDirection, getLayoutOptions, getLayoutReverseDirection, getLocationScope, getMindThemeColor, getNewNodeHeight, getNextBranchColor, getNodeDefaultFontSize, getOverallAbstracts, getPathByDropTarget, getRectangleByElement, getRectangleByNode, getRectangleByResizingLocation, getRelativeStartEndByAbstractRef, getRootLayout, getSelectedImageElement, 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 };
 //# sourceMappingURL=plait-mind.mjs.map