@plait/draw 0.62.0-next.0 → 0.62.0-next.10

package/fesm2022/plait-draw.mjs

@@ -1,5 +1,5 @@
-import { ACTIVE_STROKE_WIDTH, ThemeColorMode, RectangleClient, idCreator, distanceBetweenPointAndSegments, HIT_DISTANCE_BUFFER, rotatePointsByElement, isPolylineHitRectangle, rotateAntiPointsByElement, distanceBetweenPointAndPoint, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, depthFirstRecursion, PlaitBoard, getIsRecursionFunc, createG, SNAPPING_STROKE_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, createDebugGenerator, Point, arrowPoints, createPath, drawLinearPath, rotate, catmullRomFitting, setStrokeLinecap, findElements, createMask, createRect, PlaitElement, getSelectedElements, getElementById, Path, Direction, PlaitNode, hasValidAngle, toViewBoxPoint, toHostPoint, rotatePoints, getRectangleByElements, getSelectionAngle, rotatedDataPoints, isAxisChangedByAngle, isSelectionMoving, drawRectangle, getRectangleByAngle, getSnapRectangles, getTripleAxis, getMinPointDelta, SNAP_TOLERANCE, drawPointSnapLines, drawSolidLines, isPointInPolygon, getNearestPointBetweenPointAndSegments, isPointInEllipse, getNearestPointBetweenPointAndEllipse, getEllipseTangentSlope, getVectorFromPointAndSlope, drawRoundRectangle, isPointInRoundRectangle, setPathStrokeLinecap, getCrossingPointsBetweenEllipseAndSegment, drawLine as drawLine$1, RgbaToHEX, getHitElementByPoint, preventTouchMove, WritableClipboardOperationType, createClipboardContext, WritableClipboardType, addClipboardContext, setAngleForG, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER, isMainPointer, throttleRAF, getAngleBetweenPoints, normalizeAngle, degreesToRadians, rotateElements, MERGING, ROTATE_HANDLE_CLASS_NAME, SELECTION_RECTANGLE_CLASS_NAME, isSelectedElement, isDragging } from '@plait/core';
-import { Alignment, WithTextPluginKey, ELEMENT_TO_TEXT_MANAGES, TextManage, getMemorizedLatest, memorizeLatest, RESIZE_HANDLE_DIAMETER, getPointOnPolyline, buildText, TRANSPARENT, getTextEditorsByElement, Generator, removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, getExtendPoint, getUnitVectorByPointAndPoint, getPointByVectorComponent, measureElement, DEFAULT_FONT_FAMILY, getFirstTextManage, ActiveGenerator, isSourceAndTargetIntersect, getPoints, DEFAULT_ROUTE_MARGIN, getDirectionByVector, normalizeShapePoints, getFirstTextEditor, resetPointsAfterResize, getRectangleResizeHandleRefs, getRotatedResizeCursorClassByAngle, ROTATE_HANDLE_DISTANCE_TO_ELEMENT, ROTATE_HANDLE_SIZE, isCornerHandle, getIndexByResizeHandle, withResize, drawHandle, getSymmetricHandleIndex, getResizeHandlePointByIndex, getDirectionFactorByDirectionComponent, getCrossingPointsBetweenPointAndSegment, isPointOnSegment, getDirectionByPointOfRectangle, getDirectionFactor, rotateVector, getOppositeDirection, rotateVectorAnti90, getSourceAndTargetOuterRectangle, getNextPoint, PRIMARY_COLOR, CommonElementFlavour, canResize, drawPrimaryHandle, drawFillPrimaryHandle, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, getElementsText, acceptImageTypes, getElementOfFocusedImage, buildImage, isResizingByCondition, getRatioByPoint, getTextManages, ImageGenerator, ResizeHandle, addRotating, removeRotating, drawRotateHandle } from '@plait/common';
+import { ACTIVE_STROKE_WIDTH, ThemeColorMode, RectangleClient, getSelectedElements, 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, getElementById, PlaitNode, hasValidAngle, toViewBoxPoint, toHostPoint, Direction, 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, Path, RgbaToHEX, getHitElementByPoint, preventTouchMove, WritableClipboardOperationType, createClipboardContext, WritableClipboardType, addClipboardContext, setAngleForG, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER, isMainPointer, throttleRAF, getAngleBetweenPoints, normalizeAngle, degreesToRadians, rotateElements, MERGING, ROTATE_HANDLE_CLASS_NAME, SELECTION_RECTANGLE_CLASS_NAME, isSelectedElement, isDragging } from '@plait/core';
+import { DEFAULT_FILL, Alignment, WithTextPluginKey, ELEMENT_TO_TEXT_MANAGES, TextManage, getMemorizedLatest, memorizeLatest, RESIZE_HANDLE_DIAMETER, getPointOnPolyline, buildText, sortElementsByArea, isFilled, getTextEditorsByElement, Generator, removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, getExtendPoint, getUnitVectorByPointAndPoint, getPointByVectorComponent, measureElement, DEFAULT_FONT_FAMILY, getFirstTextManage, ActiveGenerator, isSourceAndTargetIntersect, getPoints, DEFAULT_ROUTE_MARGIN, normalizeShapePoints, getFirstTextEditor, resetPointsAfterResize, getDirectionByVector, getRectangleResizeHandleRefs, getRotatedResizeCursorClassByAngle, ROTATE_HANDLE_DISTANCE_TO_ELEMENT, ROTATE_HANDLE_SIZE, isCornerHandle, getIndexByResizeHandle, withResize, drawHandle, getSymmetricHandleIndex, getResizeHandlePointByIndex, getDirectionFactorByDirectionComponent, getCrossingPointsBetweenPointAndSegment, isPointOnSegment, getDirectionByPointOfRectangle, getDirectionFactor, rotateVector, getOppositeDirection, rotateVectorAnti90, getSourceAndTargetOuterRectangle, getNextPoint, PRIMARY_COLOR, CommonElementFlavour, canResize, drawPrimaryHandle, drawFillPrimaryHandle, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, getElementsText, acceptImageTypes, getElementOfFocusedImage, buildImage, isResizingByCondition, getRatioByPoint, getTextManages, ImageGenerator, ResizeHandle, addRotating, removeRotating, drawRotateHandle } from '@plait/common';
 import { pointsOnBezierCurves } from 'points-on-curve';
 import { TEXT_DEFAULT_HEIGHT, DEFAULT_FONT_SIZE, AlignEditor } from '@plait/text-plugins';
 import { isKeyHotkey } from 'is-hotkey';
@@ -120,7 +120,7 @@ const DefaultDrawStyle = {
     strokeWidth: 2,
     defaultRadius: 4,
     strokeColor: '#000',
-    fill: 'none'
+    fill: DEFAULT_FILL
 };
 const DefaultDrawActiveStyle = {
     strokeWidth: ACTIVE_STROKE_WIDTH,
@@ -374,6 +374,13 @@ const GEOMETRY_WITHOUT_TEXT = [
     UMLSymbols.requiredInterface
 ];
 const GEOMETRY_WITH_MULTIPLE_TEXT = [UMLSymbols.package, UMLSymbols.combinedFragment];
+const GEOMETRY_NOT_CLOSED = [
+    FlowchartSymbols.noteCurlyLeft,
+    FlowchartSymbols.noteCurlyRight,
+    FlowchartSymbols.noteSquare,
+    UMLSymbols.requiredInterface,
+    UMLSymbols.deletion
+];
 
 const getGeometryPointers = () => {
     return [...Object.keys(BasicShapes), ...Object.keys(FlowchartSymbols), ...Object.keys(UMLSymbols)];
@@ -390,8 +397,8 @@ const getFlowchartPointers = () => {
 const getUMLPointers = () => {
     return Object.keys(UMLSymbols);
 };
-const getLinePointers = () => {
-    return Object.keys(LineShape);
+const getArrowLinePointers = () => {
+    return Object.keys(ArrowLineShape);
 };
 
 const DEFAULT_IMAGE_WIDTH = 1000;
@@ -578,8 +585,34 @@ class TextGenerator {
     }
 }
 
+const isSingleSelectTable = (board) => {
+    const selectedElements = getSelectedElements(board);
+    return selectedElements && selectedElements.length === 1 && PlaitDrawElement.isElementByTable(selectedElements[0]);
+};
+const isSingleSelectElementByTable = (board) => {
+    const selectedElements = getSelectedElements(board);
+    return selectedElements && selectedElements.length === 1 && PlaitDrawElement.isElementByTable(selectedElements[0]);
+};
+const getSelectedTableElements = (board, elements) => {
+    const selectedElements = elements?.length ? elements : getSelectedElements(board);
+    return selectedElements.filter(value => PlaitDrawElement.isElementByTable(value));
+};
+const SELECTED_CELLS = new WeakMap();
+function getSelectedCells(element) {
+    return SELECTED_CELLS.get(element);
+}
+function setSelectedCells(element, cells) {
+    return SELECTED_CELLS.set(element, cells);
+}
+function clearSelectedCells(element) {
+    return SELECTED_CELLS.delete(element);
+}
+
 function getCellsWithPoints(board, element) {
-    const table = board.buildTable(element);
+    const table = board?.buildTable(element);
+    if (!table || !table.points || !table.columns || !table.rows) {
+        throw new Error('can not get table cells points');
+    }
     const rectangle = RectangleClient.getRectangleByPoints(table.points);
     const columnsCount = table.columns.length;
     const rowsCount = table.rows.length;
@@ -611,9 +644,14 @@ function getCellsWithPoints(board, element) {
     return cells;
 }
 function getCellWithPoints(board, table, cellId) {
-    const cells = getCellsWithPoints(board, table);
-    const cellIndex = table.cells.findIndex(item => item.id === cellId);
-    return cells[cellIndex];
+    try {
+        const cells = getCellsWithPoints(board, table);
+        const cellIndex = cells && table.cells.findIndex(item => item.id === cellId);
+        return cells[cellIndex];
+    }
+    catch (error) {
+        throw new Error('can not get table cell points');
+    }
 }
 function calculateCellsSize(items, tableSize, count, isWidth) {
     const cellSizes = [];
@@ -722,6 +760,20 @@ const createCell = (rowId, columnId, text = null) => {
     }
     return cell;
 };
+const getSelectedTableCellsEditor = (board) => {
+    if (isSingleSelectElementByTable(board)) {
+        const elements = getSelectedTableElements(board);
+        const selectedCells = getSelectedCells(elements[0]);
+        const selectedCellsEditor = selectedCells?.map(cell => {
+            const textManage = getTextManageByCell(cell);
+            return textManage?.editor;
+        });
+        if (selectedCellsEditor?.length) {
+            return selectedCellsEditor;
+        }
+    }
+    return undefined;
+};
 
 const SHAPE_MAX_LENGTH = 6;
 const memorizedShape = new WeakMap();
@@ -740,8 +792,8 @@ const getMemorizeKey = (element) => {
             key = MemorizeKey.flowchart;
             break;
         }
-        case PlaitDrawElement.isLine(element): {
-            key = MemorizeKey.line;
+        case PlaitDrawElement.isArrowLine(element): {
+            key = MemorizeKey.arrowLine;
             break;
         }
         case PlaitDrawElement.isUML(element): {
@@ -751,8 +803,7 @@ const getMemorizeKey = (element) => {
     return key;
 };
 const getLineMemorizedLatest = () => {
-    const properties = getMemorizedLatest(MemorizeKey.line);
-    delete properties?.text;
+    const properties = getMemorizedLatest(MemorizeKey.arrowLine);
     return { ...properties } || {};
 };
 const getMemorizedLatestByPointer = (pointer) => {
@@ -815,25 +866,25 @@ const getMemorizedLatestShape = (board) => {
     return memorizedShape.get(board);
 };
 
-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);
+var ArrowLineResizeHandle;
+(function (ArrowLineResizeHandle) {
+    ArrowLineResizeHandle["source"] = "source";
+    ArrowLineResizeHandle["target"] = "target";
+    ArrowLineResizeHandle["addHandle"] = "addHandle";
+})(ArrowLineResizeHandle || (ArrowLineResizeHandle = {}));
+const getHitArrowLineResizeHandleRef = (board, element, point) => {
+    let dataPoints = PlaitArrowLine.getPoints(board, element);
     const index = getHitPointIndex(dataPoints, point);
     if (index !== -1) {
         const handleIndex = index;
         if (index === 0) {
-            return { handle: LineResizeHandle.source, handleIndex };
+            return { handle: ArrowLineResizeHandle.source, handleIndex };
         }
         if (index === dataPoints.length - 1) {
-            return { handle: LineResizeHandle.target, handleIndex };
+            return { handle: ArrowLineResizeHandle.target, handleIndex };
         }
         // elbow line, data points only verify source connection point and target connection point
-        if (element.shape !== LineShape.elbow) {
+        if (element.shape !== ArrowLineShape.elbow) {
             return { handleIndex };
         }
     }
@@ -841,7 +892,7 @@ const getHitLineResizeHandleRef = (board, element, point) => {
     const indexOfMiddlePoints = getHitPointIndex(middlePoints, point);
     if (indexOfMiddlePoints !== -1) {
         return {
-            handle: LineResizeHandle.addHandle,
+            handle: ArrowLineResizeHandle.addHandle,
             handleIndex: indexOfMiddlePoints
         };
     }
@@ -861,11 +912,11 @@ function getHitPointIndex(points, movingPoint) {
     });
     return rectangle ? rectangles.indexOf(rectangle) : -1;
 }
-const getHitLineTextIndex = (board, element, point) => {
+const getHitArrowLineTextIndex = (board, element, point) => {
     const texts = element.texts;
     if (!texts.length)
         return -1;
-    const points = getLinePoints(board, element);
+    const points = getArrowLinePoints(board, element);
     return texts.findIndex(text => {
         const center = getPointOnPolyline(points, text.position);
         const rectangle = {
@@ -939,46 +990,46 @@ const isTextExceedingBounds = (geometry) => {
     }
     return false;
 };
-const isHitLineText = (board, element, point) => {
-    return getHitLineTextIndex(board, element, point) !== -1;
+const isHitArrowLineText = (board, element, point) => {
+    return getHitArrowLineTextIndex(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);
+const isHitArrowLine = (board, element, point) => {
+    const points = getArrowLinePoints(board, element);
+    const isHitText = isHitArrowLineText(board, element, point);
     return isHitText || isHitPolyLine(points, point);
 };
-const isHitElementText = (element, 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 });
-            return RectangleClient.isPointInRectangle(textClient, point);
+            const rotatedCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(textClient), element) || RectangleClient.getCornerPoints(textClient);
+            return isPolylineHitRectangle(rotatedCornerPoints, rectangle);
         });
     }
     else {
         const textClient = engine.getTextRectangle ? engine.getTextRectangle(element) : getTextRectangle(element);
-        return RectangleClient.isPointInRectangle(textClient, point);
+        const rotatedCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(textClient), element) || RectangleClient.getCornerPoints(textClient);
+        return isPolylineHitRectangle(rotatedCornerPoints, rectangle);
     }
 };
-const isRectangleHitElementText = (element, rectangle) => {
+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 });
-            const rotatedCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(textClient), element) || RectangleClient.getCornerPoints(textClient);
-            return isPolylineHitRectangle(rotatedCornerPoints, rectangle);
+            return RectangleClient.isPointInRectangle(textClient, point);
         });
     }
     else {
         const textClient = engine.getTextRectangle ? engine.getTextRectangle(element) : getTextRectangle(element);
-        const rotatedCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(textClient), element) || RectangleClient.getCornerPoints(textClient);
-        return isPolylineHitRectangle(rotatedCornerPoints, rectangle);
+        return RectangleClient.isPointInRectangle(textClient, point);
     }
 };
 const isRectangleHitDrawElement = (board, element, selection) => {
@@ -997,48 +1048,72 @@ const isRectangleHitDrawElement = (board, element, selection) => {
         const rotatedCornerPoints = rotatePointsByElement(RectangleClient.getCornerPoints(client), element) || RectangleClient.getCornerPoints(client);
         return isPolylineHitRectangle(rotatedCornerPoints, rangeRectangle);
     }
-    if (PlaitDrawElement.isLine(element)) {
-        const points = getLinePoints(board, element);
+    if (PlaitDrawElement.isArrowLine(element)) {
+        const points = getArrowLinePoints(board, element);
         return isPolylineHitRectangle(points, rangeRectangle);
     }
     return null;
 };
+const getDrawHitElement = (board, elements) => {
+    let firstFilledElement = getFirstFilledDrawElement(board, elements);
+    let endIndex = elements.length;
+    if (firstFilledElement) {
+        endIndex = elements.indexOf(firstFilledElement) + 1;
+    }
+    const newElements = elements.slice(0, endIndex);
+    const element = getFirstTextOrLineElement(newElements);
+    if (element) {
+        return element;
+    }
+    const sortElements = sortElementsByArea(board, newElements, 'asc');
+    return sortElements[0];
+};
+const getFirstFilledDrawElement = (board, elements) => {
+    let filledElement = null;
+    for (let i = 0; i < elements.length; i++) {
+        const element = elements[i];
+        if (PlaitDrawElement.isGeometry(element) && !PlaitDrawElement.isText(element)) {
+            const fill = getFillByElement(board, element);
+            if (isFilled(fill)) {
+                filledElement = element;
+                break;
+            }
+        }
+    }
+    return filledElement;
+};
+const getFirstTextOrLineElement = (elements) => {
+    const texts = elements.filter(item => PlaitDrawElement.isText(item));
+    if (texts.length) {
+        return texts[0];
+    }
+    const lines = elements.filter(item => PlaitDrawElement.isArrowLine(item));
+    if (lines.length) {
+        return lines[0];
+    }
+    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.isText(element)) {
+            const textClient = getTextRectangle(element);
+            return RectangleClient.isPointInRectangle(textClient, point);
         }
+        const isHitText = isHitElementText(element, point);
+        return isHitText || engine.isInsidePoint(rectangle, point);
     }
     if (PlaitDrawElement.isImage(element)) {
         const client = RectangleClient.getRectangleByPoints(element.points);
         return RectangleClient.isPointInRectangle(client, point);
     }
