@plait/mind 0.26.0 → 0.27.0-next.0

package/fesm2020/plait-mind.mjs

@@ -1,10 +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, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, PlaitBoard, Path, PlaitNode, PlaitContextService, depthFirstRecursion, getIsRecursionFunc, drawLinearPath, drawBezierPath, createG, updateForeignObject, drawRoundRectangle, getRectangleByElements, getSelectedElements, NODE_TO_PARENT, distanceBetweenPointAndRectangle, createForeignObject, createText, PlaitPointerType, PlaitPluginElementComponent, NODE_TO_INDEX, PlaitModule, isMainPointer, transformPoint, toPoint, getHitElements, distanceBetweenPointAndPoint, CLIP_BOARD_FORMAT_KEY, CLIP_BOARD_IMAGE_FORMAT_KEY, BOARD_TO_HOST, throttleRAF, BoardTransforms, removeSelectedElement, PlaitHistoryBoard, hotkeys, PRESS_AND_MOVE_BUFFER, MERGING, ResizeCursorClass } 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, createText, PlaitPointerType, PlaitPluginElementComponent, NODE_TO_INDEX, PlaitModule, isMainPointer, transformPoint, toPoint, getHitElements, distanceBetweenPointAndPoint, setClipboardData, setClipboardDataByText, BOARD_TO_HOST, throttleRAF, BoardTransforms, removeSelectedElement, PlaitHistoryBoard, hotkeys, setClipboardDataByMedia, getClipboardDataByMedia, ResizeCursorClass, preventTouchMove, PRESS_AND_MOVE_BUFFER, MERGING, getDataFromClipboard } from '@plait/core';
 import { MindLayoutType, isIndentedLayout, AbstractNode, isStandardLayout, isHorizontalLogicLayout, isVerticalLogicLayout, getNonAbstractChildren, isLeftLayout, isRightLayout, isTopLayout, isBottomLayout, isHorizontalLayout, getCorrectStartEnd, ConnectingPosition, 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, getRectangleResizeTargets, MediaKeys, ResizeDirection, withResize, ActiveGenerator } from '@plait/common';
 import { Node as Node$1, Path as Path$1 } from 'slate';
 import { isKeyHotkey } from 'is-hotkey';
 import { pointsOnBezierCurves } from 'points-on-curve';
@@ -409,11 +410,20 @@ function getImageForeignRectangle(board, element) {
         width,
         height
     };
-    return RectangleClient.getOutlineRectangle(rectangle, -6);
+    return rectangle;
 }
 const isHitImage = (board, element, range) => {
-    const client = getImageForeignRectangle(board, element);
-    return RectangleClient.isHit(RectangleClient.toRectangleClient([range.anchor, range.focus]), client);
+    const imageRectangle = getImageForeignRectangle(board, element);
+    const imageOutlineRectangle = RectangleClient.getOutlineRectangle(imageRectangle, -RESIZE_HANDLE_DIAMETER / 2);
+    return RectangleClient.isHit(RectangleClient.toRectangleClient([range.anchor, range.focus]), imageOutlineRectangle);
+};
+const getHitImageResizeHandleDirection = (board, element, point) => {
+    const imageRectangle = getImageForeignRectangle(board, element);
+    const resizeTargets = getRectangleResizeTargets(imageRectangle, RESIZE_HANDLE_DIAMETER);
+    const result = resizeTargets.find(resizeTarget => {
+        return RectangleClient.isHit(RectangleClient.toRectangleClient([point, point]), resizeTarget.rectangle);
+    });
+    return result;
 };
 
 function editTopic(element) {
@@ -429,6 +439,10 @@ const temporaryDisableSelection = (board) => {
         board.setPluginOptions(PlaitPluginKey.withSelection, { ...currentOptions });
     }, 0);
 };
