@plait/draw 0.1.0-next.11 → 0.1.0-next.12

package/fesm2022/plait-draw.mjs

@@ -1,8 +1,8 @@
-import { PlaitElement, ACTIVE_STROKE_WIDTH, RectangleClient, PlaitBoard, setStrokeLinecap, isPointInPolygon, getNearestPointBetweenPointAndSegments, isPointInEllipse, drawRectangle, drawRoundRectangle, isPointInRoundRectangle, idCreator, createG, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, arrowPoints, createPath, drawLinearPath, distanceBetweenPointAndSegments, createMask, createRect, getElementById, findElements, getSelectedElements, Transforms, clearSelectedElement, addSelectedElement, PlaitNode, Point, isSelectionMoving, PlaitPluginElementComponent, transformPoint, toPoint, BoardTransforms, PlaitPointerType, preventTouchMove, createForeignObject, setClipboardData, getDataFromClipboard, depthFirstRecursion, getIsRecursionFunc, getHitElements, isPolylineHitRectangle } from '@plait/core';
+import { PlaitElement, ACTIVE_STROKE_WIDTH, RectangleClient, PlaitBoard, setStrokeLinecap, isPointInPolygon, getNearestPointBetweenPointAndSegments, isPointInEllipse, drawRectangle, drawRoundRectangle, isPointInRoundRectangle, idCreator, createG, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, distanceBetweenPointAndSegment, arrowPoints, createPath, drawLinearPath, getElementById, Direction, distanceBetweenPointAndSegments, createMask, createRect, findElements, getSelectedElements, Transforms, clearSelectedElement, addSelectedElement, PlaitNode, Point, isSelectionMoving, PlaitPluginElementComponent, transformPoint, toPoint, BoardTransforms, PlaitPointerType, preventTouchMove, createForeignObject, setClipboardData, getDataFromClipboard, depthFirstRecursion, getIsRecursionFunc, getHitElements, isPolylineHitRectangle } from '@plait/core';
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { Subject } from 'rxjs';
-import { getRectangleByPoints, getFactorByPoints, Direction, getDirectionByPoint, getPoints, getPointOnPolyline, getDirectionFactor, Generator, normalizeShapePoints, CommonPluginElement, ActiveGenerator, WithTextPluginKey, RESIZE_HANDLE_DIAMETER, PRIMARY_COLOR, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, getRectangleResizeHandleRefs, ResizeHandle, withResize, isResizingByCondition, getRatioByPoint } from '@plait/common';
+import { getRectangleByPoints, getFactorByPoints, getPoints, getPointOnPolyline, getDirectionByPointOfRectangle, rotateVector90, getDirectionByVector, getDirectionFactor, Generator, normalizeShapePoints, CommonPluginElement, ActiveGenerator, WithTextPluginKey, RESIZE_HANDLE_DIAMETER, PRIMARY_COLOR, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, getRectangleResizeHandleRefs, ResizeHandle, withResize, isResizingByCondition, getRatioByPoint } from '@plait/common';
 import { Alignment, buildText, AlignEditor, TextManage, DEFAULT_FONT_SIZE, getTextFromClipboard, getTextSize } from '@plait/text';
 import { isKeyHotkey } from 'is-hotkey';
 import { Node } from 'slate';
@@ -15,6 +15,10 @@ var GeometryShape;
     GeometryShape["roundRectangle"] = "roundRectangle";
     GeometryShape["parallelogram"] = "parallelogram";
     GeometryShape["text"] = "text";
