[experiment] Arrow snapping behavior

[ds300]

When I'm drawing diagrams I find that arrows snap a lot of the time when I don't want them to.

They often snap into states that aren't even close to what I was trying to achieve.

This PR tries to capture the intuition that if applying a snap makes the arrow shape wildly different than it was before, it's probably better not to snap.

Give it a go and lemme know how it feels.

Change Type

• patch — Bug fix
• minor — New feature
• major — Breaking change
• dependencies — Changes to package dependencies¹
• documentation — Changes to the documentation only²
• tests — Changes to any test code only²
• internal — Any other changes that don't affect the published package²
• I don't know

Test Plan

1. Add a step-by-step description of how to test your PR here.

• Unit Tests
• End to end tests

Release Notes

• Add a brief release note for your PR here.

Footnotes

1. publishes a patch release, for devDependencies use internal ↩

2. will not publish a new version ↩ ↩² ↩³

[vercel]

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

Name	Status	Preview	Updated (UTC)
examples	✅ Ready (Inspect)	Visit Preview	Mar 8, 2024 7:32am
tldraw-docs	✅ Ready (Inspect)	Visit Preview	Mar 8, 2024 7:32am

[MitjaBezensek]

I also share the frustration with arrows in cases like these. In general this feels a step in the right direction.

I did find two kind of weird cases.

1. It feels strange that the starting position changes when I'm on the other side, adjusting the ending position. To me the start was already set and where I wanted it to be, this is why I proceeded to position the end. But then when you reach certain angles (I guess) it starts adjusting the start.

CleanShot.2024-02-23.at.16.56.08.mp4

2. The centre of the shape kinda feels special? It feels like the arrows work differently when you want to bind the arrows near them. I easily created these arrows I wanted on the top and bottom parts of the shapes, but once I got close to the centre it felt like it was trying to work against me.

CleanShot.2024-02-23.at.17.03.07.mp4

Not sure if you already take proximity into account, but maybe there should additional weight if you start / end arrows near the edges of the shape?

[ds300]

maybe there should additional weight if you start / end arrows near the edges of the shape?

yeah agreed. i think if we can couple that with more nuanced hinting we can get something that feels really good.

[mimecuvalo]

i'd love for this to be behind an experiment to play around with! i think i'd need to live with it for a while to see how it feels in general.

[steveruizok]

I've started working through this. Core idea is interesting: should we make an arrow "imprecise" (pointing to the center) based on similarity of direction between line and center, i.e. is the user pointing toward the center or something else?

There are a few other changes in this PR that make the question more complicated.

Start / create arrows

For example, a "create" arrow's "start" binding also binds in this way:

...and is also influenced by the user's current modifier state.

Previously, I'd had the start arrow decision be made at the start, based on the user's action (modifiers, plus a pause indicating precision), and from there all modifiers effected only the end handle. I'd like to keep this focus on the end handle during a create phase, because alternatives felt (and feel in this PR) like modifying / re-writing a user's past decision. It's one of the more finer details in the app's interactions but important.

more to come

[steveruizok]

Looking at the shouldSnap logic, I'm almost certain that what we're really after is "does the ray from the start to the end pass within X distance from the center of the shape?"

function shouldSnap(fromPoint: VecLike, toPoint: VecLike, toPointSnapped: VecLike) {
	return (
		Vec.DistanceToLineSegment(
			fromPoint,
			Vec.Sub(toPoint, fromPoint).uni().mul(1000000).add(fromPoint),
			toPointSnapped
		) < MIN_DISTANCE_TO_CENTER_BIND
	)
}

[steveruizok]

We could modulate that distance based on the pointer velocity.