feat: add live mouse coordinate display to shape builder canvas

[jeetburman]

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

• This PR fixes Add Live Mouse Coordinate Display in Dashboard #95
• Theme styling follows existing patterns in the codebase
• Display is conditionally rendered (only visible on hover) to avoid clutter

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]

I request a review @leecalcote , @kishore08-07

[kishore08-07]

@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]

@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]

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]

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

[Rajesh-Nagarajan-11]

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]

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

[jeetburman]

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]

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

After.mp4

It is good to merge.

[Rajesh-Nagarajan-11]

Did you incorporate disable option for coordinates

[jeetburman]

Did you incorporate disable option for coordinates

No, I havent.

[jeetburman]

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

button.mp4

[Bhumikagarggg]

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