michaschwab / easypz

Easy Pan and Zoom JS Library

EasyPZ

Use this Javascript library to make your web visualization interactive via pan and zoom, for mobile and desktop!

EasyPZ supports many interactions for panning and zooming, including wheel, pinch, double click, hold, brush, rub, and dynamic zoom, panning methods including default, flick, and many variations.

Many examples can be found at easypz.io, including examples using d3, and examples that use canvas instead of SVG. Examples from the d3 gallery that just magically turn into navigatable visualizations without a single line of code can be found at demos.easypz.io.

Instructions on how to use EasyPZ, explanations for the many options, as well as how to extend EasyPZ with your own pan or zoom method, can be found in the Wiki!

Changelog

1.1.10

• Improve detection of preexisting transformations and reduce error logs.

1.1.9

• Add the removeHostListeners method to allow removing EasyPZ's event listeners.

1.1.8

• Allow passing easypz settings via the new data-easypz attribute to be more W3C compliant.

1.1.7

• Basic support for rotate, skewX and skewY, and two different scales for X and Y.
• Add a new zoom method: shift drag zoom.

1.1.5

• Allowed switching between mouse- and touch-based interactions on hybrid devices.

1.1.3

• EasyPZ instances now check if new modes of pan and zoom are available when settings change.

1.1.2

• Allowed disabling EasyPZ by setting the enabled modes to an empty list.

1.1.1

• Added a .setSettings method to EasyPZ to allow changing settings.
• Changes in the settings set via HTML are now detected and applied to EasyPZ using the .setSettings method.
• Increased the frequency of the settings observation from 2s to 0.5s.

1.1.0

• Made the default functionality to be applyTransformTo: "svg > *" for when the easypz attribute is not set.

Known Issues

Currently none.

Licence

ISC License (ISC)

Copyright 2019 Michail Schwab

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

easypz's Issues

Does it work on html elements

Does it work on HTML elements or just on svg?

Bounds only respects initial zoom

When providing top, right, bottom, left bound values these only seem to be applied to the initial zoom, so whenever the scale is changed these values don't seem to take the new scale into account, also it seems there is no method to update these bound values on the fly to calculate the updated bounds myself?

Bounding to element using Javascript does not work

After hour of looking for simple SVG dragging library I found this, and now I feel so frustrated because it does not work properly...

https://jsfiddle.net/vdm2bL43/2/

Module version for use with "import"

Is there a module version of this so I can use the "import" statement?

Going from touch to mouse

Great stuff! For the D3 examples on https://easypz.io/ I found that once I use touch to pan I can't use the mouse anymore. Basically going back and forth between touch and mouse to do panning doesn't work.

Chrome (version 64.0.3282.167 (Official Build) (64-bit)) on a Surface Laptop.

1.1.11 is broken?

I noticed this on my site and I noticed it on the official easypz site as well in chrome and firefox. I'm getting:

Uncaught ReferenceError: exports is not defined

I ended up switching to a CDN for this via: https://cdn.jsdelivr.net/npm/[email protected]/easypz.min.js to ensure it wouldn't break again.

weird zooming behavior

great stuff but this bugs me:

zoom in

move mouse

zoom out

--> weird jumpy behavior, does not feel natural

Programmatically detach EasyPZ

Hello

I ran accross this problem when I was using easypz, and wanted to reset the zoom with a button.
Since the option did not exist, I tried to destroy and recreate an new EasyPZ object new EasyPZ(samedom, ....), doing so N times creates an number of eventlisteners that I'm not able to remove (unless I recreate the DOM object and also loose whatever other eventlisteners were bound to it).

I did create a child class, ironically named DestroyableEasyPZ, but i think it should be doable to implement it in the original class.

https://observablehq.com/@stardisblue/hello-easypz

This could also serve other usecases where you want to enable/disable easypz while conserving the zoom and translate values.

zoom is unusably faster in chrome than ff

nice lib.

here's my hack for trying to even out scroll speed between browsers when using touchpads:

