@plait/mind 0.55.1 → 0.56.1

package/fesm2022/plait-mind.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, NgZone, Directive, Input, HostListener } from '@angular/core';
-import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, PlaitElement, PlaitNode, Path, isNullOrUndefined, PlaitBoard, getSelectedElements, idCreator, Transforms, clearSelectedElement, addSelectedElement, distanceBetweenPointAndRectangle, RectangleClient, depthFirstRecursion, getIsRecursionFunc, drawRoundRectangle, drawLinearPath, drawBezierPath, createG, updateForeignObject, getRectangleByElements, NODE_TO_PARENT, createForeignObject, removeSelectedElement, PlaitHistoryBoard, setStrokeLinecap, ACTIVE_STROKE_WIDTH, createText, PlaitPointerType, NODE_TO_INDEX, isMainPointer, toViewBoxPoint, toHostPoint, getHitElementByPoint, distanceBetweenPointAndPoint, CoreTransforms, BOARD_TO_HOST, BoardTransforms, throttleRAF, isContextmenu, temporaryDisableSelection, hotkeys, createClipboardContext, WritableClipboardType, ResizeCursorClass, Point, addClipboardContext, PlaitPluginKey } from '@plait/core';
+import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, PlaitElement, PlaitNode, Path, isNullOrUndefined, PlaitBoard, getSelectedElements, idCreator, Transforms, clearSelectedElement, addSelectedElement, distanceBetweenPointAndRectangle, RectangleClient, depthFirstRecursion, getIsRecursionFunc, drawRoundRectangle, drawLinearPath, drawBezierPath, createG, createForeignObject, updateForeignObject, getRectangleByElements, setStrokeLinecap, ACTIVE_STROKE_WIDTH, NODE_TO_PARENT, removeSelectedElement, PlaitHistoryBoard, createText, PlaitPointerType, NODE_TO_INDEX, isMainPointer, toViewBoxPoint, toHostPoint, getHitElementByPoint, distanceBetweenPointAndPoint, CoreTransforms, BOARD_TO_HOST, BoardTransforms, throttleRAF, isContextmenu, temporaryDisableSelection, hotkeys, createClipboardContext, WritableClipboardType, ResizeCursorClass, Point, WritableClipboardOperationType, addClipboardContext, PlaitPluginKey } from '@plait/core';
 import { MindLayoutType, AbstractNode, isIndentedLayout, isHorizontalLayout, isHorizontalLogicLayout, ConnectingPosition, getNonAbstractChildren, isStandardLayout, isLeftLayout, isRightLayout, isVerticalLogicLayout, isTopLayout, isBottomLayout, getCorrectStartEnd, getAbstractLayout, GlobalLayout } from '@plait/layouts';
-import { TEXT_DEFAULT_HEIGHT, buildText, PlaitMarkEditor, MarkTypes, DEFAULT_FONT_SIZE, getTextSize, TextManage, ExitOrigin } from '@plait/text';
+import { ExitOrigin, TEXT_DEFAULT_HEIGHT, buildText, PlaitMarkEditor, MarkTypes, DEFAULT_FONT_SIZE, getTextSize, TextManage } from '@plait/text';
 import { fromEvent, Subject } from 'rxjs';
-import { getFirstTextEditor, RESIZE_HANDLE_DIAMETER, getRectangleResizeHandleRefs, addElementOfFocusedImage, removeElementOfFocusedImage, getFirstTextManage, PropertyTransforms, Generator, CommonPluginElement, ImageGenerator, WithTextPluginKey, isDrawingMode, isDndMode, setCreationMode, BoardCreationMode, isExpandHotkey, isTabHotkey, isEnterHotkey, isVirtualKey, isDelete, isSpaceHotkey, getElementOfFocusedImage, acceptImageTypes, buildImage, withResize, getElementsText } from '@plait/common';
+import { getFirstTextManage, getFirstTextEditor, RESIZE_HANDLE_DIAMETER, getRectangleResizeHandleRefs, addElementOfFocusedImage, ImageGenerator, removeElementOfFocusedImage, Generator, PropertyTransforms, CommonPluginElement, WithTextPluginKey, isDrawingMode, isDndMode, setCreationMode, BoardCreationMode, isExpandHotkey, isTabHotkey, isEnterHotkey, isVirtualKey, isDelete, isSpaceHotkey, getElementOfFocusedImage, acceptImageTypes, buildImage, withResize, getElementsText } from '@plait/common';
 import { Node as Node$1, Path as Path$1 } from 'slate';
 import { pointsOnBezierCurves } from 'points-on-curve';
 import { take, filter } from 'rxjs/operators';
