Doing my research i found that library works on easypz.io for mobile devices only because of polyfills. Not the case with my app so nothing was listening for touchstart event.

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.

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.

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?

Gives the ability de remove all the event listeners, this should only be used when throwing away the EasyPZ instance. *(see note)

Event functions (e.g.: onMouseUp) were changed to preserve the this binding, that way, they can be passed directly in addEventListener and removeEventListener.

note :

We could set setupHostListenersto public to allow EasyPZ to reattach. But EasyPZ preserves transformations, so it might create undesired side-effects if the transformation was affected by another party.

Maybe I will put another pull request to reset all EasyPZ tranformations, which might satisfy a lot of cases.

Other : Equivalent working example : https://observablehq.com/@stardisblue/hello-easypz

fixes #13

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)?

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)

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.

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/

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.

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.

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?

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.

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/

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: https://github.com/weaveworks/scope/pull/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 :)