From 7cbe4fe6552cc8d41d11f8ee8b01573318fb4594 Mon Sep 17 00:00:00 2001 From: Jan Bicker Date: Thu, 31 Jan 2019 16:31:27 +0000 Subject: [PATCH] Changes regarding canvas size changes. --- .../src/layer/time-graph-chart-arrows.ts | 2 +- .../time-graph-chart-element-selection.ts | 8 ---- timeline-chart/src/layer/time-graph-chart.ts | 4 +- timeline-chart/src/layer/time-graph-layer.ts | 2 + timeline-chart/src/time-graph-container.ts | 20 ++++++-- .../src/time-graph-state-controller.ts | 47 ++++++++++++++----- 6 files changed, 56 insertions(+), 27 deletions(-) delete mode 100644 timeline-chart/src/layer/time-graph-chart-element-selection.ts diff --git a/timeline-chart/src/layer/time-graph-chart-arrows.ts b/timeline-chart/src/layer/time-graph-chart-arrows.ts index 45f94e0..c534255 100644 --- a/timeline-chart/src/layer/time-graph-chart-arrows.ts +++ b/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); diff --git a/timeline-chart/src/layer/time-graph-chart-element-selection.ts b/timeline-chart/src/layer/time-graph-chart-element-selection.ts deleted file mode 100644 index cf9a108..0000000 --- a/timeline-chart/src/layer/time-graph-chart-element-selection.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { TimeGraphChartLayer } from "./time-graph-chart-layer"; - -export class TimeGraphChartElementSelection extends TimeGraphChartLayer { - - setSelection(){ - - } -} \ No newline at end of file diff --git a/timeline-chart/src/layer/time-graph-chart.ts b/timeline-chart/src/layer/time-graph-chart.ts index 82cb9f4..2b57779 100644 --- a/timeline-chart/src/layer/time-graph-chart.ts +++ b/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; diff --git a/timeline-chart/src/layer/time-graph-layer.ts b/timeline-chart/src/layer/time-graph-layer.ts index 448e1b7..be978e8 100644 --- a/timeline-chart/src/layer/time-graph-layer.ts +++ b/timeline-chart/src/layer/time-graph-layer.ts @@ -58,4 +58,6 @@ export abstract class TimeGraphLayer { } protected afterAddToContainer() { } + + abstract update(): void; } \ No newline at end of file diff --git a/timeline-chart/src/time-graph-container.ts b/timeline-chart/src/time-graph-container.ts index e64df59..68c40cd 100644 --- a/timeline-chart/src/time-graph-container.ts +++ b/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,7 +37,7 @@ 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, @@ -43,12 +45,13 @@ export class TimeGraphContainer { 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); diff --git a/timeline-chart/src/time-graph-state-controller.ts b/timeline-chart/src/time-graph-state-controller.ts index 46f9c87..94d1542 100644 --- a/timeline-chart/src/time-graph-state-controller.ts +++ b/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,6 +40,9 @@ export class TimeGraphStateController { protected handlePositionChange() { this.positionChangedHandlers.forEach(handler => handler()); } + protected handleCanvasDisplayWidthChange() { + this.canvasDisplayWidthChangedHandlers.forEach(handler => handler()); + } onZoomChanged(handler: () => void) { this.zoomChangedHandlers.push(handler); @@ -48,12 +50,33 @@ export class TimeGraphStateController { 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; }