first steps

src/index.ts

@@ -1,8 +1,11 @@
-// export * from "./timeline-view";
-// export * from "./time-cursor";
-// export * from "./time-controller";
-// export * from "./time-axis";
+import { TimeLineChart } from "./timeline-chart";
+import { TimeAxis } from "./time-axis";
+import { TimelineView } from "./timeline-view";
 
-import {TimelineView} from "./timeline-view";
-
-new TimelineView('main');
+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);

src/time-axis-controller.ts

@@ -0,0 +1,8 @@
+import { TimeAxis } from "./time-axis";
+
+export class TimeAxisController {
+
+    constructor(protected timeAxis: TimeAxis) {
+
+    }
+}

src/time-axis.ts

@@ -1,3 +1,30 @@
+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);
+    }
+
+    get controller(): TimeAxisController {
+        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/timeline-chart.ts

@@ -0,0 +1,42 @@
+import { TimeAxis } from "./time-axis";
+
+export class TimeLineChart {
+
+    protected timeAxisMap: Map<string, TimeAxis> = new Map();
+
+    protected ctx?: CanvasRenderingContext2D;
+
+    constructor(id: string) {
+        const container = document.getElementById(id);
+        if (container) {
+            const canvas: HTMLCanvasElement = document.createElement('canvas');
+            canvas.width = 200;
+            canvas.height = 200;
+            canvas.id = id + '_time-line-view-canvas';
+            canvas.className = 'timeline-canvas';
+            container.appendChild(canvas);
+            this.ctx = canvas.getContext('2d') || undefined;
+        } else {
+            throw (`No container with id ${id} available.`);
+        }
+    }
+
+    protected render() {
+        this.timeAxisMap.forEach((ta) => {
+            if (this.ctx) {
+                ta.render(this.ctx);
+                const tlvs = ta.getTimelineViews();
+                tlvs.forEach((tlv) => {
+                    if (this.ctx) {
+                        tlv.render(this.ctx);
+                    }
+                });
+            }
+        })
+    }
+
+    addTimeAxis(id: string, ta: TimeAxis) {
+        this.timeAxisMap.set(id, ta);
+        this.render();
+    }
+}

src/timeline-view.ts

@@ -1,20 +1,19 @@
 export class TimelineView {
-    constructor(id: string) {
-        const container = document.getElementById(id);
-        if (container) {
-            const canvas: HTMLCanvasElement = document.createElement('canvas');
-            canvas.width = 200;
-            canvas.height = 200;
-            canvas.id = id + '_time-line-view-canvas';
-            canvas.className = 'timeline-canvas';
-            container.appendChild(canvas);
-            const ctx = canvas.getContext('2d');
-            if (ctx) {
-                ctx.fillStyle = "rgb(34, 222, 56)";
-                ctx.fillRect(20,20,160,160);
-            };
-        } else {
-            throw (`No container with id ${id} available.`);
-        }
+
+    constructor() {
+
+    }
+
+    render(ctx: CanvasRenderingContext2D) {
+        ctx.fillStyle = 'rgba(200,0,0,0.8)';
+        ctx.fillRect(-50, 30, 300, 40);
+    }
+
+    addRow() {
+
+    }
+
+    addElement() {
+
     }
 }