From 924c35d7f617582f48aebd2b9e30d1c6192502b2 Mon Sep 17 00:00:00 2001
From: muddana-satish <satish.muddana@ericsson.com>
Date: Sun, 27 Sep 2020 14:06:21 -0400
Subject: [PATCH] Changed Event listeners from document to canvas

Signed-off-by: muddana-satish <satish.muddana@ericsson.com>
---
 example/src/index.ts                          |  5 +++-
 .../src/layer/time-graph-chart-cursors.ts     | 14 +++++++----
 timeline-chart/src/layer/time-graph-chart.ts  | 24 +++++++++++--------
 3 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/example/src/index.ts b/example/src/index.ts
index d17138f..1e885cd 100644
--- a/example/src/index.ts
+++ b/example/src/index.ts
@@ -66,12 +66,15 @@ const chartHTMLContainer = document.createElement('div');
 chartHTMLContainer.id = 'main_chart';
 container.appendChild(chartHTMLContainer);
 
+const chartCanvas = document.createElement('canvas');
+chartCanvas.tabIndex = 1;
+
 const timeGraphChartContainer = new TimeGraphContainer({
     id: timeGraph.id + '_chart',
     height: styleConfig.mainHeight,
     width: styleConfig.mainWidth,
     backgroundColor: styleConfig.chartBackgroundColor
-}, unitController);
+}, unitController, chartCanvas);
 chartHTMLContainer.appendChild(timeGraphChartContainer.canvas);
 
 const timeGraphChartGridLayer = new TimeGraphChartGrid('timeGraphGrid', rowHeight);
diff --git a/timeline-chart/src/layer/time-graph-chart-cursors.ts b/timeline-chart/src/layer/time-graph-chart-cursors.ts
index 56b48d2..0cf3c0e 100644
--- a/timeline-chart/src/layer/time-graph-chart-cursors.ts
+++ b/timeline-chart/src/layer/time-graph-chart-cursors.ts
@@ -25,8 +25,10 @@ export class TimeGraphChartCursors extends TimeGraphChartLayer {
         this.mouseIsDown = false;
         this.shiftKeyDown = false
         this.stage.interactive = true;
-        document.addEventListener('keydown', (event: KeyboardEvent) => {
+
+        const keyDownHandler = (event: KeyboardEvent) => {
             this.shiftKeyDown = event.shiftKey;
+            // TODO: keyCode is deprecated. We should change these.
             if (event.keyCode === keyboardKey.ArrowLeft) {
                 this.navigateOrSelectLeft();
             } else if (event.keyCode === keyboardKey.ArrowRight) {
@@ -36,10 +38,14 @@ export class TimeGraphChartCursors extends TimeGraphChartLayer {
             } else if (event.keyCode === keyboardKey.ArrowDown) {
                 this.navigateDown();
             }
-        });
-        document.addEventListener('keyup', (event: KeyboardEvent) => {
+        };
+
+        const keyUpHandler = (event: KeyboardEvent) => {
             this.shiftKeyDown = event.shiftKey;
-        });
+        };
+
+        this.onCanvasEvent('keydown', keyDownHandler);
+        this.onCanvasEvent('keyup', keyUpHandler);
 
         this.stage.on('mousedown', (event: PIXI.InteractionEvent) => {
             this.mouseIsDown = true;
diff --git a/timeline-chart/src/layer/time-graph-chart.ts b/timeline-chart/src/layer/time-graph-chart.ts
index 266ab64..7c305fc 100644
--- a/timeline-chart/src/layer/time-graph-chart.ts
+++ b/timeline-chart/src/layer/time-graph-chart.ts
@@ -102,12 +102,12 @@ export class TimeGraphChart extends TimeGraphChartLayer {
             }
         };
 
-        document.addEventListener('mousemove', (event: MouseEvent) => {
+        const mouseMoveHandler = (event: MouseEvent) => {
             mousePositionX = event.offsetX;
             mousePositionY = event.offsetY;
-        })
+        };
 
-        document.addEventListener('keydown', (event: KeyboardEvent) => {
+        const keyDownHandler = (event: KeyboardEvent) => {
             this.shiftKeyDown = event.shiftKey;
             this.ctrlKeyDown = event.ctrlKey;
             let keyPressed = event.key;
@@ -133,12 +133,12 @@ export class TimeGraphChart extends TimeGraphChartLayer {
                 event.preventDefault();
             }
 
-        });
+        };
 
-        document.addEventListener('keyup', (event: KeyboardEvent) => {
+        const keyUpHandler = (event: KeyboardEvent) => {
             this.shiftKeyDown = event.shiftKey;
             this.ctrlKeyDown = event.ctrlKey;
-        });
+        };
 
         this.stage.addListener('mouseover', (event: MouseEvent) => {
             triggerKeyEvent = true;
@@ -148,7 +148,7 @@ export class TimeGraphChart extends TimeGraphChartLayer {
             triggerKeyEvent = false;
         });
 
-        const mw = (ev: WheelEvent) => {
+        const mouseWheelHandler = (ev: WheelEvent) => {
             if (this.ctrlKeyDown) {
                 const zoomPosition = (ev.offsetX / this.stateController.zoomFactor);
                 const deltaLength = (ev.deltaY / this.stateController.zoomFactor);
@@ -187,9 +187,13 @@ export class TimeGraphChart extends TimeGraphChartLayer {
                 this.rowController.verticalOffset = verticalOffset;
             }
             ev.preventDefault();
-        }
-        this.onCanvasEvent('mousewheel', mw);
-        this.onCanvasEvent('wheel', mw);
+        };
+
+        this.onCanvasEvent('mousemove', mouseMoveHandler);
+        this.onCanvasEvent('keydown', keyDownHandler);
+        this.onCanvasEvent('keyup', keyUpHandler);
+        this.onCanvasEvent('mousewheel', mouseWheelHandler);
+        this.onCanvasEvent('wheel', mouseWheelHandler);
 
         this.rowController.onVerticalOffsetChangedHandler(verticalOffset => {
             this.layer.position.y = -verticalOffset;