Fix pinch zoom Y-axis and centering (fixes #876)

[Nakshatra480]

Fixes #876

Describe the changes you have made in this PR -

This PR addresses issues with the pinch-to-zoom functionality in the simulator. The previous implementation had calculation errors that caused the view to jump or zoom incorrectly, particularly affecting the Y-axis and centering.

Key fixes included:

• Corrected the Euclidean distance calculation for pinch detection (fixed a syntax error where a comma was used instead of +).
• Fixed a variable reference error where globalScope.ox was being used for Y-axis calculations instead of globalScope.oy.
• Updated the origin calculation logic to use incremental updates based on the scale delta. This ensures the view zooms smoothly towards the center of the pinch gesture rather than jumping to a new position.

Testing of the UI changes (If any) -

Screen.Recording.2026-02-10.at.2.00.43.PM.mov

---

Code Understanding and AI Usage

Did you use AI assistance (ChatGPT, Claude, Copilot, etc.) to write any part of this code?

• No, I wrote all the code myself
• Yes, I used AI assistance (continue below)

If you used AI assistance:

• I have reviewed every single line of the AI-generated code
• I can explain the purpose and logic of each function/component I added
• I have tested edge cases and understand how the code handles them
• I have modified the AI output to follow this project's coding standards and conventions

Explain your implementation approach:
I focused on debugging the listeners.js file where touch events are handled. After identifying that the math for the pinch distance was incorrect, I fixed the formula. I then realized the zooming wasn't centered around the user's fingers, which led me to find the incorrect usage of ox instead of oy. Finally, I adjusted how the global origin is updated—instead of absolute assignment, I implemented a relative shift based on the difference between the new and old scale, which preserves the visual center of the zoom.

---

Checklist before requesting a review

• I have added proper PR title and linked to the issue
• I have performed a self-review of my code
• I can explain the purpose of every function, class, and logic block I added
• I understand why my changes work and have tested them thoroughly
• I have considered potential edge cases and how my code handles them
• If it is a core feature, I have added thorough tests
• My code follows the project's style guidelines and conventions

[netlify]

✅ Deploy Preview for circuitverse ready!

Name	Link
🔨 Latest commit	3772e34
🔍 Latest deploy log	https://app.netlify.com/projects/circuitverse/deploys/697ba07b4539e90008df0d52
😎 Deploy Preview	https://deploy-preview-892--circuitverse.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 46 (🟢 up 2 from production) Accessibility: 73 (no change from production) Best Practices: 92 (no change from production) SEO: 82 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Walkthrough

The changes fix the pinch-to-zoom functionality in the simulator's event listener by correcting three calculation errors. The distance calculation for pinch detection is fixed from a comma-separated expression to a proper sum of squares formula. The Y-coordinate reference in center calculations is corrected from globalScope.ox to globalScope.oy. Additionally, the origin update logic is changed from direct assignment to incremental subtraction operations, making the calculations depend on the delta between new and old scale values. The public API signature remains unchanged, with all modifications isolated to internal state calculations.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title directly and concisely describes the main change: fixing pinch zoom Y-axis and centering behavior, matching the primary objective from issue #876.
Linked Issues check	✅ Passed	The PR successfully addresses all coding requirements from issue #876: correcting Y-coordinate calculation using globalScope.oy, fixing distance calculation with proper dx² + dy² computation, and updating origin behavior to match changeScale behavior.
Out of Scope Changes check	✅ Passed	All changes in listeners.js are directly related to fixing the pinch-zoom behavior described in issue #876, with no extraneous modifications detected.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Nakshatra480]

Hi @Nihal4777 just a quick reminder, PR is ready pls review it
thanks for your time

[Radhikaa-chauhan]

Hi @Nakshatra480 ,
Thanks for the PR! Could you please update the PR description to align with the standard template and request a review afterward?
Appreciate your effort.

[Radhikaa-chauhan]

Also include valid proof for the changes before requesting a review

[Nakshatra480]

@Radhikaa-chauhan now the the description is fine?
thanks for your feedback