@plait/mind 0.4.0 → 0.6.0

package/fesm2020/plait-mind.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, NgModule, Directive, Input } from '@angular/core';
+import { Component, ChangeDetectionStrategy, NgModule, Directive, Input, HostListener } from '@angular/core';
 import * as i2 from '@plait/core';
-import { distanceBetweenPointAndRectangle, RectangleClient, PlaitElement, PlaitBoard, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, depthFirstRecursion, Path, drawRoundRectangle, drawLinearPath, createG, PlaitNode, getRectangleByElements, getSelectedElements, NODE_TO_PARENT, drawAbstractRoundRectangle, PlaitPluginElementComponent, PlaitPointerType, NODE_TO_INDEX, createText, IS_TEXT_EDITABLE, MERGING, transformPoint, toPoint, PlaitModule, distanceBetweenPointAndPoint, CLIP_BOARD_FORMAT_KEY, isMainPointer, BOARD_TO_HOST, throttleRAF, updateForeignObject as updateForeignObject$1, BoardTransforms, Selection, removeSelectedElement, PlaitHistoryBoard, hotkeys } from '@plait/core';
-import { MindLayoutType, isIndentedLayout, getNonAbstractChildren, isStandardLayout, AbstractNode, isLeftLayout, isRightLayout, isTopLayout, isVerticalLogicLayout, isHorizontalLogicLayout, isBottomLayout, isHorizontalLayout, getCorrectStartEnd, getAbstractLayout, ConnectingPosition, GlobalLayout } from '@plait/layouts';
-import { getSizeByText, ROOT_DEFAULT_HEIGHT, TEXT_DEFAULT_HEIGHT, updateForeignObject, drawRichtext, createForeignObject, updateRichText, setFullSelectionAndFocus, getRichtextContentSize, hasEditableTarget, RichtextModule } from '@plait/richtext';
+import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, distanceBetweenPointAndRectangle, RectangleClient, PlaitElement, PlaitBoard, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, depthFirstRecursion, Path, drawRoundRectangle, drawLinearPath, createG, updateForeignObject, PlaitNode, getRectangleByElements, getSelectedElements, NODE_TO_PARENT, createForeignObject, drawAbstractRoundRectangle, PlaitPluginElementComponent, PlaitPointerType, NODE_TO_INDEX, createText, IS_TEXT_EDITABLE, MERGING, transformPoint, toPoint, PlaitModule, distanceBetweenPointAndPoint, CLIP_BOARD_FORMAT_KEY, isMainPointer, BOARD_TO_HOST, PlaitPluginKey, throttleRAF, BoardTransforms, removeSelectedElement, PlaitHistoryBoard, hotkeys } from '@plait/core';
+import { MindLayoutType, isIndentedLayout, getNonAbstractChildren, isStandardLayout, AbstractNode, isLeftLayout, isRightLayout, isVerticalLogicLayout, isHorizontalLogicLayout, isTopLayout, isBottomLayout, isHorizontalLayout, getCorrectStartEnd, getAbstractLayout, ConnectingPosition, GlobalLayout } from '@plait/layouts';
+import { getSizeByText, ROOT_DEFAULT_HEIGHT, TEXT_DEFAULT_HEIGHT, drawRichtext, updateRichText, setFullSelectionAndFocus, getRichtextContentSize, hasEditableTarget, RichtextModule } from '@plait/richtext';
 import { fromEvent, Subject, timer } from 'rxjs';
 import { take, takeUntil, filter, debounceTime } from 'rxjs/operators';
 import { Node, Path as Path$1, Editor, Operation } from 'slate';
@@ -30,19 +30,13 @@ const DefaultAbstractNodeStyle = {
     strokeColor: GRAY_COLOR,
     strokeWidth: 2,
     branchColor: GRAY_COLOR,
-    branchWidth: 2,
-    fill: '#FFFFFF'
+    branchWidth: 2
 };
 const DefaultNodeStyle = {
     strokeWidth: 3,
     branchWidth: 3,
-    fill: '#FFFFFF'
+    fill: 'none'
 };
-const DefaultRootStyle = {
-    fill: '#F5F5F5',
-    strokeColor: '#F5F5F5',
-};
-const BRANCH_COLORS = ['#A287E1', '#6F81DB', '#6EC4C4', '#DFB85D', '#B1C774', '#77C386', '#C28976', '#E48484', '#E482D4', '#69B1E4'];
 
 const TOPIC_COLOR = '#333';
 const TOPIC_FONT_SIZE = 14;
@@ -93,6 +87,124 @@ var MindPointerType;
     MindPointerType["mind"] = "mind";
 })(MindPointerType || (MindPointerType = {}));
 
