Return trigger, delta and amount in onZoom and onPan callbacks.

Author: valerianoceanflight

src/core.ts

@@ -3,7 +3,7 @@ import { panFunctions, updateRange, zoomFunctions, zoomRectFunctions } from './s
 import { getState, type OriginalScaleLimits, type ScaleRange, type State, type UpdatedScaleLimits } from './state.js'
 import { directionEnabled, getEnabledScalesByPoint } from './utils.js'
 import type { Chart, Point, Scale, UpdateMode } from 'chart.js'
-import type { LimitOptions, ZoomTrigger } from './options.js'
+import type { LimitOptions, PanTrigger, ZoomTrigger } from './options.js'
 import type { ZoomAmount } from './types.js'
 
 function shouldUpdateScaleLimits(
@@ -78,18 +78,21 @@ export function zoom(chart: Chart, amount: ZoomAmount, transition: UpdateMode =
   const xEnabled = x !== 1
   const yEnabled = y !== 1
   const enabledScales = getEnabledScalesByPoint(zoomOptions, focalPoint, chart)
+  const actualAmount = { x: 1, y: 1 }
 
   for (const scale of enabledScales) {
     if (scale.isHorizontal() && xEnabled) {
+      actualAmount.x = x
       doZoom(scale, x, focalPoint, limits)
     } else if (!scale.isHorizontal() && yEnabled) {
+      actualAmount.y = y
       doZoom(scale, y, focalPoint, limits)
     }
   }
 
   chart.update(transition)
 
-  zoomOptions?.onZoom?.({ chart, trigger })
+  zoomOptions?.onZoom?.({ chart, trigger, amount: actualAmount })
 }
 
 export function zoomRect(
@@ -207,7 +210,7 @@ function panScale(scale: Scale, delta: number, limits: LimitOptions, state: Stat
 
 type PanAmount = number | Partial<Point>
 
-export function pan(chart: Chart, delta: PanAmount, enabledScales?: Scale[], transition: UpdateMode = 'none') {
+export function pan(chart: Chart, delta: PanAmount, enabledScales?: Scale[], transition: UpdateMode = 'none', trigger: PanTrigger = "other") {
   const { x = 0, y = 0 } = typeof delta === 'number' ? { x: delta, y: delta } : delta
   const state = getState(chart)
   const {
@@ -232,7 +235,7 @@ export function pan(chart: Chart, delta: PanAmount, enabledScales?: Scale[], tra
 
   chart.update(transition)
 
-  onPan?.({ chart })
+  onPan?.({ chart, trigger, delta })
 }
 
 export function getInitialScaleBounds(chart: Chart) {

src/options.ts

@@ -1,11 +1,13 @@
 import type { Chart, Color, Point } from 'chart.js'
+import type { PanAmount, ZoomAmount } from './types'
 
 export type Mode = 'x' | 'y' | 'xy'
 export type ModeFn = (context: { chart: Chart }) => Mode
 export type ModeOption = Mode | ModeFn
 export type ModifierKey = 'ctrl' | 'alt' | 'shift' | 'meta'
 export type DrawTime = 'afterDraw' | 'afterDatasetsDraw' | 'beforeDraw' | 'beforeDatasetsDraw'
 export type ZoomTrigger = 'api' | 'drag' | 'wheel' | 'pinch'
+export type PanTrigger = 'api' | 'drag' | 'wheel' | 'other'
 
 type RejectableStartEvent<T = Event | HammerInput> = (context: {
   chart: Chart
@@ -120,7 +122,7 @@ export interface ZoomOptions {
   /**
    * Function called while the user is zooming
    */
-  onZoom?: (context: { chart: Chart; trigger: ZoomTrigger }) => void
+  onZoom?: (context: { chart: Chart; trigger: ZoomTrigger; amount?: ZoomAmount }) => void
 
   /**
    * Function called once zooming is completed
@@ -172,7 +174,7 @@ export interface PanOptions {
   /**
    * Function called while the user is panning
    */
-  onPan?: GenericEvent
+  onPan?: (context: { chart: Chart; trigger: PanTrigger; delta: PanAmount }) => void
 
   /**
    * Function called once panning is completed

src/plugin.ts

@@ -50,7 +50,7 @@ function draw(chart: Chart, caller: string, options: ZoomPluginOptions) {
 }
 
 const bindApi = (chart: Chart) => {
-  chart.pan = (delta, panScales, transition) => pan(chart, delta, panScales, transition)
+  chart.pan = (delta, panScales, transition) => pan(chart, delta, panScales, transition, "api")
   chart.zoom = (args, transition) => zoom(chart, args, transition)
   chart.zoomRect = (p0, p1, transition) => zoomRect(chart, p0, p1, transition)
   chart.zoomScale = (id, range, transition) => zoomScale(chart, id, range, transition)