@plait/mind 0.21.0 → 0.23.0

package/fesm2020/plait-mind.mjs

@@ -5,7 +5,7 @@ import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor,
 import { MindLayoutType, isIndentedLayout, AbstractNode, getNonAbstractChildren, isStandardLayout, isLeftLayout, isRightLayout, isVerticalLogicLayout, isHorizontalLogicLayout, isTopLayout, isBottomLayout, isHorizontalLayout, getCorrectStartEnd, getAbstractLayout, ConnectingPosition, GlobalLayout } from '@plait/layouts';
 import { PlaitMarkEditor, MarkTypes, DEFAULT_FONT_SIZE, TEXT_DEFAULT_HEIGHT, buildText, getTextSize, TextManage, ExitOrigin, TextModule, getTextFromClipboard } from '@plait/text';
 import { fromEvent, Subject } from 'rxjs';
-import { Node, Path as Path$1 } from 'slate';
+import { Node as Node$1, Path as Path$1 } from 'slate';
 import { isKeyHotkey } from 'is-hotkey';
 import { pointsOnBezierCurves } from 'points-on-curve';
 import { take, filter } from 'rxjs/operators';
@@ -513,7 +513,7 @@ const copyNewNode = (node) => {
 const extractNodesText = (node) => {
     let str = '';
     if (node) {
-        str += Node.string(node.data.topic) + ' ';
+        str += Node$1.string(node.data.topic) + ' ';
         for (const childNode of node.children) {
             str += extractNodesText(childNode);
         }
@@ -681,7 +681,7 @@ const adjustAbstractToNode = (node) => {
 };
 const adjustNodeToRoot = (board, node) => {
     const newElement = { ...node };
-    if (!Node.string(newElement.data.topic)) {
+    if (!Node$1.string(newElement.data.topic)) {
         newElement.data.topic = { children: [{ text: '思维导图' }] };
     }
     delete newElement?.strokeColor;
@@ -703,6 +703,28 @@ const adjustNodeToRoot = (board, node) => {
     };
 };
 
+const BOARD_TO_SELECTED_IMAGE_ELEMENT = new WeakMap();
+const getSelectedImageElement = (board) => {
+    return BOARD_TO_SELECTED_IMAGE_ELEMENT.get(board);
+};
+const addSelectedImageElement = (board, element) => {
+    BOARD_TO_SELECTED_IMAGE_ELEMENT.set(board, element);
+};
+const removeSelectedImageElement = (board) => {
+    BOARD_TO_SELECTED_IMAGE_ELEMENT.delete(board);
+};
+const setImageFocus = (board, element, isFocus) => {
+    if (isFocus) {
+        addSelectedImageElement(board, element);
+    }
+    else {
+        removeSelectedImageElement(board);
+    }
+    const elementComponent = PlaitElement.getComponent(element);
+    elementComponent.imageDrawer.componentRef.instance.isFocus = isFocus;
+    elementComponent.imageDrawer.componentRef.instance.cdr.markForCheck();
+};
+
 const DefaultAbstractNodeStyle = {
     branch: { color: GRAY_COLOR, width: 2 },
     shape: {
@@ -2276,6 +2298,8 @@ const insertAbstractNode = (board, path, start, end) => {
     mindElement.start = start;
     mindElement.end = end;
     Transforms.insertNode(board, mindElement, path);
+    clearSelectedElement(board);
+    addSelectedElement(board, mindElement);
 };
 
 const setLayout = (board, layout, path) => {
@@ -3509,6 +3533,8 @@ const withAbstract = (board) => {
             return abstractHandlePosition;
         });
         if (activeAbstractElement) {
+            // prevent text from being selected
+            event.preventDefault();
             if (newBoard?.onAbstractResize) {
                 newBoard.onAbstractResize(AbstractResizeState.start);
             }
@@ -3813,49 +3839,45 @@ const isSpaceHotkey = (event) => {
     return event.code === 'Space';
 };
 
-const withNodeHover = (board) => {
-    const { mousemove, mouseleave } = board;
-    let hoveredMindElement = null;
-    board.mousemove = (event) => {
-        throttleRAF(() => {
-            let target = null;
-            const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
-            depthFirstRecursion(board, element => {
-                if (target) {
-                    return;
-                }
-                if (!MindElement.isMindElement(board, element)) {
-                    return;
-                }
-                const isHitElement = isHitMindElement(board, point, element);
-                if (isHitElement) {
-                    target = element;
-                }
-            }, getIsRecursionFunc(board), true);
-            if (hoveredMindElement && target && hoveredMindElement === target) {
-                return;
-            }
-            if (hoveredMindElement) {
-                removeHovered(hoveredMindElement);
-            }
-            if (target) {
-                addHovered(target);
-                hoveredMindElement = target;
-            }
-            else {
-                hoveredMindElement = null;
-            }
-        });
-        mousemove(event);
-    };
-    board.mouseleave = (event) => {
-        if (hoveredMindElement) {
-            removeHovered(hoveredMindElement);
-            hoveredMindElement = null;
+const mouseMoveHandle = (board, event, nodeHoveredExtendRef) => {
+    let target = null;
+    const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+    depthFirstRecursion(board, element => {
+        if (target) {
+            return;
         }
-        mouseleave(event);
-    };
-    return board;
+        if (!MindElement.isMindElement(board, element)) {
+            return;
+        }
+        const isHitElement = isHitMindElement(board, point, element);
+        if (isHitElement) {
+            target = element;
+        }
+    }, getIsRecursionFunc(board), true);
+    if (nodeHoveredExtendRef && target && nodeHoveredExtendRef.element === target) {
+        return nodeHoveredExtendRef;
+    }
+    if (nodeHoveredExtendRef) {
+        removeHovered(nodeHoveredExtendRef.element);
+    }
+    if (target) {
+        addHovered(target);
+        if (nodeHoveredExtendRef) {
+            nodeHoveredExtendRef.element = target;
+        }
+        else {
+            nodeHoveredExtendRef = { element: target };
+        }
+    }
+    else {
+        nodeHoveredExtendRef = null;
+    }
+    return nodeHoveredExtendRef;
+};
+const mouseLeaveHandle = (board, event, nodeHoveredExtendRef) => {
+    if (nodeHoveredExtendRef) {
+        removeHovered(nodeHoveredExtendRef.element);
+    }
 };
 const addHovered = (element) => {
     const component = PlaitElement.getComponent(element);
@@ -3868,33 +3890,29 @@ const removeHovered = (element) => {
     }
 };
 
-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 withNodeHoverDetect = (board) => {
+    const { mousemove, mouseleave } = board;
+    let nodeHoveredExtendRef = null;
+    board.mousemove = (event) => {
+        nodeHoveredExtendRef = mouseMoveHandle(board, event, nodeHoveredExtendRef);
+        mousemove(event);
+    };
+    board.mouseleave = (event) => {
+        mouseLeaveHandle(board, event, nodeHoveredExtendRef);
+        nodeHoveredExtendRef = null;
+        mouseleave(event);
+    };
+    return board;
 };
 
 const withNodeImage = (board) => {
-    let selectedImageElement = null;
-    const { keydown, mousedown } = board;
+    const { keydown, mousedown, globalMouseup } = board;
     board.mousedown = (event) => {
+        const selectedImageElement = getSelectedImageElement(board);
         if (PlaitBoard.isReadonly(board) || !isMainPointer(event) || !PlaitBoard.isPointer(board, PlaitPointerType.selection)) {
+            if (selectedImageElement) {
+                setImageFocus(board, selectedImageElement, false);
+            }
             mousedown(event);
             return;
         }
@@ -3910,24 +3928,35 @@ const withNodeImage = (board) => {
         }
         if (selectedImageElement) {
             setImageFocus(board, selectedImageElement, false);
-            selectedImageElement = null;
         }
         if (hitImage) {
             temporaryDisableSelection(board);
-            selectedImageElement = hitElements[0];
-            setImageFocus(board, selectedImageElement, true);
+            setImageFocus(board, hitElements[0], true);
             clearSelectedElement(board);
         }
         mousedown(event);
     };
     board.keydown = (event) => {
+        const selectedImageElement = getSelectedImageElement(board);
         if (!PlaitBoard.isReadonly(board) && selectedImageElement && (hotkeys.isDeleteBackward(event) || hotkeys.isDeleteForward(event))) {
+            addSelectedElement(board, selectedImageElement);
+            setImageFocus(board, selectedImageElement, false);
             MindTransforms.removeImage(board, selectedImageElement);
-            selectedImageElement = null;
             return;
         }
         keydown(event);
     };
+    board.globalMouseup = (event) => {
+        if (PlaitBoard.isFocus(board)) {
+            const isInBoard = event.target instanceof Node && PlaitBoard.getBoardContainer(board).contains(event.target);
+            const selectedImageElement = getSelectedImageElement(board);
+            // Clear image selection when mouse board outside area
+            if (selectedImageElement && !isInBoard) {
+                setImageFocus(board, selectedImageElement, false);
+            }
+        }
+        globalMouseup(event);
+    };
     return board;
 };
 
@@ -3938,7 +3967,7 @@ const withNodeResize = (board) => {
     let startPoint = null;
     board.mousedown = (event) => {
         if (targetElement) {
-            startPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            startPoint = [event.x, event.y];
             // prevent text from being selected
             event.preventDefault();
             return;
@@ -3954,7 +3983,6 @@ const withNodeResize = (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),
@@ -3966,18 +3994,25 @@ const withNodeResize = (board) => {
             }
         }
         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);
-            }
+            throttleRAF(() => {
+                if (!startPoint) {
+                    return;
+                }
+                const endPoint = [event.x, event.y];
+                const offsetX = endPoint[0] - startPoint[0];
+                const zoom = board.viewport.zoom;
+                let resizedWidth = targetElementRef.currentWidth + offsetX / zoom;
+                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 { height } = targetElementRef.textManage.getSize();
+                    MindTransforms.setNodeManualWidth(board, newTarget, resizedWidth * zoom, height);
+                }
+            });
+            return;
         }
         else {
             // press and start drag when node is non selected
@@ -3997,8 +4032,8 @@ const withNodeResize = (board) => {
     };
     board.globalMouseup = (event) => {
         globalMouseup(event);
-        if (isMindNodeResizing(board) && targetElement) {
-            removeResizing(board, targetElement);
+        if (isMindNodeResizing(board) || targetElement) {
+            targetElement && removeResizing(board, targetElement);
             targetElementRef = null;
             targetElement = null;
             startPoint = null;
@@ -4038,10 +4073,9 @@ const getTargetElement = (board, point) => {
     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 };
+    return { x: rectangle.x + rectangle.width - EXTEND_OFFSET, y: rectangle.y, width: EXTEND_OFFSET * 2, height: rectangle.height };
 };
 
 const withMind = (baseBoard) => {
@@ -4149,7 +4183,7 @@ const withMind = (baseBoard) => {
         MindTransforms.removeElements(board, selectedElements);
         deleteFragment(data);
     };
-    return withNodeResize(withNodeImage(withNodeHover(withMindHotkey(withMindExtend(withCreateMind(withAbstract(withNodeDnd(board))))))));
+    return withNodeResize(withNodeImage(withNodeHoverDetect(withMindHotkey(withMindExtend(withCreateMind(withAbstract(withNodeDnd(board))))))));
 };
 
 class MindEmojiBaseComponent {
@@ -4203,5 +4237,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, AbstractHandlePosition, AbstractResizeState, BASE, BRANCH_FONT_FAMILY, BRANCH_WIDTH, BaseDrawer, BranchShape, DEFAULT_FONT_FAMILY, DefaultAbstractNodeStyle, DefaultNodeStyle, ELEMENT_TO_NODE, EXTEND_DIAMETER, EXTEND_OFFSET, GRAY_COLOR, INHERIT_ATTRIBUTE_KEYS, IS_DRAGGING, LayoutDirection, LayoutDirectionsMap, MindColorfulThemeColor, MindDarkThemeColor, MindDefaultThemeColor, MindElement, MindElementShape, MindEmojiBaseComponent, MindImageBaseComponent, MindModule, MindNode, MindNodeComponent, MindPointerType, MindQueries, MindRetroThemeColor, MindSoftThemeColor, MindStarryThemeColor, MindThemeColor, MindThemeColors, MindTransforms, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, QUICK_INSERT_CIRCLE_COLOR, QUICK_INSERT_CIRCLE_OFFSET, QUICK_INSERT_INNER_CROSS_COLOR, ROOT_TOPIC_FONT_SIZE, ROOT_TOPIC_HEIGHT, STROKE_WIDTH, TOPIC_COLOR, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, TRANSPARENT, WithMindPluginKey, addActiveOnDragOrigin, adjustAbstractToNode, adjustNodeToRoot, adjustRootToNode, canSetAbstract, copyNewNode, correctLayoutByDirection, createDefaultMind, createEmptyMind, createMindElement, deleteElementHandleAbstract, deleteElementsHandleRightNodeCount, detectDropTarget, directionCorrector, directionDetector, divideElementByParent, drawFakeDragNode, drawFakeDropNode, editTopic, extractNodesText, findLastChild, findLocationLeftIndex, getAbstractBranchColor, getAbstractBranchWidth, getAbstractHandleRectangle, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getBranchShapeByMindElement, getBranchWidthByMindElement, getChildrenCount, getCorrespondingAbstract, getDefaultBranchColor, getDefaultBranchColorByIndex, getDefaultLayout, getEmojiForeignRectangle, getEmojiRectangle, getFillByElement, getFirstLevelElement, getHitAbstractHandle, getImageForeignRectangle, getInCorrectLayoutDirection, getLayoutDirection$1 as getLayoutDirection, getLayoutReverseDirection, getLocationScope, getMindThemeColor, getNextBranchColor, getOverallAbstracts, getPathByDropTarget, getRectangleByElement, getRectangleByNode, getRectangleByResizingLocation, getRelativeStartEndByAbstractRef, getRootLayout, getShapeByElement, getStrokeByMindElement, getStrokeWidthByElement, getTopicRectangleByElement, getTopicRectangleByNode, getValidAbstractRefs, handleTouchedAbstract, hasAfterDraw, hasPreviousOrNextOfDropPath, insertElementHandleAbstract, insertElementHandleRightNodeCount, insertMindElement, isChildElement, isChildOfAbstract, isChildRight, isChildUp, isCorrectLayout, isDragging, isDropStandardRight, isHitEmojis, isHitImage, isHitMindElement, isInRightBranchOfStandardLayout, isMixedLayout, isSetAbstract, isValidTarget, isVirtualKey, removeActiveOnDragOrigin, separateChildren, setIsDragging, 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, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, QUICK_INSERT_CIRCLE_COLOR, QUICK_INSERT_CIRCLE_OFFSET, QUICK_INSERT_INNER_CROSS_COLOR, ROOT_TOPIC_FONT_SIZE, ROOT_TOPIC_HEIGHT, STROKE_WIDTH, TOPIC_COLOR, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, TRANSPARENT, WithMindPluginKey, addActiveOnDragOrigin, addSelectedImageElement, adjustAbstractToNode, adjustNodeToRoot, adjustRootToNode, canSetAbstract, copyNewNode, correctLayoutByDirection, createDefaultMind, createEmptyMind, createMindElement, deleteElementHandleAbstract, deleteElementsHandleRightNodeCount, detectDropTarget, directionCorrector, directionDetector, divideElementByParent, drawFakeDragNode, drawFakeDropNode, editTopic, extractNodesText, findLastChild, findLocationLeftIndex, getAbstractBranchColor, getAbstractBranchWidth, getAbstractHandleRectangle, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getBranchShapeByMindElement, getBranchWidthByMindElement, getChildrenCount, getCorrespondingAbstract, getDefaultBranchColor, getDefaultBranchColorByIndex, getDefaultLayout, getEmojiForeignRectangle, getEmojiRectangle, getFillByElement, getFirstLevelElement, getHitAbstractHandle, getImageForeignRectangle, getInCorrectLayoutDirection, getLayoutDirection$1 as getLayoutDirection, getLayoutReverseDirection, getLocationScope, getMindThemeColor, getNextBranchColor, getOverallAbstracts, getPathByDropTarget, getRectangleByElement, getRectangleByNode, getRectangleByResizingLocation, getRelativeStartEndByAbstractRef, getRootLayout, getSelectedImageElement, getShapeByElement, getStrokeByMindElement, getStrokeWidthByElement, getTopicRectangleByElement, getTopicRectangleByNode, getValidAbstractRefs, handleTouchedAbstract, hasAfterDraw, hasPreviousOrNextOfDropPath, insertElementHandleAbstract, insertElementHandleRightNodeCount, insertMindElement, isChildElement, isChildOfAbstract, isChildRight, isChildUp, isCorrectLayout, isDragging, isDropStandardRight, isHitEmojis, isHitImage, isHitMindElement, isInRightBranchOfStandardLayout, isMixedLayout, isSetAbstract, isValidTarget, isVirtualKey, removeActiveOnDragOrigin, removeSelectedImageElement, separateChildren, setImageFocus, setIsDragging, temporaryDisableSelection, withMind, withMindExtend };
 //# sourceMappingURL=plait-mind.mjs.map