Several features and improvements

Real life data added, first data provider implemented, further features and improvements implemented, Refactorings
eclipse-cdt-cloud · Dec 7, 2018 · 702e690 · 702e690
1 parent e5c95fd
commit 702e690
Show file tree

Hide file tree

Showing 20 changed files with 683 additions and 203 deletions.
diff --git a/example/index.html b/example/index.html
@@ -8,15 +8,15 @@
 			overscroll-behavior: none;
 		}
 
-        #demoContainer {
-            width: 100%;
-            display: flex;
-            justify-content: center;
-        }
+		#demoContainer {
+			width: 100%;
+			display: flex;
+			justify-content: center;
+		}
 
 		#main {
 			border: 1px solid;
-			margin: 10px;
+			margin: 10px 0;
 			overflow: hidden;
 		}
 
@@ -27,14 +27,46 @@
 		.innerContainer {
 			width: 100%;
 		}
+
+        #main-vscroll {
+            margin-top: 40px;
+        }
+
+		#cursor-reset {
+			border: 1px solid grey;
+			background-color: #dddddd;
+			width: 170px;
+			cursor: pointer;
+			display: flex;
+			justify-content: center;
+		}
+
+		#test-button-row {
+			width: 100%;
+			display: flex;
+			justify-content: center;
+		}
+
+		#test-buttons {
+			width: 1000px;
+			display: flex;
+			justify-content: left;
+		}
 	</style>
 </head>
 
 <body>
 	<div id='demoContainer'>
 		<div id='main'></div>
+        <div id='main-vscroll'></div>
+	</div>
+	<div id='test-button-row'>
+		<div id='test-buttons'>
+			<div id='cursor-reset'>Reset selection cursors</div>
+		</div>
 	</div>
 	<script type="text/javascript" src="./bundle.js" charset="utf-8">
+
 	</script>
 </body>
 

