From d4f6394a52708bf66a13bfa422dfd6121fc60ebb Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Mon, 2 Mar 2020 15:10:00 +0100 Subject: [PATCH] Improvement arrow keys to move charts --- Canvas.js | 1 + ChartingSpace/EdgeEditor.js | 58 +++++++++++++++++++++++++++--------- ChartingSpace/TimeMachine.js | 15 ++++++++++ Globals.js | 2 +- Spaces/ChartingSpace.js | 11 +++++++ 5 files changed, 72 insertions(+), 15 deletions(-) diff --git a/Canvas.js b/Canvas.js index f938244dd..7745830a2 100644 --- a/Canvas.js +++ b/Canvas.js @@ -250,6 +250,7 @@ function newCanvas () { thisObject.mouse.action = 'key down' checkMediaRecording(event) + canvas.chartingSpace.onKeyPressed(event) let nodeOnFocus = canvas.designSpace.workspace.getNodeThatIsOnFocus() if (nodeOnFocus !== undefined) { diff --git a/ChartingSpace/EdgeEditor.js b/ChartingSpace/EdgeEditor.js index d966088a9..9af754c0b 100644 --- a/ChartingSpace/EdgeEditor.js +++ b/ChartingSpace/EdgeEditor.js @@ -5,6 +5,8 @@ function newEdgeEditor () { container: undefined, fitFunction: undefined, isVisible: true, + isMouseOver: undefined, + onKeyPressed: onKeyPressed, physics: physics, drawForeground: drawForeground, getContainer: getContainer, @@ -22,8 +24,7 @@ function newEdgeEditor () { thisObject.container.isWheelable = false thisObject.container.detectMouseOver = true - let buttonUsedForDragging - let isMouseOver + let whatHappened let whereIsMouseOver = 'outside' let coordinateSystem @@ -60,7 +61,7 @@ function newEdgeEditor () { } function onMouseOver (event) { - isMouseOver = true + thisObject.isMouseOver = true mouse = { position: { x: event.x, @@ -70,25 +71,39 @@ function newEdgeEditor () { } function onMouseNotOver () { - isMouseOver = false + thisObject.isMouseOver = false } function onDragStarted (event) { switch (event.buttons) { case 1: { - buttonUsedForDragging = 'left mouse button' + whatHappened = 'left mouse button' if (event.shiftKey === true) { - buttonUsedForDragging = 'left mouse button + SHIFT' + whatHappened = 'left mouse button + SHIFT' } break } case 2: { - buttonUsedForDragging = 'right mouse button' // this will never happen as of today + whatHappened = 'right mouse button' // this will never happen as of today break } } } + function onKeyPressed (event) { + const STEP = 10 + + if (event.shiftKey === false && event.code === 'ArrowLeft') { + thisObject.container.frame.position.x = thisObject.container.frame.position.x + STEP + } + + if (event.shiftKey === false && event.code === 'ArrowRight') { + thisObject.container.frame.position.x = thisObject.container.frame.position.x - STEP + } + + whatHappened = 'left or right arrow key pressed' + } + function getContainer (event, purpose) { if (thisObject.container.frame.isThisPointHere(event, undefined, undefined, -EDGE_SIZE) === true && event.buttons !== 2) { let point = { @@ -145,7 +160,7 @@ function newEdgeEditor () { switch (whereIsMouseOver) { case 'center': { - switch (buttonUsedForDragging) { + switch (whatHappened) { case 'left mouse button + SHIFT': { /* This is equivalent to drag the whole Time Machine, so we will apply the translation received onto the Time Machine container. */ thisObject.container.parentContainer.frame.position.x = thisObject.container.parentContainer.frame.position.x + dragVector.x @@ -172,6 +187,21 @@ function newEdgeEditor () { } coordinateSystem.recalculateScale(event) } + case 'left or right arrow key pressed': { + let point = { + x: -dragVector.x, + y: 0 + } + let newMinDate = getDateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem) + let xDifferenceMaxMin = coordinateSystem.max.x - coordinateSystem.min.x + coordinateSystem.min.x = newMinDate.valueOf() + coordinateSystem.max.x = newMinDate.valueOf() + xDifferenceMaxMin + let event = { + type: 'center dragged', + dragVector: dragVector + } + coordinateSystem.recalculateScale(event) + } } thisObject.container.parentContainer.eventHandler.raiseEvent('onMouseOver', mouse.position) break @@ -190,7 +220,7 @@ function newEdgeEditor () { thisObject.container.parentContainer.frame.position.y = thisObject.container.parentContainer.frame.position.y + dragVector.y thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height - dragVector.y - switch (buttonUsedForDragging) { + switch (whatHappened) { case 'left mouse button': { coordinateSystem.max.y = newMaxRate coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height @@ -223,7 +253,7 @@ function newEdgeEditor () { thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height + dragVector.y - switch (buttonUsedForDragging) { + switch (whatHappened) { case 'left mouse button': { coordinateSystem.min.y = newMinRate coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height @@ -256,7 +286,7 @@ function newEdgeEditor () { thisObject.container.parentContainer.frame.position.x = thisObject.container.parentContainer.frame.position.x + dragVector.x thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width - dragVector.x - switch (buttonUsedForDragging) { + switch (whatHappened) { case 'left mouse button': { coordinateSystem.min.x = newMinDate.valueOf() coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width @@ -285,7 +315,7 @@ function newEdgeEditor () { thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width + dragVector.x - switch (buttonUsedForDragging) { + switch (whatHappened) { case 'left mouse button': { coordinateSystem.max.x = newMaxDate.valueOf() coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width @@ -309,7 +339,7 @@ function newEdgeEditor () { let edgeSize let lineWidth - if (whereIsMouseOver === 'outside' || isMouseOver === false) { + if (whereIsMouseOver === 'outside' || thisObject.isMouseOver === false) { edgeSize = EDGE_SIZE / 2 lineWidth = 0.1 } else { @@ -462,7 +492,7 @@ function newEdgeEditor () { drawEdge('left') function drawEdge (edgeType) { - if (whereIsMouseOver === edgeType && isMouseOver === true) { + if (whereIsMouseOver === edgeType && thisObject.isMouseOver === true) { browserCanvasContext.lineWidth = lineWidth browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + OPACITY + ')' browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')' diff --git a/ChartingSpace/TimeMachine.js b/ChartingSpace/TimeMachine.js index 6e5620fcd..d6bbb9170 100644 --- a/ChartingSpace/TimeMachine.js +++ b/ChartingSpace/TimeMachine.js @@ -22,6 +22,8 @@ function newTimeMachine () { rateScale: undefined, payload: undefined, edgeEditor: undefined, + onFocus: undefined, + onKeyPressed: onKeyPressed, timelineCharts: [], fitFunction: fitFunction, physics: physics, @@ -157,6 +159,10 @@ function newTimeMachine () { callBackFunction() } + function onKeyPressed (event) { + thisObject.edgeEditor.onKeyPressed(event) + } + function onMouseOver (event) { drawScales = true @@ -391,6 +397,15 @@ function newTimeMachine () { syncWithDesigner() } panelPhysics() + onFocusPhysics() + } + + function onFocusPhysics () { + if (thisObject.edgeEditor.isMouseOver === true) { + thisObject.onFocus = true + } else { + thisObject.onFocus = false + } } function panelPhysics () { diff --git a/Globals.js b/Globals.js index 375fd8c90..61b579d57 100644 --- a/Globals.js +++ b/Globals.js @@ -46,7 +46,7 @@ const ZOOM_OUT_THRESHOLD_FOR_HIDDING_PANELS = 5 // This regulates some behavious const ZOOM_OUT_THRESHOLD_FOR_CHANGING_TIME_FRAME = 5 // This help regulate when to change the Time Frame base on the level of zoom out. const ZOOM_OUT_THRESHOLD_FOR_PACKING_OBJECTS_AT_THE_BOTTOM_OR_TOP_OF_VIEWPORT = 2 const ZOOM_OUT_THRESHOLD_FOR_PLOTTING_IN_LOW_RESOLUTION = 3 -const ZOOM_OUT_THRESHOLD_FOR_DISPLAYING_TIME_MACHINES_ICONIZED = 4 +const ZOOM_OUT_THRESHOLD_FOR_DISPLAYING_TIME_MACHINES_ICONIZED = 5 let FONT_ASPECT_RATIO = 0.32; diff --git a/Spaces/ChartingSpace.js b/Spaces/ChartingSpace.js index cb82c62ba..d1727cac8 100644 --- a/Spaces/ChartingSpace.js +++ b/Spaces/ChartingSpace.js @@ -19,6 +19,7 @@ function newChartingSpace () { timeMachines: undefined, viewport: undefined, payload: undefined, + onKeyPressed: onKeyPressed, reset: reset, oneScreenUp: oneScreenUp, oneScreenDown: oneScreenDown, @@ -263,6 +264,16 @@ function newChartingSpace () { syncWithDesigner() } + function onKeyPressed (event) { + if (thisObject.visible !== true) { return } + for (let j = 0; j < thisObject.timeMachines.length; j++) { + let timeMachine = thisObject.timeMachines[j] + if (timeMachine.onFocus === true) { + timeMachine.onKeyPressed(event) + } + } + } + function syncWithDesigner () { if (thisObject.payload === undefined) { return } if (thisObject.payload.node === undefined) { return }