search

hajicj / rhythmify_frontend

0 stars 1 forks source link

Make graph zoomable #29

Open hajicj opened 2 years ago

hajicj commented 2 years ago

It should be possible to zoom the graph in and out.

hajicj commented 2 years ago

I remembered I already did this! Adapted some panzoom component that was no longer maintained.

https://github.com/hajicj/volpiano-editor/tree/main/src/app/image-view/zoomable-canvas

hajicj commented 2 years ago

Also, the graph canvas should have a border.

hajicj commented 2 years ago

Requires refactoring the ZommableCanvas component to work with SVG inputs.

This can be done by passing the SVG as XML data to the src attribute of the HTMLImageElement that then gets drawn using context's drawImage() method (see: https://infoheap.com/html5-canvas-draw-image-using-svg-string/).

However, it requires a new component that wraps loading a new SVG onto the canvas.