@plait/mind 0.17.0 → 0.18.0

package/esm2020/utils/node-style/shape.mjs

@@ -3,20 +3,24 @@ import { getAvailableProperty } from './common';
 import { getDefaultBranchColor, getMindThemeColor } from './branch';
 import { AbstractNode } from '@plait/layouts';
 import { isChildOfAbstract } from '../abstract/common';
-import { DefaultAbstractNodeStyle } from '../../constants/node-style';
+import { DefaultAbstractNodeStyle, DefaultNodeStyle } from '../../constants/node-style';
 export 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.strokeColor;
-        ;
+        return element.strokeColor || DefaultAbstractNodeStyle.shape.strokeColor;
     }
     return getAvailableProperty(board, element, 'strokeColor') || getDefaultBranchColor(board, element);
 };
+export const getStrokeWidthByElement = (board, element) => {
+    const strokeWidth = element.strokeWidth ||
+        (AbstractNode.isAbstract(element) ? DefaultAbstractNodeStyle.shape.strokeWidth : DefaultNodeStyle.shape.strokeWidth);
+    return strokeWidth;
+};
 export const getShapeByElement = (board, element) => {
     const shape = getAvailableProperty(board, element, 'shape');
     return shape || MindElementShape.roundRectangle;
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2hhcGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9taW5kL3NyYy91dGlscy9ub2RlLXN0eWxlL3NoYXBlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBLE9BQU8sRUFBZSxnQkFBZ0IsRUFBRSxTQUFTLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUNwRixPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSxVQUFVLENBQUM7QUFDaEQsT0FBTyxFQUFFLHFCQUFxQixFQUFFLGlCQUFpQixFQUFFLE1BQU0sVUFBVSxDQUFDO0FBQ3BFLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUM5QyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUN2RCxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUV0RSxNQUFNLENBQUMsTUFBTSxzQkFBc0IsR0FBRyxDQUFDLEtBQWlCLEVBQUUsT0FBb0IsRUFBRSxFQUFFO0lBQzlFLElBQUksU0FBUyxDQUFDLE1BQU0sQ0FBQyxPQUFPLENBQUMsRUFBRTtRQUMzQixNQUFNLGlCQUFpQixHQUFHLGlCQUFpQixDQUFDLEtBQUssQ0FBQyxDQUFDLFFBQVEsQ0FBQztRQUM1RCxPQUFPLE9BQU8sQ0FBQyxXQUFXLElBQUksaUJBQWlCLENBQUM7S0FDbkQ7SUFFRCxJQUFJLFlBQVksQ0FBQyxVQUFVLENBQUMsT0FBTyxDQUFDLElBQUksaUJBQWlCLENBQUMsS0FBSyxFQUFFLE9BQU8sQ0FBQyxFQUFFO1FBQ3ZFLE9BQU8sT0FBTyxDQUFDLFdBQVcsSUFBSSx3QkFBd0IsQ0FBQyxXQUFXLENBQUM7UUFBQSxDQUFDO0tBQ3ZFO0lBRUQsT0FBTyxvQkFBb0IsQ0FBQyxLQUFLLEVBQUUsT0FBTyxFQUFFLGFBQWEsQ0FBQyxJQUFJLHFCQUFxQixDQUFDLEtBQUssRUFBRSxPQUFPLENBQUMsQ0FBQztBQUN4RyxDQUFDLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxpQkFBaUIsR0FBRyxDQUFDLEtBQWlCLEVBQUUsT0FBb0IsRUFBb0IsRUFBRTtJQUMzRixNQUFNLEtBQUssR0FBRyxvQkFBb0IsQ0FBQyxLQUFLLEVBQUUsT0FBTyxFQUFFLE9BQU8sQ0FBQyxDQUFDO0lBQzVELE9BQU8sS0FBSyxJQUFJLGdCQUFnQixDQUFDLGNBQWMsQ0FBQztBQUNwRCxDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQbGFpdEJvYXJkIH0gZnJvbSAnQHBsYWl0L2NvcmUnO1xuaW1wb3J0IHsgTWluZEVsZW1lbnQsIE1pbmRFbGVtZW50U2hhcGUsIFBsYWl0TWluZCB9IGZyb20gJy4uLy4uL2ludGVyZmFjZXMvZWxlbWVudCc7XG5pbXBvcnQgeyBnZXRBdmFpbGFibGVQcm9wZXJ0eSB9IGZyb20gJy4vY29tbW9uJztcbmltcG9ydCB7IGdldERlZmF1bHRCcmFuY2hDb2xvciwgZ2V0TWluZFRoZW1lQ29sb3IgfSBmcm9tICcuL2JyYW5jaCc7XG5pbXBvcnQgeyBBYnN0cmFjdE5vZGUgfSBmcm9tICdAcGxhaXQvbGF5b3V0cyc7XG5pbXBvcnQgeyBpc0NoaWxkT2ZBYnN0cmFjdCB9IGZyb20gJy4uL2Fic3RyYWN0L2NvbW1vbic7XG5pbXBvcnQgeyBEZWZhdWx0QWJzdHJhY3ROb2RlU3R5bGUgfSBmcm9tICcuLi8uLi9jb25zdGFudHMvbm9kZS1zdHlsZSc7XG5cbmV4cG9ydCBjb25zdCBnZXRTdHJva2VCeU1pbmRFbGVtZW50ID0gKGJvYXJkOiBQbGFpdEJvYXJkLCBlbGVtZW50OiBNaW5kRWxlbWVudCkgPT4ge1xuICAgIGlmIChQbGFpdE1pbmQuaXNNaW5kKGVsZW1lbnQpKSB7XG4gICAgICAgIGNvbnN0IGRlZmF1bHRSb290U3Ryb2tlID0gZ2V0TWluZFRoZW1lQ29sb3IoYm9hcmQpLnJvb3RGaWxsO1xuICAgICAgICByZXR1cm4gZWxlbWVudC5zdHJva2VDb2xvciB8fCBkZWZhdWx0Um9vdFN0cm9rZTtcbiAgICB9XG5cbiAgICBpZiAoQWJzdHJhY3ROb2RlLmlzQWJzdHJhY3QoZWxlbWVudCkgfHwgaXNDaGlsZE9mQWJzdHJhY3QoYm9hcmQsIGVsZW1lbnQpKSB7XG4gICAgICAgIHJldHVybiBlbGVtZW50LnN0cm9rZUNvbG9yIHx8IERlZmF1bHRBYnN0cmFjdE5vZGVTdHlsZS5zdHJva2VDb2xvcjs7XG4gICAgfVxuXG4gICAgcmV0dXJuIGdldEF2YWlsYWJsZVByb3BlcnR5KGJvYXJkLCBlbGVtZW50LCAnc3Ryb2tlQ29sb3InKSB8fCBnZXREZWZhdWx0QnJhbmNoQ29sb3IoYm9hcmQsIGVsZW1lbnQpO1xufTtcblxuZXhwb3J0IGNvbnN0IGdldFNoYXBlQnlFbGVtZW50ID0gKGJvYXJkOiBQbGFpdEJvYXJkLCBlbGVtZW50OiBNaW5kRWxlbWVudCk6IE1pbmRFbGVtZW50U2hhcGUgPT4ge1xuICAgIGNvbnN0IHNoYXBlID0gZ2V0QXZhaWxhYmxlUHJvcGVydHkoYm9hcmQsIGVsZW1lbnQsICdzaGFwZScpO1xuICAgIHJldHVybiBzaGFwZSB8fCBNaW5kRWxlbWVudFNoYXBlLnJvdW5kUmVjdGFuZ2xlO1xufTtcbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2hhcGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9taW5kL3NyYy91dGlscy9ub2RlLXN0eWxlL3NoYXBlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBLE9BQU8sRUFBZSxnQkFBZ0IsRUFBRSxTQUFTLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUNwRixPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSxVQUFVLENBQUM7QUFDaEQsT0FBTyxFQUFFLHFCQUFxQixFQUFFLGlCQUFpQixFQUFFLE1BQU0sVUFBVSxDQUFDO0FBQ3BFLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUM5QyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUN2RCxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUV4RixNQUFNLENBQUMsTUFBTSxzQkFBc0IsR0FBRyxDQUFDLEtBQWlCLEVBQUUsT0FBb0IsRUFBRSxFQUFFO0lBQzlFLElBQUksU0FBUyxDQUFDLE1BQU0sQ0FBQyxPQUFPLENBQUMsRUFBRTtRQUMzQixNQUFNLGlCQUFpQixHQUFHLGlCQUFpQixDQUFDLEtBQUssQ0FBQyxDQUFDLFFBQVEsQ0FBQztRQUM1RCxPQUFPLE9BQU8sQ0FBQyxXQUFXLElBQUksaUJBQWlCLENBQUM7S0FDbkQ7SUFFRCxJQUFJLFlBQVksQ0FBQyxVQUFVLENBQUMsT0FBTyxDQUFDLElBQUksaUJBQWlCLENBQUMsS0FBSyxFQUFFLE9BQU8sQ0FBQyxFQUFFO1FBQ3ZFLE9BQU8sT0FBTyxDQUFDLFdBQVcsSUFBSSx3QkFBd0IsQ0FBQyxLQUFLLENBQUMsV0FBVyxDQUFDO0tBQzVFO0lBRUQsT0FBTyxvQkFBb0IsQ0FBQyxLQUFLLEVBQUUsT0FBTyxFQUFFLGFBQWEsQ0FBQyxJQUFJLHFCQUFxQixDQUFDLEtBQUssRUFBRSxPQUFPLENBQUMsQ0FBQztBQUN4RyxDQUFDLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSx1QkFBdUIsR0FBRyxDQUFDLEtBQWlCLEVBQUUsT0FBb0IsRUFBRSxFQUFFO0lBQy9FLE1BQU0sV0FBVyxHQUNiLE9BQU8sQ0FBQyxXQUFXO1FBQ25CLENBQUMsWUFBWSxDQUFDLFVBQVUsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLENBQUMsd0JBQXdCLENBQUMsS0FBSyxDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUMsZ0JBQWdCLENBQUMsS0FBSyxDQUFDLFdBQVcsQ0FBQyxDQUFDO0lBQ3pILE9BQU8sV0FBVyxDQUFDO0FBQ3ZCLENBQUMsQ0FBQztBQUVGLE1BQU0sQ0FBQyxNQUFNLGlCQUFpQixHQUFHLENBQUMsS0FBaUIsRUFBRSxPQUFvQixFQUFvQixFQUFFO0lBQzNGLE1BQU0sS0FBSyxHQUFHLG9CQUFvQixDQUFDLEtBQUssRUFBRSxPQUFPLEVBQUUsT0FBTyxDQUFDLENBQUM7SUFDNUQsT0FBTyxLQUFLLElBQUksZ0JBQWdCLENBQUMsY0FBYyxDQUFDO0FBQ3BELENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFBsYWl0Qm9hcmQgfSBmcm9tICdAcGxhaXQvY29yZSc7XG5pbXBvcnQgeyBNaW5kRWxlbWVudCwgTWluZEVsZW1lbnRTaGFwZSwgUGxhaXRNaW5kIH0gZnJvbSAnLi4vLi4vaW50ZXJmYWNlcy9lbGVtZW50JztcbmltcG9ydCB7IGdldEF2YWlsYWJsZVByb3BlcnR5IH0gZnJvbSAnLi9jb21tb24nO1xuaW1wb3J0IHsgZ2V0RGVmYXVsdEJyYW5jaENvbG9yLCBnZXRNaW5kVGhlbWVDb2xvciB9IGZyb20gJy4vYnJhbmNoJztcbmltcG9ydCB7IEFic3RyYWN0Tm9kZSB9IGZyb20gJ0BwbGFpdC9sYXlvdXRzJztcbmltcG9ydCB7IGlzQ2hpbGRPZkFic3RyYWN0IH0gZnJvbSAnLi4vYWJzdHJhY3QvY29tbW9uJztcbmltcG9ydCB7IERlZmF1bHRBYnN0cmFjdE5vZGVTdHlsZSwgRGVmYXVsdE5vZGVTdHlsZSB9IGZyb20gJy4uLy4uL2NvbnN0YW50cy9ub2RlLXN0eWxlJztcblxuZXhwb3J0IGNvbnN0IGdldFN0cm9rZUJ5TWluZEVsZW1lbnQgPSAoYm9hcmQ6IFBsYWl0Qm9hcmQsIGVsZW1lbnQ6IE1pbmRFbGVtZW50KSA9PiB7XG4gICAgaWYgKFBsYWl0TWluZC5pc01pbmQoZWxlbWVudCkpIHtcbiAgICAgICAgY29uc3QgZGVmYXVsdFJvb3RTdHJva2UgPSBnZXRNaW5kVGhlbWVDb2xvcihib2FyZCkucm9vdEZpbGw7XG4gICAgICAgIHJldHVybiBlbGVtZW50LnN0cm9rZUNvbG9yIHx8IGRlZmF1bHRSb290U3Ryb2tlO1xuICAgIH1cblxuICAgIGlmIChBYnN0cmFjdE5vZGUuaXNBYnN0cmFjdChlbGVtZW50KSB8fCBpc0NoaWxkT2ZBYnN0cmFjdChib2FyZCwgZWxlbWVudCkpIHtcbiAgICAgICAgcmV0dXJuIGVsZW1lbnQuc3Ryb2tlQ29sb3IgfHwgRGVmYXVsdEFic3RyYWN0Tm9kZVN0eWxlLnNoYXBlLnN0cm9rZUNvbG9yO1xuICAgIH1cblxuICAgIHJldHVybiBnZXRBdmFpbGFibGVQcm9wZXJ0eShib2FyZCwgZWxlbWVudCwgJ3N0cm9rZUNvbG9yJykgfHwgZ2V0RGVmYXVsdEJyYW5jaENvbG9yKGJvYXJkLCBlbGVtZW50KTtcbn07XG5cbmV4cG9ydCBjb25zdCBnZXRTdHJva2VXaWR0aEJ5RWxlbWVudCA9IChib2FyZDogUGxhaXRCb2FyZCwgZWxlbWVudDogTWluZEVsZW1lbnQpID0+IHtcbiAgICBjb25zdCBzdHJva2VXaWR0aCA9XG4gICAgICAgIGVsZW1lbnQuc3Ryb2tlV2lkdGggfHxcbiAgICAgICAgKEFic3RyYWN0Tm9kZS5pc0Fic3RyYWN0KGVsZW1lbnQpID8gRGVmYXVsdEFic3RyYWN0Tm9kZVN0eWxlLnNoYXBlLnN0cm9rZVdpZHRoIDogRGVmYXVsdE5vZGVTdHlsZS5zaGFwZS5zdHJva2VXaWR0aCk7XG4gICAgcmV0dXJuIHN0cm9rZVdpZHRoO1xufTtcblxuZXhwb3J0IGNvbnN0IGdldFNoYXBlQnlFbGVtZW50ID0gKGJvYXJkOiBQbGFpdEJvYXJkLCBlbGVtZW50OiBNaW5kRWxlbWVudCk6IE1pbmRFbGVtZW50U2hhcGUgPT4ge1xuICAgIGNvbnN0IHNoYXBlID0gZ2V0QXZhaWxhYmxlUHJvcGVydHkoYm9hcmQsIGVsZW1lbnQsICdzaGFwZScpO1xuICAgIHJldHVybiBzaGFwZSB8fCBNaW5kRWxlbWVudFNoYXBlLnJvdW5kUmVjdGFuZ2xlO1xufTtcbiJdfQ==

package/fesm2015/plait-mind.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Directive, Input, Component, ChangeDetectionStrategy, NgModule, NgZone, HostListener } from '@angular/core';
 import * as i2 from '@plait/core';
