add simple mouse events for price and time scales

src/api/iaxis-api.ts

@@ -0,0 +1,69 @@
+import { AxisMouseEventHandler } from '../model/axis-model';
+
+export interface IAxisApi {
+	/**
+	 * Subscribe to the axis click event.
+	 *
+	 * @param handler - Handler to be called on mouse click.
+	 * @example
+	 * ```js
+	 * function myClickHandler(param) {
+	 *     if (!param.point) {
+	 *         return;
+	 *     }
+	 *
+	 *     console.log(`Click at ${param.point.x}, ${param.point.y}.`);
+	 * }
+	 *
+	 * chart.timeScale().subscribeClick(myClickHandler);
+	 * ```
+	 */
+	subscribeClick(handler: AxisMouseEventHandler): void;
+
+	/**
+	 * Unsubscribe a handler that was previously subscribed using {@link subscribeClick}.
+	 *
+	 * @param handler - Previously subscribed handler
+	 * @example
+	 * ```js
+	 * chart.timeScale().unsubscribeClick(myClickHandler);
+	 * ```
+	 */
+	unsubscribeClick(handler: AxisMouseEventHandler): void;
+
+	/**
+	 * Subscribe to the axis mouse move event.
+	 *
+	 * @param handler - Handler to be called on mouse move.
+	 * @example
+	 * ```js
+	 * function myMoveHandler(param) {
+	 *     if (!param.point) {
+	 *         return;
+	 *     }
+	 *
+	 *     console.log(`Mouse at ${param.point.x}, ${param.point.y}.`);
+	 * }
+	 *
+	 * chart.timeScale().subscribeMouseMove(myMoveHandler);
+	 * ```
+	 */
+	subscribeMouseMove(handler: AxisMouseEventHandler): void;
+
+	/**
+	 * Unsubscribe a handler that was previously subscribed using {@link subscribeMouseMove}.
+	 *
+	 * @param handler - Previously subscribed handler
+	 * @example
+	 * ```js
+	 * chart.timeScale().unsubscribeMouseMove(myMoveHandler);
+	 * ```
+	 */
+	unsubscribeMouseMove(handler: AxisMouseEventHandler): void;
+
+	/**
+	 * CSS cursor style as defined here: [MDN: CSS Cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) or `undefined`
+	 * if you want the library to use the default cursor style instead.
+	 */
+	overrideCursorStyle(cursor: string | undefined): void;
+}

src/api/iprice-scale-api.ts

@@ -3,8 +3,10 @@ import { DeepPartial } from '../helpers/strict-type-checks';
 import { PriceScaleOptions } from '../model/price-scale';
 import { IRange } from '../model/time-data';
 
+import { IAxisApi } from './iaxis-api';
+
 /** Interface to control chart's price scale */
