feat: Allow binding only via linear element ends #7946

mtolmacs · 2024-04-24T16:11:51Z

Change the behavior of binding to only allow connections if the start or end node of an arrow is dragged.

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

…visual bind suggestion Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

vercel · 2024-04-24T16:11:56Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
excalidraw	✅ Ready (Inspect)	Visit Preview	May 2, 2024 6:22am
excalidraw-package-example	✅ Ready (Inspect)	Visit Preview	May 2, 2024 6:22am
excalidraw-package-example-with-nextjs	✅ Ready (Inspect)	Visit Preview	May 2, 2024 6:22am

1 Ignored Deployment

Name	Status	Preview	Updated (UTC)
docs	⬜️ Ignored (Inspect)	Visit Preview	May 2, 2024 6:22am

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

packages/excalidraw/components/App.tsx

dwelle · 2024-04-24T22:03:29Z

Couple more notes:

there are a few cases where we should keep showing the suggested bindings, in particular (check production to see how it works in practice):
- when moving bound arrow(s) with a keyboard
- when resizing/rotating 3+ point bound arrows
- ... maybe more?
previously the now removed maybeSuggestBindingForAll() function was bailing if we had more than 50 selected elements. I'd still keep doing this so we don't allocate large arrays on the hot path unnecessarily when calculating the suggested bindings.

packages/excalidraw/element/binding.ts

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

(I think)

(complexity goes brrrr)

dwelle

(pushed two tiny commits.)

Ready to ship! 🔥

Initial implementation of the idea comes from excalidraw#6947 Co-authored-by: Sammy Lee <sammy.joe.lee@gmail.com>

Mrazator · 2024-05-24T11:17:17Z

packages/excalidraw/components/App.tsx

