@plait/mind 0.27.0-next.9 → 0.29.0

package/fesm2022/plait-mind.mjs

@@ -1,16 +1,14 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, NgModule, NgZone, Directive, Input, HostListener } from '@angular/core';
-import * as i2 from '@plait/core';
-import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, PlaitElement, PlaitNode, Path, isNullOrUndefined, PlaitBoard, distanceBetweenPointAndRectangle, RectangleClient, PlaitPluginKey, getSelectedElements, idCreator, Transforms, clearSelectedElement, addSelectedElement, PlaitContextService, depthFirstRecursion, getIsRecursionFunc, drawRoundRectangle, drawLinearPath, drawBezierPath, createG, updateForeignObject, getRectangleByElements, NODE_TO_PARENT, createForeignObject, setStrokeLinecap, ACTIVE_STROKE_WIDTH, createText, PlaitPointerType, NODE_TO_INDEX, PlaitModule, isMainPointer, transformPoint, toPoint, getHitElements, distanceBetweenPointAndPoint, CoreTransforms, BOARD_TO_HOST, BoardTransforms, throttleRAF, removeSelectedElement, PlaitHistoryBoard, hotkeys, setClipboardDataByMedia, getClipboardDataByMedia, ResizeCursorClass, preventTouchMove, PRESS_AND_MOVE_BUFFER, MERGING, setClipboardData, setClipboardDataByText, getDataFromClipboard } from '@plait/core';
-import { MindLayoutType, AbstractNode, isIndentedLayout, isHorizontalLayout, isHorizontalLogicLayout, ConnectingPosition, isStandardLayout, isVerticalLogicLayout, getNonAbstractChildren, isLeftLayout, isRightLayout, isTopLayout, isBottomLayout, getCorrectStartEnd, getAbstractLayout, GlobalLayout } from '@plait/layouts';
-import { PlaitMarkEditor, MarkTypes, DEFAULT_FONT_SIZE, TEXT_DEFAULT_HEIGHT, buildText, getTextSize, TextManage, ExitOrigin, TextModule, getTextFromClipboard } from '@plait/text';
+import { Component, ChangeDetectionStrategy, NgZone, Directive, Input, HostListener } from '@angular/core';
+import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, PlaitElement, PlaitNode, Path, isNullOrUndefined, PlaitBoard, distanceBetweenPointAndRectangle, RectangleClient, PlaitPluginKey, getSelectedElements, idCreator, Transforms, clearSelectedElement, addSelectedElement, depthFirstRecursion, getIsRecursionFunc, drawRoundRectangle, drawLinearPath, drawBezierPath, createG, updateForeignObject, getRectangleByElements, NODE_TO_PARENT, createForeignObject, setStrokeLinecap, ACTIVE_STROKE_WIDTH, createText, PlaitPointerType, NODE_TO_INDEX, PlaitChildrenElementComponent, isMainPointer, transformPoint, toPoint, getHitElements, distanceBetweenPointAndPoint, CoreTransforms, BOARD_TO_HOST, BoardTransforms, throttleRAF, removeSelectedElement, PlaitHistoryBoard, hotkeys, setClipboardDataByMedia, getClipboardDataByMedia, ResizeCursorClass, preventTouchMove, PRESS_AND_MOVE_BUFFER, MERGING, setClipboardData, setClipboardDataByText, getDataFromClipboard } from '@plait/core';
+import { MindLayoutType, AbstractNode, isIndentedLayout, isHorizontalLayout, isHorizontalLogicLayout, ConnectingPosition, getNonAbstractChildren, isStandardLayout, isLeftLayout, isRightLayout, isVerticalLogicLayout, isTopLayout, isBottomLayout, getCorrectStartEnd, getAbstractLayout, GlobalLayout } from '@plait/layouts';
+import { PlaitMarkEditor, MarkTypes, DEFAULT_FONT_SIZE, TEXT_DEFAULT_HEIGHT, buildText, getTextSize, TextManage, ExitOrigin, getTextFromClipboard } from '@plait/text';
 import { fromEvent, Subject } from 'rxjs';
-import { RESIZE_HANDLE_DIAMETER, getRectangleResizeHandleRefs, Generator, CommonPluginElement, WithTextPluginKey, isDrawingMode, isDndMode, setCreationMode, BoardCreationMode, isExpandHotkey, isTabHotkey, isEnterHotkey, isVirtualKey, isDelete, isSpaceHotkey, MediaKeys, ResizeHandle, withResize, ActiveGenerator } from '@plait/common';
+import { RESIZE_HANDLE_DIAMETER, getRectangleResizeHandleRefs, Generator, CommonPluginElement, ImageGenerator, WithTextPluginKey, isDrawingMode, isDndMode, setCreationMode, BoardCreationMode, isExpandHotkey, isTabHotkey, isEnterHotkey, isVirtualKey, isDelete, isSpaceHotkey, MediaKeys, acceptImageTypes, buildImage, ResizeHandle, withResize } from '@plait/common';
 import { Node as Node$1, Path as Path$1 } from 'slate';
 import { pointsOnBezierCurves } from 'points-on-curve';
 import { take, filter } from 'rxjs/operators';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { NgIf } from '@angular/common';
 
 const ELEMENT_TO_NODE = new WeakMap();
 
@@ -191,6 +189,7 @@ const EXTEND_DIAMETER = 16;
 const QUICK_INSERT_CIRCLE_OFFSET = 9;
 const QUICK_INSERT_CIRCLE_COLOR = '#6698FF';
 const QUICK_INSERT_INNER_CROSS_COLOR = 'white';
