@plait/draw 0.60.1 → 0.61.1

package/fesm2022/plait-draw.mjs

@@ -1,4 +1,4 @@
-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 { 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 { 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 { pointsOnBezierCurves } from 'points-on-curve';
@@ -57,15 +57,6 @@ 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";
@@ -81,8 +72,14 @@ var UMLSymbols;
     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) {
@@ -91,6 +88,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';
@@ -219,6 +233,10 @@ const DefaultObjectProperty = {
     width: 120,
     height: 60
 };
+const DefaultComponentBoxProperty = {
+    width: 200,
+    height: 150
+};
 const DefaultDeletionProperty = {
     width: 40,
     height: 40
@@ -227,6 +245,18 @@ 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,
@@ -269,14 +299,6 @@ const DefaultInterfaceProperty = {
         }
     ]
 };
-const DefaultSwimlaneVerticalProperty = {
-    width: 450,
-    height: 500
-};
-const DefaultSwimlaneHorizontalProperty = {
-    width: 500,
-    height: 450
-};
 const DefaultBasicShapePropertyMap = {
     [BasicShapes.pentagonArrow]: DefaultPentagonArrowProperty,
     [BasicShapes.processArrow]: DefaultPentagonArrowProperty,
@@ -325,17 +347,19 @@ const DefaultUMLPropertyMap = {
     [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.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;
@@ -345,7 +369,10 @@ const GEOMETRY_WITHOUT_TEXT = [
     UMLSymbols.activation,
     UMLSymbols.deletion,
     UMLSymbols.port,
-    UMLSymbols.branchMerge
+    UMLSymbols.branchMerge,
+    UMLSymbols.assembly,
+    UMLSymbols.providedInterface,
+    UMLSymbols.requiredInterface
 ];
 const GEOMETRY_WITH_MULTIPLE_TEXT = [UMLSymbols.package, UMLSymbols.combinedFragment];
 
@@ -353,7 +380,7 @@ 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);
@@ -399,6 +426,30 @@ 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 getElementShape = (value) => {
     if (PlaitDrawElement.isImage(value)) {
         return BasicShapes.rectangle;
@@ -651,6 +702,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'] = DEFAULT_TEXT_HEIGHT;
+        cell['text'] = {
+            children: [{ text }],
+            align: Alignment.center
+        };
+    }
+    return cell;
+};
 
 const SHAPE_MAX_LENGTH = 6;
 const memorizedShape = new WeakMap();
@@ -983,7 +1057,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) {
@@ -1046,7 +1120,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;
@@ -1098,7 +1172,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, {
@@ -1137,7 +1211,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;
@@ -1145,7 +1219,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;
     }
@@ -1158,9 +1232,7 @@ const getStrokeColorByElement = (board, element) => {
     return strokeColor;
 };
 const getFillByElement = (board, element) => {
-    const defaultFill = PlaitDrawElement.isFlowchart(element)
-        ? getFlowchartDefaultFill(board.theme.themeColorMode)
-        : DefaultDrawStyle.fill;
+    const defaultFill = PlaitDrawElement.isFlowchart(element) ? getFlowchartDefaultFill(board.theme.themeColorMode) : DefaultDrawStyle.fill;
     const fill = element.fill || defaultFill;
     return fill;
 };
@@ -1869,7 +1941,7 @@ const createUMLClassOrInterfaceGeometryElement = (board, shape, points) => {
     const memorizedLatest = getMemorizedLatestByPointer(shape);
     const element = {
         id: idCreator(),
-        type: 'table',
+        type: 'geometry',
         angle: 0,
         opacity: 1,
         points,
@@ -2304,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) => {
@@ -2541,69 +2609,241 @@ 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, header ? 'Lane' : 'New Swimlane');
+        }
+        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 });
-        const newCells = [...swimlane.cells, ...createNewSwimlaneCells(swimlane, newRowId, 'column')];
+        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 });
-        const newCells = [...swimlane.cells, ...createNewSwimlaneCells(swimlane, newColumnId, 'row')];
+        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 rowCell = swimlane.cells.find(item => item.rowId === removeRow.id);
-                const cellPoints = getCellWithPoints(board, swimlane, rowCell.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 columnCell = swimlane.cells.find(item => item.columnId === removeColumn.id);
-                const cellPoints = getCellWithPoints(board, swimlane, columnCell.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);
         }
@@ -2615,11 +2855,13 @@ const createNewSwimlaneCells = (swimlane, newId, type) => {
         rowId: type === 'row' ? item.id : newId,
         columnId: type === 'row' ? newId : item.id
     }));
