@plait/draw 0.53.0 → 0.54.0

package/fesm2022/plait-draw.mjs

@@ -1,5 +1,5 @@
-import { ACTIVE_STROKE_WIDTH, ThemeColorMode, createDebugGenerator, Point, RectangleClient, getElementById, rotatePointsByElement, createG, arrowPoints, createPath, distanceBetweenPointAndPoint, drawLinearPath, rotate, rotatePoints, depthFirstRecursion, rotateAntiPointsByElement, getIsRecursionFunc, idCreator, catmullRomFitting, PlaitBoard, findElements, createMask, createRect, getSelectedElements, distanceBetweenPointAndSegments, HIT_DISTANCE_BUFFER, isPolylineHitRectangle, isPointInPolygon, setStrokeLinecap, getNearestPointBetweenPointAndSegments, isPointInEllipse, getEllipseTangentSlope, getVectorFromPointAndSlope, drawRectangle, drawRoundRectangle, isPointInRoundRectangle, 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, getRectangleByElements, getSelectionAngle, rotatedDataPoints, setAngleForG, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER } from '@plait/core';
-import { removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, isSourceAndTargetIntersect, getPoints, getPointByVectorComponent, getExtendPoint, getUnitVectorByPointAndPoint, Generator, getRectangleResizeHandleRefs, RESIZE_HANDLE_DIAMETER, getMemorizedLatest, memorizeLatest, getPointOnPolyline, TRANSPARENT, 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, getDirectionFactorByDirectionComponent, isCornerHandle, resetPointsAfterResize, 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,8 +168,8 @@ const LINE_AUTO_COMPLETE_HOVERED_OPACITY = 0.8;
 const LINE_AUTO_COMPLETE_HOVERED_DIAMETER = 10;
 const LINE_ALIGN_TOLERANCE = 3;
 
-const debugKey$2 = 'debug:plait:line-mirror';
-const debugGenerator$2 = createDebugGenerator(debugKey$2);
+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)) {
@@ -304,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);
@@ -431,7 +433,7 @@ function findOrthogonalParallelSegments(segment, keyPoints) {
     return parallelSegments;
 }
 function findMirrorSegments(board, segment, parallelSegments, sourceRectangle, targetRectangle) {
-    debugGenerator$2.isDebug() && debugGenerator$2.clear();
+    debugGenerator$3.isDebug() && debugGenerator$3.clear();
     const mirrorSegments = [];
     for (let index = 0; index < parallelSegments.length; index++) {
         const parallelPath = parallelSegments[index];
@@ -445,7 +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]);
-            debugGenerator$2.isDebug() && debugGenerator$2.drawPolygon(board, RectangleClient.getCornerPoints(fakeRectangle));
+            debugGenerator$3.isDebug() && debugGenerator$3.drawPolygon(board, RectangleClient.getCornerPoints(fakeRectangle));
         }
     }
     return mirrorSegments;
@@ -471,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);
@@ -692,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;
     }
@@ -710,29 +717,238 @@ class LineShapeGenerator extends Generator {
     }
 }
 
+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 rotatedPoint = rotatePoints([point], centerPoint, -angle)[0];
-    const resizeHandleRefs = getRectangleResizeHandleRefs(rectangle, RESIZE_HANDLE_DIAMETER, angle);
-    const result = resizeHandleRefs.find(resizeHandleRef => {
-        return RectangleClient.isHit(RectangleClient.getRectangleByPoints([rotatedPoint, rotatedPoint]), resizeHandleRef.rectangle);
+    const resizeHandleRefs = getRectangleResizeHandleRefs(rectangle, RESIZE_HANDLE_DIAMETER);
+    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, rotateAntiPointsByElement(point, node) || point);
-            if (isHit) {
-                geometry = node;
-            }
+        if (!PlaitBoard.isBoard(node) && PlaitDrawElement.isShapeElement(node)) {
+            callback(node);
         }
     }, getIsRecursionFunc(board), true);
-    return geometry;
 };
 
 const SHAPE_MAX_LENGTH = 6;
