Skip to content

Commit 1e3399e

Browse files
ryan-diryan-di
authored
fix: make arrow binding area adapt to zoom levels (#8927)
* make binding area adapt to zoom * revert stroke color * normalize binding gap * reduce normalized gap
1 parent 873698a commit 1e3399e

File tree

14 files changed

+247
-119
lines changed

14 files changed

+247
-119
lines changed

‎packages/excalidraw/actions/actionDeleteSelected.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,7 @@ export const actionDeleteSelected = register({
161161
element,
162162
selectedPointsIndices,
163163
elementsMap,
164+
appState.zoom,
164165
);
165166

166167
return {

‎packages/excalidraw/actions/actionFlip.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,7 @@ const flipElements = (
153153
app.scene,
154154
isBindingEnabled(appState),
155155
[],
156+
appState.zoom,
156157
);
157158

158159
// ---------------------------------------------------------------------------

‎packages/excalidraw/actions/actionProperties.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1591,6 +1591,7 @@ export const actionChangeArrowType = register({
15911591
tupleToCoors(startGlobalPoint),
15921592
elements,
15931593
elementsMap,
1594+
appState.zoom,
15941595
true,
15951596
);
15961597
const endHoveredElement =
@@ -1599,6 +1600,7 @@ export const actionChangeArrowType = register({
15991600
tupleToCoors(endGlobalPoint),
16001601
elements,
16011602
elementsMap,
1603+
appState.zoom,
16021604
true,
16031605
);
16041606
const startElement = startHoveredElement

‎packages/excalidraw/components/App.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3215,6 +3215,10 @@ class App extends React.Component<AppProps, AppState> {
32153215
),
32163216
),
32173217
[el.points[0], el.points[el.points.length - 1]],
3218+
undefined,
3219+
{
3220+
zoom: this.state.zoom,
3221+
},
32183222
),
32193223
};
32203224
}
@@ -4372,6 +4376,7 @@ class App extends React.Component<AppProps, AppState> {
43724376

43734377
updateBoundElements(element, this.scene.getNonDeletedElementsMap(), {
43744378
simultaneouslyUpdated: selectedElements,
4379+
zoom: this.state.zoom,
43754380
});
43764381
});
43774382

@@ -4381,6 +4386,7 @@ class App extends React.Component<AppProps, AppState> {
43814386
(element) => element.id !== elbowArrow?.id || step !== 0,
43824387
),
43834388
this.scene.getNonDeletedElementsMap(),
4389+
this.state.zoom,
43844390
),
43854391
});
43864392

@@ -4596,6 +4602,7 @@ class App extends React.Component<AppProps, AppState> {
45964602
this.scene,
45974603
isBindingEnabled(this.state),
45984604
this.state.selectedLinearElement?.selectedPointsIndices ?? [],
4605+
this.state.zoom,
45994606
);
46004607
this.setState({ suggestedBindings: [] });
46014608
}
@@ -5854,6 +5861,7 @@ class App extends React.Component<AppProps, AppState> {
58545861
{
58555862
isDragging: true,
58565863
informMutation: false,
5864+
zoom: this.state.zoom,
58575865
},
58585866
);
58595867
} else {
@@ -7401,6 +7409,7 @@ class App extends React.Component<AppProps, AppState> {
74017409
pointerDownState.origin,
74027410
this.scene.getNonDeletedElements(),
74037411
this.scene.getNonDeletedElementsMap(),
7412+
this.state.zoom,
74047413
);
74057414

74067415
this.setState({
@@ -7698,6 +7707,7 @@ class App extends React.Component<AppProps, AppState> {
76987707
pointerDownState.origin,
76997708
this.scene.getNonDeletedElements(),
77007709
this.scene.getNonDeletedElementsMap(),
7710+
this.state.zoom,
77017711
isElbowArrow(element),
77027712
);
77037713

@@ -8276,6 +8286,7 @@ class App extends React.Component<AppProps, AppState> {
82768286
suggestedBindings: getSuggestedBindingsForArrows(
82778287
selectedElements,
82788288
this.scene.getNonDeletedElementsMap(),
8289+
this.state.zoom,
82798290
),
82808291
});
82818292
}
@@ -8444,6 +8455,7 @@ class App extends React.Component<AppProps, AppState> {
84448455
{
84458456
isDragging: true,
84468457
informMutation: false,
8458+
zoom: this.state.zoom,
84478459
},
84488460
);
84498461
} else if (points.length === 2) {
@@ -9408,6 +9420,7 @@ class App extends React.Component<AppProps, AppState> {
94089420
this.scene,
94099421
isBindingEnabled(this.state),
94109422
this.state.selectedLinearElement?.selectedPointsIndices ?? [],
9423+
this.state.zoom,
94119424
);
94129425
}
94139426

