Extend onZoom and onPan callbacks for syncing multiple charts

src/core.ts

@@ -3,7 +3,7 @@
 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 @@
   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 @@
 
 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 {
@@ -221,18 +224,21 @@
   const yEnabled = y !== 0
 
   const scales = enabledScales || Object.values(chart.scales)
+  const actualDelta = { x: 0, y: 0 }
 
   for (const scale of scales) {
     if (scale.isHorizontal() && xEnabled) {
+      actualDelta.x = x
       panScale(scale, x, limits, state)
     } else if (!scale.isHorizontal() && yEnabled) {
+      actualDelta.y = y
       panScale(scale, y, limits, state)
     }
   }
 
   chart.update(transition)
 
-  onPan?.({ chart })
+  onPan?.({ chart, trigger, delta: actualDelta })
 }
 
 export function getInitialScaleBounds(chart: Chart) {

src/options.ts

@@ -6,6 +6,7 @@
 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 +121,7 @@
   /**
    * Function called while the user is zooming
    */
-  onZoom?: (context: { chart: Chart; trigger: ZoomTrigger }) => void
+  onZoom?: (context: { chart: Chart; trigger: ZoomTrigger; amount?: { x: number, y: number } }) => void
 
   /**
    * Function called once zooming is completed
@@ -172,7 +173,7 @@
   /**
    * Function called while the user is panning
    */
-  onPan?: GenericEvent
+  onPan?: (context: { chart: Chart; trigger: PanTrigger; delta: { x: number, y: number } }) => void
 
   /**
    * Function called once panning is completed

src/plugin.ts

@@ -50,7 +50,7 @@
 }
 
 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)