@plait/draw 0.56.1 → 0.57.0

package/fesm2022/plait-draw.mjs

@@ -1,5 +1,5 @@
-import { ACTIVE_STROKE_WIDTH, ThemeColorMode, createDebugGenerator, Point, RectangleClient, getElementById, rotatePointsByElement, createG, arrowPoints, createPath, distanceBetweenPointAndPoint, drawLinearPath, rotate, distanceBetweenPointAndSegments, HIT_DISTANCE_BUFFER, isPolylineHitRectangle, rotateAntiPointsByElement, rotatePoints, depthFirstRecursion, PlaitBoard, getIsRecursionFunc, idCreator, catmullRomFitting, setStrokeLinecap, findElements, createMask, createRect, getSelectedElements, isPointInPolygon, getNearestPointBetweenPointAndSegments, isPointInEllipse, getNearestPointBetweenPointAndEllipse, getEllipseTangentSlope, getVectorFromPointAndSlope, drawRectangle, drawRoundRectangle, isPointInRoundRectangle, setPathStrokeLinecap, getCrossingPointsBetweenEllipseAndSegment, Direction, SNAPPING_STROKE_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, hasValidAngle, Path, PlaitNode, toViewBoxPoint, toHostPoint, isSelectionMoving, RgbaToHEX, getHitElementByPoint, getRectangleByElements, getSelectionAngle, rotatedDataPoints, isAxisChangedByAngle, getRectangleByAngle, getSnapRectangles, getTripleAxis, getMinPointDelta, SNAP_TOLERANCE, drawPointSnapLines, drawSolidLines, preventTouchMove, WritableClipboardOperationType, createClipboardContext, WritableClipboardType, addClipboardContext, setAngleForG, CursorClass, PlaitElement, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER, isMainPointer, throttleRAF, getAngleBetweenPoints, normalizeAngle, degreesToRadians, rotateElements, MERGING, ROTATE_HANDLE_CLASS_NAME, SELECTION_RECTANGLE_CLASS_NAME } from '@plait/core';
-import { removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, isSourceAndTargetIntersect, getPoints, DEFAULT_ROUTE_MARGIN, getPointByVectorComponent, getExtendPoint, getUnitVectorByPointAndPoint, Generator, RESIZE_HANDLE_DIAMETER, getPointOnPolyline, TRANSPARENT, getRectangleResizeHandleRefs, getRotatedResizeCursorClassByAngle, ROTATE_HANDLE_DISTANCE_TO_ELEMENT, ROTATE_HANDLE_SIZE, getMemorizedLatest, memorizeLatest, getCrossingPointsBetweenPointAndSegment, isPointOnSegment, getDirectionByPointOfRectangle, getDirectionFactor, getFirstTextManage, getDirectionByVector, getOppositeDirection, rotateVector, rotateVectorAnti90, getSourceAndTargetOuterRectangle, getNextPoint, normalizeShapePoints, getFirstTextEditor, PRIMARY_COLOR, CommonPluginElement, ActiveGenerator, canResize, WithTextPluginKey, drawPrimaryHandle, drawFillPrimaryHandle, isVirtualKey, isDelete, isSpaceHotkey, isCornerHandle, getIndexByResizeHandle, resetPointsAfterResize, withResize, drawHandle, getSymmetricHandleIndex, getResizeHandlePointByIndex, getDirectionFactorByDirectionComponent, isDndMode, isDrawingMode, getElementsText, acceptImageTypes, getElementOfFocusedImage, buildImage, isResizingByCondition, getRatioByPoint, getTextManages, ImageGenerator, ResizeHandle, addRotating, removeRotating, drawRotateHandle } from '@plait/common';
+import { ACTIVE_STROKE_WIDTH, ThemeColorMode, createDebugGenerator, Point, RectangleClient, getElementById, rotatePointsByElement, createG, arrowPoints, createPath, distanceBetweenPointAndPoint, drawLinearPath, rotate, distanceBetweenPointAndSegments, HIT_DISTANCE_BUFFER, isPolylineHitRectangle, rotateAntiPointsByElement, rotatePoints, depthFirstRecursion, PlaitBoard, getIsRecursionFunc, idCreator, catmullRomFitting, setStrokeLinecap, findElements, createMask, createRect, getSelectedElements, isPointInPolygon, getNearestPointBetweenPointAndSegments, isPointInEllipse, getNearestPointBetweenPointAndEllipse, getEllipseTangentSlope, getVectorFromPointAndSlope, drawRectangle, drawRoundRectangle, isPointInRoundRectangle, setPathStrokeLinecap, getCrossingPointsBetweenEllipseAndSegment, Direction, SNAPPING_STROKE_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, PlaitElement, hasValidAngle, Path, PlaitNode, toViewBoxPoint, toHostPoint, isSelectionMoving, RgbaToHEX, getHitElementByPoint, getRectangleByElements, getSelectionAngle, rotatedDataPoints, isAxisChangedByAngle, getRectangleByAngle, getSnapRectangles, getTripleAxis, getMinPointDelta, SNAP_TOLERANCE, drawPointSnapLines, drawSolidLines, 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 } from '@plait/core';
+import { removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, isSourceAndTargetIntersect, getPoints, DEFAULT_ROUTE_MARGIN, getPointByVectorComponent, getExtendPoint, getUnitVectorByPointAndPoint, Generator, RESIZE_HANDLE_DIAMETER, getPointOnPolyline, TRANSPARENT, getRectangleResizeHandleRefs, getRotatedResizeCursorClassByAngle, ROTATE_HANDLE_DISTANCE_TO_ELEMENT, ROTATE_HANDLE_SIZE, getMemorizedLatest, memorizeLatest, getCrossingPointsBetweenPointAndSegment, isPointOnSegment, getDirectionByPointOfRectangle, getDirectionFactor, getFirstTextManage, ActiveGenerator, getDirectionByVector, getOppositeDirection, rotateVector, rotateVectorAnti90, getSourceAndTargetOuterRectangle, getNextPoint, normalizeShapePoints, getFirstTextEditor, PRIMARY_COLOR, CommonPluginElement, canResize, WithTextPluginKey, drawPrimaryHandle, drawFillPrimaryHandle, isVirtualKey, isDelete, isSpaceHotkey, isCornerHandle, getIndexByResizeHandle, resetPointsAfterResize, withResize, drawHandle, getSymmetricHandleIndex, getResizeHandlePointByIndex, getDirectionFactorByDirectionComponent, isDndMode, isDrawingMode, getElementsText, acceptImageTypes, getElementOfFocusedImage, buildImage, isResizingByCondition, getRatioByPoint, getTextManages, ImageGenerator, ResizeHandle, addRotating, removeRotating, drawRotateHandle } from '@plait/common';
 import { Alignment, buildText, DEFAULT_FONT_SIZE, getTextSize, AlignEditor, TextManage } from '@plait/text';
 import { pointsOnBezierCurves } from 'points-on-curve';
 import * as i0 from '@angular/core';
