rate scale offset implemented

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)
     }

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)
     }
   }

Container.js

@@ -61,6 +61,8 @@ function newContainer () {
 
       thisObject.parentContainer = undefined
       thisObject.eventHandler.finalize()
+
+      thisObject.frame.finalize()
     }
   }
 

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

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.

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}))
   }
 

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()
       }