diff --git a/packages/element/src/binding.ts b/packages/element/src/binding.ts index df22f97d4..3301173e2 100644 --- a/packages/element/src/binding.ts +++ b/packages/element/src/binding.ts @@ -309,8 +309,6 @@ const bindingStrategyForNewSimpleArrowEndpointDragging = ( invariant(otherElement, "Other element must be in the elements map"); - const otherIsTransparent = isTransparent(otherElement.backgroundColor); - return { start: isMultiPoint ? { mode: undefined } @@ -320,8 +318,8 @@ const bindingStrategyForNewSimpleArrowEndpointDragging = ( focusPoint: origin ?? pointFrom(arrow.x, arrow.y), }, end: { - mode: "inside", - element: otherIsTransparent ? hit : otherElement, + mode: "orbit", + element: hit, focusPoint: point, }, }; diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index ba262c3ac..c147b2aed 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -967,6 +967,9 @@ class App extends React.Component { } } + private previousHoveredBindableElement: NonDeletedExcalidrawElement | null = + null; + private handleDelayedBindModeChange( arrow: ExcalidrawArrowElement, hoveredElement: NonDeletedExcalidrawElement | null, @@ -1069,7 +1072,11 @@ class App extends React.Component { } }; - if (!hoveredElement) { + if ( + !hoveredElement || + (this.previousHoveredBindableElement && + hoveredElement.id !== this.previousHoveredBindableElement.id) + ) { // Clear the timeout if we're not hovering a bindable if (this.bindModeHandler) { clearTimeout(this.bindModeHandler); @@ -1084,6 +1091,8 @@ class App extends React.Component { }); }); } + + this.previousHoveredBindableElement = null; } else if ( !this.bindModeHandler && (!this.state.newElement || !arrow.startBinding) @@ -1091,6 +1100,8 @@ class App extends React.Component { // We are hovering a bindable element this.bindModeHandler = setTimeout(effector, BIND_MODE_TIMEOUT); } + + this.previousHoveredBindableElement = hoveredElement; } private cacheEmbeddableRef(