Skip to content

Extend onZoom and onPan callbacks for syncing multiple charts #933

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Extend onZoom and onPan callbacks for syncing multiple charts #933

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/core.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -207,7 +207,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 {
Expand All @@ -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) {
Expand Down
5 changes: 3 additions & 2 deletions src/options.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<T = Event | HammerInput> = (context: {
chart: Chart
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/plugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down