@@ -910,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)) ||
@@ -951,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) => {
@@ -1001,13 +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, rotateAntiPointsByElement(movingPoint, hitElement) || movingPoint, hitElement)
-        : undefined;
-    const sourceConnection = sourceElement
-        ? getConnectionByNearestPoint(board, rotateAntiPointsByElement(sourcePoint, sourceElement) || 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();
@@ -1070,187 +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, 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);
-    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)) {
-        const client = RectangleClient.getRectangleByPoints(element.points);
-        const rotatedCornerPoints = rotatePoints(RectangleClient.getCornerPoints(client), RectangleClient.getCenterPoint(client), element.angle);
-        return isPointInPolygon(point, rotatedCornerPoints);
-    }
-    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++) {
@@ -2329,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) => {
@@ -2595,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);
@@ -2740,7 +2777,7 @@ const PlaitDrawElement = {
             return false;
         }
     },
-    isShape: (value) => {
+    isShapeElement: (value) => {
         return PlaitDrawElement.isImage(value) || PlaitDrawElement.isGeometry(value);
     },
     isBasicShape: (value) => {
@@ -2826,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) {
@@ -2846,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;
@@ -3271,8 +3308,8 @@ class LineActiveGenerator extends Generator {
     }
 }
 
-const debugKey$1 = 'debug:plait:line-turning';
-const debugGenerator$1 = createDebugGenerator(debugKey$1);
+const debugKey$2 = 'debug:plait:line-turning';
+const debugGenerator$2 = createDebugGenerator(debugKey$2);
 class LineComponent extends CommonPluginElement {
     constructor(viewContainerRef, cdr) {
         super(cdr);
@@ -3297,7 +3334,7 @@ class LineComponent extends CommonPluginElement {
         super.ngOnInit();
         this.boundedElements = this.getBoundedElements();
         this.drawText();
-        debugGenerator$1.isDebug() && debugGenerator$1.drawCircles(this.board, this.element.points.slice(1, -1), 4, true);
+        debugGenerator$2.isDebug() && debugGenerator$2.drawCircles(this.board, this.element.points.slice(1, -1), 4, true);
     }
     getBoundedElements() {
         const boundedElements = {};
@@ -3766,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;
             }
@@ -3802,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, {
@@ -3817,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,
@@ -3838,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));
@@ -3889,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) {
@@ -3923,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 = [
@@ -3963,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);
             }
@@ -4007,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 };
     }
@@ -4115,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;
@@ -4133,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,
@@ -4152,9 +4200,11 @@ 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));
@@ -4197,10 +4247,11 @@ function withDrawResize(board) {
                 resizeState.startPoint = rotatedStartPoint;
                 resizeState.endPoint = rotateEndPoint;
             }
