Skip to content

Commit

Permalink
Fix helpers Chart type
Browse files Browse the repository at this point in the history
helpers.dom.ts functions referenced the internal `Chart` JavaScript class rather than the published `Chart<TType, TData, TLabel>` TypeScript definition. This causes errors when outside code tries to call helper functions.

The two `Chart` interfaces are incompatible - the `width`, `height`, and `currentDevicePixelRatio` properties are declared as readonly in the TS declaration but are manipulated by helpers.dom.ts functions, and helpers.dom.ts functions need to be invoked both by internal Chart.js code (which uses the JS class) and by outside code (which uses the TS types). To address this, I'm importing the JS version as `PrivateChart`. There may be a better solution.

It's my understanding that the comment about "typedefs are auto-exported" is obsolete now that helpers.dom is a native TS file.

Fixes #11153
  • Loading branch information
joshkel committed Jan 29, 2025
1 parent f744621 commit 24d9afa
Showing 1 changed file with 7 additions and 15 deletions.
22 changes: 7 additions & 15 deletions src/helpers/helpers.dom.ts
Original file line number Diff line number Diff line change
@@ -1,16 +1,8 @@
import type {ChartArea, Scale} from '../types/index.js';
import type Chart from '../core/core.controller.js';
import type {ChartEvent} from '../types.js';
import type PrivateChart from '../core/core.controller.js';
import type {Chart, ChartEvent} from '../types.js';
import {INFINITY} from './helpers.math.js';

/**
* Note: typedefs are auto-exported, so use a made-up `dom` namespace where
* necessary to avoid duplicates with `export * from './helpers`; see
* https://github.com/microsoft/TypeScript/issues/46011
* @typedef { import('../core/core.controller.js').default } dom.Chart
* @typedef { import('../../types').ChartEvent } ChartEvent
*/

/**
* @private
*/
Expand Down Expand Up @@ -112,7 +104,7 @@ function getCanvasPosition(

export function getRelativePosition(
event: Event | ChartEvent | TouchEvent | MouseEvent,
chart: Chart
chart: Chart | PrivateChart
): { x: number; y: number } {
if ('native' in event) {
return event;
Expand Down Expand Up @@ -214,16 +206,16 @@ export function getMaximumSize(
* @returns True if the canvas context size or transformation has changed.
*/
export function retinaScale(
chart: Chart,
chart: Chart | PrivateChart,
forceRatio: number,
forceStyle?: boolean
): boolean | void {
const pixelRatio = forceRatio || 1;
const deviceHeight = Math.floor(chart.height * pixelRatio);
const deviceWidth = Math.floor(chart.width * pixelRatio);

chart.height = Math.floor(chart.height);
chart.width = Math.floor(chart.width);
(chart as PrivateChart).height = Math.floor(chart.height);
(chart as PrivateChart).width = Math.floor(chart.width);

const canvas = chart.canvas;

Expand All @@ -238,7 +230,7 @@ export function retinaScale(
if (chart.currentDevicePixelRatio !== pixelRatio
|| canvas.height !== deviceHeight
|| canvas.width !== deviceWidth) {
chart.currentDevicePixelRatio = pixelRatio;
(chart as PrivateChart).currentDevicePixelRatio = pixelRatio;
canvas.height = deviceHeight;
canvas.width = deviceWidth;
chart.ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
Expand Down

0 comments on commit 24d9afa

Please sign in to comment.