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

package/{fesm2020 → fesm2022}/plait-mind.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, NgModule, NgZone, Directive, Input, HostListener } from '@angular/core';
 import * as i2 from '@plait/core';
-import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, RectangleClient, PlaitElement, PlaitPluginKey, getSelectedElements, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, PlaitBoard, Path, PlaitNode, PlaitContextService, depthFirstRecursion, getIsRecursionFunc, drawLinearPath, drawBezierPath, createG, updateForeignObject, drawRoundRectangle, getRectangleByElements, NODE_TO_PARENT, distanceBetweenPointAndRectangle, createForeignObject, 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 { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, RectangleClient, PlaitElement, PlaitPluginKey, getSelectedElements, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, PlaitBoard, Path, PlaitNode, PlaitContextService, depthFirstRecursion, getIsRecursionFunc, drawLinearPath, drawBezierPath, createG, updateForeignObject, drawRoundRectangle, getRectangleByElements, NODE_TO_PARENT, distanceBetweenPointAndRectangle, createForeignObject, setStrokeLinecap, createText, PlaitPointerType, PlaitPluginElementComponent, NODE_TO_INDEX, PlaitModule, isMainPointer, transformPoint, toPoint, getHitElements, distanceBetweenPointAndPoint, setClipboardData, setClipboardDataByText, BOARD_TO_HOST, BoardTransforms, throttleRAF, removeSelectedElement, PlaitHistoryBoard, hotkeys, setClipboardDataByMedia, getClipboardDataByMedia, ResizeCursorClass, preventTouchMove, PRESS_AND_MOVE_BUFFER, MERGING, getDataFromClipboard } from '@plait/core';
+import { MindLayoutType, isIndentedLayout, isHorizontalLayout, isHorizontalLogicLayout, ConnectingPosition, AbstractNode, isStandardLayout, isVerticalLogicLayout, getNonAbstractChildren, isLeftLayout, isRightLayout, isTopLayout, isBottomLayout, getCorrectStartEnd, getAbstractLayout, GlobalLayout } from '@plait/layouts';
 import { PlaitMarkEditor, MarkTypes, DEFAULT_FONT_SIZE, TEXT_DEFAULT_HEIGHT, buildText, getTextSize, TextManage, ExitOrigin, TextModule, getTextFromClipboard } from '@plait/text';
 import { fromEvent, Subject } from 'rxjs';
-import { RESIZE_HANDLE_DIAMETER, getRectangleResizeHandleRefs, isExpandHotkey, isTabHotkey, isEnterHotkey, isVirtualKey, isSpaceHotkey, MediaKeys, ResizeHandle, withResize, ActiveGenerator } from '@plait/common';
+import { RESIZE_HANDLE_DIAMETER, getRectangleResizeHandleRefs, isDrawingMode, isDndMode, setCreationMode, BoardCreationMode, isExpandHotkey, isTabHotkey, isEnterHotkey, isVirtualKey, isSpaceHotkey, MediaKeys, ResizeHandle, withResize, ActiveGenerator } from '@plait/common';
 import { Node as Node$1, Path as Path$1 } from 'slate';
 import { pointsOnBezierCurves } from 'points-on-curve';
 import { take, filter } from 'rxjs/operators';
@@ -214,9 +214,13 @@ const TOPIC_COLOR = '#333';
 const TOPIC_FONT_SIZE = 14;
 const ROOT_TOPIC_FONT_SIZE = 18;
 const ROOT_TOPIC_HEIGHT = 25;
+const ROOT_TOPIC_WIDTH = 72;
 const TOPIC_DEFAULT_MAX_WORD_COUNT = 34;
 const DEFAULT_FONT_FAMILY = 'PingFangSC-Regular, "PingFang SC"';
 const BRANCH_FONT_FAMILY = 'PingFangSC-Medium, "PingFang SC"';