@@ -57,7 +57,17 @@ var FlowchartSymbols;
     FlowchartSymbols["noteCurlyRight"] = "noteCurlyRight";
     FlowchartSymbols["noteCurlyLeft"] = "noteCurlyLeft";
     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 = {}));
 const PlaitGeometry = {};
 
 const ShapeDefaultSpace = {
@@ -178,7 +188,8 @@ const DefaultFlowchartPropertyMap = {
     [FlowchartSymbols.internalStorage]: DefaultInternalStorageProperty,
     [FlowchartSymbols.noteCurlyLeft]: DefaultNoteProperty,
     [FlowchartSymbols.noteCurlyRight]: DefaultNoteProperty,
-    [FlowchartSymbols.noteSquare]: DefaultNoteProperty
+    [FlowchartSymbols.noteSquare]: DefaultNoteProperty,
+    [FlowchartSymbols.display]: DefaultFlowchartProperty
 };
 const LINE_HIT_GEOMETRY_BUFFER = 10;
 const LINE_SNAPPING_BUFFER = 6;
@@ -2059,7 +2070,7 @@ const StarEngine = createPolygonEngine({
             height,
             width: width > 0 ? width : 0,
             x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + originWidth / 4,
-            y: elementRectangle.y + (elementRectangle.height * 1) / 5 + ((elementRectangle.height * 4) / 5 - height) / 2
+            y: elementRectangle.y + (elementRectangle.height * 1) / 6 + ((elementRectangle.height * 4) / 5 - height) / 2
         };
     }
 });
@@ -3068,6 +3079,101 @@ const NoteSquareEngine = {
     }
 };
 
