@plait/mind 0.15.0 → 0.17.0

package/fesm2020/plait-mind.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, NgModule, NgZone, Directive, Input, HostListener } from '@angular/core';
+import { Directive, Input, Component, ChangeDetectionStrategy, NgModule, NgZone, HostListener } from '@angular/core';
 import * as i2 from '@plait/core';
-import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, RectangleClient, PlaitElement, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, PlaitBoard, depthFirstRecursion, Path, drawLinearPath, drawBezierPath, createG, updateForeignObject, PlaitNode, drawRoundRectangle, getRectangleByElements, getSelectedElements, NODE_TO_PARENT, distanceBetweenPointAndRectangle, createForeignObject, drawAbstractRoundRectangle, createText, PlaitPointerType, PlaitPluginElementComponent, NODE_TO_INDEX, PlaitModule, transformPoint, toPoint, getHitElements, distanceBetweenPointAndPoint, CLIP_BOARD_FORMAT_KEY, isMainPointer, BOARD_TO_HOST, PlaitPluginKey, throttleRAF, BoardTransforms, removeSelectedElement, PlaitHistoryBoard, hotkeys } from '@plait/core';
-import { MindLayoutType, isIndentedLayout, getNonAbstractChildren, isStandardLayout, AbstractNode, isLeftLayout, isRightLayout, isVerticalLogicLayout, isHorizontalLogicLayout, isTopLayout, isBottomLayout, isHorizontalLayout, getCorrectStartEnd, getAbstractLayout, ConnectingPosition, GlobalLayout } from '@plait/layouts';
-import { TEXT_DEFAULT_HEIGHT, buildText, getTextSize, TextManage, TextModule, getTextFromClipboard } from '@plait/text';
+import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, RectangleClient, PlaitElement, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, PlaitNode, Path, PlaitBoard, depthFirstRecursion, drawLinearPath, drawBezierPath, createG, updateForeignObject, drawRoundRectangle, getRectangleByElements, getSelectedElements, NODE_TO_PARENT, distanceBetweenPointAndRectangle, createForeignObject, drawAbstractRoundRectangle, createText, PlaitPointerType, PlaitPluginElementComponent, NODE_TO_INDEX, PlaitModule, transformPoint, toPoint, getHitElements, distanceBetweenPointAndPoint, CLIP_BOARD_FORMAT_KEY, isMainPointer, BOARD_TO_HOST, PlaitPluginKey, throttleRAF, BoardTransforms, removeSelectedElement, PlaitHistoryBoard, hotkeys } from '@plait/core';
+import { MindLayoutType, isIndentedLayout, AbstractNode, getNonAbstractChildren, isStandardLayout, isLeftLayout, isRightLayout, isVerticalLogicLayout, isHorizontalLogicLayout, isTopLayout, isBottomLayout, isHorizontalLayout, getCorrectStartEnd, getAbstractLayout, ConnectingPosition, GlobalLayout } from '@plait/layouts';
+import { TEXT_DEFAULT_HEIGHT, buildText, getTextSize, TextManage, ExitOrigin, TextModule, getTextFromClipboard } from '@plait/text';
 import { fromEvent, Subject } from 'rxjs';
 import { Node, Path as Path$1 } from 'slate';
 import { isKeyHotkey } from 'is-hotkey';
@@ -179,6 +179,7 @@ const MindThemeColor = {
     }
 };
 
+const WithMindPluginKey = 'plait-mind-plugin-key';
 const BASE = 4;
 const PRIMARY_COLOR = '#6698FF';
 const TRANSPARENT = 'transparent';
