@plait/draw 0.62.0-next.5 → 0.62.0-next.7

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, 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, 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, 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 { 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,
@@ -390,8 +390,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,6 +578,29 @@ 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 rectangle = RectangleClient.getRectangleByPoints(table.points);
@@ -722,6 +745,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 +777,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 +788,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 +851,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 +877,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 +897,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 +975,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 +1033,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 +1131,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 +1173,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;
     }
@@ -1259,13 +1319,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;
     }
 }
@@ -1406,7 +1466,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));
@@ -1576,9 +1636,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);
@@ -1586,12 +1646,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);
@@ -1602,35 +1662,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;
         }
@@ -1694,10 +1754,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 : [],
@@ -1707,17 +1767,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;
@@ -1726,7 +1786,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;
@@ -1753,7 +1813,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);
@@ -1763,8 +1823,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)
@@ -1772,8 +1832,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;
@@ -1793,7 +1853,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)) {
@@ -1812,15 +1872,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 {
@@ -1832,10 +1892,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;
 };
@@ -1853,9 +1913,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,
@@ -1864,9 +1924,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)
     });
 };
@@ -1886,33 +1946,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, {
@@ -1921,7 +1981,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'
@@ -2107,18 +2167,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,
@@ -2126,10 +2186,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,
@@ -2137,10 +2197,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) => {
@@ -2254,7 +2314,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)) {
@@ -2267,7 +2327,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);
@@ -2362,8 +2422,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) => {
@@ -2379,32 +2439,32 @@ const getSelectedSwimlane = (board) => {
     return selectedElements.find(item => PlaitDrawElement.isSwimlane(item));
 };
 
-const resizeLine = (board, options, path) => {
+const resizeArrowLine = (board, options, path) => {
     Transforms.setNode(board, options, path);
 };
-const setLineTexts = (board, element, texts) => {
+const setArrowLineTexts = (board, element, texts) => {
     const path = PlaitBoard.findPath(board, element);
     Transforms.setNode(board, { texts }, path);
 };
-const removeLineText = (board, element, index) => {
+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 setLineMark = (board, handleKey, marker) => {
-    memorizeLatest(MemorizeKey.line, handleKey, marker);
-    const selectedElements = getSelectedLineElements(board);
+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 === LineHandleKey.source ? element.source : element.target;
+        let handle = handleKey === ArrowLineHandleKey.source ? element.source : element.target;
         handle = { ...handle, marker };
         Transforms.setNode(board, { [handleKey]: handle }, path);
     });
 };
-const setLineShape = (board, newProperties) => {
-    const elements = getSelectedLineElements(board);
+const setArrowLineShape = (board, newProperties) => {
+    const elements = getSelectedArrowLineElements(board);
     elements.map(element => {
         const _properties = { ...newProperties };
         if (element.shape === newProperties.shape) {
@@ -2414,10 +2474,10 @@ const setLineShape = (board, newProperties) => {
         Transforms.setNode(board, _properties, path);
     });
 };
-const collectLineUpdatedRefsByGeometry = (board, geometry, refs) => {
+const collectArrowLineUpdatedRefsByGeometry = (board, geometry, refs) => {
     const lines = findElements(board, {
         match: (element) => {
-            if (PlaitDrawElement.isLine(element)) {
+            if (PlaitDrawElement.isArrowLine(element)) {
                 return element.source.boundId === geometry.id || element.target.boundId === geometry.id;
             }
             return false;
@@ -2429,7 +2489,7 @@ const collectLineUpdatedRefsByGeometry = (board, geometry, refs) => {
             const isSourceBound = line.source.boundId === geometry.id;
             const handle = isSourceBound ? 'source' : 'target';
             const object = { ...line[handle] };
-            const linePoints = getLinePoints(board, line);
+            const linePoints = getArrowLinePoints(board, line);
             const point = isSourceBound ? linePoints[0] : linePoints[linePoints.length - 1];
             object.connection = getHitConnection(board, point, geometry);
             const path = PlaitBoard.findPath(board, line);
@@ -2448,14 +2508,14 @@ const collectLineUpdatedRefsByGeometry = (board, geometry, refs) => {
         });
     }
 };
-const connectLineToGeometry = (board, lineElement, handle, geometryElement) => {
-    const linePoints = PlaitLine.getPoints(board, lineElement);
-    const point = handle === LineHandleKey.source ? linePoints[0] : linePoints[linePoints.length - 1];
+const connectArrowLineToGeometry = (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 === LineHandleKey.source) {
+        if (handle === ArrowLineHandleKey.source) {
             source = {
                 ...source,
                 boundId: geometryElement.id,
@@ -2470,7 +2530,7 @@ const connectLineToGeometry = (board, lineElement, handle, geometryElement) => {
             };
         }
         const path = PlaitBoard.findPath(board, lineElement);
-        resizeLine(board, { source, target }, path);
+        resizeArrowLine(board, { source, target }, path);
     }
 };
 
@@ -2523,12 +2583,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);
         });
     }
 };
@@ -2649,8 +2709,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',
@@ -2663,18 +2725,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;
@@ -2877,33 +2943,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 => {
@@ -2919,7 +2958,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];
@@ -2955,8 +2995,35 @@ 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 DrawTransforms = {
@@ -2966,22 +3033,22 @@ const DrawTransforms = {
     resizeGeometry,
     insertText,
     setTextSize,
-    resizeLine,
-    setLineTexts,
-    removeLineText,
-    setLineMark,
-    setLineShape,
+    resizeArrowLine,
+    setArrowLineTexts,
+    removeArrowLineText,
+    setArrowLineMark,
+    setArrowLineShape,
     insertImage,
     switchGeometryShape,
-    connectLineToGeometry,
+    connectArrowLineToGeometry,
     insertGeometryByVector,
     setTableText,
     addSwimlaneRow,
     addSwimlaneColumn,
     removeSwimlaneRow,
     removeSwimlaneColumn,
-    setSwimlaneFill,
-    updateSwimlaneCount
+    updateSwimlaneCount,
+    setTableFill
 };
 
 const getHitRectangleResizeHandleRef = (board, rectangle, point, angle = 0) => {
@@ -3116,10 +3183,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)) {
@@ -3438,29 +3511,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++) {
@@ -5023,7 +5073,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;
     },
@@ -5062,13 +5112,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;
     },
@@ -5109,7 +5159,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;
     },
@@ -5222,8 +5272,8 @@ const TableEngine = {
         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);
+        const tableTopBorder = drawLine(rs, [x, y], [x + width, y], roughOptions);
+        const tableLeftBorder = drawLine(rs, [x, y], [x, y + height], roughOptions);
         g.append(tableTopBorder, tableLeftBorder);
         const pointCells = getCellsWithPoints(board, { ...options?.element });
         pointCells.forEach(cell => {
@@ -5235,8 +5285,8 @@ const TableEngine = {
                 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);
+            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');
@@ -5742,7 +5792,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;
@@ -6050,7 +6101,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;
@@ -6063,19 +6114,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;
@@ -6092,7 +6145,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;
@@ -6147,7 +6202,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;
@@ -6166,32 +6221,32 @@ const getElbowLineRouteOptions = (board, element, handleRefPair) => {
     };
 };
 
-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 {
@@ -6199,10 +6254,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;
@@ -6245,16 +6300,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;
@@ -6267,7 +6331,7 @@ const PlaitDrawElement = {
     },
     isDrawElement: (value) => {
         if (PlaitDrawElement.isGeometry(value) ||
-            PlaitDrawElement.isLine(value) ||
+            PlaitDrawElement.isArrowLine(value) ||
             PlaitDrawElement.isImage(value) ||
             PlaitDrawElement.isTable(value) ||
             PlaitDrawElement.isSwimlane(value)) {
@@ -6278,7 +6342,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);
@@ -6306,7 +6373,7 @@ const PlaitDrawElement = {
     },
     isElementByTable: (value) => {
         return PlaitDrawElement.isTable(value) || PlaitDrawElement.isSwimlane(value) || PlaitDrawElement.isGeometryByTable(value);
-    },
+    }
 };
 
 class GeometryShapeGenerator extends Generator {
@@ -6332,7 +6399,7 @@ class GeometryShapeGenerator extends Generator {
     }
 }
 
-class LineAutoCompleteGenerator extends Generator {
+class ArrowLineAutoCompleteGenerator extends Generator {
     static { this.key = 'line-auto-complete-generator'; }
     constructor(board) {
         super(board);
@@ -6419,12 +6486,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() {
@@ -6515,7 +6582,7 @@ class GeometryComponent extends CommonElementFlavour {
     }
 }
 
-class LineActiveGenerator extends Generator {
+class ArrowLineActiveGenerator extends Generator {
     constructor() {
         super(...arguments);
         this.onlySelectedCurrentLine = false;
@@ -6535,10 +6602,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);
             }
@@ -6550,7 +6617,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) {
@@ -6590,20 +6657,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
@@ -6635,7 +6702,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), {
@@ -6685,10 +6752,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,
@@ -6696,7 +6765,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,
@@ -6976,7 +7045,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];
@@ -7001,12 +7070,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]);
@@ -7022,7 +7091,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');
@@ -7031,14 +7100,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);
         }
     });
@@ -7054,15 +7123,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,
@@ -7081,8 +7150,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]);
@@ -7134,19 +7203,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));
@@ -7165,7 +7234,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);
     };
