From b9010cdaec00a99138783ece7bbbe7539c455122 Mon Sep 17 00:00:00 2001 From: Oleg Chernenko Date: Thu, 14 Apr 2022 20:52:03 +0300 Subject: [PATCH 1/2] Add the ability to set width of the border of the crosshair marker #1059 --- src/api/options/series-options-defaults.ts | 3 ++ src/model/series-options.ts | 18 ++++++++++ src/model/series.ts | 15 +++++++- src/renderers/marks-renderer.ts | 7 ++-- src/views/pane/crosshair-marks-pane-view.ts | 2 ++ .../series/crosshair-marker-border-width.js | 35 +++++++++++++++++++ 6 files changed, 77 insertions(+), 3 deletions(-) create mode 100644 tests/e2e/graphics/test-cases/series/crosshair-marker-border-width.js diff --git a/src/api/options/series-options-defaults.ts b/src/api/options/series-options-defaults.ts index 93aacf3ab7..a2611e2968 100644 --- a/src/api/options/series-options-defaults.ts +++ b/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, }; @@ -53,6 +54,7 @@ export const areaStyleDefaults: AreaStyleOptions = { crosshairMarkerVisible: true, crosshairMarkerRadius: 4, crosshairMarkerBorderColor: '', + crosshairMarkerBorderWidth: 2, crosshairMarkerBackgroundColor: '', lastPriceAnimation: LastPriceAnimationMode.Disabled, }; @@ -78,6 +80,7 @@ export const baselineStyleDefaults: BaselineStyleOptions = { crosshairMarkerVisible: true, crosshairMarkerRadius: 4, crosshairMarkerBorderColor: '', + crosshairMarkerBorderWidth: 2, crosshairMarkerBackgroundColor: '', lastPriceAnimation: LastPriceAnimationMode.Disabled, diff --git a/src/model/series-options.ts b/src/model/series-options.ts index c139fdd371..4c0d0e3b46 100644 --- a/src/model/series-options.ts +++ b/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. @@ -277,6 +283,12 @@ export interface AreaStyleOptions { * @defaultValue `''` */ crosshairMarkerBackgroundColor: string; + /** + * Crosshair marker border width in pixels. + * + * @defaultValue `2` + */ + crosshairMarkerBorderWidth: number; /** * Last price animation mode. @@ -398,6 +410,12 @@ export interface BaselineStyleOptions { * @defaultValue `''` */ crosshairMarkerBackgroundColor: string; + /** + * Crosshair marker border width in pixels. + * + * @defaultValue `2` + */ + crosshairMarkerBorderWidth: number; /** * Last price animation mode. diff --git a/src/model/series.ts b/src/model/series.ts index c7abfd86d6..afd2dc48b2 100644 --- a/src/model/series.ts +++ b/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 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 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': diff --git a/src/renderers/marks-renderer.ts b/src/renderers/marks-renderer.ts index 805b7ae3a7..85df7bb387 100644 --- a/src/renderers/marks-renderer.ts +++ b/src/renderers/marks-renderer.ts @@ -6,6 +6,7 @@ import { ScaledRenderer } from './scaled-renderer'; export interface MarksRendererData { items: LineItem[]; 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); diff --git a/src/views/pane/crosshair-marks-pane-view.ts b/src/views/pane/crosshair-marks-pane-view.ts index 2d6abf731a..6c59998e1e 100644 --- a/src/views/pane/crosshair-marks-pane-view.ts +++ b/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); diff --git a/tests/e2e/graphics/test-cases/series/crosshair-marker-border-width.js b/tests/e2e/graphics/test-cases/series/crosshair-marker-border-width.js new file mode 100644 index 0000000000..dd2d1ec3e7 --- /dev/null +++ b/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 = 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)); +} From d20df5670a8160f415443e5aa8ed27f2821e72db Mon Sep 17 00:00:00 2001 From: ochernenko Date: Wed, 2 Nov 2022 14:52:32 +0400 Subject: [PATCH 2/2] Fix test --- .../graphics/test-cases/series/crosshair-marker-border-width.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/e2e/graphics/test-cases/series/crosshair-marker-border-width.js b/tests/e2e/graphics/test-cases/series/crosshair-marker-border-width.js index dd2d1ec3e7..2b5acb2fa3 100644 --- a/tests/e2e/graphics/test-cases/series/crosshair-marker-border-width.js +++ b/tests/e2e/graphics/test-cases/series/crosshair-marker-border-width.js @@ -16,7 +16,7 @@ function generateData(step) { } function runTestCase(container) { - const chart = LightweightCharts.createChart(container); + const chart = window.chart = LightweightCharts.createChart(container); const areaSeries = chart.addAreaSeries({ crosshairMarkerBorderWidth: 5,