+const getDisplayPoints = (rectangle) => {
+    return [
+        [rectangle.x, rectangle.y + rectangle.height / 2],
+        [rectangle.x + rectangle.width * 0.15, rectangle.y],
+        [rectangle.x + rectangle.width, rectangle.y],
+        [rectangle.x + rectangle.width, rectangle.y + rectangle.height],
+        [rectangle.x + rectangle.width * 0.15, rectangle.y + rectangle.height]
+    ];
+};
+const DisplayEngine = {
+    draw(board, rectangle, options) {
+        const rs = PlaitBoard.getRoughSVG(board);
+        const shape = rs.path(`M${rectangle.x + rectangle.width * 0.15} ${rectangle.y} 
+            H${rectangle.x + rectangle.width - rectangle.width * 0.1} 
+            A ${rectangle.width * 0.1} ${rectangle.height / 2}, 0, 0, 1,${rectangle.x +
+            rectangle.width -
+            rectangle.width * 0.1} ${rectangle.y + rectangle.height}
+            H${rectangle.x + rectangle.width * 0.15}
+            L${rectangle.x} ${rectangle.y + rectangle.height / 2}
+            Z
+            `, { ...options, fillStyle: 'solid' });
+        setStrokeLinecap(shape, 'round');
+        return shape;
+    },
+    isInsidePoint(rectangle, point) {
+        const polygonPoints = [
+            [rectangle.x, rectangle.y + rectangle.height / 2],
+            [rectangle.x + rectangle.width * 0.15, rectangle.y],
+            [rectangle.x + rectangle.width - rectangle.width * 0.1, rectangle.y],
+            [rectangle.x + rectangle.width - rectangle.width * 0.1, rectangle.y + rectangle.height],
+            [rectangle.x + rectangle.width * 0.15, rectangle.y + rectangle.height]
+        ];
+        const isInPolygon = isPointInPolygon(point, polygonPoints);
+        const isInEllipse = isPointInEllipse(point, [rectangle.x + rectangle.width - rectangle.width * 0.1, rectangle.y + rectangle.height / 2], rectangle.width * 0.1, rectangle.height / 2);
+        return isInPolygon || isInEllipse;
+    },
+    getCornerPoints(rectangle) {
+        return RectangleClient.getCornerPoints(rectangle);
+    },
+    getNearestPoint(rectangle, point) {
+        const nearestPoint = getNearestPointBetweenPointAndSegments(point, getDisplayPoints(rectangle));
+        if (nearestPoint[0] > rectangle.x + rectangle.width - rectangle.width * 0.1) {
+            return getNearestPointBetweenPointAndEllipse(point, [rectangle.x + rectangle.width - rectangle.width * 0.1, rectangle.y + rectangle.height / 2], rectangle.width * 0.1, rectangle.height / 2);
+        }
+        return nearestPoint;
+    },
+    getTangentVectorByConnectionPoint(rectangle, pointOfRectangle) {
+        const connectionPoint = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        const centerPoint = [rectangle.x + rectangle.width - rectangle.width * 0.1, rectangle.y + rectangle.height / 2];
+        const point = [connectionPoint[0] - centerPoint[0], -(connectionPoint[1] - centerPoint[1])];
+        const a = rectangle.width * 0.1;
+        const b = rectangle.height / 2;
+        const slope = getEllipseTangentSlope(point[0], point[1], a, b);
+        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 - strokeWidth * 2 - elementRectangle.width * 0.25;
+        return {
+            width: width > 0 ? width : 0,
+            height: height,
+            x: elementRectangle.x + strokeWidth + elementRectangle.width * 0.15,
+            y: elementRectangle.y + (elementRectangle.height - height) / 2
+        };
+    }
+};
+
+const TableEngine = {
+    draw(board, rectangle, options) {
+        // TODO: draw table
+        const g = createG();
+        return g;
+    },
+    isInsidePoint(rectangle, point) {
+        return false;
+    },
+    getCornerPoints(rectangle) {
+        return RectangleClient.getCornerPoints(rectangle);
+    },
+    getNearestPoint(rectangle, point) {
+        return [0, 0];
+    },
+    getConnectorPoints(rectangle) {
+        return [
+            [0, 0],
+            [0, 0]
+        ];
+    }
+};
+
 const ShapeEngineMap = {
     [BasicShapes.rectangle]: RectangleEngine,
     [BasicShapes.diamond]: DiamondEngine,
@@ -3112,7 +3218,11 @@ const ShapeEngineMap = {
     [FlowchartSymbols.multiDocument]: MultiDocumentEngine,
     [FlowchartSymbols.noteCurlyLeft]: NoteCurlyLeftEngine,
     [FlowchartSymbols.noteCurlyRight]: NoteCurlyRightEngine,
-    [FlowchartSymbols.noteSquare]: NoteSquareEngine
+    [FlowchartSymbols.noteSquare]: NoteSquareEngine,
+    [FlowchartSymbols.display]: DisplayEngine,
+    [SwimlaneSymbols.swimlaneHorizontal]: TableEngine,
+    [SwimlaneSymbols.swimlaneVertical]: TableEngine,
+    [TableSymbols.table]: TableEngine
 };
 const getEngine = (shape) => {
     return ShapeEngineMap[shape];
@@ -3334,9 +3444,21 @@ const createDefaultGeometry = (board, points, shape) => {
         ...memorizedLatest.geometryProperties
     }, { ...memorizedLatest.textProperties, textHeight });
 };
