cursors added

src/index.ts

@@ -256,7 +256,7 @@ const chartContainer = document.createElement('div');
 chartContainer.id = 'main_chart';
 container.appendChild(chartContainer);
 
-const controller = new TimeGraphUnitController(timeGraph.totalRange, {start: 70000, end: 80000});
+const controller = new TimeGraphUnitController(timeGraph.totalRange, {start: 10000, end: 40000});
 
 const timeAxis = new TimeGraphAxis({
     id: 'timeGraphAxis',
@@ -268,7 +268,8 @@ axisContainer.appendChild(timeAxis.canvas);
 const timeGraphChart = new TimeGraphChart({
     id: timeGraph.id + '_chart',
     height: 300,
-    width: 500
+    width: 500,
+    backgroundColor: 0xFFFFFF
 }, controller);
 timeGraphChart.addRows(timeGraph.rows);
 chartContainer.appendChild(timeGraphChart.canvas);

src/time-graph-axis-cursor-container.ts

@@ -0,0 +1,45 @@
+import { TimeGraphContainer } from "./time-graph-container";
+import { TimeGraphAxisCursor } from "./time-graph-axis-cursor";
+
+export class TimeGraphAxisCursorContainer extends TimeGraphContainer {
+    protected firstCursor: TimeGraphAxisCursor;
+    protected secondCursor: TimeGraphAxisCursor;
+
+    update(): void {
+        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 firstOpts = {
+                color,
+                position: {
+                    x: firstCursorPosition,
+                    y: this._canvas.height
+                }
+            };
+            if (!this.firstCursor) {
+                this.firstCursor = new TimeGraphAxisCursor(firstOpts);
+                this.addChild(this.firstCursor);
+            } else {
+                this.firstCursor.update(firstOpts);
+            }
+            if (secondCursorPosition !== firstCursorPosition) {
+                const secondOpts = {
+                    color,
+                    position: {
+                        x: secondCursorPosition,
+                        y: this._canvas.height
+                    }
+                }
+                if (!this.secondCursor) {
+                    this.secondCursor = new TimeGraphAxisCursor(secondOpts);
+                    this.addChild(this.secondCursor);
+                } else {
+                    this.secondCursor.update(secondOpts);
+                }
+            } else if (this.secondCursor) {
+                this.secondCursor.clear();
+            }
+        }
+    }
+}

src/time-graph-axis-cursor.ts

@@ -0,0 +1,24 @@
+import { TimeGraphComponent, TimeGraphElementPosition, TimeGraphComponentOptions } from "./time-graph-component";
+
+export interface TimeGraphAxisCursorOptions extends TimeGraphComponentOptions {
+    position: TimeGraphElementPosition
+    color: number
+}
+
+export class TimeGraphAxisCursor extends TimeGraphComponent {
+
+    constructor(protected options: TimeGraphAxisCursorOptions) {
+        super('cursor');
+    }
+
+    render(): void {
+        const { position, color } = this.options;
+        this._displayObject.beginFill(color);
+        this._displayObject.moveTo(position.x, position.y);
+        this._displayObject.lineTo(position.x - 5, position.y - 5);
+        this._displayObject.lineTo(position.x + 5, position.y - 5);
+        this._displayObject.lineTo(position.x, position.y);
+        this._displayObject.endFill();
+    }
+
+}

src/time-graph-axis-scale.ts

@@ -32,13 +32,6 @@ export class TimeGraphAxisScale extends TimeGraphComponent {
         }
         this.addEvent('mouseup', moveEnd, this._displayObject);
         this.addEvent('mouseupoutside', moveEnd, this._displayObject);
-
-        unitController.onViewRangeChanged(() => this.update());
-    }
-
-    update() {
-        this._displayObject.clear();
-        this.render();
     }
 
     render() {
@@ -53,7 +46,7 @@ export class TimeGraphAxisScale extends TimeGraphComponent {
         for (let i = 0; i < steps; i++) {
             const height = i % 10 === 0 ? -10 : -5;
             const xpos = (stepLength * i - this.unitController.viewRange.start) * this.stateController.zoomFactor;
-            if (xpos > 0 && xpos < this.stateController.canvasWidth) {
+            if (xpos >= 0 && xpos < this.stateController.canvasWidth) {
                 const position = {
                     x: xpos,
                     y: this.options.height
@@ -65,7 +58,6 @@ export class TimeGraphAxisScale extends TimeGraphComponent {
                 });
             }
         }
-
     }
 
     zoom(zoomStep: number) {

src/time-graph-axis.ts

@@ -1,20 +1,11 @@
 import { TimeGraphAxisScale } from "./time-graph-axis-scale";
-import { TimeGraphContainer, TimeGraphContainerOptions } from "./time-graph-container";
-import { TimeGraphUnitController } from "./time-graph-unit-controller";
+import { TimeGraphAxisCursorContainer } from "./time-graph-axis-cursor-container";
 
-export class TimeGraphAxis extends TimeGraphContainer {
+export class TimeGraphAxis extends TimeGraphAxisCursorContainer {
 
     protected scaleComponent: TimeGraphAxisScale;
 
-    constructor(protected canvasOpts: TimeGraphContainerOptions, protected unitController: TimeGraphUnitController) {
-        super({
-            id: canvasOpts.id,
-            height: canvasOpts.height,
-            width: canvasOpts.width,
-            backgroundColor: 0xAA30f0
-        }, unitController);
-
-        this.init();
+    protected init() {
         this._canvas.addEventListener('mousewheel', (ev: WheelEvent) => {
             const shiftStep = ev.deltaY * 10;
             const oldViewRange = this.unitController.viewRange;
@@ -30,23 +21,30 @@ export class TimeGraphAxis extends TimeGraphContainer {
             this.unitController.viewRange = { start, end }
             return false;
         });
-    }
-
-    init() {
-        this.scaleComponent = new TimeGraphAxisScale(this.canvasOpts.id + '_scale', {
+        this.scaleComponent = new TimeGraphAxisScale(this.config.id + '_scale', {
             height: 30,
-            width: this.unitController.viewRangeLength * this.stateController.zoomFactor,
+            width: this._canvas.width,
             position: {
-                x: this.stateController.positionOffset.x,
+                x: 0,
                 y: 0
             }
         }, this.unitController, this.stateController);
 
         this.addChild(this.scaleComponent);
+
+        this.unitController.onSelectionRangeChange(() => this.update());
+        this.unitController.onViewRangeChanged(() => this.update());
     }
 
     update() {
-        this.scaleComponent.clear();
-        this.scaleComponent.render();
+        this.scaleComponent.update({
+            height: 30,
+            width: this._canvas.width,
+            position: {
+                x: 0,
+                y: 0
+            }
+        });
+        super.update();
     }
 }

src/time-graph-chart.ts

@@ -1,22 +1,15 @@
-import { TimeGraphContainer, TimeGraphContainerOptions } from "./time-graph-container";
 import { TimeGraphRowElement } from "./time-graph-row-element";
 import { TimeGraphRow } from "./time-graph-row";
 import { TimeGraphRowModel, TimeGraphRowElementModel } from "./time-graph-model";
-import { TimeGraphUnitController } from "./time-graph-unit-controller";
+import { TimeGraphCursorContainer } from "./time-graph-cursor-container";
+import { TimeGraphRectangle } from "./time-graph-rectangle";
 
-export class TimeGraphChart extends TimeGraphContainer {
+export class TimeGraphChart extends TimeGraphCursorContainer {
 
     protected rows: TimeGraphRowModel[];
 
-    constructor(canvasOpts: TimeGraphContainerOptions, unitController: TimeGraphUnitController) {
-        super({
-            id: canvasOpts.id,
-            height: canvasOpts.height,
-            width: canvasOpts.width,
-            backgroundColor: 0xFFFFFF
-        }, unitController);
-        this.rows = [];
-
+    protected init(){
+        super.init();
         this.unitController.onViewRangeChanged(() => {
             this.update();
         });
@@ -39,20 +32,31 @@ export class TimeGraphChart extends TimeGraphContainer {
 
         row.states.forEach((rowElement: TimeGraphRowElementModel, idx: number) => {
             const relativeElementStartPosition = rowElement.range.start - this.unitController.viewRange.start;
-            const relativeElementEndPosition = rowElement.range.end - this.unitController.viewRange.start
-            const newRowElement: TimeGraphRowElementModel = {
-                label: rowElement.label,
-                range: {
-                    start: (relativeElementStartPosition * this.stateController.zoomFactor) + this.stateController.positionOffset.x,
-                    end: (relativeElementEndPosition * this.stateController.zoomFactor) + this.stateController.positionOffset.x
+            const relativeElementEndPosition = rowElement.range.end - this.unitController.viewRange.start;
+            const start = (relativeElementStartPosition * this.stateController.zoomFactor) + this.stateController.positionOffset.x;
+            const end = (relativeElementEndPosition * this.stateController.zoomFactor) + this.stateController.positionOffset.x;
+            if (start < this._canvas.width && end > 0) {
+                const newRowElement: TimeGraphRowElementModel = {
+                    label: rowElement.label,
+                    range: {
+                        start,
+                        end
+                    }
                 }
+                const el = new TimeGraphRowElement(rowId + '_el_' + idx, newRowElement, rowComponent);
+                this.addChild(el);
             }
-            const el = new TimeGraphRowElement(rowId + '_el_' + idx, newRowElement, rowComponent);
-            this.addChild(el);
         });
     }
 
     addRows(rows: TimeGraphRowModel[]) {
+        const background = new TimeGraphRectangle({
+            position: {x: 0, y:0},
+            height: this._canvas.height,
+            width: this.canvas.width,
+            color: 0xffffff
+        });
+        this.addChild(background);
         this.rows = [];
         rows.forEach(row => {
             this.addRow(row);
@@ -62,6 +66,7 @@ export class TimeGraphChart extends TimeGraphContainer {
     update() {
         this.stage.removeChildren();
         this.addRows(this.rows);
+        super.update();
     }
 
 }

src/time-graph-component.ts

@@ -1,6 +1,8 @@
 export type TimeGraphInteractionType = 'mouseover' | 'mouseout' | 'mousemove' | 'mousedown' | 'mouseup' | 'mouseupoutside' | 'click';
 export type TimeGraphInteractionHandler = (event: PIXI.interaction.InteractionEvent) => void;
 
+export type TimeGraphComponentOptions = {}
+
 export interface TimeGraphElementStyle {
     color?: number
     opacity?: number
@@ -27,6 +29,7 @@ export type TimeGraphVerticalLine = TimeGraphVerticalElement & TimeGraphLineStyl
 
 export abstract class TimeGraphComponent {
     protected _displayObject: PIXI.Graphics;
+    protected options: TimeGraphComponentOptions;
 
     constructor(protected _id: string) {
         this._displayObject = new PIXI.Graphics();
@@ -44,11 +47,19 @@ export abstract class TimeGraphComponent {
         this._displayObject.clear();
     }
 
+    update(opts?: TimeGraphComponentOptions) {
+        if (opts) {
+            this.options = opts;
+        }
+        this.clear();
+        this.render();
+    }
+
     abstract render(): void;
 
     protected rect(opts: TimeGraphStyledRect) {
-        const { position, width, height, color } = opts;
-        this.displayObject.beginFill((color || 0x000000));
+        const { position, width, height, color, opacity } = opts;
+        this.displayObject.beginFill((color || 0x000000), (opacity || 1));
         this.displayObject.drawRect(position.x, position.y, width, height);
         this.displayObject.endFill();
     }

src/time-graph-container.ts

@@ -8,6 +8,7 @@ export interface TimeGraphContainerOptions {
     width: number
     height: number
     backgroundColor?: number
+    transparent?: boolean
 }
 
 export abstract class TimeGraphContainer {
@@ -17,7 +18,7 @@ export abstract class TimeGraphContainer {
 
     protected stateController: TimeGraphStateController;
 
-    constructor(config: TimeGraphContainerOptions, protected unitController: TimeGraphUnitController) {
+    constructor(protected config: TimeGraphContainerOptions, protected unitController: TimeGraphUnitController) {
         const canvas: HTMLCanvasElement = document.createElement('canvas');
         canvas.width = config.width;
         canvas.height = config.height;
@@ -27,16 +28,21 @@ export abstract class TimeGraphContainer {
             width: config.width,
             height: config.height,
             view: canvas,
-            backgroundColor: config.backgroundColor || 0x000000
+            backgroundColor: config.backgroundColor,
+            transparent: config.transparent
         });
         application.stage.height = config.height;
 
         this._stage = application.stage;
         this._canvas = application.view;
 
         this.stateController = new TimeGraphStateController(canvas, unitController);
+
+        this.init();
     }
 
+    protected init(){}
+
     get canvas(): HTMLCanvasElement {
         return this._canvas;
     }