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

@@ -51,3 +51,7 @@ 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;
+};

packages/draw/src/interfaces/line.ts

@@ -1,4 +1,14 @@
-import { Direction, PlaitBoard, PlaitElement, Point, PointOfRectangle, Vector, getElementById } from '@plait/core';
+import {
+    Direction,
+    PlaitBoard,
+    PlaitElement,
+    Point,
+    PointOfRectangle,
+    RectangleClient,
+    Vector,
+    getElementById,
+    rotatePoints
+} from '@plait/core';
 import { Element } from 'slate';
 import { PlaitGeometry } from './geometry';
 import { StrokeStyle } from './element';
@@ -107,12 +117,31 @@ 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 = rotatePoints(
+                [sourceConnectionPoint],
+                RectangleClient.getCenterPoint(board.getRectangle(sourceElement)!),
+                sourceElement.angle
+            )[0];
+        } 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 = rotatePoints(
+                [targetConnectionPoint],
+                RectangleClient.getCenterPoint(board.getRectangle(targetElement)!),
+                targetElement.angle
+            )[0];
+        } 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,16 @@
-import { CursorClass, PlaitBoard, PlaitElement, RgbaToHEX, drawCircle, isSelectionMoving, toHostPoint, toViewBoxPoint } from '@plait/core';
+import {
+    CursorClass,
+    PlaitBoard,
+    PlaitElement,
+    RectangleClient,
+    RgbaToHEX,
+    drawCircle,
+    isSelectionMoving,
+    rotatePoints,
+    setAngleForG,
+    toHostPoint,
+    toViewBoxPoint
+} from '@plait/core';
 import { PlaitDrawElement } from '../interfaces';
 import { getAutoCompletePoints, getHitIndexOfAutoCompletePoint, getSelectedDrawElements } from '../utils';
 import { GeometryComponent } from '../geometry.component';
@@ -15,8 +27,13 @@ export const withLineAutoCompleteReaction = (board: PlaitBoard) => {
         const targetElement = selectedElements.length === 1 && selectedElements[0];
         const movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         if (!PlaitBoard.isReadonly(board) && !isSelectionMoving(board) && targetElement && PlaitDrawElement.isShape(targetElement)) {
+            const [rotatedMovingPoint] = rotatePoints(
+                [movingPoint],
+                RectangleClient.getCenterPoint(board.getRectangle(targetElement)!),
+                -targetElement.angle
+            );
             const points = getAutoCompletePoints(targetElement);
-            const hitIndex = getHitIndexOfAutoCompletePoint(movingPoint, points);
+            const hitIndex = getHitIndexOfAutoCompletePoint(rotatedMovingPoint, points);
             const hitPoint = points[hitIndex];
             const component = PlaitElement.getComponent(targetElement) as GeometryComponent;
             component.lineAutoCompleteGenerator!.recoverAutoCompleteG();
@@ -29,6 +46,7 @@ export const withLineAutoCompleteReaction = (board: PlaitBoard) => {
                 });
                 PlaitBoard.getElementActiveHost(board).append(reactionG);
                 PlaitBoard.getBoardContainer(board).classList.add(CursorClass.crosshair);
+                setAngleForG(reactionG, RectangleClient.getCenterPoint(board.getRectangle(targetElement)!), targetElement.angle);
             }
         }
         pointerMove(event);

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

