@plait/draw 0.75.0-next.9 → 0.76.0

package/fesm2022/plait-draw.mjs

@@ -1,5 +1,5 @@
-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 { 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 { 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, toActiveRectangleFromViewBoxRectangle, 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, toActivePointFromViewBoxPoint, getHitElementByPoint, WritableClipboardOperationType, WritableClipboardType, addOrCreateClipboardContext, setAngleForG, CursorClass, toActivePoint, temporaryDisableSelection, toScreenPointFromActivePoint, 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, 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, createActiveGenerator, hasResizeHandle, ActiveGenerator, 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';
 import { Editor, Node } from 'slate';
@@ -1012,7 +1012,7 @@ const vectorLineCreating = (board, lineShape, points, movingPoint, lineShapeG) =
     const otherPoint = points[points.length - 1];
     temporaryLineElement.points[temporaryLineElement.points.length - 1] = alignPoints(otherPoint, movingPoint);
     lineGenerator.processDrawing(temporaryLineElement, lineShapeG);
-    PlaitBoard.getElementActiveHost(board).append(lineShapeG);
+    PlaitBoard.getElementTopHost(board).append(lineShapeG);
     return temporaryLineElement;
 };
 const drawVectorLine = (board, element) => {
@@ -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) => {
@@ -1345,17 +1344,17 @@ const debugGenerator$4 = createDebugGenerator(debugKey$4);
 const shapes = [BasicShapes.cloud];
 const isHitDrawElement = (board, element, point, isStrict = true) => {
     const rectangle = board.getRectangle(element);
-    point = rotateAntiPointsByElement(point, element) || point;
+    point = rotateAntiPointsByElement(board, point, element) || point;
     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);
@@ -1406,7 +1405,7 @@ const isInsideOfShape = (board, element, point, hitDistanceBuffer) => {
 };
 const isHitElementInside = (board, element, point) => {
     const rectangle = board.getRectangle(element);
-    point = rotateAntiPointsByElement(point, element) || point;
+    point = rotateAntiPointsByElement(board, point, element) || point;
     if (PlaitDrawElement.isGeometry(element) && !PlaitDrawElement.isGeometryByTable(element)) {
         const engine = getEngine(getElementShape(element));
         const isHitInside = engine.isInsidePoint(rectangle, point);
@@ -1474,12 +1473,12 @@ const isDrawElementIncludeText = (element) => {
         return editors.length > 0;
     }
     if (PlaitDrawElement.isElementByTable(element)) {
-        return element.cells.some(cell => isCellIncludeText(cell));
+        return element.cells.some((cell) => isCellIncludeText(cell));
     }
     return true;
 };
 const isDrawElementsIncludeText = (elements) => {
-    return elements.some(item => {
+    return elements.some((item) => {
         return isDrawElementIncludeText(item);
     });
 };
@@ -1512,7 +1511,7 @@ const getSnappingShape = (board, point) => {
     return null;
 };
 const getSnappingRef = (board, hitElement, point) => {
-    const rotatedPoint = rotateAntiPointsByElement(point, hitElement) || point;
+    const rotatedPoint = rotateAntiPointsByElement(board, point, hitElement) || point;
     const connectorPoint = getHitConnectorPoint(rotatedPoint, hitElement);
     const edgePoint = getNearestPoint(hitElement, rotatedPoint);
     const isHitEdge = isHitEdgeOfShape(board, hitElement, rotatedPoint, LINE_SNAPPING_BUFFER);
@@ -1521,14 +1520,14 @@ const getSnappingRef = (board, hitElement, point) => {
 const getHitShape = (board, point, offset = LINE_HIT_GEOMETRY_BUFFER) => {
     let hitShape = null;
     traverseDrawShapes(board, (element) => {
-        if (hitShape === null && isInsideOfShape(board, element, rotateAntiPointsByElement(point, element) || point, offset * 2)) {
+        if (hitShape === null && isInsideOfShape(board, element, rotateAntiPointsByElement(board, point, element) || point, offset * 2)) {
             hitShape = element;
         }
     });
     return hitShape;
 };
 const traverseDrawShapes = (board, callback) => {
-    depthFirstRecursion(board, node => {
+    depthFirstRecursion(board, (node) => {
         if (!PlaitBoard.isBoard(node) && PlaitDrawElement.isShapeElement(node)) {
             callback(node);
         }
@@ -1562,7 +1561,7 @@ const drawBoundReaction = (board, element, roughOptions = { hasMask: true, hasCo
     }
     if (roughOptions.hasConnector) {
         const connectorPoints = getEngine(shape).getConnectorPoints(rectangle);
-        connectorPoints.forEach(point => {
+        connectorPoints.forEach((point) => {
             const circleG = drawCircle(PlaitBoard.getRoughSVG(board), point, 8, {
                 stroke: SELECTION_BORDER_COLOR,
                 strokeWidth: ACTIVE_STROKE_WIDTH,
@@ -1584,14 +1583,14 @@ const getTextKey = (element, text) => {
 };
 const getGeometryAlign = (board, element) => {
     if (isMultipleTextGeometry(element)) {
-        const drawShapeText = element.texts.find(item => item.id.includes(GeometryCommonTextKeys.content));
+        const drawShapeText = element.texts.find((item) => item.id.includes(GeometryCommonTextKeys.content));
         return drawShapeText?.text.align || Alignment.center;
     }
     if (isSingleTextGeometry(element)) {
         return element.text?.align || Alignment.center;
     }
     if (PlaitDrawElement.isElementByTable(element)) {
-        const firstTextCell = element.cells.find(item => item.text);
+        const firstTextCell = element.cells.find((item) => item.text);
         return firstTextCell?.text?.align || Alignment.center;
     }
     return Alignment.center;
@@ -2156,7 +2155,7 @@ const getHitConnectorPoint = (point, hitElement) => {
     const rectangle = RectangleClient.getRectangleByPoints(hitElement.points);
     const shape = getElementShape(hitElement);
     const connectorPoints = getEngine(shape).getConnectorPoints(rectangle);
-    return connectorPoints.find(connectorPoint => {
+    return connectorPoints.find((connectorPoint) => {
         return distanceBetweenPointAndPoint(...connectorPoint, ...point) <= LINE_SNAPPING_CONNECTOR_BUFFER;
     });
 };
@@ -2213,7 +2212,7 @@ const handleArrowLineCreating = (board, lineShape, sourcePoint, movingPoint, sou
     const otherPoint = linePoints[0];
     temporaryLineElement.points[1] = alignPoints(otherPoint, movingPoint);
     lineGenerator.processDrawing(temporaryLineElement, lineShapeG);
-    PlaitBoard.getElementActiveHost(board).append(lineShapeG);
+    PlaitBoard.getElementTopHost(board).append(lineShapeG);
     return temporaryLineElement;
 };
 function drawArrowLineMask(board, element, id) {
@@ -2450,11 +2449,12 @@ const createDefaultFlowchart = (point) => {
     ], { marker: ArrowLineMarkerType.none, connection: [0.5, 1], boundId: processElement2.id }, { marker: ArrowLineMarkerType.arrow, connection: [1, 0.5], boundId: endElement.id }, [], lineOptions);
     return [startElement, processElement1, decisionElement, processElement2, endElement, line1, line2, line3, line4, line5];
 };
-const getAutoCompletePoints = (element) => {
+const getAutoCompletePoints = (board, element, isToActive = false) => {
     const AutoCompleteMargin = (12 + RESIZE_HANDLE_DIAMETER / 2) * 2;
-    let rectangle = RectangleClient.getRectangleByPoints(element.points);
-    rectangle = RectangleClient.inflate(rectangle, AutoCompleteMargin);
-    return RectangleClient.getEdgeCenterPoints(rectangle);
+    const rectangle = RectangleClient.getRectangleByPoints(element.points);
+    const activeRectangle = toActiveRectangleFromViewBoxRectangle(board, rectangle);
+    const targetRectangle = isToActive ? activeRectangle : rectangle;
+    return RectangleClient.getEdgeCenterPoints(RectangleClient.inflate(targetRectangle, AutoCompleteMargin));
 };
 const getHitIndexOfAutoCompletePoint = (movingPoint, points) => {
     return points.findIndex((point) => {
@@ -2532,12 +2532,6 @@ const editText = (board, element, text) => {
         textManage.edit(() => { });
     }
 };
-const rerenderGeometryActive = (board, element) => {
-    const elementRef = PlaitElement.getElementRef(element);
-    const activeGenerator = elementRef.getGenerator(ActiveGenerator.key);
-    const selected = getSelectedElements(board).includes(element);
-    activeGenerator.processDrawing(element, PlaitBoard.getElementActiveHost(board), { selected });
-};
 const isGeometryIncludeText = (element) => {
     return isSingleTextGeometry(element) || isMultipleTextGeometry(element);
 };
@@ -3393,7 +3387,7 @@ function withDrawResize(board) {
             const resizeSnapRef = getSnapResizingRef(board, resizeRef.element, resizeSnapRefOptions);
             resizeActivePoints = resizeSnapRef.activePoints;
             snapG = resizeSnapRef.snapG;
-            PlaitBoard.getElementActiveHost(board).append(snapG);
+            PlaitBoard.getElementTopHost(board).append(snapG);
             if (bulkRotationRef) {
                 const boundingBoxCornerPoints = RectangleClient.getPoints(resizeRef.rectangle);
                 const resizedBoundingBoxCornerPoints = boundingBoxCornerPoints.map((p) => {
@@ -3492,23 +3486,25 @@ function withDrawResize(board) {
             const boundingRectangle = needCustomActiveRectangle
                 ? RectangleClient.getRectangleByPoints(resizeActivePoints)
                 : getRectangleByElements(board, elements, false);
-            let corners = RectangleClient.getCornerPoints(boundingRectangle);
+            const boundingActiveRectangle = toActiveRectangleFromViewBoxRectangle(board, boundingRectangle);
+            let corners = RectangleClient.getCornerPoints(boundingActiveRectangle);
             const angle = getSelectionAngle(elements);
             if (angle) {
-                const centerPoint = RectangleClient.getCenterPoint(boundingRectangle);
+                const centerPoint = RectangleClient.getCenterPoint(boundingActiveRectangle);
                 corners = rotatePoints(corners, centerPoint, angle);
             }
             corners.forEach((corner) => {
                 const g = drawHandle(board, corner);
                 handleG && handleG.append(g);
             });
-            PlaitBoard.getElementActiveHost(board).append(handleG);
+            PlaitBoard.getActiveHost(board).append(handleG);
         }
     };
     board.drawSelectionRectangle = () => {
         if (needCustomActiveRectangle) {
             const rectangle = RectangleClient.getRectangleByPoints(resizeActivePoints);
-            return drawRectangle(board, RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH), {
+            const activeRectangle = toActiveRectangleFromViewBoxRectangle(board, rectangle);
+            return drawRectangle(board, RectangleClient.inflate(activeRectangle, ACTIVE_STROKE_WIDTH), {
                 stroke: SELECTION_BORDER_COLOR,
                 strokeWidth: ACTIVE_STROKE_WIDTH
             });
@@ -5358,19 +5354,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 +5412,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 +5434,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 +5476,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 +5725,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 +5797,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 +5881,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 +5927,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 +6041,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 +6069,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 +6188,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 +6259,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 +6291,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 +6338,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 +6370,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 +6433,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 +6459,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 +6544,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) {
@@ -6784,7 +7091,7 @@ class GeometryShapeGenerator extends Generator {
 class ArrowLineAutoCompleteGenerator extends Generator {
     static { this.key = 'line-auto-complete-generator'; }
     constructor(board) {
-        super(board);
+        super(board, { active: true });
         this.board = board;
         this.hoverElement = null;
     }
@@ -6799,7 +7106,7 @@ class ArrowLineAutoCompleteGenerator extends Generator {
     }
     draw(element, data) {
         this.autoCompleteG = createG();
-        const middlePoints = getAutoCompletePoints(element);
+        const middlePoints = getAutoCompletePoints(this.board, element, true);
         middlePoints.forEach((point, index) => {
             const circle = drawCircle(PlaitBoard.getRoughSVG(this.board), point, LINE_AUTO_COMPLETE_DIAMETER, {
                 stroke: 'none',
@@ -6842,7 +7149,7 @@ class GeometryComponent extends CommonElementFlavour {
         super();
     }
     initializeGenerator() {
-        this.activeGenerator = new ActiveGenerator(this.board, {
+        this.activeGenerator = createActiveGenerator(this.board, {
             getStrokeWidth: () => {
                 const selectedElements = getSelectedElements(this.board);
                 if (selectedElements.length === 1 && !isSelectionMoving(this.board)) {
@@ -6875,15 +7182,23 @@ class GeometryComponent extends CommonElementFlavour {
         }
         this.getRef().addGenerator(ArrowLineAutoCompleteGenerator.key, this.lineAutoCompleteGenerator);
         this.getRef().addGenerator(ActiveGenerator.key, this.activeGenerator);
+        this.getRef().updateActiveSection = () => {
+            this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
+                selected: this.selected
+            });
+            this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
+                selected: this.selected
+            });
+        };
     }
     initialize() {
         super.initialize();
         this.initializeGenerator();
         this.shapeGenerator.processDrawing(this.element, this.getElementG());
-        this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+        this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
             selected: this.selected
         });
-        this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+        this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementTopHost(this.board), {
             selected: this.selected
         });
         this.textGenerator && this.textGenerator.draw(this.getElementG());
@@ -6891,8 +7206,8 @@ class GeometryComponent extends CommonElementFlavour {
     onContextChanged(value, previous) {
         if (value.element !== previous.element || value.hasThemeChanged) {
             this.shapeGenerator.processDrawing(this.element, this.getElementG());
-            this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
-            this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+            this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), { selected: this.selected });
+            this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
                 selected: this.selected
             });
             this.textGenerator && this.updateText(previous.element, value.element);
@@ -6900,9 +7215,11 @@ class GeometryComponent extends CommonElementFlavour {
         else {
             const hasSameSelected = value.selected === previous.selected;
             const hasSameHandleState = this.activeGenerator.options.hasResizeHandle() === this.activeGenerator.hasResizeHandle;
-            if (!hasSameSelected || !hasSameHandleState) {
-                this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
-                this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+            if (!hasSameSelected || !hasSameHandleState || value.selected) {
+                this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
+                    selected: this.selected
+                });
+                this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
                     selected: this.selected
                 });
             }
@@ -7011,8 +7328,9 @@ function getHitPointIndex(points, movingPoint) {
 }
 
 class LineActiveGenerator extends Generator {
-    constructor() {
-        super(...arguments);
+    constructor(board, options = { active: true }) {
+        super(board, options);
+        this.board = board;
         this.onlySelectedCurrentLine = false;
     }
     canDraw(element, data) {
@@ -7036,16 +7354,18 @@ class LineActiveGenerator extends Generator {
                 updatePoints = points.slice(0, 1).concat(points.slice(-1));
                 elbowNextRenderPoints = getNextRenderPoints(this.board, element, data.linePoints);
             }
-            updatePoints.forEach(point => {
+            const activePoints = updatePoints.map((point) => toActivePointFromViewBoxPoint(this.board, point));
+            activePoints.forEach((point) => {
                 const updateHandle = drawPrimaryHandle(this.board, point);
                 activeG.appendChild(updateHandle);
             });
             const middlePoints = getMiddlePoints(this.board, element);
+            const activeMiddlePoints = middlePoints.map((point) => toActivePointFromViewBoxPoint(this.board, point));
             if (!PlaitBoard.hasBeenTextEditing(this.board)) {
-                for (let i = 0; i < middlePoints.length; i++) {
-                    const point = middlePoints[i];
+                for (let i = 0; i < activeMiddlePoints.length; i++) {
+                    const point = activeMiddlePoints[i];
                     if (element.shape === ArrowLineShape.elbow && elbowNextRenderPoints.length) {
-                        const handleIndex = getHitPointIndex(middlePoints, point);
+                        const handleIndex = getHitPointIndex(activeMiddlePoints, point);
                         const isUpdateHandleIndex = isUpdatedHandleIndex(this.board, element, [...points], elbowNextRenderPoints, handleIndex);
                         if (isUpdateHandleIndex) {
                             const updateHandle = drawPrimaryHandle(this.board, point);
@@ -7059,8 +7379,9 @@ class LineActiveGenerator extends Generator {
             }
         }
         else {
-            const activeRectangle = this.board.getRectangle(element);
-            if (activeRectangle) {
+            const rectangle = this.board.getRectangle(element);
+            if (rectangle) {
+                const activeRectangle = toActiveRectangleFromViewBoxRectangle(this.board, rectangle);
                 let opacity = '0.5';
                 if (activeRectangle.height === 0 || activeRectangle.width === 0) {
                     opacity = '0.8';
@@ -7098,13 +7419,20 @@ class ArrowLineComponent extends CommonElementFlavour {
         this.initializeGenerator();
         this.shapeGenerator.processDrawing(this.element, this.getElementG());
         const linePoints = getArrowLinePoints(this.board, this.element);
-        this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+        this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
             selected: this.selected,
             linePoints
         });
         super.initialize();
         this.boundedElements = this.getBoundedElements();
         this.drawText();
+        this.getRef().updateActiveSection = () => {
+            const linePoints = getArrowLinePoints(this.board, this.element);
+            this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
+                selected: this.selected,
+                linePoints
+            });
+        };
         debugGenerator.isDebug() && debugGenerator.drawCircles(this.board, this.element.points.slice(1, -1), 4, true);
     }
     getBoundedElements() {
@@ -7130,7 +7458,7 @@ class ArrowLineComponent extends CommonElementFlavour {
         const linePoints = getArrowLinePoints(this.board, this.element);
         if (value.element !== previous.element || value.hasThemeChanged) {
             this.shapeGenerator.processDrawing(this.element, this.getElementG());
-            this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+            this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
                 selected: this.selected,
                 linePoints
             });
@@ -7139,8 +7467,8 @@ class ArrowLineComponent extends CommonElementFlavour {
         }
         else {
             const needUpdate = value.selected !== previous.selected || this.activeGenerator.needUpdate();
-            if (needUpdate) {
-                this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+            if (needUpdate || value.selected) {
+                this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
                     selected: this.selected,
                     linePoints
                 });
@@ -7148,7 +7476,7 @@ class ArrowLineComponent extends CommonElementFlavour {
         }
         if (isBoundedElementsChanged) {
             this.shapeGenerator.processDrawing(this.element, this.getElementG());
-            this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+            this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
                 selected: this.selected,
                 linePoints
             });
@@ -7220,7 +7548,7 @@ class ArrowLineComponent extends CommonElementFlavour {
     }
     updateTextRectangle() {
         const textManages = this.getRef().getTextManages();
-        textManages.forEach(manage => {
+        textManages.forEach((manage) => {
             manage.updateRectangle();
         });
     }
@@ -7238,12 +7566,19 @@ class VectorLineComponent extends CommonElementFlavour {
     initializeGenerator() {
         this.shapeGenerator = new VectorLineShapeGenerator(this.board);
         this.activeGenerator = new LineActiveGenerator(this.board);
+        this.getRef().updateActiveSection = () => {
+            const linePoints = getVectorLinePoints(this.board, this.element);
+            this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
+                selected: this.selected,
+                linePoints
+            });
+        };
     }
     initialize() {
         this.initializeGenerator();
         this.shapeGenerator.processDrawing(this.element, this.getElementG());
         const linePoints = getVectorLinePoints(this.board, this.element);
-        this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+        this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
             selected: this.selected,
             linePoints
         });
@@ -7253,15 +7588,15 @@ class VectorLineComponent extends CommonElementFlavour {
         const linePoints = getVectorLinePoints(this.board, this.element);
         if (value.element !== previous.element || value.hasThemeChanged) {
             this.shapeGenerator.processDrawing(this.element, this.getElementG());
-            this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+            this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
                 selected: this.selected,
                 linePoints
             });
         }
         else {
-            const needUpdate = value.selected !== previous.selected || this.activeGenerator.needUpdate();
+            const needUpdate = value.selected !== previous.selected || this.activeGenerator.needUpdate() || value.selected;
             if (needUpdate) {
-                this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+                this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
                     selected: this.selected,
                     linePoints
                 });
@@ -7397,7 +7732,7 @@ const withGeometryCreateByDrag = (board) => {
                 const points = getDefaultGeometryPoints(pointer, movingPoint);
                 temporaryElement = createDefaultGeometry(board, points, pointer);
                 geometryGenerator.processDrawing(temporaryElement, geometryShapeG);
-                PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
+                PlaitBoard.getElementTopHost(board).append(geometryShapeG);
             }
         }
         pointerMove(event);
@@ -7473,11 +7808,11 @@ const withGeometryCreateByDrawing = (board) => {
                 isCreate: true
             });
             snapG = resizeSnapRef.snapG;
-            PlaitBoard.getElementActiveHost(board).append(snapG);
+            PlaitBoard.getElementTopHost(board).append(snapG);
             points = normalizeShapePoints(resizeSnapRef.activePoints, isShift);
             temporaryElement = createDefaultGeometry(board, points, pointer);
             geometryGenerator.processDrawing(temporaryElement, geometryShapeG);
-            PlaitBoard.getElementActiveHost(board).append(geometryShapeG);
+            PlaitBoard.getElementTopHost(board).append(geometryShapeG);
         }
         pointerMove(event);
     };
@@ -7802,7 +8137,7 @@ const withArrowLineBoundReaction = (board) => {
         const linePointers = Object.keys(ArrowLineShape);
         const isLinePointer = PlaitBoard.isInPointer(board, linePointers);
         const movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-        const isLineResizing = isResizingByCondition(board, resizeRef => {
+        const isLineResizing = isResizingByCondition(board, (resizeRef) => {
             const { element, handle } = resizeRef;
             const isSourceOrTarget = handle === LineResizeHandle.target || handle === LineResizeHandle.source;
             return PlaitDrawElement.isArrowLine(element) && isSourceOrTarget;
@@ -7825,12 +8160,12 @@ const withArrowLineBoundReaction = (board) => {
                 if (hasValidAngle(hitElement)) {
                     setAngleForG(boundShapeG, RectangleClient.getCenterPointByPoints(hitElement.points), hitElement.angle);
                 }
-                PlaitBoard.getElementActiveHost(board).append(boundShapeG);
+                PlaitBoard.getElementTopHost(board).append(boundShapeG);
             }
         }
         pointerMove(event);
     };
-    board.pointerUp = event => {
+    board.pointerUp = (event) => {
         boundShapeG?.remove();
         boundShapeG = null;
         pointerUp(event);
@@ -7904,7 +8239,7 @@ class ImageComponent extends CommonElementFlavour {
                     height: element.points[1][1] - element.points[0][1]
                 };
             },
-            getImageItem: element => {
+            getImageItem: (element) => {
                 return {
                     url: element.url,
                     width: element.points[1][0] - element.points[0][0],
@@ -7914,12 +8249,18 @@ class ImageComponent extends CommonElementFlavour {
         });
         this.lineAutoCompleteGenerator = new ArrowLineAutoCompleteGenerator(this.board);
         this.getRef().addGenerator(ArrowLineAutoCompleteGenerator.key, this.lineAutoCompleteGenerator);
+        this.getRef().updateActiveSection = () => {
+            this.imageGenerator.setFocus(this.element, this.selected);
+            this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
+                selected: this.selected
+            });
+        };
     }
     initialize() {
         super.initialize();
         this.initializeGenerator();
         this.imageGenerator.processDrawing(this.element, this.getElementG());
-        this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+        this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
             selected: this.selected
         });
     }
@@ -7927,7 +8268,7 @@ class ImageComponent extends CommonElementFlavour {
         if (value.element !== previous.element) {
             this.imageGenerator.updateImage(this.getElementG(), previous.element, value.element);
             this.imageGenerator.setFocus(this.element, this.selected);
-            this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+            this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
                 selected: this.selected
             });
         }
@@ -7935,9 +8276,9 @@ class ImageComponent extends CommonElementFlavour {
             const hasSameSelected = value.selected === previous.selected;
             const hasSameHandleState = this.imageGenerator.activeGenerator &&
                 this.imageGenerator.activeGenerator.options.hasResizeHandle() === this.imageGenerator.activeGenerator.hasResizeHandle;
-            if (!hasSameSelected || !hasSameHandleState) {
+            if (!hasSameSelected || !hasSameHandleState || value.selected) {
                 this.imageGenerator.setFocus(this.element, this.selected);
-                this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+                this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
                     selected: this.selected
                 });
             }
@@ -7958,10 +8299,10 @@ const withArrowLineAutoCompleteReaction = (board) => {
         PlaitBoard.getBoardContainer(board).classList.remove(CursorClass.crosshair);
         const selectedElements = getSelectedDrawElements(board);
         const targetElement = selectedElements.length === 1 && selectedElements[0];
-        const movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
+        const activePoint = toActivePoint(board, event.x, event.y);
         if (!PlaitBoard.isReadonly(board) && !isSelectionMoving(board) && targetElement && PlaitDrawElement.isShapeElement(targetElement)) {
-            const points = getAutoCompletePoints(targetElement);
-            const hitIndex = getHitIndexOfAutoCompletePoint(rotateAntiPointsByElement(movingPoint, targetElement) || movingPoint, points);
+            const points = getAutoCompletePoints(board, targetElement, true);
+            const hitIndex = getHitIndexOfAutoCompletePoint(rotateAntiPointsByElement(board, activePoint, targetElement, true) || activePoint, points);
             const hitPoint = points[hitIndex];
             const ref = PlaitElement.getElementRef(targetElement);
             const lineAutoCompleteGenerator = ref.getGenerator(ArrowLineAutoCompleteGenerator.key);
@@ -7973,10 +8314,12 @@ const withArrowLineAutoCompleteReaction = (board) => {
                     fill: RgbaToHEX(PRIMARY_COLOR, LINE_AUTO_COMPLETE_HOVERED_OPACITY),
                     fillStyle: 'solid'
                 });
-                PlaitBoard.getElementActiveHost(board).append(reactionG);
+                PlaitBoard.getActiveHost(board).append(reactionG);
                 PlaitBoard.getBoardContainer(board).classList.add(CursorClass.crosshair);
                 if (hasValidAngle(targetElement)) {
-                    setAngleForG(reactionG, RectangleClient.getCenterPoint(board.getRectangle(targetElement)), targetElement.angle);
+                    const rectangle = board.getRectangle(targetElement);
+                    const activeRectangle = toActiveRectangleFromViewBoxRectangle(board, rectangle);
+                    setAngleForG(reactionG, RectangleClient.getCenterPoint(activeRectangle), targetElement.angle);
                 }
             }
         }
@@ -7995,14 +8338,15 @@ const withArrowLineAutoComplete = (board) => {
     board.pointerDown = (event) => {
         const selectedElements = getSelectedDrawElements(board);
         const targetElement = selectedElements.length === 1 && selectedElements[0];
-        const clickPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
+        const activePoint = toActivePoint(board, event.x, event.y);
         if (!PlaitBoard.isReadonly(board) && targetElement && PlaitDrawElement.isShapeElement(targetElement)) {
-            const points = getAutoCompletePoints(targetElement);
-            const index = getHitIndexOfAutoCompletePoint(rotateAntiPointsByElement(clickPoint, targetElement) || clickPoint, points);
+            const points = getAutoCompletePoints(board, targetElement, true);
+            const index = getHitIndexOfAutoCompletePoint(rotateAntiPointsByElement(board, activePoint, targetElement, true) || activePoint, points);
             const hitPoint = points[index];
             if (hitPoint) {
                 temporaryDisableSelection(board);
-                autoCompletePoint = hitPoint;
+                const screenPoint = toScreenPointFromActivePoint(board, hitPoint);
+                autoCompletePoint = toViewBoxPoint(board, toHostPoint(board, screenPoint[0], screenPoint[1]));
                 sourceElement = targetElement;
                 BoardTransforms.updatePointerType(board, ArrowLineShape.elbow);
             }
@@ -8014,7 +8358,7 @@ const withArrowLineAutoComplete = (board) => {
         lineShapeG = createG();
         let movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         if (autoCompletePoint && sourceElement) {
-            const distance = distanceBetweenPointAndPoint(...(rotateAntiPointsByElement(movingPoint, sourceElement) || movingPoint), ...autoCompletePoint);
+            const distance = distanceBetweenPointAndPoint(...(rotateAntiPointsByElement(board, movingPoint, sourceElement) || movingPoint), ...autoCompletePoint);
             if (distance > PRESS_AND_MOVE_BUFFER) {
                 const rectangle = RectangleClient.getRectangleByPoints(sourceElement.points);
                 const shape = getElementShape(sourceElement);
@@ -8032,7 +8376,7 @@ const withArrowLineAutoComplete = (board) => {
         }
         pointerMove(event);
     };
-    board.globalPointerUp = event => {
+    board.globalPointerUp = (event) => {
         if (temporaryElement) {
             Transforms.insertNode(board, temporaryElement, [board.children.length]);
             clearSelectedElement(board);
@@ -8082,7 +8426,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);
@@ -8108,7 +8452,7 @@ const withDrawRotate = (board) => {
     const canRotate = () => {
         const elements = getSelectedElements(board);
         return (elements.length > 0 &&
-            elements.every(el => (PlaitDrawElement.isDrawElement(el) && !PlaitDrawElement.isArrowLine(el)) ||
+            elements.every((el) => (PlaitDrawElement.isDrawElement(el) && !PlaitDrawElement.isArrowLine(el)) ||
                 PlaitDrawElement.isCustomGeometryElement(board, el)));
     };
     board.pointerDown = (event) => {
@@ -8116,16 +8460,17 @@ const withDrawRotate = (board) => {
             pointerDown(event);
             return;
         }
-        const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
+        const activePoint = toActivePoint(board, event.x, event.y);
         const elements = getSelectedElements(board);
-        const boundingRectangle = getRectangleByElements(board, elements, false);
-        const handleRectangle = getRotateHandleRectangle(boundingRectangle);
+        const rectangle = getRectangleByElements(board, elements, false);
+        const activeRectangle = toActiveRectangleFromViewBoxRectangle(board, rectangle);
+        const handleRectangle = getRotateHandleRectangle(activeRectangle);
         const angle = getSelectionAngle(elements);
-        const rotatedPoint = angle ? rotatePoints(point, RectangleClient.getCenterPoint(boundingRectangle), -angle) : point;
+        const rotatedPoint = angle ? rotatePoints(activePoint, RectangleClient.getCenterPoint(activeRectangle), -angle) : activePoint;
         if (handleRectangle && RectangleClient.isHit(RectangleClient.getRectangleByPoints([rotatedPoint, rotatedPoint]), handleRectangle)) {
             rotateRef = {
                 elements: [...elements],
-                startPoint: point
+                startPoint: activePoint
             };
         }
         pointerDown(event);
@@ -8135,9 +8480,10 @@ const withDrawRotate = (board) => {
             event.preventDefault();
             const isShift = !!event.shiftKey;
             addRotating(board, rotateRef);
-            const endPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-            const selectionRectangle = getRectangleByElements(board, rotateRef.elements, false);
-            const selectionCenterPoint = RectangleClient.getCenterPoint(selectionRectangle);
+            const endPoint = toActivePoint(board, event.x, event.y);
+            const rectangle = getRectangleByElements(board, rotateRef.elements, false);
+            const activeRectangle = toActiveRectangleFromViewBoxRectangle(board, rectangle);
+            const selectionCenterPoint = RectangleClient.getCenterPoint(activeRectangle);
             if (!getSelectionAngle(rotateRef.elements) && rotateRef.elements.length > 1) {
                 needCustomActiveRectangle = true;
             }
@@ -8189,32 +8535,35 @@ const withDrawRotate = (board) => {
         if (canRotate() && !isSelectionMoving(board)) {
             if (needCustomActiveRectangle && rotateRef) {
                 const boundingRectangle = getRectangleByElements(board, rotateRef.elements, false);
-                rotateHandleG = drawRotateHandle(board, boundingRectangle);
+                const boundingActiveRectangle = toActiveRectangleFromViewBoxRectangle(board, boundingRectangle);
+                rotateHandleG = drawRotateHandle(board, boundingActiveRectangle);
                 rotateHandleG.classList.add(ROTATE_HANDLE_CLASS_NAME);
                 if (rotateRef.angle) {
-                    setAngleForG(rotateHandleG, RectangleClient.getCenterPoint(boundingRectangle), rotateRef.angle);
+                    setAngleForG(rotateHandleG, RectangleClient.getCenterPoint(boundingActiveRectangle), rotateRef.angle);
                 }
             }
             else {
                 const elements = getSelectedElements(board);
                 const boundingRectangle = getRectangleByElements(board, elements, false);
-                rotateHandleG = drawRotateHandle(board, boundingRectangle);
+                const boundingActiveRectangle = toActiveRectangleFromViewBoxRectangle(board, boundingRectangle);
+                rotateHandleG = drawRotateHandle(board, boundingActiveRectangle);
                 rotateHandleG.classList.add(ROTATE_HANDLE_CLASS_NAME);
-                setAngleForG(rotateHandleG, RectangleClient.getCenterPoint(boundingRectangle), getSelectionAngle(elements));
+                setAngleForG(rotateHandleG, RectangleClient.getCenterPoint(boundingActiveRectangle), getSelectionAngle(elements));
             }
-            PlaitBoard.getElementActiveHost(board).append(rotateHandleG);
+            PlaitBoard.getActiveHost(board).append(rotateHandleG);
         }
     };
     board.drawSelectionRectangle = () => {
         if (needCustomActiveRectangle && rotateRef) {
             const rectangle = getRectangleByElements(board, rotateRef.elements, false);
-            const rectangleG = drawRectangle(board, RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH), {
+            const activeRectangle = toActiveRectangleFromViewBoxRectangle(board, rectangle);
+            const rectangleG = drawRectangle(board, RectangleClient.inflate(activeRectangle, ACTIVE_STROKE_WIDTH), {
                 stroke: SELECTION_BORDER_COLOR,
                 strokeWidth: ACTIVE_STROKE_WIDTH
             });
             rectangleG.classList.add(SELECTION_RECTANGLE_CLASS_NAME);
             if (rotateRef.angle) {
-                setAngleForG(rectangleG, RectangleClient.getCenterPoint(rectangle), rotateRef.angle);
+                setAngleForG(rectangleG, RectangleClient.getCenterPoint(activeRectangle), rotateRef.angle);
             }
             return rectangleG;
         }
@@ -8228,7 +8577,7 @@ class TableComponent extends CommonElementFlavour {
         super();
     }
     initializeGenerator() {
-        this.activeGenerator = new ActiveGenerator(this.board, {
+        this.activeGenerator = createActiveGenerator(this.board, {
             getStrokeWidth: () => {
                 return ACTIVE_STROKE_WIDTH;
             },
@@ -8254,6 +8603,14 @@ class TableComponent extends CommonElementFlavour {
         this.initializeTextManage();
         this.lineAutoCompleteGenerator = new ArrowLineAutoCompleteGenerator(this.board);
         this.getRef().addGenerator(ArrowLineAutoCompleteGenerator.key, this.lineAutoCompleteGenerator);
+        this.getRef().updateActiveSection = () => {
+            this.activeGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
+                selected: this.selected
+            });
+            this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
+                selected: this.selected
+            });
+        };
     }
     initialize() {
         super.initialize();
@@ -8264,13 +8621,13 @@ class TableComponent extends CommonElementFlavour {
         this.tableGenerator.processDrawing(this.element, this.getElementG());
         this.textGenerator.draw(this.getElementG());
         this.rotateVerticalText();
-        this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+        this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
             selected: this.selected
         });
     }
     rotateVerticalText() {
         const table = this.board.buildTable(this.element);
-        table.cells.forEach(item => {
+        table.cells.forEach((item) => {
             if (PlaitTableElement.isVerticalText(item)) {
                 const textManage = getTextManageByCell(this.board, item);
                 if (textManage) {
@@ -8284,8 +8641,8 @@ class TableComponent extends CommonElementFlavour {
     }
     getDrawShapeTexts(cells) {
         return cells
-            .filter(item => isCellIncludeText(item))
-            .map(item => {
+            .filter((item) => isCellIncludeText(item))
+            .map((item) => {
             return {
                 id: item.id,
                 text: item.text,
@@ -8333,7 +8690,7 @@ class TableComponent extends CommonElementFlavour {
                 setSelectedCells(value.element, previousSelectedCells);
             }
             this.tableGenerator.processDrawing(value.element, this.getElementG());
-            this.activeGenerator.processDrawing(value.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
+            this.activeGenerator.processDrawing(value.element, PlaitBoard.getActiveHost(this.board), { selected: this.selected });
             const previousTexts = this.getDrawShapeTexts(previous.element.cells);
             const currentTexts = this.getDrawShapeTexts(value.element.cells);
             this.textGenerator.update(value.element, previousTexts, currentTexts, this.getElementG());
@@ -8343,8 +8700,8 @@ class TableComponent extends CommonElementFlavour {
             const hasSameSelected = value.selected === previous.selected;
             const hasSameHandleState = this.activeGenerator.options.hasResizeHandle() === this.activeGenerator.hasResizeHandle;
             const currentSelectedCells = getSelectedCells(value.element);
-            if (!hasSameSelected || !hasSameHandleState || currentSelectedCells?.length) {
-                this.activeGenerator.processDrawing(value.element, PlaitBoard.getElementActiveHost(this.board), {
+            if (!hasSameSelected || !hasSameHandleState || currentSelectedCells?.length || value.selected) {
+                this.activeGenerator.processDrawing(value.element, PlaitBoard.getActiveHost(this.board), {
                     selected: this.selected
                 });
             }
@@ -8352,7 +8709,7 @@ class TableComponent extends CommonElementFlavour {
                 clearSelectedCells(value.element);
             }
         }
-        this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+        this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getActiveHost(this.board), {
             selected: this.selected
         });
     }
@@ -8418,7 +8775,7 @@ function withTableResize(board) {
                 const resizePoints = [resizeState.startPoint, resizeState.endPoint];
                 const { xZoom, yZoom } = getResizeZoom(resizePoints, originPoint, handlePoint, false, false);
                 const originPoints = resizeRef.options?.cell.points;
-                const targetPoints = originPoints.map(p => {
+                const targetPoints = originPoints.map((p) => {
                     return movePointByZoomAndOriginPoint(p, originPoint, xZoom, yZoom);
                 });
                 const offsetX = targetPoints[1][0] - originPoints[1][0];
@@ -8445,7 +8802,7 @@ function withTableResize(board) {
                 }, isAspectRatio, isFromCorner);
                 const resizeSnapRef = getSnapResizingRef(board, [resizeRef.element], resizeSnapRefOptions);
                 snapG = resizeSnapRef.snapG;
-                PlaitBoard.getElementActiveHost(board).append(snapG);
+                PlaitBoard.getElementTopHost(board).append(snapG);
                 const points = resizeSnapRef.activePoints;
                 const originPoints = resizeRef.element.points;
                 const originRect = RectangleClient.getRectangleByPoints(originPoints);
@@ -8455,7 +8812,7 @@ function withTableResize(board) {
                 let columns = [...resizeRef.element.columns];
                 let rows = [...resizeRef.element.rows];
                 if (offsetWidth !== 0) {
-                    columns = columns.map(item => {
+                    columns = columns.map((item) => {
                         if (item.width) {
                             return {
                                 ...item,
@@ -8466,7 +8823,7 @@ function withTableResize(board) {
                     });
                 }
                 if (offsetHeight !== 0) {
-                    rows = rows.map(item => {
+                    rows = rows.map((item) => {
                         if (item.height) {
                             return {
                                 ...item,
@@ -8519,7 +8876,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);
     };
@@ -8611,7 +8969,7 @@ const withSwimlaneCreateByDrag = (board) => {
             const points = getDefaultSwimlanePoints(pointer, movingPoint);
             temporaryElement = createDefaultSwimlane(pointer, points);
             tableGenerator.processDrawing(temporaryElement, swimlaneG);
-            PlaitBoard.getElementActiveHost(board).append(swimlaneG);
+            PlaitBoard.getElementTopHost(board).append(swimlaneG);
         }
         pointerMove(event);
     };
@@ -8674,11 +9032,11 @@ const withSwimlaneCreateByDrawing = (board) => {
                 isCreate: true
             });
             snapG = resizeSnapRef.snapG;
-            PlaitBoard.getElementActiveHost(board).append(snapG);
+            PlaitBoard.getElementTopHost(board).append(snapG);
             points = normalizeShapePoints(resizeSnapRef.activePoints, isShift);
             temporaryElement = createDefaultSwimlane(pointer, points);
             tableGenerator.processDrawing(temporaryElement, swimlaneG);
-            PlaitBoard.getElementActiveHost(board).append(swimlaneG);
+            PlaitBoard.getElementTopHost(board).append(swimlaneG);
         }
         pointerMove(event);
     };
@@ -8980,5 +9338,5 @@ const withDraw = (board) => {
  * Generated bundle index. Do not edit.
  */
 
-export { ArrowLineAutoCompleteGenerator, ArrowLineComponent, ArrowLineHandleKey, ArrowLineMarkerType, ArrowLineShape, BasicShapes, DEFAULT_IMAGE_WIDTH, DefaultActivationProperty, DefaultActorProperty, DefaultArrowProperty, DefaultAssemblyProperty, DefaultBasicShapeProperty, DefaultBasicShapePropertyMap, DefaultClassProperty, DefaultCloudProperty, DefaultCombinedFragmentProperty, DefaultComponentBoxProperty, DefaultConnectorProperty, DefaultContainerProperty, DefaultDataBaseProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultDeletionProperty, DefaultDocumentProperty, DefaultDrawActiveStyle, DefaultDrawStyle, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultInterfaceProperty, DefaultInternalStorageProperty, DefaultManualInputProperty, DefaultMergeProperty, DefaultMultiDocumentProperty, DefaultNoteProperty, DefaultObjectProperty, DefaultPackageProperty, DefaultPentagonArrowProperty, DefaultPortProperty, DefaultProvidedInterfaceProperty, DefaultRequiredInterfaceProperty, DefaultSwimlaneHorizontalProperty, DefaultSwimlaneHorizontalWithHeaderProperty, DefaultSwimlanePropertyMap, DefaultSwimlaneVerticalProperty, DefaultSwimlaneVerticalWithHeaderProperty, DefaultTextProperty, DefaultTwoWayArrowProperty, DefaultUMLPropertyMap, DrawThemeColors, DrawTransforms, FlowchartSymbols, GEOMETRY_NOT_CLOSED, GEOMETRY_WITHOUT_TEXT, GEOMETRY_WITH_MULTIPLE_TEXT, GeometryCommonTextKeys, GeometryComponent, GeometryShapeGenerator, GeometryThreshold, KEY_TO_TEXT_MANAGE, LINE_HIT_GEOMETRY_BUFFER, LINE_SNAPPING_BUFFER, LINE_SNAPPING_CONNECTOR_BUFFER, LineActiveGenerator, MIN_TEXT_WIDTH, MemorizeKey, MultipleTextGeometryTextKeys, PlaitArrowLine, PlaitDrawElement, PlaitGeometry, PlaitTableElement, Q2C, SELECTED_CELLS, SWIMLANE_HEADER_SIZE, ShapeDefaultSpace, SingleTextGenerator, SwimlaneDrawSymbols, SwimlaneSymbols, TableGenerator, TableSymbols, TextGenerator, UMLSymbols, VectorLineComponent, VectorLinePointerType, VectorLineShape, WithArrowLineAutoCompletePluginKey, WithDrawPluginKey, adjustSwimlaneShape, alignElbowSegment, alignPoints, buildClipboardData, buildDefaultTextsByShape, buildSwimlaneTable, clearSelectedCells, collectArrowLineUpdatedRefsByGeometry, createArrowLineElement, createCell, createDefaultCells, createDefaultFlowchart, createDefaultGeometry, createDefaultRowsOrColumns, createDefaultSwimlane, createGeometryElement, createGeometryElementWithText, createGeometryElementWithoutText, createMultipleTextGeometryElement, createTextElement, createUMLClassOrInterfaceGeometryElement, createVectorLineElement, debugGenerator$1 as debugGenerator, deleteTextManage, drawArrowLine, drawArrowLineArrow, drawBoundReaction, drawGeometry, drawShape, drawVectorLine, editCell, editText, getArrowLineHandleRefPair, getArrowLinePointers, getArrowLinePoints, getArrowLineTextRectangle, getArrowLines, getAutoCompletePoints, getBasicPointers, getCellWithPoints, getCellsRectangle, getCellsWithPoints, getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultBasicShapeProperty, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultSwimlanePoints, getDefaultTextPoints, getDefaultUMLProperty, getDrawDefaultStrokeColor, getElbowLineRouteOptions, getElbowPoints, getFillByElement, getFirstFilledDrawElement, getFirstTextOrLineElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryAlign, getGeometryPointers, getHitCell, getHitConnection, getHitConnectorPoint, getHitDrawElement, getHitIndexOfAutoCompletePoint, getHitMultipleGeometryText, getHitShape, getIndexAndDeleteCountByKeyPoint, getLineMemorizedLatest, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getMidKeyPoints, getMiddlePoints, getMirrorDataPoints, getMultipleTextGeometryTextKeys, getNearestPoint, getNextRenderPoints, getNextSourceAndTargetPoints, getResizedPreviousAndNextPoint, getSelectedArrowLineElements, getSelectedCells, getSelectedCustomGeometryElements, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedSwimlane, getSelectedTableCellsEditor, getSelectedTableElements, getSelectedVectorLineElements, getSnapResizingRef, getSnapResizingRefOptions, getSnappingRef, getSnappingShape, getSourceAndTargetRectangle, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getSwimlaneCount, getSwimlanePointers, getTextKey, getTextManage, getTextManageByCell, getTextRectangle, getTextShapeProperty, getUMLPointers, getVectorByConnection, getVectorLinePointers, getVectorLinePoints, handleArrowLineCreating, hasIllegalElbowPoint, insertClipboardData, insertElement, isCellIncludeText, isClosedCustomGeometry, isClosedDrawElement, isClosedPoints, isDrawElementIncludeText, isDrawElementsIncludeText, isEmptyTextElement, isFilledDrawElement, isGeometryClosed, isGeometryIncludeText, isHitArrowLine, isHitArrowLineText, isHitDrawElement, isHitEdgeOfShape, isHitElementInside, isHitElementText, isHitPolyLine, isHitVectorLine, isInsideOfShape, isMultipleTextGeometry, isMultipleTextShape, isRectangleHitDrawElement, isRectangleHitElementText, isRectangleHitRotatedElement, isRectangleHitRotatedPoints, isSelfLoop, isSingleSelectElementByTable, isSingleSelectLine, isSingleSelectSwimlane, isSingleSelectTable, isSingleTextGeometry, isSingleTextShape, isSwimlanePointers, isSwimlaneWithHeader, isTextExceedingBounds, isUpdatedHandleIndex, isUseDefaultOrthogonalRoute, memorizeLatestShape, memorizeLatestText, rerenderGeometryActive, setSelectedCells, setTextManage, traverseDrawShapes, updateCellIds, updateCellIdsByRowOrColumn, updateColumns, updateRowOrColumnIds, updateRows, vectorLineCreating, withArrowLineAutoComplete, withDraw };
+export { ArrowLineAutoCompleteGenerator, ArrowLineComponent, ArrowLineHandleKey, ArrowLineMarkerType, ArrowLineShape, BasicShapes, DEFAULT_IMAGE_WIDTH, DefaultActivationProperty, DefaultActorProperty, DefaultArrowProperty, DefaultAssemblyProperty, DefaultBasicShapeProperty, DefaultBasicShapePropertyMap, DefaultClassProperty, DefaultCloudProperty, DefaultCombinedFragmentProperty, DefaultComponentBoxProperty, DefaultConnectorProperty, DefaultContainerProperty, DefaultDataBaseProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultDeletionProperty, DefaultDocumentProperty, DefaultDrawActiveStyle, DefaultDrawStyle, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultInterfaceProperty, DefaultInternalStorageProperty, DefaultManualInputProperty, DefaultMergeProperty, DefaultMultiDocumentProperty, DefaultNoteProperty, DefaultObjectProperty, DefaultPackageProperty, DefaultPentagonArrowProperty, DefaultPortProperty, DefaultProvidedInterfaceProperty, DefaultRequiredInterfaceProperty, DefaultSwimlaneHorizontalProperty, DefaultSwimlaneHorizontalWithHeaderProperty, DefaultSwimlanePropertyMap, DefaultSwimlaneVerticalProperty, DefaultSwimlaneVerticalWithHeaderProperty, DefaultTextProperty, DefaultTwoWayArrowProperty, DefaultUMLPropertyMap, DrawThemeColors, DrawTransforms, FlowchartSymbols, GEOMETRY_NOT_CLOSED, GEOMETRY_WITHOUT_TEXT, GEOMETRY_WITH_MULTIPLE_TEXT, GeometryCommonTextKeys, GeometryComponent, GeometryShapeGenerator, GeometryThreshold, KEY_TO_TEXT_MANAGE, LINE_HIT_GEOMETRY_BUFFER, LINE_SNAPPING_BUFFER, LINE_SNAPPING_CONNECTOR_BUFFER, LineActiveGenerator, MIN_TEXT_WIDTH, MemorizeKey, MultipleTextGeometryTextKeys, PlaitArrowLine, PlaitDrawElement, PlaitGeometry, PlaitTableElement, Q2C, SELECTED_CELLS, SWIMLANE_HEADER_SIZE, ShapeDefaultSpace, SingleTextGenerator, SwimlaneDrawSymbols, SwimlaneSymbols, TableGenerator, TableSymbols, TextGenerator, UMLSymbols, VectorLineComponent, VectorLinePointerType, VectorLineShape, WithArrowLineAutoCompletePluginKey, WithDrawPluginKey, adjustSwimlaneShape, alignElbowSegment, alignPoints, buildClipboardData, buildDefaultTextsByShape, buildSwimlaneTable, clearSelectedCells, collectArrowLineUpdatedRefsByGeometry, createArrowLineElement, createCell, createDefaultCells, createDefaultFlowchart, createDefaultGeometry, createDefaultRowsOrColumns, createDefaultSwimlane, createGeometryElement, createGeometryElementWithText, createGeometryElementWithoutText, createMultipleTextGeometryElement, createTextElement, createUMLClassOrInterfaceGeometryElement, createVectorLineElement, debugGenerator$1 as debugGenerator, deleteTextManage, drawArrowLine, drawArrowLineArrow, drawBoundReaction, drawGeometry, drawShape, drawVectorLine, editCell, editText, getArrowLineHandleRefPair, getArrowLinePointers, getArrowLinePoints, getArrowLineTextRectangle, getArrowLines, getAutoCompletePoints, getBasicPointers, getCellWithPoints, getCellsRectangle, getCellsWithPoints, getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultBasicShapeProperty, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultSwimlanePoints, getDefaultTextPoints, getDefaultUMLProperty, getDrawDefaultStrokeColor, getElbowLineRouteOptions, getElbowPoints, getFillByElement, getFirstFilledDrawElement, getFirstTextOrLineElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryAlign, getGeometryPointers, getHitCell, getHitConnection, getHitConnectorPoint, getHitDrawElement, getHitIndexOfAutoCompletePoint, getHitMultipleGeometryText, getHitShape, getIndexAndDeleteCountByKeyPoint, getLineMemorizedLatest, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getMidKeyPoints, getMiddlePoints, getMirrorDataPoints, getMultipleTextGeometryTextKeys, getNearestPoint, getNextRenderPoints, getNextSourceAndTargetPoints, getResizedPreviousAndNextPoint, getSelectedArrowLineElements, getSelectedCells, getSelectedCustomGeometryElements, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedSwimlane, getSelectedTableCellsEditor, getSelectedTableElements, getSelectedVectorLineElements, getSnapResizingRef, getSnapResizingRefOptions, getSnappingRef, getSnappingShape, getSourceAndTargetRectangle, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getSwimlaneCount, getSwimlanePointers, getTextKey, getTextManage, getTextManageByCell, getTextRectangle, getTextShapeProperty, getUMLPointers, getVectorByConnection, getVectorLinePointers, getVectorLinePoints, handleArrowLineCreating, hasIllegalElbowPoint, insertClipboardData, insertElement, isCellIncludeText, isClosedCustomGeometry, isClosedDrawElement, isClosedPoints, isDrawElementIncludeText, isDrawElementsIncludeText, isEmptyTextElement, isFilledDrawElement, isGeometryClosed, isGeometryIncludeText, isHitArrowLine, isHitArrowLineText, isHitDrawElement, isHitEdgeOfShape, isHitElementInside, isHitElementText, isHitPolyLine, isHitVectorLine, isInsideOfShape, isMultipleTextGeometry, isMultipleTextShape, isRectangleHitDrawElement, isRectangleHitElementText, isRectangleHitRotatedElement, isRectangleHitRotatedPoints, isSelfLoop, isSingleSelectElementByTable, isSingleSelectLine, isSingleSelectSwimlane, isSingleSelectTable, isSingleTextGeometry, isSingleTextShape, isSwimlanePointers, isSwimlaneWithHeader, isTextExceedingBounds, isUpdatedHandleIndex, isUseDefaultOrthogonalRoute, memorizeLatestShape, memorizeLatestText, setSelectedCells, setTextManage, traverseDrawShapes, updateCellIds, updateCellIdsByRowOrColumn, updateColumns, updateRowOrColumnIds, updateRows, vectorLineCreating, withArrowLineAutoComplete, withDraw };
 //# sourceMappingURL=plait-draw.mjs.map