Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Improve ImageZoom target selection, dragging behaviour and selection frame styling

Aperta
  • Qualcosa non va?
#215 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 7 giorni

Nessuno ha ancora preso questa issue.

Valutazione

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

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.

Descrizione

needs-triage priority: medium

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
  • No

Next steps

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

Lingua principale
TypeScript
Stelle
9
Fork
3
Merge medio
8g 6h
PR unite (30g)
28

Preparare l'ambiente

Apri in Codespaces

Avvia il container di sviluppo del progetto nel browser, con il tuo account GitHub.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di DiamondLightSource/sci-react-ui

Tutte le issue di DiamondLightSource/sci-react-ui

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.