some more improvements

eclipse-cdt-cloud · Jan 2, 2019 · 78fa358 · 78fa358
1 parent d2409c3
commit 78fa358
Show file tree

Hide file tree

Showing 14 changed files with 172 additions and 149 deletions.
diff --git a/example/src/index.ts b/example/src/index.ts
@@ -1,9 +1,11 @@
 import { TimeGraphAxis } from "timeline-chart/lib/layer/time-graph-axis";
 import { TimeGraphChart } from "timeline-chart/lib/layer/time-graph-chart";
 import { TimeGraphUnitController } from "timeline-chart/lib/time-graph-unit-controller";
+import { TimeGraphRowController } from "timeline-chart/lib/time-graph-row-controller";
 import { TimeGraphNavigator } from "timeline-chart/lib/layer/time-graph-navigator";
 import { TimeGraphContainer } from "timeline-chart/lib/time-graph-container";
 import { TimeGraphChartCursors } from "timeline-chart/lib/layer/time-graph-chart-cursors";
+import { TimeGraphChartSelectionRange } from "timeline-chart/lib/layer/time-graph-chart-selection-range";
 import { TimeGraphAxisCursors } from "timeline-chart/lib/layer/time-graph-axis-cursors";
 // import { timeGraph } from "timeline-chart/lib/test-data";
 import { TimeGraphRowElementModel, TimeGraphRowModel, TimeGraphRange } from "timeline-chart/lib/time-graph-model";
@@ -34,6 +36,10 @@ const testDataProvider = new TestDataProvider(styleConfig.mainWidth);
 let timeGraph = testDataProvider.getData();
 const unitController = new TimeGraphUnitController(timeGraph.totalRange);
 
+const rowHeight = 16;
+const totalHeight = timeGraph.rows.length * rowHeight;
+const rowController = new TimeGraphRowController(rowHeight, totalHeight);
+
 const axisHTMLContainer = document.createElement('div');
 axisHTMLContainer.id = 'main_axis';
 container.appendChild(axisHTMLContainer);
@@ -68,12 +74,10 @@ const timeGraphChartContainer = new TimeGraphContainer({
 }, unitController);
 chartHTMLContainer.appendChild(timeGraphChartContainer.canvas);
 
-const rowHeight = 16;
-
 const timeGraphChartGridLayer = new TimeGraphChartGrid('timeGraphGrid', rowHeight);
 timeGraphChartContainer.addLayer(timeGraphChartGridLayer);
 
