@plait/draw 0.59.0 → 0.62.0-next.0

package/fesm2022/plait-draw.mjs

@@ -1,9 +1,8 @@
-import { ACTIVE_STROKE_WIDTH, ThemeColorMode, RectangleClient, idCreator, distanceBetweenPointAndSegments, HIT_DISTANCE_BUFFER, rotatePointsByElement, isPolylineHitRectangle, rotateAntiPointsByElement, distanceBetweenPointAndPoint, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, depthFirstRecursion, PlaitBoard, getIsRecursionFunc, createG, SNAPPING_STROKE_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, createDebugGenerator, Point, arrowPoints, createPath, drawLinearPath, rotate, catmullRomFitting, setStrokeLinecap, findElements, createMask, createRect, PlaitElement, getSelectedElements, getElementById, Path, Direction, PlaitNode, hasValidAngle, toViewBoxPoint, toHostPoint, rotatePoints, getRectangleByElements, getSelectionAngle, rotatedDataPoints, isAxisChangedByAngle, isSelectionMoving, drawRectangle, getRectangleByAngle, getSnapRectangles, getTripleAxis, getMinPointDelta, SNAP_TOLERANCE, drawPointSnapLines, drawSolidLines, isPointInPolygon, getNearestPointBetweenPointAndSegments, isPointInEllipse, getNearestPointBetweenPointAndEllipse, getEllipseTangentSlope, getVectorFromPointAndSlope, drawRoundRectangle, isPointInRoundRectangle, setPathStrokeLinecap, getCrossingPointsBetweenEllipseAndSegment, drawLine as drawLine$1, RgbaToHEX, getHitElementByPoint, preventTouchMove, WritableClipboardOperationType, createClipboardContext, WritableClipboardType, addClipboardContext, setAngleForG, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER, isMainPointer, throttleRAF, getAngleBetweenPoints, normalizeAngle, degreesToRadians, rotateElements, MERGING, ROTATE_HANDLE_CLASS_NAME, SELECTION_RECTANGLE_CLASS_NAME, isSelectedElement } from '@plait/core';
-import { WithTextPluginKey, ELEMENT_TO_TEXT_MANAGES, getMemorizedLatest, memorizeLatest, RESIZE_HANDLE_DIAMETER, getPointOnPolyline, TRANSPARENT, getTextEditorsByElement, Generator, removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, getExtendPoint, getUnitVectorByPointAndPoint, getPointByVectorComponent, getFirstTextManage, ActiveGenerator, isSourceAndTargetIntersect, getPoints, DEFAULT_ROUTE_MARGIN, getDirectionByVector, normalizeShapePoints, getFirstTextEditor, resetPointsAfterResize, getRectangleResizeHandleRefs, getRotatedResizeCursorClassByAngle, ROTATE_HANDLE_DISTANCE_TO_ELEMENT, ROTATE_HANDLE_SIZE, isCornerHandle, getIndexByResizeHandle, withResize, drawHandle, getSymmetricHandleIndex, getResizeHandlePointByIndex, getDirectionFactorByDirectionComponent, getCrossingPointsBetweenPointAndSegment, isPointOnSegment, getDirectionByPointOfRectangle, getDirectionFactor, rotateVector, getOppositeDirection, rotateVectorAnti90, getSourceAndTargetOuterRectangle, getNextPoint, PRIMARY_COLOR, CommonElementFlavour, canResize, drawPrimaryHandle, drawFillPrimaryHandle, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, getElementsText, acceptImageTypes, getElementOfFocusedImage, buildImage, isResizingByCondition, getRatioByPoint, getTextManages, ImageGenerator, ResizeHandle, addRotating, removeRotating, drawRotateHandle } from '@plait/common';
-import { Alignment, TextManage, buildText, DEFAULT_FONT_SIZE, getTextSize, AlignEditor } from '@plait/text';
+import { ACTIVE_STROKE_WIDTH, ThemeColorMode, RectangleClient, idCreator, distanceBetweenPointAndSegments, HIT_DISTANCE_BUFFER, rotatePointsByElement, isPolylineHitRectangle, rotateAntiPointsByElement, distanceBetweenPointAndPoint, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, depthFirstRecursion, PlaitBoard, getIsRecursionFunc, createG, SNAPPING_STROKE_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, createDebugGenerator, Point, arrowPoints, createPath, drawLinearPath, rotate, catmullRomFitting, setStrokeLinecap, findElements, createMask, createRect, PlaitElement, getSelectedElements, getElementById, Path, Direction, PlaitNode, hasValidAngle, toViewBoxPoint, toHostPoint, rotatePoints, getRectangleByElements, getSelectionAngle, rotatedDataPoints, isAxisChangedByAngle, isSelectionMoving, drawRectangle, getRectangleByAngle, getSnapRectangles, getTripleAxis, getMinPointDelta, SNAP_TOLERANCE, drawPointSnapLines, drawSolidLines, isPointInPolygon, getNearestPointBetweenPointAndSegments, isPointInEllipse, getNearestPointBetweenPointAndEllipse, getEllipseTangentSlope, getVectorFromPointAndSlope, drawRoundRectangle, isPointInRoundRectangle, setPathStrokeLinecap, getCrossingPointsBetweenEllipseAndSegment, drawLine as drawLine$1, RgbaToHEX, getHitElementByPoint, preventTouchMove, WritableClipboardOperationType, createClipboardContext, WritableClipboardType, addClipboardContext, setAngleForG, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER, isMainPointer, throttleRAF, getAngleBetweenPoints, normalizeAngle, degreesToRadians, rotateElements, MERGING, ROTATE_HANDLE_CLASS_NAME, SELECTION_RECTANGLE_CLASS_NAME, isSelectedElement, isDragging } from '@plait/core';
+import { Alignment, WithTextPluginKey, ELEMENT_TO_TEXT_MANAGES, TextManage, getMemorizedLatest, memorizeLatest, RESIZE_HANDLE_DIAMETER, getPointOnPolyline, buildText, TRANSPARENT, getTextEditorsByElement, Generator, removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, getExtendPoint, getUnitVectorByPointAndPoint, getPointByVectorComponent, measureElement, DEFAULT_FONT_FAMILY, getFirstTextManage, ActiveGenerator, isSourceAndTargetIntersect, getPoints, DEFAULT_ROUTE_MARGIN, getDirectionByVector, normalizeShapePoints, getFirstTextEditor, resetPointsAfterResize, getRectangleResizeHandleRefs, getRotatedResizeCursorClassByAngle, ROTATE_HANDLE_DISTANCE_TO_ELEMENT, ROTATE_HANDLE_SIZE, isCornerHandle, getIndexByResizeHandle, withResize, drawHandle, getSymmetricHandleIndex, getResizeHandlePointByIndex, getDirectionFactorByDirectionComponent, getCrossingPointsBetweenPointAndSegment, isPointOnSegment, getDirectionByPointOfRectangle, getDirectionFactor, rotateVector, getOppositeDirection, rotateVectorAnti90, getSourceAndTargetOuterRectangle, getNextPoint, PRIMARY_COLOR, CommonElementFlavour, canResize, drawPrimaryHandle, drawFillPrimaryHandle, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, getElementsText, acceptImageTypes, getElementOfFocusedImage, buildImage, isResizingByCondition, getRatioByPoint, getTextManages, ImageGenerator, ResizeHandle, addRotating, removeRotating, drawRotateHandle } from '@plait/common';
 import { pointsOnBezierCurves } from 'points-on-curve';
+import { TEXT_DEFAULT_HEIGHT, DEFAULT_FONT_SIZE, AlignEditor } from '@plait/text-plugins';
 import { isKeyHotkey } from 'is-hotkey';
-import { NgZone } from '@angular/core';
 import { Node } from 'slate';
 
 var BasicShapes;
@@ -57,22 +56,29 @@ var FlowchartSymbols;
     FlowchartSymbols["noteSquare"] = "noteSquare";
     FlowchartSymbols["display"] = "display";
 })(FlowchartSymbols || (FlowchartSymbols = {}));
-var TableSymbols;
-(function (TableSymbols) {
-    TableSymbols["table"] = "table";
-})(TableSymbols || (TableSymbols = {}));
-var SwimlaneSymbols;
-(function (SwimlaneSymbols) {
-    SwimlaneSymbols["swimlaneVertical"] = "swimlaneVertical";
-    SwimlaneSymbols["swimlaneHorizontal"] = "swimlaneHorizontal";
-})(SwimlaneSymbols || (SwimlaneSymbols = {}));
 var UMLSymbols;
 (function (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["component"] = "component";
+    UMLSymbols["componentBox"] = "componentBox";
+    UMLSymbols["template"] = "template";
+    UMLSymbols["activation"] = "activation";
+    UMLSymbols["deletion"] = "deletion";
+    UMLSymbols["assembly"] = "assembly";
+    UMLSymbols["providedInterface"] = "providedInterface";
+    UMLSymbols["requiredInterface"] = "requiredInterface";
 })(UMLSymbols || (UMLSymbols = {}));
 var MultipleTextGeometryCommonTextKeys;
 (function (MultipleTextGeometryCommonTextKeys) {
@@ -81,6 +87,23 @@ var MultipleTextGeometryCommonTextKeys;
 })(MultipleTextGeometryCommonTextKeys || (MultipleTextGeometryCommonTextKeys = {}));
 const PlaitGeometry = {};
 
+var SwimlaneSymbols;
+(function (SwimlaneSymbols) {
+    SwimlaneSymbols["swimlaneVertical"] = "swimlaneVertical";
+    SwimlaneSymbols["swimlaneHorizontal"] = "swimlaneHorizontal";
+})(SwimlaneSymbols || (SwimlaneSymbols = {}));
+var SwimlaneDrawSymbols;
+(function (SwimlaneDrawSymbols) {
+    SwimlaneDrawSymbols["swimlaneVertical"] = "swimlaneVertical";
+    SwimlaneDrawSymbols["swimlaneHorizontal"] = "swimlaneHorizontal";
+    SwimlaneDrawSymbols["swimlaneVerticalWithHeader"] = "swimlaneVerticalWithHeader";
+    SwimlaneDrawSymbols["swimlaneHorizontalWithHeader"] = "swimlaneHorizontalWithHeader";
+})(SwimlaneDrawSymbols || (SwimlaneDrawSymbols = {}));
+
+var TableSymbols;
+(function (TableSymbols) {
+    TableSymbols["table"] = "table";
+})(TableSymbols || (TableSymbols = {}));
 const PlaitTableElement = {
     isTable: (value) => {
         return value.type === 'table';
@@ -201,6 +224,38 @@ const DefaultPackageProperty = {
         }
     ]
 };
+const DefaultActivationProperty = {
+    width: 18,
+    height: 80
+};
+const DefaultObjectProperty = {
+    width: 120,
+    height: 60
+};
+const DefaultComponentBoxProperty = {
+    width: 200,
+    height: 150
+};
+const DefaultDeletionProperty = {
+    width: 40,
+    height: 40
+};
+const DefaultPortProperty = {
+    width: 20,
+    height: 20
+};
+const DefaultRequiredInterfaceProperty = {
+    width: 70,
+    height: 56
+};
+const DefaultAssemblyProperty = {
+    width: 120,
+    height: 56
+};
+const DefaultProvidedInterfaceProperty = {
+    width: 70,
+    height: 34
+};
 const DefaultCombinedFragmentProperty = {
     width: 400,
     height: 280,
@@ -217,13 +272,31 @@ const DefaultCombinedFragmentProperty = {
         }
     ]
 };
