added first time graph components and example

src/index.ts

@@ -1,11 +1,65 @@
-import { TimeLineChart } from "./timeline-chart";
-import { TimeAxis } from "./time-axis";
-import { TimelineView } from "./timeline-view";
+import { TimeGraph, TimeGraphEntry } from "./time-graph";
 
-const chart = new TimeLineChart('main');
-const timeAxis = new TimeAxis();
-const timelineView1 = new TimelineView();
-const timelineView2 = new TimelineView();
-timeAxis.addTimelineView('tlv1', timelineView1);
-timeAxis.addTimelineView('tlv2', timelineView2);
-chart.addTimeAxis('ta1', timeAxis);
+const timeGraphEntry: TimeGraphEntry = {
+    id: 'testEntry',
+    name: 'EntryTest',
+    range: {
+        startTime: 200,
+        endTime: 6000
+    },
+    rows: [
+        {
+            states: [
+                {
+                    label: 'state1',
+                    range: {
+                        startTime: 450,
+                        endTime: 550
+                    }
+                },
+                {
+                    label: 'state2',
+                    range: {
+                        startTime: 650,
+                        endTime: 1550
+                    }
+                },
+                {
+                    label: 'state3',
+                    range: {
+                        startTime: 2650,
+                        endTime: 4550
+                    }
+                }
+            ]
+        },
+        {
+            states: [
+                {
+                    label: 'state2.1',
+                    range: {
+                        startTime: 1450,
+                        endTime: 2550
+                    }
+                },
+                {
+                    label: 'state2.2',
+                    range: {
+                        startTime: 2650,
+                        endTime: 2750
+                    }
+                },
+                {
+                    label: 'state2.3',
+                    range: {
+                        startTime: 4650,
+                        endTime: 5550
+                    }
+                }
+            ]
+        }
+    ]
+}
+
+const chart = new TimeGraph('main');
+chart.setEntry(timeGraphEntry);

src/time-axis-controller.ts

@@ -1,7 +1,11 @@
 import { TimeAxis } from "./time-axis";