@@ -479,12 +479,15 @@ const getShapeByElement = (board, element) => {
 };
 
 function editTopic(element) {
-    const component = PlaitElement.getComponent(element);
-    component?.editTopic();
+    const textManage = getFirstTextManage(element);
+    textManage?.edit((origin) => {
+        if (origin === ExitOrigin.default) {
+        }
+    });
 }
-const getSelectedMindElements = (board) => {
-    const selectedElements = getSelectedElements(board).filter(value => MindElement.isMindElement(board, value));
-    return selectedElements;
+const getSelectedMindElements = (board, elements) => {
+    const selectedElements = elements?.length ? elements : getSelectedElements(board);
+    return selectedElements.filter(value => MindElement.isMindElement(board, value));
 };
 
 const TOPIC_COLOR = '#333';
@@ -1081,15 +1084,17 @@ const adjustNodeToRoot = (board, node) => {
 
 const addImageFocus = (board, element) => {
     addElementOfFocusedImage(board, element);
-    const elementComponent = PlaitElement.getComponent(element);
-    elementComponent.imageGenerator.componentRef.instance.isFocus = true;
-    elementComponent.imageGenerator.componentRef.instance.cdr.markForCheck();
+    const commonElementRef = PlaitElement.getElementRef(element);
+    const imageGenerator = commonElementRef.getGenerator(ImageGenerator.key);
+    imageGenerator.componentRef.instance.isFocus = true;
+    imageGenerator.componentRef.instance.cdr.markForCheck();
 };
 const removeImageFocus = (board, element) => {
     removeElementOfFocusedImage(board);
-    const elementComponent = PlaitElement.getComponent(element);
-    elementComponent.imageGenerator.componentRef.instance.isFocus = false;
-    elementComponent.imageGenerator.componentRef.instance.cdr.markForCheck();
+    const commonElementRef = PlaitElement.getElementRef(element);
+    const imageGenerator = commonElementRef.getGenerator(ImageGenerator.key);
+    imageGenerator.componentRef.instance.isFocus = false;
+    imageGenerator.componentRef.instance.cdr.markForCheck();
 };
 
 /**
@@ -1593,17 +1598,90 @@ function drawLink(board, parentNode, node, isHorizontal, needDrawUnderline, defa
         : drawLogicLink(board, parentNode, node, isHorizontal, defaultStroke, defaultStrokeWidth);
 }
 
+class EmojiGenerator {
+    constructor(board, viewContainerRef) {
+        this.board = board;
+        this.viewContainerRef = viewContainerRef;
+        this.componentRef = null;
+    }
+    draw(emoji, element) {
+        this.destroy();
+        const componentType = this.board.getPluginOptions(WithMindPluginKey).emojiComponentType;
+        if (!componentType) {
+            throw new Error('can not find emoji component');
+        }
+        this.componentRef = this.viewContainerRef.createComponent(componentType);
+        this.componentRef.instance.emojiItem = emoji;
+        this.componentRef.instance.board = this.board;
+        this.componentRef.instance.element = element;
+        this.componentRef.instance.fontSize = getEmojiFontSize(element);
+    }
+    get nativeElement() {
+        if (this.componentRef) {
+            return this.componentRef.instance.nativeElement;
+        }
+        else {
+            return null;
+        }
+    }
+    destroy() {
+        if (this.componentRef) {
+            this.componentRef.destroy();
+            this.componentRef = null;
+        }
+    }
+}
+class NodeEmojisGenerator {
+    static { this.key = 'node-emojis-generator'; }
+    constructor(board, viewContainerRef) {
+        this.board = board;
+        this.viewContainerRef = viewContainerRef;
+        this.emojiGenerators = [];
+    }
+    drawEmojis(element) {
+        this.destroy();
+        if (MindElement.hasEmojis(element)) {
+            this.g = createG();
+            this.g.classList.add('emojis');
+            const foreignRectangle = getEmojiForeignRectangle(this.board, element);
+            const foreignObject = createForeignObject(foreignRectangle.x, foreignRectangle.y, foreignRectangle.width, foreignRectangle.height);
+            this.g.append(foreignObject);
+            const container = document.createElement('div');
+            container.classList.add('node-emojis-container');
+            foreignObject.append(container);
+            this.emojiGenerators = element.data.emojis.map(emojiItem => {
+                const drawer = new EmojiGenerator(this.board, this.viewContainerRef);
+                drawer.draw(emojiItem, element);
+                return drawer;
+            });
+            this.emojiGenerators.forEach(drawer => {
+                container.append(drawer.nativeElement);
+            });
+            return this.g;
+        }
+        return undefined;
+    }
+    destroy() {
+        if (this.g) {
+            this.g.remove();
+        }
+        this.emojiGenerators.forEach(drawer => drawer.destroy());
+        this.emojiGenerators = [];
+    }
+}
+
 const drawFakeDragNode = (board, element, offsetX, offsetY) => {
-    const activeComponent = PlaitElement.getComponent(element);
+    const ref = PlaitElement.getElementRef(element);
+    const mindNode = MindElement.getNode(element);
     const dragFakeNodeG = createG();
     dragFakeNodeG.classList.add('dragging', 'fake-node', 'plait-board-attached');
     const fakeDraggingNode = {
-        ...activeComponent.node,
+        ...mindNode,
         children: [],
-        x: activeComponent.node.x + offsetX,
-        y: activeComponent.node.y + offsetY
+        x: mindNode.x + offsetX,
+        y: mindNode.y + offsetY
     };
-    const textRectangle = getTopicRectangleByNode(board, activeComponent.node);
+    const textRectangle = getTopicRectangleByNode(board, mindNode);
     const fakeNodeG = drawRoundRectangleByNode(board, fakeDraggingNode);
     const richtextG = getFirstTextManage(element).g.cloneNode(true);
     updateForeignObject(richtextG, textRectangle.width, textRectangle.height, textRectangle.x + offsetX, textRectangle.y + offsetY);
@@ -1611,13 +1689,15 @@ const drawFakeDragNode = (board, element, offsetX, offsetY) => {
     dragFakeNodeG?.append(richtextG);
     // draw emojis
     if (MindElement.hasEmojis(element)) {
-        const fakeEmojisG = activeComponent.nodeEmojisGenerator.g.cloneNode(true);
+        const nodeEmojisGenerator = ref.getGenerator(NodeEmojisGenerator.key);
+        const fakeEmojisG = nodeEmojisGenerator.g.cloneNode(true);
         const foreignRectangle = getEmojiForeignRectangle(board, element);
         updateForeignObject(fakeEmojisG, foreignRectangle.width, foreignRectangle.height, foreignRectangle.x + offsetX, foreignRectangle.y + offsetY);
         dragFakeNodeG?.append(fakeEmojisG);
     }
     if (MindElement.hasImage(element)) {
-        const fakeImageG = activeComponent.imageGenerator.g.cloneNode(true);
+        const imageGenerator = ref.getGenerator(ImageGenerator.key);
+        const fakeImageG = imageGenerator.g.cloneNode(true);
         const foreignRectangle = getImageForeignRectangle(board, element);
         updateForeignObject(fakeImageG, foreignRectangle.width, foreignRectangle.height, foreignRectangle.x + offsetX, foreignRectangle.y + offsetY);
         dragFakeNodeG?.append(fakeImageG);
@@ -1750,6 +1830,148 @@ var AbstractResizeState;
     AbstractResizeState["end"] = "end";
 })(AbstractResizeState || (AbstractResizeState = {}));
 
+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));
+    handleBoardClass(board, activeHandlePosition, isHorizontal);
+    setStrokeLinecap(startHandle, 'round');
+    setStrokeLinecap(endHandle, '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');
+    }
+}
+function drawAbstractRoundRectangle(rs, x1, y1, x2, y2, isHorizontal, options) {
+    const width = Math.abs(x1 - x2);
+    const height = Math.abs(y1 - y2);
+    const radius = 5;
+    const handleGap = 4;
+    const handleLength = 10;
+    const handleSpace = handleLength + handleGap * 2;
+    if (isHorizontal) {
+        const handleSideLine = (width - handleSpace - radius * 2) / 2;
+        const sideLine = height - radius * 2;
+        return rs.path(`M${x1 + radius},${y1}
+            l${handleSideLine},0
+            m${handleSpace},0
+            l${handleSideLine},0
+            a${radius},${radius},0,0,1,${radius},${radius}
+            l0,${sideLine}
+            a${radius},${radius},0,0,1,-${radius},${radius}
+            l-${handleSideLine},0
+            m-${handleSpace},0
+            l-${handleSideLine},0
+            a${radius},${radius},0,0,1,-${radius},-${radius}
+            l0,-${sideLine}
+            a${radius},${radius},0,0,1,${radius},-${radius}`, options);
+    }
+    else {
+        const handleSideLine = (height - handleSpace - radius * 2) / 2;
+        const sideLine = width - radius * 2;
+        return rs.path(`M${x1 + radius},${y1}
+            l${sideLine},0
+            a${radius},${radius},0,0,1,${radius},${radius}
+            l0,${handleSideLine}
+            m0,${handleSpace}
+            l0,${handleSideLine}
+            a${radius},${radius},0,0,1,-${radius},${radius}
+            l-${sideLine},0
+            a${radius},${radius},0,0,1,-${radius},-${radius}
+            l0,-${handleSideLine}
+            m0,-${handleSpace}
+            l0,-${handleSideLine}
+            a${radius},${radius},0,0,1,${radius},-${radius}`, options);
+    }
+}
+
+class NodeActiveGenerator extends Generator {
+    static { this.key = 'mind-node-active'; }
+    canDraw(element, data) {
+        if (data.selected) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    draw(element, data) {
+        const activeG = createG();
+        const node = MindElement.getNode(element);
+        const rectangle = getRectangleByNode(node);
+        const strokeWidth = getStrokeWidthByElement(this.board, element);
+        const activeStrokeWidth = ACTIVE_STROKE_WIDTH;
+        const activeRectangle = RectangleClient.inflate(rectangle, activeStrokeWidth);
+        const strokeG = drawRoundRectangle(PlaitBoard.getRoughSVG(this.board), activeRectangle.x, activeRectangle.y, activeRectangle.x + activeRectangle.width, activeRectangle.y + activeRectangle.height, { stroke: PRIMARY_COLOR, strokeWidth: activeStrokeWidth, fill: '' }, true, DefaultNodeStyle.shape.rectangleRadius + (activeStrokeWidth + strokeWidth) / 2);
+        if (AbstractNode.isAbstract(element)) {
+            this.abstractOutlineG = drawAbstractIncludedOutline(this.board, PlaitBoard.getRoughSVG(this.board), element);
+            activeG.append(this.abstractOutlineG);
+            strokeG.classList.add('abstract-element');
+        }
+        activeG.appendChild(strokeG);
+        return activeG;
+    }
+    updateAbstractOutline(element, activeHandlePosition, resizingLocation) {
+        const abstractOutlineG = drawAbstractIncludedOutline(this.board, PlaitBoard.getRoughSVG(this.board), element, activeHandlePosition, resizingLocation);
+        if (this.abstractOutlineG) {
+            this.abstractOutlineG.replaceWith(abstractOutlineG);
+            this.abstractOutlineG = abstractOutlineG;
+        }
+    }
+}
+
 const getRectangleByResizingLocation = (abstractRectangle, location, activeHandlePosition, isHorizontal) => {
     if (isHorizontal) {
         if (activeHandlePosition === AbstractHandlePosition.start) {
@@ -1922,14 +2144,16 @@ function handleTouchedAbstract(board, touchedAbstract, endPoint) {
         return touchedAbstract;
     }
     if (touchedAbstract) {
-        const component = PlaitElement.getComponent(touchedAbstract);
-        component.activeGenerator.updateAbstractOutline(touchedAbstract);
+        const ref = PlaitElement.getElementRef(touchedAbstract);
+        const activeGenerator = ref.getGenerator(NodeActiveGenerator.key);
+        activeGenerator.updateAbstractOutline(touchedAbstract);
         touchedAbstract = undefined;
     }
     if (abstract) {
         touchedAbstract = abstract;
-        const component = PlaitElement.getComponent(touchedAbstract);
-        component.activeGenerator.updateAbstractOutline(touchedAbstract, touchedHandle);
+        const ref = PlaitElement.getElementRef(touchedAbstract);
+        const activeGenerator = ref.getGenerator(NodeActiveGenerator.key);
+        activeGenerator.updateAbstractOutline(touchedAbstract, touchedHandle);
     }
     return touchedAbstract;
 }
@@ -2169,10 +2393,6 @@ const MindElement = {
     },
     getEmojis(element) {
         return element.data.emojis;
-    },
-    hasMounted(element) {
-        const component = PlaitElement.getComponent(element);
-        return !!component;
     }
 };
 var MindElementShape;
@@ -2234,77 +2454,6 @@ function drawAbstractLink(board, node, isHorizontal) {
     return link;
 }
 
-class EmojiGenerator {
-    constructor(board, viewContainerRef) {
-        this.board = board;
-        this.viewContainerRef = viewContainerRef;
-        this.componentRef = null;
-    }
-    draw(emoji, element) {
-        this.destroy();
-        const componentType = this.board.getPluginOptions(WithMindPluginKey).emojiComponentType;
-        if (!componentType) {
-            throw new Error('can not find emoji component');
-        }
-        this.componentRef = this.viewContainerRef.createComponent(componentType);
-        this.componentRef.instance.emojiItem = emoji;
-        this.componentRef.instance.board = this.board;
-        this.componentRef.instance.element = element;
-        this.componentRef.instance.fontSize = getEmojiFontSize(element);
-    }
-    get nativeElement() {
-        if (this.componentRef) {
-            return this.componentRef.instance.nativeElement;
-        }
-        else {
-            return null;
-        }
-    }
-    destroy() {
-        if (this.componentRef) {
-            this.componentRef.destroy();
-            this.componentRef = null;
-        }
-    }
-}
-class NodeEmojisGenerator {
-    constructor(board, viewContainerRef) {
-        this.board = board;
-        this.viewContainerRef = viewContainerRef;
-        this.emojiGenerators = [];
-    }
-    drawEmojis(element) {
-        this.destroy();
-        if (MindElement.hasEmojis(element)) {
-            this.g = createG();
-            this.g.classList.add('emojis');
-            const foreignRectangle = getEmojiForeignRectangle(this.board, element);
-            const foreignObject = createForeignObject(foreignRectangle.x, foreignRectangle.y, foreignRectangle.width, foreignRectangle.height);
-            this.g.append(foreignObject);
-            const container = document.createElement('div');
-            container.classList.add('node-emojis-container');
-            foreignObject.append(container);
-            this.emojiGenerators = element.data.emojis.map(emojiItem => {
-                const drawer = new EmojiGenerator(this.board, this.viewContainerRef);
-                drawer.draw(emojiItem, element);
-                return drawer;
-            });
-            this.emojiGenerators.forEach(drawer => {
-                container.append(drawer.nativeElement);
-            });
-            return this.g;
-        }
-        return undefined;
-    }
-    destroy() {
-        if (this.g) {
-            this.g.remove();
-        }
-        this.emojiGenerators.forEach(drawer => drawer.destroy());
-        this.emojiGenerators = [];
-    }
-}
-
 const setAbstractsByRefs = (board, abstractRefs) => {
     abstractRefs.forEach((newProperty, element) => {
         const start = element.start + newProperty.start;
@@ -2454,6 +2603,10 @@ const insertSiblingNode = (board, element) => {
         insertMindElement(board, element, findNewSiblingNodePath(board, element));
     }
 };
+const insertMind = (board, mind) => {
+    Transforms.insertNode(board, mind, [board.children.length]);
+    Transforms.addSelectionWithTemporaryElements(board, [mind]);
+};
 
 const addEmoji = (board, element, emojiItem) => {
     const emojis = element.data.emojis || [];
@@ -2587,7 +2740,8 @@ const MindTransforms = {
     removeImage,
     setImage,
     insertChildNode,
-    insertSiblingNode
+    insertSiblingNode,
+    insertMind
 };
 
 class NodePlusGenerator extends Generator {
@@ -2672,147 +2826,6 @@ class NodePlusGenerator extends Generator {
     }
 }
 
-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));
-    handleBoardClass(board, activeHandlePosition, isHorizontal);
-    setStrokeLinecap(startHandle, 'round');
-    setStrokeLinecap(endHandle, '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');
-    }
-}
-function drawAbstractRoundRectangle(rs, x1, y1, x2, y2, isHorizontal, options) {
-    const width = Math.abs(x1 - x2);
-    const height = Math.abs(y1 - y2);
-    const radius = 5;
-    const handleGap = 4;
-    const handleLength = 10;
-    const handleSpace = handleLength + handleGap * 2;
-    if (isHorizontal) {
-        const handleSideLine = (width - handleSpace - radius * 2) / 2;
-        const sideLine = height - radius * 2;
-        return rs.path(`M${x1 + radius},${y1}
-            l${handleSideLine},0
-            m${handleSpace},0
-            l${handleSideLine},0
-            a${radius},${radius},0,0,1,${radius},${radius}
-            l0,${sideLine}
-            a${radius},${radius},0,0,1,-${radius},${radius}
-            l-${handleSideLine},0
-            m-${handleSpace},0
-            l-${handleSideLine},0
-            a${radius},${radius},0,0,1,-${radius},-${radius}
-            l0,-${sideLine}
-            a${radius},${radius},0,0,1,${radius},-${radius}`, options);
-    }
-    else {
-        const handleSideLine = (height - handleSpace - radius * 2) / 2;
-        const sideLine = width - radius * 2;
-        return rs.path(`M${x1 + radius},${y1}
-            l${sideLine},0
-            a${radius},${radius},0,0,1,${radius},${radius}
-            l0,${handleSideLine}
-            m0,${handleSpace}
-            l0,${handleSideLine}
-            a${radius},${radius},0,0,1,-${radius},${radius}
-            l-${sideLine},0
-            a${radius},${radius},0,0,1,-${radius},-${radius}
-            l0,-${handleSideLine}
-            m0,-${handleSpace}
-            l0,-${handleSideLine}
-            a${radius},${radius},0,0,1,${radius},-${radius}`, options);
-    }
-}
-
-class NodeActiveGenerator extends Generator {
-    canDraw(element, data) {
-        if (data.selected) {
-            return true;
-        }
-        else {
-            return false;
-        }
-    }
-    draw(element, data) {
-        const activeG = createG();
-        const node = MindElement.getNode(element);
-        const rectangle = getRectangleByNode(node);
-        const strokeWidth = getStrokeWidthByElement(this.board, element);
-        const activeStrokeWidth = ACTIVE_STROKE_WIDTH;
-        const activeRectangle = RectangleClient.inflate(rectangle, activeStrokeWidth);
-        const strokeG = drawRoundRectangle(PlaitBoard.getRoughSVG(this.board), activeRectangle.x, activeRectangle.y, activeRectangle.x + activeRectangle.width, activeRectangle.y + activeRectangle.height, { stroke: PRIMARY_COLOR, strokeWidth: activeStrokeWidth, fill: '' }, true, DefaultNodeStyle.shape.rectangleRadius + (activeStrokeWidth + strokeWidth) / 2);
-        if (AbstractNode.isAbstract(element)) {
-            this.abstractOutlineG = drawAbstractIncludedOutline(this.board, PlaitBoard.getRoughSVG(this.board), element);
-            activeG.append(this.abstractOutlineG);
-            strokeG.classList.add('abstract-element');
-        }
-        activeG.appendChild(strokeG);
-        return activeG;
-    }
-    updateAbstractOutline(element, activeHandlePosition, resizingLocation) {
-        const abstractOutlineG = drawAbstractIncludedOutline(this.board, PlaitBoard.getRoughSVG(this.board), element, activeHandlePosition, resizingLocation);
-        if (this.abstractOutlineG) {
-            this.abstractOutlineG.replaceWith(abstractOutlineG);
-            this.abstractOutlineG = abstractOutlineG;
-        }
-    }
-}
-
 class CollapseGenerator extends Generator {
     canDraw(element) {
         if (element.children.length && !PlaitMind.isMind(element)) {
@@ -2928,16 +2941,15 @@ class MindNodeComponent extends CommonPluginElement {
     get textManage() {
         return this.getTextManages()[0];
     }
-    constructor(cdr) {
-        super(cdr);
-        this.cdr = cdr;
+    constructor() {
+        super();
         this.shapeG = null;
         this.destroy$ = new Subject();
         this.trackBy = (index, node) => {
             return node.origin.id;
         };
     }
-    initializeDrawer() {
+    initializeGenerator() {
         this.nodeShapeGenerator = new NodeShapeGenerator(this.board);
         this.nodeEmojisGenerator = new NodeEmojisGenerator(this.board, this.viewContainerRef);
         this.activeGenerator = new NodeActiveGenerator(this.board);
@@ -2978,10 +2990,13 @@ class MindNodeComponent extends CommonPluginElement {
             }
         });
         this.initializeTextManages([textManage]);
+        this.getRef().addGenerator(NodeActiveGenerator.key, this.activeGenerator);
+        this.getRef().addGenerator(NodeEmojisGenerator.key, this.nodeEmojisGenerator);
+        this.getRef().addGenerator(ImageGenerator.key, this.imageGenerator);
     }
     ngOnInit() {
         super.ngOnInit();
-        this.initializeDrawer();
+        this.initializeGenerator();
         this.node = MindElement.getNode(this.element);
         this.index = NODE_TO_INDEX.get(this.element) || 0;
         this.roughSVG = PlaitBoard.getRoughSVG(this.board);
@@ -2989,8 +3004,7 @@ class MindNodeComponent extends CommonPluginElement {
         this.drawLink();
         this.drawTopic();
         this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
-            selected: this.selected,
-            isEditing: this.textManage.isEditing
+            selected: this.selected
         });
         this.drawEmojis();
         this.drawExtend();
@@ -3000,14 +3014,14 @@ class MindNodeComponent extends CommonPluginElement {
         }
     }
     onContextChanged(value, previous) {
+        this.initializeWeakMap();
         const newNode = MindElement.getNode(value.element);
         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.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
-                selected: this.selected,
-                isEditing: this.textManage.isEditing
+                selected: this.selected
             });
             this.nodeShapeGenerator.processDrawing(this.element, this.getElementG(), { node: this.node });
             this.drawLink();
@@ -3029,8 +3043,7 @@ class MindNodeComponent extends CommonPluginElement {
             const hasSameParent = value.parent === previous.parent;
             if (!hasSameSelected) {
                 this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
-                    selected: this.selected,
-                    isEditing: this.textManage.isEditing
+                    selected: this.selected
                 });
             }
             if (!hasSameParent) {
@@ -3085,23 +3098,8 @@ class MindNodeComponent extends CommonPluginElement {
         this.textManage.updateText(this.element.data.topic);
         this.textManage.updateRectangle();
     }
-    editTopic() {
-        this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
-            selected: this.selected,
-            isEditing: true
-        });
-        this.textManage.edit((origin) => {
-            if (origin === ExitOrigin.default) {
-                this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
-                    selected: this.selected,
-                    isEditing: false
-                });
-            }
-        });
-    }
     ngOnDestroy() {
         super.ngOnDestroy();
-        this.textManage.destroy();
         this.nodeEmojisGenerator.destroy();
         this.imageGenerator.destroy();
         this.activeGenerator.destroy();
@@ -3110,8 +3108,9 @@ class MindNodeComponent extends CommonPluginElement {
         if (ELEMENT_TO_NODE.get(this.element) === this.node) {
             ELEMENT_TO_NODE.delete(this.element);
         }
+        this.destroyTextManages();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MindNodeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MindNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: MindNodeComponent, isStandalone: true, selector: "plait-mind-node", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MindNodeComponent, decorators: [{
@@ -3122,7 +3121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
+        }], ctorParameters: () => [] });
 
 class PlaitMindComponent extends MindNodeComponent {
     ngOnInit() {
@@ -3369,11 +3368,9 @@ const withAbstract = (board) => {
         if (abstractHandlePosition && activeAbstractElement) {
             // prevent text from being selected
             event.preventDefault();
-            const abstractComponent = PlaitElement.getComponent(activeAbstractElement);
-            const element = abstractComponent.element;
             const nodeLayout = MindQueries.getCorrectLayoutByElement(board, activeAbstractElement);
             const isHorizontal = isHorizontalLayout(nodeLayout);
-            const parentElement = MindElement.getParent(element);
+            const parentElement = MindElement.getParent(activeAbstractElement);
             let children = parentElement.children;
             const parentLayout = MindQueries.getLayoutByElement(parentElement);
             if (isStandardLayout(parentLayout)) {
@@ -3391,7 +3388,7 @@ const withAbstract = (board) => {
             }
             const resizingLocation = isHorizontal ? endPoint[1] : endPoint[0];
             const parent = MindElement.getNode(parentElement);
-            const scope = getLocationScope(board, abstractHandlePosition, children, element, parent, isHorizontal);
+            const scope = getLocationScope(board, abstractHandlePosition, children, activeAbstractElement, parent, isHorizontal);
             const location = Math.min(scope.max, Math.max(scope.min, resizingLocation));
             let locationIndex = findLocationLeftIndex(board, children, location, isHorizontal);
             const isPropertyUnchanged = (abstractHandlePosition === AbstractHandlePosition.start &&
@@ -3403,7 +3400,7 @@ const withAbstract = (board) => {
             else {
                 if (isStandardLayout(parent.layout)) {
                     const rightNodeCount = parent.origin.rightNodeCount;
-                    let start = element.start;
+                    let start = activeAbstractElement.start;
                     if (start >= rightNodeCount) {
                         locationIndex += rightNodeCount;
                     }
@@ -3411,7 +3408,9 @@ const withAbstract = (board) => {
                 newProperty =
                     abstractHandlePosition === AbstractHandlePosition.start ? { start: locationIndex + 1 } : { end: locationIndex };
             }
-            abstractComponent.activeGenerator.updateAbstractOutline(activeAbstractElement, abstractHandlePosition, location);
+            const ref = PlaitElement.getElementRef(activeAbstractElement);
+            const activeGenerator = ref.getGenerator(NodeActiveGenerator.key);
+            activeGenerator.updateAbstractOutline(activeAbstractElement, abstractHandlePosition, location);
         }
         pointerMove(event);
     };
@@ -3427,8 +3426,9 @@ const withAbstract = (board) => {
                 Transforms.setNode(board, newProperty, path);
             }
             else {
-                const abstractComponent = PlaitElement.getComponent(activeAbstractElement);
-                abstractComponent.activeGenerator.updateAbstractOutline(activeAbstractElement);
+                const ref = PlaitElement.getElementRef(activeAbstractElement);
+                const activeGenerator = ref.getGenerator(NodeActiveGenerator.key);
+                activeGenerator.updateAbstractOutline(activeAbstractElement);
             }
             activeAbstractElement = undefined;
         }
@@ -3455,9 +3455,7 @@ const withCreateMind = (board) => {
         if (!PlaitBoard.isReadonly(board) && movingPoint && isDrawingMode(board) && isMindPointer) {
             movingPoint = toViewBoxPoint(board, toHostPoint(board, movingPoint[0], movingPoint[1]));
             const emptyMind = createEmptyMind(newBoard, movingPoint);
-            Transforms.insertNode(board, emptyMind, [board.children.length]);
-            clearSelectedElement(board);
-            addSelectedElement(board, emptyMind);
+            MindTransforms.insertMind(board, emptyMind);
             BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
             return;
         }
@@ -3516,13 +3514,12 @@ const withCreateMind = (board) => {
     };
     newBoard.pointerUp = (event) => {
         if (emptyMind) {
-            Transforms.insertNode(board, emptyMind, [board.children.length]);
-            clearSelectedElement(board);
-            addSelectedElement(board, emptyMind);
+            MindTransforms.insertMind(board, emptyMind);
             BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
             emptyMind = null;
+            destroy();
+            return;
         }
-        destroy();
         pointerUp(event);
     };
     board.keyDown = (event) => {
@@ -3710,12 +3707,12 @@ const withNodeImage = (board) => {
         }
         globalPointerUp(event);
     };
-    board.buildFragment = (clipboardContext, rectangle, type) => {
+    board.buildFragment = (clipboardContext, rectangle, operationType, originData) => {
         const selectedImageElement = getElementOfFocusedImage(board);
         if (selectedImageElement) {
             clipboardContext = createClipboardContext(WritableClipboardType.medias, [selectedImageElement.data.image], '');
         }
-        return buildFragment(clipboardContext, rectangle, type);
+        return buildFragment(clipboardContext, rectangle, operationType, originData);
     };
     board.deleteFragment = (elements) => {
         const selectedImageElement = getElementOfFocusedImage(board);
@@ -3724,7 +3721,7 @@ const withNodeImage = (board) => {
         }
         deleteFragment(elements);
     };
-    board.insertFragment = (clipboardData, targetPoint) => {
+    board.insertFragment = (clipboardData, targetPoint, operationType) => {
         const selectedElements = getSelectedElements(board);
         const isSelectedImage = !!getElementOfFocusedImage(board);
         const isSingleSelection = selectedElements.length === 1 && MindElement.isMindElement(board, selectedElements[0]);
@@ -3746,7 +3743,7 @@ const withNodeImage = (board) => {
                 return;
             }
         }
-        insertFragment(clipboardData, targetPoint);
+        insertFragment(clipboardData, targetPoint, operationType);
     };
     return board;
 };
@@ -3897,7 +3894,7 @@ const buildClipboardData = (board, selectedElements, startPoint) => {
     });
     return result;
 };
-const insertClipboardData = (board, elements, targetPoint) => {
+const insertClipboardData = (board, elements, targetPoint, operationType) => {
     let newElement, path;
     const selectedElements = getSelectedElements(board);
     let newELements = [];
@@ -3907,7 +3904,7 @@ const insertClipboardData = (board, elements, targetPoint) => {
     const nonAbstractChildrenLength = targetParent && getNonAbstractChildren(targetParent).length;
     elements.forEach((item, index) => {
         newElement = copyNewNode(item);
-        if (hasTargetParent) {
+        if (hasTargetParent && operationType !== WritableClipboardOperationType.duplicate) {
             if (item.isRoot) {
                 newElement = adjustRootToNode(board, newElement);
                 const styles = PlaitMind.isMind(targetParent) ? { fontFamily: BRANCH_FONT_FAMILY } : { fontFamily: DEFAULT_FONT_FAMILY };
@@ -3977,8 +3974,8 @@ const withMindFragment = (baseBoard) => {
             firstLevelElements = null;
         }
     };
-    board.buildFragment = (clipboardContext, rectangle, type) => {
-        const targetMindElements = getSelectedMindElements(board);
+    board.buildFragment = (clipboardContext, rectangle, operationType, originData) => {
+        const targetMindElements = getSelectedMindElements(board, originData);
         const firstLevelElements = getFirstLevelElement(targetMindElements);
         if (firstLevelElements.length) {
             const elements = buildClipboardData(board, firstLevelElements, rectangle ? [rectangle.x, rectangle.y] : [0, 0]);
@@ -3994,13 +3991,13 @@ const withMindFragment = (baseBoard) => {
                 });
             }
         }
-        return buildFragment(clipboardContext, rectangle, type);
+        return buildFragment(clipboardContext, rectangle, operationType, originData);
     };
-    board.insertFragment = (clipboardData, targetPoint) => {
+    board.insertFragment = (clipboardData, targetPoint, operationType) => {
         if (clipboardData?.elements?.length) {
             const mindElements = clipboardData.elements?.filter(value => MindElement.isMindElement(board, value));
             if (mindElements && mindElements.length > 0) {
-                insertClipboardData(board, mindElements, targetPoint);
+                insertClipboardData(board, mindElements, targetPoint, operationType);
             }
         }
         if (clipboardData?.text) {
@@ -4010,7 +4007,7 @@ const withMindFragment = (baseBoard) => {
                 return;
             }
         }
-        insertFragment(clipboardData, targetPoint);
+        insertFragment(clipboardData, targetPoint, operationType);
     };
     return board;
 };
@@ -4066,6 +4063,9 @@ const withMind = (baseBoard) => {
         }
     };
     board.getRectangle = element => {
+        if (!PlaitElement.hasMounted(element)) {
+            console.error('mind element has not been mounted');
+        }
         if (MindElement.isMindElement(board, element)) {
             return getRectangleByNode(MindElement.getNode(element));
         }