UI appearance improvements

eclipse-cdt-cloud · Nov 28, 2018 · 4736f2f · 4736f2f
1 parent 507e9b9
commit 4736f2f
Show file tree

Hide file tree

Showing 11 changed files with 176 additions and 77 deletions.
diff --git a/example/index.html b/example/index.html
@@ -3,35 +3,39 @@
 
 <head>
 	<meta charset="UTF-8">
-    <style>
-        body {
-            overscroll-behavior: none;
-        }
-        #main {
-            border: 1px solid;
-            margin: 10px;
-            width: 500px;
-            overflow: hidden;
-        }
-        .innerContainer {
+	<style>
+		body {
+			overscroll-behavior: none;
+		}
+
+        #demoContainer {
             width: 100%;
+            display: flex;
+            justify-content: center;
         }
-    </style>
+
+		#main {
+			border: 1px solid;
+			margin: 10px;
+			overflow: hidden;
+		}
+
+		canvas {
+			display: block;
+		}
+
+		.innerContainer {
+			width: 100%;
+		}
+	</style>
 </head>
 
 <body>
-	<div id='main'></div>
-    <pre id='test0'></pre>
-    <pre id='test1'></pre>
-    <pre id='test2'></pre>
-    <pre id='test3'></pre>
-    <pre id='test4'></pre>
-    <pre id='test5'></pre>
-    <pre id='test6'></pre>
-    <pre id='test7'></pre>
-    <pre id='test8'></pre>
-    <pre id='test9'></pre>
-    <script type="text/javascript" src="./bundle.js" charset="utf-8"></script>
+	<div id='demoContainer'>
+		<div id='main'></div>
+	</div>
+	<script type="text/javascript" src="./bundle.js" charset="utf-8">
+	</script>
 </body>
 
 </html>
diff --git a/src/components/time-graph-axis-scale.ts b/src/components/time-graph-axis-scale.ts
@@ -79,9 +79,5 @@ export class TimeGraphAxisScale extends TimeGraphComponent {
             start,
             end
         }
-
-
     }
-
-
 }
