Merge pull request #1060 from olegchernenko/master

Add the ability to set width of the border of the crosshair marker #1059

src/api/options/series-options-defaults.ts

@@ -39,6 +39,7 @@ export const lineStyleDefaults: LineStyleOptions = {
 	crosshairMarkerVisible: true,
 	crosshairMarkerRadius: 4,
 	crosshairMarkerBorderColor: '',
+	crosshairMarkerBorderWidth: 2,
 	crosshairMarkerBackgroundColor: '',
 	lastPriceAnimation: LastPriceAnimationMode.Disabled,
 };
@@ -54,6 +55,7 @@ export const areaStyleDefaults: AreaStyleOptions = {
 	crosshairMarkerVisible: true,
 	crosshairMarkerRadius: 4,
 	crosshairMarkerBorderColor: '',
+	crosshairMarkerBorderWidth: 2,
 	crosshairMarkerBackgroundColor: '',
 	lastPriceAnimation: LastPriceAnimationMode.Disabled,
 };
@@ -79,6 +81,7 @@ export const baselineStyleDefaults: BaselineStyleOptions = {
 	crosshairMarkerVisible: true,
 	crosshairMarkerRadius: 4,
 	crosshairMarkerBorderColor: '',
+	crosshairMarkerBorderWidth: 2,
 	crosshairMarkerBackgroundColor: '',
 
 	lastPriceAnimation: LastPriceAnimationMode.Disabled,

src/model/series-options.ts

@@ -198,6 +198,12 @@ export interface LineStyleOptions {
 	 * @defaultValue `''`
 	 */
 	crosshairMarkerBackgroundColor: string;
+	/**
+	 * Crosshair marker border width in pixels.
+	 *
+	 * @defaultValue `2`
+	 */
+	crosshairMarkerBorderWidth: number;
 
 	/**
 	 * Last price animation mode.
@@ -284,6 +290,12 @@ export interface AreaStyleOptions {
 	 * @defaultValue `''`
 	 */
 	crosshairMarkerBackgroundColor: string;
+	/**
+	 * Crosshair marker border width in pixels.
+	 *
+	 * @defaultValue `2`
+	 */
+	crosshairMarkerBorderWidth: number;
 
 	/**
 	 * Last price animation mode.
@@ -405,6 +417,12 @@ export interface BaselineStyleOptions {
 	 * @defaultValue `''`
 	 */
 	crosshairMarkerBackgroundColor: string;
+	/**
+	 * Crosshair marker border width in pixels.
+	 *
+	 * @defaultValue `2`
+	 */
+	crosshairMarkerBorderWidth: number;
 
 	/**
 	 * Last price animation mode.

src/model/series.ts

@@ -73,6 +73,7 @@ export interface MarkerData {
 	price: BarPrice;
 	radius: number;
 	borderColor: string | null;
+	borderWidth: number;
 	backgroundColor: string;
 }
 
@@ -453,8 +454,9 @@ export class Series<T extends SeriesType = SeriesType> extends PriceDataSource i
 		const price = bar.value[PlotRowValueIndex.Close] as BarPrice;
 		const radius = this._markerRadius();
 		const borderColor = this._markerBorderColor();
+		const borderWidth = this._markerBorderWidth();
 		const backgroundColor = this._markerBackgroundColor(index);
-		return { price, radius, borderColor, backgroundColor };
+		return { price, radius, borderColor, borderWidth, backgroundColor };
 	}
 
 	public title(): string {
@@ -520,6 +522,17 @@ export class Series<T extends SeriesType = SeriesType> extends PriceDataSource i
 		return null;
 	}
 
+	private _markerBorderWidth(): number {
+		switch (this._seriesType) {
+			case 'Line':
+			case 'Area':
+			case 'Baseline':
+				return (this._options as (LineStyleOptions | AreaStyleOptions | BaselineStyleOptions)).crosshairMarkerBorderWidth;
+		}
+
+		return 0;
+	}
+
 	private _markerBackgroundColor(index: TimePointIndex): string {
 		switch (this._seriesType) {
 			case 'Line':

src/renderers/marks-renderer.ts

@@ -6,6 +6,7 @@ import { ScaledRenderer } from './scaled-renderer';
 export interface MarksRendererData {
 	items: LineItemBase[];
 	lineColor: string;
+	lineWidth: number;
 	backColor: string;
 	radius: number;
 	visibleRange: SeriesItemsIndexesRange | null;
@@ -38,8 +39,10 @@ export class PaneRendererMarks extends ScaledRenderer {
 			ctx.fill();
 		};
 
-		ctx.fillStyle = data.backColor;
-		draw(data.radius + 2);
+		if (data.lineWidth > 0) {
+			ctx.fillStyle = data.backColor;
+			draw(data.radius + data.lineWidth);
+		}
 
 		ctx.fillStyle = data.lineColor;
 		draw(data.radius);

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

@@ -23,6 +23,7 @@ function createEmptyMarkerData(): MarksRendererData {
 		lineColor: '',
 		backColor: '',
 		radius: 0,
+		lineWidth: 0,
 		visibleRange: null,
 	};
 }
@@ -84,6 +85,7 @@ export class CrosshairMarksPaneView implements IUpdatablePaneView {
 			const firstValue = ensureNotNull(s.firstValue());
 			data.lineColor = seriesData.backgroundColor;
 			data.radius = seriesData.radius;
+			data.lineWidth = seriesData.borderWidth;
 			data.items[0].price = seriesData.price;
 			data.items[0].y = s.priceScale().priceToCoordinate(seriesData.price, firstValue.value);
 			data.backColor = seriesData.borderColor ?? this._chartModel.backgroundColorAtYPercentFromTop(data.items[0].y / height);

tests/e2e/graphics/test-cases/series/crosshair-marker-border-width.js

@@ -0,0 +1,35 @@
+function generateData(step) {
+	const res = [];
+	const time = new Date(Date.UTC(2018, 0, 1, 0, 0, 0, 0));
+	let value = step > 0 ? 0 : 500;
+	for (let i = 0; i < 500; ++i) {
+		res.push({
+			time: time.getTime() / 1000,
+			value: value,
+		});
+
+		value += step;
+
+		time.setUTCDate(time.getUTCDate() + 1);
+	}
+	return res;
+}
+
+function runTestCase(container) {
+	const chart = window.chart = LightweightCharts.createChart(container);
+
+	const areaSeries = chart.addAreaSeries({
+		crosshairMarkerBorderWidth: 5,
+		crosshairMarkerBorderColor: 'yellow',
+		crosshairMarkerBackgroundColor: 'red',
+	});
+
+	const lineSeries = chart.addLineSeries({
+		crosshairMarkerBorderWidth: 1,
+		crosshairMarkerBorderColor: 'blue',
+		crosshairMarkerBackgroundColor: 'green',
+	});
+
+	areaSeries.setData(generateData(1));
+	lineSeries.setData(generateData(-1));
+}