Viewport Related Refactoring

Canvas.js

@@ -125,12 +125,12 @@ function newCanvas () {
       animation.addCallBackFunction('Chart Space Physics', thisObject.chartSpace.physics)
       animation.addCallBackFunction('Strategy Space Physics', thisObject.designerSpace.physics)
       animation.addCallBackFunction('Panels Space Physics', thisObject.panelsSpace.physics)
+      animation.addCallBackFunction('ViewPort physics', viewPort.physics)
 
       /* Spcaces Drawing */
       animation.addCallBackFunction('Floating Space Draw', thisObject.floatingSpace.draw)
       animation.addCallBackFunction('Chart Space Draw', thisObject.chartSpace.draw)
       animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw)
-      animation.addCallBackFunction('ViewPort Animate', viewPort.animate)
       animation.addCallBackFunction('CockpitSpace Draw', thisObject.cockpitSpace.draw)
       animation.addCallBackFunction('Designer Space Draw', thisObject.designerSpace.draw)
       animation.addCallBackFunction('Top Space Draw', thisObject.topSpace.draw)

ChartsSpace/TimelineChart.js

@@ -35,8 +35,8 @@ function newTimelineChart () {
 
   let layersPanelHandle
 
-  let onOffsetChangedEventSuscriptionId
-  let onZoomChangedEventSuscriptionId
+  let onViewportPositionChangedEventSuscriptionId
+  let onViewportZoomChangedEventSuscriptionId
   let onMouseOverEventSuscriptionId
   let onMouseNotOverEventSuscriptionId
   let timeFrameScaleEventSuscriptionId
@@ -72,8 +72,8 @@ function newTimelineChart () {
       finalizeTimeFrameScale()
     }
 
-    viewPort.eventHandler.stopListening(onOffsetChangedEventSuscriptionId)
-    viewPort.eventHandler.stopListening(onZoomChangedEventSuscriptionId)
+    viewPort.eventHandler.stopListening(onViewportPositionChangedEventSuscriptionId)
+    viewPort.eventHandler.stopListening(onViewportZoomChangedEventSuscriptionId)
     thisObject.container.eventHandler.stopListening(onMouseOverEventSuscriptionId)
     thisObject.container.eventHandler.stopListening(onMouseNotOverEventSuscriptionId)
 
@@ -132,8 +132,8 @@ function newTimelineChart () {
     datetime = NEW_SESSION_INITIAL_DATE
 
      /* Event Subscriptions - we need this events to be fired first here and then in active Plotters. */
-    onOffsetChangedEventSuscriptionId = viewPort.eventHandler.listenToEvent('Offset Changed', onOffsetChanged)
-    onZoomChangedEventSuscriptionId = viewPort.eventHandler.listenToEvent('Zoom Changed', onZoomChanged)
+    onViewportPositionChangedEventSuscriptionId = viewPort.eventHandler.listenToEvent('Position Changed', onViewportPositionChanged)
+    onViewportZoomChangedEventSuscriptionId = viewPort.eventHandler.listenToEvent('Zoom Changed', onViewportZoomChanged)
 
     onMouseOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
     onMouseNotOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
@@ -246,11 +246,13 @@ function newTimelineChart () {
     }
   }
 
-  function onZoomChanged (event) {
-    recalculateCurrentDatetime()
+  function onViewportZoomChanged (event) {
+    if (thisObject.container.frame.isInViewPort()) {
+      recalculateCurrentDatetime()
+    }
   }
 
-  function onOffsetChanged () {
+  function onViewportPositionChanged () {
     if (thisObject.container.frame.isInViewPort()) {
       recalculateCurrentDatetime()
     }

ChartsSpace/ViewPort.js

@@ -41,7 +41,7 @@ function newViewPort () {
     fitIntoVisibleArea: fitIntoVisibleArea,
     displace: displace,
     displaceTarget: displaceTarget,
-    animate: animate,
+    physics: physics,
     draw: draw,
     raiseEvents: raiseEvents,
     resize: resize,
@@ -50,17 +50,17 @@ function newViewPort () {
 
   let increment = 0.035
 
-  let offset = {
+  let position = {
     x: 0,
     y: 0
   }
 
-  var targetOffset = {
+  let targetPosition = {
     x: 0,
     y: 0
   }
 
-  let offsetIncrement = {
+  let positionIncrement = {
     x: 0,
     y: 0
   }
@@ -106,13 +106,17 @@ function newViewPort () {
 
   function raiseEvents () {
     let event = {
-      newOffset: offset
+      newPosition: position
     }
 
-    thisObject.eventHandler.raiseEvent('Offset Changed', event)
+    thisObject.eventHandler.raiseEvent('Position Changed', event)
   }
 
-  function animate () {
+  function physics () {
+    animationPhysics()
+  }
+
+  function animationPhysics () {
     if (thisObject.zoomLevel < thisObject.zoomTargetLevel) {
       if (thisObject.zoomTargetLevel - thisObject.zoomLevel < ANIMATION_INCREMENT) {
         ANIMATION_INCREMENT = Math.abs(thisObject.zoomTargetLevel - thisObject.zoomLevel)
@@ -129,43 +133,43 @@ function newViewPort () {
       changeZoom(thisObject.zoomLevel + ANIMATION_INCREMENT, thisObject.zoomLevel)
     }
 
-    if (offsetIncrement.y !== 0) {
-      if (Math.trunc(Math.abs(targetOffset.y - offset.y) * 1000) >= Math.trunc(Math.abs(offsetIncrement.y) * 1000)) {
-        offset.y = offset.y + offsetIncrement.y
+    if (positionIncrement.y !== 0) {
+      if (Math.trunc(Math.abs(targetPosition.y - position.y) * 1000) >= Math.trunc(Math.abs(positionIncrement.y) * 1000)) {
+        position.y = position.y + positionIncrement.y
 
-              // console.log("offset.y changed to " + offset.y)
+              // console.log("position.y changed to " + position.y)
       } else {
-        offsetIncrement.y = 0
+        positionIncrement.y = 0
       }
     }
   }
 
   function displace (displaceVector, recalculate) {
-    offset.x = offset.x + displaceVector.x
-    offset.y = offset.y + displaceVector.y
+    position.x = position.x + displaceVector.x
+    position.y = position.y + displaceVector.y
 
     saveObjectState()
 
     let event = {
-      newOffset: offset,
+      newPosition: position,
       recalculate: recalculate
     }
 
-    thisObject.eventHandler.raiseEvent('Offset Changed', event)
+    thisObject.eventHandler.raiseEvent('Position Changed', event)
 
-      // console.log("displace produced new Offset x = " + offset.x + " y = " + offset.y);
+      // console.log("displace produced new Position x = " + position.x + " y = " + position.y);
   }
 
   function displaceTarget (displaceVector) {
-    targetOffset.x = targetOffset.x + displaceVector.x
-    targetOffset.y = targetOffset.y + displaceVector.y
+    targetPosition.x = targetPosition.x + displaceVector.x
+    targetPosition.y = targetPosition.y + displaceVector.y
 
-    offsetIncrement = {
-      x: (targetOffset.x - offset.x) / 10,
-      y: (targetOffset.y - offset.y) / 10
+    positionIncrement = {
+      x: (targetPosition.x - position.x) / 10,
+      y: (targetPosition.y - position.y) / 10
     }
 
-      // console.log("displaceTarget x = " + targetOffset.x + " y = " + targetOffset.y);
+      // console.log("displaceTarget x = " + targetPosition.x + " y = " + targetPosition.y);
   }
 
   function newZoomLevel (level) {
@@ -178,7 +182,7 @@ function newViewPort () {
 
     let event = {
       newLevel: thisObject.zoomTargetLevel,
-      newOffset: offset,
+      newPosition: position,
       type: undefined
     }
 
@@ -250,7 +254,7 @@ function newViewPort () {
 
     let event = {
       newLevel: thisObject.zoomTargetLevel,
-      newOffset: offset,
+      newPosition: position,
       type: undefined
     }
 
@@ -269,15 +273,15 @@ function newViewPort () {
     let mouseNoZoom = unzoomThisPoint(thisObject.mousePosition, oldLevel)
     let newMouse = zoomThisPoint(mouseNoZoom, newLevel)
 
-    offset.x = offset.x - newMouse.x + thisObject.mousePosition.x
-    offset.y = offset.y - newMouse.y + thisObject.mousePosition.y
+    position.x = position.x - newMouse.x + thisObject.mousePosition.x
+    position.y = position.y - newMouse.y + thisObject.mousePosition.y
 
     saveObjectState()
 
-    targetOffset.x = offset.x
-    targetOffset.y = offset.y
+    targetPosition.x = position.x
+    targetPosition.y = position.y
 
-    offsetIncrement = {
+    positionIncrement = {
       x: 0,
       y: 0
     }
@@ -323,11 +327,11 @@ function newViewPort () {
     let zoomFactor = increment // + increment * thisObject.zoomLevel / 100;
 
     if (level === undefined) {
-      point.x = point.x * (1 + zoomFactor * thisObject.zoomLevel) + offset.x
-      point.y = point.y * (1 + zoomFactor * thisObject.zoomLevel) + offset.y
+      point.x = point.x * (1 + zoomFactor * thisObject.zoomLevel) + position.x
+      point.y = point.y * (1 + zoomFactor * thisObject.zoomLevel) + position.y
     } else {
-      point.x = point.x * (1 + zoomFactor * level) + offset.x
-      point.y = point.y * (1 + zoomFactor * level) + offset.y
+      point.x = point.x * (1 + zoomFactor * level) + position.x
+      point.y = point.y * (1 + zoomFactor * level) + position.y
     }
 
     return point
@@ -339,13 +343,13 @@ function newViewPort () {
 
     if (level === undefined) {
       pointWithoutZoom = {
-        x: (pointWithZoom.x - offset.x) / (1 + zoomFactor * thisObject.zoomLevel),
-        y: (pointWithZoom.y - offset.y) / (1 + zoomFactor * thisObject.zoomLevel)
+        x: (pointWithZoom.x - position.x) / (1 + zoomFactor * thisObject.zoomLevel),
+        y: (pointWithZoom.y - position.y) / (1 + zoomFactor * thisObject.zoomLevel)
       }
     } else {
       pointWithoutZoom = {
-        x: (pointWithZoom.x - offset.x) / (1 + zoomFactor * level),
-        y: (pointWithZoom.y - offset.y) / (1 + zoomFactor * level)
+        x: (pointWithZoom.x - position.x) / (1 + zoomFactor * level),
+        y: (pointWithZoom.y - position.y) / (1 + zoomFactor * level)
       }
     }
     return pointWithoutZoom
@@ -373,8 +377,8 @@ function newViewPort () {
     let squareWidth = (thisObject.visibleArea.bottomRight.x - thisObject.visibleArea.bottomLeft.x) / step
     squareWidth = squareWidth + squareWidth * increment * thisObject.zoomLevel
 
-    let startingX = offset.x - Math.trunc(offset.x / squareWidth) * squareWidth
-    let startingY = offset.y - Math.trunc(offset.y / squareWidth) * squareWidth
+    let startingX = position.x - Math.trunc(position.x / squareWidth) * squareWidth
+    let startingY = position.y - Math.trunc(position.y / squareWidth) * squareWidth
     let lineWidth = 0.4 + thisObject.zoomLevel / 100
     lineWidth = lineWidth.toFixed(2)
 
@@ -428,7 +432,7 @@ function newViewPort () {
   }
 
   function saveObjectState () {
-    objectStorage.offset = offset
+    objectStorage.position = position
     objectStorage.zoomLevel = thisObject.zoomLevel
     window.localStorage.setItem(MODULE_NAME, JSON.stringify(objectStorage))
   }
@@ -437,12 +441,12 @@ function newViewPort () {
     let objectStorageString = window.localStorage.getItem(MODULE_NAME)
     if (objectStorageString !== null && objectStorageString !== '') {
       objectStorage = JSON.parse(objectStorageString)
-      offset = objectStorage.offset
+      position = objectStorage.position
       thisObject.zoomLevel = objectStorage.zoomLevel
       thisObject.zoomTargetLevel = objectStorage.zoomLevel
       INITIAL_TIME_PERIOD = recalculatePeriod(thisObject.zoomLevel)
     } else { // Setting default values for first session
-      offset = {
+      position = {
         x: 0,
         y: 0
       }

Plotter.js

@@ -117,8 +117,8 @@ function newPlotter () {
       fileCursor = dailyFiles.getFileCursor(pTimeFrame)
 
       /* Listen to the necesary events. */
-      zoomChangedEventSubscriptionId = viewPort.eventHandler.listenToEvent('Zoom Changed', onZoomChanged)
-      offsetChangedEventSubscriptionId = viewPort.eventHandler.listenToEvent('Offset Changed', onOffsetChanged)
+      zoomChangedEventSubscriptionId = viewPort.eventHandler.listenToEvent('Zoom Changed', onViewportZoomChanged)
+      offsetChangedEventSubscriptionId = viewPort.eventHandler.listenToEvent('Position Changed', onViewportPositionChanged)
       dragFinishedEventSubscriptionId = canvas.eventHandler.listenToEvent('Drag Finished', onDragFinished)
       marketFilesUpdatedEventSubscriptionId = marketFiles.eventHandler.listenToEvent('Files Updated', onMarketFilesUpdated)
       dailyFilesUpdatedEventSubscriptionId = dailyFiles.eventHandler.listenToEvent('Files Updated', onDailyFilesUpdated)
@@ -769,12 +769,12 @@ function newPlotter () {
     }
   }
 
-  function onZoomChanged (event) {
+  function onViewportZoomChanged (event) {
     try {
       mustRecalculateDataPoints = true
       recalculate()
     } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] onZoomChanged -> err = ' + err.stack) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] onViewportZoomChanged -> err = ' + err.stack) }
     }
   }
 
@@ -790,7 +790,7 @@ function newPlotter () {
     recalculateAll(event)
   }
 
-  function onOffsetChanged (event) {
+  function onViewportPositionChanged (event) {
     recalculateAll(event)
   }
 

Scales/TimeFrameScale.js

@@ -28,7 +28,7 @@ function newTimeFrameScale () {
   let timeFrameLabel = '24-hs'
 
   let onMouseWheelEventSubscriptionId
-  let onZoomChangedEventSubscriptionId
+  let onViewportZoomChangedEventSubscriptionId
   let onMouseOverEventSubscriptionId
   let onMouseNotOverEventSubscriptionId
 
@@ -59,7 +59,7 @@ function newTimeFrameScale () {
 
   function finalize () {
     thisObject.container.eventHandler.stopListening(onMouseWheelEventSubscriptionId)
-    viewPort.eventHandler.stopListening(onZoomChangedEventSubscriptionId)
+    viewPort.eventHandler.stopListening(onViewportZoomChangedEventSubscriptionId)
     thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
     thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
 
@@ -77,7 +77,7 @@ function newTimeFrameScale () {
     newTimeFrame()
 
     onMouseWheelEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
-    onZoomChangedEventSubscriptionId = viewPort.eventHandler.listenToEvent('Zoom Changed', onZoomChanged)
+    onViewportZoomChangedEventSubscriptionId = viewPort.eventHandler.listenToEvent('Zoom Changed', onViewportZoomChanged)
     onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
     onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
   }
@@ -177,7 +177,7 @@ function newTimeFrameScale () {
     thisObject.container.frame.position.y = timePoint.y - thisObject.container.frame.height
   }
 
-  function onZoomChanged (event) {
+  function onViewportZoomChanged (event) {
     if (event !== undefined) { // it is undefined when the level is just being animated.
       let currentTimeFrame = thisObject.timeFrame
       let timeFrame = recalculatePeriod(event.newLevel)