diff --git a/src/core.ts b/src/core.ts index 1221d9cc..f440125c 100644 --- a/src/core.ts +++ b/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( @@ -89,7 +89,7 @@ export function zoom(chart: Chart, amount: ZoomAmount, transition: UpdateMode = chart.update(transition) - zoomOptions?.onZoom?.({ chart, trigger }) + zoomOptions?.onZoom?.({ chart, trigger, amount: { x, y, focalPoint } }) } export function zoomRect( @@ -207,7 +207,7 @@ function panScale(scale: Scale, delta: number, limits: LimitOptions, state: Stat type PanAmount = number | Partial -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 @@ export function pan(chart: Chart, delta: PanAmount, enabledScales?: Scale[], tra chart.update(transition) - onPan?.({ chart }) + onPan?.({ chart, trigger, delta: { x, y } }) } export function getInitialScaleBounds(chart: Chart) { diff --git a/src/options.ts b/src/options.ts index a52a79d1..3c22fe58 100644 --- a/src/options.ts +++ b/src/options.ts @@ -6,6 +6,7 @@ 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 = (context: { chart: Chart @@ -120,7 +121,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?: { x: number, y: number } & { focalPoint: Point } }) => void /** * Function called once zooming is completed @@ -172,7 +173,7 @@ export interface PanOptions { /** * 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 diff --git a/src/plugin.ts b/src/plugin.ts index 74c333be..6def15e1 100644 --- a/src/plugin.ts +++ b/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)