@plait/mind 0.92.3 → 0.93.1

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, 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 { 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, createDebugGenerator, 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';
@@ -267,7 +267,7 @@ const getCorrespondingAbstract = (element) => {
     if (!parent)
         return undefined;
     const elementIndex = parent.children.indexOf(element);
-    return parent.children.find(child => {
+    return parent.children.find((child) => {
         return AbstractNode.isAbstract(child) && elementIndex >= child.start && elementIndex <= child.end;
     });
 };
@@ -276,7 +276,7 @@ const getBehindAbstracts = (element) => {
     if (!parent)
         return [];
     const index = parent.children.indexOf(element);
-    return parent.children.filter(child => AbstractNode.isAbstract(child) && child.start > index);
+    return parent.children.filter((child) => AbstractNode.isAbstract(child) && child.start > index);
 };
 /**
  * return corresponding abstract that is not child of elements
@@ -284,13 +284,15 @@ const getBehindAbstracts = (element) => {
 const getOverallAbstracts = (board, elements) => {
     const overallAbstracts = [];
     elements
-        .filter(value => !AbstractNode.isAbstract(value) && !PlaitMind.isMind(value))
-        .forEach(value => {
+        .filter((value) => !AbstractNode.isAbstract(value) && !PlaitMind.isMind(value))
+        .forEach((value) => {
         const abstract = getCorrespondingAbstract(value);
         if (abstract && elements.indexOf(abstract) === -1 && overallAbstracts.indexOf(abstract) === -1) {
             const { start, end } = abstract;
             const parent = MindElement.getParent(value);
-            const isOverall = parent.children.slice(start, end + 1).every(includedElement => elements.indexOf(includedElement) > -1);
+            const isOverall = parent.children
+                .slice(start, end + 1)
+                .every((includedElement) => elements.indexOf(includedElement) > -1);
             if (isOverall) {
                 overallAbstracts.push(abstract);
             }
@@ -304,11 +306,11 @@ const getOverallAbstracts = (board, elements) => {
 const getValidAbstractRefs = (board, elements) => {
     const validAbstractRefs = [];
     elements
-        .filter(value => !AbstractNode.isAbstract(value) && !PlaitMind.isMind(value))
-        .forEach(value => {
+        .filter((value) => !AbstractNode.isAbstract(value) && !PlaitMind.isMind(value))
+        .forEach((value) => {
         const abstract = getCorrespondingAbstract(value);
         if (abstract && elements.indexOf(abstract) > 0) {
-            const index = validAbstractRefs.findIndex(value => value.abstract === abstract);
+            const index = validAbstractRefs.findIndex((value) => value.abstract === abstract);
             if (index === -1) {
                 validAbstractRefs.push({
                     abstract: abstract,
@@ -334,14 +336,14 @@ isExtendPreviousNode = true, effectedAbstracts = new Map()) => {
     const hasPreviousNode = path[path.length - 1] !== 0;
     let behindAbstracts;
     if (!hasPreviousNode) {
-        behindAbstracts = parent.children.filter(child => AbstractNode.isAbstract(child));
+        behindAbstracts = parent.children.filter((child) => AbstractNode.isAbstract(child));
     }
     else {
         const selectedElement = PlaitNode.get(board, Path.previous(path));
         behindAbstracts = getBehindAbstracts(selectedElement);
     }
     if (behindAbstracts.length) {
-        behindAbstracts.forEach(abstract => {
+        behindAbstracts.forEach((abstract) => {
             let newProperties = effectedAbstracts.get(abstract);
             if (!newProperties) {
                 newProperties = { start: 0, end: 0 };
@@ -368,11 +370,11 @@ isExtendPreviousNode = true, effectedAbstracts = new Map()) => {
     return effectedAbstracts;
 };
 const deleteElementHandleAbstract = (board, deletableElements, effectedAbstracts = new Map()) => {
-    deletableElements.forEach(node => {
+    deletableElements.forEach((node) => {
         if (!PlaitMind.isMind(node)) {
-            const behindAbstracts = getBehindAbstracts(node).filter(abstract => !deletableElements.includes(abstract));
+            const behindAbstracts = getBehindAbstracts(node).filter((abstract) => !deletableElements.includes(abstract));
             if (behindAbstracts.length) {
-                behindAbstracts.forEach(abstract => {
+                behindAbstracts.forEach((abstract) => {
                     let newProperties = effectedAbstracts.get(abstract);
                     if (!newProperties) {
                         newProperties = { start: 0, end: 0 };
@@ -397,7 +399,7 @@ const deleteElementHandleAbstract = (board, deletableElements, effectedAbstracts
 };
 const isChildOfAbstract = (board, element) => {
     const ancestors = MindElement.getAncestors(board, element);
-    return !!ancestors.find(value => AbstractNode.isAbstract(value));
+    return !!ancestors.find((value) => AbstractNode.isAbstract(value));
 };
 
 /**
@@ -446,7 +448,7 @@ const getDefaultBranchColorByIndex = (board, index) => {
 };
 const getMindThemeColor = (board) => {
     const themeColors = PlaitBoard.getThemeColors(board);
-    const themeColor = themeColors.find(val => val.mode === board.theme.themeColorMode);
+    const themeColor = themeColors.find((val) => val.mode === board.theme.themeColorMode);
     if (themeColor && MindThemeColor.isMindThemeColor(themeColor)) {
         return themeColor;
     }
@@ -487,21 +489,21 @@ const getShapeByElement = (board, element) => {
 
 function editTopic(element) {
     const textManage = getFirstTextManage(element);
-    textManage?.edit(() => { }, event => {
+    textManage?.edit(() => { }, (event) => {
         const keyboardEvent = event;
         return keyboardEvent.key === 'Enter' && !keyboardEvent.shiftKey;
     });
 }
 const getSelectedMindElements = (board, elements) => {
     const selectedElements = elements?.length ? elements : getSelectedElements(board);
-    return selectedElements.filter(value => MindElement.isMindElement(board, value));
+    return selectedElements.filter((value) => MindElement.isMindElement(board, value));
 };
 
 const getBranchDirectionsByLayouts = (branchLayouts) => {
     const branchDirections = [];
-    branchLayouts.forEach(l => {
+    branchLayouts.forEach((l) => {
         const directions = LayoutDirectionsMap[l];
-        directions.forEach(d => {
+        directions.forEach((d) => {
             if (!branchDirections.includes(d) && !branchDirections.includes(getLayoutReverseDirection(d))) {
                 branchDirections.push(d);
             }
@@ -522,7 +524,7 @@ const getInCorrectLayoutDirection = (rootLayout, layout) => {
     if (!subLayoutDirections) {
         throw new Error(`unexpected layout: ${layout} on correct layout`);
     }
-    return subLayoutDirections.find(d => directions.includes(getLayoutReverseDirection(d)));
+    return subLayoutDirections.find((d) => directions.includes(getLayoutReverseDirection(d)));
 };
 const correctLayoutByDirection = (layout, direction) => {
     const isHorizontal = direction === LayoutDirection.left || direction === LayoutDirection.right ? true : false;
@@ -569,8 +571,8 @@ const getAvailableSubLayoutsByLayoutDirections = (directions) => {
         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));
+            const hasSameDirection = layoutDirections.some((d) => directions.includes(d));
+            const hasReverseDirection = layoutDirections.some((r) => reverseDirections.includes(r));
             if (hasSameDirection && !hasReverseDirection) {
                 result.push(layout);
             }
@@ -1042,7 +1044,7 @@ const isHitImage = (board, element, point) => {
 const getHitImageResizeHandleDirection = (board, element, point) => {
     const imageRectangle = getImageForeignRectangle(board, element);
     const resizeHandleRefs = getRectangleResizeHandleRefs(imageRectangle, RESIZE_HANDLE_DIAMETER);
-    const result = resizeHandleRefs.find(resizeHandleRef => {
+    const result = resizeHandleRefs.find((resizeHandleRef) => {
         return RectangleClient.isHit(RectangleClient.getRectangleByPoints([point, point]), resizeHandleRef.rectangle);
     });
     return result;
@@ -1109,14 +1111,14 @@ const getNewNodeHeight = (board, element, newNodeDynamicWidth) => {
 const addActiveOnDragOrigin = (activeElement) => {
     PlaitElement.getElementG(activeElement).classList.add('dragging-node');
     !activeElement.isCollapsed &&
-        activeElement.children.forEach(child => {
+        activeElement.children.forEach((child) => {
             addActiveOnDragOrigin(child);
         });
 };
 const removeActiveOnDragOrigin = (activeElement) => {
     PlaitElement.getElementG(activeElement).classList.remove('dragging-node');
     !activeElement.isCollapsed &&
-        activeElement.children.forEach(child => {
+        activeElement.children.forEach((child) => {
             removeActiveOnDragOrigin(child);
         });
 };
@@ -1598,7 +1600,7 @@ class NodeEmojisGenerator {
             const container = document.createElement('div');
             container.classList.add('node-emojis-container');
             foreignObject.append(container);
-            this.emojiGenerators = element.data.emojis.map(emojiItem => {
+            this.emojiGenerators = element.data.emojis.map((emojiItem) => {
                 const drawer = new EmojiGenerator(this.board);
                 drawer.draw(container, emojiItem, element);
                 return drawer;
@@ -1611,7 +1613,7 @@ class NodeEmojisGenerator {
         if (this.g) {
             this.g.remove();
         }
-        this.emojiGenerators.forEach(drawer => drawer.destroy());
+        this.emojiGenerators.forEach((drawer) => drawer.destroy());
         this.emojiGenerators = [];
     }
 }
@@ -1959,11 +1961,11 @@ const getLocationScope = (board, handlePosition, parentChildren, element, parent
     const startNode = parentChildren[start];
     const endNode = parentChildren[end];
     if (handlePosition === AbstractHandlePosition.start) {
-        const abstractNode = parentChildren.filter(child => AbstractNode.isAbstract(child) && child.end < element.start);
+        const abstractNode = parentChildren.filter((child) => AbstractNode.isAbstract(child) && child.end < element.start);
         let minNode;
         if (abstractNode.length) {
             const index = abstractNode
-                .map(node => {
+                .map((node) => {
                 const { end } = getCorrectStartEnd(node, parent);
                 return end;
             })
@@ -1989,11 +1991,11 @@ const getLocationScope = (board, handlePosition, parentChildren, element, parent
         }
     }
     else {
-        const abstractNode = parentChildren.filter(child => AbstractNode.isAbstract(child) && child.start > element.end);
+        const abstractNode = parentChildren.filter((child) => AbstractNode.isAbstract(child) && child.start > element.end);
         let maxNode;
         if (abstractNode.length) {
             const index = abstractNode
-                .map(node => {
+                .map((node) => {
                 const { start } = getCorrectStartEnd(node, parent);
                 return start;
             })
@@ -2001,7 +2003,7 @@ const getLocationScope = (board, handlePosition, parentChildren, element, parent
             maxNode = parentChildren[index - 1];
         }
         else {
-            const children = parentChildren.filter(child => !AbstractNode.isAbstract(child));
+            const children = parentChildren.filter((child) => !AbstractNode.isAbstract(child));
             maxNode = parentChildren[children.length - 1];
         }
         const maxNodeRectangle = getRectangleByElements(board, [maxNode], true);
@@ -2051,10 +2053,10 @@ const getAbstractHandleRectangle = (rectangle, isHorizontal, position) => {
     return result;
 };
 function findLocationLeftIndex(board, parentChildren, location, isHorizontal) {
-    const children = parentChildren.filter(child => {
+    const children = parentChildren.filter((child) => {
         return !AbstractNode.isAbstract(child);
     });
-    const recArray = children.map(child => {
+    const recArray = children.map((child) => {
         return getRectangleByElements(board, [child], false);
     });
     const firstRec = getRectangleByElements(board, [children[0]], true);
@@ -2085,7 +2087,7 @@ function findLocationLeftIndex(board, parentChildren, location, isHorizontal) {
 }
 function handleTouchedAbstract(board, touchedAbstract, endPoint) {
     let touchedHandle;
-    const abstract = getSelectedElements(board).filter(element => AbstractNode.isAbstract(element)).find(element => {
+    const abstract = getSelectedElements(board).filter((element) => AbstractNode.isAbstract(element)).find((element) => {
         touchedHandle = getHitAbstractHandle(board, element, endPoint);
         return touchedHandle;
     });
@@ -2180,7 +2182,7 @@ const getCorrectLayoutByElement = (board, element) => {
         correctRootLayout = node.left ? MindLayoutType.left : MindLayoutType.right;
     }
     let layout = null;
-    const elementWithLayout = ancestors.find(value => value.layout || AbstractNode.isAbstract(value));
+    const elementWithLayout = ancestors.find((value) => value.layout || AbstractNode.isAbstract(value));
     if (elementWithLayout) {
         if (AbstractNode.isAbstract(elementWithLayout)) {
             const parent = MindElement.getParent(elementWithLayout);
@@ -2234,7 +2236,7 @@ const getAvailableSubLayoutsByElement = (board, element) => {
         const parentLayout = [branchLayouts[branchLayouts.length - 1]];
         const parentDirections = getBranchDirectionsByLayouts(parentLayout);
         const parentAvailableSubLayouts = getAvailableSubLayoutsByLayoutDirections(parentDirections);
-        availableSubLayouts = availableSubLayouts.filter(layout => parentAvailableSubLayouts.some(parentAvailableSubLayout => parentAvailableSubLayout === layout));
+        availableSubLayouts = availableSubLayouts.filter((layout) => parentAvailableSubLayouts.some((parentAvailableSubLayout) => parentAvailableSubLayout === layout));
         return availableSubLayouts;
     }
     return undefined;
@@ -2347,7 +2349,7 @@ function drawAbstractLink(board, node, isHorizontal) {
     const parent = node.parent;
     const branchShape = getBranchShapeByMindElement(board, node.origin);
     const abstractRectangle = getRectangleByNode(node);
-    let includedElements = parent.children.slice(node.origin.start, node.origin.end + 1).map(node => {
+    let includedElements = parent.children.slice(node.origin.start, node.origin.end + 1).map((node) => {
         return node.origin;
     });
     const includedElementsRectangle = getRectangleByElements(board, includedElements, true);
@@ -2539,7 +2541,7 @@ const addEmoji = (board, element, emojiItem) => {
     Transforms.setNode(board, newElement, path);
 };
 const removeEmoji = (board, element, emojiItem) => {
-    const emojis = element.data.emojis.filter(value => value !== emojiItem);
+    const emojis = element.data.emojis.filter((value) => value !== emojiItem);
     const newElement = {
         data: { topic: element.data.topic }
     };
@@ -2556,7 +2558,7 @@ const replaceEmoji = (board, element, oldEmoji, newEmoji) => {
     const newElement = {
         data: { ...element.data }
     };
-    const newEmojis = element.data.emojis.map(value => {
+    const newEmojis = element.data.emojis.map((value) => {
         if (value === oldEmoji) {
             return newEmoji;
         }
@@ -2806,7 +2808,7 @@ const getNodeMoreKeyPosition = (board, element) => {
     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 hasAddIcon = !hasExpandedIcon && !PlaitBoard.isReadonly(board);
     const firstIconCenter = moveXOfPoint(endPoint, NODE_MORE_ICON_DIAMETER / 2, layoutDirection);
     const collapsedIconCenter = hasCollapsedIcon ? firstIconCenter : null;
     const expandedIconCenter = hasExpandedIcon ? firstIconCenter : null;
@@ -2831,6 +2833,13 @@ const getNodeMoreKeyPosition = (board, element) => {
             moveYOfPoint(expandedIconEndPoint, NODE_MORE_ICON_DIAMETER / 2, layoutDirection)
         ]);
     }
+    else if (hasCollapsedIcon) {
+        const collapsedIconEndPoint = moveXOfPoint(collapsedIconCenter, NODE_MORE_ICON_DIAMETER / 2, layoutDirection);
+        awarenessRectangle = RectangleClient.getRectangleByPoints([
+            moveYOfPoint(startPoint, -NODE_MORE_ICON_DIAMETER / 2, layoutDirection),
+            moveYOfPoint(collapsedIconEndPoint, NODE_MORE_ICON_DIAMETER / 2, layoutDirection)
+        ]);
+    }
     let standardRef = null;
     if (hasLeftAddIcon) {
         const leftStartPoint = getNodeMoreStartPoint(board, element, layoutDirection, true);
@@ -3487,7 +3496,10 @@ const withMindHotkey = (baseBoard) => {
                 const { history } = board;
                 const { undos } = history;
                 const previousOp = undos.length > 0 ? undos[undos.length - 1][0] : undefined;
-                if (previousOp && previousOp.type === 'insert_node' && MindElement.isMindElement(board, previousOp.node) && getFirstTextManage(previousOp.node).isEditing) {
+                if (previousOp &&
+                    previousOp.type === 'insert_node' &&
+                    MindElement.isMindElement(board, previousOp.node) &&
+                    getFirstTextManage(previousOp.node).isEditing) {
                     board.undo();
                 }
             }
@@ -3497,6 +3509,7 @@ const withMindHotkey = (baseBoard) => {
     return board;
 };
 
+const debugGenerator = createDebugGenerator('debug:plait:node-more');
 const isSameNodeMoreRef = (ref1, ref2) => {
     if (!ref1 || !ref2) {
         return false;
@@ -3675,6 +3688,17 @@ const getNodeMoreRef = (board, x, y) => {
         const isHitStandardLeftAddIcon = hasLeftAddIcon &&
             standardRef &&
             RectangleClient.isHit(RectangleClient.getRectangleByPoints([point, point]), RectangleClient.getRectangleByCenterPoint(standardRef.addCenter, NODE_MORE_ICON_DIAMETER, NODE_MORE_ICON_DIAMETER));
+        if (debugGenerator.isDebug()) {
+            debugGenerator.clear();
+            if (awarenessRectangle) {
+                debugGenerator.drawRectangle(board, awarenessRectangle);
+            }
+            const data = element.data.topic;
+            const string = Node$1.string(data);
+            if (string === 'xxxx') {
+                console.log('xxxx');
+            }
+        }
         if (isHitElement || isHitAwarenessRectangleInternal || isHitStandardLeftAwarenessRectangleInternal) {
             isHit = isHitElement;
             target = element;
@@ -4050,7 +4074,7 @@ const withMindFragment = (baseBoard) => {
     };
     board.insertFragment = (clipboardData, targetPoint, operationType) => {
         if (clipboardData?.elements?.length) {
-            const mindElements = clipboardData.elements?.filter(value => MindElement.isMindElement(board, value));
+            const mindElements = clipboardData.elements?.filter((value) => MindElement.isMindElement(board, value));
             if (mindElements && mindElements.length > 0) {
                 insertClipboardData(board, mindElements, targetPoint, operationType);
             }
@@ -4088,7 +4112,7 @@ const getNextSelectedElement = (board, firstLevelElements) => {
     catch (error) { }
     const firstElement = firstLevelElements[0];
     const firstElementParent = MindElement.findParent(firstElement);
-    const hasSameParent = firstLevelElements.every(element => {
+    const hasSameParent = firstLevelElements.every((element) => {
         return MindElement.findParent(element) === firstElementParent;
     });
     if (firstElementParent && hasSameParent && !activeElement) {
@@ -4203,12 +4227,12 @@ const withMind = (baseBoard) => {
         }
         return isHit(element, point, isStrict);
     };
-    board.getOneHitElement = (elements) => {
+    board.getOneHitElement = (elements, hitPoint) => {
         const isAllMindElements = elements.every((item) => MindElement.isMindElement(board, item));
         if (isAllMindElements) {
             return elements[0];
         }
-        return getOneHitElement(elements);
+        return getOneHitElement(elements, hitPoint);
     };
     board.isMovable = (element) => {
         if (PlaitMind.isMind(element)) {