@plait/draw 0.74.0 → 0.75.0-next.0

package/fesm2022/plait-draw.mjs

@@ -1,9 +1,9 @@
-import { ACTIVE_STROKE_WIDTH, DEFAULT_COLOR, ThemeColorMode, PlaitElement, RectangleClient, getSelectedElements, idCreator, catmullRomFitting, PlaitBoard, createG, drawLinearPath, setStrokeLinecap, distanceBetweenPointAndSegments, HIT_DISTANCE_BUFFER, isPointInPolygon, isPolylineHitRectangle, rotatePointsByAngle, rotateAntiPointsByElement, distanceBetweenPointAndPoint, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, depthFirstRecursion, getIsRecursionFunc, SNAPPING_STROKE_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, createDebugGenerator, Point, arrowPoints, createPath, rotate, findElements, createMask, createRect, getElementById, rotatePointsByElement, PlaitNode, hasValidAngle, toViewBoxPoint, toHostPoint, Direction, rotatePoints, getRectangleByElements, getSelectionAngle, rotatedDataPoints, isAxisChangedByAngle, isSelectionMoving, drawRectangle, getRectangleByAngle, getSnapRectangles, getTripleAxis, getMinPointDelta, SNAP_TOLERANCE, drawPointSnapLines, drawSolidLines, getNearestPointBetweenPointAndSegments, isPointInEllipse, getNearestPointBetweenPointAndEllipse, getEllipseTangentSlope, getVectorFromPointAndSlope, drawRoundRectangle, isPointInRoundRectangle, setPathStrokeLinecap, getCrossingPointsBetweenEllipseAndSegment, drawLine, Path, RgbaToHEX, SELECTION_RECTANGLE_CLASS_NAME, getHitElementByPoint, WritableClipboardOperationType, WritableClipboardType, addOrCreateClipboardContext, setAngleForG, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER, isMainPointer, throttleRAF, getAngleBetweenPoints, normalizeAngle, degreesToRadians, rotateElements, MERGING, ROTATE_HANDLE_CLASS_NAME, isSelectedElement, isDragging } from '@plait/core';
-import { DEFAULT_FILL, Alignment, WithTextPluginKey, TextManage, getMemorizedLatest, memorizeLatest, getPointOnPolyline, buildText, Generator, getStrokeLineDash, StrokeStyle, sortElementsByArea, isFilled, getTextEditorsByElement, removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, getExtendPoint, getUnitVectorByPointAndPoint, getPointByVectorComponent, RESIZE_HANDLE_DIAMETER, 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, buildClipboardData as buildClipboardData$1, insertClipboardData as insertClipboardData$1, 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, DEFAULT_COLOR, ThemeColorMode, PlaitElement, RectangleClient, getSelectedElements, idCreator, catmullRomFitting, PlaitBoard, createG, drawLinearPath, setStrokeLinecap, distanceBetweenPointAndSegments, HIT_DISTANCE_BUFFER, isPointInPolygon, isLineHitRectangle, rotatePointsByAngle, rotateAntiPointsByElement, distanceBetweenPointAndPoint, Transforms, clearSelectedElement, addSelectedElement, BoardTransforms, PlaitPointerType, depthFirstRecursion, getIsRecursionFunc, SNAPPING_STROKE_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, drawCircle, createDebugGenerator, Point, arrowPoints, createPath, rotate, findElements, createMask, createRect, getElementById, rotatePointsByElement, PlaitNode, hasValidAngle, toViewBoxPoint, toHostPoint, Direction, rotatePoints, getRectangleByElements, getSelectionAngle, rotatedDataPoints, isAxisChangedByAngle, isSelectionMoving, drawRectangle, getRectangleByAngle, getSnapRectangles, getTripleAxis, getMinPointDelta, SNAP_TOLERANCE, drawPointSnapLines, drawSolidLines, getNearestPointBetweenPointAndSegments, isPointInEllipse, getNearestPointBetweenPointAndEllipse, getEllipseTangentSlope, getVectorFromPointAndSlope, drawRoundRectangle, isPointInRoundRectangle, setPathStrokeLinecap, getCrossingPointsBetweenEllipseAndSegment, drawLine, Path, RgbaToHEX, SELECTION_RECTANGLE_CLASS_NAME, getHitElementByPoint, WritableClipboardOperationType, WritableClipboardType, addOrCreateClipboardContext, setAngleForG, CursorClass, temporaryDisableSelection, PRESS_AND_MOVE_BUFFER, isMainPointer, throttleRAF, getAngleBetweenPoints, normalizeAngle, degreesToRadians, rotateElements, MERGING, ROTATE_HANDLE_CLASS_NAME, isSelectedElement, isDragging } from '@plait/core';
+import { DEFAULT_FILL, Alignment, WithTextPluginKey, TextManage, getMemorizedLatest, memorizeLatest, getPointOnPolyline, buildText, Generator, getStrokeLineDash, StrokeStyle, getFirstTextEditor, sortElementsByArea, isFilled, getTextEditorsByElement, removeDuplicatePoints, generateElbowLineRoute, simplifyOrthogonalPoints, getExtendPoint, getUnitVectorByPointAndPoint, getPointByVectorComponent, RESIZE_HANDLE_DIAMETER, measureElement, DEFAULT_FONT_FAMILY, getFirstTextManage, ActiveGenerator, isSourceAndTargetIntersect, getPoints, DEFAULT_ROUTE_MARGIN, normalizeShapePoints, resetPointsAfterResize, getDirectionByVector, getRectangleResizeHandleRefs, getRotatedResizeCursorClassByAngle, ROTATE_HANDLE_DISTANCE_TO_ELEMENT, ROTATE_HANDLE_SIZE, isCornerHandle, getIndexByResizeHandle, withResize, drawHandle, getSymmetricHandleIndex, getResizeHandlePointByIndex, getDirectionFactorByDirectionComponent, buildClipboardData as buildClipboardData$1, insertClipboardData as insertClipboardData$1, 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 { Editor, Node } from 'slate';
 import { isKeyHotkey } from 'is-hotkey';
-import { Node } from 'slate';
 
 var BasicShapes;
 (function (BasicShapes) {
@@ -1066,7 +1066,7 @@ const isRectangleHitElementText = (element, rectangle) => {
     const engine = getEngine(element.shape);
     if (isMultipleTextGeometry(element)) {
         const texts = element.texts;
-        return texts.some(item => {
+        return texts.some((item) => {
             const textClient = engine.getTextRectangle(element, { id: item.id });
             return isRectangleHitRotatedPoints(rectangle, RectangleClient.getCornerPoints(textClient), element.angle);
         });
@@ -1080,7 +1080,7 @@ const isHitElementText = (element, point) => {
     const engine = getEngine(element.shape);
     if (isMultipleTextGeometry(element)) {
         const texts = element.texts;
-        return texts.some(item => {
+        return texts.some((item) => {
             const textClient = engine.getTextRectangle(element, { id: item.id });
             return RectangleClient.isPointInRectangle(textClient, point);
         });
@@ -1090,6 +1090,13 @@ const isHitElementText = (element, point) => {
         return RectangleClient.isPointInRectangle(textClient, point);
     }
 };
+const isEmptyTextElement = (element) => {
+    if (!isDrawElementIncludeText(element)) {
+        return true;
+    }
+    const editor = getFirstTextEditor(element);
+    return Editor.isEmpty(editor, editor.children[0]);
+};
 const isRectangleHitDrawElement = (board, element, selection) => {
     const rangeRectangle = RectangleClient.getRectangleByPoints([selection.anchor, selection.focus]);
     if (PlaitDrawElement.isGeometry(element)) {
@@ -1097,18 +1104,18 @@ const isRectangleHitDrawElement = (board, element, selection) => {
         if (isHitElement) {
             return isHitElement;
         }
-        return isRectangleHitElementText(element, rangeRectangle);
+        return !isEmptyTextElement(element) && isRectangleHitElementText(element, rangeRectangle);
     }
     if (PlaitDrawElement.isImage(element)) {
         return isRectangleHitRotatedElement(board, rangeRectangle, element);
     }
     if (PlaitDrawElement.isArrowLine(element)) {
         const points = getArrowLinePoints(board, element);
-        return isPolylineHitRectangle(points, rangeRectangle);
+        return isLineHitRectangle(points, rangeRectangle);
     }
     if (PlaitDrawElement.isVectorLine(element)) {
         const points = getVectorLinePoints(board, element);
-        return isPolylineHitRectangle(points, rangeRectangle, false);
+        return isLineHitRectangle(points, rangeRectangle, false);
     }
     return null;
 };
@@ -1118,7 +1125,7 @@ const isRectangleHitRotatedElement = (board, rectangle, element) => {
 };
 const isRectangleHitRotatedPoints = (rectangle, points, angle) => {
     let rotatedPoints = rotatePointsByAngle(points, angle) || points;
-    return isPolylineHitRectangle(rotatedPoints, rectangle);
+    return isLineHitRectangle(rotatedPoints, rectangle);
 };
 const getHitDrawElement = (board, elements) => {
     let firstFilledElement = getFirstFilledDrawElement(board, elements);
@@ -1138,7 +1145,7 @@ const getFirstFilledDrawElement = (board, elements) => {
     let filledElement = null;
     for (let i = 0; i < elements.length; i++) {
         const element = elements[i];
-        if (isCustomGeometryClosed(board, element) || isDrawElementClosed(element)) {
+        if (isClosedCustomGeometry(board, element) || isClosedDrawElement(element)) {
             const fill = getFillByElement(board, element);
             if (isFilled(fill)) {
                 filledElement = element;
@@ -1148,18 +1155,21 @@ const getFirstFilledDrawElement = (board, elements) => {
     }
     return filledElement;
 };
+const isFilledDrawElement = (board, element) => {
+    return getFirstFilledDrawElement(board, [element]) !== null;
+};
 const getFirstTextOrLineElement = (elements) => {
-    const texts = elements.filter(item => PlaitDrawElement.isText(item));
+    const texts = elements.filter((item) => PlaitDrawElement.isText(item));
     if (texts.length) {
         return texts[0];
     }
-    const lines = elements.filter(item => PlaitDrawElement.isArrowLine(item));
+    const lines = elements.filter((item) => PlaitDrawElement.isArrowLine(item));
     if (lines.length) {
         return lines[0];
     }
     return null;
 };
-const isHitDrawElement = (board, element, point) => {
+const isHitDrawElement = (board, element, point, isStrict = true) => {
     const rectangle = board.getRectangle(element);
     point = rotateAntiPointsByElement(point, element) || point;
     if (PlaitDrawElement.isGeometry(element)) {
@@ -1171,6 +1181,9 @@ const isHitDrawElement = (board, element, point) => {
             const textClient = getTextRectangle(element);
             return RectangleClient.isPointInRectangle(textClient, point);
         }
+        if (!!isStrict && isEmptyTextElement(element) && !isFilledDrawElement(board, element)) {
+            return false;
+        }
         const isHitText = isHitElementText(element, point);
         return isHitText || engine.isInsidePoint(rectangle, point);
     }
@@ -1274,19 +1287,22 @@ const isDrawElementsIncludeText = (elements) => {
         return isDrawElementIncludeText(item);
     });
 };
-const isDrawElementClosed = (element) => {
-    if (PlaitDrawElement.isText(element) || PlaitDrawElement.isArrowLine(element) || PlaitDrawElement.isImage(element)) {
-        return false;
-    }
-    if (PlaitDrawElement.isVectorLine(element)) {
-        return isClosedPoints(element.points);
-    }
-    if (PlaitDrawElement.isGeometry(element)) {
-        return isGeometryClosed(element);
+const isClosedDrawElement = (element) => {
+    if (PlaitDrawElement.isDrawElement(element)) {
+        if (PlaitDrawElement.isText(element) || PlaitDrawElement.isArrowLine(element) || PlaitDrawElement.isImage(element)) {
+            return false;
+        }
+        if (PlaitDrawElement.isVectorLine(element)) {
+            return isClosedPoints(element.points);
+        }
+        if (PlaitDrawElement.isGeometry(element)) {
+            return isGeometryClosed(element);
+        }
+        return true;
     }
-    return true;
+    return false;
 };
-const isCustomGeometryClosed = (board, value) => {
+const isClosedCustomGeometry = (board, value) => {
     return PlaitDrawElement.isCustomGeometryElement(board, value) && isClosedPoints(value.points);
 };
 const getSnappingShape = (board, point) => {
@@ -1343,7 +1359,7 @@ const drawBoundReaction = (board, element, roughOptions = { hasMask: true, hasCo
         const maskG = drawShape(board, activeRectangle, shape, {
             stroke: SELECTION_BORDER_COLOR,
             strokeWidth: 0,
-            fill: isDrawElementClosed(element) ? SELECTION_FILL_COLOR : DefaultDrawStyle.fill,
+            fill: isClosedDrawElement(element) ? SELECTION_FILL_COLOR : DefaultDrawStyle.fill,
             fillStyle: 'solid'
         }, drawOptions);
         g.appendChild(maskG);
@@ -1396,7 +1412,7 @@ const getStrokeColorByElement = (board, element) => {
     return strokeColor;
 };
 const getFillByElement = (board, element) => {
-    const defaultFill = PlaitDrawElement.isFlowchart(element) && isDrawElementClosed(element)
+    const defaultFill = PlaitDrawElement.isFlowchart(element) && isClosedDrawElement(element)
         ? getFlowchartDefaultFill(board.theme.themeColorMode)
         : DefaultDrawStyle.fill;
     const fill = element.fill || defaultFill;
@@ -2245,7 +2261,7 @@ const getAutoCompletePoints = (element) => {
     return RectangleClient.getEdgeCenterPoints(rectangle);
 };
 const getHitIndexOfAutoCompletePoint = (movingPoint, points) => {
-    return points.findIndex(point => {
+    return points.findIndex((point) => {
         const movingRectangle = RectangleClient.getRectangleByPoints([movingPoint]);
         let rectangle = RectangleClient.getRectangleByPoints([point]);
         rectangle = RectangleClient.inflate(rectangle, RESIZE_HANDLE_DIAMETER);
@@ -2317,14 +2333,8 @@ const createDefaultGeometry = (board, points, shape) => {
 const editText = (board, element, text) => {
     const textManage = text ? getTextManage(board, element, text) : getFirstTextManage(element);
     if (textManage) {
-        textManage.edit(() => {
-            // delay to avoid blinking
-            setTimeout(() => {
-                rerenderGeometryActive(board, element);
-            }, 200);
-        });
+        textManage.edit(() => { });
     }
-    rerenderGeometryActive(board, element);
 };
 const rerenderGeometryActive = (board, element) => {
     const elementRef = PlaitElement.getElementRef(element);
@@ -2480,9 +2490,9 @@ const isSingleSelectSwimlane = (board) => {
     const selectedElements = getSelectedElements(board);
     return selectedElements && selectedElements.length === 1 && PlaitDrawElement.isSwimlane(selectedElements[0]);
 };
-const isSingleSelectArrowLine = (board) => {
+const isSingleSelectLine = (board) => {
     const selectedElements = getSelectedElements(board);
-    return selectedElements && selectedElements.length === 1 && PlaitDrawElement.isArrowLine(selectedElements[0]);
+    return selectedElements && selectedElements.length === 1 && PlaitDrawElement.isLine(selectedElements[0]);
 };
 const getSelectedSwimlane = (board) => {
     const selectedElements = getSelectedElements(board);
@@ -3138,7 +3148,7 @@ function withDrawResize(board) {
         const elements = getSelectedElements(board);
         return (elements.length >= 1 &&
             elements.every(el => (PlaitDrawElement.isDrawElement(el) || PlaitDrawElement.isCustomGeometryElement(board, el)) &&
-                !isSingleSelectArrowLine(board) &&
+                !isSingleSelectLine(board) &&
                 !isSingleSelectSwimlane(board)));
     };
     const options = {
@@ -6011,16 +6021,26 @@ const RequiredInterfaceEngine = {
     }
 };
 
+const percentage = 0.54;
+const getStartPoint = (rectangle) => {
+    return [rectangle.x, rectangle.y + rectangle.height / 2];
+};
+const getEndPoint = (rectangle) => {
+    return [rectangle.x + rectangle.width * percentage, rectangle.y + rectangle.height / 2];
+};
+const arcPercentage = percentage + (1 - percentage) / 2;
+const getArcCenter = (rectangle) => {
+    return [rectangle.x + arcPercentage * rectangle.width, rectangle.y + rectangle.height / 2];
+};
 const ProvidedInterfaceEngine = {
     draw(board, rectangle, options) {
         const rs = PlaitBoard.getRoughSVG(board);
-        const shape = rs.path(` M${rectangle.x} ${rectangle.y + rectangle.height / 2} 
-        H${rectangle.x + rectangle.width * 0.54}
-        A${(rectangle.width * 0.46) / 2} ${rectangle.height / 2}, 0, 1, 1 ${rectangle.x + rectangle.width} ${rectangle.y +
-            rectangle.height / 2}
-        A${(rectangle.width * 0.46) / 2} ${rectangle.height / 2}, 0, 1, 1 ${rectangle.x + rectangle.width * 0.54} ${rectangle.y +
-            rectangle.height / 2}
-        `, {
+        const startPoint = getStartPoint(rectangle);
+        const endPoint = getEndPoint(rectangle);
+        const shape = rs.path(`M${startPoint[0]} ${startPoint[1]} 
+        H${endPoint[0]}
+        A${(rectangle.width * (1 - percentage)) / 2} ${rectangle.height / 2}, 0, 1, 1 ${rectangle.x + rectangle.width} ${rectangle.y + rectangle.height / 2}
+        A${(rectangle.width * (1 - percentage)) / 2} ${rectangle.height / 2}, 0, 1, 1 ${rectangle.x + rectangle.width * percentage} ${rectangle.y + rectangle.height / 2}`, {
             ...options,
             fillStyle: 'solid'
         });
@@ -6038,8 +6058,17 @@ const ProvidedInterfaceEngine = {
         return RectangleClient.getEdgeCenterPoints(rectangle);
     },
     getNearestPoint(rectangle, point) {
-        const nearestPoint = getNearestPointBetweenPointAndSegments(point, RectangleEngine.getCornerPoints(rectangle));
-        return nearestPoint;
+        const startPoint = getStartPoint(rectangle);
+        const endPoint = getEndPoint(rectangle);
+        const nearestPointForLine = getNearestPointBetweenPointAndSegments(point, [startPoint, endPoint]);
+        const distanceForLine = distanceBetweenPointAndPoint(...point, ...nearestPointForLine);
+        const arcCenter = getArcCenter(rectangle);
+        const nearestPointForEllipse = getNearestPointBetweenPointAndEllipse(point, arcCenter, (rectangle.width * (1 - percentage)) / 2, rectangle.height / 2);
+        const distanceForEllipse = distanceBetweenPointAndPoint(...point, ...nearestPointForEllipse);
+        if (distanceForLine < distanceForEllipse) {
+            return nearestPointForLine;
+        }
+        return nearestPointForEllipse;
     },
     getTangentVectorByConnectionPoint(rectangle, pointOfRectangle) {
         const connectionPoint = RectangleClient.getConnectionPoint(rectangle, pointOfRectangle);
@@ -7153,11 +7182,11 @@ const withDrawHotkey = (board) => {
         event.preventDefault();
         if (!PlaitBoard.isReadonly(board)) {
             const point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-            const hitElement = getHitElementByPoint(board, point);
-            if (hitElement && PlaitDrawElement.isGeometry(hitElement)) {
+            const hitElement = getHitElementByPoint(board, point, undefined, false);
+            if (hitElement && PlaitDrawElement.isGeometry(hitElement) && isDrawElementIncludeText(hitElement)) {
                 if (isMultipleTextGeometry(hitElement)) {
                     const hitText = getHitMultipleGeometryText(hitElement, point) ||
-                        hitElement.texts.find(item => item.id.includes(GeometryCommonTextKeys.content)) ||
+                        hitElement.texts.find((item) => item.id.includes(GeometryCommonTextKeys.content)) ||
                         hitElement.texts[0];
                     editText(board, hitElement, hitText);
                 }
@@ -8353,12 +8382,12 @@ const withTable = (board) => {
         }
         return drawElement(context);
     };
-    tableBoard.isHit = (element, point) => {
+    tableBoard.isHit = (element, point, isStrict) => {
         if (PlaitDrawElement.isElementByTable(element)) {
             const client = RectangleClient.getRectangleByPoints(element.points);
             return RectangleClient.isPointInRectangle(client, point);
         }
-        return isHit(element, point);
+        return isHit(element, point, isStrict);
     };
     tableBoard.getRectangle = (element) => {
         if (PlaitDrawElement.isElementByTable(element)) {
@@ -8375,7 +8404,7 @@ const withTable = (board) => {
     tableBoard.isRectangleHit = (element, selection) => {
         if (PlaitDrawElement.isElementByTable(element)) {
             const rangeRectangle = RectangleClient.getRectangleByPoints([selection.anchor, selection.focus]);
-            return isPolylineHitRectangle(element.points, rangeRectangle);
+            return isLineHitRectangle(element.points, rangeRectangle);
         }
         return isRectangleHit(element, selection);
     };
@@ -8583,58 +8612,32 @@ const withVectorLineCreateByDraw = (board) => {
     const { pointerDown, pointerMove, dblClick, globalKeyDown } = board;
     let lineShapeG = null;
     let temporaryElement = null;
-    let vectorLineRef;
+    let drawPoints = [];
     const vectorLineComplete = () => {
-        if (vectorLineRef) {
-            clearSelectedElement(board);
-            if (vectorLineRef?.element) {
-                addSelectedElement(board, vectorLineRef?.element);
-            }
+        if (temporaryElement) {
+            Transforms.insertNode(board, temporaryElement, [board.children.length]);
         }
         PlaitBoard.getBoardContainer(board).classList.remove(`vector-line-closed`);
         lineShapeG?.remove();
         lineShapeG = null;
-        vectorLineRef = null;
         temporaryElement = null;
+        drawPoints = [];
     };
     board.pointerDown = (event) => {
         const penPointers = getVectorLinePointers();
         const isVectorLinePointer = PlaitBoard.isInPointer(board, penPointers);
-        if (isVectorLinePointer && !vectorLineRef) {
-            vectorLineRef = { shape: VectorLineShape.straight };
-        }
-        if (!PlaitBoard.isReadonly(board) && vectorLineRef && isDrawingMode(board)) {
+        if (!PlaitBoard.isReadonly(board) && isVectorLinePointer && isDrawingMode(board)) {
             let point = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
-            if (!temporaryElement) {
-                vectorLineRef = {
-                    ...vectorLineRef,
-                    start: point
-                };
-            }
-            else {
-                if (!vectorLineRef.element) {
-                    vectorLineRef.element = temporaryElement;
-                    Transforms.insertNode(board, vectorLineRef.element, [board.children.length]);
-                }
-                else {
-                    let points = vectorLineRef.element.points;
-                    const isClosed = distanceBetweenPointAndPoint(...point, ...vectorLineRef.start) <= LINE_HIT_GEOMETRY_BUFFER;
-                    if (isClosed) {
-                        point = vectorLineRef.start;
-                    }
-                    if (vectorLineRef.path) {
-                        const lastPoint = points[points.length - 1];
-                        const distance = distanceBetweenPointAndPoint(...point, ...lastPoint);
-                        if (distance > 2) {
-                            Transforms.setNode(board, { points: [...points, point] }, vectorLineRef.path);
-                        }
-                    }
-                    vectorLineRef.element = getElementById(board, vectorLineRef.element.id);
-                    if (isClosed) {
-                        vectorLineComplete();
-                    }
+            if (drawPoints.length > 1) {
+                const isClosed = distanceBetweenPointAndPoint(...point, ...drawPoints[0]) <= LINE_HIT_GEOMETRY_BUFFER;
+                if (isClosed) {
+                    drawPoints.push(drawPoints[0]);
+                    vectorLineComplete();
+                    return;
                 }
             }
+            drawPoints.push(point);
+            return;
         }
         pointerDown(event);
     };
@@ -8643,36 +8646,28 @@ const withVectorLineCreateByDraw = (board) => {
         lineShapeG = createG();
         let movingPoint = toViewBoxPoint(board, toHostPoint(board, event.x, event.y));
         const pointer = PlaitBoard.getPointer(board);
-        if (pointer !== VectorLinePointerType.vectorLine) {
-            vectorLineComplete();
-        }
-        if (vectorLineRef && vectorLineRef.start) {
-            let drawPoints = [vectorLineRef.start];
-            if (vectorLineRef.element) {
-                drawPoints = [vectorLineRef.start, ...vectorLineRef.element.points];
-                const path = PlaitBoard.findPath(board, vectorLineRef.element);
-                vectorLineRef.path = path;
-            }
-            const distance = distanceBetweenPointAndPoint(...movingPoint, ...vectorLineRef.start);
-            if (distance <= LINE_HIT_GEOMETRY_BUFFER) {
-                movingPoint = vectorLineRef.start;
-                PlaitBoard.getBoardContainer(board).classList.add(`vector-line-closed`);
-            }
-            else {
-                PlaitBoard.getBoardContainer(board).classList.remove(`vector-line-closed`);
+        if (pointer === VectorLinePointerType.vectorLine) {
+            if (drawPoints.length > 0) {
+                const distance = distanceBetweenPointAndPoint(...movingPoint, ...drawPoints[0]);
+                if (distance <= LINE_HIT_GEOMETRY_BUFFER) {
+                    movingPoint = drawPoints[0];
+                    PlaitBoard.getBoardContainer(board).classList.add(`vector-line-closed`);
+                }
+                else {
+                    PlaitBoard.getBoardContainer(board).classList.remove(`vector-line-closed`);
+                }
+                temporaryElement = vectorLineCreating(board, VectorLineShape.straight, drawPoints, movingPoint, lineShapeG);
             }
-            temporaryElement = vectorLineCreating(board, vectorLineRef.shape, drawPoints, movingPoint, lineShapeG);
         }
         pointerMove(event);
     };
     board.dblClick = (event) => {
+        console.log('l`ll be here');
         if (!PlaitBoard.isReadonly(board)) {
-            if (vectorLineRef) {
-                if (vectorLineRef.path) {
-                    Transforms.setNode(board, { points: vectorLineRef?.element?.points }, vectorLineRef.path);
-                }
+            if (temporaryElement) {
                 vectorLineComplete();
                 BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
+                return;
             }
         }
         dblClick(event);
@@ -8681,10 +8676,7 @@ const withVectorLineCreateByDraw = (board) => {
         if (!PlaitBoard.isReadonly(board)) {
             const isEsc = isKeyHotkey('esc', event);
             const isV = isKeyHotkey('v', event);
-            if ((isEsc || isV) && vectorLineRef) {
-                if (vectorLineRef.path) {
-                    Transforms.setNode(board, { points: vectorLineRef.element?.points }, vectorLineRef.path);
-                }
+            if ((isEsc || isV) && temporaryElement) {
                 vectorLineComplete();
                 if (isV) {
                     BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
@@ -8801,12 +8793,12 @@ const withDraw = (board) => {
         }
         return isRectangleHit(element, selection);
     };
-    board.isHit = (element, point) => {
-        const result = isHitDrawElement(board, element, point);
+    board.isHit = (element, point, isStrict) => {
+        const result = isHitDrawElement(board, element, point, isStrict);
         if (result !== null) {
             return result;
         }
-        return isHit(element, point);
+        return isHit(element, point, isStrict);
     };
     board.getOneHitElement = elements => {
         const isAllDrawElements = elements.every(item => PlaitDrawElement.isDrawElement(item));
@@ -8874,5 +8866,5 @@ const withDraw = (board) => {
  * Generated bundle index. Do not edit.
  */
 
-export { 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, GeometryCommonTextKeys, GeometryComponent, GeometryShapeGenerator, GeometryThreshold, KEY_TO_TEXT_MANAGE, LINE_HIT_GEOMETRY_BUFFER, LINE_SNAPPING_BUFFER, LINE_SNAPPING_CONNECTOR_BUFFER, LineActiveGenerator, MIN_TEXT_WIDTH, MemorizeKey, MultipleTextGeometryTextKeys, PlaitArrowLine, PlaitDrawElement, PlaitGeometry, PlaitTableElement, Q2C, SELECTED_CELLS, SWIMLANE_HEADER_SIZE, ShapeDefaultSpace, SingleTextGenerator, SwimlaneDrawSymbols, SwimlaneSymbols, TableGenerator, TableSymbols, TextGenerator, UMLSymbols, VectorLineComponent, VectorLinePointerType, VectorLineShape, WithArrowLineAutoCompletePluginKey, WithDrawPluginKey, adjustSwimlaneShape, alignElbowSegment, alignPoints, buildClipboardData, buildDefaultTextsByShape, buildSwimlaneTable, clearSelectedCells, collectArrowLineUpdatedRefsByGeometry, createArrowLineElement, createCell, createDefaultCells, createDefaultFlowchart, createDefaultGeometry, createDefaultRowsOrColumns, createDefaultSwimlane, createGeometryElement, createGeometryElementWithText, createGeometryElementWithoutText, createMultipleTextGeometryElement, createTextElement, createUMLClassOrInterfaceGeometryElement, createVectorLineElement, debugGenerator$1 as debugGenerator, deleteTextManage, drawArrowLine, drawArrowLineArrow, drawBoundReaction, drawGeometry, drawShape, drawVectorLine, 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, getElbowLineRouteOptions, getElbowPoints, getFillByElement, getFirstFilledDrawElement, getFirstTextOrLineElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryAlign, getGeometryPointers, getHitCell, getHitConnection, getHitConnectorPoint, getHitDrawElement, getHitIndexOfAutoCompletePoint, getHitMultipleGeometryText, getHitShape, getIndexAndDeleteCountByKeyPoint, getLineMemorizedLatest, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getMidKeyPoints, getMiddlePoints, getMirrorDataPoints, getMultipleTextGeometryTextKeys, getNearestPoint, getNextRenderPoints, getNextSourceAndTargetPoints, getResizedPreviousAndNextPoint, getSelectedArrowLineElements, getSelectedCells, getSelectedCustomGeometryElements, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedSwimlane, getSelectedTableCellsEditor, getSelectedTableElements, getSelectedVectorLineElements, getSnapResizingRef, getSnapResizingRefOptions, getSnappingRef, getSnappingShape, getSourceAndTargetRectangle, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getSwimlaneCount, getSwimlanePointers, getTextKey, getTextManage, getTextManageByCell, getTextRectangle, getTextShapeProperty, getUMLPointers, getVectorByConnection, getVectorLinePointers, getVectorLinePoints, handleArrowLineCreating, hasIllegalElbowPoint, insertClipboardData, insertElement, isCellIncludeText, isClosedPoints, isCustomGeometryClosed, isDrawElementClosed, isDrawElementIncludeText, isDrawElementsIncludeText, isGeometryClosed, isGeometryIncludeText, isHitArrowLine, isHitArrowLineText, isHitDrawElement, isHitEdgeOfShape, isHitElementInside, isHitElementText, isHitPolyLine, isHitVectorLine, isInsideOfShape, isMultipleTextGeometry, isMultipleTextShape, isRectangleHitDrawElement, isRectangleHitElementText, isRectangleHitRotatedElement, isRectangleHitRotatedPoints, isSelfLoop, isSingleSelectArrowLine, isSingleSelectElementByTable, isSingleSelectSwimlane, isSingleSelectTable, isSingleTextGeometry, isSingleTextShape, isSwimlanePointers, isSwimlaneWithHeader, isTextExceedingBounds, isUpdatedHandleIndex, isUseDefaultOrthogonalRoute, memorizeLatestShape, memorizeLatestText, rerenderGeometryActive, setSelectedCells, setTextManage, traverseDrawShapes, updateCellIds, updateCellIdsByRowOrColumn, updateColumns, updateRowOrColumnIds, updateRows, vectorLineCreating, withArrowLineAutoComplete, withDraw };
+export { 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, GeometryCommonTextKeys, GeometryComponent, GeometryShapeGenerator, GeometryThreshold, KEY_TO_TEXT_MANAGE, LINE_HIT_GEOMETRY_BUFFER, LINE_SNAPPING_BUFFER, LINE_SNAPPING_CONNECTOR_BUFFER, LineActiveGenerator, MIN_TEXT_WIDTH, MemorizeKey, MultipleTextGeometryTextKeys, PlaitArrowLine, PlaitDrawElement, PlaitGeometry, PlaitTableElement, Q2C, SELECTED_CELLS, SWIMLANE_HEADER_SIZE, ShapeDefaultSpace, SingleTextGenerator, SwimlaneDrawSymbols, SwimlaneSymbols, TableGenerator, TableSymbols, TextGenerator, UMLSymbols, VectorLineComponent, VectorLinePointerType, VectorLineShape, WithArrowLineAutoCompletePluginKey, WithDrawPluginKey, adjustSwimlaneShape, alignElbowSegment, alignPoints, buildClipboardData, buildDefaultTextsByShape, buildSwimlaneTable, clearSelectedCells, collectArrowLineUpdatedRefsByGeometry, createArrowLineElement, createCell, createDefaultCells, createDefaultFlowchart, createDefaultGeometry, createDefaultRowsOrColumns, createDefaultSwimlane, createGeometryElement, createGeometryElementWithText, createGeometryElementWithoutText, createMultipleTextGeometryElement, createTextElement, createUMLClassOrInterfaceGeometryElement, createVectorLineElement, debugGenerator$1 as debugGenerator, deleteTextManage, drawArrowLine, drawArrowLineArrow, drawBoundReaction, drawGeometry, drawShape, drawVectorLine, 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, getElbowLineRouteOptions, getElbowPoints, getFillByElement, getFirstFilledDrawElement, getFirstTextOrLineElement, getFlowchartDefaultFill, getFlowchartPointers, getGeometryAlign, getGeometryPointers, getHitCell, getHitConnection, getHitConnectorPoint, getHitDrawElement, getHitIndexOfAutoCompletePoint, getHitMultipleGeometryText, getHitShape, getIndexAndDeleteCountByKeyPoint, getLineMemorizedLatest, getMemorizeKey, getMemorizedLatestByPointer, getMemorizedLatestShape, getMidKeyPoints, getMiddlePoints, getMirrorDataPoints, getMultipleTextGeometryTextKeys, getNearestPoint, getNextRenderPoints, getNextSourceAndTargetPoints, getResizedPreviousAndNextPoint, getSelectedArrowLineElements, getSelectedCells, getSelectedCustomGeometryElements, getSelectedDrawElements, getSelectedGeometryElements, getSelectedImageElements, getSelectedSwimlane, getSelectedTableCellsEditor, getSelectedTableElements, getSelectedVectorLineElements, getSnapResizingRef, getSnapResizingRefOptions, getSnappingRef, getSnappingShape, getSourceAndTargetRectangle, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getSwimlaneCount, getSwimlanePointers, getTextKey, getTextManage, getTextManageByCell, getTextRectangle, getTextShapeProperty, getUMLPointers, getVectorByConnection, getVectorLinePointers, getVectorLinePoints, handleArrowLineCreating, hasIllegalElbowPoint, insertClipboardData, insertElement, isCellIncludeText, isClosedCustomGeometry, isClosedDrawElement, isClosedPoints, isDrawElementIncludeText, isDrawElementsIncludeText, isEmptyTextElement, isFilledDrawElement, isGeometryClosed, isGeometryIncludeText, isHitArrowLine, isHitArrowLineText, isHitDrawElement, isHitEdgeOfShape, isHitElementInside, isHitElementText, isHitPolyLine, isHitVectorLine, isInsideOfShape, isMultipleTextGeometry, isMultipleTextShape, isRectangleHitDrawElement, isRectangleHitElementText, isRectangleHitRotatedElement, isRectangleHitRotatedPoints, isSelfLoop, isSingleSelectElementByTable, isSingleSelectLine, isSingleSelectSwimlane, isSingleSelectTable, isSingleTextGeometry, isSingleTextShape, isSwimlanePointers, isSwimlaneWithHeader, isTextExceedingBounds, isUpdatedHandleIndex, isUseDefaultOrthogonalRoute, memorizeLatestShape, memorizeLatestText, rerenderGeometryActive, setSelectedCells, setTextManage, traverseDrawShapes, updateCellIds, updateCellIdsByRowOrColumn, updateColumns, updateRowOrColumnIds, updateRows, vectorLineCreating, withArrowLineAutoComplete, withDraw };
 //# sourceMappingURL=plait-draw.mjs.map