@plait/mind 0.27.0-next.7 → 0.27.0-next.9

package/fesm2022/plait-mind.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, NgModule, NgZone, Directive, Input, HostListener } from '@angular/core';
 import * as i2 from '@plait/core';
-import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, RectangleClient, PlaitElement, PlaitPluginKey, getSelectedElements, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, PlaitBoard, Path, PlaitNode, PlaitContextService, depthFirstRecursion, getIsRecursionFunc, drawLinearPath, drawBezierPath, createG, updateForeignObject, drawRoundRectangle, getRectangleByElements, NODE_TO_PARENT, distanceBetweenPointAndRectangle, createForeignObject, setStrokeLinecap, createText, PlaitPointerType, NODE_TO_INDEX, PlaitModule, isMainPointer, transformPoint, toPoint, getHitElements, distanceBetweenPointAndPoint, CoreTransforms, BOARD_TO_HOST, BoardTransforms, throttleRAF, removeSelectedElement, PlaitHistoryBoard, hotkeys, setClipboardDataByMedia, getClipboardDataByMedia, ResizeCursorClass, preventTouchMove, PRESS_AND_MOVE_BUFFER, MERGING, setClipboardData, setClipboardDataByText, getDataFromClipboard } from '@plait/core';
-import { MindLayoutType, isIndentedLayout, isHorizontalLayout, isHorizontalLogicLayout, ConnectingPosition, AbstractNode, isStandardLayout, isVerticalLogicLayout, getNonAbstractChildren, isLeftLayout, isRightLayout, isTopLayout, isBottomLayout, getCorrectStartEnd, getAbstractLayout, GlobalLayout } from '@plait/layouts';
+import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, PlaitElement, PlaitNode, Path, isNullOrUndefined, PlaitBoard, distanceBetweenPointAndRectangle, RectangleClient, PlaitPluginKey, getSelectedElements, idCreator, Transforms, clearSelectedElement, addSelectedElement, PlaitContextService, depthFirstRecursion, getIsRecursionFunc, drawRoundRectangle, drawLinearPath, drawBezierPath, createG, updateForeignObject, getRectangleByElements, NODE_TO_PARENT, createForeignObject, setStrokeLinecap, ACTIVE_STROKE_WIDTH, createText, PlaitPointerType, NODE_TO_INDEX, PlaitModule, isMainPointer, transformPoint, toPoint, getHitElements, distanceBetweenPointAndPoint, CoreTransforms, BOARD_TO_HOST, BoardTransforms, throttleRAF, removeSelectedElement, PlaitHistoryBoard, hotkeys, setClipboardDataByMedia, getClipboardDataByMedia, ResizeCursorClass, preventTouchMove, PRESS_AND_MOVE_BUFFER, MERGING, setClipboardData, setClipboardDataByText, getDataFromClipboard } from '@plait/core';
+import { MindLayoutType, AbstractNode, isIndentedLayout, isHorizontalLayout, isHorizontalLogicLayout, ConnectingPosition, isStandardLayout, isVerticalLogicLayout, getNonAbstractChildren, isLeftLayout, isRightLayout, isTopLayout, isBottomLayout, getCorrectStartEnd, getAbstractLayout, GlobalLayout } from '@plait/layouts';
 import { PlaitMarkEditor, MarkTypes, DEFAULT_FONT_SIZE, TEXT_DEFAULT_HEIGHT, buildText, getTextSize, TextManage, ExitOrigin, TextModule, getTextFromClipboard } from '@plait/text';
 import { fromEvent, Subject } from 'rxjs';
-import { RESIZE_HANDLE_DIAMETER, getRectangleResizeHandleRefs, CommonPluginElement, WithTextPluginKey, isDrawingMode, isDndMode, setCreationMode, BoardCreationMode, isExpandHotkey, isTabHotkey, isEnterHotkey, isVirtualKey, isDelete, isSpaceHotkey, MediaKeys, ResizeHandle, withResize, ActiveGenerator } from '@plait/common';
+import { RESIZE_HANDLE_DIAMETER, getRectangleResizeHandleRefs, Generator, CommonPluginElement, WithTextPluginKey, isDrawingMode, isDndMode, setCreationMode, BoardCreationMode, isExpandHotkey, isTabHotkey, isEnterHotkey, isVirtualKey, isDelete, isSpaceHotkey, MediaKeys, ResizeHandle, withResize, ActiveGenerator } 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';
@@ -222,6 +222,277 @@ const NodeTopicThreshold = {
     defaultTextMaxWidth: 34 * 14,
 };
 
