Navigation of markers using new cursor class

Implements functionality to navigate through markers using "," & ".".

Renames the new class with appropriate name: TimeGraphMarkersChartCursor.
Removes duplicate code by using class inheritance.
Fixes bug where canvas loses focus when selection is out of world range.

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

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

@@ -1,5 +1,4 @@
 import * as PIXI from "pixi.js-legacy"
-import * as keyboardKey from "keyboard-key"
 
 import { TimeGraphCursor } from "../components/time-graph-cursor";
 import { TimelineChart } from "../time-graph-model";
@@ -22,8 +21,9 @@ export class TimeGraphChartCursors extends TimeGraphChartLayer {
 
     private _updateHandler: { (): void; (viewRange: TimelineChart.TimeGraphRange): void; (selectionRange: TimelineChart.TimeGraphRange): void; (viewRange: TimelineChart.TimeGraphRange): void; (selectionRange: TimelineChart.TimeGraphRange): void; };
     private _mouseDownHandler: { (event: MouseEvent): void; (event: Event): void; };
-    private _keyDownHandler: (event: KeyboardEvent) => void;
-    private _keyUpHandler: (event: KeyboardEvent) => void;
+    private _cursorKeyDownHandler: (event: KeyboardEvent) => void;
+    private _cursorKeyUpHandler: (event: KeyboardEvent) => void;
+    protected _keyboardShortcutKeyDownHandler: (event: KeyboardEvent) => void;
 
     constructor(id: string, protected chartLayer: TimeGraphChart, protected rowController: TimeGraphRowController, style?: { color?: number }) {
         super(id, rowController);
@@ -39,31 +39,39 @@ export class TimeGraphChartCursors extends TimeGraphChartLayer {
 
         this._updateHandler = (): void => this.update();
 
-        this._keyDownHandler = (event: KeyboardEvent) => {
+        this._cursorKeyDownHandler = (event: KeyboardEvent) => {
             if (event.key === 'Shift' && this.mouseButtons === 0 && !event.ctrlKey && !event.altKey) {
                 this.stage.cursor = 'crosshair';
             } else if (this.stage.cursor === 'crosshair' && !this.mouseSelecting &&
                 (event.key === 'Control' || event.key === 'Alt')) {
                 this.stage.cursor = 'default';
             }
             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) {
-                this.navigateOrSelectRight();
-            }
-        };
+        }
 
-        this._keyUpHandler = (event: KeyboardEvent) => {
+        this._cursorKeyUpHandler = (event: KeyboardEvent) => {
             this.shiftKeyDown = event.shiftKey;
             if (this.stage.cursor === 'crosshair' && !this.mouseSelecting && event.key === 'Shift' ) {
                 this.stage.cursor = 'default';
             }
+        }
+
+        this._keyboardShortcutKeyDownHandler = (event: KeyboardEvent) => {
+            switch(event.key) {
+                case "ArrowLeft":
+                    this.navigateOrSelectLeft();
+                    break;
+                case "ArrowRight":
+                    this.navigateOrSelectRight();
+                    break;
+                default:
+                    break;
+            }
         };
 
-        this.onCanvasEvent('keydown', this._keyDownHandler);
-        this.onCanvasEvent('keyup', this._keyUpHandler);
+        this.onCanvasEvent('keydown', this._cursorKeyDownHandler);
+        this.onCanvasEvent('keydown', this._keyboardShortcutKeyDownHandler)
+        this.onCanvasEvent('keyup', this._cursorKeyUpHandler);
 
         this._stageMouseDownHandler = (event: PIXI.InteractionEvent) => {
             this.mouseButtons = event.data.buttons;
@@ -274,11 +282,14 @@ export class TimeGraphChartCursors extends TimeGraphChartLayer {
         if (this._mouseDownHandler) {
             this.removeOnCanvasEvent('mousedown', this._mouseDownHandler);
         }
-        if (this._keyDownHandler) {
-            this.removeOnCanvasEvent('keydown', this._keyDownHandler);
+        if (this._cursorKeyDownHandler) {
+            this.removeOnCanvasEvent('keydown', this._cursorKeyDownHandler);
+        }
+        if (this._keyboardShortcutKeyDownHandler) {
+            this.removeOnCanvasEvent('keydown', this._keyboardShortcutKeyDownHandler);
         }
-        if (this._keyUpHandler) {
-            this.removeOnCanvasEvent('mousedown', this._keyUpHandler);
+        if (this._cursorKeyUpHandler) {
+            this.removeOnCanvasEvent('mousedown', this._cursorKeyUpHandler);
         }
         if (this.stage) {
             this.stage.off('mousedown', this._stageMouseDownHandler);

timeline-chart/src/layer/time-graph-markers-chart-cursors.ts

@@ -0,0 +1,66 @@
+
+import { TimelineChart } from "../time-graph-model";
+import { TimeGraphChartCursors } from "./time-graph-chart-cursors";
+
+export class TimeGraphMarkersChartCursors extends TimeGraphChartCursors {
+
+    protected afterAddToContainer() {
+        super.afterAddToContainer();
+        this.removeOnCanvasEvent('keydown', this._keyboardShortcutKeyDownHandler);
+        this._keyboardShortcutKeyDownHandler = (event: KeyboardEvent) => {
+            switch(event.key) {
+                case ",":
+                    this.selectClosestStateAndMakeSelectionRange('prev');    
+                    break;
+                case ".":
+                    this.selectClosestStateAndMakeSelectionRange('next');    
+                    break;
+                default:
+                    return;
+            }
+        };
+        this.onCanvasEvent('keydown', this._keyboardShortcutKeyDownHandler);
+    }
+
+    protected selectClosestStateAndMakeSelectionRange = (direction: 'next' | 'prev')  => {
+
+        const next = direction === 'next';
+        const selectedRow = this.rowController.selectedRow;
+
+        if (this.unitController.selectionRange && selectedRow) {
+
+            const { start, end } = this.unitController.selectionRange;
+            let point1 = next ? end : start;
+            let closestState: TimelineChart.TimeGraphState | undefined;
+            let closestDiff = Number.POSITIVE_INFINITY;
+            let isValid = false;
+
+            selectedRow?.states.forEach((marker, key) => {
+
+                const { start, end } = marker.range;
+
+                if (start === this.unitController.selectionRange?.start && end === this.unitController.selectionRange?.end) {
+                    return;
+                }
+
+                let point2 = next ? start : end;
+                let innerIsValid = next ? (point1 <= point2) : (point1 >= point2);
+                let diff = Math.abs(Number(point1 - point2));
+
+                if (diff < closestDiff && innerIsValid) {
+                    closestDiff = diff;
+                    closestState = marker;
+                    isValid = innerIsValid;
+                }
+
+            });
+
+            if (isValid && closestState) {
+                this.unitController.selectionRange = closestState.range;
+                this.maybeCenterCursor();
+                this.update();
+            }
+
+        }
+    }
+}