-    cells.shift();
+    if (swimlane.header) {
+        cells.shift();
+    }
     cells[0] = {
         ...cells[0],
         text: {
-            children: [{ text: 'Lane' }],
+            children: [{ text: swimlane.header ? 'Lane' : 'New Swimlane' }],
             align: Alignment.center,
             direction: type === 'row' ? undefined : 'vertical'
         },
@@ -2636,6 +2878,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 => {
@@ -2711,7 +2980,9 @@ const DrawTransforms = {
     addSwimlaneRow,
     addSwimlaneColumn,
     removeSwimlaneRow,
-    removeSwimlaneColumn
+    removeSwimlaneColumn,
+    setSwimlaneFill,
+    updateSwimlaneCount
 };
 
 const getHitRectangleResizeHandleRef = (board, rectangle, point, angle = 0) => {
@@ -3168,6 +3439,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++) {
@@ -4936,9 +5230,15 @@ 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;
@@ -5382,6 +5682,300 @@ const NoteEngine = {
     }
 };
 
+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,
@@ -5444,8 +6038,14 @@ const ShapeEngineMap = {
     [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.branchMerge]: DiamondEngine,
+    [UMLSymbols.assembly]: AssemblyEngine,
+    [UMLSymbols.requiredInterface]: RequiredInterfaceEngine,
+    [UMLSymbols.providedInterface]: ProvidedInterfaceEngine
 };
 const getEngine = (shape) => {
     return ShapeEngineMap[shape];
@@ -5670,7 +6270,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 {
@@ -5678,7 +6279,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);
@@ -5690,17 +6291,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 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 {
@@ -6177,9 +6784,13 @@ class TableGenerator extends Generator {
     }
     draw(element, data) {
         const rectangle = RectangleClient.getRectangleByPoints(element.points);
+        const strokeLineDash = getLineDashByElement(element);
+        const strokeWidth = getStrokeWidthByElement(element);
+        const strokeColor = getStrokeColorByElement(this.board, element);
         return getEngine(TableSymbols.table).draw(this.board, rectangle, {
-            strokeWidth: 2,
-            stroke: getDrawDefaultStrokeColor(this.board.theme.themeColorMode),
+            strokeWidth,
+            stroke: strokeColor,
+            strokeLineDash,
         }, {
             element: element
         });
@@ -6368,7 +6979,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 };
         }
@@ -6398,37 +7009,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);
@@ -6436,6 +7038,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;
@@ -6447,16 +7064,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, tableElements)
+                ...getBoundedLineElements(board, tableElements),
+                ...getBoundedLineElements(board, swimlaneElements)
             ].filter(line => !lineElements.includes(line));
             data.push(...[
                 ...geometryElements,
                 ...lineElements,
                 ...imageElements,
                 ...tableElements,
+                ...swimlaneElements,
                 ...boundLineElements.filter(line => !lineElements.includes(line))
             ]);
         }
@@ -6930,7 +7550,7 @@ class ImageComponent extends CommonElementFlavour {
         }
         else {
             const hasSameSelected = value.selected === previous.selected;
-            const hasSameHandleState = this.activeGenerator.options.hasResizeHandle() === this.activeGenerator.hasResizeHandle;
+            const hasSameHandleState = this.activeGenerator && this.activeGenerator.options.hasResizeHandle() === this.activeGenerator.hasResizeHandle;
             if (!hasSameSelected || !hasSameHandleState) {
                 this.imageGenerator.componentRef.instance.isFocus = this.selected;
                 this.lineAutoCompleteGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
@@ -7231,9 +7851,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);
             }
         });
@@ -7256,7 +7884,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) {
@@ -7313,7 +7942,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);
@@ -7324,11 +7959,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
@@ -7353,12 +7992,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,
@@ -7467,48 +8107,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;
                 }
             }
         }
@@ -7520,129 +8177,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 = {
-                    ...item,
-                    text: {
-                        ...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);
@@ -7667,7 +8201,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);
@@ -7748,7 +8282,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) {
@@ -7768,7 +8302,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;
@@ -7781,6 +8315,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));
 };
 
