@plait/mind 0.9.0 → 0.11.0

package/fesm2015/plait-mind.mjs

@@ -1,55 +1,19 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, NgModule, Directive, Input, HostListener } from '@angular/core';
+import { Component, ChangeDetectionStrategy, NgModule, NgZone, Directive, Input, HostListener } from '@angular/core';
 import * as i2 from '@plait/core';
-import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, distanceBetweenPointAndRectangle, RectangleClient, PlaitElement, PlaitBoard, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, depthFirstRecursion, Path, drawRoundRectangle, drawLinearPath, createG, updateForeignObject, PlaitNode, getRectangleByElements, getSelectedElements, NODE_TO_PARENT, createForeignObject, drawAbstractRoundRectangle, PlaitPluginElementComponent, PlaitPointerType, NODE_TO_INDEX, createText, IS_TEXT_EDITABLE, MERGING, transformPoint, toPoint, PlaitModule, distanceBetweenPointAndPoint, CLIP_BOARD_FORMAT_KEY, isMainPointer, BOARD_TO_HOST, PlaitPluginKey, throttleRAF, BoardTransforms, removeSelectedElement, PlaitHistoryBoard, hotkeys } from '@plait/core';
+import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, RectangleClient, PlaitElement, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, PlaitBoard, depthFirstRecursion, Path, drawLinearPath, createG, updateForeignObject, PlaitNode, drawRoundRectangle, getRectangleByElements, getSelectedElements, NODE_TO_PARENT, distanceBetweenPointAndRectangle, createForeignObject, drawAbstractRoundRectangle, createText, PlaitPointerType, PlaitPluginElementComponent, NODE_TO_INDEX, PlaitModule, transformPoint, toPoint, distanceBetweenPointAndPoint, CLIP_BOARD_FORMAT_KEY, isMainPointer, BOARD_TO_HOST, PlaitPluginKey, throttleRAF, BoardTransforms, removeSelectedElement, PlaitHistoryBoard, hotkeys } from '@plait/core';
 import { MindLayoutType, isIndentedLayout, getNonAbstractChildren, isStandardLayout, AbstractNode, isLeftLayout, isRightLayout, isVerticalLogicLayout, isHorizontalLogicLayout, isTopLayout, isBottomLayout, isHorizontalLayout, getCorrectStartEnd, getAbstractLayout, ConnectingPosition, GlobalLayout } from '@plait/layouts';
-import { getSizeByText, ROOT_DEFAULT_HEIGHT, TEXT_DEFAULT_HEIGHT, drawRichtext, updateRichText, setFullSelectionAndFocus, getRichtextContentSize, hasEditableTarget, RichtextModule } from '@plait/richtext';
-import { fromEvent, Subject, timer } from 'rxjs';
-import { take, takeUntil, filter, debounceTime } from 'rxjs/operators';
-import { Node, Path as Path$1, Editor, Operation } from 'slate';
+import { getTextSize, TEXT_DEFAULT_HEIGHT, TextManage, TextModule } from '@plait/text';
+import { fromEvent, Subject } from 'rxjs';
+import { Node, Path as Path$1 } from 'slate';
 import { isKeyHotkey } from 'is-hotkey';
 import { pointsOnBezierCurves } from 'points-on-curve';
+import { take, filter } from 'rxjs/operators';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
 const ELEMENT_TO_NODE = new WeakMap();
 
-const BASE = 4;
-const PRIMARY_COLOR = '#6698FF';
-const TRANSPARENT = 'transparent';
-const GRAY_COLOR = '#AAAAAA';
-const STROKE_WIDTH = 3;
-const BRANCH_WIDTH = 3;
-const EXTEND_OFFSET = 8;
-const EXTEND_RADIUS = 16;
-const QUICK_INSERT_CIRCLE_OFFSET = 9;
-const QUICK_INSERT_CIRCLE_COLOR = '#6698FF';
-const QUICK_INSERT_INNER_CROSS_COLOR = 'white';
-
-const DefaultAbstractNodeStyle = {
-    strokeColor: GRAY_COLOR,
-    strokeWidth: 2,
-    branchColor: GRAY_COLOR,
-    branchWidth: 2
-};
-const DefaultNodeStyle = {
-    strokeWidth: 3,
-    branchWidth: 3,
-    fill: 'none'
-};
-
-const TOPIC_COLOR = '#333';
-const TOPIC_FONT_SIZE = 14;
-const ROOT_TOPIC_FONT_SIZE = 18;
-const TOPIC_DEFAULT_MAX_WORD_COUNT = 34;
-
-const NODE_MIN_WIDTH = 18;
-
-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 MindNode = {
     get(root, path) {
         let node = root;
@@ -185,36 +149,17 @@ const MindThemeColor = {
     }
 };
 
-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, originPoint, element) {
-    const nodeRectangle = {
-        x: originPoint[0],
-        y: originPoint[1],
-        width: NodeSpace.getNodeWidth(board, element),
-        height: NodeSpace.getNodeHeight(board, element)
-    };
-    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;
-    }
-}
+const BASE = 4;
+const PRIMARY_COLOR = '#6698FF';
+const TRANSPARENT = 'transparent';
+const GRAY_COLOR = '#AAAAAA';
+const STROKE_WIDTH = 3;
+const BRANCH_WIDTH = 3;
+const EXTEND_OFFSET = 8;
+const EXTEND_DIAMETER = 16;
+const QUICK_INSERT_CIRCLE_OFFSET = 9;
+const QUICK_INSERT_CIRCLE_COLOR = '#6698FF';
+const QUICK_INSERT_INNER_CROSS_COLOR = 'white';
 
 function getEmojisWidthHeight(board, element) {
     const options = board.getMindOptions();
@@ -234,6 +179,79 @@ function getEmojiFontSize(element) {
     }
 }
 
