@plait/mind 0.19.0 → 0.21.0

package/fesm2020/plait-mind.mjs

@@ -1,9 +1,9 @@
 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, drawLinearPath, drawBezierPath, createG, updateForeignObject, drawRoundRectangle, getRectangleByElements, getSelectedElements, NODE_TO_PARENT, distanceBetweenPointAndRectangle, createForeignObject, createText, PlaitPointerType, PlaitPluginElementComponent, NODE_TO_INDEX, PlaitModule, transformPoint, toPoint, getHitElements, distanceBetweenPointAndPoint, CLIP_BOARD_FORMAT_KEY, isMainPointer, 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 { TEXT_DEFAULT_HEIGHT, buildText, getTextSize, TextManage, ExitOrigin, TextModule, getTextFromClipboard } from '@plait/text';
+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 { isKeyHotkey } from 'is-hotkey';
@@ -210,13 +210,21 @@ function getEmojiFontSize(element) {
     }
 }
 
+const TOPIC_COLOR = '#333';
+const TOPIC_FONT_SIZE = 14;
+const ROOT_TOPIC_FONT_SIZE = 18;
+const ROOT_TOPIC_HEIGHT = 25;
+const TOPIC_DEFAULT_MAX_WORD_COUNT = 34;
+const DEFAULT_FONT_FAMILY = 'PingFangSC-Regular, "PingFang SC"';
+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
     }
@@ -233,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);
@@ -248,27 +258,43 @@ const getSpaceEmojiAndText = (element) => {
 const NodeSpace = {
     getNodeWidth(board, element) {
         const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
-        const imageWidth = MindElement.hasImage(element) ? element.data.image?.width : 0;
         if (MindElement.hasEmojis(element)) {
             return (NodeSpace.getEmojiLeftSpace(board, element) +
                 getEmojisWidthHeight(board, element).width +
                 getSpaceEmojiAndText(element) +
-                Math.max(element.width, imageWidth) +
+                NodeSpace.getNodeResizableWidth(board, element) +
                 nodeAndText);
         }
-        return nodeAndText + Math.max(element.width, imageWidth) + nodeAndText;
+        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(width, imageWidth);
+    },
+    getNodeResizableMinWidth(board, element) {
+        const minTopicWidth = NodeSpace.getNodeTopicMinWidth(board, element);
+        if (MindElement.hasImage(element) && element.data.image.width > minTopicWidth) {
+            return element.data.image.width;
+        }
+        else {
+            return minTopicWidth;
+        }
+    },
+    getNodeTopicMinWidth(board, element, isRoot = false) {
+        const defaultFontSize = getNodeDefaultFontSize(isRoot);
+        const editor = MindElement.getTextEditor(element);
+        const marks = PlaitMarkEditor.getMarks(editor);
+        const fontSize = marks[MarkTypes.fontSize] || defaultFontSize;
+        return fontSize;
+    },
     getTextLeftSpace(board, element) {
         const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
         if (MindElement.hasEmojis(element)) {
@@ -278,28 +304,43 @@ 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;
     }
 };
+const getFontSizeBySlateElement = (text) => {
+    const defaultFontSize = DEFAULT_FONT_SIZE;
+    if (typeof text === 'string') {
+        return defaultFontSize;
+    }
+    const marks = PlaitMarkEditor.getMarksByElement(text);
+    const fontSize = marks[MarkTypes.fontSize] || defaultFontSize;
+    return fontSize;
+};
+const getNodeDefaultFontSize = (isRoot = false) => {
+    const defaultFontSize = isRoot ? ROOT_TOPIC_FONT_SIZE : DEFAULT_FONT_SIZE;
+    return defaultFontSize;
+};
 
 function getEmojiRectangle(board, element) {
     let { x, y } = getRectangleByNode(MindElement.getNode(element));
@@ -336,43 +377,47 @@ 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);
     return RectangleClient.isHit(RectangleClient.toRectangleClient([range.anchor, range.focus]), client);
 };
 
-const NODE_MIN_WIDTH = 18;
-
 function editTopic(element) {
     const component = PlaitElement.getComponent(element);
     component?.editTopic();
 }
-
-const TOPIC_COLOR = '#333';
-const TOPIC_FONT_SIZE = 14;
-const ROOT_TOPIC_FONT_SIZE = 18;
-const ROOT_TOPIC_HEIGHT = 25;
-const TOPIC_DEFAULT_MAX_WORD_COUNT = 34;
-const DEFAULT_FONT_FAMILY = 'PingFangSC-Regular, "PingFang SC"';
-const BRANCH_FONT_FAMILY = 'PingFangSC-Medium, "PingFang SC"';
+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 });
@@ -483,7 +528,7 @@ const insertMindElement = (board, inheritNode, path) => {
         });
         delete newNode.layout;
     }
