Several changes regarding UI

eclipse-cdt-cloud · Feb 5, 2019 · 476f5e2 · 476f5e2
1 parent 7cbe4fe
commit 476f5e2
Show file tree

Hide file tree

Showing 9 changed files with 79 additions and 28 deletions.
diff --git a/timeline-chart/src/components/time-graph-axis-scale.ts b/timeline-chart/src/components/time-graph-axis-scale.ts
@@ -4,6 +4,10 @@ import { TimeGraphStateController } from "../time-graph-state-controller";
 import * as _ from "lodash";
 import { TimelineChart } from "../time-graph-model";
 
+export interface TimeGraphAxisStyle extends TimeGraphStyledRect {
+    lineColor?: number
+}
+
 export class TimeGraphAxisScale extends TimeGraphComponent {
 
     protected mouseStartY: number;
@@ -13,7 +17,7 @@ export class TimeGraphAxisScale extends TimeGraphComponent {
     protected labels: PIXI.Text[];
 
     constructor(id: string,
-        protected _options: TimeGraphStyledRect,
+        protected _options: TimeGraphAxisStyle,
         protected unitController: TimeGraphUnitController,
         protected stateController: TimeGraphStateController) {
         super(id);
@@ -74,7 +78,8 @@ export class TimeGraphAxisScale extends TimeGraphComponent {
                     if (this.unitController.numberTranslator) {
                         const label = this.unitController.numberTranslator(absolutePosition);
                         const text = new PIXI.Text(label, {
-                            fontSize: 10
+                            fontSize: 10,
+                            fill: lineColor
                         });
                         text.x = position.x + 5;
                         text.y = this._options.height - (2 * lineHeight);
@@ -104,7 +109,7 @@ export class TimeGraphAxisScale extends TimeGraphComponent {
             width: this._options.width,
             position: this._options.position
         });
-        this.renderVerticalLines(10, 0x000000);
+        this.renderVerticalLines(10, this._options.lineColor || 0x000000);
     }
 
     zoom(zoomStep: number) {

diff --git a/timeline-chart/src/components/time-graph-component.ts b/timeline-chart/src/components/time-graph-component.ts
@@ -38,6 +38,8 @@ export abstract class TimeGraphComponent {
     protected _displayObject: PIXI.Graphics;
     protected _options: TimeGraphComponentOptions;
 
+    protected graphicsData: PIXI.GraphicsData;
+
     constructor(protected _id: string, displayObject?: PIXI.Graphics) {
         this._displayObject = displayObject || new PIXI.Graphics();
     }
@@ -68,7 +70,11 @@ export abstract class TimeGraphComponent {
         const { position, width, height, color, opacity, borderColor, borderWidth, borderRadius } = opts;
         this.displayObject.lineStyle(borderWidth || 0, borderColor || 0x000000);
         this.displayObject.beginFill((color || 0xffffff), (opacity !== undefined ? opacity : 1));
-        this.displayObject.drawRoundedRect(position.x + 0.5, position.y + 0.5, width, height, borderRadius || 0);
+
+        const r = new PIXI.RoundedRectangle(position.x + 0.5, position.y + 0.5, width, height, borderRadius || 0);
+        this.graphicsData = this.displayObject.drawShape(r);
+
+        // this.displayObject.drawRoundedRect(position.x + 0.5, position.y + 0.5, width, height, borderRadius || 0);
         this.displayObject.endFill();
     }
 

diff --git a/timeline-chart/src/components/time-graph-grid.ts b/timeline-chart/src/components/time-graph-grid.ts
@@ -3,10 +3,14 @@ import { TimeGraphRect } from "./time-graph-component";
 import { TimeGraphUnitController } from "../time-graph-unit-controller";
 import { TimeGraphStateController } from "../time-graph-state-controller";
 
+export interface TimeGraphGridStyle extends TimeGraphRect {
+    lineColor?: number
+}
+
 export class TimeGraphGrid extends TimeGraphAxisScale {
 
     constructor(id: string,
-        protected _options: TimeGraphRect,
+        protected _options: TimeGraphGridStyle,
         protected rowHeight: number,
         protected unitController: TimeGraphUnitController,
         protected stateController: TimeGraphStateController) {
@@ -16,6 +20,6 @@ export class TimeGraphGrid extends TimeGraphAxisScale {
     protected addEvents() { }
 
     render(): void {
-        this.renderVerticalLines(this.stateController.canvasDisplayHeight, 0xdddddd);
+        this.renderVerticalLines(this.stateController.canvasDisplayHeight,  this._options.lineColor || 0xdddddd);
     }
 }
diff --git a/timeline-chart/src/components/time-graph-row-element.ts b/timeline-chart/src/components/time-graph-row-element.ts
@@ -37,7 +37,8 @@ export class TimeGraphRowElement extends TimeGraphComponent {
             position: this.position,
             width,
             borderRadius: 2,
-            borderWidth: style.borderWidth || 0
+            borderWidth: style.borderWidth || 0,
+            borderColor: style.borderColor || 0x000000
         };
     }
 
@@ -66,7 +67,7 @@ export class TimeGraphRowElement extends TimeGraphComponent {
     }
 
     update(opts?: TimeGraphStyledRect) {
-        if(opts){
+        if (opts) {
             this._options.position = opts.position;
             this._options.width = opts.width;
         }

diff --git a/timeline-chart/src/layer/time-graph-axis.ts b/timeline-chart/src/layer/time-graph-axis.ts
@@ -7,20 +7,26 @@ export class TimeGraphAxis extends TimeGraphLayer {
     protected scaleComponent: TimeGraphAxisScale;
 
 
-    constructor(id: string, protected style?: { color?: number }) {
+    constructor(id: string, protected style?: { color?: number, lineColor?: number }) {
         super(id);
     }
 
     protected getOptions() {
-        const color = this.style && this.style.color ? this.style.color : undefined;
+        let color;
+        let lineColor;
+        if(this.style){
+            color = this.style.color;
+            lineColor = this.style.lineColor;
+        }
         return {
             height: this.stateController.canvasDisplayHeight,
             width: this.stateController.canvasDisplayWidth,
             position: {
                 x: 0,
                 y: 0
             },
-            color
+            color,
+            lineColor
         }
     }
 

diff --git a/timeline-chart/src/layer/time-graph-chart-grid.ts b/timeline-chart/src/layer/time-graph-chart-grid.ts
@@ -5,15 +5,16 @@ export class TimeGraphChartGrid extends TimeGraphLayer {
 
     protected gridComponent: TimeGraphGrid;
 
-    constructor(id: string, protected rowHeight: number) {
+    constructor(id: string, protected rowHeight: number, protected lineColor?: number) {
         super(id);
     }
 
     protected afterAddToContainer() {
         this.gridComponent = new TimeGraphGrid('', {
             height: this.stateController.canvasDisplayHeight,
             position: { x: 0, y: 0 },
-            width: this.stateController.canvasDisplayWidth
+            width: this.stateController.canvasDisplayWidth,
+            lineColor: this.lineColor
         }, this.rowHeight, this.unitController, this.stateController);
         this.addChild(this.gridComponent);
         this.unitController.onViewRangeChanged(() => this.update());

diff --git a/timeline-chart/src/layer/time-graph-chart-selection-range.ts b/timeline-chart/src/layer/time-graph-chart-selection-range.ts
@@ -13,7 +13,7 @@ export class TimeGraphChartSelectionRange extends TimeGraphLayer {
     }
 
     protected updateScaleAndPosition() {
-        if (this.unitController.selectionRange) {
+        if (this.unitController.selectionRange && this.selectionRange) {
             this.selectionRange.rectOptions.position.x = this.getPixels(this.unitController.selectionRange.start - this.unitController.viewRange.start);
             this.selectionRange.rectOptions.width = this.getPixels(this.unitController.selectionRange.end - this.unitController.selectionRange.start)
             this.selectionRange.update();

diff --git a/timeline-chart/src/layer/time-graph-chart.ts b/timeline-chart/src/layer/time-graph-chart.ts
@@ -195,20 +195,29 @@ export class TimeGraphChart extends TimeGraphChartLayer {
         }).bind(this));
         this.addChild(rowComponent);
         this.rowComponents.set(row, rowComponent);
-        row.states.forEach((rowElementModel: TimelineChart.TimeGraphRowElementModel, elementIndex: number) => {
-            const start = this.getPixels(rowElementModel.range.start);
-            const end = this.getPixels(rowElementModel.range.end);
-            const range: TimelineChart.TimeGraphRange = {
-                start,
-                end
-            };
-            const elementStyle = this.providers.rowElementStyleProvider ? this.providers.rowElementStyleProvider(rowElementModel) : undefined;
-            const el = new TimeGraphRowElement(rowElementModel.id, rowElementModel, range, rowComponent, elementStyle);
-            this.rowElementComponents.set(rowElementModel, el);
-            el.model.selected && (this.selectedElementModel = el.model);
+        let selectedElement: TimeGraphRowElement | undefined;
+        row.states.forEach((rowElementModel: TimelineChart.TimeGraphRowElementModel) => {
+            const el = this.createNewRowElement(rowElementModel, rowComponent);
+            el.model.selected && (this.selectedElementModel = el.model) && (selectedElement = el);
             this.addElementInteractions(el);
-            this.addChild(el);
+            !el.model.selected && this.addChild(el);
         });
+        if (selectedElement) {
+            this.addChild(selectedElement);
+        }
+    }
+
+    protected createNewRowElement(rowElementModel: TimelineChart.TimeGraphRowElementModel, rowComponent: TimeGraphRow) {
+        const start = this.getPixels(rowElementModel.range.start);
+        const end = this.getPixels(rowElementModel.range.end);
+        const range: TimelineChart.TimeGraphRange = {
+            start,
+            end
+        };
+        const elementStyle = this.providers.rowElementStyleProvider ? this.providers.rowElementStyleProvider(rowElementModel) : undefined;
+        const el = new TimeGraphRowElement(rowElementModel.id, rowElementModel, range, rowComponent, elementStyle);
+        this.rowElementComponents.set(rowElementModel, el);
+        return el;
     }
 
     protected addElementInteractions(el: TimeGraphRowElement) {
@@ -258,7 +267,7 @@ export class TimeGraphChart extends TimeGraphChartLayer {
     }
 
     protected updateElementStyle(model: TimelineChart.TimeGraphRowElementModel) {
-        const style = this.providers.rowElementStyleProvider && this.providers.rowElementStyleProvider(this.selectedElementModel);
+        const style = this.providers.rowElementStyleProvider && this.providers.rowElementStyleProvider(model);
         const component = this.rowElementComponents.get(model);
         component && style && (component.style = style);
     }
@@ -304,7 +313,13 @@ export class TimeGraphChart extends TimeGraphChartLayer {
         this.updateElementStyle(this.selectedElementModel);
         const el = this.getElementById(model.id);
         if (el) {
-            this.selectRow(el.row.model);
+            const row = el.row;
+            if (row) {
+                const newEl = this.createNewRowElement(model, row);
+                this.removeChild(el);
+                this.addChild(newEl);
+                this.selectRow(newEl.row.model);
+            }
         }
         this.handleSelectedRowElementChange();
     }

diff --git a/timeline-chart/src/time-graph-container.ts b/timeline-chart/src/time-graph-container.ts
@@ -2,6 +2,7 @@ import * as PIXI from "pixi.js";
 import { TimeGraphUnitController } from "./time-graph-unit-controller";
 import { TimeGraphStateController } from "./time-graph-state-controller";
 import { TimeGraphLayer } from "./layer/time-graph-layer";
+import { TimeGraphRectangle } from "./components/time-graph-rectangle";
 
 export interface TimeGraphContainerOptions {
     id: string
@@ -56,6 +57,18 @@ export class TimeGraphContainer {
         this.stateController = new TimeGraphStateController(canvas, unitController);
 
         this.layers = [];
+
+        const background = new TimeGraphRectangle({
+            opacity: 0,
+            position: {
+                x:0, y:0
+            },
+            height: this.canvas.height,
+            width: this.canvas.width,
+            color: 0x550000
+        });
+        background.render();
+        this.stage.addChild(background.displayObject);
     }
 
     get canvas(): HTMLCanvasElement {