@plait/draw 0.52.0 → 0.54.0

package/fesm2022/plait-draw.mjs

@@ -1,5 +1,5 @@
-import { ACTIVE_STROKE_WIDTH, ThemeColorMode, Point, RectangleClient, getElementById, createG, arrowPoints, createPath, distanceBetweenPointAndPoint, drawLinearPath, rotate, depthFirstRecursion, getIsRecursionFunc, idCreator, catmullRomFitting, PlaitBoard, findElements, createMask, createRect, getSelectedElements, distanceBetweenPointAndSegments, HIT_DISTANCE_BUFFER, isPolylineHitRectangle, setStrokeLinecap, isPointInPolygon, getNearestPointBetweenPointAndSegments, isPointInEllipse, getEllipseTangentSlope, getVectorFromPointAndSlope, drawRectangle, drawRoundRectangle, isPointInRoundRectangle, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, Direction, Path, PlaitNode, toViewBoxPoint, toHostPoint, isSelectionMoving, RgbaToHEX, PlaitElement, preventTouchMove, createClipboardContext, WritableClipboardType, addClipboardContext, getRectangleByElements, getHitElementByPoint, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER, getRectangleByGroup, getElementsInGroup, isSelectedElementOrGroup, PlaitGroupElement } from '@plait/core';
-import { removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, isSourceAndTargetIntersect, getPoints, getPointByVectorComponent, getExtendPoint, getUnitVectorByPointAndPoint, Generator, getRectangleResizeHandleRefs, RESIZE_HANDLE_DIAMETER, getMemorizedLatest, memorizeLatest, getPointOnPolyline, rotatePoints, TRANSPARENT, getCrossingPointsBetweenPointAndSegment, isPointOnSegment, getDirectionByVector, getOppositeDirection, getDirectionFactor, getDirectionByPointOfRectangle, rotateVectorAnti90, getSourceAndTargetOuterRectangle, getNextPoint, normalizeShapePoints, getFirstTextEditor, PRIMARY_COLOR, CommonPluginElement, ActiveGenerator, WithTextPluginKey, drawPrimaryHandle, drawFillPrimaryHandle, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, getElementsText, acceptImageTypes, getElementOfFocusedImage, buildImage, getDirectionFactorByDirectionComponent, isCornerHandle, getFirstTextManage, withResize, drawHandle, getIndexByResizeHandle, getSymmetricHandleIndex, getResizeHandlePointByIndex, isResizingByCondition, getRatioByPoint, ImageGenerator, ResizeHandle } from '@plait/common';
+import { ACTIVE_STROKE_WIDTH, ThemeColorMode, createDebugGenerator, Point, RectangleClient, getElementById, rotatePointsByElement, createG, arrowPoints, createPath, distanceBetweenPointAndPoint, drawLinearPath, rotate, distanceBetweenPointAndSegments, HIT_DISTANCE_BUFFER, isPolylineHitRectangle, rotateAntiPointsByElement, rotatePoints, depthFirstRecursion, PlaitBoard, getIsRecursionFunc, idCreator, catmullRomFitting, findElements, createMask, createRect, getSelectedElements, setStrokeLinecap, isPointInPolygon, getNearestPointBetweenPointAndSegments, isPointInEllipse, getEllipseTangentSlope, getVectorFromPointAndSlope, drawRectangle, drawRoundRectangle, isPointInRoundRectangle, SNAPPING_STROKE_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, Direction, hasValidAngle, Path, PlaitNode, toViewBoxPoint, toHostPoint, isSelectionMoving, RgbaToHEX, PlaitElement, getHitElementByPoint, preventTouchMove, createClipboardContext, WritableClipboardType, addClipboardContext, getSelectionAngle, getRectangleByAngle, getRectangleByElements, rotatedDataPoints, isAxisChangedByAngle, setAngleForG, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER } from '@plait/core';
+import { removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, isSourceAndTargetIntersect, getPoints, DEFAULT_ROUTE_MARGIN, getPointByVectorComponent, getExtendPoint, getUnitVectorByPointAndPoint, Generator, RESIZE_HANDLE_DIAMETER, getPointOnPolyline, TRANSPARENT, getRectangleResizeHandleRefs, getRotatedResizeCursorClassByAngle, getMemorizedLatest, memorizeLatest, getCrossingPointsBetweenPointAndSegment, isPointOnSegment, getDirectionByVector, getOppositeDirection, getDirectionFactor, rotateVector, getDirectionByPointOfRectangle, rotateVectorAnti90, getSourceAndTargetOuterRectangle, getNextPoint, normalizeShapePoints, getFirstTextEditor, PRIMARY_COLOR, CommonPluginElement, ActiveGenerator, WithTextPluginKey, drawPrimaryHandle, drawFillPrimaryHandle, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, getElementsText, acceptImageTypes, getElementOfFocusedImage, buildImage, resetPointsAfterResize, getDirectionFactorByDirectionComponent, isCornerHandle, getFirstTextManage, withResize, drawHandle, getIndexByResizeHandle, getSymmetricHandleIndex, getResizeHandlePointByIndex, isResizingByCondition, getRatioByPoint, ImageGenerator, ResizeHandle } from '@plait/common';
 import { Alignment, buildText, DEFAULT_FONT_SIZE, getTextSize, AlignEditor, TextManage } from '@plait/text';
 import { pointsOnBezierCurves } from 'points-on-curve';
 import * as i0 from '@angular/core';
@@ -111,7 +111,9 @@ const DefaultFlowchartPropertyMap = {
     [FlowchartSymbols.delay]: DefaultFlowchartProperty,
     [FlowchartSymbols.storedData]: DefaultFlowchartProperty
 };