-            const resizeAlignRef = getResizeAlignRef(board, resizeRef, resizeState, {
+            const resizeAlignRef = getResizeSnapRef(board, resizeRef, resizeState, {
                 originPoint,
                 handlePoint
             }, isAspectRatio, isFromCorner);
+            resizeActivePoints = resizeAlignRef.activePoints;
             alignG = resizeAlignRef.alignG;
             PlaitBoard.getElementActiveHost(board).append(alignG);
             if (bulkRotationRef) {
@@ -4235,9 +4286,17 @@ function withDrawResize(board) {
                     points = rotatedDataPoints(adjustTargetPoints, bulkRotationRef.newCenterPoint, bulkRotationRef.angle);
                 }
                 else {
-                    points = target.points.map(p => {
-                        return movePointByZoomAndOriginPoint(p, originPoint, resizeAlignRef.xZoom, resizeAlignRef.yZoom);
-                    });
+                    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();
@@ -4264,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);
@@ -4276,7 +4341,9 @@ function withDrawResize(board) {
         if (canResize() && !isSelectionMoving(board)) {
             handleG = createG();
             const elements = getSelectedElements(board);
-            const boundingRectangle = getRectangleByElements(board, elements, false);
+            const boundingRectangle = needCustomActiveRectangle
+                ? RectangleClient.getRectangleByPoints(resizeActivePoints)
+                : getRectangleByElements(board, elements, false);
             let corners = RectangleClient.getCornerPoints(boundingRectangle);
             const angle = getSelectionAngle(elements);
             if (angle) {
@@ -4290,6 +4357,16 @@ function withDrawResize(board) {
             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) => {
@@ -4345,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;
@@ -4376,26 +4471,19 @@ const withGeometryResize = (board) => {
         },
         onResize: (resizeRef, resizeState) => {
             const centerPoint = RectangleClient.getCenterPoint(RectangleClient.getRectangleByPoints(resizeRef.element.points));
-            const angle = resizeRef.element.angle;
-            if (angle) {
-                const [rotatedStartPoint, rotateEndPoint] = rotatePoints([resizeState.startPoint, resizeState.endPoint], centerPoint, -resizeRef.element.angle);
-                resizeState.startPoint = rotatedStartPoint;
-                resizeState.endPoint = rotateEndPoint;
-            }
+            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);
             alignG = resizeAlignRef.alignG;
             PlaitBoard.getElementActiveHost(board).append(alignG);
             let points = resizeAlignRef.activePoints;
-            if (angle) {
-                points = resetPointsAfterResize(resizeRef.rectangle, RectangleClient.getRectangleByPoints(points), centerPoint, RectangleClient.getCenterPoint(RectangleClient.getRectangleByPoints(points)), angle);
-            }
             if (PlaitDrawElement.isGeometry(resizeRef.element)) {
                 const { height: textHeight } = getFirstTextManage(resizeRef.element).getSize();
                 DrawTransforms.resizeGeometry(board, points, textHeight, resizeRef.path);
@@ -4448,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];
@@ -4468,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, rotateAntiPointsByElement(resizeState.endPoint, hitElement) || resizeState.endPoint, hitElement);
+                    object.connection = getHitConnection(board, resizeState.endPoint, hitElement);
                     object.boundId = hitElement.id;
                 }
                 else {
@@ -4515,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;
@@ -4579,25 +4667,24 @@ const withLineBoundReaction = (board) => {
             return PlaitDrawElement.isLine(element) && isSourceOrTarget;
         });
         if (isLinePointer || isLineResizing) {
-            const hitElement = getHitOutlineGeometry(board, movingPoint, -4);
+            const hitElement = getHitGeometry(board, movingPoint);
             if (hitElement) {
-                const rectangle = RectangleClient.getRectangleByPoints(hitElement.points);
-                boundShapeG = drawBoundMask(board, hitElement);
-                let nearestPoint = getNearestPoint(hitElement, rotateAntiPointsByElement(movingPoint, hitElement) || movingPoint);
-                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);
-                PlaitBoard.getElementActiveHost(board).append(boundShapeG);
+                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.getCenterPoint(rectangle), hitElement.angle);
+                    setAngleForG(boundShapeG, RectangleClient.getCenterPointByPoints(hitElement.points), hitElement.angle);
                 }
+                PlaitBoard.getElementActiveHost(board).append(boundShapeG);
             }
         }
         pointerMove(event);
@@ -4746,7 +4833,7 @@ 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(rotateAntiPointsByElement(movingPoint, targetElement) || movingPoint, points);
             const hitPoint = points[hitIndex];
@@ -4774,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;
@@ -4782,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(rotateAntiPointsByElement(clickPoint, targetElement) || clickPoint, points);
             const hitPoint = points[index];
             if (hitPoint) {
                 temporaryDisableSelection(board);
-                startPoint = hitPoint;
+                autoCompletePoint = hitPoint;
                 sourceElement = targetElement;
                 BoardTransforms.updatePointerType(board, LineShape.elbow);
             }
@@ -4799,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, ...(rotatePointsByElement(startPoint, sourceElement) || 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, rotatePointsByElement(sourcePoint, sourceElement) || 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);
@@ -4824,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;
@@ -4968,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);
@@ -4977,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)))))))))))));
 };
@@ -4986,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