@plait/draw 0.58.0 → 0.60.0

package/fesm2022/plait-draw.mjs

@@ -1,5 +1,5 @@
-import { ACTIVE_STROKE_WIDTH, ThemeColorMode, RectangleClient, idCreator, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, rotateAntiPointsByElement, depthFirstRecursion, PlaitBoard, getIsRecursionFunc, createG, SNAPPING_STROKE_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, createDebugGenerator, Point, arrowPoints, createPath, distanceBetweenPointAndPoint, drawLinearPath, rotate, catmullRomFitting, setStrokeLinecap, findElements, createMask, createRect, PlaitElement, getSelectedElements, getElementById, rotatePointsByElement, distanceBetweenPointAndSegments, HIT_DISTANCE_BUFFER, isPolylineHitRectangle, Path, Direction, PlaitNode, hasValidAngle, toViewBoxPoint, toHostPoint, rotatePoints, getRectangleByElements, getSelectionAngle, rotatedDataPoints, isAxisChangedByAngle, isSelectionMoving, drawRectangle, getRectangleByAngle, getSnapRectangles, getTripleAxis, getMinPointDelta, SNAP_TOLERANCE, drawPointSnapLines, drawSolidLines, isPointInPolygon, getNearestPointBetweenPointAndSegments, isPointInEllipse, getNearestPointBetweenPointAndEllipse, getEllipseTangentSlope, getVectorFromPointAndSlope, drawRoundRectangle, isPointInRoundRectangle, setPathStrokeLinecap, getCrossingPointsBetweenEllipseAndSegment, drawLine as drawLine$1, RgbaToHEX, getHitElementByPoint, preventTouchMove, WritableClipboardOperationType, createClipboardContext, WritableClipboardType, addClipboardContext, setAngleForG, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER, isMainPointer, throttleRAF, getAngleBetweenPoints, normalizeAngle, degreesToRadians, rotateElements, MERGING, ROTATE_HANDLE_CLASS_NAME, SELECTION_RECTANGLE_CLASS_NAME, isSelectedElement } from '@plait/core';
-import { WithTextPluginKey, ELEMENT_TO_TEXT_MANAGES, getMemorizedLatest, memorizeLatest, getTextEditors, Generator, removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, getExtendPoint, getUnitVectorByPointAndPoint, getPointByVectorComponent, getPointOnPolyline, RESIZE_HANDLE_DIAMETER, getFirstTextManage, ActiveGenerator, isSourceAndTargetIntersect, getPoints, DEFAULT_ROUTE_MARGIN, TRANSPARENT, 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 { ACTIVE_STROKE_WIDTH, ThemeColorMode, RectangleClient, idCreator, distanceBetweenPointAndSegments, HIT_DISTANCE_BUFFER, rotatePointsByElement, isPolylineHitRectangle, rotateAntiPointsByElement, distanceBetweenPointAndPoint, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, depthFirstRecursion, PlaitBoard, getIsRecursionFunc, createG, SNAPPING_STROKE_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, createDebugGenerator, Point, arrowPoints, createPath, drawLinearPath, rotate, catmullRomFitting, setStrokeLinecap, findElements, createMask, createRect, PlaitElement, getSelectedElements, getElementById, Path, Direction, PlaitNode, hasValidAngle, toViewBoxPoint, toHostPoint, rotatePoints, getRectangleByElements, getSelectionAngle, rotatedDataPoints, isAxisChangedByAngle, isSelectionMoving, drawRectangle, getRectangleByAngle, getSnapRectangles, getTripleAxis, getMinPointDelta, SNAP_TOLERANCE, drawPointSnapLines, drawSolidLines, isPointInPolygon, getNearestPointBetweenPointAndSegments, isPointInEllipse, getNearestPointBetweenPointAndEllipse, getEllipseTangentSlope, getVectorFromPointAndSlope, drawRoundRectangle, isPointInRoundRectangle, setPathStrokeLinecap, getCrossingPointsBetweenEllipseAndSegment, drawLine as drawLine$1, RgbaToHEX, getHitElementByPoint, preventTouchMove, WritableClipboardOperationType, createClipboardContext, WritableClipboardType, addClipboardContext, setAngleForG, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER, isMainPointer, throttleRAF, getAngleBetweenPoints, normalizeAngle, degreesToRadians, rotateElements, MERGING, ROTATE_HANDLE_CLASS_NAME, SELECTION_RECTANGLE_CLASS_NAME, isSelectedElement } from '@plait/core';
+import { WithTextPluginKey, ELEMENT_TO_TEXT_MANAGES, getMemorizedLatest, memorizeLatest, RESIZE_HANDLE_DIAMETER, getPointOnPolyline, TRANSPARENT, getTextEditorsByElement, Generator, removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, getExtendPoint, getUnitVectorByPointAndPoint, getPointByVectorComponent, getFirstTextManage, ActiveGenerator, isSourceAndTargetIntersect, getPoints, DEFAULT_ROUTE_MARGIN, getDirectionByVector, normalizeShapePoints, getFirstTextEditor, resetPointsAfterResize, getRectangleResizeHandleRefs, getRotatedResizeCursorClassByAngle, ROTATE_HANDLE_DISTANCE_TO_ELEMENT, ROTATE_HANDLE_SIZE, isCornerHandle, getIndexByResizeHandle, withResize, drawHandle, getSymmetricHandleIndex, getResizeHandlePointByIndex, getDirectionFactorByDirectionComponent, getCrossingPointsBetweenPointAndSegment, isPointOnSegment, getDirectionByPointOfRectangle, getDirectionFactor, rotateVector, getOppositeDirection, rotateVectorAnti90, getSourceAndTargetOuterRectangle, getNextPoint, PRIMARY_COLOR, CommonElementFlavour, canResize, drawPrimaryHandle, drawFillPrimaryHandle, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, getElementsText, acceptImageTypes, getElementOfFocusedImage, buildImage, isResizingByCondition, getRatioByPoint, getTextManages, ImageGenerator, ResizeHandle, addRotating, removeRotating, drawRotateHandle } from '@plait/common';
 import { Alignment, TextManage, buildText, DEFAULT_FONT_SIZE, getTextSize, AlignEditor } from '@plait/text';
 import { pointsOnBezierCurves } from 'points-on-curve';
 import { isKeyHotkey } from 'is-hotkey';
@@ -71,8 +71,18 @@ var UMLSymbols;
     UMLSymbols["actor"] = "actor";
     UMLSymbols["useCase"] = "useCase";
     UMLSymbols["container"] = "container";
+    UMLSymbols["note"] = "note";
+    UMLSymbols["simpleClass"] = "simpleClass";
+    UMLSymbols["activityClass"] = "activityClass";
+    UMLSymbols["branchMerge"] = "branchMerge";
+    UMLSymbols["port"] = "port";
     UMLSymbols["package"] = "package";
     UMLSymbols["combinedFragment"] = "combinedFragment";
+    UMLSymbols["class"] = "class";
+    UMLSymbols["interface"] = "interface";
+    UMLSymbols["object"] = "object";
+    UMLSymbols["activation"] = "activation";
+    UMLSymbols["deletion"] = "deletion";
 })(UMLSymbols || (UMLSymbols = {}));
 var MultipleTextGeometryCommonTextKeys;
 (function (MultipleTextGeometryCommonTextKeys) {
@@ -201,6 +211,22 @@ const DefaultPackageProperty = {
         }
     ]
 };
+const DefaultActivationProperty = {
+    width: 18,
+    height: 80
+};
+const DefaultObjectProperty = {
+    width: 120,
+    height: 60
+};
+const DefaultDeletionProperty = {
+    width: 40,
+    height: 40
+};
+const DefaultPortProperty = {
+    width: 20,
+    height: 20
+};
 const DefaultCombinedFragmentProperty = {
     width: 400,
     height: 280,
@@ -217,6 +243,32 @@ const DefaultCombinedFragmentProperty = {
         }
     ]
 };
