DiamondLightSource / DiamondLightSource/sci-react-ui

Improve ImageZoom target selection, dragging behaviour and selection frame styling

Aperta
#215 1 commento 0 reazioni 0 assegnatari Vedi su GitHub
needs-triage priority: medium
Lingua principale
TypeScript
Stelle
8
Fork
3
Merge medio
3g 15h
PR unite (30g)
5

Descrizione

# Change Proposal: Improve ImageZoom target selection, dragging behaviour, and selection frame styling

## What is being proposed?

Update `ImageZoom` so the zoom target can be changed by clicking anywhere inside the selected frame, updated continuously while dragging the mouse (clicking and moving with the mouse button held down), and displayed using a more neutral selection frame colour.

## Why is this needed?

Currently, when the user clicks inside the selected frame but on a different point, the zoom target does not update.

To select a nearby point, the user has to click outside the box first, then click the desired spot. This makes precise zoom targeting feel awkward and less intuitive.

The current behaviour is also limiting when the user wants to refine the zoom target by dragging. Once a frame is selected, moving the mouse while holding the button down does not continuously reposition the target, making it harder to quickly explore nearby areas and find the exact point of interest.

For clarity, this proposal refers specifically to dragging (click-and-move), not simply moving the mouse cursor over the image.

In addition, the current red selection frame may imply an error, warning, or invalid state. Since the frame represents a normal interaction state, a more neutral colour would better align with common UI expectations and reduce unnecessary visual emphasis.

## What will change?

Behaviour:
- The zoom target should update when the user clicks a new point inside the current frame
- The zoom target should update continuously while the user drags the mouse within the frame (with the mouse button held down)

Visuals:
- Replace the current red selection frame with a more neutral colour.
- The current red styling may imply an error or warning state, whereas the selection frame represents a normal interaction state.
- A neutral colour would better align with common UI expectations and reduce unnecessary visual emphasis.

## Interface changes (if any)

No interface changes are expected.

## Breaking change?

- [ ] Yes
- [X] No

## Next steps
A maintainer will review this issue.
If accepted, it will be marked as `accepted` and a PR may then be opened.

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia dal componente ImageZoom e ispeziona la logica esistente di selezione del target, interazione con il mouse e stile del riquadro di selezione. Verifica che i clic e il trascinamento tenendo premuto il pulsante all’interno del riquadro riposizionino continuamente il target e che il riquadro utilizzi un colore neutro senza modificare l’interfaccia.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
typescript
Ambito
frontend
Tipo di issue
Funzionalità
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Tranquilla
Chiarezza
Abbastanza chiara
Idoneità per principianti
52/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.