Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Improve ImageZoom target selection, dragging behaviour and selection frame styling

Abierto
  • ¿Algo no está bien?
#215 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 2 días

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
52/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Tranquilo
Stack tecnológico
typescript
Área
frontend

Línea de trabajo

Comienza por el componente ImageZoom e inspecciona la lógica existente de selección del objetivo, interacción con el ratón y estilo del marco de selección. Verifica que los clics y el arrastre manteniendo pulsado el botón dentro del marco reposicionen el objetivo continuamente, y que el marco use un color neutro sin cambiar la interfaz.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
9
Forks
3
Merge medio
6 d 7 h
PR fusionados (30 d)
20

Preparar el entorno

Abrir en Codespaces

Inicia el contenedor de desarrollo del proyecto en tu navegador, con tu propia cuenta de GitHub.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de DiamondLightSource/sci-react-ui

Todos los issues de DiamondLightSource/sci-react-ui

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.