Changes regarding canvas size changes.

timeline-chart/src/layer/time-graph-chart-arrows.ts

@@ -45,7 +45,7 @@ export class TimeGraphChartArrows extends TimeGraphChartLayer {
         })
     }
 
-    protected update(): void {
+    update(): void {
         if (this.arrows) {
             for (const arrow of this.arrows.keys()) {
                 this.updateArrow(arrow);

timeline-chart/src/layer/time-graph-chart.ts

@@ -113,7 +113,9 @@ export class TimeGraphChart extends TimeGraphChartLayer {
         }
     }
 
-    update() { }
+    update() {
+        this.updateScaleAndPosition();
+    }
 
     protected async maybeFetchNewData() {
         const resolution = this.unitController.viewRangeLength / this.stateController.canvasDisplayWidth;

timeline-chart/src/layer/time-graph-layer.ts

@@ -58,4 +58,6 @@ export abstract class TimeGraphLayer {
     }
 
     protected afterAddToContainer() { }
+
+    abstract update(): void;
 }

timeline-chart/src/time-graph-container.ts

@@ -21,6 +21,8 @@ export class TimeGraphContainer {
 
     protected layers: TimeGraphLayer[];
 
+    private application: PIXI.Application;
+
     constructor(protected config: TimeGraphContainerOptions, protected unitController: TimeGraphUnitController, protected extCanvas?: HTMLCanvasElement) {
         let canvas: HTMLCanvasElement
         if (!extCanvas) {
@@ -35,20 +37,21 @@ export class TimeGraphContainer {
         canvas.id = config.id;
         canvas.className = `time-graph-canvas ${this.config.classNames || ''}`;
         const ratio = window.devicePixelRatio;
-        const application = new PIXI.Application({
+        this.application = new PIXI.Application({
             width: canvas.width,
             height: canvas.height,
             view: canvas,
             backgroundColor: config.backgroundColor,
             transparent: config.transparent,
             antialias: true,
             roundPixels: false,
-            resolution: ratio
+            resolution: ratio,
+            autoResize: true
         });
-        application.stage.height = config.height;
+        this.application.stage.height = config.height;
 
-        this.stage = application.stage;
-        this._canvas = application.view;
+        this.stage = this.application.stage;
+        this._canvas = this.application.view;
 
         this.stateController = new TimeGraphStateController(canvas, unitController);
 
@@ -59,6 +62,13 @@ export class TimeGraphContainer {
         return this._canvas;
     }
 
+    // if canvas size has changed displayWidth need to be updated for zoomfactor
+    reInitCanvasSize(newWidth: number){
+        this.application.renderer.resize(newWidth, this.config.height);
+        this.stateController.updateDisplayWidth();
+        this.layers.forEach(l => l.update());
+    }
+
     addLayer(layer: TimeGraphLayer) {
         this.layers.push(layer);
         layer.initializeLayer(this._canvas, this.stage, this.stateController, this.unitController);

timeline-chart/src/time-graph-state-controller.ts

@@ -5,14 +5,11 @@ export class TimeGraphStateController {
         x: number;
         y: number;
     };
-    /**
-        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.
-    */
-    readonly canvasDisplayWidth: number;
-    /**
-        It is not the heigth of the canvas display buffer but of the canvas element in browser. Can be different depending on the display pixel ratio.
-    */
-    readonly canvasDisplayHeight: number;
+
+    protected ratio: number;
+
+    protected _canvasDisplayWidth: number;
+    protected _canvasDisplayHeight: number;
 
     protected _zoomFactor: number;
     protected _initialZoomFactor: number;
@@ -23,16 +20,18 @@ export class TimeGraphStateController {
 
     protected zoomChangedHandlers: (() => void)[];
     protected positionChangedHandlers: (() => void)[];
+    protected canvasDisplayWidthChangedHandlers: (() => void)[];
 
     constructor(protected canvas: HTMLCanvasElement, protected unitController: TimeGraphUnitController) {
-        const ratio = window.devicePixelRatio;
-        this.canvasDisplayWidth = canvas.width / ratio;
-        this.canvasDisplayHeight = canvas.height / ratio;
+        this.ratio = window.devicePixelRatio;
+        this._canvasDisplayWidth = canvas.width / this.ratio;
+        this._canvasDisplayHeight = canvas.height / this.ratio;
         this._initialZoomFactor = this.zoomFactor;
         this._positionOffset = { x: 0, y: 0 };
         this.oldPositionOffset = { x: 0, y: 0 };
         this.zoomChangedHandlers = [];
         this.positionChangedHandlers = [];
+        this.canvasDisplayWidthChangedHandlers = [];
     }
 
     protected handleZoomChange() {
@@ -41,19 +40,43 @@ export class TimeGraphStateController {
     protected handlePositionChange() {
         this.positionChangedHandlers.forEach(handler => handler());
     }
+    protected handleCanvasDisplayWidthChange() {
+        this.canvasDisplayWidthChangedHandlers.forEach(handler => handler());
+    }
 
     onZoomChanged(handler: () => void) {
         this.zoomChangedHandlers.push(handler);
     }
     onPositionChanged(handler: () => void) {
         this.positionChangedHandlers.push(handler);
     }
+    onCanvasDisplayWidthChanged(handler: () => void) {
+        this.canvasDisplayWidthChangedHandlers.push(handler);
+    }
+
+    /**
+        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.
+    */
+    get canvasDisplayWidth() {
+        return this._canvasDisplayWidth;
+    }
+
+    updateDisplayWidth() {
+        this._canvasDisplayWidth = this.canvas.width / this.ratio;
+    }
+
+    /**
+        It is not the heigth of the canvas display buffer but of the canvas element in browser. Can be different depending on the display pixel ratio.
+    */
+    get canvasDisplayHeight() {
+        return this._canvasDisplayHeight;
+    }
 
     get initialZoomFactor(): number {
         return this._initialZoomFactor;
     }
 
-    get zoomFactor(): number{
+    get zoomFactor(): number {
         this._zoomFactor = this.canvasDisplayWidth / this.unitController.viewRangeLength;
         return this._zoomFactor;
     }