From 4736f2f94ab13a50ab15af638d707a79a2ea94e3 Mon Sep 17 00:00:00 2001 From: Jan Bicker Date: Wed, 28 Nov 2018 13:13:18 +0000 Subject: [PATCH] UI appearance improvements --- example/index.html | 52 ++++++++++---------- src/components/time-graph-axis-scale.ts | 4 -- src/components/time-graph-component.ts | 16 ++++--- src/components/time-graph-grid.ts | 45 ++++++++++++++++++ src/components/time-graph-row-element.ts | 34 ++++++++++---- src/index.ts | 60 ++++++++++++++---------- src/layer/time-graph-chart-grid.ts | 22 +++++++++ src/layer/time-graph-chart.ts | 8 ++-- src/layer/time-graph-navigator.ts | 4 +- src/time-graph-container.ts | 4 +- src/time-graph-state-controller.ts | 4 +- 11 files changed, 176 insertions(+), 77 deletions(-) create mode 100644 src/components/time-graph-grid.ts create mode 100644 src/layer/time-graph-chart-grid.ts diff --git a/example/index.html b/example/index.html index b3eeab9..49b07f2 100644 --- a/example/index.html +++ b/example/index.html @@ -3,35 +3,39 @@ - + + #main { + border: 1px solid; + margin: 10px; + overflow: hidden; + } + + canvas { + display: block; + } + + .innerContainer { + width: 100%; + } + -
- 

-    

-    

-    

-    

-    

-    

-    

-    

-    

-    
+	

+		

+	

+	
 
 
 
\ No newline at end of file
diff --git a/src/components/time-graph-axis-scale.ts b/src/components/time-graph-axis-scale.ts
index 50ffd48..421250c 100644
--- 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
         }
-
-
     }
-
-
 }
\ No newline at end of file
diff --git a/src/components/time-graph-component.ts b/src/components/time-graph-component.ts
index 3282f28..8112ede 100644
--- 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
new file mode 100644
index 0000000..4e5fc32
--- /dev/null
+++ 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
+            });
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/src/components/time-graph-row-element.ts b/src/components/time-graph-row-element.ts
index 9393a4b..37bbd20 100644
--- 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);
     }
 }
\ No newline at end of file
diff --git a/src/index.ts b/src/index.ts
index 6159c09..cfb0b84 100644
--- 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);
\ No newline at end of file
+naviContainer.addLayer(navi);
+naviEl.appendChild(naviContainer.canvas);
\ No newline at end of file
diff --git a/src/layer/time-graph-chart-grid.ts b/src/layer/time-graph-chart-grid.ts
new file mode 100644
index 0000000..93ca59c
--- /dev/null
+++ b/src/layer/time-graph-chart-grid.ts
@@ -0,0 +1,22 @@
+import { TimeGraphLayer } from "./time-graph-layer";
+import { TimeGraphGrid } from "../components/time-graph-grid";
+
+export class TimeGraphChartGrid extends TimeGraphLayer {
+
+    protected gridComponent: TimeGraphGrid;
+
+    constructor(id:string, protected rowHeight: number){
+        super(id);
+    }
+
+    protected init() {
+        this.gridComponent = new TimeGraphGrid(this.unitController, this.stateController, this.rowHeight);
+        this.addChild(this.gridComponent);
+        this.unitController.onViewRangeChanged(() => this.update());
+    }
+
+    update() {
+        this.gridComponent.update();
+    }
+
+}
\ No newline at end of file
diff --git a/src/layer/time-graph-chart.ts b/src/layer/time-graph-chart.ts
index f39586f..d0c9bce 100644
--- a/src/layer/time-graph-chart.ts
+++ b/src/layer/time-graph-chart.ts
@@ -1,4 +1,4 @@
-import { TimeGraphRowElement } from "../components/time-graph-row-element";
+import { TimeGraphRowElement, TimeGraphRowElementStyle } from "../components/time-graph-row-element";
 import { TimeGraphRow } from "../components/time-graph-row";
 import { TimeGraphRowModel, TimeGraphRowElementModel } from "../time-graph-model";
 import { TimeGraphLayer } from "./time-graph-layer";