-import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, RectangleClient, PlaitElement, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, PlaitNode, Path, PlaitBoard, depthFirstRecursion, drawLinearPath, drawBezierPath, createG, updateForeignObject, drawRoundRectangle, getRectangleByElements, getSelectedElements, NODE_TO_PARENT, distanceBetweenPointAndRectangle, createForeignObject, drawAbstractRoundRectangle, createText, PlaitPointerType, PlaitPluginElementComponent, NODE_TO_INDEX, PlaitModule, transformPoint, toPoint, getHitElements, distanceBetweenPointAndPoint, CLIP_BOARD_FORMAT_KEY, isMainPointer, BOARD_TO_HOST, PlaitPluginKey, throttleRAF, BoardTransforms, removeSelectedElement, PlaitHistoryBoard, hotkeys } from '@plait/core';
+import { DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, RectangleClient, PlaitElement, idCreator, isNullOrUndefined, Transforms, clearSelectedElement, addSelectedElement, PlaitNode, Path, PlaitBoard, depthFirstRecursion, drawLinearPath, drawBezierPath, createG, updateForeignObject, drawRoundRectangle, getRectangleByElements, getSelectedElements, NODE_TO_PARENT, distanceBetweenPointAndRectangle, createForeignObject, createText, PlaitPointerType, PlaitPluginElementComponent, NODE_TO_INDEX, PlaitModule, transformPoint, toPoint, getHitElements, distanceBetweenPointAndPoint, CLIP_BOARD_FORMAT_KEY, isMainPointer, BOARD_TO_HOST, PlaitPluginKey, throttleRAF, BoardTransforms, removeSelectedElement, PlaitHistoryBoard, hotkeys } from '@plait/core';
 import { MindLayoutType, isIndentedLayout, AbstractNode, getNonAbstractChildren, isStandardLayout, isLeftLayout, isRightLayout, isVerticalLogicLayout, isHorizontalLogicLayout, isTopLayout, isBottomLayout, isHorizontalLayout, getCorrectStartEnd, getAbstractLayout, ConnectingPosition, GlobalLayout } from '@plait/layouts';
 import { TEXT_DEFAULT_HEIGHT, buildText, getTextSize, TextManage, ExitOrigin, TextModule, getTextFromClipboard } from '@plait/text';
 import { fromEvent, Subject } from 'rxjs';
