From 074763db1d5b29af5a16def9a173892075ad7faf Mon Sep 17 00:00:00 2001 From: Anton Vorobev Date: Mon, 16 Dec 2024 09:03:54 +0000 Subject: [PATCH] Pull request #5381: Bugfix/DXCF-5485 drawings candles jump during animation Merge in DXCHARTS/dxchart5 from bugfix/DXCF-5485-drawings-candles-jump-during-animation to master * commit 'a56c1b651afdc0bca13c70f36e34debd55e7356d': [DXCF-5485] Drawings - Candles jump during animation // histogram fix [DXCF-5485] Drawings - Candles jump during animation // fix imports [DXCF-5485] Drawings - Candles jump during animation // init [DXCF-5485] Drawings - Candles jump during animation // init GitOrigin-RevId: f1b9186a7eef29bd93f417df482e757af71e38ae --- .../drawers/chart-type-drawers/area.drawer.ts | 2 +- .../drawers/chart-type-drawers/bar.drawer.ts | 8 +++---- .../chart-type-drawers/candle.drawer.ts | 10 ++++---- .../chart-type-drawers/histogram.drawer.ts | 2 +- .../chart-type-drawers/scatter-plot.drawer.ts | 5 ++-- .../trend-histogram.drawer.ts | 13 +++++------ src/chart/model/visual-candle.ts | 23 +++++++++---------- 7 files changed, 30 insertions(+), 33 deletions(-) diff --git a/src/chart/drawers/chart-type-drawers/area.drawer.ts b/src/chart/drawers/chart-type-drawers/area.drawer.ts index 07d02c5..51dadd3 100644 --- a/src/chart/drawers/chart-type-drawers/area.drawer.ts +++ b/src/chart/drawers/chart-type-drawers/area.drawer.ts @@ -75,7 +75,7 @@ export class AreaDrawer implements SeriesDrawer { } ctx.fill(); } else { - ctx.lineTo(floor(lineX), closeY); + ctx.lineTo(lineX, closeY); } } } diff --git a/src/chart/drawers/chart-type-drawers/bar.drawer.ts b/src/chart/drawers/chart-type-drawers/bar.drawer.ts index e18f863..c4d4a79 100644 --- a/src/chart/drawers/chart-type-drawers/bar.drawer.ts +++ b/src/chart/drawers/chart-type-drawers/bar.drawer.ts @@ -45,12 +45,12 @@ export class BarDrawer implements SeriesDrawer { for (const visualCandle of visualCandles) { this.setFillStyle(ctx, drawerConfig, candleSeries, visualCandle); ctx.beginPath(); - const bodyLineX = floorToDPR(candleSeries.view.toX(visualCandle.centerUnit)); - const openLineStartX = floorToDPR(candleSeries.view.toX(visualCandle.startUnit)); + const bodyLineX = candleSeries.view.toX(visualCandle.centerUnit); + const openLineStartX = candleSeries.view.toX(visualCandle.startUnit); const [wickStartY, bodyStartY, bodyEndY, wickEndY] = visualCandle.yBodyKeyPoints(candleSeries.view); const w = floorToDPR(candleSeries.view.xPixels(visualCandle.width) / 2); - const bodyCloseY = floorToDPR(candleSeries.view.toY(visualCandle.close)); - const bodyOpenY = floorToDPR(candleSeries.view.toY(visualCandle.open)); + const bodyCloseY = candleSeries.view.toY(visualCandle.close); + const bodyOpenY = candleSeries.view.toY(visualCandle.open); if (this.config.showWicks) { ctx.moveTo(bodyLineX, wickStartY); diff --git a/src/chart/drawers/chart-type-drawers/candle.drawer.ts b/src/chart/drawers/chart-type-drawers/candle.drawer.ts index de712b9..82cdf63 100644 --- a/src/chart/drawers/chart-type-drawers/candle.drawer.ts +++ b/src/chart/drawers/chart-type-drawers/candle.drawer.ts @@ -7,7 +7,7 @@ import { CandleSeriesModel } from '../../model/candle-series.model'; import { CandleTheme, ChartConfigComponentsChart } from '../../chart.config'; import VisualCandle from '../../model/visual-candle'; import { avoidAntialiasing } from '../../utils/canvas/canvas-drawing-functions.utils'; -import { dpr, floorToDPR } from '../../utils/device/device-pixel-ratio.utils'; +import { dpr } from '../../utils/device/device-pixel-ratio.utils'; import { ChartDrawerConfig, SeriesDrawer, setLineWidth } from '../data-series.drawer'; import { DataSeriesModel, VisualSeriesPoint } from '../../model/data-series.model'; import { flat } from '../../utils/array.utils'; @@ -83,8 +83,8 @@ export class CandleDrawer implements SeriesDrawer { ctx.fillStyle = currentCandleTheme[`${direction}Color`]; } - const baseX = floorToDPR(candleSeries.view.toX(visualCandle.startUnit)); - const width = floorToDPR(candleSeries.view.xPixels(visualCandle.width)); + const baseX = candleSeries.view.toX(visualCandle.startUnit); + const width = candleSeries.view.xPixels(visualCandle.width); const bodyH = visualCandle.bodyHeight(candleSeries.view); const [lineStart, bodyStart, _bodyEnd, _lineEnd] = visualCandle.yBodyKeyPoints(candleSeries.view); @@ -149,9 +149,9 @@ export class CandleDrawer implements SeriesDrawer { const wickX = visualCandle.x(candleSeries.view); // candles' wick doesn't touch body end, so subtract 1 // we will rework the drawer in future, so let's keep it this way for now - this.drawCandlesWicks(ctx, wickX, lineStart, lineEnd, bodyStart, bodyEnd - 1); + this.drawCandlesWicks(ctx, wickX, lineStart, lineEnd, bodyStart, bodyEnd); const paddingPercent = this.config.candlePaddingPercent; - const paddingWidthOffset = Math.max(floorToDPR((width * paddingPercent) / 2), this.pixelLength); + const paddingWidthOffset = Math.max((width * paddingPercent) / 2, this.pixelLength); const paddingBaseX = baseX + paddingWidthOffset; const paddingWidth = width - paddingWidthOffset * 2; if (!isHollow) { diff --git a/src/chart/drawers/chart-type-drawers/histogram.drawer.ts b/src/chart/drawers/chart-type-drawers/histogram.drawer.ts index b81734a..fbd56b8 100644 --- a/src/chart/drawers/chart-type-drawers/histogram.drawer.ts +++ b/src/chart/drawers/chart-type-drawers/histogram.drawer.ts @@ -40,7 +40,7 @@ export class HistogramDrawer implements SeriesDrawer { // histogram cap const baseX = visualCandle.xStart(model.view); - const closeY = floorToDPR(model.view.toY(visualCandle.close)); + const closeY = model.view.toY(visualCandle.close); const width = floorToDPR(model.view.xPixels(visualCandle.width)); ctx.fillRect(baseX, closeY, width, capHeight); diff --git a/src/chart/drawers/chart-type-drawers/scatter-plot.drawer.ts b/src/chart/drawers/chart-type-drawers/scatter-plot.drawer.ts index 9d83991..c70e41e 100644 --- a/src/chart/drawers/chart-type-drawers/scatter-plot.drawer.ts +++ b/src/chart/drawers/chart-type-drawers/scatter-plot.drawer.ts @@ -6,7 +6,6 @@ import { ScatterPlotStyle } from '../../chart.config'; import { DataSeriesModel, VisualSeriesPoint } from '../../model/data-series.model'; import { flat } from '../../utils/array.utils'; -import { floorToDPR } from '../../utils/device/device-pixel-ratio.utils'; import { ChartDrawerConfig, SeriesDrawer } from '../data-series.drawer'; const SCATTER_PLOT_RADIUS = 1.5; @@ -23,8 +22,8 @@ export class ScatterPlotDrawer implements SeriesDrawer { ctx.fillStyle = drawerConfig.singleColor ?? this.config.mainColor; for (const visualCandle of flat(points)) { ctx.beginPath(); - const lineX = floorToDPR(model.view.toX(visualCandle.centerUnit)); - const closeY = floorToDPR(model.view.toY(visualCandle.close)); + const lineX = model.view.toX(visualCandle.centerUnit); + const closeY = model.view.toY(visualCandle.close); ctx.arc(lineX, closeY, SCATTER_PLOT_RADIUS, 0, Math.PI * 2, true); ctx.fill(); } diff --git a/src/chart/drawers/data-series-drawers/trend-histogram.drawer.ts b/src/chart/drawers/data-series-drawers/trend-histogram.drawer.ts index 26784bf..74f510b 100644 --- a/src/chart/drawers/data-series-drawers/trend-histogram.drawer.ts +++ b/src/chart/drawers/data-series-drawers/trend-histogram.drawer.ts @@ -6,7 +6,6 @@ import { VisualSeriesPoint, DataSeriesModel } from '../../model/data-series.model'; import { flat } from '../../utils/array.utils'; -import { floor } from '../../utils/math.utils'; import { SeriesDrawer } from '../data-series.drawer'; export class TrendHistogramDrawer implements SeriesDrawer { @@ -32,8 +31,8 @@ export class TrendHistogramDrawer implements SeriesDrawer { ctx.beginPath(); const x = model.view.toX(point.centerUnit); const y = model.view.toY(point.close); - ctx.moveTo(x, floor(zero)); - ctx.lineTo(x, floor(y)); + ctx.moveTo(x, zero); + ctx.lineTo(x, y); ctx.stroke(); return; } @@ -56,8 +55,8 @@ export class TrendHistogramDrawer implements SeriesDrawer { ctx.beginPath(); const x = model.view.toX(point.centerUnit); const y = model.view.toY(point.close); - ctx.moveTo(x, floor(zero)); - ctx.lineTo(x, floor(y)); + ctx.moveTo(x, zero); + ctx.lineTo(x, y); ctx.stroke(); return; } @@ -67,8 +66,8 @@ export class TrendHistogramDrawer implements SeriesDrawer { ctx.beginPath(); const x = model.view.toX(point.centerUnit); const y = model.view.toY(point.close); - ctx.moveTo(x, floor(zero)); - ctx.lineTo(x, floor(y)); + ctx.moveTo(x, zero); + ctx.lineTo(x, y); ctx.stroke(); }); } diff --git a/src/chart/model/visual-candle.ts b/src/chart/model/visual-candle.ts index 576b9d3..98effc4 100644 --- a/src/chart/model/visual-candle.ts +++ b/src/chart/model/visual-candle.ts @@ -3,7 +3,6 @@ * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/. */ -import { floorToDPR, roundToDPR } from '../utils/device/device-pixel-ratio.utils'; import { Candle } from './candle.model'; import { Pixel, Unit, Viewable } from './scaling/viewport.model'; import { PriceMovement } from './candle-series.model'; @@ -66,7 +65,7 @@ export default class VisualCandle extends VisualSeriesPoint { * @returns {Pixel} - The height of the body in pixels. */ bodyHeight(viewable: Viewable): Pixel { - return floorToDPR(Math.max(Math.abs(viewable.toY(this.open) - viewable.toY(this.close)), 1)); + return Math.max(Math.abs(viewable.toY(this.open) - viewable.toY(this.close)), 1); } /** * Calculates the height of a candle in pixels based on the high and low values of the candle and the viewable area. @@ -75,7 +74,7 @@ export default class VisualCandle extends VisualSeriesPoint { * @returns {Pixel} - The height of the candle in pixels. */ candleHeight(viewable: Viewable): Pixel { - return floorToDPR(Math.abs(viewable.toY(this.high) - viewable.toY(this.low))); + return Math.abs(viewable.toY(this.high) - viewable.toY(this.low)); } /** * Returns coordinates of vertical line used to draw candle's body in case of small candle width @@ -106,10 +105,10 @@ export default class VisualCandle extends VisualSeriesPoint { * Returns candle Y points in ascending order */ yBodyKeyPoints(viewable: Viewable): [Pixel, Pixel, Pixel, Pixel] { - const highY = floorToDPR(viewable.toY(this.high)); - const lowY = floorToDPR(viewable.toY(this.low)); - const openY = floorToDPR(viewable.toY(this.open)); - const closeY = floorToDPR(viewable.toY(this.close)); + const highY = viewable.toY(this.high); + const lowY = viewable.toY(this.low); + const openY = viewable.toY(this.open); + const closeY = viewable.toY(this.close); const [bodyStart, bodyEnd] = openY > closeY ? [closeY, openY] : [openY, closeY]; const [lineStart, lineEnd] = highY > lowY ? [lowY, highY] : [highY, lowY]; return [lineStart, bodyStart, bodyEnd, lineEnd]; @@ -120,7 +119,7 @@ export default class VisualCandle extends VisualSeriesPoint { * @returns {Pixel} - The y-coordinate of the end of the line segment in pixels. */ yLineEnd(viewable: Viewable): Pixel { - return floorToDPR(Math.max(viewable.toY(this.high), viewable.toY(this.low))); + return Math.max(viewable.toY(this.high), viewable.toY(this.low)); } /** * Returns the pixel value of the starting point of the y-axis line on the given viewable area. @@ -128,7 +127,7 @@ export default class VisualCandle extends VisualSeriesPoint { * @returns {Pixel} - The pixel value of the starting point of the y-axis line. */ yLineStart(viewable: Viewable): Pixel { - return floorToDPR(Math.min(viewable.toY(this.high), viewable.toY(this.low))); + return Math.min(viewable.toY(this.high), viewable.toY(this.low)); } /** * Calculates the starting y-coordinate of the body of a viewable object. @@ -136,7 +135,7 @@ export default class VisualCandle extends VisualSeriesPoint { * @returns {Pixel} - The starting y-coordinate of the body of the viewable object. */ yBodyStart(viewable: Viewable): Pixel { - return floorToDPR(Math.min(viewable.toY(this.open), viewable.toY(this.close))); + return Math.min(viewable.toY(this.open), viewable.toY(this.close)); } /** * Calculates the maximum pixel value of the y-coordinate of the viewable object's end point and the open and close values of the current object. @@ -144,7 +143,7 @@ export default class VisualCandle extends VisualSeriesPoint { * @returns {Pixel} - The maximum pixel value of the y-coordinate of the viewable object's end point and the open and close values of the current object. */ yBodyEnd(viewable: Viewable): Pixel { - return floorToDPR(Math.max(viewable.toY(this.open), viewable.toY(this.close))); + return Math.max(viewable.toY(this.open), viewable.toY(this.close)); } /** * Calculates the x-coordinate of the center of a viewable object in pixels. @@ -161,6 +160,6 @@ export default class VisualCandle extends VisualSeriesPoint { * @returns {Pixel} - The starting pixel position of the viewable object */ xStart(viewable: Viewable): Pixel { - return roundToDPR(viewable.toX(this.startUnit)); + return viewable.toX(this.startUnit); } }