fix: give the plugin geometry its own non-nullable Point

src/core.ts

@@ -2,9 +2,9 @@ import { isNumber, sign } from 'chart.js/helpers'
 import { panFunctions, updateRange, zoomFunctions, zoomRectFunctions } from './scale.types.js'
 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 { Chart, Scale, UpdateMode } from 'chart.js'
 import type { LimitOptions, ZoomTrigger } from './options.js'
-import type { ZoomAmount } from './types.js'
+import type { Point, ZoomAmount } from './types.js'
 
 function shouldUpdateScaleLimits(
   scale: Scale,

src/handlers.ts

@@ -2,8 +2,9 @@ import { directionEnabled, debounce, keyNotPressed, getModifierKey, keyPressed }
 import { zoom, zoomRect } from './core'
 import { getRelativePosition, _isPointInArea } from 'chart.js/helpers'
 import { getState, type HandlerFunctions, type HandlerName } from './state'
-import type { Chart, ChartArea, Point } from 'chart.js'
+import type { Chart, ChartArea } from 'chart.js'
 import type { ModeOption, ZoomOptions, ZoomPluginOptions } from './options'
+import type { Point } from './types'
 
 const clamp = (x: number, from: number, to: number): number => Math.min(to, Math.max(from, x))
 

src/index.ts

@@ -3,8 +3,8 @@ import plugin from './plugin'
 
 import type { ZoomPluginOptions } from './options'
 import type { ScaleRange } from './state'
-import type { DistributiveArray, PanAmount, ZoomAmount } from './types.js'
-import type { ChartType, ChartTypeRegistry, Point, Scale, UpdateMode } from 'chart.js'
+import type { DistributiveArray, PanAmount, Point, ZoomAmount } from './types.js'
+import type { ChartType, ChartTypeRegistry, Scale, UpdateMode } from 'chart.js'
 
 declare module 'chart.js' {
   interface PluginOptionsByType<TType extends ChartType> {

src/options.ts

@@ -1,5 +1,6 @@
-import type { Chart, Color, Point } from 'chart.js'
+import type { Chart, Color } from 'chart.js'
 import type { GestureEvent } from './gestures'
+import type { Point } from './types'
 
 export type Mode = 'x' | 'y' | 'xy'
 export type ModeFn = (context: { chart: Chart }) => Mode

src/scale.types.ts

@@ -1,7 +1,8 @@
 import { almostEquals, isNullOrUndef, isNumber, valueOrDefault } from 'chart.js/helpers'
 import { getState, type ScaleRange, type State } from './state'
-import type { Point, Scale, TimeScale, TimeUnit } from 'chart.js'
+import type { Scale, TimeScale, TimeUnit } from 'chart.js'
 import type { LimitOptions, ScaleLimits } from './options'
+import type { Point } from './types'
 
 export type ZoomFunction = (scale: Scale, zoom: number, center: Point, limits: LimitOptions) => boolean
 export type ZoomRectFunction = (scale: Scale, from: number, to: number, limits: LimitOptions) => boolean

src/state.ts

@@ -1,5 +1,6 @@
-import { Chart, type Point } from 'chart.js'
+import { Chart } from 'chart.js'
 import type { ZoomPluginOptions } from './options'
+import type { Point } from './types'
 
 export type ScaleRange = { min: number; max: number }
 export type OriginalLimits = { min: { scale?: number; options?: unknown }; max: { scale?: number; options?: unknown } }

src/types.ts

@@ -1,4 +1,13 @@
-import type { Point } from 'chart.js'
+/**
+ * A position in canvas pixels.
+ *
+ * Chart.js 4.5 widened its own `Point` to `{ x: number | null; y: number | null }`
+ * so that it can also describe a gap in a dataset. Everything this plugin
+ * measures or moves -- a zoom centre, a drag corner, a pan delta -- is a real
+ * coordinate, so the geometry here keeps its own non-nullable type rather than
+ * null checking values that are never null.
+ */
+export type Point = { x: number; y: number }
 
 export type ZoomAmount = number | (Partial<Point> & { focalPoint?: Point })
 export type PanAmount = number | Partial<Point>

src/utils.ts

@@ -1,5 +1,6 @@
-import type { Chart, Point, Scale } from 'chart.js'
+import type { Chart, Scale } from 'chart.js'
 import type { DragOptions, ModeOption, ModifierKey, PanOptions } from './options'
+import type { Point } from './types'
 
 const eventKey = (key: ModifierKey): 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey' => `${key}Key`