@plait/mind 0.19.0 → 0.20.0

package/fesm2020/plait-mind.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
 import { Directive, Input, Component, ChangeDetectionStrategy, NgModule, NgZone, HostListener } from '@angular/core';
 import * as i2 from '@plait/core';
-import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, RectangleClient, PlaitElement, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, PlaitNode, Path, PlaitBoard, depthFirstRecursion, drawLinearPath, drawBezierPath, createG, updateForeignObject, drawRoundRectangle, getRectangleByElements, getSelectedElements, NODE_TO_PARENT, distanceBetweenPointAndRectangle, createForeignObject, 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 { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, RectangleClient, PlaitElement, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, PlaitNode, Path, PlaitBoard, depthFirstRecursion, getIsRecursionFunc, drawLinearPath, drawBezierPath, createG, updateForeignObject, drawRoundRectangle, getRectangleByElements, getSelectedElements, NODE_TO_PARENT, distanceBetweenPointAndRectangle, createForeignObject, createText, PlaitPointerType, PlaitPluginElementComponent, NODE_TO_INDEX, PlaitModule, isMainPointer, transformPoint, toPoint, getHitElements, distanceBetweenPointAndPoint, CLIP_BOARD_FORMAT_KEY, BOARD_TO_HOST, PlaitPluginKey, throttleRAF, BoardTransforms, removeSelectedElement, PlaitHistoryBoard, hotkeys } from '@plait/core';
 import { MindLayoutType, isIndentedLayout, AbstractNode, getNonAbstractChildren, isStandardLayout, isLeftLayout, isRightLayout, isVerticalLogicLayout, isHorizontalLogicLayout, isTopLayout, isBottomLayout, isHorizontalLayout, getCorrectStartEnd, getAbstractLayout, ConnectingPosition, GlobalLayout } from '@plait/layouts';
-import { TEXT_DEFAULT_HEIGHT, buildText, getTextSize, TextManage, ExitOrigin, TextModule, getTextFromClipboard } from '@plait/text';
+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 { isKeyHotkey } from 'is-hotkey';
@@ -210,6 +210,14 @@ function getEmojiFontSize(element) {
     }
 }
 
