From: Josh Kelley <joshkel@gmail.com>
Date: Thu, 30 Jan 2025 09:29:19 +0000 (-0500)
Subject: Fix helpers `Chart` type (#12012)
X-Git-Tag: v4.4.8~3
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=370f6c385d648ab52f576824b9a22453fa4648f1;p=thirdparty%2FChart.js.git

Fix helpers `Chart` type (#12012)

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
---

diff --git a/src/helpers/helpers.dom.ts b/src/helpers/helpers.dom.ts
index e06fefe94..bf88ac7d2 100644
--- a/src/helpers/helpers.dom.ts
+++ b/src/helpers/helpers.dom.ts
@@ -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
  */
@@ -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;
@@ -214,7 +206,7 @@ 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 {
@@ -222,8 +214,8 @@ export function retinaScale(
   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;
 
@@ -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);
diff --git a/test/types/helpers/dom.ts b/test/types/helpers/dom.ts
new file mode 100644
index 000000000..dc1c44f50
--- /dev/null
+++ b/test/types/helpers/dom.ts
@@ -0,0 +1,11 @@
+import { getRelativePosition } from '../../../src/helpers/helpers.dom.js';
+import { Chart, ChartOptions } from '../../../src/types.js';
+
+const chart = new Chart('test', {
+  type: 'line',
+  data: {
+    datasets: []
+  }
+});
+
+getRelativePosition(new MouseEvent('click'), chart);