@plait/mind 0.47.0 → 0.49.0

package/fesm2022/plait-mind.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, NgZone, Directive, Input, HostListener } from '@angular/core';
-import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, PlaitElement, PlaitNode, Path, isNullOrUndefined, PlaitBoard, distanceBetweenPointAndRectangle, RectangleClient, getSelectedElements, idCreator, Transforms, clearSelectedElement, addSelectedElement, depthFirstRecursion, getIsRecursionFunc, drawRoundRectangle, drawLinearPath, drawBezierPath, createG, updateForeignObject, getRectangleByElements, NODE_TO_PARENT, createForeignObject, removeSelectedElement, PlaitHistoryBoard, setStrokeLinecap, ACTIVE_STROKE_WIDTH, createText, PlaitPointerType, NODE_TO_INDEX, PlaitChildrenElementComponent, isMainPointer, transformPoint, toPoint, getHitElementByPoint, distanceBetweenPointAndPoint, CoreTransforms, BOARD_TO_HOST, BoardTransforms, throttleRAF, temporaryDisableSelection, hotkeys, setClipboardDataByMedia, getClipboardDataByMedia, ResizeCursorClass, setClipboardData, setClipboardDataByText, getDataFromClipboard, PlaitPluginKey } from '@plait/core';
+import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, PlaitElement, PlaitNode, Path, isNullOrUndefined, PlaitBoard, getSelectedElements, idCreator, Transforms, clearSelectedElement, addSelectedElement, distanceBetweenPointAndRectangle, RectangleClient, depthFirstRecursion, getIsRecursionFunc, drawRoundRectangle, drawLinearPath, drawBezierPath, createG, updateForeignObject, getRectangleByElements, NODE_TO_PARENT, createForeignObject, removeSelectedElement, PlaitHistoryBoard, setStrokeLinecap, ACTIVE_STROKE_WIDTH, createText, PlaitPointerType, NODE_TO_INDEX, PlaitChildrenElementComponent, isMainPointer, toViewBoxPoint, toHostPoint, getHitElementByPoint, distanceBetweenPointAndPoint, CoreTransforms, BOARD_TO_HOST, BoardTransforms, throttleRAF, temporaryDisableSelection, hotkeys, setClipboardDataByMedia, getClipboardDataByMedia, ResizeCursorClass, setClipboardData, setClipboardDataByText, getDataFromClipboard, PlaitPluginKey } from '@plait/core';
 import { MindLayoutType, AbstractNode, isIndentedLayout, isHorizontalLayout, isHorizontalLogicLayout, ConnectingPosition, getNonAbstractChildren, isStandardLayout, isLeftLayout, isRightLayout, isVerticalLogicLayout, isTopLayout, isBottomLayout, getCorrectStartEnd, getAbstractLayout, GlobalLayout } from '@plait/layouts';
-import { PlaitMarkEditor, MarkTypes, DEFAULT_FONT_SIZE, TEXT_DEFAULT_HEIGHT, buildText, getTextSize, TextManage, ExitOrigin, getTextFromClipboard } from '@plait/text';
+import { TEXT_DEFAULT_HEIGHT, buildText, PlaitMarkEditor, MarkTypes, DEFAULT_FONT_SIZE, getTextSize, TextManage, ExitOrigin, getTextFromClipboard } from '@plait/text';
 import { fromEvent, Subject } from 'rxjs';
-import { getFirstTextEditor, RESIZE_HANDLE_DIAMETER, getRectangleResizeHandleRefs, addElementOfFocusedImage, removeElementOfFocusedImage, getFirstTextManage, Generator, CommonPluginElement, ImageGenerator, WithTextPluginKey, isDrawingMode, isDndMode, setCreationMode, BoardCreationMode, isExpandHotkey, isTabHotkey, isEnterHotkey, isVirtualKey, isDelete, isSpaceHotkey, getElementOfFocusedImage, MediaKeys, acceptImageTypes, buildImage, withResize, ResizeHandle } from '@plait/common';
+import { getFirstTextEditor, RESIZE_HANDLE_DIAMETER, getRectangleResizeHandleRefs, addElementOfFocusedImage, removeElementOfFocusedImage, getFirstTextManage, PropertyTransforms, Generator, CommonPluginElement, ImageGenerator, WithTextPluginKey, isDrawingMode, isDndMode, setCreationMode, BoardCreationMode, isExpandHotkey, isTabHotkey, isEnterHotkey, isVirtualKey, isDelete, isSpaceHotkey, getElementOfFocusedImage, MediaKeys, acceptImageTypes, buildImage, withResize, ResizeHandle } from '@plait/common';
 import { Node as Node$1, Path as Path$1 } from 'slate';
 import { pointsOnBezierCurves } from 'points-on-curve';
 import { take, filter } from 'rxjs/operators';
@@ -208,18 +208,6 @@ function getEmojiFontSize(element) {
     }
 }
 
-const TOPIC_COLOR = '#333';
-const TOPIC_FONT_SIZE = 14;
-const ROOT_TOPIC_FONT_SIZE = 18;
-const ROOT_TOPIC_HEIGHT = 25;
-const ROOT_TOPIC_WIDTH = 72;
-const TOPIC_DEFAULT_MAX_WORD_COUNT = 34;
-const DEFAULT_FONT_FAMILY = 'PingFangSC-Regular, "PingFang SC"';
-const BRANCH_FONT_FAMILY = 'PingFangSC-Medium, "PingFang SC"';
-const NodeTopicThreshold = {
-    defaultTextMaxWidth: 34 * 14
-};
-
 const getAvailableProperty = (board, element, propertyKey) => {
     return element[propertyKey];
 };