-const REACTION_MARGIN = -4;
+const LINE_HIT_GEOMETRY_BUFFER = 10;
+const LINE_SNAPPING_BUFFER = 6;
+const LINE_SNAPPING_CONNECTOR_BUFFER = 8;
 
 const getGeometryPointers = () => {
     return [...Object.keys(BasicShapes), ...Object.keys(FlowchartSymbols)];
@@ -166,6 +168,8 @@ const LINE_AUTO_COMPLETE_HOVERED_OPACITY = 0.8;
 const LINE_AUTO_COMPLETE_HOVERED_DIAMETER = 10;
 const LINE_ALIGN_TOLERANCE = 3;
 
+const debugKey$3 = 'debug:plait:line-mirror';
+const debugGenerator$3 = createDebugGenerator(debugKey$3);
 const alignPoints = (basePoint, movingPoint) => {
     const newPoint = [...movingPoint];
     if (Point.isVertical(newPoint, basePoint, LINE_ALIGN_TOLERANCE)) {
@@ -302,7 +306,7 @@ function getIndexAndDeleteCountByKeyPoint(board, element, dataPoints, nextRender
         if (midDataPoints.length > 0) {
             const handleRefPair = getLineHandleRefPair(board, element);
             const params = getElbowLineRouteOptions(board, element, handleRefPair);
-            const keyPoints = removeDuplicatePoints(generateElbowLineRoute(params));
+            const keyPoints = removeDuplicatePoints(generateElbowLineRoute(params, board));
             const nextKeyPoints = simplifyOrthogonalPoints(keyPoints.slice(1, keyPoints.length - 1));
             const nextDataPoints = [nextRenderPoints[0], ...midDataPoints, nextRenderPoints[nextRenderPoints.length - 1]];
             const mirrorDataPoints = getMirrorDataPoints(board, nextDataPoints, nextKeyPoints, params);
@@ -429,6 +433,7 @@ function findOrthogonalParallelSegments(segment, keyPoints) {
     return parallelSegments;
 }
 function findMirrorSegments(board, segment, parallelSegments, sourceRectangle, targetRectangle) {
+    debugGenerator$3.isDebug() && debugGenerator$3.clear();
     const mirrorSegments = [];
     for (let index = 0; index < parallelSegments.length; index++) {
         const parallelPath = parallelSegments[index];
@@ -442,14 +447,7 @@ function findMirrorSegments(board, segment, parallelSegments, sourceRectangle, t
         const isValid = !RectangleClient.isHit(fakeRectangle, sourceRectangle) && !RectangleClient.isHit(fakeRectangle, targetRectangle);
         if (isValid) {
             mirrorSegments.push([startPoint, endPoint]);
-            // const fakeRectangleG = PlaitBoard.getRoughSVG(board).rectangle(
-            //     fakeRectangle.x,
-            //     fakeRectangle.y,
-            //     fakeRectangle.width,
-            //     fakeRectangle.height,
-            //     { stroke: 'blue' }
-            // );
-            // PlaitBoard.getElementActiveHost(board).append(fakeRectangleG);
+            debugGenerator$3.isDebug() && debugGenerator$3.drawPolygon(board, RectangleClient.getCornerPoints(fakeRectangle));
         }
     }
     return mirrorSegments;
@@ -475,15 +473,20 @@ const hasIllegalElbowPoint = (midDataPoints) => {
     });
 };
 
+const isSelfLoop = (element) => {
+    return element.source.boundId && element.source.boundId === element.target.boundId;
+};
+const isUseDefaultOrthogonalRoute = (element, options) => {
+    return isSourceAndTargetIntersect(options) && !isSelfLoop(element);
+};
 const getElbowPoints = (board, element) => {
     const handleRefPair = getLineHandleRefPair(board, element);
     const params = getElbowLineRouteOptions(board, element, handleRefPair);
     // console.log(params, 'params');
-    const isIntersect = isSourceAndTargetIntersect(params);
-    if (isIntersect) {
-        return simplifyOrthogonalPoints(getPoints(handleRefPair.source.point, handleRefPair.source.direction, handleRefPair.target.point, handleRefPair.target.direction, 0));
+    if (isUseDefaultOrthogonalRoute(element, params)) {
+        return simplifyOrthogonalPoints(getPoints(handleRefPair.source.point, handleRefPair.source.direction, handleRefPair.target.point, handleRefPair.target.direction, DEFAULT_ROUTE_MARGIN));
     }
-    const keyPoints = removeDuplicatePoints(generateElbowLineRoute(params));
+    const keyPoints = removeDuplicatePoints(generateElbowLineRoute(params, board));
     const nextKeyPoints = keyPoints.slice(1, keyPoints.length - 1);
     if (element.points.length === 2) {
         return simplifyOrthogonalPoints(keyPoints);
@@ -549,8 +552,16 @@ const getSourceAndTargetRectangle = (board, element, handleRefPair) => {
         const target = handleRefPair.target;
         targetElement = createFakeElement(target.point, target.vector);
     }
-    const sourceRectangle = RectangleClient.inflate(RectangleClient.getRectangleByPoints(sourceElement.points), getStrokeWidthByElement(sourceElement) * 2);
-    const targetRectangle = RectangleClient.inflate(RectangleClient.getRectangleByPoints(targetElement.points), getStrokeWidthByElement(targetElement) * 2);
+    let sourceRectangle = RectangleClient.getRectangleByPoints(sourceElement.points);
+    const rotatedSourceCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(sourceRectangle), sourceElement) ||
+        RectangleClient.getCornerPoints(sourceRectangle);
+    sourceRectangle = RectangleClient.getRectangleByPoints(rotatedSourceCornerPoints);
+    sourceRectangle = RectangleClient.inflate(sourceRectangle, getStrokeWidthByElement(sourceElement) * 2);
+    let targetRectangle = RectangleClient.getRectangleByPoints(targetElement.points);
+    const rotatedTargetCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(targetRectangle), targetElement) ||
+        RectangleClient.getCornerPoints(targetRectangle);
+    targetRectangle = RectangleClient.getRectangleByPoints(rotatedTargetCornerPoints);
+    targetRectangle = RectangleClient.inflate(targetRectangle, getStrokeWidthByElement(targetElement) * 2);
     return {
         sourceRectangle,
         targetRectangle
@@ -688,7 +699,7 @@ const drawHollowTriangleArrow = (source, target, options) => {
     return drawLinearPath([pointLeft, pointRight, target], { ...options, fill: 'white' }, true);
 };
 
-const getShape = (value) => {
+const getElementShape = (value) => {
     if (PlaitDrawElement.isImage(value)) {
         return BasicShapes.rectangle;
     }
@@ -706,27 +717,238 @@ class LineShapeGenerator extends Generator {
     }
 }
 
-const getHitRectangleResizeHandleRef = (board, rectangle, point) => {
+var LineResizeHandle;
+(function (LineResizeHandle) {
+    LineResizeHandle["source"] = "source";
+    LineResizeHandle["target"] = "target";
+    LineResizeHandle["addHandle"] = "addHandle";
+})(LineResizeHandle || (LineResizeHandle = {}));
+const getHitLineResizeHandleRef = (board, element, point) => {
+    let dataPoints = PlaitLine.getPoints(board, element);
+    const index = getHitPointIndex(dataPoints, point);
+    if (index !== -1) {
+        const handleIndex = index;
+        if (index === 0) {
+            return { handle: LineResizeHandle.source, handleIndex };
+        }
+        if (index === dataPoints.length - 1) {
+            return { handle: LineResizeHandle.target, handleIndex };
+        }
+        // elbow line, data points only verify source connection point and target connection point
+        if (element.shape !== LineShape.elbow) {
+            return { handleIndex };
+        }
+    }
+    const middlePoints = getMiddlePoints(board, element);
+    const indexOfMiddlePoints = getHitPointIndex(middlePoints, point);
+    if (indexOfMiddlePoints !== -1) {
+        return {
+            handle: LineResizeHandle.addHandle,
+            handleIndex: indexOfMiddlePoints
+        };
+    }
+    return undefined;
+};
+function getHitPointIndex(points, movingPoint) {
+    const rectangles = points.map(point => {
+        return {
+            x: point[0] - RESIZE_HANDLE_DIAMETER / 2,
+            y: point[1] - RESIZE_HANDLE_DIAMETER / 2,
+            width: RESIZE_HANDLE_DIAMETER,
+            height: RESIZE_HANDLE_DIAMETER
+        };
+    });
+    const rectangle = rectangles.find(rectangle => {
+        return RectangleClient.isHit(RectangleClient.getRectangleByPoints([movingPoint, movingPoint]), rectangle);
+    });
+    return rectangle ? rectangles.indexOf(rectangle) : -1;
+}
+const getHitLineTextIndex = (board, element, point) => {
+    const texts = element.texts;
+    if (!texts.length)
+        return -1;
+    const points = getLinePoints(board, element);
+    return texts.findIndex(text => {
+        const center = getPointOnPolyline(points, text.position);
+        const rectangle = {
+            x: center[0] - text.width / 2,
+            y: center[1] - text.height / 2,
+            width: text.width,
+            height: text.height
+        };
+        return RectangleClient.isHit(rectangle, RectangleClient.getRectangleByPoints([point, point]));
+    });
+};
+
+const isTextExceedingBounds = (geometry) => {
+    const client = RectangleClient.getRectangleByPoints(geometry.points);
+    if (geometry.textHeight > client.height) {
+        return true;
+    }
+    return false;
+};
+const isHitLineText = (board, element, point) => {
+    return getHitLineTextIndex(board, element, point) !== -1;
+};
+const isHitPolyLine = (pathPoints, point) => {
+    const distance = distanceBetweenPointAndSegments(pathPoints, point);
+    return distance <= HIT_DISTANCE_BUFFER;
+};
+const isHitLine = (board, element, point) => {
+    const points = getLinePoints(board, element);
+    const isHitText = isHitLineText(board, element, point);
+    return isHitText || isHitPolyLine(points, point);
+};
+const isRectangleHitDrawElement = (board, element, selection) => {
+    const rangeRectangle = RectangleClient.getRectangleByPoints([selection.anchor, selection.focus]);
+    if (PlaitDrawElement.isGeometry(element)) {
+        const client = RectangleClient.getRectangleByPoints(element.points);
+        let rotatedCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(client), element) || RectangleClient.getCornerPoints(client);
+        if (isTextExceedingBounds(element)) {
+            const textClient = getTextRectangle(element);
+            rotatedCornerPoints =
+                rotatePointsByElement(RectangleClient.getCornerPoints(textClient), element) || RectangleClient.getCornerPoints(textClient);
+        }
+        return isPolylineHitRectangle(rotatedCornerPoints, rangeRectangle);
+    }
+    if (PlaitDrawElement.isImage(element)) {
+        const client = RectangleClient.getRectangleByPoints(element.points);
+        const rotatedCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(client), element) || RectangleClient.getCornerPoints(client);
+        return isPolylineHitRectangle(rotatedCornerPoints, rangeRectangle);
+    }
+    if (PlaitDrawElement.isLine(element)) {
+        const points = getLinePoints(board, element);
+        return isPolylineHitRectangle(points, rangeRectangle);
+    }
+    return null;
+};
+const isHitDrawElement = (board, element, point) => {
+    const rectangle = board.getRectangle(element);
+    point = rotateAntiPointsByElement(point, element) || point;
+    if (PlaitDrawElement.isGeometry(element)) {
+        const fill = getFillByElement(board, element);
+        if (isHitEdgeOfShape(board, element, point, HIT_DISTANCE_BUFFER)) {
+            return true;
+        }
+        const engine = getEngine(getElementShape(element));
+        // when shape equals text, fill is not allowed
+        if (fill !== DefaultGeometryStyle.fill && fill !== TRANSPARENT && !PlaitDrawElement.isText(element)) {
+            const isHitInside = engine.isInsidePoint(rectangle, point);
+            if (isHitInside) {
+                return isHitInside;
+            }
+        }
+        else {
+            // if shape equals text, only check text rectangle
+            if (PlaitDrawElement.isText(element)) {
+                const textClient = getTextRectangle(element);
+                let isHitText = RectangleClient.isPointInRectangle(textClient, point);
+                return isHitText;
+            }
+            // check textRectangle of element
+            const textClient = engine.getTextRectangle ? engine.getTextRectangle(element) : getTextRectangle(element);
+            const isHitTextRectangle = RectangleClient.isPointInRectangle(textClient, point);
+            if (isHitTextRectangle) {
+                return isHitTextRectangle;
+            }
+        }
+    }
+    if (PlaitDrawElement.isImage(element)) {
+        const client = RectangleClient.getRectangleByPoints(element.points);
+        return RectangleClient.isPointInRectangle(client, point);
+    }
+    if (PlaitDrawElement.isLine(element)) {
+        return isHitLine(board, element, point);
+    }
+    return null;
+};
+const isHitEdgeOfShape = (board, element, point, hitDistanceBuffer) => {
+    const nearestPoint = getNearestPoint(element, point);
+    const distance = distanceBetweenPointAndPoint(nearestPoint[0], nearestPoint[1], point[0], point[1]);
+    return distance <= hitDistanceBuffer;
+};
+const isInsideOfShape = (board, element, point, hitDistanceBuffer) => {
+    const client = RectangleClient.inflate(RectangleClient.getRectangleByPoints(element.points), hitDistanceBuffer);
+    return getEngine(getElementShape(element)).isInsidePoint(client, point);
+};
+const isHitElementInside = (board, element, point) => {
+    const rectangle = board.getRectangle(element);
+    point = rotateAntiPointsByElement(point, element) || point;
+    if (PlaitDrawElement.isGeometry(element)) {
+        const engine = getEngine(getElementShape(element));
+        const isHitInside = engine.isInsidePoint(rectangle, point);
+        if (isHitInside) {
+            return isHitInside;
+        }
+        if (engine.getTextRectangle) {
+            const textClient = engine.getTextRectangle(element);
+            const isHitTextRectangle = RectangleClient.isPointInRectangle(textClient, point);
+            if (isHitTextRectangle) {
+                return isHitTextRectangle;
+            }
+        }
+    }
+    if (PlaitDrawElement.isImage(element)) {
+        const client = RectangleClient.getRectangleByPoints(element.points);
+        return RectangleClient.isPointInRectangle(client, point);
+    }
+    if (PlaitDrawElement.isLine(element)) {
+        return isHitLine(board, element, point);
+    }
+    return null;
+};
+
+const getHitRectangleResizeHandleRef = (board, rectangle, point, angle = 0) => {
+    const centerPoint = RectangleClient.getCenterPoint(rectangle);
     const resizeHandleRefs = getRectangleResizeHandleRefs(rectangle, RESIZE_HANDLE_DIAMETER);
-    const result = resizeHandleRefs.find(resizeHandleRef => {
-        return RectangleClient.isHit(RectangleClient.getRectangleByPoints([point, point]), resizeHandleRef.rectangle);
+    if (angle) {
+        const rotatedPoint = rotatePoints([point], centerPoint, -angle)[0];
+        let result = resizeHandleRefs.find(resizeHandleRef => {
+            return RectangleClient.isHit(RectangleClient.getRectangleByPoints([rotatedPoint, rotatedPoint]), resizeHandleRef.rectangle);
+        });
+        if (result) {
+            result.cursorClass = getRotatedResizeCursorClassByAngle(result.cursorClass, angle);
+        }
+        return result;
+    }
+    else {
+        return resizeHandleRefs.find(resizeHandleRef => {
+            return RectangleClient.isHit(RectangleClient.getRectangleByPoints([point, point]), resizeHandleRef.rectangle);
+        });
+    }
+};
+const getSnappingGeometry = (board, point) => {
+    let hitElement = getHitGeometry(board, point);
+    if (hitElement) {
+        const ref = getSnappingRef(board, hitElement, point);
+        if (ref.isHitConnector || ref.isHitEdge) {
+            return hitElement;
+        }
+    }
+    return null;
+};
+const getSnappingRef = (board, hitElement, point) => {
+    const rotatedPoint = rotateAntiPointsByElement(point, hitElement) || point;
+    const connectorPoint = getHitConnectorPoint(rotatedPoint, hitElement);
+    const edgePoint = getNearestPoint(hitElement, rotatedPoint);
+    const isHitEdge = isHitEdgeOfShape(board, hitElement, rotatedPoint, LINE_SNAPPING_BUFFER);
+    return { isHitEdge, isHitConnector: !!connectorPoint, connectorPoint, edgePoint };
+};
+const getHitGeometry = (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)) {
+            hitShape = element;
+        }
     });
-    return result;
+    return hitShape;
 };
-const getHitOutlineGeometry = (board, point, offset = 0) => {
-    let geometry = null;
+const traverseDrawShapes = (board, callback) => {
     depthFirstRecursion(board, node => {
-        if (PlaitDrawElement.isGeometry(node) || PlaitDrawElement.isImage(node)) {
-            let client = RectangleClient.getRectangleByPoints(node.points);
-            client = RectangleClient.getOutlineRectangle(client, offset);
-            const shape = getShape(node);
-            const isHit = getEngine(shape).isInsidePoint(client, point);
-            if (isHit) {
-                geometry = node;
-            }
+        if (!PlaitBoard.isBoard(node) && PlaitDrawElement.isShapeElement(node)) {
+            callback(node);
         }
     }, getIsRecursionFunc(board), true);
-    return geometry;
 };
 
 const SHAPE_MAX_LENGTH = 6;
@@ -904,8 +1126,7 @@ function getMiddlePoints(board, element) {
     if (shape === LineShape.elbow) {
         const renderPoints = getElbowPoints(board, element);
         const options = getElbowLineRouteOptions(board, element);
-        const isIntersect = isSourceAndTargetIntersect(options);
-        if (!isIntersect) {
+        if (!isUseDefaultOrthogonalRoute(element, options)) {
             const [nextSourcePoint, nextTargetPoint] = getNextSourceAndTargetPoints(board, element);
             for (let i = 0; i < renderPoints.length - 1; i++) {
                 if ((i == 0 && Point.isEquals(renderPoints[i + 1], nextSourcePoint)) ||
@@ -945,20 +1166,18 @@ const drawLine = (board, element) => {
     arrow && lineG.appendChild(arrow);
     return lineG;
 };
-const getConnectionByNearestPoint = (board, point, hitElement) => {
+const getHitConnection = (board, point, hitElement) => {
     let rectangle = RectangleClient.getRectangleByPoints(hitElement.points);
-    let nearestPoint = getNearestPoint(hitElement, point);
-    const hitConnector = getHitConnectorPoint(nearestPoint, hitElement, rectangle);
-    nearestPoint = hitConnector ? hitConnector : nearestPoint;
-    return [(nearestPoint[0] - rectangle.x) / rectangle.width, (nearestPoint[1] - rectangle.y) / rectangle.height];
-};
-const getHitConnectorPoint = (point, hitElement, rectangle) => {
-    const shape = getShape(hitElement);
-    const connector = getEngine(shape).getConnectorPoints(rectangle);
-    const points = RectangleClient.getPoints(RectangleClient.getRectangleByCenterPoint(point, 10, 10));
-    const pointRectangle = RectangleClient.getRectangleByPoints(points);
-    return connector.find(point => {
-        return RectangleClient.isHit(pointRectangle, RectangleClient.getRectangleByPoints([point, point]));
+    const ref = getSnappingRef(board, hitElement, point);
+    const connectionPoint = ref.connectorPoint || ref.edgePoint;
+    return [(connectionPoint[0] - rectangle.x) / rectangle.width, (connectionPoint[1] - rectangle.y) / rectangle.height];
+};
+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 distanceBetweenPointAndPoint(...connectorPoint, ...point) <= LINE_SNAPPING_CONNECTOR_BUFFER;
     });
 };
 const getLineTextRectangle = (board, element, index) => {
@@ -995,9 +1214,9 @@ const Q2C = (points) => {
     return result;
 };
 const handleLineCreating = (board, lineShape, sourcePoint, movingPoint, sourceElement, lineShapeG) => {
-    const hitElement = getHitOutlineGeometry(board, movingPoint, REACTION_MARGIN);
-    const targetConnection = hitElement ? getConnectionByNearestPoint(board, movingPoint, hitElement) : undefined;
-    const connection = sourceElement ? getConnectionByNearestPoint(board, sourcePoint, sourceElement) : undefined;
+    const hitElement = getSnappingGeometry(board, movingPoint);
+    const targetConnection = hitElement ? getHitConnection(board, movingPoint, hitElement) : undefined;
+    const sourceConnection = sourceElement ? getHitConnection(board, sourcePoint, sourceElement) : undefined;
     const targetBoundId = hitElement ? hitElement.id : undefined;
     const lineGenerator = new LineShapeGenerator(board);
     const memorizedLatest = getLineMemorizedLatest();
@@ -1006,7 +1225,7 @@ const handleLineCreating = (board, lineShape, sourcePoint, movingPoint, sourceEl
     targetMarker = memorizedLatest.target;
     sourceMarker && delete memorizedLatest.source;
     targetMarker && delete memorizedLatest.target;
-    const temporaryLineElement = createLineElement(lineShape, [sourcePoint, movingPoint], { marker: sourceMarker || LineMarkerType.none, connection: connection, boundId: sourceElement?.id }, { marker: targetMarker || LineMarkerType.arrow, connection: targetConnection, boundId: targetBoundId }, [], {
+    const temporaryLineElement = createLineElement(lineShape, [sourcePoint, movingPoint], { marker: sourceMarker || LineMarkerType.none, connection: sourceConnection, boundId: sourceElement?.id }, { marker: targetMarker || LineMarkerType.arrow, connection: targetConnection, boundId: targetBoundId }, [], {
         strokeWidth: DefaultLineStyle.strokeWidth,
         ...memorizedLatest
     });
@@ -1060,185 +1279,6 @@ const getSelectedImageElements = (board) => {
     return selectedElements;
 };
 
-var LineResizeHandle;
-(function (LineResizeHandle) {
-    LineResizeHandle["source"] = "source";
-    LineResizeHandle["target"] = "target";
-    LineResizeHandle["addHandle"] = "addHandle";
-})(LineResizeHandle || (LineResizeHandle = {}));
-const getHitLineResizeHandleRef = (board, element, point) => {
-    let dataPoints = PlaitLine.getPoints(board, element);
-    const index = getHitPointIndex(dataPoints, point);
-    if (index !== -1) {
-        const handleIndex = index;
-        if (index === 0) {
-            return { handle: LineResizeHandle.source, handleIndex };
-        }
-        if (index === dataPoints.length - 1) {
-            return { handle: LineResizeHandle.target, handleIndex };
-        }
-        // elbow line, data points only verify source connection point and target connection point
-        if (element.shape !== LineShape.elbow) {
-            return { handleIndex };
-        }
-    }
-    const middlePoints = getMiddlePoints(board, element);
-    const indexOfMiddlePoints = getHitPointIndex(middlePoints, point);
-    if (indexOfMiddlePoints !== -1) {
-        return {
-            handle: LineResizeHandle.addHandle,
-            handleIndex: indexOfMiddlePoints
-        };
-    }
-    return undefined;
-};
-function getHitPointIndex(points, movingPoint) {
-    const rectangles = points.map(point => {
-        return {
-            x: point[0] - RESIZE_HANDLE_DIAMETER / 2,
-            y: point[1] - RESIZE_HANDLE_DIAMETER / 2,
-            width: RESIZE_HANDLE_DIAMETER,
-            height: RESIZE_HANDLE_DIAMETER
-        };
-    });
-    const rectangle = rectangles.find(rectangle => {
-        return RectangleClient.isHit(RectangleClient.getRectangleByPoints([movingPoint, movingPoint]), rectangle);
-    });
-    return rectangle ? rectangles.indexOf(rectangle) : -1;
-}
-const getHitLineTextIndex = (board, element, point) => {
-    const texts = element.texts;
-    if (!texts.length)
-        return -1;
-    const points = getLinePoints(board, element);
-    return texts.findIndex(text => {
-        const center = getPointOnPolyline(points, text.position);
-        const rectangle = {
-            x: center[0] - text.width / 2,
-            y: center[1] - text.height / 2,
-            width: text.width,
-            height: text.height
-        };
-        return RectangleClient.isHit(rectangle, RectangleClient.getRectangleByPoints([point, point]));
-    });
-};
-
-const isTextExceedingBounds = (geometry) => {
-    const client = RectangleClient.getRectangleByPoints(geometry.points);
-    if (geometry.textHeight > client.height) {
-        return true;
-    }
-    return false;
-};
-const isHitLineText = (board, element, point) => {
-    return getHitLineTextIndex(board, element, point) !== -1;
-};
-const isHitPolyLine = (pathPoints, point) => {
-    const distance = distanceBetweenPointAndSegments(pathPoints, point);
-    return distance <= HIT_DISTANCE_BUFFER;
-};
-const isHitLine = (board, element, point) => {
-    const points = getLinePoints(board, element);
-    const isHitText = isHitLineText(board, element, point);
-    return isHitText || isHitPolyLine(points, point);
-};
-const isRectangleHitDrawElement = (board, element, selection) => {
-    const rangeRectangle = RectangleClient.getRectangleByPoints([selection.anchor, selection.focus]);
-    if (PlaitDrawElement.isGeometry(element)) {
-        const client = RectangleClient.getRectangleByPoints(element.points);
-        const centerPoint = RectangleClient.getCenterPoint(client);
-        let rotatedCornerPoints = rotatePoints(RectangleClient.getCornerPoints(client), centerPoint, element.angle);
-        if (isTextExceedingBounds(element)) {
-            const textClient = getTextRectangle(element);
-            rotatedCornerPoints = rotatePoints(RectangleClient.getCornerPoints(textClient), centerPoint, element.angle);
-        }
-        return isPolylineHitRectangle(rotatedCornerPoints, rangeRectangle);
-    }
-    if (PlaitDrawElement.isImage(element)) {
-        const client = RectangleClient.getRectangleByPoints(element.points);
-        const rotatedCornerPoints = rotatePoints(RectangleClient.getCornerPoints(client), RectangleClient.getCenterPoint(client), element.angle);
-        return isPolylineHitRectangle(rotatedCornerPoints, client);
-    }
-    if (PlaitDrawElement.isLine(element)) {
-        const points = getLinePoints(board, element);
-        return isPolylineHitRectangle(points, rangeRectangle);
-    }
-    return null;
-};
-const isHitDrawElement = (board, element, point) => {
-    const rectangle = board.getRectangle(element);
-    const centerPoint = RectangleClient.getCenterPoint(rectangle);
-    if (element.angle) {
-        point = rotate(point[0], point[1], centerPoint[0], centerPoint[1], -element.angle);
-    }
-    if (PlaitDrawElement.isGeometry(element)) {
-        const fill = getFillByElement(board, element);
-        const engine = getEngine(getShape(element));
-        const nearestPoint = engine.getNearestPoint(rectangle, point);
-        const distance = distanceBetweenPointAndPoint(nearestPoint[0], nearestPoint[1], point[0], point[1]);
-        const isHitEdge = distance <= HIT_DISTANCE_BUFFER;
-        if (isHitEdge) {
-            return isHitEdge;
-        }
-        // when shape equals text, fill is not allowed
-        if (fill !== DefaultGeometryStyle.fill && fill !== TRANSPARENT && !PlaitDrawElement.isText(element)) {
-            const isHitInside = engine.isInsidePoint(rectangle, point);
-            if (isHitInside) {
-                return isHitInside;
-            }
-        }
-        else {
-            // if shape equals text, only check text rectangle
-            if (PlaitDrawElement.isText(element)) {
-                const textClient = getTextRectangle(element);
-                let isHitText = RectangleClient.isPointInRectangle(textClient, point);
-                return isHitText;
-            }
-            // check textRectangle of element
-            const textClient = engine.getTextRectangle ? engine.getTextRectangle(element) : getTextRectangle(element);
-            const isHitTextRectangle = RectangleClient.isPointInRectangle(textClient, point);
-            if (isHitTextRectangle) {
-                return isHitTextRectangle;
-            }
-        }
-    }
-    if (PlaitDrawElement.isImage(element)) {
-        return isRectangleHitDrawElement(board, element, { anchor: point, focus: point });
-    }
-    if (PlaitDrawElement.isLine(element)) {
-        return isHitLine(board, element, point);
-    }
-    return null;
-};
-const isHitElementInside = (board, element, point) => {
-    const rectangle = board.getRectangle(element);
-    const centerPoint = RectangleClient.getCenterPoint(rectangle);
-    if (element.angle) {
-        point = rotate(point[0], point[1], centerPoint[0], centerPoint[1], -element.angle);
-    }
-    if (PlaitDrawElement.isGeometry(element)) {
-        const engine = getEngine(getShape(element));
-        const isHitInside = engine.isInsidePoint(rectangle, point);
-        if (isHitInside) {
-            return isHitInside;
-        }
-        if (engine.getTextRectangle) {
-            const textClient = engine.getTextRectangle(element);
-            const isHitTextRectangle = RectangleClient.isPointInRectangle(textClient, point);
-            if (isHitTextRectangle) {
-                return isHitTextRectangle;
-            }
-        }
-    }
-    if (PlaitDrawElement.isImage(element)) {
-        return isRectangleHitDrawElement(board, element, { anchor: point, focus: point });
-    }
-    if (PlaitDrawElement.isLine(element)) {
-        return isHitLine(board, element, point);
-    }
-    return null;
-};
-
 const getCenterPointsOnPolygon$1 = (points) => {
     const centerPoints = [];
     for (let i = 0; i < points.length; i++) {
@@ -2317,36 +2357,45 @@ const getTextRectangle = (element) => {
         y: elementRectangle.y + (elementRectangle.height - height) / 2
     };
 };
-const drawBoundMask = (board, element) => {
-    const G = createG();
+const drawBoundReaction = (board, element, options = { hasMask: true, hasConnector: true }) => {
+    const g = createG();
     const rectangle = RectangleClient.getRectangleByPoints(element.points);
-    const activeRectangle = RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH);
-    const shape = getShape(element);
-    const maskG = drawGeometry(board, activeRectangle, shape, {
+    const activeRectangle = RectangleClient.inflate(rectangle, SNAPPING_STROKE_WIDTH);
+    const shape = getElementShape(element);
+    const strokeG = drawGeometry(board, activeRectangle, shape, {
         stroke: SELECTION_BORDER_COLOR,
-        strokeWidth: 1,
-        fill: SELECTION_FILL_COLOR,
-        fillStyle: 'solid'
+        strokeWidth: SNAPPING_STROKE_WIDTH
     });
-    G.appendChild(maskG);
-    const connectorPoints = getEngine(shape).getConnectorPoints(activeRectangle);
-    connectorPoints.forEach(point => {
-        const circleG = drawCircle(PlaitBoard.getRoughSVG(board), point, 6, {
-            stroke: '#999999',
-            strokeWidth: 1,
-            fill: '#FFF',
+    g.appendChild(strokeG);
+    if (options.hasMask) {
+        const maskG = drawGeometry(board, activeRectangle, shape, {
+            stroke: SELECTION_BORDER_COLOR,
+            strokeWidth: 0,
+            fill: SELECTION_FILL_COLOR,
             fillStyle: 'solid'
         });
-        G.appendChild(circleG);
-    });
-    return G;
+        g.appendChild(maskG);
+    }
+    if (options.hasConnector) {
+        const connectorPoints = getEngine(shape).getConnectorPoints(rectangle);
+        connectorPoints.forEach(point => {
+            const circleG = drawCircle(PlaitBoard.getRoughSVG(board), point, 8, {
+                stroke: SELECTION_BORDER_COLOR,
+                strokeWidth: ACTIVE_STROKE_WIDTH,
+                fill: '#FFF',
+                fillStyle: 'solid'
+            });
+            g.appendChild(circleG);
+        });
+    }
+    return g;
 };
 const drawGeometry = (board, outerRectangle, shape, options) => {
     return getEngine(shape).draw(board, outerRectangle, options);
 };
 const getNearestPoint = (element, point) => {
     const rectangle = RectangleClient.getRectangleByPoints(element.points);
-    const shape = getShape(element);
+    const shape = getElementShape(element);
     return getEngine(shape).getNearestPoint(rectangle, point);
 };
 const getCenterPointsOnPolygon = (points) => {
@@ -2537,24 +2586,36 @@ const getLineHandleRefPair = (board, element) => {
     if (sourceBoundElement) {
         const connectionOffset = PlaitLine.isSourceMarkOrTargetMark(element, LineMarkerType.none, LineHandleKey.source) ? 0 : strokeWidth;
         const sourceVector = getVectorByConnection(sourceBoundElement, element.source.connection);
-        const direction = getDirectionByVector(sourceVector);
-        sourceDirection = direction ? direction : sourceDirection;
-        sourcePoint = getConnectionPoint(sourceBoundElement, element.source.connection, sourceDirection, connectionOffset);
+        sourceHandleRef.vector = sourceVector;
         sourceHandleRef.boundElement = sourceBoundElement;
+        if (hasValidAngle(sourceBoundElement)) {
+            const direction = getDirectionByVector(rotateVector(sourceVector, sourceBoundElement.angle));
+            sourceDirection = direction ? direction : sourceDirection;
+        }
+        else {
+            const direction = getDirectionByVector(sourceVector);
+            sourceDirection = direction ? direction : sourceDirection;
+        }
         sourceHandleRef.direction = sourceDirection;
-        sourceHandleRef.point = sourcePoint;
-        sourceHandleRef.vector = sourceVector;
+        sourcePoint = getConnectionPoint(sourceBoundElement, element.source.connection, sourceDirection, connectionOffset);
+        sourceHandleRef.point = rotatePointsByElement(sourcePoint, sourceBoundElement) || sourcePoint;
     }
     if (targetBoundElement) {
         const connectionOffset = PlaitLine.isSourceMarkOrTargetMark(element, LineMarkerType.none, LineHandleKey.target) ? 0 : strokeWidth;
         const targetVector = getVectorByConnection(targetBoundElement, element.target.connection);
-        const direction = getDirectionByVector(targetVector);
-        targetDirection = direction ? direction : targetDirection;
-        targetPoint = getConnectionPoint(targetBoundElement, element.target.connection, targetDirection, connectionOffset);
+        targetHandleRef.vector = targetVector;
         targetHandleRef.boundElement = targetBoundElement;
+        if (hasValidAngle(targetBoundElement)) {
+            const direction = getDirectionByVector(rotateVector(targetVector, targetBoundElement.angle));
+            targetDirection = direction ? direction : targetDirection;
+        }
+        else {
+            const direction = getDirectionByVector(targetVector);
+            targetDirection = direction ? direction : targetDirection;
+        }
         targetHandleRef.direction = targetDirection;
-        targetHandleRef.point = targetPoint;
-        targetHandleRef.vector = targetVector;
+        targetPoint = getConnectionPoint(targetBoundElement, element.target.connection, targetDirection, connectionOffset);
+        targetHandleRef.point = rotatePointsByElement(targetPoint, targetBoundElement) || targetPoint;
     }
     return { source: sourceHandleRef, target: targetHandleRef };
 };
@@ -2571,7 +2632,7 @@ const getConnectionPoint = (geometry, connection, direction, delta) => {
 };
 const getVectorByConnection = (boundElement, connection) => {
     const rectangle = RectangleClient.getRectangleByPoints(boundElement.points);
-    const shape = getShape(boundElement);
+    const shape = getElementShape(boundElement);
     const engine = getEngine(shape);
     let vector = [0, 0];
     const direction = getDirectionByPointOfRectangle(connection);
@@ -2659,12 +2720,24 @@ const PlaitLine = {
         return line.target.boundId === element.id;
     },
     getPoints(board, line) {
-        let sourcePoint = line.source.boundId
-            ? getConnectionPoint(getElementById(board, line.source.boundId), line.source.connection)
-            : line.points[0];
-        let targetPoint = line.target.boundId
-            ? getConnectionPoint(getElementById(board, line.target.boundId), line.target.connection)
-            : line.points[line.points.length - 1];
+        let sourcePoint;
+        if (line.source.boundId) {
+            const sourceElement = getElementById(board, line.source.boundId);
+            const sourceConnectionPoint = getConnectionPoint(sourceElement, line.source.connection);
+            sourcePoint = rotatePointsByElement(sourceConnectionPoint, sourceElement) || sourceConnectionPoint;
+        }
+        else {
+            sourcePoint = line.points[0];
+        }
+        let targetPoint;
+        if (line.target.boundId) {
+            const targetElement = getElementById(board, line.target.boundId);
+            const targetConnectionPoint = getConnectionPoint(targetElement, line.target.connection);
+            targetPoint = rotatePointsByElement(targetConnectionPoint, targetElement) || targetConnectionPoint;
+        }
+        else {
+            targetPoint = line.points[line.points.length - 1];
+        }
         const restPoints = line.points.length > 2 ? line.points.slice(1, line.points.length - 1) : [];
         return [sourcePoint, ...restPoints, targetPoint];
     }
@@ -2704,7 +2777,7 @@ const PlaitDrawElement = {
             return false;
         }
     },
-    isShape: (value) => {
+    isShapeElement: (value) => {
         return PlaitDrawElement.isImage(value) || PlaitDrawElement.isGeometry(value);
     },
     isBasicShape: (value) => {
@@ -2790,7 +2863,7 @@ const collectLineUpdatedRefsByGeometry = (board, geometry, refs) => {
             const object = { ...line[handle] };
             const linePoints = getLinePoints(board, line);
             const point = isSourceBound ? linePoints[0] : linePoints[linePoints.length - 1];
-            object.connection = getConnectionByNearestPoint(board, point, geometry);
+            object.connection = getHitConnection(board, point, geometry);
             const path = PlaitBoard.findPath(board, line);
             const index = refs.findIndex(obj => Path.equals(obj.path, path));
             if (index === -1) {
@@ -2810,7 +2883,7 @@ const collectLineUpdatedRefsByGeometry = (board, geometry, refs) => {
 const connectLineToGeometry = (board, lineElement, handle, geometryElement) => {
     const linePoints = PlaitLine.getPoints(board, lineElement);
     const point = handle === LineHandleKey.source ? linePoints[0] : linePoints[linePoints.length - 1];
-    const connection = getConnectionByNearestPoint(board, point, geometryElement);
+    const connection = getHitConnection(board, point, geometryElement);
     if (connection) {
         let source = lineElement.source;
         let target = lineElement.target;
@@ -3235,6 +3308,8 @@ class LineActiveGenerator extends Generator {
     }
 }
 
+const debugKey$2 = 'debug:plait:line-turning';
+const debugGenerator$2 = createDebugGenerator(debugKey$2);
 class LineComponent extends CommonPluginElement {
     constructor(viewContainerRef, cdr) {
         super(cdr);
@@ -3259,21 +3334,7 @@ class LineComponent extends CommonPluginElement {
         super.ngOnInit();
         this.boundedElements = this.getBoundedElements();
         this.drawText();
-        // const points = this.element.points;
-        // points.forEach((p, index) => {
-        //     if (index === 0) {
-        //         return;
-        //     }
-        //     if (index === points.length - 1) {
-        //         return;
-        //     }
-        //     const dataPointG = PlaitBoard.getRoughSVG(this.board).circle(p[0], p[1], 8 * index, {
-        //         stroke: '#f08c02',
-        //         fill: '#f08c02',
-        //         fillStyle: 'solid'
-        //     });
-        //     PlaitBoard.getElementActiveHost(this.board).append(dataPointG);
-        // });
+        debugGenerator$2.isDebug() && debugGenerator$2.drawCircles(this.board, this.element.points.slice(1, -1), 4, true);
     }
     getBoundedElements() {
         const boundedElements = {};
@@ -3429,10 +3490,13 @@ const withDrawHotkey = (board) => {
     };
     board.dblClick = (event) => {
         event.preventDefault();
-        const geometries = getSelectedGeometryElements(board);
-        if (!PlaitBoard.isReadonly(board) && geometries.length === 1) {
-            const component = PlaitElement.getComponent(geometries[0]);
-            component.editText();
+        if (!PlaitBoard.isReadonly(board)) {
+            const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
+            const hitElement = getHitElementByPoint(board, point);
+            if (hitElement && PlaitDrawElement.isGeometry(hitElement)) {
+                const component = PlaitElement.getComponent(hitElement);
+                component.editText();
+            }
         }
         dblClick(event);
     };
@@ -3739,7 +3803,7 @@ const withLineCreateByDraw = (board) => {
         if (!PlaitBoard.isReadonly(board) && isLinePointer && isDrawingMode(board)) {
             const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
             start = point;
-            const hitElement = getHitOutlineGeometry(board, point, REACTION_MARGIN);
+            const hitElement = getSnappingGeometry(board, point);
             if (hitElement) {
                 sourceElement = hitElement;
             }
@@ -3775,14 +3839,17 @@ const withLineCreateByDraw = (board) => {
     return board;
 };
 
+const debugKey$1 = 'debug:plait:align-for-geometry';
+const debugGenerator$1 = createDebugGenerator(debugKey$1);
 const ALIGN_TOLERANCE = 2;
 const EQUAL_SPACING = 10;
 const ALIGN_SPACING = 24;
-class ResizeAlignReaction {
+class ResizeSnapReaction {
     constructor(board, activeElements) {
         this.board = board;
         this.activeElements = activeElements;
         this.alignRectangles = this.getAlignRectangle();
+        this.angle = getSelectionAngle(activeElements);
     }
     getAlignRectangle() {
         const elements = findElements(this.board, {
@@ -3790,19 +3857,22 @@ class ResizeAlignReaction {
             recursion: () => false,
             isReverse: false
         });
-        return elements.map(item => this.board.getRectangle(item));
+        return elements.map(item => getRectangleByAngle(this.board.getRectangle(item), item.angle) || this.board.getRectangle(item));
     }
-    getAlignLineRef(resizeAlignDelta, resizeAlignOptions) {
+    getSnapRef(resizeAlignDelta, resizeSnapOptions) {
         const { deltaX, deltaY } = resizeAlignDelta;
-        const { resizeState, originPoint, handlePoint, isFromCorner, isAspectRatio, resizeOriginPoints } = resizeAlignOptions;
+        const { resizeState, originPoint, handlePoint, isFromCorner, isAspectRatio, resizeOriginPoints } = resizeSnapOptions;
         const newResizeState = {
             ...resizeState,
             endPoint: [resizeState.endPoint[0] + deltaX, resizeState.endPoint[1] + deltaY]
         };
         const { xZoom, yZoom } = getResizeZoom(newResizeState, originPoint, handlePoint, isFromCorner, isAspectRatio);
-        const activePoints = resizeOriginPoints.map(p => {
+        let activePoints = resizeOriginPoints.map(p => {
             return movePointByZoomAndOriginPoint(p, originPoint, xZoom, yZoom);
         });
+        if (this.angle) {
+            activePoints = resetPointsAfterResize(RectangleClient.getRectangleByPoints(resizeOriginPoints), RectangleClient.getRectangleByPoints(activePoints), RectangleClient.getCenterPoint(RectangleClient.getRectangleByPoints(resizeOriginPoints)), RectangleClient.getCenterPoint(RectangleClient.getRectangleByPoints(activePoints)), this.angle);
+        }
         return {
             deltaX,
             deltaY,
@@ -3811,40 +3881,41 @@ class ResizeAlignReaction {
             activePoints
         };
     }
-    getEqualLineDelta(resizeAlignOptions) {
+    getEqualLineDelta(resizeSnapOptions) {
         let equalLineDelta = {
             deltaX: 0,
             deltaY: 0
         };
-        const { isAspectRatio, activeRectangle } = resizeAlignOptions;
+        const { isAspectRatio, activeRectangle } = resizeSnapOptions;
         const widthAlignRectangle = this.alignRectangles.find(item => Math.abs(item.width - activeRectangle.width) < ALIGN_TOLERANCE);
         if (widthAlignRectangle) {
             const deltaWidth = widthAlignRectangle.width - activeRectangle.width;
-            equalLineDelta.deltaX = deltaWidth * resizeAlignOptions.directionFactors[0];
+            equalLineDelta.deltaX = deltaWidth * resizeSnapOptions.directionFactors[0];
             if (isAspectRatio) {
                 const deltaHeight = deltaWidth / (activeRectangle.width / activeRectangle.height);
-                equalLineDelta.deltaY = deltaHeight * resizeAlignOptions.directionFactors[1];
+                equalLineDelta.deltaY = deltaHeight * resizeSnapOptions.directionFactors[1];
                 return equalLineDelta;
             }
         }
         const heightAlignRectangle = this.alignRectangles.find(item => Math.abs(item.height - activeRectangle.height) < ALIGN_TOLERANCE);
         if (heightAlignRectangle) {
             const deltaHeight = heightAlignRectangle.height - activeRectangle.height;
-            equalLineDelta.deltaY = deltaHeight * resizeAlignOptions.directionFactors[1];
+            equalLineDelta.deltaY = deltaHeight * resizeSnapOptions.directionFactors[1];
             if (isAspectRatio) {
                 const deltaWidth = deltaHeight * (activeRectangle.width / activeRectangle.height);
-                equalLineDelta.deltaX = deltaWidth * resizeAlignOptions.directionFactors[0];
+                equalLineDelta.deltaX = deltaWidth * resizeSnapOptions.directionFactors[0];
                 return equalLineDelta;
             }
         }
         return equalLineDelta;
     }
-    drawEqualLines(activePoints, resizeAlignOptions) {
+    drawEqualLines(activePoints, resizeSnapOptions) {
         let widthEqualPoints = [];
         let heightEqualPoints = [];
-        const drawHorizontalLine = resizeAlignOptions.directionFactors[0] !== 0 || resizeAlignOptions.isAspectRatio;
-        const drawVerticalLine = resizeAlignOptions.directionFactors[1] !== 0 || resizeAlignOptions.isAspectRatio;
-        const activeRectangle = RectangleClient.getRectangleByPoints(activePoints);
+        const drawHorizontalLine = resizeSnapOptions.directionFactors[0] !== 0 || resizeSnapOptions.isAspectRatio;
+        const drawVerticalLine = resizeSnapOptions.directionFactors[1] !== 0 || resizeSnapOptions.isAspectRatio;
+        const activeRectangle = getRectangleByAngle(RectangleClient.getRectangleByPoints(activePoints), this.angle) ||
+            RectangleClient.getRectangleByPoints(activePoints);
         for (let alignRectangle of this.alignRectangles) {
             if (activeRectangle.width === alignRectangle.width && drawHorizontalLine) {
                 widthEqualPoints.push(getEqualLinePoints(alignRectangle, true));
@@ -3862,12 +3933,12 @@ class ResizeAlignReaction {
         const equalLinePoints = [...widthEqualPoints, ...heightEqualPoints];
         return drawEqualLines(this.board, equalLinePoints);
     }
-    getAlignLineDelta(resizeAlignOptions) {
+    getAlignLineDelta(resizeSnapOptions) {
         let alignLineDelta = {
             deltaX: 0,
             deltaY: 0
         };
-        const { isAspectRatio, activeRectangle, directionFactors } = resizeAlignOptions;
+        const { isAspectRatio, activeRectangle, directionFactors } = resizeSnapOptions;
         const drawHorizontal = directionFactors[0] !== 0 || isAspectRatio;
         const drawVertical = directionFactors[1] !== 0 || isAspectRatio;
         if (drawHorizontal) {
@@ -3896,9 +3967,12 @@ class ResizeAlignReaction {
         }
         return alignLineDelta;
     }
-    drawAlignLines(activePoints, resizeAlignOptions) {
+    drawAlignLines(activePoints, resizeSnapOptions) {
+        debugGenerator$1.isDebug() && debugGenerator$1.clear();
         let alignLinePoints = [];
-        const activeRectangle = RectangleClient.getRectangleByPoints(activePoints);
+        const activeRectangle = getRectangleByAngle(RectangleClient.getRectangleByPoints(activePoints), this.angle) ||
+            RectangleClient.getRectangleByPoints(activePoints);
+        debugGenerator$1.isDebug() && debugGenerator$1.drawRectangle(this.board, activeRectangle, { stroke: 'green' });
         const alignAxisX = getTripleAlignAxis(activeRectangle, true);
         const alignAxisY = getTripleAlignAxis(activeRectangle, false);
         const alignLineRefs = [
@@ -3936,11 +4010,12 @@ class ResizeAlignReaction {
                 alignLinePoints.push([pointStart, pointEnd]);
             }
         };
-        const { isAspectRatio, directionFactors } = resizeAlignOptions;
+        const { isAspectRatio, directionFactors } = resizeSnapOptions;
         const drawHorizontal = directionFactors[0] !== 0 || isAspectRatio;
         const drawVertical = directionFactors[1] !== 0 || isAspectRatio;
         for (let index = 0; index < this.alignRectangles.length; index++) {
             const element = this.alignRectangles[index];
+            debugGenerator$1.isDebug() && debugGenerator$1.drawRectangle(this.board, element);
             if (isAlign(alignLineRefs[0].axis, element, alignLineRefs[0].isHorizontal)) {
                 alignLineRefs[0].alignRectangles.push(element);
             }
@@ -3980,15 +4055,15 @@ class ResizeAlignReaction {
         }
         return drawAlignLines(this.board, alignLinePoints);
     }
-    handleResizeAlign(resizeAlignOptions) {
+    handleResizeSnap(resizeSnapOptions) {
         const alignG = createG();
-        let alignLineDelta = this.getEqualLineDelta(resizeAlignOptions);
+        let alignLineDelta = this.getEqualLineDelta(resizeSnapOptions);
         if (alignLineDelta.deltaX === 0 && alignLineDelta.deltaY === 0) {
-            alignLineDelta = this.getAlignLineDelta(resizeAlignOptions);
+            alignLineDelta = this.getAlignLineDelta(resizeSnapOptions);
         }
-        const equalLineRef = this.getAlignLineRef(alignLineDelta, resizeAlignOptions);
-        const equalLinesG = this.drawEqualLines(equalLineRef.activePoints, resizeAlignOptions);
-        const alignLinesG = this.drawAlignLines(equalLineRef.activePoints, resizeAlignOptions);
+        const equalLineRef = this.getSnapRef(alignLineDelta, resizeSnapOptions);
+        const equalLinesG = this.drawEqualLines(equalLineRef.activePoints, resizeSnapOptions);
+        const alignLinesG = this.drawAlignLines(equalLineRef.activePoints, resizeSnapOptions);
         alignG.append(equalLinesG, alignLinesG);
         return { ...equalLineRef, alignG };
     }
@@ -4088,8 +4163,7 @@ function getNearestAlignRectangle(alignRectangles, activeRectangle) {
     });
     return nearestRectangle;
 }
-
-function getResizeAlignRef(board, resizeRef, resizeState, resizeOriginPointAndHandlePoint, isAspectRatio, isFromCorner) {
+function getResizeSnapRef(board, resizeRef, resizeState, resizeOriginPointAndHandlePoint, isAspectRatio, isFromCorner) {
     const { originPoint, handlePoint } = resizeOriginPointAndHandlePoint;
     const { xZoom, yZoom } = getResizeZoom(resizeState, originPoint, handlePoint, isFromCorner, isAspectRatio);
     let activeElements;
@@ -4106,11 +4180,12 @@ function getResizeAlignRef(board, resizeRef, resizeState, resizeOriginPointAndHa
     const points = resizeOriginPoints.map(p => {
         return movePointByZoomAndOriginPoint(p, originPoint, xZoom, yZoom);
     });
-    const activeRectangle = RectangleClient.getRectangleByPoints(points);
-    const resizeAlignReaction = new ResizeAlignReaction(board, activeElements);
+    const activeRectangle = getRectangleByAngle(RectangleClient.getRectangleByPoints(points), getSelectionAngle(activeElements)) ||
+        RectangleClient.getRectangleByPoints(points);
+    const resizeSnapReaction = new ResizeSnapReaction(board, activeElements);
     const resizeHandlePoint = movePointByZoomAndOriginPoint(handlePoint, originPoint, xZoom, yZoom);
     const [x, y] = getUnitVectorByPointAndPoint(originPoint, resizeHandlePoint);
-    return resizeAlignReaction.handleResizeAlign({
+    return resizeSnapReaction.handleResizeSnap({
         resizeState,
         resizeOriginPoints,
         activeRectangle,
@@ -4122,10 +4197,14 @@ function getResizeAlignRef(board, resizeRef, resizeState, resizeOriginPointAndHa
     });
 }
 
+const debugKey = 'debug:plait:resize-for-rotation';
+const debugGenerator = createDebugGenerator(debugKey);
 function withDrawResize(board) {
-    const { afterChange } = board;
+    const { afterChange, drawActiveRectangle } = board;
     let alignG;
     let handleG;
+    let needCustomActiveRectangle = false;
+    let resizeActivePoints = null;
     const canResize = () => {
         const elements = getSelectedElements(board);
         return elements.length > 1 && elements.every(el => PlaitDrawElement.isDrawElement(el));
@@ -4136,7 +4215,8 @@ function withDrawResize(board) {
         hitTest: (point) => {
             const elements = getSelectedElements(board);
             const boundingRectangle = getRectangleByElements(board, elements, false);
-            const handleRef = getHitRectangleResizeHandleRef(board, boundingRectangle, point);
+            const angle = getSelectionAngle(elements);
+            const handleRef = getHitRectangleResizeHandleRef(board, boundingRectangle, point, angle);
             if (handleRef) {
                 return {
                     element: elements,
@@ -4149,20 +4229,75 @@ function withDrawResize(board) {
         },
         onResize: (resizeRef, resizeState) => {
             alignG?.remove();
+            debugGenerator.isDebug() && debugGenerator.clear();
             const isFromCorner = isCornerHandle(board, resizeRef.handle);
             const isAspectRatio = resizeState.isShift || isFromCorner;
+            const centerPoint = RectangleClient.getCenterPoint(resizeRef.rectangle);
             const { originPoint, handlePoint } = getResizeOriginPointAndHandlePoint(board, resizeRef);
-            const resizeAlignRef = getResizeAlignRef(board, resizeRef, resizeState, {
+            const angle = getSelectionAngle(resizeRef.element);
+            let bulkRotationRef;
+            if (angle) {
+                bulkRotationRef = {
+                    angle: angle,
+                    offsetX: 0,
+                    offsetY: 0,
+                    newCenterPoint: [0, 0]
+                };
+                const [rotatedStartPoint, rotateEndPoint] = rotatePoints([resizeState.startPoint, resizeState.endPoint], centerPoint, -bulkRotationRef.angle);
+                resizeState.startPoint = rotatedStartPoint;
+                resizeState.endPoint = rotateEndPoint;
+            }
+            const resizeAlignRef = getResizeSnapRef(board, resizeRef, resizeState, {
                 originPoint,
                 handlePoint
             }, isAspectRatio, isFromCorner);
+            resizeActivePoints = resizeAlignRef.activePoints;
             alignG = resizeAlignRef.alignG;
             PlaitBoard.getElementActiveHost(board).append(alignG);
-            resizeRef.element.forEach(target => {
-                const path = PlaitBoard.findPath(board, target);
-                let points = target.points.map(p => {
+            if (bulkRotationRef) {
+                const boundingBoxCornerPoints = RectangleClient.getPoints(resizeRef.rectangle);
+                const resizedBoundingBoxCornerPoints = boundingBoxCornerPoints.map(p => {
                     return movePointByZoomAndOriginPoint(p, originPoint, resizeAlignRef.xZoom, resizeAlignRef.yZoom);
                 });
+                const newBoundingBox = RectangleClient.getRectangleByPoints(resizedBoundingBoxCornerPoints);
+                debugGenerator.isDebug() && debugGenerator.drawRectangle(board, newBoundingBox, { stroke: 'blue' });
+                const newBoundingBoxCenter = RectangleClient.getCenterPoint(newBoundingBox);
+                const adjustedNewBoundingBoxPoints = resetPointsAfterResize(RectangleClient.getRectangleByPoints(boundingBoxCornerPoints), RectangleClient.getRectangleByPoints(resizedBoundingBoxCornerPoints), centerPoint, newBoundingBoxCenter, bulkRotationRef.angle);
+                const newCenter = RectangleClient.getCenterPoint(RectangleClient.getRectangleByPoints(adjustedNewBoundingBoxPoints));
+                bulkRotationRef = Object.assign(bulkRotationRef, {
+                    offsetX: newCenter[0] - newBoundingBoxCenter[0],
+                    offsetY: newCenter[1] - newBoundingBoxCenter[1],
+                    newCenterPoint: newCenter
+                });
+                debugGenerator.isDebug() && debugGenerator.drawRectangle(board, adjustedNewBoundingBoxPoints);
+            }
+            resizeRef.element.forEach(target => {
+                const path = PlaitBoard.findPath(board, target);
+                let points;
+                if (bulkRotationRef) {
+                    const reversedPoints = rotatedDataPoints(target.points, centerPoint, -bulkRotationRef.angle);
+                    points = reversedPoints.map((p) => {
+                        return movePointByZoomAndOriginPoint(p, originPoint, resizeAlignRef.xZoom, resizeAlignRef.yZoom);
+                    });
+                    const adjustTargetPoints = points.map(p => [
+                        p[0] + bulkRotationRef.offsetX,
+                        p[1] + bulkRotationRef.offsetY
+                    ]);
+                    points = rotatedDataPoints(adjustTargetPoints, bulkRotationRef.newCenterPoint, bulkRotationRef.angle);
+                }
+                else {
+                    if (hasValidAngle(target)) {
+                        needCustomActiveRectangle = true;
+                    }
+                    if (hasValidAngle(target) && isAxisChangedByAngle(target.angle)) {
+                        points = getResizePointsByOtherwiseAxis(board, target.points, originPoint, resizeAlignRef.xZoom, resizeAlignRef.yZoom);
+                    }
+                    else {
+                        points = target.points.map(p => {
+                            return movePointByZoomAndOriginPoint(p, originPoint, resizeAlignRef.xZoom, resizeAlignRef.yZoom);
+                        });
+                    }
+                }
                 if (PlaitDrawElement.isGeometry(target)) {
                     const { height: textHeight } = getFirstTextManage(target).getSize();
                     DrawTransforms.resizeGeometry(board, points, textHeight, path);
@@ -4188,6 +4323,12 @@ function withDrawResize(board) {
         afterResize: (resizeRef) => {
             alignG?.remove();
             alignG = null;
+            if (needCustomActiveRectangle) {
+                needCustomActiveRectangle = false;
+                resizeActivePoints = null;
+                const selectedElements = getSelectedElements(board);
+                Transforms.addSelectionWithTemporaryElements(board, selectedElements);
+            }
         }
     };
     withResize(board, options);
@@ -4200,15 +4341,32 @@ function withDrawResize(board) {
         if (canResize() && !isSelectionMoving(board)) {
             handleG = createG();
             const elements = getSelectedElements(board);
-            const boundingRectangle = getRectangleByElements(board, elements, false);
-            const corners = RectangleClient.getCornerPoints(boundingRectangle);
-            corners.forEach((corner) => {
+            const boundingRectangle = needCustomActiveRectangle
+                ? RectangleClient.getRectangleByPoints(resizeActivePoints)
+                : getRectangleByElements(board, elements, false);
+            let corners = RectangleClient.getCornerPoints(boundingRectangle);
+            const angle = getSelectionAngle(elements);
+            if (angle) {
+                const centerPoint = RectangleClient.getCenterPoint(boundingRectangle);
+                corners = rotatePoints(corners, centerPoint, angle);
+            }
+            corners.forEach(corner => {
                 const g = drawHandle(board, corner);
                 handleG && handleG.append(g);
             });
             PlaitBoard.getElementActiveHost(board).append(handleG);
         }
     };
+    board.drawActiveRectangle = () => {
+        if (needCustomActiveRectangle) {
+            const rectangle = RectangleClient.getRectangleByPoints(resizeActivePoints);
+            return drawRectangle(board, RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH), {
+                stroke: SELECTION_BORDER_COLOR,
+                strokeWidth: ACTIVE_STROKE_WIDTH
+            });
+        }
+        return drawActiveRectangle();
+    };
     return board;
 }
 const getResizeOriginPointAndHandlePoint = (board, resizeRef) => {
@@ -4264,6 +4422,24 @@ const movePointByZoomAndOriginPoint = (p, resizeOriginPoint, xZoom, yZoom) => {
     const offsetY = (p[1] - resizeOriginPoint[1]) * yZoom;
     return [p[0] + offsetX, p[1] + offsetY];
 };
+/**
+ * 1. Rotate 90°
+ * 2. Scale based on the rotated points
+ * 3. Reverse rotate the scaled points by 90°
+ */
+const getResizePointsByOtherwiseAxis = (board, points, resizeOriginPoint, xZoom, yZoom) => {
+    const currentRectangle = RectangleClient.getRectangleByPoints(points);
+    debugGenerator.isDebug() && debugGenerator.drawRectangle(board, currentRectangle, { stroke: 'black' });
+    let resultPoints = points;
+    resultPoints = rotatePoints(resultPoints, RectangleClient.getCenterPoint(currentRectangle), (1 / 2) * Math.PI);
+    debugGenerator.isDebug() && debugGenerator.drawRectangle(board, resultPoints, { stroke: 'blue' });
+    resultPoints = resultPoints.map(p => {
+        return movePointByZoomAndOriginPoint(p, resizeOriginPoint, xZoom, yZoom);
+    });
+    debugGenerator.isDebug() && debugGenerator.drawRectangle(board, resultPoints);
+    const newRectangle = RectangleClient.getRectangleByPoints(resultPoints);
+    return rotatePoints(resultPoints, RectangleClient.getCenterPoint(newRectangle), -(1 / 2) * Math.PI);
+};
 
 const withGeometryResize = (board) => {
     let alignG;
@@ -4281,7 +4457,7 @@ const withGeometryResize = (board) => {
             const targetComponent = PlaitElement.getComponent(selectedElements[0]);
             if (targetComponent.activeGenerator.hasResizeHandle) {
                 const rectangle = board.getRectangle(target);
-                const handleRef = getHitRectangleResizeHandleRef(board, rectangle, point);
+                const handleRef = getHitRectangleResizeHandleRef(board, rectangle, point, target.angle);
                 if (handleRef) {
                     return {
                         element: target,
@@ -4294,11 +4470,14 @@ const withGeometryResize = (board) => {
             return null;
         },
         onResize: (resizeRef, resizeState) => {
+            const centerPoint = RectangleClient.getCenterPoint(RectangleClient.getRectangleByPoints(resizeRef.element.points));
+            resizeState.startPoint = rotateAntiPointsByElement(resizeState.startPoint, resizeRef.element) || resizeState.startPoint;
+            resizeState.endPoint = rotateAntiPointsByElement(resizeState.endPoint, resizeRef.element) || resizeState.endPoint;
             alignG?.remove();
             const isFromCorner = isCornerHandle(board, resizeRef.handle);
             const isAspectRatio = resizeState.isShift || PlaitDrawElement.isImage(resizeRef.element);
             const { originPoint, handlePoint } = getResizeOriginPointAndHandlePoint(board, resizeRef);
-            const resizeAlignRef = getResizeAlignRef(board, resizeRef, resizeState, {
+            const resizeAlignRef = getResizeSnapRef(board, resizeRef, resizeState, {
                 originPoint,
                 handlePoint
             }, isAspectRatio, isFromCorner);
@@ -4357,8 +4536,7 @@ const withLineResize = (board) => {
                 resizeRef.handle !== LineResizeHandle.source &&
                 resizeRef.handle !== LineResizeHandle.target) {
                 const params = getElbowLineRouteOptions(board, resizeRef.element);
-                const isIntersect = isSourceAndTargetIntersect(params);
-                if (isIntersect) {
+                if (isUseDefaultOrthogonalRoute(resizeRef.element, params)) {
                     return;
                 }
                 const points = [...resizeRef.element.points];
@@ -4377,12 +4555,12 @@ const withLineResize = (board) => {
             let source = { ...resizeRef.element.source };
             let target = { ...resizeRef.element.target };
             let handleIndex = resizeRef.handleIndex;
-            const hitElement = getHitOutlineGeometry(board, resizeState.endPoint, REACTION_MARGIN);
+            const hitElement = getSnappingGeometry(board, resizeState.endPoint);
             if (resizeRef.handle === LineResizeHandle.source || resizeRef.handle === LineResizeHandle.target) {
                 const object = resizeRef.handle === LineResizeHandle.source ? source : target;
                 points[handleIndex] = resizeState.endPoint;
                 if (hitElement) {
-                    object.connection = getConnectionByNearestPoint(board, resizeState.endPoint, hitElement);
+                    object.connection = getHitConnection(board, resizeState.endPoint, hitElement);
                     object.boundId = hitElement.id;
                 }
                 else {
@@ -4424,7 +4602,8 @@ const withLineResize = (board) => {
                 const newPoints = [...points];
                 newPoints[0] = drawPoints[0];
                 newPoints[newPoints.length - 1] = drawPoints[drawPoints.length - 1];
-                if (resizeRef.element.shape !== LineShape.elbow) {
+                if (resizeRef.element.shape !== LineShape.elbow ||
+                    (resizeRef.element.shape === LineShape.elbow && newPoints.length === 2)) {
                     newPoints.forEach((point, index) => {
                         if (index === handleIndex)
                             return;
@@ -4488,21 +4667,23 @@ const withLineBoundReaction = (board) => {
             return PlaitDrawElement.isLine(element) && isSourceOrTarget;
         });
         if (isLinePointer || isLineResizing) {
-            const hitElement = getHitOutlineGeometry(board, movingPoint, -4);
+            const hitElement = getHitGeometry(board, movingPoint);
             if (hitElement) {
-                boundShapeG = drawBoundMask(board, hitElement);
-                let nearestPoint = getNearestPoint(hitElement, movingPoint);
-                const rectangle = RectangleClient.getRectangleByPoints(hitElement.points);
-                const activeRectangle = RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH);
-                const hitConnector = getHitConnectorPoint(nearestPoint, hitElement, activeRectangle);
-                nearestPoint = hitConnector ? hitConnector : nearestPoint;
-                const circleG = drawCircle(PlaitBoard.getRoughSVG(board), nearestPoint, 6, {
-                    stroke: SELECTION_BORDER_COLOR,
-                    strokeWidth: ACTIVE_STROKE_WIDTH,
-                    fill: SELECTION_BORDER_COLOR,
-                    fillStyle: 'solid'
-                });
-                boundShapeG.appendChild(circleG);
+                const ref = getSnappingRef(board, hitElement, movingPoint);
+                const isSnapping = ref.isHitEdge || ref.isHitConnector;
+                boundShapeG = drawBoundReaction(board, hitElement, { hasMask: isSnapping, hasConnector: true });
+                if (isSnapping) {
+                    const circleG = drawCircle(PlaitBoard.getRoughSVG(board), ref.connectorPoint || ref.edgePoint, 6, {
+                        stroke: SELECTION_BORDER_COLOR,
+                        strokeWidth: SNAPPING_STROKE_WIDTH,
+                        fill: SELECTION_BORDER_COLOR,
+                        fillStyle: 'solid'
+                    });
+                    boundShapeG.appendChild(circleG);
+                }
+                if (hasValidAngle(hitElement)) {
+                    setAngleForG(boundShapeG, RectangleClient.getCenterPointByPoints(hitElement.points), hitElement.angle);
+                }
                 PlaitBoard.getElementActiveHost(board).append(boundShapeG);
             }
         }
@@ -4652,9 +4833,9 @@ const withLineAutoCompleteReaction = (board) => {
         const selectedElements = getSelectedDrawElements(board);
         const targetElement = selectedElements.length === 1 && selectedElements[0];
         const movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-        if (!PlaitBoard.isReadonly(board) && !isSelectionMoving(board) && targetElement && PlaitDrawElement.isShape(targetElement)) {
+        if (!PlaitBoard.isReadonly(board) && !isSelectionMoving(board) && targetElement && PlaitDrawElement.isShapeElement(targetElement)) {
             const points = getAutoCompletePoints(targetElement);
-            const hitIndex = getHitIndexOfAutoCompletePoint(movingPoint, points);
+            const hitIndex = getHitIndexOfAutoCompletePoint(rotateAntiPointsByElement(movingPoint, targetElement) || movingPoint, points);
             const hitPoint = points[hitIndex];
             const component = PlaitElement.getComponent(targetElement);
             component.lineAutoCompleteGenerator.recoverAutoCompleteG();
@@ -4667,6 +4848,9 @@ const withLineAutoCompleteReaction = (board) => {
                 });
                 PlaitBoard.getElementActiveHost(board).append(reactionG);
                 PlaitBoard.getBoardContainer(board).classList.add(CursorClass.crosshair);
+                if (hasValidAngle(targetElement)) {
+                    setAngleForG(reactionG, RectangleClient.getCenterPoint(board.getRectangle(targetElement)), targetElement.angle);
+                }
             }
         }
         pointerMove(event);
@@ -4677,7 +4861,7 @@ const withLineAutoCompleteReaction = (board) => {
 const WithLineAutoCompletePluginKey = 'plait-line-auto-complete-plugin-key';
 const withLineAutoComplete = (board) => {
     const { pointerDown, pointerMove, globalPointerUp } = board;
-    let startPoint = null;
+    let autoCompletePoint = null;
     let lineShapeG = null;
     let sourceElement;
     let temporaryElement;
@@ -4685,13 +4869,13 @@ const withLineAutoComplete = (board) => {
         const selectedElements = getSelectedDrawElements(board);
         const targetElement = selectedElements.length === 1 && selectedElements[0];
         const clickPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-        if (!PlaitBoard.isReadonly(board) && targetElement && PlaitDrawElement.isShape(targetElement)) {
+        if (!PlaitBoard.isReadonly(board) && targetElement && PlaitDrawElement.isShapeElement(targetElement)) {
             const points = getAutoCompletePoints(targetElement);
-            const index = getHitIndexOfAutoCompletePoint(clickPoint, points);
+            const index = getHitIndexOfAutoCompletePoint(rotateAntiPointsByElement(clickPoint, targetElement) || clickPoint, points);
             const hitPoint = points[index];
             if (hitPoint) {
                 temporaryDisableSelection(board);
-                startPoint = hitPoint;
+                autoCompletePoint = hitPoint;
                 sourceElement = targetElement;
                 BoardTransforms.updatePointerType(board, LineShape.elbow);
             }
@@ -4702,18 +4886,19 @@ const withLineAutoComplete = (board) => {
         lineShapeG?.remove();
         lineShapeG = createG();
         let movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-        if (startPoint && sourceElement) {
-            const distance = distanceBetweenPointAndPoint(...movingPoint, ...startPoint);
+        if (autoCompletePoint && sourceElement) {
+            const distance = distanceBetweenPointAndPoint(...(rotateAntiPointsByElement(movingPoint, sourceElement) || movingPoint), ...autoCompletePoint);
             if (distance > PRESS_AND_MOVE_BUFFER) {
                 const rectangle = RectangleClient.getRectangleByPoints(sourceElement.points);
-                const shape = getShape(sourceElement);
+                const shape = getElementShape(sourceElement);
                 const engine = getEngine(shape);
-                let sourcePoint = startPoint;
                 if (engine.getNearestCrossingPoint) {
-                    const crossingPoint = engine.getNearestCrossingPoint(rectangle, startPoint);
-                    sourcePoint = crossingPoint;
+                    const crossingPoint = engine.getNearestCrossingPoint(rectangle, autoCompletePoint);
+                    autoCompletePoint = crossingPoint;
                 }
-                temporaryElement = handleLineCreating(board, LineShape.elbow, sourcePoint, movingPoint, sourceElement, lineShapeG);
+                // source point must be click point
+                const rotatedSourcePoint = rotatePointsByElement(autoCompletePoint, sourceElement) || autoCompletePoint;
+                temporaryElement = handleLineCreating(board, LineShape.elbow, rotatedSourcePoint, movingPoint, sourceElement, lineShapeG);
             }
         }
         pointerMove(event);
@@ -4727,9 +4912,9 @@ const withLineAutoComplete = (board) => {
                 ?.afterComplete;
             afterComplete && afterComplete(temporaryElement);
         }
-        if (startPoint) {
+        if (autoCompletePoint) {
             BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
-            startPoint = null;
+            autoCompletePoint = null;
         }
         lineShapeG?.remove();
         lineShapeG = null;
@@ -4787,66 +4972,6 @@ const withLineTextMove = (board) => {
     return board;
 };
 
-class GroupGenerator extends Generator {
-    canDraw(element) {
-        return true;
-    }
-    draw(element, partialSelected) {
-        const options = {
-            stroke: '',
-            strokeWidth: ACTIVE_STROKE_WIDTH,
-            strokeLineDash: [5]
-        };
-        if (partialSelected) {
-            options.stroke = '#999';
-        }
-        const rectangle = getRectangleByGroup(this.board, element, true);
-        return drawRectangle(this.board, rectangle, options);
-    }
-}
-
-class GroupComponent extends CommonPluginElement {
-    constructor(viewContainerRef, cdr) {
-        super(cdr);
-        this.viewContainerRef = viewContainerRef;
-        this.cdr = cdr;
-    }
-    initializeGenerator() {
-        this.activeGenerator = new ActiveGenerator(this.board, {
-            getRectangle: (element) => {
-                return getRectangleByGroup(this.board, element);
-            },
-            getStrokeWidth: () => 0,
-            getStrokeOpacity: () => 0,
-            hasResizeHandle: () => {
-                return !isSelectionMoving(this.board);
-            }
-        });
-        this.groupGenerator = new GroupGenerator(this.board);
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        this.initializeGenerator();
-    }
-    onContextChanged(value, previous) {
-        const elementsInGroup = getElementsInGroup(this.board, value.element, false, true);
-        const isPartialSelectGroup = elementsInGroup.some(item => isSelectedElementOrGroup(this.board, item)) &&
-            !elementsInGroup.every(item => isSelectedElementOrGroup(this.board, item));
-        this.groupGenerator.processDrawing(value.element, this.g, isPartialSelectGroup);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GroupComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: GroupComponent, isStandalone: true, selector: "plait-group", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GroupComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'plait-group',
-                    template: ``,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }] });
-
 const withDraw = (board) => {
     const { drawElement, getRectangle, isRectangleHit, isHit, isInsidePoint, isMovable, isAlign, getRelatedFragment } = board;
     board.drawElement = (context) => {
@@ -4859,9 +4984,6 @@ const withDraw = (board) => {
         else if (PlaitDrawElement.isImage(context.element)) {
             return ImageComponent;
         }
-        else if (PlaitGroupElement.isGroup(context.element)) {
-            return GroupComponent;
-        }
         return drawElement(context);
     };
     board.getRectangle = (element) => {
@@ -4880,9 +5002,6 @@ const withDraw = (board) => {
         if (PlaitDrawElement.isImage(element)) {
             return RectangleClient.getRectangleByPoints(element.points);
         }
-        if (PlaitGroupElement.isGroup(element)) {
-            return getRectangleByGroup(board, element);
-        }
         return getRectangle(element);
     };
     board.isRectangleHit = (element, selection) => {
@@ -4937,8 +5056,8 @@ const withDraw = (board) => {
         }
         return isAlign(element);
     };
-    board.getRelatedFragment = (elements) => {
-        const selectedElements = getSelectedElements(board);
+    board.getRelatedFragment = (elements, originData) => {
+        const selectedElements = originData || getSelectedElements(board);
         const lineElements = board.children.filter(element => PlaitDrawElement.isLine(element));
         const activeLines = lineElements.filter(line => {
             const source = selectedElements.find(element => element.id === line.source.boundId);
@@ -4946,7 +5065,7 @@ const withDraw = (board) => {
             const isSelected = selectedElements.includes(line);
             return source && target && !isSelected;
         });
-        return getRelatedFragment([...elements, ...activeLines]);
+        return getRelatedFragment([...elements, ...activeLines], originData);
     };
     return withDrawResize(withLineTextMove(withLineAutoCompleteReaction(withLineText(withLineBoundReaction(withLineResize(withGeometryResize(withLineCreateByDraw(withLineAutoComplete(withGeometryCreateByDrag(withGeometryCreateByDrawing(withDrawFragment(withDrawHotkey(board)))))))))))));
 };
@@ -4955,5 +5074,5 @@ const withDraw = (board) => {
  * Generated bundle index. Do not edit.
  */
 
-export { BasicShapes, DEFAULT_IMAGE_WIDTH, DefaultBasicShapeProperty, DefaultConnectorProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultGeometryActiveStyle, DefaultGeometryStyle, DefaultManualInputProperty, DefaultMergeProperty, DefaultTextProperty, DrawThemeColors, DrawTransforms, FlowchartSymbols, GeometryComponent, GeometryThreshold, LineComponent, LineHandleKey, LineMarkerType, LineShape, MemorizeKey, PlaitDrawElement, PlaitGeometry, PlaitLine, Q2C, REACTION_MARGIN, ShapeDefaultSpace, StrokeStyle, WithLineAutoCompletePluginKey, alignElbowSegment, alignPoints, createDefaultFlowchart, createDefaultGeometry, createGeometryElement, createLineElement, createTextElement, drawBoundMask, drawGeometry, drawLine, drawLineArrow, getAutoCompletePoints, getBasicPointers, getCenterPointsOnPolygon, getConnectionByNearestPoint, getConnectionPoint, getCurvePoints, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultTextPoints, getDrawDefaultStrokeColor, getElbowLineRouteOptions, getElbowPoints, getFillByElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryPointers, getHitConnectorPoint, getHitIndexOfAutoCompletePoint, getIndexAndDeleteCountByKeyPoint, getLineDashByElement, getLineHandleRefPair, getLineMemorizedLatest, getLinePointers, getLinePoints, getLineTextRectangle, getLines, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getMidKeyPoints, getMiddlePoints, getMirrorDataPoints, getNearestPoint, getNextRenderPoints, getNextSourceAndTargetPoints, getResizedPreviousAndNextPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedLineElements, getSourceAndTargetRectangle, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getTextRectangle, getTextShapeProperty, getVectorByConnection, handleLineCreating, hasIllegalElbowPoint, insertElement, isHitDrawElement, isHitElementInside, isHitLine, isHitLineText, isHitPolyLine, isRectangleHitDrawElement, isTextExceedingBounds, isUpdatedHandleIndex, memorizeLatestShape, memorizeLatestText, withDraw, withLineAutoComplete };
+export { BasicShapes, DEFAULT_IMAGE_WIDTH, DefaultBasicShapeProperty, DefaultConnectorProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultGeometryActiveStyle, DefaultGeometryStyle, DefaultManualInputProperty, DefaultMergeProperty, DefaultTextProperty, DrawThemeColors, DrawTransforms, FlowchartSymbols, GeometryComponent, GeometryThreshold, LINE_HIT_GEOMETRY_BUFFER, LINE_SNAPPING_BUFFER, LINE_SNAPPING_CONNECTOR_BUFFER, LineComponent, LineHandleKey, LineMarkerType, LineShape, MemorizeKey, PlaitDrawElement, PlaitGeometry, PlaitLine, Q2C, ShapeDefaultSpace, StrokeStyle, WithLineAutoCompletePluginKey, alignElbowSegment, alignPoints, createDefaultFlowchart, createDefaultGeometry, createGeometryElement, createLineElement, createTextElement, drawBoundReaction, drawGeometry, drawLine, drawLineArrow, getAutoCompletePoints, getBasicPointers, getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultTextPoints, getDrawDefaultStrokeColor, getElbowLineRouteOptions, getElbowPoints, getFillByElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryPointers, getHitConnection, getHitConnectorPoint, getHitIndexOfAutoCompletePoint, getIndexAndDeleteCountByKeyPoint, getLineDashByElement, getLineHandleRefPair, getLineMemorizedLatest, getLinePointers, getLinePoints, getLineTextRectangle, getLines, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getMidKeyPoints, getMiddlePoints, getMirrorDataPoints, getNearestPoint, getNextRenderPoints, getNextSourceAndTargetPoints, getResizedPreviousAndNextPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedLineElements, getSourceAndTargetRectangle, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getTextRectangle, getTextShapeProperty, getVectorByConnection, handleLineCreating, hasIllegalElbowPoint, insertElement, isHitDrawElement, isHitEdgeOfShape, isHitElementInside, isHitLine, isHitLineText, isHitPolyLine, isInsideOfShape, isRectangleHitDrawElement, isSelfLoop, isTextExceedingBounds, isUpdatedHandleIndex, isUseDefaultOrthogonalRoute, memorizeLatestShape, memorizeLatestText, withDraw, withLineAutoComplete };
 //# sourceMappingURL=plait-draw.mjs.map