Prevent default context menu for scrollbars

Adds an event listener that prevents default on right-click for scrollbars.

Adds ability to remove  event handlers from TimeGraphRowCrontroller, and removes them from the vertical scrollbar when unmounted.

Signed-off-by: Will Yang <william.yang@ericsson.com>

timeline-chart/src/layer/time-graph-navigator.ts

@@ -12,6 +12,7 @@ export class TimeGraphNavigator extends TimeGraphLayer {
     protected navigatorBackground: TimeGraphNavigatorBackground;
     protected selectionRange?: TimeGraphRectangle;
     private _updateHandler: { (): void; (viewRange: TimelineChart.TimeGraphRange): void; (selectionRange: TimelineChart.TimeGraphRange): void; (viewRange: TimelineChart.TimeGraphRange): void; (selectionRange: TimelineChart.TimeGraphRange): void; };
+    private _contextMenuHandler: { (e: MouseEvent): void; (event: Event): void; };
 
     afterAddToContainer() {
         this._updateHandler = (): void => this.update();
@@ -21,6 +22,10 @@ export class TimeGraphNavigator extends TimeGraphLayer {
         this.navigatorHandle = new TimeGraphNavigatorHandle(this.unitController, this.stateController);
         this.addChild(this.navigatorHandle);
         this.unitController.onSelectionRangeChange(this._updateHandler);
+        this._contextMenuHandler = (e: MouseEvent): void => {
+            e.preventDefault();
+        }
+        this.onCanvasEvent('contextmenu', this._contextMenuHandler);
         this.update();
     }
 
@@ -57,6 +62,9 @@ export class TimeGraphNavigator extends TimeGraphLayer {
             this.unitController.removeViewRangeChangedHandler(this._updateHandler);
             this.unitController.removeSelectionRangeChangedHandler(this._updateHandler);
         }
+        if (this._contextMenuHandler) {
+            this.removeOnCanvasEvent('contextmenu', this._contextMenuHandler);
+        }
         super.destroy();
     }
 }
@@ -183,6 +191,7 @@ export class TimeGraphNavigatorBackground extends TimeGraphComponent<null> {
             };
         }, this._displayObject);
 
+        this.update()
     }
 
     protected toggleSnappedState = (bool: boolean) => {

timeline-chart/src/layer/time-graph-vertical-scrollbar.ts

@@ -9,6 +9,9 @@ export class TimeGraphVerticalScrollbar extends TimeGraphChartLayer {
     protected navigatorHandle: TimeGraphVerticalScrollbarHandle;
     protected navigatorBackground: TimeGraphVerticalScrollbarBackground;
     protected selectionRange?: TimeGraphRectangle;
+    private _contextMenuHandler: { (e: MouseEvent): void; (event: Event): void; };
+    private _verticalOffsetChangedHandler: () => void;
+    private _totalHeightChangedHandler: () => void;
 
     protected factor: number;
 
@@ -22,13 +25,21 @@ export class TimeGraphVerticalScrollbar extends TimeGraphChartLayer {
         this.navigatorBackground = new TimeGraphVerticalScrollbarBackground(this.rowController, this.stateController, this.factor);
         this.addChild(this.navigatorBackground);
         this.addChild(this.navigatorHandle);
-        this.rowController.onVerticalOffsetChangedHandler(() => this.update());
-        this.rowController.onTotalHeightChangedHandler(() => {
+        this._contextMenuHandler = (e: MouseEvent): void => {
+            e.preventDefault();
+        }
+        this.onCanvasEvent('contextmenu', this._contextMenuHandler);
+        this._verticalOffsetChangedHandler = () => {
+            this.update();
+        }
+        this._totalHeightChangedHandler = () => {
             this.updateFactor();
             this.navigatorHandle.updateFactor(this.factor);
             this.navigatorBackground.updateFactor(this.factor);
             this.update()
-        });
+        }
+        this.rowController.onVerticalOffsetChangedHandler(this._verticalOffsetChangedHandler);
+        this.rowController.onTotalHeightChangedHandler(this._totalHeightChangedHandler);
     }
 
     protected updateFactor() {
@@ -45,6 +56,17 @@ export class TimeGraphVerticalScrollbar extends TimeGraphChartLayer {
         this.navigatorBackground.clear();
         this.navigatorBackground.render();
     }
+
+    destroy() {
+        if (this.rowController) {
+            this.rowController.removeTotalHeightChangedHandler(this._totalHeightChangedHandler);
+            this.rowController.removeVerticalOffsetChangedHandler(this._verticalOffsetChangedHandler);
+        }
+        if (this._contextMenuHandler) {
+            this.removeOnCanvasEvent('contextmenu', this._contextMenuHandler);
+        };
+        super.destroy();
+    }
 }
 
 export class TimeGraphVerticalScrollbarHandle extends TimeGraphComponent<null> {

timeline-chart/src/time-graph-row-controller.ts

@@ -31,14 +31,35 @@ export class TimeGraphRowController {
         this.selectedRowChangedHandlers.push(handler);
     }
 
+    removeSelectedRowChangedHandler(handler: (row: TimelineChart.TimeGraphRowModel) => void) {
+        const index = this.selectedRowChangedHandlers.indexOf(handler);
+        if (index > -1) {
+            this.selectedRowChangedHandlers.splice(index, 1);
+        }
+    }
+
     onVerticalOffsetChangedHandler(handler: (verticalOffset: number) => void) {
         this.verticalOffsetChangedHandlers.push(handler);
     }
 
+    removeVerticalOffsetChangedHandler(handler: (verticalOffset: number) => void) {
+        const index = this.verticalOffsetChangedHandlers.indexOf(handler);
+        if (index > -1) {
+            this.verticalOffsetChangedHandlers.splice(index, 1);
+        }
+    }
+
     onTotalHeightChangedHandler(handler: (totalHeight: number) =>  void) {
         this.totalHeightChangedHandlers.push(handler);
     }
 
+    removeTotalHeightChangedHandler(handler: (totalHeight: number) =>  void) {
+        const index = this.totalHeightChangedHandlers.indexOf(handler);
+        if (index > -1) {
+            this.totalHeightChangedHandlers.splice(index, 1);
+        }
+    }
+
     get totalHeight(): number {
         return this._totalHeight;
     }