+const DEFAULT_MIND_IMAGE_WIDTH = 240;
 
 function getEmojisWidthHeight(board, element) {
     const options = board.getPluginOptions(WithMindPluginKey);
@@ -219,7 +218,7 @@ const TOPIC_DEFAULT_MAX_WORD_COUNT = 34;
 const DEFAULT_FONT_FAMILY = 'PingFangSC-Regular, "PingFang SC"';
 const BRANCH_FONT_FAMILY = 'PingFangSC-Medium, "PingFang SC"';
 const NodeTopicThreshold = {
-    defaultTextMaxWidth: 34 * 14,
+    defaultTextMaxWidth: 34 * 14
 };
 
 const getAvailableProperty = (board, element, propertyKey) => {
@@ -408,7 +407,7 @@ const deleteElementHandleAbstract = (board, deletableElements, effectedAbstracts
 };
 const isChildOfAbstract = (board, element) => {
     const ancestors = MindElement.getAncestors(board, element);
-    return !!ancestors.find((value) => AbstractNode.isAbstract(value));
+    return !!ancestors.find(value => AbstractNode.isAbstract(value));
 };
 
 /**
@@ -1096,193 +1095,26 @@ const adjustNodeToRoot = (board, node) => {
     };
 };
 
-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 BOARD_TO_SELECTED_IMAGE_ELEMENT = new WeakMap();
+const getSelectedImageElement = (board) => {
+    return BOARD_TO_SELECTED_IMAGE_ELEMENT.get(board);
 };
-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 addSelectedImageElement = (board, element) => {
+    BOARD_TO_SELECTED_IMAGE_ELEMENT.set(board, element);
 };
-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 removeSelectedImageElement = (board) => {
+    BOARD_TO_SELECTED_IMAGE_ELEMENT.delete(board);
 };
-const setAbstractByElements = (board, groupParent, group) => {
-    const indexArray = group.map(child => groupParent.children.indexOf(child)).sort((a, b) => a - b);
-    const rightNodeCount = groupParent?.rightNodeCount;
-    const start = indexArray[0], end = indexArray[indexArray.length - 1];
-    if (isStandardLayout(MindQueries.getLayoutByElement(groupParent)) &&
-        rightNodeCount &&
-        start < rightNodeCount &&
-        end >= rightNodeCount) {
-        const childrenLength = groupParent.children.length;
-        const path = [...PlaitBoard.findPath(board, groupParent), childrenLength];
-        const leftChildren = indexArray.filter(index => index >= rightNodeCount);
-        const rightChildren = indexArray.filter(index => index < rightNodeCount);
-        insertAbstractNode(board, path, rightChildren[0], rightChildren[rightChildren.length - 1]);
-        insertAbstractNode(board, Path.next(path), leftChildren[0], leftChildren[leftChildren.length - 1]);
+const setImageFocus = (board, element, isFocus) => {
+    if (isFocus) {
+        addSelectedImageElement(board, element);
     }
     else {
-        const path = [...PlaitBoard.findPath(board, groupParent), groupParent.children.length];
-        insertAbstractNode(board, path, start, end);
-    }
-};
-const insertAbstractNode = (board, path, start, end) => {
-    const mindElement = createMindElement('概要', 28, 20, {
-        strokeWidth: DefaultAbstractNodeStyle.branch.width,
-        branchWidth: DefaultAbstractNodeStyle.branch.width
-    });
-    mindElement.start = start;
-    mindElement.end = end;
-    Transforms.insertNode(board, mindElement, path);
-    clearSelectedElement(board);
-    addSelectedElement(board, mindElement);
-};
-
-const setLayout = (board, layout, path) => {
-    correctLogicLayoutNode(board, layout, path);
-    const element = PlaitNode.get(board, path);
-    if (PlaitMind.isMind(element) && isStandardLayout(layout)) {
-        MindTransforms.setAbstractByStandardLayout(board, element);
-    }
-    Transforms.setNode(board, { layout }, path);
-};
-const correctLogicLayoutNode = (board, layout, path) => {
-    const node = PlaitNode.get(board, path);
-    if (node && layout) {
-        node.children?.forEach((value, index) => {
-            if (value.layout) {
-                if ((isHorizontalLogicLayout(layout) && isVerticalLogicLayout(value.layout)) ||
-                    (isVerticalLogicLayout(layout) && isHorizontalLogicLayout(value.layout))) {
-                    Transforms.setNode(board, { layout: null }, [...path, index]);
-                }
-                if (value.children?.length) {
-                    correctLogicLayoutNode(board, layout, [...path, index]);
-                }
-            }
-        });
-    }
-};
-
-const normalizeWidthAndHeight = (board, element, width, height) => {
-    const minWidth = NodeSpace.getNodeTopicMinWidth(board, element, element.isRoot);
-    const newWidth = width < minWidth * board.viewport.zoom ? minWidth : width / board.viewport.zoom;
-    const newHeight = height / board.viewport.zoom;
-    return { width: Math.ceil(newWidth), height: newHeight };
-};
-const setTopic = (board, element, topic, width, height) => {
-    const newElement = {
-        data: { ...element.data, topic },
-        ...normalizeWidthAndHeight(board, element, width, height)
-    };
-    const path = PlaitBoard.findPath(board, element);
-    Transforms.setNode(board, newElement, path);
-};
-const setNodeManualWidth = (board, element, width, height) => {
-    const path = PlaitBoard.findPath(board, element);
-    const { width: normalizedWidth, height: normalizedHeight } = normalizeWidthAndHeight(board, element, width, height);
-    const newElement = { manualWidth: normalizedWidth, height: normalizedHeight };
-    Transforms.setNode(board, newElement, path);
-};
-const setTopicSize = (board, element, width, height) => {
-    const newElement = {
-        ...normalizeWidthAndHeight(board, element, width, height)
-    };
-    let isEqualWidth = Math.ceil(element.width) === Math.ceil(newElement.width);
-    let isEqualHeight = Math.ceil(element.height) === Math.ceil(newElement.height);
-    if (element.manualWidth) {
-        isEqualWidth = true;
-    }
-    if (!isEqualWidth || !isEqualHeight) {
-        const path = PlaitBoard.findPath(board, element);
-        Transforms.setNode(board, newElement, path);
-    }
-};
-const insertNodes = (board, elements, path) => {
-    const pathRef = board.pathRef(path);
-    elements.forEach(element => {
-        if (pathRef.current) {
-            Transforms.insertNode(board, element, pathRef.current);
-        }
-    });
-    pathRef.unref();
-};
-const insertAbstractNodes = (board, validAbstractRefs, elements, path) => {
-    const parent = PlaitNode.get(board, Path$1.parent(path));
-    const abstractPath = [...Path$1.parent(path), parent.children?.length];
-    const abstracts = validAbstractRefs.map(refs => {
-        const { start, end } = getRelativeStartEndByAbstractRef(refs, elements);
-        return {
-            ...refs.abstract,
-            start: start + path[path.length - 1],
-            end: end + path[path.length - 1]
-        };
-    });
-    insertNodes(board, abstracts, abstractPath);
-};
-const setRightNodeCountByRefs = (board, refs) => {
-    refs.forEach(ref => {
-        Transforms.setNode(board, { rightNodeCount: ref.rightNodeCount }, ref.path);
-    });
-};
-
-const addEmoji = (board, element, emojiItem) => {
-    const emojis = element.data.emojis || [];
-    const newEmojis = [...emojis];
-    newEmojis.push(emojiItem);
-    const newElement = {
-        data: { ...element.data, emojis: newEmojis }
-    };
-    const path = PlaitBoard.findPath(board, element);
-    Transforms.setNode(board, newElement, path);
-};
-const removeEmoji = (board, element, emojiItem) => {
-    const emojis = element.data.emojis.filter(value => value !== emojiItem);
-    const newElement = {
-        data: { topic: element.data.topic }
-    };
-    if (MindElement.hasImage(element)) {
-        newElement.data.image = element.data.image;
-    }
-    if (emojis.length > 0) {
-        newElement.data.emojis = emojis;
+        removeSelectedImageElement(board);
     }
-    const path = PlaitBoard.findPath(board, element);
-    Transforms.setNode(board, newElement, path);
-};
-const replaceEmoji = (board, element, oldEmoji, newEmoji) => {
-    const newElement = {
-        data: { ...element.data }
-    };
-    const newEmojis = element.data.emojis.map(value => {
-        if (value === oldEmoji) {
-            return newEmoji;
-        }
-        return value;
-    });
-    newElement.data.emojis = newEmojis;
-    const path = PlaitBoard.findPath(board, element);
-    Transforms.setNode(board, newElement, path);
+    const elementComponent = PlaitElement.getComponent(element);
+    elementComponent.imageGenerator.componentRef.instance.isFocus = isFocus;
+    elementComponent.imageGenerator.componentRef.instance.cdr.markForCheck();
 };
 
 /**
@@ -1303,115 +1135,6 @@ const getNewNodeHeight = (board, element, newNodeDynamicWidth) => {
     return undefined;
 };
 
-const removeImage = (board, element) => {
-    setImageFocus(board, element, false);
-    const newElement = {
-        data: { ...element.data }
-    };
-    delete newElement.data.image;
-    const path = PlaitBoard.findPath(board, element);
-    const newDynamicWidth = NodeSpace.getNodeNewDynamicWidth(board, element, 0);
-    const newHeight = getNewNodeHeight(board, element, newDynamicWidth);
-    if (newHeight) {
-        newElement.height = newHeight / board.viewport.zoom;
-    }
-    Transforms.setNode(board, newElement, path);
-};
-const setImage = (board, element, imageItem) => {
-    const newElement = {
-        data: { ...element.data, image: imageItem }
-    };
-    const newDynamicWidth = NodeSpace.getNodeNewDynamicWidth(board, element, imageItem.width);
-    const newHeight = getNewNodeHeight(board, element, newDynamicWidth);
-    if (newHeight) {
-        newElement.height = newHeight / board.viewport.zoom;
-    }
-    const path = PlaitBoard.findPath(board, element);
-    Transforms.setNode(board, newElement, path);
-};
-
-const MindTransforms = {
-    setLayout,
-    setTopic,
-    setTopicSize,
-    setNodeManualWidth,
-    addEmoji,
-    removeEmoji,
-    replaceEmoji,
-    insertAbstract,
-    setAbstractsByRefs,
-    setAbstractByStandardLayout,
-    insertNodes,
-    insertAbstractNodes,
-    setRightNodeCountByRefs,
-    removeImage,
-    setImage
-};
-
-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 = async (board, element, imageFile) => {
-    let width = 0, height = 0;
-    await getImageSize(imageFile).then((value) => {
-        width = value.width;
-        height = value.height;
-    });
-    let imageItem = null;
-    const url = URL.createObjectURL(imageFile);
-    const context = PlaitBoard.getComponent(board).viewContainerRef.injector.get(PlaitContextService);
-    context.setUploadingFile({ url, file: imageFile });
-    imageItem = {
-        url,
-        width,
-        height
-    };
-    MindTransforms.setImage(board, element, imageItem);
-};
-function getImageSize(file, defaultImageWidth = DEFAULT_IMAGE_WIDTH) {
-    return new Promise((resolve, reject) => {
-        const image = new Image();
-        image.src = URL.createObjectURL(file);
-        image.onload = function () {
-            const width = defaultImageWidth;
-            const height = (defaultImageWidth * image.naturalHeight) / image.naturalWidth;
-            resolve(image.naturalWidth > defaultImageWidth ? { width, height } : { width: image.naturalWidth, height: image.naturalHeight });
-        };
-    });
-}
-
 const IS_DRAGGING = new WeakMap();
 const addActiveOnDragOrigin = (activeElement) => {
     const activeComponent = PlaitElement.getComponent(activeElement);
@@ -1928,7 +1651,7 @@ const drawFakeDragNode = (board, element, offsetX, offsetY) => {
         dragFakeNodeG?.append(fakeEmojisG);
     }
     if (MindElement.hasImage(element)) {
-        const fakeImageG = activeComponent.imageDrawer.g.cloneNode(true);
+        const fakeImageG = activeComponent.imageGenerator.g.cloneNode(true);
         const foreignRectangle = getImageForeignRectangle(board, element);
         updateForeignObject(fakeImageG, foreignRectangle.width, foreignRectangle.height, foreignRectangle.x + offsetX, foreignRectangle.y + offsetY);
         dragFakeNodeG?.append(fakeImageG);
@@ -2565,58 +2288,292 @@ class EmojiDrawer {
         this.componentRef.instance.element = element;
         this.componentRef.instance.fontSize = getEmojiFontSize(element);
     }
-    get nativeElement() {
-        if (this.componentRef) {
-            return this.componentRef.instance.nativeElement;
-        }
-        else {
-            return null;
-        }
+    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?.rightNodeCount;
+    const start = indexArray[0], end = indexArray[indexArray.length - 1];
+    if (isStandardLayout(MindQueries.getLayoutByElement(groupParent)) &&
+        rightNodeCount &&
+        start < rightNodeCount &&
+        end >= rightNodeCount) {
+        const childrenLength = groupParent.children.length;
+        const path = [...PlaitBoard.findPath(board, groupParent), childrenLength];
+        const leftChildren = indexArray.filter(index => index >= rightNodeCount);
+        const rightChildren = indexArray.filter(index => index < rightNodeCount);
+        insertAbstractNode(board, path, rightChildren[0], rightChildren[rightChildren.length - 1]);
+        insertAbstractNode(board, Path.next(path), leftChildren[0], leftChildren[leftChildren.length - 1]);
+    }
+    else {
+        const path = [...PlaitBoard.findPath(board, groupParent), groupParent.children.length];
+        insertAbstractNode(board, path, start, end);
+    }
+};
+const insertAbstractNode = (board, path, start, end) => {
+    const mindElement = createMindElement('概要', 28, 20, {
+        strokeWidth: DefaultAbstractNodeStyle.branch.width,
+        branchWidth: DefaultAbstractNodeStyle.branch.width
+    });
+    mindElement.start = start;
+    mindElement.end = end;
+    Transforms.insertNode(board, mindElement, path);
+    clearSelectedElement(board);
+    addSelectedElement(board, mindElement);
+};
+
+const setLayout = (board, layout, path) => {
+    correctLogicLayoutNode(board, layout, path);
+    const element = PlaitNode.get(board, path);
+    if (PlaitMind.isMind(element) && isStandardLayout(layout)) {
+        MindTransforms.setAbstractByStandardLayout(board, element);
+    }
+    Transforms.setNode(board, { layout }, path);
+};
+const correctLogicLayoutNode = (board, layout, path) => {
+    const node = PlaitNode.get(board, path);
+    if (node && layout) {
+        node.children?.forEach((value, index) => {
+            if (value.layout) {
+                if ((isHorizontalLogicLayout(layout) && isVerticalLogicLayout(value.layout)) ||
+                    (isVerticalLogicLayout(layout) && isHorizontalLogicLayout(value.layout))) {
+                    Transforms.setNode(board, { layout: null }, [...path, index]);
+                }
+                if (value.children?.length) {
+                    correctLogicLayoutNode(board, layout, [...path, index]);
+                }
+            }
+        });
+    }
+};
+
+const normalizeWidthAndHeight = (board, element, width, height) => {
+    const minWidth = NodeSpace.getNodeTopicMinWidth(board, element, element.isRoot);
+    const newWidth = width < minWidth * board.viewport.zoom ? minWidth : width / board.viewport.zoom;
+    const newHeight = height / board.viewport.zoom;
+    return { width: Math.ceil(newWidth), height: newHeight };
+};
+const setTopic = (board, element, topic, width, height) => {
+    const newElement = {
+        data: { ...element.data, topic },
+        ...normalizeWidthAndHeight(board, element, width, height)
+    };
+    const path = PlaitBoard.findPath(board, element);
+    Transforms.setNode(board, newElement, path);
+};
+const setNodeManualWidth = (board, element, width, height) => {
+    const path = PlaitBoard.findPath(board, element);
+    const { width: normalizedWidth, height: normalizedHeight } = normalizeWidthAndHeight(board, element, width, height);
+    const newElement = { manualWidth: normalizedWidth, height: normalizedHeight };
+    Transforms.setNode(board, newElement, path);
+};
+const setTopicSize = (board, element, width, height) => {
+    const newElement = {
+        ...normalizeWidthAndHeight(board, element, width, height)
+    };
+    let isEqualWidth = Math.ceil(element.width) === Math.ceil(newElement.width);
+    let isEqualHeight = Math.ceil(element.height) === Math.ceil(newElement.height);
+    if (element.manualWidth) {
+        isEqualWidth = true;
+    }
+    if (!isEqualWidth || !isEqualHeight) {
+        const path = PlaitBoard.findPath(board, element);
+        Transforms.setNode(board, newElement, path);
     }
-    destroy() {
-        if (this.componentRef) {
-            this.componentRef.destroy();
-            this.componentRef = null;
+};
+const insertNodes = (board, elements, path) => {
+    const pathRef = board.pathRef(path);
+    elements.forEach(element => {
+        if (pathRef.current) {
+            Transforms.insertNode(board, element, pathRef.current);
         }
+    });
+    pathRef.unref();
+};
+const insertAbstractNodes = (board, validAbstractRefs, elements, path) => {
+    const parent = PlaitNode.get(board, Path$1.parent(path));
+    const abstractPath = [...Path$1.parent(path), parent.children?.length];
+    const abstracts = validAbstractRefs.map(refs => {
+        const { start, end } = getRelativeStartEndByAbstractRef(refs, elements);
+        return {
+            ...refs.abstract,
+            start: start + path[path.length - 1],
+            end: end + path[path.length - 1]
+        };
+    });
+    insertNodes(board, abstracts, abstractPath);
+};
+const setRightNodeCountByRefs = (board, refs) => {
+    refs.forEach(ref => {
+        Transforms.setNode(board, { rightNodeCount: ref.rightNodeCount }, ref.path);
+    });
+};
+
+const addEmoji = (board, element, emojiItem) => {
+    const emojis = element.data.emojis || [];
+    const newEmojis = [...emojis];
+    newEmojis.push(emojiItem);
+    const newElement = {
+        data: { ...element.data, emojis: newEmojis }
+    };
+    const path = PlaitBoard.findPath(board, element);
+    Transforms.setNode(board, newElement, path);
+};
+const removeEmoji = (board, element, emojiItem) => {
+    const emojis = element.data.emojis.filter(value => value !== emojiItem);
+    const newElement = {
+        data: { topic: element.data.topic }
+    };
+    if (MindElement.hasImage(element)) {
+        newElement.data.image = element.data.image;
     }
-}
-class NodeEmojisDrawer {
-    constructor(board, viewContainerRef) {
-        this.board = board;
-        this.viewContainerRef = viewContainerRef;
-        this.emojiDrawers = [];
+    if (emojis.length > 0) {
+        newElement.data.emojis = emojis;
     }
-    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;
+    const path = PlaitBoard.findPath(board, element);
+    Transforms.setNode(board, newElement, path);
+};
+const replaceEmoji = (board, element, oldEmoji, newEmoji) => {
+    const newElement = {
+        data: { ...element.data }
+    };
+    const newEmojis = element.data.emojis.map(value => {
+        if (value === oldEmoji) {
+            return newEmoji;
         }
-        return undefined;
+        return value;
+    });
+    newElement.data.emojis = newEmojis;
+    const path = PlaitBoard.findPath(board, element);
+    Transforms.setNode(board, newElement, path);
+};
+
+const removeImage = (board, element) => {
+    setImageFocus(board, element, false);
+    const newElement = {
+        data: { ...element.data }
+    };
+    delete newElement.data.image;
+    const path = PlaitBoard.findPath(board, element);
+    const newDynamicWidth = NodeSpace.getNodeNewDynamicWidth(board, element, 0);
+    const newHeight = getNewNodeHeight(board, element, newDynamicWidth);
+    if (newHeight) {
+        newElement.height = newHeight / board.viewport.zoom;
     }
-    destroy() {
-        if (this.g) {
-            this.g.remove();
-        }
-        this.emojiDrawers.forEach(drawer => drawer.destroy());
-        this.emojiDrawers = [];
+    Transforms.setNode(board, newElement, path);
+};
+const setImage = (board, element, imageItem) => {
+    const newElement = {
+        data: { ...element.data, image: imageItem }
+    };
+    const newDynamicWidth = NodeSpace.getNodeNewDynamicWidth(board, element, imageItem.width);
+    const newHeight = getNewNodeHeight(board, element, newDynamicWidth);
+    if (newHeight) {
+        newElement.height = newHeight / board.viewport.zoom;
     }
-}
+    const path = PlaitBoard.findPath(board, element);
+    Transforms.setNode(board, newElement, path);
+};
+
+const MindTransforms = {
+    setLayout,
+    setTopic,
+    setTopicSize,
+    setNodeManualWidth,
+    addEmoji,
+    removeEmoji,
+    replaceEmoji,
+    insertAbstract,
+    setAbstractsByRefs,
+    setAbstractByStandardLayout,
+    insertNodes,
+    insertAbstractNodes,
+    setRightNodeCountByRefs,
+    removeImage,
+    setImage
+};
 
 class BaseDrawer {
     constructor(board) {
@@ -2973,61 +2930,6 @@ class CollapseDrawer extends BaseDrawer {
     }
 }
 
-class NodeImageDrawer {
-    constructor(board, viewContainerRef) {
-        this.board = board;
-        this.viewContainerRef = viewContainerRef;
-        this.componentRef = null;
-    }
-    drawImage(nodeG, element) {
-        if (!MindElement.hasImage(element)) {
-            this.destroy();
-            return;
-        }
-        this.g = createG();
-        const foreignRectangle = getImageForeignRectangle(this.board, element);
-        this.foreignObject = createForeignObject(foreignRectangle.x, foreignRectangle.y, foreignRectangle.width, foreignRectangle.height);
-        this.g.append(this.foreignObject);
-        const componentType = this.board.getPluginOptions(WithMindPluginKey).imageComponentType;
-        if (!componentType) {
-            throw new Error('Not implement drawEmoji method error.');
-        }
-        this.componentRef = this.viewContainerRef.createComponent(componentType);
-        this.componentRef.instance.board = this.board;
-        this.componentRef.instance.element = element;
-        this.componentRef.instance.imageItem = element.data.image;
-        this.componentRef.instance.cdr.markForCheck();
-        this.foreignObject.append(this.componentRef.instance.nativeElement);
-        nodeG.appendChild(this.g);
-    }
-    updateImage(nodeG, previous, current) {
-        if (!MindElement.hasImage(previous) || !MindElement.hasImage(current)) {
-            this.drawImage(nodeG, current);
-            return;
-        }
-        if (previous !== current && this.componentRef) {
-            this.componentRef.instance.element = current;
-            this.componentRef.instance.imageItem = current.data.image;
-        }
-        const currentForeignObject = getImageForeignRectangle(this.board, current);
-        updateForeignObject(this.g, currentForeignObject.width, currentForeignObject.height, currentForeignObject.x, currentForeignObject.y);
-        // solve image lose on move node
-        if (this.foreignObject.children.length === 0) {
-            this.foreignObject.append(this.componentRef.instance.nativeElement);
-        }
-        this.componentRef?.instance.cdr.markForCheck();
-    }
-    destroy() {
-        if (this.g) {
-            this.g.remove();
-        }
-        if (this.componentRef) {
-            this.componentRef.destroy();
-            this.componentRef = null;
-        }
-    }
-}
-
 class NodeShapeGenerator extends Generator {
     canDraw(element, data) {
         const shape = getShapeByElement(this.board, element);
@@ -3062,7 +2964,14 @@ class MindNodeComponent extends CommonPluginElement {
         this.nodeInsertDrawer = new NodeInsertDrawer(this.board);
         this.activeGenerator = new NodeActiveGenerator(this.board);
         this.collapseDrawer = new CollapseDrawer(this.board);
-        this.imageDrawer = new NodeImageDrawer(this.board, this.viewContainerRef);
+        this.imageGenerator = new ImageGenerator(this.board, {
+            getRectangle: (element) => {
+                return getImageForeignRectangle(this.board, element);
+            },
+            getImageItem: (element) => {
+                return element.data.image;
+            }
+        });
         const plugins = this.board.getPluginOptions(WithTextPluginKey).textPlugins;
         const textManage = new TextManage(this.board, this.viewContainerRef, {
             getRectangle: () => {
@@ -3104,7 +3013,7 @@ class MindNodeComponent extends CommonPluginElement {
         this.activeGenerator.draw(this.element, this.g, { selected: this.selected, isEditing: this.textManage.isEditing });
         this.drawEmojis();
         this.drawExtend();
-        this.imageDrawer.drawImage(this.g, this.element);
+        this.imageGenerator.draw(this.element, this.g, this.viewContainerRef);
         if (PlaitMind.isMind(this.context.parent)) {
             this.g.classList.add('branch');
         }
@@ -3120,7 +3029,15 @@ class MindNodeComponent extends CommonPluginElement {
             this.drawLink();
             this.drawEmojis();
             this.drawExtend();
-            this.imageDrawer.updateImage(this.g, previous.element, value.element);
+            if (!MindElement.hasImage(previous.element) && MindElement.hasImage(this.element)) {
+                this.imageGenerator.draw(this.element, this.g, this.viewContainerRef);
+            }
+            if (MindElement.hasImage(previous.element) && MindElement.hasImage(this.element)) {
+                this.imageGenerator.updateImage(this.g, previous.element, value.element);
+            }
+            if (MindElement.hasImage(previous.element) && !MindElement.hasImage(this.element)) {
+                this.imageGenerator.destroy();
+            }
             this.updateTopic();
         }
         else {
@@ -3202,15 +3119,15 @@ class MindNodeComponent extends CommonPluginElement {
         super.ngOnDestroy();
         this.textManage.destroy();
         this.nodeEmojisDrawer.destroy();
-        this.imageDrawer.destroy();
+        this.imageGenerator.destroy();
         this.destroy$.next();
         this.destroy$.complete();
         if (ELEMENT_TO_NODE.get(this.element) === this.node) {
             ELEMENT_TO_NODE.delete(this.element);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: MindNodeComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: MindNodeComponent, selector: "plait-mind-node", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MindNodeComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MindNodeComponent, isStandalone: true, selector: "plait-mind-node", usesInheritance: true, ngImport: i0, template: `
         <plait-children
             *ngIf="!element.isCollapsed"
             [board]="board"
@@ -3218,9 +3135,9 @@ class MindNodeComponent extends CommonPluginElement {
             [effect]="effect"
             [parentG]="parentG"
         ></plait-children>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PlaitChildrenElement, selector: "plait-children", inputs: ["board", "parent", "effect", "parentG"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PlaitChildrenElementComponent, selector: "plait-children", inputs: ["board", "parent", "effect", "parentG"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: MindNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MindNodeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'plait-mind-node',
@@ -3233,7 +3150,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
             [parentG]="parentG"
         ></plait-children>
     `,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true,
+                    imports: [NgIf, PlaitChildrenElementComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; } });
 
@@ -3263,33 +3182,21 @@ class PlaitMindComponent extends MindNodeComponent {
             ELEMENT_TO_NODE.set(node.origin, node);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitMindComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: PlaitMindComponent, selector: "plait-mind", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PlaitMindComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PlaitMindComponent, isStandalone: true, selector: "plait-mind", usesInheritance: true, ngImport: i0, template: `
         <plait-children [board]="board" [parent]="element" [effect]="effect" [parentG]="rootG"></plait-children>
-    `, isInline: true, dependencies: [{ kind: "component", type: i2.PlaitChildrenElement, selector: "plait-children", inputs: ["board", "parent", "effect", "parentG"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, dependencies: [{ kind: "component", type: PlaitChildrenElementComponent, selector: "plait-children", inputs: ["board", "parent", "effect", "parentG"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitMindComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PlaitMindComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'plait-mind',
                     template: `
         <plait-children [board]="board" [parent]="element" [effect]="effect" [parentG]="rootG"></plait-children>
     `,
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }] });
-
-class MindModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: MindModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.3", ngImport: i0, type: MindModule, declarations: [PlaitMindComponent, MindNodeComponent], imports: [CommonModule, TextModule, PlaitModule], exports: [PlaitMindComponent, MindNodeComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: MindModule, imports: [CommonModule, TextModule, PlaitModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: MindModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [PlaitMindComponent, MindNodeComponent],
-                    imports: [CommonModule, TextModule, PlaitModule],
-                    exports: [PlaitMindComponent, MindNodeComponent]
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true,
+                    imports: [PlaitChildrenElementComponent, MindNodeComponent]
                 }]
         }] });
 
@@ -3313,10 +3220,8 @@ const withNodeDnd = (board) => {
         }
         const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
         const selectedElements = getSelectedElements(board);
-        const hitTarget = getHitElements(board, { ranges: [{ anchor: point, focus: point }] }, (element) => {
-            return MindElement.isMindElement(board, element);
-        });
-        const targetElement = hitTarget && hitTarget.length === 1 ? hitTarget[0] : null;
+        const hitTarget = getHitElements(board, { ranges: [{ anchor: point, focus: point }] });
+        const targetElement = hitTarget && hitTarget.length === 1 && MindElement.isMindElement(board, hitTarget[0]) ? hitTarget[0] : null;
         if (targetElement &&
             MindElement.isMindElement(board, targetElement) &&
             !targetElement.isRoot &&
@@ -3338,7 +3243,8 @@ const withNodeDnd = (board) => {
         pointerDown(event);
     };
     board.pointerMove = (event) => {
-        if (!board.options.readonly && activeElements?.length && startPoint) {
+        // const xx = activeElements.
+        if (!board.options.readonly && activeElements.length && startPoint) {
             // prevent text from being selected
             event.preventDefault();
             const endPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
@@ -3875,11 +3781,13 @@ const withNodeImage = (board) => {
         const isSelectedImage = !!getSelectedImageElement(board);
         const isSingleSelection = selectedElements.length === 1 && MindElement.isMindElement(board, selectedElements[0]);
         if (data?.files.length && (isSingleSelection || isSelectedImage)) {
-            const selectedElement = (selectedElements[0] || getSelectedImageElement(board));
             const acceptImageArray = acceptImageTypes.map(type => 'image/' + type);
+            const selectedElement = (selectedElements[0] || getSelectedImageElement(board));
             if (acceptImageArray.includes(data?.files[0].type)) {
                 const imageFile = data.files[0];
-                buildImage(board, selectedElement, imageFile);
+                buildImage(board, imageFile, DEFAULT_MIND_IMAGE_WIDTH, imageItem => {
+                    MindTransforms.setImage(board, selectedElement, imageItem);
+                });
                 return;
             }
         }
@@ -4247,7 +4155,7 @@ const getNextSelectedElement = (board, firstLevelElements) => {
 
 const withMind = (baseBoard) => {
     const board = baseBoard;
-    const { drawElement, dblclick, isHitSelection, getRectangle, isMovable, isRecursion } = board;
+    const { drawElement, dblclick, isHitSelection, getRectangle, isMovable, isRecursion, isAlign } = board;
     board.drawElement = (context) => {
         if (PlaitMind.isMind(context.element)) {
             return PlaitMindComponent;
@@ -4291,6 +4199,12 @@ const withMind = (baseBoard) => {
         }
         return isMovable(element);
     };
+    board.isAlign = (element) => {
+        if (PlaitMind.isMind(element) && element.isRoot) {
+            return true;
+        }
+        return isAlign(element);
+    };
     board.dblclick = (event) => {
         if (PlaitBoard.isReadonly(board)) {
             dblclick(event);
@@ -4334,10 +4248,10 @@ class MindEmojiBaseComponent {
     ngOnInit() {
         this.elementRef.nativeElement.style.fontSize = `${this.fontSize}px`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: MindEmojiBaseComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.3", type: MindEmojiBaseComponent, inputs: { fontSize: "fontSize", emojiItem: "emojiItem", board: "board", element: "element" }, host: { listeners: { "pointerdown": "handlePointerDown()" }, classAttribute: "mind-node-emoji" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MindEmojiBaseComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: MindEmojiBaseComponent, inputs: { fontSize: "fontSize", emojiItem: "emojiItem", board: "board", element: "element" }, host: { listeners: { "pointerdown": "handlePointerDown()" }, classAttribute: "mind-node-emoji" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: MindEmojiBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MindEmojiBaseComponent, decorators: [{
             type: Directive,
             args: [{
                     host: {
@@ -4357,76 +4271,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
                 args: ['pointerdown']
             }] } });
 
-class MindImageBaseComponent {
-    set imageItem(value) {
-        this.afterImageItemChange(this._imageItem, value);
-        this._imageItem = value;
-        this.drawFocus();
-    }
-    get imageItem() {
-        return this._imageItem;
-    }
-    set isFocus(value) {
-        this._isFocus = value;
-        this.drawFocus();
-    }
-    get isFocus() {
-        return this._isFocus;
-    }
-    get nativeElement() {
-        return this.elementRef.nativeElement;
-    }
-    constructor(elementRef, cdr) {
-        this.elementRef = elementRef;
-        this.cdr = cdr;
-        this.initialized = false;
-    }
-    ngOnInit() {
-        this.activeGenerator = new ActiveGenerator(this.board, {
-            getStrokeWidth: () => {
-                return 1;
-            },
-            getStrokeOpacity: () => {
-                return 1;
-            },
-            getRectangle: (element) => {
-                return getImageForeignRectangle(this.board, this.element);
-            },
-            hasResizeHandle: () => true
-        });
-        this.initialized = true;
-    }
-    drawFocus() {
-        if (this.initialized) {
-            const com = PlaitElement.getComponent(this.element);
-            this.activeGenerator.draw(this.element, com.g, { selected: this._isFocus });
-        }
-    }
-    ngOnDestroy() {
-        if (this.activeGenerator) {
-            this.activeGenerator.destroy();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: MindImageBaseComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.3", 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: "16.2.3", 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
  */
@@ -4435,5 +4279,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, AbstractHandlePosition, AbstractResizeState, BASE, BRANCH_FONT_FAMILY, BRANCH_WIDTH, BaseDrawer, BranchShape, DEFAULT_FONT_FAMILY, DefaultAbstractNodeStyle, DefaultNodeStyle, ELEMENT_TO_NODE, EXTEND_DIAMETER, EXTEND_OFFSET, GRAY_COLOR, INHERIT_ATTRIBUTE_KEYS, IS_DRAGGING, LayoutDirection, LayoutDirectionsMap, MindColorfulThemeColor, MindDarkThemeColor, MindDefaultThemeColor, MindElement, MindElementShape, MindEmojiBaseComponent, MindImageBaseComponent, MindModule, MindNode, MindNodeComponent, MindPointerType, MindQueries, MindRetroThemeColor, MindSoftThemeColor, MindStarryThemeColor, MindThemeColor, MindThemeColors, MindTransforms, NodeSpace, NodeTopicThreshold, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, QUICK_INSERT_CIRCLE_COLOR, QUICK_INSERT_CIRCLE_OFFSET, QUICK_INSERT_INNER_CROSS_COLOR, ROOT_TOPIC_FONT_SIZE, ROOT_TOPIC_HEIGHT, ROOT_TOPIC_WIDTH, STROKE_WIDTH, TOPIC_COLOR, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, TRANSPARENT, WithMindPluginKey, addActiveOnDragOrigin, addSelectedImageElement, adjustAbstractToNode, adjustNodeToRoot, adjustRootToNode, buildImage, canSetAbstract, copyNewNode, correctLayoutByDirection, createDefaultMind, createEmptyMind, createMindElement, deleteElementHandleAbstract, deleteElementsHandleRightNodeCount, detectDropTarget, directionCorrector, directionDetector, divideElementByParent, drawFakeDragNode, drawFakeDropNode, editTopic, extractNodesText, findLastChild, findLocationLeftIndex, getAbstractBranchColor, getAbstractBranchWidth, getAbstractHandleRectangle, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getBranchShapeByMindElement, getBranchWidthByMindElement, getChildrenCount, getCorrespondingAbstract, getDefaultBranchColor, getDefaultBranchColorByIndex, getDefaultLayout, getEmojiFontSize, getEmojiForeignRectangle, getEmojiRectangle, getEmojisWidthHeight, getFillByElement, getFirstLevelElement, getFontSizeBySlateElement, getHitAbstractHandle, getHitImageResizeHandleDirection, getImageForeignRectangle, getInCorrectLayoutDirection, getLayoutDirection$1 as getLayoutDirection, getLayoutOptions, getLayoutReverseDirection, getLocationScope, getMindThemeColor, getNewNodeHeight, getNextBranchColor, getNodeDefaultFontSize, getOverallAbstracts, getPathByDropTarget, getRectangleByElement, getRectangleByNode, getRectangleByResizingLocation, getRelativeStartEndByAbstractRef, getRootLayout, getSelectedImageElement, getSelectedMindElements, getShapeByElement, getStrokeByMindElement, getStrokeWidthByElement, getTopicRectangleByElement, getTopicRectangleByNode, getValidAbstractRefs, handleTouchedAbstract, hasAfterDraw, hasPreviousOrNextOfDropPath, insertElementHandleAbstract, insertElementHandleRightNodeCount, insertMindElement, isChildElement, isChildOfAbstract, isChildRight, isChildUp, isCorrectLayout, isDragging, isDropStandardRight, isHitEmojis, isHitImage, isHitMindElement, isInRightBranchOfStandardLayout, isMixedLayout, isSetAbstract, isValidTarget, removeActiveOnDragOrigin, removeSelectedImageElement, selectImage, separateChildren, setImageFocus, setIsDragging, temporaryDisableSelection, withMind, withMindExtend };
+export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, AbstractHandlePosition, AbstractResizeState, BASE, BRANCH_FONT_FAMILY, BRANCH_WIDTH, BaseDrawer, BranchShape, DEFAULT_FONT_FAMILY, DEFAULT_MIND_IMAGE_WIDTH, DefaultAbstractNodeStyle, DefaultNodeStyle, ELEMENT_TO_NODE, EXTEND_DIAMETER, EXTEND_OFFSET, GRAY_COLOR, INHERIT_ATTRIBUTE_KEYS, IS_DRAGGING, LayoutDirection, LayoutDirectionsMap, MindColorfulThemeColor, MindDarkThemeColor, MindDefaultThemeColor, MindElement, MindElementShape, MindEmojiBaseComponent, MindNode, MindNodeComponent, MindPointerType, MindQueries, MindRetroThemeColor, MindSoftThemeColor, MindStarryThemeColor, MindThemeColor, MindThemeColors, MindTransforms, NodeSpace, NodeTopicThreshold, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, QUICK_INSERT_CIRCLE_COLOR, QUICK_INSERT_CIRCLE_OFFSET, QUICK_INSERT_INNER_CROSS_COLOR, ROOT_TOPIC_FONT_SIZE, ROOT_TOPIC_HEIGHT, ROOT_TOPIC_WIDTH, STROKE_WIDTH, TOPIC_COLOR, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, TRANSPARENT, WithMindPluginKey, addActiveOnDragOrigin, addSelectedImageElement, adjustAbstractToNode, adjustNodeToRoot, adjustRootToNode, canSetAbstract, copyNewNode, correctLayoutByDirection, createDefaultMind, createEmptyMind, createMindElement, deleteElementHandleAbstract, deleteElementsHandleRightNodeCount, detectDropTarget, directionCorrector, directionDetector, divideElementByParent, drawFakeDragNode, drawFakeDropNode, editTopic, extractNodesText, findLastChild, findLocationLeftIndex, getAbstractBranchColor, getAbstractBranchWidth, getAbstractHandleRectangle, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getBranchShapeByMindElement, getBranchWidthByMindElement, getChildrenCount, getCorrespondingAbstract, getDefaultBranchColor, getDefaultBranchColorByIndex, getDefaultLayout, getEmojiFontSize, getEmojiForeignRectangle, getEmojiRectangle, getEmojisWidthHeight, getFillByElement, getFirstLevelElement, getFontSizeBySlateElement, getHitAbstractHandle, getHitImageResizeHandleDirection, getImageForeignRectangle, getInCorrectLayoutDirection, getLayoutDirection$1 as getLayoutDirection, getLayoutOptions, getLayoutReverseDirection, getLocationScope, getMindThemeColor, getNewNodeHeight, getNextBranchColor, getNodeDefaultFontSize, getOverallAbstracts, getPathByDropTarget, getRectangleByElement, getRectangleByNode, getRectangleByResizingLocation, getRelativeStartEndByAbstractRef, getRootLayout, getSelectedImageElement, getSelectedMindElements, getShapeByElement, getStrokeByMindElement, getStrokeWidthByElement, getTopicRectangleByElement, getTopicRectangleByNode, getValidAbstractRefs, handleTouchedAbstract, hasAfterDraw, hasPreviousOrNextOfDropPath, insertElementHandleAbstract, insertElementHandleRightNodeCount, insertMindElement, isChildElement, isChildOfAbstract, isChildRight, isChildUp, isCorrectLayout, isDragging, isDropStandardRight, isHitEmojis, isHitImage, isHitMindElement, isInRightBranchOfStandardLayout, isMixedLayout, isSetAbstract, isValidTarget, removeActiveOnDragOrigin, removeSelectedImageElement, separateChildren, setImageFocus, setIsDragging, temporaryDisableSelection, withMind, withMindExtend };
 //# sourceMappingURL=plait-mind.mjs.map