@plait/mind 0.89.1 → 0.90.0

package/fesm2022/plait-mind.mjs

@@ -1,4 +1,4 @@
-import { DEFAULT_COLOR, DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, rgbaToHEX, PlaitElement, PlaitNode, Path, isNullOrUndefined, PlaitBoard, getSelectedElements, getI18nValue, idCreator, Transforms, clearSelectedElement, addSelectedElement, distanceBetweenPointAndRectangle, RectangleClient, setDragging, depthFirstRecursion, getIsRecursionFunc, drawRoundRectangle, drawLinearPath, drawBezierPath, setStrokeLinecap, createG, createForeignObject, updateForeignObject, getRectangleByElements, toActiveRectangleFromViewBoxRectangle, ACTIVE_STROKE_WIDTH, SELECTION_RECTANGLE_CLASS_NAME, NODE_TO_PARENT, removeSelectedElement, PlaitHistoryBoard, isSelectedElement, createText, isSelectionMoving, isDragging, isMovingElements, NODE_TO_INDEX, PlaitPointerType, isMainPointer, toViewBoxPoint, toHostPoint, getHitElementByPoint, distanceBetweenPointAndPoint, CoreTransforms, toActivePointFromViewBoxPoint, BoardTransforms, throttleRAF, isContextmenu, temporaryDisableSelection, hotkeys, createClipboardContext, WritableClipboardType, Point, ResizeCursorClass, WritableClipboardOperationType, addOrCreateClipboardContext } from '@plait/core';
+import { DEFAULT_COLOR, DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, rgbaToHEX, PlaitElement, PlaitNode, Path, isNullOrUndefined, PlaitBoard, getSelectedElements, getI18nValue, idCreator, Transforms, clearSelectedElement, addSelectedElement, distanceBetweenPointAndRectangle, RectangleClient, setDragging, depthFirstRecursion, getIsRecursionFunc, drawRoundRectangle, drawLinearPath, drawBezierPath, setStrokeLinecap, createG, createForeignObject, updateForeignObject, getRectangleByElements, toActiveRectangleFromViewBoxRectangle, ACTIVE_STROKE_WIDTH, SELECTION_RECTANGLE_CLASS_NAME, NODE_TO_PARENT, removeSelectedElement, PlaitHistoryBoard, createText, isSelectionMoving, isDragging, isMovingElements, NODE_TO_INDEX, PlaitPointerType, isMainPointer, toViewBoxPoint, toHostPoint, getHitElementByPoint, distanceBetweenPointAndPoint, CoreTransforms, toActivePointFromViewBoxPoint, BoardTransforms, throttleRAF, getElementById, isTouchDevice, isSelectedElement, isContextmenu, temporaryDisableSelection, hotkeys, createClipboardContext, WritableClipboardType, Point, ResizeCursorClass, WritableClipboardOperationType, addOrCreateClipboardContext } from '@plait/core';
 import { MindLayoutType, AbstractNode, isIndentedLayout, isHorizontalLogicLayout, ConnectingPosition, isHorizontalLayout, getNonAbstractChildren, isStandardLayout, isLeftLayout, isRightLayout, isVerticalLogicLayout, isTopLayout, isBottomLayout, getCorrectStartEnd, getAbstractLayout, GlobalLayout } from '@plait/layouts';
 import { StrokeStyle, getFirstTextManage, buildText, getElementSize, DEFAULT_FONT_FAMILY, RESIZE_HANDLE_DIAMETER, getRectangleResizeHandleRefs, addElementOfFocusedImage, ImageGenerator, removeElementOfFocusedImage, getStrokeLineDash, getXDistanceBetweenPoint, moveXOfPoint, moveYOfPoint, Generator, PropertyTransforms, TRANSPARENT, measureElement, isResizing, CommonElementFlavour, WithTextPluginKey, TextManage, isDrawingMode, isDndMode, setCreationMode, BoardCreationMode, isExpandHotkey, isTabHotkey, isEnterHotkey, isVirtualKey, isDelete, isSpaceHotkey, getElementOfFocusedImage, acceptImageTypes, buildImage, withResize, getElementsText } from '@plait/common';
 import { DEFAULT_FONT_SIZE, PlaitMarkEditor, MarkTypes, FontSizes } from '@plait/text-plugins';
@@ -2152,6 +2152,9 @@ function findNewChildNodePath(board, element) {
     const children = getNonAbstractChildren(element);
     return PlaitBoard.findPath(board, element).concat(children.length);
 }
