feat(draw): init swimlane

.changeset/strong-kiwis-smell.md

@@ -0,0 +1,7 @@
+---
+'@plait/draw': minor
+---
+
+init swimlane
+
+support add/remove swimlane row/column

packages/draw/src/constants/draw.ts

@@ -0,0 +1 @@
+export const DEFAULT_TEXT_HEIGHT = 20;

packages/draw/src/constants/index.ts

@@ -2,3 +2,4 @@ export * from './geometry';
 export * from './pointer';
 export * from './image';
 export * from './theme';
+export * from './draw';

packages/draw/src/engines/table/table.ts

@@ -15,7 +15,7 @@ export const TableEngine: ShapeEngine<PlaitTable, PlaitTableDrawOptions, PlaitDr
         const tableTopBorder = drawLine(rs, [x, y], [x + width, y], roughOptions);
         const tableLeftBorder = drawLine(rs, [x, y], [x, y + height], roughOptions);
         g.append(tableTopBorder, tableLeftBorder);
-        const pointCells = getCellsWithPoints({ ...options?.element } as PlaitTable);
+        const pointCells = getCellsWithPoints(board, { ...options?.element } as PlaitTable);
         pointCells.forEach(cell => {
             const rectangle = RectangleClient.getRectangleByPoints(cell.points!);
             const { x, y, width, height } = rectangle;
@@ -39,7 +39,7 @@ export const TableEngine: ShapeEngine<PlaitTable, PlaitTableDrawOptions, PlaitDr
         return RectangleClient.getEdgeCenterPoints(rectangle);
     },
     getTextRectangle(element: PlaitTable, options?: PlaitDrawShapeText) {
-        const cell = getCellWithPoints(element, options!.key);
+        const cell = getCellWithPoints(options?.board!, element, options!.key);
         if (PlaitTableElement.isVerticalText(cell)) {
             return getVerticalTextRectangle(cell);
         } else {

packages/draw/src/generators/table.generator.ts

@@ -1,19 +1,19 @@
 import { TableSymbols } from '../interfaces';
 import { Generator } from '@plait/common';
-import { RectangleClient } from '@plait/core';
+import { PlaitElement, RectangleClient } from '@plait/core';
 import { PlaitTable } from '../interfaces/table';
 import { getEngine } from '../engines';
 import { getDrawDefaultStrokeColor } from '../utils';
 
 export interface TableData {}
 
-export class TableGenerator extends Generator<PlaitTable, TableData> {
-    canDraw(element: PlaitTable, data: TableData): boolean {
+export class TableGenerator<T extends PlaitElement = PlaitTable> extends Generator<T, TableData> {
+    canDraw(element: T, data: TableData): boolean {
         return true;
     }
 
-    draw(element: PlaitTable, data: TableData) {
-        const rectangle = RectangleClient.getRectangleByPoints(element.points);
+    draw(element: T, data: TableData) {
+        const rectangle = RectangleClient.getRectangleByPoints(element.points!);
         return getEngine(TableSymbols.table).draw(
             this.board,
             rectangle,

packages/draw/src/generators/text.generator.ts

@@ -10,10 +10,11 @@ export interface PlaitDrawShapeText extends EngineExtraData {
     key: string;
     text: ParagraphElement;
     textHeight: number;
+    board?: PlaitBoard;
 }
 
 export interface TextGeneratorOptions<T> {
-    onValueChangeHandle: (textChangeRef: TextManageRef, text: PlaitDrawShapeText) => void;
+    onValueChangeHandle: (element: T, textChangeRef: TextManageRef, text: PlaitDrawShapeText) => void;
     getRenderRectangle?: (element: T, text: PlaitDrawShapeText) => RectangleClient;
     getMaxWidth?: () => number;
 }
@@ -97,11 +98,34 @@ export class TextGenerator<T extends PlaitElement = PlaitGeometry> {
         this.element = element;
         ELEMENT_TO_TEXT_MANAGES.set(this.element, this.textManages);
         const centerPoint = RectangleClient.getCenterPoint(this.board.getRectangle(this.element)!);
+        const textPlugins = ((this.board as PlaitOptionsBoard).getPluginOptions<WithTextOptions>(WithTextPluginKey) || {}).textPlugins;
+        const removedTexts = previousDrawShapeTexts.filter(value => {
+            return !currentDrawShapeTexts.find(item => item.key === value.key);
+        });
+        if (removedTexts.length) {
+            removedTexts.forEach(item => {
+                const textManage = getTextManage(item.key);
+                const index = this.textManages.findIndex(value => value === textManage);
+                if (index > -1 && item.text && item.textHeight) {
+                    this.textManages.splice(index, 1);
+                }
+                textManage?.destroy();
+                deleteTextManage(item.key);
+            });
+        }
         currentDrawShapeTexts.forEach(drawShapeText => {
-            const textManage = getTextManage(this.getTextKey(drawShapeText));
-            if (drawShapeText.text && textManage) {
-                textManage.updateText(drawShapeText.text);
-                textManage.updateRectangle();
+            if (drawShapeText.text) {
+                let textManage = getTextManage(this.getTextKey(drawShapeText));
+                if (!textManage) {
+                    textManage = this.createTextManage(drawShapeText, textPlugins);
+                    setTextManage(drawShapeText.key, textManage);
+                    textManage.draw(drawShapeText.text);
+                    elementG.append(textManage.g);
+                    this.textManages.push(textManage);
+                } else {
+                    textManage.updateText(drawShapeText.text);
+                    textManage.updateRectangle();
+                }
                 (this.element.angle || this.element.angle === 0) && textManage.updateAngle(centerPoint, this.element.angle);
             }
         });
@@ -135,7 +159,7 @@ export class TextGenerator<T extends PlaitElement = PlaitGeometry> {
     }
 
     onValueChangeHandle(textManageRef: TextManageRef, text: PlaitDrawShapeText) {
-        return this.options.onValueChangeHandle(textManageRef, text);
+        return this.options.onValueChangeHandle(this.element, textManageRef, text);
     }
 
     getMaxWidth(text: PlaitDrawShapeText) {
@@ -148,6 +172,8 @@ export class TextGenerator<T extends PlaitElement = PlaitGeometry> {
         });
         this.textManages = [];
         ELEMENT_TO_TEXT_MANAGES.delete(this.element);
-        KEY_TO_TEXT_MANAGE.clear();
+        this.texts.forEach(item => {
+            deleteTextManage(item.key);
+        });
     }
 }

packages/draw/src/geometry.component.ts

@@ -123,23 +123,23 @@ export class GeometryComponent extends CommonElementFlavour<PlaitCommonGeometry,
     }
 
     initializeTextManage() {
-        const onTextValueChangeHandle = (textManageRef: TextManageRef, text: PlaitDrawShapeText) => {
+        const onTextValueChangeHandle = (element: PlaitCommonGeometry, textManageRef: TextManageRef, text: PlaitDrawShapeText) => {
             const height = textManageRef.height / this.board.viewport.zoom;
             const width = textManageRef.width / this.board.viewport.zoom;
             if (textManageRef.newValue) {
-                if (isMultipleTextGeometry(this.element)) {
-                    DrawTransforms.setDrawShapeText(this.board, this.element, {
+                if (isMultipleTextGeometry(element)) {
+                    DrawTransforms.setDrawShapeText(this.board, element, {
                         key: text.key,
                         text: textManageRef.newValue,
                         textHeight: height
                     });
                 } else {
-                    DrawTransforms.setText(this.board, this.element as PlaitGeometry, textManageRef.newValue, width, height);
+                    DrawTransforms.setText(this.board, element as PlaitGeometry, textManageRef.newValue, width, height);
                 }
             } else {
-                DrawTransforms.setTextSize(this.board, this.element as PlaitGeometry, width, height);
+                DrawTransforms.setTextSize(this.board, element as PlaitGeometry, width, height);
             }
-            textManageRef.operations && memorizeLatestText(this.element, textManageRef.operations);
+            textManageRef.operations && memorizeLatestText(element, textManageRef.operations);
         };
 
         if (isMultipleTextGeometry(this.element)) {

packages/draw/src/interfaces/geometry.ts

@@ -79,6 +79,8 @@ export enum MultipleTextGeometryCommonTextKeys {
 
 export type GeometryShapes = BasicShapes | FlowchartSymbols | SwimlaneSymbols | UMLSymbols;
 
+export type SwimlaneDirection = 'horizontal' | 'vertical';
+
 export interface PlaitCommonGeometry extends PlaitElement {
     points: [Point, Point];
     type: 'geometry';

packages/draw/src/interfaces/index.ts

@@ -1,6 +1,4 @@
-import { ParagraphElement } from '@plait/text';
-import { EngineExtraData } from './engine';
-import { BasicShapes, FlowchartSymbols, GeometryShapes, PlaitGeometry, TableSymbols, UMLSymbols } from './geometry';
+import { BasicShapes, FlowchartSymbols, GeometryShapes, PlaitGeometry, SwimlaneSymbols, TableSymbols, UMLSymbols } from './geometry';
 import { PlaitImage } from './image';
 import { PlaitLine } from './line';
 import { PlaitTable } from './table';
@@ -50,6 +48,15 @@ export const PlaitDrawElement = {
     isUML: (value: any) => {
         return Object.keys(UMLSymbols).includes(value.shape);
     },
+    isSwimlane: (value: any) => {
+        return Object.keys(SwimlaneSymbols).includes(value.shape);
+    },
+    isVerticalSwimlane: (value: any) => {
+        return Object.keys(SwimlaneSymbols).includes(value.shape) && value.shape === SwimlaneSymbols.swimlaneVertical;
+    },
+    isHorizontalSwimlane: (value: any) => {
+        return Object.keys(SwimlaneSymbols).includes(value.shape) && value.shape === SwimlaneSymbols.swimlaneHorizontal;
+    },
     isUMLClassOrInterface: (value: any) => {
         return false;
     }

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

@@ -19,6 +19,7 @@ import { isHitDrawElement, isHitElementInside, isRectangleHitDrawElement } from
 import { getLinePoints, getLineTextRectangle } from '../utils/line/line-basic';
 import { withDrawRotate } from './with-draw-rotate';
 import { withTable } from './with-table';
+import { withSwimlane } from './with-swimlane';
 
 export const withDraw = (board: PlaitBoard) => {
     const { drawElement, getRectangle, isRectangleHit, isHit, isInsidePoint, isMovable, isAlign, getRelatedFragment } = board;
@@ -125,19 +126,21 @@ export const withDraw = (board: PlaitBoard) => {
         return getRelatedFragment([...elements, ...activeLines], originData);
     };
 
-    return withTable(
-        withDrawResize(
-            withLineAutoCompleteReaction(
-                withLineBoundReaction(
-                    withLineResize(
-                        withLineTextMove(
-                            withLineText(
-                                withGeometryResize(
-                                    withDrawRotate(
-                                        withLineCreateByDraw(
-                                            withLineAutoComplete(
-                                                withGeometryCreateByDrag(
-                                                    withGeometryCreateByDrawing(withDrawFragment(withDrawHotkey(board)))
+    return withSwimlane(
+        withTable(
+            withDrawResize(
+                withLineAutoCompleteReaction(
+                    withLineBoundReaction(
+                        withLineResize(
+                            withLineTextMove(
+                                withLineText(
+                                    withGeometryResize(
+                                        withDrawRotate(
+                                            withLineCreateByDraw(
+                                                withLineAutoComplete(
+                                                    withGeometryCreateByDrag(
+                                                        withGeometryCreateByDrawing(withDrawFragment(withDrawHotkey(board)))
+                                                    )
                                                 )
                                             )
                                         )

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

@@ -0,0 +1,26 @@
+import { PlaitPluginElementContext } from '@plait/core';
+import { PlaitDrawElement, PlaitSwimlane } from '../interfaces';
+import { buildSwimlaneTable } from '../utils/swimlane';
+import { PlaitTableBoard } from './with-table';
+import { PlaitTable } from '../interfaces/table';
+import { TableComponent } from '../table.component';
+
+export const withSwimlane = (board: PlaitTableBoard) => {
+    const { drawElement, buildTable } = board;
+
+    board.drawElement = (context: PlaitPluginElementContext) => {
+        if (PlaitDrawElement.isSwimlane(context.element)) {
+            return TableComponent;
+        }
+        return drawElement(context);
+    };
+
+    board.buildTable = (element: PlaitTable) => {
+        if (PlaitDrawElement.isSwimlane(element)) {
+            return buildSwimlaneTable(element as PlaitSwimlane);
+        }
+        return buildTable(element);
+    };
+
+    return board;
+};

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

@@ -1,5 +1,5 @@
 import { TableComponent } from '../table.component';
-import { PlaitTableElement } from '../interfaces/table';
+import { PlaitTable, PlaitTableElement } from '../interfaces/table';
 import {
     PlaitBoard,
     PlaitPluginElementContext,
@@ -14,17 +14,23 @@ import {
 } from '@plait/core';
 import { editCell, getHitCell } from '../utils/table';
 
+export interface PlaitTableBoard extends PlaitBoard {
+    buildTable: (element: PlaitTable) => PlaitTable;
+}
+
 export const withTable = (board: PlaitBoard) => {
-    const { drawElement, getRectangle, isRectangleHit, isHit, isMovable, getDeletedFragment, dblClick } = board;
-
-    board.drawElement = (context: PlaitPluginElementContext) => {
+    const tableBoard = board as PlaitTableBoard;
+
+    const { drawElement, getRectangle, isRectangleHit, isHit, isMovable, getDeletedFragment, dblClick } = tableBoard;
+
+    tableBoard.drawElement = (context: PlaitPluginElementContext) => {
         if (PlaitTableElement.isTable(context.element)) {
             return TableComponent;
         }
         return drawElement(context);
     };
 
-    board.getDeletedFragment = (data: PlaitElement[]) => {
+    tableBoard.getDeletedFragment = (data: PlaitElement[]) => {
         const elements = getSelectedElements(board);
         if (elements.length) {
             const tableElements = elements.filter(value => PlaitTableElement.isTable(value));
@@ -33,51 +39,55 @@ export const withTable = (board: PlaitBoard) => {
         return getDeletedFragment(data);
     };
 
-    board.isHit = (element, point) => {
+    tableBoard.isHit = (element, point) => {
         if (PlaitTableElement.isTable(element)) {
             const client = RectangleClient.getRectangleByPoints(element.points);
             return RectangleClient.isPointInRectangle(client, point);
         }
         return isHit(element, point);
     };
 
-    board.getRectangle = (element: PlaitElement) => {
+    tableBoard.getRectangle = (element: PlaitElement) => {
         if (PlaitTableElement.isTable(element)) {
             return RectangleClient.getRectangleByPoints(element.points);
         }
         return getRectangle(element);
     };
 
-    board.isMovable = (element: PlaitElement) => {
+    tableBoard.isMovable = (element: PlaitElement) => {
         if (PlaitTableElement.isTable(element)) {
             return true;
         }
 
         return isMovable(element);
     };
 
-    board.isRectangleHit = (element: PlaitElement, selection: Selection) => {
+    tableBoard.isRectangleHit = (element: PlaitElement, selection: Selection) => {
         if (PlaitTableElement.isTable(element)) {
             const rangeRectangle = RectangleClient.getRectangleByPoints([selection.anchor, selection.focus]);
             return isPolylineHitRectangle(element.points, rangeRectangle);
         }
         return isRectangleHit(element, selection);
     };
 
-    board.dblClick = (event: MouseEvent) => {
+    tableBoard.dblClick = (event: MouseEvent) => {
         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)) {
-                const hitCell = getHitCell(hitElement, point);
+                const hitCell = getHitCell(tableBoard, hitElement, point);
                 if (hitCell && hitCell.text && hitCell.textHeight) {
                     editCell(hitCell);
                 }
             }
         }
         dblClick(event);
     };
-
-    return board;
+
+    tableBoard.buildTable = (element: PlaitTable) => {
+        return element;
+    };
+
+    return tableBoard;
 };