Page scrolling on vertical and horizontal scrollbars

Implements page scrolling on horizontal and vertical scrollbars.  The user can right-click to move the navigator one page in the correct direction.

Updates comments and variable names on previous snap-on-click feature implementation for clarity.

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

timeline-chart/src/components/time-graph-component.ts

@@ -1,6 +1,6 @@
 import * as PIXI from "pixi.js-legacy"
 
-export type TimeGraphInteractionType = 'mouseover' | 'mouseout' | 'mousemove' | 'mousedown' | 'mouseup' | 'mouseupoutside' | 'click';
+export type TimeGraphInteractionType = 'mouseover' | 'mouseout' | 'mousemove' | 'mousedown' | 'mouseup' | 'mouseupoutside' | 'rightdown' | 'click';
 export type TimeGraphInteractionHandler = (event: PIXI.InteractionEvent) => void;
 
 export type TimeGraphComponentOptions = {}

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

@@ -66,7 +66,7 @@ export class TimeGraphNavigatorHandle extends TimeGraphComponent<null> {
     protected mouseIsDown: boolean;
     protected mouseStartX: number;
     protected oldViewStart: bigint;
-    private _moveEndHandler;
+    private _moveEndHandler: () => void;
 
     constructor(protected unitController: TimeGraphUnitController, protected stateController: TimeGraphStateController) {
         super('navigator_handle');
@@ -127,19 +127,25 @@ export class TimeGraphNavigatorBackground extends TimeGraphComponent<null> {
     constructor(protected unitController: TimeGraphUnitController, protected stateController: TimeGraphStateController) {
         super("navigator_background");
         this.addEvent("mousedown", event => {
+            // Get x position of click (in pixels).
             let x = event.data.getLocalPosition(this._displayObject).x;
-            let middle = BIMath.round((x / this.stateController.canvasDisplayWidth) * Number(this.unitController.absoluteRange));
-            // We have horizontal offset at point of click, now we need coord for start of handler.
-            let hVL = this.unitController.viewRangeLength / BigInt(2);
-            let start0 = middle - hVL;
+            // Convert x to units of BigInt Time.
+            let center = BIMath.round((x / this.stateController.canvasDisplayWidth) * Number(this.unitController.absoluteRange));
+            // We have the center of the new scrollbar position, but need the start of new position.
+            // Start = middle - (scrollbarWidth / 2)
+            let halfViewWidth = this.unitController.viewRangeLength / BigInt(2);
+            let start = center - halfViewWidth;
+            // Get the maximum and minimum values that start can be.
+            // Min = 0 (Handle is farthest left)
+            // Max = [The Last Number] - [Length of handle] (Handle is farthest right)
             let max = this.unitController.absoluteRange - this.unitController.viewRangeLength;
             let min = BigInt(0);
-            // Clamp it.
-            const start = BIMath.clamp(start0, min, max);
+            // Clamp
+            start = BIMath.clamp(start, min, max);
             this.unitController.viewRange = {
                 start,
                 end: start + this.unitController.viewRangeLength
-            }
+            };
             // Set snapped state
             this.toggleSnappedState(true);
         }, this._displayObject);
@@ -151,6 +157,32 @@ export class TimeGraphNavigatorBackground extends TimeGraphComponent<null> {
         }
         this.addEvent('mouseup', endSnap, this._displayObject);
         this.addEvent('mouseupoutside', endSnap, this._displayObject);
+        this.addEvent('rightdown', event => {
+            // Get x position of click (in pixels).
+            let x = event.data.getLocalPosition(this._displayObject).x;
+            // Convert x to units of BigInt time.
+            let clickPoint = BIMath.round((x / this.stateController.canvasDisplayWidth) * Number(this.unitController.absoluteRange));
+            // Are we clicking to the left or the right of the current scrollbar position?
+            const { start, end } = this.unitController.viewRange;
+            let newStart = BigInt(0);
+            if (clickPoint < start) {
+                // If left, move left one page.
+                newStart = start - this.unitController.viewRangeLength;
+            } else if (clickPoint > end) {
+                // If right, move right one page.
+                newStart = start + this.unitController.viewRangeLength;
+            }
+            // Clamp our new value
+            let startMin = BigInt(0);
+            let startMax = this.unitController.absoluteRange - this.unitController.viewRangeLength;
+            newStart = BIMath.clamp(newStart, startMin, startMax);
+            // Set new value
+            this.unitController.viewRange = {
+                start: newStart,
+                end: newStart + this.unitController.viewRangeLength
+            };
+        }, this._displayObject);
+
     }
 
     protected toggleSnappedState = (bool: boolean) => {

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

@@ -111,14 +111,19 @@ export class TimeGraphVerticalScrollbarBackground extends TimeGraphComponent<nul
     constructor(protected rowController: TimeGraphRowController, protected stateController: TimeGraphStateController, protected factor: number) {
         super("vscroll_background");
         this.addEvent("mousedown", event => {
-            let yPosition = event.data.getLocalPosition(this._displayObject).y;
-            let vOffset = (yPosition/this.stateController.canvasDisplayHeight) * this.rowController.totalHeight;
-            // We have vertical offset at point of click, but need to make it the center of scrollbar.
+            // Get y position of click (in pixels).
+            let y = event.data.getLocalPosition(this._displayObject).y;
+            // Convert to units used by rowController.
+            let center = (y/this.stateController.canvasDisplayHeight) * this.rowController.totalHeight;
+            // We have the center of the new scrollbar position, but need the starting pixel.
+            // start = middle - (scrollbarHeight / 2)
             let scrollBarHeight = (this.rowController.totalHeight * this.factor);
-            vOffset = vOffset - (scrollBarHeight / 2);
-            // Clamp it
-            let vOffsetClamped = Math.max(0, Math.min(this.rowController.totalHeight - this.stateController.canvasDisplayHeight, vOffset));
-            this.rowController.verticalOffset = vOffsetClamped;
+            let newOffset = center - (scrollBarHeight / 2);
+            // Clamp our new verticalOffset value
+            let vOffsetMin = 0;
+            let vOffsetMax = this.rowController.totalHeight - this.stateController.canvasDisplayHeight;
+            newOffset = Math.max(vOffsetMin, Math.min(vOffsetMax, newOffset));
+            this.rowController.verticalOffset = newOffset;
             // Set snapped state
             this.toggleSnappedState(true);
         }, this._displayObject);
@@ -130,6 +135,31 @@ export class TimeGraphVerticalScrollbarBackground extends TimeGraphComponent<nul
         }
         this.addEvent('mouseup', endSnap, this._displayObject);
         this.addEvent('mouseupoutside', endSnap, this._displayObject);
+        this.addEvent('rightdown', event => {
+            // Get y position of click (in raw pixels).
+            let y = event.data.getLocalPosition(this._displayObject).y;
+            // Convert y to correct units used by rowController.
+            let clickPoint = (y / this.stateController.canvasDisplayHeight) * this.rowController.totalHeight;
+            // Are we clicking above or below the current scrollbar position?
+            const { verticalOffset, totalHeight } = this.rowController;
+            const scrollBarHeight = totalHeight * this.factor;
+            let newOffset = verticalOffset;
+            const start = verticalOffset;
+            const end = verticalOffset + scrollBarHeight;
+            if (clickPoint < start) {
+                // If above, move up one page.
+                newOffset = newOffset - scrollBarHeight;
+            } else if (clickPoint > end) {
+                // If below, move down one page.
+                newOffset = newOffset + scrollBarHeight;
+            }
+            // Clamp our new values
+            const vOffsetMin = 0;
+            const vOffsetMax = totalHeight - scrollBarHeight;
+            newOffset = Math.max(vOffsetMin, Math.min(vOffsetMax, newOffset));
+            //  Assign new value
+            this.rowController.verticalOffset = newOffset;
+        }, this._displayObject);
     }
 
     updateFactor(factor: number) {