x axis auto scale implemented

ChartingSpace/CoordinateSystem.js

@@ -15,9 +15,12 @@ function newCoordinateSystem () {
     maxWidth: undefined,
     scale: undefined,
     eventHandler: undefined,
+    autoMinXScale: true,
+    autoMaxXScale: true,
     autoMinYScale: true,
     autoMaxYScale: true,
     physics: physics,
+    reportXValue: reportXValue,
     reportYValue: reportYValue,
     zoomX: zoomX,
     zoomY: zoomY,
@@ -48,8 +51,12 @@ function newCoordinateSystem () {
   thisObject.eventHandler = newEventHandler()
   thisObject.eventHandler.name = 'Coordinate System'
 
-  let newMax = -VERY_LARGE_NUMBER
-  let newMin = VERY_LARGE_NUMBER
+  let newXMax = -VERY_LARGE_NUMBER
+  let newXMin = VERY_LARGE_NUMBER
+  let noXValueReported = true
+
+  let newYMax = -VERY_LARGE_NUMBER
+  let newYMin = VERY_LARGE_NUMBER
   let noYValueReported = true
 
   return thisObject
@@ -74,45 +81,79 @@ function newCoordinateSystem () {
   }
 
   function physics () {
-    if ((thisObject.autoMinYScale === true || thisObject.autoMaxYScale === true) && noYValueReported === false) {
-      let mustRecalculate = false
+    let mustRecalculate = false
 
-      if (thisObject.autoMaxYScale === true && thisObject.max.y !== newMax) {
-        thisObject.max.y = newMax
+    if ((thisObject.autoMinXScale === true || thisObject.autoMaxXScale === true) && noXValueReported === false) {
+      if (thisObject.autoMaxXScale === true && thisObject.max.x !== newXMax) {
+        thisObject.max.x = newXMax
+        mustRecalculate = true
+      }
+
+      if (thisObject.autoMaxXScale === true) {
+        newXMax = -VERY_LARGE_NUMBER
+      }
+
+      if (thisObject.autoMinXScale === true && thisObject.min.x !== newXMin) {
+        thisObject.min.x = newXMin
+        newXMin = VERY_LARGE_NUMBER
+        mustRecalculate = true
+      }
+
+      if (thisObject.autoMinXScale === true) {
+        newXMin = VERY_LARGE_NUMBER
+      }
+
+      /* Reseting this to start over at each cycle. */
+      noXValueReported = true
+    }
+
+    if ((thisObject.autoMinYScale === true || thisObject.autoMaxYScale === true) && noYValueReported === false) {
+      if (thisObject.autoMaxYScale === true && thisObject.max.y !== newYMax) {
+        thisObject.max.y = newYMax
         mustRecalculate = true
       }
 
       if (thisObject.autoMaxYScale === true) {
-        newMax = -VERY_LARGE_NUMBER
+        newYMax = -VERY_LARGE_NUMBER
       }
 
-      if (thisObject.autoMinYScale === true && thisObject.min.y !== newMin) {
-        thisObject.min.y = newMin
-        newMin = VERY_LARGE_NUMBER
+      if (thisObject.autoMinYScale === true && thisObject.min.y !== newYMin) {
+        thisObject.min.y = newYMin
+        newYMin = VERY_LARGE_NUMBER
         mustRecalculate = true
       }
 
       if (thisObject.autoMinYScale === true) {
-        newMin = VERY_LARGE_NUMBER
-      }
-
-      if (mustRecalculate === true) {
-        recalculateScale()
+        newYMin = VERY_LARGE_NUMBER
       }
 
       /* Reseting this to start over at each cycle. */
-
       noYValueReported = true
     }
+
+    if (mustRecalculate === true) {
+      recalculateScale()
+    }
+  }
+
+  function reportXValue (value) {
+    if (thisObject.autoMinXScale === true) {
+      if (value < newXMin) { newXMin = value }
+      noXValueReported = false
+    }
+    if (thisObject.autoMaxXScale === true) {
+      if (value > newXMax) { newXMax = value }
+      noXValueReported = false
+    }
   }
 
   function reportYValue (value) {
     if (thisObject.autoMinYScale === true) {
-      if (value < newMin) { newMin = value }
+      if (value < newYMin) { newYMin = value }
       noYValueReported = false
     }
     if (thisObject.autoMaxYScale === true) {
-      if (value > newMax) { newMax = value }
+      if (value > newYMax) { newYMax = value }
       noYValueReported = false
     }
   }

ChartingSpace/TimeMachine.js

@@ -54,6 +54,7 @@ function newTimeMachine () {
   let rateScaleMouseOverEventSuscriptionId
   let timeFrameScaleEventSuscriptionId
   let timeFrameScaleMouseOverEventSuscriptionId
+  let onScaleChangedEventSubscriptionId
 
   setupContainer()
   return thisObject
@@ -73,6 +74,7 @@ function newTimeMachine () {
   function finalize () {
     canvas.chartingSpace.viewport.eventHandler.stopListening(onViewportPositionChangedEventSuscriptionId)
     canvas.chartingSpace.viewport.eventHandler.stopListening(onViewportZoomChangedEventSuscriptionId)
+    timeMachineCoordinateSystem.eventHandler.stopListening(onScaleChangedEventSubscriptionId)
 
     if (thisObject.timeScale !== undefined) {
       finalizeTimeScale()
@@ -146,9 +148,9 @@ function newTimeMachine () {
 
     onMouseOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
     onMouseNotOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
-
     onViewportPositionChangedEventSuscriptionId = canvas.chartingSpace.viewport.eventHandler.listenToEvent('Position Changed', onViewportPositionChanged)
     onViewportZoomChangedEventSuscriptionId = canvas.chartingSpace.viewport.eventHandler.listenToEvent('Zoom Changed', onViewportZoomChanged)
+    onScaleChangedEventSubscriptionId = timeMachineCoordinateSystem.eventHandler.listenToEvent('Scale Changed', onScaleChanged)
 
     thisObject.edgeEditor = newEdgeEditor()
     thisObject.edgeEditor.initialize(timeMachineCoordinateSystem)
@@ -262,6 +264,10 @@ function newTimeMachine () {
       if (container !== undefined) {
         if (container.isForThisPurpose(purpose)) {
           return container
+        } else {
+          if (purpose === GET_CONTAINER_PURPOSE.DRAGGING && container.isClickeable === true) {
+            return container
+          }
         }
       }
     }
@@ -316,6 +322,10 @@ function newTimeMachine () {
     }
   }
 
+  function onScaleChanged () {
+    recalculateCurrentDatetime()
+  }
+
   function recalculateCurrentDatetime () {
      /*
      The view port was moved or the view port zoom level was changed and the center of the screen points to a different datetime that we

Globals.js

@@ -167,7 +167,7 @@ const _1_MINUTE_IN_MILISECONDS = 1 * 60 * 1000;
 let NEW_SESSION_INITIAL_DATE = new Date();  // This value will be overwritten at the canvas.chartingSpace.viewport.initialize if the user had a prevous session with this same browser.
 let INITIAL_ZOOM_LEVEL = -28.25       // This is the zoom level at the view port in which the APP starts.
 let INITIAL_TIME_PERIOD = ONE_DAY_IN_MILISECONDS  // This value will be overwritten at the canvas.chartingSpace.viewport.initialize if the user had a prevous session with this same browser.
-let VERY_LARGE_NUMBER = 100000000000
+let VERY_LARGE_NUMBER = 100000000000000
 
 let CURRENT_TOP_MARGIN = window.canvasApp.topMargin
 let AT_FULL_SCREEN_MODE = false

Scales/AutoScaleButton.js

@@ -21,7 +21,7 @@ function newAutoScaleButton () {
 
   let onMouseClickEventSuscriptionId
   let coordinateSystem
-
+  let axis
   return thisObject
 
   function finalize () {
@@ -33,23 +33,42 @@ function newAutoScaleButton () {
     thisObject.panels = undefined
 
     coordinateSystem = undefined
+    axis = undefined
   }
 
-  function initialize (pCoordinateSystem) {
+  function initialize (pAxis, pCoordinateSystem) {
+    axis = pAxis
     coordinateSystem = pCoordinateSystem
     thisObject.autoMinScale = coordinateSystem.autoMinYScale
     thisObject.autoMaxScale = coordinateSystem.autoMaxYScale
 
-    thisObject.container.frame.width = 25
-    thisObject.container.frame.height = 25
+    switch (axis) {
+      case 'X': {
+        thisObject.container.frame.width = 20
+        thisObject.container.frame.height = 20
 
-    let position = {
-      x: thisObject.container.parentContainer.frame.width * 5 / 8,
-      y: thisObject.container.parentContainer.frame.height / 2 - thisObject.container.frame.height / 2
+        let position = {
+          x: thisObject.container.parentContainer.frame.width / 2 - thisObject.container.frame.width / 2,
+          y: thisObject.container.parentContainer.frame.height / 2 - thisObject.container.frame.height / 2
+        }
+
+        thisObject.container.frame.position = position
+        break
+      }
+      case 'Y': {
+        thisObject.container.frame.width = 20
+        thisObject.container.frame.height = 20
+
+        let position = {
+          x: thisObject.container.parentContainer.frame.width / 2 - thisObject.container.frame.width / 2,
+          y: thisObject.container.parentContainer.frame.height / 2 - thisObject.container.frame.height / 2
+        }
+
+        thisObject.container.frame.position = position
+        break
+      }
     }
 
-    thisObject.container.frame.position = position
-
     /* Lets listen to our own events to react when we have a Mouse Click */
     onMouseClickEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
   }
@@ -81,8 +100,19 @@ function newAutoScaleButton () {
     }
 
     function update () {
-      coordinateSystem.autoMinYScale = thisObject.autoMinScale
-      coordinateSystem.autoMaxYScale = thisObject.autoMaxScale
+      switch (axis) {
+        case 'X': {
+          coordinateSystem.autoMinXScale = thisObject.autoMinScale
+          coordinateSystem.autoMaxXScale = thisObject.autoMaxScale
+          break
+        }
+        case 'Y': {
+          coordinateSystem.autoMinYScale = thisObject.autoMinScale
+          coordinateSystem.autoMaxYScale = thisObject.autoMaxScale
+          break
+        }
+      }
+
       coordinateSystem.recalculateScale()
     }
   }
@@ -95,19 +125,39 @@ function newAutoScaleButton () {
 
   function draw () {
     let icon
-    if (thisObject.autoMinScale === false && thisObject.autoMaxScale === false) {
-      icon = canvas.designSpace.iconCollection.get('toggle-auto-scale-manual')
+    switch (axis) {
+      case 'X': {
+        if (thisObject.autoMinScale === false && thisObject.autoMaxScale === false) {
+          icon = canvas.designSpace.iconCollection.get('toggle-auto-time-scale-manual')
+        }
+        if (thisObject.autoMinScale === true && thisObject.autoMaxScale === false) {
+          icon = canvas.designSpace.iconCollection.get('toggle-auto-time-scale-auto-min')
+        }
+        if (thisObject.autoMinScale === false && thisObject.autoMaxScale === true) {
+          icon = canvas.designSpace.iconCollection.get('toggle-auto-time-scale-auto-max')
+        }
+        if (thisObject.autoMinScale === true && thisObject.autoMaxScale === true) {
+          icon = canvas.designSpace.iconCollection.get('toggle-auto-time-scale-auto-min-max')
+        }
+        drawIcon(icon, 6 / 8, 0, 0, 28, 12, thisObject.container.parentContainer)
+        break
+      }
+      case 'Y': {
+        if (thisObject.autoMinScale === false && thisObject.autoMaxScale === false) {
+          icon = canvas.designSpace.iconCollection.get('toggle-auto-scale-manual')
+        }
+        if (thisObject.autoMinScale === true && thisObject.autoMaxScale === false) {
+          icon = canvas.designSpace.iconCollection.get('toggle-auto-scale-auto-min')
+        }
+        if (thisObject.autoMinScale === false && thisObject.autoMaxScale === true) {
+          icon = canvas.designSpace.iconCollection.get('toggle-auto-scale-auto-max')
+        }
+        if (thisObject.autoMinScale === true && thisObject.autoMaxScale === true) {
+          icon = canvas.designSpace.iconCollection.get('toggle-auto-scale-auto-min-max')
+        }
+        drawIcon(icon, 6 / 8, 0, 0, 28, 12, thisObject.container.parentContainer)
+        break
+      }
     }
-    if (thisObject.autoMinScale === true && thisObject.autoMaxScale === false) {
-      icon = canvas.designSpace.iconCollection.get('toggle-auto-scale-auto-min')
-    }
-    if (thisObject.autoMinScale === false && thisObject.autoMaxScale === true) {
-      icon = canvas.designSpace.iconCollection.get('toggle-auto-scale-auto-max')
-    }
-    if (thisObject.autoMinScale === true && thisObject.autoMaxScale === true) {
-      icon = canvas.designSpace.iconCollection.get('toggle-auto-scale-auto-min-max')
-    }
-
-    drawIcon(icon, 1 / 2, 1 / 2, 0, 0, 14, thisObject.container)
   }
 }

Scales/RateScale.js

@@ -91,11 +91,11 @@ function newRateScale () {
     onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
     onScaleChangedEventSubscriptionId = coordinateSystem.eventHandler.listenToEvent('Scale Changed', onScaleChanged)
 
-    readObjectState()
-
     autoScaleButton = newAutoScaleButton()
     autoScaleButton.container.connectToParent(thisObject.container)
-    autoScaleButton.initialize(coordinateSystem)
+    autoScaleButton.initialize('Y', coordinateSystem)
+
+    readObjectState()
   }
 
   function onMouseOverSomeTimeMachineContainer (event) {

Scales/TimeScale.js

@@ -30,6 +30,7 @@ function newTimeScale () {
   thisObject.container.frame.height = 40
 
   let visible = true
+  let autoScaleButton
   let isMouseOver
 
   let onMouseWheelEventSubscriptionId
@@ -63,6 +64,9 @@ function newTimeScale () {
     coordinateSystem = undefined
     limitingContainer = undefined
     mouse = undefined
+
+    autoScaleButton.finalize()
+    autoScaleButton = undefined
   }
 
   function initialize (pCoordinateSystem, pLimitingContainer) {
@@ -74,6 +78,10 @@ function newTimeScale () {
     onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
     onScaleChangedEventSubscriptionId = coordinateSystem.eventHandler.listenToEvent('Scale Changed', onScaleChanged)
 
+    autoScaleButton = newAutoScaleButton()
+    autoScaleButton.container.connectToParent(thisObject.container)
+    autoScaleButton.initialize('X', coordinateSystem)
+
     readObjectState()
   }
 
@@ -126,8 +134,12 @@ function newTimeScale () {
     saveObjectState()
   }
 
-  function getContainer (point) {
+  function getContainer (point, purpose) {
     if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+      let container = autoScaleButton.getContainer(point, purpose)
+      if (container !== undefined) {
+        return container
+      }
       return thisObject.container
     }
   }
@@ -137,6 +149,8 @@ function newTimeScale () {
       let code = JSON.parse(thisObject.payload.node.code)
       code.fromDate = (new Date(coordinateSystem.min.x)).toISOString()
       code.toDate = (new Date(coordinateSystem.max.x)).toISOString()
+      code.autoMinScale = coordinateSystem.autoMinXScale
+      code.autoMaxScale = coordinateSystem.autoMaxXScale
       thisObject.payload.node.code = JSON.stringify(code, null, 4)
     } catch (err) {
        // we ignore errors here since most likely they will be parsing errors.
@@ -158,6 +172,15 @@ function newTimeScale () {
           thisObject.toDate = Date.parse(code.toDate)
           coordinateSystem.min.x = thisObject.fromDate
           coordinateSystem.max.x = thisObject.toDate
+
+          if (code.autoMinScale !== undefined && (code.autoMinScale === true || code.autoMinScale === false)) {
+            coordinateSystem.autoMinXScale = code.autoMinScale
+            autoScaleButton.autoMinScale = code.autoMinScale
+          }
+          if (code.autoMaxScale !== undefined && (code.autoMaxScale === true || code.autoMaxScale === false)) {
+            coordinateSystem.autoMaxXScale = code.autoMaxScale
+            autoScaleButton.autoMaxScale = code.autoMaxScale
+          }
           coordinateSystem.recalculateScale()
         }
       }
@@ -229,6 +252,7 @@ function newTimeScale () {
 
   function draw () {
     drawScaleBox()
+    autoScaleButton.draw()
     if (visible === false) {
       drawScaleDisplayCover(thisObject.container)
     }
@@ -237,6 +261,7 @@ function newTimeScale () {
   function drawForeground () {
     if (isMouseOver === true) {
       drawScaleBox()
+      autoScaleButton.draw()
     }
   }