@@ -7248,7 +7317,7 @@ const withGeometryResize = (board) => {
     return board;
 };
 
-const withLineResize = (board) => {
+const withArrowLineResize = (board) => {
     let elbowLineIndex;
     let elbowLineDeleteCount;
     let elbowSourcePoint;
@@ -7260,11 +7329,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,
@@ -7278,9 +7347,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;
@@ -7302,8 +7371,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);
@@ -7315,7 +7384,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];
@@ -7334,7 +7403,7 @@ const withLineResize = (board) => {
                     }
                 }
                 else {
-                    if (resizeRef.handle === LineResizeHandle.addHandle) {
+                    if (resizeRef.handle === ArrowLineResizeHandle.addHandle) {
                         points.splice(handleIndex + 1, 0, resizeState.endPoint);
                     }
                     else {
@@ -7343,13 +7412,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;
@@ -7359,10 +7428,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) {
@@ -7381,7 +7450,7 @@ const withLineResize = (board) => {
                         points = [];
                     }
                     points = [elbowSourcePoint, ...points, elbowTargetPoint];
-                    DrawTransforms.resizeLine(board, { points }, resizeRef.path);
+                    DrawTransforms.resizeArrowLine(board, { points }, resizeRef.path);
                 }
             }
             elbowLineIndex = null;
@@ -7395,7 +7464,7 @@ const withLineResize = (board) => {
     return board;
 };
 
-const withLineBoundReaction = (board) => {
+const withArrowLineBoundReaction = (board) => {
     const { pointerMove, pointerUp } = board;
     let boundShapeG = null;
     board.pointerMove = (event) => {
@@ -7404,13 +7473,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);
@@ -7443,33 +7512,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);
@@ -7491,7 +7561,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);
         }
     });
 }
