@plait/draw 0.92.1 → 0.92.2

package/fesm2022/plait-draw.mjs

@@ -1473,8 +1473,9 @@ const Q2C = (points) => {
     return result;
 };
 const handleArrowLineCreating = (board, lineShape, sourcePoint, movingPoint, sourceElement, lineShapeG, options) => {
-    const hitElement = getSnappingShape(board, movingPoint);
-    const targetConnection = hitElement ? getHitConnection(board, movingPoint, hitElement) : undefined;
+    const alignedMovingPoint = alignPoints(sourcePoint, movingPoint);
+    const hitElement = getSnappingShape(board, alignedMovingPoint);
+    const targetConnection = hitElement ? getHitConnection(board, alignedMovingPoint, hitElement) : undefined;
     const sourceConnection = sourceElement ? getHitConnection(board, sourcePoint, sourceElement) : undefined;
     const targetBoundId = hitElement ? hitElement.id : undefined;
     const lineGenerator = new ArrowLineShapeGenerator(board);
@@ -1484,14 +1485,14 @@ const handleArrowLineCreating = (board, lineShape, sourcePoint, movingPoint, sou
     targetMarker = memorizedLatest.target;
     sourceMarker && delete memorizedLatest.source;
     targetMarker && delete memorizedLatest.target;
-    const temporaryLineElement = createArrowLineElement(lineShape, [sourcePoint, movingPoint], { marker: sourceMarker || ArrowLineMarkerType.none, connection: sourceConnection, boundId: sourceElement?.id }, { marker: targetMarker || ArrowLineMarkerType.arrow, connection: targetConnection, boundId: targetBoundId }, [], {
+    const temporaryLineElement = createArrowLineElement(lineShape, [sourcePoint, alignedMovingPoint], { marker: sourceMarker || ArrowLineMarkerType.none, connection: sourceConnection, boundId: sourceElement?.id }, { marker: targetMarker || ArrowLineMarkerType.arrow, connection: targetConnection, boundId: targetBoundId }, [], {
         strokeWidth: DefaultLineStyle.strokeWidth,
         ...memorizedLatest,
         ...options
     });
     const linePoints = getArrowLinePoints(board, temporaryLineElement);
     const otherPoint = linePoints[0];
-    temporaryLineElement.points[1] = alignPoints(otherPoint, movingPoint);
+    temporaryLineElement.points[1] = alignPoints(otherPoint, alignedMovingPoint);
     lineGenerator.processDrawing(temporaryLineElement, lineShapeG);
     PlaitBoard.getElementTopHost(board).append(lineShapeG);
     return temporaryLineElement;
@@ -7518,6 +7519,7 @@ const withDrawHotkey = (board) => {
                 else {
                     editText(board, hitElement);
                 }
+                return;
             }
         }
         dblClick(event);
@@ -7896,9 +7898,32 @@ const withArrowLineResize = (board) => {
             const hitElement = getSnappingShape(board, resizeState.endPoint);
             if (resizeRef.handle === LineResizeHandle.source || resizeRef.handle === LineResizeHandle.target) {
                 const object = resizeRef.handle === LineResizeHandle.source ? source : target;
-                points[handleIndex] = resizeState.endPoint;
+                // axis alignment relative to adjacent point, even when snapping to a shape
+                const neighborPoint = handleIndex === 0 ? points[1] : points[points.length - 2];
+                // TODO: need handle the neighbor point is not key point(it will moving along moving point)
+                // such as below case
+                // [
+                //     [
+                //         341.2536906953894,
+                //         83.94690212817761
+                //     ],
+                //     [
+                //         492.8570148670465,
+                //         43.86424319286277
+                //     ],
+                //     [
+                //         492.8570148670465,
+                //         175.99593084572632
+                //     ],
+                //     [
+                //         661.8118177564218,
+                //         175.99593084572632
+                //     ]
+                // ]
+                const alignedEndPoint = neighborPoint ? alignPoints(neighborPoint, resizeState.endPoint) : resizeState.endPoint;
+                points[handleIndex] = alignedEndPoint;
                 if (hitElement) {
-                    object.connection = getHitConnection(board, resizeState.endPoint, hitElement);
+                    object.connection = getHitConnection(board, alignedEndPoint, hitElement);
                     object.boundId = hitElement.id;
                 }
                 else {
@@ -7934,23 +7959,6 @@ const withArrowLineResize = (board) => {
                     }
                 }
             }
-            if (!hitElement) {
-                handleIndex = resizeRef.handle === LineResizeHandle.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 !== ArrowLineShape.elbow ||
-                    (resizeRef.element.shape === ArrowLineShape.elbow && newPoints.length === 2)) {
-                    newPoints.forEach((point, index) => {
-                        if (index === handleIndex)
-                            return;
-                        if (points[handleIndex]) {
-                            points[handleIndex] = alignPoints(point, points[handleIndex]);
-                        }
-                    });
-                }
-            }
             DrawTransforms.resizeArrowLine(board, { points, source, target }, resizeRef.path);
         },
         afterResize: (resizeRef) => {
@@ -7987,6 +7995,14 @@ const withArrowLineResize = (board) => {
     return board;
 };
 
+/*
+Purpose: Visual feedback for snapping/binding arrow-line endpoints to shapes.
+- Active when using arrow-line pointers or resizing source/target handles.
+- Detects target shape under cursor and whether edge/connector snapping applies.
+- Draws bound outline/mask and a connector marker at the snap point.
+- Applies rotation to reaction graphics for angled (rotated) shapes.
+Lifecycle: pointerMove → detect hit/snapping → render reaction → pointerUp cleanup.
+*/
 const withArrowLineBoundReaction = (board) => {
     const { pointerMove, pointerUp } = board;
     let boundShapeG = null;
@@ -8072,6 +8088,7 @@ const withArrowLineText = (board) => {
                         }
                     });
                 }
+                return;
             }
         }
         dblClick(event);
@@ -8157,6 +8174,14 @@ class ImageComponent extends CommonElementFlavour {
 
 const WithArrowLineAutoCompletePluginKey = 'plait-arrow-line-auto-complete-plugin-key';
 const BOARD_TO_PRE_COMMIT = new WeakMap();
+/*
+Purpose: Create arrow line via auto-complete drag from a shape edge.
+- On pointerDown at an auto-complete point, set elbow mode and capture source.
+- On drag (beyond buffer), choose nearest crossing on the source edge if available.
+- Rotate source point; build temporary elbow arrow while moving.
+- On release, insert the arrow and select; otherwise commit preview pair if present.
+Lifecycle: pointerDown → pointerMove (create temp) → pointerUp insert/commit → reset.
+*/
 const withArrowLineAutoComplete = (board) => {
     const { pointerDown, pointerMove, globalPointerUp, touchMove } = board;
     let autoCompletePoint = null;
@@ -8240,6 +8265,14 @@ const withArrowLineAutoComplete = (board) => {
 };
 
 const PREVIEW_ARROW_LINE_DISTANCE = 100;
+/*
+Purpose: Hover-driven auto-complete preview for arrow lines.
+- When hovering a selected shape’s auto-complete point, show a hint circle.
+- Offset a temporary shape and build an elbow arrow from the hit edge.
+- Rotate points by element angle; compute target connection; bind target id.
+- Store temporary arrow/shape for pre-commit; commit on click via auto-complete plugin.
+Lifecycle: pointerMove (hit/preview) → pointerLeave/globalPointerUp cleanup.
+*/
 const withArrowLineAutoCompleteReaction = (board) => {
     const { pointerMove, pointerLeave, globalPointerUp } = board;
     let reactionG = null;