[Grida Canvas] Better surface handle a11y - increase pointer event region

[softmarshmallow]

For starters, let's see how the surface works.

How surface works

We have surface renderer and content renderer, seperately.
this is due to 4 main reasons.

1. drawing overlay of a node, if drawn inside a content renderer, may impact the layout of the content.
2. in readonly or production mode, the entire surface can be turned off, or not even included.
3. the surface overlay should be always-visible, even if the node itself inside a content renderer is cliped or visually invisible (e.g. opacity 0)
4. the surface shall remain the same scale even as the zoom of the editor changes, we calculate each verticies and segments as a scaled value, then render with html, with scale 1.

Problem & Fix

Certain surface overlay accepts pointer events, this is to take or ignore the behind overlay layers.

The handle of a overlay has a same hit range and visible range, which makes users hard to interact with the surface easly.

We need to increase the actual size of the handle, while keeping the visual identical.

We can simply do this by adding a transparent area back on the controls.

The controls needs to be updated are..

• resize handle
• rotation handle (already invisible)
• path editor segments
• path editor verticies

Required, but in a seperate issue

For same reason, line and path nodes are hard to select. we need to increase the hit region for each, but in a bit more tricky way.