+const getAvailableProperty = (board, element, propertyKey) => {
+    return element[propertyKey];
+};
+
+const DefaultAbstractNodeStyle = {
+    branch: { color: GRAY_COLOR, width: 2 },
+    shape: {
+        strokeColor: GRAY_COLOR,
+        strokeWidth: 2
+    }
+};
+const DefaultNodeStyle = {
+    branch: {
+        width: 3
+    },
+    shape: {
+        rectangleRadius: 4,
+        strokeWidth: 3,
+        fill: 'none'
+    }
+};
+
+const separateChildren = (parentElement) => {
+    const rightNodeCount = parentElement.rightNodeCount;
+    const children = parentElement.children;
+    let rightChildren = [], leftChildren = [];
+    for (let i = 0; i < children.length; i++) {
+        const child = children[i];
+        if (AbstractNode.isAbstract(child) && child.end < rightNodeCount) {
+            rightChildren.push(child);
+            continue;
+        }
+        if (AbstractNode.isAbstract(child) && child.start >= rightNodeCount) {
+            leftChildren.push(child);
+            continue;
+        }
+        if (i < rightNodeCount) {
+            rightChildren.push(child);
+        }
+        else {
+            leftChildren.push(child);
+        }
+    }
+    return { leftChildren, rightChildren };
+};
+const isSetAbstract = (element) => {
+    return !!getCorrespondingAbstract(element);
+};
+const canSetAbstract = (element) => {
+    return !PlaitElement.isRootElement(element) && !AbstractNode.isAbstract(element) && !isSetAbstract(element);
+};
+const getCorrespondingAbstract = (element) => {
+    const parent = MindElement.findParent(element);
+    if (!parent)
+        return undefined;
+    const elementIndex = parent.children.indexOf(element);
+    return parent.children.find(child => {
+        return AbstractNode.isAbstract(child) && elementIndex >= child.start && elementIndex <= child.end;
+    });
+};
+const getBehindAbstracts = (element) => {
+    const parent = MindElement.findParent(element);
+    if (!parent)
+        return [];
+    const index = parent.children.indexOf(element);
+    return parent.children.filter(child => AbstractNode.isAbstract(child) && child.start > index);
+};
+/**
+ * return corresponding abstract that is not child of elements
+ */
+const getOverallAbstracts = (board, elements) => {
+    const overallAbstracts = [];
+    elements
+        .filter(value => !AbstractNode.isAbstract(value) && !PlaitMind.isMind(value))
+        .forEach(value => {
+        const abstract = getCorrespondingAbstract(value);
+        if (abstract && elements.indexOf(abstract) === -1 && overallAbstracts.indexOf(abstract) === -1) {
+            const { start, end } = abstract;
+            const parent = MindElement.getParent(value);
+            const isOverall = parent.children.slice(start, end + 1).every(includedElement => elements.indexOf(includedElement) > -1);
+            if (isOverall) {
+                overallAbstracts.push(abstract);
+            }
+        }
+    });
+    return overallAbstracts;
+};
+/**
+ * abstract node is valid when elements contains at least one element it is referenced with
+ */
+const getValidAbstractRefs = (board, elements) => {
+    const validAbstractRefs = [];
+    elements
+        .filter(value => !AbstractNode.isAbstract(value) && !PlaitMind.isMind(value))
+        .forEach(value => {
+        const abstract = getCorrespondingAbstract(value);
+        if (abstract && elements.indexOf(abstract) > 0) {
+            const index = validAbstractRefs.findIndex(value => value.abstract === abstract);
+            if (index === -1) {
+                validAbstractRefs.push({
+                    abstract: abstract,
+                    references: [value]
+                });
+            }
+            else {
+                validAbstractRefs[index].references.push(value);
+            }
+        }
+    });
+    return validAbstractRefs;
+};
+function getRelativeStartEndByAbstractRef(abstractRef, elements) {
+    const start = elements.indexOf(abstractRef.references[0]);
+    const end = elements.indexOf(abstractRef.references[abstractRef.references.length - 1]);
+    return { start, end };
+}
+const insertElementHandleAbstract = (board, path, step = 1, 
+//由此区分拖拽和新增到概要概括最后一个节点
+isExtendPreviousNode = true, effectedAbstracts = new Map()) => {
+    const parent = PlaitNode.parent(board, path);
+    const hasPreviousNode = path[path.length - 1] !== 0;
+    let behindAbstracts;
+    if (!hasPreviousNode) {
+        behindAbstracts = parent.children.filter(child => AbstractNode.isAbstract(child));
+    }
+    else {
+        const selectedElement = PlaitNode.get(board, Path.previous(path));
+        behindAbstracts = getBehindAbstracts(selectedElement);
+    }
+    if (behindAbstracts.length) {
+        behindAbstracts.forEach(abstract => {
+            let newProperties = effectedAbstracts.get(abstract);
+            if (!newProperties) {
+                newProperties = { start: 0, end: 0 };
+                effectedAbstracts.set(abstract, newProperties);
+            }
+            newProperties.start = newProperties.start + step;
+            newProperties.end = newProperties.end + step;
+        });
+    }
+    if (!hasPreviousNode) {
+        return effectedAbstracts;
+    }
+    const selectedElement = PlaitNode.get(board, Path.previous(path));
+    const correspondingAbstract = getCorrespondingAbstract(selectedElement);
+    const isDragToLast = !isExtendPreviousNode && correspondingAbstract && correspondingAbstract.end === path[path.length - 1] - 1;
+    if (correspondingAbstract && !isDragToLast) {
+        let newProperties = effectedAbstracts.get(correspondingAbstract);
+        if (!newProperties) {
+            newProperties = { start: 0, end: 0 };
+            effectedAbstracts.set(correspondingAbstract, newProperties);
+        }
+        newProperties.end = newProperties.end + step;
+    }
+    return effectedAbstracts;
+};
+const deleteElementHandleAbstract = (board, deletableElements, effectedAbstracts = new Map()) => {
+    deletableElements.forEach(node => {
+        if (!PlaitMind.isMind(node)) {
+            const behindAbstracts = getBehindAbstracts(node).filter(abstract => !deletableElements.includes(abstract));
+            if (behindAbstracts.length) {
+                behindAbstracts.forEach(abstract => {
+                    let newProperties = effectedAbstracts.get(abstract);
+                    if (!newProperties) {
+                        newProperties = { start: 0, end: 0 };
+                        effectedAbstracts.set(abstract, newProperties);
+                    }
+                    newProperties.start = newProperties.start - 1;
+                    newProperties.end = newProperties.end - 1;
+                });
+            }
+            const correspondingAbstract = getCorrespondingAbstract(node);
+            if (correspondingAbstract && !deletableElements.includes(correspondingAbstract)) {
+                let newProperties = effectedAbstracts.get(correspondingAbstract);
+                if (!newProperties) {
+                    newProperties = { start: 0, end: 0 };
+                    effectedAbstracts.set(correspondingAbstract, newProperties);
+                }
+                newProperties.end = newProperties.end - 1;
+            }
+        }
+    });
+    return effectedAbstracts;
+};
+const isChildOfAbstract = (board, element) => {
+    const ancestors = MindElement.getAncestors(board, element);
+    return !!ancestors.find((value) => AbstractNode.isAbstract(value));
+};
+
+/**
+ * Processing of branch color, width, style, etc. of the mind node
+ */
+const getBranchColorByMindElement = (board, element) => {
+    if (AbstractNode.isAbstract(element) || isChildOfAbstract(board, element)) {
+        return getAbstractBranchColor(board, element);
+    }
+    const branchColor = getAvailableProperty(board, element, 'branchColor');
+    return branchColor || getDefaultBranchColor(board, element);
+};
+const getBranchShapeByMindElement = (board, element) => {
+    const branchShape = getAvailableProperty(board, element, 'branchShape');
+    return branchShape || BranchShape.bight;
+};
+const getBranchWidthByMindElement = (board, element) => {
+    const branchWidth = getAvailableProperty(board, element, 'branchWidth');
+    return branchWidth || BRANCH_WIDTH;
+};
+const getAbstractBranchWidth = (board, element) => {
+    if (!isNullOrUndefined(element.branchWidth)) {
+        return element.branchWidth;
+    }
+    return DefaultAbstractNodeStyle.branch.width;
+};
+const getAbstractBranchColor = (board, element) => {
+    if (element.branchColor) {
+        return element.branchColor;
+    }
+    return DefaultAbstractNodeStyle.branch.color;
+};
+const getNextBranchColor = (board, root) => {
+    const index = root.children.length;
+    return getDefaultBranchColorByIndex(board, index);
+};
+const getDefaultBranchColor = (board, element) => {
+    const path = PlaitBoard.findPath(board, element);
+    return getDefaultBranchColorByIndex(board, path[1]);
+};
+const getDefaultBranchColorByIndex = (board, index) => {
+    const themeColor = getMindThemeColor(board);
+    const length = themeColor.branchColors.length;
+    const remainder = index % length;
+    return themeColor.branchColors[remainder];
+};
+const getMindThemeColor = (board) => {
+    const themeColors = PlaitBoard.getThemeColors(board);
+    const themeColor = themeColors.find(val => val.mode === board.theme.themeColorMode);
+    if (themeColor && MindThemeColor.isMindThemeColor(themeColor)) {
+        return themeColor;
+    }
+    else {
+        return MindDefaultThemeColor;
+    }
+};
+
+const getStrokeByMindElement = (board, element) => {
+    if (PlaitMind.isMind(element)) {
+        const defaultRootStroke = getMindThemeColor(board).rootFill;
+        return element.strokeColor || defaultRootStroke;
+    }
+    if (AbstractNode.isAbstract(element) || isChildOfAbstract(board, element)) {
+        return element.strokeColor || DefaultAbstractNodeStyle.shape.strokeColor;
+    }
+    return getAvailableProperty(board, element, 'strokeColor') || getDefaultBranchColor(board, element);
+};
+const getStrokeWidthByElement = (board, element) => {
+    const strokeWidth = element.strokeWidth ||
+        (AbstractNode.isAbstract(element) ? DefaultAbstractNodeStyle.shape.strokeWidth : DefaultNodeStyle.shape.strokeWidth);
+    return strokeWidth;
+};
+const getFillByElement = (board, element) => {
+    if (element.fill) {
+        return element.fill;
+    }
+    const defaultRootFill = getMindThemeColor(board).rootFill;
+    return element.isRoot ? defaultRootFill : DefaultNodeStyle.shape.fill;
+};
+const getShapeByElement = (board, element) => {
+    const shape = getAvailableProperty(board, element, 'shape');
+    return shape || MindElementShape.roundRectangle;
+};
+
 const NodeDefaultSpace = {
     horizontal: {
         nodeAndText: BASE * 2.5,
@@ -246,13 +517,13 @@ const getHorizontalSpaceBetweenNodeAndText = (board, element) => {
     const isMind = PlaitMind.isMind(element);
     const nodeAndText = isMind ? RootDefaultSpace.horizontal.nodeAndText : NodeDefaultSpace.horizontal.nodeAndText;
     const strokeWidth = getStrokeWidthByElement(board, element);
-    return nodeAndText + strokeWidth / 2;
+    return nodeAndText + strokeWidth;
 };
 const getVerticalSpaceBetweenNodeAndText = (board, element) => {
     const isMind = PlaitMind.isMind(element);
     const strokeWidth = getStrokeWidthByElement(board, element);
     const nodeAndText = isMind ? RootDefaultSpace.vertical.nodeAndText : NodeDefaultSpace.vertical.nodeAndText;
-    return nodeAndText + strokeWidth / 2;
+    return nodeAndText + strokeWidth;
 };
 const getSpaceEmojiAndText = (element) => {
     const isMind = PlaitMind.isMind(element);
@@ -284,11 +555,7 @@ const NodeSpace = {
         return Math.max(width, imageWidth);
     },
     /**
-     * use this when upload image first or resize image
-     * @param board
-     * @param element
-     * @param imageWidth
-     * @returns
+     * use it when upload image first or resize image
      */
     getNodeNewDynamicWidth(board, element, imageWidth) {
         const width = element.manualWidth || element.width;
@@ -330,13 +597,12 @@ const NodeSpace = {
     },
     getImageTopSpace(board, element) {
         const strokeWidth = getStrokeWidthByElement(board, element);
-        return strokeWidth / 2 + NodeDefaultSpace.vertical.nodeAndImage;
+        return strokeWidth + NodeDefaultSpace.vertical.nodeAndImage;
     },
     getEmojiLeftSpace(board, element) {
         const options = board.getPluginOptions(WithMindPluginKey);
         const nodeAndText = getHorizontalSpaceBetweenNodeAndText(board, element);
-        const strokeWidth = getStrokeWidthByElement(board, element);
-        return strokeWidth / 2 + nodeAndText - options.emojiPadding;
+        return nodeAndText - options.emojiPadding;
     },
     getEmojiTopSpace(board, element) {
         const nodeAndText = getVerticalSpaceBetweenNodeAndText(board, element);
@@ -357,6 +623,39 @@ const getNodeDefaultFontSize = (isRoot = false) => {
     return defaultFontSize;
 };
 
+function getRectangleByNode(node) {
+    const x = node.x + node.hGap;
+    let y = node.y + node.vGap;
+    const width = node.width - node.hGap * 2;
+    const height = node.height - node.vGap * 2;
+    return {
+        x,
+        y,
+        width,
+        height
+    };
+}
+function getRectangleByElement(board, element) {
+    const width = NodeSpace.getNodeWidth(board, element);
+    const height = NodeSpace.getNodeHeight(board, element);
+    const nodeRectangle = {
+        x: element.points[0][0],
+        y: element.points[0][1],
+        width,
+        height
+    };
+    return nodeRectangle;
+}
+function isHitMindElement(board, point, element) {
+    const node = MindElement.getNode(element);
+    if (node && distanceBetweenPointAndRectangle(point[0], point[1], getRectangleByNode(node)) === 0) {
+        return true;
+    }
+    else {
+        return false;
+    }
+}
+
 function getEmojiRectangle(board, element) {
     let { x, y } = getRectangleByNode(MindElement.getNode(element));
     x = x + NodeSpace.getEmojiLeftSpace(board, element);
@@ -551,21 +850,19 @@ const getRootLayout = (root) => {
 
 const getLayoutOptions = (board) => {
     function getMainAxle(element, parent) {
-        const strokeWidth = element.strokeWidth || STROKE_WIDTH;
         if (element.isRoot) {
             return BASE * 12;
         }
         if (parent && parent.isRoot()) {
-            return BASE * 3 + strokeWidth / 2;
+            return BASE * 3;
         }
-        return BASE * 3 + strokeWidth / 2;
+        return BASE * 3;
     }
     function getSecondAxle(element, parent) {
-        const strokeWidth = element.strokeWidth || STROKE_WIDTH;
         if (element.isRoot) {
-            return BASE * 10 + strokeWidth / 2;
+            return BASE * 10;
         }
-        return BASE * 6 + strokeWidth / 2;
+        return BASE * 6;
     }
     return {
         getHeight(element) {
@@ -577,9 +874,8 @@ const getLayoutOptions = (board) => {
         getHorizontalGap(element, parent) {
             const _layout = (parent && parent.layout) || getRootLayout(element);
             const isHorizontal = isHorizontalLayout(_layout);
-            const strokeWidth = element.strokeWidth || STROKE_WIDTH;
             if (isIndentedLayout(_layout)) {
-                return BASE * 4 + strokeWidth;
+                return BASE * 4;
             }
             if (!isHorizontal) {
                 return getMainAxle(element, parent);
@@ -800,24 +1096,6 @@ const adjustNodeToRoot = (board, node) => {
     };
 };
 
-const DefaultAbstractNodeStyle = {
-    branch: { color: GRAY_COLOR, width: 2 },
-    shape: {
-        strokeColor: GRAY_COLOR,
-        strokeWidth: 2
-    }
-};
-const DefaultNodeStyle = {
-    branch: {
-        width: 3
-    },
-    shape: {
-        rectangleRadius: 4,
-        strokeWidth: 3,
-        fill: 'none'
-    }
-};
-
 const setAbstractsByRefs = (board, abstractRefs) => {
     abstractRefs.forEach((newProperty, element) => {
         const start = element.start + newProperty.start;
@@ -861,216 +1139,49 @@ const setAbstractByElements = (board, groupParent, group) => {
         const path = [...PlaitBoard.findPath(board, groupParent), childrenLength];
         const leftChildren = indexArray.filter(index => index >= rightNodeCount);
         const rightChildren = indexArray.filter(index => index < rightNodeCount);
-        insertAbstractNode(board, path, rightChildren[0], rightChildren[rightChildren.length - 1]);
-        insertAbstractNode(board, Path.next(path), leftChildren[0], leftChildren[leftChildren.length - 1]);
-    }
-    else {
-        const path = [...PlaitBoard.findPath(board, groupParent), groupParent.children.length];
-        insertAbstractNode(board, path, start, end);
-    }
-};
-const insertAbstractNode = (board, path, start, end) => {
-    const mindElement = createMindElement('概要', 28, 20, {
-        strokeWidth: DefaultAbstractNodeStyle.branch.width,
-        branchWidth: DefaultAbstractNodeStyle.branch.width
-    });
-    mindElement.start = start;
-    mindElement.end = end;
-    Transforms.insertNode(board, mindElement, path);
-    clearSelectedElement(board);
-    addSelectedElement(board, mindElement);
-};
-
-const setLayout = (board, layout, path) => {
-    correctLogicLayoutNode(board, layout, path);
-    const element = PlaitNode.get(board, path);
-    if (PlaitMind.isMind(element) && isStandardLayout(layout)) {
-        MindTransforms.setAbstractByStandardLayout(board, element);
-    }
-    Transforms.setNode(board, { layout }, path);
-};
-const correctLogicLayoutNode = (board, layout, path) => {
-    const node = PlaitNode.get(board, path);
-    if (node && layout) {
-        node.children?.forEach((value, index) => {
-            if (value.layout) {
-                if ((isHorizontalLogicLayout(layout) && isVerticalLogicLayout(value.layout)) ||
-                    (isVerticalLogicLayout(layout) && isHorizontalLogicLayout(value.layout))) {
-                    Transforms.setNode(board, { layout: null }, [...path, index]);
-                }
-                if (value.children?.length) {
-                    correctLogicLayoutNode(board, layout, [...path, index]);
-                }
-            }
-        });
-    }
-};
-
-const separateChildren = (parentElement) => {
-    const rightNodeCount = parentElement.rightNodeCount;
-    const children = parentElement.children;
-    let rightChildren = [], leftChildren = [];
-    for (let i = 0; i < children.length; i++) {
-        const child = children[i];
-        if (AbstractNode.isAbstract(child) && child.end < rightNodeCount) {
-            rightChildren.push(child);
-            continue;
-        }
-        if (AbstractNode.isAbstract(child) && child.start >= rightNodeCount) {
-            leftChildren.push(child);
-            continue;
-        }
-        if (i < rightNodeCount) {
-            rightChildren.push(child);
-        }
-        else {
-            leftChildren.push(child);
-        }
-    }
-    return { leftChildren, rightChildren };
-};
-const isSetAbstract = (element) => {
-    return !!getCorrespondingAbstract(element);
-};
-const canSetAbstract = (element) => {
-    return !PlaitElement.isRootElement(element) && !AbstractNode.isAbstract(element) && !isSetAbstract(element);
-};
-const getCorrespondingAbstract = (element) => {
-    const parent = MindElement.findParent(element);
-    if (!parent)
-        return undefined;
-    const elementIndex = parent.children.indexOf(element);
-    return parent.children.find(child => {
-        return AbstractNode.isAbstract(child) && elementIndex >= child.start && elementIndex <= child.end;
-    });
-};
-const getBehindAbstracts = (element) => {
-    const parent = MindElement.findParent(element);
-    if (!parent)
-        return [];
-    const index = parent.children.indexOf(element);
-    return parent.children.filter(child => AbstractNode.isAbstract(child) && child.start > index);
-};
-/**
- * return corresponding abstract that is not child of elements
- */
-const getOverallAbstracts = (board, elements) => {
-    const overallAbstracts = [];
-    elements
-        .filter(value => !AbstractNode.isAbstract(value) && !PlaitMind.isMind(value))
-        .forEach(value => {
-        const abstract = getCorrespondingAbstract(value);
-        if (abstract && elements.indexOf(abstract) === -1 && overallAbstracts.indexOf(abstract) === -1) {
-            const { start, end } = abstract;
-            const parent = MindElement.getParent(value);
-            const isOverall = parent.children.slice(start, end + 1).every(includedElement => elements.indexOf(includedElement) > -1);
-            if (isOverall) {
-                overallAbstracts.push(abstract);
-            }
-        }
-    });
-    return overallAbstracts;
-};
-/**
- * abstract node is valid when elements contains at least one element it is referenced with
- */
-const getValidAbstractRefs = (board, elements) => {
-    const validAbstractRefs = [];
-    elements
-        .filter(value => !AbstractNode.isAbstract(value) && !PlaitMind.isMind(value))
-        .forEach(value => {
-        const abstract = getCorrespondingAbstract(value);
-        if (abstract && elements.indexOf(abstract) > 0) {
-            const index = validAbstractRefs.findIndex(value => value.abstract === abstract);
-            if (index === -1) {
-                validAbstractRefs.push({
-                    abstract: abstract,
-                    references: [value]
-                });
-            }
-            else {
-                validAbstractRefs[index].references.push(value);
-            }
-        }
-    });
-    return validAbstractRefs;
-};
-function getRelativeStartEndByAbstractRef(abstractRef, elements) {
-    const start = elements.indexOf(abstractRef.references[0]);
-    const end = elements.indexOf(abstractRef.references[abstractRef.references.length - 1]);
-    return { start, end };
-}
-const insertElementHandleAbstract = (board, path, step = 1, 
-//由此区分拖拽和新增到概要概括最后一个节点
-isExtendPreviousNode = true, effectedAbstracts = new Map()) => {
-    const parent = PlaitNode.parent(board, path);
-    const hasPreviousNode = path[path.length - 1] !== 0;
-    let behindAbstracts;
-    if (!hasPreviousNode) {
-        behindAbstracts = parent.children.filter(child => AbstractNode.isAbstract(child));
+        insertAbstractNode(board, path, rightChildren[0], rightChildren[rightChildren.length - 1]);
+        insertAbstractNode(board, Path.next(path), leftChildren[0], leftChildren[leftChildren.length - 1]);
     }
     else {
-        const selectedElement = PlaitNode.get(board, Path.previous(path));
-        behindAbstracts = getBehindAbstracts(selectedElement);
-    }
-    if (behindAbstracts.length) {
-        behindAbstracts.forEach(abstract => {
-            let newProperties = effectedAbstracts.get(abstract);
-            if (!newProperties) {
-                newProperties = { start: 0, end: 0 };
-                effectedAbstracts.set(abstract, newProperties);
-            }
-            newProperties.start = newProperties.start + step;
-            newProperties.end = newProperties.end + step;
-        });
-    }
-    if (!hasPreviousNode) {
-        return effectedAbstracts;
+        const path = [...PlaitBoard.findPath(board, groupParent), groupParent.children.length];
+        insertAbstractNode(board, path, start, end);
     }
-    const selectedElement = PlaitNode.get(board, Path.previous(path));
-    const correspondingAbstract = getCorrespondingAbstract(selectedElement);
-    const isDragToLast = !isExtendPreviousNode && correspondingAbstract && correspondingAbstract.end === path[path.length - 1] - 1;
-    if (correspondingAbstract && !isDragToLast) {
-        let newProperties = effectedAbstracts.get(correspondingAbstract);
-        if (!newProperties) {
-            newProperties = { start: 0, end: 0 };
-            effectedAbstracts.set(correspondingAbstract, newProperties);
-        }
-        newProperties.end = newProperties.end + step;
+};
+const insertAbstractNode = (board, path, start, end) => {
+    const mindElement = createMindElement('概要', 28, 20, {
+        strokeWidth: DefaultAbstractNodeStyle.branch.width,
+        branchWidth: DefaultAbstractNodeStyle.branch.width
+    });
+    mindElement.start = start;
+    mindElement.end = end;
+    Transforms.insertNode(board, mindElement, path);
+    clearSelectedElement(board);
+    addSelectedElement(board, mindElement);
+};
+
+const setLayout = (board, layout, path) => {
+    correctLogicLayoutNode(board, layout, path);
+    const element = PlaitNode.get(board, path);
+    if (PlaitMind.isMind(element) && isStandardLayout(layout)) {
+        MindTransforms.setAbstractByStandardLayout(board, element);
     }
-    return effectedAbstracts;
+    Transforms.setNode(board, { layout }, path);
 };
-const deleteElementHandleAbstract = (board, deletableElements, effectedAbstracts = new Map()) => {
-    deletableElements.forEach(node => {
-        if (!PlaitMind.isMind(node)) {
-            const behindAbstracts = getBehindAbstracts(node).filter(abstract => !deletableElements.includes(abstract));
-            if (behindAbstracts.length) {
-                behindAbstracts.forEach(abstract => {
-                    let newProperties = effectedAbstracts.get(abstract);
-                    if (!newProperties) {
-                        newProperties = { start: 0, end: 0 };
-                        effectedAbstracts.set(abstract, newProperties);
-                    }
-                    newProperties.start = newProperties.start - 1;
-                    newProperties.end = newProperties.end - 1;
-                });
-            }
-            const correspondingAbstract = getCorrespondingAbstract(node);
-            if (correspondingAbstract && !deletableElements.includes(correspondingAbstract)) {
-                let newProperties = effectedAbstracts.get(correspondingAbstract);
-                if (!newProperties) {
-                    newProperties = { start: 0, end: 0 };
-                    effectedAbstracts.set(correspondingAbstract, newProperties);
+const correctLogicLayoutNode = (board, layout, path) => {
+    const node = PlaitNode.get(board, path);
+    if (node && layout) {
+        node.children?.forEach((value, index) => {
+            if (value.layout) {
+                if ((isHorizontalLogicLayout(layout) && isVerticalLogicLayout(value.layout)) ||
+                    (isVerticalLogicLayout(layout) && isHorizontalLogicLayout(value.layout))) {
+                    Transforms.setNode(board, { layout: null }, [...path, index]);
+                }
+                if (value.children?.length) {
+                    correctLogicLayoutNode(board, layout, [...path, index]);
                 }
-                newProperties.end = newProperties.end - 1;
             }
-        }
-    });
-    return effectedAbstracts;
-};
-const isChildOfAbstract = (board, element) => {
-    const ancestors = MindElement.getAncestors(board, element);
-    return !!ancestors.find((value) => AbstractNode.isAbstract(value));
+        });
+    }
 };
 
 const normalizeWidthAndHeight = (board, element, width, height) => {
@@ -1301,92 +1412,6 @@ function getImageSize(file, defaultImageWidth = DEFAULT_IMAGE_WIDTH) {
     });
 }
 
-const getAvailableProperty = (board, element, propertyKey) => {
-    return element[propertyKey];
-};
-
-/**
- * Processing of branch color, width, style, etc. of the mind node
- */
-const getBranchColorByMindElement = (board, element) => {
-    if (AbstractNode.isAbstract(element) || isChildOfAbstract(board, element)) {
-        return getAbstractBranchColor(board, element);
-    }
-    const branchColor = getAvailableProperty(board, element, 'branchColor');
-    return branchColor || getDefaultBranchColor(board, element);
-};
-const getBranchShapeByMindElement = (board, element) => {
-    const branchShape = getAvailableProperty(board, element, 'branchShape');
-    return branchShape || BranchShape.bight;
-};
-const getBranchWidthByMindElement = (board, element) => {
-    const branchWidth = getAvailableProperty(board, element, 'branchWidth');
-    return branchWidth || BRANCH_WIDTH;
-};
-const getAbstractBranchWidth = (board, element) => {
-    if (!isNullOrUndefined(element.branchWidth)) {
-        return element.branchWidth;
-    }
-    return DefaultAbstractNodeStyle.branch.width;
-};
-const getAbstractBranchColor = (board, element) => {
-    if (element.branchColor) {
-        return element.branchColor;
-    }
-    return DefaultAbstractNodeStyle.branch.color;
-};
-const getNextBranchColor = (board, root) => {
-    const index = root.children.length;
-    return getDefaultBranchColorByIndex(board, index);
-};
-const getDefaultBranchColor = (board, element) => {
-    const path = PlaitBoard.findPath(board, element);
-    return getDefaultBranchColorByIndex(board, path[1]);
-};
-const getDefaultBranchColorByIndex = (board, index) => {
-    const themeColor = getMindThemeColor(board);
-    const length = themeColor.branchColors.length;
-    const remainder = index % length;
-    return themeColor.branchColors[remainder];
-};
-const getMindThemeColor = (board) => {
-    const themeColors = PlaitBoard.getThemeColors(board);
-    const themeColor = themeColors.find(val => val.mode === board.theme.themeColorMode);
-    if (themeColor && MindThemeColor.isMindThemeColor(themeColor)) {
-        return themeColor;
-    }
-    else {
-        return MindDefaultThemeColor;
-    }
-};
-
-const getStrokeByMindElement = (board, element) => {
-    if (PlaitMind.isMind(element)) {
-        const defaultRootStroke = getMindThemeColor(board).rootFill;
-        return element.strokeColor || defaultRootStroke;
-    }
-    if (AbstractNode.isAbstract(element) || isChildOfAbstract(board, element)) {
-        return element.strokeColor || DefaultAbstractNodeStyle.shape.strokeColor;
-    }
-    return getAvailableProperty(board, element, 'strokeColor') || getDefaultBranchColor(board, element);
-};
-const getStrokeWidthByElement = (board, element) => {
-    const strokeWidth = element.strokeWidth ||
-        (AbstractNode.isAbstract(element) ? DefaultAbstractNodeStyle.shape.strokeWidth : DefaultNodeStyle.shape.strokeWidth);
-    return strokeWidth;
-};
-const getFillByElement = (board, element) => {
-    if (element.fill) {
-        return element.fill;
-    }
-    const defaultRootFill = getMindThemeColor(board).rootFill;
-    return element.isRoot ? defaultRootFill : DefaultNodeStyle.shape.fill;
-};
-const getShapeByElement = (board, element) => {
-    const shape = getAvailableProperty(board, element, 'shape');
-    return shape || MindElementShape.roundRectangle;
-};
-
 const IS_DRAGGING = new WeakMap();
 const addActiveOnDragOrigin = (activeElement) => {
     const activeComponent = PlaitElement.getComponent(activeElement);
@@ -1621,6 +1646,24 @@ const getPathByDropTarget = (board, dropTarget) => {
     return targetPath;
 };
 
+function drawRoundRectangleByNode(board, node) {
+    const rectangle = getRectangleByNode(node);
+    return drawRoundRectangleByElement(board, rectangle, node.origin);
+}
+function drawRoundRectangleByElement(board, nodeRectangle, element) {
+    const fill = getFillByElement(board, element);
+    const stroke = getStrokeByMindElement(board, element);
+    const strokeWidth = getStrokeWidthByElement(board, element);
+    const newNodeRectangle = RectangleClient.inflate(nodeRectangle, -strokeWidth);
+    const nodeG = drawRoundRectangle(PlaitBoard.getRoughSVG(board), newNodeRectangle.x, newNodeRectangle.y, newNodeRectangle.x + newNodeRectangle.width, newNodeRectangle.y + newNodeRectangle.height, {
+        stroke,
+        strokeWidth,
+        fill,
+        fillStyle: 'solid'
+    }, false, DefaultNodeStyle.shape.rectangleRadius);
+    return nodeG;
+}
+
 const ABSTRACT_HANDLE_COLOR = '#6698FF80'; //primary color 50% opacity
 const ABSTRACT_INCLUDED_OUTLINE_OFFSET = 3.5;
 const ABSTRACT_HANDLE_LENGTH = 10;
@@ -2191,13 +2234,13 @@ function handleTouchedAbstract(board, touchedAbstract, endPoint) {
     }
     if (touchedAbstract) {
         const component = PlaitElement.getComponent(touchedAbstract);
-        component.activeDrawer.updateAbstractOutline(touchedAbstract);
+        component.activeGenerator.updateAbstractOutline(touchedAbstract);
         touchedAbstract = undefined;
     }
     if (abstract) {
         touchedAbstract = abstract;
         const component = PlaitElement.getComponent(touchedAbstract);
-        component.activeDrawer.updateAbstractOutline(touchedAbstract, touchedHandle);
+        component.activeGenerator.updateAbstractOutline(touchedAbstract, touchedHandle);
     }
     return touchedAbstract;
 }
@@ -2459,56 +2502,6 @@ var BranchShape;
     BranchShape["polyline"] = "polyline";
 })(BranchShape || (BranchShape = {}));
 
-function getRectangleByNode(node) {
-    const x = node.x + node.hGap;
-    let y = node.y + node.vGap;
-    const width = node.width - node.hGap * 2;
-    const height = node.height - node.vGap * 2;
-    return {
-        x,
-        y,
-        width,
-        height
-    };
-}
-function getRectangleByElement(board, element) {
-    const width = NodeSpace.getNodeWidth(board, element);
-    const height = NodeSpace.getNodeHeight(board, element);
-    const nodeRectangle = {
-        x: element.points[0][0],
-        y: element.points[0][1],
-        width,
-        height
-    };
-    return nodeRectangle;
-}
-function isHitMindElement(board, point, element) {
-    const node = MindElement.getNode(element);
-    if (node && distanceBetweenPointAndRectangle(point[0], point[1], getRectangleByNode(node)) === 0) {
-        return true;
-    }
-    else {
-        return false;
-    }
-}
-
-function drawRoundRectangleByNode(board, node) {
-    const rectangle = getRectangleByNode(node);
-    return drawRoundRectangleByElement(board, rectangle, node.origin);
-}
-function drawRoundRectangleByElement(board, nodeRectangle, element) {
-    const fill = getFillByElement(board, element);
-    const stroke = getStrokeByMindElement(board, element);
-    const strokeWidth = getStrokeWidthByElement(board, element);
-    const nodeG = drawRoundRectangle(PlaitBoard.getRoughSVG(board), nodeRectangle.x, nodeRectangle.y, nodeRectangle.x + nodeRectangle.width, nodeRectangle.y + nodeRectangle.height, {
-        stroke,
-        strokeWidth,
-        fill,
-        fillStyle: 'solid'
-    }, false, DefaultNodeStyle.shape.rectangleRadius);
-    return nodeG;
-}
-
 function drawAbstractLink(board, node, isHorizontal) {
     const linkPadding = 15;
     const branchWidth = getAbstractBranchWidth(board, node.origin);
@@ -2853,7 +2846,7 @@ function drawAbstractRoundRectangle(rs, x1, y1, x2, y2, isHorizontal, options) {
     }
 }
 
-class NodeActiveDrawer extends BaseDrawer {
+class NodeActiveGenerator extends Generator {
     canDraw(element, data) {
         if (data.selected) {
             return true;
@@ -2864,19 +2857,17 @@ class NodeActiveDrawer extends BaseDrawer {
     }
     baseDraw(element, data) {
         const activeG = createG();
-        this.g = activeG;
         if (AbstractNode.isAbstract(element)) {
             this.abstractOutlineG = drawAbstractIncludedOutline(this.board, PlaitBoard.getRoughSVG(this.board), element);
             activeG.append(this.abstractOutlineG);
         }
         const node = MindElement.getNode(element);
         const rectangle = getRectangleByNode(node);
-        const activeStrokeWidth = 2;
-        // add 0.1 to avoid white gap
-        const offset = (getStrokeWidthByElement(this.board, element) + activeStrokeWidth) / 2 - 0.1;
-        const activeRectangle = RectangleClient.getOutlineRectangle(rectangle, -offset);
-        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 + offset);
-        this.g.appendChild(strokeG);
+        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);
+        activeG.appendChild(strokeG);
         return activeG;
     }
     updateAbstractOutline(element, activeHandlePosition, resizingLocation) {
@@ -3037,6 +3028,20 @@ class NodeImageDrawer {
     }
 }
 
+class NodeShapeGenerator extends Generator {
+    canDraw(element, data) {
+        const shape = getShapeByElement(this.board, element);
+        if (shape === MindElementShape.roundRectangle) {
+            return true;
+        }
+        return false;
+    }
+    baseDraw(element, data) {
+        const rectangle = getRectangleByNode(data.node);
+        return drawRoundRectangleByElement(this.board, rectangle, data.node.origin);
+    }
+}
+
 class MindNodeComponent extends CommonPluginElement {
     get textManage() {
         return this.getTextManages()[0];
@@ -3052,9 +3057,10 @@ class MindNodeComponent extends CommonPluginElement {
         };
     }
     initializeDrawer() {
+        this.nodeShapeGenerator = new NodeShapeGenerator(this.board);
         this.nodeEmojisDrawer = new NodeEmojisDrawer(this.board, this.viewContainerRef);
         this.nodeInsertDrawer = new NodeInsertDrawer(this.board);
-        this.activeDrawer = new NodeActiveDrawer(this.board);
+        this.activeGenerator = new NodeActiveGenerator(this.board);
         this.collapseDrawer = new CollapseDrawer(this.board);
         this.imageDrawer = new NodeImageDrawer(this.board, this.viewContainerRef);
         const plugins = this.board.getPluginOptions(WithTextPluginKey).textPlugins;
@@ -3092,10 +3098,10 @@ class MindNodeComponent extends CommonPluginElement {
         this.index = NODE_TO_INDEX.get(this.element) || 0;
         this.roughSVG = PlaitBoard.getRoughSVG(this.board);
         this.parentG = PlaitElement.getComponent(MindElement.getRoot(this.board, this.element)).rootG;
-        this.drawShape();
+        this.nodeShapeGenerator.draw(this.element, this.g, { node: this.node });
         this.drawLink();
         this.drawTopic();
-        this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: this.textManage.isEditing });
+        this.activeGenerator.draw(this.element, this.g, { selected: this.selected, isEditing: this.textManage.isEditing });
         this.drawEmojis();
         this.drawExtend();
         this.imageDrawer.drawImage(this.g, this.element);
@@ -3109,8 +3115,8 @@ class MindNodeComponent extends CommonPluginElement {
         this.node = newNode;
         const isChangeTheme = this.board.operations.find(op => op.type === 'set_theme');
         if (!isEqualNode || value.element !== previous.element || isChangeTheme) {
-            this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: this.textManage.isEditing });
-            this.drawShape();
+            this.activeGenerator.draw(this.element, this.g, { selected: this.selected, isEditing: this.textManage.isEditing });
+            this.nodeShapeGenerator.draw(this.element, this.g, { node: this.node });
             this.drawLink();
             this.drawEmojis();
             this.drawExtend();
@@ -3121,7 +3127,7 @@ class MindNodeComponent extends CommonPluginElement {
             const hasSameSelected = value.selected === previous.selected;
             const hasSameParent = value.parent === previous.parent;
             if (!hasSameSelected) {
-                this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: this.textManage.isEditing });
+                this.activeGenerator.draw(this.element, this.g, { selected: this.selected, isEditing: this.textManage.isEditing });
             }
             if (!hasSameParent) {
                 this.drawLink();
@@ -3134,24 +3140,6 @@ class MindNodeComponent extends CommonPluginElement {
             this.g.append(g);
         }
     }
-    drawShape() {
-        this.destroyShape();
-        const shape = getShapeByElement(this.board, this.node.origin);
-        switch (shape) {
-            case MindElementShape.roundRectangle:
-                this.shapeG = drawRoundRectangleByNode(this.board, this.node);
-                this.g.prepend(this.shapeG);
-                break;
-            default:
-                break;
-        }
-    }
-    destroyShape() {
-        if (this.shapeG) {
-            this.shapeG.remove();
-            this.shapeG = null;
-        }
-    }
     drawLink() {
         if (PlaitMind.isMind(this.element)) {
             return;
@@ -3203,10 +3191,10 @@ class MindNodeComponent extends CommonPluginElement {
         this.textManage.updateRectangle();
     }
     editTopic() {
-        this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: true });
+        this.activeGenerator.draw(this.element, this.g, { selected: this.selected, isEditing: true });
         this.textManage.edit((origin) => {
             if (origin === ExitOrigin.default) {
-                this.activeDrawer.draw(this.element, this.g, { selected: this.selected, isEditing: false });
+                this.activeGenerator.draw(this.element, this.g, { selected: this.selected, isEditing: false });
             }
         });
     }
@@ -3461,7 +3449,7 @@ const withNodeDnd = (board) => {
                         setActiveElements.push(node);
                     }
                 });
-                Transforms.setSelectionWithTemporaryElements(board, setActiveElements);
+                Transforms.addSelectionWithTemporaryElements(board, setActiveElements);
             }
             setIsDragging(board, false);
             activeElements = [];
@@ -3555,7 +3543,7 @@ const withAbstract = (board) => {
                 newProperty =
                     abstractHandlePosition === AbstractHandlePosition.start ? { start: locationIndex + 1 } : { end: locationIndex };
             }
-            abstractComponent.activeDrawer.updateAbstractOutline(activeAbstractElement, abstractHandlePosition, location);
+            abstractComponent.activeGenerator.updateAbstractOutline(activeAbstractElement, abstractHandlePosition, location);
         }
         mousemove(event);
     };
@@ -3572,7 +3560,7 @@ const withAbstract = (board) => {
             }
             else {
                 const abstractComponent = PlaitElement.getComponent(activeAbstractElement);
-                abstractComponent.activeDrawer.updateAbstractOutline(activeAbstractElement);
+                abstractComponent.activeGenerator.updateAbstractOutline(activeAbstractElement);
             }
             activeAbstractElement = undefined;
         }
@@ -3867,13 +3855,13 @@ const withNodeImage = (board) => {
         }
         globalPointerUp(event);
     };
-    board.setFragment = (data, rectangle) => {
+    board.setFragment = (data, rectangle, type) => {
         const selectedImageElement = getSelectedImageElement(board);
         if (selectedImageElement) {
             setClipboardDataByMedia(data, selectedImageElement.data.image, MediaKeys.image);
             return;
         }
-        setFragment(data, rectangle);
+        setFragment(data, rectangle, type);
     };
     board.deleteFragment = (data) => {
         const selectedImageElement = getSelectedImageElement(board);
@@ -4167,14 +4155,14 @@ const insertClipboardData = (board, elements, targetPoint) => {
         Transforms.insertNode(board, newElement, path);
         return;
     });
-    Transforms.setSelectionWithTemporaryElements(board, newELements);
+    Transforms.addSelectionWithTemporaryElements(board, newELements);
 };
 const insertClipboardText = (board, targetParent, text) => {
     const styles = PlaitMind.isMind(targetParent) ? { fontFamily: BRANCH_FONT_FAMILY } : { fontFamily: DEFAULT_FONT_FAMILY };
     const { width, height } = getTextSize(board, text, TOPIC_DEFAULT_MAX_WORD_COUNT, styles);
     const newElement = createMindElement(text, Math.max(width, getFontSizeBySlateElement(text)), height, {});
     Transforms.insertNode(board, newElement, findNewChildNodePath(board, targetParent));
-    return;
+    Transforms.addSelectionWithTemporaryElements(board, [newElement]);
 };
 
 const withMindFragment = (baseBoard) => {
@@ -4197,14 +4185,14 @@ const withMindFragment = (baseBoard) => {
         }
         return getDeletedFragment(data);
     };
-    board.setFragment = (data, rectangle) => {
+    board.setFragment = (data, rectangle, type) => {
         const targetMindElements = getSelectedMindElements(board);
         const firstLevelElements = getFirstLevelElement(targetMindElements);
         if (firstLevelElements.length) {
             const elements = buildClipboardData(board, firstLevelElements, rectangle ? [rectangle.x, rectangle.y] : [0, 0]);
             setMindClipboardData(data, elements);
         }
-        setFragment(data, rectangle);
+        setFragment(data, rectangle, type);
     };
     board.insertFragment = (data, targetPoint) => {
         const elements = getDataFromClipboard(data);