+const DEFAULT_BRANCH_COLORS = [
+    '#A287E0',
+    '#6E80DB',
+    '#6DC4C4',
+    '#E0B75E',
+    '#B1C675',
+    '#77C386',
+    '#C18976',
+    '#E48484',
+    '#E582D4',
+    '#6AB1E4'
+];
+const COLORFUL_BRANCH_COLORS = [
+    '#F94239',
+    '#FF8612',
+    '#F3D222',
+    '#B3D431',
+    '#00BC7B',
+    '#06ADBF',
+    '#476BFF',
+    '#4E49BE',
+    '#8957E5',
+    '#FE5DA1'
+];
+const SOFT_BRANCH_COLORS = [
+    '#6D89C1',
+    '#F2BDC7',
+    '#B796D9',
+    '#5BA683',
+    '#B3D431 ',
+    '#F2DC6C',
+    '#F7C98D',
+    '#60B4D1',
+    '#838F9E',
+    '#C1A381'
+];
+const RETRO_BRANCH_COLORS = [
+    '#459476',
+    '#9A894F',
+    '#D48444',
+    '#E9C358 ',
+    '#4B9D9D',
+    '#C14C41',
+    '#827086 ',
+    '#60718D',
+    '#D38183',
+    '#9DC19D'
+];
+const DARK_BRANCH_COLORS = [
+    '#3DD1AE',
+    '#F6C659',
+    '#A9E072',
+    '#FF877B ',
+    '#F693E7',
+    '#5DCFFF',
+    '#868AF6',
+    '#4C6DC7',
+    '#D97C26',
+    '#268FAC'
+];
+const STARRY_BRANCH_COLORS = [
+    '#E46C57',
+    '#579360',
+    '#B98339',
+    '#3A62D1 ',
+    '#B883B7',
+    '#42ABE5',
+    '#2B9D8F',
+    '#A4705E',
+    '#265833',
+    '#787865'
+];
+
+const MindDefaultThemeColor = {
+    ...DefaultThemeColor,
+    branchColors: DEFAULT_BRANCH_COLORS,
+    rootFill: '#f5f5f5',
+    rootTextColor: '#333333'
+};
+const MindColorfulThemeColor = {
+    ...ColorfulThemeColor,
+    branchColors: COLORFUL_BRANCH_COLORS,
+    rootFill: '#333333',
+    rootTextColor: '#FFFFFF'
+};
+const MindSoftThemeColor = {
+    ...SoftThemeColor,
+    branchColors: SOFT_BRANCH_COLORS,
+    rootFill: '#FFFFFF',
+    rootTextColor: '#333333'
+};
+const MindRetroThemeColor = {
+    ...RetroThemeColor,
+    branchColors: RETRO_BRANCH_COLORS,
+    rootFill: '#153D5D',
+    rootTextColor: '#FFFFFF'
+};
+const MindDarkThemeColor = {
+    ...DarkThemeColor,
+    branchColors: DARK_BRANCH_COLORS,
+    rootFill: '#FFFFFF',
+    rootTextColor: '#333333'
+};
+const MindStarryThemeColor = {
+    ...StarryThemeColor,
+    branchColors: STARRY_BRANCH_COLORS,
+    rootFill: '#FFFFFF',
+    rootTextColor: '#333333'
+};
+const MindThemeColors = [
+    MindDefaultThemeColor,
+    MindColorfulThemeColor,
+    MindSoftThemeColor,
+    MindRetroThemeColor,
+    MindDarkThemeColor,
+    MindStarryThemeColor
+];
+
 function getRectangleByNode(node) {
     const x = node.x + node.hGap;
     let y = node.y + node.vGap;
@@ -248,26 +360,11 @@ const createMindElement = (text, width, height, options) => {
         strokeWidth: options.strokeWidth,
         shape: options.shape
     };
-    if (options.fill) {
-        newElement.fill = options.fill;
-    }
-    if (options.strokeColor) {
-        newElement.strokeColor = options.strokeColor;
-    }
-    if (!isNullOrUndefined(options.strokeWidth)) {
-        newElement.strokeWidth = options.strokeWidth;
-    }
-    if (options.shape) {
-        newElement.shape = options.shape;
-    }
-    if (options.layout) {
-        newElement.layout = options.layout;
-    }
-    if (options.branchColor) {
-        newElement.branchColor = options.branchColor;
-    }
-    if (!isNullOrUndefined(options.branchWidth)) {
-        newElement.branchWidth = options.branchWidth;
+    let key;
+    for (key in options) {
+        if (!isNullOrUndefined(options[key])) {
+            newElement[key] = options[key];
+        }
     }
     return newElement;
 };
@@ -327,14 +424,15 @@ const extractNodesText = (node) => {
 };
 // layoutLevel 用来表示插入兄弟节点还是子节点
 const insertMindElement = (board, inheritNode, path) => {
-    let fill, strokeColor, strokeWidth, shape = MindElementShape.roundRectangle;
+    const inheritAttributeKeys = Object.keys({});
+    const newNode = {};
     if (!inheritNode.isRoot) {
-        fill = inheritNode.fill;
-        strokeColor = inheritNode.strokeColor;
-        strokeWidth = inheritNode.strokeWidth;
+        inheritAttributeKeys.forEach(attr => {
+            newNode[attr] = inheritNode[attr];
+        });
+        delete newNode.layout;
     }
-    shape = inheritNode.shape;
-    const newElement = createMindElement('', NODE_MIN_WIDTH, TEXT_DEFAULT_HEIGHT, { fill, strokeColor, strokeWidth, shape });
+    const newElement = createMindElement('', NODE_MIN_WIDTH, TEXT_DEFAULT_HEIGHT, newNode);
     Transforms.insertNode(board, newElement, path);
     clearSelectedElement(board);
     addSelectedElement(board, newElement);
@@ -486,7 +584,8 @@ const getAvailableProperty = (board, element, propertyKey) => {
  */
 const getBranchColorByMindElement = (board, element) => {
     const branchColor = getAvailableProperty(board, element, 'branchColor');
-    return branchColor || getDefaultBranchColor(board, element);
+    const parentBranchColor = MindElement.getParent(element)?.branchColor;
+    return parentBranchColor || branchColor || getDefaultBranchColor(board, element);
 };
 const getBranchShapeByMindElement = (board, element) => {
     const branchShape = getAvailableProperty(board, element, 'branchShape');
@@ -508,23 +607,29 @@ const getAbstractBranchColor = (board, element) => {
     }
     return DefaultAbstractNodeStyle.branchColor;
 };
-const getNextBranchColor = (root) => {
+const getNextBranchColor = (board, root) => {
     const index = root.children.length;
-    return getDefaultBranchColorByIndex(index);
+    return getDefaultBranchColorByIndex(board, index);
 };
 const getDefaultBranchColor = (board, element) => {
     const path = PlaitBoard.findPath(board, element);
-    return getDefaultBranchColorByIndex(path[1]);
+    return getDefaultBranchColorByIndex(board, path[1]);
 };
-const getDefaultBranchColorByIndex = (index) => {
-    const length = BRANCH_COLORS.length;
+const getDefaultBranchColorByIndex = (board, index) => {
+    const themeColor = getMindThemeColor(board);
+    const length = themeColor.branchColors.length;
     const remainder = index % length;
-    return BRANCH_COLORS[remainder];
+    return themeColor.branchColors[remainder];
+};
+const getMindThemeColor = (board) => {
+    const themeColors = PlaitBoard.getThemeColors(board);
+    return themeColors.find(val => val.mode === board.theme.themeColorMode) || MindDefaultThemeColor;
 };
 
 const getStrokeByMindElement = (board, element) => {
     if (PlaitMind.isMind(element)) {
-        return element.strokeColor || DefaultRootStyle.strokeColor;
+        const defaultRootStroke = getMindThemeColor(board).rootFill;
+        return element.strokeColor || defaultRootStroke;
     }
     const ancestors = MindElement.getAncestors(board, element);
     ancestors.unshift(element);
@@ -552,30 +657,20 @@ function isVirtualKey(e) {
 }
 
 const IS_DRAGGING = new WeakMap();
-const addActiveOnDragOrigin = (activeElement, isOrigin = true) => {
+const addActiveOnDragOrigin = (activeElement) => {
     const activeComponent = PlaitElement.getComponent(activeElement);
-    if (isOrigin) {
-        activeComponent.g.classList.add('dragging-origin');
-    }
-    else {
-        activeComponent.g.classList.add('dragging-child');
-    }
+    activeComponent.g.classList.add('dragging-node');
     !activeElement.isCollapsed &&
         activeElement.children.forEach(child => {
-            addActiveOnDragOrigin(child, false);
+            addActiveOnDragOrigin(child);
         });
 };
-const removeActiveOnDragOrigin = (activeElement, isOrigin = true) => {
+const removeActiveOnDragOrigin = (activeElement) => {
     const activeComponent = PlaitElement.getComponent(activeElement);
-    if (isOrigin) {
-        activeComponent.g.classList.remove('dragging-origin');
-    }
-    else {
-        activeComponent.g.classList.remove('dragging-child');
-    }
+    activeComponent.g.classList.remove('dragging-node');
     !activeElement.isCollapsed &&
         activeElement.children.forEach(child => {
-            removeActiveOnDragOrigin(child, false);
+            removeActiveOnDragOrigin(child);
         });
 };
 const isDragging = (board) => {
@@ -584,22 +679,20 @@ const isDragging = (board) => {
 const setIsDragging = (board, state) => {
     IS_DRAGGING.set(board, state);
 };
-const hasPreviousOrNextOfDropPath = (parent, target, dropPath) => {
-    const children = getNonAbstractChildren(parent);
-    let hasPreviousNode = dropPath[dropPath.length - 1] !== 0;
-    let hasNextNode = dropPath[dropPath.length - 1] !== (children?.length || 0);
+const hasPreviousOrNextOfDropPath = (parent, dropTarget, dropPath) => {
+    let children = getNonAbstractChildren(parent);
     if (PlaitMind.isMind(parent) && isStandardLayout(getRootLayout(parent))) {
-        const dropStandardRightBottom = target === parent.children[parent.rightNodeCount - 1] && dropPath[dropPath.length - 1] === parent.rightNodeCount;
-        const dropStandardLeftTop = target === parent.children[parent.rightNodeCount] && dropPath[dropPath.length - 1] === parent.rightNodeCount;
-        if (dropStandardRightBottom) {
-            hasPreviousNode = true;
-            hasNextNode = false;
+        const isDropRight = isDropStandardRight(parent, dropTarget);
+        if (isDropRight) {
+            children = children.slice(0, parent.rightNodeCount);
         }
-        if (dropStandardLeftTop) {
-            hasPreviousNode = false;
-            hasNextNode = true;
+        if (!isDropRight) {
+            children = children.slice(parent.rightNodeCount, children.length);
+            dropPath = [...dropPath, dropPath[dropPath.length - 1] - parent.rightNodeCount];
         }
     }
+    let hasPreviousNode = dropPath[dropPath.length - 1] !== 0;
+    let hasNextNode = dropPath[dropPath.length - 1] !== (children?.length || 0);
     if (parent.isCollapsed) {
         hasNextNode = false;
         hasPreviousNode = false;
@@ -609,6 +702,14 @@ const hasPreviousOrNextOfDropPath = (parent, target, dropPath) => {
         hasNextNode
     };
 };
+const isDropStandardRight = (parent, dropTarget) => {
+    const target = dropTarget.target;
+    return ((PlaitMind.isMind(parent) &&
+        isStandardLayout(getRootLayout(parent)) &&
+        parent.children.indexOf(target) !== -1 &&
+        parent.children.indexOf(target) < parent.rightNodeCount) ||
+        (PlaitMind.isMind(target) && isStandardLayout(getRootLayout(target)) && dropTarget.detectResult === 'right'));
+};
 
 const directionCorrector = (board, node, detectResults) => {
     if (!node.origin.isRoot && !AbstractNode.isAbstract(node.origin)) {
@@ -735,88 +836,6 @@ const directionDetector = (targetNode, centerPoint) => {
     }
     return null;
 };
-/* 根据布局调整 target 以及 direction */
-const readjustmentDropTarget = (board, dropTarget) => {
-    const { target, detectResult } = dropTarget;
-    const newDropTarget = { target, detectResult };
-    const targetComponent = PlaitElement.getComponent(target);
-    if (targetComponent.node.children.length > 0 && dropTarget.detectResult) {
-        const layout = MindQueries.getCorrectLayoutByElement(board, targetComponent.node.origin);
-        const parentLayout = MindQueries.getCorrectLayoutByElement(board, targetComponent.node.origin.isRoot ? targetComponent.node.origin : targetComponent.node.parent.origin);
-        const children = getNonAbstractChildren(targetComponent.node);
-        if (['right', 'left'].includes(dropTarget.detectResult)) {
-            if (!isMixedLayout(parentLayout, layout)) {
-                if (targetComponent.node.origin.isRoot) {
-                    const layout = MindQueries.getCorrectLayoutByElement(board, targetComponent.node.origin);
-                    // 标准布局，根节点
-                    if (isStandardLayout(layout)) {
-                        const rightNodeCount = targetComponent.node.origin.rightNodeCount;
-                        if (detectResult === 'left') {
-                            // 作为左的第一个节点
-                            if (targetComponent.node.children.length === rightNodeCount) {
-                                return newDropTarget;
-                            }
-                        }
-                        else {
-                            // 作为右的第一个节点或最后一个节点
-                            if (rightNodeCount === 0) {
-                                newDropTarget.target = target;
-                            }
-                            else {
-                                newDropTarget.target = targetComponent.node.children[rightNodeCount - 1].origin;
-                                newDropTarget.detectResult = 'bottom';
-                            }
-                            return newDropTarget;
-                        }
-                    }
-                }
-                // 缩进布局探测到第一个子节点
-                if (isIndentedLayout(parentLayout)) {
-                    newDropTarget.target = targetComponent.node.children[0].origin;
-                    newDropTarget.detectResult = isTopLayout(parentLayout) ? 'bottom' : 'top';
-                    return newDropTarget;
-                }
-                // 上下布局的根节点只可以探测到上或者下，子节点的左右探测不处理，跳过。
-                if (isVerticalLogicLayout(parentLayout)) {
-                    return newDropTarget;
-                }
-                // 剩下是水平布局的默认情况：插入最后一个子节点的下方
-                const lastChildNodeIndex = children.length - 1;
-                newDropTarget.target = targetComponent.node.children[lastChildNodeIndex].origin;
-                newDropTarget.detectResult = 'bottom';
-            }
-            else {
-                // 处理左右布局下的混合布局
-                if ([MindLayoutType.left, MindLayoutType.right].includes(parentLayout)) {
-                    const layout = MindQueries.getCorrectLayoutByElement(board, targetComponent.node.origin);
-                    if (isIndentedLayout(layout)) {
-                        newDropTarget.target = targetComponent.node.children[0].origin;
-                        newDropTarget.detectResult = isTopLayout(layout) ? 'bottom' : 'top';
-                        return newDropTarget;
-                    }
-                }
-            }
-        }
-        if (['top', 'bottom'].includes(dropTarget.detectResult)) {
-            // 缩进布局移动至第一个节点
-            if (targetComponent.node.origin.isRoot && isIndentedLayout(layout)) {
-                newDropTarget.target = targetComponent.node.children[0].origin;
-                newDropTarget.detectResult = isTopLayout(layout) ? 'bottom' : 'top';
-                return newDropTarget;
-            }
-            // 上下布局，插到右边
-            const parentLayout = MindQueries.getCorrectLayoutByElement(board, targetComponent.node.origin.isRoot ? targetComponent.node.origin : targetComponent.node.parent.origin);
-            if (isVerticalLogicLayout(parentLayout)) {
-                const lastChildNodeIndex = children.length - 1;
-                newDropTarget.target = targetComponent.node.children[lastChildNodeIndex].origin;
-                newDropTarget.detectResult = 'right';
-                return newDropTarget;
-            }
-        }
-        return newDropTarget;
-    }
-    return dropTarget;
-};
 const isValidTarget = (origin, target) => {
     return origin !== target && !isChildElement(origin, target);
 };
@@ -838,7 +857,13 @@ const getPathByDropTarget = (board, dropTarget) => {
     }
     // 水平布局/标准布局：上下是兄弟节点，左右是子节点
     if (isHorizontalLogicLayout(layout)) {
-        if (dropTarget.detectResult === 'right' || dropTarget.detectResult === 'left') {
+        if (dropTarget.detectResult === 'right' && !PlaitMind.isMind(dropTarget?.target)) {
+            targetPath.push(children.length);
+        }
+        if (dropTarget.detectResult === 'right' && PlaitMind.isMind(dropTarget?.target) && isStandardLayout(layout)) {
+            targetPath.push(dropTarget?.target.rightNodeCount);
+        }
+        if (dropTarget.detectResult === 'left') {
             targetPath.push(children.length);
         }
         // 如果是上，位置不变，下插入到下一个兄弟节点
@@ -869,7 +894,8 @@ function drawRoundRectangleByNode(board, node) {
     return drawRoundRectangleByElement(board, rectangle, node.origin);
 }
 function drawRoundRectangleByElement(board, nodeRectangle, element) {
-    const fill = element.fill ? element.fill : element.isRoot ? DefaultRootStyle.fill : DefaultNodeStyle.fill;
+    const defaultRootFill = getMindThemeColor(board).rootFill;
+    const fill = element.fill ? element.fill : element.isRoot ? defaultRootFill : DefaultNodeStyle.fill;
     const stroke = getStrokeByMindElement(board, element);
     const strokeWidth = element.strokeWidth ? element.strokeWidth : DefaultNodeStyle.strokeWidth;
     const nodeG = drawRoundRectangle(PlaitBoard.getRoughSVG(board), nodeRectangle.x, nodeRectangle.y, nodeRectangle.x + nodeRectangle.width, nodeRectangle.y + nodeRectangle.height, {
@@ -1013,7 +1039,7 @@ const transformPlacement = (placement, direction) => {
 
 function drawIndentedLink(board, node, child, defaultStroke = null, needDrawUnderline = true, defaultStrokeWidth) {
     const branchShape = getBranchShapeByMindElement(board, node.origin);
-    const branchWidth = defaultStrokeWidth || getBranchWidthByMindElement(board, child.origin);
+    const branchWidth = defaultStrokeWidth || getBranchWidthByMindElement(board, node.origin);
     const branchColor = defaultStroke || getBranchColorByMindElement(board, child.origin);
     const isUnderlineShape = getShapeByElement(board, child.origin) === MindElementShape.underline;
     let beginX, beginY, endX, endY, beginNode = node, endNode = child;
@@ -1061,7 +1087,7 @@ function drawIndentedLink(board, node, child, defaultStroke = null, needDrawUnde
 function drawLogicLink(board, parent, node, isHorizontal, defaultStroke = null, defaultStrokeWidth) {
     const branchShape = getBranchShapeByMindElement(board, parent.origin);
     const branchColor = defaultStroke || getBranchColorByMindElement(board, node.origin);
-    const branchWidth = defaultStrokeWidth || getBranchWidthByMindElement(board, node.origin);
+    const branchWidth = defaultStrokeWidth || getBranchWidthByMindElement(board, parent.origin);
     const hasStraightLine = !parent.origin.isRoot;
     const parentShape = getShapeByElement(board, parent.origin);
     const shape = node.origin.shape ? node.origin.shape : parentShape;
@@ -1124,7 +1150,8 @@ function drawLink(board, parentNode, node, isHorizontal, needDrawUnderline, defa
         : drawLogicLink(board, parentNode, node, isHorizontal, defaultStroke, defaultStrokeWidth);
 }
 
-const drawFakeDragNode = (board, activeComponent, offsetX, offsetY) => {
+const drawFakeDragNode = (board, element, offsetX, offsetY) => {
+    const activeComponent = PlaitElement.getComponent(element);
     const dragFakeNodeG = createG();
     dragFakeNodeG.classList.add('dragging', 'fake-node', 'plait-board-attached');
     const fakeDraggingNode = {
@@ -1139,14 +1166,22 @@ const drawFakeDragNode = (board, activeComponent, offsetX, offsetY) => {
     updateForeignObject(richtextG, textRectangle.width, textRectangle.height, textRectangle.x + offsetX, textRectangle.y + offsetY);
     dragFakeNodeG?.append(fakeNodeG);
     dragFakeNodeG?.append(richtextG);
+    // draw emojis
+    if (MindElement.hasEmojis(element)) {
+        const fakeEmojisG = activeComponent.emojisDrawer.g.cloneNode(true);
+        const foreignRectangle = getEmojiForeignRectangle(board, element);
+        updateForeignObject(fakeEmojisG, foreignRectangle.width, foreignRectangle.height, foreignRectangle.x + offsetX, foreignRectangle.y + offsetY);
+        dragFakeNodeG?.append(fakeEmojisG);
+    }
     return dragFakeNodeG;
 };
-const drawFakeDropNode = (board, target, path) => {
+const drawFakeDropNode = (board, dropTarget, path) => {
+    const target = dropTarget.target;
     const fakeDropNodeG = createG();
     const parent = PlaitNode.get(board, Path.parent(path));
     const layout = MindQueries.getLayoutByElement(parent);
     const isHorizontal = isHorizontalLayout(layout);
-    const { hasNextNode, hasPreviousNode } = hasPreviousOrNextOfDropPath(parent, target, path);
+    const { hasNextNode, hasPreviousNode } = hasPreviousOrNextOfDropPath(parent, dropTarget, path);
     const width = 30;
     const height = 12;
     let fakeNode, centerPoint, basicNode, linkDirection;
@@ -1155,6 +1190,16 @@ const drawFakeDropNode = (board, target, path) => {
         const parentRect = getRectangleByNode(parentNode);
         linkDirection = getLayoutDirection(parentNode, isHorizontal);
         basicNode = parentNode;
+        if (PlaitMind.isMind(target) && isStandardLayout(layout)) {
+            if (dropTarget.detectResult === 'left') {
+                linkDirection = LayoutDirection.left;
+                basicNode.left = true;
+            }
+            else {
+                linkDirection = LayoutDirection.right;
+                basicNode.left = false;
+            }
+        }
         const placement = [HorizontalPlacement.right, VerticalPlacement.middle];
         transformPlacement(placement, linkDirection);
         const parentCenterPoint = getPointByPlacement(parentRect, placement);
@@ -2493,7 +2538,9 @@ class QuickInsertDrawer extends BaseDrawer {
             underlineCoordinates[MindLayoutType.right].startY -= height * 0.5;
             underlineCoordinates[MindLayoutType.right].endY -= height * 0.5;
         }
-        const branchColor = PlaitMind.isMind(element) ? getNextBranchColor(element) : getBranchColorByMindElement(this.board, element);
+        const branchColor = PlaitMind.isMind(element)
+            ? getNextBranchColor(this.board, element)
+            : getBranchColorByMindElement(this.board, element);
         let nodeLayout = MindQueries.getCorrectLayoutByElement(this.board, element);
         if (element.isRoot && isStandardLayout(nodeLayout)) {
             const root = element;
@@ -2604,7 +2651,8 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         }
         const isEqualNode = RectangleClient.isEqual(this.node, newNode);
         this.node = newNode;
-        if (!isEqualNode || value.element !== previous.element) {
+        const isChangeTheme = this.board.operations.find(op => op.type === 'set_theme');
+        if (!isEqualNode || value.element !== previous.element || isChangeTheme) {
             this.drawActiveG();
             this.updateActiveClass();
             this.drawShape();
@@ -2822,7 +2870,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
         }
         // interactive
         fromEvent(collapseG, 'mouseup')
-            .pipe(filter(() => !this.handActive || !PlaitBoard.isReadonly(this.board)), take(1))
+            .pipe(filter(() => !this.handActive || !!PlaitBoard.isReadonly(this.board)), take(1))
             .subscribe(() => {
             const isCollapsed = !this.node.origin.isCollapsed;
             const newElement = { isCollapsed };
@@ -3254,7 +3302,7 @@ const withDnd = (board) => {
                 startPoint = point;
             }
             else if (isMultiple) {
-                activeElements = getFirstLevelElement(selectedElements);
+                activeElements = selectedElements;
                 startPoint = point;
             }
         }, node => {
@@ -3283,7 +3331,7 @@ const withDnd = (board) => {
             dropTarget = detectDropTarget(board, detectPoint, dropTarget, [...activeElements, ...correspondingElements]);
             if (dropTarget?.target) {
                 targetPath = getPathByDropTarget(board, dropTarget);
-                fakeDropNodeG = drawFakeDropNode(board, dropTarget.target, targetPath);
+                fakeDropNodeG = drawFakeDropNode(board, dropTarget, targetPath);
                 PlaitBoard.getHost(board).appendChild(fakeDropNodeG);
             }
             const offsetX = endPoint[0] - startPoint[0];
@@ -3292,27 +3340,29 @@ const withDnd = (board) => {
             dragFakeNodeG = createG();
             [...activeElements, ...correspondingElements].forEach(element => {
                 addActiveOnDragOrigin(element);
-                if (activeElements.includes(element)) {
-                    const activeComponent = PlaitElement.getComponent(element);
-                    const nodeG = drawFakeDragNode(board, activeComponent, offsetX, offsetY);
-                    dragFakeNodeG?.appendChild(nodeG);
-                }
+            });
+            activeElements.forEach(element => {
+                const nodeG = drawFakeDragNode(board, element, offsetX, offsetY);
+                dragFakeNodeG?.appendChild(nodeG);
             });
             PlaitBoard.getHost(board).appendChild(dragFakeNodeG);
         }
         mousemove(event);
     };
     board.globalMouseup = (event) => {
-        if (!board.options.readonly && activeElements?.length) {
-            const elements = [...activeElements, ...correspondingElements];
+        const firstLevelElements = getFirstLevelElement(activeElements);
+        if (!board.options.readonly && firstLevelElements.length) {
+            firstLevelElements.push(...correspondingElements);
             if (isDragging(board)) {
-                elements.forEach(element => removeActiveOnDragOrigin(element));
+                firstLevelElements.forEach(element => {
+                    removeActiveOnDragOrigin(element);
+                });
             }
             if (dropTarget) {
                 const targetPathRef = board.pathRef(targetPath);
                 const targetElementPathRef = board.pathRef(PlaitBoard.findPath(board, dropTarget.target));
-                const abstractRefs = getValidAbstractRefs(board, elements);
-                const normalElements = elements
+                let abstractRefs = getValidAbstractRefs(board, firstLevelElements);
+                const normalElements = firstLevelElements
                     .filter(element => !abstractRefs.some(refs => refs.abstract === element))
                     .map(element => {
                     if (AbstractNode.isAbstract(element)) {
@@ -3323,18 +3373,30 @@ const withDnd = (board) => {
                     }
                     return element;
                 });
-                const effectedAbstracts = deleteElementHandleAbstract(board, elements);
+                const hasPreviousNode = targetPath[targetPath.length - 1] !== 0;
+                if (hasPreviousNode) {
+                    const previousElement = PlaitNode.get(board, Path.previous(targetPath));
+                    const correspondingAbstract = getCorrespondingAbstract(previousElement);
+                    const targetHasCorrespondAbstract = correspondingAbstract && correspondingAbstract.end !== targetPath[targetPath.length - 1] - 1;
+                    if (targetHasCorrespondAbstract) {
+                        const adjustedNode = abstractRefs.map(ref => {
+                            return adjustAbstractToNode(ref.abstract);
+                        });
+                        normalElements.push(...adjustedNode);
+                        abstractRefs = [];
+                    }
+                }
+                const effectedAbstracts = deleteElementHandleAbstract(board, firstLevelElements);
                 insertElementHandleAbstract(board, targetPath, normalElements.length, false, effectedAbstracts);
                 MindTransforms.setAbstractsByRefs(board, effectedAbstracts);
-                let refs = deleteElementsHandleRightNodeCount(board, elements);
-                const shouldChangeRoot = isInRightBranchOfStandardLayout(dropTarget?.target) &&
-                    targetElementPathRef.current &&
-                    (Path.isSibling(targetPath, targetElementPathRef.current) || Path.equals(targetPath, targetElementPathRef.current));
+                let refs = deleteElementsHandleRightNodeCount(board, firstLevelElements);
+                const parent = PlaitNode.get(board, Path.parent(targetPath));
+                const shouldChangeRoot = isDropStandardRight(parent, dropTarget);
                 if (shouldChangeRoot && targetElementPathRef.current) {
                     refs = insertElementHandleRightNodeCount(board, targetElementPathRef.current.slice(0, 1), normalElements.length, refs);
                 }
                 MindTransforms.setRightNodeCountByRefs(board, refs);
-                MindTransforms.removeElements(board, elements);
+                MindTransforms.removeElements(board, firstLevelElements);
                 let insertPath = targetPathRef.current;
                 const parentPath = Path.parent(targetPathRef.current || targetPath);
                 if (!insertPath) {
@@ -3600,8 +3662,20 @@ const withMindExtend = (board) => {
 const DefaultHotkey = 'm';
 const withCreateMind = (board) => {
     const newBoard = board;
-    const { keydown, mousemove, mouseup } = board;
+    const { keydown, mousedown, mousemove, mouseup } = board;
     let fakeCreateNodeRef = null;
+    newBoard.mousedown = (event) => {
+        if (fakeCreateNodeRef && PlaitBoard.isPointer(board, MindPointerType.mind)) {
+            const currentOptions = board.getPluginOptions(PlaitPluginKey.withSelection);
+            board.setPluginOptions(PlaitPluginKey.withSelection, {
+                isDisabledSelect: true
+            });
+            setTimeout(() => {
+                board.setPluginOptions(PlaitPluginKey.withSelection, { ...currentOptions });
+            }, 0);
+        }
+        mousedown(event);
+    };
     newBoard.mousemove = (event) => {
         if (PlaitBoard.isReadonly(board)) {
             mousemove(event);
@@ -3632,7 +3706,7 @@ const withCreateMind = (board) => {
                         fakeCreateNodeRef.nodeG = nodeG;
                         PlaitBoard.getHost(board).append(nodeG);
                         PlaitBoard.getHost(board).append(fakeCreateNodeRef.topicG);
-                        updateForeignObject$1(fakeCreateNodeRef.topicG, topicRectangle.width, topicRectangle.height, topicRectangle.x, topicRectangle.y);
+                        updateForeignObject(fakeCreateNodeRef.topicG, topicRectangle.width, topicRectangle.height, topicRectangle.x, topicRectangle.y);
                     }
                 }
             });
@@ -3677,6 +3751,31 @@ const withCreateMind = (board) => {
     return newBoard;
 };
 
+const withMindHotkey = (board) => {
+    const { keydown } = board;
+    board.keydown = (keyboardEvent) => {
+        if (!PlaitBoard.getMovingPoint(board)) {
+            return;
+        }
+        if (isExpandHotkey(keyboardEvent)) {
+            const selectedMindElements = getSelectedElements(board).filter(element => MindElement.isMindElement(board, element));
+            if (selectedMindElements.length === 1 &&
+                !PlaitMind.isMind(selectedMindElements[0]) &&
+                selectedMindElements[0].children &&
+                selectedMindElements[0].children.length > 0) {
+                const element = selectedMindElements[0];
+                Transforms.setNode(board, { isCollapsed: element.isCollapsed ? false : true }, PlaitBoard.findPath(board, element));
+                return;
+            }
+        }
+        keydown(keyboardEvent);
+    };
+    return board;
+};
+const isExpandHotkey = (keyboardEvent) => {
+    return isKeyHotkey('mod+/', keyboardEvent);
+};
+
 const withMind = (board) => {
     const { drawElement, dblclick, keydown, insertFragment, setFragment, deleteFragment, isHitSelection, getRectangle, isMovable, isRecursion } = board;
     board.drawElement = (context) => {
@@ -3688,6 +3787,20 @@ const withMind = (board) => {
         }
         return drawElement(context);
     };
+    board.applyTheme = (element) => {
+        const mindElement = element;
+        const shouldClearProperty = !PlaitBoard.isBoard(element) && (mindElement?.branchColor || mindElement?.fill || mindElement?.strokeColor);
+        const isAbstract = AbstractNode.isAbstract(element);
+        if (shouldClearProperty) {
+            const path = PlaitBoard.findPath(board, element);
+            if (isAbstract) {
+                Transforms.setNode(board, { fill: null, strokeColor: DefaultAbstractNodeStyle.strokeColor, branchColor: DefaultAbstractNodeStyle.branchColor }, path);
+            }
+            else {
+                Transforms.setNode(board, { fill: null, strokeColor: null, branchColor: null }, path);
+            }
+        }
+    };
     board.getRectangle = element => {
         if (MindElement.isMindElement(board, element)) {
             return getRectangleByNode(MindElement.getNode(element));
@@ -3701,12 +3814,9 @@ const withMind = (board) => {
         return isRecursion(element);
     };
     board.isHitSelection = (element, range) => {
-        if (MindElement.isMindElement(board, element) && board.selection) {
+        if (MindElement.isMindElement(board, element)) {
             const client = getRectangleByNode(MindElement.getNode(element));
             const isHit = RectangleClient.isHit(RectangleClient.toRectangleClient([range.anchor, range.focus]), client);
-            if (isHit && MindElement.hasEmojis(element) && Selection.isCollapsed(range) && isHitEmojis(board, element, range.anchor)) {
-                return false;
-            }
             return isHit;
         }
         return isHitSelection(element, range);
@@ -3868,13 +3978,22 @@ const withMind = (board) => {
         MindTransforms.removeElements(board, selectedElements);
         deleteFragment(data);
     };
-    return withMindExtend(withCreateMind(withAbstract(withDnd(board))));
+    return withMindHotkey(withMindExtend(withCreateMind(withAbstract(withDnd(board)))));
 };
 
 class MindEmojiBaseComponent {
     get nativeElement() {
         return this.elementRef.nativeElement;
     }
+    handleClick() {
+        const currentOptions = this.board.getPluginOptions(PlaitPluginKey.withSelection);
+        this.board.setPluginOptions(PlaitPluginKey.withSelection, {
+            isDisabledSelect: true
+        });
+        setTimeout(() => {
+            this.board.setPluginOptions(PlaitPluginKey.withSelection, { ...currentOptions });
+        }, 0);
+    }
     constructor(elementRef) {
         this.elementRef = elementRef;
         this.fontSize = 14;
@@ -3884,7 +4003,7 @@ class MindEmojiBaseComponent {
     }
 }
 MindEmojiBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindEmojiBaseComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-MindEmojiBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: MindEmojiBaseComponent, inputs: { fontSize: "fontSize", emojiItem: "emojiItem", board: "board", element: "element" }, host: { classAttribute: "mind-node-emoji" }, ngImport: i0 });
+MindEmojiBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.5", type: MindEmojiBaseComponent, inputs: { fontSize: "fontSize", emojiItem: "emojiItem", board: "board", element: "element" }, host: { listeners: { "mousedown": "handleClick()" }, classAttribute: "mind-node-emoji" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImport: i0, type: MindEmojiBaseComponent, decorators: [{
             type: Directive,
             args: [{
@@ -3900,6 +4019,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
                 type: Input
             }], element: [{
                 type: Input
+            }], handleClick: [{
+                type: HostListener,
+                args: ['mousedown']
             }] } });
 
 /*
@@ -3910,5 +4032,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, AbstractHandlePosition, AbstractResizeState, BASE, BRANCH_COLORS, BRANCH_WIDTH, BaseDrawer, BranchShape, DefaultAbstractNodeStyle, DefaultNodeStyle, DefaultRootStyle, ELEMENT_TO_NODE, EXTEND_OFFSET, EXTEND_RADIUS, GRAY_COLOR, IS_DRAGGING, LayoutDirection, LayoutDirectionsMap, MindElement, MindElementShape, MindEmojiBaseComponent, MindModule, MindNode, MindNodeComponent, MindPointerType, MindQueries, MindTransforms, NODE_MIN_WIDTH, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, QUICK_INSERT_CIRCLE_COLOR, QUICK_INSERT_CIRCLE_OFFSET, QUICK_INSERT_INNER_CROSS_COLOR, ROOT_TOPIC_FONT_SIZE, STROKE_WIDTH, TOPIC_COLOR, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, TRANSPARENT, addActiveOnDragOrigin, adjustAbstractToNode, adjustNodeToRoot, adjustRootToNode, canSetAbstract, copyNewNode, correctLayoutByDirection, createDefaultMind, createEmptyMind, createMindElement, deleteElementHandleAbstract, deleteElementsHandleRightNodeCount, detectDropTarget, directionCorrector, directionDetector, divideElementByParent, drawFakeDragNode, drawFakeDropNode, enterNodeEditing, extractNodesText, findLastChild, findLocationLeftIndex, getAbstractBranchColor, getAbstractBranchWidth, getAbstractHandleRectangle, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getBranchShapeByMindElement, getBranchWidthByMindElement, getChildrenCount, getCorrespondingAbstract, getDefaultBranchColor, getDefaultBranchColorByIndex, getDefaultLayout, getEmojiForeignRectangle, getEmojiRectangle, getFirstLevelElement, getHitAbstractHandle, getInCorrectLayoutDirection, getLayoutDirection$1 as getLayoutDirection, getLayoutReverseDirection, getLocationScope, getNextBranchColor, getOverallAbstracts, getPathByDropTarget, getRectangleByElement, getRectangleByNode, getRectangleByResizingLocation, getRelativeStartEndByAbstractRef, getRootLayout, getShapeByElement, getStrokeByMindElement, getTopicRectangleByElement, getTopicRectangleByNode, getValidAbstractRefs, handleTouchedAbstract, hasAfterDraw, hasPreviousOrNextOfDropPath, insertElementHandleAbstract, insertElementHandleRightNodeCount, insertMindElement, isChildElement, isChildRight, isChildUp, isCorrectLayout, isDragging, isHitEmojis, isHitMindElement, isInRightBranchOfStandardLayout, isMixedLayout, isSetAbstract, isValidTarget, isVirtualKey, readjustmentDropTarget, removeActiveOnDragOrigin, separateChildren, setIsDragging, withMind, withMindExtend };
+export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, AbstractHandlePosition, AbstractResizeState, BASE, BRANCH_WIDTH, BaseDrawer, BranchShape, DefaultAbstractNodeStyle, DefaultNodeStyle, ELEMENT_TO_NODE, EXTEND_OFFSET, EXTEND_RADIUS, GRAY_COLOR, IS_DRAGGING, LayoutDirection, LayoutDirectionsMap, MindColorfulThemeColor, MindDarkThemeColor, MindDefaultThemeColor, MindElement, MindElementShape, MindEmojiBaseComponent, MindModule, MindNode, MindNodeComponent, MindPointerType, MindQueries, MindRetroThemeColor, MindSoftThemeColor, MindStarryThemeColor, MindThemeColors, MindTransforms, NODE_MIN_WIDTH, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, QUICK_INSERT_CIRCLE_COLOR, QUICK_INSERT_CIRCLE_OFFSET, QUICK_INSERT_INNER_CROSS_COLOR, ROOT_TOPIC_FONT_SIZE, STROKE_WIDTH, TOPIC_COLOR, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, TRANSPARENT, addActiveOnDragOrigin, adjustAbstractToNode, adjustNodeToRoot, adjustRootToNode, canSetAbstract, copyNewNode, correctLayoutByDirection, createDefaultMind, createEmptyMind, createMindElement, deleteElementHandleAbstract, deleteElementsHandleRightNodeCount, detectDropTarget, directionCorrector, directionDetector, divideElementByParent, drawFakeDragNode, drawFakeDropNode, enterNodeEditing, extractNodesText, findLastChild, findLocationLeftIndex, getAbstractBranchColor, getAbstractBranchWidth, getAbstractHandleRectangle, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getBranchShapeByMindElement, getBranchWidthByMindElement, getChildrenCount, getCorrespondingAbstract, getDefaultBranchColor, getDefaultBranchColorByIndex, getDefaultLayout, getEmojiForeignRectangle, getEmojiRectangle, getFirstLevelElement, getHitAbstractHandle, getInCorrectLayoutDirection, getLayoutDirection$1 as getLayoutDirection, getLayoutReverseDirection, getLocationScope, getMindThemeColor, getNextBranchColor, getOverallAbstracts, getPathByDropTarget, getRectangleByElement, getRectangleByNode, getRectangleByResizingLocation, getRelativeStartEndByAbstractRef, getRootLayout, getShapeByElement, getStrokeByMindElement, getTopicRectangleByElement, getTopicRectangleByNode, getValidAbstractRefs, handleTouchedAbstract, hasAfterDraw, hasPreviousOrNextOfDropPath, insertElementHandleAbstract, insertElementHandleRightNodeCount, insertMindElement, isChildElement, isChildRight, isChildUp, isCorrectLayout, isDragging, isDropStandardRight, isHitEmojis, isHitMindElement, isInRightBranchOfStandardLayout, isMixedLayout, isSetAbstract, isValidTarget, isVirtualKey, removeActiveOnDragOrigin, separateChildren, setIsDragging, withMind, withMindExtend };
 //# sourceMappingURL=plait-mind.mjs.map