+const TOPIC_COLOR = '#333';
+const TOPIC_FONT_SIZE = 14;
+const ROOT_TOPIC_FONT_SIZE = 18;
+const ROOT_TOPIC_HEIGHT = 25;
+const TOPIC_DEFAULT_MAX_WORD_COUNT = 34;
+const DEFAULT_FONT_FAMILY = 'PingFangSC-Regular, "PingFang SC"';
+const BRANCH_FONT_FAMILY = 'PingFangSC-Medium, "PingFang SC"';
+
 const NodeDefaultSpace = {
     horizontal: {
         nodeAndText: BASE * 3,
@@ -248,15 +256,14 @@ const getSpaceEmojiAndText = (element) => {
 const NodeSpace = {
     getNodeWidth(board, element) {
         const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
-        const imageWidth = MindElement.hasImage(element) ? element.data.image?.width : 0;
         if (MindElement.hasEmojis(element)) {
             return (NodeSpace.getEmojiLeftSpace(board, element) +
                 getEmojisWidthHeight(board, element).width +
                 getSpaceEmojiAndText(element) +
-                Math.max(element.width, imageWidth) +
+                NodeSpace.getNodeResizableWidth(board, element) +
                 nodeAndText);
         }
-        return nodeAndText + Math.max(element.width, imageWidth) + nodeAndText;
+        return nodeAndText + NodeSpace.getNodeResizableWidth(board, element) + nodeAndText;
     },
     getNodeHeight(board, element) {
         const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
@@ -269,6 +276,26 @@ const NodeSpace = {
         }
         return nodeAndText + element.height + nodeAndText;
     },
+    getNodeResizableWidth(board, element) {
+        const imageWidth = MindElement.hasImage(element) ? element.data.image?.width : 0;
+        return Math.max(element.width, imageWidth);
+    },
+    getNodeResizableMinWidth(board, element) {
+        const minTopicWidth = NodeSpace.getNodeTopicMinWidth(board, element);
+        if (MindElement.hasImage(element) && element.data.image.width > minTopicWidth) {
+            return element.data.image.width;
+        }
+        else {
+            return minTopicWidth;
+        }
+    },
+    getNodeTopicMinWidth(board, element, isRoot = false) {
+        const defaultFontSize = getNodeDefaultFontSize(isRoot);
+        const editor = MindElement.getTextEditor(element);
+        const marks = PlaitMarkEditor.getMarks(editor);
+        const fontSize = marks[MarkTypes.fontSize] || defaultFontSize;
+        return fontSize;
+    },
     getTextLeftSpace(board, element) {
         const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
         if (MindElement.hasEmojis(element)) {
@@ -300,6 +327,19 @@ const NodeSpace = {
         return nodeAndText;
     }
 };
+const getFontSizeBySlateElement = (text) => {
+    const defaultFontSize = DEFAULT_FONT_SIZE;
+    if (typeof text === 'string') {
+        return defaultFontSize;
+    }
+    const marks = PlaitMarkEditor.getMarksByElement(text);
+    const fontSize = marks[MarkTypes.fontSize] || defaultFontSize;
+    return fontSize;
+};
+const getNodeDefaultFontSize = (isRoot = false) => {
+    const defaultFontSize = isRoot ? ROOT_TOPIC_FONT_SIZE : DEFAULT_FONT_SIZE;
+    return defaultFontSize;
+};
 
 function getEmojiRectangle(board, element) {
     let { x, y } = getRectangleByNode(MindElement.getNode(element));
@@ -359,21 +399,11 @@ const isHitImage = (board, element, range) => {
     return RectangleClient.isHit(RectangleClient.toRectangleClient([range.anchor, range.focus]), client);
 };
 
-const NODE_MIN_WIDTH = 18;
-
 function editTopic(element) {
     const component = PlaitElement.getComponent(element);
     component?.editTopic();
 }
 
-const TOPIC_COLOR = '#333';
-const TOPIC_FONT_SIZE = 14;
-const ROOT_TOPIC_FONT_SIZE = 18;
-const ROOT_TOPIC_HEIGHT = 25;
-const TOPIC_DEFAULT_MAX_WORD_COUNT = 34;
-const DEFAULT_FONT_FAMILY = 'PingFangSC-Regular, "PingFang SC"';
-const BRANCH_FONT_FAMILY = 'PingFangSC-Medium, "PingFang SC"';
-
 const createEmptyMind = (point) => {
     const element = createMindElement('思维导图', 72, ROOT_TOPIC_HEIGHT, { layout: MindLayoutType.right });
     element.isRoot = true;
@@ -483,7 +513,7 @@ const insertMindElement = (board, inheritNode, path) => {
         });
         delete newNode.layout;
     }
-    const newElement = createMindElement('', NODE_MIN_WIDTH, TEXT_DEFAULT_HEIGHT, newNode);
+    const newElement = createMindElement('', getNodeDefaultFontSize(), TEXT_DEFAULT_HEIGHT, newNode);
     Transforms.insertNode(board, newElement, path);
     clearSelectedElement(board);
     addSelectedElement(board, newElement);
@@ -648,7 +678,7 @@ const adjustNodeToRoot = (board, node) => {
         fontSize: ROOT_TOPIC_FONT_SIZE,
         fontFamily: BRANCH_FONT_FAMILY
     });
-    newElement.width = Math.max(width, NODE_MIN_WIDTH);
+    newElement.width = Math.max(width, getNodeDefaultFontSize(true));
     newElement.height = height;
     return {
         ...newElement,
@@ -1069,14 +1099,7 @@ const detectDropTarget = (board, detectPoint, dropTarget, activeElements) => {
         if (detectResult && isValid) {
             dropTarget = { target: node.origin, detectResult: detectResult[0] };
         }
-    }, node => {
-        if (PlaitBoard.isBoard(node) || board.isRecursion(node)) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    });
+    }, getIsRecursionFunc(board));
     return dropTarget;
 };
 const directionDetector = (targetNode, centerPoint) => {
@@ -2265,24 +2288,25 @@ const correctLogicLayoutNode = (board, layout, path) => {
     }
 };
 
-const normalizeWidthAndHeight = (board, width, height) => {
-    const newWidth = width < NODE_MIN_WIDTH * board.viewport.zoom ? NODE_MIN_WIDTH : width / board.viewport.zoom;
+const normalizeWidthAndHeight = (board, element, width, height) => {
+    const minWidth = NodeSpace.getNodeTopicMinWidth(board, element, element.isRoot);
+    const newWidth = width < minWidth * board.viewport.zoom ? minWidth : width / board.viewport.zoom;
     const newHeight = height / board.viewport.zoom;
     return { width: newWidth, height: newHeight };
 };
 const setTopic = (board, element, topic, width, height) => {
     const newElement = {
         data: { ...element.data, topic },
-        ...normalizeWidthAndHeight(board, width, height)
+        ...normalizeWidthAndHeight(board, element, width, height)
     };
     const path = PlaitBoard.findPath(board, element);
     Transforms.setNode(board, newElement, path);
 };
 const setTopicSize = (board, element, width, height) => {
     const newElement = {
-        ...normalizeWidthAndHeight(board, width, height)
+        ...normalizeWidthAndHeight(board, element, width, height)
     };
-    if (element.width !== newElement.width || element.height !== newElement.height) {
+    if (Math.floor(element.width) !== Math.floor(newElement.width) || Math.floor(element.height) !== Math.floor(newElement.height)) {
         const path = PlaitBoard.findPath(board, element);
         Transforms.setNode(board, newElement, path);
     }
@@ -3172,7 +3196,7 @@ const withNodeDnd = (board) => {
         if (PlaitBoard.isReadonly(board) ||
             PlaitBoard.hasBeenTextEditing(board) ||
             !PlaitBoard.isPointer(board, PlaitPointerType.selection) ||
-            event.button === 2) {
+            !isMainPointer(event)) {
             mousedown(event);
             return;
         }
@@ -3405,7 +3429,7 @@ const insertClipboardData = (board, elements, targetPoint) => {
                 newElement = adjustRootToNode(board, newElement);
                 const styles = PlaitMind.isMind(targetParent) ? { fontFamily: BRANCH_FONT_FAMILY } : { fontFamily: DEFAULT_FONT_FAMILY };
                 const { width, height } = getTextSize(board, newElement.data.topic, TOPIC_DEFAULT_MAX_WORD_COUNT, styles);
-                newElement.width = Math.max(width, NODE_MIN_WIDTH);
+                newElement.width = Math.max(width, getNodeDefaultFontSize());
                 newElement.height = height;
             }
             // handle abstract start and end
@@ -3435,7 +3459,7 @@ const insertClipboardData = (board, elements, targetPoint) => {
 const insertClipboardText = (board, targetParent, text) => {
     const styles = PlaitMind.isMind(targetParent) ? { fontFamily: BRANCH_FONT_FAMILY } : { fontFamily: DEFAULT_FONT_FAMILY };
     const { width, height } = getTextSize(board, text, TOPIC_DEFAULT_MAX_WORD_COUNT, styles);
-    const newElement = createMindElement(text, width, height, {});
+    const newElement = createMindElement(text, Math.max(width, getFontSizeBySlateElement(text)), height, {});
     Transforms.insertNode(board, newElement, findNewChildNodePath(board, targetParent));
     return;
 };
@@ -3783,14 +3807,7 @@ const withNodeHover = (board) => {
                 if (isHitElement) {
                     target = element;
                 }
-            }, node => {
-                if (PlaitBoard.isBoard(node) || board.isRecursion(node)) {
-                    return true;
-                }
-                else {
-                    return false;
-                }
-            }, true);
+            }, getIsRecursionFunc(board), true);
             if (hoveredMindElement && target && hoveredMindElement === target) {
                 return;
             }
@@ -3873,8 +3890,9 @@ const withMindImage = (board) => {
     return board;
 };
 
-const withMind = (board) => {
-    const { drawElement, dblclick, keydown, insertFragment, setFragment, deleteFragment, isHitSelection, getRectangle, isMovable, isRecursion } = board;
+const withMind = (baseBoard) => {
+    const board = baseBoard;
+    const { drawElement, dblclick, insertFragment, setFragment, deleteFragment, isHitSelection, getRectangle, isMovable, isRecursion } = board;
     board.drawElement = (context) => {
         if (PlaitMind.isMind(context.element)) {
             return PlaitMindComponent;
@@ -3931,14 +3949,7 @@ const withMind = (board) => {
                 if (!PlaitBoard.hasBeenTextEditing(board) && isHitMindElement(board, point, node)) {
                     editTopic(node);
                 }
-            }, node => {
-                if (PlaitBoard.isBoard(node) || board.isRecursion(node)) {
-                    return true;
-                }
-                else {
-                    return false;
-                }
-            });
+            }, getIsRecursionFunc(board));
         });
         if (PlaitBoard.hasBeenTextEditing(board)) {
             return;
@@ -4038,5 +4049,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, NODE_MIN_WIDTH, 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, 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, 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, withMind, withMindExtend };
 //# sourceMappingURL=plait-mind.mjs.map