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

Add method to api to expose mouse move on panning #167

Open
wants to merge 5 commits into
base: main
Choose a base branch
from

Conversation

wjdingman1
Copy link

Had a unique use case where we had to pan and zoom two separate images in unison.

This changes allows the user to get information about the movement of the mouse during a pan event so they can call sibling components and 'moveTo' that location.

@wjdingman1 wjdingman1 requested a review from anvaka February 6, 2020 17:55
@anvaka
Copy link
Owner

anvaka commented Feb 7, 2020

Would just listening to panstart and pan event work for your use case?

This seem equivalent:

let left = panzoom(document.querySelector('.left img'))
let right = panzoom(document.querySelector('.right img'));

let lastX = 0; let lastY = 0;
left.on('panstart', function(e) {
  let start = e.getTransform();
  lastX = start.x; lastY = start.y;
});

left.on('pan', function(e) {
  let current = e.getTransform();
  let dx = current.x - lastX;
  let dy = current.y - lastY;
  lastX = current.x;
  lastY = current.y;
  
  right.moveBy(dx, dy);
});

https://output.jsbin.com/betikus/2 - js fiddle to play.

@wjdingman1
Copy link
Author

wjdingman1 commented Feb 7, 2020 via email

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.

2 participants