Merge pull request #1330 from luk707/master

fix: Add an option to disable crosshair (#749)

.size-limit.js

@@ -4,21 +4,21 @@ module.exports = [
 	{
 		name: 'CJS',
 		path: 'dist/lightweight-charts.production.cjs',
-		limit: '47.70 KB',
+		limit: '47.77 KB',
 	},
 	{
 		name: 'ESM',
 		path: 'dist/lightweight-charts.production.mjs',
-		limit: '47.64 KB',
+		limit: '47.71 KB',
 	},
 	{
 		name: 'Standalone-ESM',
 		path: 'dist/lightweight-charts.standalone.production.mjs',
-		limit: '49.36 KB',
+		limit: '49.42 KB',
 	},
 	{
 		name: 'Standalone',
 		path: 'dist/lightweight-charts.standalone.production.js',
-		limit: '49.41 KB',
+		limit: '49.47 KB',
 	},
 ];

src/model/crosshair.ts

@@ -47,6 +47,10 @@ export const enum CrosshairMode {
 	 * This mode sticks crosshair's horizontal line to the price value of a single-value series or to the close price of OHLC-based series.
 	 */
 	Magnet,
+	/**
+	 * This mode disables rendering of the crosshair.
+	 */
+	Hidden,
 }
 
 /** Structure describing a crosshair line (vertical or horizontal) */

src/views/pane/crosshair-marks-pane-view.ts

@@ -3,7 +3,7 @@ import { ensureNotNull } from '../../helpers/assertions';
 import { BarPrice } from '../../model/bar';
 import { IChartModelBase } from '../../model/chart-model';
 import { Coordinate } from '../../model/coordinate';
-import { Crosshair } from '../../model/crosshair';
+import { Crosshair, CrosshairMode } from '../../model/crosshair';
 import { ISeries } from '../../model/series';
 import { SeriesType } from '../../model/series-options';
 import { SeriesItemsIndexesRange, TimePointIndex } from '../../model/time-data';
@@ -70,6 +70,8 @@ export class CrosshairMarksPaneView implements IUpdatablePaneView {
 	}
 
 	private _updateImpl(): void {
+		const forceHidden = this._crosshair.options().mode === CrosshairMode.Hidden;
+
 		const serieses = this._chartModel.serieses();
 		const timePointIndex = this._crosshair.appliedIndex();
 		const timeScale = this._chartModel.timeScale();
@@ -78,7 +80,7 @@ export class CrosshairMarksPaneView implements IUpdatablePaneView {
 			const data = this._markersData[index];
 			const seriesData = s.markerDataAtIndex(timePointIndex);
 
-			if (seriesData === null || !s.visible()) {
+			if (forceHidden || seriesData === null || !s.visible()) {
 				data.visibleRange = null;
 				return;
 			}

src/views/pane/crosshair-pane-view.ts

@@ -1,6 +1,6 @@
 import { ensureNotNull } from '../../helpers/assertions';
 
-import { Crosshair } from '../../model/crosshair';
+import { Crosshair, CrosshairMode } from '../../model/crosshair';
 import { CrosshairRenderer, CrosshairRendererData } from '../../renderers/crosshair-renderer';
 import { IPaneRenderer } from '../../renderers/ipane-renderer';
 
@@ -51,6 +51,12 @@ export class CrosshairPaneView implements IPaneView {
 
 		const data = this._rendererData;
 
+		if (crosshairOptions.mode === CrosshairMode.Hidden) {
+			data.horzLine.visible = false;
+			data.vertLine.visible = false;
+			return;
+		}
+
 		data.horzLine.visible = visible && this._source.horzLineVisible(pane);
 		data.vertLine.visible = visible && this._source.vertLineVisible();
 

src/views/price-axis/crosshair-price-axis-view.ts

@@ -1,6 +1,6 @@
 import { generateContrastColors } from '../../helpers/color';
 
-import { Crosshair, CrosshairPriceAndCoordinate } from '../../model/crosshair';
+import { Crosshair, CrosshairMode, CrosshairPriceAndCoordinate } from '../../model/crosshair';
 import { PriceScale } from '../../model/price-scale';
 import { PriceAxisViewRendererCommonData, PriceAxisViewRendererData } from '../../renderers/iprice-axis-view-renderer';
 
@@ -26,6 +26,10 @@ export class CrosshairPriceAxisView extends PriceAxisView {
 		commonRendererData: PriceAxisViewRendererCommonData
 	): void {
 		axisRendererData.visible = false;
+		if (this._source.options().mode === CrosshairMode.Hidden) {
+			return;
+		}
+
 		const options = this._source.options().horzLine;
 		if (!options.labelVisible) {
 			return;

src/views/time-axis/crosshair-time-axis-view.ts

@@ -2,7 +2,7 @@ import { ensureNotNull } from '../../helpers/assertions';
 import { generateContrastColors } from '../../helpers/color';
 
 import { IChartModelBase } from '../../model/chart-model';
-import { Crosshair, TimeAndCoordinateProvider } from '../../model/crosshair';
+import { Crosshair, CrosshairMode, TimeAndCoordinateProvider } from '../../model/crosshair';
 import { TimeAxisViewRenderer, TimeAxisViewRendererData } from '../../renderers/time-axis-view-renderer';
 
 import { ITimeAxisView } from './itime-axis-view';
@@ -48,6 +48,10 @@ export class CrosshairTimeAxisView implements ITimeAxisView {
 		const data = this._rendererData;
 		data.visible = false;
 
+		if (this._crosshair.options().mode === CrosshairMode.Hidden) {
+			return;
+		}
+
 		const options = this._crosshair.options().vertLine;
 
 		if (!options.labelVisible) {

tests/e2e/graphics/test-cases/applying-options/crosshair-mode-hidden-unhide.js

@@ -0,0 +1,62 @@
+function generateData() {
+	const res = [];
+	const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
+	for (let i = 0; i < 500; ++i) {
+		res.push({
+			time: time.getTime() / 1000,
+			value: i,
+		});
+
+		time.setUTCDate(time.getUTCDate() + 1);
+	}
+	return res;
+}
+
+/*
+    Start with the crosshair hidden
+    then hide it
+    and then show it again.
+    -> Should be visible.
+ */
+function runTestCase(container) {
+	const chart = window.chart = LightweightCharts.createChart(container, {
+		crosshair: {
+			vertLine: {
+				color: '#FF0000',
+				width: 5,
+				visible: true,
+				style: 0, // solid
+			},
+			horzLine: {
+				color: '#00FF00',
+				width: 5,
+				visible: true,
+				style: 0, // solid
+			},
+			mode: LightweightCharts.CrosshairMode.Normal,
+		},
+	});
+
+	const mainSeries = chart.addLineSeries();
+
+	mainSeries.setData(generateData());
+
+	return new Promise(resolve => {
+		setTimeout(() => {
+			chart.applyOptions({
+				crosshair: {
+					mode: LightweightCharts.CrosshairMode.Hidden,
+				},
+			});
+			setTimeout(() => {
+				chart.applyOptions({
+					crosshair: {
+						mode: LightweightCharts.CrosshairMode.Normal,
+					},
+				});
+
+				resolve();
+			}, 100);
+		}, 100);
+	});
+}

tests/e2e/graphics/test-cases/applying-options/crosshair-mode-hidden.js

@@ -0,0 +1,49 @@
+function generateData() {
+	const res = [];
+	const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
+	for (let i = 0; i < 500; ++i) {
+		res.push({
+			time: time.getTime() / 1000,
+			value: i,
+		});
+
+		time.setUTCDate(time.getUTCDate() + 1);
+	}
+	return res;
+}
+
+function runTestCase(container) {
+	const chart = window.chart = LightweightCharts.createChart(container, {
+		crosshair: {
+			vertLine: {
+				color: '#FF0000',
+				width: 5,
+				visible: true,
+				style: 0, // solid
+			},
+			horzLine: {
+				color: '#00FF00',
+				width: 5,
+				visible: true,
+				style: 0, // solid
+			},
+			mode: LightweightCharts.CrosshairMode.Normal,
+		},
+	});
+
+	const mainSeries = chart.addLineSeries();
+
+	mainSeries.setData(generateData());
+
+	return new Promise(resolve => {
+		setTimeout(() => {
+			chart.applyOptions({
+				crosshair: {
+					mode: LightweightCharts.CrosshairMode.Hidden,
+				},
+			});
+
+			resolve();
+		}, 100);
+	});
+}

tests/e2e/graphics/test-cases/initial-options/crosshair-mode-hidden.js

@@ -0,0 +1,37 @@
+function generateData() {
+	const res = [];
+	const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
+	for (let i = 0; i < 500; ++i) {
+		res.push({
+			time: time.getTime() / 1000,
+			value: i,
+		});
+
+		time.setUTCDate(time.getUTCDate() + 1);
+	}
+	return res;
+}
+
+function runTestCase(container) {
+	const chart = window.chart = LightweightCharts.createChart(container, {
+		crosshair: {
+			vertLine: {
+				color: '#FF0000',
+				width: 5,
+				visible: true,
+				style: 0, // solid
+			},
+			horzLine: {
+				color: '#00FF00',
+				width: 5,
+				visible: true,
+				style: 0, // solid
+			},
+			mode: LightweightCharts.CrosshairMode.Hidden,
+		},
+	});
+
+	const mainSeries = chart.addLineSeries();
+
+	mainSeries.setData(generateData());
+}