From cd6ca9e6ae6817c8af921527fda088bde787e929 Mon Sep 17 00:00:00 2001 From: Jukka Kurkela Date: Thu, 17 Sep 2026 09:24:27 +0300 Subject: [PATCH] fix: give the plugin geometry its own non-nullable Point Chart.js 4.5 widened Point to `{ x: number | null; y: number | null }` so it can also describe a gap in a dataset. The plugin used that same type for canvas geometry, so bumping the dev dependency to 4.5.1 (#962) fails to compile with 15 errors across core, gestures, handlers, scale.types and utils. Every one of those is a zoom centre, a drag corner, a pan delta or a hit test position -- a real coordinate that is never null. Rather than null check values that cannot be null, Point is now declared in src/types.ts and the geometry imports it from there. Chart.js keeps being imported for everything else. This also tightens the public API in the right direction: passing a Chart.js Point, which may now hold nulls, into chart.zoomRect() or chart.pan() no longer type checks, and it would have misbehaved at runtime. Compiles and passes the browser tests against both 4.4.8 and 4.5.1, so #962 should go green once it is rebased on this. Co-Authored-By: Claude Opus 5 (1M context) --- src/core.ts | 4 ++-- src/handlers.ts | 3 ++- src/index.ts | 4 ++-- src/options.ts | 3 ++- src/scale.types.ts | 3 ++- src/state.ts | 3 ++- src/types.ts | 11 ++++++++++- src/utils.ts | 3 ++- 8 files changed, 24 insertions(+), 10 deletions(-) diff --git a/src/core.ts b/src/core.ts index 1221d9cc..9eb63170 100644 --- a/src/core.ts +++ b/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, diff --git a/src/handlers.ts b/src/handlers.ts index 8aa8c55f..d23d2d20 100644 --- a/src/handlers.ts +++ b/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)) diff --git a/src/index.ts b/src/index.ts index 37492239..5dde4701 100644 --- a/src/index.ts +++ b/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 { diff --git a/src/options.ts b/src/options.ts index d08c6c8d..f60990af 100644 --- a/src/options.ts +++ b/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 diff --git a/src/scale.types.ts b/src/scale.types.ts index 0847722a..2a1496fc 100644 --- a/src/scale.types.ts +++ b/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 diff --git a/src/state.ts b/src/state.ts index fd72bf2f..e4fe865e 100644 --- a/src/state.ts +++ b/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 } } diff --git a/src/types.ts b/src/types.ts index 235be5c3..6970c4c0 100644 --- a/src/types.ts +++ b/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 & { focalPoint?: Point }) export type PanAmount = number | Partial diff --git a/src/utils.ts b/src/utils.ts index 0bb4d6ec..bf8ce1e4 100644 --- a/src/utils.ts +++ b/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`