fix(swimlane): fix swimlane text position issue (#994)

refactor engine to add strict type for engine options

.changeset/perfect-months-listen.md

@@ -0,0 +1,5 @@
+---
+'@plait/draw': patch
+---
+
+fix swimlane text position issue and add strict type for engine options

packages/draw/src/engines/index.ts

@@ -1,12 +1,13 @@
 import {
     BasicShapes,
+    DrawOptions,
     DrawShapes,
-    EngineExtraData,
     FlowchartSymbols,
     PlaitGeometry,
     ShapeEngine,
     SwimlaneSymbols,
     TableSymbols,
+    TextRectangleOptions,
     UMLSymbols
 } from '../interfaces';
 import { CommentEngine } from './basic-shapes/comment';
@@ -139,8 +140,8 @@ const ShapeEngineMap: Record<DrawShapes, ShapeEngine<any, any, any>> = {
 
 export const getEngine = <
     T extends PlaitElement = PlaitGeometry,
-    P extends EngineExtraData = EngineExtraData,
-    K extends EngineExtraData = EngineExtraData
+    P extends DrawOptions = DrawOptions,
+    K extends TextRectangleOptions = TextRectangleOptions
 >(
     shape: DrawShapes
 ): ShapeEngine<T, P, K> => {

packages/draw/src/engines/uml/combined-fragment.ts

@@ -6,15 +6,15 @@ import {
     getNearestPointBetweenPointAndSegments,
     setStrokeLinecap
 } from '@plait/core';
-import { GeometryCommonTextKeys, PlaitMultipleTextGeometry, ShapeEngine } from '../../interfaces';
+import { DrawOptions, GeometryCommonTextKeys, PlaitMultipleTextGeometry, ShapeEngine } from '../../interfaces';
 import { Options } from 'roughjs/bin/core';
 import { getPolygonEdgeByConnectionPoint } from '../../utils/polygon';
 import { RectangleEngine } from '../basic-shapes/rectangle';
 import { getStrokeWidthByElement } from '../../utils';
 import { ShapeDefaultSpace } from '../../constants';
 import { DrawTextInfo } from '../../generators/text.generator';
 
-export const CombinedFragmentEngine: ShapeEngine<PlaitMultipleTextGeometry, {}, DrawTextInfo> = {
+export const CombinedFragmentEngine: ShapeEngine<PlaitMultipleTextGeometry, DrawOptions, DrawTextInfo> = {
     draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) {
         const rs = PlaitBoard.getRoughSVG(board);
         const shape = rs.path(

packages/draw/src/engines/uml/package.ts

@@ -7,14 +7,14 @@ import {
     setStrokeLinecap
 } from '@plait/core';
 import { getUnitVectorByPointAndPoint } from '@plait/common';
-import { GeometryCommonTextKeys, PlaitMultipleTextGeometry, ShapeEngine } from '../../interfaces';
+import { DrawOptions, GeometryCommonTextKeys, PlaitMultipleTextGeometry, ShapeEngine } from '../../interfaces';
 import { Options } from 'roughjs/bin/core';
 import { RectangleEngine } from '../basic-shapes/rectangle';
 import { getStrokeWidthByElement } from '../../utils';
 import { ShapeDefaultSpace } from '../../constants';
 import { DrawTextInfo } from '../../generators/text.generator';
 
-export const PackageEngine: ShapeEngine<PlaitMultipleTextGeometry, {}, DrawTextInfo> = {
+export const PackageEngine: ShapeEngine<PlaitMultipleTextGeometry, DrawOptions, DrawTextInfo> = {
     draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) {
         const rs = PlaitBoard.getRoughSVG(board);
         const shape = rs.path(

packages/draw/src/generators/text.generator.ts

@@ -9,14 +9,12 @@ import {
 } from '@plait/common';
 import { PlaitBoard, PlaitElement, PlaitOptionsBoard, RectangleClient } from '@plait/core';
 import { getEngine } from '../engines';
-import { DrawShapes, EngineExtraData, PlaitGeometry } from '../interfaces';
+import { DrawShapes, PlaitGeometry, TextRectangleOptions } from '../interfaces';
 import { getTextKey, getTextRectangle } from '../utils';
 
-export interface DrawTextInfo extends EngineExtraData {
-    id: string;
+export interface DrawTextInfo extends TextRectangleOptions {
     text: ParagraphElement;
     textHeight: number;
-    board?: PlaitBoard;
 }
 
 export interface TextGeneratorOptions<T> {

packages/draw/src/interfaces/engine.ts

@@ -2,12 +2,19 @@ import { RectangleClient, PointOfRectangle, Vector, PlaitBoard, Point, PlaitElem
 import { Options } from 'roughjs/bin/core';
 import { PlaitGeometry } from './geometry';
 
-export interface EngineExtraData {}
+export interface DrawOptions {
+    element: PlaitElement;
+}
+
+export interface TextRectangleOptions {
+    id: string;
+    board?: PlaitBoard;
+}
 
 export interface ShapeEngine<
     T extends PlaitElement = PlaitGeometry,
-    P extends EngineExtraData = EngineExtraData,
-    K extends EngineExtraData = EngineExtraData
+    P extends DrawOptions = DrawOptions,
+    K extends TextRectangleOptions = TextRectangleOptions
 > {
     isInsidePoint: (rectangle: RectangleClient, point: Point) => boolean;
     getNearestPoint: (rectangle: RectangleClient, point: Point) => Point;

packages/draw/src/interfaces/table.ts

@@ -1,6 +1,6 @@
 import { PlaitBoard, PlaitElement, Point } from '@plait/core';
-import { EngineExtraData } from './engine';
 import { ParagraphElement } from '@plait/common';
+import { DrawOptions } from './engine';
 
 export enum TableSymbols {
     table = 'table'
@@ -40,7 +40,7 @@ export interface PlaitTableCell {
     fill?: string;
 }
 
-export interface PlaitTableDrawOptions extends EngineExtraData {
+export interface PlaitTableDrawOptions extends DrawOptions {
     element: PlaitTable;
 }
 

packages/draw/src/table.component.ts

@@ -91,7 +91,7 @@ export class TableComponent<T extends PlaitTable> extends CommonElementFlavour<T
                 const textManage = getTextManageByCell(this.board, item);
                 if (textManage) {
                     const engine = getEngine<PlaitTable>(TableSymbols.table);
-                    const rectangle = engine.getTextRectangle!(this.element, { key: item.id, board: this.board });
+                    const rectangle = engine.getTextRectangle!(this.element, { id: item.id, board: this.board });
                     textManage.g.classList.add('vertical-cell-text');
                     setAngleForG(textManage.g, RectangleClient.getCenterPoint(rectangle), degreesToRadians(-90));
                 }

packages/draw/src/utils/common.ts

@@ -21,8 +21,8 @@ import {
 } from '@plait/core';
 import { DefaultDrawStyle, LINE_HIT_GEOMETRY_BUFFER, LINE_SNAPPING_BUFFER, ShapeDefaultSpace } from '../constants';
 import {
+    DrawOptions,
     DrawShapes,
-    EngineExtraData,
     GeometryCommonTextKeys,
     PlaitBaseGeometry,
     PlaitCommonGeometry,
@@ -165,7 +165,7 @@ export const drawShape = (
     outerRectangle: RectangleClient,
     shape: DrawShapes,
     roughOptions: Options,
-    drawOptions: EngineExtraData
+    drawOptions?: DrawOptions
 ) => {
     return getEngine(shape).draw(board, outerRectangle, roughOptions, drawOptions);
 };
@@ -179,7 +179,7 @@ export const drawBoundReaction = (
     const rectangle = RectangleClient.getRectangleByPoints(element.points);
     const activeRectangle = RectangleClient.inflate(rectangle, SNAPPING_STROKE_WIDTH);
     const shape = getElementShape(element);
-    let drawOptions: EngineExtraData = {};
+    let drawOptions: DrawOptions | undefined;
     if (PlaitDrawElement.isElementByTable(element)) {
         drawOptions = { element };
     }