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

package/fesm2022/plait-draw.mjs

@@ -1,5 +1,5 @@
-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 { ACTIVE_STROKE_WIDTH, ThemeColorMode, RectangleClient, getSelectedElements, idCreator, distanceBetweenPointAndSegments, HIT_DISTANCE_BUFFER, rotatePointsByElement, isPolylineHitRectangle, rotateAntiPointsByElement, distanceBetweenPointAndPoint, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, depthFirstRecursion, PlaitBoard, getIsRecursionFunc, createG, SNAPPING_STROKE_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, createDebugGenerator, Point, arrowPoints, createPath, drawLinearPath, rotate, catmullRomFitting, setStrokeLinecap, findElements, createMask, createRect, PlaitElement, getElementById, PlaitNode, hasValidAngle, toViewBoxPoint, toHostPoint, Direction, rotatePoints, getRectangleByElements, getSelectionAngle, rotatedDataPoints, isAxisChangedByAngle, isSelectionMoving, drawRectangle, getRectangleByAngle, getSnapRectangles, getTripleAxis, getMinPointDelta, SNAP_TOLERANCE, drawPointSnapLines, drawSolidLines, isPointInPolygon, getNearestPointBetweenPointAndSegments, isPointInEllipse, getNearestPointBetweenPointAndEllipse, getEllipseTangentSlope, getVectorFromPointAndSlope, drawRoundRectangle, isPointInRoundRectangle, setPathStrokeLinecap, getCrossingPointsBetweenEllipseAndSegment, drawLine, Path, RgbaToHEX, getHitElementByPoint, preventTouchMove, WritableClipboardOperationType, createClipboardContext, WritableClipboardType, addClipboardContext, setAngleForG, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER, isMainPointer, throttleRAF, getAngleBetweenPoints, normalizeAngle, degreesToRadians, rotateElements, MERGING, ROTATE_HANDLE_CLASS_NAME, SELECTION_RECTANGLE_CLASS_NAME, isSelectedElement, isDragging } from '@plait/core';
+import { DEFAULT_FILL, Alignment, WithTextPluginKey, ELEMENT_TO_TEXT_MANAGES, TextManage, getMemorizedLatest, memorizeLatest, RESIZE_HANDLE_DIAMETER, getPointOnPolyline, buildText, sortElementsByArea, isFilled, getTextEditorsByElement, Generator, removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, getExtendPoint, getUnitVectorByPointAndPoint, getPointByVectorComponent, measureElement, DEFAULT_FONT_FAMILY, getFirstTextManage, ActiveGenerator, isSourceAndTargetIntersect, getPoints, DEFAULT_ROUTE_MARGIN, normalizeShapePoints, getFirstTextEditor, resetPointsAfterResize, getDirectionByVector, getRectangleResizeHandleRefs, getRotatedResizeCursorClassByAngle, ROTATE_HANDLE_DISTANCE_TO_ELEMENT, ROTATE_HANDLE_SIZE, isCornerHandle, getIndexByResizeHandle, withResize, drawHandle, getSymmetricHandleIndex, getResizeHandlePointByIndex, getDirectionFactorByDirectionComponent, getCrossingPointsBetweenPointAndSegment, isPointOnSegment, getDirectionByPointOfRectangle, getDirectionFactor, rotateVector, getOppositeDirection, rotateVectorAnti90, getSourceAndTargetOuterRectangle, getNextPoint, PRIMARY_COLOR, CommonElementFlavour, canResize, drawPrimaryHandle, drawFillPrimaryHandle, isVirtualKey, isDelete, isSpaceHotkey, isDndMode, isDrawingMode, getElementsText, acceptImageTypes, getElementOfFocusedImage, buildImage, isResizingByCondition, getRatioByPoint, getTextManages, ImageGenerator, ResizeHandle, addRotating, removeRotating, drawRotateHandle } from '@plait/common';
 import { pointsOnBezierCurves } from 'points-on-curve';
 import { TEXT_DEFAULT_HEIGHT, DEFAULT_FONT_SIZE, AlignEditor } from '@plait/text-plugins';
 import { isKeyHotkey } from 'is-hotkey';
@@ -374,6 +374,13 @@ const GEOMETRY_WITHOUT_TEXT = [
     UMLSymbols.requiredInterface
 ];
 const GEOMETRY_WITH_MULTIPLE_TEXT = [UMLSymbols.package, UMLSymbols.combinedFragment];
