@plait/mind 0.2.0-next.9 → 0.2.0

package/fesm2020/plait-mind.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, NgModule, Directive, Input } from '@angular/core';
 import * as i2 from '@plait/core';
-import { distanceBetweenPointAndRectangle, PlaitBoard, PlaitNode, NODE_TO_PARENT, Path, ELEMENT_TO_COMPONENT, PlaitElement, Transforms, idCreator, isNullOrUndefined, clearSelectedElement, addSelectedElement, drawRoundRectangle, getRectangleByElements, RectangleClient, getSelectedElements, createG, drawAbstractRoundRectangle, PlaitPluginElementComponent, PlaitPointerType, NODE_TO_INDEX, createText, IS_TEXT_EDITABLE, MERGING, transformPoint, toPoint, depthFirstRecursion, PlaitModule, distanceBetweenPointAndPoint, CLIP_BOARD_FORMAT_KEY, BOARD_TO_HOST, removeSelectedElement, PlaitHistoryBoard, hotkeys } from '@plait/core';
+import { distanceBetweenPointAndRectangle, PlaitBoard, PlaitNode, NODE_TO_PARENT, Path, ELEMENT_TO_COMPONENT, PlaitElement, Transforms, idCreator, isNullOrUndefined, clearSelectedElement, addSelectedElement, drawRoundRectangle, getRectangleByElements, RectangleClient, getSelectedElements, createG, drawAbstractRoundRectangle, PlaitPluginElementComponent, PlaitPointerType, NODE_TO_INDEX, createText, IS_TEXT_EDITABLE, MERGING, transformPoint, toPoint, depthFirstRecursion, PlaitModule, distanceBetweenPointAndPoint, updateForeignObject as updateForeignObject$1, CLIP_BOARD_FORMAT_KEY, BOARD_TO_HOST, Selection, removeSelectedElement, PlaitHistoryBoard, hotkeys } from '@plait/core';
 import { MindLayoutType, AbstractNode, getAbstractLayout, isIndentedLayout, isStandardLayout, isHorizontalLogicLayout, isVerticalLogicLayout, isTopLayout, isLeftLayout, isBottomLayout, isRightLayout, isHorizontalLayout, getNonAbstractChildren, getCorrectStartEnd, ConnectingPosition, GlobalLayout } from '@plait/layouts';
 import { getSizeByText, ROOT_DEFAULT_HEIGHT, TEXT_DEFAULT_HEIGHT, drawRichtext, updateForeignObject, createForeignObject, updateRichText, setFullSelectionAndFocus, getRichtextContentSize, hasEditableTarget, RichtextModule } from '@plait/richtext';
 import { fromEvent, Subject, timer } from 'rxjs';
@@ -129,18 +129,18 @@ const getBranchLayouts = (board, element) => {
         // TODO: getCorrectLayoutByElement 含有递归操作，getBranchLayouts 本身也有递归操作，有待优化
         layouts.unshift(getCorrectLayoutByElement(board, element));
     }
