Up down navigation for selection added

eclipse-cdt-cloud · Feb 15, 2019 · dd547ad · dd547ad
1 parent c3b17d2
commit dd547ad
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 0 deletions.
diff --git a/timeline-chart/src/layer/time-graph-chart-cursors.ts b/timeline-chart/src/layer/time-graph-chart-cursors.ts
@@ -28,6 +28,10 @@ export class TimeGraphChartCursors extends TimeGraphChartLayer {
                 this.navigateOrSelectLeft();
             } else if (event.keyCode === 39) {
                 this.navigateOrSelectRight();
+            } else if(event.keyCode === 38){
+                this.navigateUp();
+            } else if(event.keyCode === 40){
+                this.navigateDown();
             }
         });
         document.addEventListener('keyup', (event: KeyboardEvent) => {
@@ -123,6 +127,40 @@ export class TimeGraphChartCursors extends TimeGraphChartLayer {
         this.chartLayer.selectRowElement(states[nextIndex]);
     }
 
+    protected navigateDown(){
+        const rows = this.chartLayer.getRowModels();
+        let selectedRow = this.rowController.selectedRow;
+        const idx = rows.findIndex(row => row === selectedRow);
+        if(idx < rows.length){
+            this.chartLayer.selectRow(rows[idx + 1]);
+        }
+        selectedRow = this.rowController.selectedRow;
+        const state = selectedRow.states.find(state => {
+            if(this.unitController.selectionRange){
+                return state.range.start <= this.unitController.selectionRange.start && state.range.end > this.unitController.selectionRange.start;
+            }
+            return false;
+        });
+        state && this.chartLayer.selectRowElement(state);
+    }
+
+    protected navigateUp(){
+        const rows = this.chartLayer.getRowModels();
+        let selectedRow = this.rowController.selectedRow;
+        const idx = rows.findIndex(row => row === selectedRow);
+        if(idx > 0){
+            this.chartLayer.selectRow(rows[idx - 1]);
+        }
+        selectedRow = this.rowController.selectedRow;
+        const state = selectedRow.states.find(state => {
+            if(this.unitController.selectionRange){
+                return state.range.start <= this.unitController.selectionRange.start && state.range.end > this.unitController.selectionRange.start;
+            }
+            return false;
+        })
+        state && this.chartLayer.selectRowElement(state);
+    }
+
     centerCursor() {
         if (this.unitController.selectionRange) {
             const cursorPosition = this.unitController.selectionRange.start;

diff --git a/timeline-chart/src/time-graph-unit-controller.ts b/timeline-chart/src/time-graph-unit-controller.ts
@@ -7,6 +7,10 @@ export class TimeGraphUnitController {
     protected selectionRangeChangedHandlers: ((newRange?: TimelineChart.TimeGraphRange) => void)[];
     protected _selectionRange?: TimelineChart.TimeGraphRange;
 
+    /**
+     *  Create a string from the given number, which is shown in TimeAxis.
+     *  Or return undefined to not show any text for that number.
+     */
     numberTranslator?: (theNumber: number) => string | undefined;
     scaleSteps?: number[]