ls1intum / Apollon

UML Modeling Editor written in React
https://apollon-library.readthedocs.io
MIT License
65 stars 22 forks source link

Add mouse event listener with selection box feature #290

Closed cristiancreteanu closed 8 months ago

cristiancreteanu commented 1 year ago

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

  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

grafik

grafik

krusche commented 10 months ago

@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 commented 8 months ago

Closing in favor of https://github.com/ls1intum/Apollon/pull/332