@plait/draw 0.75.0-next.9 → 0.75.0

package/fesm2022/plait-draw.mjs

@@ -1,4 +1,4 @@
-import { ACTIVE_STROKE_WIDTH, DEFAULT_COLOR, ThemeColorMode, PlaitElement, RectangleClient, getSelectedElements, idCreator, catmullRomFitting, PlaitBoard, createG, drawLinearPath, setStrokeLinecap, setPathStrokeLinecap, getNearestPointBetweenPointAndArc, distanceBetweenPointAndPoint, distanceBetweenPointAndSegments, HIT_DISTANCE_BUFFER, isPointInPolygon, isLineHitRectangle, rotatePointsByAngle, createDebugGenerator, rotateAntiPointsByElement, getEllipseArcCenter, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, depthFirstRecursion, getIsRecursionFunc, SNAPPING_STROKE_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, Point, arrowPoints, createPath, rotate, findElements, createMask, createRect, getElementById, rotatePointsByElement, PlaitNode, hasValidAngle, toViewBoxPoint, toHostPoint, Direction, rotatePoints, getRectangleByElements, getSelectionAngle, rotatedDataPoints, isAxisChangedByAngle, isSelectionMoving, drawRectangle, getRectangleByAngle, getSnapRectangles, getTripleAxis, getMinPointDelta, SNAP_TOLERANCE, drawPointSnapLines, drawSolidLines, getNearestPointBetweenPointAndSegments, isPointInEllipse, getNearestPointBetweenPointAndEllipse, getEllipseTangentSlope, getVectorFromPointAndSlope, drawRoundRectangle, isPointInRoundRectangle, getCrossingPointsBetweenEllipseAndSegment, drawLine, Path, RgbaToHEX, SELECTION_RECTANGLE_CLASS_NAME, getHitElementByPoint, WritableClipboardOperationType, WritableClipboardType, addOrCreateClipboardContext, setAngleForG, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER, isMainPointer, throttleRAF, getAngleBetweenPoints, normalizeAngle, degreesToRadians, rotateElements, MERGING, ROTATE_HANDLE_CLASS_NAME, isSelectedElement, isDragging } from '@plait/core';
+import { ACTIVE_STROKE_WIDTH, DEFAULT_COLOR, ThemeColorMode, PlaitElement, RectangleClient, getSelectedElements, idCreator, catmullRomFitting, PlaitBoard, createG, drawLinearPath, setStrokeLinecap, setPathStrokeLinecap, getNearestPointBetweenPointAndArc, distanceBetweenPointAndPoint, distanceBetweenPointAndSegments, HIT_DISTANCE_BUFFER, isPointInPolygon, isLineHitRectangle, rotatePointsByAngle, createDebugGenerator, rotateAntiPointsByElement, getEllipseArcCenter, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, depthFirstRecursion, getIsRecursionFunc, SNAPPING_STROKE_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, Point, arrowPoints, createPath, rotate, findElements, createMask, createRect, getElementById, rotatePointsByElement, PlaitNode, hasValidAngle, toViewBoxPoint, toHostPoint, Direction, rotatePoints, getRectangleByElements, getSelectionAngle, rotatedDataPoints, isAxisChangedByAngle, isSelectionMoving, drawRectangle, getRectangleByAngle, getSnapRectangles, getTripleAxis, getMinPointDelta, SNAP_TOLERANCE, drawPointSnapLines, drawSolidLines, getNearestPointBetweenPointAndSegments, isPointInEllipse, getNearestPointBetweenPointAndEllipse, getEllipseTangentSlope, getVectorFromPointAndSlope, drawRoundRectangle, isPointInRoundRectangle, getCrossingPointsBetweenEllipseAndSegment, drawLine, getNearestPointBetweenPointAndDiscreteSegments, getNearestPointBetweenPointAndSegment, Path, RgbaToHEX, SELECTION_RECTANGLE_CLASS_NAME, getHitElementByPoint, WritableClipboardOperationType, WritableClipboardType, addOrCreateClipboardContext, setAngleForG, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER, isMainPointer, throttleRAF, getAngleBetweenPoints, normalizeAngle, degreesToRadians, rotateElements, MERGING, ROTATE_HANDLE_CLASS_NAME, isSelectedElement, isDragging } from '@plait/core';
 import { DEFAULT_FILL, Alignment, WithTextPluginKey, TextManage, getMemorizedLatest, memorizeLatest, getPointOnPolyline, buildText, Generator, getStrokeLineDash, StrokeStyle, getCrossingPointsBetweenPointAndSegment, isPointOnSegment, getFirstTextEditor, sortElementsByArea, isFilled, getTextEditorsByElement, removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, getExtendPoint, getUnitVectorByPointAndPoint, getPointByVectorComponent, RESIZE_HANDLE_DIAMETER, measureElement, DEFAULT_FONT_FAMILY, getFirstTextManage, ActiveGenerator, isSourceAndTargetIntersect, getPoints, DEFAULT_ROUTE_MARGIN, normalizeShapePoints, resetPointsAfterResize, getDirectionByVector, getRectangleResizeHandleRefs, getRotatedResizeCursorClassByAngle, ROTATE_HANDLE_DISTANCE_TO_ELEMENT, ROTATE_HANDLE_SIZE, isCornerHandle, getIndexByResizeHandle, withResize, drawHandle, getSymmetricHandleIndex, getResizeHandlePointByIndex, getDirectionFactorByDirectionComponent, buildClipboardData as buildClipboardData$1, insertClipboardData as insertClipboardData$1, getDirectionByPointOfRectangle, getDirectionFactor, rotateVector, getOppositeDirection, rotateVectorAnti90, getSourceAndTargetOuterRectangle, getNextPoint, PRIMARY_COLOR, CommonElementFlavour, hasResizeHandle, drawPrimaryHandle, drawFillPrimaryHandle, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, getElementsText, acceptImageTypes, getElementOfFocusedImage, buildImage, isResizingByCondition, getRatioByPoint, getTextManages, ImageGenerator, ResizeHandle, addRotating, removeRotating, drawRotateHandle } from '@plait/common';
 import { pointsOnBezierCurves } from 'points-on-curve';
 import { TEXT_DEFAULT_HEIGHT, DEFAULT_FONT_SIZE, AlignEditor } from '@plait/text-plugins';