-const editText = (element) => {
+const editText = (board, element) => {
     const textManage = getFirstTextManage(element);
-    textManage.edit();
+    textManage.edit(() => {
+        // delay to avoid blinking
+        setTimeout(() => {
+            rerenderGeometryActive(board, element);
+        }, 200);
+    });
+    rerenderGeometryActive(board, element);
+};
+const rerenderGeometryActive = (board, element) => {
+    const elementRef = PlaitElement.getElementRef(element);
+    const activeGenerator = elementRef.getGenerator(ActiveGenerator.key);
+    const selected = getSelectedElements(board).includes(element);
+    activeGenerator.processDrawing(element, PlaitBoard.getElementActiveHost(board), { selected });
 };
 
 const getStrokeWidthByElement = (element) => {
@@ -3909,13 +4031,13 @@ class LineAutoCompleteGenerator extends Generator {
 }
 
 class GeometryComponent extends CommonPluginElement {
-    constructor() {
-        super(...arguments);
-        this.destroy$ = new Subject();
-    }
     get textManage() {
         return this.getTextManages()[0];
     }
+    constructor() {
+        super();
+        this.destroy$ = new Subject();
+    }
     initializeGenerator() {
         this.activeGenerator = new ActiveGenerator(this.board, {
             getStrokeWidth: () => {
@@ -3947,6 +4069,7 @@ class GeometryComponent extends CommonPluginElement {
         this.shapeGenerator = new GeometryShapeGenerator(this.board);
         this.initializeTextManage();
         this.getRef().addGenerator(LineAutoCompleteGenerator.key, this.lineAutoCompleteGenerator);
+        this.getRef().addGenerator(ActiveGenerator.key, this.activeGenerator);
     }
     ngOnInit() {
         super.ngOnInit();
@@ -4033,7 +4156,7 @@ class GeometryComponent extends CommonPluginElement {
         this.lineAutoCompleteGenerator.destroy();
         this.destroyTextManages();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GeometryComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GeometryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: GeometryComponent, isStandalone: true, selector: "plait-draw-geometry", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GeometryComponent, decorators: [{
@@ -4044,7 +4167,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 class LineActiveGenerator extends Generator {
     constructor() {
@@ -4123,7 +4246,7 @@ const debugKey$2 = 'debug:plait:line-turning';
 const debugGenerator$2 = createDebugGenerator(debugKey$2);
 class LineComponent extends CommonPluginElement {
     constructor() {
-        super(...arguments);
+        super();
         this.destroy$ = new Subject();
         this.boundedElements = {};
     }
@@ -4267,7 +4390,7 @@ class LineComponent extends CommonPluginElement {
         this.destroy$.complete();
         this.destroyTextManages();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LineComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: LineComponent, isStandalone: true, selector: "plait-draw-line", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LineComponent, decorators: [{
@@ -4278,7 +4401,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 const withDrawHotkey = (board) => {
     const { keyDown, dblClick } = board;
@@ -4293,7 +4416,7 @@ const withDrawHotkey = (board) => {
             isSingleSelection &&
             PlaitDrawElement.isGeometry(targetElement)) {
             event.preventDefault();
-            editText(targetElement);
+            editText(board, targetElement);
             return;
         }
         keyDown(event);
@@ -4304,7 +4427,7 @@ const withDrawHotkey = (board) => {
             const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
             const hitElement = getHitElementByPoint(board, point);
             if (hitElement && PlaitDrawElement.isGeometry(hitElement)) {
-                editText(hitElement);
+                editText(board, hitElement);
             }
         }
         dblClick(event);
@@ -5413,13 +5536,13 @@ function editHandle(board, element, manageIndex, isFirstEdit = false) {
 }
 
 class ImageComponent extends CommonPluginElement {
-    constructor() {
-        super(...arguments);
-        this.destroy$ = new Subject();
-    }
     get activeGenerator() {
         return this.imageGenerator.componentRef.instance.activeGenerator;
     }
+    constructor() {
+        super();
+        this.destroy$ = new Subject();
+    }
     initializeGenerator() {
         this.imageGenerator = new ImageGenerator(this.board, {
             getRectangle: (element) => {
@@ -5475,7 +5598,7 @@ class ImageComponent extends CommonPluginElement {
         this.imageGenerator.destroy();
         this.lineAutoCompleteGenerator.destroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ImageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ImageComponent, isStandalone: true, selector: "plait-draw-geometry", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ImageComponent, decorators: [{
@@ -5486,7 +5609,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     standalone: true
                 }]
-        }] });
+        }], ctorParameters: () => [] });
 
 const withLineAutoCompleteReaction = (board) => {
     const { pointerMove } = board;
@@ -5760,6 +5883,59 @@ const withDrawRotate = (board) => {
     return board;
 };
 
+class TableComponent extends CommonPluginElement {
+    constructor() {
+        super();
+    }
+    initializeGenerator() {
+        this.activeGenerator = new ActiveGenerator(this.board, {
+            getStrokeWidth: () => {
+                return ACTIVE_STROKE_WIDTH;
+            },
+            getStrokeOpacity: () => {
+                return 1;
+            },
+            getRectangle: (element) => {
+                return RectangleClient.getRectangleByPoints(element.points);
+            },
+            hasResizeHandle: () => {
+                return canResize(this.board, this.element);
+            }
+        });
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.initializeGenerator();
+    }
+    onContextChanged(value, previous) { }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TableComponent, isStandalone: true, selector: "plait-draw-table", usesInheritance: true, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'plait-draw-table',
+                    template: ``,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true
+                }]
+        }], ctorParameters: () => [] });
+
+const withTable = (board) => {
+    const { drawElement } = board;
+    board.drawElement = (context) => {
+        if (PlaitDrawElement.isGeometry(context.element) &&
+            [SwimlaneSymbols.swimlaneHorizontal, SwimlaneSymbols.swimlaneVertical].includes(context.element.shape)) {
+            return TableComponent;
+        }
+        return drawElement(context);
+    };
+    return board;
+};
+
 const withDraw = (board) => {
     const { drawElement, getRectangle, isRectangleHit, isHit, isInsidePoint, isMovable, isAlign, getRelatedFragment } = board;
     board.drawElement = (context) => {
@@ -5855,12 +6031,12 @@ const withDraw = (board) => {
         });
         return getRelatedFragment([...elements, ...activeLines], originData);
     };
-    return withDrawResize(withLineResize(withLineTextMove(withLineAutoCompleteReaction(withLineText(withLineBoundReaction(withGeometryResize(withDrawRotate(withLineCreateByDraw(withLineAutoComplete(withGeometryCreateByDrag(withGeometryCreateByDrawing(withDrawFragment(withDrawHotkey(board))))))))))))));
+    return withTable(withDrawResize(withLineAutoCompleteReaction(withLineBoundReaction(withLineResize(withLineTextMove(withLineText(withGeometryResize(withDrawRotate(withLineCreateByDraw(withLineAutoComplete(withGeometryCreateByDrag(withGeometryCreateByDrawing(withDrawFragment(withDrawHotkey(board)))))))))))))));
 };
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BasicShapes, DEFAULT_IMAGE_WIDTH, DefaultArrowProperty, DefaultBasicShapeProperty, DefaultBasicShapePropertyMap, DefaultCloudProperty, DefaultConnectorProperty, DefaultDataBaseProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultDocumentProperty, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultGeometryActiveStyle, DefaultGeometryStyle, DefaultInternalStorageProperty, DefaultManualInputProperty, DefaultMergeProperty, DefaultMultiDocumentProperty, DefaultNoteProperty, DefaultPentagonArrowProperty, DefaultTextProperty, DefaultTwoWayArrowProperty, DrawThemeColors, DrawTransforms, FlowchartSymbols, GeometryComponent, GeometryThreshold, LINE_HIT_GEOMETRY_BUFFER, LINE_SNAPPING_BUFFER, LINE_SNAPPING_CONNECTOR_BUFFER, LineComponent, LineHandleKey, LineMarkerType, LineShape, MemorizeKey, PlaitDrawElement, PlaitGeometry, PlaitLine, Q2C, ShapeDefaultSpace, StrokeStyle, WithLineAutoCompletePluginKey, alignElbowSegment, alignPoints, createDefaultFlowchart, createDefaultGeometry, createGeometryElement, createLineElement, createTextElement, drawBoundReaction, drawGeometry, drawLine, drawLineArrow, editText, getAutoCompletePoints, getBasicPointers, getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultBasicShapeProperty, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultTextPoints, getDrawDefaultStrokeColor, getElbowLineRouteOptions, getElbowPoints, getFillByElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryPointers, getHitConnection, getHitConnectorPoint, getHitIndexOfAutoCompletePoint, getIndexAndDeleteCountByKeyPoint, getLineDashByElement, getLineHandleRefPair, getLineMemorizedLatest, getLinePointers, getLinePoints, getLineTextRectangle, getLines, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getMidKeyPoints, getMiddlePoints, getMirrorDataPoints, getNearestPoint, getNextRenderPoints, getNextSourceAndTargetPoints, getResizedPreviousAndNextPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedLineElements, getSourceAndTargetRectangle, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getTextRectangle, getTextShapeProperty, getVectorByConnection, handleLineCreating, hasIllegalElbowPoint, insertElement, isHitDrawElement, isHitEdgeOfShape, isHitElementInside, isHitLine, isHitLineText, isHitPolyLine, isInsideOfShape, isRectangleHitDrawElement, isSelfLoop, isTextExceedingBounds, isUpdatedHandleIndex, isUseDefaultOrthogonalRoute, memorizeLatestShape, memorizeLatestText, withDraw, withLineAutoComplete };
+export { BasicShapes, DEFAULT_IMAGE_WIDTH, DefaultArrowProperty, DefaultBasicShapeProperty, DefaultBasicShapePropertyMap, DefaultCloudProperty, DefaultConnectorProperty, DefaultDataBaseProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultDocumentProperty, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultGeometryActiveStyle, DefaultGeometryStyle, DefaultInternalStorageProperty, DefaultManualInputProperty, DefaultMergeProperty, DefaultMultiDocumentProperty, DefaultNoteProperty, DefaultPentagonArrowProperty, DefaultTextProperty, DefaultTwoWayArrowProperty, DrawThemeColors, DrawTransforms, FlowchartSymbols, GeometryComponent, GeometryThreshold, LINE_HIT_GEOMETRY_BUFFER, LINE_SNAPPING_BUFFER, LINE_SNAPPING_CONNECTOR_BUFFER, LineComponent, LineHandleKey, LineMarkerType, LineShape, MemorizeKey, PlaitDrawElement, PlaitGeometry, PlaitLine, Q2C, ShapeDefaultSpace, StrokeStyle, SwimlaneSymbols, TableSymbols, WithLineAutoCompletePluginKey, alignElbowSegment, alignPoints, createDefaultFlowchart, createDefaultGeometry, createGeometryElement, createLineElement, createTextElement, drawBoundReaction, drawGeometry, drawLine, drawLineArrow, editText, getAutoCompletePoints, getBasicPointers, getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultBasicShapeProperty, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultTextPoints, getDrawDefaultStrokeColor, getElbowLineRouteOptions, getElbowPoints, getFillByElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryPointers, getHitConnection, getHitConnectorPoint, getHitIndexOfAutoCompletePoint, getIndexAndDeleteCountByKeyPoint, getLineDashByElement, getLineHandleRefPair, getLineMemorizedLatest, getLinePointers, getLinePoints, getLineTextRectangle, getLines, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getMidKeyPoints, getMiddlePoints, getMirrorDataPoints, getNearestPoint, getNextRenderPoints, getNextSourceAndTargetPoints, getResizedPreviousAndNextPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedLineElements, getSourceAndTargetRectangle, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getTextRectangle, getTextShapeProperty, getVectorByConnection, handleLineCreating, hasIllegalElbowPoint, insertElement, isHitDrawElement, isHitEdgeOfShape, isHitElementInside, isHitLine, isHitLineText, isHitPolyLine, isInsideOfShape, isRectangleHitDrawElement, isSelfLoop, isTextExceedingBounds, isUpdatedHandleIndex, isUseDefaultOrthogonalRoute, memorizeLatestShape, memorizeLatestText, rerenderGeometryActive, withDraw, withLineAutoComplete };
 //# sourceMappingURL=plait-draw.mjs.map