Add mouse event listener with selection box feature

[cristiancreteanu]

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

[mertyldrr]

The selection box feature looks very cool. Nice work! We need to make sure modeling tests in Artemis are not affected by the updated selected state. If so, we need to fix them as well.

[AlexanderG2207]

Excellent feature, well done! I tested it locally, and everything works as expected, including some edge cases I tried.

The only thing I would add is more tests for the new feature, as the test coverage could be higher. Also, if applicable, the modeling tests in Artemis should be adjusted, as mentioned by @mertyldrr.

File	% Stmts	% Branch	% Funcs	% Lines	Uncovered Line #s
mouse-eventlistener.tsx	50	66.66	44.44	50	90-104,114-155,162-179,187-203,213-239,246-256

[krusche]

@AlexanderG2207 @matthiaslehnertum unfortunately, the author is not part of the team anymore.
Can someone of you take over this PR and finish it after fixing the merge conflicts? Thank you!

[matthiaslehnertum]

Closing in favor of #332