feat(draw): init table render (#864)

worktile · May 14, 2024 · ea97097 · ea97097
1 parent 9087be6
commit ea97097
Show file tree

Hide file tree

Showing 42 changed files with 745 additions and 106 deletions.
diff --git a/.changeset/tiny-vans-act.md b/.changeset/tiny-vans-act.md
@@ -0,0 +1,5 @@
+---
+'@plait/draw': minor
+---
+
+add table plugin
diff --git a/packages/draw/src/constants/geometry.ts b/packages/draw/src/constants/geometry.ts
@@ -5,14 +5,14 @@ export const ShapeDefaultSpace = {
     rectangleAndText: 4
 };
 
-export const DefaultGeometryStyle = {
+export const DefaultDrawStyle = {
     strokeWidth: 2,
     defaultRadius: 4,
     strokeColor: '#000',
     fill: 'none'
 };
 
-export const DefaultGeometryActiveStyle = {
+export const DefaultDrawActiveStyle = {
     strokeWidth: ACTIVE_STROKE_WIDTH,
     selectionStrokeWidth: ACTIVE_STROKE_WIDTH
 };

diff --git a/packages/draw/src/engines/basic-shapes/cloud.ts b/packages/draw/src/engines/basic-shapes/cloud.ts
@@ -1,4 +1,11 @@
-import { PlaitBoard, Point, PointOfRectangle, RectangleClient, drawRectangle, getNearestPointBetweenPointAndSegments, setPathStrokeLinecap } from '@plait/core';
+import {
+    PlaitBoard,
+    Point,
+    PointOfRectangle,
+    RectangleClient,
+    getNearestPointBetweenPointAndSegments,
+    setPathStrokeLinecap
+} from '@plait/core';
 import { PlaitGeometry, ShapeEngine } from '../../interfaces';
 import { Options } from 'roughjs/bin/core';
 import { getPolygonEdgeByConnectionPoint } from '../../utils/polygon';

diff --git a/packages/draw/src/engines/basic-shapes/diamond.ts b/packages/draw/src/engines/basic-shapes/diamond.ts
@@ -1,7 +1,7 @@
 import { RectangleClient } from '@plait/core';
 import { PlaitGeometry, ShapeEngine } from '../../interfaces';
 import { createPolygonEngine } from './polygon';
-import { getTextRectangle } from '../../utils/geometry';
+import { getTextRectangle } from '../../utils';
 
 export const DiamondEngine: ShapeEngine = createPolygonEngine({
     getPolygonPoints: RectangleClient.getEdgeCenterPoints,

diff --git a/packages/draw/src/engines/basic-shapes/parallelogram.ts b/packages/draw/src/engines/basic-shapes/parallelogram.ts
@@ -1,8 +1,8 @@
 import { Point, RectangleClient } from '@plait/core';
 import { PlaitGeometry, ShapeEngine } from '../../interfaces';
-import { getTextRectangle } from '../../utils/geometry';
 import { createPolygonEngine } from './polygon';
 import { getCenterPointsOnPolygon } from '../../utils/polygon';
+import { getTextRectangle } from '../../utils';
 
 export const getParallelogramPoints = (rectangle: RectangleClient): Point[] => {
     return [

diff --git a/packages/draw/src/engines/basic-shapes/round-comment.ts b/packages/draw/src/engines/basic-shapes/round-comment.ts
@@ -10,9 +10,9 @@ import {
 import { PlaitGeometry, ShapeEngine } from '../../interfaces';
 import { Options } from 'roughjs/bin/core';
 import { ShapeDefaultSpace } from '../../constants';
-import { getStrokeWidthByElement } from '../../utils';
 import { getRoundRectangleRadius } from './round-rectangle';
 import { getPolygonEdgeByConnectionPoint } from '../../utils/polygon';
+import { getStrokeWidthByElement } from '../../utils/common';
 
 const heightRatio = 3 / 4;
 

diff --git a/packages/draw/src/engines/basic-shapes/trapezoid.ts b/packages/draw/src/engines/basic-shapes/trapezoid.ts
@@ -2,7 +2,7 @@ import { Point, RectangleClient } from '@plait/core';
 import { PlaitGeometry, ShapeEngine } from '../../interfaces';
 import { createPolygonEngine } from './polygon';
 import { getCenterPointsOnPolygon } from '../../utils/polygon';
-import { getTextRectangle } from '../../utils/geometry';
+import { getTextRectangle } from '../../utils';
 
 export const getTrapezoidPoints = (rectangle: RectangleClient): Point[] => {
     return [

diff --git a/packages/draw/src/engines/basic-shapes/triangle.ts b/packages/draw/src/engines/basic-shapes/triangle.ts
@@ -1,9 +1,9 @@
 import { Point, RectangleClient } from '@plait/core';
 import { PlaitGeometry, ShapeEngine } from '../../interfaces';
 import { createPolygonEngine } from './polygon';
-import { getStrokeWidthByElement } from '../../utils/style';
 import { ShapeDefaultSpace } from '../../constants';
 import { getCenterPointsOnPolygon } from '../../utils/polygon';
+import { getStrokeWidthByElement } from '../../utils';
 
 export const getTrianglePoints = (rectangle: RectangleClient): Point[] => {
     return [

diff --git a/packages/draw/src/engines/flowchart/database.ts b/packages/draw/src/engines/flowchart/database.ts
@@ -3,7 +3,6 @@ import {
     Point,
     PointOfRectangle,
     RectangleClient,
-    Vector,
     getEllipseTangentSlope,
     getNearestPointBetweenPointAndEllipse,
     getNearestPointBetweenPointAndSegments,
@@ -13,9 +12,9 @@ import {
 } from '@plait/core';
 import { PlaitGeometry, ShapeEngine } from '../../interfaces';
 import { ShapeDefaultSpace } from '../../constants';
-import { getStrokeWidthByElement } from '../../utils/style/stroke';
 import { Options } from 'roughjs/bin/core';
 import { RectangleEngine } from '../basic-shapes/rectangle';
+import { getStrokeWidthByElement } from '../../utils';
 
 export const DatabaseEngine: ShapeEngine = {
     draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) {

diff --git a/packages/draw/src/engines/flowchart/hard-disk.ts b/packages/draw/src/engines/flowchart/hard-disk.ts
@@ -12,9 +12,9 @@ import {
 } from '@plait/core';
 import { PlaitGeometry, ShapeEngine } from '../../interfaces';
 import { ShapeDefaultSpace } from '../../constants';
-import { getStrokeWidthByElement } from '../../utils/style/stroke';
 import { Options } from 'roughjs/bin/core';
 import { RectangleEngine } from '../basic-shapes/rectangle';
+import { getStrokeWidthByElement } from '../../utils';
 
 export const HardDiskEngine: ShapeEngine = {
     draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) {

diff --git a/packages/draw/src/engines/flowchart/internal-storage.ts b/packages/draw/src/engines/flowchart/internal-storage.ts
@@ -8,10 +8,10 @@ import {
 } from '@plait/core';
 import { PlaitGeometry, ShapeEngine } from '../../interfaces';
 import { ShapeDefaultSpace } from '../../constants';
-import { getStrokeWidthByElement } from '../../utils/style/stroke';
 import { Options } from 'roughjs/bin/core';
 import { RectangleEngine } from '../basic-shapes/rectangle';
 import { getPolygonEdgeByConnectionPoint } from '../../utils/polygon';
+import { getStrokeWidthByElement } from '../../utils';
 
 export const InternalStorageEngine: ShapeEngine = {
     draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) {

diff --git a/packages/draw/src/engines/flowchart/manual-input.ts b/packages/draw/src/engines/flowchart/manual-input.ts
@@ -3,7 +3,7 @@ import { PlaitGeometry, ShapeEngine } from '../../interfaces';
 import { createPolygonEngine } from '../basic-shapes/polygon';
 import { ShapeDefaultSpace } from '../../constants';
 import { getCenterPointsOnPolygon } from '../../utils/polygon';
-import { getStrokeWidthByElement } from '../../utils/style/stroke';
+import { getStrokeWidthByElement } from '../../utils';
 
 export const getManualInputPoints = (rectangle: RectangleClient): Point[] => {
     return [

diff --git a/packages/draw/src/engines/flowchart/manual-loop.ts b/packages/draw/src/engines/flowchart/manual-loop.ts
@@ -1,8 +1,8 @@
 import { Point, RectangleClient } from '@plait/core';
 import { PlaitGeometry, ShapeEngine } from '../../interfaces';
-import { getTextRectangle } from '../../utils/geometry';
 import { createPolygonEngine } from '../basic-shapes/polygon';
 import { getCenterPointsOnPolygon } from '../../utils/polygon';
+import { getTextRectangle } from '../../utils';
 
 export const getManualLoopPoints = (rectangle: RectangleClient): Point[] => {
     return [

diff --git a/packages/draw/src/engines/flowchart/note-curly-left.ts b/packages/draw/src/engines/flowchart/note-curly-left.ts
@@ -8,10 +8,10 @@ import {
 } from '@plait/core';
 import { PlaitGeometry, ShapeEngine } from '../../interfaces';
 import { ShapeDefaultSpace } from '../../constants';
-import { getStrokeWidthByElement } from '../../utils/style/stroke';
 import { Options } from 'roughjs/bin/core';
 import { RectangleEngine } from '../basic-shapes/rectangle';
 import { getPolygonEdgeByConnectionPoint } from '../../utils/polygon';
+import { getStrokeWidthByElement } from '../../utils';
 
 export const NoteCurlyLeftEngine: ShapeEngine = {
     draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) {

diff --git a/packages/draw/src/engines/flowchart/note-curly-right.ts b/packages/draw/src/engines/flowchart/note-curly-right.ts
@@ -8,10 +8,10 @@ import {
 } from '@plait/core';
 import { PlaitGeometry, ShapeEngine } from '../../interfaces';
 import { ShapeDefaultSpace } from '../../constants';
-import { getStrokeWidthByElement } from '../../utils/style/stroke';
 import { Options } from 'roughjs/bin/core';
 import { RectangleEngine } from '../basic-shapes/rectangle';
 import { getPolygonEdgeByConnectionPoint } from '../../utils/polygon';
+import { getStrokeWidthByElement } from '../../utils';
 
 export const NoteCurlyRightEngine: ShapeEngine = {
     draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) {

diff --git a/packages/draw/src/engines/flowchart/off-page.ts b/packages/draw/src/engines/flowchart/off-page.ts
@@ -2,7 +2,7 @@ import { Point, RectangleClient } from '@plait/core';
 import { PlaitGeometry, ShapeEngine } from '../../interfaces';
 import { createPolygonEngine } from '../basic-shapes/polygon';
 import { ShapeDefaultSpace } from '../../constants';
-import { getStrokeWidthByElement } from '../../utils/style/stroke';
+import { getStrokeWidthByElement } from '../../utils';
 
 export const getOffPagePoints = (rectangle: RectangleClient): Point[] => {
     return [

diff --git a/packages/draw/src/engines/index.ts b/packages/draw/src/engines/index.ts
@@ -1,4 +1,13 @@
-import { BasicShapes, FlowchartSymbols, GeometryShapes, ShapeEngine, SwimlaneSymbols, TableSymbols } from '../interfaces';
+import {
+    BasicShapes,
+    DrawShapes,
+    EngineExtraData,
+    FlowchartSymbols,
+    PlaitGeometry,
+    ShapeEngine,
+    SwimlaneSymbols,
+    TableSymbols
+} from '../interfaces';
 import { CommentEngine } from './basic-shapes/comment';
 import { CrossEngine } from './basic-shapes/cross';
 import { DiamondEngine } from './basic-shapes/diamond';
@@ -10,7 +19,6 @@ import { ParallelogramEngine } from './basic-shapes/parallelogram';
 import { PentagonEngine } from './basic-shapes/pentagon';
 import { PentagonArrowEngine } from './basic-shapes/pentagon-arrow';
 import { ProcessArrowEngine } from './basic-shapes/process-arrow';
-import { RectangleEngine } from './basic-shapes/rectangle';
 import { RightArrowEngine } from './basic-shapes/right-arrow';
 import { RoundCommentEngine } from './basic-shapes/round-comment';
 import { RoundRectangleEngine } from './basic-shapes/round-rectangle';
@@ -40,8 +48,10 @@ import { NoteCurlyRightEngine } from './flowchart/note-curly-right';
 import { NoteSquareEngine } from './flowchart/note-square';
 import { DisplayEngine } from './flowchart/display';
 import { TableEngine } from './table/table';
+import { RectangleEngine } from './basic-shapes/rectangle';
+import { PlaitElement } from '@plait/core';
 
-export const ShapeEngineMap: Record<GeometryShapes, ShapeEngine> = {
+const ShapeEngineMap: Record<DrawShapes, ShapeEngine<any, any, any>> = {
     [BasicShapes.rectangle]: RectangleEngine,
     [BasicShapes.diamond]: DiamondEngine,
     [BasicShapes.ellipse]: EllipseEngine,
@@ -92,6 +102,12 @@ export const ShapeEngineMap: Record<GeometryShapes, ShapeEngine> = {
     [TableSymbols.table]: TableEngine
 };
 
-export const getEngine = (shape: GeometryShapes) => {
+export const getEngine = <
+    T extends PlaitElement = PlaitGeometry,
+    P extends EngineExtraData = EngineExtraData,
+    K extends EngineExtraData = EngineExtraData
+>(
+    shape: DrawShapes
+): ShapeEngine<T, P, K> => {
     return ShapeEngineMap[shape];
-};
+};
diff --git a/packages/draw/src/engines/table/table.ts b/packages/draw/src/engines/table/table.ts
@@ -1,20 +1,33 @@
-import {
-    PlaitBoard,
-    RectangleClient,
-    Point,
-    createG
-} from '@plait/core';
+import { PlaitBoard, RectangleClient, Point, createG, drawLine } from '@plait/core';
 import { Options } from 'roughjs/bin/core';
+import { PlaitTable, PlaitTableDrawOptions } from '../../interfaces/table';
+import { getCellsWithPoints } from '../../utils/table';
 import { ShapeEngine } from '../../interfaces';
+import { ShapeDefaultSpace } from '../../constants';
+import { getStrokeWidthByElement } from '../../utils';
+import { PlaitDrawShapeText } from '../../generators/text.generator';
 
-export const TableEngine: ShapeEngine = {
-    draw(board: PlaitBoard, rectangle: RectangleClient, options: Options) {
-        // TODO: draw table
+export const TableEngine: ShapeEngine<PlaitTable, PlaitTableDrawOptions, PlaitDrawShapeText> = {
+    draw(board: PlaitBoard, rectangle: RectangleClient, roughOptions: Options, options?: PlaitTableDrawOptions) {
+        const rs = PlaitBoard.getRoughSVG(board);
         const g = createG();
+        const { x, y, width, height } = rectangle;
+        const tableTopBorder = drawLine(rs, [x, y], [x + width, y], roughOptions);
+        const tableLeftBorder = drawLine(rs, [x, y], [x, y + height], roughOptions);
+        g.append(tableTopBorder, tableLeftBorder);
+        const pointCells = getCellsWithPoints({ ...options?.element } as PlaitTable);
+        pointCells.forEach(cell => {
+            const rectangle = RectangleClient.getRectangleByPoints(cell.points!);
+            const { x, y, width, height } = rectangle;
+            const cellRightBorder = drawLine(rs, [x + width, y], [x + width, y + height], roughOptions);
+            const cellBottomBorder = drawLine(rs, [x, y + height], [x + width, y + height], roughOptions);
+            g.append(cellRightBorder, cellBottomBorder);
+        });
         return g;
     },
     isInsidePoint(rectangle: RectangleClient, point: Point) {
-        return false;
+        const rangeRectangle = RectangleClient.getRectangleByPoints([point, point]);
+        return RectangleClient.isHit(rectangle, rangeRectangle);
     },
     getCornerPoints(rectangle: RectangleClient) {
         return RectangleClient.getCornerPoints(rectangle);
@@ -23,9 +36,21 @@ export const TableEngine: ShapeEngine = {
         return [0, 0];
     },
     getConnectorPoints(rectangle: RectangleClient) {
-        return [
-            [0, 0],
-            [0, 0]
-        ];
+        return RectangleClient.getEdgeCenterPoints(rectangle);
+    },
+    getTextRectangle(element: PlaitTable, options?: PlaitDrawShapeText) {
+        const cells = getCellsWithPoints(element);
+        const cellIndex = element.cells.findIndex(item => item.id === options!.key);
+        const cell = cells[cellIndex];
+        const cellRectangle = RectangleClient.getRectangleByPoints(cell.points);
+        const strokeWidth = getStrokeWidthByElement(cell);
+        const height = cell.textHeight || 0;
+        const width = cellRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
+        return {
+            height,
+            width: width > 0 ? width : 0,
+            x: cellRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
+            y: cellRectangle.y + (cellRectangle.height - height) / 2
+        };
     }
 };
diff --git a/packages/draw/src/generators/geometry-shape.generator.ts b/packages/draw/src/generators/geometry-shape.generator.ts
@@ -1,7 +1,7 @@
 import { BasicShapes, PlaitGeometry } from '../interfaces';
 import { Generator } from '@plait/common';
-import { getFillByElement, getLineDashByElement, getStrokeColorByElement, getStrokeWidthByElement } from '../utils/style/stroke';
-import { drawGeometry } from '../utils';
+import { getFillByElement, getLineDashByElement, getStrokeColorByElement } from '../utils/style/stroke';
+import { drawGeometry, getStrokeWidthByElement } from '../utils';
 import { RectangleClient } from '@plait/core';
 
 export interface ShapeData {}

diff --git a/packages/draw/src/generators/line-active.generator.ts b/packages/draw/src/generators/line-active.generator.ts
@@ -2,10 +2,10 @@ import { PlaitBoard, Point, createG, drawRectangle, getSelectedElements } from '
 import { LineShape, PlaitLine } from '../interfaces';
 import { Generator, PRIMARY_COLOR, drawFillPrimaryHandle, drawPrimaryHandle } from '@plait/common';
 import { getMiddlePoints } from '../utils/line/line-basic';
-import { DefaultGeometryActiveStyle } from '../constants';
 import { getNextRenderPoints } from '../utils/line/elbow';
 import { isUpdatedHandleIndex } from '../utils/line';
 import { getHitPointIndex } from '../utils/position/line';
+import { DefaultDrawActiveStyle } from '../constants';
 
 export interface ActiveData {
     selected: boolean;
@@ -73,7 +73,7 @@ export class LineActiveGenerator extends Generator<PlaitLine, ActiveData> {
                 }
                 const strokeG = drawRectangle(this.board, activeRectangle, {
                     stroke: PRIMARY_COLOR,
-                    strokeWidth: DefaultGeometryActiveStyle.selectionStrokeWidth
+                    strokeWidth: DefaultDrawActiveStyle.selectionStrokeWidth
                 });
                 strokeG.style.opacity = opacity;
                 activeG.appendChild(strokeG);

diff --git a/packages/draw/src/generators/table.generator.ts b/packages/draw/src/generators/table.generator.ts
@@ -0,0 +1,28 @@
+import { TableSymbols } from '../interfaces';
+import { Generator } from '@plait/common';
+import { RectangleClient } from '@plait/core';
+import { PlaitTable } from '../interfaces/table';
+import { getEngine } from '../engines';
+
+export interface TableData {}
+
+export class TableGenerator extends Generator<PlaitTable, TableData> {
+    canDraw(element: PlaitTable, data: TableData): boolean {
+        return true;
+    }
+
+    draw(element: PlaitTable, data: TableData) {
+        const rectangle = RectangleClient.getRectangleByPoints(element.points);
+        return getEngine(TableSymbols.table).draw(
+            this.board,
+            rectangle,
+            {
+                strokeWidth: 1,
+                stroke: '#333'
+            },
+            {
+                element: element
+            }
+        );
+    }
+}