@plait/mind 0.23.0 → 0.24.0

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 };
 }
@@ -663,35 +675,14 @@ const adjustNodeToRoot = (board, node) => {
     newElement === null || newElement === void 0 ? true : delete newElement.isCollapsed;
     const { width, height } = getTextSize(board, newElement.data.topic, TOPIC_DEFAULT_MAX_WORD_COUNT, {
         fontSize: ROOT_TOPIC_FONT_SIZE,
-        fontFamily: BRANCH_FONT_FAMILY
+        fontFamily: BRANCH_FONT_FAMILY,
+        width: node.manualWidth ? node.manualWidth : undefined
     });
     newElement.width = Math.max(width, getNodeDefaultFontSize(true));
     newElement.height = height;
     return Object.assign(Object.assign({}, newElement), { layout: (_a = newElement.layout) !== null && _a !== void 0 ? _a : MindLayoutType.right, isRoot: true, type: 'mindmap' });
 };
 
-const 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: {
@@ -710,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) => {
@@ -876,9 +953,249 @@ const deleteElementHandleAbstract = (board, deletableElements, effectedAbstracts
     });
     return effectedAbstracts;
 };
-const isChildOfAbstract = (board, element) => {
-    const ancestors = MindElement.getAncestors(board, element);
-    return !!ancestors.find((value) => AbstractNode.isAbstract(value));
+const isChildOfAbstract = (board, element) => {
+    const ancestors = MindElement.getAncestors(board, element);
+    return !!ancestors.find((value) => AbstractNode.isAbstract(value));
+};
+
+const normalizeWidthAndHeight = (board, element, width, height) => {
+    const minWidth = NodeSpace.getNodeTopicMinWidth(board, element, element.isRoot);
+    const newWidth = width < minWidth * board.viewport.zoom ? minWidth : width / board.viewport.zoom;
+    const newHeight = height / board.viewport.zoom;
+    return { width: newWidth, height: newHeight };
+};
+const setTopic = (board, element, topic, width, height) => {
+    const newElement = Object.assign({ data: Object.assign(Object.assign({}, element.data), { topic }) }, normalizeWidthAndHeight(board, element, width, height));
+    const path = PlaitBoard.findPath(board, element);
+    Transforms.setNode(board, newElement, path);
+};
+const setNodeManualWidth = (board, element, width, height) => {
+    const path = PlaitBoard.findPath(board, element);
+    const { width: normalizedWidth, height: normalizedHeight } = normalizeWidthAndHeight(board, element, width, height);
+    const newElement = { manualWidth: normalizedWidth, height: normalizedHeight };
+    Transforms.setNode(board, newElement, path);
+};
+const setTopicSize = (board, element, width, height) => {
+    const newElement = Object.assign({}, normalizeWidthAndHeight(board, element, width, height));
+    let isEqualWidth = Math.ceil(element.width) === Math.ceil(newElement.width);
+    let isEqualHeight = Math.ceil(element.height) === Math.ceil(newElement.height);
+    if (element.manualWidth) {
+        isEqualWidth = true;
+    }
+    if (!isEqualWidth || !isEqualHeight) {
+        const path = PlaitBoard.findPath(board, element);
+        Transforms.setNode(board, newElement, path);
+    }
+};
+const removeElements = (board, elements) => {
+    const deletableElements = getFirstLevelElement(elements);
+    deletableElements
+        .map(element => {
+        const path = PlaitBoard.findPath(board, element);
+        const ref = board.pathRef(path);
+        return () => {
+            Transforms.removeNode(board, ref.current);
+            ref.unref();
+        };
+    })
+        .forEach(action => {
+        action();
+    });
+};
+const insertNodes = (board, elements, path) => {
+    const pathRef = board.pathRef(path);
+    elements.forEach(element => {
+        if (pathRef.current) {
+            Transforms.insertNode(board, element, pathRef.current);
+        }
+    });
+    pathRef.unref();
+};
+const insertAbstractNodes = (board, validAbstractRefs, elements, path) => {
+    var _a;
+    const parent = PlaitNode.get(board, Path$1.parent(path));
+    const abstractPath = [...Path$1.parent(path), (_a = parent.children) === null || _a === void 0 ? void 0 : _a.length];
+    const abstracts = validAbstractRefs.map(refs => {
+        const { start, end } = getRelativeStartEndByAbstractRef(refs, elements);
+        return Object.assign(Object.assign({}, refs.abstract), { start: start + path[path.length - 1], end: end + path[path.length - 1] });
+    });
+    insertNodes(board, abstracts, abstractPath);
+};
+const setRightNodeCountByRefs = (board, refs) => {
+    refs.forEach(ref => {
+        Transforms.setNode(board, { rightNodeCount: ref.rightNodeCount }, ref.path);
+    });
+};
+
+const addEmoji = (board, element, emojiItem) => {
+    const emojis = element.data.emojis || [];
+    const newEmojis = [...emojis];
+    newEmojis.push(emojiItem);
+    const newElement = {
+        data: Object.assign(Object.assign({}, element.data), { emojis: newEmojis })
+    };
+    const path = PlaitBoard.findPath(board, element);
+    Transforms.setNode(board, newElement, path);
+};
+const removeEmoji = (board, element, emojiItem) => {
+    const emojis = element.data.emojis.filter(value => value !== emojiItem);
+    const newElement = {
+        data: { topic: element.data.topic }
+    };
+    if (MindElement.hasImage(element)) {
+        newElement.data.image = element.data.image;
+    }
+    if (emojis.length > 0) {
+        newElement.data.emojis = emojis;
+    }
+    const path = PlaitBoard.findPath(board, element);
+    Transforms.setNode(board, newElement, path);
+};
+const replaceEmoji = (board, element, oldEmoji, newEmoji) => {
+    const newElement = {
+        data: Object.assign({}, element.data)
+    };
+    const newEmojis = element.data.emojis.map(value => {
+        if (value === oldEmoji) {
+            return newEmoji;
+        }
+        return value;
+    });
+    newElement.data.emojis = newEmojis;
+    const path = PlaitBoard.findPath(board, element);
+    Transforms.setNode(board, newElement, path);
+};
+
+/**
+ * 1. return new node height if height changed
+ * 2. new height is effected by zoom
+ */
+const getNewNodeHeight = (board, element, newNodeDynamicWidth) => {
+    const textManage = PlaitElement.getComponent(element).textManage;
+    const { height } = textManage.getSize();
+    textManage.updateWidth(newNodeDynamicWidth);
+    const { height: newHeight } = textManage.getSize();
+    if (!element.manualWidth) {
+        textManage.updateWidth(0);
+    }
+    if (height !== newHeight) {
+        return newHeight;
+    }
+    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];
 };
 
 /**
@@ -1809,6 +2126,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
@@ -2164,247 +2548,25 @@ class NodeEmojisDrawer {
             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);
+                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;
         }
-    });
-    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: { topic: element.data.topic, 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 (emojis.length > 0) {
-        newElement.data.emojis = emojis;
+        return undefined;
     }
-    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;
+    destroy() {
+        if (this.g) {
+            this.g.remove();
         }
-        return value;
-    });
-    newElement.data.emojis = newEmojis;
-    const path = PlaitBoard.findPath(board, element);
-    Transforms.setNode(board, newElement, path);
-};
-
-const removeImage = (board, element) => {
-    const newElement = {
-        data: Object.assign({}, element.data)
-    };
-    delete newElement.data.image;
-    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
-};
+        this.emojiDrawers.forEach(drawer => drawer.destroy());
+        this.emojiDrawers = [];
+    }
+}
 
 class BaseDrawer {
     constructor(board) {
@@ -2763,36 +2925,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;
@@ -2806,9 +2938,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.');
         }
@@ -2817,7 +2949,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) {
@@ -2832,6 +2964,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() {
@@ -2891,7 +3027,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         this.parentG = PlaitElement.getComponent(MindElement.getRoot(this.board, this.element)).rootG;
         this.drawShape();
         this.drawLink();
-        this.drawText();
+        this.drawTopic();
         this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: this.textManage.isEditing });
         this.drawEmojis();
         this.drawExtend();
@@ -2900,18 +3036,6 @@ class MindNodeComponent extends PlaitPluginElementComponent {
             this.g.classList.add('branch');
         }
     }
-    editTopic() {
-        this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: true });
-        if (this.element.manualWidth) {
-            const width = NodeSpace.getNodeResizableWidth(this.board, this.element);
-            this.textManage.updateWidth(width);
-        }
-        this.textManage.edit((origin) => {
-            if (origin === ExitOrigin.default) {
-                this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: false });
-            }
-        });
-    }
     onContextChanged(value, previous) {
         const newNode = MindElement.getNode(value.element);
         const isEqualNode = RectangleClient.isEqual(this.node, newNode);
@@ -2924,8 +3048,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
             this.drawEmojis();
             this.drawExtend();
             this.imageDrawer.updateImage(this.g, previous.element, value.element);
-            this.textManage.updateText(this.element.data.topic);
-            this.textManage.updateRectangle();
+            this.updateTopic();
         }
         else {
             const hasSameSelected = value.selected === previous.selected;
@@ -3004,9 +3127,29 @@ class MindNodeComponent extends PlaitPluginElementComponent {
             this.extendG.remove();
         }
     }
-    drawText() {
+    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 });
+        this.textManage.edit((origin) => {
+            if (origin === ExitOrigin.default) {
+                this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: false });
+            }
+        });
     }
     ngOnDestroy() {
         super.ngOnDestroy();
@@ -3047,73 +3190,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();
@@ -3410,7 +3486,7 @@ const insertClipboardData = (board, elements, targetPoint) => {
             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);
+                const { width, height } = getTextSize(board, newElement.data.topic, TOPIC_DEFAULT_MAX_WORD_COUNT, Object.assign(Object.assign({}, styles), { width: newElement.manualWidth ? newElement.manualWidth : undefined }));
                 newElement.width = Math.max(width, getNodeDefaultFontSize());
                 newElement.height = height;
             }
@@ -3840,7 +3916,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)) {
@@ -3866,7 +3942,6 @@ const withNodeImage = (board) => {
         if (hitImage) {
             temporaryDisableSelection(board);
             setImageFocus(board, hitElements[0], true);
-            clearSelectedElement(board);
         }
         mousedown(event);
     };
@@ -3874,7 +3949,6 @@ const withNodeImage = (board) => {
         const selectedImageElement = getSelectedImageElement(board);
         if (!PlaitBoard.isReadonly(board) && selectedImageElement && (hotkeys.isDeleteBackward(event) || hotkeys.isDeleteForward(event))) {
             addSelectedElement(board, selectedImageElement);
-            setImageFocus(board, selectedImageElement, false);
             MindTransforms.removeImage(board, selectedImageElement);
             return;
         }
@@ -3891,6 +3965,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;
 };
 
@@ -3920,7 +4009,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
                 };
@@ -3936,7 +4025,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);
@@ -4163,6 +4252,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
  */
@@ -4171,5 +4296,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