diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js index 9050e0e80..124db9076 100644 --- a/ChartsSpace/TimeMachine.js +++ b/ChartsSpace/TimeMachine.js @@ -47,9 +47,9 @@ function newTimeMachine () { let onMouseOverEventSuscriptionId let onMouseNotOverEventSuscriptionId - let timeScaleEventSuscriptionId + let timeScaleValueEventSuscriptionId let timeScaleMouseOverEventSuscriptionId - let rateScaleEventSuscriptionId + let rateScaleValueEventSuscriptionId let rateScaleMouseOverEventSuscriptionId let timeFrameScaleEventSuscriptionId let timeFrameScaleMouseOverEventSuscriptionId @@ -106,7 +106,7 @@ function newTimeMachine () { function finalizeTimeScale () { if (thisObject.timeScale === undefined) { return } - thisObject.timeScale.container.eventHandler.stopListening(timeScaleEventSuscriptionId) + thisObject.timeScale.container.eventHandler.stopListening(timeScaleValueEventSuscriptionId) thisObject.timeScale.container.eventHandler.stopListening(timeScaleMouseOverEventSuscriptionId) thisObject.timeScale.finalize() thisObject.timeScale = undefined @@ -115,7 +115,7 @@ function newTimeMachine () { function finalizeRateScale () { if (thisObject.rateScale === undefined) { return } - thisObject.rateScale.container.eventHandler.stopListening(rateScaleEventSuscriptionId) + thisObject.rateScale.container.eventHandler.stopListening(rateScaleValueEventSuscriptionId) thisObject.rateScale.container.eventHandler.stopListening(rateScaleMouseOverEventSuscriptionId) thisObject.rateScale.finalize() thisObject.rateScale = undefined @@ -179,19 +179,18 @@ function newTimeMachine () { thisObject.timeScale.fitFunction = thisObject.fitFunction thisObject.timeScale.payload = thisObject.payload.node.timeScale.payload - timeScaleEventSuscriptionId = thisObject.timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) { + timeScaleValueEventSuscriptionId = thisObject.timeScale.container.eventHandler.listenToEvent('Time Scale Value Changed', timeScaleValueChanged) + timeScaleMouseOverEventSuscriptionId = thisObject.timeScale.container.eventHandler.listenToEvent('onMouseOverScale', timeScaleMouseOver) + thisObject.timeScale.initialize(timeMachineCoordinateSystem, thisObject.container) + + function timeScaleValueChanged (event) { thisObject.container.frame.width = TIME_MACHINE_WIDTH * event.value recalculateCoordinateSystem() if (event.isUserAction === true) { moveToUserPosition(thisObject.container, timeMachineCoordinateSystem, false, true, event.mousePosition, true) } thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) - }) - - thisObject.timeScale.initialize(timeMachineCoordinateSystem, thisObject.container) - - timeScaleMouseOverEventSuscriptionId = thisObject.timeScale.container.eventHandler.listenToEvent('onMouseOverScale', timeScaleMouseOver) - + } function timeScaleMouseOver (event) { thisObject.container.eventHandler.raiseEvent('onMouseOver', event) } @@ -202,19 +201,18 @@ function newTimeMachine () { thisObject.rateScale.fitFunction = thisObject.fitFunction thisObject.rateScale.payload = thisObject.payload.node.rateScale.payload - rateScaleEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) { + rateScaleValueEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('Rate Scale Value Changed', rateScaleValueChanged) + rateScaleMouseOverEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('onMouseOverScale', rateScaleMouseOver) + thisObject.rateScale.initialize(timeMachineCoordinateSystem, thisObject.container) + + function rateScaleValueChanged (event) { thisObject.container.frame.height = TIME_MACHINE_HEIGHT * event.value recalculateCoordinateSystem() if (event.isUserAction === true) { moveToUserPosition(thisObject.container, timeMachineCoordinateSystem, true, false, event.mousePosition, true) } thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) - }) - - thisObject.rateScale.initialize(timeMachineCoordinateSystem, thisObject.container) - - rateScaleMouseOverEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('onMouseOverScale', rateScaleMouseOver) - + } function rateScaleMouseOver (event) { thisObject.container.eventHandler.raiseEvent('onMouseOver', event) } @@ -225,7 +223,11 @@ function newTimeMachine () { thisObject.timeFrameScale.fitFunction = thisObject.fitFunction thisObject.timeFrameScale.payload = thisObject.payload.node.timeFrameScale.payload - timeFrameScaleEventSuscriptionId = thisObject.timeFrameScale.container.eventHandler.listenToEvent('Time Frame Changed', function (event) { + timeFrameScaleEventSuscriptionId = thisObject.timeFrameScale.container.eventHandler.listenToEvent('Time Frame Value Changed', timeFrameScaleValueChanged) + timeFrameScaleMouseOverEventSuscriptionId = thisObject.timeFrameScale.container.eventHandler.listenToEvent('onMouseOverScale', timeFrameScaleMouseOver) + thisObject.timeFrameScale.initialize(timeMachineCoordinateSystem, thisObject.container) + + function timeFrameScaleValueChanged (event) { let currentTimeFrame = timeFrame timeFrame = event.timeFrame if (timeFrame !== currentTimeFrame) { @@ -237,12 +239,7 @@ function newTimeMachine () { } } } - }) - - thisObject.timeFrameScale.initialize(timeMachineCoordinateSystem, thisObject.container) - - timeFrameScaleMouseOverEventSuscriptionId = thisObject.timeFrameScale.container.eventHandler.listenToEvent('onMouseOverScale', timeFrameScaleMouseOver) - + } function timeFrameScaleMouseOver (event) { thisObject.container.eventHandler.raiseEvent('onMouseOver', event) } diff --git a/ChartsSpace/TimelineChart.js b/ChartsSpace/TimelineChart.js index e46f04557..c56fc3755 100644 --- a/ChartsSpace/TimelineChart.js +++ b/ChartsSpace/TimelineChart.js @@ -39,6 +39,9 @@ function newTimelineChart () { let onViewportZoomChangedEventSuscriptionId let onMouseOverEventSuscriptionId let onMouseNotOverEventSuscriptionId + let rateScaleValueEventSuscriptionId + let rateScaleMouseOverEventSuscriptionId + let rateScaleOffsetEventSuscriptionId let timeFrameScaleEventSuscriptionId let timeFrameScaleMouseOverEventSuscriptionId @@ -116,7 +119,8 @@ function newTimelineChart () { function finalizeRateScale () { if (thisObject.rateScale === undefined) { return } - thisObject.rateScale.container.eventHandler.stopListening(rateScaleEventSuscriptionId) + thisObject.rateScale.container.eventHandler.stopListening(rateScaleOffsetEventSuscriptionId) + thisObject.rateScale.container.eventHandler.stopListening(rateScaleValueEventSuscriptionId) thisObject.rateScale.container.eventHandler.stopListening(rateScaleMouseOverEventSuscriptionId) thisObject.rateScale.finalize() thisObject.rateScale = undefined @@ -170,18 +174,23 @@ function newTimelineChart () { thisObject.rateScale.fitFunction = thisObject.fitFunction thisObject.rateScale.payload = thisObject.payload.node.rateScale.payload - rateScaleEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) { + rateScaleOffsetEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('Rate Scale Offset Changed', rateScaleOffsetChanged) + rateScaleValueEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('Rate Scale Value Changed', rateScaleValueChanged) + rateScaleMouseOverEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('onMouseOverScale', rateScaleMouseOver) + thisObject.rateScale.initialize(timelineChartCoordinateSystem, thisObject.container.parentContainer) + + function rateScaleOffsetChanged (event) { + thisObject.container.frame.offset.y = event.offset + } + + function rateScaleValueChanged (event) { thisObject.container.frame.height = TIME_MACHINE_HEIGHT * event.value recalculateCoordinateSystem() if (event.isUserAction === true) { - moveToUserPosition(thisObject.container, timelineChartCoordinateSystem, true, false, event.mousePosition, true) + // moveToUserPosition(thisObject.container, timelineChartCoordinateSystem, true, false, event.mousePosition, true) } thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event) - }) - - thisObject.rateScale.initialize(timelineChartCoordinateSystem, thisObject.container.parentContainer) - - rateScaleMouseOverEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('onMouseOverScale', rateScaleMouseOver) + } function rateScaleMouseOver (event) { thisObject.container.eventHandler.raiseEvent('onChildrenMouseOver', event) @@ -193,7 +202,11 @@ function newTimelineChart () { thisObject.timeFrameScale.fitFunction = thisObject.fitFunction thisObject.timeFrameScale.payload = thisObject.payload.node.timeFrameScale.payload - timeFrameScaleEventSuscriptionId = thisObject.timeFrameScale.container.eventHandler.listenToEvent('Time Frame Changed', function (event) { + timeFrameScaleEventSuscriptionId = thisObject.timeFrameScale.container.eventHandler.listenToEvent('Time Frame Value Changed', timeFrameScaleValueChanged) + timeFrameScaleMouseOverEventSuscriptionId = thisObject.timeFrameScale.container.eventHandler.listenToEvent('onMouseOverScale', timeFrameScaleMouseOver) + thisObject.timeFrameScale.initialize(timeMachineCoordinateSystem, thisObject.container.parentContainer) + + function timeFrameScaleValueChanged (event) { let currentTimeFrame = timeFrame timeFrame = event.timeFrame if (timeFrame !== currentTimeFrame) { @@ -201,15 +214,10 @@ function newTimelineChart () { thisObject.plotterManager.setTimeFrame(timeFrame) } } - }) - - thisObject.timeFrameScale.initialize(timeMachineCoordinateSystem, thisObject.container.parentContainer) - - timeFrameScaleMouseOverEventSuscriptionId = thisObject.timeFrameScale.container.eventHandler.listenToEvent('onMouseOverScale', timeFrameScaleMouseOver) + } function timeFrameScaleMouseOver (event) { thisObject.container.eventHandler.raiseEvent('onChildrenMouseOver', event) - saveUserPosition(thisObject.container, timeMachineCoordinateSystem, event) } } diff --git a/Container.js b/Container.js index 81f6ab874..a4a0b5901 100644 --- a/Container.js +++ b/Container.js @@ -61,6 +61,8 @@ function newContainer () { thisObject.parentContainer = undefined thisObject.eventHandler.finalize() + + thisObject.frame.finalize() } } diff --git a/Frame.js b/Frame.js index 3f5b4cf4e..0c4023664 100644 --- a/Frame.js +++ b/Frame.js @@ -8,6 +8,7 @@ function newFrame () { containerName: '', // This is for debugging purposes only. parentFrame: undefined, // Here we store the parent cointainer zoom object. radius: 0, + offset: undefined, position: undefined, container: undefined, width: browserCanvas.width, @@ -20,20 +21,30 @@ function newFrame () { isThisPointHere: isThisPointHere, // This function return true is the point received as parameter lives within this frame. isThisScreenPointHere: isThisScreenPointHere, isInViewPort: isInViewPort, - initialize: initialize + initialize: initialize, + finalize: finalize } return thisObject + function finalize () { + thisObject.parentFrame = undefined + thisObject.position = undefined + thisObject.offset = undefined + } + function initialize (pType) { if (pType !== undefined) { thisObject.type = pType } - let position = { + thisObject.position = { x: 0, y: 0 } - thisObject.position = position + thisObject.offset = { + x: 0, + y: 0 + } } function getBodyHeight () { @@ -86,11 +97,11 @@ function newFrame () { if (thisObject.parentFrame !== undefined) { parentPoint = thisObject.parentFrame.frameThisPoint(checkPoint) - returnPoint.x = parentPoint.x + thisObject.position.x - returnPoint.y = parentPoint.y + thisObject.position.y + returnPoint.x = parentPoint.x + thisObject.position.x + thisObject.offset.x + returnPoint.y = parentPoint.y + thisObject.position.y + thisObject.offset.y } else { - returnPoint.x = checkPoint.x + thisObject.position.x - returnPoint.y = checkPoint.y + thisObject.position.y + returnPoint.x = checkPoint.x + thisObject.position.x + thisObject.offset.x + returnPoint.y = checkPoint.y + thisObject.position.y + thisObject.offset.y } return returnPoint diff --git a/Scales/RateScale.js b/Scales/RateScale.js index 685f6f2f5..bc5e7988d 100644 --- a/Scales/RateScale.js +++ b/Scales/RateScale.js @@ -7,6 +7,7 @@ function newRateScale () { fitFunction: undefined, payload: undefined, value: undefined, + offset: undefined, onMouseOverSomeTimeMachineContainer: onMouseOverSomeTimeMachineContainer, physics: physics, draw: draw, @@ -17,10 +18,16 @@ function newRateScale () { } const DEFAULT_VALUE = 25 - const STEP_SIZE = 1 - const MIN_WIDTH = 50 + const STEP_VALUE = 1 + const MIN_VALUE = 1 const MAX_VALUE = 100 + const DEFAULT_OFFSET = 0 + const STEP_OFFSET = 1 + const MIN_OFFSET = -1000 + const MAX_OFFSET = 1000 + const SNAP_THRESHOLD_OFFSET = 5 + thisObject.container = newContainer() thisObject.container.initialize(MODULE_NAME) @@ -32,6 +39,8 @@ function newRateScale () { thisObject.container.frame.width = UI_PANEL.WIDTH.NORMAL thisObject.container.frame.height = 40 + thisObject.offset = DEFAULT_OFFSET + let visible = true let isMouseOver @@ -78,7 +87,7 @@ function newRateScale () { let event = {} event.value = thisObject.value - thisObject.container.eventHandler.raiseEvent('Height Percentage Changed', event) + thisObject.container.eventHandler.raiseEvent('Rate Scale Value Changed', event) } function onMouseOverSomeTimeMachineContainer (event) { @@ -113,21 +122,48 @@ function newRateScale () { function onMouseWheel (event) { let morePower = 1 - if (event.buttons === 4) { morePower = 5 } // Mouse wheel pressed. + let delta - delta = event.wheelDelta - if (delta < 0) { - thisObject.value = thisObject.value - STEP_SIZE * morePower - if (thisObject.value < STEP_SIZE * 3) { thisObject.value = STEP_SIZE } + if (event.shiftKey === true) { + if (event.buttons === 4) { morePower = 10 } // Mouse wheel pressed. + delta = event.wheelDelta + if (delta > 0) { + thisObject.offset = thisObject.offset - STEP_OFFSET * morePower + if (thisObject.offset < MIN_OFFSET) { thisObject.offset = STEP_OFFSET } + } else { + thisObject.offset = thisObject.offset + STEP_OFFSET * morePower + if (thisObject.offset > MAX_OFFSET) { thisObject.offset = MAX_OFFSET } + } + + if ( + thisObject.offset <= +SNAP_THRESHOLD_OFFSET && + thisObject.offset >= -SNAP_THRESHOLD_OFFSET + ) { + event.offset = 0 + } else { + event.offset = thisObject.offset + } + + event.isUserAction = true + thisObject.container.eventHandler.raiseEvent('Rate Scale Offset Changed', event) + + saveObjectState() } else { - thisObject.value = thisObject.value + STEP_SIZE * morePower - if (thisObject.value > MAX_VALUE) { thisObject.value = MAX_VALUE } - } - event.value = thisObject.value - event.isUserAction = true - thisObject.container.eventHandler.raiseEvent('Height Percentage Changed', event) + if (event.buttons === 4) { morePower = 5 } // Mouse wheel pressed. + delta = event.wheelDelta + if (delta < 0) { + thisObject.value = thisObject.value - STEP_VALUE * morePower + if (thisObject.value < MIN_VALUE) { thisObject.value = MIN_VALUE } + } else { + thisObject.value = thisObject.value + STEP_VALUE * morePower + if (thisObject.value > MAX_VALUE) { thisObject.value = MAX_VALUE } + } + event.value = thisObject.value + event.isUserAction = true + thisObject.container.eventHandler.raiseEvent('Rate Scale Value Changed', event) - saveObjectState() + saveObjectState() + } } function getContainer (point) { @@ -141,6 +177,7 @@ function newRateScale () { let code = JSON.parse(thisObject.payload.node.code) code.value = thisObject.value / MAX_VALUE * 100 code.value = code.value.toFixed(2) + code.offset = thisObject.offset thisObject.payload.node.code = JSON.stringify(code) } catch (err) { // we ignore errors here since most likely they will be parsing errors. @@ -156,16 +193,30 @@ function newRateScale () { return } code.value = code.value / 100 * MAX_VALUE - if (code.value < STEP_SIZE) { code.value = STEP_SIZE } + if (code.value < MIN_VALUE) { code.value = MIN_VALUE } if (code.value > MAX_VALUE) { code.value = MAX_VALUE } if (code.value !== thisObject.value) { thisObject.value = code.value let event = {} event.value = thisObject.value - thisObject.container.eventHandler.raiseEvent('Height Percentage Changed', event) + thisObject.container.eventHandler.raiseEvent('Rate Scale Value Changed', event) } else { saveObjectState() + return + } + + if (code.offset < MIN_OFFSET) { code.offset = MIN_OFFSET } + if (code.offset > MAX_OFFSET) { code.offset = MAX_OFFSET } + + if (code.offset !== thisObject.offset) { + thisObject.offset = code.offset + let event = {} + event.offset = thisObject.offset + thisObject.container.eventHandler.raiseEvent('Rate Scale Offset Changed', event) + } else { + saveObjectState() + return } } catch (err) { // we ignore errors here since most likely they will be parsing errors. diff --git a/Scales/TimeFrameScale.js b/Scales/TimeFrameScale.js index 2f5c1984e..e6e49e99b 100644 --- a/Scales/TimeFrameScale.js +++ b/Scales/TimeFrameScale.js @@ -278,7 +278,7 @@ function newTimeFrameScale () { // console.log('NEW TIME FRAME LABEL', timeFrameLabel) let event = {} event.timeFrame = thisObject.timeFrame - thisObject.container.eventHandler.raiseEvent('Time Frame Changed', event) + thisObject.container.eventHandler.raiseEvent('Time Frame Value Changed', event) window.localStorage.setItem('Current Time Frame', JSON.stringify({filePeriodIndex: filePeriodIndex, timeFrameIndex: timeFrameIndex})) } diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js index fe078815f..d6a4de797 100644 --- a/Scales/TimeScale.js +++ b/Scales/TimeScale.js @@ -17,7 +17,7 @@ function newTimeScale () { } const DEFAULT_VALUE = 1 - const STEP_SIZE = 1 + const STEP_VALUE = 1 const MIN_VALUE = 1 const MAX_VALUE = 400 @@ -78,7 +78,7 @@ function newTimeScale () { let event = {} event.value = thisObject.value - thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', event) + thisObject.container.eventHandler.raiseEvent('Time Scale Value Changed', event) } function onMouseOverSomeTimeMachineContainer (event) { @@ -117,16 +117,16 @@ function newTimeScale () { delta = event.wheelDelta if (delta < 0) { - thisObject.value = thisObject.value - STEP_SIZE * morePower - if (thisObject.value < MIN_VALUE) { thisObject.value = STEP_SIZE } + thisObject.value = thisObject.value - STEP_VALUE * morePower + if (thisObject.value < MIN_VALUE) { thisObject.value = MIN_VALUE } } else { - thisObject.value = thisObject.value + STEP_SIZE * morePower + thisObject.value = thisObject.value + STEP_VALUE * morePower if (thisObject.value > MAX_VALUE) { thisObject.value = MAX_VALUE } } event.value = thisObject.value event.isUserAction = true - thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', event) + thisObject.container.eventHandler.raiseEvent('Time Scale Value Changed', event) saveObjectState() } @@ -157,14 +157,14 @@ function newTimeScale () { return } code.value = code.value / 100 * MAX_VALUE - if (code.value < MIN_VALUE) { code.value = STEP_SIZE } + if (code.value < MIN_VALUE) { code.value = MIN_VALUE } if (code.value > MAX_VALUE) { code.value = MAX_VALUE } if (code.value !== thisObject.value) { thisObject.value = code.value let event = {} event.value = thisObject.value - thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', event) + thisObject.container.eventHandler.raiseEvent('Time Scale Value Changed', event) } else { saveObjectState() }