-      isBindingEnabled(this.state)
-        ? bindOrUnbindSelectedElements(selectedElements, this)
-        : unbindLinearElements(selectedElements, elementsMap);
+      bindOrUnbindLinearElements(


@dwelle @mtolmacs We will need to do something about the keyUp handler, as it triggers after each keyDown in our colour picker, command palette and now font picker, blocking the UI thread.

#8057

mtolmacs added 4 commits April 24, 2024 13:32

A simple somewhat broken binding

Loading
Loading status checks…

942239b

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

Non-idiomatic solution to arrow edge binding

Loading
Loading status checks…

909a471

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

Refactored helpers

4b4cac9

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

mtolmacs changed the title ~~Allow binding only via linear element ends~~ feat: Allow binding only via linear element ends Apr 24, 2024

vercel bot deployed to Preview – excalidraw-package-example April 24, 2024 16:12 View deployment

vercel bot deployed to Preview – excalidraw April 24, 2024 16:13 View deployment

vercel bot deployed to Preview – excalidraw-package-example-with-nextjs April 24, 2024 16:14 View deployment

mtolmacs self-assigned this Apr 24, 2024

Fix jumping arrows after shaft drag

2b0e910

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

vercel bot deployed to Preview – excalidraw-package-example April 24, 2024 17:09 View deployment

vercel bot deployed to Preview – excalidraw April 24, 2024 17:09 View deployment

vercel bot deployed to Preview – excalidraw-package-example-with-nextjs April 24, 2024 17:10 View deployment

Fix flashing arrow end on modifier + shape move close to arrow edge

0f2b18f

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

vercel bot deployed to Preview – excalidraw-package-example April 24, 2024 17:47 View deployment

vercel bot deployed to Preview – excalidraw April 24, 2024 17:47 View deployment

vercel bot deployed to Preview – excalidraw-package-example-with-nextjs April 24, 2024 17:48 View deployment

dwelle self-requested a review April 24, 2024 21:26

dwelle reviewed Apr 24, 2024

View reviewed changes

packages/excalidraw/components/App.tsx Outdated Show resolved Hide resolved

dwelle reviewed Apr 24, 2024

View reviewed changes

packages/excalidraw/element/binding.ts Outdated Show resolved Hide resolved

mtolmacs added 2 commits April 25, 2024 09:53

Refactor and fix for multi-selection binding band

df6c837

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

Factor bind candidate selection out of App.tsx

62e1d8a

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

vercel bot deployed to Preview – excalidraw-package-example April 25, 2024 08:27 View deployment

vercel bot deployed to Preview – excalidraw April 25, 2024 08:27 View deployment

vercel bot deployed to Preview – excalidraw-package-example-with-nextjs April 25, 2024 08:28 View deployment

Fixing arrow binding on key movement, resize, grouping, selection

c2ea373

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

vercel bot deployed to Preview – excalidraw-package-example April 25, 2024 11:12 View deployment

vercel bot deployed to Preview – excalidraw April 25, 2024 11:13 View deployment

Fix "jumping" arrow on bound alternative end of dragged end

c149f92

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

vercel bot deployed to Preview – excalidraw-package-example April 29, 2024 16:46 View deployment

vercel bot deployed to Preview – excalidraw April 29, 2024 16:46 View deployment

vercel bot deployed to Preview – excalidraw-package-example-with-nextjs April 29, 2024 16:47 View deployment

Fix multi-joint arrow binding strategy

b9e71a0

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

vercel bot deployed to Preview – excalidraw-package-example April 30, 2024 08:18 View deployment

vercel bot deployed to Preview – excalidraw April 30, 2024 08:19 View deployment

vercel bot deployed to Preview – excalidraw-package-example-with-nextjs April 30, 2024 08:20 View deployment

Satisfy snapshot tests

a4d632f

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

vercel bot deployed to Preview – excalidraw-package-example April 30, 2024 08:38 View deployment

vercel bot deployed to Preview – excalidraw April 30, 2024 08:38 View deployment

vercel bot deployed to Preview – excalidraw-package-example-with-nextjs April 30, 2024 08:39 View deployment

Merge branch 'master' into feat/disable-reverse-binding

460ecdb

vercel bot deployed to Preview – docs April 30, 2024 16:57 View deployment

vercel bot deployed to Preview – excalidraw April 30, 2024 16:59 View deployment

vercel bot deployed to Preview – excalidraw-package-example April 30, 2024 16:59 View deployment

vercel bot deployed to Preview – excalidraw-package-example-with-nextjs April 30, 2024 17:01 View deployment

dwelle added 2 commits May 1, 2024 23:40

unnecessary

6e95e32

(I think)

remove unused exported

05fa25b

(complexity goes brrrr)

dwelle approved these changes May 1, 2024

View reviewed changes

vercel bot deployed to Preview – excalidraw-package-example May 1, 2024 21:42 View deployment

vercel bot deployed to Preview – excalidraw May 1, 2024 21:42 View deployment

vercel bot deployed to Preview – excalidraw-package-example-with-nextjs May 1, 2024 21:44 View deployment

Adding sjoelee as a co-author

36655c1

Initial implementation of the idea comes from excalidraw#6947 Co-authored-by: Sammy Lee <sammy.joe.lee@gmail.com>

vercel bot deployed to Preview – excalidraw May 2, 2024 06:20 View deployment

vercel bot deployed to Preview – excalidraw-package-example May 2, 2024 06:20 View deployment

vercel bot deployed to Preview – excalidraw-package-example-with-nextjs May 2, 2024 06:22 View deployment

mtolmacs merged commit d9bbf1e into excalidraw:master May 2, 2024
9 checks passed

Mrazator reviewed May 24, 2024

View reviewed changes

boblehest mentioned this pull request Mar 17, 2025

Improve Arrow Binding UX #6685

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Allow binding only via linear element ends #7946

feat: Allow binding only via linear element ends #7946

mtolmacs commented Apr 24, 2024 •

edited

Loading

vercel bot commented Apr 24, 2024 •

edited

Loading

dwelle commented Apr 24, 2024

dwelle left a comment

Mrazator May 24, 2024

feat: Allow binding only via linear element ends #7946

feat: Allow binding only via linear element ends #7946

Conversation

mtolmacs commented Apr 24, 2024 • edited Loading

vercel bot commented Apr 24, 2024 • edited Loading

dwelle commented Apr 24, 2024

dwelle left a comment

Choose a reason for hiding this comment

Mrazator May 24, 2024

Choose a reason for hiding this comment

mtolmacs commented Apr 24, 2024 •

edited

Loading

vercel bot commented Apr 24, 2024 •

edited

Loading