GUI: Selector handle behavior

[uellue]

The selectors in the GUI behave oddly in some instances:

Drag and drop

Observed behavior: Quickly dragging outside the host panel drops the selector at some random position on the way. One has to click and drag it again to move it again. This behavior makes it difficult to move handles right to the border of the panel: They are always dropped a bit before. They can only be moved to the borders by keyboard.

Expected behavior: The selector is moved up to the boundary of the panel and remains dragging, i.e. is not dropped. It can be moved up to the border by mouse.

Keyboard interaction

Observed behavior: The selector handles for rectangular ROI can be moved out of the field of view by keyboard. They are then out of reach for mouse interaction.

Expected behavior: The selector handles behave like the center selector for Disk ROI, i.e. can be moved only to the corners by keyboard and mouse.

As a side note, it happens with the "Choose specimen region" of Region clustering analysis in the same way.

FFT analysis leftmost panel

Observed behavior: Both handles can be moved out of the panel by keyboard. They can't be moved back after they lost focus.

Expected behavior: They can be brought back or they can't be moved outside.

FFT analysis central panel

Moving the selectors feels more sluggish than with the other analyses.

[sk1p]

Expected behavior: The selector is moved up to the boundary of the panel and remains dragging, i.e. is not dropped. It can be moved up to the border by mouse.

There is a reason for the current behavior: a common behavior seen in dragging interfaces is that the user starts to drag something, moves the mouse outside of the "dragging area" over some unrelated element and stops dragging. The "mouse up" event goes to the unrelated element, which then may do whatever it wants, possibly swallowing the event. So the drag does not end, even though the mouse button is up. If you move the mouse over the dragging area again, it will continue dragging the element you grabbed.

That's why the drag is ended when the mouse leaves the dragging area - if you move it fast, you will only get a mouse event every N pixels, possibly with the last mouse event inside the area being some distance from the border. Maybe the mouseleave event can be used to move the draggable item exactly to the border?

Also, the dragging area could subscribe to mouse events that bubble up the DOM, to the top-level document element. But again, this then depends on all components/widgets/... cooperating and properly letting events bubble up.

Expected behavior: The selector handles behave like the center selector for Disk ROI, i.e. can be moved only to the corners by keyboard and mouse.

This is #436

[jhgee]

I noticed you can't move a rectangle to the corner

[ashwanthdurairaj]

Hi, I am Ashwanth. I am new to open source contribution. I would like to contribute to your organisation.
Is the issue still open? are there any prerequisites?
How and where should I start?
Thank you.

[sk1p]

@ashwanthdurairaj hi, welcome to the LiberTEM project! The issue is still open. As this is a problem in the user interface, a prerequisite is some knowledge of TypeScript and React. You can have a look at the handles, constraints and widgets in the widgets folder to begin. Also, you will need to set up a development environment and get LiberTEM running.

Feel free to also join our gitter channel, then we can have a chat!

[ashwanthdurairaj]

@sk1p thanks.
I'll look into it.