Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Zooming #98

Closed
stevenpetryk opened this issue Jan 21, 2023 · 4 comments · Fixed by #103
Closed

Zooming #98

stevenpetryk opened this issue Jan 21, 2023 · 4 comments · Fixed by #103
Assignees
@stevenpetryk
Labels
feature-request New feature or request hacky-hour A simpler issue that someone might want to pick up during hacky hour :)
Milestone
v0.15.0

Comments

@stevenpetryk
Copy link
Owner

Let's let people pinch that canvas!
@stevenpetryk stevenpetryk added this to the v0.14.0 milestone Jan 21, 2023
@stevenpetryk stevenpetryk added the feature-request New feature or request label Jan 21, 2023
@stevenpetryk stevenpetryk self-assigned this Jan 21, 2023
@stevenpetryk stevenpetryk added the hacky-hour A simpler issue that someone might want to pick up during hacky hour :) label Jan 21, 2023
@stevenpetryk stevenpetryk modified the milestones: v0.14.0, v0.15.0 Jan 22, 2023
@Technologeek
Copy link

Technologeek commented Jan 22, 2023 •
edited
Loading

Hey @stevenpetryk Thanks for this great lib! Can we create this feature using something like this package? Or should we roll out our own gestures logic?

@stevenpetryk
Copy link
Owner Author

stevenpetryk commented Jan 22, 2023 •
edited
Loading

@Technologeek you can definitely roll your own with that! (I personally would use @use-gesture/react as that's what Mafs already uses internally, but you do you). To adjust "zoom" you can change the Mafs viewBox options (make sure to also "zoom" the padding).

However, worth pointing out that I am planning on building this today during Hacky Hour on the Mafs Discord (feel free to join 😄)

@Technologeek
Copy link

Haha alright! I guess I will pick some other issue for the weekend duties. I will join indeed thanks!

@stevenpetryk stevenpetryk mentioned this issue Jan 23, 2023
Merged
stevenpetryk added a commit that referenced this issue Jan 25, 2023
@stevenpetryk
Add support for zooming (#103)
7051e5a 
Closes #98.

Allows zooming via:

- Pinch on mobile devices (this was a tough one because it required
simultaneous zooming and panning, but only if `pan` hasn't been set to
false).
- Scrolling on desktop (but to avoid interrupting scrolling, there is a
500ms timeout where Mafs waits for scroll idle).
- Pinching on desktop (like with a trackpad).

This introduces a new matrix into Mafs' pile of matrices, `camera`,
which is used to transform `(xMin, yMin)` and `(xMax, yMax)`. This
counterintuitively means that translations and scaling are reversed—if
`camera` has a scale of 2, that's equivalent to being "zoomed 0.5x".
@stevenpetryk
Copy link
Owner Author

@Technologeek v0.15.1 now has zooming (docs). Enjoy!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@stevenpetryk stevenpetryk

Labels
feature-request New feature or request hacky-hour A simpler issue that someone might want to pick up during hacky hour :)
Projects
None yet
Milestone
v0.15.0
Development

Successfully merging a pull request may close this issue.

Add support for zooming stevenpetryk/mafs
2 participants
@stevenpetryk @Technologeek