-    const newElement = createMindElement('', NODE_MIN_WIDTH, TEXT_DEFAULT_HEIGHT, newNode);
+    const newElement = createMindElement('', getNodeDefaultFontSize(), TEXT_DEFAULT_HEIGHT, newNode);
     Transforms.insertNode(board, newElement, path);
     clearSelectedElement(board);
     addSelectedElement(board, newElement);
@@ -648,7 +693,7 @@ const adjustNodeToRoot = (board, node) => {
         fontSize: ROOT_TOPIC_FONT_SIZE,
         fontFamily: BRANCH_FONT_FAMILY
     });
-    newElement.width = Math.max(width, NODE_MIN_WIDTH);
+    newElement.width = Math.max(width, getNodeDefaultFontSize(true));
     newElement.height = height;
     return {
         ...newElement,
@@ -1069,14 +1114,7 @@ const detectDropTarget = (board, detectPoint, dropTarget, activeElements) => {
         if (detectResult && isValid) {
             dropTarget = { target: node.origin, detectResult: detectResult[0] };
         }
-    }, node => {
-        if (PlaitBoard.isBoard(node) || board.isRecursion(node)) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    });
+    }, getIsRecursionFunc(board));
     return dropTarget;
 };
 const directionDetector = (targetNode, centerPoint) => {
@@ -2265,24 +2303,36 @@ const correctLogicLayoutNode = (board, layout, path) => {
     }
 };
 
-const normalizeWidthAndHeight = (board, width, height) => {
-    const newWidth = width < NODE_MIN_WIDTH * board.viewport.zoom ? NODE_MIN_WIDTH : width / board.viewport.zoom;
+const normalizeWidthAndHeight = (board, element, width, height) => {
+    const minWidth = NodeSpace.getNodeTopicMinWidth(board, element, element.isRoot);
+    const newWidth = width < minWidth * board.viewport.zoom ? minWidth : width / board.viewport.zoom;
     const newHeight = height / board.viewport.zoom;
     return { width: newWidth, height: newHeight };
 };
 const setTopic = (board, element, topic, width, height) => {
     const newElement = {
         data: { ...element.data, topic },
-        ...normalizeWidthAndHeight(board, width, height)
+        ...normalizeWidthAndHeight(board, element, 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, width, height)
+        ...normalizeWidthAndHeight(board, element, width, height)
     };
-    if (element.width !== newElement.width || element.height !== 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);
     }
@@ -2379,6 +2429,7 @@ const MindTransforms = {
     setLayout,
     setTopic,
     setTopicSize,
+    setNodeManualWidth,
     addEmoji,
     removeEmoji,
     replaceEmoji,
@@ -2753,13 +2804,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: [{
@@ -2767,12 +2820,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 {
@@ -2781,44 +2836,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) {
@@ -2881,13 +2931,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 });
@@ -2904,8 +2958,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();
         }
@@ -2926,12 +2980,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);
@@ -3172,7 +3220,7 @@ const withNodeDnd = (board) => {
         if (PlaitBoard.isReadonly(board) ||
             PlaitBoard.hasBeenTextEditing(board) ||
             !PlaitBoard.isPointer(board, PlaitPointerType.selection) ||
-            event.button === 2) {
+            !isMainPointer(event)) {
             mousedown(event);
             return;
         }
@@ -3196,11 +3244,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);
     };
@@ -3405,7 +3453,7 @@ const insertClipboardData = (board, elements, targetPoint) => {
                 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);
-                newElement.width = Math.max(width, NODE_MIN_WIDTH);
+                newElement.width = Math.max(width, getNodeDefaultFontSize());
                 newElement.height = height;
             }
             // handle abstract start and end
@@ -3435,7 +3483,7 @@ const insertClipboardData = (board, elements, targetPoint) => {
 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, width, height, {});
