minor changes

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

Hide file tree

Showing 6 changed files with 92 additions and 47 deletions.
diff --git a/src/time-graph-axis-scale.ts b/src/time-graph-axis-scale.ts
@@ -1,9 +1,16 @@
 import { TimeGraphComponent, TimeGraphRect } from "./time-graph-component";
+import { TimeGraphInteraction } from "./time-graph-interaction";
 
 export class TimeGraphAxisScale extends TimeGraphComponent {
 
-    constructor(id: string, protected options: TimeGraphRect) {
+    constructor(id: string, protected options: TimeGraphRect, interaction: TimeGraphInteraction) {
         super(id);
+
+        const navigationApi = interaction.dnDZoomAndPan;
+        interaction.addEvent('mousedown', navigationApi.start, this._displayObject);
+        interaction.addEvent('mousemove', navigationApi.move, this._displayObject);
+        interaction.addEvent('mouseup', navigationApi.end, this._displayObject);
+        interaction.addEvent('mouseupoutside', navigationApi.end, this._displayObject);
     }
 
     render() {
@@ -13,7 +20,6 @@ export class TimeGraphAxisScale extends TimeGraphComponent {
             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
@@ -5,6 +5,8 @@ import { TimeGraphStateController } from "./time-graph-state-controller";
 
 export class TimeGraphAxis extends TimeGraphContainer {
 
+    protected scaleComponent: TimeGraphAxisScale;
+
     constructor(protected canvasOpts: TimeGraphContainerOptions, protected range: TimeGraphRange, protected controller: TimeGraphStateController) {
         super({
             id: canvasOpts.id,
@@ -13,22 +15,25 @@ export class TimeGraphAxis extends TimeGraphContainer {
             backgroundColor: 0xAA30f0
         }, controller);
 
-        this.update();
-        this.controller.zoomAndPanController.addMousewheelZoomAndPan(this.canvas);
+        this.init();
+        this.controller.timeGraphInteraction.addMousewheelZoomAndPan(this.canvas);
     }
 
-    update() {
-        this.stage.removeChildren();
-        const scaleComponent = new TimeGraphAxisScale(this.canvasOpts.id + '_scale', {
+    init() {
+        this.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._controller.timeGraphInteraction);
 
-        this.addChild(scaleComponent);
-        this.controller.zoomAndPanController.addDnDZoomAndPan(scaleComponent.displayObject);
+        this.addChild(this.scaleComponent);
+    }
+
+    update() {
+        this.scaleComponent.clear();
+        this.scaleComponent.render();
     }
 }
diff --git a/src/time-graph-chart.ts b/src/time-graph-chart.ts
@@ -39,7 +39,7 @@ export class TimeGraphChart extends TimeGraphContainer {
                     end: (rowElement.range.end * this._controller.zoomFactor) + this._controller.positionOffset.x
                 }
             }
-            const el = new TimeGraphRowElement(rowId + '_el_' + idx, newRowElement, rowComponent);
+            const el = new TimeGraphRowElement(rowId + '_el_' + idx, newRowElement, rowComponent, this._controller.timeGraphInteraction);
             this.addChild(el);
         });
     }

diff --git a/src/time-graph-interaction.ts b/src/time-graph-interaction.ts
@@ -3,14 +3,20 @@ import { TimeGraphStateController } from "./time-graph-state-controller";
 export type TimeGraphInteractionType = 'mouseover' | 'mouseout' | 'mousemove' | 'mousedown' | 'mouseup' | 'mouseupoutside' | 'click';
 export type TimeGraphInteractionHandler = (event: PIXI.interaction.InteractionEvent) => void;
 
+export interface DragAndDropNavigationHandler {
+    start: TimeGraphInteractionHandler
+    move: TimeGraphInteractionHandler
+    end: TimeGraphInteractionHandler
+}
+
 export class TimeGraphInteraction {
     protected mouseStartY: number;
     protected mouseStartX: number;
     protected graphWidthStart: number;
 
     protected mouseIsDown: boolean = false;
 
-    constructor(protected controller: TimeGraphStateController) {}
+    constructor(protected controller: TimeGraphStateController) { }
 
     addMousewheelZoomAndPan(canvas: HTMLCanvasElement) {
         canvas.addEventListener('mousewheel', (ev: WheelEvent) => {
@@ -23,31 +29,28 @@ export class TimeGraphInteraction {
         });
     }
 
-    addDnDZoomAndPan(displayObject: PIXI.DisplayObject) {
-        this.addEvent('mousedown', event => {
-            this.mouseStartY = event.data.global.y;
-            this.mouseStartX = event.data.global.x;
-            this.graphWidthStart = this.controller.graphWidth;
-            this.mouseIsDown = true;
-        }, displayObject);
-
-        this.addEvent('mousemove', event => {
-            if (this.mouseIsDown) {
-
-                const deltaY = event.data.global.y - this.mouseStartY;
-                const zoomMulti = (deltaY / 100);
-                this.zoom(zoomMulti);
-
-                const deltaMouseX = event.data.global.x - this.mouseStartX;
-                this.setXOffset(deltaMouseX);
+    get dnDZoomAndPan(): DragAndDropNavigationHandler {
+        return {
+            start: event => {
+                this.mouseStartY = event.data.global.y;
+                this.mouseStartX = event.data.global.x;
+                this.graphWidthStart = this.controller.graphWidth;
+                this.mouseIsDown = true;
+            },
+            move: event => {
+                if (this.mouseIsDown) {
+                    const deltaY = event.data.global.y - this.mouseStartY;
+                    const zoomMulti = (deltaY / 100);
+                    this.zoom(zoomMulti);
+                    const deltaMouseX = event.data.global.x - this.mouseStartX;
+                    this.setXOffset(deltaMouseX);
+                }
+            },
+            end: event => {
+                this.mouseIsDown = false;
+                this.setZoomAndPosition();
             }
-        }, displayObject);
-        const mouseUp = (event: PIXI.interaction.InteractionEvent) => {
-            this.mouseIsDown = false;
-            this.setZoomAndPosition();
         }
-        this.addEvent('mouseup', mouseUp, displayObject);
-        this.addEvent('mouseupoutside', mouseUp, displayObject);
     }
 
     protected setZoomAndPosition() {
@@ -82,7 +85,7 @@ export class TimeGraphInteraction {
         }
     }
 
-    protected addEvent(event: TimeGraphInteractionType, handler: TimeGraphInteractionHandler, displayObject: PIXI.DisplayObject) {
+    addEvent(event: TimeGraphInteractionType, handler: TimeGraphInteractionHandler, displayObject: PIXI.DisplayObject) {
         displayObject.interactive = true;
         displayObject.on(event, (e: PIXI.interaction.InteractionEvent) => {
             if (handler) {

diff --git a/src/time-graph-row-element.ts b/src/time-graph-row-element.ts
@@ -1,26 +1,57 @@
-import { TimeGraphComponent } from "./time-graph-component";
+import { TimeGraphComponent, TimeGraphStyledRect } from "./time-graph-component";
 import { TimeGraphRow } from "./time-graph-row";
 import { TimeGraphRowElementModel } from "./time-graph-model";
+import { TimeGraphInteraction } from "./time-graph-interaction";
 
 export class TimeGraphRowElement extends TimeGraphComponent {
 
-    constructor(id: string, protected options: TimeGraphRowElementModel, protected row: TimeGraphRow) {
-        super(id);
-    }
+    protected style: TimeGraphStyledRect;
 
-    render() {
+    constructor(id: string, protected options: TimeGraphRowElementModel, protected row: TimeGraphRow, interaction: TimeGraphInteraction) {
+        super(id);
         const height = 20;
         const position = {
             x: this.options.range.start,
             y: this.row.position.y - (height / 2)
         };
         const width = this.options.range.end - this.options.range.start;
 
-        this.rect({
+        this.style = {
             color: 0xC80000,
             height,
             position,
             width
-        });
+        };
+
+        interaction.addEvent('mouseover', this.handleMouseOver, this._displayObject);
+        interaction.addEvent('mouseout', this.handleMouseOut, this._displayObject);
+        interaction.addEvent('mousedown', this.handleMouseDown, this._displayObject);
+        interaction.addEvent('mouseup', this.handleMouseUp, this._displayObject);
     }
+
+    render() {
+        this.rect(this.style);
+    }
+
+    protected changeColor(color: number) {
+        this.displayObject.clear();
+        this.style.color = color;
+        this.render();
+    }
+
+    protected handleMouseOver = ((event: PIXI.interaction.InteractionEvent) => {
+        this.changeColor(0x00C800);
+    }).bind(this);
+
+    protected handleMouseOut = ((event: PIXI.interaction.InteractionEvent) => {
+        this.changeColor(0xC80000);
+    }).bind(this);
+
+    protected handleMouseDown = ((event: PIXI.interaction.InteractionEvent) => {
+        this.changeColor(0x0000C8);
+    }).bind(this);
+
+    protected handleMouseUp = ((event: PIXI.interaction.InteractionEvent) => {
+        this.changeColor(0x00C800);
+    }).bind(this);
 }
diff --git a/src/time-graph-state-controller.ts b/src/time-graph-state-controller.ts
@@ -17,7 +17,7 @@ export class TimeGraphStateController {
     protected zoomChangedHandler: (() => void)[];
     protected positionChangedHandler: (() => void)[];
 
-    protected _zoomAndPanController: TimeGraphInteraction;
+    protected _timeGraphInteraction: TimeGraphInteraction;
 
     constructor(protected _canvasWidth: number, protected _graphWidth: number) {
         this._originalGraphWidth = _graphWidth;
@@ -29,11 +29,11 @@ export class TimeGraphStateController {
         this._oldPositionOffset = { x: 0, y: 0 };
         this.zoomChangedHandler = [];
         this.positionChangedHandler = [];
-        this._zoomAndPanController = new TimeGraphInteraction(this);
+        this._timeGraphInteraction = new TimeGraphInteraction(this);
     }
 
-    get zoomAndPanController(): TimeGraphInteraction {
-        return this._zoomAndPanController;
+    get timeGraphInteraction(): TimeGraphInteraction {
+        return this._timeGraphInteraction;
     }
 
     protected handleZoomChange() {