+function findNewRightChildNodePath(board, element, rightNodeCount) {
+    return PlaitBoard.findPath(board, element).concat(rightNodeCount ? rightNodeCount - 1 : 0);
+}
 function findNewSiblingNodePath(board, element) {
     const path = PlaitBoard.findPath(board, element);
     return Path$1.next(path);
@@ -2690,8 +2693,10 @@ class NodeShapeGenerator extends Generator {
 class NodeMoreGenerator extends Generator {
     static { this.key = 'mind-node-more'; }
     canDraw(element, extraData) {
-        if (((extraData?.isHovered || extraData?.isHoveredCollapseArea || extraData?.isHoveredAddArea) && canHandleNodeMore(this.board)) ||
-            (extraData?.isSelected && isLastSelectedMindElement(this.board, element) && canHandleNodeMore(this.board)) ||
+        const selectedElements = getSelectedElements(this.board);
+        if (((extraData?.isHit || extraData?.isHitAwarenessRectangle || extraData?.isHitStandardLeftAwarenessRectangle) &&
+            canHandleNodeMore(this.board)) ||
+            (extraData?.isSelected && selectedElements.length === 1 && canHandleNodeMore(this.board)) ||
             element.isCollapsed) {
             return true;
         }
@@ -2700,25 +2705,14 @@ class NodeMoreGenerator extends Generator {
     draw(element, extraData) {
         const moreGContainer = createG();
         const stroke = getBranchColorByMindElement(this.board, element);
-        const layoutDirection = getNodeMoreLayoutDirection(this.board, element);
-        const moreStartAndEnd = getMoreStartAndEnd(this.board, element, layoutDirection);
-        const collapseOrExpandCenter = moveXOfPoint(moreStartAndEnd[1], NODE_MORE_ICON_DIAMETER / 2, layoutDirection);
-        const hasChildren = element.children.length > 0;
-        const isShowCollapseOrAdd = !element.isCollapsed &&
-            (isSelectedElement(this.board, element) ||
-                !!extraData?.isHovered ||
-                !!extraData?.isHoveredCollapseArea ||
-                !!extraData?.isHoveredAddArea);
-        const isShowCollapse = isShowCollapseOrAdd && hasChildren && !PlaitMind.isMind(element);
-        const isShowAdd = isShowCollapseOrAdd && !PlaitBoard.isReadonly(this.board);
-        const addCenter = (isShowCollapseOrAdd && getAddCenterByCollapseOrExpandCenter(element, collapseOrExpandCenter, layoutDirection)) || null;
-        this.toggleCollapseOrAdd(collapseOrExpandCenter, addCenter, stroke, moreGContainer, isShowCollapse, isShowAdd, !!extraData?.isHoveredAddArea, !!extraData?.isShowCollapseAnimation, !!extraData?.isShowAddAnimation);
-        this.toggleExpandBadge(element, moreStartAndEnd, collapseOrExpandCenter, stroke, moreGContainer, !!element.isCollapsed, !!extraData?.isHoveredExpandArea);
+        const { startPoint, endPoint, hasCollapsedIcon, hasExpandedIcon, hasAddIcon, collapsedIconCenter, expandedIconCenter, addCenter, hasLeftAddIcon, standardRef } = getNodeMoreKeyPosition(this.board, element);
+        this.toggleCollapseAndAdd(collapsedIconCenter, addCenter, standardRef?.addCenter, stroke, moreGContainer, hasCollapsedIcon, hasAddIcon, hasLeftAddIcon, !!extraData?.isHitAddArea, !!extraData?.isHitStandardLeftAddArea, !!extraData?.isShowCollapseAnimation, !!extraData?.isShowAddAnimation);
+        this.toggleExpandBadge(element, [startPoint, endPoint], expandedIconCenter, stroke, moreGContainer, !!hasExpandedIcon, !!extraData?.isHitExpandArea);
         return moreGContainer;
     }
-    toggleCollapseOrAdd(center, addCenter, stroke, parentG, isShowCollapse, isShowAdd, isHoveredAddArea, isShowCollapseAnimation, isShowAddAnimation) {
+    toggleCollapseAndAdd(center, addCenter, standardLeftAddCenter, stroke, parentG, isShowCollapse, isShowAdd, isShowStandardLeftAdd, isHitAddArea, isHitStandardLeftAdd, isShowCollapseAnimation, isShowAddAnimation) {
         this.collapseOrAddG?.remove();
-        if (!isShowCollapse && !isShowAdd) {
+        if (!isShowCollapse && !isShowAdd && !isShowStandardLeftAdd) {
             return;
         }
         this.collapseOrAddG = createG();
@@ -2747,15 +2741,15 @@ class NodeMoreGenerator extends Generator {
             collapseG.appendChild(collapseLine);
             setStrokeLinecap(collapseLine, 'round');
         }
-        if (isShowAdd && addCenter) {
+        const createAddIcon = (collapseOrAddG, addCenter, isHit) => {
             const addG = createG();
-            this.collapseOrAddG.appendChild(addG);
+            collapseOrAddG.appendChild(addG);
             addG.classList.add('add-button');
             if (isShowAddAnimation) {
                 addG.classList.add('animated');
             }
             const circle = PlaitBoard.getRoughSVG(this.board).circle(addCenter[0], addCenter[1], NODE_MORE_ICON_DIAMETER + NODE_MORE_STROKE_WIDTH, {
-                fill: isHoveredAddArea ? NODE_ADD_HOVER_COLOR : NODE_ADD_CIRCLE_COLOR,
+                fill: isHit ? NODE_ADD_HOVER_COLOR : NODE_ADD_CIRCLE_COLOR,
                 stroke: TRANSPARENT,
                 fillStyle: 'solid'
             });
@@ -2776,6 +2770,12 @@ class NodeMoreGenerator extends Generator {
             addG.appendChild(circle);
             addG.appendChild(innerCrossHLine);
             addG.appendChild(innerCrossVLine);
+        };
+        if (isShowAdd && addCenter) {
+            createAddIcon(this.collapseOrAddG, addCenter, isHitAddArea);
+        }
+        if (isShowStandardLeftAdd && standardLeftAddCenter) {
+            createAddIcon(this.collapseOrAddG, standardLeftAddCenter, isHitStandardLeftAdd);
         }
         parentG.appendChild(this.collapseOrAddG);
     }
@@ -2818,19 +2818,65 @@ class NodeMoreGenerator extends Generator {
         parentG.appendChild(this.expandG);
     }
 }
-const getCollapseAndAddCenterPoint = (board, element) => {
+const getNodeMoreKeyPosition = (board, element) => {
+    const isMind = PlaitMind.isMind(element);
+    const hasLeftAddIcon = isMind && element.layout === MindLayoutType.standard;
     const layoutDirection = getNodeMoreLayoutDirection(board, element);
-    const [startPoint, endPoint] = getMoreStartAndEnd(board, element, layoutDirection);
-    const collapseCenter = moveXOfPoint(endPoint, NODE_MORE_ICON_DIAMETER / 2, layoutDirection);
-    const addCenter = getAddCenterByCollapseOrExpandCenter(element, collapseCenter, layoutDirection);
-    return { collapseCenter, addCenter };
-};
-const getAddCenterByCollapseOrExpandCenter = (target, collapseOrExpandCenter, layoutDirection) => {
-    let addCenter = collapseOrExpandCenter;
-    if (target.children?.length > 0 && !PlaitMind.isMind(target)) {
-        addCenter = moveXOfPoint(addCenter, NODE_MORE_LINE_DISTANCE + NODE_MORE_ICON_DIAMETER, layoutDirection);
+    const startPoint = getNodeMoreStartPoint(board, element, layoutDirection);
+    const endPoint = moveXOfPoint(startPoint, NODE_MORE_LINE_DISTANCE, layoutDirection);
+    const hasCollapsedIcon = element.children?.length > 0 && !isMind && !element.isCollapsed;
+    const hasExpandedIcon = element.children?.length > 0 && !isMind && element.isCollapsed;
+    const hasAddIcon = !hasExpandedIcon;
+    const firstIconCenter = moveXOfPoint(endPoint, NODE_MORE_ICON_DIAMETER / 2, layoutDirection);
+    const collapsedIconCenter = hasCollapsedIcon ? firstIconCenter : null;
+    const expandedIconCenter = hasExpandedIcon ? firstIconCenter : null;
+    let addCenter = null;
+    if (hasAddIcon) {
+        addCenter = hasCollapsedIcon
+            ? moveXOfPoint(firstIconCenter, NODE_MORE_LINE_DISTANCE + NODE_MORE_ICON_DIAMETER, layoutDirection)
+            : firstIconCenter;
+    }
+    let awarenessRectangle = null;
+    if (hasAddIcon) {
+        const addIconEndPoint = moveXOfPoint(addCenter, NODE_MORE_ICON_DIAMETER / 2, layoutDirection);
+        awarenessRectangle = RectangleClient.getRectangleByPoints([
+            moveYOfPoint(startPoint, -NODE_MORE_ICON_DIAMETER / 2, layoutDirection),
+            moveYOfPoint(addIconEndPoint, NODE_MORE_ICON_DIAMETER / 2, layoutDirection)
+        ]);
+    }
+    else if (hasExpandedIcon) {
+        const expandedIconEndPoint = moveXOfPoint(expandedIconCenter, NODE_MORE_ICON_DIAMETER / 2, layoutDirection);
+        awarenessRectangle = RectangleClient.getRectangleByPoints([
+            moveYOfPoint(startPoint, -NODE_MORE_ICON_DIAMETER / 2, layoutDirection),
+            moveYOfPoint(expandedIconEndPoint, NODE_MORE_ICON_DIAMETER / 2, layoutDirection)
+        ]);
+    }
+    let standardRef = null;
+    if (hasLeftAddIcon) {
+        const leftStartPoint = getNodeMoreStartPoint(board, element, layoutDirection, true);
+        const leftAddCenter = [leftStartPoint[0] - NODE_MORE_LINE_DISTANCE - NODE_MORE_ICON_DIAMETER / 2, leftStartPoint[1]];
+        const leftAwarenessRectangle = RectangleClient.getRectangleByPoints([
+            [leftStartPoint[0] - NODE_MORE_ICON_DIAMETER - NODE_MORE_LINE_DISTANCE, leftStartPoint[1] - NODE_MORE_ICON_DIAMETER / 2],
+            [leftStartPoint[0], leftStartPoint[1] + NODE_MORE_ICON_DIAMETER / 2]
+        ]);
+        standardRef = {
+            addCenter: leftAddCenter,
+            awarenessRectangle: leftAwarenessRectangle
+        };
     }
-    return addCenter;
+    return {
+        startPoint,
+        endPoint,
+        hasCollapsedIcon,
+        hasExpandedIcon,
+        hasAddIcon,
+        collapsedIconCenter,
+        expandedIconCenter,
+        addCenter,
+        awarenessRectangle,
+        hasLeftAddIcon,
+        standardRef
+    };
 };
 const getNodeMoreLayoutDirection = (board, element) => {
     const node = MindElement.getNode(element);
@@ -2842,11 +2888,14 @@ const getNodeMoreLayoutDirection = (board, element) => {
     }
     return layoutDirection;
 };
-const getMoreStartAndEnd = (board, element, linkLineDirection) => {
+const getNodeMoreStartPoint = (board, element, linkLineDirection, isLeft = false) => {
     const node = MindElement.getNode(element);
     const isUnderlineShape = getShapeByElement(board, element) === MindElementShape.underline;
     const nodeClient = getRectangleByNode(node);
     let placement = [HorizontalPlacement.right, VerticalPlacement.middle];
+    if (isLeft) {
+        placement[0] = HorizontalPlacement.left;
+    }
     transformPlacement(placement, linkLineDirection);
     // underline shape and horizontal
     const layout = MindQueries.getLayoutByElement(element);
@@ -2855,13 +2904,7 @@ const getMoreStartAndEnd = (board, element, linkLineDirection) => {
         placement[1] = VerticalPlacement.bottom;
     }
     let startPoint = getPointByPlacement(nodeClient, placement);
-    const endPoint = moveXOfPoint(startPoint, NODE_MORE_LINE_DISTANCE, linkLineDirection);
-    return [startPoint, endPoint];
-};
-const isLastSelectedMindElement = (board, element) => {
-    const selectedElements = getSelectedElements(board);
-    const selectedMindElements = selectedElements.filter((element) => MindElement.isMindElement(board, element)).reverse();
-    return selectedMindElements[selectedMindElements.length - 1] === element;
+    return startPoint;
 };
 const canHandleNodeMore = (board) => {
     return !isResizing(board) && !isSelectionMoving(board) && !isDragging(board) && !isMovingElements(board);
@@ -3475,6 +3518,20 @@ const withMindHotkey = (baseBoard) => {
     return board;
 };
 
+const isSameNodeMoreRef = (ref1, ref2) => {
+    if (!ref1 || !ref2) {
+        return false;
+    }
+    const result = ref1.target === ref2.target &&
+        ref1.isHit === ref2.isHit &&
+        ref1.isHitAwarenessRectangle === ref2.isHitAwarenessRectangle &&
+        ref1.isHitCollapseArea === ref2.isHitCollapseArea &&
+        ref1.isHitExpandArea === ref2.isHitExpandArea &&
+        ref1.isHitAddArea === ref2.isHitAddArea &&
+        ref1.isHitStandardLeftAddArea === ref2.isHitStandardLeftAddArea &&
+        ref1.isHitStandardLeftAwarenessRectangle === ref2.isHitStandardLeftAwarenessRectangle;
+    return result;
+};
 const withNodeMore = (board) => {
     const { pointerMove, pointerLeave, pointerUp } = board;
     let nodeMoreRef = null;
@@ -3486,28 +3543,30 @@ const withNodeMore = (board) => {
                     nodeMoreRef = null;
                 }
                 const newNodeMoreRef = getNodeMoreRef(board, event.x, event.y);
-                if (nodeMoreRef && newNodeMoreRef && nodeMoreRef.target === newNodeMoreRef.target) {
+                if (nodeMoreRef && newNodeMoreRef && isSameNodeMoreRef(nodeMoreRef, newNodeMoreRef)) {
                     return;
                 }
-                if (nodeMoreRef) {
-                    toggleHoveredNodeCallback({
-                        target: nodeMoreRef.target,
-                        isHovered: false,
-                        isHoveredCollapseArea: false,
-                        isHoveredExpandArea: false,
-                        isHoveredAddArea: false
-                    });
+                if (nodeMoreRef && (!newNodeMoreRef || newNodeMoreRef.target !== nodeMoreRef.target)) {
+                    const element = getElementById(board, nodeMoreRef.target.id);
+                    // maybe element has been changed
+                    if (element && element === nodeMoreRef.target) {
+                        toggleHoveredNodeCallback({
+                            target: nodeMoreRef.target,
+                            isHit: false,
+                            isHitAwarenessRectangle: false,
+                            isHitCollapseArea: false,
+                            isHitExpandArea: false,
+                            isHitAddArea: false,
+                            isHitStandardLeftAddArea: false,
+                            isHitStandardLeftAwarenessRectangle: false
+                        });
+                    }
                 }
                 if (newNodeMoreRef) {
-                    toggleHoveredNodeCallback(newNodeMoreRef);
-                    if (nodeMoreRef) {
-                        nodeMoreRef.target = newNodeMoreRef.target;
-                    }
-                    else {
-                        nodeMoreRef = newNodeMoreRef;
-                    }
+                    toggleHoveredNodeCallback(newNodeMoreRef, nodeMoreRef);
+                    nodeMoreRef = newNodeMoreRef;
                 }
-                else {
+                else if (nodeMoreRef) {
                     nodeMoreRef = null;
                 }
             });
@@ -3515,7 +3574,7 @@ const withNodeMore = (board) => {
         pointerMove(event);
     };
     board.pointerUp = (event) => {
-        if (nodeMoreRef && (nodeMoreRef.isHoveredCollapseArea || nodeMoreRef.isHoveredExpandArea)) {
+        if (nodeMoreRef && (nodeMoreRef.isHitCollapseArea || nodeMoreRef.isHitExpandArea)) {
             const isCollapsed = !nodeMoreRef.target.isCollapsed;
             const newElement = { isCollapsed };
             const path = PlaitBoard.findPath(board, nodeMoreRef.target);
@@ -3532,28 +3591,58 @@ const withNodeMore = (board) => {
             }, 0);
             return;
         }
-        if (nodeMoreRef && nodeMoreRef.isHoveredAddArea && !PlaitBoard.isReadonly(board)) {
-            if (nodeMoreRef) {
+        const insertMindElementByAdd = (nodeMoreRef) => {
+            if (nodeMoreRef.isHitAddArea && PlaitMind.isMind(nodeMoreRef.target) && nodeMoreRef.target.layout === MindLayoutType.standard) {
+                const path = PlaitBoard.findPath(board, nodeMoreRef.target);
+                const refs = insertElementHandleRightNodeCount(board, path, 1);
+                setRightNodeCountByRefs(board, refs);
+                const newPath = findNewRightChildNodePath(board, nodeMoreRef.target, refs[0].rightNodeCount);
+                insertMindElement(board, nodeMoreRef.target, newPath);
+            }
+            else {
                 const path = findNewChildNodePath(board, nodeMoreRef.target);
                 insertMindElement(board, nodeMoreRef.target, path);
             }
+        };
+        if (nodeMoreRef && (nodeMoreRef.isHitAddArea || nodeMoreRef.isHitStandardLeftAddArea) && !PlaitBoard.isReadonly(board)) {
+            if (nodeMoreRef) {
+                insertMindElementByAdd(nodeMoreRef);
+            }
             return;
         }
+        if (isTouchDevice()) {
+            const nodeMoreRef = getNodeMoreRef(board, event.x, event.y);
+            if (nodeMoreRef && (nodeMoreRef.isHitAddArea || nodeMoreRef.isHitStandardLeftAddArea)) {
+                insertMindElementByAdd(nodeMoreRef);
+                return;
+            }
+            if (nodeMoreRef && (nodeMoreRef.isHitExpandArea || nodeMoreRef.isHitCollapseArea)) {
+                const isCollapsed = !nodeMoreRef.target.isCollapsed;
+                const newElement = { isCollapsed };
+                const path = PlaitBoard.findPath(board, nodeMoreRef.target);
+                Transforms.setNode(board, newElement, path);
+                return;
+            }
+        }
         pointerUp(event);
     };
-    const toggleHoveredNodeCallback = (ref) => {
+    const toggleHoveredNodeCallback = (ref, oldRef) => {
         const elementRef = PlaitElement.getElementRef(ref.target);
         const nodeMoreGenerator = elementRef?.getGenerator(NodeMoreGenerator.key);
         if (nodeMoreGenerator) {
+            const isSameTarget = oldRef?.target === ref.target;
             const g = PlaitElement.getElementG(ref.target);
             nodeMoreGenerator.processDrawing(ref.target, g, {
-                isHovered: ref.isHovered,
-                isHoveredCollapseArea: ref.isHoveredCollapseArea,
-                isHoveredExpandArea: ref.isHoveredExpandArea,
+                isHit: ref.isHit,
+                isHitStandardLeftAddArea: ref.isHitStandardLeftAddArea,
+                isHitStandardLeftAwarenessRectangle: ref.isHitStandardLeftAwarenessRectangle,
+                isHitAwarenessRectangle: ref.isHitAwarenessRectangle,
+                isHitCollapseArea: ref.isHitCollapseArea,
+                isHitExpandArea: ref.isHitExpandArea,
+                isHitAddArea: ref.isHitAddArea,
                 isSelected: isSelectedElement(board, ref.target),
-                isHoveredAddArea: ref.isHoveredAddArea,
-                isShowCollapseAnimation: (ref.isHovered || ref.isHoveredCollapseArea) && !isSelectedElement(board, ref.target),
-                isShowAddAnimation: (ref.isHovered || ref.isHoveredAddArea) && !isSelectedElement(board, ref.target)
+                isShowCollapseAnimation: (ref.isHit || ref.isHitCollapseArea) && !isSelectedElement(board, ref.target) && !isSameTarget,
+                isShowAddAnimation: (ref.isHit || ref.isHitAddArea) && !isSelectedElement(board, ref.target) && !isSameTarget
             });
         }
     };
@@ -3561,10 +3650,13 @@ const withNodeMore = (board) => {
         if (nodeMoreRef) {
             toggleHoveredNodeCallback({
                 target: nodeMoreRef.target,
-                isHovered: false,
-                isHoveredCollapseArea: false,
-                isHoveredExpandArea: false,
-                isHoveredAddArea: false
+                isHit: false,
+                isHitAwarenessRectangle: false,
+                isHitCollapseArea: false,
+                isHitExpandArea: false,
+                isHitAddArea: false,
+                isHitStandardLeftAddArea: false,
+                isHitStandardLeftAwarenessRectangle: false
             });
         }
         nodeMoreRef = null;
@@ -3574,10 +3666,13 @@ const withNodeMore = (board) => {
 };
 const getNodeMoreRef = (board, x, y) => {
     let target = null;
-    let isHovered = false;
-    let isHoveredCollapseArea = false;
-    let isHoveredExpandArea = false;
-    let isHoveredAddArea = false;
+    let isHit = false;
+    let isHitAwarenessRectangle = false;
+    let isHitCollapseArea = false;
+    let isHitExpandArea = false;
+    let isHitAddArea = false;
+    let isHitStandardLeftAddArea = false;
+    let isHitStandardLeftAwarenessRectangle = false;
     const point = toViewBoxPoint(board, toHostPoint(board, x, y));
     depthFirstRecursion(board, (element) => {
         if (target) {
@@ -3586,29 +3681,30 @@ const getNodeMoreRef = (board, x, y) => {
         if (!MindElement.isMindElement(board, element)) {
             return;
         }
-        const isMind = PlaitMind.isMind(element);
         const isHitElement = isHitMindElement(board, point, element);
-        let isHitCollapseOrExpand = false;
-        let isHitAdd = false;
-        const { collapseCenter, addCenter } = getCollapseAndAddCenterPoint(board, element);
-        const collapseOrExpandIconRectangle = !isMind && RectangleClient.getRectangleByCenterPoint(collapseCenter, NODE_MORE_ICON_DIAMETER, NODE_MORE_ICON_DIAMETER);
-        isHitCollapseOrExpand =
-            collapseOrExpandIconRectangle &&
-                RectangleClient.isHit(RectangleClient.getRectangleByPoints([point, point]), collapseOrExpandIconRectangle);
-        const addIconRectangle = RectangleClient.getRectangleByCenterPoint(addCenter, NODE_MORE_ICON_DIAMETER, NODE_MORE_ICON_DIAMETER);
-        isHitAdd = RectangleClient.isHit(RectangleClient.getRectangleByPoints([point, point]), addIconRectangle);
-        if (isHitElement || isHitCollapseOrExpand || isHitAdd) {
-            isHovered = isHitElement;
-            if (element.children.length > 0) {
-                if (element.isCollapsed) {
-                    isHoveredExpandArea = isHitCollapseOrExpand;
-                }
-                else {
-                    isHoveredCollapseArea = isHitCollapseOrExpand;
-                }
-            }
-            isHoveredAddArea = isHitAdd;
+        const { hasCollapsedIcon, hasExpandedIcon, hasAddIcon, collapsedIconCenter, expandedIconCenter, addCenter, awarenessRectangle, hasLeftAddIcon, standardRef } = getNodeMoreKeyPosition(board, element);
+        const isHitAwarenessRectangleInternal = awarenessRectangle && RectangleClient.isHit(RectangleClient.getRectangleByPoints([point, point]), awarenessRectangle);
+        const isHitCollapsedIcon = hasCollapsedIcon &&
+            RectangleClient.isHit(RectangleClient.getRectangleByPoints([point, point]), RectangleClient.getRectangleByCenterPoint(collapsedIconCenter, NODE_MORE_ICON_DIAMETER, NODE_MORE_ICON_DIAMETER));
+        const isHitExpandedIcon = hasExpandedIcon &&
+            RectangleClient.isHit(RectangleClient.getRectangleByPoints([point, point]), RectangleClient.getRectangleByCenterPoint(expandedIconCenter, NODE_MORE_ICON_DIAMETER, NODE_MORE_ICON_DIAMETER));
+        const isHitAddIcon = hasAddIcon &&
+            RectangleClient.isHit(RectangleClient.getRectangleByPoints([point, point]), RectangleClient.getRectangleByCenterPoint(addCenter, NODE_MORE_ICON_DIAMETER, NODE_MORE_ICON_DIAMETER));
+        const isHitStandardLeftAwarenessRectangleInternal = hasLeftAddIcon &&
+            standardRef &&
+            RectangleClient.isHit(RectangleClient.getRectangleByPoints([point, point]), standardRef.awarenessRectangle);
+        const isHitStandardLeftAddIcon = hasLeftAddIcon &&
+            standardRef &&
+            RectangleClient.isHit(RectangleClient.getRectangleByPoints([point, point]), RectangleClient.getRectangleByCenterPoint(standardRef.addCenter, NODE_MORE_ICON_DIAMETER, NODE_MORE_ICON_DIAMETER));
+        if (isHitElement || isHitAwarenessRectangleInternal || isHitStandardLeftAwarenessRectangleInternal) {
+            isHit = isHitElement;
             target = element;
+            isHitCollapseArea = isHitCollapsedIcon;
+            isHitExpandArea = !!isHitExpandedIcon;
+            isHitAddArea = isHitAddIcon;
+            isHitAwarenessRectangle = !!isHitAwarenessRectangleInternal;
+            isHitStandardLeftAwarenessRectangle = !!isHitStandardLeftAwarenessRectangleInternal;
+            isHitStandardLeftAddArea = !!isHitStandardLeftAddIcon;
         }
     }, getIsRecursionFunc(board), true);
     if (!target) {
@@ -3616,10 +3712,13 @@ const getNodeMoreRef = (board, x, y) => {
     }
     return {
         target,
-        isHovered,
-        isHoveredCollapseArea,
-        isHoveredExpandArea,
-        isHoveredAddArea
+        isHit,
+        isHitAwarenessRectangle,
+        isHitCollapseArea,
+        isHitExpandArea,
+        isHitAddArea,
+        isHitStandardLeftAddArea,
+        isHitStandardLeftAwarenessRectangle
     };
 };
 
@@ -4193,5 +4292,5 @@ class MindEmojiBaseComponent {
  * Generated bundle index. Do not edit.
  */
 
-export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, ABSTRACT_NODE_TEXT, AbstractHandlePosition, AbstractResizeState, BASE, BranchShape, DEFAULT_MIND_IMAGE_WIDTH, DefaultAbstractNodeStyle, DefaultNodeStyle, GRAY_COLOR, INHERIT_ATTRIBUTE_KEYS, LayoutDirection, LayoutDirectionsMap, MIND_CENTRAL_TEXT, MIND_ELEMENT_TO_NODE, MindColorfulThemeColor, MindDarkThemeColor, MindDefaultThemeColor, MindElement, MindElementShape, MindEmojiBaseComponent, MindI18nKey, MindNode, MindNodeComponent, MindPointerType, MindQueries, MindRetroThemeColor, MindSoftThemeColor, MindStarryThemeColor, MindThemeColor, MindThemeColors, MindTransforms, NODE_ADD_CIRCLE_COLOR, NODE_ADD_HOVER_COLOR, NODE_ADD_INNER_CROSS_COLOR, NODE_MORE_BRIDGE_DISTANCE, NODE_MORE_ICON_DIAMETER, NODE_MORE_LINE_DISTANCE, NODE_MORE_STROKE_WIDTH, NodeSpace, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, RESIZE_HANDLE_BUFFER_DISTANCE, ROOT_TOPIC_FONT_SIZE, STROKE_WIDTH, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, WithMindPluginKey, addActiveOnDragOrigin, addImageFocus, adjustAbstractToNode, adjustNodeToRoot, adjustRootToNode, canSetAbstract, copyNewNode, correctLayoutByDirection, createEmptyMind, createMindElement, deleteElementHandleAbstract, deleteElementsHandleRightNodeCount, detectDropTarget, directionCorrector, directionDetector, divideElementByParent, drawFakeDragNode, drawFakeDropNode, editTopic, findLastChild, findLocationLeftIndex, findNewChildNodePath, findNewSiblingNodePath, getAbstractBranchColor, getAbstractBranchWidth, getAbstractHandleRectangle, getAbstractNodeText, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getBranchShapeByMindElement, getBranchWidthByMindElement, getChildrenCount, getCorrespondingAbstract, getDefaultBranchColor, getDefaultBranchColorByIndex, getDefaultFontSizeForMindElement, getDefaultLayout, getDefaultMindNameText, getEmojiFontSize, getEmojiForeignRectangle, getEmojiRectangle, getEmojisWidthHeight, getFillByElement, getFirstLevelElement, getFontSizeByMindElement, getHitAbstractHandle, getHitImageResizeHandleDirection, getImageForeignRectangle, getInCorrectLayoutDirection, getLayoutDirection$1 as getLayoutDirection, getLayoutOptions, getLayoutReverseDirection, getLocationScope, getMindThemeColor, getNewNodeHeight, getNextBranchColor, getOverallAbstracts, getPathByDropTarget, getRectangleByElement, getRectangleByNode, getRectangleByResizingLocation, getRelativeStartEndByAbstractRef, getRootLayout, getSelectedMindElements, getShapeByElement, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getTopicRectangleByElement, getTopicRectangleByNode, getValidAbstractRefs, handleTouchedAbstract, hasPreviousOrNextOfDropPath, insertElementHandleAbstract, insertElementHandleRightNodeCount, insertMindElement, isChildElement, isChildOfAbstract, isChildRight, isChildUp, isCorrectLayout, isDropStandardRight, isHitEmojis, isHitImage, isHitMindElement, isInRightBranchOfStandardLayout, isMixedLayout, isSetAbstract, isValidTarget, normalizeWidthAndHeight, removeActiveOnDragOrigin, removeImageFocus, separateChildren, setMindDragging, withEmoji, withMind, withMindExtend };
+export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, ABSTRACT_NODE_TEXT, AbstractHandlePosition, AbstractResizeState, BASE, BranchShape, DEFAULT_MIND_IMAGE_WIDTH, DefaultAbstractNodeStyle, DefaultNodeStyle, GRAY_COLOR, INHERIT_ATTRIBUTE_KEYS, LayoutDirection, LayoutDirectionsMap, MIND_CENTRAL_TEXT, MIND_ELEMENT_TO_NODE, MindColorfulThemeColor, MindDarkThemeColor, MindDefaultThemeColor, MindElement, MindElementShape, MindEmojiBaseComponent, MindI18nKey, MindNode, MindNodeComponent, MindPointerType, MindQueries, MindRetroThemeColor, MindSoftThemeColor, MindStarryThemeColor, MindThemeColor, MindThemeColors, MindTransforms, NODE_ADD_CIRCLE_COLOR, NODE_ADD_HOVER_COLOR, NODE_ADD_INNER_CROSS_COLOR, NODE_MORE_BRIDGE_DISTANCE, NODE_MORE_ICON_DIAMETER, NODE_MORE_LINE_DISTANCE, NODE_MORE_STROKE_WIDTH, NodeSpace, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, RESIZE_HANDLE_BUFFER_DISTANCE, ROOT_TOPIC_FONT_SIZE, STROKE_WIDTH, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, WithMindPluginKey, addActiveOnDragOrigin, addImageFocus, adjustAbstractToNode, adjustNodeToRoot, adjustRootToNode, canSetAbstract, copyNewNode, correctLayoutByDirection, createEmptyMind, createMindElement, deleteElementHandleAbstract, deleteElementsHandleRightNodeCount, detectDropTarget, directionCorrector, directionDetector, divideElementByParent, drawFakeDragNode, drawFakeDropNode, editTopic, findLastChild, findLocationLeftIndex, findNewChildNodePath, findNewRightChildNodePath, findNewSiblingNodePath, getAbstractBranchColor, getAbstractBranchWidth, getAbstractHandleRectangle, getAbstractNodeText, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getBranchShapeByMindElement, getBranchWidthByMindElement, getChildrenCount, getCorrespondingAbstract, getDefaultBranchColor, getDefaultBranchColorByIndex, getDefaultFontSizeForMindElement, getDefaultLayout, getDefaultMindNameText, getEmojiFontSize, getEmojiForeignRectangle, getEmojiRectangle, getEmojisWidthHeight, getFillByElement, getFirstLevelElement, getFontSizeByMindElement, getHitAbstractHandle, getHitImageResizeHandleDirection, getImageForeignRectangle, getInCorrectLayoutDirection, getLayoutDirection$1 as getLayoutDirection, getLayoutOptions, getLayoutReverseDirection, getLocationScope, getMindThemeColor, getNewNodeHeight, getNextBranchColor, getOverallAbstracts, getPathByDropTarget, getRectangleByElement, getRectangleByNode, getRectangleByResizingLocation, getRelativeStartEndByAbstractRef, getRootLayout, getSelectedMindElements, getShapeByElement, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getTopicRectangleByElement, getTopicRectangleByNode, getValidAbstractRefs, handleTouchedAbstract, hasPreviousOrNextOfDropPath, insertElementHandleAbstract, insertElementHandleRightNodeCount, insertMindElement, isChildElement, isChildOfAbstract, isChildRight, isChildUp, isCorrectLayout, isDropStandardRight, isHitEmojis, isHitImage, isHitMindElement, isInRightBranchOfStandardLayout, isMixedLayout, isSetAbstract, isValidTarget, normalizeWidthAndHeight, removeActiveOnDragOrigin, removeImageFocus, separateChildren, setMindDragging, withEmoji, withMind, withMindExtend };
 //# sourceMappingURL=plait-mind.mjs.map