zoom key?

[mattvenn]

maybe a way to have a 'bigger' canvas is just make it easier to draw small.
this design by Daniel shows how small you can go with care: https://twitter.com/ea4gpz/status/1624701599640612865

so maybe z for zoom and where the mouse is will double or triple in size.

[urish]

zooming is part of #4 - so if we want to track those feature as individual issues (which I think is better), let's close that issue.

Regarding zoom key - do you want Siliwiz to eventually be useful on tablets? In that case, we need to design features like zooming with touch screen in mind.

Also:

1. should zooming affect the cross section view?
2. how do you zoom out?
3. do we want to support panning while you are zoomed-in?

[seveibar]

Hello everyone! Been looking at this today and can have a PR shortly. Some initial thoughts for what I'm thinking:

• The main implementation probably would be in this Canvas.tsx file (which is already very clean)
• My favorite simple pattern for affine transforms (zoom and pan) is to combine use-mouse-matrix-transform and transformation-matrix. As the mouse pans or zooms, you're given a matrix which can transform svg elements from "real coordinates" into "screen coordinates"
• An alternative is to alter the viewbox of the svg as the user pans/zooms around. Although this approach gets you 50% of the way quickly, it means that you often can't easily have "non-transformed" elements such as text that should remain at a fixed size even as the user zooms (tooltips etc.). The code currently lends itself to this approach so I can try it out!

[urish]

Thanks for looking into this. I think going with the affine transforms is probably the best way to go.

At some point we'll probably want to keep the labels large enough to read when zooming out and not huge when zooming in:

and the ruler at the bottom has to keep the same size even when we zoom (we only want the units to change):

One important thing to notice before using use-mouse-matrix-transform, is that the project is written using Solid and not React, and while both use JSX, there are a few significant differences in how they handle reactivity (in a super nutshell - Solid only runs your component code once, and uses a build-time transform to enable updating only the relevant DOM node in case the props / data changes)

[seveibar]

Haha thanks @urish i did indeed mistake the Solid for React. I'm not super familiar with Solid but I rewrote use-mouse-matrix-transform in solid to familarize myself (repo) (example). Will try to integrate next!