@@ -945,7 +945,15 @@ EasyPZ.addMode(function (easypz) {
             var delta = eventData.event.wheelDelta ? eventData.event.wheelDelta : -1 * eventData.event.deltaY;
             var change = delta / Math.abs(delta);
             var zoomingIn = change > 0;
-            var scale = zoomingIn ? mode.settings.zoomInScaleChange : mode.settings.zoomOutScaleChange;
+            // Only Firefox seems to use the line unit (which we assume to
+            // be 25px), otherwise the delta is already measured in pixels.
+            var scale;
+            if (eventData.event.deltaMode === 1) {
+                scale = zoomingIn ? 0.92 : 1.08;
+            }
+            else {
+                scale = zoomingIn ? 0.98 : 1.02;
+            }
             var relativeScale = 1 - scale;
             var absScale = Math.abs(relativeScale) * mode.settings.momentumSpeedPercentage;
             var scaleSign = sign(relativeScale);

you can probably make it cleaner. but its normalizing the scale between browsers by checking WheelEvent.deltaMode.

see related:
weaveworks/scope#2788
https://github.com/weaveworks/scope/blob/d8ffea47815559ed908dd04f8593408ecb1e5b87/client/app/scripts/utils/zoom-utils.js
https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaMode

also you are doing event handling wrong.
in FF, events are emitted much less frequently than Chrome.
Chrome literally floods with events. You should be _.debounce()ing them.
see also:
https://stackoverflow.com/a/25991510
http://demo.nimius.net/debounce_throttle/

also, you should not be doing the work inside the event callback. the callback should just be setting a few calculation values like delta, and you should have a separate function doing the work at a controlled (probably 12-24fps) frame rate (using requestAnimationFrame(), or setTimeout if you are a savage).

sorry i don't have time to make a PR. hope this helps :)

EasyPZ enabling constructor not working

Hello Michail,

The normal constructor via javascript is not working for me, like below:
var easypz = new EasyPZ( document.querySelectorAll('svg')[0], function() {} );

But it works if I pass all parameters:
var easypz = new EasyPZ( document.querySelectorAll('svg')[0], function() {}, {}, ["SIMPLE_PAN", "HOLD_ZOOM_IN", "CLICK_HOLD_ZOOM_OUT", "WHEEL_ZOOM_EASE", "PINCH_ZOOM", "DBLCLICK_ZOOM_IN", "DBLRIGHTCLICK_ZOOM_OUT"], {}, function() {}, function() {}, function() {}, "svg > *" );

I'm not sure if it's a mistake on my part or some browser update broke it. The SVG looks like this:

<svg width="100%" height="200" style="background-color: antiquewhite;"> <rect id='rect' x='0' y='0' width='100%' height='700'/> <rect x='10' y='20' width='100' height='80'/> </svg>

There's nothing else in it.

Thanks for this great library.

Please add zoomTo and panTo

That would be quite cool for interactivity

There is no exmpale for transforming webgl canvas

Or just simply use

var ctx = document.getElementById("myCanvas").getContext("webgl");

and it doesn't work

Remove Pan and Zoom Methods from Element

Hello,

is it possible to remove the Zoom and Pan Methods from Canvas Element while the Script is running? Cause at some point of zooming and scrolling i want to draw something on that Canvas without the Methode of Paning. After drawing i want to add the Paning Method to the Canvase Element.

problems resizing

Hello

I have problems with my svg when resizing,

no translate found matrix(0.07,0,0,0.07,312.48001419067384,199.01998580932616)
no scale found matrix(0.07,0,0,0.07,312.48001419067384,199.01998580932616)

Using with canvas and in react

I want to use this in canvas and also in also in reactjs.Can someone provide demo how should I Do it?

License

Hi,

What license is your code under?

I couldn't find anything in the wiki documentation, readme, or package json.

Thanks!

Ryan

Touch interactions are broken

It seems like touch-based actions like SIMPLE_PAN and PINCH_ZOOM are broken starting from version 1.1.9 and onward.

HTML zooming leads to incorrect translate values

When using the mouse wheel or pinch to zoom to certain area to zoom, it receives translateX and translateY and results to not going to the right place when zoomed.

JS:

$(function() {
  var t = new EasyPZ(document.getElementsByClassName('container')[0], function(transform) {
    $(".yeah").css({
      "transform": "translateX(" + transform.translateX + "px) translateY(" + transform.translateY + "px) scale(" + transform.scale + ")",
      "-webkit-transform": "translateX(" + transform.translateX + "px) translateY(" + transform.translateY + "px) scale(" + transform.scale + ")",
    });
  });
});

CSS

html,
body {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}

.container {
  background-color: red;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.yeah {
  background-color: orange;
  width: 100%;
  height: 100%;
}

HTML:

<div class="container">
  <div class="yeah">
    Some content that im going to manipulate
  </div>
</div>

Fiddle: https://jsfiddle.net/06mgqv8u/

Play lottie animation

Is it possible to play a lottie animation inside the EasyPZ scene?

What I have working is an HTML5 canvas with EasyPZ and custom elements rendered within that and a lottie animation that is also rendered inside the same canvas. My question is: How can I get my lottie animation to play as part of the EasyPZ scene so when the user pans or zooms the animation also pans & zooms?

Update bounds on the fly

It would be great to have a way to update the bound values on the fly.

Scenario: when using it with a regular canvas object it seems like the bounds value apply to the unscaled version limiting the pan of an upscaled one. Providing NaN and calculating the bounds using a custom function works of course, but letting easypz handle it would be more convenient.

EasyPZ - Is there a way to update the transform object?

I have the code below for my onload function:

easyPZ = new EasyPZ(
document.getElementById("image-panel"),
function (transform) {
scale = transform.scale;
// newScale = tranform.scale * resizeScale
offset.x = transform.translateX;
offset.y = transform.translateY;
redrawAllCanvas(transform.scale, transform.translateX, transform.translateY);
// redrawAllCanvas(newScale, newTransform.translateX, newTransform.translateY);
}
);

In cases where the canvas size bigger than the client screen size, I want to resize the image that fits to the screen size. So I calculate another scale called resizeScale. I want to implement the scale to the EasyPZ transform function. I wonder if there is a way that I could modify the transform object so it will return the offset.x and offset.y relative to the new scale (transform.scale*resizeScale)?