Skip to content

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