diff --git a/src/chart/bootstrap.ts b/src/chart/bootstrap.ts index 0854b96e..4b8af942 100755 --- a/src/chart/bootstrap.ts +++ b/src/chart/bootstrap.ts @@ -328,6 +328,7 @@ export default class ChartBootstrap { mainCanvasModel, yAxisLabelsCanvasModel, this.hitTestCanvasModel, + this.chartResizeHandler, ); this.paneManager = paneManager; diff --git a/src/chart/canvas/canvas-bounds-container.ts b/src/chart/canvas/canvas-bounds-container.ts index 2a0a9e06..cbb33299 100644 --- a/src/chart/canvas/canvas-bounds-container.ts +++ b/src/chart/canvas/canvas-bounds-container.ts @@ -947,6 +947,39 @@ export class CanvasBoundsContainer { setMainCandleSeries(candleSeries: CandleSeriesModel) { this.mainCandleSeries = candleSeries; } + + /** + * Returns the effective width of the Y axis. + * + * @function + * @name getEffectiveYAxisWidth + * @returns {number} The effective width of the Y axis. + */ + getEffectiveYAxisWidth() { + const yAxis = this.getBounds(CanvasElement.PANE_UUID_Y_AXIS(CHART_UUID)); + return yAxis.width; + } + + /** + * Returns the effective width of the chart. + * + * @function + * @returns {number} The effective width of the chart. + */ + getEffectiveChartWidth() { + const chart = this.getBounds(CanvasElement.PANE_UUID(CHART_UUID)); + return chart.width; + } + + /** + * Returns the effective height of the chart. + * + * @returns {number} The effective height of the chart. + */ + getEffectiveChartHeight() { + const chart = this.getBounds(CanvasElement.PANE_UUID(CHART_UUID)); + return chart.height; + } } // paneCounter=chartHeightRatio: 0=1, 1=0.8, 2=0.6, 3=0.5, 4=0.4, 5=0.4 diff --git a/src/chart/components/chart/chart.model.ts b/src/chart/components/chart/chart.model.ts index 9fa6ca63..805513a5 100755 --- a/src/chart/components/chart/chart.model.ts +++ b/src/chart/components/chart/chart.model.ts @@ -159,8 +159,8 @@ export class ChartModel extends ChartBaseElement { */ private handleChartResize(nextCB: PickedDOMRect) { if (nextCB.width > MIN_SUPPORTED_CANVAS_SIZE.width && nextCB.height > MIN_SUPPORTED_CANVAS_SIZE.height) { - const nextChartWidth = this.getEffectiveChartWidth(); - const nextYAxisWidth = this.getEffectiveYAxisWidth(); + const nextChartWidth = this.canvasBoundsContainer.getEffectiveChartWidth(); + const nextYAxisWidth = this.canvasBoundsContainer.getEffectiveYAxisWidth(); if (this.prevChartWidth === 0) { this.scale.isViewportValid() ? this.scale.recalculateZoom() : this.doBasicScale(); @@ -526,39 +526,6 @@ export class ChartModel extends ChartBaseElement { this.scale.autoScale(auto); } - /** - * Returns the effective width of the Y axis. - * - * @function - * @name getEffectiveYAxisWidth - * @returns {number} The effective width of the Y axis. - */ - getEffectiveYAxisWidth() { - const yAxis = this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID_Y_AXIS(CHART_UUID)); - return yAxis.width; - } - - /** - * Returns the effective width of the chart. - * - * @function - * @returns {number} The effective width of the chart. - */ - getEffectiveChartWidth() { - const chart = this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID(CHART_UUID)); - return chart.width; - } - - /** - * Returns the effective height of the chart. - * - * @returns {number} The effective height of the chart. - */ - getEffectiveChartHeight() { - const chart = this.canvasBoundsContainer.getBounds(CanvasElement.PANE_UUID(CHART_UUID)); - return chart.height; - } - /** * Updates the offsets of the chart components and redraws the chart. * @param {Partial} offsets - The new offsets to be applied to the chart components. @@ -832,7 +799,7 @@ export class ChartModel extends ChartBaseElement { * @returns {number} - The maximum number of candles that can fit in the chart width */ getMaxCandlesFitLength() { - return floor(this.getEffectiveChartWidth() / this.config.components.chart.minWidth); + return floor(this.canvasBoundsContainer.getEffectiveChartWidth() / this.config.components.chart.minWidth); } /** diff --git a/src/chart/components/pane/pane-manager.component.ts b/src/chart/components/pane/pane-manager.component.ts index de4ca18b..eb92dfba 100644 --- a/src/chart/components/pane/pane-manager.component.ts +++ b/src/chart/components/pane/pane-manager.component.ts @@ -32,6 +32,7 @@ import { Unsubscriber } from '../../utils/function.utils'; import { DataSeriesModel } from '../../model/data-series.model'; import { HitTestCanvasModel } from '../../model/hit-test-canvas.model'; import { firstOf, flatMap, lastOf } from '../../utils/array.utils'; +import { ChartResizeHandler } from '../../inputhandlers/chart-resize.handler'; export class PaneManager extends ChartBaseElement { public panes: Record = {}; @@ -63,6 +64,7 @@ export class PaneManager extends ChartBaseElement { private mainCanvasModel: CanvasModel, private yAxisLabelsCanvasModel: CanvasModel, private hitTestCanvasModel: HitTestCanvasModel, + private chartResizeHandler: ChartResizeHandler, ) { super(); this.hitTestController = new PaneHitTestController(this.panes, this.dynamicObjectsCanvasModel); @@ -165,6 +167,7 @@ export class PaneManager extends ChartBaseElement { this.dataSeriesAddedSubject, this.dataSeriesRemovedSubject, this.hitTestCanvasModel, + this.chartResizeHandler, options, ); diff --git a/src/chart/components/pane/pane.component.ts b/src/chart/components/pane/pane.component.ts index e2780594..05688ad2 100644 --- a/src/chart/components/pane/pane.component.ts +++ b/src/chart/components/pane/pane.component.ts @@ -41,6 +41,7 @@ import { } from './extent/y-extent-component'; import { PaneHitTestController } from './pane-hit-test.controller'; import { HitTestCanvasModel } from '../../model/hit-test-canvas.model'; +import { ChartResizeHandler } from '../../inputhandlers/chart-resize.handler'; export class PaneComponent extends ChartBaseElement { /** @@ -87,6 +88,7 @@ export class PaneComponent extends ChartBaseElement { public seriesAddedSubject: Subject, public seriesRemovedSubject: Subject, private hitTestCanvasModel: HitTestCanvasModel, + private chartResizeHandler: ChartResizeHandler, options?: AtLeastOne, ) { super(); @@ -208,6 +210,7 @@ export class PaneComponent extends ChartBaseElement { this.uuid, extentIdx, this.hitTestCanvasModel, + this.chartResizeHandler, initialYAxisState, ); diff --git a/src/chart/components/y_axis/price_labels/y-axis-labels.model.ts b/src/chart/components/y_axis/price_labels/y-axis-labels.model.ts index d46f6533..a402b027 100644 --- a/src/chart/components/y_axis/price_labels/y-axis-labels.model.ts +++ b/src/chart/components/y_axis/price_labels/y-axis-labels.model.ts @@ -3,7 +3,8 @@ * 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 { merge, Observable, Subject } from 'rxjs'; +import { animationFrameScheduler, merge, Observable, Subject } from 'rxjs'; +import { throttleTime } from 'rxjs/operators'; import { CanvasBoundsContainer, CanvasElement } from '../../../canvas/canvas-bounds-container'; import { YAxisConfig, YAxisLabelMode } from '../../../chart.config'; import EventBus from '../../../events/event-bus'; @@ -17,6 +18,7 @@ import { animationFrameThrottledPrior } from '../../../utils/performance/request import { uuid } from '../../../utils/uuid.utils'; import { YAxisLabelDrawConfig } from '../y-axis-labels.drawer'; import { calcLabelsYCoordinates } from './labels-positions-calculator'; +import { ChartResizeHandler } from '../../../inputhandlers/chart-resize.handler'; export type YAxisVisualLabelType = 'badge' | 'rectangle' | 'plain'; @@ -79,6 +81,7 @@ export class FancyYAxisLabelsModel extends ChartBaseElement { private canvasModel: CanvasModel, private paneUUID: string, private updateYAxisWidth: () => void, + private chartResizeHandler: ChartResizeHandler, ) { super(); this.initModel(); @@ -97,9 +100,12 @@ export class FancyYAxisLabelsModel extends ChartBaseElement { super.doActivate(); this.addRxSubscription( merge( - this.canvasBoundsContainer.observeBoundsChanged(CanvasElement.PANE_UUID(this.paneUUID)), this.canvasBoundsContainer.barResizerChangedSubject, this.scale.changed, + merge( + this.canvasBoundsContainer.observeBoundsChanged(CanvasElement.PANE_UUID(this.paneUUID)), + this.chartResizeHandler.canvasResized, + ).pipe(throttleTime(50, animationFrameScheduler, { trailing: true, leading: true })), ).subscribe(() => { this.updateLabels(); }), diff --git a/src/chart/components/y_axis/y-axis.component.ts b/src/chart/components/y_axis/y-axis.component.ts index 81be6cdc..807c89b0 100644 --- a/src/chart/components/y_axis/y-axis.component.ts +++ b/src/chart/components/y_axis/y-axis.component.ts @@ -45,6 +45,7 @@ import { YAxisModel } from './y-axis.model'; import { HitTestCanvasModel } from '../../model/hit-test-canvas.model'; import { merge as mergeObj } from '../../utils/merge.utils'; import { cloneUnsafe } from '../../utils/object.utils'; +import { ChartResizeHandler } from '../../inputhandlers/chart-resize.handler'; export type LabelColorResolver = (priceMovement: PriceMovement, colors: FullChartColors) => string; @@ -72,6 +73,7 @@ export class YAxisComponent extends ChartBaseElement { public paneUUID: string, public extentIdx: number, hitTestCanvasModel: HitTestCanvasModel, + private chartResizeHandler: ChartResizeHandler, initialState?: YAxisConfig, ) { super(); @@ -105,6 +107,7 @@ export class YAxisComponent extends ChartBaseElement { valueFormatter, dataSeriesProvider, extentIdx, + this.chartResizeHandler, ); this.addChildEntity(this.model); this.updateCursor(); diff --git a/src/chart/components/y_axis/y-axis.model.ts b/src/chart/components/y_axis/y-axis.model.ts index 7560233b..7757085a 100644 --- a/src/chart/components/y_axis/y-axis.model.ts +++ b/src/chart/components/y_axis/y-axis.model.ts @@ -7,6 +7,7 @@ import { CanvasBoundsContainer } from '../../canvas/canvas-bounds-container'; import { YAxisWidthContributor } from '../../canvas/y-axis-bounds.container'; import { YAxisConfig } from '../../chart.config'; import EventBus from '../../events/event-bus'; +import { ChartResizeHandler } from '../../inputhandlers/chart-resize.handler'; import { CanvasModel } from '../../model/canvas.model'; import { ChartBaseElement } from '../../model/chart-base-element'; import { DataSeriesModel } from '../../model/data-series.model'; @@ -30,6 +31,7 @@ export class YAxisModel extends ChartBaseElement { valueFormatter: (value: number) => string, dataSeriesProvider: () => DataSeriesModel | undefined, private extentIdx: number, + chartResizeHandler: ChartResizeHandler, ) { super(); this.labelsGenerator = new NumericYAxisLabelsGenerator( @@ -56,6 +58,7 @@ export class YAxisModel extends ChartBaseElement { canvasModel, paneUUID, () => this.canvasBoundsContainer.updateYAxisWidths(), + chartResizeHandler, ); this.addChildEntity(this.fancyLabelsModel); }