Improvement: keyboard arrow keys can be used at any of the scales to replace mouse wheel

Projects/Superalgos/UI/Spaces/Charting-Space/Scales/RateScale.js

@@ -10,6 +10,7 @@ function newRateScale() {
         maxValue: undefined,
         isVisible: true,
         layersOn: undefined,
+        onKeyPressed: onKeyPressed, 
         onUpstreamScaleChanged: onUpstreamScaleChanged,
         onMouseOverSomeTimeMachineContainer: onMouseOverSomeTimeMachineContainer,
         physics: physics,
@@ -125,6 +126,25 @@ function newRateScale() {
         readObjectState()
     }
 
+    function onKeyPressed(event) {
+        if (event.code === "ArrowUp") {
+            event.delta = 1
+            onMouseWheel(event, false)
+        }
+        if (event.code === "ArrowDown") {
+            event.delta = -1
+            onMouseWheel(event, false)
+        }
+        if (event.code === "ArrowLeft") {
+            event.delta = 1
+            onMouseWheel(event, true)
+        }
+        if (event.code === "ArrowRight") {
+            event.delta = -1
+            onMouseWheel(event, true)
+        }
+    }
+
     function onMouseOverSomeTimeMachineContainer(event) {
         if (event.containerId === undefined) {
             /* This happens when the mouse over was not at the instance of a certain scale, but anywhere else. */
@@ -154,7 +174,7 @@ function newRateScale() {
         scaleDisplayTimer = 0
     }
 
-    function onMouseWheel(event) {
+    function onMouseWheel(event, autoScale) {
         if (IS_MAC) {
             let sensitivity
             if (event.delta < 0) {
@@ -196,7 +216,7 @@ function newRateScale() {
             }
         }
 
-        if (event.shiftKey === true) {
+        if (event.shiftKey === true || autoScale === true ) {
             autoScaleButton.container.eventHandler.raiseEvent('onMouseWheel', event)
             return
         }

Projects/Superalgos/UI/Spaces/Charting-Space/Scales/TimeFrameScale.js

@@ -8,6 +8,7 @@ function newTimeFrameScale() {
         payload: undefined,
         isVisible: true,
         layersOn: undefined,
+        onKeyPressed: onKeyPressed,
         adjustTimeFrame: adjustTimeFrame,
         onMouseOverSomeTimeMachineContainer: onMouseOverSomeTimeMachineContainer,
         draw: draw,
@@ -83,6 +84,17 @@ function newTimeFrameScale() {
         onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
     }
 
+    function onKeyPressed(event) {
+        if (event.code === "ArrowUp") {
+            event.delta = 1
+            onMouseWheel(event)
+        }
+        if (event.code === "ArrowDown") {
+            event.delta = -1
+            onMouseWheel(event)
+        }
+    }
+
     function onMouseOverSomeTimeMachineContainer(event) {
         if (event.containerId === undefined) {
             /* This happens when the mouse over was not at the instance of a certain scale, but anywhere else. */

Projects/Superalgos/UI/Spaces/Charting-Space/Scales/TimeScale.js

@@ -9,6 +9,7 @@ function newTimeScale() {
         isVisible: true,
         fromDate: undefined,
         toDate: undefined,
+        onKeyPressed: onKeyPressed, 
         onMouseOverSomeTimeMachineContainer: onMouseOverSomeTimeMachineContainer,
         physics: physics,
         draw: draw,
@@ -81,6 +82,25 @@ function newTimeScale() {
         readObjectState()
     }
 
+    function onKeyPressed(event) {
+        if (event.code === "ArrowUp") {
+            event.delta = 1
+            onMouseWheel(event, true)
+        }
+        if (event.code === "ArrowDown") {
+            event.delta = -1
+            onMouseWheel(event, true)
+        }
+        if (event.code === "ArrowLeft") {
+            event.delta = 1
+            onMouseWheel(event, false)
+        }
+        if (event.code === "ArrowRight") {
+            event.delta = -1
+            onMouseWheel(event, false)
+        }
+    }
+
     function onMouseOverSomeTimeMachineContainer(event) {
         if (event.containerId === undefined) {
             /* This happens when the mouse over was not at the instance of a certain scale, but anywhere else. */
@@ -105,7 +125,7 @@ function newTimeScale() {
         isMouseOver = false
     }
 
-    function onMouseWheel(event) {
+    function onMouseWheel(event, autoScale) {
         if (IS_MAC) {
             let sensitivity
             if (event.delta < 0) {
@@ -147,7 +167,7 @@ function newTimeScale() {
             }
         }
 
-        if (event.shiftKey === true) {
+        if (event.shiftKey === true || autoScale === true ) {
             autoScaleButton.container.eventHandler.raiseEvent('onMouseWheel', event)
             return
         }

Projects/Superalgos/UI/Spaces/Charting-Space/TimeMachine.js

@@ -12,7 +12,7 @@ each one with it own timelineCharts, and each one positioned at an especific poi
 function newTimeMachine() {
     const MODULE_NAME = 'Time Machine'
     const logger = newWebDebugLog()
-    
+
 
     let timeFrame = INITIAL_TIME_PERIOD
 
@@ -20,6 +20,7 @@ function newTimeMachine() {
         container: undefined,
         timeScale: undefined,
         rateScale: undefined,
+        timeFrameScale: undefined,
         payload: undefined,
         edgeEditor: undefined,
         onFocus: undefined,
@@ -171,7 +172,53 @@ function newTimeMachine() {
     }
 
     function onKeyPressed(event) {
-        thisObject.edgeEditor.onKeyPressed(event)
+
+        /*
+        We are going to pass this event downstream to see if it belogns to any of the 
+        chart's scales or time machine's scales. If it does not belong to any
+        we will apply it to the edge editor.
+        */
+        let eventTaken = false
+        let point = {
+            x: event.x,
+            y: event.y
+        }
+        let container
+
+        if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) {
+            container = thisObject.rateScale.getContainer(point)
+            if (container !== undefined) {
+                eventTaken = true
+                thisObject.rateScale.onKeyPressed(event)
+            }
+        }
+
+        if (thisObject.timeScale !== undefined && thisObject.timeScale.isVisible === true) {
+            container = thisObject.timeScale.getContainer(point)
+            if (container !== undefined) {
+                eventTaken = true
+                thisObject.timeScale.onKeyPressed(event)
+            }
+        }
+
+        if (thisObject.timeFrameScale !== undefined && thisObject.timeFrameScale.isVisible === true) {
+            container = thisObject.timeFrameScale.getContainer(point)
+            if (container !== undefined) {
+                eventTaken = true
+                thisObject.timeFrameScale.onKeyPressed(event)
+            }
+        }
+
+        for (let i = 0; i < thisObject.timelineCharts.length; i++) {
+            container = thisObject.timelineCharts[i].getContainer(point)
+            if (container !== undefined) {
+                eventTaken = thisObject.timelineCharts[i].onKeyPressed(event)
+            }
+        }
+
+        if (eventTaken === false) {
+            thisObject.edgeEditor.onKeyPressed(event)
+        }
     }
 
     function onMouseOver(event) {
@@ -665,7 +712,7 @@ function newTimeMachine() {
         if (description !== undefined) {
             label = description
         }
-        UI.projects.superalgos.utilities.drawPrint.printLabel(label, position.x + 20, undefined, undefined,  position.y - 10, opacity, fontSize, undefined, 'Left')
+        UI.projects.superalgos.utilities.drawPrint.printLabel(label, position.x + 20, undefined, undefined, position.y - 10, opacity, fontSize, undefined, 'Left')
 
         if (icon !== undefined) {
             if (icon.canDrawIcon === true) {

Projects/Superalgos/UI/Spaces/Charting-Space/TimelineChart.js

@@ -2,7 +2,7 @@ function newTimelineChart() {
     const MODULE_NAME = 'Timeline Chart'
 
     let logger = newWebDebugLog()
-    
+
 
     let timeFrame = INITIAL_TIME_PERIOD
     let datetime = NEW_SESSION_INITIAL_DATE
@@ -16,6 +16,7 @@ function newTimelineChart() {
         layerManager: undefined,
         plotterManager: undefined,
         upstreamTimeFrame: undefined,
+        onKeyPressed: onKeyPressed,
         setDatetime: setDatetime,
         setTimeFrame: setTimeFrame,
         physics: physics,
@@ -231,6 +232,37 @@ function newTimelineChart() {
         }
     }
 
+    function onKeyPressed(event) {
+
+        /*
+        We are going to pass this event to the scales and if they take it return true.
+        */
+
+        let point = {
+            x: event.x,
+            y: event.y
+        }
+        let container
+
+        if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) {
+            container = thisObject.rateScale.getContainer(point)
+            if (container !== undefined) {
+                thisObject.rateScale.onKeyPressed(event)
+                return true
+            }
+        }
+
+        if (thisObject.timeFrameScale !== undefined && thisObject.timeFrameScale.isVisible === true) {
+            container = thisObject.timeFrameScale.getContainer(point)
+            if (container !== undefined) {
+                thisObject.timeFrameScale.onKeyPressed(event)
+                return true
+            }
+        }
+
+        return false
+    }
+
     function onScaleChanged(event) {
         if (thisObject.rateScale !== undefined) {
             thisObject.rateScale.onUpstreamScaleChanged(event)
@@ -292,8 +324,12 @@ function newTimelineChart() {
         if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) {
             container = thisObject.rateScale.getContainer(point, purpose)
             if (container !== undefined) {
-                if (container.isForThisPurpose(purpose)) {
+                if (purpose === undefined) {
                     return container
+                } else {
+                    if (container.isForThisPurpose(purpose)) {
+                        return container
+                    }
                 }
             }
         }
@@ -301,8 +337,12 @@ function newTimelineChart() {
         if (thisObject.timeFrameScale !== undefined && thisObject.timeFrameScale.isVisible === true) {
             container = thisObject.timeFrameScale.getContainer(point, purpose)
             if (container !== undefined) {
-                if (container.isForThisPurpose(purpose)) {
+                if (purpose === undefined) {
                     return container
+                } else {
+                    if (container.isForThisPurpose(purpose)) {
+                        return container
+                    }
                 }
             }
         }

UI/Canvas.js

@@ -387,6 +387,10 @@ function newCanvas() {
         thisObject.mouse.action = 'key down'
 
         checkMediaRecording(event)
+
+        event.x = thisObject.mouse.position.x 
+        event.y = thisObject.mouse.position.y 
+
         UI.projects.superalgos.spaces.chartingSpace.onKeyPressed(event)
 
         /* Shourcuts to Menu Items */