Convert the PointElement to TS (#10730)

Co-authored-by: Chart.js <>

src/core/core.element.ts

@@ -28,8 +28,8 @@ export default class Element<T = AnyObject, O = AnyObject> {
    * @param props - properties to get
    * @param [final] - get the final value (animation target)
    */
-  getProps<P extends string>(props: P[], final?: boolean): Partial<Record<P, unknown>>;
   getProps<P extends (keyof T)[]>(props: P, final?: boolean): Pick<T, P[number]>;
+  getProps<P extends string>(props: P[], final?: boolean): Partial<Record<P, unknown>>;
   getProps(props: string[], final?: boolean): Partial<Record<string, unknown>> {
     const anims = this.$animations;
     if (!final || !anims) {

src/elements/element.arc.js

@@ -311,6 +311,7 @@ export default class ArcElement extends Element {
 	 * @param {boolean} [useFinalPosition]
 	 */
   inRange(chartX, chartY, useFinalPosition) {
+    // @ts-ignore This will be fixed when the arc element is converted to TS
     const point = /** @type {Point} */ (this.getProps(['x', 'y'], useFinalPosition));
     const {angle, distance} = getAngleFromPoint(point, {x: chartX, y: chartY});
     const {startAngle, endAngle, innerRadius, outerRadius, circumference} = /** @type {ArcProps} */ (this.getProps([

src/elements/element.point.ts

@@ -1,17 +1,30 @@
 import Element from '../core/core.element';
 import {drawPoint, _isPointInArea} from '../helpers/helpers.canvas';
+import {
+  type CartesianParsedData,
+  type ChartArea,
+  type Point,
+  type PointHoverOptions,
+  type PointOptions,
+} from '../../types';
 
-function inRange(el, pos, axis, useFinalPosition) {
+function inRange(el: PointElement, pos: number, axis: 'x' | 'y', useFinalPosition?: boolean) {
   const options = el.options;
   const {[axis]: value} = el.getProps([axis], useFinalPosition);
 
   return (Math.abs(pos - value) < options.radius + options.hitRadius);
 }
 
-export default class PointElement extends Element {
+export type PointProps = Point
+
+export default class PointElement extends Element<PointProps, PointOptions & PointHoverOptions> {
 
   static id = 'point';
 
+  parsed: CartesianParsedData;
+  skip?: boolean;
+  stop?: boolean;
+
   /**
    * @type {any}
    */
@@ -46,26 +59,26 @@ export default class PointElement extends Element {
     }
   }
 
-  inRange(mouseX, mouseY, useFinalPosition) {
+  inRange(mouseX: number, mouseY: number, useFinalPosition?: boolean) {
     const options = this.options;
-    const {x, y} = /** @type {{ x: number, y: number }} */ (this.getProps(['x', 'y'], useFinalPosition));
+    const {x, y} = this.getProps(['x', 'y'], useFinalPosition);
     return ((Math.pow(mouseX - x, 2) + Math.pow(mouseY - y, 2)) < Math.pow(options.hitRadius + options.radius, 2));
   }
 
-  inXRange(mouseX, useFinalPosition) {
+  inXRange(mouseX: number, useFinalPosition?: boolean) {
     return inRange(this, mouseX, 'x', useFinalPosition);
   }
 
-  inYRange(mouseY, useFinalPosition) {
+  inYRange(mouseY: number, useFinalPosition?: boolean) {
     return inRange(this, mouseY, 'y', useFinalPosition);
   }
 
-  getCenterPoint(useFinalPosition) {
+  getCenterPoint(useFinalPosition?: boolean) {
     const {x, y} = this.getProps(['x', 'y'], useFinalPosition);
     return {x, y};
   }
 
-  size(options) {
+  size(options?: Partial<PointOptions & PointHoverOptions>) {
     options = options || this.options || {};
     let radius = options.radius || 0;
     radius = Math.max(radius, radius && options.hoverRadius || 0);
@@ -73,7 +86,7 @@ export default class PointElement extends Element {
     return (radius + borderWidth) * 2;
   }
 
-  draw(ctx, area) {
+  draw(ctx: CanvasRenderingContext2D, area: ChartArea) {
     const options = this.options;
 
     if (this.skip || options.radius < 0.1 || !_isPointInArea(this, area, this.size(options) / 2)) {
@@ -88,6 +101,7 @@ export default class PointElement extends Element {
 
   getRange() {
     const options = this.options || {};
+    // @ts-expect-error Fallbacks should never be hit in practice
     return options.radius + options.hitRadius;
   }
 }

types/index.d.ts

@@ -1,6 +1,7 @@
 import { DeepPartial, DistributiveArray, UnionToIntersection } from './utils';
 
 import { TimeUnit } from '../src/core/core.adapters';
+import PointElement from '../src/elements/element.point';
 import { EasingFunction } from '../src/helpers/helpers.easing';
 import { AnimationEvent } from './animation';
 import { AnyObject, EmptyObject } from './basic';
@@ -10,6 +11,7 @@ import { ChartArea, Padding, Point } from './geometric';
 import { LayoutItem, LayoutPosition } from './layout';
 
 export { EasingFunction } from '../src/helpers/helpers.easing';
+export { default as PointElement, PointProps } from '../src/elements/element.point';
 export { Animation, Animations, Animator, AnimationEvent } from './animation';
 export { Color } from './color';
 export { ChartArea, Point } from './geometric';
@@ -1821,8 +1823,6 @@ export declare const LineElement: ChartComponent & {
   new (cfg: AnyObject): LineElement;
 };
 
-export interface PointProps extends Point {}
-
 export type PointStyle =
   | 'circle'
   | 'cross'
@@ -1923,18 +1923,6 @@ export interface PointPrefixedHoverOptions {
   pointHoverRadius: number;
 }
 
-export interface PointElement<T extends PointProps = PointProps, O extends PointOptions = PointOptions>
-  extends Element<T, O>,
-  VisualElement {
-  readonly skip: boolean;
-  readonly parsed: CartesianParsedData;
-}
-
-export declare const PointElement: ChartComponent & {
-  prototype: PointElement;
-  new (cfg: AnyObject): PointElement;
-};
-
 export interface BarProps extends Point {
   base: number;
   horizontal: boolean;
@@ -3477,7 +3465,7 @@ export interface ScaleTypeRegistry extends CartesianScaleTypeRegistry, RadialSca
 
 export type ScaleType = keyof ScaleTypeRegistry;
 
-interface CartesianParsedData extends Point {
+export interface CartesianParsedData extends Point {
   // Only specified when stacked bars are enabled
   _stacks?: {
     // Key is the stack ID which is generally the axis ID