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

package/interfaces/geometry.d.ts

@@ -1,4 +1,4 @@
-import { PlaitBoard, PlaitElement, Point, RectangleClient } from '@plait/core';
+import { PlaitBoard, PlaitElement, Point, PointOfRectangle, RectangleClient, Vector } from '@plait/core';
 import { Options } from 'roughjs/bin/core';
 import { ParagraphElement } from '@plait/text';
 import { StrokeStyle } from './element';
@@ -8,7 +8,11 @@ export declare enum GeometryShape {
     diamond = "diamond",
     roundRectangle = "roundRectangle",
     parallelogram = "parallelogram",
-    text = "text"
+    text = "text",
+    triangle = "triangle",
+    leftArrow = "leftArrow",
+    trapezoid = "trapezoid",
+    rightArrow = "rightArrow"
 }
 export interface PlaitGeometry extends PlaitElement {
     points: [Point, Point];
@@ -40,5 +44,8 @@ export interface ShapeEngine {
     isHit: (rectangle: RectangleClient, point: Point) => boolean;
     getNearestPoint: (rectangle: RectangleClient, point: Point) => Point;
     getConnectorPoints: (rectangle: RectangleClient) => Point[];
+    getCornerPoints: (rectangle: RectangleClient) => Point[];
+    getEdgeByConnectionPoint?: (rectangle: RectangleClient, point: PointOfRectangle) => [Point, Point] | null;
+    getTangentVectorByConnectionPoint?: (rectangle: RectangleClient, point: PointOfRectangle) => Vector | null;
     draw: (board: PlaitBoard, rectangle: RectangleClient, options: Options) => SVGGElement;
 }

package/interfaces/line.d.ts

@@ -1,4 +1,4 @@
-import { PlaitElement, Point } from '@plait/core';
+import { Direction, PlaitElement, Point, PointOfRectangle } from '@plait/core';
 import { Element } from 'slate';
 import { PlaitGeometry } from './geometry';
 import { StrokeStyle } from './element';
@@ -26,9 +26,15 @@ export interface LineText {
 }
 export interface LineHandle {
     boundId?: string;
-    connection?: Point;
+    connection?: PointOfRectangle;
     marker: LineMarkerType;
 }
+export interface LineHandleRef {
+    key: LineHandleKey;
+    direction: Direction;
+    point: PointOfRectangle;
+    boundElement?: PlaitGeometry;
+}
 export interface PlaitLine extends PlaitElement {
     type: 'line';
     shape: LineShape;
@@ -52,6 +58,7 @@ export interface PlaitElbowLine extends PlaitLine {
 }
 export declare const PlaitLine: {
     getTextEditors(element: PlaitLine): (import("slate").BaseEditor & import("slate-angular").AngularEditor & import("slate-history").HistoryEditor)[];
+    isSourceMarkOrTargetMark(line: PlaitLine, markType: LineMarkerType, handleKey: LineHandleKey): boolean;
     isSourceMark(line: PlaitLine, markType: LineMarkerType): boolean;
     isTargetMark(line: PlaitLine, markType: LineMarkerType): boolean;
     isBoundElementOfSource(line: PlaitLine, element: PlaitGeometry): boolean;

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "@plait/draw",
-  "version": "0.1.0-next.11",
+  "version": "0.1.0-next.12",
   "peerDependencies": {
     "@angular/common": "^16.0.0",
-    "@angular/core": "^16.0.0"
+    "@angular/core": "^16.0.0",
+    "is-hotkey": "^0.2.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/styles/styles.scss

@@ -4,7 +4,7 @@
             cursor: default;
         }
     }
-    &:not(.pointer-text):not(.pointer-selection):not(.pointer-hand) 
+    &:not(.pointer-text):not(.pointer-selection):not(.pointer-hand)
      {
         .board-host-svg {
             cursor: crosshair;

package/utils/engine/left-arrow.d.ts

@@ -0,0 +1,4 @@
+import { Point, RectangleClient } from '@plait/core';
+import { ShapeEngine } from '../../interfaces';
+export declare const LeftArrowEngine: ShapeEngine;
+export declare const getLeftArrowPoints: (rectangle: RectangleClient) => Point[];

package/utils/engine/parallelogram.d.ts

@@ -1,4 +1,4 @@
 import { Point, RectangleClient } from '@plait/core';
 import { ShapeEngine } from '../../interfaces';
 export declare const ParallelogramEngine: ShapeEngine;
-export declare const getParallelogramPoints: (rectangle: RectangleClient) => Point[];
+export declare const getParallelogramCornerPoints: (rectangle: RectangleClient) => Point[];

package/utils/engine/right-arrow.d.ts

@@ -0,0 +1,4 @@
+import { Point, RectangleClient } from '@plait/core';
+import { ShapeEngine } from '../../interfaces';
+export declare const RightArrowEngine: ShapeEngine;
+export declare const getRightArrowPoints: (rectangle: RectangleClient) => Point[];

package/utils/engine/trapezoid.d.ts

@@ -0,0 +1,4 @@
+import { Point, RectangleClient } from '@plait/core';
+import { ShapeEngine } from '../../interfaces';
+export declare const TrapezoidEngine: ShapeEngine;
+export declare const getTrapezoidPoints: (rectangle: RectangleClient) => Point[];

package/utils/engine/triangle.d.ts

@@ -0,0 +1,4 @@
+import { Point, RectangleClient } from '@plait/core';
+import { ShapeEngine } from '../../interfaces';
+export declare const TriangleEngine: ShapeEngine;
+export declare const getTrianglePoints: (rectangle: RectangleClient) => Point[];

package/utils/geometry.d.ts

@@ -14,3 +14,4 @@ export declare const drawBoundMask: (board: PlaitBoard, element: PlaitGeometry)
 export declare const drawGeometry: (board: PlaitBoard, outerRectangle: RectangleClient, shape: GeometryShape, options: Options) => SVGGElement;
 export declare const getNearestPoint: (element: PlaitGeometry, point: Point, inflateDelta?: number) => Point;
 export declare const getCenterPointsOnPolygon: (points: Point[]) => Point[];
+export declare const getEdgeOnPolygonByPoint: (corners: Point[], point: Point) => [Point, Point] | null;

package/utils/line.d.ts

@@ -1,16 +1,20 @@
-import { Point, PlaitBoard, RectangleClient } from '@plait/core';
-import { LineHandle, LineShape, PlaitGeometry, PlaitLine } from '../interfaces';
+import { Point, PlaitBoard, RectangleClient, PointOfRectangle, Direction } from '@plait/core';
+import { LineHandle, LineHandleRef, LineShape, PlaitGeometry, PlaitLine } from '../interfaces';
 export declare const createLineElement: (shape: LineShape, points: [Point, Point], source: LineHandle, target: LineHandle, options?: Pick<PlaitLine, 'strokeColor' | 'strokeWidth'>) => PlaitLine;
 export declare const getLinePoints: (board: PlaitBoard, element: PlaitLine) => Point[];
-export declare const getStraightPoints: (board: PlaitBoard, element: PlaitLine) => Point[];
+export declare const getStraightPoints: (board: PlaitBoard, element: PlaitLine) => PointOfRectangle[];
+export declare const getLineHandlePoints: (board: PlaitBoard, element: PlaitLine) => PointOfRectangle[];
+export declare const getLineHandleRefPair: (board: PlaitBoard, element: PlaitLine) => {
+    source: LineHandleRef;
+    target: LineHandleRef;
+};
 export declare const getElbowPoints: (board: PlaitBoard, element: PlaitLine) => Point[];
 export declare const isHitPolyLine: (pathPoints: Point[], point: Point, strokeWidth: number, expand?: number) => boolean;
 export declare const getHitLineTextIndex: (board: PlaitBoard, element: PlaitLine, point: Point) => number;
 export declare const isHitLineText: (board: PlaitBoard, element: PlaitLine, point: Point) => boolean;
 export declare const drawLine: (board: PlaitBoard, element: PlaitLine) => SVGGElement;
-export declare const getSourcePoint: (board: PlaitBoard, element: PlaitLine) => Point;
-export declare const getTargetPoint: (board: PlaitBoard, element: PlaitLine) => Point;
-export declare const getConnectionPoint: (geometry: PlaitGeometry, connection: Point, offset: number) => Point;
+export declare const getDirectionByBoundElementAndConnection: (board: PlaitBoard, boundElement: PlaitGeometry, connection: PointOfRectangle) => Direction | null;
+export declare const getConnectionPoint: (geometry: PlaitGeometry, connection: Point, direction?: Direction, delta?: number) => Point;
 export declare const transformPointToConnection: (board: PlaitBoard, point: Point, hitElement: PlaitGeometry) => Point;
 export declare const getHitConnectorPoint: (movingPoint: Point, hitElement: PlaitGeometry, rectangle: RectangleClient) => Point | undefined;
 export declare const getLineTextRectangle: (board: PlaitBoard, element: PlaitLine, index: number) => RectangleClient;