@@ -9,8 +9,10 @@ import {
     Transforms,
     addSelectedElement,
     clearSelectedElement,
+    createDebugGenerator,
     createG,
     distanceBetweenPointAndPoint,
+    rotatePoints,
     temporaryDisableSelection,
     toHostPoint,
     toViewBoxPoint
@@ -42,7 +44,12 @@ 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 [rotatedClickPoint] = rotatePoints(
+                [clickPoint],
+                RectangleClient.getCenterPoint(board.getRectangle(targetElement)!),
+                -targetElement.angle
+            );
+            const index = getHitIndexOfAutoCompletePoint(rotatedClickPoint, points);
             const hitPoint = points[index];
             if (hitPoint) {
                 temporaryDisableSelection(board as PlaitOptionsBoard);
@@ -59,7 +66,12 @@ 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 [rotatedStartPoint] = rotatePoints(
+                [startPoint],
+                RectangleClient.getCenterPoint(board.getRectangle(sourceElement)!),
+                sourceElement.angle
+            );
+            const distance = distanceBetweenPointAndPoint(...movingPoint, ...rotatedStartPoint);
             if (distance > PRESS_AND_MOVE_BUFFER) {
                 const rectangle = RectangleClient.getRectangleByPoints(sourceElement.points);
                 const shape = getShape(sourceElement);
@@ -69,6 +81,10 @@ export const withLineAutoComplete = (board: PlaitBoard) => {
                     const crossingPoint = engine.getNearestCrossingPoint(rectangle, startPoint);
                     sourcePoint = crossingPoint;
                 }
+
+                if (sourceElement.angle) {
+                    sourcePoint = rotatePoints([sourcePoint], RectangleClient.getCenterPoint(rectangle), sourceElement.angle)[0];
+                }
                 temporaryElement = handleLineCreating(board, LineShape.elbow, sourcePoint, movingPoint, sourceElement, lineShapeG);
             }
         }

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

@@ -5,6 +5,8 @@ import {
     RectangleClient,
     SELECTION_BORDER_COLOR,
     drawCircle,
+    rotatePoints,
+    setAngleForG,
     toHostPoint,
     toViewBoxPoint
 } from '@plait/core';
@@ -37,9 +39,10 @@ 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);
+                const [rotatedMovingPoint] = rotatePoints([movingPoint], RectangleClient.getCenterPoint(rectangle), -hitElement.angle);
+                let nearestPoint = getNearestPoint(hitElement, rotatedMovingPoint);
                 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 (hitElement.angle) {
+                    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, 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,13 @@ 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);
+                    const [rotatedEndPoint] = rotatePoints(
+                        [resizeState.endPoint],
+                        RectangleClient.getCenterPoint(board.getRectangle(hitElement)!),
+                        -hitElement.angle
+                    );
+
+                    object.connection = getConnectionByNearestPoint(board, rotatedEndPoint, 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 } from '@plait/core';
 import {
     getPoints,
     getPointByVectorComponent,
@@ -12,6 +12,8 @@ import { createGeometryElement } from '../geometry';
 import { getStrokeWidthByElement } from '../style/stroke';
 import { getElbowLineRouteOptions, getLineHandleRefPair } from './line-common';
 import { getMidKeyPoints, getMirrorDataPoints, hasIllegalElbowPoint } from './line-resize';
+import { getShape } from '../shape';
+import { getEngine } from '../../engines';
 
 export const getElbowPoints = (board: PlaitBoard, element: PlaitLine) => {
     const handleRefPair = getLineHandleRefPair(board, element);
@@ -40,7 +42,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 +96,31 @@ 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
+
+    let sourceRectangle = RectangleClient.getRectangleByPoints(sourceElement.points);
+    const sourceShape = getShape(sourceElement);
+    const sourceEngine = getEngine(sourceShape);
+    const sourceElementCornerPoints = sourceEngine.getCornerPoints(sourceRectangle);
+    const rotatedSourceElementCornerPoints = rotatePoints(
+        sourceElementCornerPoints,
+        RectangleClient.getCenterPoint(sourceRectangle),
+        sourceElement.angle
     );
-    const targetRectangle = RectangleClient.inflate(
-        RectangleClient.getRectangleByPoints(targetElement.points),
-        getStrokeWidthByElement(targetElement) * 2
+    sourceRectangle = RectangleClient.getRectangleByPoints(rotatedSourceElementCornerPoints);
+    sourceRectangle = RectangleClient.inflate(sourceRectangle, getStrokeWidthByElement(sourceElement) * 2);
+
+    let targetRectangle = RectangleClient.getRectangleByPoints(targetElement.points);
+    const shape = getShape(targetElement);
+    const engine = getEngine(shape);
+    const targetElementCornerPoints = engine.getCornerPoints(targetRectangle);
+    const rotatedTargetElementCornerPoints = rotatePoints(
+        targetElementCornerPoints,
+        RectangleClient.getCenterPoint(targetRectangle),
+        targetElement.angle
     );
+    targetRectangle = RectangleClient.getRectangleByPoints(rotatedTargetElementCornerPoints);
+    targetRectangle = RectangleClient.inflate(targetRectangle, getStrokeWidthByElement(targetElement) * 2);
+
     return {
         sourceRectangle,
         targetRectangle

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

@@ -10,10 +10,18 @@ import {
     createMask,
     createRect,
     distanceBetweenPointAndPoint,
-    catmullRomFitting
+    catmullRomFitting,
+    rotatePoints,
+    hasValidAngle
 } 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 +252,34 @@ 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;
+    let targetConnection = undefined,
+        sourceConnection = undefined;
+    if (hitElement) {
+        if (hasValidAngle(hitElement)) {
+            const rotatedMovingPoint = rotatePoints(
+                [movingPoint],
+                RectangleClient.getCenterPoint(board.getRectangle(hitElement)!),
+                -hitElement.angle
+            )[0];
+            targetConnection = getConnectionByNearestPoint(board, rotatedMovingPoint, hitElement);
+        } else {
+            targetConnection = getConnectionByNearestPoint(board, movingPoint, hitElement);
+        }
+    }
+
+    if (sourceElement) {
+        if (hasValidAngle(sourceElement)) {
+            const revertSourcePoint = rotatePoints(
+                [sourcePoint],
+                RectangleClient.getCenterPoint(board.getRectangle(sourceElement)!),
+                -sourceElement.angle
+            )[0];
+            sourceConnection = getConnectionByNearestPoint(board, revertSourcePoint, sourceElement);
+        } else {
+            sourceConnection = getConnectionByNearestPoint(board, sourcePoint, sourceElement);
+        }
+    }
+
     const targetBoundId = hitElement ? hitElement.id : undefined;
     const lineGenerator = new LineShapeGenerator(board);
     const memorizedLatest = getLineMemorizedLatest();
@@ -257,7 +291,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 },
         [],
         {