fix(draw): throw new Error when get cell points (#942)

worktile · Jul 8, 2024 · 3581b4e · 3581b4e
1 parent eede8bf
commit 3581b4e
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 33 deletions.
diff --git a/.changeset/modern-clocks-doubt.md b/.changeset/modern-clocks-doubt.md
@@ -0,0 +1,5 @@
+---
+'@plait/draw': patch
+---
+
+throw new Error when get cell points
diff --git a/packages/draw/src/engines/table/table.ts b/packages/draw/src/engines/table/table.ts
@@ -10,31 +10,37 @@ import { getNearestPointBetweenPointAndRoundRectangle, getRoundRectangleRadius }
 
 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(board, { ...options?.element } as PlaitTable);
-        pointCells.forEach(cell => {
-            const rectangle = RectangleClient.getRectangleByPoints(cell.points!);
-            const { x, y, width, height } = rectangle;
-            const cellRectangle = drawRectangle(
-                board,
-                {
-                    x: x + ACTIVE_STROKE_WIDTH,
-                    y: y + ACTIVE_STROKE_WIDTH,
-                    width: width - ACTIVE_STROKE_WIDTH * 2,
-                    height: height - ACTIVE_STROKE_WIDTH * 2
-                },
-                { fill: cell.fill, fillStyle: 'solid', strokeWidth: 0 }
-            );
-            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(cellRectangle, cellRightBorder, cellBottomBorder);
-        });
-        setStrokeLinecap(g, 'round');
+        try {
+            const pointCells = getCellsWithPoints(board, { ...options?.element } as PlaitTable);
+            if (pointCells) {
+                const rs = PlaitBoard.getRoughSVG(board);
+                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);
+                pointCells.forEach(cell => {
+                    const rectangle = RectangleClient.getRectangleByPoints(cell.points!);
+                    const { x, y, width, height } = rectangle;
+                    const cellRectangle = drawRectangle(
+                        board,
+                        {
+                            x: x + ACTIVE_STROKE_WIDTH,
+                            y: y + ACTIVE_STROKE_WIDTH,
+                            width: width - ACTIVE_STROKE_WIDTH * 2,
+                            height: height - ACTIVE_STROKE_WIDTH * 2
+                        },
+                        { fill: cell.fill, fillStyle: 'solid', strokeWidth: 0 }
+                    );
+                    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(cellRectangle, cellRightBorder, cellBottomBorder);
+                });
+                setStrokeLinecap(g, 'round');
+            }
+        } catch (error) {
+            console.error(error);
+        }
         return g;
     },
     isInsidePoint(rectangle: RectangleClient, point: Point) {
@@ -51,12 +57,26 @@ export const TableEngine: ShapeEngine<PlaitTable, PlaitTableDrawOptions, PlaitDr
         return RectangleClient.getEdgeCenterPoints(rectangle);
     },
     getTextRectangle(element: PlaitTable, options?: PlaitDrawShapeText) {
-        const cell = getCellWithPoints(options?.board!, element, options!.key);
-        if (PlaitTableElement.isVerticalText(cell)) {
-            return getVerticalTextRectangle(cell);
-        } else {
-            return getHorizontalTextRectangle(cell);
+        try {
+            if (options && options.key) {
+                const cell = getCellWithPoints(options?.board!, element, options!.key);
+                if (cell) {
+                    if (PlaitTableElement.isVerticalText(cell)) {
+                        return getVerticalTextRectangle(cell);
+                    } else {
+                        return getHorizontalTextRectangle(cell);
+                    }
+                }
+            }
+        } catch (error) {
+            console.error(error);
         }
+        return {
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0
+        };
     }
 };
 

diff --git a/packages/draw/src/utils/table.ts b/packages/draw/src/utils/table.ts
@@ -7,7 +7,10 @@ import { getSelectedCells, getSelectedTableElements, isSingleSelectElementByTabl
 import { BaseEditor } from 'slate';
 
 export function getCellsWithPoints(board: PlaitBoard, element: PlaitBaseTable): PlaitTableCellWithPoints[] {
-    const table = (board as PlaitTableBoard).buildTable(element);
+    const table = (board as PlaitTableBoard)?.buildTable(element);
+    if (!table || !table.points || !table.columns || !table.rows) {
+        throw new Error('can not get table cells points');
+    }
     const rectangle = RectangleClient.getRectangleByPoints(table.points);
     const columnsCount = table.columns.length;
     const rowsCount = table.rows.length;
@@ -46,9 +49,13 @@ export function getCellsWithPoints(board: PlaitBoard, element: PlaitBaseTable):
 }
 
 export function getCellWithPoints(board: PlaitBoard, table: PlaitBaseTable, cellId: string) {
-    const cells = getCellsWithPoints(board as PlaitTableBoard, table);
-    const cellIndex = table.cells.findIndex(item => item.id === cellId);
-    return cells[cellIndex];
+    try {
+        const cells = getCellsWithPoints(board as PlaitTableBoard, table);
+        const cellIndex = cells && table.cells.findIndex(item => item.id === cellId);
+        return cells[cellIndex];
+    } catch (error) {
+        throw new Error('can not get table cell points');
+    }
 }
 
 function calculateCellsSize(items: { id: string; [key: string]: any }[], tableSize: number, count: number, isWidth: boolean) {