+const NodeTopicThreshold = {
+    defaultTextMaxWidth: 34 * 14,
+};
 
 const NodeDefaultSpace = {
     horizontal: {
@@ -443,15 +447,187 @@ const getSelectedMindElements = (board) => {
     return selectedElements;
 };
 
-const createEmptyMind = (point) => {
-    const element = createMindElement('思维导图', 72, ROOT_TOPIC_HEIGHT, { layout: MindLayoutType.right });
+const getBranchDirectionsByLayouts = (branchLayouts) => {
+    const branchDirections = [];
+    branchLayouts.forEach(l => {
+        const directions = LayoutDirectionsMap[l];
+        directions.forEach(d => {
+            if (!branchDirections.includes(d) && !branchDirections.includes(getLayoutReverseDirection(d))) {
+                branchDirections.push(d);
+            }
+        });
+    });
+    return branchDirections;
+};
+const isCorrectLayout = (root, layout) => {
+    const rootLayout = root.layout || getDefaultLayout();
+    return !getInCorrectLayoutDirection(rootLayout, layout);
+};
+const isMixedLayout = (parentLayout, layout) => {
+    return (!isIndentedLayout(parentLayout) && isIndentedLayout(layout)) || (isIndentedLayout(parentLayout) && !isIndentedLayout(layout));
+};
+const getInCorrectLayoutDirection = (rootLayout, layout) => {
+    const directions = LayoutDirectionsMap[rootLayout];
+    const subLayoutDirections = LayoutDirectionsMap[layout];
+    if (!subLayoutDirections) {
+        throw new Error(`unexpected layout: ${layout} on correct layout`);
+    }
+    return subLayoutDirections.find(d => directions.includes(getLayoutReverseDirection(d)));
+};
+const correctLayoutByDirection = (layout, direction) => {
+    const isHorizontal = direction === LayoutDirection.left || direction === LayoutDirection.right ? true : false;
+    let inverseDirectionLayout = MindLayoutType.standard;
+    switch (layout) {
+        case MindLayoutType.left:
+            inverseDirectionLayout = MindLayoutType.right;
+            break;
+        case MindLayoutType.right:
+            inverseDirectionLayout = MindLayoutType.left;
+            break;
+        case MindLayoutType.downward:
+            inverseDirectionLayout = MindLayoutType.upward;
+            break;
+        case MindLayoutType.upward:
+            inverseDirectionLayout = MindLayoutType.downward;
+            break;
+        case MindLayoutType.rightBottomIndented:
+            inverseDirectionLayout = isHorizontal ? MindLayoutType.leftBottomIndented : MindLayoutType.rightTopIndented;
+            break;
+        case MindLayoutType.leftBottomIndented:
+            inverseDirectionLayout = isHorizontal ? MindLayoutType.rightBottomIndented : MindLayoutType.leftTopIndented;
+            break;
+        case MindLayoutType.rightTopIndented:
+            inverseDirectionLayout = isHorizontal ? MindLayoutType.leftTopIndented : MindLayoutType.rightBottomIndented;
+            break;
+        case MindLayoutType.leftTopIndented:
+            inverseDirectionLayout = isHorizontal ? MindLayoutType.rightTopIndented : MindLayoutType.leftBottomIndented;
+            break;
+    }
+    return inverseDirectionLayout;
+};
+const getLayoutDirection$1 = (root) => {
+    const layout = root.layout || getDefaultLayout();
+    return LayoutDirectionsMap[layout];
+};
+const getDefaultLayout = () => {
+    return MindLayoutType.standard;
+};
+const getAvailableSubLayoutsByLayoutDirections = (directions) => {
+    const result = [];
+    const reverseDirections = directions.map(getLayoutReverseDirection);
+    for (const key in MindLayoutType) {
+        const layout = MindLayoutType[key];
+        const layoutDirections = LayoutDirectionsMap[layout];
+        if (layoutDirections) {
+            const hasSameDirection = layoutDirections.some(d => directions.includes(d));
+            const hasReverseDirection = layoutDirections.some(r => reverseDirections.includes(r));
+            if (hasSameDirection && !hasReverseDirection) {
+                result.push(layout);
+            }
+        }
+    }
+    return result;
+};
+const getLayoutReverseDirection = (layoutDirection) => {
+    let reverseDirection = LayoutDirection.right;
+    switch (layoutDirection) {
+        case LayoutDirection.top:
+            reverseDirection = LayoutDirection.bottom;
+            break;
+        case LayoutDirection.bottom:
+            reverseDirection = LayoutDirection.top;
+            break;
+        case LayoutDirection.right:
+            reverseDirection = LayoutDirection.left;
+            break;
+        case LayoutDirection.left:
+            reverseDirection = LayoutDirection.right;
+            break;
+    }
+    return reverseDirection;
+};
+const getRootLayout = (root) => {
+    return root.layout || getDefaultLayout();
+};
+
+const getLayoutOptions = (board) => {
+    function getMainAxle(element, parent) {
+        const strokeWidth = element.strokeWidth || STROKE_WIDTH;
+        if (element.isRoot) {
+            return BASE * 12;
+        }
+        if (parent && parent.isRoot()) {
+            return BASE * 3 + strokeWidth / 2;
+        }
+        return BASE * 3 + strokeWidth / 2;
+    }
+    function getSecondAxle(element, parent) {
+        const strokeWidth = element.strokeWidth || STROKE_WIDTH;
+        if (element.isRoot) {
+            return BASE * 10 + strokeWidth / 2;
+        }
+        return BASE * 6 + strokeWidth / 2;
+    }
+    return {
+        getHeight(element) {
+            return NodeSpace.getNodeHeight(board, element);
+        },
+        getWidth(element) {
+            return NodeSpace.getNodeWidth(board, element);
+        },
+        getHorizontalGap(element, parent) {
+            const _layout = (parent && parent.layout) || getRootLayout(element);
+            const isHorizontal = isHorizontalLayout(_layout);
+            const strokeWidth = element.strokeWidth || STROKE_WIDTH;
+            if (isIndentedLayout(_layout)) {
+                return BASE * 4 + strokeWidth;
+            }
+            if (!isHorizontal) {
+                return getMainAxle(element, parent);
+            }
+            else {
+                return getSecondAxle(element, parent);
+            }
+        },
+        getVerticalGap(element, parent) {
+            const _layout = (parent && parent.layout) || getRootLayout(element);
+            if (isIndentedLayout(_layout)) {
+                return BASE;
+            }
+            const isHorizontal = isHorizontalLayout(_layout);
+            if (isHorizontal) {
+                return getMainAxle(element, parent);
+            }
+            else {
+                return getSecondAxle(element, parent);
+            }
+        },
+        getVerticalConnectingPosition(element, parent) {
+            if (element.shape === MindElementShape.underline && parent && isHorizontalLogicLayout(parent.layout)) {
+                return ConnectingPosition.bottom;
+            }
+            return undefined;
+        },
+        getExtendHeight(node) {
+            return BASE * 6;
+        },
+        getIndentedCrossLevelGap() {
+            return BASE * 2;
+        }
+    };
+};
+
+const createEmptyMind = (board, point) => {
+    const element = createMindElement('思维导图', ROOT_TOPIC_WIDTH, ROOT_TOPIC_HEIGHT, { layout: MindLayoutType.right });
     element.isRoot = true;
-    element.points = [point];
     element.type = 'mindmap';
+    const width = NodeSpace.getNodeWidth(board, element);
+    const height = NodeSpace.getNodeHeight(board, element);
+    element.points = [[point[0] - width / 2, point[1] - height / 2]];
     return element;
 };
 const createDefaultMind = (point, rightNodeCount, layout) => {
-    const root = createMindElement('思维导图', 72, ROOT_TOPIC_HEIGHT, { layout });
+    const root = createMindElement('思维导图', ROOT_TOPIC_WIDTH, ROOT_TOPIC_HEIGHT, { layout });
     root.rightNodeCount = rightNodeCount;
     root.isRoot = true;
     root.type = 'mindmap';
@@ -584,109 +760,6 @@ const divideElementByParent = (elements) => {
     return { parentElements, abstractIncludedGroups };
 };
 
-const getBranchDirectionsByLayouts = (branchLayouts) => {
-    const branchDirections = [];
-    branchLayouts.forEach(l => {
-        const directions = LayoutDirectionsMap[l];
-        directions.forEach(d => {
-            if (!branchDirections.includes(d) && !branchDirections.includes(getLayoutReverseDirection(d))) {
-                branchDirections.push(d);
-            }
-        });
-    });
-    return branchDirections;
-};
-const isCorrectLayout = (root, layout) => {
-    const rootLayout = root.layout || getDefaultLayout();
-    return !getInCorrectLayoutDirection(rootLayout, layout);
-};
-const isMixedLayout = (parentLayout, layout) => {
-    return (!isIndentedLayout(parentLayout) && isIndentedLayout(layout)) || (isIndentedLayout(parentLayout) && !isIndentedLayout(layout));
-};
-const getInCorrectLayoutDirection = (rootLayout, layout) => {
-    const directions = LayoutDirectionsMap[rootLayout];
-    const subLayoutDirections = LayoutDirectionsMap[layout];
-    if (!subLayoutDirections) {
-        throw new Error(`unexpected layout: ${layout} on correct layout`);
-    }
-    return subLayoutDirections.find(d => directions.includes(getLayoutReverseDirection(d)));
-};
-const correctLayoutByDirection = (layout, direction) => {
-    const isHorizontal = direction === LayoutDirection.left || direction === LayoutDirection.right ? true : false;
-    let inverseDirectionLayout = MindLayoutType.standard;
-    switch (layout) {
-        case MindLayoutType.left:
-            inverseDirectionLayout = MindLayoutType.right;
-            break;
-        case MindLayoutType.right:
-            inverseDirectionLayout = MindLayoutType.left;
-            break;
-        case MindLayoutType.downward:
-            inverseDirectionLayout = MindLayoutType.upward;
-            break;
-        case MindLayoutType.upward:
-            inverseDirectionLayout = MindLayoutType.downward;
-            break;
-        case MindLayoutType.rightBottomIndented:
-            inverseDirectionLayout = isHorizontal ? MindLayoutType.leftBottomIndented : MindLayoutType.rightTopIndented;
-            break;
-        case MindLayoutType.leftBottomIndented:
-            inverseDirectionLayout = isHorizontal ? MindLayoutType.rightBottomIndented : MindLayoutType.leftTopIndented;
-            break;
-        case MindLayoutType.rightTopIndented:
-            inverseDirectionLayout = isHorizontal ? MindLayoutType.leftTopIndented : MindLayoutType.rightBottomIndented;
-            break;
-        case MindLayoutType.leftTopIndented:
-            inverseDirectionLayout = isHorizontal ? MindLayoutType.rightTopIndented : MindLayoutType.leftBottomIndented;
-            break;
-    }
-    return inverseDirectionLayout;
-};
-const getLayoutDirection$1 = (root) => {
-    const layout = root.layout || getDefaultLayout();
-    return LayoutDirectionsMap[layout];
-};
-const getDefaultLayout = () => {
-    return MindLayoutType.standard;
-};
-const getAvailableSubLayoutsByLayoutDirections = (directions) => {
-    const result = [];
-    const reverseDirections = directions.map(getLayoutReverseDirection);
-    for (const key in MindLayoutType) {
-        const layout = MindLayoutType[key];
-        const layoutDirections = LayoutDirectionsMap[layout];
-        if (layoutDirections) {
-            const hasSameDirection = layoutDirections.some(d => directions.includes(d));
-            const hasReverseDirection = layoutDirections.some(r => reverseDirections.includes(r));
-            if (hasSameDirection && !hasReverseDirection) {
-                result.push(layout);
-            }
-        }
-    }
-    return result;
-};
-const getLayoutReverseDirection = (layoutDirection) => {
-    let reverseDirection = LayoutDirection.right;
-    switch (layoutDirection) {
-        case LayoutDirection.top:
-            reverseDirection = LayoutDirection.bottom;
-            break;
-        case LayoutDirection.bottom:
-            reverseDirection = LayoutDirection.top;
-            break;
-        case LayoutDirection.right:
-            reverseDirection = LayoutDirection.left;
-            break;
-        case LayoutDirection.left:
-            reverseDirection = LayoutDirection.right;
-            break;
-    }
-    return reverseDirection;
-};
-const getRootLayout = (root) => {
-    return root.layout || getDefaultLayout();
-};
-
 const adjustRootToNode = (board, node) => {
     const newNode = { ...node };
     delete newNode.isRoot;
@@ -2190,73 +2263,6 @@ const deleteElementsHandleRightNodeCount = (board, deletableElements, effectedRi
     return effectedRightNodeCount;
 };
 
-const getLayoutOptions = (board) => {
-    function getMainAxle(element, parent) {
-        const strokeWidth = element.strokeWidth || STROKE_WIDTH;
-        if (element.isRoot) {
-            return BASE * 12;
-        }
-        if (parent && parent.isRoot()) {
-            return BASE * 3 + strokeWidth / 2;
-        }
-        return BASE * 3 + strokeWidth / 2;
-    }
-    function getSecondAxle(element, parent) {
-        const strokeWidth = element.strokeWidth || STROKE_WIDTH;
-        if (element.isRoot) {
-            return BASE * 10 + strokeWidth / 2;
-        }
-        return BASE * 6 + strokeWidth / 2;
-    }
-    return {
-        getHeight(element) {
-            return NodeSpace.getNodeHeight(board, element);
-        },
-        getWidth(element) {
-            return NodeSpace.getNodeWidth(board, element);
-        },
-        getHorizontalGap(element, parent) {
-            const _layout = (parent && parent.layout) || getRootLayout(element);
-            const isHorizontal = isHorizontalLayout(_layout);
-            const strokeWidth = element.strokeWidth || STROKE_WIDTH;
-            if (isIndentedLayout(_layout)) {
-                return BASE * 4 + strokeWidth;
-            }
-            if (!isHorizontal) {
-                return getMainAxle(element, parent);
-            }
-            else {
-                return getSecondAxle(element, parent);
-            }
-        },
-        getVerticalGap(element, parent) {
-            const _layout = (parent && parent.layout) || getRootLayout(element);
-            if (isIndentedLayout(_layout)) {
-                return BASE;
-            }
-            const isHorizontal = isHorizontalLayout(_layout);
-            if (isHorizontal) {
-                return getMainAxle(element, parent);
-            }
-            else {
-                return getSecondAxle(element, parent);
-            }
-        },
-        getVerticalConnectingPosition(element, parent) {
-            if (element.shape === MindElementShape.underline && parent && isHorizontalLogicLayout(parent.layout)) {
-                return ConnectingPosition.bottom;
-            }
-            return undefined;
-        },
-        getExtendHeight(node) {
-            return BASE * 6;
-        },
-        getIndentedCrossLevelGap() {
-            return BASE * 2;
-        }
-    };
-};
-
 /**
  * get correctly layout：
  * 1. root is standard -> left or right
@@ -2478,12 +2484,14 @@ function getRectangleByNode(node) {
         height
     };
 }
-function getRectangleByElement(board, originPoint, element) {
+function getRectangleByElement(board, element) {
+    const width = NodeSpace.getNodeWidth(board, element);
+    const height = NodeSpace.getNodeHeight(board, element);
     const nodeRectangle = {
-        x: originPoint[0],
-        y: originPoint[1],
-        width: NodeSpace.getNodeWidth(board, element),
-        height: NodeSpace.getNodeHeight(board, element)
+        x: element.points[0][0],
+        y: element.points[0][1],
+        width,
+        height
     };
     return nodeRectangle;
 }
@@ -2781,8 +2789,8 @@ function drawAbstractIncludedOutline(board, roughSVG, element, activeHandlePosit
     const startHandle = roughSVG.line(startPoint1[0], startPoint1[1], startPoint2[0], startPoint2[1], getHandleOption(activeHandlePosition === AbstractHandlePosition.start));
     const endHandle = roughSVG.line(endPoint1[0], endPoint1[1], endPoint2[0], endPoint2[1], getHandleOption(activeHandlePosition === AbstractHandlePosition.end));
     handleBoardClass(board, activeHandlePosition, isHorizontal);
-    startHandle.setAttribute('stroke-linecap', 'round');
-    endHandle.setAttribute('stroke-linecap', 'round');
+    setStrokeLinecap(startHandle, 'round');
+    setStrokeLinecap(endHandle, 'round');
     abstractIncludedG.append(startHandle);
     abstractIncludedG.append(endHandle);
     abstractIncludedG.append(rectangle);
@@ -3078,7 +3086,10 @@ class MindNodeComponent extends PlaitPluginElementComponent {
                     MindTransforms.setTopicSize(this.board, this.element, width, height);
                 }
             },
-            textPlugins: plugins
+            textPlugins: plugins,
+            getMaxWidth: () => {
+                return NodeTopicThreshold.defaultTextMaxWidth;
+            }
         });
     }
     ngOnInit() {
@@ -3236,9 +3247,8 @@ class MindNodeComponent extends PlaitPluginElementComponent {
             ELEMENT_TO_NODE.delete(this.element);
         }
     }
-}
-MindNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindNodeComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MindNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: MindNodeComponent, selector: "plait-mind-node", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: MindNodeComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: MindNodeComponent, selector: "plait-mind-node", usesInheritance: true, ngImport: i0, template: `
         <plait-children
             *ngIf="!element.isCollapsed"
             [board]="board"
@@ -3246,8 +3256,9 @@ MindNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             [effect]="effect"
             [parentG]="parentG"
         ></plait-children>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PlaitChildrenElement, selector: "plait-children", inputs: ["board", "parent", "effect", "parentG"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindNodeComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PlaitChildrenElement, selector: "plait-children", inputs: ["board", "parent", "effect", "parentG"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: MindNodeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'plait-mind-node',
@@ -3290,12 +3301,12 @@ class PlaitMindComponent extends MindNodeComponent {
             ELEMENT_TO_NODE.set(node.origin, node);
         });
     }
-}
-PlaitMindComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitMindComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PlaitMindComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: PlaitMindComponent, selector: "plait-mind", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitMindComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: PlaitMindComponent, selector: "plait-mind", usesInheritance: true, ngImport: i0, template: `
         <plait-children [board]="board" [parent]="element" [effect]="effect" [parentG]="rootG"></plait-children>
-    `, isInline: true, dependencies: [{ kind: "component", type: i2.PlaitChildrenElement, selector: "plait-children", inputs: ["board", "parent", "effect", "parentG"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: PlaitMindComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "component", type: i2.PlaitChildrenElement, selector: "plait-children", inputs: ["board", "parent", "effect", "parentG"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: PlaitMindComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'plait-mind',
@@ -3307,11 +3318,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
         }] });
 
 class MindModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: MindModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.3", ngImport: i0, type: MindModule, declarations: [PlaitMindComponent, MindNodeComponent], imports: [CommonModule, TextModule, PlaitModule], exports: [PlaitMindComponent, MindNodeComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: MindModule, imports: [CommonModule, TextModule, PlaitModule] }); }
 }
-MindModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MindModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.5", ngImport: i0, type: MindModule, declarations: [PlaitMindComponent, MindNodeComponent], imports: [CommonModule, TextModule, PlaitModule], exports: [PlaitMindComponent, MindNodeComponent] });
-MindModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindModule, imports: [CommonModule, TextModule, PlaitModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: MindModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [PlaitMindComponent, MindNodeComponent],
@@ -3712,15 +3723,17 @@ const withCreateMind = (board) => {
     const newBoard = board;
     const { keydown, mousedown, mousemove, mouseup } = board;
     let fakeCreateNodeRef = null;
+    let emptyMind = null;
     newBoard.mousedown = (event) => {
-        if (fakeCreateNodeRef && PlaitBoard.isPointer(board, MindPointerType.mind)) {
-            const currentOptions = board.getPluginOptions(PlaitPluginKey.withSelection);
-            board.setPluginOptions(PlaitPluginKey.withSelection, {
-                isDisabledSelect: true
-            });
-            setTimeout(() => {
-                board.setPluginOptions(PlaitPluginKey.withSelection, { ...currentOptions });
-            }, 0);
+        const isMindPointer = PlaitBoard.isPointer(board, MindPointerType.mind);
+        let movingPoint = PlaitBoard.getMovingPointInBoard(board);
+        if (movingPoint && isDrawingMode(board) && isMindPointer) {
+            movingPoint = transformPoint(board, toPoint(movingPoint[0], movingPoint[1], PlaitBoard.getHost(board)));
+            const emptyMind = createEmptyMind(newBoard, movingPoint);
+            Transforms.insertNode(board, emptyMind, [board.children.length]);
+            clearSelectedElement(board);
+            addSelectedElement(board, emptyMind);
+            BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
         }
         mousedown(event);
     };
@@ -3729,13 +3742,14 @@ const withCreateMind = (board) => {
             mousemove(event);
             return;
         }
-        if (PlaitBoard.isPointer(board, MindPointerType.mind)) {
+        const isMindPointer = PlaitBoard.isPointer(board, MindPointerType.mind);
+        if (isDndMode(board) && isMindPointer) {
             throttleRAF(() => {
-                const movingPoint = PlaitBoard.getMovingPointInBoard(board);
+                let movingPoint = PlaitBoard.getMovingPointInBoard(board);
                 if (movingPoint) {
-                    const targetPoint = transformPoint(board, toPoint(movingPoint[0], movingPoint[1], PlaitBoard.getHost(board)));
-                    const emptyMind = createEmptyMind(targetPoint);
-                    const nodeRectangle = getRectangleByElement(newBoard, targetPoint, emptyMind);
+                    movingPoint = transformPoint(newBoard, toPoint(movingPoint[0], movingPoint[1], PlaitBoard.getHost(board)));
+                    emptyMind = createEmptyMind(newBoard, movingPoint);
+                    const nodeRectangle = getRectangleByElement(newBoard, emptyMind);
                     const nodeG = drawRoundRectangleByElement(board, nodeRectangle, emptyMind);
                     const topicRectangle = getTopicRectangleByElement(newBoard, nodeRectangle, emptyMind);
                     if (!fakeCreateNodeRef) {
@@ -3775,14 +3789,12 @@ const withCreateMind = (board) => {
         mousemove(event);
     };
     newBoard.mouseup = (event) => {
-        const movingPoint = PlaitBoard.getMovingPointInBoard(board);
-        if (movingPoint && fakeCreateNodeRef && PlaitBoard.isPointer(board, MindPointerType.mind)) {
-            const targetPoint = transformPoint(board, toPoint(movingPoint[0], movingPoint[1], PlaitBoard.getHost(board)));
-            const emptyMind = createEmptyMind(targetPoint);
+        if (emptyMind) {
             Transforms.insertNode(board, emptyMind, [board.children.length]);
             clearSelectedElement(board);
             addSelectedElement(board, emptyMind);
             BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
+            emptyMind = null;
         }
         destroy();
         mouseup(event);
@@ -3794,6 +3806,7 @@ const withCreateMind = (board) => {
         }
         if (event.key === DefaultHotkey && !PlaitBoard.isPointer(board, MindPointerType.mind)) {
             BoardTransforms.updatePointerType(board, MindPointerType.mind);
+            setCreationMode(board, BoardCreationMode.drawing);
             event.preventDefault();
             return;
         }
@@ -4348,10 +4361,10 @@ class MindEmojiBaseComponent {
     ngOnInit() {
         this.elementRef.nativeElement.style.fontSize = `${this.fontSize}px`;
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: MindEmojiBaseComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.3", type: MindEmojiBaseComponent, inputs: { fontSize: "fontSize", emojiItem: "emojiItem", board: "board", element: "element" }, host: { listeners: { "mousedown": "handleClick()" }, classAttribute: "mind-node-emoji" }, ngImport: i0 }); }
 }
-MindEmojiBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindEmojiBaseComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-MindEmojiBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: MindEmojiBaseComponent, inputs: { fontSize: "fontSize", emojiItem: "emojiItem", board: "board", element: "element" }, host: { listeners: { "mousedown": "handleClick()" }, classAttribute: "mind-node-emoji" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindEmojiBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: MindEmojiBaseComponent, decorators: [{
             type: Directive,
             args: [{
                     host: {
@@ -4397,13 +4410,16 @@ class MindImageBaseComponent {
     }
     ngOnInit() {
         this.activeGenerator = new ActiveGenerator(this.board, {
-            activeStrokeWidth: 1,
+            getStrokeWidth: () => {
+                return 1;
+            },
             getRectangle: (element) => {
                 return getImageForeignRectangle(this.board, this.element);
             },
             getStrokeWidthByElement: () => {
                 return 0;
-            }
+            },
+            hasResizeHandle: () => true
         });
         this.initialized = true;
     }
@@ -4418,10 +4434,10 @@ class MindImageBaseComponent {
             this.activeGenerator.destroy();
         }
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: MindImageBaseComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.3", type: MindImageBaseComponent, inputs: { imageItem: "imageItem", board: "board", element: "element", isFocus: "isFocus" }, 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: MindImageBaseComponent, decorators: [{
             type: Directive,
             args: [{
                     host: {
@@ -4446,5 +4462,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, 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, 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, NodeTopicThreshold, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, QUICK_INSERT_CIRCLE_COLOR, QUICK_INSERT_CIRCLE_OFFSET, QUICK_INSERT_INNER_CROSS_COLOR, ROOT_TOPIC_FONT_SIZE, ROOT_TOPIC_HEIGHT, ROOT_TOPIC_WIDTH, 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, removeActiveOnDragOrigin, removeSelectedImageElement, selectImage, separateChildren, setImageFocus, setIsDragging, temporaryDisableSelection, withMind, withMindExtend };
 //# sourceMappingURL=plait-mind.mjs.map