@plait/mind 0.83.0 → 0.84.0

package/constants/default.d.ts

@@ -2,7 +2,7 @@ export declare const WithMindPluginKey = "plait-mind-plugin-key";
 export declare const BASE = 4;
 export declare const PRIMARY_COLOR = "#6698FF";
 export declare const GRAY_COLOR = "#AAAAAA";
-export declare const STROKE_WIDTH = 3;
+export declare const STROKE_WIDTH = 2;
 export declare const RESIZE_HANDLE_BUFFER_DISTANCE = 8;
 export declare const NODE_MORE_LINE_DISTANCE = 10;
 export declare const NODE_MORE_STROKE_WIDTH = 2;

package/fesm2022/plait-mind.mjs

@@ -1,7 +1,7 @@
 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 { MindLayoutType, AbstractNode, isIndentedLayout, isHorizontalLogicLayout, ConnectingPosition, isHorizontalLayout, getNonAbstractChildren, isStandardLayout, isLeftLayout, isRightLayout, isVerticalLogicLayout, isTopLayout, isBottomLayout, getCorrectStartEnd, getAbstractLayout, GlobalLayout } from '@plait/layouts';
-import { StrokeStyle, getFirstTextManage, DEFAULT_FONT_FAMILY, measureElement, buildText, getFirstTextEditor, RESIZE_HANDLE_DIAMETER, getRectangleResizeHandleRefs, addElementOfFocusedImage, ImageGenerator, removeElementOfFocusedImage, getStrokeLineDash, getXDistanceBetweenPoint, moveXOfPoint, moveYOfPoint, Generator, PropertyTransforms, TRANSPARENT, isResizing, CommonElementFlavour, WithTextPluginKey, TextManage, isDrawingMode, isDndMode, setCreationMode, BoardCreationMode, isExpandHotkey, isTabHotkey, isEnterHotkey, isVirtualKey, isDelete, isSpaceHotkey, getElementOfFocusedImage, acceptImageTypes, buildImage, withResize, getElementsText } from '@plait/common';
-import { TEXT_DEFAULT_HEIGHT, PlaitMarkEditor, MarkTypes, DEFAULT_FONT_SIZE, FontSizes } from '@plait/text-plugins';
+import { StrokeStyle, getFirstTextManage, DEFAULT_FONT_FAMILY, measureElement, buildText, getElementSize, RESIZE_HANDLE_DIAMETER, getRectangleResizeHandleRefs, addElementOfFocusedImage, ImageGenerator, removeElementOfFocusedImage, getStrokeLineDash, getXDistanceBetweenPoint, moveXOfPoint, moveYOfPoint, Generator, PropertyTransforms, TRANSPARENT, isResizing, CommonElementFlavour, WithTextPluginKey, TextManage, isDrawingMode, isDndMode, setCreationMode, BoardCreationMode, isExpandHotkey, isTabHotkey, isEnterHotkey, isVirtualKey, isDelete, isSpaceHotkey, getElementOfFocusedImage, acceptImageTypes, buildImage, withResize, getElementsText } from '@plait/common';
+import { TEXT_DEFAULT_HEIGHT, getFirstTextMarks, MarkTypes, DEFAULT_FONT_SIZE, PlaitMarkEditor, FontSizes } from '@plait/text-plugins';
 import { Node as Node$1, Path as Path$1 } from 'slate';
 import { pointsOnBezierCurves } from 'points-on-curve';
 import { isHotkey } from 'is-hotkey';
@@ -177,7 +177,7 @@ const WithMindPluginKey = 'plait-mind-plugin-key';
 const BASE = 4;
 const PRIMARY_COLOR = '#6698FF';
 const GRAY_COLOR = '#AAAAAA';
-const STROKE_WIDTH = 3;
+const STROKE_WIDTH = 2;
 const RESIZE_HANDLE_BUFFER_DISTANCE = 8;
 const NODE_MORE_LINE_DISTANCE = 10;
 const NODE_MORE_STROKE_WIDTH = 2;
@@ -224,11 +224,11 @@ const DefaultAbstractNodeStyle = {
 };
 const DefaultNodeStyle = {
     branch: {
-        width: 3
+        width: 2
     },
     shape: {
         rectangleRadius: 4,
-        strokeWidth: 3,
+        strokeWidth: 2,
         fill: 'none'
     }
 };
@@ -875,23 +875,35 @@ const NodeSpace = {
             return (NodeSpace.getEmojiLeftSpace(board, element) +
                 getEmojisWidthHeight(board, element).width +
                 getSpaceEmojiAndText(element) +
-                NodeSpace.getNodeDynamicWidth(board, element) +
+                NodeSpace.getTopicDynamicWidth(board, element) +
                 nodeAndText);
         }