-const timeGraphChartLayer = new TimeGraphChart('timeGraphChart', {
+const timeGraphChart = new TimeGraphChart('timeGraphChart', {
     dataProvider: (range: TimeGraphRange, resolution: number) => {
         timeGraph = testDataProvider.getData(range);
         if (selectedElement) {
@@ -126,10 +130,10 @@ const timeGraphChartLayer = new TimeGraphChart('timeGraphChart', {
             lineThickness: row.data && row.data.hasStates ? 1 : 3
         }
     }
-}, rowHeight);
-timeGraphChartContainer.addLayer(timeGraphChartLayer);
+}, rowController);
+timeGraphChartContainer.addLayer(timeGraphChart);
 
-timeGraphChartLayer.registerRowElementMouseInteractions({
+timeGraphChart.registerRowElementMouseInteractions({
     click: el => {
         console.log(el.model.label);
         if (el.model.data) {
@@ -138,8 +142,8 @@ timeGraphChartLayer.registerRowElementMouseInteractions({
     }
 });
 let selectedElement: TimeGraphRowElement;
-timeGraphChartLayer.onSelectedRowElementChanged((model) => {
-    const el = timeGraphChartLayer.getElementById(model.id);
+timeGraphChart.onSelectedRowElementChanged((model) => {
+    const el = timeGraphChart.getElementById(model.id);
     if (el) {
         selectedElement = el;
     }
@@ -151,7 +155,9 @@ timeGraphChartLayer.onSelectedRowElementChanged((model) => {
 
 const timeAxisCursors = new TimeGraphAxisCursors('timeGraphAxisCursors', { color: styleConfig.cursorColor });
 timeGraphAxisContainer.addLayer(timeAxisCursors);
-const timeGraphChartCursors = new TimeGraphChartCursors('chart-cursors', timeGraphChartLayer, { color: styleConfig.cursorColor });
+const timeGraphSelectionRange = new TimeGraphChartSelectionRange('chart-selection-range', { color: styleConfig.cursorColor } );
+timeGraphChartContainer.addLayer(timeGraphSelectionRange);
+const timeGraphChartCursors = new TimeGraphChartCursors('chart-cursors', timeGraphChart, rowController, { color: styleConfig.cursorColor });
 timeGraphChartContainer.addLayer(timeGraphChartCursors);
 
 const cursorReset = document.getElementById('cursor-reset');
@@ -182,11 +188,7 @@ if (vscrollElement) {
         id: 'vscroll',
         backgroundColor: styleConfig.naviBackgroundColor
     }, unitController);
-    const vscroll = new TimeGraphVerticalScrollbar('timeGraphVerticalScrollbar', (timeGraph.rows.length * rowHeight));
+    const vscroll = new TimeGraphVerticalScrollbar('timeGraphVerticalScrollbar', rowController);
     verticalScrollContainer.addLayer(vscroll);
-    vscroll.onVerticalPositionChanged(ypos => {
-        timeGraphChartLayer.setVerticalPositionOffset(ypos);
-    });
-    timeGraphChartLayer.onVerticalPositionChanged((verticalChartPosition: number) => vscroll.setVerticalPosition(verticalChartPosition));
     vscrollElement.appendChild(verticalScrollContainer.canvas);
 }
diff --git a/example/src/test-data-provider.ts b/example/src/test-data-provider.ts
@@ -176,7 +176,6 @@ export class TestDataProvider {
                         states.push({
                             id: 'el_' + rowIndex + '_' + stateIndex,
                             label: state.label,
-                            selected: false,
                             range: { start, end },
                             data: { value: state.value, timeRange: { startTime: state.startTime, endTime: (state.startTime + state.duration) } }
                         });
@@ -191,7 +190,6 @@ export class TestDataProvider {
                     end: entry.endTime - entry.startTime
                 },
                 states,
-                selected: false,
                 data: {
                     type: entry.type,
                     hasStates

diff --git a/timeline-chart/package.json b/timeline-chart/package.json
@@ -5,11 +5,9 @@
     "build": "tsc",
     "watch": "tsc --watch"
   },
-  "devDependencies": {
-    "@types/lodash.throttle": "^4.1.4",
-    "@types/pixi.js": "^4.8.2"
-  },
   "dependencies": {
+    "@types/lodash.throttle": "^4.1.4",
+    "@types/pixi.js": "^4.8.2",
     "lodash.throttle": "^4.1.1",
     "pixi.js": "^4.8.2"
   }

diff --git a/timeline-chart/src/components/time-graph-cursor.ts b/timeline-chart/src/components/time-graph-cursor.ts
@@ -4,6 +4,7 @@ export interface TimeGraphCursorOptions {
     height: number
     position: TimeGraphElementPosition
     color: number
+    thickness?: number
 }
 
 export class TimeGraphCursor extends TimeGraphComponent{
@@ -12,8 +13,9 @@ export class TimeGraphCursor extends TimeGraphComponent{
         this._options = opts;
     }
     render(): void {
-        const {color, height, position} = this._options as TimeGraphCursorOptions;
+        const {color, height, position, thickness} = this._options as TimeGraphCursorOptions;
         this.vline({
+            thickness,
             color,
             height,
             position

diff --git a/timeline-chart/src/layer/time-graph-axis-cursors.ts b/timeline-chart/src/layer/time-graph-axis-cursors.ts
@@ -15,8 +15,8 @@ export class TimeGraphAxisCursors extends TimeGraphLayer {
     }
 
     afterAddToContainer() {
-        this.unitController.onSelectionRangeChange(() => this.update());
         this.unitController.onViewRangeChanged(() => this.update());
+        this.unitController.onSelectionRangeChange(() => this.update());
     }
 
     update(): void {

diff --git a/timeline-chart/src/layer/time-graph-chart-arrows.ts b/timeline-chart/src/layer/time-graph-chart-arrows.ts
@@ -1,10 +1,10 @@
-import { TimeGraphLayer } from "./time-graph-layer";
 import { TimeGraphArrowComponent, TimeGraphArrowHead } from "../components/time-graph-arrow";
 import { TimeGraphElementPosition } from "../components/time-graph-component";
 import { TimeGraphArrow } from "../time-graph-model";
+import { TimeGraphChartLayer } from "./time-graph-chart-layer";
 // import ArrowHead from "./arrowhead.png";
 
-export class TimeGraphChartArrows extends TimeGraphLayer {
+export class TimeGraphChartArrows extends TimeGraphChartLayer {
 
     protected rowHeight: number;
     protected arrows: TimeGraphArrow[];

diff --git a/timeline-chart/src/layer/time-graph-chart-cursors.ts b/timeline-chart/src/layer/time-graph-chart-cursors.ts
@@ -1,31 +1,24 @@
 import { TimeGraphCursor } from "../components/time-graph-cursor";
-import { TimeGraphRectangle } from "../components/time-graph-rectangle";
-import { TimeGraphLayer } from "./time-graph-layer";
-import { TimeGraphChart } from "./time-graph-chart";
 import { TimeGraphRowElementModel } from "../time-graph-model";
+import { TimeGraphChartLayer } from "./time-graph-chart-layer";
+import { TimeGraphRowController } from "../time-graph-row-controller";
+import { TimeGraphChart } from "./time-graph-chart";
 
-export class TimeGraphChartCursors extends TimeGraphLayer {
+export class TimeGraphChartCursors extends TimeGraphChartLayer {
     protected mouseIsDown: boolean;
     protected shiftKeyDown: boolean;
     protected firstCursor: TimeGraphCursor;
     protected secondCursor: TimeGraphCursor;
-    protected selectionRange: TimeGraphRectangle;
     protected color: number = 0x0000ff;
 
-    constructor(id: string, protected chartLayer: TimeGraphChart, style?: { color?: number }) {
-        super(id);
+    constructor(id: string, protected chartLayer: TimeGraphChart, protected rowController: TimeGraphRowController, style?: { color?: number }) {
+        super(id, rowController);
         if (style && style.color) {
             this.color = style.color;
         }
     }
 
-    protected updateScaleAndPosition() {
-        this.layer.position.x = -(this.unitController.viewRange.start * this.stateController.zoomFactor);
-        this.layer.scale.x = this.stateController.zoomFactor;
-    }
-
     protected afterAddToContainer() {
-        this.addBackground();
         this.mouseIsDown = false;
         this.shiftKeyDown = false
         this.stage.interactive = true;
@@ -44,7 +37,6 @@ export class TimeGraphChartCursors extends TimeGraphLayer {
             this.mouseIsDown = true;
             const mouseX = event.data.global.x;
             const xpos = this.unitController.viewRange.start + (mouseX / this.stateController.zoomFactor);
-            console.log("SET CURSOR AT", xpos);
             if (this.shiftKeyDown) {
                 const start = this.unitController.selectionRange ? this.unitController.selectionRange.start : 0;
                 this.unitController.selectionRange = {
@@ -75,12 +67,8 @@ export class TimeGraphChartCursors extends TimeGraphLayer {
         this.stage.on('mouseupoutside', (event: PIXI.interaction.InteractionEvent) => {
             this.mouseIsDown = false;
         });
-        this.unitController.onViewRangeChanged(() => {
-            this.updateScaleAndPosition();
-        });
-        this.updateScaleAndPosition();
+        this.unitController.onViewRangeChanged(() => this.update());
         this.unitController.onSelectionRangeChange(() => this.update());
-        // this.unitController.onViewRangeChanged(() => this.update());
     }
 
     protected maybeCenterCursor() {
@@ -92,7 +80,7 @@ export class TimeGraphChartCursors extends TimeGraphLayer {
     };
 
     protected navigateOrSelectLeft() {
-        const row = this.chartLayer.getSelectedRow();
+        const row = this.rowController.selectedRow;
         const states = row.states;
         const nextIndex = states.findIndex((rowElementModel: TimeGraphRowElementModel) => {
             const selStart = this.unitController.selectionRange ? (this.shiftKeyDown ? this.unitController.selectionRange.end : this.unitController.selectionRange.start) : 0;
@@ -116,7 +104,7 @@ export class TimeGraphChartCursors extends TimeGraphLayer {
     }
 
     protected navigateOrSelectRight() {
-        const row = this.chartLayer.getSelectedRow();
+        const row = this.rowController.selectedRow;
         const states = row.states;
         const nextIndex = states.findIndex((rowElementModel: TimeGraphRowElementModel) => {
             const cursorPosition = this.unitController.selectionRange ? (this.shiftKeyDown ? this.unitController.selectionRange.end : this.unitController.selectionRange.start) : 0;
@@ -134,17 +122,6 @@ export class TimeGraphChartCursors extends TimeGraphLayer {
         this.chartLayer.selectRowElement(states[nextIndex]);
     }
 
-    // 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.stateController.canvasDisplayHeight,
-            width: this.stateController.canvasDisplayWidth,
-            opacity: 0
-        });
-        this.addChild(background);
-    }
-
     centerCursor() {
         if (this.unitController.selectionRange) {
             const cursorPosition = this.unitController.selectionRange.start;
@@ -162,10 +139,9 @@ export class TimeGraphChartCursors extends TimeGraphLayer {
 
     update() {
         this.removeChildren();
-        this.addBackground();
         if (this.unitController.selectionRange) {
-            const firstCursorPosition = this.unitController.selectionRange.start;//(this.unitController.selectionRange.start - this.unitController.viewRange.start) * this.stateController.zoomFactor;
-            const secondCursorPosition = this.unitController.selectionRange.end;//(this.unitController.selectionRange.end - this.unitController.viewRange.start) * this.stateController.zoomFactor;
+            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 firstCursorOptions = {
                 color: this.color,
                 height: this.stateController.canvasDisplayHeight,
@@ -187,18 +163,6 @@ export class TimeGraphChartCursors extends TimeGraphLayer {
                 };
                 this.secondCursor = new TimeGraphCursor(secondCursorOptions);
                 this.addChild(this.secondCursor);
-
-                const selectionRange = new TimeGraphRectangle({
-                    color: this.color,
-                    opacity: 0.2,
-                    position: {
-                        x: firstCursorPosition,
-                        y: 0
-                    },
-                    height: this.stateController.canvasDisplayHeight,
-                    width: secondCursorPosition - firstCursorPosition
-                });
-                this.addChild(selectionRange);
             }
         }
     }

diff --git a/timeline-chart/src/layer/time-graph-chart-layer.ts b/timeline-chart/src/layer/time-graph-chart-layer.ts
@@ -0,0 +1,10 @@
+import { TimeGraphLayer } from "./time-graph-layer";
+import { TimeGraphRowController } from "../time-graph-row-controller";
+
+export abstract class TimeGraphChartLayer extends TimeGraphLayer {
+
+    constructor(id: string, protected rowController: TimeGraphRowController){
+        super(id);
+    }
+
+}
diff --git a/timeline-chart/src/layer/time-graph-chart-selection-range.ts b/timeline-chart/src/layer/time-graph-chart-selection-range.ts
@@ -0,0 +1,48 @@
+import { TimeGraphRectangle } from "../components/time-graph-rectangle";
+import { TimeGraphLayer } from "./time-graph-layer";
+
+export class TimeGraphChartSelectionRange extends TimeGraphLayer {
+    protected selectionRange: TimeGraphRectangle;
+    protected color: number = 0x0000ff;
+
+    constructor(id: string, style?: { color?: number }) {
+        super(id);
+        if (style && style.color) {
+            this.color = style.color;
+        }
+    }
+
+    protected updateScaleAndPosition() {
+        this.layer.position.x = -(this.unitController.viewRange.start * this.stateController.zoomFactor);
+        this.layer.scale.x = this.stateController.zoomFactor;
+    }
+
+    protected afterAddToContainer() {
+        this.unitController.onViewRangeChanged(() => {
+            this.updateScaleAndPosition();
+        });
+        this.updateScaleAndPosition();
+        this.unitController.onSelectionRangeChange(() => this.update());
+    }
+
+    update() {
+        this.removeChildren();
+        if (this.unitController.selectionRange) {
+            const firstCursorPosition = this.unitController.selectionRange.start;
+            const secondCursorPosition = this.unitController.selectionRange.end;
+            if (secondCursorPosition !== firstCursorPosition) {
+                this.selectionRange = new TimeGraphRectangle({
+                    color: this.color,
+                    opacity: 0.2,
+                    position: {
+                        x: firstCursorPosition,
+                        y: 0
+                    },
+                    height: this.stateController.canvasDisplayHeight,
+                    width: secondCursorPosition - firstCursorPosition
+                });
+                this.addChild(this.selectionRange);
+            }
+        }
+    }
+}