Merge branch 'master' into bugfix/review-the-linked-list-methods-logic

src/chart/components/volumes/volumes.component.ts

@@ -17,14 +17,15 @@ import { PaneManager } from '../pane/pane-manager.component';
 import { SeparateVolumesComponent } from './separate-volumes.component';
 import { resolveColorForBar, resolveColorForCandle, resolveColorForLine } from './volume-color-resolvers.functions';
 import { VolumesDrawer } from './volumes.drawer';
-import { VolumesModel } from './volumes.model';
+import { VOLUMES_UUID, VolumesModel } from './volumes.model';
 
 export type VolumeColorResolver = (priceMovement: PriceMovement, colors: FullChartColors) => string;
 
 export class VolumesComponent extends ChartBaseElement {
 	separateVolumes: SeparateVolumesComponent;
 	public volumesColorByChartTypeMap: Partial<Record<BarType, VolumeColorResolver>> = {};
 	volumesModel: VolumesModel;
+	private readonly volumesDrawer: VolumesDrawer;
 	public volumeVisibilityChangedSubject = new BehaviorSubject<boolean>(false);
 	public volumeIsSeparateModeChangedSubject = new BehaviorSubject<boolean>(false);
 
@@ -36,7 +37,7 @@ export class VolumesComponent extends ChartBaseElement {
 		drawingManager: DrawingManager,
 		private config: FullChartConfig,
 		paneManager: PaneManager,
-		dynamicObjectsComponent: DynamicObjectsComponent,
+		private dynamicObjectsComponent: DynamicObjectsComponent,
 	) {
 		super();
 		const volumesModel = new VolumesModel(chartComponent, scale);
@@ -49,20 +50,15 @@ export class VolumesComponent extends ChartBaseElement {
 			volumesModel,
 			paneManager,
 		);
-		const volumesDrawer = new VolumesDrawer(
+		this.volumesDrawer = new VolumesDrawer(
 			config,
 			this.volumesModel,
 			chartComponent.chartModel,
 			() => (this.config.components.volumes.showSeparately ? this.separateVolumes.pane?.scale ?? scale : scale),
 			this.volumesColorByChartTypeMap,
 			() => true,
 		);
-		dynamicObjectsComponent.model.addObject({
-			id: volumesModel.id,
-			paneId: CHART_UUID,
-			drawer: volumesDrawer,
-			model: volumesModel,
-		});
+		config.components.volumes.visible && this.addVolumesToDynamicObjects();
 		this.addChildEntity(this.separateVolumes);
 		this.registerDefaultVolumeColorResolvers();
 		this.volumeVisibilityChangedSubject.next(config.components.volumes.visible);
@@ -124,7 +120,9 @@ export class VolumesComponent extends ChartBaseElement {
 	public setVisible(visible = true) {
 		this.config.components.volumes.visible = visible;
 		this.volumeVisibilityChangedSubject.next(visible);
-		if (this.config.components.volumes.showSeparately === true) {
+		visible ?
+			this.addVolumesToDynamicObjects() : this.dynamicObjectsComponent.model.removeObject(this.volumesModel.id);
+		if (this.config.components.volumes.showSeparately) {
 			if (visible) {
 				this.separateVolumes.activateSeparateVolumes();
 				this.volumeIsSeparateModeChangedSubject.next(true);
@@ -136,4 +134,13 @@ export class VolumesComponent extends ChartBaseElement {
 		this.canvasBoundsContainer.recalculatePanesHeightRatios();
 		this.canvasModel.fireDraw();
 	}
+
+	private addVolumesToDynamicObjects() {
+		this.dynamicObjectsComponent.model.addObject({
+			id: this.volumesModel.id,
+			paneId: this.config.components.volumes.showSeparately ? VOLUMES_UUID : CHART_UUID,
+			drawer: this.volumesDrawer,
+			model: this.volumesModel,
+		});
+	}
 }

src/chart/components/volumes/volumes.model.ts

@@ -14,7 +14,7 @@ import { firstOf, maxMin } from '../../utils/array.utils';
 
 const volumeMaxMinFn = maxMin<VisualCandle>(candle => candle.candle.volume);
 
-const VOLUMES_UUID = 'volumes';
+export const VOLUMES_UUID = 'volumes';
 export class VolumesModel extends ChartBaseElement {
 	public readonly id = VOLUMES_UUID;
 	// max volume in all data series