Row style can be set now

eclipse-cdt-cloud · Feb 8, 2019 · d9dc6ef · d9dc6ef
1 parent 56439c6
commit d9dc6ef
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 19 deletions.
diff --git a/example/src/index.ts b/example/src/index.ts
@@ -88,7 +88,7 @@ const timeGraphChart = new TimeGraphChart('timeGraphChart', {
         timeGraph = testDataProvider.getData({ range: newRange, resolution: newResolution });
         if (selectedElement) {
             for (const row of timeGraph.rows) {
-                const selEl = row.states.find(el => el.id === selectedElement.id);
+                const selEl = row.states.find(el => !!selectedElement && el.id === selectedElement.id);
                 if (selEl) {
                     selEl.selected = true;
                     break;
@@ -148,11 +148,15 @@ timeGraphChart.registerRowElementMouseInteractions({
         }
     }
 });
-let selectedElement: TimeGraphRowElement;
+let selectedElement: TimeGraphRowElement | undefined;
 timeGraphChart.onSelectedRowElementChanged((model) => {
-    const el = timeGraphChart.getElementById(model.id);
-    if (el) {
-        selectedElement = el;
+    if (model) {
+        const el = timeGraphChart.getElementById(model.id);
+        if (el) {
+            selectedElement = el;
+        }
+    } else {
+        selectedElement = undefined;
     }
 })
 

diff --git a/timeline-chart/src/components/time-graph-row.ts b/timeline-chart/src/components/time-graph-row.ts
@@ -1,4 +1,4 @@
-import { TimeGraphComponent, TimeGraphElementPosition, TimeGraphRect, TimeGraphParentComponent } from "./time-graph-component";
+import { TimeGraphComponent, TimeGraphElementPosition, TimeGraphParentComponent, TimeGraphStyledRect } from "./time-graph-component";
 import { TimelineChart } from "../time-graph-model";
 import { TimeGraphRowElement } from "./time-graph-row-element";
 
@@ -10,16 +10,16 @@ export interface TimeGraphRowStyle {
     lineOpacity?: number
 }
 
-export class TimeGraphRow extends TimeGraphComponent implements TimeGraphParentComponent{
+export class TimeGraphRow extends TimeGraphComponent implements TimeGraphParentComponent {
 
     protected rowElements: TimeGraphRowElement[] = [];
 
     constructor(
         id: string,
-        protected _options: TimeGraphRect,
+        protected _options: TimeGraphStyledRect,
         protected _rowIndex: number,
         public readonly model: TimelineChart.TimeGraphRowModel,
-        protected style: TimeGraphRowStyle = {lineOpacity:0.5, lineThickness: 1, backgroundOpacity: 0}) {
+        protected _style: TimeGraphRowStyle = { lineOpacity: 0.5, lineThickness: 1, backgroundOpacity: 0 }) {
         super(id);
     }
 
@@ -29,26 +29,24 @@ export class TimeGraphRow extends TimeGraphComponent implements TimeGraphParentC
 
     render() {
         this.rect({
-            color: this.style.backgroundColor,
-            opacity: this.style.backgroundOpacity,
+            color: this._style.backgroundColor,
+            opacity: this._style.backgroundOpacity,
             height: this._options.height,
             width: this._options.width,
             position: this._options.position
         });
         this.hline({
-            color: this.style.lineColor || 0xeeeeee,
-            opacity: this.style.lineOpacity || 0.5,
-            thickness: this.style.lineThickness || 1,
+            color: this._style.lineColor || 0xeeeeee,
+            opacity: this._style.lineOpacity || 0.5,
+            thickness: this._style.lineThickness || 1,
             width: this._options.width,
             position: {
                 x: this._options.position.x,
-                y: this._options.position.y + (this._options.height/2)
+                y: this._options.position.y + (this._options.height / 2)
             }
         });
     }
 
-
-
     get position(): TimeGraphElementPosition {
         return this._options.position;
     }
@@ -58,8 +56,31 @@ export class TimeGraphRow extends TimeGraphComponent implements TimeGraphParentC
     }
 
     // Gets called by TimeGraphLayer. Don't call it unless you know what you are doing.
-    addChild(rowElement: TimeGraphRowElement){
+    addChild(rowElement: TimeGraphRowElement) {
         this.rowElements.push(rowElement);
         this._displayObject.addChild(rowElement.displayObject);
     }
+
+    get style() {
+        return this._style;
+    }
+
+    set style(style: TimeGraphRowStyle) {
+        if (style.backgroundColor !== undefined) {
+            this._options.color = style.backgroundColor;
+        }
+        if (style.backgroundOpacity !== undefined) {
+            this._style.backgroundOpacity = style.backgroundOpacity;
+        }
+        if (style.lineColor) {
+            this._style.lineColor = style.lineColor;
+        }
+        if (style.lineOpacity) {
+            this._style.lineOpacity = style.lineOpacity;
+        }
+        if (style.lineThickness) {
+            this._style.lineThickness = style.lineThickness;
+        }
+        this.update();
+    }
 }
diff --git a/timeline-chart/src/layer/time-graph-chart.ts b/timeline-chart/src/layer/time-graph-chart.ts
@@ -292,11 +292,17 @@ export class TimeGraphChart extends TimeGraphChartLayer {
         component && style && (component.style = style);
     }
 
+    protected updateRowStyle(model: TimelineChart.TimeGraphRowModel) {
+        const style = this.providers.rowStyleProvider && this.providers.rowStyleProvider(model);
+        const component = this.rowComponents.get(model);
+        component && style && (component.style = style);
+    }
+
     registerRowElementMouseInteractions(interactions: TimeGraphRowElementMouseInteractions) {
         this.rowElementMouseInteractions = interactions;
     }
 
-    onSelectedRowElementChanged(handler: (el: TimelineChart.TimeGraphRowElementModel) => void) {
+    onSelectedRowElementChanged(handler: (el: TimelineChart.TimeGraphRowElementModel | undefined) => void) {
         this.selectedElementChangedHandler.push(handler);
     }
 
@@ -314,9 +320,11 @@ export class TimeGraphChart extends TimeGraphChartLayer {
     selectRow(row: TimelineChart.TimeGraphRowModel) {
         if (this.rowController.selectedRow) {
             delete this.rowController.selectedRow.selected;
+            this.updateRowStyle(this.rowController.selectedRow);
         }
         this.rowController.selectedRow = row;
         row.selected = true;
+        this.updateRowStyle(row);
     }
 
     getSelectedRowElement(): TimelineChart.TimeGraphRowElementModel {