+const GEOMETRY_NOT_CLOSED = [
+    FlowchartSymbols.noteCurlyLeft,
+    FlowchartSymbols.noteCurlyRight,
+    FlowchartSymbols.noteSquare,
+    UMLSymbols.requiredInterface,
+    UMLSymbols.deletion
+];
 
 const getGeometryPointers = () => {
     return [...Object.keys(BasicShapes), ...Object.keys(FlowchartSymbols), ...Object.keys(UMLSymbols)];
@@ -602,7 +609,10 @@ function clearSelectedCells(element) {
 }
 
 function getCellsWithPoints(board, element) {
-    const table = board.buildTable(element);
+    const table = board?.buildTable(element);
+    if (!table || !table.points || !table.columns || !table.rows) {
+        throw new Error('can not get table cells points');
+    }
     const rectangle = RectangleClient.getRectangleByPoints(table.points);
     const columnsCount = table.columns.length;
     const rowsCount = table.rows.length;
@@ -634,9 +644,14 @@ function getCellsWithPoints(board, element) {
     return cells;
 }
 function getCellWithPoints(board, table, cellId) {
-    const cells = getCellsWithPoints(board, table);
-    const cellIndex = table.cells.findIndex(item => item.id === cellId);
-    return cells[cellIndex];
+    try {
+        const cells = getCellsWithPoints(board, table);
+        const cellIndex = cells && table.cells.findIndex(item => item.id === cellId);
+        return cells[cellIndex];
+    }
+    catch (error) {
+        throw new Error('can not get table cell points');
+    }
 }
 function calculateCellsSize(items, tableSize, count, isWidth) {
     const cellSizes = [];
@@ -1187,6 +1202,15 @@ const isDrawElementsIncludeText = (elements) => {
         return isDrawElementIncludeText(item);
     });
 };
+const isDrawElementClosed = (element) => {
+    if (PlaitDrawElement.isText(element) || PlaitDrawElement.isArrowLine(element) || PlaitDrawElement.isImage(element)) {
+        return false;
+    }
+    if (PlaitDrawElement.isGeometry(element)) {
+        return isGeometryClosed(element);
+    }
+    return true;
+};
 const getSnappingShape = (board, point) => {
     let hitElement = getHitShape(board, point);
     if (hitElement) {
@@ -1241,7 +1265,7 @@ const drawBoundReaction = (board, element, roughOptions = { hasMask: true, hasCo
         const maskG = drawShape(board, activeRectangle, shape, {
             stroke: SELECTION_BORDER_COLOR,
             strokeWidth: 0,
-            fill: SELECTION_FILL_COLOR,
+            fill: isDrawElementClosed(element) ? SELECTION_FILL_COLOR : DefaultDrawStyle.fill,
             fillStyle: 'solid'
         }, drawOptions);
         g.appendChild(maskG);
@@ -1289,7 +1313,9 @@ const getStrokeColorByElement = (board, element) => {
     return strokeColor;
 };
 const getFillByElement = (board, element) => {
-    const defaultFill = PlaitDrawElement.isFlowchart(element) ? getFlowchartDefaultFill(board.theme.themeColorMode) : DefaultDrawStyle.fill;
+    const defaultFill = PlaitDrawElement.isFlowchart(element) && isDrawElementClosed(element)
+        ? getFlowchartDefaultFill(board.theme.themeColorMode)
+        : DefaultDrawStyle.fill;
     const fill = element.fill || defaultFill;
     return fill;
 };
@@ -1298,7 +1324,7 @@ const getLineDashByElement = (element) => {
         case StrokeStyle.dashed:
             return [8, 8 + getStrokeWidthByElement(element)];
         case StrokeStyle.dotted:
-            return [0, 4 + getStrokeWidthByElement(element)];
+            return [2, 4 + getStrokeWidthByElement(element)];
         default:
             return undefined;
     }
@@ -2306,6 +2332,9 @@ const isSingleTextShape = (shape) => {
 const isSingleTextGeometry = (element) => {
     return PlaitDrawElement.isGeometry(element) && isSingleTextShape(element.shape);
 };
+const isGeometryClosed = (element) => {
+    return !GEOMETRY_NOT_CLOSED.includes(element.shape);
+};
 
 const isSelfLoop = (element) => {
     return element.source.boundId && element.source.boundId === element.target.boundId;
@@ -2439,126 +2468,11 @@ const getSelectedSwimlane = (board) => {
     return selectedElements.find(item => PlaitDrawElement.isSwimlane(item));
 };
 
-const resizeArrowLine = (board, options, path) => {
-    Transforms.setNode(board, options, path);
-};
-const setArrowLineTexts = (board, element, texts) => {
-    const path = PlaitBoard.findPath(board, element);
-    Transforms.setNode(board, { texts }, path);
-};
-const removeArrowLineText = (board, element, index) => {
-    const path = PlaitBoard.findPath(board, element);
-    const texts = element.texts?.length ? [...element.texts] : [];
-    const newTexts = [...texts];
-    newTexts.splice(index, 1);
-    Transforms.setNode(board, { texts: newTexts }, path);
-};
-const setArrowLineMark = (board, handleKey, marker) => {
-    memorizeLatest(MemorizeKey.arrowLine, handleKey, marker);
-    const selectedElements = getSelectedArrowLineElements(board);
-    selectedElements.forEach((element) => {
-        const path = PlaitBoard.findPath(board, element);
-        let handle = handleKey === ArrowLineHandleKey.source ? element.source : element.target;
-        handle = { ...handle, marker };
-        Transforms.setNode(board, { [handleKey]: handle }, path);
-    });
-};
-const setArrowLineShape = (board, newProperties) => {
-    const elements = getSelectedArrowLineElements(board);
-    elements.map(element => {
-        const _properties = { ...newProperties };
-        if (element.shape === newProperties.shape) {
-            return;
-        }
-        const path = PlaitBoard.findPath(board, element);
-        Transforms.setNode(board, _properties, path);
-    });
-};
-const collectArrowLineUpdatedRefsByGeometry = (board, geometry, refs) => {
-    const lines = findElements(board, {
-        match: (element) => {
-            if (PlaitDrawElement.isArrowLine(element)) {
-                return element.source.boundId === geometry.id || element.target.boundId === geometry.id;
-            }
-            return false;
-        },
-        recursion: element => true
-    });
-    if (lines.length) {
-        lines.forEach(line => {
-            const isSourceBound = line.source.boundId === geometry.id;
-            const handle = isSourceBound ? 'source' : 'target';
-            const object = { ...line[handle] };
-            const linePoints = getArrowLinePoints(board, line);
-            const point = isSourceBound ? linePoints[0] : linePoints[linePoints.length - 1];
-            object.connection = getHitConnection(board, point, geometry);
-            const path = PlaitBoard.findPath(board, line);
-            const index = refs.findIndex(obj => Path.equals(obj.path, path));
-            if (index === -1) {
-                refs.push({
-                    property: {
-                        [handle]: object
-                    },
-                    path
-                });
-            }
-            else {
-                refs[index].property = { ...refs[index].property, [handle]: object };
-            }
-        });
-    }
-};
-const 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 === ArrowLineHandleKey.source) {
-            source = {
-                ...source,
-                boundId: geometryElement.id,
-                connection
-            };
-        }
-        else {
-            target = {
-                ...target,
-                boundId: geometryElement.id,
-                connection
-            };
-        }
-        const path = PlaitBoard.findPath(board, lineElement);
-        resizeArrowLine(board, { source, target }, path);
-    }
-};
-
 const insertGeometry = (board, points, shape) => {
     const newElement = createDefaultGeometry(board, points, shape);
     insertElement(board, newElement);
     return newElement;
 };
-const insertGeometryByVector = (board, point, shape, vector) => {
-    const shapeProperty = DefaultFlowchartPropertyMap[shape] ||
-        DefaultBasicShapePropertyMap[shape] ||
-        DefaultUMLPropertyMap[shape] ||
-        DefaultBasicShapeProperty;
-    const direction = getDirectionByVector(vector);
-    if (direction) {
-        let offset = 0;
-        if ([Direction.left, Direction.right].includes(direction)) {
-            offset = -shapeProperty.width / 2;
-        }
-        else {
-            offset = -shapeProperty.height / 2;
-        }
-        const vectorPoint = getPointByVectorComponent(point, vector, offset);
-        const points = RectangleClient.getPoints(RectangleClient.getRectangleByCenterPoint(vectorPoint, shapeProperty.width, shapeProperty.height));
-        return insertGeometry(board, points, shape);
-    }
-    return null;
-};
 const insertText = (board, point, text) => {
     const memorizedLatest = getMemorizedLatestByPointer(BasicShapes.text);
     const property = getTextShapeProperty(board, text, memorizedLatest.textProperties['font-size']);
@@ -2668,6 +2582,67 @@ const insertImage = (board, imageItem, startPoint) => {
     Transforms.addSelectionWithTemporaryElements(board, [imageElement]);
 };
 
+const resizeArrowLine = (board, options, path) => {
+    Transforms.setNode(board, options, path);
+};
+const setArrowLineTexts = (board, element, texts) => {
+    const path = PlaitBoard.findPath(board, element);
+    Transforms.setNode(board, { texts }, path);
+};
+const removeArrowLineText = (board, element, index) => {
+    const path = PlaitBoard.findPath(board, element);
+    const texts = element.texts?.length ? [...element.texts] : [];
+    const newTexts = [...texts];
+    newTexts.splice(index, 1);
+    Transforms.setNode(board, { texts: newTexts }, path);
+};
+const setArrowLineMark = (board, handleKey, marker) => {
+    memorizeLatest(MemorizeKey.arrowLine, handleKey, marker);
+    const selectedElements = getSelectedArrowLineElements(board);
+    selectedElements.forEach((element) => {
+        const path = PlaitBoard.findPath(board, element);
+        let handle = handleKey === ArrowLineHandleKey.source ? element.source : element.target;
+        handle = { ...handle, marker };
+        Transforms.setNode(board, { [handleKey]: handle }, path);
+    });
+};
+const setArrowLineShape = (board, newProperties) => {
+    const elements = getSelectedArrowLineElements(board);
+    elements.map(element => {
+        const _properties = { ...newProperties };
+        if (element.shape === newProperties.shape) {
+            return;
+        }
+        const path = PlaitBoard.findPath(board, element);
+        Transforms.setNode(board, _properties, path);
+    });
+};
+const connectArrowLineToDraw = (board, lineElement, handle, geometryElement) => {
+    const linePoints = PlaitArrowLine.getPoints(board, lineElement);
+    const point = handle === ArrowLineHandleKey.source ? linePoints[0] : linePoints[linePoints.length - 1];
+    const connection = getHitConnection(board, point, geometryElement);
+    if (connection) {
+        let source = lineElement.source;
+        let target = lineElement.target;
+        if (handle === ArrowLineHandleKey.source) {
+            source = {
+                ...source,
+                boundId: geometryElement.id,
+                connection
+            };
+        }
+        else {
+            target = {
+                ...target,
+                boundId: geometryElement.id,
+                connection
+            };
+        }
+        const path = PlaitBoard.findPath(board, lineElement);
+        resizeArrowLine(board, { source, target }, path);
+    }
+};
+
 function buildSwimlaneTable(element) {
     const swimlaneElement = { ...element };
     if (PlaitDrawElement.isHorizontalSwimlane(element)) {
@@ -2784,6 +2759,9 @@ const adjustSwimlaneShape = (shape) => {
         ? SwimlaneSymbols.swimlaneHorizontal
         : SwimlaneSymbols.swimlaneVertical;
 };
+const isSwimlanePointers = (board) => {
+    return PlaitBoard.isInPointer(board, getSwimlanePointers());
+};
 
 const updateSwimlaneCount = (board, swimlane, count) => {
     if (count > 0 && PlaitDrawElement.isSwimlane(swimlane)) {
@@ -3026,6 +3004,37 @@ const setTableFill = (board, element, fill, path) => {
     Transforms.setNode(board, { cells: newCells }, path);
 };
 
+const insertDrawByVector = (board, point, shape, vector) => {
+    const swimlanePointers = getSwimlanePointers();
+    const isSwimlanePointer = swimlanePointers.includes(shape);
+    let shapeProperty = DefaultFlowchartPropertyMap[shape] ||
+        DefaultBasicShapePropertyMap[shape] ||
+        DefaultUMLPropertyMap[shape] ||
+        DefaultBasicShapeProperty;
+    if (isSwimlanePointer) {
+        shapeProperty = DefaultSwimlanePropertyMap[shape];
+    }
+    const direction = getDirectionByVector(vector);
+    if (direction) {
+        let offset = 0;
+        if ([Direction.left, Direction.right].includes(direction)) {
+            offset = -shapeProperty.width / 2;
+        }
+        else {
+            offset = -shapeProperty.height / 2;
+        }
+        const vectorPoint = getPointByVectorComponent(point, vector, offset);
+        const points = RectangleClient.getPoints(RectangleClient.getRectangleByCenterPoint(vectorPoint, shapeProperty.width, shapeProperty.height));
+        if (isSwimlanePointer) {
+            const swimlane = createDefaultSwimlane(shape, points);
+            insertElement(board, swimlane);
+            return swimlane;
+        }
+        return insertGeometry(board, points, shape);
+    }
+    return null;
+};
+
 const DrawTransforms = {
     setText,
     setDrawShapeText,
@@ -3039,16 +3048,16 @@ const DrawTransforms = {
     setArrowLineMark,
     setArrowLineShape,
     insertImage,
+    connectArrowLineToDraw,
     switchGeometryShape,
-    connectArrowLineToGeometry,
-    insertGeometryByVector,
     setTableText,
     addSwimlaneRow,
     addSwimlaneColumn,
     removeSwimlaneRow,
     removeSwimlaneColumn,
     updateSwimlaneCount,
-    setTableFill
+    setTableFill,
+    insertDrawByVector
 };
 
 const getHitRectangleResizeHandleRef = (board, rectangle, point, angle = 0) => {
@@ -3694,7 +3703,9 @@ function createEllipseEngine(createOptions) {
         draw(board, rectangle, options) {
             const centerPoint = [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2];
             const rs = PlaitBoard.getRoughSVG(board);
-            return rs.ellipse(centerPoint[0], centerPoint[1], rectangle.width, rectangle.height, { ...options, fillStyle: 'solid' });
+            const shape = rs.ellipse(centerPoint[0], centerPoint[1], rectangle.width, rectangle.height, { ...options, fillStyle: 'solid' });
+            setStrokeLinecap(shape, 'round');
+            return shape;
         },
         isInsidePoint(rectangle, point) {
             const centerPoint = [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2];
@@ -4037,7 +4048,9 @@ const RoundCommentEngine = {
         const point9 = [x1 + rectangle.width / 4, y2];
         const point10 = [x1 + rectangle.width / 4, rectangle.y + rectangle.height];
         const point11 = [x1 + rectangle.width / 2, y2];
-        return rs.path(`M${point2[0]} ${point2[1]} A ${radius} ${radius}, 0, 0, 1, ${point3[0]} ${point3[1]} L ${point4[0]} ${point4[1]} A ${radius} ${radius}, 0, 0, 1, ${point5[0]} ${point5[1]} L    ${point11[0]} ${point11[1]}  ${point10[0]} ${point10[1]}   ${point9[0]} ${point9[1]}   ${point6[0]} ${point6[1]} A ${radius} ${radius}, 0, 0, 1, ${point7[0]} ${point7[1]} L ${point8[0]} ${point8[1]} A ${radius} ${radius}, 0, 0, 1, ${point1[0]} ${point1[1]} Z`, { ...options, fillStyle: 'solid' });
+        const shape = rs.path(`M${point2[0]} ${point2[1]} A ${radius} ${radius}, 0, 0, 1, ${point3[0]} ${point3[1]} L ${point4[0]} ${point4[1]} A ${radius} ${radius}, 0, 0, 1, ${point5[0]} ${point5[1]} L    ${point11[0]} ${point11[1]}  ${point10[0]} ${point10[1]}   ${point9[0]} ${point9[1]}   ${point6[0]} ${point6[1]} A ${radius} ${radius}, 0, 0, 1, ${point7[0]} ${point7[1]} L ${point8[0]} ${point8[1]} A ${radius} ${radius}, 0, 0, 1, ${point1[0]} ${point1[1]} Z`, { ...options, fillStyle: 'solid' });
+        setStrokeLinecap(shape, 'round');
+        return shape;
     },
     isInsidePoint(rectangle, point) {
         const points = [
@@ -4621,13 +4634,15 @@ const OrEngine = createEllipseEngine({
         const rx = rectangle.width / 2;
         const ry = rectangle.height / 2;
         const startPoint = [rectangle.x + rectangle.width, rectangle.y + rectangle.height / 2];
-        return rs.path(`M${startPoint[0]} ${startPoint[1]}
+        const shape = rs.path(`M${startPoint[0]} ${startPoint[1]}
         A${rx},${ry} 0 1,1 ${startPoint[0]} ${startPoint[1] - 0.01}
         M${rectangle.x} ${rectangle.y + rectangle.height / 2}
         L${rectangle.x + rectangle.width} ${rectangle.y + rectangle.height / 2}
         M${rectangle.x + rectangle.width / 2} ${rectangle.y}
         L${rectangle.x + rectangle.width / 2} ${rectangle.y + rectangle.height}
         `, { ...options, fillStyle: 'solid' });
+        setStrokeLinecap(shape, 'round');
+        return shape;
     }
 });
 
@@ -4640,13 +4655,15 @@ const SummingJunctionEngine = createEllipseEngine({
         const centerPoint = [rectangle.x + rectangle.width / 2, rectangle.y + rectangle.height / 2];
         const line1Points = getCrossingPointsBetweenEllipseAndSegment([rectangle.x, rectangle.y], [rectangle.x + rectangle.width, rectangle.y + rectangle.height], centerPoint[0], centerPoint[1], rx, ry);
         const line2Points = getCrossingPointsBetweenEllipseAndSegment([rectangle.x + rectangle.width, rectangle.y], [rectangle.x, rectangle.y + rectangle.height], centerPoint[0], centerPoint[1], rx, ry);
-        return rs.path(`M${startPoint[0]} ${startPoint[1]}
+        const shape = rs.path(`M${startPoint[0]} ${startPoint[1]}
         A${rx},${ry} 0 1,1 ${startPoint[0]} ${startPoint[1] - 0.01}
         M${line1Points[0][0]} ${line1Points[0][1]}
         L${line1Points[1][0]} ${line1Points[1][1]}
         M${line2Points[0][0]} ${line2Points[0][1]}
         L${line2Points[1][0]} ${line2Points[1][1]}
         `, { ...options, fillStyle: 'solid' });
+        setStrokeLinecap(shape, 'round');
+        return shape;
     }
 });
 
@@ -5269,27 +5286,34 @@ const DisplayEngine = {
 
 const TableEngine = {
     draw(board, rectangle, roughOptions, options) {
-        const rs = PlaitBoard.getRoughSVG(board);
         const g = createG();
-        const { x, y, width, height } = rectangle;
-        const tableTopBorder = drawLine(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 => {
-            const rectangle = RectangleClient.getRectangleByPoints(cell.points);
-            const { x, y, width, height } = rectangle;
-            const cellRectangle = drawRectangle(board, {
-                x: x + ACTIVE_STROKE_WIDTH,
-                y: y + ACTIVE_STROKE_WIDTH,
-                width: width - ACTIVE_STROKE_WIDTH * 2,
-                height: height - ACTIVE_STROKE_WIDTH * 2
-            }, { fill: cell.fill, fillStyle: 'solid', strokeWidth: 0 });
-            const cellRightBorder = drawLine(rs, [x + width, y], [x + width, y + height], roughOptions);
-            const cellBottomBorder = drawLine(rs, [x, y + height], [x + width, y + height], roughOptions);
-            g.append(cellRectangle, cellRightBorder, cellBottomBorder);
-        });
-        setStrokeLinecap(g, 'round');
+        try {
+            const pointCells = getCellsWithPoints(board, { ...options?.element });
+            if (pointCells) {
+                const rs = PlaitBoard.getRoughSVG(board);
+                const { x, y, width, height } = rectangle;
+                const tableTopBorder = drawLine(rs, [x, y], [x + width, y], roughOptions);
+                const tableLeftBorder = drawLine(rs, [x, y], [x, y + height], roughOptions);
+                g.append(tableTopBorder, tableLeftBorder);
+                pointCells.forEach(cell => {
+                    const rectangle = RectangleClient.getRectangleByPoints(cell.points);
+                    const { x, y, width, height } = rectangle;
+                    const cellRectangle = drawRectangle(board, {
+                        x: x + ACTIVE_STROKE_WIDTH,
+                        y: y + ACTIVE_STROKE_WIDTH,
+                        width: width - ACTIVE_STROKE_WIDTH * 2,
+                        height: height - ACTIVE_STROKE_WIDTH * 2
+                    }, { fill: cell.fill, fillStyle: 'solid', strokeWidth: 0 });
+                    const cellRightBorder = drawLine(rs, [x + width, y], [x + width, y + height], roughOptions);
+                    const cellBottomBorder = drawLine(rs, [x, y + height], [x + width, y + height], roughOptions);
+                    g.append(cellRectangle, cellRightBorder, cellBottomBorder);
+                });
+                setStrokeLinecap(g, 'round');
+            }
+        }
+        catch (error) {
+            console.error(error);
+        }
         return g;
     },
     isInsidePoint(rectangle, point) {
@@ -5306,13 +5330,28 @@ const TableEngine = {
         return RectangleClient.getEdgeCenterPoints(rectangle);
     },
     getTextRectangle(element, options) {
-        const cell = getCellWithPoints(options?.board, element, options.key);
-        if (PlaitTableElement.isVerticalText(cell)) {
-            return getVerticalTextRectangle(cell);
+        try {
+            if (options && options.key) {
+                const cell = getCellWithPoints(options?.board, element, options.key);
+                if (cell) {
+                    if (PlaitTableElement.isVerticalText(cell)) {
+                        return getVerticalTextRectangle(cell);
+                    }
+                    else {
+                        return getHorizontalTextRectangle(cell);
+                    }
+                }
+            }
         }
-        else {
-            return getHorizontalTextRectangle(cell);
+        catch (error) {
+            console.error(error);
         }
+        return {
+            x: 0,
+            y: 0,
+            width: 0,
+            height: 0
+        };
     }
 };
 function getVerticalTextRectangle(cell) {
@@ -5613,6 +5652,7 @@ const DeletionEngine = {
         const shape = rs.path(`M${rectangle.x} ${rectangle.y} L${rectangle.x + rectangle.width} ${rectangle.y + rectangle.height} 
             M${rectangle.x + rectangle.width} ${rectangle.y} L${rectangle.x} ${rectangle.y + rectangle.height} 
             `, { ...options, fillStyle: 'solid', strokeWidth: 4 });
+        setStrokeLinecap(shape, 'round');
         return shape;
     },
     isInsidePoint(rectangle, point) {
@@ -6220,6 +6260,40 @@ const getElbowLineRouteOptions = (board, element, handleRefPair) => {
         targetOuterRectangle
     };
 };
+const collectArrowLineUpdatedRefsByGeometry = (board, element, refs) => {
+    const lines = findElements(board, {
+        match: (element) => {
+            if (PlaitDrawElement.isArrowLine(element)) {
+                return element.source.boundId === element.id || element.target.boundId === element.id;
+            }
+            return false;
+        },
+        recursion: element => true
+    });
+    if (lines.length) {
+        lines.forEach(line => {
+            const isSourceBound = line.source.boundId === element.id;
+            const handle = isSourceBound ? 'source' : 'target';
+            const object = { ...line[handle] };
+            const linePoints = getArrowLinePoints(board, line);
+            const point = isSourceBound ? linePoints[0] : linePoints[linePoints.length - 1];
+            object.connection = getHitConnection(board, point, element);
+            const path = PlaitBoard.findPath(board, line);
+            const index = refs.findIndex(obj => Path.equals(obj.path, path));
+            if (index === -1) {
+                refs.push({
+                    property: {
+                        [handle]: object
+                    },
+                    path
+                });
+            }
+            else {
+                refs[index].property = { ...refs[index].property, [handle]: object };
+            }
+        });
+    }
+};
 
 var ArrowLineMarkerType;
 (function (ArrowLineMarkerType) {
@@ -8203,12 +8277,21 @@ const withTable = (board) => {
         const selectedElements = getSelectedElements(board);
         const isSingleSelection = selectedElements.length === 1;
         const targetElement = selectedElements[0];
-        if (!PlaitBoard.isReadonly(board) && !isVirtualKey(event) && !isDelete(event) && !isSpaceHotkey(event) && isSingleSelection) {
+        if (!PlaitBoard.isReadonly(board) &&
+            !PlaitBoard.hasBeenTextEditing(tableBoard) &&
+            !isVirtualKey(event) &&
+            !isDelete(event) &&
+            !isSpaceHotkey(event) &&
+            isSingleSelection) {
             event.preventDefault();
             if (PlaitDrawElement.isElementByTable(targetElement)) {
-                const firstTextCell = targetElement.cells.find(item => item.text && item.textHeight);
-                if (firstTextCell) {
-                    editCell(firstTextCell);
+                const cells = getSelectedCells(targetElement);
+                let cell = targetElement.cells.find(item => item.text && item.textHeight);
+                if (cells?.length) {
+                    cell = cells.find(item => item.text && item.textHeight);
+                }
+                if (cell) {
+                    editCell(cell);
                     return;
                 }
             }
@@ -8254,14 +8337,12 @@ const withTable = (board) => {
 };
 
 const isSwimlaneDndMode = (board) => {
-    const swimlanePointers = getSwimlanePointers();
-    const isSwimlanePointer = PlaitBoard.isInPointer(board, swimlanePointers);
+    const isSwimlanePointer = isSwimlanePointers(board);
     const dndMode = isSwimlanePointer && isDndMode(board);
     return dndMode;
 };
 const isSwimlaneDrawingMode = (board) => {
-    const swimlanePointers = getSwimlanePointers();
-    const isSwimlanePointer = PlaitBoard.isInPointer(board, swimlanePointers);
+    const isSwimlanePointer = isSwimlanePointers(board);
     const drawingMode = isSwimlanePointer && isDrawingMode(board);
     return drawingMode;
 };
@@ -8506,5 +8587,5 @@ const withDraw = (board) => {
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { ArrowLineActiveGenerator, ArrowLineAutoCompleteGenerator, ArrowLineComponent, ArrowLineHandleKey, ArrowLineMarkerType, ArrowLineShape, BasicShapes, DEFAULT_IMAGE_WIDTH, DefaultActivationProperty, DefaultActorProperty, DefaultArrowProperty, DefaultAssemblyProperty, DefaultBasicShapeProperty, DefaultBasicShapePropertyMap, DefaultClassProperty, DefaultCloudProperty, DefaultCombinedFragmentProperty, DefaultComponentBoxProperty, DefaultConnectorProperty, DefaultContainerProperty, DefaultDataBaseProperty, DefaultDataProperty, DefaultDecisionProperty, DefaultDeletionProperty, DefaultDocumentProperty, DefaultDrawActiveStyle, DefaultDrawStyle, DefaultFlowchartProperty, DefaultFlowchartPropertyMap, DefaultInterfaceProperty, DefaultInternalStorageProperty, DefaultManualInputProperty, DefaultMergeProperty, DefaultMultiDocumentProperty, DefaultNoteProperty, DefaultObjectProperty, DefaultPackageProperty, DefaultPentagonArrowProperty, DefaultPortProperty, DefaultProvidedInterfaceProperty, DefaultRequiredInterfaceProperty, DefaultSwimlaneHorizontalProperty, DefaultSwimlaneHorizontalWithHeaderProperty, DefaultSwimlanePropertyMap, DefaultSwimlaneVerticalProperty, DefaultSwimlaneVerticalWithHeaderProperty, DefaultTextProperty, DefaultTwoWayArrowProperty, DefaultUMLPropertyMap, DrawThemeColors, DrawTransforms, FlowchartSymbols, GEOMETRY_NOT_CLOSED, GEOMETRY_WITHOUT_TEXT, GEOMETRY_WITH_MULTIPLE_TEXT, GeometryComponent, GeometryShapeGenerator, GeometryThreshold, KEY_TO_TEXT_MANAGE, LINE_HIT_GEOMETRY_BUFFER, LINE_SNAPPING_BUFFER, LINE_SNAPPING_CONNECTOR_BUFFER, MIN_TEXT_WIDTH, MemorizeKey, MultipleTextGeometryCommonTextKeys, MultipleTextGeometryTextKeys, PlaitArrowLine, PlaitDrawElement, PlaitGeometry, PlaitTableElement, Q2C, SELECTED_CELLS, SWIMLANE_HEADER_SIZE, ShapeDefaultSpace, SingleTextGenerator, StrokeStyle, SwimlaneDrawSymbols, SwimlaneSymbols, TableGenerator, TableSymbols, TextGenerator, UMLSymbols, VectorLineShape, WithArrowLineAutoCompletePluginKey, adjustSwimlaneShape, alignElbowSegment, alignPoints, buildDefaultTextsByShape, buildSwimlaneTable, clearSelectedCells, collectArrowLineUpdatedRefsByGeometry, createArrowLineElement, createCell, createDefaultCells, createDefaultFlowchart, createDefaultGeometry, createDefaultRowsOrColumns, createDefaultSwimlane, createGeometryElement, createGeometryElementWithText, createGeometryElementWithoutText, createMultipleTextGeometryElement, createTextElement, createUMLClassOrInterfaceGeometryElement, debugGenerator$1 as debugGenerator, deleteTextManage, drawArrowLine, drawArrowLineArrow, drawBoundReaction, drawGeometry, drawShape, editCell, editText, getArrowLineHandleRefPair, getArrowLinePointers, getArrowLinePoints, getArrowLineTextRectangle, getArrowLines, getAutoCompletePoints, getBasicPointers, getCellWithPoints, getCellsRectangle, getCellsWithPoints, getCenterPointsOnPolygon$1 as getCenterPointsOnPolygon, getConnectionPoint, getCurvePoints, getDefaultBasicShapeProperty, getDefaultFlowchartProperty, getDefaultGeometryPoints, getDefaultGeometryProperty, getDefaultSwimlanePoints, getDefaultTextPoints, getDefaultUMLProperty, getDrawDefaultStrokeColor, getDrawHitElement, getElbowLineRouteOptions, getElbowPoints, getFillByElement, getFirstFilledDrawElement, getFirstTextOrLineElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryAlign, getGeometryPointers, getHitCell, getHitConnection, getHitConnectorPoint, getHitIndexOfAutoCompletePoint, getHitMultipleGeometryText, getHitShape, getIndexAndDeleteCountByKeyPoint, getLineDashByElement, getLineMemorizedLatest, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getMidKeyPoints, getMiddlePoints, getMirrorDataPoints, getMultipleTextGeometryTextKeys, getNearestPoint, getNextRenderPoints, getNextSourceAndTargetPoints, getResizedPreviousAndNextPoint, getSelectedArrowLineElements, getSelectedCells, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedSwimlane, getSelectedTableCellsEditor, getSelectedTableElements, getSnapResizingRef, getSnapResizingRefOptions, getSnappingRef, getSnappingShape, getSourceAndTargetRectangle, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getSwimlaneCount, getSwimlanePointers, getTextKey, getTextManage, getTextManageByCell, getTextRectangle, getTextShapeProperty, getUMLPointers, getVectorByConnection, handleArrowLineCreating, hasIllegalElbowPoint, insertElement, isCellIncludeText, isDrawElementClosed, isDrawElementIncludeText, isDrawElementsIncludeText, isGeometryClosed, isGeometryIncludeText, isHitArrowLine, isHitArrowLineText, isHitDrawElement, isHitEdgeOfShape, isHitElementInside, isHitElementText, isHitPolyLine, isInsideOfShape, isMultipleTextGeometry, isMultipleTextShape, isRectangleHitDrawElement, isRectangleHitElementText, isSelfLoop, isSingleSelectElementByTable, isSingleSelectSwimlane, isSingleSelectTable, isSingleTextGeometry, isSingleTextShape, isSwimlanePointers, isSwimlaneWithHeader, isTextExceedingBounds, isUpdatedHandleIndex, isUseDefaultOrthogonalRoute, memorizeLatestShape, memorizeLatestText, rerenderGeometryActive, setSelectedCells, setTextManage, traverseDrawShapes, updateCellIds, updateCellIdsByRowOrColumn, updateColumns, updateRowOrColumnIds, updateRows, withArrowLineAutoComplete, withDraw };
 //# sourceMappingURL=plait-draw.mjs.map