[Canvas] Document editing interactions

[monfera]

We've been adding features but testing and documentation is lagging a bit. This is an incomplete, unstructured WIP collection of what interactions to test and expect, whether automated or manual. These features are taken for granted by users of presentation editing software and graphic designers. In the initial round it contains a couple of less obvious design choices.

The hover box must be visible even if the element is partly occluded:

The resize/rotate annotations must also be visible and operable, even when the element is not on top:

Simultaneously holding the Meta key suspends the snapping:

Snapping works not just for moving around but also for resizing, eg. for a tiled view:

Snapping is trickier to implement for the case of a rotated element for moving, but esp. for resize:

Rotation, when the mouse is close to the center, is by 15 degrees, but at a longer distance, the snapping allows finer adjustments (like in Ai); or holding the Command key will deactivate snapping:

A "selection box", now looking identical to the hover box, is also needed when selecting multiple elements, otherwise it's not clear what elements are included inside the selection bounding box:

The mouse pointer arrow direction needs to change according to possible rotation of the element, eg. the initial diagonal arrow turns to a horizontal arrow on rotation:

Element selection works by calculating the intersection of a ray perpendicular to the screen from the mouse x, y position and the elements it hits, yielding the closest hit (3D is not exposed yet but this shows a general case):

One of the many reasons for calculating the intersection, rather than relying on the DOM is to be able to select elements underneath other elements:

Besides eg. bringing a depth selected element forward, it's also possible to move while fully occluded (currently this requires depth select and hold):

Box select coming up:

Grouping must be responsive, in this case, preserve the x/y space ratios within the group:

Centered resize, combined with snapping, helps elements remain in their desired position while resizing:

Centered resize should also work for groups:

Copy-paste via shortcuts:

Snapping can be made permanent (it's currently not enabled, though groups are like persistent x/y snaps):

[elasticmachine]

Pinging @elastic/kibana-docs

[elasticmachine]

Pinging @elastic/kibana-canvas

[bhavyarm]

Thanks @monfera This is very helpful!