Pull request #5511: Feature/DXCF-5871 visual improvements for multiple scales

Merge in DXCHARTS/dxchart5 from feature/DXCF-5871-visual-improvements-for-multiple-scales to master

* commit '55c72f5e1176b7deec692f8456cbea61a5c304ac': (25 commits)
  CI: update snapshots
  [DXCF-5871] Visual improvements for multiple scales // copy
  [DXCF-5871] Visual improvements for multiple scales // copyright
  [DXCF-5871] Visual improvements for multiple scales // pr fix
  [DXCF-5871] Visual improvements for multiple scales // pr fix
  [DXCF-5871] Visual improvements for multiple scales // pr fix
  [DXCF-5871] Visual improvements for multiple scales // pr fix
  [DXCF-5871] Visual improvements for multiple scales // pr fix
  [DXCF-5871] Visual improvements for multiple scales // pr fix
  CI: update snapshots
  [DXCF-5871] Visual improvements for multiple scales // remove copy
  [DXCF-5871] Visual improvements for multiple scales // pr fix
  [DXCF-5871] Visual improvements for multiple scales // pr fix
  [DXCF-5871] Visual improvements for multiple scales // pr fix
  [DXCF-5871] Visual improvements for multiple scales // pr fix
  [DXCF-5871] Visual improvements for multiple scales // pr fix
  [DXCF-5871] Visual improvements for multiple scales // pr fix
  [DXCF-5871] Visual improvements for multiple scales // init
  [DXCF-5871] Visual improvements for multiple scales // init
  [DXCF-5871] Visual improvements for multiple scales // init
  ...

GitOrigin-RevId: 547298504de4c8ee30d805ced4cfd40321746449

Author: Keelaro1

src/chart/bootstrap.ts

@@ -223,6 +223,14 @@ export default class ChartBootstrap {
 			this.canvasModels,
 			elements.chartResizer,
 		);