@@ -9900,6 +9913,7 @@ class App extends React.Component<AppProps, AppState> {
99009913
pointerCoords,
99019914
this.scene.getNonDeletedElements(),
99029915
this.scene.getNonDeletedElementsMap(),
9916+
this.state.zoom,
99039917
);
99049918
this.setState({
99059919
suggestedBindings:
@@ -9928,6 +9942,7 @@ class App extends React.Component<AppProps, AppState> {
99289942
coords,
99299943
this.scene.getNonDeletedElements(),
99309944
this.scene.getNonDeletedElementsMap(),
9945+
this.state.zoom,
99319946
isArrowElement(linearElement) && isElbowArrow(linearElement),
99329947
);
99339948
if (
@@ -10569,6 +10584,7 @@ class App extends React.Component<AppProps, AppState> {
1056910584
const suggestedBindings = getSuggestedBindingsForArrows(
1057010585
selectedElements,
1057110586
this.scene.getNonDeletedElementsMap(),
10587+
this.state.zoom,
1057210588
);
1057310589

1057410590
const elementsToHighlight = new Set<ExcalidrawElement>();

‎packages/excalidraw/components/Stats/utils.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -300,6 +300,7 @@ export const updateBindings = (
300300
options?: {
301301
simultaneouslyUpdated?: readonly ExcalidrawElement[];
302302
newSize?: { width: number; height: number };
303+
zoom?: AppState["zoom"];
303304
},
304305
) => {
305306
if (isLinearElement(latestElement)) {
@@ -310,6 +311,7 @@ export const updateBindings = (
310311
scene,
311312
true,
312313
[],
314+
options?.zoom,
313315
);
314316
} else {
315317
updateBoundElements(latestElement, elementsMap, options);

‎packages/excalidraw/data/__snapshots__/transform.test.ts.snap‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
9595
"fillStyle": "solid",
9696
"frameId": null,
9797
"groupIds": [],
98-
"height": 35,
98+
"height": 33.519031369643244,
9999
"id": Any<String>,
100100
"index": "a2",
101101
"isDeleted": false,
@@ -109,8 +109,8 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
109109
0.5,
110110
],
111111
[
112-
394.5,
113-
34.5,
112+
382.47606040672997,
113+
34.019031369643244,
114114
],
115115
],
116116
"roughness": 1,
@@ -128,9 +128,9 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
128128
"strokeWidth": 2,
129129
"type": "arrow",
130130
"updated": 1,
131-
"version": 4,
131+
"version": 7,
132132
"versionNonce": Any<Number>,
133-
"width": 395,
133+
"width": 381.97606040672997,
134134
"x": 247,
135135
"y": 420,
136136
}
@@ -167,7 +167,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
167167
0,
168168
],
169169
[
170-
399.5,
170+
389.5,
171171
0,
172172
],
173173
],
@@ -186,10 +186,10 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
186186
"strokeWidth": 2,
187187
"type": "arrow",
188188
"updated": 1,
189-
"version": 4,
189+
"version": 6,
190190
"versionNonce": Any<Number>,
191-
"width": 400,
192-
"x": 227,
191+
"width": 390,
192+
"x": 237,
193193
"y": 450,
194194
}
195195
`;
@@ -319,7 +319,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
319319
"verticalAlign": "top",
320320
"width": 100,
321321
"x": 560,
322-
"y": 226.5,
322+
"y": 236.95454545454544,
323323
}
324324
`;
325325
@@ -339,13 +339,13 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
339339
"endBinding": {
340340
"elementId": "text-2",
341341
"fixedPoint": null,
342-
"focus": 0,
343-
"gap": 205,
342+
"focus": 1.625925925925924,
343+
"gap": 14,
344344
},
345345
"fillStyle": "solid",
346346
"frameId": null,
347347
"groupIds": [],
348-
"height": 0,
348+
"height": 18.278619528619487,
349349
"id": Any<String>,
350350
"index": "a2",
351351
"isDeleted": false,
@@ -356,11 +356,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
356356
"points": [
357357
[
358358
0.5,
359-
0,
359+
-0.5,
360360
],
361361
[
362-
99.5,
363-
0,
362+
357.2037037037038,
363+
-17.778619528619487,
364364
],
365365
],
366366
"roughness": 1,
@@ -378,11 +378,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
378378
"strokeWidth": 2,
379379
"type": "arrow",
380380
"updated": 1,
381-
"version": 4,
381+
"version": 6,
382382
"versionNonce": Any<Number>,
383-
"width": 100,
384-
"x": 255,
385-
"y": 239,
383+
"width": 357.7037037037038,
384+
"x": 171,
385+
"y": 249.45454545454544,
386386
}
387387
`;
388388
@@ -482,7 +482,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
482482
"strokeWidth": 2,
483483
"type": "arrow",
484484
"updated": 1,
485-
"version": 4,
485+
"version": 6,
486486
"versionNonce": Any<Number>,
487487
"width": 100,
488488
"x": 255,
@@ -660,7 +660,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
660660
"strokeWidth": 2,
661661
"type": "arrow",
662662
"updated": 1,
663-
"version": 4,
663+
"version": 6,
664664
"versionNonce": Any<Number>,
665665
"width": 100,
666666
"x": 255,
@@ -1505,7 +1505,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
15051505
0,
15061506
],
15071507
[
1508-
272.485,
1508+
270.98528125,
15091509
0,
15101510
],
15111511
],
@@ -1526,10 +1526,10 @@ exports[`Test Transform > should transform the elements correctly when linear el
15261526
"strokeWidth": 2,
15271527
"type": "arrow",
15281528
"updated": 1,
1529-
"version": 4,
1529+
"version": 7,
15301530
"versionNonce": Any<Number>,
1531-
"width": 272.985,
1532-
"x": 111.262,
1531+
"width": 270.48528125,
1532+
"x": 112.76171875,
15331533
"y": 57,
15341534
}
15351535
`;
@@ -1587,11 +1587,11 @@ exports[`Test Transform > should transform the elements correctly when linear el
15871587
"strokeWidth": 2,
15881588
"type": "arrow",
15891589
"updated": 1,
1590-
"version": 4,
1590+
"version": 6,
15911591
"versionNonce": Any<Number>,
15921592
"width": 0,
1593-
"x": 77.017,
1594-
"y": 79,
1593+
"x": 83.015625,
1594+
"y": 81.5,
15951595
}
15961596
`;
15971597

‎packages/excalidraw/data/transform.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -779,7 +779,7 @@ describe("Test Transform", () => {
779779
elementId: "rect-1",
780780
fixedPoint: null,
781781
focus: 0,
782-
gap: 205,
782+
gap: 14,
783783
});
784784
expect(rect.boundElements).toStrictEqual([
785785
{

0 commit comments

Comments
 (0)