Holding alt when component is selected shows distance to parent or hovered element

[sudara]

This is a direct copy of behavior in Figma. Happy to provide an example file for exploring and matching behavior.

Basically, this changes the behavior of the overlay when alt is held

Spacing to parent

When

1. a component is selected
2. hovering over self or parent

then show spacing to parent.

• Additional red outline around selected component
• A red line connects the midpoint of each components side to the parent (so, in all 4 directions)
• Red backgrounded labels midway on each line displaying distance in logical pixels

Spacing to hovered element

When

1. a component is selected
2. hovering over another component

Show spacing to hovered element.

This requires:

• Red bounding boxes on selected AND hovered component
• Determining if vertical or horizontal line is best
• Line from middle of source element edge (as usual)

• In the case that the elements only connect diagonally, draw dotted line at right angle to target

• 

[dikadk]

I've been making some progress on this one. WIP demo

https://user-images.githubusercontent.com/15266737/207496398-5981dc7c-9d8c-4472-86f3-d2e0ceddddc6.mov

[sudara]

This is such an awesome feature