update layers based on themes

Signed-off-by: muddana-satish <satish.muddana@ericsson.com>

example/src/index.ts

@@ -124,7 +124,7 @@ const timeGraphAxisContainer = new TimeGraphContainer({
 axisHTMLContainer.appendChild(timeGraphAxisContainer.canvas);
 
 const timeAxisLayer = new TimeGraphAxis('timeGraphAxis', { color: styleConfig.naviBackgroundColor });
-timeGraphAxisContainer.addLayer(timeAxisLayer);
+timeGraphAxisContainer.addLayers([timeAxisLayer]);
 
 const chartHTMLContainer = document.createElement('div');
 chartHTMLContainer.id = 'main_chart';
@@ -142,10 +142,16 @@ const timeGraphChartContainer = new TimeGraphContainer({
 chartHTMLContainer.appendChild(timeGraphChartContainer.canvas);
 
 const timeGraphChartGridLayer = new TimeGraphChartGrid('timeGraphGrid', rowHeight);
-timeGraphChartContainer.addLayer(timeGraphChartGridLayer);
-
 const timeGraphChart = new TimeGraphChart('timeGraphChart', providers, rowController);
-timeGraphChartContainer.addLayer(timeGraphChart);
+const timeGraphChartArrows = new TimeGraphChartArrows('timeGraphChartArrows', rowController);
+const timeAxisCursors = new TimeGraphAxisCursors('timeGraphAxisCursors', { color: styleConfig.cursorColor });
+const timeGraphSelectionRange = new TimeGraphChartSelectionRange('chart-selection-range', { color: styleConfig.cursorColor });
+const timeGraphChartCursors = new TimeGraphChartCursors('chart-cursors', timeGraphChart, rowController, { color: styleConfig.cursorColor });
+const timeGraphChartRangeEvents = new TimeGraphRangeEventsLayer('timeGraphChartRangeEvents', providers);
+
+timeGraphChartContainer.addLayers([timeGraphChartGridLayer, timeGraphChart,
+    timeGraphChartArrows, timeAxisCursors, timeGraphSelectionRange,
+    timeGraphChartCursors, timeGraphChartRangeEvents]);
 
 timeGraphChart.registerMouseInteractions({
     click: el => {
@@ -165,18 +171,7 @@ timeGraphChart.registerMouseInteractions({
     }
 });
 
-const timeGraphChartArrows = new TimeGraphChartArrows('timeGraphChartArrows', rowController);
-timeGraphChartContainer.addLayer(timeGraphChartArrows);
 timeGraphChartArrows.addArrows(timeGraph.arrows);
-
-const timeAxisCursors = new TimeGraphAxisCursors('timeGraphAxisCursors', { color: styleConfig.cursorColor });
-timeGraphAxisContainer.addLayer(timeAxisCursors);
-const timeGraphSelectionRange = new TimeGraphChartSelectionRange('chart-selection-range', { color: styleConfig.cursorColor });
-timeGraphChartContainer.addLayer(timeGraphSelectionRange);
-const timeGraphChartCursors = new TimeGraphChartCursors('chart-cursors', timeGraphChart, rowController, { color: styleConfig.cursorColor });
-timeGraphChartContainer.addLayer(timeGraphChartCursors);
-const timeGraphChartRangeEvents = new TimeGraphRangeEventsLayer('timeGraphChartRangeEvents', providers);
-timeGraphChartContainer.addLayer(timeGraphChartRangeEvents);
 timeGraphChartRangeEvents.addRangeEvents(timeGraph.rangeEvents);
 
 const cursorReset = document.getElementById('cursor-reset');
@@ -196,7 +191,7 @@ const naviContainer = new TimeGraphContainer({
     backgroundColor: styleConfig.naviBackgroundColor
 }, unitController);
 const navi = new TimeGraphNavigator('timeGraphNavigator');
-naviContainer.addLayer(navi);
+naviContainer.addLayers([navi]);
 naviEl.appendChild(naviContainer.canvas);
 
 const vscrollElement = document.getElementById('main-vscroll');
@@ -208,6 +203,6 @@ if (vscrollElement) {
         backgroundColor: styleConfig.naviBackgroundColor
     }, unitController);
     const vscroll = new TimeGraphVerticalScrollbar('timeGraphVerticalScrollbar', rowController);
-    verticalScrollContainer.addLayer(vscroll);
+    verticalScrollContainer.addLayers([vscroll]);
     vscrollElement.appendChild(verticalScrollContainer.canvas);
 }

timeline-chart/src/components/time-graph-axis-scale.ts

@@ -130,12 +130,6 @@ export class TimeGraphAxisScale extends TimeGraphComponent<null> {
     }
 
     render() {
-        this.rect({
-            color: this._options.color || 0xededdd,
-            height: this._options.height,
-            width: this._options.width,
-            position: this._options.position
-        });
         this.renderVerticalLines(true, this._options.lineColor || 0x000000, (l) => ({ lineHeight: l === '' || l === undefined ? 5 : 10 }));
     }
 

timeline-chart/src/components/time-graph-component.ts

@@ -85,7 +85,7 @@ export abstract class TimeGraphComponent<T> {
         const { position, width, height, color, opacity, borderColor, borderWidth } = opts;
         this.displayObject.lineStyle(borderWidth || 0, borderColor || 0x000000);
         this.displayObject.beginFill((color || 0xffffff), this.getPIXIOpacity(opacity));
-        this.displayObject.drawRect(position.x + 0.5, position.y + 0.5, width, height);
+        this.displayObject.drawRect(position.x, position.y, width, height);
         this.displayObject.endFill();
     }
 

timeline-chart/src/components/time-graph-grid.ts

@@ -1,9 +1,9 @@
-import { TimeGraphAxisScale } from "./time-graph-axis-scale";
-import { TimeGraphRect } from "./time-graph-component";
+import { TimeGraphAxisScale, TimeGraphAxisStyle } from "./time-graph-axis-scale";
 import { TimeGraphUnitController } from "../time-graph-unit-controller";
 import { TimeGraphStateController } from "../time-graph-state-controller";
+import { TimeGraphAxisLayerOptions } from "../layer/time-graph-axis";
 
-export interface TimeGraphGridStyle extends TimeGraphRect {
+export interface TimeGraphGridStyle extends TimeGraphAxisStyle {
     lineColor?: number
 }
 
@@ -19,6 +19,13 @@ export class TimeGraphGrid extends TimeGraphAxisScale {
 
     protected addEvents() { }
 
+    update(opts?: TimeGraphAxisLayerOptions): void {
+        if (opts && opts.lineColor) {
+            this._options.lineColor = opts.lineColor;
+        }
+        super.update(this._options);
+    }
+
     render(): void {
         this.renderVerticalLines(false, this._options.lineColor || 0xdddddd, () => ({ lineHeight: this.stateController.canvasDisplayHeight }));
     }

timeline-chart/src/components/time-graph-rectangle.ts

@@ -14,6 +14,10 @@ export class TimeGraphRectangle extends TimeGraphComponent<null> {
             this._options.width = opts.width;
             this._options.height = opts.height;
             this._options.position = opts.position;
+            if (opts.color) {
+                this._options.color = opts.color;
+            }
+
         }
         super.update();
     }

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

@@ -1,8 +1,12 @@
-import { TimeGraphAxisScale } from "../components/time-graph-axis-scale";
-import { TimeGraphLayer } from "./time-graph-layer";
+import { TimeGraphAxisScale, TimeGraphAxisStyle } from "../components/time-graph-axis-scale";
+import { TimeGraphLayer, TimeGraphLayerOptions } from "./time-graph-layer";
 import * as _ from "lodash";
 import { TimelineChart } from "../time-graph-model";
 
+export interface TimeGraphAxisLayerOptions extends TimeGraphLayerOptions {
+    lineColor?: number;
+}
+
 export class TimeGraphAxis extends TimeGraphLayer {
 
     protected scaleComponent: TimeGraphAxisScale;
@@ -16,7 +20,7 @@ export class TimeGraphAxis extends TimeGraphLayer {
         super(id);
     }
 
-    protected getOptions() {
+    protected getOptions(): TimeGraphAxisStyle {
         let color;
         let lineColor;
         if (this.style) {
@@ -55,7 +59,7 @@ export class TimeGraphAxis extends TimeGraphLayer {
                 const center = this.unitController.viewRange.start + zoomPosition;
                 const start = Math.max(0, Math.min(this.unitController.absoluteRange - newViewRangeLength,
                     center - zoomPosition * newViewRangeLength / this.unitController.viewRangeLength));
-                const end = start + newViewRangeLength;    
+                const end = start + newViewRangeLength;
                 this.unitController.viewRange = {
                     start,
                     end
@@ -93,11 +97,14 @@ export class TimeGraphAxis extends TimeGraphLayer {
         this.unitController.onViewRangeChanged(this._updateHandler);
     }
 
-    update() {
+    update(opts?: TimeGraphAxisLayerOptions) {
+        if (opts && this.style) {
+            this.style.lineColor = opts.lineColor;
+        }
         this.scaleComponent.update(this.getOptions());
     }
 
-    destroy() : void {
+    destroy(): void {
         if (this.unitController) {
             this.unitController.removeViewRangeChangedHandler(this._updateHandler);
             this.unitController.removeSelectionRangeChangedHandler(this._updateHandler);

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

@@ -1,6 +1,7 @@
 import { TimeGraphLayer } from "./time-graph-layer";
 import { TimeGraphGrid } from "../components/time-graph-grid";
 import { TimelineChart } from "../time-graph-model";
+import { TimeGraphAxisLayerOptions } from "./time-graph-axis";
 
 export class TimeGraphChartGrid extends TimeGraphLayer {
 
@@ -23,8 +24,8 @@ export class TimeGraphChartGrid extends TimeGraphLayer {
         this.unitController.onViewRangeChanged(this._updateHandler);
     }
 
-    update() {
-        this.gridComponent.update();
+    update(opts?: TimeGraphAxisLayerOptions) {
+        this.gridComponent.update(opts);
     }
 
     destroy() : void {

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

@@ -4,6 +4,8 @@ import { TimeGraphComponent, TimeGraphParentComponent } from "../components/time
 import { TimeGraphUnitController } from "../time-graph-unit-controller";
 import { TimeGraphStateController } from "../time-graph-state-controller";
 
+export type TimeGraphLayerOptions = {}
+
 export abstract class TimeGraphLayer {
     private canvas: HTMLCanvasElement;
     protected stateController: TimeGraphStateController;
@@ -67,9 +69,9 @@ export abstract class TimeGraphLayer {
 
     protected afterAddToContainer() { }
 
-    destroy() { 
+    destroy() {
         this.removeChildren();
     }
 
-    abstract update(): void;
-}
+    abstract update(opts?: TimeGraphLayerOptions): void;
+}

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

@@ -1,18 +1,18 @@
 import * as PIXI from "pixi.js-legacy"
-
 import { TimeGraphUnitController } from "./time-graph-unit-controller";
 import { TimeGraphStateController } from "./time-graph-state-controller";
-import { TimeGraphLayer } from "./layer/time-graph-layer";
+import { TimeGraphLayer, TimeGraphLayerOptions } from "./layer/time-graph-layer";
 import { TimeGraphRectangle } from "./components/time-graph-rectangle";
 
 export interface TimeGraphContainerOptions {
-    id: string
-    width: number
-    height: number
-    backgroundColor?: number
-    transparent?: boolean
-    classNames?: string
-} //
+    id: string;
+    width: number;
+    height: number;
+    backgroundColor?: number;
+    lineColor?: number;
+    transparent?: boolean;
+    classNames?: string;
+}
 
 export class TimeGraphContainer {
 
@@ -80,13 +80,14 @@ export class TimeGraphContainer {
     }
 
     // if canvas size has changed displayWidth need to be updated for zoomfactor
-    reInitCanvasSize(newWidth: number, newHeight?: number) {
-        if (newHeight === undefined) {
-            newHeight = this.config.height;
-        } else {
-            this.config.height = newHeight;
-        }
+    updateCanvas(newWidth: number, newHeight: number, newColor?: number, lineColor?: number) {
         this.config.width = newWidth;
+        this.config.height = newHeight;
+        if (newColor) {
+            this.config.backgroundColor = newColor;
+        }
+
+        const opts: TimeGraphLayerOptions = { lineColor };
 
         this.application.renderer.resize(newWidth, newHeight);
         this.stateController.updateDisplayWidth();
@@ -96,12 +97,18 @@ export class TimeGraphContainer {
                 x: 0, y: 0
             },
             height: newHeight,
-            width: newWidth
+            width: newWidth,
+            color: newColor
         });
-        this.layers.forEach(l => l.update());
+
+        this.layers.forEach(l => l.update(opts));
+    }
+
+    addLayers(layers: TimeGraphLayer[]) {
+        layers.forEach(layer => this.addLayer(layer));
     }
 
-    addLayer(layer: TimeGraphLayer) {
+    protected addLayer(layer: TimeGraphLayer) {
         this.layers.push(layer);
         layer.initializeLayer(this._canvas, this.stage, this.stateController, this.unitController);
     }