@plait/draw 0.50.1 → 0.51.0

package/fesm2022/plait-draw.mjs

@@ -1,5 +1,5 @@
-import { ACTIVE_STROKE_WIDTH, ThemeColorMode, PlaitBoard, setStrokeLinecap, isPointInPolygon, getNearestPointBetweenPointAndSegments, RectangleClient, isPointInEllipse, drawRectangle, drawRoundRectangle, isPointInRoundRectangle, idCreator, createG, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, distanceBetweenPointAndSegment, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, arrowPoints, createPath, distanceBetweenPointAndPoint, drawLinearPath, rotate, depthFirstRecursion, getIsRecursionFunc, getElementById, Direction, catmullRomFitting, distanceBetweenPointAndSegments, createMask, createRect, findElements, Point, getSelectedElements, isPolylineHitRectangle, Path, PlaitNode, toViewBoxPoint, toHostPoint, isSelectionMoving, RgbaToHEX, PlaitElement, preventTouchMove, createClipboardContext, WritableClipboardType, addClipboardContext, getHitElementByPoint, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER } from '@plait/core';
-import { getRectangleByPoints, getMemorizedLatest, memorizeLatest, RESIZE_HANDLE_DIAMETER, getExtendPoint, getFactorByPoints, Generator, getRectangleResizeHandleRefs, getDirectionByVector, getOppositeDirection, getDirectionFactor, getPointByVector, reduceRouteMargin, getNextPoint, generateElbowLineRoute, getPoints, removeDuplicatePoints, getPointOnPolyline, getDirectionByPointOfRectangle, rotateVectorAnti90, TRANSPARENT, normalizeShapePoints, getFirstTextEditor, PRIMARY_COLOR, CommonPluginElement, ActiveGenerator, WithTextPluginKey, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, getElementsText, acceptImageTypes, getElementOfFocusedImage, buildImage, ResizeHandle, getFirstTextManage, withResize, isResizingByCondition, getRatioByPoint, ImageGenerator } from '@plait/common';
+import { ACTIVE_STROKE_WIDTH, ThemeColorMode, Point, RectangleClient, getElementById, createG, arrowPoints, createPath, distanceBetweenPointAndPoint, drawLinearPath, rotate, depthFirstRecursion, getIsRecursionFunc, idCreator, catmullRomFitting, PlaitBoard, findElements, createMask, createRect, getSelectedElements, distanceBetweenPointAndSegments, 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 } from '@plait/core';
+import { removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, isSourceAndTargetIntersect, getPoints, getPointByVector, getExtendPoint, getUnitVectorByPointAndPoint, Generator, getRectangleResizeHandleRefs, RESIZE_HANDLE_DIAMETER, getMemorizedLatest, memorizeLatest, getPointOnPolyline, 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, getDirectionFactorByVectorComponent, 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';
@@ -155,30 +155,1071 @@ const DrawThemeColors = {
     }
 };
 
