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(
@@ -89,7 +89,7 @@
 
   chart.update(transition)
 
-  zoomOptions?.onZoom?.({ chart, trigger })
+  zoomOptions?.onZoom?.({ chart, trigger, amount: { x, y, focalPoint } })
 }
 
 export function zoomRect(
@@ -207,7 +207,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 {
@@ -232,7 +232,7 @@
 
   chart.update(transition)
 
-  onPan?.({ chart })
+  onPan?.({ chart, trigger, delta: { x, y } })
 }
 
 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 } & { focalPoint: Point } }) => 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)