@plait/mind 0.20.0 → 0.22.0

package/fesm2020/plait-mind.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
 import { Directive, Input, Component, ChangeDetectionStrategy, NgModule, NgZone, HostListener } from '@angular/core';
 import * as i2 from '@plait/core';
-import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, RectangleClient, PlaitElement, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, PlaitNode, Path, PlaitBoard, 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, BOARD_TO_HOST, PlaitPluginKey, throttleRAF, BoardTransforms, removeSelectedElement, PlaitHistoryBoard, hotkeys } from '@plait/core';
+import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, RectangleClient, PlaitElement, PlaitPluginKey, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, PlaitNode, Path, PlaitBoard, 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, BOARD_TO_HOST, throttleRAF, BoardTransforms, removeSelectedElement, PlaitHistoryBoard, hotkeys, PRESS_AND_MOVE_BUFFER, MERGING, ResizeCursorClass } from '@plait/core';
 import { MindLayoutType, isIndentedLayout, AbstractNode, getNonAbstractChildren, isStandardLayout, isLeftLayout, isRightLayout, isVerticalLogicLayout, isHorizontalLogicLayout, isTopLayout, isBottomLayout, isHorizontalLayout, getCorrectStartEnd, getAbstractLayout, ConnectingPosition, 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 { Node, Path as Path$1 } from 'slate';
+import { Node as Node$1, Path as Path$1 } from 'slate';
 import { isKeyHotkey } from 'is-hotkey';
 import { pointsOnBezierCurves } from 'points-on-curve';
 import { take, filter } from 'rxjs/operators';
@@ -220,11 +220,11 @@ const BRANCH_FONT_FAMILY = 'PingFangSC-Medium, "PingFang SC"';
 
 const NodeDefaultSpace = {
     horizontal: {
-        nodeAndText: BASE * 3,
+        nodeAndText: BASE * 2.5,
         emojiAndText: BASE * 1.5
     },
     vertical: {
-        nodeAndText: BASE * 1.5,
+        nodeAndText: BASE,
         nodeAndImage: BASE,
         imageAndText: BASE * 1.5
     }
@@ -241,12 +241,14 @@ const RootDefaultSpace = {
 const getHorizontalSpaceBetweenNodeAndText = (board, element) => {
     const isMind = PlaitMind.isMind(element);
     const nodeAndText = isMind ? RootDefaultSpace.horizontal.nodeAndText : NodeDefaultSpace.horizontal.nodeAndText;
-    return nodeAndText;
+    const strokeWidth = getStrokeWidthByElement(board, element);
+    return nodeAndText + strokeWidth / 2;
 };
-const getVerticalSpaceBetweenNodeAndText = (element) => {
+const getVerticalSpaceBetweenNodeAndText = (board, element) => {
     const isMind = PlaitMind.isMind(element);
+    const strokeWidth = getStrokeWidthByElement(board, element);
     const nodeAndText = isMind ? RootDefaultSpace.vertical.nodeAndText : NodeDefaultSpace.vertical.nodeAndText;
-    return nodeAndText;
+    return nodeAndText + strokeWidth / 2;
 };
 const getSpaceEmojiAndText = (element) => {
     const isMind = PlaitMind.isMind(element);
@@ -266,19 +268,16 @@ const NodeSpace = {
         return nodeAndText + NodeSpace.getNodeResizableWidth(board, element) + nodeAndText;
     },
     getNodeHeight(board, element) {
-        const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
+        const nodeAndText = getVerticalSpaceBetweenNodeAndText(board, element);
         if (MindElement.hasImage(element)) {
-            return (NodeDefaultSpace.vertical.nodeAndImage +
-                element.data.image.height +
-                NodeDefaultSpace.vertical.imageAndText +
-                element.height +
-                nodeAndText);
+            return NodeSpace.getTextTopSpace(board, element) + element.height + nodeAndText;
         }
         return nodeAndText + element.height + nodeAndText;
     },
     getNodeResizableWidth(board, element) {
+        const width = element.manualWidth || element.width;
         const imageWidth = MindElement.hasImage(element) ? element.data.image?.width : 0;
-        return Math.max(element.width, imageWidth);
+        return Math.max(width, imageWidth);
     },
     getNodeResizableMinWidth(board, element) {
         const minTopicWidth = NodeSpace.getNodeTopicMinWidth(board, element);
@@ -305,25 +304,27 @@ const NodeSpace = {
             return nodeAndText;
         }
     },
-    getTextTopSpace(element) {
-        const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
+    getTextTopSpace(board, element) {
+        const nodeAndText = getVerticalSpaceBetweenNodeAndText(board, element);
         if (MindElement.hasImage(element)) {
-            return element.data.image.height + NodeDefaultSpace.vertical.nodeAndImage + NodeDefaultSpace.vertical.imageAndText;
+            return NodeSpace.getImageTopSpace(board, element) + element.data.image.height + NodeDefaultSpace.vertical.imageAndText;
         }
         else {
             return nodeAndText;
         }
     },
-    getImageTopSpace(element) {
-        return NodeDefaultSpace.vertical.nodeAndImage;
+    getImageTopSpace(board, element) {
+        const strokeWidth = getStrokeWidthByElement(board, element);
+        return strokeWidth / 2 + NodeDefaultSpace.vertical.nodeAndImage;
     },
     getEmojiLeftSpace(board, element) {
         const options = board.getPluginOptions(WithMindPluginKey);
         const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
-        return nodeAndText - options.emojiPadding;
+        const strokeWidth = getStrokeWidthByElement(board, element);
+        return strokeWidth / 2 + nodeAndText - options.emojiPadding;
     },
-    getEmojiTopSpace(element) {
-        const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
+    getEmojiTopSpace(board, element) {
+        const nodeAndText = getVerticalSpaceBetweenNodeAndText(board, element);
         return nodeAndText;
     }
 };
@@ -376,23 +377,28 @@ function getTopicRectangleByNode(board, node) {
 }
 function getTopicRectangleByElement(board, nodeRectangle, element) {
     const x = nodeRectangle.x + NodeSpace.getTextLeftSpace(board, element);
-    const y = nodeRectangle.y + NodeSpace.getTextTopSpace(element);
-    const width = Math.ceil(element.width);
+    const y = nodeRectangle.y + NodeSpace.getTextTopSpace(board, element);
+    const width = NodeSpace.getNodeResizableWidth(board, element);
     const height = Math.ceil(element.height);
     return { height, width, x, y };
 }
 
 function getImageForeignRectangle(board, element) {
     let { x, y } = getRectangleByNode(MindElement.getNode(element));
-    x = x + NodeSpace.getTextLeftSpace(board, element);
-    y = NodeSpace.getImageTopSpace(element) + y;
+    const elementWidth = element.manualWidth || element.width;
+    x =
+        elementWidth > element.data.image.width
+            ? x + NodeSpace.getTextLeftSpace(board, element) + (elementWidth - element.data.image.width) / 2
+            : x + NodeSpace.getTextLeftSpace(board, element);
+    y = NodeSpace.getImageTopSpace(board, element) + y;
     const { width, height } = element.data.image;
-    return {
+    const rectangle = {
         x,
         y,
         width,
         height
     };
+    return RectangleClient.getOutlineRectangle(rectangle, -6);
 }
 const isHitImage = (board, element, range) => {
     const client = getImageForeignRectangle(board, element);
@@ -403,6 +409,15 @@ function editTopic(element) {
     const component = PlaitElement.getComponent(element);
     component?.editTopic();
 }
+const temporaryDisableSelection = (board) => {
+    const currentOptions = board.getPluginOptions(PlaitPluginKey.withSelection);
+    board.setPluginOptions(PlaitPluginKey.withSelection, {
+        isDisabledSelect: true
+    });
+    setTimeout(() => {
+        board.setPluginOptions(PlaitPluginKey.withSelection, { ...currentOptions });
+    }, 0);
+};
 
 const createEmptyMind = (point) => {
     const element = createMindElement('思维导图', 72, ROOT_TOPIC_HEIGHT, { layout: MindLayoutType.right });
@@ -498,7 +513,7 @@ const copyNewNode = (node) => {
 const extractNodesText = (node) => {
     let str = '';
     if (node) {
-        str += Node.string(node.data.topic) + ' ';
+        str += Node$1.string(node.data.topic) + ' ';
         for (const childNode of node.children) {
             str += extractNodesText(childNode);
         }
@@ -666,7 +681,7 @@ const adjustAbstractToNode = (node) => {
 };
 const adjustNodeToRoot = (board, node) => {
     const newElement = { ...node };
-    if (!Node.string(newElement.data.topic)) {
+    if (!Node$1.string(newElement.data.topic)) {
         newElement.data.topic = { children: [{ text: '思维导图' }] };
     }
     delete newElement?.strokeColor;
@@ -688,6 +703,28 @@ const adjustNodeToRoot = (board, node) => {
     };
 };
 
+const BOARD_TO_SELECTED_IMAGE_ELEMENT = new WeakMap();
+const getSelectedImageElement = (board) => {
+    return BOARD_TO_SELECTED_IMAGE_ELEMENT.get(board);
+};
+const addSelectedImageElement = (board, element) => {
+    BOARD_TO_SELECTED_IMAGE_ELEMENT.set(board, element);
+};
+const removeSelectedImageElement = (board) => {
+    BOARD_TO_SELECTED_IMAGE_ELEMENT.delete(board);
+};
+const setImageFocus = (board, element, isFocus) => {
+    if (isFocus) {
+        addSelectedImageElement(board, element);
+    }
+    else {
+        removeSelectedImageElement(board);
+    }
+    const elementComponent = PlaitElement.getComponent(element);
+    elementComponent.imageDrawer.componentRef.instance.isFocus = isFocus;
+    elementComponent.imageDrawer.componentRef.instance.cdr.markForCheck();
+};
+
 const DefaultAbstractNodeStyle = {
     branch: { color: GRAY_COLOR, width: 2 },
     shape: {
@@ -2302,11 +2339,22 @@ const setTopic = (board, element, topic, width, height) => {
     const path = PlaitBoard.findPath(board, element);
     Transforms.setNode(board, newElement, path);
 };
+const setNodeManualWidth = (board, element, width, height) => {
+    const path = PlaitBoard.findPath(board, element);
+    const { width: normalizedWidth, height: normalizedHeight } = normalizeWidthAndHeight(board, element, width, height);
+    const newElement = { manualWidth: normalizedWidth, height: normalizedHeight };
+    Transforms.setNode(board, newElement, path);
+};
 const setTopicSize = (board, element, width, height) => {
     const newElement = {
         ...normalizeWidthAndHeight(board, element, width, height)
     };
-    if (Math.floor(element.width) !== Math.floor(newElement.width) || Math.floor(element.height) !== Math.floor(newElement.height)) {
+    let isEqualWidth = Math.ceil(element.width) === Math.ceil(newElement.width);
+    let isEqualHeight = Math.ceil(element.height) === Math.ceil(newElement.height);
+    if (element.manualWidth) {
+        isEqualWidth = true;
+    }
+    if (!isEqualWidth || !isEqualHeight) {
         const path = PlaitBoard.findPath(board, element);
         Transforms.setNode(board, newElement, path);
     }
@@ -2403,6 +2451,7 @@ const MindTransforms = {
     setLayout,
     setTopic,
     setTopicSize,
+    setNodeManualWidth,
     addEmoji,
     removeEmoji,
     replaceEmoji,
@@ -2777,13 +2826,15 @@ class MindImageBaseComponent {
     get nativeElement() {
         return this.elementRef.nativeElement;
     }
-    constructor(elementRef) {
+    constructor(elementRef, cdr) {
         this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.isFocus = false;
     }
     ngOnInit() { }
 }
-MindImageBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindImageBaseComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-MindImageBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: MindImageBaseComponent, inputs: { imageItem: "imageItem", board: "board", element: "element" }, host: { classAttribute: "mind-node-image" }, ngImport: i0 });
+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 });
+MindImageBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: MindImageBaseComponent, inputs: { imageItem: "imageItem", board: "board", element: "element", isFocus: "isFocus" }, host: { classAttribute: "mind-node-image" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindImageBaseComponent, decorators: [{
             type: Directive,
             args: [{
@@ -2791,12 +2842,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
                         class: 'mind-node-image'
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { imageItem: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { imageItem: [{
                 type: Input
             }], board: [{
                 type: Input
             }], element: [{
                 type: Input
+            }], isFocus: [{
+                type: Input
             }] } });
 
 class NodeImageDrawer {
@@ -2805,44 +2858,39 @@ class NodeImageDrawer {
         this.viewContainerRef = viewContainerRef;
         this.componentRef = null;
     }
-    drawImage(element) {
-        this.destroy();
-        if (MindElement.hasImage(element)) {
-            this.g = createG();
-            const foreignRectangle = getImageForeignRectangle(this.board, element);
-            const foreignObject = createForeignObject(foreignRectangle.x, foreignRectangle.y, foreignRectangle.width, foreignRectangle.height);
-            this.g.append(foreignObject);
-            if (this.componentRef) {
-                this.componentRef.destroy();
-                this.componentRef = null;
-            }
-            const componentType = this.board.getPluginOptions(WithMindPluginKey).imageComponentType || MindImageBaseComponent;
-            if (!componentType) {
-                throw new Error('Not implement drawEmoji method error.');
-            }
-            this.componentRef = this.viewContainerRef.createComponent(componentType);
-            this.componentRef.instance.board = this.board;
-            this.componentRef.instance.element = element;
-            this.componentRef.instance.imageItem = element.data.image;
-            foreignObject.append(this.componentRef.instance.nativeElement);
-            return this.g;
+    drawImage(nodeG, element) {
+        if (!MindElement.hasImage(element)) {
+            this.destroy();
+            return;
         }
-        return undefined;
-    }
-    drawActive(element) {
-        this.destroyActive();
-        const imageRectangle = getImageForeignRectangle(this.board, element);
-        const rectangle = RectangleClient.getOutlineRectangle(imageRectangle, -1);
-        const roughSVG = PlaitBoard.getRoughSVG(this.board);
-        this.activeG = roughSVG.rectangle(rectangle.x, rectangle.y, rectangle.width, rectangle.height, {
-            stroke: PRIMARY_COLOR,
-            fill: '',
-            fillStyle: 'solid'
-        });
-        this.g?.append(this.activeG);
-    }
-    destroyActive() {
-        this.activeG?.remove();
+        this.g = createG();
+        const foreignRectangle = getImageForeignRectangle(this.board, element);
+        const foreignObject = createForeignObject(foreignRectangle.x, foreignRectangle.y, foreignRectangle.width, foreignRectangle.height);
+        this.g.append(foreignObject);
+        const componentType = this.board.getPluginOptions(WithMindPluginKey).imageComponentType || MindImageBaseComponent;
+        if (!componentType) {
+            throw new Error('Not implement drawEmoji method error.');
+        }
+        this.componentRef = this.viewContainerRef.createComponent(componentType);
+        this.componentRef.instance.board = this.board;
+        this.componentRef.instance.element = element;
+        this.componentRef.instance.imageItem = element.data.image;
+        this.componentRef.instance.cdr.markForCheck();
+        foreignObject.append(this.componentRef.instance.nativeElement);
+        nodeG.appendChild(this.g);
+    }
+    updateImage(nodeG, previous, current) {
+        if (!MindElement.hasImage(previous) || !MindElement.hasImage(current)) {
+            this.drawImage(nodeG, current);
+            return;
+        }
+        if (previous !== current && this.componentRef) {
+            this.componentRef.instance.element = current;
+            this.componentRef.instance.imageItem = current.data.image;
+        }
+        const currentForeignObject = getImageForeignRectangle(this.board, current);
+        updateForeignObject(this.g, currentForeignObject.width, currentForeignObject.height, currentForeignObject.x, currentForeignObject.y);
+        this.componentRef?.instance.cdr.markForCheck();
     }
     destroy() {
         if (this.g) {
@@ -2905,13 +2953,17 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: this.textManage.isEditing });
         this.drawEmojis();
         this.drawExtend();
-        this.drawImage();
+        this.imageDrawer.drawImage(this.g, this.element);
         if (PlaitMind.isMind(this.context.parent)) {
             this.g.classList.add('branch');
         }
     }
     editTopic() {
         this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: true });
+        if (this.element.manualWidth) {
+            const width = NodeSpace.getNodeResizableWidth(this.board, this.element);
+            this.textManage.updateWidth(width);
+        }
         this.textManage.edit((origin) => {
             if (origin === ExitOrigin.default) {
                 this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: false });
@@ -2928,8 +2980,8 @@ class MindNodeComponent extends PlaitPluginElementComponent {
             this.drawShape();
             this.drawLink();
             this.drawEmojis();
-            this.drawImage();
             this.drawExtend();
+            this.imageDrawer.updateImage(this.g, previous.element, value.element);
             this.textManage.updateText(this.element.data.topic);
             this.textManage.updateRectangle();
         }
@@ -2950,12 +3002,6 @@ class MindNodeComponent extends PlaitPluginElementComponent {
             this.g.append(g);
         }
     }
-    drawImage() {
-        const image = this.imageDrawer.drawImage(this.element);
-        if (image) {
-            this.g.append(image);
-        }
-    }
     drawShape() {
         this.destroyShape();
         const shape = getShapeByElement(this.board, this.node.origin);
@@ -3220,11 +3266,11 @@ const withNodeDnd = (board) => {
                 activeElements = [targetElement];
                 startPoint = point;
             }
-            event.preventDefault();
         }
         if (activeElements.length) {
-            correspondingElements = getOverallAbstracts(board, activeElements);
+            // prevent text from being selected
             event.preventDefault();
+            correspondingElements = getOverallAbstracts(board, activeElements);
         }
         mousedown(event);
     };
@@ -3499,7 +3545,6 @@ const withAbstract = (board) => {
         const endPoint = transformPoint(board, toPoint(event.x, event.y, host));
         touchedAbstract = handleTouchedAbstract(board, touchedAbstract, endPoint);
         if (abstractHandlePosition && activeAbstractElement) {
-            event.preventDefault();
             const abstractComponent = PlaitElement.getComponent(activeAbstractElement);
             const element = abstractComponent.element;
             const nodeLayout = MindQueries.getCorrectLayoutByElement(board, activeAbstractElement);
@@ -3677,7 +3722,8 @@ const withCreateMind = (board) => {
     return newBoard;
 };
 
-const withMindHotkey = (board) => {
+const withMindHotkey = (baseBoard) => {
+    const board = baseBoard;
     const { keydown } = board;
     board.keydown = (event) => {
         const selectedElements = getSelectedElements(board);
@@ -3789,49 +3835,45 @@ const isSpaceHotkey = (event) => {
     return event.code === 'Space';
 };
 
-const withNodeHover = (board) => {
-    const { mousemove, mouseleave } = board;
-    let hoveredMindElement = null;
-    board.mousemove = (event) => {
-        throttleRAF(() => {
-            let target = null;
-            const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-            depthFirstRecursion(board, element => {
-                if (target) {
-                    return;
-                }
-                if (!MindElement.isMindElement(board, element)) {
-                    return;
-                }
-                const isHitElement = isHitMindElement(board, point, element);
-                if (isHitElement) {
-                    target = element;
-                }
-            }, getIsRecursionFunc(board), true);
-            if (hoveredMindElement && target && hoveredMindElement === target) {
-                return;
-            }
-            if (hoveredMindElement) {
-                removeHovered(hoveredMindElement);
-            }
-            if (target) {
-                addHovered(target);
-                hoveredMindElement = target;
-            }
-            else {
-                hoveredMindElement = null;
-            }
-        });
-        mousemove(event);
-    };
-    board.mouseleave = (event) => {
-        if (hoveredMindElement) {
-            removeHovered(hoveredMindElement);
-            hoveredMindElement = null;
+const mouseMoveHandle = (board, event, nodeHoveredExtendRef) => {
+    let target = null;
+    const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+    depthFirstRecursion(board, element => {
+        if (target) {
+            return;
         }
-        mouseleave(event);
-    };
-    return board;
+        if (!MindElement.isMindElement(board, element)) {
+            return;
+        }
+        const isHitElement = isHitMindElement(board, point, element);
+        if (isHitElement) {
+            target = element;
+        }
+    }, getIsRecursionFunc(board), true);
+    if (nodeHoveredExtendRef && target && nodeHoveredExtendRef.element === target) {
+        return nodeHoveredExtendRef;
+    }
+    if (nodeHoveredExtendRef) {
+        removeHovered(nodeHoveredExtendRef.element);
+    }
+    if (target) {
+        addHovered(target);
+        if (nodeHoveredExtendRef) {
+            nodeHoveredExtendRef.element = target;
+        }
+        else {
+            nodeHoveredExtendRef = { element: target };
+        }
+    }
+    else {
+        nodeHoveredExtendRef = null;
+    }
+    return nodeHoveredExtendRef;
+};
+const mouseLeaveHandle = (board, event, nodeHoveredExtendRef) => {
+    if (nodeHoveredExtendRef) {
+        removeHovered(nodeHoveredExtendRef.element);
+    }
 };
 const addHovered = (element) => {
     const component = PlaitElement.getComponent(element);
@@ -3844,11 +3886,29 @@ const removeHovered = (element) => {
     }
 };
 
-const withMindImage = (board) => {
-    let selectedImageElement = null;
-    const { keydown, mousedown } = board;
+const withNodeHoverDetect = (board) => {
+    const { mousemove, mouseleave } = board;
+    let nodeHoveredExtendRef = null;
+    board.mousemove = (event) => {
+        nodeHoveredExtendRef = mouseMoveHandle(board, event, nodeHoveredExtendRef);
+        mousemove(event);
+    };
+    board.mouseleave = (event) => {
+        mouseLeaveHandle(board, event, nodeHoveredExtendRef);
+        nodeHoveredExtendRef = null;
+        mouseleave(event);
+    };
+    return board;
+};
+
+const withNodeImage = (board) => {
+    const { keydown, mousedown, globalMouseup } = board;
     board.mousedown = (event) => {
+        const selectedImageElement = getSelectedImageElement(board);
         if (PlaitBoard.isReadonly(board) || !isMainPointer(event) || !PlaitBoard.isPointer(board, PlaitPointerType.selection)) {
+            if (selectedImageElement) {
+                setImageFocus(board, selectedImageElement, false);
+            }
             mousedown(event);
             return;
         }
@@ -3857,38 +3917,159 @@ const withMindImage = (board) => {
         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) {
+            temporaryDisableSelection(board);
+            mousedown(event);
+            return;
+        }
+        if (selectedImageElement) {
+            setImageFocus(board, selectedImageElement, false);
+        }
         if (hitImage) {
-            const currentOptions = board.getPluginOptions(PlaitPluginKey.withSelection);
-            board.setPluginOptions(PlaitPluginKey.withSelection, {
-                isDisabledSelect: true
-            });
-            setTimeout(() => {
-                board.setPluginOptions(PlaitPluginKey.withSelection, { ...currentOptions });
-            }, 0);
-            selectedImageElement = hitElements[0];
-            const component = PlaitElement.getComponent(selectedImageElement);
-            component.imageDrawer.drawActive(selectedImageElement);
+            temporaryDisableSelection(board);
+            setImageFocus(board, hitElements[0], true);
             clearSelectedElement(board);
         }
-        else {
-            if (selectedImageElement) {
-                const component = PlaitElement.getComponent(selectedImageElement);
-                component && component.imageDrawer.destroyActive();
-            }
-            selectedImageElement = null;
-        }
         mousedown(event);
     };
     board.keydown = (event) => {
+        const selectedImageElement = getSelectedImageElement(board);
         if (!PlaitBoard.isReadonly(board) && selectedImageElement && (hotkeys.isDeleteBackward(event) || hotkeys.isDeleteForward(event))) {
+            addSelectedElement(board, selectedImageElement);
+            setImageFocus(board, selectedImageElement, false);
             MindTransforms.removeImage(board, selectedImageElement);
-            selectedImageElement = null;
             return;
         }
         keydown(event);
     };
+    board.globalMouseup = (event) => {
+        if (PlaitBoard.isFocus(board)) {
+            const isInBoard = event.target instanceof Node && PlaitBoard.getBoardContainer(board).contains(event.target);
+            const selectedImageElement = getSelectedImageElement(board);
+            // Clear image selection when mouse board outside area
+            if (selectedImageElement && !isInBoard) {
+                setImageFocus(board, selectedImageElement, false);
+            }
+        }
+        globalMouseup(event);
+    };
+    return board;
+};
+
+const withNodeResize = (board) => {
+    const { mousedown, mousemove, globalMouseup } = board;
+    let targetElement = null;
+    let targetElementRef = null;
+    let startPoint = null;
+    board.mousedown = (event) => {
+        if (targetElement) {
+            startPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            // prevent text from being selected
+            event.preventDefault();
+            return;
+        }
+        mousedown(event);
+    };
+    board.mousemove = (event) => {
+        if (PlaitBoard.isReadonly(board) || PlaitBoard.hasBeenTextEditing(board)) {
+            mousemove(event);
+            return;
+        }
+        if (startPoint && targetElement && !isMindNodeResizing(board)) {
+            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) {
+                startPoint = endPoint;
+                addResizing(board, targetElement);
+                targetElementRef = {
+                    minWidth: NodeSpace.getNodeResizableMinWidth(board, targetElement),
+                    currentWidth: NodeSpace.getNodeResizableWidth(board, targetElement),
+                    path: PlaitBoard.findPath(board, targetElement),
+                    textManage: PlaitElement.getComponent(targetElement).textManage
+                };
+                MERGING.set(board, true);
+            }
+        }
+        if (isMindNodeResizing(board) && startPoint && targetElementRef) {
+            throttleRAF(() => {
+                const endPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+                const offsetX = endPoint[0] - startPoint[0];
+                let resizedWidth = targetElementRef.currentWidth + offsetX;
+                if (resizedWidth < targetElementRef.minWidth) {
+                    resizedWidth = targetElementRef.minWidth;
+                }
+                const newTarget = PlaitNode.get(board, targetElementRef.path);
+                if (newTarget && NodeSpace.getNodeTopicMinWidth(board, newTarget) !== resizedWidth) {
+                    targetElementRef.textManage.updateWidth(resizedWidth);
+                    const { width, height } = targetElementRef.textManage.getSize();
+                    MindTransforms.setNodeManualWidth(board, newTarget, resizedWidth, height);
+                }
+            });
+            return;
+        }
+        else {
+            // 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);
+                if (newTargetElement) {
+                    PlaitBoard.getBoardContainer(board).classList.add(ResizeCursorClass['ew-resize']);
+                }
+                else {
+                    PlaitBoard.getBoardContainer(board).classList.remove(ResizeCursorClass['ew-resize']);
+                }
+                targetElement = newTargetElement;
+            }
+        }
+        mousemove(event);
+    };
+    board.globalMouseup = (event) => {
+        globalMouseup(event);
+        if (isMindNodeResizing(board) || targetElement) {
+            targetElement && removeResizing(board, targetElement);
+            targetElementRef = null;
+            targetElement = null;
+            startPoint = null;
+            MERGING.set(board, false);
+        }
+    };
     return board;
 };
+const IS_MIND_NODE_RESIZING = new WeakMap();
+const isMindNodeResizing = (board) => {
+    return !!IS_MIND_NODE_RESIZING.get(board);
+};
+const addResizing = (board, element) => {
+    PlaitBoard.getBoardContainer(board).classList.add('mind-node-resizing');
+    const component = PlaitElement.getComponent(element);
+    component.g.classList.add('resizing');
+    IS_MIND_NODE_RESIZING.set(board, true);
+};
+const removeResizing = (board, element) => {
+    PlaitBoard.getBoardContainer(board).classList.remove('mind-node-resizing');
+    PlaitBoard.getBoardContainer(board).classList.remove(ResizeCursorClass['ew-resize']);
+    const component = PlaitElement.getComponent(element);
+    if (component && component.g) {
+        component.g.classList.remove('resizing');
+    }
+    IS_MIND_NODE_RESIZING.set(board, false);
+};
+const getTargetElement = (board, point) => {
+    const selectedElements = getSelectedElements(board).filter(value => MindElement.isMindElement(board, value));
+    if (selectedElements.length > 0) {
+        const target = selectedElements.find(value => {
+            const rectangle = getResizeActiveRectangle(board, value);
+            return distanceBetweenPointAndRectangle(point[0], point[1], rectangle) <= 0;
+        });
+        return target ? target : null;
+    }
+    return null;
+};
+const getResizeActiveRectangle = (board, element) => {
+    const node = MindElement.getNode(element);
+    const rectangle = getRectangleByNode(node);
+    return { x: rectangle.x + rectangle.width - EXTEND_OFFSET, y: rectangle.y, width: EXTEND_OFFSET * 2, height: rectangle.height };
+};
 
 const withMind = (baseBoard) => {
     const board = baseBoard;
@@ -3995,7 +4176,7 @@ const withMind = (baseBoard) => {
         MindTransforms.removeElements(board, selectedElements);
         deleteFragment(data);
     };
-    return withMindImage(withNodeHover(withMindHotkey(withMindExtend(withCreateMind(withAbstract(withNodeDnd(board)))))));
+    return withNodeResize(withNodeImage(withNodeHoverDetect(withMindHotkey(withMindExtend(withCreateMind(withAbstract(withNodeDnd(board))))))));
 };
 
 class MindEmojiBaseComponent {
@@ -4049,5 +4230,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, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, QUICK_INSERT_CIRCLE_COLOR, QUICK_INSERT_CIRCLE_OFFSET, QUICK_INSERT_INNER_CROSS_COLOR, ROOT_TOPIC_FONT_SIZE, ROOT_TOPIC_HEIGHT, STROKE_WIDTH, TOPIC_COLOR, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, TRANSPARENT, WithMindPluginKey, addActiveOnDragOrigin, adjustAbstractToNode, adjustNodeToRoot, adjustRootToNode, canSetAbstract, copyNewNode, correctLayoutByDirection, createDefaultMind, createEmptyMind, createMindElement, deleteElementHandleAbstract, deleteElementsHandleRightNodeCount, detectDropTarget, directionCorrector, directionDetector, divideElementByParent, drawFakeDragNode, drawFakeDropNode, editTopic, extractNodesText, findLastChild, findLocationLeftIndex, getAbstractBranchColor, getAbstractBranchWidth, getAbstractHandleRectangle, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getBranchShapeByMindElement, getBranchWidthByMindElement, getChildrenCount, getCorrespondingAbstract, getDefaultBranchColor, getDefaultBranchColorByIndex, getDefaultLayout, getEmojiForeignRectangle, getEmojiRectangle, getFillByElement, getFirstLevelElement, getHitAbstractHandle, getImageForeignRectangle, getInCorrectLayoutDirection, getLayoutDirection$1 as getLayoutDirection, getLayoutReverseDirection, getLocationScope, getMindThemeColor, getNextBranchColor, getOverallAbstracts, getPathByDropTarget, getRectangleByElement, getRectangleByNode, getRectangleByResizingLocation, getRelativeStartEndByAbstractRef, getRootLayout, 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, separateChildren, setIsDragging, withMind, withMindExtend };
+export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, AbstractHandlePosition, AbstractResizeState, BASE, BRANCH_FONT_FAMILY, BRANCH_WIDTH, BaseDrawer, BranchShape, DEFAULT_FONT_FAMILY, DefaultAbstractNodeStyle, DefaultNodeStyle, ELEMENT_TO_NODE, EXTEND_DIAMETER, EXTEND_OFFSET, GRAY_COLOR, INHERIT_ATTRIBUTE_KEYS, IS_DRAGGING, LayoutDirection, LayoutDirectionsMap, MindColorfulThemeColor, MindDarkThemeColor, MindDefaultThemeColor, MindElement, MindElementShape, MindEmojiBaseComponent, MindImageBaseComponent, MindModule, MindNode, MindNodeComponent, MindPointerType, MindQueries, MindRetroThemeColor, MindSoftThemeColor, MindStarryThemeColor, MindThemeColor, MindThemeColors, MindTransforms, 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, canSetAbstract, copyNewNode, correctLayoutByDirection, createDefaultMind, createEmptyMind, createMindElement, deleteElementHandleAbstract, deleteElementsHandleRightNodeCount, detectDropTarget, directionCorrector, directionDetector, divideElementByParent, drawFakeDragNode, drawFakeDropNode, editTopic, extractNodesText, findLastChild, findLocationLeftIndex, getAbstractBranchColor, getAbstractBranchWidth, getAbstractHandleRectangle, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getBranchShapeByMindElement, getBranchWidthByMindElement, getChildrenCount, getCorrespondingAbstract, getDefaultBranchColor, getDefaultBranchColorByIndex, getDefaultLayout, getEmojiForeignRectangle, getEmojiRectangle, getFillByElement, getFirstLevelElement, getHitAbstractHandle, getImageForeignRectangle, getInCorrectLayoutDirection, getLayoutDirection$1 as getLayoutDirection, getLayoutReverseDirection, getLocationScope, getMindThemeColor, getNextBranchColor, 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, separateChildren, setImageFocus, setIsDragging, temporaryDisableSelection, withMind, withMindExtend };
 //# sourceMappingURL=plait-mind.mjs.map