-const getStrokeWidthByElement = (element) => {
-    if (PlaitDrawElement.isText(element)) {
-        return 0;
+const DefaultLineStyle = {
+    strokeWidth: 2,
+    strokeColor: '#000'
+};
+const LINE_TEXT_SPACE = 4;
+const LINE_AUTO_COMPLETE_DIAMETER = 6;
+const LINE_AUTO_COMPLETE_OPACITY = 0.6;
+const LINE_AUTO_COMPLETE_HOVERED_OPACITY = 0.8;
+const LINE_AUTO_COMPLETE_HOVERED_DIAMETER = 10;
+const LINE_ALIGN_TOLERANCE = 3;
+
+const alignPoints = (basePoint, movingPoint) => {
+    const newPoint = [...movingPoint];
+    if (Point.isVertical(newPoint, basePoint, LINE_ALIGN_TOLERANCE)) {
+        newPoint[0] = basePoint[0];
+    }
+    if (Point.isHorizontal(newPoint, basePoint, LINE_ALIGN_TOLERANCE)) {
+        newPoint[1] = basePoint[1];
+    }
+    return newPoint;
+};
+function getResizedPreviousAndNextPoint(nextRenderPoints, sourcePoint, targetPoint, handleIndex) {
+    const referencePoint = {
+        previous: null,
+        next: null
+    };
+    const startPoint = nextRenderPoints[handleIndex];
+    const endPoint = nextRenderPoints[handleIndex + 1];
+    const isHorizontal = Point.isHorizontal(startPoint, endPoint);
+    const isVertical = Point.isVertical(startPoint, endPoint);
+    const previousPoint = nextRenderPoints[handleIndex - 1] ?? nextRenderPoints[0];
+    const beforePreviousPoint = nextRenderPoints[handleIndex - 2] ?? sourcePoint;
+    if ((isHorizontal && Point.isHorizontal(beforePreviousPoint, previousPoint)) ||
+        (isVertical && Point.isVertical(beforePreviousPoint, previousPoint))) {
+        referencePoint.previous = previousPoint;
+    }
+    const nextPoint = nextRenderPoints[handleIndex + 2] ?? nextRenderPoints[nextRenderPoints.length - 1];
+    const afterNextPoint = nextRenderPoints[handleIndex + 3] ?? targetPoint;
+    if ((isHorizontal && Point.isHorizontal(nextPoint, afterNextPoint)) || (isVertical && Point.isVertical(nextPoint, afterNextPoint))) {
+        referencePoint.next = nextPoint;
+    }
+    return referencePoint;
+}
+function alignElbowSegment(startKeyPoint, endKeyPoint, resizeState, resizedPreviousAndNextPoint) {
+    let newStartPoint = startKeyPoint;
+    let newEndPoint = endKeyPoint;
+    if (Point.isHorizontal(startKeyPoint, endKeyPoint)) {
+        const offsetY = Point.getOffsetY(resizeState.startPoint, resizeState.endPoint);
+        let pointY = startKeyPoint[1] + offsetY;
+        if (resizedPreviousAndNextPoint.previous && Math.abs(resizedPreviousAndNextPoint.previous[1] - pointY) < LINE_ALIGN_TOLERANCE) {
+            pointY = resizedPreviousAndNextPoint.previous[1];
+        }
+        else if (resizedPreviousAndNextPoint.next && Math.abs(resizedPreviousAndNextPoint.next[1] - pointY) < LINE_ALIGN_TOLERANCE) {
+            pointY = resizedPreviousAndNextPoint.next[1];
+        }
+        newStartPoint = [startKeyPoint[0], pointY];
+        newEndPoint = [endKeyPoint[0], pointY];
+    }
+    if (Point.isVertical(startKeyPoint, endKeyPoint)) {
+        const offsetX = Point.getOffsetX(resizeState.startPoint, resizeState.endPoint);
+        let pointX = startKeyPoint[0] + offsetX;
+        if (resizedPreviousAndNextPoint.previous && Math.abs(resizedPreviousAndNextPoint.previous[0] - pointX) < LINE_ALIGN_TOLERANCE) {
+            pointX = resizedPreviousAndNextPoint.previous[0];
+        }
+        else if (resizedPreviousAndNextPoint.next && Math.abs(resizedPreviousAndNextPoint.next[0] - pointX) < LINE_ALIGN_TOLERANCE) {
+            pointX = resizedPreviousAndNextPoint.next[0];
+        }
+        newStartPoint = [pointX, startKeyPoint[1]];
+        newEndPoint = [pointX, endKeyPoint[1]];
+    }
+    return [newStartPoint, newEndPoint];
+}
+function getIndexAndDeleteCountByKeyPoint(board, element, dataPoints, nextRenderPoints, handleIndex) {
+    let index = null;
+    let deleteCount = null;
+    const startKeyPoint = nextRenderPoints[handleIndex];
+    const endKeyPoint = nextRenderPoints[handleIndex + 1];
+    if (!startKeyPoint || !endKeyPoint) {
+        return {
+            index,
+            deleteCount
+        };
+    }
+    const midDataPoints = dataPoints.slice(1, -1);
+    const startIndex = midDataPoints.findIndex(item => Point.isEquals(item, startKeyPoint));
+    const endIndex = midDataPoints.findIndex(item => Point.isEquals(item, endKeyPoint));
+    if (Math.max(startIndex, endIndex) > -1) {
+        if (startIndex > -1 && endIndex > -1) {
+            return {
+                index: startIndex,
+                deleteCount: 2
+            };
+        }
+        if (startIndex > -1 && endIndex === -1) {
+            const isReplace = startIndex < midDataPoints.length - 1 &&
+                Point.isAlign([midDataPoints[startIndex], midDataPoints[startIndex + 1], startKeyPoint, endKeyPoint]);
+            if (isReplace) {
+                return {
+                    index: startIndex,
+                    deleteCount: 2
+                };
+            }
+            return {
+                index: startIndex,
+                deleteCount: 1
+            };
+        }
+        if (startIndex === -1 && endIndex > -1) {
+            const isReplace = endIndex > 0 && Point.isAlign([midDataPoints[endIndex], midDataPoints[endIndex - 1], startKeyPoint, endKeyPoint]);
+            if (isReplace) {
+                return {
+                    index: endIndex - 1,
+                    deleteCount: 2
+                };
+            }
+            return {
+                index: endIndex,
+                deleteCount: 1
+            };
+        }
+    }
+    else {
+        for (let i = 0; i < midDataPoints.length - 1; i++) {
+            const currentPoint = midDataPoints[i];
+            const nextPoint = midDataPoints[i + 1];
+            if (Point.isAlign([currentPoint, nextPoint, startKeyPoint, endKeyPoint])) {
+                index = i;
+                deleteCount = 2;
+                break;
+            }
+            if (Point.isAlign([currentPoint, nextPoint, startKeyPoint])) {
+                index = Math.min(i + 1, midDataPoints.length - 1);
+                deleteCount = 1;
+                break;
+            }
+            if (Point.isAlign([currentPoint, nextPoint, endKeyPoint])) {
+                index = Math.max(i - 1, 0);
+                deleteCount = 1;
+                break;
+            }
+        }
+    }
+    if (index === null) {
+        deleteCount = 0;
+        if (midDataPoints.length > 0) {
+            const handleRefPair = getLineHandleRefPair(board, element);
+            const params = getElbowLineRouteOptions(board, element, handleRefPair);
+            const keyPoints = removeDuplicatePoints(generateElbowLineRoute(params));
+            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);
+            for (let i = handleIndex - 1; i >= 0; i--) {
+                const previousIndex = mirrorDataPoints.slice(1, -1).findIndex(item => Point.isEquals(item, nextRenderPoints[i]));
+                if (previousIndex > -1) {
+                    index = previousIndex + 1;
+                    break;
+                }
+            }
+            if (index === null) {
+                index = 0;
+                // When renderPoints is a straight line and dataPoints are not on the line,
+                // the default 'deleteCount' is set to midDataPoints.length.
+                if (Point.isAlign(nextRenderPoints)) {
+                    deleteCount = midDataPoints.length;
+                }
+            }
+        }
+        else {
+            index = 0;
+        }
+    }
+    return {
+        index,
+        deleteCount
+    };
+}
+function getMirrorDataPoints(board, nextDataPoints, nextKeyPoints, params) {
+    for (let index = 1; index < nextDataPoints.length - 2; index++) {
+        adjustByCustomPointStartIndex(board, index, nextDataPoints, nextKeyPoints, params);
+    }
+    return nextDataPoints;
+}
+/**
+ * adjust based parallel segment
+ */
+const adjustByCustomPointStartIndex = (board, customPointStartIndex, nextDataPoints, nextKeyPoints, params) => {
+    const beforePoint = nextDataPoints[customPointStartIndex - 1];
+    const startPoint = nextDataPoints[customPointStartIndex];
+    const endPoint = nextDataPoints[customPointStartIndex + 1];
+    const afterPoint = nextDataPoints[customPointStartIndex + 2];
+    const beforeSegment = [beforePoint, startPoint];
+    const afterSegment = [endPoint, afterPoint];
+    const isStraightWithBefore = Point.isAlign(beforeSegment);
+    const isStraightWithAfter = Point.isAlign(afterSegment);
+    let isAdjustStart = false;
+    let isAdjustEnd = false;
+    if (!isStraightWithBefore || !isStraightWithAfter) {
+        const midKeyPointsWithBefore = getMidKeyPoints(nextKeyPoints, beforeSegment[0], beforeSegment[1]);
+        const midKeyPointsWithAfter = getMidKeyPoints(nextKeyPoints, afterSegment[0], afterSegment[1]);
+        const hasMidKeyPoints = midKeyPointsWithBefore.length > 0 && midKeyPointsWithAfter.length > 0;
+        isAdjustStart = !isStraightWithBefore && !hasMidKeyPoints;
+        isAdjustEnd = !isStraightWithAfter && !hasMidKeyPoints;
+    }
+    if (isAdjustStart || isAdjustEnd) {
+        const parallelSegment = [startPoint, endPoint];
+        const parallelSegments = findOrthogonalParallelSegments(parallelSegment, nextKeyPoints);
+        const mirrorSegments = findMirrorSegments(board, parallelSegment, parallelSegments, params.sourceRectangle, params.targetRectangle);
+        if (mirrorSegments.length === 1) {
+            const mirrorSegment = mirrorSegments[0];
+            if (isAdjustStart) {
+                nextDataPoints.splice(customPointStartIndex, 1, mirrorSegment[0]);
+            }
+            if (isAdjustEnd) {
+                nextDataPoints.splice(customPointStartIndex + 1, 1, mirrorSegment[1]);
+            }
+        }
+        else {
+            const isHorizontal = Point.isHorizontal(startPoint, endPoint);
+            const adjustIndex = isHorizontal ? 0 : 1;
+            if (isAdjustStart) {
+                const newStartPoint = [startPoint[0], startPoint[1]];
+                newStartPoint[adjustIndex] = beforePoint[adjustIndex];
+                nextDataPoints.splice(customPointStartIndex, 1, newStartPoint);
+            }
+            if (isAdjustEnd) {
+                const newEndPoint = [endPoint[0], endPoint[1]];
+                newEndPoint[adjustIndex] = afterPoint[adjustIndex];
+                nextDataPoints.splice(customPointStartIndex + 1, 1, newEndPoint);
+            }
+        }
+    }
+};
+function isUpdatedHandleIndex(board, element, dataPoints, nextRenderPoints, handleIndex) {
+    const { deleteCount } = getIndexAndDeleteCountByKeyPoint(board, element, dataPoints, nextRenderPoints, handleIndex);
+    if (deleteCount !== null && deleteCount > 1) {
+        return true;
+    }
+    return false;
+}
+function getMidKeyPoints(simplifiedNextKeyPoints, startPoint, endPoint) {
+    let midElbowPoints = [];
+    let startPointIndex = -1;
+    let endPointIndex = -1;
+    for (let i = 0; i < simplifiedNextKeyPoints.length; i++) {
+        if (Point.isAlign([simplifiedNextKeyPoints[i], startPoint])) {
+            startPointIndex = i;
+        }
+        if (startPointIndex > -1 && Point.isAlign([simplifiedNextKeyPoints[i], endPoint])) {
+            endPointIndex = i;
+            break;
+        }
+    }
+    if (startPointIndex > -1 && endPointIndex > -1) {
+        midElbowPoints = simplifiedNextKeyPoints.slice(startPointIndex, endPointIndex + 1);
+    }
+    return midElbowPoints;
+}
+function findOrthogonalParallelSegments(segment, keyPoints) {
+    const isHorizontalSegment = Point.isHorizontal(segment[0], segment[1]);
+    const parallelSegments = [];
+    for (let i = 0; i < keyPoints.length - 1; i++) {
+        const current = keyPoints[i];
+        const next = keyPoints[i + 1];
+        const isHorizontal = Point.isHorizontal(current, next, 0.1);
+        if (isHorizontalSegment && isHorizontal) {
+            parallelSegments.push([current, next]);
+        }
+        if (!isHorizontalSegment && !isHorizontal) {
+            parallelSegments.push([current, next]);
+        }
+    }
+    return parallelSegments;
+}
+function findMirrorSegments(board, segment, parallelSegments, sourceRectangle, targetRectangle) {
+    const mirrorSegments = [];
+    for (let index = 0; index < parallelSegments.length; index++) {
+        const parallelPath = parallelSegments[index];
+        const startPoint = [segment[0][0], segment[0][1]];
+        const endPoint = [segment[1][0], segment[1][1]];
+        const isHorizontal = Point.isHorizontal(startPoint, endPoint);
+        const adjustDataIndex = isHorizontal ? 0 : 1;
+        startPoint[adjustDataIndex] = parallelPath[0][adjustDataIndex];
+        endPoint[adjustDataIndex] = parallelPath[1][adjustDataIndex];
+        const fakeRectangle = RectangleClient.getRectangleByPoints([startPoint, endPoint, ...parallelPath]);
+        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);
+        }
+    }
+    return mirrorSegments;
+}
+const hasIllegalElbowPoint = (midDataPoints) => {
+    if (midDataPoints.length === 1) {
+        return true;
+    }
+    return midDataPoints.some((item, index) => {
+        const beforePoint = midDataPoints[index - 1];
+        const afterPoint = midDataPoints[index + 1];
+        const beforeSegment = beforePoint && [beforePoint, item];
+        const afterSegment = afterPoint && [item, afterPoint];
+        const isStraightWithBefore = beforeSegment && Point.isAlign(beforeSegment);
+        const isStraightWithAfter = afterSegment && Point.isAlign(afterSegment);
+        if (index === 0) {
+            return !isStraightWithAfter;
+        }
+        if (index === midDataPoints.length - 1) {
+            return !isStraightWithBefore;
+        }
+        return !isStraightWithBefore && !isStraightWithAfter;
+    });
+};
+
+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));
+    }
+    const keyPoints = removeDuplicatePoints(generateElbowLineRoute(params));
+    const nextKeyPoints = keyPoints.slice(1, keyPoints.length - 1);
+    if (element.points.length === 2) {
+        return simplifyOrthogonalPoints(keyPoints);
+    }
+    else {
+        const simplifiedNextKeyPoints = simplifyOrthogonalPoints(nextKeyPoints);
+        const dataPoints = removeDuplicatePoints(PlaitLine.getPoints(board, element));
+        const midDataPoints = dataPoints.slice(1, -1);
+        if (hasIllegalElbowPoint(midDataPoints)) {
+            return simplifyOrthogonalPoints(keyPoints);
+        }
+        const nextDataPoints = [simplifiedNextKeyPoints[0], ...midDataPoints, simplifiedNextKeyPoints[simplifiedNextKeyPoints.length - 1]];
+        const mirrorDataPoints = getMirrorDataPoints(board, nextDataPoints, simplifiedNextKeyPoints, params);
+        // console.log(mirrorDataPoints, 'mirrorDataPoints');
+        const renderPoints = [keyPoints[0]];
+        for (let index = 0; index < mirrorDataPoints.length - 1; index++) {
+            let currentPoint = mirrorDataPoints[index];
+            let nextPoint = mirrorDataPoints[index + 1];
+            const isStraight = Point.isAlign([currentPoint, nextPoint]);
+            if (!isStraight) {
+                const midKeyPoints = getMidKeyPoints(simplifiedNextKeyPoints, currentPoint, nextPoint);
+                if (midKeyPoints.length) {
+                    renderPoints.push(currentPoint);
+                    renderPoints.push(...midKeyPoints);
+                }
+                else {
+                    renderPoints.push(currentPoint);
+                    console.log('unknown data points');
+                }
+            }
+            else {
+                renderPoints.push(currentPoint);
+            }
+        }
+        renderPoints.push(keyPoints[keyPoints.length - 2], keyPoints[keyPoints.length - 1]);
+        // Remove the middle point to avoid the situation where the starting and ending positions are drawn back, such as when sourcePoint is between nextSourcePoint and the first key point.
+        // Issue
+        //                           keyPoint2
+        //                                |
+        //                                |
+        // nextPoint---sourcePoint---keyPoint1
+        // The correct rendering should be (nextPoint should be filtered out):
+        //                           keyPoint2
+        //                                |
+        //                                |
+        //             sourcePoint---keyPoint1
+        const ret = simplifyOrthogonalPoints(renderPoints);
+        return ret;
+    }
+};
+const getNextSourceAndTargetPoints = (board, element) => {
+    const options = getElbowLineRouteOptions(board, element);
+    return [options.nextSourcePoint, options.nextTargetPoint];
+};
+const getSourceAndTargetRectangle = (board, element, handleRefPair) => {
+    let sourceElement = element.source.boundId ? getElementById(board, element.source.boundId) : undefined;
+    let targetElement = element.target.boundId ? getElementById(board, element.target.boundId) : undefined;
+    if (!sourceElement) {
+        const source = handleRefPair.source;
+        sourceElement = createFakeElement(source.point, source.vector);
+    }
+    if (!targetElement) {
+        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);
+    return {
+        sourceRectangle,
+        targetRectangle
+    };
+};
+const createFakeElement = (startPoint, vector) => {
+    const point = getPointByVector(startPoint, vector, -25);
+    const points = RectangleClient.getPoints(RectangleClient.getRectangleByCenterPoint(point, 50, 50));
+    return createGeometryElement(BasicShapes.rectangle, points, '');
+};
+function getNextRenderPoints(board, element, renderPoints) {
+    let newRenderKeyPoints = renderPoints ?? getElbowPoints(board, element);
+    const [nextSourcePoint, nextTargetPoint] = getNextSourceAndTargetPoints(board, element);
+    newRenderKeyPoints.splice(0, 1, nextSourcePoint);
+    newRenderKeyPoints.splice(-1, 1, nextTargetPoint);
+    return removeDuplicatePoints(newRenderKeyPoints);
+}
+
+const ARROW_LENGTH = 20;
+const drawLineArrow = (element, points, options) => {
+    const arrowG = createG();
+    if (PlaitLine.isSourceMark(element, LineMarkerType.none) && PlaitLine.isTargetMark(element, LineMarkerType.none)) {
+        return null;
+    }
+    const strokeWidth = getStrokeWidthByElement(element);
+    const offset = (strokeWidth * strokeWidth) / 3;
+    if (points.length === 1) {
+        points = [points[0], [points[0][0] + 0.1, points[0][1]]];
+    }
+    if (!PlaitLine.isSourceMark(element, LineMarkerType.none)) {
+        const source = getExtendPoint(points[0], points[1], ARROW_LENGTH + offset);
+        const sourceArrow = getArrow(element, { marker: element.source.marker, source, target: points[0], isSource: true }, options);
+        sourceArrow && arrowG.appendChild(sourceArrow);
+    }
+    if (!PlaitLine.isTargetMark(element, LineMarkerType.none)) {
+        const source = getExtendPoint(points[points.length - 1], points[points.length - 2], ARROW_LENGTH + offset);
+        const arrow = getArrow(element, { marker: element.target.marker, source, target: points[points.length - 1], isSource: false }, options);
+        arrow && arrowG.appendChild(arrow);
+    }
+    return arrowG;
+};
+const getArrow = (element, arrowOptions, options) => {
+    const { marker, target, source, isSource } = arrowOptions;
+    let targetArrow;
+    switch (marker) {
+        case LineMarkerType.openTriangle: {
+            targetArrow = drawOpenTriangle(element, source, target, options);
+            break;
+        }
+        case LineMarkerType.solidTriangle: {
+            targetArrow = drawSolidTriangle(source, target, options);
+            break;
+        }
+        case LineMarkerType.arrow: {
+            targetArrow = drawArrow(element, source, target, options);
+            break;
+        }
+        case LineMarkerType.sharpArrow: {
+            targetArrow = drawSharpArrow(source, target, options);
+            break;
+        }
+        case LineMarkerType.oneSideUp: {
+            targetArrow = drawOneSideArrow(source, target, isSource ? 'down' : 'up', options);
+            break;
+        }
+        case LineMarkerType.oneSideDown: {
+            targetArrow = drawOneSideArrow(source, target, isSource ? 'up' : 'down', options);
+            break;
+        }
+        case LineMarkerType.hollowTriangle: {
+            targetArrow = drawHollowTriangleArrow(source, target, options);
+            break;
+        }
+        case LineMarkerType.singleSlash: {
+            targetArrow = drawSingleSlash(source, target, isSource, options);
+            break;
+        }
+    }
+    return targetArrow;
+};
+const drawSharpArrow = (source, target, options) => {
+    const startPoint = target;
+    const { pointLeft, pointRight } = arrowPoints(source, target, 20);
+    const g = createG();
+    const path = createPath();
+    let polylinePath = `M${pointRight[0]},${pointRight[1]}A25,25,20,0,1,${pointLeft[0]},${pointLeft[1]}L${startPoint[0]},${startPoint[1]}Z`;
+    path.setAttribute('d', polylinePath);
+    path.setAttribute('stroke', `${options?.stroke}`);
+    path.setAttribute('stroke-width', `${options?.strokeWidth}`);
+    path.setAttribute('fill', `${options?.stroke}`);
+    g.appendChild(path);
+    return g;
+};
+const drawArrow = (element, source, target, options) => {
+    const unitVector = getUnitVectorByPointAndPoint(source, target);
+    const strokeWidth = getStrokeWidthByElement(element);
+    const endPoint = [target[0] + (strokeWidth * unitVector[0]) / 2, target[1] + (strokeWidth * unitVector[1]) / 2];
+    const distance = distanceBetweenPointAndPoint(...source, ...endPoint);
+    const middlePoint = [
+        endPoint[0] - (((distance * 3) / 5 + strokeWidth) / 2) * unitVector[0],
+        endPoint[1] - (((distance * 3) / 5 + strokeWidth) / 2) * unitVector[1]
+    ];
+    const { pointLeft, pointRight } = arrowPoints(source, endPoint, 30);
+    const arrowG = drawLinearPath([pointLeft, endPoint, pointRight, middlePoint], { ...options, fill: options.stroke }, true);
+    const path = arrowG.querySelector('path');
+    path.setAttribute('stroke-linejoin', 'round');
+    return arrowG;
+};
+const drawSolidTriangle = (source, target, options) => {
+    const endPoint = target;
+    const { pointLeft, pointRight } = arrowPoints(source, endPoint, 30);
+    return drawLinearPath([pointLeft, endPoint, pointRight], { ...options, fill: options.stroke }, true);
+};
+const drawOpenTriangle = (element, source, target, options) => {
+    const unitVector = getUnitVectorByPointAndPoint(source, target);
+    const strokeWidth = getStrokeWidthByElement(element);
+    const endPoint = [target[0] + (strokeWidth * unitVector[0]) / 2, target[1] + (strokeWidth * unitVector[1]) / 2];
+    const { pointLeft, pointRight } = arrowPoints(source, endPoint, 40);
+    return drawLinearPath([pointLeft, endPoint, pointRight], options);
+};
+const drawOneSideArrow = (source, target, side, options) => {
+    const { pointLeft, pointRight } = arrowPoints(source, target, 40);
+    return drawLinearPath([side === 'up' ? pointRight : pointLeft, target], options);
+};
+const drawSingleSlash = (source, target, isSource, options) => {
+    const length = distanceBetweenPointAndPoint(...source, ...target);
+    const middlePoint = getExtendPoint(target, source, length / 2);
+    const angle = isSource ? 120 : 60;
+    const start = rotate(...source, ...middlePoint, (angle * Math.PI) / 180);
+    const end = rotate(...target, ...middlePoint, (angle * Math.PI) / 180);
+    return drawLinearPath([start, end], options);
+};
+const drawHollowTriangleArrow = (source, target, options) => {
+    const { pointLeft, pointRight } = arrowPoints(source, target, 30);
+    return drawLinearPath([pointLeft, pointRight, target], { ...options, fill: 'white' }, true);
+};
+
+const getShape = (value) => {
+    if (PlaitDrawElement.isImage(value)) {
+        return BasicShapes.rectangle;
+    }
+    return value.shape;
+};
+
+class LineShapeGenerator extends Generator {
+    canDraw(element, data) {
+        return true;
+    }
+    draw(element, data) {
+        let lineG;
+        lineG = drawLine(this.board, element);
+        return lineG;
+    }
+}
+
+const getHitRectangleResizeHandleRef = (board, rectangle, point) => {
+    const resizeHandleRefs = getRectangleResizeHandleRefs(rectangle, RESIZE_HANDLE_DIAMETER);
+    const result = resizeHandleRefs.find(resizeHandleRef => {
+        return RectangleClient.isHit(RectangleClient.getRectangleByPoints([point, point]), resizeHandleRef.rectangle);
+    });
+    return result;
+};
+const getHitOutlineGeometry = (board, point, offset = 0) => {
+    let geometry = null;
+    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).isHit(client, point);
+            if (isHit) {
+                geometry = node;
+            }
+        }
+    }, getIsRecursionFunc(board), true);
+    return geometry;
+};
+
+const SHAPE_MAX_LENGTH = 6;
+const memorizedShape = new WeakMap();
+const getMemorizeKey = (element) => {
+    let key = '';
+    switch (true) {
+        case PlaitDrawElement.isText(element): {
+            key = MemorizeKey.text;
+            break;
+        }
+        case PlaitDrawElement.isBasicShape(element): {
+            key = MemorizeKey.basicShape;
+            break;
+        }
+        case PlaitDrawElement.isFlowchart(element): {
+            key = MemorizeKey.flowchart;
+            break;
+        }
+        case PlaitDrawElement.isLine(element): {
+            key = MemorizeKey.line;
+            break;
+        }
+    }
+    return key;
+};
+const getLineMemorizedLatest = () => {
+    const properties = getMemorizedLatest(MemorizeKey.line);
+    delete properties?.text;
+    return { ...properties } || {};
+};
+const getMemorizedLatestByPointer = (pointer) => {
+    let memorizeKey = '';
+    if (PlaitDrawElement.isBasicShape({ shape: pointer })) {
+        memorizeKey = pointer === BasicShapes.text ? MemorizeKey.text : MemorizeKey.basicShape;
+    }
+    else {
+        memorizeKey = MemorizeKey.flowchart;
+    }
+    const properties = { ...getMemorizedLatest(memorizeKey) } || {};
+    const textProperties = { ...properties.text } || {};
+    delete properties.text;
+    return { textProperties, geometryProperties: properties };
+};
+const memorizeLatestText = (element, operations) => {
+    const memorizeKey = getMemorizeKey(element);
+    let textMemory = getMemorizedLatest(memorizeKey)?.text || {};
+    const setNodeOperation = operations.find(operation => operation.type === 'set_node');
+    if (setNodeOperation) {
+        const newProperties = setNodeOperation.newProperties;
+        textMemory = { ...textMemory, ...newProperties };
+        memorizeLatest(memorizeKey, 'text', textMemory);
+    }
+};
+const memorizeLatestShape = (board, shape) => {
+    const shapes = memorizedShape.has(board) ? memorizedShape.get(board) : [];
+    const shapeIndex = shapes.indexOf(shape);
+    if (shape === BasicShapes.text || shapeIndex === 0) {
+        return;
+    }
+    if (shapeIndex !== -1) {
+        shapes.splice(shapeIndex, 1);
+    }
+    else {
+        if (shapes.length === SHAPE_MAX_LENGTH) {
+            shapes.pop();
+        }
+    }
+    shapes.unshift(shape);
+    memorizedShape.set(board, shapes);
+};
+const getMemorizedLatestShape = (board) => {
+    return memorizedShape.get(board);
+};
+
+const createLineElement = (shape, points, source, target, texts, options) => {
+    return {
+        id: idCreator(),
+        type: 'line',
+        shape,
+        source,
+        texts: texts ? texts : [],
+        target,
+        opacity: 1,
+        points,
+        ...options
+    };
+};
+const getLinePoints = (board, element) => {
+    switch (element.shape) {
+        case LineShape.elbow: {
+            return getElbowPoints(board, element);
+        }
+        case LineShape.curve: {
+            return getCurvePoints(board, element);
+        }
+        default: {
+            const points = PlaitLine.getPoints(board, element);
+            const handleRefPair = getLineHandleRefPair(board, element);
+            points[0] = handleRefPair.source.point;
+            points[points.length - 1] = handleRefPair.target.point;
+            return points;
+        }
+    }
+};
+const getCurvePoints = (board, element) => {
+    if (element.points.length === 2) {
+        const handleRefPair = getLineHandleRefPair(board, element);
+        const { source, target } = handleRefPair;
+        const sourceBoundElement = handleRefPair.source.boundElement;
+        const targetBoundElement = handleRefPair.target.boundElement;
+        let curvePoints = [source.point];
+        const sumDistance = distanceBetweenPointAndPoint(...source.point, ...target.point);
+        const offset = 12 + sumDistance / 3;
+        if (sourceBoundElement) {
+            curvePoints.push(getPointByVector(source.point, source.vector, offset));
+        }
+        if (targetBoundElement) {
+            curvePoints.push(getPointByVector(target.point, target.vector, offset));
+        }
+        const isSingleBound = (sourceBoundElement && !targetBoundElement) || (!sourceBoundElement && targetBoundElement);
+        if (isSingleBound) {
+            curvePoints.push(target.point);
+            const points = Q2C(curvePoints);
+            return pointsOnBezierCurves(points);
+        }
+        if (!sourceBoundElement && !targetBoundElement) {
+            curvePoints.push(getPointByVector(source.point, source.vector, offset));
+            curvePoints.push(getPointByVector(target.point, target.vector, offset));
+        }
+        curvePoints.push(target.point);
+        return pointsOnBezierCurves(curvePoints);
+    }
+    else {
+        let dataPoints = PlaitLine.getPoints(board, element);
+        dataPoints = removeDuplicatePoints(dataPoints);
+        const points = catmullRomFitting(dataPoints);
+        return pointsOnBezierCurves(points);
+    }
+};
+function getMiddlePoints(board, element) {
+    const result = [];
+    const shape = element.shape;
+    const hideBuffer = 10;
+    if (shape === LineShape.straight) {
+        const points = PlaitLine.getPoints(board, element);
+        for (let i = 0; i < points.length - 1; i++) {
+            const distance = distanceBetweenPointAndPoint(...points[i], ...points[i + 1]);
+            if (distance < hideBuffer)
+                continue;
+            result.push([(points[i][0] + points[i + 1][0]) / 2, (points[i][1] + points[i + 1][1]) / 2]);
+        }
+    }
+    if (shape === LineShape.curve) {
+        const points = PlaitLine.getPoints(board, element);
+        const pointsOnBezier = getCurvePoints(board, element);
+        if (points.length === 2) {
+            const start = 0;
+            const endIndex = pointsOnBezier.length - 1;
+            const middleIndex = Math.round((start + endIndex) / 2);
+            result.push(pointsOnBezier[middleIndex]);
+        }
+        else {
+            for (let i = 0; i < points.length - 1; i++) {
+                const startIndex = pointsOnBezier.findIndex(point => point[0] === points[i][0] && point[1] === points[i][1]);
+                const endIndex = pointsOnBezier.findIndex(point => point[0] === points[i + 1][0] && point[1] === points[i + 1][1]);
+                const middleIndex = Math.round((startIndex + endIndex) / 2);
+                const distance = distanceBetweenPointAndPoint(...points[i], ...points[i + 1]);
+                if (distance < hideBuffer)
+                    continue;
+                result.push(pointsOnBezier[middleIndex]);
+            }
+        }
+    }
+    if (shape === LineShape.elbow) {
+        const renderPoints = getElbowPoints(board, element);
+        const options = getElbowLineRouteOptions(board, element);
+        const isIntersect = isSourceAndTargetIntersect(options);
+        if (!isIntersect) {
+            const [nextSourcePoint, nextTargetPoint] = getNextSourceAndTargetPoints(board, element);
+            for (let i = 0; i < renderPoints.length - 1; i++) {
+                if ((i == 0 && Point.isEquals(renderPoints[i + 1], nextSourcePoint)) ||
+                    (i === renderPoints.length - 2 && Point.isEquals(renderPoints[renderPoints.length - 2], nextTargetPoint))) {
+                    continue;
+                }
+                const [currentX, currentY] = renderPoints[i];
+                const [nextX, nextY] = renderPoints[i + 1];
+                const middlePoint = [(currentX + nextX) / 2, (currentY + nextY) / 2];
+                result.push(middlePoint);
+            }
+        }
+    }
+    return result;
+}
+const drawLine = (board, element) => {
+    const strokeWidth = getStrokeWidthByElement(element);
+    const strokeColor = getStrokeColorByElement(board, element);
+    const strokeLineDash = getLineDashByElement(element);
+    const options = { stroke: strokeColor, strokeWidth, strokeLineDash };
+    const lineG = createG();
+    let points = getLinePoints(board, element);
+    let line;
+    if (element.shape === LineShape.curve) {
+        line = PlaitBoard.getRoughSVG(board).curve(points, options);
+    }
+    else {
+        line = drawLinearPath(points, options);
+    }
+    const id = idCreator();
+    line.setAttribute('mask', `url(#${id})`);
+    lineG.appendChild(line);
+    const { mask, maskTargetFillRect } = drawMask(board, element, id);
+    lineG.appendChild(mask);
+    line.appendChild(maskTargetFillRect);
+    const arrow = drawLineArrow(element, points, { stroke: strokeColor, strokeWidth });
+    arrow && lineG.appendChild(arrow);
+    return lineG;
+};
+const getConnectionByNearestPoint = (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 getLineTextRectangle = (board, element, index) => {
+    const text = element.texts[index];
+    const elbowPoints = getLinePoints(board, element);
+    const point = getPointOnPolyline(elbowPoints, text.position);
+    return {
+        x: point[0] - text.width / 2,
+        y: point[1] - text.height / 2,
+        width: text.width,
+        height: text.height
+    };
+};
+const getLines = (board) => {
+    return findElements(board, {
+        match: (element) => PlaitDrawElement.isLine(element),
+        recursion: (element) => PlaitDrawElement.isDrawElement(element)
+    });
+};
+// quadratic Bezier to cubic Bezier
+const Q2C = (points) => {
+    const result = [];
+    const numSegments = points.length / 3;
+    for (let i = 0; i < numSegments; i++) {
+        const start = points[i];
+        const qControl = points[i + 1];
+        const end = points[i + 2];
+        const startDistance = distanceBetweenPointAndPoint(...start, ...qControl);
+        const endDistance = distanceBetweenPointAndPoint(...end, ...qControl);
+        const cControl1 = getExtendPoint(start, qControl, (startDistance * 2) / 3);
+        const cControl2 = getExtendPoint(end, qControl, (endDistance * 2) / 3);
+        result.push(start, cControl1, cControl2, end);
+    }
+    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 targetBoundId = hitElement ? hitElement.id : undefined;
+    const lineGenerator = new LineShapeGenerator(board);
+    const memorizedLatest = getLineMemorizedLatest();
+    let sourceMarker, targetMarker;
+    sourceMarker = memorizedLatest.source;
+    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 }, [], {
+        strokeWidth: DefaultLineStyle.strokeWidth,
+        ...memorizedLatest
+    });
+    const linePoints = getLinePoints(board, temporaryLineElement);
+    const otherPoint = linePoints[0];
+    temporaryLineElement.points[1] = alignPoints(otherPoint, movingPoint);
+    lineGenerator.processDrawing(temporaryLineElement, lineShapeG);
+    PlaitBoard.getElementActiveHost(board).append(lineShapeG);
+    return temporaryLineElement;
+};
+function drawMask(board, element, id) {
+    const mask = createMask();
+    mask.setAttribute('id', id);
+    const points = getLinePoints(board, element);
+    let rectangle = RectangleClient.getRectangleByPoints(points);
+    rectangle = RectangleClient.getOutlineRectangle(rectangle, -30);
+    const maskFillRect = createRect(rectangle, {
+        fill: 'white'
+    });
+    mask.appendChild(maskFillRect);
+    const texts = element.texts;
+    texts.forEach((text, index) => {
+        let textRectangle = getLineTextRectangle(board, element, index);
+        textRectangle = RectangleClient.inflate(textRectangle, LINE_TEXT_SPACE * 2);
+        const rect = createRect(textRectangle, {
+            fill: 'black'
+        });
+        mask.appendChild(rect);
+    });
+    // open line
+    const maskTargetFillRect = createRect(rectangle);
+    maskTargetFillRect.setAttribute('opacity', '0');
+    maskTargetFillRect.setAttribute('fill', 'none');
+    return { mask, maskTargetFillRect };
+}
+
+const getSelectedDrawElements = (board) => {
+    const selectedElements = getSelectedElements(board).filter(value => PlaitDrawElement.isDrawElement(value));
+    return selectedElements;
+};
+const getSelectedGeometryElements = (board) => {
+    const selectedElements = getSelectedElements(board).filter(value => PlaitDrawElement.isGeometry(value));
+    return selectedElements;
+};
+const getSelectedLineElements = (board) => {
+    const selectedElements = getSelectedElements(board).filter(value => PlaitDrawElement.isLine(value));
+    return selectedElements;
+};
+const getSelectedImageElements = (board) => {
+    const selectedElements = getSelectedElements(board).filter(value => PlaitDrawElement.isImage(value));
+    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;
     }
-    const strokeWidth = element.strokeWidth || DefaultGeometryStyle.strokeWidth;
-    return strokeWidth;
+    return false;
 };