@@ -192,7 +193,7 @@ const QUICK_INSERT_CIRCLE_COLOR = '#6698FF';
 const QUICK_INSERT_INNER_CROSS_COLOR = 'white';
 
 function getEmojisWidthHeight(board, element) {
-    const options = board.getMindOptions();
+    const options = board.getPluginOptions(WithMindPluginKey);
     const count = element.data.emojis.length;
     const fontSize = getEmojiFontSize(element);
     return {
@@ -215,7 +216,9 @@ const NodeDefaultSpace = {
         emojiAndText: BASE * 1.5
     },
     vertical: {
-        nodeAndText: BASE * 1.5
+        nodeAndText: BASE * 1.5,
+        nodeAndImage: BASE,
+        imageAndText: BASE * 1.5
     }
 };
 const RootDefaultSpace = {
@@ -245,17 +248,25 @@ const getSpaceEmojiAndText = (element) => {
 const NodeSpace = {
     getNodeWidth(board, element) {
         const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
+        const imageWidth = MindElement.hasImage(element) ? element.data.image?.width : 0;
         if (MindElement.hasEmojis(element)) {
             return (NodeSpace.getEmojiLeftSpace(board, element) +
                 getEmojisWidthHeight(board, element).width +
                 getSpaceEmojiAndText(element) +
-                element.width +
+                Math.max(element.width, imageWidth) +
                 nodeAndText);
         }
-        return nodeAndText + element.width + nodeAndText;
+        return nodeAndText + Math.max(element.width, imageWidth) + nodeAndText;
     },
     getNodeHeight(board, element) {
         const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
+        if (MindElement.hasImage(element)) {
+            return (NodeDefaultSpace.vertical.nodeAndImage +
+                element.data.image.height +
+                NodeDefaultSpace.vertical.imageAndText +
+                element.height +
+                nodeAndText);
+        }
         return nodeAndText + element.height + nodeAndText;
     },
     getTextLeftSpace(board, element) {
@@ -269,10 +280,18 @@ const NodeSpace = {
     },
     getTextTopSpace(element) {
         const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
-        return nodeAndText;
+        if (MindElement.hasImage(element)) {
+            return element.data.image.height + NodeDefaultSpace.vertical.nodeAndImage + NodeDefaultSpace.vertical.imageAndText;
+        }
+        else {
+            return nodeAndText;
+        }
+    },
+    getImageTopSpace(element) {
+        return NodeDefaultSpace.vertical.nodeAndImage;
     },
     getEmojiLeftSpace(board, element) {
-        const options = board.getMindOptions();
+        const options = board.getPluginOptions(WithMindPluginKey);
         const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
         return nodeAndText - options.emojiPadding;
     },
@@ -296,12 +315,12 @@ function getEmojiRectangle(board, element) {
 function getEmojiForeignRectangle(board, element) {
     let { x, y } = getRectangleByNode(MindElement.getNode(element));
     x = x + NodeSpace.getEmojiLeftSpace(board, element);
-    const { width, height } = getEmojisWidthHeight(board, element);
+    const { width } = getEmojisWidthHeight(board, element);
     return {
         x,
         y,
         width,
-        height: height + NodeSpace.getEmojiTopSpace(element) * 2
+        height: NodeSpace.getNodeHeight(board, element)
     };
 }
 const isHitEmojis = (board, element, point) => {
@@ -323,6 +342,23 @@ function getTopicRectangleByElement(board, nodeRectangle, element) {
     return { height, width, x, y };
 }
 
+function getImageForeignRectangle(board, element) {
+    let { x, y } = getRectangleByNode(MindElement.getNode(element));
+    x = x + NodeSpace.getTextLeftSpace(board, element);
+    y = NodeSpace.getImageTopSpace(element) + y;
+    const { width, height } = element.data.image;
+    return {
+        x,
+        y,
+        width,
+        height
+    };
+}
+const isHitImage = (board, element, range) => {
+    const client = getImageForeignRectangle(board, element);
+    return RectangleClient.isHit(RectangleClient.toRectangleClient([range.anchor, range.focus]), client);
+};
+
 const NODE_MIN_WIDTH = 18;
 
 function editTopic(element) {
@@ -432,7 +468,7 @@ const copyNewNode = (node) => {
 const extractNodesText = (node) => {
     let str = '';
     if (node) {
-        str += Node.string(node.data.topic.children[0]) + ' ';
+        str += Node.string(node.data.topic) + ' ';
         for (const childNode of node.children) {
             str += extractNodesText(childNode);
         }
@@ -638,10 +674,180 @@ const getAvailableProperty = (board, element, propertyKey) => {
     return element[propertyKey];
 };
 
+const separateChildren = (parentElement) => {
+    const rightNodeCount = parentElement.rightNodeCount;
+    const children = parentElement.children;
+    let rightChildren = [], leftChildren = [];
+    for (let i = 0; i < children.length; i++) {
+        const child = children[i];
+        if (AbstractNode.isAbstract(child) && child.end < rightNodeCount) {
+            rightChildren.push(child);
+            continue;
+        }
+        if (AbstractNode.isAbstract(child) && child.start >= rightNodeCount) {
+            leftChildren.push(child);
+            continue;
+        }
+        if (i < rightNodeCount) {
+            rightChildren.push(child);
+        }
+        else {
+            leftChildren.push(child);
+        }
+    }
+    return { leftChildren, rightChildren };
+};
+const isSetAbstract = (element) => {
+    return !!getCorrespondingAbstract(element);
+};
+const canSetAbstract = (element) => {
+    return !PlaitElement.isRootElement(element) && !AbstractNode.isAbstract(element) && !isSetAbstract(element);
+};
+const getCorrespondingAbstract = (element) => {
+    const parent = MindElement.findParent(element);
+    if (!parent)
+        return undefined;
+    const elementIndex = parent.children.indexOf(element);
+    return parent.children.find(child => {
+        return AbstractNode.isAbstract(child) && elementIndex >= child.start && elementIndex <= child.end;
+    });
+};
+const getBehindAbstracts = (element) => {
+    const parent = MindElement.findParent(element);
+    if (!parent)
+        return [];
+    const index = parent.children.indexOf(element);
+    return parent.children.filter(child => AbstractNode.isAbstract(child) && child.start > index);
+};
+/**
+ * return corresponding abstract that is not child of elements
+ */
+const getOverallAbstracts = (board, elements) => {
+    const overallAbstracts = [];
+    elements
+        .filter(value => !AbstractNode.isAbstract(value) && !PlaitMind.isMind(value))
+        .forEach(value => {
+        const abstract = getCorrespondingAbstract(value);
+        if (abstract && elements.indexOf(abstract) === -1 && overallAbstracts.indexOf(abstract) === -1) {
+            const { start, end } = abstract;
+            const parent = MindElement.getParent(value);
+            const isOverall = parent.children.slice(start, end + 1).every(includedElement => elements.indexOf(includedElement) > -1);
+            if (isOverall) {
+                overallAbstracts.push(abstract);
+            }
+        }
+    });
+    return overallAbstracts;
+};
+/**
+ * abstract node is valid when elements contains at least one element it is referenced with
+ */
+const getValidAbstractRefs = (board, elements) => {
+    const validAbstractRefs = [];
+    elements
+        .filter(value => !AbstractNode.isAbstract(value) && !PlaitMind.isMind(value))
+        .forEach(value => {
+        const abstract = getCorrespondingAbstract(value);
+        if (abstract && elements.indexOf(abstract) > 0) {
+            const index = validAbstractRefs.findIndex(value => value.abstract === abstract);
+            if (index === -1) {
+                validAbstractRefs.push({
+                    abstract: abstract,
+                    references: [value]
+                });
+            }
+            else {
+                validAbstractRefs[index].references.push(value);
+            }
+        }
+    });
+    return validAbstractRefs;
+};
+function getRelativeStartEndByAbstractRef(abstractRef, elements) {
+    const start = elements.indexOf(abstractRef.references[0]);
+    const end = elements.indexOf(abstractRef.references[abstractRef.references.length - 1]);
+    return { start, end };
+}
+const insertElementHandleAbstract = (board, path, step = 1, 
+//由此区分拖拽和新增到概要概括最后一个节点
+isExtendPreviousNode = true, effectedAbstracts = new Map()) => {
+    const parent = PlaitNode.parent(board, path);
+    const hasPreviousNode = path[path.length - 1] !== 0;
+    let behindAbstracts;
+    if (!hasPreviousNode) {
+        behindAbstracts = parent.children.filter(child => AbstractNode.isAbstract(child));
+    }
+    else {
+        const selectedElement = PlaitNode.get(board, Path.previous(path));
+        behindAbstracts = getBehindAbstracts(selectedElement);
+    }
+    if (behindAbstracts.length) {
+        behindAbstracts.forEach(abstract => {
+            let newProperties = effectedAbstracts.get(abstract);
+            if (!newProperties) {
+                newProperties = { start: 0, end: 0 };
+                effectedAbstracts.set(abstract, newProperties);
+            }
+            newProperties.start = newProperties.start + step;
+            newProperties.end = newProperties.end + step;
+        });
+    }
+    if (!hasPreviousNode) {
+        return effectedAbstracts;
+    }
+    const selectedElement = PlaitNode.get(board, Path.previous(path));
+    const correspondingAbstract = getCorrespondingAbstract(selectedElement);
+    const isDragToLast = !isExtendPreviousNode && correspondingAbstract && correspondingAbstract.end === path[path.length - 1] - 1;
+    if (correspondingAbstract && !isDragToLast) {
+        let newProperties = effectedAbstracts.get(correspondingAbstract);
+        if (!newProperties) {
+            newProperties = { start: 0, end: 0 };
+            effectedAbstracts.set(correspondingAbstract, newProperties);
+        }
+        newProperties.end = newProperties.end + step;
+    }
+    return effectedAbstracts;
+};
+const deleteElementHandleAbstract = (board, deletableElements, effectedAbstracts = new Map()) => {
+    deletableElements.forEach(node => {
+        if (!PlaitMind.isMind(node)) {
+            const behindAbstracts = getBehindAbstracts(node).filter(abstract => !deletableElements.includes(abstract));
+            if (behindAbstracts.length) {
+                behindAbstracts.forEach(abstract => {
+                    let newProperties = effectedAbstracts.get(abstract);
+                    if (!newProperties) {
+                        newProperties = { start: 0, end: 0 };
+                        effectedAbstracts.set(abstract, newProperties);
+                    }
+                    newProperties.start = newProperties.start - 1;
+                    newProperties.end = newProperties.end - 1;
+                });
+            }
+            const correspondingAbstract = getCorrespondingAbstract(node);
+            if (correspondingAbstract && !deletableElements.includes(correspondingAbstract)) {
+                let newProperties = effectedAbstracts.get(correspondingAbstract);
+                if (!newProperties) {
+                    newProperties = { start: 0, end: 0 };
+                    effectedAbstracts.set(correspondingAbstract, newProperties);
+                }
+                newProperties.end = newProperties.end - 1;
+            }
+        }
+    });
+    return effectedAbstracts;
+};
+const isChildOfAbstract = (board, element) => {
+    const ancestors = MindElement.getAncestors(board, element);
+    return !!ancestors.find((value) => AbstractNode.isAbstract(value));
+};
+
 /**
  * Processing of branch color, width, style, etc. of the mind node
  */
 const getBranchColorByMindElement = (board, element) => {
+    if (AbstractNode.isAbstract(element) || isChildOfAbstract(board, element)) {
+        return getAbstractBranchColor(board, element);
+    }
     const branchColor = getAvailableProperty(board, element, 'branchColor');
     return branchColor || getDefaultBranchColor(board, element);
 };
@@ -695,6 +901,10 @@ const getStrokeByMindElement = (board, element) => {
         const defaultRootStroke = getMindThemeColor(board).rootFill;
         return element.strokeColor || defaultRootStroke;
     }
+    if (AbstractNode.isAbstract(element) || isChildOfAbstract(board, element)) {
+        return element.strokeColor || DefaultAbstractNodeStyle.strokeColor;
+        ;
+    }
     return getAvailableProperty(board, element, 'strokeColor') || getDefaultBranchColor(board, element);
 };
 const getShapeByElement = (board, element) => {
@@ -1218,6 +1428,12 @@ const drawFakeDragNode = (board, element, offsetX, offsetY) => {
         updateForeignObject(fakeEmojisG, foreignRectangle.width, foreignRectangle.height, foreignRectangle.x + offsetX, foreignRectangle.y + offsetY);
         dragFakeNodeG?.append(fakeEmojisG);
     }
+    if (MindElement.hasImage(element)) {
+        const fakeImageG = activeComponent.imageDrawer.g.cloneNode(true);
+        const foreignRectangle = getImageForeignRectangle(board, element);
+        updateForeignObject(fakeImageG, foreignRectangle.width, foreignRectangle.height, foreignRectangle.x + offsetX, foreignRectangle.y + offsetY);
+        dragFakeNodeG?.append(fakeImageG);
+    }
     return dragFakeNodeG;
 };
 const drawFakeDropNode = (board, dropTarget, path) => {
@@ -1334,169 +1550,6 @@ const drawFakeDropNode = (board, dropTarget, path) => {
     return fakeDropNodeG;
 };
 
-const separateChildren = (parentElement) => {
-    const rightNodeCount = parentElement.rightNodeCount;
-    const children = parentElement.children;
-    let rightChildren = [], leftChildren = [];
-    for (let i = 0; i < children.length; i++) {
-        const child = children[i];
-        if (AbstractNode.isAbstract(child) && child.end < rightNodeCount) {
-            rightChildren.push(child);
-            continue;
-        }
-        if (AbstractNode.isAbstract(child) && child.start >= rightNodeCount) {
-            leftChildren.push(child);
-            continue;
-        }
-        if (i < rightNodeCount) {
-            rightChildren.push(child);
-        }
-        else {
-            leftChildren.push(child);
-        }
-    }
-    return { leftChildren, rightChildren };
-};
-const isSetAbstract = (element) => {
-    return !!getCorrespondingAbstract(element);
-};
-const canSetAbstract = (element) => {
-    return !PlaitElement.isRootElement(element) && !AbstractNode.isAbstract(element) && !isSetAbstract(element);
-};
-const getCorrespondingAbstract = (element) => {
-    const parent = MindElement.findParent(element);
-    if (!parent)
-        return undefined;
-    const elementIndex = parent.children.indexOf(element);
-    return parent.children.find(child => {
-        return AbstractNode.isAbstract(child) && elementIndex >= child.start && elementIndex <= child.end;
-    });
-};
-const getBehindAbstracts = (element) => {
-    const parent = MindElement.findParent(element);
-    if (!parent)
-        return [];
-    const index = parent.children.indexOf(element);
-    return parent.children.filter(child => AbstractNode.isAbstract(child) && child.start > index);
-};
-/**
- * return corresponding abstract that is not child of elements
- */
-const getOverallAbstracts = (board, elements) => {
-    const overallAbstracts = [];
-    elements
-        .filter(value => !AbstractNode.isAbstract(value) && !PlaitMind.isMind(value))
-        .forEach(value => {
-        const abstract = getCorrespondingAbstract(value);
-        if (abstract && elements.indexOf(abstract) === -1 && overallAbstracts.indexOf(abstract) === -1) {
-            const { start, end } = abstract;
-            const parent = MindElement.getParent(value);
-            const isOverall = parent.children.slice(start, end + 1).every(includedElement => elements.indexOf(includedElement) > -1);
-            if (isOverall) {
-                overallAbstracts.push(abstract);
-            }
-        }
-    });
-    return overallAbstracts;
-};
-/**
- * abstract node is valid when elements contains at least one element it is referenced with
- */
-const getValidAbstractRefs = (board, elements) => {
-    const validAbstractRefs = [];
-    elements
-        .filter(value => !AbstractNode.isAbstract(value) && !PlaitMind.isMind(value))
-        .forEach(value => {
-        const abstract = getCorrespondingAbstract(value);
-        if (abstract && elements.indexOf(abstract) > 0) {
-            const index = validAbstractRefs.findIndex(value => value.abstract === abstract);
-            if (index === -1) {
-                validAbstractRefs.push({
-                    abstract: abstract,
-                    references: [value]
-                });
-            }
-            else {
-                validAbstractRefs[index].references.push(value);
-            }
-        }
-    });
-    return validAbstractRefs;
-};
-function getRelativeStartEndByAbstractRef(abstractRef, elements) {
-    const start = elements.indexOf(abstractRef.references[0]);
-    const end = elements.indexOf(abstractRef.references[abstractRef.references.length - 1]);
-    return { start, end };
-}
-const insertElementHandleAbstract = (board, path, step = 1, 
-//由此区分拖拽和新增到概要概括最后一个节点
-isExtendPreviousNode = true, effectedAbstracts = new Map()) => {
-    const parent = PlaitNode.parent(board, path);
-    const hasPreviousNode = path[path.length - 1] !== 0;
-    let behindAbstracts;
-    if (!hasPreviousNode) {
-        behindAbstracts = parent.children.filter(child => AbstractNode.isAbstract(child));
-    }
-    else {
-        const selectedElement = PlaitNode.get(board, Path.previous(path));
-        behindAbstracts = getBehindAbstracts(selectedElement);
-    }
-    if (behindAbstracts.length) {
-        behindAbstracts.forEach(abstract => {
-            let newProperties = effectedAbstracts.get(abstract);
-            if (!newProperties) {
-                newProperties = { start: 0, end: 0 };
-                effectedAbstracts.set(abstract, newProperties);
-            }
-            newProperties.start = newProperties.start + step;
-            newProperties.end = newProperties.end + step;
-        });
-    }
-    if (!hasPreviousNode) {
-        return effectedAbstracts;
-    }
-    const selectedElement = PlaitNode.get(board, Path.previous(path));
-    const correspondingAbstract = getCorrespondingAbstract(selectedElement);
-    const isDragToLast = !isExtendPreviousNode && correspondingAbstract && correspondingAbstract.end === path[path.length - 1] - 1;
-    if (correspondingAbstract && !isDragToLast) {
-        let newProperties = effectedAbstracts.get(correspondingAbstract);
-        if (!newProperties) {
-            newProperties = { start: 0, end: 0 };
-            effectedAbstracts.set(correspondingAbstract, newProperties);
-        }
-        newProperties.end = newProperties.end + step;
-    }
-    return effectedAbstracts;
-};
-const deleteElementHandleAbstract = (board, deletableElements, effectedAbstracts = new Map()) => {
-    deletableElements.forEach(node => {
-        if (!PlaitMind.isMind(node)) {
-            const behindAbstracts = getBehindAbstracts(node).filter(abstract => !deletableElements.includes(abstract));
-            if (behindAbstracts.length) {
-                behindAbstracts.forEach(abstract => {
-                    let newProperties = effectedAbstracts.get(abstract);
-                    if (!newProperties) {
-                        newProperties = { start: 0, end: 0 };
-                        effectedAbstracts.set(abstract, newProperties);
-                    }
-                    newProperties.start = newProperties.start - 1;
-                    newProperties.end = newProperties.end - 1;
-                });
-            }
-            const correspondingAbstract = getCorrespondingAbstract(node);
-            if (correspondingAbstract && !deletableElements.includes(correspondingAbstract)) {
-                let newProperties = effectedAbstracts.get(correspondingAbstract);
-                if (!newProperties) {
-                    newProperties = { start: 0, end: 0 };
-                    effectedAbstracts.set(correspondingAbstract, newProperties);
-                }
-                newProperties.end = newProperties.end - 1;
-            }
-        }
-    });
-    return effectedAbstracts;
-};
-
 var AbstractHandlePosition;
 (function (AbstractHandlePosition) {
     AbstractHandlePosition["start"] = "start";
@@ -1911,6 +1964,14 @@ const MindElement = {
             return false;
         }
     },
+    hasImage(element) {
+        if (element.data.image) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    },
     getEmojis(element) {
         return element.data.emojis;
     },
@@ -2155,9 +2216,7 @@ const setAbstractByElements = (board, groupParent, group) => {
 };
 const insertAbstractNode = (board, path, start, end) => {
     const mindElement = createMindElement('概要', 28, 20, {
-        strokeColor: DefaultAbstractNodeStyle.strokeColor,
         strokeWidth: DefaultAbstractNodeStyle.branchWidth,
-        branchColor: DefaultAbstractNodeStyle.branchColor,
         branchWidth: DefaultAbstractNodeStyle.branchWidth
     });
     mindElement.start = start;
@@ -2197,12 +2256,9 @@ const normalizeWidthAndHeight = (board, width, height) => {
 };
 const setTopic = (board, element, topic, width, height) => {
     const newElement = {
-        data: { topic },
+        data: { ...element.data, topic },
         ...normalizeWidthAndHeight(board, width, height)
     };
-    if (MindElement.hasEmojis(element)) {
-        newElement.data.emojis = element.data.emojis;
-    }
     const path = PlaitBoard.findPath(board, element);
     Transforms.setNode(board, newElement, path);
 };
@@ -2281,7 +2337,7 @@ const removeEmoji = (board, element, emojiItem) => {
 };
 const replaceEmoji = (board, element, oldEmoji, newEmoji) => {
     const newElement = {
-        data: { topic: element.data.topic }
+        data: { ...element.data }
     };
     const newEmojis = element.data.emojis.map(value => {
         if (value === oldEmoji) {
@@ -2294,6 +2350,15 @@ const replaceEmoji = (board, element, oldEmoji, newEmoji) => {
     Transforms.setNode(board, newElement, path);
 };
 
+const removeImage = (board, element) => {
+    const newElement = {
+        data: { ...element.data }
+    };
+    delete newElement.data.image;
+    const path = PlaitBoard.findPath(board, element);
+    Transforms.setNode(board, newElement, path);
+};
+
 const MindTransforms = {
     setLayout,
     setTopic,
@@ -2307,7 +2372,8 @@ const MindTransforms = {
     removeElements,
     insertNodes,
     insertAbstractNodes,
-    setRightNodeCountByRefs
+    setRightNodeCountByRefs,
+    removeImage
 };
 
 class BaseDrawer {
@@ -2626,6 +2692,88 @@ class CollapseDrawer extends BaseDrawer {
     }
 }
 
+class MindImageBaseComponent {
+    get nativeElement() {
+        return this.elementRef.nativeElement;
+    }
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    ngOnInit() { }
+}
+MindImageBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindImageBaseComponent, deps: [{ token: i0.ElementRef }], 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" }, 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 }]; }, propDecorators: { imageItem: [{
+                type: Input
+            }], board: [{
+                type: Input
+            }], element: [{
+                type: Input
+            }] } });
+
+class NodeImageDrawer {
+    constructor(board, viewContainerRef) {
+        this.board = board;
+        this.viewContainerRef = viewContainerRef;
+        this.componentRef = null;
+    }
+    drawImage(element) {
+        this.destroy();
+        if (MindElement.hasImage(element)) {
+            this.g = createG();
+            const foreignRectangle = getImageForeignRectangle(this.board, element);
+            const foreignObject = createForeignObject(foreignRectangle.x, foreignRectangle.y, foreignRectangle.width, foreignRectangle.height);
+            this.g.append(foreignObject);
+            if (this.componentRef) {
+                this.componentRef.destroy();
+                this.componentRef = null;
+            }
+            const componentType = this.board.getPluginOptions(WithMindPluginKey).imageComponentType || MindImageBaseComponent;
+            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;
+            foreignObject.append(this.componentRef.instance.nativeElement);
+            return this.g;
+        }
+        return undefined;
+    }
+    drawActive(element) {
+        this.destroyActive();
+        const imageRectangle = getImageForeignRectangle(this.board, element);
+        const rectangle = RectangleClient.getOutlineRectangle(imageRectangle, -1);
+        const roughSVG = PlaitBoard.getRoughSVG(this.board);
+        this.activeG = roughSVG.rectangle(rectangle.x, rectangle.y, rectangle.width, rectangle.height, {
+            stroke: PRIMARY_COLOR,
+            fill: '',
+            fillStyle: 'solid'
+        });
+        this.g?.append(this.activeG);
+    }
+    destroyActive() {
+        this.activeG?.remove();
+    }
+    destroy() {
+        if (this.g) {
+            this.g.remove();
+        }
+        if (this.componentRef) {
+            this.componentRef.destroy();
+            this.componentRef = null;
+        }
+    }
+}
+
 // 1. When the text at the end has an italic attribute, the text is partially covered
 // 2. There will be some differences in the width measured by different browsers
 const WIDTH_BUFFER = 4;
@@ -2645,7 +2793,8 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         this.nodeInsertDrawer = new NodeInsertDrawer(this.board);
         this.activeDrawer = new NodeActiveDrawer(this.board);
         this.collapseDrawer = new CollapseDrawer(this.board);
-        const plugins = this.board.getMindOptions().textPlugins;
+        this.imageDrawer = new NodeImageDrawer(this.board, this.viewContainerRef);
+        const plugins = this.board.getPluginOptions(WithMindPluginKey).textPlugins;
         this.textManage = new TextManage(this.board, this.viewContainerRef, () => {
             const rect = getTopicRectangleByNode(this.board, this.node);
             return rect;
@@ -2675,14 +2824,17 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: this.textManage.isEditing });
         this.drawEmojis();
         this.drawExtend();
+        this.drawImage();
         if (PlaitMind.isMind(this.context.parent)) {
             this.g.classList.add('branch');
         }
     }
     editTopic() {
         this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: true });
-        this.textManage.edit(() => {
-            this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: false });
+        this.textManage.edit((origin) => {
+            if (origin === ExitOrigin.default) {
+                this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: false });
+            }
         });
     }
     onContextChanged(value, previous) {
@@ -2695,6 +2847,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
             this.drawShape();
             this.drawLink();
             this.drawEmojis();
+            this.drawImage();
             this.drawExtend();
             this.textManage.updateText(this.element.data.topic);
             this.textManage.updateRectangle();
@@ -2716,6 +2869,12 @@ class MindNodeComponent extends PlaitPluginElementComponent {
             this.g.append(g);
         }
     }
+    drawImage() {
+        const image = this.imageDrawer.drawImage(this.element);
+        if (image) {
+            this.g.append(image);
+        }
+    }
     drawShape() {
         this.destroyShape();
         const shape = getShapeByElement(this.board, this.node.origin);
@@ -2784,6 +2943,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         super.ngOnDestroy();
         this.textManage.destroy();
         this.nodeEmojisDrawer.destroy();
+        this.imageDrawer.destroy();
         this.destroy$.next();
         this.destroy$.complete();
         if (ELEMENT_TO_NODE.get(this.element) === this.node) {
@@ -2971,12 +3131,11 @@ const withNodeDnd = (board) => {
             !AbstractNode.isAbstract(targetElement)) {
             const targetElements = selectedElements.filter(element => MindElement.isMindElement(board, element) && !element.isRoot && !AbstractNode.isAbstract(element));
             const isMultiple = selectedElements.length > 0 && selectedElements.includes(targetElement);
-            const isSingle = !isMultiple && selectedElements.length === 0;
             if (isMultiple) {
                 activeElements = targetElements;
                 startPoint = point;
             }
-            else if (isSingle) {
+            else {
                 activeElements = [targetElement];
                 startPoint = point;
             }
@@ -3030,6 +3189,7 @@ const withNodeDnd = (board) => {
             }
             if (dropTarget) {
                 const targetPathRef = board.pathRef(targetPath);
+                const targetPreviousPathRef = Path.hasPrevious(targetPath) && board.pathRef(Path.previous(targetPath));
                 const targetElementPathRef = board.pathRef(PlaitBoard.findPath(board, dropTarget.target));
                 let abstractRefs = getValidAbstractRefs(board, firstLevelElements);
                 const normalElements = firstLevelElements
@@ -3067,9 +3227,16 @@ const withNodeDnd = (board) => {
                 let insertPath = targetPathRef.current;
                 const parentPath = Path.parent(targetPathRef.current || targetPath);
                 if (!insertPath) {
-                    const parent = PlaitNode.get(board, parentPath);
-                    const children = getNonAbstractChildren(parent);
-                    insertPath = [...parentPath, children.length || 0];
+                    //当插入位置和选中节点位置相同时，使用记录的 previousPath
+                    const previousPath = targetPreviousPathRef && targetPreviousPathRef.unref();
+                    if (previousPath) {
+                        insertPath = Path.next(previousPath);
+                    }
+                    else {
+                        const parent = PlaitNode.get(board, parentPath);
+                        const children = getNonAbstractChildren(parent);
+                        insertPath = [...parentPath, children.length || 0];
+                    }
                 }
                 MindTransforms.insertNodes(board, normalElements, insertPath);
                 if (abstractRefs.length) {
@@ -3325,9 +3492,7 @@ const withMindExtend = (board) => {
     newBoard.drawEmoji = (emoji, element) => {
         throw new Error('Not implement drawEmoji method error.');
     };
-    newBoard.getMindOptions = () => {
-        return { spaceBetweenEmojis: 4, emojiPadding: 0 };
-    };
+    board.setPluginOptions(WithMindPluginKey, { spaceBetweenEmojis: 4, emojiPadding: 0 });
     return newBoard;
 };
 
@@ -3476,38 +3641,18 @@ const withMindHotkey = (board) => {
                 event.preventDefault();
                 const targetMindElements = selectedElements.filter(el => MindElement.isMindElement(board, el));
                 const firstLevelElements = getFirstLevelElement(targetMindElements);
-                const deletableElements = firstLevelElements.reverse();
-                const abstractRefs = deleteElementHandleAbstract(board, deletableElements);
-                MindTransforms.setAbstractsByRefs(board, abstractRefs);
-                const refs = deleteElementsHandleRightNodeCount(board, targetMindElements);
-                MindTransforms.setRightNodeCountByRefs(board, refs);
-                MindTransforms.removeElements(board, targetMindElements);
-                let activeElement;
-                if (AbstractNode.isAbstract(firstLevelElements[0])) {
-                    const parent = MindElement.getParent(firstLevelElements[0]);
-                    activeElement = parent.children[firstLevelElements[0].start];
-                }
-                const firstElement = firstLevelElements[0];
-                const firstElementParent = MindElement.findParent(firstElement);
-                const hasSameParent = firstLevelElements.every(element => {
-                    return MindElement.findParent(element) === firstElementParent;
-                });
-                if (firstElementParent && hasSameParent && !activeElement) {
-                    const firstElementIndex = firstElementParent.children.indexOf(firstElement);
-                    const childrenCount = firstElementParent.children.length;
-                    // active parent element
-                    if (childrenCount === firstLevelElements.length) {
-                        activeElement = firstElementParent;
-                    }
-                    else {
-                        if (firstElementIndex > 0) {
-                            activeElement = firstElementParent.children[firstElementIndex - 1];
-                        }
+                if (firstLevelElements.length > 0) {
+                    const deletableElements = [...firstLevelElements].reverse();
+                    const abstractRefs = deleteElementHandleAbstract(board, deletableElements);
+                    MindTransforms.setAbstractsByRefs(board, abstractRefs);
+                    const refs = deleteElementsHandleRightNodeCount(board, targetMindElements);
+                    MindTransforms.setRightNodeCountByRefs(board, refs);
+                    MindTransforms.removeElements(board, targetMindElements);
+                    const nextSelected = getNextSelectedElement(board, firstLevelElements);
+                    if (nextSelected) {
+                        addSelectedElement(board, nextSelected);
                     }
                 }
-                if (activeElement) {
-                    addSelectedElement(board, activeElement);
-                }
                 return;
             }
             if (!isVirtualKey(event) && !isSpaceHotkey(event) && isSingleSelection) {
@@ -3520,6 +3665,36 @@ const withMindHotkey = (board) => {
     };
     return board;
 };
+const getNextSelectedElement = (board, firstLevelElements) => {
+    let activeElement;
+    const firstLevelElement = firstLevelElements[0];
+    const firstLevelElementPath = PlaitBoard.findPath(board, firstLevelElement);
+    let nextSelectedPath = firstLevelElementPath;
+    if (Path.hasPrevious(firstLevelElementPath)) {
+        nextSelectedPath = Path.previous(firstLevelElementPath);
+    }
+    if (AbstractNode.isAbstract(firstLevelElement)) {
+        const parent = MindElement.getParent(firstLevelElement);
+        if (!firstLevelElements.includes(parent.children[firstLevelElement.start])) {
+            activeElement = parent.children[firstLevelElement.start];
+        }
+    }
+    try {
+        if (!activeElement) {
+            activeElement = PlaitNode.get(board, nextSelectedPath);
+        }
+    }
+    catch (error) { }
+    const firstElement = firstLevelElements[0];
+    const firstElementParent = MindElement.findParent(firstElement);
+    const hasSameParent = firstLevelElements.every(element => {
+        return MindElement.findParent(element) === firstElementParent;
+    });
+    if (firstElementParent && hasSameParent && !activeElement) {
+        activeElement = firstElementParent;
+    }
+    return activeElement;
+};
 const isExpandHotkey = (event) => {
     return isKeyHotkey('mod+/', event);
 };
@@ -3595,6 +3770,52 @@ const removeHovered = (element) => {
     }
 };
 
+const withMindImage = (board) => {
+    let selectedImageElement = null;
+    const { keydown, mousedown } = board;
+    board.mousedown = (event) => {
+        if (PlaitBoard.isReadonly(board) || !isMainPointer(event) || !PlaitBoard.isPointer(board, PlaitPointerType.selection)) {
+            mousedown(event);
+            return;
+        }
+        const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+        const range = { anchor: point, focus: point };
+        const hitElements = getHitElements(board, { ranges: [range] });
+        const hasImage = hitElements.length && MindElement.hasImage(hitElements[0]);
+        const hitImage = hasImage && isHitImage(board, hitElements[0], range);
+        if (hitImage) {
+            const currentOptions = board.getPluginOptions(PlaitPluginKey.withSelection);
+            board.setPluginOptions(PlaitPluginKey.withSelection, {
+                isDisabledSelect: true
+            });
+            setTimeout(() => {
+                board.setPluginOptions(PlaitPluginKey.withSelection, { ...currentOptions });
+            }, 0);
+            selectedImageElement = hitElements[0];
+            const component = PlaitElement.getComponent(selectedImageElement);
+            component.imageDrawer.drawActive(selectedImageElement);
+            clearSelectedElement(board);
+        }
+        else {
+            if (selectedImageElement) {
+                const component = PlaitElement.getComponent(selectedImageElement);
+                component && component.imageDrawer.destroyActive();
+            }
+            selectedImageElement = null;
+        }
+        mousedown(event);
+    };
+    board.keydown = (event) => {
+        if (!PlaitBoard.isReadonly(board) && selectedImageElement && (hotkeys.isDeleteBackward(event) || hotkeys.isDeleteForward(event))) {
+            MindTransforms.removeImage(board, selectedImageElement);
+            selectedImageElement = null;
+            return;
+        }
+        keydown(event);
+    };
+    return board;
+};
+
 const withMind = (board) => {
     const { drawElement, dblclick, keydown, insertFragment, setFragment, deleteFragment, isHitSelection, getRectangle, isMovable, isRecursion } = board;
     board.drawElement = (context) => {
@@ -3712,7 +3933,7 @@ const withMind = (board) => {
         MindTransforms.removeElements(board, selectedElements);
         deleteFragment(data);
     };
-    return withNodeHover(withMindHotkey(withMindExtend(withCreateMind(withAbstract(withNodeDnd(board))))));
+    return withMindImage(withNodeHover(withMindHotkey(withMindExtend(withCreateMind(withAbstract(withNodeDnd(board)))))));
 };
 
 class MindEmojiBaseComponent {
@@ -3766,5 +3987,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, MindModule, MindNode, MindNodeComponent, MindPointerType, MindQueries, MindRetroThemeColor, MindSoftThemeColor, MindStarryThemeColor, MindThemeColor, MindThemeColors, MindTransforms, NODE_MIN_WIDTH, 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, addActiveOnDragOrigin, 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, getFirstLevelElement, getHitAbstractHandle, getInCorrectLayoutDirection, getLayoutDirection$1 as getLayoutDirection, getLayoutReverseDirection, getLocationScope, getMindThemeColor, getNextBranchColor, getOverallAbstracts, getPathByDropTarget, getRectangleByElement, getRectangleByNode, getRectangleByResizingLocation, getRelativeStartEndByAbstractRef, getRootLayout, getShapeByElement, getStrokeByMindElement, getTopicRectangleByElement, getTopicRectangleByNode, getValidAbstractRefs, handleTouchedAbstract, hasAfterDraw, hasPreviousOrNextOfDropPath, insertElementHandleAbstract, insertElementHandleRightNodeCount, insertMindElement, isChildElement, isChildRight, isChildUp, isCorrectLayout, isDragging, isDropStandardRight, isHitEmojis, isHitMindElement, isInRightBranchOfStandardLayout, isMixedLayout, isSetAbstract, isValidTarget, isVirtualKey, removeActiveOnDragOrigin, separateChildren, setIsDragging, 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, NODE_MIN_WIDTH, 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, 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, getFirstLevelElement, getHitAbstractHandle, getImageForeignRectangle, getInCorrectLayoutDirection, getLayoutDirection$1 as getLayoutDirection, getLayoutReverseDirection, getLocationScope, getMindThemeColor, getNextBranchColor, getOverallAbstracts, getPathByDropTarget, getRectangleByElement, getRectangleByNode, getRectangleByResizingLocation, getRelativeStartEndByAbstractRef, getRootLayout, getShapeByElement, getStrokeByMindElement, 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, separateChildren, setIsDragging, withMind, withMindExtend };
 //# sourceMappingURL=plait-mind.mjs.map