Zoom canvas - Githubissues

yoonieaj commented 1 month ago

Proposed Changes

This pull request adds zoom capabilities to the output canvas using the react-pinch-pan-zoom library. This feature will improve ease of use of the website.

...

old output (no zoom in/out): ![image](https://github.com/user-attachments/assets/cb4f73ee-91b5-4f05-858c-b8ae89b2fdab) current output (zoomed out): ![image](https://github.com/user-attachments/assets/da25fa1d-af7d-40f4-aedb-b3e4f474f59b)

Screenshots

Type of Change

(Write an X or a brief description next to the type or types that best describe your changes.)

Type	Applies?
🚨 Breaking change (fix or feature that would cause existing functionality to change)
✨ New feature (non-breaking change that adds functionality)
🐛 Bug fix (non-breaking change that fixes an issue)
🎨 User interface change (change to user interface; provide screenshots)	X
♻️ Refactoring (internal change to codebase, without changing functionality)
🚦 Test update (change that only adds or modifies tests)
📚 Documentation update (change that only updates documentation)
📦 Dependency update (change that updates a dependency)	X
🔧 Internal (change that only affects developers or continuous integration)

Checklist

(Complete each of the following items for your pull request. Indicate that you have completed an item by changing the [ ] into a [x] in the raw text, or by clicking on the checkbox in the rendered description on GitHub.)

Before opening your pull request:

[x] I have performed a self-review of my changes.
- Check that all changed files included in this pull request are intentional changes.
- Check that all changes are relevant to the purpose of this pull request, as described above.
[ ] I have added tests for my changes, if applicable.
- This is required for all bug fixes and new features.
[ ] I have updated the project documentation, if applicable.
- This is required for new features.
[ ] If this is my first contribution, I have added myself to the list of contributors.
[x] I have updated the project Changelog (this is required for all changes).

After opening your pull request:

[x] I have verified that the CI tests have passed.
[x] I have reviewed the test coverage changes reported by Coveralls.
[x] I have requested a review from a project maintainer.

Questions and Comments

Hi Professor, currently there are small margins on the left/right edges of the output box (I included a screenshot below). I couldn't figure out how to get rid of them - changing component widths didn't seem to work. Do you have any suggestions on next steps I can try?

![image](https://github.com/user-attachments/assets/507114f3-e37b-4d3a-aa5f-736ba5f25ae6)