diff --git a/packages/common/src/points.ts b/packages/common/src/points.ts index e8f988203b..5eac4fc52d 100644 --- a/packages/common/src/points.ts +++ b/packages/common/src/points.ts @@ -1,4 +1,5 @@ import { + pointFrom, pointFromPair, type GlobalPoint, type LocalPoint, @@ -69,12 +70,12 @@ export const getGridPoint = ( x: number, y: number, gridSize: NullableGridSize, -): [number, number] => { +): GlobalPoint => { if (gridSize) { - return [ + return pointFrom( Math.round(x / gridSize) * gridSize, Math.round(y / gridSize) * gridSize, - ]; + ); } - return [x, y]; + return pointFrom(x, y); }; diff --git a/packages/element/src/__tests__/__snapshots__/transform.test.ts.snap b/packages/element/src/__tests__/__snapshots__/transform.test.ts.snap index afef25eeff..7961f1e68e 100644 --- a/packages/element/src/__tests__/__snapshots__/transform.test.ts.snap +++ b/packages/element/src/__tests__/__snapshots__/transform.test.ts.snap @@ -244,7 +244,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t "backgroundColor": "transparent", "boundElements": [ { - "id": "id50", + "id": "id6", "type": "arrow", }, ], @@ -290,7 +290,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t "backgroundColor": "transparent", "boundElements": [ { - "id": "id50", + "id": "id6", "type": "arrow", }, ], @@ -335,7 +335,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t "backgroundColor": "transparent", "boundElements": [ { - "id": "id51", + "id": "id7", "type": "text", }, ], @@ -401,7 +401,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t "autoResize": true, "backgroundColor": "transparent", "boundElements": null, - "containerId": "id50", + "containerId": "id6", "customData": undefined, "fillStyle": "solid", "fontFamily": 5, @@ -1316,7 +1316,7 @@ exports[`Test Transform > should transform the elements correctly when linear el "backgroundColor": "transparent", "boundElements": [ { - "id": "id56", + "id": "id11", "type": "text", }, { @@ -1359,7 +1359,7 @@ exports[`Test Transform > should transform the elements correctly when linear el "backgroundColor": "transparent", "boundElements": [ { - "id": "id57", + "id": "id12", "type": "text", }, ], @@ -1398,7 +1398,7 @@ exports[`Test Transform > should transform the elements correctly when linear el "backgroundColor": "transparent", "boundElements": [ { - "id": "id58", + "id": "id13", "type": "text", }, { @@ -1441,7 +1441,7 @@ exports[`Test Transform > should transform the elements correctly when linear el "backgroundColor": "transparent", "boundElements": [ { - "id": "id59", + "id": "id14", "type": "text", }, { @@ -1488,7 +1488,7 @@ exports[`Test Transform > should transform the elements correctly when linear el "backgroundColor": "transparent", "boundElements": [ { - "id": "id60", + "id": "id15", "type": "text", }, ], @@ -1556,7 +1556,7 @@ exports[`Test Transform > should transform the elements correctly when linear el "backgroundColor": "transparent", "boundElements": [ { - "id": "id61", + "id": "id16", "type": "text", }, ], diff --git a/packages/element/src/binding.ts b/packages/element/src/binding.ts index 1fbd5d66e5..cbd7986eb1 100644 --- a/packages/element/src/binding.ts +++ b/packages/element/src/binding.ts @@ -155,6 +155,7 @@ export const bindOrUnbindBindingElement = ( altKey?: boolean; angleLocked?: boolean; initialBinding?: boolean; + gridSize?: NullableGridSize; }, ) => { const { start, end } = getBindingStrategyForDraggingBindingElementEndpoints( @@ -594,6 +595,7 @@ export const getBindingStrategyForDraggingBindingElementEndpoints = ( finalize?: boolean; initialBinding?: boolean; zoom?: AppState["zoom"]; + gridSize?: NullableGridSize; }, ): { start: BindingStrategy; end: BindingStrategy } => { if (getFeatureFlag("COMPLEX_BINDINGS")) { @@ -752,7 +754,11 @@ const getBindingStrategyForDraggingBindingElementEndpoints_simple = ( ? globalPoint : // NOTE: Can only affect the start point because new arrows always drag the end point opts?.newArrow - ? appState.selectedLinearElement!.initialState.origin! + ? getGridPoint( + appState.selectedLinearElement!.initialState.origin![0], + appState.selectedLinearElement!.initialState.origin![1], + opts.gridSize as NullableGridSize, + ) : LinearElementEditor.getPointAtIndexGlobalCoordinates( arrow, 0, diff --git a/packages/element/src/linearElementEditor.ts b/packages/element/src/linearElementEditor.ts index d888cc8f43..5895b71d43 100644 --- a/packages/element/src/linearElementEditor.ts +++ b/packages/element/src/linearElementEditor.ts @@ -2172,6 +2172,7 @@ const pointDraggingUpdates = ( newArrow: !!app.state.newElement, angleLocked, altKey, + gridSize: app.getEffectiveGridSize(), }, ); diff --git a/packages/excalidraw/actions/actionFinalize.tsx b/packages/excalidraw/actions/actionFinalize.tsx index 277b29d97d..e7a0d873bd 100644 --- a/packages/excalidraw/actions/actionFinalize.tsx +++ b/packages/excalidraw/actions/actionFinalize.tsx @@ -126,6 +126,7 @@ export const actionFinalize = register({ newArrow, altKey: event.altKey, angleLocked, + gridSize: app.getEffectiveGridSize(), }, ); } else if (isLineElement(element)) {