@@ -7889,5 +8440,5 @@ const withDraw = (board) => {
  * Generated bundle index. Do not edit.
  */
 
-export { BasicShapes, DEFAULT_IMAGE_WIDTH, DEFAULT_TEXT_HEIGHT, DefaultActivationProperty, DefaultActorProperty, DefaultArrowProperty, DefaultBasicShapeProperty, DefaultBasicShapePropertyMap, DefaultClassProperty, DefaultCloudProperty, DefaultCombinedFragmentProperty, DefaultConnectorProperty, DefaultContainerProperty, DefaultDataBaseProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultDeletionProperty, DefaultDocumentProperty, DefaultDrawActiveStyle, DefaultDrawStyle, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultInterfaceProperty, DefaultInternalStorageProperty, DefaultManualInputProperty, DefaultMergeProperty, DefaultMultiDocumentProperty, DefaultNoteProperty, DefaultObjectProperty, DefaultPackageProperty, DefaultPentagonArrowProperty, DefaultPortProperty, DefaultSwimlaneHorizontalProperty, DefaultSwimlanePropertyMap, DefaultSwimlaneVerticalProperty, DefaultTextProperty, DefaultTwoWayArrowProperty, DefaultUMLPropertyMap, DrawThemeColors, DrawTransforms, FlowchartSymbols, GEOMETRY_WITHOUT_TEXT, GEOMETRY_WITH_MULTIPLE_TEXT, GeometryComponent, GeometryShapeGenerator, GeometryThreshold, KEY_TO_TEXT_MANAGE, LINE_HIT_GEOMETRY_BUFFER, LINE_SNAPPING_BUFFER, LINE_SNAPPING_CONNECTOR_BUFFER, LineActiveGenerator, LineAutoCompleteGenerator, LineComponent, LineHandleKey, LineMarkerType, LineShape, MemorizeKey, MultipleTextGeometryCommonTextKeys, MultipleTextGeometryTextKeys, PlaitDrawElement, PlaitGeometry, PlaitLine, Q2C, ShapeDefaultSpace, SingleTextGenerator, StrokeStyle, SwimlaneSymbols, TableGenerator, TableSymbols, TextGenerator, UMLSymbols, WithLineAutoCompletePluginKey, alignElbowSegment, alignPoints, buildDefaultTextsByShape, createDefaultFlowchart, createDefaultGeometry, createGeometryElement, createGeometryElementWithText, createGeometryElementWithoutText, createLineElement, createMultipleTextGeometryElement, createTextElement, createUMLClassOrInterfaceGeometryElement, debugGenerator$1 as debugGenerator, deleteTextManage, drawBoundReaction, drawGeometry, drawLine, drawLineArrow, drawShape, editText, getAutoCompletePoints, getBasicPointers, getCenterPointsOnPolygon$1 as getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultBasicShapeProperty, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultTextPoints, getDefaultUMLProperty, getDrawDefaultStrokeColor, getElbowLineRouteOptions, getElbowPoints, getFillByElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryAlign, getGeometryPointers, getHitConnection, getHitConnectorPoint, getHitIndexOfAutoCompletePoint, getHitMultipleGeometryText, getHitShape, getIndexAndDeleteCountByKeyPoint, getLineDashByElement, getLineHandleRefPair, getLineMemorizedLatest, getLinePointers, getLinePoints, getLineTextRectangle, getLines, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getMidKeyPoints, getMiddlePoints, getMirrorDataPoints, getMultipleTextGeometryTextKeys, getNearestPoint, getNextRenderPoints, getNextSourceAndTargetPoints, getResizedPreviousAndNextPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedLineElements, getSelectedTableElements, getSnapResizingRef, getSnapResizingRefOptions, getSnappingRef, getSnappingShape, getSourceAndTargetRectangle, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getSwimlanePointers, getTextKey, getTextManage, getTextRectangle, getTextShapeProperty, getUMLPointers, getVectorByConnection, handleLineCreating, hasIllegalElbowPoint, insertElement, isDrawElementIncludeText, isDrawElementsIncludeText, isGeometryIncludeText, isHitDrawElement, isHitEdgeOfShape, isHitElementInside, isHitElementText, isHitLine, isHitLineText, isHitPolyLine, isInsideOfShape, isMultipleTextGeometry, isMultipleTextShape, isRectangleHitDrawElement, isRectangleHitElementText, isSelfLoop, isSingleSelectSwimlane, isSingleSelectTable, isSingleTextGeometry, isSingleTextShape, isTextExceedingBounds, isUpdatedHandleIndex, isUseDefaultOrthogonalRoute, memorizeLatestShape, memorizeLatestText, rerenderGeometryActive, setTextManage, traverseDrawShapes, withDraw, withLineAutoComplete };
+export { BasicShapes, DEFAULT_IMAGE_WIDTH, DEFAULT_TEXT_HEIGHT, 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, 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