Pull request #5381: Bugfix/DXCF-5485 drawings candles jump during ani…

…mation

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

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);
 				}
 			}
 		}

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);

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) {

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);
 

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();
 		}

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();
 		});
 	}

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,31 +119,31 @@ 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.
 	 * @param {Viewable} viewable - The viewable area to calculate the pixel value on.
 	 * @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.
 	 * @param {Viewable} viewable - The viewable object for which the starting y-coordinate of the body is to be calculated.
 	 * @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.
 	 * @param {Viewable} viewable - The viewable object whose end point is to be compared with the open and close values of the current object.
 	 * @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);
 	}
 }