Implemented a new code structure

eclipse-cdt-cloud · Nov 27, 2018 · beda917 · beda917
1 parent b175628
commit beda917
Show file tree

Hide file tree

Showing 18 changed files with 383 additions and 407 deletions.
diff --git a/example/index.html b/example/index.html
@@ -4,12 +4,18 @@
 <head>
 	<meta charset="UTF-8">
     <style>
+        body {
+            overscroll-behavior: none;
+        }
         #main {
             border: 1px solid;
             margin: 10px;
             width: 500px;
             overflow: hidden;
         }
+        .innerContainer {
+            width: 100%;
+        }
     </style>
 </head>
 

diff --git a/src/index.ts b/src/index.ts
@@ -1,5 +1,7 @@
-import { TimeGraph, TimeGraphModel } from "./time-graph";
-// import { TimeAxis } from "./time-axis";
+import { TimeGraph } from "./time-graph";
+import { TimeGraphModel } from "./time-graph-model";
+import { TimeGraphAxis } from "./time-graph-axis";
+import { TimeGraphChart } from "./time-graph-chart";
 
 // const timeGraphSimple: TimeGraphModel = {
 //     id: 'test1',
@@ -112,65 +114,59 @@ const timeGraph: TimeGraphModel = {
             ]
         },
         {
+            range: {
+                start: 1000,
+                end: 2000
+            },
             states: [
                 {
                     label: 'state2.1',
                     range: {
-                        start: 145,
-                        end: 255
+                        start: 1145,
+                        end: 1255
                     }
                 },
                 {
                     label: 'state2.2',
                     range: {
-                        start: 265,
-                        end: 275
+                        start: 1265,
+                        end: 1275
                     }
                 },
                 {
                     label: 'state2.3',
                     range: {
-                        start: 365,
-                        end: 555
+                        start: 1365,
+                        end: 1555
                     }
                 }
             ]
         }
     ]
 }
 
+const tg = new TimeGraph('main', timeGraph);
 
+const timeAxis = new TimeGraphAxis({
+    id: 'timeGraphAxis',
+    height: 30,
+    width: 500
+}, timeGraph.range, tg.controller);
 
-// const tg = new TimeGraph('main');
-
-// const timeAxis = new TimeAxis({
-//     id: 'timeAxis',
-//     height: 30,
-//     width: 6000
-// });
-// tg.setTimeAxis(timeAxis)
-
-// r1 = new TimeGraphRow(row-config)
-// r2 = new TimeGraphRow(row-config)
-
-// tg.addRows([r1, r2])
-// tg.removeRows([r2])
-
-// s1 = new TimeGraphState(state-config)
-// s2 = new TimeGraphState(state-config)
-
-// r = tg.findRow(row-id)
-// r.addStates([s1])
-// r1.addStates([s2])
-
-const chart = new TimeGraph('main', timeGraph);
-chart.render();
+const timeGraphChart = new TimeGraphChart({
+    id: timeGraph.id + '_chart',
+    height: 300,
+    width: 500
+}, timeGraph.range, tg.controller);
+timeGraphChart.addRows(timeGraph.rows);
 
+tg.timeGraphAxis = timeAxis;
+tg.timeGraphChart = timeGraphChart;
 
 export type TestFieldId = 'test0' | 'test1' | 'test2' | 'test3' | 'test4' | 'test5' | 'test6' | 'test7' | 'test8' | 'test9';
