Rigth scale visible

Scales/RightScale.js

@@ -15,13 +15,13 @@
    }
 
    const HEIGHT_PERCENTAGE_DEFAULT_VALUE = 50
-   const RIGHT_MARGIN = 50
    const STEP_SIZE = 5
+   const MIN_WIDTH = 50
 
    thisObject.container = newContainer()
    thisObject.container.initialize(MODULE_NAME)
 
-   thisObject.container.frame.width = RIGHT_MARGIN
+   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
@@ -38,9 +38,14 @@
      }
    }
 
+   let visible = false
+   let timeLineCoordinateSystem
+
    return thisObject
 
-   function initialize () {
+   function initialize (pTimeLineCoordinateSystem) {
+     timeLineCoordinateSystem = pTimeLineCoordinateSystem
+
      thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel)
 
      thisObject.heightPercentage = window.localStorage.getItem(MODULE_NAME)
@@ -57,6 +62,12 @@
      thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) {
        mouse.position.x = event.x
        mouse.position.y = event.y
+
+       visible = true
+     })
+
+     thisObject.container.eventHandler.listenToEvent('onMouseNotOver', function (event) {
+       visible = false
      })
    }
 
@@ -75,12 +86,18 @@
      window.localStorage.setItem(MODULE_NAME, thisObject.heightPercentage)
    }
 
-   function getContainer (point) {
+   function getContainer (pPoint) {
      let container
 
-        /* First we check if this point is inside this object UI. */
+ /* 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, true) === true) {
+     if (thisObject.container.frame.isThisPointHere(point, undefined, true) === true) {
        return thisObject.container
      } else {
             /* This point does not belong to this space. */
@@ -90,20 +107,121 @@
    }
 
    function draw () {
-     drawBackground()
-     drawLabel()
+     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. */
+
+     let frame = thisObject.container.parentContainer.frame
+     let point1
+     let point2
+     let point3
+     let point4
+
+     point1 = {
+       x: frame.width - frame.width / 10,
+       y: 0
+     }
+
+     point2 = {
+       x: frame.width,
+       y: 0
+     }
+
+     point3 = {
+       x: frame.width,
+       y: frame.height
+     }
+
+     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 + viewPort.margins.RIGHT, point1.y)
+     browserCanvasContext.lineTo(point2.x + viewPort.margins.RIGHT, point2.y)
+     browserCanvasContext.lineTo(point3.x + viewPort.margins.RIGHT, point3.y)
+     browserCanvasContext.lineTo(point4.x + viewPort.margins.RIGHT, point4.y)
+     browserCanvasContext.lineTo(point1.x + viewPort.margins.RIGHT, 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,
+       y: mouse.position.y
+     }
+
+     let rate = getRateFromPoint(point, thisObject.container, timeLineCoordinateSystem)
+
+     let label = rate.toFixed(2)
+     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, point1.x - xOffset / 2, point.y + fontSize + 2)
+
+     browserCanvasContext.beginPath()
+
+     browserCanvasContext.moveTo(point.x, point.y)
+     browserCanvasContext.lineTo(point.x, point.y)
+
+     browserCanvasContext.closePath()
+
+     browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', 0.5)'
+     browserCanvasContext.lineWidth = 0.2
+     browserCanvasContext.setLineDash([1, 5])
+     browserCanvasContext.stroke()
    }
 
    function drawBackground () {
-     const RIGHT_MARGIN = 50
-
           /* We will paint some transparent background here. */
 
      let opacity = '0.95'
 
      browserCanvasContext.beginPath()
 
-     browserCanvasContext.rect(viewPort.visibleArea.topRight.x, viewPort.visibleArea.topRight.y, RIGHT_MARGIN, viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y)
+     browserCanvasContext.rect(viewPort.visibleArea.topRight.x, viewPort.visibleArea.topRight.y, viewPort.margins.RIGHT, viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y)
      browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')'
 
      browserCanvasContext.closePath()

Scales/TimeScale.js

@@ -17,7 +17,6 @@ function newTimeScale () {
   const LENGHT_PERCENTAGE_DEFAULT_VALUE = 50
   const STEP_SIZE = 5
   const MIN_HEIGHT = 50
-  const TOP_MARGIN = 15
 
   thisObject.container = newContainer()
   thisObject.container.initialize(MODULE_NAME)
@@ -91,7 +90,7 @@ function newTimeScale () {
       y: 0
     }
     point.x = pPoint.x - thisObject.container.frame.position.x
-    point.y = pPoint.y - thisObject.container.frame.position.y + TOP_MARGIN
+    point.y = pPoint.y - thisObject.container.frame.position.y + viewPort.margins.TOP
 
     if (thisObject.container.frame.isThisPointHere(point, undefined, true) === true) {
       return thisObject.container
@@ -161,11 +160,11 @@ to be visible at the top of the viewPort. */
     /* Lets start the drawing. */
 /*
     browserCanvasContext.beginPath()
-    browserCanvasContext.moveTo(point1.x, point1.y - TOP_MARGIN)
-    browserCanvasContext.lineTo(point2.x, point2.y - TOP_MARGIN)
-    browserCanvasContext.lineTo(point3.x, point3.y - TOP_MARGIN)
-    browserCanvasContext.lineTo(point4.x, point4.y - TOP_MARGIN)
-    browserCanvasContext.lineTo(point1.x, point1.y - TOP_MARGIN)
+    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)'
@@ -181,7 +180,7 @@ to be visible at the top of the viewPort. */
 
     let point = {
       x: mouse.position.x,
-      y: point1.y - TOP_MARGIN
+      y: point1.y - viewPort.margins.TOP
     }
 
     let date = getDateFromPoint(point, thisObject.container, timeLineCoordinateSystem)

TimeMachine.js

@@ -106,11 +106,7 @@ function newTimeMachine () {
       /* Each Time Machine has a Time Scale and a Right Scale. */
 
       timeScale = newTimeScale()
-
       timeScale.container.connectToParent(thisObject.container, false, false)
-      /*
-      timeScale.container.frame.height = thisObject.container.frame.height / 10
-*/
       timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) {
         thisObject.container.frame.width = TIME_MACHINE_WIDTH * event.lenghtPercentage / 100
         thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
@@ -119,13 +115,13 @@ function newTimeMachine () {
       timeScale.initialize(timeLineCoordinateSystem)
 
       rigthScale = newRigthScale()
-
+      rigthScale.container.connectToParent(thisObject.container, false, false)
       rigthScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) {
         thisObject.container.frame.height = TIME_MACHINE_HEIGHT * event.heightPercentage / 100
         thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
       })
 
-      rigthScale.initialize()
+      rigthScale.initialize(timeLineCoordinateSystem)
 
       initializeTheRest()
     }

ViewPort.js

@@ -7,6 +7,12 @@ function newViewPort () {
   const BOTTOM_MARGIN = 15 + BOTTOM_SPACE_HEIGHT
   const LEFT_MARGIN = 50
   const RIGHT_MARGIN = 50
+  const MARGINS = {
+    TOP: TOP_MARGIN,
+    BOTTOM: BOTTOM_MARGIN,
+    LEFT: LEFT_MARGIN,
+    RIGHT: RIGHT_MARGIN
+  }
 
   let thisObject = {
     visibleArea: undefined,
@@ -14,6 +20,7 @@ function newViewPort () {
     zoomTargetLevel: undefined,
     zoomLevel: undefined,
     mousePosition: undefined,
+    margins: MARGINS,
     getDisplacement: getDisplacement,
     newZoomLevel: newZoomLevel,
     applyZoom: applyZoom,