@@ -1069,7 +1069,7 @@ function generateCloudPath(rectangle) {
     const xRadius = divisionWidth / 8.5;
     const yRadius = divisionHeight / 20;
     const startPoint = [rectangle.x + divisionWidth, rectangle.y + divisionHeight];
-    const arcs = [
+    const arcCommands = [
         {
             rx: xRadius,
             ry: yRadius * 1.2,
@@ -1143,15 +1143,15 @@ function generateCloudPath(rectangle) {
             endY: rectangle.y + divisionHeight
         }
     ];
-    return { startPoint, arcs };
+    return { startPoint, arcCommands };
 }
 const CloudEngine = {
     draw(board, rectangle, options) {
         const rs = PlaitBoard.getRoughSVG(board);
-        const { startPoint, arcs } = generateCloudPath(rectangle);
+        const { startPoint, arcCommands } = generateCloudPath(rectangle);
         const pathData = `M ${startPoint[0]} ${startPoint[1]} ` +
-            arcs
-                .map((arc) => `A ${arc.rx} ${arc.ry} ${arc.xAxisRotation} ${arc.largeArcFlag} ${arc.sweepFlag} ${arc.endX} ${arc.endY}`)
+            arcCommands
+                .map((command) => `A ${command.rx} ${command.ry} ${command.xAxisRotation} ${command.largeArcFlag} ${command.sweepFlag} ${command.endX} ${command.endY}`)
                 .join('\n') +
             ' Z';
         const svgElement = rs.path(pathData, { ...options, fillStyle: 'solid' });
@@ -1166,19 +1166,18 @@ const CloudEngine = {
         return RectangleClient.getCornerPoints(rectangle);
     },
     getNearestPoint(rectangle, point) {
-        const { startPoint, arcs } = generateCloudPath(rectangle);
+        const { startPoint, arcCommands } = generateCloudPath(rectangle);
         let minDistance = Infinity;
         let nearestPoint = point;
-        // 检查每个弧段
         let currentStart = startPoint;
-        for (const arc of arcs) {
-            const arcNearestPoint = getNearestPointBetweenPointAndArc(point, currentStart, arc);
+        for (const arcCommand of arcCommands) {
+            const arcNearestPoint = getNearestPointBetweenPointAndArc(point, currentStart, arcCommand);
             const distance = distanceBetweenPointAndPoint(point[0], point[1], arcNearestPoint[0], arcNearestPoint[1]);
             if (distance < minDistance) {
                 minDistance = distance;
                 nearestPoint = arcNearestPoint;
             }
-            currentStart = [arc.endX, arc.endY];
+            currentStart = [arcCommand.endX, arcCommand.endY];
         }
         return nearestPoint;
     },
@@ -1216,7 +1215,7 @@ const isHitArrowLineText = (board, element, point) => {
     return getHitArrowLineTextIndex(board, element, point) !== -1;
 };
 const isHitPolyLine = (pathPoints, point) => {
-    const distance = distanceBetweenPointAndSegments(pathPoints, point);
+    const distance = distanceBetweenPointAndSegments(point, pathPoints);
     return distance <= HIT_DISTANCE_BUFFER;
 };
 const isHitArrowLine = (board, element, point) => {
@@ -1349,13 +1348,13 @@ const isHitDrawElement = (board, element, point, isStrict = true) => {
     if (PlaitDrawElement.isGeometry(element) && rectangle) {
         if (debugGenerator$4.isDebug() && shapes.includes(element.shape)) {
             debugGenerator$4.clear();
-            const { startPoint, arcs } = generateCloudPath(rectangle);
-            const points = [startPoint, ...arcs.map((arc) => [arc.endX, arc.endY])];
+            const { startPoint, arcCommands } = generateCloudPath(rectangle);
+            const points = [startPoint, ...arcCommands.map((arc) => [arc.endX, arc.endY])];
             debugGenerator$4.drawCircles(board, points, 5, false);
             let minDistance = Infinity;
             let nearestPoint = point;
             let currentStart = startPoint;
-            for (const arc of arcs) {
+            for (const arc of arcCommands) {
                 const arcNearestPoint = getNearestPointBetweenPointAndArc(point, currentStart, arc);
                 const distance = distanceBetweenPointAndPoint(point[0], point[1], arcNearestPoint[0], arcNearestPoint[1]);
                 const { center } = getEllipseArcCenter(currentStart, arc);
@@ -5358,19 +5357,57 @@ const InternalStorageEngine = {
     }
 };
 
+function generateNoteCurlyLeftPath(rectangle) {
+    const curlyWidth = rectangle.width * 0.09;
+    const rightX = rectangle.x + rectangle.width;
+    const centerY = rectangle.y + rectangle.height / 2;
+    return {
+        startPoint: [rightX, rectangle.y],
+        upperCurve: {
+            controlPoint1: [rightX - curlyWidth, rectangle.y],
+            controlPoint2: [rightX, centerY],
+            endPoint: [rightX - curlyWidth, centerY]
+        },
+        lowerCurve: {
+            controlPoint1: [rightX, centerY],
+            controlPoint2: [rightX - curlyWidth, rectangle.y + rectangle.height],
+            endPoint: [rightX, rectangle.y + rectangle.height]
+        }
+    };
+}
 const NoteCurlyLeftEngine = {
     draw(board, rectangle, options) {
         const rs = PlaitBoard.getRoughSVG(board);
-        const shape = rs.path(`M${rectangle.x + rectangle.width} ${rectangle.y} 
-            C${rectangle.x + rectangle.width - rectangle.width * 0.09} ${rectangle.y}, 
-            ${rectangle.x + rectangle.width} ${rectangle.y + rectangle.height / 2}, 
-            ${rectangle.x + rectangle.width - rectangle.width * 0.09} ${rectangle.y + rectangle.height / 2}
-            C${rectangle.x + rectangle.width} ${rectangle.y + rectangle.height / 2}, 
-            ${rectangle.x + rectangle.width - rectangle.width * 0.09} ${rectangle.y + rectangle.height}, 
-            ${rectangle.x + rectangle.width} ${rectangle.y + rectangle.height}`, { ...options, fillStyle: 'solid', fill: 'transparent' });
+        const { startPoint, upperCurve, lowerCurve } = generateNoteCurlyLeftPath(rectangle);
+        const pathData = [
+            `M${startPoint[0]} ${startPoint[1]}`,
+            `C${upperCurve.controlPoint1[0]} ${upperCurve.controlPoint1[1]},
+            ${upperCurve.controlPoint2[0]} ${upperCurve.controlPoint2[1]},
+            ${upperCurve.endPoint[0]} ${upperCurve.endPoint[1]}`,
+            `C${lowerCurve.controlPoint1[0]} ${lowerCurve.controlPoint1[1]},
+            ${lowerCurve.controlPoint2[0]} ${lowerCurve.controlPoint2[1]},
+            ${lowerCurve.endPoint[0]} ${lowerCurve.endPoint[1]}`
+        ].join(' ');
+        const shape = rs.path(pathData, { ...options, fillStyle: 'solid', fill: 'transparent' });
         setStrokeLinecap(shape, 'round');
         return shape;
     },
+    getNearestPoint(rectangle, point) {
+        const { startPoint, upperCurve, lowerCurve } = generateNoteCurlyLeftPath(rectangle);
+        const upperBezierPoints = pointsOnBezierCurves([startPoint, upperCurve.controlPoint1, upperCurve.controlPoint2, upperCurve.endPoint], 0.001);
+        const lowerBezierPoints = pointsOnBezierCurves([upperCurve.endPoint, lowerCurve.controlPoint1, lowerCurve.controlPoint2, lowerCurve.endPoint], 0.001);
+        const allPoints = [...upperBezierPoints, ...lowerBezierPoints];
+        let minDistance = Infinity;
+        let nearestPoint = point;
+        for (const curvePoint of allPoints) {
+            const distance = distanceBetweenPointAndPoint(point[0], point[1], curvePoint[0], curvePoint[1]);
+            if (distance < minDistance) {
+                minDistance = distance;
+                nearestPoint = [...curvePoint];
+            }
+        }
+        return nearestPoint;
+    },
     isInsidePoint(rectangle, point) {
         const rangeRectangle = RectangleClient.getRectangleByPoints([point, point]);
         return RectangleClient.isHit(rectangle, rangeRectangle);
@@ -5378,9 +5415,6 @@ const NoteCurlyLeftEngine = {
     getCornerPoints(rectangle) {
         return RectangleClient.getCornerPoints(rectangle);
     },
-    getNearestPoint(rectangle, point) {
-        return getNearestPointBetweenPointAndSegments(point, RectangleEngine.getCornerPoints(rectangle));
-    },
     getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
         const corners = RectangleEngine.getCornerPoints(rectangle);
         const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
@@ -5403,16 +5437,37 @@ const NoteCurlyLeftEngine = {
     }
 };
 
+function generateNoteCurlyRightPath(rectangle) {
+    const curlyWidth = rectangle.width * 0.09;
+    const centerY = rectangle.y + rectangle.height / 2;
+    return {
+        startPoint: [rectangle.x, rectangle.y],
+        upperCurve: {
+            controlPoint1: [rectangle.x + curlyWidth, rectangle.y],
+            controlPoint2: [rectangle.x, centerY],
+            endPoint: [rectangle.x + curlyWidth, centerY]
+        },
+        lowerCurve: {
+            controlPoint1: [rectangle.x, centerY],
+            controlPoint2: [rectangle.x + curlyWidth, rectangle.y + rectangle.height],
+            endPoint: [rectangle.x, rectangle.y + rectangle.height]
+        }
+    };
+}
 const NoteCurlyRightEngine = {
     draw(board, rectangle, options) {
         const rs = PlaitBoard.getRoughSVG(board);
-        const shape = rs.path(`M${rectangle.x} ${rectangle.y}
-            C${rectangle.x + rectangle.width * 0.09} ${rectangle.y},
-            ${rectangle.x} ${rectangle.y + rectangle.height / 2},
-            ${rectangle.x + rectangle.width * 0.09} ${rectangle.y + rectangle.height / 2}
-            C${rectangle.x} ${rectangle.y + rectangle.height / 2},
-            ${rectangle.x + rectangle.width * 0.09} ${rectangle.y + rectangle.height},
-            ${rectangle.x} ${rectangle.y + rectangle.height}`, { ...options, fillStyle: 'solid', fill: 'transparent' });
+        const { startPoint, upperCurve, lowerCurve } = generateNoteCurlyRightPath(rectangle);
+        const pathData = [
+            `M${startPoint[0]} ${startPoint[1]}`,
+            `C${upperCurve.controlPoint1[0]} ${upperCurve.controlPoint1[1]},
+            ${upperCurve.controlPoint2[0]} ${upperCurve.controlPoint2[1]},
+            ${upperCurve.endPoint[0]} ${upperCurve.endPoint[1]}`,
+            `C${lowerCurve.controlPoint1[0]} ${lowerCurve.controlPoint1[1]},
+            ${lowerCurve.controlPoint2[0]} ${lowerCurve.controlPoint2[1]},
+            ${lowerCurve.endPoint[0]} ${lowerCurve.endPoint[1]}`
+        ].join(' ');
+        const shape = rs.path(pathData, { ...options, fillStyle: 'solid', fill: 'transparent' });
         setStrokeLinecap(shape, 'round');
         return shape;
     },
@@ -5424,7 +5479,24 @@ const NoteCurlyRightEngine = {
         return RectangleClient.getCornerPoints(rectangle);
     },
     getNearestPoint(rectangle, point) {
-        return getNearestPointBetweenPointAndSegments(point, RectangleEngine.getCornerPoints(rectangle));
+        const { startPoint, upperCurve, lowerCurve } = generateNoteCurlyRightPath(rectangle);
+        // 生成上部贝塞尔曲线的点
+        const upperBezierPoints = pointsOnBezierCurves([startPoint, upperCurve.controlPoint1, upperCurve.controlPoint2, upperCurve.endPoint], 0.001);
+        // 生成下部贝塞尔曲线的点
+        const lowerBezierPoints = pointsOnBezierCurves([upperCurve.endPoint, lowerCurve.controlPoint1, lowerCurve.controlPoint2, lowerCurve.endPoint], 0.001);
+        // 合并所有点
+        const allPoints = [...upperBezierPoints, ...lowerBezierPoints];
+        // 找到最近的点
+        let minDistance = Infinity;
+        let nearestPoint = [...point];
+        for (const curvePoint of allPoints) {
+            const distance = distanceBetweenPointAndPoint(point[0], point[1], curvePoint[0], curvePoint[1]);
+            if (distance < minDistance) {
+                minDistance = distance;
+                nearestPoint = [...curvePoint];
+            }
+        }
+        return nearestPoint;
     },
     getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
         const corners = RectangleEngine.getCornerPoints(rectangle);
@@ -5656,24 +5728,71 @@ function getHorizontalTextRectangle(cell) {
     };
 }
 
+function generateActorPath(rectangle) {
+    const centerX = rectangle.x + rectangle.width / 2;
+    const headRadius = { width: rectangle.width / 3 / 2, height: rectangle.height / 4 / 2 };
+    const centerY = rectangle.y + rectangle.height / 4 / 2;
+    return {
+        headArcCommand: {
+            rx: headRadius.width,
+            ry: headRadius.height,
+            xAxisRotation: 0,
+            largeArcFlag: 0,
+            sweepFlag: 1,
+            endX: centerX,
+            endY: rectangle.y
+        },
+        bodyLine: [
+            [centerX, rectangle.y + rectangle.height / 4],
+            [centerX, rectangle.y + (rectangle.height / 4) * 3]
+        ],
+        armsLine: [
+            [rectangle.x, rectangle.y + rectangle.height / 2],
+            [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2]
+        ],
+        leftLegLine: [
+            [centerX, rectangle.y + (rectangle.height / 4) * 3],
+            [rectangle.x + rectangle.width / 12, rectangle.y + rectangle.height]
+        ],
+        rightLegLine: [
+            [centerX, rectangle.y + (rectangle.height / 4) * 3],
+            [rectangle.x + (rectangle.width / 12) * 11, rectangle.y + rectangle.height]
+        ]
+    };
+}
 const ActorEngine = {
     draw(board, rectangle, options) {
         const rs = PlaitBoard.getRoughSVG(board);
-        const shape = rs.path(`M${rectangle.x + rectangle.width / 2} ${rectangle.y + rectangle.height / 4}  
-            A${rectangle.width / 3 / 2} ${rectangle.height / 4 / 2}, 0, 0, 1, ${rectangle.x + rectangle.width / 2} ${rectangle.y} 
-            A${rectangle.width / 3 / 2} ${rectangle.height / 4 / 2}, 0, 0, 1, ${rectangle.x + rectangle.width / 2} ${rectangle.y +
-            rectangle.height / 4}
-            V${rectangle.y + (rectangle.height / 4) * 3}
-            M${rectangle.x + rectangle.width / 2} ${rectangle.y + rectangle.height / 2} H${rectangle.x}
-            M${rectangle.x + rectangle.width / 2} ${rectangle.y + rectangle.height / 2} H${rectangle.x + rectangle.width}
-            M${rectangle.x + rectangle.width / 2} ${rectangle.y + (rectangle.height / 4) * 3}
-            L${rectangle.x + rectangle.width / 12} ${rectangle.y + rectangle.height}
-            M${rectangle.x + rectangle.width / 2} ${rectangle.y + (rectangle.height / 4) * 3}
-            L${rectangle.x + (rectangle.width / 12) * 11} ${rectangle.y + rectangle.height}
-            `, { ...options, fillStyle: 'solid' });
+        const { headArcCommand, bodyLine, armsLine, leftLegLine, rightLegLine } = generateActorPath(rectangle);
+        const pathData = [
+            // 头部（从中间开始画）
+            `M${bodyLine[0][0]} ${bodyLine[0][1]}`,
+            `A${headArcCommand.rx} ${headArcCommand.ry} ${headArcCommand.xAxisRotation} ${headArcCommand.largeArcFlag} ${headArcCommand.sweepFlag} ${headArcCommand.endX} ${headArcCommand.endY}`,
+            `A${headArcCommand.rx} ${headArcCommand.ry} ${headArcCommand.xAxisRotation} ${headArcCommand.largeArcFlag} ${headArcCommand.sweepFlag} ${bodyLine[0][0]} ${bodyLine[0][1]}`,
+            // 身体
+            `V${bodyLine[1][1]}`,
+            // 手臂
+            `M${armsLine[0][0]} ${armsLine[0][1]} H${armsLine[1][0]}`,
+            // 腿
+            `M${leftLegLine[0][0]} ${leftLegLine[0][1]} L${leftLegLine[1][0]} ${leftLegLine[1][1]}`,
+            `M${rightLegLine[0][0]} ${rightLegLine[0][1]} L${rightLegLine[1][0]} ${rightLegLine[1][1]}`
+        ].join(' ');
+        const shape = rs.path(pathData, { ...options, fillStyle: 'solid' });
         setStrokeLinecap(shape, 'round');
         return shape;
     },
+    getNearestPoint(rectangle, point) {
+        const { headArcCommand, bodyLine, armsLine, leftLegLine, rightLegLine } = generateActorPath(rectangle);
+        // 检查头部椭圆
+        const headCenter = [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 4 / 2];
+        const nearestPointForHead = getNearestPointBetweenPointAndEllipse(point, headCenter, headArcCommand.rx, headArcCommand.ry);
+        const distanceForHead = distanceBetweenPointAndPoint(...point, ...nearestPointForHead);
+        // 检查所有线段
+        const allSegments = [bodyLine, armsLine, leftLegLine, rightLegLine];
+        const nearestPointForLines = getNearestPointBetweenPointAndDiscreteSegments(point, allSegments);
+        const distanceForLines = distanceBetweenPointAndPoint(...point, ...nearestPointForLines);
+        return distanceForHead < distanceForLines ? nearestPointForHead : nearestPointForLines;
+    },
     isInsidePoint(rectangle, point) {
         const rangeRectangle = RectangleClient.getRectangleByPoints([point, point]);
         return RectangleClient.isHit(rectangle, rangeRectangle);
@@ -5681,35 +5800,6 @@ const ActorEngine = {
     getCornerPoints(rectangle) {
         return RectangleClient.getCornerPoints(rectangle);
     },
-    getNearestPoint(rectangle, point) {
-        let nearestPoint = getNearestPointBetweenPointAndSegments(point, RectangleEngine.getCornerPoints(rectangle));
-        if (nearestPoint[1] >= rectangle.y && nearestPoint[1] <= rectangle.y + rectangle.height / 4) {
-            const centerPoint = [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 4 / 2];
-            nearestPoint = getNearestPointBetweenPointAndEllipse(point, centerPoint, rectangle.width / 3 / 2, rectangle.height / 4 / 2);
-            return nearestPoint;
-        }
-        if (nearestPoint[1] >= rectangle.y + rectangle.height / 4 && nearestPoint[1] < rectangle.y + (rectangle.height / 4) * 3) {
-            if (nearestPoint[1] === rectangle.x + rectangle.width / 2) {
-                nearestPoint = getNearestPointBetweenPointAndSegments(point, [
-                    [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 4],
-                    [rectangle.x + rectangle.width / 2, rectangle.y + (rectangle.height / 4) * 3]
-                ]);
-            }
-            else {
-                nearestPoint = getNearestPointBetweenPointAndSegments(point, [
-                    [rectangle.x, rectangle.y + rectangle.height / 2],
-                    [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2]
-                ]);
-            }
-            return nearestPoint;
-        }
-        nearestPoint = getNearestPointBetweenPointAndSegments(point, [
-            [rectangle.x + rectangle.width / 12, rectangle.y + rectangle.height],
-            [rectangle.x + rectangle.width / 2, rectangle.y + (rectangle.height / 4) * 3],
-            [rectangle.x + (rectangle.width / 12) * 11, rectangle.y + rectangle.height]
-        ]);
-        return nearestPoint;
-    },
     getConnectorPoints(rectangle) {
         return RectangleClient.getEdgeCenterPoints(rectangle);
     },
@@ -5794,18 +5884,41 @@ const ContainerEngine = {
     }
 };
 
+function generatePackagePath(rectangle) {
+    const headerHeight = 25;
+    const topWidth = rectangle.width * 0.7;
+    const cornerX = rectangle.x + rectangle.width * 0.8;
+    return {
+        headerHeight,
+        points: {
+            leftTop: [rectangle.x, rectangle.y + headerHeight],
+            topStart: [rectangle.x, rectangle.y],
+            topEnd: [rectangle.x + topWidth, rectangle.y],
+            cornerPoint: [cornerX, rectangle.y + headerHeight],
+            rightTop: [rectangle.x + rectangle.width, rectangle.y + headerHeight],
+            rightBottom: [rectangle.x + rectangle.width, rectangle.y + rectangle.height],
+            leftBottom: [rectangle.x, rectangle.y + rectangle.height],
+            leftMiddle: [rectangle.x, rectangle.y + headerHeight],
+            middlePoint: [cornerX, rectangle.y + headerHeight]
+        }
+    };
+}
 const PackageEngine = {
     draw(board, rectangle, options) {
         const rs = PlaitBoard.getRoughSVG(board);
-        const shape = rs.path(`M${rectangle.x} ${rectangle.y + 25} 
-            V${rectangle.y}
-            H${rectangle.x + rectangle.width * 0.7} 
-            L${rectangle.x + rectangle.width * 0.8} ${rectangle.y + 25} 
-            H${rectangle.x + rectangle.width} 
-            V${rectangle.y + rectangle.height}
-            H${rectangle.x}
-            V${rectangle.y + 25}
-            H${rectangle.x + rectangle.width * 0.8}`, { ...options, fillStyle: 'solid' });
+        const { points } = generatePackagePath(rectangle);
+        const pathData = [
+            `M${points.leftTop[0]} ${points.leftTop[1]}`,
+            `V${points.topStart[1]}`,
+            `H${points.topEnd[0]}`,
+            `L${points.cornerPoint[0]} ${points.cornerPoint[1]}`,
+            `H${points.rightTop[0]}`,
+            `V${points.rightBottom[1]}`,
+            `H${points.leftBottom[0]}`,
+            `V${points.leftMiddle[1]}`,
+            `H${points.middlePoint[0]}`
+        ].join(' ');
+        const shape = rs.path(pathData, { ...options, fillStyle: 'solid' });
         setStrokeLinecap(shape, 'round');
         return shape;
     },
@@ -5817,15 +5930,23 @@ const PackageEngine = {
         return RectangleClient.getCornerPoints(rectangle);
     },
     getNearestPoint(rectangle, point) {
-        let nearestPoint = getNearestPointBetweenPointAndSegments(point, RectangleEngine.getCornerPoints(rectangle));
-        if (nearestPoint[0] > rectangle.x + rectangle.width * 0.7 && nearestPoint[1] <= rectangle.y + 25) {
-            nearestPoint = getNearestPointBetweenPointAndSegments(point, [
-                [rectangle.x + rectangle.width * 0.7, rectangle.y],
-                [rectangle.x + rectangle.width * 0.8, rectangle.y + 25],
-                [rectangle.x + rectangle.width, rectangle.y + 25]
-            ], false);
-        }
-        return nearestPoint;
+        const { points } = generatePackagePath(rectangle);
+        const segments = [
+            // 左边竖线
+            [points.topStart, points.leftTop],
+            [points.leftTop, points.leftBottom],
+            // 底边
+            [points.leftBottom, points.rightBottom],
+            // 右边竖线
+            [points.rightBottom, points.rightTop],
+            // 顶部折线
+            [points.topStart, points.topEnd],
+            [points.topEnd, points.cornerPoint],
+            [points.cornerPoint, points.rightTop],
+            // 中间横线
+            [points.leftMiddle, points.middlePoint]
+        ];
+        return getNearestPointBetweenPointAndDiscreteSegments(point, segments);
     },
     getConnectorPoints(rectangle) {
         return RectangleClient.getEdgeCenterPoints(rectangle);
@@ -5923,12 +6044,23 @@ const CombinedFragmentEngine = {
     }
 };
 
+function getDeletionLines(rectangle) {
+    return [
+        [
+            [rectangle.x, rectangle.y],
+            [rectangle.x + rectangle.width, rectangle.y + rectangle.height]
+        ],
+        [
+            [rectangle.x + rectangle.width, rectangle.y],
+            [rectangle.x, rectangle.y + rectangle.height]
+        ]
+    ];
+}
 const DeletionEngine = {
     draw(board, rectangle, options) {
         const rs = PlaitBoard.getRoughSVG(board);
-        const shape = rs.path(`M${rectangle.x} ${rectangle.y} L${rectangle.x + rectangle.width} ${rectangle.y + rectangle.height} 
-            M${rectangle.x + rectangle.width} ${rectangle.y} L${rectangle.x} ${rectangle.y + rectangle.height} 
-            `, { ...options, fillStyle: 'solid', strokeWidth: 4 });
+        const lines = getDeletionLines(rectangle);
+        const shape = rs.path(lines.map(([from, to]) => `M${from[0]} ${from[1]} L${to[0]} ${to[1]}`).join(' '), { ...options, fillStyle: 'solid', strokeWidth: 4 });
         setStrokeLinecap(shape, 'round');
         return shape;
     },
@@ -5940,7 +6072,18 @@ const DeletionEngine = {
         return RectangleClient.getCornerPoints(rectangle);
     },
     getNearestPoint(rectangle, point) {
-        return getNearestPointBetweenPointAndSegments(point, RectangleEngine.getCornerPoints(rectangle));
+        const lines = getDeletionLines(rectangle);
+        let minDistance = Infinity;
+        let nearestPoint = point;
+        lines.forEach(line => {
+            const currentPoint = getNearestPointBetweenPointAndSegment(point, line);
+            const distance = distanceBetweenPointAndPoint(point[0], point[1], currentPoint[0], currentPoint[1]);
+            if (distance < minDistance) {
+                minDistance = distance;
+                nearestPoint = currentPoint;
+            }
+        });
+        return nearestPoint;
     },
     getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
         const corners = RectangleEngine.getCornerPoints(rectangle);
@@ -6048,24 +6191,60 @@ const NoteEngine = {
     }
 };
 
+function generateAssemblyPath(rectangle) {
+    const centerY = rectangle.y + rectangle.height / 2;
+    const firstLineEndX = rectangle.x + rectangle.width * 0.3;
+    const circleWidth = rectangle.width * 0.13;
+    const circleHeight = rectangle.height * 0.285;
+    const verticalX = firstLineEndX + circleWidth;
+    const verticalRadius = rectangle.width * 0.233;
+    return {
+        startPoint: [rectangle.x, centerY],
+        line1: [
+            [rectangle.x, centerY],
+            [firstLineEndX, centerY]
+        ],
+        circleArcCommand: {
+            rx: circleWidth,
+            ry: circleHeight,
+            xAxisRotation: 0,
+            largeArcFlag: 1,
+            sweepFlag: 1,
+            endX: firstLineEndX,
+            endY: centerY
+        },
+        verticalArcCommand: {
+            rx: verticalRadius,
+            ry: rectangle.height / 2,
+            xAxisRotation: 0,
+            largeArcFlag: 0,
+            sweepFlag: 1,
+            endX: verticalX,
+            endY: rectangle.y + rectangle.height
+        },
+        line2: [
+            [verticalX + verticalRadius, centerY],
+            [rectangle.x + rectangle.width, centerY]
+        ]
+    };
+}
 const AssemblyEngine = {
     draw(board, rectangle, options) {
         const rs = PlaitBoard.getRoughSVG(board);
-        const shape = rs.path(`
-        M${rectangle.x} ${rectangle.y + rectangle.height / 2} 
-        H${rectangle.x + rectangle.width * 0.3}
-        A${rectangle.width * 0.13} ${rectangle.height * 0.285}, 0, 1, 1 ${rectangle.x +
-            rectangle.width * 0.3 +
-            rectangle.width * 0.26} ${rectangle.y + rectangle.height / 2}
-        A${rectangle.width * 0.13} ${rectangle.height * 0.285}, 0, 1, 1 ${rectangle.x + rectangle.width * 0.3} ${rectangle.y +
-            rectangle.height / 2}
-        M${rectangle.x + rectangle.width * 0.3 + rectangle.width * 0.13} ${rectangle.y}
-        A${rectangle.width * 0.233} ${rectangle.height / 2}, 0, 0, 1 ${rectangle.x +
-            rectangle.width * 0.3 +
-            rectangle.width * 0.13} ${rectangle.y + rectangle.height}
-        M${rectangle.x + rectangle.width * 0.3 + rectangle.width * 0.13 + rectangle.width * 0.233} ${rectangle.y +
-            rectangle.height / 2} H${rectangle.x + rectangle.width}
-        `, {
+        const { startPoint, line1, circleArcCommand, verticalArcCommand, line2 } = generateAssemblyPath(rectangle);
+        const pathData = [
+            `M${startPoint[0]} ${startPoint[1]}`,
+            `H${line1[1][0]}`,
+            // 画完整的圆形：先画一个半圆，再画另一个半圆
+            `A${circleArcCommand.rx} ${circleArcCommand.ry} ${circleArcCommand.xAxisRotation} ${circleArcCommand.largeArcFlag} ${circleArcCommand.sweepFlag} ${line1[1][0] + circleArcCommand.rx * 2} ${circleArcCommand.endY}`,
+            `A${circleArcCommand.rx} ${circleArcCommand.ry} ${circleArcCommand.xAxisRotation} ${circleArcCommand.largeArcFlag} ${circleArcCommand.sweepFlag} ${circleArcCommand.endX} ${circleArcCommand.endY}`,
+            // 垂直椭圆
+            `M${verticalArcCommand.endX} ${rectangle.y}`,
+            `A${verticalArcCommand.rx} ${verticalArcCommand.ry} ${verticalArcCommand.xAxisRotation} ${verticalArcCommand.largeArcFlag} ${verticalArcCommand.sweepFlag} ${verticalArcCommand.endX} ${verticalArcCommand.endY}`,
+            // 最后一条线
+            `M${line2[0][0]} ${line2[0][1]} H${line2[1][0]}`
+        ].join(' ');
+        const shape = rs.path(pathData, {
             ...options,
             fillStyle: 'solid'
         });
@@ -6083,11 +6262,25 @@ const AssemblyEngine = {
         return RectangleClient.getEdgeCenterPoints(rectangle);
     },
     getNearestPoint(rectangle, point) {
-        const nearestPoint = getNearestPointBetweenPointAndSegments(point, RectangleEngine.getCornerPoints(rectangle));
-        if (nearestPoint[0] === rectangle.x + rectangle.width / 2) {
-            return getNearestPointBetweenPointAndEllipse(point, [rectangle.x + rectangle.width * 0.43, rectangle.y + rectangle.height / 2], rectangle.width * 0.223, rectangle.height / 2);
-        }
-        return nearestPoint;
+        const { line1, line2, circleArcCommand, verticalArcCommand } = generateAssemblyPath(rectangle);
+        // 检查直线段
+        const nearestPointForLines = getNearestPointBetweenPointAndSegments(point, [...line1, ...line2]);
+        const distanceForLines = distanceBetweenPointAndPoint(...point, ...nearestPointForLines);
+        // 检查中间圆形
+        const circleCenter = [line1[1][0] + circleArcCommand.rx, line1[1][1]];
+        const nearestPointForCircle = getNearestPointBetweenPointAndEllipse(point, circleCenter, circleArcCommand.rx, circleArcCommand.ry);
+        const distanceForCircle = distanceBetweenPointAndPoint(...point, ...nearestPointForCircle);
+        // 检查垂直椭圆（使用 getNearestPointBetweenPointAndArc 处理半圆弧）
+        const arcStartPoint = [verticalArcCommand.endX, rectangle.y];
+        const nearestPointForEllipse = getNearestPointBetweenPointAndArc(point, arcStartPoint, verticalArcCommand);
+        const distanceForEllipse = distanceBetweenPointAndPoint(...point, ...nearestPointForEllipse);
+        // 返回最近的点
+        const minDistance = Math.min(distanceForLines, distanceForCircle, distanceForEllipse);
+        if (minDistance === distanceForLines)
+            return nearestPointForLines;
+        if (minDistance === distanceForCircle)
+            return nearestPointForCircle;
+        return nearestPointForEllipse;
     },
     getTangentVectorByConnectionPoint(rectangle, pointOfRectangle) {
         const connectionPoint = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
@@ -6101,13 +6294,38 @@ const AssemblyEngine = {
     }
 };
 
+function generateRequiredInterfacePath(rectangle) {
+    const arcWidth = rectangle.width * 0.39;
+    const arcHeight = rectangle.height / 2;
+    return {
+        startPoint: [rectangle.x, rectangle.y],
+        leftArcCommand: {
+            rx: arcWidth,
+            ry: arcHeight,
+            xAxisRotation: 0,
+            largeArcFlag: 0,
+            sweepFlag: 1,
+            endX: rectangle.x,
+            endY: rectangle.y + rectangle.height
+        },
+        line: {
+            startX: rectangle.x + rectangle.width * 0.41,
+            startY: rectangle.y + rectangle.height / 2,
+            endX: rectangle.x + rectangle.width,
+            endY: rectangle.y + rectangle.height / 2
+        }
+    };
+}
 const RequiredInterfaceEngine = {
     draw(board, rectangle, options) {
         const rs = PlaitBoard.getRoughSVG(board);
-        const shape = rs.path(`M${rectangle.x} ${rectangle.y} 
-        A${rectangle.width * 0.39} ${rectangle.height / 2}, 0, 0, 1 ${rectangle.x} ${rectangle.y + rectangle.height}
-        M${rectangle.x + rectangle.width * 0.41} ${rectangle.y + rectangle.height / 2} H${rectangle.x + rectangle.width}
-        `, {
+        const { startPoint, leftArcCommand, line } = generateRequiredInterfacePath(rectangle);
+        const pathData = [
+            `M${startPoint[0]} ${startPoint[1]}`,
+            `A${leftArcCommand.rx} ${leftArcCommand.ry} ${leftArcCommand.xAxisRotation} ${leftArcCommand.largeArcFlag} ${leftArcCommand.sweepFlag} ${leftArcCommand.endX} ${leftArcCommand.endY}`,
+            `M${line.startX} ${line.startY} H${line.endX}`
+        ].join(' ');
+        const shape = rs.path(pathData, {
             ...options,
             fillStyle: 'solid',
             fill: 'transparent'
@@ -6123,7 +6341,26 @@ const RequiredInterfaceEngine = {
         return RectangleClient.getCornerPoints(rectangle);
     },
     getNearestPoint(rectangle, point) {
-        return getNearestPointBetweenPointAndSegments(point, RectangleEngine.getCornerPoints(rectangle));
+        const { startPoint, leftArcCommand, line } = generateRequiredInterfacePath(rectangle);
+        let minDistance = Infinity;
+        let nearestPoint = point;
+        // 检查圆弧段
+        const arcNearestPoint = getNearestPointBetweenPointAndArc(point, startPoint, leftArcCommand);
+        const arcDistance = distanceBetweenPointAndPoint(point[0], point[1], arcNearestPoint[0], arcNearestPoint[1]);
+        if (arcDistance < minDistance) {
+            minDistance = arcDistance;
+            nearestPoint = arcNearestPoint;
+        }
+        // 检查直线段
+        const lineStart = [line.startX, line.startY];
+        const lineEnd = [line.endX, line.endY];
+        const lineNearestPoint = getNearestPointBetweenPointAndSegment(point, [lineStart, lineEnd]);
+        const lineDistance = distanceBetweenPointAndPoint(point[0], point[1], lineNearestPoint[0], lineNearestPoint[1]);
+        if (lineDistance < minDistance) {
+            minDistance = lineDistance;
+            nearestPoint = lineNearestPoint;
+        }
+        return nearestPoint;
     },
     getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
         const corners = RectangleEngine.getCornerPoints(rectangle);
@@ -6136,25 +6373,52 @@ const RequiredInterfaceEngine = {
 };
 
 const percentage = 0.54;
-const getStartPoint = (rectangle) => {
-    return [rectangle.x, rectangle.y + rectangle.height / 2];
-};
-const getEndPoint = (rectangle) => {
-    return [rectangle.x + rectangle.width * percentage, rectangle.y + rectangle.height / 2];
-};
-const arcPercentage = percentage + (1 - percentage) / 2;
-const getArcCenter = (rectangle) => {
-    return [rectangle.x + arcPercentage * rectangle.width, rectangle.y + rectangle.height / 2];
-};
+function generateProvidedInterfacePath(rectangle) {
+    const centerY = rectangle.y + rectangle.height / 2;
+    const rx = (rectangle.width * (1 - percentage)) / 2;
+    const ry = rectangle.height / 2;
+    const startPoint = [rectangle.x, centerY];
+    const lineEndX = rectangle.x + rectangle.width * percentage;
+    return {
+        startPoint,
+        line: {
+            startX: startPoint[0],
+            startY: centerY,
+            endX: lineEndX,
+            endY: centerY
+        },
+        arcCommands: [
+            {
+                rx,
+                ry,
+                xAxisRotation: 0,
+                largeArcFlag: 1,
+                sweepFlag: 1,
+                endX: rectangle.x + rectangle.width,
+                endY: centerY
+            },
+            {
+                rx,
+                ry,
+                xAxisRotation: 0,
+                largeArcFlag: 1,
+                sweepFlag: 1,
+                endX: lineEndX,
+                endY: centerY
+            }
+        ]
+    };
+}
 const ProvidedInterfaceEngine = {
     draw(board, rectangle, options) {
         const rs = PlaitBoard.getRoughSVG(board);
-        const startPoint = getStartPoint(rectangle);
-        const endPoint = getEndPoint(rectangle);
-        const shape = rs.path(`M${startPoint[0]} ${startPoint[1]} 
-        H${endPoint[0]}
-        A${(rectangle.width * (1 - percentage)) / 2} ${rectangle.height / 2}, 0, 1, 1 ${rectangle.x + rectangle.width} ${rectangle.y + rectangle.height / 2}
-        A${(rectangle.width * (1 - percentage)) / 2} ${rectangle.height / 2}, 0, 1, 1 ${rectangle.x + rectangle.width * percentage} ${rectangle.y + rectangle.height / 2}`, {
+        const { startPoint, line, arcCommands } = generateProvidedInterfacePath(rectangle);
+        const pathData = [
+            `M${startPoint[0]} ${startPoint[1]}`,
+            `H${line.endX}`,
+            ...arcCommands.map((command) => `A${command.rx} ${command.ry} ${command.xAxisRotation} ${command.largeArcFlag} ${command.sweepFlag} ${command.endX} ${command.endY}`)
+        ].join(' ');
+        const shape = rs.path(pathData, {
             ...options,
             fillStyle: 'solid'
         });
@@ -6172,17 +6436,17 @@ const ProvidedInterfaceEngine = {
         return RectangleClient.getEdgeCenterPoints(rectangle);
     },
     getNearestPoint(rectangle, point) {
-        const startPoint = getStartPoint(rectangle);
-        const endPoint = getEndPoint(rectangle);
-        const nearestPointForLine = getNearestPointBetweenPointAndSegments(point, [startPoint, endPoint]);
+        const { startPoint, line, arcCommands } = generateProvidedInterfacePath(rectangle);
+        // 检查直线段
+        const lineStart = [line.startX, line.startY];
+        const lineEnd = [line.endX, line.endY];
+        const nearestPointForLine = getNearestPointBetweenPointAndSegments(point, [lineStart, lineEnd]);
         const distanceForLine = distanceBetweenPointAndPoint(...point, ...nearestPointForLine);
-        const arcCenter = getArcCenter(rectangle);
-        const nearestPointForEllipse = getNearestPointBetweenPointAndEllipse(point, arcCenter, (rectangle.width * (1 - percentage)) / 2, rectangle.height / 2);
+        // 检查圆弧段
+        const arcCenter = [rectangle.x + (3 * rectangle.width) / 4, line.startY];
+        const nearestPointForEllipse = getNearestPointBetweenPointAndEllipse(point, arcCenter, arcCommands[0].rx, arcCommands[0].ry);
         const distanceForEllipse = distanceBetweenPointAndPoint(...point, ...nearestPointForEllipse);
-        if (distanceForLine < distanceForEllipse) {
-            return nearestPointForLine;
-        }
-        return nearestPointForEllipse;
+        return distanceForLine < distanceForEllipse ? nearestPointForLine : nearestPointForEllipse;
     },
     getTangentVectorByConnectionPoint(rectangle, pointOfRectangle) {
         const connectionPoint = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
@@ -6198,30 +6462,84 @@ const ProvidedInterfaceEngine = {
     }
 };
 
+function generateComponentPath(rectangle) {
+    const mainLineX = rectangle.x + 12;
+    const boxWidth = rectangle.width > 70 ? 24 : rectangle.width * 0.2;
+    const boxHeight = rectangle.height - 28 - rectangle.height * 0.35 > 1 ? 14 : rectangle.height * 0.175;
+    const topBoxY = rectangle.y + rectangle.height * 0.175;
+    const bottomBoxY = rectangle.y + rectangle.height - rectangle.height * 0.175 - boxHeight;
+    return {
+        boxSize: {
+            width: boxWidth,
+            height: boxHeight
+        },
+        points: {
+            mainStart: [mainLineX, rectangle.y],
+            topBoxStart: [mainLineX, topBoxY],
+            topBoxEnd: [mainLineX, topBoxY + boxHeight],
+            bottomBoxStart: [mainLineX, bottomBoxY],
+            bottomBoxEnd: [mainLineX, bottomBoxY + boxHeight],
+            mainEnd: [mainLineX, rectangle.y + rectangle.height],
+            rightTop: [rectangle.x + rectangle.width, rectangle.y],
+            rightBottom: [rectangle.x + rectangle.width, rectangle.y + rectangle.height]
+        }
+    };
+}
 const ComponentEngine = {
     draw(board, rectangle, options) {
         const rs = PlaitBoard.getRoughSVG(board);
-        const boxSize = {
-            with: rectangle.width > 70 ? 24 : rectangle.width * 0.2,
-            height: rectangle.height - 28 - rectangle.height * 0.35 > 1 ? 14 : rectangle.height * 0.175
-        };
-        const shape = rs.path(`M${rectangle.x + 12} ${rectangle.y} 
-            v${rectangle.height * 0.175} 
-            h${boxSize.with / 2} v${boxSize.height} h${-boxSize.with} v${-boxSize.height} h${boxSize.with / 2}
-
-            M${rectangle.x + 12} ${rectangle.y + rectangle.height * 0.175 + boxSize.height} 
-
-            v${rectangle.height - rectangle.height * 0.35 - boxSize.height * 2}
-            h${boxSize.with / 2} v${boxSize.height} h${-boxSize.with} v${-boxSize.height} h${boxSize.with / 2}
-            M${rectangle.x + 12} ${rectangle.y + rectangle.height - rectangle.height * 0.175} 
-            V${rectangle.y + rectangle.height}
-            H${rectangle.x + rectangle.width}
-            v${-rectangle.height}
-            h${-(rectangle.width - 12)}
-             `, { ...options, fillStyle: 'solid' });
+        const { boxSize, points } = generateComponentPath(rectangle);
+        const pathData = [
+            // 主矩形轮廓
+            `M${points.mainStart[0]} ${points.mainStart[1]}`,
+            `H${points.rightTop[0]}`,
+            `V${points.rightBottom[1]}`,
+            `H${points.mainEnd[0]}`,
+            // 上方小矩形
+            `M${points.topBoxStart[0]} ${points.topBoxStart[1]}`,
+            `h${boxSize.width / 2} v${boxSize.height} h${-boxSize.width} v${-boxSize.height} h${boxSize.width / 2}`,
+            // 下方小矩形
+            `M${points.bottomBoxStart[0]} ${points.bottomBoxStart[1]}`,
+            `h${boxSize.width / 2} v${boxSize.height} h${-boxSize.width} v${-boxSize.height} h${boxSize.width / 2}`,
+            // 连接线
+            `M${points.mainStart[0]} ${points.mainStart[1]}`,
+            `V${points.topBoxStart[1]}`,
+            `M${points.topBoxEnd[0]} ${points.topBoxEnd[1]}`,
+            `V${points.bottomBoxStart[1]}`,
+            `M${points.bottomBoxEnd[0]} ${points.bottomBoxEnd[1]}`,
+            `V${points.mainEnd[1]}`
+        ].join(' ');
+        const shape = rs.path(pathData, { ...options, fillStyle: 'solid' });
         setStrokeLinecap(shape, 'round');
         return shape;
     },
+    getNearestPoint(rectangle, point) {
+        const { boxSize, points } = generateComponentPath(rectangle);
+        const segments = [
+            // 主矩形轮廓
+            [points.mainStart, [points.rightTop[0], points.mainStart[1]]],
+            [[points.rightTop[0], points.mainStart[1]], points.rightBottom],
+            [points.rightBottom, [points.mainEnd[0], points.rightBottom[1]]],
+            [[points.mainEnd[0], points.rightBottom[1]], points.mainStart],
+            // 上方小矩形
+            [points.topBoxStart, [points.topBoxStart[0] + boxSize.width / 2, points.topBoxStart[1]]],
+            [[points.topBoxStart[0] + boxSize.width / 2, points.topBoxStart[1]], [points.topBoxStart[0] + boxSize.width / 2, points.topBoxEnd[1]]],
+            [[points.topBoxStart[0] + boxSize.width / 2, points.topBoxEnd[1]], [points.topBoxStart[0] - boxSize.width / 2, points.topBoxEnd[1]]],
+            [[points.topBoxStart[0] - boxSize.width / 2, points.topBoxEnd[1]], [points.topBoxStart[0] - boxSize.width / 2, points.topBoxStart[1]]],
+            [[points.topBoxStart[0] - boxSize.width / 2, points.topBoxStart[1]], points.topBoxStart],
+            // 下方小矩形
+            [points.bottomBoxStart, [points.bottomBoxStart[0] + boxSize.width / 2, points.bottomBoxStart[1]]],
+            [[points.bottomBoxStart[0] + boxSize.width / 2, points.bottomBoxStart[1]], [points.bottomBoxStart[0] + boxSize.width / 2, points.bottomBoxEnd[1]]],
+            [[points.bottomBoxStart[0] + boxSize.width / 2, points.bottomBoxEnd[1]], [points.bottomBoxStart[0] - boxSize.width / 2, points.bottomBoxEnd[1]]],
+            [[points.bottomBoxStart[0] - boxSize.width / 2, points.bottomBoxEnd[1]], [points.bottomBoxStart[0] - boxSize.width / 2, points.bottomBoxStart[1]]],
+            [[points.bottomBoxStart[0] - boxSize.width / 2, points.bottomBoxStart[1]], points.bottomBoxStart],
+            // 连接线
+            [points.mainStart, points.topBoxStart],
+            [points.topBoxEnd, points.bottomBoxStart],
+            [points.bottomBoxEnd, points.mainEnd]
+        ];
+        return getNearestPointBetweenPointAndDiscreteSegments(point, segments);
+    },
     isInsidePoint(rectangle, point) {
         const rangeRectangle = RectangleClient.getRectangleByPoints([point, point]);
         return RectangleClient.isHit(rectangle, rangeRectangle);
@@ -6229,26 +6547,18 @@ const ComponentEngine = {
     getCornerPoints(rectangle) {
         return RectangleClient.getCornerPoints(rectangle);
     },
-    getNearestPoint(rectangle, point) {
-        let nearestPoint = getNearestPointBetweenPointAndSegments(point, RectangleEngine.getCornerPoints(rectangle));
-        if (nearestPoint[1] === rectangle.y + rectangle.height / 2) {
-            nearestPoint = getNearestPointBetweenPointAndSegments(point, [
-                [rectangle.x + 12, rectangle.y + rectangle.height * 0.175 + 14],
-                [rectangle.x + 12, rectangle.y + rectangle.height - rectangle.height * 0.175 - 14]
-            ], false);
-        }
-        return nearestPoint;
-    },
     getTangentVectorByConnectionPoint(rectangle, pointOfRectangle) {
+        const { points } = generateComponentPath(rectangle);
         const connectionPoint = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
-        return getUnitVectorByPointAndPoint([rectangle.x + 12, rectangle.y + rectangle.height - rectangle.height * 0.175 - 14], connectionPoint);
+        return getUnitVectorByPointAndPoint(points.mainStart, connectionPoint);
     },
     getConnectorPoints(rectangle) {
+        const { points } = generateComponentPath(rectangle);
         return [
             [rectangle.x + rectangle.width / 2, rectangle.y],
             [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2],
             [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height],
-            [rectangle.x + 12, rectangle.y + rectangle.height / 2]
+            [points.mainStart[0], rectangle.y + rectangle.height / 2]
         ];
     },
     getTextRectangle(element) {
@@ -8082,7 +8392,7 @@ const withArrowLineTextMove = (board) => {
             if (element) {
                 const movingPoint = resizeState.endPoint;
                 const points = getArrowLinePoints(board, element);
-                const distance = distanceBetweenPointAndSegments(points, movingPoint);
+                const distance = distanceBetweenPointAndSegments(movingPoint, points);
                 if (distance <= movableBuffer) {
                     const point = getNearestPointBetweenPointAndSegments(movingPoint, points, false);
                     const position = getRatioByPoint(points, point);
@@ -8519,7 +8829,8 @@ const withTable = (board) => {
     tableBoard.isRectangleHit = (element, selection) => {
         if (PlaitDrawElement.isElementByTable(element)) {
             const rangeRectangle = RectangleClient.getRectangleByPoints([selection.anchor, selection.focus]);
-            return isLineHitRectangle(element.points, rangeRectangle);
+            const client = RectangleClient.getRectangleByPoints(element.points);
+            return isLineHitRectangle(RectangleClient.getCornerPoints(client), rangeRectangle);
         }
         return isRectangleHit(element, selection);
     };