@plait/draw 0.59.0 → 0.60.0

package/fesm2022/plait-draw.mjs

@@ -71,8 +71,18 @@ var UMLSymbols;
     UMLSymbols["actor"] = "actor";
     UMLSymbols["useCase"] = "useCase";
     UMLSymbols["container"] = "container";
+    UMLSymbols["note"] = "note";
+    UMLSymbols["simpleClass"] = "simpleClass";
+    UMLSymbols["activityClass"] = "activityClass";
+    UMLSymbols["branchMerge"] = "branchMerge";
+    UMLSymbols["port"] = "port";
     UMLSymbols["package"] = "package";
     UMLSymbols["combinedFragment"] = "combinedFragment";
+    UMLSymbols["class"] = "class";
+    UMLSymbols["interface"] = "interface";
+    UMLSymbols["object"] = "object";
+    UMLSymbols["activation"] = "activation";
+    UMLSymbols["deletion"] = "deletion";
 })(UMLSymbols || (UMLSymbols = {}));
 var MultipleTextGeometryCommonTextKeys;
 (function (MultipleTextGeometryCommonTextKeys) {
@@ -201,6 +211,22 @@ const DefaultPackageProperty = {
         }
     ]
 };
+const DefaultActivationProperty = {
+    width: 18,
+    height: 80
+};
+const DefaultObjectProperty = {
+    width: 120,
+    height: 60
+};
+const DefaultDeletionProperty = {
+    width: 40,
+    height: 40
+};
+const DefaultPortProperty = {
+    width: 20,
+    height: 20
+};
 const DefaultCombinedFragmentProperty = {
     width: 400,
     height: 280,
@@ -217,6 +243,32 @@ const DefaultCombinedFragmentProperty = {
         }
     ]
 };
