@plait/mind 0.17.0 → 0.19.0

package/fesm2020/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';
@@ -659,15 +659,21 @@ const adjustNodeToRoot = (board, node) => {
 };
 
 const DefaultAbstractNodeStyle = {
-    strokeColor: GRAY_COLOR,
-    strokeWidth: 2,
-    branchColor: GRAY_COLOR,
-    branchWidth: 2
+    branch: { color: GRAY_COLOR, width: 2 },
+    shape: {
+        strokeColor: GRAY_COLOR,
+        strokeWidth: 2
+    }
 };
 const DefaultNodeStyle = {
-    strokeWidth: 3,
-    branchWidth: 3,
-    fill: 'none'
+    branch: {
+        width: 3
+    },
+    shape: {
+        rectangleRadius: 4,
+        strokeWidth: 3,
+        fill: 'none'
+    }
 };
 
 const getAvailableProperty = (board, element, propertyKey) => {
@@ -863,13 +869,13 @@ const getAbstractBranchWidth = (board, element) => {
     if (!isNullOrUndefined(element.branchWidth)) {
         return element.branchWidth;
     }
-    return DefaultAbstractNodeStyle.branchWidth;
+    return DefaultAbstractNodeStyle.branch.width;
 };
 const getAbstractBranchColor = (board, element) => {
     if (element.branchColor) {
         return element.branchColor;
     }
-    return DefaultAbstractNodeStyle.branchColor;
+    return DefaultAbstractNodeStyle.branch.color;
 };
 const getNextBranchColor = (board, root) => {
     const index = root.children.length;
@@ -902,11 +908,22 @@ 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 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;
@@ -1345,7 +1362,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);
@@ -2034,16 +2051,15 @@ function drawRoundRectangleByNode(board, node) {
     return drawRoundRectangleByElement(board, rectangle, node.origin);
 }
 function drawRoundRectangleByElement(board, nodeRectangle, element) {
-    const defaultRootFill = getMindThemeColor(board).rootFill;
-    const fill = element.fill ? element.fill : element.isRoot ? defaultRootFill : DefaultNodeStyle.fill;
+    const fill = getFillByElement(board, element);
     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;
 }
 
@@ -2216,8 +2232,8 @@ const setAbstractByElements = (board, groupParent, group) => {
 };
 const insertAbstractNode = (board, path, start, end) => {
     const mindElement = createMindElement('概要', 28, 20, {
-        strokeWidth: DefaultAbstractNodeStyle.branchWidth,
-        branchWidth: DefaultAbstractNodeStyle.branchWidth
+        strokeWidth: DefaultAbstractNodeStyle.branch.width,
+        branchWidth: DefaultAbstractNodeStyle.branch.width
     });
     mindElement.start = start;
     mindElement.end = end;
@@ -2561,6 +2577,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) {
@@ -2579,14 +2637,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) {
@@ -3830,15 +3887,9 @@ const withMind = (board) => {
     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);
-            }
+            Transforms.setNode(board, { fill: null, strokeColor: null, branchColor: null }, path);
         }
     };
     board.getRectangle = element => {
@@ -3987,5 +4038,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, getFillByElement, 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