-export function tgTest(id: TestFieldId, val:string){
+export function tgTest(id: TestFieldId, val: string) {
     const f = document.getElementById(id);
-    if(f){
+    if (f) {
         f.innerHTML = val;
     }
 }
diff --git a/src/time-axis-controller.ts b/src/time-axis-controller.ts
diff --git a/src/time-axis.ts b/src/time-axis.ts
diff --git a/src/time-cursor.ts b/src/time-cursor.ts
diff --git a/src/time-graph-axis-scale.ts b/src/time-graph-axis-scale.ts
@@ -0,0 +1,19 @@
+import { TimeGraphComponent, TimeGraphRect } from "./time-graph-component";
+
+export class TimeGraphAxisScale extends TimeGraphComponent {
+
+    constructor(id: string, protected options: TimeGraphRect) {
+        super(id);
+    }
+
+    render() {
+        this.rect({
+            color: 0xFF0000,
+            height: this.options.height,
+            width: this.options.width,
+            position: this.options.position
+        });
+        console.log("render axis", this.options.width);
+    }
+
+}
diff --git a/src/time-graph-axis.ts b/src/time-graph-axis.ts
@@ -0,0 +1,34 @@
+import { TimeGraphAxisScale } from "./time-graph-axis-scale";
+import { TimeGraphContainer, TimeGraphContainerOptions } from "./time-graph-container";
+import { TimeGraphRange } from "./time-graph-model";
+import { TimeGraphStateController } from "./time-graph-state-controller";
+
+export class TimeGraphAxis extends TimeGraphContainer {
+
+    constructor(protected canvasOpts: TimeGraphContainerOptions, protected range: TimeGraphRange, protected controller: TimeGraphStateController) {
+        super({
+            id: canvasOpts.id,
+            height: canvasOpts.height,
+            width: canvasOpts.width,
+            backgroundColor: 0xAA30f0
+        }, controller);
+
+        this.update();
+        this.controller.zoomAndPanController.addMousewheelZoomAndPan(this.canvas);
+    }
+
+    update() {
+        this.stage.removeChildren();
+        const scaleComponent = new TimeGraphAxisScale(this.canvasOpts.id + '_scale', {
+            height: 30,
+            width: (this.range.end - this.range.start) * this._controller.zoomFactor,
+            position: {
+                x: this._controller.positionOffset.x,
+                y: 0
+            }
+        });
+
+        this.addChild(scaleComponent);
+        this.controller.zoomAndPanController.addDnDZoomAndPan(scaleComponent.displayObject);
+    }
+}
diff --git a/src/time-graph-chart.ts b/src/time-graph-chart.ts
@@ -0,0 +1,59 @@
+import { TimeGraphContainer, TimeGraphContainerOptions } from "./time-graph-container";
+import { TimeGraphRowElement } from "./time-graph-row-element";
+import { TimeGraphRow } from "./time-graph-row";
+import { TimeGraphRowModel, TimeGraphRowElementModel, TimeGraphRange } from "./time-graph-model";
+import { TimeGraphStateController } from "./time-graph-state-controller";
+
+export class TimeGraphChart extends TimeGraphContainer {
+
+    protected rows: TimeGraphRowModel[];
+
+    constructor(canvasOpts: TimeGraphContainerOptions, protected range: TimeGraphRange, controller: TimeGraphStateController) {
+        super({
+            id: canvasOpts.id,
+            height: canvasOpts.height,
+            width: canvasOpts.width,
+            backgroundColor: 0xFFFFFF
+        }, controller);
+        this.rows = [];
+    }
+
+    addRow(row: TimeGraphRowModel) {
+        const height = 20;
+        const rowId = 'row_' + this._stage.children.length;
+        const rowComponent = new TimeGraphRow(rowId, {
+            position: {
+                x: 0, // TODO must be calculated by zoom and pan
+                y: (height * this.rows.length) + height / 2
+            },
+            width: this.range.end
+        });
+        this.addChild(rowComponent);
+        this.rows.push(row);
+
+        row.states.forEach((rowElement: TimeGraphRowElementModel, idx: number) => {
+            const newRowElement: TimeGraphRowElementModel = {
+                label: rowElement.label,
+                range: {
+                    start: (rowElement.range.start * this._controller.zoomFactor) + this._controller.positionOffset.x,
+                    end: (rowElement.range.end * this._controller.zoomFactor) + this._controller.positionOffset.x
+                }
+            }
+            const el = new TimeGraphRowElement(rowId + '_el_' + idx, newRowElement, rowComponent);
+            this.addChild(el);
+        });
+    }
+
+    addRows(rows: TimeGraphRowModel[]) {
+        this.rows = [];
+        rows.forEach(row => {
+            this.addRow(row);
+        })
+    }
+
+    update() {
+        this.stage.removeChildren();
+        this.addRows(this.rows);
+    }
+
+}