@plait/mind 0.27.0-next.3 → 0.27.0-next.5

package/fesm2022/plait-mind.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, NgModule, NgZone, Directive, Input, HostListener } from '@angular/core';
 import * as i2 from '@plait/core';
-import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, RectangleClient, PlaitElement, PlaitPluginKey, getSelectedElements, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, PlaitBoard, Path, PlaitNode, PlaitContextService, depthFirstRecursion, getIsRecursionFunc, drawLinearPath, drawBezierPath, createG, updateForeignObject, drawRoundRectangle, getRectangleByElements, NODE_TO_PARENT, distanceBetweenPointAndRectangle, createForeignObject, setStrokeLinecap, createText, PlaitPointerType, PlaitPluginElementComponent, NODE_TO_INDEX, PlaitModule, isMainPointer, transformPoint, toPoint, getHitElements, distanceBetweenPointAndPoint, setClipboardData, setClipboardDataByText, BOARD_TO_HOST, BoardTransforms, throttleRAF, removeSelectedElement, PlaitHistoryBoard, hotkeys, setClipboardDataByMedia, getClipboardDataByMedia, ResizeCursorClass, preventTouchMove, PRESS_AND_MOVE_BUFFER, MERGING, getDataFromClipboard } from '@plait/core';
+import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, RectangleClient, PlaitElement, PlaitPluginKey, getSelectedElements, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, PlaitBoard, Path, PlaitNode, PlaitContextService, depthFirstRecursion, getIsRecursionFunc, drawLinearPath, drawBezierPath, createG, updateForeignObject, drawRoundRectangle, getRectangleByElements, NODE_TO_PARENT, distanceBetweenPointAndRectangle, createForeignObject, setStrokeLinecap, createText, PlaitPointerType, PlaitPluginElementComponent, NODE_TO_INDEX, PlaitModule, isMainPointer, transformPoint, toPoint, getHitElements, distanceBetweenPointAndPoint, CoreTransforms, BOARD_TO_HOST, BoardTransforms, throttleRAF, removeSelectedElement, PlaitHistoryBoard, hotkeys, setClipboardDataByMedia, getClipboardDataByMedia, ResizeCursorClass, preventTouchMove, PRESS_AND_MOVE_BUFFER, MERGING, setClipboardData, setClipboardDataByText, getDataFromClipboard } from '@plait/core';
 import { MindLayoutType, isIndentedLayout, isHorizontalLayout, isHorizontalLogicLayout, ConnectingPosition, AbstractNode, isStandardLayout, isVerticalLogicLayout, getNonAbstractChildren, isLeftLayout, isRightLayout, isTopLayout, isBottomLayout, getCorrectStartEnd, getAbstractLayout, GlobalLayout } from '@plait/layouts';
 import { PlaitMarkEditor, MarkTypes, DEFAULT_FONT_SIZE, TEXT_DEFAULT_HEIGHT, buildText, getTextSize, TextManage, ExitOrigin, TextModule, getTextFromClipboard } from '@plait/text';
 import { fromEvent, Subject } from 'rxjs';
-import { RESIZE_HANDLE_DIAMETER, getRectangleResizeHandleRefs, isDrawingMode, isDndMode, setCreationMode, BoardCreationMode, isExpandHotkey, isTabHotkey, isEnterHotkey, isVirtualKey, isSpaceHotkey, MediaKeys, ResizeHandle, withResize, ActiveGenerator } from '@plait/common';
+import { RESIZE_HANDLE_DIAMETER, getRectangleResizeHandleRefs, WithTextPluginKey, isDrawingMode, isDndMode, setCreationMode, BoardCreationMode, isExpandHotkey, isTabHotkey, isEnterHotkey, isVirtualKey, isDelete, isSpaceHotkey, MediaKeys, ResizeHandle, withResize, ActiveGenerator } from '@plait/common';
 import { Node as Node$1, Path as Path$1 } from 'slate';
 import { pointsOnBezierCurves } from 'points-on-curve';
 import { take, filter } from 'rxjs/operators';
