Merge pull request #53 from AAMasters/develop

UI Improvement - Scales

ChartsSpace/TimeMachine.js

@@ -16,6 +16,8 @@ function newTimeMachine () {
 
   let thisObject = {
     container: undefined,
+    timeScale: undefined,
+    rateScale: undefined,
     charts: [],
     physics: physics,
     drawBackground: drawBackground,
@@ -40,11 +42,15 @@ function newTimeMachine () {
                                    // ... also to request a reference to the object for the cases we need it.
   const SEPARATION_BETWEEN_TIMELINE_CHARTS = 1.5
 
-  let timeScale
-  let rateScale
-
   let timeLineCoordinateSystem = newTimeLineCoordinateSystem()
 
+  let mouse = {
+    position: {
+      x: 0,
+      y: 0
+    }
+  }
+
   return thisObject
 
   function finalize () {
@@ -52,6 +58,13 @@ function newTimeMachine () {
       let chart = thisObject.charts[i]
       chart.finalize()
     }
+
+    thisObject.container.finalize()
+    thisObject.container = undefined
+    thisObject.timeScale.finalize()
+    thisObject.timeScale = undefined
+    thisObject.rateScale.finalize()
+    thisObject.rateScale = undefined
   }
 
   function initialize (callBackFunction) {
@@ -63,11 +76,6 @@ function newTimeMachine () {
 
     recalculateScale()
 
-    thisObject.container.eventHandler.listenToEvent('Dimmensions Changed', function (event) {
-      recalculateScale()
-      moveToUserPosition(thisObject.container, timeLineCoordinateSystem, false, false, event.mousePosition)
-    })
-
      /* First, we initialize the market that we are going to show first on screen. Later all the other markets will be initialized on the background. */
 
     let position = 0 // This defines the position of each chart respect to each other.
@@ -97,27 +105,41 @@ function newTimeMachine () {
 
      /* Each Time Machine has a Time Scale and a Right Scale. */
 
-      timeScale = newTimeScale()
-      timeScale.container.connectToParent(thisObject.container, false, false, false, true, true, true)
-      timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) {
+      thisObject.timeScale = newTimeScale()
+
+      thisObject.timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) {
         thisObject.container.frame.width = TIME_MACHINE_WIDTH * event.lenghtPercentage / 100
+        recalculateScale()
+        moveToUserPosition(thisObject.container, timeLineCoordinateSystem, false, true, event.mousePosition)
         thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
       })
 
-      timeScale.initialize(timeLineCoordinateSystem)
+      thisObject.timeScale.initialize()
 
-      rateScale = newRateScale()
-      rateScale.container.connectToParent(thisObject.container, false, false, false, true, true, true)
-      rateScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) {
+      thisObject.rateScale = newRateScale()
+
+      thisObject.rateScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) {
         thisObject.container.frame.height = TIME_MACHINE_HEIGHT * event.heightPercentage / 100
+        recalculateScale()
+        moveToUserPosition(thisObject.container, timeLineCoordinateSystem, true, false, event.mousePosition)
         thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
       })
 
-      rateScale.initialize(timeLineCoordinateSystem)
+      thisObject.rateScale.initialize()
+
+      thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
 
       initializeTheRest()
     }
 
+    function onMouseOver (event) {
+      thisObject.timeScale.visible = true
+      thisObject.rateScale.visible = true
+
+      mouse.position.x = event.x
+      mouse.position.y = event.y
+    }
+
     function initializeTheRest () {
       let leftToInitialize = SUPPORTED_EXCHANGES.length * SUPPORTED_MARKETS.length - 1 // The default exchange and market was already initialized.
       let alreadyInitialized = 0
@@ -175,8 +197,8 @@ function newTimeMachine () {
   function getContainer (point, purpose) {
     let container
 
-    if (timeScale !== undefined) {
-      container = timeScale.getContainer(point)
+    if (thisObject.timeScale !== undefined) {
+      container = thisObject.timeScale.getContainer(point)
       if (container !== undefined) {
         if (container.isForThisPurpose(purpose)) {
           return container
@@ -184,8 +206,8 @@ function newTimeMachine () {
       }
     }
 
-    if (rateScale !== undefined) {
-      container = rateScale.getContainer(point)
+    if (thisObject.rateScale !== undefined) {
+      container = thisObject.rateScale.getContainer(point)
       if (container !== undefined) {
         if (container.isForThisPurpose(purpose)) {
           return container
@@ -209,6 +231,8 @@ function newTimeMachine () {
     } else {
       if (purpose === GET_CONTAINER_PURPOSE.MOUSE_OVER) {
         thisObject.container.eventHandler.raiseEvent('onMouseNotOver')
+        thisObject.timeScale.visible = false
+        thisObject.rateScale.visible = false
       }
       return
     }
@@ -220,16 +244,76 @@ function newTimeMachine () {
   }
 
   function thisObjectPhysics () {
+    /* Screen Corner Date Calculation */
 
+    let point = {
+      x: 0,
+      y: 0
+    }
+
+    let cornerDate = getDateFromPoint(point, thisObject.container, timeLineCoordinateSystem)
+    cornerDate = new Date(cornerDate)
+    window.localStorage.setItem('Date @ Screen Corner', cornerDate.toUTCString())
   }
 
   function childrenPhysics () {
-    timeScale.physics()
-    rateScale.physics()
+    thisObject.timeScale.physics()
+    thisObject.rateScale.physics()
+
     for (let i = 0; i < thisObject.charts.length; i++) {
       let chart = thisObject.charts[i]
       chart.physics()
     }
+
+    /* Mouse Position Date Calculation */
+
+    let timePoint = {
+      x: mouse.position.x,
+      y: 0
+    }
+
+    let mouseDate = getDateFromPoint(timePoint, thisObject.container, timeLineCoordinateSystem)
+
+    thisObject.timeScale.date = new Date(mouseDate)
+
+    /* Mouse Position Rate Calculation */
+
+    let ratePoint = {
+      x: 0,
+      y: mouse.position.y
+    }
+
+    let mouseRate = getRateFromPoint(ratePoint, thisObject.container, timeLineCoordinateSystem)
+
+    thisObject.rateScale.rate = mouseRate
+
+    /* timeScale Positioning */
+
+    thisObject.timeScale.container.frame.position.x = mouse.position.x - thisObject.timeScale.container.frame.width / 2
+
+    timePoint = {
+      x: 0,
+      y: 0
+    }
+
+    timePoint = transformThisPoint(timePoint, thisObject.container.frame.container)
+    timePoint = thisObject.container.fitFunction(timePoint)
+
+    thisObject.timeScale.container.frame.position.y = timePoint.y
+
+    /* rateScale Positioning */
+
+    thisObject.rateScale.container.frame.position.y = mouse.position.y - thisObject.rateScale.container.frame.height / 2
+
+    ratePoint = {
+      x: 10000000000000,
+      y: 0
+    }
+
+    ratePoint = transformThisPoint(ratePoint, thisObject.container.frame.container)
+    ratePoint = thisObject.container.fitFunction(ratePoint)
+
+    thisObject.rateScale.container.frame.position.x = ratePoint.x - thisObject.rateScale.container.frame.width
   }
 
   function drawBackground () {
@@ -250,8 +334,8 @@ function newTimeMachine () {
         chart.draw()
       }
 
-      if (timeScale !== undefined) { timeScale.draw() }
-      if (rateScale !== undefined) { rateScale.draw() }
+      if (thisObject.timeScale !== undefined) { thisObject.timeScale.draw() }
+      if (thisObject.rateScale !== undefined) { thisObject.rateScale.draw() }
 
      // thisObject.container.frame.draw(false, true, false)
     }

ChartsSpace/ViewPort.js

@@ -1,4 +1,4 @@
- 
+
 function newViewPort () {
   const MODULE_NAME = 'Viewport'
   const INFO_LOG = false
@@ -11,8 +11,8 @@ function newViewPort () {
 
   let ANIMATION_INCREMENT = 0.25
 
-  let TOP_MARGIN = 15 + TOP_SPACE_HEIGHT
-  let BOTTOM_MARGIN = 20 + COCKPIT_SPACE_HEIGHT
+  let TOP_MARGIN = 30 + TOP_SPACE_HEIGHT
+  let BOTTOM_MARGIN = 30 + COCKPIT_SPACE_HEIGHT
   let LEFT_MARGIN = 50
   let RIGHT_MARGIN = 50
   let MARGINS = {
@@ -83,8 +83,8 @@ function newViewPort () {
   }
 
   function resize () {
-    TOP_MARGIN = 15 + TOP_SPACE_HEIGHT
-    BOTTOM_MARGIN = 20 + browserCanvas.height - COCKPIT_SPACE_POSITION
+    TOP_MARGIN = 30 + TOP_SPACE_HEIGHT
+    BOTTOM_MARGIN = 30 + browserCanvas.height - COCKPIT_SPACE_POSITION
     LEFT_MARGIN = 50
     RIGHT_MARGIN = 50
     MARGINS = {
@@ -142,7 +142,7 @@ function newViewPort () {
       if (Math.trunc(Math.abs(targetOffset.y - offset.y) * 1000) >= Math.trunc(Math.abs(offsetIncrement.y) * 1000)) {
         offset.y = offset.y + offsetIncrement.y
 
-               // console.log("offset.y changed to " + offset.y)
+              // console.log("offset.y changed to " + offset.y)
       } else {
         offsetIncrement.y = 0
       }
@@ -161,7 +161,7 @@ function newViewPort () {
 
     thisObject.eventHandler.raiseEvent('Offset Changed', event)
 
-       // console.log("displace produced new Offset x = " + offset.x + " y = " + offset.y);
+      // console.log("displace produced new Offset x = " + offset.x + " y = " + offset.y);
   }
 
   function displaceTarget (displaceVector) {
@@ -173,7 +173,7 @@ function newViewPort () {
       y: (targetOffset.y - offset.y) / 10
     }
 
-       // console.log("displaceTarget x = " + targetOffset.x + " y = " + targetOffset.y);
+      // console.log("displaceTarget x = " + targetOffset.x + " y = " + targetOffset.y);
   }
 
   function newZoomLevel (level) {
@@ -196,13 +196,13 @@ function newViewPort () {
   }
 
   function isMinZoom () {
-       /* returns true is we are currently at the min zoom level. */
+      /* returns true is we are currently at the min zoom level. */
 
     if (thisObject.zoomTargetLevel === MIN_ZOOM_LEVEL) { return true } else { return false }
   }
 
   function applyZoom (amount) {
-        // console.log("applyZoom amount: " + amount);
+       // console.log("applyZoom amount: " + amount);
 
     if (amount > 0) {
       if (thisObject.zoomTargetLevel > -5) {
@@ -300,7 +300,7 @@ function newViewPort () {
   }
 
   function fitIntoVisibleArea (point) {
-        /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */
+       /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */
 
     if (point.x > thisObject.visibleArea.bottomRight.x + 1) {
       point.x = thisObject.visibleArea.bottomRight.x + 1
@@ -453,3 +453,4 @@ function newViewPort () {
     }
   }
 }
+

Scales/Commons.js

@@ -0,0 +1,50 @@
+
+function drawScaleDisplay (label1, label2, xExtraOffSet1, xExtraOffSet2, container) {
+  let fontSize1 = 20
+  let fontSize2 = 10
+
+  const RED_LINE_HIGHT = 5
+  const OPACITY = 1
+
+  let params = {
+    cornerRadius: 3,
+    lineWidth: RED_LINE_HIGHT,
+    container: container,
+    borderColor: UI_COLOR.RUSTED_RED,
+    castShadow: false,
+    backgroundColor: UI_COLOR.DARK,
+    opacity: OPACITY
+  }
+
+  roundedCornersBackground(params)
+
+  /* Place the Text */
+
+  let xOffset1 = label1.length * fontSize1 * FONT_ASPECT_RATIO
+
+  let labelPoint1 = {
+    x: container.frame.width / 2 - xOffset1 + xExtraOffSet1,
+    y: container.frame.height / 2 + 6
+  }
+
+  labelPoint1 = container.frame.frameThisPoint(labelPoint1)
+
+  browserCanvasContext.font = fontSize1 + 'px ' + UI_FONT.PRIMARY
+  browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
+
+  browserCanvasContext.fillText(label1, labelPoint1.x, labelPoint1.y)
+
+  let xOffset2 = label2.length * fontSize2 * FONT_ASPECT_RATIO
+
+  let labelPoint2 = {
+    x: container.frame.width / 2 - xOffset2 / 2 - 3 + xExtraOffSet2,
+    y: container.frame.height / 2 + 6
+  }
+
+  labelPoint2 = container.frame.frameThisPoint(labelPoint2)
+
+  browserCanvasContext.font = fontSize2 + 'px ' + UI_FONT.PRIMARY
+  browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
+
+  browserCanvasContext.fillText(label2, labelPoint2.x, labelPoint2.y)
+}

Scales/RateScale.js

@@ -4,10 +4,13 @@ function newRateScale () {
   let thisObject = {
     heightPercentage: 100,
     container: undefined,
+    rate: undefined,
+    visible: true,
     physics: physics,
     draw: draw,
     getContainer: getContainer,
-    initialize: initialize
+    initialize: initialize,
+    finalize: finalize
   }
 
   const HEIGHT_PERCENTAGE_DEFAULT_VALUE = 50
@@ -17,32 +20,26 @@ function newRateScale () {
   thisObject.container = newContainer()
   thisObject.container.initialize(MODULE_NAME)
 
-  thisObject.container.frame.width = viewPort.margins.RIGHT
-  thisObject.container.frame.height = viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y
-
-  thisObject.container.frame.position.x = viewPort.visibleArea.bottomRight.x
-  thisObject.container.frame.position.y = TOP_SPACE_HEIGHT
-
   thisObject.container.isDraggeable = false
   thisObject.container.isClickeable = false
   thisObject.container.isWheelable = true
+  thisObject.container.detectMouseOver = true
 
-  let mouse = {
-    position: {
-      x: 0,
-      y: 0
-    }
-  }
-
-  let visible = true
-  let timeLineCoordinateSystem
+  thisObject.container.frame.width = 110
+  thisObject.container.frame.height = 25
 
+  let isMouseOver
   return thisObject
 
-  function initialize (pTimeLineCoordinateSystem) {
-    timeLineCoordinateSystem = pTimeLineCoordinateSystem
+  function finalize () {
+    thisObject.container.finalize()
+    thisObject.container = undefined
+  }
 
+  function initialize () {
     thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
+    thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
+    thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
 
     thisObject.heightPercentage = window.localStorage.getItem(MODULE_NAME)
     if (!thisObject.heightPercentage) {
@@ -54,17 +51,14 @@ function newRateScale () {
     let event = {}
     event.heightPercentage = thisObject.heightPercentage
     thisObject.container.eventHandler.raiseEvent('Height Percentage Changed', event)
+  }
 
-    thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) {
-      mouse.position.x = event.x
-      mouse.position.y = event.y
+  function onMouseOver () {
+    isMouseOver = true
+  }
 
-      visible = true
-    })
-
-    thisObject.container.eventHandler.listenToEvent('onMouseNotOver', function (event) {
-      visible = false
-    })
+  function onMouseNotOver () {
+    isMouseOver = false
   }
 
   function onMouseWheel (event) {
@@ -82,23 +76,9 @@ function newRateScale () {
     window.localStorage.setItem(MODULE_NAME, thisObject.heightPercentage)
   }
 
-  function getContainer (pPoint) {
-    let container
-
-/* In this case we manually frame this point since we do a very special treatment of the position of this scale. */
-    let point = {
-      x: 0,
-      y: 0
-    }
-    point.x = pPoint.x - thisObject.container.frame.position.x - viewPort.margins.RIGHT
-    point.y = pPoint.y - thisObject.container.frame.position.y
-
-    if (thisObject.container.frame.isThisPointHere(point, undefined, true) === true) {
+  function getContainer (point) {
+    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
       return thisObject.container
-    } else {
-           /* This point does not belong to this space. */
-
-      return undefined
     }
   }
 
@@ -107,110 +87,121 @@ function newRateScale () {
   }
 
   function draw () {
-    if (visible === false) { return }
+    drawRate()
+    drawArrows()
+  }
 
-/* We need this scale to match the shape of its parent when the parent is inside the viewPort, when it is not, we need the scale still
-to be visible at the top of the viewPort. */
+  function drawArrows () {
+    if (isMouseOver !== true) { return }
+    if (thisObject.visible === false || thisObject.rate === undefined) { return }
 
-    let frame = thisObject.container.parentContainer.frame
-    let point1
-    let point2
-    let point3
-    let point4
+    const X_OFFSET = thisObject.container.frame.width / 2
+    const Y_OFFSET = thisObject.container.frame.height / 2
+    const HEIGHT = 6
+    const WIDTH = 18
+    const LINE_WIDTH = 3
+    const OPACITY = 0.2
+    const DISTANCE_BETWEEN_ARROWS = 10
+    const MIN_DISTANCE_FROM_CENTER = 30
+    const CURRENT_VALUE_DISTANCE = MIN_DISTANCE_FROM_CENTER + thisObject.heightPercentage
+    const MAX_DISTANCE_FROM_CENTER = MIN_DISTANCE_FROM_CENTER + 115 + DISTANCE_BETWEEN_ARROWS
 
-    point1 = {
-      x: frame.width - frame.width / 10,
-      y: 0
+    let ARROW_DIRECTION = 0
+
+    ARROW_DIRECTION = -1
+    drawTwoArrows()
+    ARROW_DIRECTION = 1
+    drawTwoArrows()
+
+    function drawTwoArrows () {
+      point1 = {
+        x: X_OFFSET - WIDTH / 2,
+        y: Y_OFFSET + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION
+      }
+
+      point2 = {
+        x: X_OFFSET,
+        y: Y_OFFSET + HEIGHT * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION
+      }
+
+      point3 = {
+        x: X_OFFSET + WIDTH / 2,
+        y: Y_OFFSET + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION
+      }
+
+      point1 = thisObject.container.frame.frameThisPoint(point1)
+      point2 = thisObject.container.frame.frameThisPoint(point2)
+      point3 = thisObject.container.frame.frameThisPoint(point3)
+
+      point4 = {
+        x: X_OFFSET - WIDTH / 2,
+        y: Y_OFFSET - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION
+      }
+
+      point5 = {
+        x: X_OFFSET,
+        y: Y_OFFSET + HEIGHT * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION
+      }
+
+      point6 = {
+        x: X_OFFSET + WIDTH / 2,
+        y: Y_OFFSET - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION
+      }
+
+      point4 = thisObject.container.frame.frameThisPoint(point4)
+      point5 = thisObject.container.frame.frameThisPoint(point5)
+      point6 = thisObject.container.frame.frameThisPoint(point6)
+
+      point7 = {
+        x: X_OFFSET - WIDTH / 2,
+        y: Y_OFFSET - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION
+      }
+
+      point8 = {
+        x: X_OFFSET,
+        y: Y_OFFSET - HEIGHT * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION
+      }
+
+      point9 = {
+        x: X_OFFSET + WIDTH / 2,
+        y: Y_OFFSET - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION
+      }
+
+      point7 = thisObject.container.frame.frameThisPoint(point7)
+      point8 = thisObject.container.frame.frameThisPoint(point8)
+      point9 = thisObject.container.frame.frameThisPoint(point9)
+
+      browserCanvasContext.setLineDash([0, 0])
+
+      browserCanvasContext.beginPath()
+
+      browserCanvasContext.moveTo(point1.x, point1.y)
+      browserCanvasContext.lineTo(point2.x, point2.y)
+      browserCanvasContext.lineTo(point3.x, point3.y)
+
+      browserCanvasContext.moveTo(point4.x, point4.y)
+      browserCanvasContext.lineTo(point5.x, point5.y)
+      browserCanvasContext.lineTo(point6.x, point6.y)
+
+      browserCanvasContext.moveTo(point7.x, point7.y)
+      browserCanvasContext.lineTo(point8.x, point8.y)
+      browserCanvasContext.lineTo(point9.x, point9.y)
+
+      browserCanvasContext.lineWidth = LINE_WIDTH
+      browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')'
+      browserCanvasContext.stroke()
     }
+  }
 
-    point2 = {
-      x: frame.width,
-      y: 0
-    }
+  function drawRate () {
+    if (thisObject.visible === false || thisObject.rate === undefined) { return }
 
-    point3 = {
-      x: frame.width,
-      y: frame.height
-    }
+    let label = (thisObject.rate - Math.trunc(thisObject.rate)).toFixed(2)
+    let labelArray = label.split('.')
+    let label1 = (Math.trunc(thisObject.rate)).toLocaleString()
+    let label2 = labelArray[1]
 
-    point4 = {
-      x: frame.width - frame.width / 10,
-      y: frame.height
-    }
-
-    point5 = {
-      x: 0,
-      y: 0
-    }
-
-        /* Now the transformations. */
-
-    point1 = transformThisPoint(point1, frame.container)
-    point2 = transformThisPoint(point2, frame.container)
-    point3 = transformThisPoint(point3, frame.container)
-    point4 = transformThisPoint(point4, frame.container)
-    point5 = transformThisPoint(point5, frame.container)
-
-    point1 = viewPort.fitIntoVisibleArea(point1)
-    point2 = viewPort.fitIntoVisibleArea(point2)
-    point3 = viewPort.fitIntoVisibleArea(point3)
-    point4 = viewPort.fitIntoVisibleArea(point4)
-    point5 = viewPort.fitIntoVisibleArea(point5)
-
-    if (point2.x - point1.x < MIN_WIDTH) {
-      point1.x = point2.x - MIN_WIDTH
-      point4.x = point2.x - MIN_WIDTH
-    }
-
-    /* Lets start the drawing. */
-/*
-    browserCanvasContext.beginPath()
-    browserCanvasContext.moveTo(point1.x, point1.y)
-    browserCanvasContext.lineTo(point2.x + viewPort.margins.RIGHT, point2.y)
-    browserCanvasContext.lineTo(point3.x + viewPort.margins.RIGHT, point3.y)
-    browserCanvasContext.lineTo(point4.x, point4.y)
-    browserCanvasContext.lineTo(point1.x, point1.y)
-    browserCanvasContext.closePath()
-
-    browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 1)'
-    browserCanvasContext.lineWidth = 1
-    browserCanvasContext.stroke()
-*/
-    thisObject.container.frame.position.x = point1.x
-    thisObject.container.frame.position.y = point1.y
-
-    thisObject.container.frame.width = point2.x - point1.x
-    thisObject.container.frame.height = point3.y - point2.y
-
-    let point = {
-      x: point5.x + viewPort.margins.RIGHT,
-      y: mouse.position.y
-    }
-
-    let rate = getRateFromPoint(point, thisObject.container.parentContainer, timeLineCoordinateSystem)
-
-    let label = rate.toFixed(2)
-    let fontSize = 10
-
-    let xOffset = label.length * fontSize * FONT_ASPECT_RATIO
-
-    if (point.y + fontSize / 2 > point3.y || point.y - fontSize / 2 < point1.y) { return }
-
-    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 0.50)'
-
-    browserCanvasContext.fillText(label, point1.x + viewPort.margins.RIGHT, point.y + fontSize / 2)
-
-    browserCanvasContext.beginPath()
-
-    browserCanvasContext.moveTo(point.x, point.y)
-    browserCanvasContext.lineTo(point1.x + viewPort.margins.RIGHT, point.y)
-
-    browserCanvasContext.closePath()
-
-    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', 0.5)'
-    browserCanvasContext.lineWidth = 0.2
-    browserCanvasContext.setLineDash([1, 5])
-    browserCanvasContext.stroke()
+    drawScaleDisplay(label1, label2, 10, 40, thisObject.container)
   }
 }
+

Scales/TimePeriodScale.js

@@ -2,11 +2,12 @@ function newTimePeriodScale () {
   const MODULE_NAME = 'Time Period Scale'
 
   let thisObject = {
+    timePeriod: undefined,
     container: undefined,
     draw: draw,
     getContainer: getContainer,
     initialize: initialize,
-    timePeriod: undefined
+    finalize: finalize
   }
 
   const FILES_PERIOD_DEFAULT_VALUE = 0
@@ -37,6 +38,11 @@ function newTimePeriodScale () {
 
   return thisObject
 
+  function finalize () {
+    thisObject.container.finalize()
+    thisObject.container = undefined
+  }
+
   function initialize (pTimeLineCoordinateSystem) {
     timeLineCoordinateSystem = pTimeLineCoordinateSystem
 
@@ -129,6 +135,32 @@ function newTimePeriodScale () {
     }
   }
 
+  function saveObjectState () {
+    objectStorage.filePeriodIndex = filePeriodIndex
+    objectStorage.timePeriodIndex = timePeriodIndex
+    window.localStorage.setItem(MODULE_NAME, JSON.stringify(objectStorage))
+  }
+
+  function readObjectState () {
+    let objectStorageString = window.localStorage.getItem(MODULE_NAME)
+    if (objectStorageString !== null && objectStorageString !== '') {
+      objectStorage = JSON.parse(objectStorageString)
+      filePeriodIndex = objectStorage.filePeriodIndex
+      timePeriodIndex = objectStorage.timePeriodIndex
+    }
+  }
+
+  function newTimePeriod () {
+    let timePeriodArray = timePeriodsMasterArray[filePeriodIndex]
+    thisObject.timePeriod = timePeriodArray[timePeriodIndex][0]
+    timePeriodLabel = timePeriodArray[timePeriodIndex][1]
+
+    let event = {}
+    event.timePeriod = thisObject.timePeriod
+    thisObject.container.eventHandler.raiseEvent('Time Period Changed', event)
+    window.localStorage.setItem('Current Time Period', JSON.stringify({filePeriodIndex: filePeriodIndex, timePeriodIndex: timePeriodIndex}))
+  }
+
   function draw () {
     if (visible === false) { return }
 
@@ -214,41 +246,43 @@ to be visible at the top of the viewPort. */
     let label = timePeriodLabel.split('-')
     let label1 = label[0]
     let label2 = label[1].toUpperCase()
-    let fontSize1 = 25
+    let fontSize1 = 20
     let fontSize2 = 10
 
-  /* We draw the circle container */
-
     const RED_LINE_HIGHT = 5
-    const RADIUS = 25
     const OPACITY = 1
 
     let centerPoint = {
       x: mouse.position.x,
-      y: point1.y + viewPort.margins.BOTTOM - 5
+      y: point1.y + viewPort.margins.BOTTOM
     }
 
-    browserCanvasContext.beginPath()
-    browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIUS + RED_LINE_HIGHT, 0.0 * Math.PI, 2.0 * Math.PI)
-    browserCanvasContext.closePath()
+    let container = newContainer()
+    container.initialize('Visible Time Scale')
+    container.frame.width = 60
+    container.frame.height = 25
+    container.frame.position.x = centerPoint.x - container.frame.width / 2
+    container.frame.position.y = centerPoint.y - container.frame.height / 2
 
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + OPACITY + ')'
-    browserCanvasContext.fill()
+    let params = {
+      cornerRadius: 3,
+      lineWidth: RED_LINE_HIGHT,
+      container: container,
+      borderColor: UI_COLOR.RUSTED_RED,
+      castShadow: false,
+      backgroundColor: UI_COLOR.DARK,
+      opacity: OPACITY
+    }
 
-    browserCanvasContext.beginPath()
-    browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIUS, 0.0 * Math.PI, 2.0 * Math.PI)
-    browserCanvasContext.closePath()
-
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')'
-    browserCanvasContext.fill()
+    roundedCornersBackground(params)
 
     /* Place the Text */
 
     let xOffset1 = label1.length * fontSize1 * FONT_ASPECT_RATIO
 
     let labelPoint1 = {
-      x: mouse.position.x - xOffset1 / 2 - 3,
-      y: point1.y + viewPort.margins.BOTTOM
+      x: mouse.position.x - xOffset1 / 2 - 14,
+      y: point1.y + viewPort.margins.BOTTOM + 6
     }
 
     browserCanvasContext.font = fontSize1 + 'px ' + UI_FONT.PRIMARY
@@ -259,8 +293,8 @@ to be visible at the top of the viewPort. */
     let xOffset2 = label2.length * fontSize2 * FONT_ASPECT_RATIO
 
     let labelPoint2 = {
-      x: mouse.position.x - xOffset2 / 2 - 3,
-      y: point1.y + viewPort.margins.BOTTOM + fontSize2
+      x: mouse.position.x - xOffset2 / 2 - 3 + 14,
+      y: point1.y + viewPort.margins.BOTTOM + 6
     }
 
     browserCanvasContext.font = fontSize2 + 'px ' + UI_FONT.PRIMARY
@@ -268,31 +302,5 @@ to be visible at the top of the viewPort. */
 
     browserCanvasContext.fillText(label2, labelPoint2.x, labelPoint2.y)
   }
-
-  function saveObjectState () {
-    objectStorage.filePeriodIndex = filePeriodIndex
-    objectStorage.timePeriodIndex = timePeriodIndex
-    window.localStorage.setItem(MODULE_NAME, JSON.stringify(objectStorage))
-  }
-
-  function readObjectState () {
-    let objectStorageString = window.localStorage.getItem(MODULE_NAME)
-    if (objectStorageString !== null && objectStorageString !== '') {
-      objectStorage = JSON.parse(objectStorageString)
-      filePeriodIndex = objectStorage.filePeriodIndex
-      timePeriodIndex = objectStorage.timePeriodIndex
-    }
-  }
-
-  function newTimePeriod () {
-    let timePeriodArray = timePeriodsMasterArray[filePeriodIndex]
-    thisObject.timePeriod = timePeriodArray[timePeriodIndex][0]
-    timePeriodLabel = timePeriodArray[timePeriodIndex][1]
-
-    let event = {}
-    event.timePeriod = thisObject.timePeriod
-    thisObject.container.eventHandler.raiseEvent('Time Period Changed', event)
-    window.localStorage.setItem('Current Time Period', JSON.stringify({filePeriodIndex: filePeriodIndex, timePeriodIndex: timePeriodIndex}))
-  }
 }
 

Scales/TimeScale.js

@@ -4,10 +4,13 @@ function newTimeScale () {
   let thisObject = {
     lenghtPercentage: undefined,
     container: undefined,
+    date: undefined,
+    visible: true,
     physics: physics,
     draw: draw,
     getContainer: getContainer,
-    initialize: initialize
+    initialize: initialize,
+    finalize: finalize
   }
 
   const LENGHT_PERCENTAGE_DEFAULT_VALUE = 5
@@ -20,23 +23,23 @@ function newTimeScale () {
   thisObject.container.isDraggeable = false
   thisObject.container.isClickeable = false
   thisObject.container.isWheelable = true
+  thisObject.container.detectMouseOver = true
 
-  let mouse = {
-    position: {
-      x: 0,
-      y: 0
-    }
-  }
-
-  let visible = true
-  let timeLineCoordinateSystem
+  thisObject.container.frame.width = 190
+  thisObject.container.frame.height = 25
 
+  let isMouseOver
   return thisObject
 
-  function initialize (pTimeLineCoordinateSystem) {
-    timeLineCoordinateSystem = pTimeLineCoordinateSystem
+  function finalize () {
+    thisObject.container.finalize()
+    thisObject.container = undefined
+  }
 
+  function initialize () {
     thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
+    thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
+    thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
 
     thisObject.lenghtPercentage = window.localStorage.getItem(MODULE_NAME)
     if (!thisObject.lenghtPercentage) {
@@ -48,17 +51,14 @@ function newTimeScale () {
     let event = {}
     event.lenghtPercentage = thisObject.lenghtPercentage
     thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', event)
+  }
 
-    thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) {
-      mouse.position.x = event.x
-      mouse.position.y = event.y
+  function onMouseOver () {
+    isMouseOver = true
+  }
 
-      visible = true
-    })
-
-    thisObject.container.eventHandler.listenToEvent('onMouseNotOver', function (event) {
-      visible = false
-    })
+  function onMouseNotOver () {
+    isMouseOver = false
   }
 
   function onMouseWheel (event) {
@@ -77,145 +77,132 @@ function newTimeScale () {
     window.localStorage.setItem(MODULE_NAME, thisObject.lenghtPercentage)
   }
 
-  function getContainer (pPoint) {
-    let container
-
-/* In this case we manually frame this point since we do a very special treatment of the position of this scale. */
-    let point = {
-      x: 0,
-      y: 0
-    }
-    point.x = pPoint.x - thisObject.container.frame.position.x
-    point.y = pPoint.y - thisObject.container.frame.position.y + viewPort.margins.TOP
-
-    if (thisObject.container.frame.isThisPointHere(point, undefined, true) === true) {
+  function getContainer (point) {
+    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
       return thisObject.container
-    } else {
-           /* This point does not belong to this space. */
-
-      return undefined
     }
   }
 
   function physics () {
-    let point = {
-      x: 0,
-      y: 0
-    }
 
-    let date = getDateFromPoint(point, thisObject.container.parentContainer, timeLineCoordinateSystem)
-    date = new Date(date)
-    window.localStorage.setItem('Date @ Screen Corner', date.toUTCString())
   }
 
   function draw () {
-    if (visible === false) { return }
+    drawTime()
+    drawArrows()
+  }
 
-/* We need this scale to match the shape of its parent when the parent is inside the viewPort, when it is not, we need the scale still
-to be visible at the top of the viewPort. */
+  function drawArrows () {
+    if (isMouseOver !== true) { return }
+    if (thisObject.visible === false || thisObject.date === undefined) { return }
 
-    let frame = thisObject.container.parentContainer.frame
-    let point1
-    let point2
-    let point3
-    let point4
+    const X_OFFSET = thisObject.container.frame.width / 2
+    const Y_OFFSET = thisObject.container.frame.height / 2 - 10
+    const HEIGHT = 18
+    const WIDTH = 6
+    const LINE_WIDTH = 3
+    const OPACITY = 0.2
+    const DISTANCE_BETWEEN_ARROWS = 10
+    const MIN_DISTANCE_FROM_CENTER = 110
+    const CURRENT_VALUE_DISTANCE = MIN_DISTANCE_FROM_CENTER + thisObject.lenghtPercentage
+    const MAX_DISTANCE_FROM_CENTER = MIN_DISTANCE_FROM_CENTER + 100 + DISTANCE_BETWEEN_ARROWS
 
-    point1 = {
-      x: 0,
-      y: 0
+    let ARROW_DIRECTION = 0
+
+    ARROW_DIRECTION = -1
+    drawTwoArrows()
+    ARROW_DIRECTION = 1
+    drawTwoArrows()
+
+    function drawTwoArrows () {
+      point1 = {
+        x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION,
+        y: Y_OFFSET - 0
+      }
+
+      point2 = {
+        x: X_OFFSET + WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION,
+        y: Y_OFFSET + HEIGHT / 2
+      }
+
+      point3 = {
+        x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION,
+        y: Y_OFFSET + HEIGHT
+      }
+
+      point1 = thisObject.container.frame.frameThisPoint(point1)
+      point2 = thisObject.container.frame.frameThisPoint(point2)
+      point3 = thisObject.container.frame.frameThisPoint(point3)
+
+      point4 = {
+        x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION,
+        y: Y_OFFSET - 0
+      }
+
+      point5 = {
+        x: X_OFFSET + WIDTH / 2 * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION,
+        y: Y_OFFSET + HEIGHT / 2
+      }
+
+      point6 = {
+        x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_VALUE_DISTANCE * ARROW_DIRECTION,
+        y: Y_OFFSET + HEIGHT
+      }
+
+      point4 = thisObject.container.frame.frameThisPoint(point4)
+      point5 = thisObject.container.frame.frameThisPoint(point5)
+      point6 = thisObject.container.frame.frameThisPoint(point6)
+
+      point7 = {
+        x: X_OFFSET + WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION,
+        y: Y_OFFSET - 0
+      }
+
+      point8 = {
+        x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION,
+        y: Y_OFFSET + HEIGHT / 2
+      }
+
+      point9 = {
+        x: X_OFFSET + WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION,
+        y: Y_OFFSET + HEIGHT
+      }
+
+      point7 = thisObject.container.frame.frameThisPoint(point7)
+      point8 = thisObject.container.frame.frameThisPoint(point8)
+      point9 = thisObject.container.frame.frameThisPoint(point9)
+
+      browserCanvasContext.setLineDash([0, 0])
+
+      browserCanvasContext.beginPath()
+
+      browserCanvasContext.moveTo(point1.x, point1.y)
+      browserCanvasContext.lineTo(point2.x, point2.y)
+      browserCanvasContext.lineTo(point3.x, point3.y)
+
+      browserCanvasContext.moveTo(point4.x, point4.y)
+      browserCanvasContext.lineTo(point5.x, point5.y)
+      browserCanvasContext.lineTo(point6.x, point6.y)
+
+      browserCanvasContext.moveTo(point7.x, point7.y)
+      browserCanvasContext.lineTo(point8.x, point8.y)
+      browserCanvasContext.lineTo(point9.x, point9.y)
+
+      browserCanvasContext.lineWidth = LINE_WIDTH
+      browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')'
+      browserCanvasContext.stroke()
     }
+  }
 
-    point2 = {
-      x: frame.width,
-      y: 0
-    }
+  function drawTime () {
+    if (thisObject.visible === false || thisObject.date === undefined) { return }
 
-    point3 = {
-      x: frame.width,
-      y: frame.height / 10
-    }
+    let label = thisObject.date.toUTCString()
+    let labelArray = label.split(' ')
+    let label1 = labelArray[1] + ' ' + labelArray[2] + ' ' + labelArray[3]
+    let label2 = labelArray[4]
 
-    point4 = {
-      x: 0,
-      y: frame.height / 10
-    }
-
-    point5 = {
-      x: 0,
-      y: frame.height
-    }
-
-        /* Now the transformations. */
-
-    point1 = transformThisPoint(point1, frame.container)
-    point2 = transformThisPoint(point2, frame.container)
-    point3 = transformThisPoint(point3, frame.container)
-    point4 = transformThisPoint(point4, frame.container)
-    point5 = transformThisPoint(point5, frame.container)
-
-    point1 = viewPort.fitIntoVisibleArea(point1)
-    point2 = viewPort.fitIntoVisibleArea(point2)
-    point3 = viewPort.fitIntoVisibleArea(point3)
-    point4 = viewPort.fitIntoVisibleArea(point4)
-    point5 = viewPort.fitIntoVisibleArea(point5)
-
-    if (point3.y - point2.y < MIN_HEIGHT) {
-      point3.y = point2.y + MIN_HEIGHT
-      point4.y = point2.y + MIN_HEIGHT
-    }
-
-    /* Lets start the drawing. */
-/*
-    browserCanvasContext.beginPath()
-    browserCanvasContext.moveTo(point1.x, point1.y - viewPort.margins.TOP)
-    browserCanvasContext.lineTo(point2.x, point2.y - viewPort.margins.TOP)
-    browserCanvasContext.lineTo(point3.x, point3.y - viewPort.margins.TOP)
-    browserCanvasContext.lineTo(point4.x, point4.y - viewPort.margins.TOP)
-    browserCanvasContext.lineTo(point1.x, point1.y - viewPort.margins.TOP)
-    browserCanvasContext.closePath()
-
-    browserCanvasContext.strokeStyle = 'rgba(150, 150, 150, 1)'
-    browserCanvasContext.lineWidth = 1
-    browserCanvasContext.stroke()
-*/
-
-    thisObject.container.frame.position.x = point1.x
-    thisObject.container.frame.position.y = point1.y
-
-    thisObject.container.frame.width = point2.x - point1.x
-    thisObject.container.frame.height = point3.y - point2.y
-
-    let point = {
-      x: mouse.position.x,
-      y: point1.y - viewPort.margins.TOP
-    }
-
-    let date = getDateFromPoint(point, thisObject.container.parentContainer, timeLineCoordinateSystem)
-    date = new Date(date)
-
-    let label = date.toUTCString()
-    let fontSize = 10
-
-    let xOffset = label.length * fontSize * FONT_ASPECT_RATIO
-
-    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 0.50)'
-
-    if (point.x - xOffset / 2 < point1.x || point.x + xOffset / 2 > point2.x) { return }
-
-    browserCanvasContext.fillText(label, point.x - xOffset / 2, point.y + fontSize + 7)
-
-    browserCanvasContext.beginPath()
-
-    browserCanvasContext.moveTo(point.x, point1.y)
-    browserCanvasContext.lineTo(point.x, point5.y)
-
-    browserCanvasContext.closePath()
-
-    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', 0.5)'
-    browserCanvasContext.lineWidth = 0.2
-    browserCanvasContext.setLineDash([1, 5])
-    browserCanvasContext.stroke()
+    drawScaleDisplay(label1, label2, 10, 60, thisObject.container)
   }
 }
 

Spaces/ChartSpace.js

@@ -15,12 +15,12 @@ function newChartSpace () {
   let thisObject = {
     visible: true,
     container: undefined,
+    timeMachines: [],
     fitIntoVisibleArea: fitIntoVisibleArea,
     isThisPointVisible: isThisPointVisible,
     physics: physics,
     drawBackground: drawBackground,
     draw: draw,
-    timeMachines: [],
     getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
     initialize: initialize,
     finalize: finalize
@@ -35,14 +35,13 @@ function newChartSpace () {
   return thisObject
 
   function finalize () {
-    try {
-      for (let i = 0; i < thisObject.timeMachines.length; i++) {
-        let timeMachine = thisObject.timeMachines[i]
-        timeMachine.finalize()
-      }
-    } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) }
+    for (let i = 0; i < thisObject.timeMachines.length; i++) {
+      let timeMachine = thisObject.timeMachines[i]
+      timeMachine.finalize()
     }
+
+    thisObject.container.finalize()
+    thisObject.container = undefined
   }
 
   function initialize (callBackFunction) {