-    if (PlaitDrawElement.isLine(element)) {
-        return isHitLine(board, element, point);
+    if (PlaitDrawElement.isArrowLine(element)) {
+        return isHitArrowLine(board, element, point);
     }
     return null;
 };
@@ -1071,8 +1146,8 @@ const isHitElementInside = (board, element, point) => {
         const client = RectangleClient.getRectangleByPoints(element.points);
         return RectangleClient.isPointInRectangle(client, point);
     }
-    if (PlaitDrawElement.isLine(element)) {
-        return isHitLine(board, element, point);
+    if (PlaitDrawElement.isArrowLine(element)) {
+        return isHitArrowLine(board, element, point);
     }
     return null;
 };
@@ -1113,7 +1188,7 @@ const isDrawElementIncludeText = (element) => {
     if (PlaitDrawElement.isGeometry(element)) {
         return isGeometryIncludeText(element);
     }
-    if (PlaitDrawElement.isLine(element)) {
+    if (PlaitDrawElement.isArrowLine(element)) {
         const editors = getTextEditorsByElement(element);
         return editors.length > 0;
     }
@@ -1127,6 +1202,15 @@ const isDrawElementsIncludeText = (elements) => {
         return isDrawElementIncludeText(item);
     });
 };
+const isDrawElementClosed = (element) => {
+    if (PlaitDrawElement.isText(element) || PlaitDrawElement.isArrowLine(element) || PlaitDrawElement.isImage(element)) {
+        return false;
+    }
+    if (PlaitDrawElement.isGeometry(element)) {
+        return isGeometryClosed(element);
+    }
+    return true;
+};
 const getSnappingShape = (board, point) => {
     let hitElement = getHitShape(board, point);
     if (hitElement) {
@@ -1181,7 +1265,7 @@ const drawBoundReaction = (board, element, roughOptions = { hasMask: true, hasCo
         const maskG = drawShape(board, activeRectangle, shape, {
             stroke: SELECTION_BORDER_COLOR,
             strokeWidth: 0,
-            fill: SELECTION_FILL_COLOR,
+            fill: isDrawElementClosed(element) ? SELECTION_FILL_COLOR : DefaultDrawStyle.fill,
             fillStyle: 'solid'
         }, drawOptions);
         g.appendChild(maskG);
@@ -1229,7 +1313,7 @@ const getStrokeColorByElement = (board, element) => {
     return strokeColor;
 };
 const getFillByElement = (board, element) => {
-    const defaultFill = PlaitDrawElement.isFlowchart(element)
+    const defaultFill = PlaitDrawElement.isFlowchart(element) && isDrawElementClosed(element)
         ? getFlowchartDefaultFill(board.theme.themeColorMode)
         : DefaultDrawStyle.fill;
     const fill = element.fill || defaultFill;
@@ -1240,7 +1324,7 @@ const getLineDashByElement = (element) => {
         case StrokeStyle.dashed:
             return [8, 8 + getStrokeWidthByElement(element)];
         case StrokeStyle.dotted:
-            return [0, 4 + getStrokeWidthByElement(element)];
+            return [2, 4 + getStrokeWidthByElement(element)];
         default:
             return undefined;
     }
@@ -1261,13 +1345,13 @@ const LINE_AUTO_COMPLETE_HOVERED_DIAMETER = 10;
 const LINE_ALIGN_TOLERANCE = 3;
 const LINE_TEXT = '文本';
 
-class LineShapeGenerator extends Generator {
+class ArrowLineShapeGenerator extends Generator {
     canDraw(element, data) {
         return true;
     }
     draw(element, data) {
         let lineG;
-        lineG = drawLine(this.board, element);
+        lineG = drawArrowLine(this.board, element);
         return lineG;
     }
 }
@@ -1408,7 +1492,7 @@ function getIndexAndDeleteCountByKeyPoint(board, element, dataPoints, nextRender
     if (index === null) {
         deleteCount = 0;
         if (midDataPoints.length > 0) {
-            const handleRefPair = getLineHandleRefPair(board, element);
+            const handleRefPair = getArrowLineHandleRefPair(board, element);
             const params = getElbowLineRouteOptions(board, element, handleRefPair);
             const keyPoints = removeDuplicatePoints(generateElbowLineRoute(params, board));
             const nextKeyPoints = simplifyOrthogonalPoints(keyPoints.slice(1, keyPoints.length - 1));
@@ -1578,9 +1662,9 @@ const hasIllegalElbowPoint = (midDataPoints) => {
 };
 
 const ARROW_LENGTH = 20;
-const drawLineArrow = (element, points, options) => {
+const drawArrowLineArrow = (element, points, options) => {
     const arrowG = createG();
-    if (PlaitLine.isSourceMark(element, LineMarkerType.none) && PlaitLine.isTargetMark(element, LineMarkerType.none)) {
+    if (PlaitArrowLine.isSourceMark(element, ArrowLineMarkerType.none) && PlaitArrowLine.isTargetMark(element, ArrowLineMarkerType.none)) {
         return null;
     }
     const strokeWidth = getStrokeWidthByElement(element);
@@ -1588,12 +1672,12 @@ const drawLineArrow = (element, points, options) => {
     if (points.length === 1) {
         points = [points[0], [points[0][0] + 0.1, points[0][1]]];
     }
-    if (!PlaitLine.isSourceMark(element, LineMarkerType.none)) {
+    if (!PlaitArrowLine.isSourceMark(element, ArrowLineMarkerType.none)) {
         const source = getExtendPoint(points[0], points[1], ARROW_LENGTH + offset);
         const sourceArrow = getArrow(element, { marker: element.source.marker, source, target: points[0], isSource: true }, options);
         sourceArrow && arrowG.appendChild(sourceArrow);
     }
-    if (!PlaitLine.isTargetMark(element, LineMarkerType.none)) {
+    if (!PlaitArrowLine.isTargetMark(element, ArrowLineMarkerType.none)) {
         const source = getExtendPoint(points[points.length - 1], points[points.length - 2], ARROW_LENGTH + offset);
         const arrow = getArrow(element, { marker: element.target.marker, source, target: points[points.length - 1], isSource: false }, options);
         arrow && arrowG.appendChild(arrow);
@@ -1604,35 +1688,35 @@ const getArrow = (element, arrowOptions, options) => {
     const { marker, target, source, isSource } = arrowOptions;
     let targetArrow;
     switch (marker) {
-        case LineMarkerType.openTriangle: {
+        case ArrowLineMarkerType.openTriangle: {
             targetArrow = drawOpenTriangle(element, source, target, options);
             break;
         }
-        case LineMarkerType.solidTriangle: {
+        case ArrowLineMarkerType.solidTriangle: {
             targetArrow = drawSolidTriangle(source, target, options);
             break;
         }
-        case LineMarkerType.arrow: {
+        case ArrowLineMarkerType.arrow: {
             targetArrow = drawArrow(element, source, target, options);
             break;
         }
-        case LineMarkerType.sharpArrow: {
+        case ArrowLineMarkerType.sharpArrow: {
             targetArrow = drawSharpArrow(source, target, options);
             break;
         }
-        case LineMarkerType.oneSideUp: {
+        case ArrowLineMarkerType.oneSideUp: {
             targetArrow = drawOneSideArrow(source, target, isSource ? 'down' : 'up', options);
             break;
         }
-        case LineMarkerType.oneSideDown: {
+        case ArrowLineMarkerType.oneSideDown: {
             targetArrow = drawOneSideArrow(source, target, isSource ? 'up' : 'down', options);
             break;
         }
-        case LineMarkerType.hollowTriangle: {
+        case ArrowLineMarkerType.hollowTriangle: {
             targetArrow = drawHollowTriangleArrow(source, target, options);
             break;
         }
-        case LineMarkerType.singleSlash: {
+        case ArrowLineMarkerType.singleSlash: {
             targetArrow = drawSingleSlash(source, target, isSource, options);
             break;
         }
@@ -1696,10 +1780,10 @@ const drawHollowTriangleArrow = (source, target, options) => {
     return drawLinearPath([pointLeft, pointRight, target], { ...options, fill: 'white' }, true);
 };
 
-const createLineElement = (shape, points, source, target, texts, options) => {
+const createArrowLineElement = (shape, points, source, target, texts, options) => {
     return {
         id: idCreator(),
-        type: 'line',
+        type: 'arrow-line',
         shape,
         source,
         texts: texts ? texts : [],
@@ -1709,17 +1793,17 @@ const createLineElement = (shape, points, source, target, texts, options) => {
         ...options
     };
 };
-const getLinePoints = (board, element) => {
+const getArrowLinePoints = (board, element) => {
     switch (element.shape) {
-        case LineShape.elbow: {
+        case ArrowLineShape.elbow: {
             return getElbowPoints(board, element);
         }
-        case LineShape.curve: {
+        case ArrowLineShape.curve: {
             return getCurvePoints(board, element);
         }
         default: {
-            const points = PlaitLine.getPoints(board, element);
-            const handleRefPair = getLineHandleRefPair(board, element);
+            const points = PlaitArrowLine.getPoints(board, element);
+            const handleRefPair = getArrowLineHandleRefPair(board, element);
             points[0] = handleRefPair.source.point;
             points[points.length - 1] = handleRefPair.target.point;
             return points;
@@ -1728,7 +1812,7 @@ const getLinePoints = (board, element) => {
 };
 const getCurvePoints = (board, element) => {
     if (element.points.length === 2) {
-        const handleRefPair = getLineHandleRefPair(board, element);
+        const handleRefPair = getArrowLineHandleRefPair(board, element);
         const { source, target } = handleRefPair;
         const sourceBoundElement = handleRefPair.source.boundElement;
         const targetBoundElement = handleRefPair.target.boundElement;
@@ -1755,7 +1839,7 @@ const getCurvePoints = (board, element) => {
         return pointsOnBezierCurves(curvePoints);
     }
     else {
-        let dataPoints = PlaitLine.getPoints(board, element);
+        let dataPoints = PlaitArrowLine.getPoints(board, element);
         dataPoints = removeDuplicatePoints(dataPoints);
         const points = catmullRomFitting(dataPoints);
         return pointsOnBezierCurves(points);
@@ -1765,8 +1849,8 @@ function getMiddlePoints(board, element) {
     const result = [];
     const shape = element.shape;
     const hideBuffer = 10;
-    if (shape === LineShape.straight) {
-        const points = PlaitLine.getPoints(board, element);
+    if (shape === ArrowLineShape.straight) {
+        const points = PlaitArrowLine.getPoints(board, element);
         for (let i = 0; i < points.length - 1; i++) {
             const distance = distanceBetweenPointAndPoint(...points[i], ...points[i + 1]);
             if (distance < hideBuffer)
@@ -1774,8 +1858,8 @@ function getMiddlePoints(board, element) {
             result.push([(points[i][0] + points[i + 1][0]) / 2, (points[i][1] + points[i + 1][1]) / 2]);
         }
     }
-    if (shape === LineShape.curve) {
-        const points = PlaitLine.getPoints(board, element);
+    if (shape === ArrowLineShape.curve) {
+        const points = PlaitArrowLine.getPoints(board, element);
         const pointsOnBezier = getCurvePoints(board, element);
         if (points.length === 2) {
             const start = 0;
@@ -1795,7 +1879,7 @@ function getMiddlePoints(board, element) {
             }
         }
     }
-    if (shape === LineShape.elbow) {
+    if (shape === ArrowLineShape.elbow) {
         const renderPoints = getElbowPoints(board, element);
         const options = getElbowLineRouteOptions(board, element);
         if (!isUseDefaultOrthogonalRoute(element, options)) {
@@ -1814,15 +1898,15 @@ function getMiddlePoints(board, element) {
     }
     return result;
 }
-const drawLine = (board, element) => {
+const drawArrowLine = (board, element) => {
     const strokeWidth = getStrokeWidthByElement(element);
     const strokeColor = getStrokeColorByElement(board, element);
     const strokeLineDash = getLineDashByElement(element);
     const options = { stroke: strokeColor, strokeWidth, strokeLineDash };
     const lineG = createG();
-    let points = getLinePoints(board, element);
+    let points = getArrowLinePoints(board, element);
     let line;
-    if (element.shape === LineShape.curve) {
+    if (element.shape === ArrowLineShape.curve) {
         line = PlaitBoard.getRoughSVG(board).curve(points, options);
     }
     else {
@@ -1834,10 +1918,10 @@ const drawLine = (board, element) => {
         setStrokeLinecap(line, 'round');
     }
     lineG.appendChild(line);
-    const { mask, maskTargetFillRect } = drawMask(board, element, id);
+    const { mask, maskTargetFillRect } = drawArrowLineMask(board, element, id);
     lineG.appendChild(mask);
     line.appendChild(maskTargetFillRect);
-    const arrow = drawLineArrow(element, points, { stroke: strokeColor, strokeWidth });
+    const arrow = drawArrowLineArrow(element, points, { stroke: strokeColor, strokeWidth });
     arrow && lineG.appendChild(arrow);
     return lineG;
 };
@@ -1855,9 +1939,9 @@ const getHitConnectorPoint = (point, hitElement) => {
         return distanceBetweenPointAndPoint(...connectorPoint, ...point) <= LINE_SNAPPING_CONNECTOR_BUFFER;
     });
 };
-const getLineTextRectangle = (board, element, index) => {
+const getArrowLineTextRectangle = (board, element, index) => {
     const text = element.texts[index];
-    const elbowPoints = getLinePoints(board, element);
+    const elbowPoints = getArrowLinePoints(board, element);
     const point = getPointOnPolyline(elbowPoints, text.position);
     return {
         x: point[0] - text.width / 2,
@@ -1866,9 +1950,9 @@ const getLineTextRectangle = (board, element, index) => {
         height: text.height
     };
 };
-const getLines = (board) => {
+const getArrowLines = (board) => {
     return findElements(board, {
-        match: (element) => PlaitDrawElement.isLine(element),
+        match: (element) => PlaitDrawElement.isArrowLine(element),
         recursion: (element) => PlaitDrawElement.isDrawElement(element)
     });
 };
@@ -1888,33 +1972,33 @@ const Q2C = (points) => {
     }
     return result;
 };
-const handleLineCreating = (board, lineShape, sourcePoint, movingPoint, sourceElement, lineShapeG) => {
+const handleArrowLineCreating = (board, lineShape, sourcePoint, movingPoint, sourceElement, lineShapeG) => {
     const hitElement = getSnappingShape(board, movingPoint);
     const targetConnection = hitElement ? getHitConnection(board, movingPoint, hitElement) : undefined;
     const sourceConnection = sourceElement ? getHitConnection(board, sourcePoint, sourceElement) : undefined;
     const targetBoundId = hitElement ? hitElement.id : undefined;
-    const lineGenerator = new LineShapeGenerator(board);
+    const lineGenerator = new ArrowLineShapeGenerator(board);
     const memorizedLatest = getLineMemorizedLatest();
     let sourceMarker, targetMarker;
     sourceMarker = memorizedLatest.source;
     targetMarker = memorizedLatest.target;
     sourceMarker && delete memorizedLatest.source;
     targetMarker && delete memorizedLatest.target;
-    const temporaryLineElement = createLineElement(lineShape, [sourcePoint, movingPoint], { marker: sourceMarker || LineMarkerType.none, connection: sourceConnection, boundId: sourceElement?.id }, { marker: targetMarker || LineMarkerType.arrow, connection: targetConnection, boundId: targetBoundId }, [], {
+    const temporaryLineElement = createArrowLineElement(lineShape, [sourcePoint, movingPoint], { marker: sourceMarker || ArrowLineMarkerType.none, connection: sourceConnection, boundId: sourceElement?.id }, { marker: targetMarker || ArrowLineMarkerType.arrow, connection: targetConnection, boundId: targetBoundId }, [], {
         strokeWidth: DefaultLineStyle.strokeWidth,
         ...memorizedLatest
     });
-    const linePoints = getLinePoints(board, temporaryLineElement);
+    const linePoints = getArrowLinePoints(board, temporaryLineElement);
     const otherPoint = linePoints[0];
     temporaryLineElement.points[1] = alignPoints(otherPoint, movingPoint);
     lineGenerator.processDrawing(temporaryLineElement, lineShapeG);
     PlaitBoard.getElementActiveHost(board).append(lineShapeG);
     return temporaryLineElement;
 };
-function drawMask(board, element, id) {
+function drawArrowLineMask(board, element, id) {
     const mask = createMask();
     mask.setAttribute('id', id);
-    const points = getLinePoints(board, element);
+    const points = getArrowLinePoints(board, element);
     let rectangle = RectangleClient.getRectangleByPoints(points);
     rectangle = RectangleClient.getOutlineRectangle(rectangle, -30);
     const maskFillRect = createRect(rectangle, {
@@ -1923,7 +2007,7 @@ function drawMask(board, element, id) {
     mask.appendChild(maskFillRect);
     const texts = element.texts;
     texts.forEach((text, index) => {
-        let textRectangle = getLineTextRectangle(board, element, index);
+        let textRectangle = getArrowLineTextRectangle(board, element, index);
         textRectangle = RectangleClient.inflate(textRectangle, LINE_TEXT_SPACE * 2);
         const rect = createRect(textRectangle, {
             fill: 'black'
@@ -2109,18 +2193,18 @@ const createDefaultFlowchart = (point) => {
     const processElement2 = createGeometryElement(FlowchartSymbols.process, getDefaultGeometryPoints(FlowchartSymbols.process, processPoint2), '过程', options);
     const endPoint = [decisionPoint[0], decisionPoint[1] + decisionProperty.height / 2 + 95 + terminalProperty.height / 2];
     const endElement = createGeometryElement(FlowchartSymbols.terminal, getDefaultGeometryPoints(FlowchartSymbols.terminal, endPoint), '结束', options);
-    const line1 = createLineElement(LineShape.elbow, [
+    const line1 = createArrowLineElement(ArrowLineShape.elbow, [
         [0, 0],
         [0, 0]
-    ], { marker: LineMarkerType.none, connection: [0.5, 1], boundId: startElement.id }, { marker: LineMarkerType.arrow, connection: [0.5, 0], boundId: processElement1.id }, [], lineOptions);
-    const line2 = createLineElement(LineShape.elbow, [
+    ], { marker: ArrowLineMarkerType.none, connection: [0.5, 1], boundId: startElement.id }, { marker: ArrowLineMarkerType.arrow, connection: [0.5, 0], boundId: processElement1.id }, [], lineOptions);
+    const line2 = createArrowLineElement(ArrowLineShape.elbow, [
         [0, 0],
         [0, 0]
-    ], { marker: LineMarkerType.none, connection: [0.5, 1], boundId: processElement1.id }, { marker: LineMarkerType.arrow, connection: [0.5, 0], boundId: decisionElement.id }, [], lineOptions);
-    const line3 = createLineElement(LineShape.elbow, [
+    ], { marker: ArrowLineMarkerType.none, connection: [0.5, 1], boundId: processElement1.id }, { marker: ArrowLineMarkerType.arrow, connection: [0.5, 0], boundId: decisionElement.id }, [], lineOptions);
+    const line3 = createArrowLineElement(ArrowLineShape.elbow, [
         [0, 0],
         [0, 0]
-    ], { marker: LineMarkerType.none, connection: [0.5, 1], boundId: decisionElement.id }, { marker: LineMarkerType.arrow, connection: [0.5, 0], boundId: endElement.id }, [
+    ], { marker: ArrowLineMarkerType.none, connection: [0.5, 1], boundId: decisionElement.id }, { marker: ArrowLineMarkerType.arrow, connection: [0.5, 0], boundId: endElement.id }, [
         {
             text: buildText('是'),
             position: 0.5,
@@ -2128,10 +2212,10 @@ const createDefaultFlowchart = (point) => {
             height: 20
         }
     ], lineOptions);
-    const line4 = createLineElement(LineShape.elbow, [
+    const line4 = createArrowLineElement(ArrowLineShape.elbow, [
         [0, 0],
         [0, 0]
-    ], { marker: LineMarkerType.none, connection: [1, 0.5], boundId: decisionElement.id }, { marker: LineMarkerType.arrow, connection: [0, 0.5], boundId: processElement2.id }, [
+    ], { marker: ArrowLineMarkerType.none, connection: [1, 0.5], boundId: decisionElement.id }, { marker: ArrowLineMarkerType.arrow, connection: [0, 0.5], boundId: processElement2.id }, [
         {
             text: buildText('否'),
             position: 0.5,
@@ -2139,10 +2223,10 @@ const createDefaultFlowchart = (point) => {
             height: 20
         }
     ], lineOptions);
-    const line5 = createLineElement(LineShape.elbow, [
+    const line5 = createArrowLineElement(ArrowLineShape.elbow, [
         [0, 0],
         [0, 0]
-    ], { marker: LineMarkerType.none, connection: [0.5, 1], boundId: processElement2.id }, { marker: LineMarkerType.arrow, connection: [1, 0.5], boundId: endElement.id }, [], lineOptions);
+    ], { marker: ArrowLineMarkerType.none, connection: [0.5, 1], boundId: processElement2.id }, { marker: ArrowLineMarkerType.arrow, connection: [1, 0.5], boundId: endElement.id }, [], lineOptions);
     return [startElement, processElement1, decisionElement, processElement2, endElement, line1, line2, line3, line4, line5];
 };
 const getAutoCompletePoints = (element) => {
@@ -2248,6 +2332,9 @@ const isSingleTextShape = (shape) => {
 const isSingleTextGeometry = (element) => {
     return PlaitDrawElement.isGeometry(element) && isSingleTextShape(element.shape);
 };
+const isGeometryClosed = (element) => {
+    return !GEOMETRY_NOT_CLOSED.includes(element.shape);
+};
 
 const isSelfLoop = (element) => {
     return element.source.boundId && element.source.boundId === element.target.boundId;
@@ -2256,7 +2343,7 @@ const isUseDefaultOrthogonalRoute = (element, options) => {
     return isSourceAndTargetIntersect(options) && !isSelfLoop(element);
 };
 const getElbowPoints = (board, element) => {
-    const handleRefPair = getLineHandleRefPair(board, element);
+    const handleRefPair = getArrowLineHandleRefPair(board, element);
     const params = getElbowLineRouteOptions(board, element, handleRefPair);
     // console.log(params, 'params');
     if (isUseDefaultOrthogonalRoute(element, params)) {
@@ -2269,7 +2356,7 @@ const getElbowPoints = (board, element) => {
     }
     else {
         const simplifiedNextKeyPoints = simplifyOrthogonalPoints(nextKeyPoints);
-        const dataPoints = removeDuplicatePoints(PlaitLine.getPoints(board, element));
+        const dataPoints = removeDuplicatePoints(PlaitArrowLine.getPoints(board, element));
         const midDataPoints = dataPoints.slice(1, -1);
         if (hasIllegalElbowPoint(midDataPoints)) {
             return simplifyOrthogonalPoints(keyPoints);
@@ -2364,8 +2451,8 @@ 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));
+const getSelectedArrowLineElements = (board) => {
+    const selectedElements = getSelectedElements(board).filter(value => PlaitDrawElement.isArrowLine(value));
     return selectedElements;
 };
 const getSelectedImageElements = (board) => {
@@ -2381,126 +2468,11 @@ const getSelectedSwimlane = (board) => {
     return selectedElements.find(item => PlaitDrawElement.isSwimlane(item));
 };
 
-const resizeLine = (board, options, path) => {
-    Transforms.setNode(board, options, path);
-};
-const setLineTexts = (board, element, texts) => {
-    const path = PlaitBoard.findPath(board, element);
-    Transforms.setNode(board, { texts }, path);
-};
-const removeLineText = (board, element, index) => {
-    const path = PlaitBoard.findPath(board, element);
-    const texts = element.texts?.length ? [...element.texts] : [];
-    const newTexts = [...texts];
-    newTexts.splice(index, 1);
-    Transforms.setNode(board, { texts: newTexts }, path);
-};
-const setLineMark = (board, handleKey, marker) => {
-    memorizeLatest(MemorizeKey.line, handleKey, marker);
-    const selectedElements = getSelectedLineElements(board);
-    selectedElements.forEach((element) => {
-        const path = PlaitBoard.findPath(board, element);
-        let handle = handleKey === LineHandleKey.source ? element.source : element.target;
-        handle = { ...handle, marker };
-        Transforms.setNode(board, { [handleKey]: handle }, path);
-    });
-};
-const setLineShape = (board, newProperties) => {
-    const elements = getSelectedLineElements(board);
-    elements.map(element => {
-        const _properties = { ...newProperties };
-        if (element.shape === newProperties.shape) {
-            return;
-        }
-        const path = PlaitBoard.findPath(board, element);
-        Transforms.setNode(board, _properties, path);
-    });
-};
-const collectLineUpdatedRefsByGeometry = (board, geometry, refs) => {
-    const lines = findElements(board, {
-        match: (element) => {
-            if (PlaitDrawElement.isLine(element)) {
-                return element.source.boundId === geometry.id || element.target.boundId === geometry.id;
-            }
-            return false;
-        },
-        recursion: element => true
-    });
-    if (lines.length) {
-        lines.forEach(line => {
-            const isSourceBound = line.source.boundId === geometry.id;
-            const handle = isSourceBound ? 'source' : 'target';
-            const object = { ...line[handle] };
-            const linePoints = getLinePoints(board, line);
-            const point = isSourceBound ? linePoints[0] : linePoints[linePoints.length - 1];
-            object.connection = getHitConnection(board, point, geometry);
-            const path = PlaitBoard.findPath(board, line);
-            const index = refs.findIndex(obj => Path.equals(obj.path, path));
-            if (index === -1) {
-                refs.push({
-                    property: {
-                        [handle]: object
-                    },
-                    path
-                });
-            }
-            else {
-                refs[index].property = { ...refs[index].property, [handle]: object };
-            }
-        });
-    }
-};
-const connectLineToGeometry = (board, lineElement, handle, geometryElement) => {
-    const linePoints = PlaitLine.getPoints(board, lineElement);
-    const point = handle === LineHandleKey.source ? linePoints[0] : linePoints[linePoints.length - 1];
-    const connection = getHitConnection(board, point, geometryElement);
-    if (connection) {
-        let source = lineElement.source;
-        let target = lineElement.target;
-        if (handle === LineHandleKey.source) {
-            source = {
-                ...source,
-                boundId: geometryElement.id,
-                connection
-            };
-        }
-        else {
-            target = {
-                ...target,
-                boundId: geometryElement.id,
-                connection
-            };
-        }
-        const path = PlaitBoard.findPath(board, lineElement);
-        resizeLine(board, { source, target }, path);
-    }
-};
-
 const insertGeometry = (board, points, shape) => {
     const newElement = createDefaultGeometry(board, points, shape);
     insertElement(board, newElement);
     return newElement;
 };
-const insertGeometryByVector = (board, point, shape, vector) => {
-    const shapeProperty = DefaultFlowchartPropertyMap[shape] ||
-        DefaultBasicShapePropertyMap[shape] ||
-        DefaultUMLPropertyMap[shape] ||
-        DefaultBasicShapeProperty;
-    const direction = getDirectionByVector(vector);
-    if (direction) {
-        let offset = 0;
-        if ([Direction.left, Direction.right].includes(direction)) {
-            offset = -shapeProperty.width / 2;
-        }
-        else {
-            offset = -shapeProperty.height / 2;
-        }
-        const vectorPoint = getPointByVectorComponent(point, vector, offset);
-        const points = RectangleClient.getPoints(RectangleClient.getRectangleByCenterPoint(vectorPoint, shapeProperty.width, shapeProperty.height));
-        return insertGeometry(board, points, shape);
-    }
-    return null;
-};
 const insertText = (board, point, text) => {
     const memorizedLatest = getMemorizedLatestByPointer(BasicShapes.text);
     const property = getTextShapeProperty(board, text, memorizedLatest.textProperties['font-size']);
@@ -2525,12 +2497,12 @@ const switchGeometryShape = (board, shape) => {
         if (PlaitDrawElement.isGeometry(item) && !PlaitDrawElement.isText(item)) {
             const path = PlaitBoard.findPath(board, item);
             Transforms.setNode(board, { shape }, path);
-            collectLineUpdatedRefsByGeometry(board, { ...item, shape }, refs);
+            collectArrowLineUpdatedRefsByGeometry(board, { ...item, shape }, refs);
         }
     });
     if (refs.length) {
         refs.forEach(ref => {
-            DrawTransforms.resizeLine(board, ref.property, ref.path);
+            DrawTransforms.resizeArrowLine(board, ref.property, ref.path);
         });
     }
 };
@@ -2610,6 +2582,67 @@ const insertImage = (board, imageItem, startPoint) => {
     Transforms.addSelectionWithTemporaryElements(board, [imageElement]);
 };
 
+const resizeArrowLine = (board, options, path) => {
+    Transforms.setNode(board, options, path);
+};
+const setArrowLineTexts = (board, element, texts) => {
+    const path = PlaitBoard.findPath(board, element);
+    Transforms.setNode(board, { texts }, path);
+};
+const removeArrowLineText = (board, element, index) => {
+    const path = PlaitBoard.findPath(board, element);
+    const texts = element.texts?.length ? [...element.texts] : [];
+    const newTexts = [...texts];
+    newTexts.splice(index, 1);
+    Transforms.setNode(board, { texts: newTexts }, path);
+};
+const setArrowLineMark = (board, handleKey, marker) => {
+    memorizeLatest(MemorizeKey.arrowLine, handleKey, marker);
+    const selectedElements = getSelectedArrowLineElements(board);
+    selectedElements.forEach((element) => {
+        const path = PlaitBoard.findPath(board, element);
+        let handle = handleKey === ArrowLineHandleKey.source ? element.source : element.target;
+        handle = { ...handle, marker };
+        Transforms.setNode(board, { [handleKey]: handle }, path);
+    });
+};
+const setArrowLineShape = (board, newProperties) => {
+    const elements = getSelectedArrowLineElements(board);
+    elements.map(element => {
+        const _properties = { ...newProperties };
+        if (element.shape === newProperties.shape) {
+            return;
+        }
+        const path = PlaitBoard.findPath(board, element);
+        Transforms.setNode(board, _properties, path);
+    });
+};
+const connectArrowLineToDraw = (board, lineElement, handle, geometryElement) => {
+    const linePoints = PlaitArrowLine.getPoints(board, lineElement);
+    const point = handle === ArrowLineHandleKey.source ? linePoints[0] : linePoints[linePoints.length - 1];
+    const connection = getHitConnection(board, point, geometryElement);
+    if (connection) {
+        let source = lineElement.source;
+        let target = lineElement.target;
+        if (handle === ArrowLineHandleKey.source) {
+            source = {
+                ...source,
+                boundId: geometryElement.id,
+                connection
+            };
+        }
+        else {
+            target = {
+                ...target,
+                boundId: geometryElement.id,
+                connection
+            };
+        }
+        const path = PlaitBoard.findPath(board, lineElement);
+        resizeArrowLine(board, { source, target }, path);
+    }
+};
+
 function buildSwimlaneTable(element) {
     const swimlaneElement = { ...element };
     if (PlaitDrawElement.isHorizontalSwimlane(element)) {
@@ -2651,8 +2684,10 @@ const getDefaultSwimlanePoints = (pointer, centerPoint) => {
 const createDefaultSwimlane = (shape, points) => {
     const header = isSwimlaneWithHeader(shape);
     const dataShape = adjustSwimlaneShape(shape);
-    const rows = createDefaultRowsOrColumns(dataShape, 'row', header);
-    const columns = createDefaultRowsOrColumns(dataShape, 'column', header);
+    const width = points[1][0] - points[0][0];
+    const height = points[1][1] - points[0][1];
+    const rows = createDefaultRowsOrColumns(dataShape, 'row', header, height);
+    const columns = createDefaultRowsOrColumns(dataShape, 'column', header, width);
     const swimlane = {
         id: idCreator(),
         type: 'swimlane',
@@ -2665,18 +2700,22 @@ const createDefaultSwimlane = (shape, points) => {
     };
     return swimlane;
 };
-const createDefaultRowsOrColumns = (shape, type, header) => {
+const createDefaultRowsOrColumns = (shape, type, header, size) => {
     const createItems = (count) => new Array(count).fill('').map(() => ({ id: idCreator() }));
     let data = createItems(3);
     if ((type === 'row' && shape === SwimlaneSymbols.swimlaneVertical) ||
         (type === 'column' && shape === SwimlaneSymbols.swimlaneHorizontal)) {
         data = header ? data : createItems(2);
         const dimension = type === 'row' ? 'height' : 'width';
+        let defaultSize = SWIMLANE_HEADER_SIZE;
+        if (size < SWIMLANE_HEADER_SIZE * data.length) {
+            defaultSize = Math.min((size / data.length / SWIMLANE_HEADER_SIZE) * SWIMLANE_HEADER_SIZE, SWIMLANE_HEADER_SIZE);
+        }
         data = data.map((item, index) => {
             if (index === 0 || (index === 1 && header)) {
                 return {
                     ...item,
-                    [dimension]: SWIMLANE_HEADER_SIZE
+                    [dimension]: defaultSize
                 };
             }
             return item;
@@ -2695,7 +2734,7 @@ const createDefaultCells = (shape, rows, columns, header) => {
         if (index < 3) {
             const rowId = shape === SwimlaneSymbols.swimlaneVertical ? rows[startIndex].id : rows[index].id;
             const columnId = shape === SwimlaneSymbols.swimlaneVertical ? columns[index].id : columns[startIndex].id;
-            return createCell(rowId, columnId, 'Lane');
+            return createCell(rowId, columnId, header ? 'Lane' : 'New Swimlane');
         }
         const rowId = shape === SwimlaneSymbols.swimlaneVertical ? rows[startIndex + 1].id : rows[index - 3].id;
         const columnId = shape === SwimlaneSymbols.swimlaneVertical ? columns[index - 3].id : columns[startIndex + 1].id;
@@ -2720,6 +2759,9 @@ const adjustSwimlaneShape = (shape) => {
         ? SwimlaneSymbols.swimlaneHorizontal
         : SwimlaneSymbols.swimlaneVertical;
 };
+const isSwimlanePointers = (board) => {
+    return PlaitBoard.isInPointer(board, getSwimlanePointers());
+};
 
 const updateSwimlaneCount = (board, swimlane, count) => {
     if (count > 0 && PlaitDrawElement.isSwimlane(swimlane)) {
@@ -2879,33 +2921,6 @@ const updateSwimlane = (board, swimlane, newColumns, newRows, newCells, newPoint
         points: newPoints
     }, path);
 };
-const setSwimlaneFill = (board, element, fill, path) => {
-    const selectedCells = getSelectedCells(element);
-    let newCells = element.cells;
-    if (selectedCells?.length) {
-        newCells = element.cells.map(cell => {
-            if (selectedCells.map(item => item.id).includes(cell.id)) {
-                return {
-                    ...cell,
-                    fill
-                };
-            }
-            return cell;
-        });
-    }
-    else {
-        newCells = element.cells.map(cell => {
-            if (cell.text && cell.textHeight) {
-                return {
-                    ...cell,
-                    fill
-                };
-            }
-            return cell;
-        });
-    }
-    Transforms.setNode(board, { cells: newCells }, path);
-};
 
 const setDrawShapeText = (board, element, text) => {
     const newTexts = element.texts?.map(item => {
@@ -2921,7 +2936,8 @@ const setDrawShapeText = (board, element, text) => {
     Transforms.setNode(board, newElement, [path]);
 };
 
-const setTableText = (board, table, cellId, text, textWidth, textHeight) => {
+const setTableText = (board, path, cellId, text, textHeight) => {
+    const table = PlaitNode.get(board, path);
     const cell = getCellWithPoints(board, table, cellId);
     const cellIndex = table.cells.findIndex(item => item.id === cell.id);
     let rows = [...table.rows];
@@ -2957,8 +2973,66 @@ const setTableText = (board, table, cellId, text, textWidth, textHeight) => {
         textHeight: textHeight,
         text
     };
-    const path = board.children.findIndex(child => child.id === table.id);
-    Transforms.setNode(board, { rows, columns, cells, points }, [path]);
+    Transforms.setNode(board, { rows, columns, cells, points }, path);
+};
+
+const setTableFill = (board, element, fill, path) => {
+    const selectedCells = getSelectedCells(element);
+    let newCells = element.cells;
+    if (selectedCells?.length) {
+        newCells = element.cells.map(cell => {
+            if (selectedCells.map(item => item.id).includes(cell.id)) {
+                return {
+                    ...cell,
+                    fill
+                };
+            }
+            return cell;
+        });
+    }
+    else {
+        newCells = element.cells.map(cell => {
+            if (cell.text && cell.textHeight) {
+                return {
+                    ...cell,
+                    fill
+                };
+            }
+            return cell;
+        });
+    }
+    Transforms.setNode(board, { cells: newCells }, path);
+};
+
+const insertDrawByVector = (board, point, shape, vector) => {
+    const swimlanePointers = getSwimlanePointers();
+    const isSwimlanePointer = swimlanePointers.includes(shape);
+    let shapeProperty = DefaultFlowchartPropertyMap[shape] ||
+        DefaultBasicShapePropertyMap[shape] ||
+        DefaultUMLPropertyMap[shape] ||
+        DefaultBasicShapeProperty;
+    if (isSwimlanePointer) {
+        shapeProperty = DefaultSwimlanePropertyMap[shape];
+    }
+    const direction = getDirectionByVector(vector);
+    if (direction) {
+        let offset = 0;
+        if ([Direction.left, Direction.right].includes(direction)) {
+            offset = -shapeProperty.width / 2;
+        }
+        else {
+            offset = -shapeProperty.height / 2;
+        }
+        const vectorPoint = getPointByVectorComponent(point, vector, offset);
+        const points = RectangleClient.getPoints(RectangleClient.getRectangleByCenterPoint(vectorPoint, shapeProperty.width, shapeProperty.height));
+        if (isSwimlanePointer) {
+            const swimlane = createDefaultSwimlane(shape, points);
+            insertElement(board, swimlane);
+            return swimlane;
+        }
+        return insertGeometry(board, points, shape);
+    }
+    return null;
 };
 
 const DrawTransforms = {
@@ -2968,22 +3042,22 @@ const DrawTransforms = {
     resizeGeometry,
     insertText,
     setTextSize,
-    resizeLine,
-    setLineTexts,
-    removeLineText,
-    setLineMark,
-    setLineShape,
+    resizeArrowLine,
+    setArrowLineTexts,
+    removeArrowLineText,
+    setArrowLineMark,
+    setArrowLineShape,
     insertImage,
+    connectArrowLineToDraw,
     switchGeometryShape,
-    connectLineToGeometry,
-    insertGeometryByVector,
     setTableText,
     addSwimlaneRow,
     addSwimlaneColumn,
     removeSwimlaneRow,
     removeSwimlaneColumn,
-    setSwimlaneFill,
-    updateSwimlaneCount
+    updateSwimlaneCount,
+    setTableFill,
+    insertDrawByVector
 };
 
 const getHitRectangleResizeHandleRef = (board, rectangle, point, angle = 0) => {
@@ -3118,10 +3192,16 @@ function withDrawResize(board) {
                     }
                 }
                 if (PlaitDrawElement.isGeometry(target)) {
-                    const { height: textHeight } = getFirstTextManage(target).getSize();
-                    DrawTransforms.resizeGeometry(board, points, textHeight, path);
+                    if (isGeometryIncludeText(target)) {
+                        const { height: textHeight } = getFirstTextManage(target).getSize();
+                        DrawTransforms.resizeGeometry(board, points, textHeight, path);
+                    }
+                    else {
+                        points = normalizeShapePoints(points);
+                        Transforms.setNode(board, { points }, path);
+                    }
                 }
-                else if (PlaitDrawElement.isLine(target)) {
+                else if (PlaitDrawElement.isArrowLine(target)) {
                     Transforms.setNode(board, { points }, path);
                 }
                 else if (PlaitDrawElement.isImage(target)) {
@@ -3440,29 +3520,6 @@ function drawIsometricSnapLines(board, activePoints, snapRectangles, resizeSnapO
     return drawSolidLines(board, isometricLines);
 }
 
-const isSingleSelectTable = (board) => {
-    const selectedElements = getSelectedElements(board);
-    return selectedElements && selectedElements.length === 1 && PlaitTableElement.isTable(selectedElements[0]);
-};
-const isSingleSelectElementByTable = (board) => {
-    const selectedElements = getSelectedElements(board);
-    return selectedElements && selectedElements.length === 1 && PlaitDrawElement.isElementByTable(selectedElements[0]);
-};
-const getSelectedTableElements = (board, elements) => {
-    const selectedElements = elements?.length ? elements : getSelectedElements(board);
-    return selectedElements.filter(value => PlaitTableElement.isTable(value));
-};
-const SELECTED_CELLS = new WeakMap();
-function getSelectedCells(element) {
-    return SELECTED_CELLS.get(element);
-}
-function setSelectedCells(element, cells) {
-    return SELECTED_CELLS.set(element, cells);
-}
-function clearSelectedCells(element) {
-    return SELECTED_CELLS.delete(element);
-}
-
 const getCenterPointsOnPolygon = (points) => {
     const centerPoints = [];
     for (let i = 0; i < points.length; i++) {
@@ -3646,7 +3703,9 @@ function createEllipseEngine(createOptions) {
         draw(board, rectangle, options) {
             const centerPoint = [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2];
             const rs = PlaitBoard.getRoughSVG(board);
-            return rs.ellipse(centerPoint[0], centerPoint[1], rectangle.width, rectangle.height, { ...options, fillStyle: 'solid' });
+            const shape = rs.ellipse(centerPoint[0], centerPoint[1], rectangle.width, rectangle.height, { ...options, fillStyle: 'solid' });
+            setStrokeLinecap(shape, 'round');
+            return shape;
         },
         isInsidePoint(rectangle, point) {
             const centerPoint = [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2];
@@ -3989,7 +4048,9 @@ const RoundCommentEngine = {
         const point9 = [x1 + rectangle.width / 4, y2];
         const point10 = [x1 + rectangle.width / 4, rectangle.y + rectangle.height];
         const point11 = [x1 + rectangle.width / 2, y2];
-        return rs.path(`M${point2[0]} ${point2[1]} A ${radius} ${radius}, 0, 0, 1, ${point3[0]} ${point3[1]} L ${point4[0]} ${point4[1]} A ${radius} ${radius}, 0, 0, 1, ${point5[0]} ${point5[1]} L    ${point11[0]} ${point11[1]}  ${point10[0]} ${point10[1]}   ${point9[0]} ${point9[1]}   ${point6[0]} ${point6[1]} A ${radius} ${radius}, 0, 0, 1, ${point7[0]} ${point7[1]} L ${point8[0]} ${point8[1]} A ${radius} ${radius}, 0, 0, 1, ${point1[0]} ${point1[1]} Z`, { ...options, fillStyle: 'solid' });
+        const shape = rs.path(`M${point2[0]} ${point2[1]} A ${radius} ${radius}, 0, 0, 1, ${point3[0]} ${point3[1]} L ${point4[0]} ${point4[1]} A ${radius} ${radius}, 0, 0, 1, ${point5[0]} ${point5[1]} L    ${point11[0]} ${point11[1]}  ${point10[0]} ${point10[1]}   ${point9[0]} ${point9[1]}   ${point6[0]} ${point6[1]} A ${radius} ${radius}, 0, 0, 1, ${point7[0]} ${point7[1]} L ${point8[0]} ${point8[1]} A ${radius} ${radius}, 0, 0, 1, ${point1[0]} ${point1[1]} Z`, { ...options, fillStyle: 'solid' });
+        setStrokeLinecap(shape, 'round');
+        return shape;
     },
     isInsidePoint(rectangle, point) {
         const points = [
@@ -4573,13 +4634,15 @@ const OrEngine = createEllipseEngine({
         const rx = rectangle.width / 2;
         const ry = rectangle.height / 2;
         const startPoint = [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2];
-        return rs.path(`M${startPoint[0]} ${startPoint[1]}
+        const shape = rs.path(`M${startPoint[0]} ${startPoint[1]}
         A${rx},${ry} 0 1,1 ${startPoint[0]} ${startPoint[1] - 0.01}
         M${rectangle.x} ${rectangle.y + rectangle.height / 2}
         L${rectangle.x + rectangle.width} ${rectangle.y + rectangle.height / 2}
         M${rectangle.x + rectangle.width / 2} ${rectangle.y}
         L${rectangle.x + rectangle.width / 2} ${rectangle.y + rectangle.height}
         `, { ...options, fillStyle: 'solid' });
+        setStrokeLinecap(shape, 'round');
+        return shape;
     }
 });
 
@@ -4592,13 +4655,15 @@ const SummingJunctionEngine = createEllipseEngine({
         const centerPoint = [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2];
         const line1Points = getCrossingPointsBetweenEllipseAndSegment([rectangle.x, rectangle.y], [rectangle.x + rectangle.width, rectangle.y + rectangle.height], centerPoint[0], centerPoint[1], rx, ry);
         const line2Points = getCrossingPointsBetweenEllipseAndSegment([rectangle.x + rectangle.width, rectangle.y], [rectangle.x, rectangle.y + rectangle.height], centerPoint[0], centerPoint[1], rx, ry);
-        return rs.path(`M${startPoint[0]} ${startPoint[1]}
+        const shape = rs.path(`M${startPoint[0]} ${startPoint[1]}
         A${rx},${ry} 0 1,1 ${startPoint[0]} ${startPoint[1] - 0.01}
         M${line1Points[0][0]} ${line1Points[0][1]}
         L${line1Points[1][0]} ${line1Points[1][1]}
         M${line2Points[0][0]} ${line2Points[0][1]}
         L${line2Points[1][0]} ${line2Points[1][1]}
         `, { ...options, fillStyle: 'solid' });
+        setStrokeLinecap(shape, 'round');
+        return shape;
     }
 });
 
@@ -5025,7 +5090,7 @@ const NoteCurlyLeftEngine = {
             ${rectangle.x + rectangle.width - rectangle.width * 0.09} ${rectangle.y + rectangle.height / 2}
             C${rectangle.x + rectangle.width} ${rectangle.y + rectangle.height / 2}, 
             ${rectangle.x + rectangle.width - rectangle.width * 0.09} ${rectangle.y + rectangle.height}, 
-            ${rectangle.x + rectangle.width} ${rectangle.y + rectangle.height}`, { ...options, fillStyle: 'solid' });
+            ${rectangle.x + rectangle.width} ${rectangle.y + rectangle.height}`, { ...options, fillStyle: 'solid', fill: 'transparent' });
         setStrokeLinecap(shape, 'round');
         return shape;
     },
@@ -5064,13 +5129,13 @@ const NoteCurlyLeftEngine = {
 const NoteCurlyRightEngine = {
     draw(board, rectangle, options) {
         const rs = PlaitBoard.getRoughSVG(board);
-        const shape = rs.path(`M${rectangle.x} ${rectangle.y} 
-            C${rectangle.x + rectangle.width * 0.09} ${rectangle.y}, 
-            ${rectangle.x} ${rectangle.y + rectangle.height / 2}, 
+        const shape = rs.path(`M${rectangle.x} ${rectangle.y}
+            C${rectangle.x + rectangle.width * 0.09} ${rectangle.y},
+            ${rectangle.x} ${rectangle.y + rectangle.height / 2},
             ${rectangle.x + rectangle.width * 0.09} ${rectangle.y + rectangle.height / 2}
-            C${rectangle.x} ${rectangle.y + rectangle.height / 2}, 
-            ${rectangle.x + rectangle.width * 0.09} ${rectangle.y + rectangle.height}, 
-            ${rectangle.x} ${rectangle.y + rectangle.height}`, { ...options, fillStyle: 'solid' });
+            C${rectangle.x} ${rectangle.y + rectangle.height / 2},
+            ${rectangle.x + rectangle.width * 0.09} ${rectangle.y + rectangle.height},
+            ${rectangle.x} ${rectangle.y + rectangle.height}`, { ...options, fillStyle: 'solid', fill: 'transparent' });
         setStrokeLinecap(shape, 'round');
         return shape;
     },
@@ -5111,7 +5176,7 @@ const NoteSquareEngine = {
         const rs = PlaitBoard.getRoughSVG(board);
         const shape = rs.path(`M${rectangle.x + rectangle.width * 0.075} ${rectangle.y + rectangle.height} H${rectangle.x} V${rectangle.y} H${rectangle.x +
             rectangle.width * 0.075}
-           `, { ...options, fillStyle: 'solid' });
+           `, { ...options, fillStyle: 'solid', fill: 'transparent' });
         setStrokeLinecap(shape, 'round');
         return shape;
     },
@@ -5221,27 +5286,34 @@ const DisplayEngine = {
 
 const TableEngine = {
     draw(board, rectangle, roughOptions, options) {
-        const rs = PlaitBoard.getRoughSVG(board);
         const g = createG();
-        const { x, y, width, height } = rectangle;
-        const tableTopBorder = drawLine$1(rs, [x, y], [x + width, y], roughOptions);
-        const tableLeftBorder = drawLine$1(rs, [x, y], [x, y + height], roughOptions);
-        g.append(tableTopBorder, tableLeftBorder);
-        const pointCells = getCellsWithPoints(board, { ...options?.element });
-        pointCells.forEach(cell => {
-            const rectangle = RectangleClient.getRectangleByPoints(cell.points);
-            const { x, y, width, height } = rectangle;
-            const cellRectangle = drawRectangle(board, {
-                x: x + ACTIVE_STROKE_WIDTH,
-                y: y + ACTIVE_STROKE_WIDTH,
-                width: width - ACTIVE_STROKE_WIDTH * 2,
-                height: height - ACTIVE_STROKE_WIDTH * 2
-            }, { fill: cell.fill, fillStyle: 'solid', strokeWidth: 0 });
-            const cellRightBorder = drawLine$1(rs, [x + width, y], [x + width, y + height], roughOptions);
-            const cellBottomBorder = drawLine$1(rs, [x, y + height], [x + width, y + height], roughOptions);
-            g.append(cellRectangle, cellRightBorder, cellBottomBorder);
-        });
-        setStrokeLinecap(g, 'round');
+        try {
+            const pointCells = getCellsWithPoints(board, { ...options?.element });
+            if (pointCells) {
+                const rs = PlaitBoard.getRoughSVG(board);
+                const { x, y, width, height } = rectangle;
+                const tableTopBorder = drawLine(rs, [x, y], [x + width, y], roughOptions);
+                const tableLeftBorder = drawLine(rs, [x, y], [x, y + height], roughOptions);
+                g.append(tableTopBorder, tableLeftBorder);
+                pointCells.forEach(cell => {
+                    const rectangle = RectangleClient.getRectangleByPoints(cell.points);
+                    const { x, y, width, height } = rectangle;
+                    const cellRectangle = drawRectangle(board, {
+                        x: x + ACTIVE_STROKE_WIDTH,
+                        y: y + ACTIVE_STROKE_WIDTH,
+                        width: width - ACTIVE_STROKE_WIDTH * 2,
+                        height: height - ACTIVE_STROKE_WIDTH * 2
+                    }, { fill: cell.fill, fillStyle: 'solid', strokeWidth: 0 });
+                    const cellRightBorder = drawLine(rs, [x + width, y], [x + width, y + height], roughOptions);
+                    const cellBottomBorder = drawLine(rs, [x, y + height], [x + width, y + height], roughOptions);
+                    g.append(cellRectangle, cellRightBorder, cellBottomBorder);
+                });
+                setStrokeLinecap(g, 'round');
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
         return g;
     },
     isInsidePoint(rectangle, point) {
@@ -5258,13 +5330,28 @@ const TableEngine = {
         return RectangleClient.getEdgeCenterPoints(rectangle);
     },
     getTextRectangle(element, options) {
-        const cell = getCellWithPoints(options?.board, element, options.key);
-        if (PlaitTableElement.isVerticalText(cell)) {
-            return getVerticalTextRectangle(cell);
+        try {
+            if (options && options.key) {
+                const cell = getCellWithPoints(options?.board, element, options.key);
+                if (cell) {
+                    if (PlaitTableElement.isVerticalText(cell)) {
+                        return getVerticalTextRectangle(cell);
+                    }
+                    else {
+                        return getHorizontalTextRectangle(cell);
+                    }
+                }
+            }
         }
-        else {
-            return getHorizontalTextRectangle(cell);
+        catch (error) {
+            console.error(error);
         }
+        return {
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0
+        };
     }
 };
 function getVerticalTextRectangle(cell) {
@@ -5565,6 +5652,7 @@ const DeletionEngine = {
         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 });
+        setStrokeLinecap(shape, 'round');
         return shape;
     },
     isInsidePoint(rectangle, point) {
@@ -5744,7 +5832,8 @@ const RequiredInterfaceEngine = {
         M${rectangle.x + rectangle.width * 0.41} ${rectangle.y + rectangle.height / 2} H${rectangle.x + rectangle.width}
         `, {
             ...options,
-            fillStyle: 'solid'
+            fillStyle: 'solid',
+            fill: 'transparent'
         });
         setStrokeLinecap(shape, 'round');
         return shape;
@@ -6052,7 +6141,7 @@ const getEngine = (shape) => {
     return ShapeEngineMap[shape];
 };
 
-const getLineHandleRefPair = (board, element) => {
+const getArrowLineHandleRefPair = (board, element) => {
     const strokeWidth = getStrokeWidthByElement(element);
     const sourceBoundElement = element.source.boundId ? getElementById(board, element.source.boundId) : undefined;
     const targetBoundElement = element.target.boundId ? getElementById(board, element.target.boundId) : undefined;
@@ -6065,19 +6154,21 @@ const getLineHandleRefPair = (board, element) => {
     const sourceFactor = getDirectionFactor(sourceDirection);
     const targetFactor = getDirectionFactor(targetDirection);
     const sourceHandleRef = {
-        key: LineHandleKey.source,
+        key: ArrowLineHandleKey.source,
         point: sourcePoint,
         direction: sourceDirection,
         vector: [sourceFactor.x, sourceFactor.y]
     };
     const targetHandleRef = {
-        key: LineHandleKey.target,
+        key: ArrowLineHandleKey.target,
         point: targetPoint,
         direction: targetDirection,
         vector: [targetFactor.x, targetFactor.y]
     };
     if (sourceBoundElement) {
-        const connectionOffset = PlaitLine.isSourceMarkOrTargetMark(element, LineMarkerType.none, LineHandleKey.source) ? 0 : strokeWidth;
+        const connectionOffset = PlaitArrowLine.isSourceMarkOrTargetMark(element, ArrowLineMarkerType.none, ArrowLineHandleKey.source)
+            ? 0
+            : strokeWidth;
         const sourceVector = getVectorByConnection(sourceBoundElement, element.source.connection);
         sourceHandleRef.vector = sourceVector;
         sourceHandleRef.boundElement = sourceBoundElement;
@@ -6094,7 +6185,9 @@ const getLineHandleRefPair = (board, element) => {
         sourceHandleRef.point = rotatePointsByElement(sourcePoint, sourceBoundElement) || sourcePoint;
     }
     if (targetBoundElement) {
-        const connectionOffset = PlaitLine.isSourceMarkOrTargetMark(element, LineMarkerType.none, LineHandleKey.target) ? 0 : strokeWidth;
+        const connectionOffset = PlaitArrowLine.isSourceMarkOrTargetMark(element, ArrowLineMarkerType.none, ArrowLineHandleKey.target)
+            ? 0
+            : strokeWidth;
         const targetVector = getVectorByConnection(targetBoundElement, element.target.connection);
         targetHandleRef.vector = targetVector;
         targetHandleRef.boundElement = targetBoundElement;
@@ -6149,7 +6242,7 @@ const getVectorByConnection = (boundElement, connection) => {
     return vector;
 };
 const getElbowLineRouteOptions = (board, element, handleRefPair) => {
-    handleRefPair = handleRefPair ?? getLineHandleRefPair(board, element);
+    handleRefPair = handleRefPair ?? getArrowLineHandleRefPair(board, element);
     const { sourceRectangle, targetRectangle } = getSourceAndTargetRectangle(board, element, handleRefPair);
     const { sourceOuterRectangle, targetOuterRectangle } = getSourceAndTargetOuterRectangle(sourceRectangle, targetRectangle);
     const sourcePoint = handleRefPair.source.point;
@@ -6167,33 +6260,67 @@ const getElbowLineRouteOptions = (board, element, handleRefPair) => {
         targetOuterRectangle
     };
 };
+const collectArrowLineUpdatedRefsByGeometry = (board, element, refs) => {
+    const lines = findElements(board, {
+        match: (element) => {
+            if (PlaitDrawElement.isArrowLine(element)) {
+                return element.source.boundId === element.id || element.target.boundId === element.id;
+            }
+            return false;
+        },
+        recursion: element => true
+    });
+    if (lines.length) {
+        lines.forEach(line => {
+            const isSourceBound = line.source.boundId === element.id;
+            const handle = isSourceBound ? 'source' : 'target';
+            const object = { ...line[handle] };
+            const linePoints = getArrowLinePoints(board, line);
+            const point = isSourceBound ? linePoints[0] : linePoints[linePoints.length - 1];
+            object.connection = getHitConnection(board, point, element);
+            const path = PlaitBoard.findPath(board, line);
+            const index = refs.findIndex(obj => Path.equals(obj.path, path));
+            if (index === -1) {
+                refs.push({
+                    property: {
+                        [handle]: object
+                    },
+                    path
+                });
+            }
+            else {
+                refs[index].property = { ...refs[index].property, [handle]: object };
+            }
+        });
+    }
+};
 
-var LineMarkerType;
-(function (LineMarkerType) {
-    LineMarkerType["arrow"] = "arrow";
-    LineMarkerType["none"] = "none";
-    LineMarkerType["openTriangle"] = "open-triangle";
-    LineMarkerType["solidTriangle"] = "solid-triangle";
-    LineMarkerType["sharpArrow"] = "sharp-arrow";
-    LineMarkerType["oneSideUp"] = "one-side-up";
-    LineMarkerType["oneSideDown"] = "one-side-down";
-    LineMarkerType["hollowTriangle"] = "hollow-triangle";
-    LineMarkerType["singleSlash"] = "single-slash";
-})(LineMarkerType || (LineMarkerType = {}));
-var LineShape;
-(function (LineShape) {
-    LineShape["straight"] = "straight";
-    LineShape["curve"] = "curve";
-    LineShape["elbow"] = "elbow";
-})(LineShape || (LineShape = {}));
-var LineHandleKey;
-(function (LineHandleKey) {
-    LineHandleKey["source"] = "source";
-    LineHandleKey["target"] = "target";
-})(LineHandleKey || (LineHandleKey = {}));
-const PlaitLine = {
+var ArrowLineMarkerType;
+(function (ArrowLineMarkerType) {
+    ArrowLineMarkerType["arrow"] = "arrow";
+    ArrowLineMarkerType["none"] = "none";
+    ArrowLineMarkerType["openTriangle"] = "open-triangle";
+    ArrowLineMarkerType["solidTriangle"] = "solid-triangle";
+    ArrowLineMarkerType["sharpArrow"] = "sharp-arrow";
+    ArrowLineMarkerType["oneSideUp"] = "one-side-up";
+    ArrowLineMarkerType["oneSideDown"] = "one-side-down";
+    ArrowLineMarkerType["hollowTriangle"] = "hollow-triangle";
+    ArrowLineMarkerType["singleSlash"] = "single-slash";
+})(ArrowLineMarkerType || (ArrowLineMarkerType = {}));
+var ArrowLineShape;
+(function (ArrowLineShape) {
+    ArrowLineShape["straight"] = "straight";
+    ArrowLineShape["curve"] = "curve";
+    ArrowLineShape["elbow"] = "elbow";
+})(ArrowLineShape || (ArrowLineShape = {}));
+var ArrowLineHandleKey;
+(function (ArrowLineHandleKey) {
+    ArrowLineHandleKey["source"] = "source";
+    ArrowLineHandleKey["target"] = "target";
+})(ArrowLineHandleKey || (ArrowLineHandleKey = {}));
+const PlaitArrowLine = {
     isSourceMarkOrTargetMark(line, markType, handleKey) {
-        if (handleKey === LineHandleKey.source) {
+        if (handleKey === ArrowLineHandleKey.source) {
             return line.source.marker === markType;
         }
         else {
@@ -6201,10 +6328,10 @@ const PlaitLine = {
         }
     },
     isSourceMark(line, markType) {
-        return PlaitLine.isSourceMarkOrTargetMark(line, markType, LineHandleKey.source);
+        return PlaitArrowLine.isSourceMarkOrTargetMark(line, markType, ArrowLineHandleKey.source);
     },
     isTargetMark(line, markType) {
-        return PlaitLine.isSourceMarkOrTargetMark(line, markType, LineHandleKey.target);
+        return PlaitArrowLine.isSourceMarkOrTargetMark(line, markType, ArrowLineHandleKey.target);
     },
     isBoundElementOfSource(line, element) {
         return line.source.boundId === element.id;
@@ -6247,16 +6374,25 @@ var MemorizeKey;
     MemorizeKey["basicShape"] = "basicShape";
     MemorizeKey["flowchart"] = "flowchart";
     MemorizeKey["text"] = "text";
-    MemorizeKey["line"] = "line";
+    MemorizeKey["arrowLine"] = "arrow-line";
     MemorizeKey["UML"] = "UML";
 })(MemorizeKey || (MemorizeKey = {}));
 
+var VectorLineShape;
+(function (VectorLineShape) {
+    VectorLineShape["straight"] = "straight";
+    VectorLineShape["curve"] = "curve";
+})(VectorLineShape || (VectorLineShape = {}));
+
 const PlaitDrawElement = {
     isGeometry: (value) => {
         return value.type === 'geometry';
     },
-    isLine: (value) => {
-        return value.type === 'line';
+    // isLine: (value: any): value is PlaitArrowLine => {
+    //     return value.type === 'arrow-line' || value.type === 'line' || value.type === 'vector-line';
+    // },
+    isArrowLine: (value) => {
+        return value.type === 'arrow-line' || value.type === 'line';
     },
     isText: (value) => {
         return value.type === 'geometry' && value.shape === BasicShapes.text;
@@ -6269,7 +6405,7 @@ const PlaitDrawElement = {
     },
     isDrawElement: (value) => {
         if (PlaitDrawElement.isGeometry(value) ||
-            PlaitDrawElement.isLine(value) ||
+            PlaitDrawElement.isArrowLine(value) ||
             PlaitDrawElement.isImage(value) ||
             PlaitDrawElement.isTable(value) ||
             PlaitDrawElement.isSwimlane(value)) {
@@ -6280,7 +6416,10 @@ const PlaitDrawElement = {
         }
     },
     isShapeElement: (value) => {
-        return PlaitDrawElement.isImage(value) || PlaitDrawElement.isGeometry(value) || PlaitDrawElement.isTable(value) || PlaitDrawElement.isSwimlane(value);
+        return (PlaitDrawElement.isImage(value) ||
+            PlaitDrawElement.isGeometry(value) ||
+            PlaitDrawElement.isTable(value) ||
+            PlaitDrawElement.isSwimlane(value));
     },
     isBasicShape: (value) => {
         return Object.keys(BasicShapes).includes(value.shape);
@@ -6308,7 +6447,7 @@ const PlaitDrawElement = {
     },
     isElementByTable: (value) => {
         return PlaitDrawElement.isTable(value) || PlaitDrawElement.isSwimlane(value) || PlaitDrawElement.isGeometryByTable(value);
-    },
+    }
 };
 
 class GeometryShapeGenerator extends Generator {
@@ -6334,7 +6473,7 @@ class GeometryShapeGenerator extends Generator {
     }
 }
 
-class LineAutoCompleteGenerator extends Generator {
+class ArrowLineAutoCompleteGenerator extends Generator {
     static { this.key = 'line-auto-complete-generator'; }
     constructor(board) {
         super(board);
@@ -6421,12 +6560,12 @@ class GeometryComponent extends CommonElementFlavour {
                 return canResize(this.board, this.element);
             }
         });
-        this.lineAutoCompleteGenerator = new LineAutoCompleteGenerator(this.board);
+        this.lineAutoCompleteGenerator = new ArrowLineAutoCompleteGenerator(this.board);
         this.shapeGenerator = new GeometryShapeGenerator(this.board);
         if (isGeometryIncludeText(this.element)) {
             this.initializeTextManage();
         }
-        this.getRef().addGenerator(LineAutoCompleteGenerator.key, this.lineAutoCompleteGenerator);
+        this.getRef().addGenerator(ArrowLineAutoCompleteGenerator.key, this.lineAutoCompleteGenerator);
         this.getRef().addGenerator(ActiveGenerator.key, this.activeGenerator);
     }
     initialize() {
@@ -6517,7 +6656,7 @@ class GeometryComponent extends CommonElementFlavour {
     }
 }
 
-class LineActiveGenerator extends Generator {
+class ArrowLineActiveGenerator extends Generator {
     constructor() {
         super(...arguments);
         this.onlySelectedCurrentLine = false;
@@ -6537,10 +6676,10 @@ class LineActiveGenerator extends Generator {
         if (this.onlySelectedCurrentLine) {
             activeG.classList.add('active');
             activeG.classList.add('line-handle');
-            const points = PlaitLine.getPoints(this.board, element);
+            const points = PlaitArrowLine.getPoints(this.board, element);
             let updatePoints = [...points];
             let elbowNextRenderPoints = [];
-            if (element.shape === LineShape.elbow) {
+            if (element.shape === ArrowLineShape.elbow) {
                 updatePoints = points.slice(0, 1).concat(points.slice(-1));
                 elbowNextRenderPoints = getNextRenderPoints(this.board, element, data.linePoints);
             }
@@ -6552,7 +6691,7 @@ class LineActiveGenerator extends Generator {
             if (!PlaitBoard.hasBeenTextEditing(this.board)) {
                 for (let i = 0; i < middlePoints.length; i++) {
                     const point = middlePoints[i];
-                    if (element.shape === LineShape.elbow && elbowNextRenderPoints.length) {
+                    if (element.shape === ArrowLineShape.elbow && elbowNextRenderPoints.length) {
                         const handleIndex = getHitPointIndex(middlePoints, point);
                         const isUpdateHandleIndex = isUpdatedHandleIndex(this.board, element, [...points], elbowNextRenderPoints, handleIndex);
                         if (isUpdateHandleIndex) {
@@ -6592,20 +6731,20 @@ class LineActiveGenerator extends Generator {
 
 const debugKey = 'debug:plait:line-turning';
 const debugGenerator = createDebugGenerator(debugKey);
-class LineComponent extends CommonElementFlavour {
+class ArrowLineComponent extends CommonElementFlavour {
     constructor() {
         super();
         this.boundedElements = {};
     }
     initializeGenerator() {
-        this.shapeGenerator = new LineShapeGenerator(this.board);
-        this.activeGenerator = new LineActiveGenerator(this.board);
+        this.shapeGenerator = new ArrowLineShapeGenerator(this.board);
+        this.activeGenerator = new ArrowLineActiveGenerator(this.board);
         this.initializeTextManagesByElement();
     }
     initialize() {
         this.initializeGenerator();
         this.shapeGenerator.processDrawing(this.element, this.getElementG());
-        const linePoints = getLinePoints(this.board, this.element);
+        const linePoints = getArrowLinePoints(this.board, this.element);
         this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
             selected: this.selected,
             linePoints
@@ -6637,7 +6776,7 @@ class LineComponent extends CommonElementFlavour {
         const isBoundedElementsChanged = boundedElements.source !== this.boundedElements.source || boundedElements.target !== this.boundedElements.target;
         this.boundedElements = boundedElements;
         const isChangeTheme = this.board.operations.find(op => op.type === 'set_theme');
-        const linePoints = getLinePoints(this.board, this.element);
+        const linePoints = getArrowLinePoints(this.board, this.element);
         if (value.element !== previous.element || isChangeTheme) {
             this.shapeGenerator.processDrawing(this.element, this.getElementG());
             this.activeGenerator.processDrawing(this.element, PlaitBoard.getElementActiveHost(this.board), {
@@ -6687,10 +6826,12 @@ class LineComponent extends CommonElementFlavour {
     createTextManage(text, index) {
         return new TextManage(this.board, {
             getRectangle: () => {
-                return getLineTextRectangle(this.board, this.element, index);
+                return getArrowLineTextRectangle(this.board, this.element, index);
             },
             onChange: (textManageChangeData) => {
-                const texts = [...this.element.texts];
+                const path = PlaitBoard.findPath(this.board, this.element);
+                const node = PlaitNode.get(this.board, path);
+                const texts = [...node.texts];
                 const newWidth = textManageChangeData.width < MIN_TEXT_WIDTH ? MIN_TEXT_WIDTH : textManageChangeData.width;
                 texts.splice(index, 1, {
                     text: textManageChangeData.newText ? textManageChangeData.newText : this.element.texts[index].text,
@@ -6698,7 +6839,7 @@ class LineComponent extends CommonElementFlavour {
                     width: newWidth,
                     height: textManageChangeData.height
                 });
-                DrawTransforms.setLineTexts(this.board, this.element, texts);
+                DrawTransforms.setArrowLineTexts(this.board, this.element, texts);
                 textManageChangeData.operations && memorizeLatestText(this.element, textManageChangeData.operations);
             },
             getMaxWidth: () => GeometryThreshold.defaultTextMaxWidth,
@@ -6783,9 +6924,13 @@ class TableGenerator extends Generator {
     }
     draw(element, data) {
         const rectangle = RectangleClient.getRectangleByPoints(element.points);
+        const strokeLineDash = getLineDashByElement(element);
+        const strokeWidth = getStrokeWidthByElement(element);
+        const strokeColor = getStrokeColorByElement(this.board, element);
         return getEngine(TableSymbols.table).draw(this.board, rectangle, {
-            strokeWidth: 2,
-            stroke: getDrawDefaultStrokeColor(this.board.theme.themeColorMode),
+            strokeWidth,
+            stroke: strokeColor,
+            strokeLineDash,
         }, {
             element: element
         });
@@ -6974,7 +7119,7 @@ const buildClipboardData = (board, elements, startPoint) => {
             const points = element.points.map(point => [point[0] - startPoint[0], point[1] - startPoint[1]]);
             return { ...element, points };
         }
-        if (PlaitDrawElement.isLine(element)) {
+        if (PlaitDrawElement.isArrowLine(element)) {
             let source = { ...element.source };
             let target = { ...element.target };
             let points = [...element.points];
@@ -6999,12 +7144,12 @@ const buildClipboardData = (board, elements, startPoint) => {
     });
 };
 const insertClipboardData = (board, elements, startPoint) => {
-    const lines = elements.filter(value => PlaitDrawElement.isLine(value));
+    const lines = elements.filter(value => PlaitDrawElement.isArrowLine(value));
     const geometries = elements.filter(value => (PlaitDrawElement.isGeometry(value) && !PlaitDrawElement.isGeometryByTable(value)) || PlaitDrawElement.isImage(value));
     const tables = elements.filter(value => PlaitDrawElement.isElementByTable(value));
     geometries.forEach(element => {
         const newId = idCreator();
-        updateBoundLinesId(element, lines, newId);
+        updateBoundArrowLinesId(element, lines, newId);
         element.id = newId;
         element.points = element.points.map(point => [startPoint[0] + point[0], startPoint[1] + point[1]]);
         Transforms.insertNode(board, element, [board.children.length]);
@@ -7020,7 +7165,7 @@ const insertClipboardData = (board, elements, startPoint) => {
 const insertClipboardTableData = (board, elements, startPoint, lines) => {
     elements.forEach(element => {
         const newId = idCreator();
-        updateBoundLinesId(element, lines, newId);
+        updateBoundArrowLinesId(element, lines, newId);
         element.id = newId;
         updateRowOrColumnIds(element, 'row');
         updateRowOrColumnIds(element, 'column');
@@ -7029,14 +7174,14 @@ const insertClipboardTableData = (board, elements, startPoint, lines) => {
         Transforms.insertNode(board, element, [board.children.length]);
     });
 };
-const updateBoundLinesId = (element, lines, newId) => {
+const updateBoundArrowLinesId = (element, lines, newId) => {
     const sourceLines = [];
     const targetLines = [];
     lines.forEach(line => {
-        if (PlaitLine.isBoundElementOfSource(line, element)) {
+        if (PlaitArrowLine.isBoundElementOfSource(line, element)) {
             sourceLines.push(line);
         }
-        if (PlaitLine.isBoundElementOfTarget(line, element)) {
+        if (PlaitArrowLine.isBoundElementOfTarget(line, element)) {
             targetLines.push(line);
         }
     });
@@ -7052,15 +7197,15 @@ const withDrawFragment = (baseBoard) => {
         const drawElements = getSelectedDrawElements(board);
         if (drawElements.length) {
             const geometryElements = drawElements.filter(value => PlaitDrawElement.isGeometry(value));
-            const lineElements = drawElements.filter(value => PlaitDrawElement.isLine(value));
+            const lineElements = drawElements.filter(value => PlaitDrawElement.isArrowLine(value));
             const imageElements = drawElements.filter(value => PlaitDrawElement.isImage(value));
             const tableElements = drawElements.filter(value => PlaitDrawElement.isTable(value));
             const swimlaneElements = drawElements.filter(value => PlaitDrawElement.isSwimlane(value));
             const boundLineElements = [
-                ...getBoundedLineElements(board, geometryElements),
-                ...getBoundedLineElements(board, imageElements),
-                ...getBoundedLineElements(board, tableElements),
-                ...getBoundedLineElements(board, swimlaneElements)
+                ...getBoundedArrowLineElements(board, geometryElements),
+                ...getBoundedArrowLineElements(board, imageElements),
+                ...getBoundedArrowLineElements(board, tableElements),
+                ...getBoundedArrowLineElements(board, swimlaneElements)
             ].filter(line => !lineElements.includes(line));
             data.push(...[
                 ...geometryElements,
@@ -7079,8 +7224,8 @@ const withDrawFragment = (baseBoard) => {
         if (targetDrawElements.length) {
             if (operationType === WritableClipboardOperationType.cut) {
                 const geometryElements = targetDrawElements.filter(value => PlaitDrawElement.isGeometry(value));
-                const lineElements = targetDrawElements.filter(value => PlaitDrawElement.isLine(value));
-                boundLineElements = getBoundedLineElements(board, geometryElements).filter(line => !lineElements.includes(line));
+                const lineElements = targetDrawElements.filter(value => PlaitDrawElement.isArrowLine(value));
+                boundLineElements = getBoundedArrowLineElements(board, geometryElements).filter(line => !lineElements.includes(line));
             }
             const selectedElements = [...targetDrawElements, ...boundLineElements];
             const elements = buildClipboardData(board, selectedElements, rectangle ? [rectangle.x, rectangle.y] : [0, 0]);
@@ -7132,19 +7277,19 @@ const withDrawFragment = (baseBoard) => {
     };
     return board;
 };
-const getBoundedLineElements = (board, plaitShapes) => {
-    const lines = getLines(board);
-    return lines.filter(line => plaitShapes.find(shape => PlaitLine.isBoundElementOfSource(line, shape) || PlaitLine.isBoundElementOfTarget(line, shape)));
+const getBoundedArrowLineElements = (board, plaitShapes) => {
+    const lines = getArrowLines(board);
+    return lines.filter(line => plaitShapes.find(shape => PlaitArrowLine.isBoundElementOfSource(line, shape) || PlaitArrowLine.isBoundElementOfTarget(line, shape)));
 };
 
-const withLineCreateByDraw = (board) => {
+const withArrowLineCreateByDraw = (board) => {
     const { pointerDown, pointerMove, globalPointerUp } = board;
     let start = null;
     let sourceElement;
     let lineShapeG = null;
     let temporaryElement = null;
     board.pointerDown = (event) => {
-        const linePointers = getLinePointers();
+        const linePointers = getArrowLinePointers();
         const isLinePointer = PlaitBoard.isInPointer(board, linePointers);
         if (!PlaitBoard.isReadonly(board) && isLinePointer && isDrawingMode(board)) {
             const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
@@ -7163,7 +7308,7 @@ const withLineCreateByDraw = (board) => {
         let movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         if (start) {
             const lineShape = PlaitBoard.getPointer(board);
-            temporaryElement = handleLineCreating(board, lineShape, start, movingPoint, sourceElement, lineShapeG);
+            temporaryElement = handleArrowLineCreating(board, lineShape, start, movingPoint, sourceElement, lineShapeG);
         }
         pointerMove(event);
     };
@@ -7246,7 +7391,7 @@ const withGeometryResize = (board) => {
     return board;
 };
 
-const withLineResize = (board) => {
+const withArrowLineResize = (board) => {
     let elbowLineIndex;
     let elbowLineDeleteCount;
     let elbowSourcePoint;
@@ -7258,11 +7403,11 @@ const withLineResize = (board) => {
             return true;
         },
         hitTest: (point) => {
-            const selectedLineElements = getSelectedLineElements(board);
+            const selectedLineElements = getSelectedArrowLineElements(board);
             if (selectedLineElements.length > 0) {
                 let result = null;
                 selectedLineElements.forEach(value => {
-                    const handleRef = getHitLineResizeHandleRef(board, value, point);
+                    const handleRef = getHitArrowLineResizeHandleRef(board, value, point);
                     if (handleRef) {
                         result = {
                             element: value,
@@ -7276,9 +7421,9 @@ const withLineResize = (board) => {
             return null;
         },
         beforeResize: (resizeRef) => {
-            if (resizeRef.element.shape === LineShape.elbow &&
-                resizeRef.handle !== LineResizeHandle.source &&
-                resizeRef.handle !== LineResizeHandle.target) {
+            if (resizeRef.element.shape === ArrowLineShape.elbow &&
+                resizeRef.handle !== ArrowLineResizeHandle.source &&
+                resizeRef.handle !== ArrowLineResizeHandle.target) {
                 const params = getElbowLineRouteOptions(board, resizeRef.element);
                 if (isUseDefaultOrthogonalRoute(resizeRef.element, params)) {
                     return;
@@ -7300,8 +7445,8 @@ const withLineResize = (board) => {
             let target = { ...resizeRef.element.target };
             let handleIndex = resizeRef.handleIndex;
             const hitElement = getSnappingShape(board, resizeState.endPoint);
-            if (resizeRef.handle === LineResizeHandle.source || resizeRef.handle === LineResizeHandle.target) {
-                const object = resizeRef.handle === LineResizeHandle.source ? source : target;
+            if (resizeRef.handle === ArrowLineResizeHandle.source || resizeRef.handle === ArrowLineResizeHandle.target) {
+                const object = resizeRef.handle === ArrowLineResizeHandle.source ? source : target;
                 points[handleIndex] = resizeState.endPoint;
                 if (hitElement) {
                     object.connection = getHitConnection(board, resizeState.endPoint, hitElement);
@@ -7313,7 +7458,7 @@ const withLineResize = (board) => {
                 }
             }
             else {
-                if (resizeRef.element.shape === LineShape.elbow) {
+                if (resizeRef.element.shape === ArrowLineShape.elbow) {
                     if (elbowNextRenderPoints && elbowSourcePoint && elbowTargetPoint) {
                         const resizedPreviousAndNextPoint = getResizedPreviousAndNextPoint(elbowNextRenderPoints, elbowSourcePoint, elbowTargetPoint, handleIndex);
                         const startKeyPoint = elbowNextRenderPoints[handleIndex];
@@ -7332,7 +7477,7 @@ const withLineResize = (board) => {
                     }
                 }
                 else {
-                    if (resizeRef.handle === LineResizeHandle.addHandle) {
+                    if (resizeRef.handle === ArrowLineResizeHandle.addHandle) {
                         points.splice(handleIndex + 1, 0, resizeState.endPoint);
                     }
                     else {
@@ -7341,13 +7486,13 @@ const withLineResize = (board) => {
                 }
             }
             if (!hitElement) {
-                handleIndex = resizeRef.handle === LineResizeHandle.addHandle ? handleIndex + 1 : handleIndex;
-                const drawPoints = getLinePoints(board, resizeRef.element);
+                handleIndex = resizeRef.handle === ArrowLineResizeHandle.addHandle ? handleIndex + 1 : handleIndex;
+                const drawPoints = getArrowLinePoints(board, resizeRef.element);
                 const newPoints = [...points];
                 newPoints[0] = drawPoints[0];
                 newPoints[newPoints.length - 1] = drawPoints[drawPoints.length - 1];
-                if (resizeRef.element.shape !== LineShape.elbow ||
-                    (resizeRef.element.shape === LineShape.elbow && newPoints.length === 2)) {
+                if (resizeRef.element.shape !== ArrowLineShape.elbow ||
+                    (resizeRef.element.shape === ArrowLineShape.elbow && newPoints.length === 2)) {
                     newPoints.forEach((point, index) => {
                         if (index === handleIndex)
                             return;
@@ -7357,10 +7502,10 @@ const withLineResize = (board) => {
                     });
                 }
             }
-            DrawTransforms.resizeLine(board, { points, source, target }, resizeRef.path);
+            DrawTransforms.resizeArrowLine(board, { points, source, target }, resizeRef.path);
         },
         afterResize: (resizeRef) => {
-            if (resizeRef.element.shape === LineShape.elbow) {
+            if (resizeRef.element.shape === ArrowLineShape.elbow) {
                 const element = PlaitNode.get(board, resizeRef.path);
                 let points = element && [...element.points];
                 if (points.length > 2 && elbowNextRenderPoints && elbowSourcePoint && elbowTargetPoint) {
@@ -7379,7 +7524,7 @@ const withLineResize = (board) => {
                         points = [];
                     }
                     points = [elbowSourcePoint, ...points, elbowTargetPoint];
-                    DrawTransforms.resizeLine(board, { points }, resizeRef.path);
+                    DrawTransforms.resizeArrowLine(board, { points }, resizeRef.path);
                 }
             }
             elbowLineIndex = null;
@@ -7393,7 +7538,7 @@ const withLineResize = (board) => {
     return board;
 };
 
-const withLineBoundReaction = (board) => {
+const withArrowLineBoundReaction = (board) => {
     const { pointerMove, pointerUp } = board;
     let boundShapeG = null;
     board.pointerMove = (event) => {
@@ -7402,13 +7547,13 @@ const withLineBoundReaction = (board) => {
             pointerMove(event);
             return;
         }
-        const linePointers = Object.keys(LineShape);
+        const linePointers = Object.keys(ArrowLineShape);
         const isLinePointer = PlaitBoard.isInPointer(board, linePointers);
         const movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         const isLineResizing = isResizingByCondition(board, resizeRef => {
             const { element, handle } = resizeRef;
-            const isSourceOrTarget = handle === LineResizeHandle.target || handle === LineResizeHandle.source;
-            return PlaitDrawElement.isLine(element) && isSourceOrTarget;
+            const isSourceOrTarget = handle === ArrowLineResizeHandle.target || handle === ArrowLineResizeHandle.source;
+            return PlaitDrawElement.isArrowLine(element) && isSourceOrTarget;
         });
         if (isLinePointer || isLineResizing) {
             const hitElement = getHitShape(board, movingPoint);
@@ -7441,33 +7586,34 @@ const withLineBoundReaction = (board) => {
     return board;
 };
 
-const withLineText = (board) => {
+const withArrowLineText = (board) => {
     const { dblClick } = board;
     board.dblClick = (event) => {
         if (!PlaitBoard.isReadonly(board)) {
             const clickPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
             const hitTarget = getHitElementByPoint(board, clickPoint, (element) => {
-                return PlaitDrawElement.isLine(element);
+                return PlaitDrawElement.isArrowLine(element);
             });
             const hitTargetPath = hitTarget && PlaitBoard.findPath(board, hitTarget);
             if (hitTarget) {
-                const points = getLinePoints(board, hitTarget);
+                const points = getArrowLinePoints(board, hitTarget);
                 const point = getNearestPointBetweenPointAndSegments(clickPoint, points);
                 const texts = hitTarget.texts?.length ? [...hitTarget.texts] : [];
-                const textIndex = getHitLineTextIndex(board, hitTarget, clickPoint);
-                const isHitText = isHitLineText(board, hitTarget, clickPoint);
+                const textIndex = getHitArrowLineTextIndex(board, hitTarget, clickPoint);
+                const isHitText = isHitArrowLineText(board, hitTarget, clickPoint);
                 if (isHitText) {
                     editHandle(board, hitTarget, textIndex);
                 }
                 else {
                     const ratio = getRatioByPoint(points, point);
+                    const textMemory = getMemorizedLatest('line')?.text || {};
                     texts.push({
-                        text: buildText(LINE_TEXT),
+                        text: buildText(LINE_TEXT, undefined, textMemory),
                         position: ratio,
                         width: 28,
                         height: 20
                     });
-                    DrawTransforms.setLineTexts(board, hitTarget, texts);
+                    DrawTransforms.setArrowLineTexts(board, hitTarget, texts);
                     setTimeout(() => {
                         if (hitTargetPath) {
                             const newHitTarget = PlaitNode.get(board, hitTargetPath);
@@ -7489,7 +7635,7 @@ function editHandle(board, element, manageIndex, isFirstEdit = false) {
         const text = Node.string(textManage.getText());
         const shouldRemove = !text || (isFirstEdit && text === LINE_TEXT);
         if (shouldRemove) {
-            DrawTransforms.removeLineText(board, element, manageIndex);
+            DrawTransforms.removeArrowLineText(board, element, manageIndex);
         }
     });
 }
@@ -7516,8 +7662,8 @@ class ImageComponent extends CommonElementFlavour {
                 };
             }
         });
-        this.lineAutoCompleteGenerator = new LineAutoCompleteGenerator(this.board);
-        this.getRef().addGenerator(LineAutoCompleteGenerator.key, this.lineAutoCompleteGenerator);
+        this.lineAutoCompleteGenerator = new ArrowLineAutoCompleteGenerator(this.board);
+        this.getRef().addGenerator(ArrowLineAutoCompleteGenerator.key, this.lineAutoCompleteGenerator);
     }
     initialize() {
         super.initialize();
@@ -7554,7 +7700,7 @@ class ImageComponent extends CommonElementFlavour {
     }
 }
 
-const withLineAutoCompleteReaction = (board) => {
+const withArrowLineAutoCompleteReaction = (board) => {
     const { pointerMove } = board;
     let reactionG = null;
     board.pointerMove = (event) => {
@@ -7568,7 +7714,7 @@ const withLineAutoCompleteReaction = (board) => {
             const hitIndex = getHitIndexOfAutoCompletePoint(rotateAntiPointsByElement(movingPoint, targetElement) || movingPoint, points);
             const hitPoint = points[hitIndex];
             const ref = PlaitElement.getElementRef(targetElement);
-            const lineAutoCompleteGenerator = ref.getGenerator(LineAutoCompleteGenerator.key);
+            const lineAutoCompleteGenerator = ref.getGenerator(ArrowLineAutoCompleteGenerator.key);
             lineAutoCompleteGenerator.recoverAutoCompleteG();
             if (hitPoint) {
                 lineAutoCompleteGenerator?.removeAutoCompleteG(hitIndex);
@@ -7589,8 +7735,8 @@ const withLineAutoCompleteReaction = (board) => {
     return board;
 };
 
-const WithLineAutoCompletePluginKey = 'plait-line-auto-complete-plugin-key';
-const withLineAutoComplete = (board) => {
+const WithArrowLineAutoCompletePluginKey = 'plait-arrow-line-auto-complete-plugin-key';
+const withArrowLineAutoComplete = (board) => {
     const { pointerDown, pointerMove, globalPointerUp } = board;
     let autoCompletePoint = null;
     let lineShapeG = null;
@@ -7608,7 +7754,7 @@ const withLineAutoComplete = (board) => {
                 temporaryDisableSelection(board);
                 autoCompletePoint = hitPoint;
                 sourceElement = targetElement;
-                BoardTransforms.updatePointerType(board, LineShape.elbow);
+                BoardTransforms.updatePointerType(board, ArrowLineShape.elbow);
             }
         }
         pointerDown(event);
@@ -7630,7 +7776,7 @@ const withLineAutoComplete = (board) => {
                 }
                 // source point must be click point
                 const rotatedSourcePoint = rotatePointsByElement(sourcePoint, sourceElement) || sourcePoint;
-                temporaryElement = handleLineCreating(board, LineShape.elbow, rotatedSourcePoint, movingPoint, sourceElement, lineShapeG);
+                temporaryElement = handleArrowLineCreating(board, ArrowLineShape.elbow, rotatedSourcePoint, movingPoint, sourceElement, lineShapeG);
             }
         }
         pointerMove(event);
@@ -7640,8 +7786,7 @@ const withLineAutoComplete = (board) => {
             Transforms.insertNode(board, temporaryElement, [board.children.length]);
             clearSelectedElement(board);
             addSelectedElement(board, temporaryElement);
-            const afterComplete = board.getPluginOptions(WithLineAutoCompletePluginKey)
-                ?.afterComplete;
+            const afterComplete = board.getPluginOptions(WithArrowLineAutoCompletePluginKey)?.afterComplete;
             afterComplete && afterComplete(temporaryElement);
         }
         if (autoCompletePoint) {
@@ -7657,7 +7802,7 @@ const withLineAutoComplete = (board) => {
     return board;
 };
 
-const withLineTextMove = (board) => {
+const withArrowLineTextMove = (board) => {
     let textIndex = 0;
     const movableBuffer = 100;
     const options = {
@@ -7668,10 +7813,10 @@ const withLineTextMove = (board) => {
         hitTest: (point) => {
             let result = null;
             const line = getHitElementByPoint(board, point, (element) => {
-                return PlaitDrawElement.isLine(element);
+                return PlaitDrawElement.isArrowLine(element);
             });
             if (line) {
-                const index = getHitLineTextIndex(board, line, point);
+                const index = getHitArrowLineTextIndex(board, line, point);
                 const textManages = getTextManages(line);
                 const textManage = textManages[index];
                 if (index !== -1 && !textManage.isEditing) {
@@ -7685,7 +7830,7 @@ const withLineTextMove = (board) => {
             const element = resizeRef.element;
             if (element) {
                 const movingPoint = resizeState.endPoint;
-                const points = getLinePoints(board, element);
+                const points = getArrowLinePoints(board, element);
                 const distance = distanceBetweenPointAndSegments(points, movingPoint);
                 if (distance <= movableBuffer) {
                     const point = getNearestPointBetweenPointAndSegments(movingPoint, points, false);
@@ -7695,7 +7840,7 @@ const withLineTextMove = (board) => {
                         ...texts[textIndex],
                         position
                     };
-                    DrawTransforms.setLineTexts(board, element, texts);
+                    DrawTransforms.setArrowLineTexts(board, element, texts);
                 }
             }
         }
@@ -7855,8 +8000,8 @@ class TableComponent extends CommonElementFlavour {
         });
         this.tableGenerator = new TableGenerator(this.board);
         this.initializeTextManage();
-        this.lineAutoCompleteGenerator = new LineAutoCompleteGenerator(this.board);
-        this.getRef().addGenerator(LineAutoCompleteGenerator.key, this.lineAutoCompleteGenerator);
+        this.lineAutoCompleteGenerator = new ArrowLineAutoCompleteGenerator(this.board);
+        this.getRef().addGenerator(ArrowLineAutoCompleteGenerator.key, this.lineAutoCompleteGenerator);
     }
     initialize() {
         super.initialize();
@@ -7902,9 +8047,9 @@ class TableComponent extends CommonElementFlavour {
         this.textGenerator = new TextGenerator(this.board, this.element, texts, {
             onChange: (value, data, text) => {
                 const height = data.height / this.board.viewport.zoom;
-                const width = data.width / this.board.viewport.zoom;
+                const path = PlaitBoard.findPath(this.board, value);
                 if (data.newText) {
-                    DrawTransforms.setTableText(this.board, value, text.key, data.newText, width, height);
+                    DrawTransforms.setTableText(this.board, path, text.key, data.newText, height);
                 }
                 data.operations && memorizeLatestText(value, data.operations);
             },
@@ -8095,7 +8240,7 @@ function withTableResize(board) {
 
 const withTable = (board) => {
     const tableBoard = board;
-    const { drawElement, getRectangle, isRectangleHit, isHit, isMovable, dblClick, keyDown } = tableBoard;
+    const { drawElement, getRectangle, isRectangleHit, isHit, isMovable, dblClick, keyDown, pointerUp } = tableBoard;
     tableBoard.drawElement = (context) => {
         if (PlaitDrawElement.isElementByTable(context.element)) {
             return TableComponent;
@@ -8132,12 +8277,21 @@ const withTable = (board) => {
         const selectedElements = getSelectedElements(board);
         const isSingleSelection = selectedElements.length === 1;
         const targetElement = selectedElements[0];
-        if (!PlaitBoard.isReadonly(board) && !isVirtualKey(event) && !isDelete(event) && !isSpaceHotkey(event) && isSingleSelection) {
+        if (!PlaitBoard.isReadonly(board) &&
+            !PlaitBoard.hasBeenTextEditing(tableBoard) &&
+            !isVirtualKey(event) &&
+            !isDelete(event) &&
+            !isSpaceHotkey(event) &&
+            isSingleSelection) {
             event.preventDefault();
             if (PlaitDrawElement.isElementByTable(targetElement)) {
-                const firstTextCell = targetElement.cells.find(item => item.text && item.textHeight);
-                if (firstTextCell) {
-                    editCell(firstTextCell);
+                const cells = getSelectedCells(targetElement);
+                let cell = targetElement.cells.find(item => item.text && item.textHeight);
+                if (cells?.length) {
+                    cell = cells.find(item => item.text && item.textHeight);
+                }
+                if (cell) {
+                    editCell(cell);
                     return;
                 }
             }
@@ -8159,6 +8313,23 @@ const withTable = (board) => {
         }
         dblClick(event);
     };
+    tableBoard.pointerUp = (event) => {
+        const isSetSelectionPointer = PlaitBoard.isPointer(tableBoard, PlaitPointerType.selection) || PlaitBoard.isPointer(tableBoard, PlaitPointerType.hand);
+        const isSkip = !isMainPointer(event) || isDragging(tableBoard) || !isSetSelectionPointer;
+        if (isSkip) {
+            pointerUp(event);
+            return;
+        }
+        if (isSingleSelectTable(tableBoard)) {
+            const point = toViewBoxPoint(tableBoard, toHostPoint(tableBoard, event.x, event.y));
+            const element = getSelectedTableElements(tableBoard)[0];
+            const hitCell = getHitCell(tableBoard, element, point);
+            if (hitCell && hitCell.text && hitCell.textHeight) {
+                setSelectedCells(element, [hitCell]);
+            }
+        }
+        pointerUp(event);
+    };
     tableBoard.buildTable = (element) => {
         return element;
     };
@@ -8166,14 +8337,12 @@ const withTable = (board) => {
 };
 
 const isSwimlaneDndMode = (board) => {
-    const swimlanePointers = getSwimlanePointers();
-    const isSwimlanePointer = PlaitBoard.isInPointer(board, swimlanePointers);
+    const isSwimlanePointer = isSwimlanePointers(board);
     const dndMode = isSwimlanePointer && isDndMode(board);
     return dndMode;
 };
 const isSwimlaneDrawingMode = (board) => {
-    const swimlanePointers = getSwimlanePointers();
-    const isSwimlanePointer = PlaitBoard.isInPointer(board, swimlanePointers);
+    const isSwimlanePointer = isSwimlanePointers(board);
     const drawingMode = isSwimlanePointer && isDrawingMode(board);
     return drawingMode;
 };
@@ -8303,28 +8472,11 @@ const withSwimlane = (board) => {
         }
         return buildTable(element);
     };
-    board.pointerUp = (event) => {
-        const isSetSelectionPointer = PlaitBoard.isPointer(board, PlaitPointerType.selection) || PlaitBoard.isPointer(board, PlaitPointerType.hand);
-        const isSkip = !isMainPointer(event) || isDragging(board) || !isSetSelectionPointer;
-        if (isSkip) {
-            pointerUp(event);
-            return;
-        }
-        if (isSingleSelectSwimlane(board)) {
-            const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-            const element = getSelectedSwimlane(board);
-            const hitCell = getHitCell(board, element, point);
-            if (hitCell && hitCell.text && hitCell.textHeight) {
-                setSelectedCells(element, [hitCell]);
-            }
-        }
-        pointerUp(event);
-    };
     return withSwimlaneCreateByDrawing(withSwimlaneCreateByDrag(board));
 };
 
 const withDraw = (board) => {
-    const { drawElement, getRectangle, isRectangleHit, isHit, isInsidePoint, isMovable, isAlign, getRelatedFragment } = board;
+    const { drawElement, getRectangle, isRectangleHit, isHit, isInsidePoint, isMovable, isAlign, getRelatedFragment, getHitElement } = board;
     board.drawElement = (context) => {
         if (PlaitDrawElement.isGeometry(context.element)) {
             if (PlaitDrawElement.isUML(context.element)) {
@@ -8332,8 +8484,8 @@ const withDraw = (board) => {
             }
             return GeometryComponent;
         }
-        else if (PlaitDrawElement.isLine(context.element)) {
-            return LineComponent;
+        else if (PlaitDrawElement.isArrowLine(context.element)) {
+            return ArrowLineComponent;
         }
         else if (PlaitDrawElement.isImage(context.element)) {
             return ImageComponent;
@@ -8344,10 +8496,10 @@ const withDraw = (board) => {
         if (PlaitDrawElement.isGeometry(element)) {
             return RectangleClient.getRectangleByPoints(element.points);
         }
-        if (PlaitDrawElement.isLine(element)) {
-            const points = getLinePoints(board, element);
+        if (PlaitDrawElement.isArrowLine(element)) {
+            const points = getArrowLinePoints(board, element);
             const lineTextRectangles = element.texts.map((text, index) => {
-                const rectangle = getLineTextRectangle(board, element, index);
+                const rectangle = getArrowLineTextRectangle(board, element, index);
                 return rectangle;
             });
             const linePointsRectangle = RectangleClient.getRectangleByPoints(points);
@@ -8372,6 +8524,13 @@ const withDraw = (board) => {
         }
         return isHit(element, point);
     };
+    board.getHitElement = elements => {
+        const isDrawElements = elements.every(item => PlaitDrawElement.isDrawElement(item));
+        if (isDrawElements) {
+            return getDrawHitElement(board, elements);
+        }
+        return getHitElement(elements);
+    };
     board.isInsidePoint = (element, point) => {
         const result = isHitElementInside(board, element, point);
         if (result !== null) {
@@ -8386,7 +8545,7 @@ const withDraw = (board) => {
         if (PlaitDrawElement.isImage(element)) {
             return true;
         }
-        if (PlaitDrawElement.isLine(element)) {
+        if (PlaitDrawElement.isArrowLine(element)) {
             const selectedElements = getSelectedElements(board);
             const isSelected = (boundId) => {
                 return !!selectedElements.find(value => value.id === boundId);
@@ -8412,7 +8571,7 @@ const withDraw = (board) => {
     };
     board.getRelatedFragment = (elements, originData) => {
         const selectedElements = originData?.length ? originData : getSelectedElements(board);
-        const lineElements = board.children.filter(element => PlaitDrawElement.isLine(element));
+        const lineElements = board.children.filter(element => PlaitDrawElement.isArrowLine(element));
         const activeLines = lineElements.filter(line => {
             const source = selectedElements.find(element => element.id === line.source.boundId);
             const target = selectedElements.find(element => element.id === line.target.boundId);
@@ -8421,12 +8580,12 @@ const withDraw = (board) => {
         });
         return getRelatedFragment([...elements, ...activeLines], originData);
     };
-    return withSwimlane(withTable(withDrawResize(withLineAutoCompleteReaction(withLineBoundReaction(withLineResize(withLineTextMove(withLineText(withGeometryResize(withDrawRotate(withLineCreateByDraw(withLineAutoComplete(withGeometryCreateByDrag(withGeometryCreateByDrawing(withDrawFragment(withDrawHotkey(board))))))))))))))));
+    return withSwimlane(withTable(withDrawResize(withArrowLineAutoCompleteReaction(withArrowLineBoundReaction(withArrowLineResize(withArrowLineTextMove(withArrowLineText(withGeometryResize(withDrawRotate(withArrowLineCreateByDraw(withArrowLineAutoComplete(withGeometryCreateByDrag(withGeometryCreateByDrawing(withDrawFragment(withDrawHotkey(board))))))))))))))));
 };
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BasicShapes, DEFAULT_IMAGE_WIDTH, DefaultActivationProperty, DefaultActorProperty, DefaultArrowProperty, DefaultAssemblyProperty, DefaultBasicShapeProperty, DefaultBasicShapePropertyMap, DefaultClassProperty, DefaultCloudProperty, DefaultCombinedFragmentProperty, DefaultComponentBoxProperty, DefaultConnectorProperty, DefaultContainerProperty, DefaultDataBaseProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultDeletionProperty, DefaultDocumentProperty, DefaultDrawActiveStyle, DefaultDrawStyle, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultInterfaceProperty, DefaultInternalStorageProperty, DefaultManualInputProperty, DefaultMergeProperty, DefaultMultiDocumentProperty, DefaultNoteProperty, DefaultObjectProperty, DefaultPackageProperty, DefaultPentagonArrowProperty, DefaultPortProperty, DefaultProvidedInterfaceProperty, DefaultRequiredInterfaceProperty, DefaultSwimlaneHorizontalProperty, DefaultSwimlaneHorizontalWithHeaderProperty, DefaultSwimlanePropertyMap, DefaultSwimlaneVerticalProperty, DefaultSwimlaneVerticalWithHeaderProperty, DefaultTextProperty, DefaultTwoWayArrowProperty, DefaultUMLPropertyMap, DrawThemeColors, DrawTransforms, FlowchartSymbols, GEOMETRY_WITHOUT_TEXT, GEOMETRY_WITH_MULTIPLE_TEXT, GeometryComponent, GeometryShapeGenerator, GeometryThreshold, KEY_TO_TEXT_MANAGE, LINE_HIT_GEOMETRY_BUFFER, LINE_SNAPPING_BUFFER, LINE_SNAPPING_CONNECTOR_BUFFER, LineActiveGenerator, LineAutoCompleteGenerator, LineComponent, LineHandleKey, LineMarkerType, LineShape, MIN_TEXT_WIDTH, MemorizeKey, MultipleTextGeometryCommonTextKeys, MultipleTextGeometryTextKeys, PlaitDrawElement, PlaitGeometry, PlaitLine, PlaitTableElement, Q2C, SELECTED_CELLS, SWIMLANE_HEADER_SIZE, ShapeDefaultSpace, SingleTextGenerator, StrokeStyle, SwimlaneDrawSymbols, SwimlaneSymbols, TableGenerator, TableSymbols, TextGenerator, UMLSymbols, WithLineAutoCompletePluginKey, adjustSwimlaneShape, alignElbowSegment, alignPoints, buildDefaultTextsByShape, buildSwimlaneTable, clearSelectedCells, createCell, createDefaultCells, createDefaultFlowchart, createDefaultGeometry, createDefaultRowsOrColumns, createDefaultSwimlane, createGeometryElement, createGeometryElementWithText, createGeometryElementWithoutText, createLineElement, createMultipleTextGeometryElement, createTextElement, createUMLClassOrInterfaceGeometryElement, debugGenerator$1 as debugGenerator, deleteTextManage, drawBoundReaction, drawGeometry, drawLine, drawLineArrow, drawShape, editCell, editText, getAutoCompletePoints, getBasicPointers, getCellWithPoints, getCellsRectangle, getCellsWithPoints, getCenterPointsOnPolygon$1 as getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultBasicShapeProperty, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultSwimlanePoints, getDefaultTextPoints, getDefaultUMLProperty, getDrawDefaultStrokeColor, getElbowLineRouteOptions, getElbowPoints, getFillByElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryAlign, getGeometryPointers, getHitCell, getHitConnection, getHitConnectorPoint, getHitIndexOfAutoCompletePoint, getHitMultipleGeometryText, getHitShape, getIndexAndDeleteCountByKeyPoint, getLineDashByElement, getLineHandleRefPair, getLineMemorizedLatest, getLinePointers, getLinePoints, getLineTextRectangle, getLines, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getMidKeyPoints, getMiddlePoints, getMirrorDataPoints, getMultipleTextGeometryTextKeys, getNearestPoint, getNextRenderPoints, getNextSourceAndTargetPoints, getResizedPreviousAndNextPoint, getSelectedCells, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedLineElements, getSelectedSwimlane, getSelectedTableElements, getSnapResizingRef, getSnapResizingRefOptions, getSnappingRef, getSnappingShape, getSourceAndTargetRectangle, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getSwimlaneCount, getSwimlanePointers, getTextKey, getTextManage, getTextManageByCell, getTextRectangle, getTextShapeProperty, getUMLPointers, getVectorByConnection, handleLineCreating, hasIllegalElbowPoint, insertElement, isCellIncludeText, isDrawElementIncludeText, isDrawElementsIncludeText, isGeometryIncludeText, isHitDrawElement, isHitEdgeOfShape, isHitElementInside, isHitElementText, isHitLine, isHitLineText, isHitPolyLine, isInsideOfShape, isMultipleTextGeometry, isMultipleTextShape, isRectangleHitDrawElement, isRectangleHitElementText, isSelfLoop, isSingleSelectElementByTable, isSingleSelectSwimlane, isSingleSelectTable, isSingleTextGeometry, isSingleTextShape, isSwimlaneWithHeader, isTextExceedingBounds, isUpdatedHandleIndex, isUseDefaultOrthogonalRoute, memorizeLatestShape, memorizeLatestText, rerenderGeometryActive, setSelectedCells, setTextManage, traverseDrawShapes, updateCellIds, updateCellIdsByRowOrColumn, updateColumns, updateRowOrColumnIds, updateRows, withDraw, withLineAutoComplete };
+export { ArrowLineActiveGenerator, ArrowLineAutoCompleteGenerator, ArrowLineComponent, ArrowLineHandleKey, ArrowLineMarkerType, ArrowLineShape, BasicShapes, DEFAULT_IMAGE_WIDTH, DefaultActivationProperty, DefaultActorProperty, DefaultArrowProperty, DefaultAssemblyProperty, DefaultBasicShapeProperty, DefaultBasicShapePropertyMap, DefaultClassProperty, DefaultCloudProperty, DefaultCombinedFragmentProperty, DefaultComponentBoxProperty, DefaultConnectorProperty, DefaultContainerProperty, DefaultDataBaseProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultDeletionProperty, DefaultDocumentProperty, DefaultDrawActiveStyle, DefaultDrawStyle, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultInterfaceProperty, DefaultInternalStorageProperty, DefaultManualInputProperty, DefaultMergeProperty, DefaultMultiDocumentProperty, DefaultNoteProperty, DefaultObjectProperty, DefaultPackageProperty, DefaultPentagonArrowProperty, DefaultPortProperty, DefaultProvidedInterfaceProperty, DefaultRequiredInterfaceProperty, DefaultSwimlaneHorizontalProperty, DefaultSwimlaneHorizontalWithHeaderProperty, DefaultSwimlanePropertyMap, DefaultSwimlaneVerticalProperty, DefaultSwimlaneVerticalWithHeaderProperty, DefaultTextProperty, DefaultTwoWayArrowProperty, DefaultUMLPropertyMap, DrawThemeColors, DrawTransforms, FlowchartSymbols, GEOMETRY_NOT_CLOSED, 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, MIN_TEXT_WIDTH, MemorizeKey, MultipleTextGeometryCommonTextKeys, MultipleTextGeometryTextKeys, PlaitArrowLine, PlaitDrawElement, PlaitGeometry, PlaitTableElement, Q2C, SELECTED_CELLS, SWIMLANE_HEADER_SIZE, ShapeDefaultSpace, SingleTextGenerator, StrokeStyle, SwimlaneDrawSymbols, SwimlaneSymbols, TableGenerator, TableSymbols, TextGenerator, UMLSymbols, VectorLineShape, WithArrowLineAutoCompletePluginKey, adjustSwimlaneShape, alignElbowSegment, alignPoints, buildDefaultTextsByShape, buildSwimlaneTable, clearSelectedCells, collectArrowLineUpdatedRefsByGeometry, createArrowLineElement, createCell, createDefaultCells, createDefaultFlowchart, createDefaultGeometry, createDefaultRowsOrColumns, createDefaultSwimlane, createGeometryElement, createGeometryElementWithText, createGeometryElementWithoutText, createMultipleTextGeometryElement, createTextElement, createUMLClassOrInterfaceGeometryElement, debugGenerator$1 as debugGenerator, deleteTextManage, drawArrowLine, drawArrowLineArrow, drawBoundReaction, drawGeometry, drawShape, editCell, editText, getArrowLineHandleRefPair, getArrowLinePointers, getArrowLinePoints, getArrowLineTextRectangle, getArrowLines, getAutoCompletePoints, getBasicPointers, getCellWithPoints, getCellsRectangle, getCellsWithPoints, getCenterPointsOnPolygon$1 as getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultBasicShapeProperty, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultSwimlanePoints, getDefaultTextPoints, getDefaultUMLProperty, getDrawDefaultStrokeColor, getDrawHitElement, getElbowLineRouteOptions, getElbowPoints, getFillByElement, getFirstFilledDrawElement, getFirstTextOrLineElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryAlign, getGeometryPointers, getHitCell, getHitConnection, getHitConnectorPoint, getHitIndexOfAutoCompletePoint, getHitMultipleGeometryText, getHitShape, getIndexAndDeleteCountByKeyPoint, getLineDashByElement, getLineMemorizedLatest, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getMidKeyPoints, getMiddlePoints, getMirrorDataPoints, getMultipleTextGeometryTextKeys, getNearestPoint, getNextRenderPoints, getNextSourceAndTargetPoints, getResizedPreviousAndNextPoint, getSelectedArrowLineElements, getSelectedCells, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedSwimlane, getSelectedTableCellsEditor, getSelectedTableElements, getSnapResizingRef, getSnapResizingRefOptions, getSnappingRef, getSnappingShape, getSourceAndTargetRectangle, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getSwimlaneCount, getSwimlanePointers, getTextKey, getTextManage, getTextManageByCell, getTextRectangle, getTextShapeProperty, getUMLPointers, getVectorByConnection, handleArrowLineCreating, hasIllegalElbowPoint, insertElement, isCellIncludeText, isDrawElementClosed, isDrawElementIncludeText, isDrawElementsIncludeText, isGeometryClosed, isGeometryIncludeText, isHitArrowLine, isHitArrowLineText, isHitDrawElement, isHitEdgeOfShape, isHitElementInside, isHitElementText, isHitPolyLine, isInsideOfShape, isMultipleTextGeometry, isMultipleTextShape, isRectangleHitDrawElement, isRectangleHitElementText, isSelfLoop, isSingleSelectElementByTable, isSingleSelectSwimlane, isSingleSelectTable, isSingleTextGeometry, isSingleTextShape, isSwimlanePointers, isSwimlaneWithHeader, isTextExceedingBounds, isUpdatedHandleIndex, isUseDefaultOrthogonalRoute, memorizeLatestShape, memorizeLatestText, rerenderGeometryActive, setSelectedCells, setTextManage, traverseDrawShapes, updateCellIds, updateCellIdsByRowOrColumn, updateColumns, updateRowOrColumnIds, updateRows, withArrowLineAutoComplete, withDraw };
 //# sourceMappingURL=plait-draw.mjs.map