+    GeometryShape["triangle"] = "triangle";
+    GeometryShape["leftArrow"] = "leftArrow";
+    GeometryShape["trapezoid"] = "trapezoid";
+    GeometryShape["rightArrow"] = "rightArrow";
 })(GeometryShape || (GeometryShape = {}));
 const PlaitGeometry = {
     getTextEditor(element) {
@@ -62,11 +66,19 @@ const PlaitLine = {
         }
         throw new Error('can not get correctly component in get text editor');
     },
+    isSourceMarkOrTargetMark(line, markType, handleKey) {
+        if (handleKey === LineHandleKey.source) {
+            return line.source.marker === markType;
+        }
+        else {
+            return line.target.marker === markType;
+        }
+    },
     isSourceMark(line, markType) {
-        return line.source.marker === markType;
+        return PlaitLine.isSourceMarkOrTargetMark(line, markType, LineHandleKey.source);
     },
     isTargetMark(line, markType) {
-        return line.target.marker === markType;
+        return PlaitLine.isSourceMarkOrTargetMark(line, markType, LineHandleKey.target);
     },
     isBoundElementOfSource(line, element) {
         return line.source.boundId === element.id;
@@ -139,6 +151,10 @@ var DrawPointerType;
     DrawPointerType["roundRectangle"] = "roundRectangle";
     DrawPointerType["parallelogram"] = "parallelogram";
     DrawPointerType["ellipse"] = "ellipse";
+    DrawPointerType["triangle"] = "triangle";
+    DrawPointerType["leftArrow"] = "leftArrow";
+    DrawPointerType["trapezoid"] = "trapezoid";
+    DrawPointerType["rightArrow"] = "rightArrow";
 })(DrawPointerType || (DrawPointerType = {}));
 const GeometryPointer = [
     DrawPointerType.rectangle,
@@ -146,7 +162,11 @@ const GeometryPointer = [
     DrawPointerType.diamond,
     DrawPointerType.ellipse,
     DrawPointerType.parallelogram,
-    DrawPointerType.roundRectangle
+    DrawPointerType.roundRectangle,
+    DrawPointerType.triangle,
+    DrawPointerType.leftArrow,
+    DrawPointerType.trapezoid,
+    DrawPointerType.rightArrow
 ];
 
 const getStrokeWidthByElement = (element) => {
@@ -183,9 +203,16 @@ const DiamondEngine = {
         const controlPoints = RectangleClient.getEdgeCenterPoints(rectangle);
         return isPointInPolygon(point, controlPoints);
     },
+    getCornerPoints(rectangle) {
+        return RectangleClient.getEdgeCenterPoints(rectangle);
+    },
     getNearestPoint(rectangle, point) {
-        const connectorPoints = RectangleClient.getEdgeCenterPoints(rectangle);
-        return getNearestPointBetweenPointAndSegments(point, connectorPoints);
+        return getNearestPointBetweenPointAndSegments(point, DiamondEngine.getCornerPoints(rectangle));
+    },
+    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+        const corners = DiamondEngine.getCornerPoints(rectangle);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getEdgeOnPolygonByPoint(corners, point);
     },
     getConnectorPoints(rectangle) {
         return RectangleClient.getEdgeCenterPoints(rectangle);
@@ -202,10 +229,22 @@ const EllipseEngine = {
         const centerPoint = [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2];
         return isPointInEllipse(point, centerPoint, rectangle.width / 2, rectangle.height / 2);
     },
+    getCornerPoints(rectangle) {
+        return RectangleClient.getEdgeCenterPoints(rectangle);
+    },
     getNearestPoint(rectangle, point) {
         const centerPoint = [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2];
         return getNearestPointBetweenPointAndEllipse(point, centerPoint, rectangle.width / 2, rectangle.height / 2);
     },
+    getTangentVectorByConnectionPoint(rectangle, pointOfRectangle) {
+        const connectionPoint = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        const centerPoint = [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2];
+        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);
+    },
     getConnectorPoints(rectangle) {
         return RectangleClient.getEdgeCenterPoints(rectangle);
     }
@@ -245,29 +284,104 @@ 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 LeftArrowEngine = {
+    draw(board, rectangle, options) {
+        const points = getLeftArrowPoints(rectangle);
+        const rs = PlaitBoard.getRoughSVG(board);
+        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
+        setStrokeLinecap(polygon, 'round');
+        return polygon;
+    },
+    getCornerPoints(rectangle) {
+        return getLeftArrowPoints(rectangle);
+    },
+    isHit(rectangle, point) {
+        const points = getLeftArrowPoints(rectangle);
+        return isPointInPolygon(point, points);
+    },
+    getNearestPoint(rectangle, point) {
+        const cornerPoints = getLeftArrowPoints(rectangle);
+        return getNearestPointBetweenPointAndSegments(point, cornerPoints);
+    },
+    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+        const corners = getLeftArrowPoints(rectangle);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getEdgeOnPolygonByPoint(corners, point);
+    },
+    getConnectorPoints(rectangle) {
+        return [
+            [rectangle.x, rectangle.y + rectangle.height / 2],
+            [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2]
+        ];
+    }
+};
+const getLeftArrowPoints = (rectangle) => {
+    return [
+        [rectangle.x, rectangle.y + rectangle.height / 2],
+        [rectangle.x + rectangle.width * 0.32, rectangle.y],
+        [rectangle.x + rectangle.width * 0.32, rectangle.y + rectangle.height * 0.2],
+        [rectangle.x + rectangle.width, rectangle.y + rectangle.height * 0.2],
+        [rectangle.x + rectangle.width, rectangle.y + rectangle.height * 0.8],
+        [rectangle.x + rectangle.width * 0.32, rectangle.y + rectangle.height * 0.8],
+        [rectangle.x + rectangle.width * 0.32, rectangle.y + rectangle.height]
+    ];
+};
 
 const ParallelogramEngine = {
     draw(board, rectangle, options) {
-        const points = getParallelogramPoints(rectangle);
+        const points = getParallelogramCornerPoints(rectangle);
         const rs = PlaitBoard.getRoughSVG(board);
         const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
         setStrokeLinecap(polygon, 'round');
         return polygon;
     },
     isHit(rectangle, point) {
-        const parallelogramPoints = getParallelogramPoints(rectangle);
+        const parallelogramPoints = getParallelogramCornerPoints(rectangle);
         return isPointInPolygon(point, parallelogramPoints);
     },
+    getCornerPoints(rectangle) {
+        return getParallelogramCornerPoints(rectangle);
+    },
     getNearestPoint(rectangle, point) {
-        const cornerPoints = getParallelogramPoints(rectangle);
-        return getNearestPointBetweenPointAndSegments(point, cornerPoints);
+        return getNearestPointBetweenPointAndSegments(point, ParallelogramEngine.getCornerPoints(rectangle));
+    },
+    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+        const corners = getParallelogramCornerPoints(rectangle);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getEdgeOnPolygonByPoint(corners, point);
     },
     getConnectorPoints(rectangle) {
-        const cornerPoints = getParallelogramPoints(rectangle);
+        const cornerPoints = getParallelogramCornerPoints(rectangle);
         return getCenterPointsOnPolygon(cornerPoints);
     }
 };
