[Layout Engine] Feat: add self-snapping of canvas elements

[monfera]

Closes #23978

Summary

Now, when dragging or resizing a Canvas element, its landmark points snap to landmark X/Y values of other shapes. So far, however, the element hasn't snapped to its former self. Reasons for adding self-snapping with this PR:

1. Comparable software does it too
2. A main purpose is that an element selection do not introduce an accidental drag of a couple of pixels
3. It's also good to let users exactly reposition the element to its original place (without relying undo, ie. another way for achieving a rollback)
4. Often, the user may want to purposefully move the element such that only the X or Y values would change; we'll eventually have a modifier key but it helps to have this means too

As with snapping in general, it can be deactivated with Command on the mac or Alt on the PC (the snap lines still show).

A future PR may add an actual indicator border for the former place of the element. But it'd be useful to merge as is, because every accidental minor drag&drop incurred on element selection incurs network traffic. So this issue partly addresses performance issues reported by @timroes

cc: @ryankeairns @alexfrancoeur

Checklist

Use strikethroughs to remove checklist items you don't feel are applicable to this PR.

• This was checked for cross-browser compatibility, including a check against IE11
  - [ ] Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
  - [ ] Documentation was added for features that require explanation or tutorials
  - [ ] Unit or functional tests were updated or added to match the most common scenarios
  - [ ] This was checked for keyboard-only and screenreader accessibility

For maintainers

- [ ] This was checked for breaking API changes and was labeled appropriately
- [ ] This includes a feature addition or change that requires a release note and was labeled appropriately

[elasticmachine]

Pinging @elastic/kibana-canvas

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[ryankeairns]

This works as described and is a nice addition.

In other vector editing tools, I've seen the ability to toggle the guides while dragging which is how I expected this to work (i.e. select, drag, then press Command to disable while dragging), whereas here you must press Command before you select/drag. I don't feel strongly enough that I would propose changing it, but perhaps others who review this will have an opinion.

[monfera]

@ryankeairns thanks, valid point! I noticed too that it works this way, not just for self-snapping, but for snapping in general, which is, as you say, not as good.

Since this issue is independent of this PR, I'm planning to improve on this via a subsequent, independent PR. In short, making snapping behave the same way eg. the toggle between centered and normal resize works: I'll add it to the description for follow-up work.

I just re-tested, it looks like the snap / no-snap behavior actually gets toggled, but it's only apparent once you then subsequently moved the mouse at least a little bit. The problem is that in JavaScript it's not possible to get a list of what keyboard buttons are down at a given time; I added state for that, but it got removed recently. I'm planning to add it back for this use case but as it's a smaller thing relative to this, and impacts the gesture handling (not the layouting as this PR), the plan is to make it a separate PR.

[alexfrancoeur]

Beautiful @monfera, I just tried it out. LGTM

[rashidkpc]

Nice change, ship it.

[monfera]

@rashidkpc @timroes should it be backported to 6.5 and 6.x?

[rashidkpc]

6.x yes, 6.5 no. 6.5 should be limited to bug fixed