+import { TimeGraphRange } from "./time-graph";
 
 export class TimeAxisController {
 
+    protected totalRange: TimeGraphRange;
+    protected visibleRange: TimeGraphRange;
+
     constructor(protected timeAxis: TimeAxis) {
 
     }

src/time-axis.ts

@@ -1,12 +1,9 @@
 import { TimeAxisController } from "./time-axis-controller";
-import { TimelineView } from "./timeline-view";
 
 export class TimeAxis {
 
     protected readonly _controller: TimeAxisController;
 
-    protected timelineViews: Map<string, TimelineView> = new Map();
-
     constructor() {
         this._controller = new TimeAxisController(this);
     }
@@ -15,16 +12,4 @@ export class TimeAxis {
         return this._controller;
     }
 
-    addTimelineView(id: string, tlv: TimelineView): void {
-        this.timelineViews.set(id, tlv);
-    }
-
-    getTimelineViews(): Map<string, TimelineView> {
-        return this.timelineViews;
-    }
-
-    render(ctx: CanvasRenderingContext2D) {
-        ctx.fillStyle = 'rgba(200,200,200,0.4)';
-        ctx.fillRect(-50, 0, 300, 10);
-    }
 }

src/time-graph-component.ts

@@ -0,0 +1,10 @@
+export abstract class TimeGraphComponent {
+
+    protected ctx: CanvasRenderingContext2D;
+
+    setContext(ctx: CanvasRenderingContext2D) {
+        this.ctx = ctx;
+    }
+
+    abstract render(): void;
+}

src/time-graph-row-view.ts

@@ -0,0 +1,41 @@
+import { TimeGraphState, TimeGraphStateView } from "./time-graph-state-view";
+import { TimeGraphComponent } from "./time-graph-component";
+import { TimeGraphRange } from "./time-graph";
+
+export interface TimeGraphRow {
+    states: TimeGraphState[]
+}
+
+export class TimeGraphRowView extends TimeGraphComponent {
+
+    protected height: number;
+    protected ypos: number;
+    protected width: number;
+
+    constructor(
+        protected idx: number,
+        protected row: TimeGraphRow,
+        protected range: TimeGraphRange
+    ) {
+        super();
+        this.height = 20;
+        this.ypos =(this.height * this.idx) + this.height/2;
+        this.width = this.range.endTime - this.range.startTime;
+    }
+
+    render() {
+        this.ctx.beginPath();
+        this.ctx.moveTo(0, this.ypos);
+        this.ctx.lineTo(this.width, this.ypos);
+        this.ctx.lineWidth = 1;
+        this.ctx.strokeStyle = 'rgba(0,0,0,0.5)';
+        this.ctx.stroke();
+
+        this.row.states.forEach(state => {
+            const timeGraphState = new TimeGraphStateView(state, this.ypos, this.range);
+            timeGraphState.setContext(this.ctx);
+            timeGraphState.render();
+        });
+    }
+
+}

src/time-graph-state-view.ts

@@ -0,0 +1,33 @@
+import { TimeGraphRange } from "./time-graph";
+import { TimeGraphComponent } from "./time-graph-component";
+
+export interface TimeGraphState {
+    range: TimeGraphRange
+    label: string
+}
+
+export class TimeGraphStateView extends TimeGraphComponent {
+
+    protected start: number;
+    protected end: number;
+    protected y: number;
+    protected height: number;
+
+    constructor(protected state: TimeGraphState, yPosition: number, protected range: TimeGraphRange) {
+        super();
+
+        // TODO this calculation of the initial offset must be calculated differently later
+        this.start = state.range.startTime - range.startTime;
+        this.end = state.range.endTime - range.startTime;
+
+        // TODO magic number 10 is the half of the row height...must come from a central style-config-provider later.
+        this.y = yPosition-10;
+        // TODO magic number 20 must come from a central style-config-provider later.
+        this.height = 20;
+    }
+
+    render() {
+        this.ctx.fillStyle = 'rgb(200,0,0)';
+        this.ctx.fillRect(this.start, this.y, this.end-this.start, this.height);
+    }
+}

src/time-graph.ts

@@ -0,0 +1,57 @@
+import { TimeGraphRow, TimeGraphRowView } from "./time-graph-row-view";
+
+export interface TimeGraphRange {
+    startTime: number
+    endTime: number
+}
+
+export interface TimeGraphEntry {
+    id: string
+    name: string
+    range: TimeGraphRange
+    rows: TimeGraphRow[]
+}
+
+export class TimeGraph {
+
+    protected container?: HTMLElement;
+
+    protected timeGraphEntries: Map<string, TimeGraphEntry> = new Map();
+
+    constructor(id: string) {
+        this.container = document.getElementById(id) || undefined;
+        if (!this.container) {
+            throw (`No container with id ${id} available.`);
+        }
+    }
+
+    protected getNewContext(id: string): CanvasRenderingContext2D | undefined {
+        if (this.container) {
+            const canvas: HTMLCanvasElement = document.createElement('canvas');
+            canvas.width = 6000;
+            canvas.height = 200;
+            canvas.id = id;
+            canvas.className = 'time-graph-canvas';
+            this.container.appendChild(canvas);
+            return canvas.getContext('2d') || undefined;
+        }
+    }
+
+    protected render() {
+        this.timeGraphEntries.forEach(timeGraphEntry => {
+            const timeGraphRowsContext = this.getNewContext('timeGraphRows_' + timeGraphEntry.id);
+            timeGraphEntry.rows.forEach((row: TimeGraphRow, idx: number) => {
+                const timeGraphRow = new TimeGraphRowView(idx, row, timeGraphEntry.range);
+                if (timeGraphRowsContext) {
+                    timeGraphRow.setContext(timeGraphRowsContext);
+                    timeGraphRow.render();
+                }
+            });
+        })
+    }
+
+    setEntry(timeGraphEntry: TimeGraphEntry) {
+        this.timeGraphEntries.set(timeGraphEntry.id, timeGraphEntry);
+        this.render();
+    }
+}

webpack.config.js

@@ -2,7 +2,7 @@ const path = require('path');
 const webpack = require('webpack');
 
 module.exports = {
-    entry: './src/index.ts',
+    entry: ['./src/index.ts'],
     devtool: "source-map",
     devServer: {
         contentBase: path.join(__dirname, 'example'),