@plait/mind 0.82.0-next.0 → 0.83.0

package/fesm2022/plait-mind.mjs

@@ -1,11 +1,9 @@
-import { DEFAULT_COLOR, DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, PlaitElement, PlaitNode, Path, isNullOrUndefined, PlaitBoard, getSelectedElements, getI18nValue, idCreator, Transforms, clearSelectedElement, addSelectedElement, distanceBetweenPointAndRectangle, RectangleClient, setDragging, depthFirstRecursion, getIsRecursionFunc, drawRoundRectangle, drawLinearPath, drawBezierPath, setStrokeLinecap, createG, createForeignObject, updateForeignObject, getRectangleByElements, toActiveRectangleFromViewBoxRectangle, ACTIVE_STROKE_WIDTH, SELECTION_RECTANGLE_CLASS_NAME, NODE_TO_PARENT, removeSelectedElement, PlaitHistoryBoard, createText, PlaitPointerType, NODE_TO_INDEX, isMainPointer, toViewBoxPoint, toHostPoint, getHitElementByPoint, distanceBetweenPointAndPoint, isDragging, CoreTransforms, toActivePointFromViewBoxPoint, BoardTransforms, throttleRAF, isContextmenu, temporaryDisableSelection, hotkeys, createClipboardContext, WritableClipboardType, Point, ResizeCursorClass, WritableClipboardOperationType, addOrCreateClipboardContext } from '@plait/core';
+import { DEFAULT_COLOR, DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, rgbaToHEX, PlaitElement, PlaitNode, Path, isNullOrUndefined, PlaitBoard, getSelectedElements, getI18nValue, idCreator, Transforms, clearSelectedElement, addSelectedElement, distanceBetweenPointAndRectangle, RectangleClient, setDragging, depthFirstRecursion, getIsRecursionFunc, drawRoundRectangle, drawLinearPath, drawBezierPath, setStrokeLinecap, createG, createForeignObject, updateForeignObject, getRectangleByElements, toActiveRectangleFromViewBoxRectangle, ACTIVE_STROKE_WIDTH, SELECTION_RECTANGLE_CLASS_NAME, NODE_TO_PARENT, removeSelectedElement, PlaitHistoryBoard, isSelectedElement, createText, isSelectionMoving, isDragging, isMovingElements, NODE_TO_INDEX, PlaitPointerType, isMainPointer, toViewBoxPoint, toHostPoint, getHitElementByPoint, distanceBetweenPointAndPoint, CoreTransforms, toActivePointFromViewBoxPoint, BoardTransforms, throttleRAF, isContextmenu, temporaryDisableSelection, hotkeys, createClipboardContext, WritableClipboardType, Point, ResizeCursorClass, WritableClipboardOperationType, addOrCreateClipboardContext } from '@plait/core';
 import { MindLayoutType, AbstractNode, isIndentedLayout, isHorizontalLogicLayout, ConnectingPosition, isHorizontalLayout, getNonAbstractChildren, isStandardLayout, isLeftLayout, isRightLayout, isVerticalLogicLayout, isTopLayout, isBottomLayout, getCorrectStartEnd, getAbstractLayout, GlobalLayout } from '@plait/layouts';
-import { StrokeStyle, getFirstTextManage, DEFAULT_FONT_FAMILY, measureElement, buildText, getFirstTextEditor, RESIZE_HANDLE_DIAMETER, getRectangleResizeHandleRefs, addElementOfFocusedImage, ImageGenerator, removeElementOfFocusedImage, getStrokeLineDash, Generator, PropertyTransforms, CommonElementFlavour, WithTextPluginKey, TextManage, isDrawingMode, isDndMode, setCreationMode, BoardCreationMode, isExpandHotkey, isTabHotkey, isEnterHotkey, isVirtualKey, isDelete, isSpaceHotkey, getElementOfFocusedImage, acceptImageTypes, buildImage, withResize, getElementsText } from '@plait/common';
-import { TEXT_DEFAULT_HEIGHT, PlaitMarkEditor, MarkTypes, DEFAULT_FONT_SIZE } from '@plait/text-plugins';
+import { StrokeStyle, getFirstTextManage, DEFAULT_FONT_FAMILY, measureElement, buildText, getFirstTextEditor, RESIZE_HANDLE_DIAMETER, getRectangleResizeHandleRefs, addElementOfFocusedImage, ImageGenerator, removeElementOfFocusedImage, getStrokeLineDash, getXDistanceBetweenPoint, moveXOfPoint, moveYOfPoint, Generator, PropertyTransforms, TRANSPARENT, isResizing, CommonElementFlavour, WithTextPluginKey, TextManage, isDrawingMode, isDndMode, setCreationMode, BoardCreationMode, isExpandHotkey, isTabHotkey, isEnterHotkey, isVirtualKey, isDelete, isSpaceHotkey, getElementOfFocusedImage, acceptImageTypes, buildImage, withResize, getElementsText } from '@plait/common';
+import { TEXT_DEFAULT_HEIGHT, PlaitMarkEditor, MarkTypes, DEFAULT_FONT_SIZE, FontSizes } from '@plait/text-plugins';
 import { Node as Node$1, Path as Path$1 } from 'slate';
 import { pointsOnBezierCurves } from 'points-on-curve';
-import { fromEvent } from 'rxjs';
-import { take, filter } from 'rxjs/operators';
 import { isHotkey } from 'is-hotkey';
 
 const ELEMENT_TO_NODE = new WeakMap();
@@ -180,11 +178,14 @@ const BASE = 4;
 const PRIMARY_COLOR = '#6698FF';
 const GRAY_COLOR = '#AAAAAA';
 const STROKE_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';
