@plait/mind 0.84.0 → 0.86.0

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, 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 { 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) {
@@ -478,7 +478,7 @@ const getFillByElement = (board, element) => {
         return element.fill;
     }
     const defaultRootFill = getMindThemeColor(board).rootFill;
-    return element.isRoot ? defaultRootFill : DefaultNodeStyle.shape.fill;
+    return PlaitMind.isMind(element) ? defaultRootFill : DefaultNodeStyle.shape.fill;
 };
 const getShapeByElement = (board, element) => {
     const shape = getAvailableProperty(board, element, 'shape');
@@ -602,7 +602,7 @@ const getRootLayout = (root) => {
 
 const getLayoutOptions = (board) => {
     function getMainAxle(element, parent) {
-        if (element.isRoot) {
+        if (PlaitMind.isMind(element)) {
             return BASE * 12;
         }
         if (parent && parent.isRoot()) {
@@ -611,7 +611,7 @@ const getLayoutOptions = (board) => {
         return BASE * 3;
     }
     function getSecondAxle(element, parent) {
-        if (element.isRoot) {
+        if (PlaitMind.isMind(element)) {
             return BASE * 12;
         }
         return BASE * 8.5;
@@ -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,24 @@ 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 });
-    element.isRoot = true;
-    element.type = 'mindmap';
+    const element = createMindElement(text, { layout: MindLayoutType.right });
+    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 +711,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 +733,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) {
@@ -784,13 +760,13 @@ const copyNewNode = (node) => {
 };
 const insertMindElement = (board, inheritNode, path) => {
     const newNode = {};
-    if (!inheritNode.isRoot) {
-        INHERIT_ATTRIBUTE_KEYS.forEach(attr => {
+    if (!PlaitMind.isMind(inheritNode)) {
+        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 +797,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,
@@ -890,7 +871,7 @@ const NodeSpace = {
         return nodeAndText + normalizedSize.height + nodeAndText;
     },
     getTopicDynamicWidth(board, element) {
-        const topicSize = getElementSize(board, element.data.topic, { fontSize: getDefaultMindElementFontSize(board, element), fontFamily: DEFAULT_FONT_FAMILY }, NodeSpace.getTopicMaxDynamicWidth(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;
@@ -902,14 +883,11 @@ const NodeSpace = {
         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
-     */
-    getNodeNewDynamicWidth(board, element, imageWidth) {
-        const width = element.manualWidth || element.width;
-        return Math.max(width, imageWidth);
+        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);
@@ -921,10 +899,7 @@ const NodeSpace = {
         }
     },
     getNodeTopicMinWidth(board, element) {
-        const defaultFontSize = getDefaultMindElementFontSize(board, element);
-        const firstText = getFirstTextMarks(element.data.topic);
-        const fontSize = (firstText[MarkTypes.fontSize] ? Number(firstText[MarkTypes.fontSize]) : null) || defaultFontSize;
-        return fontSize;
+        return getFontSizeByMindElement(board, element);
     },
     getTextLeftSpace(board, element) {
         const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
@@ -958,12 +933,9 @@ 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;
 };
@@ -997,7 +969,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;
     }
@@ -1078,9 +1050,8 @@ const getHitImageResizeHandleDirection = (board, element, point) => {
 
 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;
     }
@@ -1105,8 +1076,7 @@ const adjustNodeToRoot = (board, node) => {
     return {
         ...newElement,
         layout: newElement.layout ?? MindLayoutType.right,
-        isRoot: true,
-        type: 'mindmap'
+        type: 'mind'
     };
 };
 
@@ -1192,10 +1162,10 @@ const isDropStandardRight = (parent, dropTarget) => {
 };
 
 const directionCorrector = (board, node, detectResults) => {
-    if (!node.origin.isRoot && !AbstractNode.isAbstract(node.origin)) {
+    if (!PlaitMind.isMind(node.origin) && !AbstractNode.isAbstract(node.origin)) {
         const parentLayout = MindQueries.getCorrectLayoutByElement(board, node?.parent.origin);
         if (isStandardLayout(parentLayout)) {
-            const idx = node.parent.children.findIndex(x => x === node);
+            const idx = node.parent.children.findIndex((x) => x === node);
             const isLeft = idx >= (node.parent.origin.rightNodeCount || 0);
             return getAllowedDirection(detectResults, [isLeft ? 'right' : 'left']);
         }
@@ -1234,8 +1204,8 @@ const directionCorrector = (board, node, detectResults) => {
 };
 const getAllowedDirection = (detectResults, illegalDirections) => {
     const directions = detectResults;
-    illegalDirections.forEach(item => {
-        const bottomDirectionIndex = directions.findIndex(direction => direction === item);
+    illegalDirections.forEach((item) => {
+        const bottomDirectionIndex = directions.findIndex((direction) => direction === item);
         if (bottomDirectionIndex !== -1) {
             directions.splice(bottomDirectionIndex, 1);
         }
@@ -1244,7 +1214,7 @@ const getAllowedDirection = (detectResults, illegalDirections) => {
 };
 const detectDropTarget = (board, detectPoint, dropTarget, activeElements) => {
     let detectResult = null;
-    depthFirstRecursion(board, element => {
+    depthFirstRecursion(board, (element) => {
         if (!MindElement.isMindElement(board, element) || detectResult) {
             return;
         }
@@ -1254,7 +1224,7 @@ const detectDropTarget = (board, detectPoint, dropTarget, activeElements) => {
             detectResult = directionCorrector(board, node, directions);
         }
         dropTarget = null;
-        const isValid = activeElements.every(element => isValidTarget(element, node.origin));
+        const isValid = activeElements.every((element) => isValidTarget(element, node.origin));
         if (detectResult && isValid) {
             dropTarget = { target: node.origin, detectResult: detectResult[0] };
         }
@@ -1516,7 +1486,7 @@ function drawLogicLink(board, parent, node, isHorizontal, defaultStrokeColor = n
     const branchColor = defaultStrokeColor || getBranchColorByMindElement(board, node.origin);
     const branchWidth = defaultStrokeWidth || getBranchWidthByMindElement(board, node.origin);
     const strokeStyle = defaultStrokeStyle || getStrokeStyleByElement(board, node.origin);
-    const hasStraightLine = branchShape === BranchShape.polyline ? true : !parent.origin.isRoot;
+    const hasStraightLine = branchShape === BranchShape.polyline ? true : !PlaitMind.isMind(parent.origin);
     const parentShape = getShapeByElement(board, parent.origin);
     const shape = getShapeByElement(board, node.origin);
     const hasUnderlineShape = shape === MindElementShape.underline;
@@ -1531,7 +1501,7 @@ function drawLogicLink(board, parent, node, isHorizontal, defaultStrokeColor = n
     transformPlacement(beginPlacement, linkDirection);
     transformPlacement(endPlacement, linkDirection);
     // underline shape and horizontal
-    if (isHorizontal && hasUnderlineShapeOfParent && !parent.origin.isRoot) {
+    if (isHorizontal && hasUnderlineShapeOfParent && !PlaitMind.isMind(parent.origin)) {
         beginPlacement[1] = VerticalPlacement.bottom;
     }
     if (isHorizontal && hasUnderlineShape) {
@@ -2140,8 +2110,8 @@ function handleTouchedAbstract(board, touchedAbstract, endPoint) {
 const isInRightBranchOfStandardLayout = (selectedElement) => {
     const parentElement = MindElement.findParent(selectedElement);
     if (parentElement) {
-        const nodeIndex = parentElement.children.findIndex(item => item.id === selectedElement.id);
-        if (parentElement.isRoot &&
+        const nodeIndex = parentElement.children.findIndex((item) => item.id === selectedElement.id);
+        if (PlaitMind.isMind(parentElement) &&
             getRootLayout(parentElement) === MindLayoutType.standard &&
             parentElement.rightNodeCount &&
             nodeIndex <= parentElement.rightNodeCount - 1) {
@@ -2151,7 +2121,7 @@ const isInRightBranchOfStandardLayout = (selectedElement) => {
     return false;
 };
 const insertElementHandleRightNodeCount = (board, path, insertCount, effectedRightNodeCount = []) => {
-    let index = effectedRightNodeCount.findIndex(ref => Path.equals(ref.path, path));
+    let index = effectedRightNodeCount.findIndex((ref) => Path.equals(ref.path, path));
     const mind = PlaitNode.get(board, path);
     if (index === -1) {
         effectedRightNodeCount.push({ path, rightNodeCount: mind.rightNodeCount + insertCount });
@@ -2162,11 +2132,11 @@ const insertElementHandleRightNodeCount = (board, path, insertCount, effectedRig
     return effectedRightNodeCount;
 };
 const deleteElementsHandleRightNodeCount = (board, deletableElements, effectedRightNodeCount = []) => {
-    deletableElements.forEach(element => {
+    deletableElements.forEach((element) => {
         if (isInRightBranchOfStandardLayout(element)) {
             const mind = MindElement.getParent(element);
             const path = PlaitBoard.findPath(board, mind);
-            let index = effectedRightNodeCount.findIndex(ref => Path.equals(ref.path, path));
+            let index = effectedRightNodeCount.findIndex((ref) => Path.equals(ref.path, path));
             if (index === -1) {
                 effectedRightNodeCount.push({ path, rightNodeCount: mind.rightNodeCount - 1 });
             }
@@ -2289,9 +2259,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 = {
@@ -2304,10 +2275,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 {
@@ -2344,7 +2312,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)}`);
         }
@@ -2493,8 +2461,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
     });
@@ -2505,34 +2472,22 @@ const insertAbstractNode = (board, path, start, end) => {
     addSelectedElement(board, mindElement);
 };
 
-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) => {
@@ -2632,26 +2587,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);
 };
@@ -2708,7 +2653,6 @@ const MindTransforms = {
     setBranchWidth,
     setBranchColor,
     setTopic,
-    setTopicSize,
     setNodeManualWidth,
     addEmoji,
     removeEmoji,
@@ -2907,7 +2851,7 @@ const getMoreStartAndEnd = (board, element, linkLineDirection) => {
     // underline shape and horizontal
     const layout = MindQueries.getLayoutByElement(element);
     const isHorizontal = isHorizontalLayout(layout);
-    if (isHorizontal && isUnderlineShape && !element.isRoot) {
+    if (isHorizontal && isUnderlineShape && !PlaitMind.isMind(element)) {
         placement[1] = VerticalPlacement.bottom;
     }
     let startPoint = getPointByPlacement(nodeClient, placement);
@@ -2954,14 +2898,7 @@ 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: () => {
                 return NodeSpace.getTopicMaxDynamicWidth(this.board, this.element);
@@ -3074,8 +3011,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();
     }
@@ -3104,7 +3041,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);
         });
     }
 }
@@ -3134,7 +3071,7 @@ const withNodeDnd = (board) => {
             MindElement.isMindElement(board, hitElement) &&
             !PlaitMind.isMind(hitElement) &&
             !AbstractNode.isAbstract(hitElement)) {
-            const targetElements = selectedElements.filter(element => MindElement.isMindElement(board, element) && !element.isRoot && !AbstractNode.isAbstract(element));
+            const targetElements = selectedElements.filter((element) => MindElement.isMindElement(board, element) && !PlaitMind.isMind(element) && !AbstractNode.isAbstract(element));
             const isMultipleSelection = selectedElements.length > 0 && selectedElements.includes(hitElement);
             if (isMultipleSelection) {
                 activeElements = targetElements;
@@ -3170,10 +3107,10 @@ const withNodeDnd = (board) => {
             const offsetY = endPoint[1] - startPoint[1];
             dragFakeNodeG?.remove();
             dragFakeNodeG = createG();
-            [...activeElements, ...correspondingElements].forEach(element => {
+            [...activeElements, ...correspondingElements].forEach((element) => {
                 addActiveOnDragOrigin(element);
             });
-            activeElements.forEach(element => {
+            activeElements.forEach((element) => {
                 const nodeG = drawFakeDragNode(board, element, offsetX, offsetY);
                 dragFakeNodeG?.appendChild(nodeG);
             });
@@ -3187,7 +3124,7 @@ const withNodeDnd = (board) => {
         if (!board.options.readonly && firstLevelElements.length) {
             firstLevelElements.push(...correspondingElements);
             if (isDragging(board)) {
-                firstLevelElements.forEach(element => {
+                firstLevelElements.forEach((element) => {
                     removeActiveOnDragOrigin(element);
                 });
             }
@@ -3197,8 +3134,8 @@ const withNodeDnd = (board) => {
                 const targetElementPathRef = board.pathRef(PlaitBoard.findPath(board, dropTarget.target));
                 let abstractRefs = getValidAbstractRefs(board, firstLevelElements);
                 const normalElements = firstLevelElements
-                    .filter(element => !abstractRefs.some(refs => refs.abstract === element))
-                    .map(element => {
+                    .filter((element) => !abstractRefs.some((refs) => refs.abstract === element))
+                    .map((element) => {
                     if (AbstractNode.isAbstract(element)) {
                         return adjustAbstractToNode(element);
                     }
@@ -3210,7 +3147,7 @@ const withNodeDnd = (board) => {
                     const correspondingAbstract = getCorrespondingAbstract(previousElement);
                     const targetHasCorrespondAbstract = correspondingAbstract && correspondingAbstract.end !== targetPath[targetPath.length - 1] - 1;
                     if (targetHasCorrespondAbstract) {
-                        const adjustedNode = abstractRefs.map(ref => {
+                        const adjustedNode = abstractRefs.map((ref) => {
                             return adjustAbstractToNode(ref.abstract);
                         });
                         normalElements.push(...adjustedNode);
@@ -3255,8 +3192,8 @@ const withNodeDnd = (board) => {
                 targetElementPathRef.unref();
                 targetPathRef.unref();
                 let setActiveElements = [];
-                depthFirstRecursion(board, node => {
-                    const isSelected = activeElements.some(element => element.id === node.id);
+                depthFirstRecursion(board, (node) => {
+                    const isSelected = activeElements.some((element) => element.id === node.id);
                     if (isSelected) {
                         setActiveElements.push(node);
                     }
@@ -3825,9 +3762,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) => {
@@ -3953,11 +3888,8 @@ const insertClipboardData = (board, elements, targetPoint, operationType) => {
     elements.forEach((item, index) => {
         newElement = copyNewNode(item);
         if (hasTargetParent && operationType !== WritableClipboardOperationType.duplicate) {
-            if (item.isRoot) {
+            if (PlaitMind.isMind(item)) {
                 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)) {
@@ -3972,11 +3904,8 @@ const insertClipboardData = (board, elements, targetPoint, operationType) => {
             if (AbstractNode.isAbstract(item)) {
                 newElement = adjustAbstractToNode(newElement);
             }
-            if (!item.isRoot) {
+            if (!PlaitMind.isMind(item)) {
                 newElement = adjustNodeToRoot(board, newElement);
-                const { width, height } = getTopicSizeByElement(board, newElement);
-                newElement.width = width;
-                newElement.height = height;
             }
             path = [board.children.length];
         }
@@ -3987,14 +3916,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;
@@ -4101,12 +4026,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: [
@@ -4125,14 +4044,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;
@@ -4143,9 +4054,6 @@ const withMind = (baseBoard) => {
                 if (!isNormalizedData(node)) {
                     fixMindElementData(node);
                 }
-                if (!isNormalizedWidthAndHeight(node)) {
-                    fixMindElementWidthAndHeight(node);
-                }
             });
         }
         normalizeElement(context);
@@ -4177,13 +4085,13 @@ const withMind = (baseBoard) => {
         return getRectangle(element);
     };
     board.canAddToGroup = (element) => {
-        if (MindElement.isMindElement(board, element) && !element.isRoot) {
+        if (MindElement.isMindElement(board, element) && !PlaitMind.isMind(element)) {
             return false;
         }
         return canAddToGroup(element);
     };
     board.canSetZIndex = (element) => {
-        if (MindElement.isMindElement(board, element) && !element.isRoot) {
+        if (MindElement.isMindElement(board, element) && !PlaitMind.isMind(element)) {
             return false;
         }
         return canSetZIndex(element);
@@ -4218,7 +4126,7 @@ const withMind = (baseBoard) => {
         return getOneHitElement(elements);
     };
     board.isMovable = (element) => {
-        if (PlaitMind.isMind(element) && element.isRoot) {
+        if (PlaitMind.isMind(element)) {
             return true;
         }
         return isMovable(element);
@@ -4230,7 +4138,7 @@ const withMind = (baseBoard) => {
         return isImageBindingAllowed(element);
     };
     board.isAlign = (element) => {
-        if (PlaitMind.isMind(element) && element.isRoot) {
+        if (PlaitMind.isMind(element)) {
             return true;
         }
         return isAlign(element);
@@ -4278,5 +4186,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, normalizeWidthAndHeight, removeActiveOnDragOrigin, removeImageFocus, separateChildren, setMindDragging, withEmoji, withMind, withMindExtend };
+export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, ABSTRACT_NODE_TEXT, AbstractHandlePosition, AbstractResizeState, BASE, BranchShape, DEFAULT_MIND_IMAGE_WIDTH, DefaultAbstractNodeStyle, DefaultNodeStyle, GRAY_COLOR, INHERIT_ATTRIBUTE_KEYS, LayoutDirection, LayoutDirectionsMap, MIND_CENTRAL_TEXT, MIND_ELEMENT_TO_NODE, MindColorfulThemeColor, MindDarkThemeColor, MindDefaultThemeColor, MindElement, MindElementShape, MindEmojiBaseComponent, MindI18nKey, MindNode, MindNodeComponent, MindPointerType, MindQueries, MindRetroThemeColor, MindSoftThemeColor, MindStarryThemeColor, MindThemeColor, MindThemeColors, MindTransforms, NODE_ADD_CIRCLE_COLOR, NODE_ADD_HOVER_COLOR, NODE_ADD_INNER_CROSS_COLOR, NODE_MORE_BRIDGE_DISTANCE, NODE_MORE_ICON_DIAMETER, NODE_MORE_LINE_DISTANCE, NODE_MORE_STROKE_WIDTH, NodeSpace, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, RESIZE_HANDLE_BUFFER_DISTANCE, ROOT_TOPIC_FONT_SIZE, STROKE_WIDTH, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, WithMindPluginKey, addActiveOnDragOrigin, addImageFocus, adjustAbstractToNode, adjustNodeToRoot, adjustRootToNode, canSetAbstract, copyNewNode, correctLayoutByDirection, createEmptyMind, createMindElement, deleteElementHandleAbstract, deleteElementsHandleRightNodeCount, detectDropTarget, directionCorrector, directionDetector, divideElementByParent, drawFakeDragNode, drawFakeDropNode, editTopic, findLastChild, findLocationLeftIndex, findNewChildNodePath, 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