-const DefaultSwimlaneVerticalProperty = {
-    width: 450,
-    height: 500
+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 DefaultSwimlaneHorizontalProperty = {
-    width: 500,
-    height: 450
+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 DefaultBasicShapePropertyMap = {
     [BasicShapes.pentagonArrow]: DefaultPentagonArrowProperty,
@@ -263,28 +336,50 @@ 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.component]: DefaultMultiDocumentProperty,
+    [UMLSymbols.template]: DefaultMultiDocumentProperty,
+    [UMLSymbols.componentBox]: DefaultComponentBoxProperty,
+    [UMLSymbols.port]: DefaultPortProperty,
+    [UMLSymbols.branchMerge]: DefaultDeletionProperty,
+    [UMLSymbols.assembly]: DefaultAssemblyProperty,
+    [UMLSymbols.providedInterface]: DefaultProvidedInterfaceProperty,
+    [UMLSymbols.requiredInterface]: DefaultRequiredInterfaceProperty
 };
 const MultipleTextGeometryTextKeys = {
     [UMLSymbols.package]: Object.keys(MultipleTextGeometryCommonTextKeys),
     [UMLSymbols.combinedFragment]: Object.keys(MultipleTextGeometryCommonTextKeys)
 };
-const DefaultSwimlanePropertyMap = {
-    [SwimlaneSymbols.swimlaneHorizontal]: DefaultSwimlaneHorizontalProperty,
-    [SwimlaneSymbols.swimlaneVertical]: DefaultSwimlaneVerticalProperty
-};
 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,
+    UMLSymbols.assembly,
+    UMLSymbols.providedInterface,
+    UMLSymbols.requiredInterface
+];
 const GEOMETRY_WITH_MULTIPLE_TEXT = [UMLSymbols.package, UMLSymbols.combinedFragment];
 
 const getGeometryPointers = () => {
     return [...Object.keys(BasicShapes), ...Object.keys(FlowchartSymbols), ...Object.keys(UMLSymbols)];
 };
 const getSwimlanePointers = () => {
-    return Object.keys(SwimlaneSymbols);
+    return Object.keys(SwimlaneDrawSymbols);
 };
 const getBasicPointers = () => {
     return Object.keys(BasicShapes);
@@ -328,7 +423,31 @@ const DrawThemeColors = {
     }
 };
 
