Zoom canvas

[yoonieaj]

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):

current output (zoomed out):

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:

• 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.
• I have updated the project Changelog (this is required for all changes).

After opening your pull request:

• I have verified that the CI tests have passed.
• I have reviewed the test coverage changes reported by Coveralls.
• 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?

[coveralls]

Pull Request Test Coverage Report for Build 10841705424

Details

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 89.799%

---

Totals
Change from base Build 10841698606:	0.0%
Covered Lines:	405
Relevant Lines:	435

---

💛 - Coveralls

[david-yz-liu]

I'm not totally convinced you need a div here, but if you want to keep it you should make its width style 100% to ensure it fills its parent

[david-yz-liu]

@yoonieaj good job. I left one more comment, and also don't forget to fill out the checklist.

[david-yz-liu]

Nice work, @yoonieaj!