fix(api): fire zoom callbacks from programmatic zoomIn/resetTransform

handleZoomToViewCenter and resetTransformations now emit
onZoomStart, onZoom, and onZoomStop callbacks, matching the
sequence fired by user-driven wheel/pinch gestures.

Also assigns ref context on init for stable ref API access.

Closes #369
Ref #553

Made-with: Cursor

Author: prc5

src/core/handlers/handlers.utils.ts

@@ -4,7 +4,7 @@ import { handleZoomToPoint } from "../zoom/zoom.logic";
 import { animate } from "../animations/animations.utils";
 import { createState } from "../../utils/state.utils";
 import { checkZoomBounds } from "../zoom/zoom.utils";
-import { roundNumber } from "../../utils";
+import { getContext, handleCallback, roundNumber } from "../../utils";
 import {
   calculateBounds,
   getMouseBoundedPosition,
@@ -70,7 +70,21 @@ export function handleZoomToViewCenter(
     );
   }
 
+  const { onZoomStart, onZoom, onZoomStop } = contextInstance.props;
+  const event = new MouseEvent("mousemove", { bubbles: true });
+  const ctx = getContext(contextInstance);
+  handleCallback(ctx, event, onZoomStart);
+  handleCallback(ctx, event, onZoom);
   animate(contextInstance, targetState, animationTime, animationType);
+  const win =
+    wrapperComponent.ownerDocument?.defaultView ??
+    (typeof window !== "undefined" ? window : null);
+  if (win) {
+    win.setTimeout(() => {
+      if (!contextInstance.mounted) return;
+      handleCallback(getContext(contextInstance), event, onZoomStop);
+    }, animationTime);
+  }
 }
 
 export function resetTransformations(
@@ -116,7 +130,22 @@ export function resetTransformations(
   }
 
   onResetTransformation?.();
+
+  const { onZoomStart, onZoom, onZoomStop } = contextInstance.props;
+  const event = new MouseEvent("mousemove", { bubbles: true });
+  const ctx = getContext(contextInstance);
+  handleCallback(ctx, event, onZoomStart);
+  handleCallback(ctx, event, onZoom);
   animate(contextInstance, newState, animationTime, animationType);
+  const win =
+    wrapperComponent.ownerDocument?.defaultView ??
+    (typeof window !== "undefined" ? window : null);
+  if (win) {
+    win.setTimeout(() => {
+      if (!contextInstance.mounted) return;
+      handleCallback(getContext(contextInstance), event, onZoomStop);
+    }, animationTime);
+  }
 }
 
 export function getOffset(

src/core/instance.core.ts

@@ -17,6 +17,7 @@ import {
   getTransformStyles,
   makePassiveEventOption,
   getCenterPosition,
+  assignRef,
 } from "../utils";
 import { handleCancelAnimation } from "./animations/animations.utils";
 import { isWheelAllowed, isWheelPanningAllowed } from "./wheel/wheel.utils";
@@ -633,5 +634,6 @@ export class ZoomPanPinch {
     this.isInitialized = true;
     const ctx = getContext(this);
     handleCallback(ctx, undefined, this.props.onInit);
+    assignRef(this.props.ref, ctx);
   };
 }

src/utils/ref.utils.ts

@@ -1,6 +1,22 @@
 /* eslint-disable no-param-reassign */
 import type * as React from "react";
 
+export function assignRef<T>(
+  ref:
+    | ((value: T | null) => void)
+    | React.MutableRefObject<T | null>
+    | null
+    | undefined,
+  value: T | null,
+): void {
+  if (ref == null) return;
+  if (typeof ref === "function") {
+    ref(value);
+  } else {
+    ref.current = value;
+  }
+}
+
 export function mergeRefs<T = any>(
   refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>,
 ): React.RefCallback<T> {