-const DEFAULT_TEXT_HEIGHT = 20;
+const SWIMLANE_HEADER_SIZE = 42;
+const DefaultSwimlaneVerticalWithHeaderProperty = {
+    width: 580,
+    height: 524
+};
+const DefaultSwimlaneHorizontalWithHeaderProperty = {
+    width: 524,
+    height: 580
+};
+const DefaultSwimlaneVerticalProperty = {
+    width: 580,
+    height: 524
+};
+const DefaultSwimlaneHorizontalProperty = {
+    width: 524,
+    height: 580
+};
+const DefaultSwimlanePropertyMap = {
+    [SwimlaneDrawSymbols.swimlaneHorizontal]: DefaultSwimlaneHorizontalProperty,
+    [SwimlaneDrawSymbols.swimlaneVertical]: DefaultSwimlaneVerticalProperty,
+    [SwimlaneDrawSymbols.swimlaneHorizontalWithHeader]: DefaultSwimlaneHorizontalWithHeaderProperty,
+    [SwimlaneDrawSymbols.swimlaneVerticalWithHeader]: DefaultSwimlaneVerticalWithHeaderProperty
+};
+
+const MIN_TEXT_WIDTH = 5;
 
 const getElementShape = (value) => {
     if (PlaitDrawElement.isImage(value)) {
@@ -354,15 +473,15 @@ class TextGenerator {
     get shape() {
         return this.element.shape || this.element.type;
     }
-    constructor(board, element, texts, viewContainerRef, options) {
+    constructor(board, element, texts, options) {
         this.board = board;
         this.texts = texts;
         this.element = element;
-        this.viewContainerRef = viewContainerRef;
         this.options = options;
     }
     initialize() {
-        const textPlugins = (this.board.getPluginOptions(WithTextPluginKey) || {}).textPlugins;
+        const textPlugins = (this.board.getPluginOptions(WithTextPluginKey) || {})
+            .textPlugins;
         this.textManages = this.texts.map(text => {
             const textManage = this.createTextManage(text, textPlugins);
             setTextManage(getTextKey(this.element, text), textManage);
@@ -385,7 +504,8 @@ class TextGenerator {
         this.element = element;
         ELEMENT_TO_TEXT_MANAGES.set(this.element, this.textManages);
         const centerPoint = RectangleClient.getCenterPoint(this.board.getRectangle(this.element));
-        const textPlugins = (this.board.getPluginOptions(WithTextPluginKey) || {}).textPlugins;
+        const textPlugins = (this.board.getPluginOptions(WithTextPluginKey) || {})
+            .textPlugins;
         const removedTexts = previousDrawShapeTexts.filter(value => {
             return !currentDrawShapeTexts.find(item => item.key === value.key);
         });
@@ -419,12 +539,12 @@ class TextGenerator {
         });
     }
     createTextManage(text, textPlugins) {
-        const textManage = new TextManage(this.board, this.viewContainerRef, {
+        const textManage = new TextManage(this.board, {
             getRectangle: () => {
                 return this.getRectangle(text);
             },
-            onValueChangeHandle: (textManageRef) => {
-                return this.onValueChangeHandle(textManageRef, text);
+            onChange: (data) => {
+                return this.options.onChange(this.element, data, text);
             },
             getMaxWidth: () => {
                 return this.getMaxWidth(text);
@@ -443,9 +563,6 @@ class TextGenerator {
         }
         return getTextRectangle(this.element);
     }
-    onValueChangeHandle(textManageRef, text) {
-        return this.options.onValueChangeHandle(this.element, textManageRef, text);
-    }
     getMaxWidth(text) {
         return this.options.getMaxWidth ? this.options.getMaxWidth() : this.getRectangle(text).width;
     }
@@ -582,6 +699,29 @@ function updateCellIds(cells) {
 function isCellIncludeText(cell) {
     return cell.text && cell.textHeight;
 }
+function getCellsRectangle(board, element, cells) {
+    const cellsWithPoints = getCellsWithPoints(board, element);
+    const points = cells.map(cell => {
+        const cellWithPoints = cellsWithPoints.find(item => item.id === cell.id);
+        return cellWithPoints.points;
+    });
+    return RectangleClient.getRectangleByPoints(points);
+}
+const createCell = (rowId, columnId, text = null) => {
+    const cell = {
+        id: idCreator(),
+        rowId,
+        columnId
+    };
+    if (text !== null) {
+        cell['textHeight'] = TEXT_DEFAULT_HEIGHT;
+        cell['text'] = {
+            children: [{ text }],
+            align: Alignment.center
+        };
+    }
+    return cell;
+};
 
 const SHAPE_MAX_LENGTH = 6;
 const memorizedShape = new WeakMap();
@@ -749,7 +889,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 +901,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;
@@ -914,7 +1054,7 @@ const isInsideOfShape = (board, element, point, hitDistanceBuffer) => {
 const isHitElementInside = (board, element, point) => {
     const rectangle = board.getRectangle(element);
     point = rotateAntiPointsByElement(point, element) || point;
-    if (PlaitDrawElement.isGeometry(element)) {
+    if (PlaitDrawElement.isGeometry(element) && !PlaitDrawElement.isGeometryByTable(element)) {
         const engine = getEngine(getElementShape(element));
         const isHitInside = engine.isInsidePoint(rectangle, point);
         if (isHitInside) {
@@ -977,7 +1117,7 @@ const isDrawElementIncludeText = (element) => {
         const editors = getTextEditorsByElement(element);
         return editors.length > 0;
     }
-    if (PlaitDrawElement.isTable(element)) {
+    if (PlaitDrawElement.isElementByTable(element)) {
         return element.cells.some(cell => isCellIncludeText(cell));
     }
     return true;
@@ -1029,7 +1169,7 @@ const drawBoundReaction = (board, element, roughOptions = { hasMask: true, hasCo
     const activeRectangle = RectangleClient.inflate(rectangle, SNAPPING_STROKE_WIDTH);
     const shape = getElementShape(element);
     let drawOptions = {};
-    if (PlaitDrawElement.isTable(element)) {
+    if (PlaitDrawElement.isElementByTable(element)) {
         drawOptions = { element };
     }
     const strokeG = drawShape(board, activeRectangle, shape, {
@@ -1068,7 +1208,7 @@ const getTextKey = (element, text) => {
         return text.key;
     }
 };
-const getGeometryAlign = (element) => {
+const getGeometryAlign = (board, element) => {
     if (isMultipleTextGeometry(element)) {
         const drawShapeText = element.texts.find(item => item.key.includes(MultipleTextGeometryCommonTextKeys.content));
         return drawShapeText?.text.align || Alignment.center;
@@ -1076,7 +1216,7 @@ const getGeometryAlign = (element) => {
     if (isSingleTextGeometry(element)) {
         return element.text?.align || Alignment.center;
     }
-    if (PlaitDrawElement.isTable(element)) {
+    if (PlaitDrawElement.isElementByTable(element)) {
         const firstTextCell = element.cells.find(item => item.text);
         return firstTextCell?.text?.align || Alignment.center;
     }
@@ -1119,6 +1259,7 @@ const LINE_AUTO_COMPLETE_OPACITY = 0.6;
 const LINE_AUTO_COMPLETE_HOVERED_OPACITY = 0.8;
 const LINE_AUTO_COMPLETE_HOVERED_DIAMETER = 10;
 const LINE_ALIGN_TOLERANCE = 3;
+const LINE_TEXT = '文本';
 
 class LineShapeGenerator extends Generator {
     canDraw(element, data) {
@@ -1796,6 +1937,89 @@ function drawMask(board, element, id) {
     return { mask, maskTargetFillRect };
 }
 
+const createUMLClassOrInterfaceGeometryElement = (board, shape, points) => {
+    const memorizedLatest = getMemorizedLatestByPointer(shape);
+    const element = {
+        id: idCreator(),
+        type: 'geometry',
+        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);
@@ -1943,7 +2167,7 @@ const getFlowchartDefaultFill = (theme) => {
 };
 const getTextShapeProperty = (board, text = DefaultTextProperty.text, fontSize) => {
     fontSize = fontSize ? Number(fontSize) : DEFAULT_FONT_SIZE;
-    const textSize = getTextSize(board, text, Infinity, { fontSize });
+    const textSize = measureElement(buildText(text), { fontSize, fontFamily: DEFAULT_FONT_FAMILY });
     return {
         width: textSize.width + ShapeDefaultSpace.rectangleAndText * 2,
         height: textSize.height
@@ -1981,6 +2205,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 +2223,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) => {
@@ -2147,13 +2376,9 @@ const isSingleSelectSwimlane = (board) => {
     const selectedElements = getSelectedElements(board);
     return selectedElements && selectedElements.length === 1 && PlaitDrawElement.isSwimlane(selectedElements[0]);
 };
-const isSingleSelectTable = (board) => {
+const getSelectedSwimlane = (board) => {
     const selectedElements = getSelectedElements(board);
-    return selectedElements && selectedElements.length === 1 && PlaitTableElement.isTable(selectedElements[0]);
-};
-const getSelectedTableElements = (board, elements) => {
-    const selectedElements = elements?.length ? elements : getSelectedElements(board);
-    return selectedElements.filter(value => PlaitTableElement.isTable(value));
+    return selectedElements.find(item => PlaitDrawElement.isSwimlane(item));
 };
 
 const resizeLine = (board, options, path) => {
@@ -2315,23 +2540,24 @@ const normalizePoints = (board, element, width, textHeight) => {
     let autoSize = element.autoSize;
     const defaultSpace = ShapeDefaultSpace.rectangleAndText;
     if (autoSize) {
+        const newWidth = width < MIN_TEXT_WIDTH ? MIN_TEXT_WIDTH : width;
         const editor = getFirstTextEditor(element);
         if (AlignEditor.isActive(editor, Alignment.right)) {
             points = [
-                [points[1][0] - (width + defaultSpace * 2), points[0][1]],
+                [points[1][0] - (newWidth + defaultSpace * 2), points[0][1]],
                 [points[1][0], points[0][1] + textHeight]
             ];
         }
         else if (AlignEditor.isActive(editor, Alignment.center)) {
             const oldWidth = Math.abs(points[0][0] - points[1][0]);
-            const offset = (width - oldWidth) / 2;
+            const offset = (newWidth - oldWidth) / 2;
             points = [
                 [points[0][0] - offset - defaultSpace, points[0][1]],
                 [points[1][0] + offset + defaultSpace, points[0][1] + textHeight]
             ];
         }
         else {
-            points = [points[0], [points[0][0] + width + defaultSpace * 2, points[0][1] + textHeight]];
+            points = [points[0], [points[0][0] + newWidth + defaultSpace * 2, points[0][1] + textHeight]];
         }
         if (hasValidAngle(element)) {
             points = resetPointsAfterResize(RectangleClient.getRectangleByPoints(element.points), RectangleClient.getRectangleByPoints(points), RectangleClient.getCenterPoint(RectangleClient.getRectangleByPoints(element.points)), RectangleClient.getCenterPoint(RectangleClient.getRectangleByPoints(points)), element.angle);
@@ -2365,8 +2591,8 @@ const setTextSize = (board, element, textWidth, textHeight) => {
 
 const insertImage = (board, imageItem, startPoint) => {
     const { width, height, url } = imageItem;
-    const viewportWidth = PlaitBoard.getComponent(board).nativeElement.clientWidth;
-    const viewportHeight = PlaitBoard.getComponent(board).nativeElement.clientHeight;
+    const viewportWidth = PlaitBoard.getBoardContainer(board).clientWidth;
+    const viewportHeight = PlaitBoard.getBoardContainer(board).clientHeight;
     const point = toViewBoxPoint(board, toHostPoint(board, viewportWidth / 2, viewportHeight / 2));
     const points = startPoint
         ? [startPoint, [startPoint[0] + width, startPoint[1] + height]]
@@ -2384,89 +2610,265 @@ const insertImage = (board, imageItem, startPoint) => {
     Transforms.addSelectionWithTemporaryElements(board, [imageElement]);
 };
 
-const addSwimlaneRow = (board, swimlane, index) => {
-    if (PlaitDrawElement.isSwimlane(swimlane) && swimlane.shape === SwimlaneSymbols.swimlaneHorizontal) {
+function buildSwimlaneTable(element) {
+    const swimlaneElement = { ...element };
+    if (PlaitDrawElement.isHorizontalSwimlane(element)) {
+        swimlaneElement.cells = element.cells.map((item, index) => {
+            if (index === 0 && element.header) {
+                item = {
+                    ...element.cells[0],
+                    rowspan: element.rows.length
+                };
+            }
+            if (item.text && item.textHeight && !item.text.direction) {
+                item = {
+                    ...item,
+                    text: {
+                        ...item.text,
+                        direction: 'vertical'
+                    }
+                };
+            }
+            return item;
+        });
+        return swimlaneElement;
+    }
+    if (element.header) {
+        swimlaneElement.cells = [
+            {
+                ...element.cells[0],
+                colspan: element.columns.length
+            },
+            ...element.cells.slice(1, element.cells.length)
+        ];
+    }
+    return swimlaneElement;
+}
+const getDefaultSwimlanePoints = (pointer, centerPoint) => {
+    const property = DefaultSwimlanePropertyMap[pointer];
+    return RectangleClient.getPoints(RectangleClient.getRectangleByCenterPoint(centerPoint, property.width, property.height));
+};
+const createDefaultSwimlane = (shape, points) => {
+    const header = isSwimlaneWithHeader(shape);
+    const dataShape = adjustSwimlaneShape(shape);
+    const rows = createDefaultRowsOrColumns(dataShape, 'row', header);
+    const columns = createDefaultRowsOrColumns(dataShape, 'column', header);
+    const swimlane = {
+        id: idCreator(),
+        type: 'swimlane',
+        shape: dataShape,
+        points,
+        rows,
+        columns,
+        header,
+        cells: createDefaultCells(dataShape, rows, columns, header)
+    };
+    return swimlane;
+};
+const createDefaultRowsOrColumns = (shape, type, header) => {
+    const createItems = (count) => new Array(count).fill('').map(() => ({ id: idCreator() }));
+    let data = createItems(3);
+    if ((type === 'row' && shape === SwimlaneSymbols.swimlaneVertical) ||
+        (type === 'column' && shape === SwimlaneSymbols.swimlaneHorizontal)) {
+        data = header ? data : createItems(2);
+        const dimension = type === 'row' ? 'height' : 'width';
+        data = data.map((item, index) => {
+            if (index === 0 || (index === 1 && header)) {
+                return {
+                    ...item,
+                    [dimension]: SWIMLANE_HEADER_SIZE
+                };
+            }
+            return item;
+        });
+    }
+    return data;
+};
+const createDefaultCells = (shape, rows, columns, header) => {
+    let headerCell = [];
+    let startIndex = 0;
+    if (header) {
+        headerCell = [createCell(rows[0].id, columns[0].id, 'New Swimlane')];
+        startIndex = 1;
+    }
+    const cells = new Array(6).fill('').map((_, index) => {
+        if (index < 3) {
+            const rowId = shape === SwimlaneSymbols.swimlaneVertical ? rows[startIndex].id : rows[index].id;
+            const columnId = shape === SwimlaneSymbols.swimlaneVertical ? columns[index].id : columns[startIndex].id;
+            return createCell(rowId, columnId, 'Lane');
+        }
+        const rowId = shape === SwimlaneSymbols.swimlaneVertical ? rows[startIndex + 1].id : rows[index - 3].id;
+        const columnId = shape === SwimlaneSymbols.swimlaneVertical ? columns[index - 3].id : columns[startIndex + 1].id;
+        return createCell(rowId, columnId);
+    });
+    return [...headerCell, ...cells];
+};
+const getSwimlaneCount = (swimlane) => {
+    if (PlaitDrawElement.isHorizontalSwimlane(swimlane)) {
+        return swimlane.rows.length;
+    }
+    if (PlaitDrawElement.isVerticalSwimlane(swimlane)) {
+        return swimlane.columns.length;
+    }
+    return 0;
+};
+const isSwimlaneWithHeader = (shape) => {
+    return [SwimlaneDrawSymbols.swimlaneHorizontalWithHeader, SwimlaneDrawSymbols.swimlaneVerticalWithHeader].includes(shape);
+};
+const adjustSwimlaneShape = (shape) => {
+    return [SwimlaneDrawSymbols.swimlaneHorizontalWithHeader, SwimlaneDrawSymbols.swimlaneHorizontal].includes(shape)
+        ? SwimlaneSymbols.swimlaneHorizontal
+        : SwimlaneSymbols.swimlaneVertical;
+};
+
+const updateSwimlaneCount = (board, swimlane, count) => {
+    if (count > 0 && PlaitDrawElement.isSwimlane(swimlane)) {
+        const currentCount = getSwimlaneCount(swimlane);
+        if (PlaitDrawElement.isHorizontalSwimlane(swimlane)) {
+            if (count > currentCount) {
+                addSwimlaneRow(board, swimlane, swimlane.rows.length, count - currentCount);
+            }
+            else {
+                const deleteIndex = swimlane.rows.length - (currentCount - count);
+                removeSwimlaneRow(board, swimlane, deleteIndex, currentCount - count);
+            }
+        }
+        if (PlaitDrawElement.isVerticalSwimlane(swimlane)) {
+            if (count > currentCount) {
+                addSwimlaneColumn(board, swimlane, swimlane.columns.length, count - currentCount);
+            }
+            else {
+                const deleteIndex = swimlane.columns.length - (currentCount - count);
+                removeSwimlaneColumn(board, swimlane, deleteIndex, currentCount - count);
+            }
+        }
+    }
+};
+const addSwimlaneRow = (board, swimlane, index, count = 1) => {
+    if (PlaitDrawElement.isHorizontalSwimlane(swimlane)) {
         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 addRows = [];
+        for (let i = 0; i < count; i++) {
+            addRows.push({ id: idCreator() });
+        }
+        newRows.splice(index, 0, ...addRows);
+        const newCells = [...swimlane.cells];
+        addRows.forEach(item => {
+            newCells.push(...createNewSwimlaneCells(swimlane, item.id, '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]];
+        const newPoints = [swimlane.points[0], [swimlane.points[1][0], swimlane.points[1][1] + lastRowHeight * count]];
         updateSwimlane(board, swimlane, swimlane.columns, newRows, newCells, newPoints);
     }
 };
-const addSwimlaneColumn = (board, swimlane, index) => {
-    if (PlaitDrawElement.isSwimlane(swimlane) && swimlane.shape === SwimlaneSymbols.swimlaneVertical) {
+const addSwimlaneColumn = (board, swimlane, index, count = 1) => {
+    if (PlaitDrawElement.isVerticalSwimlane(swimlane)) {
         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 addColumns = [];
+        for (let i = 0; i < count; i++) {
+            addColumns.push({ id: idCreator() });
+        }
+        newColumns.splice(index, 0, ...addColumns);
+        const newCells = [...swimlane.cells];
+        addColumns.forEach(item => {
+            newCells.push(...createNewSwimlaneCells(swimlane, item.id, '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]]];
+        const newPoints = [swimlane.points[0], [swimlane.points[1][0] + lastColumnWidth * count, swimlane.points[1][1]]];
         updateSwimlane(board, swimlane, newColumns, swimlane.rows, newCells, newPoints);
     }
 };
-const removeSwimlaneRow = (board, swimlane, index) => {
-    if (PlaitDrawElement.isSwimlane(swimlane) && swimlane.shape === SwimlaneSymbols.swimlaneHorizontal) {
+const removeSwimlaneRow = (board, swimlane, index, count = 1) => {
+    if (PlaitDrawElement.isHorizontalSwimlane(swimlane)) {
+        if (count > swimlane.rows.length) {
+            return;
+        }
         const newRows = [...swimlane.rows];
-        newRows.splice(index, 1);
+        newRows.splice(index, count);
         if (newRows.length === 0) {
             const path = PlaitBoard.findPath(board, swimlane);
             Transforms.removeNode(board, path);
         }
         else {
-            const removeRow = swimlane.rows[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;
-                removeRowHeight = RectangleClient.getRectangleByPoints(cellPoints).height;
+            let newCells = [...swimlane.cells];
+            const removeRows = [];
+            for (let i = index; i < count + index; i++) {
+                const removeRow = swimlane.rows[i];
+                removeRows.push(removeRow);
+                newCells = newCells.filter(item => item.rowId !== removeRow.id);
             }
+            let removeRowHeight = 0;
+            removeRows.forEach(row => {
+                if (!row.height) {
+                    const rowCell = swimlane.cells.find(item => item.rowId === row.id);
+                    const cellPoints = getCellWithPoints(board, swimlane, rowCell.id).points;
+                    removeRowHeight += RectangleClient.getRectangleByPoints(cellPoints).height;
+                }
+                else {
+                    removeRowHeight += row.height;
+                }
+            });
             const newPoints = [swimlane.points[0], [swimlane.points[1][0], swimlane.points[1][1] - removeRowHeight]];
             updateSwimlane(board, swimlane, swimlane.columns, newRows, newCells, newPoints);
         }
     }
 };
-const removeSwimlaneColumn = (board, swimlane, index) => {
-    if (PlaitDrawElement.isSwimlane(swimlane) && swimlane.shape === SwimlaneSymbols.swimlaneVertical) {
+const removeSwimlaneColumn = (board, swimlane, index, count = 1) => {
+    if (PlaitDrawElement.isVerticalSwimlane(swimlane)) {
+        if (count > swimlane.columns.length) {
+            return;
+        }
         const newColumns = [...swimlane.columns];
-        newColumns.splice(index, 1);
+        newColumns.splice(index, count);
         if (newColumns.length === 0) {
             const path = PlaitBoard.findPath(board, swimlane);
             Transforms.removeNode(board, path);
         }
         else {
-            const removeColumn = swimlane.columns[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;
-                removeColumnWidth = RectangleClient.getRectangleByPoints(cellPoints).width;
+            let newCells = [...swimlane.cells];
+            const removeColumns = [];
+            for (let i = index; i < count + index; i++) {
+                const removeColumn = swimlane.columns[i];
+                removeColumns.push(removeColumn);
+                newCells = newCells.filter(item => item.columnId !== removeColumn.id);
             }
+            let removeColumnWidth = 0;
+            removeColumns.forEach(column => {
+                if (!column.width) {
+                    const rowCell = swimlane.cells.find(item => item.columnId === column.id);
+                    const cellPoints = getCellWithPoints(board, swimlane, rowCell.id).points;
+                    removeColumnWidth += RectangleClient.getRectangleByPoints(cellPoints).width;
+                }
+                else {
+                    removeColumnWidth += column.width;
+                }
+            });
             const newPoints = [swimlane.points[0], [swimlane.points[1][0] - removeColumnWidth, swimlane.points[1][1]]];
             updateSwimlane(board, swimlane, newColumns, swimlane.rows, newCells, newPoints);
         }
     }
 };
-const createNewColumnCells = (swimlane, newColumnId) => {
-    return swimlane.rows.map(row => ({
-        id: idCreator(),
-        rowId: row.id,
-        columnId: newColumnId
-    }));
-};
-const createNewRowCells = (swimlane, newRowId) => {
-    return swimlane.columns.map(column => ({
+const createNewSwimlaneCells = (swimlane, newId, type) => {
+    const cells = swimlane[`${type}s`].map(item => ({
         id: idCreator(),
-        rowId: newRowId,
-        columnId: column.id
+        rowId: type === 'row' ? item.id : newId,
+        columnId: type === 'row' ? newId : item.id
     }));
+    if (swimlane.header) {
+        cells.shift();
+    }
+    cells[0] = {
+        ...cells[0],
+        text: {
+            children: [{ text: swimlane.header ? 'Lane' : 'New Swimlane' }],
+            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);
@@ -2477,6 +2879,33 @@ const updateSwimlane = (board, swimlane, newColumns, newRows, newCells, newPoint
         points: newPoints
     }, path);
 };
+const setSwimlaneFill = (board, element, fill, path) => {
+    const selectedCells = getSelectedCells(element);
+    let newCells = element.cells;
+    if (selectedCells?.length) {
+        newCells = element.cells.map(cell => {
+            if (selectedCells.map(item => item.id).includes(cell.id)) {
+                return {
+                    ...cell,
+                    fill
+                };
+            }
+            return cell;
+        });
+    }
+    else {
+        newCells = element.cells.map(cell => {
+            if (cell.text && cell.textHeight) {
+                return {
+                    ...cell,
+                    fill
+                };
+            }
+            return cell;
+        });
+    }
+    Transforms.setNode(board, { cells: newCells }, path);
+};
 
 const setDrawShapeText = (board, element, text) => {
     const newTexts = element.texts?.map(item => {
@@ -2552,7 +2981,9 @@ const DrawTransforms = {
     addSwimlaneRow,
     addSwimlaneColumn,
     removeSwimlaneRow,
-    removeSwimlaneColumn
+    removeSwimlaneColumn,
+    setSwimlaneFill,
+    updateSwimlaneCount
 };
 
 const getHitRectangleResizeHandleRef = (board, rectangle, point, angle = 0) => {
@@ -3009,6 +3440,29 @@ function drawIsometricSnapLines(board, activePoints, snapRectangles, resizeSnapO
     return drawSolidLines(board, isometricLines);
 }
 
+const isSingleSelectTable = (board) => {
+    const selectedElements = getSelectedElements(board);
+    return selectedElements && selectedElements.length === 1 && PlaitTableElement.isTable(selectedElements[0]);
+};
+const isSingleSelectElementByTable = (board) => {
+    const selectedElements = getSelectedElements(board);
+    return selectedElements && selectedElements.length === 1 && PlaitDrawElement.isElementByTable(selectedElements[0]);
+};
+const getSelectedTableElements = (board, elements) => {
+    const selectedElements = elements?.length ? elements : getSelectedElements(board);
+    return selectedElements.filter(value => PlaitTableElement.isTable(value));
+};
+const SELECTED_CELLS = new WeakMap();
+function getSelectedCells(element) {
+    return SELECTED_CELLS.get(element);
+}
+function setSelectedCells(element, cells) {
+    return SELECTED_CELLS.set(element, cells);
+}
+function clearSelectedCells(element) {
+    return SELECTED_CELLS.delete(element);
+}
+
 const getCenterPointsOnPolygon = (points) => {
     const centerPoints = [];
     for (let i = 0; i < points.length; i++) {
@@ -4777,10 +5231,17 @@ const TableEngine = {
         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$1(rs, [x + width, y], [x + width, y + height], roughOptions);
             const cellBottomBorder = drawLine$1(rs, [x, y + height], [x + width, y + height], roughOptions);
-            g.append(cellRightBorder, cellBottomBorder);
+            g.append(cellRectangle, cellRightBorder, cellBottomBorder);
         });
+        setStrokeLinecap(g, 'round');
         return g;
     },
     isInsidePoint(rectangle, point) {
@@ -5098,36 +5559,454 @@ const CombinedFragmentEngine = {
     }
 };
 
-const ShapeEngineMap = {
-    [BasicShapes.rectangle]: RectangleEngine,
-    [BasicShapes.diamond]: DiamondEngine,
-    [BasicShapes.ellipse]: EllipseEngine,
-    [BasicShapes.parallelogram]: ParallelogramEngine,
-    [BasicShapes.roundRectangle]: RoundRectangleEngine,
-    [BasicShapes.text]: RectangleEngine,
-    [BasicShapes.triangle]: TriangleEngine,
-    [BasicShapes.leftArrow]: LeftArrowEngine,
-    [BasicShapes.trapezoid]: TrapezoidEngine,
-    [BasicShapes.rightArrow]: RightArrowEngine,
-    [BasicShapes.cross]: CrossEngine,
-    [BasicShapes.star]: StarEngine,
-    [BasicShapes.pentagon]: PentagonEngine,
-    [BasicShapes.hexagon]: HexagonEngine,
-    [BasicShapes.octagon]: OctagonEngine,
-    [BasicShapes.pentagonArrow]: PentagonArrowEngine,
-    [BasicShapes.processArrow]: ProcessArrowEngine,
-    [BasicShapes.twoWayArrow]: TwoWayArrowEngine,
-    [BasicShapes.comment]: CommentEngine,
-    [BasicShapes.roundComment]: RoundCommentEngine,
-    [BasicShapes.cloud]: CloudEngine,
-    [FlowchartSymbols.process]: RectangleEngine,
-    [FlowchartSymbols.decision]: DiamondEngine,
-    [FlowchartSymbols.connector]: EllipseEngine,
-    [FlowchartSymbols.data]: ParallelogramEngine,
-    [FlowchartSymbols.terminal]: TerminalEngine,
-    [FlowchartSymbols.database]: DatabaseEngine,
-    [FlowchartSymbols.hardDisk]: HardDiskEngine,
-    [FlowchartSymbols.internalStorage]: InternalStorageEngine,
+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 AssemblyEngine = {
+    draw(board, rectangle, options) {
+        const rs = PlaitBoard.getRoughSVG(board);
+        const shape = rs.path(`
+        M${rectangle.x} ${rectangle.y + rectangle.height / 2} 
+        H${rectangle.x + rectangle.width * 0.3}
+        A${rectangle.width * 0.13} ${rectangle.height * 0.285}, 0, 1, 1 ${rectangle.x +
+            rectangle.width * 0.3 +
+            rectangle.width * 0.26} ${rectangle.y + rectangle.height / 2}
+        A${rectangle.width * 0.13} ${rectangle.height * 0.285}, 0, 1, 1 ${rectangle.x + rectangle.width * 0.3} ${rectangle.y +
+            rectangle.height / 2}
+        M${rectangle.x + rectangle.width * 0.3 + rectangle.width * 0.13} ${rectangle.y}
+        A${rectangle.width * 0.233} ${rectangle.height / 2}, 0, 0, 1 ${rectangle.x +
+            rectangle.width * 0.3 +
+            rectangle.width * 0.13} ${rectangle.y + rectangle.height}
+        M${rectangle.x + rectangle.width * 0.3 + rectangle.width * 0.13 + rectangle.width * 0.233} ${rectangle.y +
+            rectangle.height / 2} H${rectangle.x + rectangle.width}
+        `, {
+            ...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);
+    },
+    getConnectorPoints(rectangle) {
+        return RectangleClient.getEdgeCenterPoints(rectangle);
+    },
+    getNearestPoint(rectangle, point) {
+        const nearestPoint = getNearestPointBetweenPointAndSegments(point, RectangleEngine.getCornerPoints(rectangle));
+        if (nearestPoint[0] === rectangle.x + rectangle.width / 2) {
+            return getNearestPointBetweenPointAndEllipse(point, [rectangle.x + rectangle.width * 0.43, rectangle.y + rectangle.height / 2], rectangle.width * 0.223, rectangle.height / 2);
+        }
+        return nearestPoint;
+    },
+    getTangentVectorByConnectionPoint(rectangle, pointOfRectangle) {
+        const connectionPoint = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        if (connectionPoint[0] > rectangle.x + rectangle.width * 0.43 && connectionPoint[1] < rectangle.y + rectangle.height / 2) {
+            return rotateVector(getUnitVectorByPointAndPoint(connectionPoint, [rectangle.x, rectangle.y + rectangle.height / 2]), -Math.PI);
+        }
+        if (connectionPoint[0] > rectangle.x + rectangle.width * 0.43 && connectionPoint[1] > rectangle.y + rectangle.height / 2) {
+            return getUnitVectorByPointAndPoint(connectionPoint, [rectangle.x, rectangle.y + rectangle.height / 2]);
+        }
+        return getUnitVectorByPointAndPoint(connectionPoint, [rectangle.x, rectangle.y + rectangle.height / 2]);
+    }
+};
+
+const RequiredInterfaceEngine = {
+    draw(board, rectangle, options) {
+        const rs = PlaitBoard.getRoughSVG(board);
+        const shape = rs.path(`M${rectangle.x} ${rectangle.y} 
+        A${rectangle.width * 0.39} ${rectangle.height / 2}, 0, 0, 1 ${rectangle.x} ${rectangle.y + rectangle.height}
+        M${rectangle.x + rectangle.width * 0.41} ${rectangle.y + rectangle.height / 2} H${rectangle.x + rectangle.width}
+        `, {
+            ...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);
+    }
+};
+
+const ProvidedInterfaceEngine = {
+    draw(board, rectangle, options) {
+        const rs = PlaitBoard.getRoughSVG(board);
+        const shape = rs.path(` M${rectangle.x} ${rectangle.y + rectangle.height / 2} 
+        H${rectangle.x + rectangle.width * 0.54}
+        A${(rectangle.width * 0.46) / 2} ${rectangle.height / 2}, 0, 1, 1 ${rectangle.x + rectangle.width} ${rectangle.y +
+            rectangle.height / 2}
+        A${(rectangle.width * 0.46) / 2} ${rectangle.height / 2}, 0, 1, 1 ${rectangle.x + rectangle.width * 0.54} ${rectangle.y +
+            rectangle.height / 2}
+        `, {
+            ...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);
+    },
+    getConnectorPoints(rectangle) {
+        return RectangleClient.getEdgeCenterPoints(rectangle);
+    },
+    getNearestPoint(rectangle, point) {
+        const nearestPoint = getNearestPointBetweenPointAndSegments(point, RectangleEngine.getCornerPoints(rectangle));
+        return nearestPoint;
+    },
+    getTangentVectorByConnectionPoint(rectangle, pointOfRectangle) {
+        const connectionPoint = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        const centerPoint = [rectangle.x + (rectangle.width * 3) / 4, rectangle.y + rectangle.height / 2];
+        if (connectionPoint[0] > rectangle.x + rectangle.width * 0.54) {
+            const point = [connectionPoint[0] - centerPoint[0], -(connectionPoint[1] - centerPoint[1])];
+            const rx = (rectangle.width * 0.46) / 2;
+            const ry = rectangle.height / 2;
+            const slope = getEllipseTangentSlope(point[0], point[1], rx, ry);
+            return getVectorFromPointAndSlope(point[0], point[1], slope);
+        }
+        return getUnitVectorByPointAndPoint(connectionPoint, [rectangle.x, rectangle.y + rectangle.height / 2]);
+    }
+};
+
+const ComponentEngine = {
+    draw(board, rectangle, options) {
+        const rs = PlaitBoard.getRoughSVG(board);
+        const boxSize = {
+            with: rectangle.width > 70 ? 24 : rectangle.width * 0.2,
+            height: rectangle.height - 28 - rectangle.height * 0.35 > 1 ? 14 : rectangle.height * 0.175
+        };
+        const shape = rs.path(`M${rectangle.x + 12} ${rectangle.y} 
+            v${rectangle.height * 0.175} 
+            h${boxSize.with / 2} v${boxSize.height} h${-boxSize.with} v${-boxSize.height} h${boxSize.with / 2}
+
+            M${rectangle.x + 12} ${rectangle.y + rectangle.height * 0.175 + boxSize.height} 
+
+            v${rectangle.height - rectangle.height * 0.35 - boxSize.height * 2}
+            h${boxSize.with / 2} v${boxSize.height} h${-boxSize.with} v${-boxSize.height} h${boxSize.with / 2}
+            M${rectangle.x + 12} ${rectangle.y + rectangle.height - rectangle.height * 0.175} 
+            V${rectangle.y + rectangle.height}
+            H${rectangle.x + rectangle.width}
+            v${-rectangle.height}
+            h${-(rectangle.width - 12)}
+             `, { ...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) {
+        let nearestPoint = getNearestPointBetweenPointAndSegments(point, RectangleEngine.getCornerPoints(rectangle));
+        if (nearestPoint[1] === rectangle.y + rectangle.height / 2) {
+            nearestPoint = getNearestPointBetweenPointAndSegments(point, [
+                [rectangle.x + 12, rectangle.y + rectangle.height * 0.175 + 14],
+                [rectangle.x + 12, rectangle.y + rectangle.height - rectangle.height * 0.175 - 14]
+            ], false);
+        }
+        return nearestPoint;
+    },
+    getTangentVectorByConnectionPoint(rectangle, pointOfRectangle) {
+        const connectionPoint = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getUnitVectorByPointAndPoint([rectangle.x + 12, rectangle.y + rectangle.height - rectangle.height * 0.175 - 14], connectionPoint);
+    },
+    getConnectorPoints(rectangle) {
+        return [
+            [rectangle.x + rectangle.width / 2, rectangle.y],
+            [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2],
+            [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height],
+            [rectangle.x + 12, rectangle.y + rectangle.height / 2]
+        ];
+    },
+    getTextRectangle(element) {
+        const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
+        const strokeWidth = getStrokeWidthByElement(element);
+        const height = element.textHeight;
+        const width = elementRectangle.width - 24 - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2;
+        return {
+            height,
+            width: width > 0 ? width : 0,
+            x: elementRectangle.x + 24 + ShapeDefaultSpace.rectangleAndText + strokeWidth,
+            y: elementRectangle.y + (elementRectangle.height - height) / 2
+        };
+    }
+};
+
+const ComponentBoxEngine = {
+    draw(board, rectangle, options) {
+        const rs = PlaitBoard.getRoughSVG(board);
+        const componentWidth = rectangle.width - 45 * 2 - 18 > 1 ? 45 : rectangle.width * 0.25;
+        const componentHeight = rectangle.height - 30 - 8 * 2 > 1 ? 30 : rectangle.height * 0.2;
+        const componentRectangle = {
+            x: rectangle.x + rectangle.width - 18 - componentWidth,
+            y: rectangle.y + 8,
+            width: componentWidth,
+            height: componentHeight
+        };
+        const shape = rs.path(`M${rectangle.x} ${rectangle.y} 
+            H${rectangle.x + rectangle.width} 
+            V${rectangle.y + rectangle.height} 
+            H${rectangle.x} Z
+
+            `, { ...options, fillStyle: 'solid' });
+        const componentShape = ComponentEngine.draw(board, componentRectangle, options);
+        shape.append(componentShape);
+        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 componentWidth = elementRectangle.width - 45 * 2 - 18 > 1 ? 45 : elementRectangle.width * 0.25;
+        const width = elementRectangle.width - 18 - componentWidth - ShapeDefaultSpace.rectangleAndText - strokeWidth * 2;
+        return {
+            height,
+            width: width > 0 ? width : 0,
+            x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
+            y: elementRectangle.y + (elementRectangle.height - height) / 2
+        };
+    }
+};
+
+const TemplateEngine = {
+    draw(board, rectangle, options) {
+        const rs = PlaitBoard.getRoughSVG(board);
+        return drawRoundRectangle(rs, rectangle.x, rectangle.y, rectangle.x + rectangle.width, rectangle.y + rectangle.height, {
+            ...options,
+            fillStyle: 'solid',
+            dashGap: 10,
+            strokeLineDash: [10, 10]
+        }, false, 4);
+    },
+    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;
+        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,
+    [BasicShapes.ellipse]: EllipseEngine,
+    [BasicShapes.parallelogram]: ParallelogramEngine,
+    [BasicShapes.roundRectangle]: RoundRectangleEngine,
+    [BasicShapes.text]: RectangleEngine,
+    [BasicShapes.triangle]: TriangleEngine,
+    [BasicShapes.leftArrow]: LeftArrowEngine,
+    [BasicShapes.trapezoid]: TrapezoidEngine,
+    [BasicShapes.rightArrow]: RightArrowEngine,
+    [BasicShapes.cross]: CrossEngine,
+    [BasicShapes.star]: StarEngine,
+    [BasicShapes.pentagon]: PentagonEngine,
+    [BasicShapes.hexagon]: HexagonEngine,
+    [BasicShapes.octagon]: OctagonEngine,
+    [BasicShapes.pentagonArrow]: PentagonArrowEngine,
+    [BasicShapes.processArrow]: ProcessArrowEngine,
+    [BasicShapes.twoWayArrow]: TwoWayArrowEngine,
+    [BasicShapes.comment]: CommentEngine,
+    [BasicShapes.roundComment]: RoundCommentEngine,
+    [BasicShapes.cloud]: CloudEngine,
+    [FlowchartSymbols.process]: RectangleEngine,
+    [FlowchartSymbols.decision]: DiamondEngine,
+    [FlowchartSymbols.connector]: EllipseEngine,
+    [FlowchartSymbols.data]: ParallelogramEngine,
+    [FlowchartSymbols.terminal]: TerminalEngine,
+    [FlowchartSymbols.database]: DatabaseEngine,
+    [FlowchartSymbols.hardDisk]: HardDiskEngine,
+    [FlowchartSymbols.internalStorage]: InternalStorageEngine,
     [FlowchartSymbols.manualInput]: ManualInputEngine,
     [FlowchartSymbols.preparation]: PreparationEngine,
     [FlowchartSymbols.manualLoop]: ManualLoopEngine,
@@ -5150,8 +6029,24 @@ 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.component]: ComponentEngine,
+    [UMLSymbols.componentBox]: ComponentBoxEngine,
+    [UMLSymbols.template]: TemplateEngine,
+    [UMLSymbols.port]: RectangleEngine,
+    [UMLSymbols.branchMerge]: DiamondEngine,
+    [UMLSymbols.assembly]: AssemblyEngine,
+    [UMLSymbols.requiredInterface]: RequiredInterfaceEngine,
+    [UMLSymbols.providedInterface]: ProvidedInterfaceEngine
 };
 const getEngine = (shape) => {
     return ShapeEngineMap[shape];
@@ -5376,7 +6271,8 @@ const PlaitDrawElement = {
         if (PlaitDrawElement.isGeometry(value) ||
             PlaitDrawElement.isLine(value) ||
             PlaitDrawElement.isImage(value) ||
-            PlaitTableElement.isTable(value)) {
+            PlaitDrawElement.isTable(value) ||
+            PlaitDrawElement.isSwimlane(value)) {
             return true;
         }
         else {
@@ -5384,7 +6280,7 @@ const PlaitDrawElement = {
         }
     },
     isShapeElement: (value) => {
-        return PlaitDrawElement.isImage(value) || PlaitDrawElement.isGeometry(value) || PlaitDrawElement.isTable(value);
+        return PlaitDrawElement.isImage(value) || PlaitDrawElement.isGeometry(value) || PlaitDrawElement.isTable(value) || PlaitDrawElement.isSwimlane(value);
     },
     isBasicShape: (value) => {
         return Object.keys(BasicShapes).includes(value.shape);
@@ -5396,17 +6292,23 @@ const PlaitDrawElement = {
         return Object.keys(UMLSymbols).includes(value.shape);
     },
     isSwimlane: (value) => {
-        return Object.keys(SwimlaneSymbols).includes(value.shape);
+        return value.type === 'swimlane';
     },
     isVerticalSwimlane: (value) => {
-        return Object.keys(SwimlaneSymbols).includes(value.shape) && value.shape === SwimlaneSymbols.swimlaneVertical;
+        return PlaitDrawElement.isSwimlane(value) && value.shape === SwimlaneSymbols.swimlaneVertical;
     },
     isHorizontalSwimlane: (value) => {
-        return Object.keys(SwimlaneSymbols).includes(value.shape) && value.shape === SwimlaneSymbols.swimlaneHorizontal;
+        return PlaitDrawElement.isSwimlane(value) && value.shape === SwimlaneSymbols.swimlaneHorizontal;
     },
     isUMLClassOrInterface: (value) => {
-        return false;
-    }
+        return Object.keys(UMLSymbols).includes(value.shape) && [UMLSymbols.class, UMLSymbols.interface].includes(value.shape);
+    },
+    isGeometryByTable: (value) => {
+        return PlaitDrawElement.isUMLClassOrInterface(value);
+    },
+    isElementByTable: (value) => {
+        return PlaitDrawElement.isTable(value) || PlaitDrawElement.isSwimlane(value) || PlaitDrawElement.isGeometryByTable(value);
+    },
 };
 
 class GeometryShapeGenerator extends Generator {
@@ -5478,8 +6380,8 @@ class SingleTextGenerator extends TextGenerator {
     get textManage() {
         return this.textManages[0];
     }
-    constructor(board, element, text, viewContainerRef, options) {
-        super(board, element, [{ key: element.id, text: text, textHeight: element.textHeight }], viewContainerRef, options);
+    constructor(board, element, text, options) {
+        super(board, element, [{ key: element.id, text: text, textHeight: element.textHeight }], options);
     }
     update(element, previousText, currentText, elementG) {
         if (!isMultipleTextGeometry(element)) {
@@ -5569,34 +6471,32 @@ class GeometryComponent extends CommonElementFlavour {
         }
     }
     initializeTextManage() {
-        const onTextValueChangeHandle = (element, textManageRef, text) => {
-            const height = textManageRef.height / this.board.viewport.zoom;
-            const width = textManageRef.width / this.board.viewport.zoom;
-            if (textManageRef.newValue) {
+        const onTextChange = (element, textManageChangeData, text) => {
+            if (textManageChangeData.newText) {
                 if (isMultipleTextGeometry(element)) {
                     DrawTransforms.setDrawShapeText(this.board, element, {
                         key: text.key,
-                        text: textManageRef.newValue,
-                        textHeight: height
+                        text: textManageChangeData.newText,
+                        textHeight: textManageChangeData.height
                     });
                 }
                 else {
-                    DrawTransforms.setText(this.board, element, textManageRef.newValue, width, height);
+                    DrawTransforms.setText(this.board, element, textManageChangeData.newText, textManageChangeData.width, textManageChangeData.height);
                 }
             }
             else {
-                DrawTransforms.setTextSize(this.board, element, width, height);
+                DrawTransforms.setTextSize(this.board, element, textManageChangeData.width, textManageChangeData.height);
             }
-            textManageRef.operations && memorizeLatestText(element, textManageRef.operations);
+            textManageChangeData.operations && memorizeLatestText(element, textManageChangeData.operations);
         };
         if (isMultipleTextGeometry(this.element)) {
-            this.textGenerator = new TextGenerator(this.board, this.element, this.element.texts, PlaitBoard.getViewContainerRef(this.board), {
-                onValueChangeHandle: onTextValueChangeHandle
+            this.textGenerator = new TextGenerator(this.board, this.element, this.element.texts, {
+                onChange: onTextChange
             });
         }
         else {
-            this.textGenerator = new SingleTextGenerator(this.board, this.element, this.element.text, PlaitBoard.getViewContainerRef(this.board), {
-                onValueChangeHandle: onTextValueChangeHandle,
+            this.textGenerator = new SingleTextGenerator(this.board, this.element, this.element.text, {
+                onChange: onTextChange,
                 getMaxWidth: () => {
                     let width = getTextRectangle(this.element).width;
                     const getRectangle = getEngine(this.element.shape).getTextRectangle;
@@ -5785,24 +6685,24 @@ class LineComponent extends CommonElementFlavour {
         }
     }
     createTextManage(text, index) {
-        return new TextManage(this.board, PlaitBoard.getViewContainerRef(this.board), {
+        return new TextManage(this.board, {
             getRectangle: () => {
                 return getLineTextRectangle(this.board, this.element, index);
             },
-            onValueChangeHandle: (textManageRef) => {
-                const height = textManageRef.height / this.board.viewport.zoom;
-                const width = textManageRef.width / this.board.viewport.zoom;
+            onChange: (textManageChangeData) => {
                 const texts = [...this.element.texts];
+                const newWidth = textManageChangeData.width < MIN_TEXT_WIDTH ? MIN_TEXT_WIDTH : textManageChangeData.width;
                 texts.splice(index, 1, {
-                    text: textManageRef.newValue ? textManageRef.newValue : this.element.texts[index].text,
+                    text: textManageChangeData.newText ? textManageChangeData.newText : this.element.texts[index].text,
                     position: this.element.texts[index].position,
-                    width,
-                    height
+                    width: newWidth,
+                    height: textManageChangeData.height
                 });
                 DrawTransforms.setLineTexts(this.board, this.element, texts);
-                textManageRef.operations && memorizeLatestText(this.element, textManageRef.operations);
+                textManageChangeData.operations && memorizeLatestText(this.element, textManageChangeData.operations);
             },
-            getMaxWidth: () => GeometryThreshold.defaultTextMaxWidth
+            getMaxWidth: () => GeometryThreshold.defaultTextMaxWidth,
+            textPlugins: []
         });
     }
     updateText(previousTexts, currentTexts) {
@@ -5877,6 +6777,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 +6804,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 +6820,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) {
@@ -5910,16 +6833,12 @@ const withGeometryCreateByDrag = (board) => {
                 const points = RectangleClient.getPoints(RectangleClient.getRectangleByCenterPoint(movingPoint, property.width, property.height));
                 temporaryElement = createTextElement(board, points);
                 if (!fakeCreateTextRef) {
-                    const textManage = new TextManage(board, PlaitBoard.getComponent(board).viewContainerRef, {
+                    const textManage = new TextManage(board, {
                         getRectangle: () => {
                             return getTextRectangle(temporaryElement);
                         }
                     });
-                    PlaitBoard.getComponent(board)
-                        .viewContainerRef.injector.get(NgZone)
-                        .run(() => {
-                        textManage.draw(temporaryElement.text);
-                    });
+                    textManage.draw(temporaryElement.text);
                     fakeCreateTextRef = {
                         g: createG(),
                         textManage
@@ -5997,9 +6916,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);
@@ -6051,7 +6970,7 @@ const withGeometryCreateByDrawing = (board) => {
 
 const buildClipboardData = (board, elements, startPoint) => {
     return elements.map(element => {
-        if (PlaitDrawElement.isGeometry(element) || PlaitDrawElement.isImage(element) || PlaitDrawElement.isTable(element)) {
+        if (PlaitDrawElement.isShapeElement(element)) {
             const points = element.points.map(point => [point[0] - startPoint[0], point[1] - startPoint[1]]);
             return { ...element, points };
         }
@@ -6081,37 +7000,28 @@ const buildClipboardData = (board, elements, startPoint) => {
 };
 const insertClipboardData = (board, elements, startPoint) => {
     const lines = elements.filter(value => PlaitDrawElement.isLine(value));
-    const geometries = elements.filter(value => PlaitDrawElement.isGeometry(value) || PlaitDrawElement.isImage(value));
-    const tables = elements.filter(value => PlaitDrawElement.isTable(value));
+    const geometries = elements.filter(value => (PlaitDrawElement.isGeometry(value) && !PlaitDrawElement.isGeometryByTable(value)) || PlaitDrawElement.isImage(value));
+    const tables = elements.filter(value => PlaitDrawElement.isElementByTable(value));
     geometries.forEach(element => {
-        const sourceLines = [];
-        const targetLines = [];
-        lines.forEach(line => {
-            if (PlaitLine.isBoundElementOfSource(line, element)) {
-                sourceLines.push(line);
-            }
-            if (PlaitLine.isBoundElementOfTarget(line, element)) {
-                targetLines.push(line);
-            }
-        });
-        element.id = idCreator();
-        // update lines
-        sourceLines.forEach(sourceLine => (sourceLine.source.boundId = element.id));
-        targetLines.forEach(targetLine => (targetLine.target.boundId = element.id));
+        const newId = idCreator();
+        updateBoundLinesId(element, lines, newId);
+        element.id = newId;
         element.points = element.points.map(point => [startPoint[0] + point[0], startPoint[1] + point[1]]);
         Transforms.insertNode(board, element, [board.children.length]);
     });
+    insertClipboardTableData(board, tables, startPoint, lines);
     lines.forEach(element => {
         element.id = idCreator();
         element.points = element.points.map(point => [startPoint[0] + point[0], startPoint[1] + point[1]]);
         Transforms.insertNode(board, element, [board.children.length]);
     });
-    insertClipboardTableData(board, tables, startPoint);
     Transforms.addSelectionWithTemporaryElements(board, elements);
 };
-const insertClipboardTableData = (board, elements, startPoint) => {
+const insertClipboardTableData = (board, elements, startPoint, lines) => {
     elements.forEach(element => {
-        element.id = idCreator();
+        const newId = idCreator();
+        updateBoundLinesId(element, lines, newId);
+        element.id = newId;
         updateRowOrColumnIds(element, 'row');
         updateRowOrColumnIds(element, 'column');
         updateCellIds(element.cells);
@@ -6119,6 +7029,21 @@ const insertClipboardTableData = (board, elements, startPoint) => {
         Transforms.insertNode(board, element, [board.children.length]);
     });
 };
+const updateBoundLinesId = (element, lines, newId) => {
+    const sourceLines = [];
+    const targetLines = [];
+    lines.forEach(line => {
+        if (PlaitLine.isBoundElementOfSource(line, element)) {
+            sourceLines.push(line);
+        }
+        if (PlaitLine.isBoundElementOfTarget(line, element)) {
+            targetLines.push(line);
+        }
+    });
+    // update lines
+    sourceLines.forEach(sourceLine => (sourceLine.source.boundId = newId));
+    targetLines.forEach(targetLine => (targetLine.target.boundId = newId));
+};
 
 const withDrawFragment = (baseBoard) => {
     const board = baseBoard;
@@ -6130,15 +7055,19 @@ const withDrawFragment = (baseBoard) => {
             const lineElements = drawElements.filter(value => PlaitDrawElement.isLine(value));
             const imageElements = drawElements.filter(value => PlaitDrawElement.isImage(value));
             const tableElements = drawElements.filter(value => PlaitDrawElement.isTable(value));
+            const swimlaneElements = drawElements.filter(value => PlaitDrawElement.isSwimlane(value));
             const boundLineElements = [
                 ...getBoundedLineElements(board, geometryElements),
-                ...getBoundedLineElements(board, imageElements)
+                ...getBoundedLineElements(board, imageElements),
+                ...getBoundedLineElements(board, tableElements),
+                ...getBoundedLineElements(board, swimlaneElements)
             ].filter(line => !lineElements.includes(line));
             data.push(...[
                 ...geometryElements,
                 ...lineElements,
                 ...imageElements,
                 ...tableElements,
+                ...swimlaneElements,
                 ...boundLineElements.filter(line => !lineElements.includes(line))
             ]);
         }
@@ -6533,7 +7462,7 @@ const withLineText = (board) => {
                 else {
                     const ratio = getRatioByPoint(points, point);
                     texts.push({
-                        text: buildText('文本'),
+                        text: buildText(LINE_TEXT),
                         position: ratio,
                         width: 28,
                         height: 20
@@ -6556,10 +7485,9 @@ const withLineText = (board) => {
 function editHandle(board, element, manageIndex, isFirstEdit = false) {
     const textManages = getTextManages(element);
     const textManage = textManages[manageIndex];
-    const originText = textManage.componentRef.instance.children;
-    textManage.edit((origin, descendant) => {
-        const text = Node.string(descendant[0]);
-        const shouldRemove = (isFirstEdit && originText === descendant) || !text;
+    textManage.edit(() => {
+        const text = Node.string(textManage.getText());
+        const shouldRemove = !text || (isFirstEdit && text === LINE_TEXT);
         if (shouldRemove) {
             DrawTransforms.removeLineText(board, element, manageIndex);
         }
@@ -6567,9 +7495,6 @@ function editHandle(board, element, manageIndex, isFirstEdit = false) {
 }
 
 class ImageComponent extends CommonElementFlavour {
-    get activeGenerator() {
-        return this.imageGenerator.componentRef.instance.activeGenerator;
-    }
     constructor() {
         super();
     }
@@ -6597,7 +7522,7 @@ class ImageComponent extends CommonElementFlavour {
     initialize() {
         super.initialize();
         this.initializeGenerator();
-        this.imageGenerator.processDrawing(this.element, this.getElementG(), PlaitBoard.getViewContainerRef(this.board));
+        this.imageGenerator.processDrawing(this.element, this.getElementG());
         this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
             selected: this.selected
         });
@@ -6605,16 +7530,17 @@ class ImageComponent extends CommonElementFlavour {
     onContextChanged(value, previous) {
         if (value.element !== previous.element) {
             this.imageGenerator.updateImage(this.getElementG(), previous.element, value.element);
-            this.imageGenerator.componentRef.instance.isFocus = this.selected;
+            this.imageGenerator.setFocus(this.element, this.selected);
             this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
                 selected: this.selected
             });
         }
         else {
             const hasSameSelected = value.selected === previous.selected;
-            const hasSameHandleState = this.activeGenerator.options.hasResizeHandle() === this.activeGenerator.hasResizeHandle;
+            const hasSameHandleState = this.imageGenerator.activeGenerator &&
+                this.imageGenerator.activeGenerator.options.hasResizeHandle() === this.imageGenerator.activeGenerator.hasResizeHandle;
             if (!hasSameSelected || !hasSameHandleState) {
-                this.imageGenerator.componentRef.instance.isFocus = this.selected;
+                this.imageGenerator.setFocus(this.element, this.selected);
                 this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
                     selected: this.selected
                 });
@@ -6900,21 +7826,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();
@@ -6928,9 +7839,17 @@ class TableComponent extends CommonElementFlavour {
                 return 1;
             },
             getRectangle: (value) => {
+                const cells = getSelectedCells(value);
+                if (cells?.length) {
+                    return getCellsRectangle(this.board, this.element, cells);
+                }
                 return RectangleClient.getRectangleByPoints(value.points);
             },
             hasResizeHandle: () => {
+                const cells = getSelectedCells(this.element);
+                if (cells?.length) {
+                    return false;
+                }
                 return canResize(this.board, this.element);
             }
         });
@@ -6953,7 +7872,8 @@ class TableComponent extends CommonElementFlavour {
         });
     }
     rotateVerticalText() {
-        this.element.cells.forEach(item => {
+        const table = this.board.buildTable(this.element);
+        table.cells.forEach(item => {
             if (PlaitTableElement.isVerticalText(item)) {
                 const textManage = getTextManage(item.id);
                 if (textManage) {
@@ -6979,14 +7899,14 @@ class TableComponent extends CommonElementFlavour {
     }
     initializeTextManage() {
         const texts = this.getDrawShapeTexts(this.element.cells);
-        this.textGenerator = new TextGenerator(this.board, this.element, texts, PlaitBoard.getViewContainerRef(this.board), {
-            onValueChangeHandle: (value, textManageRef, text) => {
-                const height = textManageRef.height / this.board.viewport.zoom;
-                const width = textManageRef.width / this.board.viewport.zoom;
-                if (textManageRef.newValue) {
-                    DrawTransforms.setTableText(this.board, value, text.key, textManageRef.newValue, width, height);
+        this.textGenerator = new TextGenerator(this.board, this.element, texts, {
+            onChange: (value, data, text) => {
+                const height = data.height / this.board.viewport.zoom;
+                const width = data.width / this.board.viewport.zoom;
+                if (data.newText) {
+                    DrawTransforms.setTableText(this.board, value, text.key, data.newText, width, height);
                 }
-                textManageRef.operations && memorizeLatestText(value, textManageRef.operations);
+                data.operations && memorizeLatestText(value, data.operations);
             },
             getRenderRectangle: (value, text) => {
                 const cell = getCellWithPoints(this.board, value, text.key);
@@ -7010,7 +7930,13 @@ class TableComponent extends CommonElementFlavour {
         this.textGenerator.initialize();
     }
     onContextChanged(value, previous) {
-        if (value.element !== previous.element) {
+        const isChangeTheme = this.board.operations.find(op => op.type === 'set_theme');
+        if (value.element !== previous.element || isChangeTheme) {
+            const previousSelectedCells = getSelectedCells(previous.element);
+            if (previousSelectedCells?.length) {
+                clearSelectedCells(previous.element);
+                setSelectedCells(value.element, previousSelectedCells);
+            }
             this.tableGenerator.processDrawing(value.element, this.getElementG());
             this.activeGenerator.processDrawing(value.element, PlaitBoard.getElementActiveHost(this.board), { selected: this.selected });
             const previousTexts = this.getDrawShapeTexts(previous.element.cells);
@@ -7021,11 +7947,15 @@ class TableComponent extends CommonElementFlavour {
         else {
             const hasSameSelected = value.selected === previous.selected;
             const hasSameHandleState = this.activeGenerator.options.hasResizeHandle() === this.activeGenerator.hasResizeHandle;
-            if (!hasSameSelected || !hasSameHandleState) {
+            const currentSelectedCells = getSelectedCells(value.element);
+            if (!hasSameSelected || !hasSameHandleState || currentSelectedCells?.length) {
                 this.activeGenerator.processDrawing(value.element, PlaitBoard.getElementActiveHost(this.board), {
                     selected: this.selected
                 });
             }
+            if (!this.selected) {
+                clearSelectedCells(value.element);
+            }
         }
         this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
             selected: this.selected
@@ -7050,12 +7980,13 @@ function withTableResize(board) {
         },
         hitTest: (point) => {
             const hitElement = getHitElementByPoint(board, point);
-            if (hitElement && PlaitTableElement.isTable(hitElement)) {
+            if (hitElement && PlaitDrawElement.isElementByTable(hitElement)) {
                 let rectangle = board.getRectangle(hitElement);
                 let handleRef = getHitRectangleResizeHandleRef(board, rectangle, point, hitElement.angle);
                 if (handleRef) {
                     const selectElement = isSelectedElement(board, hitElement);
-                    if ((selectElement && isSingleSelectTable(board)) || (!selectElement && !isCornerHandle(board, handleRef.handle))) {
+                    if ((selectElement && isSingleSelectElementByTable(board)) ||
+                        (!selectElement && !isCornerHandle(board, handleRef.handle))) {
                         return {
                             element: hitElement,
                             handle: handleRef.handle,
@@ -7164,48 +8095,65 @@ function withTableResize(board) {
 
 const withTable = (board) => {
     const tableBoard = board;
-    const { drawElement, getRectangle, isRectangleHit, isHit, isMovable, dblClick } = tableBoard;
+    const { drawElement, getRectangle, isRectangleHit, isHit, isMovable, dblClick, keyDown } = tableBoard;
     tableBoard.drawElement = (context) => {
-        if (PlaitTableElement.isTable(context.element)) {
+        if (PlaitDrawElement.isElementByTable(context.element)) {
             return TableComponent;
         }
         return drawElement(context);
     };
     tableBoard.isHit = (element, point) => {
-        if (PlaitTableElement.isTable(element)) {
+        if (PlaitDrawElement.isElementByTable(element)) {
             const client = RectangleClient.getRectangleByPoints(element.points);
             return RectangleClient.isPointInRectangle(client, point);
         }
         return isHit(element, point);
     };
     tableBoard.getRectangle = (element) => {
-        if (PlaitTableElement.isTable(element)) {
+        if (PlaitDrawElement.isElementByTable(element)) {
             return RectangleClient.getRectangleByPoints(element.points);
         }
         return getRectangle(element);
     };
     tableBoard.isMovable = (element) => {
-        if (PlaitTableElement.isTable(element)) {
+        if (PlaitDrawElement.isElementByTable(element)) {
             return true;
         }
         return isMovable(element);
     };
     tableBoard.isRectangleHit = (element, selection) => {
-        if (PlaitTableElement.isTable(element)) {
+        if (PlaitDrawElement.isElementByTable(element)) {
             const rangeRectangle = RectangleClient.getRectangleByPoints([selection.anchor, selection.focus]);
             return isPolylineHitRectangle(element.points, rangeRectangle);
         }
         return isRectangleHit(element, selection);
     };
+    tableBoard.keyDown = (event) => {
+        const selectedElements = getSelectedElements(board);
+        const isSingleSelection = selectedElements.length === 1;
+        const targetElement = selectedElements[0];
+        if (!PlaitBoard.isReadonly(board) && !isVirtualKey(event) && !isDelete(event) && !isSpaceHotkey(event) && isSingleSelection) {
+            event.preventDefault();
+            if (PlaitDrawElement.isElementByTable(targetElement)) {
+                const firstTextCell = targetElement.cells.find(item => item.text && item.textHeight);
+                if (firstTextCell) {
+                    editCell(firstTextCell);
+                    return;
+                }
+            }
+        }
+        keyDown(event);
+    };
     tableBoard.dblClick = (event) => {
         event.preventDefault();
         if (!PlaitBoard.isReadonly(board)) {
             const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
             const hitElement = getHitElementByPoint(board, point);
-            if (hitElement && PlaitTableElement.isTable(hitElement)) {
+            if (hitElement && PlaitDrawElement.isElementByTable(hitElement)) {
                 const hitCell = getHitCell(tableBoard, hitElement, point);
                 if (hitCell && hitCell.text && hitCell.textHeight) {
                     editCell(hitCell);
+                    return;
                 }
             }
         }
@@ -7217,123 +8165,6 @@ const withTable = (board) => {
     return withTableResize(tableBoard);
 };
 
-function buildSwimlaneTable(element) {
-    const swimlaneElement = { ...element };
-    if (PlaitDrawElement.isHorizontalSwimlane(element)) {
-        swimlaneElement.cells = element.cells.map((item, index) => {
-            if (index === 0) {
-                item = {
-                    ...element.cells[0],
-                    rowspan: element.rows.length
-                };
-            }
-            if (item.text && item.textHeight && !item.text.direction) {
-                item.text.direction = 'vertical';
-            }
-            return item;
-        });
-        return swimlaneElement;
-    }
-    swimlaneElement.cells = [
-        {
-            ...element.cells[0],
-            colspan: element.columns.length
-        },
-        ...element.cells.slice(1, element.cells.length)
-    ];
-    return swimlaneElement;
-}
-const getDefaultSWimlanePoints = (pointer, centerPoint) => {
-    const property = DefaultSwimlanePropertyMap[pointer];
-    return RectangleClient.getPoints(RectangleClient.getRectangleByCenterPoint(centerPoint, property.width, property.height));
-};
-const createDefaultSwimlane = (shape, points) => {
-    const rows = createDefaultRowsOrColumns(shape, 'row');
-    const columns = createDefaultRowsOrColumns(shape, 'column');
-    const swimlane = {
-        id: idCreator(),
-        type: 'table',
-        shape,
-        points,
-        rows,
-        columns,
-        cells: createDefaultCells(shape, rows, columns)
-    };
-    return buildSwimlaneTable(swimlane);
-};
-const createDefaultRowsOrColumns = (shape, type) => {
-    let data = new Array(3).fill('').map(item => {
-        return { id: idCreator() };
-    });
-    if (type === 'row' && shape === SwimlaneSymbols.swimlaneVertical) {
-        data = data.map((item, index) => {
-            if (index === 0 || index === 1) {
-                return {
-                    ...item,
-                    height: 30
-                };
-            }
-            return item;
-        });
-    }
-    if (type === 'column' && shape === SwimlaneSymbols.swimlaneHorizontal) {
-        data = data.map((item, index) => {
-            if (index === 0 || index === 1) {
-                return {
-                    ...item,
-                    width: 30
-                };
-            }
-            return item;
-        });
-    }
-    return data;
-};
-const createDefaultCells = (shape, rows, columns) => {
-    return new Array(7).fill('').map((item, index) => {
-        if (index === 0) {
-            item = {
-                id: idCreator(),
-                rowId: rows[0].id,
-                columnId: columns[0].id,
-                textHeight: DEFAULT_TEXT_HEIGHT,
-                text: {
-                    children: [
-                        {
-                            text: 'New Swimlane'
-                        }
-                    ],
-                    align: 'center'
-                }
-            };
-        }
-        if ([1, 2, 3].includes(index)) {
-            item = {
-                id: idCreator(),
-                rowId: shape === SwimlaneSymbols.swimlaneVertical ? rows[1].id : rows[index - 1].id,
-                columnId: shape === SwimlaneSymbols.swimlaneVertical ? columns[index - 1].id : columns[1].id,
-                textHeight: DEFAULT_TEXT_HEIGHT,
-                text: {
-                    children: [
-                        {
-                            text: 'Lane'
-                        }
-                    ],
-                    align: 'center'
-                }
-            };
-        }
-        if ([4, 5, 6].includes(index)) {
-            item = {
-                id: idCreator(),
-                rowId: shape === SwimlaneSymbols.swimlaneVertical ? rows[2].id : rows[index - 4].id,
-                columnId: shape === SwimlaneSymbols.swimlaneVertical ? columns[index - 4].id : columns[2].id
-            };
-        }
-        return item;
-    });
-};
-
 const isSwimlaneDndMode = (board) => {
     const swimlanePointers = getSwimlanePointers();
     const isSwimlanePointer = PlaitBoard.isInPointer(board, swimlanePointers);
@@ -7358,7 +8189,7 @@ const withSwimlaneCreateByDrag = (board) => {
         const movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         const pointer = PlaitBoard.getPointer(board);
         if (dragMode) {
-            const points = getDefaultSWimlanePoints(pointer, movingPoint);
+            const points = getDefaultSwimlanePoints(pointer, movingPoint);
             temporaryElement = createDefaultSwimlane(pointer, points);
             tableGenerator.processDrawing(temporaryElement, swimlaneG);
             PlaitBoard.getElementActiveHost(board).append(swimlaneG);
@@ -7439,7 +8270,7 @@ const withSwimlaneCreateByDrawing = (board) => {
             const { width, height } = RectangleClient.getRectangleByPoints([start, targetPoint]);
             if (Math.hypot(width, height) < 8) {
                 const pointer = PlaitBoard.getPointer(board);
-                const points = getDefaultSWimlanePoints(pointer, targetPoint);
+                const points = getDefaultSwimlanePoints(pointer, targetPoint);
                 temporaryElement = createDefaultSwimlane(pointer, points);
             }
             if (temporaryElement) {
@@ -7459,7 +8290,7 @@ const withSwimlaneCreateByDrawing = (board) => {
 };
 
 const withSwimlane = (board) => {
-    const { drawElement, buildTable } = board;
+    const { drawElement, buildTable, pointerUp } = board;
     board.drawElement = (context) => {
         if (PlaitDrawElement.isSwimlane(context.element)) {
             return TableComponent;
@@ -7472,6 +8303,23 @@ const withSwimlane = (board) => {
         }
         return buildTable(element);
     };
+    board.pointerUp = (event) => {
+        const isSetSelectionPointer = PlaitBoard.isPointer(board, PlaitPointerType.selection) || PlaitBoard.isPointer(board, PlaitPointerType.hand);
+        const isSkip = !isMainPointer(event) || isDragging(board) || !isSetSelectionPointer;
+        if (isSkip) {
+            pointerUp(event);
+            return;
+        }
+        if (isSingleSelectSwimlane(board)) {
+            const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
+            const element = getSelectedSwimlane(board);
+            const hitCell = getHitCell(board, element, point);
+            if (hitCell && hitCell.text && hitCell.textHeight) {
+                setSelectedCells(element, [hitCell]);
+            }
+        }
+        pointerUp(event);
+    };
     return withSwimlaneCreateByDrawing(withSwimlaneCreateByDrag(board));
 };
 
@@ -7580,5 +8428,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, DefaultActivationProperty, DefaultActorProperty, DefaultArrowProperty, DefaultAssemblyProperty, DefaultBasicShapeProperty, DefaultBasicShapePropertyMap, DefaultClassProperty, DefaultCloudProperty, DefaultCombinedFragmentProperty, DefaultComponentBoxProperty, DefaultConnectorProperty, DefaultContainerProperty, DefaultDataBaseProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultDeletionProperty, DefaultDocumentProperty, DefaultDrawActiveStyle, DefaultDrawStyle, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultInterfaceProperty, DefaultInternalStorageProperty, DefaultManualInputProperty, DefaultMergeProperty, DefaultMultiDocumentProperty, DefaultNoteProperty, DefaultObjectProperty, DefaultPackageProperty, DefaultPentagonArrowProperty, DefaultPortProperty, DefaultProvidedInterfaceProperty, DefaultRequiredInterfaceProperty, DefaultSwimlaneHorizontalProperty, DefaultSwimlaneHorizontalWithHeaderProperty, DefaultSwimlanePropertyMap, DefaultSwimlaneVerticalProperty, DefaultSwimlaneVerticalWithHeaderProperty, 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, MIN_TEXT_WIDTH, MemorizeKey, MultipleTextGeometryCommonTextKeys, MultipleTextGeometryTextKeys, PlaitDrawElement, PlaitGeometry, PlaitLine, PlaitTableElement, Q2C, SELECTED_CELLS, SWIMLANE_HEADER_SIZE, ShapeDefaultSpace, SingleTextGenerator, StrokeStyle, SwimlaneDrawSymbols, SwimlaneSymbols, TableGenerator, TableSymbols, TextGenerator, UMLSymbols, WithLineAutoCompletePluginKey, adjustSwimlaneShape, alignElbowSegment, alignPoints, buildDefaultTextsByShape, buildSwimlaneTable, clearSelectedCells, createCell, createDefaultCells, createDefaultFlowchart, createDefaultGeometry, createDefaultRowsOrColumns, createDefaultSwimlane, createGeometryElement, createGeometryElementWithText, createGeometryElementWithoutText, createLineElement, createMultipleTextGeometryElement, createTextElement, createUMLClassOrInterfaceGeometryElement, debugGenerator$1 as debugGenerator, deleteTextManage, drawBoundReaction, drawGeometry, drawLine, drawLineArrow, drawShape, editCell, editText, getAutoCompletePoints, getBasicPointers, getCellWithPoints, getCellsRectangle, getCellsWithPoints, getCenterPointsOnPolygon$1 as getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultBasicShapeProperty, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultSwimlanePoints, getDefaultTextPoints, getDefaultUMLProperty, getDrawDefaultStrokeColor, getElbowLineRouteOptions, getElbowPoints, getFillByElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryAlign, getGeometryPointers, getHitCell, getHitConnection, getHitConnectorPoint, getHitIndexOfAutoCompletePoint, getHitMultipleGeometryText, getHitShape, getIndexAndDeleteCountByKeyPoint, getLineDashByElement, getLineHandleRefPair, getLineMemorizedLatest, getLinePointers, getLinePoints, getLineTextRectangle, getLines, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getMidKeyPoints, getMiddlePoints, getMirrorDataPoints, getMultipleTextGeometryTextKeys, getNearestPoint, getNextRenderPoints, getNextSourceAndTargetPoints, getResizedPreviousAndNextPoint, getSelectedCells, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedLineElements, getSelectedSwimlane, getSelectedTableElements, getSnapResizingRef, getSnapResizingRefOptions, getSnappingRef, getSnappingShape, getSourceAndTargetRectangle, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getSwimlaneCount, getSwimlanePointers, getTextKey, getTextManage, getTextManageByCell, getTextRectangle, getTextShapeProperty, getUMLPointers, getVectorByConnection, handleLineCreating, hasIllegalElbowPoint, insertElement, isCellIncludeText, isDrawElementIncludeText, isDrawElementsIncludeText, isGeometryIncludeText, isHitDrawElement, isHitEdgeOfShape, isHitElementInside, isHitElementText, isHitLine, isHitLineText, isHitPolyLine, isInsideOfShape, isMultipleTextGeometry, isMultipleTextShape, isRectangleHitDrawElement, isRectangleHitElementText, isSelfLoop, isSingleSelectElementByTable, isSingleSelectSwimlane, isSingleSelectTable, isSingleTextGeometry, isSingleTextShape, isSwimlaneWithHeader, isTextExceedingBounds, isUpdatedHandleIndex, isUseDefaultOrthogonalRoute, memorizeLatestShape, memorizeLatestText, rerenderGeometryActive, setSelectedCells, setTextManage, traverseDrawShapes, updateCellIds, updateCellIdsByRowOrColumn, updateColumns, updateRowOrColumnIds, updateRows, withDraw, withLineAutoComplete };
 //# sourceMappingURL=plait-draw.mjs.map