-const getStrokeColorByElement = (board, element) => {
-    const defaultColor = getDrawDefaultStrokeColor(board.theme.themeColorMode);
-    const strokeColor = element.strokeColor || defaultColor;
-    return strokeColor;
+const isHitLineText = (board, element, point) => {
+    return getHitLineTextIndex(board, element, point) !== -1;
 };
-const getFillByElement = (board, element) => {
-    const defaultFill = PlaitDrawElement.isFlowchart(element)
-        ? getFlowchartDefaultFill(board.theme.themeColorMode)
-        : DefaultGeometryStyle.fill;
-    const fill = element.fill || defaultFill;
-    return fill;
+const isHitPolyLine = (pathPoints, point, strokeWidth, expand = 0) => {
+    const distance = distanceBetweenPointAndSegments(pathPoints, point);
+    return distance <= strokeWidth + expand;
 };
-const getLineDashByElement = (element) => {
-    return element.strokeStyle === 'dashed' ? [8, 8 + getStrokeWidthByElement(element)] : undefined;
+const isRectangleHitDrawElement = (board, element, selection) => {
+    const rangeRectangle = RectangleClient.getRectangleByPoints([selection.anchor, selection.focus]);
+    if (PlaitDrawElement.isGeometry(element)) {
+        const client = RectangleClient.getRectangleByPoints(element.points);
+        if (isTextExceedingBounds(element)) {
+            const textClient = getTextRectangle(element);
+            return RectangleClient.isHit(rangeRectangle, client) || RectangleClient.isHit(rangeRectangle, textClient);
+        }
+        return RectangleClient.isHit(rangeRectangle, client);
+    }
+    if (PlaitDrawElement.isImage(element)) {
+        const client = RectangleClient.getRectangleByPoints(element.points);
+        return RectangleClient.isHit(rangeRectangle, client);
+    }
+    if (PlaitDrawElement.isLine(element)) {
+        const points = getLinePoints(board, element);
+        const strokeWidth = getStrokeWidthByElement(element);
+        const isHitText = isHitLineText(board, element, selection.focus);
+        const isHit = isHitPolyLine(points, selection.focus, strokeWidth, 3) || isHitText;
+        const isContainPolyLinePoint = points.some(point => {
+            return RectangleClient.isHit(rangeRectangle, RectangleClient.getRectangleByPoints([point, point]));
+        });
+        const isIntersect = Point.isEquals(selection.anchor, selection.focus) ? isHit : isPolylineHitRectangle(points, rangeRectangle);
+        return isContainPolyLinePoint || isIntersect;
+    }
+    return null;
 };
-const getStrokeStyleByElement = (element) => {
-    return element.strokeStyle || StrokeStyle.solid;
+const isHitDrawElement = (board, element, point) => {
+    if (PlaitDrawElement.isGeometry(element)) {
+        const fill = getFillByElement(board, element);
+        // when shape equals text, fill is not allowed
+        if (fill !== DefaultGeometryStyle.fill && fill !== TRANSPARENT && !PlaitDrawElement.isText(element)) {
+            return isRectangleHitDrawElement(board, element, { anchor: point, focus: point });
+        }
+        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;
+            }
+            const strokeWidth = getStrokeWidthByElement(element);
+            const engine = getEngine(getShape(element));
+            const corners = engine.getCornerPoints(RectangleClient.getRectangleByPoints(element.points));
+            const isHit = isHitPolyLine(corners, point, strokeWidth, 3);
+            const textClient = getTextRectangle(element);
+            let isHitText = RectangleClient.isPointInRectangle(textClient, point);
+            return isHit || isHitText;
+        }
+    }
+    if (PlaitDrawElement.isImage(element) || PlaitDrawElement.isLine(element)) {
+        return isRectangleHitDrawElement(board, element, { anchor: point, focus: point });
+    }
+    return null;
+};
+
+const getCenterPointsOnPolygon$1 = (points) => {
+    const centerPoints = [];
+    for (let i = 0; i < points.length; i++) {
+        let j = i == points.length - 1 ? 0 : i + 1;
+        centerPoints.push([(points[i][0] + points[j][0]) / 2, (points[i][1] + points[j][1]) / 2]);
+    }
+    return centerPoints;
+};
+const getCrossingPointBetweenPointAndPolygon = (corners, point) => {
+    const result = [];
+    for (let index = 1; index <= corners.length; index++) {
+        let start = corners[index - 1];
+        let end = index === corners.length ? corners[0] : corners[index];
+        const crossingPoint = getCrossingPointsBetweenPointAndSegment(point, start, end);
+        result.push(...crossingPoint);
+    }
+    return result;
+};
+const getPolygonEdgeByConnectionPoint = (corners, point) => {
+    for (let index = 1; index <= corners.length; index++) {
+        let start = corners[index - 1];
+        let end = index === corners.length ? corners[0] : corners[index];
+        if (isPointOnSegment(point, start, end)) {
+            return [start, end];
+        }
+    }
+    return null;
 };
 
 const heightRatio$1 = 3 / 4;
@@ -203,13 +1244,13 @@ const CommentEngine = {
     getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
         const corners = getCommentPoints(rectangle);
         const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
-        return getEdgeOnPolygonByPoint(corners, point);
+        return getPolygonEdgeByConnectionPoint(corners, point);
     },
     getConnectorPoints(rectangle) {
         return RectangleClient.getEdgeCenterPoints(rectangle);
     },
     getTextRectangle(element) {
-        const elementRectangle = getRectangleByPoints(element.points);
+        const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
         const strokeWidth = getStrokeWidthByElement(element);
         const height = element.textHeight;
         const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
@@ -253,10 +1294,26 @@ function createPolygonEngine(options) {
         getNearestPoint(rectangle, point) {
             return getNearestPointBetweenPointAndSegments(point, getPoints(rectangle));
         },
+        getNearestCrossingPoint(rectangle, point) {
+            const corners = getPoints(rectangle);
+            const crossingPoints = getCrossingPointBetweenPointAndPolygon(corners, point);
+            let nearestPoint = crossingPoints[0];
+            let nearestDistance = distanceBetweenPointAndPoint(point[0], point[1], nearestPoint[0], nearestPoint[1]);
+            crossingPoints
+                .filter((v, index) => index > 0)
+                .forEach(crossingPoint => {
+                let distance = distanceBetweenPointAndPoint(point[0], point[1], crossingPoint[0], crossingPoint[1]);
+                if (distance < nearestDistance) {
+                    nearestDistance = distance;
+                    nearestPoint = crossingPoint;
+                }
+            });
+            return nearestPoint;
+        },
         getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
             const corners = getPoints(rectangle);
             const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
-            return getEdgeOnPolygonByPoint(corners, point);
+            return getPolygonEdgeByConnectionPoint(corners, point);
         },
         getConnectorPoints(rectangle) {
             if (options.getConnectorPoints) {
@@ -337,8 +1394,9 @@ const EllipseEngine = {
         const point = [connectionPoint[0] - centerPoint[0], -(connectionPoint[1] - centerPoint[1])];
         const a = rectangle.width / 2;
         const b = rectangle.height / 2;
-        const slope = getTangentSlope(point[0], point[1], a, b);
-        return getVectorBySlope(point[0], point[1], slope);
+        const slope = getEllipseTangentSlope(point[0], point[1], a, b);
+        const vector = getVectorFromPointAndSlope(point[0], point[1], slope);
+        return vector;
     },
     getConnectorPoints(rectangle) {
         return RectangleClient.getEdgeCenterPoints(rectangle);
@@ -386,31 +1444,6 @@ function getNearestPointBetweenPointAndEllipse(point, center, rx, ry, rotation =
     const signY = point[1] > center[1] ? 1 : -1;
     return [center[0] + a * tx * signX, center[1] + b * ty * signY];
 }
-/**
- * the result of slope is based on Cartesian coordinate system
- * x, y are based on the position in the Cartesian coordinate system
- */
-function getTangentSlope(x, y, a, b) {
-    const k = (-b * b * x) / (a * a * y);
-    return k;
-}
-/**
- * x, y are based on the position in the Cartesian coordinate system
- */
-function getVectorBySlope(x, y, slope) {
-    const deltaX = 30;
-    const deltaY = -slope * deltaX;
-    let start = [0 - deltaX, 0 - deltaY];
-    let end = [0 + deltaX, 0 + deltaY];
-    // y < 0 acts on the lower half of the x-axis, with the starting point at the top and the end point at the bottom.
-    if (y < 0) {
-        const temp = start;
-        start = end;
-        end = temp;
-    }
-    const vector = [end[0] - start[0], end[1] - start[1]];
-    return vector;
-}
 
 const getHexagonPoints = (rectangle) => {
     return [
@@ -502,7 +1535,7 @@ const ParallelogramEngine = createPolygonEngine({
     getPolygonPoints: getParallelogramPoints,
     getConnectorPoints: (rectangle) => {
         const cornerPoints = getParallelogramPoints(rectangle);
-        return getCenterPointsOnPolygon(cornerPoints);
+        return getCenterPointsOnPolygon$1(cornerPoints);
     },
     getTextRectangle(element) {
         const rectangle = getTextRectangle(element);
@@ -525,7 +1558,7 @@ const getPentagonPoints = (rectangle) => {
 const PentagonEngine = createPolygonEngine({
     getPolygonPoints: getPentagonPoints,
     getTextRectangle(element) {
-        const elementRectangle = getRectangleByPoints(element.points);
+        const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
         const strokeWidth = getStrokeWidthByElement(element);
         const height = element.textHeight;
         const originWidth = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
@@ -575,7 +1608,7 @@ const ProcessArrowEngine = createPolygonEngine({
     getPolygonPoints: getProcessArrowPoints,
     getTextRectangle(element) {
         const rectangle = getTextRectangle(element);
-        const elementRectangle = getRectangleByPoints(element.points);
+        const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
         const width = rectangle.width;
         rectangle.width = elementRectangle.height / 2;
         rectangle.x += elementRectangle.height / 2;
@@ -588,7 +1621,7 @@ const RectangleEngine = {
         return drawRectangle(board, rectangle, { ...options, fillStyle: 'solid' });
     },
     isHit(rectangle, point) {
-        const rangeRectangle = RectangleClient.toRectangleClient([point, point]);
+        const rangeRectangle = RectangleClient.getRectangleByPoints([point, point]);
         return RectangleClient.isHit(rectangle, rangeRectangle);
     },
     getCornerPoints(rectangle) {
@@ -600,7 +1633,7 @@ const RectangleEngine = {
     getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
         const corners = RectangleEngine.getCornerPoints(rectangle);
         const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
-        return getEdgeOnPolygonByPoint(corners, point);
+        return getPolygonEdgeByConnectionPoint(corners, point);
     },
     getConnectorPoints(rectangle) {
         return RectangleClient.getEdgeCenterPoints(rectangle);
@@ -649,7 +1682,7 @@ const RoundRectangleEngine = {
     getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
         const corners = RectangleEngine.getCornerPoints(rectangle);
         const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
-        return getEdgeOnPolygonByPoint(corners, point);
+        return getPolygonEdgeByConnectionPoint(corners, point);
     },
     getConnectorPoints(rectangle) {
         return RectangleClient.getEdgeCenterPoints(rectangle);
@@ -728,7 +1761,7 @@ const RoundCommentEngine = {
     getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
         const corners = getRoundCommentPoints(rectangle);
         const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
-        return getEdgeOnPolygonByPoint(corners, point);
+        return getPolygonEdgeByConnectionPoint(corners, point);
     },
     getConnectorPoints(rectangle) {
         return [
@@ -739,7 +1772,7 @@ const RoundCommentEngine = {
         ];
     },
     getTextRectangle(element) {
-        const elementRectangle = getRectangleByPoints(element.points);
+        const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
         const strokeWidth = getStrokeWidthByElement(element);
         const height = element.textHeight;
         const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
@@ -775,7 +1808,7 @@ const TrapezoidEngine = createPolygonEngine({
     getPolygonPoints: getTrapezoidPoints,
     getConnectorPoints(rectangle) {
         const points = getTrapezoidPoints(rectangle);
-        return getCenterPointsOnPolygon(points);
+        return getCenterPointsOnPolygon$1(points);
     },
     getTextRectangle(element) {
         const rectangle = getTextRectangle(element);
@@ -797,11 +1830,11 @@ const TriangleEngine = createPolygonEngine({
     getPolygonPoints: getTrianglePoints,
     getConnectorPoints(rectangle) {
         const cornerPoints = getTrianglePoints(rectangle);
-        const lineCenterPoints = getCenterPointsOnPolygon(cornerPoints);
+        const lineCenterPoints = getCenterPointsOnPolygon$1(cornerPoints);
         return [...lineCenterPoints, ...cornerPoints];
     },
     getTextRectangle(element) {
-        const elementRectangle = getRectangleByPoints(element.points);
+        const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
         const strokeWidth = getStrokeWidthByElement(element);
         const height = element.textHeight;
         const originWidth = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
@@ -860,7 +1893,7 @@ const StarEngine = createPolygonEngine({
         return [points[1], points[3], points[5], points[7], points[9]];
     },
     getTextRectangle(element) {
-        const elementRectangle = getRectangleByPoints(element.points);
+        const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
         const strokeWidth = getStrokeWidthByElement(element);
         const height = element.textHeight;
         const originWidth = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
@@ -887,10 +1920,18 @@ const TerminalEngine = {
     getNearestPoint(rectangle, point) {
         return getNearestPointBetweenPointAndRoundRectangle(point, rectangle, getStartEndRadius(rectangle));
     },
-    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
-        const corners = RectangleEngine.getCornerPoints(rectangle);
-        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
-        return getEdgeOnPolygonByPoint(corners, point);
+    getTangentVectorByConnectionPoint(rectangle, pointOfRectangle) {
+        const connectionPoint = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        const radius = getStartEndRadius(rectangle);
+        const center = getBoundCenterOfRoundRectangle(rectangle, radius, connectionPoint);
+        if (center) {
+            const point = [connectionPoint[0] - center[0], -(connectionPoint[1] - center[1])];
+            const a = radius;
+            const b = radius;
+            const slope = getEllipseTangentSlope(point[0], point[1], a, b);
+            return getVectorFromPointAndSlope(point[0], point[1], slope);
+        }
+        return null;
     },
     getConnectorPoints(rectangle) {
         return RectangleClient.getEdgeCenterPoints(rectangle);
@@ -900,33 +1941,37 @@ const getStartEndRadius = (rectangle) => {
     return Math.min(rectangle.width / 2, rectangle.height / 2);
 };
 function getNearestPointBetweenPointAndRoundRectangle(point, rectangle, radius) {
-    const { x: rectX, y: rectY, width, height } = rectangle;
-    const cornerPoints = RectangleClient.getCornerPoints(rectangle);
-    let result = getNearestPointBetweenPointAndSegments(point, cornerPoints);
-    let circleCenter = null;
-    const inLeftTop = point[0] >= rectX && point[0] <= rectX + radius && point[1] >= rectY && point[1] <= rectY + radius;
+    let result = null;
+    let boundCenter = getBoundCenterOfRoundRectangle(rectangle, radius, point);
+    if (boundCenter) {
+        result = getNearestPointBetweenPointAndEllipse(point, boundCenter, radius, radius);
+    }
+    else {
+        const cornerPoints = RectangleClient.getCornerPoints(rectangle);
+        result = getNearestPointBetweenPointAndSegments(point, cornerPoints);
+    }
+    return result;
+}
+function getBoundCenterOfRoundRectangle(rectangle, radius, point) {
+    const { x, y, width, height } = rectangle;
+    let center = null;
+    const inLeftTop = point[0] >= x && point[0] <= x + radius && point[1] >= y && point[1] <= y + radius;
     if (inLeftTop) {
-        circleCenter = [rectX + radius, rectY + radius];
+        center = [x + radius, y + radius];
     }
-    const inLeftBottom = point[0] >= rectX && point[0] <= rectX + radius && point[1] >= rectY + height && point[1] <= rectY + height - radius;
+    const inLeftBottom = point[0] >= x && point[0] <= x + radius && point[1] >= y + height - radius && point[1] <= y + height;
     if (inLeftBottom) {
-        circleCenter = [rectX + radius, rectY + height - radius];
+        center = [x + radius, y + height - radius];
     }
-    const inRightTop = point[0] >= rectX + width - radius && point[0] <= rectX + width && point[1] >= rectY && point[1] <= rectY + radius;
+    const inRightTop = point[0] >= x + width - radius && point[0] <= x + width && point[1] >= y && point[1] <= y + radius;
     if (inRightTop) {
-        circleCenter = [rectX + width - radius, rectY + radius];
+        center = [x + width - radius, y + radius];
     }
-    const inRightBottom = point[0] >= rectX + width - radius &&
-        point[0] <= rectX + width &&
-        point[1] >= rectY + height - radius &&
-        point[1] <= rectY + height;
+    const inRightBottom = point[0] >= x + width - radius && point[0] <= x + width && point[1] >= y + height - radius && point[1] <= y + height;
     if (inRightBottom) {
-        circleCenter = [rectX + width - radius, rectY + height - radius];
-    }
-    if (circleCenter) {
-        result = getNearestPointBetweenPointAndEllipse(point, circleCenter, radius, radius);
+        center = [x + width - radius, y + height - radius];
     }
-    return result;
+    return center;
 }
 
 const getManualInputPoints = (rectangle) => {
@@ -941,10 +1986,10 @@ const ManualInputEngine = createPolygonEngine({
     getPolygonPoints: getManualInputPoints,
     getConnectorPoints: (rectangle) => {
         const cornerPoints = getManualInputPoints(rectangle);
-        return getCenterPointsOnPolygon(cornerPoints);
+        return getCenterPointsOnPolygon$1(cornerPoints);
     },
     getTextRectangle: (element) => {
-        const elementRectangle = getRectangleByPoints(element.points);
+        const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
         const strokeWidth = getStrokeWidthByElement(element);
         const height = element.textHeight;
         const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
@@ -993,7 +2038,7 @@ const ManualLoopEngine = createPolygonEngine({
     getPolygonPoints: getManualLoopPoints,
     getConnectorPoints: (rectangle) => {
         const cornerPoints = getManualLoopPoints(rectangle);
-        return getCenterPointsOnPolygon(cornerPoints);
+        return getCenterPointsOnPolygon$1(cornerPoints);
     },
     getTextRectangle(element) {
         const rectangle = getTextRectangle(element);
@@ -1015,11 +2060,11 @@ const MergeEngine = createPolygonEngine({
     getPolygonPoints: getMergePoints,
     getConnectorPoints: (rectangle) => {
         const cornerPoints = getMergePoints(rectangle);
-        const lineCenterPoints = getCenterPointsOnPolygon(cornerPoints);
+        const lineCenterPoints = getCenterPointsOnPolygon$1(cornerPoints);
         return [...lineCenterPoints, ...cornerPoints];
     },
     getTextRectangle(element) {
-        const elementRectangle = getRectangleByPoints(element.points);
+        const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
         const strokeWidth = getStrokeWidthByElement(element);
         const height = element.textHeight;
         const originWidth = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
@@ -1043,7 +2088,7 @@ const DelayEngine = {
     },
     isHit(rectangle, point) {
         //split shape to rectangle and a half ellipse
-        const rangeRectangle = RectangleClient.toRectangleClient([point, point]);
+        const rangeRectangle = RectangleClient.getRectangleByPoints([point, point]);
         const isInRectangle = RectangleClient.isHit({
             ...rectangle,
             width: (rectangle.width * 3) / 4
@@ -1067,8 +2112,8 @@ const DelayEngine = {
         const point = [connectionPoint[0] - centerPoint[0], -(connectionPoint[1] - centerPoint[1])];
         const a = rectangle.width / 4;
         const b = rectangle.height / 2;
-        const slope = getTangentSlope(point[0], point[1], a, b);
-        return getVectorBySlope(point[0], point[1], slope);
+        const slope = getEllipseTangentSlope(point[0], point[1], a, b);
+        return getVectorFromPointAndSlope(point[0], point[1], slope);
     },
     getConnectorPoints(rectangle) {
         return RectangleClient.getEdgeCenterPoints(rectangle);
@@ -1087,7 +2132,7 @@ const StoredDataEngine = {
     },
     isHit(rectangle, point) {
         //split shape to rectangle and a half ellipse
-        const rangeRectangle = RectangleClient.toRectangleClient([point, point]);
+        const rangeRectangle = RectangleClient.getRectangleByPoints([point, point]);
         const isInRectangle = RectangleClient.isHit({
             ...rectangle,
             x: rectangle.x + rectangle.width / 10,
@@ -1103,14 +2148,20 @@ const StoredDataEngine = {
     getNearestPoint(rectangle, point) {
         const nearestPoint = getNearestPointBetweenPointAndSegments(point, RectangleEngine.getCornerPoints(rectangle));
         if (nearestPoint[0] < rectangle.x + rectangle.width / 10) {
-            const nearestPoint = getNearestPointBetweenPointAndEllipse(point, [rectangle.x + rectangle.width / 10, rectangle.y + rectangle.height / 2], rectangle.width / 10, rectangle.height / 2);
-            if (nearestPoint[0] > rectangle.x + rectangle.width / 10) {
-                nearestPoint[0] = (rectangle.x + rectangle.width / 10) * 2 - nearestPoint[0];
+            const centerPoint = [rectangle.x + rectangle.width / 10, rectangle.y + rectangle.height / 2];
+            const nearestPoint = getNearestPointBetweenPointAndEllipse(point, centerPoint, rectangle.width / 10, rectangle.height / 2);
+            if (nearestPoint[0] > centerPoint[0]) {
+                nearestPoint[0] = centerPoint[0] * 2 - nearestPoint[0];
             }
             return nearestPoint;
         }
         if (nearestPoint[0] > rectangle.x + (rectangle.width * 9) / 10) {
-            return getNearestPointBetweenPointAndEllipse(point, [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2], rectangle.width / 10, rectangle.height / 2);
+            const centerPoint = [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2];
+            const nearestPoint = getNearestPointBetweenPointAndEllipse(point, centerPoint, rectangle.width / 10, rectangle.height / 2);
+            if (nearestPoint[0] > centerPoint[0]) {
+                nearestPoint[0] = centerPoint[0] * 2 - nearestPoint[0];
+            }
+            return nearestPoint;
         }
         return nearestPoint;
     },
@@ -1124,8 +2175,8 @@ const StoredDataEngine = {
             centerPoint = [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2];
         }
         const point = [connectionPoint[0] - centerPoint[0], -(connectionPoint[1] - centerPoint[1])];
-        const slope = getTangentSlope(point[0], point[1], a, b);
-        const vector = getVectorBySlope(point[0], point[1], slope);
+        const slope = getEllipseTangentSlope(point[0], point[1], a, b);
+        const vector = getVectorFromPointAndSlope(point[0], point[1], slope);
         return isBackEllipse ? vector.map(num => -num) : vector;
     },
     getConnectorPoints(rectangle) {
@@ -1146,130 +2197,40 @@ const StoredDataEngine = {
 };
 
 const ShapeEngineMap = {
-    [BasicShapes.rectangle]: RectangleEngine,
-    [BasicShapes.diamond]: DiamondEngine,
-    [BasicShapes.ellipse]: EllipseEngine,
-    [BasicShapes.parallelogram]: ParallelogramEngine,
-    [BasicShapes.roundRectangle]: RoundRectangleEngine,
-    [BasicShapes.text]: RectangleEngine,
-    [BasicShapes.triangle]: TriangleEngine,
-    [BasicShapes.leftArrow]: LeftArrowEngine,
-    [BasicShapes.trapezoid]: TrapezoidEngine,
-    [BasicShapes.rightArrow]: RightArrowEngine,
-    [BasicShapes.cross]: CrossEngine,
-    [BasicShapes.star]: StarEngine,
-    [BasicShapes.pentagon]: PentagonEngine,
-    [BasicShapes.hexagon]: HexagonEngine,
-    [BasicShapes.octagon]: OctagonEngine,
-    [BasicShapes.pentagonArrow]: PentagonArrowEngine,
-    [BasicShapes.processArrow]: ProcessArrowEngine,
-    [BasicShapes.twoWayArrow]: TwoWayArrowEngine,
-    [BasicShapes.comment]: CommentEngine,
-    [BasicShapes.roundComment]: RoundCommentEngine,
-    [FlowchartSymbols.process]: RectangleEngine,
-    [FlowchartSymbols.decision]: DiamondEngine,
-    [FlowchartSymbols.connector]: EllipseEngine,
-    [FlowchartSymbols.data]: ParallelogramEngine,
-    [FlowchartSymbols.terminal]: TerminalEngine,
-    [FlowchartSymbols.manualInput]: ManualInputEngine,
-    [FlowchartSymbols.preparation]: PreparationEngine,
-    [FlowchartSymbols.manualLoop]: ManualLoopEngine,
-    [FlowchartSymbols.merge]: MergeEngine,
-    [FlowchartSymbols.delay]: DelayEngine,
-    [FlowchartSymbols.storedData]: StoredDataEngine
-};
-const getEngine = (shape) => {
-    return ShapeEngineMap[shape];
-};
-
-const getShape = (value) => {
-    if (PlaitDrawElement.isImage(value)) {
-        return BasicShapes.rectangle;
-    }
-    return value.shape;
-};
-
-const DefaultLineStyle = {
-    strokeWidth: 2,
-    strokeColor: '#000'
-};
-const LINE_TEXT_SPACE = 4;
-const LINE_AUTO_COMPLETE_DIAMETER = 6;
-const LINE_AUTO_COMPLETE_OPACITY = 0.6;
-const LINE_AUTO_COMPLETE_HOVERED_OPACITY = 0.8;
-const LINE_AUTO_COMPLETE_HOVERED_DIAMETER = 10;
-
-const SHAPE_MAX_LENGTH = 6;
-const memorizedShape = new WeakMap();
-const getMemorizeKey = (element) => {
-    let key = '';
-    switch (true) {
-        case PlaitDrawElement.isText(element): {
-            key = MemorizeKey.text;
-            break;
-        }
-        case PlaitDrawElement.isBasicShape(element): {
-            key = MemorizeKey.basicShape;
-            break;
-        }
-        case PlaitDrawElement.isFlowchart(element): {
-            key = MemorizeKey.flowchart;
-            break;
-        }
-        case PlaitDrawElement.isLine(element): {
-            key = MemorizeKey.line;
-            break;
-        }
-    }
-    return key;
-};
-const getLineMemorizedLatest = () => {
-    const properties = getMemorizedLatest(MemorizeKey.line);
-    delete properties?.text;
-    return { ...properties } || {};
-};
-const getMemorizedLatestByPointer = (pointer) => {
-    let memorizeKey = '';
-    if (PlaitDrawElement.isBasicShape({ shape: pointer })) {
-        memorizeKey = pointer === BasicShapes.text ? MemorizeKey.text : MemorizeKey.basicShape;
-    }
-    else {
-        memorizeKey = MemorizeKey.flowchart;
-    }
-    const properties = { ...getMemorizedLatest(memorizeKey) } || {};
-    const textProperties = { ...properties.text } || {};
-    delete properties.text;
-    return { textProperties, geometryProperties: properties };
-};
-const memorizeLatestText = (element, operations) => {
-    const memorizeKey = getMemorizeKey(element);
-    let textMemory = getMemorizedLatest(memorizeKey)?.text || {};
-    const setNodeOperation = operations.find(operation => operation.type === 'set_node');
-    if (setNodeOperation) {
-        const newProperties = setNodeOperation.newProperties;
-        textMemory = { ...textMemory, ...newProperties };
-        memorizeLatest(memorizeKey, 'text', textMemory);
-    }
-};
-const memorizeLatestShape = (board, shape) => {
-    const shapes = memorizedShape.has(board) ? memorizedShape.get(board) : [];
-    const shapeIndex = shapes.indexOf(shape);
-    if (shape === BasicShapes.text || shapeIndex === 0) {
-        return;
-    }
-    if (shapeIndex !== -1) {
-        shapes.splice(shapeIndex, 1);
-    }
-    else {
-        if (shapes.length === SHAPE_MAX_LENGTH) {
-            shapes.pop();
-        }
-    }
-    shapes.unshift(shape);
-    memorizedShape.set(board, shapes);
+    [BasicShapes.rectangle]: RectangleEngine,
+    [BasicShapes.diamond]: DiamondEngine,
+    [BasicShapes.ellipse]: EllipseEngine,
+    [BasicShapes.parallelogram]: ParallelogramEngine,
+    [BasicShapes.roundRectangle]: RoundRectangleEngine,
+    [BasicShapes.text]: RectangleEngine,
+    [BasicShapes.triangle]: TriangleEngine,
+    [BasicShapes.leftArrow]: LeftArrowEngine,
+    [BasicShapes.trapezoid]: TrapezoidEngine,
+    [BasicShapes.rightArrow]: RightArrowEngine,
+    [BasicShapes.cross]: CrossEngine,
+    [BasicShapes.star]: StarEngine,
+    [BasicShapes.pentagon]: PentagonEngine,
+    [BasicShapes.hexagon]: HexagonEngine,
+    [BasicShapes.octagon]: OctagonEngine,
+    [BasicShapes.pentagonArrow]: PentagonArrowEngine,
+    [BasicShapes.processArrow]: ProcessArrowEngine,
+    [BasicShapes.twoWayArrow]: TwoWayArrowEngine,
+    [BasicShapes.comment]: CommentEngine,
+    [BasicShapes.roundComment]: RoundCommentEngine,
+    [FlowchartSymbols.process]: RectangleEngine,
+    [FlowchartSymbols.decision]: DiamondEngine,
+    [FlowchartSymbols.connector]: EllipseEngine,
+    [FlowchartSymbols.data]: ParallelogramEngine,
+    [FlowchartSymbols.terminal]: TerminalEngine,
+    [FlowchartSymbols.manualInput]: ManualInputEngine,
+    [FlowchartSymbols.preparation]: PreparationEngine,
+    [FlowchartSymbols.manualLoop]: ManualLoopEngine,
+    [FlowchartSymbols.merge]: MergeEngine,
+    [FlowchartSymbols.delay]: DelayEngine,
+    [FlowchartSymbols.storedData]: StoredDataEngine
 };
-const getMemorizedLatestShape = (board) => {
-    return memorizedShape.get(board);
+const getEngine = (shape) => {
+    return ShapeEngineMap[shape];
 };
 
 const createGeometryElement = (shape, points, text, options = {}, textProperties = {}) => {
@@ -1298,13 +2259,8 @@ const createGeometryElement = (shape, points, text, options = {}, textProperties
         ...options
     };
 };
-const getPointsByCenterPoint = (point, width, height) => {
-    const leftTopPoint = [point[0] - width / 2, point[1] - height / 2];
-    const rightBottomPoint = [point[0] + width / 2, point[1] + height / 2];
-    return [leftTopPoint, rightBottomPoint];
-};
 const getTextRectangle = (element) => {
-    const elementRectangle = getRectangleByPoints(element.points);
+    const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
     const strokeWidth = getStrokeWidthByElement(element);
     const height = element.textHeight;
     const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
@@ -1317,7 +2273,7 @@ const getTextRectangle = (element) => {
 };
 const drawBoundMask = (board, element) => {
     const G = createG();
-    const rectangle = getRectangleByPoints(element.points);
+    const rectangle = RectangleClient.getRectangleByPoints(element.points);
     const activeRectangle = RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH);
     const shape = getShape(element);
     const maskG = drawGeometry(board, activeRectangle, shape, {
@@ -1342,11 +2298,10 @@ const drawBoundMask = (board, element) => {
 const drawGeometry = (board, outerRectangle, shape, options) => {
     return getEngine(shape).draw(board, outerRectangle, options);
 };
-const getNearestPoint = (element, point, inflateDelta = 0) => {
-    const rectangle = getRectangleByPoints(element.points);
-    const activeRectangle = RectangleClient.inflate(rectangle, inflateDelta);
+const getNearestPoint = (element, point) => {
+    const rectangle = RectangleClient.getRectangleByPoints(element.points);
     const shape = getShape(element);
-    return getEngine(shape).getNearestPoint(activeRectangle, point);
+    return getEngine(shape).getNearestPoint(rectangle, point);
 };
 const getCenterPointsOnPolygon = (points) => {
     const centerPoint = [];
@@ -1356,17 +2311,6 @@ const getCenterPointsOnPolygon = (points) => {
     }
     return centerPoint;
 };
-const getEdgeOnPolygonByPoint = (corners, point) => {
-    for (let index = 1; index <= corners.length; index++) {
-        let start = corners[index - 1];
-        let end = index === corners.length ? corners[0] : corners[index];
-        const distance = distanceBetweenPointAndSegment(point[0], point[1], start[0], start[1], end[0], end[1]);
-        if (distance < 1) {
-            return [start, end];
-        }
-    }
-    return null;
-};
 const getDefaultFlowchartProperty = (symbol) => {
     return DefaultFlowchartPropertyMap[symbol];
 };
@@ -1382,525 +2326,194 @@ const createDefaultFlowchart = (point) => {
     };
     const startElement = createGeometryElement(FlowchartSymbols.terminal, getDefaultGeometryPoints(FlowchartSymbols.terminal, point), '开始', options);
     const processPoint1 = [point[0], point[1] + terminalProperty.height / 2 + 55 + processProperty.height / 2];
-    const processElement1 = createGeometryElement(FlowchartSymbols.process, getDefaultGeometryPoints(FlowchartSymbols.process, processPoint1), '过程', options);
-    const decisionPoint = [processPoint1[0], processPoint1[1] + processProperty.height / 2 + 55 + decisionProperty.height / 2];
-    const decisionElement = createGeometryElement(FlowchartSymbols.decision, getDefaultGeometryPoints(FlowchartSymbols.decision, decisionPoint), '过程', options);
-    const processPoint2 = [decisionPoint[0] + decisionProperty.width / 2 + 75 + processProperty.width / 2, decisionPoint[1]];
-    const processElement2 = createGeometryElement(FlowchartSymbols.process, getDefaultGeometryPoints(FlowchartSymbols.process, processPoint2), '过程', options);
-    const endPoint = [decisionPoint[0], decisionPoint[1] + decisionProperty.height / 2 + 95 + terminalProperty.height / 2];
-    const endElement = createGeometryElement(FlowchartSymbols.terminal, getDefaultGeometryPoints(FlowchartSymbols.terminal, endPoint), '结束', options);
-    const line1 = createLineElement(LineShape.elbow, [
-        [0, 0],
-        [0, 0]
-    ], { marker: LineMarkerType.none, connection: [0.5, 1], boundId: startElement.id }, { marker: LineMarkerType.arrow, connection: [0.5, 0], boundId: processElement1.id }, [], lineOptions);
-    const line2 = createLineElement(LineShape.elbow, [
-        [0, 0],
-        [0, 0]
-    ], { marker: LineMarkerType.none, connection: [0.5, 1], boundId: processElement1.id }, { marker: LineMarkerType.arrow, connection: [0.5, 0], boundId: decisionElement.id }, [], lineOptions);
-    const line3 = createLineElement(LineShape.elbow, [
-        [0, 0],
-        [0, 0]
-    ], { marker: LineMarkerType.none, connection: [0.5, 1], boundId: decisionElement.id }, { marker: LineMarkerType.arrow, connection: [0.5, 0], boundId: endElement.id }, [
-        {
-            text: buildText('是'),
-            position: 0.5,
-            width: 14,
-            height: 20
-        }
-    ], lineOptions);
-    const line4 = createLineElement(LineShape.elbow, [
-        [0, 0],
-        [0, 0]
-    ], { marker: LineMarkerType.none, connection: [1, 0.5], boundId: decisionElement.id }, { marker: LineMarkerType.arrow, connection: [0, 0.5], boundId: processElement2.id }, [
-        {
-            text: buildText('否'),
-            position: 0.5,
-            width: 14,
-            height: 20
-        }
-    ], lineOptions);
-    const line5 = createLineElement(LineShape.elbow, [
-        [0, 0],
-        [0, 0]
-    ], { marker: LineMarkerType.none, connection: [0.5, 1], boundId: processElement2.id }, { marker: LineMarkerType.arrow, connection: [1, 0.5], boundId: endElement.id }, [], lineOptions);
-    return [startElement, processElement1, decisionElement, processElement2, endElement, line1, line2, line3, line4, line5];
-};
-const getAutoCompletePoints = (element) => {
-    const AutoCompleteMargin = (12 + RESIZE_HANDLE_DIAMETER / 2) * 2;
-    let rectangle = getRectangleByPoints(element.points);
-    rectangle = RectangleClient.inflate(rectangle, AutoCompleteMargin);
-    return RectangleClient.getEdgeCenterPoints(rectangle);
-};
-const getHitIndexOfAutoCompletePoint = (movingPoint, points) => {
-    return points.findIndex(point => {
-        const movingRectangle = RectangleClient.toRectangleClient([movingPoint]);
-        let rectangle = RectangleClient.toRectangleClient([point]);
-        rectangle = RectangleClient.inflate(rectangle, RESIZE_HANDLE_DIAMETER);
-        return RectangleClient.isHit(movingRectangle, rectangle);
-    });
-};
-const getDrawDefaultStrokeColor = (theme) => {
-    return DrawThemeColors[theme].strokeColor;
-};
-const getFlowchartDefaultFill = (theme) => {
-    return DrawThemeColors[theme].fill;
-};
-const getTextShapeProperty = (board, text = DefaultTextProperty.text, fontSize) => {
-    fontSize = fontSize ? Number(fontSize) : DEFAULT_FONT_SIZE;
-    const textSize = getTextSize(board, text, Infinity, { fontSize });
-    return {
-        width: textSize.width + ShapeDefaultSpace.rectangleAndText * 2,
-        height: textSize.height
-    };
-};
-const getDefaultGeometryPoints = (pointer, centerPoint) => {
-    const defaultProperty = getDefaultGeometryProperty(pointer);
-    return getPointsByCenterPoint(centerPoint, defaultProperty.width, defaultProperty.height);
-};
-const getDefaultGeometryProperty = (pointer) => {
-    const isFlowChart = getFlowchartPointers().includes(pointer);
-    if (isFlowChart) {
-        return getDefaultFlowchartProperty(pointer);
-    }
-    else {
-        return DefaultBasicShapeProperty;
-    }
-};
-const getDefaultTextPoints = (board, centerPoint, fontSize) => {
-    const property = getTextShapeProperty(board, DefaultTextProperty.text, fontSize);
-    return getPointsByCenterPoint(centerPoint, property.width, property.height);
-};
-const insertElement = (board, element) => {
-    memorizeLatestShape(board, element.shape);
-    Transforms.insertNode(board, element, [board.children.length]);
-    clearSelectedElement(board);
-    addSelectedElement(board, element);
-    BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
-};
-const createTextElement = (board, points, text = DefaultTextProperty.text, textHeight) => {
-    const memorizedLatest = getMemorizedLatestByPointer(BasicShapes.text);
-    textHeight = textHeight ? textHeight : getRectangleByPoints(points).height;
-    return createGeometryElement(BasicShapes.text, points, text, memorizedLatest.geometryProperties, {
-        ...memorizedLatest.textProperties,
-        textHeight
-    });
-};
-const createDefaultGeometry = (board, points, shape) => {
-    const memorizedLatest = getMemorizedLatestByPointer(shape);
-    const textHeight = getTextShapeProperty(board, DefaultTextProperty.text, memorizedLatest.textProperties['font-size']).height;
-    return createGeometryElement(shape, points, '', {
-        strokeWidth: DefaultBasicShapeProperty.strokeWidth,
-        ...memorizedLatest.geometryProperties
-    }, { ...memorizedLatest.textProperties, textHeight });
-};
-
-const ARROW_LENGTH = 20;
-const drawLineArrow = (element, points, options) => {
-    const arrowG = createG();
-    if (PlaitLine.isSourceMark(element, LineMarkerType.none) && PlaitLine.isTargetMark(element, LineMarkerType.none)) {
-        return null;
-    }
-    const strokeWidth = getStrokeWidthByElement(element);
-    const offset = (strokeWidth * strokeWidth) / 3;
-    if (points.length === 1) {
-        points = [points[0], [points[0][0] + 0.1, points[0][1]]];
-    }
-    if (!PlaitLine.isSourceMark(element, LineMarkerType.none)) {
-        const source = getExtendPoint(points[0], points[1], ARROW_LENGTH + offset);
-        const sourceArrow = getArrow(element, { marker: element.source.marker, source, target: points[0], isSource: true }, options);
-        sourceArrow && arrowG.appendChild(sourceArrow);
-    }
-    if (!PlaitLine.isTargetMark(element, LineMarkerType.none)) {
-        const source = getExtendPoint(points[points.length - 1], points[points.length - 2], ARROW_LENGTH + offset);
-        const arrow = getArrow(element, { marker: element.target.marker, source, target: points[points.length - 1], isSource: false }, options);
-        arrow && arrowG.appendChild(arrow);
-    }
-    return arrowG;
-};
-const getArrow = (element, arrowOptions, options) => {
-    const { marker, target, source, isSource } = arrowOptions;
-    let targetArrow;
-    switch (marker) {
-        case LineMarkerType.openTriangle: {
-            targetArrow = drawOpenTriangle(element, source, target, options);
-            break;
-        }
-        case LineMarkerType.solidTriangle: {
-            targetArrow = drawSolidTriangle(source, target, options);
-            break;
-        }
-        case LineMarkerType.arrow: {
-            targetArrow = drawArrow(element, source, target, options);
-            break;
-        }
-        case LineMarkerType.sharpArrow: {
-            targetArrow = drawSharpArrow(source, target, options);
-            break;
-        }
-        case LineMarkerType.oneSideUp: {
-            targetArrow = drawOneSideArrow(source, target, isSource ? 'down' : 'up', options);
-            break;
-        }
-        case LineMarkerType.oneSideDown: {
-            targetArrow = drawOneSideArrow(source, target, isSource ? 'up' : 'down', options);
-            break;
-        }
-        case LineMarkerType.hollowTriangle: {
-            targetArrow = drawHollowTriangleArrow(source, target, options);
-            break;
-        }
-        case LineMarkerType.singleSlash: {
-            targetArrow = drawSingleSlash(source, target, isSource, options);
-            break;
-        }
-    }
-    return targetArrow;
-};
-const drawSharpArrow = (source, target, options) => {
-    const startPoint = target;
-    const { pointLeft, pointRight } = arrowPoints(source, target, 20);
-    const g = createG();
-    const path = createPath();
-    let polylinePath = `M${pointRight[0]},${pointRight[1]}A25,25,20,0,1,${pointLeft[0]},${pointLeft[1]}L${startPoint[0]},${startPoint[1]}Z`;
-    path.setAttribute('d', polylinePath);
-    path.setAttribute('stroke', `${options?.stroke}`);
-    path.setAttribute('stroke-width', `${options?.strokeWidth}`);
-    path.setAttribute('fill', `${options?.stroke}`);
-    g.appendChild(path);
-    return g;
-};
-const drawArrow = (element, source, target, options) => {
-    const directionFactor = getFactorByPoints(source, target);
-    const strokeWidth = getStrokeWidthByElement(element);
-    const endPoint = [target[0] + (strokeWidth * directionFactor.x) / 2, target[1] + (strokeWidth * directionFactor.y) / 2];
-    const distance = distanceBetweenPointAndPoint(...source, ...endPoint);
-    const middlePoint = [
-        endPoint[0] - (((distance * 3) / 5 + strokeWidth) / 2) * directionFactor.x,
-        endPoint[1] - (((distance * 3) / 5 + strokeWidth) / 2) * directionFactor.y
-    ];
-    const { pointLeft, pointRight } = arrowPoints(source, endPoint, 30);
-    const arrowG = drawLinearPath([pointLeft, endPoint, pointRight, middlePoint], { ...options, fill: options.stroke }, true);
-    const path = arrowG.querySelector('path');
-    path.setAttribute('stroke-linejoin', 'round');
-    return arrowG;
-};
-const drawSolidTriangle = (source, target, options) => {
-    const endPoint = target;
-    const { pointLeft, pointRight } = arrowPoints(source, endPoint, 30);
-    return drawLinearPath([pointLeft, endPoint, pointRight], { ...options, fill: options.stroke }, true);
-};
-const drawOpenTriangle = (element, source, target, options) => {
-    const directionFactor = getFactorByPoints(source, target);
-    const strokeWidth = getStrokeWidthByElement(element);
-    const endPoint = [target[0] + (strokeWidth * directionFactor.x) / 2, target[1] + (strokeWidth * directionFactor.y) / 2];
-    const { pointLeft, pointRight } = arrowPoints(source, endPoint, 40);
-    return drawLinearPath([pointLeft, endPoint, pointRight], options);
-};
-const drawOneSideArrow = (source, target, side, options) => {
-    const { pointLeft, pointRight } = arrowPoints(source, target, 40);
-    return drawLinearPath([side === 'up' ? pointRight : pointLeft, target], options);
-};
-const drawSingleSlash = (source, target, isSource, options) => {
-    const length = distanceBetweenPointAndPoint(...source, ...target);
-    const middlePoint = getExtendPoint(target, source, length / 2);
-    const angle = isSource ? 120 : 60;
-    const start = rotate(...source, ...middlePoint, (angle * Math.PI) / 180);
-    const end = rotate(...target, ...middlePoint, (angle * Math.PI) / 180);
-    return drawLinearPath([start, end], options);
+    const processElement1 = createGeometryElement(FlowchartSymbols.process, getDefaultGeometryPoints(FlowchartSymbols.process, processPoint1), '过程', options);
+    const decisionPoint = [processPoint1[0], processPoint1[1] + processProperty.height / 2 + 55 + decisionProperty.height / 2];
+    const decisionElement = createGeometryElement(FlowchartSymbols.decision, getDefaultGeometryPoints(FlowchartSymbols.decision, decisionPoint), '过程', options);
+    const processPoint2 = [decisionPoint[0] + decisionProperty.width / 2 + 75 + processProperty.width / 2, decisionPoint[1]];
+    const processElement2 = createGeometryElement(FlowchartSymbols.process, getDefaultGeometryPoints(FlowchartSymbols.process, processPoint2), '过程', options);
+    const endPoint = [decisionPoint[0], decisionPoint[1] + decisionProperty.height / 2 + 95 + terminalProperty.height / 2];
+    const endElement = createGeometryElement(FlowchartSymbols.terminal, getDefaultGeometryPoints(FlowchartSymbols.terminal, endPoint), '结束', options);
+    const line1 = createLineElement(LineShape.elbow, [
+        [0, 0],
+        [0, 0]
+    ], { marker: LineMarkerType.none, connection: [0.5, 1], boundId: startElement.id }, { marker: LineMarkerType.arrow, connection: [0.5, 0], boundId: processElement1.id }, [], lineOptions);
+    const line2 = createLineElement(LineShape.elbow, [
+        [0, 0],
+        [0, 0]
+    ], { marker: LineMarkerType.none, connection: [0.5, 1], boundId: processElement1.id }, { marker: LineMarkerType.arrow, connection: [0.5, 0], boundId: decisionElement.id }, [], lineOptions);
+    const line3 = createLineElement(LineShape.elbow, [
+        [0, 0],
+        [0, 0]
+    ], { marker: LineMarkerType.none, connection: [0.5, 1], boundId: decisionElement.id }, { marker: LineMarkerType.arrow, connection: [0.5, 0], boundId: endElement.id }, [
+        {
+            text: buildText('是'),
+            position: 0.5,
+            width: 14,
+            height: 20
+        }
+    ], lineOptions);
+    const line4 = createLineElement(LineShape.elbow, [
+        [0, 0],
+        [0, 0]
+    ], { marker: LineMarkerType.none, connection: [1, 0.5], boundId: decisionElement.id }, { marker: LineMarkerType.arrow, connection: [0, 0.5], boundId: processElement2.id }, [
+        {
+            text: buildText('否'),
+            position: 0.5,
+            width: 14,
+            height: 20
+        }
+    ], lineOptions);
+    const line5 = createLineElement(LineShape.elbow, [
+        [0, 0],
+        [0, 0]
+    ], { marker: LineMarkerType.none, connection: [0.5, 1], boundId: processElement2.id }, { marker: LineMarkerType.arrow, connection: [1, 0.5], boundId: endElement.id }, [], lineOptions);
+    return [startElement, processElement1, decisionElement, processElement2, endElement, line1, line2, line3, line4, line5];
 };
-const drawHollowTriangleArrow = (source, target, options) => {
-    const { pointLeft, pointRight } = arrowPoints(source, target, 30);
-    return drawLinearPath([pointLeft, pointRight, target], { ...options, fill: 'white' }, true);
+const getAutoCompletePoints = (element) => {
+    const AutoCompleteMargin = (12 + RESIZE_HANDLE_DIAMETER / 2) * 2;
+    let rectangle = RectangleClient.getRectangleByPoints(element.points);
+    rectangle = RectangleClient.inflate(rectangle, AutoCompleteMargin);
+    return RectangleClient.getEdgeCenterPoints(rectangle);
 };
-
-class LineShapeGenerator extends Generator {
-    canDraw(element, data) {
-        return true;
-    }
-    draw(element, data) {
-        let lineG;
-        lineG = drawLine(this.board, element);
-        return lineG;
-    }
-}
-
-const getHitGeometryResizeHandleRef = (board, element, point) => {
-    const rectangle = getRectangleByPoints(element.points);
-    const resizeHandleRefs = getRectangleResizeHandleRefs(rectangle, RESIZE_HANDLE_DIAMETER);
-    const result = resizeHandleRefs.find(resizeHandleRef => {
-        return RectangleClient.isHit(RectangleClient.toRectangleClient([point, point]), resizeHandleRef.rectangle);
+const getHitIndexOfAutoCompletePoint = (movingPoint, points) => {
+    return points.findIndex(point => {
+        const movingRectangle = RectangleClient.getRectangleByPoints([movingPoint]);
+        let rectangle = RectangleClient.getRectangleByPoints([point]);
+        rectangle = RectangleClient.inflate(rectangle, RESIZE_HANDLE_DIAMETER);
+        return RectangleClient.isHit(movingRectangle, rectangle);
     });
-    return result;
 };
-const getHitOutlineGeometry = (board, point, offset = 0) => {
-    let geometry = null;
-    depthFirstRecursion(board, node => {
-        if (PlaitDrawElement.isGeometry(node) || PlaitDrawElement.isImage(node)) {
-            let client = getRectangleByPoints(node.points);
-            client = RectangleClient.getOutlineRectangle(client, offset);
-            const shape = getShape(node);
-            const isHit = getEngine(shape).isHit(client, point);
-            if (isHit) {
-                geometry = node;
-            }
-        }
-    }, getIsRecursionFunc(board), true);
-    return geometry;
+const getDrawDefaultStrokeColor = (theme) => {
+    return DrawThemeColors[theme].strokeColor;
 };
-
-const createLineElement = (shape, points, source, target, texts, options) => {
+const getFlowchartDefaultFill = (theme) => {
+    return DrawThemeColors[theme].fill;
+};
+const getTextShapeProperty = (board, text = DefaultTextProperty.text, fontSize) => {
+    fontSize = fontSize ? Number(fontSize) : DEFAULT_FONT_SIZE;
+    const textSize = getTextSize(board, text, Infinity, { fontSize });
     return {
-        id: idCreator(),
-        type: 'line',
-        shape,
-        source,
-        texts: texts ? texts : [],
-        target,
-        opacity: 1,
-        points,
-        ...options
+        width: textSize.width + ShapeDefaultSpace.rectangleAndText * 2,
+        height: textSize.height
     };
 };
-const getLinePoints = (board, element) => {
-    switch (element.shape) {
-        case LineShape.elbow: {
-            return getElbowPoints(board, element);
-        }
-        case LineShape.curve: {
-            return getCurvePoints(board, element);
-        }
-        default: {
-            const points = PlaitLine.getPoints(board, element);
-            const handleRefPair = getLineHandleRefPair(board, element);
-            points[0] = handleRefPair.source.point;
-            points[points.length - 1] = handleRefPair.target.point;
-            return points;
-        }
-    }
+const getDefaultGeometryPoints = (pointer, centerPoint) => {
+    const property = getDefaultGeometryProperty(pointer);
+    return RectangleClient.getPoints(RectangleClient.getRectangleByCenterPoint(centerPoint, property.width, property.height));
 };
-const getLineHandleRefPair = (board, element) => {
-    const strokeWidth = getStrokeWidthByElement(element);
-    const sourceBoundElement = element.source.boundId ? getElementById(board, element.source.boundId) : undefined;
-    const targetBoundElement = element.target.boundId ? getElementById(board, element.target.boundId) : undefined;
-    let sourcePoint = sourceBoundElement ? getConnectionPoint(sourceBoundElement, element.source.connection) : element.points[0];
-    let targetPoint = targetBoundElement
-        ? getConnectionPoint(targetBoundElement, element.target.connection)
-        : element.points[element.points.length - 1];
-    let sourceDirection = getDirectionByVector([targetPoint[0] - sourcePoint[0], targetPoint[1] - sourcePoint[1]]) || Direction.right;
-    let targetDirection = getOppositeDirection(sourceDirection);
-    const sourceFactor = getDirectionFactor(sourceDirection);
-    const targetFactor = getDirectionFactor(targetDirection);
-    const sourceHandleRef = {
-        key: LineHandleKey.source,
-        point: sourcePoint,
-        direction: sourceDirection,
-        vector: [sourceFactor.x, sourceFactor.y]
-    };
-    const targetHandleRef = {
-        key: LineHandleKey.target,
-        point: targetPoint,
-        direction: targetDirection,
-        vector: [targetFactor.x, targetFactor.y]
-    };
-    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.boundElement = sourceBoundElement;
-        sourceHandleRef.direction = sourceDirection;
-        sourceHandleRef.point = sourcePoint;
-        sourceHandleRef.vector = sourceVector;
+const getDefaultGeometryProperty = (pointer) => {
+    const isFlowChart = getFlowchartPointers().includes(pointer);
+    if (isFlowChart) {
+        return getDefaultFlowchartProperty(pointer);
     }
-    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.boundElement = targetBoundElement;
-        targetHandleRef.direction = targetDirection;
-        targetHandleRef.point = targetPoint;
-        targetHandleRef.vector = targetVector;
+    else {
+        return DefaultBasicShapeProperty;
     }
-    return { source: sourceHandleRef, target: targetHandleRef };
 };
-const createFakeElement = (startPoint, vector) => {
-    const point = getPointByVector(startPoint, vector, -25);
-    const points = getPointsByCenterPoint(point, 50, 50);
-    return createGeometryElement(BasicShapes.rectangle, points, '');
+const getDefaultTextPoints = (board, centerPoint, fontSize) => {
+    const property = getTextShapeProperty(board, DefaultTextProperty.text, fontSize);
+    return RectangleClient.getPoints(RectangleClient.getRectangleByCenterPoint(centerPoint, property.width, property.height));
 };
-const getElbowPoints = (board, element) => {
-    if (element.points.length === 2) {
-        const handleRefPair = getLineHandleRefPair(board, element);
-        let sourceElement = element.source.boundId ? getElementById(board, element.source.boundId) : undefined;
-        let targetElement = element.target.boundId ? getElementById(board, element.target.boundId) : undefined;
-        let points = [];
-        if (!sourceElement) {
-            const source = handleRefPair.source;
-            sourceElement = createFakeElement(source.point, source.vector);
-        }
-        if (!targetElement) {
-            const target = handleRefPair.target;
-            targetElement = createFakeElement(target.point, target.vector);
-        }
-        const targetRectangle = RectangleClient.inflate(getRectangleByPoints(targetElement.points), getStrokeWidthByElement(targetElement) * 2);
-        const sourceRectangle = RectangleClient.inflate(getRectangleByPoints(sourceElement.points), getStrokeWidthByElement(sourceElement) * 2);
-        const sourcePoint = handleRefPair.source.point;
-        const targetPoint = handleRefPair.target.point;
-        const { sourceOffset, targetOffset } = reduceRouteMargin(sourceRectangle, targetRectangle);
-        const sourceOuterRectangle = RectangleClient.expand(sourceRectangle, sourceOffset[3], sourceOffset[0], sourceOffset[1], sourceOffset[2]);
-        const targetOuterRectangle = RectangleClient.expand(targetRectangle, targetOffset[3], targetOffset[0], targetOffset[1], targetOffset[2]);
-        const nextSourcePoint = getNextPoint(sourcePoint, sourceOuterRectangle, handleRefPair.source.direction);
-        const nextTargetPoint = getNextPoint(targetPoint, targetOuterRectangle, handleRefPair.target.direction);
-        const isIntersect = RectangleClient.isPointInRectangle(targetRectangle, sourcePoint) ||
-            RectangleClient.isPointInRectangle(targetOuterRectangle, nextSourcePoint) ||
-            RectangleClient.isPointInRectangle(sourceOuterRectangle, nextTargetPoint) ||
-            RectangleClient.isPointInRectangle(sourceRectangle, targetPoint);
-        if (!isIntersect) {
-            points = generateElbowLineRoute({
-                sourcePoint,
-                nextSourcePoint,
-                sourceRectangle,
-                sourceOuterRectangle,
-                targetPoint,
-                nextTargetPoint,
-                targetRectangle,
-                targetOuterRectangle
-            });
-        }
-        else {
-            points = getPoints(handleRefPair.source.point, handleRefPair.source.direction, handleRefPair.target.point, handleRefPair.target.direction, 0);
-        }
-        points = removeDuplicatePoints(points);
-        return points;
-    }
-    return element.points;
+const insertElement = (board, element) => {
+    memorizeLatestShape(board, element.shape);
+    Transforms.insertNode(board, element, [board.children.length]);
+    clearSelectedElement(board);
+    addSelectedElement(board, element);
+    BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
 };
-const getCurvePoints = (board, element) => {
-    if (element.points.length === 2) {
-        const handleRefPair = getLineHandleRefPair(board, element);
-        const { source, target } = handleRefPair;
-        const sourceBoundElement = handleRefPair.source.boundElement;
-        const targetBoundElement = handleRefPair.target.boundElement;
-        let curvePoints = [source.point];
-        const sumDistance = distanceBetweenPointAndPoint(...source.point, ...target.point);
-        const offset = 12 + sumDistance / 3;
-        if (sourceBoundElement) {
-            curvePoints.push(getPointByVector(source.point, source.vector, offset));
-        }
-        if (targetBoundElement) {
-            curvePoints.push(getPointByVector(target.point, target.vector, offset));
-        }
-        const isSingleBound = (sourceBoundElement && !targetBoundElement) || (!sourceBoundElement && targetBoundElement);
-        if (isSingleBound) {
-            curvePoints.push(target.point);
-            const points = Q2C(curvePoints);
-            return pointsOnBezierCurves(points);
-        }
-        if (!sourceBoundElement && !targetBoundElement) {
-            curvePoints.push(getPointByVector(source.point, source.vector, offset));
-            curvePoints.push(getPointByVector(target.point, target.vector, offset));
-        }
-        curvePoints.push(target.point);
-        return pointsOnBezierCurves(curvePoints);
-    }
-    else {
-        let allPoints = PlaitLine.getPoints(board, element);
-        allPoints = removeDuplicatePoints(allPoints);
-        const points = catmullRomFitting(allPoints);
-        return pointsOnBezierCurves(points);
-    }
+const createTextElement = (board, points, text = DefaultTextProperty.text, textHeight) => {
+    const memorizedLatest = getMemorizedLatestByPointer(BasicShapes.text);
+    textHeight = textHeight ? textHeight : RectangleClient.getRectangleByPoints(points).height;
+    return createGeometryElement(BasicShapes.text, points, text, memorizedLatest.geometryProperties, {
+        ...memorizedLatest.textProperties,
+        textHeight
+    });
 };
-const transformOpsToPoints = (ops) => {
-    const result = [];
-    for (let item of ops) {
-        if (item.op === 'move') {
-            result.push([item.data[0], item.data[1]]);
-        }
-        else {
-            result.push([item.data[0], item.data[1]]);
-            result.push([item.data[2], item.data[3]]);
-            result.push([item.data[4], item.data[5]]);
-        }
+const createDefaultGeometry = (board, points, shape) => {
+    const memorizedLatest = getMemorizedLatestByPointer(shape);
+    const textHeight = getTextShapeProperty(board, DefaultTextProperty.text, memorizedLatest.textProperties['font-size']).height;
+    return createGeometryElement(shape, points, '', {
+        strokeWidth: DefaultBasicShapeProperty.strokeWidth,
+        ...memorizedLatest.geometryProperties
+    }, { ...memorizedLatest.textProperties, textHeight });
+};
+
+const getStrokeWidthByElement = (element) => {
+    if (PlaitDrawElement.isText(element)) {
+        return 0;
     }
-    return result;
+    const strokeWidth = element.strokeWidth || DefaultGeometryStyle.strokeWidth;
+    return strokeWidth;
 };
-const isHitPolyLine = (pathPoints, point, strokeWidth, expand = 0) => {
-    const distance = distanceBetweenPointAndSegments(pathPoints, point);
-    return distance <= strokeWidth + expand;
+const getStrokeColorByElement = (board, element) => {
+    const defaultColor = getDrawDefaultStrokeColor(board.theme.themeColorMode);
+    const strokeColor = element.strokeColor || defaultColor;
+    return strokeColor;
+};
+const getFillByElement = (board, element) => {
+    const defaultFill = PlaitDrawElement.isFlowchart(element)
+        ? getFlowchartDefaultFill(board.theme.themeColorMode)
+        : DefaultGeometryStyle.fill;
+    const fill = element.fill || defaultFill;
+    return fill;
 };
-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.toRectangleClient([point, point]));
-    });
+const getLineDashByElement = (element) => {
+    return element.strokeStyle === 'dashed' ? [8, 8 + getStrokeWidthByElement(element)] : undefined;
 };
-const isHitLineText = (board, element, point) => {
-    return getHitLineTextIndex(board, element, point) !== -1;
+const getStrokeStyleByElement = (element) => {
+    return element.strokeStyle || StrokeStyle.solid;
 };
-const drawLine = (board, element) => {
+
+const getLineHandleRefPair = (board, element) => {
     const strokeWidth = getStrokeWidthByElement(element);
-    const strokeColor = getStrokeColorByElement(board, element);
-    const strokeLineDash = getLineDashByElement(element);
-    const options = { stroke: strokeColor, strokeWidth, strokeLineDash };
-    const lineG = createG();
-    let points = getLinePoints(board, element);
-    let line;
-    if (element.shape === LineShape.curve) {
-        line = PlaitBoard.getRoughSVG(board).curve(points, options);
+    const sourceBoundElement = element.source.boundId ? getElementById(board, element.source.boundId) : undefined;
+    const targetBoundElement = element.target.boundId ? getElementById(board, element.target.boundId) : undefined;
+    let sourcePoint = sourceBoundElement ? getConnectionPoint(sourceBoundElement, element.source.connection) : element.points[0];
+    let targetPoint = targetBoundElement
+        ? getConnectionPoint(targetBoundElement, element.target.connection)
+        : element.points[element.points.length - 1];
+    let sourceDirection = getDirectionByVector([targetPoint[0] - sourcePoint[0], targetPoint[1] - sourcePoint[1]]) || Direction.right;
+    let targetDirection = getOppositeDirection(sourceDirection);
+    const sourceFactor = getDirectionFactor(sourceDirection);
+    const targetFactor = getDirectionFactor(targetDirection);
+    const sourceHandleRef = {
+        key: LineHandleKey.source,
+        point: sourcePoint,
+        direction: sourceDirection,
+        vector: [sourceFactor.x, sourceFactor.y]
+    };
+    const targetHandleRef = {
+        key: LineHandleKey.target,
+        point: targetPoint,
+        direction: targetDirection,
+        vector: [targetFactor.x, targetFactor.y]
+    };
+    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.boundElement = sourceBoundElement;
+        sourceHandleRef.direction = sourceDirection;
+        sourceHandleRef.point = sourcePoint;
+        sourceHandleRef.vector = sourceVector;
     }
-    else {
-        line = drawLinearPath(points, options);
+    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.boundElement = targetBoundElement;
+        targetHandleRef.direction = targetDirection;
+        targetHandleRef.point = targetPoint;
+        targetHandleRef.vector = targetVector;
     }
-    const id = idCreator();
-    line.setAttribute('mask', `url(#${id})`);
-    lineG.appendChild(line);
-    const { mask, maskTargetFillRect } = drawMask(board, element, id);
-    lineG.appendChild(mask);
-    line.appendChild(maskTargetFillRect);
-    const arrow = drawLineArrow(element, points, { stroke: strokeColor, strokeWidth });
-    arrow && lineG.appendChild(arrow);
-    return lineG;
+    return { source: sourceHandleRef, target: targetHandleRef };
 };
-function drawMask(board, element, id) {
-    const mask = createMask();
-    mask.setAttribute('id', id);
-    const points = getLinePoints(board, element);
-    let rectangle = getRectangleByPoints(points);
-    rectangle = RectangleClient.getOutlineRectangle(rectangle, -30);
-    const maskFillRect = createRect(rectangle, {
-        fill: 'white'
-    });
-    mask.appendChild(maskFillRect);
-    const texts = element.texts;
-    texts.forEach((text, index) => {
-        let textRectangle = getLineTextRectangle(board, element, index);
-        textRectangle = RectangleClient.inflate(textRectangle, LINE_TEXT_SPACE * 2);
-        const rect = createRect(textRectangle, {
-            fill: 'black'
-        });
-        mask.appendChild(rect);
-    });
-    // open line
-    const maskTargetFillRect = createRect(rectangle);
-    maskTargetFillRect.setAttribute('opacity', '0');
-    maskTargetFillRect.setAttribute('fill', 'none');
-    return { mask, maskTargetFillRect };
-}
 const getConnectionPoint = (geometry, connection, direction, delta) => {
-    const rectangle = getRectangleByPoints(geometry.points);
+    const rectangle = RectangleClient.getRectangleByPoints(geometry.points);
     if (direction && delta) {
         const directionFactor = getDirectionFactor(direction);
         const point = RectangleClient.getConnectionPoint(rectangle, connection);
@@ -1910,69 +2523,13 @@ const getConnectionPoint = (geometry, connection, direction, delta) => {
         return RectangleClient.getConnectionPoint(rectangle, connection);
     }
 };
-const transformPointToConnection = (board, point, hitElement) => {
-    let rectangle = getRectangleByPoints(hitElement.points);
-    rectangle = RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH);
-    let nearestPoint = getNearestPoint(hitElement, point, ACTIVE_STROKE_WIDTH);
-    const hitConnector = getHitConnectorPoint(nearestPoint, hitElement, rectangle);
-    nearestPoint = hitConnector ? hitConnector : nearestPoint;
-    return [(nearestPoint[0] - rectangle.x) / rectangle.width, (nearestPoint[1] - rectangle.y) / rectangle.height];
-};
-// export const getConnectionByPointOnRectangleEdge = (board: PlaitBoard, point: Point, hitElement: PlaitShape): Point => {
-//     let rectangle = getRectangleByPoints(hitElement.points);
-//     const hitConnector = getHitConnectorPoint(point, hitElement, rectangle);
-//     const newPoint = hitConnector ?? point;
-//     return [(newPoint[0] - rectangle.x) / rectangle.width, (newPoint[1] - rectangle.y) / rectangle.height];
-// };
-const getHitConnectorPoint = (movingPoint, hitElement, rectangle) => {
-    const shape = getShape(hitElement);
-    const connector = getEngine(shape).getConnectorPoints(rectangle);
-    const points = getPointsByCenterPoint(movingPoint, 10, 10);
-    const pointRectangle = getRectangleByPoints(points);
-    return connector.find(point => {
-        return RectangleClient.isHit(pointRectangle, RectangleClient.toRectangleClient([point, point]));
-    });
-};
-const getLineTextRectangle = (board, element, index) => {
-    const text = element.texts[index];
-    const elbowPoints = getLinePoints(board, element);
-    const point = getPointOnPolyline(elbowPoints, text.position);
-    return {
-        x: point[0] - text.width / 2,
-        y: point[1] - text.height / 2,
-        width: text.width,
-        height: text.height
-    };
-};
-const getBoardLines = (board) => {
-    return findElements(board, {
-        match: (element) => PlaitDrawElement.isLine(element),
-        recursion: (element) => PlaitDrawElement.isDrawElement(element)
-    });
-};
-// quadratic Bezier to cubic Bezier
-const Q2C = (points) => {
-    const result = [];
-    const numSegments = points.length / 3;
-    for (let i = 0; i < numSegments; i++) {
-        const start = points[i];
-        const qControl = points[i + 1];
-        const end = points[i + 2];
-        const startDistance = distanceBetweenPointAndPoint(...start, ...qControl);
-        const endDistance = distanceBetweenPointAndPoint(...end, ...qControl);
-        const cControl1 = getExtendPoint(start, qControl, (startDistance * 2) / 3);
-        const cControl2 = getExtendPoint(end, qControl, (endDistance * 2) / 3);
-        result.push(start, cControl1, cControl2, end);
-    }
-    return result;
-};
 const getVectorByConnection = (boundElement, connection) => {
-    const rectangle = getRectangleByPoints(boundElement.points);
+    const rectangle = RectangleClient.getRectangleByPoints(boundElement.points);
     const shape = getShape(boundElement);
     const engine = getEngine(shape);
     let vector = [0, 0];
     const direction = getDirectionByPointOfRectangle(connection);
-    if (direction) {
+    if (direction && boundElement.shape !== BasicShapes.ellipse) {
         const factor = getDirectionFactor(direction);
         return [factor.x, factor.y];
     }
@@ -1991,120 +2548,25 @@ const getVectorByConnection = (boundElement, connection) => {
     }
     return vector;
 };
-const alignPoints = (basePoint, movingPoint) => {
-    const offset = 3;
-    const newPoint = [...movingPoint];
-    if (Point.isVerticalAlign(newPoint, basePoint, offset)) {
-        newPoint[0] = basePoint[0];
-    }
-    if (Point.isHorizontalAlign(newPoint, basePoint, offset)) {
-        newPoint[1] = basePoint[1];
-    }
-    return newPoint;
-};
-const handleLineCreating = (board, lineShape, startPoint, movingPoint, sourceElement, lineShapeG) => {
-    const hitElement = getHitOutlineGeometry(board, movingPoint, REACTION_MARGIN);
-    const targetConnection = hitElement ? transformPointToConnection(board, movingPoint, hitElement) : undefined;
-    const connection = sourceElement ? transformPointToConnection(board, startPoint, sourceElement) : undefined;
-    const targetBoundId = hitElement ? hitElement.id : undefined;
-    const lineGenerator = new LineShapeGenerator(board);
-    const memorizedLatest = getLineMemorizedLatest();
-    let sourceMarker, targetMarker;
-    sourceMarker = memorizedLatest.source;
-    targetMarker = memorizedLatest.target;
-    sourceMarker && delete memorizedLatest.source;
-    targetMarker && delete memorizedLatest.target;
-    const temporaryLineElement = createLineElement(lineShape, [startPoint, movingPoint], { marker: sourceMarker || LineMarkerType.none, connection: connection, boundId: sourceElement?.id }, { marker: targetMarker || LineMarkerType.arrow, connection: targetConnection, boundId: targetBoundId }, [], {
-        strokeWidth: DefaultLineStyle.strokeWidth,
-        ...memorizedLatest
-    });
-    const linePoints = getLinePoints(board, temporaryLineElement);
-    const otherPoint = linePoints[0];
-    temporaryLineElement.points[1] = alignPoints(otherPoint, movingPoint);
-    lineGenerator.processDrawing(temporaryLineElement, lineShapeG);
-    PlaitBoard.getElementActiveHost(board).append(lineShapeG);
-    return temporaryLineElement;
-};
-
-const getSelectedDrawElements = (board) => {
-    const selectedElements = getSelectedElements(board).filter(value => PlaitDrawElement.isDrawElement(value));
-    return selectedElements;
-};
-const getSelectedGeometryElements = (board) => {
-    const selectedElements = getSelectedElements(board).filter(value => PlaitDrawElement.isGeometry(value));
-    return selectedElements;
-};
-const getSelectedLineElements = (board) => {
-    const selectedElements = getSelectedElements(board).filter(value => PlaitDrawElement.isLine(value));
-    return selectedElements;
-};
-const getSelectedImageElements = (board) => {
-    const selectedElements = getSelectedElements(board).filter(value => PlaitDrawElement.isImage(value));
-    return selectedElements;
-};
-
-const isTextExceedingBounds = (geometry) => {
-    const client = getRectangleByPoints(geometry.points);
-    if (geometry.textHeight > client.height) {
-        return true;
-    }
-    return false;
-};
-const isRectangleHitDrawElement = (board, element, selection) => {
-    const rangeRectangle = RectangleClient.toRectangleClient([selection.anchor, selection.focus]);
-    if (PlaitDrawElement.isGeometry(element)) {
-        const client = getRectangleByPoints(element.points);
-        if (isTextExceedingBounds(element)) {
-            const textClient = getTextRectangle(element);
-            return RectangleClient.isHit(rangeRectangle, client) || RectangleClient.isHit(rangeRectangle, textClient);
-        }
-        return RectangleClient.isHit(rangeRectangle, client);
-    }
-    if (PlaitDrawElement.isImage(element)) {
-        const client = getRectangleByPoints(element.points);
-        return RectangleClient.isHit(rangeRectangle, client);
-    }
-    if (PlaitDrawElement.isLine(element)) {
-        const points = getLinePoints(board, element);
-        const strokeWidth = getStrokeWidthByElement(element);
-        const isHitText = isHitLineText(board, element, selection.focus);
-        const isHit = isHitPolyLine(points, selection.focus, strokeWidth, 3) || isHitText;
-        const isContainPolyLinePoint = points.some(point => {
-            return RectangleClient.isHit(rangeRectangle, RectangleClient.toRectangleClient([point, point]));
-        });
-        const isIntersect = Point.isEquals(selection.anchor, selection.focus) ? isHit : isPolylineHitRectangle(points, rangeRectangle);
-        return isContainPolyLinePoint || isIntersect;
-    }
-    return null;
-};
-const isHitDrawElement = (board, element, point) => {
-    if (PlaitDrawElement.isGeometry(element)) {
-        const fill = getFillByElement(board, element);
-        // when shape equals text, fill is not allowed
-        if (fill !== DefaultGeometryStyle.fill && fill !== TRANSPARENT && !PlaitDrawElement.isText(element)) {
-            return isRectangleHitDrawElement(board, element, { anchor: point, focus: point });
-        }
-        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;
-            }
-            const strokeWidth = getStrokeWidthByElement(element);
-            const engine = getEngine(getShape(element));
-            const corners = engine.getCornerPoints(getRectangleByPoints(element.points));
-            const isHit = isHitPolyLine(corners, point, strokeWidth, 3);
-            const textClient = getTextRectangle(element);
-            let isHitText = RectangleClient.isPointInRectangle(textClient, point);
-            return isHit || isHitText;
-        }
-    }
-    if (PlaitDrawElement.isImage(element) || PlaitDrawElement.isLine(element)) {
-        return isRectangleHitDrawElement(board, element, { anchor: point, focus: point });
-    }
-    return null;
-};
+const getElbowLineRouteOptions = (board, element, handleRefPair) => {
+    handleRefPair = handleRefPair ?? getLineHandleRefPair(board, element);
+    const { sourceRectangle, targetRectangle } = getSourceAndTargetRectangle(board, element, handleRefPair);
+    const { sourceOuterRectangle, targetOuterRectangle } = getSourceAndTargetOuterRectangle(sourceRectangle, targetRectangle);
+    const sourcePoint = handleRefPair.source.point;
+    const targetPoint = handleRefPair.target.point;
+    const nextSourcePoint = getNextPoint(sourcePoint, sourceOuterRectangle, handleRefPair.source.direction);
+    const nextTargetPoint = getNextPoint(targetPoint, targetOuterRectangle, handleRefPair.target.direction);
+    return {
+        sourcePoint,
+        nextSourcePoint,
+        sourceRectangle,
+        sourceOuterRectangle,
+        targetPoint,
+        nextTargetPoint,
+        targetRectangle,
+        targetOuterRectangle
+    };
+};
 
 var LineMarkerType;
 (function (LineMarkerType) {
@@ -2212,7 +2674,7 @@ class GeometryShapeGenerator extends Generator {
         return true;
     }
     draw(element, data) {
-        const rectangle = getRectangleByPoints(element.points);
+        const rectangle = RectangleClient.getRectangleByPoints(element.points);
         const shape = element.shape;
         if (shape === BasicShapes.text) {
             return;
@@ -2261,9 +2723,6 @@ const setLineShape = (board, newProperties) => {
         if (element.shape === newProperties.shape) {
             return;
         }
-        if (newProperties.shape === LineShape.elbow) {
-            _properties.points = [element.points[0], element.points[element.points.length - 1]];
-        }
         const path = PlaitBoard.findPath(board, element);
         Transforms.setNode(board, _properties, path);
     });
@@ -2285,7 +2744,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 = transformPointToConnection(board, point, geometry);
+            object.connection = getConnectionByNearestPoint(board, point, geometry);
             const path = PlaitBoard.findPath(board, line);
             const index = refs.findIndex(obj => Path.equals(obj.path, path));
             if (index === -1) {
@@ -2305,7 +2764,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 = transformPointToConnection(board, point, geometryElement);
+    const connection = getConnectionByNearestPoint(board, point, geometryElement);
     if (connection) {
         let source = lineElement.source;
         let target = lineElement.target;
@@ -2345,7 +2804,7 @@ const insertGeometryByVector = (board, point, shape, vector) => {
             offset = -shapeProperty.height / 2;
         }
         const vectorPoint = getPointByVector(point, vector, offset);
-        const points = getPointsByCenterPoint(vectorPoint, shapeProperty.width, shapeProperty.height);
+        const points = RectangleClient.getPoints(RectangleClient.getRectangleByCenterPoint(vectorPoint, shapeProperty.width, shapeProperty.height));
         return insertGeometry(board, points, shape);
     }
     return null;
@@ -2544,7 +3003,7 @@ class GeometryComponent extends CommonPluginElement {
                 }
             },
             getRectangle: (element) => {
-                return getRectangleByPoints(element.points);
+                return RectangleClient.getRectangleByPoints(element.points);
             },
             hasResizeHandle: () => {
                 const selectedElements = getSelectedElements(this.board);
@@ -2656,6 +3115,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; } });
 
 class LineActiveGenerator extends Generator {
+    constructor() {
+        super(...arguments);
+        this.onlySelectedCurrentLine = false;
+    }
     canDraw(element, data) {
         if (data.selected) {
             return true;
@@ -2667,82 +3130,59 @@ class LineActiveGenerator extends Generator {
     draw(element, data) {
         const activeG = createG();
         const selectedElements = getSelectedElements(this.board);
-        const isSingleSelection = selectedElements.length === 1;
-        if (isSingleSelection) {
+        this.onlySelectedCurrentLine = selectedElements.length === 1;
+        if (this.onlySelectedCurrentLine) {
             activeG.classList.add('active');
             activeG.classList.add('line-handle');
             const points = PlaitLine.getPoints(this.board, element);
-            points.forEach(point => {
-                const circle = drawCircle(PlaitBoard.getRoughSVG(this.board), point, RESIZE_HANDLE_DIAMETER, {
-                    stroke: '#999999',
-                    strokeWidth: 1,
-                    fill: '#FFF',
-                    fillStyle: 'solid'
-                });
-                activeG.appendChild(circle);
+            let updatePoints = [...points];
+            let elbowNextRenderPoints = [];
+            if (element.shape === LineShape.elbow) {
+                updatePoints = points.slice(0, 1).concat(points.slice(-1));
+                elbowNextRenderPoints = getNextRenderPoints(this.board, element, data.linePoints);
+            }
+            updatePoints.forEach(point => {
+                const updateHandle = drawPrimaryHandle(this.board, point);
+                activeG.appendChild(updateHandle);
             });
-            getMiddlePoints(this.board, element).forEach(point => {
-                const circle = drawCircle(PlaitBoard.getRoughSVG(this.board), point, RESIZE_HANDLE_DIAMETER, {
-                    stroke: '#FFFFFF80',
-                    strokeWidth: 1,
-                    fill: `${PRIMARY_COLOR}80`,
-                    fillStyle: 'solid'
-                });
+            const middlePoints = getMiddlePoints(this.board, element);
+            for (let i = 0; i < middlePoints.length; i++) {
+                const point = middlePoints[i];
+                if (element.shape === LineShape.elbow && elbowNextRenderPoints.length) {
+                    const handleIndex = getHitPointIndex(middlePoints, point);
+                    const isUpdateHandleIndex = isUpdatedHandleIndex(this.board, element, [...points], elbowNextRenderPoints, handleIndex);
+                    if (isUpdateHandleIndex) {
+                        const updateHandle = drawPrimaryHandle(this.board, point);
+                        activeG.appendChild(updateHandle);
+                        continue;
+                    }
+                }
+                const circle = drawFillPrimaryHandle(this.board, point);
                 activeG.appendChild(circle);
-            });
+            }
         }
         else {
-            const points = getLinePoints(this.board, element);
-            const activeRectangle = getRectangleByPoints(points);
-            let opacity = '0.5';
-            if (activeRectangle.height === 0 || activeRectangle.width === 0) {
-                opacity = '0.8';
-            }
-            const strokeG = drawRectangle(this.board, activeRectangle, {
-                stroke: PRIMARY_COLOR,
-                strokeWidth: DefaultGeometryActiveStyle.selectionStrokeWidth
-            });
-            strokeG.style.opacity = opacity;
-            activeG.appendChild(strokeG);
+            const activeRectangle = this.board.getRectangle(element);
+            if (activeRectangle) {
+                let opacity = '0.5';
+                if (activeRectangle.height === 0 || activeRectangle.width === 0) {
+                    opacity = '0.8';
+                }
+                const strokeG = drawRectangle(this.board, activeRectangle, {
+                    stroke: PRIMARY_COLOR,
+                    strokeWidth: DefaultGeometryActiveStyle.selectionStrokeWidth
+                });
+                strokeG.style.opacity = opacity;
+                activeG.appendChild(strokeG);
+            }
         }
         return activeG;
     }
-}
-function getMiddlePoints(board, element) {
-    const result = [];
-    const shape = element.shape;
-    const hideBuffer = 10;
-    if (shape === LineShape.straight) {
-        const points = PlaitLine.getPoints(board, element);
-        for (let i = 0; i < points.length - 1; i++) {
-            const distance = distanceBetweenPointAndPoint(...points[i], ...points[i + 1]);
-            if (distance < hideBuffer)
-                continue;
-            result.push([(points[i][0] + points[i + 1][0]) / 2, (points[i][1] + points[i + 1][1]) / 2]);
-        }
-    }
-    if (shape === LineShape.curve) {
-        const points = PlaitLine.getPoints(board, element);
-        const pointsOnBezier = getCurvePoints(board, element);
-        if (points.length === 2) {
-            const start = 0;
-            const endIndex = pointsOnBezier.length - 1;
-            const middleIndex = Math.round((start + endIndex) / 2);
-            result.push(pointsOnBezier[middleIndex]);
-        }
-        else {
-            for (let i = 0; i < points.length - 1; i++) {
-                const startIndex = pointsOnBezier.findIndex(point => point[0] === points[i][0] && point[1] === points[i][1]);
-                const endIndex = pointsOnBezier.findIndex(point => point[0] === points[i + 1][0] && point[1] === points[i + 1][1]);
-                const middleIndex = Math.round((startIndex + endIndex) / 2);
-                const distance = distanceBetweenPointAndPoint(...points[i], ...points[i + 1]);
-                if (distance < hideBuffer)
-                    continue;
-                result.push(pointsOnBezier[middleIndex]);
-            }
-        }
+    needUpdate() {
+        const selectedElements = getSelectedElements(this.board);
+        const onlySelectedCurrentLine = selectedElements.length === 1;
+        return onlySelectedCurrentLine !== this.onlySelectedCurrentLine;
     }
-    return result;
 }
 
 class LineComponent extends CommonPluginElement {
@@ -2761,10 +3201,29 @@ class LineComponent extends CommonPluginElement {
     ngOnInit() {
         this.initializeGenerator();
         this.shapeGenerator.processDrawing(this.element, this.g);
-        this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
+        const linePoints = getLinePoints(this.board, this.element);
+        this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+            selected: this.selected,
+            linePoints
+        });
         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);
+        // });
     }
     getBoundedElements() {
         const boundedElements = {};
@@ -2787,21 +3246,31 @@ class LineComponent extends CommonPluginElement {
         const isBoundedElementsChanged = boundedElements.source !== this.boundedElements.source || boundedElements.target !== this.boundedElements.target;
         this.boundedElements = boundedElements;
         const isChangeTheme = this.board.operations.find(op => op.type === 'set_theme');
+        const linePoints = getLinePoints(this.board, this.element);
         if (value.element !== previous.element || isChangeTheme) {
             this.shapeGenerator.processDrawing(this.element, this.g);
-            this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
+            this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+                selected: this.selected,
+                linePoints
+            });
             this.updateText(previous.element.texts, value.element.texts);
             this.updateTextRectangle();
         }
         else {
-            const hasSameSelected = value.selected === previous.selected;
-            if (!hasSameSelected || (value.selected && isSelectionMoving(this.board))) {
-                this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
+            const needUpdate = value.selected !== previous.selected || this.activeGenerator.needUpdate();
+            if (needUpdate) {
+                this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+                    selected: this.selected,
+                    linePoints
+                });
             }
         }
         if (isBoundedElementsChanged) {
             this.shapeGenerator.processDrawing(this.element, this.g);
-            this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
+            this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
+                selected: this.selected,
+                linePoints
+            });
             this.updateTextRectangle();
             return;
         }
@@ -2891,8 +3360,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; } });
 
 const withDrawHotkey = (board) => {
-    const { keydown, dblclick } = board;
-    board.keydown = (event) => {
+    const { keyDown, dblClick } = board;
+    board.keyDown = (event) => {
         const selectedElements = getSelectedElements(board);
         const isSingleSelection = selectedElements.length === 1;
         const targetElement = selectedElements[0];
@@ -2906,16 +3375,16 @@ const withDrawHotkey = (board) => {
             PlaitElement.getComponent(targetElement).editText();
             return;
         }
-        keydown(event);
+        keyDown(event);
     };
-    board.dblclick = (event) => {
+    board.dblClick = (event) => {
         event.preventDefault();
         const geometries = getSelectedGeometryElements(board);
         if (!PlaitBoard.isReadonly(board) && geometries.length === 1) {
             const component = PlaitElement.getComponent(geometries[0]);
             component.editText();
         }
-        dblclick(event);
+        dblClick(event);
     };
     return board;
 };
@@ -2938,7 +3407,7 @@ const withGeometryCreateByDrag = (board) => {
             const memorizedLatest = getMemorizedLatestByPointer(pointer);
             if (pointer === BasicShapes.text) {
                 const property = getTextShapeProperty(board, DefaultTextProperty.text, memorizedLatest.textProperties['font-size']);
-                const points = getPointsByCenterPoint(movingPoint, property.width, property.height);
+                const points = RectangleClient.getPoints(RectangleClient.getRectangleByCenterPoint(movingPoint, property.width, property.height));
                 temporaryElement = createTextElement(board, points);
                 if (!fakeCreateTextRef) {
                     const textManage = new TextManage(board, PlaitBoard.getComponent(board).viewContainerRef, {
@@ -2990,18 +3459,18 @@ const withGeometryCreateByDrag = (board) => {
     return board;
 };
 const withGeometryCreateByDrawing = (board) => {
-    const { pointerDown, pointerMove, pointerUp, keydown, keyup } = board;
+    const { pointerDown, pointerMove, pointerUp, keyDown, keyUp } = board;
     let start = null;
     let geometryShapeG = null;
     let temporaryElement = null;
     let isShift = false;
-    board.keydown = (event) => {
+    board.keyDown = (event) => {
         isShift = isKeyHotkey('shift', event);
-        keydown(event);
+        keyDown(event);
     };
-    board.keyup = (event) => {
+    board.keyUp = (event) => {
         isShift = false;
-        keyup(event);
+        keyUp(event);
     };
     board.pointerDown = (event) => {
         const geometryPointers = getGeometryPointers();
@@ -3014,7 +3483,7 @@ const withGeometryCreateByDrawing = (board) => {
             if (pointer === BasicShapes.text) {
                 const memorizedLatest = getMemorizedLatestByPointer(pointer);
                 const property = getTextShapeProperty(board, DefaultTextProperty.text, memorizedLatest.textProperties['font-size']);
-                const points = getPointsByCenterPoint(point, property.width, property.height);
+                const points = RectangleClient.getPoints(RectangleClient.getRectangleByCenterPoint(point, property.width, property.height));
                 const textElement = createTextElement(board, points);
                 insertElement(board, textElement);
                 start = null;
@@ -3041,7 +3510,7 @@ const withGeometryCreateByDrawing = (board) => {
         const isDrawMode = !!start;
         if (isDrawMode) {
             const targetPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-            const { width, height } = RectangleClient.toRectangleClient([start, targetPoint]);
+            const { width, height } = RectangleClient.getRectangleByPoints([start, targetPoint]);
             if (Math.hypot(width, height) === 0) {
                 const pointer = PlaitBoard.getPointer(board);
                 if (pointer !== BasicShapes.text) {
@@ -3204,7 +3673,7 @@ const withDrawFragment = (baseBoard) => {
     return board;
 };
 const getBoundedLineElements = (board, plaitShapes) => {
-    const lines = getBoardLines(board);
+    const lines = getLines(board);
     return lines.filter(line => plaitShapes.find(shape => PlaitLine.isBoundElementOfSource(line, shape) || PlaitLine.isBoundElementOfTarget(line, shape)));
 };
 
@@ -3256,23 +3725,504 @@ const withLineCreateByDraw = (board) => {
     return board;
 };
 
-const withGeometryResize = (board) => {
-    const { keydown, keyup } = board;
-    let isShift = false;
-    board.keydown = (event) => {
-        isShift = isKeyHotkey('shift', event);
-        keydown(event);
+const ALIGN_TOLERANCE = 2;
+const EQUAL_SPACING = 10;
+const ALIGN_SPACING = 24;
+class ResizeAlignReaction {
+    constructor(board, activeElements) {
+        this.board = board;
+        this.activeElements = activeElements;
+        this.alignRectangles = this.getAlignRectangle();
+    }
+    getAlignRectangle() {
+        const elements = findElements(this.board, {
+            match: element => this.board.isAlign(element) && !this.activeElements.some(item => item.id === element.id),
+            recursion: () => false,
+            isReverse: false
+        });
+        return elements.map(item => this.board.getRectangle(item));
+    }
+    getAlignLineRef(resizeAlignDelta, resizeAlignOptions) {
+        const { deltaX, deltaY } = resizeAlignDelta;
+        const { resizeState, originPoint, handlePoint, isFromCorner, isAspectRatio, resizeOriginPoints } = resizeAlignOptions;
+        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 => {
+            return movePointByZoomAndOriginPoint(p, originPoint, xZoom, yZoom);
+        });
+        return {
+            deltaX,
+            deltaY,
+            xZoom,
+            yZoom,
+            activePoints
+        };
+    }
+    getEqualLineDelta(resizeAlignOptions) {
+        let equalLineDelta = {
+            deltaX: 0,
+            deltaY: 0
+        };
+        const { isAspectRatio, activeRectangle } = resizeAlignOptions;
+        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];
+            if (isAspectRatio) {
+                const deltaHeight = deltaWidth / (activeRectangle.width / activeRectangle.height);
+                equalLineDelta.deltaY = deltaHeight * resizeAlignOptions.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];
+            if (isAspectRatio) {
+                const deltaWidth = deltaHeight * (activeRectangle.width / activeRectangle.height);
+                equalLineDelta.deltaX = deltaWidth * resizeAlignOptions.directionFactors[0];
+                return equalLineDelta;
+            }
+        }
+        return equalLineDelta;
+    }
+    drawEqualLines(activePoints, resizeAlignOptions) {
+        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);
+        for (let alignRectangle of this.alignRectangles) {
+            if (activeRectangle.width === alignRectangle.width && drawHorizontalLine) {
+                widthEqualPoints.push(getEqualLinePoints(alignRectangle, true));
+            }
+            if (activeRectangle.height === alignRectangle.height && drawVerticalLine) {
+                heightEqualPoints.push(getEqualLinePoints(alignRectangle, false));
+            }
+        }
+        if (widthEqualPoints.length && drawHorizontalLine) {
+            widthEqualPoints.push(getEqualLinePoints(activeRectangle, true));
+        }
+        if (heightEqualPoints.length && drawVerticalLine) {
+            heightEqualPoints.push(getEqualLinePoints(activeRectangle, false));
+        }
+        const equalLinePoints = [...widthEqualPoints, ...heightEqualPoints];
+        return drawEqualLines(this.board, equalLinePoints);
+    }
+    getAlignLineDelta(resizeAlignOptions) {
+        let alignLineDelta = {
+            deltaX: 0,
+            deltaY: 0
+        };
+        const { isAspectRatio, activeRectangle, directionFactors } = resizeAlignOptions;
+        const drawHorizontal = directionFactors[0] !== 0 || isAspectRatio;
+        const drawVertical = directionFactors[1] !== 0 || isAspectRatio;
+        if (drawHorizontal) {
+            const xAlignAxis = getTripleAlignAxis(activeRectangle, true);
+            const alignX = directionFactors[0] === -1 ? xAlignAxis[0] : xAlignAxis[2];
+            const deltaX = getMinAlignDelta(this.alignRectangles, alignX, true);
+            if (Math.abs(deltaX) < ALIGN_TOLERANCE) {
+                alignLineDelta.deltaX = deltaX;
+                if (alignLineDelta.deltaX !== 0 && isAspectRatio) {
+                    alignLineDelta.deltaY = alignLineDelta.deltaX / (activeRectangle.width / activeRectangle.height);
+                    return alignLineDelta;
+                }
+            }
+        }
+        if (drawVertical) {
+            const yAlignAxis = getTripleAlignAxis(activeRectangle, false);
+            const alignY = directionFactors[1] === -1 ? yAlignAxis[0] : yAlignAxis[2];
+            const deltaY = getMinAlignDelta(this.alignRectangles, alignY, false);
+            if (Math.abs(deltaY) < ALIGN_TOLERANCE) {
+                alignLineDelta.deltaY = deltaY;
+                if (alignLineDelta.deltaY !== 0 && isAspectRatio) {
+                    alignLineDelta.deltaX = alignLineDelta.deltaY * (activeRectangle.width / activeRectangle.height);
+                    return alignLineDelta;
+                }
+            }
+        }
+        return alignLineDelta;
+    }
+    drawAlignLines(activePoints, resizeAlignOptions) {
+        let alignLinePoints = [];
+        const activeRectangle = RectangleClient.getRectangleByPoints(activePoints);
+        const alignAxisX = getTripleAlignAxis(activeRectangle, true);
+        const alignAxisY = getTripleAlignAxis(activeRectangle, false);
+        const alignLineRefs = [
+            {
+                axis: alignAxisX[0],
+                isHorizontal: true,
+                alignRectangles: []
+            },
+            {
+                axis: alignAxisX[2],
+                isHorizontal: true,
+                alignRectangles: []
+            },
+            {
+                axis: alignAxisY[0],
+                isHorizontal: false,
+                alignRectangles: []
+            },
+            {
+                axis: alignAxisY[2],
+                isHorizontal: false,
+                alignRectangles: []
+            }
+        ];
+        const setAlignLine = (axis, alignRectangle, isHorizontal) => {
+            const boundingRectangle = RectangleClient.inflate(RectangleClient.getBoundingRectangle([activeRectangle, alignRectangle]), ALIGN_SPACING);
+            if (isHorizontal) {
+                const pointStart = [axis, boundingRectangle.y];
+                const pointEnd = [axis, boundingRectangle.y + boundingRectangle.height];
+                alignLinePoints.push([pointStart, pointEnd]);
+            }
+            else {
+                const pointStart = [boundingRectangle.x, axis];
+                const pointEnd = [boundingRectangle.x + boundingRectangle.width, axis];
+                alignLinePoints.push([pointStart, pointEnd]);
+            }
+        };
+        const { isAspectRatio, directionFactors } = resizeAlignOptions;
+        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];
+            if (isAlign(alignLineRefs[0].axis, element, alignLineRefs[0].isHorizontal)) {
+                alignLineRefs[0].alignRectangles.push(element);
+            }
+            if (isAlign(alignLineRefs[1].axis, element, alignLineRefs[1].isHorizontal)) {
+                alignLineRefs[1].alignRectangles.push(element);
+            }
+            if (isAlign(alignLineRefs[2].axis, element, alignLineRefs[2].isHorizontal)) {
+                alignLineRefs[2].alignRectangles.push(element);
+            }
+            if (isAlign(alignLineRefs[3].axis, element, alignLineRefs[3].isHorizontal)) {
+                alignLineRefs[3].alignRectangles.push(element);
+            }
+        }
+        if (drawHorizontal && alignLineRefs[0].alignRectangles.length) {
+            const leftRectangle = alignLineRefs[0].alignRectangles.length === 1
+                ? alignLineRefs[0].alignRectangles[0]
+                : getNearestAlignRectangle(alignLineRefs[0].alignRectangles, activeRectangle);
+            setAlignLine(alignLineRefs[0].axis, leftRectangle, alignLineRefs[0].isHorizontal);
+        }
+        if (drawHorizontal && alignLineRefs[1].alignRectangles.length) {
+            const rightRectangle = alignLineRefs[1].alignRectangles.length === 1
+                ? alignLineRefs[1].alignRectangles[0]
+                : getNearestAlignRectangle(alignLineRefs[1].alignRectangles, activeRectangle);
+            setAlignLine(alignLineRefs[1].axis, rightRectangle, alignLineRefs[1].isHorizontal);
+        }
+        if (drawVertical && alignLineRefs[2].alignRectangles.length) {
+            const topRectangle = alignLineRefs[2].alignRectangles.length === 1
+                ? alignLineRefs[2].alignRectangles[0]
+                : getNearestAlignRectangle(alignLineRefs[2].alignRectangles, activeRectangle);
+            setAlignLine(alignLineRefs[2].axis, topRectangle, alignLineRefs[2].isHorizontal);
+        }
+        if (drawVertical && alignLineRefs[3].alignRectangles.length) {
+            const bottomRectangle = alignLineRefs[3].alignRectangles.length === 1
+                ? alignLineRefs[3].alignRectangles[0]
+                : getNearestAlignRectangle(alignLineRefs[3].alignRectangles, activeRectangle);
+            setAlignLine(alignLineRefs[3].axis, bottomRectangle, alignLineRefs[3].isHorizontal);
+        }
+        return drawAlignLines(this.board, alignLinePoints);
+    }
+    handleResizeAlign(resizeAlignOptions) {
+        const alignG = createG();
+        let alignLineDelta = this.getEqualLineDelta(resizeAlignOptions);
+        if (alignLineDelta.deltaX === 0 && alignLineDelta.deltaY === 0) {
+            alignLineDelta = this.getAlignLineDelta(resizeAlignOptions);
+        }
+        const equalLineRef = this.getAlignLineRef(alignLineDelta, resizeAlignOptions);
+        const equalLinesG = this.drawEqualLines(equalLineRef.activePoints, resizeAlignOptions);
+        const alignLinesG = this.drawAlignLines(equalLineRef.activePoints, resizeAlignOptions);
+        alignG.append(equalLinesG, alignLinesG);
+        return { ...equalLineRef, alignG };
+    }
+}
+function getBarPoint(point, isHorizontal) {
+    return isHorizontal
+        ? [
+            [point[0], point[1] - 4],
+            [point[0], point[1] + 4]
+        ]
+        : [
+            [point[0] - 4, point[1]],
+            [point[0] + 4, point[1]]
+        ];
+}
+function getEqualLinePoints(rectangle, isHorizontal) {
+    return isHorizontal
+        ? [
+            [rectangle.x, rectangle.y - EQUAL_SPACING],
+            [rectangle.x + rectangle.width, rectangle.y - EQUAL_SPACING]
+        ]
+        : [
+            [rectangle.x - EQUAL_SPACING, rectangle.y],
+            [rectangle.x - EQUAL_SPACING, rectangle.y + rectangle.height]
+        ];
+}
+function drawEqualLines(board, lines) {
+    const g = createG();
+    lines.forEach(line => {
+        if (!line.length)
+            return;
+        const yAlign = PlaitBoard.getRoughSVG(board).line(line[0][0], line[0][1], line[1][0], line[1][1], {
+            stroke: SELECTION_BORDER_COLOR,
+            strokeWidth: 1
+        });
+        g.appendChild(yAlign);
+        line.forEach(point => {
+            const barPoint = getBarPoint(point, !!Point.isHorizontal(line[0], line[1]));
+            const bar = PlaitBoard.getRoughSVG(board).line(barPoint[0][0], barPoint[0][1], barPoint[1][0], barPoint[1][1], {
+                stroke: SELECTION_BORDER_COLOR,
+                strokeWidth: 1
+            });
+            g.appendChild(bar);
+        });
+    });
+    return g;
+}
+function drawAlignLines(board, lines) {
+    const g = createG();
+    lines.forEach(points => {
+        if (!points.length)
+            return;
+        const xAlign = PlaitBoard.getRoughSVG(board).line(points[0][0], points[0][1], points[1][0], points[1][1], {
+            stroke: SELECTION_BORDER_COLOR,
+            strokeWidth: 1,
+            strokeLineDash: [4, 4]
+        });
+        g.appendChild(xAlign);
+    });
+    return g;
+}
+const getTripleAlignAxis = (rectangle, isHorizontal) => {
+    const axis = isHorizontal ? 'x' : 'y';
+    const side = isHorizontal ? 'width' : 'height';
+    return [rectangle[axis], rectangle[axis] + rectangle[side] / 2, rectangle[axis] + rectangle[side]];
+};
+const isAlign = (axis, rectangle, isHorizontal) => {
+    const alignAxis = getTripleAlignAxis(rectangle, isHorizontal);
+    return alignAxis.includes(axis);
+};
+const getClosestDelta = (axis, rectangle, isHorizontal) => {
+    const alignAxis = getTripleAlignAxis(rectangle, isHorizontal);
+    const deltas = alignAxis.map(item => item - axis);
+    const absDeltas = deltas.map(item => Math.abs(item));
+    const index = absDeltas.indexOf(Math.min(...absDeltas));
+    return deltas[index];
+};
+function getMinAlignDelta(alignRectangles, axis, isHorizontal) {
+    let delta = ALIGN_TOLERANCE;
+    alignRectangles.forEach(item => {
+        const distance = getClosestDelta(axis, item, isHorizontal);
+        if (Math.abs(distance) < Math.abs(delta)) {
+            delta = distance;
+        }
+    });
+    return delta;
+}
+function getNearestAlignRectangle(alignRectangles, activeRectangle) {
+    let minDistance = Infinity;
+    let nearestRectangle = alignRectangles[0];
+    alignRectangles.forEach(item => {
+        const distance = Math.sqrt(Math.pow(activeRectangle.x - item.x, 2) + Math.pow(activeRectangle.y - item.y, 2));
+        if (distance < minDistance) {
+            minDistance = distance;
+            nearestRectangle = item;
+        }
+    });
+    return nearestRectangle;
+}
+
+function getResizeAlignRef(board, resizeRef, resizeState, resizeOriginPointAndHandlePoint, isAspectRatio, isFromCorner) {
+    const { originPoint, handlePoint } = resizeOriginPointAndHandlePoint;
+    const { xZoom, yZoom } = getResizeZoom(resizeState, originPoint, handlePoint, isFromCorner, isAspectRatio);
+    let activeElements;
+    let resizeOriginPoints = [];
+    if (Array.isArray(resizeRef.element)) {
+        activeElements = resizeRef.element;
+        const rectangle = getRectangleByElements(board, resizeRef.element, false);
+        resizeOriginPoints = RectangleClient.getPoints(rectangle);
+    }
+    else {
+        activeElements = [resizeRef.element];
+        resizeOriginPoints = resizeRef.element.points;
+    }
+    const points = resizeOriginPoints.map(p => {
+        return movePointByZoomAndOriginPoint(p, originPoint, xZoom, yZoom);
+    });
+    const activeRectangle = RectangleClient.getRectangleByPoints(points);
+    const resizeAlignReaction = new ResizeAlignReaction(board, activeElements);
+    const resizeHandlePoint = movePointByZoomAndOriginPoint(handlePoint, originPoint, xZoom, yZoom);
+    const [x, y] = getUnitVectorByPointAndPoint(originPoint, resizeHandlePoint);
+    return resizeAlignReaction.handleResizeAlign({
+        resizeState,
+        resizeOriginPoints,
+        activeRectangle,
+        originPoint,
+        handlePoint,
+        directionFactors: [getDirectionFactorByVectorComponent(x), getDirectionFactorByVectorComponent(y)],
+        isAspectRatio,
+        isFromCorner
+    });
+}
+
+function withDrawResize(board) {
+    const { afterChange } = board;
+    let alignG;
+    let handleG;
+    const canResize = () => {
+        const elements = getSelectedElements(board);
+        return elements.length > 1 && elements.every(el => PlaitDrawElement.isDrawElement(el));
     };
-    board.keyup = (event) => {
-        isShift = false;
-        keyup(event);
+    const options = {
+        key: 'draw-elements',
+        canResize,
+        hitTest: (point) => {
+            const elements = getSelectedElements(board);
+            const boundingRectangle = getRectangleByElements(board, elements, false);
+            const handleRef = getHitRectangleResizeHandleRef(board, boundingRectangle, point);
+            if (handleRef) {
+                return {
+                    element: elements,
+                    rectangle: boundingRectangle,
+                    handle: handleRef.handle,
+                    cursorClass: handleRef.cursorClass
+                };
+            }
+            return null;
+        },
+        onResize: (resizeRef, resizeState) => {
+            alignG?.remove();
+            const isFromCorner = isCornerHandle(board, resizeRef.handle);
+            const isAspectRatio = resizeState.isShift || isFromCorner;
+            const { originPoint, handlePoint } = getResizeOriginPointAndHandlePoint(board, resizeRef);
+            const resizeAlignRef = getResizeAlignRef(board, resizeRef, resizeState, {
+                originPoint,
+                handlePoint
+            }, isAspectRatio, isFromCorner);
+            alignG = resizeAlignRef.alignG;
+            PlaitBoard.getElementActiveHost(board).append(alignG);
+            resizeRef.element.forEach(target => {
+                const path = PlaitBoard.findPath(board, target);
+                let 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);
+                }
+                else if (PlaitDrawElement.isLine(target)) {
+                    Transforms.setNode(board, { points }, path);
+                }
+                else if (PlaitDrawElement.isImage(target)) {
+                    if (isAspectRatio) {
+                        Transforms.setNode(board, { points }, path);
+                    }
+                    else {
+                        // The image element does not follow the resize, but moves based on the center point.
+                        const targetRectangle = RectangleClient.getRectangleByPoints(target.points);
+                        const centerPoint = RectangleClient.getCenterPoint(targetRectangle);
+                        const newCenterPoint = movePointByZoomAndOriginPoint(centerPoint, originPoint, resizeAlignRef.xZoom, resizeAlignRef.yZoom);
+                        const newTargetRectangle = RectangleClient.getRectangleByCenterPoint(newCenterPoint, targetRectangle.width, targetRectangle.height);
+                        Transforms.setNode(board, { points: RectangleClient.getPoints(newTargetRectangle) }, path);
+                    }
+                }
+            });
+        },
+        afterResize: (resizeRef) => {
+            alignG?.remove();
+            alignG = null;
+        }
+    };
+    withResize(board, options);
+    board.afterChange = () => {
+        afterChange();
+        if (handleG) {
+            handleG.remove();
+            handleG = null;
+        }
+        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 g = drawHandle(board, corner);
+                handleG && handleG.append(g);
+            });
+            PlaitBoard.getElementActiveHost(board).append(handleG);
+        }
+    };
+    return board;
+}
+const getResizeOriginPointAndHandlePoint = (board, resizeRef) => {
+    const handleIndex = getIndexByResizeHandle(resizeRef.handle);
+    const symmetricHandleIndex = getSymmetricHandleIndex(board, handleIndex);
+    const originPoint = getResizeHandlePointByIndex(resizeRef.rectangle, symmetricHandleIndex);
+    const handlePoint = getResizeHandlePointByIndex(resizeRef.rectangle, handleIndex);
+    return {
+        originPoint,
+        handlePoint
     };
+};
+const getResizeZoom = (resizeState, resizeOriginPoint, resizeHandlePoint, isFromCorner, isAspectRatio) => {
+    const startPoint = resizeState.startPoint;
+    const endPoint = resizeState.endPoint;
+    let xZoom = 0;
+    let yZoom = 0;
+    if (isFromCorner) {
+        if (isAspectRatio) {
+            let normalizedOffsetX = Point.getOffsetX(startPoint, endPoint);
+            xZoom = normalizedOffsetX / (resizeHandlePoint[0] - resizeOriginPoint[0]);
+            yZoom = xZoom;
+        }
+        else {
+            let normalizedOffsetX = Point.getOffsetX(startPoint, endPoint);
+            let normalizedOffsetY = Point.getOffsetY(startPoint, endPoint);
+            xZoom = normalizedOffsetX / (resizeHandlePoint[0] - resizeOriginPoint[0]);
+            yZoom = normalizedOffsetY / (resizeHandlePoint[1] - resizeOriginPoint[1]);
+        }
+    }
+    else {
+        const isHorizontal = Point.isHorizontal(resizeOriginPoint, resizeHandlePoint, 0.1) || false;
+        let normalizedOffset = isHorizontal ? Point.getOffsetX(startPoint, endPoint) : Point.getOffsetY(startPoint, endPoint);
+        let benchmarkOffset = isHorizontal ? resizeHandlePoint[0] - resizeOriginPoint[0] : resizeHandlePoint[1] - resizeOriginPoint[1];
+        const zoom = normalizedOffset / benchmarkOffset;
+        if (isAspectRatio) {
+            xZoom = zoom;
+            yZoom = zoom;
+        }
+        else {
+            if (isHorizontal) {
+                xZoom = zoom;
+            }
+            else {
+                yZoom = zoom;
+            }
+        }
+    }
+    return { xZoom, yZoom };
+};
+const movePointByZoomAndOriginPoint = (p, resizeOriginPoint, xZoom, yZoom) => {
+    const offsetX = (p[0] - resizeOriginPoint[0]) * xZoom;
+    const offsetY = (p[1] - resizeOriginPoint[1]) * yZoom;
+    return [p[0] + offsetX, p[1] + offsetY];
+};
+
+const withGeometryResize = (board) => {
+    let alignG;
     const options = {
         key: 'draw-geometry',
         canResize: () => {
             return true;
         },
-        detect: (point) => {
+        hitTest: (point) => {
             const selectedElements = [...getSelectedGeometryElements(board), ...getSelectedImageElements(board)];
             if (selectedElements.length !== 1 || getSelectedElements(board).length !== 1) {
                 return null;
@@ -3280,46 +4230,31 @@ const withGeometryResize = (board) => {
             const target = selectedElements[0];
             const targetComponent = PlaitElement.getComponent(selectedElements[0]);
             if (targetComponent.activeGenerator.hasResizeHandle) {
-                const handleRef = getHitGeometryResizeHandleRef(board, target, point);
+                const rectangle = board.getRectangle(target);
+                const handleRef = getHitRectangleResizeHandleRef(board, rectangle, point);
                 if (handleRef) {
                     return {
                         element: target,
                         handle: handleRef.handle,
-                        cursorClass: handleRef.cursorClass
+                        cursorClass: handleRef.cursorClass,
+                        rectangle
                     };
                 }
             }
             return null;
         },
         onResize: (resizeRef, resizeState) => {
-            let points = [...resizeRef.element.points];
-            const rectangle = getRectangleByPoints(resizeRef.element.points);
-            const ratio = rectangle.height / rectangle.width;
-            const isCornerHandle = [ResizeHandle.nw, ResizeHandle.ne, ResizeHandle.se, ResizeHandle.sw].includes(resizeRef.handle);
-            points = getPointsByResizeHandle(resizeState.endTransformPoint, resizeRef.element.points, resizeRef.handle);
-            if ((isShift || PlaitDrawElement.isImage(resizeRef.element)) && isCornerHandle) {
-                const rectangle = getRectangleByPoints(points);
-                const factor = points[0][1] > points[1][1] ? 1 : -1;
-                const height = rectangle.width * ratio * factor;
-                points = [[resizeState.endTransformPoint[0], points[1][1] + height], points[1]];
-            }
-            if ((isShift || PlaitDrawElement.isImage(resizeRef.element)) && !isCornerHandle) {
-                const rectangle = getRectangleByPoints(points);
-                if (resizeRef.handle === ResizeHandle.n || resizeRef.handle === ResizeHandle.s) {
-                    const newWidth = rectangle.height / ratio;
-                    const offset = (newWidth - rectangle.width) / 2;
-                    const newRectangle = RectangleClient.expand(rectangle, offset, 0);
-                    const cornerPoints = RectangleClient.getCornerPoints(newRectangle);
-                    points = [cornerPoints[0], cornerPoints[2]];
-                }
-                if (resizeRef.handle === ResizeHandle.e || resizeRef.handle === ResizeHandle.w) {
-                    const newHeight = rectangle.width * ratio;
-                    const offset = (newHeight - rectangle.height) / 2;
-                    const newRectangle = RectangleClient.expand(rectangle, 0, offset);
-                    const cornerPoints = RectangleClient.getCornerPoints(newRectangle);
-                    points = [cornerPoints[0], cornerPoints[2]];
-                }
-            }
+            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, {
+                originPoint,
+                handlePoint
+            }, isAspectRatio, isFromCorner);
+            alignG = resizeAlignRef.alignG;
+            PlaitBoard.getElementActiveHost(board).append(alignG);
+            let points = resizeAlignRef.activePoints;
             if (PlaitDrawElement.isGeometry(resizeRef.element)) {
                 const { height: textHeight } = getFirstTextManage(resizeRef.element).getSize();
                 DrawTransforms.resizeGeometry(board, points, textHeight, resizeRef.path);
@@ -3328,88 +4263,28 @@ const withGeometryResize = (board) => {
                 points = normalizeShapePoints(points);
                 Transforms.setNode(board, { points }, resizeRef.path);
             }
+        },
+        afterResize: (resizeRef) => {
+            alignG?.remove();
+            alignG = null;
         }
     };
     withResize(board, options);
     return board;
 };
-const getPointsByResizeHandle = (movingPoint, elementPoints, handle) => {
-    switch (handle) {
-        case ResizeHandle.nw: {
-            return [movingPoint, elementPoints[1]];
-        }
-        case ResizeHandle.ne: {
-            return [movingPoint, [elementPoints[0][0], elementPoints[1][1]]];
-        }
-        case ResizeHandle.se: {
-            return [movingPoint, elementPoints[0]];
-        }
-        case ResizeHandle.sw: {
-            return [movingPoint, [elementPoints[1][0], elementPoints[0][1]]];
-        }
-        case ResizeHandle.n: {
-            return [[elementPoints[0][0], movingPoint[1]], elementPoints[1]];
-        }
-        case ResizeHandle.s: {
-            return [elementPoints[0], [elementPoints[1][0], movingPoint[1]]];
-        }
-        case ResizeHandle.w: {
-            return [[movingPoint[0], elementPoints[0][1]], elementPoints[1]];
-        }
-        default: {
-            return [elementPoints[0], [movingPoint[0], elementPoints[1][1]]];
-        }
-    }
-};
-
-var LineResizeHandle;
-(function (LineResizeHandle) {
-    LineResizeHandle["source"] = "source";
-    LineResizeHandle["target"] = "target";
-    LineResizeHandle["addHandle"] = "addHandle";
-})(LineResizeHandle || (LineResizeHandle = {}));
-const getHitLineResizeHandleRef = (board, element, point) => {
-    const points = PlaitLine.getPoints(board, element);
-    const index = getHitPointIndex(points, point);
-    if (index !== -1) {
-        if (index === 0) {
-            return { handle: LineResizeHandle.source, index };
-        }
-        if (index === points.length - 1) {
-            return { handle: LineResizeHandle.target, index };
-        }
-        return { index };
-    }
-    const middlePoints = getMiddlePoints(board, element);
-    const middleIndex = getHitPointIndex(middlePoints, point);
-    if (middleIndex !== -1) {
-        return { handle: LineResizeHandle.addHandle, index: middleIndex };
-    }
-    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.toRectangleClient([movingPoint, movingPoint]), rectangle);
-    });
-    return rectangle ? rectangles.indexOf(rectangle) : -1;
-}
 
 const withLineResize = (board) => {
-    let pointIndex = 0;
+    let elbowLineIndex;
+    let elbowLineDeleteCount;
+    let elbowSourcePoint;
+    let elbowTargetPoint;
+    let elbowNextRenderPoints;
     const options = {
         key: 'draw-line',
         canResize: () => {
             return true;
         },
-        detect: (point) => {
+        hitTest: (point) => {
             const selectedLineElements = getSelectedLineElements(board);
             if (selectedLineElements.length > 0) {
                 let result = null;
@@ -3418,25 +4293,46 @@ const withLineResize = (board) => {
                     if (handleRef) {
                         result = {
                             element: value,
-                            handle: handleRef.handle
+                            handle: handleRef.handle,
+                            handleIndex: handleRef.handleIndex
                         };
-                        pointIndex = handleRef.handle === LineResizeHandle.addHandle ? handleRef.index + 1 : handleRef.index;
                     }
                 });
                 return result;
             }
             return null;
         },
+        beforeResize: (resizeRef) => {
+            if (resizeRef.element.shape === LineShape.elbow &&
+                resizeRef.handle !== LineResizeHandle.source &&
+                resizeRef.handle !== LineResizeHandle.target) {
+                const params = getElbowLineRouteOptions(board, resizeRef.element);
+                const isIntersect = isSourceAndTargetIntersect(params);
+                if (isIntersect) {
+                    return;
+                }
+                const points = [...resizeRef.element.points];
+                const handleIndex = resizeRef.handleIndex;
+                const pointsOnElbow = getElbowPoints(board, resizeRef.element);
+                elbowSourcePoint = pointsOnElbow[0];
+                elbowTargetPoint = pointsOnElbow[pointsOnElbow.length - 1];
+                elbowNextRenderPoints = getNextRenderPoints(board, resizeRef.element, pointsOnElbow);
+                const value = getIndexAndDeleteCountByKeyPoint(board, resizeRef.element, [...points], elbowNextRenderPoints, handleIndex);
+                elbowLineIndex = value.index;
+                elbowLineDeleteCount = value.deleteCount;
+            }
+        },
         onResize: (resizeRef, resizeState) => {
             let points = [...resizeRef.element.points];
             let source = { ...resizeRef.element.source };
             let target = { ...resizeRef.element.target };
-            const hitElement = getHitOutlineGeometry(board, resizeState.endTransformPoint, REACTION_MARGIN);
+            let handleIndex = resizeRef.handleIndex;
+            const hitElement = getHitOutlineGeometry(board, resizeState.endPoint, REACTION_MARGIN);
             if (resizeRef.handle === LineResizeHandle.source || resizeRef.handle === LineResizeHandle.target) {
                 const object = resizeRef.handle === LineResizeHandle.source ? source : target;
-                points[pointIndex] = resizeState.endTransformPoint;
+                points[handleIndex] = resizeState.endPoint;
                 if (hitElement) {
-                    object.connection = transformPointToConnection(board, resizeState.endTransformPoint, hitElement);
+                    object.connection = getConnectionByNearestPoint(board, resizeState.endPoint, hitElement);
                     object.boundId = hitElement.id;
                 }
                 else {
@@ -3444,24 +4340,80 @@ const withLineResize = (board) => {
                     object.boundId = undefined;
                 }
             }
-            else if (resizeRef.handle === LineResizeHandle.addHandle) {
-                points.splice(pointIndex, 0, resizeState.endTransformPoint);
-            }
             else {
-                points[pointIndex] = resizeState.endTransformPoint;
+                if (resizeRef.element.shape === LineShape.elbow) {
+                    if (elbowNextRenderPoints && elbowSourcePoint && elbowTargetPoint) {
+                        const resizedPreviousAndNextPoint = getResizedPreviousAndNextPoint(elbowNextRenderPoints, elbowSourcePoint, elbowTargetPoint, handleIndex);
+                        const startKeyPoint = elbowNextRenderPoints[handleIndex];
+                        const endKeyPoint = elbowNextRenderPoints[handleIndex + 1];
+                        const [newStartPoint, newEndPoint] = alignElbowSegment(startKeyPoint, endKeyPoint, resizeState, resizedPreviousAndNextPoint);
+                        let midDataPoints = [...points].slice(1, points.length - 1);
+                        if (elbowLineIndex !== null && elbowLineDeleteCount !== null) {
+                            if (hasIllegalElbowPoint(midDataPoints)) {
+                                midDataPoints = [newStartPoint, newEndPoint];
+                            }
+                            else {
+                                midDataPoints.splice(elbowLineIndex, elbowLineDeleteCount, newStartPoint, newEndPoint);
+                            }
+                            points = [elbowSourcePoint, ...midDataPoints, elbowTargetPoint];
+                        }
+                    }
+                }
+                else {
+                    if (resizeRef.handle === LineResizeHandle.addHandle) {
+                        points.splice(handleIndex + 1, 0, resizeState.endPoint);
+                    }
+                    else {
+                        points[handleIndex] = resizeState.endPoint;
+                    }
+                }
             }
             if (!hitElement) {
+                handleIndex = resizeRef.handle === LineResizeHandle.addHandle ? handleIndex + 1 : handleIndex;
                 const drawPoints = getLinePoints(board, resizeRef.element);
                 const newPoints = [...points];
                 newPoints[0] = drawPoints[0];
                 newPoints[newPoints.length - 1] = drawPoints[drawPoints.length - 1];
-                newPoints.forEach((point, index) => {
-                    if (index === pointIndex)
-                        return;
-                    points[pointIndex] = alignPoints(point, points[pointIndex]);
-                });
+                if (resizeRef.element.shape !== LineShape.elbow) {
+                    newPoints.forEach((point, index) => {
+                        if (index === handleIndex)
+                            return;
+                        if (points[handleIndex]) {
+                            points[handleIndex] = alignPoints(point, points[handleIndex]);
+                        }
+                    });
+                }
             }
             DrawTransforms.resizeLine(board, { points, source, target }, resizeRef.path);
+        },
+        afterResize: (resizeRef) => {
+            if (resizeRef.element.shape === LineShape.elbow) {
+                const element = PlaitNode.get(board, resizeRef.path);
+                let points = element && [...element.points];
+                if (points.length > 2 && elbowNextRenderPoints && elbowSourcePoint && elbowTargetPoint) {
+                    const nextSourcePoint = elbowNextRenderPoints[0];
+                    const nextTargetPoint = elbowNextRenderPoints[elbowNextRenderPoints.length - 1];
+                    points.splice(0, 1, nextSourcePoint);
+                    points.splice(-1, 1, nextTargetPoint);
+                    points = simplifyOrthogonalPoints(points);
+                    if (Point.isEquals(points[0], nextSourcePoint)) {
+                        points.splice(0, 1);
+                    }
+                    if (Point.isEquals(points[points.length - 1], nextTargetPoint)) {
+                        points.pop();
+                    }
+                    if (points.length === 1) {
+                        points = [];
+                    }
+                    points = [elbowSourcePoint, ...points, elbowTargetPoint];
+                    DrawTransforms.resizeLine(board, { points }, resizeRef.path);
+                }
+            }
+            elbowLineIndex = null;
+            elbowLineDeleteCount = null;
+            elbowSourcePoint = null;
+            elbowTargetPoint = null;
+            elbowNextRenderPoints = null;
         }
     };
     withResize(board, options);
@@ -3489,8 +4441,8 @@ const withLineBoundReaction = (board) => {
             const hitElement = getHitOutlineGeometry(board, movingPoint, -4);
             if (hitElement) {
                 boundShapeG = drawBoundMask(board, hitElement);
-                let nearestPoint = getNearestPoint(hitElement, movingPoint, ACTIVE_STROKE_WIDTH);
-                const rectangle = getRectangleByPoints(hitElement.points);
+                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;
@@ -3515,8 +4467,8 @@ const withLineBoundReaction = (board) => {
 };
 
 const withLineText = (board) => {
-    const { dblclick } = board;
-    board.dblclick = (event) => {
+    const { dblClick } = board;
+    board.dblClick = (event) => {
         if (!PlaitBoard.isReadonly(board)) {
             const clickPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
             const hitTarget = getHitElementByPoint(board, clickPoint, (element) => {
@@ -3547,7 +4499,7 @@ const withLineText = (board) => {
                 }
             }
         }
-        dblclick(event);
+        dblClick(event);
     };
     return board;
 };
@@ -3689,7 +4641,7 @@ const withLineAutoComplete = (board) => {
             const hitPoint = points[index];
             if (hitPoint) {
                 temporaryDisableSelection(board);
-                startPoint = clickPoint;
+                startPoint = hitPoint;
                 sourceElement = targetElement;
                 BoardTransforms.updatePointerType(board, LineShape.elbow);
             }
@@ -3703,7 +4655,15 @@ const withLineAutoComplete = (board) => {
         if (startPoint && sourceElement) {
             const distance = distanceBetweenPointAndPoint(...movingPoint, ...startPoint);
             if (distance > PRESS_AND_MOVE_BUFFER) {
-                temporaryElement = handleLineCreating(board, LineShape.elbow, startPoint, movingPoint, sourceElement, lineShapeG);
+                const rectangle = RectangleClient.getRectangleByPoints(sourceElement.points);
+                const shape = getShape(sourceElement);
+                const engine = getEngine(shape);
+                let sourcePoint = startPoint;
+                if (engine.getNearestCrossingPoint) {
+                    const crossingPoint = engine.getNearestCrossingPoint(rectangle, startPoint);
+                    sourcePoint = crossingPoint;
+                }
+                temporaryElement = handleLineCreating(board, LineShape.elbow, sourcePoint, movingPoint, sourceElement, lineShapeG);
             }
         }
         pointerMove(event);
@@ -3738,7 +4698,7 @@ const withLineTextMove = (board) => {
         canResize: () => {
             return true;
         },
-        detect: (point) => {
+        hitTest: (point) => {
             let result = null;
             const line = getHitElementByPoint(board, point, (element) => {
                 return PlaitDrawElement.isLine(element);
@@ -3757,7 +4717,7 @@ const withLineTextMove = (board) => {
         onResize: (resizeRef, resizeState) => {
             const element = resizeRef.element;
             if (element) {
-                const movingPoint = resizeState.endTransformPoint;
+                const movingPoint = resizeState.endPoint;
                 const points = getLinePoints(board, element);
                 const distance = distanceBetweenPointAndSegments(points, movingPoint);
                 if (distance <= movableBuffer) {
@@ -3793,14 +4753,19 @@ const withDraw = (board) => {
     };
     board.getRectangle = (element) => {
         if (PlaitDrawElement.isGeometry(element)) {
-            return getRectangleByPoints(element.points);
+            return RectangleClient.getRectangleByPoints(element.points);
         }
         if (PlaitDrawElement.isLine(element)) {
             const points = getLinePoints(board, element);
-            return getRectangleByPoints(points);
+            const lineTextRectangles = element.texts.map((text, index) => {
+                const rectangle = getLineTextRectangle(board, element, index);
+                return rectangle;
+            });
+            const linePointsRectangle = RectangleClient.getRectangleByPoints(points);
+            return RectangleClient.getBoundingRectangle([linePointsRectangle, ...lineTextRectangles]);
         }
         if (PlaitDrawElement.isImage(element)) {
-            return getRectangleByPoints(element.points);
+            return RectangleClient.getRectangleByPoints(element.points);
         }
         return getRectangle(element);
     };
@@ -3860,12 +4825,12 @@ const withDraw = (board) => {
         });
         return getRelatedFragment([...elements, ...activeLines]);
     };
-    return withLineTextMove(withLineAutoCompleteReaction(withLineText(withLineBoundReaction(withLineResize(withGeometryResize(withLineCreateByDraw(withLineAutoComplete(withGeometryCreateByDrag(withGeometryCreateByDrawing(withDrawFragment(withDrawHotkey(board))))))))))));
+    return withDrawResize(withLineTextMove(withLineAutoCompleteReaction(withLineText(withLineBoundReaction(withLineResize(withGeometryResize(withLineCreateByDraw(withLineAutoComplete(withGeometryCreateByDrag(withGeometryCreateByDrawing(withDrawFragment(withDrawHotkey(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, alignPoints, createDefaultFlowchart, createDefaultGeometry, createGeometryElement, createLineElement, createTextElement, drawBoundMask, drawGeometry, drawLine, getAutoCompletePoints, getBasicPointers, getBoardLines, getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultTextPoints, getDrawDefaultStrokeColor, getEdgeOnPolygonByPoint, getElbowPoints, getFillByElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryPointers, getHitConnectorPoint, getHitIndexOfAutoCompletePoint, getHitLineTextIndex, getLineDashByElement, getLineHandleRefPair, getLineMemorizedLatest, getLinePointers, getLinePoints, getLineTextRectangle, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getNearestPoint, getPointsByCenterPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedLineElements, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getTextRectangle, getTextShapeProperty, getVectorByConnection, handleLineCreating, insertElement, isHitDrawElement, isHitLineText, isHitPolyLine, isRectangleHitDrawElement, isTextExceedingBounds, memorizeLatestShape, memorizeLatestText, transformOpsToPoints, transformPointToConnection, withDraw, withLineAutoComplete };
+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, isHitLineText, isHitPolyLine, isRectangleHitDrawElement, isTextExceedingBounds, isUpdatedHandleIndex, memorizeLatestShape, memorizeLatestText, withDraw, withLineAutoComplete };
 //# sourceMappingURL=plait-draw.mjs.map