diff --git a/src/components/time-graph-axis-scale.ts b/src/components/time-graph-axis-scale.ts
@@ -8,12 +8,14 @@ export class TimeGraphAxisScale extends TimeGraphComponent {
     protected mouseStartY: number;
     protected mouseStartX: number;
     protected oldViewRange: TimeGraphRange;
-
     protected mouseIsDown: boolean = false;
 
     constructor(id: string, protected _options: TimeGraphRect, protected unitController: TimeGraphUnitController, protected stateController: TimeGraphStateController) {
         super(id);
+        this.addEvents();
+    }
 
+    protected addEvents() {
         this.addEvent('mousedown', event => {
             this.mouseStartY = event.data.global.y;
             this.mouseStartX = event.data.global.x;
@@ -34,34 +36,47 @@ export class TimeGraphAxisScale extends TimeGraphComponent {
         this.addEvent('mouseupoutside', moveEnd, this._displayObject);
     }
 
+    protected getStepLength(): number {
+        const canvasDisplayWidth = this.stateController.canvasDisplayWidth;
+        const minCanvasStepWidth = 200;
+        const viewRangeLength = this.unitController.viewRangeLength;
+
+        const maxSteps = canvasDisplayWidth / minCanvasStepWidth;
+        const realStepLength = viewRangeLength / maxSteps;
+        const log = Math.log10(realStepLength);
+        const ceilLog = ~~(log + 0.5);
+        const normalizedStepLength = Math.pow(10, ceilLog);
+        return normalizedStepLength;
+    }
+
+    protected renderVerticalLines(lineHeight: number, lineColor: number) {
+        const stepLength = this.getStepLength();
+        const steps = Math.trunc(this.unitController.absoluteRange / stepLength);
+        for (let i = 0; i < steps; i++) {
+            const height = lineHeight * (-1);
+            const xpos = (stepLength * i - this.unitController.viewRange.start) * this.stateController.zoomFactor;
+            if (xpos >= 0 && xpos < this.stateController.canvasDisplayWidth) {
+                const position = {
+                    x: xpos,
+                    y: this._options.height
+                };
+                this.vline({
+                    position,
+                    height,
+                    color: lineColor
+                });
+            }
+        }
+    }
+
     render() {
         this.rect({
             color: 0xededdd,
             height: this._options.height,
             width: this._options.width,
             position: this._options.position
         });
-        // const stepLength = 10000;
-        // const steps = Math.trunc(this.unitController.absoluteRange / stepLength);
-        // for (let i = 0; i < steps; i++) {
-        //     const height = -10;
-        //     const xpos = (stepLength * i - this.unitController.viewRange.start) * this.stateController.zoomFactor;
-        //     if (xpos >= 0 && xpos < this.stateController.canvasDisplayWidth) {
-        //         const position = {
-        //             x: xpos,
-        //             y: this._options.height
-        //         };
-        //         this.vline({
-        //             position,
-        //             height,
-        //             color: 0x000000
-        //         });
-        //     }
-        // }
-        console.log("ZOOM", this.stateController.zoomFactor);
-        console.log("start", this.unitController.viewRange.start);
-        console.log("end", this.unitController.viewRange.end);
-        console.log("range", this.unitController.viewRangeLength);
+        this.renderVerticalLines(10, 0x000000);
     }
 
     zoom(zoomStep: number) {
@@ -72,11 +87,11 @@ export class TimeGraphAxisScale extends TimeGraphComponent {
         const xOffset = this.mouseStartX - shiftedMouseX;
         const viewRangeOffset = xOffset / (this.stateController.canvasDisplayWidth / oldViewRangeLength);
         let start = this.oldViewRange.start + viewRangeOffset;
-        if(start < 0) {
+        if (start < 0) {
             start = 0;
         }
         let end = start + newViewRangeLength;
-        if(end > this.unitController.absoluteRange){
+        if (end > this.unitController.absoluteRange) {
             end = this.unitController.absoluteRange;
         }
         this.unitController.viewRange = {

diff --git a/src/components/time-graph-component.ts b/src/components/time-graph-component.ts
@@ -63,21 +63,21 @@ export abstract class TimeGraphComponent {
     protected rect(opts: TimeGraphStyledRect) {
         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.beginFill((color || 0xffffff), (opacity !== undefined ? opacity : 1));
         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);
+        const { position, width, thickness, color, opacity } = opts;
+        this.displayObject.lineStyle(thickness || 1, color || 0x000000, (opacity !== undefined ? opacity : 1));
         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);
+        const { position, height, thickness, color, opacity } = opts;
+        this.displayObject.lineStyle(thickness || 1, color || 0x000000, (opacity !== undefined ? opacity : 1));
         this.displayObject.moveTo(position.x + 0.5, position.y);
         this.displayObject.lineTo(position.x + 0.5, position.y + height);
     }

diff --git a/src/components/time-graph-grid.ts b/src/components/time-graph-grid.ts
@@ -1,45 +1,29 @@
-import { TimeGraphComponent } from "./time-graph-component";
+import { TimeGraphAxisScale } from "./time-graph-axis-scale";
+import { TimeGraphRect } from "./time-graph-component";
 import { TimeGraphUnitController } from "../time-graph-unit-controller";
 import { TimeGraphStateController } from "../time-graph-state-controller";
 
-export class TimeGraphGrid extends TimeGraphComponent {
+export class TimeGraphGrid extends TimeGraphAxisScale {
 
-    constructor(
-        protected unitController: TimeGraphUnitController,
-        protected stateController: TimeGraphStateController,
-        protected rowHeight: number) {
-        super('');
+    constructor(id: string, protected _options: TimeGraphRect, protected rowHeight: number, protected unitController: TimeGraphUnitController, protected stateController: TimeGraphStateController) {
+        super(id, _options, unitController, stateController);
     }
 
+    protected addEvents() { }
+
     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.canvasDisplayWidth) {
-                const position = {
-                    x: xpos,
-                    y: 0
-                };
-                this.vline({
-                    position,
-                    height: this.stateController.canvasDisplayHeight,
-                    color: 0xdddddd
-                });
-            }
-        }
+        this.renderVerticalLines(this.stateController.canvasDisplayHeight, 0xdddddd);
 
-        const rowNumber = Math.trunc(this.stateController.canvasDisplayHeight /this.rowHeight) + 2;
-        for(let i = 0; i < rowNumber; i++){
+        const rowNumber = Math.trunc(this.stateController.canvasDisplayHeight / this.rowHeight) + 2;
+        for (let i = 0; i < rowNumber; i++) {
             this.hline({
                 color: 0xdddddd,
                 position: {
-                    x: 0,
-                    y: (i * this.rowHeight) - (this.rowHeight/2)
+                    x: this._options.position.x,
+                    y: (i * this.rowHeight) - (this.rowHeight / 2)
                 },
-                width: this.stateController.canvasDisplayWidth
+                width: this._options.width
             });
         }
     }
-
 }
diff --git a/src/components/time-graph-row-element.ts b/src/components/time-graph-row-element.ts
@@ -24,7 +24,7 @@ export class TimeGraphRowElement extends TimeGraphComponent {
         const height = style.height || 14;
         const position = {
             x: this.range.start,
-            y: this._row.position.y - (height / 2)
+            y: this._row.position.y + ((this.row.height - height) / 2)
         };
         const width = this.range.end - this.range.start;
         this.rectangleOptions = {
@@ -52,10 +52,10 @@ export class TimeGraphRowElement extends TimeGraphComponent {
         if (style.height !== undefined) {
             this.rectangleOptions.height = style.height;
         }
-        if(style.borderColor !== undefined){
+        if (style.borderColor !== undefined) {
             this.rectangleOptions.borderColor = style.color;
         }
-        if(style.borderWidth !== undefined) {
+        if (style.borderWidth !== undefined) {
             this.rectangleOptions.borderWidth = style.borderWidth;
         }
         this.update();

diff --git a/src/components/time-graph-row.ts b/src/components/time-graph-row.ts
@@ -1,8 +1,22 @@
-import { TimeGraphComponent, TimeGraphHorizontalElement, TimeGraphElementPosition } from "./time-graph-component";
+import { TimeGraphComponent, TimeGraphElementPosition, TimeGraphRect } from "./time-graph-component";
+import { TimeGraphRowModel } from "../time-graph-model";
+
+export interface TimeGraphRowStyle {
+    backgroundColor?: number
+    backgroundOpacity?: number
+    lineThickness?: number
+    lineColor?: number
+    lineOpacity?: number
+}
 
 export class TimeGraphRow extends TimeGraphComponent {
 
-    constructor(id: string, protected _options: TimeGraphHorizontalElement, protected _rowIndex: number) {
+    constructor(
+        id: string,
+        protected _options: TimeGraphRect,
+        protected _rowIndex: number,
+        public readonly model: TimeGraphRowModel,
+        protected style: TimeGraphRowStyle = {lineOpacity:0.5, lineThickness: 1, backgroundOpacity: 0}) {
         super(id);
     }
 
@@ -11,15 +25,30 @@ export class TimeGraphRow extends TimeGraphComponent {
     }
 
     render() {
-        this.hline({
-            color: 0x000000,
-            opacity: 0.2,
+        this.rect({
+            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,
+            width: this._options.width,
+            position: {
+                x: this._options.position.x,
+                y: this._options.position.y + (this._options.height/2)
+            }
+        });
     }
 
     get position(): TimeGraphElementPosition {
         return this._options.position;
     }
+
+    get height(): number {
+        return this._options.height;
+    }
 }