Track mouse activity beyond the canvas

[haydn]

Objective

Move the onMouseMove, onMouseUp and onMouseDown event listeners to the root div in the Editor component.

Rationale

It's pretty common for a user to move the mouse beyond the canvas when panning or dragging to make a selection. Currently, if the user does this and then releases the mouse outside of the canvas they're left in a bit of a broken state.

Notes

We'll need to update canvas.current.getBoundingClientRect() to measure from the root div instead which means we'll also need to add a new ref for the editor (const editor = useRef(null); and ref={editor}).

[Mxchaeltrxn]

I don't really get the point of this feature. Could you tell me why you want it?

Also, I'm also not really sure how this'll work because currently the canvas treats x === 0, y === 0 (coordinates) as its upper left corner, which makes sense to me. How will this look after tracking mouse movement beyond the canvas?

[haydn]

Sorry, I need to put more details in these issues!

Currently, the onMouseMove event listener is setup on only the canvas (the middle column of the editor’s layout). If you start dragging (to pan the view, for example) and drag beyond the canvas you mouse movement is no longer tracked. Moreover, the onMouseUp event fill only fire if the mouse is over the canvas, so you can get stuck in the wrong mode if you drag outside of the canvas and then release the mouse button.

The solution here might be as simple as moving the event listeners to the root level div that wraps the editor.

[Mxchaeltrxn]

Sure I'll implement these changes after finishing the validation function issue