Scaling on X working

BottomSpace/ChartAspectRatio.js

@@ -17,7 +17,7 @@
 
    container.isDraggeable = false
    container.isClickeable = false
-   container.isWheeleable = true
+   container.isWheelable = true
 
    thisObject.aspectRatio = {}
 

Canvas.js

@@ -548,7 +548,7 @@ function newCanvas () {
 
       container = thisObject.chartSpace.getContainer(point)
 
-      if (container !== undefined && container.isClickeable === true) {
+      if (container !== undefined) {
         container.eventHandler.raiseEvent('onMouseOver', point)
         return
       }
@@ -594,7 +594,7 @@ function newCanvas () {
 
       let bottomContainer = canvas.bottomSpace.getContainer({ x: point.x, y: point.y })
 
-      if (bottomContainer !== undefined && bottomContainer.isWheeleable === true) {
+      if (bottomContainer !== undefined && bottomContainer.isWheelable === true) {
         bottomContainer.eventHandler.raiseEvent('Mouse Wheel', event)
         return false  // This instructs the browser not to take the event and scroll the page.
       }
@@ -603,7 +603,7 @@ function newCanvas () {
 
       let chartContainer = canvas.chartSpace.getContainer({ x: point.x, y: point.y })
 
-      if (chartContainer !== undefined && chartContainer.isWheeleable === true) {
+      if (chartContainer !== undefined && chartContainer.isWheelable === true) {
         chartContainer.eventHandler.raiseEvent('Mouse Wheel', event)
         return false  // This instructs the browser not to take the event and scroll the page.
       } else {

Container.js

@@ -43,6 +43,7 @@ function newContainer () {
     thisObject.frame.parentFrame = parentContainer.frame
     thisObject.parentContainer = parentContainer
     thisObject.parentContainer.eventHandler.listenToEvent('Dimmensions Changed', onParentDimmensionsChanged)
+    thisObject.parentContainer.eventHandler.listenToEvent('onMouseOver', onMouseOver)
 
     if (connectedToParentWidth) {
       thisObject.frame.width = thisObject.parentContainer.frame.width
@@ -67,4 +68,8 @@ function newContainer () {
       thisObject.eventHandler.raiseEvent('Dimmensions Changed', event)
     }
   }
+
+  function onMouseOver (event) {
+    thisObject.eventHandler.raiseEvent('onMouseOver', event)
+  }
 }

Dashboard.js

@@ -3,7 +3,7 @@ let canvas
 let markets
 let ecosystem = newEcosystem()
 let INITIAL_ZOOM_LEVEL = -26       // This is the zoom level at the view port in which the APP starts.
-let INITIAL_TIME_PERIOD = recalculatePeriod(INITIAL_ZOOM_LEVEL)  // This value will be overwritten at the viewPort.initialize if the user had a prevous session with this same browser.
+let INITIAL_TIME_PERIOD = recalculatePeriod(MIN_ZOOM_LEVEL)  // This value will be overwritten at the viewPort.initialize if the user had a prevous session with this same browser.
 let viewPort = newViewPort()
 
 function newDashboard () {

Globals.js

@@ -36,6 +36,7 @@ UI_FONT = {
 };
 
 FONT_ASPECT_RATIO = 0.45;
+const MIN_ZOOM_LEVEL = -28.25
 
 /* User Interface Panels */
 

Scales/RightScale.js

@@ -20,7 +20,7 @@
 
    container.isDraggeable = false
    container.isClickeable = false
-   container.isWheeleable = true
+   container.isWheelable = true
 
    return thisObject
 

Scales/TimeScale.js

@@ -1,4 +1,11 @@
 function newTimeScale () {
+  const MODULE_NAME = 'Time Scale'
+  const INFO_LOG = false
+  const INTENSIVE_LOG = false
+  const ERROR_LOG = true
+  const logger = newWebDebugLog()
+  logger.fileName = MODULE_NAME
+
   let thisObject = {
     container: undefined,
     draw: draw,
@@ -10,7 +17,7 @@ function newTimeScale () {
   const RIGHT_MARGIN = 50
 
   let container = newContainer()
-  container.initialize()
+  container.initialize(MODULE_NAME)
   thisObject.container = container
 
   thisObject.container.frame.width = viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.topLeft.x
@@ -21,7 +28,7 @@ function newTimeScale () {
 
   container.isDraggeable = false
   container.isClickeable = false
-  container.isWheeleable = true
+  container.isWheelable = true
 
   return thisObject
 

TimelineChart.js

@@ -63,12 +63,14 @@
      try {
        if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') }
 
-       thisObject.container.eventHandler.listenToEvent('Dimmensions Changed', onContainerDimmensionsChanged)
-
-       function onContainerDimmensionsChanged (event) {
+       thisObject.container.eventHandler.listenToEvent('Dimmensions Changed', function (event) {
          recalculateScale()
-         moveToUserPosition(thisObject.container, timeLineCoordinateSystem)
-       }
+         moveToUserPosition(thisObject.container, timeLineCoordinateSystem, false, true)
+       })
+
+       thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) {
+         saveUserPosition(thisObject.container, timeLineCoordinateSystem, event)
+       })
 
             /* We load the logow we will need for the background. */
        exchange = pExchange
@@ -185,7 +187,7 @@
 
        recalculateCurrentDatetime()
 
-       saveUserPosition(thisObject.container, timeLineCoordinateSystem)
+       // saveUserPosition(thisObject.container, timeLineCoordinateSystem)
      }
    }
 
@@ -208,7 +210,7 @@
      if (initializationReady === true) {
        if (thisObject.container.frame.isInViewPort()) {
          recalculateCurrentDatetime()
-         saveUserPosition(thisObject.container, timeLineCoordinateSystem)
+         // saveUserPosition(thisObject.container, timeLineCoordinateSystem)
        }
      }
    }

Utilities.js

@@ -59,15 +59,17 @@ function getMilisecondsFromPoint (point, container, timeLineCoordinateSystem) {
   return point.x
 }
 
-function saveUserPosition (container, timeLineCoordinateSystem) {
-  let centerPoint = {
-    x: (viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.topLeft.x) / 2,
-    y: (viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topLeft.y) / 2
+function saveUserPosition (container, timeLineCoordinateSystem, position) {
+  if (position === undefined) {
+    position = {
+      x: (viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.topLeft.x) / 2,
+      y: (viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topLeft.y) / 2
+    }
   }
 
   let userPosition = {
-    date: getDateFromPoint(centerPoint, container, timeLineCoordinateSystem),
-    rate: getRateFromPoint(centerPoint, container, timeLineCoordinateSystem),
+    date: getDateFromPoint(position, container, timeLineCoordinateSystem),
+    rate: getRateFromPoint(position, container, timeLineCoordinateSystem),
     market: DEFAULT_MARKET,
     zoom: viewPort.zoomTargetLevel
   }
@@ -75,7 +77,7 @@ function saveUserPosition (container, timeLineCoordinateSystem) {
   window.localStorage.setItem('userPosition', JSON.stringify(userPosition))
 }
 
-function getUserPosition () {
+function getUserPosition (timeLineCoordinateSystem) {
   let savedPosition = window.localStorage.getItem('userPosition')
   let userPosition
 
@@ -98,8 +100,8 @@ function getUserPosition () {
   return userPosition
 }
 
-function moveToUserPosition (container, timeLineCoordinateSystem) {
-  let userPosition = getUserPosition()
+function moveToUserPosition (container, timeLineCoordinateSystem, ignoreX, ignoreY) {
+  let userPosition = getUserPosition(timeLineCoordinateSystem)
 
   viewPort.newZoomLevel(userPosition.zoom)
   INITIAL_TIME_PERIOD = recalculatePeriod(userPosition.zoom)
@@ -127,6 +129,9 @@ function moveToUserPosition (container, timeLineCoordinateSystem) {
     y: centerPoint.y - targetPoint.y
   }
 
+  if (ignoreX) { displaceVector.x = 0 }
+  if (ignoreY) { displaceVector.y = 0 }
+
   viewPort.displace(displaceVector)
 }
 

ViewPort.js

@@ -7,7 +7,6 @@ function newViewPort () {
   const BOTTOM_MARGIN = 15 + BOTTOM_SPACE_HEIGHT
   const LEFT_MARGIN = 50
   const RIGHT_MARGIN = 50
-  const MIN_ZOOM_LEVEL = -28.25
 
   let thisObject = {
     visibleArea: undefined,