Improvements in Containers

Canvas.js

@@ -222,6 +222,7 @@ function newCanvas () {
       }
     } catch (err) {
       if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err) }
+      if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err.stack = ' + err.stack) }
       callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
     }
   }

Container.js

@@ -1,6 +1,6 @@
 
 function newContainer () {
-  var container = {
+  let thisObject = {
     frame: undefined,
     displacement: undefined,
     eventHandler: undefined,
@@ -9,24 +9,63 @@ function newContainer () {
     isClickeable: false,
     isWheelable: false,
     name: undefined,
-    initialize: initialize
+    initialize: initialize,
+    connectToParent: connectToParent
   }
 
-  return container
+  let connectedToParentWidth = false
+  let connectedToParentHeight = false
 
-  function initialize () {
-    var frame = newFrame()
-    frame.initialize()
-    this.frame = frame
-    frame.container = container
+  return thisObject
 
-    var eventHandler = newEventHandler()
-    eventHandler.initialize()
-    eventHandler.name = container.name
-    this.eventHandler = eventHandler
+  function initialize (pName) {
+    thisObject.name = pName
 
-    var displacement = newDisplacement()
-    this.displacement = displacement
-    displacement.container = container
+    thisObject.frame = newFrame()
+    thisObject.frame.initialize()
+    thisObject.frame.containerName = pName
+    thisObject.frame.container = thisObject
+
+    thisObject.eventHandler = newEventHandler()
+    thisObject.eventHandler.initialize()
+    thisObject.eventHandler.name = pName
+
+    thisObject.displacement = newDisplacement()
+    thisObject.displacement.container = thisObject
+    thisObject.displacement.containerName = pName
+  }
+
+  function connectToParent (parentContainer, onWidth, onHeight) {
+    connectedToParentWidth = onWidth
+    connectedToParentHeight = onHeight
+
+    thisObject.displacement.parentDisplacement = parentContainer.displacement
+    thisObject.frame.parentFrame = parentContainer.frame
+    thisObject.parentContainer = parentContainer
+    thisObject.parentContainer.eventHandler.listenToEvent('Dimmensions Changed', onParentDimmensionsChanged)
+
+    if (connectedToParentWidth) {
+      thisObject.frame.width = thisObject.parentContainer.frame.width
+    }
+    if (connectedToParentHeight) {
+      thisObject.frame.height = thisObject.parentContainer.frame.height
+    }
+  }
+
+  function onParentDimmensionsChanged () {
+    let dimmensionsChanged = false
+    if (connectedToParentWidth) {
+      thisObject.frame.width = thisObject.parentContainer.frame.width
+      dimmensionsChanged = true
+    }
+    if (connectedToParentHeight) {
+      thisObject.frame.height = thisObject.parentContainer.frame.height
+      dimmensionsChanged = true
+    }
+
+    if (dimmensionsChanged) {
+      thisObject.eventHandler.raiseEvent('Dimmensions Changed')
+      console.log(thisObject.name + ' new width = ' + thisObject.frame.width)
+    }
   }
 }

Frame.js

@@ -241,7 +241,7 @@ function newFrame () {
     return true
   }
 
-  function isThisPointHere (point, outsideViewPort) {
+  function isThisPointHere (point, outsideViewPort, dontTransform) {
   // The second parameter is usefull when you want to check a point that you already know is outside the viewport.
 
         /* We need not to modify the point received, so me make a copy of it. */
@@ -253,12 +253,13 @@ function newFrame () {
 
         /* The point received is on the screen coordinates system, which already has zoom and displacement applied. We need to remove the zoom and displacement
         in order to have the point on the containers coordinate system and be able to compare it with its dimmensions. */
-
-    if (outsideViewPort === true) {
-      checkPoint = this.container.displacement.undisplaceThisPoint(checkPoint)
-      checkPoint = this.container.frame.unframeThisPoint(checkPoint)
-    } else {
-      checkPoint = unTransformThisPoint(checkPoint, frame.container)
+    if (dontTransform === false || dontTransform === undefined) {
+      if (outsideViewPort === true) {
+        checkPoint = this.container.displacement.undisplaceThisPoint(checkPoint)
+        checkPoint = this.container.frame.unframeThisPoint(checkPoint)
+      } else {
+        checkPoint = unTransformThisPoint(checkPoint, frame.container)
+      }
     }
 
         /* Now we check if the resulting point is whin the current Frame. */

PlottersManager.js

@@ -23,12 +23,8 @@ function newPlottersManager () {
     finalize: finalize
   }
 
-  let container = newContainer()
-  container.initialize()
-  thisObject.container = container
-
-  container.displacement.containerName = 'Plotter Manager'
-  container.frame.containerName = 'Plotter Manager'
+  thisObject.container = newContainer()
+  thisObject.container.initialize(MODULE_NAME)
 
   let initializationReady = false
 
@@ -255,13 +251,7 @@ function newPlottersManager () {
 
           let plotter = getNewPlotter(competition.plotter.host, competition.plotter.codeName, competition.plotter.moduleName)
 
-          plotter.container.displacement.parentDisplacement = thisObject.container.displacement
-          plotter.container.frame.parentFrame = thisObject.container.frame
-
-          plotter.container.parentContainer = thisObject.container
-
-          plotter.container.frame.width = thisObject.container.frame.width * 1
-          plotter.container.frame.height = thisObject.container.frame.height * 1
+          plotter.container.connectToParent(thisObject.container, true, true)
 
           plotter.container.frame.position.x = thisObject.container.frame.width / 2 - plotter.container.frame.width / 2
           plotter.container.frame.position.y = thisObject.container.frame.height / 2 - plotter.container.frame.height / 2
@@ -503,13 +493,7 @@ function newPlottersManager () {
 
           let plotter = getNewPlotter(pProductCard.product.plotter.devTeam, pProductCard.product.plotter.codeName, pProductCard.product.plotter.moduleName)
 
-          plotter.container.displacement.parentDisplacement = thisObject.container.displacement
-          plotter.container.frame.parentFrame = thisObject.container.frame
-
-          plotter.container.parentContainer = thisObject.container
-
-          plotter.container.frame.width = thisObject.container.frame.width * 1
-          plotter.container.frame.height = thisObject.container.frame.height * 1
+          plotter.container.connectToParent(thisObject.container, true, true)
 
           plotter.container.frame.position.x = thisObject.container.frame.width / 2 - plotter.container.frame.width / 2
           plotter.container.frame.position.y = thisObject.container.frame.height / 2 - plotter.container.frame.height / 2

Scales/TimeScale.js

@@ -1,9 +1,10 @@
-function newRigthScale () {
+function newTimeScale () {
   let thisObject = {
     container: undefined,
     draw: draw,
     getContainer: getContainer,
-    initialize: initialize
+    initialize: initialize,
+    lenghtPercentage: 100
   }
 
   const RIGHT_MARGIN = 50
@@ -12,8 +13,8 @@ function newRigthScale () {
   container.initialize()
   thisObject.container = container
 
-  thisObject.container.frame.width = RIGHT_MARGIN
-  thisObject.container.frame.height = viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y
+  thisObject.container.frame.width = viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.topLeft.x
+  thisObject.container.frame.height = 50
 
   container.frame.position.x = viewPort.visibleArea.bottomRight.x
   container.frame.position.y = TOP_SPACE_HEIGHT
@@ -30,10 +31,13 @@ function newRigthScale () {
 
   function onMouseWheel (pDelta) {
     if (pDelta < 0) {
-      pDelta = -0.1
+      thisObject.lenghtPercentage = thisObject.lenghtPercentage - 10
+      if (thisObject.lenghtPercentage < 50) { thisObject.lenghtPercentage = 50 }
     } else {
-      pDelta = 0.1
+      thisObject.lenghtPercentage = thisObject.lenghtPercentage + 10
+      if (thisObject.lenghtPercentage > 100) { thisObject.lenghtPercentage = 100 }
     }
+    thisObject.container.eventHandler.raiseEvent('Lenght Percentage Changed', thisObject.lenghtPercentage)
   }
 
   function getContainer (point) {
@@ -41,7 +45,7 @@ function newRigthScale () {
 
        /* First we check if this point is inside this object UI. */
 
-    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+    if (thisObject.container.frame.isThisPointHere(point, undefined, true) === true) {
       return this.container
     } else {
            /* This point does not belong to this space. */
@@ -51,6 +55,6 @@ function newRigthScale () {
   }
 
   function draw () {
-
+    thisObject.container.frame.draw(false, true)
   }
 }

Spaces/ChartSpace.js

@@ -23,20 +23,16 @@ function newChartSpace () {
     finalize: finalize
   }
 
-  var container = newContainer()
-  container.initialize()
-  thisObject.container = container
+  thisObject.container = newContainer()
+  thisObject.container.initialize(MODULE_NAME)
 
   thisObject.container.frame.width = CHART_SPACE_WIDTH
   thisObject.container.frame.height = CHART_SPACE_HEIGHT
 
-  container.displacement.containerName = 'Chart Space'
-  container.frame.containerName = 'Chart Space'
+  thisObject.container.frame.position.x = browserCanvas.width / 2 - thisObject.container.frame.width / 2
+  thisObject.container.frame.position.y = browserCanvas.height / 2 - thisObject.container.frame.height / 2
 
-  container.frame.position.x = browserCanvas.width / 2 - thisObject.container.frame.width / 2
-  container.frame.position.y = browserCanvas.height / 2 - thisObject.container.frame.height / 2
-
-  container.isDraggeable = false
+  thisObject.container.isDraggeable = false
 
   return thisObject
 
@@ -63,16 +59,10 @@ function newChartSpace () {
 
     var timeMachine = newTimeMachine()
 
-    timeMachine.container.displacement.parentDisplacement = this.container.displacement
-    timeMachine.container.frame.parentFrame = this.container.frame
-
-    timeMachine.container.parentContainer = this.container
+    timeMachine.container.connectToParent(thisObject.container, true, true)
 
         /* We make the time machine a little bit smaller than the current space. */
 
-    timeMachine.container.frame.width = this.container.frame.width * 1
-    timeMachine.container.frame.height = this.container.frame.height * 1
-
     timeMachine.container.frame.position.x = this.container.frame.width / 2 - timeMachine.container.frame.width / 2
     timeMachine.container.frame.position.y = this.container.frame.height / 2 - timeMachine.container.frame.height / 2
 

TimeMachine.js

@@ -25,18 +25,16 @@ function newTimeMachine () {
     finalize: finalize
   }
 
-  let container = newContainer()
-  container.initialize()
-  thisObject.container = container
+  thisObject.container = newContainer()
+  thisObject.container.initialize(MODULE_NAME)
   thisObject.container.isDraggeable = false
 
-  container.displacement.containerName = 'Time Machine'
-  container.frame.containerName = 'Time Machine'
-
   let controlPanelHandle             // We need this to destroy the Panel when this object is itself destroyed or no longer needs it...
-          // ... also to request a reference to the object for the cases we need it.
+                                    // ... also to request a reference to the object for the cases we need it.
   const SEPARATION_BETWEEN_TIMELINE_CHARTS = 1.5
 
+  let timeScale
+
   return thisObject
 
   function finalize () {
@@ -55,24 +53,27 @@ function newTimeMachine () {
   function initialize (callBackFunction) {
     if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') }
 
-        /* Each Time Machine has a Control Panel. */
+      /* Each Time Machine has a Control Panel. */
 
     let panelOwner = 'Global'
     controlPanelHandle = canvas.panelsSpace.createNewPanel('Time Control Panel', undefined, panelOwner)
     let controlPanel = canvas.panelsSpace.getPanel(controlPanelHandle, panelOwner)
 
-        /* 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. */
+       /* Each Time Machine has a Time Scale. */
+
+    timeScale = newTimeScale()
+    timeScale.initialize()
+
+    timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', onTimeScaleChanged)
+
+      /* 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.
 
     let timelineChart = newTimelineChart()
 
-    timelineChart.container.displacement.parentDisplacement = thisObject.container.displacement
-    timelineChart.container.frame.parentFrame = thisObject.container.frame
+    timelineChart.container.connectToParent(thisObject.container, true, true)
 
-    timelineChart.container.parentContainer = thisObject.container
-
-    timelineChart.container.frame.width = thisObject.container.frame.width * 1
     timelineChart.container.frame.height = thisObject.container.frame.height * 1 * canvas.bottomSpace.chartAspectRatio.aspectRatio.y
 
     timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2
@@ -131,12 +132,8 @@ function newTimeMachine () {
 
         let timelineChart = newTimelineChart()
 
-        timelineChart.container.displacement.parentDisplacement = thisObject.container.displacement
-        timelineChart.container.frame.parentFrame = thisObject.container.frame
+        timelineChart.container.connectToParent(thisObject.container, true, true)
 
-        timelineChart.container.parentContainer = thisObject.container
-
-        timelineChart.container.frame.width = thisObject.container.frame.width * 1
         timelineChart.container.frame.height = thisObject.container.frame.height * 1 * canvas.bottomSpace.chartAspectRatio.aspectRatio.y
 
         timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2
@@ -164,6 +161,11 @@ function newTimeMachine () {
     }
   }
 
+  function onTimeScaleChanged (newPercentageLength) {
+    thisObject.container.frame.width = thisObject.container.parentContainer.frame.width * newPercentageLength / 100
+    thisObject.container.eventHandler.raiseEvent('Dimmensions Changed')
+  }
+
   function drawBackground () {
     for (let i = 0; i < this.charts.length; i++) {
       let chart = this.charts[i]
@@ -178,6 +180,8 @@ function newTimeMachine () {
       let chart = this.charts[i]
       chart.draw()
     }
+
+    timeScale.draw()
   }
 
   function getContainer (point) {
@@ -187,14 +191,12 @@ function newTimeMachine () {
 
         /* Now we see which is the inner most container that has it */
 
+    container = timeScale.getContainer(point)
+    if (container !== undefined) { return container }
+
     for (let i = 0; i < this.charts.length; i++) {
       container = this.charts[i].getContainer(point)
-
-      if (container !== undefined) {
-                /* We found an inner container which has the point. We return it. */
-
-        return container
-      }
+      if (container !== undefined) { return container }
     }
 
         /* The point does not belong to any inner container, so we return the current container. */

TimelineChart.js

@@ -21,12 +21,8 @@
      finalize: finalize
    }
 
-   let container = newContainer()
-   container.initialize()
-   thisObject.container = container
-
-   container.displacement.containerName = 'Timeline Chart'
-   container.frame.containerName = 'Timeline Chart'
+   thisObject.container = newContainer()
+   thisObject.container.initialize(MODULE_NAME)
 
    let chartGrid
    let breakpointsBar
@@ -114,12 +110,12 @@
        chartGrid.initialize()
 
        breakpointsBar = newBreakpointsBar()
-       breakpointsBar.initialize(container, timeLineCoordinateSystem)
+       breakpointsBar.initialize(thisObject.container, timeLineCoordinateSystem)
 
        recalculateScale()
 
             // moveViewPortToCurrentDatetime();
-       moveToUserPosition(container, timeLineCoordinateSystem)
+       moveToUserPosition(thisObject.container, timeLineCoordinateSystem)
        timePeriod = INITIAL_TIME_PERIOD
        datetime = INITIAL_DATE
 
@@ -132,13 +128,7 @@
 
        plotterManager = newPlottersManager()
 
-       plotterManager.container.displacement.parentDisplacement = thisObject.container.displacement
-       plotterManager.container.frame.parentFrame = thisObject.container.frame
-
-       plotterManager.container.parentContainer = thisObject.container
-
-       plotterManager.container.frame.width = thisObject.container.frame.width
-       plotterManager.container.frame.height = thisObject.container.frame.height
+       plotterManager.container.connectToParent(thisObject.container, true, true)
 
        plotterManager.container.frame.position.x = 0
        plotterManager.container.frame.position.y = 0