@plait/mind 0.27.0-next.4 → 0.27.0-next.6

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, 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, CommonPluginElement, 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';
@@ -1107,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 => {
@@ -1194,7 +1179,7 @@ const replaceEmoji = (board, element, oldEmoji, newEmoji) => {
  * 2. new height is effected by zoom
  */
 const getNewNodeHeight = (board, element, newNodeDynamicWidth) => {
-    const textManage = PlaitElement.getComponent(element).textManage;
+    const textManage = MindElement.getTextManage(element);
     const { height } = textManage.getSize();
     textManage.updateRectangleWidth(newNodeDynamicWidth);
     const { height: newHeight } = textManage.getSize();
@@ -1245,7 +1230,6 @@ const MindTransforms = {
     insertAbstract,
     setAbstractsByRefs,
     setAbstractByStandardLayout,
-    removeElements,
     insertNodes,
     insertAbstractNodes,
     setRightNodeCountByRefs,
@@ -1889,7 +1873,7 @@ const drawFakeDragNode = (board, element, offsetX, offsetY) => {
     };
     const textRectangle = getTopicRectangleByNode(board, activeComponent.node);
     const fakeNodeG = drawRoundRectangleByNode(board, fakeDraggingNode);
-    const richtextG = activeComponent.textManage.g.cloneNode(true);
+    const richtextG = MindElement.getTextManage(element).g.cloneNode(true);
     updateForeignObject(richtextG, textRectangle.width, textRectangle.height, textRectangle.x + offsetX, textRectangle.y + offsetY);
     dragFakeNodeG?.append(fakeNodeG);
     dragFakeNodeG?.append(richtextG);
@@ -2452,7 +2436,14 @@ const MindElement = {
     getTextEditor(element) {
         const component = PlaitElement.getComponent(element);
         if (component) {
-            return component.textManage.componentRef.instance.editor;
+            return MindElement.getTextManage(element).componentRef.instance.editor;
+        }
+        throw new Error('can not get correctly component in get text editor');
+    },
+    getTextManage(element) {
+        const component = PlaitElement.getComponent(element);
+        if (component) {
+            return component.textManage;
         }
         throw new Error('can not get correctly component in get text editor');
     }
@@ -3046,7 +3037,10 @@ class NodeImageDrawer {
     }
 }
 
-class MindNodeComponent extends PlaitPluginElementComponent {
+class MindNodeComponent extends CommonPluginElement {
+    get textManage() {
+        return this.getTextManages()[0];
+    }
     constructor(viewContainerRef, cdr) {
         super(cdr);
         this.viewContainerRef = viewContainerRef;
@@ -3063,8 +3057,8 @@ 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;
-        this.textManage = new TextManage(this.board, this.viewContainerRef, {
+        const plugins = this.board.getPluginOptions(WithTextPluginKey).textPlugins;
+        const textManage = new TextManage(this.board, this.viewContainerRef, {
             getRectangle: () => {
                 const rect = getTopicRectangleByNode(this.board, this.node);
                 return rect;
@@ -3089,6 +3083,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
                 }
             }
         });
+        this.initializeTextManages([textManage]);
     }
     ngOnInit() {
         super.ngOnInit();
@@ -3432,7 +3427,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) {
@@ -3481,108 +3476,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;
@@ -3803,7 +3696,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;
@@ -3843,7 +3736,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;
@@ -3851,54 +3748,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;
@@ -4067,6 +3918,7 @@ const withNodeResize = (board) => {
             PlaitBoard.getBoardContainer(board).classList.add(ResizeCursorClass['ew-resize']);
             targetElement = newTargetElement;
             startPoint = [event.x, event.y];
+            preventTouchMove(board, event, true);
             return;
         }
         pointerDown(event);
@@ -4079,7 +3931,6 @@ const withNodeResize = (board) => {
         if (startPoint && targetElement && !isMindNodeResizing(board)) {
             // prevent text from being selected
             event.preventDefault();
-            preventTouchMove(board, true);
             const endPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
             const distance = distanceBetweenPointAndPoint(startPoint[0], startPoint[1], endPoint[0], endPoint[1]);
             if (distance > PRESS_AND_MOVE_BUFFER) {
@@ -4088,7 +3939,7 @@ const withNodeResize = (board) => {
                     minWidth: NodeSpace.getNodeResizableMinWidth(board, targetElement),
                     currentWidth: NodeSpace.getNodeDynamicWidth(board, targetElement),
                     path: PlaitBoard.findPath(board, targetElement),
-                    textManage: PlaitElement.getComponent(targetElement).textManage
+                    textManage: MindElement.getTextManage(targetElement)
                 };
                 MERGING.set(board, true);
             }
@@ -4096,7 +3947,7 @@ const withNodeResize = (board) => {
         if (isMindNodeResizing(board) && startPoint && targetElementRef) {
             // prevent text from being selected
             event.preventDefault();
-            preventTouchMove(board, true);
+            preventTouchMove(board, event, true);
             throttleRAF(() => {
                 if (!startPoint) {
                     return;
@@ -4140,7 +3991,7 @@ const withNodeResize = (board) => {
             targetElement = null;
             startPoint = null;
             MERGING.set(board, false);
-            preventTouchMove(board, false);
+            preventTouchMove(board, event, false);
         }
     };
     return board;
@@ -4224,9 +4075,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;
@@ -4290,34 +4323,7 @@ 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 {
@@ -4395,9 +4401,6 @@ class MindImageBaseComponent {
             getRectangle: (element) => {
                 return getImageForeignRectangle(this.board, this.element);
             },
-            getStrokeWidthByElement: () => {
-                return 0;
-            },
             hasResizeHandle: () => true
         });
         this.initialized = true;