-        return nodeAndText + NodeSpace.getNodeDynamicWidth(board, element) + nodeAndText;
+        return nodeAndText + NodeSpace.getTopicDynamicWidth(board, element) + nodeAndText;
     },
     getNodeHeight(board, element) {
+        const topicSize = getElementSize(board, element.data.topic, { fontSize: DEFAULT_FONT_SIZE, fontFamily: DEFAULT_FONT_FAMILY }, NodeSpace.getTopicMaxDynamicWidth(board, element));
+        const normalizedSize = normalizeWidthAndHeight(board, element, topicSize.width, topicSize.height);
         const nodeAndText = getVerticalSpaceBetweenNodeAndText(board, element);
         if (MindElement.hasImage(element)) {
-            return NodeSpace.getTextTopSpace(board, element) + element.height + nodeAndText;
+            return NodeSpace.getTextTopSpace(board, element) + normalizedSize.height + nodeAndText;
         }
-        return nodeAndText + element.height + nodeAndText;
+        return nodeAndText + normalizedSize.height + nodeAndText;
     },
-    getNodeDynamicWidth(board, element) {
-        const width = element.manualWidth || element.width;
+    getTopicDynamicWidth(board, element) {
+        const topicSize = getElementSize(board, element.data.topic, { fontSize: getDefaultMindElementFontSize(board, element), fontFamily: DEFAULT_FONT_FAMILY }, NodeSpace.getTopicMaxDynamicWidth(board, element));
+        const normalizedSize = normalizeWidthAndHeight(board, element, topicSize.width, topicSize.width);
+        const width = element.manualWidth || normalizedSize.width;
         const imageWidth = MindElement.hasImage(element) ? element.data.image?.width : 0;
         return Math.max(width, imageWidth);
     },
+    getTopicHeight(board, element) {
+        const topicSize = getElementSize(board, element.data.topic, { fontSize: DEFAULT_FONT_SIZE, fontFamily: DEFAULT_FONT_FAMILY }, NodeSpace.getTopicMaxDynamicWidth(board, element));
+        const normalizedSize = normalizeWidthAndHeight(board, element, topicSize.width, topicSize.height);
+        return normalizedSize.height;
+    },
+    getTopicMaxDynamicWidth(board, element) {
+        return Math.max(NodeTopicThreshold.defaultTextMaxWidth, element.manualWidth || 0, MindElement.hasImage(element) ? element.data.image?.width : 0);
+    },
     /**
      * use it when upload image first or resize image
      */
@@ -910,9 +922,8 @@ const NodeSpace = {
     },
     getNodeTopicMinWidth(board, element) {
         const defaultFontSize = getDefaultMindElementFontSize(board, element);
-        const editor = getFirstTextEditor(element);
-        const marks = PlaitMarkEditor.getMarks(editor);
-        const fontSize = marks[MarkTypes.fontSize] || defaultFontSize;
+        const firstText = getFirstTextMarks(element.data.topic);
+        const fontSize = (firstText[MarkTypes.fontSize] ? Number(firstText[MarkTypes.fontSize]) : null) || defaultFontSize;
         return fontSize;
     },
     getTextLeftSpace(board, element) {
@@ -956,6 +967,11 @@ const getFontSizeBySlateElement = (text) => {
     const fontSize = marks[MarkTypes.fontSize] || defaultFontSize;
     return fontSize;
 };
+const normalizeWidthAndHeight = (board, element, width, height) => {
+    const minWidth = NodeSpace.getNodeTopicMinWidth(board, element);
+    const newWidth = width < minWidth ? minWidth : width;
+    return { width: newWidth, height };
+};
 
 function getRectangleByNode(node) {
     const x = node.x + node.hGap;
@@ -1019,14 +1035,13 @@ const isHitEmojis = (board, element, point) => {
 function getTopicRectangleByNode(board, node) {
     let nodeRectangle = getRectangleByNode(node);
     const result = getTopicRectangleByElement(board, nodeRectangle, node.origin);
-    result.width = result.width;
     return result;
 }
 function getTopicRectangleByElement(board, nodeRectangle, element) {
     const x = nodeRectangle.x + NodeSpace.getTextLeftSpace(board, element);
     const y = nodeRectangle.y + NodeSpace.getTextTopSpace(board, element);
-    const width = NodeSpace.getNodeDynamicWidth(board, element);
-    const height = Math.ceil(element.height);
+    const width = NodeSpace.getTopicDynamicWidth(board, element);
+    const height = NodeSpace.getTopicHeight(board, element);
     return { height, width, x, y };
 }
 
@@ -2490,11 +2505,6 @@ const insertAbstractNode = (board, path, start, end) => {
     addSelectedElement(board, mindElement);
 };
 
-const normalizeWidthAndHeight = (board, element, width, height) => {
-    const minWidth = NodeSpace.getNodeTopicMinWidth(board, element);
-    const newWidth = width < minWidth ? minWidth : width;
-    return { width: Math.ceil(newWidth), height };
-};
 const setTopic = (board, element, topic, width, height) => {
     const newElement = {
         data: { ...element.data, topic },
@@ -2525,7 +2535,7 @@ const setTopicSize = (board, element, width, height) => {
 };
 const insertNodes = (board, elements, path) => {
     const pathRef = board.pathRef(path);
-    elements.forEach(element => {
+    elements.forEach((element) => {
         if (pathRef.current) {
             Transforms.insertNode(board, element, pathRef.current);
         }
@@ -2535,7 +2545,7 @@ const insertNodes = (board, elements, path) => {
 const insertAbstractNodes = (board, validAbstractRefs, elements, path) => {
     const parent = PlaitNode.get(board, Path$1.parent(path));
     const abstractPath = [...Path$1.parent(path), parent.children?.length];
-    const abstracts = validAbstractRefs.map(refs => {
+    const abstracts = validAbstractRefs.map((refs) => {
         const { start, end } = getRelativeStartEndByAbstractRef(refs, elements);
         return {
             ...refs.abstract,
@@ -2546,7 +2556,7 @@ const insertAbstractNodes = (board, validAbstractRefs, elements, path) => {
     insertNodes(board, abstracts, abstractPath);
 };
 const setRightNodeCountByRefs = (board, refs) => {
-    refs.forEach(ref => {
+    refs.forEach((ref) => {
         Transforms.setNode(board, { rightNodeCount: ref.rightNodeCount }, ref.path);
     });
 };
@@ -2856,7 +2866,7 @@ class NodeMoreGenerator extends Generator {
             fontSize: Number(FontSizes.fontSize12),
             fontFamily: DEFAULT_FONT_FAMILY
         });
-        const badgeText = createText(center[0] - width / 2 + 0.5, y, stroke, `${text}`);
+        const badgeText = createText(center[0] - width / 2, y, stroke, `${text}`);
         badgeText.setAttribute('style', `font-size: ${Number(FontSizes.fontSize12)}px;`);
         this.expandG.appendChild(moreLine);
         this.expandG.appendChild(badgeBackground);
@@ -2954,12 +2964,7 @@ class MindNodeComponent extends CommonElementFlavour {
                 }
             },
             getMaxWidth: () => {
-                if (this.element.manualWidth) {
-                    return NodeSpace.getNodeDynamicWidth(this.board, this.element);
-                }
-                else {
-                    return Math.max(NodeSpace.getNodeDynamicWidth(this.board, this.element), NodeTopicThreshold.defaultTextMaxWidth);
-                }
+                return NodeSpace.getTopicMaxDynamicWidth(this.board, this.element);
             },
             textPlugins: plugins || []
         });
@@ -3808,7 +3813,7 @@ const withNodeResize = (board) => {
         beforeResize: (resizeRef) => {
             targetElementRef = {
                 minWidth: NodeSpace.getNodeResizableMinWidth(board, resizeRef.element),
-                currentWidth: NodeSpace.getNodeDynamicWidth(board, resizeRef.element),
+                currentWidth: NodeSpace.getTopicDynamicWidth(board, resizeRef.element),
                 path: PlaitBoard.findPath(board, resizeRef.element),
                 textManage: getFirstTextManage(resizeRef.element)
             };
@@ -4273,5 +4278,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, ELEMENT_TO_NODE, GRAY_COLOR, INHERIT_ATTRIBUTE_KEYS, LayoutDirection, LayoutDirectionsMap, MIND_CENTRAL_TEXT, 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, NodeTopicThreshold, 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, getDefaultLayout, getDefaultMindElementFontSize, getDefaultMindNameText, getEmojiFontSize, getEmojiForeignRectangle, getEmojiRectangle, getEmojisWidthHeight, getFillByElement, getFirstLevelElement, getFontSizeBySlateElement, 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, getTopicSize, getValidAbstractRefs, handleTouchedAbstract, hasPreviousOrNextOfDropPath, insertElementHandleAbstract, insertElementHandleRightNodeCount, insertMindElement, isChildElement, isChildOfAbstract, isChildRight, isChildUp, isCorrectLayout, isDropStandardRight, isHitEmojis, isHitImage, isHitMindElement, isInRightBranchOfStandardLayout, isMixedLayout, isSetAbstract, isValidTarget, 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, ELEMENT_TO_NODE, GRAY_COLOR, INHERIT_ATTRIBUTE_KEYS, LayoutDirection, LayoutDirectionsMap, MIND_CENTRAL_TEXT, 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, NodeTopicThreshold, 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, getDefaultLayout, getDefaultMindElementFontSize, getDefaultMindNameText, getEmojiFontSize, getEmojiForeignRectangle, getEmojiRectangle, getEmojisWidthHeight, getFillByElement, getFirstLevelElement, getFontSizeBySlateElement, 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, getTopicSize, 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