Skip to content

feat: add live mouse coordinate display to shape builder canvas #107

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
jeetburman wants to merge 8 commits into
base: master
Choose a base branch
from
Open

feat: add live mouse coordinate display to shape builder canvas #107

jeetburman wants to merge 8 commits into from

Conversation

@jeetburman
Copy link

@jeetburman jeetburman commented Dec 20, 2025 •
edited
Loading

Description

This PR adds a live mouse coordinate display to the shape builder canvas that shows real-time X/Y coordinates as users move their mouse over the grid. This enhancement improves the user experience by providing precise position feedback during shape creation.

Related Issue

Fixes #95

Changes Made

  • Added real-time coordinate tracking on mouse movement
  • Display shows coordinates (-1 to 1 range) matching the polygon output format
  • Pixel coordinates shown for reference
  • Coordinate display only visible when mouse hovers over canvas (non-intrusive)
  • Works in both light & dark mode
  • Kept it in the top-right corner
  • Smooth show & hide transitions on mouse enter & leave
  • Dynamic center calculation based on canvas size

New Component:
CoordinateDisplay

Coordinate Normalization:

  • Dynamic center calculation: centerX = rect.width / 2, centerY = rect.height / 2
  • Normalization formula: (x - centerX) / centerX for -1 to 1 range
  • 3 decimal precision for accuracy

Current Behavior vs New Behavior

Before:

  • Users had no way to see exact pointer positions while creating shapes
  • Difficult to place points precisely
Before.mp4

After:

  • Users can see precise coordinates (-1 to 1)
  • Pixel coordinates provided for reference
After.mp4

Testing Performed

Isnt breaking any existing functionality as per my knowledge. Pls let me know if something breaks.

Files Modified

  • site/src/components/ShapeBuilder/index.js - Added coordinate tracking logic and display component
  • site/src/components/ShapeBuilder/shapeBuilder.styles.js - Added CoordinateDisplay styled component

Notes for Reviewers

Signed commits

  • Yes, I signed my commits.

Checklist:

  • Code follows project style guidelines
  • Changes tested locally in both themes
  • No breaking changes
  • All existing features work correctly
  • Linting passes without errors
  • Commit message follows conventional commits format
  • PR description is clear and complete with screenshots

@jeetburman
feat: add live mouse coordinate display to shape builder canvas
dc3c0f8 
- Add real-time coordinate tracking on mouse movement
- Display normalized coordinates (-1 to 1 range) matching polygon output
- Show pixel coordinates for reference
- Coordinate display only visible when mouse hovers over canvas
- Theme-aware styling adapts to light/dark modes
- Non-intrusive positioning in top-right corner
- Smooth show/hide transitions on mouse enter/leave

Fixes meshery-extensions#95
@jeetburman
Copy link
Author

jeetburman commented Dec 20, 2025

I request a review @leecalcote , @kishore08-07

@kishore08-07
Copy link
Contributor

kishore08-07 commented Dec 22, 2025

@jeetburman
Thank you for your contribution!
Let's discuss this during the website call today at 6:30 PM IST | 8 AM CT
Add it as an agenda item to the meeting minutes, if you would :)

@jeetburman
Copy link
Author

jeetburman commented Dec 22, 2025

@jeetburman Thank you for your contribution! Let's discuss this during the website call today at 6:30 PM IST | 8 AM CT Add it as an agenda item to the meeting minutes, if you would :)

I have added my agenda in the meeting minutes. I will present what I have worked on.

@jeetburman
refactor: make coordinate display follow cursor
426c9c0 
- Coordinate display now follows mouse cursor instead of fixed position
- Removed pixel coordinates, showing only normalized X,Y values
- Changed from fixed top-right position to cursor-relative positioning
- Uses SVG-relative coordinates (x,y) instead of screen coordinates
- Maintains smooth 15px offset to prevent blocking cursor
- Simplified to single-line format: 'X: 0.234, Y: -0.567'

Based on team feedback from code review
@jeetburman
Copy link
Author

jeetburman commented Dec 23, 2025

Update: Coordinate Display Now Follows Cursor

Thanks for the feedback during the meeting...

Changes Made

Before:

  • Fixed position in top-right corner
  • Showed both normalized and pixel coordinates
  • Multi-line format with labels

After:

  • Follows mouse cursor with smooth offset
  • Shows only normalized X, Y coordinates
  • Single-line compact format: X: 0.234, Y: -0.567
  • Uses SVG-relative positioning for accurate placement
  • Non-intrusive with pointer-events: none

Testing Done

  • Display follows cursor smoothly across canvas
  • Coordinates update in real-time
  • Center shows (0, 0), corners show ±1
  • Works in both light and dark themes
  • Doesn't interfere with drawing (pointer-events: none)
  • All existing features work (draw, clear, undo, maximize, copy)

Notes for Reviewer

  • The coordinates component maintains distance (currently 15px). I can change it with further discussions.
  • I have kept a delay transistion of 0.05seconds which can also be changed or removed completely if needed.

Demo

NewPR.mp4

@jeetburman
Copy link
Author

jeetburman commented Dec 23, 2025

I request a review @Rajesh-Nagarajan-11 @kishore08-07

@Rajesh-Nagarajan-11
Copy link
Member

Rajesh-Nagarajan-11 commented Dec 24, 2025

Yeah, it’s looking good, but the coordinates still aren’t following the cursor properly. I think removing the transition might fix it. // @jeetburman

Rajesh-Nagarajan-11
Rajesh-Nagarajan-11 suggested changes Dec 24, 2025
View reviewed changes
Copy link
Member

@Rajesh-Nagarajan-11 Rajesh-Nagarajan-11 left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

check with remove the transistion or reduce the seconds and distance to make it more live

@jeetburman
Copy link
Author

jeetburman commented Dec 24, 2025

check with remove the transistion or reduce the seconds and distance to make it more live

Will do during today's meeting, testing it live.

@jeetburman
Copy link
Author

jeetburman commented Dec 25, 2025

Hey @Rajesh-Nagarajan-11 , I have removed the delay.

After.mp4

It is good to merge.

@Rajesh-Nagarajan-11
Copy link
Member

Rajesh-Nagarajan-11 commented Dec 25, 2025

Did you incorporate disable option for coordinates

@jeetburman
Copy link
Author

jeetburman commented Dec 25, 2025

Did you incorporate disable option for coordinates

No, I havent.

@jeetburman
feat: add toggle button to enable/disable coordinate display
b0c8269 
- Added showCoordinates state (default: true)
- Added toggle button in toolbar with contained variant
- Button label updates dynamically between Hide/Show Coordinates
- Coordinates only display when both hovering and toggle enabled
- Preserves all existing functionality
@jeetburman
Copy link
Author

jeetburman commented Dec 25, 2025 •
edited
Loading

This is how it looks... Nothing breaks... Pls review @Rajesh-Nagarajan-11

button.mp4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

2 more reviewers

@kishore08-07 kishore08-07 kishore08-07 approved these changes

@Rajesh-Nagarajan-11 Rajesh-Nagarajan-11 Rajesh-Nagarajan-11 approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

component/extensions component/ui Meshery UI related

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Add Live Mouse Coordinate Display in Dashboard

4 participants

@jeetburman @kishore08-07 @Rajesh-Nagarajan-11 @saurabhraghuvanshii