Add support for box selection

[matthiaslehnertum]

This PR is a port of the legacy PR #290 to support our new editor state format and zooming the editor canvas.

Checklist

• I added multiple screenshots/screencasts of my UI changes

Motivation and Context

This PR provides the implementation of a selection box using the cursor in order to select multiple elements without the use of the keyboard.

Description

Every time the user clicks OUTSIDE an element, the selection box is created. In order for it to become visible, the user needs to drag the cursor. An element needs to be contained FULLY within the selection box for it to be selected when the selection box is released (i.e. the click/drag action is over). This feature also works when pressing the SHIFT key without deselecting the already selected items.

If the user's cursor goes outside the scope of the canvas while the selection box is active, the selection box will "freeze", but it will continue when the cursor comes back to the canvas. If the user releases the click while the cursor is outside the canvas and they return to the canvas, the selection box will remain active; clicking again will "resume" the selection box and the user can continue to drag the cursor in order to change the already active selection box before releasing it.

Adjustments:

• hovering is disabled when the selection box is active
• the cursor shape normally changes to sizeall (pointer: 'move') when hovering over the inside of an element - disabled while selection box is active
• the cursor shape normally changes to sizenesw/sizenwse when hovering over the edges of an element - disabled while selection box is active

Steps for Testing

1. Open Apollon in Chrome
2. Add a few UML Elements to the canvas
3. Click somewhere on the canvas where there are no elements and drag the mouse to see the selection box
4. Drag the mouse to include the elements that you want to select
5. Release the click and all the elements in the selection box should be selected while the others should remain deselected

Screenshots

[loreanvictor]

The change works as intended, though I feel it lacks test coverage? Besides that at least one of the changes (about unmounting) can potentially lead to memory leaks in future (listeners not being cleaned up). The rest are UX improvements that I think are important but also could be done iteratively in subsequent PRs.