-export interface IPriceScaleApi {
+export interface IPriceScaleApi extends IAxisApi {
 	/**
 	 * Applies new options to the price scale
 	 *

src/api/itime-scale-api.ts

@@ -4,6 +4,8 @@ import { Coordinate } from '../model/coordinate';
 import { IRange, Logical, LogicalRange, TimePointIndex } from '../model/time-data';
 import { HorzScaleOptions } from '../model/time-scale';
 
+import { IAxisApi } from './iaxis-api';
+
 /**
  * A custom function used to handle changes to the time scale's time range.
  */
@@ -18,7 +20,7 @@ export type LogicalRangeChangeEventHandler = (logicalRange: LogicalRange | null)
 export type SizeChangeEventHandler = (width: number, height: number) => void;
 
 /** Interface to chart time scale */
-export interface ITimeScaleApi<HorzScaleItem> {
+export interface ITimeScaleApi<HorzScaleItem> extends IAxisApi {
 	/**
 	 * Return the distance from the right edge of the time scale to the lastest bar of the series measured in bars.
 	 */

src/api/price-scale-api.ts

@@ -3,6 +3,7 @@ import { IChartWidgetBase } from '../gui/chart-widget';
 import { ensureNotNull } from '../helpers/assertions';
 import { DeepPartial } from '../helpers/strict-type-checks';
 
+import { AxisMouseEventHandler } from '../model/axis-model';
 import { isDefaultPriceScale } from '../model/default-price-scale';
 import { PriceRangeImpl } from '../model/price-range-impl';
 import { PriceScale, PriceScaleOptions } from '../model/price-scale';
@@ -54,6 +55,26 @@ export class PriceScaleApi implements IPriceScaleApi {
 		this.applyOptions({ autoScale: on });
 	}
 
+	public subscribeClick(handler: AxisMouseEventHandler): void {
+		this._chartWidget.getPriceAxisWidget(this._paneIndex, this._priceScaleId).subscribeClick(handler);
+	}
+
+	public unsubscribeClick(handler: AxisMouseEventHandler): void {
+		this._chartWidget.getPriceAxisWidget(this._paneIndex, this._priceScaleId).unsubscribeClick(handler);
+	}
+
+	public subscribeMouseMove(handler: AxisMouseEventHandler): void {
+		this._chartWidget.getPriceAxisWidget(this._paneIndex, this._priceScaleId).subscribeMouseMove(handler);
+	}
+
+	public unsubscribeMouseMove(handler: AxisMouseEventHandler): void {
+		this._chartWidget.getPriceAxisWidget(this._paneIndex, this._priceScaleId).unsubscribeMouseMove(handler);
+	}
+
+	public overrideCursorStyle(cursor: string | undefined): void {
+		this._chartWidget.getPriceAxisWidget(this._paneIndex, this._priceScaleId).overrideCursorStyle(cursor);
+	}
+
 	private _priceScale(): PriceScale {
 		return ensureNotNull(this._chartWidget.model().findPriceScale(this._priceScaleId, this._paneIndex)).priceScale;
 	}

src/api/time-scale-api.ts

@@ -7,6 +7,7 @@ import { Delegate } from '../helpers/delegate';
 import { IDestroyable } from '../helpers/idestroyable';
 import { clone, DeepPartial } from '../helpers/strict-type-checks';
 
+import { AxisApi, AxisMouseEventHandler } from '../model/axis-model';
 import { ChartModel } from '../model/chart-model';
 import { Coordinate } from '../model/coordinate';
 import { IHorzScaleBehavior, InternalHorzScaleItem } from '../model/ihorz-scale-behavior';
@@ -19,11 +20,12 @@ import {
 	SizeChangeEventHandler,
 	TimeRangeChangeEventHandler,
 } from './itime-scale-api';
+
 const enum Constants {
 	AnimationDurationMs = 1000,
 }
 
-export class TimeScaleApi<HorzScaleItem> implements ITimeScaleApi<HorzScaleItem>, IDestroyable {
+export class TimeScaleApi<HorzScaleItem> extends AxisApi implements ITimeScaleApi<HorzScaleItem>, IDestroyable {
 	private _model: ChartModel<HorzScaleItem>;
 	private _timeScale: TimeScale<HorzScaleItem>;
 	private readonly _timeAxisWidget: TimeAxisWidget<HorzScaleItem>;
@@ -34,6 +36,7 @@ export class TimeScaleApi<HorzScaleItem> implements ITimeScaleApi<HorzScaleItem>
 	private readonly _horzScaleBehavior: IHorzScaleBehavior<HorzScaleItem>;
 
 	public constructor(model: ChartModel<HorzScaleItem>, timeAxisWidget: TimeAxisWidget<HorzScaleItem>, horzScaleBehavior: IHorzScaleBehavior<HorzScaleItem>) {
+		super();
 		this._model = model;
 		this._timeScale = model.timeScale();
 		this._timeAxisWidget = timeAxisWidget;
@@ -42,9 +45,11 @@ export class TimeScaleApi<HorzScaleItem> implements ITimeScaleApi<HorzScaleItem>
 		this._timeAxisWidget.sizeChanged().subscribe(this._onSizeChanged.bind(this));
 
 		this._horzScaleBehavior = horzScaleBehavior;
+		this._setupMouseEvents(this._timeAxisWidget);
 	}
 
 	public destroy(): void {
+		this._removeMouseEvents(this._timeAxisWidget);
 		this._timeScale.visibleBarsChanged().unsubscribeAll(this);
 		this._timeScale.logicalRangeChanged().unsubscribeAll(this);
 		this._timeAxisWidget.sizeChanged().unsubscribeAll(this);
@@ -53,6 +58,26 @@ export class TimeScaleApi<HorzScaleItem> implements ITimeScaleApi<HorzScaleItem>
 		this._sizeChanged.destroy();
 	}
 
+	public subscribeClick(handler: AxisMouseEventHandler): void {
+		this._subscribeClick(handler);
+	}
+
+	public unsubscribeClick(handler: AxisMouseEventHandler): void {
+		this._unsubscribeClick(handler);
+	}
+
+	public subscribeMouseMove(handler: AxisMouseEventHandler): void {
+		this._subscribeMouseMove(handler);
+	}
+
+	public unsubscribeMouseMove(handler: AxisMouseEventHandler): void {
+		this._unsubscribeMouseMove(handler);
+	}
+
+	public overrideCursorStyle(cursor: string | undefined): void {
+		this._timeAxisWidget.overrideCursorStyle(cursor);
+	}
+
 	public scrollPosition(): number {
 		return this._timeScale.rightOffset();
 	}

src/gui/axis-mouse-event-helpers.ts

@@ -0,0 +1,38 @@
+import { Delegate } from '../helpers/delegate';
+
+import {
+	AxisMouseEventParamsImpl,
+	AxisMouseEventParamsImplSupplier,
+} from '../model/axis-widget';
+import { Point } from '../model/point';
+
+import { MouseEventHandlerEventBase } from './mouse-event-handler';
+
+export function fireNullMouseDelegate(
+	delegate: Delegate<AxisMouseEventParamsImplSupplier>
+): void {
+	if (delegate.hasListeners()) {
+		delegate.fire(() => getAxisMouseEventParamsImpl(null, null));
+	}
+}
+
+export function fireMouseDelegate(
+	delegate: Delegate<AxisMouseEventParamsImplSupplier>,
+	event: MouseEventHandlerEventBase
+): void {
+	const x = event.localX;
+	const y = event.localY;
+	if (delegate.hasListeners()) {
+		delegate.fire(() => getAxisMouseEventParamsImpl({ x, y }, event));
+	}
+}
+
+function getAxisMouseEventParamsImpl(
+	point: Point | null,
+	event: MouseEventHandlerEventBase | null
+): AxisMouseEventParamsImpl {
+	return {
+		point: point ?? undefined,
+		touchMouseEventData: event ?? undefined,
+	};
+}

src/gui/chart-widget.ts

@@ -28,6 +28,7 @@ import { TouchMouseEventData } from '../model/touch-mouse-event-data';
 import { suggestChartSize, suggestPriceScaleWidth, suggestTimeScaleHeight } from './internal-layout-sizes-hints';
 import { PaneSeparator, SeparatorConstants } from './pane-separator';
 import { PaneWidget } from './pane-widget';
+import { PriceAxisWidget } from './price-axis-widget';
 import { TimeAxisWidget } from './time-axis-widget';
 
 export interface MouseEventParamsImpl {
@@ -51,6 +52,7 @@ export interface IChartWidgetBase {
 	paneWidgets(): PaneWidget[];
 	options(): ChartOptionsInternalBase;
 	setCursorStyle(style: string | null): void;
+	getPriceAxisWidget(paneIndex: number, priceScaleId: string): PriceAxisWidget;
 }
 
 export class ChartWidget<HorzScaleItem> implements IDestroyable, IChartWidgetBase {
@@ -326,6 +328,11 @@ export class ChartWidget<HorzScaleItem> implements IDestroyable, IChartWidgetBas
 		return ensureDefined(this._paneWidgets[paneIndex]).getSize();
 	}
 
+	public getPriceAxisWidget(paneIndex: number, priceScaleId: string): PriceAxisWidget {
+		const pane = ensureDefined(this._paneWidgets[paneIndex]);
+		return ensureNotNull(priceScaleId === 'left' ? pane.leftPriceAxisWidget() : pane.rightPriceAxisWidget());
+	}
+
 	private _applyPanesOptions(): void {
 		this._paneSeparators.forEach((separator: PaneSeparator) => {
 			separator.update();