@@ -386,8 +386,7 @@ const isHitEmojis = (board, element, point) => {
 function getTopicRectangleByNode(board, node) {
     let nodeRectangle = getRectangleByNode(node);
     const result = getTopicRectangleByElement(board, nodeRectangle, node.origin);
-    // add buffer width to avoid unexpected text breaks in different scene
-    result.width = result.width + 4;
+    result.width = result.width;
     return result;
 }
 function getTopicRectangleByElement(board, nodeRectangle, element) {
@@ -1078,7 +1077,7 @@ const normalizeWidthAndHeight = (board, element, width, height) => {
     const minWidth = NodeSpace.getNodeTopicMinWidth(board, element, element.isRoot);
     const newWidth = width < minWidth * board.viewport.zoom ? minWidth : width / board.viewport.zoom;
     const newHeight = height / board.viewport.zoom;
-    return { width: newWidth, height: newHeight };
+    return { width: Math.ceil(newWidth), height: newHeight };
 };
 const setTopic = (board, element, topic, width, height) => {
     const newElement = {
@@ -1108,21 +1107,6 @@ const setTopicSize = (board, element, width, height) => {
         Transforms.setNode(board, newElement, path);
     }
 };
-const removeElements = (board, elements) => {
-    const deletableElements = getFirstLevelElement(elements);
-    deletableElements
-        .map(element => {
-        const path = PlaitBoard.findPath(board, element);
-        const ref = board.pathRef(path);
-        return () => {
-            Transforms.removeNode(board, ref.current);
-            ref.unref();
-        };
-    })
-        .forEach(action => {
-        action();
-    });
-};
 const insertNodes = (board, elements, path) => {
     const pathRef = board.pathRef(path);
     elements.forEach(element => {
@@ -1197,11 +1181,8 @@ const replaceEmoji = (board, element, oldEmoji, newEmoji) => {
 const getNewNodeHeight = (board, element, newNodeDynamicWidth) => {
     const textManage = PlaitElement.getComponent(element).textManage;
     const { height } = textManage.getSize();
-    textManage.updateWidth(newNodeDynamicWidth);
+    textManage.updateRectangleWidth(newNodeDynamicWidth);
     const { height: newHeight } = textManage.getSize();
-    if (!element.manualWidth) {
-        textManage.updateWidth(0);
-    }
     if (height !== newHeight) {
         return newHeight;
     }
@@ -1249,7 +1230,6 @@ const MindTransforms = {
     insertAbstract,
     setAbstractsByRefs,
     setAbstractByStandardLayout,
-    removeElements,
     insertNodes,
     insertAbstractNodes,
     setRightNodeCountByRefs,
@@ -3050,9 +3030,6 @@ class NodeImageDrawer {
     }
 }
 
-// 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;
 class MindNodeComponent extends PlaitPluginElementComponent {
     constructor(viewContainerRef, cdr) {
         super(cdr);
@@ -3070,7 +3047,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         this.activeDrawer = new NodeActiveDrawer(this.board);
         this.collapseDrawer = new CollapseDrawer(this.board);
         this.imageDrawer = new NodeImageDrawer(this.board, this.viewContainerRef);
-        const plugins = this.board.getPluginOptions(WithMindPluginKey).textPlugins;
+        const plugins = this.board.getPluginOptions(WithTextPluginKey).textPlugins;
         this.textManage = new TextManage(this.board, this.viewContainerRef, {
             getRectangle: () => {
                 const rect = getTopicRectangleByNode(this.board, this.node);
@@ -3088,7 +3065,12 @@ class MindNodeComponent extends PlaitPluginElementComponent {
             },
             textPlugins: plugins,
             getMaxWidth: () => {
-                return NodeTopicThreshold.defaultTextMaxWidth;
+                if (this.element.manualWidth) {
+                    return NodeSpace.getNodeDynamicWidth(this.board, this.element);
+                }
+                else {
+                    return Math.max(NodeSpace.getNodeDynamicWidth(this.board, this.element), NodeTopicThreshold.defaultTextMaxWidth);
+                }
             }
         });
     }
@@ -3204,36 +3186,17 @@ class MindNodeComponent extends PlaitPluginElementComponent {
     drawTopic() {
         this.textManage.draw(this.element.data.topic);
         this.g.append(this.textManage.g);
-        if (this.element.manualWidth) {
-            const width = NodeSpace.getNodeDynamicWidth(this.board, this.element);
-            this.textManage.updateWidth(width);
-        }
     }
     updateTopic() {
         this.textManage.updateText(this.element.data.topic);
         this.textManage.updateRectangle();
-        if (this.element.manualWidth) {
-            const width = NodeSpace.getNodeDynamicWidth(this.board, this.element);
-            this.textManage.updateWidth(width);
-        }
     }
     editTopic() {
         this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: true });
-        // update text max-width when image width greater than topic default max width to cover node topic default max width style
-        const defaultMaxWidth = TOPIC_DEFAULT_MAX_WORD_COUNT * (PlaitMind.isMind(this.element) ? ROOT_TOPIC_FONT_SIZE : TOPIC_FONT_SIZE);
-        let hasMaxWidth = false;
-        if (!this.element.manualWidth && MindElement.hasImage(this.element) && this.element.data.image.width > defaultMaxWidth) {
-            const width = NodeSpace.getNodeDynamicWidth(this.board, this.element);
-            this.textManage.updateWidth(width);
-            hasMaxWidth = true;
-        }
         this.textManage.edit((origin) => {
             if (origin === ExitOrigin.default) {
                 this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: false });
             }
-            if (hasMaxWidth) {
-                this.textManage.updateWidth(0);
-            }
         });
     }
     ngOnDestroy() {
@@ -3453,7 +3416,7 @@ const withNodeDnd = (board) => {
                     refs = insertElementHandleRightNodeCount(board, targetElementPathRef.current.slice(0, 1), normalElements.length, refs);
                 }
                 MindTransforms.setRightNodeCountByRefs(board, refs);
-                MindTransforms.removeElements(board, firstLevelElements);
+                CoreTransforms.removeElements(board, firstLevelElements);
                 let insertPath = targetPathRef.current;
                 const parentPath = Path.parent(targetPathRef.current || targetPath);
                 if (!insertPath) {
@@ -3502,108 +3465,6 @@ const withNodeDnd = (board) => {
     return board;
 };
 
-const buildClipboardData = (board, selectedElements, startPoint) => {
-    let result = [];
-    // get overall abstract
-    const overallAbstracts = getOverallAbstracts(board, selectedElements);
-    // get valid abstract refs
-    const validAbstractRefs = getValidAbstractRefs(board, [...selectedElements, ...overallAbstracts]);
-    // keep correct order
-    const newSelectedElements = selectedElements.filter(value => !validAbstractRefs.find(ref => ref.abstract === value));
-    newSelectedElements.push(...validAbstractRefs.map(value => value.abstract));
-    const selectedMindNodes = newSelectedElements.map(value => MindElement.getNode(value));
-    newSelectedElements.forEach((element, index) => {
-        // handle relative location
-        const nodeRectangle = getRectangleByNode(selectedMindNodes[index]);
-        const points = [[nodeRectangle.x - startPoint[0], nodeRectangle.y - startPoint[1]]];
-        // handle invalid abstract
-        const abstractRef = validAbstractRefs.find(ref => ref.abstract === element);
-        if (AbstractNode.isAbstract(element) && abstractRef) {
-            const { start, end } = getRelativeStartEndByAbstractRef(abstractRef, newSelectedElements);
-            result.push({
-                ...element,
-                points,
-                start,
-                end
-            });
-        }
-        else {
-            if (AbstractNode.isAbstract(element)) {
-                let newElement = { ...element, points };
-                delete newElement.start;
-                delete newElement.end;
-                result.push(newElement);
-            }
-            else {
-                result.push({
-                    ...element,
-                    points: points
-                });
-            }
-        }
-    });
-    return result;
-};
-const setMindClipboardData = (data, elements) => {
-    const text = elements.reduce((string, currentNode) => {
-        return string + extractNodesText(currentNode);
-    }, '');
-    setClipboardData(data, elements);
-    setClipboardDataByText(data, text);
-};
-const insertClipboardData = (board, elements, targetPoint) => {
-    let newElement, path;
-    const selectedElements = getSelectedElements(board);
-    let newELements = [];
-    const hasTargetParent = selectedElements.length === 1;
-    const targetParent = selectedElements[0];
-    const targetParentPath = targetParent && PlaitBoard.findPath(board, targetParent);
-    const nonAbstractChildrenLength = targetParent && getNonAbstractChildren(targetParent).length;
-    elements.forEach((item, index) => {
-        newElement = copyNewNode(item);
-        if (hasTargetParent) {
-            if (item.isRoot) {
-                newElement = adjustRootToNode(board, newElement);
-                const styles = PlaitMind.isMind(targetParent) ? { fontFamily: BRANCH_FONT_FAMILY } : { fontFamily: DEFAULT_FONT_FAMILY };
-                const { width, height } = getTextSize(board, newElement.data.topic, TOPIC_DEFAULT_MAX_WORD_COUNT, {
-                    ...styles,
-                    width: newElement.manualWidth ? newElement.manualWidth : undefined
-                });
-                newElement.width = Math.max(width, getNodeDefaultFontSize());
-                newElement.height = height;
-            }
-            // handle abstract start and end
-            if (AbstractNode.isAbstract(newElement)) {
-                newElement.start = newElement.start + nonAbstractChildrenLength;
-                newElement.end = newElement.end + nonAbstractChildrenLength;
-            }
-            path = [...targetParentPath, nonAbstractChildrenLength + index];
-        }
-        else {
-            const point = [targetPoint[0] + item.points[0][0], targetPoint[1] + item.points[0][1]];
-            newElement.points = [point];
-            if (AbstractNode.isAbstract(item)) {
-                newElement = adjustAbstractToNode(newElement);
-            }
-            if (!item.isRoot) {
-                newElement = adjustNodeToRoot(board, newElement);
-            }
-            path = [board.children.length];
-        }
-        newELements.push(newElement);
-        Transforms.insertNode(board, newElement, path);
-        return;
-    });
-    Transforms.setSelectionWithTemporaryElements(board, newELements);
-};
-const insertClipboardText = (board, targetParent, text) => {
-    const styles = PlaitMind.isMind(targetParent) ? { fontFamily: BRANCH_FONT_FAMILY } : { fontFamily: DEFAULT_FONT_FAMILY };
-    const { width, height } = getTextSize(board, text, TOPIC_DEFAULT_MAX_WORD_COUNT, styles);
-    const newElement = createMindElement(text, Math.max(width, getFontSizeBySlateElement(text)), height, {});
-    Transforms.insertNode(board, newElement, findNewChildNodePath(board, targetParent));
-    return;
-};
-
 const withAbstract = (board) => {
     const newBoard = board;
     const { mousedown, mousemove, mouseup } = board;
@@ -3824,7 +3685,7 @@ const withCreateMind = (board) => {
 
 const withMindHotkey = (baseBoard) => {
     const board = baseBoard;
-    const { keydown, deleteFragment } = board;
+    const { keydown } = board;
     board.keydown = (event) => {
         const selectedElements = getSelectedElements(board);
         const isSingleSelection = selectedElements.length === 1;
@@ -3864,7 +3725,11 @@ const withMindHotkey = (baseBoard) => {
                 insertMindElement(board, targetElement, findNewSiblingNodePath(board, targetElement));
                 return;
             }
-            if (!isVirtualKey(event) && !isSpaceHotkey(event) && isSingleSelection && MindElement.isMindElement(board, targetElement)) {
+            if (!isVirtualKey(event) &&
+                !isDelete(event) &&
+                !isSpaceHotkey(event) &&
+                isSingleSelection &&
+                MindElement.isMindElement(board, targetElement)) {
                 event.preventDefault();
                 editTopic(targetElement);
                 return;
@@ -3872,54 +3737,8 @@ const withMindHotkey = (baseBoard) => {
         }
         keydown(event);
     };
-    board.deleteFragment = (data) => {
-        const targetMindElements = getSelectedMindElements(board);
-        if (targetMindElements.length) {
-            const firstLevelElements = getFirstLevelElement(targetMindElements).reverse();
-            const abstractRefs = deleteElementHandleAbstract(board, firstLevelElements);
-            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);
-            }
-        }
-        deleteFragment(data);
-    };
     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 mouseMoveHandle = (board, event, nodeHoveredExtendRef) => {
     let target = null;
@@ -4131,7 +3950,7 @@ const withNodeResize = (board) => {
                 }
                 const newTarget = PlaitNode.get(board, targetElementRef.path);
                 if (newTarget && NodeSpace.getNodeTopicMinWidth(board, newTarget) !== resizedWidth) {
-                    targetElementRef.textManage.updateWidth(resizedWidth);
+                    targetElementRef.textManage.updateRectangleWidth(resizedWidth);
                     const { height } = targetElementRef.textManage.getSize();
                     MindTransforms.setNodeManualWidth(board, newTarget, resizedWidth * zoom, height);
                 }
@@ -4245,9 +4064,191 @@ const withNodeImageResize = (board) => {
     return board;
 };
 
+const buildClipboardData = (board, selectedElements, startPoint) => {
+    let result = [];
+    // get overall abstract
+    const overallAbstracts = getOverallAbstracts(board, selectedElements);
+    // get valid abstract refs
+    const validAbstractRefs = getValidAbstractRefs(board, [...selectedElements, ...overallAbstracts]);
+    // keep correct order
+    const newSelectedElements = selectedElements.filter(value => !validAbstractRefs.find(ref => ref.abstract === value));
+    newSelectedElements.push(...validAbstractRefs.map(value => value.abstract));
+    const selectedMindNodes = newSelectedElements.map(value => MindElement.getNode(value));
+    newSelectedElements.forEach((element, index) => {
+        // handle relative location
+        const nodeRectangle = getRectangleByNode(selectedMindNodes[index]);
+        const points = [[nodeRectangle.x - startPoint[0], nodeRectangle.y - startPoint[1]]];
+        // handle invalid abstract
+        const abstractRef = validAbstractRefs.find(ref => ref.abstract === element);
+        if (AbstractNode.isAbstract(element) && abstractRef) {
+            const { start, end } = getRelativeStartEndByAbstractRef(abstractRef, newSelectedElements);
+            result.push({
+                ...element,
+                points,
+                start,
+                end
+            });
+        }
+        else {
+            if (AbstractNode.isAbstract(element)) {
+                let newElement = { ...element, points };
+                delete newElement.start;
+                delete newElement.end;
+                result.push(newElement);
+            }
+            else {
+                result.push({
+                    ...element,
+                    points: points
+                });
+            }
+        }
+    });
+    return result;
+};
+const setMindClipboardData = (data, elements) => {
+    const text = elements.reduce((string, currentNode) => {
+        return string + extractNodesText(currentNode);
+    }, '');
+    setClipboardData(data, elements);
+    setClipboardDataByText(data, text);
+};
+const insertClipboardData = (board, elements, targetPoint) => {
+    let newElement, path;
+    const selectedElements = getSelectedElements(board);
+    let newELements = [];
+    const hasTargetParent = selectedElements.length === 1;
+    const targetParent = selectedElements[0];
+    const targetParentPath = targetParent && PlaitBoard.findPath(board, targetParent);
+    const nonAbstractChildrenLength = targetParent && getNonAbstractChildren(targetParent).length;
+    elements.forEach((item, index) => {
+        newElement = copyNewNode(item);
+        if (hasTargetParent) {
+            if (item.isRoot) {
+                newElement = adjustRootToNode(board, newElement);
+                const styles = PlaitMind.isMind(targetParent) ? { fontFamily: BRANCH_FONT_FAMILY } : { fontFamily: DEFAULT_FONT_FAMILY };
+                const { width, height } = getTextSize(board, newElement.data.topic, TOPIC_DEFAULT_MAX_WORD_COUNT, {
+                    ...styles,
+                    width: newElement.manualWidth ? newElement.manualWidth : undefined
+                });
+                newElement.width = Math.max(width, getNodeDefaultFontSize());
+                newElement.height = height;
+            }
+            // handle abstract start and end
+            if (AbstractNode.isAbstract(newElement)) {
+                newElement.start = newElement.start + nonAbstractChildrenLength;
+                newElement.end = newElement.end + nonAbstractChildrenLength;
+            }
+            path = [...targetParentPath, nonAbstractChildrenLength + index];
+        }
+        else {
+            const point = [targetPoint[0] + item.points[0][0], targetPoint[1] + item.points[0][1]];
+            newElement.points = [point];
+            if (AbstractNode.isAbstract(item)) {
+                newElement = adjustAbstractToNode(newElement);
+            }
+            if (!item.isRoot) {
+                newElement = adjustNodeToRoot(board, newElement);
+            }
+            path = [board.children.length];
+        }
+        newELements.push(newElement);
+        Transforms.insertNode(board, newElement, path);
+        return;
+    });
+    Transforms.setSelectionWithTemporaryElements(board, newELements);
+};
+const insertClipboardText = (board, targetParent, text) => {
+    const styles = PlaitMind.isMind(targetParent) ? { fontFamily: BRANCH_FONT_FAMILY } : { fontFamily: DEFAULT_FONT_FAMILY };
+    const { width, height } = getTextSize(board, text, TOPIC_DEFAULT_MAX_WORD_COUNT, styles);
+    const newElement = createMindElement(text, Math.max(width, getFontSizeBySlateElement(text)), height, {});
+    Transforms.insertNode(board, newElement, findNewChildNodePath(board, targetParent));
+    return;
+};
+
+const withMindFragment = (baseBoard) => {
+    const board = baseBoard;
+    const { getDeletedFragment, insertFragment, setFragment } = board;
+    board.getDeletedFragment = (data) => {
+        const targetMindElements = getSelectedMindElements(board);
+        if (targetMindElements.length) {
+            const firstLevelElements = getFirstLevelElement(targetMindElements).reverse();
+            const abstractRefs = deleteElementHandleAbstract(board, firstLevelElements);
+            MindTransforms.setAbstractsByRefs(board, abstractRefs);
+            const refs = deleteElementsHandleRightNodeCount(board, targetMindElements);
+            MindTransforms.setRightNodeCountByRefs(board, refs);
+            const deletableElements = getFirstLevelElement(targetMindElements);
+            data.push(...deletableElements);
+            const nextSelected = getNextSelectedElement(board, firstLevelElements);
+            if (nextSelected) {
+                addSelectedElement(board, nextSelected);
+            }
+        }
+        return getDeletedFragment(data);
+    };
+    board.setFragment = (data, rectangle) => {
+        const targetMindElements = getSelectedMindElements(board);
+        const firstLevelElements = getFirstLevelElement(targetMindElements);
+        if (firstLevelElements.length) {
+            const elements = buildClipboardData(board, firstLevelElements, rectangle ? [rectangle.x, rectangle.y] : [0, 0]);
+            setMindClipboardData(data, elements);
+        }
+        setFragment(data, rectangle);
+    };
+    board.insertFragment = (data, targetPoint) => {
+        const elements = getDataFromClipboard(data);
+        const mindElements = elements.filter(value => MindElement.isMindElement(board, value));
+        if (elements.length > 0 && mindElements.length > 0) {
+            insertClipboardData(board, mindElements, targetPoint);
+        }
+        else if (elements.length === 0) {
+            const mindElements = getSelectedMindElements(board);
+            if (mindElements.length === 1) {
+                const text = getTextFromClipboard(data);
+                if (text) {
+                    insertClipboardText(board, mindElements[0], buildText(text));
+                    return;
+                }
+            }
+        }
+        insertFragment(data, targetPoint);
+    };
+    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 withMind = (baseBoard) => {
     const board = baseBoard;
-    const { drawElement, dblclick, insertFragment, setFragment, isHitSelection, getRectangle, isMovable, isRecursion } = board;
+    const { drawElement, dblclick, isHitSelection, getRectangle, isMovable, isRecursion } = board;
     board.drawElement = (context) => {
         if (PlaitMind.isMind(context.element)) {
             return PlaitMindComponent;
@@ -4311,41 +4312,14 @@ const withMind = (baseBoard) => {
         }
         dblclick(event);
     };
-    board.setFragment = (data, rectangle) => {
-        const targetMindElements = getSelectedMindElements(board);
-        const firstLevelElements = getFirstLevelElement(targetMindElements);
-        if (firstLevelElements.length) {
-            const elements = buildClipboardData(board, firstLevelElements, rectangle ? [rectangle.x, rectangle.y] : [0, 0]);
-            setMindClipboardData(data, elements);
-        }
-        setFragment(data, rectangle);
-    };
-    board.insertFragment = (data, targetPoint) => {
-        const elements = getDataFromClipboard(data);
-        const mindElements = elements.filter(value => MindElement.isMindElement(board, value));
-        if (elements.length > 0 && mindElements.length > 0) {
-            insertClipboardData(board, mindElements, targetPoint);
-        }
-        else if (elements.length === 0) {
-            const mindElements = getSelectedMindElements(board);
-            if (mindElements.length === 1) {
-                const text = getTextFromClipboard(data);
-                if (text) {
-                    insertClipboardText(board, mindElements[0], buildText(text));
-                    return;
-                }
-            }
-        }
-        insertFragment(data, targetPoint);
-    };
-    return withNodeResize(withNodeImageResize(withNodeImage(withNodeHoverDetect(withMindHotkey(withMindExtend(withCreateMind(withAbstract(withNodeDnd(board)))))))));
+    return withNodeResize(withNodeImageResize(withNodeImage(withNodeHoverDetect(withMindFragment(withMindHotkey(withMindExtend(withCreateMind(withAbstract(withNodeDnd(board))))))))));
 };
 
 class MindEmojiBaseComponent {
     get nativeElement() {
         return this.elementRef.nativeElement;
     }
-    handleClick() {
+    handlePointerDown() {
         const currentOptions = this.board.getPluginOptions(PlaitPluginKey.withSelection);
         this.board.setPluginOptions(PlaitPluginKey.withSelection, {
             isDisabledSelect: true
@@ -4362,7 +4336,7 @@ class MindEmojiBaseComponent {
         this.elementRef.nativeElement.style.fontSize = `${this.fontSize}px`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: MindEmojiBaseComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.3", type: MindEmojiBaseComponent, inputs: { fontSize: "fontSize", emojiItem: "emojiItem", board: "board", element: "element" }, host: { listeners: { "mousedown": "handleClick()" }, classAttribute: "mind-node-emoji" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.3", type: MindEmojiBaseComponent, inputs: { fontSize: "fontSize", emojiItem: "emojiItem", board: "board", element: "element" }, host: { listeners: { "pointerdown": "handlePointerDown()" }, classAttribute: "mind-node-emoji" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: MindEmojiBaseComponent, decorators: [{
             type: Directive,
@@ -4379,9 +4353,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
                 type: Input
             }], element: [{
                 type: Input
-            }], handleClick: [{
+            }], handlePointerDown: [{
                 type: HostListener,
-                args: ['mousedown']
+                args: ['pointerdown']
             }] } });
 
 class MindImageBaseComponent {