diff --git a/src/components/time-graph-component.ts b/src/components/time-graph-component.ts
@@ -6,6 +6,9 @@ export type TimeGraphComponentOptions = {}
 export interface TimeGraphElementStyle {
     color?: number
     opacity?: number
+    borderWidth?: number
+    borderColor?: number
+    borderRadius?: number
 }
 export interface TimeGraphElementPosition {
     x: number
@@ -58,24 +61,25 @@ export abstract class TimeGraphComponent {
     abstract render(): void;
 
     protected rect(opts: TimeGraphStyledRect) {
-        const { position, width, height, color, opacity } = opts;
+        const { position, width, height, color, opacity, borderColor, borderWidth, borderRadius } = opts;
+        this.displayObject.lineStyle(borderWidth || 0, borderColor || 0x000000);
         this.displayObject.beginFill((color || 0x000000), (opacity !== undefined ? opacity : 1));
-        this.displayObject.drawRect(position.x, position.y, width, height);
+        this.displayObject.drawRoundedRect(position.x + 0.5, position.y + 0.5, width, height, borderRadius || 0);
         this.displayObject.endFill();
     }
 
     protected hline(opts: TimeGraphHorizontalLine) {
         const { position, width, thickness, color } = opts;
         this.displayObject.lineStyle(thickness || 1, color || 0x000000);
-        this.displayObject.moveTo(position.x, position.y);
-        this.displayObject.lineTo(position.x + width, position.y);
+        this.displayObject.moveTo(position.x, position.y + 0.5);
+        this.displayObject.lineTo(position.x + width, position.y + 0.5);
     }
 
     protected vline(opts: TimeGraphVerticalLine) {
         const { position, height, thickness, color } = opts;
         this.displayObject.lineStyle(thickness || 1, color || 0x000000);
-        this.displayObject.moveTo(position.x, position.y);
-        this.displayObject.lineTo(position.x, position.y + height);
+        this.displayObject.moveTo(position.x + 0.5, position.y);
+        this.displayObject.lineTo(position.x + 0.5, position.y + height);
     }
 
     addEvent(event: TimeGraphInteractionType, handler: TimeGraphInteractionHandler, displayObject: PIXI.DisplayObject) {

diff --git a/src/components/time-graph-grid.ts b/src/components/time-graph-grid.ts
@@ -0,0 +1,45 @@
+import { TimeGraphComponent } from "./time-graph-component";
+import { TimeGraphUnitController } from "../time-graph-unit-controller";
+import { TimeGraphStateController } from "../time-graph-state-controller";
+
+export class TimeGraphGrid extends TimeGraphComponent {
+
+    constructor(
+        protected unitController: TimeGraphUnitController,
+        protected stateController: TimeGraphStateController,
+        protected rowHeight: number) {
+        super('');
+    }
+
+    render(): void {
+        const stepLength = 10000;
+        const steps = Math.trunc(this.unitController.absoluteRange / stepLength);
+        for (let i = 0; i < steps; i++) {
+            const xpos = (stepLength * i - this.unitController.viewRange.start) * this.stateController.zoomFactor;
+            if (xpos >= 0 && xpos < this.stateController.canvasWidth) {
+                const position = {
+                    x: xpos,
+                    y: 0
+                };
+                this.vline({
+                    position,
+                    height: this.stateController.canvasHeight,
+                    color: 0xdddddd
+                });
+            }
+        }
+
+        const rowNumber = Math.trunc(this.stateController.canvasHeight /this.rowHeight) + 2;
+        for(let i = 0; i < rowNumber; i++){
+            this.hline({
+                color: 0xdddddd,
+                position: {
+                    x: 0,
+                    y: (i * this.rowHeight) - (this.rowHeight/2)
+                },
+                width: this.stateController.canvasWidth
+            });
+        }
+    }
+
+}
diff --git a/src/components/time-graph-row-element.ts b/src/components/time-graph-row-element.ts
@@ -2,15 +2,22 @@ import { TimeGraphComponent, TimeGraphStyledRect } from "./time-graph-component"
 import { TimeGraphRow } from "./time-graph-row";
 import { TimeGraphRowElementModel } from "../time-graph-model";
 
+export interface TimeGraphRowElementStyle {
+    color?: number
+    height?: number
+    borderWidth?: number
+    borderColor?: number
+}
+
 export class TimeGraphRowElement extends TimeGraphComponent {
 
-    protected _style: TimeGraphStyledRect;
+    protected rectangleOptions: TimeGraphStyledRect;
 
     constructor(
         id: string,
         protected _options: TimeGraphRowElementModel,
         protected _row: TimeGraphRow,
-        style: { color?: number, height?: number } = { color: 0xfffa66, height: 14 }
+        style: TimeGraphRowElementStyle = { color: 0xfffa66, height: 14 }
     ) {
         super(id);
         const height = style.height || 14;
@@ -19,11 +26,12 @@ export class TimeGraphRowElement extends TimeGraphComponent {
             y: this._row.position.y - (height / 2)
         };
         const width = this._options.range.end - this._options.range.start;
-        this._style = {
+        this.rectangleOptions = {
             color: style.color,
             height,
             position,
-            width
+            width,
+            borderRadius: 2
         };
     }
 
@@ -35,17 +43,23 @@ export class TimeGraphRowElement extends TimeGraphComponent {
         return this._row;
     }
 
-    set style(style: { color?: number, height?: number }) {
-        if (style.color) {
-            this._style.color = style.color;
+    set style(style: TimeGraphRowElementStyle) {
+        if (style.color !== undefined) {
+            this.rectangleOptions.color = style.color;
+        }
+        if (style.height !== undefined) {
+            this.rectangleOptions.height = style.height;
+        }
+        if(style.borderColor !== undefined){
+            this.rectangleOptions.borderColor = style.color;
         }
-        if (style.height) {
-            this._style.height = style.height;
+        if(style.borderWidth !== undefined) {
+            this.rectangleOptions.borderWidth = style.borderWidth;
         }
         this.update();
     }
 
     render() {
-        this.rect(this._style);
+        this.rect(this.rectangleOptions);
     }
 }
diff --git a/src/index.ts b/src/index.ts
@@ -7,30 +7,29 @@ import { TimeGraphChartCursors } from "./layer/time-graph-chart-cursors";
 import { TimeGraphAxisCursors } from "./layer/time-graph-axis-cursors";
 import { timeGraph } from "./test-data";
 import { TimeGraphRowElementModel } from "./time-graph-model";
-import { TimeGraphRowElement } from "./components/time-graph-row-element";
+import { TimeGraphRowElement, TimeGraphRowElementStyle } from "./components/time-graph-row-element";
+import { TimeGraphChartGrid } from "./layer/time-graph-chart-grid";
 // import { TimeGraphChartArrows } from "./layer/time-graph-chart-arrows";
 
+
+const mainWidth = 1000; //the width for the main container and its added canvas elements. Fixed yet!
 const container = document.getElementById('main');
 if (!container) {
     throw (`No container available.`);
 }
 container.innerHTML = '';
+container.style.width = mainWidth + "px";
+
+const unitController = new TimeGraphUnitController(timeGraph.totalRange, { start: 12000, end: 50000 });
 
 const axisHTMLContainer = document.createElement('div');
 axisHTMLContainer.id = 'main_axis';
 container.appendChild(axisHTMLContainer);
 
-const chartHTMLContainer = document.createElement('div');
-chartHTMLContainer.id = 'main_chart';
-container.appendChild(chartHTMLContainer);
-
-const unitController = new TimeGraphUnitController(timeGraph.totalRange, { start: 10000, end: 40000 });
-
 const timeGraphAxisContainer = new TimeGraphContainer({
     height: 30,
-    width: 500,
-    id: timeGraph.id + '_axis',
-    backgroundColor: 0x66aa33
+    width: mainWidth,
+    id: timeGraph.id + '_axis'
 }, unitController);
 axisHTMLContainer.appendChild(timeGraphAxisContainer.canvas);
 
@@ -40,36 +39,49 @@ timeGraphAxisContainer.addLayer(timeAxisLayer);
 const timeAxisCursors = new TimeGraphAxisCursors('timeGraphAxisCursors');
 timeGraphAxisContainer.addLayer(timeAxisCursors);
 
+const chartHTMLContainer = document.createElement('div');
+chartHTMLContainer.id = 'main_chart';
+container.appendChild(chartHTMLContainer);
+
 const timeGraphChartContainer = new TimeGraphContainer({
     id: timeGraph.id + '_chart',
     height: 300,
-    width: 500,
+    width: mainWidth,
     backgroundColor: 0xFFFFFF
 }, unitController);
 chartHTMLContainer.appendChild(timeGraphChartContainer.canvas);
 
-function getRowElementStyle(model: TimeGraphRowElementModel): { color: number, height: number } {
+const rowHeight = 24;
+
+const timeGraphChartGridLayer = new TimeGraphChartGrid('timeGraphGrid', rowHeight);
+timeGraphChartContainer.addLayer(timeGraphChartGridLayer);
+
+function getRowElementStyle(model: TimeGraphRowElementModel): TimeGraphRowElementStyle {
     if (model.data && model.data.type) {
         if (model.data.type === 'red') {
             return {
                 color: 0xbc2f00,
-                height: 8
+                height: 10,
+                borderWidth: 0
             }
         } else if (model.data.type === 'yellow') {
             return {
                 color: 0xccbf5d,
-                height: 4
+                height: 10,
+                borderWidth: 0
             }
         }
     }
     return {
         color: 0x11ad1b,
-        height: 12
+        height: 18,
+        borderWidth: 0
     }
 }
 
 const timeGraphChartLayer = new TimeGraphChart('timeGraphChart');
 timeGraphChartContainer.addLayer(timeGraphChartLayer);
+
 timeGraphChartLayer.registerRowElementStyleHook((model: TimeGraphRowElementModel) => {
     return getRowElementStyle(model);
 });
@@ -83,10 +95,9 @@ timeGraphChartLayer.onSelectedRowElementChanged(el => {
     }
     selectedElement = el;
     el.style = {
-        color: 0xff0000
+        borderWidth: 1
     }
 });
-const rowHeight = 20;
 timeGraphChartLayer.addRows(timeGraph.rows, rowHeight);
 
 // const timeGraphChartArrows = new TimeGraphChartArrows('chartArrows');
@@ -102,7 +113,6 @@ timeGraphChartCursors.onNavigateLeft(() => {
     const nextIndex = states.findIndex((rowElementModel: TimeGraphRowElementModel) => {
         return rowElementModel.range.start >= unitController.selectionRange.start;
     });
-    console.log('go left', nextIndex);
     if (nextIndex > 0) {
         const newPos = states[nextIndex - 1].range.start;
         unitController.selectionRange = { start: newPos, end: newPos };
@@ -115,7 +125,6 @@ timeGraphChartCursors.onNavigateRight(() => {
     const nextIndex = states.findIndex((rowElementModel: TimeGraphRowElementModel) => {
         return rowElementModel.range.start > unitController.selectionRange.start;
     });
-    console.log('go right', nextIndex);
     if (nextIndex < states.length) {
         const newPos = states[nextIndex].range.start;
         unitController.selectionRange = { start: newPos, end: newPos };
@@ -124,12 +133,13 @@ timeGraphChartCursors.onNavigateRight(() => {
 
 const naviEl = document.createElement('div');
 naviEl.id = "navi";
-document.body.appendChild(naviEl);
+container.appendChild(naviEl);
 const naviContainer = new TimeGraphContainer({
-    width: 700,
-    height: 20,
-    id: 'navi'
+    width: mainWidth,
+    height: 10,
+    id: 'navi',
+    backgroundColor: 0xeeeed9
 }, unitController);
-naviEl.appendChild(naviContainer.canvas);
 const navi = new TimeGraphNavigator('timeGraphNavigator');
-naviContainer.addLayer(navi);
+naviContainer.addLayer(navi);
+naviEl.appendChild(naviContainer.canvas);