From 6b9fa5bcc5441221f9b61460fe608b0cf569bded Mon Sep 17 00:00:00 2001 From: Mark Tolmacs Date: Fri, 4 Apr 2025 19:05:13 +0200 Subject: [PATCH] Do not snap linear elements Signed-off-by: Mark Tolmacs --- packages/element/src/binding.ts | 19 ++-- packages/element/src/linearElementEditor.ts | 8 +- packages/excalidraw/components/App.tsx | 97 +++++++++++-------- .../data/__snapshots__/transform.test.ts.snap | 24 ++--- 4 files changed, 85 insertions(+), 63 deletions(-) diff --git a/packages/element/src/binding.ts b/packages/element/src/binding.ts index ad3af4e6d9..fde832f767 100644 --- a/packages/element/src/binding.ts +++ b/packages/element/src/binding.ts @@ -525,15 +525,18 @@ export const bindLinearElement = ( }; } const points = Array.from(linearElement.points); - points[edgePointIndex] = toLocalPoint( - bindPointToSnapToElementOutline( + + if (isArrowElement(linearElement)) { + points[edgePointIndex] = toLocalPoint( + bindPointToSnapToElementOutline( + linearElement, + hoveredElement, + startOrEnd, + elementsMap, + ), linearElement, - hoveredElement, - startOrEnd, - elementsMap, - ), - linearElement, - ); + ); + } mutateElement(linearElement, { points, diff --git a/packages/element/src/linearElementEditor.ts b/packages/element/src/linearElementEditor.ts index 837f755ce5..9758d37a50 100644 --- a/packages/element/src/linearElementEditor.ts +++ b/packages/element/src/linearElementEditor.ts @@ -57,6 +57,7 @@ import { headingIsHorizontal, vectorToHeading } from "./heading"; import { bumpVersion, mutateElement } from "./mutateElement"; import { getBoundTextElement, handleBindTextResize } from "./textElement"; import { + isArrowElement, isBindingElement, isElbowArrow, isFixedPointBinding, @@ -371,14 +372,17 @@ export class LinearElementEditor { app.scene, app.state.zoom, ); + newPointPosition = LinearElementEditor.createPointAt( element, elementsMap, - avoidancePoint[0] === newGlobalPointPosition[0] + !isArrowElement(element) || + avoidancePoint[0] === newGlobalPointPosition[0] ? newGlobalPointPosition[0] - linearElementEditor.pointerOffset.x : avoidancePoint[0], - avoidancePoint[1] === newGlobalPointPosition[1] + !isArrowElement(element) || + avoidancePoint[1] === newGlobalPointPosition[1] ? newGlobalPointPosition[1] - linearElementEditor.pointerOffset.y : avoidancePoint[1], diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index 4bb23b8a9c..2961af31f1 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -5991,20 +5991,25 @@ class App extends React.Component { { points: [ ...points.slice(0, -1), - toLocalPoint( - getOutlineAvoidingPoint( - multiElement, - pointFrom(scenePointerX, scenePointerY), - multiElement.points.length - 1, - this.scene, - this.state.zoom, - pointFrom( - multiElement.x + lastCommittedX + dxFromLastCommitted, - multiElement.y + lastCommittedY + dyFromLastCommitted, + isArrowElement(multiElement) + ? toLocalPoint( + getOutlineAvoidingPoint( + multiElement, + pointFrom(scenePointerX, scenePointerY), + multiElement.points.length - 1, + this.scene, + this.state.zoom, + pointFrom( + multiElement.x + lastCommittedX + dxFromLastCommitted, + multiElement.y + lastCommittedY + dyFromLastCommitted, + ), + ), + multiElement, + ) + : pointFrom( + lastCommittedX + dxFromLastCommitted, + lastCommittedY + dyFromLastCommitted, ), - ), - multiElement, - ), ], }, false, @@ -8711,20 +8716,25 @@ class App extends React.Component { { points: [ ...points, - toLocalPoint( - getOutlineAvoidingPoint( - newElement, - pointFrom(pointerCoords.x, pointerCoords.y), - newElement.points.length - 1, - this.scene, - this.state.zoom, - pointFrom( - newElement.x + dx, - newElement.y + dy, - ), - ), - newElement, - ), + isArrowElement(newElement) + ? toLocalPoint( + getOutlineAvoidingPoint( + newElement, + pointFrom( + pointerCoords.x, + pointerCoords.y, + ), + newElement.points.length - 1, + this.scene, + this.state.zoom, + pointFrom( + newElement.x + dx, + newElement.y + dy, + ), + ), + newElement, + ) + : pointFrom(dx, dy), ], }, false, @@ -8738,20 +8748,25 @@ class App extends React.Component { { points: [ ...points.slice(0, -1), - toLocalPoint( - getOutlineAvoidingPoint( - newElement, - pointFrom(pointerCoords.x, pointerCoords.y), - newElement.points.length - 1, - this.scene, - this.state.zoom, - pointFrom( - newElement.x + dx, - newElement.y + dy, - ), - ), - newElement, - ), + isArrowElement(newElement) + ? toLocalPoint( + getOutlineAvoidingPoint( + newElement, + pointFrom( + pointerCoords.x, + pointerCoords.y, + ), + newElement.points.length - 1, + this.scene, + this.state.zoom, + pointFrom( + newElement.x + dx, + newElement.y + dy, + ), + ), + newElement, + ) + : pointFrom(dx, dy), ], }, false, diff --git a/packages/excalidraw/data/__snapshots__/transform.test.ts.snap b/packages/excalidraw/data/__snapshots__/transform.test.ts.snap index 83f3497b0b..9057d24cb1 100644 --- a/packages/excalidraw/data/__snapshots__/transform.test.ts.snap +++ b/packages/excalidraw/data/__snapshots__/transform.test.ts.snap @@ -427,7 +427,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe "backgroundColor": "transparent", "boundElements": [ { - "id": "id1", + "id": "id40", "type": "text", }, ], @@ -435,7 +435,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe "elbowed": false, "endArrowhead": "arrow", "endBinding": { - "elementId": "id3", + "elementId": "id42", "focus": -0, "gap": 5, }, @@ -465,7 +465,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe "seed": Any, "startArrowhead": null, "startBinding": { - "elementId": "id2", + "elementId": "id41", "focus": 0, "gap": 5, }, @@ -488,7 +488,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe "autoResize": true, "backgroundColor": "transparent", "boundElements": null, - "containerId": "id0", + "containerId": "id39", "customData": undefined, "fillStyle": "solid", "fontFamily": 5, @@ -529,7 +529,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe "backgroundColor": "transparent", "boundElements": [ { - "id": "id0", + "id": "id39", "type": "arrow", }, ], @@ -566,7 +566,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe "backgroundColor": "transparent", "boundElements": [ { - "id": "id0", + "id": "id39", "type": "arrow", }, ], @@ -603,7 +603,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when "backgroundColor": "transparent", "boundElements": [ { - "id": "id1", + "id": "id44", "type": "text", }, ], @@ -611,7 +611,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when "elbowed": false, "endArrowhead": "arrow", "endBinding": { - "elementId": "id3", + "elementId": "id46", "focus": -0, "gap": 5, }, @@ -641,7 +641,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when "seed": Any, "startArrowhead": null, "startBinding": { - "elementId": "id2", + "elementId": "id45", "focus": 0, "gap": 5, }, @@ -664,7 +664,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when "autoResize": true, "backgroundColor": "transparent", "boundElements": null, - "containerId": "id0", + "containerId": "id43", "customData": undefined, "fillStyle": "solid", "fontFamily": 5, @@ -706,7 +706,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when "backgroundColor": "transparent", "boundElements": [ { - "id": "id0", + "id": "id43", "type": "arrow", }, ], @@ -752,7 +752,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when "backgroundColor": "transparent", "boundElements": [ { - "id": "id0", + "id": "id43", "type": "arrow", }, ],