+const NodeDefaultSpace = {
+    horizontal: {
+        nodeAndText: BASE * 3,
+        emojiAndText: BASE * 1.5
+    },
+    vertical: {
+        nodeAndText: 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;
+    return nodeAndText;
+};
+const getVerticalSpaceBetweenNodeAndText = (element) => {
+    const isMind = PlaitMind.isMind(element);
+    const nodeAndText = isMind ? RootDefaultSpace.vertical.nodeAndText : NodeDefaultSpace.vertical.nodeAndText;
+    return nodeAndText;
+};
+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) +
+                element.width +
+                nodeAndText);
+        }
+        return nodeAndText + element.width + nodeAndText;
+    },
+    getNodeHeight(board, element) {
+        const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
+        return nodeAndText + element.height + nodeAndText;
+    },
+    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(element) {
+        const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
+        return nodeAndText;
+    },
+    getEmojiLeftSpace(board, element) {
+        const options = board.getMindOptions();
+        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
+        return nodeAndText - options.emojiPadding;
+    },
+    getEmojiTopSpace(element) {
+        const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
+        return nodeAndText;
+    }
+};
+
 function getEmojiRectangle(board, element) {
     let { x, y } = getRectangleByNode(MindElement.getNode(element));
     x = x + NodeSpace.getEmojiLeftSpace(board, element);
@@ -260,18 +278,38 @@ const isHitEmojis = (board, element, point) => {
     return RectangleClient.isHit(RectangleClient.toRectangleClient([point, point]), getEmojiRectangle(board, element));
 };
 
-function enterNodeEditing(element) {
+function getTopicRectangleByNode(board, node) {
+    let nodeRectangle = getRectangleByNode(node);
+    return getTopicRectangleByElement(board, nodeRectangle, node.origin);
+}
+function getTopicRectangleByElement(board, nodeRectangle, element) {
+    const x = nodeRectangle.x + NodeSpace.getTextLeftSpace(board, element);
+    const y = nodeRectangle.y + NodeSpace.getTextTopSpace(element);
+    const width = Math.ceil(element.width);
+    const height = Math.ceil(element.height);
+    return { height, width, x, y };
+}
+
+const NODE_MIN_WIDTH = 18;
+
+function editTopic(element) {
     const component = PlaitElement.getComponent(element);
-    component.startEditText(false, false);
+    component.editTopic();
 }
 
+const TOPIC_COLOR = '#333';
+const TOPIC_FONT_SIZE = 14;
+const ROOT_TOPIC_FONT_SIZE = 18;
+const ROOT_TOPIC_HEIGHT = 25;
+const TOPIC_DEFAULT_MAX_WORD_COUNT = 34;
+
 const adjustRootToNode = (board, node) => {
     const newNode = Object.assign({}, node);
     delete newNode.isRoot;
     delete newNode.rightNodeCount;
     delete newNode.type;
     const text = Node.string(node.data.topic.children[0]) || ' ';
-    const { width, height } = getSizeByText(text, PlaitBoard.getViewportContainer(board), TOPIC_DEFAULT_MAX_WORD_COUNT);
+    const { width, height } = getTextSize(board, text, TOPIC_DEFAULT_MAX_WORD_COUNT);
     newNode.width = Math.max(width, NODE_MIN_WIDTH);
     newNode.height = height;
     if (newNode.layout === MindLayoutType.standard) {
@@ -297,7 +335,7 @@ const adjustNodeToRoot = (board, node) => {
     newElement === null || newElement === void 0 ? true : delete newElement.fill;
     newElement === null || newElement === void 0 ? true : delete newElement.shape;
     newElement === null || newElement === void 0 ? true : delete newElement.strokeWidth;
-    const { width, height } = getSizeByText(text, PlaitBoard.getViewportContainer(board), TOPIC_DEFAULT_MAX_WORD_COUNT, ROOT_TOPIC_FONT_SIZE);
+    const { width, height } = getTextSize(board, text, TOPIC_DEFAULT_MAX_WORD_COUNT, ROOT_TOPIC_FONT_SIZE);
     newElement.width = Math.max(width, NODE_MIN_WIDTH);
     newElement.height = height;
     return Object.assign(Object.assign({}, newElement), { layout: (_a = newElement.layout) !== null && _a !== void 0 ? _a : MindLayoutType.right, isCollapsed: false, isRoot: true, type: 'mindmap' });
@@ -310,7 +348,7 @@ const createEmptyMind = (board, point) => {
     return rootElement;
 };
 const createDefaultMind = (point, rightNodeCount, layout) => {
-    const root = createMindElement('思维导图', 72, ROOT_DEFAULT_HEIGHT, { layout });
+    const root = createMindElement('思维导图', 72, ROOT_TOPIC_HEIGHT, { layout });
     root.rightNodeCount = rightNodeCount;
     root.isRoot = true;
     root.type = 'mindmap';
@@ -417,7 +455,7 @@ const insertMindElement = (board, inheritNode, path) => {
     clearSelectedElement(board);
     addSelectedElement(board, newElement);
     setTimeout(() => {
-        enterNodeEditing(newElement);
+        editTopic(newElement);
     });
 };
 const findLastChild = (child) => {
@@ -547,6 +585,18 @@ const getRootLayout = (root) => {
     return root.layout || getDefaultLayout();
 };
 
+const DefaultAbstractNodeStyle = {
+    strokeColor: GRAY_COLOR,
+    strokeWidth: 2,
+    branchColor: GRAY_COLOR,
+    branchWidth: 2
+};
+const DefaultNodeStyle = {
+    strokeWidth: 3,
+    branchWidth: 3,
+    fill: 'none'
+};
+
 const getAvailableProperty = (board, element, propertyKey) => {
     return element[propertyKey];
 };
@@ -649,6 +699,12 @@ const isDragging = (board) => {
 };
 const setIsDragging = (board, state) => {
     IS_DRAGGING.set(board, state);
+    if (state) {
+        PlaitBoard.getBoardContainer(board).classList.add('mind-node-dragging');
+    }
+    else {
+        PlaitBoard.getBoardContainer(board).classList.remove('mind-node-dragging');
+    }
 };
 const hasPreviousOrNextOfDropPath = (parent, dropTarget, dropPath) => {
     let children = getNonAbstractChildren(parent);
@@ -862,23 +918,10 @@ const getPathByDropTarget = (board, dropTarget) => {
     return targetPath;
 };
 
-function drawRoundRectangleByNode(board, node) {
-    const rectangle = getRectangleByNode(node);
-    return drawRoundRectangleByElement(board, rectangle, node.origin);
-}
-function drawRoundRectangleByElement(board, nodeRectangle, element) {
-    const defaultRootFill = getMindThemeColor(board).rootFill;
-    const fill = element.fill ? element.fill : element.isRoot ? defaultRootFill : DefaultNodeStyle.fill;
-    const stroke = getStrokeByMindElement(board, element);
-    const strokeWidth = element.strokeWidth ? element.strokeWidth : DefaultNodeStyle.strokeWidth;
-    const nodeG = drawRoundRectangle(PlaitBoard.getRoughSVG(board), nodeRectangle.x, nodeRectangle.y, nodeRectangle.x + nodeRectangle.width, nodeRectangle.y + nodeRectangle.height, {
-        stroke,
-        strokeWidth,
-        fill,
-        fillStyle: 'solid'
-    });
-    return nodeG;
-}
+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;
 
 var HorizontalPlacement;
 (function (HorizontalPlacement) {
@@ -1127,20 +1170,19 @@ function drawLink(board, parentNode, node, isHorizontal, needDrawUnderline, defa
 }
 
 const drawFakeDragNode = (board, element, offsetX, offsetY) => {
-    var _a;
     const activeComponent = PlaitElement.getComponent(element);
     const dragFakeNodeG = createG();
     dragFakeNodeG.classList.add('dragging', 'fake-node', 'plait-board-attached');
     const fakeDraggingNode = Object.assign(Object.assign({}, activeComponent.node), { children: [], x: activeComponent.node.x + offsetX, y: activeComponent.node.y + offsetY });
     const textRectangle = getTopicRectangleByNode(board, activeComponent.node);
     const fakeNodeG = drawRoundRectangleByNode(board, fakeDraggingNode);
-    const richtextG = (_a = activeComponent.richtextG) === null || _a === void 0 ? void 0 : _a.cloneNode(true);
+    const richtextG = activeComponent.textManage.g.cloneNode(true);
     updateForeignObject(richtextG, textRectangle.width, textRectangle.height, textRectangle.x + offsetX, textRectangle.y + offsetY);
     dragFakeNodeG === null || dragFakeNodeG === void 0 ? void 0 : dragFakeNodeG.append(fakeNodeG);
     dragFakeNodeG === null || dragFakeNodeG === void 0 ? void 0 : dragFakeNodeG.append(richtextG);
     // draw emojis
     if (MindElement.hasEmojis(element)) {
-        const fakeEmojisG = activeComponent.emojisDrawer.g.cloneNode(true);
+        const fakeEmojisG = activeComponent.nodeEmojisDrawer.g.cloneNode(true);
         const foreignRectangle = getEmojiForeignRectangle(board, element);
         updateForeignObject(fakeEmojisG, foreignRectangle.width, foreignRectangle.height, foreignRectangle.x + offsetX, foreignRectangle.y + offsetY);
         dragFakeNodeG === null || dragFakeNodeG === void 0 ? void 0 : dragFakeNodeG.append(fakeEmojisG);
@@ -1581,9 +1623,7 @@ function findLocationLeftIndex(board, parentChildren, location, isHorizontal) {
 }
 function handleTouchedAbstract(board, touchedAbstract, endPoint) {
     let touchedHandle;
-    const abstract = getSelectedElements(board)
-        .filter(element => AbstractNode.isAbstract(element))
-        .find(element => {
+    const abstract = getSelectedElements(board).filter(element => AbstractNode.isAbstract(element)).find(element => {
         touchedHandle = getHitAbstractHandle(board, element, endPoint);
         return touchedHandle;
     });
@@ -1592,13 +1632,13 @@ function handleTouchedAbstract(board, touchedAbstract, endPoint) {
     }
     if (touchedAbstract) {
         const component = PlaitElement.getComponent(touchedAbstract);
-        component.updateAbstractIncludedOutline();
+        component.activeDrawer.updateAbstractOutline(touchedAbstract);
         touchedAbstract = undefined;
     }
     if (abstract) {
         touchedAbstract = abstract;
         const component = PlaitElement.getComponent(touchedAbstract);
-        component.updateAbstractIncludedOutline(touchedHandle);
+        component.activeDrawer.updateAbstractOutline(touchedAbstract, touchedHandle);
     }
     return touchedAbstract;
 }
@@ -1823,6 +1863,9 @@ const MindElement = {
     },
     getEmojis(element) {
         return element.data.emojis;
+    },
+    getEditor(element) {
+        return PlaitElement.getComponent(element).textManage.componentRef.instance.editor;
     }
 };
 var MindElementShape;
@@ -1836,118 +1879,53 @@ var BranchShape;
     BranchShape["polyline"] = "polyline";
 })(BranchShape || (BranchShape = {}));
 
-const NodeDefaultSpace = {
-    horizontal: {
-        nodeAndText: BASE * 3,
-        emojiAndText: BASE * 1.5
-    },
-    vertical: {
-        nodeAndText: BASE * 1.5
+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, originPoint, element) {
+    const nodeRectangle = {
+        x: originPoint[0],
+        y: originPoint[1],
+        width: NodeSpace.getNodeWidth(board, element),
+        height: NodeSpace.getNodeHeight(board, element)
+    };
+    return nodeRectangle;
+}
+function isHitMindElement(board, point, element) {
+    const node = MindElement.getNode(element);
+    if (node && distanceBetweenPointAndRectangle(point[0], point[1], getRectangleByNode(node)) === 0) {
+        return true;
     }
-};
-const RootDefaultSpace = {
-    horizontal: {
-        nodeAndText: BASE * 4,
-        emojiAndText: BASE * 2
-    },
-    vertical: {
-        nodeAndText: BASE * 2
+    else {
+        return false;
     }
-};
-const getHorizontalSpaceBetweenNodeAndText = (board, element) => {
-    const isMind = PlaitMind.isMind(element);
-    const nodeAndText = isMind ? RootDefaultSpace.horizontal.nodeAndText : NodeDefaultSpace.horizontal.nodeAndText;
-    return nodeAndText;
-};
-const getVerticalSpaceBetweenNodeAndText = (element) => {
-    const isMind = PlaitMind.isMind(element);
-    const nodeAndText = isMind ? RootDefaultSpace.vertical.nodeAndText : NodeDefaultSpace.vertical.nodeAndText;
-    return nodeAndText;
-};
-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) +
-                element.width +
-                nodeAndText);
-        }
-        return nodeAndText + element.width + nodeAndText;
-    },
-    getNodeHeight(board, element) {
-        const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
-        return nodeAndText + element.height + nodeAndText;
-    },
-    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(element) {
-        const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
-        return nodeAndText;
-    },
-    getEmojiLeftSpace(board, element) {
-        const options = board.getMindOptions();
-        const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
-        return nodeAndText - options.emojiPadding;
-    },
-    getEmojiTopSpace(element) {
-        const nodeAndText = getVerticalSpaceBetweenNodeAndText(element);
-        return nodeAndText;
-    }
-};
-
-function getTopicRectangleByNode(board, node) {
-    let nodeRectangle = getRectangleByNode(node);
-    return getTopicRectangleByElement(board, nodeRectangle, node.origin);
-}
-function getTopicRectangleByElement(board, nodeRectangle, element) {
-    const x = nodeRectangle.x + NodeSpace.getTextLeftSpace(board, element);
-    const y = nodeRectangle.y + NodeSpace.getTextTopSpace(element);
-    const width = Math.ceil(element.width);
-    const height = Math.ceil(element.height);
-    return { height, width, x, y };
 }
 
-function drawTopicByNode(board, node, viewContainerRef) {
-    const rectangle = getTopicRectangleByNode(board, node);
-    return drawTopicByElement(board, rectangle, node.origin, viewContainerRef);
-}
-function drawTopicByElement(board, rectangle, element, viewContainerRef) {
-    const containerRef = viewContainerRef || PlaitBoard.getComponent(board).viewContainerRef;
-    const classList = [];
-    if (element.isRoot) {
-        classList.push('root-node');
-        classList.push('font-size-18');
-    }
-    else {
-        classList.push('child-node');
-    }
-    // COMPAT: last character can not show in safari browser
-    return drawRichtext(rectangle.x, rectangle.y, rectangle.width, rectangle.height, element.data.topic, containerRef, classList);
+function drawRoundRectangleByNode(board, node) {
+    const rectangle = getRectangleByNode(node);
+    return drawRoundRectangleByElement(board, rectangle, node.origin);
 }
-function updateMindNodeTopicSize(board, node, g, isEditable) {
-    const { x, y, width, height } = getTopicRectangleByNode(board, node);
-    if (isEditable) {
-        // add 999， avoid changing lines when paste more text
-        updateForeignObject(g, width + 999, height + 999, x, y);
-    }
-    else {
-        // COMPAT: last character can not show in safari browser
-        updateForeignObject(g, width, height, x, y);
-    }
+function drawRoundRectangleByElement(board, nodeRectangle, element) {
+    const defaultRootFill = getMindThemeColor(board).rootFill;
+    const fill = element.fill ? element.fill : element.isRoot ? defaultRootFill : DefaultNodeStyle.fill;
+    const stroke = getStrokeByMindElement(board, element);
+    const strokeWidth = element.strokeWidth ? element.strokeWidth : DefaultNodeStyle.strokeWidth;
+    const nodeG = drawRoundRectangle(PlaitBoard.getRoughSVG(board), nodeRectangle.x, nodeRectangle.y, nodeRectangle.x + nodeRectangle.width, nodeRectangle.y + nodeRectangle.height, {
+        stroke,
+        strokeWidth,
+        fill,
+        fillStyle: 'solid'
+    });
+    return nodeG;
 }
 
 function drawAbstractLink(board, node, isHorizontal) {
@@ -2028,7 +2006,7 @@ class EmojiDrawer {
         }
     }
 }
-class EmojisDrawer {
+class NodeEmojisDrawer {
     constructor(board, viewContainerRef) {
         this.board = board;
         this.viewContainerRef = viewContainerRef;
@@ -2156,12 +2134,13 @@ const correctLogicLayoutNode = (board, layout, path) => {
     }
 };
 
+const normalizeWidthAndHeight = (board, width, height) => {
+    const newWidth = width < NODE_MIN_WIDTH * board.viewport.zoom ? NODE_MIN_WIDTH : width / board.viewport.zoom;
+    const newHeight = height / board.viewport.zoom;
+    return { width: newWidth, height: newHeight };
+};
 const setTopic = (board, element, topic, width, height) => {
-    const newElement = {
-        data: { topic },
-        width: width < NODE_MIN_WIDTH * board.viewport.zoom ? NODE_MIN_WIDTH : width / board.viewport.zoom,
-        height: height / board.viewport.zoom
-    };
+    const newElement = Object.assign({ data: { topic } }, normalizeWidthAndHeight(board, width, height));
     if (MindElement.hasEmojis(element)) {
         newElement.data.emojis = element.data.emojis;
     }
@@ -2169,12 +2148,9 @@ const setTopic = (board, element, topic, width, height) => {
     Transforms.setNode(board, newElement, path);
 };
 const setTopicSize = (board, element, width, height) => {
-    const newElement = {
-        width: width < NODE_MIN_WIDTH * board.viewport.zoom ? NODE_MIN_WIDTH : width / board.viewport.zoom,
-        height: height / board.viewport.zoom
-    };
-    const path = PlaitBoard.findPath(board, element);
-    if (newElement.width !== element.width || newElement.height !== element.height) {
+    const newElement = Object.assign({}, normalizeWidthAndHeight(board, width, height));
+    if (element.width !== newElement.width || element.height !== newElement.height) {
+        const path = PlaitBoard.findPath(board, element);
         Transforms.setNode(board, newElement, path);
     }
 };
@@ -2270,75 +2246,22 @@ const MindTransforms = {
     setRightNodeCountByRefs
 };
 
-function drawAbstractIncludedOutline(board, roughSVG, element, activeHandlePosition, resizingLocation) {
-    const abstractIncludedG = createG();
-    const parentElement = MindElement.getParent(element);
-    const nodeLayout = MindQueries.getCorrectLayoutByElement(board, element);
-    const isHorizontal = isHorizontalLayout(nodeLayout);
-    const includedElements = parentElement.children.slice(element.start, element.end + 1);
-    let abstractRectangle = getRectangleByElements(board, includedElements, true);
-    abstractRectangle = RectangleClient.getOutlineRectangle(abstractRectangle, -ABSTRACT_INCLUDED_OUTLINE_OFFSET);
-    if (resizingLocation) {
-        abstractRectangle = getRectangleByResizingLocation(abstractRectangle, resizingLocation, activeHandlePosition, isHorizontal);
-    }
-    const rectangle = drawAbstractRoundRectangle(roughSVG, abstractRectangle.x, abstractRectangle.y, abstractRectangle.x + abstractRectangle.width, abstractRectangle.y + abstractRectangle.height, isHorizontal, {
-        stroke: PRIMARY_COLOR,
-        strokeWidth: 1,
-        fillStyle: 'solid'
-    });
-    const startPlacement = [HorizontalPlacement.center, VerticalPlacement.top];
-    const endPlacement = [HorizontalPlacement.center, VerticalPlacement.bottom];
-    const linkDirection = getLayoutDirection(MindElement.getNode(element), isHorizontal);
-    transformPlacement(startPlacement, linkDirection);
-    transformPlacement(endPlacement, linkDirection);
-    let startCenterPoint = getPointByPlacement(abstractRectangle, startPlacement);
-    let endCenterPoint = getPointByPlacement(abstractRectangle, endPlacement);
-    const startPoint1 = moveXOfPoint(startCenterPoint, -ABSTRACT_HANDLE_LENGTH / 2, linkDirection);
-    const startPoint2 = moveXOfPoint(startCenterPoint, ABSTRACT_HANDLE_LENGTH / 2, linkDirection);
-    const endPoint1 = moveXOfPoint(endCenterPoint, -ABSTRACT_HANDLE_LENGTH / 2, linkDirection);
-    const endPoint2 = moveXOfPoint(endCenterPoint, ABSTRACT_HANDLE_LENGTH / 2, linkDirection);
-    const startHandle = roughSVG.line(startPoint1[0], startPoint1[1], startPoint2[0], startPoint2[1], getHandleOption(activeHandlePosition === AbstractHandlePosition.start));
-    const endHandle = roughSVG.line(endPoint1[0], endPoint1[1], endPoint2[0], endPoint2[1], getHandleOption(activeHandlePosition === AbstractHandlePosition.end));
-    changeBoardClass(board, activeHandlePosition, isHorizontal);
-    startHandle.setAttribute('stroke-linecap', 'round');
-    endHandle.setAttribute('stroke-linecap', 'round');
-    abstractIncludedG.append(startHandle);
-    abstractIncludedG.append(endHandle);
-    abstractIncludedG.append(rectangle);
-    return abstractIncludedG;
-}
-function getHandleOption(isHover) {
-    return isHover
-        ? {
-            stroke: PRIMARY_COLOR,
-            strokeWidth: 4,
-            fillStyle: 'solid'
-        }
-        : {
-            stroke: ABSTRACT_HANDLE_COLOR,
-            strokeWidth: 3,
-            fillStyle: 'solid'
-        };
-}
-function changeBoardClass(board, activeHandlePosition, isHorizontal) {
-    if (activeHandlePosition) {
-        if (isHorizontal) {
-            PlaitBoard.getBoardNativeElement(board).classList.add('abstract-resizing-horizontal');
-        }
-        else {
-            PlaitBoard.getBoardNativeElement(board).classList.add('abstract-resizing-vertical');
-        }
-    }
-    else {
-        PlaitBoard.getBoardNativeElement(board).classList.remove('abstract-resizing-horizontal');
-        PlaitBoard.getBoardNativeElement(board).classList.remove('abstract-resizing-vertical');
-    }
-}
-
 class BaseDrawer {
     constructor(board) {
         this.board = board;
     }
+    draw(element, parentG, data) {
+        this.destroy();
+        if (this.canDraw && this.canDraw(element, data)) {
+            const g = this.baseDraw(element, data);
+            if (g) {
+                parentG.append(g);
+            }
+            if (hasAfterDraw(this)) {
+                this.afterDraw(element);
+            }
+        }
+    }
     destroy() {
         if (this.g) {
             this.g.remove();
@@ -2361,14 +2284,14 @@ function findNewSiblingNodePath(board, element) {
     return Path$1.next(path);
 }
 
-class QuickInsertDrawer extends BaseDrawer {
+class NodeInsertDrawer extends BaseDrawer {
     canDraw(element) {
         if (PlaitBoard.isReadonly(this.board) || (element === null || element === void 0 ? void 0 : element.isCollapsed)) {
             return false;
         }
         return true;
     }
-    draw(element) {
+    baseDraw(element) {
         const quickInsertG = createG();
         this.g = quickInsertG;
         quickInsertG.classList.add('quick-insert');
@@ -2394,7 +2317,7 @@ class QuickInsertDrawer extends BaseDrawer {
         }
         let beginPoint = getPointByPlacement(nodeClient, placement);
         if (element.children.length > 0 && !element.isRoot) {
-            beginPoint = moveXOfPoint(beginPoint, EXTEND_RADIUS + 8, linkDirection);
+            beginPoint = moveXOfPoint(beginPoint, EXTEND_DIAMETER + 8, linkDirection);
             distance = 5;
         }
         const endPoint = moveXOfPoint(beginPoint, distance, linkDirection);
@@ -2403,7 +2326,7 @@ class QuickInsertDrawer extends BaseDrawer {
             stroke: branchColor,
             strokeWidth: branchWidth
         });
-        const circle = PlaitBoard.getRoughSVG(this.board).circle(circleCenter[0], circleCenter[1], EXTEND_RADIUS, {
+        const circle = PlaitBoard.getRoughSVG(this.board).circle(circleCenter[0], circleCenter[1], EXTEND_DIAMETER, {
             fill: QUICK_INSERT_CIRCLE_COLOR,
             stroke: QUICK_INSERT_CIRCLE_COLOR,
             fillStyle: 'solid'
@@ -2444,71 +2367,271 @@ class QuickInsertDrawer extends BaseDrawer {
     }
 }
 
-class MindNodeComponent extends PlaitPluginElementComponent {
-    get handActive() {
-        return this.board.pointer === PlaitPointerType.hand;
+function drawAbstractIncludedOutline(board, roughSVG, element, activeHandlePosition, resizingLocation) {
+    const abstractIncludedG = createG();
+    const parentElement = MindElement.getParent(element);
+    const nodeLayout = MindQueries.getCorrectLayoutByElement(board, element);
+    const isHorizontal = isHorizontalLayout(nodeLayout);
+    const includedElements = parentElement.children.slice(element.start, element.end + 1);
+    let abstractRectangle = getRectangleByElements(board, includedElements, true);
+    abstractRectangle = RectangleClient.getOutlineRectangle(abstractRectangle, -ABSTRACT_INCLUDED_OUTLINE_OFFSET);
+    if (resizingLocation) {
+        abstractRectangle = getRectangleByResizingLocation(abstractRectangle, resizingLocation, activeHandlePosition, isHorizontal);
     }
-    constructor(viewContainerRef, cdr, render2, ngZone) {
+    const rectangle = drawAbstractRoundRectangle(roughSVG, abstractRectangle.x, abstractRectangle.y, abstractRectangle.x + abstractRectangle.width, abstractRectangle.y + abstractRectangle.height, isHorizontal, {
+        stroke: PRIMARY_COLOR,
+        strokeWidth: 1,
+        fillStyle: 'solid'
+    });
+    const startPlacement = [HorizontalPlacement.center, VerticalPlacement.top];
+    const endPlacement = [HorizontalPlacement.center, VerticalPlacement.bottom];
+    const linkDirection = getLayoutDirection(MindElement.getNode(element), isHorizontal);
+    transformPlacement(startPlacement, linkDirection);
+    transformPlacement(endPlacement, linkDirection);
+    let startCenterPoint = getPointByPlacement(abstractRectangle, startPlacement);
+    let endCenterPoint = getPointByPlacement(abstractRectangle, endPlacement);
+    const startPoint1 = moveXOfPoint(startCenterPoint, -ABSTRACT_HANDLE_LENGTH / 2, linkDirection);
+    const startPoint2 = moveXOfPoint(startCenterPoint, ABSTRACT_HANDLE_LENGTH / 2, linkDirection);
+    const endPoint1 = moveXOfPoint(endCenterPoint, -ABSTRACT_HANDLE_LENGTH / 2, linkDirection);
+    const endPoint2 = moveXOfPoint(endCenterPoint, ABSTRACT_HANDLE_LENGTH / 2, linkDirection);
+    const startHandle = roughSVG.line(startPoint1[0], startPoint1[1], startPoint2[0], startPoint2[1], getHandleOption(activeHandlePosition === AbstractHandlePosition.start));
+    const endHandle = roughSVG.line(endPoint1[0], endPoint1[1], endPoint2[0], endPoint2[1], getHandleOption(activeHandlePosition === AbstractHandlePosition.end));
+    handleBoardClass(board, activeHandlePosition, isHorizontal);
+    startHandle.setAttribute('stroke-linecap', 'round');
+    endHandle.setAttribute('stroke-linecap', 'round');
+    abstractIncludedG.append(startHandle);
+    abstractIncludedG.append(endHandle);
+    abstractIncludedG.append(rectangle);
+    return abstractIncludedG;
+}
+function getHandleOption(isHover) {
+    return isHover
+        ? {
+            stroke: PRIMARY_COLOR,
+            strokeWidth: 4,
+            fillStyle: 'solid'
+        }
+        : {
+            stroke: ABSTRACT_HANDLE_COLOR,
+            strokeWidth: 3,
+            fillStyle: 'solid'
+        };
+}
+function handleBoardClass(board, activeHandlePosition, isHorizontal) {
+    if (activeHandlePosition) {
+        if (isHorizontal) {
+            PlaitBoard.getBoardContainer(board).classList.add('abstract-resizing-horizontal');
+        }
+        else {
+            PlaitBoard.getBoardContainer(board).classList.add('abstract-resizing-vertical');
+        }
+    }
+    else {
+        PlaitBoard.getBoardContainer(board).classList.remove('abstract-resizing-horizontal');
+        PlaitBoard.getBoardContainer(board).classList.remove('abstract-resizing-vertical');
+    }
+}
+
+class NodeActiveDrawer extends BaseDrawer {
+    canDraw(element, data) {
+        if (data.selected) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    baseDraw(element, data) {
+        const activeG = createG();
+        this.g = activeG;
+        if (AbstractNode.isAbstract(element)) {
+            this.abstractOutlineG = drawAbstractIncludedOutline(this.board, PlaitBoard.getRoughSVG(this.board), element);
+            activeG.append(this.abstractOutlineG);
+        }
+        const node = MindElement.getNode(element);
+        let { x, y, width, height } = getRectangleByNode(node);
+        const strokeG = drawRoundRectangle(PlaitBoard.getRoughSVG(this.board), x - 2, y - 2, x + width + 2, y + height + 2, { stroke: PRIMARY_COLOR, strokeWidth: 2, fill: '' }, true);
+        this.g.appendChild(strokeG);
+        if (!data.isEditing) {
+            const fillG = drawRoundRectangle(PlaitBoard.getRoughSVG(this.board), x - 2, y - 2, x + width + 2, y + height + 2, { stroke: PRIMARY_COLOR, fill: PRIMARY_COLOR, fillStyle: 'solid' }, true);
+            fillG.style.opacity = '0.15';
+            this.g.appendChild(fillG);
+        }
+        return activeG;
+    }
+    updateAbstractOutline(element, activeHandlePosition, resizingLocation) {
+        if (this.abstractOutlineG) {
+            this.abstractOutlineG.remove();
+        }
+        this.abstractOutlineG = drawAbstractIncludedOutline(this.board, PlaitBoard.getRoughSVG(this.board), element, activeHandlePosition, resizingLocation);
+        this.g.append(this.abstractOutlineG);
+    }
+}
+
+class CollapseDrawer extends BaseDrawer {
+    canDraw(element) {
+        if (element.children.length && !PlaitMind.isMind(element)) {
+            return true;
+        }
+        return false;
+    }
+    baseDraw(element) {
+        const collapseG = createG();
+        this.g = collapseG;
+        collapseG.classList.add('collapse-container');
+        const node = MindElement.getNode(element);
+        const stroke = getBranchColorByMindElement(this.board, element);
+        const branchWidth = getBranchWidthByMindElement(this.board, element);
+        const layout = MindQueries.getLayoutByElement(element);
+        const isUnderlineShape = getShapeByElement(this.board, element) === MindElementShape.underline;
+        const isHorizontal = isHorizontalLayout(layout);
+        const nodeClient = getRectangleByNode(node);
+        let linkDirection = getLayoutDirection(node, isHorizontal);
+        if (isIndentedLayout(layout)) {
+            linkDirection = isTopLayout(layout) ? LayoutDirection.top : LayoutDirection.bottom;
+        }
+        let placement = [HorizontalPlacement.right, VerticalPlacement.middle];
+        transformPlacement(placement, linkDirection);
+        // underline shape and horizontal
+        if (isHorizontal && isUnderlineShape && !element.isRoot) {
+            placement[1] = VerticalPlacement.bottom;
+        }
+        let startPoint = getPointByPlacement(nodeClient, placement);
+        const endPoint = moveXOfPoint(startPoint, EXTEND_OFFSET, linkDirection);
+        const circleCenter = moveXOfPoint(endPoint, EXTEND_DIAMETER / 2, linkDirection);
+        const arrowPoints = this.getArrowPoints(circleCenter, linkDirection);
+        const arrowLine = drawLinearPath(arrowPoints, {
+            stroke,
+            strokeWidth: 2
+        });
+        const extendLine = PlaitBoard.getRoughSVG(this.board).line(startPoint[0], startPoint[1], endPoint[0], endPoint[1], {
+            strokeWidth: branchWidth,
+            stroke
+        });
+        const badge = PlaitBoard.getRoughSVG(this.board).circle(circleCenter[0], circleCenter[1], EXTEND_DIAMETER, {
+            fill: stroke,
+            stroke,
+            fillStyle: 'solid'
+        });
+        const hideCircleG = PlaitBoard.getRoughSVG(this.board).circle(circleCenter[0], circleCenter[1], EXTEND_DIAMETER, {
+            fill: '#fff',
+            stroke,
+            strokeWidth: branchWidth > 3 ? 3 : branchWidth,
+            fillStyle: 'solid'
+        });
+        if (element.isCollapsed) {
+            let numberOffset = 0;
+            if (getChildrenCount(element) >= 10)
+                numberOffset = -2;
+            if (getChildrenCount(element) === 1)
+                numberOffset = 1;
+            const badgeText = createText(circleCenter[0] - 4 + numberOffset, circleCenter[1] + 4, stroke, `${getChildrenCount(element)}`);
+            badge.setAttribute('style', 'opacity: 0.15');
+            badgeText.setAttribute('style', 'font-size: 12px');
+            collapseG.appendChild(badge);
+            collapseG.appendChild(badgeText);
+            collapseG.appendChild(extendLine);
+        }
+        else {
+            collapseG.appendChild(hideCircleG);
+            collapseG.appendChild(arrowLine);
+        }
+        collapseG.appendChild(extendLine);
+        return collapseG;
+    }
+    afterDraw(element) {
+        if (!this.g) {
+            throw new Error(`can not find quick insert g`);
+        }
+        fromEvent(this.g, 'mouseup')
+            .pipe(filter(() => !PlaitBoard.isPointer(this.board, PlaitPointerType.hand) || !!PlaitBoard.isReadonly(this.board)), take(1))
+            .subscribe(() => {
+            const isCollapsed = !element.isCollapsed;
+            const newElement = { isCollapsed };
+            const path = PlaitBoard.findPath(this.board, element);
+            Transforms.setNode(this.board, newElement, path);
+        });
+    }
+    getArrowPoints(circleCenter, linkDirection) {
+        let arrowTopPoint = moveXOfPoint(circleCenter, 2, linkDirection);
+        arrowTopPoint = moveYOfPoint(arrowTopPoint, 4, linkDirection);
+        const arrowMiddlePoint = moveXOfPoint(circleCenter, -2, linkDirection);
+        let arrowBottomPoint = moveXOfPoint(circleCenter, 2, linkDirection);
+        arrowBottomPoint = moveYOfPoint(arrowBottomPoint, -4, linkDirection);
+        return [arrowTopPoint, arrowMiddlePoint, arrowBottomPoint];
+    }
+}
+
+class MindNodeComponent extends PlaitPluginElementComponent {
+    constructor(viewContainerRef, cdr) {
         super(cdr);
         this.viewContainerRef = viewContainerRef;
         this.cdr = cdr;
-        this.render2 = render2;
-        this.ngZone = ngZone;
-        this.isEditable = false;
-        this.activeG = [];
         this.shapeG = null;
         this.destroy$ = new Subject();
         this.trackBy = (index, node) => {
             return node.origin.id;
         };
     }
+    initializeDrawer() {
+        this.nodeEmojisDrawer = new NodeEmojisDrawer(this.board, this.viewContainerRef);
+        this.nodeInsertDrawer = new NodeInsertDrawer(this.board);
+        this.activeDrawer = new NodeActiveDrawer(this.board);
+        this.collapseDrawer = new CollapseDrawer(this.board);
+        this.textManage = new TextManage(this.board, this.viewContainerRef, () => {
+            return getTopicRectangleByNode(this.board, this.node);
+        }, (point) => {
+            return isHitMindElement(this.board, point, this.element);
+        }, (textManageRef) => {
+            const width = textManageRef.width;
+            const height = textManageRef.height;
+            if (textManageRef.newValue) {
+                MindTransforms.setTopic(this.board, this.element, textManageRef.newValue, width, height);
+            }
+            else {
+                MindTransforms.setTopicSize(this.board, this.element, width, height);
+            }
+        });
+    }
     ngOnInit() {
-        this.emojisDrawer = new EmojisDrawer(this.board, this.viewContainerRef);
-        this.quickInsertDrawer = new QuickInsertDrawer(this.board);
         super.ngOnInit();
+        this.initializeDrawer();
         this.node = MindElement.getNode(this.element);
         this.index = NODE_TO_INDEX.get(this.element) || 0;
         this.roughSVG = PlaitBoard.getRoughSVG(this.board);
         this.parentG = PlaitElement.getComponent(MindElement.getRoot(this.board, this.element)).rootG;
         this.drawShape();
         this.drawLink();
-        this.drawRichtext();
-        this.drawActiveG();
-        this.updateActiveClass();
-        this.drawMaskG();
+        this.drawText();
+        this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: this.textManage.isEditing });
         this.drawEmojis();
         this.drawExtend();
-        this.drawQuickInsert();
+    }
+    editTopic() {
+        this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: true });
+        this.textManage.edit(() => {
+            this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: false });
+        });
     }
     onContextChanged(value, previous) {
-        var _a, _b;
         const newNode = MindElement.getNode(value.element);
-        // resolve move node richtext lose issue
-        if (this.node !== newNode) {
-            if (this.foreignObject && this.foreignObject.children.length <= 0) {
-                (_a = this.foreignObject) === null || _a === void 0 ? void 0 : _a.appendChild((_b = this.richtextComponentRef) === null || _b === void 0 ? void 0 : _b.instance.editable);
-            }
-        }
         const isEqualNode = RectangleClient.isEqual(this.node, newNode);
         this.node = newNode;
         const isChangeTheme = this.board.operations.find(op => op.type === 'set_theme');
         if (!isEqualNode || value.element !== previous.element || isChangeTheme) {
-            this.drawActiveG();
-            this.updateActiveClass();
+            this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: this.textManage.isEditing });
             this.drawShape();
             this.drawLink();
-            this.updateRichtext();
-            this.drawMaskG();
-            this.drawExtend();
-            this.drawQuickInsert();
             this.drawEmojis();
+            this.drawExtend();
+            this.textManage.updateText(this.element.data.topic);
+            this.textManage.updateRectangle();
         }
         else {
             const hasSameSelected = value.selected === previous.selected;
             const hasSameParent = value.parent === previous.parent;
             if (!hasSameSelected) {
-                this.drawActiveG();
-                this.updateActiveClass();
+                this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: this.textManage.isEditing });
             }
             if (!hasSameParent) {
                 this.drawLink();
@@ -2516,22 +2639,11 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         }
     }
     drawEmojis() {
-        const g = this.emojisDrawer.drawEmojis(this.element);
+        const g = this.nodeEmojisDrawer.drawEmojis(this.element);
         if (g) {
             this.g.append(g);
         }
     }
-    drawQuickInsert() {
-        var _a;
-        this.quickInsertDrawer.destroy();
-        if (this.quickInsertDrawer.canDraw(this.element)) {
-            const g = this.quickInsertDrawer.draw(this.element);
-            if (hasAfterDraw(this.quickInsertDrawer)) {
-                this.quickInsertDrawer.afterDraw(this.element);
-            }
-            (_a = this.extendG) === null || _a === void 0 ? void 0 : _a.appendChild(g);
-        }
-    }
     drawShape() {
         this.destroyShape();
         const shape = getShapeByElement(this.board, this.node.origin);
@@ -2573,393 +2685,33 @@ class MindNodeComponent extends PlaitPluginElementComponent {
             this.linkG.remove();
         }
     }
-    drawMaskG() {
-        this.destroyMaskG();
-        const lineWidthOffset = 2;
-        const extendOffset = 15;
-        const nodeLayout = MindQueries.getLayoutByElement(this.node.origin);
-        const isTop = isTopLayout(nodeLayout);
-        const isRight = isRightLayout(nodeLayout);
-        const isBottom = isBottomLayout(nodeLayout);
-        const isLeft = isLeftLayout(nodeLayout);
-        const { x, y, width, height } = getRectangleByNode(this.node);
-        let drawX = x;
-        let drawY = y;
-        let drawWidth = x + width;
-        let drawHeight = y + height;
-        switch (true) {
-            case isTop:
-                drawX = x - lineWidthOffset;
-                drawY = y - extendOffset;
-                drawWidth = x + width + lineWidthOffset;
-                drawHeight = y + height + lineWidthOffset;
-                break;
-            case isBottom:
-                drawX = x - lineWidthOffset;
-                drawY = y - lineWidthOffset;
-                drawWidth = x + width + lineWidthOffset;
-                drawHeight = y + height + extendOffset;
-                break;
-            case isLeft:
-                drawX = x - extendOffset;
-                drawY = y - lineWidthOffset;
-                drawWidth = x + width + lineWidthOffset;
-                drawHeight = y + height + lineWidthOffset;
-                break;
-            case isRight:
-                drawX = x - lineWidthOffset;
-                drawY = y - lineWidthOffset;
-                drawWidth = x + width + extendOffset;
-                drawHeight = y + height + lineWidthOffset;
-                break;
-        }
-        this.maskG = drawRoundRectangle(this.roughSVG, drawX, drawY, drawWidth, drawHeight, { stroke: 'none', fill: 'rgba(255,255,255,0)', fillStyle: 'solid' }, true);
-        this.maskG.classList.add('mask');
-        this.maskG.setAttribute('visibility', 'visible');
-        this.g.append(this.maskG);
-        if (this.isEditable) {
-            this.disabledMaskG();
-        }
-        fromEvent(this.maskG, 'mouseenter')
-            .pipe(takeUntil(this.destroy$), filter(() => {
-            return PlaitBoard.isFocus(this.board) && !this.element.isCollapsed && !this.handActive;
-        }))
-            .subscribe(() => {
-            this.g.classList.add('hovered');
-        });
-        fromEvent(this.maskG, 'mouseleave')
-            .pipe(takeUntil(this.destroy$), filter(() => {
-            return PlaitBoard.isFocus(this.board) && !this.element.isCollapsed;
-        }))
-            .subscribe(() => {
-            this.g.classList.remove('hovered');
-        });
-    }
-    destroyMaskG() {
-        if (this.maskG) {
-            this.maskG.remove();
-            this.g.classList.remove('hovered');
-        }
-    }
-    enableMaskG() {
-        if (this.maskG) {
-            this.maskG.setAttribute('visibility', 'visible');
-        }
-    }
-    disabledMaskG() {
-        if (this.maskG) {
-            this.maskG.setAttribute('visibility', 'hidden');
-        }
-    }
-    drawActiveG() {
-        var _a, _b;
-        this.destroyActiveG();
-        (_a = this.abstractIncludedOutlineG) === null || _a === void 0 ? void 0 : _a.remove();
-        if (this.selected) {
-            if (AbstractNode.isAbstract(this.element)) {
-                this.updateAbstractIncludedOutline();
-            }
-            let { x, y, width, height } = getRectangleByNode(this.node);
-            const selectedStrokeG = drawRoundRectangle(this.roughSVG, x - 2, y - 2, x + width + 2, y + height + 2, { stroke: PRIMARY_COLOR, strokeWidth: 2, fill: '' }, true);
-            // 影响 mask 移入移出事件
-            selectedStrokeG.style.pointerEvents = 'none';
-            this.g.appendChild(selectedStrokeG);
-            this.activeG.push(selectedStrokeG);
-            if (((_b = this.richtextComponentRef) === null || _b === void 0 ? void 0 : _b.instance.plaitReadonly) === true) {
-                const selectedBackgroundG = drawRoundRectangle(this.roughSVG, x - 2, y - 2, x + width + 2, y + height + 2, { stroke: PRIMARY_COLOR, fill: PRIMARY_COLOR, fillStyle: 'solid' }, true);
-                selectedBackgroundG.style.opacity = '0.15';
-                // 影响双击事件
-                selectedBackgroundG.style.pointerEvents = 'none';
-                this.g.appendChild(selectedBackgroundG);
-                this.activeG.push(selectedBackgroundG, selectedStrokeG);
-            }
-        }
-    }
-    destroyActiveG() {
-        this.activeG.forEach(g => g.remove());
-        this.activeG = [];
-    }
-    updateActiveClass() {
-        if (!this.g) {
-            return;
-        }
-        if (this.selected) {
-            this.render2.addClass(this.g, 'active');
-        }
-        else {
-            this.render2.removeClass(this.g, 'active');
-        }
-    }
-    drawRichtext() {
-        const { richtextG, richtextComponentRef, foreignObject } = drawTopicByNode(this.board, this.node, this.viewContainerRef);
-        this.richtextComponentRef = richtextComponentRef;
-        this.richtextG = richtextG;
-        this.foreignObject = foreignObject;
-        this.render2.addClass(richtextG, 'richtext');
-        this.g.append(richtextG);
-    }
     drawExtend() {
         this.destroyExtend();
-        // create extend
         this.extendG = createG();
-        const collapseG = createG();
         this.extendG.classList.add('extend');
-        collapseG.classList.add('collapse-container');
         this.g.append(this.extendG);
-        this.extendG.append(collapseG);
-        if (this.node.origin.isRoot) {
-            return;
-        }
-        // interactive
-        fromEvent(collapseG, 'mouseup')
-            .pipe(filter(() => !this.handActive || !!PlaitBoard.isReadonly(this.board)), take(1))
-            .subscribe(() => {
-            const isCollapsed = !this.node.origin.isCollapsed;
-            const newElement = { isCollapsed };
-            const path = PlaitBoard.findPath(this.board, this.element);
-            Transforms.setNode(this.board, newElement, path);
-        });
-        const { x, y, width, height } = getRectangleByNode(this.node);
-        const stroke = getBranchColorByMindElement(this.board, this.element);
-        const branchWidth = getBranchWidthByMindElement(this.board, this.element);
-        const extendY = y + height / 2;
-        const nodeLayout = MindQueries.getCorrectLayoutByElement(this.board, this.element);
-        let extendLineXY = [
-            [x + width, extendY],
-            [x + width + EXTEND_OFFSET, extendY]
-        ];
-        let arrowYOffset = [-4, 1, -0.6, 4];
-        let arrowXOffset = [10, 5.5, 5.5, 10];
-        let extendLineXOffset = [0, 0];
-        let extendLineYOffset = [0, 0];
-        let circleOffset = [EXTEND_RADIUS / 2, 0];
-        if (isHorizontalLayout(nodeLayout) && !isIndentedLayout(nodeLayout)) {
-            extendLineYOffset =
-                getShapeByElement(this.board, this.node.origin) === MindElementShape.roundRectangle
-                    ? [0, 0]
-                    : [height / 2, height / 2];
-            if (isLeftLayout(nodeLayout)) {
-                //左
-                extendLineXOffset = [-width, -width - EXTEND_OFFSET * 2];
-                circleOffset = [-EXTEND_RADIUS / 2, 0];
-                arrowXOffset = [-10, -5.5, -5.5, -10];
-            }
-        }
-        else {
-            arrowXOffset = [-4, 0.6, -1, 4];
-            if (isTopLayout(nodeLayout)) {
-                //上
-                extendLineXOffset = [-width / 2, -width / 2 - EXTEND_OFFSET];
-                extendLineYOffset = [-height / 2, -height / 2 - EXTEND_OFFSET];
-                arrowYOffset = [-10, -5.5, -5.5, -10];
-                circleOffset = [0, -EXTEND_RADIUS / 2];
-            }
-            else {
-                //下
-                extendLineXOffset = [-width / 2, -width / 2 - EXTEND_OFFSET];
-                extendLineYOffset = [height / 2, height / 2 + EXTEND_OFFSET];
-                arrowYOffset = [10, 5.5, 5.5, 10];
-                circleOffset = [0, EXTEND_RADIUS / 2];
-            }
-        }
-        extendLineXY = [
-            [extendLineXY[0][0] + extendLineXOffset[0], extendLineXY[0][1] + extendLineYOffset[0]],
-            [extendLineXY[1][0] + extendLineXOffset[1], extendLineXY[1][1] + extendLineYOffset[1]]
-        ];
-        const extendLine = this.roughSVG.line(extendLineXY[0][0], extendLineXY[0][1], extendLineXY[1][0], extendLineXY[1][1], {
-            strokeWidth: branchWidth,
-            stroke
-        });
-        //绘制箭头
-        const hideArrowTopLine = this.roughSVG.line(extendLineXY[1][0] + arrowXOffset[0], extendLineXY[1][1] + arrowYOffset[0], extendLineXY[1][0] + arrowXOffset[1], extendLineXY[1][1] + arrowYOffset[1], {
-            stroke,
-            strokeWidth: 2
-        });
-        const hideArrowBottomLine = this.roughSVG.line(extendLineXY[1][0] + arrowXOffset[2], extendLineXY[1][1] + arrowYOffset[2], extendLineXY[1][0] + arrowXOffset[3], extendLineXY[1][1] + arrowYOffset[3], {
-            stroke,
-            strokeWidth: 2
-        });
-        if (this.node.origin.isCollapsed) {
-            const badge = this.roughSVG.circle(extendLineXY[1][0] + circleOffset[0], extendLineXY[1][1] + circleOffset[1], EXTEND_RADIUS, {
-                fill: stroke,
-                stroke,
-                fillStyle: 'solid'
-            });
-            let numberOffset = 0;
-            if (getChildrenCount(this.node.origin) >= 10)
-                numberOffset = -2;
-            if (getChildrenCount(this.node.origin) === 1)
-                numberOffset = 1;
-            const badgeText = createText(extendLineXY[1][0] + circleOffset[0] - 4 + numberOffset, extendLineXY[1][1] + circleOffset[1] + 4, stroke, `${getChildrenCount(this.node.origin)}`);
+        if (this.element.isCollapsed) {
             this.g.classList.add('collapsed');
-            badge.setAttribute('style', 'opacity: 0.15');
-            badgeText.setAttribute('style', 'font-size: 12px');
-            collapseG.appendChild(badge);
-            collapseG.appendChild(badgeText);
-            collapseG.appendChild(extendLine);
         }
         else {
             this.g.classList.remove('collapsed');
-            if (this.node.origin.children.length > 0) {
-                const hideCircleG = this.roughSVG.circle(extendLineXY[1][0] + circleOffset[0], extendLineXY[1][1] + circleOffset[1], EXTEND_RADIUS - 1, {
-                    fill: '#fff',
-                    stroke,
-                    strokeWidth: branchWidth > 3 ? 3 : branchWidth,
-                    fillStyle: 'solid'
-                });
-                collapseG.appendChild(hideCircleG);
-                collapseG.appendChild(hideArrowTopLine);
-                collapseG.appendChild(hideArrowBottomLine);
-            }
         }
+        this.nodeInsertDrawer.draw(this.element, this.extendG);
+        this.collapseDrawer.draw(this.element, this.extendG);
     }
     destroyExtend() {
         if (this.extendG) {
             this.extendG.remove();
         }
     }
-    destroyRichtext() {
-        if (this.richtextG) {
-            this.richtextG.remove();
-        }
-        if (this.richtextComponentRef) {
-            this.richtextComponentRef.destroy();
-        }
-    }
-    updateAbstractIncludedOutline(activeHandlePosition, resizingLocation) {
-        var _a;
-        (_a = this.abstractIncludedOutlineG) === null || _a === void 0 ? void 0 : _a.remove();
-        this.abstractIncludedOutlineG = drawAbstractIncludedOutline(this.board, this.roughSVG, this.element, activeHandlePosition, resizingLocation);
-        PlaitBoard.getHost(this.board).append(this.abstractIncludedOutlineG);
-    }
-    updateRichtext() {
-        updateRichText(this.node.origin.data.topic, this.richtextComponentRef);
-        updateMindNodeTopicSize(this.board, this.node, this.richtextG, this.isEditable);
-    }
-    startEditText(isEnd, isClear) {
-        if (!this.richtextComponentRef) {
-            throw new Error('undefined richtextComponentRef');
-        }
-        const richtextInstance = this.richtextComponentRef.instance;
-        this.isEditable = true;
-        IS_TEXT_EDITABLE.set(this.board, true);
-        this.disabledMaskG();
-        updateMindNodeTopicSize(this.board, this.node, this.richtextG, this.isEditable);
-        if (richtextInstance.plaitReadonly) {
-            richtextInstance.plaitReadonly = false;
-            this.richtextComponentRef.changeDetectorRef.detectChanges();
-            this.drawActiveG();
-            const location = isEnd ? Editor.end(richtextInstance.editor, [0]) : [0];
-            setFullSelectionAndFocus(richtextInstance.editor, location);
-            if (isClear) {
-                Editor.deleteBackward(richtextInstance.editor);
-            }
-            // handle invalid width and height (old data)
-            let { width, height } = getRichtextContentSize(richtextInstance.editable);
-            if (width !== this.element.width || height !== this.element.height) {
-                MindTransforms.setTopicSize(this.board, this.element, width, height);
-            }
-        }
-        let richtext = richtextInstance.plaitValue;
-        // use debounceTime to wait DOM render complete
-        const valueChange$ = richtextInstance.plaitChange
-            .pipe(debounceTime(0), filter(event => {
-            // 过滤掉 operations 中全是 set_selection 的操作
-            return !event.operations.every(op => Operation.isSelectionOperation(op));
-        }))
-            .subscribe(event => {
-            if (richtext === event.value) {
-                return;
-            }
-            this.updateRichtext();
-            // 更新富文本、更新宽高
-            let { width, height } = getRichtextContentSize(richtextInstance.editable);
-            MindTransforms.setTopic(this.board, this.element, event.value, width, height);
-            MERGING.set(this.board, true);
-        });
-        const composition$ = richtextInstance.plaitComposition.pipe(debounceTime(0)).subscribe(event => {
-            let { width, height } = getRichtextContentSize(richtextInstance.editable);
-            if (width < NODE_MIN_WIDTH) {
-                width = NODE_MIN_WIDTH;
-            }
-            if (event.isComposing && (width !== this.node.origin.width || height !== this.node.origin.height)) {
-                const newElement = {
-                    width: width / this.board.viewport.zoom,
-                    height: height / this.board.viewport.zoom
-                };
-                const path = PlaitBoard.findPath(this.board, this.element);
-                Transforms.setNode(this.board, newElement, path);
-                MERGING.set(this.board, true);
-            }
-        });
-        const mousedown$ = fromEvent(document, 'mousedown').subscribe((event) => {
-            const point = transformPoint(this.board, toPoint(event.x, event.y, PlaitBoard.getHost(this.board)));
-            const clickInNode = isHitMindElement(this.board, point, this.element);
-            if (clickInNode && !hasEditableTarget(richtextInstance.editor, event.target)) {
-                event.preventDefault();
-            }
-            else if (!clickInNode) {
-                // handle composition input state, like: Chinese IME Composition Input
-                timer(0).subscribe(() => {
-                    exitHandle();
-                    this.enableMaskG();
-                });
-            }
-        });
-        const editor = richtextInstance.editor;
-        const { keydown } = editor;
-        editor.keydown = (event) => {
-            if (event.isComposing) {
-                return;
-            }
-            if (event.key === 'Escape') {
-                event.preventDefault();
-                event.stopPropagation();
-                exitHandle();
-                this.drawActiveG();
-                this.enableMaskG();
-                return;
-            }
-            if (event.key === 'Enter' && !event.shiftKey) {
-                event.preventDefault();
-                event.stopPropagation();
-                exitHandle();
-                this.drawActiveG();
-                this.enableMaskG();
-                return;
-            }
-            if (event.key === 'Tab') {
-                event.preventDefault();
-                event.stopPropagation();
-                exitHandle();
-                this.drawActiveG();
-                this.drawMaskG();
-            }
-        };
-        const exitHandle = () => {
-            this.ngZone.run(() => {
-                var _a;
-                // unsubscribe
-                valueChange$.unsubscribe();
-                composition$.unsubscribe();
-                mousedown$.unsubscribe();
-                editor.keydown = keydown; // reset keydown
-                // editable status
-                MERGING.set(this.board, false);
-                richtextInstance.plaitReadonly = true;
-                (_a = this.richtextComponentRef) === null || _a === void 0 ? void 0 : _a.changeDetectorRef.markForCheck();
-                this.isEditable = false;
-                updateMindNodeTopicSize(this.board, this.node, this.richtextG, this.isEditable);
-                IS_TEXT_EDITABLE.set(this.board, false);
-            });
-        };
+    drawText() {
+        this.textManage.draw(this.element.data.topic);
+        this.g.append(this.textManage.g);
     }
     ngOnDestroy() {
-        var _a;
         super.ngOnDestroy();
-        (_a = this.abstractIncludedOutlineG) === null || _a === void 0 ? void 0 : _a.remove();
-        this.destroyRichtext();
-        this.emojisDrawer.destroy();
+        this.textManage.destroy();
+        this.nodeEmojisDrawer.destroy();
         this.destroy$.next();
         this.destroy$.complete();
         if (ELEMENT_TO_NODE.get(this.element) === this.node) {
@@ -2967,7 +2719,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         }
     }
 }
-MindNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindNodeComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+MindNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindNodeComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 MindNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.5", type: MindNodeComponent, selector: "plait-mind-node", usesInheritance: true, ngImport: i0, template: `
         <plait-children
             *ngIf="!element.isCollapsed"
@@ -2992,7 +2744,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; } });
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; } });
 
 const getLayoutOptions = (board) => {
     function getMainAxle(element, parent) {
@@ -3065,6 +2817,7 @@ class PlaitMindComponent extends MindNodeComponent {
     ngOnInit() {
         this.updateMindLayout();
         super.ngOnInit();
+        this.g.classList.add('root');
     }
     beforeContextChange(value) {
         if (value.element !== this.element && this.initialized) {
@@ -3105,19 +2858,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
 class MindModule {
 }
 MindModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-MindModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.5", ngImport: i0, type: MindModule, declarations: [PlaitMindComponent, MindNodeComponent], imports: [CommonModule, RichtextModule, PlaitModule], exports: [PlaitMindComponent, MindNodeComponent] });
-MindModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindModule, imports: [CommonModule, RichtextModule, PlaitModule] });
+MindModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.5", ngImport: i0, type: MindModule, declarations: [PlaitMindComponent, MindNodeComponent], imports: [CommonModule, TextModule, PlaitModule], exports: [PlaitMindComponent, MindNodeComponent] });
+MindModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindModule, imports: [CommonModule, TextModule, PlaitModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [PlaitMindComponent, MindNodeComponent],
-                    imports: [CommonModule, RichtextModule, PlaitModule],
+                    imports: [CommonModule, TextModule, PlaitModule],
                     exports: [PlaitMindComponent, MindNodeComponent]
                 }]
         }] });
 
 const DRAG_MOVE_BUFFER = 5;
-const withDnd = (board) => {
+const withNodeDnd = (board) => {
     const { mousedown, mousemove, globalMouseup } = board;
     let activeElements = [];
     let correspondingElements = [];
@@ -3465,7 +3218,7 @@ const withAbstract = (board) => {
                 newProperty =
                     abstractHandlePosition === AbstractHandlePosition.start ? { start: locationIndex + 1 } : { end: locationIndex };
             }
-            abstractComponent.updateAbstractIncludedOutline(abstractHandlePosition, location);
+            abstractComponent.activeDrawer.updateAbstractOutline(activeAbstractElement, abstractHandlePosition, location);
         }
         mousemove(event);
     };
@@ -3482,7 +3235,7 @@ const withAbstract = (board) => {
             }
             else {
                 const abstractComponent = PlaitElement.getComponent(activeAbstractElement);
-                abstractComponent.updateAbstractIncludedOutline();
+                abstractComponent.activeDrawer.updateAbstractOutline(activeAbstractElement);
             }
             activeAbstractElement = undefined;
         }
@@ -3534,22 +3287,29 @@ const withCreateMind = (board) => {
                     const nodeG = drawRoundRectangleByElement(board, nodeRectangle, emptyMind);
                     const topicRectangle = getTopicRectangleByElement(newBoard, nodeRectangle, emptyMind);
                     if (!fakeCreateNodeRef) {
-                        const { richtextComponentRef, richtextG, foreignObject } = drawTopicByElement(newBoard, topicRectangle, emptyMind);
+                        const textManage = new TextManage(board, PlaitBoard.getComponent(board).viewContainerRef, () => {
+                            return topicRectangle;
+                        });
+                        PlaitBoard.getComponent(board)
+                            .viewContainerRef.injector.get(NgZone)
+                            .run(() => {
+                            textManage.draw(emptyMind.data.topic);
+                        });
                         fakeCreateNodeRef = {
-                            instanceRef: richtextComponentRef,
+                            g: createG(),
                             nodeG,
-                            foreignObject,
-                            topicG: richtextG
+                            textManage
                         };
-                        richtextComponentRef.changeDetectorRef.detectChanges();
-                        PlaitBoard.getHost(board).append(...[fakeCreateNodeRef.nodeG, fakeCreateNodeRef.topicG]);
+                        fakeCreateNodeRef.g.classList.add('root');
+                        PlaitBoard.getHost(board).append(fakeCreateNodeRef.g);
+                        fakeCreateNodeRef.g.append(...[fakeCreateNodeRef.nodeG, textManage.g]);
                     }
                     else {
+                        fakeCreateNodeRef.textManage.updateRectangle(topicRectangle);
                         fakeCreateNodeRef.nodeG.remove();
                         fakeCreateNodeRef.nodeG = nodeG;
-                        PlaitBoard.getHost(board).append(nodeG);
-                        PlaitBoard.getHost(board).append(fakeCreateNodeRef.topicG);
-                        updateForeignObject(fakeCreateNodeRef.topicG, topicRectangle.width, topicRectangle.height, topicRectangle.x, topicRectangle.y);
+                        fakeCreateNodeRef.g.append(nodeG);
+                        fakeCreateNodeRef.g.append(fakeCreateNodeRef.textManage.g);
                     }
                 }
             });
@@ -3586,9 +3346,8 @@ const withCreateMind = (board) => {
     };
     function destroy() {
         if (fakeCreateNodeRef) {
-            fakeCreateNodeRef.instanceRef.destroy();
-            fakeCreateNodeRef.nodeG.remove();
-            fakeCreateNodeRef.topicG.remove();
+            fakeCreateNodeRef.textManage.destroy();
+            fakeCreateNodeRef.g.remove();
             fakeCreateNodeRef = null;
         }
     }
@@ -3620,6 +3379,68 @@ const isExpandHotkey = (keyboardEvent) => {
     return isKeyHotkey('mod+/', keyboardEvent);
 };
 
+const withNodeHover = (board) => {
+    const { mousemove, mouseleave } = board;
+    let hoveredMindElement = null;
+    board.mousemove = (event) => {
+        throttleRAF(() => {
+            let target = null;
+            const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
+            depthFirstRecursion(board, element => {
+                if (target) {
+                    return;
+                }
+                if (!MindElement.isMindElement(board, element)) {
+                    return;
+                }
+                const isHitElement = isHitMindElement(board, point, element);
+                if (isHitElement) {
+                    target = element;
+                }
+            }, node => {
+                if (PlaitBoard.isBoard(node) || board.isRecursion(node)) {
+                    return true;
+                }
+                else {
+                    return false;
+                }
+            }, true);
+            if (hoveredMindElement && target && hoveredMindElement === target) {
+                return;
+            }
+            if (hoveredMindElement) {
+                removeHovered(hoveredMindElement);
+            }
+            if (target) {
+                addHovered(target);
+                hoveredMindElement = target;
+            }
+            else {
+                hoveredMindElement = null;
+            }
+        });
+        mousemove(event);
+    };
+    board.mouseleave = (event) => {
+        if (hoveredMindElement) {
+            removeHovered(hoveredMindElement);
+            hoveredMindElement = null;
+        }
+        mouseleave(event);
+    };
+    return board;
+};
+const addHovered = (element) => {
+    const component = PlaitElement.getComponent(element);
+    component.g.classList.add('hovered');
+};
+const removeHovered = (element) => {
+    const component = PlaitElement.getComponent(element);
+    if (component && component.g) {
+        component.g.classList.remove('hovered');
+    }
+};
+
 const withMind = (board) => {
     const { drawElement, dblclick, keydown, insertFragment, setFragment, deleteFragment, isHitSelection, getRectangle, isMovable, isRecursion } = board;
     board.drawElement = (context) => {
@@ -3746,7 +3567,7 @@ const withMind = (board) => {
             if (!isVirtualKey(event)) {
                 event.preventDefault();
                 const selectedElement = selectedElements[0];
-                enterNodeEditing(selectedElement);
+                editTopic(selectedElement);
                 return;
             }
         }
@@ -3768,7 +3589,7 @@ const withMind = (board) => {
             .forEach(mindMap => {
             depthFirstRecursion(mindMap, node => {
                 if (!PlaitBoard.hasBeenTextEditing(board) && isHitMindElement(board, point, node)) {
-                    enterNodeEditing(node);
+                    editTopic(node);
                 }
             }, node => {
                 if (PlaitBoard.isBoard(node) || board.isRecursion(node)) {
@@ -3804,7 +3625,7 @@ const withMind = (board) => {
         }
         else {
             const text = data === null || data === void 0 ? void 0 : data.getData(`text/plain`);
-            const { width, height } = getSizeByText(text, PlaitBoard.getHost(board).parentElement, TOPIC_DEFAULT_MAX_WORD_COUNT);
+            const { width, height } = getTextSize(board, text, TOPIC_DEFAULT_MAX_WORD_COUNT);
             const selectedElements = getSelectedElements(board);
             if (text && selectedElements.length === 1) {
                 insertClipboardText(board, selectedElements[0], text, width, height);
@@ -3822,7 +3643,7 @@ const withMind = (board) => {
         MindTransforms.removeElements(board, selectedElements);
         deleteFragment(data);
     };
-    return withMindHotkey(withMindExtend(withCreateMind(withAbstract(withDnd(board)))));
+    return withNodeHover(withMindHotkey(withMindExtend(withCreateMind(withAbstract(withNodeDnd(board))))));
 };
 
 class MindEmojiBaseComponent {
@@ -3876,5 +3697,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, AbstractHandlePosition, AbstractResizeState, BASE, BRANCH_WIDTH, BaseDrawer, BranchShape, DefaultAbstractNodeStyle, DefaultNodeStyle, ELEMENT_TO_NODE, EXTEND_OFFSET, EXTEND_RADIUS, GRAY_COLOR, INHERIT_ATTRIBUTE_KEYS, IS_DRAGGING, LayoutDirection, LayoutDirectionsMap, MindColorfulThemeColor, MindDarkThemeColor, MindDefaultThemeColor, MindElement, MindElementShape, MindEmojiBaseComponent, MindModule, MindNode, MindNodeComponent, MindPointerType, MindQueries, MindRetroThemeColor, MindSoftThemeColor, MindStarryThemeColor, MindThemeColor, MindThemeColors, MindTransforms, NODE_MIN_WIDTH, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, QUICK_INSERT_CIRCLE_COLOR, QUICK_INSERT_CIRCLE_OFFSET, QUICK_INSERT_INNER_CROSS_COLOR, ROOT_TOPIC_FONT_SIZE, STROKE_WIDTH, TOPIC_COLOR, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, TRANSPARENT, addActiveOnDragOrigin, adjustAbstractToNode, adjustNodeToRoot, adjustRootToNode, canSetAbstract, copyNewNode, correctLayoutByDirection, createDefaultMind, createEmptyMind, createMindElement, deleteElementHandleAbstract, deleteElementsHandleRightNodeCount, detectDropTarget, directionCorrector, directionDetector, divideElementByParent, drawFakeDragNode, drawFakeDropNode, enterNodeEditing, extractNodesText, findLastChild, findLocationLeftIndex, getAbstractBranchColor, getAbstractBranchWidth, getAbstractHandleRectangle, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getBranchShapeByMindElement, getBranchWidthByMindElement, getChildrenCount, getCorrespondingAbstract, getDefaultBranchColor, getDefaultBranchColorByIndex, getDefaultLayout, getEmojiForeignRectangle, getEmojiRectangle, getFirstLevelElement, getHitAbstractHandle, getInCorrectLayoutDirection, getLayoutDirection$1 as getLayoutDirection, getLayoutReverseDirection, getLocationScope, getMindThemeColor, getNextBranchColor, getOverallAbstracts, getPathByDropTarget, getRectangleByElement, getRectangleByNode, getRectangleByResizingLocation, getRelativeStartEndByAbstractRef, getRootLayout, getShapeByElement, getStrokeByMindElement, getTopicRectangleByElement, getTopicRectangleByNode, getValidAbstractRefs, handleTouchedAbstract, hasAfterDraw, hasPreviousOrNextOfDropPath, insertElementHandleAbstract, insertElementHandleRightNodeCount, insertMindElement, isChildElement, isChildRight, isChildUp, isCorrectLayout, isDragging, isDropStandardRight, isHitEmojis, isHitMindElement, isInRightBranchOfStandardLayout, isMixedLayout, isSetAbstract, isValidTarget, isVirtualKey, removeActiveOnDragOrigin, separateChildren, setIsDragging, withMind, withMindExtend };
+export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, AbstractHandlePosition, AbstractResizeState, BASE, BRANCH_WIDTH, BaseDrawer, BranchShape, DefaultAbstractNodeStyle, DefaultNodeStyle, ELEMENT_TO_NODE, EXTEND_DIAMETER, EXTEND_OFFSET, GRAY_COLOR, INHERIT_ATTRIBUTE_KEYS, IS_DRAGGING, LayoutDirection, LayoutDirectionsMap, MindColorfulThemeColor, MindDarkThemeColor, MindDefaultThemeColor, MindElement, MindElementShape, MindEmojiBaseComponent, MindModule, MindNode, MindNodeComponent, MindPointerType, MindQueries, MindRetroThemeColor, MindSoftThemeColor, MindStarryThemeColor, MindThemeColor, MindThemeColors, MindTransforms, NODE_MIN_WIDTH, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, QUICK_INSERT_CIRCLE_COLOR, QUICK_INSERT_CIRCLE_OFFSET, QUICK_INSERT_INNER_CROSS_COLOR, ROOT_TOPIC_FONT_SIZE, ROOT_TOPIC_HEIGHT, STROKE_WIDTH, TOPIC_COLOR, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, TRANSPARENT, addActiveOnDragOrigin, adjustAbstractToNode, adjustNodeToRoot, adjustRootToNode, canSetAbstract, copyNewNode, correctLayoutByDirection, createDefaultMind, createEmptyMind, createMindElement, deleteElementHandleAbstract, deleteElementsHandleRightNodeCount, detectDropTarget, directionCorrector, directionDetector, divideElementByParent, drawFakeDragNode, drawFakeDropNode, editTopic, extractNodesText, findLastChild, findLocationLeftIndex, getAbstractBranchColor, getAbstractBranchWidth, getAbstractHandleRectangle, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getBranchShapeByMindElement, getBranchWidthByMindElement, getChildrenCount, getCorrespondingAbstract, getDefaultBranchColor, getDefaultBranchColorByIndex, getDefaultLayout, getEmojiForeignRectangle, getEmojiRectangle, getFirstLevelElement, getHitAbstractHandle, getInCorrectLayoutDirection, getLayoutDirection$1 as getLayoutDirection, getLayoutReverseDirection, getLocationScope, getMindThemeColor, getNextBranchColor, getOverallAbstracts, getPathByDropTarget, getRectangleByElement, getRectangleByNode, getRectangleByResizingLocation, getRelativeStartEndByAbstractRef, getRootLayout, getShapeByElement, getStrokeByMindElement, getTopicRectangleByElement, getTopicRectangleByNode, getValidAbstractRefs, handleTouchedAbstract, hasAfterDraw, hasPreviousOrNextOfDropPath, insertElementHandleAbstract, insertElementHandleRightNodeCount, insertMindElement, isChildElement, isChildRight, isChildUp, isCorrectLayout, isDragging, isDropStandardRight, isHitEmojis, isHitMindElement, isInRightBranchOfStandardLayout, isMixedLayout, isSetAbstract, isValidTarget, isVirtualKey, removeActiveOnDragOrigin, separateChildren, setIsDragging, withMind, withMindExtend };
 //# sourceMappingURL=plait-mind.mjs.map