+		const yAxisDescriptionsCanvasModel = createCanvasModel(
+			eventBus,
+			elements.yAxisDescriptionsCanvas,
+			config,
+			drawingManager,
+			this.canvasModels,
+			elements.chartResizer,
+		);
 		const canvasBoundsContainer = new CanvasBoundsContainer(
 			config,
 			eventBus,
@@ -457,7 +465,7 @@ export default class ChartBootstrap {
 		);
 		this.chartComponents.push(highLowComponent);
 
-		this.initYAxisDrawer(yAxisLabelsCanvasModel);
+		this.initYAxisDrawer(yAxisLabelsCanvasModel, yAxisDescriptionsCanvasModel);
 
 		this.yAxisComponent = mainPane.mainExtent.yAxis;
 		// default labels provider
@@ -558,24 +566,27 @@ export default class ChartBootstrap {
 		this.clearer = clearerSafe(this.components);
 	}
 
-	private initYAxisDrawer(yAxisLabelsCanvasModel: CanvasModel) {
+	private initYAxisDrawer(yAxisLabelsCanvasModel: CanvasModel, yAxisDescriptionsCanvasModel: CanvasModel) {
 		const yAxisCompositeDrawer = new CompositeDrawer();
 		const clearYAxis = new ClearCanvasDrawer(yAxisLabelsCanvasModel);
+		const clearYAxisDescriptions = new ClearCanvasDrawer(yAxisDescriptionsCanvasModel);
 		yAxisCompositeDrawer.addDrawer(clearYAxis, 'YAXIS_CLEAR');
+		yAxisCompositeDrawer.addDrawer(clearYAxisDescriptions, 'Y_AXIS_DESCRIPTIONS_CLEAR');
 
 		this.drawingManager.addDrawer(yAxisCompositeDrawer, 'Y_AXIS');
 
 		const yAxisDrawer = new YAxisDrawer(this.config, yAxisLabelsCanvasModel, this.paneManager);
 		yAxisCompositeDrawer.addDrawer(yAxisDrawer);
 
-		const yAxisLabelsDrawer = new YAxisPriceLabelsDrawer(
+		const yAxisPriceLabelsDrawer = new YAxisPriceLabelsDrawer(
 			yAxisLabelsCanvasModel,
+			yAxisDescriptionsCanvasModel,
 			this.backgroundCanvasModel,
 			this.canvasBoundsContainer,
 			this.config,
 			this.paneManager,
 		);
-		yAxisCompositeDrawer.addDrawer(yAxisLabelsDrawer);
+		this.drawingManager.addDrawer(yAxisPriceLabelsDrawer, 'Y_AXIS_PRICE_LABELS');
 	}
 
 	// TODO remove chartModel dependency, put period to global config somewhere

src/chart/canvas/canvas-chart-html.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 - 2024 Devexperts Solutions IE Limited
+ * Copyright (C) 2019 - 2025 Devexperts Solutions IE Limited
  * 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/.
  */
@@ -12,6 +12,7 @@ export default (devexpertsPromoLink: boolean) =>
 	'\t\t\t<canvas data-element="mainCanvas"></canvas>\n' +
 	'\t\t\t<canvas data-element="yAxisLabelsCanvas"></canvas>\n' +
 	'\t\t\t<canvas data-element="dynamicObjectsCanvas"></canvas>\n' +
+	'\t\t\t<canvas data-element="yAxisDescriptionsCanvas"></canvas>\n' +
 	'\t\t\t<canvas data-element="crossToolCanvas"></canvas>\n' +
 	'\t\t\t<canvas data-element="hitTestCanvas"></canvas>\n' +
 	`${

src/chart/canvas/chart-elements.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 - 2024 Devexperts Solutions IE Limited
+ * Copyright (C) 2019 - 2025 Devexperts Solutions IE Limited
  * 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/.
  */
@@ -10,6 +10,7 @@ export interface ChartElements {
 	mainCanvas?: HTMLCanvasElement;
 	dynamicObjectsCanvas?: HTMLCanvasElement;
 	yAxisLabelsCanvas?: HTMLCanvasElement;
+	yAxisDescriptionsCanvas?: HTMLCanvasElement;
 	crossToolCanvas?: HTMLCanvasElement;
 	hitTestCanvas?: HTMLCanvasElement;
 	chartResizer?: HTMLElement;

src/chart/components/y_axis/price_labels/price-label.drawer.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 - 2024 Devexperts Solutions IE Limited
+ * Copyright (C) 2019 - 2025 Devexperts Solutions IE Limited
  * 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/.
  */
@@ -42,6 +42,7 @@ export const priceLabelDrawersMap: Record<YAxisVisualLabelType, LabelDrawer> = {
  */
 export function drawLabel(
 	ctx: CanvasRenderingContext2D,
+	yAxisDescriptionsCtx: CanvasRenderingContext2D,
 	backgroundCtx: CanvasRenderingContext2D,
 	bounds: Bounds,
 	paneBounds: Bounds,
@@ -77,7 +78,8 @@ export function drawLabel(
 	const showLine = isLineVisible(bounds, labelY, labelBoxHeight);
 
 	const _drawDescription = () =>
-		showDescription && drawDescription(backgroundCtx, ctx, bounds, paneBounds, visualLabel, config);
+		showDescription &&
+		drawDescription(backgroundCtx, yAxisDescriptionsCtx, bounds, paneBounds, visualLabel, config);
 
 	let lineXStart: number;
 	let lineXEnd: number;

src/chart/components/y_axis/price_labels/y-axis-price-labels.drawer.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 - 2024 Devexperts Solutions IE Limited
+ * Copyright (C) 2019 - 2025 Devexperts Solutions IE Limited
  * 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/.
  */
@@ -20,6 +20,7 @@ import { LabelGroup, VisualYAxisLabel } from './y-axis-labels.model';
 export class YAxisPriceLabelsDrawer implements Drawer {
 	constructor(
 		private yAxisLabelsCanvasModel: CanvasModel,
+		private yAxisDescriptionsCanvasModel: CanvasModel,
 		private backgroundCanvasModel: CanvasModel,
 		private canvasBoundsContainer: CanvasBoundsContainer,
 		private fullConfig: FullChartConfig,
@@ -29,6 +30,7 @@ export class YAxisPriceLabelsDrawer implements Drawer {
 	draw() {
 		const ctx = this.yAxisLabelsCanvasModel.ctx;
 		const backgroundCtx = this.backgroundCanvasModel.ctx;
+		const descriptionsCtx = this.yAxisDescriptionsCanvasModel.ctx;
 
 		this.paneManager.yExtents.forEach(extent => {
 			if (extent.yAxis.state.visible) {
@@ -41,6 +43,7 @@ export class YAxisPriceLabelsDrawer implements Drawer {
 					l.labels.forEach(vl =>
 						drawLabel(
 							ctx,
+							descriptionsCtx,
 							backgroundCtx,
 							bounds,
 							paneBounds,
@@ -55,6 +58,7 @@ export class YAxisPriceLabelsDrawer implements Drawer {
 				Object.values(extent.yAxis.model.fancyLabelsModel.customLabels).forEach(l =>
 					drawLabel(
 						ctx,
+						descriptionsCtx,
 						backgroundCtx,
 						yAxisBounds,
 						paneBounds,

src/chart/components/y_axis/y-axis.component.ts

@@ -58,6 +58,7 @@ export class YAxisComponent extends ChartBaseElement {
 	public model: YAxisModel;
 	public axisTypeSetSubject: Subject<PriceAxisType> = new Subject<PriceAxisType>();
 	public axisAlignSetSubject: Subject<YAxisAlign> = new Subject<YAxisAlign>();
+	public axisAlignMovedSubject: Subject<YAxisAlign> = new Subject<YAxisAlign>();
 	public readonly state: YAxisConfig;
 
 	constructor(