+const DefaultClassProperty = {
+    width: 230,
+    height: 180,
+    texts: [
+        { text: 'Class', align: Alignment.center },
+        {
+            text: '+ attribute1:type  defaultValue\n+ attribute2:type\n- attribute3:type',
+            align: Alignment.left
+        },
+        {
+            text: '+ operation1(params):returnType\n- operation2(params)\n- operation3()',
+            align: Alignment.left
+        }
+    ]
+};
+const DefaultInterfaceProperty = {
+    width: 230,
+    height: 140,
+    texts: [
+        { text: '<<interface>>\nInterface', align: Alignment.center },
+        {
+            text: '+ operation1(params):returnType\n- operation2(params)\n- operation3()',
+            align: Alignment.left
+        }
+    ]
+};
 const DefaultSwimlaneVerticalProperty = {
     width: 450,
     height: 500
@@ -263,8 +315,18 @@ const DefaultUMLPropertyMap = {
     [UMLSymbols.actor]: DefaultActorProperty,
     [UMLSymbols.useCase]: DefaultDocumentProperty,
     [UMLSymbols.container]: DefaultContainerProperty,
+    [UMLSymbols.note]: DefaultObjectProperty,
     [UMLSymbols.package]: DefaultPackageProperty,
-    [UMLSymbols.combinedFragment]: DefaultCombinedFragmentProperty
+    [UMLSymbols.combinedFragment]: DefaultCombinedFragmentProperty,
+    [UMLSymbols.class]: DefaultClassProperty,
+    [UMLSymbols.interface]: DefaultInterfaceProperty,
+    [UMLSymbols.activation]: DefaultActivationProperty,
+    [UMLSymbols.object]: DefaultObjectProperty,
+    [UMLSymbols.deletion]: DefaultDeletionProperty,
+    [UMLSymbols.activityClass]: DefaultObjectProperty,
+    [UMLSymbols.simpleClass]: DefaultObjectProperty,
+    [UMLSymbols.port]: DefaultPortProperty,
+    [UMLSymbols.branchMerge]: DefaultDeletionProperty
 };
 const MultipleTextGeometryTextKeys = {
     [UMLSymbols.package]: Object.keys(MultipleTextGeometryCommonTextKeys),
@@ -272,12 +334,20 @@ const MultipleTextGeometryTextKeys = {
 };
 const DefaultSwimlanePropertyMap = {
     [SwimlaneSymbols.swimlaneHorizontal]: DefaultSwimlaneHorizontalProperty,
-    [SwimlaneSymbols.swimlaneVertical]: DefaultSwimlaneVerticalProperty,
+    [SwimlaneSymbols.swimlaneVertical]: DefaultSwimlaneVerticalProperty
 };
 const LINE_HIT_GEOMETRY_BUFFER = 10;
 const LINE_SNAPPING_BUFFER = 6;
 const LINE_SNAPPING_CONNECTOR_BUFFER = 8;
-const GEOMETRY_WITHOUT_TEXT = [FlowchartSymbols.or, FlowchartSymbols.summingJunction];
+const GEOMETRY_WITHOUT_TEXT = [
+    FlowchartSymbols.or,
+    FlowchartSymbols.summingJunction,
+    UMLSymbols.activation,
+    UMLSymbols.deletion,
+    UMLSymbols.port,
+    UMLSymbols.branchMerge
+];
+const GEOMETRY_WITH_MULTIPLE_TEXT = [UMLSymbols.package, UMLSymbols.combinedFragment];
 
 const getGeometryPointers = () => {
     return [...Object.keys(BasicShapes), ...Object.keys(FlowchartSymbols), ...Object.keys(UMLSymbols)];
@@ -364,23 +434,15 @@ class TextGenerator {
         const textPlugins = (this.board.getPluginOptions(WithTextPluginKey) || {}).textPlugins;
         this.textManages = this.texts.map(text => {
             const textManage = this.createTextManage(text, textPlugins);
-            setTextManage(this.getTextKey(text), textManage);
+            setTextManage(getTextKey(this.element, text), textManage);
             return textManage;
         });
         ELEMENT_TO_TEXT_MANAGES.set(this.element, this.textManages);
     }
-    getTextKey(text) {
-        if (isMultipleTextGeometry(this.element)) {
-            return `${this.element.id}-${text.key}`;
-        }
-        else {
-            return text.key;
-        }
-    }
     draw(elementG) {
         const centerPoint = RectangleClient.getCenterPoint(this.board.getRectangle(this.element));
         this.texts.forEach(drawShapeText => {
-            const textManage = getTextManage(this.getTextKey(drawShapeText));
+            const textManage = getTextManage(getTextKey(this.element, drawShapeText));
             if (drawShapeText.text && textManage) {
                 textManage.draw(drawShapeText.text);
                 elementG.append(textManage.g);
@@ -409,7 +471,7 @@ class TextGenerator {
         }
         currentDrawShapeTexts.forEach(drawShapeText => {
             if (drawShapeText.text) {
-                let textManage = getTextManage(this.getTextKey(drawShapeText));
+                let textManage = getTextManage(getTextKey(this.element, drawShapeText));
                 if (!textManage) {
                     textManage = this.createTextManage(drawShapeText, textPlugins);
                     setTextManage(drawShapeText.key, textManage);
@@ -682,156 +744,443 @@ const getMemorizedLatestShape = (board) => {
     return memorizedShape.get(board);
 };
 
-const 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 getStrokeWidthByElement = (element) => {
-    if (PlaitDrawElement.isText(element)) {
-        return 0;
-    }
-    const strokeWidth = element.strokeWidth || DefaultDrawStyle.strokeWidth;
-    return strokeWidth;
-};
-const insertElement = (board, element) => {
-    memorizeLatestShape(board, element.shape);
-    Transforms.insertNode(board, element, [board.children.length]);
-    clearSelectedElement(board);
-    addSelectedElement(board, element);
-    BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
-};
-const isDrawElementsIncludeText = (elements) => {
-    return elements.some(item => {
-        if (PlaitDrawElement.isText(item)) {
-            return true;
-        }
-        if (PlaitDrawElement.isImage(item)) {
-            return false;
-        }
-        if (PlaitDrawElement.isGeometry(item)) {
-            return isGeometryIncludeText(item);
+var LineResizeHandle;
+(function (LineResizeHandle) {
+    LineResizeHandle["source"] = "source";
+    LineResizeHandle["target"] = "target";
+    LineResizeHandle["addHandle"] = "addHandle";
+})(LineResizeHandle || (LineResizeHandle = {}));
+const getHitLineResizeHandleRef = (board, element, point) => {
+    let dataPoints = PlaitLine.getPoints(board, element);
+    const index = getHitPointIndex(dataPoints, point);
+    if (index !== -1) {
+        const handleIndex = index;
+        if (index === 0) {
+            return { handle: LineResizeHandle.source, handleIndex };
         }
-        if (PlaitDrawElement.isLine(item)) {
-            const editors = getTextEditors(item);
-            return editors.length > 0;
+        if (index === dataPoints.length - 1) {
+            return { handle: LineResizeHandle.target, handleIndex };
         }
-        if (PlaitDrawElement.isTable(item)) {
-            return item.cells.some(cell => isCellIncludeText(cell));
+        // elbow line, data points only verify source connection point and target connection point
+        if (element.shape !== LineShape.elbow) {
+            return { handleIndex };
         }
-        return true;
+    }
+    const middlePoints = getMiddlePoints(board, element);
+    const indexOfMiddlePoints = getHitPointIndex(middlePoints, point);
+    if (indexOfMiddlePoints !== -1) {
+        return {
+            handle: LineResizeHandle.addHandle,
+            handleIndex: indexOfMiddlePoints
+        };
+    }
+    return undefined;
+};
+function getHitPointIndex(points, movingPoint) {
+    const rectangles = points.map(point => {
+        return {
+            x: point[0] - RESIZE_HANDLE_DIAMETER / 2,
+            y: point[1] - RESIZE_HANDLE_DIAMETER / 2,
+            width: RESIZE_HANDLE_DIAMETER,
+            height: RESIZE_HANDLE_DIAMETER
+        };
+    });
+    const rectangle = rectangles.find(rectangle => {
+        return RectangleClient.isHit(RectangleClient.getRectangleByPoints([movingPoint, movingPoint]), rectangle);
+    });
+    return rectangle ? rectangles.indexOf(rectangle) : -1;
+}
+const getHitLineTextIndex = (board, element, point) => {
+    const texts = element.texts;
+    if (!texts.length)
+        return -1;
+    const points = getLinePoints(board, element);
+    return texts.findIndex(text => {
+        const center = getPointOnPolyline(points, text.position);
+        const rectangle = {
+            x: center[0] - text.width / 2,
+            y: center[1] - text.height / 2,
+            width: text.width,
+            height: text.height
+        };
+        return RectangleClient.isHit(rectangle, RectangleClient.getRectangleByPoints([point, point]));
     });
 };
-const getSnappingShape = (board, point) => {
-    let hitElement = getHitShape(board, point);
-    if (hitElement) {
-        const ref = getSnappingRef(board, hitElement, point);
-        if (ref.isHitConnector || ref.isHitEdge) {
-            return hitElement;
-        }
-    }
-    return null;
+
+const isMultipleTextShape = (shape) => {
+    return GEOMETRY_WITH_MULTIPLE_TEXT.includes(shape);
 };
-const getSnappingRef = (board, hitElement, point) => {
-    const rotatedPoint = rotateAntiPointsByElement(point, hitElement) || point;
-    const connectorPoint = getHitConnectorPoint(rotatedPoint, hitElement);
-    const edgePoint = getNearestPoint(hitElement, rotatedPoint);
-    const isHitEdge = isHitEdgeOfShape(board, hitElement, rotatedPoint, LINE_SNAPPING_BUFFER);
-    return { isHitEdge, isHitConnector: !!connectorPoint, connectorPoint, edgePoint };
+const isMultipleTextGeometry = (geometry) => {
+    return PlaitDrawElement.isGeometry(geometry) && isMultipleTextShape(geometry.shape);
 };
-const getHitShape = (board, point, offset = LINE_HIT_GEOMETRY_BUFFER) => {
-    let hitShape = null;
-    traverseDrawShapes(board, (element) => {
-        if (hitShape === null && isInsideOfShape(board, element, rotateAntiPointsByElement(point, element) || point, offset * 2)) {
-            hitShape = element;
-        }
-    });
-    return hitShape;
+const getMultipleTextGeometryTextKeys = (shape) => {
+    return MultipleTextGeometryTextKeys[shape];
 };
-const traverseDrawShapes = (board, callback) => {
-    depthFirstRecursion(board, node => {
-        if (!PlaitBoard.isBoard(node) && PlaitDrawElement.isShapeElement(node)) {
-            callback(node);
-        }
-    }, getIsRecursionFunc(board), true);
+const createMultipleTextGeometryElement = (shape, points, options = {}) => {
+    const id = idCreator();
+    const drawShapeTexts = buildDefaultTextsByShape(shape);
+    return {
+        id,
+        type: 'geometry',
+        shape,
+        angle: 0,
+        opacity: 1,
+        texts: drawShapeTexts,
+        points,
+        ...options
+    };
 };
-const drawShape = (board, outerRectangle, shape, roughOptions, drawOptions) => {
-    return getEngine(shape).draw(board, outerRectangle, roughOptions, drawOptions);
+const buildDefaultTextsByShape = (shape) => {
+    const memorizedLatest = getMemorizedLatestByPointer(shape);
+    const textProperties = { ...memorizedLatest.textProperties };
+    const alignment = textProperties?.align;
+    const textHeight = textProperties?.textHeight || DefaultTextProperty.height;
+    delete textProperties?.align;
+    delete textProperties?.textHeight;
+    const defaultTexts = getDefaultGeometryProperty(shape)?.texts || [];
+    const textKeys = getMultipleTextGeometryTextKeys(shape);
+    return (textKeys || []).map((textKey) => {
+        const text = defaultTexts?.find((item) => item?.key === textKey);
+        return {
+            key: textKey,
+            text: buildText(text?.text || '', alignment || text?.align || Alignment.center, textProperties),
+            textHeight: textHeight
+        };
+    });
 };
-const drawBoundReaction = (board, element, roughOptions = { hasMask: true, hasConnector: true }) => {
-    const g = createG();
-    const rectangle = RectangleClient.getRectangleByPoints(element.points);
-    const activeRectangle = RectangleClient.inflate(rectangle, SNAPPING_STROKE_WIDTH);
-    const shape = getElementShape(element);
-    let drawOptions = {};
-    if (PlaitDrawElement.isTable(element)) {
-        drawOptions = { element };
-    }
-    const strokeG = drawShape(board, activeRectangle, shape, {
-        stroke: SELECTION_BORDER_COLOR,
-        strokeWidth: SNAPPING_STROKE_WIDTH
-    }, drawOptions);
-    g.appendChild(strokeG);
-    if (roughOptions.hasMask) {
-        const maskG = drawShape(board, activeRectangle, shape, {
-            stroke: SELECTION_BORDER_COLOR,
-            strokeWidth: 0,
-            fill: SELECTION_FILL_COLOR,
-            fillStyle: 'solid'
-        }, drawOptions);
-        g.appendChild(maskG);
-    }
-    if (roughOptions.hasConnector) {
-        const connectorPoints = getEngine(shape).getConnectorPoints(rectangle);
-        connectorPoints.forEach(point => {
-            const circleG = drawCircle(PlaitBoard.getRoughSVG(board), point, 8, {
-                stroke: SELECTION_BORDER_COLOR,
-                strokeWidth: ACTIVE_STROKE_WIDTH,
-                fill: '#FFF',
-                fillStyle: 'solid'
-            });
-            g.appendChild(circleG);
+const getHitMultipleGeometryText = (element, point) => {
+    const engine = getEngine(element.shape);
+    const rectangle = RectangleClient.getRectangleByPoints([point, point]);
+    let hitText;
+    if (engine.getTextRectangle) {
+        hitText = element.texts.find(text => {
+            const textRectangle = engine.getTextRectangle(element, { key: text.key });
+            return RectangleClient.isHit(rectangle, textRectangle);
         });
     }
-    return g;
+    return hitText;
 };
 
-const getStrokeColorByElement = (board, element) => {
-    const defaultColor = getDrawDefaultStrokeColor(board.theme.themeColorMode);
-    const strokeColor = element.strokeColor || defaultColor;
-    return strokeColor;
-};
-const getFillByElement = (board, element) => {
-    const defaultFill = PlaitDrawElement.isFlowchart(element)
-        ? getFlowchartDefaultFill(board.theme.themeColorMode)
-        : DefaultDrawStyle.fill;
-    const fill = element.fill || defaultFill;
-    return fill;
-};
-const getLineDashByElement = (element) => {
-    switch (element.strokeStyle) {
-        case StrokeStyle.dashed:
-            return [8, 8 + getStrokeWidthByElement(element)];
-        case StrokeStyle.dotted:
-            return [0, 4 + getStrokeWidthByElement(element)];
-        default:
-            return undefined;
+const isTextExceedingBounds = (geometry) => {
+    const client = RectangleClient.getRectangleByPoints(geometry.points);
+    if (geometry.textHeight && geometry.textHeight > client.height) {
+        return true;
     }
+    return false;
 };
-const getStrokeStyleByElement = (element) => {
-    return element.strokeStyle || StrokeStyle.solid;
+const isHitLineText = (board, element, point) => {
+    return getHitLineTextIndex(board, element, point) !== -1;
 };
-
-const DefaultLineStyle = {
-    strokeWidth: 2,
-    strokeColor: '#000'
+const isHitPolyLine = (pathPoints, point) => {
+    const distance = distanceBetweenPointAndSegments(pathPoints, point);
+    return distance <= HIT_DISTANCE_BUFFER;
+};
+const isHitLine = (board, element, point) => {
+    const points = getLinePoints(board, element);
+    const isHitText = isHitLineText(board, element, point);
+    return isHitText || isHitPolyLine(points, point);
+};
+const isHitElementText = (element, point) => {
+    const engine = getEngine(element.shape);
+    if (isMultipleTextGeometry(element)) {
+        const texts = element.texts;
+        return texts.some(item => {
+            const textClient = engine.getTextRectangle(element, { key: item.key });
+            return RectangleClient.isPointInRectangle(textClient, point);
+        });
+    }
+    else {
+        const textClient = engine.getTextRectangle ? engine.getTextRectangle(element) : getTextRectangle(element);
+        return RectangleClient.isPointInRectangle(textClient, point);
+    }
+};
+const isRectangleHitElementText = (element, rectangle) => {
+    const engine = getEngine(element.shape);
+    if (isMultipleTextGeometry(element)) {
+        const texts = element.texts;
+        return texts.some(item => {
+            const textClient = engine.getTextRectangle(element, { key: item.key });
+            const rotatedCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(textClient), element) || RectangleClient.getCornerPoints(textClient);
+            return isPolylineHitRectangle(rotatedCornerPoints, rectangle);
+        });
+    }
+    else {
+        const textClient = engine.getTextRectangle ? engine.getTextRectangle(element) : getTextRectangle(element);
+        const rotatedCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(textClient), element) || RectangleClient.getCornerPoints(textClient);
+        return isPolylineHitRectangle(rotatedCornerPoints, rectangle);
+    }
+};
+const isRectangleHitDrawElement = (board, element, selection) => {
+    const rangeRectangle = RectangleClient.getRectangleByPoints([selection.anchor, selection.focus]);
+    if (PlaitDrawElement.isGeometry(element)) {
+        const client = RectangleClient.getRectangleByPoints(element.points);
+        let rotatedCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(client), element) || RectangleClient.getCornerPoints(client);
+        const isHitElement = isPolylineHitRectangle(rotatedCornerPoints, rangeRectangle);
+        if (isHitElement) {
+            return isHitElement;
+        }
+        return isRectangleHitElementText(element, rangeRectangle);
+    }
+    if (PlaitDrawElement.isImage(element)) {
+        const client = RectangleClient.getRectangleByPoints(element.points);
+        const rotatedCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(client), element) || RectangleClient.getCornerPoints(client);
+        return isPolylineHitRectangle(rotatedCornerPoints, rangeRectangle);
+    }
+    if (PlaitDrawElement.isLine(element)) {
+        const points = getLinePoints(board, element);
+        return isPolylineHitRectangle(points, rangeRectangle);
+    }
+    return null;
+};
+const isHitDrawElement = (board, element, point) => {
+    const rectangle = board.getRectangle(element);
+    point = rotateAntiPointsByElement(point, element) || point;
+    if (PlaitDrawElement.isGeometry(element)) {
+        const fill = getFillByElement(board, element);
+        if (isHitEdgeOfShape(board, element, point, HIT_DISTANCE_BUFFER)) {
+            return true;
+        }
+        const engine = getEngine(getElementShape(element));
+        // when shape equals text, fill is not allowed
+        if (fill !== DefaultDrawStyle.fill && fill !== TRANSPARENT && !PlaitDrawElement.isText(element)) {
+            const isHitInside = engine.isInsidePoint(rectangle, point);
+            if (isHitInside) {
+                return isHitInside;
+            }
+        }
+        else {
+            // if shape equals text, only check text rectangle
+            if (PlaitDrawElement.isText(element)) {
+                const textClient = getTextRectangle(element);
+                let isHitText = RectangleClient.isPointInRectangle(textClient, point);
+                return isHitText;
+            }
+            // check textRectangle of element
+            const isHitText = isHitElementText(element, point);
+            if (isHitText) {
+                return isHitText;
+            }
+        }
+    }
+    if (PlaitDrawElement.isImage(element)) {
+        const client = RectangleClient.getRectangleByPoints(element.points);
+        return RectangleClient.isPointInRectangle(client, point);
+    }
+    if (PlaitDrawElement.isLine(element)) {
+        return isHitLine(board, element, point);
+    }
+    return null;
+};
+const isHitEdgeOfShape = (board, element, point, hitDistanceBuffer) => {
+    const nearestPoint = getNearestPoint(element, point);
+    const distance = distanceBetweenPointAndPoint(nearestPoint[0], nearestPoint[1], point[0], point[1]);
+    return distance <= hitDistanceBuffer;
+};
+const isInsideOfShape = (board, element, point, hitDistanceBuffer) => {
+    const client = RectangleClient.inflate(RectangleClient.getRectangleByPoints(element.points), hitDistanceBuffer);
+    return getEngine(getElementShape(element)).isInsidePoint(client, point);
+};
+const isHitElementInside = (board, element, point) => {
+    const rectangle = board.getRectangle(element);
+    point = rotateAntiPointsByElement(point, element) || point;
+    if (PlaitDrawElement.isGeometry(element)) {
+        const engine = getEngine(getElementShape(element));
+        const isHitInside = engine.isInsidePoint(rectangle, point);
+        if (isHitInside) {
+            return isHitInside;
+        }
+        if (engine.getTextRectangle) {
+            const isHitText = isHitElementText(element, point);
+            if (isHitText) {
+                return isHitText;
+            }
+        }
+    }
+    if (PlaitDrawElement.isImage(element)) {
+        const client = RectangleClient.getRectangleByPoints(element.points);
+        return RectangleClient.isPointInRectangle(client, point);
+    }
+    if (PlaitDrawElement.isLine(element)) {
+        return isHitLine(board, element, point);
+    }
+    return null;
+};
+
+const 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 getStrokeWidthByElement = (element) => {
+    if (PlaitDrawElement.isText(element)) {
+        return 0;
+    }
+    const strokeWidth = element.strokeWidth || DefaultDrawStyle.strokeWidth;
+    return strokeWidth;
+};
+const insertElement = (board, element) => {
+    memorizeLatestShape(board, element.shape);
+    Transforms.insertNode(board, element, [board.children.length]);
+    clearSelectedElement(board);
+    addSelectedElement(board, element);
+    BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
+};
+const isDrawElementIncludeText = (element) => {
+    if (PlaitDrawElement.isText(element)) {
+        return true;
+    }
+    if (PlaitDrawElement.isImage(element)) {
+        return false;
+    }
+    if (PlaitDrawElement.isGeometry(element)) {
+        return isGeometryIncludeText(element);
+    }
+    if (PlaitDrawElement.isLine(element)) {
+        const editors = getTextEditorsByElement(element);
+        return editors.length > 0;
+    }
+    if (PlaitDrawElement.isTable(element)) {
+        return element.cells.some(cell => isCellIncludeText(cell));
+    }
+    return true;
+};
+const isDrawElementsIncludeText = (elements) => {
+    return elements.some(item => {
+        return isDrawElementIncludeText(item);
+    });
+};
+const getSnappingShape = (board, point) => {
+    let hitElement = getHitShape(board, point);
+    if (hitElement) {
+        const ref = getSnappingRef(board, hitElement, point);
+        if (ref.isHitConnector || ref.isHitEdge) {
+            return hitElement;
+        }
+    }
+    return null;
+};
+const getSnappingRef = (board, hitElement, point) => {
+    const rotatedPoint = rotateAntiPointsByElement(point, hitElement) || point;
+    const connectorPoint = getHitConnectorPoint(rotatedPoint, hitElement);
+    const edgePoint = getNearestPoint(hitElement, rotatedPoint);
+    const isHitEdge = isHitEdgeOfShape(board, hitElement, rotatedPoint, LINE_SNAPPING_BUFFER);
+    return { isHitEdge, isHitConnector: !!connectorPoint, connectorPoint, edgePoint };
+};
+const getHitShape = (board, point, offset = LINE_HIT_GEOMETRY_BUFFER) => {
+    let hitShape = null;
+    traverseDrawShapes(board, (element) => {
+        if (hitShape === null && isInsideOfShape(board, element, rotateAntiPointsByElement(point, element) || point, offset * 2)) {
+            hitShape = element;
+        }
+    });
+    return hitShape;
+};
+const traverseDrawShapes = (board, callback) => {
+    depthFirstRecursion(board, node => {
+        if (!PlaitBoard.isBoard(node) && PlaitDrawElement.isShapeElement(node)) {
+            callback(node);
+        }
+    }, getIsRecursionFunc(board), true);
+};
+const drawShape = (board, outerRectangle, shape, roughOptions, drawOptions) => {
+    return getEngine(shape).draw(board, outerRectangle, roughOptions, drawOptions);
+};
+const drawBoundReaction = (board, element, roughOptions = { hasMask: true, hasConnector: true }) => {
+    const g = createG();
+    const rectangle = RectangleClient.getRectangleByPoints(element.points);
+    const activeRectangle = RectangleClient.inflate(rectangle, SNAPPING_STROKE_WIDTH);
+    const shape = getElementShape(element);
+    let drawOptions = {};
+    if (PlaitDrawElement.isTable(element)) {
+        drawOptions = { element };
+    }
+    const strokeG = drawShape(board, activeRectangle, shape, {
+        stroke: SELECTION_BORDER_COLOR,
+        strokeWidth: SNAPPING_STROKE_WIDTH
+    }, drawOptions);
+    g.appendChild(strokeG);
+    if (roughOptions.hasMask) {
+        const maskG = drawShape(board, activeRectangle, shape, {
+            stroke: SELECTION_BORDER_COLOR,
+            strokeWidth: 0,
+            fill: SELECTION_FILL_COLOR,
+            fillStyle: 'solid'
+        }, drawOptions);
+        g.appendChild(maskG);
+    }
+    if (roughOptions.hasConnector) {
+        const connectorPoints = getEngine(shape).getConnectorPoints(rectangle);
+        connectorPoints.forEach(point => {
+            const circleG = drawCircle(PlaitBoard.getRoughSVG(board), point, 8, {
+                stroke: SELECTION_BORDER_COLOR,
+                strokeWidth: ACTIVE_STROKE_WIDTH,
+                fill: '#FFF',
+                fillStyle: 'solid'
+            });
+            g.appendChild(circleG);
+        });
+    }
+    return g;
+};
+const getTextKey = (element, text) => {
+    if (isMultipleTextGeometry(element)) {
+        return `${element.id}-${text.key}`;
+    }
+    else {
+        return text.key;
+    }
+};
+const getGeometryAlign = (element) => {
+    if (isMultipleTextGeometry(element)) {
+        const drawShapeText = element.texts.find(item => item.key.includes(MultipleTextGeometryCommonTextKeys.content));
+        return drawShapeText?.text.align || Alignment.center;
+    }
+    if (isSingleTextGeometry(element)) {
+        return element.text?.align || Alignment.center;
+    }
+    if (PlaitDrawElement.isTable(element)) {
+        const firstTextCell = element.cells.find(item => item.text);
+        return firstTextCell?.text?.align || Alignment.center;
+    }
+    return Alignment.center;
+};
+
+const getStrokeColorByElement = (board, element) => {
+    const defaultColor = getDrawDefaultStrokeColor(board.theme.themeColorMode);
+    const strokeColor = element.strokeColor || defaultColor;
+    return strokeColor;
+};
+const getFillByElement = (board, element) => {
+    const defaultFill = PlaitDrawElement.isFlowchart(element)
+        ? getFlowchartDefaultFill(board.theme.themeColorMode)
+        : DefaultDrawStyle.fill;
+    const fill = element.fill || defaultFill;
+    return fill;
+};
+const getLineDashByElement = (element) => {
+    switch (element.strokeStyle) {
+        case StrokeStyle.dashed:
+            return [8, 8 + getStrokeWidthByElement(element)];
+        case StrokeStyle.dotted:
+            return [0, 4 + getStrokeWidthByElement(element)];
+        default:
+            return undefined;
+    }
+};
+const getStrokeStyleByElement = (element) => {
+    return element.strokeStyle || StrokeStyle.solid;
+};
+
+const DefaultLineStyle = {
+    strokeWidth: 2,
+    strokeColor: '#000'
 };
 const LINE_TEXT_SPACE = 4;
 const LINE_AUTO_COMPLETE_DIAMETER = 6;
@@ -1516,58 +1865,87 @@ function drawMask(board, element, id) {
     return { mask, maskTargetFillRect };
 }
 
-const isMultipleTextShape = (shape) => {
-    return [UMLSymbols.package, UMLSymbols.combinedFragment].includes(shape);
-};
-const isMultipleTextGeometry = (geometry) => {
-    return !!geometry.texts;
-};
-const getMultipleTextGeometryTextKeys = (shape) => {
-    return MultipleTextGeometryTextKeys[shape];
-};
-const createMultipleTextGeometryElement = (shape, points, options = {}) => {
-    const id = idCreator();
-    const drawShapeTexts = buildDefaultTextsByShape(shape, id);
-    return {
-        id,
-        type: 'geometry',
-        shape,
+const createUMLClassOrInterfaceGeometryElement = (board, shape, points) => {
+    const memorizedLatest = getMemorizedLatestByPointer(shape);
+    const element = {
+        id: idCreator(),
+        type: 'table',
         angle: 0,
         opacity: 1,
-        texts: drawShapeTexts,
         points,
-        ...options
+        strokeWidth: DefaultBasicShapeProperty.strokeWidth,
+        ...memorizedLatest.geometryProperties
+    };
+    let rows;
+    let columns;
+    if (shape === UMLSymbols.class) {
+        rows = [
+            {
+                id: idCreator(),
+                height: 30
+            },
+            {
+                id: idCreator()
+            },
+            {
+                id: idCreator()
+            }
+        ];
+        columns = [
+            {
+                id: idCreator()
+            }
+        ];
+    }
+    else {
+        rows = [
+            {
+                id: idCreator(),
+                height: 50
+            },
+            {
+                id: idCreator()
+            }
+        ];
+        columns = [
+            {
+                id: idCreator()
+            }
+        ];
+    }
+    return {
+        ...element,
+        shape,
+        rows,
+        columns,
+        cells: buildTableCellsForGeometry(board, rows, columns, shape)
     };
 };
-const buildDefaultTextsByShape = (shape, elementId) => {
+const buildTableCellsForGeometry = (board, rows, columns, shape) => {
     const memorizedLatest = getMemorizedLatestByPointer(shape);
-    const textProperties = { ...memorizedLatest.textProperties };
-    const alignment = textProperties?.align;
-    const textHeight = textProperties?.textHeight || DefaultTextProperty.height;
-    delete textProperties?.align;
-    delete textProperties?.textHeight;
-    const defaultTexts = getDefaultGeometryProperty(shape)?.texts || [];
-    const textKeys = getMultipleTextGeometryTextKeys(shape);
-    return (textKeys || []).map((textKey) => {
-        const text = defaultTexts?.find((item) => item?.key === textKey);
-        return {
-            key: textKey,
-            text: buildText(text?.text || '', alignment || text?.align || Alignment.center, textProperties),
-            textHeight: textHeight
-        };
-    });
-};
-const getHitText = (element, point) => {
-    const engine = getEngine(element.shape);
-    const rectangle = RectangleClient.getRectangleByPoints([point, point]);
-    let hitText;
-    if (engine.getTextRectangle) {
-        hitText = element.texts.find(text => {
-            const textRectangle = engine.getTextRectangle(element, { key: text.key });
-            return RectangleClient.isHit(rectangle, textRectangle);
-        });
-    }
-    return hitText;
+    const cellCount = rows.length * columns.length;
+    const defaultTexts = getDefaultGeometryProperty(shape)?.texts || [];
+    const testHeights = defaultTexts.map((textItem) => {
+        return getTextShapeProperty(board, textItem.text || DefaultTextProperty.text, memorizedLatest.textProperties['font-size']).height;
+    });
+    return new Array(cellCount).fill('').map((item, index) => {
+        const rowIndex = Math.floor(index / columns.length);
+        const columnIndex = index % columns.length;
+        return {
+            id: idCreator(),
+            rowId: rows[rowIndex].id,
+            columnId: columns[columnIndex].id,
+            textHeight: testHeights[index],
+            text: {
+                children: [
+                    {
+                        text: defaultTexts[index].text
+                    }
+                ],
+                align: defaultTexts[index].align
+            }
+        };
+    });
 };
 
 const createGeometryElement = (shape, points, text, options = {}, textProperties = {}) => {
@@ -1755,6 +2133,9 @@ const createTextElement = (board, points, text = DefaultTextProperty.text, textH
 const createDefaultGeometry = (board, points, shape) => {
     const memorizedLatest = getMemorizedLatestByPointer(shape);
     const textHeight = getTextShapeProperty(board, DefaultTextProperty.text, memorizedLatest.textProperties['font-size']).height;
+    if (PlaitDrawElement.isUMLClassOrInterface({ shape })) {
+        return createUMLClassOrInterfaceGeometryElement(board, shape, points);
+    }
     if (isMultipleTextShape(shape)) {
         return createMultipleTextGeometryElement(shape, points, {
             strokeWidth: DefaultBasicShapeProperty.strokeWidth,
@@ -1770,12 +2151,14 @@ const createDefaultGeometry = (board, points, shape) => {
 };
 const editText = (board, element, text) => {
     const textManage = text ? getTextManage(`${element.id}-${text.key}`) : getFirstTextManage(element);
-    textManage.edit(() => {
-        // delay to avoid blinking
-        setTimeout(() => {
-            rerenderGeometryActive(board, element);
-        }, 200);
-    });
+    if (textManage) {
+        textManage.edit(() => {
+            // delay to avoid blinking
+            setTimeout(() => {
+                rerenderGeometryActive(board, element);
+            }, 200);
+        });
+    }
     rerenderGeometryActive(board, element);
 };
 const rerenderGeometryActive = (board, element) => {
@@ -1785,7 +2168,13 @@ const rerenderGeometryActive = (board, element) => {
     activeGenerator.processDrawing(element, PlaitBoard.getElementActiveHost(board), { selected });
 };
 const isGeometryIncludeText = (element) => {
-    return PlaitDrawElement.isGeometry(element) && element.text && element.textHeight && !GEOMETRY_WITHOUT_TEXT.includes(element.shape);
+    return isSingleTextGeometry(element) || isMultipleTextGeometry(element);
+};
+const isSingleTextShape = (shape) => {
+    return !GEOMETRY_WITHOUT_TEXT.includes(shape) && !isMultipleTextShape(shape);
+};
+const isSingleTextGeometry = (element) => {
+    return PlaitDrawElement.isGeometry(element) && isSingleTextShape(element.shape);
 };
 
 const isSelfLoop = (element) => {
@@ -1844,292 +2233,84 @@ const getElbowPoints = (board, element) => {
         //                                |
         // nextPoint---sourcePoint---keyPoint1
         // The correct rendering should be (nextPoint should be filtered out):
-        //                           keyPoint2
-        //                                |
-        //                                |
-        //             sourcePoint---keyPoint1
-        const ret = simplifyOrthogonalPoints(renderPoints);
-        return ret;
-    }
-};
-const getNextSourceAndTargetPoints = (board, element) => {
-    const options = getElbowLineRouteOptions(board, element);
-    return [options.nextSourcePoint, options.nextTargetPoint];
-};
-const getSourceAndTargetRectangle = (board, element, handleRefPair) => {
-    let sourceElement = element.source.boundId ? getElementById(board, element.source.boundId) : undefined;
-    let targetElement = element.target.boundId ? getElementById(board, element.target.boundId) : undefined;
-    if (!sourceElement) {
-        const source = handleRefPair.source;
-        sourceElement = createFakeElement(source.point, source.vector);
-    }
-    if (!targetElement) {
-        const target = handleRefPair.target;
-        targetElement = createFakeElement(target.point, target.vector);
-    }
-    let sourceRectangle = RectangleClient.getRectangleByPoints(sourceElement.points);
-    const rotatedSourceCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(sourceRectangle), sourceElement) ||
-        RectangleClient.getCornerPoints(sourceRectangle);
-    sourceRectangle = RectangleClient.getRectangleByPoints(rotatedSourceCornerPoints);
-    sourceRectangle = RectangleClient.inflate(sourceRectangle, getStrokeWidthByElement(sourceElement) * 2);
-    let targetRectangle = RectangleClient.getRectangleByPoints(targetElement.points);
-    const rotatedTargetCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(targetRectangle), targetElement) ||
-        RectangleClient.getCornerPoints(targetRectangle);
-    targetRectangle = RectangleClient.getRectangleByPoints(rotatedTargetCornerPoints);
-    targetRectangle = RectangleClient.inflate(targetRectangle, getStrokeWidthByElement(targetElement) * 2);
-    return {
-        sourceRectangle,
-        targetRectangle
-    };
-};
-const createFakeElement = (startPoint, vector) => {
-    const point = getPointByVectorComponent(startPoint, vector, -25);
-    const points = RectangleClient.getPoints(RectangleClient.getRectangleByCenterPoint(point, 50, 50));
-    return createGeometryElement(BasicShapes.rectangle, points, '');
-};
-function getNextRenderPoints(board, element, renderPoints) {
-    let newRenderKeyPoints = renderPoints ?? getElbowPoints(board, element);
-    const [nextSourcePoint, nextTargetPoint] = getNextSourceAndTargetPoints(board, element);
-    newRenderKeyPoints.splice(0, 1, nextSourcePoint);
-    newRenderKeyPoints.splice(-1, 1, nextTargetPoint);
-    return removeDuplicatePoints(newRenderKeyPoints);
-}
-
-const getSelectedDrawElements = (board, elements) => {
-    const selectedElements = elements?.length ? elements : getSelectedElements(board);
-    return selectedElements.filter(value => PlaitDrawElement.isDrawElement(value));
-};
-const getSelectedGeometryElements = (board) => {
-    const selectedElements = getSelectedElements(board).filter(value => PlaitDrawElement.isGeometry(value));
-    return selectedElements;
-};
-const getSelectedLineElements = (board) => {
-    const selectedElements = getSelectedElements(board).filter(value => PlaitDrawElement.isLine(value));
-    return selectedElements;
-};
-const getSelectedImageElements = (board) => {
-    const selectedElements = getSelectedElements(board).filter(value => PlaitDrawElement.isImage(value));
-    return selectedElements;
-};
-const isSingleSelectSwimlane = (board) => {
-    const selectedElements = getSelectedElements(board);
-    return selectedElements && selectedElements.length === 1 && PlaitDrawElement.isSwimlane(selectedElements[0]);
-};
-const isSingleSelectTable = (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));
-};
-
-var LineResizeHandle;
-(function (LineResizeHandle) {
-    LineResizeHandle["source"] = "source";
-    LineResizeHandle["target"] = "target";
-    LineResizeHandle["addHandle"] = "addHandle";
-})(LineResizeHandle || (LineResizeHandle = {}));
-const getHitLineResizeHandleRef = (board, element, point) => {
-    let dataPoints = PlaitLine.getPoints(board, element);
-    const index = getHitPointIndex(dataPoints, point);
-    if (index !== -1) {
-        const handleIndex = index;
-        if (index === 0) {
-            return { handle: LineResizeHandle.source, handleIndex };
-        }
-        if (index === dataPoints.length - 1) {
-            return { handle: LineResizeHandle.target, handleIndex };
-        }
-        // elbow line, data points only verify source connection point and target connection point
-        if (element.shape !== LineShape.elbow) {
-            return { handleIndex };
-        }
-    }
-    const middlePoints = getMiddlePoints(board, element);
-    const indexOfMiddlePoints = getHitPointIndex(middlePoints, point);
-    if (indexOfMiddlePoints !== -1) {
-        return {
-            handle: LineResizeHandle.addHandle,
-            handleIndex: indexOfMiddlePoints
-        };
-    }
-    return undefined;
-};
-function getHitPointIndex(points, movingPoint) {
-    const rectangles = points.map(point => {
-        return {
-            x: point[0] - RESIZE_HANDLE_DIAMETER / 2,
-            y: point[1] - RESIZE_HANDLE_DIAMETER / 2,
-            width: RESIZE_HANDLE_DIAMETER,
-            height: RESIZE_HANDLE_DIAMETER
-        };
-    });
-    const rectangle = rectangles.find(rectangle => {
-        return RectangleClient.isHit(RectangleClient.getRectangleByPoints([movingPoint, movingPoint]), rectangle);
-    });
-    return rectangle ? rectangles.indexOf(rectangle) : -1;
-}
-const getHitLineTextIndex = (board, element, point) => {
-    const texts = element.texts;
-    if (!texts.length)
-        return -1;
-    const points = getLinePoints(board, element);
-    return texts.findIndex(text => {
-        const center = getPointOnPolyline(points, text.position);
-        const rectangle = {
-            x: center[0] - text.width / 2,
-            y: center[1] - text.height / 2,
-            width: text.width,
-            height: text.height
-        };
-        return RectangleClient.isHit(rectangle, RectangleClient.getRectangleByPoints([point, point]));
-    });
-};
-
-const isTextExceedingBounds = (geometry) => {
-    const client = RectangleClient.getRectangleByPoints(geometry.points);
-    if (geometry.textHeight && geometry.textHeight > client.height) {
-        return true;
-    }
-    return false;
-};
-const isHitLineText = (board, element, point) => {
-    return getHitLineTextIndex(board, element, point) !== -1;
-};
-const isHitPolyLine = (pathPoints, point) => {
-    const distance = distanceBetweenPointAndSegments(pathPoints, point);
-    return distance <= HIT_DISTANCE_BUFFER;
-};
-const isHitLine = (board, element, point) => {
-    const points = getLinePoints(board, element);
-    const isHitText = isHitLineText(board, element, point);
-    return isHitText || isHitPolyLine(points, point);
-};
-const isHitElementText = (element, point) => {
-    const engine = getEngine(element.shape);
-    if (isMultipleTextGeometry(element)) {
-        const texts = element.texts;
-        return texts.some(item => {
-            const textClient = engine.getTextRectangle(element, { key: item.key });
-            return RectangleClient.isPointInRectangle(textClient, point);
-        });
-    }
-    else {
-        const textClient = engine.getTextRectangle ? engine.getTextRectangle(element) : getTextRectangle(element);
-        return RectangleClient.isPointInRectangle(textClient, point);
-    }
-};
-const isRectangleHitElementText = (element, rectangle) => {
-    const engine = getEngine(element.shape);
-    if (isMultipleTextGeometry(element)) {
-        const texts = element.texts;
-        return texts.some(item => {
-            const textClient = engine.getTextRectangle(element, { key: item.key });
-            const rotatedCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(textClient), element) || RectangleClient.getCornerPoints(textClient);
-            return isPolylineHitRectangle(rotatedCornerPoints, rectangle);
-        });
-    }
-    else {
-        const textClient = engine.getTextRectangle ? engine.getTextRectangle(element) : getTextRectangle(element);
-        const rotatedCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(textClient), element) || RectangleClient.getCornerPoints(textClient);
-        return isPolylineHitRectangle(rotatedCornerPoints, rectangle);
-    }
-};
-const isRectangleHitDrawElement = (board, element, selection) => {
-    const rangeRectangle = RectangleClient.getRectangleByPoints([selection.anchor, selection.focus]);
-    if (PlaitDrawElement.isGeometry(element)) {
-        const client = RectangleClient.getRectangleByPoints(element.points);
-        let rotatedCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(client), element) || RectangleClient.getCornerPoints(client);
-        const isHitElement = isPolylineHitRectangle(rotatedCornerPoints, rangeRectangle);
-        if (isHitElement) {
-            return isHitElement;
-        }
-        return isRectangleHitElementText(element, rangeRectangle);
-    }
-    if (PlaitDrawElement.isImage(element)) {
-        const client = RectangleClient.getRectangleByPoints(element.points);
-        const rotatedCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(client), element) || RectangleClient.getCornerPoints(client);
-        return isPolylineHitRectangle(rotatedCornerPoints, rangeRectangle);
-    }
-    if (PlaitDrawElement.isLine(element)) {
-        const points = getLinePoints(board, element);
-        return isPolylineHitRectangle(points, rangeRectangle);
-    }
-    return null;
-};
-const isHitDrawElement = (board, element, point) => {
-    const rectangle = board.getRectangle(element);
-    point = rotateAntiPointsByElement(point, element) || point;
-    if (PlaitDrawElement.isGeometry(element)) {
-        const fill = getFillByElement(board, element);
-        if (isHitEdgeOfShape(board, element, point, HIT_DISTANCE_BUFFER)) {
-            return true;
-        }
-        const engine = getEngine(getElementShape(element));
-        // when shape equals text, fill is not allowed
-        if (fill !== DefaultDrawStyle.fill && fill !== TRANSPARENT && !PlaitDrawElement.isText(element)) {
-            const isHitInside = engine.isInsidePoint(rectangle, point);
-            if (isHitInside) {
-                return isHitInside;
-            }
-        }
-        else {
-            // if shape equals text, only check text rectangle
-            if (PlaitDrawElement.isText(element)) {
-                const textClient = getTextRectangle(element);
-                let isHitText = RectangleClient.isPointInRectangle(textClient, point);
-                return isHitText;
-            }
-            // check textRectangle of element
-            const isHitText = isHitElementText(element, point);
-            if (isHitText) {
-                return isHitText;
-            }
-        }
+        //                           keyPoint2
+        //                                |
+        //                                |
+        //             sourcePoint---keyPoint1
+        const ret = simplifyOrthogonalPoints(renderPoints);
+        return ret;
     }
-    if (PlaitDrawElement.isImage(element)) {
-        const client = RectangleClient.getRectangleByPoints(element.points);
-        return RectangleClient.isPointInRectangle(client, point);
+};
+const getNextSourceAndTargetPoints = (board, element) => {
+    const options = getElbowLineRouteOptions(board, element);
+    return [options.nextSourcePoint, options.nextTargetPoint];
+};
+const getSourceAndTargetRectangle = (board, element, handleRefPair) => {
+    let sourceElement = element.source.boundId ? getElementById(board, element.source.boundId) : undefined;
+    let targetElement = element.target.boundId ? getElementById(board, element.target.boundId) : undefined;
+    if (!sourceElement) {
+        const source = handleRefPair.source;
+        sourceElement = createFakeElement(source.point, source.vector);
     }
-    if (PlaitDrawElement.isLine(element)) {
-        return isHitLine(board, element, point);
+    if (!targetElement) {
+        const target = handleRefPair.target;
+        targetElement = createFakeElement(target.point, target.vector);
     }
-    return null;
+    let sourceRectangle = RectangleClient.getRectangleByPoints(sourceElement.points);
+    const rotatedSourceCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(sourceRectangle), sourceElement) ||
+        RectangleClient.getCornerPoints(sourceRectangle);
+    sourceRectangle = RectangleClient.getRectangleByPoints(rotatedSourceCornerPoints);
+    sourceRectangle = RectangleClient.inflate(sourceRectangle, getStrokeWidthByElement(sourceElement) * 2);
+    let targetRectangle = RectangleClient.getRectangleByPoints(targetElement.points);
+    const rotatedTargetCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(targetRectangle), targetElement) ||
+        RectangleClient.getCornerPoints(targetRectangle);
+    targetRectangle = RectangleClient.getRectangleByPoints(rotatedTargetCornerPoints);
+    targetRectangle = RectangleClient.inflate(targetRectangle, getStrokeWidthByElement(targetElement) * 2);
+    return {
+        sourceRectangle,
+        targetRectangle
+    };
 };
-const isHitEdgeOfShape = (board, element, point, hitDistanceBuffer) => {
-    const nearestPoint = getNearestPoint(element, point);
-    const distance = distanceBetweenPointAndPoint(nearestPoint[0], nearestPoint[1], point[0], point[1]);
-    return distance <= hitDistanceBuffer;
+const createFakeElement = (startPoint, vector) => {
+    const point = getPointByVectorComponent(startPoint, vector, -25);
+    const points = RectangleClient.getPoints(RectangleClient.getRectangleByCenterPoint(point, 50, 50));
+    return createGeometryElement(BasicShapes.rectangle, points, '');
 };
-const isInsideOfShape = (board, element, point, hitDistanceBuffer) => {
-    const client = RectangleClient.inflate(RectangleClient.getRectangleByPoints(element.points), hitDistanceBuffer);
-    return getEngine(getElementShape(element)).isInsidePoint(client, point);
+function getNextRenderPoints(board, element, renderPoints) {
+    let newRenderKeyPoints = renderPoints ?? getElbowPoints(board, element);
+    const [nextSourcePoint, nextTargetPoint] = getNextSourceAndTargetPoints(board, element);
+    newRenderKeyPoints.splice(0, 1, nextSourcePoint);
+    newRenderKeyPoints.splice(-1, 1, nextTargetPoint);
+    return removeDuplicatePoints(newRenderKeyPoints);
+}
+
+const getSelectedDrawElements = (board, elements) => {
+    const selectedElements = elements?.length ? elements : getSelectedElements(board);
+    return selectedElements.filter(value => PlaitDrawElement.isDrawElement(value));
 };
-const isHitElementInside = (board, element, point) => {
-    const rectangle = board.getRectangle(element);
-    point = rotateAntiPointsByElement(point, element) || point;
-    if (PlaitDrawElement.isGeometry(element)) {
-        const engine = getEngine(getElementShape(element));
-        const isHitInside = engine.isInsidePoint(rectangle, point);
-        if (isHitInside) {
-            return isHitInside;
-        }
-        if (engine.getTextRectangle) {
-            const isHitText = isHitElementText(element, point);
-            if (isHitText) {
-                return isHitText;
-            }
-        }
-    }
-    if (PlaitDrawElement.isImage(element)) {
-        const client = RectangleClient.getRectangleByPoints(element.points);
-        return RectangleClient.isPointInRectangle(client, point);
-    }
-    if (PlaitDrawElement.isLine(element)) {
-        return isHitLine(board, element, point);
-    }
-    return null;
+const getSelectedGeometryElements = (board) => {
+    const selectedElements = getSelectedElements(board).filter(value => PlaitDrawElement.isGeometry(value));
+    return selectedElements;
+};
+const getSelectedLineElements = (board) => {
+    const selectedElements = getSelectedElements(board).filter(value => PlaitDrawElement.isLine(value));
+    return selectedElements;
+};
+const getSelectedImageElements = (board) => {
+    const selectedElements = getSelectedElements(board).filter(value => PlaitDrawElement.isImage(value));
+    return selectedElements;
+};
+const isSingleSelectSwimlane = (board) => {
+    const selectedElements = getSelectedElements(board);
+    return selectedElements && selectedElements.length === 1 && PlaitDrawElement.isSwimlane(selectedElements[0]);
+};
+const isSingleSelectTable = (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));
 };
 
 const resizeLine = (board, options, path) => {
@@ -2365,9 +2546,7 @@ const addSwimlaneRow = (board, swimlane, index) => {
         const newRows = [...swimlane.rows];
         const newRowId = idCreator();
         newRows.splice(index, 0, { id: newRowId });
-        let newCells = createNewRowCells(swimlane, newRowId);
-        newCells.shift();
-        newCells = [...swimlane.cells, ...newCells];
+        const newCells = [...swimlane.cells, ...createNewSwimlaneCells(swimlane, newRowId, 'column')];
         const lastCellPoints = getCellWithPoints(board, swimlane, swimlane.cells[swimlane.cells.length - 1].id).points;
         const lastRowHeight = RectangleClient.getRectangleByPoints(lastCellPoints).height;
         const newPoints = [swimlane.points[0], [swimlane.points[1][0], swimlane.points[1][1] + lastRowHeight]];
@@ -2379,9 +2558,7 @@ const addSwimlaneColumn = (board, swimlane, index) => {
         const newColumns = [...swimlane.columns];
         const newColumnId = idCreator();
         newColumns.splice(index, 0, { id: newColumnId });
-        let newCells = createNewColumnCells(swimlane, newColumnId);
-        newCells.shift();
-        newCells = [...swimlane.cells, ...newCells];
+        const newCells = [...swimlane.cells, ...createNewSwimlaneCells(swimlane, newColumnId, 'row')];
         const lastCellPoints = getCellWithPoints(board, swimlane, swimlane.cells[swimlane.cells.length - 1].id).points;
         const lastColumnWidth = RectangleClient.getRectangleByPoints(lastCellPoints).width;
         const newPoints = [swimlane.points[0], [swimlane.points[1][0] + lastColumnWidth, swimlane.points[1][1]]];
@@ -2401,7 +2578,8 @@ const removeSwimlaneRow = (board, swimlane, index) => {
             const newCells = swimlane.cells.filter(item => item.rowId !== removeRow.id);
             let removeRowHeight = removeRow.height;
             if (!removeRowHeight) {
-                const cellPoints = getCellWithPoints(board, swimlane, swimlane.cells[index].id).points;
+                const rowCell = swimlane.cells.find(item => item.rowId === removeRow.id);
+                const cellPoints = getCellWithPoints(board, swimlane, rowCell.id).points;
                 removeRowHeight = RectangleClient.getRectangleByPoints(cellPoints).height;
             }
             const newPoints = [swimlane.points[0], [swimlane.points[1][0], swimlane.points[1][1] - removeRowHeight]];
@@ -2422,7 +2600,8 @@ const removeSwimlaneColumn = (board, swimlane, index) => {
             const newCells = swimlane.cells.filter(item => item.columnId !== removeColumn.id);
             let removeColumnWidth = removeColumn.width;
             if (!removeColumnWidth) {
-                const cellPoints = getCellWithPoints(board, swimlane, swimlane.cells[index].id).points;
+                const columnCell = swimlane.cells.find(item => item.columnId === removeColumn.id);
+                const cellPoints = getCellWithPoints(board, swimlane, columnCell.id).points;
                 removeColumnWidth = RectangleClient.getRectangleByPoints(cellPoints).width;
             }
             const newPoints = [swimlane.points[0], [swimlane.points[1][0] - removeColumnWidth, swimlane.points[1][1]]];
@@ -2430,19 +2609,23 @@ const removeSwimlaneColumn = (board, swimlane, index) => {
         }
     }
 };
-const createNewColumnCells = (swimlane, newColumnId) => {
-    return swimlane.rows.map(row => ({
-        id: idCreator(),
-        rowId: row.id,
-        columnId: newColumnId
-    }));
-};
-const createNewRowCells = (swimlane, newRowId) => {
-    return swimlane.columns.map(column => ({
+const createNewSwimlaneCells = (swimlane, newId, type) => {
+    const cells = swimlane[`${type}s`].map(item => ({
         id: idCreator(),
-        rowId: newRowId,
-        columnId: column.id
+        rowId: type === 'row' ? item.id : newId,
+        columnId: type === 'row' ? newId : item.id
     }));
+    cells.shift();
+    cells[0] = {
+        ...cells[0],
+        text: {
+            children: [{ text: 'Lane' }],
+            align: Alignment.center,
+            direction: type === 'row' ? undefined : 'vertical'
+        },
+        textHeight: 20
+    };
+    return cells;
 };
 const updateSwimlane = (board, swimlane, newColumns, newRows, newCells, newPoints) => {
     const path = PlaitBoard.findPath(board, swimlane);
@@ -4757,6 +4940,7 @@ const TableEngine = {
             const cellBottomBorder = drawLine$1(rs, [x, y + height], [x + width, y + height], roughOptions);
             g.append(cellRightBorder, cellBottomBorder);
         });
+        setStrokeLinecap(g, 'round');
         return g;
     },
     isInsidePoint(rectangle, point) {
@@ -5074,6 +5258,130 @@ const CombinedFragmentEngine = {
     }
 };
 
+const DeletionEngine = {
+    draw(board, rectangle, options) {
+        const rs = PlaitBoard.getRoughSVG(board);
+        const shape = rs.path(`M${rectangle.x} ${rectangle.y} L${rectangle.x + rectangle.width} ${rectangle.y + rectangle.height} 
+            M${rectangle.x + rectangle.width} ${rectangle.y} L${rectangle.x} ${rectangle.y + rectangle.height} 
+            `, { ...options, fillStyle: 'solid', strokeWidth: 4 });
+        return shape;
+    },
+    isInsidePoint(rectangle, point) {
+        const rangeRectangle = RectangleClient.getRectangleByPoints([point, point]);
+        return RectangleClient.isHit(rectangle, rangeRectangle);
+    },
+    getCornerPoints(rectangle) {
+        return RectangleClient.getCornerPoints(rectangle);
+    },
+    getNearestPoint(rectangle, point) {
+        return getNearestPointBetweenPointAndSegments(point, RectangleEngine.getCornerPoints(rectangle));
+    },
+    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+        const corners = RectangleEngine.getCornerPoints(rectangle);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getPolygonEdgeByConnectionPoint(corners, point);
+    },
+    getConnectorPoints(rectangle) {
+        return RectangleClient.getEdgeCenterPoints(rectangle);
+    }
+};
+
+const ActiveClassEngine = {
+    draw(board, rectangle, options) {
+        const rs = PlaitBoard.getRoughSVG(board);
+        const shape = rs.path(`M${rectangle.x} ${rectangle.y} H${rectangle.x + rectangle.width} V${rectangle.y + rectangle.height} H${rectangle.x} Z M${rectangle.x + rectangle.width * 0.125} ${rectangle.y} L${rectangle.x + rectangle.width * 0.125} ${rectangle.y +
+            rectangle.height} M${rectangle.x + rectangle.width - rectangle.width * 0.125} ${rectangle.y} L${rectangle.x +
+            rectangle.width -
+            rectangle.width * 0.125} ${rectangle.y + rectangle.height}`, { ...options, fillStyle: 'solid' });
+        setStrokeLinecap(shape, 'round');
+        return shape;
+    },
+    isInsidePoint(rectangle, point) {
+        const rangeRectangle = RectangleClient.getRectangleByPoints([point, point]);
+        return RectangleClient.isHit(rectangle, rangeRectangle);
+    },
+    getCornerPoints(rectangle) {
+        return RectangleClient.getCornerPoints(rectangle);
+    },
+    getNearestPoint(rectangle, point) {
+        return getNearestPointBetweenPointAndSegments(point, RectangleEngine.getCornerPoints(rectangle));
+    },
+    getEdgeByConnectionPoint(rectangle, pointOfRectangle) {
+        const corners = RectangleEngine.getCornerPoints(rectangle);
+        const point = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        return getPolygonEdgeByConnectionPoint(corners, point);
+    },
+    getConnectorPoints(rectangle) {
+        return RectangleClient.getEdgeCenterPoints(rectangle);
+    },
+    getTextRectangle: (element) => {
+        const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
+        const strokeWidth = getStrokeWidthByElement(element);
+        const height = element.textHeight;
+        const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth * 2 - elementRectangle.width * 0.125 * 2;
+        return {
+            height,
+            width: width > 0 ? width : 0,
+            x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth + elementRectangle.width * 0.125,
+            y: elementRectangle.y + (elementRectangle.height - height) / 2
+        };
+    }
+};
+
+const NoteEngine = {
+    draw(board, rectangle, options) {
+        const rs = PlaitBoard.getRoughSVG(board);
+        const shape = rs.path(`M${rectangle.x} ${rectangle.y} 
+            h${rectangle.width - 16}
+            v16
+            h16
+            v${rectangle.height - 16}
+            h${-rectangle.width}
+            Z
+            M${rectangle.x + rectangle.width - 16} ${rectangle.y} 
+            A16 16, 0,0,1, ${rectangle.x + rectangle.width} ${rectangle.y + 16}
+            `, { ...options, fillStyle: 'solid' });
+        setStrokeLinecap(shape, 'round');
+        return shape;
+    },
+    isInsidePoint(rectangle, point) {
+        const rangeRectangle = RectangleClient.getRectangleByPoints([point, point]);
+        return RectangleClient.isHit(rectangle, rangeRectangle);
+    },
+    getCornerPoints(rectangle) {
+        return RectangleClient.getCornerPoints(rectangle);
+    },
+    getNearestPoint(rectangle, point) {
+        const nearestPoint = getNearestPointBetweenPointAndSegments(point, RectangleEngine.getCornerPoints(rectangle));
+        if (nearestPoint[0] > rectangle.x + rectangle.width - 16 && nearestPoint[1] < rectangle.y + 16) {
+            return getNearestPointBetweenPointAndEllipse(point, [rectangle.x + rectangle.width - 16, rectangle.y + 16], 16, 16);
+        }
+        return nearestPoint;
+    },
+    getTangentVectorByConnectionPoint(rectangle, pointOfRectangle) {
+        const connectionPoint = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
+        const centerPoint = [rectangle.x + (rectangle.width * 3) / 4, rectangle.y + rectangle.height / 2];
+        const point = [connectionPoint[0] - centerPoint[0], -(connectionPoint[1] - centerPoint[1])];
+        const slope = getEllipseTangentSlope(point[0], point[1], 16, 16);
+        return getVectorFromPointAndSlope(point[0], point[1], slope);
+    },
+    getConnectorPoints(rectangle) {
+        return RectangleClient.getEdgeCenterPoints(rectangle);
+    },
+    getTextRectangle: (element) => {
+        const elementRectangle = RectangleClient.getRectangleByPoints(element.points);
+        const strokeWidth = getStrokeWidthByElement(element);
+        const height = element.textHeight;
+        const width = elementRectangle.width - ShapeDefaultSpace.rectangleAndText * 2 - strokeWidth - 15;
+        return {
+            height,
+            width: width > 0 ? width : 0,
+            x: elementRectangle.x + ShapeDefaultSpace.rectangleAndText + strokeWidth,
+            y: elementRectangle.y + (elementRectangle.height - height) / 2
+        };
+    }
+};
+
 const ShapeEngineMap = {
     [BasicShapes.rectangle]: RectangleEngine,
     [BasicShapes.diamond]: DiamondEngine,
@@ -5126,8 +5434,18 @@ const ShapeEngineMap = {
     [UMLSymbols.actor]: ActorEngine,
     [UMLSymbols.useCase]: EllipseEngine,
     [UMLSymbols.container]: ContainerEngine,
+    [UMLSymbols.note]: NoteEngine,
     [UMLSymbols.package]: PackageEngine,
-    [UMLSymbols.combinedFragment]: CombinedFragmentEngine
+    [UMLSymbols.combinedFragment]: CombinedFragmentEngine,
+    [UMLSymbols.class]: TableEngine,
+    [UMLSymbols.interface]: TableEngine,
+    [UMLSymbols.activation]: RectangleEngine,
+    [UMLSymbols.object]: RectangleEngine,
+    [UMLSymbols.deletion]: DeletionEngine,
+    [UMLSymbols.activityClass]: ActiveClassEngine,
+    [UMLSymbols.simpleClass]: RectangleEngine,
+    [UMLSymbols.port]: RectangleEngine,
+    [UMLSymbols.branchMerge]: DiamondEngine
 };
 const getEngine = (shape) => {
     return ShapeEngineMap[shape];
@@ -5381,7 +5699,7 @@ const PlaitDrawElement = {
         return Object.keys(SwimlaneSymbols).includes(value.shape) && value.shape === SwimlaneSymbols.swimlaneHorizontal;
     },
     isUMLClassOrInterface: (value) => {
-        return false;
+        return Object.keys(UMLSymbols).includes(value.shape) && [UMLSymbols.class, UMLSymbols.interface].includes(value.shape);
     }
 };
 
@@ -5838,7 +6156,7 @@ const withDrawHotkey = (board) => {
             const hitElement = getHitElementByPoint(board, point);
             if (hitElement && PlaitDrawElement.isGeometry(hitElement)) {
                 if (isMultipleTextGeometry(hitElement)) {
-                    const hitText = getHitText(hitElement, point) ||
+                    const hitText = getHitMultipleGeometryText(hitElement, point) ||
                         hitElement.texts.find(item => item.key.includes(MultipleTextGeometryCommonTextKeys.content)) ||
                         hitElement.texts[0];
                     editText(board, hitElement, hitText);
@@ -5853,6 +6171,21 @@ const withDrawHotkey = (board) => {
     return board;
 };
 
+class TableGenerator extends Generator {
+    canDraw(element, data) {
+        return true;
+    }
+    draw(element, data) {
+        const rectangle = RectangleClient.getRectangleByPoints(element.points);
+        return getEngine(TableSymbols.table).draw(this.board, rectangle, {
+            strokeWidth: 2,
+            stroke: getDrawDefaultStrokeColor(this.board.theme.themeColorMode),
+        }, {
+            element: element
+        });
+    }
+}
+
 const isGeometryDndMode = (board) => {
     const geometryPointers = getGeometryPointers();
     const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
@@ -5865,6 +6198,14 @@ const isGeometryDrawingMode = (board) => {
     const drawingMode = isGeometryPointer && isDrawingMode(board);
     return drawingMode;
 };
+const getGeometryGeneratorByShape = (board, shape) => {
+    if (PlaitDrawElement.isUMLClassOrInterface({ shape: shape })) {
+        return new TableGenerator(board);
+    }
+    else {
+        return new GeometryShapeGenerator(board);
+    }
+};
 const withGeometryCreateByDrag = (board) => {
     const { pointerMove, globalPointerUp, pointerUp } = board;
     let geometryShapeG = null;
@@ -5873,12 +6214,12 @@ const withGeometryCreateByDrag = (board) => {
     board.pointerMove = (event) => {
         geometryShapeG?.remove();
         geometryShapeG = createG();
-        const geometryGenerator = new GeometryShapeGenerator(board);
         const geometryPointers = getGeometryPointers();
         const isGeometryPointer = PlaitBoard.isInPointer(board, geometryPointers);
         const dragMode = isGeometryPointer && isDndMode(board);
         const movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         const pointer = PlaitBoard.getPointer(board);
+        const geometryGenerator = getGeometryGeneratorByShape(board, pointer);
         if (dragMode) {
             const memorizedLatest = getMemorizedLatestByPointer(pointer);
             if (pointer === BasicShapes.text) {
@@ -5973,9 +6314,9 @@ const withGeometryCreateByDrawing = (board) => {
     board.pointerMove = (event) => {
         geometryShapeG?.remove();
         geometryShapeG = createG();
-        const geometryGenerator = new GeometryShapeGenerator(board);
         const movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         const pointer = PlaitBoard.getPointer(board);
+        const geometryGenerator = getGeometryGeneratorByShape(board, pointer);
         snapG?.remove();
         if (start && isGeometryDrawingMode(board)) {
             let points = normalizeShapePoints([start, movingPoint], isShift);
@@ -6108,7 +6449,8 @@ const withDrawFragment = (baseBoard) => {
             const tableElements = drawElements.filter(value => PlaitDrawElement.isTable(value));
             const boundLineElements = [
                 ...getBoundedLineElements(board, geometryElements),
-                ...getBoundedLineElements(board, imageElements)
+                ...getBoundedLineElements(board, imageElements),
+                ...getBoundedLineElements(board, tableElements)
             ].filter(line => !lineElements.includes(line));
             data.push(...[
                 ...geometryElements,
@@ -6275,7 +6617,7 @@ const withGeometryResize = (board) => {
             snapG = resizeSnapRef.snapG;
             PlaitBoard.getElementActiveHost(board).append(snapG);
             let points = resizeSnapRef.activePoints;
-            if (PlaitDrawElement.isGeometry(resizeRef.element)) {
+            if (PlaitDrawElement.isGeometry(resizeRef.element) && isGeometryIncludeText(resizeRef.element)) {
                 const { height: textHeight } = getFirstTextManage(resizeRef.element).getSize();
                 DrawTransforms.resizeGeometry(board, points, textHeight, resizeRef.path);
             }
@@ -6876,21 +7218,6 @@ const withDrawRotate = (board) => {
     return board;
 };
 
-class TableGenerator extends Generator {
-    canDraw(element, data) {
-        return true;
-    }
-    draw(element, data) {
-        const rectangle = RectangleClient.getRectangleByPoints(element.points);
-        return getEngine(TableSymbols.table).draw(this.board, rectangle, {
-            strokeWidth: 2,
-            stroke: getDrawDefaultStrokeColor(this.board.theme.themeColorMode),
-        }, {
-            element: element
-        });
-    }
-}
-
 class TableComponent extends CommonElementFlavour {
     constructor() {
         super();
@@ -6942,7 +7269,9 @@ class TableComponent extends CommonElementFlavour {
         });
     }
     getDrawShapeTexts(cells) {
-        return cells.map(item => {
+        return cells
+            .filter(item => isCellIncludeText(item))
+            .map(item => {
             return {
                 key: item.id,
                 text: item.text,
@@ -7202,7 +7531,13 @@ function buildSwimlaneTable(element) {
                 };
             }
             if (item.text && item.textHeight && !item.text.direction) {
-                item.text.direction = 'vertical';
+                item = {
+                    ...item,
+                    text: {
+                        ...item.text,
+                        direction: 'vertical'
+                    }
+                };
             }
             return item;
         });
@@ -7554,5 +7889,5 @@ const withDraw = (board) => {
  * Generated bundle index. Do not edit.
  */
 
-export { BasicShapes, DEFAULT_IMAGE_WIDTH, DEFAULT_TEXT_HEIGHT, DefaultActorProperty, DefaultArrowProperty, DefaultBasicShapeProperty, DefaultBasicShapePropertyMap, DefaultCloudProperty, DefaultCombinedFragmentProperty, DefaultConnectorProperty, DefaultContainerProperty, DefaultDataBaseProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultDocumentProperty, DefaultDrawActiveStyle, DefaultDrawStyle, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultInternalStorageProperty, DefaultManualInputProperty, DefaultMergeProperty, DefaultMultiDocumentProperty, DefaultNoteProperty, DefaultPackageProperty, DefaultPentagonArrowProperty, DefaultSwimlaneHorizontalProperty, DefaultSwimlanePropertyMap, DefaultSwimlaneVerticalProperty, DefaultTextProperty, DefaultTwoWayArrowProperty, DefaultUMLPropertyMap, DrawThemeColors, DrawTransforms, FlowchartSymbols, GEOMETRY_WITHOUT_TEXT, GeometryComponent, GeometryShapeGenerator, GeometryThreshold, KEY_TO_TEXT_MANAGE, LINE_HIT_GEOMETRY_BUFFER, LINE_SNAPPING_BUFFER, LINE_SNAPPING_CONNECTOR_BUFFER, LineActiveGenerator, LineAutoCompleteGenerator, LineComponent, LineHandleKey, LineMarkerType, LineShape, MemorizeKey, MultipleTextGeometryCommonTextKeys, MultipleTextGeometryTextKeys, PlaitDrawElement, PlaitGeometry, PlaitLine, Q2C, ShapeDefaultSpace, SingleTextGenerator, StrokeStyle, SwimlaneSymbols, TableGenerator, TableSymbols, TextGenerator, UMLSymbols, WithLineAutoCompletePluginKey, alignElbowSegment, alignPoints, buildDefaultTextsByShape, createDefaultFlowchart, createDefaultGeometry, createGeometryElement, createGeometryElementWithText, createGeometryElementWithoutText, createLineElement, createMultipleTextGeometryElement, createTextElement, debugGenerator$1 as debugGenerator, deleteTextManage, drawBoundReaction, drawGeometry, drawLine, drawLineArrow, drawShape, editText, getAutoCompletePoints, getBasicPointers, getCenterPointsOnPolygon$1 as getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultBasicShapeProperty, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultTextPoints, getDefaultUMLProperty, getDrawDefaultStrokeColor, getElbowLineRouteOptions, getElbowPoints, getFillByElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryPointers, getHitConnection, getHitConnectorPoint, getHitIndexOfAutoCompletePoint, getHitShape, getHitText, 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, getTextManage, getTextRectangle, getTextShapeProperty, getUMLPointers, getVectorByConnection, handleLineCreating, hasIllegalElbowPoint, insertElement, isDrawElementsIncludeText, isGeometryIncludeText, isHitDrawElement, isHitEdgeOfShape, isHitElementInside, isHitElementText, isHitLine, isHitLineText, isHitPolyLine, isInsideOfShape, isMultipleTextGeometry, isMultipleTextShape, isRectangleHitDrawElement, isRectangleHitElementText, isSelfLoop, isSingleSelectSwimlane, isSingleSelectTable, isTextExceedingBounds, isUpdatedHandleIndex, isUseDefaultOrthogonalRoute, memorizeLatestShape, memorizeLatestText, rerenderGeometryActive, setTextManage, traverseDrawShapes, withDraw, withLineAutoComplete };
+export { BasicShapes, DEFAULT_IMAGE_WIDTH, DEFAULT_TEXT_HEIGHT, DefaultActivationProperty, DefaultActorProperty, DefaultArrowProperty, DefaultBasicShapeProperty, DefaultBasicShapePropertyMap, DefaultClassProperty, DefaultCloudProperty, DefaultCombinedFragmentProperty, DefaultConnectorProperty, DefaultContainerProperty, DefaultDataBaseProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultDeletionProperty, DefaultDocumentProperty, DefaultDrawActiveStyle, DefaultDrawStyle, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultInterfaceProperty, DefaultInternalStorageProperty, DefaultManualInputProperty, DefaultMergeProperty, DefaultMultiDocumentProperty, DefaultNoteProperty, DefaultObjectProperty, DefaultPackageProperty, DefaultPentagonArrowProperty, DefaultPortProperty, DefaultSwimlaneHorizontalProperty, DefaultSwimlanePropertyMap, DefaultSwimlaneVerticalProperty, DefaultTextProperty, DefaultTwoWayArrowProperty, DefaultUMLPropertyMap, DrawThemeColors, DrawTransforms, FlowchartSymbols, GEOMETRY_WITHOUT_TEXT, GEOMETRY_WITH_MULTIPLE_TEXT, GeometryComponent, GeometryShapeGenerator, GeometryThreshold, KEY_TO_TEXT_MANAGE, LINE_HIT_GEOMETRY_BUFFER, LINE_SNAPPING_BUFFER, LINE_SNAPPING_CONNECTOR_BUFFER, LineActiveGenerator, LineAutoCompleteGenerator, LineComponent, LineHandleKey, LineMarkerType, LineShape, MemorizeKey, MultipleTextGeometryCommonTextKeys, MultipleTextGeometryTextKeys, PlaitDrawElement, PlaitGeometry, PlaitLine, Q2C, ShapeDefaultSpace, SingleTextGenerator, StrokeStyle, SwimlaneSymbols, TableGenerator, TableSymbols, TextGenerator, UMLSymbols, WithLineAutoCompletePluginKey, alignElbowSegment, alignPoints, buildDefaultTextsByShape, createDefaultFlowchart, createDefaultGeometry, createGeometryElement, createGeometryElementWithText, createGeometryElementWithoutText, createLineElement, createMultipleTextGeometryElement, createTextElement, createUMLClassOrInterfaceGeometryElement, debugGenerator$1 as debugGenerator, deleteTextManage, drawBoundReaction, drawGeometry, drawLine, drawLineArrow, drawShape, editText, getAutoCompletePoints, getBasicPointers, getCenterPointsOnPolygon$1 as getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultBasicShapeProperty, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultTextPoints, getDefaultUMLProperty, getDrawDefaultStrokeColor, getElbowLineRouteOptions, getElbowPoints, getFillByElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryAlign, getGeometryPointers, getHitConnection, getHitConnectorPoint, getHitIndexOfAutoCompletePoint, getHitMultipleGeometryText, getHitShape, getIndexAndDeleteCountByKeyPoint, getLineDashByElement, getLineHandleRefPair, getLineMemorizedLatest, getLinePointers, getLinePoints, getLineTextRectangle, getLines, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getMidKeyPoints, getMiddlePoints, getMirrorDataPoints, getMultipleTextGeometryTextKeys, getNearestPoint, getNextRenderPoints, getNextSourceAndTargetPoints, getResizedPreviousAndNextPoint, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedLineElements, getSelectedTableElements, getSnapResizingRef, getSnapResizingRefOptions, getSnappingRef, getSnappingShape, getSourceAndTargetRectangle, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getSwimlanePointers, getTextKey, getTextManage, getTextRectangle, getTextShapeProperty, getUMLPointers, getVectorByConnection, handleLineCreating, hasIllegalElbowPoint, insertElement, isDrawElementIncludeText, isDrawElementsIncludeText, isGeometryIncludeText, isHitDrawElement, isHitEdgeOfShape, isHitElementInside, isHitElementText, isHitLine, isHitLineText, isHitPolyLine, isInsideOfShape, isMultipleTextGeometry, isMultipleTextShape, isRectangleHitDrawElement, isRectangleHitElementText, isSelfLoop, isSingleSelectSwimlane, isSingleSelectTable, isSingleTextGeometry, isSingleTextShape, isTextExceedingBounds, isUpdatedHandleIndex, isUseDefaultOrthogonalRoute, memorizeLatestShape, memorizeLatestText, rerenderGeometryActive, setTextManage, traverseDrawShapes, withDraw, withLineAutoComplete };
 //# sourceMappingURL=plait-draw.mjs.map