@plait/mind 0.12.1 → 0.13.0

package/fesm2020/plait-mind.mjs

@@ -1,7 +1,7 @@
 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, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, PlaitBoard, depthFirstRecursion, Path, drawLinearPath, createG, updateForeignObject, PlaitNode, drawRoundRectangle, getRectangleByElements, getSelectedElements, NODE_TO_PARENT, distanceBetweenPointAndRectangle, createForeignObject, drawAbstractRoundRectangle, createText, PlaitPointerType, PlaitPluginElementComponent, NODE_TO_INDEX, PlaitModule, transformPoint, toPoint, 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, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, PlaitBoard, depthFirstRecursion, Path, drawLinearPath, createG, updateForeignObject, PlaitNode, drawRoundRectangle, getRectangleByElements, getSelectedElements, NODE_TO_PARENT, distanceBetweenPointAndRectangle, createForeignObject, drawAbstractRoundRectangle, 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 { MindLayoutType, isIndentedLayout, getNonAbstractChildren, isStandardLayout, AbstractNode, isLeftLayout, isRightLayout, isVerticalLogicLayout, isHorizontalLogicLayout, isTopLayout, isBottomLayout, isHorizontalLayout, getCorrectStartEnd, getAbstractLayout, ConnectingPosition, GlobalLayout } from '@plait/layouts';
 import { getTextSize, TEXT_DEFAULT_HEIGHT, TextManage, TextModule } from '@plait/text';
 import { fromEvent, Subject } from 'rxjs';
