corkine/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw synced 2025-07-25 13:58:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

Bind mode on precise binding

Browse Source 
Fix binding to inside element

Fix initial arrow not following cursor (white dot)

Fix elbow arrow
This commit is contained in:
Mark Tolmacs
2025-07-18 19:11:09 +02:00
parent 1cfbc4b2ca
commit 892d2f425d
2 changed files with 47 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/element/src/binding.ts
View File

@ -139,7 +139,7 @@ export const bindOrUnbindBindingElement = (
); );
bindOrUnbindBindingElementEdge(arrow, start, "start", scene); bindOrUnbindBindingElementEdge(arrow, start, "start", scene);
bindOrUnbindBindingElementEdge(arrow, end, "end", scene); bindOrUnbindBindingElementEdge(arrow, end, "end", scene);
if (start.focusPoint || end.focusPoint) { if (!isElbowArrow(arrow) && (start.focusPoint || end.focusPoint)) {
// If the strategy dictates a focus point override, then // If the strategy dictates a focus point override, then
// update the arrow points to point to the focus point. // update the arrow points to point to the focus point.
const updates: PointsPositionUpdates = new Map(); const updates: PointsPositionUpdates = new Map();

37
packages/excalidraw/components/App.tsx
View File

@ -6233,6 +6233,16 @@ class App extends React.Component<AppProps, AppState> {
multiElement.startBinding.mode === "orbit" multiElement.startBinding.mode === "orbit"
) { ) {
const elementsMap = this.scene.getNonDeletedElementsMap(); const elementsMap = this.scene.getNonDeletedElementsMap();
const hoveredElement = getHoveredElementForBinding(
pointFrom<GlobalPoint>(scenePointerX, scenePointerY),
this.scene.getNonDeletedElements(),
this.scene.getNonDeletedElementsMap(),
this.state.zoom,
);
if (
!hoveredElement ||
hoveredElement.id !== multiElement.startBinding.elementId
) {
const startPoint = const startPoint =
LinearElementEditor.getPointAtIndexGlobalCoordinates( LinearElementEditor.getPointAtIndexGlobalCoordinates(
multiElement, multiElement,
@ -6270,6 +6280,7 @@ class App extends React.Component<AppProps, AppState> {
); );
} }
} }
}
// in this path, we're mutating multiElement to reflect // in this path, we're mutating multiElement to reflect
// how it will be after adding pointer position as the next point // how it will be after adding pointer position as the next point
@ -6933,9 +6944,13 @@ class App extends React.Component<AppProps, AppState> {
clearTimeout(this.bindModeHandler); clearTimeout(this.bindModeHandler);
} }
this.bindModeHandler = null; this.bindModeHandler = null;
// We need this iteration to complete binding and change
// back to orbit mode after that
setTimeout(() =>
this.setState({ this.setState({
bindMode: "orbit", bindMode: "orbit",
}); }),
);
} }
const scenePointer = viewportCoordsToSceneCoords( const scenePointer = viewportCoordsToSceneCoords(
@ -8494,26 +8509,6 @@ class App extends React.Component<AppProps, AppState> {
event[KEYS.CTRL_OR_CMD] ? null : this.getEffectiveGridSize(), event[KEYS.CTRL_OR_CMD] ? null : this.getEffectiveGridSize(),
); );
// for arrows/lines, don't start dragging until a given threshold
// to ensure we don't create a 2-point arrow by mistake when
// user clicks mouse in a way that it moves a tiny bit (thus
// triggering pointermove)
if (
!pointerDownState.drag.hasOccurred &&
(this.state.activeTool.type === "arrow" ||
this.state.activeTool.type === "line")
) {
if (
pointDistance(
pointFrom(pointerCoords.x, pointerCoords.y),
pointFrom(pointerDownState.origin.x, pointerDownState.origin.y),
) *
this.state.zoom.value <
MINIMUM_ARROW_SIZE
) {
return;
}
}
if (pointerDownState.resize.isResizing) { if (pointerDownState.resize.isResizing) {
pointerDownState.lastCoords.x = pointerCoords.x; pointerDownState.lastCoords.x = pointerCoords.x;
pointerDownState.lastCoords.y = pointerCoords.y; pointerDownState.lastCoords.y = pointerCoords.y;