+const RESIZE_HANDLE_BUFFER_DISTANCE = 8;
+const NODE_MORE_LINE_DISTANCE = 10;
+const NODE_MORE_STROKE_WIDTH = 2;
+const NODE_MORE_ICON_DIAMETER = 20;
+const NODE_MORE_BRIDGE_DISTANCE = 10;
+const NODE_ADD_CIRCLE_COLOR = rgbaToHEX('#000000', 0.2);
+const NODE_ADD_HOVER_COLOR = '#6698FF';
+const NODE_ADD_INNER_CROSS_COLOR = 'white';
 const DEFAULT_MIND_IMAGE_WIDTH = 240;
 var MindI18nKey;
 (function (MindI18nKey) {
@@ -611,9 +612,9 @@ const getLayoutOptions = (board) => {
     }
     function getSecondAxle(element, parent) {
         if (element.isRoot) {
-            return BASE * 10;
+            return BASE * 12;
         }
-        return BASE * 6;
+        return BASE * 8.5;
     }
     return {
         getHeight(element) {
@@ -626,7 +627,7 @@ const getLayoutOptions = (board) => {
             const _layout = (parent && parent.layout) || getRootLayout(element);
             const isHorizontal = isHorizontalLayout(_layout);
             if (isIndentedLayout(_layout)) {
-                return BASE * 4;
+                return BASE * 6;
             }
             if (!isHorizontal) {
                 return getMainAxle(element, parent);
@@ -638,7 +639,7 @@ const getLayoutOptions = (board) => {
         getVerticalGap(element, parent) {
             const _layout = (parent && parent.layout) || getRootLayout(element);
             if (isIndentedLayout(_layout)) {
-                return BASE;
+                return BASE * 3.5;
             }
             const isHorizontal = isHorizontalLayout(_layout);
             if (isHorizontal) {
@@ -655,10 +656,10 @@ const getLayoutOptions = (board) => {
             return undefined;
         },
         getExtendHeight(node) {
-            return BASE * 6;
+            return 0;
         },
         getIndentedCrossLevelGap() {
-            return BASE * 2;
+            return BASE * 1;
         }
     };
 };
@@ -683,7 +684,7 @@ const getDefaultMindNameText = (board) => {
 const getAbstractNodeText = (board) => {
     return getI18nValue(board, MindI18nKey.abstractNodeText, ABSTRACT_NODE_TEXT);
 };
-const getTopicSize = (isRoot, isBranch, topic, manualWidth) => {
+const getTopicSize = (board, isRoot, isBranch, topic, manualWidth) => {
     let fontFamily = DEFAULT_FONT_FAMILY;
     let fontSize = TOPIC_FONT_SIZE;
     if (isRoot) {
@@ -694,12 +695,12 @@ const getTopicSize = (isRoot, isBranch, topic, manualWidth) => {
         fontFamily = DEFAULT_FONT_FAMILY;
     }
     const maxWidth = fontSize * TOPIC_DEFAULT_MAX_WORD_COUNT;
-    return measureElement(topic, { fontSize, fontFamily }, manualWidth ? manualWidth : maxWidth);
+    return measureElement(board, topic, { fontSize, fontFamily }, manualWidth ? manualWidth : maxWidth);
 };
 
 const createEmptyMind = (board, point) => {
     const text = getDefaultMindNameText(board);
-    const topicSize = getTopicSize(true, false, buildText(text));
+    const topicSize = getTopicSize(board, true, false, buildText(text));
     const element = createMindElement(text, topicSize.width, topicSize.height, { layout: MindLayoutType.right });
     element.isRoot = true;
     element.type = 'mindmap';
@@ -1394,14 +1395,6 @@ const getPointByPlacement = (client, placement) => {
     }
     return [x, y];
 };
-const getXDistanceBetweenPoint = (point1, point2, isHorizontalLayout) => {
-    if (isHorizontalLayout) {
-        return Math.abs(point1[0] - point2[0]);
-    }
-    else {
-        return Math.abs(point1[1] - point2[1]);
-    }
-};
 const getYDistanceBetweenPoint = (point1, point2, isHorizontalLayout) => {
     getXDistanceBetweenPoint(point1, point2, !isHorizontalLayout);
 };
@@ -1423,37 +1416,6 @@ const getLayoutDirection = (node, isHorizontal) => {
         }
     }
 };
-// 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]];
-    }
-    if (direction === LayoutDirection.bottom) {
-        return [point[0], point[1] + distance];
-    }
-    if (direction === LayoutDirection.top) {
-        return [point[0], point[1] - distance];
-    }
-    return [point[0] + distance, point[1]];
-};
-const moveYOfPoint = (point, distance, direction = LayoutDirection.right) => {
-    if (direction === LayoutDirection.bottom) {
-        return [point[0] + distance, point[1]];
-    }
-    if (direction === LayoutDirection.top) {
-        return [point[0] + distance, point[1]];
-    }
-    return [point[0], point[1] + distance];
-};
 const transformPlacement = (placement, direction) => {
     // to left
     if (direction === LayoutDirection.left) {
@@ -1564,7 +1526,9 @@ function drawLogicLink(board, parent, node, isHorizontal, defaultStrokeColor = n
     let endPoint = getPointByPlacement(nodeClient, endPlacement);
     // ② Determine the convex straight line
     const straightLineDistance = 8;
-    const beginPoint2 = hasStraightLine ? moveXOfPoint(beginPoint, straightLineDistance, linkDirection) : beginPoint;
+    const beginPoint2 = hasStraightLine
+        ? moveXOfPoint(beginPoint, straightLineDistance, linkDirection)
+        : beginPoint;
     let straightLine = hasStraightLine ? [beginPoint, beginPoint2, beginPoint2] : [];
     // ③ Determine the curve
     const beginBufferDistance = (parent.hGap + node.hGap) / 3;
@@ -2514,7 +2478,7 @@ const setAbstractByElements = (board, groupParent, group) => {
 };
 const insertAbstractNode = (board, path, start, end) => {
     const abstractNodeText = getAbstractNodeText(board);
-    const { width, height } = getTopicSize(false, false, buildText(abstractNodeText));
+    const { width, height } = getTopicSize(board, false, false, buildText(abstractNodeText));
     const mindElement = createMindElement(abstractNodeText, width, height, {
         strokeWidth: DefaultAbstractNodeStyle.branch.width,
         branchWidth: DefaultAbstractNodeStyle.branch.width
@@ -2752,201 +2716,202 @@ const MindTransforms = {
     insertMind
 };
 
-class NodePlusGenerator extends Generator {
-    canDraw(element) {
-        if (PlaitBoard.isReadonly(this.board) || element?.isCollapsed) {
-            return false;
-        }
-        return true;
+class NodeShapeGenerator extends Generator {
+    constructor(board) {
+        super(board, { prepend: true });
     }
-    draw(element) {
-        const plusG = createG();
-        plusG.classList.add('plus');
-        const node = MindElement.getNode(element);
-        const layout = MindQueries.getLayoutByElement(element);
-        const isHorizontal = isHorizontalLayout(layout);
-        let linkDirection = getLayoutDirection(node, isHorizontal);
-        if (isIndentedLayout(layout)) {
-            linkDirection = isTopLayout(layout) ? LayoutDirection.top : LayoutDirection.bottom;
-        }
-        const isUnderlineShape = getShapeByElement(this.board, element) === MindElementShape.underline;
-        const nodeClient = getRectangleByNode(node);
-        const branchWidth = getBranchWidthByMindElement(this.board, element);
-        const branchColor = PlaitMind.isMind(element)
-            ? getNextBranchColor(this.board, element)
-            : getBranchColorByMindElement(this.board, element);
-        let distance = 8;
-        let placement = [HorizontalPlacement.right, VerticalPlacement.middle];
-        transformPlacement(placement, linkDirection);
-        // underline shape and horizontal
-        if (isHorizontal && isUnderlineShape && !element.isRoot) {
-            placement[1] = VerticalPlacement.bottom;
-        }
-        let beginPoint = getPointByPlacement(nodeClient, placement);
-        if (element.children.length > 0 && !element.isRoot) {
-            beginPoint = moveXOfPoint(beginPoint, EXTEND_DIAMETER + 8, linkDirection);
-            distance = 5;
+    canDraw(element, data) {
+        const shape = getShapeByElement(this.board, element);
+        if (shape === MindElementShape.roundRectangle) {
+            return true;
         }
-        const endPoint = moveXOfPoint(beginPoint, distance, linkDirection);
-        const circleCenter = moveXOfPoint(endPoint, 8, linkDirection);
-        const line = PlaitBoard.getRoughSVG(this.board).line(beginPoint[0], beginPoint[1], endPoint[0], endPoint[1], {
-            stroke: branchColor,
-            strokeWidth: branchWidth
-        });
-        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'
-        });
-        const HLineBeginPoint = [circleCenter[0] - 5, circleCenter[1]];
-        const HLineEndPoint = [circleCenter[0] + 5, circleCenter[1]];
-        const VLineBeginPoint = [circleCenter[0], circleCenter[1] - 5];
-        const VLineEndPoint = [circleCenter[0], circleCenter[1] + 5];
-        const innerCrossHLine = PlaitBoard.getRoughSVG(this.board).line(HLineBeginPoint[0], HLineBeginPoint[1], HLineEndPoint[0], HLineEndPoint[1], {
-            stroke: QUICK_INSERT_INNER_CROSS_COLOR,
-            strokeWidth: 2
-        });
-        const innerCrossVLine = PlaitBoard.getRoughSVG(this.board).line(VLineBeginPoint[0], VLineBeginPoint[1], VLineEndPoint[0], VLineEndPoint[1], {
-            stroke: QUICK_INSERT_INNER_CROSS_COLOR,
-            strokeWidth: 2
-        });
-        plusG.appendChild(line);
-        plusG.appendChild(circle);
-        plusG.appendChild(innerCrossHLine);
-        plusG.appendChild(innerCrossVLine);
-        return plusG;
-    }
-    afterDraw(element) {
-        if (!this.g) {
-            throw new Error(`can not find quick insert g`);
-        }
-        fromEvent(this.g, 'pointerdown')
-            .pipe(take(1))
-            .subscribe(e => {
-            e.preventDefault();
-        });
-        fromEvent(this.g, 'pointerup')
-            .pipe(take(1))
-            .subscribe((event) => {
-            // wait the event period end of pointerup to otherwise the pointerup will cause new element lose selected state
-            setTimeout(() => {
-                const path = findNewChildNodePath(this.board, element);
-                insertMindElement(this.board, element, path);
-            }, 0);
-        });
+        return false;
+    }
+    draw(element, data) {
+        const rectangle = getRectangleByNode(data.node);
+        return drawRoundRectangleByElement(this.board, rectangle, data.node.origin);
     }
 }
 
-class CollapseGenerator extends Generator {
-    canDraw(element) {
-        if (element.children.length && !PlaitMind.isMind(element)) {
+class NodeMoreGenerator extends Generator {
+    static { this.key = 'mind-node-more'; }
+    canDraw(element, extraData) {
+        if (((extraData?.isHovered || extraData?.isHoveredCollapseArea || extraData?.isHoveredAddArea) && canHandleNodeMore(this.board)) ||
+            (extraData?.isSelected && isLastSelectedMindElement(this.board, element) && canHandleNodeMore(this.board)) ||
+            element.isCollapsed) {
             return true;
         }
         return false;
     }
-    draw(element) {
-        const collapseG = createG();
-        collapseG.classList.add('collapse');
-        const node = MindElement.getNode(element);
+    draw(element, extraData) {
+        const moreGContainer = createG();
         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;
+        const layoutDirection = getNodeMoreLayoutDirection(this.board, element);
+        const moreStartAndEnd = getMoreStartAndEnd(this.board, element, layoutDirection);
+        const collapseOrExpandCenter = moveXOfPoint(moreStartAndEnd[1], NODE_MORE_ICON_DIAMETER / 2, layoutDirection);
+        const hasChildren = element.children.length > 0;
+        const isShowCollapseOrAdd = !element.isCollapsed &&
+            (isSelectedElement(this.board, element) ||
+                !!extraData?.isHovered ||
+                !!extraData?.isHoveredCollapseArea ||
+                !!extraData?.isHoveredAddArea);
+        const isShowCollapse = isShowCollapseOrAdd && hasChildren && !PlaitMind.isMind(element);
+        const isShowAdd = isShowCollapseOrAdd && !PlaitBoard.isReadonly(this.board);
+        const addCenter = (isShowCollapseOrAdd && getAddCenterByCollapseOrExpandCenter(element, collapseOrExpandCenter, layoutDirection)) || null;
+        this.toggleCollapseOrAdd(collapseOrExpandCenter, addCenter, stroke, moreGContainer, isShowCollapse, isShowAdd, !!extraData?.isHoveredAddArea, !!extraData?.isShowCollapseAnimation, !!extraData?.isShowAddAnimation);
+        this.toggleExpandBadge(element, moreStartAndEnd, collapseOrExpandCenter, stroke, moreGContainer, !!element.isCollapsed, !!extraData?.isHoveredExpandArea);
+        return moreGContainer;
+    }
+    toggleCollapseOrAdd(center, addCenter, stroke, parentG, isShowCollapse, isShowAdd, isHoveredAddArea, isShowCollapseAnimation, isShowAddAnimation) {
+        this.collapseOrAddG?.remove();
+        if (!isShowCollapse && !isShowAdd) {
+            return;
         }
-        let placement = [HorizontalPlacement.right, VerticalPlacement.middle];
-        transformPlacement(placement, linkDirection);
-        // underline shape and horizontal
-        if (isHorizontal && isUnderlineShape && !element.isRoot) {
-            placement[1] = VerticalPlacement.bottom;
+        this.collapseOrAddG = createG();
+        if (isShowCollapse) {
+            const collapseG = createG();
+            this.collapseOrAddG.appendChild(collapseG);
+            collapseG.classList.add('collapse-button');
+            if (isShowCollapseAnimation) {
+                collapseG.classList.add('animated');
+            }
+            const collapseCircle = PlaitBoard.getRoughSVG(this.board).circle(center[0], center[1], NODE_MORE_ICON_DIAMETER, {
+                fill: '#fff',
+                stroke,
+                strokeWidth: NODE_MORE_STROKE_WIDTH,
+                fillStyle: 'solid'
+            });
+            const start = moveXOfPoint(center, -NODE_MORE_BRIDGE_DISTANCE / 2);
+            const end = moveXOfPoint(center, NODE_MORE_BRIDGE_DISTANCE / 2);
+            const collapseLine = PlaitBoard.getRoughSVG(this.board).line(start[0], start[1], end[0], end[1], {
+                fill: '#fff',
+                stroke,
+                strokeWidth: NODE_MORE_STROKE_WIDTH,
+                fillStyle: 'solid'
+            });
+            collapseG.appendChild(collapseCircle);
+            collapseG.appendChild(collapseLine);
+            setStrokeLinecap(collapseLine, 'round');
+        }
+        if (isShowAdd && addCenter) {
+            const addG = createG();
+            this.collapseOrAddG.appendChild(addG);
+            addG.classList.add('add-button');
+            if (isShowAddAnimation) {
+                addG.classList.add('animated');
+            }
+            const circle = PlaitBoard.getRoughSVG(this.board).circle(addCenter[0], addCenter[1], NODE_MORE_ICON_DIAMETER + NODE_MORE_STROKE_WIDTH, {
+                fill: isHoveredAddArea ? NODE_ADD_HOVER_COLOR : NODE_ADD_CIRCLE_COLOR,
+                stroke: TRANSPARENT,
+                fillStyle: 'solid'
+            });
+            const hLineBeginPoint = [addCenter[0] - NODE_MORE_BRIDGE_DISTANCE / 2, addCenter[1]];
+            const hLineEndPoint = [addCenter[0] + NODE_MORE_BRIDGE_DISTANCE / 2, addCenter[1]];
+            const vLineBeginPoint = [addCenter[0], addCenter[1] - NODE_MORE_BRIDGE_DISTANCE / 2];
+            const vLineEndPoint = [addCenter[0], addCenter[1] + NODE_MORE_BRIDGE_DISTANCE / 2];
+            const innerCrossHLine = PlaitBoard.getRoughSVG(this.board).line(hLineBeginPoint[0], hLineBeginPoint[1], hLineEndPoint[0], hLineEndPoint[1], {
+                stroke: NODE_ADD_INNER_CROSS_COLOR,
+                strokeWidth: NODE_MORE_STROKE_WIDTH
+            });
+            setStrokeLinecap(innerCrossHLine, 'round');
+            const innerCrossVLine = PlaitBoard.getRoughSVG(this.board).line(vLineBeginPoint[0], vLineBeginPoint[1], vLineEndPoint[0], vLineEndPoint[1], {
+                stroke: NODE_ADD_INNER_CROSS_COLOR,
+                strokeWidth: NODE_MORE_STROKE_WIDTH
+            });
+            setStrokeLinecap(innerCrossVLine, 'round');
+            addG.appendChild(circle);
+            addG.appendChild(innerCrossHLine);
+            addG.appendChild(innerCrossVLine);
         }
-        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, {
+        parentG.appendChild(this.collapseOrAddG);
+    }
+    toggleExpandBadge(element, moreStartAndEnd, center, stroke, parentG, isCollapsed, isHoveredExpandIcon) {
+        this.expandG?.remove();
+        if (!isCollapsed) {
+            return;
+        }
+        this.expandG = createG();
+        this.expandG.classList.add('expanded-button');
+        const endWithWidth = moreStartAndEnd[1];
+        const moreLine = PlaitBoard.getRoughSVG(this.board).line(moreStartAndEnd[0][0], moreStartAndEnd[0][1], endWithWidth[0], endWithWidth[1], {
             fill: stroke,
             stroke,
-            fillStyle: 'solid'
+            fillStyle: 'solid',
+            strokeWidth: NODE_MORE_STROKE_WIDTH
         });
-        const hideCircleG = PlaitBoard.getRoughSVG(this.board).circle(circleCenter[0], circleCenter[1], EXTEND_DIAMETER, {
-            fill: '#fff',
-            stroke,
-            strokeWidth: branchWidth > 3 ? 3 : branchWidth,
+        const backgroundColor = isHoveredExpandIcon ? rgbaToHEX(stroke, 0.4) : rgbaToHEX(stroke, 0.2);
+        const badgeBackground = PlaitBoard.getRoughSVG(this.board).circle(center[0], center[1], NODE_MORE_ICON_DIAMETER + NODE_MORE_STROKE_WIDTH, {
+            fill: backgroundColor,
+            stroke: TRANSPARENT,
             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, 'pointerdown')
-            .pipe(filter(() => !PlaitBoard.isPointer(this.board, PlaitPointerType.hand) || !!PlaitBoard.isReadonly(this.board)), take(1))
-            .subscribe((event) => {
-            event.preventDefault();
-            const isCollapsed = !element.isCollapsed;
-            const newElement = { isCollapsed };
-            const path = PlaitBoard.findPath(this.board, element);
-            Transforms.setNode(this.board, newElement, path);
+        const childrenCount = getChildrenCount(element);
+        let text = `${childrenCount}`;
+        let y = center[1] + 4.5;
+        if (childrenCount >= 99) {
+            text = '...';
+            y = center[1] + 1;
+        }
+        const { width, height } = measureElement(this.board, buildText(text), {
+            fontSize: Number(FontSizes.fontSize12),
+            fontFamily: DEFAULT_FONT_FAMILY
         });
-    }
-    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];
+        const badgeText = createText(center[0] - width / 2 + 0.5, y, stroke, `${text}`);
+        badgeText.setAttribute('style', `font-size: ${Number(FontSizes.fontSize12)}px;`);
+        this.expandG.appendChild(moreLine);
+        this.expandG.appendChild(badgeBackground);
+        this.expandG.appendChild(badgeText);
+        parentG.appendChild(this.expandG);
     }
 }
-
-class NodeShapeGenerator extends Generator {
-    constructor(board) {
-        super(board, { prepend: true });
+const getCollapseAndAddCenterPoint = (board, element) => {
+    const layoutDirection = getNodeMoreLayoutDirection(board, element);
+    const [startPoint, endPoint] = getMoreStartAndEnd(board, element, layoutDirection);
+    const collapseCenter = moveXOfPoint(endPoint, NODE_MORE_ICON_DIAMETER / 2, layoutDirection);
+    const addCenter = getAddCenterByCollapseOrExpandCenter(element, collapseCenter, layoutDirection);
+    return { collapseCenter, addCenter };
+};
+const getAddCenterByCollapseOrExpandCenter = (target, collapseOrExpandCenter, layoutDirection) => {
+    let addCenter = collapseOrExpandCenter;
+    if (target.children?.length > 0 && !PlaitMind.isMind(target)) {
+        addCenter = moveXOfPoint(addCenter, NODE_MORE_LINE_DISTANCE + NODE_MORE_ICON_DIAMETER, layoutDirection);
     }
-    canDraw(element, data) {
-        const shape = getShapeByElement(this.board, element);
-        if (shape === MindElementShape.roundRectangle) {
-            return true;
-        }
-        return false;
+    return addCenter;
+};
+const getNodeMoreLayoutDirection = (board, element) => {
+    const node = MindElement.getNode(element);
+    const layout = MindQueries.getLayoutByElement(element);
+    const isHorizontal = isHorizontalLayout(layout);
+    let layoutDirection = getLayoutDirection(node, isHorizontal);
+    if (isIndentedLayout(layout)) {
+        layoutDirection = isTopLayout(layout) ? LayoutDirection.top : LayoutDirection.bottom;
     }
-    draw(element, data) {
-        const rectangle = getRectangleByNode(data.node);
-        return drawRoundRectangleByElement(this.board, rectangle, data.node.origin);
+    return layoutDirection;
+};
+const getMoreStartAndEnd = (board, element, linkLineDirection) => {
+    const node = MindElement.getNode(element);
+    const isUnderlineShape = getShapeByElement(board, element) === MindElementShape.underline;
+    const nodeClient = getRectangleByNode(node);
+    let placement = [HorizontalPlacement.right, VerticalPlacement.middle];
+    transformPlacement(placement, linkLineDirection);
+    // underline shape and horizontal
+    const layout = MindQueries.getLayoutByElement(element);
+    const isHorizontal = isHorizontalLayout(layout);
+    if (isHorizontal && isUnderlineShape && !element.isRoot) {
+        placement[1] = VerticalPlacement.bottom;
     }
-}
+    let startPoint = getPointByPlacement(nodeClient, placement);
+    const endPoint = moveXOfPoint(startPoint, NODE_MORE_LINE_DISTANCE, linkLineDirection);
+    return [startPoint, endPoint];
+};
+const isLastSelectedMindElement = (board, element) => {
+    const selectedElements = getSelectedElements(board);
+    const selectedMindElements = selectedElements.filter((element) => MindElement.isMindElement(board, element)).reverse();
+    return selectedMindElements[selectedMindElements.length - 1] === element;
+};
+const canHandleNodeMore = (board) => {
+    return !isResizing(board) && !isSelectionMoving(board) && !isDragging(board) && !isMovingElements(board);
+};
 
 class MindNodeComponent extends CommonElementFlavour {
     get textManage() {
@@ -2963,8 +2928,7 @@ class MindNodeComponent extends CommonElementFlavour {
         this.nodeShapeGenerator = new NodeShapeGenerator(this.board);
         this.nodeEmojisGenerator = new NodeEmojisGenerator(this.board);
         this.activeGenerator = new NodeActiveGenerator(this.board);
-        this.nodePlusGenerator = new NodePlusGenerator(this.board);
-        this.collapseGenerator = new CollapseGenerator(this.board);
+        this.nodeMoreGenerator = new NodeMoreGenerator(this.board);
         this.imageGenerator = new ImageGenerator(this.board, {
             getRectangle: (element) => {
                 return getImageForeignRectangle(this.board, element);
@@ -3002,6 +2966,7 @@ class MindNodeComponent extends CommonElementFlavour {
         this.getRef().addGenerator(NodeActiveGenerator.key, this.activeGenerator);
         this.getRef().addGenerator(NodeEmojisGenerator.key, this.nodeEmojisGenerator);
         this.getRef().addGenerator(ImageGenerator.key, this.imageGenerator);
+        this.getRef().addGenerator(NodeMoreGenerator.key, this.nodeMoreGenerator);
         this.getRef().initializeTextManage(textManage);
         this.getRef().updateActiveSection = () => {
             this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
@@ -3021,8 +2986,8 @@ class MindNodeComponent extends CommonElementFlavour {
         this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
             selected: this.selected
         });
+        this.nodeMoreGenerator.processDrawing(this.element, this.getElementG());
         this.drawEmojis();
-        this.drawExtend();
         this.imageGenerator.processDrawing(this.element, this.getElementG());
         if (PlaitMind.isMind(this.context.parent)) {
             this.getElementG().classList.add('branch');
@@ -3036,10 +3001,10 @@ class MindNodeComponent extends CommonElementFlavour {
             this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
                 selected: this.selected
             });
+            this.nodeMoreGenerator.processDrawing(this.element, this.getElementG(), { isSelected: this.selected });
             this.nodeShapeGenerator.processDrawing(this.element, this.getElementG(), { node: this.node });
             this.drawLink();
             this.drawEmojis();
-            this.drawExtend();
             if (!MindElement.hasImage(previous.element) && MindElement.hasImage(this.element)) {
                 this.imageGenerator.processDrawing(this.element, this.getElementG());
             }
@@ -3058,6 +3023,9 @@ class MindNodeComponent extends CommonElementFlavour {
                 this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
                     selected: this.selected
                 });
+                this.nodeMoreGenerator.processDrawing(this.element, this.getElementG(), {
+                    isSelected: this.selected
+                });
             }
             if (!hasSameParent) {
                 this.drawLink();
@@ -3076,32 +3044,17 @@ class MindNodeComponent extends CommonElementFlavour {
         }
         const parent = MindElement.getParent(this.element);
         const parentNode = MindElement.getNode(parent);
-        if (this.linkG) {
-            this.linkG.remove();
+        if (this.linkLineG) {
+            this.linkLineG.remove();
         }
         const layout = MindQueries.getLayoutByElement(parent);
         if (AbstractNode.isAbstract(this.node.origin)) {
-            this.linkG = drawAbstractLink(this.board, this.node, isHorizontalLayout(layout));
+            this.linkLineG = drawAbstractLink(this.board, this.node, isHorizontalLayout(layout));
         }
         else {
-            this.linkG = drawLink(this.board, parentNode, this.node, isHorizontalLayout(layout));
+            this.linkLineG = drawLink(this.board, parentNode, this.node, isHorizontalLayout(layout));
         }
-        this.getElementG().append(this.linkG);
-    }
-    drawExtend() {
-        if (!this.extendG) {
-            this.extendG = createG();
-            this.extendG.classList.add('extend');
-            this.getElementG().append(this.extendG);
-        }
-        if (this.element.isCollapsed) {
-            this.getElementG().classList.add('collapsed');
-        }
-        else {
-            this.getElementG().classList.remove('collapsed');
-        }
-        this.nodePlusGenerator.processDrawing(this.element, this.extendG);
-        this.collapseGenerator.processDrawing(this.element, this.extendG);
+        this.getElementG().append(this.linkLineG);
     }
     drawTopic() {
         this.textManage.draw(this.element.data.topic);
@@ -3580,72 +3533,152 @@ const withMindHotkey = (baseBoard) => {
     return board;
 };
 
-const pointerMoveHandle = (board, event, nodeExtendHoveredRef) => {
+const withNodeMore = (board) => {
+    const { pointerMove, pointerLeave, pointerUp } = board;
+    let nodeMoreRef = null;
+    board.pointerMove = (event) => {
+        if (canHandleNodeMore(board)) {
+            throttleRAF(board, 'with-mind-node-hover-hit-test', () => {
+                // target has been deleted
+                if (nodeMoreRef && !PlaitElement.hasMounted(nodeMoreRef.target)) {
+                    nodeMoreRef = null;
+                }
+                const newNodeMoreRef = getNodeMoreRef(board, event.x, event.y);
+                if (nodeMoreRef && newNodeMoreRef && nodeMoreRef.target === newNodeMoreRef.target) {
+                    return;
+                }
+                if (nodeMoreRef) {
+                    toggleHoveredNodeCallback({
+                        target: nodeMoreRef.target,
+                        isHovered: false,
+                        isHoveredCollapseArea: false,
+                        isHoveredExpandArea: false,
+                        isHoveredAddArea: false
+                    });
+                }
+                if (newNodeMoreRef) {
+                    toggleHoveredNodeCallback(newNodeMoreRef);
+                    if (nodeMoreRef) {
+                        nodeMoreRef.target = newNodeMoreRef.target;
+                    }
+                    else {
+                        nodeMoreRef = newNodeMoreRef;
+                    }
+                }
+                else {
+                    nodeMoreRef = null;
+                }
+            });
+        }
+        pointerMove(event);
+    };
+    board.pointerUp = (event) => {
+        if (nodeMoreRef && (nodeMoreRef.isHoveredCollapseArea || nodeMoreRef.isHoveredExpandArea)) {
+            const isCollapsed = !nodeMoreRef.target.isCollapsed;
+            const newElement = { isCollapsed };
+            const path = PlaitBoard.findPath(board, nodeMoreRef.target);
+            Transforms.setNode(board, newElement, path);
+            setTimeout(() => {
+                const newNodeMoreRef = getNodeMoreRef(board, event.x, event.y);
+                if (newNodeMoreRef) {
+                    toggleHoveredNodeCallback(newNodeMoreRef);
+                    nodeMoreRef = newNodeMoreRef;
+                }
+                else {
+                    nodeMoreRef = null;
+                }
+            }, 0);
+            return;
+        }
+        if (nodeMoreRef && nodeMoreRef.isHoveredAddArea && !PlaitBoard.isReadonly(board)) {
+            if (nodeMoreRef) {
+                const path = findNewChildNodePath(board, nodeMoreRef.target);
+                insertMindElement(board, nodeMoreRef.target, path);
+            }
+            return;
+        }
+        pointerUp(event);
+    };
+    const toggleHoveredNodeCallback = (ref) => {
+        const elementRef = PlaitElement.getElementRef(ref.target);
+        const nodeMoreGenerator = elementRef?.getGenerator(NodeMoreGenerator.key);
+        if (nodeMoreGenerator) {
+            const g = PlaitElement.getElementG(ref.target);
+            nodeMoreGenerator.processDrawing(ref.target, g, {
+                isHovered: ref.isHovered,
+                isHoveredCollapseArea: ref.isHoveredCollapseArea,
+                isHoveredExpandArea: ref.isHoveredExpandArea,
+                isSelected: isSelectedElement(board, ref.target),
+                isHoveredAddArea: ref.isHoveredAddArea,
+                isShowCollapseAnimation: (ref.isHovered || ref.isHoveredCollapseArea) && !isSelectedElement(board, ref.target),
+                isShowAddAnimation: (ref.isHovered || ref.isHoveredAddArea) && !isSelectedElement(board, ref.target)
+            });
+        }
+    };
+    board.pointerLeave = (event) => {
+        if (nodeMoreRef) {
+            toggleHoveredNodeCallback({
+                target: nodeMoreRef.target,
+                isHovered: false,
+                isHoveredCollapseArea: false,
+                isHoveredExpandArea: false,
+                isHoveredAddArea: false
+            });
+        }
+        nodeMoreRef = null;
+        pointerLeave(event);
+    };
+    return board;
+};
+const getNodeMoreRef = (board, x, y) => {
     let target = null;
-    const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-    depthFirstRecursion(board, element => {
+    let isHovered = false;
+    let isHoveredCollapseArea = false;
+    let isHoveredExpandArea = false;
+    let isHoveredAddArea = false;
+    const point = toViewBoxPoint(board, toHostPoint(board, x, y));
+    depthFirstRecursion(board, (element) => {
         if (target) {
             return;
         }
         if (!MindElement.isMindElement(board, element)) {
             return;
         }
+        const isMind = PlaitMind.isMind(element);
         const isHitElement = isHitMindElement(board, point, element);
-        if (isHitElement) {
+        let isHitCollapseOrExpand = false;
+        let isHitAdd = false;
+        const { collapseCenter, addCenter } = getCollapseAndAddCenterPoint(board, element);
+        const collapseOrExpandIconRectangle = !isMind && RectangleClient.getRectangleByCenterPoint(collapseCenter, NODE_MORE_ICON_DIAMETER, NODE_MORE_ICON_DIAMETER);
+        isHitCollapseOrExpand =
+            collapseOrExpandIconRectangle &&
+                RectangleClient.isHit(RectangleClient.getRectangleByPoints([point, point]), collapseOrExpandIconRectangle);
+        const addIconRectangle = RectangleClient.getRectangleByCenterPoint(addCenter, NODE_MORE_ICON_DIAMETER, NODE_MORE_ICON_DIAMETER);
+        isHitAdd = RectangleClient.isHit(RectangleClient.getRectangleByPoints([point, point]), addIconRectangle);
+        if (isHitElement || isHitCollapseOrExpand || isHitAdd) {
+            isHovered = isHitElement;
+            if (element.children.length > 0) {
+                if (element.isCollapsed) {
+                    isHoveredExpandArea = isHitCollapseOrExpand;
+                }
+                else {
+                    isHoveredCollapseArea = isHitCollapseOrExpand;
+                }
+            }
+            isHoveredAddArea = isHitAdd;
             target = element;
         }
     }, getIsRecursionFunc(board), true);
-    if (nodeExtendHoveredRef && target && nodeExtendHoveredRef.element === target) {
-        return nodeExtendHoveredRef;
-    }
-    if (nodeExtendHoveredRef) {
-        removeHovered(nodeExtendHoveredRef.element);
-    }
-    if (target) {
-        addHovered(target);
-        if (nodeExtendHoveredRef) {
-            nodeExtendHoveredRef.element = target;
-        }
-        else {
-            nodeExtendHoveredRef = { element: target };
-        }
+    if (!target) {
+        return null;
     }
-    else {
-        nodeExtendHoveredRef = null;
-    }
-    return nodeExtendHoveredRef;
-};
-const pointerLeaveHandle = (board, event, nodeExtendHoveredRef) => {
-    if (nodeExtendHoveredRef) {
-        removeHovered(nodeExtendHoveredRef.element);
-    }
-};
-const addHovered = (element) => {
-    PlaitElement.getElementG(element).classList.add('hovered');
-};
-const removeHovered = (element) => {
-    PlaitElement.getElementG(element)?.classList?.remove('hovered');
-};
-
-const withNodeHoverHitTest = (board) => {
-    const { pointerMove, pointerLeave } = board;
-    let nodeExtendHoveredRef = null;
-    board.pointerMove = (event) => {
-        throttleRAF(board, 'with-mind-node-hover-hit-test', () => {
-            // element has been deleted
-            if (nodeExtendHoveredRef && !PlaitElement.hasMounted(nodeExtendHoveredRef.element)) {
-                nodeExtendHoveredRef = null;
-            }
-            nodeExtendHoveredRef = pointerMoveHandle(board, event, nodeExtendHoveredRef);
-        });
-        pointerMove(event);
-    };
-    board.pointerLeave = (event) => {
-        pointerLeaveHandle(board, event, nodeExtendHoveredRef);
-        nodeExtendHoveredRef = null;
-        pointerLeave(event);
+    return {
+        target,
+        isHovered,
+        isHoveredCollapseArea,
+        isHoveredExpandArea,
+        isHoveredAddArea
     };
-    return board;
 };
 
 const withNodeImage = (board) => {
@@ -3800,9 +3833,9 @@ const withNodeResize = (board) => {
     return board;
 };
 const getSelectedTarget = (board, point) => {
-    const selectedElements = getSelectedElements(board).filter(value => MindElement.isMindElement(board, value));
+    const selectedElements = getSelectedElements(board).filter((value) => MindElement.isMindElement(board, value));
     if (selectedElements.length > 0) {
-        const target = selectedElements.find(value => {
+        const target = selectedElements.find((value) => {
             const rectangle = getResizeActiveRectangle(board, value);
             return distanceBetweenPointAndRectangle(point[0], point[1], rectangle) <= 0;
         });
@@ -3813,7 +3846,12 @@ const getSelectedTarget = (board, point) => {
 const getResizeActiveRectangle = (board, element) => {
     const node = MindElement.getNode(element);
     const rectangle = getRectangleByNode(node);
-    return { x: rectangle.x + rectangle.width - EXTEND_OFFSET, y: rectangle.y, width: EXTEND_OFFSET * 2, height: rectangle.height };
+    return {
+        x: rectangle.x + rectangle.width - RESIZE_HANDLE_BUFFER_DISTANCE,
+        y: rectangle.y,
+        width: RESIZE_HANDLE_BUFFER_DISTANCE * 2,
+        height: rectangle.height
+    };
 };
 
 const withNodeImageResize = (board) => {
@@ -3912,7 +3950,7 @@ const insertClipboardData = (board, elements, targetPoint, operationType) => {
         if (hasTargetParent && operationType !== WritableClipboardOperationType.duplicate) {
             if (item.isRoot) {
                 newElement = adjustRootToNode(board, newElement);
-                const { width, height } = getTopicSizeByElement(newElement, targetParent);
+                const { width, height } = getTopicSizeByElement(board, newElement, targetParent);
                 newElement.width = width;
                 newElement.height = height;
             }
@@ -3931,7 +3969,7 @@ const insertClipboardData = (board, elements, targetPoint, operationType) => {
             }
             if (!item.isRoot) {
                 newElement = adjustNodeToRoot(board, newElement);
-                const { width, height } = getTopicSizeByElement(newElement);
+                const { width, height } = getTopicSizeByElement(board, newElement);
                 newElement.width = width;
                 newElement.height = height;
             }
@@ -3944,13 +3982,13 @@ const insertClipboardData = (board, elements, targetPoint, operationType) => {
     Transforms.addSelectionWithTemporaryElements(board, newELements);
 };
 const insertClipboardText = (board, targetParent, text) => {
-    const { width, height } = getTopicSize(false, PlaitMind.isMind(targetParent), buildText(text));
+    const { width, height } = getTopicSize(board, false, PlaitMind.isMind(targetParent), buildText(text));
     const newElement = createMindElement(text, Math.max(width, getFontSizeBySlateElement(text)), height, {});
     Transforms.insertNode(board, newElement, findNewChildNodePath(board, targetParent));
     Transforms.addSelectionWithTemporaryElements(board, [newElement]);
 };
-const getTopicSizeByElement = (element, parentElement) => {
-    return getTopicSize(PlaitMind.isMind(element), (parentElement && PlaitMind.isMind(parentElement)) || false, element.data.topic, element.manualWidth);
+const getTopicSizeByElement = (board, element, parentElement) => {
+    return getTopicSize(board, PlaitMind.isMind(element), (parentElement && PlaitMind.isMind(parentElement)) || false, element.data.topic, element.manualWidth);
 };
 
 const withMindFragment = (baseBoard) => {
@@ -4218,7 +4256,7 @@ const withMind = (baseBoard) => {
         }
         dblClick(event);
     };
-    return withEmoji(withNodeResize(withNodeImageResize(withNodeImage(withNodeHoverHitTest(withMindFragment(withMindHotkey(withMindExtend(withCreateMind(withAbstract(withNodeDnd(board)))))))))));
+    return withEmoji(withNodeResize(withNodeImageResize(withNodeImage(withNodeMore(withMindFragment(withMindHotkey(withMindExtend(withCreateMind(withAbstract(withNodeDnd(board)))))))))));
 };
 
 class MindEmojiBaseComponent {
@@ -4235,5 +4273,5 @@ class MindEmojiBaseComponent {
  * Generated bundle index. Do not edit.
  */
 
-export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, ABSTRACT_NODE_TEXT, AbstractHandlePosition, AbstractResizeState, BASE, BranchShape, DEFAULT_MIND_IMAGE_WIDTH, DefaultAbstractNodeStyle, DefaultNodeStyle, ELEMENT_TO_NODE, EXTEND_DIAMETER, EXTEND_OFFSET, GRAY_COLOR, INHERIT_ATTRIBUTE_KEYS, LayoutDirection, LayoutDirectionsMap, MIND_CENTRAL_TEXT, MindColorfulThemeColor, MindDarkThemeColor, MindDefaultThemeColor, MindElement, MindElementShape, MindEmojiBaseComponent, MindI18nKey, MindNode, MindNodeComponent, MindPointerType, MindQueries, MindRetroThemeColor, MindSoftThemeColor, MindStarryThemeColor, MindThemeColor, MindThemeColors, MindTransforms, NodeSpace, NodeTopicThreshold, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, QUICK_INSERT_CIRCLE_COLOR, QUICK_INSERT_CIRCLE_OFFSET, QUICK_INSERT_INNER_CROSS_COLOR, ROOT_TOPIC_FONT_SIZE, STROKE_WIDTH, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, WithMindPluginKey, addActiveOnDragOrigin, addImageFocus, adjustAbstractToNode, adjustNodeToRoot, adjustRootToNode, canSetAbstract, copyNewNode, correctLayoutByDirection, createEmptyMind, createMindElement, deleteElementHandleAbstract, deleteElementsHandleRightNodeCount, detectDropTarget, directionCorrector, directionDetector, divideElementByParent, drawFakeDragNode, drawFakeDropNode, editTopic, findLastChild, findLocationLeftIndex, findNewChildNodePath, findNewSiblingNodePath, getAbstractBranchColor, getAbstractBranchWidth, getAbstractHandleRectangle, getAbstractNodeText, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getBranchShapeByMindElement, getBranchWidthByMindElement, getChildrenCount, getCorrespondingAbstract, getDefaultBranchColor, getDefaultBranchColorByIndex, getDefaultLayout, getDefaultMindElementFontSize, getDefaultMindNameText, getEmojiFontSize, getEmojiForeignRectangle, getEmojiRectangle, getEmojisWidthHeight, getFillByElement, getFirstLevelElement, getFontSizeBySlateElement, getHitAbstractHandle, getHitImageResizeHandleDirection, getImageForeignRectangle, getInCorrectLayoutDirection, getLayoutDirection$1 as getLayoutDirection, getLayoutOptions, getLayoutReverseDirection, getLocationScope, getMindThemeColor, getNewNodeHeight, getNextBranchColor, getOverallAbstracts, getPathByDropTarget, getRectangleByElement, getRectangleByNode, getRectangleByResizingLocation, getRelativeStartEndByAbstractRef, getRootLayout, getSelectedMindElements, getShapeByElement, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getTopicRectangleByElement, getTopicRectangleByNode, getTopicSize, getValidAbstractRefs, handleTouchedAbstract, hasPreviousOrNextOfDropPath, insertElementHandleAbstract, insertElementHandleRightNodeCount, insertMindElement, isChildElement, isChildOfAbstract, isChildRight, isChildUp, isCorrectLayout, isDropStandardRight, isHitEmojis, isHitImage, isHitMindElement, isInRightBranchOfStandardLayout, isMixedLayout, isSetAbstract, isValidTarget, removeActiveOnDragOrigin, removeImageFocus, separateChildren, setMindDragging, withEmoji, withMind, withMindExtend };
+export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, ABSTRACT_NODE_TEXT, AbstractHandlePosition, AbstractResizeState, BASE, BranchShape, DEFAULT_MIND_IMAGE_WIDTH, DefaultAbstractNodeStyle, DefaultNodeStyle, ELEMENT_TO_NODE, GRAY_COLOR, INHERIT_ATTRIBUTE_KEYS, LayoutDirection, LayoutDirectionsMap, MIND_CENTRAL_TEXT, MindColorfulThemeColor, MindDarkThemeColor, MindDefaultThemeColor, MindElement, MindElementShape, MindEmojiBaseComponent, MindI18nKey, MindNode, MindNodeComponent, MindPointerType, MindQueries, MindRetroThemeColor, MindSoftThemeColor, MindStarryThemeColor, MindThemeColor, MindThemeColors, MindTransforms, NODE_ADD_CIRCLE_COLOR, NODE_ADD_HOVER_COLOR, NODE_ADD_INNER_CROSS_COLOR, NODE_MORE_BRIDGE_DISTANCE, NODE_MORE_ICON_DIAMETER, NODE_MORE_LINE_DISTANCE, NODE_MORE_STROKE_WIDTH, NodeSpace, NodeTopicThreshold, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, RESIZE_HANDLE_BUFFER_DISTANCE, ROOT_TOPIC_FONT_SIZE, STROKE_WIDTH, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, WithMindPluginKey, addActiveOnDragOrigin, addImageFocus, adjustAbstractToNode, adjustNodeToRoot, adjustRootToNode, canSetAbstract, copyNewNode, correctLayoutByDirection, createEmptyMind, createMindElement, deleteElementHandleAbstract, deleteElementsHandleRightNodeCount, detectDropTarget, directionCorrector, directionDetector, divideElementByParent, drawFakeDragNode, drawFakeDropNode, editTopic, findLastChild, findLocationLeftIndex, findNewChildNodePath, findNewSiblingNodePath, getAbstractBranchColor, getAbstractBranchWidth, getAbstractHandleRectangle, getAbstractNodeText, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getBranchShapeByMindElement, getBranchWidthByMindElement, getChildrenCount, getCorrespondingAbstract, getDefaultBranchColor, getDefaultBranchColorByIndex, getDefaultLayout, getDefaultMindElementFontSize, getDefaultMindNameText, getEmojiFontSize, getEmojiForeignRectangle, getEmojiRectangle, getEmojisWidthHeight, getFillByElement, getFirstLevelElement, getFontSizeBySlateElement, getHitAbstractHandle, getHitImageResizeHandleDirection, getImageForeignRectangle, getInCorrectLayoutDirection, getLayoutDirection$1 as getLayoutDirection, getLayoutOptions, getLayoutReverseDirection, getLocationScope, getMindThemeColor, getNewNodeHeight, getNextBranchColor, getOverallAbstracts, getPathByDropTarget, getRectangleByElement, getRectangleByNode, getRectangleByResizingLocation, getRelativeStartEndByAbstractRef, getRootLayout, getSelectedMindElements, getShapeByElement, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getTopicRectangleByElement, getTopicRectangleByNode, getTopicSize, getValidAbstractRefs, handleTouchedAbstract, hasPreviousOrNextOfDropPath, insertElementHandleAbstract, insertElementHandleRightNodeCount, insertMindElement, isChildElement, isChildOfAbstract, isChildRight, isChildUp, isCorrectLayout, isDropStandardRight, isHitEmojis, isHitImage, isHitMindElement, isInRightBranchOfStandardLayout, isMixedLayout, isSetAbstract, isValidTarget, removeActiveOnDragOrigin, removeImageFocus, separateChildren, setMindDragging, withEmoji, withMind, withMindExtend };
 //# sourceMappingURL=plait-mind.mjs.map