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

package/fesm2022/plait-mind.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, NgModule, NgZone, Directive, Input, HostListener } from '@angular/core';
 import * as i2 from '@plait/core';
-import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, RectangleClient, PlaitElement, PlaitPluginKey, getSelectedElements, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, PlaitBoard, Path, PlaitNode, PlaitContextService, depthFirstRecursion, getIsRecursionFunc, drawLinearPath, drawBezierPath, createG, updateForeignObject, drawRoundRectangle, getRectangleByElements, NODE_TO_PARENT, distanceBetweenPointAndRectangle, createForeignObject, 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,6 +214,7 @@ 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"';
@@ -446,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';
@@ -587,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;
@@ -2193,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
@@ -2481,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;
 }
@@ -2784,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);
@@ -3718,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);
     };
@@ -3735,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) {
@@ -3781,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);
@@ -3800,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;
         }
@@ -4455,5 +4462,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", 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, 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, 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