-const getParallelogramPoints = (rectangle) => {
+const getParallelogramCornerPoints = (rectangle) => {
     return [
         [rectangle.x + rectangle.width / 4, rectangle.y],
         [rectangle.x + rectangle.width, rectangle.y],
@@ -284,15 +398,65 @@ const RectangleEngine = {
         const rangeRectangle = RectangleClient.toRectangleClient([point, point]);
         return RectangleClient.isHit(rectangle, rangeRectangle);
     },
+    getCornerPoints(rectangle) {
+        return RectangleClient.getCornerPoints(rectangle);
+    },
     getNearestPoint(rectangle, point) {
-        const cornerPoints = RectangleClient.getCornerPoints(rectangle);
-        return getNearestPointBetweenPointAndSegments(point, cornerPoints);
+        return getNearestPointBetweenPointAndSegments(point, RectangleEngine.getCornerPoints(rectangle));
+    },
+    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+        const corners = RectangleEngine.getCornerPoints(rectangle);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getEdgeOnPolygonByPoint(corners, point);
     },
     getConnectorPoints(rectangle) {
         return RectangleClient.getEdgeCenterPoints(rectangle);
     }
 };
 
+const RightArrowEngine = {
+    draw(board, rectangle, options) {
+        const points = getRightArrowPoints(rectangle);
+        const rs = PlaitBoard.getRoughSVG(board);
+        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
+        setStrokeLinecap(polygon, 'round');
+        return polygon;
+    },
+    getCornerPoints(rectangle) {
+        return getRightArrowPoints(rectangle);
+    },
+    isHit(rectangle, point) {
+        const points = getRightArrowPoints(rectangle);
+        return isPointInPolygon(point, points);
+    },
+    getNearestPoint(rectangle, point) {
+        const cornerPoints = getRightArrowPoints(rectangle);
+        return getNearestPointBetweenPointAndSegments(point, cornerPoints);
+    },
+    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+        const corners = getRightArrowPoints(rectangle);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getEdgeOnPolygonByPoint(corners, point);
+    },
+    getConnectorPoints(rectangle) {
+        return [
+            [rectangle.x, rectangle.y + rectangle.height / 2],
+            [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2]
+        ];
+    }
+};
+const getRightArrowPoints = (rectangle) => {
+    return [
+        [rectangle.x, rectangle.y + rectangle.height * 0.2],
+        [rectangle.x + rectangle.width * 0.68, rectangle.y + rectangle.height * 0.2],
+        [rectangle.x + rectangle.width * 0.68, rectangle.y],
+        [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2],
+        [rectangle.x + rectangle.width * 0.68, rectangle.y + rectangle.height],
+        [rectangle.x + rectangle.width * 0.68, rectangle.y + rectangle.height * 0.8],
+        [rectangle.x, rectangle.y + rectangle.height * 0.8]
+    ];
+};
+
 const RoundRectangleEngine = {
     draw(board, rectangle, options) {
         return drawRoundRectangle(PlaitBoard.getRoughSVG(board), rectangle.x, rectangle.y, rectangle.x + rectangle.width, rectangle.y + rectangle.height, { ...options, fillStyle: 'solid' }, false, getRoundRectangleRadius(rectangle));
@@ -300,9 +464,17 @@ const RoundRectangleEngine = {
     isHit(rectangle, point) {
         return isPointInRoundRectangle(point, rectangle, getRoundRectangleRadius(rectangle));
     },
+    getCornerPoints(rectangle) {
+        return RectangleClient.getCornerPoints(rectangle);
+    },
     getNearestPoint(rectangle, point) {
         return getNearestPointBetweenPointAndRoundRectangle(point, rectangle, getRoundRectangleRadius(rectangle));
     },
+    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+        const corners = RectangleEngine.getCornerPoints(rectangle);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getEdgeOnPolygonByPoint(corners, point);
+    },
     getConnectorPoints(rectangle) {
         return RectangleClient.getEdgeCenterPoints(rectangle);
     }
@@ -340,13 +512,93 @@ function getNearestPointBetweenPointAndRoundRectangle(point, rectangle, radius)
     return result;
 }
 
+const TrapezoidEngine = {
+    draw(board, rectangle, options) {
+        const points = getTrapezoidPoints(rectangle);
+        const rs = PlaitBoard.getRoughSVG(board);
+        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
+        setStrokeLinecap(polygon, 'round');
+        return polygon;
+    },
+    isHit(rectangle, point) {
+        const points = getTrapezoidPoints(rectangle);
+        return isPointInPolygon(point, points);
+    },
+    getNearestPoint(rectangle, point) {
+        const cornerPoints = getTrapezoidPoints(rectangle);
+        return getNearestPointBetweenPointAndSegments(point, cornerPoints);
+    },
+    getConnectorPoints(rectangle) {
+        const points = getTrapezoidPoints(rectangle);
+        return getCenterPointsOnPolygon(points);
+    },
+    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+        const corners = getTrapezoidPoints(rectangle);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getEdgeOnPolygonByPoint(corners, point);
+    },
+    getCornerPoints(rectangle) {
+        return getTrapezoidPoints(rectangle);
+    }
+};
+const getTrapezoidPoints = (rectangle) => {
+    return [
+        [rectangle.x + rectangle.width * 0.15, rectangle.y],
+        [rectangle.x + rectangle.width * 0.85, rectangle.y],
+        [rectangle.x + rectangle.width, rectangle.y + rectangle.height],
+        [rectangle.x, rectangle.y + rectangle.height]
+    ];
+};
+
+const TriangleEngine = {
+    draw(board, rectangle, options) {
+        const points = getTrianglePoints(rectangle);
+        const rs = PlaitBoard.getRoughSVG(board);
+        const polygon = rs.polygon(points, { ...options, fillStyle: 'solid' });
+        setStrokeLinecap(polygon, 'round');
+        return polygon;
+    },
+    isHit(rectangle, point) {
+        const points = getTrianglePoints(rectangle);
+        return isPointInPolygon(point, points);
+    },
+    getNearestPoint(rectangle, point) {
+        const cornerPoints = getTrianglePoints(rectangle);
+        return getNearestPointBetweenPointAndSegments(point, cornerPoints);
+    },
+    getConnectorPoints(rectangle) {
+        const cornerPoints = getTrianglePoints(rectangle);
+        const lineCenterPoints = getCenterPointsOnPolygon(cornerPoints);
+        return [...lineCenterPoints, ...cornerPoints];
+    },
+    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+        const corners = getTrianglePoints(rectangle);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getEdgeOnPolygonByPoint(corners, point);
+    },
+    getCornerPoints(rectangle) {
+        return getTrianglePoints(rectangle);
+    }
+};
+const getTrianglePoints = (rectangle) => {
+    return [
+        [rectangle.x + rectangle.width / 2, rectangle.y],
+        [rectangle.x + rectangle.width, rectangle.y + rectangle.height],
+        [rectangle.x, rectangle.y + rectangle.height]
+    ];
+};
+
 const ShapeEngineMap = {
     [GeometryShape.rectangle]: RectangleEngine,
     [GeometryShape.diamond]: DiamondEngine,
     [GeometryShape.ellipse]: EllipseEngine,
     [GeometryShape.parallelogram]: ParallelogramEngine,
     [GeometryShape.roundRectangle]: RoundRectangleEngine,
-    [GeometryShape.text]: RectangleEngine
+    [GeometryShape.text]: RectangleEngine,
+    [GeometryShape.triangle]: TriangleEngine,
+    [GeometryShape.leftArrow]: LeftArrowEngine,
+    [GeometryShape.trapezoid]: TrapezoidEngine,
+    [GeometryShape.rightArrow]: RightArrowEngine
 };
 const getEngine = (shape) => {
     return ShapeEngineMap[shape];
@@ -428,6 +680,17 @@ 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 drawLineArrow = (element, points, options) => {
     const arrowG = createG();
@@ -531,21 +794,48 @@ const getLinePoints = (board, element) => {
     return element.shape === LineShape.elbow ? getElbowPoints(board, element) : getStraightPoints(board, element);
 };
 const getStraightPoints = (board, element) => {
-    return [getSourcePoint(board, element), getTargetPoint(board, element)];
+    return getLineHandlePoints(board, element);
+};
+const getLineHandlePoints = (board, element) => {
+    const handleRefPair = getLineHandleRefPair(board, element);
+    return [handleRefPair.source.point, handleRefPair.target.point];
+};
+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 = sourcePoint[0] < targetPoint[0] ? Direction.right : Direction.left;
+    let targetDirection = sourcePoint[0] < targetPoint[0] ? Direction.left : Direction.right;
+    const sourceHandleRef = { key: LineHandleKey.source, point: sourcePoint, direction: sourceDirection };
+    const targetHandleRef = { key: LineHandleKey.target, point: targetPoint, direction: targetDirection };
+    if (sourceBoundElement) {
+        const connectionOffset = PlaitLine.isSourceMarkOrTargetMark(element, LineMarkerType.none, LineHandleKey.source) ? 0 : strokeWidth;
+        const direction = getDirectionByBoundElementAndConnection(board, sourceBoundElement, element.source.connection);
+        sourceDirection = direction ? direction : sourceDirection;
+        sourcePoint = getConnectionPoint(sourceBoundElement, element.source.connection, sourceDirection, connectionOffset);
+        sourceHandleRef.boundElement = sourceBoundElement;
+        sourceHandleRef.direction = sourceDirection;
+        sourceHandleRef.point = sourcePoint;
+    }
+    if (targetBoundElement) {
+        const connectionOffset = PlaitLine.isSourceMarkOrTargetMark(element, LineMarkerType.none, LineHandleKey.target) ? 0 : strokeWidth;
+        const direction = getDirectionByBoundElementAndConnection(board, targetBoundElement, element.target.connection);
+        targetDirection = direction ? direction : targetDirection;
+        targetPoint = getConnectionPoint(targetBoundElement, element.target.connection, targetDirection, connectionOffset);
+        targetHandleRef.boundElement = sourceBoundElement;
+        targetHandleRef.direction = targetDirection;
+        targetHandleRef.point = targetPoint;
+    }
+    return { source: sourceHandleRef, target: targetHandleRef };
 };
 const getElbowPoints = (board, element) => {
     if (element.points.length === 2) {
-        const source = getSourcePoint(board, element);
-        const target = getTargetPoint(board, element);
-        let sourceDirection = source[0] < target[0] ? Direction.right : Direction.left;
-        let targetDirection = source[0] < target[0] ? Direction.left : Direction.right;
-        if (element.source.connection) {
-            sourceDirection = getDirectionByPoint(element.source.connection, sourceDirection);
-        }
-        if (element.target.connection) {
-            targetDirection = getDirectionByPoint(element.target.connection, targetDirection);
-        }
-        const points = getPoints(source, sourceDirection, target, targetDirection, 30);
+        const handleRefPair = getLineHandleRefPair(board, element);
+        const points = getPoints(handleRefPair.source.point, handleRefPair.source.direction, handleRefPair.target.point, handleRefPair.target.direction, 30);
         return points;
     }
     return element.points;
@@ -614,33 +904,42 @@ function drawMask(board, element, id) {
     maskTargetFillRect.setAttribute('opacity', '0');
     return { mask, maskTargetFillRect };
 }
-const getSourcePoint = (board, element) => {
-    if (element.source.boundId) {
-        const strokeWidth = getStrokeWidthByElement(element);
-        const connectionOffset = PlaitLine.isSourceMark(element, LineMarkerType.none) ? 0 : strokeWidth;
-        const boundElement = getElementById(board, element.source.boundId);
-        return boundElement ? getConnectionPoint(boundElement, element.source.connection, connectionOffset) : element.points[0];
+const getDirectionByBoundElementAndConnection = (board, boundElement, connection) => {
+    const rectangle = getRectangleByPoints(boundElement.points);
+    const engine = getEngine(boundElement.shape);
+    const direction = getDirectionByPointOfRectangle(connection);
+    if (direction) {
+        return direction;
     }
-    return element.points[0];
-};
-const getTargetPoint = (board, element) => {
-    if (element.target.boundId) {
-        const strokeWidth = getStrokeWidthByElement(element);
-        const connectionOffset = PlaitLine.isTargetMark(element, LineMarkerType.none) ? 0 : strokeWidth;
-        const boundElement = getElementById(board, element.target.boundId);
-        return boundElement
-            ? getConnectionPoint(boundElement, element.target.connection, connectionOffset)
-            : element.points[element.points.length - 1];
+    if (engine.getEdgeByConnectionPoint) {
+        const edge = engine.getEdgeByConnectionPoint(rectangle, connection);
+        if (edge) {
+            const vector = [edge[1][0] - edge[0][0], edge[1][1] - edge[0][1]];
+            const vector90 = rotateVector90(vector);
+            const direction = getDirectionByVector(vector90);
+            return direction;
+        }
+    }
+    if (engine.getTangentVectorByConnectionPoint) {
+        const vector = engine.getTangentVectorByConnectionPoint(rectangle, connection);
+        if (vector) {
+            const vector90 = rotateVector90(vector);
+            const direction = getDirectionByVector(vector90);
+            return direction;
+        }
     }
-    return element.points[element.points.length - 1];
+    return null;
 };
-const getConnectionPoint = (geometry, connection, offset) => {
+const getConnectionPoint = (geometry, connection, direction, delta) => {
     const rectangle = getRectangleByPoints(geometry.points);
-    const directionFactor = getDirectionFactor(getDirectionByPoint(connection, Direction.bottom));
-    return [
-        rectangle.x + rectangle.width * connection[0] + directionFactor.x * offset,
-        rectangle.y + rectangle.height * connection[1] + directionFactor.y * offset
-    ];
+    if (direction && delta) {
+        const directionFactor = getDirectionFactor(direction);
+        const point = RectangleClient.getConnectionPoint(rectangle, connection);
+        return [point[0] + directionFactor.x * delta, point[1] + directionFactor.y * delta];
+    }
+    else {
+        return RectangleClient.getConnectionPoint(rectangle, connection);
+    }
 };
 const transformPointToConnection = (board, point, hitElement) => {
     let rectangle = getRectangleByPoints(hitElement.points);
@@ -972,8 +1271,7 @@ class LineActiveGenerator extends Generator {
         if (this.hasResizeHandle) {
             activeG.classList.add('active');
             activeG.classList.add('line-handle');
-            const sourcePoint = getSourcePoint(this.board, element);
-            const targetPoint = getTargetPoint(this.board, element);
+            const [sourcePoint, targetPoint] = getLineHandlePoints(this.board, element);
             const sourceCircle = drawCircle(PlaitBoard.getRoughSVG(this.board), sourcePoint, RESIZE_HANDLE_DIAMETER, {
                 stroke: '#999999',
                 strokeWidth: 1,
@@ -1596,8 +1894,7 @@ var LineResizeHandle;
     LineResizeHandle["target"] = "target";
 })(LineResizeHandle || (LineResizeHandle = {}));
 const getHitLineResizeHandleRef = (board, element, point) => {
-    const sourcePoint = getSourcePoint(board, element);
-    const targetPoint = getTargetPoint(board, element);
+    const [sourcePoint, targetPoint] = getLineHandlePoints(board, element);
     const sourceRectangle = {
         x: sourcePoint[0] - RESIZE_HANDLE_DIAMETER / 2,
         y: sourcePoint[1] - RESIZE_HANDLE_DIAMETER / 2,
@@ -1813,5 +2110,5 @@ const withDraw = (board) => {
  * Generated bundle index. Do not edit.
  */
 
-export { DefaultGeometryActiveStyle, DefaultGeometryProperty, DefaultGeometryStyle, DefaultTextProperty, DrawPointerType, DrawTransforms, GeometryComponent, GeometryPointer, GeometryShape, GeometryThreshold, LineComponent, LineHandleKey, LineMarkerType, LineShape, PlaitDrawElement, PlaitGeometry, PlaitLine, ShapeDefaultSpace, StrokeStyle, createGeometryElement, createLineElement, drawBoundMask, drawGeometry, drawLine, getBoardLines, getCenterPointsOnPolygon, getConnectionPoint, getElbowPoints, getFillByElement, getHitConnectorPoint, getHitLineTextIndex, getLineDashByElement, getLinePoints, getLineTextRectangle, getNearestPoint, getPointsByCenterPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedLineElements, getSourcePoint, getStraightPoints, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getTargetPoint, getTextRectangle, isHitLineText, isHitPolyLine, transformPointToConnection, withDraw };
+export { DefaultGeometryActiveStyle, DefaultGeometryProperty, DefaultGeometryStyle, DefaultTextProperty, DrawPointerType, DrawTransforms, GeometryComponent, GeometryPointer, GeometryShape, GeometryThreshold, LineComponent, LineHandleKey, LineMarkerType, LineShape, PlaitDrawElement, PlaitGeometry, PlaitLine, ShapeDefaultSpace, StrokeStyle, createGeometryElement, createLineElement, drawBoundMask, drawGeometry, drawLine, getBoardLines, getCenterPointsOnPolygon, getConnectionPoint, getDirectionByBoundElementAndConnection, getEdgeOnPolygonByPoint, getElbowPoints, getFillByElement, getHitConnectorPoint, getHitLineTextIndex, getLineDashByElement, getLineHandlePoints, getLineHandleRefPair, getLinePoints, getLineTextRectangle, getNearestPoint, getPointsByCenterPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedLineElements, getStraightPoints, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getTextRectangle, isHitLineText, isHitPolyLine, transformPointToConnection, withDraw };
 //# sourceMappingURL=plait-draw.mjs.map