From 5d40c37dc18e06dd663eab89e69de348a58cc00e Mon Sep 17 00:00:00 2001 From: Hoang Thuan Pham Date: Wed, 31 May 2023 14:21:26 -0400 Subject: [PATCH] Make scaling state a handler of onScaleFactorChange event Currently, scaling state happens when the view range changes. This is not the expected behaviour. States should only be scaled when the scale factor changes. This commit moves the function that scales the states from the view range change handlers to the scale factor change handlers. This will also help make better code isolation for unit tests. Signed-off-by: Hoang Thuan Pham --- timeline-chart/src/layer/time-graph-chart.ts | 10 ++++++++-- timeline-chart/src/time-graph-state-controller.ts | 7 +++++++ 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/timeline-chart/src/layer/time-graph-chart.ts b/timeline-chart/src/layer/time-graph-chart.ts index e6fc876..e3f7ce8 100644 --- a/timeline-chart/src/layer/time-graph-chart.ts +++ b/timeline-chart/src/layer/time-graph-chart.ts @@ -64,6 +64,7 @@ export class TimeGraphChart extends TimeGraphChartLayer { private _viewRangeChangedHandler: { (): void; (viewRange: TimelineChart.TimeGraphRange): void; (selectionRange: TimelineChart.TimeGraphRange): void }; private _zoomRangeChangedHandler: (zoomFactor: number) => void; + private _scaleFactorChangedHandler: (scaleFactor: number) => void; private _mouseMoveHandler: { (event: MouseEvent): void; (event: Event): void }; private _mouseDownHandler: { (event: MouseEvent): void; (event: Event): void }; private _keyDownHandler: { (event: KeyboardEvent): void; (event: Event): void }; @@ -335,13 +336,18 @@ export class TimeGraphChart extends TimeGraphChartLayer { }); this._viewRangeChangedHandler = () => { - this.scaleStateLabels(); this.updateZoomingSelection(); this.ensureRowLinesFitViewWidth(); }; this.unitController.onViewRangeChanged(this._viewRangeChangedHandler); this.unitController.onViewRangeChanged(this._debouncedMaybeFetchNewData); + this._scaleFactorChangedHandler = () => { + this.scaleStateLabels(); + } + + this.stateController.onScaleFactorChange(this._scaleFactorChangedHandler); + /** * We need to explicitly re-render every zoom change because of edge case: * WorldRange = Absolute Range && ViewRange < WorldRange @@ -372,7 +378,6 @@ export class TimeGraphChart extends TimeGraphChartLayer { } update() { - this.scaleStateLabels(); this.ensureRowLinesFitViewWidth(); this._debouncedMaybeFetchNewData(); } @@ -413,6 +418,7 @@ export class TimeGraphChart extends TimeGraphChartLayer { destroy() { this.stateController.removeOnZoomChanged(this._zoomRangeChangedHandler); + this.stateController.removeOnScaleFactorChanged(this._scaleFactorChangedHandler); this.unitController.removeViewRangeChangedHandler(this._debouncedMaybeFetchNewData); this.unitController.removeViewRangeChangedHandler(this._viewRangeChangedHandler); if (this._viewRangeChangedHandler) { diff --git a/timeline-chart/src/time-graph-state-controller.ts b/timeline-chart/src/time-graph-state-controller.ts index 9aceb5b..db61837 100644 --- a/timeline-chart/src/time-graph-state-controller.ts +++ b/timeline-chart/src/time-graph-state-controller.ts @@ -72,6 +72,13 @@ export class TimeGraphStateController { } } + removeOnScaleFactorChanged(handler: (zoomFactor: number) => void) { + const index = this.scaleFactorChangedHandlers.indexOf(handler); + if (index > -1) { + this.scaleFactorChangedHandlers.splice(index, 1); + } + } + /** It is not the width of the canvas display buffer but of the canvas element in browser. Can be different depending on the display pixel ratio. */