@@ -310,7 +310,10 @@ const isHitEmojis = (board, element, point) => {
 
 function getTopicRectangleByNode(board, node) {
     let nodeRectangle = getRectangleByNode(node);
-    return getTopicRectangleByElement(board, nodeRectangle, node.origin);
+    const result = getTopicRectangleByElement(board, nodeRectangle, node.origin);
+    // add buffer width to avoid unexpected text breaks in different scene
+    result.width = result.width + 4;
+    return result;
 }
 function getTopicRectangleByElement(board, nodeRectangle, element) {
     const x = nodeRectangle.x + NodeSpace.getTextLeftSpace(board, element);
@@ -324,7 +327,7 @@ const NODE_MIN_WIDTH = 18;
 
 function editTopic(element) {
     const component = PlaitElement.getComponent(element);
-    component.editTopic();
+    component?.editTopic();
 }
 
 const TOPIC_COLOR = '#333';
@@ -476,7 +479,6 @@ const extractNodesText = (node) => {
     }
     return str;
 };
-// layoutLevel 用来表示插入兄弟节点还是子节点
 const insertMindElement = (board, inheritNode, path) => {
     const newNode = {};
     if (!inheritNode.isRoot) {
@@ -2647,7 +2649,6 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         const plugins = this.board.getMindOptions().textPlugins;
         this.textManage = new TextManage(this.board, this.viewContainerRef, () => {
             const rect = getTopicRectangleByNode(this.board, this.node);
-            rect.width = rect.width + WIDTH_BUFFER;
             return rect;
         }, (point) => {
             return isHitMindElement(this.board, point, this.element);
@@ -2959,33 +2960,29 @@ const withNodeDnd = (board) => {
             mousedown(event);
             return;
         }
-        // 确认是否 hit 节点
         const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
         const selectedElements = getSelectedElements(board);
-        depthFirstRecursion(board, element => {
-            if (activeElements.length || !MindElement.isMindElement(board, element)) {
-                return;
-            }
-            const isHitElement = isHitMindElement(board, point, element) && !element.isRoot && !AbstractNode.isAbstract(element);
-            const isAllMindElement = selectedElements.every(element => MindElement.isMindElement(board, element));
-            const isMultiple = isHitElement && selectedElements.length > 1 && selectedElements.includes(element) && isAllMindElement;
-            const isSingle = isHitElement && !(selectedElements.length > 1 && selectedElements.includes(element));
-            if (isSingle) {
-                activeElements = [element];
+        const hitTarget = getHitElements(board, { ranges: [{ anchor: point, focus: point }] }, (element) => {
+            return MindElement.isMindElement(board, element);
+        });
+        const targetElement = hitTarget && hitTarget.length === 1 ? hitTarget[0] : null;
+        if (targetElement &&
+            MindElement.isMindElement(board, targetElement) &&
+            !targetElement.isRoot &&
+            !AbstractNode.isAbstract(targetElement)) {
+            const targetElements = selectedElements.filter(element => MindElement.isMindElement(board, element) && !element.isRoot && !AbstractNode.isAbstract(element));
+            const isMultiple = selectedElements.length > 0 && selectedElements.includes(targetElement);
+            const isSingle = !isMultiple && selectedElements.length === 0;
+            if (isMultiple) {
+                activeElements = targetElements;
                 startPoint = point;
             }
-            else if (isMultiple) {
-                activeElements = selectedElements;
+            else if (isSingle) {
+                activeElements = [targetElement];
                 startPoint = point;
             }
-        }, node => {
-            if (PlaitBoard.isBoard(node) || board.isRecursion(node)) {
-                return true;
-            }
-            else {
-                return false;
-            }
-        });
+            event.preventDefault();
+        }
         if (activeElements.length) {
             correspondingElements = getOverallAbstracts(board, activeElements);
             event.preventDefault();
@@ -3236,12 +3233,12 @@ const withAbstract = (board) => {
         const point = transformPoint(board, toPoint(event.x, event.y, host));
         activeAbstractElement = activeAbstractElements.find(element => {
             abstractHandlePosition = getHitAbstractHandle(board, element, point);
-            if (newBoard?.onAbstractResize) {
-                newBoard.onAbstractResize(AbstractResizeState.start);
-            }
             return abstractHandlePosition;
         });
         if (activeAbstractElement) {
+            if (newBoard?.onAbstractResize) {
+                newBoard.onAbstractResize(AbstractResizeState.start);
+            }
             startPoint = point;
             return;
         }
@@ -3434,27 +3431,104 @@ const withCreateMind = (board) => {
 
 const withMindHotkey = (board) => {
     const { keydown } = board;
-    board.keydown = (keyboardEvent) => {
-        if (!PlaitBoard.getMovingPoint(board)) {
-            return;
+    board.keydown = (event) => {
+        const selectedElements = getSelectedElements(board);
+        const isSingleSelection = selectedElements.length === 1;
+        const isSingleMindElement = selectedElements.length === 1 && MindElement.isMindElement(board, selectedElements[0]);
+        const targetElement = selectedElements[0];
+        if (isExpandHotkey(event) && isSingleMindElement && !PlaitMind.isMind(targetElement)) {
+            if (targetElement.children && targetElement.children.length > 0) {
+                Transforms.setNode(board, { isCollapsed: targetElement.isCollapsed ? false : true }, PlaitBoard.findPath(board, targetElement));
+                return;
+            }
         }
-        if (isExpandHotkey(keyboardEvent)) {
-            const selectedMindElements = getSelectedElements(board).filter(element => MindElement.isMindElement(board, element));
-            if (selectedMindElements.length === 1 &&
-                !PlaitMind.isMind(selectedMindElements[0]) &&
-                selectedMindElements[0].children &&
-                selectedMindElements[0].children.length > 0) {
-                const element = selectedMindElements[0];
-                Transforms.setNode(board, { isCollapsed: element.isCollapsed ? false : true }, PlaitBoard.findPath(board, element));
+        if (!PlaitBoard.isReadonly(board)) {
+            if (isTabHotkey(event) && isSingleMindElement) {
+                event.preventDefault();
+                removeSelectedElement(board, targetElement);
+                const targetElementPath = PlaitBoard.findPath(board, targetElement);
+                if (targetElement.isCollapsed) {
+                    const newElement = { isCollapsed: false };
+                    PlaitHistoryBoard.withoutSaving(board, () => {
+                        Transforms.setNode(board, newElement, targetElementPath);
+                    });
+                }
+                insertMindElement(board, targetElement, findNewChildNodePath(board, targetElement));
+                return;
+            }
+            if (isEnterHotkey(event) &&
+                isSingleMindElement &&
+                !PlaitMind.isMind(targetElement) &&
+                !AbstractNode.isAbstract(targetElement)) {
+                const targetElementPath = PlaitBoard.findPath(board, targetElement);
+                if (isInRightBranchOfStandardLayout(targetElement)) {
+                    const refs = insertElementHandleRightNodeCount(board, targetElementPath.slice(0, 1), 1);
+                    MindTransforms.setRightNodeCountByRefs(board, refs);
+                }
+                const abstractRefs = insertElementHandleAbstract(board, Path.next(targetElementPath));
+                MindTransforms.setAbstractsByRefs(board, abstractRefs);
+                insertMindElement(board, targetElement, findNewSiblingNodePath(board, targetElement));
+                return;
+            }
+            if (selectedElements.length > 0 && (hotkeys.isDeleteBackward(event) || hotkeys.isDeleteForward(event))) {
+                event.preventDefault();
+                const targetMindElements = selectedElements.filter(el => MindElement.isMindElement(board, el));
+                const firstLevelElements = getFirstLevelElement(targetMindElements);
+                const deletableElements = firstLevelElements.reverse();
+                const abstractRefs = deleteElementHandleAbstract(board, deletableElements);
+                MindTransforms.setAbstractsByRefs(board, abstractRefs);
+                const refs = deleteElementsHandleRightNodeCount(board, targetMindElements);
+                MindTransforms.setRightNodeCountByRefs(board, refs);
+                MindTransforms.removeElements(board, targetMindElements);
+                let activeElement;
+                if (AbstractNode.isAbstract(firstLevelElements[0])) {
+                    const parent = MindElement.getParent(firstLevelElements[0]);
+                    activeElement = parent.children[firstLevelElements[0].start];
+                }
+                const firstElement = firstLevelElements[0];
+                const firstElementParent = MindElement.findParent(firstElement);
+                const hasSameParent = firstLevelElements.every(element => {
+                    return MindElement.findParent(element) === firstElementParent;
+                });
+                if (firstElementParent && hasSameParent && !activeElement) {
+                    const firstElementIndex = firstElementParent.children.indexOf(firstElement);
+                    const childrenCount = firstElementParent.children.length;
+                    // active parent element
+                    if (childrenCount === firstLevelElements.length) {
+                        activeElement = firstElementParent;
+                    }
+                    else {
+                        if (firstElementIndex > 0) {
+                            activeElement = firstElementParent.children[firstElementIndex - 1];
+                        }
+                    }
+                }
+                if (activeElement) {
+                    addSelectedElement(board, activeElement);
+                }
+                return;
+            }
+            if (!isVirtualKey(event) && !isSpaceHotkey(event) && isSingleSelection) {
+                event.preventDefault();
+                editTopic(targetElement);
                 return;
             }
         }
-        keydown(keyboardEvent);
+        keydown(event);
     };
     return board;
 };
-const isExpandHotkey = (keyboardEvent) => {
-    return isKeyHotkey('mod+/', keyboardEvent);
+const isExpandHotkey = (event) => {
+    return isKeyHotkey('mod+/', event);
+};
+const isTabHotkey = (event) => {
+    return event.key === 'Tab';
+};
+const isEnterHotkey = (event) => {
+    return event.key === 'Enter';
+};
+const isSpaceHotkey = (event) => {
+    return event.code === 'Space';
 };
 
 const withNodeHover = (board) => {
@@ -3570,92 +3644,6 @@ const withMind = (board) => {
         }
         return isMovable(element);
     };
-    board.keydown = (event) => {
-        if (PlaitBoard.isReadonly(board)) {
-            keydown(event);
-            return;
-        }
-        const selectedElements = getSelectedElements(board);
-        if (selectedElements.length) {
-            if (selectedElements.length === 1 &&
-                (event.key === 'Tab' ||
-                    (event.key === 'Enter' && !selectedElements[0].isRoot && !AbstractNode.isAbstract(selectedElements[0])))) {
-                event.preventDefault();
-                const selectedElement = selectedElements[0];
-                removeSelectedElement(board, selectedElement);
-                const selectedElementPath = PlaitBoard.findPath(board, selectedElement);
-                if (event.key === 'Tab') {
-                    if (selectedElement.isCollapsed) {
-                        const newElement = { isCollapsed: false };
-                        PlaitHistoryBoard.withoutSaving(board, () => {
-                            Transforms.setNode(board, newElement, selectedElementPath);
-                        });
-                    }
-                    insertMindElement(board, selectedElement, findNewChildNodePath(board, selectedElement));
-                }
-                else {
-                    if (isInRightBranchOfStandardLayout(selectedElement)) {
-                        const refs = insertElementHandleRightNodeCount(board, selectedElementPath.slice(0, 1), 1);
-                        MindTransforms.setRightNodeCountByRefs(board, refs);
-                    }
-                    const abstractRefs = insertElementHandleAbstract(board, Path.next(selectedElementPath));
-                    MindTransforms.setAbstractsByRefs(board, abstractRefs);
-                    insertMindElement(board, selectedElement, findNewSiblingNodePath(board, selectedElement));
-                }
-                return;
-            }
-            if (hotkeys.isDeleteBackward(event) || hotkeys.isDeleteForward(event)) {
-                event.preventDefault();
-                const deletableElements = getFirstLevelElement(selectedElements).reverse();
-                const abstractRefs = deleteElementHandleAbstract(board, deletableElements);
-                MindTransforms.setAbstractsByRefs(board, abstractRefs);
-                const refs = deleteElementsHandleRightNodeCount(board, selectedElements);
-                MindTransforms.setRightNodeCountByRefs(board, refs);
-                MindTransforms.removeElements(board, selectedElements);
-                let activeElement;
-                const firstLevelElements = getFirstLevelElement(selectedElements);
-                if (AbstractNode.isAbstract(firstLevelElements[0])) {
-                    const parent = MindElement.getParent(firstLevelElements[0]);
-                    activeElement = parent.children[firstLevelElements[0].start];
-                }
-                const firstElement = firstLevelElements[0];
-                const firstElementParent = MindElement.findParent(firstElement);
-                const hasSameParent = firstLevelElements.every(element => {
-                    return MindElement.findParent(element) === firstElementParent;
-                });
-                if (firstElementParent && hasSameParent && !activeElement) {
-                    const firstElementIndex = firstElementParent.children.indexOf(firstElement);
-                    const childrenCount = firstElementParent.children.length;
-                    // active parent element
-                    if (childrenCount === firstLevelElements.length) {
-                        activeElement = firstElementParent;
-                    }
-                    else {
-                        if (firstElementIndex > 0) {
-                            activeElement = firstElementParent.children[firstElementIndex - 1];
-                        }
-                    }
-                }
-                if (activeElement) {
-                    addSelectedElement(board, activeElement);
-                }
-                return;
-            }
-            // auto enter edit status
-            if (!isVirtualKey(event)) {
-                event.preventDefault();
-                const selectedElement = selectedElements[0];
-                editTopic(selectedElement);
-                return;
-            }
-        }
-        if (board.selection && event.code === 'Space') {
-            if (selectedElements?.length) {
-                return;
-            }
-        }
-        keydown(event);
-    };
     board.dblclick = (event) => {
         if (PlaitBoard.isReadonly(board)) {
             dblclick(event);