From 463ac96bcbcf34dad48d3c15dfa6958119c66111 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Thu, 25 Feb 2021 09:32:40 +0100 Subject: [PATCH] Improvement: keyboard arrow keys can be used at any of the scales to replace mouse wheel --- .../Spaces/Charting-Space/Scales/RateScale.js | 24 ++++++++- .../Charting-Space/Scales/TimeFrameScale.js | 12 +++++ .../Spaces/Charting-Space/Scales/TimeScale.js | 24 ++++++++- .../UI/Spaces/Charting-Space/TimeMachine.js | 53 +++++++++++++++++-- .../UI/Spaces/Charting-Space/TimelineChart.js | 46 ++++++++++++++-- UI/Canvas.js | 4 ++ 6 files changed, 153 insertions(+), 10 deletions(-) diff --git a/Projects/Superalgos/UI/Spaces/Charting-Space/Scales/RateScale.js b/Projects/Superalgos/UI/Spaces/Charting-Space/Scales/RateScale.js index a7e0ad552..493270704 100644 --- a/Projects/Superalgos/UI/Spaces/Charting-Space/Scales/RateScale.js +++ b/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 } diff --git a/Projects/Superalgos/UI/Spaces/Charting-Space/Scales/TimeFrameScale.js b/Projects/Superalgos/UI/Spaces/Charting-Space/Scales/TimeFrameScale.js index 599de1952..5edabe274 100644 --- a/Projects/Superalgos/UI/Spaces/Charting-Space/Scales/TimeFrameScale.js +++ b/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. */ diff --git a/Projects/Superalgos/UI/Spaces/Charting-Space/Scales/TimeScale.js b/Projects/Superalgos/UI/Spaces/Charting-Space/Scales/TimeScale.js index 9e3e1e861..473456d5c 100644 --- a/Projects/Superalgos/UI/Spaces/Charting-Space/Scales/TimeScale.js +++ b/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 } diff --git a/Projects/Superalgos/UI/Spaces/Charting-Space/TimeMachine.js b/Projects/Superalgos/UI/Spaces/Charting-Space/TimeMachine.js index 2a03bb759..38b273812 100644 --- a/Projects/Superalgos/UI/Spaces/Charting-Space/TimeMachine.js +++ b/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) { diff --git a/Projects/Superalgos/UI/Spaces/Charting-Space/TimelineChart.js b/Projects/Superalgos/UI/Spaces/Charting-Space/TimelineChart.js index 9accf6844..ea7c8f828 100644 --- a/Projects/Superalgos/UI/Spaces/Charting-Space/TimelineChart.js +++ b/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 + } } } } diff --git a/UI/Canvas.js b/UI/Canvas.js index c153d8dfd..e8bf8b28d 100644 --- a/UI/Canvas.js +++ b/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 */