Divided views into independent layers.

eclipse-cdt-cloud · Nov 27, 2018 · 62f330d · 62f330d
1 parent 92b3ef7
commit 62f330d
Show file tree

Hide file tree

Showing 16 changed files with 194 additions and 118 deletions.
diff --git a/src/time-graph-axis-cursor.ts → src/components/time-graph-axis-cursor.ts b/src/time-graph-axis-cursor.ts → src/components/time-graph-axis-cursor.ts
diff --git a/src/time-graph-axis-scale.ts → src/components/time-graph-axis-scale.ts b/src/time-graph-axis-scale.ts → src/components/time-graph-axis-scale.ts
@@ -1,7 +1,7 @@
 import { TimeGraphComponent, TimeGraphRect, TimeGraphInteractionHandler } from "./time-graph-component";
-import { TimeGraphUnitController } from "./time-graph-unit-controller";
-import { TimeGraphRange } from "./time-graph-model";
-import { TimeGraphStateController } from "./time-graph-state-controller";
+import { TimeGraphUnitController } from "../time-graph-unit-controller";
+import { TimeGraphRange } from "../time-graph-model";
+import { TimeGraphStateController } from "../time-graph-state-controller";
 
 export class TimeGraphAxisScale extends TimeGraphComponent {
 

diff --git a/src/time-graph-component.ts → src/components/time-graph-component.ts b/src/time-graph-component.ts → src/components/time-graph-component.ts
@@ -59,7 +59,7 @@ export abstract class TimeGraphComponent {
 
     protected rect(opts: TimeGraphStyledRect) {
         const { position, width, height, color, opacity } = opts;
-        this.displayObject.beginFill((color || 0x000000), (opacity || 1));
+        this.displayObject.beginFill((color || 0x000000), (opacity !== undefined ? opacity : 1));
         this.displayObject.drawRect(position.x, position.y, width, height);
         this.displayObject.endFill();
     }

diff --git a/src/time-graph-cursor.ts → src/components/time-graph-cursor.ts b/src/time-graph-cursor.ts → src/components/time-graph-cursor.ts
@@ -7,14 +7,16 @@ export interface TimeGraphCursorOptions {
 }
 
 export class TimeGraphCursor extends TimeGraphComponent{
-    constructor(protected opts: TimeGraphCursorOptions){
-        super('cursor')
+    constructor(opts: TimeGraphCursorOptions){
+        super('cursor');
+        this.options = opts;
     }
     render(): void {
+        const {color, height, position} = this.options as TimeGraphCursorOptions;
         this.vline({
-            color:this.opts.color,
-            height: this.opts.height,
-            position: this.opts.position
+            color,
+            height,
+            position
         })
     }
 }
diff --git a/src/time-graph-rectangle.ts → src/components/time-graph-rectangle.ts b/src/time-graph-rectangle.ts → src/components/time-graph-rectangle.ts
diff --git a/src/time-graph-row-element.ts → src/components/time-graph-row-element.ts b/src/time-graph-row-element.ts → src/components/time-graph-row-element.ts
@@ -1,6 +1,6 @@
 import { TimeGraphComponent, TimeGraphStyledRect } from "./time-graph-component";
 import { TimeGraphRow } from "./time-graph-row";
-import { TimeGraphRowElementModel } from "./time-graph-model";
+import { TimeGraphRowElementModel } from "../time-graph-model";
 
 export class TimeGraphRowElement extends TimeGraphComponent {
 

diff --git a/src/time-graph-row.ts → src/components/time-graph-row.ts b/src/time-graph-row.ts → src/components/time-graph-row.ts
diff --git a/src/index.ts b/src/index.ts
@@ -1,8 +1,11 @@
 import { TimeGraphModel } from "./time-graph-model";
-import { TimeGraphAxis } from "./time-graph-axis";
-import { TimeGraphChart } from "./time-graph-chart";
+import { TimeGraphAxis } from "./layer/time-graph-axis";
+import { TimeGraphChart } from "./layer/time-graph-chart";
 import { TimeGraphUnitController } from "./time-graph-unit-controller";
-import { TimeGraphNavigator } from "./time-graph-navigator";
+import { TimeGraphNavigator } from "./layer/time-graph-navigator";
+import { TimeGraphContainer } from "./time-graph-container";
+import { TimeGraphChartCursors } from "./layer/time-graph-chart-cursors";
+import { TimeGraphAxisCursors } from "./layer/time-graph-axis-cursors";
 
 const timeGraph: TimeGraphModel = {
     id: 'test1',
@@ -248,41 +251,58 @@ if (!container) {
 }
 container.innerHTML = '';
 
-const axisContainer = document.createElement('div');
-axisContainer.id = 'main_axis';
-container.appendChild(axisContainer);
 
-const chartContainer = document.createElement('div');
-chartContainer.id = 'main_chart';
-container.appendChild(chartContainer);
 
-const controller = new TimeGraphUnitController(timeGraph.totalRange, {start: 10000, end: 40000});
+const axisHTMLContainer = document.createElement('div');
+axisHTMLContainer.id = 'main_axis';
+container.appendChild(axisHTMLContainer);
 
-const timeAxis = new TimeGraphAxis({
-    id: 'timeGraphAxis',
+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
-}, controller);
-axisContainer.appendChild(timeAxis.canvas);
+    width: 500,
+    id: timeGraph.id + '_axis',
+    backgroundColor: 0x66aa33
+}, unitController);
+axisHTMLContainer.appendChild(timeGraphAxisContainer.canvas);
+
+const timeAxisLayer = new TimeGraphAxis('timeGraphAxis');
+timeGraphAxisContainer.addLayer(timeAxisLayer);
 
-const timeGraphChart = new TimeGraphChart({
+const timeAxisCursors = new TimeGraphAxisCursors('timeGraphAxisCursors');
+timeGraphAxisContainer.addLayer(timeAxisCursors);
+
+const timeGraphChartContainer = new TimeGraphContainer({
     id: timeGraph.id + '_chart',
     height: 300,
     width: 500,
     backgroundColor: 0xFFFFFF
-}, controller);
-timeGraphChart.addRows(timeGraph.rows);
-chartContainer.appendChild(timeGraphChart.canvas);
+}, unitController);
+chartHTMLContainer.appendChild(timeGraphChartContainer.canvas);
+
+const timeGraphChartLayer = new TimeGraphChart('timeGraphChart');
+timeGraphChartContainer.addLayer(timeGraphChartLayer);
+timeGraphChartLayer.addRows(timeGraph.rows);
+
+const timeGraphChartCursors = new TimeGraphChartCursors('chart-cursors');
+timeGraphChartContainer.addLayer(timeGraphChartCursors);
 
 const naviEl = document.createElement('div');
 naviEl.id = "navi";
 document.body.appendChild(naviEl);
-const navi = new TimeGraphNavigator({
-    width:1200,
+const naviContainer = new TimeGraphContainer({
+    width:700,
     height:20,
     id:'navi'
-}, controller);
-naviEl.appendChild(navi.canvas);
+}, unitController);
+naviEl.appendChild(naviContainer.canvas);
+const navi = new TimeGraphNavigator('timeGraphNavigator');
+naviContainer.addLayer(navi);
 
 export type TestFieldId = 'test0' | 'test1' | 'test2' | 'test3' | 'test4' | 'test5' | 'test6' | 'test7' | 'test8' | 'test9';
 export function tgTest(id: TestFieldId, val: string) {

diff --git a/src/time-graph-axis-cursor-container.ts → src/layer/time-graph-axis-cursors.ts b/src/time-graph-axis-cursor-container.ts → src/layer/time-graph-axis-cursors.ts
@@ -1,10 +1,15 @@
-import { TimeGraphContainer } from "./time-graph-container";
-import { TimeGraphAxisCursor } from "./time-graph-axis-cursor";
+import { TimeGraphAxisCursor } from "../components/time-graph-axis-cursor";
+import { TimeGraphLayer } from "./time-graph-layer";
 
-export class TimeGraphAxisCursorContainer extends TimeGraphContainer {
+export class TimeGraphAxisCursors extends TimeGraphLayer {
     protected firstCursor: TimeGraphAxisCursor;
     protected secondCursor: TimeGraphAxisCursor;
 
+    init() {
+        this.unitController.onSelectionRangeChange(() => this.update());
+        this.unitController.onViewRangeChanged(() => this.update());
+    }
+
     update(): void {
         if (this.unitController.selectionRange) {
             const firstCursorPosition = (this.unitController.selectionRange.start - this.unitController.viewRange.start) * this.stateController.zoomFactor;
@@ -14,7 +19,7 @@ export class TimeGraphAxisCursorContainer extends TimeGraphContainer {
                 color,
                 position: {
                     x: firstCursorPosition,
-                    y: this._canvas.height
+                    y: this.canvas.height
                 }
             };
             if (!this.firstCursor) {
@@ -28,7 +33,7 @@ export class TimeGraphAxisCursorContainer extends TimeGraphContainer {
                     color,
                     position: {
                         x: secondCursorPosition,
-                        y: this._canvas.height
+                        y: this.canvas.height
                     }
                 }
                 if (!this.secondCursor) {

diff --git a/src/time-graph-axis.ts → src/layer/time-graph-axis.ts b/src/time-graph-axis.ts → src/layer/time-graph-axis.ts
@@ -1,12 +1,12 @@
-import { TimeGraphAxisScale } from "./time-graph-axis-scale";
-import { TimeGraphAxisCursorContainer } from "./time-graph-axis-cursor-container";
+import { TimeGraphAxisScale } from "../components/time-graph-axis-scale";
+import { TimeGraphLayer } from "./time-graph-layer";
 
-export class TimeGraphAxis extends TimeGraphAxisCursorContainer {
+export class TimeGraphAxis extends TimeGraphLayer {
 
     protected scaleComponent: TimeGraphAxisScale;
 
     protected init() {
-        this._canvas.addEventListener('mousewheel', (ev: WheelEvent) => {
+        this.canvas.addEventListener('mousewheel', (ev: WheelEvent) => {
             const shiftStep = ev.deltaY * 10;
             const oldViewRange = this.unitController.viewRange;
             let start = oldViewRange.start + shiftStep;
@@ -21,9 +21,9 @@ export class TimeGraphAxis extends TimeGraphAxisCursorContainer {
             this.unitController.viewRange = { start, end }
             return false;
         });
-        this.scaleComponent = new TimeGraphAxisScale(this.config.id + '_scale', {
+        this.scaleComponent = new TimeGraphAxisScale(this.id + '_scale', {
             height: 30,
-            width: this._canvas.width,
+            width: this.canvas.width,
             position: {
                 x: 0,
                 y: 0
@@ -39,12 +39,11 @@ export class TimeGraphAxis extends TimeGraphAxisCursorContainer {
     update() {
         this.scaleComponent.update({
             height: 30,
-            width: this._canvas.width,
+            width: this.canvas.width,
             position: {
                 x: 0,
                 y: 0
             }
         });
-        super.update();
     }
 }
diff --git a/src/time-graph-cursor-container.ts → src/layer/time-graph-chart-cursors.ts b/src/time-graph-cursor-container.ts → src/layer/time-graph-chart-cursors.ts
@@ -1,21 +1,27 @@
-import { TimeGraphContainer } from "./time-graph-container";
-import { TimeGraphCursor } from "./time-graph-cursor";
-import { TimeGraphRectangle } from "./time-graph-rectangle";
+import { TimeGraphCursor } from "../components/time-graph-cursor";
+import { TimeGraphRectangle } from "../components/time-graph-rectangle";
+import { TimeGraphLayer } from "./time-graph-layer";
 
-export class TimeGraphCursorContainer extends TimeGraphContainer {
+export class TimeGraphChartCursors extends TimeGraphLayer {
     protected mouseIsDown: boolean;
     protected shiftKeyDown: boolean;
+    protected firstCursor: TimeGraphCursor;
+    protected secondCursor: TimeGraphCursor;
+    protected selectionRange: TimeGraphRectangle;
+
     protected init() {
+        this.addBackground();
+
         this.mouseIsDown = false;
         this.shiftKeyDown = false
-        this._stage.interactive = true;
+        this.stage.interactive = true;
         document.addEventListener('keydown', (event: KeyboardEvent) => {
             this.shiftKeyDown = event.shiftKey;
         });
         document.addEventListener('keyup', (event: KeyboardEvent) => {
             this.shiftKeyDown = event.shiftKey;
         });
-        this._stage.on('mousedown', (event: PIXI.interaction.InteractionEvent) => {
+        this.stage.on('mousedown', (event: PIXI.interaction.InteractionEvent) => {
             this.mouseIsDown = true;
             const mouseX = event.data.global.x;
             const xpos = this.unitController.viewRange.start + (mouseX / this.stateController.zoomFactor);
@@ -32,7 +38,7 @@ export class TimeGraphCursorContainer extends TimeGraphContainer {
                 }
             }
         });
-        this._stage.on('mousemove', (event: PIXI.interaction.InteractionEvent) => {
+        this.stage.on('mousemove', (event: PIXI.interaction.InteractionEvent) => {
             if (this.mouseIsDown && this.unitController.selectionRange) {
                 const mouseX = event.data.global.x;
                 const xStartPos = this.unitController.selectionRange.start;
@@ -43,49 +49,64 @@ export class TimeGraphCursorContainer extends TimeGraphContainer {
                 }
             }
         });
-        this._stage.on('mouseup', (event: PIXI.interaction.InteractionEvent) => {
+        this.stage.on('mouseup', (event: PIXI.interaction.InteractionEvent) => {
             this.mouseIsDown = false;
         });
-        this._stage.on('mouseupoutside', (event: PIXI.interaction.InteractionEvent) => {
+        this.stage.on('mouseupoutside', (event: PIXI.interaction.InteractionEvent) => {
             this.mouseIsDown = false;
         });
-        this.unitController.onSelectionRangeChange(() => {
-            this.update();
-        })
+        this.unitController.onSelectionRangeChange(() => this.update());
+        this.unitController.onViewRangeChanged(() => this.update());
+    }
+
+    // this background is needed because an empty stage, or a point at that stage which is not actually an displayObject, wont react on mouse events.
+    protected addBackground(){
+        const background = new TimeGraphRectangle({
+            position: {x: 0, y:0},
+            height: this.canvas.height,
+            width: this.canvas.width,
+            opacity: 0
+        });
+        this.addChild(background);
     }
 
     update() {
+        this.removeChildren();
+        this.addBackground();
         if (this.unitController.selectionRange) {
             const firstCursorPosition = (this.unitController.selectionRange.start - this.unitController.viewRange.start) * this.stateController.zoomFactor;
             const secondCursorPosition = (this.unitController.selectionRange.end - this.unitController.viewRange.start) * this.stateController.zoomFactor;
             const color = 0x0000ff;
-            const firstCursor = new TimeGraphCursor({
+            const firstCursorOptions = {
                 color,
                 height: this.canvas.height,
                 position: {
                     x: firstCursorPosition,
                     y: 0
                 }
-            });
-            this.addChild(firstCursor);
+            };
+            this.firstCursor = new TimeGraphCursor(firstCursorOptions);
+            this.addChild(this.firstCursor);
             if (secondCursorPosition !== firstCursorPosition) {
-                const secondCursor = new TimeGraphCursor({
+                const secondCursorOptions = {
                     color,
                     height: this.canvas.height,
                     position: {
                         x: secondCursorPosition,
                         y: 0
                     }
-                });
-                this.addChild(secondCursor);
+                };
+                this.secondCursor = new TimeGraphCursor(secondCursorOptions);
+                this.addChild(this.secondCursor);
+
                 const selectionRange = new TimeGraphRectangle({
                     color,
                     opacity: 0.2,
                     position: {
                         x: firstCursorPosition,
                         y: 0
                     },
-                    height: this._canvas.height,
+                    height: this.canvas.height,
                     width: secondCursorPosition - firstCursorPosition
                 });
                 this.addChild(selectionRange);