+const DefaultClassProperty = {
+    width: 230,
+    height: 180,
+    texts: [
+        { text: 'Class', align: Alignment.center },
+        {
+            text: '+ attribute1:type  defaultValue\n+ attribute2:type\n- attribute3:type',
+            align: Alignment.left
+        },
+        {
+            text: '+ operation1(params):returnType\n- operation2(params)\n- operation3()',
+            align: Alignment.left
+        }
+    ]
+};
+const DefaultInterfaceProperty = {
+    width: 230,
+    height: 140,
+    texts: [
+        { text: '<<interface>>\nInterface', align: Alignment.center },
+        {
+            text: '+ operation1(params):returnType\n- operation2(params)\n- operation3()',
+            align: Alignment.left
+        }
+    ]
+};
 const DefaultSwimlaneVerticalProperty = {
     width: 450,
     height: 500
@@ -263,8 +315,18 @@ const DefaultUMLPropertyMap = {
     [UMLSymbols.actor]: DefaultActorProperty,
     [UMLSymbols.useCase]: DefaultDocumentProperty,
     [UMLSymbols.container]: DefaultContainerProperty,
+    [UMLSymbols.note]: DefaultObjectProperty,
     [UMLSymbols.package]: DefaultPackageProperty,
-    [UMLSymbols.combinedFragment]: DefaultCombinedFragmentProperty
+    [UMLSymbols.combinedFragment]: DefaultCombinedFragmentProperty,
+    [UMLSymbols.class]: DefaultClassProperty,
+    [UMLSymbols.interface]: DefaultInterfaceProperty,
+    [UMLSymbols.activation]: DefaultActivationProperty,
+    [UMLSymbols.object]: DefaultObjectProperty,
+    [UMLSymbols.deletion]: DefaultDeletionProperty,
+    [UMLSymbols.activityClass]: DefaultObjectProperty,
+    [UMLSymbols.simpleClass]: DefaultObjectProperty,
+    [UMLSymbols.port]: DefaultPortProperty,
+    [UMLSymbols.branchMerge]: DefaultDeletionProperty
 };
 const MultipleTextGeometryTextKeys = {
     [UMLSymbols.package]: Object.keys(MultipleTextGeometryCommonTextKeys),
@@ -277,7 +339,14 @@ const DefaultSwimlanePropertyMap = {
 const LINE_HIT_GEOMETRY_BUFFER = 10;
 const LINE_SNAPPING_BUFFER = 6;
 const LINE_SNAPPING_CONNECTOR_BUFFER = 8;
-const GEOMETRY_WITHOUT_TEXT = [FlowchartSymbols.or, FlowchartSymbols.summingJunction];
+const GEOMETRY_WITHOUT_TEXT = [
+    FlowchartSymbols.or,
+    FlowchartSymbols.summingJunction,
+    UMLSymbols.activation,
+    UMLSymbols.deletion,
+    UMLSymbols.port,
+    UMLSymbols.branchMerge
+];
 const GEOMETRY_WITH_MULTIPLE_TEXT = [UMLSymbols.package, UMLSymbols.combinedFragment];
 
 const getGeometryPointers = () => {
@@ -749,7 +818,7 @@ const getMultipleTextGeometryTextKeys = (shape) => {
 };
 const createMultipleTextGeometryElement = (shape, points, options = {}) => {
     const id = idCreator();
-    const drawShapeTexts = buildDefaultTextsByShape(shape, id);
+    const drawShapeTexts = buildDefaultTextsByShape(shape);
     return {
         id,
         type: 'geometry',
@@ -761,7 +830,7 @@ const createMultipleTextGeometryElement = (shape, points, options = {}) => {
         ...options
     };
 };
-const buildDefaultTextsByShape = (shape, elementId) => {
+const buildDefaultTextsByShape = (shape) => {
     const memorizedLatest = getMemorizedLatestByPointer(shape);
     const textProperties = { ...memorizedLatest.textProperties };
     const alignment = textProperties?.align;
@@ -1796,6 +1865,89 @@ function drawMask(board, element, id) {
     return { mask, maskTargetFillRect };
 }
 
+const createUMLClassOrInterfaceGeometryElement = (board, shape, points) => {
+    const memorizedLatest = getMemorizedLatestByPointer(shape);
+    const element = {
+        id: idCreator(),
+        type: 'table',
+        angle: 0,
+        opacity: 1,
+        points,
+        strokeWidth: DefaultBasicShapeProperty.strokeWidth,
+        ...memorizedLatest.geometryProperties
+    };
+    let rows;
+    let columns;
+    if (shape === UMLSymbols.class) {
+        rows = [
+            {
+                id: idCreator(),
+                height: 30
+            },
+            {
+                id: idCreator()
+            },
+            {
+                id: idCreator()
+            }
+        ];
+        columns = [
+            {
+                id: idCreator()
+            }
+        ];
+    }
+    else {
+        rows = [
+            {
+                id: idCreator(),
+                height: 50
+            },
+            {
+                id: idCreator()
+            }
+        ];
+        columns = [
+            {
+                id: idCreator()
+            }
+        ];
+    }
+    return {
+        ...element,
+        shape,
+        rows,
+        columns,
+        cells: buildTableCellsForGeometry(board, rows, columns, shape)
+    };
+};
+const buildTableCellsForGeometry = (board, rows, columns, shape) => {
+    const memorizedLatest = getMemorizedLatestByPointer(shape);
+    const cellCount = rows.length * columns.length;
+    const defaultTexts = getDefaultGeometryProperty(shape)?.texts || [];
+    const testHeights = defaultTexts.map((textItem) => {
+        return getTextShapeProperty(board, textItem.text || DefaultTextProperty.text, memorizedLatest.textProperties['font-size']).height;
+    });
+    return new Array(cellCount).fill('').map((item, index) => {
+        const rowIndex = Math.floor(index / columns.length);
+        const columnIndex = index % columns.length;
+        return {
+            id: idCreator(),
+            rowId: rows[rowIndex].id,
+            columnId: columns[columnIndex].id,
+            textHeight: testHeights[index],
+            text: {
+                children: [
+                    {
+                        text: defaultTexts[index].text
+                    }
+                ],
+                align: defaultTexts[index].align
+            }
+        };
+    });
+};
+
 const createGeometryElement = (shape, points, text, options = {}, textProperties = {}) => {
     if (GEOMETRY_WITHOUT_TEXT.includes(shape)) {
         return createGeometryElementWithoutText(shape, points, options);
@@ -1981,6 +2133,9 @@ const createTextElement = (board, points, text = DefaultTextProperty.text, textH
 const createDefaultGeometry = (board, points, shape) => {
     const memorizedLatest = getMemorizedLatestByPointer(shape);
     const textHeight = getTextShapeProperty(board, DefaultTextProperty.text, memorizedLatest.textProperties['font-size']).height;
+    if (PlaitDrawElement.isUMLClassOrInterface({ shape })) {
+        return createUMLClassOrInterfaceGeometryElement(board, shape, points);
+    }
     if (isMultipleTextShape(shape)) {
         return createMultipleTextGeometryElement(shape, points, {
             strokeWidth: DefaultBasicShapeProperty.strokeWidth,
@@ -1996,12 +2151,14 @@ const createDefaultGeometry = (board, points, shape) => {
 };
 const editText = (board, element, text) => {
     const textManage = text ? getTextManage(`${element.id}-${text.key}`) : getFirstTextManage(element);
-    textManage.edit(() => {
-        // delay to avoid blinking
-        setTimeout(() => {
-            rerenderGeometryActive(board, element);
-        }, 200);
-    });
+    if (textManage) {
+        textManage.edit(() => {
+            // delay to avoid blinking
+            setTimeout(() => {
+                rerenderGeometryActive(board, element);
+            }, 200);
+        });
+    }
     rerenderGeometryActive(board, element);
 };
 const rerenderGeometryActive = (board, element) => {
@@ -2389,9 +2546,7 @@ const addSwimlaneRow = (board, swimlane, index) => {
         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 = [swimlane.points[0], [swimlane.points[1][0], swimlane.points[1][1] + lastRowHeight]];
@@ -2403,9 +2558,7 @@ const addSwimlaneColumn = (board, swimlane, index) => {
         const newColumns = [...swimlane.columns];
         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 = [swimlane.points[0], [swimlane.points[1][0] + lastColumnWidth, swimlane.points[1][1]]];
@@ -2425,7 +2578,8 @@ const removeSwimlaneRow = (board, swimlane, index) => {
             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 = [swimlane.points[0], [swimlane.points[1][0], swimlane.points[1][1] - removeRowHeight]];
@@ -2446,7 +2600,8 @@ const removeSwimlaneColumn = (board, swimlane, index) => {
             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 = [swimlane.points[0], [swimlane.points[1][0] - removeColumnWidth, swimlane.points[1][1]]];
@@ -2454,19 +2609,23 @@ const removeSwimlaneColumn = (board, swimlane, index) => {
         }
     }
 };
-const createNewColumnCells = (swimlane, newColumnId) => {
-    return swimlane.rows.map(row => ({
+const createNewSwimlaneCells = (swimlane, newId, type) => {
+    const cells = swimlane[`${type}s`].map(item => ({
         id: idCreator(),
-        rowId: row.id,
-        columnId: newColumnId
-    }));
-};
-const createNewRowCells = (swimlane, newRowId) => {
-    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 = (board, swimlane, newColumns, newRows, newCells, newPoints) => {
     const path = PlaitBoard.findPath(board, swimlane);
@@ -4781,6 +4940,7 @@ const TableEngine = {
             const cellBottomBorder = drawLine$1(rs, [x, y + height], [x + width, y + height], roughOptions);
             g.append(cellRightBorder, cellBottomBorder);
         });
+        setStrokeLinecap(g, 'round');
         return g;
     },
     isInsidePoint(rectangle, point) {
@@ -5098,6 +5258,130 @@ const CombinedFragmentEngine = {
     }
 };
 
+const DeletionEngine = {
+    draw(board, rectangle, options) {
+        const rs = PlaitBoard.getRoughSVG(board);
+        const shape = rs.path(`M${rectangle.x} ${rectangle.y} L${rectangle.x + rectangle.width} ${rectangle.y + rectangle.height} 
+            M${rectangle.x + rectangle.width} ${rectangle.y} L${rectangle.x} ${rectangle.y + rectangle.height} 
+            `, { ...options, fillStyle: 'solid', strokeWidth: 4 });
+        return shape;
+    },
+    isInsidePoint(rectangle, point) {
+        const rangeRectangle = RectangleClient.getRectangleByPoints([point, point]);
+        return RectangleClient.isHit(rectangle, rangeRectangle);
+    },
+    getCornerPoints(rectangle) {
+        return RectangleClient.getCornerPoints(rectangle);
+    },
+    getNearestPoint(rectangle, point) {
+        return getNearestPointBetweenPointAndSegments(point, RectangleEngine.getCornerPoints(rectangle));
+    },
+    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+        const corners = RectangleEngine.getCornerPoints(rectangle);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getPolygonEdgeByConnectionPoint(corners, point);
+    },
+    getConnectorPoints(rectangle) {
+        return RectangleClient.getEdgeCenterPoints(rectangle);
+    }
+};
+
+const ActiveClassEngine = {
+    draw(board, rectangle, options) {
+        const rs = PlaitBoard.getRoughSVG(board);
+        const shape = rs.path(`M${rectangle.x} ${rectangle.y} H${rectangle.x + rectangle.width} V${rectangle.y + rectangle.height} H${rectangle.x} Z M${rectangle.x + rectangle.width * 0.125} ${rectangle.y} L${rectangle.x + rectangle.width * 0.125} ${rectangle.y +
+            rectangle.height} M${rectangle.x + rectangle.width - rectangle.width * 0.125} ${rectangle.y} L${rectangle.x +
+            rectangle.width -
+            rectangle.width * 0.125} ${rectangle.y + rectangle.height}`, { ...options, fillStyle: 'solid' });
+        setStrokeLinecap(shape, 'round');
+        return shape;
+    },
+    isInsidePoint(rectangle, point) {
+        const rangeRectangle = RectangleClient.getRectangleByPoints([point, point]);
+        return RectangleClient.isHit(rectangle, rangeRectangle);
+    },
+    getCornerPoints(rectangle) {
+        return RectangleClient.getCornerPoints(rectangle);
+    },
+    getNearestPoint(rectangle, point) {
+        return getNearestPointBetweenPointAndSegments(point, RectangleEngine.getCornerPoints(rectangle));
+    },
+    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+        const corners = RectangleEngine.getCornerPoints(rectangle);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getPolygonEdgeByConnectionPoint(corners, point);
+    },
+    getConnectorPoints(rectangle) {
+        return RectangleClient.getEdgeCenterPoints(rectangle);
+    },
+    getTextRectangle: (element) => {
+        const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
+        const strokeWidth = getStrokeWidthByElement(element);
+        const height = element.textHeight;
+        const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2 - elementRectangle.width * 0.125 * 2;
+        return {
+            height,
+            width: width > 0 ? width : 0,
+            x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + elementRectangle.width * 0.125,
+            y: elementRectangle.y + (elementRectangle.height - height) / 2
+        };
+    }
+};
+
+const NoteEngine = {
+    draw(board, rectangle, options) {
+        const rs = PlaitBoard.getRoughSVG(board);
+        const shape = rs.path(`M${rectangle.x} ${rectangle.y} 
+            h${rectangle.width - 16}
+            v16
+            h16
+            v${rectangle.height - 16}
+            h${-rectangle.width}
+            Z
+            M${rectangle.x + rectangle.width - 16} ${rectangle.y} 
+            A16 16, 0,0,1, ${rectangle.x + rectangle.width} ${rectangle.y + 16}
+            `, { ...options, fillStyle: 'solid' });
+        setStrokeLinecap(shape, 'round');
+        return shape;
+    },
+    isInsidePoint(rectangle, point) {
+        const rangeRectangle = RectangleClient.getRectangleByPoints([point, point]);
+        return RectangleClient.isHit(rectangle, rangeRectangle);
+    },
+    getCornerPoints(rectangle) {
+        return RectangleClient.getCornerPoints(rectangle);
+    },
+    getNearestPoint(rectangle, point) {
+        const nearestPoint = getNearestPointBetweenPointAndSegments(point, RectangleEngine.getCornerPoints(rectangle));
+        if (nearestPoint[0] > rectangle.x + rectangle.width - 16 && nearestPoint[1] < rectangle.y + 16) {
+            return getNearestPointBetweenPointAndEllipse(point, [rectangle.x + rectangle.width - 16, rectangle.y + 16], 16, 16);
+        }
+        return nearestPoint;
+    },
+    getTangentVectorByConnectionPoint(rectangle, pointOfRectangle) {
+        const connectionPoint = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        const centerPoint = [rectangle.x + (rectangle.width * 3) / 4, rectangle.y + rectangle.height / 2];
+        const point = [connectionPoint[0] - centerPoint[0], -(connectionPoint[1] - centerPoint[1])];
+        const slope = getEllipseTangentSlope(point[0], point[1], 16, 16);
+        return getVectorFromPointAndSlope(point[0], point[1], slope);
+    },
+    getConnectorPoints(rectangle) {
+        return RectangleClient.getEdgeCenterPoints(rectangle);
+    },
+    getTextRectangle: (element) => {
+        const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
+        const strokeWidth = getStrokeWidthByElement(element);
+        const height = element.textHeight;
+        const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth - 15;
+        return {
+            height,
+            width: width > 0 ? width : 0,
+            x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
+            y: elementRectangle.y + (elementRectangle.height - height) / 2
+        };
+    }
+};
+
 const ShapeEngineMap = {
     [BasicShapes.rectangle]: RectangleEngine,
     [BasicShapes.diamond]: DiamondEngine,
@@ -5150,8 +5434,18 @@ const ShapeEngineMap = {
     [UMLSymbols.actor]: ActorEngine,
     [UMLSymbols.useCase]: EllipseEngine,
     [UMLSymbols.container]: ContainerEngine,
+    [UMLSymbols.note]: NoteEngine,
     [UMLSymbols.package]: PackageEngine,
-    [UMLSymbols.combinedFragment]: CombinedFragmentEngine
+    [UMLSymbols.combinedFragment]: CombinedFragmentEngine,
+    [UMLSymbols.class]: TableEngine,
+    [UMLSymbols.interface]: TableEngine,
+    [UMLSymbols.activation]: RectangleEngine,
+    [UMLSymbols.object]: RectangleEngine,
+    [UMLSymbols.deletion]: DeletionEngine,
+    [UMLSymbols.activityClass]: ActiveClassEngine,
+    [UMLSymbols.simpleClass]: RectangleEngine,
+    [UMLSymbols.port]: RectangleEngine,
+    [UMLSymbols.branchMerge]: DiamondEngine
 };
 const getEngine = (shape) => {
     return ShapeEngineMap[shape];
@@ -5405,7 +5699,7 @@ const PlaitDrawElement = {
         return Object.keys(SwimlaneSymbols).includes(value.shape) && value.shape === SwimlaneSymbols.swimlaneHorizontal;
     },
     isUMLClassOrInterface: (value) => {
-        return false;
+        return Object.keys(UMLSymbols).includes(value.shape) && [UMLSymbols.class, UMLSymbols.interface].includes(value.shape);
     }
 };
 
@@ -5877,6 +6171,21 @@ const withDrawHotkey = (board) => {
     return board;
 };
 
+class TableGenerator extends Generator {
+    canDraw(element, data) {
+        return true;
+    }
+    draw(element, data) {
+        const rectangle = RectangleClient.getRectangleByPoints(element.points);
+        return getEngine(TableSymbols.table).draw(this.board, rectangle, {
+            strokeWidth: 2,
+            stroke: getDrawDefaultStrokeColor(this.board.theme.themeColorMode),
+        }, {
+            element: element
+        });
+    }
+}
+
 const isGeometryDndMode = (board) => {
     const geometryPointers = getGeometryPointers();
     const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
@@ -5889,6 +6198,14 @@ const isGeometryDrawingMode = (board) => {
     const drawingMode = isGeometryPointer && isDrawingMode(board);
     return drawingMode;
 };
+const getGeometryGeneratorByShape = (board, shape) => {
+    if (PlaitDrawElement.isUMLClassOrInterface({ shape: shape })) {
+        return new TableGenerator(board);
+    }
+    else {
+        return new GeometryShapeGenerator(board);
+    }
+};
 const withGeometryCreateByDrag = (board) => {
     const { pointerMove, globalPointerUp, pointerUp } = board;
     let geometryShapeG = null;
@@ -5897,12 +6214,12 @@ const withGeometryCreateByDrag = (board) => {
     board.pointerMove = (event) => {
         geometryShapeG?.remove();
         geometryShapeG = createG();
-        const geometryGenerator = new GeometryShapeGenerator(board);
         const geometryPointers = getGeometryPointers();
         const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
         const dragMode = isGeometryPointer && isDndMode(board);
         const movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         const pointer = PlaitBoard.getPointer(board);
+        const geometryGenerator = getGeometryGeneratorByShape(board, pointer);
         if (dragMode) {
             const memorizedLatest = getMemorizedLatestByPointer(pointer);
             if (pointer === BasicShapes.text) {
@@ -5997,9 +6314,9 @@ const withGeometryCreateByDrawing = (board) => {
     board.pointerMove = (event) => {
         geometryShapeG?.remove();
         geometryShapeG = createG();
-        const geometryGenerator = new GeometryShapeGenerator(board);
         const movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         const pointer = PlaitBoard.getPointer(board);
+        const geometryGenerator = getGeometryGeneratorByShape(board, pointer);
         snapG?.remove();
         if (start && isGeometryDrawingMode(board)) {
             let points = normalizeShapePoints([start, movingPoint], isShift);
@@ -6132,7 +6449,8 @@ const withDrawFragment = (baseBoard) => {
             const tableElements = drawElements.filter(value => PlaitDrawElement.isTable(value));
             const boundLineElements = [
                 ...getBoundedLineElements(board, geometryElements),
-                ...getBoundedLineElements(board, imageElements)
+                ...getBoundedLineElements(board, imageElements),
+                ...getBoundedLineElements(board, tableElements)
             ].filter(line => !lineElements.includes(line));
             data.push(...[
                 ...geometryElements,
@@ -6900,21 +7218,6 @@ const withDrawRotate = (board) => {
     return board;
 };
 
-class TableGenerator extends Generator {
-    canDraw(element, data) {
-        return true;
-    }
-    draw(element, data) {
-        const rectangle = RectangleClient.getRectangleByPoints(element.points);
-        return getEngine(TableSymbols.table).draw(this.board, rectangle, {
-            strokeWidth: 2,
-            stroke: getDrawDefaultStrokeColor(this.board.theme.themeColorMode),
-        }, {
-            element: element
-        });
-    }
-}
-
 class TableComponent extends CommonElementFlavour {
     constructor() {
         super();
@@ -7228,7 +7531,13 @@ function buildSwimlaneTable(element) {
                 };
             }
             if (item.text && item.textHeight && !item.text.direction) {
-                item.text.direction = 'vertical';
+                item = {
+                    ...item,
+                    text: {
+                        ...item.text,
+                        direction: 'vertical'
+                    }
+                };
             }
             return item;
         });
@@ -7580,5 +7889,5 @@ const withDraw = (board) => {
  * Generated bundle index. Do not edit.
  */
 
-export { BasicShapes, DEFAULT_IMAGE_WIDTH, DEFAULT_TEXT_HEIGHT, DefaultActorProperty, DefaultArrowProperty, DefaultBasicShapeProperty, DefaultBasicShapePropertyMap, DefaultCloudProperty, DefaultCombinedFragmentProperty, DefaultConnectorProperty, DefaultContainerProperty, DefaultDataBaseProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultDocumentProperty, DefaultDrawActiveStyle, DefaultDrawStyle, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultInternalStorageProperty, DefaultManualInputProperty, DefaultMergeProperty, DefaultMultiDocumentProperty, DefaultNoteProperty, DefaultPackageProperty, DefaultPentagonArrowProperty, DefaultSwimlaneHorizontalProperty, DefaultSwimlanePropertyMap, DefaultSwimlaneVerticalProperty, DefaultTextProperty, DefaultTwoWayArrowProperty, DefaultUMLPropertyMap, DrawThemeColors, DrawTransforms, FlowchartSymbols, GEOMETRY_WITHOUT_TEXT, GEOMETRY_WITH_MULTIPLE_TEXT, GeometryComponent, GeometryShapeGenerator, GeometryThreshold, KEY_TO_TEXT_MANAGE, LINE_HIT_GEOMETRY_BUFFER, LINE_SNAPPING_BUFFER, LINE_SNAPPING_CONNECTOR_BUFFER, LineActiveGenerator, LineAutoCompleteGenerator, LineComponent, LineHandleKey, LineMarkerType, LineShape, MemorizeKey, MultipleTextGeometryCommonTextKeys, MultipleTextGeometryTextKeys, PlaitDrawElement, PlaitGeometry, PlaitLine, Q2C, ShapeDefaultSpace, SingleTextGenerator, StrokeStyle, SwimlaneSymbols, TableGenerator, TableSymbols, TextGenerator, UMLSymbols, WithLineAutoCompletePluginKey, alignElbowSegment, alignPoints, buildDefaultTextsByShape, createDefaultFlowchart, createDefaultGeometry, createGeometryElement, createGeometryElementWithText, createGeometryElementWithoutText, createLineElement, createMultipleTextGeometryElement, createTextElement, debugGenerator$1 as debugGenerator, deleteTextManage, drawBoundReaction, drawGeometry, drawLine, drawLineArrow, drawShape, editText, getAutoCompletePoints, getBasicPointers, getCenterPointsOnPolygon$1 as getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultBasicShapeProperty, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultTextPoints, getDefaultUMLProperty, getDrawDefaultStrokeColor, getElbowLineRouteOptions, getElbowPoints, getFillByElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryAlign, getGeometryPointers, getHitConnection, getHitConnectorPoint, getHitIndexOfAutoCompletePoint, getHitMultipleGeometryText, getHitShape, getIndexAndDeleteCountByKeyPoint, getLineDashByElement, getLineHandleRefPair, getLineMemorizedLatest, getLinePointers, getLinePoints, getLineTextRectangle, getLines, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getMidKeyPoints, getMiddlePoints, getMirrorDataPoints, getMultipleTextGeometryTextKeys, getNearestPoint, getNextRenderPoints, getNextSourceAndTargetPoints, getResizedPreviousAndNextPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedLineElements, getSelectedTableElements, getSnapResizingRef, getSnapResizingRefOptions, getSnappingRef, getSnappingShape, getSourceAndTargetRectangle, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getSwimlanePointers, getTextKey, getTextManage, getTextRectangle, getTextShapeProperty, getUMLPointers, getVectorByConnection, handleLineCreating, hasIllegalElbowPoint, insertElement, isDrawElementIncludeText, isDrawElementsIncludeText, isGeometryIncludeText, isHitDrawElement, isHitEdgeOfShape, isHitElementInside, isHitElementText, isHitLine, isHitLineText, isHitPolyLine, isInsideOfShape, isMultipleTextGeometry, isMultipleTextShape, isRectangleHitDrawElement, isRectangleHitElementText, isSelfLoop, isSingleSelectSwimlane, isSingleSelectTable, isSingleTextGeometry, isSingleTextShape, isTextExceedingBounds, isUpdatedHandleIndex, isUseDefaultOrthogonalRoute, memorizeLatestShape, memorizeLatestText, rerenderGeometryActive, setTextManage, traverseDrawShapes, withDraw, withLineAutoComplete };
+export { BasicShapes, DEFAULT_IMAGE_WIDTH, DEFAULT_TEXT_HEIGHT, DefaultActivationProperty, DefaultActorProperty, DefaultArrowProperty, DefaultBasicShapeProperty, DefaultBasicShapePropertyMap, DefaultClassProperty, DefaultCloudProperty, DefaultCombinedFragmentProperty, DefaultConnectorProperty, DefaultContainerProperty, DefaultDataBaseProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultDeletionProperty, DefaultDocumentProperty, DefaultDrawActiveStyle, DefaultDrawStyle, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultInterfaceProperty, DefaultInternalStorageProperty, DefaultManualInputProperty, DefaultMergeProperty, DefaultMultiDocumentProperty, DefaultNoteProperty, DefaultObjectProperty, DefaultPackageProperty, DefaultPentagonArrowProperty, DefaultPortProperty, DefaultSwimlaneHorizontalProperty, DefaultSwimlanePropertyMap, DefaultSwimlaneVerticalProperty, DefaultTextProperty, DefaultTwoWayArrowProperty, DefaultUMLPropertyMap, DrawThemeColors, DrawTransforms, FlowchartSymbols, GEOMETRY_WITHOUT_TEXT, GEOMETRY_WITH_MULTIPLE_TEXT, GeometryComponent, GeometryShapeGenerator, GeometryThreshold, KEY_TO_TEXT_MANAGE, LINE_HIT_GEOMETRY_BUFFER, LINE_SNAPPING_BUFFER, LINE_SNAPPING_CONNECTOR_BUFFER, LineActiveGenerator, LineAutoCompleteGenerator, LineComponent, LineHandleKey, LineMarkerType, LineShape, MemorizeKey, MultipleTextGeometryCommonTextKeys, MultipleTextGeometryTextKeys, PlaitDrawElement, PlaitGeometry, PlaitLine, Q2C, ShapeDefaultSpace, SingleTextGenerator, StrokeStyle, SwimlaneSymbols, TableGenerator, TableSymbols, TextGenerator, UMLSymbols, WithLineAutoCompletePluginKey, alignElbowSegment, alignPoints, buildDefaultTextsByShape, createDefaultFlowchart, createDefaultGeometry, createGeometryElement, createGeometryElementWithText, createGeometryElementWithoutText, createLineElement, createMultipleTextGeometryElement, createTextElement, createUMLClassOrInterfaceGeometryElement, debugGenerator$1 as debugGenerator, deleteTextManage, drawBoundReaction, drawGeometry, drawLine, drawLineArrow, drawShape, editText, getAutoCompletePoints, getBasicPointers, getCenterPointsOnPolygon$1 as getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultBasicShapeProperty, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultTextPoints, getDefaultUMLProperty, getDrawDefaultStrokeColor, getElbowLineRouteOptions, getElbowPoints, getFillByElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryAlign, getGeometryPointers, getHitConnection, getHitConnectorPoint, getHitIndexOfAutoCompletePoint, getHitMultipleGeometryText, getHitShape, getIndexAndDeleteCountByKeyPoint, getLineDashByElement, getLineHandleRefPair, getLineMemorizedLatest, getLinePointers, getLinePoints, getLineTextRectangle, getLines, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getMidKeyPoints, getMiddlePoints, getMirrorDataPoints, getMultipleTextGeometryTextKeys, getNearestPoint, getNextRenderPoints, getNextSourceAndTargetPoints, getResizedPreviousAndNextPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedLineElements, getSelectedTableElements, getSnapResizingRef, getSnapResizingRefOptions, getSnappingRef, getSnappingShape, getSourceAndTargetRectangle, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getSwimlanePointers, getTextKey, getTextManage, getTextRectangle, getTextShapeProperty, getUMLPointers, getVectorByConnection, handleLineCreating, hasIllegalElbowPoint, insertElement, isDrawElementIncludeText, isDrawElementsIncludeText, isGeometryIncludeText, isHitDrawElement, isHitEdgeOfShape, isHitElementInside, isHitElementText, isHitLine, isHitLineText, isHitPolyLine, isInsideOfShape, isMultipleTextGeometry, isMultipleTextShape, isRectangleHitDrawElement, isRectangleHitElementText, isSelfLoop, isSingleSelectSwimlane, isSingleSelectTable, isSingleTextGeometry, isSingleTextShape, isTextExceedingBounds, isUpdatedHandleIndex, isUseDefaultOrthogonalRoute, memorizeLatestShape, memorizeLatestText, rerenderGeometryActive, setTextManage, traverseDrawShapes, withDraw, withLineAutoComplete };
 //# sourceMappingURL=plait-draw.mjs.map