fix(draw): fix remove column and row error

.changeset/stupid-carrots-attend.md

@@ -0,0 +1,5 @@
+---
+'@plait/draw': patch
+---
+
+fix remove column and row error

packages/draw/src/plugins/with-draw-fragment.ts

@@ -35,7 +35,8 @@ export const withDrawFragment = (baseBoard: PlaitBoard) => {
 
             const boundLineElements = [
                 ...getBoundedLineElements(board, geometryElements),
-                ...getBoundedLineElements(board, imageElements)
+                ...getBoundedLineElements(board, imageElements),
+                ...getBoundedLineElements(board, tableElements)
             ].filter(line => !lineElements.includes(line));
             data.push(
                 ...[
@@ -125,4 +126,4 @@ export const getBoundedLineElements = (board: PlaitBoard, plaitShapes: PlaitShap
     return lines.filter(line =>
         plaitShapes.find(shape => PlaitLine.isBoundElementOfSource(line, shape) || PlaitLine.isBoundElementOfTarget(line, shape))
     );
-};
+};

packages/draw/src/transforms/swimlane.ts

@@ -2,17 +2,15 @@ import { idCreator, PlaitBoard, Point, RectangleClient, Transforms } from '@plai
 import { PlaitDrawElement, PlaitSwimlane, SwimlaneSymbols } from '../interfaces';
 import { PlaitTableCell } from '../interfaces/table';
 import { getCellWithPoints } from '../utils/table';
+import { Alignment } from '@plait/text';
 
 export const addSwimlaneRow = (board: PlaitBoard, swimlane: PlaitSwimlane, index: number) => {
     if (PlaitDrawElement.isSwimlane(swimlane) && swimlane.shape === SwimlaneSymbols.swimlaneHorizontal) {
         const newRows = [...swimlane.rows];
         const newRowId = idCreator();
         newRows.splice(index, 0, { id: newRowId });
 
-        let newCells = createNewRowCells(swimlane, newRowId);
-        newCells.shift();
-        newCells = [...swimlane.cells, ...newCells];
-
+        const newCells = [...swimlane.cells, ...createNewSwimlaneCells(swimlane, newRowId, 'column')];
         const lastCellPoints = getCellWithPoints(board, swimlane, swimlane.cells[swimlane.cells.length - 1].id).points;
         const lastRowHeight = RectangleClient.getRectangleByPoints(lastCellPoints).height;
         const newPoints: Point[] = [swimlane.points[0], [swimlane.points[1][0], swimlane.points[1][1] + lastRowHeight]];
@@ -27,10 +25,7 @@ export const addSwimlaneColumn = (board: PlaitBoard, swimlane: PlaitSwimlane, in
         const newColumnId = idCreator();
         newColumns.splice(index, 0, { id: newColumnId });
 
-        let newCells = createNewColumnCells(swimlane, newColumnId);
-        newCells.shift();
-        newCells = [...swimlane.cells, ...newCells];
-
+        const newCells = [...swimlane.cells, ...createNewSwimlaneCells(swimlane, newColumnId, 'row')];
         const lastCellPoints = getCellWithPoints(board, swimlane, swimlane.cells[swimlane.cells.length - 1].id).points;
         const lastColumnWidth = RectangleClient.getRectangleByPoints(lastCellPoints).width;
         const newPoints: Point[] = [swimlane.points[0], [swimlane.points[1][0] + lastColumnWidth, swimlane.points[1][1]]];
@@ -51,7 +46,8 @@ export const removeSwimlaneRow = (board: PlaitBoard, swimlane: PlaitSwimlane, in
             const newCells = swimlane.cells.filter(item => item.rowId !== removeRow.id);
             let removeRowHeight = removeRow.height;
             if (!removeRowHeight) {
-                const cellPoints = getCellWithPoints(board, swimlane, swimlane.cells[index].id).points;
+                const rowCell = swimlane.cells.find(item => item.rowId === removeRow.id)!;
+                const cellPoints = getCellWithPoints(board, swimlane, rowCell.id).points;
                 removeRowHeight = RectangleClient.getRectangleByPoints(cellPoints).height;
             }
             const newPoints: Point[] = [swimlane.points[0], [swimlane.points[1][0], swimlane.points[1][1] - removeRowHeight]];
@@ -72,7 +68,8 @@ export const removeSwimlaneColumn = (board: PlaitBoard, swimlane: PlaitSwimlane,
             const newCells = swimlane.cells.filter(item => item.columnId !== removeColumn.id);
             let removeColumnWidth = removeColumn.width;
             if (!removeColumnWidth) {
-                const cellPoints = getCellWithPoints(board, swimlane, swimlane.cells[index].id).points;
+                const columnCell = swimlane.cells.find(item => item.columnId === removeColumn.id)!;
+                const cellPoints = getCellWithPoints(board, swimlane, columnCell.id).points;
                 removeColumnWidth = RectangleClient.getRectangleByPoints(cellPoints).width;
             }
             const newPoints: Point[] = [swimlane.points[0], [swimlane.points[1][0] - removeColumnWidth, swimlane.points[1][1]]];
@@ -81,20 +78,23 @@ export const removeSwimlaneColumn = (board: PlaitBoard, swimlane: PlaitSwimlane,
     }
 };
 
-const createNewColumnCells = (swimlane: PlaitSwimlane, newColumnId: string): PlaitTableCell[] => {
-    return swimlane.rows.map(row => ({
+const createNewSwimlaneCells = (swimlane: PlaitSwimlane, newId: string, type: 'row' | 'column'): PlaitTableCell[] => {
+    const cells: PlaitTableCell[] = swimlane[`${type}s`].map(item => ({
         id: idCreator(),
-        rowId: row.id,
-        columnId: newColumnId
-    }));
-};
-
-const createNewRowCells = (swimlane: PlaitSwimlane, newRowId: string): PlaitTableCell[] => {
-    return swimlane.columns.map(column => ({
-        id: idCreator(),
-        rowId: newRowId,
-        columnId: column.id
+        rowId: type === 'row' ? item.id : newId,
+        columnId: type === 'row' ? newId : item.id
     }));
+    cells.shift();
+    cells[0] = {
+        ...cells[0],
+        text: {
+            children: [{ text: 'Lane' }],
+            align: Alignment.center,
+            direction: type === 'row' ? undefined : 'vertical'
+        },
+        textHeight: 20
+    };
+    return cells;
 };
 
 const updateSwimlane = (

packages/draw/src/utils/swimlane.ts

@@ -13,7 +13,13 @@ export function buildSwimlaneTable(element: PlaitSwimlane) {
                 };
             }
             if (item.text && item.textHeight && !item.text.direction) {
-                item.text.direction = 'vertical';
+                item = {
+                    ...item,
+                    text: {
+                        ...item.text,
+                        direction: 'vertical'
+                    }
+                };
             }
             return item;
         });