feat(draw): support draw line for element with angle #WIK-14850

.changeset/rich-carrots-collect.md

@@ -0,0 +1,5 @@
+---
+'@plait/draw': minor
+---
+
+support draw line for element with angle

packages/common/src/utils/vector.ts

@@ -20,12 +20,7 @@ export function getPointByVectorComponent(point: Point, vector: Vector, componen
     return [point[0] + (vector[0] / distance) * component, point[1] + (vector[1] / distance) * component];
 }
 
-export function getPointByVectorDirectionComponent(
-    point: Point,
-    unitVector: Vector,
-    directionComponent: number,
-    isHorizontal: boolean
-) {
+export function getPointByVectorDirectionComponent(point: Point, unitVector: Vector, directionComponent: number, isHorizontal: boolean) {
     if (isHorizontal) {
         return [point[0] + directionComponent, point[1] + (directionComponent / unitVector[0]) * unitVector[1]] as Point;
     } else {
@@ -40,3 +35,14 @@ export function rotateVectorAnti90(vector: Vector): Vector {
     const rotatedY = -x;
     return [rotatedX, rotatedY];
 }
+
+export function rotateVector(vector: Vector, angle: number): Vector {
+    if (!angle) {
+        return vector;
+    }
+    const x = vector[0];
+    const y = vector[1];
+    const rotatedX = x * Math.cos(angle) - y * Math.sin(angle);
+    const rotatedY = x * Math.sin(angle) + y * Math.cos(angle);
+    return [rotatedX, rotatedY];
+}

packages/core/src/utils/angle.ts

@@ -1,13 +1,17 @@
 import { PlaitElement, Point, RectangleClient } from '../interfaces';
 import { approximately, rotate } from './math';
 
-export const rotatePoints = (points: Point[], centerPoint: Point, angle: number) => {
+export const rotatePoints = <T>(points: T, centerPoint: Point, angle: number): T => {
     if (!angle) {
         angle = 0;
     }
-    return points.map(point => {
-        return rotate(point[0], point[1], centerPoint[0], centerPoint[1], angle) as Point;
-    });
+    if (Array.isArray(points) && typeof points[0] === 'number') {
+        return rotate(points[0], points[1], centerPoint[0], centerPoint[1], angle) as T;
+    } else {
+        return (points as Point[]).map(point => {
+            return rotate(point[0], point[1], centerPoint[0], centerPoint[1], angle);
+        }) as T;
+    }
 };
 
 export const getSelectionAngle = (elements: PlaitElement[]) => {
@@ -51,3 +55,27 @@ export const rotatedDataPoints = (points: Point[], rotateCenterPoint: Point, ang
     const { offsetX, offsetY } = getOffsetAfterRotate(RectangleClient.getRectangleByPoints(points), rotateCenterPoint, angle);
     return points.map(p => [p[0] + offsetX, p[1] + offsetY]) as Point[];
 };
+
+export const hasValidAngle = (node: PlaitElement) => {
+    return node.angle && node.angle !== 0;
+};
+
+export const rotatePointsByElement = <T>(points: T, element: PlaitElement): T | null => {
+    if (hasValidAngle(element)) {
+        let rectangle = RectangleClient.getRectangleByPoints(element.points!);
+        const centerPoint = RectangleClient.getCenterPoint(rectangle);
+        return rotatePoints(points, centerPoint, element.angle);
+    } else {
+        return null;
+    }
+};
+
+export const rotateAntiPointsByElement = <T>(points: T, element: PlaitElement): T | null => {
+    if (hasValidAngle(element)) {
+        let rectangle = RectangleClient.getRectangleByPoints(element.points!);
+        const centerPoint = RectangleClient.getCenterPoint(rectangle);
+        return rotatePoints(points, centerPoint, -element.angle);
+    } else {
+        return null;
+    }
+};

packages/draw/src/interfaces/line.ts

@@ -1,4 +1,4 @@
-import { Direction, PlaitBoard, PlaitElement, Point, PointOfRectangle, Vector, getElementById } from '@plait/core';
+import { Direction, PlaitBoard, PlaitElement, Point, PointOfRectangle, Vector, getElementById, rotatePointsByElement } from '@plait/core';
 import { Element } from 'slate';
 import { PlaitGeometry } from './geometry';
 import { StrokeStyle } from './element';
@@ -107,12 +107,23 @@ export const PlaitLine = {
         return line.target.boundId === element.id;
     },
     getPoints(board: PlaitBoard, line: PlaitLine) {
-        let sourcePoint = line.source.boundId
-            ? getConnectionPoint(getElementById<PlaitGeometry>(board, line.source.boundId)!, line.source.connection!)
-            : line.points[0];
-        let targetPoint = line.target.boundId
-            ? getConnectionPoint(getElementById<PlaitGeometry>(board, line.target.boundId)!, line.target.connection!)
-            : line.points[line.points.length - 1];
+        let sourcePoint;
+        if (line.source.boundId) {
+            const sourceElement = getElementById<PlaitGeometry>(board, line.source.boundId)!;
+            const sourceConnectionPoint = getConnectionPoint(sourceElement, line.source.connection!);
+            sourcePoint = rotatePointsByElement(sourceConnectionPoint, sourceElement) || sourceConnectionPoint;
+        } else {
+            sourcePoint = line.points[0];
+        }
+
+        let targetPoint;
+        if (line.target.boundId) {
+            const targetElement = getElementById<PlaitGeometry>(board, line.target.boundId)!;
+            const targetConnectionPoint = getConnectionPoint(targetElement, line.target.connection!);
+            targetPoint = rotatePointsByElement(targetConnectionPoint, targetElement) || targetConnectionPoint;
+        } else {
+            targetPoint = line.points[line.points.length - 1];
+        }
         const restPoints = line.points.length > 2 ? line.points.slice(1, line.points.length - 1) : [];
         return [sourcePoint, ...restPoints, targetPoint];
     }

packages/draw/src/plugins/with-line-auto-complete-reaction.ts

@@ -1,4 +1,17 @@
-import { CursorClass, PlaitBoard, PlaitElement, RgbaToHEX, drawCircle, isSelectionMoving, toHostPoint, toViewBoxPoint } from '@plait/core';
+import {
+    CursorClass,
+    PlaitBoard,
+    PlaitElement,
+    RectangleClient,
+    RgbaToHEX,
+    drawCircle,
+    hasValidAngle,
+    isSelectionMoving,
+    rotateAntiPointsByElement,
+    setAngleForG,
+    toHostPoint,
+    toViewBoxPoint
+} from '@plait/core';
 import { PlaitDrawElement } from '../interfaces';
 import { getAutoCompletePoints, getHitIndexOfAutoCompletePoint, getSelectedDrawElements } from '../utils';
 import { GeometryComponent } from '../geometry.component';
@@ -16,7 +29,7 @@ export const withLineAutoCompleteReaction = (board: PlaitBoard) => {
         const movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         if (!PlaitBoard.isReadonly(board) && !isSelectionMoving(board) && targetElement && PlaitDrawElement.isShape(targetElement)) {
             const points = getAutoCompletePoints(targetElement);
-            const hitIndex = getHitIndexOfAutoCompletePoint(movingPoint, points);
+            const hitIndex = getHitIndexOfAutoCompletePoint(rotateAntiPointsByElement(movingPoint, targetElement) || movingPoint, points);
             const hitPoint = points[hitIndex];
             const component = PlaitElement.getComponent(targetElement) as GeometryComponent;
             component.lineAutoCompleteGenerator!.recoverAutoCompleteG();
@@ -29,6 +42,9 @@ export const withLineAutoCompleteReaction = (board: PlaitBoard) => {
                 });
                 PlaitBoard.getElementActiveHost(board).append(reactionG);
                 PlaitBoard.getBoardContainer(board).classList.add(CursorClass.crosshair);
+                if (hasValidAngle(targetElement)) {
+                    setAngleForG(reactionG, RectangleClient.getCenterPoint(board.getRectangle(targetElement)!), targetElement.angle);
+                }
             }
         }
         pointerMove(event);

packages/draw/src/plugins/with-line-auto-complete.ts

@@ -9,8 +9,13 @@ import {
     Transforms,
     addSelectedElement,
     clearSelectedElement,
+    createDebugGenerator,
     createG,
     distanceBetweenPointAndPoint,
+    hasValidAngle,
+    rotateAntiPointsByElement,
+    rotatePoints,
+    rotatePointsByElement,
     temporaryDisableSelection,
     toHostPoint,
     toViewBoxPoint
@@ -42,7 +47,7 @@ export const withLineAutoComplete = (board: PlaitBoard) => {
         const clickPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         if (!PlaitBoard.isReadonly(board) && targetElement && PlaitDrawElement.isShape(targetElement)) {
             const points = getAutoCompletePoints(targetElement);
-            const index = getHitIndexOfAutoCompletePoint(clickPoint, points);
+            const index = getHitIndexOfAutoCompletePoint(rotateAntiPointsByElement(clickPoint, targetElement) || clickPoint, points);
             const hitPoint = points[index];
             if (hitPoint) {
                 temporaryDisableSelection(board as PlaitOptionsBoard);
@@ -59,7 +64,11 @@ export const withLineAutoComplete = (board: PlaitBoard) => {
         lineShapeG = createG();
         let movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         if (startPoint && sourceElement) {
-            const distance = distanceBetweenPointAndPoint(...movingPoint, ...startPoint);
+            const distance = distanceBetweenPointAndPoint(
+                ...movingPoint,
+                ...(rotatePointsByElement(startPoint, sourceElement) || startPoint)
+            );
+
             if (distance > PRESS_AND_MOVE_BUFFER) {
                 const rectangle = RectangleClient.getRectangleByPoints(sourceElement.points);
                 const shape = getShape(sourceElement);
@@ -69,7 +78,15 @@ export const withLineAutoComplete = (board: PlaitBoard) => {
                     const crossingPoint = engine.getNearestCrossingPoint(rectangle, startPoint);
                     sourcePoint = crossingPoint;
                 }
-                temporaryElement = handleLineCreating(board, LineShape.elbow, sourcePoint, movingPoint, sourceElement, lineShapeG);
+
+                temporaryElement = handleLineCreating(
+                    board,
+                    LineShape.elbow,
+                    rotatePointsByElement(sourcePoint, sourceElement) || sourcePoint,
+                    movingPoint,
+                    sourceElement,
+                    lineShapeG
+                );
             }
         }
         pointerMove(event);

packages/draw/src/plugins/with-line-bound-reaction.ts

@@ -5,6 +5,9 @@ import {
     RectangleClient,
     SELECTION_BORDER_COLOR,
     drawCircle,
+    hasValidAngle,
+    rotateAntiPointsByElement,
+    setAngleForG,
     toHostPoint,
     toViewBoxPoint
 } from '@plait/core';
@@ -37,9 +40,9 @@ export const withLineBoundReaction = (board: PlaitBoard) => {
         if (isLinePointer || isLineResizing) {
             const hitElement = getHitOutlineGeometry(board, movingPoint, -4);
             if (hitElement) {
-                boundShapeG = drawBoundMask(board, hitElement);
-                let nearestPoint = getNearestPoint(hitElement, movingPoint);
                 const rectangle = RectangleClient.getRectangleByPoints(hitElement.points);
+                boundShapeG = drawBoundMask(board, hitElement);
+                let nearestPoint = getNearestPoint(hitElement, rotateAntiPointsByElement(movingPoint, hitElement) || movingPoint);
                 const activeRectangle = RectangleClient.inflate(rectangle, ACTIVE_STROKE_WIDTH);
                 const hitConnector = getHitConnectorPoint(nearestPoint, hitElement, activeRectangle);
                 nearestPoint = hitConnector ? hitConnector : nearestPoint;
@@ -51,6 +54,9 @@ export const withLineBoundReaction = (board: PlaitBoard) => {
                 });
                 boundShapeG.appendChild(circleG);
                 PlaitBoard.getElementActiveHost(board).append(boundShapeG);
+                if (hasValidAngle(hitElement)) {
+                    setAngleForG(boundShapeG, RectangleClient.getCenterPoint(rectangle), hitElement.angle);
+                }
             }
         }
         pointerMove(event);

packages/draw/src/plugins/with-line-resize.ts

@@ -1,4 +1,4 @@
-import { Path, PlaitBoard, PlaitNode, Point } from '@plait/core';
+import { Path, PlaitBoard, PlaitNode, Point, RectangleClient, hasValidAngle, rotateAntiPointsByElement, rotatePoints } from '@plait/core';
 import { ResizeRef, ResizeState, WithResizeOptions, isSourceAndTargetIntersect, simplifyOrthogonalPoints, withResize } from '@plait/common';
 import { getSelectedLineElements } from '../utils/selected';
 import { getHitLineResizeHandleRef, LineResizeHandle } from '../utils/position/line';
@@ -80,7 +80,11 @@ export const withLineResize = (board: PlaitBoard) => {
                 const object = resizeRef.handle === LineResizeHandle.source ? source : target;
                 points[handleIndex] = resizeState.endPoint;
                 if (hitElement) {
-                    object.connection = getConnectionByNearestPoint(board, resizeState.endPoint, hitElement);
+                    object.connection = getConnectionByNearestPoint(
+                        board,
+                        rotateAntiPointsByElement(resizeState.endPoint, hitElement) || resizeState.endPoint,
+                        hitElement
+                    );
                     object.boundId = hitElement.id;
                 } else {
                     object.connection = undefined;

packages/draw/src/utils/line/elbow.ts

@@ -1,4 +1,4 @@
-import { Point, PlaitBoard, getElementById, RectangleClient, Vector } from '@plait/core';
+import { Point, PlaitBoard, getElementById, RectangleClient, Vector, rotatePoints, rotatePointsByElement } from '@plait/core';
 import {
     getPoints,
     getPointByVectorComponent,
@@ -40,7 +40,6 @@ export const getElbowPoints = (board: PlaitBoard, element: PlaitLine) => {
         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');
@@ -95,14 +94,21 @@ export const getSourceAndTargetRectangle = (board: PlaitBoard, element: PlaitLin
         const target = handleRefPair.target;
         targetElement = createFakeElement(target.point, target.vector);
     }
-    const sourceRectangle = RectangleClient.inflate(
-        RectangleClient.getRectangleByPoints(sourceElement.points),
-        getStrokeWidthByElement(sourceElement) * 2
-    );
-    const targetRectangle = RectangleClient.inflate(
-        RectangleClient.getRectangleByPoints(targetElement.points),
-        getStrokeWidthByElement(targetElement) * 2
-    );
+
+    let sourceRectangle = RectangleClient.getRectangleByPoints(sourceElement.points);
+    const rotatedSourceCornerPoints =
+        rotatePointsByElement(RectangleClient.getCornerPoints(sourceRectangle), sourceElement) ||
+        RectangleClient.getCornerPoints(sourceRectangle);
+    sourceRectangle = RectangleClient.getRectangleByPoints(rotatedSourceCornerPoints);
+    sourceRectangle = RectangleClient.inflate(sourceRectangle, getStrokeWidthByElement(sourceElement) * 2);
+
+    let targetRectangle = RectangleClient.getRectangleByPoints(targetElement.points);
+    const rotatedTargetCornerPoints =
+        rotatePointsByElement(RectangleClient.getCornerPoints(targetRectangle), targetElement) ||
+        RectangleClient.getCornerPoints(targetRectangle);
+    targetRectangle = RectangleClient.getRectangleByPoints(rotatedTargetCornerPoints);
+    targetRectangle = RectangleClient.inflate(targetRectangle, getStrokeWidthByElement(targetElement) * 2);
+
     return {
         sourceRectangle,
         targetRectangle

packages/draw/src/utils/line/line-basic.ts

@@ -10,10 +10,19 @@ import {
     createMask,
     createRect,
     distanceBetweenPointAndPoint,
-    catmullRomFitting
+    catmullRomFitting,
+    rotatePoints,
+    hasValidAngle,
+    rotateAntiPointsByElement
 } from '@plait/core';
 import { pointsOnBezierCurves } from 'points-on-curve';
-import { getPointOnPolyline, getPointByVectorComponent, removeDuplicatePoints, getExtendPoint, isSourceAndTargetIntersect } from '@plait/common';
+import {
+    getPointOnPolyline,
+    getPointByVectorComponent,
+    removeDuplicatePoints,
+    getExtendPoint,
+    isSourceAndTargetIntersect
+} from '@plait/common';
 import { LineHandle, LineMarkerType, LineShape, LineText, PlaitDrawElement, PlaitLine, PlaitShape } from '../../interfaces';
 import { getNearestPoint } from '../geometry';
 import { getLineDashByElement, getStrokeColorByElement, getStrokeWidthByElement } from '../style/stroke';
@@ -244,8 +253,13 @@ export const handleLineCreating = (
     lineShapeG: SVGGElement
 ) => {
     const hitElement = getHitOutlineGeometry(board, movingPoint, REACTION_MARGIN);
-    const targetConnection = hitElement ? getConnectionByNearestPoint(board, movingPoint, hitElement) : undefined;
-    const connection = sourceElement ? getConnectionByNearestPoint(board, sourcePoint, sourceElement) : undefined;
+    const targetConnection = hitElement
+        ? getConnectionByNearestPoint(board, rotateAntiPointsByElement(movingPoint, hitElement) || movingPoint, hitElement)
+        : undefined;
+    const sourceConnection = sourceElement
+        ? getConnectionByNearestPoint(board, rotateAntiPointsByElement(sourcePoint, sourceElement) || sourcePoint, sourceElement)
+        : undefined;
+
     const targetBoundId = hitElement ? hitElement.id : undefined;
     const lineGenerator = new LineShapeGenerator(board);
     const memorizedLatest = getLineMemorizedLatest();
@@ -257,7 +271,7 @@ export const handleLineCreating = (
     const temporaryLineElement = createLineElement(
         lineShape,
         [sourcePoint, movingPoint],
-        { marker: sourceMarker || LineMarkerType.none, connection: connection, boundId: sourceElement?.id },
+        { marker: sourceMarker || LineMarkerType.none, connection: sourceConnection, boundId: sourceElement?.id },
         { marker: targetMarker || LineMarkerType.arrow, connection: targetConnection, boundId: targetBoundId },
         [],
         {