Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Improve ImageZoom target selection, dragging behaviour and selection frame styling

Open
  • Is something wrong?
#215 1 comment 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 2 days

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
52/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Quiet
Tech stack
typescript
Domain
frontend

Research direction

Start at the ImageZoom component and inspect its existing target-selection, mouse interaction, and selection-frame styling logic. Verify that clicks and held-button dragging inside the frame reposition the target continuously, and that the frame uses a neutral colour without changing the interface.

Written by the indexing model from the issue text.

Description

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.

Dominant language
TypeScript
Stars
9
Forks
3
Avg merge
6d 7h
Merged PRs (30d)
20

Getting set up

Open in Codespaces

Starts the project's dev container in your browser, under your own GitHub account.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from DiamondLightSource/sci-react-ui

All issues in DiamondLightSource/sci-react-ui

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.