zoomIn(), zoomOut(), resetTransform() do not trigger onZoom/onZoomStart/onZoomStop

[eleweek]

Describe the bug zoomIn(), zoomOut(), resetTransform() do not trigger onZoom/onZoomStart/onZoomStop

This issue seems to be similar to #305

To Reproduce

1. Set onZoom() and other handlers that do debug logging in the "Controls" story. Here is the patch:

diff --git a/src/stories/examples/controls/controls.stories.mdx b/src/stories/examples/controls/controls.stories.mdx
index 38b5c9e..4ac845d 100644
--- a/src/stories/examples/controls/controls.stories.mdx
+++ b/src/stories/examples/controls/controls.stories.mdx
@@ -8,7 +8,21 @@ import { normalizeArgs, Controls } from "../../utils";
 import exampleImg from "../../assets/small-image.jpg";

 export const Template = (args) => (
-  <TransformWrapper {...normalizeArgs(args)}>
+  <TransformWrapper
+    {...normalizeArgs(args)}
+    onZoomStart={() => {
+      console.log("onZoomStart fired");
+    }}
+    onZoomStop={() => {
+      console.log("onZoomStop fired");
+    }}
+    onZoom={() => {
+      console.log("onZoom fired");
+    }}
+    onTransformed={() => {
+      console.log("onTransformed fired");
+    }}
+  >
     {(utils) => (
       <div>
         <Controls {...utils} />

2. Click on the zoom in/out buttons and the reset transform button.
3. Notice that the onZoom*() handlers do not do any logging.

Expected behavior I expect events to be fired and expect to see the debug logging on the console

Desktop:

• OS: macOS Monterey
• Browser: Chrome
• Version: 112

[cojoclaudiu]

Can you do a small demo in codesandbox? Will be easier to debug and easier to update to a working solution

[maxwellwalin]

I noticed this too, but then realized that you can use the 'onTransform' property. It will run on pan as well though.

[joe-akers-douglas-otm]

I am also seeing this issue.

[mduchev]

I'm experiencing the same problem with onZoom event.

@cojoclaudiu Here's a codesandbox link - https://codesandbox.io/s/react-zoom-pan-pinch-example-forked-3z7vfx?file=/src/App.js