@@ -7518,8 +7588,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();
@@ -7556,7 +7626,7 @@ class ImageComponent extends CommonElementFlavour {
     }
 }
 
-const withLineAutoCompleteReaction = (board) => {
+const withArrowLineAutoCompleteReaction = (board) => {
     const { pointerMove } = board;
     let reactionG = null;
     board.pointerMove = (event) => {
@@ -7570,7 +7640,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);
@@ -7591,8 +7661,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;
@@ -7610,7 +7680,7 @@ const withLineAutoComplete = (board) => {
                 temporaryDisableSelection(board);
                 autoCompletePoint = hitPoint;
                 sourceElement = targetElement;
-                BoardTransforms.updatePointerType(board, LineShape.elbow);
+                BoardTransforms.updatePointerType(board, ArrowLineShape.elbow);
             }
         }
         pointerDown(event);
@@ -7632,7 +7702,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);
@@ -7642,8 +7712,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) {
@@ -7659,7 +7728,7 @@ const withLineAutoComplete = (board) => {
     return board;
 };
 
-const withLineTextMove = (board) => {
+const withArrowLineTextMove = (board) => {
     let textIndex = 0;
     const movableBuffer = 100;
     const options = {
@@ -7670,10 +7739,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) {
@@ -7687,7 +7756,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);
@@ -7697,7 +7766,7 @@ const withLineTextMove = (board) => {
                         ...texts[textIndex],
                         position
                     };
-                    DrawTransforms.setLineTexts(board, element, texts);
+                    DrawTransforms.setArrowLineTexts(board, element, texts);
                 }
             }
         }
@@ -7857,8 +7926,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();
@@ -7904,9 +7973,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);
             },
@@ -8097,7 +8166,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;
@@ -8161,6 +8230,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;
     };
@@ -8305,28 +8391,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)) {
@@ -8334,8 +8403,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;
@@ -8346,10 +8415,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);
@@ -8374,6 +8443,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) {
@@ -8388,7 +8464,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);
@@ -8414,7 +8490,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);
@@ -8423,12 +8499,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_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, 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, isDrawElementIncludeText, isDrawElementsIncludeText, isGeometryIncludeText, isHitArrowLine, isHitArrowLineText, isHitDrawElement, isHitEdgeOfShape, isHitElementInside, isHitElementText, 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, withArrowLineAutoComplete, withDraw };
 //# sourceMappingURL=plait-draw.mjs.map