@plait/mind 0.83.1 → 0.85.0

package/constants/node-topic-style.d.ts

@@ -1,6 +1,3 @@
 export declare const TOPIC_FONT_SIZE = 14;
 export declare const ROOT_TOPIC_FONT_SIZE = 18;
 export declare const TOPIC_DEFAULT_MAX_WORD_COUNT = 34;
-export declare const NodeTopicThreshold: {
-    defaultTextMaxWidth: number;
-};

package/fesm2022/plait-mind.mjs

@@ -1,12 +1,12 @@
 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, 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';
 import { Node as Node$1, Path as Path$1 } from 'slate';
 import { pointsOnBezierCurves } from 'points-on-curve';
 import { isHotkey } from 'is-hotkey';
 
-const ELEMENT_TO_NODE = new WeakMap();
+const MIND_ELEMENT_TO_NODE = new WeakMap();
 
 const MindNode = {
     get(root, path) {
@@ -664,18 +664,6 @@ const getLayoutOptions = (board) => {
     };
 };
 
-const TOPIC_FONT_SIZE = 14;
-const ROOT_TOPIC_FONT_SIZE = 18;
-const TOPIC_DEFAULT_MAX_WORD_COUNT = 34;
-const NodeTopicThreshold = {
-    defaultTextMaxWidth: 34 * 14
-};
-
-const ABSTRACT_HANDLE_COLOR = '#6698FF80'; //primary color 50% opacity
-const ABSTRACT_INCLUDED_OUTLINE_OFFSET = 3.5;
-const ABSTRACT_HANDLE_LENGTH = 10;
-const ABSTRACT_HANDLE_MASK_WIDTH = 8;
-
 const MIND_CENTRAL_TEXT = '中心主题';
 const ABSTRACT_NODE_TEXT = '概要';
 const getDefaultMindNameText = (board) => {
@@ -684,40 +672,25 @@ const getDefaultMindNameText = (board) => {
 const getAbstractNodeText = (board) => {
     return getI18nValue(board, MindI18nKey.abstractNodeText, ABSTRACT_NODE_TEXT);
 };
-const getTopicSize = (board, isRoot, isBranch, topic, manualWidth) => {
-    let fontFamily = DEFAULT_FONT_FAMILY;
-    let fontSize = TOPIC_FONT_SIZE;
-    if (isRoot) {
-        fontFamily = DEFAULT_FONT_FAMILY;
-        fontSize = ROOT_TOPIC_FONT_SIZE;
-    }
-    else if (isBranch) {
-        fontFamily = DEFAULT_FONT_FAMILY;
-    }
-    const maxWidth = fontSize * TOPIC_DEFAULT_MAX_WORD_COUNT;
-    return measureElement(board, topic, { fontSize, fontFamily }, manualWidth ? manualWidth : maxWidth);
-};
 
 const createEmptyMind = (board, point) => {
     const text = getDefaultMindNameText(board);
-    const topicSize = getTopicSize(board, true, false, buildText(text));
-    const element = createMindElement(text, topicSize.width, topicSize.height, { layout: MindLayoutType.right });
+    const element = createMindElement(text, { layout: MindLayoutType.right });
     element.isRoot = true;
-    element.type = 'mindmap';
+    element.type = 'mind';
     const width = NodeSpace.getNodeWidth(board, element);
     const height = NodeSpace.getNodeHeight(board, element);
     element.points = [[point[0] - width / 2, point[1] - height / 2]];
     return element;
 };
-const createMindElement = (text, width, height, options) => {
+const createMindElement = (text, options) => {
     const newElement = {
         id: idCreator(),
+        type: 'mind_child',
         data: {
             topic: buildText(text)
         },
-        children: [],
-        width,
-        height
+        children: []
     };
     let key;
     for (key in options) {
@@ -739,6 +712,10 @@ const INHERIT_ATTRIBUTE_KEYS = [
     'branchShape'
 ];
 
+const TOPIC_FONT_SIZE = 14;
+const ROOT_TOPIC_FONT_SIZE = 18;
+const TOPIC_DEFAULT_MAX_WORD_COUNT = 34;
+
 const getChildrenCount = (element) => {
     const count = element.children.reduce((p, c) => {
         return p + getChildrenCount(c);
@@ -757,8 +734,8 @@ const isChildElement = (origin, child) => {
 };
 const getFirstLevelElement = (elements) => {
     let result = [];
-    elements.forEach(element => {
-        const isChild = elements.some(node => {
+    elements.forEach((element) => {
+        const isChild = elements.some((node) => {
             return isChildElement(node, element);
         });
         if (!isChild) {
@@ -785,12 +762,12 @@ const copyNewNode = (node) => {
 const insertMindElement = (board, inheritNode, path) => {
     const newNode = {};
     if (!inheritNode.isRoot) {
-        INHERIT_ATTRIBUTE_KEYS.forEach(attr => {
+        INHERIT_ATTRIBUTE_KEYS.forEach((attr) => {
             newNode[attr] = inheritNode[attr];
         });
         delete newNode.layout;
     }
-    const newElement = createMindElement('', TOPIC_FONT_SIZE, TEXT_DEFAULT_HEIGHT, newNode);
+    const newElement = createMindElement('', newNode);
     Transforms.insertNode(board, newElement, path);
     clearSelectedElement(board);
     addSelectedElement(board, newElement);
@@ -821,16 +798,21 @@ const divideElementByParent = (elements) => {
     }
     return { parentElements, abstractIncludedGroups };
 };
-const getDefaultMindElementFontSize = (board, element) => {
+const getDefaultFontSizeForMindElement = (element) => {
     if (PlaitMind.isMind(element)) {
         return ROOT_TOPIC_FONT_SIZE;
     }
-    if (MindElement.isMindElement(board, element)) {
+    if (MindElement.isMindElement(null, element)) {
         return TOPIC_FONT_SIZE;
     }
     throw new Error('can not find default font-size');
 };
 
+const ABSTRACT_HANDLE_COLOR = '#6698FF80'; //primary color 50% opacity
+const ABSTRACT_INCLUDED_OUTLINE_OFFSET = 3.5;
+const ABSTRACT_HANDLE_LENGTH = 10;
+const ABSTRACT_HANDLE_MASK_WIDTH = 8;
+
 const NodeDefaultSpace = {
     horizontal: {
         nodeAndText: BASE * 2.5,
@@ -875,29 +857,38 @@ 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: getDefaultFontSizeForMindElement(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);
     },
-    /**
-     * use it when upload image first or resize image
-     */
-    getNodeNewDynamicWidth(board, element, imageWidth) {
-        const width = element.manualWidth || element.width;
-        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) {
+        const fontSize = getDefaultFontSizeForMindElement(element);
+        if (element.manualWidth) {
+            return Math.max(element.manualWidth, MindElement.hasImage(element) ? element.data.image?.width : 0);
+        }
+        return Math.max(fontSize * TOPIC_DEFAULT_MAX_WORD_COUNT, MindElement.hasImage(element) ? element.data.image?.width : 0);
     },
     getNodeResizableMinWidth(board, element) {
         const minTopicWidth = NodeSpace.getNodeTopicMinWidth(board, element);
@@ -909,11 +900,7 @@ 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;
-        return fontSize;
+        return getFontSizeByMindElement(board, element);
     },
     getTextLeftSpace(board, element) {
         const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
@@ -947,15 +934,17 @@ const NodeSpace = {
         return nodeAndText;
     }
 };
-const getFontSizeBySlateElement = (text) => {
-    const defaultFontSize = DEFAULT_FONT_SIZE;
-    if (typeof text === 'string') {
-        return defaultFontSize;
-    }
-    const marks = PlaitMarkEditor.getMarksByElement(text);
+const getFontSizeByMindElement = (board, element) => {
+    const defaultFontSize = getDefaultFontSizeForMindElement(element);
+    const marks = PlaitMarkEditor.getMarksByElement(element.data.topic);
     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;
@@ -981,7 +970,7 @@ function getRectangleByElement(board, element) {
     return nodeRectangle;
 }
 function isHitMindElement(board, point, element) {
-    const node = MindElement.getNode(element);
+    const node = MIND_ELEMENT_TO_NODE.get(element);
     if (node && distanceBetweenPointAndRectangle(point[0], point[1], getRectangleByNode(node)) === 0) {
         return true;
     }
@@ -1019,14 +1008,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 };
 }
 
@@ -1065,7 +1053,7 @@ const adjustRootToNode = (board, node) => {
     const newNode = { ...node };
     delete newNode.isRoot;
     delete newNode.rightNodeCount;
-    delete newNode.type;
+    newNode.type = 'mind_child';
     if (newNode.layout === MindLayoutType.standard) {
         delete newNode.layout;
     }
@@ -1091,7 +1079,7 @@ const adjustNodeToRoot = (board, node) => {
         ...newElement,
         layout: newElement.layout ?? MindLayoutType.right,
         isRoot: true,
-        type: 'mindmap'
+        type: 'mind'
     };
 };
 
@@ -2274,9 +2262,10 @@ const MindQueries = {
     getCorrectLayoutByElement
 };
 
+const LEGACY_MIND_TYPE = 'mindmap';
 const PlaitMind = {
     isMind: (value) => {
-        return value.type === 'mindmap';
+        return value.type === 'mind' || value.type === LEGACY_MIND_TYPE;
     }
 };
 const MindElement = {
@@ -2289,10 +2278,7 @@ const MindElement = {
         return isIndentedLayout(_layout);
     },
     isMindElement(board, element) {
-        // Design error: The type of the element should be identified based on type.
-        // Now it is very awkward whether it is dynamically calculated(query root node) or using other characteristic attributes(current).
-        // Using dynamically calculated will cause more issue like pasting from clipboard, finding elements by id(isRecursion)
-        if (element.data && element.data.topic && !isNullOrUndefined(element.width) && !isNullOrUndefined(element.height)) {
+        if ((element.data && element.data.topic) || element.type === 'mind_child') {
             return true;
         }
         else {
@@ -2329,7 +2315,7 @@ const MindElement = {
         return parents;
     },
     getNode(element) {
-        const node = ELEMENT_TO_NODE.get(element);
+        const node = MIND_ELEMENT_TO_NODE.get(element);
         if (!node) {
             throw new Error(`can not get node from ${JSON.stringify(element)}`);
         }
@@ -2478,8 +2464,7 @@ const setAbstractByElements = (board, groupParent, group) => {
 };
 const insertAbstractNode = (board, path, start, end) => {
     const abstractNodeText = getAbstractNodeText(board);
-    const { width, height } = getTopicSize(board, false, false, buildText(abstractNodeText));
-    const mindElement = createMindElement(abstractNodeText, width, height, {
+    const mindElement = createMindElement(abstractNodeText, {
         strokeWidth: DefaultAbstractNodeStyle.branch.width,
         branchWidth: DefaultAbstractNodeStyle.branch.width
     });
@@ -2490,42 +2475,25 @@ 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 setTopic = (board, element, topic) => {
     const newElement = {
-        data: { ...element.data, topic },
-        ...normalizeWidthAndHeight(board, element, width, height)
+        data: { ...element.data }
     };
+    if (topic) {
+        newElement.data.topic = topic;
+    }
     const path = PlaitBoard.findPath(board, element);
     Transforms.setNode(board, newElement, path);
 };
-const setNodeManualWidth = (board, element, width, height) => {
+const setNodeManualWidth = (board, element, width) => {
     const path = PlaitBoard.findPath(board, element);
-    const { width: normalizedWidth, height: normalizedHeight } = normalizeWidthAndHeight(board, element, width, height);
-    const newElement = { manualWidth: normalizedWidth, height: normalizedHeight };
+    const { width: normalizedWidth } = normalizeWidthAndHeight(board, element, width, 0);
+    const newElement = { manualWidth: normalizedWidth, data: { ...element.data, topic: { ...element.data.topic } } };
     Transforms.setNode(board, newElement, path);
 };
-const setTopicSize = (board, element, width, height) => {
-    const newElement = {
-        ...normalizeWidthAndHeight(board, element, width, height)
-    };
-    let isEqualWidth = Math.ceil(element.width) === Math.ceil(newElement.width);
-    let isEqualHeight = Math.ceil(element.height) === Math.ceil(newElement.height);
-    if (element.manualWidth) {
-        isEqualWidth = true;
-    }
-    if (!isEqualWidth || !isEqualHeight) {
-        const path = PlaitBoard.findPath(board, element);
-        Transforms.setNode(board, newElement, path);
-    }
-};
 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 +2503,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 +2514,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);
     });
 };
@@ -2622,26 +2590,16 @@ const replaceEmoji = (board, element, oldEmoji, newEmoji) => {
 const removeImage = (board, element) => {
     removeImageFocus(board, element);
     const newElement = {
-        data: { ...element.data }
+        data: { ...element.data, topic: { ...element.data.topic } }
     };
     delete newElement.data.image;
     const path = PlaitBoard.findPath(board, element);
-    const newDynamicWidth = NodeSpace.getNodeNewDynamicWidth(board, element, 0);
-    const newHeight = getNewNodeHeight(board, element, newDynamicWidth);
-    if (newHeight) {
-        newElement.height = newHeight;
-    }
     Transforms.setNode(board, newElement, path);
 };
 const setImage = (board, element, imageItem) => {
     const newElement = {
-        data: { ...element.data, image: imageItem }
+        data: { ...element.data, image: imageItem, topic: { ...element.data.topic } }
     };
-    const newDynamicWidth = NodeSpace.getNodeNewDynamicWidth(board, element, imageItem.width);
-    const newHeight = getNewNodeHeight(board, element, newDynamicWidth);
-    if (newHeight) {
-        newElement.height = newHeight;
-    }
     const path = PlaitBoard.findPath(board, element);
     Transforms.setNode(board, newElement, path);
 };
@@ -2698,7 +2656,6 @@ const MindTransforms = {
     setBranchWidth,
     setBranchColor,
     setTopic,
-    setTopicSize,
     setNodeManualWidth,
     addEmoji,
     removeEmoji,
@@ -2944,22 +2901,10 @@ class MindNodeComponent extends CommonElementFlavour {
                 return rect;
             },
             onChange: (data) => {
-                const width = data.width;
-                const height = data.height;
-                if (data.newText) {
-                    MindTransforms.setTopic(this.board, this.element, data.newText, width, height);
-                }
-                else {
-                    MindTransforms.setTopicSize(this.board, this.element, width, height);
-                }
+                MindTransforms.setTopic(this.board, this.element, data.newText);
             },
             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 || []
         });
@@ -3069,8 +3014,8 @@ class MindNodeComponent extends CommonElementFlavour {
         this.nodeEmojisGenerator.destroy();
         this.imageGenerator.destroy();
         this.activeGenerator.destroy();
-        if (ELEMENT_TO_NODE.get(this.element) === this.node) {
-            ELEMENT_TO_NODE.delete(this.element);
+        if (MIND_ELEMENT_TO_NODE.get(this.element) === this.node) {
+            MIND_ELEMENT_TO_NODE.delete(this.element);
         }
         this.getRef().destroyTextManage();
     }
@@ -3099,7 +3044,7 @@ class PlaitMindComponent extends MindNodeComponent {
         depthFirstRecursion(this.root, (node) => {
             node.x = node.x - offsetX + element.points[0][0];
             node.y = node.y - offsetY + element.points[0][1];
-            ELEMENT_TO_NODE.set(node.origin, node);
+            MIND_ELEMENT_TO_NODE.set(node.origin, node);
         });
     }
 }
@@ -3808,7 +3753,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)
             };
@@ -3820,9 +3765,7 @@ const withNodeResize = (board) => {
             }
             const newTarget = PlaitNode.get(board, targetElementRef.path);
             if (newTarget && NodeSpace.getNodeTopicMinWidth(board, newTarget) !== resizedWidth) {
-                targetElementRef.textManage.updateRectangleWidth(resizedWidth);
-                const { height } = targetElementRef.textManage.getSize(undefined, resizedWidth);
-                MindTransforms.setNodeManualWidth(board, newTarget, resizedWidth, height);
+                MindTransforms.setNodeManualWidth(board, newTarget, resizedWidth);
             }
         },
         afterResize: (resizeRef) => {
@@ -3950,9 +3893,6 @@ const insertClipboardData = (board, elements, targetPoint, operationType) => {
         if (hasTargetParent && operationType !== WritableClipboardOperationType.duplicate) {
             if (item.isRoot) {
                 newElement = adjustRootToNode(board, newElement);
-                const { width, height } = getTopicSizeByElement(board, newElement, targetParent);
-                newElement.width = width;
-                newElement.height = height;
             }
             // handle abstract start and end
             if (AbstractNode.isAbstract(newElement)) {
@@ -3969,9 +3909,6 @@ const insertClipboardData = (board, elements, targetPoint, operationType) => {
             }
             if (!item.isRoot) {
                 newElement = adjustNodeToRoot(board, newElement);
-                const { width, height } = getTopicSizeByElement(board, newElement);
-                newElement.width = width;
-                newElement.height = height;
             }
             path = [board.children.length];
         }
@@ -3982,14 +3919,10 @@ const insertClipboardData = (board, elements, targetPoint, operationType) => {
     Transforms.addSelectionWithTemporaryElements(board, newELements);
 };
 const insertClipboardText = (board, targetParent, text) => {
-    const { width, height } = getTopicSize(board, false, PlaitMind.isMind(targetParent), buildText(text));
-    const newElement = createMindElement(text, Math.max(width, getFontSizeBySlateElement(text)), height, {});
+    const newElement = createMindElement(text, {});
     Transforms.insertNode(board, newElement, findNewChildNodePath(board, targetParent));
     Transforms.addSelectionWithTemporaryElements(board, [newElement]);
 };
-const getTopicSizeByElement = (board, element, parentElement) => {
-    return getTopicSize(board, PlaitMind.isMind(element), (parentElement && PlaitMind.isMind(parentElement)) || false, element.data.topic, element.manualWidth);
-};
 
 const withMindFragment = (baseBoard) => {
     const board = baseBoard;
@@ -4096,12 +4029,6 @@ const isNormalizedData = (element) => {
     }
     return true;
 };
-const isNormalizedWidthAndHeight = (element) => {
-    if (isNullOrUndefined(element.width) || isNullOrUndefined(element.height)) {
-        return false;
-    }
-    return true;
-};
 const fixMindElementData = (element) => {
     const emptyTopic = {
         children: [
@@ -4120,14 +4047,6 @@ const fixMindElementData = (element) => {
         element.data.topic = emptyTopic;
     }
 };
-const fixMindElementWidthAndHeight = (element) => {
-    if (isNullOrUndefined(element.width)) {
-        element.width = 56;
-    }
-    if (isNullOrUndefined(element.height)) {
-        element.width = 20;
-    }
-};
 
 const withMind = (baseBoard) => {
     const board = baseBoard;
@@ -4138,9 +4057,6 @@ const withMind = (baseBoard) => {
                 if (!isNormalizedData(node)) {
                     fixMindElementData(node);
                 }
-                if (!isNormalizedWidthAndHeight(node)) {
-                    fixMindElementWidthAndHeight(node);
-                }
             });
         }
         normalizeElement(context);
@@ -4273,5 +4189,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, 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 };
 //# sourceMappingURL=plait-mind.mjs.map