@@ -16,7 +16,7 @@ export class TimeGraphChart extends TimeGraphLayer {
     protected rows: TimeGraphRowModel[];
     protected rowHeight: number;
     protected rowCount: number;
-    protected rowElementStyleHook: (el: TimeGraphRowElementModel) => { color?: number, height?: number } | undefined;
+    protected rowElementStyleHook: (el: TimeGraphRowElementModel) => TimeGraphRowElementStyle | undefined;
     protected rowElementMouseInteractions: TimeGraphRowElementMouseInteractions;
     protected selectedElement: TimeGraphRowElement;
     protected selectedElementChangedHandler: ((el:TimeGraphRowElement)=>void)[];
@@ -32,7 +32,7 @@ export class TimeGraphChart extends TimeGraphLayer {
         this.selectedRowChangedHandler = [];
     }
 
-    registerRowElementStyleHook(styleHook: (el: TimeGraphRowElementModel) => { color?: number, height?: number } | undefined) {
+    registerRowElementStyleHook(styleHook: (el: TimeGraphRowElementModel) => TimeGraphRowElementStyle | undefined) {
         this.rowElementStyleHook = styleHook;
     }
 
@@ -67,7 +67,7 @@ export class TimeGraphChart extends TimeGraphLayer {
         const rowComponent = new TimeGraphRow(rowId, {
             position: {
                 x: relativeStartPosition * this.stateController.zoomFactor,
-                y: (height * this.rows.length) + height / 2
+                y: (height * this.rows.length) + (height / 2)
             },
             width: range * this.stateController.zoomFactor
         }, this.rowCount);
diff --git a/src/layer/time-graph-navigator.ts b/src/layer/time-graph-navigator.ts
index 1c380b0..7616b1a 100644
--- a/src/layer/time-graph-navigator.ts
+++ b/src/layer/time-graph-navigator.ts
@@ -22,7 +22,7 @@ export class TimeGraphNavigator extends TimeGraphLayer {
 
         if (this.unitController.selectionRange) {
             const selectionOpts: TimeGraphStyledRect = {
-                color: 0xf6f666,
+                color: 0xb7b799,
                 height: this.canvas.height,
                 opacity: 0.5,
                 position: {
@@ -55,7 +55,7 @@ export class TimeGraphNavigatorHandle extends TimeGraphComponent {
             height: 20,
             position,
             width,
-            color: 0x11aa11
+            color: 0x777769
         })
     }
 }
\ No newline at end of file
diff --git a/src/time-graph-container.ts b/src/time-graph-container.ts
index bda7a25..b387762 100644
--- a/src/time-graph-container.ts
+++ b/src/time-graph-container.ts
@@ -31,7 +31,9 @@ export class TimeGraphContainer {
             height: config.height,
             view: canvas,
             backgroundColor: config.backgroundColor,
-            transparent: config.transparent
+            transparent: config.transparent,
+            antialias: true,
+            roundPixels: false
         });
         application.stage.height = config.height;
 
diff --git a/src/time-graph-state-controller.ts b/src/time-graph-state-controller.ts
index bd02340..fba22bb 100644
--- a/src/time-graph-state-controller.ts
+++ b/src/time-graph-state-controller.ts
@@ -5,7 +5,8 @@ export class TimeGraphStateController {
         x: number;
         y: number;
     };
-    canvasWidth: number;
+    readonly canvasWidth: number;
+    readonly canvasHeight: number;
 
     protected _zoomFactor: number;
     protected _initialZoomFactor: number;
@@ -19,6 +20,7 @@ export class TimeGraphStateController {
 
     constructor(protected canvas: HTMLCanvasElement, protected unitController: TimeGraphUnitController) {
         this.canvasWidth = canvas.width;
+        this.canvasHeight = canvas.height;
         this._initialZoomFactor = this.zoomFactor;
         this._positionOffset = { x: 0, y: 0 };
         this.oldPositionOffset = { x: 0, y: 0 };