@@ -337,7 +325,7 @@ function getRelativeStartEndByAbstractRef(abstractRef, elements) {
     return { start, end };
 }
 const insertElementHandleAbstract = (board, path, step = 1, 
-//由此区分拖拽和新增到概要概括最后一个节点
+// This distinguishes between dragging and adding to the last node summarized in the abstract node
 isExtendPreviousNode = true, effectedAbstracts = new Map()) => {
     const parent = PlaitNode.parent(board, path);
     const hasPreviousNode = path[path.length - 1] !== 0;
@@ -491,240 +479,6 @@ const getShapeByElement = (board, element) => {
     return shape || MindElementShape.roundRectangle;
 };
 
-const NodeDefaultSpace = {
-    horizontal: {
-        nodeAndText: BASE * 2.5,
-        emojiAndText: BASE * 1.5
-    },
-    vertical: {
-        nodeAndText: BASE,
-        nodeAndImage: BASE,
-        imageAndText: BASE * 1.5
-    }
-};
-const RootDefaultSpace = {
-    horizontal: {
-        nodeAndText: BASE * 4,
-        emojiAndText: BASE * 2
-    },
-    vertical: {
-        nodeAndText: BASE * 2
-    }
-};
-const getHorizontalSpaceBetweenNodeAndText = (board, element) => {
-    const isMind = PlaitMind.isMind(element);
-    const nodeAndText = isMind ? RootDefaultSpace.horizontal.nodeAndText : NodeDefaultSpace.horizontal.nodeAndText;
-    const strokeWidth = getStrokeWidthByElement(board, element);
-    return nodeAndText + strokeWidth;
-};
-const getVerticalSpaceBetweenNodeAndText = (board, element) => {
-    const isMind = PlaitMind.isMind(element);
-    const strokeWidth = getStrokeWidthByElement(board, element);
-    const nodeAndText = isMind ? RootDefaultSpace.vertical.nodeAndText : NodeDefaultSpace.vertical.nodeAndText;
-    return nodeAndText + strokeWidth;
-};
-const getSpaceEmojiAndText = (element) => {
-    const isMind = PlaitMind.isMind(element);
-    const emojiAndText = isMind ? RootDefaultSpace.horizontal.emojiAndText : NodeDefaultSpace.horizontal.emojiAndText;
-    return emojiAndText;
-};
-const NodeSpace = {
-    getNodeWidth(board, element) {
-        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
-        if (MindElement.hasEmojis(element)) {
-            return (NodeSpace.getEmojiLeftSpace(board, element) +
-                getEmojisWidthHeight(board, element).width +
-                getSpaceEmojiAndText(element) +
-                NodeSpace.getNodeDynamicWidth(board, element) +
-                nodeAndText);
-        }
-        return nodeAndText + NodeSpace.getNodeDynamicWidth(board, element) + nodeAndText;
-    },
-    getNodeHeight(board, element) {
-        const nodeAndText = getVerticalSpaceBetweenNodeAndText(board, element);
-        if (MindElement.hasImage(element)) {
-            return NodeSpace.getTextTopSpace(board, element) + element.height + nodeAndText;
-        }
-        return nodeAndText + element.height + nodeAndText;
-    },
-    getNodeDynamicWidth(board, element) {
-        const width = element.manualWidth || element.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);
-    },
-    getNodeResizableMinWidth(board, element) {
-        const minTopicWidth = NodeSpace.getNodeTopicMinWidth(board, element);
-        if (MindElement.hasImage(element) && element.data.image.width > minTopicWidth) {
-            return element.data.image.width;
-        }
-        else {
-            return minTopicWidth;
-        }
-    },
-    getNodeTopicMinWidth(board, element, isRoot = false) {
-        const defaultFontSize = getNodeDefaultFontSize(isRoot);
-        const editor = getFirstTextEditor(element);
-        const marks = PlaitMarkEditor.getMarks(editor);
-        const fontSize = marks[MarkTypes.fontSize] || defaultFontSize;
-        return fontSize;
-    },
-    getTextLeftSpace(board, element) {
-        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
-        if (MindElement.hasEmojis(element)) {
-            return NodeSpace.getEmojiLeftSpace(board, element) + getEmojisWidthHeight(board, element).width + getSpaceEmojiAndText(element);
-        }
-        else {
-            return nodeAndText;
-        }
-    },
-    getTextTopSpace(board, element) {
-        const nodeAndText = getVerticalSpaceBetweenNodeAndText(board, element);
-        if (MindElement.hasImage(element)) {
-            return NodeSpace.getImageTopSpace(board, element) + element.data.image.height + NodeDefaultSpace.vertical.imageAndText;
-        }
-        else {
-            return nodeAndText;
-        }
-    },
-    getImageTopSpace(board, element) {
-        const strokeWidth = getStrokeWidthByElement(board, element);
-        return strokeWidth + NodeDefaultSpace.vertical.nodeAndImage;
-    },
-    getEmojiLeftSpace(board, element) {
-        const options = board.getPluginOptions(WithMindPluginKey);
-        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
-        return nodeAndText - options.emojiPadding;
-    },
-    getEmojiTopSpace(board, element) {
-        const nodeAndText = getVerticalSpaceBetweenNodeAndText(board, element);
-        return nodeAndText;
-    }
-};
-const getFontSizeBySlateElement = (text) => {
-    const defaultFontSize = DEFAULT_FONT_SIZE;
-    if (typeof text === 'string') {
-        return defaultFontSize;
-    }
-    const marks = PlaitMarkEditor.getMarksByElement(text);
-    const fontSize = marks[MarkTypes.fontSize] || defaultFontSize;
-    return fontSize;
-};
-const getNodeDefaultFontSize = (isRoot = false) => {
-    const defaultFontSize = isRoot ? ROOT_TOPIC_FONT_SIZE : DEFAULT_FONT_SIZE;
-    return defaultFontSize;
-};
-
-function getRectangleByNode(node) {
-    const x = node.x + node.hGap;
-    let y = node.y + node.vGap;
-    const width = node.width - node.hGap * 2;
-    const height = node.height - node.vGap * 2;
-    return {
-        x,
-        y,
-        width,
-        height
-    };
-}
-function getRectangleByElement(board, element) {
-    const width = NodeSpace.getNodeWidth(board, element);
-    const height = NodeSpace.getNodeHeight(board, element);
-    const nodeRectangle = {
-        x: element.points[0][0],
-        y: element.points[0][1],
-        width,
-        height
-    };
-    return nodeRectangle;
-}
-function isHitMindElement(board, point, element) {
-    const node = MindElement.getNode(element);
-    if (node && distanceBetweenPointAndRectangle(point[0], point[1], getRectangleByNode(node)) === 0) {
-        return true;
-    }
-    else {
-        return false;
-    }
-}
-
-function getEmojiRectangle(board, element) {
-    let { x, y } = getRectangleByNode(MindElement.getNode(element));
-    x = x + NodeSpace.getEmojiLeftSpace(board, element);
-    const { width, height } = getEmojisWidthHeight(board, element);
-    return {
-        x,
-        y,
-        width,
-        height
-    };
-}
-function getEmojiForeignRectangle(board, element) {
-    let { x, y } = getRectangleByNode(MindElement.getNode(element));
-    x = x + NodeSpace.getEmojiLeftSpace(board, element);
-    const { width } = getEmojisWidthHeight(board, element);
-    return {
-        x,
-        y,
-        width,
-        height: NodeSpace.getNodeHeight(board, element)
-    };
-}
-const isHitEmojis = (board, element, point) => {
-    return RectangleClient.isHit(RectangleClient.toRectangleClient([point, point]), getEmojiRectangle(board, element));
-};
-
-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);
-    return { height, width, x, y };
-}
-
-function getImageForeignRectangle(board, element) {
-    let { x, y } = getRectangleByNode(MindElement.getNode(element));
-    const elementWidth = element.manualWidth || element.width;
-    x =
-        elementWidth > element.data.image.width
-            ? x + NodeSpace.getTextLeftSpace(board, element) + (elementWidth - element.data.image.width) / 2
-            : x + NodeSpace.getTextLeftSpace(board, element);
-    y = NodeSpace.getImageTopSpace(board, element) + y;
-    const { width, height } = element.data.image;
-    const rectangle = {
-        x,
-        y,
-        width,
-        height
-    };
-    return rectangle;
-}
-const isHitImage = (board, element, point) => {
-    const imageRectangle = getImageForeignRectangle(board, element);
-    const imageOutlineRectangle = RectangleClient.getOutlineRectangle(imageRectangle, -RESIZE_HANDLE_DIAMETER / 2);
-    return RectangleClient.isPointInRectangle(imageOutlineRectangle, point);
-};
-const getHitImageResizeHandleDirection = (board, element, point) => {
-    const imageRectangle = getImageForeignRectangle(board, element);
-    const resizeHandleRefs = getRectangleResizeHandleRefs(imageRectangle, RESIZE_HANDLE_DIAMETER);
-    const result = resizeHandleRefs.find(resizeHandleRef => {
-        return RectangleClient.isHit(RectangleClient.toRectangleClient([point, point]), resizeHandleRef.rectangle);
-    });
-    return result;
-};
-
 function editTopic(element) {
     const component = PlaitElement.getComponent(element);
     component?.editTopic();
@@ -734,6 +488,18 @@ const getSelectedMindElements = (board) => {
     return selectedElements;
 };
 
+const TOPIC_COLOR = '#333';
+const TOPIC_FONT_SIZE = 14;
+const ROOT_TOPIC_FONT_SIZE = 18;
+const ROOT_TOPIC_HEIGHT = 25;
+const ROOT_TOPIC_WIDTH = 72;
+const TOPIC_DEFAULT_MAX_WORD_COUNT = 34;
+const DEFAULT_FONT_FAMILY = 'PingFangSC-Regular, "PingFang SC"';
+const BRANCH_FONT_FAMILY = 'PingFangSC-Medium, "PingFang SC"';
+const NodeTopicThreshold = {
+    defaultTextMaxWidth: 34 * 14
+};
+
 const getBranchDirectionsByLayouts = (branchLayouts) => {
     const branchDirections = [];
     branchLayouts.forEach(l => {
@@ -907,142 +673,381 @@ const createEmptyMind = (board, point) => {
     element.type = 'mindmap';
     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 createDefaultMind = (point, rightNodeCount, layout) => {
-    const root = createMindElement('思维导图', ROOT_TOPIC_WIDTH, ROOT_TOPIC_HEIGHT, { layout });
-    root.rightNodeCount = rightNodeCount;
-    root.isRoot = true;
-    root.type = 'mindmap';
-    root.points = [point];
-    const children = [1, 1, 1].map(() => {
-        return createMindElement('新建节点', 56, TEXT_DEFAULT_HEIGHT, {});
-    });
-    root.children = children;
-    return root;
-};
-const createMindElement = (text, width, height, options) => {
-    const newElement = {
-        id: idCreator(),
-        data: {
-            topic: buildText(text)
-        },
-        children: [],
+    element.points = [[point[0] - width / 2, point[1] - height / 2]];
+    return element;
+};
+const createDefaultMind = (point, rightNodeCount, layout) => {
+    const root = createMindElement('思维导图', ROOT_TOPIC_WIDTH, ROOT_TOPIC_HEIGHT, { layout });
+    root.rightNodeCount = rightNodeCount;
+    root.isRoot = true;
+    root.type = 'mindmap';
+    root.points = [point];
+    const children = [1, 1, 1].map(() => {
+        return createMindElement('新建节点', 56, TEXT_DEFAULT_HEIGHT, {});
+    });
+    root.children = children;
+    return root;
+};
+const createMindElement = (text, width, height, options) => {
+    const newElement = {
+        id: idCreator(),
+        data: {
+            topic: buildText(text)
+        },
+        children: [],
+        width,
+        height
+    };
+    let key;
+    for (key in options) {
+        if (!isNullOrUndefined(options[key])) {
+            newElement[key] = options[key];
+        }
+    }
+    return newElement;
+};
+const INHERIT_ATTRIBUTE_KEYS = [
+    'fill',
+    'strokeColor',
+    'strokeWidth',
+    'shape',
+    'layout',
+    'branchColor',
+    'branchWidth',
+    'branchShape'
+];
+
+const getChildrenCount = (element) => {
+    const count = element.children.reduce((p, c) => {
+        return p + getChildrenCount(c);
+    }, 0);
+    return count + element.children.length;
+};
+const isChildElement = (origin, child) => {
+    let parent = MindElement.findParent(child);
+    while (parent) {
+        if (parent === origin) {
+            return true;
+        }
+        parent = MindElement.findParent(parent);
+    }
+    return false;
+};
+const getFirstLevelElement = (elements) => {
+    let result = [];
+    elements.forEach(element => {
+        const isChild = elements.some(node => {
+            return isChildElement(node, element);
+        });
+        if (!isChild) {
+            result.push(element);
+        }
+    });
+    return result;
+};
+const isChildRight = (node, child) => {
+    return node.x < child.x;
+};
+const isChildUp = (node, child) => {
+    return node.y > child.y;
+};
+const copyNewNode = (node) => {
+    const newNode = { ...node };
+    newNode.id = idCreator();
+    newNode.children = [];
+    for (const childNode of node.children) {
+        newNode.children.push(copyNewNode(childNode));
+    }
+    return newNode;
+};
+const extractNodesText = (node) => {
+    let str = '';
+    if (node) {
+        str += Node$1.string(node.data.topic) + ' ';
+        for (const childNode of node.children) {
+            str += extractNodesText(childNode);
+        }
+    }
+    return str;
+};
+const insertMindElement = (board, inheritNode, path) => {
+    const newNode = {};
+    if (!inheritNode.isRoot) {
+        INHERIT_ATTRIBUTE_KEYS.forEach(attr => {
+            newNode[attr] = inheritNode[attr];
+        });
+        delete newNode.layout;
+    }
+    const newElement = createMindElement('', TOPIC_FONT_SIZE, TEXT_DEFAULT_HEIGHT, newNode);
+    Transforms.insertNode(board, newElement, path);
+    clearSelectedElement(board);
+    addSelectedElement(board, newElement);
+    setTimeout(() => {
+        editTopic(newElement);
+    });
+};
+const findLastChild = (child) => {
+    let result = child;
+    while (result.children.length !== 0) {
+        result = result.children[result.children.length - 1];
+    }
+    return result;
+};
+const divideElementByParent = (elements) => {
+    const abstractIncludedGroups = [];
+    const parentElements = [];
+    for (let i = 0; i < elements.length; i++) {
+        const parent = MindElement.getParent(elements[i]);
+        const parentIndex = parentElements.indexOf(parent);
+        if (parentIndex === -1) {
+            parentElements.push(parent);
+            abstractIncludedGroups.push([elements[i]]);
+        }
+        else {
+            abstractIncludedGroups[parentIndex].push(elements[i]);
+        }
+    }
+    return { parentElements, abstractIncludedGroups };
+};
+const getDefaultMindElementFontSize = (board, element) => {
+    if (PlaitMind.isMind(element)) {
+        return ROOT_TOPIC_FONT_SIZE;
+    }
+    if (MindElement.isMindElement(board, element)) {
+        return TOPIC_FONT_SIZE;
+    }
+    throw new Error('can not find default font-size');
+};
+
+const NodeDefaultSpace = {
+    horizontal: {
+        nodeAndText: BASE * 2.5,
+        emojiAndText: BASE * 1.5
+    },
+    vertical: {
+        nodeAndText: BASE,
+        nodeAndImage: BASE,
+        imageAndText: BASE * 1.5
+    }
+};
+const RootDefaultSpace = {
+    horizontal: {
+        nodeAndText: BASE * 4,
+        emojiAndText: BASE * 2
+    },
+    vertical: {
+        nodeAndText: BASE * 2
+    }
+};
+const getHorizontalSpaceBetweenNodeAndText = (board, element) => {
+    const isMind = PlaitMind.isMind(element);
+    const nodeAndText = isMind ? RootDefaultSpace.horizontal.nodeAndText : NodeDefaultSpace.horizontal.nodeAndText;
+    const strokeWidth = getStrokeWidthByElement(board, element);
+    return nodeAndText + strokeWidth;
+};
+const getVerticalSpaceBetweenNodeAndText = (board, element) => {
+    const isMind = PlaitMind.isMind(element);
+    const strokeWidth = getStrokeWidthByElement(board, element);
+    const nodeAndText = isMind ? RootDefaultSpace.vertical.nodeAndText : NodeDefaultSpace.vertical.nodeAndText;
+    return nodeAndText + strokeWidth;
+};
+const getSpaceEmojiAndText = (element) => {
+    const isMind = PlaitMind.isMind(element);
+    const emojiAndText = isMind ? RootDefaultSpace.horizontal.emojiAndText : NodeDefaultSpace.horizontal.emojiAndText;
+    return emojiAndText;
+};
+const NodeSpace = {
+    getNodeWidth(board, element) {
+        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
+        if (MindElement.hasEmojis(element)) {
+            return (NodeSpace.getEmojiLeftSpace(board, element) +
+                getEmojisWidthHeight(board, element).width +
+                getSpaceEmojiAndText(element) +
+                NodeSpace.getNodeDynamicWidth(board, element) +
+                nodeAndText);
+        }
+        return nodeAndText + NodeSpace.getNodeDynamicWidth(board, element) + nodeAndText;
+    },
+    getNodeHeight(board, element) {
+        const nodeAndText = getVerticalSpaceBetweenNodeAndText(board, element);
+        if (MindElement.hasImage(element)) {
+            return NodeSpace.getTextTopSpace(board, element) + element.height + nodeAndText;
+        }
+        return nodeAndText + element.height + nodeAndText;
+    },
+    getNodeDynamicWidth(board, element) {
+        const width = element.manualWidth || element.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);
+    },
+    getNodeResizableMinWidth(board, element) {
+        const minTopicWidth = NodeSpace.getNodeTopicMinWidth(board, element);
+        if (MindElement.hasImage(element) && element.data.image.width > minTopicWidth) {
+            return element.data.image.width;
+        }
+        else {
+            return minTopicWidth;
+        }
+    },
+    getNodeTopicMinWidth(board, element) {
+        const defaultFontSize = getDefaultMindElementFontSize(board, element);
+        const editor = getFirstTextEditor(element);
+        const marks = PlaitMarkEditor.getMarks(editor);
+        const fontSize = marks[MarkTypes.fontSize] || defaultFontSize;
+        return fontSize;
+    },
+    getTextLeftSpace(board, element) {
+        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
+        if (MindElement.hasEmojis(element)) {
+            return NodeSpace.getEmojiLeftSpace(board, element) + getEmojisWidthHeight(board, element).width + getSpaceEmojiAndText(element);
+        }
+        else {
+            return nodeAndText;
+        }
+    },
+    getTextTopSpace(board, element) {
+        const nodeAndText = getVerticalSpaceBetweenNodeAndText(board, element);
+        if (MindElement.hasImage(element)) {
+            return NodeSpace.getImageTopSpace(board, element) + element.data.image.height + NodeDefaultSpace.vertical.imageAndText;
+        }
+        else {
+            return nodeAndText;
+        }
+    },
+    getImageTopSpace(board, element) {
+        const strokeWidth = getStrokeWidthByElement(board, element);
+        return strokeWidth + NodeDefaultSpace.vertical.nodeAndImage;
+    },
+    getEmojiLeftSpace(board, element) {
+        const options = board.getPluginOptions(WithMindPluginKey);
+        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
+        return nodeAndText - options.emojiPadding;
+    },
+    getEmojiTopSpace(board, element) {
+        const nodeAndText = getVerticalSpaceBetweenNodeAndText(board, element);
+        return nodeAndText;
+    }
+};
+const getFontSizeBySlateElement = (text) => {
+    const defaultFontSize = DEFAULT_FONT_SIZE;
+    if (typeof text === 'string') {
+        return defaultFontSize;
+    }
+    const marks = PlaitMarkEditor.getMarksByElement(text);
+    const fontSize = marks[MarkTypes.fontSize] || defaultFontSize;
+    return fontSize;
+};
+
+function getRectangleByNode(node) {
+    const x = node.x + node.hGap;
+    let y = node.y + node.vGap;
+    const width = node.width - node.hGap * 2;
+    const height = node.height - node.vGap * 2;
+    return {
+        x,
+        y,
+        width,
+        height
+    };
+}
+function getRectangleByElement(board, element) {
+    const width = NodeSpace.getNodeWidth(board, element);
+    const height = NodeSpace.getNodeHeight(board, element);
+    const nodeRectangle = {
+        x: element.points[0][0],
+        y: element.points[0][1],
         width,
         height
     };
-    let key;
-    for (key in options) {
-        if (!isNullOrUndefined(options[key])) {
-            newElement[key] = options[key];
-        }
+    return nodeRectangle;
+}
+function isHitMindElement(board, point, element) {
+    const node = MindElement.getNode(element);
+    if (node && distanceBetweenPointAndRectangle(point[0], point[1], getRectangleByNode(node)) === 0) {
+        return true;
     }
-    return newElement;
-};
-const INHERIT_ATTRIBUTE_KEYS = [
-    'fill',
-    'strokeColor',
-    'strokeWidth',
-    'shape',
-    'layout',
-    'branchColor',
-    'branchWidth',
-    'branchShape'
-];
-
-const getChildrenCount = (element) => {
-    const count = element.children.reduce((p, c) => {
-        return p + getChildrenCount(c);
-    }, 0);
-    return count + element.children.length;
-};
-const isChildElement = (origin, child) => {
-    let parent = MindElement.findParent(child);
-    while (parent) {
-        if (parent === origin) {
-            return true;
-        }
-        parent = MindElement.findParent(parent);
+    else {
+        return false;
     }
-    return false;
+}
+
+function getEmojiRectangle(board, element) {
+    let { x, y } = getRectangleByNode(MindElement.getNode(element));
+    x = x + NodeSpace.getEmojiLeftSpace(board, element);
+    const { width, height } = getEmojisWidthHeight(board, element);
+    return {
+        x,
+        y,
+        width,
+        height
+    };
+}
+function getEmojiForeignRectangle(board, element) {
+    let { x, y } = getRectangleByNode(MindElement.getNode(element));
+    x = x + NodeSpace.getEmojiLeftSpace(board, element);
+    const { width } = getEmojisWidthHeight(board, element);
+    return {
+        x,
+        y,
+        width,
+        height: NodeSpace.getNodeHeight(board, element)
+    };
+}
+const isHitEmojis = (board, element, point) => {
+    return RectangleClient.isHit(RectangleClient.toRectangleClient([point, point]), getEmojiRectangle(board, element));
 };
-const getFirstLevelElement = (elements) => {
-    let result = [];
-    elements.forEach(element => {
-        const isChild = elements.some(node => {
-            return isChildElement(node, element);
-        });
-        if (!isChild) {
-            result.push(element);
-        }
-    });
+
+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);
+    return { height, width, x, y };
+}
+
+function getImageForeignRectangle(board, element) {
+    let { x, y } = getRectangleByNode(MindElement.getNode(element));
+    const elementWidth = element.manualWidth || element.width;
+    x =
+        elementWidth > element.data.image.width
+            ? x + NodeSpace.getTextLeftSpace(board, element) + (elementWidth - element.data.image.width) / 2
+            : x + NodeSpace.getTextLeftSpace(board, element);
+    y = NodeSpace.getImageTopSpace(board, element) + y;
+    const { width, height } = element.data.image;
+    const rectangle = {
+        x,
+        y,
+        width,
+        height
+    };
+    return rectangle;
+}
+const isHitImage = (board, element, point) => {
+    const imageRectangle = getImageForeignRectangle(board, element);
+    const imageOutlineRectangle = RectangleClient.getOutlineRectangle(imageRectangle, -RESIZE_HANDLE_DIAMETER / 2);
+    return RectangleClient.isPointInRectangle(imageOutlineRectangle, point);
 };
-const isChildRight = (node, child) => {
-    return node.x < child.x;
-};
-const isChildUp = (node, child) => {
-    return node.y > child.y;
-};
-const copyNewNode = (node) => {
-    const newNode = { ...node };
-    newNode.id = idCreator();
-    newNode.children = [];
-    for (const childNode of node.children) {
-        newNode.children.push(copyNewNode(childNode));
-    }
-    return newNode;
-};
-const extractNodesText = (node) => {
-    let str = '';
-    if (node) {
-        str += Node$1.string(node.data.topic) + ' ';
-        for (const childNode of node.children) {
-            str += extractNodesText(childNode);
-        }
-    }
-    return str;
-};
-const insertMindElement = (board, inheritNode, path) => {
-    const newNode = {};
-    if (!inheritNode.isRoot) {
-        INHERIT_ATTRIBUTE_KEYS.forEach(attr => {
-            newNode[attr] = inheritNode[attr];
-        });
-        delete newNode.layout;
-    }
-    const newElement = createMindElement('', getNodeDefaultFontSize(), TEXT_DEFAULT_HEIGHT, newNode);
-    Transforms.insertNode(board, newElement, path);
-    clearSelectedElement(board);
-    addSelectedElement(board, newElement);
-    setTimeout(() => {
-        editTopic(newElement);
+const getHitImageResizeHandleDirection = (board, element, point) => {
+    const imageRectangle = getImageForeignRectangle(board, element);
+    const resizeHandleRefs = getRectangleResizeHandleRefs(imageRectangle, RESIZE_HANDLE_DIAMETER);
+    const result = resizeHandleRefs.find(resizeHandleRef => {
+        return RectangleClient.isHit(RectangleClient.toRectangleClient([point, point]), resizeHandleRef.rectangle);
     });
-};
-const findLastChild = (child) => {
-    let result = child;
-    while (result.children.length !== 0) {
-        result = result.children[result.children.length - 1];
-    }
     return result;
 };
-const divideElementByParent = (elements) => {
-    const abstractIncludedGroups = [];
-    const parentElements = [];
-    for (let i = 0; i < elements.length; i++) {
-        const parent = MindElement.getParent(elements[i]);
-        const parentIndex = parentElements.indexOf(parent);
-        if (parentIndex === -1) {
-            parentElements.push(parent);
-            abstractIncludedGroups.push([elements[i]]);
-        }
-        else {
-            abstractIncludedGroups[parentIndex].push(elements[i]);
-        }
-    }
-    return { parentElements, abstractIncludedGroups };
-};
 
 const adjustRootToNode = (board, node) => {
     const newNode = { ...node };
@@ -1075,7 +1080,7 @@ const adjustNodeToRoot = (board, node) => {
         fontFamily: BRANCH_FONT_FAMILY,
         width: node.manualWidth ? node.manualWidth : undefined
     });
-    newElement.width = Math.max(width, getNodeDefaultFontSize(true));
+    newElement.width = Math.max(width, ROOT_TOPIC_FONT_SIZE);
     newElement.height = height;
     return {
         ...newElement,
@@ -1256,7 +1261,7 @@ const directionDetector = (targetNode, centerPoint) => {
     const left = targetNode.x;
     const right = targetNode.x + targetNode.width;
     const direction = [];
-    // x 轴
+    // x-axis
     if (centerPoint[1] > y && centerPoint[1] < y + height) {
         if (centerPoint[0] > left && centerPoint[0] < xCenter) {
             direction.push('left');
@@ -1264,7 +1269,7 @@ const directionDetector = (targetNode, centerPoint) => {
         if (centerPoint[0] > xCenter && centerPoint[0] < right) {
             direction.push('right');
         }
-        // 重合区域，返回两个方向
+        // Overlapping area, return in both directions
         if ((centerPoint[0] > x && centerPoint[0] < xCenter) || (centerPoint[0] > xCenter && centerPoint[0] < x + width)) {
             if (centerPoint[1] < yCenter) {
                 direction.push('top');
@@ -1275,7 +1280,7 @@ const directionDetector = (targetNode, centerPoint) => {
         }
         return direction.length ? direction : null;
     }
-    // y 轴
+    // y-axis
     if (centerPoint[0] > x && centerPoint[0] < x + width) {
         if (centerPoint[1] > top && centerPoint[1] < yCenter) {
             direction.push('top');
@@ -1304,17 +1309,14 @@ const getPathByDropTarget = (board, dropTarget) => {
         ? getRootLayout(dropTarget?.target)
         : MindQueries.getCorrectLayoutByElement(board, MindElement.getParent(dropTarget?.target));
     const children = getNonAbstractChildren(dropTarget.target);
-    // 上下布局：左右是兄弟节点，上下是子节点
     if (isVerticalLogicLayout(layout)) {
         if (dropTarget.detectResult === 'top' || dropTarget.detectResult === 'bottom') {
             targetPath.push(children.length);
         }
-        // 如果是左，位置不变，右则插入到下一个兄弟节点
         if (dropTarget.detectResult === 'right') {
             targetPath = Path.next(targetPath);
         }
     }
-    // 水平布局/标准布局：上下是兄弟节点，左右是子节点
     if (isHorizontalLogicLayout(layout)) {
         if (dropTarget.detectResult === 'right') {
             if (PlaitMind.isMind(dropTarget?.target) && isStandardLayout(layout)) {
@@ -1327,12 +1329,10 @@ const getPathByDropTarget = (board, dropTarget) => {
         if (dropTarget.detectResult === 'left') {
             targetPath.push(children.length);
         }
-        // 如果是上，位置不变，下插入到下一个兄弟节点
         if (dropTarget.detectResult === 'bottom') {
             targetPath = Path.next(targetPath);
         }
     }
-    // 缩进布局：上下是兄弟节点，左右是子节点，但上（左上/右上），探测到上是子节点，下则位置不变，反之同理。
     if (isIndentedLayout(layout)) {
         if (isTopLayout(layout) && dropTarget.detectResult === 'top') {
             targetPath = Path.next(targetPath);
@@ -1432,16 +1432,16 @@ const getLayoutDirection = (node, isHorizontal) => {
         }
     }
 };
-// 以右为基准
-// 右 -> 左:
-// 1. 终点 -> 起点/起点 -> 终点
-// 2. 加 -> 减
-// 水平 -> 垂直:
-// 1. 起点/终点 -> 纵轴
-// 2. 加减 -> 纵轴
-// 下 -> 上:
-// 1. 终点 -> 起点/终点 -> 起点
-// 2. 加 -> 减
+// Based on right
+// Right -> Left:
+// 1. End point -> starting point/start point -> end point
+// 2. Add -> Subtract
+// Horizontal -> Vertical:
+// 1. Starting point/end point -> vertical axis
+// 2. Addition and subtraction -> vertical axis
+// Bottom -> Top:
+// 1. End point -> starting point/end point -> starting point
+// 2. Add -> Subtract
 const moveXOfPoint = (point, distance, direction = LayoutDirection.right) => {
     if (direction === LayoutDirection.left) {
         return [point[0] - distance, point[1]];
@@ -1515,7 +1515,6 @@ function drawIndentedLink(board, node, child, defaultStroke = null, needDrawUnde
     beginY = isChildUp(node, child) ? beginRectangle.y : beginRectangle.y + beginRectangle.height;
     endX = node.left ? endNode.x + endNode.hGap + endRectangle.width : endNode.x + endNode.hGap;
     endY = isUnderlineShape ? endNode.y + endNode.height - endNode.vGap : endNode.y + endNode.height / 2;
-    //根据位置，设置正负参数
     let plusMinus = isChildUp(node, child) ? (node.left ? [-1, -1] : [1, -1]) : node.left ? [-1, 1] : [1, 1];
     let curve = [
         [beginX, beginY],
@@ -1569,12 +1568,11 @@ function drawLogicLink(board, parent, node, isHorizontal, defaultStroke = null,
     }
     let beginPoint = getPointByPlacement(parentClient, beginPlacement);
     let endPoint = getPointByPlacement(nodeClient, endPlacement);
-    // ② 确定凸出直线，从起始点开始画一条直线，从直线的结束位置绘制曲线，保证收起图标可以完美覆盖起始连线，根节点不需要这条直线
-    // 绘制贝塞尔曲线要求，需要增加三个点，正常两个点就可以确定这条直线
+    // ② Determine the convex straight line
     const straightLineDistance = 8;
     const beginPoint2 = hasStraightLine ? moveXOfPoint(beginPoint, straightLineDistance, linkDirection) : beginPoint;
     let straightLine = hasStraightLine ? [beginPoint, beginPoint2, beginPoint2] : [];
-    // ③ 确定曲线
+    // ③ Determine the curve
     const beginBufferDistance = (parent.hGap + node.hGap) / 3;
     const endBufferDistance = -(parent.hGap + node.hGap) / 2.4;
     let curve = [
@@ -1583,7 +1581,7 @@ function drawLogicLink(board, parent, node, isHorizontal, defaultStroke = null,
         moveXOfPoint(endPoint, endBufferDistance, linkDirection),
         endPoint
     ];
-    // ④ 下划线绘制，underline shape and horizontal
+    // ④ underline shape and horizontal
     const underlineEnd = moveXOfPoint(endPoint, nodeClient.width, linkDirection);
     const underline = hasUnderlineShape && isHorizontal ? [underlineEnd, underlineEnd, underlineEnd] : [];
     const points = pointsOnBezierCurves([...straightLine, ...curve, ...underline]);
@@ -2047,7 +2045,7 @@ const getCorrectLayoutByElement = (board, element) => {
 const getBranchLayouts = (board, element) => {
     const layouts = [];
     if (element.layout) {
-        // TODO: getCorrectLayoutByElement 含有递归操作，getBranchLayouts 本身也有递归操作，有待优化
+        // TODO: getCorrectLayoutByElement Contains recursive operations. getBranchLayouts itself also has recursive operations and needs to be optimized.
         layouts.unshift(getCorrectLayoutByElement(board, element));
     }
     let parent = MindElement.findParent(element);
@@ -2383,33 +2381,8 @@ const insertAbstractNode = (board, path, start, end) => {
     addSelectedElement(board, mindElement);
 };
 
-const setLayout = (board, layout, path) => {
-    correctLogicLayoutNode(board, layout, path);
-    const element = PlaitNode.get(board, path);
-    if (PlaitMind.isMind(element) && isStandardLayout(layout)) {
-        MindTransforms.setAbstractByStandardLayout(board, element);
-    }
-    Transforms.setNode(board, { layout }, path);
-};
-const correctLogicLayoutNode = (board, layout, path) => {
-    const node = PlaitNode.get(board, path);
-    if (node && layout) {
-        node.children?.forEach((value, index) => {
-            if (value.layout) {
-                if ((isHorizontalLogicLayout(layout) && isVerticalLogicLayout(value.layout)) ||
-                    (isVerticalLogicLayout(layout) && isHorizontalLogicLayout(value.layout))) {
-                    Transforms.setNode(board, { layout: null }, [...path, index]);
-                }
-                if (value.children?.length) {
-                    correctLogicLayoutNode(board, layout, [...path, index]);
-                }
-            }
-        });
-    }
-};
-
 const normalizeWidthAndHeight = (board, element, width, height) => {
-    const minWidth = NodeSpace.getNodeTopicMinWidth(board, element, element.isRoot);
+    const minWidth = NodeSpace.getNodeTopicMinWidth(board, element);
     const newWidth = width < minWidth * board.viewport.zoom ? minWidth : width / board.viewport.zoom;
     const newHeight = height / board.viewport.zoom;
     return { width: Math.ceil(newWidth), height: newHeight };
@@ -2561,8 +2534,57 @@ const setImage = (board, element, imageItem) => {
     Transforms.setNode(board, newElement, path);
 };
 
+const correctLogicLayoutNode = (board, layout, path) => {
+    const node = PlaitNode.get(board, path);
+    if (node && layout) {
+        node.children?.forEach((value, index) => {
+            if (value.layout) {
+                if ((isHorizontalLogicLayout(layout) && isVerticalLogicLayout(value.layout)) ||
+                    (isVerticalLogicLayout(layout) && isHorizontalLogicLayout(value.layout))) {
+                    Transforms.setNode(board, { layout: null }, [...path, index]);
+                }
+                if (value.children?.length) {
+                    correctLogicLayoutNode(board, layout, [...path, index]);
+                }
+            }
+        });
+    }
+};
+
+const setLayout = (board, type) => {
+    const callback = (element, path) => {
+        if (MindElement.isMindElement(board, element)) {
+            correctLogicLayoutNode(board, type, path);
+            const element = PlaitNode.get(board, path);
+            if (PlaitMind.isMind(element) && isStandardLayout(type)) {
+                let properties = { rightNodeCount: element.children.length / 2 };
+                Transforms.setNode(board, properties, path);
+                setAbstractByStandardLayout(board, element);
+            }
+            Transforms.setNode(board, { layout: type }, path);
+        }
+    };
+    PropertyTransforms.setProperty(board, {}, { callback });
+};
+const setShape = (board, shape) => {
+    PropertyTransforms.setProperty(board, { shape });
+};
+const setBranchShape = (board, branchShape) => {
+    PropertyTransforms.setProperty(board, { branchShape });
+};
+const setBranchWidth = (board, branchWidth) => {
+    PropertyTransforms.setProperty(board, { branchWidth });
+};
+const setBranchColor = (board, branchColor) => {
+    PropertyTransforms.setProperty(board, { branchColor });
+};
+
 const MindTransforms = {
     setLayout,
+    setShape,
+    setBranchShape,
+    setBranchWidth,
+    setBranchColor,
     setTopic,
     setTopicSize,
     setNodeManualWidth,
@@ -3196,7 +3218,7 @@ const withNodeDnd = (board) => {
             pointerDown(event);
             return;
         }
-        const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+        const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         const selectedElements = getSelectedElements(board);
         const hitElement = getHitElementByPoint(board, point);
         if (hitElement &&
@@ -3224,14 +3246,14 @@ const withNodeDnd = (board) => {
         if (!board.options.readonly && activeElements.length && startPoint) {
             // prevent text from being selected
             event.preventDefault();
-            const endPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            const endPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
             const distance = distanceBetweenPointAndPoint(startPoint[0], startPoint[1], endPoint[0], endPoint[1]);
             if (distance < DRAG_MOVE_BUFFER) {
                 return;
             }
             setIsDragging(board, true);
             fakeDropNodeG?.remove();
-            const detectPoint = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            const detectPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
             dropTarget = detectDropTarget(board, detectPoint, dropTarget, [...activeElements, ...correspondingElements]);
             if (dropTarget?.target) {
                 targetPath = getPathByDropTarget(board, dropTarget);
@@ -3302,7 +3324,7 @@ const withNodeDnd = (board) => {
                 let insertPath = targetPathRef.current;
                 const parentPath = Path.parent(targetPathRef.current || targetPath);
                 if (!insertPath) {
-                    //当插入位置和选中节点位置相同时，使用记录的 previousPath
+                    // When the insertion position and the selected node position are the same, the recorded previousPath is used
                     const previousPath = targetPreviousPathRef && targetPreviousPathRef.unref();
                     if (previousPath) {
                         insertPath = Path.next(previousPath);
@@ -3361,8 +3383,7 @@ const withAbstract = (board) => {
             return;
         }
         const activeAbstractElements = getSelectedElements(board).filter(element => AbstractNode.isAbstract(element));
-        const host = BOARD_TO_HOST.get(board);
-        const point = transformPoint(board, toPoint(event.x, event.y, host));
+        const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         activeAbstractElement = activeAbstractElements.find(element => {
             abstractHandlePosition = getHitAbstractHandle(board, element, point);
             return abstractHandlePosition;
@@ -3379,7 +3400,7 @@ const withAbstract = (board) => {
     board.pointerMove = (event) => {
         getSelectedElements(board);
         const host = BOARD_TO_HOST.get(board);
-        const endPoint = transformPoint(board, toPoint(event.x, event.y, host));
+        const endPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         touchedAbstract = handleTouchedAbstract(board, touchedAbstract, endPoint);
         if (abstractHandlePosition && activeAbstractElement) {
             // prevent text from being selected
@@ -3461,25 +3482,25 @@ const withMindExtend = (board) => {
 const DefaultHotkey = 'm';
 const withCreateMind = (board) => {
     const newBoard = board;
-    const { keydown, mousedown, mousemove, mouseup } = board;
+    const { keydown, pointerDown, pointerMove, pointerUp } = board;
     let fakeCreateNodeRef = null;
     let emptyMind = null;
-    newBoard.mousedown = (event) => {
+    newBoard.pointerDown = (event) => {
         const isMindPointer = PlaitBoard.isPointer(board, MindPointerType.mind);
         let movingPoint = PlaitBoard.getMovingPointInBoard(board);
         if (!PlaitBoard.isReadonly(board) && movingPoint && isDrawingMode(board) && isMindPointer) {
-            movingPoint = transformPoint(board, toPoint(movingPoint[0], movingPoint[1], PlaitBoard.getHost(board)));
+            movingPoint = toViewBoxPoint(board, toHostPoint(board, movingPoint[0], movingPoint[1]));
             const emptyMind = createEmptyMind(newBoard, movingPoint);
             Transforms.insertNode(board, emptyMind, [board.children.length]);
             clearSelectedElement(board);
             addSelectedElement(board, emptyMind);
             BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
         }
-        mousedown(event);
+        pointerDown(event);
     };
-    newBoard.mousemove = (event) => {
+    newBoard.pointerMove = (event) => {
         if (PlaitBoard.isReadonly(board)) {
-            mousemove(event);
+            pointerMove(event);
             return;
         }
         const isMindPointer = PlaitBoard.isPointer(board, MindPointerType.mind);
@@ -3487,7 +3508,7 @@ const withCreateMind = (board) => {
             throttleRAF(() => {
                 let movingPoint = PlaitBoard.getMovingPointInBoard(board);
                 if (movingPoint) {
-                    movingPoint = transformPoint(newBoard, toPoint(movingPoint[0], movingPoint[1], PlaitBoard.getHost(board)));
+                    movingPoint = toViewBoxPoint(newBoard, toHostPoint(board, movingPoint[0], movingPoint[1]));
                     emptyMind = createEmptyMind(newBoard, movingPoint);
                     const nodeRectangle = getRectangleByElement(newBoard, emptyMind);
                     const nodeG = drawRoundRectangleByElement(board, nodeRectangle, emptyMind);
@@ -3526,9 +3547,9 @@ const withCreateMind = (board) => {
         else {
             destroy();
         }
-        mousemove(event);
+        pointerMove(event);
     };
-    newBoard.mouseup = (event) => {
+    newBoard.pointerUp = (event) => {
         if (emptyMind) {
             Transforms.insertNode(board, emptyMind, [board.children.length]);
             clearSelectedElement(board);
@@ -3537,7 +3558,7 @@ const withCreateMind = (board) => {
             emptyMind = null;
         }
         destroy();
-        mouseup(event);
+        pointerUp(event);
     };
     board.keydown = (event) => {
         if (PlaitBoard.isReadonly(board) || getSelectedElements(board).length > 0) {
@@ -3606,7 +3627,7 @@ const withMindHotkey = (baseBoard) => {
 
 const mouseMoveHandle = (board, event, nodeHoveredExtendRef) => {
     let target = null;
-    const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+    const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
     depthFirstRecursion(board, element => {
         if (target) {
             return;
@@ -3681,7 +3702,7 @@ const withNodeImage = (board) => {
             pointerDown(event);
             return;
         }
-        const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+        const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         const hitElement = getHitElementByPoint(board, point);
         const isHitImageResult = hitElement &&
             MindElement.isMindElement(board, hitElement) &&
@@ -3936,7 +3957,7 @@ const insertClipboardData = (board, elements, targetPoint) => {
                     ...styles,
                     width: newElement.manualWidth ? newElement.manualWidth : undefined
                 });
-                newElement.width = Math.max(width, getNodeDefaultFontSize());
+                newElement.width = Math.max(width, ROOT_TOPIC_FONT_SIZE);
                 newElement.height = height;
             }
             // handle abstract start and end
@@ -4122,7 +4143,7 @@ const withMind = (baseBoard) => {
             dblclick(event);
             return;
         }
-        const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+        const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         board.children
             .filter(value => PlaitMind.isMind(value))
             .forEach(mindMap => {
@@ -4191,5 +4212,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, AbstractHandlePosition, AbstractResizeState, BASE, BRANCH_FONT_FAMILY, BRANCH_WIDTH, BranchShape, DEFAULT_FONT_FAMILY, DEFAULT_MIND_IMAGE_WIDTH, DefaultAbstractNodeStyle, DefaultNodeStyle, ELEMENT_TO_NODE, EXTEND_DIAMETER, EXTEND_OFFSET, GRAY_COLOR, INHERIT_ATTRIBUTE_KEYS, IS_DRAGGING, LayoutDirection, LayoutDirectionsMap, MindColorfulThemeColor, MindDarkThemeColor, MindDefaultThemeColor, MindElement, MindElementShape, MindEmojiBaseComponent, MindNode, MindNodeComponent, MindPointerType, MindQueries, MindRetroThemeColor, MindSoftThemeColor, MindStarryThemeColor, MindThemeColor, MindThemeColors, MindTransforms, NodeSpace, NodeTopicThreshold, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, QUICK_INSERT_CIRCLE_COLOR, QUICK_INSERT_CIRCLE_OFFSET, QUICK_INSERT_INNER_CROSS_COLOR, ROOT_TOPIC_FONT_SIZE, ROOT_TOPIC_HEIGHT, ROOT_TOPIC_WIDTH, STROKE_WIDTH, TOPIC_COLOR, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, WithMindPluginKey, addActiveOnDragOrigin, addImageFocus, adjustAbstractToNode, adjustNodeToRoot, adjustRootToNode, canSetAbstract, copyNewNode, correctLayoutByDirection, createDefaultMind, createEmptyMind, createMindElement, deleteElementHandleAbstract, deleteElementsHandleRightNodeCount, detectDropTarget, directionCorrector, directionDetector, divideElementByParent, drawFakeDragNode, drawFakeDropNode, editTopic, extractNodesText, findLastChild, findLocationLeftIndex, findNewChildNodePath, findNewSiblingNodePath, getAbstractBranchColor, getAbstractBranchWidth, getAbstractHandleRectangle, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getBranchShapeByMindElement, getBranchWidthByMindElement, getChildrenCount, getCorrespondingAbstract, getDefaultBranchColor, getDefaultBranchColorByIndex, getDefaultLayout, getEmojiFontSize, getEmojiForeignRectangle, getEmojiRectangle, getEmojisWidthHeight, getFillByElement, getFirstLevelElement, getFontSizeBySlateElement, getHitAbstractHandle, getHitImageResizeHandleDirection, getImageForeignRectangle, getInCorrectLayoutDirection, getLayoutDirection$1 as getLayoutDirection, getLayoutOptions, getLayoutReverseDirection, getLocationScope, getMindThemeColor, getNewNodeHeight, getNextBranchColor, getNodeDefaultFontSize, getOverallAbstracts, getPathByDropTarget, getRectangleByElement, getRectangleByNode, getRectangleByResizingLocation, getRelativeStartEndByAbstractRef, getRootLayout, getSelectedMindElements, getShapeByElement, getStrokeByMindElement, getStrokeWidthByElement, getTopicRectangleByElement, getTopicRectangleByNode, getValidAbstractRefs, handleTouchedAbstract, hasPreviousOrNextOfDropPath, insertElementHandleAbstract, insertElementHandleRightNodeCount, insertMindElement, isChildElement, isChildOfAbstract, isChildRight, isChildUp, isCorrectLayout, isDragging, isDropStandardRight, isHitEmojis, isHitImage, isHitMindElement, isInRightBranchOfStandardLayout, isMixedLayout, isSetAbstract, isValidTarget, removeActiveOnDragOrigin, removeImageFocus, separateChildren, setIsDragging, withMind, withMindExtend };
+export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, AbstractHandlePosition, AbstractResizeState, BASE, BRANCH_FONT_FAMILY, BRANCH_WIDTH, BranchShape, DEFAULT_FONT_FAMILY, DEFAULT_MIND_IMAGE_WIDTH, DefaultAbstractNodeStyle, DefaultNodeStyle, ELEMENT_TO_NODE, EXTEND_DIAMETER, EXTEND_OFFSET, GRAY_COLOR, INHERIT_ATTRIBUTE_KEYS, IS_DRAGGING, LayoutDirection, LayoutDirectionsMap, MindColorfulThemeColor, MindDarkThemeColor, MindDefaultThemeColor, MindElement, MindElementShape, MindEmojiBaseComponent, MindNode, MindNodeComponent, MindPointerType, MindQueries, MindRetroThemeColor, MindSoftThemeColor, MindStarryThemeColor, MindThemeColor, MindThemeColors, MindTransforms, NodeSpace, NodeTopicThreshold, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, QUICK_INSERT_CIRCLE_COLOR, QUICK_INSERT_CIRCLE_OFFSET, QUICK_INSERT_INNER_CROSS_COLOR, ROOT_TOPIC_FONT_SIZE, ROOT_TOPIC_HEIGHT, ROOT_TOPIC_WIDTH, STROKE_WIDTH, TOPIC_COLOR, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, WithMindPluginKey, addActiveOnDragOrigin, addImageFocus, adjustAbstractToNode, adjustNodeToRoot, adjustRootToNode, canSetAbstract, copyNewNode, correctLayoutByDirection, createDefaultMind, createEmptyMind, createMindElement, deleteElementHandleAbstract, deleteElementsHandleRightNodeCount, detectDropTarget, directionCorrector, directionDetector, divideElementByParent, drawFakeDragNode, drawFakeDropNode, editTopic, extractNodesText, findLastChild, findLocationLeftIndex, findNewChildNodePath, findNewSiblingNodePath, getAbstractBranchColor, getAbstractBranchWidth, getAbstractHandleRectangle, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getBranchShapeByMindElement, getBranchWidthByMindElement, getChildrenCount, getCorrespondingAbstract, getDefaultBranchColor, getDefaultBranchColorByIndex, getDefaultLayout, getDefaultMindElementFontSize, 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, getStrokeByMindElement, getStrokeWidthByElement, getTopicRectangleByElement, getTopicRectangleByNode, getValidAbstractRefs, handleTouchedAbstract, hasPreviousOrNextOfDropPath, insertElementHandleAbstract, insertElementHandleRightNodeCount, insertMindElement, isChildElement, isChildOfAbstract, isChildRight, isChildUp, isCorrectLayout, isDragging, isDropStandardRight, isHitEmojis, isHitImage, isHitMindElement, isInRightBranchOfStandardLayout, isMixedLayout, isSetAbstract, isValidTarget, removeActiveOnDragOrigin, removeImageFocus, separateChildren, setIsDragging, withMind, withMindExtend };
 //# sourceMappingURL=plait-mind.mjs.map