[x] 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
Open Apollon in Chrome
Add a few UML Elements to the canvas
Click somewhere on the canvas where there are no elements and drag the mouse to see the selection box
Drag the mouse to include the elements that you want to select
Release the click and all the elements in the selection box should be selected while the others should remain deselected
This PR is a port of the legacy PR https://github.com/ls1intum/Apollon/pull/290 to support our new editor state format and zooming the editor canvas.
Checklist
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:
Steps for Testing
Screenshots