@plait/mind 0.7.0 → 0.9.0

package/fesm2020/plait-mind.mjs

@@ -591,8 +591,7 @@ const getAvailableProperty = (board, element, propertyKey) => {
  */
 const getBranchColorByMindElement = (board, element) => {
     const branchColor = getAvailableProperty(board, element, 'branchColor');
-    const parentBranchColor = MindElement.getParent(element)?.branchColor;
-    return parentBranchColor || branchColor || getDefaultBranchColor(board, element);
+    return branchColor || getDefaultBranchColor(board, element);
 };
 const getBranchShapeByMindElement = (board, element) => {
     const branchShape = getAvailableProperty(board, element, 'branchShape');
@@ -864,11 +863,13 @@ const getPathByDropTarget = (board, dropTarget) => {
     }
     // 水平布局/标准布局：上下是兄弟节点，左右是子节点
     if (isHorizontalLogicLayout(layout)) {
-        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 === 'right') {
+            if (PlaitMind.isMind(dropTarget?.target) && isStandardLayout(layout)) {
+                targetPath.push(dropTarget?.target.rightNodeCount);
+            }
+            else {
+                targetPath.push(children.length);
+            }
         }
         if (dropTarget.detectResult === 'left') {
             targetPath.push(children.length);
@@ -1047,7 +1048,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, node.origin);
-    const branchColor = defaultStroke || getBranchColorByMindElement(board, child.origin);
+    const branchColor = defaultStroke || node.origin?.branchColor || getBranchColorByMindElement(board, child.origin);
     const isUnderlineShape = getShapeByElement(board, child.origin) === MindElementShape.underline;
     let beginX, beginY, endX, endY, beginNode = node, endNode = child;
     const beginRectangle = getRectangleByNode(beginNode);
@@ -1083,7 +1084,8 @@ function drawIndentedLink(board, node, child, defaultStroke = null, needDrawUnde
         const polylinePoints = [
             [beginX, beginY],
             [beginX, endY],
-            [endX, endY]
+            [endX, endY],
+            isUnderlineShape && needDrawUnderline ? [endX + (endNode.width - endNode.hGap * 2) * plusMinus[0], endY] : [endX, endY]
         ];
         return drawLinearPath(polylinePoints, { stroke: branchColor, strokeWidth: branchWidth });
     }
@@ -1093,9 +1095,9 @@ 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 branchColor = defaultStroke || parent.origin?.branchColor || getBranchColorByMindElement(board, node.origin);
     const branchWidth = defaultStrokeWidth || getBranchWidthByMindElement(board, parent.origin);
-    const hasStraightLine = !parent.origin.isRoot;
+    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 hasUnderlineShape = shape === MindElementShape.underline;
@@ -2009,7 +2011,7 @@ function drawAbstractLink(board, node, isHorizontal) {
     const branchWidth = getAbstractBranchWidth(board, node.origin);
     const branchColor = getAbstractBranchColor(board, node.origin);
     const parent = node.parent;
-    const branchShape = getBranchShapeByMindElement(board, parent.origin);
+    const branchShape = getBranchShapeByMindElement(board, node.origin);
     const abstractRectangle = getRectangleByNode(node);
     let includedElements = parent.children.slice(node.origin.start, node.origin.end + 1).map(node => {
         return node.origin;
@@ -2226,7 +2228,9 @@ const setTopicSize = (board, element, width, height) => {
         height: height / board.viewport.zoom
     };
     const path = PlaitBoard.findPath(board, element);
-    Transforms.setNode(board, newElement, path);
+    if (newElement.width !== element.width || newElement.height !== element.height) {
+        Transforms.setNode(board, newElement, path);
+    }
 };
 const removeElements = (board, elements) => {
     const deletableElements = getFirstLevelElement(elements);
@@ -2422,176 +2426,61 @@ class QuickInsertDrawer extends BaseDrawer {
         return true;
     }
     draw(element) {
-        let offset = element.children.length > 0 && !element.isRoot ? EXTEND_RADIUS : 0;
         const quickInsertG = createG();
         this.g = quickInsertG;
         quickInsertG.classList.add('quick-insert');
         const node = MindElement.getNode(element);
-        const { x, y, width, height } = getRectangleByNode(node);
-        /**
-         * 方位：
-         *    1. 左、左上、左下
-         *    2. 右、右上、右下
-         *    3. 上、上左、上右
-         *    4. 下、下左、下右
-         */
-        const shape = getShapeByElement(this.board, element);
-        // 形状是矩形要偏移边框的线宽
-        const branchWidth = getBranchWidthByMindElement(this.board, element);
-        let offsetBorderLineWidth = 0;
-        if (shape === MindElementShape.roundRectangle && offset === 0) {
-            offsetBorderLineWidth = branchWidth;
-        }
-        let offsetRootBorderLineWidth = 0;
-        if (element.isRoot) {
-            offsetRootBorderLineWidth = branchWidth;
-        }
-        // 当没有子节点时，需要缩小的偏移量
-        const extraOffset = 3;
-        const underlineCoordinates = {
-            // 画线方向：右向左 <--
-            [MindLayoutType.left]: {
-                // EXTEND_RADIUS * 0.5 是 左方向，折叠/收起的偏移量
-                startX: x - (offset > 0 ? offset + EXTEND_RADIUS * 0.5 : 0) - offsetRootBorderLineWidth,
-                startY: y + height,
-                endX: x -
-                    offsetBorderLineWidth -
-                    offsetRootBorderLineWidth -
-                    (offset > 0 ? offset + QUICK_INSERT_CIRCLE_OFFSET - extraOffset : 0) -
-                    EXTEND_RADIUS,
-                endY: y + height
-            },
-            // 画线方向：左向右 -->
-            [MindLayoutType.right]: {
-                startX: x + width + (offset > 0 ? offset + QUICK_INSERT_CIRCLE_OFFSET : 0) + offsetRootBorderLineWidth,
-                startY: y + height,
-                endX: x +
-                    width +
-                    offsetBorderLineWidth +
-                    (offset > 0 ? offset + QUICK_INSERT_CIRCLE_OFFSET - extraOffset : 0) +
-                    EXTEND_RADIUS +
-                    offsetRootBorderLineWidth,
-                endY: y + height
-            },
-            // 画线方向：下向上 -->
-            [MindLayoutType.upward]: {
-                startX: x + width * 0.5,
-                startY: y - offsetBorderLineWidth - (offset > 0 ? offset + QUICK_INSERT_CIRCLE_OFFSET : 0) - offsetRootBorderLineWidth,
-                endX: x + width * 0.5,
-                endY: y -
-                    offsetBorderLineWidth -
-                    (offset > 0 ? offset + QUICK_INSERT_CIRCLE_OFFSET - extraOffset : 0) -
-                    EXTEND_RADIUS -
-                    offsetRootBorderLineWidth
-            },
-            // 画线方向：上向下 -->
-            [MindLayoutType.downward]: {
-                startX: x + width * 0.5,
-                startY: y + height + offsetBorderLineWidth + (offset > 0 ? offset + QUICK_INSERT_CIRCLE_OFFSET : 0) + offsetRootBorderLineWidth,
-                endX: x + width * 0.5,
-                endY: y +
-                    height +
-                    offsetBorderLineWidth +
-                    (offset > 0 ? offset + QUICK_INSERT_CIRCLE_OFFSET - extraOffset : 0) +
-                    EXTEND_RADIUS +
-                    offsetRootBorderLineWidth
-            },
-            [MindLayoutType.leftBottomIndented]: {
-                startX: x + width * 0.5,
-                startY: y + height + offsetBorderLineWidth + (offset > 0 ? offset + QUICK_INSERT_CIRCLE_OFFSET : 0) + offsetRootBorderLineWidth,
-                endX: x + width * 0.5,
-                endY: y +
-                    height +
-                    offsetBorderLineWidth +
-                    (offset > 0 ? offset + QUICK_INSERT_CIRCLE_OFFSET - extraOffset : 0) +
-                    EXTEND_RADIUS +
-                    offsetRootBorderLineWidth
-            },
-            [MindLayoutType.leftTopIndented]: {
-                startX: x + width * 0.5,
-                startY: y - offsetBorderLineWidth - (offset > 0 ? offset + QUICK_INSERT_CIRCLE_OFFSET : 0) - offsetRootBorderLineWidth,
-                endX: x + width * 0.5,
-                endY: y -
-                    offsetBorderLineWidth -
-                    (offset > 0 ? offset + QUICK_INSERT_CIRCLE_OFFSET : 0) -
-                    EXTEND_RADIUS -
-                    offsetRootBorderLineWidth
-            },
-            [MindLayoutType.rightBottomIndented]: {
-                startX: x + width * 0.5,
-                startY: y + height + offsetBorderLineWidth + (offset > 0 ? offset + QUICK_INSERT_CIRCLE_OFFSET : 0) + offsetRootBorderLineWidth,
-                endX: x + width * 0.5,
-                endY: y +
-                    height +
-                    offsetBorderLineWidth +
-                    (offset > 0 ? offset + QUICK_INSERT_CIRCLE_OFFSET - extraOffset : 0) +
-                    EXTEND_RADIUS +
-                    offsetRootBorderLineWidth
-            },
-            [MindLayoutType.rightTopIndented]: {
-                startX: x + width * 0.5,
-                startY: y - offsetBorderLineWidth - (offset > 0 ? offset + QUICK_INSERT_CIRCLE_OFFSET : 0) - offsetRootBorderLineWidth,
-                endX: x + width * 0.5,
-                endY: y -
-                    offsetBorderLineWidth -
-                    (offset > 0 ? offset + QUICK_INSERT_CIRCLE_OFFSET : 0) -
-                    EXTEND_RADIUS -
-                    offsetRootBorderLineWidth
-            }
-        };
-        if (shape === MindElementShape.roundRectangle || element.isRoot) {
-            underlineCoordinates[MindLayoutType.left].startY -= height * 0.5;
-            underlineCoordinates[MindLayoutType.left].endY -= height * 0.5;
-            underlineCoordinates[MindLayoutType.right].startY -= height * 0.5;
-            underlineCoordinates[MindLayoutType.right].endY -= height * 0.5;
+        const layout = MindQueries.getLayoutByElement(element);
+        const isHorizontal = isHorizontalLayout(layout);
+        let linkDirection = getLayoutDirection(node, isHorizontal);
+        if (isIndentedLayout(layout)) {
+            linkDirection = isTopLayout(layout) ? LayoutDirection.top : LayoutDirection.bottom;
         }
+        const isUnderlineShape = getShapeByElement(this.board, element) === MindElementShape.underline;
+        const nodeClient = getRectangleByNode(node);
+        const branchWidth = getBranchWidthByMindElement(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;
-            nodeLayout = root.children.length >= root.rightNodeCount ? MindLayoutType.left : MindLayoutType.right;
-        }
-        const underlineCoordinate = underlineCoordinates[nodeLayout];
-        if (underlineCoordinate) {
-            const underline = PlaitBoard.getRoughSVG(this.board).line(underlineCoordinate.startX, underlineCoordinate.startY, underlineCoordinate.endX, underlineCoordinate.endY, { stroke: branchColor, strokeWidth: branchWidth });
-            const circleCoordinates = {
-                startX: underlineCoordinate.endX,
-                startY: underlineCoordinate.endY
-            };
-            const circle = PlaitBoard.getRoughSVG(this.board).circle(circleCoordinates.startX, circleCoordinates.startY, EXTEND_RADIUS, {
-                fill: QUICK_INSERT_CIRCLE_COLOR,
-                stroke: QUICK_INSERT_CIRCLE_COLOR,
-                fillStyle: 'solid'
-            });
-            const innerCrossCoordinates = {
-                horizontal: {
-                    startX: circleCoordinates.startX - EXTEND_RADIUS * 0.5 + 3,
-                    startY: circleCoordinates.startY,
-                    endX: circleCoordinates.startX + EXTEND_RADIUS * 0.5 - 3,
-                    endY: circleCoordinates.startY
-                },
-                vertical: {
-                    startX: circleCoordinates.startX,
-                    startY: circleCoordinates.startY - EXTEND_RADIUS * 0.5 + 3,
-                    endX: circleCoordinates.startX,
-                    endY: circleCoordinates.startY + EXTEND_RADIUS * 0.5 - 3
-                }
-            };
-            const innerCrossHLine = PlaitBoard.getRoughSVG(this.board).line(innerCrossCoordinates.horizontal.startX, innerCrossCoordinates.horizontal.startY, innerCrossCoordinates.horizontal.endX, innerCrossCoordinates.horizontal.endY, {
-                stroke: QUICK_INSERT_INNER_CROSS_COLOR,
-                strokeWidth: 2
-            });
-            const innerRingVLine = PlaitBoard.getRoughSVG(this.board).line(innerCrossCoordinates.vertical.startX, innerCrossCoordinates.vertical.startY, innerCrossCoordinates.vertical.endX, innerCrossCoordinates.vertical.endY, {
-                stroke: QUICK_INSERT_INNER_CROSS_COLOR,
-                strokeWidth: 2
-            });
-            quickInsertG.appendChild(underline);
-            quickInsertG.appendChild(circle);
-            quickInsertG.appendChild(innerCrossHLine);
-            quickInsertG.appendChild(innerRingVLine);
+        let distance = 8;
+        let placement = [HorizontalPlacement.right, VerticalPlacement.middle];
+        transformPlacement(placement, linkDirection);
+        // underline shape and horizontal
+        if (isHorizontal && isUnderlineShape && !element.isRoot) {
+            placement[1] = VerticalPlacement.bottom;
         }
+        let beginPoint = getPointByPlacement(nodeClient, placement);
+        if (element.children.length > 0 && !element.isRoot) {
+            beginPoint = moveXOfPoint(beginPoint, EXTEND_RADIUS + 8, linkDirection);
+            distance = 5;
+        }
+        const endPoint = moveXOfPoint(beginPoint, distance, linkDirection);
+        const circleCenter = moveXOfPoint(endPoint, 8, linkDirection);
+        const line = PlaitBoard.getRoughSVG(this.board).line(beginPoint[0], beginPoint[1], endPoint[0], endPoint[1], {
+            stroke: branchColor,
+            strokeWidth: branchWidth
+        });
+        const circle = PlaitBoard.getRoughSVG(this.board).circle(circleCenter[0], circleCenter[1], EXTEND_RADIUS, {
+            fill: QUICK_INSERT_CIRCLE_COLOR,
+            stroke: QUICK_INSERT_CIRCLE_COLOR,
+            fillStyle: 'solid'
+        });
+        const HLineBeginPoint = [circleCenter[0] - 5, circleCenter[1]];
+        const HLineEndPoint = [circleCenter[0] + 5, circleCenter[1]];
+        const VLineBeginPoint = [circleCenter[0], circleCenter[1] - 5];
+        const VLineEndPoint = [circleCenter[0], circleCenter[1] + 5];
+        const innerCrossHLine = PlaitBoard.getRoughSVG(this.board).line(HLineBeginPoint[0], HLineBeginPoint[1], HLineEndPoint[0], HLineEndPoint[1], {
+            stroke: QUICK_INSERT_INNER_CROSS_COLOR,
+            strokeWidth: 2
+        });
+        const innerCrossVLine = PlaitBoard.getRoughSVG(this.board).line(VLineBeginPoint[0], VLineBeginPoint[1], VLineEndPoint[0], VLineEndPoint[1], {
+            stroke: QUICK_INSERT_INNER_CROSS_COLOR,
+            strokeWidth: 2
+        });
+        quickInsertG.appendChild(line);
+        quickInsertG.appendChild(circle);
+        quickInsertG.appendChild(innerCrossHLine);
+        quickInsertG.appendChild(innerCrossVLine);
         return quickInsertG;
     }
     afterDraw(element) {
@@ -2969,7 +2858,7 @@ class MindNodeComponent extends PlaitPluginElementComponent {
                 const hideCircleG = this.roughSVG.circle(extendLineXY[1][0] + circleOffset[0], extendLineXY[1][1] + circleOffset[1], EXTEND_RADIUS - 1, {
                     fill: '#fff',
                     stroke,
-                    strokeWidth: branchWidth,
+                    strokeWidth: branchWidth > 3 ? 3 : branchWidth,
                     fillStyle: 'solid'
                 });
                 collapseG.appendChild(hideCircleG);
@@ -3289,7 +3178,10 @@ const withDnd = (board) => {
     let dropTarget = null;
     let targetPath;
     board.mousedown = (event) => {
-        if (board.options.readonly || IS_TEXT_EDITABLE.get(board) || event.button === 2) {
+        if (PlaitBoard.isReadonly(board) ||
+            PlaitBoard.hasBeenTextEditing(board) ||
+            !PlaitBoard.isPointer(board, PlaitPointerType.selection) ||
+            event.button === 2) {
             mousedown(event);
             return;
         }
@@ -3322,6 +3214,7 @@ const withDnd = (board) => {
         });
         if (activeElements.length) {
             correspondingElements = getOverallAbstracts(board, activeElements);
+            event.preventDefault();
         }
         mousedown(event);
     };
@@ -3729,6 +3622,7 @@ const withCreateMind = (board) => {
             const targetPoint = transformPoint(board, toPoint(movingPoint[0], movingPoint[1], PlaitBoard.getHost(board)));
             const emptyMind = createEmptyMind(board, targetPoint);
             Transforms.insertNode(board, emptyMind, [board.children.length]);
+            clearSelectedElement(board);
             addSelectedElement(board, emptyMind);
             BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
         }