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
This commit is contained in:
Ryan Di 2024-12-23 05:55:50 +08:00 committed by GitHub
parent 873698a1a2
commit 1e3399eac8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 247 additions and 119 deletions

View file

@ -3215,6 +3215,10 @@ class App extends React.Component<AppProps, AppState> {
),
),
[el.points[0], el.points[el.points.length - 1]],
undefined,
{
zoom: this.state.zoom,
},
),
};
}
@ -4372,6 +4376,7 @@ class App extends React.Component<AppProps, AppState> {
updateBoundElements(element, this.scene.getNonDeletedElementsMap(), {
simultaneouslyUpdated: selectedElements,
zoom: this.state.zoom,
});
});
@ -4381,6 +4386,7 @@ class App extends React.Component<AppProps, AppState> {
(element) => element.id !== elbowArrow?.id || step !== 0,
),
this.scene.getNonDeletedElementsMap(),
this.state.zoom,
),
});
@ -4596,6 +4602,7 @@ class App extends React.Component<AppProps, AppState> {
this.scene,
isBindingEnabled(this.state),
this.state.selectedLinearElement?.selectedPointsIndices ?? [],
this.state.zoom,
);
this.setState({ suggestedBindings: [] });
}
@ -5854,6 +5861,7 @@ class App extends React.Component<AppProps, AppState> {
{
isDragging: true,
informMutation: false,
zoom: this.state.zoom,
},
);
} else {
@ -7401,6 +7409,7 @@ class App extends React.Component<AppProps, AppState> {
pointerDownState.origin,
this.scene.getNonDeletedElements(),
this.scene.getNonDeletedElementsMap(),
this.state.zoom,
);
this.setState({
@ -7698,6 +7707,7 @@ class App extends React.Component<AppProps, AppState> {
pointerDownState.origin,
this.scene.getNonDeletedElements(),
this.scene.getNonDeletedElementsMap(),
this.state.zoom,
isElbowArrow(element),
);
@ -8276,6 +8286,7 @@ class App extends React.Component<AppProps, AppState> {
suggestedBindings: getSuggestedBindingsForArrows(
selectedElements,
this.scene.getNonDeletedElementsMap(),
this.state.zoom,
),
});
}
@ -8444,6 +8455,7 @@ class App extends React.Component<AppProps, AppState> {
{
isDragging: true,
informMutation: false,
zoom: this.state.zoom,
},
);
} else if (points.length === 2) {
@ -9408,6 +9420,7 @@ class App extends React.Component<AppProps, AppState> {
this.scene,
isBindingEnabled(this.state),
this.state.selectedLinearElement?.selectedPointsIndices ?? [],
this.state.zoom,
);
}
@ -9900,6 +9913,7 @@ class App extends React.Component<AppProps, AppState> {
pointerCoords,
this.scene.getNonDeletedElements(),
this.scene.getNonDeletedElementsMap(),
this.state.zoom,
);
this.setState({
suggestedBindings:
@ -9928,6 +9942,7 @@ class App extends React.Component<AppProps, AppState> {
coords,
this.scene.getNonDeletedElements(),
this.scene.getNonDeletedElementsMap(),
this.state.zoom,
isArrowElement(linearElement) && isElbowArrow(linearElement),
);
if (
@ -10569,6 +10584,7 @@ class App extends React.Component<AppProps, AppState> {
const suggestedBindings = getSuggestedBindingsForArrows(
selectedElements,
this.scene.getNonDeletedElementsMap(),
this.state.zoom,
);
const elementsToHighlight = new Set<ExcalidrawElement>();

View file

@ -300,6 +300,7 @@ export const updateBindings = (
options?: {
simultaneouslyUpdated?: readonly ExcalidrawElement[];
newSize?: { width: number; height: number };
zoom?: AppState["zoom"];
},
) => {
if (isLinearElement(latestElement)) {
@ -310,6 +311,7 @@ export const updateBindings = (
scene,
true,
[],
options?.zoom,
);
} else {
updateBoundElements(latestElement, elementsMap, options);