-    let parent = findParentElement(element);
+    let parent = MindElement.findParent(element);
     while (parent) {
         if (parent.layout) {
             layouts.unshift(parent.layout);
         }
-        parent = findParentElement(parent);
+        parent = MindElement.findParent(parent);
     }
     return layouts;
 };
 
 const getAvailableSubLayoutsByElement = (board, element) => {
-    const parentElement = findParentElement(element);
+    const parentElement = MindElement.findParent(element);
     if (parentElement) {
         const branchLayouts = getBranchLayouts(board, parentElement);
         if (branchLayouts[0] === MindLayoutType.standard) {
@@ -266,8 +266,8 @@ const getLayoutByElement = (element) => {
     if (layout) {
         return layout;
     }
-    const parent = MindElement.getParent(element);
-    if (AbstractNode.isAbstract(element)) {
+    const parent = !PlaitMind.isMind(element) && MindElement.getParent(element);
+    if (AbstractNode.isAbstract(element) && parent) {
         return getAbstractLayout(getLayoutByElement(parent));
     }
     if (parent) {
@@ -314,6 +314,13 @@ const MindElement = {
         const parent = NODE_TO_PARENT.get(node);
         return parent;
     },
+    findParent(node) {
+        if (PlaitMind.isMind(node)) {
+            return undefined;
+        }
+        const parent = NODE_TO_PARENT.get(node);
+        return parent;
+    },
     getRoot(board, element) {
         const path = PlaitBoard.findPath(board, element);
         return PlaitNode.get(board, path.slice(0, 1));
@@ -336,6 +343,13 @@ const MindElement = {
         }
         return node;
     },
+    findParentNode(element) {
+        if (PlaitMind.isMind(element)) {
+            return undefined;
+        }
+        const parent = MindElement.getParent(element);
+        return MindElement.getNode(parent);
+    },
     hasEmojis(element) {
         if (element.data.emojis) {
             return true;
@@ -365,15 +379,6 @@ const MindNode = {
             node = node.children[p];
         }
         return node;
-    },
-    isEquals(node, otherNode) {
-        const hasSameSize = node.x === otherNode.x && node.y === otherNode.y && node.width === otherNode.width && node.height === otherNode.height;
-        const hasSameOrigin = node.origin === otherNode.origin;
-        let hasSameParentOriginChildren = false;
-        if (node.parent && otherNode.parent) {
-            hasSameParentOriginChildren = node.parent.origin.children == otherNode.parent.origin.children;
-        }
-        return hasSameSize && hasSameOrigin && hasSameParentOriginChildren;
     }
 };
 
@@ -566,7 +571,7 @@ const setAbstractByStandardLayout = (board, element) => {
     }
 };
 const insertAbstract = (board, elements) => {
-    let elementGroup = filterChildElement(elements);
+    let elementGroup = getFirstLevelElement(elements);
     const { parentElements, abstractIncludedGroups } = divideElementByParent(elementGroup);
     abstractIncludedGroups.forEach((group, index) => {
         const groupParent = parentElements[index];
@@ -698,21 +703,14 @@ const MindTransforms = {
     setAbstractByStandardLayout
 };
 
-function findParentElement(element) {
-    const component = PlaitElement.getComponent(element);
-    if (component && component.parent) {
-        return component.parent.origin;
-    }
-    return undefined;
-}
 function findUpElement(element) {
     let branch;
     let root = element;
-    let parent = findParentElement(element);
+    let parent = MindElement.findParent(element);
     while (parent) {
         branch = root;
         root = parent;
-        parent = findParentElement(parent);
+        parent = MindElement.findParent(parent);
     }
     return { root, branch };
 }
@@ -723,16 +721,16 @@ const getChildrenCount = (element) => {
     return count + element.children.length;
 };
 const isChildElement = (origin, child) => {
-    let parent = findParentElement(child);
+    let parent = MindElement.findParent(child);
     while (parent) {
         if (parent === origin) {
             return true;
         }
-        parent = findParentElement(parent);
+        parent = MindElement.findParent(parent);
     }
     return false;
 };
-const filterChildElement = (elements) => {
+const getFirstLevelElement = (elements) => {
     let result = [];
     elements.forEach(element => {
         const isChild = elements.some(node => {
@@ -822,7 +820,7 @@ const changeRightNodeCount = (board, parentPath, changeNumber) => {
     }, parentPath);
 };
 const shouldChangeRightNodeCount = (selectedElement) => {
-    const parentElement = findParentElement(selectedElement);
+    const parentElement = MindElement.findParent(selectedElement);
     if (parentElement) {
         const nodeIndex = parentElement.children.findIndex(item => item.id === selectedElement.id);
         if (parentElement.isRoot &&
@@ -908,7 +906,7 @@ const findLastChild = (child) => {
     return result;
 };
 const deleteSelectedELements = (board, selectedElements) => {
-    const deletableElements = filterChildElement(selectedElements).reverse();
+    const deletableElements = getFirstLevelElement(selectedElements).reverse();
     const abstractRefs = deleteElementHandleAbstract(board, deletableElements);
     MindTransforms.setAbstractsByRefs(board, abstractRefs);
     //翻转，从下到上修改，防止找不到 path
@@ -943,51 +941,28 @@ const divideElementByParent = (elements) => {
     return { parentElements, abstractIncludedGroups };
 };
 
-const getNodeShapeByElement = (element) => {
-    let nodeShape = element.shape;
-    if (nodeShape) {
-        return nodeShape;
+const getAvailableProperty = (board, element, propertyKey) => {
+    const ancestors = MindElement.getAncestors(board, element);
+    ancestors.unshift(element);
+    const ancestor = ancestors.find(value => value[propertyKey]);
+    if (ancestor) {
+        return ancestor[propertyKey];
     }
-    let parent = findParentElement(element);
-    while (parent) {
-        if (parent.shape) {
-            return parent.shape;
-        }
-        parent = findParentElement(parent);
+    else {
+        return undefined;
     }
-    return MindElementShape.roundRectangle;
 };
 
 /**
  * Processing of branch color, width, style, etc. of the mind node
  */
 const getBranchColorByMindElement = (board, element) => {
-    const ancestors = MindElement.getAncestors(board, element);
-    ancestors.unshift(element);
-    const ancestor = ancestors.find(value => value.branchColor);
-    if (ancestor && ancestor.branchColor) {
-        return ancestor.branchColor;
-    }
-    const root = ancestors[ancestors.length - 1];
-    const branch = ancestors[ancestors.length - 2];
-    if (branch) {
-        const index = root.children.indexOf(branch);
-        const length = BRANCH_COLORS.length;
-        const remainder = index % length;
-        return BRANCH_COLORS[remainder];
-    }
-    else {
-        throw new Error('root element should not have branch color');
-    }
+    const branchColor = getAvailableProperty(board, element, 'branchColor');
+    return branchColor || getDefaultBranchColor(board, element);
 };
 const getBranchWidthByMindElement = (board, element) => {
-    const ancestors = MindElement.getAncestors(board, element);
-    ancestors.unshift(element);
-    const ancestor = ancestors.find(value => value.branchColor);
-    if (ancestor && ancestor.branchWidth) {
-        return ancestor.branchWidth;
-    }
-    return BRANCH_WIDTH;
+    const branchWidth = getAvailableProperty(board, element, 'branchWidth');
+    return branchWidth || BRANCH_WIDTH;
 };
 const getAbstractBranchWidth = (board, element) => {
     if (!isNullOrUndefined(element.branchWidth)) {
@@ -1003,29 +978,33 @@ const getAbstractBranchColor = (board, element) => {
 };
 const getNextBranchColor = (root) => {
     const index = root.children.length;
+    return getDefaultBranchColorByIndex(index);
+};
+const getDefaultBranchColor = (board, element) => {
+    const path = PlaitBoard.findPath(board, element);
+    return getDefaultBranchColorByIndex(path[1]);
+};
+const getDefaultBranchColorByIndex = (index) => {
     const length = BRANCH_COLORS.length;
     const remainder = index % length;
     return BRANCH_COLORS[remainder];
 };
 
 const getStrokeByMindElement = (board, element) => {
+    if (PlaitMind.isMind(element)) {
+        return element.strokeColor || DefaultRootStyle.strokeColor;
+    }
     const ancestors = MindElement.getAncestors(board, element);
     ancestors.unshift(element);
     const ancestor = ancestors.find(value => value.strokeColor);
-    if (ancestor && ancestor.strokeColor) {
+    if (ancestor && ancestor.strokeColor && !PlaitMind.isMind(ancestor)) {
         return ancestor.strokeColor;
     }
-    const root = ancestors[ancestors.length - 1];
-    const branch = ancestors[ancestors.length - 2];
-    if (branch) {
-        const index = root.children.indexOf(branch);
-        const length = BRANCH_COLORS.length;
-        const remainder = index % length;
-        return BRANCH_COLORS[remainder];
-    }
-    else {
-        return DefaultRootStyle.strokeColor;
-    }
+    return getDefaultBranchColor(board, element);
+};
+const getShapeByElement = (board, element) => {
+    const shape = getAvailableProperty(board, element, 'shape');
+    return shape || MindElementShape.roundRectangle;
 };
 
 function isVirtualKey(e) {
@@ -1054,7 +1033,7 @@ function drawLink(board, node, child, defaultStroke = null, isHorizontal = true,
         endY = endNode.y + endNode.height / 2;
         if (node.parent &&
             isIndentedLayout(MindQueries.getLayoutByElement(node.parent?.origin)) &&
-            getNodeShapeByElement(node.origin) === MindElementShape.underline) {
+            getShapeByElement(board, node.origin) === MindElementShape.underline) {
             if (isChildRight(node, child)) {
                 beginY = node.y + node.height - node.vGap;
             }
@@ -1098,7 +1077,7 @@ function drawLink(board, node, child, defaultStroke = null, isHorizontal = true,
             [endX - (beginNode.hGap + endNode.hGap) / 2, endY],
             [endX, endY]
         ];
-        const shape = getNodeShapeByElement(child.origin);
+        const shape = getShapeByElement(board, child.origin);
         if (!node.origin.isRoot) {
             if (node.x > child.x) {
                 curve = [
@@ -1198,8 +1177,9 @@ const drawPlaceholderDropNodeG = (board, dropTarget, fakeDropNodeG) => {
     if (dropTarget.detectResult && ['right', 'left'].includes(dropTarget.detectResult)) {
         drawStraightDropNodeG(board, targetRect, dropTarget.detectResult, targetComponent, fakeDropNodeG);
     }
-    if (targetComponent.parent && dropTarget.detectResult && ['top', 'bottom'].includes(dropTarget.detectResult)) {
-        const parentComponent = PlaitElement.getComponent(targetComponent.parent.origin);
+    const targetParent = MindElement.findParent(targetComponent.element);
+    if (targetParent && dropTarget.detectResult && ['top', 'bottom'].includes(dropTarget.detectResult)) {
+        const parentComponent = PlaitElement.getComponent(targetParent);
         const targetIndex = parentComponent.node.origin.children.indexOf(targetComponent.node.origin);
         drawCurvePlaceholderDropNodeG(board, targetRect, dropTarget.detectResult, targetIndex, targetComponent, parentComponent, fakeDropNodeG);
     }
@@ -1241,7 +1221,7 @@ const drawCurvePlaceholderDropNodeG = (board, targetRect, detectResult, targetIn
     }
     if (isVerticalLogicLayout(layout)) {
         parentComponent = targetComponent;
-        targetComponent = PlaitElement.getComponent(targetComponent.parent.origin);
+        targetComponent = PlaitElement.getComponent(MindElement.getParent(targetComponent.element));
         fakeX = parentComponent.node.x;
         width = parentComponent.node.width;
         const vGap = BASE * 6 + strokeWidth;
@@ -1362,7 +1342,7 @@ const drawStraightDropNodeG = (board, targetRect, detectResult, targetComponent,
                  *      b. 最后一个节点的右侧：固定值（来源于 getMainAxle，第二级节点：BASE * 8，其他 BASE * 3 + strokeWidth / 2）；
                  */
                 fakeY = targetComponent.node.y;
-                const parentComponent = PlaitElement.getComponent(targetComponent.parent.origin);
+                const parentComponent = PlaitElement.getComponent(MindElement.getParent(targetComponent.element));
                 const targetIndex = parentComponent.node.origin.children.indexOf(targetComponent.node.origin);
                 if (detectResult === 'left') {
                     let offsetX = 0;
@@ -1872,7 +1852,7 @@ function handleTouchedAbstract(board, touchedAbstract, endPoint) {
 function drawIndentedLink(board, node, child, defaultStroke = null, needDrawUnderline = true) {
     const branchWidth = getBranchWidthByMindElement(board, child.origin);
     const branchColor = defaultStroke || getBranchColorByMindElement(board, child.origin);
-    const isUnderlineShape = getNodeShapeByElement(child.origin) === MindElementShape.underline;
+    const isUnderlineShape = getShapeByElement(board, child.origin) === MindElementShape.underline;
     let beginX, beginY, endX, endY, beginNode = node, endNode = child;
     const beginRectangle = getRectangleByNode(beginNode);
     const endRectangle = getRectangleByNode(endNode);
@@ -2021,8 +2001,10 @@ function drawLogicLink(board, node, parent, isHorizontal) {
     const branchColor = getBranchColorByMindElement(board, node.origin);
     const branchWidth = getBranchWidthByMindElement(board, node.origin);
     const hasStraightLine = !parent.origin.isRoot;
-    const hasUnderlineShape = node.origin.shape === MindElementShape.underline;
-    const hasUnderlineShapeOfParent = parent.origin.shape === MindElementShape.underline;
+    const parentShape = getShapeByElement(board, parent.origin);
+    const shape = node.origin.shape ? node.origin.shape : parentShape;
+    const hasUnderlineShape = shape === MindElementShape.underline;
+    const hasUnderlineShapeOfParent = parentShape === MindElementShape.underline;
     const nodeClient = getRectangleByNode(node);
     const parentClient = getRectangleByNode(parent);
     const linkDirection = getLayoutDirection(node, isHorizontal);
@@ -2062,7 +2044,7 @@ function drawLogicLink(board, node, parent, isHorizontal) {
     return PlaitBoard.getRoughSVG(board).curve(points, { stroke: branchColor, strokeWidth: branchWidth });
 }
 
-function getEmojisRectangle(board, element) {
+function getEmojisWidthHeight(board, element) {
     const options = board.getMindOptions();
     const count = element.data.emojis.length;
     const fontSize = getEmojiFontSize(element);
@@ -2079,6 +2061,31 @@ function getEmojiFontSize(element) {
         return 14 + 2;
     }
 }
+function getEmojiRectangle(board, element) {
+    let { x, y } = getRectangleByNode(MindElement.getNode(element));
+    x = x + NodeSpace.getEmojiLeftSpace(board, element);
+    const { width, height } = getEmojisWidthHeight(board, element);
+    return {
+        x,
+        y,
+        width,
+        height
+    };
+}
+function getEmojiForeignRectangle(board, element) {
+    let { x, y } = getRectangleByNode(MindElement.getNode(element));
+    x = x + NodeSpace.getEmojiLeftSpace(board, element);
+    const { width, height } = getEmojisWidthHeight(board, element);
+    return {
+        x,
+        y,
+        width,
+        height: height + NodeSpace.getEmojiTopSpace(element) * 2
+    };
+}
+const isHitEmojis = (board, element, point) => {
+    return RectangleClient.isHit(RectangleClient.toRectangleClient([point, point]), getEmojiRectangle(board, element));
+};
 
 const NodeDefaultSpace = {
     horizontal: {
@@ -2098,26 +2105,30 @@ const RootDefaultSpace = {
         nodeAndText: BASE * 2
     }
 };
-const getHorizontalSpaceBetweenNodeAndText = (element) => {
+const getHorizontalSpaceBetweenNodeAndText = (board, element) => {
     const isMind = PlaitMind.isMind(element);
     const nodeAndText = isMind ? RootDefaultSpace.horizontal.nodeAndText : NodeDefaultSpace.horizontal.nodeAndText;
     return nodeAndText;
 };
-const getHorizontalSpaceEmojiAndText = (element) => {
-    const isMind = PlaitMind.isMind(element);
-    const emojiAndText = isMind ? RootDefaultSpace.horizontal.emojiAndText : NodeDefaultSpace.horizontal.emojiAndText;
-    return emojiAndText;
-};
 const getVerticalSpaceBetweenNodeAndText = (element) => {
     const isMind = PlaitMind.isMind(element);
     const nodeAndText = isMind ? RootDefaultSpace.vertical.nodeAndText : NodeDefaultSpace.vertical.nodeAndText;
     return nodeAndText;
 };
+const getSpaceEmojiAndText = (element) => {
+    const isMind = PlaitMind.isMind(element);
+    const emojiAndText = isMind ? RootDefaultSpace.horizontal.emojiAndText : NodeDefaultSpace.horizontal.emojiAndText;
+    return emojiAndText;
+};
 const NodeSpace = {
     getNodeWidth(board, element) {
-        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(element);
+        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
         if (MindElement.hasEmojis(element)) {
-            return nodeAndText + getEmojisRectangle(board, element).width + getHorizontalSpaceEmojiAndText(element) + element.width + nodeAndText;
+            return (NodeSpace.getEmojiLeftSpace(board, element) +
+                getEmojisWidthHeight(board, element).width +
+                getSpaceEmojiAndText(element) +
+                element.width +
+                nodeAndText);
         }
         return nodeAndText + element.width + nodeAndText;
     },
@@ -2125,31 +2136,32 @@ const NodeSpace = {
         const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
         return nodeAndText + element.height + nodeAndText;
     },
-    getTextHorizontalSpace(board, element) {
-        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(element);
+    getTextLeftSpace(board, element) {
+        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
         if (MindElement.hasEmojis(element)) {
-            return nodeAndText + getEmojisRectangle(board, element).width + getHorizontalSpaceEmojiAndText(element);
+            return NodeSpace.getEmojiLeftSpace(board, element) + getEmojisWidthHeight(board, element).width + getSpaceEmojiAndText(element);
         }
         else {
             return nodeAndText;
         }
     },
-    getTextVerticalSpace(element) {
+    getTextTopSpace(element) {
         const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
         return nodeAndText;
     },
-    getEmojiHorizontalSpace(element) {
-        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(element);
-        return nodeAndText;
+    getEmojiLeftSpace(board, element) {
+        const options = board.getMindOptions();
+        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
+        return nodeAndText - options.emojiPadding;
     },
-    getEmojiVerticalSpace(element) {
+    getEmojiTopSpace(element) {
         const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
         return nodeAndText;
     }
 };
 
 function drawMindNodeRichtext(board, node, viewContainerRef) {
-    const { x, y } = getRichtextRectangleByNode(board, node);
+    const { x, y, width, height } = getRichtextRectangleByNode(board, node);
     const classList = [];
     if (node.origin.isRoot) {
         classList.push('root-node');
@@ -2162,7 +2174,7 @@ function drawMindNodeRichtext(board, node, viewContainerRef) {
         classList.push('child-node');
     }
     // COMPAT: last character can not show in safari browser
-    return drawRichtext(x, y, Math.ceil(node.origin.width), Math.ceil(node.origin.height), node.origin.data.topic, viewContainerRef, classList);
+    return drawRichtext(x, y, width, height, node.origin.data.topic, viewContainerRef, classList);
 }
 function updateMindNodeTopicSize(board, node, g, isEditable) {
     const { x, y, width, height } = getRichtextRectangleByNode(board, node);
@@ -2172,14 +2184,16 @@ function updateMindNodeTopicSize(board, node, g, isEditable) {
     }
     else {
         // COMPAT: last character can not show in safari browser
-        updateForeignObject(g, Math.ceil(node.origin.width), Math.ceil(node.origin.height), x, y);
+        updateForeignObject(g, width, height, x, y);
     }
 }
 function getRichtextRectangleByNode(board, node) {
-    let { x, y, width, height } = getRectangleByNode(node);
-    x = x + NodeSpace.getTextHorizontalSpace(board, node.origin);
-    y = y + NodeSpace.getTextVerticalSpace(node.origin);
-    return { width, height, x, y };
+    let { x, y } = getRectangleByNode(node);
+    x = x + NodeSpace.getTextLeftSpace(board, node.origin);
+    y = y + NodeSpace.getTextTopSpace(node.origin);
+    const width = Math.ceil(node.origin.width);
+    const height = Math.ceil(node.origin.height);
+    return { height, width, x, y };
 }
 
 function drawRectangleNode(board, node) {
@@ -2276,10 +2290,8 @@ class EmojisDrawer {
         if (MindElement.hasEmojis(element)) {
             this.g = createG();
             this.g.classList.add('emojis');
-            let { x, y } = getRectangleByNode(MindElement.getNode(element));
-            x = x + NodeSpace.getEmojiHorizontalSpace(element);
-            const { width, height } = getEmojisRectangle(this.board, element);
-            const foreignObject = createForeignObject(x, y, width, height + NodeSpace.getEmojiVerticalSpace(element) * 2);
+            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');
@@ -2417,7 +2429,7 @@ class QuickInsertDrawer extends BaseDrawer {
          *    3. 上、上左、上右
          *    4. 下、下左、下右
          */
-        const shape = getNodeShapeByElement(element);
+        const shape = getShapeByElement(this.board, element);
         // 形状是矩形要偏移边框的线宽
         const branchWidth = getBranchWidthByMindElement(this.board, element);
         let offsetBorderLineWidth = 0;
@@ -2613,10 +2625,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         this.emojisDrawer = new EmojisDrawer(this.board, this.viewContainerRef);
         this.quickInsertDrawer = new QuickInsertDrawer(this.board);
         super.ngOnInit();
-        this.node = ELEMENT_TO_NODE.get(this.element);
-        if (!PlaitMind.isMind(this.element)) {
-            this.parent = MindElement.getNode(MindElement.getParent(this.element));
-        }
+        this.node = MindElement.getNode(this.element);
         this.index = NODE_TO_INDEX.get(this.element) || 0;
         this.roughSVG = PlaitBoard.getRoughSVG(this.board);
         this.parentG = PlaitElement.getComponent(MindElement.getRoot(this.board, this.element)).rootG;
@@ -2631,21 +2640,18 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         this.drawQuickInsert();
     }
     onContextChanged(value, previous) {
-        const newNode = ELEMENT_TO_NODE.get(this.element);
-        if (!PlaitMind.isMind(this.element)) {
-            this.parent = MindElement.getNode(MindElement.getParent(this.element));
-        }
+        const newNode = MindElement.getNode(value.element);
         // resolve move node richtext lose issue
         if (this.node !== newNode) {
             if (this.foreignObject && this.foreignObject.children.length <= 0) {
                 this.foreignObject?.appendChild(this.richtextComponentRef?.instance.editable);
             }
         }
-        const isEquals = MindNode.isEquals(this.node, newNode);
+        const isEqualNode = RectangleClient.isEqual(this.node, newNode);
         this.node = newNode;
-        this.drawActiveG();
-        this.updateActiveClass();
-        if (!isEquals) {
+        if (!isEqualNode || value.element !== previous.element) {
+            this.drawActiveG();
+            this.updateActiveClass();
             this.drawShape();
             this.drawLink();
             this.updateRichtext();
@@ -2654,6 +2660,20 @@ class MindNodeComponent extends PlaitPluginElementComponent {
             this.drawQuickInsert();
             this.drawEmojis();
         }
+        else {
+            if (value.selected !== previous.selected) {
+                this.drawActiveG();
+                this.updateActiveClass();
+            }
+            if (!PlaitMind.isMind(value.element)) {
+                const parent = MindElement.getParent(previous.element);
+                const newParent = MindElement.getParent(value.element);
+                const hasSameChildren = parent.children.length === newParent.children.length;
+                if (!hasSameChildren) {
+                    this.drawLink();
+                }
+            }
+        }
     }
     drawEmojis() {
         const g = this.emojisDrawer.drawEmojis(this.element);
@@ -2673,7 +2693,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
     }
     drawShape() {
         this.destroyShape();
-        const shape = getNodeShapeByElement(this.node.origin);
+        const shape = getShapeByElement(this.board, this.node.origin);
         switch (shape) {
             case MindElementShape.roundRectangle:
                 this.shapeG = drawRectangleNode(this.board, this.node);
@@ -2690,29 +2710,29 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         }
     }
     drawLink() {
-        if (!this.parent) {
+        if (PlaitMind.isMind(this.element)) {
             return;
         }
+        const parent = MindElement.getParent(this.element);
+        const parentNode = MindElement.getNode(parent);
         if (this.linkG) {
             this.linkG.remove();
         }
-        const layout = MindQueries.getLayoutByElement(this.parent.origin);
+        const layout = MindQueries.getLayoutByElement(parent);
         if (AbstractNode.isAbstract(this.node.origin)) {
             this.linkG = drawAbstractLink(this.board, this.node, isHorizontalLayout(layout));
         }
-        else if (MindElement.isIndentedLayout(this.parent.origin)) {
-            this.linkG = drawIndentedLink(this.board, this.parent, this.node);
+        else if (MindElement.isIndentedLayout(parent)) {
+            this.linkG = drawIndentedLink(this.board, parentNode, this.node);
         }
         else {
-            this.linkG = drawLogicLink(this.board, this.node, this.parent, isHorizontalLayout(layout));
+            this.linkG = drawLogicLink(this.board, this.node, parentNode, isHorizontalLayout(layout));
         }
         this.g.append(this.linkG);
     }
     destroyLine() {
-        if (this.parent) {
-            if (this.linkG) {
-                this.linkG.remove();
-            }
+        if (this.linkG) {
+            this.linkG.remove();
         }
     }
     drawMaskG() {
@@ -2876,7 +2896,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         let circleOffset = [EXTEND_RADIUS / 2, 0];
         if (isHorizontalLayout(nodeLayout) && !isIndentedLayout(nodeLayout)) {
             extendLineYOffset =
-                getNodeShapeByElement(this.node.origin) === MindElementShape.roundRectangle
+                getShapeByElement(this.board, this.node.origin) === MindElementShape.roundRectangle
                     ? [0, 0]
                     : [height / 2, height / 2];
             if (isLeftLayout(nodeLayout)) {
@@ -3330,19 +3350,22 @@ const updateRightNodeCount = (board, activeComponent, targetComponent, detectRes
     const mindComponent = ELEMENT_TO_COMPONENT.get(mindElement);
     const activeIndex = mindComponent?.root.children.indexOf(activeComponent.node);
     const targetIndex = mindComponent?.root.children.indexOf(targetComponent.node);
-    const isActiveOnRight = activeIndex !== -1 && activeIndex <= activeComponent.parent.origin.rightNodeCount - 1;
-    const isTargetOnRight = targetComponent.parent && targetIndex !== -1 && targetIndex <= targetComponent.parent.origin.rightNodeCount - 1;
+    const activeParent = MindElement.getParent(activeComponent.element);
+    const targetParent = MindElement.findParent(targetComponent.element);
+    const isActiveOnRight = activeIndex !== -1 && activeIndex <= activeParent.rightNodeCount - 1;
+    const isTargetOnRight = targetParent && targetIndex !== -1 && targetIndex <= targetParent.rightNodeCount - 1;
     const isBothOnRight = isActiveOnRight && isTargetOnRight;
     const rootChildCount = mindComponent.root.children?.length;
     const rootRightNodeCount = mindComponent?.root.origin.rightNodeCount;
     if (!isBothOnRight) {
         if (isActiveOnRight) {
             rightNodeCount = rootChildCount < rootRightNodeCount ? rootChildCount - 1 : rootRightNodeCount - 1;
-            Transforms.setNode(board, { rightNodeCount }, PlaitBoard.findPath(board, activeComponent.parent.origin));
+            Transforms.setNode(board, { rightNodeCount }, PlaitBoard.findPath(board, activeParent));
         }
         if (isTargetOnRight && detectResult !== 'right') {
             rightNodeCount = rootChildCount < rootRightNodeCount ? rootRightNodeCount : rootRightNodeCount + 1;
-            Transforms.setNode(board, { rightNodeCount }, PlaitBoard.findPath(board, targetComponent.parent.origin));
+            const parent = MindElement.getParent(targetComponent.element);
+            Transforms.setNode(board, { rightNodeCount }, PlaitBoard.findPath(board, parent));
         }
         //二级子节点拖动到根节点左侧
         if (targetComponent.node.origin.isRoot && detectResult === 'left' && activeIndex === -1) {
@@ -3385,8 +3408,8 @@ const withDnd = (board) => {
                 return;
             }
             if (PlaitMind.isMind(value)) {
-                const mindmapComponent = ELEMENT_TO_COMPONENT.get(value);
-                const root = mindmapComponent?.root;
+                const mindComponent = ELEMENT_TO_COMPONENT.get(value);
+                const root = mindComponent.root;
                 root.eachNode((node) => {
                     if (activeElement) {
                         return;
@@ -3435,7 +3458,6 @@ const withDnd = (board) => {
             const offsetX = endPoint[0] - startPoint[0];
             const offsetY = endPoint[1] - startPoint[1];
             const activeComponent = PlaitElement.getComponent(activeElement);
-            const roughSVG = PlaitBoard.getRoughSVG(board);
             const fakeDraggingNode = {
                 ...activeComponent.node,
                 children: [],
@@ -3445,9 +3467,16 @@ const withDnd = (board) => {
             const textRectangle = getRichtextRectangleByNode(board, activeComponent.node);
             const fakeNodeG = drawRectangleNode(board, fakeDraggingNode);
             const richtextG = activeComponent.richtextG?.cloneNode(true);
-            updateForeignObject(richtextG, textRectangle.width + BASE * 10, textRectangle.height, textRectangle.x + offsetX, textRectangle.y + offsetY);
+            updateForeignObject$1(richtextG, textRectangle.width, textRectangle.height, textRectangle.x + offsetX, textRectangle.y + offsetY);
             fakeDragNodeG?.append(fakeNodeG);
             fakeDragNodeG?.append(richtextG);
+            // draw emojis
+            if (MindElement.hasEmojis(activeElement)) {
+                const fakeEmojisG = activeComponent.emojisDrawer.g.cloneNode(true);
+                const foreignRectangle = getEmojiForeignRectangle(board, activeElement);
+                updateForeignObject$1(fakeEmojisG, foreignRectangle.width, foreignRectangle.height, foreignRectangle.x + offsetX, foreignRectangle.y + offsetY);
+                fakeDragNodeG?.append(fakeEmojisG);
+            }
             // drop position detect
             const { x, y } = getRectangleByNode(fakeDraggingNode);
             const detectCenterPoint = [x + textRectangle.width / 2, y + textRectangle.height / 2];
@@ -3774,7 +3803,11 @@ const withMind = (board) => {
     board.isHitSelection = (element, range) => {
         if (MindElement.isMindElement(board, element) && board.selection) {
             const client = getRectangleByNode(MindElement.getNode(element));
-            return RectangleClient.isHit(RectangleClient.toRectangleClient([range.anchor, range.focus]), client);
+            const isHit = RectangleClient.isHit(RectangleClient.toRectangleClient([range.anchor, range.focus]), client);
+            if (isHit && MindElement.hasEmojis(element) && Selection.isCollapsed(range) && isHitEmojis(board, element, range.anchor)) {
+                return false;
+            }
+            return isHit;
         }
         return isHitSelection(element, range);
     };
@@ -3820,31 +3853,32 @@ const withMind = (board) => {
             if (hotkeys.isDeleteBackward(event) || hotkeys.isDeleteForward(event)) {
                 event.preventDefault();
                 deleteSelectedELements(board, selectedElements);
-                let lastNode = null;
-                const firstLevelElements = filterChildElement(selectedElements);
+                let activeElement;
+                const firstLevelElements = getFirstLevelElement(selectedElements);
+                if (AbstractNode.isAbstract(firstLevelElements[0])) {
+                    const parent = MindElement.getParent(firstLevelElements[0]);
+                    activeElement = parent.children[firstLevelElements[0].start];
+                }
                 const firstElement = firstLevelElements[0];
-                const firstComponent = PlaitElement.getComponent(firstElement);
-                const nodeIndex = firstComponent?.parent?.children.findIndex(item => item.origin.id === firstElement.id);
-                const isSameParent = firstLevelElements.every(element => {
-                    return findParentElement(element) && findParentElement(firstLevelElements[0]) === findParentElement(element);
+                const firstElementParent = MindElement.findParent(firstElement);
+                const hasSameParent = firstLevelElements.every(element => {
+                    return MindElement.findParent(element) === firstElementParent;
                 });
-                if (isSameParent) {
-                    const childCount = firstComponent.parent?.children.length - firstLevelElements.length;
-                    if (childCount === 0) {
-                        lastNode = firstComponent?.parent;
-                    }
-                    else if (nodeIndex === 0) {
-                        lastNode = firstComponent?.parent.children[firstLevelElements.length];
+                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 (nodeIndex > 0) {
-                        lastNode = firstComponent?.parent.children[nodeIndex - 1];
+                    else {
+                        if (firstElementIndex > 0) {
+                            activeElement = firstElementParent.children[firstElementIndex - 1];
+                        }
                     }
                 }
-                if (firstLevelElements.length === 1 && AbstractNode.isAbstract(firstElement)) {
-                    lastNode = firstComponent.parent.children[firstElement.start];
-                }
-                if (lastNode) {
-                    addSelectedElement(board, lastNode.origin);
+                if (activeElement) {
+                    addSelectedElement(board, activeElement);
                 }
                 return;
             }
@@ -3871,8 +3905,8 @@ const withMind = (board) => {
         const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
         board.children
             .filter(value => PlaitMind.isMind(value))
-            .forEach(mindmap => {
-            depthFirstRecursion(mindmap, node => {
+            .forEach(mindMap => {
+            depthFirstRecursion(mindMap, node => {
                 if (!PlaitBoard.hasBeenTextEditing(board) && hitMindElement(board, point, node)) {
                     enterNodeEditing(node);
                 }
@@ -3884,7 +3918,7 @@ const withMind = (board) => {
         dblclick(event);
     };
     board.setFragment = (data) => {
-        const selectedElements = filterChildElement(getSelectedElements(board));
+        const selectedElements = getFirstLevelElement(getSelectedElements(board));
         if (selectedElements.length) {
             const elements = buildClipboardData(board, selectedElements);
             setClipboardData(data, elements);
@@ -3958,5 +3992,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_COLORS, BRANCH_WIDTH, DefaultAbstractNodeStyle, DefaultNodeStyle, DefaultRootStyle, ELEMENT_TO_NODE, EXTEND_OFFSET, EXTEND_RADIUS, GRAY_COLOR, LayoutDirection, LayoutDirectionsMap, MindElement, MindElementShape, MindEmojiBaseComponent, MindModule, MindNode, MindNodeComponent, MindQueries, 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, STROKE_WIDTH, TOPIC_COLOR, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, TRANSPARENT, canSetAbstract, changeRightNodeCount, copyNewNode, correctLayoutByDirection, createDefaultMindMapElement, createMindElement, deleteElementHandleAbstract, deleteSelectedELements, directionCorrector, directionDetector, divideElementByParent, drawCurvePlaceholderDropNodeG, drawIndentNodeG, drawPlaceholderDropNodeG, drawStraightDropNodeG, extractNodesText, filterChildElement, findLastChild, findLocationLeftIndex, findParentElement, findUpElement, getAbstractBranchColor, getAbstractBranchWidth, getAbstractHandleRectangle, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getBranchWidthByMindElement, getChildrenCount, getCorrespondingAbstract, getDefaultLayout, getEmojiFontSize, getEmojisRectangle, getHitAbstractHandle, getHorizontalFakeY, getInCorrectLayoutDirection, getIndentedFakePoint, getLayoutDirection$1 as getLayoutDirection, getLayoutReverseDirection, getLocationScope, getNextBranchColor, getNodeShapeByElement, getOverallAbstracts, getRectangleByNode, getRectangleByResizingLocation, getRootLayout, getStrokeByMindElement, handleTouchedAbstract, hitMindElement, insertElementHandleAbstract, insertMindElement, isChildElement, isChildRight, isChildUp, isCorrectLayout, isMixedLayout, isSetAbstract, isVirtualKey, readjustmentDropTarget, separateChildren, shouldChangeRightNodeCount, transformAbstractToNode, transformNodeToRoot, transformRootToNode, withExtendMind, withMind };
+export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, AbstractHandlePosition, AbstractResizeState, BASE, BRANCH_COLORS, BRANCH_WIDTH, DefaultAbstractNodeStyle, DefaultNodeStyle, DefaultRootStyle, ELEMENT_TO_NODE, EXTEND_OFFSET, EXTEND_RADIUS, GRAY_COLOR, LayoutDirection, LayoutDirectionsMap, MindElement, MindElementShape, MindEmojiBaseComponent, MindModule, MindNode, MindNodeComponent, MindQueries, 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, STROKE_WIDTH, TOPIC_COLOR, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, TRANSPARENT, canSetAbstract, changeRightNodeCount, copyNewNode, correctLayoutByDirection, createDefaultMindMapElement, createMindElement, deleteElementHandleAbstract, deleteSelectedELements, directionCorrector, directionDetector, divideElementByParent, drawCurvePlaceholderDropNodeG, drawIndentNodeG, drawPlaceholderDropNodeG, drawStraightDropNodeG, extractNodesText, findLastChild, findLocationLeftIndex, findUpElement, getAbstractBranchColor, getAbstractBranchWidth, getAbstractHandleRectangle, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getBranchWidthByMindElement, getChildrenCount, getCorrespondingAbstract, getDefaultBranchColor, getDefaultBranchColorByIndex, getDefaultLayout, getEmojiFontSize, getEmojiForeignRectangle, getEmojiRectangle, getEmojisWidthHeight, getFirstLevelElement, getHitAbstractHandle, getHorizontalFakeY, getInCorrectLayoutDirection, getIndentedFakePoint, getLayoutDirection$1 as getLayoutDirection, getLayoutReverseDirection, getLocationScope, getNextBranchColor, getOverallAbstracts, getRectangleByNode, getRectangleByResizingLocation, getRootLayout, getShapeByElement, getStrokeByMindElement, handleTouchedAbstract, hitMindElement, insertElementHandleAbstract, insertMindElement, isChildElement, isChildRight, isChildUp, isCorrectLayout, isHitEmojis, isMixedLayout, isSetAbstract, isVirtualKey, readjustmentDropTarget, separateChildren, shouldChangeRightNodeCount, transformAbstractToNode, transformNodeToRoot, transformRootToNode, withExtendMind, withMind };
 //# sourceMappingURL=plait-mind.mjs.map