@@ -626,15 +626,20 @@ const adjustNodeToRoot = (board, node) => {
 };
 
 const DefaultAbstractNodeStyle = {
-    strokeColor: GRAY_COLOR,
-    strokeWidth: 2,
     branchColor: GRAY_COLOR,
-    branchWidth: 2
+    branchWidth: 2,
+    shape: {
+        strokeColor: GRAY_COLOR,
+        strokeWidth: 2
+    }
 };
 const DefaultNodeStyle = {
-    strokeWidth: 3,
     branchWidth: 3,
-    fill: 'none'
+    shape: {
+        rectangleRadius: 4,
+        strokeWidth: 3,
+        fill: 'none'
+    }
 };
 
 const getAvailableProperty = (board, element, propertyKey) => {
@@ -869,11 +874,15 @@ const getStrokeByMindElement = (board, element) => {
         return element.strokeColor || defaultRootStroke;
     }
     if (AbstractNode.isAbstract(element) || isChildOfAbstract(board, element)) {
-        return element.strokeColor || DefaultAbstractNodeStyle.strokeColor;
-        ;
+        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 getShapeByElement = (board, element) => {
     const shape = getAvailableProperty(board, element, 'shape');
     return shape || MindElementShape.roundRectangle;
@@ -1314,7 +1323,7 @@ function drawLogicLink(board, parent, node, isHorizontal, defaultStroke = null,
     const branchWidth = defaultStrokeWidth || getBranchWidthByMindElement(board, parent.origin);
     const hasStraightLine = branchShape === BranchShape.polyline ? true : !parent.origin.isRoot;
     const parentShape = getShapeByElement(board, parent.origin);
-    const shape = node.origin.shape ? node.origin.shape : parentShape;
+    const shape = getShapeByElement(board, node.origin);
     const hasUnderlineShape = shape === MindElementShape.underline;
     const hasUnderlineShapeOfParent = parentShape === MindElementShape.underline;
     const nodeClient = getRectangleByNode(node);
@@ -1980,15 +1989,15 @@ function drawRoundRectangleByNode(board, node) {
 }
 function drawRoundRectangleByElement(board, nodeRectangle, element) {
     const defaultRootFill = getMindThemeColor(board).rootFill;
-    const fill = element.fill ? element.fill : element.isRoot ? defaultRootFill : DefaultNodeStyle.fill;
+    const fill = element.fill ? element.fill : element.isRoot ? defaultRootFill : DefaultNodeStyle.shape.fill;
     const stroke = getStrokeByMindElement(board, element);
-    const strokeWidth = element.strokeWidth ? element.strokeWidth : DefaultNodeStyle.strokeWidth;
+    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;
 }
 
@@ -2500,6 +2509,48 @@ function handleBoardClass(board, activeHandlePosition, isHorizontal) {
         PlaitBoard.getBoardContainer(board).classList.remove('abstract-resizing-vertical');
     }
 }
+function drawAbstractRoundRectangle(rs, x1, y1, x2, y2, isHorizontal, options) {
+    const width = Math.abs(x1 - x2);
+    const height = Math.abs(y1 - y2);
+    const radius = 5;
+    const handleGap = 4;
+    const handleLength = 10;
+    const handleSpace = handleLength + handleGap * 2;
+    if (isHorizontal) {
+        const handleSideLine = (width - handleSpace - radius * 2) / 2;
+        const sideLine = height - radius * 2;
+        return rs.path(`M${x1 + radius},${y1}
+            l${handleSideLine},0
+            m${handleSpace},0
+            l${handleSideLine},0
+            a${radius},${radius},0,0,1,${radius},${radius}
+            l0,${sideLine}
+            a${radius},${radius},0,0,1,-${radius},${radius}
+            l-${handleSideLine},0
+            m-${handleSpace},0
+            l-${handleSideLine},0
+            a${radius},${radius},0,0,1,-${radius},-${radius}
+            l0,-${sideLine}
+            a${radius},${radius},0,0,1,${radius},-${radius}`, options);
+    }
+    else {
+        const handleSideLine = (height - handleSpace - radius * 2) / 2;
+        const sideLine = width - radius * 2;
+        return rs.path(`M${x1 + radius},${y1}
+            l${sideLine},0
+            a${radius},${radius},0,0,1,${radius},${radius}
+            l0,${handleSideLine}
+            m0,${handleSpace}
+            l0,${handleSideLine}
+            a${radius},${radius},0,0,1,-${radius},${radius}
+            l-${sideLine},0
+            a${radius},${radius},0,0,1,-${radius},-${radius}
+            l0,-${handleSideLine}
+            m0,-${handleSpace}
+            l0,-${handleSideLine}
+            a${radius},${radius},0,0,1,${radius},-${radius}`, options);
+    }
+}
 
 class NodeActiveDrawer extends BaseDrawer {
     canDraw(element, data) {
@@ -2518,14 +2569,13 @@ class NodeActiveDrawer extends BaseDrawer {
             activeG.append(this.abstractOutlineG);
         }
         const node = MindElement.getNode(element);
-        let { x, y, width, height } = getRectangleByNode(node);
-        const strokeG = drawRoundRectangle(PlaitBoard.getRoughSVG(this.board), x - 2, y - 2, x + width + 2, y + height + 2, { stroke: PRIMARY_COLOR, strokeWidth: 2, fill: '' }, true);
+        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);
-        if (!data.isEditing) {
-            const fillG = drawRoundRectangle(PlaitBoard.getRoughSVG(this.board), x - 2, y - 2, x + width + 2, y + height + 2, { stroke: PRIMARY_COLOR, fill: PRIMARY_COLOR, fillStyle: 'solid' }, true);
-            fillG.style.opacity = '0.15';
-            this.g.appendChild(fillG);
-        }
         return activeG;
     }
     updateAbstractOutline(element, activeHandlePosition, resizingLocation) {
@@ -3765,15 +3815,9 @@ const withMind = (board) => {
     board.applyTheme = (element) => {
         const mindElement = element;
         const shouldClearProperty = !PlaitBoard.isBoard(element) && ((mindElement === null || mindElement === void 0 ? void 0 : mindElement.branchColor) || (mindElement === null || mindElement === void 0 ? void 0 : mindElement.fill) || (mindElement === null || mindElement === void 0 ? void 0 : 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);
-            }
+            Transforms.setNode(board, { fill: null, strokeColor: null, branchColor: null }, path);
         }
     };
     board.getRectangle = element => {
@@ -3922,5 +3966,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_FONT_FAMILY, BRANCH_WIDTH, BaseDrawer, BranchShape, DEFAULT_FONT_FAMILY, DefaultAbstractNodeStyle, DefaultNodeStyle, ELEMENT_TO_NODE, EXTEND_DIAMETER, EXTEND_OFFSET, GRAY_COLOR, INHERIT_ATTRIBUTE_KEYS, IS_DRAGGING, LayoutDirection, LayoutDirectionsMap, MindColorfulThemeColor, MindDarkThemeColor, MindDefaultThemeColor, MindElement, MindElementShape, MindEmojiBaseComponent, MindImageBaseComponent, MindModule, MindNode, MindNodeComponent, MindPointerType, MindQueries, MindRetroThemeColor, MindSoftThemeColor, MindStarryThemeColor, MindThemeColor, MindThemeColors, MindTransforms, NODE_MIN_WIDTH, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, QUICK_INSERT_CIRCLE_COLOR, QUICK_INSERT_CIRCLE_OFFSET, QUICK_INSERT_INNER_CROSS_COLOR, ROOT_TOPIC_FONT_SIZE, ROOT_TOPIC_HEIGHT, STROKE_WIDTH, TOPIC_COLOR, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, TRANSPARENT, WithMindPluginKey, addActiveOnDragOrigin, adjustAbstractToNode, adjustNodeToRoot, adjustRootToNode, canSetAbstract, copyNewNode, correctLayoutByDirection, createDefaultMind, createEmptyMind, createMindElement, deleteElementHandleAbstract, deleteElementsHandleRightNodeCount, detectDropTarget, directionCorrector, directionDetector, divideElementByParent, drawFakeDragNode, drawFakeDropNode, editTopic, extractNodesText, findLastChild, findLocationLeftIndex, getAbstractBranchColor, getAbstractBranchWidth, getAbstractHandleRectangle, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getBranchShapeByMindElement, getBranchWidthByMindElement, getChildrenCount, getCorrespondingAbstract, getDefaultBranchColor, getDefaultBranchColorByIndex, getDefaultLayout, getEmojiForeignRectangle, getEmojiRectangle, getFirstLevelElement, getHitAbstractHandle, getImageForeignRectangle, 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, isChildOfAbstract, isChildRight, isChildUp, isCorrectLayout, isDragging, isDropStandardRight, isHitEmojis, isHitImage, isHitMindElement, isInRightBranchOfStandardLayout, isMixedLayout, isSetAbstract, isValidTarget, isVirtualKey, removeActiveOnDragOrigin, separateChildren, setIsDragging, withMind, withMindExtend };
+export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, AbstractHandlePosition, AbstractResizeState, BASE, BRANCH_FONT_FAMILY, BRANCH_WIDTH, BaseDrawer, BranchShape, DEFAULT_FONT_FAMILY, DefaultAbstractNodeStyle, DefaultNodeStyle, ELEMENT_TO_NODE, EXTEND_DIAMETER, EXTEND_OFFSET, GRAY_COLOR, INHERIT_ATTRIBUTE_KEYS, IS_DRAGGING, LayoutDirection, LayoutDirectionsMap, MindColorfulThemeColor, MindDarkThemeColor, MindDefaultThemeColor, MindElement, MindElementShape, MindEmojiBaseComponent, MindImageBaseComponent, MindModule, MindNode, MindNodeComponent, MindPointerType, MindQueries, MindRetroThemeColor, MindSoftThemeColor, MindStarryThemeColor, MindThemeColor, MindThemeColors, MindTransforms, NODE_MIN_WIDTH, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, QUICK_INSERT_CIRCLE_COLOR, QUICK_INSERT_CIRCLE_OFFSET, QUICK_INSERT_INNER_CROSS_COLOR, ROOT_TOPIC_FONT_SIZE, ROOT_TOPIC_HEIGHT, STROKE_WIDTH, TOPIC_COLOR, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, TRANSPARENT, WithMindPluginKey, addActiveOnDragOrigin, adjustAbstractToNode, adjustNodeToRoot, adjustRootToNode, canSetAbstract, copyNewNode, correctLayoutByDirection, createDefaultMind, createEmptyMind, createMindElement, deleteElementHandleAbstract, deleteElementsHandleRightNodeCount, detectDropTarget, directionCorrector, directionDetector, divideElementByParent, drawFakeDragNode, drawFakeDropNode, editTopic, extractNodesText, findLastChild, findLocationLeftIndex, getAbstractBranchColor, getAbstractBranchWidth, getAbstractHandleRectangle, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getBranchShapeByMindElement, getBranchWidthByMindElement, getChildrenCount, getCorrespondingAbstract, getDefaultBranchColor, getDefaultBranchColorByIndex, getDefaultLayout, getEmojiForeignRectangle, getEmojiRectangle, getFirstLevelElement, getHitAbstractHandle, getImageForeignRectangle, getInCorrectLayoutDirection, getLayoutDirection$1 as getLayoutDirection, getLayoutReverseDirection, getLocationScope, getMindThemeColor, getNextBranchColor, getOverallAbstracts, getPathByDropTarget, getRectangleByElement, getRectangleByNode, getRectangleByResizingLocation, getRelativeStartEndByAbstractRef, getRootLayout, getShapeByElement, getStrokeByMindElement, getStrokeWidthByElement, getTopicRectangleByElement, getTopicRectangleByNode, getValidAbstractRefs, handleTouchedAbstract, hasAfterDraw, hasPreviousOrNextOfDropPath, insertElementHandleAbstract, insertElementHandleRightNodeCount, insertMindElement, isChildElement, isChildOfAbstract, isChildRight, isChildUp, isCorrectLayout, isDragging, isDropStandardRight, isHitEmojis, isHitImage, isHitMindElement, isInRightBranchOfStandardLayout, isMixedLayout, isSetAbstract, isValidTarget, isVirtualKey, removeActiveOnDragOrigin, separateChildren, setIsDragging, withMind, withMindExtend };
 //# sourceMappingURL=plait-mind.mjs.map