+    const newElement = createMindElement(text, Math.max(width, getFontSizeBySlateElement(text)), height, {});
     Transforms.insertNode(board, newElement, findNewChildNodePath(board, targetParent));
     return;
 };
@@ -3475,7 +3523,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);
@@ -3653,7 +3700,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);
@@ -3783,14 +3831,7 @@ const withNodeHover = (board) => {
                 if (isHitElement) {
                     target = element;
                 }
-            }, node => {
-                if (PlaitBoard.isBoard(node) || board.isRecursion(node)) {
-                    return true;
-                }
-                else {
-                    return false;
-                }
-            }, true);
+            }, getIsRecursionFunc(board), true);
             if (hoveredMindElement && target && hoveredMindElement === target) {
                 return;
             }
@@ -3827,7 +3868,29 @@ const removeHovered = (element) => {
     }
 };
 
-const withMindImage = (board) => {
+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 withNodeImage = (board) => {
     let selectedImageElement = null;
     const { keydown, mousedown } = board;
     board.mousedown = (event) => {
@@ -3840,26 +3903,21 @@ 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);
+            selectedImageElement = null;
+        }
         if (hitImage) {
-            const currentOptions = board.getPluginOptions(PlaitPluginKey.withSelection);
-            board.setPluginOptions(PlaitPluginKey.withSelection, {
-                isDisabledSelect: true
-            });
-            setTimeout(() => {
-                board.setPluginOptions(PlaitPluginKey.withSelection, { ...currentOptions });
-            }, 0);
+            temporaryDisableSelection(board);
             selectedImageElement = hitElements[0];
-            const component = PlaitElement.getComponent(selectedImageElement);
-            component.imageDrawer.drawActive(selectedImageElement);
+            setImageFocus(board, selectedImageElement, true);
             clearSelectedElement(board);
         }
-        else {
-            if (selectedImageElement) {
-                const component = PlaitElement.getComponent(selectedImageElement);
-                component && component.imageDrawer.destroyActive();
-            }
-            selectedImageElement = null;
-        }
         mousedown(event);
     };
     board.keydown = (event) => {
@@ -3873,8 +3931,122 @@ const withMindImage = (board) => {
     return board;
 };
 
-const withMind = (board) => {
-    const { drawElement, dblclick, keydown, insertFragment, setFragment, deleteFragment, isHitSelection, getRectangle, isMovable, isRecursion } = 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) {
+            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);
+            }
+        }
+        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) {
+            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 activeWidth = 20;
+    const node = MindElement.getNode(element);
+    const rectangle = getRectangleByNode(node);
+    return { x: rectangle.x + rectangle.width - activeWidth / 2, y: rectangle.y, width: activeWidth, height: rectangle.height };
+};
+
+const withMind = (baseBoard) => {
+    const board = baseBoard;
+    const { drawElement, dblclick, insertFragment, setFragment, deleteFragment, isHitSelection, getRectangle, isMovable, isRecursion } = board;
     board.drawElement = (context) => {
         if (PlaitMind.isMind(context.element)) {
             return PlaitMindComponent;
@@ -3931,14 +4103,7 @@ const withMind = (board) => {
                 if (!PlaitBoard.hasBeenTextEditing(board) && isHitMindElement(board, point, node)) {
                     editTopic(node);
                 }
-            }, node => {
-                if (PlaitBoard.isBoard(node) || board.isRecursion(node)) {
-                    return true;
-                }
-                else {
-                    return false;
-                }
-            });
+            }, getIsRecursionFunc(board));
         });
         if (PlaitBoard.hasBeenTextEditing(board)) {
             return;
@@ -3984,7 +4149,7 @@ const withMind = (board) => {
         MindTransforms.removeElements(board, selectedElements);
         deleteFragment(data);
     };
-    return withMindImage(withNodeHover(withMindHotkey(withMindExtend(withCreateMind(withAbstract(withNodeDnd(board)))))));
+    return withNodeResize(withNodeImage(withNodeHover(withMindHotkey(withMindExtend(withCreateMind(withAbstract(withNodeDnd(board))))))));
 };
 
 class MindEmojiBaseComponent {
@@ -4038,5 +4203,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, NODE_MIN_WIDTH, 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, 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, temporaryDisableSelection, withMind, withMindExtend };
 //# sourceMappingURL=plait-mind.mjs.map