+const getSelectedMindElements = (board) => {
+    const selectedElements = getSelectedElements(board).filter(value => MindElement.isMindElement(board, value));
+    return selectedElements;
+};
 
 const createEmptyMind = (point) => {
     const element = createMindElement('思维导图', 72, ROOT_TOPIC_HEIGHT, { layout: MindLayoutType.right });
@@ -2373,9 +2387,7 @@ const MindElement = {
         return isIndentedLayout(_layout);
     },
     isMindElement(board, element) {
-        const path = PlaitBoard.findPath(board, element);
-        const rootElement = PlaitNode.get(board, path.slice(0, 1));
-        if (PlaitMind.isMind(rootElement)) {
+        if (element.data && element.data.topic && element.width && element.height) {
             return true;
         }
         else {
@@ -3002,7 +3014,6 @@ class NodeImageDrawer {
         this.g = createG();
         const foreignRectangle = getImageForeignRectangle(this.board, element);
         this.foreignObject = createForeignObject(foreignRectangle.x, foreignRectangle.y, foreignRectangle.width, foreignRectangle.height);
-        this.foreignObject.style.padding = `6px`;
         this.g.append(this.foreignObject);
         const componentType = this.board.getPluginOptions(WithMindPluginKey).imageComponentType;
         if (!componentType) {
@@ -3065,19 +3076,23 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         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 rect = getTopicRectangleByNode(this.board, this.node);
-            return rect;
-        }, (textManageRef) => {
-            const width = textManageRef.width;
-            const height = textManageRef.height;
-            if (textManageRef.newValue) {
-                MindTransforms.setTopic(this.board, this.element, textManageRef.newValue, width, height);
-            }
-            else {
-                MindTransforms.setTopicSize(this.board, this.element, width, height);
-            }
-        }, plugins);
+        this.textManage = new TextManage(this.board, this.viewContainerRef, {
+            getRectangle: () => {
+                const rect = getTopicRectangleByNode(this.board, this.node);
+                return rect;
+            },
+            onValueChangeHandle: (textManageRef) => {
+                const width = textManageRef.width;
+                const height = textManageRef.height;
+                if (textManageRef.newValue) {
+                    MindTransforms.setTopic(this.board, this.element, textManageRef.newValue, width, height);
+                }
+                else {
+                    MindTransforms.setTopicSize(this.board, this.element, width, height);
+                }
+            },
+            textPlugins: plugins
+        });
     }
     ngOnInit() {
         super.ngOnInit();
@@ -3320,7 +3335,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
 
 const DRAG_MOVE_BUFFER = 5;
 const withNodeDnd = (board) => {
-    const { mousedown, mousemove, globalMouseup } = board;
+    const { pointerDown, pointerMove, globalPointerUp } = board;
     let activeElements = [];
     let correspondingElements = [];
     let startPoint;
@@ -3328,12 +3343,12 @@ const withNodeDnd = (board) => {
     let fakeDropNodeG;
     let dropTarget = null;
     let targetPath;
-    board.mousedown = (event) => {
+    board.pointerDown = (event) => {
         if (PlaitBoard.isReadonly(board) ||
             PlaitBoard.hasBeenTextEditing(board) ||
             !PlaitBoard.isPointer(board, PlaitPointerType.selection) ||
             !isMainPointer(event)) {
-            mousedown(event);
+            pointerDown(event);
             return;
         }
         const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
@@ -3360,9 +3375,9 @@ const withNodeDnd = (board) => {
         if (activeElements.length) {
             correspondingElements = getOverallAbstracts(board, activeElements);
         }
-        mousedown(event);
+        pointerDown(event);
     };
-    board.mousemove = (event) => {
+    board.pointerMove = (event) => {
         if (!board.options.readonly && activeElements?.length && startPoint) {
             // prevent text from being selected
             event.preventDefault();
@@ -3393,9 +3408,9 @@ const withNodeDnd = (board) => {
             });
             PlaitBoard.getHost(board).appendChild(dragFakeNodeG);
         }
-        mousemove(event);
+        pointerMove(event);
     };
-    board.globalMouseup = (event) => {
+    board.globalPointerUp = (event) => {
         const firstLevelElements = getFirstLevelElement(activeElements);
         if (!board.options.readonly && firstLevelElements.length) {
             firstLevelElements.push(...correspondingElements);
@@ -3484,12 +3499,12 @@ const withNodeDnd = (board) => {
             fakeDropNodeG = undefined;
             dropTarget = null;
         }
-        globalMouseup(event);
+        globalPointerUp(event);
     };
     return board;
 };
 
-const buildClipboardData = (board, selectedElements) => {
+const buildClipboardData = (board, selectedElements, startPoint) => {
     let result = [];
     // get overall abstract
     const overallAbstracts = getOverallAbstracts(board, selectedElements);
@@ -3499,11 +3514,10 @@ const buildClipboardData = (board, selectedElements) => {
     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));
-    const nodesRectangle = getRectangleByElements(board, newSelectedElements, true);
     newSelectedElements.forEach((element, index) => {
         // handle relative location
         const nodeRectangle = getRectangleByNode(selectedMindNodes[index]);
-        const points = [[nodeRectangle.x - nodesRectangle.x, nodeRectangle.y - nodesRectangle.y]];
+        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) {
@@ -3532,37 +3546,12 @@ const buildClipboardData = (board, selectedElements) => {
     });
     return result;
 };
-const setClipboardData = (data, elements) => {
-    const stringObj = JSON.stringify(elements);
-    const encoded = window.btoa(encodeURIComponent(stringObj));
+const setMindClipboardData = (data, elements) => {
     const text = elements.reduce((string, currentNode) => {
         return string + extractNodesText(currentNode);
     }, '');
-    data?.setData(`application/${CLIP_BOARD_FORMAT_KEY}`, encoded);
-    data?.setData(`text/plain`, text);
-};
-const setClipboardDataByImage = (data, image) => {
-    const stringObj = JSON.stringify(image);
-    const encoded = window.btoa(encodeURIComponent(stringObj));
-    data?.setData(`application/${CLIP_BOARD_IMAGE_FORMAT_KEY}`, encoded);
-};
-const getImageItemFromClipboard = (data) => {
-    const encoded = data?.getData(`application/${CLIP_BOARD_IMAGE_FORMAT_KEY}`);
-    let imageItem = null;
-    if (encoded) {
-        const decoded = decodeURIComponent(window.atob(encoded));
-        imageItem = JSON.parse(decoded);
-    }
-    return imageItem;
-};
-const getDataFromClipboard = (data) => {
-    const encoded = data?.getData(`application/${CLIP_BOARD_FORMAT_KEY}`);
-    let nodesData = [];
-    if (encoded) {
-        const decoded = decodeURIComponent(window.atob(encoded));
-        nodesData = JSON.parse(decoded);
-    }
-    return nodesData;
+    setClipboardData(data, elements);
+    setClipboardDataByText(data, text);
 };
 const insertClipboardData = (board, elements, targetPoint) => {
     let newElement, path;
@@ -3763,8 +3752,10 @@ const withCreateMind = (board) => {
                     const nodeG = drawRoundRectangleByElement(board, nodeRectangle, emptyMind);
                     const topicRectangle = getTopicRectangleByElement(newBoard, nodeRectangle, emptyMind);
                     if (!fakeCreateNodeRef) {
-                        const textManage = new TextManage(board, PlaitBoard.getComponent(board).viewContainerRef, () => {
-                            return topicRectangle;
+                        const textManage = new TextManage(board, PlaitBoard.getComponent(board).viewContainerRef, {
+                            getRectangle: () => {
+                                return topicRectangle;
+                            }
                         });
                         PlaitBoard.getComponent(board)
                             .viewContainerRef.injector.get(NgZone)
@@ -3833,7 +3824,7 @@ const withCreateMind = (board) => {
 
 const withMindHotkey = (baseBoard) => {
     const board = baseBoard;
-    const { keydown } = board;
+    const { keydown, deleteFragment } = board;
     board.keydown = (event) => {
         const selectedElements = getSelectedElements(board);
         const isSingleSelection = selectedElements.length === 1;
@@ -3873,24 +3864,6 @@ const withMindHotkey = (baseBoard) => {
                 insertMindElement(board, targetElement, findNewSiblingNodePath(board, targetElement));
                 return;
             }
-            if (selectedElements.length > 0 && (hotkeys.isDeleteBackward(event) || hotkeys.isDeleteForward(event))) {
-                event.preventDefault();
-                const targetMindElements = selectedElements.filter(el => MindElement.isMindElement(board, el));
-                const firstLevelElements = getFirstLevelElement(targetMindElements);
-                if (firstLevelElements.length > 0) {
-                    const deletableElements = [...firstLevelElements].reverse();
-                    const abstractRefs = deleteElementHandleAbstract(board, deletableElements);
-                    MindTransforms.setAbstractsByRefs(board, abstractRefs);
-                    const refs = deleteElementsHandleRightNodeCount(board, targetMindElements);
-                    MindTransforms.setRightNodeCountByRefs(board, refs);
-                    MindTransforms.removeElements(board, targetMindElements);
-                    const nextSelected = getNextSelectedElement(board, firstLevelElements);
-                    if (nextSelected) {
-                        addSelectedElement(board, nextSelected);
-                    }
-                }
-                return;
-            }
             if (!isVirtualKey(event) && !isSpaceHotkey(event) && isSingleSelection) {
                 event.preventDefault();
                 editTopic(targetElement);
@@ -3899,6 +3872,22 @@ 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) => {
@@ -4011,24 +4000,24 @@ const withNodeHoverDetect = (board) => {
 };
 
 const withNodeImage = (board) => {
-    const { keydown, mousedown, globalMouseup, setFragment, insertFragment, deleteFragment } = board;
-    board.mousedown = (event) => {
+    const { keydown, pointerDown, globalPointerUp, setFragment, insertFragment, deleteFragment } = board;
+    board.pointerDown = (event) => {
         const selectedImageElement = getSelectedImageElement(board);
         if (PlaitBoard.isReadonly(board) || !isMainPointer(event) || !PlaitBoard.isPointer(board, PlaitPointerType.selection)) {
             if (selectedImageElement) {
                 setImageFocus(board, selectedImageElement, false);
             }
-            mousedown(event);
+            pointerDown(event);
             return;
         }
         const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
         const range = { anchor: point, focus: point };
-        const hitElements = getHitElements(board, { ranges: [range] });
-        const hasImage = hitElements.length && MindElement.hasImage(hitElements[0]);
-        const hitImage = hasImage && isHitImage(board, hitElements[0], range);
-        if (selectedImageElement && hitImage && hitElements[0] === selectedImageElement) {
+        const hitImageElements = getHitElements(board, { ranges: [range] }, (value) => MindElement.isMindElement(board, value) && MindElement.hasImage(value));
+        const hasImage = hitImageElements.length;
+        const hitImage = hasImage > 0 && isHitImage(board, hitImageElements[0], range);
+        if (selectedImageElement && hitImage && hitImageElements[0] === selectedImageElement) {
             temporaryDisableSelection(board);
-            mousedown(event);
+            pointerDown(event);
             return;
         }
         if (selectedImageElement) {
@@ -4036,9 +4025,9 @@ const withNodeImage = (board) => {
         }
         if (hitImage) {
             temporaryDisableSelection(board);
-            setImageFocus(board, hitElements[0], true);
+            setImageFocus(board, hitImageElements[0], true);
         }
-        mousedown(event);
+        pointerDown(event);
     };
     board.keydown = (event) => {
         const selectedImageElement = getSelectedImageElement(board);
@@ -4049,7 +4038,7 @@ const withNodeImage = (board) => {
         }
         keydown(event);
     };
-    board.globalMouseup = (event) => {
+    board.globalPointerUp = (event) => {
         if (PlaitBoard.isFocus(board)) {
             const isInBoard = event.target instanceof Node && PlaitBoard.getBoardContainer(board).contains(event.target);
             const selectedImageElement = getSelectedImageElement(board);
@@ -4058,15 +4047,15 @@ const withNodeImage = (board) => {
                 setImageFocus(board, selectedImageElement, false);
             }
         }
-        globalMouseup(event);
+        globalPointerUp(event);
     };
-    board.setFragment = (data) => {
+    board.setFragment = (data, rectangle) => {
         const selectedImageElement = getSelectedImageElement(board);
         if (selectedImageElement) {
-            setClipboardDataByImage(data, selectedImageElement.data.image);
+            setClipboardDataByMedia(data, selectedImageElement.data.image, MediaKeys.image);
             return;
         }
-        setFragment(data);
+        setFragment(data, rectangle);
     };
     board.deleteFragment = (data) => {
         const selectedImageElement = getSelectedImageElement(board);
@@ -4088,10 +4077,11 @@ const withNodeImage = (board) => {
                 return;
             }
         }
-        const imageItem = getImageItemFromClipboard(data);
+        const imageItem = getClipboardDataByMedia(data, MediaKeys.image);
         if (imageItem && (isSingleSelection || isSelectedImage)) {
             const selectedElement = (selectedElements[0] || getSelectedImageElement(board));
             MindTransforms.setImage(board, selectedElement, imageItem);
+            return;
         }
         insertFragment(data, targetPoint);
     };
@@ -4099,25 +4089,30 @@ const withNodeImage = (board) => {
 };
 
 const withNodeResize = (board) => {
-    const { mousedown, mousemove, globalMouseup } = board;
+    const { pointerDown, pointerMove, globalPointerUp } = board;
     let targetElement = null;
     let targetElementRef = null;
     let startPoint = null;
-    board.mousedown = (event) => {
-        if (targetElement) {
+    board.pointerDown = (event) => {
+        const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+        const newTargetElement = getSelectedTarget(board, point);
+        if (newTargetElement) {
+            PlaitBoard.getBoardContainer(board).classList.add(ResizeCursorClass['ew-resize']);
+            targetElement = newTargetElement;
             startPoint = [event.x, event.y];
             return;
         }
-        mousedown(event);
+        pointerDown(event);
     };
-    board.mousemove = (event) => {
+    board.pointerMove = (event) => {
         if (PlaitBoard.isReadonly(board) || PlaitBoard.hasBeenTextEditing(board)) {
-            mousemove(event);
+            pointerMove(event);
             return;
         }
         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) {
@@ -4134,6 +4129,7 @@ const withNodeResize = (board) => {
         if (isMindNodeResizing(board) && startPoint && targetElementRef) {
             // prevent text from being selected
             event.preventDefault();
+            preventTouchMove(board, true);
             throttleRAF(() => {
                 if (!startPoint) {
                     return;
@@ -4158,26 +4154,26 @@ const withNodeResize = (board) => {
             // press and start drag when node is non selected
             if (!isDragging(board)) {
                 const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-                const newTargetElement = getTargetElement(board, point);
+                const newTargetElement = getSelectedTarget(board, point);
                 if (newTargetElement) {
                     PlaitBoard.getBoardContainer(board).classList.add(ResizeCursorClass['ew-resize']);
                 }
                 else {
                     PlaitBoard.getBoardContainer(board).classList.remove(ResizeCursorClass['ew-resize']);
                 }
-                targetElement = newTargetElement;
             }
         }
-        mousemove(event);
+        pointerMove(event);
     };
-    board.globalMouseup = (event) => {
-        globalMouseup(event);
+    board.globalPointerUp = (event) => {
+        globalPointerUp(event);
         if (isMindNodeResizing(board) || targetElement) {
             targetElement && removeResizing(board, targetElement);
             targetElementRef = null;
             targetElement = null;
             startPoint = null;
             MERGING.set(board, false);
+            preventTouchMove(board, false);
         }
     };
     return board;
@@ -4201,7 +4197,7 @@ const removeResizing = (board, element) => {
     }
     IS_MIND_NODE_RESIZING.set(board, false);
 };
-const getTargetElement = (board, point) => {
+const getSelectedTarget = (board, point) => {
     const selectedElements = getSelectedElements(board).filter(value => MindElement.isMindElement(board, value));
     if (selectedElements.length > 0) {
         const target = selectedElements.find(value => {
@@ -4218,9 +4214,52 @@ const getResizeActiveRectangle = (board, element) => {
     return { x: rectangle.x + rectangle.width - EXTEND_OFFSET, y: rectangle.y, width: EXTEND_OFFSET * 2, height: rectangle.height };
 };
 
+const withNodeImageResize = (board) => {
+    const options = {
+        key: 'mind-node-image',
+        canResize: () => {
+            return true;
+        },
+        detect: (point) => {
+            const selectedMindElement = getSelectedImageElement(board);
+            if (selectedMindElement) {
+                const result = getHitImageResizeHandleDirection(board, selectedMindElement, point);
+                if (result) {
+                    return {
+                        element: selectedMindElement,
+                        direction: result.direction,
+                        cursorClass: result.cursorClass
+                    };
+                }
+            }
+            return null;
+        },
+        onResize: (resizeRef, resizeState) => {
+            let offsetX = resizeState.offsetX;
+            let offsetY = resizeState.offsetY;
+            if (resizeRef.direction === ResizeDirection.nw || resizeRef.direction === ResizeDirection.sw) {
+                offsetX = -offsetX;
+            }
+            const originWidth = resizeRef.element.data.image.width;
+            const originHeight = resizeRef.element.data.image.height;
+            let width = originWidth + offsetX;
+            if (width <= 100) {
+                width = 100;
+            }
+            const ratio = originWidth / width;
+            const height = originHeight / ratio;
+            const imageItem = { ...resizeRef.element.data.image, width, height };
+            MindTransforms.setImage(board, PlaitNode.get(board, resizeRef.path), imageItem);
+            addSelectedImageElement(board, PlaitNode.get(board, resizeRef.path));
+        }
+    };
+    withResize(board, options);
+    return board;
+};
+
 const withMind = (baseBoard) => {
     const board = baseBoard;
-    const { drawElement, dblclick, insertFragment, setFragment, deleteFragment, isHitSelection, getRectangle, isMovable, isRecursion } = board;
+    const { drawElement, dblclick, insertFragment, setFragment, isHitSelection, getRectangle, isMovable, isRecursion } = board;
     board.drawElement = (context) => {
         if (PlaitMind.isMind(context.element)) {
             return PlaitMindComponent;
@@ -4284,48 +4323,34 @@ const withMind = (baseBoard) => {
         }
         dblclick(event);
     };
-    board.setFragment = (data) => {
-        const selectedElements = getFirstLevelElement(getSelectedElements(board));
-        if (selectedElements.length) {
-            const elements = buildClipboardData(board, selectedElements);
-            setClipboardData(data, elements);
-            return;
-        }
-        setFragment(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) => {
-        if (board.options.readonly) {
-            insertFragment(data, targetPoint);
-            return;
-        }
         const elements = getDataFromClipboard(data);
-        if (elements.length) {
-            insertClipboardData(board, elements, targetPoint || [0, 0]);
+        const mindElements = elements.filter(value => MindElement.isMindElement(board, value));
+        if (elements.length > 0 && mindElements.length > 0) {
+            insertClipboardData(board, mindElements, targetPoint);
         }
-        else {
-            const selectedElements = getSelectedElements(board);
-            if (selectedElements.length === 1) {
+        else if (elements.length === 0) {
+            const mindElements = getSelectedMindElements(board);
+            if (mindElements.length === 1) {
                 const text = getTextFromClipboard(data);
                 if (text) {
-                    insertClipboardText(board, selectedElements[0], buildText(text));
+                    insertClipboardText(board, mindElements[0], buildText(text));
+                    return;
                 }
             }
         }
         insertFragment(data, targetPoint);
     };
-    board.deleteFragment = (data) => {
-        const selectedElements = getSelectedElements(board);
-        if (selectedElements.length) {
-            const deletableElements = getFirstLevelElement(selectedElements).reverse();
-            const abstractRefs = deleteElementHandleAbstract(board, deletableElements);
-            MindTransforms.setAbstractsByRefs(board, abstractRefs);
-            const refs = deleteElementsHandleRightNodeCount(board, selectedElements);
-            MindTransforms.setRightNodeCountByRefs(board, refs);
-            MindTransforms.removeElements(board, selectedElements);
-        }
-        deleteFragment(data);
-    };
-    return withNodeResize(withNodeImage(withNodeHoverDetect(withMindHotkey(withMindExtend(withCreateMind(withAbstract(withNodeDnd(board))))))));
+    return withNodeResize(withNodeImageResize(withNodeImage(withNodeHoverDetect(withMindHotkey(withMindExtend(withCreateMind(withAbstract(withNodeDnd(board)))))))));
 };
 
 class MindEmojiBaseComponent {
@@ -4375,17 +4400,43 @@ class MindImageBaseComponent {
     set imageItem(value) {
         this.afterImageItemChange(this._imageItem, value);
         this._imageItem = value;
+        this.drawFocus();
     }
     get imageItem() {
         return this._imageItem;
     }
+    set isFocus(value) {
+        this._isFocus = value;
+        this.drawFocus();
+    }
+    get isFocus() {
+        return this._isFocus;
+    }
     get nativeElement() {
         return this.elementRef.nativeElement;
     }
     constructor(elementRef, cdr) {
         this.elementRef = elementRef;
         this.cdr = cdr;
-        this.isFocus = false;
+        this.initialized = false;
+    }
+    ngOnInit() {
+        this.activeGenerator = new ActiveGenerator(this.board, {
+            activeStrokeWidth: 1,
+            getRectangle: (element) => {
+                return getImageForeignRectangle(this.board, this.element);
+            },
+            getStrokeWidthByElement: () => {
+                return 0;
+            }
+        });
+        this.initialized = true;
+    }
+    drawFocus() {
+        if (this.initialized) {
+            const com = PlaitElement.getComponent(this.element);
+            this.activeGenerator.draw(this.element, com.g, { selected: this._isFocus });
+        }
     }
 }
 MindImageBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindImageBaseComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -4415,5 +4466,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, AbstractHandlePosition, AbstractResizeState, BASE, BRANCH_FONT_FAMILY, BRANCH_WIDTH, BaseDrawer, BranchShape, DEFAULT_FONT_FAMILY, DefaultAbstractNodeStyle, DefaultNodeStyle, ELEMENT_TO_NODE, EXTEND_DIAMETER, EXTEND_OFFSET, GRAY_COLOR, INHERIT_ATTRIBUTE_KEYS, IS_DRAGGING, LayoutDirection, LayoutDirectionsMap, MindColorfulThemeColor, MindDarkThemeColor, MindDefaultThemeColor, MindElement, MindElementShape, MindEmojiBaseComponent, MindImageBaseComponent, MindModule, MindNode, MindNodeComponent, MindPointerType, MindQueries, MindRetroThemeColor, MindSoftThemeColor, MindStarryThemeColor, MindThemeColor, MindThemeColors, MindTransforms, NodeSpace, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, QUICK_INSERT_CIRCLE_COLOR, QUICK_INSERT_CIRCLE_OFFSET, QUICK_INSERT_INNER_CROSS_COLOR, ROOT_TOPIC_FONT_SIZE, ROOT_TOPIC_HEIGHT, STROKE_WIDTH, TOPIC_COLOR, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, TRANSPARENT, WithMindPluginKey, addActiveOnDragOrigin, addSelectedImageElement, adjustAbstractToNode, adjustNodeToRoot, adjustRootToNode, buildImage, canSetAbstract, copyNewNode, correctLayoutByDirection, createDefaultMind, createEmptyMind, createMindElement, deleteElementHandleAbstract, deleteElementsHandleRightNodeCount, detectDropTarget, directionCorrector, directionDetector, divideElementByParent, drawFakeDragNode, drawFakeDropNode, editTopic, extractNodesText, findLastChild, findLocationLeftIndex, getAbstractBranchColor, getAbstractBranchWidth, getAbstractHandleRectangle, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getBranchShapeByMindElement, getBranchWidthByMindElement, getChildrenCount, getCorrespondingAbstract, getDefaultBranchColor, getDefaultBranchColorByIndex, getDefaultLayout, getEmojiFontSize, getEmojiForeignRectangle, getEmojiRectangle, getEmojisWidthHeight, getFillByElement, getFirstLevelElement, getFontSizeBySlateElement, getHitAbstractHandle, getImageForeignRectangle, getInCorrectLayoutDirection, getLayoutDirection$1 as getLayoutDirection, getLayoutOptions, getLayoutReverseDirection, getLocationScope, getMindThemeColor, getNewNodeHeight, getNextBranchColor, getNodeDefaultFontSize, getOverallAbstracts, getPathByDropTarget, getRectangleByElement, getRectangleByNode, getRectangleByResizingLocation, getRelativeStartEndByAbstractRef, getRootLayout, getSelectedImageElement, getShapeByElement, getStrokeByMindElement, getStrokeWidthByElement, getTopicRectangleByElement, getTopicRectangleByNode, getValidAbstractRefs, handleTouchedAbstract, hasAfterDraw, hasPreviousOrNextOfDropPath, insertElementHandleAbstract, insertElementHandleRightNodeCount, insertMindElement, isChildElement, isChildOfAbstract, isChildRight, isChildUp, isCorrectLayout, isDragging, isDropStandardRight, isHitEmojis, isHitImage, isHitMindElement, isInRightBranchOfStandardLayout, isMixedLayout, isSetAbstract, isValidTarget, isVirtualKey, removeActiveOnDragOrigin, removeSelectedImageElement, selectImage, separateChildren, setImageFocus, setIsDragging, temporaryDisableSelection, withMind, withMindExtend };
+export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, AbstractHandlePosition, AbstractResizeState, BASE, BRANCH_FONT_FAMILY, BRANCH_WIDTH, BaseDrawer, BranchShape, DEFAULT_FONT_FAMILY, DefaultAbstractNodeStyle, DefaultNodeStyle, ELEMENT_TO_NODE, EXTEND_DIAMETER, EXTEND_OFFSET, GRAY_COLOR, INHERIT_ATTRIBUTE_KEYS, IS_DRAGGING, LayoutDirection, LayoutDirectionsMap, MindColorfulThemeColor, MindDarkThemeColor, MindDefaultThemeColor, MindElement, MindElementShape, MindEmojiBaseComponent, MindImageBaseComponent, MindModule, MindNode, MindNodeComponent, MindPointerType, MindQueries, MindRetroThemeColor, MindSoftThemeColor, MindStarryThemeColor, MindThemeColor, MindThemeColors, MindTransforms, NodeSpace, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, QUICK_INSERT_CIRCLE_COLOR, QUICK_INSERT_CIRCLE_OFFSET, QUICK_INSERT_INNER_CROSS_COLOR, ROOT_TOPIC_FONT_SIZE, ROOT_TOPIC_HEIGHT, STROKE_WIDTH, TOPIC_COLOR, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, TRANSPARENT, WithMindPluginKey, addActiveOnDragOrigin, addSelectedImageElement, adjustAbstractToNode, adjustNodeToRoot, adjustRootToNode, buildImage, canSetAbstract, copyNewNode, correctLayoutByDirection, createDefaultMind, createEmptyMind, createMindElement, deleteElementHandleAbstract, deleteElementsHandleRightNodeCount, detectDropTarget, directionCorrector, directionDetector, divideElementByParent, drawFakeDragNode, drawFakeDropNode, editTopic, extractNodesText, findLastChild, findLocationLeftIndex, getAbstractBranchColor, getAbstractBranchWidth, getAbstractHandleRectangle, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getBranchShapeByMindElement, getBranchWidthByMindElement, getChildrenCount, getCorrespondingAbstract, getDefaultBranchColor, getDefaultBranchColorByIndex, getDefaultLayout, getEmojiFontSize, getEmojiForeignRectangle, getEmojiRectangle, getEmojisWidthHeight, getFillByElement, getFirstLevelElement, getFontSizeBySlateElement, getHitAbstractHandle, getHitImageResizeHandleDirection, getImageForeignRectangle, getInCorrectLayoutDirection, getLayoutDirection$1 as getLayoutDirection, getLayoutOptions, getLayoutReverseDirection, getLocationScope, getMindThemeColor, getNewNodeHeight, getNextBranchColor, getNodeDefaultFontSize, getOverallAbstracts, getPathByDropTarget, getRectangleByElement, getRectangleByNode, getRectangleByResizingLocation, getRelativeStartEndByAbstractRef, getRootLayout, getSelectedImageElement, getSelectedMindElements, getShapeByElement, getStrokeByMindElement, getStrokeWidthByElement, getTopicRectangleByElement, getTopicRectangleByNode, getValidAbstractRefs, handleTouchedAbstract, hasAfterDraw, hasPreviousOrNextOfDropPath, insertElementHandleAbstract, insertElementHandleRightNodeCount, insertMindElement, isChildElement, isChildOfAbstract, isChildRight, isChildUp, isCorrectLayout, isDragging, isDropStandardRight, isHitEmojis, isHitImage, isHitMindElement, isInRightBranchOfStandardLayout, isMixedLayout, isSetAbstract, isValidTarget, isVirtualKey, removeActiveOnDragOrigin, removeSelectedImageElement, selectImage, separateChildren, setImageFocus, setIsDragging, temporaryDisableSelection, withMind, withMindExtend };
 //# sourceMappingURL=plait-mind.mjs.map