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.

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

feat: enable to zoom viewport with pinch #22

Merged
merged 7 commits into from
Apr 20, 2018
Merged

feat: enable to zoom viewport with pinch #22

merged 7 commits into from
Apr 20, 2018

Conversation

ktsn
Copy link
Owner

@ktsn ktsn commented Apr 10, 2018

This PR allows to zoom the viewport scale by trackpad pinchin / pinchout. It also adds a scale input on toolbar which works as same as size field on the toolbar.

To detect the user pinches a trackpad, we can use wheel event with ctrl key is pressed.
https://medium.com/@auchenberg/detecting-multi-touch-trackpad-gestures-in-javascript-a2505babb10e

We also need to improve scrolling renderer area (#20). Currently, when it is zoomed in larger than viewport, we cannot see the top of the viewport.

@ktsn
Copy link
Owner Author

ktsn commented Apr 19, 2018

Included #24.

It is almost implemented but there is still a bug which the renderer scrolling content is unexpectedly larger than expected size.
Also I want to round size and scale value for readability.

@ktsn
Copy link
Owner Author

ktsn commented Apr 19, 2018

a bug which the renderer scrolling content is unexpectedly larger than expected size.

This looks like Chromium bug. Safari and Firefox don't occur this problem.

@codecov
Copy link

codecov bot commented Apr 20, 2018

Codecov Report

Merging #22 into master will decrease coverage by 0.07%.
The diff coverage is 61.53%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master      #22      +/-   ##
==========================================
- Coverage   65.13%   65.06%   -0.08%     
==========================================
  Files          44       44              
  Lines        1394     1414      +20     
  Branches      327      329       +2     
==========================================
+ Hits          908      920      +12     
- Misses        471      479       +8     
  Partials       15       15
Impacted Files Coverage Δ
src/view/components/PageMain.vue 0% <ø> (ø) ⬆️
src/utils.ts 89.47% <0%> (-4.98%) ⬇️
src/view/store/modules/viewport.ts 0% <0%> (ø) ⬆️
src/view/components/Renderer.vue 96.96% <100%> (+0.54%) ⬆️
src/view/components/Toolbar.vue 93.75% <100%> (+3.75%) ⬆️
src/view/components/Viewport.vue 60% <33.33%> (-40%) ⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b99f861...10f3bb0. Read the comment docs.

@ktsn ktsn changed the title [WIP] feat: enable to zoom viewport with pinch feat: enable to zoom viewport with pinch Apr 20, 2018
@ktsn ktsn merged commit fbf8156 into master Apr 20, 2018
@ktsn ktsn deleted the zoomable branch April 20, 2018 04:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant