Time Frame Sclae upgraded

ChartsSpace/TimeMachine.js

@@ -78,7 +78,8 @@ function newTimeMachine () {
 
     thisObject.container.finalize()
     thisObject.container = undefined
-    setupContainer()
+
+    mouse = undefined
   }
 
   function initialize (callBackFunction) {
@@ -216,6 +217,7 @@ function newTimeMachine () {
 
       /* Setting up the new timeline chart. */
       timelineChart.container.connectToParent(thisObject.container, true, true, false, true, true, true)
+      timelineChart.container.fitFunction = thisObject.container.fitFunction
       timelineChart.container.frame.height = thisObject.container.frame.height
       timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2
       timelineChart.container.frame.position.y = 0

ChartsSpace/TimelineChart.js

@@ -14,6 +14,7 @@ function newTimelineChart () {
   let thisObject = {
     container: undefined,
     fitFunction: undefined,
+    timeFrameScale: undefined,
     physics: physics,
     setDatetime: setDatetime,
     drawBackground: drawBackground,
@@ -44,13 +45,20 @@ function newTimelineChart () {
   let market
 
   let productsPanelHandle
-  let timeFrameScale
 
   let onOffsetChangedEventSuscriptionId
   let onZoomChangedEventSuscriptionId
   let onMouseOverEventSuscriptionId
+  let onMouseNotOverEventSuscriptionId
   let timeFrameScaleEventSuscriptionId
 
+  let mouse = {
+    position: {
+      x: 0,
+      y: 0
+    }
+  }
+
   setupContainer()
   return thisObject
 
@@ -64,17 +72,19 @@ function newTimelineChart () {
     viewPort.eventHandler.stopListening(onOffsetChangedEventSuscriptionId)
     viewPort.eventHandler.stopListening(onZoomChangedEventSuscriptionId)
     thisObject.container.eventHandler.stopListening(onMouseOverEventSuscriptionId)
-    timeFrameScale.container.eventHandler.stopListening(timeFrameScaleEventSuscriptionId)
+    thisObject.container.eventHandler.stopListening(onMouseNotOverEventSuscriptionId)
+    thisObject.timeFrameScale.container.eventHandler.stopListening(timeFrameScaleEventSuscriptionId)
 
     plotterManager.finalize()
     plotterManager = undefined
-    timeFrameScale.finalize()
-    timeFrameScale = undefined
+    thisObject.timeFrameScale.finalize()
+    thisObject.timeFrameScale = undefined
     canvas.panelsSpace.destroyPanel(productsPanelHandle)
 
     thisObject.container.finalize()
     thisObject.container = undefined
-    setupContainer()
+
+    mouse = undefined
   }
 
   function initialize (pExchange, pMarket, pTimeLineCoordinateSystem, callBackFunction) {
@@ -84,9 +94,22 @@ function newTimelineChart () {
       market = pMarket
       timeLineCoordinateSystem = pTimeLineCoordinateSystem
 
-      onMouseOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) {
+      onMouseOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
+
+      function onMouseOver (event) {
+        thisObject.timeFrameScale.visible = true
+
+        mouse.position.x = event.x
+        mouse.position.y = event.y
+
         saveUserPosition(thisObject.container, timeLineCoordinateSystem, event)
-      })
+      }
+
+      onMouseNotOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
+
+      function onMouseNotOver (event) {
+        thisObject.timeFrameScale.visible = false
+      }
 
       let panelOwner = exchange + ' ' + market.quotedAsset + '/' + market.baseAsset
       productsPanelHandle = canvas.panelsSpace.createNewPanel('Products Panel', undefined, panelOwner)
@@ -157,9 +180,9 @@ function newTimelineChart () {
           return
         }
 
-        timeFrameScale = newTimeFrameScale()
-        timeFrameScale.container.connectToParent(thisObject.container, false, false, false, true, true, true)
-        timeFrameScaleEventSuscriptionId = timeFrameScale.container.eventHandler.listenToEvent('Time Frame Changed', function (event) {
+        thisObject.timeFrameScale = newTimeFrameScale()
+        thisObject.timeFrameScale.fitFunction = thisObject.fitFunction
+        timeFrameScaleEventSuscriptionId = thisObject.timeFrameScale.container.eventHandler.listenToEvent('Time Frame Changed', function (event) {
           let currentTimeFrame = timeFrame
           timeFrame = event.timeFrame
           if (timeFrame !== currentTimeFrame) {
@@ -167,7 +190,7 @@ function newTimelineChart () {
           }
         })
 
-        timeFrameScale.initialize(timeLineCoordinateSystem)
+        thisObject.timeFrameScale.initialize()
 
         initializationReady = true
         callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE)
@@ -233,7 +256,7 @@ function newTimelineChart () {
   function getContainer (point) {
     let container
 
-    container = timeFrameScale.getContainer(point)
+    container = thisObject.timeFrameScale.getContainer(point)
 
     if (container !== undefined) { return container }
 
@@ -250,7 +273,23 @@ function newTimelineChart () {
   }
 
   function childrenPhysics () {
+    if (thisObject.timeFrameScale === undefined) { return }
 
+    thisObject.timeFrameScale.physics()
+
+    /* thisObject.timeFrameScale Positioning */
+
+    thisObject.timeFrameScale.container.frame.position.x = mouse.position.x - thisObject.timeFrameScale.container.frame.width / 2
+
+    timePoint = {
+      x: 0,
+      y: thisObject.container.frame.height
+    }
+
+    timePoint = transformThisPoint(timePoint, thisObject.container.frame.container)
+    timePoint = thisObject.container.fitFunction(timePoint)
+
+    thisObject.timeFrameScale.container.frame.position.y = timePoint.y - thisObject.timeFrameScale.container.frame.height
   }
 
   function tooTiny () {
@@ -283,7 +322,7 @@ function newTimelineChart () {
     if (thisObject.container.frame.isInViewPort()) {
       drawChartsBackground()
       plotterManager.draw()
-      timeFrameScale.draw()
+      thisObject.timeFrameScale.draw()
     }
   }
 

Scales/Commons.js

@@ -3,11 +3,11 @@ function drawScaleDisplay (label1, label2, xExtraOffSet1, xExtraOffSet2, contain
   let fontSize1 = 20
   let fontSize2 = 10
 
-  const RED_LINE_HIGHT = 5
+  const RED_LINE_HIGHT = 4
   const OPACITY = 1
 
   let params = {
-    cornerRadius: 3,
+    cornerRadius: 5,
     lineWidth: RED_LINE_HIGHT,
     container: container,
     borderColor: UI_COLOR.RUSTED_RED,

Scales/RateScale.js

@@ -26,7 +26,7 @@ function newRateScale () {
   thisObject.container.isWheelable = true
   thisObject.container.detectMouseOver = true
 
-  thisObject.container.frame.width = 110
+  thisObject.container.frame.width = 190
   thisObject.container.frame.height = 25
 
   let isMouseOver

Scales/TimeFrameScale.js

@@ -4,7 +4,9 @@ function newTimeFrameScale () {
   let thisObject = {
     timeFrame: undefined,
     container: undefined,
+    fitFunction: undefined,
     draw: draw,
+    physics: physics,
     getContainer: getContainer,
     initialize: initialize,
     finalize: finalize
@@ -14,15 +16,7 @@ function newTimeFrameScale () {
   const TIME_PERIOD_DEFAULT_VALUE = 0
   const MIN_HEIGHT = 50
 
-  let mouse = {
-    position: {
-      x: 0,
-      y: 0
-    }
-  }
-
   let visible = true
-  let timeLineCoordinateSystem
   let objectStorage = {}
   let filePeriodIndex = FILES_PERIOD_DEFAULT_VALUE
   let timeFrameIndex = TIME_PERIOD_DEFAULT_VALUE
@@ -30,8 +24,6 @@ function newTimeFrameScale () {
   let timeFrameLabel = ''
 
   let onMouseWheelEventSubscriptionId
-  let onMouseOverEventSubscriptionId
-  let onMouseNotOverEventSubscriptionId
   let onZoomChangedEventSubscriptionId
 
   setupContainer()
@@ -44,44 +36,35 @@ function newTimeFrameScale () {
     thisObject.container.isDraggeable = false
     thisObject.container.isClickeable = false
     thisObject.container.isWheelable = true
+
+    thisObject.container.frame.width = 190
+    thisObject.container.frame.height = 25
   }
 
   function finalize () {
     thisObject.container.eventHandler.stopListening(onMouseWheelEventSubscriptionId)
-    thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
-    thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
     viewPort.eventHandler.stopListening(onZoomChangedEventSubscriptionId)
 
-    timeLineCoordinateSystem = undefined
     objectStorage = undefined
 
     thisObject.container.finalize()
     thisObject.container = undefined
-    setupContainer()
+    thisObject.fitFunction = undefined
   }
 
-  function initialize (pTimeLineCoordinateSystem) {
-    timeLineCoordinateSystem = pTimeLineCoordinateSystem
-
+  function initialize () {
     onMouseWheelEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
 
     readObjectState()
     newTimeFrame()
 
-    onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) {
-      mouse.position.x = event.x
-      mouse.position.y = event.y
-
-      visible = true
-    })
-
-    onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', function (event) {
-      visible = false
-    })
-
     onZoomChangedEventSubscriptionId = viewPort.eventHandler.listenToEvent('Zoom Changed', onZoomChanged)
   }
 
+  function physics () {
+
+  }
+
   function onZoomChanged (event) {
     if (event !== undefined) { // it is undefined when the level is just being animated.
       let currentTimeFrame = thisObject.timeFrame
@@ -133,24 +116,9 @@ function newTimeFrameScale () {
     newTimeFrame()
   }
 
-  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
-
-    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
     }
   }
 
@@ -183,142 +151,16 @@ function newTimeFrameScale () {
   function draw () {
     if (visible === false) { return }
 
-/* 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. */
+    drawTimeFrame()
+  }
 
-    let frame = thisObject.container.parentContainer.frame
-    let point1
-    let point2
-    let point3
-    let point4
-
-    point1 = {
-      x: 0,
-      y: frame.height - frame.height * 2 / 100
-    }
-
-    point2 = {
-      x: frame.width,
-      y: frame.height - frame.height * 2 / 100
-    }
-
-    point3 = {
-      x: frame.width,
-      y: frame.height
-    }
-
-    point4 = {
-      x: 0,
-      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 (point3.y - point2.y < MIN_HEIGHT) {
-      point1.y = point3.y - MIN_HEIGHT
-      point2.y = point3.y - MIN_HEIGHT
-    }
-
-    /* Lets start the drawing. */
-
-    let displacement = viewPort.margins.BOTTOM - COCKPIT_SPACE_HEIGHT
-
-    /*
-    browserCanvasContext.beginPath()
-    browserCanvasContext.moveTo(point1.x, point1.y + displacement)
-    browserCanvasContext.lineTo(point2.x, point2.y + displacement)
-    browserCanvasContext.lineTo(point3.x, point3.y + displacement)
-    browserCanvasContext.lineTo(point4.x, point4.y + displacement)
-    browserCanvasContext.lineTo(point1.x, point1.y + displacement)
-    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 + displacement
-
-    thisObject.container.frame.width = point2.x - point1.x
-    thisObject.container.frame.height = point3.y - point2.y
-
-  /* Common Variables */
+  function drawTimeFrame () {
+    if (thisObject.visible === false || timeFrameLabel === undefined) { return }
 
     let label = timeFrameLabel.split('-')
     let label1 = label[0]
     let label2 = label[1].toUpperCase()
-    let fontSize1 = 20
-    let fontSize2 = 10
 
-    const RED_LINE_HIGHT = 5
-    const OPACITY = 1
-
-    let centerPoint = {
-      x: mouse.position.x,
-      y: point1.y + viewPort.margins.BOTTOM
-    }
-
-    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
-
-    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: mouse.position.x - xOffset1 / 2 - 14,
-      y: point1.y + viewPort.margins.BOTTOM + 6
-    }
-
-    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: mouse.position.x - xOffset2 / 2 - 3 + 14,
-      y: point1.y + viewPort.margins.BOTTOM + 6
-    }
-
-    browserCanvasContext.font = fontSize2 + 'px ' + UI_FONT.PRIMARY
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
-
-    browserCanvasContext.fillText(label2, labelPoint2.x, labelPoint2.y)
+    drawScaleDisplay(label1, label2, 10, 60, thisObject.container, thisObject.fitFunction)
   }
 }