Change in Code Indentation

Animation.js

@@ -1,9 +1,9 @@
 
-function newAnimation () {
-  const MODULE_NAME = 'Animation'
-  const ERROR_LOG = true
-  const logger = newWebDebugLog()
-  logger.fileName = MODULE_NAME
+function newAnimation() {
+    const MODULE_NAME = 'Animation'
+    const ERROR_LOG = true
+    const logger = newWebDebugLog()
+    logger.fileName = MODULE_NAME
 
     /*
 
@@ -13,162 +13,162 @@ function newAnimation () {
 
     */
 
-  let animationLoopHandle          // This is the handle to the animation loop. With this handle we can cancel the loop, for instance.
-  let callBackFunctions = new Map()
+    let animationLoopHandle          // This is the handle to the animation loop. With this handle we can cancel the loop, for instance.
+    let callBackFunctions = new Map()
 
-  let thisObject = {
-    start: start,
-    stop: stop,
-    addCallBackFunction: addCallBackFunction,
-    removeCallBackFunction: removeCallBackFunction,
-    initialize: initialize,
-    finalize: finalize
-  }
+    let thisObject = {
+        start: start,
+        stop: stop,
+        addCallBackFunction: addCallBackFunction,
+        removeCallBackFunction: removeCallBackFunction,
+        initialize: initialize,
+        finalize: finalize
+    }
 
-  let totalConsumption = 0
-  let totalCounter = 0
-  let pointerIcon
-  let videoRecorder
-  return thisObject
+    let totalConsumption = 0
+    let totalCounter = 0
+    let pointerIcon
+    let videoRecorder
+    return thisObject
 
-  function finalize () {
-    thisObject.stop()
-    pointerIcon = undefined
-    videoRecorder = undefined
-  }
+    function finalize() {
+        thisObject.stop()
+        pointerIcon = undefined
+        videoRecorder = undefined
+    }
 
-  function initialize () {
-    videoRecorder = newVideoRecorder()
-  }
+    function initialize() {
+        videoRecorder = newVideoRecorder()
+    }
 
-  function start () {
-    animationLoop()  // Inside this function the animation process is started, and at the same time it creates a loop.
-  }
+    function start() {
+        animationLoop()  // Inside this function the animation process is started, and at the same time it creates a loop.
+    }
 
-  function stop () {
-    window.cancelAnimationFrame(animationLoopHandle)
-  }
+    function stop() {
+        window.cancelAnimationFrame(animationLoopHandle)
+    }
 
-  function addCallBackFunction (key, callBack) {
-    callBackFunctions.set(key, callBack)
-  }
+    function addCallBackFunction(key, callBack) {
+        callBackFunctions.set(key, callBack)
+    }
 
-  function removeCallBackFunction (key) {
-    callBackFunctions.delete(key)
-  }
+    function removeCallBackFunction(key) {
+        callBackFunctions.delete(key)
+    }
 
-  function animationLoop () {
-    try {
-      /* First thing is to clear the actual canvas */
-      clearBrowserCanvas()
+    function animationLoop() {
+        try {
+            /* First thing is to clear the actual canvas */
+            clearBrowserCanvas()
 
-      /* We loop through the callback functions collections and execute them all. */
-      let performanceMap = new Map()
-      let totalTimeConsumed = 0
-      let totalElements = 0
-      let chanceToExecute
-      let randomNumber
-      let mustExecute
+            /* We loop through the callback functions collections and execute them all. */
+            let performanceMap = new Map()
+            let totalTimeConsumed = 0
+            let totalElements = 0
+            let chanceToExecute
+            let randomNumber
+            let mustExecute
 
-        // console.clear()
-      let row = 0
-      for (const [key, callBackFunction] of callBackFunctions.entries()) {
-        row++
-        switch (key) {
-          case 'Floating Space Physics':
-            chanceToExecute = 50
-            randomNumber = Math.random() * 100 * chanceToExecute
-            if (randomNumber > 100 - chanceToExecute) { mustExecute = true } else { mustExecute = false }
-            break
-          default: {
-            mustExecute = true
-          }
+            // console.clear()
+            let row = 0
+            for (const [key, callBackFunction] of callBackFunctions.entries()) {
+                row++
+                switch (key) {
+                    case 'Floating Space Physics':
+                        chanceToExecute = 50
+                        randomNumber = Math.random() * 100 * chanceToExecute
+                        if (randomNumber > 100 - chanceToExecute) { mustExecute = true } else { mustExecute = false }
+                        break
+                    default: {
+                        mustExecute = true
+                    }
 
-        }
-        let timeConsumed = 0
-        if (mustExecute === true) {
-          let t0 = performance.now()
-          callBackFunction()
-          let t1 = performance.now()
-          timeConsumed = t1 - t0
-          if (key === 'Charting Space Draw') {
-            if (Math.random() * 100 > 99) {
-              totalConsumption = 0
-              totalCounter = 0
+                }
+                let timeConsumed = 0
+                if (mustExecute === true) {
+                    let t0 = performance.now()
+                    callBackFunction()
+                    let t1 = performance.now()
+                    timeConsumed = t1 - t0
+                    if (key === 'Charting Space Draw') {
+                        if (Math.random() * 100 > 99) {
+                            totalConsumption = 0
+                            totalCounter = 0
+                        }
+
+                        totalConsumption = totalConsumption + timeConsumed
+                        totalCounter = totalCounter + 1
+                    }
+                    performanceMap.set(key, timeConsumed)
+                    totalTimeConsumed = totalTimeConsumed + timeConsumed
+                    totalElements++
+                }
             }
 
-            totalConsumption = totalConsumption + timeConsumed
-            totalCounter = totalCounter + 1
-          }
-          performanceMap.set(key, timeConsumed)
-          totalTimeConsumed = totalTimeConsumed + timeConsumed
-          totalElements++
+            /* Frame per Seconds */
+
+            ANIMATION_FRAME_PER_SECONDS = Math.trunc(1000 / totalTimeConsumed)
+
+            /* Performance Check */
+            if (SHOW_ANIMATION_PERFORMACE === true) {
+                row = 0
+                for (const [key, timeConsumed] of performanceMap.entries()) {
+                    row++
+                    labelToPrint = key + '   ' + timeConsumed.toFixed(4)
+                    printLabel(labelToPrint, 10, 100 + row * 30, 1, 20, UI_COLOR.RED)
+                    let percentage = timeConsumed * 100 / totalTimeConsumed
+                    labelToPrint = key + '   ' + percentage.toFixed(1) + '%'
+                    printLabel(labelToPrint, 300, 100 + row * 30, 1, 20, UI_COLOR.RED)
+                }
+
+                /* Other Variables */
+                row++
+                printLabel(DEBUG.variable1, 300, 100 + row * 30, 1, 20, UI_COLOR.RED)
+                row++
+                printLabel(DEBUG.variable2, 300, 100 + row * 30, 1, 20, UI_COLOR.RED)
+                row++
+                printLabel(DEBUG.variable3, 300, 100 + row * 30, 1, 20, UI_COLOR.RED)
+                row++
+                printLabel(DEBUG.variable4, 300, 100 + row * 30, 1, 20, UI_COLOR.RED)
+                row++
+                printLabel('Animation Frame Per Seconds: ' + ANIMATION_FRAME_PER_SECONDS, 300, 100 + row * 30, 1, 20, UI_COLOR.TITANIUM_YELLOW)
+            }
+
+            /* Video Recording */
+            videoRecorder.physics()
+            if (ARE_WE_RECORDING_A_VIDEO === true) {
+                videoRecorder.recordCanvas()
+            }
+
+            /* Panorama Recording */
+            if (ARE_WE_RECORDING_A_MARKET_PANORAMA === true) {
+                if (PANORAMA_WAS_PANNED === true) {
+                    addToMarketPanorama()
+                    PANORAMA_WAS_PANNED = false
+                }
+            }
+
+            /* We request the next frame to be drawn, and stablishing a loop */
+
+            /* Use this code for full animation speed. */
+            animationLoopHandle = window.requestAnimationFrame(animationLoop)
+
+            /* Use this code for max 10 frames per second animation speed, if the app is consumming too much of your CPU.  */
+            /*
+            setTimeout(nextLoop, 100)
+            function nextLoop () {
+              animationLoopHandle = window.requestAnimationFrame(animationLoop)
+            }
+            */
+        } catch (err) {
+            if (ERROR_LOG === true) { logger.write('[ERROR] animationLoop -> err = ' + err.stack) }
         }
-      }
-
-        /* Frame per Seconds */
-
-      ANIMATION_FRAME_PER_SECONDS = Math.trunc(1000 / totalTimeConsumed)
-
-        /* Performance Check */
-      if (SHOW_ANIMATION_PERFORMACE === true) {
-        row = 0
-        for (const [key, timeConsumed] of performanceMap.entries()) {
-          row++
-          labelToPrint = key + '   ' + timeConsumed.toFixed(4)
-          printLabel(labelToPrint, 10, 100 + row * 30, 1, 20, UI_COLOR.RED)
-          let percentage = timeConsumed * 100 / totalTimeConsumed
-          labelToPrint = key + '   ' + percentage.toFixed(1) + '%'
-          printLabel(labelToPrint, 300, 100 + row * 30, 1, 20, UI_COLOR.RED)
-        }
-
-          /* Other Variables */
-        row++
-        printLabel(DEBUG.variable1, 300, 100 + row * 30, 1, 20, UI_COLOR.RED)
-        row++
-        printLabel(DEBUG.variable2, 300, 100 + row * 30, 1, 20, UI_COLOR.RED)
-        row++
-        printLabel(DEBUG.variable3, 300, 100 + row * 30, 1, 20, UI_COLOR.RED)
-        row++
-        printLabel(DEBUG.variable4, 300, 100 + row * 30, 1, 20, UI_COLOR.RED)
-        row++
-        printLabel('Animation Frame Per Seconds: ' + ANIMATION_FRAME_PER_SECONDS, 300, 100 + row * 30, 1, 20, UI_COLOR.TITANIUM_YELLOW)
-      }
-
-      /* Video Recording */
-      videoRecorder.physics()
-      if (ARE_WE_RECORDING_A_VIDEO === true) {
-        videoRecorder.recordCanvas()
-      }
-
-      /* Panorama Recording */
-      if (ARE_WE_RECORDING_A_MARKET_PANORAMA === true) {
-        if (PANORAMA_WAS_PANNED === true) {
-          addToMarketPanorama()
-          PANORAMA_WAS_PANNED = false
-        }
-      }
-
-      /* We request the next frame to be drawn, and stablishing a loop */
-
-      /* Use this code for full animation speed. */
-      animationLoopHandle = window.requestAnimationFrame(animationLoop)
-
-      /* Use this code for max 10 frames per second animation speed, if the app is consumming too much of your CPU.  */
-      /*
-      setTimeout(nextLoop, 100)
-      function nextLoop () {
-        animationLoopHandle = window.requestAnimationFrame(animationLoop)
-      }
-      */
-    } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] animationLoop -> err = ' + err.stack) }
     }
-  }
 
-  function clearBrowserCanvas () {
-    if (canWeDraw === false) { return }
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
-    browserCanvasContext.clearRect(0, 0, browserCanvas.width, browserCanvas.height)
-  }
+    function clearBrowserCanvas() {
+        if (canWeDraw === false) { return }
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
+        browserCanvasContext.clearRect(0, 0, browserCanvas.width, browserCanvas.height)
+    }
 }

ChartingSpace/ChartUtilities.js

@@ -1,139 +1,139 @@
 
-function getSideDays (timeFrame) {
-  let daysOnSides
+function getSideDays(timeFrame) {
+    let daysOnSides
 
-  if (timeFrame < _1_HOUR_IN_MILISECONDS) {
-    daysOnSides = 1
-  }
+    if (timeFrame < _1_HOUR_IN_MILISECONDS) {
+        daysOnSides = 1
+    }
 
-  if (timeFrame === _1_HOUR_IN_MILISECONDS) {
-    daysOnSides = 9
-  }
+    if (timeFrame === _1_HOUR_IN_MILISECONDS) {
+        daysOnSides = 9
+    }
 
-  if (timeFrame === _2_HOURS_IN_MILISECONDS) {
-    daysOnSides = 10
-  }
+    if (timeFrame === _2_HOURS_IN_MILISECONDS) {
+        daysOnSides = 10
+    }
 
-  if (timeFrame === _3_HOURS_IN_MILISECONDS) {
-    daysOnSides = 12
-  }
+    if (timeFrame === _3_HOURS_IN_MILISECONDS) {
+        daysOnSides = 12
+    }
 
-  if (timeFrame === _4_HOURS_IN_MILISECONDS) {
-    daysOnSides = 20
-  }
+    if (timeFrame === _4_HOURS_IN_MILISECONDS) {
+        daysOnSides = 20
+    }
 
-  if (timeFrame === _6_HOURS_IN_MILISECONDS) {
-    daysOnSides = 35
-  }
+    if (timeFrame === _6_HOURS_IN_MILISECONDS) {
+        daysOnSides = 35
+    }
 
-  if (timeFrame === _8_HOURS_IN_MILISECONDS) {
-    daysOnSides = 44
-  }
+    if (timeFrame === _8_HOURS_IN_MILISECONDS) {
+        daysOnSides = 44
+    }
 
-  if (timeFrame === _12_HOURS_IN_MILISECONDS) {
-    daysOnSides = 56
-  }
+    if (timeFrame === _12_HOURS_IN_MILISECONDS) {
+        daysOnSides = 56
+    }
 
-  if (timeFrame === ONE_DAY_IN_MILISECONDS) {
-    daysOnSides = 154
-  }
+    if (timeFrame === ONE_DAY_IN_MILISECONDS) {
+        daysOnSides = 154
+    }
 
-  return daysOnSides
+    return daysOnSides
 }
 
-function getCondenseFactor (timeFrame) {
-  switch (timeFrame) {
-    case _1_MINUTE_IN_MILISECONDS: return 1
-    case _5_MINUTES_IN_MILISECONDS: return 5
-    case _10_MINUTES_IN_MILISECONDS: return 10
-    case _30_MINUTES_IN_MILISECONDS: return 50
-    case _1_HOUR_IN_MILISECONDS: return 100
-  }
+function getCondenseFactor(timeFrame) {
+    switch (timeFrame) {
+        case _1_MINUTE_IN_MILISECONDS: return 1
+        case _5_MINUTES_IN_MILISECONDS: return 5
+        case _10_MINUTES_IN_MILISECONDS: return 10
+        case _30_MINUTES_IN_MILISECONDS: return 50
+        case _1_HOUR_IN_MILISECONDS: return 100
+    }
 }
 
-function getTransparenceFactor (timeFrame) {
-  switch (timeFrame) {
-    case _1_MINUTE_IN_MILISECONDS: return '0.12'
-    case _5_MINUTES_IN_MILISECONDS: return '0.10'
-    case _10_MINUTES_IN_MILISECONDS: return '0.08'
-    case _30_MINUTES_IN_MILISECONDS: return '0.06'
-    case _1_HOUR_IN_MILISECONDS: return '0.04'
-  }
+function getTransparenceFactor(timeFrame) {
+    switch (timeFrame) {
+        case _1_MINUTE_IN_MILISECONDS: return '0.12'
+        case _5_MINUTES_IN_MILISECONDS: return '0.10'
+        case _10_MINUTES_IN_MILISECONDS: return '0.08'
+        case _30_MINUTES_IN_MILISECONDS: return '0.06'
+        case _1_HOUR_IN_MILISECONDS: return '0.04'
+    }
 }
 
-function recalculatePeriod (zoomLevel) {
-  // console.log('NEW ZOOM LEVEL', zoomLevel)
-  if (zoomLevel > 400) {
-    return _1_MINUTE_IN_MILISECONDS
-  }
+function recalculatePeriod(zoomLevel) {
+    // console.log('NEW ZOOM LEVEL', zoomLevel)
+    if (zoomLevel > 400) {
+        return _1_MINUTE_IN_MILISECONDS
+    }
 
-  if (zoomLevel > 360) {
-    return _2_MINUTES_IN_MILISECONDS
-  }
+    if (zoomLevel > 360) {
+        return _2_MINUTES_IN_MILISECONDS
+    }
 
-  if (zoomLevel > 330) {
-    return _3_MINUTES_IN_MILISECONDS
-  }
+    if (zoomLevel > 330) {
+        return _3_MINUTES_IN_MILISECONDS
+    }
 
-  if (zoomLevel > 300) {
-    return _4_MINUTES_IN_MILISECONDS
-  }
+    if (zoomLevel > 300) {
+        return _4_MINUTES_IN_MILISECONDS
+    }
 
-  if (zoomLevel > 270) {
-    return _5_MINUTES_IN_MILISECONDS
-  }
+    if (zoomLevel > 270) {
+        return _5_MINUTES_IN_MILISECONDS
+    }
 
-  if (zoomLevel > 250) {
-    return _10_MINUTES_IN_MILISECONDS
-  }
+    if (zoomLevel > 250) {
+        return _10_MINUTES_IN_MILISECONDS
+    }
 
-  if (zoomLevel > 230) {
-    return _15_MINUTES_IN_MILISECONDS
-  }
+    if (zoomLevel > 230) {
+        return _15_MINUTES_IN_MILISECONDS
+    }
 
-  if (zoomLevel > 210) {
-    return _20_MINUTES_IN_MILISECONDS
-  }
+    if (zoomLevel > 210) {
+        return _20_MINUTES_IN_MILISECONDS
+    }
 
-  if (zoomLevel > 190) {
-    return _30_MINUTES_IN_MILISECONDS
-  }
+    if (zoomLevel > 190) {
+        return _30_MINUTES_IN_MILISECONDS
+    }
 
-  if (zoomLevel > 170) {
-    return _40_MINUTES_IN_MILISECONDS
-  }
+    if (zoomLevel > 170) {
+        return _40_MINUTES_IN_MILISECONDS
+    }
 
-  if (zoomLevel > 150) {
-    return _45_MINUTES_IN_MILISECONDS
-  }
+    if (zoomLevel > 150) {
+        return _45_MINUTES_IN_MILISECONDS
+    }
 
-  if (zoomLevel > 130) {
-    return _1_HOUR_IN_MILISECONDS
-  }
+    if (zoomLevel > 130) {
+        return _1_HOUR_IN_MILISECONDS
+    }
 
-  if (zoomLevel > 110) {
-    return _2_HOURS_IN_MILISECONDS
-  }
+    if (zoomLevel > 110) {
+        return _2_HOURS_IN_MILISECONDS
+    }
 
-  if (zoomLevel > 80) {
-    return _3_HOURS_IN_MILISECONDS
-  }
+    if (zoomLevel > 80) {
+        return _3_HOURS_IN_MILISECONDS
+    }
 
-  if (zoomLevel > 50) {
-    return _4_HOURS_IN_MILISECONDS
-  }
+    if (zoomLevel > 50) {
+        return _4_HOURS_IN_MILISECONDS
+    }
 
-  if (zoomLevel > 35) {
-    return _6_HOURS_IN_MILISECONDS
-  }
+    if (zoomLevel > 35) {
+        return _6_HOURS_IN_MILISECONDS
+    }
 
-  if (zoomLevel > 20) {
-    return _8_HOURS_IN_MILISECONDS
-  }
+    if (zoomLevel > 20) {
+        return _8_HOURS_IN_MILISECONDS
+    }
 
-  if (zoomLevel > 10) {
-    return _12_HOURS_IN_MILISECONDS
-  }
+    if (zoomLevel > 10) {
+        return _12_HOURS_IN_MILISECONDS
+    }
 
-  return ONE_DAY_IN_MILISECONDS
+    return ONE_DAY_IN_MILISECONDS
 }

ChartingSpace/CoordinateSystem.js

@@ -1,4 +1,4 @@
- /*
+/*
 
 This Object object is responsible for defining the coordinate system in a TimeLine.
 
@@ -7,320 +7,320 @@ The scale on the Y axis depends on the data that wants to be plotted. Usually we
 
 */
 
-function newCoordinateSystem () {
-  let thisObject = {
-    min: undefined,
-    max: undefined,
-    parentMin: undefined,
-    parentMax: undefined,
-    childrenMin: undefined,
-    childrenMax: undefined,
-    maxHeight: undefined,
-    maxWidth: undefined,
-    scale: undefined,
-    eventHandler: undefined,
-    autoMinXScale: true,
-    autoMaxXScale: true,
-    autoMinYScale: true,
-    autoMaxYScale: true,
-    HORIZONTAL_MARGIN_FACTOR: 0.80,
-    VERTICAL_MARGIN_FACTOR: 0.90,
-    HORIZONTAL_MARGIN_INVERSE_FACTOR: 0.20,
-    VERTICAL_MARGIN_INVERSE_FACTOR: 0.10,
-    physics: physics,
-    reportParentXValue: reportParentXValue,
-    reportParentYValue: reportParentYValue,
-    reportXValue: reportXValue,
-    reportYValue: reportYValue,
-    zoomX: zoomX,
-    zoomY: zoomY,
-    recalculateScale: recalculateScale,
-    transformThisPoint: transformThisPoint,
-    transformThisPoint2: transformThisPoint2,
-    unInverseTransform: unInverseTransform,
-    inverseTransformUncappedY: inverseTransformUncappedY,
-    initializeX: initializeX,
-    initializeY: initializeY,
-    initialize: initialize,
-    finalize: finalize
-  }
-
-  thisObject.min = {
-    x: 0,
-    y: 0
-  }
-  thisObject.max = {
-    x: 0,
-    y: 0
-  }
-  thisObject.parentMin = {
-    x: 0,
-    y: 0
-  }
-  thisObject.parentMax = {
-    x: 0,
-    y: 0
-  }
-  thisObject.childrenMin = {
-    x: 0,
-    y: 0
-  }
-  thisObject.childrenMax = {
-    x: 0,
-    y: 0
-  }
-
-  thisObject.scale = {
-    x: 0,
-    y: 0
-  }
-
-  thisObject.eventHandler = newEventHandler()
-  thisObject.eventHandler.name = 'Coordinate System'
-
-  let newXMax = -VERY_LARGE_NUMBER
-  let newXMin = VERY_LARGE_NUMBER
-
-  let newYMax = -VERY_LARGE_NUMBER
-  let newYMin = VERY_LARGE_NUMBER
-
-  let parentMinChanged = false
-  let parentMaxChanged = false
-
-  return thisObject
-
-  function finalize () {
-    thisObject.eventHandler.finalize()
-    thisObject.eventHandler = undefined
-  }
-
-  function initialize (minValue, maxValue, pMaxWidth, pMaxHeight) {
-    /* Defines the min and max value of rate that we are going to transport to the available screen at the center position. */
-    thisObject.min.x = minValue.x
-    thisObject.max.x = maxValue.x
-
-    thisObject.min.y = minValue.y
-    thisObject.max.y = maxValue.y
-
-    thisObject.maxWidth = pMaxWidth
-    thisObject.maxHeight = pMaxHeight
-
-    recalculateScale()
-  }
-
-  function reportXValue (value) {
-    if (thisObject.autoMinXScale === true) {
-      if (value < newXMin && value !== 0) {
-        newXMin = value
-      }
-    }
-    if (thisObject.autoMaxXScale === true) {
-      if (value > newXMax && value !== 0) {
-        newXMax = value
-      }
-    }
-  }
-
-  function reportYValue (value) {
-    if (thisObject.autoMinYScale === true) {
-      if (value < newYMin) {
-        newYMin = value
-      }
-    }
-    if (thisObject.autoMaxYScale === true) {
-      if (value > newYMax) {
-        newYMax = value
-      }
-    }
-  }
-
-  function reportParentXValue (min, max) {
-    if (thisObject.autoMinXScale === true) {
-      if (thisObject.parentMin.x !== min) {
-        thisObject.parentMin.x = min
-      }
-    }
-    if (thisObject.autoMaxXScale === true) {
-      if (thisObject.parentMax.x !== max) {
-        thisObject.parentMax.x = max
-      }
-    }
-  }
-
-  function reportParentYValue (min, max) {
-    if (thisObject.autoMinYScale === true) {
-      if (thisObject.parentMin.y !== min) {
-        thisObject.parentMin.y = min
-      }
-    }
-    if (thisObject.autoMaxYScale === true) {
-      if (thisObject.parentMax.y !== max) {
-        thisObject.parentMax.y = max
-      }
-    }
-  }
-
-  function physics () {
-    let mustRecalculate = false
-
-    if ((thisObject.autoMinXScale === true || thisObject.autoMaxXScale === true)) {
-      if (thisObject.autoMaxXScale === true && thisObject.childrenMax.x !== newXMax && newXMax !== -VERY_LARGE_NUMBER) {
-        thisObject.childrenMax.x = newXMax
-      }
-
-      if (thisObject.autoMaxXScale === true) {
-        newXMax = -VERY_LARGE_NUMBER
-      }
-
-      if (thisObject.autoMinXScale === true && thisObject.childrenMin.x !== newXMin && newXMin !== VERY_LARGE_NUMBER) {
-        thisObject.childrenMin.x = newXMin
-        newXMin = VERY_LARGE_NUMBER
-      }
-
-      if (thisObject.autoMinXScale === true) {
-        newXMin = VERY_LARGE_NUMBER
-      }
+function newCoordinateSystem() {
+    let thisObject = {
+        min: undefined,
+        max: undefined,
+        parentMin: undefined,
+        parentMax: undefined,
+        childrenMin: undefined,
+        childrenMax: undefined,
+        maxHeight: undefined,
+        maxWidth: undefined,
+        scale: undefined,
+        eventHandler: undefined,
+        autoMinXScale: true,
+        autoMaxXScale: true,
+        autoMinYScale: true,
+        autoMaxYScale: true,
+        HORIZONTAL_MARGIN_FACTOR: 0.80,
+        VERTICAL_MARGIN_FACTOR: 0.90,
+        HORIZONTAL_MARGIN_INVERSE_FACTOR: 0.20,
+        VERTICAL_MARGIN_INVERSE_FACTOR: 0.10,
+        physics: physics,
+        reportParentXValue: reportParentXValue,
+        reportParentYValue: reportParentYValue,
+        reportXValue: reportXValue,
+        reportYValue: reportYValue,
+        zoomX: zoomX,
+        zoomY: zoomY,
+        recalculateScale: recalculateScale,
+        transformThisPoint: transformThisPoint,
+        transformThisPoint2: transformThisPoint2,
+        unInverseTransform: unInverseTransform,
+        inverseTransformUncappedY: inverseTransformUncappedY,
+        initializeX: initializeX,
+        initializeY: initializeY,
+        initialize: initialize,
+        finalize: finalize
     }
 
-    if ((thisObject.autoMinYScale === true || thisObject.autoMaxYScale === true)) {
-      if (thisObject.autoMaxYScale === true && thisObject.childrenMax.y !== newYMax && newYMax !== -VERY_LARGE_NUMBER) {
-        thisObject.childrenMax.y = newYMax
-      }
-
-      if (thisObject.autoMaxYScale === true) {
-        newYMax = -VERY_LARGE_NUMBER
-      }
-
-      if (thisObject.autoMinYScale === true && thisObject.childrenMin.y !== newYMin && newYMin !== VERY_LARGE_NUMBER) {
-        thisObject.childrenMin.y = newYMin
-        newYMin = VERY_LARGE_NUMBER
-      }
-
-      if (thisObject.autoMinYScale === true) {
-        newYMin = VERY_LARGE_NUMBER
-      }
+    thisObject.min = {
+        x: 0,
+        y: 0
+    }
+    thisObject.max = {
+        x: 0,
+        y: 0
+    }
+    thisObject.parentMin = {
+        x: 0,
+        y: 0
+    }
+    thisObject.parentMax = {
+        x: 0,
+        y: 0
+    }
+    thisObject.childrenMin = {
+        x: 0,
+        y: 0
+    }
+    thisObject.childrenMax = {
+        x: 0,
+        y: 0
     }
 
-    /* Here we will see if any of the children or parent values modify the current status quo */
-    /* Min */
-    let minX = Math.min(thisObject.childrenMin.x, thisObject.parentMin.x)
-    let minY = Math.min(thisObject.childrenMin.y, thisObject.parentMin.y)
-    let maxX = Math.max(thisObject.childrenMax.x, thisObject.parentMax.x)
-    let maxY = Math.max(thisObject.childrenMax.y, thisObject.parentMax.y)
-
-    if (thisObject.parentMin.x === 0) {
-      minX = thisObject.childrenMin.x
+    thisObject.scale = {
+        x: 0,
+        y: 0
     }
 
-    if (thisObject.parentMin.y === 0) {
-      minY = thisObject.childrenMin.y
+    thisObject.eventHandler = newEventHandler()
+    thisObject.eventHandler.name = 'Coordinate System'
+
+    let newXMax = -VERY_LARGE_NUMBER
+    let newXMin = VERY_LARGE_NUMBER
+
+    let newYMax = -VERY_LARGE_NUMBER
+    let newYMin = VERY_LARGE_NUMBER
+
+    let parentMinChanged = false
+    let parentMaxChanged = false
+
+    return thisObject
+
+    function finalize() {
+        thisObject.eventHandler.finalize()
+        thisObject.eventHandler = undefined
     }
 
-    if (thisObject.parentMax.x === 0) {
-      maxX = thisObject.childrenMax.x
+    function initialize(minValue, maxValue, pMaxWidth, pMaxHeight) {
+        /* Defines the min and max value of rate that we are going to transport to the available screen at the center position. */
+        thisObject.min.x = minValue.x
+        thisObject.max.x = maxValue.x
+
+        thisObject.min.y = minValue.y
+        thisObject.max.y = maxValue.y
+
+        thisObject.maxWidth = pMaxWidth
+        thisObject.maxHeight = pMaxHeight
+
+        recalculateScale()
     }
 
-    if (thisObject.parentMax.y === 0) {
-      maxY = thisObject.childrenMax.y
+    function reportXValue(value) {
+        if (thisObject.autoMinXScale === true) {
+            if (value < newXMin && value !== 0) {
+                newXMin = value
+            }
+        }
+        if (thisObject.autoMaxXScale === true) {
+            if (value > newXMax && value !== 0) {
+                newXMax = value
+            }
+        }
     }
 
-    if (minX !== 0 && thisObject.min.x !== minX && thisObject.autoMinXScale === true) {
-      thisObject.min.x = minX
-      mustRecalculate = true
+    function reportYValue(value) {
+        if (thisObject.autoMinYScale === true) {
+            if (value < newYMin) {
+                newYMin = value
+            }
+        }
+        if (thisObject.autoMaxYScale === true) {
+            if (value > newYMax) {
+                newYMax = value
+            }
+        }
     }
 
-    if (minY !== 0 && thisObject.min.y !== minY && thisObject.autoMinYScale === true) {
-      thisObject.min.y = minY
-      mustRecalculate = true
+    function reportParentXValue(min, max) {
+        if (thisObject.autoMinXScale === true) {
+            if (thisObject.parentMin.x !== min) {
+                thisObject.parentMin.x = min
+            }
+        }
+        if (thisObject.autoMaxXScale === true) {
+            if (thisObject.parentMax.x !== max) {
+                thisObject.parentMax.x = max
+            }
+        }
     }
 
-    if (maxX !== 0 && thisObject.max.x !== maxX && thisObject.autoMaxXScale === true) {
-      thisObject.max.x = maxX
-      mustRecalculate = true
+    function reportParentYValue(min, max) {
+        if (thisObject.autoMinYScale === true) {
+            if (thisObject.parentMin.y !== min) {
+                thisObject.parentMin.y = min
+            }
+        }
+        if (thisObject.autoMaxYScale === true) {
+            if (thisObject.parentMax.y !== max) {
+                thisObject.parentMax.y = max
+            }
+        }
     }
 
-    if (maxY !== 0 && thisObject.max.y !== maxY && thisObject.autoMaxYScale === true) {
-      thisObject.max.y = maxY
-      mustRecalculate = true
+    function physics() {
+        let mustRecalculate = false
+
+        if ((thisObject.autoMinXScale === true || thisObject.autoMaxXScale === true)) {
+            if (thisObject.autoMaxXScale === true && thisObject.childrenMax.x !== newXMax && newXMax !== -VERY_LARGE_NUMBER) {
+                thisObject.childrenMax.x = newXMax
+            }
+
+            if (thisObject.autoMaxXScale === true) {
+                newXMax = -VERY_LARGE_NUMBER
+            }
+
+            if (thisObject.autoMinXScale === true && thisObject.childrenMin.x !== newXMin && newXMin !== VERY_LARGE_NUMBER) {
+                thisObject.childrenMin.x = newXMin
+                newXMin = VERY_LARGE_NUMBER
+            }
+
+            if (thisObject.autoMinXScale === true) {
+                newXMin = VERY_LARGE_NUMBER
+            }
+        }
+
+        if ((thisObject.autoMinYScale === true || thisObject.autoMaxYScale === true)) {
+            if (thisObject.autoMaxYScale === true && thisObject.childrenMax.y !== newYMax && newYMax !== -VERY_LARGE_NUMBER) {
+                thisObject.childrenMax.y = newYMax
+            }
+
+            if (thisObject.autoMaxYScale === true) {
+                newYMax = -VERY_LARGE_NUMBER
+            }
+
+            if (thisObject.autoMinYScale === true && thisObject.childrenMin.y !== newYMin && newYMin !== VERY_LARGE_NUMBER) {
+                thisObject.childrenMin.y = newYMin
+                newYMin = VERY_LARGE_NUMBER
+            }
+
+            if (thisObject.autoMinYScale === true) {
+                newYMin = VERY_LARGE_NUMBER
+            }
+        }
+
+        /* Here we will see if any of the children or parent values modify the current status quo */
+        /* Min */
+        let minX = Math.min(thisObject.childrenMin.x, thisObject.parentMin.x)
+        let minY = Math.min(thisObject.childrenMin.y, thisObject.parentMin.y)
+        let maxX = Math.max(thisObject.childrenMax.x, thisObject.parentMax.x)
+        let maxY = Math.max(thisObject.childrenMax.y, thisObject.parentMax.y)
+
+        if (thisObject.parentMin.x === 0) {
+            minX = thisObject.childrenMin.x
+        }
+
+        if (thisObject.parentMin.y === 0) {
+            minY = thisObject.childrenMin.y
+        }
+
+        if (thisObject.parentMax.x === 0) {
+            maxX = thisObject.childrenMax.x
+        }
+
+        if (thisObject.parentMax.y === 0) {
+            maxY = thisObject.childrenMax.y
+        }
+
+        if (minX !== 0 && thisObject.min.x !== minX && thisObject.autoMinXScale === true) {
+            thisObject.min.x = minX
+            mustRecalculate = true
+        }
+
+        if (minY !== 0 && thisObject.min.y !== minY && thisObject.autoMinYScale === true) {
+            thisObject.min.y = minY
+            mustRecalculate = true
+        }
+
+        if (maxX !== 0 && thisObject.max.x !== maxX && thisObject.autoMaxXScale === true) {
+            thisObject.max.x = maxX
+            mustRecalculate = true
+        }
+
+        if (maxY !== 0 && thisObject.max.y !== maxY && thisObject.autoMaxYScale === true) {
+            thisObject.max.y = maxY
+            mustRecalculate = true
+        }
+
+        if (mustRecalculate === true) {
+            recalculateScale()
+        }
     }
 
-    if (mustRecalculate === true) {
-      recalculateScale()
+    function recalculateScale(event) {
+        thisObject.scale.x = thisObject.maxWidth * thisObject.HORIZONTAL_MARGIN_FACTOR / (thisObject.max.x - thisObject.min.x)
+        thisObject.scale.y = thisObject.maxHeight * thisObject.VERTICAL_MARGIN_FACTOR / (thisObject.max.y - thisObject.min.y)
+
+        thisObject.eventHandler.raiseEvent('Scale Changed', event)
     }
-  }
 
-  function recalculateScale (event) {
-    thisObject.scale.x = thisObject.maxWidth * thisObject.HORIZONTAL_MARGIN_FACTOR / (thisObject.max.x - thisObject.min.x)
-    thisObject.scale.y = thisObject.maxHeight * thisObject.VERTICAL_MARGIN_FACTOR / (thisObject.max.y - thisObject.min.y)
+    function zoomX(factor, mousePosition, container) {
+        let mouseAtCointainer = unTransformThisPoint(mousePosition, container)
+        let leftDistance = mouseAtCointainer.x
+        let rightDistance = container.frame.width - mouseAtCointainer.x
+        let diff = thisObject.max.x - thisObject.min.x
+        let min = thisObject.min.x + diff * factor * leftDistance / (container.frame.width / 2)
+        let max = thisObject.max.x - diff * factor * rightDistance / (container.frame.width / 2)
 
-    thisObject.eventHandler.raiseEvent('Scale Changed', event)
-  }
-
-  function zoomX (factor, mousePosition, container) {
-    let mouseAtCointainer = unTransformThisPoint(mousePosition, container)
-    let leftDistance = mouseAtCointainer.x
-    let rightDistance = container.frame.width - mouseAtCointainer.x
-    let diff = thisObject.max.x - thisObject.min.x
-    let min = thisObject.min.x + diff * factor * leftDistance / (container.frame.width / 2)
-    let max = thisObject.max.x - diff * factor * rightDistance / (container.frame.width / 2)
-
-    if (min < max) {
-      let mustRecalculate = false
-      if (thisObject.autoMinXScale === false) {
-        thisObject.min.x = min
-        mustRecalculate = true
-      }
-      if (thisObject.autoMaxXScale === false) {
-        thisObject.max.x = max
-        mustRecalculate = true
-      }
-      if (mustRecalculate === true) {
-        thisObject.recalculateScale()
-      }
+        if (min < max) {
+            let mustRecalculate = false
+            if (thisObject.autoMinXScale === false) {
+                thisObject.min.x = min
+                mustRecalculate = true
+            }
+            if (thisObject.autoMaxXScale === false) {
+                thisObject.max.x = max
+                mustRecalculate = true
+            }
+            if (mustRecalculate === true) {
+                thisObject.recalculateScale()
+            }
+        }
     }
-  }
 
-  function zoomY (factor, mousePosition, container) {
-    let mouseAtCointainer = unTransformThisPoint(mousePosition, container)
-    let topDistance = mouseAtCointainer.y
-    let bottomDistance = container.frame.height - mouseAtCointainer.y
-    let diff = thisObject.max.y - thisObject.min.y
-    let min = thisObject.min.y + diff * factor * bottomDistance / (container.frame.height / 2)
-    let max = thisObject.max.y - diff * factor * topDistance / (container.frame.height / 2)
+    function zoomY(factor, mousePosition, container) {
+        let mouseAtCointainer = unTransformThisPoint(mousePosition, container)
+        let topDistance = mouseAtCointainer.y
+        let bottomDistance = container.frame.height - mouseAtCointainer.y
+        let diff = thisObject.max.y - thisObject.min.y
+        let min = thisObject.min.y + diff * factor * bottomDistance / (container.frame.height / 2)
+        let max = thisObject.max.y - diff * factor * topDistance / (container.frame.height / 2)
 
-    if (min < max) {
-      let mustRecalculate = false
-      if (thisObject.autoMinYScale === false) {
-        thisObject.min.y = min
-        mustRecalculate = true
-      }
-      if (thisObject.autoMaxYScale === false) {
-        thisObject.max.y = max
-        mustRecalculate = true
-      }
-      if (mustRecalculate === true) {
-        thisObject.recalculateScale()
-      }
+        if (min < max) {
+            let mustRecalculate = false
+            if (thisObject.autoMinYScale === false) {
+                thisObject.min.y = min
+                mustRecalculate = true
+            }
+            if (thisObject.autoMaxYScale === false) {
+                thisObject.max.y = max
+                mustRecalculate = true
+            }
+            if (mustRecalculate === true) {
+                thisObject.recalculateScale()
+            }
+        }
     }
-  }
 
-  function initializeX (minValue, maxValue, maxWidth) {
-    thisObject.min.x = minValue.x // * 0.999; // 0.1% less
-    thisObject.max.x = maxValue.x // * 1.001; // 0.1% more
+    function initializeX(minValue, maxValue, maxWidth) {
+        thisObject.min.x = minValue.x // * 0.999; // 0.1% less
+        thisObject.max.x = maxValue.x // * 1.001; // 0.1% more
 
-    thisObject.scale.x = thisObject.maxWidth / (thisObject.max.x - thisObject.min.x)
-  }
+        thisObject.scale.x = thisObject.maxWidth / (thisObject.max.x - thisObject.min.x)
+    }
 
-  function initializeY (minValue, maxValue, pMaxHeight) {
-    thisObject.min.y = minValue.y // * 0.999; // 0.1% less
-    thisObject.max.y = maxValue.y // * 1.001; // 0.1% more
+    function initializeY(minValue, maxValue, pMaxHeight) {
+        thisObject.min.y = minValue.y // * 0.999; // 0.1% less
+        thisObject.max.y = maxValue.y // * 1.001; // 0.1% more
 
-    thisObject.scale.y = pMaxHeight / (thisObject.max.y - thisObject.min.y)
+        thisObject.scale.y = pMaxHeight / (thisObject.max.y - thisObject.min.y)
 
-    thisObject.maxHeight = pMaxHeight
-  }
+        thisObject.maxHeight = pMaxHeight
+    }
 
-  function transformThisPoint (point) {
+    function transformThisPoint(point) {
         /*
 
         This is the straigh fordward transformation this object provides. The input is a point on the data set that wants to be plotted in a timeline.
@@ -334,38 +334,38 @@ function newCoordinateSystem () {
 
         */
 
-    point = {
-      x: (point.x - thisObject.min.x) * thisObject.scale.x + thisObject.maxWidth * thisObject.HORIZONTAL_MARGIN_INVERSE_FACTOR / 2,
-      y: thisObject.maxHeight - (point.y - thisObject.min.y) * thisObject.scale.y - thisObject.maxHeight * thisObject.VERTICAL_MARGIN_INVERSE_FACTOR / 2
+        point = {
+            x: (point.x - thisObject.min.x) * thisObject.scale.x + thisObject.maxWidth * thisObject.HORIZONTAL_MARGIN_INVERSE_FACTOR / 2,
+            y: thisObject.maxHeight - (point.y - thisObject.min.y) * thisObject.scale.y - thisObject.maxHeight * thisObject.VERTICAL_MARGIN_INVERSE_FACTOR / 2
+        }
+
+        return point
     }
 
-    return point
-  }
+    function transformThisPoint2(point) {
+        point = {
+            x: (point.x - thisObject.min.x) * thisObject.scale.x + thisObject.maxWidth * thisObject.HORIZONTAL_MARGIN_INVERSE_FACTOR / 2,
+            y: (thisObject.maxHeight - point.y - thisObject.min.y) * thisObject.scale.y - thisObject.maxHeight * thisObject.VERTICAL_MARGIN_INVERSE_FACTOR / 2
+        }
 
-  function transformThisPoint2 (point) {
-    point = {
-      x: (point.x - thisObject.min.x) * thisObject.scale.x + thisObject.maxWidth * thisObject.HORIZONTAL_MARGIN_INVERSE_FACTOR / 2,
-      y: (thisObject.maxHeight - point.y - thisObject.min.y) * thisObject.scale.y - thisObject.maxHeight * thisObject.VERTICAL_MARGIN_INVERSE_FACTOR / 2
+        return point
     }
 
-    return point
-  }
+    function unInverseTransform(point, inverseY) {
+        point = {
+            x: ((point.x - thisObject.maxWidth * thisObject.HORIZONTAL_MARGIN_INVERSE_FACTOR / 2) / thisObject.scale.x) + thisObject.min.x,
+            y: (inverseY * thisObject.VERTICAL_MARGIN_FACTOR - point.y + thisObject.maxHeight * thisObject.VERTICAL_MARGIN_INVERSE_FACTOR / 2) / thisObject.scale.y + thisObject.min.y
+        }
 
-  function unInverseTransform (point, inverseY) {
-    point = {
-      x: ((point.x - thisObject.maxWidth * thisObject.HORIZONTAL_MARGIN_INVERSE_FACTOR / 2) / thisObject.scale.x) + thisObject.min.x,
-      y: (inverseY * thisObject.VERTICAL_MARGIN_FACTOR - point.y + thisObject.maxHeight * thisObject.VERTICAL_MARGIN_INVERSE_FACTOR / 2) / thisObject.scale.y + thisObject.min.y
+        return point
     }
 
-    return point
-  }
+    function inverseTransformUncappedY(point, inverseY) {
+        point = {
+            x: (point.x - thisObject.min.x) * thisObject.scale.x + thisObject.maxWidth * thisObject.HORIZONTAL_MARGIN_INVERSE_FACTOR / 2,
+            y: (inverseY * thisObject.VERTICAL_MARGIN_FACTOR - point.y) * thisObject.scale.y - thisObject.maxHeight * thisObject.VERTICAL_MARGIN_INVERSE_FACTOR / 2
+        }
 
-  function inverseTransformUncappedY (point, inverseY) {
-    point = {
-      x: (point.x - thisObject.min.x) * thisObject.scale.x + thisObject.maxWidth * thisObject.HORIZONTAL_MARGIN_INVERSE_FACTOR / 2,
-      y: (inverseY * thisObject.VERTICAL_MARGIN_FACTOR - point.y) * thisObject.scale.y - thisObject.maxHeight * thisObject.VERTICAL_MARGIN_INVERSE_FACTOR / 2
+        return point
     }
-
-    return point
-  }
 }

ChartingSpace/PlottersManager.js

@@ -1,459 +1,459 @@
-function newPlottersManager () {
-  const MODULE_NAME = 'Plotters Manager'
-  const ERROR_LOG = true
-  const logger = newWebDebugLog()
-  logger.fileName = MODULE_NAME
+function newPlottersManager() {
+    const MODULE_NAME = 'Plotters Manager'
+    const ERROR_LOG = true
+    const logger = newWebDebugLog()
+    logger.fileName = MODULE_NAME
 
-  let timeFrame = INITIAL_TIME_PERIOD
-  let datetime = NEW_SESSION_INITIAL_DATE
+    let timeFrame = INITIAL_TIME_PERIOD
+    let datetime = NEW_SESSION_INITIAL_DATE
 
-  let thisObject = {
-    fitFunction: undefined,
-    container: undefined,
-    payload: undefined,
-    connectors: [],
-    setDatetime: setDatetime,
-    setTimeFrame: setTimeFrame,
-    setCoordinateSystem: setCoordinateSystem,
-    draw: draw,
-    getContainer: getContainer,
-    initialize: initialize,
-    finalize: finalize
-  }
-
-  thisObject.connectors = []
-
-  let initializationReady = false
-  let layersPanel
-  let onLayerStatusChangedEventSuscriptionId
-  let coordinateSystem
-
-  setupContainer()
-  return thisObject
-
-  function setupContainer () {
-    thisObject.container = newContainer()
-    thisObject.container.initialize(MODULE_NAME)
-  }
-
-  function finalize () {
-    layersPanel.container.eventHandler.stopListening(onLayerStatusChangedEventSuscriptionId)
-    layersPanel = undefined
-
-    for (let i = 0; i < thisObject.connectors.length; i++) {
-      let connector = thisObject.connectors[i]
-      /* Then the panels. */
-      for (let j = 0; j < connector.panels.length; j++) {
-        canvas.panelsSpace.destroyPanel(connector.panels[j])
-        connector.panels[j] = undefined
-      }
-      connector.panels = undefined
-
-      /* Finalize the plotters */
-      if (connector.plotter.finalize !== undefined) {
-        connector.plotter.container.eventHandler.stopListening(connector.plotter.onRecordChangeEventsSubscriptionId)
-        connector.plotter.finalize()
-      }
-      connector.plotter = undefined
-
-      /* Finally the Storage Objects */
-      finalizeStorage(connector.storage)
-      connector.storage = undefined
-
-      connector = undefined
+    let thisObject = {
+        fitFunction: undefined,
+        container: undefined,
+        payload: undefined,
+        connectors: [],
+        setDatetime: setDatetime,
+        setTimeFrame: setTimeFrame,
+        setCoordinateSystem: setCoordinateSystem,
+        draw: draw,
+        getContainer: getContainer,
+        initialize: initialize,
+        finalize: finalize
     }
+
     thisObject.connectors = []
-    coordinateSystem = undefined
 
-    thisObject.container.finalize()
-    thisObject.container = undefined
-    thisObject.payload = undefined
-  }
+    let initializationReady = false
+    let layersPanel
+    let onLayerStatusChangedEventSuscriptionId
+    let coordinateSystem
 
-  function finalizeStorage (storage) {
-    storage.eventHandler.stopListening(storage.onMarketFileLoadedLayerEventsSubscriptionId)
-    storage.eventHandler.stopListening(storage.onDailyFileLoadedLayerEventsSubscriptionId)
-    storage.eventHandler.stopListening(storage.onSingleFileLoadedLayerEventsSubscriptionId)
-    storage.eventHandler.stopListening(storage.onFileSequenceLoadedLayerEventsSubscriptionId)
-    storage.eventHandler.stopListening(storage.onDailyFileLoadedPlotterEventsSubscriptionId)
-    storage.finalize()
-  }
+    setupContainer()
+    return thisObject
 
-  function initialize (pLayersPanel) {
-    /* Remember this */
-    layersPanel = pLayersPanel
-
-    /* Listen to the event of change of status */
-    onLayerStatusChangedEventSuscriptionId = layersPanel.container.eventHandler.listenToEvent('Layer Status Changed', onLayerStatusChanged)
-  }
-
-  function initializePlotter (layer) {
-    try {
-      /* Before Initializing a Plotter, we need the Storage it will use, loaded with the files it will initially need. */
-      let storage = newProductStorage(layer.payload.node.id)
-
-      /*
-      Before Initializing the Storage, we will put the Layer to listen to the events the storage will raise every time a file is loaded,
-      so that the UI can somehow show this. There are different types of events.
-      */
-      for (let i = 0; i < layer.definition.referenceParent.referenceParent.datasets.length; i++) {
-        let dataset = layer.definition.referenceParent.referenceParent.datasets[i]
-
-        switch (dataset.config.type) {
-          case 'Market Files': {
-            storage.onMarketFileLoadedLayerEventsSubscriptionId = storage.eventHandler.listenToEvent('Market File Loaded', layer.onMarketFileLoaded)
-          }
-            break
-          case 'Daily Files': {
-            storage.onDailyFileLoadedLayerEventsSubscriptionId = storage.eventHandler.listenToEvent('Daily File Loaded', layer.onDailyFileLoaded)
-          }
-            break
-          case 'Single File': {
-            storage.onSingleFileLoadedLayerEventsSubscriptionId = storage.eventHandler.listenToEvent('Single File Loaded', layer.onSingleFileLoaded)
-          }
-            break
-          case 'File Sequence': {
-            storage.onFileSequenceLoadedLayerEventsSubscriptionId = storage.eventHandler.listenToEvent('File Sequence Loaded', layer.onFileSequenceLoaded)
-          }
-            break
-          default: {
-            if (ERROR_LOG === true) {
-              logger.write('[ERROR] initializePlotter -> Dataset Type Incorrect or Undefined -> dataset.type = ' + dataset.type)
-            }
-            return
-          }
-        }
-      }
-
-      let baseAsset = layer.definition.referenceParent.parentNode.referenceParent.baseAsset.referenceParent.config.codeName
-      let quotedAsset = layer.definition.referenceParent.parentNode.referenceParent.quotedAsset.referenceParent.config.codeName
-      let market = {
-        baseAsset: baseAsset,
-        quotedAsset: quotedAsset
-      }
-      let productDefinition = layer.definition.referenceParent.referenceParent
-      let bot = layer.definition.referenceParent.referenceParent.parentNode
-      let dataMine = layer.definition.referenceParent.referenceParent.parentNode.parentNode
-      let exchange = layer.definition.referenceParent.parentNode.referenceParent.parentNode.parentNode
-      let plotterModule = layer.definition.referenceParent.referenceParent.referenceParent
-      let session
-      let tradingSystem
-      let tradingEngine
-
-      /*
-      A layer can be referencing a Data Product in two different branches of the Network hiriatchy.
-      In one of those braches we can get the Session node, at the other we Cannot.
-      */
-      if (layer.definition.referenceParent.parentNode.parentNode !== undefined) {
-        if (layer.definition.referenceParent.parentNode.parentNode.type === 'Session Reference') {
-          if (layer.definition.referenceParent.parentNode.parentNode.referenceParent !== undefined) {
-            session = layer.definition.referenceParent.parentNode.parentNode.referenceParent
-
-            /* From the session we might be able to reach the Trading System or the Trading Engine */
-            if (session.tradingSystemReference !== undefined) {
-              tradingSystem = session.tradingSystemReference.referenceParent
-            }
-            if (session.tradingEngineReference !== undefined) {
-              tradingEngine = session.tradingEngineReference.referenceParent
-            }
-          }
-        }
-      }
-
-      let host = layer.networkNode.config.host
-      let webPort = layer.networkNode.config.webPort
-      if (host === undefined) { host = 'localhost' }
-      if (webPort === undefined) { webPort = window.location.port }
-
-      let eventsServerClient = canvas.designSpace.workspace.eventsServerClients.get(layer.networkNode.id)
-
-      storage.initialize(
-        dataMine,
-        bot,
-        session,
-        productDefinition,
-        exchange,
-        market,
-        datetime,
-        timeFrame,
-        host,
-        webPort,
-        eventsServerClient,
-        onProductStorageInitialized
-      )
-
-      function onProductStorageInitialized (err) {
-        if (err.result === GLOBAL.DEFAULT_OK_RESPONSE.result) {
-            /* Now we have all the initial data loaded and ready to be delivered to the new instance of the plotter. */
-          let plotter
-
-          if (plotterModule.config.isLegacy !== true) {
-            plotter = newPlotter()
-          } else {
-            plotter = getNewPlotter(dataMine.config.codeName, plotterModule.parentNode.config.codeName, plotterModule.config.codeName)
-          }
-
-          plotter.container.connectToParent(thisObject.container, true, true, false, true, true, true, false, false, 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
-          plotter.fitFunction = thisObject.fitFunction
-          plotter.initialize(storage, datetime, timeFrame, coordinateSystem, onPlotterInizialized, productDefinition)
-
-          function onPlotterInizialized () {
-            let connector = {
-              layer: layer,
-              plotter: plotter,
-              storage: storage
-            }
-            /* Let the Plotter listen to the event of Cursor Files loaded, so that it can react recalculating if needed. */
-            plotter.onDailyFileLoadedPlotterEventsSubscriptionId = storage.eventHandler.listenToEvent('Daily File Loaded', plotter.onDailyFileLoaded)
-            /* Lets load now this plotter panels. */
-            connector.panels = []
-
-            if (productDefinition !== undefined) {
-              /* Here we setup the panels associated with this plotter */
-              for (let i = 0; i < plotterModule.panels.length; i++) {
-                let panel = plotterModule.panels[i]
-
-                let parameters = {
-                  dataMine: dataMine.config.codeName,
-                  plotterCodeName: plotterModule.parentNode.config.codeName,
-                  moduleCodeName: plotterModule.config.codeName,
-                  panelNode: panel
-                }
-
-                let owner = thisObject.payload.node.payload.parentNode.id // Panels are owned by the time machine.
-                let plotterPanelHandle = canvas.panelsSpace.createNewPanel('Plotter Panel', parameters, owner, layer.session)
-                let plotterPanel = canvas.panelsSpace.getPanel(plotterPanelHandle)
-
-                /* Connect Panel to the Plotter via an Event. */
-                connector.plotter.onRecordChangeEventsSubscriptionId = connector.plotter.container.eventHandler.listenToEvent('Current Record Changed', plotterPanel.onRecordChange)
-                connector.panels.push(plotterPanelHandle)
-              }
-              connector.layer.panels = connector.panels
-
-              /*
-              Next we will check the different types of Plotting related to connecting to an existing node branch.
-              */
-              if (plotterModule.nodesHighlights !== undefined && plotterModule.config.connectTo !== undefined) {
-                connector.nodesHighlights = newNodesHighlights()
-                switch (plotterModule.config.connectTo) {
-                  case 'Trading System':
-                    connector.nodesHighlights.initialize(tradingSystem)
-                    break
-                  case 'Trading Engine':
-                    connector.nodesHighlights.initialize(tradingEngine)
-                    break
-                }
-                connector.nodesHighlights.onRecordChangeEventsSubscriptionId = connector.plotter.container.eventHandler.listenToEvent('Current Record Changed', connector.nodesHighlights.onRecordChange)
-              }
-              if (plotterModule.nodesValues !== undefined && plotterModule.config.connectTo !== undefined) {
-                connector.nodesValues = newNodesValues()
-                switch (plotterModule.config.connectTo) {
-                  case 'Trading System':
-                    connector.nodesValues.initialize(tradingSystem)
-                    break
-                  case 'Trading Engine':
-                    connector.nodesValues.initialize(tradingEngine)
-                    break
-                }
-                connector.nodesValues.onRecordChangeEventsSubscriptionId = connector.plotter.container.eventHandler.listenToEvent('Current Record Changed', connector.nodesValues.onRecordChange)
-              }
-              if (plotterModule.nodesErrors !== undefined && plotterModule.config.connectTo !== undefined) {
-                connector.nodesErrors = newNodesErrors()
-                switch (plotterModule.config.connectTo) {
-                  case 'Trading System':
-                    connector.nodesErrors.initialize(tradingSystem)
-                    break
-                  case 'Trading Engine':
-                    connector.nodesErrors.initialize(tradingEngine)
-                    break
-                }
-                connector.nodesErrors.onRecordChangeEventsSubscriptionId = connector.plotter.container.eventHandler.listenToEvent('Current Record Changed', connector.nodesErrors.onRecordChange)
-              }
-              if (plotterModule.nodesRunning !== undefined && plotterModule.config.connectTo !== undefined) {
-                connector.nodesRunning = newNodesRunning()
-                switch (plotterModule.config.connectTo) {
-                  case 'Trading System':
-                    connector.nodesRunning.initialize(tradingSystem)
-                    break
-                  case 'Trading Engine':
-                    connector.nodesRunning.initialize(tradingEngine)
-                    break
-                }
-                connector.nodesRunning.onRecordChangeEventsSubscriptionId = connector.plotter.container.eventHandler.listenToEvent('Current Record Changed', connector.nodesRunning.onRecordChange)
-              }
-              if (plotterModule.nodesStatus !== undefined && plotterModule.config.connectTo !== undefined) {
-                connector.nodesStatus = newNodesStatus()
-                switch (plotterModule.config.connectTo) {
-                  case 'Trading System':
-                    connector.nodesStatus.initialize(tradingSystem)
-                    break
-                  case 'Trading Engine':
-                    connector.nodesStatus.initialize(tradingEngine)
-                    break
-                }
-                connector.nodesStatus.onRecordChangeEventsSubscriptionId = connector.plotter.container.eventHandler.listenToEvent('Current Record Changed', connector.nodesStatus.onRecordChange)
-              }
-              if (plotterModule.nodesProgress !== undefined && plotterModule.config.connectTo !== undefined) {
-                connector.nodesProgress = newNodesProgress()
-                switch (plotterModule.config.connectTo) {
-                  case 'Trading System':
-                    connector.nodesProgress.initialize(tradingSystem)
-                    break
-                  case 'Trading Engine':
-                    connector.nodesProgress.initialize(tradingEngine)
-                    break
-                }
-                connector.nodesProgress.onRecordChangeEventsSubscriptionId = connector.plotter.container.eventHandler.listenToEvent('Current Record Changed', connector.nodesProgress.onRecordChange)
-              }
-              if (plotterModule.nodesAnnouncements !== undefined && plotterModule.config.connectTo !== undefined) {
-                connector.nodesAnnounements = newNodesAnnouncements()
-                switch (plotterModule.config.connectTo) {
-                  case 'Trading System':
-                    connector.nodesAnnounements.initialize(tradingSystem)
-                    break
-                  case 'Trading Engine':
-                    connector.nodesAnnounements.initialize(tradingEngine)
-                    break
-                }
-                connector.nodesAnnounements.onRecordChangeEventsSubscriptionId = connector.plotter.container.eventHandler.listenToEvent('Current Record Changed', connector.nodesAnnounements.onRecordChange)
-              }
-              /*
-              Another type of plotting is with Record Values. This method uses the record definition to find the target node
-              and from there is looks into its children all based on the Record Definition configuration.
-              */
-              if (plotterModule.recordValues !== undefined) {
-                connector.recordValues = newRecordValues()
-                connector.recordValues.initialize(tradingSystem, tradingEngine, productDefinition)
-                connector.recordValues.onRecordChangeEventsSubscriptionId = connector.plotter.container.eventHandler.listenToEvent('Current Record Changed', connector.recordValues.onRecordChange)
-              }
-            }
-            thisObject.connectors.push(connector)
-          }
-        }
-      }
-    } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] initializePlotter -> err = ' + err.stack) }
+    function setupContainer() {
+        thisObject.container = newContainer()
+        thisObject.container.initialize(MODULE_NAME)
     }
-  }
 
-  function onLayerStatusChanged (layer) {
-    if (layer.status === LAYER_STATUS.LOADING) {
-            /* Lets see if we can find the Plotter of this card on our Active Plotters list, other wise we will initialize it */
-      let found = false
-      for (let i = 0; i < thisObject.connectors.length; i++) {
-        let connector = thisObject.connectors[i]
-        if (connector.layer.payload.node.id === layer.payload.node.id) {
-          found = true
-        }
-      }
-      if (found === false) {
-        initializePlotter(layer, onProductPlotterInitialized)
-        function onProductPlotterInitialized (err) {
-                    /* There is no policy yet of what to do if this fails. */
-        }
-      }
-    }
-    if (layer.status === LAYER_STATUS.OFF) {
-      /* If the plotter of this card is not on our Active Plotters list, then we remove it. */
-      for (let i = 0; i < thisObject.connectors.length; i++) {
-        let connector = thisObject.connectors[i]
-        if (connector.layer.payload.node.id === layer.payload.node.id) {
-                    /* Then the panels. */
-          for (let j = 0; j < connector.panels.length; j++) {
-            canvas.panelsSpace.destroyPanel(connector.panels[j])
-          }
+    function finalize() {
+        layersPanel.container.eventHandler.stopListening(onLayerStatusChangedEventSuscriptionId)
+        layersPanel = undefined
+
+        for (let i = 0; i < thisObject.connectors.length; i++) {
+            let connector = thisObject.connectors[i]
+            /* Then the panels. */
+            for (let j = 0; j < connector.panels.length; j++) {
+                canvas.panelsSpace.destroyPanel(connector.panels[j])
+                connector.panels[j] = undefined
+            }
+            connector.panels = undefined
+
+            /* Finalize the plotters */
+            if (connector.plotter.finalize !== undefined) {
+                connector.plotter.container.eventHandler.stopListening(connector.plotter.onRecordChangeEventsSubscriptionId)
+                connector.plotter.finalize()
+            }
+            connector.plotter = undefined
+
             /* Finally the Storage Objects */
-          finalizeNodesPlotting(connector)
-          if (connector.plotter.finalize !== undefined) {
-            connector.plotter.container.eventHandler.stopListening(connector.plotter.onRecordChangeEventsSubscriptionId)
-            connector.plotter.container.finalize()
-            connector.plotter.finalize()
-          }
-          finalizeStorage(connector.storage)
-          thisObject.connectors.splice(i, 1) // Delete item from array.
-          return // We already found the product woth changes and processed it.
+            finalizeStorage(connector.storage)
+            connector.storage = undefined
+
+            connector = undefined
         }
-      }
-    }
-  }
+        thisObject.connectors = []
+        coordinateSystem = undefined
 
-  function finalizeNodesPlotting (connector) {
-    if (connector.nodesHighlights !== undefined) {
-      connector.plotter.container.eventHandler.stopListening(connector.nodesHighlights.onRecordChangeEventsSubscriptionId)
-      connector.nodesHighlights.finalize()
+        thisObject.container.finalize()
+        thisObject.container = undefined
+        thisObject.payload = undefined
     }
-    if (connector.nodesValues !== undefined) {
-      connector.plotter.container.eventHandler.stopListening(connector.nodesValues.onRecordChangeEventsSubscriptionId)
-      connector.nodesValues.finalize()
-    }
-    if (connector.nodesErrors !== undefined) {
-      connector.plotter.container.eventHandler.stopListening(connector.nodesErrors.onRecordChangeEventsSubscriptionId)
-      connector.nodesErrors.finalize()
-    }
-    if (connector.nodesStatus !== undefined) {
-      connector.plotter.container.eventHandler.stopListening(connector.nodesStatus.onRecordChangeEventsSubscriptionId)
-      connector.nodesStatus.finalize()
-    }
-    if (connector.nodesProgress !== undefined) {
-      connector.plotter.container.eventHandler.stopListening(connector.Progress.onRecordChangeEventsSubscriptionId)
-      connector.Progress.finalize()
-    }
-    if (connector.nodesRunning !== undefined) {
-      connector.plotter.container.eventHandler.stopListening(connector.nodesRunning.onRecordChangeEventsSubscriptionId)
-      connector.nodesRunning.finalize()
-    }
-    if (connector.recordValues !== undefined) {
-      connector.plotter.container.eventHandler.stopListening(connector.recordValues.onRecordChangeEventsSubscriptionId)
-      connector.recordValues.finalize()
-    }
-  }
 
-  function setTimeFrame (pTimeFrame) {
-    timeFrame = pTimeFrame
-    for (let i = 0; i < thisObject.connectors.length; i++) {
-      let connector = thisObject.connectors[i]
-      connector.layer.setTimeFrame(timeFrame)
-      connector.storage.setTimeFrame(timeFrame)
-      connector.plotter.setTimeFrame(timeFrame)
+    function finalizeStorage(storage) {
+        storage.eventHandler.stopListening(storage.onMarketFileLoadedLayerEventsSubscriptionId)
+        storage.eventHandler.stopListening(storage.onDailyFileLoadedLayerEventsSubscriptionId)
+        storage.eventHandler.stopListening(storage.onSingleFileLoadedLayerEventsSubscriptionId)
+        storage.eventHandler.stopListening(storage.onFileSequenceLoadedLayerEventsSubscriptionId)
+        storage.eventHandler.stopListening(storage.onDailyFileLoadedPlotterEventsSubscriptionId)
+        storage.finalize()
     }
-  }
 
-  function setDatetime (pDatetime) {
-    datetime = pDatetime
-    for (let i = 0; i < thisObject.connectors.length; i++) {
-      let connector = thisObject.connectors[i]
-      connector.layer.setDatetime(pDatetime)
-      connector.storage.setDatetime(pDatetime)
-      connector.plotter.setDatetime(pDatetime)
+    function initialize(pLayersPanel) {
+        /* Remember this */
+        layersPanel = pLayersPanel
+
+        /* Listen to the event of change of status */
+        onLayerStatusChangedEventSuscriptionId = layersPanel.container.eventHandler.listenToEvent('Layer Status Changed', onLayerStatusChanged)
     }
-  }
 
-  function setCoordinateSystem (pCoordinateSystem) {
-    coordinateSystem = pCoordinateSystem
-    for (let i = 0; i < thisObject.connectors.length; i++) {
-      let connector = thisObject.connectors[i]
-      connector.plotter.setCoordinateSystem(coordinateSystem)
+    function initializePlotter(layer) {
+        try {
+            /* Before Initializing a Plotter, we need the Storage it will use, loaded with the files it will initially need. */
+            let storage = newProductStorage(layer.payload.node.id)
+
+            /*
+            Before Initializing the Storage, we will put the Layer to listen to the events the storage will raise every time a file is loaded,
+            so that the UI can somehow show this. There are different types of events.
+            */
+            for (let i = 0; i < layer.definition.referenceParent.referenceParent.datasets.length; i++) {
+                let dataset = layer.definition.referenceParent.referenceParent.datasets[i]
+
+                switch (dataset.config.type) {
+                    case 'Market Files': {
+                        storage.onMarketFileLoadedLayerEventsSubscriptionId = storage.eventHandler.listenToEvent('Market File Loaded', layer.onMarketFileLoaded)
+                    }
+                        break
+                    case 'Daily Files': {
+                        storage.onDailyFileLoadedLayerEventsSubscriptionId = storage.eventHandler.listenToEvent('Daily File Loaded', layer.onDailyFileLoaded)
+                    }
+                        break
+                    case 'Single File': {
+                        storage.onSingleFileLoadedLayerEventsSubscriptionId = storage.eventHandler.listenToEvent('Single File Loaded', layer.onSingleFileLoaded)
+                    }
+                        break
+                    case 'File Sequence': {
+                        storage.onFileSequenceLoadedLayerEventsSubscriptionId = storage.eventHandler.listenToEvent('File Sequence Loaded', layer.onFileSequenceLoaded)
+                    }
+                        break
+                    default: {
+                        if (ERROR_LOG === true) {
+                            logger.write('[ERROR] initializePlotter -> Dataset Type Incorrect or Undefined -> dataset.type = ' + dataset.type)
+                        }
+                        return
+                    }
+                }
+            }
+
+            let baseAsset = layer.definition.referenceParent.parentNode.referenceParent.baseAsset.referenceParent.config.codeName
+            let quotedAsset = layer.definition.referenceParent.parentNode.referenceParent.quotedAsset.referenceParent.config.codeName
+            let market = {
+                baseAsset: baseAsset,
+                quotedAsset: quotedAsset
+            }
+            let productDefinition = layer.definition.referenceParent.referenceParent
+            let bot = layer.definition.referenceParent.referenceParent.parentNode
+            let dataMine = layer.definition.referenceParent.referenceParent.parentNode.parentNode
+            let exchange = layer.definition.referenceParent.parentNode.referenceParent.parentNode.parentNode
+            let plotterModule = layer.definition.referenceParent.referenceParent.referenceParent
+            let session
+            let tradingSystem
+            let tradingEngine
+
+            /*
+            A layer can be referencing a Data Product in two different branches of the Network hiriatchy.
+            In one of those braches we can get the Session node, at the other we Cannot.
+            */
+            if (layer.definition.referenceParent.parentNode.parentNode !== undefined) {
+                if (layer.definition.referenceParent.parentNode.parentNode.type === 'Session Reference') {
+                    if (layer.definition.referenceParent.parentNode.parentNode.referenceParent !== undefined) {
+                        session = layer.definition.referenceParent.parentNode.parentNode.referenceParent
+
+                        /* From the session we might be able to reach the Trading System or the Trading Engine */
+                        if (session.tradingSystemReference !== undefined) {
+                            tradingSystem = session.tradingSystemReference.referenceParent
+                        }
+                        if (session.tradingEngineReference !== undefined) {
+                            tradingEngine = session.tradingEngineReference.referenceParent
+                        }
+                    }
+                }
+            }
+
+            let host = layer.networkNode.config.host
+            let webPort = layer.networkNode.config.webPort
+            if (host === undefined) { host = 'localhost' }
+            if (webPort === undefined) { webPort = window.location.port }
+
+            let eventsServerClient = canvas.designSpace.workspace.eventsServerClients.get(layer.networkNode.id)
+
+            storage.initialize(
+                dataMine,
+                bot,
+                session,
+                productDefinition,
+                exchange,
+                market,
+                datetime,
+                timeFrame,
+                host,
+                webPort,
+                eventsServerClient,
+                onProductStorageInitialized
+            )
+
+            function onProductStorageInitialized(err) {
+                if (err.result === GLOBAL.DEFAULT_OK_RESPONSE.result) {
+                    /* Now we have all the initial data loaded and ready to be delivered to the new instance of the plotter. */
+                    let plotter
+
+                    if (plotterModule.config.isLegacy !== true) {
+                        plotter = newPlotter()
+                    } else {
+                        plotter = getNewPlotter(dataMine.config.codeName, plotterModule.parentNode.config.codeName, plotterModule.config.codeName)
+                    }
+
+                    plotter.container.connectToParent(thisObject.container, true, true, false, true, true, true, false, false, 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
+                    plotter.fitFunction = thisObject.fitFunction
+                    plotter.initialize(storage, datetime, timeFrame, coordinateSystem, onPlotterInizialized, productDefinition)
+
+                    function onPlotterInizialized() {
+                        let connector = {
+                            layer: layer,
+                            plotter: plotter,
+                            storage: storage
+                        }
+                        /* Let the Plotter listen to the event of Cursor Files loaded, so that it can react recalculating if needed. */
+                        plotter.onDailyFileLoadedPlotterEventsSubscriptionId = storage.eventHandler.listenToEvent('Daily File Loaded', plotter.onDailyFileLoaded)
+                        /* Lets load now this plotter panels. */
+                        connector.panels = []
+
+                        if (productDefinition !== undefined) {
+                            /* Here we setup the panels associated with this plotter */
+                            for (let i = 0; i < plotterModule.panels.length; i++) {
+                                let panel = plotterModule.panels[i]
+
+                                let parameters = {
+                                    dataMine: dataMine.config.codeName,
+                                    plotterCodeName: plotterModule.parentNode.config.codeName,
+                                    moduleCodeName: plotterModule.config.codeName,
+                                    panelNode: panel
+                                }
+
+                                let owner = thisObject.payload.node.payload.parentNode.id // Panels are owned by the time machine.
+                                let plotterPanelHandle = canvas.panelsSpace.createNewPanel('Plotter Panel', parameters, owner, layer.session)
+                                let plotterPanel = canvas.panelsSpace.getPanel(plotterPanelHandle)
+
+                                /* Connect Panel to the Plotter via an Event. */
+                                connector.plotter.onRecordChangeEventsSubscriptionId = connector.plotter.container.eventHandler.listenToEvent('Current Record Changed', plotterPanel.onRecordChange)
+                                connector.panels.push(plotterPanelHandle)
+                            }
+                            connector.layer.panels = connector.panels
+
+                            /*
+                            Next we will check the different types of Plotting related to connecting to an existing node branch.
+                            */
+                            if (plotterModule.nodesHighlights !== undefined && plotterModule.config.connectTo !== undefined) {
+                                connector.nodesHighlights = newNodesHighlights()
+                                switch (plotterModule.config.connectTo) {
+                                    case 'Trading System':
+                                        connector.nodesHighlights.initialize(tradingSystem)
+                                        break
+                                    case 'Trading Engine':
+                                        connector.nodesHighlights.initialize(tradingEngine)
+                                        break
+                                }
+                                connector.nodesHighlights.onRecordChangeEventsSubscriptionId = connector.plotter.container.eventHandler.listenToEvent('Current Record Changed', connector.nodesHighlights.onRecordChange)
+                            }
+                            if (plotterModule.nodesValues !== undefined && plotterModule.config.connectTo !== undefined) {
+                                connector.nodesValues = newNodesValues()
+                                switch (plotterModule.config.connectTo) {
+                                    case 'Trading System':
+                                        connector.nodesValues.initialize(tradingSystem)
+                                        break
+                                    case 'Trading Engine':
+                                        connector.nodesValues.initialize(tradingEngine)
+                                        break
+                                }
+                                connector.nodesValues.onRecordChangeEventsSubscriptionId = connector.plotter.container.eventHandler.listenToEvent('Current Record Changed', connector.nodesValues.onRecordChange)
+                            }
+                            if (plotterModule.nodesErrors !== undefined && plotterModule.config.connectTo !== undefined) {
+                                connector.nodesErrors = newNodesErrors()
+                                switch (plotterModule.config.connectTo) {
+                                    case 'Trading System':
+                                        connector.nodesErrors.initialize(tradingSystem)
+                                        break
+                                    case 'Trading Engine':
+                                        connector.nodesErrors.initialize(tradingEngine)
+                                        break
+                                }
+                                connector.nodesErrors.onRecordChangeEventsSubscriptionId = connector.plotter.container.eventHandler.listenToEvent('Current Record Changed', connector.nodesErrors.onRecordChange)
+                            }
+                            if (plotterModule.nodesRunning !== undefined && plotterModule.config.connectTo !== undefined) {
+                                connector.nodesRunning = newNodesRunning()
+                                switch (plotterModule.config.connectTo) {
+                                    case 'Trading System':
+                                        connector.nodesRunning.initialize(tradingSystem)
+                                        break
+                                    case 'Trading Engine':
+                                        connector.nodesRunning.initialize(tradingEngine)
+                                        break
+                                }
+                                connector.nodesRunning.onRecordChangeEventsSubscriptionId = connector.plotter.container.eventHandler.listenToEvent('Current Record Changed', connector.nodesRunning.onRecordChange)
+                            }
+                            if (plotterModule.nodesStatus !== undefined && plotterModule.config.connectTo !== undefined) {
+                                connector.nodesStatus = newNodesStatus()
+                                switch (plotterModule.config.connectTo) {
+                                    case 'Trading System':
+                                        connector.nodesStatus.initialize(tradingSystem)
+                                        break
+                                    case 'Trading Engine':
+                                        connector.nodesStatus.initialize(tradingEngine)
+                                        break
+                                }
+                                connector.nodesStatus.onRecordChangeEventsSubscriptionId = connector.plotter.container.eventHandler.listenToEvent('Current Record Changed', connector.nodesStatus.onRecordChange)
+                            }
+                            if (plotterModule.nodesProgress !== undefined && plotterModule.config.connectTo !== undefined) {
+                                connector.nodesProgress = newNodesProgress()
+                                switch (plotterModule.config.connectTo) {
+                                    case 'Trading System':
+                                        connector.nodesProgress.initialize(tradingSystem)
+                                        break
+                                    case 'Trading Engine':
+                                        connector.nodesProgress.initialize(tradingEngine)
+                                        break
+                                }
+                                connector.nodesProgress.onRecordChangeEventsSubscriptionId = connector.plotter.container.eventHandler.listenToEvent('Current Record Changed', connector.nodesProgress.onRecordChange)
+                            }
+                            if (plotterModule.nodesAnnouncements !== undefined && plotterModule.config.connectTo !== undefined) {
+                                connector.nodesAnnounements = newNodesAnnouncements()
+                                switch (plotterModule.config.connectTo) {
+                                    case 'Trading System':
+                                        connector.nodesAnnounements.initialize(tradingSystem)
+                                        break
+                                    case 'Trading Engine':
+                                        connector.nodesAnnounements.initialize(tradingEngine)
+                                        break
+                                }
+                                connector.nodesAnnounements.onRecordChangeEventsSubscriptionId = connector.plotter.container.eventHandler.listenToEvent('Current Record Changed', connector.nodesAnnounements.onRecordChange)
+                            }
+                            /*
+                            Another type of plotting is with Record Values. This method uses the record definition to find the target node
+                            and from there is looks into its children all based on the Record Definition configuration.
+                            */
+                            if (plotterModule.recordValues !== undefined) {
+                                connector.recordValues = newRecordValues()
+                                connector.recordValues.initialize(tradingSystem, tradingEngine, productDefinition)
+                                connector.recordValues.onRecordChangeEventsSubscriptionId = connector.plotter.container.eventHandler.listenToEvent('Current Record Changed', connector.recordValues.onRecordChange)
+                            }
+                        }
+                        thisObject.connectors.push(connector)
+                    }
+                }
+            }
+        } catch (err) {
+            if (ERROR_LOG === true) { logger.write('[ERROR] initializePlotter -> err = ' + err.stack) }
+        }
     }
-  }
 
-  function getContainer (point) {
-  }
+    function onLayerStatusChanged(layer) {
+        if (layer.status === LAYER_STATUS.LOADING) {
+            /* Lets see if we can find the Plotter of this card on our Active Plotters list, other wise we will initialize it */
+            let found = false
+            for (let i = 0; i < thisObject.connectors.length; i++) {
+                let connector = thisObject.connectors[i]
+                if (connector.layer.payload.node.id === layer.payload.node.id) {
+                    found = true
+                }
+            }
+            if (found === false) {
+                initializePlotter(layer, onProductPlotterInitialized)
+                function onProductPlotterInitialized(err) {
+                    /* There is no policy yet of what to do if this fails. */
+                }
+            }
+        }
+        if (layer.status === LAYER_STATUS.OFF) {
+            /* If the plotter of this card is not on our Active Plotters list, then we remove it. */
+            for (let i = 0; i < thisObject.connectors.length; i++) {
+                let connector = thisObject.connectors[i]
+                if (connector.layer.payload.node.id === layer.payload.node.id) {
+                    /* Then the panels. */
+                    for (let j = 0; j < connector.panels.length; j++) {
+                        canvas.panelsSpace.destroyPanel(connector.panels[j])
+                    }
+                    /* Finally the Storage Objects */
+                    finalizeNodesPlotting(connector)
+                    if (connector.plotter.finalize !== undefined) {
+                        connector.plotter.container.eventHandler.stopListening(connector.plotter.onRecordChangeEventsSubscriptionId)
+                        connector.plotter.container.finalize()
+                        connector.plotter.finalize()
+                    }
+                    finalizeStorage(connector.storage)
+                    thisObject.connectors.splice(i, 1) // Delete item from array.
+                    return // We already found the product woth changes and processed it.
+                }
+            }
+        }
+    }
 
-  function draw () {
-    if (thisObject.connectors === undefined) { return } // We need to wait
+    function finalizeNodesPlotting(connector) {
+        if (connector.nodesHighlights !== undefined) {
+            connector.plotter.container.eventHandler.stopListening(connector.nodesHighlights.onRecordChangeEventsSubscriptionId)
+            connector.nodesHighlights.finalize()
+        }
+        if (connector.nodesValues !== undefined) {
+            connector.plotter.container.eventHandler.stopListening(connector.nodesValues.onRecordChangeEventsSubscriptionId)
+            connector.nodesValues.finalize()
+        }
+        if (connector.nodesErrors !== undefined) {
+            connector.plotter.container.eventHandler.stopListening(connector.nodesErrors.onRecordChangeEventsSubscriptionId)
+            connector.nodesErrors.finalize()
+        }
+        if (connector.nodesStatus !== undefined) {
+            connector.plotter.container.eventHandler.stopListening(connector.nodesStatus.onRecordChangeEventsSubscriptionId)
+            connector.nodesStatus.finalize()
+        }
+        if (connector.nodesProgress !== undefined) {
+            connector.plotter.container.eventHandler.stopListening(connector.Progress.onRecordChangeEventsSubscriptionId)
+            connector.Progress.finalize()
+        }
+        if (connector.nodesRunning !== undefined) {
+            connector.plotter.container.eventHandler.stopListening(connector.nodesRunning.onRecordChangeEventsSubscriptionId)
+            connector.nodesRunning.finalize()
+        }
+        if (connector.recordValues !== undefined) {
+            connector.plotter.container.eventHandler.stopListening(connector.recordValues.onRecordChangeEventsSubscriptionId)
+            connector.recordValues.finalize()
+        }
+    }
+
+    function setTimeFrame(pTimeFrame) {
+        timeFrame = pTimeFrame
+        for (let i = 0; i < thisObject.connectors.length; i++) {
+            let connector = thisObject.connectors[i]
+            connector.layer.setTimeFrame(timeFrame)
+            connector.storage.setTimeFrame(timeFrame)
+            connector.plotter.setTimeFrame(timeFrame)
+        }
+    }
+
+    function setDatetime(pDatetime) {
+        datetime = pDatetime
+        for (let i = 0; i < thisObject.connectors.length; i++) {
+            let connector = thisObject.connectors[i]
+            connector.layer.setDatetime(pDatetime)
+            connector.storage.setDatetime(pDatetime)
+            connector.plotter.setDatetime(pDatetime)
+        }
+    }
+
+    function setCoordinateSystem(pCoordinateSystem) {
+        coordinateSystem = pCoordinateSystem
+        for (let i = 0; i < thisObject.connectors.length; i++) {
+            let connector = thisObject.connectors[i]
+            connector.plotter.setCoordinateSystem(coordinateSystem)
+        }
+    }
+
+    function getContainer(point) {
+    }
+
+    function draw() {
+        if (thisObject.connectors === undefined) { return } // We need to wait
         /* First the Product Plotters. */
-    let maxElementsPlotted = 0
-    for (let i = 0; i < thisObject.connectors.length; i++) {
-      let connector = thisObject.connectors[thisObject.connectors.length - i - 1]
-      let elementsPlotted = connector.plotter.draw()
-      if (elementsPlotted !== undefined) {
-        if (elementsPlotted > maxElementsPlotted) {
-          maxElementsPlotted = elementsPlotted
+        let maxElementsPlotted = 0
+        for (let i = 0; i < thisObject.connectors.length; i++) {
+            let connector = thisObject.connectors[thisObject.connectors.length - i - 1]
+            let elementsPlotted = connector.plotter.draw()
+            if (elementsPlotted !== undefined) {
+                if (elementsPlotted > maxElementsPlotted) {
+                    maxElementsPlotted = elementsPlotted
+                }
+            }
         }
-      }
+        return maxElementsPlotted
     }
-    return maxElementsPlotted
-  }
 }

ChartingSpace/TimelineChart.js

@@ -1,424 +1,424 @@
-function newTimelineChart () {
-  const MODULE_NAME = 'Timeline Chart'
-  const INFO_LOG = false
-  const INTENSIVE_LOG = false
-  const ERROR_LOG = true
-  let logger = newWebDebugLog()
-  logger.fileName = MODULE_NAME
+function newTimelineChart() {
+    const MODULE_NAME = 'Timeline Chart'
+    const INFO_LOG = false
+    const INTENSIVE_LOG = false
+    const ERROR_LOG = true
+    let logger = newWebDebugLog()
+    logger.fileName = MODULE_NAME
 
-  let timeFrame = INITIAL_TIME_PERIOD
-  let datetime = NEW_SESSION_INITIAL_DATE
+    let timeFrame = INITIAL_TIME_PERIOD
+    let datetime = NEW_SESSION_INITIAL_DATE
 
-  let thisObject = {
-    container: undefined,
-    fitFunction: undefined,
-    rateScale: undefined,
-    timeFrameScale: undefined,
-    payload: undefined,
-    layersManager: undefined,
-    plotterManager: undefined,
-    upstreamTimeFrame: undefined,
-    setDatetime: setDatetime,
-    setTimeFrame: setTimeFrame,
-    physics: physics,
-    draw: draw,
-    drawBackground: drawBackground,
-    drawForeground: drawForeground,
-    getContainer: getContainer,
-    initialize: initialize,
-    finalize: finalize
-  }
-
-  let timeMachineCoordinateSystem
-  let timelineChartCoordinateSystem = newCoordinateSystem()
-  timelineChartCoordinateSystem.name = 'TIMELINE CHART'
-
-  let coordinateSystem
-
-  let layersPanel
-  let layersPanelHandle
-
-  let onMouseOverEventSuscriptionId
-  let onMouseNotOverEventSuscriptionId
-  let rateScaleUpstreamEventSuscriptionId
-  let rateScaleMouseOverEventSuscriptionId
-  let timeFrameScaleEventSuscriptionId
-  let timeFrameScaleMouseOverEventSuscriptionId
-  let scaleChangedEventSubscriptionId
-
-  let drawScales = false
-  let mouse = {
-    position: {
-      x: 0,
-      y: 0
-    }
-  }
-
-  setupContainer()
-  return thisObject
-
-  function setupContainer () {
-    thisObject.container = newContainer()
-    thisObject.container.initialize(MODULE_NAME)
-    thisObject.container.detectMouseOver = true
-  }
-
-  function finalize () {
-    timeMachineCoordinateSystem.eventHandler.stopListening(scaleChangedEventSubscriptionId)
-
-    if (thisObject.layersManager !== undefined) {
-      finalizeLayersManager()
+    let thisObject = {
+        container: undefined,
+        fitFunction: undefined,
+        rateScale: undefined,
+        timeFrameScale: undefined,
+        payload: undefined,
+        layersManager: undefined,
+        plotterManager: undefined,
+        upstreamTimeFrame: undefined,
+        setDatetime: setDatetime,
+        setTimeFrame: setTimeFrame,
+        physics: physics,
+        draw: draw,
+        drawBackground: drawBackground,
+        drawForeground: drawForeground,
+        getContainer: getContainer,
+        initialize: initialize,
+        finalize: finalize
     }
 
-    if (thisObject.rateScale !== undefined) {
-      finalizeRateScale()
-    }
+    let timeMachineCoordinateSystem
+    let timelineChartCoordinateSystem = newCoordinateSystem()
+    timelineChartCoordinateSystem.name = 'TIMELINE CHART'
 
-    if (thisObject.timeFrameScale !== undefined) {
-      finalizeTimeFrameScale()
-    }
+    let coordinateSystem
 
-    thisObject.container.eventHandler.stopListening(onMouseOverEventSuscriptionId)
-    thisObject.container.eventHandler.stopListening(onMouseNotOverEventSuscriptionId)
-    thisObject.container.finalize()
-    thisObject.container = undefined
-    thisObject.payload = undefined
+    let layersPanel
+    let layersPanelHandle
 
-    mouse = undefined
-    logger = undefined
+    let onMouseOverEventSuscriptionId
+    let onMouseNotOverEventSuscriptionId
+    let rateScaleUpstreamEventSuscriptionId
+    let rateScaleMouseOverEventSuscriptionId
+    let timeFrameScaleEventSuscriptionId
+    let timeFrameScaleMouseOverEventSuscriptionId
+    let scaleChangedEventSubscriptionId
 
-    timeMachineCoordinateSystem = undefined
-    timelineChartCoordinateSystem.finalize()
-    timelineChartCoordinateSystem = undefined
-    coordinateSystem = undefined
-    layersPanel = undefined
-    layersPanelHandle = undefined
-  }
-
-  function finalizeLayersManager () {
-    if (thisObject.plotterManager !== undefined) {
-      thisObject.plotterManager.finalize()
-    }
-    thisObject.plotterManager = undefined
-    thisObject.layersManager = undefined
-
-    canvas.panelsSpace.destroyPanel(layersPanelHandle)
-  }
-
-  function finalizeTimeFrameScale () {
-    if (thisObject.timeFrameScale === undefined) { return }
-
-    thisObject.timeFrameScale.container.eventHandler.stopListening(timeFrameScaleEventSuscriptionId)
-    thisObject.timeFrameScale.container.eventHandler.stopListening(timeFrameScaleMouseOverEventSuscriptionId)
-    thisObject.timeFrameScale.finalize()
-    thisObject.timeFrameScale = undefined
-    if (thisObject.upstreamTimeFrame !== undefined) {
-      timeFrame = thisObject.upstreamTimeFrame
-      if (thisObject.plotterManager !== undefined) {
-        thisObject.plotterManager.setTimeFrame(timeFrame)
-      }
-    }
-  }
-
-  function finalizeRateScale () {
-    if (thisObject.rateScale === undefined) { return }
-
-    thisObject.rateScale.container.eventHandler.stopListening(rateScaleMouseOverEventSuscriptionId)
-    thisObject.container.parentContainer.eventHandler.stopListening(rateScaleUpstreamEventSuscriptionId)
-    thisObject.rateScale.finalize()
-    thisObject.rateScale = undefined
-
-    /* Resets the local container with the dimessions of its parent, the Time Machine */
-    thisObject.container.frame.position.x = 0
-    thisObject.container.frame.position.y = 0
-    thisObject.container.frame.height = thisObject.container.parentContainer.frame.height
-    thisObject.container.frame.width = thisObject.container.parentContainer.frame.width
-  }
-
-  function initialize (pTimeMachineCoordinateSystem, pTimeFrame) {
-     /* We load the logow we will need for the background. */
-
-    timeMachineCoordinateSystem = pTimeMachineCoordinateSystem
-    coordinateSystem = timeMachineCoordinateSystem
-    initializeCoordinateSystem()
-
-    timeFrame = pTimeFrame
-
-    onMouseOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
-    onMouseNotOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
-    scaleChangedEventSubscriptionId = timeMachineCoordinateSystem.eventHandler.listenToEvent('Scale Changed', onScaleChanged)
-  }
-
-  function initializeCoordinateSystem () {
-    let minValue = {
-      x: timeMachineCoordinateSystem.min.x,
-      y: 0
-    }
-
-    let maxValue = {
-      x: timeMachineCoordinateSystem.max.x,
-      y: nextPorwerOf10(MAX_DEFAULT_RATE_SCALE_VALUE) / 4
-    }
-
-    if (thisObject.rateScale !== undefined) {
-      minValue.y = thisObject.rateScale.minValue
-      maxValue.y = thisObject.rateScale.maxValue
-    }
-
-    timelineChartCoordinateSystem.initialize(
-          minValue,
-          maxValue,
-          thisObject.container.frame.width,
-          thisObject.container.frame.height
-      )
-  }
-
-  function initializeLayersManager () {
-    let owner = thisObject.payload.node.payload.parentNode.id // The real owner is the Time Machine
-    layersPanelHandle = canvas.panelsSpace.createNewPanel('Layers Panel', undefined, owner)
-    thisObject.layersManager = canvas.panelsSpace.getPanel(layersPanelHandle)
-    thisObject.layersManager.payload = thisObject.payload.node.layersManager.payload
-    thisObject.layersManager.initialize()
-
-    /* Initialize the Plotter Manager */
-    thisObject.plotterManager = newPlottersManager()
-
-    thisObject.plotterManager.container.connectToParent(thisObject.container, true, true, false, true, true, true, false, false, true)
-
-    thisObject.plotterManager.container.frame.position.x = 0
-    thisObject.plotterManager.container.frame.position.y = 0
-
-    thisObject.plotterManager.fitFunction = thisObject.fitFunction
-    thisObject.plotterManager.payload = thisObject.payload
-    thisObject.plotterManager.initialize(thisObject.layersManager)
-    thisObject.plotterManager.setTimeFrame(timeFrame)
-    thisObject.plotterManager.setDatetime(datetime)
-    thisObject.plotterManager.setCoordinateSystem(coordinateSystem)
-  }
-
-  function initializeRateScale () {
-    thisObject.rateScale = newRateScale()
-    thisObject.rateScale.fitFunction = thisObject.fitFunction
-    thisObject.rateScale.payload = thisObject.payload.node.rateScale.payload
-
-    rateScaleMouseOverEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('onMouseOverScale', rateScaleMouseOver)
-    thisObject.rateScale.initialize(timelineChartCoordinateSystem, thisObject.container.parentContainer, thisObject.container)
-
-    function rateScaleMouseOver (event) {
-      thisObject.container.eventHandler.raiseEvent('onChildrenMouseOver', event)
-    }
-  }
-
-  function initializeTimeFrameScale () {
-    thisObject.timeFrameScale = newTimeFrameScale()
-    thisObject.timeFrameScale.fitFunction = thisObject.fitFunction
-    thisObject.timeFrameScale.payload = thisObject.payload.node.timeFrameScale.payload
-
-    timeFrameScaleEventSuscriptionId = thisObject.timeFrameScale.container.eventHandler.listenToEvent('Time Frame Value Changed', timeFrameScaleValueChanged)
-    timeFrameScaleMouseOverEventSuscriptionId = thisObject.timeFrameScale.container.eventHandler.listenToEvent('onMouseOverScale', timeFrameScaleMouseOver)
-    thisObject.timeFrameScale.initialize(thisObject.container.parentContainer)
-
-    function timeFrameScaleValueChanged (event) {
-      let currentTimeFrame = timeFrame
-      timeFrame = event.timeFrame
-      if (timeFrame !== currentTimeFrame) {
-        if (thisObject.plotterManager !== undefined) {
-          thisObject.plotterManager.setTimeFrame(timeFrame)
+    let drawScales = false
+    let mouse = {
+        position: {
+            x: 0,
+            y: 0
         }
-      }
     }
 
-    function timeFrameScaleMouseOver (event) {
-      thisObject.container.eventHandler.raiseEvent('onChildrenMouseOver', event)
-    }
-  }
+    setupContainer()
+    return thisObject
 
-  function onScaleChanged (event) {
-    if (thisObject.rateScale !== undefined) {
-      thisObject.rateScale.onUpstreamScaleChanged(event)
-    }
-    timelineChartCoordinateSystem.min.x = timeMachineCoordinateSystem.min.x
-    timelineChartCoordinateSystem.max.x = timeMachineCoordinateSystem.max.x
-    timelineChartCoordinateSystem.maxHeight = timeMachineCoordinateSystem.maxHeight
-    timelineChartCoordinateSystem.maxWidth = timeMachineCoordinateSystem.maxWidth
-    timelineChartCoordinateSystem.autoMinXScale = timeMachineCoordinateSystem.autoMinXScale
-    timelineChartCoordinateSystem.autoMaxXScale = timeMachineCoordinateSystem.autoMaxXScale
-    timelineChartCoordinateSystem.recalculateScale()
-  }
-
-  function setTimeFrame (pTimeFrame) {
-    timeFrame = pTimeFrame
-    if (thisObject.plotterManager !== undefined) {
-      thisObject.plotterManager.setTimeFrame(timeFrame)
-    }
-  }
-
-  function setDatetime (pDatetime) {
-    datetime = pDatetime
-    if (thisObject.plotterManager !== undefined) {
-      thisObject.plotterManager.setDatetime(datetime)
-    }
-  }
-
-  function onMouseOver (event) {
-    /* This event gets to the timelinechart container because it inherits it from the time machine container, which is the one raising Mouse Over and Mouse not Over Events to its children. */
-    drawScales = true
-
-    if (thisObject.rateScale !== undefined) {
-      thisObject.rateScale.onMouseOverSomeTimeMachineContainer(event)
+    function setupContainer() {
+        thisObject.container = newContainer()
+        thisObject.container.initialize(MODULE_NAME)
+        thisObject.container.detectMouseOver = true
     }
 
-    if (thisObject.timeFrameScale !== undefined) {
-      thisObject.timeFrameScale.onMouseOverSomeTimeMachineContainer(event)
-    }
+    function finalize() {
+        timeMachineCoordinateSystem.eventHandler.stopListening(scaleChangedEventSubscriptionId)
 
-    mouse.position.x = event.x
-    mouse.position.y = event.y
-  }
-
-  function onMouseNotOver (event) {
-    /* This event is inherited from the Time Machine */
-    drawScales = false
-
-    if (thisObject.rateScale !== undefined) {
-      thisObject.rateScale.visible = false
-    }
-    if (thisObject.timeFrameScale !== undefined) {
-      thisObject.timeFrameScale.visible = false
-    }
-  }
-
-  function getContainer (point, purpose) {
-    let container
-
-    if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) {
-      container = thisObject.rateScale.getContainer(point, purpose)
-      if (container !== undefined) {
-        if (container.isForThisPurpose(purpose)) {
-          return container
+        if (thisObject.layersManager !== undefined) {
+            finalizeLayersManager()
         }
-      }
-    }
 
-    if (thisObject.timeFrameScale !== undefined && thisObject.timeFrameScale.isVisible === true) {
-      container = thisObject.timeFrameScale.getContainer(point, purpose)
-      if (container !== undefined) {
-        if (container.isForThisPurpose(purpose)) {
-          return container
+        if (thisObject.rateScale !== undefined) {
+            finalizeRateScale()
         }
-      }
-    }
 
-    return container
-  }
-
-  function physics () {
-    thisObjectPhysics()
-    childrenPhysics()
-    syncWithDesignerScales()
-    syncWithDesignerLayersManager()
-  }
-
-  function thisObjectPhysics () {
-    /* Only if the plotter manager has some layer turned on, we will pass the min and max upstream. */
-    if (thisObject.plotterManager !== undefined && thisObject.plotterManager.connectors.length > 0) {
-      timelineChartCoordinateSystem.reportParentXValue(timeMachineCoordinateSystem.min.x, timeMachineCoordinateSystem.max.x)
-      timelineChartCoordinateSystem.physics()
-
-      timeMachineCoordinateSystem.reportXValue(timelineChartCoordinateSystem.childrenMin.x)
-      timeMachineCoordinateSystem.reportXValue(timelineChartCoordinateSystem.childrenMax.x)
-    }
-  }
-
-  function syncWithDesignerLayersManager () {
-    if (thisObject.payload.node === undefined) {
-      finalizeLayersManager()
-      return
-    }
-
-    if (thisObject.payload.node.layersManager === undefined && thisObject.layersManager !== undefined) {
-      finalizeLayersManager()
-    }
-    if (thisObject.payload.node.layersManager !== undefined && thisObject.layersManager === undefined) {
-      initializeLayersManager()
-    }
-  }
-
-  function syncWithDesignerScales () {
-    if (thisObject.payload.node === undefined) {
-      finalizeRateScale()
-      finalizeTimeFrameScale()
-      return
-    }
-    if (thisObject.payload.node.rateScale === undefined && thisObject.rateScale !== undefined) {
-      finalizeRateScale()
-      coordinateSystem = timeMachineCoordinateSystem
-      if (thisObject.plotterManager !== undefined) {
-        thisObject.plotterManager.setCoordinateSystem(coordinateSystem)
-      }
-    }
-    if (thisObject.payload.node.rateScale !== undefined && thisObject.rateScale === undefined) {
-      initializeRateScale()
-      coordinateSystem = timelineChartCoordinateSystem
-      if (thisObject.plotterManager !== undefined) {
-        thisObject.plotterManager.setCoordinateSystem(coordinateSystem)
-      }
-    }
-    if (thisObject.payload.node.timeFrameScale === undefined && thisObject.timeFrameScale !== undefined) {
-      finalizeTimeFrameScale()
-    }
-    if (thisObject.payload.node.timeFrameScale !== undefined && thisObject.timeFrameScale === undefined) {
-      initializeTimeFrameScale()
-    }
-  }
-
-  function childrenPhysics () {
-    if (thisObject.rateScale !== undefined) {
-      thisObject.rateScale.layersOn = thisObject.plotterManager.connectors.length
-      thisObject.rateScale.physics()
-    }
-    if (thisObject.timeFrameScale !== undefined) {
-      thisObject.timeFrameScale.layersOn = thisObject.plotterManager.connectors.length
-      thisObject.timeFrameScale.physics()
-    }
-  }
-
-  function drawBackground () {
-    if (thisObject.container.frame.isInViewPort()) {
-      if (drawScales === true) {
-        if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) { thisObject.rateScale.drawBackground() }
-      }
-      drawChartsBackground()
-      if (thisObject.plotterManager !== undefined) {
-        let elementsPlotted = thisObject.plotterManager.draw()
         if (thisObject.timeFrameScale !== undefined) {
-          thisObject.timeFrameScale.adjustTimeFrame(elementsPlotted)
-        } else {
-          return elementsPlotted
+            finalizeTimeFrameScale()
         }
-      }
-    }
-  }
 
-  function draw () {
-    if (thisObject.container.frame.isInViewPort()) {
-      if (drawScales === true) {
-        if (thisObject.timeFrameScale !== undefined && thisObject.timeFrameScale.isVisible === true) { thisObject.timeFrameScale.draw() }
-        if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) { thisObject.rateScale.draw() }
-      }
-    }
-  }
+        thisObject.container.eventHandler.stopListening(onMouseOverEventSuscriptionId)
+        thisObject.container.eventHandler.stopListening(onMouseNotOverEventSuscriptionId)
+        thisObject.container.finalize()
+        thisObject.container = undefined
+        thisObject.payload = undefined
 
-  function drawForeground () {
-    if (thisObject.container.frame.isInViewPort()) {
-      if (drawScales === true) {
-        if (thisObject.timeFrameScale !== undefined && thisObject.timeFrameScale.isVisible === true) { thisObject.timeFrameScale.drawForeground() }
-        if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) { thisObject.rateScale.drawForeground() }
-      }
-    }
-  }
+        mouse = undefined
+        logger = undefined
 
-  function drawChartsBackground () {
-    drawContainerBackground(thisObject.container, UI_COLOR.WHITE, 0, thisObject.fitFunction)
-  }
+        timeMachineCoordinateSystem = undefined
+        timelineChartCoordinateSystem.finalize()
+        timelineChartCoordinateSystem = undefined
+        coordinateSystem = undefined
+        layersPanel = undefined
+        layersPanelHandle = undefined
+    }
+
+    function finalizeLayersManager() {
+        if (thisObject.plotterManager !== undefined) {
+            thisObject.plotterManager.finalize()
+        }
+        thisObject.plotterManager = undefined
+        thisObject.layersManager = undefined
+
+        canvas.panelsSpace.destroyPanel(layersPanelHandle)
+    }
+
+    function finalizeTimeFrameScale() {
+        if (thisObject.timeFrameScale === undefined) { return }
+
+        thisObject.timeFrameScale.container.eventHandler.stopListening(timeFrameScaleEventSuscriptionId)
+        thisObject.timeFrameScale.container.eventHandler.stopListening(timeFrameScaleMouseOverEventSuscriptionId)
+        thisObject.timeFrameScale.finalize()
+        thisObject.timeFrameScale = undefined
+        if (thisObject.upstreamTimeFrame !== undefined) {
+            timeFrame = thisObject.upstreamTimeFrame
+            if (thisObject.plotterManager !== undefined) {
+                thisObject.plotterManager.setTimeFrame(timeFrame)
+            }
+        }
+    }
+
+    function finalizeRateScale() {
+        if (thisObject.rateScale === undefined) { return }
+
+        thisObject.rateScale.container.eventHandler.stopListening(rateScaleMouseOverEventSuscriptionId)
+        thisObject.container.parentContainer.eventHandler.stopListening(rateScaleUpstreamEventSuscriptionId)
+        thisObject.rateScale.finalize()
+        thisObject.rateScale = undefined
+
+        /* Resets the local container with the dimessions of its parent, the Time Machine */
+        thisObject.container.frame.position.x = 0
+        thisObject.container.frame.position.y = 0
+        thisObject.container.frame.height = thisObject.container.parentContainer.frame.height
+        thisObject.container.frame.width = thisObject.container.parentContainer.frame.width
+    }
+
+    function initialize(pTimeMachineCoordinateSystem, pTimeFrame) {
+        /* We load the logow we will need for the background. */
+
+        timeMachineCoordinateSystem = pTimeMachineCoordinateSystem
+        coordinateSystem = timeMachineCoordinateSystem
+        initializeCoordinateSystem()
+
+        timeFrame = pTimeFrame
+
+        onMouseOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
+        onMouseNotOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
+        scaleChangedEventSubscriptionId = timeMachineCoordinateSystem.eventHandler.listenToEvent('Scale Changed', onScaleChanged)
+    }
+
+    function initializeCoordinateSystem() {
+        let minValue = {
+            x: timeMachineCoordinateSystem.min.x,
+            y: 0
+        }
+
+        let maxValue = {
+            x: timeMachineCoordinateSystem.max.x,
+            y: nextPorwerOf10(MAX_DEFAULT_RATE_SCALE_VALUE) / 4
+        }
+
+        if (thisObject.rateScale !== undefined) {
+            minValue.y = thisObject.rateScale.minValue
+            maxValue.y = thisObject.rateScale.maxValue
+        }
+
+        timelineChartCoordinateSystem.initialize(
+            minValue,
+            maxValue,
+            thisObject.container.frame.width,
+            thisObject.container.frame.height
+        )
+    }
+
+    function initializeLayersManager() {
+        let owner = thisObject.payload.node.payload.parentNode.id // The real owner is the Time Machine
+        layersPanelHandle = canvas.panelsSpace.createNewPanel('Layers Panel', undefined, owner)
+        thisObject.layersManager = canvas.panelsSpace.getPanel(layersPanelHandle)
+        thisObject.layersManager.payload = thisObject.payload.node.layersManager.payload
+        thisObject.layersManager.initialize()
+
+        /* Initialize the Plotter Manager */
+        thisObject.plotterManager = newPlottersManager()
+
+        thisObject.plotterManager.container.connectToParent(thisObject.container, true, true, false, true, true, true, false, false, true)
+
+        thisObject.plotterManager.container.frame.position.x = 0
+        thisObject.plotterManager.container.frame.position.y = 0
+
+        thisObject.plotterManager.fitFunction = thisObject.fitFunction
+        thisObject.plotterManager.payload = thisObject.payload
+        thisObject.plotterManager.initialize(thisObject.layersManager)
+        thisObject.plotterManager.setTimeFrame(timeFrame)
+        thisObject.plotterManager.setDatetime(datetime)
+        thisObject.plotterManager.setCoordinateSystem(coordinateSystem)
+    }
+
+    function initializeRateScale() {
+        thisObject.rateScale = newRateScale()
+        thisObject.rateScale.fitFunction = thisObject.fitFunction
+        thisObject.rateScale.payload = thisObject.payload.node.rateScale.payload
+
+        rateScaleMouseOverEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('onMouseOverScale', rateScaleMouseOver)
+        thisObject.rateScale.initialize(timelineChartCoordinateSystem, thisObject.container.parentContainer, thisObject.container)
+
+        function rateScaleMouseOver(event) {
+            thisObject.container.eventHandler.raiseEvent('onChildrenMouseOver', event)
+        }
+    }
+
+    function initializeTimeFrameScale() {
+        thisObject.timeFrameScale = newTimeFrameScale()
+        thisObject.timeFrameScale.fitFunction = thisObject.fitFunction
+        thisObject.timeFrameScale.payload = thisObject.payload.node.timeFrameScale.payload
+
+        timeFrameScaleEventSuscriptionId = thisObject.timeFrameScale.container.eventHandler.listenToEvent('Time Frame Value Changed', timeFrameScaleValueChanged)
+        timeFrameScaleMouseOverEventSuscriptionId = thisObject.timeFrameScale.container.eventHandler.listenToEvent('onMouseOverScale', timeFrameScaleMouseOver)
+        thisObject.timeFrameScale.initialize(thisObject.container.parentContainer)
+
+        function timeFrameScaleValueChanged(event) {
+            let currentTimeFrame = timeFrame
+            timeFrame = event.timeFrame
+            if (timeFrame !== currentTimeFrame) {
+                if (thisObject.plotterManager !== undefined) {
+                    thisObject.plotterManager.setTimeFrame(timeFrame)
+                }
+            }
+        }
+
+        function timeFrameScaleMouseOver(event) {
+            thisObject.container.eventHandler.raiseEvent('onChildrenMouseOver', event)
+        }
+    }
+
+    function onScaleChanged(event) {
+        if (thisObject.rateScale !== undefined) {
+            thisObject.rateScale.onUpstreamScaleChanged(event)
+        }
+        timelineChartCoordinateSystem.min.x = timeMachineCoordinateSystem.min.x
+        timelineChartCoordinateSystem.max.x = timeMachineCoordinateSystem.max.x
+        timelineChartCoordinateSystem.maxHeight = timeMachineCoordinateSystem.maxHeight
+        timelineChartCoordinateSystem.maxWidth = timeMachineCoordinateSystem.maxWidth
+        timelineChartCoordinateSystem.autoMinXScale = timeMachineCoordinateSystem.autoMinXScale
+        timelineChartCoordinateSystem.autoMaxXScale = timeMachineCoordinateSystem.autoMaxXScale
+        timelineChartCoordinateSystem.recalculateScale()
+    }
+
+    function setTimeFrame(pTimeFrame) {
+        timeFrame = pTimeFrame
+        if (thisObject.plotterManager !== undefined) {
+            thisObject.plotterManager.setTimeFrame(timeFrame)
+        }
+    }
+
+    function setDatetime(pDatetime) {
+        datetime = pDatetime
+        if (thisObject.plotterManager !== undefined) {
+            thisObject.plotterManager.setDatetime(datetime)
+        }
+    }
+
+    function onMouseOver(event) {
+        /* This event gets to the timelinechart container because it inherits it from the time machine container, which is the one raising Mouse Over and Mouse not Over Events to its children. */
+        drawScales = true
+
+        if (thisObject.rateScale !== undefined) {
+            thisObject.rateScale.onMouseOverSomeTimeMachineContainer(event)
+        }
+
+        if (thisObject.timeFrameScale !== undefined) {
+            thisObject.timeFrameScale.onMouseOverSomeTimeMachineContainer(event)
+        }
+
+        mouse.position.x = event.x
+        mouse.position.y = event.y
+    }
+
+    function onMouseNotOver(event) {
+        /* This event is inherited from the Time Machine */
+        drawScales = false
+
+        if (thisObject.rateScale !== undefined) {
+            thisObject.rateScale.visible = false
+        }
+        if (thisObject.timeFrameScale !== undefined) {
+            thisObject.timeFrameScale.visible = false
+        }
+    }
+
+    function getContainer(point, purpose) {
+        let container
+
+        if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) {
+            container = thisObject.rateScale.getContainer(point, purpose)
+            if (container !== undefined) {
+                if (container.isForThisPurpose(purpose)) {
+                    return container
+                }
+            }
+        }
+
+        if (thisObject.timeFrameScale !== undefined && thisObject.timeFrameScale.isVisible === true) {
+            container = thisObject.timeFrameScale.getContainer(point, purpose)
+            if (container !== undefined) {
+                if (container.isForThisPurpose(purpose)) {
+                    return container
+                }
+            }
+        }
+
+        return container
+    }
+
+    function physics() {
+        thisObjectPhysics()
+        childrenPhysics()
+        syncWithDesignerScales()
+        syncWithDesignerLayersManager()
+    }
+
+    function thisObjectPhysics() {
+        /* Only if the plotter manager has some layer turned on, we will pass the min and max upstream. */
+        if (thisObject.plotterManager !== undefined && thisObject.plotterManager.connectors.length > 0) {
+            timelineChartCoordinateSystem.reportParentXValue(timeMachineCoordinateSystem.min.x, timeMachineCoordinateSystem.max.x)
+            timelineChartCoordinateSystem.physics()
+
+            timeMachineCoordinateSystem.reportXValue(timelineChartCoordinateSystem.childrenMin.x)
+            timeMachineCoordinateSystem.reportXValue(timelineChartCoordinateSystem.childrenMax.x)
+        }
+    }
+
+    function syncWithDesignerLayersManager() {
+        if (thisObject.payload.node === undefined) {
+            finalizeLayersManager()
+            return
+        }
+
+        if (thisObject.payload.node.layersManager === undefined && thisObject.layersManager !== undefined) {
+            finalizeLayersManager()
+        }
+        if (thisObject.payload.node.layersManager !== undefined && thisObject.layersManager === undefined) {
+            initializeLayersManager()
+        }
+    }
+
+    function syncWithDesignerScales() {
+        if (thisObject.payload.node === undefined) {
+            finalizeRateScale()
+            finalizeTimeFrameScale()
+            return
+        }
+        if (thisObject.payload.node.rateScale === undefined && thisObject.rateScale !== undefined) {
+            finalizeRateScale()
+            coordinateSystem = timeMachineCoordinateSystem
+            if (thisObject.plotterManager !== undefined) {
+                thisObject.plotterManager.setCoordinateSystem(coordinateSystem)
+            }
+        }
+        if (thisObject.payload.node.rateScale !== undefined && thisObject.rateScale === undefined) {
+            initializeRateScale()
+            coordinateSystem = timelineChartCoordinateSystem
+            if (thisObject.plotterManager !== undefined) {
+                thisObject.plotterManager.setCoordinateSystem(coordinateSystem)
+            }
+        }
+        if (thisObject.payload.node.timeFrameScale === undefined && thisObject.timeFrameScale !== undefined) {
+            finalizeTimeFrameScale()
+        }
+        if (thisObject.payload.node.timeFrameScale !== undefined && thisObject.timeFrameScale === undefined) {
+            initializeTimeFrameScale()
+        }
+    }
+
+    function childrenPhysics() {
+        if (thisObject.rateScale !== undefined) {
+            thisObject.rateScale.layersOn = thisObject.plotterManager.connectors.length
+            thisObject.rateScale.physics()
+        }
+        if (thisObject.timeFrameScale !== undefined) {
+            thisObject.timeFrameScale.layersOn = thisObject.plotterManager.connectors.length
+            thisObject.timeFrameScale.physics()
+        }
+    }
+
+    function drawBackground() {
+        if (thisObject.container.frame.isInViewPort()) {
+            if (drawScales === true) {
+                if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) { thisObject.rateScale.drawBackground() }
+            }
+            drawChartsBackground()
+            if (thisObject.plotterManager !== undefined) {
+                let elementsPlotted = thisObject.plotterManager.draw()
+                if (thisObject.timeFrameScale !== undefined) {
+                    thisObject.timeFrameScale.adjustTimeFrame(elementsPlotted)
+                } else {
+                    return elementsPlotted
+                }
+            }
+        }
+    }
+
+    function draw() {
+        if (thisObject.container.frame.isInViewPort()) {
+            if (drawScales === true) {
+                if (thisObject.timeFrameScale !== undefined && thisObject.timeFrameScale.isVisible === true) { thisObject.timeFrameScale.draw() }
+                if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) { thisObject.rateScale.draw() }
+            }
+        }
+    }
+
+    function drawForeground() {
+        if (thisObject.container.frame.isInViewPort()) {
+            if (drawScales === true) {
+                if (thisObject.timeFrameScale !== undefined && thisObject.timeFrameScale.isVisible === true) { thisObject.timeFrameScale.drawForeground() }
+                if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) { thisObject.rateScale.drawForeground() }
+            }
+        }
+    }
+
+    function drawChartsBackground() {
+        drawContainerBackground(thisObject.container, UI_COLOR.WHITE, 0, thisObject.fitFunction)
+    }
 }

ChartingSpace/Viewport.js

@@ -1,421 +1,421 @@
 
-function newViewport () {
-  const MODULE_NAME = 'Viewport'
+function newViewport() {
+    const MODULE_NAME = 'Viewport'
 
-  const MIN_ZOOM_LEVEL = 0
-  const MAX_ZOOM_LEVEL = 500
+    const MIN_ZOOM_LEVEL = 0
+    const MAX_ZOOM_LEVEL = 500
 
-  let ANIMATION_INCREMENT = 0.25
-  let ANIMATION_STEPS = 5
+    let ANIMATION_INCREMENT = 0.25
+    let ANIMATION_STEPS = 5
 
-  let TOP_MARGIN = 40 + TOP_SPACE_HEIGHT
-  let BOTTOM_MARGIN = 42 + COCKPIT_SPACE_HEIGHT
-  let LEFT_MARGIN = 0
-  let RIGHT_MARGIN = 0
-  let MARGINS = {
-    TOP: TOP_MARGIN,
-    BOTTOM: BOTTOM_MARGIN,
-    LEFT: LEFT_MARGIN,
-    RIGHT: RIGHT_MARGIN
-  }
+    let TOP_MARGIN = 40 + TOP_SPACE_HEIGHT
+    let BOTTOM_MARGIN = 42 + COCKPIT_SPACE_HEIGHT
+    let LEFT_MARGIN = 0
+    let RIGHT_MARGIN = 0
+    let MARGINS = {
+        TOP: TOP_MARGIN,
+        BOTTOM: BOTTOM_MARGIN,
+        LEFT: LEFT_MARGIN,
+        RIGHT: RIGHT_MARGIN
+    }
 
-  let thisObject = {
-    visible: false,
-    visibleArea: undefined,
-    width: undefined,
-    height: undefined,
-    eventHandler: undefined,
-    zoomTargetLevel: undefined,
-    zoomLevel: undefined,
-    mousePosition: undefined,
-    margins: MARGINS,
-    payload: undefined,
-    zoomAtCenter: zoomAtCenter,
-    changeZoom: changeZoom,
-    onMouseWheel: onMouseWheel,
-    transformThisPoint: transformThisPoint,
-    unTransformThisPoint: unTransformThisPoint,
-    isThisPointVisible: isThisPointVisible,
-    isThisPointInViewport: isThisPointInViewport,
-    fitIntoVisibleArea: fitIntoVisibleArea,
-    fitIntoViewport: fitIntoViewport,
-    displace: displace,
-    displaceToContainer: displaceToContainer,
-    physics: physics,
-    raiseEvents: raiseEvents,
-    resize: resize,
-    initialize: initialize,
-    finalize: finalize
-  }
-  let increment = 0.035
-  let position = {
-    x: 0,
-    y: 0
-  }
+    let thisObject = {
+        visible: false,
+        visibleArea: undefined,
+        width: undefined,
+        height: undefined,
+        eventHandler: undefined,
+        zoomTargetLevel: undefined,
+        zoomLevel: undefined,
+        mousePosition: undefined,
+        margins: MARGINS,
+        payload: undefined,
+        zoomAtCenter: zoomAtCenter,
+        changeZoom: changeZoom,
+        onMouseWheel: onMouseWheel,
+        transformThisPoint: transformThisPoint,
+        unTransformThisPoint: unTransformThisPoint,
+        isThisPointVisible: isThisPointVisible,
+        isThisPointInViewport: isThisPointInViewport,
+        fitIntoVisibleArea: fitIntoVisibleArea,
+        fitIntoViewport: fitIntoViewport,
+        displace: displace,
+        displaceToContainer: displaceToContainer,
+        physics: physics,
+        raiseEvents: raiseEvents,
+        resize: resize,
+        initialize: initialize,
+        finalize: finalize
+    }
+    let increment = 0.035
+    let position = {
+        x: 0,
+        y: 0
+    }
 
-  thisObject.mousePosition = {
-    x: 0,
-    y: 0
-  }
-  thisObject.eventHandler = newEventHandler()
+    thisObject.mousePosition = {
+        x: 0,
+        y: 0
+    }
+    thisObject.eventHandler = newEventHandler()
 
-/* Initial default value */
-  thisObject.zoomLevel = MIN_ZOOM_LEVEL
-  thisObject.zoomTargetLevel = Math.round(MIN_ZOOM_LEVEL)
-  INITIAL_TIME_PERIOD = recalculatePeriod(thisObject.zoomLevel)
+    /* Initial default value */
+    thisObject.zoomLevel = MIN_ZOOM_LEVEL
+    thisObject.zoomTargetLevel = Math.round(MIN_ZOOM_LEVEL)
+    INITIAL_TIME_PERIOD = recalculatePeriod(thisObject.zoomLevel)
 
-  let overrideMousePositionCounter = 0
+    let overrideMousePositionCounter = 0
 
-  return thisObject
+    return thisObject
 
-  function finalize () {
-    thisObject.eventHandler.finalize()
-    thisObject.payload = undefined
-    thisObject = undefined
-  }
+    function finalize() {
+        thisObject.eventHandler.finalize()
+        thisObject.payload = undefined
+        thisObject = undefined
+    }
 
-  function initialize () {
-    if (thisObject.payload !== undefined) {
-      /* Read the position from the frame structure */
+    function initialize() {
+        if (thisObject.payload !== undefined) {
+            /* Read the position from the frame structure */
 
-      let frame = {
-        position: {
-          x: 0,
-          y: 0
+            let frame = {
+                position: {
+                    x: 0,
+                    y: 0
+                }
+            }
+            loadFrame(thisObject.payload, frame)
+            if (!isNaN(frame.position.x)) {
+                position.x = frame.position.x
+            }
+            if (!isNaN(frame.position.y)) {
+                position.y = frame.position.y
+            }
         }
-      }
-      loadFrame(thisObject.payload, frame)
-      if (!isNaN(frame.position.x)) {
-        position.x = frame.position.x
-      }
-      if (!isNaN(frame.position.y)) {
-        position.y = frame.position.y
-      }
+
+        resize()
+        readObjectState()
     }
 
-    resize()
-    readObjectState()
-  }
+    function resize() {
+        TOP_MARGIN = 40 + TOP_SPACE_HEIGHT
+        BOTTOM_MARGIN = 42 + browserCanvas.height - COCKPIT_SPACE_POSITION
+        LEFT_MARGIN = 0
+        RIGHT_MARGIN = 0
+        MARGINS = {
+            TOP: TOP_MARGIN,
+            BOTTOM: BOTTOM_MARGIN,
+            LEFT: LEFT_MARGIN,
+            RIGHT: RIGHT_MARGIN
+        }
 
-  function resize () {
-    TOP_MARGIN = 40 + TOP_SPACE_HEIGHT
-    BOTTOM_MARGIN = 42 + browserCanvas.height - COCKPIT_SPACE_POSITION
-    LEFT_MARGIN = 0
-    RIGHT_MARGIN = 0
-    MARGINS = {
-      TOP: TOP_MARGIN,
-      BOTTOM: BOTTOM_MARGIN,
-      LEFT: LEFT_MARGIN,
-      RIGHT: RIGHT_MARGIN
+        thisObject.visibleArea = {
+            topLeft: { x: LEFT_MARGIN, y: TOP_MARGIN },
+            topRight: { x: browserCanvas.width - RIGHT_MARGIN, y: TOP_MARGIN },
+            bottomRight: { x: browserCanvas.width - RIGHT_MARGIN, y: browserCanvas.height - BOTTOM_MARGIN },
+            bottomLeft: { x: LEFT_MARGIN, y: browserCanvas.height - BOTTOM_MARGIN }
+        }
+
+        thisObject.width = thisObject.visibleArea.topRight.x - thisObject.visibleArea.topLeft.x
+        thisObject.height = thisObject.visibleArea.bottomRight.y - thisObject.visibleArea.topLeft.y
+
+        thisObject.center = {
+            x: LEFT_MARGIN + thisObject.width / 2,
+            y: TOP_MARGIN + thisObject.height / 2
+        }
     }
 
-    thisObject.visibleArea = {
-      topLeft: { x: LEFT_MARGIN, y: TOP_MARGIN },
-      topRight: { x: browserCanvas.width - RIGHT_MARGIN, y: TOP_MARGIN },
-      bottomRight: { x: browserCanvas.width - RIGHT_MARGIN, y: browserCanvas.height - BOTTOM_MARGIN},
-      bottomLeft: { x: LEFT_MARGIN, y: browserCanvas.height - BOTTOM_MARGIN}
+    function raiseEvents() {
+        if (thisObject.visible === false) { return }
+        let event = {
+            newPosition: position
+        }
+
+        thisObject.eventHandler.raiseEvent('Position Changed', event)
     }
 
-    thisObject.width = thisObject.visibleArea.topRight.x - thisObject.visibleArea.topLeft.x
-    thisObject.height = thisObject.visibleArea.bottomRight.y - thisObject.visibleArea.topLeft.y
-
-    thisObject.center = {
-      x: LEFT_MARGIN + thisObject.width / 2,
-      y: TOP_MARGIN + thisObject.height / 2
-    }
-  }
-
-  function raiseEvents () {
-    if (thisObject.visible === false) { return }
-    let event = {
-      newPosition: position
+    function displaceToContainer(container) {
+        let targetPoint = {
+            x: -container.frame.position.x - container.frame.width / 2,
+            y: -container.frame.position.y - container.frame.height / 2
+        }
+        position.x = targetPoint.x + browserCanvas.width / 2
+        position.y = targetPoint.y + (COCKPIT_SPACE_POSITION - TOP_SPACE_HEIGHT) / 2 + TOP_SPACE_HEIGHT
     }
 
-    thisObject.eventHandler.raiseEvent('Position Changed', event)
-  }
-
-  function displaceToContainer (container) {
-    let targetPoint = {
-      x: -container.frame.position.x - container.frame.width / 2,
-      y: -container.frame.position.y - container.frame.height / 2
-    }
-    position.x = targetPoint.x + browserCanvas.width / 2
-    position.y = targetPoint.y + (COCKPIT_SPACE_POSITION - TOP_SPACE_HEIGHT) / 2 + TOP_SPACE_HEIGHT
-  }
-
-  function zoomAtCenter (level) {
-    thisObject.zoomTargetLevel = Math.round(level)
-    overrideMousePositionCounter = 50
-    ANIMATION_INCREMENT = 0.5
-  }
-
-  function mousePositionPhysics () {
-    if (overrideMousePositionCounter > 0) {
-      thisObject.mousePosition.x = browserCanvas.width / 2
-      thisObject.mousePosition.y = (COCKPIT_SPACE_POSITION - TOP_SPACE_HEIGHT) / 2 + TOP_SPACE_HEIGHT
-
-      overrideMousePositionCounter--
-      if (overrideMousePositionCounter < 0) {
-        overrideMousePositionCounter = 0
-      }
-    }
-  }
-
-  function physics () {
-    if (thisObject.visible === false) { return }
-    mousePositionPhysics()
-    animationPhysics()
-    positioningPhysics()
-    readObjectState()
-  }
-
-  function positioningPhysics () {
-    if (thisObject.visible === false) { return }
-    if (thisObject.payload === undefined) { return }
-    /* Save the position at the frame lavel */
-    let frame = {}
-    frame.position = position
-    saveFrame(thisObject.payload, frame)
-  }
-
-  function animationPhysics () {
-    if (thisObject.zoomLevel < thisObject.zoomTargetLevel) {
-      if (thisObject.zoomTargetLevel - thisObject.zoomLevel < ANIMATION_INCREMENT) {
-        ANIMATION_INCREMENT = Math.round(Math.abs(thisObject.zoomTargetLevel - thisObject.zoomLevel) * 100) / 100
-      }
-      thisObject.zoomLevel = Math.round((thisObject.zoomLevel + ANIMATION_INCREMENT) * 100) / 100
-      changeZoom(thisObject.zoomLevel - ANIMATION_INCREMENT, thisObject.zoomLevel)
+    function zoomAtCenter(level) {
+        thisObject.zoomTargetLevel = Math.round(level)
+        overrideMousePositionCounter = 50
+        ANIMATION_INCREMENT = 0.5
     }
 
-    if (thisObject.zoomLevel > thisObject.zoomTargetLevel) {
-      if (thisObject.zoomLevel - thisObject.zoomTargetLevel < ANIMATION_INCREMENT) {
-        ANIMATION_INCREMENT = Math.round(Math.abs(thisObject.zoomTargetLevel - thisObject.zoomLevel) * 100) / 100
-      }
-      thisObject.zoomLevel = Math.round((thisObject.zoomLevel - ANIMATION_INCREMENT) * 100) / 100
-      changeZoom(thisObject.zoomLevel + ANIMATION_INCREMENT, thisObject.zoomLevel)
-    }
-  }
+    function mousePositionPhysics() {
+        if (overrideMousePositionCounter > 0) {
+            thisObject.mousePosition.x = browserCanvas.width / 2
+            thisObject.mousePosition.y = (COCKPIT_SPACE_POSITION - TOP_SPACE_HEIGHT) / 2 + TOP_SPACE_HEIGHT
 
-  function onMouseWheel (event) {
-    if (thisObject.visible === false) { return }
-    if ((event.ctrlKey === true || event.metaKey === true)) { return }
-    let morePower = 1
-
-    if (IS_MAC) {
-      event.delta = event.delta * MAC_AMOUNT_FACTOR
+            overrideMousePositionCounter--
+            if (overrideMousePositionCounter < 0) {
+                overrideMousePositionCounter = 0
+            }
+        }
     }
 
-    let amount = event.delta
-
-    if (event.buttons === 4) { morePower = 2 } // Mouse wheel pressed.
-       /* We adjust the sensitivity for Mac Users */
-
-    if (thisObject.zoomTargetLevel > 10) {
-      amount = amount * 2
-    }
-    if (thisObject.zoomTargetLevel > 25) {
-      amount = amount * 3
-    }
-    if (thisObject.zoomTargetLevel > 50) {
-      amount = amount * 3.5
+    function physics() {
+        if (thisObject.visible === false) { return }
+        mousePositionPhysics()
+        animationPhysics()
+        positioningPhysics()
+        readObjectState()
     }
 
-    if (thisObject.zoomTargetLevel + amount * morePower > MAX_ZOOM_LEVEL) {
-      return false
-    }
-    if (thisObject.zoomTargetLevel + amount * morePower < MIN_ZOOM_LEVEL) {
-      return false
-    }
-    thisObject.zoomTargetLevel = Math.round(thisObject.zoomTargetLevel + amount * morePower)
-
-    ANIMATION_INCREMENT = Math.round(Math.abs(thisObject.zoomTargetLevel - thisObject.zoomLevel) / ANIMATION_STEPS * 100) / 100
-
-    let newEvent = {
-      newLevel: thisObject.zoomTargetLevel,
-      newPosition: position,
-      type: undefined,
-      shiftKey: event.shiftKey
+    function positioningPhysics() {
+        if (thisObject.visible === false) { return }
+        if (thisObject.payload === undefined) { return }
+        /* Save the position at the frame lavel */
+        let frame = {}
+        frame.position = position
+        saveFrame(thisObject.payload, frame)
     }
 
-    if (amount > 0) {
-      newEvent.type = 'Zoom In'
-    } else {
-      newEvent.type = 'Zoom Out'
+    function animationPhysics() {
+        if (thisObject.zoomLevel < thisObject.zoomTargetLevel) {
+            if (thisObject.zoomTargetLevel - thisObject.zoomLevel < ANIMATION_INCREMENT) {
+                ANIMATION_INCREMENT = Math.round(Math.abs(thisObject.zoomTargetLevel - thisObject.zoomLevel) * 100) / 100
+            }
+            thisObject.zoomLevel = Math.round((thisObject.zoomLevel + ANIMATION_INCREMENT) * 100) / 100
+            changeZoom(thisObject.zoomLevel - ANIMATION_INCREMENT, thisObject.zoomLevel)
+        }
+
+        if (thisObject.zoomLevel > thisObject.zoomTargetLevel) {
+            if (thisObject.zoomLevel - thisObject.zoomTargetLevel < ANIMATION_INCREMENT) {
+                ANIMATION_INCREMENT = Math.round(Math.abs(thisObject.zoomTargetLevel - thisObject.zoomLevel) * 100) / 100
+            }
+            thisObject.zoomLevel = Math.round((thisObject.zoomLevel - ANIMATION_INCREMENT) * 100) / 100
+            changeZoom(thisObject.zoomLevel + ANIMATION_INCREMENT, thisObject.zoomLevel)
+        }
     }
 
-    thisObject.eventHandler.raiseEvent('Zoom Changed', newEvent)
-    return true
-  }
+    function onMouseWheel(event) {
+        if (thisObject.visible === false) { return }
+        if ((event.ctrlKey === true || event.metaKey === true)) { return }
+        let morePower = 1
 
-  function fitIntoVisibleArea (point) {
-    let pointCopy = {
-      x: point.x,
-      y: point.y
+        if (IS_MAC) {
+            event.delta = event.delta * MAC_AMOUNT_FACTOR
+        }
+
+        let amount = event.delta
+
+        if (event.buttons === 4) { morePower = 2 } // Mouse wheel pressed.
+        /* We adjust the sensitivity for Mac Users */
+
+        if (thisObject.zoomTargetLevel > 10) {
+            amount = amount * 2
+        }
+        if (thisObject.zoomTargetLevel > 25) {
+            amount = amount * 3
+        }
+        if (thisObject.zoomTargetLevel > 50) {
+            amount = amount * 3.5
+        }
+
+        if (thisObject.zoomTargetLevel + amount * morePower > MAX_ZOOM_LEVEL) {
+            return false
+        }
+        if (thisObject.zoomTargetLevel + amount * morePower < MIN_ZOOM_LEVEL) {
+            return false
+        }
+        thisObject.zoomTargetLevel = Math.round(thisObject.zoomTargetLevel + amount * morePower)
+
+        ANIMATION_INCREMENT = Math.round(Math.abs(thisObject.zoomTargetLevel - thisObject.zoomLevel) / ANIMATION_STEPS * 100) / 100
+
+        let newEvent = {
+            newLevel: thisObject.zoomTargetLevel,
+            newPosition: position,
+            type: undefined,
+            shiftKey: event.shiftKey
+        }
+
+        if (amount > 0) {
+            newEvent.type = 'Zoom In'
+        } else {
+            newEvent.type = 'Zoom Out'
+        }
+
+        thisObject.eventHandler.raiseEvent('Zoom Changed', newEvent)
+        return true
     }
 
-    /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */
-    if (pointCopy.x > thisObject.visibleArea.bottomRight.x + 1) {
-      pointCopy.x = thisObject.visibleArea.bottomRight.x + 1
+    function fitIntoVisibleArea(point) {
+        let pointCopy = {
+            x: point.x,
+            y: point.y
+        }
+
+        /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */
+        if (pointCopy.x > thisObject.visibleArea.bottomRight.x + 1) {
+            pointCopy.x = thisObject.visibleArea.bottomRight.x + 1
+        }
+
+        if (pointCopy.x < thisObject.visibleArea.topLeft.x - 1) {
+            pointCopy.x = thisObject.visibleArea.topLeft.x - 1
+        }
+
+        if (pointCopy.y > thisObject.visibleArea.bottomRight.y + 1) {
+            pointCopy.y = thisObject.visibleArea.bottomRight.y + 1
+        }
+
+        if (pointCopy.y < thisObject.visibleArea.topLeft.y - 1) {
+            pointCopy.y = thisObject.visibleArea.topLeft.y - 1
+        }
+
+        return pointCopy
     }
 
-    if (pointCopy.x < thisObject.visibleArea.topLeft.x - 1) {
-      pointCopy.x = thisObject.visibleArea.topLeft.x - 1
+    function fitIntoViewport(point) {
+        let pointCopy = {
+            x: point.x,
+            y: point.y
+        }
+        if (pointCopy.y > COCKPIT_SPACE_POSITION) {
+            pointCopy.y = COCKPIT_SPACE_POSITION
+        }
+        return pointCopy
     }
 
-    if (pointCopy.y > thisObject.visibleArea.bottomRight.y + 1) {
-      pointCopy.y = thisObject.visibleArea.bottomRight.y + 1
-    }
+    function displace(displaceVector, recalculate) {
+        if (thisObject.visible === false) { return }
+        position.x = position.x + displaceVector.x
+        position.y = position.y + displaceVector.y
 
-    if (pointCopy.y < thisObject.visibleArea.topLeft.y - 1) {
-      pointCopy.y = thisObject.visibleArea.topLeft.y - 1
-    }
-
-    return pointCopy
-  }
-
-  function fitIntoViewport (point) {
-    let pointCopy = {
-      x: point.x,
-      y: point.y
-    }
-    if (pointCopy.y > COCKPIT_SPACE_POSITION) {
-      pointCopy.y = COCKPIT_SPACE_POSITION
-    }
-    return pointCopy
-  }
-
-  function displace (displaceVector, recalculate) {
-    if (thisObject.visible === false) { return }
-    position.x = position.x + displaceVector.x
-    position.y = position.y + displaceVector.y
-
-    saveObjectState()
-
-    let event = {
-      newPosition: position,
-      recalculate: recalculate
-    }
-
-    thisObject.eventHandler.raiseEvent('Position Changed', event)
-  }
-
-  function changeZoom (oldLevel, newLevel) {
-    if (thisObject.visible === false) { return }
-    let oldMouse = unTransformThisPoint(thisObject.mousePosition, oldLevel)
-    let newMouse = transformThisPoint(oldMouse, newLevel)
-
-    position.x = position.x - newMouse.x + thisObject.mousePosition.x
-    position.y = position.y - newMouse.y + thisObject.mousePosition.y
-
-    saveObjectState()
-
-    thisObject.eventHandler.raiseEvent('Zoom Changed')
-  }
-
-  function transformThisPoint (point, level) {
-    if (thisObject.visible === false) { return }
-    let transformedPoint = {
-      x: 0,
-      y: 0
-    }
-
-    if (level === undefined) {
-      transformedPoint.x = point.x * (1 + thisObject.zoomLevel) + position.x
-      transformedPoint.y = point.y * (1 + thisObject.zoomLevel) + position.y
-    } else {
-      transformedPoint.x = point.x * (1 + level) + position.x
-      transformedPoint.y = point.y * (1 + level) + position.y
-    }
-
-    return transformedPoint
-  }
-
-  function unTransformThisPoint (point, level) {
-    let pointWithoutZoom = {
-      x: 0,
-      y: 0
-    }
-    if (level === undefined) {
-      pointWithoutZoom.x = (point.x - position.x) / (1 + thisObject.zoomLevel)
-      pointWithoutZoom.y = (point.y - position.y) / (1 + thisObject.zoomLevel)
-    } else {
-      pointWithoutZoom.x = (point.x - position.x) / (1 + level)
-      pointWithoutZoom.y = (point.y - position.y) / (1 + level)
-    }
-
-    return pointWithoutZoom
-  }
-
-  function isThisPointVisible (point) {
-    if (thisObject.visible === false) { return }
-    if (point.x < thisObject.visibleArea.topLeft.x || point.x > thisObject.visibleArea.bottomRight.x || point.y < thisObject.visibleArea.topLeft.y || point.y > thisObject.visibleArea.bottomRight.y) {
-      return false
-    } else {
-      return true
-    }
-  }
-
-  function isThisPointInViewport (point) {
-    if (thisObject.visible === false) { return }
-    if (point.y > COCKPIT_SPACE_POSITION) {
-      return false
-    } else {
-      return true
-    }
-  }
-
-  function saveObjectState () {
-    if (thisObject.payload === undefined) { return }
-
-    /* Save the zoom at the node config, so that the user can change it if he wishes to. */
-    try {
-      let config = JSON.parse(thisObject.payload.node.config)
-      config.zoom = (thisObject.zoomTargetLevel - MIN_ZOOM_LEVEL) / (MAX_ZOOM_LEVEL - MIN_ZOOM_LEVEL) * 100
-      config.zoom = config.zoom.toFixed(2)
-      thisObject.payload.node.config = JSON.stringify(config)
-    } catch (err) {
-       // we ignore errors here since most likely they will be parsing errors.
-    }
-  }
-
-  function readObjectState () {
-    if (thisObject.payload === undefined) { return }
-
-    /* Read the zoom level from the node config */
-    try {
-      let config = JSON.parse(thisObject.payload.node.config)
-
-      if (isNaN(config.zoom) || config.zoom === null || config.zoom === undefined) {
         saveObjectState()
-        return
-      }
-      config.zoom = config.zoom / 100 * (MAX_ZOOM_LEVEL - MIN_ZOOM_LEVEL) + MIN_ZOOM_LEVEL
-      if (config.zoom < MIN_ZOOM_LEVEL) { config.zoom = MIN_ZOOM_LEVEL }
-      if (config.zoom > MAX_ZOOM_LEVEL) { config.zoom = MAX_ZOOM_LEVEL }
 
-      if (config.zoom.toFixed(2) !== thisObject.zoomTargetLevel.toFixed(2)) {
-        newZoomLevel(config.zoom)
-      } else {
+        let event = {
+            newPosition: position,
+            recalculate: recalculate
+        }
+
+        thisObject.eventHandler.raiseEvent('Position Changed', event)
+    }
+
+    function changeZoom(oldLevel, newLevel) {
+        if (thisObject.visible === false) { return }
+        let oldMouse = unTransformThisPoint(thisObject.mousePosition, oldLevel)
+        let newMouse = transformThisPoint(oldMouse, newLevel)
+
+        position.x = position.x - newMouse.x + thisObject.mousePosition.x
+        position.y = position.y - newMouse.y + thisObject.mousePosition.y
+
         saveObjectState()
-      }
-    } catch (err) {
-       // we ignore errors here since most likely they will be parsing errors.
+
+        thisObject.eventHandler.raiseEvent('Zoom Changed')
     }
 
-    function newZoomLevel (level) {
-      thisObject.zoomLevel = Math.round(level)
-      thisObject.zoomTargetLevel = Math.round(level)
-      INITIAL_TIME_PERIOD = recalculatePeriod(level)
-      saveObjectState()
-      ANIMATION_INCREMENT = 0
+    function transformThisPoint(point, level) {
+        if (thisObject.visible === false) { return }
+        let transformedPoint = {
+            x: 0,
+            y: 0
+        }
 
-      let event = {
-        newLevel: thisObject.zoomTargetLevel,
-        newPosition: position,
-        type: undefined
-      }
-      thisObject.eventHandler.raiseEvent('Zoom Changed', event)
-      return true
+        if (level === undefined) {
+            transformedPoint.x = point.x * (1 + thisObject.zoomLevel) + position.x
+            transformedPoint.y = point.y * (1 + thisObject.zoomLevel) + position.y
+        } else {
+            transformedPoint.x = point.x * (1 + level) + position.x
+            transformedPoint.y = point.y * (1 + level) + position.y
+        }
+
+        return transformedPoint
+    }
+
+    function unTransformThisPoint(point, level) {
+        let pointWithoutZoom = {
+            x: 0,
+            y: 0
+        }
+        if (level === undefined) {
+            pointWithoutZoom.x = (point.x - position.x) / (1 + thisObject.zoomLevel)
+            pointWithoutZoom.y = (point.y - position.y) / (1 + thisObject.zoomLevel)
+        } else {
+            pointWithoutZoom.x = (point.x - position.x) / (1 + level)
+            pointWithoutZoom.y = (point.y - position.y) / (1 + level)
+        }
+
+        return pointWithoutZoom
+    }
+
+    function isThisPointVisible(point) {
+        if (thisObject.visible === false) { return }
+        if (point.x < thisObject.visibleArea.topLeft.x || point.x > thisObject.visibleArea.bottomRight.x || point.y < thisObject.visibleArea.topLeft.y || point.y > thisObject.visibleArea.bottomRight.y) {
+            return false
+        } else {
+            return true
+        }
+    }
+
+    function isThisPointInViewport(point) {
+        if (thisObject.visible === false) { return }
+        if (point.y > COCKPIT_SPACE_POSITION) {
+            return false
+        } else {
+            return true
+        }
+    }
+
+    function saveObjectState() {
+        if (thisObject.payload === undefined) { return }
+
+        /* Save the zoom at the node config, so that the user can change it if he wishes to. */
+        try {
+            let config = JSON.parse(thisObject.payload.node.config)
+            config.zoom = (thisObject.zoomTargetLevel - MIN_ZOOM_LEVEL) / (MAX_ZOOM_LEVEL - MIN_ZOOM_LEVEL) * 100
+            config.zoom = config.zoom.toFixed(2)
+            thisObject.payload.node.config = JSON.stringify(config)
+        } catch (err) {
+            // we ignore errors here since most likely they will be parsing errors.
+        }
+    }
+
+    function readObjectState() {
+        if (thisObject.payload === undefined) { return }
+
+        /* Read the zoom level from the node config */
+        try {
+            let config = JSON.parse(thisObject.payload.node.config)
+
+            if (isNaN(config.zoom) || config.zoom === null || config.zoom === undefined) {
+                saveObjectState()
+                return
+            }
+            config.zoom = config.zoom / 100 * (MAX_ZOOM_LEVEL - MIN_ZOOM_LEVEL) + MIN_ZOOM_LEVEL
+            if (config.zoom < MIN_ZOOM_LEVEL) { config.zoom = MIN_ZOOM_LEVEL }
+            if (config.zoom > MAX_ZOOM_LEVEL) { config.zoom = MAX_ZOOM_LEVEL }
+
+            if (config.zoom.toFixed(2) !== thisObject.zoomTargetLevel.toFixed(2)) {
+                newZoomLevel(config.zoom)
+            } else {
+                saveObjectState()
+            }
+        } catch (err) {
+            // we ignore errors here since most likely they will be parsing errors.
+        }
+
+        function newZoomLevel(level) {
+            thisObject.zoomLevel = Math.round(level)
+            thisObject.zoomTargetLevel = Math.round(level)
+            INITIAL_TIME_PERIOD = recalculatePeriod(level)
+            saveObjectState()
+            ANIMATION_INCREMENT = 0
+
+            let event = {
+                newLevel: thisObject.zoomTargetLevel,
+                newPosition: position,
+                type: undefined
+            }
+            thisObject.eventHandler.raiseEvent('Zoom Changed', event)
+            return true
+        }
     }
-  }
 }

CockpitSpace/AssetBalances.js

@@ -1,123 +1,123 @@
 
-function newAssetalances () {
-  const MODULE_NAME = 'Asset Balances'
+function newAssetalances() {
+    const MODULE_NAME = 'Asset Balances'
 
-  let thisObject = {
-    visible: true,
-    container: undefined,
-    paramsArray: undefined,
-    setParamsArray: setParamsArray,
-    physics: physics,
-    draw: draw,
-    speedometers: [],
-    getContainer: getContainer,
-    initialize: initialize,
-    finalize: finalize
-  }
-
-  thisObject.container = newContainer()
-  thisObject.container.initialize(MODULE_NAME)
-
-  thisObject.container.isDraggeable = false
-  thisObject.container.isWheelable = false
-
-  return thisObject
-
-  function finalize () {
-    for (let i = 0; i < thisObject.speedometers.length; i++) {
-      let speedometer = thisObject.speedometers[i]
-      speedometer.finalize()
+    let thisObject = {
+        visible: true,
+        container: undefined,
+        paramsArray: undefined,
+        setParamsArray: setParamsArray,
+        physics: physics,
+        draw: draw,
+        speedometers: [],
+        getContainer: getContainer,
+        initialize: initialize,
+        finalize: finalize
     }
-    thisObject.container.finalize()
-    thisObject.container = undefined
-    thisObject.paramsArray = undefined
-  }
 
-  function initialize () {
-    for (let i = 0; i < 2; i++) {
-      let speedometer = newSpeedometer()
+    thisObject.container = newContainer()
+    thisObject.container.initialize(MODULE_NAME)
 
-      speedometer.initialize()
-      speedometer.container.connectToParent(thisObject.container)
-      speedometer.container.frame.position.x = thisObject.container.frame.width / 2
-      speedometer.container.frame.position.y = thisObject.container.frame.height * (2 + i * 2) / 5
-      thisObject.speedometers.push(speedometer)
-    }
-  }
+    thisObject.container.isDraggeable = false
+    thisObject.container.isWheelable = false
 
-  function getContainer (point, purpose) {
-    if (thisObject.visible !== true) { return }
+    return thisObject
 
-    let container
-    for (let i = 0; i < thisObject.speedometers.length; i++) {
-      container = thisObject.speedometers[i].getContainer(point, purpose)
-      if (container !== undefined) {
-        if (container.isForThisPurpose(purpose)) {
-          if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-            return container
-          }
+    function finalize() {
+        for (let i = 0; i < thisObject.speedometers.length; i++) {
+            let speedometer = thisObject.speedometers[i]
+            speedometer.finalize()
         }
-      }
+        thisObject.container.finalize()
+        thisObject.container = undefined
+        thisObject.paramsArray = undefined
     }
 
-    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-      return thisObject.container
-    } else {
-      return undefined
-    }
-  }
+    function initialize() {
+        for (let i = 0; i < 2; i++) {
+            let speedometer = newSpeedometer()
 
-  function setParamsArray (paramsArray) {
-    thisObject.paramsArray = paramsArray
-    for (let i = 0; i < thisObject.speedometers.length; i++) {
-      let speedometer = thisObject.speedometers[i]
-      speedometer.params = paramsArray[i]
-    }
-  }
-
-  function physics () {
-
-  }
-
-  function draw () {
-    if (thisObject.visible !== true) { return }
-
-    for (let i = 0; i < thisObject.speedometers.length; i++) {
-      let speedometer = thisObject.speedometers[i]
-      speedometer.draw()
+            speedometer.initialize()
+            speedometer.container.connectToParent(thisObject.container)
+            speedometer.container.frame.position.x = thisObject.container.frame.width / 2
+            speedometer.container.frame.position.y = thisObject.container.frame.height * (2 + i * 2) / 5
+            thisObject.speedometers.push(speedometer)
+        }
     }
 
-    drawQuotedAssetalances()
-  }
+    function getContainer(point, purpose) {
+        if (thisObject.visible !== true) { return }
 
-  function drawQuotedAssetalances () {
-    if (thisObject.paramsArray === undefined) { return }
+        let container
+        for (let i = 0; i < thisObject.speedometers.length; i++) {
+            container = thisObject.speedometers[i].getContainer(point, purpose)
+            if (container !== undefined) {
+                if (container.isForThisPurpose(purpose)) {
+                    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+                        return container
+                    }
+                }
+            }
+        }
 
-    let fontSize
-    let label
-    let xOffset
-    let yOffset
-
-    const OPACITY = 1
-
-      /* We put the params.VALUE in the middle */
-
-    fontSize = 15
-
-    browserCanvasContext.font = 'bold  ' + fontSize + 'px ' + UI_FONT.PRIMARY
-
-    label = 'ASSET BALANCES'
-
-    xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO
-    yOffset = -45 + 9
-
-    labelPoint = {
-      x: 0 - xOffset + (thisObject.paramsArray[1].LEFT_OFFSET - thisObject.paramsArray[0].LEFT_OFFSET) / 2 + thisObject.paramsArray[0].LEFT_OFFSET - 20,
-      y: COCKPIT_SPACE_POSITION - COCKPIT_SPACE_HEIGHT / 2 - yOffset
+        if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+            return thisObject.container
+        } else {
+            return undefined
+        }
     }
 
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')'
-    browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
-  }
+    function setParamsArray(paramsArray) {
+        thisObject.paramsArray = paramsArray
+        for (let i = 0; i < thisObject.speedometers.length; i++) {
+            let speedometer = thisObject.speedometers[i]
+            speedometer.params = paramsArray[i]
+        }
+    }
+
+    function physics() {
+
+    }
+
+    function draw() {
+        if (thisObject.visible !== true) { return }
+
+        for (let i = 0; i < thisObject.speedometers.length; i++) {
+            let speedometer = thisObject.speedometers[i]
+            speedometer.draw()
+        }
+
+        drawQuotedAssetalances()
+    }
+
+    function drawQuotedAssetalances() {
+        if (thisObject.paramsArray === undefined) { return }
+
+        let fontSize
+        let label
+        let xOffset
+        let yOffset
+
+        const OPACITY = 1
+
+        /* We put the params.VALUE in the middle */
+
+        fontSize = 15
+
+        browserCanvasContext.font = 'bold  ' + fontSize + 'px ' + UI_FONT.PRIMARY
+
+        label = 'ASSET BALANCES'
+
+        xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO
+        yOffset = -45 + 9
+
+        labelPoint = {
+            x: 0 - xOffset + (thisObject.paramsArray[1].LEFT_OFFSET - thisObject.paramsArray[0].LEFT_OFFSET) / 2 + thisObject.paramsArray[0].LEFT_OFFSET - 20,
+            y: COCKPIT_SPACE_POSITION - COCKPIT_SPACE_HEIGHT / 2 - yOffset
+        }
+
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')'
+        browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
+    }
 }
 

CockpitSpace/FullScreen.js

@@ -1,169 +1,169 @@
 
-function newFullScreen () {
-  const MODULE_NAME = 'Fullscreen'
+function newFullScreen() {
+    const MODULE_NAME = 'Fullscreen'
 
-  let thisObject = {
-    visible: true,
-    container: undefined,
-    status: undefined,
-    physics: physics,
-    draw: draw,
-    getContainer: getContainer,
-    initialize: initialize,
-    finalize: finalize
-  }
-
-  thisObject.container = newContainer()
-  thisObject.container.initialize(MODULE_NAME)
-
-  thisObject.container.isDraggeable = false
-  thisObject.container.isWheelable = false
-  thisObject.container.isClickeable = true
-  thisObject.container.detectMouseOver = true
-
-  let selfMouseOverEventSubscriptionId
-  let selfMouseClickEventSubscriptionId
-  let selfMouseNotOverEventSubscriptionId
-
-  let isMouseOver = false
-  let counterTillNextState = 0
-
-  let layersToTurnOn = []
-  return thisObject
-
-  function finalize () {
-    thisObject.container.eventHandler.stopListening(selfMouseOverEventSubscriptionId)
-    thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId)
-    thisObject.container.eventHandler.stopListening(selfMouseNotOverEventSubscriptionId)
-
-    thisObject.container.finalize()
-    thisObject.container = undefined
-  }
-
-  function initialize () {
-    thisObject.container.frame.width = 50
-    thisObject.container.frame.height = COCKPIT_SPACE_HEIGHT - 12
-
-    selfMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
-    selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
-    selfMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
-
-    thisObject.status = 'Ready'
-  }
-
-  function getContainer (point, purpose) {
-    if (thisObject.visible !== true) { return }
-
-    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-      return thisObject.container
-    } else {
-      return undefined
-    }
-  }
-
-  function onMouseOver (point) {
-    if (thisObject.container.frame.isThisPointHere(point, true, false) === true) {
-      isMouseOver = true
-    } else {
-      isMouseOver = false
-    }
-  }
-
-  function onMouseNotOver (point) {
-    isMouseOver = false
-  }
-
-  function onMouseClick (event) {
-    if (thisObject.status !== 'On') {
-      thisObject.status = 'On'
-      goFullscreen()
-      CURRENT_TOP_MARGIN = 0
-      AT_FULL_SCREEN_MODE = true
-    } else {
-      thisObject.status = 'Off'
-      goOutFullscreen()
-      CURRENT_TOP_MARGIN = TOP_MARGIN
-      AT_FULL_SCREEN_MODE = false
-    }
-  }
-
-  function goFullscreen () {
-    if (browserCanvas.requestFullscreen)  		    {
-      browserCanvas.requestFullscreen()
-    }  	    else if (browserCanvas.mozRequestFullScreen)  		{
-      browserCanvas.mozRequestFullScreen()
-    }  	else if (browserCanvas.webkitRequestFullscreen)  		{
-      browserCanvas.webkitRequestFullscreen()
-    }  	else if (browserCanvas.msRequestFullscreen)  		{ browserCanvas.msRequestFullscreen() }
-  }
-
-  function goOutFullscreen () {
-    if (document.exitFullscreen)  		{
-      document.exitFullscreen()
-    }  	else if (document.mozCancelFullScreen)  		{
-      document.mozCancelFullScreen()
-    }  	else if (document.webkitExitFullscreen)  		{
-      document.webkitExitFullscreen()
-    }  	else if (document.msExitFullscreen)  		{ document.msExitFullscreen() }
-  }
-
-  function physics () {
-    positionPhysics()
-  }
-
-  function positionPhysics () {
-    thisObject.container.frame.position.x = thisObject.container.parentContainer.frame.width - thisObject.container.frame.width
-    thisObject.container.frame.position.y = 6
-  }
-
-  function draw () {
-    if (thisObject.visible !== true) { return }
-    drawBackground()
-    drawText()
-  }
-
-  function drawBackground () {
-    let params = {
-      cornerRadius: 3,
-      lineWidth: 0.01,
-      container: thisObject.container,
-      borderColor: UI_COLOR.DARK,
-      castShadow: false,
-      opacity: 1
+    let thisObject = {
+        visible: true,
+        container: undefined,
+        status: undefined,
+        physics: physics,
+        draw: draw,
+        getContainer: getContainer,
+        initialize: initialize,
+        finalize: finalize
     }
 
-    if (isMouseOver === true) {
-      params.backgroundColor = UI_COLOR.TURQUOISE
-    } else {
-      params.backgroundColor = UI_COLOR.DARK_TURQUOISE
+    thisObject.container = newContainer()
+    thisObject.container.initialize(MODULE_NAME)
+
+    thisObject.container.isDraggeable = false
+    thisObject.container.isWheelable = false
+    thisObject.container.isClickeable = true
+    thisObject.container.detectMouseOver = true
+
+    let selfMouseOverEventSubscriptionId
+    let selfMouseClickEventSubscriptionId
+    let selfMouseNotOverEventSubscriptionId
+
+    let isMouseOver = false
+    let counterTillNextState = 0
+
+    let layersToTurnOn = []
+    return thisObject
+
+    function finalize() {
+        thisObject.container.eventHandler.stopListening(selfMouseOverEventSubscriptionId)
+        thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId)
+        thisObject.container.eventHandler.stopListening(selfMouseNotOverEventSubscriptionId)
+
+        thisObject.container.finalize()
+        thisObject.container = undefined
     }
 
-    roundedCornersBackground(params)
-  }
+    function initialize() {
+        thisObject.container.frame.width = 50
+        thisObject.container.frame.height = COCKPIT_SPACE_HEIGHT - 12
 
-  function drawText () {
-    let fontSize
-    let label
-    let xOffset
-    let yOffset
+        selfMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
+        selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
+        selfMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
 
-    const OPACITY = 1
-
-      /* We put the params.VALUE in the middle */
-
-    fontSize = 15
-
-    browserCanvasContext.font = 'bold  ' + fontSize + 'px ' + UI_FONT.PRIMARY
-    label = 'FS'
-
-    let labelPoint = {
-      x: thisObject.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO,
-      y: thisObject.container.frame.height - 9
+        thisObject.status = 'Ready'
     }
-    labelPoint = thisObject.container.frame.frameThisPoint(labelPoint)
 
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')'
-    browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
-  }
+    function getContainer(point, purpose) {
+        if (thisObject.visible !== true) { return }
+
+        if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+            return thisObject.container
+        } else {
+            return undefined
+        }
+    }
+
+    function onMouseOver(point) {
+        if (thisObject.container.frame.isThisPointHere(point, true, false) === true) {
+            isMouseOver = true
+        } else {
+            isMouseOver = false
+        }
+    }
+
+    function onMouseNotOver(point) {
+        isMouseOver = false
+    }
+
+    function onMouseClick(event) {
+        if (thisObject.status !== 'On') {
+            thisObject.status = 'On'
+            goFullscreen()
+            CURRENT_TOP_MARGIN = 0
+            AT_FULL_SCREEN_MODE = true
+        } else {
+            thisObject.status = 'Off'
+            goOutFullscreen()
+            CURRENT_TOP_MARGIN = TOP_MARGIN
+            AT_FULL_SCREEN_MODE = false
+        }
+    }
+
+    function goFullscreen() {
+        if (browserCanvas.requestFullscreen) {
+            browserCanvas.requestFullscreen()
+        } else if (browserCanvas.mozRequestFullScreen) {
+            browserCanvas.mozRequestFullScreen()
+        } else if (browserCanvas.webkitRequestFullscreen) {
+            browserCanvas.webkitRequestFullscreen()
+        } else if (browserCanvas.msRequestFullscreen) { browserCanvas.msRequestFullscreen() }
+    }
+
+    function goOutFullscreen() {
+        if (document.exitFullscreen) {
+            document.exitFullscreen()
+        } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen()
+        } else if (document.webkitExitFullscreen) {
+            document.webkitExitFullscreen()
+        } else if (document.msExitFullscreen) { document.msExitFullscreen() }
+    }
+
+    function physics() {
+        positionPhysics()
+    }
+
+    function positionPhysics() {
+        thisObject.container.frame.position.x = thisObject.container.parentContainer.frame.width - thisObject.container.frame.width
+        thisObject.container.frame.position.y = 6
+    }
+
+    function draw() {
+        if (thisObject.visible !== true) { return }
+        drawBackground()
+        drawText()
+    }
+
+    function drawBackground() {
+        let params = {
+            cornerRadius: 3,
+            lineWidth: 0.01,
+            container: thisObject.container,
+            borderColor: UI_COLOR.DARK,
+            castShadow: false,
+            opacity: 1
+        }
+
+        if (isMouseOver === true) {
+            params.backgroundColor = UI_COLOR.TURQUOISE
+        } else {
+            params.backgroundColor = UI_COLOR.DARK_TURQUOISE
+        }
+
+        roundedCornersBackground(params)
+    }
+
+    function drawText() {
+        let fontSize
+        let label
+        let xOffset
+        let yOffset
+
+        const OPACITY = 1
+
+        /* We put the params.VALUE in the middle */
+
+        fontSize = 15
+
+        browserCanvasContext.font = 'bold  ' + fontSize + 'px ' + UI_FONT.PRIMARY
+        label = 'FS'
+
+        let labelPoint = {
+            x: thisObject.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO,
+            y: thisObject.container.frame.height - 9
+        }
+        labelPoint = thisObject.container.frame.frameThisPoint(labelPoint)
+
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')'
+        browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
+    }
 }
 

CockpitSpace/Speedometer.js

@@ -1,265 +1,265 @@
 
-function newSpeedometer () {
-  const MODULE_NAME = 'Speedometer'
+function newSpeedometer() {
+    const MODULE_NAME = 'Speedometer'
 
-  let thisObject = {
-    visible: true,
-    container: undefined,
-    params: undefined,
-    physics: physics,
-    draw: draw,
-    getContainer: getContainer,
-    initialize: initialize,
-    finalize: finalize
-  }
-
-  thisObject.container = newContainer()
-  thisObject.container.initialize(MODULE_NAME)
-
-  thisObject.container.isDraggeable = false
-  thisObject.container.isWheelable = false
-
-  return thisObject
-
-  function finalize () {
-    thisObject.container.finalize()
-    thisObject.container = undefined
-    thisObject.params = undefined
-  }
-
-  function initialize () {
-
-  }
-
-  function getContainer (point, purpose) {
-    if (thisObject.visible !== true) { return }
-
-    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-      return thisObject.container
-    } else {
-      return undefined
-    }
-  }
-
-  function physics () {
-
-  }
-
-  function draw () {
-    if (thisObject.params === undefined) { return }
-    drawAssetCircle()
-  }
-
-  function drawAssetCircle () {
-    const RED_LINE_HIGHT = 2
-    const RADIUS = 50
-    const OPACITY = 1
-
-    let centerPoint = {
-      x: 0,
-      y: 0
+    let thisObject = {
+        visible: true,
+        container: undefined,
+        params: undefined,
+        physics: physics,
+        draw: draw,
+        getContainer: getContainer,
+        initialize: initialize,
+        finalize: finalize
     }
 
-    centerPoint = thisObject.container.frame.frameThisPoint(centerPoint)
+    thisObject.container = newContainer()
+    thisObject.container.initialize(MODULE_NAME)
 
-    browserCanvasContext.beginPath()
-    browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIUS + RED_LINE_HIGHT, 0 * Math.PI, 2.0 * Math.PI)
-    browserCanvasContext.closePath()
+    thisObject.container.isDraggeable = false
+    thisObject.container.isWheelable = false
 
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + OPACITY + ')'
-    browserCanvasContext.fill()
+    return thisObject
 
-    browserCanvasContext.beginPath()
-    browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIUS, 0.0 * Math.PI, 2.0 * Math.PI)
-    browserCanvasContext.closePath()
+    function finalize() {
+        thisObject.container.finalize()
+        thisObject.container = undefined
+        thisObject.params = undefined
+    }
 
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + OPACITY + ')'
-    browserCanvasContext.fill()
+    function initialize() {
 
-    /* We draw the circle bar */
+    }
 
-    const DEFAULT_THICKNESS = 2
-    const VALUE_THICKNESS = 8
-    const VALUE_BG_THICKNESS = 1
-    const BAR_RADIUS = RADIUS * 0.85
+    function getContainer(point, purpose) {
+        if (thisObject.visible !== true) { return }
 
-    let BAR_START_ANGLE = 0.85 * Math.PI
-    let BAR_END_ANGLE = 2.15 * Math.PI
-    let CURRENT_VALUE_ANGLE = thisObject.params.VALUE * (BAR_END_ANGLE - BAR_START_ANGLE) / thisObject.params.MAX_VALUE + BAR_START_ANGLE
-    let MIN_VALUE_ANGLE = thisObject.params.MIN_VALUE * (BAR_END_ANGLE - BAR_START_ANGLE) / thisObject.params.MAX_VALUE + BAR_START_ANGLE
-    let INIT_VALUE_ANGLE = thisObject.params.INIT_VALUE * (BAR_END_ANGLE - BAR_START_ANGLE) / thisObject.params.MAX_VALUE + BAR_START_ANGLE
-    let PROFIT_VALUE_ANGLE = CURRENT_VALUE_ANGLE
+        if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+            return thisObject.container
+        } else {
+            return undefined
+        }
+    }
 
-    if (CURRENT_VALUE_ANGLE > INIT_VALUE_ANGLE) { CURRENT_VALUE_ANGLE = INIT_VALUE_ANGLE }
-    if (CURRENT_VALUE_ANGLE < MIN_VALUE_ANGLE) { CURRENT_VALUE_ANGLE = MIN_VALUE_ANGLE }
-    if (PROFIT_VALUE_ANGLE > BAR_END_ANGLE) { PROFIT_VALUE_ANGLE = BAR_END_ANGLE }
+    function physics() {
 
-    if (
-    thisObject.params.VALUE > 0 &&
-     thisObject.params.ASSET_NAME === thisObject.params.BASE_ASSET &&
-     thisObject.params.POSITION_TAKEN === false
-    ) {
-      browserCanvasContext.setLineDash([0, 0])
+    }
 
-      browserCanvasContext.beginPath()
-      browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIUS, BAR_START_ANGLE, MIN_VALUE_ANGLE)
+    function draw() {
+        if (thisObject.params === undefined) { return }
+        drawAssetCircle()
+    }
 
-      browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')'
-      browserCanvasContext.lineWidth = VALUE_BG_THICKNESS
-      browserCanvasContext.stroke()
-      browserCanvasContext.closePath()
+    function drawAssetCircle() {
+        const RED_LINE_HIGHT = 2
+        const RADIUS = 50
+        const OPACITY = 1
 
-      browserCanvasContext.beginPath()
-      browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIUS, MIN_VALUE_ANGLE, CURRENT_VALUE_ANGLE)
+        let centerPoint = {
+            x: 0,
+            y: 0
+        }
 
-      browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')'
-      browserCanvasContext.lineWidth = VALUE_BG_THICKNESS
-      browserCanvasContext.stroke()
-      browserCanvasContext.closePath()
+        centerPoint = thisObject.container.frame.frameThisPoint(centerPoint)
 
-      browserCanvasContext.beginPath()
-      browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIUS, CURRENT_VALUE_ANGLE, INIT_VALUE_ANGLE)
-
-      browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RED + ', ' + OPACITY + ')'
-      browserCanvasContext.lineWidth = VALUE_BG_THICKNESS
-      browserCanvasContext.stroke()
-      browserCanvasContext.closePath()
-
-      if (PROFIT_VALUE_ANGLE > INIT_VALUE_ANGLE) {
         browserCanvasContext.beginPath()
-        browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIUS, INIT_VALUE_ANGLE, PROFIT_VALUE_ANGLE)
-
-        browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREEN + ', ' + OPACITY + ')'
-        browserCanvasContext.lineWidth = VALUE_BG_THICKNESS
-        browserCanvasContext.stroke()
+        browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIUS + RED_LINE_HIGHT, 0 * Math.PI, 2.0 * Math.PI)
         browserCanvasContext.closePath()
-      }
 
-      browserCanvasContext.setLineDash([2, 3])
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + OPACITY + ')'
+        browserCanvasContext.fill()
 
-      browserCanvasContext.beginPath()
-      browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIUS, BAR_START_ANGLE, MIN_VALUE_ANGLE)
-
-      browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')'
-      browserCanvasContext.lineWidth = VALUE_THICKNESS
-      browserCanvasContext.stroke()
-      browserCanvasContext.closePath()
-
-      browserCanvasContext.beginPath()
-      browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIUS, MIN_VALUE_ANGLE, CURRENT_VALUE_ANGLE)
-
-      browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')'
-      browserCanvasContext.lineWidth = VALUE_THICKNESS
-      browserCanvasContext.stroke()
-      browserCanvasContext.closePath()
-
-      browserCanvasContext.beginPath()
-      browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIUS, CURRENT_VALUE_ANGLE, INIT_VALUE_ANGLE)
-
-      browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RED + ', ' + OPACITY + ')'
-      browserCanvasContext.lineWidth = VALUE_THICKNESS
-      browserCanvasContext.stroke()
-      browserCanvasContext.closePath()
-
-      if (PROFIT_VALUE_ANGLE > INIT_VALUE_ANGLE) {
         browserCanvasContext.beginPath()
-        browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIUS, INIT_VALUE_ANGLE, PROFIT_VALUE_ANGLE)
-
-        browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREEN + ', ' + OPACITY + ')'
-        browserCanvasContext.lineWidth = VALUE_THICKNESS
-        browserCanvasContext.stroke()
+        browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIUS, 0.0 * Math.PI, 2.0 * Math.PI)
         browserCanvasContext.closePath()
-      }
+
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + OPACITY + ')'
+        browserCanvasContext.fill()
+
+        /* We draw the circle bar */
+
+        const DEFAULT_THICKNESS = 2
+        const VALUE_THICKNESS = 8
+        const VALUE_BG_THICKNESS = 1
+        const BAR_RADIUS = RADIUS * 0.85
+
+        let BAR_START_ANGLE = 0.85 * Math.PI
+        let BAR_END_ANGLE = 2.15 * Math.PI
+        let CURRENT_VALUE_ANGLE = thisObject.params.VALUE * (BAR_END_ANGLE - BAR_START_ANGLE) / thisObject.params.MAX_VALUE + BAR_START_ANGLE
+        let MIN_VALUE_ANGLE = thisObject.params.MIN_VALUE * (BAR_END_ANGLE - BAR_START_ANGLE) / thisObject.params.MAX_VALUE + BAR_START_ANGLE
+        let INIT_VALUE_ANGLE = thisObject.params.INIT_VALUE * (BAR_END_ANGLE - BAR_START_ANGLE) / thisObject.params.MAX_VALUE + BAR_START_ANGLE
+        let PROFIT_VALUE_ANGLE = CURRENT_VALUE_ANGLE
+
+        if (CURRENT_VALUE_ANGLE > INIT_VALUE_ANGLE) { CURRENT_VALUE_ANGLE = INIT_VALUE_ANGLE }
+        if (CURRENT_VALUE_ANGLE < MIN_VALUE_ANGLE) { CURRENT_VALUE_ANGLE = MIN_VALUE_ANGLE }
+        if (PROFIT_VALUE_ANGLE > BAR_END_ANGLE) { PROFIT_VALUE_ANGLE = BAR_END_ANGLE }
+
+        if (
+            thisObject.params.VALUE > 0 &&
+            thisObject.params.ASSET_NAME === thisObject.params.BASE_ASSET &&
+            thisObject.params.POSITION_TAKEN === false
+        ) {
+            browserCanvasContext.setLineDash([0, 0])
+
+            browserCanvasContext.beginPath()
+            browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIUS, BAR_START_ANGLE, MIN_VALUE_ANGLE)
+
+            browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')'
+            browserCanvasContext.lineWidth = VALUE_BG_THICKNESS
+            browserCanvasContext.stroke()
+            browserCanvasContext.closePath()
+
+            browserCanvasContext.beginPath()
+            browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIUS, MIN_VALUE_ANGLE, CURRENT_VALUE_ANGLE)
+
+            browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')'
+            browserCanvasContext.lineWidth = VALUE_BG_THICKNESS
+            browserCanvasContext.stroke()
+            browserCanvasContext.closePath()
+
+            browserCanvasContext.beginPath()
+            browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIUS, CURRENT_VALUE_ANGLE, INIT_VALUE_ANGLE)
+
+            browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RED + ', ' + OPACITY + ')'
+            browserCanvasContext.lineWidth = VALUE_BG_THICKNESS
+            browserCanvasContext.stroke()
+            browserCanvasContext.closePath()
+
+            if (PROFIT_VALUE_ANGLE > INIT_VALUE_ANGLE) {
+                browserCanvasContext.beginPath()
+                browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIUS, INIT_VALUE_ANGLE, PROFIT_VALUE_ANGLE)
+
+                browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREEN + ', ' + OPACITY + ')'
+                browserCanvasContext.lineWidth = VALUE_BG_THICKNESS
+                browserCanvasContext.stroke()
+                browserCanvasContext.closePath()
+            }
+
+            browserCanvasContext.setLineDash([2, 3])
+
+            browserCanvasContext.beginPath()
+            browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIUS, BAR_START_ANGLE, MIN_VALUE_ANGLE)
+
+            browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')'
+            browserCanvasContext.lineWidth = VALUE_THICKNESS
+            browserCanvasContext.stroke()
+            browserCanvasContext.closePath()
+
+            browserCanvasContext.beginPath()
+            browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIUS, MIN_VALUE_ANGLE, CURRENT_VALUE_ANGLE)
+
+            browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')'
+            browserCanvasContext.lineWidth = VALUE_THICKNESS
+            browserCanvasContext.stroke()
+            browserCanvasContext.closePath()
+
+            browserCanvasContext.beginPath()
+            browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIUS, CURRENT_VALUE_ANGLE, INIT_VALUE_ANGLE)
+
+            browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RED + ', ' + OPACITY + ')'
+            browserCanvasContext.lineWidth = VALUE_THICKNESS
+            browserCanvasContext.stroke()
+            browserCanvasContext.closePath()
+
+            if (PROFIT_VALUE_ANGLE > INIT_VALUE_ANGLE) {
+                browserCanvasContext.beginPath()
+                browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIUS, INIT_VALUE_ANGLE, PROFIT_VALUE_ANGLE)
+
+                browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREEN + ', ' + OPACITY + ')'
+                browserCanvasContext.lineWidth = VALUE_THICKNESS
+                browserCanvasContext.stroke()
+                browserCanvasContext.closePath()
+            }
+        }
+
+        /* Common Variables */
+
+        let fontSize
+        let label
+        let xOffset
+        let yOffset
+
+        /* We put the thisObject.params.VALUE in the middle */
+
+        label = thisObject.params.VALUE
+
+        if (isNaN(label) === false) {
+            label = Number(label)
+
+            label = dynamicDecimals(label, 2)
+            if (label === 0) { label = label.toFixed(2) }
+        }
+
+        fontSize = 22
+        if (label.length > 8) {
+            fontSize = 18
+        }
+        if (label.length > 10) {
+            fontSize = 14
+        }
+        if (label.length > 12) {
+            fontSize = 10
+        }
+        if (label.length > 14) {
+            fontSize = 8
+        }
+
+        browserCanvasContext.font = 'bold  ' + fontSize + 'px ' + UI_FONT.PRIMARY
+
+        // label = label.substring(0, 6)
+
+        xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO + 7
+
+        labelPoint = {
+            x: centerPoint.x - xOffset,
+            y: centerPoint.y
+        }
+
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')'
+        browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
+
+        /* We put the top label */
+
+        fontSize = 12
+
+        browserCanvasContext.font = 'bold  ' + fontSize + 'px ' + UI_FONT.PRIMARY
+
+        label = thisObject.params.ASSET_LABEL
+
+        xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO + 3
+        yOffset = 22
+
+        labelPoint = {
+            x: centerPoint.x - xOffset,
+            y: centerPoint.y - yOffset
+        }
+
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')'
+        browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
+
+        /* We put the bottom label */
+
+        fontSize = 12
+
+        browserCanvasContext.font = 'bold  ' + fontSize + 'px ' + UI_FONT.PRIMARY
+
+        label = thisObject.params.ASSET_NAME + ' '
+
+        xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO + 3
+        yOffset = -15
+
+        labelPoint = {
+            x: centerPoint.x - xOffset,
+            y: centerPoint.y - yOffset
+        }
+
+        if (thisObject.params.ASSET_NAME === thisObject.params.BASE_ASSET) {
+            browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')'
+        } else {
+            browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')'
+        }
+
+        browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
     }
-
-    /* Common Variables */
-
-    let fontSize
-    let label
-    let xOffset
-    let yOffset
-
-    /* We put the thisObject.params.VALUE in the middle */
-
-    label = thisObject.params.VALUE
-
-    if (isNaN(label) === false) {
-      label = Number(label)
-
-      label = dynamicDecimals(label, 2)
-      if (label === 0) { label = label.toFixed(2) }
-    }
-
-    fontSize = 22
-    if (label.length > 8) {
-      fontSize = 18
-    }
-    if (label.length > 10) {
-      fontSize = 14
-    }
-    if (label.length > 12) {
-      fontSize = 10
-    }
-    if (label.length > 14) {
-      fontSize = 8
-    }
-
-    browserCanvasContext.font = 'bold  ' + fontSize + 'px ' + UI_FONT.PRIMARY
-
-    // label = label.substring(0, 6)
-
-    xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO + 7
-
-    labelPoint = {
-      x: centerPoint.x - xOffset,
-      y: centerPoint.y
-    }
-
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')'
-    browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
-
-    /* We put the top label */
-
-    fontSize = 12
-
-    browserCanvasContext.font = 'bold  ' + fontSize + 'px ' + UI_FONT.PRIMARY
-
-    label = thisObject.params.ASSET_LABEL
-
-    xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO + 3
-    yOffset = 22
-
-    labelPoint = {
-      x: centerPoint.x - xOffset,
-      y: centerPoint.y - yOffset
-    }
-
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')'
-    browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
-
-    /* We put the bottom label */
-
-    fontSize = 12
-
-    browserCanvasContext.font = 'bold  ' + fontSize + 'px ' + UI_FONT.PRIMARY
-
-    label = thisObject.params.ASSET_NAME + ' '
-
-    xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO + 3
-    yOffset = -15
-
-    labelPoint = {
-      x: centerPoint.x - xOffset,
-      y: centerPoint.y - yOffset
-    }
-
-    if (thisObject.params.ASSET_NAME === thisObject.params.BASE_ASSET) {
-      browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')'
-    } else {
-      browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')'
-    }
-
-    browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
-  }
 }
 

Container.js

@@ -1,262 +1,262 @@
 
-function newContainer () {
-  let thisObject = {
-    id: newUniqueId(),
-    type: 'Rectangle',
-    frame: undefined,
-    eventHandler: undefined,
-    parentContainer: undefined,
-    isDraggeable: true,
-    notDraggingOnX: false,
-    notDraggingOnY: false,
-    isClickeable: false,
-    isWheelable: false,
-    detectMouseOver: false,
-    name: undefined,
-    fitFunction: undefined,
-    isVisibleFunction: undefined,
-    displace: displace,
-    initialize: initialize,
-    finalize: finalize,
-    connectToParent: connectToParent,
-    isForThisPurpose: isForThisPurpose
-  }
-
-  let connectedToParentWidth = false
-  let connectedToParentHeight = false
-  let connectedToParentRadius = false
-
-  let onDimmensionsChangedParentEvent = false
-  let onMouseOverParentEvent = false
-  let onMouseNotOverParentEvent = false
-  let onFocusParentEvent = false
-  let onNotFocusParentEvent = false
-  let onDisplaceParentEvent = false
-  let onDragStartedParentEvent = false
-  let onDragFinishedParentEvent = false
-
-  let isConnectedToParent = false
-
-  let dimensionsChangedEventSubscriptionId
-  let onMouseOverEventSubscriptionId
-  let onMouseNotOverEventSubscriptionId
-  let onFocusEventSubscriptionId
-  let onNotFocusEventSubscriptionId
-  let onDisplaceEventSubscriptionId
-  let onDragStartedEventSubscriptionId
-  let onDragFinishedEventSubscriptionId
-
-  return thisObject
-
-  function finalize () {
-    if (isConnectedToParent === true) {
-      thisObject.parentContainer.eventHandler.stopListening(dimensionsChangedEventSubscriptionId)
-      thisObject.parentContainer.eventHandler.stopListening(onMouseOverEventSubscriptionId)
-      thisObject.parentContainer.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
-      thisObject.parentContainer.eventHandler.stopListening(onFocusEventSubscriptionId)
-      thisObject.parentContainer.eventHandler.stopListening(onNotFocusEventSubscriptionId)
-      thisObject.parentContainer.eventHandler.stopListening(onDisplaceEventSubscriptionId)
-      thisObject.parentContainer.eventHandler.stopListening(onDragStartedEventSubscriptionId)
-      thisObject.parentContainer.eventHandler.stopListening(onDragFinishedEventSubscriptionId)
-
-      thisObject.parentContainer = undefined
-      thisObject.eventHandler.finalize()
-
-      thisObject.frame.finalize()
-    }
-  }
-
-  function initialize (pName, pType) {
-    thisObject.name = pName
-    thisObject.type = pType
-
-    thisObject.frame = newFrame()
-    thisObject.frame.initialize(pType)
-    if (pName !== undefined) {
-      thisObject.frame.containerName = pName
-    }
-    thisObject.frame.container = thisObject
-
-    thisObject.eventHandler = newEventHandler()
-    thisObject.eventHandler.name = pName
-  }
-
-  function connectToParent (
-    parentContainer,
-    onWidth,
-    onHeight,
-    onRadius,
-    onDimmensionsChangedEvent,
-    onMouseOverEvent,
-    onMouseNotOverEvent,
-    onFocusEvent,
-    onNotFocusEvent,
-    onDisplaceEvent,
-    onDragStartedEvent,
-    onDragFinishedEvent
-  ) {
-    connectedToParentWidth = onWidth
-    connectedToParentHeight = onHeight
-    connectedToParentRadius = onRadius
-
-    onDimmensionsChangedParentEvent = onDimmensionsChangedEvent
-    onMouseOverParentEvent = onMouseOverEvent
-    onMouseNotOverParentEvent = onMouseNotOverEvent
-    onFocusParentEvent = onFocusEvent
-    onNotFocusParentEvent = onNotFocusEvent
-    onDisplaceParentEvent = onDisplaceEvent
-    onDragStartedParentEvent = onDragStartedEvent
-    onDragFinishedParentEvent = onDragFinishedEvent
-
-    isConnectedToParent = true
-
-    thisObject.frame.parentFrame = parentContainer.frame
-    thisObject.parentContainer = parentContainer
-
-    if (onDimmensionsChangedParentEvent === true) {
-      dimensionsChangedEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('Dimmensions Changed', onParentDimmensionsChanged)
-    }
-    if (onMouseOverParentEvent === true) {
-      onMouseOverEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onMouseOver', onMouseOver)
-    }
-    if (onMouseNotOverParentEvent === true) {
-      onMouseNotOverEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
-    }
-    if (onFocusParentEvent === true) {
-      onFocusEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onFocus', onFocus)
-    }
-    if (onNotFocusParentEvent === true) {
-      onNotFocusEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onNotFocus', onNotFocus)
-    }
-    if (onDisplaceParentEvent === true) {
-      onDisplaceEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onDisplace', onDisplace)
-    }
-    if (onDragStartedParentEvent === true) {
-      onDragStartedEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onDragStarted', onDragStarted)
-    }
-    if (onDragFinishedParentEvent === true) {
-      onDragFinishedEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onDragFinished', onDragFinished)
+function newContainer() {
+    let thisObject = {
+        id: newUniqueId(),
+        type: 'Rectangle',
+        frame: undefined,
+        eventHandler: undefined,
+        parentContainer: undefined,
+        isDraggeable: true,
+        notDraggingOnX: false,
+        notDraggingOnY: false,
+        isClickeable: false,
+        isWheelable: false,
+        detectMouseOver: false,
+        name: undefined,
+        fitFunction: undefined,
+        isVisibleFunction: undefined,
+        displace: displace,
+        initialize: initialize,
+        finalize: finalize,
+        connectToParent: connectToParent,
+        isForThisPurpose: isForThisPurpose
     }
 
-    if (connectedToParentWidth) {
-      thisObject.frame.width = thisObject.parentContainer.frame.width
-    }
-    if (connectedToParentHeight) {
-      thisObject.frame.height = thisObject.parentContainer.frame.height
-    }
-    if (connectedToParentRadius) {
-      thisObject.frame.radius = thisObject.parentContainer.frame.radius
-    }
-  }
+    let connectedToParentWidth = false
+    let connectedToParentHeight = false
+    let connectedToParentRadius = false
 
-  function onParentDimmensionsChanged (event) {
-    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 (connectedToParentRadius) {
-      thisObject.frame.radius = thisObject.parentContainer.frame.radius
-      dimmensionsChanged = true
+    let onDimmensionsChangedParentEvent = false
+    let onMouseOverParentEvent = false
+    let onMouseNotOverParentEvent = false
+    let onFocusParentEvent = false
+    let onNotFocusParentEvent = false
+    let onDisplaceParentEvent = false
+    let onDragStartedParentEvent = false
+    let onDragFinishedParentEvent = false
+
+    let isConnectedToParent = false
+
+    let dimensionsChangedEventSubscriptionId
+    let onMouseOverEventSubscriptionId
+    let onMouseNotOverEventSubscriptionId
+    let onFocusEventSubscriptionId
+    let onNotFocusEventSubscriptionId
+    let onDisplaceEventSubscriptionId
+    let onDragStartedEventSubscriptionId
+    let onDragFinishedEventSubscriptionId
+
+    return thisObject
+
+    function finalize() {
+        if (isConnectedToParent === true) {
+            thisObject.parentContainer.eventHandler.stopListening(dimensionsChangedEventSubscriptionId)
+            thisObject.parentContainer.eventHandler.stopListening(onMouseOverEventSubscriptionId)
+            thisObject.parentContainer.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
+            thisObject.parentContainer.eventHandler.stopListening(onFocusEventSubscriptionId)
+            thisObject.parentContainer.eventHandler.stopListening(onNotFocusEventSubscriptionId)
+            thisObject.parentContainer.eventHandler.stopListening(onDisplaceEventSubscriptionId)
+            thisObject.parentContainer.eventHandler.stopListening(onDragStartedEventSubscriptionId)
+            thisObject.parentContainer.eventHandler.stopListening(onDragFinishedEventSubscriptionId)
+
+            thisObject.parentContainer = undefined
+            thisObject.eventHandler.finalize()
+
+            thisObject.frame.finalize()
+        }
     }
 
-    if (dimmensionsChanged) {
-      thisObject.eventHandler.raiseEvent('Dimmensions Changed', event)
+    function initialize(pName, pType) {
+        thisObject.name = pName
+        thisObject.type = pType
+
+        thisObject.frame = newFrame()
+        thisObject.frame.initialize(pType)
+        if (pName !== undefined) {
+            thisObject.frame.containerName = pName
+        }
+        thisObject.frame.container = thisObject
+
+        thisObject.eventHandler = newEventHandler()
+        thisObject.eventHandler.name = pName
     }
-  }
 
-  function onMouseOver (event) {
-    thisObject.eventHandler.raiseEvent('onMouseOver', event)
-  }
+    function connectToParent(
+        parentContainer,
+        onWidth,
+        onHeight,
+        onRadius,
+        onDimmensionsChangedEvent,
+        onMouseOverEvent,
+        onMouseNotOverEvent,
+        onFocusEvent,
+        onNotFocusEvent,
+        onDisplaceEvent,
+        onDragStartedEvent,
+        onDragFinishedEvent
+    ) {
+        connectedToParentWidth = onWidth
+        connectedToParentHeight = onHeight
+        connectedToParentRadius = onRadius
 
-  function onMouseNotOver (event) {
-    thisObject.eventHandler.raiseEvent('onMouseNotOver', event)
-  }
+        onDimmensionsChangedParentEvent = onDimmensionsChangedEvent
+        onMouseOverParentEvent = onMouseOverEvent
+        onMouseNotOverParentEvent = onMouseNotOverEvent
+        onFocusParentEvent = onFocusEvent
+        onNotFocusParentEvent = onNotFocusEvent
+        onDisplaceParentEvent = onDisplaceEvent
+        onDragStartedParentEvent = onDragStartedEvent
+        onDragFinishedParentEvent = onDragFinishedEvent
 
-  function onFocus (event) {
-    thisObject.eventHandler.raiseEvent('onFocus', event)
-  }
+        isConnectedToParent = true
 
-  function onNotFocus (event) {
-    thisObject.eventHandler.raiseEvent('onNotFocus', event)
-  }
+        thisObject.frame.parentFrame = parentContainer.frame
+        thisObject.parentContainer = parentContainer
 
-  function onDisplace (event) {
-    thisObject.eventHandler.raiseEvent('onDisplace', event)
-  }
+        if (onDimmensionsChangedParentEvent === true) {
+            dimensionsChangedEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('Dimmensions Changed', onParentDimmensionsChanged)
+        }
+        if (onMouseOverParentEvent === true) {
+            onMouseOverEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onMouseOver', onMouseOver)
+        }
+        if (onMouseNotOverParentEvent === true) {
+            onMouseNotOverEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
+        }
+        if (onFocusParentEvent === true) {
+            onFocusEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onFocus', onFocus)
+        }
+        if (onNotFocusParentEvent === true) {
+            onNotFocusEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onNotFocus', onNotFocus)
+        }
+        if (onDisplaceParentEvent === true) {
+            onDisplaceEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onDisplace', onDisplace)
+        }
+        if (onDragStartedParentEvent === true) {
+            onDragStartedEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onDragStarted', onDragStarted)
+        }
+        if (onDragFinishedParentEvent === true) {
+            onDragFinishedEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onDragFinished', onDragFinished)
+        }
 
-  function onDragStarted (event) {
-    thisObject.eventHandler.raiseEvent('onDragStarted', event)
-  }
-
-  function onDragFinished (event) {
-    thisObject.eventHandler.raiseEvent('onDragFinished', event)
-  }
-
-  function isForThisPurpose (purpose) {
-    if (purpose !== undefined) {
-      switch (purpose) {
-        case GET_CONTAINER_PURPOSE.MOUSE_OVER:
-          if (thisObject.detectMouseOver === true) {
-            return true
-          }
-          break
-        case GET_CONTAINER_PURPOSE.MOUSE_WHEEL:
-          if (thisObject.isWheelable === true) {
-            return true
-          }
-          break
-        case GET_CONTAINER_PURPOSE.MOUSE_CLICK:
-          if (thisObject.isClickeable === true) {
-            return true
-          }
-          break
-        case GET_CONTAINER_PURPOSE.DRAGGING:
-          if (thisObject.isDraggeable === true) {
-            return true
-          }
-          break
-        default: { return false }
-
-      }
+        if (connectedToParentWidth) {
+            thisObject.frame.width = thisObject.parentContainer.frame.width
+        }
+        if (connectedToParentHeight) {
+            thisObject.frame.height = thisObject.parentContainer.frame.height
+        }
+        if (connectedToParentRadius) {
+            thisObject.frame.radius = thisObject.parentContainer.frame.radius
+        }
     }
-    return false
-  }
 
-  function displace (point) {
-    /* This function will move the container according to the vector received. If it has a visible function will use it
-    to see if the container can be moved there or not. It wont if the center will not be visible.
+    function onParentDimmensionsChanged(event) {
+        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 (connectedToParentRadius) {
+            thisObject.frame.radius = thisObject.parentContainer.frame.radius
+            dimmensionsChanged = true
+        }
 
-    Returns true if move was possible, false if not. */
+        if (dimmensionsChanged) {
+            thisObject.eventHandler.raiseEvent('Dimmensions Changed', event)
+        }
+    }
 
-    let checkPoint = {}
+    function onMouseOver(event) {
+        thisObject.eventHandler.raiseEvent('onMouseOver', event)
+    }
 
-    if (thisObject.isVisibleFunction === undefined) {
-      drag()
-      return true
-    } else {
-      checkPoint.x = thisObject.frame.position.x + point.x + thisObject.frame.width / 2
-      checkPoint.y = thisObject.frame.position.y + point.y + thisObject.frame.height / 2
-      let isVisible = thisObject.isVisibleFunction(checkPoint)
-      if (isVisible === true) {
-        drag()
-        return true
-      } else {
+    function onMouseNotOver(event) {
+        thisObject.eventHandler.raiseEvent('onMouseNotOver', event)
+    }
+
+    function onFocus(event) {
+        thisObject.eventHandler.raiseEvent('onFocus', event)
+    }
+
+    function onNotFocus(event) {
+        thisObject.eventHandler.raiseEvent('onNotFocus', event)
+    }
+
+    function onDisplace(event) {
+        thisObject.eventHandler.raiseEvent('onDisplace', event)
+    }
+
+    function onDragStarted(event) {
+        thisObject.eventHandler.raiseEvent('onDragStarted', event)
+    }
+
+    function onDragFinished(event) {
+        thisObject.eventHandler.raiseEvent('onDragFinished', event)
+    }
+
+    function isForThisPurpose(purpose) {
+        if (purpose !== undefined) {
+            switch (purpose) {
+                case GET_CONTAINER_PURPOSE.MOUSE_OVER:
+                    if (thisObject.detectMouseOver === true) {
+                        return true
+                    }
+                    break
+                case GET_CONTAINER_PURPOSE.MOUSE_WHEEL:
+                    if (thisObject.isWheelable === true) {
+                        return true
+                    }
+                    break
+                case GET_CONTAINER_PURPOSE.MOUSE_CLICK:
+                    if (thisObject.isClickeable === true) {
+                        return true
+                    }
+                    break
+                case GET_CONTAINER_PURPOSE.DRAGGING:
+                    if (thisObject.isDraggeable === true) {
+                        return true
+                    }
+                    break
+                default: { return false }
+
+            }
+        }
         return false
-      }
     }
-    function drag () {
-      if (thisObject.notDraggingOnX === false) {
-        thisObject.frame.position.x = thisObject.frame.position.x + point.x
-      }
-      if (thisObject.notDraggingOnY === false) {
-        thisObject.frame.position.y = thisObject.frame.position.y + point.y
-      }
-      thisObject.eventHandler.raiseEvent('onDisplace', event)
+
+    function displace(point) {
+        /* This function will move the container according to the vector received. If it has a visible function will use it
+        to see if the container can be moved there or not. It wont if the center will not be visible.
+    
+        Returns true if move was possible, false if not. */
+
+        let checkPoint = {}
+
+        if (thisObject.isVisibleFunction === undefined) {
+            drag()
+            return true
+        } else {
+            checkPoint.x = thisObject.frame.position.x + point.x + thisObject.frame.width / 2
+            checkPoint.y = thisObject.frame.position.y + point.y + thisObject.frame.height / 2
+            let isVisible = thisObject.isVisibleFunction(checkPoint)
+            if (isVisible === true) {
+                drag()
+                return true
+            } else {
+                return false
+            }
+        }
+        function drag() {
+            if (thisObject.notDraggingOnX === false) {
+                thisObject.frame.position.x = thisObject.frame.position.x + point.x
+            }
+            if (thisObject.notDraggingOnY === false) {
+                thisObject.frame.position.y = thisObject.frame.position.y + point.y
+            }
+            thisObject.eventHandler.raiseEvent('onDisplace', event)
+        }
     }
-  }
 }

DesignSpace/Workspace/FunctionLibraries/CCXTFunctions.js

@@ -1,224 +1,224 @@
-function newCCXTFunctions () {
-  thisObject = {
-    addMissingExchanges: addMissingExchanges,
-    addMissingAssets: addMissingAssets,
-    addMissingMarkets: addMissingMarkets
-  }
-
-  return thisObject
-
-  function addMissingExchanges (node, functionLibraryUiObjectsFromNodes) {
-    currentExchanges = new Map()
-    let parent = node.payload.parentNode
-    if (parent !== undefined) {
-      for (let i = 0; i < parent.cryptoExchanges.length; i++) {
-        let cryptoExchanges = parent.cryptoExchanges[i]
-        for (let j = 0; j < cryptoExchanges.exchanges.length; j++) {
-          let exchange = cryptoExchanges.exchanges[j]
-          let codeName = loadPropertyFromNodeConfig(exchange.payload, 'codeName')
-          currentExchanges.set(codeName, exchange)
-        }
-      }
+function newCCXTFunctions() {
+    thisObject = {
+        addMissingExchanges: addMissingExchanges,
+        addMissingAssets: addMissingAssets,
+        addMissingMarkets: addMissingMarkets
     }
 
-    let params = {
-      method: 'listExchanges',
-      has: {
-        fetchOHLCV: true,
-        fetchMarkets: true
-      }
-    }
+    return thisObject
 
-    callServer(JSON.stringify(params), 'CCXT', onResponse)
-
-    function onResponse (err, data) {
-      if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) {
-        node.payload.uiObject.setErrorMessage('Failed to Fetch Assets from the Exchange')
-        return
-      }
-
-      let exchanges = JSON.parse(data)
-      for (let i = 0; i < exchanges.length; i++) {
-        let exchange = exchanges[i]
-        let existingExchange = currentExchanges.get(exchange.id)
-        if (existingExchange === undefined) {
-          let newExchange = functionLibraryUiObjectsFromNodes.addUIObject(node, 'Crypto Exchange')
-          newExchange.name = exchange.name
-          newExchange.config = '{ \n\"codeName\": \"' + exchange.id + '\"\n}'
-          newExchange.payload.floatingObject.collapseToggle()
-          newExchange.exchangeAssets.payload.floatingObject.angleToParent = ANGLE_TO_PARENT.RANGE_180
-          newExchange.exchangeMarkets.payload.floatingObject.angleToParent = ANGLE_TO_PARENT.RANGE_180
-          newExchange.exchangeAccounts.payload.floatingObject.angleToParent = ANGLE_TO_PARENT.RANGE_180
-          newExchange.exchangeAssets.payload.floatingObject.distanceToParent = DISTANCE_TO_PARENT.PARENT_050X
-          newExchange.exchangeMarkets.payload.floatingObject.distanceToParent = DISTANCE_TO_PARENT.PARENT_100X
-          newExchange.exchangeAccounts.payload.floatingObject.distanceToParent = DISTANCE_TO_PARENT.PARENT_025X
-          newExchange.exchangeAssets.payload.floatingObject.arrangementStyle = ARRANGEMENT_STYLE.CONCAVE
-          newExchange.exchangeMarkets.payload.floatingObject.arrangementStyle = ARRANGEMENT_STYLE.CONCAVE
-          newExchange.exchangeAccounts.payload.floatingObject.arrangementStyle = ARRANGEMENT_STYLE.CONCAVE
-        }
-      }
-    }
-  }
-
-  function addMissingAssets (node, functionLibraryUiObjectsFromNodes) {
-    if (node.payload.parentNode === undefined) { return }
-
-    let currentAssets = new Map()
-    for (let j = 0; j < node.assets.length; j++) {
-      let asset = node.assets[j]
-      let codeName = loadPropertyFromNodeConfig(asset.payload, 'codeName')
-      currentAssets.set(codeName, asset)
-    }
-
-    let exchangeId = loadPropertyFromNodeConfig(node.payload.parentNode.payload, 'codeName')
-
-    try {
-      let params = {
-        exchangeId: exchangeId,
-        method: 'fetchMarkets'
-      }
-      callServer(JSON.stringify(params), 'CCXT', onResponse)
-
-      function onResponse (err, data) {
-        if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) {
-          node.payload.uiObject.setErrorMessage('Failed to Fetch Assets from the Exchange')
-          return
-        }
-        let queryParams = loadPropertyFromNodeConfig(node.payload, 'addMissingAssets')
-
-        let markets = JSON.parse(data)
-        for (let i = 0; i < markets.length; i++) {
-          let market = markets[i]
-
-          if (queryParams !== undefined) {
-            if (queryParams.baseAsset !== undefined) {
-              if (market.base.indexOf(queryParams.baseAsset) < 0) {
-                continue
-              }
+    function addMissingExchanges(node, functionLibraryUiObjectsFromNodes) {
+        currentExchanges = new Map()
+        let parent = node.payload.parentNode
+        if (parent !== undefined) {
+            for (let i = 0; i < parent.cryptoExchanges.length; i++) {
+                let cryptoExchanges = parent.cryptoExchanges[i]
+                for (let j = 0; j < cryptoExchanges.exchanges.length; j++) {
+                    let exchange = cryptoExchanges.exchanges[j]
+                    let codeName = loadPropertyFromNodeConfig(exchange.payload, 'codeName')
+                    currentExchanges.set(codeName, exchange)
+                }
             }
-            if (queryParams.quotedAsset !== undefined) {
-              if (market.quote.indexOf(queryParams.quotedAsset) < 0) {
-                continue
-              }
+        }
+
+        let params = {
+            method: 'listExchanges',
+            has: {
+                fetchOHLCV: true,
+                fetchMarkets: true
             }
-          }
-          if (currentAssets.get(market.base) === undefined) {
-            addAsset(market.base)
-            currentAssets.set(market.base, market.base)
-          }
-          if (currentAssets.get(market.quote) === undefined) {
-            addAsset(market.quote)
-            currentAssets.set(market.quote, market.quote)
-          }
-
-          function addAsset (name) {
-            let newAsseet = functionLibraryUiObjectsFromNodes.addUIObject(node, 'Asset')
-            newAsseet.name = name
-            newAsseet.config = '{ \n\"codeName\": \"' + name + '\"\n}'
-          }
-        }
-      }
-    } catch (err) {
-      node.payload.uiObject.setErrorMessage('Failed to Fetch Assets from the Exchange')
-      console.log(err.stack)
-    }
-  }
-
-  function addMissingMarkets (node, functionLibraryUiObjectsFromNodes, functionLibraryNodeCloning) {
-    if (node.payload.parentNode === undefined) { return }
-    if (node.payload.parentNode.exchangeAssets === undefined) { return }
-    if (node.payload.parentNode.payload.parentNode === undefined) { return }
-    if (node.payload.parentNode.payload.parentNode.payload.parentNode === undefined) { return }
-    if (node.payload.parentNode.payload.parentNode.payload.parentNode.superActions === undefined) { return }
-
-    let currentAssets = new Map()
-    let exchangeAssets = node.payload.parentNode.exchangeAssets
-    for (let j = 0; j < exchangeAssets.assets.length; j++) {
-      let asset = exchangeAssets.assets[j]
-      let codeName = loadPropertyFromNodeConfig(asset.payload, 'codeName')
-      currentAssets.set(codeName, asset)
-    }
-
-    let currentMarkets = new Map()
-    let exchangeMarkets = node
-    for (let j = 0; j < exchangeMarkets.markets.length; j++) {
-      let asset = exchangeMarkets.markets[j]
-      let codeName = loadPropertyFromNodeConfig(asset.payload, 'codeName')
-      currentMarkets.set(codeName, asset)
-    }
-
-    let exchangeId = loadPropertyFromNodeConfig(node.payload.parentNode.payload, 'codeName')
-
-    try {
-      let params = {
-        exchangeId: exchangeId,
-        method: 'fetchMarkets'
-      }
-      callServer(JSON.stringify(params), 'CCXT', onResponse)
-
-      function onResponse (err, data) {
-        if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) {
-          node.payload.uiObject.setErrorMessage('Failed to Fetch Assets from the Exchange')
-          return
         }
 
-        let markets = JSON.parse(data)
-        for (let i = 0; i < markets.length; i++) {
-          let market = markets[i]
-          let baseAsset = currentAssets.get(market.base)
-          let quotedAsset = currentAssets.get(market.quote)
+        callServer(JSON.stringify(params), 'CCXT', onResponse)
 
-          if (baseAsset === undefined) {
-            continue
-          }
-          if (quotedAsset === undefined) {
-            continue
-          }
+        function onResponse(err, data) {
+            if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) {
+                node.payload.uiObject.setErrorMessage('Failed to Fetch Assets from the Exchange')
+                return
+            }
 
-          if (currentMarkets.get(market.symbol) === undefined) {
-            addMarket(market.symbol, baseAsset, quotedAsset)
-          }
-
-          function addMarket (name, baseAsset, quotedAsset) {
-            let newMarket = functionLibraryUiObjectsFromNodes.addUIObject(node, 'Market')
-            newMarket.name = name
-            newMarket.config = '{ \n\"codeName\": \"' + name + '\"\n}'
-            newMarket.payload.floatingObject.angleToParent = ANGLE_TO_PARENT.RANGE_180
-            newMarket.payload.floatingObject.distanceToParent = DISTANCE_TO_PARENT.PARENT_050X
-            newMarket.payload.floatingObject.arrangementStyle = ARRANGEMENT_STYLE.CONCAVE
-            newMarket.baseAsset.payload.floatingObject.angleToParent = ANGLE_TO_PARENT.RANGE_45
-            newMarket.quotedAsset.payload.floatingObject.angleToParent = ANGLE_TO_PARENT.RANGE_45
-            newMarket.baseAsset.payload.floatingObject.distanceToParent = DISTANCE_TO_PARENT.PARENT_100X
-            newMarket.quotedAsset.payload.floatingObject.distanceToParent = DISTANCE_TO_PARENT.PARENT_150X
-            newMarket.baseAsset.payload.floatingObject.arrangementStyle = ARRANGEMENT_STYLE.CONCAVE
-            newMarket.quotedAsset.payload.floatingObject.arrangementStyle = ARRANGEMENT_STYLE.CONCAVE
-            newMarket.baseAsset.payload.referenceParent = baseAsset
-            newMarket.quotedAsset.payload.referenceParent = quotedAsset
-
-            currentMarkets.set(name, newMarket)
-
-            let superActions = node.payload.parentNode.payload.parentNode.payload.parentNode.superActions
-
-            for (let j = 0; j < superActions.superActions.length; j++) {
-              let superAction = superActions.superActions[j]
-              let clone = functionLibraryNodeCloning.getNodeClone(superAction)
-              functionLibraryUiObjectsFromNodes.createUiObjectFromNode(clone, newMarket, newMarket)
-              newMarket.superActions.push(clone)
-              switch (j) {
-                case 0:
-                  clone.payload.floatingObject.distanceToParent = DISTANCE_TO_PARENT.PARENT_025X
-                  break
-                case 1:
-                  clone.payload.floatingObject.distanceToParent = DISTANCE_TO_PARENT.PARENT_050X
-                  break
-              }
+            let exchanges = JSON.parse(data)
+            for (let i = 0; i < exchanges.length; i++) {
+                let exchange = exchanges[i]
+                let existingExchange = currentExchanges.get(exchange.id)
+                if (existingExchange === undefined) {
+                    let newExchange = functionLibraryUiObjectsFromNodes.addUIObject(node, 'Crypto Exchange')
+                    newExchange.name = exchange.name
+                    newExchange.config = '{ \n\"codeName\": \"' + exchange.id + '\"\n}'
+                    newExchange.payload.floatingObject.collapseToggle()
+                    newExchange.exchangeAssets.payload.floatingObject.angleToParent = ANGLE_TO_PARENT.RANGE_180
+                    newExchange.exchangeMarkets.payload.floatingObject.angleToParent = ANGLE_TO_PARENT.RANGE_180
+                    newExchange.exchangeAccounts.payload.floatingObject.angleToParent = ANGLE_TO_PARENT.RANGE_180
+                    newExchange.exchangeAssets.payload.floatingObject.distanceToParent = DISTANCE_TO_PARENT.PARENT_050X
+                    newExchange.exchangeMarkets.payload.floatingObject.distanceToParent = DISTANCE_TO_PARENT.PARENT_100X
+                    newExchange.exchangeAccounts.payload.floatingObject.distanceToParent = DISTANCE_TO_PARENT.PARENT_025X
+                    newExchange.exchangeAssets.payload.floatingObject.arrangementStyle = ARRANGEMENT_STYLE.CONCAVE
+                    newExchange.exchangeMarkets.payload.floatingObject.arrangementStyle = ARRANGEMENT_STYLE.CONCAVE
+                    newExchange.exchangeAccounts.payload.floatingObject.arrangementStyle = ARRANGEMENT_STYLE.CONCAVE
+                }
             }
-          }
         }
-      }
-    } catch (err) {
-      node.payload.uiObject.setErrorMessage('Failed to Fetch Assets from the Exchange')
-      console.log(err.stack)
     }
-  }
+
+    function addMissingAssets(node, functionLibraryUiObjectsFromNodes) {
+        if (node.payload.parentNode === undefined) { return }
+
+        let currentAssets = new Map()
+        for (let j = 0; j < node.assets.length; j++) {
+            let asset = node.assets[j]
+            let codeName = loadPropertyFromNodeConfig(asset.payload, 'codeName')
+            currentAssets.set(codeName, asset)
+        }
+
+        let exchangeId = loadPropertyFromNodeConfig(node.payload.parentNode.payload, 'codeName')
+
+        try {
+            let params = {
+                exchangeId: exchangeId,
+                method: 'fetchMarkets'
+            }
+            callServer(JSON.stringify(params), 'CCXT', onResponse)
+
+            function onResponse(err, data) {
+                if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) {
+                    node.payload.uiObject.setErrorMessage('Failed to Fetch Assets from the Exchange')
+                    return
+                }
+                let queryParams = loadPropertyFromNodeConfig(node.payload, 'addMissingAssets')
+
+                let markets = JSON.parse(data)
+                for (let i = 0; i < markets.length; i++) {
+                    let market = markets[i]
+
+                    if (queryParams !== undefined) {
+                        if (queryParams.baseAsset !== undefined) {
+                            if (market.base.indexOf(queryParams.baseAsset) < 0) {
+                                continue
+                            }
+                        }
+                        if (queryParams.quotedAsset !== undefined) {
+                            if (market.quote.indexOf(queryParams.quotedAsset) < 0) {
+                                continue
+                            }
+                        }
+                    }
+                    if (currentAssets.get(market.base) === undefined) {
+                        addAsset(market.base)
+                        currentAssets.set(market.base, market.base)
+                    }
+                    if (currentAssets.get(market.quote) === undefined) {
+                        addAsset(market.quote)
+                        currentAssets.set(market.quote, market.quote)
+                    }
+
+                    function addAsset(name) {
+                        let newAsseet = functionLibraryUiObjectsFromNodes.addUIObject(node, 'Asset')
+                        newAsseet.name = name
+                        newAsseet.config = '{ \n\"codeName\": \"' + name + '\"\n}'
+                    }
+                }
+            }
+        } catch (err) {
+            node.payload.uiObject.setErrorMessage('Failed to Fetch Assets from the Exchange')
+            console.log(err.stack)
+        }
+    }
+
+    function addMissingMarkets(node, functionLibraryUiObjectsFromNodes, functionLibraryNodeCloning) {
+        if (node.payload.parentNode === undefined) { return }
+        if (node.payload.parentNode.exchangeAssets === undefined) { return }
+        if (node.payload.parentNode.payload.parentNode === undefined) { return }
+        if (node.payload.parentNode.payload.parentNode.payload.parentNode === undefined) { return }
+        if (node.payload.parentNode.payload.parentNode.payload.parentNode.superActions === undefined) { return }
+
+        let currentAssets = new Map()
+        let exchangeAssets = node.payload.parentNode.exchangeAssets
+        for (let j = 0; j < exchangeAssets.assets.length; j++) {
+            let asset = exchangeAssets.assets[j]
+            let codeName = loadPropertyFromNodeConfig(asset.payload, 'codeName')
+            currentAssets.set(codeName, asset)
+        }
+
+        let currentMarkets = new Map()
+        let exchangeMarkets = node
+        for (let j = 0; j < exchangeMarkets.markets.length; j++) {
+            let asset = exchangeMarkets.markets[j]
+            let codeName = loadPropertyFromNodeConfig(asset.payload, 'codeName')
+            currentMarkets.set(codeName, asset)
+        }
+
+        let exchangeId = loadPropertyFromNodeConfig(node.payload.parentNode.payload, 'codeName')
+
+        try {
+            let params = {
+                exchangeId: exchangeId,
+                method: 'fetchMarkets'
+            }
+            callServer(JSON.stringify(params), 'CCXT', onResponse)
+
+            function onResponse(err, data) {
+                if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) {
+                    node.payload.uiObject.setErrorMessage('Failed to Fetch Assets from the Exchange')
+                    return
+                }
+
+                let markets = JSON.parse(data)
+                for (let i = 0; i < markets.length; i++) {
+                    let market = markets[i]
+                    let baseAsset = currentAssets.get(market.base)
+                    let quotedAsset = currentAssets.get(market.quote)
+
+                    if (baseAsset === undefined) {
+                        continue
+                    }
+                    if (quotedAsset === undefined) {
+                        continue
+                    }
+
+                    if (currentMarkets.get(market.symbol) === undefined) {
+                        addMarket(market.symbol, baseAsset, quotedAsset)
+                    }
+
+                    function addMarket(name, baseAsset, quotedAsset) {
+                        let newMarket = functionLibraryUiObjectsFromNodes.addUIObject(node, 'Market')
+                        newMarket.name = name
+                        newMarket.config = '{ \n\"codeName\": \"' + name + '\"\n}'
+                        newMarket.payload.floatingObject.angleToParent = ANGLE_TO_PARENT.RANGE_180
+                        newMarket.payload.floatingObject.distanceToParent = DISTANCE_TO_PARENT.PARENT_050X
+                        newMarket.payload.floatingObject.arrangementStyle = ARRANGEMENT_STYLE.CONCAVE
+                        newMarket.baseAsset.payload.floatingObject.angleToParent = ANGLE_TO_PARENT.RANGE_45
+                        newMarket.quotedAsset.payload.floatingObject.angleToParent = ANGLE_TO_PARENT.RANGE_45
+                        newMarket.baseAsset.payload.floatingObject.distanceToParent = DISTANCE_TO_PARENT.PARENT_100X
+                        newMarket.quotedAsset.payload.floatingObject.distanceToParent = DISTANCE_TO_PARENT.PARENT_150X
+                        newMarket.baseAsset.payload.floatingObject.arrangementStyle = ARRANGEMENT_STYLE.CONCAVE
+                        newMarket.quotedAsset.payload.floatingObject.arrangementStyle = ARRANGEMENT_STYLE.CONCAVE
+                        newMarket.baseAsset.payload.referenceParent = baseAsset
+                        newMarket.quotedAsset.payload.referenceParent = quotedAsset
+
+                        currentMarkets.set(name, newMarket)
+
+                        let superActions = node.payload.parentNode.payload.parentNode.payload.parentNode.superActions
+
+                        for (let j = 0; j < superActions.superActions.length; j++) {
+                            let superAction = superActions.superActions[j]
+                            let clone = functionLibraryNodeCloning.getNodeClone(superAction)
+                            functionLibraryUiObjectsFromNodes.createUiObjectFromNode(clone, newMarket, newMarket)
+                            newMarket.superActions.push(clone)
+                            switch (j) {
+                                case 0:
+                                    clone.payload.floatingObject.distanceToParent = DISTANCE_TO_PARENT.PARENT_025X
+                                    break
+                                case 1:
+                                    clone.payload.floatingObject.distanceToParent = DISTANCE_TO_PARENT.PARENT_050X
+                                    break
+                            }
+                        }
+                    }
+                }
+            }
+        } catch (err) {
+            node.payload.uiObject.setErrorMessage('Failed to Fetch Assets from the Exchange')
+            console.log(err.stack)
+        }
+    }
 }

DesignSpace/Workspace/FunctionLibraries/ChainAttachDetach.js

@@ -1,221 +1,221 @@
-function newChainAttachDetach () {
-  thisObject = {
-    chainDetachNode: chainDetachNode,
-    chainAttachNode: chainAttachNode
-  }
+function newChainAttachDetach() {
+    thisObject = {
+        chainDetachNode: chainDetachNode,
+        chainAttachNode: chainAttachNode
+    }
 
-  return thisObject
+    return thisObject
 
-  function chainDetachNode (node, rootNodes) {
-    if (node.payload.parentNode === undefined) { return }
-    switch (node.type) {
-      case 'Phase': {
-        let payload = node.payload
-        for (let i = 0; i < payload.parentNode.phases.length; i++) {
-          let phase = payload.parentNode.phases[i]
-          if (phase.id === node.id) {
-            if (i < payload.parentNode.phases.length - 1) {
-              let nextPhase = payload.parentNode.phases[i + 1]
-              if (i > 0) {
-                let previousPhase = payload.parentNode.phases[i - 1]
-                nextPhase.payload.chainParent = previousPhase
-              } else {
-                nextPhase.payload.chainParent = payload.parentNode
-              }
-            }
-            payload.parentNode.phases.splice(i, 1)
-            completeDetachment(node, rootNodes)
-            return
-          }
-        }
-        return
-      }
-      default: {
-        let nodeDefinition = getNodeDefinition (node)
-        if (nodeDefinition !== undefined) {
-        /* Detach from parent */
-          if (node.payload.parentNode !== undefined) {
-            let parentNodeDefinition = getNodeDefinition (node.payload.parentNode)
-            if (parentNodeDefinition !== undefined) {
-              if (parentNodeDefinition.properties !== undefined) {
-                for (let i = 0; i < parentNodeDefinition.properties.length; i++) {
-                  let property = parentNodeDefinition.properties[i]
-                  if (nodeDefinition.propertyNameAtParent === property.name) {
-                    switch (property.type) {
-                      case 'node': {
-                        node.payload.parentNode[property.name] = undefined
-                      }
-                        break
-                      case 'array': {
-                        let nodePropertyArray = node.payload.parentNode[property.name]
-                        if (nodePropertyArray !== undefined) {
-                          for (let j = 0; j < nodePropertyArray.length; j++) {
-                            let arrayItem = nodePropertyArray[j]
-                            if (arrayItem.id === node.id) {
-                              nodePropertyArray.splice(j, 1)
+    function chainDetachNode(node, rootNodes) {
+        if (node.payload.parentNode === undefined) { return }
+        switch (node.type) {
+            case 'Phase': {
+                let payload = node.payload
+                for (let i = 0; i < payload.parentNode.phases.length; i++) {
+                    let phase = payload.parentNode.phases[i]
+                    if (phase.id === node.id) {
+                        if (i < payload.parentNode.phases.length - 1) {
+                            let nextPhase = payload.parentNode.phases[i + 1]
+                            if (i > 0) {
+                                let previousPhase = payload.parentNode.phases[i - 1]
+                                nextPhase.payload.chainParent = previousPhase
+                            } else {
+                                nextPhase.payload.chainParent = payload.parentNode
                             }
-                          }
                         }
-                      }
-                        break
+                        payload.parentNode.phases.splice(i, 1)
+                        completeDetachment(node, rootNodes)
+                        return
                     }
-                  }
                 }
-              }
+                return
+            }
+            default: {
+                let nodeDefinition = getNodeDefinition(node)
+                if (nodeDefinition !== undefined) {
+                    /* Detach from parent */
+                    if (node.payload.parentNode !== undefined) {
+                        let parentNodeDefinition = getNodeDefinition(node.payload.parentNode)
+                        if (parentNodeDefinition !== undefined) {
+                            if (parentNodeDefinition.properties !== undefined) {
+                                for (let i = 0; i < parentNodeDefinition.properties.length; i++) {
+                                    let property = parentNodeDefinition.properties[i]
+                                    if (nodeDefinition.propertyNameAtParent === property.name) {
+                                        switch (property.type) {
+                                            case 'node': {
+                                                node.payload.parentNode[property.name] = undefined
+                                            }
+                                                break
+                                            case 'array': {
+                                                let nodePropertyArray = node.payload.parentNode[property.name]
+                                                if (nodePropertyArray !== undefined) {
+                                                    for (let j = 0; j < nodePropertyArray.length; j++) {
+                                                        let arrayItem = nodePropertyArray[j]
+                                                        if (arrayItem.id === node.id) {
+                                                            nodePropertyArray.splice(j, 1)
+                                                        }
+                                                    }
+                                                }
+                                            }
+                                                break
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    completeDetachment(node, rootNodes)
+                }
             }
-          }
-          completeDetachment(node, rootNodes)
         }
-      }
     }
-  }
 
-  function chainAttachNode (node, attachToNode, rootNodes) {
-    switch (node.type) {
+    function chainAttachNode(node, attachToNode, rootNodes) {
+        switch (node.type) {
 
-      case 'Exchange Account Key': {
-        node.payload.parentNode = attachToNode
-        node.payload.chainParent = attachToNode
-        if (node.payload.parentNode.keys !== undefined) {
-          node.payload.parentNode.keys.push(node)
-        } else {
-          node.payload.parentNode.key = node
-        }
-        completeAttachment(node, rootNodes)
-      }
-        break
-
-      case 'Phase': {
-        switch (attachToNode.type) {
-          case 'Stop': {
-            node.payload.parentNode = attachToNode
-            if (attachToNode.phases.length > 0) {
-              let phase = attachToNode.phases[attachToNode.phases.length - 1]
-              node.payload.chainParent = phase
-            } else {
-              node.payload.chainParent = attachToNode
-            }
-            attachToNode.phases.push(node)
-            completeAttachment(node, rootNodes)
-          }
-            break
-          case 'Take Profit': {
-            node.payload.parentNode = attachToNode
-            if (attachToNode.phases.length > 0) {
-              let phase = attachToNode.phases[attachToNode.phases.length - 1]
-              node.payload.chainParent = phase
-            } else {
-              node.payload.chainParent = attachToNode
-            }
-            attachToNode.phases.push(node)
-            completeAttachment(node, rootNodes)
-          }
-            break
-          case 'Initial Stop': {
-            if (attachToNode.phases.length >= 1) {
-              return
-            }
-
-            node.payload.parentNode = attachToNode
-            if (attachToNode.phases.length > 0) {
-              let phase = attachToNode.phases[attachToNode.phases.length - 1]
-              node.payload.chainParent = phase
-            } else {
-              node.payload.chainParent = attachToNode
-            }
-            attachToNode.phases.push(node)
-            completeAttachment(node, rootNodes)
-          }
-            break
-          case 'Initial Take Profit': {
-            if (attachToNode.phases.length >= 1) {
-              return
-            }
-            node.payload.parentNode = attachToNode
-            if (attachToNode.phases.length > 0) {
-              let phase = attachToNode.phases[attachToNode.phases.length - 1]
-              node.payload.chainParent = phase
-            } else {
-              node.payload.chainParent = attachToNode
-            }
-            attachToNode.phases.push(node)
-            completeAttachment(node, rootNodes)
-          }
-            break
-          case 'Phase': {
-            node.payload.parentNode = attachToNode.payload.parentNode
-            for (let i = 0; i < node.payload.parentNode.phases.length; i++) {
-              let phase = node.payload.parentNode.phases[i]
-              if (attachToNode.id === phase.id) {
-                if (i === node.payload.parentNode.phases.length - 1) {
-                  node.payload.chainParent = attachToNode
-                  node.payload.parentNode.phases.push(node)
-                  completeAttachment(node, rootNodes)
+            case 'Exchange Account Key': {
+                node.payload.parentNode = attachToNode
+                node.payload.chainParent = attachToNode
+                if (node.payload.parentNode.keys !== undefined) {
+                    node.payload.parentNode.keys.push(node)
                 } else {
-                  node.payload.chainParent = attachToNode
-                  let nextPhase = node.payload.parentNode.phases[i + 1]
-                  nextPhase.payload.chainParent = node
-                  node.payload.parentNode.phases.splice(i + 1, 0, node)
-                  completeAttachment(node, rootNodes)
-                  return
+                    node.payload.parentNode.key = node
                 }
-              }
+                completeAttachment(node, rootNodes)
             }
-          }
-        }
-      }
-        break
-      default: {
-        let nodeDefinition = getNodeDefinition (node)
-        if (nodeDefinition !== undefined) {
-          node.payload.parentNode = attachToNode
-          node.payload.chainParent = attachToNode
-          /* Attach to new parent */
-          if (node.payload.parentNode !== undefined) {
-            let parentNodeDefinition = getNodeDefinition (node.payload.parentNode)
-            if (parentNodeDefinition !== undefined) {
-              if (parentNodeDefinition.properties !== undefined) {
-                for (let i = 0; i < parentNodeDefinition.properties.length; i++) {
-                  let property = parentNodeDefinition.properties[i]
-                  if (nodeDefinition.propertyNameAtParent === property.name) {
-                    switch (property.type) {
-                      case 'node': {
-                        node.payload.parentNode[property.name] = node
-                      }
+                break
+
+            case 'Phase': {
+                switch (attachToNode.type) {
+                    case 'Stop': {
+                        node.payload.parentNode = attachToNode
+                        if (attachToNode.phases.length > 0) {
+                            let phase = attachToNode.phases[attachToNode.phases.length - 1]
+                            node.payload.chainParent = phase
+                        } else {
+                            node.payload.chainParent = attachToNode
+                        }
+                        attachToNode.phases.push(node)
+                        completeAttachment(node, rootNodes)
+                    }
                         break
-                      case 'array': {
-                        if (node.payload.parentNode[property.name] === undefined) {
-                          node.payload.parentNode[property.name] = []
+                    case 'Take Profit': {
+                        node.payload.parentNode = attachToNode
+                        if (attachToNode.phases.length > 0) {
+                            let phase = attachToNode.phases[attachToNode.phases.length - 1]
+                            node.payload.chainParent = phase
+                        } else {
+                            node.payload.chainParent = attachToNode
+                        }
+                        attachToNode.phases.push(node)
+                        completeAttachment(node, rootNodes)
+                    }
+                        break
+                    case 'Initial Stop': {
+                        if (attachToNode.phases.length >= 1) {
+                            return
+                        }
+
+                        node.payload.parentNode = attachToNode
+                        if (attachToNode.phases.length > 0) {
+                            let phase = attachToNode.phases[attachToNode.phases.length - 1]
+                            node.payload.chainParent = phase
+                        } else {
+                            node.payload.chainParent = attachToNode
+                        }
+                        attachToNode.phases.push(node)
+                        completeAttachment(node, rootNodes)
+                    }
+                        break
+                    case 'Initial Take Profit': {
+                        if (attachToNode.phases.length >= 1) {
+                            return
+                        }
+                        node.payload.parentNode = attachToNode
+                        if (attachToNode.phases.length > 0) {
+                            let phase = attachToNode.phases[attachToNode.phases.length - 1]
+                            node.payload.chainParent = phase
+                        } else {
+                            node.payload.chainParent = attachToNode
+                        }
+                        attachToNode.phases.push(node)
+                        completeAttachment(node, rootNodes)
+                    }
+                        break
+                    case 'Phase': {
+                        node.payload.parentNode = attachToNode.payload.parentNode
+                        for (let i = 0; i < node.payload.parentNode.phases.length; i++) {
+                            let phase = node.payload.parentNode.phases[i]
+                            if (attachToNode.id === phase.id) {
+                                if (i === node.payload.parentNode.phases.length - 1) {
+                                    node.payload.chainParent = attachToNode
+                                    node.payload.parentNode.phases.push(node)
+                                    completeAttachment(node, rootNodes)
+                                } else {
+                                    node.payload.chainParent = attachToNode
+                                    let nextPhase = node.payload.parentNode.phases[i + 1]
+                                    nextPhase.payload.chainParent = node
+                                    node.payload.parentNode.phases.splice(i + 1, 0, node)
+                                    completeAttachment(node, rootNodes)
+                                    return
+                                }
+                            }
                         }
-                        let nodePropertyArray = node.payload.parentNode[property.name]
-                        nodePropertyArray.push(node)
-                      }
-                        break
                     }
-                  }
                 }
-              }
             }
-          }
-          completeAttachment(node, rootNodes)
+                break
+            default: {
+                let nodeDefinition = getNodeDefinition(node)
+                if (nodeDefinition !== undefined) {
+                    node.payload.parentNode = attachToNode
+                    node.payload.chainParent = attachToNode
+                    /* Attach to new parent */
+                    if (node.payload.parentNode !== undefined) {
+                        let parentNodeDefinition = getNodeDefinition(node.payload.parentNode)
+                        if (parentNodeDefinition !== undefined) {
+                            if (parentNodeDefinition.properties !== undefined) {
+                                for (let i = 0; i < parentNodeDefinition.properties.length; i++) {
+                                    let property = parentNodeDefinition.properties[i]
+                                    if (nodeDefinition.propertyNameAtParent === property.name) {
+                                        switch (property.type) {
+                                            case 'node': {
+                                                node.payload.parentNode[property.name] = node
+                                            }
+                                                break
+                                            case 'array': {
+                                                if (node.payload.parentNode[property.name] === undefined) {
+                                                    node.payload.parentNode[property.name] = []
+                                                }
+                                                let nodePropertyArray = node.payload.parentNode[property.name]
+                                                nodePropertyArray.push(node)
+                                            }
+                                                break
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    completeAttachment(node, rootNodes)
+                }
+            }
         }
-      }
     }
-  }
 
-  function completeDetachment (node, rootNodes) {
-    node.payload.parentNode = undefined
-    node.payload.chainParent = undefined
-    rootNodes.push(node)
-  }
+    function completeDetachment(node, rootNodes) {
+        node.payload.parentNode = undefined
+        node.payload.chainParent = undefined
+        rootNodes.push(node)
+    }
 
-  function completeAttachment (node, rootNodes) {
-    for (let i = 0; i < rootNodes.length; i++) {
-      let rootNode = rootNodes[i]
-      if (rootNode.id === node.id) {
-        rootNodes.splice(i, 1)
-        return
-      }
+    function completeAttachment(node, rootNodes) {
+        for (let i = 0; i < rootNodes.length; i++) {
+            let rootNode = rootNodes[i]
+            if (rootNode.id === node.id) {
+                rootNodes.splice(i, 1)
+                return
+            }
+        }
     }
-  }
 }

DesignSpace/Workspace/FunctionLibraries/DependenciesFilter.js

@@ -1,74 +1,74 @@
-function newDependenciesFilter () {
-  thisObject = {
-    createFilter: createFilter
-  }
+function newDependenciesFilter() {
+    thisObject = {
+        createFilter: createFilter
+    }
 
-  return thisObject
+    return thisObject
 
-  function createFilter (node) {
-    let filters = new Map()
-    recursiveFilter(node)
+    function createFilter(node) {
+        let filters = new Map()
+        recursiveFilter(node)
 
-    return Array.from(filters.keys())
+        return Array.from(filters.keys())
 
-    function recursiveFilter (node) {
-      filter(node.code)
+        function recursiveFilter(node) {
+            filter(node.code)
 
-      let nodeDefinition = getNodeDefinition (node)
-      if (nodeDefinition !== undefined) {
-        if (nodeDefinition.properties !== undefined) {
-          let previousPropertyName // Since there are cases where there are many properties with the same name,because they can hold nodes of different types but only one at the time, we have to avoind counting each property of those as individual children.
-          for (let i = 0; i < nodeDefinition.properties.length; i++) {
-            let property = nodeDefinition.properties[i]
+            let nodeDefinition = getNodeDefinition(node)
+            if (nodeDefinition !== undefined) {
+                if (nodeDefinition.properties !== undefined) {
+                    let previousPropertyName // Since there are cases where there are many properties with the same name,because they can hold nodes of different types but only one at the time, we have to avoind counting each property of those as individual children.
+                    for (let i = 0; i < nodeDefinition.properties.length; i++) {
+                        let property = nodeDefinition.properties[i]
 
-            switch (property.type) {
-              case 'node': {
-                if (property.name !== previousPropertyName) {
-                  if (node[property.name] !== undefined) {
-                    recursiveFilter(node[property.name])
-                  }
-                  previousPropertyName = property.name
+                        switch (property.type) {
+                            case 'node': {
+                                if (property.name !== previousPropertyName) {
+                                    if (node[property.name] !== undefined) {
+                                        recursiveFilter(node[property.name])
+                                    }
+                                    previousPropertyName = property.name
+                                }
+                            }
+                                break
+                            case 'array': {
+                                let nodePropertyArray = node[property.name]
+                                if (nodePropertyArray !== undefined) {
+                                    for (let j = 0; j < nodePropertyArray.length; j++) {
+                                        let nodeProperty = nodePropertyArray[j]
+                                        recursiveFilter(nodeProperty)
+                                    }
+                                }
+                            }
+                                break
+                        }
+                    }
                 }
-              }
-                break
-              case 'array': {
-                let nodePropertyArray = node[property.name]
-                if (nodePropertyArray !== undefined) {
-                  for (let j = 0; j < nodePropertyArray.length; j++) {
-                    let nodeProperty = nodePropertyArray[j]
-                    recursiveFilter(nodeProperty)
-                  }
-                }
-              }
-                break
             }
-          }
         }
-      }
-    }
 
-    function filter (code) {
-      if (code === undefined) { return }
+        function filter(code) {
+            if (code === undefined) { return }
 
-      let instructionsArray = code.split(' ')
-      for (let i = 0; i < instructionsArray.length; i++) {
-        let instruction = instructionsArray[i]
-        if (instruction.indexOf('chart') >= 0) {
-          let parts = instruction.split('.')
-          let timeFrame = parts[1]
-          let product = parts[2]
-          let productParts = product.split(',')
-          product = productParts[0]
-          productParts = product.split(')')
-          product = productParts[0]
+            let instructionsArray = code.split(' ')
+            for (let i = 0; i < instructionsArray.length; i++) {
+                let instruction = instructionsArray[i]
+                if (instruction.indexOf('chart') >= 0) {
+                    let parts = instruction.split('.')
+                    let timeFrame = parts[1]
+                    let product = parts[2]
+                    let productParts = product.split(',')
+                    product = productParts[0]
+                    productParts = product.split(')')
+                    product = productParts[0]
 
-          // Example: chart.at01hs.popularSMA.sma200 - chart.at01hs.popularSMA.sma100  < 10
-          if (timeFrame !== 'atAnyTimeFrame') {
-            timeFrame = timeFrame.substring(2, 4) + '-' + timeFrame.substring(4, 7)
-          }
-          filters.set(timeFrame + '-' + product, true)
+                    // Example: chart.at01hs.popularSMA.sma200 - chart.at01hs.popularSMA.sma100  < 10
+                    if (timeFrame !== 'atAnyTimeFrame') {
+                        timeFrame = timeFrame.substring(2, 4) + '-' + timeFrame.substring(4, 7)
+                    }
+                    filters.set(timeFrame + '-' + product, true)
+                }
+            }
         }
-      }
     }
-  }
 }

DesignSpace/Workspace/FunctionLibraries/NodeChildren.js

@@ -1,67 +1,67 @@
-function newNodeChildren () {
-  thisObject = {
-    childrenCount: childrenCount
-  }
-
-  return thisObject
-
-  function childrenCount (parentNode, childNode) {
-    return countChildrenUiObject(parentNode, childNode)
-  }
-
-  function countChildrenUiObject (parentNode, childNode) {
-    let response = {
-      childrenCount: 0,
-      childIndex: undefined
+function newNodeChildren() {
+    thisObject = {
+        childrenCount: childrenCount
     }
-    let parentNodeDefinition = getNodeDefinition (parentNode)
-    if (parentNodeDefinition !== undefined) {
-      if (parentNodeDefinition.properties !== undefined) {
-        let previousPropertyName // Since there are cases where there are many properties with the same name,because they can hold nodes of different types but only one at the time, we have to avoind counting each property of those as individual children.
 
-        for (let i = 0; i < parentNodeDefinition.properties.length; i++) {
-          let property = parentNodeDefinition.properties[i]
-          if (parentNode[property.name] !== undefined) {
-            switch (property.type) {
-              case 'node': {
-                if (property.name !== previousPropertyName) {
-                  response.childrenCount++
-                  if (parentNode[property.name].id === childNode.id) {
-                    response.childIndex = response.childrenCount
-                  }
-                  previousPropertyName = property.name
-                }
-              }
-                break
-              case 'array': {
-                let nodeDefinition = getNodeDefinition (childNode)
-                if (nodeDefinition !== undefined) {
-                  let nodePropertyArray = parentNode[property.name]
-                  for (let j = 0; j < nodePropertyArray.length; j++) {
-                    let child = nodePropertyArray[j]
-                    if (nodeDefinition.chainedToSameType === true) {
-                      if (j < 1) {
-                        response.childrenCount++
-                        if (child.id === childNode.id) {
-                          response.childIndex = response.childrenCount
-                        }
-                      }
-                    } else {
-                      response.childrenCount++
-                      if (child.id === childNode.id) {
-                        response.childIndex = response.childrenCount
-                      }
-                    }
-                  }
-                }
-              }
-                break
-            }
-          }
+    return thisObject
+
+    function childrenCount(parentNode, childNode) {
+        return countChildrenUiObject(parentNode, childNode)
+    }
+
+    function countChildrenUiObject(parentNode, childNode) {
+        let response = {
+            childrenCount: 0,
+            childIndex: undefined
         }
-      }
-    }
+        let parentNodeDefinition = getNodeDefinition(parentNode)
+        if (parentNodeDefinition !== undefined) {
+            if (parentNodeDefinition.properties !== undefined) {
+                let previousPropertyName // Since there are cases where there are many properties with the same name,because they can hold nodes of different types but only one at the time, we have to avoind counting each property of those as individual children.
 
-    return response
-  }
+                for (let i = 0; i < parentNodeDefinition.properties.length; i++) {
+                    let property = parentNodeDefinition.properties[i]
+                    if (parentNode[property.name] !== undefined) {
+                        switch (property.type) {
+                            case 'node': {
+                                if (property.name !== previousPropertyName) {
+                                    response.childrenCount++
+                                    if (parentNode[property.name].id === childNode.id) {
+                                        response.childIndex = response.childrenCount
+                                    }
+                                    previousPropertyName = property.name
+                                }
+                            }
+                                break
+                            case 'array': {
+                                let nodeDefinition = getNodeDefinition(childNode)
+                                if (nodeDefinition !== undefined) {
+                                    let nodePropertyArray = parentNode[property.name]
+                                    for (let j = 0; j < nodePropertyArray.length; j++) {
+                                        let child = nodePropertyArray[j]
+                                        if (nodeDefinition.chainedToSameType === true) {
+                                            if (j < 1) {
+                                                response.childrenCount++
+                                                if (child.id === childNode.id) {
+                                                    response.childIndex = response.childrenCount
+                                                }
+                                            }
+                                        } else {
+                                            response.childrenCount++
+                                            if (child.id === childNode.id) {
+                                                response.childIndex = response.childrenCount
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                                break
+                        }
+                    }
+                }
+            }
+        }
+
+        return response
+    }
 }

DesignSpace/Workspace/FunctionLibraries/NodeCloning.js

@@ -1,176 +1,176 @@
-function newNodeCloning () {
-  const MODULE_NAME = 'Node Cloning'
-  const ERROR_LOG = true
-  const logger = newWebDebugLog()
-  logger.fileName = MODULE_NAME
+function newNodeCloning() {
+    const MODULE_NAME = 'Node Cloning'
+    const ERROR_LOG = true
+    const logger = newWebDebugLog()
+    logger.fileName = MODULE_NAME
 
-  thisObject = {
-    getNodeClone: getNodeClone
-  }
-  return thisObject
+    thisObject = {
+        getNodeClone: getNodeClone
+    }
+    return thisObject
 
-  function getNodeClone (node) {
-    let idConversionMap = new Map()
+    function getNodeClone(node) {
+        let idConversionMap = new Map()
 
-    let inmatureClone = cloneNode(node)
-    let matureClone = redirectReferenceParents(inmatureClone)
+        let inmatureClone = cloneNode(node)
+        let matureClone = redirectReferenceParents(inmatureClone)
 
-    return matureClone
+        return matureClone
 
-    function cloneNode (node) {
-      if (node === undefined) { return }
-      let nodeDefinition = getNodeDefinition(node)
-      if (nodeDefinition !== undefined) {
-        let object = {
-          type: node.type,
-          name: node.name,
-          code: node.code,
-          config: node.config
-        }
-
-      /* Children Nodes */
-        if (nodeDefinition.properties !== undefined) {
-          let previousPropertyName // Since there are cases where there are many properties with the same name,because they can hold nodes of different types but only one at the time, we have to avoind counting each property of those as individual children.
-          for (let i = 0; i < nodeDefinition.properties.length; i++) {
-            let property = nodeDefinition.properties[i]
-
-            switch (property.type) {
-              case 'node': {
-                if (property.name !== previousPropertyName) {
-                  if (node[property.name] !== undefined) {
-                    object[property.name] = cloneNode(node[property.name])
-                  }
-                  previousPropertyName = property.name
+        function cloneNode(node) {
+            if (node === undefined) { return }
+            let nodeDefinition = getNodeDefinition(node)
+            if (nodeDefinition !== undefined) {
+                let object = {
+                    type: node.type,
+                    name: node.name,
+                    code: node.code,
+                    config: node.config
                 }
-                break
-              }
-              case 'array': {
-                if (node[property.name] !== undefined) {
-                  let nodePropertyArray = node[property.name]
-                  object[property.name] = []
-                  for (let m = 0; m < nodePropertyArray.length; m++) {
-                    let protocolNode = cloneNode(nodePropertyArray[m])
-                    if (protocolNode !== undefined) {
-                      object[property.name].push(protocolNode)
+
+                /* Children Nodes */
+                if (nodeDefinition.properties !== undefined) {
+                    let previousPropertyName // Since there are cases where there are many properties with the same name,because they can hold nodes of different types but only one at the time, we have to avoind counting each property of those as individual children.
+                    for (let i = 0; i < nodeDefinition.properties.length; i++) {
+                        let property = nodeDefinition.properties[i]
+
+                        switch (property.type) {
+                            case 'node': {
+                                if (property.name !== previousPropertyName) {
+                                    if (node[property.name] !== undefined) {
+                                        object[property.name] = cloneNode(node[property.name])
+                                    }
+                                    previousPropertyName = property.name
+                                }
+                                break
+                            }
+                            case 'array': {
+                                if (node[property.name] !== undefined) {
+                                    let nodePropertyArray = node[property.name]
+                                    object[property.name] = []
+                                    for (let m = 0; m < nodePropertyArray.length; m++) {
+                                        let protocolNode = cloneNode(nodePropertyArray[m])
+                                        if (protocolNode !== undefined) {
+                                            object[property.name].push(protocolNode)
+                                        }
+                                    }
+                                }
+                                break
+                            }
+                        }
                     }
-                  }
                 }
-                break
-              }
+
+                object.id = newUniqueId()
+                idConversionMap.set(node.id, object.id)
+
+                object.savedPayload = getSavedPayload(node)
+
+                return object
             }
-          }
         }
 
-        object.id = newUniqueId()
-        idConversionMap.set(node.id, object.id)
-
-        object.savedPayload = getSavedPayload(node)
-
-        return object
-      }
-    }
-
-    function redirectReferenceParents (node) {
-      if (node === undefined) { return }
-      let nodeDefinition = getNodeDefinition(node)
-      if (nodeDefinition !== undefined) {
-        let object = {
-          type: node.type,
-          name: node.name,
-          code: node.code,
-          config: node.config
-        }
-
-      /* Children Nodes */
-        if (nodeDefinition.properties !== undefined) {
-          let previousPropertyName // Since there are cases where there are many properties with the same name,because they can hold nodes of different types but only one at the time, we have to avoind counting each property of those as individual children.
-          for (let i = 0; i < nodeDefinition.properties.length; i++) {
-            let property = nodeDefinition.properties[i]
-
-            switch (property.type) {
-              case 'node': {
-                if (property.name !== previousPropertyName) {
-                  if (node[property.name] !== undefined) {
-                    object[property.name] = redirectReferenceParents(node[property.name])
-                  }
-                  previousPropertyName = property.name
+        function redirectReferenceParents(node) {
+            if (node === undefined) { return }
+            let nodeDefinition = getNodeDefinition(node)
+            if (nodeDefinition !== undefined) {
+                let object = {
+                    type: node.type,
+                    name: node.name,
+                    code: node.code,
+                    config: node.config
                 }
-                break
-              }
-              case 'array': {
-                if (node[property.name] !== undefined) {
-                  let nodePropertyArray = node[property.name]
-                  object[property.name] = []
-                  for (let m = 0; m < nodePropertyArray.length; m++) {
-                    let protocolNode = redirectReferenceParents(nodePropertyArray[m])
-                    if (protocolNode !== undefined) {
-                      object[property.name].push(protocolNode)
+
+                /* Children Nodes */
+                if (nodeDefinition.properties !== undefined) {
+                    let previousPropertyName // Since there are cases where there are many properties with the same name,because they can hold nodes of different types but only one at the time, we have to avoind counting each property of those as individual children.
+                    for (let i = 0; i < nodeDefinition.properties.length; i++) {
+                        let property = nodeDefinition.properties[i]
+
+                        switch (property.type) {
+                            case 'node': {
+                                if (property.name !== previousPropertyName) {
+                                    if (node[property.name] !== undefined) {
+                                        object[property.name] = redirectReferenceParents(node[property.name])
+                                    }
+                                    previousPropertyName = property.name
+                                }
+                                break
+                            }
+                            case 'array': {
+                                if (node[property.name] !== undefined) {
+                                    let nodePropertyArray = node[property.name]
+                                    object[property.name] = []
+                                    for (let m = 0; m < nodePropertyArray.length; m++) {
+                                        let protocolNode = redirectReferenceParents(nodePropertyArray[m])
+                                        if (protocolNode !== undefined) {
+                                            object[property.name].push(protocolNode)
+                                        }
+                                    }
+                                }
+                                break
+                            }
+                        }
                     }
-                  }
                 }
-                break
-              }
+
+                object.id = node.id
+
+                object.savedPayload = node.savedPayload
+
+                if (object.savedPayload !== undefined) {
+                    if (object.savedPayload.referenceParent !== undefined) {
+                        let newId = idConversionMap.get(object.savedPayload.referenceParent.id)
+                        if (newId !== undefined) {
+                            object.savedPayload.referenceParent.id = newId
+                        }
+                    }
+                }
+
+                return object
+            }
+        }
+    }
+
+    function getSavedPayload(node) {
+        if (node.payload === undefined) { return }
+        let savedPayload = {
+            position: {
+                x: node.payload.position.x,
+                y: node.payload.position.y
+            },
+            targetPosition: {
+                x: node.payload.targetPosition.x,
+                y: node.payload.targetPosition.y
+            },
+            floatingObject: {
+                isPinned: node.payload.floatingObject.isPinned,
+                isFrozen: (node.payload.floatingObject.isFrozen && node.payload.floatingObject.frozenManually),
+                isCollapsed: (node.payload.floatingObject.isCollapsed && node.payload.floatingObject.collapsedManually),
+                angleToParent: (node.payload.floatingObject.angleToParent),
+                distanceToParent: (node.payload.floatingObject.distanceToParent),
+                arrangementStyle: (node.payload.floatingObject.arrangementStyle)
+            },
+            uiObject: {
+                isRunning: node.payload.uiObject.isRunning,
+                shortcutKey: node.payload.uiObject.shortcutKey
             }
-          }
         }
 
-        object.id = node.id
-
-        object.savedPayload = node.savedPayload
-
-        if (object.savedPayload !== undefined) {
-          if (object.savedPayload.referenceParent !== undefined) {
-            let newId = idConversionMap.get(object.savedPayload.referenceParent.id)
-            if (newId !== undefined) {
-              object.savedPayload.referenceParent.id = newId
+        /* Next for the ones that have a reference parent, we include it */
+        if (node.payload.referenceParent !== undefined) {
+            savedPayload.referenceParent = {
+                type: node.payload.referenceParent.type,
+                name: node.payload.referenceParent.name,
+                id: node.payload.referenceParent.id
+            }
+        } else {
+            /* The referenceParent property can be inherited from the previous saved payload. */
+            if (node.savedPayload !== undefined) {
+                savedPayload.referenceParent = node.savedPayload.referenceParent
             }
-          }
         }
 
-        return object
-      }
+        return savedPayload
     }
-  }
-
-  function getSavedPayload (node) {
-    if (node.payload === undefined) { return }
-    let savedPayload = {
-      position: {
-        x: node.payload.position.x,
-        y: node.payload.position.y
-      },
-      targetPosition: {
-        x: node.payload.targetPosition.x,
-        y: node.payload.targetPosition.y
-      },
-      floatingObject: {
-        isPinned: node.payload.floatingObject.isPinned,
-        isFrozen: (node.payload.floatingObject.isFrozen && node.payload.floatingObject.frozenManually),
-        isCollapsed: (node.payload.floatingObject.isCollapsed && node.payload.floatingObject.collapsedManually),
-        angleToParent: (node.payload.floatingObject.angleToParent),
-        distanceToParent: (node.payload.floatingObject.distanceToParent),
-        arrangementStyle: (node.payload.floatingObject.arrangementStyle)
-      },
-      uiObject: {
-        isRunning: node.payload.uiObject.isRunning,
-        shortcutKey: node.payload.uiObject.shortcutKey
-      }
-    }
-
-      /* Next for the ones that have a reference parent, we include it */
-    if (node.payload.referenceParent !== undefined) {
-      savedPayload.referenceParent = {
-        type: node.payload.referenceParent.type,
-        name: node.payload.referenceParent.name,
-        id: node.payload.referenceParent.id
-      }
-    } else {
-        /* The referenceParent property can be inherited from the previous saved payload. */
-      if (node.savedPayload !== undefined) {
-        savedPayload.referenceParent = node.savedPayload.referenceParent
-      }
-    }
-
-    return savedPayload
-  }
 }

DesignSpace/Workspace/FunctionLibraries/NodeDeleter.js

@@ -1,138 +1,138 @@
-function newNodeDeleter () {
-  thisObject = {
-    deleteWorkspace: deleteWorkspace,
-    deleteUIObject: deleteUIObject
-  }
-
-  return thisObject
-
-  function destroyUiObject (node) {
-    canvas.floatingSpace.uiObjectConstructor.destroyUiObject(node.payload)
-  }
-
-  function deleteWorkspace (node, rootNodes) {
-    if (node.rootNodes !== undefined) {
-      while (node.rootNodes.length > 0) {
-        let rootNode = node.rootNodes[0]
-        deleteUIObject(rootNode, rootNodes)
-      }
+function newNodeDeleter() {
+    thisObject = {
+        deleteWorkspace: deleteWorkspace,
+        deleteUIObject: deleteUIObject
     }
 
-    completeDeletion(node, rootNodes)
-    destroyUiObject(node)
-    cleanNode(node)
-  }
+    return thisObject
 
-  function deleteUIObject (node, rootNodes) {
-    /* First we restore the reference parent to its default state */
-    if (node.payload !== undefined && node.payload.referenceParent !== undefined && node.payload.referenceParent.payload !== undefined && node.payload.referenceParent.payload.uiObject !== undefined) {
-      node.payload.referenceParent.payload.uiObject.isShowing = false
+    function destroyUiObject(node) {
+        canvas.floatingSpace.uiObjectConstructor.destroyUiObject(node.payload)
     }
 
-    let nodeDefinition = getNodeDefinition (node)
-    if (nodeDefinition !== undefined) {
-      /* Remove all of its own children nodes. */
-      if (nodeDefinition.properties !== undefined) {
-        let previousPropertyName // Since there are cases where there are many properties with the same name,because they can hold nodes of different types but only one at the time, we have to avoind counting each property of those as individual children.
-        for (let i = 0; i < nodeDefinition.properties.length; i++) {
-          let property = nodeDefinition.properties[i]
-
-          switch (property.type) {
-            case 'node': {
-              if (property.name !== previousPropertyName) {
-                if (node[property.name] !== undefined) {
-                  deleteUIObject(node[property.name], rootNodes)
-                }
-                previousPropertyName = property.name
-              }
+    function deleteWorkspace(node, rootNodes) {
+        if (node.rootNodes !== undefined) {
+            while (node.rootNodes.length > 0) {
+                let rootNode = node.rootNodes[0]
+                deleteUIObject(rootNode, rootNodes)
             }
-              break
-            case 'array': {
-              let nodePropertyArray = node[property.name]
-              if (nodePropertyArray !== undefined) {
-                while (nodePropertyArray.length > 0) {
-                  deleteUIObject(nodePropertyArray[0], rootNodes)
-                }
-              }
-            }
-              break
-          }
         }
-      }
 
-      /* Remove node from parent */
-      if (node.payload !== undefined) {
-        if (node.payload.parentNode !== undefined) {
-          let parentNodeDefinition = getNodeDefinition (node.payload.parentNode)
-          if (parentNodeDefinition !== undefined) {
-            if (parentNodeDefinition.properties !== undefined) {
-              for (let i = 0; i < parentNodeDefinition.properties.length; i++) {
-                let property = parentNodeDefinition.properties[i]
-                if (nodeDefinition.propertyNameAtParent === property.name) {
-                  switch (property.type) {
-                    case 'node': {
-                      node.payload.parentNode[property.name] = undefined
-                    }
-                      break
-                    case 'array': {
-                      let nodePropertyArray = node.payload.parentNode[property.name]
-                      if (nodePropertyArray !== undefined) {
-                        for (let j = 0; j < nodePropertyArray.length; j++) {
-                          let arrayItem = nodePropertyArray[j]
-                          if (arrayItem.id === node.id) {
-                          /* If this object is chained to the ones of the same type we need to give the next in the chain the reference to the current chain parent */
-                            if (nodeDefinition.chainedToSameType === true) {
-                              if (j < nodePropertyArray.length - 1) {
-                                let nextArrayItem = nodePropertyArray[j + 1]
-                                nextArrayItem.payload.chainParent = node.payload.chainParent
-                              }
+        completeDeletion(node, rootNodes)
+        destroyUiObject(node)
+        cleanNode(node)
+    }
+
+    function deleteUIObject(node, rootNodes) {
+        /* First we restore the reference parent to its default state */
+        if (node.payload !== undefined && node.payload.referenceParent !== undefined && node.payload.referenceParent.payload !== undefined && node.payload.referenceParent.payload.uiObject !== undefined) {
+            node.payload.referenceParent.payload.uiObject.isShowing = false
+        }
+
+        let nodeDefinition = getNodeDefinition(node)
+        if (nodeDefinition !== undefined) {
+            /* Remove all of its own children nodes. */
+            if (nodeDefinition.properties !== undefined) {
+                let previousPropertyName // Since there are cases where there are many properties with the same name,because they can hold nodes of different types but only one at the time, we have to avoind counting each property of those as individual children.
+                for (let i = 0; i < nodeDefinition.properties.length; i++) {
+                    let property = nodeDefinition.properties[i]
+
+                    switch (property.type) {
+                        case 'node': {
+                            if (property.name !== previousPropertyName) {
+                                if (node[property.name] !== undefined) {
+                                    deleteUIObject(node[property.name], rootNodes)
+                                }
+                                previousPropertyName = property.name
                             }
-
-                            nodePropertyArray.splice(j, 1)
-                          }
                         }
-                      }
+                            break
+                        case 'array': {
+                            let nodePropertyArray = node[property.name]
+                            if (nodePropertyArray !== undefined) {
+                                while (nodePropertyArray.length > 0) {
+                                    deleteUIObject(nodePropertyArray[0], rootNodes)
+                                }
+                            }
+                        }
+                            break
                     }
-                      break
-                  }
                 }
-              }
             }
-          }
+
+            /* Remove node from parent */
+            if (node.payload !== undefined) {
+                if (node.payload.parentNode !== undefined) {
+                    let parentNodeDefinition = getNodeDefinition(node.payload.parentNode)
+                    if (parentNodeDefinition !== undefined) {
+                        if (parentNodeDefinition.properties !== undefined) {
+                            for (let i = 0; i < parentNodeDefinition.properties.length; i++) {
+                                let property = parentNodeDefinition.properties[i]
+                                if (nodeDefinition.propertyNameAtParent === property.name) {
+                                    switch (property.type) {
+                                        case 'node': {
+                                            node.payload.parentNode[property.name] = undefined
+                                        }
+                                            break
+                                        case 'array': {
+                                            let nodePropertyArray = node.payload.parentNode[property.name]
+                                            if (nodePropertyArray !== undefined) {
+                                                for (let j = 0; j < nodePropertyArray.length; j++) {
+                                                    let arrayItem = nodePropertyArray[j]
+                                                    if (arrayItem.id === node.id) {
+                                                        /* If this object is chained to the ones of the same type we need to give the next in the chain the reference to the current chain parent */
+                                                        if (nodeDefinition.chainedToSameType === true) {
+                                                            if (j < nodePropertyArray.length - 1) {
+                                                                let nextArrayItem = nodePropertyArray[j + 1]
+                                                                nextArrayItem.payload.chainParent = node.payload.chainParent
+                                                            }
+                                                        }
+
+                                                        nodePropertyArray.splice(j, 1)
+                                                    }
+                                                }
+                                            }
+                                        }
+                                            break
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            completeDeletion(node, rootNodes)
+            destroyUiObject(node)
+            cleanNode(node)
         }
-      }
-
-      completeDeletion(node, rootNodes)
-      destroyUiObject(node)
-      cleanNode(node)
     }
-  }
 
-  function completeDeletion (node, rootNodes) {
-    for (let i = 0; i < rootNodes.length; i++) {
-      let rootNode = rootNodes[i]
-      if (rootNode.id === node.id) {
-        rootNodes.splice(i, 1)
-        return
-      }
+    function completeDeletion(node, rootNodes) {
+        for (let i = 0; i < rootNodes.length; i++) {
+            let rootNode = rootNodes[i]
+            if (rootNode.id === node.id) {
+                rootNodes.splice(i, 1)
+                return
+            }
+        }
     }
-  }
 
-  function cleanNode (node) {
-    if (node.payload === undefined) { return }
-    if (node === undefined) { return }
+    function cleanNode(node) {
+        if (node.payload === undefined) { return }
+        if (node === undefined) { return }
 
-    node.payload.targetPosition.x = undefined
-    node.payload.targetPosition.y = undefined
-    node.payload.visible = undefined
-    node.payload.subTitle = undefined
-    node.payload.title = undefined
-    node.payload.node = undefined
-    node.payload.parentNode = undefined
-    node.payload.chainParent = undefined
-    node.payload.onMenuItemClick = undefined
-    node.handle = undefined
-    node.payload = undefined
-    node.cleaned = true
-  }
+        node.payload.targetPosition.x = undefined
+        node.payload.targetPosition.y = undefined
+        node.payload.visible = undefined
+        node.payload.subTitle = undefined
+        node.payload.title = undefined
+        node.payload.node = undefined
+        node.payload.parentNode = undefined
+        node.payload.chainParent = undefined
+        node.payload.onMenuItemClick = undefined
+        node.handle = undefined
+        node.payload = undefined
+        node.cleaned = true
+    }
 }

DesignSpace/Workspace/FunctionLibraries/OnFocus.js

@@ -1,56 +1,56 @@
-function newOnFocus () {
-  thisObject = {
-    getNodeThatIsOnFocus: getNodeThatIsOnFocus
-  }
-  return thisObject
+function newOnFocus() {
+    thisObject = {
+        getNodeThatIsOnFocus: getNodeThatIsOnFocus
+    }
+    return thisObject
 
-  function getNodeThatIsOnFocus (node) {
-    if (node === undefined || node === null) { return }
-    if (node.payload === undefined) { return }
-    let nodeDefinition = getNodeDefinition(node)
-    if (nodeDefinition !== undefined) {
-      /* First we ask the question to ourself */
-      if (node.payload.uiObject.isOnFocus === true) {
-        return node
-      }
+    function getNodeThatIsOnFocus(node) {
+        if (node === undefined || node === null) { return }
+        if (node.payload === undefined) { return }
+        let nodeDefinition = getNodeDefinition(node)
+        if (nodeDefinition !== undefined) {
+            /* First we ask the question to ourself */
+            if (node.payload.uiObject.isOnFocus === true) {
+                return node
+            }
 
-      /* Then we check all of its own children nodes. */
-      if (node.payload.floatingObject.isCollapsed !== true) {
-        if (nodeDefinition.properties !== undefined) {
-          let previousPropertyName // Since there are cases where there are many properties with the same name,because they can hold nodes of different types but only one at the time, we have to avoind counting each property of those as individual children.
-          for (let i = 0; i < nodeDefinition.properties.length; i++) {
-            let property = nodeDefinition.properties[i]
+            /* Then we check all of its own children nodes. */
+            if (node.payload.floatingObject.isCollapsed !== true) {
+                if (nodeDefinition.properties !== undefined) {
+                    let previousPropertyName // Since there are cases where there are many properties with the same name,because they can hold nodes of different types but only one at the time, we have to avoind counting each property of those as individual children.
+                    for (let i = 0; i < nodeDefinition.properties.length; i++) {
+                        let property = nodeDefinition.properties[i]
 
-            switch (property.type) {
-              case 'node': {
-                if (property.name !== previousPropertyName) {
-                  if (node[property.name] !== undefined) {
-                    let child
-                    child = getNodeThatIsOnFocus(node[property.name])
-                    if (child !== undefined) {
-                      return child
-                    }
-                  }
-                  previousPropertyName = property.name
-                }
-              }
-                break
-              case 'array': {
-                let nodePropertyArray = node[property.name]
-                if (nodePropertyArray !== undefined) {
-                  for (let m = 0; m < nodePropertyArray.length; m++) {
-                    child = getNodeThatIsOnFocus(nodePropertyArray[m])
-                    if (child !== undefined) {
-                      return child
+                        switch (property.type) {
+                            case 'node': {
+                                if (property.name !== previousPropertyName) {
+                                    if (node[property.name] !== undefined) {
+                                        let child
+                                        child = getNodeThatIsOnFocus(node[property.name])
+                                        if (child !== undefined) {
+                                            return child
+                                        }
+                                    }
+                                    previousPropertyName = property.name
+                                }
+                            }
+                                break
+                            case 'array': {
+                                let nodePropertyArray = node[property.name]
+                                if (nodePropertyArray !== undefined) {
+                                    for (let m = 0; m < nodePropertyArray.length; m++) {
+                                        child = getNodeThatIsOnFocus(nodePropertyArray[m])
+                                        if (child !== undefined) {
+                                            return child
+                                        }
+                                    }
+                                }
+                            }
+                                break
+                        }
                     }
-                  }
                 }
-              }
-                break
             }
-          }
         }
-      }
     }
-  }
 }

DesignSpace/Workspace/FunctionLibraries/ProtocolNode.js

@@ -1,187 +1,187 @@
-function newProtocolNode () {
-  const MODULE_NAME = 'Protocol Node'
-  const ERROR_LOG = true
-  const logger = newWebDebugLog()
-  logger.fileName = MODULE_NAME
+function newProtocolNode() {
+    const MODULE_NAME = 'Protocol Node'
+    const ERROR_LOG = true
+    const logger = newWebDebugLog()
+    logger.fileName = MODULE_NAME
 
-  thisObject = {
-    getProtocolNode: getProtocolNode
-  }
-  return thisObject
+    thisObject = {
+        getProtocolNode: getProtocolNode
+    }
+    return thisObject
 
-  function getProtocolNode (node, removePersonalData, parseConfig, includeIds, includePayload, includeReferencesInSavedPayload, lightingPath) {
-    if (node === undefined) { return }
-    if (node.payload === undefined) { return }
+    function getProtocolNode(node, removePersonalData, parseConfig, includeIds, includePayload, includeReferencesInSavedPayload, lightingPath) {
+        if (node === undefined) { return }
+        if (node.payload === undefined) { return }
 
-    let nodeDefinition = getNodeDefinition(node)
-    if (nodeDefinition !== undefined) {
-      if (removePersonalData === true && nodeDefinition.isPersonalData === true) { return }
-      let object = {
-        type: node.type,
-        name: node.name,
-        code: node.code,
-        config: node.config
-      }
-
-      /* Children Nodes */
-      if (nodeDefinition.properties !== undefined) {
-        for (let i = 0; i < nodeDefinition.properties.length; i++) {
-          let property = nodeDefinition.properties[i]
-
-          switch (property.type) {
-            case 'node': {
-              if (node[property.name] !== undefined) {
-                if (lightingPath === undefined) {
-                  object[property.name] = getProtocolNode(node[property.name], removePersonalData, parseConfig, includeIds, includeReferencesInSavedPayload, includePayload)
-                } else {
-                  let newLightingPath = getNewLightingPath(lightingPath, node.type, property.childType)
-                  if (newLightingPath !== undefined) {
-                    object[property.name] = getProtocolNode(node[property.name], removePersonalData, parseConfig, includeIds, includePayload, includeReferencesInSavedPayload, newLightingPath)
-                  }
-                }
-              }
-              break
+        let nodeDefinition = getNodeDefinition(node)
+        if (nodeDefinition !== undefined) {
+            if (removePersonalData === true && nodeDefinition.isPersonalData === true) { return }
+            let object = {
+                type: node.type,
+                name: node.name,
+                code: node.code,
+                config: node.config
             }
-            case 'array': {
-              if (node[property.name] !== undefined) {
-                if (lightingPath === undefined) {
-                  let nodePropertyArray = node[property.name]
-                  object[property.name] = []
-                  for (let m = 0; m < nodePropertyArray.length; m++) {
-                    let protocolNode = getProtocolNode(nodePropertyArray[m], removePersonalData, parseConfig, includeIds, includeReferencesInSavedPayload, includePayload)
-                    if (protocolNode !== undefined) {
-                      object[property.name].push(protocolNode)
+
+            /* Children Nodes */
+            if (nodeDefinition.properties !== undefined) {
+                for (let i = 0; i < nodeDefinition.properties.length; i++) {
+                    let property = nodeDefinition.properties[i]
+
+                    switch (property.type) {
+                        case 'node': {
+                            if (node[property.name] !== undefined) {
+                                if (lightingPath === undefined) {
+                                    object[property.name] = getProtocolNode(node[property.name], removePersonalData, parseConfig, includeIds, includeReferencesInSavedPayload, includePayload)
+                                } else {
+                                    let newLightingPath = getNewLightingPath(lightingPath, node.type, property.childType)
+                                    if (newLightingPath !== undefined) {
+                                        object[property.name] = getProtocolNode(node[property.name], removePersonalData, parseConfig, includeIds, includePayload, includeReferencesInSavedPayload, newLightingPath)
+                                    }
+                                }
+                            }
+                            break
+                        }
+                        case 'array': {
+                            if (node[property.name] !== undefined) {
+                                if (lightingPath === undefined) {
+                                    let nodePropertyArray = node[property.name]
+                                    object[property.name] = []
+                                    for (let m = 0; m < nodePropertyArray.length; m++) {
+                                        let protocolNode = getProtocolNode(nodePropertyArray[m], removePersonalData, parseConfig, includeIds, includeReferencesInSavedPayload, includePayload)
+                                        if (protocolNode !== undefined) {
+                                            object[property.name].push(protocolNode)
+                                        }
+                                    }
+                                } else {
+                                    let newLightingPath = getNewLightingPath(lightingPath, node.type, property.childType)
+                                    if (newLightingPath !== undefined) {
+                                        let nodePropertyArray = node[property.name]
+                                        object[property.name] = []
+                                        for (let m = 0; m < nodePropertyArray.length; m++) {
+                                            let protocolNode = getProtocolNode(nodePropertyArray[m], removePersonalData, parseConfig, includeIds, includePayload, includeReferencesInSavedPayload, newLightingPath)
+                                            if (protocolNode !== undefined) {
+                                                object[property.name].push(protocolNode)
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                            break
+                        }
                     }
-                  }
-                } else {
-                  let newLightingPath = getNewLightingPath(lightingPath, node.type, property.childType)
-                  if (newLightingPath !== undefined) {
-                    let nodePropertyArray = node[property.name]
-                    object[property.name] = []
-                    for (let m = 0; m < nodePropertyArray.length; m++) {
-                      let protocolNode = getProtocolNode(nodePropertyArray[m], removePersonalData, parseConfig, includeIds, includePayload, includeReferencesInSavedPayload, newLightingPath)
-                      if (protocolNode !== undefined) {
-                        object[property.name].push(protocolNode)
-                      }
-                    }
-                  }
                 }
-              }
-              break
             }
-          }
+
+            /* Parent Nodes */
+            if (node.payload.parentNode !== undefined) {
+                let newLightingPath = getNewLightingPath(lightingPath, node.type, node.payload.parentNode.type)
+                if (newLightingPath !== undefined) {
+                    object.parentNode = getProtocolNode(node.payload.parentNode, removePersonalData, parseConfig, includeIds, includePayload, includeReferencesInSavedPayload, newLightingPath)
+                }
+            }
+            if (node.payload.referenceParent !== undefined) {
+                let newLightingPath = getNewLightingPath(lightingPath, node.type, node.payload.referenceParent.type)
+                if (newLightingPath !== undefined) {
+                    object.referenceParent = getProtocolNode(node.payload.referenceParent, removePersonalData, parseConfig, includeIds, includePayload, includeReferencesInSavedPayload, newLightingPath)
+                }
+            }
+
+            if (parseConfig && object.config !== undefined && nodeDefinition.editors !== undefined) {
+                if (nodeDefinition.editors.config === true) {
+                    try {
+                        object.config = JSON.parse(node.config)
+                    } catch (err) {
+                        if (ERROR_LOG === true) { logger.write('[ERROR] getProtocolNode -> default -> err = ' + err.stack) }
+                        if (ERROR_LOG === true) { logger.write('[ERROR] getProtocolNode -> default -> node.type = ' + node.type) }
+                        if (ERROR_LOG === true) { logger.write('[ERROR] getProtocolNode -> default -> node.name = ' + node.name) }
+                        if (ERROR_LOG === true) { logger.write('[ERROR] getProtocolNode -> default -> node.config = ' + node.config) }
+                        if (ERROR_LOG === true) { logger.write('[ERROR] getProtocolNode -> default -> node.id = ' + node.id) }
+                    }
+                }
+            }
+
+            if (includeIds) {
+                object.id = node.id
+            }
+            if (includePayload) {
+                object.savedPayload = getSavedPayload(node, includeReferencesInSavedPayload)
+            }
+
+            return object
         }
-      }
-
-      /* Parent Nodes */
-      if (node.payload.parentNode !== undefined) {
-        let newLightingPath = getNewLightingPath(lightingPath, node.type, node.payload.parentNode.type)
-        if (newLightingPath !== undefined) {
-          object.parentNode = getProtocolNode(node.payload.parentNode, removePersonalData, parseConfig, includeIds, includePayload, includeReferencesInSavedPayload, newLightingPath)
-        }
-      }
-      if (node.payload.referenceParent !== undefined) {
-        let newLightingPath = getNewLightingPath(lightingPath, node.type, node.payload.referenceParent.type)
-        if (newLightingPath !== undefined) {
-          object.referenceParent = getProtocolNode(node.payload.referenceParent, removePersonalData, parseConfig, includeIds, includePayload, includeReferencesInSavedPayload, newLightingPath)
-        }
-      }
-
-      if (parseConfig && object.config !== undefined && nodeDefinition.editors !== undefined) {
-        if (nodeDefinition.editors.config === true) {
-          try {
-            object.config = JSON.parse(node.config)
-          } catch (err) {
-            if (ERROR_LOG === true) { logger.write('[ERROR] getProtocolNode -> default -> err = ' + err.stack) }
-            if (ERROR_LOG === true) { logger.write('[ERROR] getProtocolNode -> default -> node.type = ' + node.type) }
-            if (ERROR_LOG === true) { logger.write('[ERROR] getProtocolNode -> default -> node.name = ' + node.name) }
-            if (ERROR_LOG === true) { logger.write('[ERROR] getProtocolNode -> default -> node.config = ' + node.config) }
-            if (ERROR_LOG === true) { logger.write('[ERROR] getProtocolNode -> default -> node.id = ' + node.id) }
-          }
-        }
-      }
-
-      if (includeIds) {
-        object.id = node.id
-      }
-      if (includePayload) {
-        object.savedPayload = getSavedPayload(node, includeReferencesInSavedPayload)
-      }
-
-      return object
-    }
-  }
-
-  function getNewLightingPath (lightingPath, currentNodeType, nextNodeType) {
-    if (lightingPath === undefined) { return }
-
-    if (currentNodeType === undefined) { return }
-    if (nextNodeType === undefined) { return }
-
-    let currentNodePosition = lightingPath.indexOf('->' + currentNodeType + '->')
-    let nextNodePosition = lightingPath.indexOf('->' + nextNodeType + '->')
-
-    let newLightingPath = lightingPath.substring(nextNodePosition, lightingPath.length + 1)
-
-    if (nextNodePosition > currentNodePosition) {
-      return newLightingPath
-    } else {
-      return
-    }
-  }
-
-  function getSavedPayload (node, includeReferencesInSavedPayload) {
-    if (node.payload === undefined) { return }
-    let savedPayload = {
-      position: {
-        x: node.payload.position.x,
-        y: node.payload.position.y
-      },
-      targetPosition: {
-        x: node.payload.targetPosition.x,
-        y: node.payload.targetPosition.y
-      },
-      floatingObject: {
-        isPinned: node.payload.floatingObject.isPinned,
-        isFrozen: (node.payload.floatingObject.isFrozen && node.payload.floatingObject.frozenManually),
-        isCollapsed: (node.payload.floatingObject.isCollapsed && node.payload.floatingObject.collapsedManually),
-        angleToParent: (node.payload.floatingObject.angleToParent),
-        distanceToParent: (node.payload.floatingObject.distanceToParent),
-        arrangementStyle: (node.payload.floatingObject.arrangementStyle)
-      },
-      uiObject: {
-        isRunning: node.payload.uiObject.isRunning,
-        shortcutKey: node.payload.uiObject.shortcutKey
-      }
     }
 
-    if (node.payload.frame !== undefined) {
-      savedPayload.frame = {
-        position: {
-          x: node.payload.frame.position.x,
-          y: node.payload.frame.position.y
-        },
-        width: node.payload.frame.width,
-        height: node.payload.frame.height,
-        radius: node.payload.frame.radius
-      }
+    function getNewLightingPath(lightingPath, currentNodeType, nextNodeType) {
+        if (lightingPath === undefined) { return }
+
+        if (currentNodeType === undefined) { return }
+        if (nextNodeType === undefined) { return }
+
+        let currentNodePosition = lightingPath.indexOf('->' + currentNodeType + '->')
+        let nextNodePosition = lightingPath.indexOf('->' + nextNodeType + '->')
+
+        let newLightingPath = lightingPath.substring(nextNodePosition, lightingPath.length + 1)
+
+        if (nextNodePosition > currentNodePosition) {
+            return newLightingPath
+        } else {
+            return
+        }
     }
 
-    if (includeReferencesInSavedPayload) {
-      /* Next for the ones that have a reference parent, we include it */
-      if (node.payload.referenceParent !== undefined) {
-        savedPayload.referenceParent = {
-          type: node.payload.referenceParent.type,
-          name: node.payload.referenceParent.name,
-          id: node.payload.referenceParent.id
+    function getSavedPayload(node, includeReferencesInSavedPayload) {
+        if (node.payload === undefined) { return }
+        let savedPayload = {
+            position: {
+                x: node.payload.position.x,
+                y: node.payload.position.y
+            },
+            targetPosition: {
+                x: node.payload.targetPosition.x,
+                y: node.payload.targetPosition.y
+            },
+            floatingObject: {
+                isPinned: node.payload.floatingObject.isPinned,
+                isFrozen: (node.payload.floatingObject.isFrozen && node.payload.floatingObject.frozenManually),
+                isCollapsed: (node.payload.floatingObject.isCollapsed && node.payload.floatingObject.collapsedManually),
+                angleToParent: (node.payload.floatingObject.angleToParent),
+                distanceToParent: (node.payload.floatingObject.distanceToParent),
+                arrangementStyle: (node.payload.floatingObject.arrangementStyle)
+            },
+            uiObject: {
+                isRunning: node.payload.uiObject.isRunning,
+                shortcutKey: node.payload.uiObject.shortcutKey
+            }
         }
-      } else {
-        /* The referenceParent property can be inherited from the previous saved payload. */
-        if (node.savedPayload !== undefined) {
-          savedPayload.referenceParent = node.savedPayload.referenceParent
+
+        if (node.payload.frame !== undefined) {
+            savedPayload.frame = {
+                position: {
+                    x: node.payload.frame.position.x,
+                    y: node.payload.frame.position.y
+                },
+                width: node.payload.frame.width,
+                height: node.payload.frame.height,
+                radius: node.payload.frame.radius
+            }
         }
-      }
+
+        if (includeReferencesInSavedPayload) {
+            /* Next for the ones that have a reference parent, we include it */
+            if (node.payload.referenceParent !== undefined) {
+                savedPayload.referenceParent = {
+                    type: node.payload.referenceParent.type,
+                    name: node.payload.referenceParent.name,
+                    id: node.payload.referenceParent.id
+                }
+            } else {
+                /* The referenceParent property can be inherited from the previous saved payload. */
+                if (node.savedPayload !== undefined) {
+                    savedPayload.referenceParent = node.savedPayload.referenceParent
+                }
+            }
+        }
+        return savedPayload
     }
-    return savedPayload
-  }
 }

DesignSpace/Workspace/FunctionLibraries/ReferenceAttachDetach.js

@@ -1,37 +1,37 @@
-function newReferenceAttachDetach () {
-  thisObject = {
-    referenceDetachNode: referenceDetachNode,
-    referenceAttachNode: referenceAttachNode
-  }
+function newReferenceAttachDetach() {
+    thisObject = {
+        referenceDetachNode: referenceDetachNode,
+        referenceAttachNode: referenceAttachNode
+    }
 
-  return thisObject
+    return thisObject
 
-  function referenceDetachNode (node) {
-    completeDetachment(node)
-  }
+    function referenceDetachNode(node) {
+        completeDetachment(node)
+    }
 
-  function referenceAttachNode (node, attachToNode, rootNodes) {
-    completeAttachment(node, attachToNode)
-  }
+    function referenceAttachNode(node, attachToNode, rootNodes) {
+        completeAttachment(node, attachToNode)
+    }
 
-  function completeAttachment (node, attachToNode) {
-    node.payload.referenceParent = attachToNode
-  }
+    function completeAttachment(node, attachToNode) {
+        node.payload.referenceParent = attachToNode
+    }
 
-  function completeDetachment (node) {
-    if (node.payload !== undefined !== undefined) {
-      if (node.payload.referenceParent !== undefined) {
-        if (node.payload.referenceParent.payload !== undefined) {
-          if (node.payload.referenceParent.payload.uiObject !== undefined) {
-            node.payload.referenceParent.payload.uiObject.isShowing = false
-          }
+    function completeDetachment(node) {
+        if (node.payload !== undefined !== undefined) {
+            if (node.payload.referenceParent !== undefined) {
+                if (node.payload.referenceParent.payload !== undefined) {
+                    if (node.payload.referenceParent.payload.uiObject !== undefined) {
+                        node.payload.referenceParent.payload.uiObject.isShowing = false
+                    }
+                }
+            }
         }
-      }
-    }
 
-    node.payload.referenceParent = undefined
-    if (node.savedPayload !== undefined) {
-      node.savedPayload.referenceParent = undefined
+        node.payload.referenceParent = undefined
+        if (node.savedPayload !== undefined) {
+            node.savedPayload.referenceParent = undefined
+        }
     }
-  }
 }

DesignSpace/Workspace/FunctionLibraries/SessionFunctions.js

@@ -1,185 +1,185 @@
-function newSessionFunctions () {
-  thisObject = {
-    runSession: runSession,
-    stopSession: stopSession
-  }
-
-  return thisObject
-
-  function runSession (node, functionLibraryProtocolNode, functionLibraryDependenciesFilter, resume, callBackFunction) {
-    if (validations(node) !== true) {
-      callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
-      return
+function newSessionFunctions() {
+    thisObject = {
+        runSession: runSession,
+        stopSession: stopSession
     }
 
-    let networkNode = node.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode
-    let eventsServerClient = canvas.designSpace.workspace.eventsServerClients.get(networkNode.id)
+    return thisObject
 
-    node.payload.uiObject.run(eventsServerClient, callBackFunction)
+    function runSession(node, functionLibraryProtocolNode, functionLibraryDependenciesFilter, resume, callBackFunction) {
+        if (validations(node) !== true) {
+            callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
+            return
+        }
 
-    let key = node.name + '-' + node.type + '-' + node.id
+        let networkNode = node.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode
+        let eventsServerClient = canvas.designSpace.workspace.eventsServerClients.get(networkNode.id)
 
-    let lightingPath = '' +
-    'Trading System->' +
-    'Parameters->' +
-    'Base Asset->Quoted Asset->Time Range->Time Frame->Slippage->Fee Structure->' +
-    'Exchange Account Asset->Asset->' +
-    'Trading Strategy->' +
-    'Trigger Stage->Trigger On Event->Trigger Off Event->Take Position Event->' +
-    'Announcement->Formula->' +
-    'Open Stage->Initial Definition->Open Execution->' +
-    'Position Size->Position Rate->Formula->' +
-    'Initial Stop->Initial Take Profit->' +
-    'Manage Stage->' +
-    'Managed Stop Loss->Managed Take Profit->' +
-    'Phase->Formula->Next Phase Event->Move To Phase Event->Phase->' +
-    'Situation->Condition->Javascript Code->' +
-    'Close Stage->Close Execution->' +
-    'Announcement->Formula->' +
-    'Execution Algorithm->Market Buy Order->Market Sell Order->Limit Buy Order->Limit Sell Order->' +
-    'Create Order Event->Cancel Order Event->' +
-    'Position Size->Position Rate->Formula->' +
-    'Situation->Condition->Javascript Code->' +
-    'Market Order->Limit Order->' +
-    'Simulated Exchange Events->Simulated Partial Fill->Simulated Actual Rate->Simulated Fees Paid->Formula->'
+        node.payload.uiObject.run(eventsServerClient, callBackFunction)
 
-    let tradingSystem = functionLibraryProtocolNode.getProtocolNode(node.tradingSystemReference.payload.referenceParent, false, true, true, false, false, lightingPath)
+        let key = node.name + '-' + node.type + '-' + node.id
 
-    lightingPath = '' +
-    'Trading Engine->' +
-    'Dynamic Indicators->Indicator Function->Formula->' +
-    'Episode->Current->Last->Previous->' +
-    'Episode Counters->Episode Statistics->' +
-    'Periods->Strategies->Positions->Orders->Hits->Fails->' +
-    'Profit Loss->Hit Ratio->Days->ROI->Anualized Rate Of Return->User Defined Statistic->' +
-    'Formula->' +
-    'Candle->' +
-    'Begin->End->Open->Close->Min->Max->Index->' +
-    'Balance->Base Asset->Quoted Asset->' +
-    'Distance To Event->' +
-    'Trigger On->Trigger Off->Take Position->Close Position->Next Phase->Move To Phase->Create Order->Cancel Order->Close Order->' +
-    'Strategy->' +
-    'Serial Number->Identifier->Begin->End->Strategy Name->Index->Trigger Stage Status->Open Stage Status->Manage Stage Status->Close Stage Status->Status->Begin Rate->End Rate->Situation Name->' +
-    'Strategy Counters->Periods->' +
-    'Position->' +
-    'Serial Number->Identifier->Begin->End->Rate->Size->Open Stage Orders Size->Open Stage Filled Size->Close Stage Orders Size->Close Stage Filled Size->Exit Type->Status->Begin Rate->End Rate->Situation Name->' +
-    'Stop Loss->Stop Loss Stage->Stop Loss Phase->' +
-    'Take Profit->Take Profit Stage->Take Profit Phase->' +
-    'Position Counters->Periods->' +
-    'Position Statistics->Profit Loss->Days->ROI->Hit Fail->User Defined Statistic->' +
-    'Formula->' +
-    'Exchange Orders->Market Buy Orders->Market Sell Orders->Limit Buy Orders->Limit Sell Orders->' +
-    'Market Order->Limit Order->' +
-    'Serial Number->Identifier->Exchange Id->Begin->End->Rate->Size->Exit Type->Status->Order Name->Algorithm Name->Situation Name->' +
-    'Order Counters->Periods->' +
-    'Order Statistics->Size Filled->Percentage Filled->Amount Received->Actual Rate->Fees Paid->Days->User Defined Statistic->'
+        let lightingPath = '' +
+            'Trading System->' +
+            'Parameters->' +
+            'Base Asset->Quoted Asset->Time Range->Time Frame->Slippage->Fee Structure->' +
+            'Exchange Account Asset->Asset->' +
+            'Trading Strategy->' +
+            'Trigger Stage->Trigger On Event->Trigger Off Event->Take Position Event->' +
+            'Announcement->Formula->' +
+            'Open Stage->Initial Definition->Open Execution->' +
+            'Position Size->Position Rate->Formula->' +
+            'Initial Stop->Initial Take Profit->' +
+            'Manage Stage->' +
+            'Managed Stop Loss->Managed Take Profit->' +
+            'Phase->Formula->Next Phase Event->Move To Phase Event->Phase->' +
+            'Situation->Condition->Javascript Code->' +
+            'Close Stage->Close Execution->' +
+            'Announcement->Formula->' +
+            'Execution Algorithm->Market Buy Order->Market Sell Order->Limit Buy Order->Limit Sell Order->' +
+            'Create Order Event->Cancel Order Event->' +
+            'Position Size->Position Rate->Formula->' +
+            'Situation->Condition->Javascript Code->' +
+            'Market Order->Limit Order->' +
+            'Simulated Exchange Events->Simulated Partial Fill->Simulated Actual Rate->Simulated Fees Paid->Formula->'
 
-    let tradingEngine = functionLibraryProtocolNode.getProtocolNode(node.tradingEngineReference.payload.referenceParent, false, true, true, false, false, lightingPath)
+        let tradingSystem = functionLibraryProtocolNode.getProtocolNode(node.tradingSystemReference.payload.referenceParent, false, true, true, false, false, lightingPath)
 
-    lightingPath = '' +
-    'Backtesting Session->Paper Trading Session->Fordward Testing Session->Live Trading Session->' +
-    'Parameters->' +
-    'Session Base Asset->Session Quoted Asset->Time Range->Time Frame->Slippage->Fee Structure->Snapshots->User Defined Parameters->' +
-    'Exchange Account Asset->Asset->' +
-    'Social Bots->Telegram Bot->'
+        lightingPath = '' +
+            'Trading Engine->' +
+            'Dynamic Indicators->Indicator Function->Formula->' +
+            'Episode->Current->Last->Previous->' +
+            'Episode Counters->Episode Statistics->' +
+            'Periods->Strategies->Positions->Orders->Hits->Fails->' +
+            'Profit Loss->Hit Ratio->Days->ROI->Anualized Rate Of Return->User Defined Statistic->' +
+            'Formula->' +
+            'Candle->' +
+            'Begin->End->Open->Close->Min->Max->Index->' +
+            'Balance->Base Asset->Quoted Asset->' +
+            'Distance To Event->' +
+            'Trigger On->Trigger Off->Take Position->Close Position->Next Phase->Move To Phase->Create Order->Cancel Order->Close Order->' +
+            'Strategy->' +
+            'Serial Number->Identifier->Begin->End->Strategy Name->Index->Trigger Stage Status->Open Stage Status->Manage Stage Status->Close Stage Status->Status->Begin Rate->End Rate->Situation Name->' +
+            'Strategy Counters->Periods->' +
+            'Position->' +
+            'Serial Number->Identifier->Begin->End->Rate->Size->Open Stage Orders Size->Open Stage Filled Size->Close Stage Orders Size->Close Stage Filled Size->Exit Type->Status->Begin Rate->End Rate->Situation Name->' +
+            'Stop Loss->Stop Loss Stage->Stop Loss Phase->' +
+            'Take Profit->Take Profit Stage->Take Profit Phase->' +
+            'Position Counters->Periods->' +
+            'Position Statistics->Profit Loss->Days->ROI->Hit Fail->User Defined Statistic->' +
+            'Formula->' +
+            'Exchange Orders->Market Buy Orders->Market Sell Orders->Limit Buy Orders->Limit Sell Orders->' +
+            'Market Order->Limit Order->' +
+            'Serial Number->Identifier->Exchange Id->Begin->End->Rate->Size->Exit Type->Status->Order Name->Algorithm Name->Situation Name->' +
+            'Order Counters->Periods->' +
+            'Order Statistics->Size Filled->Percentage Filled->Amount Received->Actual Rate->Fees Paid->Days->User Defined Statistic->'
 
-    let session = functionLibraryProtocolNode.getProtocolNode(node, false, true, true, false, false, lightingPath)
+        let tradingEngine = functionLibraryProtocolNode.getProtocolNode(node.tradingEngineReference.payload.referenceParent, false, true, true, false, false, lightingPath)
 
-    let dependencyFilter = functionLibraryDependenciesFilter.createFilter(node.tradingSystemReference.payload.referenceParent)
+        lightingPath = '' +
+            'Backtesting Session->Paper Trading Session->Fordward Testing Session->Live Trading Session->' +
+            'Parameters->' +
+            'Session Base Asset->Session Quoted Asset->Time Range->Time Frame->Slippage->Fee Structure->Snapshots->User Defined Parameters->' +
+            'Exchange Account Asset->Asset->' +
+            'Social Bots->Telegram Bot->'
 
-    /* Raise event to run the session */
-    let event = {
-      appSchema: JSON.stringify(APP_SCHEMA_ARRAY),
-      session: JSON.stringify(session),
-      tradingSystem: JSON.stringify(tradingSystem),
-      tradingEngine: JSON.stringify(tradingEngine),
-      dependencyFilter: JSON.stringify(dependencyFilter),
-      resume: resume
+        let session = functionLibraryProtocolNode.getProtocolNode(node, false, true, true, false, false, lightingPath)
+
+        let dependencyFilter = functionLibraryDependenciesFilter.createFilter(node.tradingSystemReference.payload.referenceParent)
+
+        /* Raise event to run the session */
+        let event = {
+            appSchema: JSON.stringify(APP_SCHEMA_ARRAY),
+            session: JSON.stringify(session),
+            tradingSystem: JSON.stringify(tradingSystem),
+            tradingEngine: JSON.stringify(tradingEngine),
+            dependencyFilter: JSON.stringify(dependencyFilter),
+            resume: resume
+        }
+
+        eventsServerClient.raiseEvent(key, 'Run Session', event)
+
+        if (node.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode === undefined) {
+            callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
+            return
+        }
     }
 
-    eventsServerClient.raiseEvent(key, 'Run Session', event)
+    function stopSession(node, functionLibraryProtocolNode, callBackFunction) {
+        if (validations(node) !== true) {
+            callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
+            return
+        }
 
-    if (node.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode === undefined) {
-      callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
-      return
-    }
-  }
+        let networkNode = node.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode
+        let eventsServerClient = canvas.designSpace.workspace.eventsServerClients.get(networkNode.id)
 
-  function stopSession (node, functionLibraryProtocolNode, callBackFunction) {
-    if (validations(node) !== true) {
-      callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
-      return
+        let key = node.name + '-' + node.type + '-' + node.id
+        eventsServerClient.raiseEvent(key, 'Stop Session')
+
+        node.payload.uiObject.stop(callBackFunction)
     }
 
-    let networkNode = node.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode
-    let eventsServerClient = canvas.designSpace.workspace.eventsServerClients.get(networkNode.id)
+    function validations(node) {
+        if (node.payload.parentNode === undefined) {
+            node.payload.uiObject.setErrorMessage('Session needs a Process Instance parent to be able to run.')
+            return
+        }
 
-    let key = node.name + '-' + node.type + '-' + node.id
-    eventsServerClient.raiseEvent(key, 'Stop Session')
+        if (node.payload.parentNode.payload.parentNode === undefined) {
+            node.payload.uiObject.setErrorMessage('Session needs to be inside a Trading Process Instance.')
+            return
+        }
 
-    node.payload.uiObject.stop(callBackFunction)
-  }
+        if (node.payload.parentNode.payload.parentNode.payload.parentNode === undefined) {
+            node.payload.uiObject.setErrorMessage('Session needs to be inside a Task.')
+            return
+        }
 
-  function validations (node) {
-    if (node.payload.parentNode === undefined) {
-      node.payload.uiObject.setErrorMessage('Session needs a Process Instance parent to be able to run.')
-      return
+        if (node.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode === undefined) {
+            node.payload.uiObject.setErrorMessage('Session needs to be inside a Task Manager.')
+            return
+        }
+
+        if (node.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode === undefined) {
+            node.payload.uiObject.setErrorMessage('Session needs to be inside Exchange Tasks.')
+            return
+        }
+
+        if (node.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode === undefined) {
+            node.payload.uiObject.setErrorMessage('Session needs to be inside a Testing or Production Environment.')
+            return
+        }
+
+        if (node.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode === undefined) {
+            node.payload.uiObject.setErrorMessage('Session needs to be inside a Network Node.')
+            return
+        }
+
+        if (node.payload.parentNode.payload.uiObject.isRunning !== true) {
+            node.payload.uiObject.setErrorMessage('Session needs a Process Instance parent to be running.')
+            return
+        }
+
+        if (node.tradingSystemReference === undefined) {
+            node.payload.uiObject.setErrorMessage('Session needs a child Trading System Reference.')
+            return
+        }
+
+        if (node.tradingEngineReference === undefined) {
+            node.payload.uiObject.setErrorMessage('Session needs a child Trading Engine Reference.')
+            return
+        }
+
+        if (node.tradingSystemReference.payload.referenceParent === undefined) {
+            node.payload.uiObject.setErrorMessage('Trading System Reference needs to reference a Trading System.')
+            return
+        }
+
+        if (node.tradingEngineReference.payload.referenceParent === undefined) {
+            node.payload.uiObject.setErrorMessage('Trading Engine Reference needs to reference a Trading Engine.')
+            return
+        }
+        return true
     }
-
-    if (node.payload.parentNode.payload.parentNode === undefined) {
-      node.payload.uiObject.setErrorMessage('Session needs to be inside a Trading Process Instance.')
-      return
-    }
-
-    if (node.payload.parentNode.payload.parentNode.payload.parentNode === undefined) {
-      node.payload.uiObject.setErrorMessage('Session needs to be inside a Task.')
-      return
-    }
-
-    if (node.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode === undefined) {
-      node.payload.uiObject.setErrorMessage('Session needs to be inside a Task Manager.')
-      return
-    }
-
-    if (node.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode === undefined) {
-      node.payload.uiObject.setErrorMessage('Session needs to be inside Exchange Tasks.')
-      return
-    }
-
-    if (node.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode === undefined) {
-      node.payload.uiObject.setErrorMessage('Session needs to be inside a Testing or Production Environment.')
-      return
-    }
-
-    if (node.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode === undefined) {
-      node.payload.uiObject.setErrorMessage('Session needs to be inside a Network Node.')
-      return
-    }
-
-    if (node.payload.parentNode.payload.uiObject.isRunning !== true) {
-      node.payload.uiObject.setErrorMessage('Session needs a Process Instance parent to be running.')
-      return
-    }
-
-    if (node.tradingSystemReference === undefined) {
-      node.payload.uiObject.setErrorMessage('Session needs a child Trading System Reference.')
-      return
-    }
-
-    if (node.tradingEngineReference === undefined) {
-      node.payload.uiObject.setErrorMessage('Session needs a child Trading Engine Reference.')
-      return
-    }
-
-    if (node.tradingSystemReference.payload.referenceParent === undefined) {
-      node.payload.uiObject.setErrorMessage('Trading System Reference needs to reference a Trading System.')
-      return
-    }
-
-    if (node.tradingEngineReference.payload.referenceParent === undefined) {
-      node.payload.uiObject.setErrorMessage('Trading Engine Reference needs to reference a Trading Engine.')
-      return
-    }
-    return true
-  }
 }

DesignSpace/Workspace/FunctionLibraries/ShortcutKeys.js

@@ -1,55 +1,55 @@
-function newShortcutKeys () {
-  thisObject = {
-    getNodeByShortcutKey: getNodeByShortcutKey
-  }
-  return thisObject
+function newShortcutKeys() {
+    thisObject = {
+        getNodeByShortcutKey: getNodeByShortcutKey
+    }
+    return thisObject
 
-  function getNodeByShortcutKey (node, searchingKey) {
-    if (node === undefined) { return }
-    let nodeDefinition = getNodeDefinition (node)
-    if (nodeDefinition !== undefined) {
-      /* Check Self first */
-      if (node.payload.uiObject.shortcutKey === searchingKey) {
-        return node
-      }
+    function getNodeByShortcutKey(node, searchingKey) {
+        if (node === undefined) { return }
+        let nodeDefinition = getNodeDefinition(node)
+        if (nodeDefinition !== undefined) {
+            /* Check Self first */
+            if (node.payload.uiObject.shortcutKey === searchingKey) {
+                return node
+            }
 
-      /* Check all of its own children nodes. */
-      if (node.payload.floatingObject.isCollapsed !== true) {
-        if (nodeDefinition.properties !== undefined) {
-          let previousPropertyName // Since there are cases where there are many properties with the same name,because they can hold nodes of different types but only one at the time, we have to avoind counting each property of those as individual children.
-          for (let i = 0; i < nodeDefinition.properties.length; i++) {
-            let property = nodeDefinition.properties[i]
+            /* Check all of its own children nodes. */
+            if (node.payload.floatingObject.isCollapsed !== true) {
+                if (nodeDefinition.properties !== undefined) {
+                    let previousPropertyName // Since there are cases where there are many properties with the same name,because they can hold nodes of different types but only one at the time, we have to avoind counting each property of those as individual children.
+                    for (let i = 0; i < nodeDefinition.properties.length; i++) {
+                        let property = nodeDefinition.properties[i]
 
-            switch (property.type) {
-              case 'node': {
-                if (property.name !== previousPropertyName) {
-                  if (node[property.name] !== undefined) {
-                    let child
-                    child = getNodeByShortcutKey(node[property.name], searchingKey)
-                    if (child !== undefined) {
-                      return child
-                    }
-                  }
-                  previousPropertyName = property.name
-                }
-              }
-                break
-              case 'array': {
-                let nodePropertyArray = node[property.name]
-                if (nodePropertyArray !== undefined) {
-                  for (let m = 0; m < nodePropertyArray.length; m++) {
-                    child = getNodeByShortcutKey(nodePropertyArray[m], searchingKey)
-                    if (child !== undefined) {
-                      return child
+                        switch (property.type) {
+                            case 'node': {
+                                if (property.name !== previousPropertyName) {
+                                    if (node[property.name] !== undefined) {
+                                        let child
+                                        child = getNodeByShortcutKey(node[property.name], searchingKey)
+                                        if (child !== undefined) {
+                                            return child
+                                        }
+                                    }
+                                    previousPropertyName = property.name
+                                }
+                            }
+                                break
+                            case 'array': {
+                                let nodePropertyArray = node[property.name]
+                                if (nodePropertyArray !== undefined) {
+                                    for (let m = 0; m < nodePropertyArray.length; m++) {
+                                        child = getNodeByShortcutKey(nodePropertyArray[m], searchingKey)
+                                        if (child !== undefined) {
+                                            return child
+                                        }
+                                    }
+                                }
+                            }
+                                break
+                        }
                     }
-                  }
                 }
-              }
-                break
             }
-          }
         }
-      }
     }
-  }
 }

DesignSpace/Workspace/FunctionLibraries/SuperScripts.js

@@ -1,90 +1,90 @@
-function newSuperScriptsFunctions () {
-  thisObject = {
-    runSuperScript: runSuperScript
-  }
+function newSuperScriptsFunctions() {
+    thisObject = {
+        runSuperScript: runSuperScript
+    }
 
-  return thisObject
+    return thisObject
 
-  function runSuperScript (node, rootNodes, functionLibraryNodeCloning, functionLibraryUiObjectsFromNodes, functionLibraryNodeDeleter) {
-    try {
-      let clone = functionLibraryNodeCloning.getNodeClone
-      let executionResult = true
-      let superAction = node
+    function runSuperScript(node, rootNodes, functionLibraryNodeCloning, functionLibraryUiObjectsFromNodes, functionLibraryNodeDeleter) {
+        try {
+            let clone = functionLibraryNodeCloning.getNodeClone
+            let executionResult = true
+            let superAction = node
 
-      function setup (templateClone, target, exchange, exchangeNodeType, arrayPropertyName) {
-        spawnPosition.x = target.payload.position.x
-        spawnPosition.y = target.payload.position.y
+            function setup(templateClone, target, exchange, exchangeNodeType, arrayPropertyName) {
+                spawnPosition.x = target.payload.position.x
+                spawnPosition.y = target.payload.position.y
 
-        if (exchange === undefined) {
-          functionLibraryUiObjectsFromNodes.createUiObjectFromNode(templateClone, target, target)
-        } else {
-          let definition = getNodeDefinition (target)
-          for (let i = 0; i < definition.properties.length; i++) {
-            let property = definition.properties[i]
-            if (property.childType === exchangeNodeType) {
-              let exchanges = target[property.name]
-              if (exchanges === undefined) {
-                exchanges = []
-              }
-              let targetExchange
-              for (let j = 0; j < exchanges.length; j++) {
-                let thisExchange = exchanges[j]
-                if (thisExchange.payload.referenceParent !== undefined) {
-                  if (thisExchange.payload.referenceParent.id === exchange.id) {
-                    targetExchange = thisExchange
-                  }
+                if (exchange === undefined) {
+                    functionLibraryUiObjectsFromNodes.createUiObjectFromNode(templateClone, target, target)
+                } else {
+                    let definition = getNodeDefinition(target)
+                    for (let i = 0; i < definition.properties.length; i++) {
+                        let property = definition.properties[i]
+                        if (property.childType === exchangeNodeType) {
+                            let exchanges = target[property.name]
+                            if (exchanges === undefined) {
+                                exchanges = []
+                            }
+                            let targetExchange
+                            for (let j = 0; j < exchanges.length; j++) {
+                                let thisExchange = exchanges[j]
+                                if (thisExchange.payload.referenceParent !== undefined) {
+                                    if (thisExchange.payload.referenceParent.id === exchange.id) {
+                                        targetExchange = thisExchange
+                                    }
+                                }
+                            }
+                            if (targetExchange === undefined) {
+                                targetExchange = functionLibraryUiObjectsFromNodes.addUIObject(target, exchangeNodeType)
+                                targetExchange.payload.referenceParent = exchange
+                            }
+                            let nodesArray = targetExchange[arrayPropertyName]
+                            nodesArray.push(templateClone)
+                            functionLibraryUiObjectsFromNodes.createUiObjectFromNode(templateClone, targetExchange, targetExchange)
+                        }
+                    }
                 }
-              }
-              if (targetExchange === undefined) {
-                targetExchange = functionLibraryUiObjectsFromNodes.addUIObject(target, exchangeNodeType)
-                targetExchange.payload.referenceParent = exchange
-              }
-              let nodesArray = targetExchange[arrayPropertyName]
-              nodesArray.push(templateClone)
-              functionLibraryUiObjectsFromNodes.createUiObjectFromNode(templateClone, targetExchange, targetExchange)
             }
-          }
-        }
-      }
 
-      function deleteNode (node) {
-        functionLibraryNodeDeleter.deleteUIObject(node, rootNodes)
-      }
+            function deleteNode(node) {
+                functionLibraryNodeDeleter.deleteUIObject(node, rootNodes)
+            }
 
-      /* Validations */
-      if (executionResult === true && node.payload.parentNode === undefined) {
-        node.payload.uiObject.setErrorMessage('Super Action node needs a Parent Node.')
-        executionResult = false
-      }
-      if (executionResult === true && node.payload.referenceParent === undefined) {
-        node.payload.uiObject.setErrorMessage('Super Action node needs to reference a Master Script Node.')
-        executionResult = false
-      }
-      if (executionResult === true && node.payload.referenceParent.javascriptCode === undefined) {
-        node.payload.uiObject.setErrorMessage('Master Script Node needs to have a child Javascript Code Node.')
-        executionResult = false
-      }
+            /* Validations */
+            if (executionResult === true && node.payload.parentNode === undefined) {
+                node.payload.uiObject.setErrorMessage('Super Action node needs a Parent Node.')
+                executionResult = false
+            }
+            if (executionResult === true && node.payload.referenceParent === undefined) {
+                node.payload.uiObject.setErrorMessage('Super Action node needs to reference a Master Script Node.')
+                executionResult = false
+            }
+            if (executionResult === true && node.payload.referenceParent.javascriptCode === undefined) {
+                node.payload.uiObject.setErrorMessage('Master Script Node needs to have a child Javascript Code Node.')
+                executionResult = false
+            }
 
-      let masterScript = node.payload.referenceParent
+            let masterScript = node.payload.referenceParent
 
-      eval(masterScript.javascriptCode.code)
+            eval(masterScript.javascriptCode.code)
 
-      let masterScriptInstance = newNewMasterScriptInstance()
+            let masterScriptInstance = newNewMasterScriptInstance()
 
-      if (executionResult === true) {
-        executionResult = masterScriptInstance.runValidations(superAction, masterScript)
-      }
-      if (executionResult === true) {
-        executionResult = masterScriptInstance.runScript(superAction, masterScript)
-      }
-      if (executionResult === true) {
-        superAction.payload.uiObject.setValue('Execution Completed Successfully')
-      } else {
-        superAction.payload.uiObject.setValue('Execution Failed')
-      }
-    } catch (err) {
-      superAction.payload.uiObject.setErrorMessage(err.message)
-      superAction.payload.uiObject.setValue('Execution Failed')
+            if (executionResult === true) {
+                executionResult = masterScriptInstance.runValidations(superAction, masterScript)
+            }
+            if (executionResult === true) {
+                executionResult = masterScriptInstance.runScript(superAction, masterScript)
+            }
+            if (executionResult === true) {
+                superAction.payload.uiObject.setValue('Execution Completed Successfully')
+            } else {
+                superAction.payload.uiObject.setValue('Execution Failed')
+            }
+        } catch (err) {
+            superAction.payload.uiObject.setErrorMessage(err.message)
+            superAction.payload.uiObject.setValue('Execution Failed')
+        }
     }
-  }
 }

DesignSpace/Workspace/FunctionLibraries/TaskFunctions.js

@@ -1,228 +1,228 @@
-function newTaskFunctions () {
-  thisObject = {
-    runTask: runTask,
-    stopTask: stopTask,
-    runAllTasks: runAllTasks,
-    stopAllTasks: stopAllTasks,
-    runAllTaskManagers: runAllTaskManagers,
-    stopAllTaskManagers: stopAllTaskManagers,
-    runAllExchangeTasks: runAllExchangeTasks,
-    stopAllExchangeTasks: stopAllExchangeTasks
-  }
-
-  return thisObject
-
-  function runTask (node, functionLibraryProtocolNode, isDebugging, callBackFunction) {
-    if (validations(node) !== true) {
-      callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
-      return
+function newTaskFunctions() {
+    thisObject = {
+        runTask: runTask,
+        stopTask: stopTask,
+        runAllTasks: runAllTasks,
+        stopAllTasks: stopAllTasks,
+        runAllTaskManagers: runAllTaskManagers,
+        stopAllTaskManagers: stopAllTaskManagers,
+        runAllExchangeTasks: runAllExchangeTasks,
+        stopAllExchangeTasks: stopAllExchangeTasks
     }
 
-    let networkNode = node.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode
-    let eventsServerClient = canvas.designSpace.workspace.eventsServerClients.get(networkNode.id)
+    return thisObject
 
-    for (let i = 0; i < node.bot.processes.length; i++) {
-      let process = node.bot.processes[i]
-      process.payload.uiObject.run(eventsServerClient)
+    function runTask(node, functionLibraryProtocolNode, isDebugging, callBackFunction) {
+        if (validations(node) !== true) {
+            callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
+            return
+        }
+
+        let networkNode = node.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode
+        let eventsServerClient = canvas.designSpace.workspace.eventsServerClients.get(networkNode.id)
+
+        for (let i = 0; i < node.bot.processes.length; i++) {
+            let process = node.bot.processes[i]
+            process.payload.uiObject.run(eventsServerClient)
+        }
+
+        let taskLightingPath = '->Task->' +
+            'Sensor Bot Instance->' +
+            'Indicator Bot Instance->Time Frames Filter->' +
+            'Trading Bot Instance->' +
+            'Sensor Process Instance->Indicator Process Instance->Trading Process Instance->' +
+            'Market Reference->' +
+            'Key Reference->Exchange Account Key->' +
+            'Market->Exchange Markets->Crypto Exchange->' +
+            'Market Base Asset->Market Quoted Asset->Asset->' +
+            'Backtesting Session->Live Trading Session->Paper Trading Session->Fordward Testing Session->' +
+            'Process Definition->' +
+            'Process Output->Output Dataset->Dataset Definition->Product Definition->' +
+            'Process Dependencies->' +
+            'Status Dependency->Status Report->Process Definition->' +
+            'Data Dependency->Dataset Definition->Product Definition->' +
+            'Record Definition->Record Property->Formula->' +
+            'Data Building Procedure->' +
+            'Procedure Initialization->Javascript Code->' +
+            'Procedure Loop->Javascript Code->' +
+            'Calculations Procedure->' +
+            'Procedure Initialization->Javascript Code->' +
+            'Procedure Loop->Javascript Code->' +
+            'Status Report->' +
+            'Execution Finished Event->' +
+            'Execution Started Event->Execution Finished Event->Process Definition->' +
+            'Sensor Bot->' +
+            'Indicator Bot->' +
+            'Trading Bot->' +
+            'Data Mine->'
+
+        let taskDefinition = functionLibraryProtocolNode.getProtocolNode(node, false, true, true, false, false, taskLightingPath)
+
+        let networkLightingPath = '->Network->Network Node->' +
+            'Data Storage->Session Independent Data->Exchange Data Products->' +
+            'Single Market Data->Data Product->Product Definition->' +
+            'Data Mining->Testing Environment->Production Environment->' +
+            'Exchange Tasks->Crypto Exchange->' +
+            'Task Manager->Task->' +
+            'Indicator Bot Instance->Sensor Bot Instance->Trading Bot Instance->' +
+            'Indicator Process Instance->Sensor Process Instance->Trading Process Instance->' +
+            'Paper Trading Session->Forward Testing Session->Backtesting Session->Live Trading Session->' +
+            'Market Reference->Market->' +
+            'Process Definition->'
+
+        let networkDefinition = functionLibraryProtocolNode.getProtocolNode(networkNode.payload.parentNode, false, true, true, false, false, networkLightingPath)
+
+        let event = {
+            taskId: node.id,
+            taskName: node.name,
+            taskDefinition: JSON.stringify(taskDefinition),
+            networkDefinition: JSON.stringify(networkDefinition)
+        }
+
+        if (isDebugging === true) {
+            callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE)
+            eventsServerClient.raiseEvent('Task Server', 'Debug Task Started', event)
+            return
+        }
+
+        node.payload.uiObject.run(eventsServerClient, callBackFunction)
+        eventsServerClient.raiseEvent('Task Manager', 'Run Task', event)
     }
 
-    let taskLightingPath = '->Task->' +
-    'Sensor Bot Instance->' +
-    'Indicator Bot Instance->Time Frames Filter->' +
-    'Trading Bot Instance->' +
-    'Sensor Process Instance->Indicator Process Instance->Trading Process Instance->' +
-    'Market Reference->' +
-    'Key Reference->Exchange Account Key->' +
-    'Market->Exchange Markets->Crypto Exchange->' +
-    'Market Base Asset->Market Quoted Asset->Asset->' +
-    'Backtesting Session->Live Trading Session->Paper Trading Session->Fordward Testing Session->' +
-    'Process Definition->' +
-    'Process Output->Output Dataset->Dataset Definition->Product Definition->' +
-    'Process Dependencies->' +
-    'Status Dependency->Status Report->Process Definition->' +
-    'Data Dependency->Dataset Definition->Product Definition->' +
-    'Record Definition->Record Property->Formula->' +
-    'Data Building Procedure->' +
-    'Procedure Initialization->Javascript Code->' +
-    'Procedure Loop->Javascript Code->' +
-    'Calculations Procedure->' +
-    'Procedure Initialization->Javascript Code->' +
-    'Procedure Loop->Javascript Code->' +
-    'Status Report->' +
-    'Execution Finished Event->' +
-    'Execution Started Event->Execution Finished Event->Process Definition->' +
-    'Sensor Bot->' +
-    'Indicator Bot->' +
-    'Trading Bot->' +
-    'Data Mine->'
+    function stopTask(node, functionLibraryProtocolNode, callBackFunction) {
+        if (validations(node) !== true) {
+            callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
+            return
+        }
 
-    let taskDefinition = functionLibraryProtocolNode.getProtocolNode(node, false, true, true, false, false, taskLightingPath)
+        let networkNode = node.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode
+        let eventsServerClient = canvas.designSpace.workspace.eventsServerClients.get(networkNode.id)
 
-    let networkLightingPath = '->Network->Network Node->' +
-   'Data Storage->Session Independent Data->Exchange Data Products->' +
-   'Single Market Data->Data Product->Product Definition->' +
-   'Data Mining->Testing Environment->Production Environment->' +
-   'Exchange Tasks->Crypto Exchange->' +
-   'Task Manager->Task->' +
-   'Indicator Bot Instance->Sensor Bot Instance->Trading Bot Instance->' +
-   'Indicator Process Instance->Sensor Process Instance->Trading Process Instance->' +
-   'Paper Trading Session->Forward Testing Session->Backtesting Session->Live Trading Session->' +
-   'Market Reference->Market->' +
-   'Process Definition->'
+        let event = {
+            taskId: node.id,
+            taskName: node.name
+        }
 
-    let networkDefinition = functionLibraryProtocolNode.getProtocolNode(networkNode.payload.parentNode, false, true, true, false, false, networkLightingPath)
+        node.payload.uiObject.stop(callBackFunction)
+        eventsServerClient.raiseEvent('Task Manager', 'Stop Task', event)
 
-    let event = {
-      taskId: node.id,
-      taskName: node.name,
-      taskDefinition: JSON.stringify(taskDefinition),
-      networkDefinition: JSON.stringify(networkDefinition)
+        if (node.bot === undefined) { return }
+        if (node.bot.processes.length === 0) { return }
+
+        for (let i = 0; i < node.bot.processes.length; i++) {
+            let process = node.bot.processes[i]
+            process.payload.uiObject.stop()
+        }
     }
 
-    if (isDebugging === true) {
-      callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE)
-      eventsServerClient.raiseEvent('Task Server', 'Debug Task Started', event)
-      return
+    function validations(node) {
+        if (node.bot === undefined) {
+            node.payload.uiObject.setErrorMessage('Task needs to have a Bot Instance.')
+            return
+        }
+        if (node.bot.processes.length === 0) {
+            node.payload.uiObject.setErrorMessage('Task Bot Instance needs to have al least once Process Instance.')
+            return
+        }
+
+        if (node.payload.parentNode === undefined) {
+            node.payload.uiObject.setErrorMessage('Task needs to be inside a Task Manager.')
+            return
+        }
+
+        if (node.payload.parentNode.payload.parentNode === undefined) {
+            node.payload.uiObject.setErrorMessage('Task needs to be inside Exchange Tasks.')
+            return
+        }
+
+        if (node.payload.parentNode.payload.parentNode.payload.parentNode === undefined) {
+            node.payload.uiObject.setErrorMessage('Task needs to be inside a Testing or Production Environment or a Data Mining node.')
+            return
+        }
+
+        if (node.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode === undefined) {
+            node.payload.uiObject.setErrorMessage('Task needs to be inside a Network Node.')
+            return
+        }
+
+        if (node.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode === undefined) {
+            node.payload.uiObject.setErrorMessage('Task needs to be inside a Network.')
+            return
+        }
+
+        let networkNode = node.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode
+        if (loadPropertyFromNodeConfig(networkNode.payload, 'host') === undefined) {
+            node.payload.uiObject.setErrorMessage('Network Node needs to have a valid Host property at its config.')
+            return
+        }
+
+        if (loadPropertyFromNodeConfig(networkNode.payload, 'webPort') === undefined) {
+            node.payload.uiObject.setErrorMessage('Network Node needs to have a valid webPort property at its config.')
+            return
+        }
+
+        if (loadPropertyFromNodeConfig(networkNode.payload, 'webSocketsPort') === undefined) {
+            node.payload.uiObject.setErrorMessage('Network Node needs to have a valid webSocketsPort property at its config.')
+            return
+        }
+
+        return true
     }
 
-    node.payload.uiObject.run(eventsServerClient, callBackFunction)
-    eventsServerClient.raiseEvent('Task Manager', 'Run Task', event)
-  }
+    function runAllTasks(taskManager, functionLibraryProtocolNode) {
+        for (let i = 0; i < taskManager.tasks.length; i++) {
+            let node = taskManager.tasks[i]
+            let menu = node.payload.uiObject.menu
 
-  function stopTask (node, functionLibraryProtocolNode, callBackFunction) {
-    if (validations(node) !== true) {
-      callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
-      return
+            menu.internalClick('Run Task')
+        }
     }
 
-    let networkNode = node.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode
-    let eventsServerClient = canvas.designSpace.workspace.eventsServerClients.get(networkNode.id)
+    function stopAllTasks(taskManager, functionLibraryProtocolNode) {
+        for (let i = 0; i < taskManager.tasks.length; i++) {
+            let node = taskManager.tasks[i]
+            let menu = node.payload.uiObject.menu
 
-    let event = {
-      taskId: node.id,
-      taskName: node.name
+            menu.internalClick('Stop Task')
+        }
     }
 
-    node.payload.uiObject.stop(callBackFunction)
-    eventsServerClient.raiseEvent('Task Manager', 'Stop Task', event)
+    function runAllTaskManagers(parent, functionLibraryProtocolNode) {
+        for (let i = 0; i < parent.taskManagers.length; i++) {
+            let node = parent.taskManagers[i]
+            let menu = node.payload.uiObject.menu
 
-    if (node.bot === undefined) { return }
-    if (node.bot.processes.length === 0) { return }
-
-    for (let i = 0; i < node.bot.processes.length; i++) {
-      let process = node.bot.processes[i]
-      process.payload.uiObject.stop()
-    }
-  }
-
-  function validations (node) {
-    if (node.bot === undefined) {
-      node.payload.uiObject.setErrorMessage('Task needs to have a Bot Instance.')
-      return
-    }
-    if (node.bot.processes.length === 0) {
-      node.payload.uiObject.setErrorMessage('Task Bot Instance needs to have al least once Process Instance.')
-      return
+            menu.internalClick('Run All Tasks')
+            menu.internalClick('Run All Tasks')
+        }
     }
 
-    if (node.payload.parentNode === undefined) {
-      node.payload.uiObject.setErrorMessage('Task needs to be inside a Task Manager.')
-      return
+    function stopAllTaskManagers(parent, functionLibraryProtocolNode) {
+        for (let i = 0; i < parent.taskManagers.length; i++) {
+            let node = parent.taskManagers[i]
+            let menu = node.payload.uiObject.menu
+
+            menu.internalClick('Stop All Tasks')
+            menu.internalClick('Stop All Tasks')
+        }
+    }
+    function runAllExchangeTasks(parent, functionLibraryProtocolNode) {
+        for (let i = 0; i < parent.exchangeTasks.length; i++) {
+            let node = parent.exchangeTasks[i]
+            let menu = node.payload.uiObject.menu
+
+            menu.internalClick('Run All Task Managers')
+            menu.internalClick('Run All Task Managers')
+        }
     }
 
-    if (node.payload.parentNode.payload.parentNode === undefined) {
-      node.payload.uiObject.setErrorMessage('Task needs to be inside Exchange Tasks.')
-      return
+    function stopAllExchangeTasks(parent, functionLibraryProtocolNode) {
+        for (let i = 0; i < parent.exchangeTasks.length; i++) {
+            let node = parent.exchangeTasks[i]
+            let menu = node.payload.uiObject.menu
+
+            menu.internalClick('Stop All Task Managers')
+            menu.internalClick('Stop All Task Managers')
+        }
     }
-
-    if (node.payload.parentNode.payload.parentNode.payload.parentNode === undefined) {
-      node.payload.uiObject.setErrorMessage('Task needs to be inside a Testing or Production Environment or a Data Mining node.')
-      return
-    }
-
-    if (node.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode === undefined) {
-      node.payload.uiObject.setErrorMessage('Task needs to be inside a Network Node.')
-      return
-    }
-
-    if (node.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode === undefined) {
-      node.payload.uiObject.setErrorMessage('Task needs to be inside a Network.')
-      return
-    }
-
-    let networkNode = node.payload.parentNode.payload.parentNode.payload.parentNode.payload.parentNode
-    if (loadPropertyFromNodeConfig(networkNode.payload, 'host') === undefined) {
-      node.payload.uiObject.setErrorMessage('Network Node needs to have a valid Host property at its config.')
-      return
-    }
-
-    if (loadPropertyFromNodeConfig(networkNode.payload, 'webPort') === undefined) {
-      node.payload.uiObject.setErrorMessage('Network Node needs to have a valid webPort property at its config.')
-      return
-    }
-
-    if (loadPropertyFromNodeConfig(networkNode.payload, 'webSocketsPort') === undefined) {
-      node.payload.uiObject.setErrorMessage('Network Node needs to have a valid webSocketsPort property at its config.')
-      return
-    }
-
-    return true
-  }
-
-  function runAllTasks (taskManager, functionLibraryProtocolNode) {
-    for (let i = 0; i < taskManager.tasks.length; i++) {
-      let node = taskManager.tasks[i]
-      let menu = node.payload.uiObject.menu
-
-      menu.internalClick('Run Task')
-    }
-  }
-
-  function stopAllTasks (taskManager, functionLibraryProtocolNode) {
-    for (let i = 0; i < taskManager.tasks.length; i++) {
-      let node = taskManager.tasks[i]
-      let menu = node.payload.uiObject.menu
-
-      menu.internalClick('Stop Task')
-    }
-  }
-
-  function runAllTaskManagers (parent, functionLibraryProtocolNode) {
-    for (let i = 0; i < parent.taskManagers.length; i++) {
-      let node = parent.taskManagers[i]
-      let menu = node.payload.uiObject.menu
-
-      menu.internalClick('Run All Tasks')
-      menu.internalClick('Run All Tasks')
-    }
-  }
-
-  function stopAllTaskManagers (parent, functionLibraryProtocolNode) {
-    for (let i = 0; i < parent.taskManagers.length; i++) {
-      let node = parent.taskManagers[i]
-      let menu = node.payload.uiObject.menu
-
-      menu.internalClick('Stop All Tasks')
-      menu.internalClick('Stop All Tasks')
-    }
-  }
-  function runAllExchangeTasks (parent, functionLibraryProtocolNode) {
-    for (let i = 0; i < parent.exchangeTasks.length; i++) {
-      let node = parent.exchangeTasks[i]
-      let menu = node.payload.uiObject.menu
-
-      menu.internalClick('Run All Task Managers')
-      menu.internalClick('Run All Task Managers')
-    }
-  }
-
-  function stopAllExchangeTasks (parent, functionLibraryProtocolNode) {
-    for (let i = 0; i < parent.exchangeTasks.length; i++) {
-      let node = parent.exchangeTasks[i]
-      let menu = node.payload.uiObject.menu
-
-      menu.internalClick('Stop All Task Managers')
-      menu.internalClick('Stop All Task Managers')
-    }
-  }
 }

DesignSpace/Workspace/FunctionLibraries/WebhookFunctions.js

@@ -1,22 +1,22 @@
-function newWebhookFunctions () {
-  thisObject = {
-    sendTestMessage: sendTestMessage
-  }
+function newWebhookFunctions() {
+    thisObject = {
+        sendTestMessage: sendTestMessage
+    }
 
-  return thisObject
+    return thisObject
 
-  function sendTestMessage (node, callBackFunction) {
-    let testMessage = loadPropertyFromNodeConfig(node.payload, 'testMessage')
-    let letURL = loadPropertyFromNodeConfig(node.payload, 'webhookURL')
+    function sendTestMessage(node, callBackFunction) {
+        let testMessage = loadPropertyFromNodeConfig(node.payload, 'testMessage')
+        let letURL = loadPropertyFromNodeConfig(node.payload, 'webhookURL')
 
-    callServer(testMessage, letURL, onResponse)
+        callServer(testMessage, letURL, onResponse)
 
-    function onResponse (err) {
-      if (err.result === GLOBAL.DEFAULT_OK_RESPONSE.result) {
-        callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE)
-      } else {
-        callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
-      }
+        function onResponse(err) {
+            if (err.result === GLOBAL.DEFAULT_OK_RESPONSE.result) {
+                callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE)
+            } else {
+                callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
+            }
+        }
     }
-  }
 }

EventHandler.js

@@ -1,46 +1,46 @@
- 
-function newEventHandler () {
-  let thisObject = {
-    name: undefined,                            // This is for debugging purposes only.
-    listenToEvent: listenToEvent,
-    stopListening: stopListening,
-    raiseEvent: raiseEvent,
-    finalize: finalize
-  }
 
-  let eventHandlers = []        // Here we store all the functions we will call when an event is raiseed.
-
-  return thisObject
-
-  function finalize () {
-    eventHandlers = []
-  }
-
-  function listenToEvent (eventType, handler, extraData) {
-    let eventSubscriptionId = newUniqueId()
-    eventHandlers.push([eventType, handler, extraData, eventSubscriptionId])
-    return eventSubscriptionId
-  }
-
-  function stopListening (pEventSubscriptionId) {
-    for (let i = 0; i < eventHandlers.length; i++) {
-      if (pEventSubscriptionId === eventHandlers[i][3]) {
-        eventHandlers.splice(i, 1)
-        return
-      }
+function newEventHandler() {
+    let thisObject = {
+        name: undefined,                            // This is for debugging purposes only.
+        listenToEvent: listenToEvent,
+        stopListening: stopListening,
+        raiseEvent: raiseEvent,
+        finalize: finalize
     }
-  }
 
-  function raiseEvent (eventType, event) {
-    for (var i = 0; i < eventHandlers.length; i++) {
+    let eventHandlers = []        // Here we store all the functions we will call when an event is raiseed.
+
+    return thisObject
+
+    function finalize() {
+        eventHandlers = []
+    }
+
+    function listenToEvent(eventType, handler, extraData) {
+        let eventSubscriptionId = newUniqueId()
+        eventHandlers.push([eventType, handler, extraData, eventSubscriptionId])
+        return eventSubscriptionId
+    }
+
+    function stopListening(pEventSubscriptionId) {
+        for (let i = 0; i < eventHandlers.length; i++) {
+            if (pEventSubscriptionId === eventHandlers[i][3]) {
+                eventHandlers.splice(i, 1)
+                return
+            }
+        }
+    }
+
+    function raiseEvent(eventType, event) {
+        for (var i = 0; i < eventHandlers.length; i++) {
             /* We will execute all the functions listening to this event type. */
 
-      if (eventHandlers[i][0] === eventType) {
-        let handler = eventHandlers[i][1]
-        let extraData = eventHandlers[i][2]
+            if (eventHandlers[i][0] === eventType) {
+                let handler = eventHandlers[i][1]
+                let extraData = eventHandlers[i][2]
 
-        handler(event, extraData)
-      }
+                handler(event, extraData)
+            }
+        }
     }
-  }
 }

EventsServerClient.js

@@ -1,215 +1,215 @@
 
-function newEventsServerClient (host, port, hostName) {
-  /* Web Sockets Connection */
+function newEventsServerClient(host, port, hostName) {
+    /* Web Sockets Connection */
 
-  const MODULE_NAME = 'System Event Handler'
-  const ERROR_LOG = true
-  const INFO_LOG = true
-  const logger = newWebDebugLog()
-  logger.fileName = MODULE_NAME
+    const MODULE_NAME = 'System Event Handler'
+    const ERROR_LOG = true
+    const INFO_LOG = true
+    const logger = newWebDebugLog()
+    logger.fileName = MODULE_NAME
 
-  if (host === '' || host === undefined) { host = 'localhost' }
-  if (port === '' || port === undefined) { port = '8081' }
+    if (host === '' || host === undefined) { host = 'localhost' }
+    if (port === '' || port === undefined) { port = '8081' }
 
-  const WEB_SOCKETS_URL = 'ws://' + host + ':' + port + ''
-  let WEB_SOCKETS_CONNECTION
+    const WEB_SOCKETS_URL = 'ws://' + host + ':' + port + ''
+    let WEB_SOCKETS_CONNECTION
 
-  let thisObject = {
-    isConnected: isConnected,
-    initialize: initialize,
-    physics: physics,
-    createEventHandler: createEventHandler,
-    deleteEventHandler: deleteEventHandler,
-    listenToEvent: listenToEvent,
-    stopListening: stopListening,
-    raiseEvent: raiseEvent
-  }
-
-  let eventListeners = new Map()
-  let responseWaiters = new Map()
-  let commandsWaitingConfirmation = new Map()
-  let commandsSentByTimestamp = new Map()
-  let nonce = 0
-
-  return thisObject
-
-  function initialize (callBackFunction) {
-    setuptWebSockets(callBackFunction)
-  }
-
-  function isConnected () {
-    if (WEB_SOCKETS_CONNECTION.readyState === 1) {
-      return true
-    } else {
-      return false
-    }
-  }
-
-  function sendCommand (command, responseCallBack, eventsCallBack) {
-    if (command.action === 'listenToEvent') {
-      let key
-      if (command.callerId !== undefined) {
-        key = command.eventHandlerName + '-' + command.eventType + '-' + command.callerId
-      } else {
-        key = command.eventHandlerName + '-' + command.eventType
-      }
-      eventListeners.set(key, eventsCallBack)
-    }
-    if (command.callerId && responseCallBack) {
-      responseWaiters.set(command.callerId, responseCallBack)
+    let thisObject = {
+        isConnected: isConnected,
+        initialize: initialize,
+        physics: physics,
+        createEventHandler: createEventHandler,
+        deleteEventHandler: deleteEventHandler,
+        listenToEvent: listenToEvent,
+        stopListening: stopListening,
+        raiseEvent: raiseEvent
     }
 
-    sendToWebSocketServer(command)
-  }
+    let eventListeners = new Map()
+    let responseWaiters = new Map()
+    let commandsWaitingConfirmation = new Map()
+    let commandsSentByTimestamp = new Map()
+    let nonce = 0
 
-  function sendToWebSocketServer (command) {
-    nonce++
-    let stringNonce = nonce.toString()
-    let timestamp = (new Date()).valueOf()
-    commandsWaitingConfirmation.set(stringNonce, command)
-    commandsSentByTimestamp.set(stringNonce, timestamp)
+    return thisObject
 
-    let messageToWebSocketServer = 'Web Browser' + '|*|' + stringNonce + '|*|' + JSON.stringify(command)
-
-    if (WEB_SOCKETS_CONNECTION.readyState === 1) {
-      WEB_SOCKETS_CONNECTION.send(messageToWebSocketServer)
-    } else {
-      console.log('WebSocket message could not be sent because the connection was not ready. Will retry soon. Message = ' + JSON.stringify(command))
+    function initialize(callBackFunction) {
+        setuptWebSockets(callBackFunction)
     }
-  }
 
-  function createEventHandler (eventHandlerName, callerId, responseCallBack) {
-    let eventCommand = {
-      action: 'createEventHandler',
-      eventHandlerName: eventHandlerName,
-      callerId: callerId
+    function isConnected() {
+        if (WEB_SOCKETS_CONNECTION.readyState === 1) {
+            return true
+        } else {
+            return false
+        }
     }
-    sendCommand(eventCommand, responseCallBack)
-  }
 
-  function deleteEventHandler (eventHandlerName, callerId, responseCallBack) {
-    let eventCommand = {
-      action: 'deleteEventHandler',
-      eventHandlerName: eventHandlerName,
-      callerId: callerId
-    }
-    sendCommand(eventCommand, responseCallBack)
-  }
-
-  function listenToEvent (eventHandlerName, eventType, extraData, callerId, responseCallBack, eventsCallBack) {
-    let eventCommand = {
-      action: 'listenToEvent',
-      eventHandlerName: eventHandlerName,
-      eventType: eventType,
-      extraData: extraData,
-      callerId: callerId
-    }
-    sendCommand(eventCommand, responseCallBack, eventsCallBack)
-  }
-
-  function stopListening (eventHandlerName, eventSubscriptionId, callerId, responseCallBack) {
-    let eventCommand = {
-      action: 'stopListening',
-      eventHandlerName: eventHandlerName,
-      eventSubscriptionId: eventSubscriptionId,
-      callerId: callerId
-    }
-    sendCommand(eventCommand, responseCallBack)
-  }
-
-  function raiseEvent (eventHandlerName, eventType, event, callerId, responseCallBack) {
-    let eventCommand = {
-      action: 'raiseEvent',
-      eventHandlerName: eventHandlerName,
-      eventType: eventType,
-      event: event,
-      callerId: callerId
-    }
-    sendCommand(eventCommand, responseCallBack)
-  }
-
-  function retryCommandsPhysics () {
-    commandsSentByTimestamp.forEach(checkTimestamp)
-
-    function checkTimestamp (timestamp, nonce) {
-      const MILISECONDS_TO_WAIT_FOR_RETRYING_A_COMMAND = 10000
-      let now = (new Date()).valueOf()
-
-      if ((now - timestamp) > MILISECONDS_TO_WAIT_FOR_RETRYING_A_COMMAND) {
-        let command = commandsWaitingConfirmation.get(nonce)
-        commandsWaitingConfirmation.delete(nonce)
-        commandsSentByTimestamp.delete(nonce)
+    function sendCommand(command, responseCallBack, eventsCallBack) {
+        if (command.action === 'listenToEvent') {
+            let key
+            if (command.callerId !== undefined) {
+                key = command.eventHandlerName + '-' + command.eventType + '-' + command.callerId
+            } else {
+                key = command.eventHandlerName + '-' + command.eventType
+            }
+            eventListeners.set(key, eventsCallBack)
+        }
+        if (command.callerId && responseCallBack) {
+            responseWaiters.set(command.callerId, responseCallBack)
+        }
 
         sendToWebSocketServer(command)
-      }
-    }
-  }
-
-  function physics () {
-    if (WEB_SOCKETS_CONNECTION !== undefined) {
-      if (WEB_SOCKETS_CONNECTION.readyState === 3) { // Connection closed. May happen after computer goes to sleep.
-        setuptWebSockets(onOpen)
-        function onOpen () {
-          if (INFO_LOG === true) { logger.write('[INFO] setuptWebSockets -> Found Web Sockets Connection Closed. Reconnected to WebSockets Server.') }
-        }
-      }
     }
 
-    if (thisObject.isConnected() !== true) {
-      canvas.cockpitSpace.setStatus('Connecting to Superalgos Backend at ' + hostName + ' Network Node. Please wait until the connection is established.', 100, canvas.cockpitSpace.statusTypes.WARNING)
-    } else {
-      retryCommandsPhysics()
+    function sendToWebSocketServer(command) {
+        nonce++
+        let stringNonce = nonce.toString()
+        let timestamp = (new Date()).valueOf()
+        commandsWaitingConfirmation.set(stringNonce, command)
+        commandsSentByTimestamp.set(stringNonce, timestamp)
+
+        let messageToWebSocketServer = 'Web Browser' + '|*|' + stringNonce + '|*|' + JSON.stringify(command)
+
+        if (WEB_SOCKETS_CONNECTION.readyState === 1) {
+            WEB_SOCKETS_CONNECTION.send(messageToWebSocketServer)
+        } else {
+            console.log('WebSocket message could not be sent because the connection was not ready. Will retry soon. Message = ' + JSON.stringify(command))
+        }
     }
 
-    DEBUG.variable4 = 'Commands Waiting For Confirmation from WS Server: ' + commandsWaitingConfirmation.size
-  }
-
-  function setuptWebSockets (callBackFunction) {
-    try {
-      WEB_SOCKETS_CONNECTION = new WebSocket(WEB_SOCKETS_URL)
-      WEB_SOCKETS_CONNECTION.onerror = error => {
-        console.log('WebSocket error:' + JSON.stringify(error))
-      }
-      WEB_SOCKETS_CONNECTION.onopen = () => {
-        if (callBackFunction !== undefined) {
-          callBackFunction()
+    function createEventHandler(eventHandlerName, callerId, responseCallBack) {
+        let eventCommand = {
+            action: 'createEventHandler',
+            eventHandlerName: eventHandlerName,
+            callerId: callerId
+        }
+        sendCommand(eventCommand, responseCallBack)
+    }
+
+    function deleteEventHandler(eventHandlerName, callerId, responseCallBack) {
+        let eventCommand = {
+            action: 'deleteEventHandler',
+            eventHandlerName: eventHandlerName,
+            callerId: callerId
+        }
+        sendCommand(eventCommand, responseCallBack)
+    }
+
+    function listenToEvent(eventHandlerName, eventType, extraData, callerId, responseCallBack, eventsCallBack) {
+        let eventCommand = {
+            action: 'listenToEvent',
+            eventHandlerName: eventHandlerName,
+            eventType: eventType,
+            extraData: extraData,
+            callerId: callerId
+        }
+        sendCommand(eventCommand, responseCallBack, eventsCallBack)
+    }
+
+    function stopListening(eventHandlerName, eventSubscriptionId, callerId, responseCallBack) {
+        let eventCommand = {
+            action: 'stopListening',
+            eventHandlerName: eventHandlerName,
+            eventSubscriptionId: eventSubscriptionId,
+            callerId: callerId
+        }
+        sendCommand(eventCommand, responseCallBack)
+    }
+
+    function raiseEvent(eventHandlerName, eventType, event, callerId, responseCallBack) {
+        let eventCommand = {
+            action: 'raiseEvent',
+            eventHandlerName: eventHandlerName,
+            eventType: eventType,
+            event: event,
+            callerId: callerId
+        }
+        sendCommand(eventCommand, responseCallBack)
+    }
+
+    function retryCommandsPhysics() {
+        commandsSentByTimestamp.forEach(checkTimestamp)
+
+        function checkTimestamp(timestamp, nonce) {
+            const MILISECONDS_TO_WAIT_FOR_RETRYING_A_COMMAND = 10000
+            let now = (new Date()).valueOf()
+
+            if ((now - timestamp) > MILISECONDS_TO_WAIT_FOR_RETRYING_A_COMMAND) {
+                let command = commandsWaitingConfirmation.get(nonce)
+                commandsWaitingConfirmation.delete(nonce)
+                commandsSentByTimestamp.delete(nonce)
+
+                sendToWebSocketServer(command)
+            }
+        }
+    }
+
+    function physics() {
+        if (WEB_SOCKETS_CONNECTION !== undefined) {
+            if (WEB_SOCKETS_CONNECTION.readyState === 3) { // Connection closed. May happen after computer goes to sleep.
+                setuptWebSockets(onOpen)
+                function onOpen() {
+                    if (INFO_LOG === true) { logger.write('[INFO] setuptWebSockets -> Found Web Sockets Connection Closed. Reconnected to WebSockets Server.') }
+                }
+            }
+        }
+
+        if (thisObject.isConnected() !== true) {
+            canvas.cockpitSpace.setStatus('Connecting to Superalgos Backend at ' + hostName + ' Network Node. Please wait until the connection is established.', 100, canvas.cockpitSpace.statusTypes.WARNING)
+        } else {
+            retryCommandsPhysics()
+        }
+
+        DEBUG.variable4 = 'Commands Waiting For Confirmation from WS Server: ' + commandsWaitingConfirmation.size
+    }
+
+    function setuptWebSockets(callBackFunction) {
+        try {
+            WEB_SOCKETS_CONNECTION = new WebSocket(WEB_SOCKETS_URL)
+            WEB_SOCKETS_CONNECTION.onerror = error => {
+                console.log('WebSocket error:' + JSON.stringify(error))
+            }
+            WEB_SOCKETS_CONNECTION.onopen = () => {
+                if (callBackFunction !== undefined) {
+                    callBackFunction()
+                }
+            }
+            WEB_SOCKETS_CONNECTION.onmessage = e => {
+                // console.log('Websoked Message Received: ' + e.data)
+
+                let message = JSON.parse(e.data)
+
+                if (message.action === 'Event Raised') {
+                    let key
+                    if (message.callerId !== undefined) {
+                        key = message.eventHandlerName + '-' + message.eventType + '-' + message.callerId
+                    } else {
+                        key = message.eventHandlerName + '-' + message.eventType
+                    }
+                    let handler = eventListeners.get(key)
+                    if (handler) {
+                        handler(message)
+                    }
+                    return
+                }
+
+                if (message.action === 'Event Server Response') {
+                    let handler = responseWaiters.get(message.callerId)
+                    if (handler) {
+                        handler(message)
+                    }
+                    return
+                }
+
+                if (message.action === 'Acknowledge') {
+                    commandsWaitingConfirmation.delete(message.nonce)
+                    commandsSentByTimestamp.delete(message.nonce)
+                    return
+                }
+            }
+        } catch (err) {
+            if (ERROR_LOG === true) { logger.write('[ERROR] setuptWebSockets -> err = ' + err.stack) }
         }
-      }
-      WEB_SOCKETS_CONNECTION.onmessage = e => {
-        // console.log('Websoked Message Received: ' + e.data)
-
-        let message = JSON.parse(e.data)
-
-        if (message.action === 'Event Raised') {
-          let key
-          if (message.callerId !== undefined) {
-            key = message.eventHandlerName + '-' + message.eventType + '-' + message.callerId
-          } else {
-            key = message.eventHandlerName + '-' + message.eventType
-          }
-          let handler = eventListeners.get(key)
-          if (handler) {
-            handler(message)
-          }
-          return
-        }
-
-        if (message.action === 'Event Server Response') {
-          let handler = responseWaiters.get(message.callerId)
-          if (handler) {
-            handler(message)
-          }
-          return
-        }
-
-        if (message.action === 'Acknowledge') {
-          commandsWaitingConfirmation.delete(message.nonce)
-          commandsSentByTimestamp.delete(message.nonce)
-          return
-        }
-      }
-    } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] setuptWebSockets -> err = ' + err.stack) }
     }
-  }
 }

FloatingSpace/BusyProgressBar.js

@@ -1,72 +1,72 @@
 
-function newBusyProgressBar () {
-  const MODULE_NAME = 'Circular Progress Bar'
+function newBusyProgressBar() {
+    const MODULE_NAME = 'Circular Progress Bar'
 
-  let thisObject = {
-    container: undefined,
-    isDeployed: undefined,
-    visible: undefined,
-    physics: physics,
-    draw: draw,
-    finalize: finalize,
-    initialize: initialize
-  }
-
-  let position
-  let addRadius
-
-  let eventSubscriptionHeartbeat
-
-  return thisObject
-
-  function finalize () {
-    thisObject.payload = undefined
-    thisObject.fitFunction = undefined
-  }
-
-  function initialize (pPosition) {
-    position = pPosition
-
-    addRadius = 0
-  }
-
-  function physics () {
-    addRadius = addRadius + 20
-  }
-
-  function draw () {
-    if (thisObject.visible !== true) { return }
-
-    let visiblePosition = {
-      x: position.x,
-      y: position.y
+    let thisObject = {
+        container: undefined,
+        isDeployed: undefined,
+        visible: undefined,
+        physics: physics,
+        draw: draw,
+        finalize: finalize,
+        initialize: initialize
     }
 
-    visiblePosition = thisObject.fitFunction(visiblePosition)
+    let position
+    let addRadius
 
-    const RADIUS = 10 + addRadius
-    let OPACITY = 1
+    let eventSubscriptionHeartbeat
 
-    let initialAngle = 0
-    let finalAngle = Math.PI * 2
+    return thisObject
 
-    browserCanvasContext.beginPath()
+    function finalize() {
+        thisObject.payload = undefined
+        thisObject.fitFunction = undefined
+    }
 
-    browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, RADIUS, initialAngle, finalAngle, false)
-    browserCanvasContext.closePath()
+    function initialize(pPosition) {
+        position = pPosition
 
-    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', 1)'
+        addRadius = 0
+    }
 
-    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GOLDEN_ORANGE + ', ' + OPACITY * 2 + ')'
-    browserCanvasContext.lineWidth = 15
-    browserCanvasContext.setLineDash([3, 4])
+    function physics() {
+        addRadius = addRadius + 20
+    }
 
-    browserCanvasContext.stroke()
+    function draw() {
+        if (thisObject.visible !== true) { return }
 
-    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + OPACITY + ')'
-    browserCanvasContext.lineWidth = 10
-    browserCanvasContext.setLineDash([3, 4])
-    browserCanvasContext.stroke()
-  }
+        let visiblePosition = {
+            x: position.x,
+            y: position.y
+        }
+
+        visiblePosition = thisObject.fitFunction(visiblePosition)
+
+        const RADIUS = 10 + addRadius
+        let OPACITY = 1
+
+        let initialAngle = 0
+        let finalAngle = Math.PI * 2
+
+        browserCanvasContext.beginPath()
+
+        browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, RADIUS, initialAngle, finalAngle, false)
+        browserCanvasContext.closePath()
+
+        browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', 1)'
+
+        browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GOLDEN_ORANGE + ', ' + OPACITY * 2 + ')'
+        browserCanvasContext.lineWidth = 15
+        browserCanvasContext.setLineDash([3, 4])
+
+        browserCanvasContext.stroke()
+
+        browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + OPACITY + ')'
+        browserCanvasContext.lineWidth = 10
+        browserCanvasContext.setLineDash([3, 4])
+        browserCanvasContext.stroke()
+    }
 }
 

FloatingSpace/CircularMenu.js

@@ -1,224 +1,224 @@
 
-function newCircularMenu () {
-  const MODULE_NAME = 'Circular Menu'
+function newCircularMenu() {
+    const MODULE_NAME = 'Circular Menu'
 
-  let thisObject = {
-    container: undefined,
-    isDeployed: undefined,
-    internalClick: internalClick,
-    physics: physics,
-    invisiblePhysics: invisiblePhysics,
-    drawBackground: drawBackground,
-    drawForeground: drawForeground,
-    getContainer: getContainer,
-    finalize: finalize,
-    initialize: initialize
-  }
-
-  thisObject.container = newContainer()
-  thisObject.container.initialize(MODULE_NAME, 'Circle')
-  thisObject.container.isClickeable = false
-  thisObject.container.isDraggeable = false
-  thisObject.container.frame.radius = 0
-  thisObject.container.frame.position.x = 0
-  thisObject.container.frame.position.y = 0
-
-  let menuItems = []
-
-  let selfFocusEventSubscriptionId
-  let selfNotFocuskEventSubscriptionId
-
-  return thisObject
-
-  function finalize () {
-    thisObject.container.eventHandler.stopListening(selfFocusEventSubscriptionId)
-    thisObject.container.eventHandler.stopListening(selfNotFocuskEventSubscriptionId)
-
-    thisObject.container.finalize()
-    thisObject.container = undefined
-
-    for (let i = 0; i < menuItems.length; i++) {
-      let menuItem = menuItems[i]
-      menuItem.finalize()
+    let thisObject = {
+        container: undefined,
+        isDeployed: undefined,
+        internalClick: internalClick,
+        physics: physics,
+        invisiblePhysics: invisiblePhysics,
+        drawBackground: drawBackground,
+        drawForeground: drawForeground,
+        getContainer: getContainer,
+        finalize: finalize,
+        initialize: initialize
     }
 
-    menuItems = undefined
-  }
+    thisObject.container = newContainer()
+    thisObject.container.initialize(MODULE_NAME, 'Circle')
+    thisObject.container.isClickeable = false
+    thisObject.container.isDraggeable = false
+    thisObject.container.frame.radius = 0
+    thisObject.container.frame.position.x = 0
+    thisObject.container.frame.position.y = 0
 
-  function initialize (menuItemsInitialValues, payload) {
-/* Create the array of Menu Items */
+    let menuItems = []
 
-    let iconAndTextArray = []
-    let iconOnlyArray
-    let ringsArray = [[], [], [], []]
+    let selfFocusEventSubscriptionId
+    let selfNotFocuskEventSubscriptionId
 
-    for (let i = 0; i < menuItemsInitialValues.length; i++) {
-      let menuItem = newCircularMenuItem()
-      let menuItemInitialValue = menuItemsInitialValues[i]
+    return thisObject
 
-      menuItem.action = menuItemInitialValue.action
-      menuItem.actionFunction = menuItemInitialValue.actionFunction
-      menuItem.actionStatus = menuItemInitialValue.actionStatus
-      menuItem.label = menuItemInitialValue.label
-      menuItem.workingLabel = menuItemInitialValue.workingLabel
-      menuItem.workDoneLabel = menuItemInitialValue.workDoneLabel
-      menuItem.workFailedLabel = menuItemInitialValue.workFailedLabel
-      menuItem.secondaryAction = menuItemInitialValue.secondaryAction
-      menuItem.secondaryLabel = menuItemInitialValue.secondaryLabel
-      menuItem.secondaryWorkingLabel = menuItemInitialValue.secondaryWorkingLabel
-      menuItem.secondaryWorkDoneLabel = menuItemInitialValue.secondaryWorkDoneLabel
-      menuItem.secondaryWorkFailedLabel = menuItemInitialValue.secondaryWorkFailedLabel
-      menuItem.secondaryIcon = menuItemInitialValue.secondaryIcon
-      menuItem.visible = menuItemInitialValue.visible
-      menuItem.iconPathOn = menuItemInitialValue.iconPathOn
-      menuItem.iconPathOff = menuItemInitialValue.iconPathOff
-      menuItem.rawRadius = menuItemInitialValue.rawRadius
-      menuItem.targetRadius = menuItemInitialValue.label
-      menuItem.currentRadius = menuItemInitialValue.currentRadius
-      menuItem.angle = menuItemInitialValue.angle
-      menuItem.currentStatus = menuItemInitialValue.currentStatus
-      menuItem.relatedUiObject = menuItemInitialValue.relatedUiObject
-      menuItem.dontShowAtFullscreen = menuItemInitialValue.dontShowAtFullscreen
-      menuItem.askConfirmation = menuItemInitialValue.askConfirmation
-      menuItem.confirmationLabel = menuItemInitialValue.confirmationLabel
-      menuItem.disableIfPropertyIsDefined = menuItemInitialValue.disableIfPropertyIsDefined
-      menuItem.propertyToCheckFor = menuItemInitialValue.propertyToCheckFor
-      menuItem.ring = menuItemInitialValue.ring
-      menuItem.icons = menuItemInitialValue.icons
+    function finalize() {
+        thisObject.container.eventHandler.stopListening(selfFocusEventSubscriptionId)
+        thisObject.container.eventHandler.stopListening(selfNotFocuskEventSubscriptionId)
 
-      if (menuItem.label === undefined) {
-        menuItem.type = 'Icon Only'
+        thisObject.container.finalize()
+        thisObject.container = undefined
 
-        if (menuItem.ring === undefined) {
-          menutItem.ring = 1
+        for (let i = 0; i < menuItems.length; i++) {
+            let menuItem = menuItems[i]
+            menuItem.finalize()
         }
-        iconOnlyArray = ringsArray[menuItem.ring - 1]
-        iconOnlyArray.push(menuItem)
-      } else {
-        menuItem.type = 'Icon & Text'
-        iconAndTextArray.push(menuItem)
-      }
 
-      menuItem.initialize(payload)
-      menuItem.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true)
-      menuItems.push(menuItem)
+        menuItems = undefined
     }
 
-    /* There are 4 possible rings of icons, we will go through each of them here. */
-    let amplitudeArray = [80, 50, 40, 80]
-    let initialAngleArray = [220, 205, 200, 180]
-    for (let j = 1; j < ringsArray.length + 1; j++) {
-      let iconOnlyArray = ringsArray[j - 1]
-      /* Here we calculate the angles for each menu item, and then apply it if it was not previously defined. */
-      let amplitude = amplitudeArray[j - 1]
-      let initialAngle = initialAngleArray[j - 1]
-      let step = amplitude / (iconOnlyArray.length - 1)
-      if (iconOnlyArray.length === 1) {
-        step = 0
-      }
+    function initialize(menuItemsInitialValues, payload) {
+        /* Create the array of Menu Items */
 
-      for (let i = 0; i < iconOnlyArray.length; i++) {
-        let menuItem = iconOnlyArray[i]
-        let angle = initialAngle - step * i
-        if (menuItem.angle === undefined) {
-          menuItem.angle = angle
+        let iconAndTextArray = []
+        let iconOnlyArray
+        let ringsArray = [[], [], [], []]
+
+        for (let i = 0; i < menuItemsInitialValues.length; i++) {
+            let menuItem = newCircularMenuItem()
+            let menuItemInitialValue = menuItemsInitialValues[i]
+
+            menuItem.action = menuItemInitialValue.action
+            menuItem.actionFunction = menuItemInitialValue.actionFunction
+            menuItem.actionStatus = menuItemInitialValue.actionStatus
+            menuItem.label = menuItemInitialValue.label
+            menuItem.workingLabel = menuItemInitialValue.workingLabel
+            menuItem.workDoneLabel = menuItemInitialValue.workDoneLabel
+            menuItem.workFailedLabel = menuItemInitialValue.workFailedLabel
+            menuItem.secondaryAction = menuItemInitialValue.secondaryAction
+            menuItem.secondaryLabel = menuItemInitialValue.secondaryLabel
+            menuItem.secondaryWorkingLabel = menuItemInitialValue.secondaryWorkingLabel
+            menuItem.secondaryWorkDoneLabel = menuItemInitialValue.secondaryWorkDoneLabel
+            menuItem.secondaryWorkFailedLabel = menuItemInitialValue.secondaryWorkFailedLabel
+            menuItem.secondaryIcon = menuItemInitialValue.secondaryIcon
+            menuItem.visible = menuItemInitialValue.visible
+            menuItem.iconPathOn = menuItemInitialValue.iconPathOn
+            menuItem.iconPathOff = menuItemInitialValue.iconPathOff
+            menuItem.rawRadius = menuItemInitialValue.rawRadius
+            menuItem.targetRadius = menuItemInitialValue.label
+            menuItem.currentRadius = menuItemInitialValue.currentRadius
+            menuItem.angle = menuItemInitialValue.angle
+            menuItem.currentStatus = menuItemInitialValue.currentStatus
+            menuItem.relatedUiObject = menuItemInitialValue.relatedUiObject
+            menuItem.dontShowAtFullscreen = menuItemInitialValue.dontShowAtFullscreen
+            menuItem.askConfirmation = menuItemInitialValue.askConfirmation
+            menuItem.confirmationLabel = menuItemInitialValue.confirmationLabel
+            menuItem.disableIfPropertyIsDefined = menuItemInitialValue.disableIfPropertyIsDefined
+            menuItem.propertyToCheckFor = menuItemInitialValue.propertyToCheckFor
+            menuItem.ring = menuItemInitialValue.ring
+            menuItem.icons = menuItemInitialValue.icons
+
+            if (menuItem.label === undefined) {
+                menuItem.type = 'Icon Only'
+
+                if (menuItem.ring === undefined) {
+                    menutItem.ring = 1
+                }
+                iconOnlyArray = ringsArray[menuItem.ring - 1]
+                iconOnlyArray.push(menuItem)
+            } else {
+                menuItem.type = 'Icon & Text'
+                iconAndTextArray.push(menuItem)
+            }
+
+            menuItem.initialize(payload)
+            menuItem.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true)
+            menuItems.push(menuItem)
         }
-      }
-    }
-    /* Text and Icon */
-    let amplitude = 140
-    let initialAngle = -70
-    step = amplitude / 7
-    let currentItem = (7 - iconAndTextArray.length) / 2 + 1
-    for (let i = 0; i < iconAndTextArray.length; i++) {
-      let menuItem = iconAndTextArray[i]
-      let angle = initialAngle + step * (currentItem - 0.5)
-      currentItem++
-      if (menuItem.angle === undefined) {
-        menuItem.angle = angle
-      }
-    }
 
-    iconOnlyArray = undefined
-    iconAndTextArray = undefined
+        /* There are 4 possible rings of icons, we will go through each of them here. */
+        let amplitudeArray = [80, 50, 40, 80]
+        let initialAngleArray = [220, 205, 200, 180]
+        for (let j = 1; j < ringsArray.length + 1; j++) {
+            let iconOnlyArray = ringsArray[j - 1]
+            /* Here we calculate the angles for each menu item, and then apply it if it was not previously defined. */
+            let amplitude = amplitudeArray[j - 1]
+            let initialAngle = initialAngleArray[j - 1]
+            let step = amplitude / (iconOnlyArray.length - 1)
+            if (iconOnlyArray.length === 1) {
+                step = 0
+            }
 
-    /* Listen to events */
-    selfFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onFocus', onFocus)
-    selfNotFocuskEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus)
-  }
-
-  function getContainer (point) {
-    let container
-
-    if (thisObject.isDeployed === true) {
-      for (let i = 0; i < menuItems.length; i++) {
-        let menuItem = menuItems[i]
-        if (menuItem.visible === true) {
-          container = menuItem.getContainer(point)
+            for (let i = 0; i < iconOnlyArray.length; i++) {
+                let menuItem = iconOnlyArray[i]
+                let angle = initialAngle - step * i
+                if (menuItem.angle === undefined) {
+                    menuItem.angle = angle
+                }
+            }
         }
-        if (container !== undefined) { return container }
-      }
-    }
-  }
-
-  function internalClick (action) {
-    for (let i = 0; i < menuItems.length; i++) {
-      let menuItem = menuItems[i]
-      if (menuItem.visible === true) {
-        if (menuItem.nextAction === action) {
-          menuItem.internalClick()
+        /* Text and Icon */
+        let amplitude = 140
+        let initialAngle = -70
+        step = amplitude / 7
+        let currentItem = (7 - iconAndTextArray.length) / 2 + 1
+        for (let i = 0; i < iconAndTextArray.length; i++) {
+            let menuItem = iconAndTextArray[i]
+            let angle = initialAngle + step * (currentItem - 0.5)
+            currentItem++
+            if (menuItem.angle === undefined) {
+                menuItem.angle = angle
+            }
         }
-      }
-    }
-  }
 
-  function invisiblePhysics () {
-    for (let i = 0; i < menuItems.length; i++) {
-      let menuItem = menuItems[i]
-      menuItem.invisiblePhysics()
-    }
-  }
+        iconOnlyArray = undefined
+        iconAndTextArray = undefined
 
-  function physics () {
-    for (let i = 0; i < menuItems.length; i++) {
-      let menuItem = menuItems[i]
-      menuItem.physics()
+        /* Listen to events */
+        selfFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onFocus', onFocus)
+        selfNotFocuskEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus)
     }
-  }
 
-  function onFocus () {
-    for (let i = 0; i < menuItems.length; i++) {
-      let menuItem = menuItems[i]
-      menuItem.targetRadius = menuItem.rawRadius * 1.5
-      menuItem.isDeployed = true
-    }
-    thisObject.isDeployed = true
-  }
+    function getContainer(point) {
+        let container
 
-  function onNotFocus () {
-    for (let i = 0; i < menuItems.length; i++) {
-      let menuItem = menuItems[i]
-      menuItem.targetRadius = menuItem.rawRadius * 0 - i * 1.5
-      menuItem.isDeployed = false
+        if (thisObject.isDeployed === true) {
+            for (let i = 0; i < menuItems.length; i++) {
+                let menuItem = menuItems[i]
+                if (menuItem.visible === true) {
+                    container = menuItem.getContainer(point)
+                }
+                if (container !== undefined) { return container }
+            }
+        }
     }
-    thisObject.isDeployed = false
-  }
 
-  function drawBackground (pFloatingObject) {
-    for (let i = 0; i < menuItems.length; i++) {
-      let menuItem = menuItems[i]
-      if (menuItem.visible === true) {
-        menuItem.drawBackground()
-      }
+    function internalClick(action) {
+        for (let i = 0; i < menuItems.length; i++) {
+            let menuItem = menuItems[i]
+            if (menuItem.visible === true) {
+                if (menuItem.nextAction === action) {
+                    menuItem.internalClick()
+                }
+            }
+        }
     }
-  }
 
-  function drawForeground (pFloatingObject) {
-    for (let i = 0; i < menuItems.length; i++) {
-      let menuItem = menuItems[i]
-      if (menuItem.visible === true) {
-        menuItem.drawForeground()
-      }
+    function invisiblePhysics() {
+        for (let i = 0; i < menuItems.length; i++) {
+            let menuItem = menuItems[i]
+            menuItem.invisiblePhysics()
+        }
+    }
+
+    function physics() {
+        for (let i = 0; i < menuItems.length; i++) {
+            let menuItem = menuItems[i]
+            menuItem.physics()
+        }
+    }
+
+    function onFocus() {
+        for (let i = 0; i < menuItems.length; i++) {
+            let menuItem = menuItems[i]
+            menuItem.targetRadius = menuItem.rawRadius * 1.5
+            menuItem.isDeployed = true
+        }
+        thisObject.isDeployed = true
+    }
+
+    function onNotFocus() {
+        for (let i = 0; i < menuItems.length; i++) {
+            let menuItem = menuItems[i]
+            menuItem.targetRadius = menuItem.rawRadius * 0 - i * 1.5
+            menuItem.isDeployed = false
+        }
+        thisObject.isDeployed = false
+    }
+
+    function drawBackground(pFloatingObject) {
+        for (let i = 0; i < menuItems.length; i++) {
+            let menuItem = menuItems[i]
+            if (menuItem.visible === true) {
+                menuItem.drawBackground()
+            }
+        }
+    }
+
+    function drawForeground(pFloatingObject) {
+        for (let i = 0; i < menuItems.length; i++) {
+            let menuItem = menuItems[i]
+            if (menuItem.visible === true) {
+                menuItem.drawForeground()
+            }
+        }
     }
-  }
 }

FloatingSpace/CircularMenuItem.js

@@ -1,469 +1,469 @@
 
-function newCircularMenuItem () {
-  const MODULE_NAME = 'Circular Menu Iem'
+function newCircularMenuItem() {
+    const MODULE_NAME = 'Circular Menu Iem'
 
-  let thisObject = {
-    type: undefined,
-    isDeployed: undefined,
-    askConfirmation: undefined,
-    confirmationLabel: undefined,
-    iconOn: undefined,
-    iconOff: undefined,
-    icons: undefined,
-    currentIcon: undefined,
-    disableIfPropertyIsDefined: undefined,
-    propertyToCheckFor: undefined,
-    action: undefined,
-    actionFunction: undefined,
-    actionStatus: undefined,
-    label: undefined,
-    workingLabel: undefined,
-    workDoneLabel: undefined,
-    workFailedLabel: undefined,
-    secondaryAction: undefined,
-    secondaryLabel: undefined,
-    secondaryWorkingLabel: undefined,
-    secondaryWorkDoneLabel: undefined,
-    secondaryWorkFailedLabel: undefined,
-    secondaryIcon: undefined,
-    nextAction: undefined,
-    visible: false,
-    iconPathOn: undefined,
-    iconPathOff: undefined,
-    rawRadius: undefined,
-    targetRadius: undefined,
-    currentRadius: undefined,
-    angle: undefined,
-    container: undefined,
-    payload: undefined,
-    relatedUiObject: undefined,
-    dontShowAtFullscreen: undefined,
-    isEnabled: true,
-    shorcutNumber: undefined,
-    internalClick: internalClick,
-    physics: physics,
-    invisiblePhysics: invisiblePhysics,
-    drawBackground: drawBackground,
-    drawForeground: drawForeground,
-    getContainer: getContainer,
-    finalize: finalize,
-    initialize: initialize
-  }
-
-  thisObject.container = newContainer()
-  thisObject.container.initialize(MODULE_NAME)
-  thisObject.container.isClickeable = true
-  thisObject.container.isDraggeable = false
-  thisObject.container.detectMouseOver = true
-  thisObject.container.frame.radius = 0
-  thisObject.container.frame.position.x = 0
-  thisObject.container.frame.position.y = 0
-  thisObject.container.frame.width = 0
-  thisObject.container.frame.height = 40
-
-  let isMouseOver = false
-
-  let selfMouseOverEventSubscriptionId
-  let selfMouseClickEventSubscriptionId
-  let selfMouseNotOverEventSubscriptionId
-
-  let labelToPrint = ''
-  let defaultBackgroudColor = UI_COLOR.RED
-  let backgroundColorToUse = UI_COLOR.RED
-  let temporaryStatus = 0
-  let temporaryStatusCounter = 0
-
-  const EXTRA_MOUSE_OVER_ICON_SIZE = 6
-
-  const STATUS_NO_ACTION_TAKEN_YET = 0
-  const STATUS_PRIMARY_ACTION_WORKING = -1
-  const STATUS_SECONDARY_ACTION_WORKING = -2
-  const STATUS_PRIMARY_WORK_DONE = -3
-  const STATUS_PRIMARY_WORK_FAILED = -4
-  const STATUS_WAITING_CONFIRMATION = -5
-  const STATUS_SECONDARY_WORK_DONE = -6
-  const STATUS_SECONDARY_WORK_FAILED = -7
-
-  return thisObject
-
-  function finalize () {
-    thisObject.container.eventHandler.stopListening(selfMouseOverEventSubscriptionId)
-    thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId)
-    thisObject.container.eventHandler.stopListening(selfMouseNotOverEventSubscriptionId)
-
-    thisObject.container.finalize()
-    thisObject.container = undefined
-    thisObject.iconOn = undefined
-    thisObject.iconOff = undefined
-    thisObject.icons = undefined
-    thisObject.currentIcon = undefined
-    thisObject.payload = undefined
-    thisObject.actionFunction = undefined
-    thisObject.actionStatus = undefined
-    thisObject.disableIfPropertyIsDefined = undefined
-    thisObject.propertyToCheckFor = undefined
-  }
-
-  function initialize (pPayload) {
-    thisObject.payload = pPayload
-
-    iconPhysics()
-
-    selfMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
-    selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
-    selfMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
-
-    if (thisObject.type === 'Icon & Text') {
-      thisObject.container.frame.width = 220
-    } else {
-      thisObject.container.frame.width = 50
+    let thisObject = {
+        type: undefined,
+        isDeployed: undefined,
+        askConfirmation: undefined,
+        confirmationLabel: undefined,
+        iconOn: undefined,
+        iconOff: undefined,
+        icons: undefined,
+        currentIcon: undefined,
+        disableIfPropertyIsDefined: undefined,
+        propertyToCheckFor: undefined,
+        action: undefined,
+        actionFunction: undefined,
+        actionStatus: undefined,
+        label: undefined,
+        workingLabel: undefined,
+        workDoneLabel: undefined,
+        workFailedLabel: undefined,
+        secondaryAction: undefined,
+        secondaryLabel: undefined,
+        secondaryWorkingLabel: undefined,
+        secondaryWorkDoneLabel: undefined,
+        secondaryWorkFailedLabel: undefined,
+        secondaryIcon: undefined,
+        nextAction: undefined,
+        visible: false,
+        iconPathOn: undefined,
+        iconPathOff: undefined,
+        rawRadius: undefined,
+        targetRadius: undefined,
+        currentRadius: undefined,
+        angle: undefined,
+        container: undefined,
+        payload: undefined,
+        relatedUiObject: undefined,
+        dontShowAtFullscreen: undefined,
+        isEnabled: true,
+        shorcutNumber: undefined,
+        internalClick: internalClick,
+        physics: physics,
+        invisiblePhysics: invisiblePhysics,
+        drawBackground: drawBackground,
+        drawForeground: drawForeground,
+        getContainer: getContainer,
+        finalize: finalize,
+        initialize: initialize
     }
 
-    thisObject.nextAction = thisObject.action
-  }
+    thisObject.container = newContainer()
+    thisObject.container.initialize(MODULE_NAME)
+    thisObject.container.isClickeable = true
+    thisObject.container.isDraggeable = false
+    thisObject.container.detectMouseOver = true
+    thisObject.container.frame.radius = 0
+    thisObject.container.frame.position.x = 0
+    thisObject.container.frame.position.y = 0
+    thisObject.container.frame.width = 0
+    thisObject.container.frame.height = 40
 
-  function getContainer (point) {
-    if (thisObject.dontShowAtFullscreen === true && AT_FULL_SCREEN_MODE === true) { return }
+    let isMouseOver = false
 
-    let container
-    if (thisObject.isDeployed === true) {
-      if (thisObject.container.frame.isThisPointHere(point, true, false) === true) {
-        return thisObject.container
-      } else {
-        return undefined
-      }
-    }
-  }
+    let selfMouseOverEventSubscriptionId
+    let selfMouseClickEventSubscriptionId
+    let selfMouseNotOverEventSubscriptionId
 
-  function invisiblePhysics () {
-    temporaryStatusPhysics()
-  }
+    let labelToPrint = ''
+    let defaultBackgroudColor = UI_COLOR.RED
+    let backgroundColorToUse = UI_COLOR.RED
+    let temporaryStatus = 0
+    let temporaryStatusCounter = 0
 
-  function temporaryStatusPhysics () {
-  /* Temporary Status impacts on the label to use and the background of that label */
-    if (temporaryStatusCounter > 0) {
-      temporaryStatusCounter--
+    const EXTRA_MOUSE_OVER_ICON_SIZE = 6
+
+    const STATUS_NO_ACTION_TAKEN_YET = 0
+    const STATUS_PRIMARY_ACTION_WORKING = -1
+    const STATUS_SECONDARY_ACTION_WORKING = -2
+    const STATUS_PRIMARY_WORK_DONE = -3
+    const STATUS_PRIMARY_WORK_FAILED = -4
+    const STATUS_WAITING_CONFIRMATION = -5
+    const STATUS_SECONDARY_WORK_DONE = -6
+    const STATUS_SECONDARY_WORK_FAILED = -7
+
+    return thisObject
+
+    function finalize() {
+        thisObject.container.eventHandler.stopListening(selfMouseOverEventSubscriptionId)
+        thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId)
+        thisObject.container.eventHandler.stopListening(selfMouseNotOverEventSubscriptionId)
+
+        thisObject.container.finalize()
+        thisObject.container = undefined
+        thisObject.iconOn = undefined
+        thisObject.iconOff = undefined
+        thisObject.icons = undefined
+        thisObject.currentIcon = undefined
+        thisObject.payload = undefined
+        thisObject.actionFunction = undefined
+        thisObject.actionStatus = undefined
+        thisObject.disableIfPropertyIsDefined = undefined
+        thisObject.propertyToCheckFor = undefined
     }
 
-    if (temporaryStatusCounter === 0) {
-      temporaryStatus = STATUS_NO_ACTION_TAKEN_YET
-      labelToPrint = thisObject.label
-      backgroundColorToUse = defaultBackgroudColor
-      thisObject.nextAction = thisObject.action
-    }
-  }
+    function initialize(pPayload) {
+        thisObject.payload = pPayload
 
-  function physics () {
-    if (thisObject.dontShowAtFullscreen === true && AT_FULL_SCREEN_MODE === true) { return }
+        iconPhysics()
 
-    let INCREASE_STEP = 2 // (thisObject.targetRadius - thisObject.rawRadius) / 4
-    // if (INCREASE_STEP === 0) { INCREASE_STEP = 2 }
+        selfMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
+        selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
+        selfMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
 
-    if (Math.abs(thisObject.currentRadius - thisObject.targetRadius) >= INCREASE_STEP) {
-      if (thisObject.currentRadius < thisObject.targetRadius) {
-        thisObject.currentRadius = thisObject.currentRadius + INCREASE_STEP
-      } else {
-        thisObject.currentRadius = thisObject.currentRadius - INCREASE_STEP
-      }
-    }
-
-    let radiusGrowthFactor
-    if (thisObject.type === 'Icon Only') {
-      switch (thisObject.ring) {
-        case 1: {
-          radiusGrowthFactor = 5.5
-          break
-        }
-        case 2: {
-          radiusGrowthFactor = 4.0
-          break
-        }
-        case 3: {
-          radiusGrowthFactor = 3.0
-          break
-        }
-        case 4: {
-          radiusGrowthFactor = 2.0
-          break
-        }
-      }
-    } else {
-      radiusGrowthFactor = 4
-    }
-
-    thisObject.container.frame.position.x = thisObject.payload.floatingObject.targetRadius * radiusGrowthFactor / 7 * Math.cos(toRadians(thisObject.angle)) - thisObject.currentRadius * 1.5
-    thisObject.container.frame.position.y = thisObject.payload.floatingObject.targetRadius * radiusGrowthFactor / 7 * Math.sin(toRadians(thisObject.angle)) - thisObject.container.frame.height / 2
-
-    temporaryStatusPhysics()
-
-    /* Here we will check if we need to monitor a property that influences the status of the Menu Item. */
-    if (thisObject.disableIfPropertyIsDefined === true) {
-      if (thisObject.payload.node[thisObject.propertyToCheckFor] === undefined) {
-        /* This menu item is enabled. */
-        thisObject.isEnabled = true
-      } else {
-        /* This menu item is disabled. */
-        thisObject.isEnabled = false
-      }
-    }
-    iconPhysics()
-  }
-
-  function iconPhysics () {
-    if (
-    (
-      temporaryStatus === STATUS_PRIMARY_WORK_DONE ||
-      temporaryStatus === STATUS_SECONDARY_ACTION_WORKING ||
-      temporaryStatus === STATUS_SECONDARY_WORK_DONE ||
-      temporaryStatus === STATUS_SECONDARY_WORK_FAILED
-    ) && thisObject.secondaryAction !== undefined
-      ) {
-      thisObject.iconOn = canvas.designSpace.iconCollection.get(thisObject.secondaryIcon)
-      thisObject.iconOff = canvas.designSpace.iconCollection.get(thisObject.secondaryIcon)
-    } else {
-      if (thisObject.relatedUiObject !== undefined) {
-        thisObject.iconOn = canvas.designSpace.iconByUiObjectType.get(thisObject.relatedUiObject)
-        thisObject.iconOff = canvas.designSpace.iconByUiObjectType.get(thisObject.relatedUiObject)
-      } else {
-        if (thisObject.iconPathOn !== undefined && thisObject.iconPathOff !== undefined) {
-          thisObject.iconOn = canvas.designSpace.iconCollection.get(thisObject.iconPathOn)
-          thisObject.iconOff = canvas.designSpace.iconCollection.get(thisObject.iconPathOff)
+        if (thisObject.type === 'Icon & Text') {
+            thisObject.container.frame.width = 220
         } else {
-          thisObject.iconOn = canvas.designSpace.iconCollection.get(thisObject.icons[thisObject.actionStatus()])
-          thisObject.iconOff = canvas.designSpace.iconCollection.get(thisObject.icons[thisObject.actionStatus()])
+            thisObject.container.frame.width = 50
         }
-      }
+
+        thisObject.nextAction = thisObject.action
     }
 
-    /* Current Status might be linked to some other object status */
+    function getContainer(point) {
+        if (thisObject.dontShowAtFullscreen === true && AT_FULL_SCREEN_MODE === true) { return }
 
-    if (thisObject.actionStatus !== undefined) {
-      thisObject.currentStatus = thisObject.actionStatus()
+        let container
+        if (thisObject.isDeployed === true) {
+            if (thisObject.container.frame.isThisPointHere(point, true, false) === true) {
+                return thisObject.container
+            } else {
+                return undefined
+            }
+        }
     }
 
-    /* Current Status sets the icon to be used */
-
-    if (thisObject.currentStatus === true) {
-      thisObject.icon = thisObject.iconOn
-    } else {
-      thisObject.icon = thisObject.iconOff
-    }
-  }
-
-  function onMouseOver (point) {
-    if (thisObject.container.frame.isThisPointHere(point, true, false) === true) {
-      isMouseOver = true
-    } else {
-      isMouseOver = false
-    }
-    MENU_ITEM_ON_FOCUS = thisObject
-  }
-
-  function onMouseNotOver (point) {
-    isMouseOver = false
-    MENU_ITEM_ON_FOCUS = undefined
-  }
-
-  function internalClick () {
-    if (thisObject.shorcutNumber !== undefined) {
-      let label = thisObject.payload.node.name + ' ' + labelToPrint
-      canvas.cockpitSpace.setStatus(label, 50, canvas.cockpitSpace.statusTypes.ALL_GOOD)
+    function invisiblePhysics() {
+        temporaryStatusPhysics()
     }
 
-    onMouseClick()
-  }
+    function temporaryStatusPhysics() {
+        /* Temporary Status impacts on the label to use and the background of that label */
+        if (temporaryStatusCounter > 0) {
+            temporaryStatusCounter--
+        }
 
-  function onMouseClick () {
-    if (thisObject.isEnabled === false) { return }
-
-    if (thisObject.label === undefined) {
-  /* This is what we have in the case of menu items that are only Icons. In this situation there is no complex logic, just execute the specified action. */
-      thisObject.actionFunction(thisObject.payload, thisObject.action, thisObject.relatedUiObject)
-      return
+        if (temporaryStatusCounter === 0) {
+            temporaryStatus = STATUS_NO_ACTION_TAKEN_YET
+            labelToPrint = thisObject.label
+            backgroundColorToUse = defaultBackgroudColor
+            thisObject.nextAction = thisObject.action
+        }
     }
 
-    if (thisObject.askConfirmation !== true) { /* No confirmation is needed */
-      if (temporaryStatus === STATUS_NO_ACTION_TAKEN_YET || temporaryStatus === STATUS_PRIMARY_WORK_DONE) {
-        executeAction()
-      } // Any click out of those states is ignored
-    } else {
- /* Confirmation is needed */
+    function physics() {
+        if (thisObject.dontShowAtFullscreen === true && AT_FULL_SCREEN_MODE === true) { return }
 
-      /* The first click ask for confirmation. */
-      if (temporaryStatus === STATUS_NO_ACTION_TAKEN_YET) {
-        setStatus(thisObject.confirmationLabel, UI_COLOR.GOLDEN_ORANGE, 250, STATUS_WAITING_CONFIRMATION)
-        return
-      }
-      /* A Click during confirmation executes the pre-defined action. */
-      if (temporaryStatus === STATUS_WAITING_CONFIRMATION || temporaryStatus === STATUS_PRIMARY_WORK_DONE) {
-        executeAction()
-        if (thisObject.workDoneLabel !== undefined) {
-          setStatus(thisObject.workDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 100, STATUS_SECONDARY_WORK_DONE)
+        let INCREASE_STEP = 2 // (thisObject.targetRadius - thisObject.rawRadius) / 4
+        // if (INCREASE_STEP === 0) { INCREASE_STEP = 2 }
+
+        if (Math.abs(thisObject.currentRadius - thisObject.targetRadius) >= INCREASE_STEP) {
+            if (thisObject.currentRadius < thisObject.targetRadius) {
+                thisObject.currentRadius = thisObject.currentRadius + INCREASE_STEP
+            } else {
+                thisObject.currentRadius = thisObject.currentRadius - INCREASE_STEP
+            }
+        }
+
+        let radiusGrowthFactor
+        if (thisObject.type === 'Icon Only') {
+            switch (thisObject.ring) {
+                case 1: {
+                    radiusGrowthFactor = 5.5
+                    break
+                }
+                case 2: {
+                    radiusGrowthFactor = 4.0
+                    break
+                }
+                case 3: {
+                    radiusGrowthFactor = 3.0
+                    break
+                }
+                case 4: {
+                    radiusGrowthFactor = 2.0
+                    break
+                }
+            }
         } else {
-          setStatus('Done', UI_COLOR.PATINATED_TURQUOISE, 100, STATUS_SECONDARY_WORK_DONE)
+            radiusGrowthFactor = 4
         }
-        return
-      }
+
+        thisObject.container.frame.position.x = thisObject.payload.floatingObject.targetRadius * radiusGrowthFactor / 7 * Math.cos(toRadians(thisObject.angle)) - thisObject.currentRadius * 1.5
+        thisObject.container.frame.position.y = thisObject.payload.floatingObject.targetRadius * radiusGrowthFactor / 7 * Math.sin(toRadians(thisObject.angle)) - thisObject.container.frame.height / 2
+
+        temporaryStatusPhysics()
+
+        /* Here we will check if we need to monitor a property that influences the status of the Menu Item. */
+        if (thisObject.disableIfPropertyIsDefined === true) {
+            if (thisObject.payload.node[thisObject.propertyToCheckFor] === undefined) {
+                /* This menu item is enabled. */
+                thisObject.isEnabled = true
+            } else {
+                /* This menu item is disabled. */
+                thisObject.isEnabled = false
+            }
+        }
+        iconPhysics()
     }
 
-    function executeAction () {
-      if (temporaryStatus === STATUS_NO_ACTION_TAKEN_YET || temporaryStatus === STATUS_WAITING_CONFIRMATION) {
-        /* We need to execute the main Action */
-        /* If there is a working label defined, we use it here. */
-        if (thisObject.workingLabel !== undefined) {
-          setStatus(thisObject.workingLabel, UI_COLOR.GREY, undefined, STATUS_PRIMARY_ACTION_WORKING) // Status will not expire, will only change with a callback. Mouse Clicks will be ignored.
+    function iconPhysics() {
+        if (
+            (
+                temporaryStatus === STATUS_PRIMARY_WORK_DONE ||
+                temporaryStatus === STATUS_SECONDARY_ACTION_WORKING ||
+                temporaryStatus === STATUS_SECONDARY_WORK_DONE ||
+                temporaryStatus === STATUS_SECONDARY_WORK_FAILED
+            ) && thisObject.secondaryAction !== undefined
+        ) {
+            thisObject.iconOn = canvas.designSpace.iconCollection.get(thisObject.secondaryIcon)
+            thisObject.iconOff = canvas.designSpace.iconCollection.get(thisObject.secondaryIcon)
+        } else {
+            if (thisObject.relatedUiObject !== undefined) {
+                thisObject.iconOn = canvas.designSpace.iconByUiObjectType.get(thisObject.relatedUiObject)
+                thisObject.iconOff = canvas.designSpace.iconByUiObjectType.get(thisObject.relatedUiObject)
+            } else {
+                if (thisObject.iconPathOn !== undefined && thisObject.iconPathOff !== undefined) {
+                    thisObject.iconOn = canvas.designSpace.iconCollection.get(thisObject.iconPathOn)
+                    thisObject.iconOff = canvas.designSpace.iconCollection.get(thisObject.iconPathOff)
+                } else {
+                    thisObject.iconOn = canvas.designSpace.iconCollection.get(thisObject.icons[thisObject.actionStatus()])
+                    thisObject.iconOff = canvas.designSpace.iconCollection.get(thisObject.icons[thisObject.actionStatus()])
+                }
+            }
         }
 
-        /* Execute the action and wait for callbacks to update our statuus. */
-        thisObject.actionFunction(thisObject.payload, thisObject.action, thisObject.relatedUiObject, onPrimaryCallBack)
-        return
-      }
-      if (temporaryStatus === STATUS_PRIMARY_WORK_DONE && thisObject.secondaryAction !== undefined) {
-        /* We need to execute the secondary action. */
-        if (thisObject.secondaryWorkingLabel !== undefined) {
-          setStatus(thisObject.secondaryWorkingLabel, UI_COLOR.GREY, undefined, STATUS_SECONDARY_ACTION_WORKING) // Status will not expire, will only change with a callback. Mouse Clicks will be ignored.
+        /* Current Status might be linked to some other object status */
+
+        if (thisObject.actionStatus !== undefined) {
+            thisObject.currentStatus = thisObject.actionStatus()
         }
 
-        /* Execute the action and wait for callbacks to update our statuus. */
-        thisObject.actionFunction(thisObject.payload, thisObject.secondaryAction, thisObject.relatedUiObject, onSecondaryCallBack)
-        return
-      }
+        /* Current Status sets the icon to be used */
 
-      function onPrimaryCallBack (err, event) {
-        /* While the primary action is being executed some event might have happen. Following we process the ones we can */
+        if (thisObject.currentStatus === true) {
+            thisObject.icon = thisObject.iconOn
+        } else {
+            thisObject.icon = thisObject.iconOff
+        }
+    }
 
-        if (event !== undefined) {
-          if (event.type === 'Secondary Action Already Executed') {
-            setStatus(thisObject.secondaryWorkDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 100, STATUS_SECONDARY_WORK_DONE)
+    function onMouseOver(point) {
+        if (thisObject.container.frame.isThisPointHere(point, true, false) === true) {
+            isMouseOver = true
+        } else {
+            isMouseOver = false
+        }
+        MENU_ITEM_ON_FOCUS = thisObject
+    }
+
+    function onMouseNotOver(point) {
+        isMouseOver = false
+        MENU_ITEM_ON_FOCUS = undefined
+    }
+
+    function internalClick() {
+        if (thisObject.shorcutNumber !== undefined) {
+            let label = thisObject.payload.node.name + ' ' + labelToPrint
+            canvas.cockpitSpace.setStatus(label, 50, canvas.cockpitSpace.statusTypes.ALL_GOOD)
+        }
+
+        onMouseClick()
+    }
+
+    function onMouseClick() {
+        if (thisObject.isEnabled === false) { return }
+
+        if (thisObject.label === undefined) {
+            /* This is what we have in the case of menu items that are only Icons. In this situation there is no complex logic, just execute the specified action. */
+            thisObject.actionFunction(thisObject.payload, thisObject.action, thisObject.relatedUiObject)
             return
-          }
         }
 
-        /* If there is a secondary action we will act different that if there is not */
-        if (thisObject.secondaryAction === undefined) { // This means there are no more possible actions.
-          if (err.result === GLOBAL.DEFAULT_OK_RESPONSE.result) {
-            if (thisObject.workDoneLabel !== undefined) {
-              setStatus(thisObject.workDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 100, STATUS_PRIMARY_WORK_DONE)
-            }
-          } else {
-            if (thisObject.workFailedLabel != undefined) {
-              setStatus(thisObject.workFailedLabel, UI_COLOR.TITANIUM_YELLOW, 100, STATUS_PRIMARY_WORK_FAILED)
-            }
-          }
+        if (thisObject.askConfirmation !== true) { /* No confirmation is needed */
+            if (temporaryStatus === STATUS_NO_ACTION_TAKEN_YET || temporaryStatus === STATUS_PRIMARY_WORK_DONE) {
+                executeAction()
+            } // Any click out of those states is ignored
         } else {
-          if (err.result === GLOBAL.DEFAULT_OK_RESPONSE.result) {
-            if (thisObject.workDoneLabel !== undefined) {
-              thisObject.nextAction = thisObject.secondaryAction
-              setStatus(thisObject.secondaryLabel, defaultBackgroudColor, undefined, STATUS_PRIMARY_WORK_DONE)
+            /* Confirmation is needed */
+
+            /* The first click ask for confirmation. */
+            if (temporaryStatus === STATUS_NO_ACTION_TAKEN_YET) {
+                setStatus(thisObject.confirmationLabel, UI_COLOR.GOLDEN_ORANGE, 250, STATUS_WAITING_CONFIRMATION)
+                return
             }
-          } else {
-            if (thisObject.workFailedLabel != undefined) {
-              setStatus(thisObject.workFailedLabel, UI_COLOR.TITANIUM_YELLOW, 100, STATUS_PRIMARY_WORK_FAILED)
+            /* A Click during confirmation executes the pre-defined action. */
+            if (temporaryStatus === STATUS_WAITING_CONFIRMATION || temporaryStatus === STATUS_PRIMARY_WORK_DONE) {
+                executeAction()
+                if (thisObject.workDoneLabel !== undefined) {
+                    setStatus(thisObject.workDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 100, STATUS_SECONDARY_WORK_DONE)
+                } else {
+                    setStatus('Done', UI_COLOR.PATINATED_TURQUOISE, 100, STATUS_SECONDARY_WORK_DONE)
+                }
+                return
             }
-          }
-        }
-      }
-      function onSecondaryCallBack (err) {
-        if (err.result === GLOBAL.DEFAULT_OK_RESPONSE.result) {
-          if (thisObject.secondaryWorkDoneLabel !== undefined) {
-            setStatus(thisObject.secondaryWorkDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 100, STATUS_SECONDARY_WORK_DONE)
-          }
-        } else {
-          if (thisObject.secondaryWorkFailedLabel != undefined) {
-            setStatus(thisObject.secondaryWorkFailedLabel, UI_COLOR.TITANIUM_YELLOW, 100, STATUS_SECONDARY_WORK_FAILED)
-          }
-        }
-      }
-    }
-  }
-
-  function setStatus (text, backgroundColor, waitingCycles, newStatus) {
-    labelToPrint = text
-    backgroundColorToUse = backgroundColor
-    temporaryStatus = newStatus
-    temporaryStatusCounter = newStatus // This will often put this into negatives numbers, which will disable the counting back and automatic reseting.
-    if (waitingCycles !== undefined) { // This will override the often negative value with a positive one that will tend to zero onto the default state.
-      temporaryStatusCounter = waitingCycles
-    }
-  }
-
-  function drawBackground () {
-    if (thisObject.dontShowAtFullscreen === true && AT_FULL_SCREEN_MODE === true) { return }
-
-    if (thisObject.container.frame.position.x > 0 && thisObject.isDeployed === true && thisObject.currentRadius >= thisObject.targetRadius) {
-      if (thisObject.type === 'Icon & Text') {
-        let backgroundColor = backgroundColorToUse
-        if (thisObject.isEnabled === false) {
-          backgroundColor = UI_COLOR.GREY
-        }
-        let params = {
-          cornerRadius: 5,
-          lineWidth: 0.1,
-          container: thisObject.container,
-          borderColor: UI_COLOR.DARK,
-          backgroundColor: backgroundColor,
-          castShadow: false,
-          xOffset: 60
         }
 
-        if (isMouseOver === true) {
-          params.opacity = 1
-        } else {
-          params.opacity = 0.8
+        function executeAction() {
+            if (temporaryStatus === STATUS_NO_ACTION_TAKEN_YET || temporaryStatus === STATUS_WAITING_CONFIRMATION) {
+                /* We need to execute the main Action */
+                /* If there is a working label defined, we use it here. */
+                if (thisObject.workingLabel !== undefined) {
+                    setStatus(thisObject.workingLabel, UI_COLOR.GREY, undefined, STATUS_PRIMARY_ACTION_WORKING) // Status will not expire, will only change with a callback. Mouse Clicks will be ignored.
+                }
+
+                /* Execute the action and wait for callbacks to update our statuus. */
+                thisObject.actionFunction(thisObject.payload, thisObject.action, thisObject.relatedUiObject, onPrimaryCallBack)
+                return
+            }
+            if (temporaryStatus === STATUS_PRIMARY_WORK_DONE && thisObject.secondaryAction !== undefined) {
+                /* We need to execute the secondary action. */
+                if (thisObject.secondaryWorkingLabel !== undefined) {
+                    setStatus(thisObject.secondaryWorkingLabel, UI_COLOR.GREY, undefined, STATUS_SECONDARY_ACTION_WORKING) // Status will not expire, will only change with a callback. Mouse Clicks will be ignored.
+                }
+
+                /* Execute the action and wait for callbacks to update our statuus. */
+                thisObject.actionFunction(thisObject.payload, thisObject.secondaryAction, thisObject.relatedUiObject, onSecondaryCallBack)
+                return
+            }
+
+            function onPrimaryCallBack(err, event) {
+                /* While the primary action is being executed some event might have happen. Following we process the ones we can */
+
+                if (event !== undefined) {
+                    if (event.type === 'Secondary Action Already Executed') {
+                        setStatus(thisObject.secondaryWorkDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 100, STATUS_SECONDARY_WORK_DONE)
+                        return
+                    }
+                }
+
+                /* If there is a secondary action we will act different that if there is not */
+                if (thisObject.secondaryAction === undefined) { // This means there are no more possible actions.
+                    if (err.result === GLOBAL.DEFAULT_OK_RESPONSE.result) {
+                        if (thisObject.workDoneLabel !== undefined) {
+                            setStatus(thisObject.workDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 100, STATUS_PRIMARY_WORK_DONE)
+                        }
+                    } else {
+                        if (thisObject.workFailedLabel != undefined) {
+                            setStatus(thisObject.workFailedLabel, UI_COLOR.TITANIUM_YELLOW, 100, STATUS_PRIMARY_WORK_FAILED)
+                        }
+                    }
+                } else {
+                    if (err.result === GLOBAL.DEFAULT_OK_RESPONSE.result) {
+                        if (thisObject.workDoneLabel !== undefined) {
+                            thisObject.nextAction = thisObject.secondaryAction
+                            setStatus(thisObject.secondaryLabel, defaultBackgroudColor, undefined, STATUS_PRIMARY_WORK_DONE)
+                        }
+                    } else {
+                        if (thisObject.workFailedLabel != undefined) {
+                            setStatus(thisObject.workFailedLabel, UI_COLOR.TITANIUM_YELLOW, 100, STATUS_PRIMARY_WORK_FAILED)
+                        }
+                    }
+                }
+            }
+            function onSecondaryCallBack(err) {
+                if (err.result === GLOBAL.DEFAULT_OK_RESPONSE.result) {
+                    if (thisObject.secondaryWorkDoneLabel !== undefined) {
+                        setStatus(thisObject.secondaryWorkDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 100, STATUS_SECONDARY_WORK_DONE)
+                    }
+                } else {
+                    if (thisObject.secondaryWorkFailedLabel != undefined) {
+                        setStatus(thisObject.secondaryWorkFailedLabel, UI_COLOR.TITANIUM_YELLOW, 100, STATUS_SECONDARY_WORK_FAILED)
+                    }
+                }
+            }
         }
-
-        roundedCornersBackground(params)
-      }
-    }
-  }
-
-  function drawForeground () {
-    if (thisObject.dontShowAtFullscreen === true && AT_FULL_SCREEN_MODE === true) { return }
-
-    let menuPosition = {
-      x: thisObject.currentRadius * 1.5,
-      y: thisObject.container.frame.height / 2
     }
 
-    menuPosition = thisObject.container.frame.frameThisPoint(menuPosition)
+    function setStatus(text, backgroundColor, waitingCycles, newStatus) {
+        labelToPrint = text
+        backgroundColorToUse = backgroundColor
+        temporaryStatus = newStatus
+        temporaryStatusCounter = newStatus // This will often put this into negatives numbers, which will disable the counting back and automatic reseting.
+        if (waitingCycles !== undefined) { // This will override the often negative value with a positive one that will tend to zero onto the default state.
+            temporaryStatusCounter = waitingCycles
+        }
+    }
+
+    function drawBackground() {
+        if (thisObject.dontShowAtFullscreen === true && AT_FULL_SCREEN_MODE === true) { return }
+
+        if (thisObject.container.frame.position.x > 0 && thisObject.isDeployed === true && thisObject.currentRadius >= thisObject.targetRadius) {
+            if (thisObject.type === 'Icon & Text') {
+                let backgroundColor = backgroundColorToUse
+                if (thisObject.isEnabled === false) {
+                    backgroundColor = UI_COLOR.GREY
+                }
+                let params = {
+                    cornerRadius: 5,
+                    lineWidth: 0.1,
+                    container: thisObject.container,
+                    borderColor: UI_COLOR.DARK,
+                    backgroundColor: backgroundColor,
+                    castShadow: false,
+                    xOffset: 60
+                }
+
+                if (isMouseOver === true) {
+                    params.opacity = 1
+                } else {
+                    params.opacity = 0.8
+                }
+
+                roundedCornersBackground(params)
+            }
+        }
+    }
+
+    function drawForeground() {
+        if (thisObject.dontShowAtFullscreen === true && AT_FULL_SCREEN_MODE === true) { return }
+
+        let menuPosition = {
+            x: thisObject.currentRadius * 1.5,
+            y: thisObject.container.frame.height / 2
+        }
+
+        menuPosition = thisObject.container.frame.frameThisPoint(menuPosition)
 
         /* Menu  Item */
 
-    let iconSize
-    if (isMouseOver === true) {
-      iconSize = thisObject.currentRadius + EXTRA_MOUSE_OVER_ICON_SIZE
-    } else {
-      iconSize = thisObject.currentRadius
-    }
-
-    if (thisObject.icon === undefined) { return }
-    if (thisObject.icon.canDrawIcon === true && thisObject.currentRadius > 1 && thisObject.isDeployed === true) {
-      browserCanvasContext.drawImage(thisObject.icon, menuPosition.x - iconSize, menuPosition.y - iconSize, iconSize * 2, iconSize * 2)
-
-        /* Menu Label */
-
-      if (thisObject.type === 'Icon & Text') {
-        label = labelToPrint
-        if (thisObject.shorcutNumber !== undefined) {
-          label = '' + thisObject.shorcutNumber + '- ' + labelToPrint
+        let iconSize
+        if (isMouseOver === true) {
+            iconSize = thisObject.currentRadius + EXTRA_MOUSE_OVER_ICON_SIZE
+        } else {
+            iconSize = thisObject.currentRadius
         }
 
-        let labelPoint
-        let fontSize = 15
+        if (thisObject.icon === undefined) { return }
+        if (thisObject.icon.canDrawIcon === true && thisObject.currentRadius > 1 && thisObject.isDeployed === true) {
+            browserCanvasContext.drawImage(thisObject.icon, menuPosition.x - iconSize, menuPosition.y - iconSize, iconSize * 2, iconSize * 2)
 
-        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+            /* Menu Label */
 
-        if (thisObject.currentRadius >= thisObject.targetRadius) {
-          labelPoint = {
-            x: menuPosition.x + thisObject.currentRadius + 25,
-            y: menuPosition.y + fontSize * FONT_ASPECT_RATIO
-          }
+            if (thisObject.type === 'Icon & Text') {
+                label = labelToPrint
+                if (thisObject.shorcutNumber !== undefined) {
+                    label = '' + thisObject.shorcutNumber + '- ' + labelToPrint
+                }
 
-          browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-          browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
-          browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
+                let labelPoint
+                let fontSize = 15
+
+                browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+
+                if (thisObject.currentRadius >= thisObject.targetRadius) {
+                    labelPoint = {
+                        x: menuPosition.x + thisObject.currentRadius + 25,
+                        y: menuPosition.y + fontSize * FONT_ASPECT_RATIO
+                    }
+
+                    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+                    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
+                    browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
+                }
+            }
         }
-      }
     }
-  }
 }

FloatingSpace/CircularProgressBar.js

@@ -1,146 +1,146 @@
 
-function newCircularProgressBar () {
-  const MODULE_NAME = 'Circular Progress Bar'
+function newCircularProgressBar() {
+    const MODULE_NAME = 'Circular Progress Bar'
 
-  let thisObject = {
-    container: undefined,
-    isDeployed: undefined,
-    physics: physics,
-    drawBackground: drawBackground,
-    drawForeground: drawForeground,
-    getContainer: getContainer,
-    finalize: finalize,
-    initialize: initialize
-  }
-
-  thisObject.container = newContainer()
-  thisObject.container.initialize(MODULE_NAME, 'Circle')
-  thisObject.container.isClickeable = false
-  thisObject.container.isDraggeable = false
-  thisObject.container.frame.radius = 0
-  thisObject.container.frame.position.x = 0
-  thisObject.container.frame.position.y = 0
-
-  let opacityCounters = []
-  let eventSubscriptionIdHeartbeat
-  let needToDrawRing = true
-  let eventsServerClient
-
-  return thisObject
-
-  function finalize () {
-    finalizeEventsServerClient()
-
-    thisObject.container = undefined
-    thisObject.payload = undefined
-    thisObject.fitFunction = undefined
-  }
-
-  function finalizeEventsServerClient () {
-    if (eventsServerClient !== undefined) {
-      let key = thisObject.payload.node.name + '-' + thisObject.payload.node.type + '-' + thisObject.payload.node.id
-      if (eventSubscriptionIdHeartbeat !== undefined) {
-        eventsServerClient.stopListening(key, eventSubscriptionIdHeartbeat)
-      }
-    }
-  }
-
-  function initialize (payload, pEventsServerClient) {
-    thisObject.payload = payload
-
-    finalizeEventsServerClient()
-    eventsServerClient = pEventsServerClient
-
-    for (let i = 0; i < 60; i++) {
-      opacityCounters.push(0)
+    let thisObject = {
+        container: undefined,
+        isDeployed: undefined,
+        physics: physics,
+        drawBackground: drawBackground,
+        drawForeground: drawForeground,
+        getContainer: getContainer,
+        finalize: finalize,
+        initialize: initialize
     }
 
-    let key = thisObject.payload.node.name + '-' + thisObject.payload.node.type + '-' + thisObject.payload.node.id
-    eventsServerClient.listenToEvent(key, 'Heartbeat', undefined, key, onResponse, onHeartBeat)
+    thisObject.container = newContainer()
+    thisObject.container.initialize(MODULE_NAME, 'Circle')
+    thisObject.container.isClickeable = false
+    thisObject.container.isDraggeable = false
+    thisObject.container.frame.radius = 0
+    thisObject.container.frame.position.x = 0
+    thisObject.container.frame.position.y = 0
 
-    function onResponse (message) {
-      eventSubscriptionIdHeartbeat = message.eventSubscriptionId
-    }
-  }
+    let opacityCounters = []
+    let eventSubscriptionIdHeartbeat
+    let needToDrawRing = true
+    let eventsServerClient
 
-  function onHeartBeat (message) {
-    if (thisObject.payload === undefined) { return }
-    if (thisObject.payload.uiObject === undefined) { return }
-    opacityCounters[message.event.seconds] = 2000
-    if (message.event.processingDate !== undefined) {
-      thisObject.payload.uiObject.setValue(message.event.processingDate, 2000)
-    }
-    if (message.event.percentage !== undefined) {
-      thisObject.payload.uiObject.setPercentage(message.event.percentage, 2000)
-    }
-    if (message.event.status !== undefined) {
-      needToDrawRing = false
-      thisObject.payload.uiObject.setStatus(message.event.status, 200000)
+    return thisObject
+
+    function finalize() {
+        finalizeEventsServerClient()
+
+        thisObject.container = undefined
+        thisObject.payload = undefined
+        thisObject.fitFunction = undefined
     }
 
-    thisObject.payload.uiObject.heartBeat()
-  }
-
-  function getContainer (point) {
-    if (canvas.floatingSpace.inMapMode === true) { return }
-    let container
-
-    for (let i = 0; i < menuItems.length; i++) {
-      let menutItem = menuItems[i]
-      container = menutItem.getContainer(point)
-      if (container !== undefined) { return container }
-    }
-  }
-
-  function physics () {
-    for (let i = 0; i < 60; i++) {
-      opacityCounters[i] = opacityCounters[i] - 2
-
-      if (opacityCounters[i] < 0) {
-        opacityCounters[i] = 0
-      }
-    }
-  }
-
-  function drawForeground (pFloatingObject) {
-
-  }
-
-  function drawBackground (pFloatingObject) {
-    if (canvas.floatingSpace.inMapMode === true) { return }
-    if (needToDrawRing !== true) { return }
-
-    const VISIBLE_RADIUS = thisObject.container.frame.radius * 2
-
-    let visiblePosition = {
-      x: thisObject.container.frame.position.x,
-      y: thisObject.container.frame.position.y
+    function finalizeEventsServerClient() {
+        if (eventsServerClient !== undefined) {
+            let key = thisObject.payload.node.name + '-' + thisObject.payload.node.type + '-' + thisObject.payload.node.id
+            if (eventSubscriptionIdHeartbeat !== undefined) {
+                eventsServerClient.stopListening(key, eventSubscriptionIdHeartbeat)
+            }
+        }
     }
 
-    visiblePosition = thisObject.container.frame.frameThisPoint(visiblePosition)
-    visiblePosition = thisObject.fitFunction(visiblePosition)
+    function initialize(payload, pEventsServerClient) {
+        thisObject.payload = payload
 
-    for (let i = 0; i < 60; i++) {
-      let OPACITY = opacityCounters[i] / 1000
+        finalizeEventsServerClient()
+        eventsServerClient = pEventsServerClient
 
-      if (OPACITY === 0) { continue }
+        for (let i = 0; i < 60; i++) {
+            opacityCounters.push(0)
+        }
 
-      let initialAngle = Math.PI * 2 / 60 * i - Math.PI / 2
-      let finalAngle = Math.PI * 2 / 60 * (i + 1) - Math.PI / 2
+        let key = thisObject.payload.node.name + '-' + thisObject.payload.node.type + '-' + thisObject.payload.node.id
+        eventsServerClient.listenToEvent(key, 'Heartbeat', undefined, key, onResponse, onHeartBeat)
 
-      browserCanvasContext.beginPath()
-      browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, initialAngle, finalAngle, false)
-      browserCanvasContext.closePath()
-
-      browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GOLDEN_ORANGE + ', ' + OPACITY * 2 + ')'
-      browserCanvasContext.lineWidth = 6 + opacityCounters[i] / 100 / 2
-      browserCanvasContext.setLineDash([3, 4])
-      browserCanvasContext.stroke()
-
-      browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + OPACITY + ')'
-      browserCanvasContext.lineWidth = 0 + opacityCounters[i] / 100 / 2
-      browserCanvasContext.setLineDash([3, 4])
-      browserCanvasContext.stroke()
+        function onResponse(message) {
+            eventSubscriptionIdHeartbeat = message.eventSubscriptionId
+        }
+    }
+
+    function onHeartBeat(message) {
+        if (thisObject.payload === undefined) { return }
+        if (thisObject.payload.uiObject === undefined) { return }
+        opacityCounters[message.event.seconds] = 2000
+        if (message.event.processingDate !== undefined) {
+            thisObject.payload.uiObject.setValue(message.event.processingDate, 2000)
+        }
+        if (message.event.percentage !== undefined) {
+            thisObject.payload.uiObject.setPercentage(message.event.percentage, 2000)
+        }
+        if (message.event.status !== undefined) {
+            needToDrawRing = false
+            thisObject.payload.uiObject.setStatus(message.event.status, 200000)
+        }
+
+        thisObject.payload.uiObject.heartBeat()
+    }
+
+    function getContainer(point) {
+        if (canvas.floatingSpace.inMapMode === true) { return }
+        let container
+
+        for (let i = 0; i < menuItems.length; i++) {
+            let menutItem = menuItems[i]
+            container = menutItem.getContainer(point)
+            if (container !== undefined) { return container }
+        }
+    }
+
+    function physics() {
+        for (let i = 0; i < 60; i++) {
+            opacityCounters[i] = opacityCounters[i] - 2
+
+            if (opacityCounters[i] < 0) {
+                opacityCounters[i] = 0
+            }
+        }
+    }
+
+    function drawForeground(pFloatingObject) {
+
+    }
+
+    function drawBackground(pFloatingObject) {
+        if (canvas.floatingSpace.inMapMode === true) { return }
+        if (needToDrawRing !== true) { return }
+
+        const VISIBLE_RADIUS = thisObject.container.frame.radius * 2
+
+        let visiblePosition = {
+            x: thisObject.container.frame.position.x,
+            y: thisObject.container.frame.position.y
+        }
+
+        visiblePosition = thisObject.container.frame.frameThisPoint(visiblePosition)
+        visiblePosition = thisObject.fitFunction(visiblePosition)
+
+        for (let i = 0; i < 60; i++) {
+            let OPACITY = opacityCounters[i] / 1000
+
+            if (OPACITY === 0) { continue }
+
+            let initialAngle = Math.PI * 2 / 60 * i - Math.PI / 2
+            let finalAngle = Math.PI * 2 / 60 * (i + 1) - Math.PI / 2
+
+            browserCanvasContext.beginPath()
+            browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, initialAngle, finalAngle, false)
+            browserCanvasContext.closePath()
+
+            browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GOLDEN_ORANGE + ', ' + OPACITY * 2 + ')'
+            browserCanvasContext.lineWidth = 6 + opacityCounters[i] / 100 / 2
+            browserCanvasContext.setLineDash([3, 4])
+            browserCanvasContext.stroke()
+
+            browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + OPACITY + ')'
+            browserCanvasContext.lineWidth = 0 + opacityCounters[i] / 100 / 2
+            browserCanvasContext.setLineDash([3, 4])
+            browserCanvasContext.stroke()
+        }
     }
-  }
 }

FloatingSpace/CodeEditor.js

@@ -1,199 +1,199 @@
 
-function newCodeEditor () {
-  const MODULE_NAME = 'Code Editor'
+function newCodeEditor() {
+    const MODULE_NAME = 'Code Editor'
 
-  let thisObject = {
-    isVisibleFunction: undefined,
-    visible: false,
-    imagePathOK: undefined,
-    imagePathNOT_OK: undefined,
-    rawRadius: undefined,
-    targetRadius: undefined,
-    currentRadius: undefined,
-    container: undefined,
-    payload: undefined,
-    deactivate: deactivate,
-    activate: activate,
-    physics: physics,
-    drawBackground: drawBackground,
-    drawForeground: drawForeground,
-    getContainer: getContainer,
-    finalize: finalize,
-    initialize: initialize
-  }
-
-  thisObject.container = newContainer()
-  thisObject.container.initialize(MODULE_NAME)
-  thisObject.container.isClickeable = false
-  thisObject.container.isDraggeable = false
-  thisObject.container.detectMouseOver = false
-  thisObject.container.frame.radius = 0
-  thisObject.container.frame.position.x = 0
-  thisObject.container.frame.position.y = 0
-
-  let isMouseOver = false
-  let SIZE_FACTOR = 1.4
-
-  return thisObject
-
-  function finalize () {
-    thisObject.container.finalize()
-    thisObject.container = undefined
-    thisObject.payload = undefined
-    thisObject.isVisibleFunction = undefined
-  }
-
-  function initialize () {
-
-  }
-
-  function deactivate () {
-    if (thisObject.visible === true) {
-      thisObject.visible = false
-      let textArea = document.getElementById('textArea')
-      textArea.style.display = 'none'
-      thisObject.payload.node.code = textArea.value
-    }
-    EDITOR_ON_FOCUS = false
-  }
-
-  function activate (payload) {
-    thisObject.visible = true
-    thisObject.payload = payload
-    thisObject.rawRadius = 8
-    thisObject.targetRadius = thisObject.container.frame.radius
-    thisObject.currentRadius = 0
-    thisObject.payload.uiObject.setErrorMessage('', 0)
-
-    let textArea = document.getElementById('textArea')
-    textArea.value = payload.node.code
-    textArea.style = 'resize: none;' +
-                     ' border: none;' +
-                     ' outline: none;' +
-                     'box-shadow: none;' +
-                     'overflow:hidden;' +
-                     'font-family: ' + UI_FONT.PRIMARY + ';' +
-                     'font-size: 14px;' +
-                     'background-color: rgb(' + UI_COLOR.RUSTED_RED + ');' +
-                     'color:rgb(255, 255, 255);' +
-                    'width: ' + thisObject.container.frame.width + 'px;' +
-                     'height: ' + thisObject.container.frame.height + 'px'
-    textArea.style.display = 'block'
-    textArea.focus()
-    EDITOR_ON_FOCUS = true
-  }
-
-  function getContainer (point) {
-    let container
-    if (thisObject.visible === true) {
-      if (point.x === VERY_LARGE_NUMBER) {
-        /* The the mouse leaves the canvas, and event of mouse over with a ridiculous coordinate is triggered so that
-        anyone can react. In our case, the code editor has a text area that is not part of the canvas, so the event is
-        triggered. We compensate recognizing this coordinate and returning our container. */
-        return thisObject.container
-      }
-
-      if (thisObject.container.frame.isThisPointHere(point, true, false) === true) {
-        return thisObject.container
-      } else {
-        return undefined
-      }
-    }
-  }
-
-  function physics () {
-    if (Math.abs(thisObject.currentRadius - thisObject.targetRadius) >= 0.5) {
-      if (thisObject.currentRadius < thisObject.targetRadius) {
-        thisObject.currentRadius = thisObject.currentRadius + 0.5
-      } else {
-        thisObject.currentRadius = thisObject.currentRadius - 0.5
-      }
+    let thisObject = {
+        isVisibleFunction: undefined,
+        visible: false,
+        imagePathOK: undefined,
+        imagePathNOT_OK: undefined,
+        rawRadius: undefined,
+        targetRadius: undefined,
+        currentRadius: undefined,
+        container: undefined,
+        payload: undefined,
+        deactivate: deactivate,
+        activate: activate,
+        physics: physics,
+        drawBackground: drawBackground,
+        drawForeground: drawForeground,
+        getContainer: getContainer,
+        finalize: finalize,
+        initialize: initialize
     }
 
+    thisObject.container = newContainer()
+    thisObject.container.initialize(MODULE_NAME)
+    thisObject.container.isClickeable = false
+    thisObject.container.isDraggeable = false
+    thisObject.container.detectMouseOver = false
+    thisObject.container.frame.radius = 0
     thisObject.container.frame.position.x = 0
     thisObject.container.frame.position.y = 0
 
-    thisObject.container.frame.width = thisObject.container.frame.radius * 1.8 * SIZE_FACTOR
-    thisObject.container.frame.height = thisObject.container.frame.radius * 1 * SIZE_FACTOR
+    let isMouseOver = false
+    let SIZE_FACTOR = 1.4
 
-    let textAreaPosition = {
-      x: 0 - thisObject.container.frame.width / 2,
-      y: 0 - thisObject.container.frame.height * 3 / 7 + CURRENT_TOP_MARGIN
+    return thisObject
+
+    function finalize() {
+        thisObject.container.finalize()
+        thisObject.container = undefined
+        thisObject.payload = undefined
+        thisObject.isVisibleFunction = undefined
     }
 
-    textAreaPosition = thisObject.container.frame.frameThisPoint(textAreaPosition)
-    if (thisObject.visible === true) {
-      let checkPosition = {
-        x: textAreaPosition.x,
-        y: textAreaPosition.y - CURRENT_TOP_MARGIN
-      }
-      if (thisObject.isVisibleFunction(checkPosition) === false) {
-        deactivate()
-      }
-    }
-    if (thisObject.visible === true) {
-      let textAreaDiv = document.getElementById('textAreaDiv')
-      textAreaDiv.style = 'position:fixed; top:' + textAreaPosition.y + 'px; left:' + textAreaPosition.x + 'px; z-index:1; '
-    }
-  }
+    function initialize() {
 
-  function drawBackground () {
-    if (thisObject.visible === true) {
-      let position = {
-        x: 0,
-        y: 0
-      }
-
-      position = thisObject.container.frame.frameThisPoint(position)
-
-      let radius = thisObject.container.frame.radius * SIZE_FACTOR
-
-      if (radius > 0.5) {
-        browserCanvasContext.beginPath()
-        browserCanvasContext.arc(position.x, position.y, radius * 1.3 + 3, 0, Math.PI * 2, true)
-        browserCanvasContext.closePath()
-        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + 1 + ')'
-        browserCanvasContext.fill()
-
-        browserCanvasContext.beginPath()
-        browserCanvasContext.arc(position.x, position.y, radius * 1.3, 0, Math.PI * 2, true)
-        browserCanvasContext.closePath()
-        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + 1 + ')'
-        browserCanvasContext.fill()
-      }
-    }
-  }
-  function drawForeground () {
-    let iconPosition = {
-      x: 0,
-      y: thisObject.currentRadius * 1.5
     }
 
-    iconPosition = thisObject.container.frame.frameThisPoint(iconPosition)
+    function deactivate() {
+        if (thisObject.visible === true) {
+            thisObject.visible = false
+            let textArea = document.getElementById('textArea')
+            textArea.style.display = 'none'
+            thisObject.payload.node.code = textArea.value
+        }
+        EDITOR_ON_FOCUS = false
+    }
 
-      /* Menu  Item */
+    function activate(payload) {
+        thisObject.visible = true
+        thisObject.payload = payload
+        thisObject.rawRadius = 8
+        thisObject.targetRadius = thisObject.container.frame.radius
+        thisObject.currentRadius = 0
+        thisObject.payload.uiObject.setErrorMessage('', 0)
 
-    if (thisObject.canDrawIcon === true && thisObject.currentRadius > 1) {
-      browserCanvasContext.drawImage(thisObject.icon, iconPosition.x - thisObject.currentRadius, iconPosition.y - thisObject.currentRadius, thisObject.currentRadius * 2, thisObject.currentRadius * 2)
+        let textArea = document.getElementById('textArea')
+        textArea.value = payload.node.code
+        textArea.style = 'resize: none;' +
+            ' border: none;' +
+            ' outline: none;' +
+            'box-shadow: none;' +
+            'overflow:hidden;' +
+            'font-family: ' + UI_FONT.PRIMARY + ';' +
+            'font-size: 14px;' +
+            'background-color: rgb(' + UI_COLOR.RUSTED_RED + ');' +
+            'color:rgb(255, 255, 255);' +
+            'width: ' + thisObject.container.frame.width + 'px;' +
+            'height: ' + thisObject.container.frame.height + 'px'
+        textArea.style.display = 'block'
+        textArea.focus()
+        EDITOR_ON_FOCUS = true
+    }
 
-      /* Menu Label */
+    function getContainer(point) {
+        let container
+        if (thisObject.visible === true) {
+            if (point.x === VERY_LARGE_NUMBER) {
+                /* The the mouse leaves the canvas, and event of mouse over with a ridiculous coordinate is triggered so that
+                anyone can react. In our case, the code editor has a text area that is not part of the canvas, so the event is
+                triggered. We compensate recognizing this coordinate and returning our container. */
+                return thisObject.container
+            }
 
-      let label = 'Code looks good!'
-      let labelPoint
-      let fontSize = 10
+            if (thisObject.container.frame.isThisPointHere(point, true, false) === true) {
+                return thisObject.container
+            } else {
+                return undefined
+            }
+        }
+    }
 
-      browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-
-      if (label !== undefined && thisObject.currentRadius >= thisObject.targetRadius) {
-        labelPoint = {
-          x: iconPosition.x + thisObject.currentRadius + 10,
-          y: iconPosition.y + fontSize * FONT_ASPECT_RATIO
+    function physics() {
+        if (Math.abs(thisObject.currentRadius - thisObject.targetRadius) >= 0.5) {
+            if (thisObject.currentRadius < thisObject.targetRadius) {
+                thisObject.currentRadius = thisObject.currentRadius + 0.5
+            } else {
+                thisObject.currentRadius = thisObject.currentRadius - 0.5
+            }
         }
 
-        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
-        browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
-      }
+        thisObject.container.frame.position.x = 0
+        thisObject.container.frame.position.y = 0
+
+        thisObject.container.frame.width = thisObject.container.frame.radius * 1.8 * SIZE_FACTOR
+        thisObject.container.frame.height = thisObject.container.frame.radius * 1 * SIZE_FACTOR
+
+        let textAreaPosition = {
+            x: 0 - thisObject.container.frame.width / 2,
+            y: 0 - thisObject.container.frame.height * 3 / 7 + CURRENT_TOP_MARGIN
+        }
+
+        textAreaPosition = thisObject.container.frame.frameThisPoint(textAreaPosition)
+        if (thisObject.visible === true) {
+            let checkPosition = {
+                x: textAreaPosition.x,
+                y: textAreaPosition.y - CURRENT_TOP_MARGIN
+            }
+            if (thisObject.isVisibleFunction(checkPosition) === false) {
+                deactivate()
+            }
+        }
+        if (thisObject.visible === true) {
+            let textAreaDiv = document.getElementById('textAreaDiv')
+            textAreaDiv.style = 'position:fixed; top:' + textAreaPosition.y + 'px; left:' + textAreaPosition.x + 'px; z-index:1; '
+        }
+    }
+
+    function drawBackground() {
+        if (thisObject.visible === true) {
+            let position = {
+                x: 0,
+                y: 0
+            }
+
+            position = thisObject.container.frame.frameThisPoint(position)
+
+            let radius = thisObject.container.frame.radius * SIZE_FACTOR
+
+            if (radius > 0.5) {
+                browserCanvasContext.beginPath()
+                browserCanvasContext.arc(position.x, position.y, radius * 1.3 + 3, 0, Math.PI * 2, true)
+                browserCanvasContext.closePath()
+                browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + 1 + ')'
+                browserCanvasContext.fill()
+
+                browserCanvasContext.beginPath()
+                browserCanvasContext.arc(position.x, position.y, radius * 1.3, 0, Math.PI * 2, true)
+                browserCanvasContext.closePath()
+                browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + 1 + ')'
+                browserCanvasContext.fill()
+            }
+        }
+    }
+    function drawForeground() {
+        let iconPosition = {
+            x: 0,
+            y: thisObject.currentRadius * 1.5
+        }
+
+        iconPosition = thisObject.container.frame.frameThisPoint(iconPosition)
+
+        /* Menu  Item */
+
+        if (thisObject.canDrawIcon === true && thisObject.currentRadius > 1) {
+            browserCanvasContext.drawImage(thisObject.icon, iconPosition.x - thisObject.currentRadius, iconPosition.y - thisObject.currentRadius, thisObject.currentRadius * 2, thisObject.currentRadius * 2)
+
+            /* Menu Label */
+
+            let label = 'Code looks good!'
+            let labelPoint
+            let fontSize = 10
+
+            browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+
+            if (label !== undefined && thisObject.currentRadius >= thisObject.targetRadius) {
+                labelPoint = {
+                    x: iconPosition.x + thisObject.currentRadius + 10,
+                    y: iconPosition.y + fontSize * FONT_ASPECT_RATIO
+                }
+
+                browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+                browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
+                browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
+            }
+        }
     }
-  }
 }

FloatingSpace/ConfigEditor.js

@@ -1,205 +1,205 @@
 
-function newConfigEditor () {
-  const MODULE_NAME = 'Config Editor'
+function newConfigEditor() {
+    const MODULE_NAME = 'Config Editor'
 
-  let thisObject = {
-    isVisibleFunction: undefined,
-    visible: false,
-    imagePathOK: undefined,
-    imagePathNOT_OK: undefined,
-    rawRadius: undefined,
-    targetRadius: undefined,
-    currentRadius: undefined,
-    container: undefined,
-    payload: undefined,
-    deactivate: deactivate,
-    activate: activate,
-    physics: physics,
-    drawBackground: drawBackground,
-    drawForeground: drawForeground,
-    getContainer: getContainer,
-    finalize: finalize,
-    initialize: initialize
-  }
-
-  thisObject.container = newContainer()
-  thisObject.container.initialize(MODULE_NAME)
-  thisObject.container.isClickeable = false
-  thisObject.container.isDraggeable = false
-  thisObject.container.detectMouseOver = false
-  thisObject.container.frame.radius = 0
-  thisObject.container.frame.position.x = 0
-  thisObject.container.frame.position.y = 0
-
-  let isMouseOver = false
-  let SIZE_FACTOR = 1
-
-  return thisObject
-
-  function finalize () {
-    thisObject.container.finalize()
-    thisObject.container = undefined
-    thisObject.payload = undefined
-    thisObject.isVisibleFunction = undefined
-  }
-
-  function initialize () {
-
-  }
-
-  function deactivate () {
-    if (thisObject.visible === true) {
-      thisObject.visible = false
-      let textArea = document.getElementById('textArea')
-      textArea.style.display = 'none'
-      thisObject.payload.node.config = textArea.value
-
-      try {
-        let config = JSON.parse(thisObject.payload.node.config)
-      } catch (err) {
-        thisObject.payload.uiObject.setErrorMessage(err.message, 10)
-      }
-    }
-    EDITOR_ON_FOCUS = false
-  }
-
-  function activate (payload) {
-    thisObject.visible = true
-    thisObject.payload = payload
-    thisObject.rawRadius = 8
-    thisObject.targetRadius = thisObject.container.frame.radius
-    thisObject.currentRadius = 0
-    thisObject.payload.uiObject.setErrorMessage('', 0)
-
-    let textArea = document.getElementById('textArea')
-    textArea.value = payload.node.config
-    textArea.style = 'resize: none;' +
-                     ' border: none;' +
-                     ' outline: none;' +
-                     'box-shadow: none;' +
-                     'overflow:hidden;' +
-                     'font-family: ' + UI_FONT.PRIMARY + ';' +
-                     'font-size: 14px;' +
-                     'background-color: rgb(' + UI_COLOR.DARK_TURQUOISE + ');' +
-                     'color:rgb(255, 255, 255);' +
-                    'width: ' + thisObject.container.frame.width + 'px;' +
-                     'height: ' + thisObject.container.frame.height + 'px'
-    textArea.style.display = 'block'
-    textArea.focus()
-    EDITOR_ON_FOCUS = true
-  }
-
-  function getContainer (point) {
-    let container
-    if (thisObject.visible === true) {
-      if (point.x === VERY_LARGE_NUMBER) {
-        /* The the mouse leaves the canvas, and event of mouse over with a ridiculous coordinate is triggered so that
-        anyone can react. In our case, the config editor has a text area that is not part of the canvas, so the event is
-        triggered. We compensate recognizing this coordinate and returning our container. */
-        return thisObject.container
-      }
-
-      if (thisObject.container.frame.isThisPointHere(point, true, false) === true) {
-        return thisObject.container
-      } else {
-        return undefined
-      }
-    }
-  }
-
-  function physics () {
-    if (Math.abs(thisObject.currentRadius - thisObject.targetRadius) >= 0.5) {
-      if (thisObject.currentRadius < thisObject.targetRadius) {
-        thisObject.currentRadius = thisObject.currentRadius + 0.5
-      } else {
-        thisObject.currentRadius = thisObject.currentRadius - 0.5
-      }
+    let thisObject = {
+        isVisibleFunction: undefined,
+        visible: false,
+        imagePathOK: undefined,
+        imagePathNOT_OK: undefined,
+        rawRadius: undefined,
+        targetRadius: undefined,
+        currentRadius: undefined,
+        container: undefined,
+        payload: undefined,
+        deactivate: deactivate,
+        activate: activate,
+        physics: physics,
+        drawBackground: drawBackground,
+        drawForeground: drawForeground,
+        getContainer: getContainer,
+        finalize: finalize,
+        initialize: initialize
     }
 
+    thisObject.container = newContainer()
+    thisObject.container.initialize(MODULE_NAME)
+    thisObject.container.isClickeable = false
+    thisObject.container.isDraggeable = false
+    thisObject.container.detectMouseOver = false
+    thisObject.container.frame.radius = 0
     thisObject.container.frame.position.x = 0
     thisObject.container.frame.position.y = 0
 
-    thisObject.container.frame.width = thisObject.container.frame.radius * 1.8 * SIZE_FACTOR
-    thisObject.container.frame.height = thisObject.container.frame.radius * 1 * SIZE_FACTOR
+    let isMouseOver = false
+    let SIZE_FACTOR = 1
 
-    let textAreaPosition = {
-      x: 0 - thisObject.container.frame.width / 2,
-      y: 0 - thisObject.container.frame.height * 3 / 7 + CURRENT_TOP_MARGIN
+    return thisObject
+
+    function finalize() {
+        thisObject.container.finalize()
+        thisObject.container = undefined
+        thisObject.payload = undefined
+        thisObject.isVisibleFunction = undefined
     }
 
-    textAreaPosition = thisObject.container.frame.frameThisPoint(textAreaPosition)
-    if (thisObject.visible === true) {
-      let checkPosition = {
-        x: textAreaPosition.x,
-        y: textAreaPosition.y - CURRENT_TOP_MARGIN
-      }
-      if (thisObject.isVisibleFunction(checkPosition) === false) {
-        deactivate()
-      }
-    }
-    if (thisObject.visible === true) {
-      let textAreaDiv = document.getElementById('textAreaDiv')
-      textAreaDiv.style = 'position:fixed; top:' + textAreaPosition.y + 'px; left:' + textAreaPosition.x + 'px; z-index:1; '
-    }
-  }
+    function initialize() {
 
-  function drawBackground () {
-    if (thisObject.visible === true) {
-      let position = {
-        x: 0,
-        y: 0
-      }
-
-      position = thisObject.container.frame.frameThisPoint(position)
-
-      let radius = thisObject.container.frame.radius * SIZE_FACTOR
-
-      if (radius > 0.5) {
-        browserCanvasContext.beginPath()
-        browserCanvasContext.arc(position.x, position.y, radius * 1.3 + 3, 0, Math.PI * 2, true)
-        browserCanvasContext.closePath()
-        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + 1 + ')'
-        browserCanvasContext.fill()
-
-        browserCanvasContext.beginPath()
-        browserCanvasContext.arc(position.x, position.y, radius * 1.3, 0, Math.PI * 2, true)
-        browserCanvasContext.closePath()
-        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + 1 + ')'
-        browserCanvasContext.fill()
-      }
-    }
-  }
-  function drawForeground () {
-    let iconPosition = {
-      x: 0,
-      y: thisObject.currentRadius * 1.5
     }
 
-    iconPosition = thisObject.container.frame.frameThisPoint(iconPosition)
+    function deactivate() {
+        if (thisObject.visible === true) {
+            thisObject.visible = false
+            let textArea = document.getElementById('textArea')
+            textArea.style.display = 'none'
+            thisObject.payload.node.config = textArea.value
 
-      /* Menu  Item */
+            try {
+                let config = JSON.parse(thisObject.payload.node.config)
+            } catch (err) {
+                thisObject.payload.uiObject.setErrorMessage(err.message, 10)
+            }
+        }
+        EDITOR_ON_FOCUS = false
+    }
 
-    if (thisObject.canDrawIcon === true && thisObject.currentRadius > 1) {
-      browserCanvasContext.drawImage(thisObject.icon, iconPosition.x - thisObject.currentRadius, iconPosition.y - thisObject.currentRadius, thisObject.currentRadius * 2, thisObject.currentRadius * 2)
+    function activate(payload) {
+        thisObject.visible = true
+        thisObject.payload = payload
+        thisObject.rawRadius = 8
+        thisObject.targetRadius = thisObject.container.frame.radius
+        thisObject.currentRadius = 0
+        thisObject.payload.uiObject.setErrorMessage('', 0)
 
-      /* Menu Label */
+        let textArea = document.getElementById('textArea')
+        textArea.value = payload.node.config
+        textArea.style = 'resize: none;' +
+            ' border: none;' +
+            ' outline: none;' +
+            'box-shadow: none;' +
+            'overflow:hidden;' +
+            'font-family: ' + UI_FONT.PRIMARY + ';' +
+            'font-size: 14px;' +
+            'background-color: rgb(' + UI_COLOR.DARK_TURQUOISE + ');' +
+            'color:rgb(255, 255, 255);' +
+            'width: ' + thisObject.container.frame.width + 'px;' +
+            'height: ' + thisObject.container.frame.height + 'px'
+        textArea.style.display = 'block'
+        textArea.focus()
+        EDITOR_ON_FOCUS = true
+    }
 
-      let label = 'Code looks good!'
-      let labelPoint
-      let fontSize = 10
+    function getContainer(point) {
+        let container
+        if (thisObject.visible === true) {
+            if (point.x === VERY_LARGE_NUMBER) {
+                /* The the mouse leaves the canvas, and event of mouse over with a ridiculous coordinate is triggered so that
+                anyone can react. In our case, the config editor has a text area that is not part of the canvas, so the event is
+                triggered. We compensate recognizing this coordinate and returning our container. */
+                return thisObject.container
+            }
 
-      browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+            if (thisObject.container.frame.isThisPointHere(point, true, false) === true) {
+                return thisObject.container
+            } else {
+                return undefined
+            }
+        }
+    }
 
-      if (label !== undefined && thisObject.currentRadius >= thisObject.targetRadius) {
-        labelPoint = {
-          x: iconPosition.x + thisObject.currentRadius + 10,
-          y: iconPosition.y + fontSize * FONT_ASPECT_RATIO
+    function physics() {
+        if (Math.abs(thisObject.currentRadius - thisObject.targetRadius) >= 0.5) {
+            if (thisObject.currentRadius < thisObject.targetRadius) {
+                thisObject.currentRadius = thisObject.currentRadius + 0.5
+            } else {
+                thisObject.currentRadius = thisObject.currentRadius - 0.5
+            }
         }
 
-        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
-        browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
-      }
+        thisObject.container.frame.position.x = 0
+        thisObject.container.frame.position.y = 0
+
+        thisObject.container.frame.width = thisObject.container.frame.radius * 1.8 * SIZE_FACTOR
+        thisObject.container.frame.height = thisObject.container.frame.radius * 1 * SIZE_FACTOR
+
+        let textAreaPosition = {
+            x: 0 - thisObject.container.frame.width / 2,
+            y: 0 - thisObject.container.frame.height * 3 / 7 + CURRENT_TOP_MARGIN
+        }
+
+        textAreaPosition = thisObject.container.frame.frameThisPoint(textAreaPosition)
+        if (thisObject.visible === true) {
+            let checkPosition = {
+                x: textAreaPosition.x,
+                y: textAreaPosition.y - CURRENT_TOP_MARGIN
+            }
+            if (thisObject.isVisibleFunction(checkPosition) === false) {
+                deactivate()
+            }
+        }
+        if (thisObject.visible === true) {
+            let textAreaDiv = document.getElementById('textAreaDiv')
+            textAreaDiv.style = 'position:fixed; top:' + textAreaPosition.y + 'px; left:' + textAreaPosition.x + 'px; z-index:1; '
+        }
+    }
+
+    function drawBackground() {
+        if (thisObject.visible === true) {
+            let position = {
+                x: 0,
+                y: 0
+            }
+
+            position = thisObject.container.frame.frameThisPoint(position)
+
+            let radius = thisObject.container.frame.radius * SIZE_FACTOR
+
+            if (radius > 0.5) {
+                browserCanvasContext.beginPath()
+                browserCanvasContext.arc(position.x, position.y, radius * 1.3 + 3, 0, Math.PI * 2, true)
+                browserCanvasContext.closePath()
+                browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + 1 + ')'
+                browserCanvasContext.fill()
+
+                browserCanvasContext.beginPath()
+                browserCanvasContext.arc(position.x, position.y, radius * 1.3, 0, Math.PI * 2, true)
+                browserCanvasContext.closePath()
+                browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + 1 + ')'
+                browserCanvasContext.fill()
+            }
+        }
+    }
+    function drawForeground() {
+        let iconPosition = {
+            x: 0,
+            y: thisObject.currentRadius * 1.5
+        }
+
+        iconPosition = thisObject.container.frame.frameThisPoint(iconPosition)
+
+        /* Menu  Item */
+
+        if (thisObject.canDrawIcon === true && thisObject.currentRadius > 1) {
+            browserCanvasContext.drawImage(thisObject.icon, iconPosition.x - thisObject.currentRadius, iconPosition.y - thisObject.currentRadius, thisObject.currentRadius * 2, thisObject.currentRadius * 2)
+
+            /* Menu Label */
+
+            let label = 'Code looks good!'
+            let labelPoint
+            let fontSize = 10
+
+            browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+
+            if (label !== undefined && thisObject.currentRadius >= thisObject.targetRadius) {
+                labelPoint = {
+                    x: iconPosition.x + thisObject.currentRadius + 10,
+                    y: iconPosition.y + fontSize * FONT_ASPECT_RATIO
+                }
+
+                browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+                browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
+                browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
+            }
+        }
     }
-  }
 }

FloatingSpace/FormulaEditor.js

@@ -1,199 +1,199 @@
 
-function newFormulaEditor () {
-  const MODULE_NAME = 'Formula Editor'
+function newFormulaEditor() {
+    const MODULE_NAME = 'Formula Editor'
 
-  let thisObject = {
-    isVisibleFunction: undefined,
-    visible: false,
-    imagePathOK: undefined,
-    imagePathNOT_OK: undefined,
-    rawRadius: undefined,
-    targetRadius: undefined,
-    currentRadius: undefined,
-    container: undefined,
-    payload: undefined,
-    deactivate: deactivate,
-    activate: activate,
-    physics: physics,
-    drawBackground: drawBackground,
-    drawForeground: drawForeground,
-    getContainer: getContainer,
-    finalize: finalize,
-    initialize: initialize
-  }
-
-  thisObject.container = newContainer()
-  thisObject.container.initialize(MODULE_NAME)
-  thisObject.container.isClickeable = false
-  thisObject.container.isDraggeable = false
-  thisObject.container.detectMouseOver = false
-  thisObject.container.frame.radius = 0
-  thisObject.container.frame.position.x = 0
-  thisObject.container.frame.position.y = 0
-
-  let isMouseOver = false
-  let SIZE_FACTOR = 1.2
-
-  return thisObject
-
-  function finalize () {
-    thisObject.container.finalize()
-    thisObject.container = undefined
-    thisObject.payload = undefined
-    thisObject.isVisibleFunction = undefined
-  }
-
-  function initialize () {
-
-  }
-
-  function deactivate () {
-    if (thisObject.visible === true) {
-      thisObject.visible = false
-      let textArea = document.getElementById('textArea')
-      textArea.style.display = 'none'
-      thisObject.payload.node.code = textArea.value
-    }
-    EDITOR_ON_FOCUS = false
-  }
-
-  function activate (payload) {
-    thisObject.visible = true
-    thisObject.payload = payload
-    thisObject.rawRadius = 8
-    thisObject.targetRadius = thisObject.container.frame.radius
-    thisObject.currentRadius = 0
-    thisObject.payload.uiObject.setErrorMessage('', 0)
-
-    let textArea = document.getElementById('textArea')
-    textArea.value = payload.node.code
-    textArea.style = 'resize: none;' +
-                     ' border: none;' +
-                     ' outline: none;' +
-                     'box-shadow: none;' +
-                     'overflow:hidden;' +
-                     'font-family: ' + UI_FONT.PRIMARY + ';' +
-                     'font-size: 14px;' +
-                     'background-color: rgb(' + UI_COLOR.MANGANESE_PURPLE + ');' +
-                     'color:rgb(255, 255, 255);' +
-                    'width: ' + thisObject.container.frame.width + 'px;' +
-                     'height: ' + thisObject.container.frame.height + 'px'
-    textArea.style.display = 'block'
-    textArea.focus()
-    EDITOR_ON_FOCUS = true
-  }
-
-  function getContainer (point) {
-    let container
-    if (thisObject.visible === true) {
-      if (point.x === VERY_LARGE_NUMBER) {
-        /* The the mouse leaves the canvas, and event of mouse over with a ridiculous coordinate is triggered so that
-        anyone can react. In our case, the code editor has a text area that is not part of the canvas, so the event is
-        triggered. We compensate recognizing this coordinate and returning our container. */
-        return thisObject.container
-      }
-
-      if (thisObject.container.frame.isThisPointHere(point, true, false) === true) {
-        return thisObject.container
-      } else {
-        return undefined
-      }
-    }
-  }
-
-  function physics () {
-    if (Math.abs(thisObject.currentRadius - thisObject.targetRadius) >= 0.5) {
-      if (thisObject.currentRadius < thisObject.targetRadius) {
-        thisObject.currentRadius = thisObject.currentRadius + 0.5
-      } else {
-        thisObject.currentRadius = thisObject.currentRadius - 0.5
-      }
+    let thisObject = {
+        isVisibleFunction: undefined,
+        visible: false,
+        imagePathOK: undefined,
+        imagePathNOT_OK: undefined,
+        rawRadius: undefined,
+        targetRadius: undefined,
+        currentRadius: undefined,
+        container: undefined,
+        payload: undefined,
+        deactivate: deactivate,
+        activate: activate,
+        physics: physics,
+        drawBackground: drawBackground,
+        drawForeground: drawForeground,
+        getContainer: getContainer,
+        finalize: finalize,
+        initialize: initialize
     }
 
+    thisObject.container = newContainer()
+    thisObject.container.initialize(MODULE_NAME)
+    thisObject.container.isClickeable = false
+    thisObject.container.isDraggeable = false
+    thisObject.container.detectMouseOver = false
+    thisObject.container.frame.radius = 0
     thisObject.container.frame.position.x = 0
     thisObject.container.frame.position.y = 0
 
-    thisObject.container.frame.width = thisObject.container.frame.radius * 1.8 * SIZE_FACTOR
-    thisObject.container.frame.height = thisObject.container.frame.radius * 1 * SIZE_FACTOR
+    let isMouseOver = false
+    let SIZE_FACTOR = 1.2
 
-    let textAreaPosition = {
-      x: 0 - thisObject.container.frame.width / 2,
-      y: 0 - thisObject.container.frame.height * 3 / 7 + CURRENT_TOP_MARGIN
+    return thisObject
+
+    function finalize() {
+        thisObject.container.finalize()
+        thisObject.container = undefined
+        thisObject.payload = undefined
+        thisObject.isVisibleFunction = undefined
     }
 
-    textAreaPosition = thisObject.container.frame.frameThisPoint(textAreaPosition)
-    if (thisObject.visible === true) {
-      let checkPosition = {
-        x: textAreaPosition.x,
-        y: textAreaPosition.y - CURRENT_TOP_MARGIN
-      }
-      if (thisObject.isVisibleFunction(checkPosition) === false) {
-        deactivate()
-      }
-    }
-    if (thisObject.visible === true) {
-      let textAreaDiv = document.getElementById('textAreaDiv')
-      textAreaDiv.style = 'position:fixed; top:' + textAreaPosition.y + 'px; left:' + textAreaPosition.x + 'px; z-index:1; '
-    }
-  }
+    function initialize() {
 
-  function drawBackground () {
-    if (thisObject.visible === true) {
-      let position = {
-        x: 0,
-        y: 0
-      }
-
-      position = thisObject.container.frame.frameThisPoint(position)
-
-      let radius = thisObject.container.frame.radius * SIZE_FACTOR
-
-      if (radius > 0.5) {
-        browserCanvasContext.beginPath()
-        browserCanvasContext.arc(position.x, position.y, radius * 1.3 + 3, 0, Math.PI * 2, true)
-        browserCanvasContext.closePath()
-        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + 1 + ')'
-        browserCanvasContext.fill()
-
-        browserCanvasContext.beginPath()
-        browserCanvasContext.arc(position.x, position.y, radius * 1.3, 0, Math.PI * 2, true)
-        browserCanvasContext.closePath()
-        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.MANGANESE_PURPLE + ', ' + 1 + ')'
-        browserCanvasContext.fill()
-      }
-    }
-  }
-  function drawForeground () {
-    let iconPosition = {
-      x: 0,
-      y: thisObject.currentRadius * 1.5
     }
 
-    iconPosition = thisObject.container.frame.frameThisPoint(iconPosition)
+    function deactivate() {
+        if (thisObject.visible === true) {
+            thisObject.visible = false
+            let textArea = document.getElementById('textArea')
+            textArea.style.display = 'none'
+            thisObject.payload.node.code = textArea.value
+        }
+        EDITOR_ON_FOCUS = false
+    }
 
-      /* Menu  Item */
+    function activate(payload) {
+        thisObject.visible = true
+        thisObject.payload = payload
+        thisObject.rawRadius = 8
+        thisObject.targetRadius = thisObject.container.frame.radius
+        thisObject.currentRadius = 0
+        thisObject.payload.uiObject.setErrorMessage('', 0)
 
-    if (thisObject.canDrawIcon === true && thisObject.currentRadius > 1) {
-      browserCanvasContext.drawImage(thisObject.icon, iconPosition.x - thisObject.currentRadius, iconPosition.y - thisObject.currentRadius, thisObject.currentRadius * 2, thisObject.currentRadius * 2)
+        let textArea = document.getElementById('textArea')
+        textArea.value = payload.node.code
+        textArea.style = 'resize: none;' +
+            ' border: none;' +
+            ' outline: none;' +
+            'box-shadow: none;' +
+            'overflow:hidden;' +
+            'font-family: ' + UI_FONT.PRIMARY + ';' +
+            'font-size: 14px;' +
+            'background-color: rgb(' + UI_COLOR.MANGANESE_PURPLE + ');' +
+            'color:rgb(255, 255, 255);' +
+            'width: ' + thisObject.container.frame.width + 'px;' +
+            'height: ' + thisObject.container.frame.height + 'px'
+        textArea.style.display = 'block'
+        textArea.focus()
+        EDITOR_ON_FOCUS = true
+    }
 
-      /* Menu Label */
+    function getContainer(point) {
+        let container
+        if (thisObject.visible === true) {
+            if (point.x === VERY_LARGE_NUMBER) {
+                /* The the mouse leaves the canvas, and event of mouse over with a ridiculous coordinate is triggered so that
+                anyone can react. In our case, the code editor has a text area that is not part of the canvas, so the event is
+                triggered. We compensate recognizing this coordinate and returning our container. */
+                return thisObject.container
+            }
 
-      let label = 'Code looks good!'
-      let labelPoint
-      let fontSize = 10
+            if (thisObject.container.frame.isThisPointHere(point, true, false) === true) {
+                return thisObject.container
+            } else {
+                return undefined
+            }
+        }
+    }
 
-      browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-
-      if (label !== undefined && thisObject.currentRadius >= thisObject.targetRadius) {
-        labelPoint = {
-          x: iconPosition.x + thisObject.currentRadius + 10,
-          y: iconPosition.y + fontSize * FONT_ASPECT_RATIO
+    function physics() {
+        if (Math.abs(thisObject.currentRadius - thisObject.targetRadius) >= 0.5) {
+            if (thisObject.currentRadius < thisObject.targetRadius) {
+                thisObject.currentRadius = thisObject.currentRadius + 0.5
+            } else {
+                thisObject.currentRadius = thisObject.currentRadius - 0.5
+            }
         }
 
-        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
-        browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
-      }
+        thisObject.container.frame.position.x = 0
+        thisObject.container.frame.position.y = 0
+
+        thisObject.container.frame.width = thisObject.container.frame.radius * 1.8 * SIZE_FACTOR
+        thisObject.container.frame.height = thisObject.container.frame.radius * 1 * SIZE_FACTOR
+
+        let textAreaPosition = {
+            x: 0 - thisObject.container.frame.width / 2,
+            y: 0 - thisObject.container.frame.height * 3 / 7 + CURRENT_TOP_MARGIN
+        }
+
+        textAreaPosition = thisObject.container.frame.frameThisPoint(textAreaPosition)
+        if (thisObject.visible === true) {
+            let checkPosition = {
+                x: textAreaPosition.x,
+                y: textAreaPosition.y - CURRENT_TOP_MARGIN
+            }
+            if (thisObject.isVisibleFunction(checkPosition) === false) {
+                deactivate()
+            }
+        }
+        if (thisObject.visible === true) {
+            let textAreaDiv = document.getElementById('textAreaDiv')
+            textAreaDiv.style = 'position:fixed; top:' + textAreaPosition.y + 'px; left:' + textAreaPosition.x + 'px; z-index:1; '
+        }
+    }
+
+    function drawBackground() {
+        if (thisObject.visible === true) {
+            let position = {
+                x: 0,
+                y: 0
+            }
+
+            position = thisObject.container.frame.frameThisPoint(position)
+
+            let radius = thisObject.container.frame.radius * SIZE_FACTOR
+
+            if (radius > 0.5) {
+                browserCanvasContext.beginPath()
+                browserCanvasContext.arc(position.x, position.y, radius * 1.3 + 3, 0, Math.PI * 2, true)
+                browserCanvasContext.closePath()
+                browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + 1 + ')'
+                browserCanvasContext.fill()
+
+                browserCanvasContext.beginPath()
+                browserCanvasContext.arc(position.x, position.y, radius * 1.3, 0, Math.PI * 2, true)
+                browserCanvasContext.closePath()
+                browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.MANGANESE_PURPLE + ', ' + 1 + ')'
+                browserCanvasContext.fill()
+            }
+        }
+    }
+    function drawForeground() {
+        let iconPosition = {
+            x: 0,
+            y: thisObject.currentRadius * 1.5
+        }
+
+        iconPosition = thisObject.container.frame.frameThisPoint(iconPosition)
+
+        /* Menu  Item */
+
+        if (thisObject.canDrawIcon === true && thisObject.currentRadius > 1) {
+            browserCanvasContext.drawImage(thisObject.icon, iconPosition.x - thisObject.currentRadius, iconPosition.y - thisObject.currentRadius, thisObject.currentRadius * 2, thisObject.currentRadius * 2)
+
+            /* Menu Label */
+
+            let label = 'Code looks good!'
+            let labelPoint
+            let fontSize = 10
+
+            browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+
+            if (label !== undefined && thisObject.currentRadius >= thisObject.targetRadius) {
+                labelPoint = {
+                    x: iconPosition.x + thisObject.currentRadius + 10,
+                    y: iconPosition.y + fontSize * FONT_ASPECT_RATIO
+                }
+
+                browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+                browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
+                browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
+            }
+        }
     }
-  }
 }

FloatingSpace/Picker.js

@@ -1,220 +1,220 @@
 
-function newPicker () {
-  const MODULE_NAME = 'Picker'
+function newPicker() {
+    const MODULE_NAME = 'Picker'
 
-  let thisObject = {
-    container: undefined,
-    selectedItem: 0,
-    onParentChanged: onParentChanged,
-    getSelected: getSelected,
-    setSelected: setSelected,
-    physics: physics,
-    drawBackground: drawBackground,
-    drawForeground: drawForeground,
-    getContainer: getContainer,
-    finalize: finalize,
-    initialize: initialize
-  }
-
-  thisObject.container = newContainer()
-  thisObject.container.initialize(MODULE_NAME)
-  thisObject.container.isClickeable = false
-  thisObject.container.isDraggeable = false
-  thisObject.container.isWheelable = true
-  thisObject.container.detectMouseOver = true
-  thisObject.container.frame.radius = 0
-  thisObject.container.frame.position.x = 0
-  thisObject.container.frame.position.y = 0
-  thisObject.container.frame.width = 150
-  thisObject.container.frame.height = 60
-
-  let isMouseOver
-  let optionsList
-  let parent
-  let current
-  let parentSelected = 0
-  let propertyName
-  let selected = 0
-  let lastSelected = 0
-  let onMouseWheelEventSubscriptionId
-  let onMouseOverEventSubscriptionId
-  let onMouseNotOverEventSubscriptionId
-
-  return thisObject
-
-  function finalize () {
-    thisObject.container.eventHandler.stopListening(onMouseWheelEventSubscriptionId)
-    thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
-    thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
-    thisObject.container.finalize()
-    thisObject.container = undefined
-    optionsList = undefined
-    parent = undefined
-    current = undefined
-  }
-
-  function initialize (pOptionsList, pCurrent, pParent, pPropertyName) {
-    optionsList = pOptionsList
-    current = pCurrent
-    parent = pParent
-    propertyName = pPropertyName
-    onMouseWheelEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
-    onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
-    onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
-  }
-
-  function onMouseOver (event) {
-    isMouseOver = true
-  }
-
-  function onMouseNotOver () {
-    isMouseOver = false
-  }
-
-  function getSelected () {
-    return optionsList[selected]
-  }
-
-  function setSelected (pOptionsList, pCurrent, pParent, pSelected) {
-    if (pOptionsList !== undefined) {
-      optionsList = pOptionsList
-    }
-    if (pCurrent !== undefined) {
-      current = pCurrent
-    }
-    if (pParent !== undefined) {
-      parent = pParent
-    }
-    if (pSelected !== undefined) {
-      selected = pSelected
-    }
-    raiseEventParentChanged()
-  }
-
-  function onParentChanged (event) {
-    if (event.parent !== undefined) {
-      parent = event.parent
-    }
-    parentSelected = event.selected
-
-    selected = 0
-    let parentKeys
-
-    parentKeys = Object.keys(parent)
-    checkPropertyName()
-
-    function checkPropertyName () {
-      if (propertyName === undefined) {
-        current = parent[parentKeys[parentSelected]]
-        checkArray()
-      } else {
-        current = parent[parentKeys[parentSelected]]
-        current = current[propertyName]
-        checkArray()
-      }
+    let thisObject = {
+        container: undefined,
+        selectedItem: 0,
+        onParentChanged: onParentChanged,
+        getSelected: getSelected,
+        setSelected: setSelected,
+        physics: physics,
+        drawBackground: drawBackground,
+        drawForeground: drawForeground,
+        getContainer: getContainer,
+        finalize: finalize,
+        initialize: initialize
     }
 
-    function checkArray () {
-      if (Array.isArray(current) === false) {
-        optionsList = Object.keys(current)
-      } else {
-        optionsList = current
-      }
+    thisObject.container = newContainer()
+    thisObject.container.initialize(MODULE_NAME)
+    thisObject.container.isClickeable = false
+    thisObject.container.isDraggeable = false
+    thisObject.container.isWheelable = true
+    thisObject.container.detectMouseOver = true
+    thisObject.container.frame.radius = 0
+    thisObject.container.frame.position.x = 0
+    thisObject.container.frame.position.y = 0
+    thisObject.container.frame.width = 150
+    thisObject.container.frame.height = 60
+
+    let isMouseOver
+    let optionsList
+    let parent
+    let current
+    let parentSelected = 0
+    let propertyName
+    let selected = 0
+    let lastSelected = 0
+    let onMouseWheelEventSubscriptionId
+    let onMouseOverEventSubscriptionId
+    let onMouseNotOverEventSubscriptionId
+
+    return thisObject
+
+    function finalize() {
+        thisObject.container.eventHandler.stopListening(onMouseWheelEventSubscriptionId)
+        thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
+        thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
+        thisObject.container.finalize()
+        thisObject.container = undefined
+        optionsList = undefined
+        parent = undefined
+        current = undefined
     }
 
-    raiseEventParentChanged()
-  }
-
-  function getContainer (point) {
-    let container
-
-    if (thisObject.container.frame.isThisPointHere(point, true, false) === true) {
-      return thisObject.container
-    }
-  }
-
-  function getSelected () {
-    return optionsList[selected]
-  }
-
-  function onMouseWheel () {
-    delta = event.wheelDelta
-    if (delta > 0) {
-      delta = -1
-    } else {
-      delta = 1
+    function initialize(pOptionsList, pCurrent, pParent, pPropertyName) {
+        optionsList = pOptionsList
+        current = pCurrent
+        parent = pParent
+        propertyName = pPropertyName
+        onMouseWheelEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
+        onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
+        onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
     }
 
-    selected = selected + delta
-    if (selected < 0) { selected = 0 }
-    if (selected > optionsList.length - 1) {
-      selected = optionsList.length - 1
+    function onMouseOver(event) {
+        isMouseOver = true
     }
 
-    if (selected !== lastSelected) {
-      lastSelected = selected
-      raiseEventParentChanged()
+    function onMouseNotOver() {
+        isMouseOver = false
     }
-  }
 
-  function raiseEventParentChanged () {
-    let event = {
-      selected: selected,
-      parent: current,
-      propertyName: propertyName
+    function getSelected() {
+        return optionsList[selected]
     }
-    thisObject.container.eventHandler.raiseEvent('onParentChanged', event)
-  }
 
-  function physics () {
-
-  }
-
-  function drawBackground () {
-
-  }
-
-  function drawForeground () {
-    const FONT_SIZE = 15
-    const VISIBLE_LABELS = 5
-    let fontSize
-    let fontColor
-    let opacity
-
-    for (let i = 0; i < VISIBLE_LABELS; i++) {
-      let index = i - 2 + selected
-      let label = ''
-      if (index >= 0 && index < optionsList.length) {
-        label = optionsList[index]
-      }
-      fontColor = UI_COLOR.LIGHT_GREY
-      switch (i) {
-        case 0:
-          fontSize = FONT_SIZE - 5
-          opacity = 0.4
-          break
-        case 1:
-          fontSize = FONT_SIZE - 3
-          opacity = 0.5
-          break
-        case 2:
-          fontSize = FONT_SIZE - 0
-          fontColor = UI_COLOR.BLACK
-          opacity = 1
-          break
-        case 3:
-          fontSize = FONT_SIZE - 3
-          opacity = 0.5
-          break
-        case 4:
-          fontSize = FONT_SIZE - 5
-          opacity = 0.4
-          break
-      }
-
-      if (i === 2 || isMouseOver === true) {
-        drawLabel(label, 1 / 2, i / VISIBLE_LABELS, 0, 0, fontSize, thisObject.container, fontColor, undefined, undefined, opacity)
-      }
+    function setSelected(pOptionsList, pCurrent, pParent, pSelected) {
+        if (pOptionsList !== undefined) {
+            optionsList = pOptionsList
+        }
+        if (pCurrent !== undefined) {
+            current = pCurrent
+        }
+        if (pParent !== undefined) {
+            parent = pParent
+        }
+        if (pSelected !== undefined) {
+            selected = pSelected
+        }
+        raiseEventParentChanged()
+    }
+
+    function onParentChanged(event) {
+        if (event.parent !== undefined) {
+            parent = event.parent
+        }
+        parentSelected = event.selected
+
+        selected = 0
+        let parentKeys
+
+        parentKeys = Object.keys(parent)
+        checkPropertyName()
+
+        function checkPropertyName() {
+            if (propertyName === undefined) {
+                current = parent[parentKeys[parentSelected]]
+                checkArray()
+            } else {
+                current = parent[parentKeys[parentSelected]]
+                current = current[propertyName]
+                checkArray()
+            }
+        }
+
+        function checkArray() {
+            if (Array.isArray(current) === false) {
+                optionsList = Object.keys(current)
+            } else {
+                optionsList = current
+            }
+        }
+
+        raiseEventParentChanged()
+    }
+
+    function getContainer(point) {
+        let container
+
+        if (thisObject.container.frame.isThisPointHere(point, true, false) === true) {
+            return thisObject.container
+        }
+    }
+
+    function getSelected() {
+        return optionsList[selected]
+    }
+
+    function onMouseWheel() {
+        delta = event.wheelDelta
+        if (delta > 0) {
+            delta = -1
+        } else {
+            delta = 1
+        }
+
+        selected = selected + delta
+        if (selected < 0) { selected = 0 }
+        if (selected > optionsList.length - 1) {
+            selected = optionsList.length - 1
+        }
+
+        if (selected !== lastSelected) {
+            lastSelected = selected
+            raiseEventParentChanged()
+        }
+    }
+
+    function raiseEventParentChanged() {
+        let event = {
+            selected: selected,
+            parent: current,
+            propertyName: propertyName
+        }
+        thisObject.container.eventHandler.raiseEvent('onParentChanged', event)
+    }
+
+    function physics() {
+
+    }
+
+    function drawBackground() {
+
+    }
+
+    function drawForeground() {
+        const FONT_SIZE = 15
+        const VISIBLE_LABELS = 5
+        let fontSize
+        let fontColor
+        let opacity
+
+        for (let i = 0; i < VISIBLE_LABELS; i++) {
+            let index = i - 2 + selected
+            let label = ''
+            if (index >= 0 && index < optionsList.length) {
+                label = optionsList[index]
+            }
+            fontColor = UI_COLOR.LIGHT_GREY
+            switch (i) {
+                case 0:
+                    fontSize = FONT_SIZE - 5
+                    opacity = 0.4
+                    break
+                case 1:
+                    fontSize = FONT_SIZE - 3
+                    opacity = 0.5
+                    break
+                case 2:
+                    fontSize = FONT_SIZE - 0
+                    fontColor = UI_COLOR.BLACK
+                    opacity = 1
+                    break
+                case 3:
+                    fontSize = FONT_SIZE - 3
+                    opacity = 0.5
+                    break
+                case 4:
+                    fontSize = FONT_SIZE - 5
+                    opacity = 0.4
+                    break
+            }
+
+            if (i === 2 || isMouseOver === true) {
+                drawLabel(label, 1 / 2, i / VISIBLE_LABELS, 0, 0, fontSize, thisObject.container, fontColor, undefined, undefined, opacity)
+            }
+        }
     }
-  }
 }

FloatingSpace/UiObjectTitle.js

@@ -1,358 +1,358 @@
 
-function newUiObjectTitle () {
-  const MODULE_NAME = 'UI Object Title'
-  const ERROR_LOG = true
+function newUiObjectTitle() {
+    const MODULE_NAME = 'UI Object Title'
+    const ERROR_LOG = true
 
-  const logger = newWebDebugLog()
-  logger.fileName = MODULE_NAME
+    const logger = newWebDebugLog()
+    logger.fileName = MODULE_NAME
 
-  let thisObject = {
-    fitFunction: undefined,
-    isVisibleFunction: undefined,
-    allwaysVisible: undefined,
-    editMode: undefined,
-    container: undefined,
-    payload: undefined,
-    isDefault: undefined,
-    enterEditMode: enterEditMode,
-    exitEditMode: exitEditMode,
-    physics: physics,
-    draw: draw,
-    getContainer: getContainer,
-    finalize: finalize,
-    initialize: initialize
-  }
-
-  thisObject.container = newContainer()
-  thisObject.container.initialize(MODULE_NAME)
-  thisObject.container.isClickeable = true
-  thisObject.container.isDraggeable = false
-  thisObject.container.frame.radius = 0
-
-  let selfFocusEventSubscriptionId
-  let selfNotFocuskEventSubscriptionId
-  let selfMouseClickEventSubscriptionId
-
-  return thisObject
-
-  function finalize () {
-    thisObject.container.eventHandler.stopListening(selfFocusEventSubscriptionId)
-    thisObject.container.eventHandler.stopListening(selfNotFocuskEventSubscriptionId)
-    thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId)
-
-    thisObject.container.finalize()
-    thisObject.container = undefined
-    thisObject.payload = undefined
-    thisObject.isVisibleFunction = undefined
-    thisObject.fitFunction = undefined
-  }
-
-  function initialize (payload) {
-    thisObject.payload = payload
-
-    thisObject.allwaysVisible = false // Default value
-    let nodeDefinition = getNodeDefinition(thisObject.payload.node)
-    if (nodeDefinition !== undefined) {
-      if (nodeDefinition.isTitleAllwaysVisible === true) {
-        thisObject.allwaysVisible = true
-      }
+    let thisObject = {
+        fitFunction: undefined,
+        isVisibleFunction: undefined,
+        allwaysVisible: undefined,
+        editMode: undefined,
+        container: undefined,
+        payload: undefined,
+        isDefault: undefined,
+        enterEditMode: enterEditMode,
+        exitEditMode: exitEditMode,
+        physics: physics,
+        draw: draw,
+        getContainer: getContainer,
+        finalize: finalize,
+        initialize: initialize
     }
 
-    selfFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onFocus', onFocus)
-    selfNotFocuskEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus)
-    selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
-  }
+    thisObject.container = newContainer()
+    thisObject.container.initialize(MODULE_NAME)
+    thisObject.container.isClickeable = true
+    thisObject.container.isDraggeable = false
+    thisObject.container.frame.radius = 0
 
-  function getContainer (point) {
-    if (AT_FULL_SCREEN_MODE === true) { return } // Fullscreen mode does not allow INPUT elements
+    let selfFocusEventSubscriptionId
+    let selfNotFocuskEventSubscriptionId
+    let selfMouseClickEventSubscriptionId
 
-    let container
+    return thisObject
 
-    if (thisObject.editMode === true) {
-      if (point.x === VERY_LARGE_NUMBER) {
-        /* The the mouse leaves the canvas, and event of mouse over with a ridiculous coordinate is triggered so that
-        anyone can react. In our case, this object has an html input element that is not part of the canvas, so the event is
-        triggered. We compensate recognizing this coordinate and returning our container. */
-        return thisObject.container
-      }
+    function finalize() {
+        thisObject.container.eventHandler.stopListening(selfFocusEventSubscriptionId)
+        thisObject.container.eventHandler.stopListening(selfNotFocuskEventSubscriptionId)
+        thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId)
+
+        thisObject.container.finalize()
+        thisObject.container = undefined
+        thisObject.payload = undefined
+        thisObject.isVisibleFunction = undefined
+        thisObject.fitFunction = undefined
     }
-    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-      return thisObject.container
-    } else {
-      return undefined
-    }
-  }
 
-  function physics () {
-    inheritancePhysics()
-    defaultPhysics()
-  }
+    function initialize(payload) {
+        thisObject.payload = payload
 
-  function defaultPhysics () {
-    if (thisObject.payload.title !== 'New ' + thisObject.payload.node.type && thisObject.payload.title !== 'My ' + thisObject.payload.node.type) {
-      thisObject.isDefault = false
-    } else {
-      thisObject.isDefault = true
-    }
-  }
-
-  function inheritancePhysics () {
-    if (thisObject.payload.title === undefined) { return }
-
-    /* It is possible to override the default title by setting the APP SCHEMA property 'title' */
-    let nodeDefinition = getNodeDefinition(thisObject.payload.node)
-    if (nodeDefinition.title !== undefined) {
-      thisObject.payload.title = ''
-      thisObject.payload.node.name = ''
-      let separator = ''
-      for (let i = 0; i < nodeDefinition.title.length; i++) {
-        let titleReference = nodeDefinition.title[i]
-        switch (titleReference) {
-          case 'Use Reference Parent': {
-            let nodeToUse = thisObject.payload.node.payload.referenceParent
-            if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
-              thisObject.payload.title = thisObject.payload.title + separator + nodeToUse.payload.title
-              thisObject.payload.node.name = thisObject.payload.node.name + separator + nodeToUse.payload.node.name
+        thisObject.allwaysVisible = false // Default value
+        let nodeDefinition = getNodeDefinition(thisObject.payload.node)
+        if (nodeDefinition !== undefined) {
+            if (nodeDefinition.isTitleAllwaysVisible === true) {
+                thisObject.allwaysVisible = true
             }
-            break
-          }
-          case 'Use Reference Grandparent': {
-            let nodeToUse = thisObject.payload.node.payload.referenceParent
-            if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
-              nodeToUse = thisObject.payload.node.payload.referenceParent.payload.referenceParent
-              if (nodeToUse !== undefined) {
-                thisObject.payload.title = thisObject.payload.title + separator + nodeToUse.payload.title
-                thisObject.payload.node.name = thisObject.payload.node.name + separator + nodeToUse.payload.node.name
-              }
+        }
+
+        selfFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onFocus', onFocus)
+        selfNotFocuskEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus)
+        selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
+    }
+
+    function getContainer(point) {
+        if (AT_FULL_SCREEN_MODE === true) { return } // Fullscreen mode does not allow INPUT elements
+
+        let container
+
+        if (thisObject.editMode === true) {
+            if (point.x === VERY_LARGE_NUMBER) {
+                /* The the mouse leaves the canvas, and event of mouse over with a ridiculous coordinate is triggered so that
+                anyone can react. In our case, this object has an html input element that is not part of the canvas, so the event is
+                triggered. We compensate recognizing this coordinate and returning our container. */
+                return thisObject.container
             }
-            break
-          }
-          case 'Use Reference Parent Parent': {
-            let nodeToUse = thisObject.payload.node.payload.referenceParent
-            if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
-              nodeToUse = thisObject.payload.node.payload.referenceParent.payload.parentNode
-              if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
-                thisObject.payload.title = thisObject.payload.title + separator + nodeToUse.payload.title
-                thisObject.payload.node.name = thisObject.payload.node.name + separator + nodeToUse.payload.node.name
-              }
-            }
-            break
-          }
-          case 'Use Reference Parent Parent Parent': {
-            let nodeToUse = thisObject.payload.node.payload.referenceParent
-            if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
-              nodeToUse = thisObject.payload.node.payload.referenceParent.payload.parentNode
-              if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
-                nodeToUse = thisObject.payload.node.payload.referenceParent.payload.parentNode.payload.parentNode
-                if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
-                  thisObject.payload.title = thisObject.payload.title + separator + nodeToUse.payload.title
-                  thisObject.payload.node.name = thisObject.payload.node.name + separator + nodeToUse.payload.node.name
+        }
+        if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+            return thisObject.container
+        } else {
+            return undefined
+        }
+    }
+
+    function physics() {
+        inheritancePhysics()
+        defaultPhysics()
+    }
+
+    function defaultPhysics() {
+        if (thisObject.payload.title !== 'New ' + thisObject.payload.node.type && thisObject.payload.title !== 'My ' + thisObject.payload.node.type) {
+            thisObject.isDefault = false
+        } else {
+            thisObject.isDefault = true
+        }
+    }
+
+    function inheritancePhysics() {
+        if (thisObject.payload.title === undefined) { return }
+
+        /* It is possible to override the default title by setting the APP SCHEMA property 'title' */
+        let nodeDefinition = getNodeDefinition(thisObject.payload.node)
+        if (nodeDefinition.title !== undefined) {
+            thisObject.payload.title = ''
+            thisObject.payload.node.name = ''
+            let separator = ''
+            for (let i = 0; i < nodeDefinition.title.length; i++) {
+                let titleReference = nodeDefinition.title[i]
+                switch (titleReference) {
+                    case 'Use Reference Parent': {
+                        let nodeToUse = thisObject.payload.node.payload.referenceParent
+                        if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
+                            thisObject.payload.title = thisObject.payload.title + separator + nodeToUse.payload.title
+                            thisObject.payload.node.name = thisObject.payload.node.name + separator + nodeToUse.payload.node.name
+                        }
+                        break
+                    }
+                    case 'Use Reference Grandparent': {
+                        let nodeToUse = thisObject.payload.node.payload.referenceParent
+                        if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
+                            nodeToUse = thisObject.payload.node.payload.referenceParent.payload.referenceParent
+                            if (nodeToUse !== undefined) {
+                                thisObject.payload.title = thisObject.payload.title + separator + nodeToUse.payload.title
+                                thisObject.payload.node.name = thisObject.payload.node.name + separator + nodeToUse.payload.node.name
+                            }
+                        }
+                        break
+                    }
+                    case 'Use Reference Parent Parent': {
+                        let nodeToUse = thisObject.payload.node.payload.referenceParent
+                        if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
+                            nodeToUse = thisObject.payload.node.payload.referenceParent.payload.parentNode
+                            if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
+                                thisObject.payload.title = thisObject.payload.title + separator + nodeToUse.payload.title
+                                thisObject.payload.node.name = thisObject.payload.node.name + separator + nodeToUse.payload.node.name
+                            }
+                        }
+                        break
+                    }
+                    case 'Use Reference Parent Parent Parent': {
+                        let nodeToUse = thisObject.payload.node.payload.referenceParent
+                        if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
+                            nodeToUse = thisObject.payload.node.payload.referenceParent.payload.parentNode
+                            if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
+                                nodeToUse = thisObject.payload.node.payload.referenceParent.payload.parentNode.payload.parentNode
+                                if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
+                                    thisObject.payload.title = thisObject.payload.title + separator + nodeToUse.payload.title
+                                    thisObject.payload.node.name = thisObject.payload.node.name + separator + nodeToUse.payload.node.name
+                                }
+                            }
+                        }
+                        break
+                    }
+                    case 'Use Reference Parent Parent Parent': {
+                        let nodeToUse = thisObject.payload.node.payload.referenceParent
+                        if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
+                            nodeToUse = thisObject.payload.node.payload.referenceParent.payload.parentNode
+                            if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
+                                nodeToUse = thisObject.payload.node.payload.referenceParent.payload.parentNode.payload.parentNode
+                                if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
+                                    thisObject.payload.title = thisObject.payload.title + separator + nodeToUse.payload.title
+                                    thisObject.payload.node.name = thisObject.payload.node.name + separator + nodeToUse.payload.node.name
+                                }
+                            }
+                        }
+                        break
+                    }
+                    default: {
+                        if (titleReference.indexOf('Use Child @') === 0) {
+                            let propertyName = titleReference.substring(titleReference.indexOf('@') + 1, titleReference.length)
+                            let childNode = thisObject.payload.node[propertyName]
+                            if (childNode === undefined) { break }
+                            thisObject.payload.title = thisObject.payload.title + separator + childNode.name
+                            thisObject.payload.node.name = thisObject.payload.node.name + separator + childNode.name
+                        }
+                    }
                 }
-              }
+                separator = ' '
             }
-            break
-          }
-          case 'Use Reference Parent Parent Parent': {
-            let nodeToUse = thisObject.payload.node.payload.referenceParent
-            if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
-              nodeToUse = thisObject.payload.node.payload.referenceParent.payload.parentNode
-              if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
-                nodeToUse = thisObject.payload.node.payload.referenceParent.payload.parentNode.payload.parentNode
-                if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
-                  thisObject.payload.title = thisObject.payload.title + separator + nodeToUse.payload.title
-                  thisObject.payload.node.name = thisObject.payload.node.name + separator + nodeToUse.payload.node.name
+        }
+
+        /* The name becomes the title. */
+        if (thisObject.payload.node.name !== undefined) {
+            thisObject.payload.title = thisObject.payload.node.name
+        }
+
+        let title = trimTitle(thisObject.payload.title)
+
+        /* Here we set the dimensions and position of this object */
+        const FRAME_HEIGHT = 25
+        const Y_OFFSET = -20
+        const FRAME_WIDTH = (title.length + 2) / 2 * thisObject.payload.floatingObject.currentFontSize * FONT_ASPECT_RATIO * 1.2 * 2
+        thisObject.container.frame.position.x = 0 - FRAME_WIDTH / 2
+        thisObject.container.frame.position.y = 0 - thisObject.container.frame.radius * 1 / 2 - thisObject.payload.floatingObject.currentFontSize * FONT_ASPECT_RATIO + Y_OFFSET - FRAME_HEIGHT
+
+        thisObject.container.frame.width = FRAME_WIDTH
+        thisObject.container.frame.height = FRAME_HEIGHT
+
+        if (thisObject.editMode === true) {
+            let inputPosition = {
+                x: 0,
+                y: 0 + CURRENT_TOP_MARGIN + Y_OFFSET
+            }
+
+            inputPosition = thisObject.container.frame.frameThisPoint(inputPosition)
+
+            if (inputPosition.y < CURRENT_TOP_MARGIN) { exitEditMode() }
+
+            let inputDiv = document.getElementById('inputDiv')
+            inputDiv.style = 'position:absolute; top:' + inputPosition.y + 'px; left:' + inputPosition.x + 'px; z-index:1; '
+        }
+    }
+
+    function onFocus() {
+        thisObject.isOnFocus = true
+    }
+
+    function onNotFocus() {
+        thisObject.isOnFocus = false
+        exitEditMode()
+    }
+
+    function onMouseClick(event) {
+        let nodeDefinition = getNodeDefinition(thisObject.payload.node)
+        if (nodeDefinition.title !== undefined) { return }
+
+        let checkPoint = {
+            x: 0,
+            y: 0
+        }
+        checkPoint = thisObject.container.frame.frameThisPoint(checkPoint)
+
+        if (thisObject.isVisibleFunction(checkPoint) === true) {
+            enterEditMode()
+        }
+    }
+
+    function exitEditMode() {
+        if (thisObject.editMode === true) {
+            thisObject.editMode = false
+            let input = document.getElementById('input')
+            input.style.display = 'none'
+            if (input.value.length > 2) {
+                thisObject.payload.title = input.value
+                thisObject.payload.node.name = input.value
+            }
+        }
+        let inputDiv = document.getElementById('inputDiv')
+        inputDiv.style = 'position:absolute; top:' + '-100' + 'px; left:' + '-100' + 'px; z-index:1; '
+    }
+
+    function enterEditMode() {
+        const WIDTH = thisObject.container.frame.width
+        const HEIGHT = thisObject.container.frame.height
+        let fontSize = thisObject.payload.floatingObject.currentFontSize
+
+        thisObject.editMode = true
+        let input = document.getElementById('input')
+        input.value = thisObject.payload.title
+
+        let backgroundColor = '0, 0, 0'
+        if (thisObject.payload.uiObject.codeEditor !== undefined) {
+            if (thisObject.payload.uiObject.codeEditor.visible === true) {
+                backgroundColor = '204, 88, 53'
+            }
+        }
+
+        input.style = 'resize: none; border: none; outline: none; box-shadow: none; overflow:hidden; font-family: Saira Condensed; font-size: ' + fontSize + 'px; background-color: rgb(' + backgroundColor + ');color:rgb(255, 255, 255); width: ' + WIDTH + 'px; height: ' + HEIGHT + 'px'
+        input.style.display = 'block'
+        input.focus()
+    }
+
+    function draw() {
+        if (thisObject.isOnFocus === true || thisObject.allwaysVisible === true || thisObject.isDefault === false) {
+            if (thisObject.payload.uiObject.codeEditor !== undefined) {
+                if (thisObject.payload.uiObject.codeEditor.visible !== true) {
+                    drawTitleBackground()
                 }
-              }
+            } else {
+                drawTitleBackground()
             }
-            break
-          }
-          default: {
-            if (titleReference.indexOf('Use Child @') === 0) {
-              let propertyName = titleReference.substring(titleReference.indexOf('@') + 1, titleReference.length)
-              let childNode = thisObject.payload.node[propertyName]
-              if (childNode === undefined) { break }
-              thisObject.payload.title = thisObject.payload.title + separator + childNode.name
-              thisObject.payload.node.name = thisObject.payload.node.name + separator + childNode.name
+
+            drawText()
+        }
+    }
+
+    function drawTitleBackground() {
+        if (thisObject.editMode !== true) {
+            let params = {
+                cornerRadius: 3,
+                lineWidth: 0.1,
+                container: thisObject.container,
+                borderColor: UI_COLOR.BLACK,
+                backgroundColor: UI_COLOR.BLACK,
+                castShadow: false,
+                opacity: 0.25
             }
-          }
+
+            roundedCornersBackground(params)
         }
-        separator = ' '
-      }
     }
 
-    /* The name becomes the title. */
-    if (thisObject.payload.node.name !== undefined) {
-      thisObject.payload.title = thisObject.payload.node.name
-    }
+    function drawText() {
+        if (thisObject.editMode !== true) {
+            let radius = thisObject.container.frame.radius
+            let labelPoint
+            let fontSize = thisObject.payload.floatingObject.currentFontSize
+            let label
 
-    let title = trimTitle(thisObject.payload.title)
+            if (radius > 6 && (thisObject.isOnFocus === true || thisObject.allwaysVisible === true || thisObject.isDefault === false)) {
+                browserCanvasContext.strokeStyle = thisObject.payload.floatingObject.labelStrokeStyle
 
-    /* Here we set the dimensions and position of this object */
-    const FRAME_HEIGHT = 25
-    const Y_OFFSET = -20
-    const FRAME_WIDTH = (title.length + 2) / 2 * thisObject.payload.floatingObject.currentFontSize * FONT_ASPECT_RATIO * 1.2 * 2
-    thisObject.container.frame.position.x = 0 - FRAME_WIDTH / 2
-    thisObject.container.frame.position.y = 0 - thisObject.container.frame.radius * 1 / 2 - thisObject.payload.floatingObject.currentFontSize * FONT_ASPECT_RATIO + Y_OFFSET - FRAME_HEIGHT
+                browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
 
-    thisObject.container.frame.width = FRAME_WIDTH
-    thisObject.container.frame.height = FRAME_HEIGHT
+                label = thisObject.payload.title
 
-    if (thisObject.editMode === true) {
-      let inputPosition = {
-        x: 0,
-        y: 0 + CURRENT_TOP_MARGIN + Y_OFFSET
-      }
+                if (label !== undefined) {
+                    label = trimTitle(label)
 
-      inputPosition = thisObject.container.frame.frameThisPoint(inputPosition)
+                    labelPoint = {
+                        x: 5,
+                        y: thisObject.container.frame.height * 0.8
+                    }
 
-      if (inputPosition.y < CURRENT_TOP_MARGIN) { exitEditMode() }
+                    labelPoint = thisObject.container.frame.frameThisPoint(labelPoint)
 
-      let inputDiv = document.getElementById('inputDiv')
-      inputDiv.style = 'position:absolute; top:' + inputPosition.y + 'px; left:' + inputPosition.x + 'px; z-index:1; '
-    }
-  }
+                    if (canvas.floatingSpace.inMapMode === true) {
+                        labelPoint = canvas.floatingSpace.transformPointToMap(labelPoint)
+                        labelPoint.x = labelPoint.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO
+                        labelPoint.y = labelPoint.y - 35
 
-  function onFocus () {
-    thisObject.isOnFocus = true
-  }
+                        let nodeDefinition = getNodeDefinition(thisObject.payload.node)
+                        if (nodeDefinition !== undefined) {
+                            if (nodeDefinition.isHierarchyHead !== true) {
+                                return
+                            }
+                        }
+                    }
 
-  function onNotFocus () {
-    thisObject.isOnFocus = false
-    exitEditMode()
-  }
-
-  function onMouseClick (event) {
-    let nodeDefinition = getNodeDefinition(thisObject.payload.node)
-    if (nodeDefinition.title !== undefined) { return }
-
-    let checkPoint = {
-      x: 0,
-      y: 0
-    }
-    checkPoint = thisObject.container.frame.frameThisPoint(checkPoint)
-
-    if (thisObject.isVisibleFunction(checkPoint) === true) {
-      enterEditMode()
-    }
-  }
-
-  function exitEditMode () {
-    if (thisObject.editMode === true) {
-      thisObject.editMode = false
-      let input = document.getElementById('input')
-      input.style.display = 'none'
-      if (input.value.length > 2) {
-        thisObject.payload.title = input.value
-        thisObject.payload.node.name = input.value
-      }
-    }
-    let inputDiv = document.getElementById('inputDiv')
-    inputDiv.style = 'position:absolute; top:' + '-100' + 'px; left:' + '-100' + 'px; z-index:1; '
-  }
-
-  function enterEditMode () {
-    const WIDTH = thisObject.container.frame.width
-    const HEIGHT = thisObject.container.frame.height
-    let fontSize = thisObject.payload.floatingObject.currentFontSize
-
-    thisObject.editMode = true
-    let input = document.getElementById('input')
-    input.value = thisObject.payload.title
-
-    let backgroundColor = '0, 0, 0'
-    if (thisObject.payload.uiObject.codeEditor !== undefined) {
-      if (thisObject.payload.uiObject.codeEditor.visible === true) {
-        backgroundColor = '204, 88, 53'
-      }
-    }
-
-    input.style = 'resize: none; border: none; outline: none; box-shadow: none; overflow:hidden; font-family: Saira Condensed; font-size: ' + fontSize + 'px; background-color: rgb(' + backgroundColor + ');color:rgb(255, 255, 255); width: ' + WIDTH + 'px; height: ' + HEIGHT + 'px'
-    input.style.display = 'block'
-    input.focus()
-  }
-
-  function draw () {
-    if (thisObject.isOnFocus === true || thisObject.allwaysVisible === true || thisObject.isDefault === false) {
-      if (thisObject.payload.uiObject.codeEditor !== undefined) {
-        if (thisObject.payload.uiObject.codeEditor.visible !== true) {
-          drawTitleBackground()
-        }
-      } else {
-        drawTitleBackground()
-      }
-
-      drawText()
-    }
-  }
-
-  function drawTitleBackground () {
-    if (thisObject.editMode !== true) {
-      let params = {
-        cornerRadius: 3,
-        lineWidth: 0.1,
-        container: thisObject.container,
-        borderColor: UI_COLOR.BLACK,
-        backgroundColor: UI_COLOR.BLACK,
-        castShadow: false,
-        opacity: 0.25
-      }
-
-      roundedCornersBackground(params)
-    }
-  }
-
-  function drawText () {
-    if (thisObject.editMode !== true) {
-      let radius = thisObject.container.frame.radius
-      let labelPoint
-      let fontSize = thisObject.payload.floatingObject.currentFontSize
-      let label
-
-      if (radius > 6 && (thisObject.isOnFocus === true || thisObject.allwaysVisible === true || thisObject.isDefault === false)) {
-        browserCanvasContext.strokeStyle = thisObject.payload.floatingObject.labelStrokeStyle
-
-        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-
-        label = thisObject.payload.title
-
-        if (label !== undefined) {
-          label = trimTitle(label)
-
-          labelPoint = {
-            x: 5,
-            y: thisObject.container.frame.height * 0.8
-          }
-
-          labelPoint = thisObject.container.frame.frameThisPoint(labelPoint)
-
-          if (canvas.floatingSpace.inMapMode === true) {
-            labelPoint = canvas.floatingSpace.transformPointToMap(labelPoint)
-            labelPoint.x = labelPoint.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO
-            labelPoint.y = labelPoint.y - 35
-
-            let nodeDefinition = getNodeDefinition(thisObject.payload.node)
-            if (nodeDefinition !== undefined) {
-              if (nodeDefinition.isHierarchyHead !== true) {
-                return
-              }
+                    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+                    browserCanvasContext.fillStyle = thisObject.payload.floatingObject.labelStrokeStyle
+                    browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
+                }
             }
-          }
-
-          browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-          browserCanvasContext.fillStyle = thisObject.payload.floatingObject.labelStrokeStyle
-          browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
         }
-      }
     }
-  }
 
-  function trimTitle (title) {
-    if (title === undefined) { return }
-    const MAX_LABEL_LENGTH = 50
-    if (title.length > MAX_LABEL_LENGTH) {
-      title = title.substring(0, MAX_LABEL_LENGTH) + '...'
+    function trimTitle(title) {
+        if (title === undefined) { return }
+        const MAX_LABEL_LENGTH = 50
+        if (title.length > MAX_LABEL_LENGTH) {
+            title = title.substring(0, MAX_LABEL_LENGTH) + '...'
+        }
+        return title
     }
-    return title
-  }
 }
 

Globals.js

@@ -1,5 +1,5 @@
 
- /* User Interface Colors */
+/* User Interface Colors */
 
 const CANVAS_APP_NAME = 'Canvas App'
 
@@ -49,36 +49,36 @@ let FONT_ASPECT_RATIO = 0.32;
 let ANIMATION_FRAME_PER_SECONDS
 
 const GET_CONTAINER_PURPOSE = {
-  MOUSE_OVER: 1,
-  MOUSE_WHEEL: 2,
-  MOUSE_CLICK: 3,
-  DRAGGING: 4
+    MOUSE_OVER: 1,
+    MOUSE_WHEEL: 2,
+    MOUSE_CLICK: 3,
+    DRAGGING: 4
 }
 
 const ANGLE_TO_PARENT = {
-  NOT_FIXED: 0,
-  RANGE_360: 1,
-  RANGE_180: 2,
-  RANGE_90: 3,
-  RANGE_45: 4
+    NOT_FIXED: 0,
+    RANGE_360: 1,
+    RANGE_180: 2,
+    RANGE_90: 3,
+    RANGE_45: 4
 }
 
 const DISTANCE_TO_PARENT = {
-  NOT_FIXED: 0,
-  PARENT_025X: 1,
-  PARENT_050X: 2,
-  PARENT_100X: 3,
-  PARENT_150X: 4,
-  PARENT_200X: 5
+    NOT_FIXED: 0,
+    PARENT_025X: 1,
+    PARENT_050X: 2,
+    PARENT_100X: 3,
+    PARENT_150X: 4,
+    PARENT_200X: 5
 }
 
 const ARRANGEMENT_STYLE = {
-  CONCAVE: 0,
-  CONVEX: 1,
-  VERTICAL_RIGHT: 2,
-  VERTICAL_LEFT: 3,
-  HORIZONTAL_BOTTOM: 4,
-  HORIZONTAL_TOP: 5
+    CONCAVE: 0,
+    CONVEX: 1,
+    VERTICAL_RIGHT: 2,
+    VERTICAL_LEFT: 3,
+    HORIZONTAL_BOTTOM: 4,
+    HORIZONTAL_TOP: 5
 }
 
 /* User Interface Panels */
@@ -138,11 +138,11 @@ let LOGGED_IN_USER_LOCAL_STORAGE_KEY
 let LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE_KEY
 
 if (testUser !== null) {
-   LOGGED_IN_USER_LOCAL_STORAGE_KEY = "test_user"
-   LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE_KEY =  "test_access_token"
+    LOGGED_IN_USER_LOCAL_STORAGE_KEY = "test_user"
+    LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE_KEY = "test_access_token"
 } else {
-  LOGGED_IN_USER_LOCAL_STORAGE_KEY =  "user"
-  LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE_KEY = "access_token"
+    LOGGED_IN_USER_LOCAL_STORAGE_KEY = "user"
+    LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE_KEY = "access_token"
 }
 
 const MAX_DEFAULT_RATE_SCALE_VALUE = 35000; // This is needed to know the scale of the market time line.
@@ -222,7 +222,7 @@ const TIME_MACHINE_WIDTH = 8;
 const TIME_MACHINE_HEIGHT = 8;
 
 let mediaRecorder // to downloadText canvas animation as a mediaRecorder
-let marketPanoramaCanvas 
+let marketPanoramaCanvas
 let ARE_WE_RECORDING_A_VIDEO = false
 let ARE_WE_RECORDING_A_MARKET_PANORAMA = false
 let PANORAMA_WAS_PANNED = false

Panels/LayersPanel.js

@@ -1,519 +1,519 @@
-function newLayersPanel () {
-  let thisObject = {
-    name: 'Layers Panel',
-    fitFunction: undefined,
-    container: undefined,
-    layers: [],
-    payload: undefined,
-    isVisible: true,
-    upDownButton: undefined,
-    leftRightButton: undefined,
-    physics: physics,
-    draw: draw,
-    getContainer: getContainer,
-    initialize: initialize,
-    finalize: finalize
-  }
-
-  thisObject.container = newContainer()
-  thisObject.container.initialize()
-  thisObject.container.isDraggeable = true
-  thisObject.container.isWheelable = true
-  thisObject.container.detectMouseOver = true
-
-  let isInitialized = false
-  let mouseOverCounter = 0
-
-  let layersMap = new Map()
-  let visibleLayers = []
-  let firstVisibleLayer = 1
-
-  const LAYER_SEPARATION = 0
-
-  let headerHeight = 40
-  let footerHeight = 10
-  let layerHeight = 70
-  let desiredVisibleLayers = 5
-  let posibleVisibleLayers = 5
-  let desiredPanelHeight = (layerHeight + LAYER_SEPARATION) * desiredVisibleLayers + headerHeight + footerHeight
-  let posiblePanelHeight = (layerHeight + LAYER_SEPARATION) * posibleVisibleLayers + headerHeight + footerHeight
-
-  let onMouseWheelEventSuscriptionId
-  let onMouseOverEventSubscriptionId
-  let onMouseNotOverEventSubscriptionId
-
-  let isMouseOver
-  return thisObject
-
-  function finalize () {
-    thisObject.container.eventHandler.stopListening(onMouseWheelEventSuscriptionId)
-    thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
-    thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
-
-    thisObject.upDownButton.finalize()
-    thisObject.upDownButton = undefined
-
-    thisObject.leftRightButton.finalize()
-    thisObject.leftRightButton = undefined
-
-    layersMap = undefined
-    visibleLayers = undefined
-
-    thisObject.container.finalize()
-    thisObject.container = undefined
-
-    thisObject.payload = undefined
-    thisObject = undefined
-  }
-
-  function initialize () {
-    thisObject.container.name = thisObject.payload.node.name
-    thisObject.container.frame.containerName = thisObject.container.name
-    thisObject.container.frame.width = UI_PANEL.WIDTH.NORMAL
-    thisObject.container.frame.height = headerHeight
-
-    let position = { // Default position
-      x: canvas.chartingSpace.viewport.visibleArea.topLeft.x,
-      y: canvas.chartingSpace.viewport.visibleArea.topLeft.y
+function newLayersPanel() {
+    let thisObject = {
+        name: 'Layers Panel',
+        fitFunction: undefined,
+        container: undefined,
+        layers: [],
+        payload: undefined,
+        isVisible: true,
+        upDownButton: undefined,
+        leftRightButton: undefined,
+        physics: physics,
+        draw: draw,
+        getContainer: getContainer,
+        initialize: initialize,
+        finalize: finalize
     }
 
-    thisObject.container.frame.position = position
-    loadFrame(thisObject.payload, thisObject.container.frame)
+    thisObject.container = newContainer()
+    thisObject.container.initialize()
+    thisObject.container.isDraggeable = true
+    thisObject.container.isWheelable = true
+    thisObject.container.detectMouseOver = true
 
-    thisObject.upDownButton = newUpDownButton()
-    thisObject.upDownButton.parentContainer = thisObject.container
-    thisObject.upDownButton.container.frame.parentFrame = thisObject.container.frame
-    thisObject.upDownButton.fitFunction = thisObject.fitFunction
-    thisObject.upDownButton.initialize()
+    let isInitialized = false
+    let mouseOverCounter = 0
 
-    thisObject.leftRightButton = newLeftRightButton()
-    thisObject.leftRightButton.parentContainer = thisObject.container
-    thisObject.leftRightButton.container.frame.parentFrame = thisObject.container.frame
-    thisObject.leftRightButton.fitFunction = thisObject.fitFunction
-    thisObject.leftRightButton.initialize()
+    let layersMap = new Map()
+    let visibleLayers = []
+    let firstVisibleLayer = 1
 
-    onMouseWheelEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
-    onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
-    onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
+    const LAYER_SEPARATION = 0
 
-    readObjectState()
+    let headerHeight = 40
+    let footerHeight = 10
+    let layerHeight = 70
+    let desiredVisibleLayers = 5
+    let posibleVisibleLayers = 5
+    let desiredPanelHeight = (layerHeight + LAYER_SEPARATION) * desiredVisibleLayers + headerHeight + footerHeight
+    let posiblePanelHeight = (layerHeight + LAYER_SEPARATION) * posibleVisibleLayers + headerHeight + footerHeight
 
-    isInitialized = true
-  }
+    let onMouseWheelEventSuscriptionId
+    let onMouseOverEventSubscriptionId
+    let onMouseNotOverEventSubscriptionId
 
-  function onMouseOver (event) {
-    isMouseOver = true
-  }
+    let isMouseOver
+    return thisObject
 
-  function onMouseNotOver () {
-    isMouseOver = false
-  }
+    function finalize() {
+        thisObject.container.eventHandler.stopListening(onMouseWheelEventSuscriptionId)
+        thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
+        thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
 
-  function saveObjectStateVisibleLayers () {
-    savePropertyAtNodeConfig(thisObject.payload, 'visibleLayers', desiredVisibleLayers)
-  }
+        thisObject.upDownButton.finalize()
+        thisObject.upDownButton = undefined
 
-  function saveObjectStatePanelLocation () {
-    let panelLocation = {
-      upOrDown: thisObject.upDownButton.status,
-      leftOrRight: thisObject.leftRightButton.status
+        thisObject.leftRightButton.finalize()
+        thisObject.leftRightButton = undefined
+
+        layersMap = undefined
+        visibleLayers = undefined
+
+        thisObject.container.finalize()
+        thisObject.container = undefined
+
+        thisObject.payload = undefined
+        thisObject = undefined
     }
-    savePropertyAtNodeConfig(thisObject.payload, 'panelLocation', panelLocation)
-  }
 
-  function readObjectState () {
-    let storedValue
+    function initialize() {
+        thisObject.container.name = thisObject.payload.node.name
+        thisObject.container.frame.containerName = thisObject.container.name
+        thisObject.container.frame.width = UI_PANEL.WIDTH.NORMAL
+        thisObject.container.frame.height = headerHeight
 
-    storedValue = loadPropertyFromNodeConfig(thisObject.payload, 'visibleLayers')
+        let position = { // Default position
+            x: canvas.chartingSpace.viewport.visibleArea.topLeft.x,
+            y: canvas.chartingSpace.viewport.visibleArea.topLeft.y
+        }
 
-    if (isNaN(storedValue) || storedValue === null || storedValue === undefined) {
-         // not using this value
-      saveObjectStateVisibleLayers() // this overrides any invalid value at the config.
-      return
-    } else {
-      if (storedValue < 0) { storedValue = 0 }
-      if (storedValue > thisObject.layers.length) {
-        storedValue = thisObject.layers.length
-      }
+        thisObject.container.frame.position = position
+        loadFrame(thisObject.payload, thisObject.container.frame)
 
-      if (storedValue !== desiredVisibleLayers) {
-        desiredVisibleLayers = storedValue
+        thisObject.upDownButton = newUpDownButton()
+        thisObject.upDownButton.parentContainer = thisObject.container
+        thisObject.upDownButton.container.frame.parentFrame = thisObject.container.frame
+        thisObject.upDownButton.fitFunction = thisObject.fitFunction
+        thisObject.upDownButton.initialize()
+
+        thisObject.leftRightButton = newLeftRightButton()
+        thisObject.leftRightButton.parentContainer = thisObject.container
+        thisObject.leftRightButton.container.frame.parentFrame = thisObject.container.frame
+        thisObject.leftRightButton.fitFunction = thisObject.fitFunction
+        thisObject.leftRightButton.initialize()
+
+        onMouseWheelEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
+        onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
+        onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
+
+        readObjectState()
+
+        isInitialized = true
+    }
+
+    function onMouseOver(event) {
+        isMouseOver = true
+    }
+
+    function onMouseNotOver() {
+        isMouseOver = false
+    }
+
+    function saveObjectStateVisibleLayers() {
+        savePropertyAtNodeConfig(thisObject.payload, 'visibleLayers', desiredVisibleLayers)
+    }
+
+    function saveObjectStatePanelLocation() {
+        let panelLocation = {
+            upOrDown: thisObject.upDownButton.status,
+            leftOrRight: thisObject.leftRightButton.status
+        }
+        savePropertyAtNodeConfig(thisObject.payload, 'panelLocation', panelLocation)
+    }
+
+    function readObjectState() {
+        let storedValue
+
+        storedValue = loadPropertyFromNodeConfig(thisObject.payload, 'visibleLayers')
+
+        if (isNaN(storedValue) || storedValue === null || storedValue === undefined) {
+            // not using this value
+            saveObjectStateVisibleLayers() // this overrides any invalid value at the config.
+            return
+        } else {
+            if (storedValue < 0) { storedValue = 0 }
+            if (storedValue > thisObject.layers.length) {
+                storedValue = thisObject.layers.length
+            }
+
+            if (storedValue !== desiredVisibleLayers) {
+                desiredVisibleLayers = storedValue
+                desiredPanelHeight = (layerHeight + LAYER_SEPARATION) * desiredVisibleLayers + headerHeight + footerHeight
+                calculateVisbleLayers()
+            }
+        }
+
+        storedValue = loadPropertyFromNodeConfig(thisObject.payload, 'panelLocation')
+
+        if (storedValue === null || storedValue === undefined) {
+            // not using this value
+            saveObjectStatePanelLocation() // this overrides any invalid value at the config.
+            return
+        } else {
+            if (storedValue.upOrDown !== 'up' && storedValue.upOrDown !== 'down') {
+                saveObjectStatePanelLocation() // this overrides any invalid value at the config.
+                return
+            }
+            if (storedValue.leftOrRight !== 'left' && storedValue.leftOrRight !== 'right') {
+                saveObjectStatePanelLocation() // this overrides any invalid value at the config.
+                return
+            }
+            thisObject.upDownButton.setStatus(storedValue.upOrDown)
+            thisObject.leftRightButton.setStatus(storedValue.leftOrRight)
+            saveObjectStatePanelLocation()
+        }
+    }
+
+    function removeLayer(id) {
+        let layer = layersMap.get(id)
+        layersMap.delete(id)
+        layer.turnOff()
+        layer.container.eventHandler.stopListening(layer.onLayerStatusChangedEventSuscriptionId)
+        layer.container.eventHandler.stopListening(layer.onMouseWheelEventSuscriptionId)
+        layer.finalize()
+    }
+
+    function addLayer(layerNode) {
+        /* Now we create Product objects */
+        let layer = newLayer()
+        layer.payload = layerNode.payload
+        layer.nodeId = layerNode.payload.node.id
+        layer.fitFunction = thisObject.fitFunction
+
+        /* Initialize it */
+        layer.initialize(onInitialized)
+
+        function onInitialized(err) {
+            if (err.result === GLOBAL.DEFAULT_OK_RESPONSE.result) {
+                layersMap.set(layerNode.id, layer)
+
+                /* Container Stuff */
+                layer.container.frame.parentFrame = thisObject.container.frame
+                layer.container.parentContainer = thisObject.container
+                layer.container.isWheelable = true
+
+                /* Add to the Product Array */
+                thisObject.layers.push(layer)
+
+                /* Listen to Status Changes Events */
+                layer.onLayerStatusChangedEventSuscriptionId = layer.container.eventHandler.listenToEvent('Status Changed', onLayerStatusChanged)
+                layer.onMouseWheelEventSuscriptionId = layer.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
+
+                layer.checkStatusAtShutDown()
+
+                return
+            }
+        }
+    }
+
+    function onMouseWheel(event) {
+        delta = event.wheelDelta
+        if (delta > 0) {
+            delta = -1
+        } else {
+            delta = 1
+        }
+
+        if (event.y - thisObject.container.frame.position.y - CURRENT_TOP_MARGIN < headerHeight) { // Mouse wheel over the header, not a layer
+            desiredVisibleLayers = desiredVisibleLayers + delta
+            if (desiredVisibleLayers < 0) { desiredVisibleLayers = 0 }
+            if (desiredVisibleLayers > thisObject.layers.length) { desiredVisibleLayers = thisObject.layers.length }
+        } else {
+            firstVisibleLayer = firstVisibleLayer + delta
+        }
         desiredPanelHeight = (layerHeight + LAYER_SEPARATION) * desiredVisibleLayers + headerHeight + footerHeight
         calculateVisbleLayers()
-      }
+        saveObjectStateVisibleLayers()
     }
 
-    storedValue = loadPropertyFromNodeConfig(thisObject.payload, 'panelLocation')
+    function panelSizePhysics() {
+        if (isInitialized === false || thisObject.isHidden === true) { return }
 
-    if (storedValue === null || storedValue === undefined) {
-         // not using this value
-      saveObjectStatePanelLocation() // this overrides any invalid value at the config.
-      return
-    } else {
-      if (storedValue.upOrDown !== 'up' && storedValue.upOrDown !== 'down') {
-        saveObjectStatePanelLocation() // this overrides any invalid value at the config.
-        return
-      }
-      if (storedValue.leftOrRight !== 'left' && storedValue.leftOrRight !== 'right') {
-        saveObjectStatePanelLocation() // this overrides any invalid value at the config.
-        return
-      }
-      thisObject.upDownButton.setStatus(storedValue.upOrDown)
-      thisObject.leftRightButton.setStatus(storedValue.leftOrRight)
-      saveObjectStatePanelLocation()
-    }
-  }
+        let viewPortHeight = canvas.chartingSpace.viewport.visibleArea.bottomLeft.y - canvas.chartingSpace.viewport.visibleArea.topLeft.y
 
-  function removeLayer (id) {
-    let layer = layersMap.get(id)
-    layersMap.delete(id)
-    layer.turnOff()
-    layer.container.eventHandler.stopListening(layer.onLayerStatusChangedEventSuscriptionId)
-    layer.container.eventHandler.stopListening(layer.onMouseWheelEventSuscriptionId)
-    layer.finalize()
-  }
-
-  function addLayer (layerNode) {
-    /* Now we create Product objects */
-    let layer = newLayer()
-    layer.payload = layerNode.payload
-    layer.nodeId = layerNode.payload.node.id
-    layer.fitFunction = thisObject.fitFunction
-
-    /* Initialize it */
-    layer.initialize(onInitialized)
-
-    function onInitialized (err) {
-      if (err.result === GLOBAL.DEFAULT_OK_RESPONSE.result) {
-        layersMap.set(layerNode.id, layer)
-
-        /* Container Stuff */
-        layer.container.frame.parentFrame = thisObject.container.frame
-        layer.container.parentContainer = thisObject.container
-        layer.container.isWheelable = true
-
-        /* Add to the Product Array */
-        thisObject.layers.push(layer)
-
-        /* Listen to Status Changes Events */
-        layer.onLayerStatusChangedEventSuscriptionId = layer.container.eventHandler.listenToEvent('Status Changed', onLayerStatusChanged)
-        layer.onMouseWheelEventSuscriptionId = layer.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
-
-        layer.checkStatusAtShutDown()
-
-        return
-      }
-    }
-  }
-
-  function onMouseWheel (event) {
-    delta = event.wheelDelta
-    if (delta > 0) {
-      delta = -1
-    } else {
-      delta = 1
-    }
-
-    if (event.y - thisObject.container.frame.position.y - CURRENT_TOP_MARGIN < headerHeight) { // Mouse wheel over the header, not a layer
-      desiredVisibleLayers = desiredVisibleLayers + delta
-      if (desiredVisibleLayers < 0) { desiredVisibleLayers = 0 }
-      if (desiredVisibleLayers > thisObject.layers.length) { desiredVisibleLayers = thisObject.layers.length }
-    } else {
-      firstVisibleLayer = firstVisibleLayer + delta
-    }
-    desiredPanelHeight = (layerHeight + LAYER_SEPARATION) * desiredVisibleLayers + headerHeight + footerHeight
-    calculateVisbleLayers()
-    saveObjectStateVisibleLayers()
-  }
-
-  function panelSizePhysics () {
-    if (isInitialized === false || thisObject.isHidden === true) { return }
-
-    let viewPortHeight = canvas.chartingSpace.viewport.visibleArea.bottomLeft.y - canvas.chartingSpace.viewport.visibleArea.topLeft.y
-
-    if (viewPortHeight < headerHeight) {
-      thisObject.visible = false
-    } else {
-      thisObject.visible = true
-    }
-
-    if (thisObject.visible === false) { return }
-
-    if (desiredPanelHeight > viewPortHeight) {
-      posibleVisibleLayers = Math.trunc((viewPortHeight - headerHeight - footerHeight) / (layerHeight + LAYER_SEPARATION))
-    } else {
-      posibleVisibleLayers = desiredVisibleLayers
-    }
-    if (thisObject.layers.length < posibleVisibleLayers) { posibleVisibleLayers = thisObject.layers.length }
-
-    if (posibleVisibleLayers === 0) {
-      posiblePanelHeight = (layerHeight + LAYER_SEPARATION) * posibleVisibleLayers + headerHeight
-    } else {
-      posiblePanelHeight = (layerHeight + LAYER_SEPARATION) * posibleVisibleLayers + headerHeight + footerHeight
-    }
-
-    thisObject.container.frame.height = posiblePanelHeight
-  }
-
-  function calculateVisbleLayers () {
-    panelSizePhysics()
-    let availableSlots = posibleVisibleLayers
-
-    if (firstVisibleLayer < 1) { firstVisibleLayer = 1 }
-    if (firstVisibleLayer > (thisObject.layers.length - availableSlots + 1)) { firstVisibleLayer = thisObject.layers.length - availableSlots + 1 }
-
-    visibleLayers = []
-
-    for (let i = 0; i < thisObject.layers.length; i++) {
-      if (i + 1 >= firstVisibleLayer && i + 1 < firstVisibleLayer + availableSlots) {
-        let layer = thisObject.layers[i]
-
-        layer.container.frame.position.x = 0
-        layer.container.frame.position.y = (layerHeight + LAYER_SEPARATION) * visibleLayers.length + headerHeight
-
-         /* Add to Visible Product Array */
-        visibleLayers.push(layer)
-      }
-    }
-  }
-
-  function onLayerStatusChanged (layer) {
-    thisObject.container.eventHandler.raiseEvent('Layer Status Changed', layer)
-  }
-
-  function getContainer (point, purpose) {
-    if (isInitialized === false || thisObject.visible === false || thisObject.isHidden === true) { return }
-    let container
-
-    if (isMouseOver === true && purpose !== GET_CONTAINER_PURPOSE.MOUSE_OVER) {
-      container = thisObject.upDownButton.getContainer(point)
-      if (container !== undefined) { return container }
-
-      container = thisObject.leftRightButton.getContainer(point)
-      if (container !== undefined) { return container }
-    }
-
-     /* First we check if thisObject point is inside thisObject space. */
-    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-       /* Now we see which is the inner most container that has it */
-      for (let i = 0; i < visibleLayers.length; i++) {
-        container = visibleLayers[i].getContainer(point)
-
-        if (container !== undefined) {
-          let checkPoint = {
-            x: point.x,
-            y: point.y
-          }
-
-          checkPoint = thisObject.fitFunction(checkPoint)
-
-          if (point.x === checkPoint.x && point.y === checkPoint.y) {
-            if (purpose !== GET_CONTAINER_PURPOSE.MOUSE_OVER) {
-              return container
-            }
-          }
+        if (viewPortHeight < headerHeight) {
+            thisObject.visible = false
+        } else {
+            thisObject.visible = true
         }
-      }
 
-     /* The point does not belong to any inner container, so we return the current container. */
-      let checkPoint = {
-        x: point.x,
-        y: point.y
-      }
+        if (thisObject.visible === false) { return }
 
-      checkPoint = thisObject.fitFunction(checkPoint)
-
-      if (point.x === checkPoint.x && point.y === checkPoint.y) {
-        return thisObject.container
-      }
-    }
-  }
-
-  function childrenPhysics () {
-    for (let i = 0; i < thisObject.layers.length; i++) {
-      let layer = thisObject.layers[i]
-      layer.physics()
-    }
-  }
-
-  function syncWithConfigPhysics () {
-    readObjectState()
-  }
-
-  function physics () {
-    if (isInitialized === false) { return }
-    if (thisObject.payload.node === undefined) { return }
-
-    thisObject.upDownButton.physics()
-    thisObject.leftRightButton.physics()
-    saveFrame(thisObject.payload, thisObject.container.frame)
-    syncWithConfigPhysics()
-
-    /*
-    The overall idea here is that we need to keep syncronized the panel with the layers that are
-    defined at the Designer. Users can connect or disconnect any objext resulting in changes in which
-    are valid layers and which not at any point in time. So what we do here is trying to keep the panel
-    only with the layers that are connected to the Charting Space hiriarcy.
-
-    To achieve this, first we are going to move all session related cards to a local array. Then we are
-    going to check for layers at the designer, and will move back the cards which still have layers well
-    defined to where they were.
-
-    If we find new layers we will add them at that point. Finally, the cards that still remain at the
-    local array after all the layers at the designer have been processed, are turned off and discarded.
-    */
-    childrenPhysics()
-
-    let localLayers = []
-    moveToLocalLayers()
-    syncWithDesignerLayers()
-
-    /* At this poins all the cards still at the local array need to be removed from the panel. */
-    turnOffUnusedLayers()
-    calculateVisbleLayers()
-
-    function syncWithDesignerLayers () {
-      if (thisObject.payload.node === undefined) { return }
-      let layerManager = thisObject.payload.node
-      for (let p = 0; p < layerManager.layers.length; p++) {
-        let layerNode = layerManager.layers[p]
-
-        let found = removeFromLocalLayers(layerNode.id)
-        if (found !== true) {
-          layer = addLayer(layerNode)
-          if (layer !== undefined) {
-            onLayerStatusChanged(layer)
-          }
+        if (desiredPanelHeight > viewPortHeight) {
+            posibleVisibleLayers = Math.trunc((viewPortHeight - headerHeight - footerHeight) / (layerHeight + LAYER_SEPARATION))
+        } else {
+            posibleVisibleLayers = desiredVisibleLayers
         }
-      }
+        if (thisObject.layers.length < posibleVisibleLayers) { posibleVisibleLayers = thisObject.layers.length }
+
+        if (posibleVisibleLayers === 0) {
+            posiblePanelHeight = (layerHeight + LAYER_SEPARATION) * posibleVisibleLayers + headerHeight
+        } else {
+            posiblePanelHeight = (layerHeight + LAYER_SEPARATION) * posibleVisibleLayers + headerHeight + footerHeight
+        }
+
+        thisObject.container.frame.height = posiblePanelHeight
     }
 
-    function moveToLocalLayers () {
-      removeNext()
+    function calculateVisbleLayers() {
+        panelSizePhysics()
+        let availableSlots = posibleVisibleLayers
+
+        if (firstVisibleLayer < 1) { firstVisibleLayer = 1 }
+        if (firstVisibleLayer > (thisObject.layers.length - availableSlots + 1)) { firstVisibleLayer = thisObject.layers.length - availableSlots + 1 }
+
+        visibleLayers = []
 
-      function removeNext () {
         for (let i = 0; i < thisObject.layers.length; i++) {
-          let layer = thisObject.layers[i]
+            if (i + 1 >= firstVisibleLayer && i + 1 < firstVisibleLayer + availableSlots) {
+                let layer = thisObject.layers[i]
 
-          thisObject.layers.splice(i, 1)
-          localLayers.push(layer)
-          removeNext()
+                layer.container.frame.position.x = 0
+                layer.container.frame.position.y = (layerHeight + LAYER_SEPARATION) * visibleLayers.length + headerHeight
+
+                /* Add to Visible Product Array */
+                visibleLayers.push(layer)
+            }
         }
-      }
     }
 
-    function removeFromLocalLayers (id) {
-      for (let i = 0; i < localLayers.length; i++) {
-        let layer = localLayers[i]
-        if (layer.payload.node.id === id) {
-          thisObject.layers.push(layer)
-          localLayers.splice(i, 1)
-          return true
+    function onLayerStatusChanged(layer) {
+        thisObject.container.eventHandler.raiseEvent('Layer Status Changed', layer)
+    }
+
+    function getContainer(point, purpose) {
+        if (isInitialized === false || thisObject.visible === false || thisObject.isHidden === true) { return }
+        let container
+
+        if (isMouseOver === true && purpose !== GET_CONTAINER_PURPOSE.MOUSE_OVER) {
+            container = thisObject.upDownButton.getContainer(point)
+            if (container !== undefined) { return container }
+
+            container = thisObject.leftRightButton.getContainer(point)
+            if (container !== undefined) { return container }
+        }
+
+        /* First we check if thisObject point is inside thisObject space. */
+        if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+            /* Now we see which is the inner most container that has it */
+            for (let i = 0; i < visibleLayers.length; i++) {
+                container = visibleLayers[i].getContainer(point)
+
+                if (container !== undefined) {
+                    let checkPoint = {
+                        x: point.x,
+                        y: point.y
+                    }
+
+                    checkPoint = thisObject.fitFunction(checkPoint)
+
+                    if (point.x === checkPoint.x && point.y === checkPoint.y) {
+                        if (purpose !== GET_CONTAINER_PURPOSE.MOUSE_OVER) {
+                            return container
+                        }
+                    }
+                }
+            }
+
+            /* The point does not belong to any inner container, so we return the current container. */
+            let checkPoint = {
+                x: point.x,
+                y: point.y
+            }
+
+            checkPoint = thisObject.fitFunction(checkPoint)
+
+            if (point.x === checkPoint.x && point.y === checkPoint.y) {
+                return thisObject.container
+            }
         }
-      }
     }
 
-    function turnOffUnusedLayers () {
-      for (let i = 0; i < localLayers.length; i++) {
-        let layer = localLayers[i]
-        removeLayer(layer.nodeId)
-      }
-    }
-  }
-
-  function draw () {
-    if (isInitialized === false || thisObject.visible === false || thisObject.isHidden === true) { return }
-
-    // thisObject.container.frame.draw(false, false, false, thisObject.fitFunction)
-
-    drawHeader()
-    for (let i = 0; i < visibleLayers.length; i++) {
-      visibleLayers[i].draw()
-    }
-    drawScrollBar()
-    if (isMouseOver === true) {
-      thisObject.upDownButton.draw()
-      thisObject.leftRightButton.draw()
-    }
-  }
-
-  function drawHeader () {
-    if (thisObject.payload === undefined) { return }
-    if (thisObject.payload.node === undefined) { return }
-    if (thisObject.payload.node.payload.parentNode === undefined) { return }
-    if (thisObject.payload.node.payload.parentNode.payload.parentNode === undefined) { return }
-
-    let label1 = thisObject.payload.node.payload.parentNode.payload.parentNode.name.substring(0, 18)
-    let label2 = thisObject.payload.node.payload.parentNode.name.substring(0, 18)
-    let label3 = ''
-
-    let icon1 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.payload.parentNode.type)
-    let icon2 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
-
-    let backgroundColor = UI_COLOR.BLACK
-
-    let params = {
-      cornerRadius: 5,
-      lineWidth: 1,
-      container: thisObject.container,
-      borderColor: UI_COLOR.RUSTED_RED,
-      castShadow: false,
-      backgroundColor: backgroundColor,
-      opacity: 1
+    function childrenPhysics() {
+        for (let i = 0; i < thisObject.layers.length; i++) {
+            let layer = thisObject.layers[i]
+            layer.physics()
+        }
     }
 
-    roundedCornersBackground(params)
-
-    drawLabel(label1, 1 / 2, 0, 0, 15, 9, thisObject.container)
-    drawLabel(label2, 1 / 2, 0, 0, 30, 9, thisObject.container)
-
-    drawIcon(icon1, 1 / 8, 0, 0, 20, 28, thisObject.container)
-    drawIcon(icon2, 7 / 8, 0, 0, 20, 28, thisObject.container)
-  }
-
-  function drawScrollBar () {
-    if (thisObject.layers.length > posibleVisibleLayers && posibleVisibleLayers > 0) {
-      let xOffset = 4
-      let barTopPoint = {
-        x: thisObject.container.frame.width - xOffset,
-        y: headerHeight
-      }
-      let barBottomPoint = {
-        x: thisObject.container.frame.width - xOffset,
-        y: thisObject.container.frame.height - footerHeight
-      }
-      let ratio = posibleVisibleLayers / thisObject.layers.length
-      let handleHeight = (posibleVisibleLayers * (layerHeight + LAYER_SEPARATION)) * ratio
-      let handleTopPoint = {
-        x: thisObject.container.frame.width - xOffset,
-        y: headerHeight + (layerHeight + LAYER_SEPARATION) * ratio * (firstVisibleLayer - 1)
-      }
-      let handleBottomPoint = {
-        x: thisObject.container.frame.width - xOffset,
-        y: handleTopPoint.y + handleHeight
-      }
-      barTopPoint = thisObject.container.frame.frameThisPoint(barTopPoint)
-      barBottomPoint = thisObject.container.frame.frameThisPoint(barBottomPoint)
-      handleTopPoint = thisObject.container.frame.frameThisPoint(handleTopPoint)
-      handleBottomPoint = thisObject.container.frame.frameThisPoint(handleBottomPoint)
-
-      browserCanvasContext.beginPath()
-      browserCanvasContext.moveTo(barTopPoint.x, barTopPoint.y)
-      browserCanvasContext.lineTo(barBottomPoint.x, barBottomPoint.y)
-      browserCanvasContext.closePath()
-      browserCanvasContext.setLineDash([0, 0])
-      browserCanvasContext.lineWidth = 1
-      browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREY + ', ' + 1 + ')'
-      browserCanvasContext.stroke()
-
-      browserCanvasContext.beginPath()
-      browserCanvasContext.moveTo(handleTopPoint.x, handleTopPoint.y)
-      browserCanvasContext.lineTo(handleBottomPoint.x, handleBottomPoint.y)
-      browserCanvasContext.closePath()
-      browserCanvasContext.setLineDash([0, 0])
-      browserCanvasContext.lineWidth = 4
-      browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', ' + 1 + ')'
-      browserCanvasContext.stroke()
+    function syncWithConfigPhysics() {
+        readObjectState()
+    }
+
+    function physics() {
+        if (isInitialized === false) { return }
+        if (thisObject.payload.node === undefined) { return }
+
+        thisObject.upDownButton.physics()
+        thisObject.leftRightButton.physics()
+        saveFrame(thisObject.payload, thisObject.container.frame)
+        syncWithConfigPhysics()
+
+        /*
+        The overall idea here is that we need to keep syncronized the panel with the layers that are
+        defined at the Designer. Users can connect or disconnect any objext resulting in changes in which
+        are valid layers and which not at any point in time. So what we do here is trying to keep the panel
+        only with the layers that are connected to the Charting Space hiriarcy.
+    
+        To achieve this, first we are going to move all session related cards to a local array. Then we are
+        going to check for layers at the designer, and will move back the cards which still have layers well
+        defined to where they were.
+    
+        If we find new layers we will add them at that point. Finally, the cards that still remain at the
+        local array after all the layers at the designer have been processed, are turned off and discarded.
+        */
+        childrenPhysics()
+
+        let localLayers = []
+        moveToLocalLayers()
+        syncWithDesignerLayers()
+
+        /* At this poins all the cards still at the local array need to be removed from the panel. */
+        turnOffUnusedLayers()
+        calculateVisbleLayers()
+
+        function syncWithDesignerLayers() {
+            if (thisObject.payload.node === undefined) { return }
+            let layerManager = thisObject.payload.node
+            for (let p = 0; p < layerManager.layers.length; p++) {
+                let layerNode = layerManager.layers[p]
+
+                let found = removeFromLocalLayers(layerNode.id)
+                if (found !== true) {
+                    layer = addLayer(layerNode)
+                    if (layer !== undefined) {
+                        onLayerStatusChanged(layer)
+                    }
+                }
+            }
+        }
+
+        function moveToLocalLayers() {
+            removeNext()
+
+            function removeNext() {
+                for (let i = 0; i < thisObject.layers.length; i++) {
+                    let layer = thisObject.layers[i]
+
+                    thisObject.layers.splice(i, 1)
+                    localLayers.push(layer)
+                    removeNext()
+                }
+            }
+        }
+
+        function removeFromLocalLayers(id) {
+            for (let i = 0; i < localLayers.length; i++) {
+                let layer = localLayers[i]
+                if (layer.payload.node.id === id) {
+                    thisObject.layers.push(layer)
+                    localLayers.splice(i, 1)
+                    return true
+                }
+            }
+        }
+
+        function turnOffUnusedLayers() {
+            for (let i = 0; i < localLayers.length; i++) {
+                let layer = localLayers[i]
+                removeLayer(layer.nodeId)
+            }
+        }
+    }
+
+    function draw() {
+        if (isInitialized === false || thisObject.visible === false || thisObject.isHidden === true) { return }
+
+        // thisObject.container.frame.draw(false, false, false, thisObject.fitFunction)
+
+        drawHeader()
+        for (let i = 0; i < visibleLayers.length; i++) {
+            visibleLayers[i].draw()
+        }
+        drawScrollBar()
+        if (isMouseOver === true) {
+            thisObject.upDownButton.draw()
+            thisObject.leftRightButton.draw()
+        }
+    }
+
+    function drawHeader() {
+        if (thisObject.payload === undefined) { return }
+        if (thisObject.payload.node === undefined) { return }
+        if (thisObject.payload.node.payload.parentNode === undefined) { return }
+        if (thisObject.payload.node.payload.parentNode.payload.parentNode === undefined) { return }
+
+        let label1 = thisObject.payload.node.payload.parentNode.payload.parentNode.name.substring(0, 18)
+        let label2 = thisObject.payload.node.payload.parentNode.name.substring(0, 18)
+        let label3 = ''
+
+        let icon1 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.payload.parentNode.type)
+        let icon2 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
+
+        let backgroundColor = UI_COLOR.BLACK
+
+        let params = {
+            cornerRadius: 5,
+            lineWidth: 1,
+            container: thisObject.container,
+            borderColor: UI_COLOR.RUSTED_RED,
+            castShadow: false,
+            backgroundColor: backgroundColor,
+            opacity: 1
+        }
+
+        roundedCornersBackground(params)
+
+        drawLabel(label1, 1 / 2, 0, 0, 15, 9, thisObject.container)
+        drawLabel(label2, 1 / 2, 0, 0, 30, 9, thisObject.container)
+
+        drawIcon(icon1, 1 / 8, 0, 0, 20, 28, thisObject.container)
+        drawIcon(icon2, 7 / 8, 0, 0, 20, 28, thisObject.container)
+    }
+
+    function drawScrollBar() {
+        if (thisObject.layers.length > posibleVisibleLayers && posibleVisibleLayers > 0) {
+            let xOffset = 4
+            let barTopPoint = {
+                x: thisObject.container.frame.width - xOffset,
+                y: headerHeight
+            }
+            let barBottomPoint = {
+                x: thisObject.container.frame.width - xOffset,
+                y: thisObject.container.frame.height - footerHeight
+            }
+            let ratio = posibleVisibleLayers / thisObject.layers.length
+            let handleHeight = (posibleVisibleLayers * (layerHeight + LAYER_SEPARATION)) * ratio
+            let handleTopPoint = {
+                x: thisObject.container.frame.width - xOffset,
+                y: headerHeight + (layerHeight + LAYER_SEPARATION) * ratio * (firstVisibleLayer - 1)
+            }
+            let handleBottomPoint = {
+                x: thisObject.container.frame.width - xOffset,
+                y: handleTopPoint.y + handleHeight
+            }
+            barTopPoint = thisObject.container.frame.frameThisPoint(barTopPoint)
+            barBottomPoint = thisObject.container.frame.frameThisPoint(barBottomPoint)
+            handleTopPoint = thisObject.container.frame.frameThisPoint(handleTopPoint)
+            handleBottomPoint = thisObject.container.frame.frameThisPoint(handleBottomPoint)
+
+            browserCanvasContext.beginPath()
+            browserCanvasContext.moveTo(barTopPoint.x, barTopPoint.y)
+            browserCanvasContext.lineTo(barBottomPoint.x, barBottomPoint.y)
+            browserCanvasContext.closePath()
+            browserCanvasContext.setLineDash([0, 0])
+            browserCanvasContext.lineWidth = 1
+            browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREY + ', ' + 1 + ')'
+            browserCanvasContext.stroke()
+
+            browserCanvasContext.beginPath()
+            browserCanvasContext.moveTo(handleTopPoint.x, handleTopPoint.y)
+            browserCanvasContext.lineTo(handleBottomPoint.x, handleBottomPoint.y)
+            browserCanvasContext.closePath()
+            browserCanvasContext.setLineDash([0, 0])
+            browserCanvasContext.lineWidth = 4
+            browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', ' + 1 + ')'
+            browserCanvasContext.stroke()
+        }
     }
-  }
 }

Panels/LeftRightButton.js

@@ -1,244 +1,244 @@
-function newLeftRightButton () {
-  let thisObject = {
-    container: undefined,
-    fitFunction: undefined,
-    parentContainer: undefined,
-    status: undefined,
-    setStatus: setStatus,
-    physics: physics,
-    draw: draw,
-    getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
-    initialize: initialize,
-    finalize: finalize
-  }
-
-  let isInitialized = false
-   /* Cointainer stuff */
-
-  thisObject.container = newContainer()
-  thisObject.container.name = 'Left Right Button'
-  thisObject.container.initialize()
-  thisObject.container.isClickeable = true
-  thisObject.container.isDraggeable = false
-  thisObject.container.frame.containerName = 'Left Right Button'
-
-  thisObject.status = 'left'
-  let leftPosition = {}
-  let rightPosition = {}
-  let transitionPosition = {}
-
-  let onMouseClickEventSuscriptionId
-  return thisObject
-
-  function finalize () {
-    thisObject.container.eventHandler.stopListening(onMouseClickEventSuscriptionId)
-    thisObject.container.finalize()
-    thisObject.container = undefined
-    thisObject.fitFunction = undefined
-    thisObject.parentContainer = undefined
-
-    thisObject.status = undefined
-    leftPosition = undefined
-    rightPosition = undefined
-    transitionPosition = undefined
-  }
-
-  function initialize () {
-    thisObject.container.frame.width = 12
-    thisObject.container.frame.height = 12
-
-    let position = {
-      x: thisObject.container.frame.parentFrame.width * 2.25 / 8 - thisObject.container.frame.width / 2,
-      y: 40 * 4 / 8 - thisObject.container.frame.height / 2
+function newLeftRightButton() {
+    let thisObject = {
+        container: undefined,
+        fitFunction: undefined,
+        parentContainer: undefined,
+        status: undefined,
+        setStatus: setStatus,
+        physics: physics,
+        draw: draw,
+        getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
+        initialize: initialize,
+        finalize: finalize
     }
 
-    thisObject.container.frame.position = position
+    let isInitialized = false
+    /* Cointainer stuff */
 
-    leftPosition.x = thisObject.parentContainer.frame.position.x
-    leftPosition.y = thisObject.parentContainer.frame.position.y
+    thisObject.container = newContainer()
+    thisObject.container.name = 'Left Right Button'
+    thisObject.container.initialize()
+    thisObject.container.isClickeable = true
+    thisObject.container.isDraggeable = false
+    thisObject.container.frame.containerName = 'Left Right Button'
 
-    rightPosition.x = thisObject.parentContainer.frame.position.x
-    rightPosition.y = canvas.chartingSpace.viewport.visibleArea.bottomRight.y
+    thisObject.status = 'left'
+    let leftPosition = {}
+    let rightPosition = {}
+    let transitionPosition = {}
 
-    transitionPosition.x = leftPosition.x
-    transitionPosition.y = leftPosition.y
+    let onMouseClickEventSuscriptionId
+    return thisObject
 
-    /* Lets listen to our own events to react when we have a Mouse Click */
-    onMouseClickEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
+    function finalize() {
+        thisObject.container.eventHandler.stopListening(onMouseClickEventSuscriptionId)
+        thisObject.container.finalize()
+        thisObject.container = undefined
+        thisObject.fitFunction = undefined
+        thisObject.parentContainer = undefined
 
-    isInitialized = true
-  }
-
-  function setStatus (value) {
-    if (value === 'left' && thisObject.status === 'right') {
-      thisObject.status = 'going left'
+        thisObject.status = undefined
+        leftPosition = undefined
+        rightPosition = undefined
+        transitionPosition = undefined
     }
-    if (value === 'right' && thisObject.status === 'left') {
-      thisObject.status = 'going right'
+
+    function initialize() {
+        thisObject.container.frame.width = 12
+        thisObject.container.frame.height = 12
+
+        let position = {
+            x: thisObject.container.frame.parentFrame.width * 2.25 / 8 - thisObject.container.frame.width / 2,
+            y: 40 * 4 / 8 - thisObject.container.frame.height / 2
+        }
+
+        thisObject.container.frame.position = position
+
+        leftPosition.x = thisObject.parentContainer.frame.position.x
+        leftPosition.y = thisObject.parentContainer.frame.position.y
+
+        rightPosition.x = thisObject.parentContainer.frame.position.x
+        rightPosition.y = canvas.chartingSpace.viewport.visibleArea.bottomRight.y
+
+        transitionPosition.x = leftPosition.x
+        transitionPosition.y = leftPosition.y
+
+        /* Lets listen to our own events to react when we have a Mouse Click */
+        onMouseClickEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
+
+        isInitialized = true
     }
-  }
 
-  function onMouseClick (event) {
-    if (thisObject.status === 'left') {
-      transitionPosition.x = leftPosition.x
-      transitionPosition.y = leftPosition.y
-
-      thisObject.status = 'going right'
-    } else {
-      transitionPosition.x = rightPosition.x
-      transitionPosition.y = rightPosition.y
-
-      thisObject.status = 'going left'
+    function setStatus(value) {
+        if (value === 'left' && thisObject.status === 'right') {
+            thisObject.status = 'going left'
+        }
+        if (value === 'right' && thisObject.status === 'left') {
+            thisObject.status = 'going right'
+        }
     }
-  }
 
-  function physics () {
-    if (isInitialized === false) { return }
+    function onMouseClick(event) {
+        if (thisObject.status === 'left') {
+            transitionPosition.x = leftPosition.x
+            transitionPosition.y = leftPosition.y
 
-    leftPosition.x = canvas.chartingSpace.viewport.visibleArea.topLeft.x
-    leftPosition.y = thisObject.parentContainer.frame.position.y
+            thisObject.status = 'going right'
+        } else {
+            transitionPosition.x = rightPosition.x
+            transitionPosition.y = rightPosition.y
 
-    rightPosition.x = canvas.chartingSpace.viewport.visibleArea.bottomRight.x
-    rightPosition.y = thisObject.parentContainer.frame.position.y
-
-    if (thisObject.status === 'going right') {
-      if (transitionPosition.x < rightPosition.x) {
-        transitionPosition.x = transitionPosition.x + 50
-        thisObject.parentContainer.frame.position.x = transitionPosition.x
-      } else {
-        thisObject.parentContainer.frame.position.x = rightPosition.x
-        thisObject.status = 'right'
-      }
+            thisObject.status = 'going left'
+        }
     }
-    if (thisObject.status === 'going left') {
-      if (transitionPosition.x > leftPosition.x) {
-        transitionPosition.x = transitionPosition.x - 50
-        thisObject.parentContainer.frame.position.x = transitionPosition.x
-      } else {
-        thisObject.parentContainer.frame.position.x = leftPosition.x
-        thisObject.status = 'left'
-      }
+
+    function physics() {
+        if (isInitialized === false) { return }
+
+        leftPosition.x = canvas.chartingSpace.viewport.visibleArea.topLeft.x
+        leftPosition.y = thisObject.parentContainer.frame.position.y
+
+        rightPosition.x = canvas.chartingSpace.viewport.visibleArea.bottomRight.x
+        rightPosition.y = thisObject.parentContainer.frame.position.y
+
+        if (thisObject.status === 'going right') {
+            if (transitionPosition.x < rightPosition.x) {
+                transitionPosition.x = transitionPosition.x + 50
+                thisObject.parentContainer.frame.position.x = transitionPosition.x
+            } else {
+                thisObject.parentContainer.frame.position.x = rightPosition.x
+                thisObject.status = 'right'
+            }
+        }
+        if (thisObject.status === 'going left') {
+            if (transitionPosition.x > leftPosition.x) {
+                transitionPosition.x = transitionPosition.x - 50
+                thisObject.parentContainer.frame.position.x = transitionPosition.x
+            } else {
+                thisObject.parentContainer.frame.position.x = leftPosition.x
+                thisObject.status = 'left'
+            }
+        }
     }
-  }
 
-  function draw () {
-    if (isInitialized === false) { return }
+    function draw() {
+        if (isInitialized === false) { return }
 
-    drawButton()
-  }
-
-  function getContainer (point, purpose) {
-    let container
-    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-      return thisObject.container
+        drawButton()
     }
-  }
 
-  function drawButton () {
-    let point1
-    let point2
-    let point3
-
-    switch (thisObject.status) {
-      case 'left': {
-        point1 = {
-          x: 3,
-          y: 3
+    function getContainer(point, purpose) {
+        let container
+        if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+            return thisObject.container
         }
-
-        point2 = {
-          x: 3,
-          y: thisObject.container.frame.height - 3
-        }
-
-        point3 = {
-          x: thisObject.container.frame.width - 3,
-          y: thisObject.container.frame.height / 2
-        }
-        break
-      }
-
-      case 'going right': {
-        point1 = {
-          x: 4,
-          y: 4
-        }
-
-        point2 = {
-          x: 4,
-          y: thisObject.container.frame.height - 4
-        }
-
-        point3 = {
-          x: thisObject.container.frame.width - 4,
-          y: thisObject.container.frame.height / 2
-        }
-        break
-      }
-
-      case 'going left': {
-        point1 = {
-          x: thisObject.container.frame.width - 4,
-          y: 4
-        }
-
-        point2 = {
-          x: thisObject.container.frame.width - 4,
-          y: thisObject.container.frame.height - 4
-        }
-
-        point3 = {
-          x: 4,
-          y: thisObject.container.frame.height / 2
-        }
-        break
-      }
-
-      case 'right': {
-        point1 = {
-          x: thisObject.container.frame.width - 3,
-          y: 3
-        }
-
-        point2 = {
-          x: thisObject.container.frame.width - 3,
-          y: thisObject.container.frame.height - 3
-        }
-
-        point3 = {
-          x: 3,
-          y: thisObject.container.frame.height / 2
-        }
-        break
-      }
     }
 
+    function drawButton() {
+        let point1
+        let point2
+        let point3
+
+        switch (thisObject.status) {
+            case 'left': {
+                point1 = {
+                    x: 3,
+                    y: 3
+                }
+
+                point2 = {
+                    x: 3,
+                    y: thisObject.container.frame.height - 3
+                }
+
+                point3 = {
+                    x: thisObject.container.frame.width - 3,
+                    y: thisObject.container.frame.height / 2
+                }
+                break
+            }
+
+            case 'going right': {
+                point1 = {
+                    x: 4,
+                    y: 4
+                }
+
+                point2 = {
+                    x: 4,
+                    y: thisObject.container.frame.height - 4
+                }
+
+                point3 = {
+                    x: thisObject.container.frame.width - 4,
+                    y: thisObject.container.frame.height / 2
+                }
+                break
+            }
+
+            case 'going left': {
+                point1 = {
+                    x: thisObject.container.frame.width - 4,
+                    y: 4
+                }
+
+                point2 = {
+                    x: thisObject.container.frame.width - 4,
+                    y: thisObject.container.frame.height - 4
+                }
+
+                point3 = {
+                    x: 4,
+                    y: thisObject.container.frame.height / 2
+                }
+                break
+            }
+
+            case 'right': {
+                point1 = {
+                    x: thisObject.container.frame.width - 3,
+                    y: 3
+                }
+
+                point2 = {
+                    x: thisObject.container.frame.width - 3,
+                    y: thisObject.container.frame.height - 3
+                }
+
+                point3 = {
+                    x: 3,
+                    y: thisObject.container.frame.height / 2
+                }
+                break
+            }
+        }
+
         /* Now the transformations. */
 
-    point1 = thisObject.container.frame.frameThisPoint(point1)
-    point2 = thisObject.container.frame.frameThisPoint(point2)
-    point3 = thisObject.container.frame.frameThisPoint(point3)
+        point1 = thisObject.container.frame.frameThisPoint(point1)
+        point2 = thisObject.container.frame.frameThisPoint(point2)
+        point3 = thisObject.container.frame.frameThisPoint(point3)
 
-    if (thisObject.fitFunction !== undefined) {
-      point1 = thisObject.fitFunction(point1)
-      point2 = thisObject.fitFunction(point2)
-      point3 = thisObject.fitFunction(point3)
-    }
+        if (thisObject.fitFunction !== undefined) {
+            point1 = thisObject.fitFunction(point1)
+            point2 = thisObject.fitFunction(point2)
+            point3 = thisObject.fitFunction(point3)
+        }
 
         /* Lets start the drawing. */
 
-    browserCanvasContext.beginPath()
-    browserCanvasContext.moveTo(point1.x, point1.y)
-    browserCanvasContext.lineTo(point2.x, point2.y)
-    browserCanvasContext.lineTo(point3.x, point3.y)
-    browserCanvasContext.lineTo(point1.x, point1.y)
-    browserCanvasContext.closePath()
+        browserCanvasContext.beginPath()
+        browserCanvasContext.moveTo(point1.x, point1.y)
+        browserCanvasContext.lineTo(point2.x, point2.y)
+        browserCanvasContext.lineTo(point3.x, point3.y)
+        browserCanvasContext.lineTo(point1.x, point1.y)
+        browserCanvasContext.closePath()
 
-    browserCanvasContext.strokeStyle = 'rgba(250, 250, 250, 1)'
-    browserCanvasContext.lineWidth = 1
-    browserCanvasContext.stroke()
+        browserCanvasContext.strokeStyle = 'rgba(250, 250, 250, 1)'
+        browserCanvasContext.lineWidth = 1
+        browserCanvasContext.stroke()
 
-    browserCanvasContext.fillStyle = 'rgba(250, 250, 250, 1)'
-    browserCanvasContext.fill()
-  }
+        browserCanvasContext.fillStyle = 'rgba(250, 250, 250, 1)'
+        browserCanvasContext.fill()
+    }
 }

Panels/PanelsVisibleButton.js

@@ -1,84 +1,84 @@
-function newPanelsVisibleButton () {
-  let thisObject = {
-    container: undefined,
-    fitFunction: undefined,
-    parentContainer: undefined,
-    panels: undefined,
-    showPanels: true,
-    draw: draw,
-    getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
-    initialize: initialize,
-    finalize: finalize
-  }
-
-   /* Cointainer stuff */
-  thisObject.container = newContainer()
-  thisObject.container.name = 'Panels Visible Button'
-  thisObject.container.initialize()
-  thisObject.container.isClickeable = true
-  thisObject.container.isDraggeable = false
-  thisObject.container.frame.containerName = 'Panels Visible Button'
-
-  let onMouseClickEventSuscriptionId
-  return thisObject
-
-  function finalize () {
-    thisObject.container.eventHandler.stopListening(onMouseClickEventSuscriptionId)
-    thisObject.container.finalize()
-    thisObject.container = undefined
-    thisObject.fitFunction = undefined
-    thisObject.parentContainer = undefined
-    thisObject.panels = undefined
-  }
-
-  function initialize (panels) {
-    thisObject.panels = panels
-    setPanelVisibility()
-
-    thisObject.container.frame.width = 25
-    thisObject.container.frame.height = 25
-
-    let position = {
-      x: thisObject.container.frame.width * 1 / 8,
-      y: 45
+function newPanelsVisibleButton() {
+    let thisObject = {
+        container: undefined,
+        fitFunction: undefined,
+        parentContainer: undefined,
+        panels: undefined,
+        showPanels: true,
+        draw: draw,
+        getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
+        initialize: initialize,
+        finalize: finalize
     }
 
-    thisObject.container.frame.position = position
+    /* Cointainer stuff */
+    thisObject.container = newContainer()
+    thisObject.container.name = 'Panels Visible Button'
+    thisObject.container.initialize()
+    thisObject.container.isClickeable = true
+    thisObject.container.isDraggeable = false
+    thisObject.container.frame.containerName = 'Panels Visible Button'
 
-    /* Lets listen to our own events to react when we have a Mouse Click */
-    onMouseClickEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
-  }
+    let onMouseClickEventSuscriptionId
+    return thisObject
 
-  function onMouseClick (event) {
-    if (thisObject.showPanels === false) {
-      thisObject.showPanels = true
-    } else {
-      thisObject.showPanels = false
-    }
-    setPanelVisibility()
-  }
-
-  function setPanelVisibility () {
-    for (let i = 0; i < thisObject.panels.length; i++) {
-      panel = canvas.panelsSpace.getPanel(thisObject.panels[i])
-      panel.isVisible = thisObject.showPanels
-    }
-  }
-
-  function getContainer (point) {
-    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-      return thisObject.container
-    }
-  }
-
-  function draw () {
-    let icon
-    if (thisObject.showPanels === true) {
-      icon = canvas.designSpace.iconCollection.get('plotter-panel')
-    } else {
-      icon = canvas.designSpace.iconCollection.get('toggle-panel-off')
+    function finalize() {
+        thisObject.container.eventHandler.stopListening(onMouseClickEventSuscriptionId)
+        thisObject.container.finalize()
+        thisObject.container = undefined
+        thisObject.fitFunction = undefined
+        thisObject.parentContainer = undefined
+        thisObject.panels = undefined
     }
 
-    drawIcon(icon, 1 / 2, 1 / 2, 0, 0, 14, thisObject.container)
-  }
+    function initialize(panels) {
+        thisObject.panels = panels
+        setPanelVisibility()
+
+        thisObject.container.frame.width = 25
+        thisObject.container.frame.height = 25
+
+        let position = {
+            x: thisObject.container.frame.width * 1 / 8,
+            y: 45
+        }
+
+        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)
+    }
+
+    function onMouseClick(event) {
+        if (thisObject.showPanels === false) {
+            thisObject.showPanels = true
+        } else {
+            thisObject.showPanels = false
+        }
+        setPanelVisibility()
+    }
+
+    function setPanelVisibility() {
+        for (let i = 0; i < thisObject.panels.length; i++) {
+            panel = canvas.panelsSpace.getPanel(thisObject.panels[i])
+            panel.isVisible = thisObject.showPanels
+        }
+    }
+
+    function getContainer(point) {
+        if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+            return thisObject.container
+        }
+    }
+
+    function draw() {
+        let icon
+        if (thisObject.showPanels === true) {
+            icon = canvas.designSpace.iconCollection.get('plotter-panel')
+        } else {
+            icon = canvas.designSpace.iconCollection.get('toggle-panel-off')
+        }
+
+        drawIcon(icon, 1 / 2, 1 / 2, 0, 0, 14, thisObject.container)
+    }
 }

Panels/PlotterPanel.js

@@ -1,174 +1,174 @@
 
-function newPlotterPanel () {
-  const MODULE_NAME = 'Plotter Panel'
-  const ERROR_LOG = true
-  const INTENSIVE_LOG = false
-  const logger = newWebDebugLog()
-  logger.fileName = MODULE_NAME
+function newPlotterPanel() {
+    const MODULE_NAME = 'Plotter Panel'
+    const ERROR_LOG = true
+    const INTENSIVE_LOG = false
+    const logger = newWebDebugLog()
+    logger.fileName = MODULE_NAME
 
-  let thisObject = {
-    fitFunction: undefined,
-    container: undefined,
-    isVisible: true,
-    onRecordChange: onRecordChange,
-    draw: draw,
-    getContainer: getContainer,
-    initialize: initialize,
-    finalize: finalize
-  }
-
-  thisObject.container = newContainer()
-  thisObject.container.initialize('Plotter Panel')
-
-  let heightFactor = 1
-  let currentRecord
-  let upDownButton
-  let panelNode
-
-  return thisObject
-
-  function finalize () {
-    thisObject.container.finalize()
-    thisObject.container = undefined
-    thisObject.fitFunction = undefined
-    thisObject.isVisible = undefined
-
-    heightFactor = undefined
-    currentRecord = undefined
-    upDownButton.finalize()
-    upDownButton = undefined
-    panelNode = undefined
-  }
-
-  function initialize (pPanelNode) {
-    panelNode = pPanelNode
-    thisObject.container.frame.containerName = panelNode.name
-
-    thisObject.container.frame.width = UI_PANEL.WIDTH.NORMAL
-    thisObject.container.frame.height = UI_PANEL.HEIGHT.NORMAL
-
-    thisObject.container.frame.position.x = canvas.chartingSpace.viewport.visibleArea.topRight.x - thisObject.container.frame.width - thisObject.container.frame.width * Math.random() * 8
-    thisObject.container.frame.position.y = canvas.chartingSpace.viewport.visibleArea.bottomLeft.y - thisObject.container.frame.height - thisObject.container.frame.height * Math.random() * 1.5
-
-    upDownButton = newUpDownButton()
-    upDownButton.parentContainer = thisObject.container
-    upDownButton.container.frame.parentFrame = thisObject.container.frame
-    upDownButton.fitFunction = thisObject.fitFunction
-    upDownButton.initialize()
-  }
-
-  function getContainer (point) {
-    if (thisObject.isVisible !== true) { return }
-    let container
-
-    container = upDownButton.getContainer(point)
-    if (container !== undefined) { return container }
-
-    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-      let checkPoint = {
-        x: point.x,
-        y: point.y
-      }
-
-      checkPoint = thisObject.fitFunction(checkPoint)
-
-      if (point.x === checkPoint.x && point.y === checkPoint.y) {
-        return thisObject.container
-      }
-    }
-  }
-
-  function onRecordChange (pCurrentRecord) {
-    currentRecord = pCurrentRecord
-  }
-
-  function draw () {
-    if (thisObject.isVisible !== true) { return }
-
-    thisObject.container.frame.draw(false, false, true, thisObject.fitFunction)
-    plotCurrentRecordData()
-    upDownButton.draw()
-  }
-
-  function plotCurrentRecordData () {
-    const frameBodyHeight = thisObject.container.frame.getBodyHeight()
-    const frameTitleHeight = thisObject.container.frame.height - frameBodyHeight
-
-    const X_AXIS = thisObject.container.frame.width / 2
-    const Y_AXIS = frameTitleHeight + frameBodyHeight / 2
-
-    const PANEL_HEIGHT = UI_PANEL.HEIGHT.NORMAL
-
-    if (currentRecord === undefined) { return }
-    let record = currentRecord
-
-    /* First we execute code if provided. */
-    if (panelNode.javascriptCode !== undefined) {
-      try {
-        eval(panelNode.javascriptCode.code)
-      } catch (err) {
-        if (ERROR_LOG === true) { logger.write('[ERROR] plotCurrentRecordData -> err = ' + err.stack) }
-        if (ERROR_LOG === true) { logger.write('[ERROR] plotCurrentRecordData -> javascriptCode.code = ' + panelNode.javascriptCode.code) }
-      }
+    let thisObject = {
+        fitFunction: undefined,
+        container: undefined,
+        isVisible: true,
+        onRecordChange: onRecordChange,
+        draw: draw,
+        getContainer: getContainer,
+        initialize: initialize,
+        finalize: finalize
     }
 
-    /* Second we go through the panel data. */
-    if (panelNode.panelData === undefined) { return }
-    for (let i = 0; i < panelNode.panelData.length; i++) {
-      let panelData = panelNode.panelData[i]
+    thisObject.container = newContainer()
+    thisObject.container.initialize('Plotter Panel')
 
-      let labelText = panelData.name
-      let labelPosition = i * 10 + 12
-      let valuePosition = i * 10 + 17
-      let value = 'No value defined.'
+    let heightFactor = 1
+    let currentRecord
+    let upDownButton
+    let panelNode
 
-      if (valuePosition > 100) {
-        thisObject.container.frame.height = UI_PANEL.HEIGHT.NORMAL * 1.25
-      }
+    return thisObject
 
-      if (valuePosition > 125) {
-        thisObject.container.frame.height = UI_PANEL.HEIGHT.NORMAL * 1.50
-      }
+    function finalize() {
+        thisObject.container.finalize()
+        thisObject.container = undefined
+        thisObject.fitFunction = undefined
+        thisObject.isVisible = undefined
 
-      if (valuePosition > 150) {
-        thisObject.container.frame.height = UI_PANEL.HEIGHT.NORMAL * 1.75
-      }
+        heightFactor = undefined
+        currentRecord = undefined
+        upDownButton.finalize()
+        upDownButton = undefined
+        panelNode = undefined
+    }
 
-      if (valuePosition > 175) {
-        thisObject.container.frame.height = UI_PANEL.HEIGHT.NORMAL * 2.00
-      }
+    function initialize(pPanelNode) {
+        panelNode = pPanelNode
+        thisObject.container.frame.containerName = panelNode.name
 
-      if (panelData.dataFormula !== undefined) {
-        try {
-          value = eval(panelData.dataFormula.code)
-        } catch (err) {
-          if (ERROR_LOG === true) { logger.write('[ERROR] plotCurrentRecordData -> err = ' + err.stack) }
-          if (ERROR_LOG === true) { logger.write('[ERROR] plotCurrentRecordData -> dataFormula.code = ' + panelData.dataFormula.code) }
+        thisObject.container.frame.width = UI_PANEL.WIDTH.NORMAL
+        thisObject.container.frame.height = UI_PANEL.HEIGHT.NORMAL
+
+        thisObject.container.frame.position.x = canvas.chartingSpace.viewport.visibleArea.topRight.x - thisObject.container.frame.width - thisObject.container.frame.width * Math.random() * 8
+        thisObject.container.frame.position.y = canvas.chartingSpace.viewport.visibleArea.bottomLeft.y - thisObject.container.frame.height - thisObject.container.frame.height * Math.random() * 1.5
+
+        upDownButton = newUpDownButton()
+        upDownButton.parentContainer = thisObject.container
+        upDownButton.container.frame.parentFrame = thisObject.container.frame
+        upDownButton.fitFunction = thisObject.fitFunction
+        upDownButton.initialize()
+    }
+
+    function getContainer(point) {
+        if (thisObject.isVisible !== true) { return }
+        let container
+
+        container = upDownButton.getContainer(point)
+        if (container !== undefined) { return container }
+
+        if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+            let checkPoint = {
+                x: point.x,
+                y: point.y
+            }
+
+            checkPoint = thisObject.fitFunction(checkPoint)
+
+            if (point.x === checkPoint.x && point.y === checkPoint.y) {
+                return thisObject.container
+            }
+        }
+    }
+
+    function onRecordChange(pCurrentRecord) {
+        currentRecord = pCurrentRecord
+    }
+
+    function draw() {
+        if (thisObject.isVisible !== true) { return }
+
+        thisObject.container.frame.draw(false, false, true, thisObject.fitFunction)
+        plotCurrentRecordData()
+        upDownButton.draw()
+    }
+
+    function plotCurrentRecordData() {
+        const frameBodyHeight = thisObject.container.frame.getBodyHeight()
+        const frameTitleHeight = thisObject.container.frame.height - frameBodyHeight
+
+        const X_AXIS = thisObject.container.frame.width / 2
+        const Y_AXIS = frameTitleHeight + frameBodyHeight / 2
+
+        const PANEL_HEIGHT = UI_PANEL.HEIGHT.NORMAL
+
+        if (currentRecord === undefined) { return }
+        let record = currentRecord
+
+        /* First we execute code if provided. */
+        if (panelNode.javascriptCode !== undefined) {
+            try {
+                eval(panelNode.javascriptCode.code)
+            } catch (err) {
+                if (ERROR_LOG === true) { logger.write('[ERROR] plotCurrentRecordData -> err = ' + err.stack) }
+                if (ERROR_LOG === true) { logger.write('[ERROR] plotCurrentRecordData -> javascriptCode.code = ' + panelNode.javascriptCode.code) }
+            }
+        }
+
+        /* Second we go through the panel data. */
+        if (panelNode.panelData === undefined) { return }
+        for (let i = 0; i < panelNode.panelData.length; i++) {
+            let panelData = panelNode.panelData[i]
+
+            let labelText = panelData.name
+            let labelPosition = i * 10 + 12
+            let valuePosition = i * 10 + 17
+            let value = 'No value defined.'
+
+            if (valuePosition > 100) {
+                thisObject.container.frame.height = UI_PANEL.HEIGHT.NORMAL * 1.25
+            }
+
+            if (valuePosition > 125) {
+                thisObject.container.frame.height = UI_PANEL.HEIGHT.NORMAL * 1.50
+            }
+
+            if (valuePosition > 150) {
+                thisObject.container.frame.height = UI_PANEL.HEIGHT.NORMAL * 1.75
+            }
+
+            if (valuePosition > 175) {
+                thisObject.container.frame.height = UI_PANEL.HEIGHT.NORMAL * 2.00
+            }
+
+            if (panelData.dataFormula !== undefined) {
+                try {
+                    value = eval(panelData.dataFormula.code)
+                } catch (err) {
+                    if (ERROR_LOG === true) { logger.write('[ERROR] plotCurrentRecordData -> err = ' + err.stack) }
+                    if (ERROR_LOG === true) { logger.write('[ERROR] plotCurrentRecordData -> dataFormula.code = ' + panelData.dataFormula.code) }
+                }
+            }
+
+            if (panelData.config.valueDecimals !== undefined) {
+                if (value !== undefined) {
+                    if (isNaN(value) === false) {
+                        value = dynamicDecimals(value, panelData.config.valueDecimals)
+                    }
+                }
+            }
+
+            if (panelData.config.labelText !== undefined) {
+                labelText = panelData.config.labelText
+            }
+
+            if (panelData.config.labelPosition !== undefined) {
+                labelPosition = panelData.config.labelPosition
+            }
+
+            if (panelData.config.valuePosition !== undefined) {
+                valuePosition = panelData.config.valuePosition
+            }
+
+            printLabel(labelText, X_AXIS, UI_PANEL.HEIGHT.NORMAL * labelPosition / 100 / heightFactor, '0.60', undefined, undefined, true, thisObject.container, thisObject.fitFunction)
+            printLabel(value, X_AXIS, UI_PANEL.HEIGHT.NORMAL * valuePosition / 100 / heightFactor, '1.00', 14, undefined, true, thisObject.container, thisObject.fitFunction, false, true)
         }
-      }
-
-      if (panelData.config.valueDecimals !== undefined) {
-        if (value !== undefined) {
-          if (isNaN(value) === false) {
-            value = dynamicDecimals(value, panelData.config.valueDecimals)
-          }
-        }
-      }
-
-      if (panelData.config.labelText !== undefined) {
-        labelText = panelData.config.labelText
-      }
-
-      if (panelData.config.labelPosition !== undefined) {
-        labelPosition = panelData.config.labelPosition
-      }
-
-      if (panelData.config.valuePosition !== undefined) {
-        valuePosition = panelData.config.valuePosition
-      }
-
-      printLabel(labelText, X_AXIS, UI_PANEL.HEIGHT.NORMAL * labelPosition / 100 / heightFactor, '0.60', undefined, undefined, true, thisObject.container, thisObject.fitFunction)
-      printLabel(value, X_AXIS, UI_PANEL.HEIGHT.NORMAL * valuePosition / 100 / heightFactor, '1.00', 14, undefined, true, thisObject.container, thisObject.fitFunction, false, true)
     }
-  }
 }

Panels/UpDownButton.js

@@ -1,244 +1,244 @@
-function newUpDownButton () {
-  let thisObject = {
-    container: undefined,
-    fitFunction: undefined,
-    parentContainer: undefined,
-    status: undefined,
-    setStatus: setStatus,
-    physics: physics,
-    draw: draw,
-    getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
-    initialize: initialize,
-    finalize: finalize
-  }
-
-  let isInitialized = false
-   /* Cointainer stuff */
-
-  thisObject.container = newContainer()
-  thisObject.container.name = 'Up Down Button'
-  thisObject.container.initialize()
-  thisObject.container.isClickeable = true
-  thisObject.container.isDraggeable = false
-  thisObject.container.frame.containerName = 'Up Down Button'
-
-  thisObject.status = 'up'
-  let upPosition = {}
-  let downPosition = {}
-  let transitionPosition = {}
-
-  let onMouseClickEventSuscriptionId
-  return thisObject
-
-  function finalize () {
-    thisObject.container.eventHandler.stopListening(onMouseClickEventSuscriptionId)
-    thisObject.container.finalize()
-    thisObject.container = undefined
-    thisObject.fitFunction = undefined
-    thisObject.parentContainer = undefined
-
-    thisObject.status = undefined
-    upPosition = undefined
-    downPosition = undefined
-    transitionPosition = undefined
-  }
-
-  function initialize () {
-    thisObject.container.frame.width = 12
-    thisObject.container.frame.height = 12
-
-    let position = {
-      x: thisObject.container.frame.parentFrame.width * 5.75 / 8 - thisObject.container.frame.width / 2,
-      y: 40 * 4 / 8 - thisObject.container.frame.height / 2
+function newUpDownButton() {
+    let thisObject = {
+        container: undefined,
+        fitFunction: undefined,
+        parentContainer: undefined,
+        status: undefined,
+        setStatus: setStatus,
+        physics: physics,
+        draw: draw,
+        getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
+        initialize: initialize,
+        finalize: finalize
     }
 
-    thisObject.container.frame.position = position
+    let isInitialized = false
+    /* Cointainer stuff */
 
-    upPosition.x = thisObject.parentContainer.frame.position.x
-    upPosition.y = thisObject.parentContainer.frame.position.y
+    thisObject.container = newContainer()
+    thisObject.container.name = 'Up Down Button'
+    thisObject.container.initialize()
+    thisObject.container.isClickeable = true
+    thisObject.container.isDraggeable = false
+    thisObject.container.frame.containerName = 'Up Down Button'
 
-    downPosition.x = thisObject.parentContainer.frame.position.x
-    downPosition.y = canvas.chartingSpace.viewport.visibleArea.bottomRight.y
+    thisObject.status = 'up'
+    let upPosition = {}
+    let downPosition = {}
+    let transitionPosition = {}
 
-    transitionPosition.x = upPosition.x
-    transitionPosition.y = upPosition.y
+    let onMouseClickEventSuscriptionId
+    return thisObject
 
-    /* Lets listen to our own events to react when we have a Mouse Click */
-    onMouseClickEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
+    function finalize() {
+        thisObject.container.eventHandler.stopListening(onMouseClickEventSuscriptionId)
+        thisObject.container.finalize()
+        thisObject.container = undefined
+        thisObject.fitFunction = undefined
+        thisObject.parentContainer = undefined
 
-    isInitialized = true
-  }
-
-  function setStatus (value) {
-    if (value === 'up' && thisObject.status === 'down') {
-      thisObject.status = 'going up'
+        thisObject.status = undefined
+        upPosition = undefined
+        downPosition = undefined
+        transitionPosition = undefined
     }
-    if (value === 'down' && thisObject.status === 'up') {
-      thisObject.status = 'going down'
+
+    function initialize() {
+        thisObject.container.frame.width = 12
+        thisObject.container.frame.height = 12
+
+        let position = {
+            x: thisObject.container.frame.parentFrame.width * 5.75 / 8 - thisObject.container.frame.width / 2,
+            y: 40 * 4 / 8 - thisObject.container.frame.height / 2
+        }
+
+        thisObject.container.frame.position = position
+
+        upPosition.x = thisObject.parentContainer.frame.position.x
+        upPosition.y = thisObject.parentContainer.frame.position.y
+
+        downPosition.x = thisObject.parentContainer.frame.position.x
+        downPosition.y = canvas.chartingSpace.viewport.visibleArea.bottomRight.y
+
+        transitionPosition.x = upPosition.x
+        transitionPosition.y = upPosition.y
+
+        /* Lets listen to our own events to react when we have a Mouse Click */
+        onMouseClickEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
+
+        isInitialized = true
     }
-  }
 
-  function onMouseClick (event) {
-    if (thisObject.status === 'up') {
-      transitionPosition.x = upPosition.x
-      transitionPosition.y = upPosition.y
-
-      thisObject.status = 'going down'
-    } else {
-      transitionPosition.x = downPosition.x
-      transitionPosition.y = downPosition.y
-
-      thisObject.status = 'going up'
+    function setStatus(value) {
+        if (value === 'up' && thisObject.status === 'down') {
+            thisObject.status = 'going up'
+        }
+        if (value === 'down' && thisObject.status === 'up') {
+            thisObject.status = 'going down'
+        }
     }
-  }
 
-  function physics () {
-    if (isInitialized === false) { return }
+    function onMouseClick(event) {
+        if (thisObject.status === 'up') {
+            transitionPosition.x = upPosition.x
+            transitionPosition.y = upPosition.y
 
-    upPosition.x = thisObject.parentContainer.frame.position.x
-    upPosition.y = canvas.chartingSpace.viewport.visibleArea.topRight.y
+            thisObject.status = 'going down'
+        } else {
+            transitionPosition.x = downPosition.x
+            transitionPosition.y = downPosition.y
 
-    downPosition.x = thisObject.parentContainer.frame.position.x
-    downPosition.y = canvas.chartingSpace.viewport.visibleArea.bottomRight.y
-
-    if (thisObject.status === 'going down') {
-      if (transitionPosition.y < downPosition.y) {
-        transitionPosition.y = transitionPosition.y + 50
-        thisObject.parentContainer.frame.position.y = transitionPosition.y
-      } else {
-        thisObject.parentContainer.frame.position.y = downPosition.y
-        thisObject.status = 'down'
-      }
+            thisObject.status = 'going up'
+        }
     }
-    if (thisObject.status === 'going up') {
-      if (transitionPosition.y > upPosition.y) {
-        transitionPosition.y = transitionPosition.y - 50
-        thisObject.parentContainer.frame.position.y = transitionPosition.y
-      } else {
-        thisObject.parentContainer.frame.position.y = upPosition.y
-        thisObject.status = 'up'
-      }
+
+    function physics() {
+        if (isInitialized === false) { return }
+
+        upPosition.x = thisObject.parentContainer.frame.position.x
+        upPosition.y = canvas.chartingSpace.viewport.visibleArea.topRight.y
+
+        downPosition.x = thisObject.parentContainer.frame.position.x
+        downPosition.y = canvas.chartingSpace.viewport.visibleArea.bottomRight.y
+
+        if (thisObject.status === 'going down') {
+            if (transitionPosition.y < downPosition.y) {
+                transitionPosition.y = transitionPosition.y + 50
+                thisObject.parentContainer.frame.position.y = transitionPosition.y
+            } else {
+                thisObject.parentContainer.frame.position.y = downPosition.y
+                thisObject.status = 'down'
+            }
+        }
+        if (thisObject.status === 'going up') {
+            if (transitionPosition.y > upPosition.y) {
+                transitionPosition.y = transitionPosition.y - 50
+                thisObject.parentContainer.frame.position.y = transitionPosition.y
+            } else {
+                thisObject.parentContainer.frame.position.y = upPosition.y
+                thisObject.status = 'up'
+            }
+        }
     }
-  }
 
-  function draw () {
-    if (isInitialized === false) { return }
+    function draw() {
+        if (isInitialized === false) { return }
 
-    drawButton()
-  }
-
-  function getContainer (point, purpose) {
-    let container
-    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-      return thisObject.container
+        drawButton()
     }
-  }
 
-  function drawButton () {
-    let point1
-    let point2
-    let point3
-
-    switch (thisObject.status) {
-      case 'up': {
-        point1 = {
-          x: 3,
-          y: 3
+    function getContainer(point, purpose) {
+        let container
+        if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+            return thisObject.container
         }
-
-        point2 = {
-          x: thisObject.container.frame.width - 3,
-          y: 3
-        }
-
-        point3 = {
-          x: thisObject.container.frame.width / 2,
-          y: thisObject.container.frame.height - 3
-        }
-        break
-      }
-
-      case 'going down': {
-        point1 = {
-          x: 4,
-          y: 4
-        }
-
-        point2 = {
-          x: thisObject.container.frame.width - 4,
-          y: 4
-        }
-
-        point3 = {
-          x: thisObject.container.frame.width / 2,
-          y: thisObject.container.frame.height - 4
-        }
-        break
-      }
-
-      case 'going up': {
-        point1 = {
-          x: 4,
-          y: thisObject.container.frame.height - 4
-        }
-
-        point2 = {
-          x: thisObject.container.frame.width - 4,
-          y: thisObject.container.frame.height - 4
-        }
-
-        point3 = {
-          x: thisObject.container.frame.width / 2,
-          y: 4
-        }
-        break
-      }
-
-      case 'down': {
-        point1 = {
-          x: 3,
-          y: thisObject.container.frame.height - 3
-        }
-
-        point2 = {
-          x: thisObject.container.frame.width - 3,
-          y: thisObject.container.frame.height - 3
-        }
-
-        point3 = {
-          x: thisObject.container.frame.width / 2,
-          y: 3
-        }
-        break
-      }
     }
 
+    function drawButton() {
+        let point1
+        let point2
+        let point3
+
+        switch (thisObject.status) {
+            case 'up': {
+                point1 = {
+                    x: 3,
+                    y: 3
+                }
+
+                point2 = {
+                    x: thisObject.container.frame.width - 3,
+                    y: 3
+                }
+
+                point3 = {
+                    x: thisObject.container.frame.width / 2,
+                    y: thisObject.container.frame.height - 3
+                }
+                break
+            }
+
+            case 'going down': {
+                point1 = {
+                    x: 4,
+                    y: 4
+                }
+
+                point2 = {
+                    x: thisObject.container.frame.width - 4,
+                    y: 4
+                }
+
+                point3 = {
+                    x: thisObject.container.frame.width / 2,
+                    y: thisObject.container.frame.height - 4
+                }
+                break
+            }
+
+            case 'going up': {
+                point1 = {
+                    x: 4,
+                    y: thisObject.container.frame.height - 4
+                }
+
+                point2 = {
+                    x: thisObject.container.frame.width - 4,
+                    y: thisObject.container.frame.height - 4
+                }
+
+                point3 = {
+                    x: thisObject.container.frame.width / 2,
+                    y: 4
+                }
+                break
+            }
+
+            case 'down': {
+                point1 = {
+                    x: 3,
+                    y: thisObject.container.frame.height - 3
+                }
+
+                point2 = {
+                    x: thisObject.container.frame.width - 3,
+                    y: thisObject.container.frame.height - 3
+                }
+
+                point3 = {
+                    x: thisObject.container.frame.width / 2,
+                    y: 3
+                }
+                break
+            }
+        }
+
         /* Now the transformations. */
 
-    point1 = thisObject.container.frame.frameThisPoint(point1)
-    point2 = thisObject.container.frame.frameThisPoint(point2)
-    point3 = thisObject.container.frame.frameThisPoint(point3)
+        point1 = thisObject.container.frame.frameThisPoint(point1)
+        point2 = thisObject.container.frame.frameThisPoint(point2)
+        point3 = thisObject.container.frame.frameThisPoint(point3)
 
-    if (thisObject.fitFunction !== undefined) {
-      point1 = thisObject.fitFunction(point1)
-      point2 = thisObject.fitFunction(point2)
-      point3 = thisObject.fitFunction(point3)
-    }
+        if (thisObject.fitFunction !== undefined) {
+            point1 = thisObject.fitFunction(point1)
+            point2 = thisObject.fitFunction(point2)
+            point3 = thisObject.fitFunction(point3)
+        }
 
         /* Lets start the drawing. */
 
-    browserCanvasContext.beginPath()
-    browserCanvasContext.moveTo(point1.x, point1.y)
-    browserCanvasContext.lineTo(point2.x, point2.y)
-    browserCanvasContext.lineTo(point3.x, point3.y)
-    browserCanvasContext.lineTo(point1.x, point1.y)
-    browserCanvasContext.closePath()
+        browserCanvasContext.beginPath()
+        browserCanvasContext.moveTo(point1.x, point1.y)
+        browserCanvasContext.lineTo(point2.x, point2.y)
+        browserCanvasContext.lineTo(point3.x, point3.y)
+        browserCanvasContext.lineTo(point1.x, point1.y)
+        browserCanvasContext.closePath()
 
-    browserCanvasContext.strokeStyle = 'rgba(250, 250, 250, 1)'
-    browserCanvasContext.lineWidth = 1
-    browserCanvasContext.stroke()
+        browserCanvasContext.strokeStyle = 'rgba(250, 250, 250, 1)'
+        browserCanvasContext.lineWidth = 1
+        browserCanvasContext.stroke()
 
-    browserCanvasContext.fillStyle = 'rgba(250, 250, 250, 1)'
-    browserCanvasContext.fill()
-  }
+        browserCanvasContext.fillStyle = 'rgba(250, 250, 250, 1)'
+        browserCanvasContext.fill()
+    }
 }

Plotting/NodesAnnouncements.js

@@ -1,46 +1,46 @@
-function newNodesAnnouncements () {
-  const MODULE_NAME = 'Nodes Announcements'
-  const logger = newWebDebugLog()
-  logger.fileName = MODULE_NAME
+function newNodesAnnouncements() {
+    const MODULE_NAME = 'Nodes Announcements'
+    const logger = newWebDebugLog()
+    logger.fileName = MODULE_NAME
 
-  let thisObject = {
-    onRecordChange: onRecordChange,
-    initialize: initialize,
-    finalize: finalize
-  }
-
-  let hiriarchyMap
-  return thisObject
-
-  function finalize () {
-    hiriarchyMap = undefined
-  }
-
-  function initialize (pRootNode) {
-    let rootNode = canvas.designSpace.workspace.getHierarchyHeadsById(pRootNode.id)
-    hiriarchyMap = getHiriarchyMap(rootNode)
-  }
-
-  function onRecordChange (currentRecord) {
-    if (currentRecord === undefined) { return }
-    let array = currentRecord.announcements
-    if (array === undefined) { return }
-    for (let i = 0; i < array.length; i++) {
-      let arrayItem = array[i]
-      let nodeId = arrayItem[0]
-      let value = arrayItem[1]
-      applyValue(nodeId, value)
+    let thisObject = {
+        onRecordChange: onRecordChange,
+        initialize: initialize,
+        finalize: finalize
     }
-  }
 
-  function applyValue (nodeId, value) {
-    if (canvas.chartingSpace.visible !== true) { return }
-    let node = hiriarchyMap.get(nodeId)
-    if (node === undefined) { return }
-    if (node.payload === undefined) { return }
-    if (node.payload.uiObject === undefined) { return }
-    if (value === true) { value = 'true' }
-    if (value === false) { value = 'false' }
-    node.payload.uiObject.setValue(value, 20)
-  }
+    let hiriarchyMap
+    return thisObject
+
+    function finalize() {
+        hiriarchyMap = undefined
+    }
+
+    function initialize(pRootNode) {
+        let rootNode = canvas.designSpace.workspace.getHierarchyHeadsById(pRootNode.id)
+        hiriarchyMap = getHiriarchyMap(rootNode)
+    }
+
+    function onRecordChange(currentRecord) {
+        if (currentRecord === undefined) { return }
+        let array = currentRecord.announcements
+        if (array === undefined) { return }
+        for (let i = 0; i < array.length; i++) {
+            let arrayItem = array[i]
+            let nodeId = arrayItem[0]
+            let value = arrayItem[1]
+            applyValue(nodeId, value)
+        }
+    }
+
+    function applyValue(nodeId, value) {
+        if (canvas.chartingSpace.visible !== true) { return }
+        let node = hiriarchyMap.get(nodeId)
+        if (node === undefined) { return }
+        if (node.payload === undefined) { return }
+        if (node.payload.uiObject === undefined) { return }
+        if (value === true) { value = 'true' }
+        if (value === false) { value = 'false' }
+        node.payload.uiObject.setValue(value, 20)
+    }
 }

Plotting/NodesErrors.js

@@ -1,47 +1,47 @@
-function newNodesErrors () {
-  const MODULE_NAME = 'Nodes Errors'
-  const logger = newWebDebugLog()
-  logger.fileName = MODULE_NAME
+function newNodesErrors() {
+    const MODULE_NAME = 'Nodes Errors'
+    const logger = newWebDebugLog()
+    logger.fileName = MODULE_NAME
 
-  let thisObject = {
-    onRecordChange: onRecordChange,
-    initialize: initialize,
-    finalize: finalize
-  }
-  let hiriarchyMap
-  return thisObject
-
-  function finalize () {
-    hiriarchyMap = undefined
-  }
-
-  function initialize (pRootNode) {
-    let rootNode = canvas.designSpace.workspace.getHierarchyHeadsById(pRootNode.id)
-    hiriarchyMap = getHiriarchyMap(rootNode)
-  }
-
-  function onRecordChange (currentRecord) {
-    if (currentRecord === undefined) { return }
-    let array = currentRecord.errors
-    if (array === undefined) { return }
-    for (let i = 0; i < array.length; i++) {
-      let arrayItem = array[i]
-      let nodeId = arrayItem[0]
-      let value = arrayItem[1]
-      applyValue(nodeId, value)
+    let thisObject = {
+        onRecordChange: onRecordChange,
+        initialize: initialize,
+        finalize: finalize
     }
-  }
+    let hiriarchyMap
+    return thisObject
 
-  function applyValue (nodeId, value) {
-    if (canvas.chartingSpace.visible !== true) { return }
-    let node = hiriarchyMap.get(nodeId)
-    if (node === undefined) { return }
-    if (node.payload === undefined) { return }
-    if (node.payload.uiObject === undefined) { return }
-    if (value === '') {
-      node.payload.uiObject.resetErrorMessage()
-    } else {
-      node.payload.uiObject.setErrorMessage(value)
+    function finalize() {
+        hiriarchyMap = undefined
+    }
+
+    function initialize(pRootNode) {
+        let rootNode = canvas.designSpace.workspace.getHierarchyHeadsById(pRootNode.id)
+        hiriarchyMap = getHiriarchyMap(rootNode)
+    }
+
+    function onRecordChange(currentRecord) {
+        if (currentRecord === undefined) { return }
+        let array = currentRecord.errors
+        if (array === undefined) { return }
+        for (let i = 0; i < array.length; i++) {
+            let arrayItem = array[i]
+            let nodeId = arrayItem[0]
+            let value = arrayItem[1]
+            applyValue(nodeId, value)
+        }
+    }
+
+    function applyValue(nodeId, value) {
+        if (canvas.chartingSpace.visible !== true) { return }
+        let node = hiriarchyMap.get(nodeId)
+        if (node === undefined) { return }
+        if (node.payload === undefined) { return }
+        if (node.payload.uiObject === undefined) { return }
+        if (value === '') {
+            node.payload.uiObject.resetErrorMessage()
+        } else {
+            node.payload.uiObject.setErrorMessage(value)
+        }
     }
-  }
 }

Plotting/NodesHighlights.js

@@ -1,42 +1,42 @@
-function newNodesHighlights () {
-  const MODULE_NAME = 'Nodes Highlights'
-  const logger = newWebDebugLog()
-  logger.fileName = MODULE_NAME
+function newNodesHighlights() {
+    const MODULE_NAME = 'Nodes Highlights'
+    const logger = newWebDebugLog()
+    logger.fileName = MODULE_NAME
 
-  let thisObject = {
-    onRecordChange: onRecordChange,
-    initialize: initialize,
-    finalize: finalize
-  }
-
-  let hiriarchyMap
-  return thisObject
-
-  function finalize () {
-    hiriarchyMap = undefined
-  }
-
-  function initialize (pRootNode) {
-    let rootNode = canvas.designSpace.workspace.getHierarchyHeadsById(pRootNode.id)
-    hiriarchyMap = getHiriarchyMap(rootNode)
-  }
-
-  function onRecordChange (currentRecord) {
-    if (currentRecord === undefined) { return }
-    let array = currentRecord.highlights
-    if (array === undefined) { return }
-    for (let i = 0; i < array.length; i++) {
-      let nodeId = array[i]
-      highlight(nodeId)
+    let thisObject = {
+        onRecordChange: onRecordChange,
+        initialize: initialize,
+        finalize: finalize
     }
-  }
 
-  function highlight (nodeId) {
-    if (canvas.chartingSpace.visible !== true) { return }
-    let node = hiriarchyMap.get(nodeId)
-    if (node === undefined) { return }
-    if (node.payload === undefined) { return }
-    if (node.payload.uiObject === undefined) { return }
-    node.payload.uiObject.highlight(10)
-  }
+    let hiriarchyMap
+    return thisObject
+
+    function finalize() {
+        hiriarchyMap = undefined
+    }
+
+    function initialize(pRootNode) {
+        let rootNode = canvas.designSpace.workspace.getHierarchyHeadsById(pRootNode.id)
+        hiriarchyMap = getHiriarchyMap(rootNode)
+    }
+
+    function onRecordChange(currentRecord) {
+        if (currentRecord === undefined) { return }
+        let array = currentRecord.highlights
+        if (array === undefined) { return }
+        for (let i = 0; i < array.length; i++) {
+            let nodeId = array[i]
+            highlight(nodeId)
+        }
+    }
+
+    function highlight(nodeId) {
+        if (canvas.chartingSpace.visible !== true) { return }
+        let node = hiriarchyMap.get(nodeId)
+        if (node === undefined) { return }
+        if (node.payload === undefined) { return }
+        if (node.payload.uiObject === undefined) { return }
+        node.payload.uiObject.highlight(10)
+    }
 }

Plotting/NodesProgress.js

@@ -1,47 +1,47 @@
-function newNodesProgress () {
-  const MODULE_NAME = 'Nodes Progress'
-  const logger = newWebDebugLog()
-  logger.fileName = MODULE_NAME
+function newNodesProgress() {
+    const MODULE_NAME = 'Nodes Progress'
+    const logger = newWebDebugLog()
+    logger.fileName = MODULE_NAME
 
-  let thisObject = {
-    onRecordChange: onRecordChange,
-    initialize: initialize,
-    finalize: finalize
-  }
-
-  let hiriarchyMap
-  return thisObject
-
-  function finalize () {
-    hiriarchyMap = undefined
-  }
-
-  function initialize (pRootNode) {
-    let rootNode = canvas.designSpace.workspace.getHierarchyHeadsById(pRootNode.id)
-    hiriarchyMap = getHiriarchyMap(rootNode)
-  }
-
-  function onRecordChange (currentRecord) {
-    if (currentRecord === undefined) { return }
-    let array = currentRecord.progress
-    if (array === undefined) { return }
-    for (let i = 0; i < array.length; i++) {
-      let arrayItem = array[i]
-      let nodeId = arrayItem[0]
-      let value = arrayItem[1]
-      applyValue(nodeId, value)
+    let thisObject = {
+        onRecordChange: onRecordChange,
+        initialize: initialize,
+        finalize: finalize
     }
-  }
 
-  function applyValue (nodeId, value) {
-    if (canvas.chartingSpace.visible !== true) { return }
-    let node = hiriarchyMap.get(nodeId)
-    if (node === undefined) { return }
-    if (node.payload === undefined) { return }
-    if (node.payload.uiObject === undefined) { return }
-    if (value === true) { value = 'true' }
-    if (value === false) { value = 'false' }
-    node.payload.uiObject.setPercentage(value, 30)
-  }
+    let hiriarchyMap
+    return thisObject
+
+    function finalize() {
+        hiriarchyMap = undefined
+    }
+
+    function initialize(pRootNode) {
+        let rootNode = canvas.designSpace.workspace.getHierarchyHeadsById(pRootNode.id)
+        hiriarchyMap = getHiriarchyMap(rootNode)
+    }
+
+    function onRecordChange(currentRecord) {
+        if (currentRecord === undefined) { return }
+        let array = currentRecord.progress
+        if (array === undefined) { return }
+        for (let i = 0; i < array.length; i++) {
+            let arrayItem = array[i]
+            let nodeId = arrayItem[0]
+            let value = arrayItem[1]
+            applyValue(nodeId, value)
+        }
+    }
+
+    function applyValue(nodeId, value) {
+        if (canvas.chartingSpace.visible !== true) { return }
+        let node = hiriarchyMap.get(nodeId)
+        if (node === undefined) { return }
+        if (node.payload === undefined) { return }
+        if (node.payload.uiObject === undefined) { return }
+        if (value === true) { value = 'true' }
+        if (value === false) { value = 'false' }
+        node.payload.uiObject.setPercentage(value, 30)
+    }
 }
 

Plotting/NodesRunning.js

@@ -1,47 +1,47 @@
-function newNodesRunning () {
-  const MODULE_NAME = 'Nodes Running'
-  const logger = newWebDebugLog()
-  logger.fileName = MODULE_NAME
+function newNodesRunning() {
+    const MODULE_NAME = 'Nodes Running'
+    const logger = newWebDebugLog()
+    logger.fileName = MODULE_NAME
 
-  let thisObject = {
-    onRecordChange: onRecordChange,
-    initialize: initialize,
-    finalize: finalize
-  }
-
-  let hiriarchyMap
-  return thisObject
-
-  function finalize () {
-    hiriarchyMap = undefined
-  }
-
-  function initialize (pRootNode) {
-    let rootNode = canvas.designSpace.workspace.getHierarchyHeadsById(pRootNode.id)
-    hiriarchyMap = getHiriarchyMap(rootNode)
-  }
-
-  function onRecordChange (currentRecord) {
-    if (currentRecord === undefined) { return }
-    let array = currentRecord.running
-    if (array === undefined) { return }
-    for (let i = 0; i < array.length; i++) {
-      let arrayItem = array[i]
-      let nodeId = arrayItem[0]
-      let value = arrayItem[1]
-      applyValue(nodeId, value)
+    let thisObject = {
+        onRecordChange: onRecordChange,
+        initialize: initialize,
+        finalize: finalize
     }
-  }
 
-  function applyValue (nodeId, value) {
-    if (canvas.chartingSpace.visible !== true) { return }
-    let node = hiriarchyMap.get(nodeId)
-    if (node === undefined) { return }
-    if (node.payload === undefined) { return }
-    if (node.payload.uiObject === undefined) { return }
-    if (value === true) { value = 'true' }
-    if (value === false) { value = 'false' }
-    node.payload.uiObject.runningAtBackend()
-  }
+    let hiriarchyMap
+    return thisObject
+
+    function finalize() {
+        hiriarchyMap = undefined
+    }
+
+    function initialize(pRootNode) {
+        let rootNode = canvas.designSpace.workspace.getHierarchyHeadsById(pRootNode.id)
+        hiriarchyMap = getHiriarchyMap(rootNode)
+    }
+
+    function onRecordChange(currentRecord) {
+        if (currentRecord === undefined) { return }
+        let array = currentRecord.running
+        if (array === undefined) { return }
+        for (let i = 0; i < array.length; i++) {
+            let arrayItem = array[i]
+            let nodeId = arrayItem[0]
+            let value = arrayItem[1]
+            applyValue(nodeId, value)
+        }
+    }
+
+    function applyValue(nodeId, value) {
+        if (canvas.chartingSpace.visible !== true) { return }
+        let node = hiriarchyMap.get(nodeId)
+        if (node === undefined) { return }
+        if (node.payload === undefined) { return }
+        if (node.payload.uiObject === undefined) { return }
+        if (value === true) { value = 'true' }
+        if (value === false) { value = 'false' }
+        node.payload.uiObject.runningAtBackend()
+    }
 }
 

Plotting/NodesStatus.js

@@ -1,47 +1,47 @@
-function newNodesStatus () {
-  const MODULE_NAME = 'Nodes Status'
-  const logger = newWebDebugLog()
-  logger.fileName = MODULE_NAME
+function newNodesStatus() {
+    const MODULE_NAME = 'Nodes Status'
+    const logger = newWebDebugLog()
+    logger.fileName = MODULE_NAME
 
-  let thisObject = {
-    onRecordChange: onRecordChange,
-    initialize: initialize,
-    finalize: finalize
-  }
-
-  let hiriarchyMap
-  return thisObject
-
-  function finalize () {
-    hiriarchyMap = undefined
-  }
-
-  function initialize (pRootNode) {
-    let rootNode = canvas.designSpace.workspace.getHierarchyHeadsById(pRootNode.id)
-    hiriarchyMap = getHiriarchyMap(rootNode)
-  }
-
-  function onRecordChange (currentRecord) {
-    if (currentRecord === undefined) { return }
-    let array = currentRecord.status
-    if (array === undefined) { return }
-    for (let i = 0; i < array.length; i++) {
-      let arrayItem = array[i]
-      let nodeId = arrayItem[0]
-      let value = arrayItem[1]
-      applyValue(nodeId, value)
+    let thisObject = {
+        onRecordChange: onRecordChange,
+        initialize: initialize,
+        finalize: finalize
     }
-  }
 
-  function applyValue (nodeId, value) {
-    if (canvas.chartingSpace.visible !== true) { return }
-    let node = hiriarchyMap.get(nodeId)
-    if (node === undefined) { return }
-    if (node.payload === undefined) { return }
-    if (node.payload.uiObject === undefined) { return }
-    if (value === true) { value = 'true' }
-    if (value === false) { value = 'false' }
-    node.payload.uiObject.setStatus(value, 30)
-  }
+    let hiriarchyMap
+    return thisObject
+
+    function finalize() {
+        hiriarchyMap = undefined
+    }
+
+    function initialize(pRootNode) {
+        let rootNode = canvas.designSpace.workspace.getHierarchyHeadsById(pRootNode.id)
+        hiriarchyMap = getHiriarchyMap(rootNode)
+    }
+
+    function onRecordChange(currentRecord) {
+        if (currentRecord === undefined) { return }
+        let array = currentRecord.status
+        if (array === undefined) { return }
+        for (let i = 0; i < array.length; i++) {
+            let arrayItem = array[i]
+            let nodeId = arrayItem[0]
+            let value = arrayItem[1]
+            applyValue(nodeId, value)
+        }
+    }
+
+    function applyValue(nodeId, value) {
+        if (canvas.chartingSpace.visible !== true) { return }
+        let node = hiriarchyMap.get(nodeId)
+        if (node === undefined) { return }
+        if (node.payload === undefined) { return }
+        if (node.payload.uiObject === undefined) { return }
+        if (value === true) { value = 'true' }
+        if (value === false) { value = 'false' }
+        node.payload.uiObject.setStatus(value, 30)
+    }
 }
 

Plotting/NodesValues.js

@@ -1,47 +1,47 @@
-function newNodesValues () {
-  const MODULE_NAME = 'Nodes Values'
-  const logger = newWebDebugLog()
-  logger.fileName = MODULE_NAME
+function newNodesValues() {
+    const MODULE_NAME = 'Nodes Values'
+    const logger = newWebDebugLog()
+    logger.fileName = MODULE_NAME
 
-  let thisObject = {
-    onRecordChange: onRecordChange,
-    initialize: initialize,
-    finalize: finalize
-  }
-
-  let hiriarchyMap
-  return thisObject
-
-  function finalize () {
-    hiriarchyMap = undefined
-  }
-
-  function initialize (pRootNode) {
-    let rootNode = canvas.designSpace.workspace.getHierarchyHeadsById(pRootNode.id)
-    hiriarchyMap = getHiriarchyMap(rootNode)
-  }
-
-  function onRecordChange (currentRecord) {
-    if (currentRecord === undefined) { return }
-    let array = currentRecord.values
-    if (array === undefined) { return }
-    for (let i = 0; i < array.length; i++) {
-      let arrayItem = array[i]
-      let nodeId = arrayItem[0]
-      let value = arrayItem[1]
-      applyValue(nodeId, value)
+    let thisObject = {
+        onRecordChange: onRecordChange,
+        initialize: initialize,
+        finalize: finalize
     }
-  }
 
-  function applyValue (nodeId, value) {
-    if (canvas.chartingSpace.visible !== true) { return }
-    let node = hiriarchyMap.get(nodeId)
-    if (node === undefined) { return }
-    if (node.payload === undefined) { return }
-    if (node.payload.uiObject === undefined) { return }
-    if (value === true) { value = 'true' }
-    if (value === false) { value = 'false' }
-    node.payload.uiObject.setValue(value, 1)
-  }
+    let hiriarchyMap
+    return thisObject
+
+    function finalize() {
+        hiriarchyMap = undefined
+    }
+
+    function initialize(pRootNode) {
+        let rootNode = canvas.designSpace.workspace.getHierarchyHeadsById(pRootNode.id)
+        hiriarchyMap = getHiriarchyMap(rootNode)
+    }
+
+    function onRecordChange(currentRecord) {
+        if (currentRecord === undefined) { return }
+        let array = currentRecord.values
+        if (array === undefined) { return }
+        for (let i = 0; i < array.length; i++) {
+            let arrayItem = array[i]
+            let nodeId = arrayItem[0]
+            let value = arrayItem[1]
+            applyValue(nodeId, value)
+        }
+    }
+
+    function applyValue(nodeId, value) {
+        if (canvas.chartingSpace.visible !== true) { return }
+        let node = hiriarchyMap.get(nodeId)
+        if (node === undefined) { return }
+        if (node.payload === undefined) { return }
+        if (node.payload.uiObject === undefined) { return }
+        if (value === true) { value = 'true' }
+        if (value === false) { value = 'false' }
+        node.payload.uiObject.setValue(value, 1)
+    }
 }
 

Plotting/RecordValues.js

@@ -1,92 +1,92 @@
-function newRecordValues () {
-  const MODULE_NAME = 'Record Values'
-  const logger = newWebDebugLog()
-  logger.fileName = MODULE_NAME
+function newRecordValues() {
+    const MODULE_NAME = 'Record Values'
+    const logger = newWebDebugLog()
+    logger.fileName = MODULE_NAME
 
-  let thisObject = {
-    onRecordChange: onRecordChange,
-    initialize: initialize,
-    finalize: finalize
-  }
+    let thisObject = {
+        onRecordChange: onRecordChange,
+        initialize: initialize,
+        finalize: finalize
+    }
 
-  let tradingSystem
-  let tradingEngine
-  let productDefinition
-  let propertyTargetNodeMap = new Map()
-  return thisObject
+    let tradingSystem
+    let tradingEngine
+    let productDefinition
+    let propertyTargetNodeMap = new Map()
+    return thisObject
 
-  function finalize () {
-    tradingSystem = undefined
-    tradingEngine = undefined
-    productDefinition = undefined
-    propertyTargetNodeMap = undefined
-  }
+    function finalize() {
+        tradingSystem = undefined
+        tradingEngine = undefined
+        productDefinition = undefined
+        propertyTargetNodeMap = undefined
+    }
 
-  function initialize (pTradingSystem, pTradingEngine, pProductDefinition) {
-    tradingSystem = canvas.designSpace.workspace.getHierarchyHeadsById(pTradingSystem.id)
-    tradingEngine = canvas.designSpace.workspace.getHierarchyHeadsById(pTradingEngine.id)
-    productDefinition = pProductDefinition
+    function initialize(pTradingSystem, pTradingEngine, pProductDefinition) {
+        tradingSystem = canvas.designSpace.workspace.getHierarchyHeadsById(pTradingSystem.id)
+        tradingEngine = canvas.designSpace.workspace.getHierarchyHeadsById(pTradingEngine.id)
+        productDefinition = pProductDefinition
 
-    /*
-    The product root can be a node or a node property of type array.
-    */
-    let productRoot = eval(productDefinition.config.nodePath)
-
-    if (productDefinition.config.nodePathType === 'array') {
         /*
-        This means that the configured nodePath is not pointing to a node, but to a node property that is an array.
-        For that reason we will assume that each element of the array is a record to be outputed
+        The product root can be a node or a node property of type array.
         */
-      for (let index = 0; index < productRoot.length; index++) {
+        let productRoot = eval(productDefinition.config.nodePath)
+
+        if (productDefinition.config.nodePathType === 'array') {
+            /*
+            This means that the configured nodePath is not pointing to a node, but to a node property that is an array.
+            For that reason we will assume that each element of the array is a record to be outputed
+            */
+            for (let index = 0; index < productRoot.length; index++) {
+                /*
+                The Product Root Node is the root of the node hiriarchy from where we are going to extract the record values.
+                */
+                let productRootNode = productRoot[index]
+                scanProperties(productRootNode, index)
+            }
+        } else {
+            /*
+            This means that the configured nodePath points to a single node, which is the one whose children constitutes
+            the record to be saved at the output file.
+            */
             /*
             The Product Root Node is the root of the node hiriarchy from where we are going to extract the record values.
             */
-        let productRootNode = productRoot[index]
-        scanProperties(productRootNode, index)
-      }
-    } else {
-        /*
-        This means that the configured nodePath points to a single node, which is the one whose children constitutes
-        the record to be saved at the output file.
-        */
-        /*
-        The Product Root Node is the root of the node hiriarchy from where we are going to extract the record values.
-        */
-      let productRootNode = productRoot
-      scanProperties(productRootNode)
-    }
-
-    function scanProperties (productRootNode, index) {
-      for (let i = 0; i < productDefinition.record.properties.length; i++) {
-        let property = productDefinition.record.properties[i]
-        if (property.config.nodePath !== undefined) {
-          let propertyRoot = eval(property.config.nodePath)
-          propertyTargetNodeMap.set(property.id, propertyRoot)
-        } else {
-          propertyTargetNodeMap.set(property.id, productRootNode)
+            let productRootNode = productRoot
+            scanProperties(productRootNode)
         }
-      }
-    }
-  }
 
-  function onRecordChange (currentRecord) {
-    if (currentRecord === undefined) { return }
-    for (let i = 0; i < productDefinition.record.properties.length; i++) {
-      let property = productDefinition.record.properties[i]
-      let value = currentRecord[property.config.codeName]
-      let targetNode = propertyTargetNodeMap.get(property.id)
-      applyValue(targetNode[property.config.codeName], value)
+        function scanProperties(productRootNode, index) {
+            for (let i = 0; i < productDefinition.record.properties.length; i++) {
+                let property = productDefinition.record.properties[i]
+                if (property.config.nodePath !== undefined) {
+                    let propertyRoot = eval(property.config.nodePath)
+                    propertyTargetNodeMap.set(property.id, propertyRoot)
+                } else {
+                    propertyTargetNodeMap.set(property.id, productRootNode)
+                }
+            }
+        }
     }
-  }
 
-  function applyValue (node, value) {
-    if (canvas.chartingSpace.visible !== true) { return }
-    if (node === undefined) { return }
-    if (node === undefined) { return }
-    if (node.payload === undefined) { return }
-    if (node.payload.uiObject === undefined) { return }
-    if (value === true) { value = 'true' }
-    if (value === false) { value = 'false' }
-    node.payload.uiObject.setValue(value, 1)
-  }
+    function onRecordChange(currentRecord) {
+        if (currentRecord === undefined) { return }
+        for (let i = 0; i < productDefinition.record.properties.length; i++) {
+            let property = productDefinition.record.properties[i]
+            let value = currentRecord[property.config.codeName]
+            let targetNode = propertyTargetNodeMap.get(property.id)
+            applyValue(targetNode[property.config.codeName], value)
+        }
+    }
+
+    function applyValue(node, value) {
+        if (canvas.chartingSpace.visible !== true) { return }
+        if (node === undefined) { return }
+        if (node === undefined) { return }
+        if (node.payload === undefined) { return }
+        if (node.payload.uiObject === undefined) { return }
+        if (value === true) { value = 'true' }
+        if (value === false) { value = 'false' }
+        node.payload.uiObject.setValue(value, 1)
+    }
 }

PostLoader.js

@@ -4,86 +4,86 @@ let markets
 let APP_SCHEMA_MAP = new Map()
 let APP_SCHEMA_ARRAY = []
 
-function newDashboard () {
-  const MODULE_NAME = 'Dashboard'
-  const ERROR_LOG = true
-  const INTENSIVE_LOG = false
-  const logger = newWebDebugLog()
-  logger.fileName = MODULE_NAME
+function newDashboard() {
+    const MODULE_NAME = 'Dashboard'
+    const ERROR_LOG = true
+    const INTENSIVE_LOG = false
+    const logger = newWebDebugLog()
+    logger.fileName = MODULE_NAME
 
-  let thisObject = {
-    start: start
-  }
-
-  const DEBUG_START_UP_DELAY = 0 // 3000; // This is a waiting time in case there is a need to debug the very first steps of initialization, to be able to hit F12 on time.
-
-  return thisObject
-
-  function start () {
-    try {
-      setBrowserEvents()
-      setUpAppSchema()
-
-      function setUpAppSchema () {
-        APP_SCHEMA_ARRAY = getAppSchema()
-        for (let i = 0; i < APP_SCHEMA_ARRAY.length; i++) {
-          let nodeDefinition = APP_SCHEMA_ARRAY[i]
-          let key = nodeDefinition.type
-          APP_SCHEMA_MAP.set(key, nodeDefinition)
-        }
-        startCanvas()
-      }
-
-      function startCanvas () {
-        /* If this method is executed for a second time, it should finalize the current execution structure */
-
-        if (canvas !== undefined) { canvas.finalize() }
-
-        setTimeout(delayedStart, DEBUG_START_UP_DELAY)
-      }
-    } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] start -> err = ' + err.stack) }
+    let thisObject = {
+        start: start
     }
-  }
 
-  function delayedStart () {
-    try {
+    const DEBUG_START_UP_DELAY = 0 // 3000; // This is a waiting time in case there is a need to debug the very first steps of initialization, to be able to hit F12 on time.
+
+    return thisObject
+
+    function start() {
+        try {
+            setBrowserEvents()
+            setUpAppSchema()
+
+            function setUpAppSchema() {
+                APP_SCHEMA_ARRAY = getAppSchema()
+                for (let i = 0; i < APP_SCHEMA_ARRAY.length; i++) {
+                    let nodeDefinition = APP_SCHEMA_ARRAY[i]
+                    let key = nodeDefinition.type
+                    APP_SCHEMA_MAP.set(key, nodeDefinition)
+                }
+                startCanvas()
+            }
+
+            function startCanvas() {
+                /* If this method is executed for a second time, it should finalize the current execution structure */
+
+                if (canvas !== undefined) { canvas.finalize() }
+
+                setTimeout(delayedStart, DEBUG_START_UP_DELAY)
+            }
+        } catch (err) {
+            if (ERROR_LOG === true) { logger.write('[ERROR] start -> err = ' + err.stack) }
+        }
+    }
+
+    function delayedStart() {
+        try {
             /* For now, we are supporting only one market. */
 
-      let market = {
-        id: 2,
-        baseAsset: 'USDT',
-        quotedAsset: 'BTC'
-      }
+            let market = {
+                id: 2,
+                baseAsset: 'USDT',
+                quotedAsset: 'BTC'
+            }
 
-      markets = new Map()
+            markets = new Map()
 
-      markets.set(market.id, market)
+            markets.set(market.id, market)
 
-      canvas = newCanvas()
-      canvas.initialize()
-    } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] delayedStart -> err = ' + err.stack) }
-    }
-  }
-
-  function setBrowserEvents () {
-    window.onbeforeunload = saveWorkspace
-
-    /* handles backspace and refresh(F5) from keyboard */
-    window.manageBackRefresh = function (event) {
-      var tag = event.target.tagName.toLowerCase()
-      if (event.keyCode == 8 && tag != 'input' && tag != 'textarea') { // Backbutton pressed
-        saveWorkspace()
-      } else if (event.keyCode == 116) { // F5 pressed
-        saveWorkspace()
-      }
+            canvas = newCanvas()
+            canvas.initialize()
+        } catch (err) {
+            if (ERROR_LOG === true) { logger.write('[ERROR] delayedStart -> err = ' + err.stack) }
+        }
     }
 
-    window.addEventListener('keydown', window.manageBackRefresh)
+    function setBrowserEvents() {
+        window.onbeforeunload = saveWorkspace
 
-    function saveWorkspace () {
-      canvas.designSpace.workspace.save()
+        /* handles backspace and refresh(F5) from keyboard */
+        window.manageBackRefresh = function (event) {
+            var tag = event.target.tagName.toLowerCase()
+            if (event.keyCode == 8 && tag != 'input' && tag != 'textarea') { // Backbutton pressed
+                saveWorkspace()
+            } else if (event.keyCode == 116) { // F5 pressed
+                saveWorkspace()
+            }
+        }
+
+        window.addEventListener('keydown', window.manageBackRefresh)
+
+        function saveWorkspace() {
+            canvas.designSpace.workspace.save()
+        }
     }
-  }
 }

ProductStorage.js

@@ -1,9 +1,9 @@
- 
-function newProductStorage (name) {
-  const MODULE_NAME = 'Product Storage'
-  const ERROR_LOG = true
-  const logger = newWebDebugLog()
-  logger.fileName = MODULE_NAME
+
+function newProductStorage(name) {
+    const MODULE_NAME = 'Product Storage'
+    const ERROR_LOG = true
+    const logger = newWebDebugLog()
+    logger.fileName = MODULE_NAME
 
     /*
 
@@ -24,310 +24,310 @@ function newProductStorage (name) {
 
     */
 
-  let thisObject = {
-    eventHandler: undefined,
-    marketFiles: [],
-    dailyFiles: [],
-    singleFile: [],
-    fileSequences: [],
-    setDatetime: setDatetime,
-    setTimeFrame: setTimeFrame,
-    initialize: initialize,
-    finalize: finalize
-  }
+    let thisObject = {
+        eventHandler: undefined,
+        marketFiles: [],
+        dailyFiles: [],
+        singleFile: [],
+        fileSequences: [],
+        setDatetime: setDatetime,
+        setTimeFrame: setTimeFrame,
+        initialize: initialize,
+        finalize: finalize
+    }
 
-  thisObject.eventHandler = newEventHandler()
+    thisObject.eventHandler = newEventHandler()
 
     /* We name the event Handler to easy debugging. */
 
-  thisObject.eventHandler.name = 'Storage-' + name
+    thisObject.eventHandler.name = 'Storage-' + name
 
-  let datetime
-  let timeFrame
+    let datetime
+    let timeFrame
 
-  return thisObject
+    return thisObject
 
-  function finalize () {
-    try {
-      for (let i = 0; i < thisObject.marketFiles.length; i++) {
-        let marketFile = thisObject.marketFiles[i]
-        marketFile.finalize()
-      }
+    function finalize() {
+        try {
+            for (let i = 0; i < thisObject.marketFiles.length; i++) {
+                let marketFile = thisObject.marketFiles[i]
+                marketFile.finalize()
+            }
 
-      thisObject.marketFiles = undefined
+            thisObject.marketFiles = undefined
 
-      for (let i = 0; i < thisObject.dailyFiles.length; i++) {
-        let dailyFile = thisObject.dailyFiles[i]
-        dailyFile.finalize()
-      }
+            for (let i = 0; i < thisObject.dailyFiles.length; i++) {
+                let dailyFile = thisObject.dailyFiles[i]
+                dailyFile.finalize()
+            }
 
-      thisObject.dailyFiles = undefined
+            thisObject.dailyFiles = undefined
 
-      for (let i = 0; i < thisObject.fileSequences.length; i++) {
-        let fileSequence = thisObject.fileSequences[i]
-        fileSequence.finalize()
-      }
+            for (let i = 0; i < thisObject.fileSequences.length; i++) {
+                let fileSequence = thisObject.fileSequences[i]
+                fileSequence.finalize()
+            }
 
-      thisObject.fileSequences = undefined
-    } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) }
+            thisObject.fileSequences = undefined
+        } catch (err) {
+            if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) }
+        }
     }
-  }
 
-  function initialize (dataMine, bot, session, product, exchange, market, pDatetime, pTimeFrame, host, port, eventsServerClient, callBackFunction) {
-    try {
-      datetime = pDatetime
-      timeFrame = pTimeFrame
+    function initialize(dataMine, bot, session, product, exchange, market, pDatetime, pTimeFrame, host, port, eventsServerClient, callBackFunction) {
+        try {
+            datetime = pDatetime
+            timeFrame = pTimeFrame
 
-      let dataSetsToLoad = 0
-      let dataSetsLoaded = 0
+            let dataSetsToLoad = 0
+            let dataSetsLoaded = 0
 
-      for (let i = 0; i < product.datasets.length; i++) {
-        let dataset = product.datasets[i]
+            for (let i = 0; i < product.datasets.length; i++) {
+                let dataset = product.datasets[i]
 
-        switch (dataset.config.type) {
-          case 'Market Files': {
-            dataSetsToLoad++
+                switch (dataset.config.type) {
+                    case 'Market Files': {
+                        dataSetsToLoad++
 
-            let marketFiles = newMarketFiles()
-            marketFiles.initialize(dataMine, bot, session, product, dataset, exchange, market, host, port, eventsServerClient, onMarketFileReady)
-            thisObject.marketFiles.push(marketFiles)
-          }
-            break
+                        let marketFiles = newMarketFiles()
+                        marketFiles.initialize(dataMine, bot, session, product, dataset, exchange, market, host, port, eventsServerClient, onMarketFileReady)
+                        thisObject.marketFiles.push(marketFiles)
+                    }
+                        break
 
-          case 'Daily Files': {
-            dataSetsToLoad++
+                    case 'Daily Files': {
+                        dataSetsToLoad++
 
-            let dailyFiles = newDailyFiles()
-            dailyFiles.initialize(dataMine, bot, session, product, dataset, exchange, market, pDatetime, pTimeFrame, host, port, eventsServerClient, onDailyFileReady)
-            thisObject.dailyFiles.push(dailyFiles)
-          }
-            break
+                        let dailyFiles = newDailyFiles()
+                        dailyFiles.initialize(dataMine, bot, session, product, dataset, exchange, market, pDatetime, pTimeFrame, host, port, eventsServerClient, onDailyFileReady)
+                        thisObject.dailyFiles.push(dailyFiles)
+                    }
+                        break
 
-          case 'Single File': {
-            dataSetsToLoad++
+                    case 'Single File': {
+                        dataSetsToLoad++
 
-            let singleFile = newSingleFile()
-            singleFile.initialize(dataMine, bot, session, product, dataset, exchange, market, host, port, eventsServerClient, onSingleFileReady)
-            thisObject.singleFile.push(singleFile)
-          }
-            break
+                        let singleFile = newSingleFile()
+                        singleFile.initialize(dataMine, bot, session, product, dataset, exchange, market, host, port, eventsServerClient, onSingleFileReady)
+                        thisObject.singleFile.push(singleFile)
+                    }
+                        break
 
-          case 'File Sequence': {
-            dataSetsToLoad++
+                    case 'File Sequence': {
+                        dataSetsToLoad++
 
-            let fileSequences = newFileSequence()
-            fileSequences.initialize(dataMine, bot, session, product, dataset, exchange, market, host, port, eventsServerClient, onFileSequenceReady)
-            thisObject.fileSequences.push(fileSequences)
-          }
-            break
-          default:
-            if (ERROR_LOG === true) { logger.write('[WARN] initialize -> dataset with no type defined or type not supported -> dataset.config.type = ' + dataset.config.type) }
-        }
-
-        function onMarketFileReady (err, pCaller) {
-          try {
-            switch (err.result) {
-              case GLOBAL.DEFAULT_OK_RESPONSE.result: {
-                break
-              }
-              case GLOBAL.DEFAULT_FAIL_RESPONSE.result: {
-                callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
-                return
-              }
-            }
-            let event = {
-              totalValue: pCaller.getExpectedFiles(),
-              currentValue: pCaller.getFilesLoaded(),
-              filesNotLoaded: pCaller.getFilesNotLoaded()
-            }
-
-            thisObject.eventHandler.raiseEvent('Market File Loaded', event)
-
-            if (event.filesNotLoaded === event.totalValue) {
-              dataSetsToLoad--
-              checkInitializeComplete()
-              return
-            }
-
-            if (event.currentValue + event.filesNotLoaded === event.totalValue) {
-              dataSetsLoaded++
-              checkInitializeComplete()
-            }
-          } catch (err) {
-            callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
-          }
-        }
-
-        function onDailyFileReady (err, pCaller) {
-          try {
-            switch (err.result) {
-              case GLOBAL.DEFAULT_OK_RESPONSE.result: {
-                break
-              }
-
-              case GLOBAL.DEFAULT_FAIL_RESPONSE.result: {
-                callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
-                return
-              }
-
-              case GLOBAL.CUSTOM_FAIL_RESPONSE.result: {
-                if (err.message === 'Dataset Unavailable.') {
-                  dataSetsToLoad--
-                  checkInitializeComplete()
-                  return
-                } else {
-                  callBackFunction(err)
-                  return
+                        let fileSequences = newFileSequence()
+                        fileSequences.initialize(dataMine, bot, session, product, dataset, exchange, market, host, port, eventsServerClient, onFileSequenceReady)
+                        thisObject.fileSequences.push(fileSequences)
+                    }
+                        break
+                    default:
+                        if (ERROR_LOG === true) { logger.write('[WARN] initialize -> dataset with no type defined or type not supported -> dataset.config.type = ' + dataset.config.type) }
                 }
-              }
-              default: {
-                callBackFunction(err)
-                return
-              }
-            }
 
-            let event = {
-              totalValue: pCaller.getExpectedFiles(),
-              currentValue: pCaller.getFilesLoaded()
-            }
+                function onMarketFileReady(err, pCaller) {
+                    try {
+                        switch (err.result) {
+                            case GLOBAL.DEFAULT_OK_RESPONSE.result: {
+                                break
+                            }
+                            case GLOBAL.DEFAULT_FAIL_RESPONSE.result: {
+                                callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
+                                return
+                            }
+                        }
+                        let event = {
+                            totalValue: pCaller.getExpectedFiles(),
+                            currentValue: pCaller.getFilesLoaded(),
+                            filesNotLoaded: pCaller.getFilesNotLoaded()
+                        }
 
-            thisObject.eventHandler.raiseEvent('Daily File Loaded', event)
+                        thisObject.eventHandler.raiseEvent('Market File Loaded', event)
 
-            if (event.currentValue === event.totalValue) {
-              dataSetsLoaded++
-              checkInitializeComplete()
+                        if (event.filesNotLoaded === event.totalValue) {
+                            dataSetsToLoad--
+                            checkInitializeComplete()
+                            return
+                        }
+
+                        if (event.currentValue + event.filesNotLoaded === event.totalValue) {
+                            dataSetsLoaded++
+                            checkInitializeComplete()
+                        }
+                    } catch (err) {
+                        callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
+                    }
+                }
+
+                function onDailyFileReady(err, pCaller) {
+                    try {
+                        switch (err.result) {
+                            case GLOBAL.DEFAULT_OK_RESPONSE.result: {
+                                break
+                            }
+
+                            case GLOBAL.DEFAULT_FAIL_RESPONSE.result: {
+                                callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
+                                return
+                            }
+
+                            case GLOBAL.CUSTOM_FAIL_RESPONSE.result: {
+                                if (err.message === 'Dataset Unavailable.') {
+                                    dataSetsToLoad--
+                                    checkInitializeComplete()
+                                    return
+                                } else {
+                                    callBackFunction(err)
+                                    return
+                                }
+                            }
+                            default: {
+                                callBackFunction(err)
+                                return
+                            }
+                        }
+
+                        let event = {
+                            totalValue: pCaller.getExpectedFiles(),
+                            currentValue: pCaller.getFilesLoaded()
+                        }
+
+                        thisObject.eventHandler.raiseEvent('Daily File Loaded', event)
+
+                        if (event.currentValue === event.totalValue) {
+                            dataSetsLoaded++
+                            checkInitializeComplete()
+                        }
+                    } catch (err) {
+                        callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
+                    }
+                }
+
+                function onSingleFileReady(err, pCaller) {
+                    try {
+                        switch (err.result) {
+                            case GLOBAL.DEFAULT_OK_RESPONSE.result: {
+                                break
+                            }
+
+                            case GLOBAL.DEFAULT_FAIL_RESPONSE.result: {
+                                callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
+                                return
+                            }
+
+                            case GLOBAL.CUSTOM_FAIL_RESPONSE.result: {
+                                callBackFunction(err)
+                                return
+                            }
+
+                            default: {
+                                callBackFunction(err)
+                                return
+                            }
+                        }
+                        let event = {
+                            totalValue: 1,
+                            currentValue: 1
+                        }
+                        thisObject.eventHandler.raiseEvent('Single File Loaded', event)
+
+                        if (event.currentValue === event.totalValue) {
+                            dataSetsLoaded++
+                            checkInitializeComplete()
+                        }
+                    } catch (err) {
+                        callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
+                    }
+                }
+
+                function onFileSequenceReady(err, pCaller) {
+                    try {
+                        switch (err.result) {
+                            case GLOBAL.DEFAULT_OK_RESPONSE.result: {
+                                break
+                            }
+                            case GLOBAL.DEFAULT_FAIL_RESPONSE.result: {
+                                callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
+                                return
+                            }
+                            case GLOBAL.CUSTOM_FAIL_RESPONSE.result: {
+                                callBackFunction(err)
+                                return
+                            }
+                            default: {
+                                callBackFunction(err)
+                                return
+                            }
+                        }
+                        let event
+                        if (pCaller !== undefined) {
+                            event = {
+                                totalValue: pCaller.getExpectedFiles(),
+                                currentValue: pCaller.getFilesLoaded()
+                            }
+                        } else { // When there are no data the reference to the caller wont arrive here.
+                            event = {
+                                totalValue: 1,
+                                currentValue: 1
+                            }
+                        }
+
+                        thisObject.eventHandler.raiseEvent('File Sequence Loaded', event)
+
+                        if (event.currentValue === event.totalValue) {
+                            dataSetsLoaded++
+                            checkInitializeComplete()
+                        }
+                    } catch (err) {
+                        callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
+                    }
+                }
+
+                function checkInitializeComplete() {
+                    try {
+                        if (dataSetsLoaded === dataSetsToLoad) {
+                            callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE)
+                        }
+                    } catch (err) {
+                        if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> checkInitializeComplete -> err = ' + err.stack) }
+                        callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
+                    }
+                }
             }
-          } catch (err) {
+        } catch (err) {
+            if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) }
             callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
-          }
         }
-
-        function onSingleFileReady (err, pCaller) {
-          try {
-            switch (err.result) {
-              case GLOBAL.DEFAULT_OK_RESPONSE.result: {
-                break
-              }
-
-              case GLOBAL.DEFAULT_FAIL_RESPONSE.result: {
-                callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
-                return
-              }
-
-              case GLOBAL.CUSTOM_FAIL_RESPONSE.result: {
-                callBackFunction(err)
-                return
-              }
-
-              default: {
-                callBackFunction(err)
-                return
-              }
-            }
-            let event = {
-              totalValue: 1,
-              currentValue: 1
-            }
-            thisObject.eventHandler.raiseEvent('Single File Loaded', event)
-
-            if (event.currentValue === event.totalValue) {
-              dataSetsLoaded++
-              checkInitializeComplete()
-            }
-          } catch (err) {
-            callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
-          }
-        }
-
-        function onFileSequenceReady (err, pCaller) {
-          try {
-            switch (err.result) {
-              case GLOBAL.DEFAULT_OK_RESPONSE.result: {
-                break
-              }
-              case GLOBAL.DEFAULT_FAIL_RESPONSE.result: {
-                callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
-                return
-              }
-              case GLOBAL.CUSTOM_FAIL_RESPONSE.result: {
-                callBackFunction(err)
-                return
-              }
-              default: {
-                callBackFunction(err)
-                return
-              }
-            }
-            let event
-            if (pCaller !== undefined) {
-              event = {
-                totalValue: pCaller.getExpectedFiles(),
-                currentValue: pCaller.getFilesLoaded()
-              }
-            } else { // When there are no data the reference to the caller wont arrive here.
-              event = {
-                totalValue: 1,
-                currentValue: 1
-              }
-            }
-
-            thisObject.eventHandler.raiseEvent('File Sequence Loaded', event)
-
-            if (event.currentValue === event.totalValue) {
-              dataSetsLoaded++
-              checkInitializeComplete()
-            }
-          } catch (err) {
-            callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
-          }
-        }
-
-        function checkInitializeComplete () {
-          try {
-            if (dataSetsLoaded === dataSetsToLoad) {
-              callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE)
-            }
-          } catch (err) {
-            if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> checkInitializeComplete -> err = ' + err.stack) }
-            callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
-          }
-        }
-      }
-    } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) }
-      callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
     }
-  }
 
-  function setDatetime (pDatetime) {
+    function setDatetime(pDatetime) {
         /* If there is a change in the day, then we take some actions, otherwise, we dont. */
 
-    let currentDate = Math.trunc(datetime.valueOf() / ONE_DAY_IN_MILISECONDS)
-    let newDate = Math.trunc(pDatetime.valueOf() / ONE_DAY_IN_MILISECONDS)
+        let currentDate = Math.trunc(datetime.valueOf() / ONE_DAY_IN_MILISECONDS)
+        let newDate = Math.trunc(pDatetime.valueOf() / ONE_DAY_IN_MILISECONDS)
 
-    datetime = new Date(pDatetime)
+        datetime = new Date(pDatetime)
 
-    if (currentDate !== newDate) {
-      if (timeFrame <= _1_HOUR_IN_MILISECONDS) {
-        for (let i = 0; i < thisObject.dailyFiles.length; i++) {
-          thisObject.dailyFiles[i].setDatetime(pDatetime)
+        if (currentDate !== newDate) {
+            if (timeFrame <= _1_HOUR_IN_MILISECONDS) {
+                for (let i = 0; i < thisObject.dailyFiles.length; i++) {
+                    thisObject.dailyFiles[i].setDatetime(pDatetime)
+                }
+            }
         }
-      }
     }
-  }
 
-  function setTimeFrame (pTimeFrame) {
+    function setTimeFrame(pTimeFrame) {
         /* We are going to filter out the cases in which the timeFrame received is the same that the one we already know. */
 
-    if (timeFrame !== pTimeFrame) {
-      timeFrame = pTimeFrame
+        if (timeFrame !== pTimeFrame) {
+            timeFrame = pTimeFrame
 
-      if (timeFrame <= _1_HOUR_IN_MILISECONDS) {
-        for (let i = 0; i < thisObject.dailyFiles.length; i++) {
-          thisObject.dailyFiles[i].setTimeFrame(pTimeFrame, datetime)
+            if (timeFrame <= _1_HOUR_IN_MILISECONDS) {
+                for (let i = 0; i < thisObject.dailyFiles.length; i++) {
+                    thisObject.dailyFiles[i].setTimeFrame(pTimeFrame, datetime)
+                }
+            }
         }
-      }
     }
-  }
 }

Scales/AutoScaleButton.js

@@ -1,206 +1,206 @@
-function newAutoScaleButton () {
-  let thisObject = {
-    container: undefined,
-    fitFunction: undefined,
-    parentContainer: undefined,
-    autoMinScale: undefined,
-    autoMaxScale: undefined,
-    setStatus: setStatus,
-    draw: draw,
-    getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
-    initialize: initialize,
-    finalize: finalize
-  }
+function newAutoScaleButton() {
+    let thisObject = {
+        container: undefined,
+        fitFunction: undefined,
+        parentContainer: undefined,
+        autoMinScale: undefined,
+        autoMaxScale: undefined,
+        setStatus: setStatus,
+        draw: draw,
+        getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
+        initialize: initialize,
+        finalize: finalize
+    }
 
-   /* Cointainer stuff */
-  thisObject.container = newContainer()
-  thisObject.container.name = 'Auto Scale Button'
-  thisObject.container.initialize()
-  thisObject.container.isClickeable = true
-  thisObject.container.isDraggeable = false
-  thisObject.container.frame.containerName = 'Auto Scale Button'
+    /* Cointainer stuff */
+    thisObject.container = newContainer()
+    thisObject.container.name = 'Auto Scale Button'
+    thisObject.container.initialize()
+    thisObject.container.isClickeable = true
+    thisObject.container.isDraggeable = false
+    thisObject.container.frame.containerName = 'Auto Scale Button'
 
-  const ICON_SIZE = 36
-  let onMouseWheelEventSubscriptionId
-  let coordinateSystem
-  let axis
-  let currentStatus
-  return thisObject
+    const ICON_SIZE = 36
+    let onMouseWheelEventSubscriptionId
+    let coordinateSystem
+    let axis
+    let currentStatus
+    return thisObject
 
-  function finalize () {
-    thisObject.container.eventHandler.stopListening(onMouseWheelEventSubscriptionId)
-    thisObject.container.finalize()
-    thisObject.container = undefined
-    thisObject.fitFunction = undefined
-    thisObject.parentContainer = undefined
-    thisObject.panels = undefined
+    function finalize() {
+        thisObject.container.eventHandler.stopListening(onMouseWheelEventSubscriptionId)
+        thisObject.container.finalize()
+        thisObject.container = undefined
+        thisObject.fitFunction = undefined
+        thisObject.parentContainer = undefined
+        thisObject.panels = undefined
 
-    coordinateSystem = undefined
-    axis = undefined
-  }
+        coordinateSystem = undefined
+        axis = undefined
+    }
 
-  function initialize (pAxis, pCoordinateSystem) {
-    axis = pAxis
-    coordinateSystem = pCoordinateSystem
-    thisObject.autoMinScale = coordinateSystem.autoMinYScale
-    thisObject.autoMaxScale = coordinateSystem.autoMaxYScale
+    function initialize(pAxis, pCoordinateSystem) {
+        axis = pAxis
+        coordinateSystem = pCoordinateSystem
+        thisObject.autoMinScale = coordinateSystem.autoMinYScale
+        thisObject.autoMaxScale = coordinateSystem.autoMaxYScale
 
-    switch (axis) {
-      case 'X': {
-        thisObject.container.frame.width = ICON_SIZE
-        thisObject.container.frame.height = ICON_SIZE
+        switch (axis) {
+            case 'X': {
+                thisObject.container.frame.width = ICON_SIZE
+                thisObject.container.frame.height = ICON_SIZE
 
-        let position = {
-          x: thisObject.container.parentContainer.frame.width * 7 / 8,
-          y: thisObject.container.parentContainer.frame.height / 2
+                let position = {
+                    x: thisObject.container.parentContainer.frame.width * 7 / 8,
+                    y: thisObject.container.parentContainer.frame.height / 2
+                }
+
+                thisObject.container.frame.position = position
+                break
+            }
+            case 'Y': {
+                thisObject.container.frame.width = ICON_SIZE
+                thisObject.container.frame.height = ICON_SIZE
+
+                let position = {
+                    x: thisObject.container.parentContainer.frame.width * 7 / 8,
+                    y: thisObject.container.parentContainer.frame.height / 2
+                }
+
+                thisObject.container.frame.position = position
+                break
+            }
         }
-
-        thisObject.container.frame.position = position
-        break
-      }
-      case 'Y': {
-        thisObject.container.frame.width = ICON_SIZE
-        thisObject.container.frame.height = ICON_SIZE
-
-        let position = {
-          x: thisObject.container.parentContainer.frame.width * 7 / 8,
-          y: thisObject.container.parentContainer.frame.height / 2
-        }
-
-        thisObject.container.frame.position = position
-        break
-      }
-    }
-    onMouseWheelEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
-  }
-
-  function setStatus (autoMinScale, autoMaxScale) {
-    thisObject.autoMinScale = autoMinScale
-    thisObject.autoMaxScale = autoMaxScale
-
-    if (thisObject.autoMinScale === false && thisObject.autoMaxScale === false) {
-      currentStatus = 1
-    }
-    if (thisObject.autoMinScale === true && thisObject.autoMaxScale === false) {
-      currentStatus = 2
-    }
-    if (thisObject.autoMinScale === false && thisObject.autoMaxScale === true) {
-      currentStatus = 4
-    }
-    if (thisObject.autoMinScale === true && thisObject.autoMaxScale === true) {
-      currentStatus = 6
-    }
-  }
-  function onMouseWheel (event) {
-    let factor
-    let delta = event.wheelDelta
-    if (delta < 0) {
-      delta = -1
-    } else {
-      delta = 1
-    }
-    currentStatus = currentStatus + delta
-    if (currentStatus === 7) { currentStatus = 1 }
-    if (currentStatus === 0) { currentStatus = 6 }
-
-    switch (currentStatus) {
-      case 1: {
-        thisObject.autoMinScale = false
-        thisObject.autoMaxScale = false
-        update()
-        return
-      }
-      case 2: {
-        thisObject.autoMinScale = true
-        thisObject.autoMaxScale = false
-        update()
-        return
-      }
-      case 3: {
-        thisObject.autoMinScale = false
-        thisObject.autoMaxScale = false
-        update()
-        return
-      }
-      case 4: {
-        thisObject.autoMinScale = false
-        thisObject.autoMaxScale = true
-        update()
-        return
-      }
-      case 5: {
-        thisObject.autoMinScale = false
-        thisObject.autoMaxScale = false
-        update()
-        return
-      }
-      case 6: {
-        thisObject.autoMinScale = true
-        thisObject.autoMaxScale = true
-        update()
-        return
-      }
+        onMouseWheelEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
     }
 
-    function update () {
-      switch (axis) {
-        case 'X': {
-          coordinateSystem.autoMinXScale = thisObject.autoMinScale
-          coordinateSystem.autoMaxXScale = thisObject.autoMaxScale
-          break
-        }
-        case 'Y': {
-          coordinateSystem.autoMinYScale = thisObject.autoMinScale
-          coordinateSystem.autoMaxYScale = thisObject.autoMaxScale
-          break
-        }
-      }
+    function setStatus(autoMinScale, autoMaxScale) {
+        thisObject.autoMinScale = autoMinScale
+        thisObject.autoMaxScale = autoMaxScale
 
-      coordinateSystem.recalculateScale()
-    }
-  }
-
-  function getContainer (point, purpose) {
-    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-      return thisObject.container
-    }
-  }
-
-  function draw () {
-    let icon
-    switch (axis) {
-      case 'X': {
         if (thisObject.autoMinScale === false && thisObject.autoMaxScale === false) {
-          icon = canvas.designSpace.iconCollection.get('toggle-auto-time-scale-manual')
+            currentStatus = 1
         }
         if (thisObject.autoMinScale === true && thisObject.autoMaxScale === false) {
-          icon = canvas.designSpace.iconCollection.get('toggle-auto-time-scale-auto-min')
+            currentStatus = 2
         }
         if (thisObject.autoMinScale === false && thisObject.autoMaxScale === true) {
-          icon = canvas.designSpace.iconCollection.get('toggle-auto-time-scale-auto-max')
+            currentStatus = 4
         }
         if (thisObject.autoMinScale === true && thisObject.autoMaxScale === true) {
-          icon = canvas.designSpace.iconCollection.get('toggle-auto-time-scale-auto-min-max')
+            currentStatus = 6
+        }
+    }
+    function onMouseWheel(event) {
+        let factor
+        let delta = event.wheelDelta
+        if (delta < 0) {
+            delta = -1
+        } else {
+            delta = 1
+        }
+        currentStatus = currentStatus + delta
+        if (currentStatus === 7) { currentStatus = 1 }
+        if (currentStatus === 0) { currentStatus = 6 }
+
+        switch (currentStatus) {
+            case 1: {
+                thisObject.autoMinScale = false
+                thisObject.autoMaxScale = false
+                update()
+                return
+            }
+            case 2: {
+                thisObject.autoMinScale = true
+                thisObject.autoMaxScale = false
+                update()
+                return
+            }
+            case 3: {
+                thisObject.autoMinScale = false
+                thisObject.autoMaxScale = false
+                update()
+                return
+            }
+            case 4: {
+                thisObject.autoMinScale = false
+                thisObject.autoMaxScale = true
+                update()
+                return
+            }
+            case 5: {
+                thisObject.autoMinScale = false
+                thisObject.autoMaxScale = false
+                update()
+                return
+            }
+            case 6: {
+                thisObject.autoMinScale = true
+                thisObject.autoMaxScale = true
+                update()
+                return
+            }
+        }
+
+        function update() {
+            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()
+        }
+    }
+
+    function getContainer(point, purpose) {
+        if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+            return thisObject.container
+        }
+    }
+
+    function draw() {
+        let icon
+        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, 0, 0, 0, 0, ICON_SIZE, thisObject.container)
+                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, 0, 0, 0, 0, ICON_SIZE, thisObject.container)
+                break
+            }
         }
-        drawIcon(icon, 0, 0, 0, 0, ICON_SIZE, thisObject.container)
-        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, 0, 0, 0, 0, ICON_SIZE, thisObject.container)
-        break
-      }
     }
-  }
 }

Scales/Commons.js

@@ -1,45 +1,45 @@
 
-function drawScaleDisplay (label1, label2, label3, xExtraOffSet1, xExtraOffSet2, xExtraOffSet3, icon1, icon2, container, backgroundColor) {
-  const RED_LINE_HIGHT = 4
-  const OPACITY = 1
+function drawScaleDisplay(label1, label2, label3, xExtraOffSet1, xExtraOffSet2, xExtraOffSet3, icon1, icon2, container, backgroundColor) {
+    const RED_LINE_HIGHT = 4
+    const OPACITY = 1
 
-  let params = {
-    cornerRadius: 5,
-    lineWidth: 1,
-    container: container,
-    borderColor: UI_COLOR.RUSTED_RED,
-    castShadow: false,
-    backgroundColor: backgroundColor,
-    opacity: OPACITY
-  }
+    let params = {
+        cornerRadius: 5,
+        lineWidth: 1,
+        container: container,
+        borderColor: UI_COLOR.RUSTED_RED,
+        castShadow: false,
+        backgroundColor: backgroundColor,
+        opacity: OPACITY
+    }
 
-  roundedCornersBackground(params)
+    roundedCornersBackground(params)
 
-  /* Place the Text */
+    /* Place the Text */
 
-  label1 = label1.substring(0, 18)
-  label2 = label2.substring(0, 20)
-  label3 = label3.substring(0, 20)
+    label1 = label1.substring(0, 18)
+    label2 = label2.substring(0, 20)
+    label3 = label3.substring(0, 20)
 
-  drawLabel(label1, 1 / 2, 92 / 100, 0, 0, 9, container)
-  drawLabel(label2, 1 / 2, 42 / 100, 0, 0, 17, container)
-  drawLabel(label3, 1 / 2, 67 / 100, 0, 0, 9, container)
+    drawLabel(label1, 1 / 2, 92 / 100, 0, 0, 9, container)
+    drawLabel(label2, 1 / 2, 42 / 100, 0, 0, 17, container)
+    drawLabel(label3, 1 / 2, 67 / 100, 0, 0, 9, container)
 
-  drawIcon(icon1, 1 / 8, 1 / 2, 0, 0, 28, container)
-  drawIcon(icon2, 7 / 8, 1 / 2, 0, 0, 28, container)
+    drawIcon(icon1, 1 / 8, 1 / 2, 0, 0, 28, container)
+    drawIcon(icon2, 7 / 8, 1 / 2, 0, 0, 28, container)
 }
 
-function drawScaleDisplayCover (container) {
-  let params = {
-    cornerRadius: 5,
-    lineWidth: 1,
-    container: container,
-    borderColor: UI_COLOR.WHITE,
-    castShadow: false,
-    backgroundColor: UI_COLOR.WHITE,
-    opacity: '0.25'
-  }
+function drawScaleDisplayCover(container) {
+    let params = {
+        cornerRadius: 5,
+        lineWidth: 1,
+        container: container,
+        borderColor: UI_COLOR.WHITE,
+        castShadow: false,
+        backgroundColor: UI_COLOR.WHITE,
+        opacity: '0.25'
+    }
 
-  roundedCornersBackground(params)
+    roundedCornersBackground(params)
 }
 

Scales/TimeFrameScale.js

@@ -1,389 +1,389 @@
-function newTimeFrameScale () {
-  const MODULE_NAME = 'Time Frame Scale'
+function newTimeFrameScale() {
+    const MODULE_NAME = 'Time Frame Scale'
 
-  let thisObject = {
-    timeFrame: undefined,
-    container: undefined,
-    fitFunction: undefined,
-    payload: undefined,
-    isVisible: true,
-    layersOn: undefined,
-    adjustTimeFrame: adjustTimeFrame,
-    onMouseOverSomeTimeMachineContainer: onMouseOverSomeTimeMachineContainer,
-    draw: draw,
-    drawForeground: drawForeground,
-    physics: physics,
-    getContainer: getContainer,
-    initialize: initialize,
-    finalize: finalize
-  }
-
-  const FILES_PERIOD_DEFAULT_VALUE = 0
-  const TIME_PERIOD_DEFAULT_VALUE = 0
-  const MIN_HEIGHT = 50
-
-  let displayingRealTimeFrame = true
-  let greyOutCoverLayer = false
-  let isMouseOver
-
-  let filePeriodIndex = FILES_PERIOD_DEFAULT_VALUE
-  let timeFrameIndex = TIME_PERIOD_DEFAULT_VALUE
-  let timeFramesMasterArray = [marketFilesPeriods, dailyFilePeriods]
-  let timeFrameLabel = '24-hs'
-
-  let onMouseWheelEventSubscriptionId
-  let onViewportZoomChangedEventSubscriptionId
-  let onMouseOverEventSubscriptionId
-  let onMouseNotOverEventSubscriptionId
-
-  let limitingContainer
-
-  setupContainer()
-
-  let wheelDeltaDirection
-  let wheelDeltaCounter = 0
-
-  return thisObject
-
-  function setupContainer () {
-    thisObject.container = newContainer()
-    thisObject.container.initialize(MODULE_NAME)
-
-    thisObject.container.isDraggeable = false
-    thisObject.container.isClickeable = false
-    thisObject.container.isWheelable = true
-    thisObject.container.detectMouseOver = true
-
-    thisObject.container.frame.width = UI_PANEL.WIDTH.NORMAL
-    thisObject.container.frame.height = 40
-  }
-
-  function finalize () {
-    thisObject.container.eventHandler.stopListening(onMouseWheelEventSubscriptionId)
-    canvas.chartingSpace.viewport.eventHandler.stopListening(onViewportZoomChangedEventSubscriptionId)
-    thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
-    thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
-
-    thisObject.container.finalize()
-    thisObject.container = undefined
-    thisObject.fitFunction = undefined
-    thisObject.payload = undefined
-
-    limitingContainer = undefined
-  }
-
-  function initialize (pLimitingContainer) {
-    limitingContainer = pLimitingContainer
-
-    readObjectState()
-    newTimeFrame()
-
-    onMouseWheelEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
-    onViewportZoomChangedEventSubscriptionId = canvas.chartingSpace.viewport.eventHandler.listenToEvent('Zoom Changed', onViewportZoomChanged)
-    onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
-    onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
-  }
-
-  function onMouseOverSomeTimeMachineContainer (event) {
-    if (event.containerId === undefined) {
-      /* This happens when the mouse over was not at the instance of a certain scale, but anywhere else. */
-      greyOutCoverLayer = false
-    } else {
-      if (event.containerId === thisObject.container.id) {
-        greyOutCoverLayer = false
-      } else {
-        greyOutCoverLayer = true
-        turnOnCounter = 0
-      }
-    }
-  }
-
-  function onMouseOver (event) {
-    isMouseOver = true
-    event.containerId = thisObject.container.id
-    thisObject.container.eventHandler.raiseEvent('onMouseOverScale', event)
-  }
-
-  function onMouseNotOver () {
-    isMouseOver = false
-  }
-
-  function physics () {
-    readObjectState()
-    positioningPhysics()
-  }
-
-  function adjustTimeFrame (elementsPlotted) {
-    const ELEMENTS_PLOTTED_THREASHOLD = 500
-    if (
-      canvas.chartingSpace.viewport.zoomTargetLevel >= ZOOM_OUT_THRESHOLD_FOR_CHANGING_TIME_FRAME &&
-      displayingRealTimeFrame === false
-    ) {
-      let event = {}
-      event.timeFrame = thisObject.timeFrame
-      thisObject.container.eventHandler.raiseEvent('Time Frame Value Changed', event)
-      displayingRealTimeFrame = true
-    }
-    if (
-      elementsPlotted > ELEMENTS_PLOTTED_THREASHOLD &&
-      canvas.chartingSpace.viewport.zoomTargetLevel < ZOOM_OUT_THRESHOLD_FOR_CHANGING_TIME_FRAME &&
-      displayingRealTimeFrame === true
-    ) {
-      let event = {}
-      event.timeFrame = ONE_DAY_IN_MILISECONDS
-      thisObject.container.eventHandler.raiseEvent('Time Frame Value Changed', event)
-      displayingRealTimeFrame = false
-    }
-  }
-
-  function positioningPhysics () {
-    /* Container Limits */
-
-    let upCorner = {
-      x: 0,
-      y: 0
+    let thisObject = {
+        timeFrame: undefined,
+        container: undefined,
+        fitFunction: undefined,
+        payload: undefined,
+        isVisible: true,
+        layersOn: undefined,
+        adjustTimeFrame: adjustTimeFrame,
+        onMouseOverSomeTimeMachineContainer: onMouseOverSomeTimeMachineContainer,
+        draw: draw,
+        drawForeground: drawForeground,
+        physics: physics,
+        getContainer: getContainer,
+        initialize: initialize,
+        finalize: finalize
     }
 
-    let bottonCorner = {
-      x: limitingContainer.frame.width,
-      y: limitingContainer.frame.height
+    const FILES_PERIOD_DEFAULT_VALUE = 0
+    const TIME_PERIOD_DEFAULT_VALUE = 0
+    const MIN_HEIGHT = 50
+
+    let displayingRealTimeFrame = true
+    let greyOutCoverLayer = false
+    let isMouseOver
+
+    let filePeriodIndex = FILES_PERIOD_DEFAULT_VALUE
+    let timeFrameIndex = TIME_PERIOD_DEFAULT_VALUE
+    let timeFramesMasterArray = [marketFilesPeriods, dailyFilePeriods]
+    let timeFrameLabel = '24-hs'
+
+    let onMouseWheelEventSubscriptionId
+    let onViewportZoomChangedEventSubscriptionId
+    let onMouseOverEventSubscriptionId
+    let onMouseNotOverEventSubscriptionId
+
+    let limitingContainer
+
+    setupContainer()
+
+    let wheelDeltaDirection
+    let wheelDeltaCounter = 0
+
+    return thisObject
+
+    function setupContainer() {
+        thisObject.container = newContainer()
+        thisObject.container.initialize(MODULE_NAME)
+
+        thisObject.container.isDraggeable = false
+        thisObject.container.isClickeable = false
+        thisObject.container.isWheelable = true
+        thisObject.container.detectMouseOver = true
+
+        thisObject.container.frame.width = UI_PANEL.WIDTH.NORMAL
+        thisObject.container.frame.height = 40
     }
 
-    upCorner = transformThisPoint(upCorner, limitingContainer)
-    bottonCorner = transformThisPoint(bottonCorner, limitingContainer)
+    function finalize() {
+        thisObject.container.eventHandler.stopListening(onMouseWheelEventSubscriptionId)
+        canvas.chartingSpace.viewport.eventHandler.stopListening(onViewportZoomChangedEventSubscriptionId)
+        thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
+        thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
 
-    upCorner = limitingContainer.fitFunction(upCorner, true)
-    bottonCorner = limitingContainer.fitFunction(bottonCorner, true)
+        thisObject.container.finalize()
+        thisObject.container = undefined
+        thisObject.fitFunction = undefined
+        thisObject.payload = undefined
 
-    /* We will check if we need to change the bottom because of being one of many scales of the same type */
-    let displaceFactor = 0
-    if (thisObject.payload.parentNode === undefined) { return } // This happens when in the process of deleting the scale, timeline chart or time machine.
-    if (thisObject.payload.parentNode.type === 'Timeline Chart') {
-      if (thisObject.payload.parentNode.payload.parentNode !== undefined) {
-        if (thisObject.payload.parentNode.payload.parentNode.timeFrameScale !== undefined) {
-          if (thisObject.payload.parentNode.payload.parentNode.timeFrameScale.payload.isVisible === true) {
-            displaceFactor++
-          }
-        }
-        for (let i = 0; i < thisObject.payload.parentNode.payload.parentNode.timelineCharts.length; i++) {
-          let timelineChart = thisObject.payload.parentNode.payload.parentNode.timelineCharts[i]
-          if (timelineChart.timeFrameScale !== undefined) {
-            if (thisObject.payload.node.id !== timelineChart.timeFrameScale.id) {
-              if (timelineChart.timeFrameScale.payload.isVisible === true) {
-                displaceFactor++
-              }
+        limitingContainer = undefined
+    }
+
+    function initialize(pLimitingContainer) {
+        limitingContainer = pLimitingContainer
+
+        readObjectState()
+        newTimeFrame()
+
+        onMouseWheelEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
+        onViewportZoomChangedEventSubscriptionId = canvas.chartingSpace.viewport.eventHandler.listenToEvent('Zoom Changed', onViewportZoomChanged)
+        onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
+        onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
+    }
+
+    function onMouseOverSomeTimeMachineContainer(event) {
+        if (event.containerId === undefined) {
+            /* This happens when the mouse over was not at the instance of a certain scale, but anywhere else. */
+            greyOutCoverLayer = false
+        } else {
+            if (event.containerId === thisObject.container.id) {
+                greyOutCoverLayer = false
             } else {
-              break
+                greyOutCoverLayer = true
+                turnOnCounter = 0
             }
-          }
         }
-      }
-    }
-    bottonCorner.y = bottonCorner.y - thisObject.container.frame.height * displaceFactor
-
-    /* Positioning */
-    timePoint = {
-      x: 0,
-      y: limitingContainer.frame.height
     }
 
-    timePoint = transformThisPoint(timePoint, limitingContainer.frame.container)
-    timePoint.x = canvas.mouse.position.x - thisObject.container.frame.width / 2
-
-    /* Checking against the container limits. */
-    if (timePoint.x < upCorner.x) { timePoint.x = upCorner.x }
-    if (timePoint.x + thisObject.container.frame.width > bottonCorner.x) { timePoint.x = bottonCorner.x - thisObject.container.frame.width }
-    if (timePoint.y < upCorner.y + thisObject.container.frame.height) { timePoint.y = upCorner.y + thisObject.container.frame.height }
-    if (timePoint.y > bottonCorner.y) { timePoint.y = bottonCorner.y }
-
-    thisObject.container.frame.position.x = timePoint.x
-    thisObject.container.frame.position.y = timePoint.y - thisObject.container.frame.height
-
-    thisObject.isVisible = true
-    thisObject.payload.isVisible = true
-    if (thisObject.container.frame.position.y + thisObject.container.frame.height > bottonCorner.y ||
-        thisObject.container.frame.position.y - thisObject.container.frame.height * 3 < upCorner.y ||
-      thisObject.container.frame.position.x < upCorner.x) {
-      thisObject.isVisible = false
-      thisObject.payload.isVisible = false
-    }
-    if (thisObject.layersOn === 0) {
-      thisObject.isVisible = false
-      thisObject.payload.isVisible = false
+    function onMouseOver(event) {
+        isMouseOver = true
+        event.containerId = thisObject.container.id
+        thisObject.container.eventHandler.raiseEvent('onMouseOverScale', event)
     }
 
-    if (canvas.chartingSpace.viewport.zoomTargetLevel < ZOOM_OUT_THRESHOLD_FOR_DISPLAYING_SCALES) {
-      thisObject.isVisible = false
+    function onMouseNotOver() {
+        isMouseOver = false
     }
-  }
 
-  function onViewportZoomChanged (event) {
-    if (event !== undefined) { // it is undefined when the level is just being animated.
-      if (event.shiftKey === false) { return } // with no shft key pressed, no automatic change in scale
-      let currentTimeFrame = thisObject.timeFrame
-      let timeFrame = recalculatePeriod(event.newLevel)
-      if (timeFrame !== currentTimeFrame) {
-        for (let i = 0; i < timeFramesMasterArray.length; i++) {
-          let timeFrameArray = timeFramesMasterArray[i]
-          for (let j = 0; j < timeFrameArray.length; j++) {
-            let record = timeFrameArray[j]
-            if (timeFrame === record[0]) {
-              filePeriodIndex = i
-              timeFrameIndex = j
+    function physics() {
+        readObjectState()
+        positioningPhysics()
+    }
+
+    function adjustTimeFrame(elementsPlotted) {
+        const ELEMENTS_PLOTTED_THREASHOLD = 500
+        if (
+            canvas.chartingSpace.viewport.zoomTargetLevel >= ZOOM_OUT_THRESHOLD_FOR_CHANGING_TIME_FRAME &&
+            displayingRealTimeFrame === false
+        ) {
+            let event = {}
+            event.timeFrame = thisObject.timeFrame
+            thisObject.container.eventHandler.raiseEvent('Time Frame Value Changed', event)
+            displayingRealTimeFrame = true
+        }
+        if (
+            elementsPlotted > ELEMENTS_PLOTTED_THREASHOLD &&
+            canvas.chartingSpace.viewport.zoomTargetLevel < ZOOM_OUT_THRESHOLD_FOR_CHANGING_TIME_FRAME &&
+            displayingRealTimeFrame === true
+        ) {
+            let event = {}
+            event.timeFrame = ONE_DAY_IN_MILISECONDS
+            thisObject.container.eventHandler.raiseEvent('Time Frame Value Changed', event)
+            displayingRealTimeFrame = false
+        }
+    }
+
+    function positioningPhysics() {
+        /* Container Limits */
+
+        let upCorner = {
+            x: 0,
+            y: 0
+        }
+
+        let bottonCorner = {
+            x: limitingContainer.frame.width,
+            y: limitingContainer.frame.height
+        }
+
+        upCorner = transformThisPoint(upCorner, limitingContainer)
+        bottonCorner = transformThisPoint(bottonCorner, limitingContainer)
+
+        upCorner = limitingContainer.fitFunction(upCorner, true)
+        bottonCorner = limitingContainer.fitFunction(bottonCorner, true)
+
+        /* We will check if we need to change the bottom because of being one of many scales of the same type */
+        let displaceFactor = 0
+        if (thisObject.payload.parentNode === undefined) { return } // This happens when in the process of deleting the scale, timeline chart or time machine.
+        if (thisObject.payload.parentNode.type === 'Timeline Chart') {
+            if (thisObject.payload.parentNode.payload.parentNode !== undefined) {
+                if (thisObject.payload.parentNode.payload.parentNode.timeFrameScale !== undefined) {
+                    if (thisObject.payload.parentNode.payload.parentNode.timeFrameScale.payload.isVisible === true) {
+                        displaceFactor++
+                    }
+                }
+                for (let i = 0; i < thisObject.payload.parentNode.payload.parentNode.timelineCharts.length; i++) {
+                    let timelineChart = thisObject.payload.parentNode.payload.parentNode.timelineCharts[i]
+                    if (timelineChart.timeFrameScale !== undefined) {
+                        if (thisObject.payload.node.id !== timelineChart.timeFrameScale.id) {
+                            if (timelineChart.timeFrameScale.payload.isVisible === true) {
+                                displaceFactor++
+                            }
+                        } else {
+                            break
+                        }
+                    }
+                }
             }
-          }
         }
+        bottonCorner.y = bottonCorner.y - thisObject.container.frame.height * displaceFactor
+
+        /* Positioning */
+        timePoint = {
+            x: 0,
+            y: limitingContainer.frame.height
+        }
+
+        timePoint = transformThisPoint(timePoint, limitingContainer.frame.container)
+        timePoint.x = canvas.mouse.position.x - thisObject.container.frame.width / 2
+
+        /* Checking against the container limits. */
+        if (timePoint.x < upCorner.x) { timePoint.x = upCorner.x }
+        if (timePoint.x + thisObject.container.frame.width > bottonCorner.x) { timePoint.x = bottonCorner.x - thisObject.container.frame.width }
+        if (timePoint.y < upCorner.y + thisObject.container.frame.height) { timePoint.y = upCorner.y + thisObject.container.frame.height }
+        if (timePoint.y > bottonCorner.y) { timePoint.y = bottonCorner.y }
+
+        thisObject.container.frame.position.x = timePoint.x
+        thisObject.container.frame.position.y = timePoint.y - thisObject.container.frame.height
+
+        thisObject.isVisible = true
+        thisObject.payload.isVisible = true
+        if (thisObject.container.frame.position.y + thisObject.container.frame.height > bottonCorner.y ||
+            thisObject.container.frame.position.y - thisObject.container.frame.height * 3 < upCorner.y ||
+            thisObject.container.frame.position.x < upCorner.x) {
+            thisObject.isVisible = false
+            thisObject.payload.isVisible = false
+        }
+        if (thisObject.layersOn === 0) {
+            thisObject.isVisible = false
+            thisObject.payload.isVisible = false
+        }
+
+        if (canvas.chartingSpace.viewport.zoomTargetLevel < ZOOM_OUT_THRESHOLD_FOR_DISPLAYING_SCALES) {
+            thisObject.isVisible = false
+        }
+    }
+
+    function onViewportZoomChanged(event) {
+        if (event !== undefined) { // it is undefined when the level is just being animated.
+            if (event.shiftKey === false) { return } // with no shft key pressed, no automatic change in scale
+            let currentTimeFrame = thisObject.timeFrame
+            let timeFrame = recalculatePeriod(event.newLevel)
+            if (timeFrame !== currentTimeFrame) {
+                for (let i = 0; i < timeFramesMasterArray.length; i++) {
+                    let timeFrameArray = timeFramesMasterArray[i]
+                    for (let j = 0; j < timeFrameArray.length; j++) {
+                        let record = timeFrameArray[j]
+                        if (timeFrame === record[0]) {
+                            filePeriodIndex = i
+                            timeFrameIndex = j
+                        }
+                    }
+                }
+                newTimeFrame()
+                saveObjectState()
+            }
+        }
+    }
+
+    function onMouseWheel(event) {
+        if (IS_MAC) {
+            let sensitivity
+            if (event.wheelDelta < 0) {
+                if (event.shiftKey === true) {
+                    sensitivity = 20
+                } else {
+                    sensitivity = 5
+                }
+                if (wheelDeltaDirection === -1) {
+                    wheelDeltaCounter++
+                    if (wheelDeltaCounter < sensitivity) {
+                        return
+                    } else {
+                        wheelDeltaCounter = 0
+                    }
+                } else {
+                    wheelDeltaCounter = 0
+                    wheelDeltaDirection = -1
+                    return
+                }
+            } else {
+                if (wheelDeltaDirection === 1) {
+                    wheelDeltaCounter++
+                    if (wheelDeltaCounter < sensitivity) {
+                        return
+                    } else {
+                        wheelDeltaCounter = 0
+                    }
+                } else {
+                    wheelDeltaCounter = 0
+                    wheelDeltaDirection = 1
+                    return
+                }
+            }
+        }
+
+        let delta = event.wheelDelta
+        if (delta < 0) {
+            timeFrameIndex--
+            if (timeFrameIndex < 0) {
+                filePeriodIndex--
+                if (filePeriodIndex < 0) {
+                    filePeriodIndex = 0
+                    timeFrameIndex = 0
+                } else {
+                    timeFrameIndex = timeFramesMasterArray[filePeriodIndex].length - 1
+                }
+            }
+        } else {
+            timeFrameIndex++
+            if (timeFrameIndex > timeFramesMasterArray[filePeriodIndex].length - 1) {
+                filePeriodIndex++
+                if (filePeriodIndex > timeFramesMasterArray.length - 1) {
+                    filePeriodIndex = timeFramesMasterArray.length - 1
+                    timeFrameIndex = timeFramesMasterArray[filePeriodIndex].length - 1
+                } else {
+                    timeFrameIndex = 0
+                }
+            }
+        }
+
         newTimeFrame()
         saveObjectState()
-      }
-    }
-  }
-
-  function onMouseWheel (event) {
-    if (IS_MAC) {
-      let sensitivity
-      if (event.wheelDelta < 0) {
-        if (event.shiftKey === true) {
-          sensitivity = 20
-        } else {
-          sensitivity = 5
-        }
-        if (wheelDeltaDirection === -1) {
-          wheelDeltaCounter++
-          if (wheelDeltaCounter < sensitivity) {
-            return
-          } else {
-            wheelDeltaCounter = 0
-          }
-        } else {
-          wheelDeltaCounter = 0
-          wheelDeltaDirection = -1
-          return
-        }
-      } else {
-        if (wheelDeltaDirection === 1) {
-          wheelDeltaCounter++
-          if (wheelDeltaCounter < sensitivity) {
-            return
-          } else {
-            wheelDeltaCounter = 0
-          }
-        } else {
-          wheelDeltaCounter = 0
-          wheelDeltaDirection = 1
-          return
-        }
-      }
     }
 
-    let delta = event.wheelDelta
-    if (delta < 0) {
-      timeFrameIndex--
-      if (timeFrameIndex < 0) {
-        filePeriodIndex--
-        if (filePeriodIndex < 0) {
-          filePeriodIndex = 0
-          timeFrameIndex = 0
-        } else {
-          timeFrameIndex = timeFramesMasterArray[filePeriodIndex].length - 1
+    function getContainer(point) {
+        if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+            return thisObject.container
         }
-      }
-    } else {
-      timeFrameIndex++
-      if (timeFrameIndex > timeFramesMasterArray[filePeriodIndex].length - 1) {
-        filePeriodIndex++
-        if (filePeriodIndex > timeFramesMasterArray.length - 1) {
-          filePeriodIndex = timeFramesMasterArray.length - 1
-          timeFrameIndex = timeFramesMasterArray[filePeriodIndex].length - 1
-        } else {
-          timeFrameIndex = 0
+    }
+
+    function saveObjectState() {
+        try {
+            let config = JSON.parse(thisObject.payload.node.config)
+            config.value = timeFrameLabel
+            thisObject.payload.node.config = JSON.stringify(config)
+        } catch (err) {
+            // we ignore errors here since most likely they will be parsing errors.
         }
-      }
     }
 
-    newTimeFrame()
-    saveObjectState()
-  }
-
-  function getContainer (point) {
-    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-      return thisObject.container
-    }
-  }
-
-  function saveObjectState () {
-    try {
-      let config = JSON.parse(thisObject.payload.node.config)
-      config.value = timeFrameLabel
-      thisObject.payload.node.config = JSON.stringify(config)
-    } catch (err) {
-       // we ignore errors here since most likely they will be parsing errors.
-    }
-  }
-
-  function readObjectState () {
-    try {
-      let config = JSON.parse(thisObject.payload.node.config)
-      if (config.value !== timeFrameLabel) {
-        let found = false
-        for (let i = 0; i < timeFramesMasterArray.length; i++) {
-          let timeFrameArray = timeFramesMasterArray[i]
-          for (let j = 0; j < timeFrameArray.length; j++) {
-            let record = timeFrameArray[j]
-            if (config.value === record[1]) {
-              filePeriodIndex = i
-              timeFrameIndex = j
-              found = true
+    function readObjectState() {
+        try {
+            let config = JSON.parse(thisObject.payload.node.config)
+            if (config.value !== timeFrameLabel) {
+                let found = false
+                for (let i = 0; i < timeFramesMasterArray.length; i++) {
+                    let timeFrameArray = timeFramesMasterArray[i]
+                    for (let j = 0; j < timeFrameArray.length; j++) {
+                        let record = timeFrameArray[j]
+                        if (config.value === record[1]) {
+                            filePeriodIndex = i
+                            timeFrameIndex = j
+                            found = true
+                        }
+                    }
+                }
+                if (found === true) {
+                    newTimeFrame()
+                } else {
+                    saveObjectState()
+                }
             }
-          }
+        } catch (err) {
+            // we ignore errors here since most likely they will be parsing errors.
         }
-        if (found === true) {
-          newTimeFrame()
-        } else {
-          saveObjectState()
+    }
+
+    function newTimeFrame() {
+        let timeFrameArray = timeFramesMasterArray[filePeriodIndex]
+        thisObject.timeFrame = timeFrameArray[timeFrameIndex][0]
+        timeFrameLabel = timeFrameArray[timeFrameIndex][1]
+        // console.log('NEW TIME FRAME LABEL', timeFrameLabel)
+        let event = {}
+        event.timeFrame = thisObject.timeFrame
+        thisObject.container.eventHandler.raiseEvent('Time Frame Value Changed', event)
+    }
+
+    function draw() {
+        drawScaleBox()
+        if (greyOutCoverLayer === true) {
+            drawScaleDisplayCover(thisObject.container)
         }
-      }
-    } catch (err) {
-       // we ignore errors here since most likely they will be parsing errors.
     }
-  }
 
-  function newTimeFrame () {
-    let timeFrameArray = timeFramesMasterArray[filePeriodIndex]
-    thisObject.timeFrame = timeFrameArray[timeFrameIndex][0]
-    timeFrameLabel = timeFrameArray[timeFrameIndex][1]
-    // console.log('NEW TIME FRAME LABEL', timeFrameLabel)
-    let event = {}
-    event.timeFrame = thisObject.timeFrame
-    thisObject.container.eventHandler.raiseEvent('Time Frame Value Changed', event)
-  }
-
-  function draw () {
-    drawScaleBox()
-    if (greyOutCoverLayer === true) {
-      drawScaleDisplayCover(thisObject.container)
+    function drawForeground() {
+        if (isMouseOver === true) {
+            drawScaleBox()
+        }
     }
-  }
 
-  function drawForeground () {
-    if (isMouseOver === true) {
-      drawScaleBox()
+    function drawScaleBox() {
+        if (timeFrameLabel === undefined) { return }
+
+        let label = timeFrameLabel.split('-')
+        let label1 = thisObject.payload.node.payload.parentNode.name
+        let label2 = label[0]
+        let label3 = label[1].toUpperCase()
+
+        let icon1 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
+        let icon2 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type)
+
+        let backgroundColor = UI_COLOR.BLACK
+
+        drawScaleDisplay(label1, label2, label3, 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor)
     }
-  }
-
-  function drawScaleBox () {
-    if (timeFrameLabel === undefined) { return }
-
-    let label = timeFrameLabel.split('-')
-    let label1 = thisObject.payload.node.payload.parentNode.name
-    let label2 = label[0]
-    let label3 = label[1].toUpperCase()
-
-    let icon1 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
-    let icon2 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type)
-
-    let backgroundColor = UI_COLOR.BLACK
-
-    drawScaleDisplay(label1, label2, label3, 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor)
-  }
 }

Scales/TimeScale.js

@@ -1,359 +1,359 @@
-function newTimeScale () {
-  const MODULE_NAME = 'Time Scale'
+function newTimeScale() {
+    const MODULE_NAME = 'Time Scale'
 
-  let thisObject = {
-    container: undefined,
-    date: undefined,
-    fitFunction: undefined,
-    payload: undefined,
-    isVisible: true,
-    fromDate: undefined,
-    toDate: undefined,
-    onMouseOverSomeTimeMachineContainer: onMouseOverSomeTimeMachineContainer,
-    physics: physics,
-    draw: draw,
-    drawBackground: drawBackground,
-    drawForeground: drawForeground,
-    getContainer: getContainer,
-    initialize: initialize,
-    finalize: finalize
-  }
-
-  thisObject.container = newContainer()
-  thisObject.container.initialize(MODULE_NAME)
-
-  thisObject.container.isDraggeable = false
-  thisObject.container.isClickeable = false
-  thisObject.container.isWheelable = true
-  thisObject.container.detectMouseOver = true
-
-  thisObject.container.frame.width = UI_PANEL.WIDTH.NORMAL
-  thisObject.container.frame.height = 40
-
-  let visible = true
-  let autoScaleButton
-  let isMouseOver
-
-  let onMouseWheelEventSubscriptionId
-  let onMouseOverEventSubscriptionId
-  let onMouseNotOverEventSubscriptionId
-  let onScaleChangedEventSubscriptionId
-
-  let coordinateSystem
-  let limitingContainer
-
-  let wheelDeltaDirection
-  let wheelDeltaCounter = 0
-
-  return thisObject
-
-  function finalize () {
-    thisObject.container.eventHandler.stopListening(onMouseWheelEventSubscriptionId)
-    thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
-    thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
-    coordinateSystem.eventHandler.stopListening(onScaleChangedEventSubscriptionId)
-
-    thisObject.container.finalize()
-    thisObject.container = undefined
-    thisObject.fitFunction = undefined
-    thisObject.payload = undefined
-
-    coordinateSystem = undefined
-    limitingContainer = undefined
-
-    autoScaleButton.finalize()
-    autoScaleButton = undefined
-  }
-
-  function initialize (pCoordinateSystem, pLimitingContainer) {
-    coordinateSystem = pCoordinateSystem
-    limitingContainer = pLimitingContainer
-
-    onMouseWheelEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
-    onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
-    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()
-  }
-
-  function onMouseOverSomeTimeMachineContainer (event) {
-    if (event.containerId === undefined) {
-      /* This happens when the mouse over was not at the instance of a certain scale, but anywhere else. */
-      visible = true
-    } else {
-      if (event.containerId === thisObject.container.id) {
-        visible = true
-      } else {
-        visible = false
-        turnOnCounter = 0
-      }
+    let thisObject = {
+        container: undefined,
+        date: undefined,
+        fitFunction: undefined,
+        payload: undefined,
+        isVisible: true,
+        fromDate: undefined,
+        toDate: undefined,
+        onMouseOverSomeTimeMachineContainer: onMouseOverSomeTimeMachineContainer,
+        physics: physics,
+        draw: draw,
+        drawBackground: drawBackground,
+        drawForeground: drawForeground,
+        getContainer: getContainer,
+        initialize: initialize,
+        finalize: finalize
     }
-  }
 
-  function onMouseOver (event) {
-    isMouseOver = true
-    event.containerId = thisObject.container.id
-    thisObject.container.eventHandler.raiseEvent('onMouseOverScale', event)
-  }
+    thisObject.container = newContainer()
+    thisObject.container.initialize(MODULE_NAME)
 
-  function onMouseNotOver () {
-    isMouseOver = false
-  }
+    thisObject.container.isDraggeable = false
+    thisObject.container.isClickeable = false
+    thisObject.container.isWheelable = true
+    thisObject.container.detectMouseOver = true
+
+    thisObject.container.frame.width = UI_PANEL.WIDTH.NORMAL
+    thisObject.container.frame.height = 40
+
+    let visible = true
+    let autoScaleButton
+    let isMouseOver
+
+    let onMouseWheelEventSubscriptionId
+    let onMouseOverEventSubscriptionId
+    let onMouseNotOverEventSubscriptionId
+    let onScaleChangedEventSubscriptionId
+
+    let coordinateSystem
+    let limitingContainer
+
+    let wheelDeltaDirection
+    let wheelDeltaCounter = 0
+
+    return thisObject
+
+    function finalize() {
+        thisObject.container.eventHandler.stopListening(onMouseWheelEventSubscriptionId)
+        thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
+        thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
+        coordinateSystem.eventHandler.stopListening(onScaleChangedEventSubscriptionId)
+
+        thisObject.container.finalize()
+        thisObject.container = undefined
+        thisObject.fitFunction = undefined
+        thisObject.payload = undefined
+
+        coordinateSystem = undefined
+        limitingContainer = undefined
+
+        autoScaleButton.finalize()
+        autoScaleButton = undefined
+    }
+
+    function initialize(pCoordinateSystem, pLimitingContainer) {
+        coordinateSystem = pCoordinateSystem
+        limitingContainer = pLimitingContainer
+
+        onMouseWheelEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
+        onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
+        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()
+    }
+
+    function onMouseOverSomeTimeMachineContainer(event) {
+        if (event.containerId === undefined) {
+            /* This happens when the mouse over was not at the instance of a certain scale, but anywhere else. */
+            visible = true
+        } else {
+            if (event.containerId === thisObject.container.id) {
+                visible = true
+            } else {
+                visible = false
+                turnOnCounter = 0
+            }
+        }
+    }
+
+    function onMouseOver(event) {
+        isMouseOver = true
+        event.containerId = thisObject.container.id
+        thisObject.container.eventHandler.raiseEvent('onMouseOverScale', event)
+    }
+
+    function onMouseNotOver() {
+        isMouseOver = false
+    }
+
+    function onMouseWheel(event) {
+        if (IS_MAC) {
+            let sensitivity
+            if (event.wheelDelta < 0) {
+                if (event.shiftKey === true) {
+                    sensitivity = 20
+                } else {
+                    sensitivity = 5
+                }
+                if (wheelDeltaDirection === -1) {
+                    wheelDeltaCounter++
+                    if (wheelDeltaCounter < sensitivity) {
+                        return
+                    } else {
+                        wheelDeltaCounter = 0
+                    }
+                } else {
+                    wheelDeltaCounter = 0
+                    wheelDeltaDirection = -1
+                    return
+                }
+            } else {
+                if (wheelDeltaDirection === 1) {
+                    wheelDeltaCounter++
+                    if (wheelDeltaCounter < sensitivity) {
+                        return
+                    } else {
+                        wheelDeltaCounter = 0
+                    }
+                } else {
+                    wheelDeltaCounter = 0
+                    wheelDeltaDirection = 1
+                    return
+                }
+            }
+        }
 
-  function onMouseWheel (event) {
-    if (IS_MAC) {
-      let sensitivity
-      if (event.wheelDelta < 0) {
         if (event.shiftKey === true) {
-          sensitivity = 20
-        } else {
-          sensitivity = 5
-        }
-        if (wheelDeltaDirection === -1) {
-          wheelDeltaCounter++
-          if (wheelDeltaCounter < sensitivity) {
+            autoScaleButton.container.eventHandler.raiseEvent('onMouseWheel', event)
             return
-          } else {
-            wheelDeltaCounter = 0
-          }
+        }
+        let factor
+        let morePower = 10
+        if (event.buttons === 4) { morePower = 1 } // Mouse wheel pressed.
+
+        let delta = event.wheelDelta
+        if (delta < 0) {
+            factor = -0.01 * morePower
         } else {
-          wheelDeltaCounter = 0
-          wheelDeltaDirection = -1
-          return
+            factor = 0.01 * morePower
         }
-      } else {
-        if (wheelDeltaDirection === 1) {
-          wheelDeltaCounter++
-          if (wheelDeltaCounter < sensitivity) {
-            return
-          } else {
-            wheelDeltaCounter = 0
-          }
-        } else {
-          wheelDeltaCounter = 0
-          wheelDeltaDirection = 1
-          return
+
+        coordinateSystem.zoomX(factor, event, limitingContainer, MODULE_NAME)
+    }
+
+    function onScaleChanged() {
+        saveObjectState()
+    }
+
+    function getContainer(point, purpose) {
+        if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+            return thisObject.container
         }
-      }
     }
 
-    if (event.shiftKey === true) {
-      autoScaleButton.container.eventHandler.raiseEvent('onMouseWheel', event)
-      return
-    }
-    let factor
-    let morePower = 10
-    if (event.buttons === 4) { morePower = 1 } // Mouse wheel pressed.
-
-    let delta = event.wheelDelta
-    if (delta < 0) {
-      factor = -0.01 * morePower
-    } else {
-      factor = 0.01 * morePower
-    }
-
-    coordinateSystem.zoomX(factor, event, limitingContainer, MODULE_NAME)
-  }
-
-  function onScaleChanged () {
-    saveObjectState()
-  }
-
-  function getContainer (point, purpose) {
-    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-      return thisObject.container
-    }
-  }
-
-  function saveObjectState () {
-    try {
-      let config = JSON.parse(thisObject.payload.node.config)
-      config.fromDate = (new Date(coordinateSystem.min.x)).toISOString()
-      config.toDate = (new Date(coordinateSystem.max.x)).toISOString()
-      config.autoMinScale = coordinateSystem.autoMinXScale
-      config.autoMaxScale = coordinateSystem.autoMaxXScale
-      thisObject.payload.node.config = JSON.stringify(config, null, 4)
-    } catch (err) {
-       // we ignore errors here since most likely they will be parsing errors.
-    }
-  }
-
-  function readObjectState () {
-    try {
-      let config = JSON.parse(thisObject.payload.node.config)
-
-      if (
-      (isNaN(Date.parse(config.fromDate)) || config.fromDate === null || config.fromDate === undefined) ||
-      (isNaN(Date.parse(config.toDate)) || config.toDate === null || config.toDate === undefined)
-        ) {
-        // not using this value
-      } else {
-        if (thisObject.fromDate !== Date.parse(config.fromDate) || thisObject.toDate !== Date.parse(config.toDate)) {
-          thisObject.fromDate = Date.parse(config.fromDate)
-          thisObject.toDate = Date.parse(config.toDate)
-          coordinateSystem.min.x = thisObject.fromDate
-          coordinateSystem.max.x = thisObject.toDate
-
-          if (config.autoMinScale !== undefined && (config.autoMinScale === true || config.autoMinScale === false) && config.autoMaxScale !== undefined && (config.autoMaxScale === true || config.autoMaxScale === false)) {
-            coordinateSystem.autoMinXScale = config.autoMinScale
-            coordinateSystem.autoMaxXScale = config.autoMaxScale
-            autoScaleButton.setStatus(config.autoMinScale, config.autoMaxScale)
-          }
-          coordinateSystem.recalculateScale()
+    function saveObjectState() {
+        try {
+            let config = JSON.parse(thisObject.payload.node.config)
+            config.fromDate = (new Date(coordinateSystem.min.x)).toISOString()
+            config.toDate = (new Date(coordinateSystem.max.x)).toISOString()
+            config.autoMinScale = coordinateSystem.autoMinXScale
+            config.autoMaxScale = coordinateSystem.autoMaxXScale
+            thisObject.payload.node.config = JSON.stringify(config, null, 4)
+        } catch (err) {
+            // we ignore errors here since most likely they will be parsing errors.
         }
-      }
-      saveObjectState() // this overrides any invalid value at the config.
-    } catch (err) {
-       // we ignore errors here since most likely they will be parsing errors.
-    }
-  }
-
-  function physics () {
-    readObjectState()
-    positioningPhysics()
-  }
-
-  function positioningPhysics () {
-    /* Container Limits */
-
-    let upCorner = {
-      x: 0,
-      y: 0
     }
 
-    let bottonCorner = {
-      x: limitingContainer.frame.width,
-      y: limitingContainer.frame.height
+    function readObjectState() {
+        try {
+            let config = JSON.parse(thisObject.payload.node.config)
+
+            if (
+                (isNaN(Date.parse(config.fromDate)) || config.fromDate === null || config.fromDate === undefined) ||
+                (isNaN(Date.parse(config.toDate)) || config.toDate === null || config.toDate === undefined)
+            ) {
+                // not using this value
+            } else {
+                if (thisObject.fromDate !== Date.parse(config.fromDate) || thisObject.toDate !== Date.parse(config.toDate)) {
+                    thisObject.fromDate = Date.parse(config.fromDate)
+                    thisObject.toDate = Date.parse(config.toDate)
+                    coordinateSystem.min.x = thisObject.fromDate
+                    coordinateSystem.max.x = thisObject.toDate
+
+                    if (config.autoMinScale !== undefined && (config.autoMinScale === true || config.autoMinScale === false) && config.autoMaxScale !== undefined && (config.autoMaxScale === true || config.autoMaxScale === false)) {
+                        coordinateSystem.autoMinXScale = config.autoMinScale
+                        coordinateSystem.autoMaxXScale = config.autoMaxScale
+                        autoScaleButton.setStatus(config.autoMinScale, config.autoMaxScale)
+                    }
+                    coordinateSystem.recalculateScale()
+                }
+            }
+            saveObjectState() // this overrides any invalid value at the config.
+        } catch (err) {
+            // we ignore errors here since most likely they will be parsing errors.
+        }
     }
 
-    upCorner = transformThisPoint(upCorner, limitingContainer)
-    bottonCorner = transformThisPoint(bottonCorner, limitingContainer)
-
-    upCorner = limitingContainer.fitFunction(upCorner, true)
-    bottonCorner = limitingContainer.fitFunction(bottonCorner, true)
-
-    /* Mouse Position Date Calculation */
-    let timePoint = {
-      x: canvas.mouse.position.x,
-      y: 0
+    function physics() {
+        readObjectState()
+        positioningPhysics()
     }
 
-    let mouseDate = getDateFromPointAtBrowserCanvas(timePoint, limitingContainer, coordinateSystem)
+    function positioningPhysics() {
+        /* Container Limits */
 
-    thisObject.date = new Date(mouseDate)
+        let upCorner = {
+            x: 0,
+            y: 0
+        }
 
-    /* timeScale Positioning */
-    timePoint = {
-      x: 0,
-      y: 0
+        let bottonCorner = {
+            x: limitingContainer.frame.width,
+            y: limitingContainer.frame.height
+        }
+
+        upCorner = transformThisPoint(upCorner, limitingContainer)
+        bottonCorner = transformThisPoint(bottonCorner, limitingContainer)
+
+        upCorner = limitingContainer.fitFunction(upCorner, true)
+        bottonCorner = limitingContainer.fitFunction(bottonCorner, true)
+
+        /* Mouse Position Date Calculation */
+        let timePoint = {
+            x: canvas.mouse.position.x,
+            y: 0
+        }
+
+        let mouseDate = getDateFromPointAtBrowserCanvas(timePoint, limitingContainer, coordinateSystem)
+
+        thisObject.date = new Date(mouseDate)
+
+        /* timeScale Positioning */
+        timePoint = {
+            x: 0,
+            y: 0
+        }
+
+        timePoint = transformThisPoint(timePoint, limitingContainer.frame.container)
+        timePoint.x = canvas.mouse.position.x - thisObject.container.frame.width / 2
+
+        /* Checking against the container limits. */
+        if (timePoint.x < upCorner.x) { timePoint.x = upCorner.x }
+        if (timePoint.x + thisObject.container.frame.width > bottonCorner.x) { timePoint.x = bottonCorner.x - thisObject.container.frame.width }
+        if (timePoint.y < upCorner.y) { timePoint.y = upCorner.y }
+        if (timePoint.y + thisObject.container.frame.height > bottonCorner.y) { timePoint.y = bottonCorner.y - thisObject.container.frame.height }
+
+        thisObject.container.frame.position.x = timePoint.x
+        thisObject.container.frame.position.y = timePoint.y
+
+        thisObject.isVisible = true
+        if (thisObject.container.frame.position.y + thisObject.container.frame.height * 4 > bottonCorner.y ||
+            thisObject.container.frame.position.y < upCorner.y ||
+            thisObject.container.frame.position.x < upCorner.x) {
+            thisObject.isVisible = false
+        }
+
+        if (canvas.chartingSpace.viewport.zoomTargetLevel < ZOOM_OUT_THRESHOLD_FOR_DISPLAYING_SCALES) {
+            thisObject.isVisible = false
+        }
     }
 
-    timePoint = transformThisPoint(timePoint, limitingContainer.frame.container)
-    timePoint.x = canvas.mouse.position.x - thisObject.container.frame.width / 2
-
-    /* Checking against the container limits. */
-    if (timePoint.x < upCorner.x) { timePoint.x = upCorner.x }
-    if (timePoint.x + thisObject.container.frame.width > bottonCorner.x) { timePoint.x = bottonCorner.x - thisObject.container.frame.width }
-    if (timePoint.y < upCorner.y) { timePoint.y = upCorner.y }
-    if (timePoint.y + thisObject.container.frame.height > bottonCorner.y) { timePoint.y = bottonCorner.y - thisObject.container.frame.height }
-
-    thisObject.container.frame.position.x = timePoint.x
-    thisObject.container.frame.position.y = timePoint.y
-
-    thisObject.isVisible = true
-    if (thisObject.container.frame.position.y + thisObject.container.frame.height * 4 > bottonCorner.y ||
-        thisObject.container.frame.position.y < upCorner.y ||
-      thisObject.container.frame.position.x < upCorner.x) {
-      thisObject.isVisible = false
+    function drawBackground() {
+        drawScale()
     }
 
-    if (canvas.chartingSpace.viewport.zoomTargetLevel < ZOOM_OUT_THRESHOLD_FOR_DISPLAYING_SCALES) {
-      thisObject.isVisible = false
-    }
-  }
+    function drawScale() {
+        const SEPARATION = 150
+        const NUMBER_OF_LABELS = Math.trunc(canvas.chartingSpace.viewport.width / SEPARATION)
+        const FONT_SIZE = 15
 
-  function drawBackground () {
-    drawScale()
-  }
+        for (let i = 0; i <= NUMBER_OF_LABELS; i++) {
+            let timePoint = {
+                x: SEPARATION * (i + 1),
+                y: 0
+            }
 
-  function drawScale () {
-    const SEPARATION = 150
-    const NUMBER_OF_LABELS = Math.trunc(canvas.chartingSpace.viewport.width / SEPARATION)
-    const FONT_SIZE = 15
+            let time = getDateFromPointAtBrowserCanvas(timePoint, limitingContainer, coordinateSystem)
+            let labels = scaleLabels(time, true)
+            let labelDisplace = labels[1].length * FONT_SIZE * FONT_ASPECT_RATIO
 
-    for (let i = 0; i <= NUMBER_OF_LABELS; i++) {
-      let timePoint = {
-        x: SEPARATION * (i + 1),
-        y: 0
-      }
+            let timePoint1 = {
+                x: SEPARATION * (i + 1) - labelDisplace,
+                y: 0
+            }
+            let timePoint2 = {
+                x: SEPARATION * (i + 1) + labelDisplace,
+                y: 0
+            }
 
-      let time = getDateFromPointAtBrowserCanvas(timePoint, limitingContainer, coordinateSystem)
-      let labels = scaleLabels(time, true)
-      let labelDisplace = labels[1].length * FONT_SIZE * FONT_ASPECT_RATIO
+            let fitPoint1 = thisObject.fitFunction(timePoint1)
+            let fitPoint2 = thisObject.fitFunction(timePoint2)
 
-      let timePoint1 = {
-        x: SEPARATION * (i + 1) - labelDisplace,
-        y: 0
-      }
-      let timePoint2 = {
-        x: SEPARATION * (i + 1) + labelDisplace,
-        y: 0
-      }
-
-      let fitPoint1 = thisObject.fitFunction(timePoint1)
-      let fitPoint2 = thisObject.fitFunction(timePoint2)
-
-      if (fitPoint1.x === timePoint1.x && fitPoint2.x === timePoint2.x) {
-        drawLabel(labels[1], 1 / 2, 0, 18, 17, FONT_SIZE, thisObject.container, UI_COLOR.GREY, timePoint1.x, undefined)
-        drawLabel(labels[2], 1 / 2, 0, 18, 30, 12, thisObject.container, UI_COLOR.GREY, timePoint1.x, undefined)
-      }
-    }
-  }
-
-  function draw () {
-    drawScaleBox()
-    autoScaleButton.draw()
-    if (visible === false) {
-      drawScaleDisplayCover(thisObject.container)
-    }
-  }
-
-  function drawForeground () {
-    if (isMouseOver === true) {
-      drawScaleBox()
-      autoScaleButton.draw()
-    }
-  }
-
-  function drawScaleBox () {
-    if (thisObject.date === undefined) { return }
-
-    let icon1 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
-    let icon2 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type)
-
-    let backgroundColor = UI_COLOR.BLACK
-    let labels = scaleLabels(thisObject.date)
-
-    drawScaleDisplay(labels[0], labels[1], labels[2], 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor)
-  }
-
-  function scaleLabels (date, excludeYear) {
-    let label = date.toUTCString()
-    let labelArray = label.split(' ')
-    let label1 = thisObject.payload.node.payload.parentNode.name
-    let label2 = labelArray[1] + ' ' + labelArray[2] + ' ' + labelArray[3]
-    let label3 = labelArray[4]
-
-    if (excludeYear === true) {
-      label2 = labelArray[1] + ' ' + labelArray[2]
+            if (fitPoint1.x === timePoint1.x && fitPoint2.x === timePoint2.x) {
+                drawLabel(labels[1], 1 / 2, 0, 18, 17, FONT_SIZE, thisObject.container, UI_COLOR.GREY, timePoint1.x, undefined)
+                drawLabel(labels[2], 1 / 2, 0, 18, 30, 12, thisObject.container, UI_COLOR.GREY, timePoint1.x, undefined)
+            }
+        }
     }
 
-    return [label1, label2, label3]
-  }
+    function draw() {
+        drawScaleBox()
+        autoScaleButton.draw()
+        if (visible === false) {
+            drawScaleDisplayCover(thisObject.container)
+        }
+    }
+
+    function drawForeground() {
+        if (isMouseOver === true) {
+            drawScaleBox()
+            autoScaleButton.draw()
+        }
+    }
+
+    function drawScaleBox() {
+        if (thisObject.date === undefined) { return }
+
+        let icon1 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
+        let icon2 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type)
+
+        let backgroundColor = UI_COLOR.BLACK
+        let labels = scaleLabels(thisObject.date)
+
+        drawScaleDisplay(labels[0], labels[1], labels[2], 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor)
+    }
+
+    function scaleLabels(date, excludeYear) {
+        let label = date.toUTCString()
+        let labelArray = label.split(' ')
+        let label1 = thisObject.payload.node.payload.parentNode.name
+        let label2 = labelArray[1] + ' ' + labelArray[2] + ' ' + labelArray[3]
+        let label3 = labelArray[4]
+
+        if (excludeYear === true) {
+            label2 = labelArray[1] + ' ' + labelArray[2]
+        }
+
+        return [label1, label2, label3]
+    }
 }
 

SideSpace/ListItem.js

@@ -1,107 +1,107 @@
-function newListItem () {
-  const MODULE_NAME = 'List Item'
-  const ERROR_LOG = true
-  const logger = newWebDebugLog()
-  logger.fileName = MODULE_NAME
+function newListItem() {
+    const MODULE_NAME = 'List Item'
+    const ERROR_LOG = true
+    const logger = newWebDebugLog()
+    logger.fileName = MODULE_NAME
 
-  let thisObject = {
-    container: undefined,
-    fitFunction: undefined,
-    physics: physics,
-    draw: draw,
-    getContainer: getContainer,
-    initialize: initialize,
-    finalize: finalize
-  }
-
-  thisObject.container = newContainer()
-  thisObject.container.initialize()
-  thisObject.container.isDraggeable = false
-  thisObject.container.isWheelable = false
-  thisObject.container.detectMouseOver = true
-  thisObject.container.isClickeable = true
-  thisObject.container.frame.width = SIDE_PANEL_WIDTH * 0.75
-  thisObject.container.frame.height = SIDE_PANEL_WIDTH * 0.75
-
-  let name
-  let type
-
-  let onMouseOverEventSubscriptionId
-  let onMouseNotOverEventSubscriptionId
-  let onMouseClickEventSubscriptionId
-
-  let isMouseOver = false
-  return thisObject
-
-  function finalize () {
-    thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
-    thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
-    thisObject.container.eventHandler.stopListening(onMouseClickEventSubscriptionId)
-
-    thisObject.container.finalize()
-    thisObject.container = undefined
-    thisObject.fitFunction = undefined
-  }
-
-  function initialize (pName, pType) {
-    name = pName
-    type = pType
-
-    onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
-    onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
-    onMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
-  }
-
-  function getContainer (point) {
-    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-      return thisObject.container
-    }
-  }
-
-  function onMouseOver (event) {
-    isMouseOver = true
-  }
-
-  function onMouseNotOver () {
-    isMouseOver = false
-  }
-
-  function onMouseClick (event) {
-    canvas.designSpace.workspace.replaceWorkspaceByLoadingOne(name)
-  }
-
-  function physics () {
-
-  }
-
-  function draw () {
-    let icon = canvas.designSpace.iconByUiObjectType.get(type)
-    let backgroundColor = UI_COLOR.BLACK
-    let labelColor
-
-    const RED_LINE_HIGHT = 4
-    const OPACITY = 1
-
-    let params = {
-      cornerRadius: 0,
-      lineWidth: 1,
-      container: thisObject.container,
-      borderColor: UI_COLOR.RUSTED_RED,
-      castShadow: false,
-      backgroundColor: backgroundColor,
-      opacity: OPACITY
+    let thisObject = {
+        container: undefined,
+        fitFunction: undefined,
+        physics: physics,
+        draw: draw,
+        getContainer: getContainer,
+        initialize: initialize,
+        finalize: finalize
     }
 
-    if (isMouseOver === false) {
-      labelColor = UI_COLOR.WHITE
-    } else {
-      labelColor = UI_COLOR.TITANIUM_YELLOW
+    thisObject.container = newContainer()
+    thisObject.container.initialize()
+    thisObject.container.isDraggeable = false
+    thisObject.container.isWheelable = false
+    thisObject.container.detectMouseOver = true
+    thisObject.container.isClickeable = true
+    thisObject.container.frame.width = SIDE_PANEL_WIDTH * 0.75
+    thisObject.container.frame.height = SIDE_PANEL_WIDTH * 0.75
+
+    let name
+    let type
+
+    let onMouseOverEventSubscriptionId
+    let onMouseNotOverEventSubscriptionId
+    let onMouseClickEventSubscriptionId
+
+    let isMouseOver = false
+    return thisObject
+
+    function finalize() {
+        thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
+        thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
+        thisObject.container.eventHandler.stopListening(onMouseClickEventSubscriptionId)
+
+        thisObject.container.finalize()
+        thisObject.container = undefined
+        thisObject.fitFunction = undefined
     }
 
-    roundedCornersBackground(params)
+    function initialize(pName, pType) {
+        name = pName
+        type = pType
 
-    drawLabel(name, 1 / 2, 3.0 / 10, -5, 0, 15, thisObject.container, labelColor)
-    drawLabel(type, 1 / 2, 7.2 / 10, -5, 0, 15, thisObject.container, labelColor)
-    drawIcon(icon, 1 / 2, 1 / 2, 0, 0, 80, thisObject.container)
-  }
+        onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
+        onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
+        onMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
+    }
+
+    function getContainer(point) {
+        if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+            return thisObject.container
+        }
+    }
+
+    function onMouseOver(event) {
+        isMouseOver = true
+    }
+
+    function onMouseNotOver() {
+        isMouseOver = false
+    }
+
+    function onMouseClick(event) {
+        canvas.designSpace.workspace.replaceWorkspaceByLoadingOne(name)
+    }
+
+    function physics() {
+
+    }
+
+    function draw() {
+        let icon = canvas.designSpace.iconByUiObjectType.get(type)
+        let backgroundColor = UI_COLOR.BLACK
+        let labelColor
+
+        const RED_LINE_HIGHT = 4
+        const OPACITY = 1
+
+        let params = {
+            cornerRadius: 0,
+            lineWidth: 1,
+            container: thisObject.container,
+            borderColor: UI_COLOR.RUSTED_RED,
+            castShadow: false,
+            backgroundColor: backgroundColor,
+            opacity: OPACITY
+        }
+
+        if (isMouseOver === false) {
+            labelColor = UI_COLOR.WHITE
+        } else {
+            labelColor = UI_COLOR.TITANIUM_YELLOW
+        }
+
+        roundedCornersBackground(params)
+
+        drawLabel(name, 1 / 2, 3.0 / 10, -5, 0, 15, thisObject.container, labelColor)
+        drawLabel(type, 1 / 2, 7.2 / 10, -5, 0, 15, thisObject.container, labelColor)
+        drawIcon(icon, 1 / 2, 1 / 2, 0, 0, 80, thisObject.container)
+    }
 }

SideSpace/ListView.js

@@ -1,271 +1,271 @@
-function newListView () {
-  const MODULE_NAME = 'List View'
-  const ERROR_LOG = true
-  const logger = newWebDebugLog()
-  logger.fileName = MODULE_NAME
+function newListView() {
+    const MODULE_NAME = 'List View'
+    const ERROR_LOG = true
+    const logger = newWebDebugLog()
+    logger.fileName = MODULE_NAME
 
-  let thisObject = {
-    fitFunction: undefined,
-    container: undefined,
-    listItems: [],
-    payload: undefined,
-    isVisible: false,
-    resize: resize,
-    turnOn: turnOn,
-    turnOff: turnOff,
-    physics: physics,
-    draw: draw,
-    getContainer: getContainer,
-    initialize: initialize,
-    finalize: finalize
-  }
-
-  thisObject.container = newContainer()
-  thisObject.container.initialize()
-  thisObject.container.isDraggeable = false
-  thisObject.container.isWheelable = true
-  thisObject.container.detectMouseOver = true
-
-  let isInitialized = false
-
-  let listItemsMap = new Map()
-  let visibleListItems = []
-  let firstVisibleListItem
-
-  let headerHeight = 40
-  let footerHeight = 30
-  let listItemHeight = SIDE_PANEL_WIDTH * 0.75
-
-  let posibleVisibleListItems
-
-  let itemSeparation
-
-  let onMouseWheelEventSuscriptionId
-
-  return thisObject
-
-  function finalize () {
-    thisObject.container.eventHandler.stopListening(onMouseWheelEventSuscriptionId)
-
-    listItemsMap = undefined
-    visibleListItems = undefined
-
-    thisObject.container.finalize()
-    thisObject.container = undefined
-
-    thisObject.payload = undefined
-    thisObject = undefined
-  }
-
-  function initialize () {
-    thisObject.container.name = MODULE_NAME
-    thisObject.container.frame.containerName = thisObject.container.name
-    thisObject.container.frame.width = SIDE_PANEL_WIDTH * 0.75
-
-    let position = { // Default position
-      x: SIDE_PANEL_WIDTH * 0.25 / 2,
-      y: 20
+    let thisObject = {
+        fitFunction: undefined,
+        container: undefined,
+        listItems: [],
+        payload: undefined,
+        isVisible: false,
+        resize: resize,
+        turnOn: turnOn,
+        turnOff: turnOff,
+        physics: physics,
+        draw: draw,
+        getContainer: getContainer,
+        initialize: initialize,
+        finalize: finalize
     }
 
-    thisObject.container.frame.position = position
+    thisObject.container = newContainer()
+    thisObject.container.initialize()
+    thisObject.container.isDraggeable = false
+    thisObject.container.isWheelable = true
+    thisObject.container.detectMouseOver = true
 
-    onMouseWheelEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
+    let isInitialized = false
 
-    resize()
-    turnOn()
-  }
+    let listItemsMap = new Map()
+    let visibleListItems = []
+    let firstVisibleListItem
 
-  function resize () {
-    thisObject.container.frame.height = browserCanvas.height - thisObject.container.frame.position.y * 2
+    let headerHeight = 40
+    let footerHeight = 30
+    let listItemHeight = SIDE_PANEL_WIDTH * 0.75
 
-    let spaceForListItems = (thisObject.container.frame.height - headerHeight - footerHeight)
-    posibleVisibleListItems = Math.trunc(spaceForListItems / (listItemHeight))
-    if ((posibleVisibleListItems - 1) !== 0) {
-      itemSeparation = (spaceForListItems - listItemHeight * posibleVisibleListItems) / (posibleVisibleListItems - 1)
-    } else {
-      itemSeparation = 0
-    }
-  }
+    let posibleVisibleListItems
 
-  function turnOn () {
-    firstVisibleListItem = 1
+    let itemSeparation
 
-    callServer(undefined, 'ListWorkspaces', onResponse)
+    let onMouseWheelEventSuscriptionId
 
-    function onResponse (err, text) {
-      if (err && err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) {
-        if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Could not load the list of your workspaces from the backend.  ') }
-        return
-      }
+    return thisObject
 
-      let workspacelist = JSON.parse(text)
-      thisObject.listItems = []
-      for (let i = 0; i < workspacelist.length; i++) {
-        let workspace = workspacelist[i].replace('.json', '')
-        let listItem = newListItem()
-        listItem.initialize(workspace, 'Workspace')
-        listItem.container.connectToParent(thisObject.container, false, false)
+    function finalize() {
+        thisObject.container.eventHandler.stopListening(onMouseWheelEventSuscriptionId)
 
-        thisObject.listItems.push(listItem)
-      }
-      calculateVisbleListItems()
-      isInitialized = true
-      thisObject.isVisible = true
-    }
-  }
+        listItemsMap = undefined
+        visibleListItems = undefined
 
-  function turnOff () {
-    thisObject.isVisible = false
-  }
+        thisObject.container.finalize()
+        thisObject.container = undefined
 
-  function onMouseWheel (event) {
-    delta = event.wheelDelta
-    if (delta > 0) {
-      delta = -1
-    } else {
-      delta = 1
+        thisObject.payload = undefined
+        thisObject = undefined
     }
 
-    firstVisibleListItem = firstVisibleListItem + delta
+    function initialize() {
+        thisObject.container.name = MODULE_NAME
+        thisObject.container.frame.containerName = thisObject.container.name
+        thisObject.container.frame.width = SIDE_PANEL_WIDTH * 0.75
 
-    calculateVisbleListItems()
-  }
-
-  function calculateVisbleListItems () {
-    let availableSlots = Math.trunc(posibleVisibleListItems)
-
-    if (firstVisibleListItem < 1) { firstVisibleListItem = 1 }
-    if (firstVisibleListItem > (thisObject.listItems.length - availableSlots + 1)) { firstVisibleListItem = thisObject.listItems.length - availableSlots + 1 }
-
-    visibleListItems = []
-
-    for (let i = 0; i < thisObject.listItems.length; i++) {
-      if (i + 1 >= firstVisibleListItem && i + 1 < firstVisibleListItem + availableSlots) {
-        let listItem = thisObject.listItems[i]
-
-        listItem.container.frame.position.x = 0
-        listItem.container.frame.position.y = (listItemHeight + itemSeparation) * visibleListItems.length + headerHeight
-
-         /* Add to Visible Product Array */
-        visibleListItems.push(listItem)
-      }
-    }
-  }
-
-  function getContainer (point, purpose) {
-    if (isInitialized === false || thisObject.isVisible === false) { return }
-    let container
-
-     /* First we check if thisObject point is inside thisObject space. */
-    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-       /* Now we see which is the inner most container that has it */
-      for (let i = 0; i < visibleListItems.length; i++) {
-        container = visibleListItems[i].getContainer(point)
-
-        if (container !== undefined) {
-          if (container.isForThisPurpose(purpose) === true) {
-            return container
-          }
+        let position = { // Default position
+            x: SIDE_PANEL_WIDTH * 0.25 / 2,
+            y: 20
         }
-      }
 
-      return thisObject.container
-    }
-  }
+        thisObject.container.frame.position = position
 
-  function childrenPhysics () {
-    for (let i = 0; i < thisObject.listItems.length; i++) {
-      let listItem = thisObject.listItems[i]
-      listItem.physics()
-    }
-  }
+        onMouseWheelEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
 
-  function physics () {
-    if (isInitialized === false || thisObject.isVisible === false) { return }
-    if (isInitialized === false) { return }
-    if (thisObject.isVisible === false) { return }
-    childrenPhysics()
-  }
-
-  function draw () {
-    if (isInitialized === false || thisObject.isVisible === false) { return }
-
-    drawBackground()
-    drawChildren()
-    drawScrollBar()
-  }
-
-  function drawChildren () {
-    for (let i = 0; i < visibleListItems.length; i++) {
-      let listItem = visibleListItems[i]
-      if (listItem !== undefined) {
-        listItem.draw()
-      }
-    }
-  }
-
-  function drawBackground () {
-    let label = 'Your Workspaces'
-
-    let backgroundColor = UI_COLOR.WHITE
-    let params = {
-      cornerRadius: 5,
-      lineWidth: 1,
-      container: thisObject.container,
-      borderColor: UI_COLOR.RUSTED_RED,
-      castShadow: false,
-      backgroundColor: backgroundColor,
-      opacity: 1
+        resize()
+        turnOn()
     }
 
-    roundedCornersBackground(params)
+    function resize() {
+        thisObject.container.frame.height = browserCanvas.height - thisObject.container.frame.position.y * 2
 
-    drawLabel(label, 1 / 2, 0, 0, 25, 15, thisObject.container, UI_COLOR.BLACK)
-  }
-
-  function drawScrollBar () {
-    if (thisObject.listItems.length > posibleVisibleListItems && posibleVisibleListItems > 0) {
-      let xOffset = 4
-      let barTopPoint = {
-        x: thisObject.container.frame.width - xOffset,
-        y: headerHeight
-      }
-      let barBottomPoint = {
-        x: thisObject.container.frame.width - xOffset,
-        y: thisObject.container.frame.height - footerHeight
-      }
-      let ratio = (posibleVisibleListItems * listItemHeight + (posibleVisibleListItems - 1) * itemSeparation) / (thisObject.listItems.length * listItemHeight + (thisObject.listItems.length - 1) * itemSeparation)
-      let handleHeight = posibleVisibleListItems * (listItemHeight * ratio) + (posibleVisibleListItems - 1) * itemSeparation * ratio
-      let handleTopPoint = {
-        x: thisObject.container.frame.width - xOffset,
-        y: headerHeight + (listItemHeight * ratio * (firstVisibleListItem - 1) + itemSeparation * ratio * (firstVisibleListItem - 1))
-      }
-      let handleBottomPoint = {
-        x: thisObject.container.frame.width - xOffset,
-        y: handleTopPoint.y + handleHeight
-      }
-      barTopPoint = thisObject.container.frame.frameThisPoint(barTopPoint)
-      barBottomPoint = thisObject.container.frame.frameThisPoint(barBottomPoint)
-      handleTopPoint = thisObject.container.frame.frameThisPoint(handleTopPoint)
-      handleBottomPoint = thisObject.container.frame.frameThisPoint(handleBottomPoint)
-
-      browserCanvasContext.beginPath()
-      browserCanvasContext.moveTo(barTopPoint.x, barTopPoint.y)
-      browserCanvasContext.lineTo(barBottomPoint.x, barBottomPoint.y)
-      browserCanvasContext.closePath()
-      browserCanvasContext.setLineDash([0, 0])
-      browserCanvasContext.lineWidth = 1
-      browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREY + ', ' + 1 + ')'
-      browserCanvasContext.stroke()
-
-      browserCanvasContext.beginPath()
-      browserCanvasContext.moveTo(handleTopPoint.x, handleTopPoint.y)
-      browserCanvasContext.lineTo(handleBottomPoint.x, handleBottomPoint.y)
-      browserCanvasContext.closePath()
-      browserCanvasContext.setLineDash([0, 0])
-      browserCanvasContext.lineWidth = 4
-      browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', ' + 1 + ')'
-      browserCanvasContext.stroke()
+        let spaceForListItems = (thisObject.container.frame.height - headerHeight - footerHeight)
+        posibleVisibleListItems = Math.trunc(spaceForListItems / (listItemHeight))
+        if ((posibleVisibleListItems - 1) !== 0) {
+            itemSeparation = (spaceForListItems - listItemHeight * posibleVisibleListItems) / (posibleVisibleListItems - 1)
+        } else {
+            itemSeparation = 0
+        }
+    }
+
+    function turnOn() {
+        firstVisibleListItem = 1
+
+        callServer(undefined, 'ListWorkspaces', onResponse)
+
+        function onResponse(err, text) {
+            if (err && err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) {
+                if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Could not load the list of your workspaces from the backend.  ') }
+                return
+            }
+
+            let workspacelist = JSON.parse(text)
+            thisObject.listItems = []
+            for (let i = 0; i < workspacelist.length; i++) {
+                let workspace = workspacelist[i].replace('.json', '')
+                let listItem = newListItem()
+                listItem.initialize(workspace, 'Workspace')
+                listItem.container.connectToParent(thisObject.container, false, false)
+
+                thisObject.listItems.push(listItem)
+            }
+            calculateVisbleListItems()
+            isInitialized = true
+            thisObject.isVisible = true
+        }
+    }
+
+    function turnOff() {
+        thisObject.isVisible = false
+    }
+
+    function onMouseWheel(event) {
+        delta = event.wheelDelta
+        if (delta > 0) {
+            delta = -1
+        } else {
+            delta = 1
+        }
+
+        firstVisibleListItem = firstVisibleListItem + delta
+
+        calculateVisbleListItems()
+    }
+
+    function calculateVisbleListItems() {
+        let availableSlots = Math.trunc(posibleVisibleListItems)
+
+        if (firstVisibleListItem < 1) { firstVisibleListItem = 1 }
+        if (firstVisibleListItem > (thisObject.listItems.length - availableSlots + 1)) { firstVisibleListItem = thisObject.listItems.length - availableSlots + 1 }
+
+        visibleListItems = []
+
+        for (let i = 0; i < thisObject.listItems.length; i++) {
+            if (i + 1 >= firstVisibleListItem && i + 1 < firstVisibleListItem + availableSlots) {
+                let listItem = thisObject.listItems[i]
+
+                listItem.container.frame.position.x = 0
+                listItem.container.frame.position.y = (listItemHeight + itemSeparation) * visibleListItems.length + headerHeight
+
+                /* Add to Visible Product Array */
+                visibleListItems.push(listItem)
+            }
+        }
+    }
+
+    function getContainer(point, purpose) {
+        if (isInitialized === false || thisObject.isVisible === false) { return }
+        let container
+
+        /* First we check if thisObject point is inside thisObject space. */
+        if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+            /* Now we see which is the inner most container that has it */
+            for (let i = 0; i < visibleListItems.length; i++) {
+                container = visibleListItems[i].getContainer(point)
+
+                if (container !== undefined) {
+                    if (container.isForThisPurpose(purpose) === true) {
+                        return container
+                    }
+                }
+            }
+
+            return thisObject.container
+        }
+    }
+
+    function childrenPhysics() {
+        for (let i = 0; i < thisObject.listItems.length; i++) {
+            let listItem = thisObject.listItems[i]
+            listItem.physics()
+        }
+    }
+
+    function physics() {
+        if (isInitialized === false || thisObject.isVisible === false) { return }
+        if (isInitialized === false) { return }
+        if (thisObject.isVisible === false) { return }
+        childrenPhysics()
+    }
+
+    function draw() {
+        if (isInitialized === false || thisObject.isVisible === false) { return }
+
+        drawBackground()
+        drawChildren()
+        drawScrollBar()
+    }
+
+    function drawChildren() {
+        for (let i = 0; i < visibleListItems.length; i++) {
+            let listItem = visibleListItems[i]
+            if (listItem !== undefined) {
+                listItem.draw()
+            }
+        }
+    }
+
+    function drawBackground() {
+        let label = 'Your Workspaces'
+
+        let backgroundColor = UI_COLOR.WHITE
+        let params = {
+            cornerRadius: 5,
+            lineWidth: 1,
+            container: thisObject.container,
+            borderColor: UI_COLOR.RUSTED_RED,
+            castShadow: false,
+            backgroundColor: backgroundColor,
+            opacity: 1
+        }
+
+        roundedCornersBackground(params)
+
+        drawLabel(label, 1 / 2, 0, 0, 25, 15, thisObject.container, UI_COLOR.BLACK)
+    }
+
+    function drawScrollBar() {
+        if (thisObject.listItems.length > posibleVisibleListItems && posibleVisibleListItems > 0) {
+            let xOffset = 4
+            let barTopPoint = {
+                x: thisObject.container.frame.width - xOffset,
+                y: headerHeight
+            }
+            let barBottomPoint = {
+                x: thisObject.container.frame.width - xOffset,
+                y: thisObject.container.frame.height - footerHeight
+            }
+            let ratio = (posibleVisibleListItems * listItemHeight + (posibleVisibleListItems - 1) * itemSeparation) / (thisObject.listItems.length * listItemHeight + (thisObject.listItems.length - 1) * itemSeparation)
+            let handleHeight = posibleVisibleListItems * (listItemHeight * ratio) + (posibleVisibleListItems - 1) * itemSeparation * ratio
+            let handleTopPoint = {
+                x: thisObject.container.frame.width - xOffset,
+                y: headerHeight + (listItemHeight * ratio * (firstVisibleListItem - 1) + itemSeparation * ratio * (firstVisibleListItem - 1))
+            }
+            let handleBottomPoint = {
+                x: thisObject.container.frame.width - xOffset,
+                y: handleTopPoint.y + handleHeight
+            }
+            barTopPoint = thisObject.container.frame.frameThisPoint(barTopPoint)
+            barBottomPoint = thisObject.container.frame.frameThisPoint(barBottomPoint)
+            handleTopPoint = thisObject.container.frame.frameThisPoint(handleTopPoint)
+            handleBottomPoint = thisObject.container.frame.frameThisPoint(handleBottomPoint)
+
+            browserCanvasContext.beginPath()
+            browserCanvasContext.moveTo(barTopPoint.x, barTopPoint.y)
+            browserCanvasContext.lineTo(barBottomPoint.x, barBottomPoint.y)
+            browserCanvasContext.closePath()
+            browserCanvasContext.setLineDash([0, 0])
+            browserCanvasContext.lineWidth = 1
+            browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREY + ', ' + 1 + ')'
+            browserCanvasContext.stroke()
+
+            browserCanvasContext.beginPath()
+            browserCanvasContext.moveTo(handleTopPoint.x, handleTopPoint.y)
+            browserCanvasContext.lineTo(handleBottomPoint.x, handleBottomPoint.y)
+            browserCanvasContext.closePath()
+            browserCanvasContext.setLineDash([0, 0])
+            browserCanvasContext.lineWidth = 4
+            browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', ' + 1 + ')'
+            browserCanvasContext.stroke()
+        }
     }
-  }
 }

SideSpace/SidePanelTab.js

@@ -1,237 +1,237 @@
-function newSidePanelTab () {
-  const MODULE_NAME = 'Side Panel Tab'
-  let thisObject = {
-    pointerDirection: 'left',
-    container: undefined,
-    resize: resize,
-    physics: physics,
-    draw: draw,
-    getContainer: getContainer,
-    initialize: initialize
-  }
-
-  const TAB_WIDTH = 25
-  const TAB_HEIGHT = 60
-
-  let isInitialized = false
-  let animation = 'none'
-  let ORIGINAL_PARENT_POSITON
-  let xOffset = 0
-
-  thisObject.container = newContainer()
-  thisObject.container.name = MODULE_NAME
-  thisObject.container.initialize()
-  thisObject.container.isClickeable = true
-  thisObject.container.isDraggeable = false
-
-  return thisObject
-
-  function initialize () {
-    thisObject.container.frame.width = TAB_WIDTH
-    thisObject.container.frame.height = TAB_HEIGHT
-
-    ORIGINAL_PARENT_POSITON = thisObject.container.parentContainer.frame.position.x
-
-    thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
-    resize()
-    isInitialized = true
-  }
-
-  function resize () {
-    thisObject.container.frame.position.x = 0 + thisObject.container.parentContainer.frame.width
-    thisObject.container.frame.position.y = 69
-    setClosed()
-  }
-
-  function onMouseClick (event) {
-    if (thisObject.pointerDirection === 'left') {
-      animation = 'opening'
-      thisObject.container.eventHandler.raiseEvent('opening')
-    } else {
-      animation = 'closing'
-      thisObject.container.eventHandler.raiseEvent('closing')
-    }
-  }
-
-  function getContainer (point) {
-    let container
-    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-      return thisObject.container
-    } else {
-      return undefined
-    }
-  }
-
-  function physics () {
-    if (isInitialized === false) { return }
-    animate()
-  }
-
-  function draw () {
-    if (isInitialized === false) { return }
-    borders()
-    arrow()
-  }
-
-  function animate () {
-    const STEP = 50
-
-    if (animation === 'opening') {
-      xOffset = xOffset + STEP
-      thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset
-      if (xOffset >= thisObject.container.parentContainer.frame.width) {
-        setOpened()
-        thisObject.container.eventHandler.raiseEvent('opened')
-      }
+function newSidePanelTab() {
+    const MODULE_NAME = 'Side Panel Tab'
+    let thisObject = {
+        pointerDirection: 'left',
+        container: undefined,
+        resize: resize,
+        physics: physics,
+        draw: draw,
+        getContainer: getContainer,
+        initialize: initialize
     }
 
-    if (animation === 'closing') {
-      xOffset = xOffset - STEP
-      thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset
-      if (xOffset <= 0) {
+    const TAB_WIDTH = 25
+    const TAB_HEIGHT = 60
+
+    let isInitialized = false
+    let animation = 'none'
+    let ORIGINAL_PARENT_POSITON
+    let xOffset = 0
+
+    thisObject.container = newContainer()
+    thisObject.container.name = MODULE_NAME
+    thisObject.container.initialize()
+    thisObject.container.isClickeable = true
+    thisObject.container.isDraggeable = false
+
+    return thisObject
+
+    function initialize() {
+        thisObject.container.frame.width = TAB_WIDTH
+        thisObject.container.frame.height = TAB_HEIGHT
+
+        ORIGINAL_PARENT_POSITON = thisObject.container.parentContainer.frame.position.x
+
+        thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
+        resize()
+        isInitialized = true
+    }
+
+    function resize() {
+        thisObject.container.frame.position.x = 0 + thisObject.container.parentContainer.frame.width
+        thisObject.container.frame.position.y = 69
         setClosed()
-        thisObject.container.eventHandler.raiseEvent('closed')
-      }
-    }
-  }
-
-  function setOpened () {
-    animation = 'none'
-    xOffset = thisObject.container.parentContainer.frame.width
-    thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset
-    thisObject.container.parentContainer.status = 'visible'
-    thisObject.pointerDirection = 'right'
-  }
-  function setClosed () {
-    animation = 'none'
-    xOffset = 0
-    thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON
-    thisObject.container.parentContainer.status = 'hidden'
-    thisObject.pointerDirection = 'left'
-  }
-
-  function arrow () {
-    let point1
-    let point2
-    let point3
-
-    if (thisObject.pointerDirection === 'left') {
-      point1 = {
-        x: TAB_WIDTH * 3.5 / 10,
-        y: TAB_HEIGHT * 12.5 / 30
-      }
-
-      point2 = {
-        x: TAB_WIDTH * 6.5 / 10,
-        y: TAB_HEIGHT * 15 / 30
-      }
-
-      point3 = {
-        x: TAB_WIDTH * 3.5 / 10,
-        y: TAB_HEIGHT * 17.5 / 30
-      }
-    } else {
-      point1 = {
-        x: TAB_WIDTH * 6.5 / 10,
-        y: TAB_HEIGHT * 12.5 / 30
-      }
-
-      point2 = {
-        x: TAB_WIDTH * 3.5 / 10,
-        y: TAB_HEIGHT * 15 / 30
-      }
-
-      point3 = {
-        x: TAB_WIDTH * 6.5 / 10,
-        y: TAB_HEIGHT * 17.5 / 30
-      }
     }
 
-    point1 = thisObject.container.frame.frameThisPoint(point1)
-    point2 = thisObject.container.frame.frameThisPoint(point2)
-    point3 = thisObject.container.frame.frameThisPoint(point3)
-
-    browserCanvasContext.beginPath()
-    browserCanvasContext.moveTo(point1.x, point1.y)
-    browserCanvasContext.lineTo(point2.x, point2.y)
-    browserCanvasContext.lineTo(point3.x, point3.y)
-    browserCanvasContext.closePath()
-
-    let opacity = 1
-
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.GREY + ', ' + opacity + ''
-    browserCanvasContext.fill()
-  }
-
-  function borders () {
-    let point1
-    let point2
-    let point3
-    let point4
-
-    point1 = {
-      x: 0,
-      y: 0
+    function onMouseClick(event) {
+        if (thisObject.pointerDirection === 'left') {
+            animation = 'opening'
+            thisObject.container.eventHandler.raiseEvent('opening')
+        } else {
+            animation = 'closing'
+            thisObject.container.eventHandler.raiseEvent('closing')
+        }
     }
 
-    point2 = {
-      x: TAB_WIDTH,
-      y: 0
+    function getContainer(point) {
+        let container
+        if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+            return thisObject.container
+        } else {
+            return undefined
+        }
     }
 
-    point3 = {
-      x: TAB_WIDTH,
-      y: TAB_HEIGHT
+    function physics() {
+        if (isInitialized === false) { return }
+        animate()
     }
 
-    point4 = {
-      x: 0,
-      y: TAB_HEIGHT
+    function draw() {
+        if (isInitialized === false) { return }
+        borders()
+        arrow()
     }
 
-    point1 = thisObject.container.frame.frameThisPoint(point1)
-    point2 = thisObject.container.frame.frameThisPoint(point2)
-    point3 = thisObject.container.frame.frameThisPoint(point3)
-    point4 = thisObject.container.frame.frameThisPoint(point4)
+    function animate() {
+        const STEP = 50
 
-    let opacity
+        if (animation === 'opening') {
+            xOffset = xOffset + STEP
+            thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset
+            if (xOffset >= thisObject.container.parentContainer.frame.width) {
+                setOpened()
+                thisObject.container.eventHandler.raiseEvent('opened')
+            }
+        }
 
-    /* Shadow */
-
-    for (let i = 0; i <= 5; i++) {
-      opacity = 1 - (i / 100) - 0.93
-
-      browserCanvasContext.beginPath()
-      browserCanvasContext.moveTo(point1.x + i, point1.y + i)
-      browserCanvasContext.lineTo(point2.x + i, point2.y + i)
-      browserCanvasContext.lineTo(point3.x + i, point3.y + i)
-      browserCanvasContext.lineTo(point4.x + i, point4.y + i)
-      browserCanvasContext.lineTo(point1.x + i, point1.y + i)
-      browserCanvasContext.closePath()
-
-      browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + opacity + ''
-      browserCanvasContext.lineWidth = 1
-      browserCanvasContext.stroke()
+        if (animation === 'closing') {
+            xOffset = xOffset - STEP
+            thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset
+            if (xOffset <= 0) {
+                setClosed()
+                thisObject.container.eventHandler.raiseEvent('closed')
+            }
+        }
     }
 
-    /* Background and Border */
+    function setOpened() {
+        animation = 'none'
+        xOffset = thisObject.container.parentContainer.frame.width
+        thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset
+        thisObject.container.parentContainer.status = 'visible'
+        thisObject.pointerDirection = 'right'
+    }
+    function setClosed() {
+        animation = 'none'
+        xOffset = 0
+        thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON
+        thisObject.container.parentContainer.status = 'hidden'
+        thisObject.pointerDirection = 'left'
+    }
 
-    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.lineTo(point4.x, point4.y)
-    browserCanvasContext.lineTo(point1.x, point1.y)
-    browserCanvasContext.closePath()
+    function arrow() {
+        let point1
+        let point2
+        let point3
 
-    opacity = 1
+        if (thisObject.pointerDirection === 'left') {
+            point1 = {
+                x: TAB_WIDTH * 3.5 / 10,
+                y: TAB_HEIGHT * 12.5 / 30
+            }
 
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ''
-    browserCanvasContext.fill()
+            point2 = {
+                x: TAB_WIDTH * 6.5 / 10,
+                y: TAB_HEIGHT * 15 / 30
+            }
 
-    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREY + ', ' + opacity + ''
-    browserCanvasContext.lineWidth = 0.3
-    browserCanvasContext.stroke()
-  }
+            point3 = {
+                x: TAB_WIDTH * 3.5 / 10,
+                y: TAB_HEIGHT * 17.5 / 30
+            }
+        } else {
+            point1 = {
+                x: TAB_WIDTH * 6.5 / 10,
+                y: TAB_HEIGHT * 12.5 / 30
+            }
+
+            point2 = {
+                x: TAB_WIDTH * 3.5 / 10,
+                y: TAB_HEIGHT * 15 / 30
+            }
+
+            point3 = {
+                x: TAB_WIDTH * 6.5 / 10,
+                y: TAB_HEIGHT * 17.5 / 30
+            }
+        }
+
+        point1 = thisObject.container.frame.frameThisPoint(point1)
+        point2 = thisObject.container.frame.frameThisPoint(point2)
+        point3 = thisObject.container.frame.frameThisPoint(point3)
+
+        browserCanvasContext.beginPath()
+        browserCanvasContext.moveTo(point1.x, point1.y)
+        browserCanvasContext.lineTo(point2.x, point2.y)
+        browserCanvasContext.lineTo(point3.x, point3.y)
+        browserCanvasContext.closePath()
+
+        let opacity = 1
+
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.GREY + ', ' + opacity + ''
+        browserCanvasContext.fill()
+    }
+
+    function borders() {
+        let point1
+        let point2
+        let point3
+        let point4
+
+        point1 = {
+            x: 0,
+            y: 0
+        }
+
+        point2 = {
+            x: TAB_WIDTH,
+            y: 0
+        }
+
+        point3 = {
+            x: TAB_WIDTH,
+            y: TAB_HEIGHT
+        }
+
+        point4 = {
+            x: 0,
+            y: TAB_HEIGHT
+        }
+
+        point1 = thisObject.container.frame.frameThisPoint(point1)
+        point2 = thisObject.container.frame.frameThisPoint(point2)
+        point3 = thisObject.container.frame.frameThisPoint(point3)
+        point4 = thisObject.container.frame.frameThisPoint(point4)
+
+        let opacity
+
+        /* Shadow */
+
+        for (let i = 0; i <= 5; i++) {
+            opacity = 1 - (i / 100) - 0.93
+
+            browserCanvasContext.beginPath()
+            browserCanvasContext.moveTo(point1.x + i, point1.y + i)
+            browserCanvasContext.lineTo(point2.x + i, point2.y + i)
+            browserCanvasContext.lineTo(point3.x + i, point3.y + i)
+            browserCanvasContext.lineTo(point4.x + i, point4.y + i)
+            browserCanvasContext.lineTo(point1.x + i, point1.y + i)
+            browserCanvasContext.closePath()
+
+            browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + opacity + ''
+            browserCanvasContext.lineWidth = 1
+            browserCanvasContext.stroke()
+        }
+
+        /* Background and Border */
+
+        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.lineTo(point4.x, point4.y)
+        browserCanvasContext.lineTo(point1.x, point1.y)
+        browserCanvasContext.closePath()
+
+        opacity = 1
+
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ''
+        browserCanvasContext.fill()
+
+        browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREY + ', ' + opacity + ''
+        browserCanvasContext.lineWidth = 0.3
+        browserCanvasContext.stroke()
+    }
 }

Spaces/ChartingSpace.js

@@ -6,441 +6,441 @@ changes, then all charts in it are replotted with the corresponging data.
 
 */
 
-function newChartingSpace () {
-  const MODULE_NAME = 'Charting Space'
-  const ERROR_LOG = true
-  const logger = newWebDebugLog()
-  logger.fileName = MODULE_NAME
+function newChartingSpace() {
+    const MODULE_NAME = 'Charting Space'
+    const ERROR_LOG = true
+    const logger = newWebDebugLog()
+    logger.fileName = MODULE_NAME
 
-  let thisObject = {
-    visible: false,
-    container: undefined,
-    inViewport: undefined,
-    timeMachines: undefined,
-    viewport: undefined,
-    payload: undefined,
-    onKeyPressed: onKeyPressed,
-    reset: reset,
-    oneScreenUp: oneScreenUp,
-    oneScreenDown: oneScreenDown,
-    oneScreenLeft: oneScreenLeft,
-    oneScreenRight: oneScreenRight,
-    fitFunction: fitFunction,
-    isThisPointVisible: isThisPointVisible,
-    physics: physics,
-    draw: draw,
-    getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
-    initialize: initialize,
-    finalize: finalize
-  }
+    let thisObject = {
+        visible: false,
+        container: undefined,
+        inViewport: undefined,
+        timeMachines: undefined,
+        viewport: undefined,
+        payload: undefined,
+        onKeyPressed: onKeyPressed,
+        reset: reset,
+        oneScreenUp: oneScreenUp,
+        oneScreenDown: oneScreenDown,
+        oneScreenLeft: oneScreenLeft,
+        oneScreenRight: oneScreenRight,
+        fitFunction: fitFunction,
+        isThisPointVisible: isThisPointVisible,
+        physics: physics,
+        draw: draw,
+        getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
+        initialize: initialize,
+        finalize: finalize
+    }
 
-  let canvasBrowserResizedEventSubscriptionId
-  let timeMachinesMap
-  let syncWithDesignerLoop
+    let canvasBrowserResizedEventSubscriptionId
+    let timeMachinesMap
+    let syncWithDesignerLoop
 
-  const PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT = 25
+    const PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT = 25
 
-  initialSetup()
-
-  let isInitialized = false
-
-  return thisObject
-
-  function reset () {
-    finalize()
     initialSetup()
-    isInitialized = false
-    initialize()
-  }
 
-  function initialSetup () {
-    thisObject.timeMachines = []
-    thisObject.visible = true
-    timeMachinesMap = new Map()
-    syncWithDesignerLoop = 0
-    thisObject.inViewport = new Map()
+    let isInitialized = false
 
-    thisObject.container = newContainer()
-    thisObject.container.initialize(MODULE_NAME)
+    return thisObject
 
-    thisObject.container.isDraggeable = false
-    thisObject.container.isWheelable = false
-  }
-
-  function finalize () {
-    for (let i = 0; i < thisObject.timeMachines.length; i++) {
-      let timeMachine = thisObject.timeMachines[i]
-      timeMachine.finalize()
+    function reset() {
+        finalize()
+        initialSetup()
+        isInitialized = false
+        initialize()
     }
 
-    thisObject.inViewport = undefined
-    thisObject.timeMachines = undefined
-    timeMachinesMap = undefined
+    function initialSetup() {
+        thisObject.timeMachines = []
+        thisObject.visible = true
+        timeMachinesMap = new Map()
+        syncWithDesignerLoop = 0
+        thisObject.inViewport = new Map()
 
-    thisObject.container.eventHandler.stopListening(canvasBrowserResizedEventSubscriptionId)
+        thisObject.container = newContainer()
+        thisObject.container.initialize(MODULE_NAME)
 
-    thisObject.container.finalize()
-    thisObject.container = undefined
-
-    if (thisObject.viewport !== undefined) {
-      thisObject.viewport.finalize()
-      thisObject.viewport = undefined
+        thisObject.container.isDraggeable = false
+        thisObject.container.isWheelable = false
     }
 
-    thisObject.payload = undefined
-  }
-
-  function initialize () {
-    if (isInitialized === true) { return }
-    if (canvas.designSpace === undefined) { return }
-    if (canvas.designSpace.workspace === undefined) { return }
-
-    let rootNodes = canvas.designSpace.workspace.workspaceNode.rootNodes
-    for (let i = 0; i < rootNodes.length; i++) {
-      let rootNode = rootNodes[i]
-      if (rootNode !== null) {
-        if (rootNode.type === 'Charting Space') {
-          thisObject.payload = rootNode.payload
+    function finalize() {
+        for (let i = 0; i < thisObject.timeMachines.length; i++) {
+            let timeMachine = thisObject.timeMachines[i]
+            timeMachine.finalize()
         }
-      }
+
+        thisObject.inViewport = undefined
+        thisObject.timeMachines = undefined
+        timeMachinesMap = undefined
+
+        thisObject.container.eventHandler.stopListening(canvasBrowserResizedEventSubscriptionId)
+
+        thisObject.container.finalize()
+        thisObject.container = undefined
+
+        if (thisObject.viewport !== undefined) {
+            thisObject.viewport.finalize()
+            thisObject.viewport = undefined
+        }
+
+        thisObject.payload = undefined
     }
 
-    if (thisObject.payload === undefined) {
-      // if (ERROR_LOG === true) { logger.write('[WARN] initialize -> There must exist a Charting Space at the Design Space in order to enable Charts. PLease create one and refreash your browser. ') }
-      return
-    }
+    function initialize() {
+        if (isInitialized === true) { return }
+        if (canvas.designSpace === undefined) { return }
+        if (canvas.designSpace.workspace === undefined) { return }
 
-    thisObject.viewport = newViewport()
-    if (thisObject.payload.node.viewport === undefined) {
-      if (ERROR_LOG === true) { logger.write('[WARN] initialize -> There must exist a Viewport node attached to the Charting Space node in order for the Viewport save its properties. ') }
-      return
-    } else {
-      thisObject.viewport.payload = thisObject.payload.node.viewport.payload
-    }
+        let rootNodes = canvas.designSpace.workspace.workspaceNode.rootNodes
+        for (let i = 0; i < rootNodes.length; i++) {
+            let rootNode = rootNodes[i]
+            if (rootNode !== null) {
+                if (rootNode.type === 'Charting Space') {
+                    thisObject.payload = rootNode.payload
+                }
+            }
+        }
 
-    thisObject.viewport.initialize()
+        if (thisObject.payload === undefined) {
+            // if (ERROR_LOG === true) { logger.write('[WARN] initialize -> There must exist a Charting Space at the Design Space in order to enable Charts. PLease create one and refreash your browser. ') }
+            return
+        }
 
-    canvasBrowserResizedEventSubscriptionId = canvas.eventHandler.listenToEvent('Browser Resized', resize)
-
-    isInitialized = true
-  }
-
-  function getContainer (point, purpose) {
-    if (thisObject.visible !== true) { return }
-    if (thisObject.viewport === undefined) { return }
-    if (thisObject.viewport.isThisPointInViewport(point) === false) { return }
-
-    let container
-
-    /* This first step is not actually to get the container but to allow things to be turned off in case there is a switch of focus from one time machine to another */
-    for (let i = 0; i < thisObject.timeMachines.length; i++) {
-      container = thisObject.timeMachines[i].container
-      if (purpose === GET_CONTAINER_PURPOSE.MOUSE_OVER) {
-        container.eventHandler.raiseEvent('onMouseNotOver')
-      }
-    }
-
-    /*
-    Now we see which is the inner most container that has it.
-    In this case we will ask all the time machines even if one of them already returned a matching container.
-    This will help the others know they are not on ofcus
-    */
-    let containerFound
-    for (let i = 0; i < thisObject.timeMachines.length; i++) {
-      container = thisObject.timeMachines[i].getContainer(point, purpose)
-      if (container !== undefined) {
-        if (purpose !== undefined) {
-          if (containerFound === undefined) {
-            containerFound = container
-          }
+        thisObject.viewport = newViewport()
+        if (thisObject.payload.node.viewport === undefined) {
+            if (ERROR_LOG === true) { logger.write('[WARN] initialize -> There must exist a Viewport node attached to the Charting Space node in order for the Viewport save its properties. ') }
+            return
         } else {
-          if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-            if (containerFound === undefined) {
-              containerFound = container
-            }
-          }
+            thisObject.viewport.payload = thisObject.payload.node.viewport.payload
         }
-      }
-    }
-    if (containerFound !== undefined) {
-      containerFound.space = 'Charting Space'
-      return containerFound
+
+        thisObject.viewport.initialize()
+
+        canvasBrowserResizedEventSubscriptionId = canvas.eventHandler.listenToEvent('Browser Resized', resize)
+
+        isInitialized = true
     }
 
-    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-      thisObject.container.space = 'Charting Space'
-      return thisObject.container
-    } else {
-      return undefined
-    }
-  }
+    function getContainer(point, purpose) {
+        if (thisObject.visible !== true) { return }
+        if (thisObject.viewport === undefined) { return }
+        if (thisObject.viewport.isThisPointInViewport(point) === false) { return }
 
-  function resize () {
-    thisObject.viewport.resize()
-    thisObject.container.frame.width = browserCanvas.width
-    thisObject.container.frame.height = COCKPIT_SPACE_POSITION
-  }
+        let container
 
-  function oneScreenUp () {
-    if (thisObject.visible === false) { return }
-    let displaceVector = {
-      x: 0,
-      y: browserCanvas.height * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100
-    }
-
-    canvas.chartingSpace.viewport.displace(displaceVector)
-  }
-
-  function oneScreenDown () {
-    if (thisObject.visible === false) { return }
-    let displaceVector = {
-      x: 0,
-      y: -browserCanvas.height * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100
-    }
-
-    canvas.chartingSpace.viewport.displace(displaceVector)
-  }
-
-  function oneScreenLeft () {
-    if (thisObject.visible === false) { return }
-    let displaceVector = {
-      x: browserCanvas.width * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100,
-      y: 0
-    }
-
-    canvas.chartingSpace.viewport.displace(displaceVector, true)
-  }
-
-  function oneScreenRight () {
-    if (thisObject.visible === false) { return }
-    let displaceVector = {
-      x: -browserCanvas.width * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100,
-      y: 0
-    }
-
-    canvas.chartingSpace.viewport.displace(displaceVector, true)
-  }
-
-  function fitFunction (point, fullVisible) {
-       /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */
-
-    let returnPoint = {
-      x: point.x,
-      y: point.y
-    }
-
-    if (point.x > browserCanvas.width) {
-      returnPoint.x = browserCanvas.width
-    }
-
-    if (point.x < 0) {
-      returnPoint.x = 0
-    }
-
-    if (fullVisible === true) {
-      if (point.y > COCKPIT_SPACE_POSITION) {
-        returnPoint.y = COCKPIT_SPACE_POSITION
-      }
-    } else {
-      if (point.y > COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT / 2) {
-        returnPoint.y = COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT / 2
-      }
-    }
-
-    if (point.y < TOP_SPACE_HEIGHT) {
-      returnPoint.y = TOP_SPACE_HEIGHT
-    }
-
-    return returnPoint
-  }
-
-  function isThisPointVisible (point) {
-    if (point.x > browserCanvas.width) {
-      return false
-    }
-
-    if (point.x < 0) {
-      return false
-    }
-
-    if (point.y > COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT / 2) {
-      return false
-    }
-
-    if (point.y < 0) {
-      return false
-    }
-
-    return true
-  }
-
-  function physics () {
-    initialize()
-    thisObjectPhysics()
-    if (thisObject.visible !== true) { return }
-    if (thisObject.viewport !== undefined) {
-      thisObject.viewport.physics()
-    }
-    childrenPhysics()
-    syncWithDesigner()
-  }
-
-  function onKeyPressed (event) {
-    if (thisObject.visible !== true) { return }
-    for (let j = 0; j < thisObject.timeMachines.length; j++) {
-      let timeMachine = thisObject.timeMachines[j]
-      if (timeMachine.onFocus === true) {
-        timeMachine.onKeyPressed(event)
-      }
-    }
-  }
-
-  function syncWithDesigner () {
-    if (thisObject.payload === undefined) { return }
-    if (thisObject.payload.node === undefined) { return }
-    syncWithDesignerLoop = syncWithDesignerLoop + 0.00000000001
-
-    if (thisObject.payload.node.dashboards !== undefined) {
-      for (let i = 0; i < thisObject.payload.node.dashboards.length; i++) {
-        let dashboard = thisObject.payload.node.dashboards[i]
-        if (dashboard.timeMachines !== undefined) {
-          for (let j = 0; j < dashboard.timeMachines.length; j++) {
-            let node = dashboard.timeMachines[j]
-            let timeMachine = timeMachinesMap.get(node.id)
-            if (timeMachine === undefined) {
-              /* The time machine node is new, thus we need to initialize a new timeMachine */
-              initializeTimeMachine(node, syncWithDesignerLoop)
-            } else {
-              /* The time machine already exists, we tag it as existing at the current loop. */
-              timeMachine.syncWithDesignerLoop = syncWithDesignerLoop
+        /* This first step is not actually to get the container but to allow things to be turned off in case there is a switch of focus from one time machine to another */
+        for (let i = 0; i < thisObject.timeMachines.length; i++) {
+            container = thisObject.timeMachines[i].container
+            if (purpose === GET_CONTAINER_PURPOSE.MOUSE_OVER) {
+                container.eventHandler.raiseEvent('onMouseNotOver')
             }
-          }
         }
-      }
+
+        /*
+        Now we see which is the inner most container that has it.
+        In this case we will ask all the time machines even if one of them already returned a matching container.
+        This will help the others know they are not on ofcus
+        */
+        let containerFound
+        for (let i = 0; i < thisObject.timeMachines.length; i++) {
+            container = thisObject.timeMachines[i].getContainer(point, purpose)
+            if (container !== undefined) {
+                if (purpose !== undefined) {
+                    if (containerFound === undefined) {
+                        containerFound = container
+                    }
+                } else {
+                    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+                        if (containerFound === undefined) {
+                            containerFound = container
+                        }
+                    }
+                }
+            }
+        }
+        if (containerFound !== undefined) {
+            containerFound.space = 'Charting Space'
+            return containerFound
+        }
+
+        if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+            thisObject.container.space = 'Charting Space'
+            return thisObject.container
+        } else {
+            return undefined
+        }
     }
 
-    /* We check all the timeMachines we have to see if we need to remove any of them */
-    for (let i = 0; i < thisObject.timeMachines.length; i++) {
-      let timeMachine = thisObject.timeMachines[i]
-      if (timeMachine.syncWithDesignerLoop < syncWithDesignerLoop) {
-        /* Must be removed */
-        timeMachine.finalize()
-        timeMachinesMap.delete(timeMachine.nodeId)
-        thisObject.timeMachines.splice(i, 1)
-        /* We remove one at the time */
-        return
-      }
+    function resize() {
+        thisObject.viewport.resize()
+        thisObject.container.frame.width = browserCanvas.width
+        thisObject.container.frame.height = COCKPIT_SPACE_POSITION
     }
 
-    function initializeTimeMachine (node, syncWithDesignerLoop) {
-      if (node.payload === undefined) { return } // not ready to consider this Time Machine
-      if (node.payload.uiObject === undefined) { return }
+    function oneScreenUp() {
+        if (thisObject.visible === false) { return }
+        let displaceVector = {
+            x: 0,
+            y: browserCanvas.height * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100
+        }
 
-      let timeMachine = newTimeMachine()
-      timeMachine.syncWithDesignerLoop = syncWithDesignerLoop
-      timeMachine.payload = node.payload
-      timeMachine.nodeId = node.id
+        canvas.chartingSpace.viewport.displace(displaceVector)
+    }
 
-      timeMachinesMap.set(node.id, timeMachine)
-      timeMachine.payload.uiObject.setValue('Loading...')
+    function oneScreenDown() {
+        if (thisObject.visible === false) { return }
+        let displaceVector = {
+            x: 0,
+            y: -browserCanvas.height * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100
+        }
 
-      /* Setting up the new time machine. */
-      timeMachine.container.frame.position.x = browserCanvas.width / 2 - browserCanvas.width / TIME_MACHINE_WIDTH / 2
-      timeMachine.container.frame.position.y = browserCanvas.height / 2 - (browserCanvas.height - TOP_SPACE_HEIGHT - COCKPIT_SPACE_HEIGHT) / TIME_MACHINE_HEIGHT / 2
-      timeMachine.initialize(onTimeMachineInitialized)
+        canvas.chartingSpace.viewport.displace(displaceVector)
+    }
+
+    function oneScreenLeft() {
+        if (thisObject.visible === false) { return }
+        let displaceVector = {
+            x: browserCanvas.width * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100,
+            y: 0
+        }
+
+        canvas.chartingSpace.viewport.displace(displaceVector, true)
+    }
+
+    function oneScreenRight() {
+        if (thisObject.visible === false) { return }
+        let displaceVector = {
+            x: -browserCanvas.width * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100,
+            y: 0
+        }
+
+        canvas.chartingSpace.viewport.displace(displaceVector, true)
+    }
+
+    function fitFunction(point, fullVisible) {
+        /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */
+
+        let returnPoint = {
+            x: point.x,
+            y: point.y
+        }
+
+        if (point.x > browserCanvas.width) {
+            returnPoint.x = browserCanvas.width
+        }
+
+        if (point.x < 0) {
+            returnPoint.x = 0
+        }
+
+        if (fullVisible === true) {
+            if (point.y > COCKPIT_SPACE_POSITION) {
+                returnPoint.y = COCKPIT_SPACE_POSITION
+            }
+        } else {
+            if (point.y > COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT / 2) {
+                returnPoint.y = COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT / 2
+            }
+        }
+
+        if (point.y < TOP_SPACE_HEIGHT) {
+            returnPoint.y = TOP_SPACE_HEIGHT
+        }
+
+        return returnPoint
+    }
+
+    function isThisPointVisible(point) {
+        if (point.x > browserCanvas.width) {
+            return false
+        }
+
+        if (point.x < 0) {
+            return false
+        }
+
+        if (point.y > COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT / 2) {
+            return false
+        }
+
+        if (point.y < 0) {
+            return false
+        }
+
+        return true
+    }
+
+    function physics() {
+        initialize()
+        thisObjectPhysics()
+        if (thisObject.visible !== true) { return }
+        if (thisObject.viewport !== undefined) {
+            thisObject.viewport.physics()
+        }
+        childrenPhysics()
+        syncWithDesigner()
+    }
+
+    function onKeyPressed(event) {
+        if (thisObject.visible !== true) { return }
+        for (let j = 0; j < thisObject.timeMachines.length; j++) {
+            let timeMachine = thisObject.timeMachines[j]
+            if (timeMachine.onFocus === true) {
+                timeMachine.onKeyPressed(event)
+            }
+        }
+    }
+
+    function syncWithDesigner() {
+        if (thisObject.payload === undefined) { return }
+        if (thisObject.payload.node === undefined) { return }
+        syncWithDesignerLoop = syncWithDesignerLoop + 0.00000000001
+
+        if (thisObject.payload.node.dashboards !== undefined) {
+            for (let i = 0; i < thisObject.payload.node.dashboards.length; i++) {
+                let dashboard = thisObject.payload.node.dashboards[i]
+                if (dashboard.timeMachines !== undefined) {
+                    for (let j = 0; j < dashboard.timeMachines.length; j++) {
+                        let node = dashboard.timeMachines[j]
+                        let timeMachine = timeMachinesMap.get(node.id)
+                        if (timeMachine === undefined) {
+                            /* The time machine node is new, thus we need to initialize a new timeMachine */
+                            initializeTimeMachine(node, syncWithDesignerLoop)
+                        } else {
+                            /* The time machine already exists, we tag it as existing at the current loop. */
+                            timeMachine.syncWithDesignerLoop = syncWithDesignerLoop
+                        }
+                    }
+                }
+            }
+        }
+
+        /* We check all the timeMachines we have to see if we need to remove any of them */
+        for (let i = 0; i < thisObject.timeMachines.length; i++) {
+            let timeMachine = thisObject.timeMachines[i]
+            if (timeMachine.syncWithDesignerLoop < syncWithDesignerLoop) {
+                /* Must be removed */
+                timeMachine.finalize()
+                timeMachinesMap.delete(timeMachine.nodeId)
+                thisObject.timeMachines.splice(i, 1)
+                /* We remove one at the time */
+                return
+            }
+        }
+
+        function initializeTimeMachine(node, syncWithDesignerLoop) {
+            if (node.payload === undefined) { return } // not ready to consider this Time Machine
+            if (node.payload.uiObject === undefined) { return }
+
+            let timeMachine = newTimeMachine()
+            timeMachine.syncWithDesignerLoop = syncWithDesignerLoop
+            timeMachine.payload = node.payload
+            timeMachine.nodeId = node.id
+
+            timeMachinesMap.set(node.id, timeMachine)
+            timeMachine.payload.uiObject.setValue('Loading...')
+
+            /* Setting up the new time machine. */
+            timeMachine.container.frame.position.x = browserCanvas.width / 2 - browserCanvas.width / TIME_MACHINE_WIDTH / 2
+            timeMachine.container.frame.position.y = browserCanvas.height / 2 - (browserCanvas.height - TOP_SPACE_HEIGHT - COCKPIT_SPACE_HEIGHT) / TIME_MACHINE_HEIGHT / 2
+            timeMachine.initialize(onTimeMachineInitialized)
+
+            function onTimeMachineInitialized() {
+                thisObject.timeMachines.push(timeMachine)
+                timeMachine.payload.uiObject.setValue('')
+                if (canvas.chartingSpace.viewport !== undefined) {
+                    canvas.chartingSpace.viewport.raiseEvents() // These events will impacts on objects just initialized.
+                }
+            }
+        }
+    }
+
+    function thisObjectPhysics() {
+        thisObject.container.frame.height = COCKPIT_SPACE_POSITION
+
+        if (thisObject.container.frame.height <= TOP_SPACE_HEIGHT) {
+            thisObject.visible = false
+            if (thisObject.viewport !== undefined) {
+                thisObject.viewport.visible = false
+            }
+        } else {
+            thisObject.visible = true
+            if (thisObject.viewport !== undefined) {
+                thisObject.viewport.visible = true
+            }
+        }
 
-      function onTimeMachineInitialized () {
-        thisObject.timeMachines.push(timeMachine)
-        timeMachine.payload.uiObject.setValue('')
         if (canvas.chartingSpace.viewport !== undefined) {
-          canvas.chartingSpace.viewport.raiseEvents() // These events will impacts on objects just initialized.
+            canvas.chartingSpace.viewport.resize()
         }
-      }
-    }
-  }
-
-  function thisObjectPhysics () {
-    thisObject.container.frame.height = COCKPIT_SPACE_POSITION
-
-    if (thisObject.container.frame.height <= TOP_SPACE_HEIGHT) {
-      thisObject.visible = false
-      if (thisObject.viewport !== undefined) {
-        thisObject.viewport.visible = false
-      }
-    } else {
-      thisObject.visible = true
-      if (thisObject.viewport !== undefined) {
-        thisObject.viewport.visible = true
-      }
     }
 
-    if (canvas.chartingSpace.viewport !== undefined) {
-      canvas.chartingSpace.viewport.resize()
-    }
-  }
+    function childrenPhysics() {
+        for (let i = 0; i < thisObject.timeMachines.length; i++) {
+            let timeMachine = thisObject.timeMachines[i]
+            if (timeMachine.payload.node === undefined) {
+                continue
+            }
 
-  function childrenPhysics () {
-    for (let i = 0; i < thisObject.timeMachines.length; i++) {
-      let timeMachine = thisObject.timeMachines[i]
-      if (timeMachine.payload.node === undefined) {
-        continue
-      }
-
-      if (timeMachine.container.frame.isInViewPort()) {
-        thisObject.inViewport.set(timeMachine.payload.node.id, timeMachine)
-      } else {
-        thisObject.inViewport.delete(timeMachine.payload.node.id)
-      }
-      timeMachine.physics()
-    }
-  }
-
-  function drawBackground () {
-    if (thisObject.visible === false) { return }
-    drawSpaceBackground()
-
-    for (let i = 0; i < thisObject.timeMachines.length; i++) {
-      let timeMachine = thisObject.timeMachines[thisObject.timeMachines.length - i - 1]
-      timeMachine.drawBackground()
-    }
-  }
-
-  function draw () {
-    if (canWeDraw === false) { return }
-    if (thisObject.visible === false) { return }
-    drawBackground()
-
-    for (let i = 0; i < thisObject.timeMachines.length; i++) {
-      let timeMachine = thisObject.timeMachines[thisObject.timeMachines.length - i - 1]
-      timeMachine.draw()
+            if (timeMachine.container.frame.isInViewPort()) {
+                thisObject.inViewport.set(timeMachine.payload.node.id, timeMachine)
+            } else {
+                thisObject.inViewport.delete(timeMachine.payload.node.id)
+            }
+            timeMachine.physics()
+        }
     }
 
-    drawForeground()
-  }
+    function drawBackground() {
+        if (thisObject.visible === false) { return }
+        drawSpaceBackground()
 
-  function drawForeground () {
-    for (let i = 0; i < thisObject.timeMachines.length; i++) {
-      let timeMachine = thisObject.timeMachines[thisObject.timeMachines.length - i - 1]
-      timeMachine.drawForeground()
-    }
-  }
-
-  function drawSpaceBackground () {
-    let opacity = '1'
-    let fromPoint = {
-      x: 0,
-      y: 0
+        for (let i = 0; i < thisObject.timeMachines.length; i++) {
+            let timeMachine = thisObject.timeMachines[thisObject.timeMachines.length - i - 1]
+            timeMachine.drawBackground()
+        }
     }
 
-    let toPoint = {
-      x: browserCanvas.width,
-      y: COCKPIT_SPACE_POSITION
+    function draw() {
+        if (canWeDraw === false) { return }
+        if (thisObject.visible === false) { return }
+        drawBackground()
+
+        for (let i = 0; i < thisObject.timeMachines.length; i++) {
+            let timeMachine = thisObject.timeMachines[thisObject.timeMachines.length - i - 1]
+            timeMachine.draw()
+        }
+
+        drawForeground()
     }
 
-    browserCanvasContext.beginPath()
-    browserCanvasContext.rect(fromPoint.x, fromPoint.y, toPoint.x - fromPoint.x, toPoint.y - fromPoint.y)
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')'
-    browserCanvasContext.closePath()
-    browserCanvasContext.fill()
-  }
+    function drawForeground() {
+        for (let i = 0; i < thisObject.timeMachines.length; i++) {
+            let timeMachine = thisObject.timeMachines[thisObject.timeMachines.length - i - 1]
+            timeMachine.drawForeground()
+        }
+    }
+
+    function drawSpaceBackground() {
+        let opacity = '1'
+        let fromPoint = {
+            x: 0,
+            y: 0
+        }
+
+        let toPoint = {
+            x: browserCanvas.width,
+            y: COCKPIT_SPACE_POSITION
+        }
+
+        browserCanvasContext.beginPath()
+        browserCanvasContext.rect(fromPoint.x, fromPoint.y, toPoint.x - fromPoint.x, toPoint.y - fromPoint.y)
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')'
+        browserCanvasContext.closePath()
+        browserCanvasContext.fill()
+    }
 }

Spaces/CockpitSpace.js

@@ -1,370 +1,370 @@
 
- function newCockpitSpace () {
-   const MODULE_NAME = 'CockpitSpace'
-   const STATUS_TYPES = {
-     ALL_GOOD: 1,
-     WARNING: 2
-   }
-   let thisObject = {
-     container: undefined,
-     status: 'BOTTOM',
-     fullscreen: undefined,
-     statusTypes: STATUS_TYPES,
-     setStatus: setStatus,
-     toTop: toTop,
-     toBottom: toBottom,
-     toMiddle: toMiddle,
-     moveUp: moveUp,
-     moveDown: moveDown,
-     draw: draw,
-     physics: physics,
-     getContainer: getContainer,
-     finalize: finalize,
-     initialize: initialize,
-     initializePosition: initializePosition
-   }
+function newCockpitSpace() {
+    const MODULE_NAME = 'CockpitSpace'
+    const STATUS_TYPES = {
+        ALL_GOOD: 1,
+        WARNING: 2
+    }
+    let thisObject = {
+        container: undefined,
+        status: 'BOTTOM',
+        fullscreen: undefined,
+        statusTypes: STATUS_TYPES,
+        setStatus: setStatus,
+        toTop: toTop,
+        toBottom: toBottom,
+        toMiddle: toMiddle,
+        moveUp: moveUp,
+        moveDown: moveDown,
+        draw: draw,
+        physics: physics,
+        getContainer: getContainer,
+        finalize: finalize,
+        initialize: initialize,
+        initializePosition: initializePosition
+    }
 
-   thisObject.container = newContainer()
-   thisObject.container.initialize(MODULE_NAME)
-   thisObject.container.isClickeable = false
-   thisObject.container.detectMouseOver = true
-   thisObject.container.isDraggeable = true
-   thisObject.container.notDraggingOnX = true
+    thisObject.container = newContainer()
+    thisObject.container.initialize(MODULE_NAME)
+    thisObject.container.isClickeable = false
+    thisObject.container.detectMouseOver = true
+    thisObject.container.isDraggeable = true
+    thisObject.container.notDraggingOnX = true
 
-   controlsMap = new Map()
-   resize()
+    controlsMap = new Map()
+    resize()
 
-   let selfMouseClickEventSubscriptionId
-   let canvasBrowserResizedEventSubscriptionId
+    let selfMouseClickEventSubscriptionId
+    let canvasBrowserResizedEventSubscriptionId
 
-   let statusCounter = 0
-   let statusText
-   let statusType
-   let isInitilized = false
+    let statusCounter = 0
+    let statusText
+    let statusType
+    let isInitilized = false
 
-   return thisObject
+    return thisObject
 
-   function finalize () {
-     thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId)
-     thisObject.container.eventHandler.stopListening(canvasBrowserResizedEventSubscriptionId)
+    function finalize() {
+        thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId)
+        thisObject.container.eventHandler.stopListening(canvasBrowserResizedEventSubscriptionId)
 
-     thisObject.container.finalize()
-     thisObject.container = undefined
-     thisObject.fullscreen = undefined
-   }
+        thisObject.container.finalize()
+        thisObject.container = undefined
+        thisObject.fullscreen = undefined
+    }
 
-   function initialize () {
-     canvasBrowserResizedEventSubscriptionId = canvas.eventHandler.listenToEvent('Browser Resized', resize)
-     selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
+    function initialize() {
+        canvasBrowserResizedEventSubscriptionId = canvas.eventHandler.listenToEvent('Browser Resized', resize)
+        selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
 
-     thisObject.fullscreen = newFullScreen()
-     thisObject.fullscreen.container.connectToParent(thisObject.container)
-     thisObject.fullscreen.initialize()
-   }
+        thisObject.fullscreen = newFullScreen()
+        thisObject.fullscreen.container.connectToParent(thisObject.container)
+        thisObject.fullscreen.initialize()
+    }
 
-   function initializePosition () {
-     thisObject.container.frame.position.x = 0
+    function initializePosition() {
+        thisObject.container.frame.position.x = 0
 
-     let INITIAL_POSITION
-     if (canvas.designSpace.workspace.enabled === true) {
-       let localStorage = window.localStorage.getItem(MODULE_NAME)
-       if (localStorage !== null) {
-         storage = JSON.parse(localStorage)
-         thisObject.container.frame.position.y = storage.spacePosition
-       } else {
-         INITIAL_POSITION = 55
-         thisObject.container.frame.position.y = browserCanvas.height * INITIAL_POSITION / 100 - COCKPIT_SPACE_HEIGHT
-       }
-     } else {
-       INITIAL_POSITION = 100
-       thisObject.container.frame.position.y = browserCanvas.height * INITIAL_POSITION / 100 - COCKPIT_SPACE_HEIGHT
-     }
-     isInitilized = true
-   }
+        let INITIAL_POSITION
+        if (canvas.designSpace.workspace.enabled === true) {
+            let localStorage = window.localStorage.getItem(MODULE_NAME)
+            if (localStorage !== null) {
+                storage = JSON.parse(localStorage)
+                thisObject.container.frame.position.y = storage.spacePosition
+            } else {
+                INITIAL_POSITION = 55
+                thisObject.container.frame.position.y = browserCanvas.height * INITIAL_POSITION / 100 - COCKPIT_SPACE_HEIGHT
+            }
+        } else {
+            INITIAL_POSITION = 100
+            thisObject.container.frame.position.y = browserCanvas.height * INITIAL_POSITION / 100 - COCKPIT_SPACE_HEIGHT
+        }
+        isInitilized = true
+    }
 
-   function onMouseClick (event) {
+    function onMouseClick(event) {
 
-   }
+    }
 
-   function setStatus (text, counter, type) {
-     statusCounter = counter
-     statusText = text
-     statusType = type
-   }
+    function setStatus(text, counter, type) {
+        statusCounter = counter
+        statusText = text
+        statusType = type
+    }
 
-   function resize () {
-     thisObject.container.frame.width = browserCanvas.width
-     thisObject.container.frame.height = COCKPIT_SPACE_HEIGHT
+    function resize() {
+        thisObject.container.frame.width = browserCanvas.width
+        thisObject.container.frame.height = COCKPIT_SPACE_HEIGHT
 
-     switch (thisObject.status) {
-       case 'BOTTOM': {
-         thisObject.container.frame.position.y = browserCanvas.height - COCKPIT_SPACE_HEIGHT
-         break
-       }
-       case 'TOP': {
-         thisObject.container.frame.position.y = TOP_SPACE_HEIGHT
-         break
-       }
-     }
-   }
+        switch (thisObject.status) {
+            case 'BOTTOM': {
+                thisObject.container.frame.position.y = browserCanvas.height - COCKPIT_SPACE_HEIGHT
+                break
+            }
+            case 'TOP': {
+                thisObject.container.frame.position.y = TOP_SPACE_HEIGHT
+                break
+            }
+        }
+    }
 
-   function toTop () {
-     thisObject.container.frame.position.y = COCKPIT_SPACE_HEIGHT
-   }
+    function toTop() {
+        thisObject.container.frame.position.y = COCKPIT_SPACE_HEIGHT
+    }
 
-   function toBottom () {
-     thisObject.container.frame.position.y = browserCanvas.height - COCKPIT_SPACE_HEIGHT
-   }
+    function toBottom() {
+        thisObject.container.frame.position.y = browserCanvas.height - COCKPIT_SPACE_HEIGHT
+    }
 
-   function toMiddle () {
-     thisObject.container.frame.position.y = browserCanvas.height / 2 - COCKPIT_SPACE_HEIGHT
-   }
+    function toMiddle() {
+        thisObject.container.frame.position.y = browserCanvas.height / 2 - COCKPIT_SPACE_HEIGHT
+    }
 
-   function moveUp () {
-     thisObject.container.frame.position.y = thisObject.container.frame.position.y - COCKPIT_SPACE_HEIGHT * 2
-     if (thisObject.container.frame.position.y < 0) {
-       thisObject.container.frame.position.y = 0
-     }
-   }
+    function moveUp() {
+        thisObject.container.frame.position.y = thisObject.container.frame.position.y - COCKPIT_SPACE_HEIGHT * 2
+        if (thisObject.container.frame.position.y < 0) {
+            thisObject.container.frame.position.y = 0
+        }
+    }
 
-   function moveDown () {
-     thisObject.container.frame.position.y = thisObject.container.frame.position.y + COCKPIT_SPACE_HEIGHT * 2
-     if (thisObject.container.frame.position.y > browserCanvas.height - COCKPIT_SPACE_HEIGHT) {
-       thisObject.container.frame.position.y = browserCanvas.height - COCKPIT_SPACE_HEIGHT
-     }
-   }
+    function moveDown() {
+        thisObject.container.frame.position.y = thisObject.container.frame.position.y + COCKPIT_SPACE_HEIGHT * 2
+        if (thisObject.container.frame.position.y > browserCanvas.height - COCKPIT_SPACE_HEIGHT) {
+            thisObject.container.frame.position.y = browserCanvas.height - COCKPIT_SPACE_HEIGHT
+        }
+    }
 
-   function statusPhysics () {
-     statusCounter--
-     if (statusCounter < 0) {
-       statusCounter = 0
-       statusText = undefined,
-    statusType = undefined
-     }
-   }
+    function statusPhysics() {
+        statusCounter--
+        if (statusCounter < 0) {
+            statusCounter = 0
+            statusText = undefined,
+                statusType = undefined
+        }
+    }
 
-   function physics () {
-     thisObjectPhysics()
-     childrenPhysics()
-     statusPhysics()
-   }
+    function physics() {
+        thisObjectPhysics()
+        childrenPhysics()
+        statusPhysics()
+    }
 
-   function childrenPhysics () {
-     thisObject.fullscreen.physics()
-   }
-   function thisObjectPhysics () {
-     if (isInitilized === false) { return }
-     /* Check the limits */
+    function childrenPhysics() {
+        thisObject.fullscreen.physics()
+    }
+    function thisObjectPhysics() {
+        if (isInitilized === false) { return }
+        /* Check the limits */
 
-     thisObject.status = 'MIDDLE'
+        thisObject.status = 'MIDDLE'
 
-     if (canvas.designSpace.workspace.enabled === true) {
-       thisObject.container.isDraggeable = true
-     } else {
-       thisObject.container.isDraggeable = false
-     }
+        if (canvas.designSpace.workspace.enabled === true) {
+            thisObject.container.isDraggeable = true
+        } else {
+            thisObject.container.isDraggeable = false
+        }
 
-     if (thisObject.container.frame.position.y > browserCanvas.height * 99.5 / 100 - COCKPIT_SPACE_HEIGHT) {
-       thisObject.container.frame.position.y = browserCanvas.height - COCKPIT_SPACE_HEIGHT
-       thisObject.status = 'BOTTOM'
-       canvas.designSpace.makeInvisible()
-       canvas.floatingSpace.makeInvisible()
-     } else {
-       canvas.designSpace.makeVisible()
-       canvas.floatingSpace.makeVisible()
-     }
+        if (thisObject.container.frame.position.y > browserCanvas.height * 99.5 / 100 - COCKPIT_SPACE_HEIGHT) {
+            thisObject.container.frame.position.y = browserCanvas.height - COCKPIT_SPACE_HEIGHT
+            thisObject.status = 'BOTTOM'
+            canvas.designSpace.makeInvisible()
+            canvas.floatingSpace.makeInvisible()
+        } else {
+            canvas.designSpace.makeVisible()
+            canvas.floatingSpace.makeVisible()
+        }
 
-     if (thisObject.container.frame.position.y < browserCanvas.height * 0.5 / 100 + TOP_SPACE_HEIGHT) {
-       thisObject.container.frame.position.y = TOP_SPACE_HEIGHT
-       thisObject.status = 'TOP'
-       canvas.panelsSpace.visible = false
-     } else {
-       canvas.panelsSpace.visible = true
-     }
+        if (thisObject.container.frame.position.y < browserCanvas.height * 0.5 / 100 + TOP_SPACE_HEIGHT) {
+            thisObject.container.frame.position.y = TOP_SPACE_HEIGHT
+            thisObject.status = 'TOP'
+            canvas.panelsSpace.visible = false
+        } else {
+            canvas.panelsSpace.visible = true
+        }
 
-     COCKPIT_SPACE_POSITION = thisObject.container.frame.position.y
-     let storage = {
-       spacePosition: COCKPIT_SPACE_POSITION
-     }
-     window.localStorage.setItem(MODULE_NAME, JSON.stringify(storage))
-     if (canvas.chartingSpace.viewport !== undefined) {
-       canvas.chartingSpace.viewport.resize()
-     }
-   }
+        COCKPIT_SPACE_POSITION = thisObject.container.frame.position.y
+        let storage = {
+            spacePosition: COCKPIT_SPACE_POSITION
+        }
+        window.localStorage.setItem(MODULE_NAME, JSON.stringify(storage))
+        if (canvas.chartingSpace.viewport !== undefined) {
+            canvas.chartingSpace.viewport.resize()
+        }
+    }
 
-   function getContainer (point) {
-     let container
+    function getContainer(point) {
+        let container
 
-     // container = thisObject.fullscreen.getContainer(point)
-     // if (container !== undefined) { return container }
+        // container = thisObject.fullscreen.getContainer(point)
+        // if (container !== undefined) { return container }
 
-     if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-       thisObject.container.space = 'Cockpit Space'
-       return thisObject.container
-     } else {
-       return undefined
-     }
-   }
+        if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+            thisObject.container.space = 'Cockpit Space'
+            return thisObject.container
+        } else {
+            return undefined
+        }
+    }
 
-   function draw () {
-     if (canWeDraw === false) { return }
-     thisObject.container.frame.draw(false, false)
+    function draw() {
+        if (canWeDraw === false) { return }
+        thisObject.container.frame.draw(false, false)
 
-     drawBackground()
+        drawBackground()
 
-     // thisObject.fullscreen.draw()
-   }
+        // thisObject.fullscreen.draw()
+    }
 
-   function drawBackground () {
-     let opacity = 1
+    function drawBackground() {
+        let opacity = 1
 
-     let zeroPoint = {
-       x: 0,
-       y: 0
-     }
+        let zeroPoint = {
+            x: 0,
+            y: 0
+        }
 
-     const RED_LINE_HIGHT = 2
+        const RED_LINE_HIGHT = 2
 
-     zeroPoint = thisObject.container.frame.frameThisPoint(zeroPoint)
+        zeroPoint = thisObject.container.frame.frameThisPoint(zeroPoint)
 
-     let barColor = UI_COLOR.DARK_TURQUOISE // default
-     let textColor
+        let barColor = UI_COLOR.DARK_TURQUOISE // default
+        let textColor
 
-     if (statusType !== undefined) {
-       switch (statusType) {
-         case STATUS_TYPES.ALL_GOOD:
-           {
-             barColor = UI_COLOR.PATINATED_TURQUOISE
-             textColor = UI_COLOR.WHITE
-             break
-           }
-         case STATUS_TYPES.WARNING:
-           {
-             barColor = UI_COLOR.RED
-             textColor = UI_COLOR.TITANIUM_YELLOW
-             break
-           }
-       }
-     }
+        if (statusType !== undefined) {
+            switch (statusType) {
+                case STATUS_TYPES.ALL_GOOD:
+                    {
+                        barColor = UI_COLOR.PATINATED_TURQUOISE
+                        textColor = UI_COLOR.WHITE
+                        break
+                    }
+                case STATUS_TYPES.WARNING:
+                    {
+                        barColor = UI_COLOR.RED
+                        textColor = UI_COLOR.TITANIUM_YELLOW
+                        break
+                    }
+            }
+        }
 
-     browserCanvasContext.beginPath()
-     browserCanvasContext.rect(zeroPoint.x, zeroPoint.y, thisObject.container.frame.width, thisObject.container.frame.height)
-     browserCanvasContext.fillStyle = 'rgba(' + barColor + ', ' + opacity + ')'
-     browserCanvasContext.closePath()
-     browserCanvasContext.fill()
+        browserCanvasContext.beginPath()
+        browserCanvasContext.rect(zeroPoint.x, zeroPoint.y, thisObject.container.frame.width, thisObject.container.frame.height)
+        browserCanvasContext.fillStyle = 'rgba(' + barColor + ', ' + opacity + ')'
+        browserCanvasContext.closePath()
+        browserCanvasContext.fill()
 
-     browserCanvasContext.beginPath()
-     browserCanvasContext.rect(zeroPoint.x, zeroPoint.y, thisObject.container.frame.width, RED_LINE_HIGHT)
-     browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')'
-     browserCanvasContext.closePath()
-     browserCanvasContext.fill()
+        browserCanvasContext.beginPath()
+        browserCanvasContext.rect(zeroPoint.x, zeroPoint.y, thisObject.container.frame.width, RED_LINE_HIGHT)
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')'
+        browserCanvasContext.closePath()
+        browserCanvasContext.fill()
 
-     browserCanvasContext.beginPath()
-     browserCanvasContext.rect(zeroPoint.x, zeroPoint.y - RED_LINE_HIGHT + thisObject.container.frame.height, thisObject.container.frame.width, RED_LINE_HIGHT)
-     browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')'
-     browserCanvasContext.closePath()
-     browserCanvasContext.fill()
+        browserCanvasContext.beginPath()
+        browserCanvasContext.rect(zeroPoint.x, zeroPoint.y - RED_LINE_HIGHT + thisObject.container.frame.height, thisObject.container.frame.width, RED_LINE_HIGHT)
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')'
+        browserCanvasContext.closePath()
+        browserCanvasContext.fill()
 
-     if (statusText !== undefined) {
-       let position = {
-         x: thisObject.container.frame.width / 2,
-         y: thisObject.container.frame.height / 2 + 5
-       }
-       printLabel(statusText, position.x, position.y, 1, 15, textColor, true, thisObject.container)
-     }
+        if (statusText !== undefined) {
+            let position = {
+                x: thisObject.container.frame.width / 2,
+                y: thisObject.container.frame.height / 2 + 5
+            }
+            printLabel(statusText, position.x, position.y, 1, 15, textColor, true, thisObject.container)
+        }
 
-     if (canvas.designSpace !== undefined) {
-       if (canvas.designSpace.workspace.enabled === true && statusText === undefined) {
-         arrow()
-       }
-     }
-   }
+        if (canvas.designSpace !== undefined) {
+            if (canvas.designSpace.workspace.enabled === true && statusText === undefined) {
+                arrow()
+            }
+        }
+    }
 
-   function arrow () {
-     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 = 1
-     let DISTANCE_BETWEEN_ARROWS = 0
-     let ARROW_1_DIRECTION = 0
-     let ARROW_2_DIRECTION = 0
+    function arrow() {
+        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 = 1
+        let DISTANCE_BETWEEN_ARROWS = 0
+        let ARROW_1_DIRECTION = 0
+        let ARROW_2_DIRECTION = 0
 
-     switch (thisObject.status) {
+        switch (thisObject.status) {
 
-       case ('TOP'): {
-         ARROW_1_DIRECTION = -1
-         ARROW_2_DIRECTION = -1
-         DISTANCE_BETWEEN_ARROWS = 6
-         break
-       }
-       case ('MIDDLE'): {
-         ARROW_1_DIRECTION = 1
-         ARROW_2_DIRECTION = -1
-         DISTANCE_BETWEEN_ARROWS = 9
-         break
-       }
-       case ('BOTTOM'): {
-         ARROW_1_DIRECTION = 1
-         ARROW_2_DIRECTION = 1
-         DISTANCE_BETWEEN_ARROWS = 6
-         break
-       }
-     }
+            case ('TOP'): {
+                ARROW_1_DIRECTION = -1
+                ARROW_2_DIRECTION = -1
+                DISTANCE_BETWEEN_ARROWS = 6
+                break
+            }
+            case ('MIDDLE'): {
+                ARROW_1_DIRECTION = 1
+                ARROW_2_DIRECTION = -1
+                DISTANCE_BETWEEN_ARROWS = 9
+                break
+            }
+            case ('BOTTOM'): {
+                ARROW_1_DIRECTION = 1
+                ARROW_2_DIRECTION = 1
+                DISTANCE_BETWEEN_ARROWS = 6
+                break
+            }
+        }
 
-     point1 = {
-       x: X_OFFSET - WIDTH / 2,
-       y: Y_OFFSET + HEIGHT / 2 * ARROW_1_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2
-     }
+        point1 = {
+            x: X_OFFSET - WIDTH / 2,
+            y: Y_OFFSET + HEIGHT / 2 * ARROW_1_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2
+        }
 
-     point2 = {
-       x: X_OFFSET,
-       y: Y_OFFSET - HEIGHT / 2 * ARROW_1_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2
-     }
+        point2 = {
+            x: X_OFFSET,
+            y: Y_OFFSET - HEIGHT / 2 * ARROW_1_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2
+        }
 
-     point3 = {
-       x: X_OFFSET + WIDTH / 2,
-       y: Y_OFFSET + HEIGHT / 2 * ARROW_1_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2
-     }
+        point3 = {
+            x: X_OFFSET + WIDTH / 2,
+            y: Y_OFFSET + HEIGHT / 2 * ARROW_1_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2
+        }
 
-     point1 = thisObject.container.frame.frameThisPoint(point1)
-     point2 = thisObject.container.frame.frameThisPoint(point2)
-     point3 = thisObject.container.frame.frameThisPoint(point3)
+        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 + HEIGHT / 2 * ARROW_2_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2
-     }
+        point4 = {
+            x: X_OFFSET - WIDTH / 2,
+            y: Y_OFFSET + HEIGHT / 2 * ARROW_2_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2
+        }
 
-     point5 = {
-       x: X_OFFSET,
-       y: Y_OFFSET - HEIGHT / 2 * ARROW_2_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2
-     }
+        point5 = {
+            x: X_OFFSET,
+            y: Y_OFFSET - HEIGHT / 2 * ARROW_2_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2
+        }
 
-     point6 = {
-       x: X_OFFSET + WIDTH / 2,
-       y: Y_OFFSET + HEIGHT / 2 * ARROW_2_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2
-     }
+        point6 = {
+            x: X_OFFSET + WIDTH / 2,
+            y: Y_OFFSET + HEIGHT / 2 * ARROW_2_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2
+        }
 
-     point4 = thisObject.container.frame.frameThisPoint(point4)
-     point5 = thisObject.container.frame.frameThisPoint(point5)
-     point6 = thisObject.container.frame.frameThisPoint(point6)
+        point4 = thisObject.container.frame.frameThisPoint(point4)
+        point5 = thisObject.container.frame.frameThisPoint(point5)
+        point6 = thisObject.container.frame.frameThisPoint(point6)
 
-     browserCanvasContext.setLineDash([0, 0])
+        browserCanvasContext.setLineDash([0, 0])
 
-     browserCanvasContext.beginPath()
+        browserCanvasContext.beginPath()
 
-     browserCanvasContext.moveTo(point1.x, point1.y)
-     browserCanvasContext.lineTo(point2.x, point2.y)
-     browserCanvasContext.lineTo(point3.x, point3.y)
+        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(point4.x, point4.y)
+        browserCanvasContext.lineTo(point5.x, point5.y)
+        browserCanvasContext.lineTo(point6.x, point6.y)
 
-     browserCanvasContext.lineWidth = LINE_WIDTH
-     browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')'
-     browserCanvasContext.stroke()
-   }
- }
+        browserCanvasContext.lineWidth = LINE_WIDTH
+        browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')'
+        browserCanvasContext.stroke()
+    }
+}

Spaces/DesignSpace.js

@@ -1,351 +1,351 @@
 
-function newDesignSpace () {
-  const MODULE_NAME = 'Designe Space'
-  let thisObject = {
-    sidePanel: undefined,
-    container: undefined,
-    iconCollection: undefined,
-    iconByUiObjectType: undefined,
-    workspace: undefined,
-    physics: physics,
-    draw: draw,
-    getContainer: getContainer,
-    makeVisible: makeVisible,
-    makeInvisible: makeInvisible,
-    initialize: initialize
-  }
-
-  let container = newContainer()
-  container.initialize()
-  thisObject.container = container
-
-  container.isDraggeable = false
-
-  thisObject.iconCollection = new Map()
-  thisObject.iconByUiObjectType = new Map()
-
-  return thisObject
-
-  function initialize () {
-    loadIconCollection()
-    buildIconByUiObjectTypeMap()
-
-    thisObject.workspace = newWorkspace()
-    thisObject.workspace.initialize()
-  }
-
-  function buildIconByUiObjectTypeMap () {
-    /* Take types-icons relationships defined at the schema */
-    for (let i = 0; i < APP_SCHEMA_ARRAY.length; i++) {
-      let nodeDefinition = APP_SCHEMA_ARRAY[i]
-      let iconName = nodeDefinition.icon
-      if (iconName !== undefined) {
-        let icon = thisObject.iconCollection.get(iconName)
-        thisObject.iconByUiObjectType.set(nodeDefinition.type, icon)
-      }
-    }
-  }
-
-  function loadIconCollection () {
-    const iconsNames = [
-      'analysis',
-      'analysis-1',
-      'approve',
-      'attach',
-      'attractive',
-      'pyramid',
-      'brainstorming',
-      'broken-link',
-      'chat',
-      'chronometer',
-      'compass',
-      'competition',
-      'content',
-      'design-tool',
-      'grid',
-      'headphones',
-      'html',
-      'image',
-      'layout',
-      'loading',
-      'login',
-      'pantone',
-      'paper-plane',
-      'photo-camera',
-      'piggy-bank',
-      'pipette',
-      'pixel',
-      'placeholder',
-      'planning',
-      'promotion',
-      'pyramid',
-      'quality',
-      'responsive',
-      'schedule',
-      'search',
-      'security',
-      'settings',
-      'sitemap',
-      'startup',
-      'support',
-      'tap',
-      'menu-fix-pinned',
-      'menu-fix-unpinned',
-      'targeting',
-      'task',
-      'testing',
-      'text',
-      'timeline',
-      'tools',
-      'delete',
-      'upload',
-      'vector',
-      'video-player',
-      'menu-mobility-freeze',
-      'menu-mobility-unfreeze',
-      'menu-tree-minus',
-      'menu-tree-plus',
-      'menu-backup',
-      'menu-share',
-      'stop',
-      'stage-open',
-      'stage-close',
-      'stage-trigger',
-      'stage-trigger-trigger-on',
-      'stage-trigger-trigger-off',
-      'stage-trigger-take-position',
-      'menu-tensor-fixed-angles',
-      'menu-tensor-free-angles',
-      'stage-open-position-size',
-      'stage-open-take-profit',
-      'stage-open-postion-rate',
-      'session-live-trading',
-      'session-paper-trading',
-      'session-backtesting',
-      'session-forward-testing',
-      'network',
-      'network-node',
-      'bot-trading',
-      'layer-manager',
-      'process',
-      'bot-indicator',
-      'bot-sensor',
-      'time-period',
-      'data-mine',
-      'procedure-loop',
-      'calculations-procedure',
-      'data-building-procedure',
-      'procedure-initialization',
-      'process-definition',
-      'output-dataset',
-      'data-dependency',
-      'product-definition',
-      'plotter-module',
-      'status-dependency',
-      'record-property',
-      'record-definition',
-      'plotter',
-      'plotter-panel',
-      'dataset-definition',
-      'status-report',
-      'execution-finished-event',
-      'process-dependencies',
-      'process-output',
-      'social-bot',
-      'execution-started-event',
-      'shapes',
-      'chart-point',
-      'style',
-      'chart-points',
-      'shapes-polygon-vertex',
-      'shapes-polygon-border',
-      'shapes-polygon-body',
-      'chart-point-formula',
-      'style-condition',
-      'shapes-polygon',
-      'data-entry',
-      'data-formula',
-      'clone',
-      'exchange-account-asset',
-      'exchange-account-key',
-      'user-keys',
-      'user-assets',
-      'asset',
-      'exchange-accounts',
-      'user-account',
-      'market',
-      'exchange-assets',
-      'crypto-exchanges',
-      'crypto-exchange',
-      'exchange-markets',
-      'charting-space',
-      'time-line-chart',
-      'time-frame-scale',
-      'time-scale',
-      'rate-scale',
-      'time-machine',
-      'data-product',
-      'single-market-data',
-      'data-storage',
-      'dataset',
-      'viewport',
-      'bitfinex',
-      'binance',
-      'kucoin',
-      'bittrex',
-      'kraken',
-      'poloniex',
-      'upbit',
-      'monero',
-      'tether',
-      'tron',
-      'stellar',
-      'qtum',
-      'neo',
-      'litecoin',
-      'ethereum-classic',
-      'ethereum',
-      'eos',
-      'dash',
-      'cardano',
-      'bitcoin-cash',
-      'bitcoin',
-      'binance-coin',
-      'trend',
-      'oscillator',
-      'moving-average',
-      'histogram',
-      'band',
-      'volume',
-      'candles',
-      'bitmex',
-      'liquid',
-      'hitbtc',
-      'us-dollar',
-      'distance-to-parent-200',
-      'distance-to-parent-150',
-      'distance-to-parent-100',
-      'distance-to-parent-050',
-      'distance-to-parent-025',
-      'distance-to-parent-000',
-      'angle-to-parent-360',
-      'angle-to-parent-180',
-      'angle-to-parent-090',
-      'angle-to-parent-045',
-      'angle-to-parent-000',
-      'data-mining',
-      'initial-definition',
-      'next-phase-event',
-      'testing-environment',
-      'production-environment',
-      'task-manager',
-      'session-based-data',
-      'session-independent-data',
-      'session-reference',
-      'dashboard',
-      'toggle-auto-scale-manual',
-      'toggle-auto-scale-auto-min-max',
-      'toggle-auto-scale-auto-max',
-      'toggle-auto-scale-auto-min',
-      'toggle-panel-off',
-      'toggle-auto-time-scale-auto-min',
-      'toggle-auto-time-scale-auto-max',
-      'toggle-auto-time-scale-auto-min-max',
-      'toggle-auto-time-scale-manual',
-      'mouse-pointer',
-      'mouse-left-click',
-      'mouse-right-click',
-      'mouse-wheel-up',
-      'mouse-wheel-down',
-      'mouse-wheel-click',
-      'key-alt',
-      'key-shift',
-      'key-ctrl',
-      'hand-drag',
-      'key-down',
-      'key-left',
-      'key-right',
-      'key-up',
-      'master-script',
-      'scripts-library',
-      'super-action',
-      'super-scripts',
-      'template-script',
-      'template-structure',
-      'template-target',
-      'delink',
-      'detach',
-      'help',
-      'key-a',
-      'key-m',
-      'key-r',
-      'arrangement-horizontal-top',
-      'arrangement-convex',
-      'arrangement-horizontal-bottom',
-      'arrangement-vertical-right',
-      'arrangement-vertical-left',
-      'arrangement-concave',
-      'move-to-phase-event',
-      'open-execution',
-      'move-order',
-      'market-order',
-      'limit-order',
-      'execution-algorithm',
-      'cancel-order'
-    ]
-
-    for (let i = 0; i < iconsNames.length; i++) {
-      let name = iconsNames[i]
-      loadImage(name)
+function newDesignSpace() {
+    const MODULE_NAME = 'Designe Space'
+    let thisObject = {
+        sidePanel: undefined,
+        container: undefined,
+        iconCollection: undefined,
+        iconByUiObjectType: undefined,
+        workspace: undefined,
+        physics: physics,
+        draw: draw,
+        getContainer: getContainer,
+        makeVisible: makeVisible,
+        makeInvisible: makeInvisible,
+        initialize: initialize
     }
 
-    function loadImage (name) {
-      const PATH = 'Images/Icons/style-01/'
-      let image = new Image()
-      image.onload = onImageLoad
-      image.fileName = name
+    let container = newContainer()
+    container.initialize()
+    thisObject.container = container
 
-      function onImageLoad () {
-        image.canDrawIcon = true
-      }
-      image.src = window.canvasApp.urlPrefix + PATH + name + '.png'
-      thisObject.iconCollection.set(name, image)
-    }
-  }
+    container.isDraggeable = false
 
-  function physics () {
-    thisObject.workspace.physics()
-  }
+    thisObject.iconCollection = new Map()
+    thisObject.iconByUiObjectType = new Map()
 
-  function makeVisible () {
-    visible = true
-  }
+    return thisObject
 
-  function makeInvisible () {
-    visible = false
-  }
+    function initialize() {
+        loadIconCollection()
+        buildIconByUiObjectTypeMap()
 
-  function getContainer (point) {
-    let container
-
-    if (thisObject.sidePanel !== undefined) {
-      container = thisObject.sidePanel.getContainer(point)
-      if (container !== undefined) {
-        container.space = 'Design Space'
-        return container
-      }
+        thisObject.workspace = newWorkspace()
+        thisObject.workspace.initialize()
     }
 
-    return
-  }
+    function buildIconByUiObjectTypeMap() {
+        /* Take types-icons relationships defined at the schema */
+        for (let i = 0; i < APP_SCHEMA_ARRAY.length; i++) {
+            let nodeDefinition = APP_SCHEMA_ARRAY[i]
+            let iconName = nodeDefinition.icon
+            if (iconName !== undefined) {
+                let icon = thisObject.iconCollection.get(iconName)
+                thisObject.iconByUiObjectType.set(nodeDefinition.type, icon)
+            }
+        }
+    }
 
-  function draw () {
-    if (canWeDraw === false) { return }
-    if (thisObject.sidePanel !== undefined) {
-      thisObject.sidePanel.draw()
+    function loadIconCollection() {
+        const iconsNames = [
+            'analysis',
+            'analysis-1',
+            'approve',
+            'attach',
+            'attractive',
+            'pyramid',
+            'brainstorming',
+            'broken-link',
+            'chat',
+            'chronometer',
+            'compass',
+            'competition',
+            'content',
+            'design-tool',
+            'grid',
+            'headphones',
+            'html',
+            'image',
+            'layout',
+            'loading',
+            'login',
+            'pantone',
+            'paper-plane',
+            'photo-camera',
+            'piggy-bank',
+            'pipette',
+            'pixel',
+            'placeholder',
+            'planning',
+            'promotion',
+            'pyramid',
+            'quality',
+            'responsive',
+            'schedule',
+            'search',
+            'security',
+            'settings',
+            'sitemap',
+            'startup',
+            'support',
+            'tap',
+            'menu-fix-pinned',
+            'menu-fix-unpinned',
+            'targeting',
+            'task',
+            'testing',
+            'text',
+            'timeline',
+            'tools',
+            'delete',
+            'upload',
+            'vector',
+            'video-player',
+            'menu-mobility-freeze',
+            'menu-mobility-unfreeze',
+            'menu-tree-minus',
+            'menu-tree-plus',
+            'menu-backup',
+            'menu-share',
+            'stop',
+            'stage-open',
+            'stage-close',
+            'stage-trigger',
+            'stage-trigger-trigger-on',
+            'stage-trigger-trigger-off',
+            'stage-trigger-take-position',
+            'menu-tensor-fixed-angles',
+            'menu-tensor-free-angles',
+            'stage-open-position-size',
+            'stage-open-take-profit',
+            'stage-open-postion-rate',
+            'session-live-trading',
+            'session-paper-trading',
+            'session-backtesting',
+            'session-forward-testing',
+            'network',
+            'network-node',
+            'bot-trading',
+            'layer-manager',
+            'process',
+            'bot-indicator',
+            'bot-sensor',
+            'time-period',
+            'data-mine',
+            'procedure-loop',
+            'calculations-procedure',
+            'data-building-procedure',
+            'procedure-initialization',
+            'process-definition',
+            'output-dataset',
+            'data-dependency',
+            'product-definition',
+            'plotter-module',
+            'status-dependency',
+            'record-property',
+            'record-definition',
+            'plotter',
+            'plotter-panel',
+            'dataset-definition',
+            'status-report',
+            'execution-finished-event',
+            'process-dependencies',
+            'process-output',
+            'social-bot',
+            'execution-started-event',
+            'shapes',
+            'chart-point',
+            'style',
+            'chart-points',
+            'shapes-polygon-vertex',
+            'shapes-polygon-border',
+            'shapes-polygon-body',
+            'chart-point-formula',
+            'style-condition',
+            'shapes-polygon',
+            'data-entry',
+            'data-formula',
+            'clone',
+            'exchange-account-asset',
+            'exchange-account-key',
+            'user-keys',
+            'user-assets',
+            'asset',
+            'exchange-accounts',
+            'user-account',
+            'market',
+            'exchange-assets',
+            'crypto-exchanges',
+            'crypto-exchange',
+            'exchange-markets',
+            'charting-space',
+            'time-line-chart',
+            'time-frame-scale',
+            'time-scale',
+            'rate-scale',
+            'time-machine',
+            'data-product',
+            'single-market-data',
+            'data-storage',
+            'dataset',
+            'viewport',
+            'bitfinex',
+            'binance',
+            'kucoin',
+            'bittrex',
+            'kraken',
+            'poloniex',
+            'upbit',
+            'monero',
+            'tether',
+            'tron',
+            'stellar',
+            'qtum',
+            'neo',
+            'litecoin',
+            'ethereum-classic',
+            'ethereum',
+            'eos',
+            'dash',
+            'cardano',
+            'bitcoin-cash',
+            'bitcoin',
+            'binance-coin',
+            'trend',
+            'oscillator',
+            'moving-average',
+            'histogram',
+            'band',
+            'volume',
+            'candles',
+            'bitmex',
+            'liquid',
+            'hitbtc',
+            'us-dollar',
+            'distance-to-parent-200',
+            'distance-to-parent-150',
+            'distance-to-parent-100',
+            'distance-to-parent-050',
+            'distance-to-parent-025',
+            'distance-to-parent-000',
+            'angle-to-parent-360',
+            'angle-to-parent-180',
+            'angle-to-parent-090',
+            'angle-to-parent-045',
+            'angle-to-parent-000',
+            'data-mining',
+            'initial-definition',
+            'next-phase-event',
+            'testing-environment',
+            'production-environment',
+            'task-manager',
+            'session-based-data',
+            'session-independent-data',
+            'session-reference',
+            'dashboard',
+            'toggle-auto-scale-manual',
+            'toggle-auto-scale-auto-min-max',
+            'toggle-auto-scale-auto-max',
+            'toggle-auto-scale-auto-min',
+            'toggle-panel-off',
+            'toggle-auto-time-scale-auto-min',
+            'toggle-auto-time-scale-auto-max',
+            'toggle-auto-time-scale-auto-min-max',
+            'toggle-auto-time-scale-manual',
+            'mouse-pointer',
+            'mouse-left-click',
+            'mouse-right-click',
+            'mouse-wheel-up',
+            'mouse-wheel-down',
+            'mouse-wheel-click',
+            'key-alt',
+            'key-shift',
+            'key-ctrl',
+            'hand-drag',
+            'key-down',
+            'key-left',
+            'key-right',
+            'key-up',
+            'master-script',
+            'scripts-library',
+            'super-action',
+            'super-scripts',
+            'template-script',
+            'template-structure',
+            'template-target',
+            'delink',
+            'detach',
+            'help',
+            'key-a',
+            'key-m',
+            'key-r',
+            'arrangement-horizontal-top',
+            'arrangement-convex',
+            'arrangement-horizontal-bottom',
+            'arrangement-vertical-right',
+            'arrangement-vertical-left',
+            'arrangement-concave',
+            'move-to-phase-event',
+            'open-execution',
+            'move-order',
+            'market-order',
+            'limit-order',
+            'execution-algorithm',
+            'cancel-order'
+        ]
+
+        for (let i = 0; i < iconsNames.length; i++) {
+            let name = iconsNames[i]
+            loadImage(name)
+        }
+
+        function loadImage(name) {
+            const PATH = 'Images/Icons/style-01/'
+            let image = new Image()
+            image.onload = onImageLoad
+            image.fileName = name
+
+            function onImageLoad() {
+                image.canDrawIcon = true
+            }
+            image.src = window.canvasApp.urlPrefix + PATH + name + '.png'
+            thisObject.iconCollection.set(name, image)
+        }
     }
-    if (thisObject.workspace !== undefined) {
-      thisObject.workspace.draw()
+
+    function physics() {
+        thisObject.workspace.physics()
+    }
+
+    function makeVisible() {
+        visible = true
+    }
+
+    function makeInvisible() {
+        visible = false
+    }
+
+    function getContainer(point) {
+        let container
+
+        if (thisObject.sidePanel !== undefined) {
+            container = thisObject.sidePanel.getContainer(point)
+            if (container !== undefined) {
+                container.space = 'Design Space'
+                return container
+            }
+        }
+
+        return
+    }
+
+    function draw() {
+        if (canWeDraw === false) { return }
+        if (thisObject.sidePanel !== undefined) {
+            thisObject.sidePanel.draw()
+        }
+        if (thisObject.workspace !== undefined) {
+            thisObject.workspace.draw()
+        }
     }
-  }
 }

Spaces/FloatingSpace.js

@@ -1,433 +1,433 @@
 
-function newFloatingSpace () {
-  const MODULE_NAME = 'Floating Space'
-  const ERROR_LOG = true
-   /*
-   The Floating Space is the place where floating elements like floatingObjects, live and are rendered.
-   This space has its own physics which helps with the animation of these objects and also preventing them to overlap.
-   */
+function newFloatingSpace() {
+    const MODULE_NAME = 'Floating Space'
+    const ERROR_LOG = true
+    /*
+    The Floating Space is the place where floating elements like floatingObjects, live and are rendered.
+    This space has its own physics which helps with the animation of these objects and also preventing them to overlap.
+    */
 
-  let thisObject = {
-    floatingLayer: undefined,               // This is the array of floatingObjects being displayed
-    uiObjectConstructor: undefined,
-    container: undefined,
-    inMapMode: false,
-    drawReferenceLines: false,
-    drawChainLines: true,
-    toggleDrawChainLines: toggleDrawChainLines,
-    toggleDrawReferenceLines: toggleDrawReferenceLines,
-    toggleMapMode: toggleMapMode,
-    enterMapMode: enterMapMode,
-    exitMapMode: exitMapMode,
-    transformPointToMap: transformPointToMap,
-    transformRadiusToMap: transformRadiusToMap,
-    transformImagesizeToMap: transformImagesizeToMap,
-    oneScreenUp: oneScreenUp,
-    oneScreenDown: oneScreenDown,
-    oneScreenLeft: oneScreenLeft,
-    oneScreenRight: oneScreenRight,
-    positionAtNode: positionAtNode,
-    fitIntoVisibleArea: fitIntoVisibleArea,
-    isThisPointVisible: isThisPointVisible,
-    isItFar: isItFar,
-    makeVisible: makeVisible,
-    makeInvisible: makeInvisible,
-    draw: draw,
-    physics: physics,
-    getContainer: getContainer,
-    initialize: initialize,
-    finalize: finalize
-  }
-
-  thisObject.container = newContainer()
-  thisObject.container.initialize(MODULE_NAME)
-  thisObject.container.isClickeable = false
-  thisObject.container.isDraggeable = true
-  thisObject.container.isWheelable = true
-  thisObject.container.detectMouseOver = true
-  thisObject.container.isClickeable = false
-  thisObject.container.frame.radius = 0
-
-  let devicePixelRatio = window.devicePixelRatio
-  const SPACE_SIZE = 50000
-
-  thisObject.container.frame.width = SPACE_SIZE
-  thisObject.container.frame.height = SPACE_SIZE
-  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
-
-  let visible = false
-  let floatingObjetOnFocus
-
-  const PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT = 25
-  let onDragStartedEventSubscriptionId
-  let spaceFocusAquiredEventSubscriptionId
-
-  return thisObject
-
-  function finalize () {
-    thisObject.container.eventHandler.stopListening(onDragStartedEventSubscriptionId)
-    canvas.floatingSpace.container.eventHandler.stopListening(spaceFocusAquiredEventSubscriptionId)
-
-    thisObject.floatingLayer.finalize()
-    thisObject.uiObjectConstructor.finalize()
-    thisObject.container.finalize()
-
-    thisObject.floatingLayer = undefined
-    thisObject.uiObjectConstructor = undefined
-    thisObject.container = undefined
-
-    floatingObjetOnFocus = undefined
-  }
-
-  function initialize (callBackFunction) {
-    thisObject.floatingLayer = newFloatingLayer()
-    thisObject.floatingLayer.initialize()
-
-    thisObject.uiObjectConstructor = newUiObjectConstructor()
-    thisObject.uiObjectConstructor.initialize(thisObject.floatingLayer)
-
-    onDragStartedEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onDragStarted', onDragStarted)
-    spaceFocusAquiredEventSubscriptionId = canvas.floatingSpace.container.eventHandler.listenToEvent('onFocusAquired', someoneAquiredFocus)
-  }
-
-  function someoneAquiredFocus (floatingObject) {
-    if (floatingObject === undefined || floatingObject.container === undefined) {
-      return
+    let thisObject = {
+        floatingLayer: undefined,               // This is the array of floatingObjects being displayed
+        uiObjectConstructor: undefined,
+        container: undefined,
+        inMapMode: false,
+        drawReferenceLines: false,
+        drawChainLines: true,
+        toggleDrawChainLines: toggleDrawChainLines,
+        toggleDrawReferenceLines: toggleDrawReferenceLines,
+        toggleMapMode: toggleMapMode,
+        enterMapMode: enterMapMode,
+        exitMapMode: exitMapMode,
+        transformPointToMap: transformPointToMap,
+        transformRadiusToMap: transformRadiusToMap,
+        transformImagesizeToMap: transformImagesizeToMap,
+        oneScreenUp: oneScreenUp,
+        oneScreenDown: oneScreenDown,
+        oneScreenLeft: oneScreenLeft,
+        oneScreenRight: oneScreenRight,
+        positionAtNode: positionAtNode,
+        fitIntoVisibleArea: fitIntoVisibleArea,
+        isThisPointVisible: isThisPointVisible,
+        isItFar: isItFar,
+        makeVisible: makeVisible,
+        makeInvisible: makeInvisible,
+        draw: draw,
+        physics: physics,
+        getContainer: getContainer,
+        initialize: initialize,
+        finalize: finalize
     }
-    floatingObjetOnFocus = floatingObject
-  }
 
-  function toggleDrawReferenceLines () {
-    if (thisObject.drawReferenceLines === true) {
-      thisObject.drawReferenceLines = false
-    } else {
-      thisObject.drawReferenceLines = true
+    thisObject.container = newContainer()
+    thisObject.container.initialize(MODULE_NAME)
+    thisObject.container.isClickeable = false
+    thisObject.container.isDraggeable = true
+    thisObject.container.isWheelable = true
+    thisObject.container.detectMouseOver = true
+    thisObject.container.isClickeable = false
+    thisObject.container.frame.radius = 0
+
+    let devicePixelRatio = window.devicePixelRatio
+    const SPACE_SIZE = 50000
+
+    thisObject.container.frame.width = SPACE_SIZE
+    thisObject.container.frame.height = SPACE_SIZE
+    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
+
+    let visible = false
+    let floatingObjetOnFocus
+
+    const PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT = 25
+    let onDragStartedEventSubscriptionId
+    let spaceFocusAquiredEventSubscriptionId
+
+    return thisObject
+
+    function finalize() {
+        thisObject.container.eventHandler.stopListening(onDragStartedEventSubscriptionId)
+        canvas.floatingSpace.container.eventHandler.stopListening(spaceFocusAquiredEventSubscriptionId)
+
+        thisObject.floatingLayer.finalize()
+        thisObject.uiObjectConstructor.finalize()
+        thisObject.container.finalize()
+
+        thisObject.floatingLayer = undefined
+        thisObject.uiObjectConstructor = undefined
+        thisObject.container = undefined
+
+        floatingObjetOnFocus = undefined
     }
-  }
 
-  function toggleDrawChainLines () {
-    if (thisObject.drawChainLines === true) {
-      thisObject.drawChainLines = false
-    } else {
-      thisObject.drawChainLines = true
+    function initialize(callBackFunction) {
+        thisObject.floatingLayer = newFloatingLayer()
+        thisObject.floatingLayer.initialize()
+
+        thisObject.uiObjectConstructor = newUiObjectConstructor()
+        thisObject.uiObjectConstructor.initialize(thisObject.floatingLayer)
+
+        onDragStartedEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onDragStarted', onDragStarted)
+        spaceFocusAquiredEventSubscriptionId = canvas.floatingSpace.container.eventHandler.listenToEvent('onFocusAquired', someoneAquiredFocus)
     }
-  }
 
-  function transformPointToMap (point) {
-    let returnPoint = {
-      x: point.x - thisObject.container.frame.position.x,
-      y: point.y - thisObject.container.frame.position.y
-    }
-    returnPoint.x = returnPoint.x / SPACE_SIZE * browserCanvas.width
-    returnPoint.y = returnPoint.y / SPACE_SIZE * browserCanvas.height
-    return returnPoint
-  }
-
-  function transformRadiusToMap (radius) {
-    const RADIUS_REDUCTION_FACTOR = 2
-    return radius / RADIUS_REDUCTION_FACTOR
-  }
-
-  function transformImagesizeToMap (imageSize) {
-    const IMAGE_REDUCTION_FACTOR = 3
-    return imageSize / IMAGE_REDUCTION_FACTOR
-  }
-
-  function enterMapMode () {
-    thisObject.inMapMode = true
-  }
-
-  function exitMapMode () {
-    thisObject.inMapMode = false
-  }
-
-  function toggleMapMode () {
-    if (thisObject.inMapMode === false) {
-      enterMapMode()
-    } else {
-      exitMapMode()
-    }
-  }
-
-  function onDragStarted (event) {
-    if (thisObject.inMapMode === false) {
-      if (event.buttons !== 2) { return }
-      event.candelDragging = true
-      enterMapMode()
-    } else {
-      if (event.buttons !== 1) {
-        event.candelDragging = true
-        return
-      }
-
-      let mousePosition = {
-        x: event.x,
-        y: event.y
-      }
-
-      let mouseAtSpace = {
-        x: mousePosition.x / browserCanvas.width * SPACE_SIZE,
-        y: mousePosition.y / browserCanvas.height * SPACE_SIZE
-      }
-      /* Let's see if we can snap to some of the root nodes that are isHierarchyHead */
-      let snapCandidateNodes = canvas.designSpace.workspace.getHierarchyHeads()
-      for (let i = 0; i < snapCandidateNodes.length; i++) {
-        let node = snapCandidateNodes[i]
-        let nodePosition = {
-          x: node.payload.floatingObject.container.frame.position.x,
-          y: node.payload.floatingObject.container.frame.position.y
+    function someoneAquiredFocus(floatingObject) {
+        if (floatingObject === undefined || floatingObject.container === undefined) {
+            return
         }
-        // nodePosition = node.payload.floatingObject.container.frame.frameThisPoint(nodePosition)
+        floatingObjetOnFocus = floatingObject
+    }
 
-        let distance = Math.sqrt(Math.pow(mouseAtSpace.x - nodePosition.x, 2) + Math.pow(mouseAtSpace.y - nodePosition.y, 2))
-        const SNAP_THREASHOLD = 1000
-        if (distance < SNAP_THREASHOLD) {
-          mousePosition.x = nodePosition.x / SPACE_SIZE * browserCanvas.width
-          mousePosition.y = nodePosition.y / SPACE_SIZE * browserCanvas.height
+    function toggleDrawReferenceLines() {
+        if (thisObject.drawReferenceLines === true) {
+            thisObject.drawReferenceLines = false
+        } else {
+            thisObject.drawReferenceLines = true
         }
-      }
-
-      /* Movign the Floating Space to where the mouse is. */
-      thisObject.container.frame.position.x = -mousePosition.x / browserCanvas.width * SPACE_SIZE + browserCanvas.width / 2
-      thisObject.container.frame.position.y = -mousePosition.y / browserCanvas.height * SPACE_SIZE + browserCanvas.height / 2
-
-      exitMapMode()
-    }
-  }
-
-  function isItFar (payload, dontCheckParent) {
-    /* If for any reason the paylaod is undefined we return false */
-    if (payload === undefined) { return false }
-    if (thisObject.inMapMode === true) { return false }
-
-    let radarFactor = 2 // How big is the margin
-
-    /* If the chain parent is not far, they we dont consither this far. */
-    if (dontCheckParent !== true) {
-      if (payload.chainParent !== undefined) {
-        if (isItFar(payload.chainParent.payload, true) === false) { return false }
-      }
     }
 
-    /* Exceptions that are never considered far. */
-    if (
-      payload.node.type === 'Trading System' ||
-      payload.node.type === 'Network' ||
-      payload.node.type === 'Crypto Ecosystem' ||
-      payload.node.type === 'Charting Space' ||
-      payload.node.type === 'Data Mine' ||
-      payload.node.type === 'Super Scripts'
-  ) {
-      return false
+    function toggleDrawChainLines() {
+        if (thisObject.drawChainLines === true) {
+            thisObject.drawChainLines = false
+        } else {
+            thisObject.drawChainLines = true
+        }
     }
 
-    /* Another exception are the ones who have reference parents */
-    if (payload.referenceParent !== undefined) { return false }
-
-    /* Here we will check the position of a floatingobject to see if it is outside the screen, with a margin of one screen around. */
-    let point = thisObject.container.frame.frameThisPoint(payload.position)
-
-    if (point.x > browserCanvas.width + browserCanvas.width * radarFactor) {
-      return true
+    function transformPointToMap(point) {
+        let returnPoint = {
+            x: point.x - thisObject.container.frame.position.x,
+            y: point.y - thisObject.container.frame.position.y
+        }
+        returnPoint.x = returnPoint.x / SPACE_SIZE * browserCanvas.width
+        returnPoint.y = returnPoint.y / SPACE_SIZE * browserCanvas.height
+        return returnPoint
     }
 
-    if (point.x < 0 - browserCanvas.width * radarFactor) {
-      return true
+    function transformRadiusToMap(radius) {
+        const RADIUS_REDUCTION_FACTOR = 2
+        return radius / RADIUS_REDUCTION_FACTOR
     }
 
-    let bottom = COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT
-    let heightDiff = browserCanvas.height - bottom
-    if (point.y < bottom - heightDiff * radarFactor) {
-      return true
+    function transformImagesizeToMap(imageSize) {
+        const IMAGE_REDUCTION_FACTOR = 3
+        return imageSize / IMAGE_REDUCTION_FACTOR
     }
 
-    if (point.y > browserCanvas.height + heightDiff * radarFactor) {
-      return true
-    }
-    return false
-  }
-
-  function fitIntoVisibleArea (point) {
-      /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */
-
-    let returnPoint = {
-      x: point.x,
-      y: point.y
+    function enterMapMode() {
+        thisObject.inMapMode = true
     }
 
-    if (point.x > browserCanvas.width) {
-      returnPoint.x = browserCanvas.width
+    function exitMapMode() {
+        thisObject.inMapMode = false
     }
 
-    if (point.x < 0) {
-      returnPoint.x = 0
+    function toggleMapMode() {
+        if (thisObject.inMapMode === false) {
+            enterMapMode()
+        } else {
+            exitMapMode()
+        }
     }
 
-    if (point.y < COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT) {
-      returnPoint.y = COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT
+    function onDragStarted(event) {
+        if (thisObject.inMapMode === false) {
+            if (event.buttons !== 2) { return }
+            event.candelDragging = true
+            enterMapMode()
+        } else {
+            if (event.buttons !== 1) {
+                event.candelDragging = true
+                return
+            }
+
+            let mousePosition = {
+                x: event.x,
+                y: event.y
+            }
+
+            let mouseAtSpace = {
+                x: mousePosition.x / browserCanvas.width * SPACE_SIZE,
+                y: mousePosition.y / browserCanvas.height * SPACE_SIZE
+            }
+            /* Let's see if we can snap to some of the root nodes that are isHierarchyHead */
+            let snapCandidateNodes = canvas.designSpace.workspace.getHierarchyHeads()
+            for (let i = 0; i < snapCandidateNodes.length; i++) {
+                let node = snapCandidateNodes[i]
+                let nodePosition = {
+                    x: node.payload.floatingObject.container.frame.position.x,
+                    y: node.payload.floatingObject.container.frame.position.y
+                }
+                // nodePosition = node.payload.floatingObject.container.frame.frameThisPoint(nodePosition)
+
+                let distance = Math.sqrt(Math.pow(mouseAtSpace.x - nodePosition.x, 2) + Math.pow(mouseAtSpace.y - nodePosition.y, 2))
+                const SNAP_THREASHOLD = 1000
+                if (distance < SNAP_THREASHOLD) {
+                    mousePosition.x = nodePosition.x / SPACE_SIZE * browserCanvas.width
+                    mousePosition.y = nodePosition.y / SPACE_SIZE * browserCanvas.height
+                }
+            }
+
+            /* Movign the Floating Space to where the mouse is. */
+            thisObject.container.frame.position.x = -mousePosition.x / browserCanvas.width * SPACE_SIZE + browserCanvas.width / 2
+            thisObject.container.frame.position.y = -mousePosition.y / browserCanvas.height * SPACE_SIZE + browserCanvas.height / 2
+
+            exitMapMode()
+        }
     }
 
-    if (point.y > browserCanvas.height) {
-      returnPoint.y = browserCanvas.height
+    function isItFar(payload, dontCheckParent) {
+        /* If for any reason the paylaod is undefined we return false */
+        if (payload === undefined) { return false }
+        if (thisObject.inMapMode === true) { return false }
+
+        let radarFactor = 2 // How big is the margin
+
+        /* If the chain parent is not far, they we dont consither this far. */
+        if (dontCheckParent !== true) {
+            if (payload.chainParent !== undefined) {
+                if (isItFar(payload.chainParent.payload, true) === false) { return false }
+            }
+        }
+
+        /* Exceptions that are never considered far. */
+        if (
+            payload.node.type === 'Trading System' ||
+            payload.node.type === 'Network' ||
+            payload.node.type === 'Crypto Ecosystem' ||
+            payload.node.type === 'Charting Space' ||
+            payload.node.type === 'Data Mine' ||
+            payload.node.type === 'Super Scripts'
+        ) {
+            return false
+        }
+
+        /* Another exception are the ones who have reference parents */
+        if (payload.referenceParent !== undefined) { return false }
+
+        /* Here we will check the position of a floatingobject to see if it is outside the screen, with a margin of one screen around. */
+        let point = thisObject.container.frame.frameThisPoint(payload.position)
+
+        if (point.x > browserCanvas.width + browserCanvas.width * radarFactor) {
+            return true
+        }
+
+        if (point.x < 0 - browserCanvas.width * radarFactor) {
+            return true
+        }
+
+        let bottom = COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT
+        let heightDiff = browserCanvas.height - bottom
+        if (point.y < bottom - heightDiff * radarFactor) {
+            return true
+        }
+
+        if (point.y > browserCanvas.height + heightDiff * radarFactor) {
+            return true
+        }
+        return false
     }
 
-    return returnPoint
-  }
+    function fitIntoVisibleArea(point) {
+        /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */
 
-  function oneScreenUp () {
-    if (visible === false) { return }
-    let displaceVector = {
-      x: 0,
-      y: browserCanvas.height * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100
+        let returnPoint = {
+            x: point.x,
+            y: point.y
+        }
+
+        if (point.x > browserCanvas.width) {
+            returnPoint.x = browserCanvas.width
+        }
+
+        if (point.x < 0) {
+            returnPoint.x = 0
+        }
+
+        if (point.y < COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT) {
+            returnPoint.y = COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT
+        }
+
+        if (point.y > browserCanvas.height) {
+            returnPoint.y = browserCanvas.height
+        }
+
+        return returnPoint
     }
 
-    thisObject.container.displace(displaceVector)
-    return displaceVector
-  }
+    function oneScreenUp() {
+        if (visible === false) { return }
+        let displaceVector = {
+            x: 0,
+            y: browserCanvas.height * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100
+        }
 
-  function oneScreenDown () {
-    if (visible === false) { return }
-    let displaceVector = {
-      x: 0,
-      y: -browserCanvas.height * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100
+        thisObject.container.displace(displaceVector)
+        return displaceVector
     }
 
-    thisObject.container.displace(displaceVector)
-    return displaceVector
-  }
+    function oneScreenDown() {
+        if (visible === false) { return }
+        let displaceVector = {
+            x: 0,
+            y: -browserCanvas.height * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100
+        }
 
-  function oneScreenLeft () {
-    if (visible === false) { return }
-    let displaceVector = {
-      x: browserCanvas.width * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100,
-      y: 0
+        thisObject.container.displace(displaceVector)
+        return displaceVector
     }
 
-    thisObject.container.displace(displaceVector)
-    return displaceVector
-  }
+    function oneScreenLeft() {
+        if (visible === false) { return }
+        let displaceVector = {
+            x: browserCanvas.width * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100,
+            y: 0
+        }
 
-  function oneScreenRight () {
-    if (visible === false) { return }
-    let displaceVector = {
-      x: -browserCanvas.width * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100,
-      y: 0
+        thisObject.container.displace(displaceVector)
+        return displaceVector
     }
 
-    thisObject.container.displace(displaceVector)
-    return displaceVector
-  }
+    function oneScreenRight() {
+        if (visible === false) { return }
+        let displaceVector = {
+            x: -browserCanvas.width * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100,
+            y: 0
+        }
 
-  function positionAtNode (node) {
-    let position = thisObject.container.frame.frameThisPoint(node.payload.position)
-
-    let displaceVector = {
-      x: browserCanvas.width / 2 - position.x,
-      y: (COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT) + (browserCanvas.height - (COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT)) / 2 - position.y
+        thisObject.container.displace(displaceVector)
+        return displaceVector
     }
 
-    thisObject.container.displace(displaceVector)
-  }
+    function positionAtNode(node) {
+        let position = thisObject.container.frame.frameThisPoint(node.payload.position)
 
-  function isThisPointVisible (point) {
-    if (point.x > browserCanvas.width) {
-      return false
+        let displaceVector = {
+            x: browserCanvas.width / 2 - position.x,
+            y: (COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT) + (browserCanvas.height - (COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT)) / 2 - position.y
+        }
+
+        thisObject.container.displace(displaceVector)
     }
 
-    if (point.x < 0) {
-      return false
+    function isThisPointVisible(point) {
+        if (point.x > browserCanvas.width) {
+            return false
+        }
+
+        if (point.x < 0) {
+            return false
+        }
+
+        if (point.y < COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT) {
+            return false
+        }
+
+        if (point.y > browserCanvas.height) {
+            return false
+        }
+
+        return true
     }
 
-    if (point.y < COCKPIT_SPACE_POSITION + COCKPIT_SPACE_HEIGHT) {
-      return false
+    function makeVisible() {
+        visible = true
     }
 
-    if (point.y > browserCanvas.height) {
-      return false
+    function makeInvisible() {
+        visible = false
     }
 
-    return true
-  }
+    function getContainer(point) {
+        if (visible === false) { return }
 
-  function makeVisible () {
-    visible = true
-  }
+        let container
 
-  function makeInvisible () {
-    visible = false
-  }
+        if (floatingObjetOnFocus !== undefined) {
+            container = floatingObjetOnFocus.getContainer(point)
+            if (container !== undefined) {
+                container.space = 'Floating Space'
+                return container
+            }
+        }
 
-  function getContainer (point) {
-    if (visible === false) { return }
+        container = thisObject.floatingLayer.getContainer(point)
+        if (container !== undefined) {
+            container.space = 'Floating Space'
+            return container
+        }
 
-    let container
-
-    if (floatingObjetOnFocus !== undefined) {
-      container = floatingObjetOnFocus.getContainer(point)
-      if (container !== undefined) {
-        container.space = 'Floating Space'
-        return container
-      }
+        if (visible === true) {
+            thisObject.container.space = 'Floating Space'
+            return thisObject.container
+        }
     }
 
-    container = thisObject.floatingLayer.getContainer(point)
-    if (container !== undefined) {
-      container.space = 'Floating Space'
-      return container
+    function physics() {
+        if (visible === false) { return }
+        browserZoomPhysics()
+        positionContraintsPhysics()
+        thisObject.floatingLayer.physics()
     }
 
-    if (visible === true) {
-      thisObject.container.space = 'Floating Space'
-      return thisObject.container
+    function positionContraintsPhysics() {
+        if (thisObject.container.frame.position.x > 0) {
+            thisObject.container.frame.position.x = 0
+        }
+        if (thisObject.container.frame.position.y > 0) {
+            thisObject.container.frame.position.y = 0
+        }
+        if (thisObject.container.frame.position.x + thisObject.container.frame.width < browserCanvas.width) {
+            thisObject.container.frame.position.x = browserCanvas.width - thisObject.container.frame.width
+        }
+        if (thisObject.container.frame.position.y + thisObject.container.frame.height < browserCanvas.height) {
+            thisObject.container.frame.position.y = browserCanvas.height - thisObject.container.frame.height
+        }
     }
-  }
 
-  function physics () {
-    if (visible === false) { return }
-    browserZoomPhysics()
-    positionContraintsPhysics()
-    thisObject.floatingLayer.physics()
-  }
+    function browserZoomPhysics() {
+        if (devicePixelRatio !== window.devicePixelRatio) {
+            devicePixelRatio = window.devicePixelRatio
 
-  function positionContraintsPhysics () {
-    if (thisObject.container.frame.position.x > 0) {
-      thisObject.container.frame.position.x = 0
+            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
+        }
     }
-    if (thisObject.container.frame.position.y > 0) {
-      thisObject.container.frame.position.y = 0
+
+    function draw() {
+        if (canWeDraw === false) { return }
+        if (visible === false) { return }
+        drawBackground()
+        thisObject.floatingLayer.draw()
     }
-    if (thisObject.container.frame.position.x + thisObject.container.frame.width < browserCanvas.width) {
-      thisObject.container.frame.position.x = browserCanvas.width - thisObject.container.frame.width
+
+    function drawBackground() {
+        browserCanvasContext.beginPath()
+
+        browserCanvasContext.rect(thisObject.container.frame.position.x, thisObject.container.frame.position.y, thisObject.container.frame.width, thisObject.container.frame.height)
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', 1)'
+
+        browserCanvasContext.closePath()
+        browserCanvasContext.fill()
     }
-    if (thisObject.container.frame.position.y + thisObject.container.frame.height < browserCanvas.height) {
-      thisObject.container.frame.position.y = browserCanvas.height - thisObject.container.frame.height
-    }
-  }
-
-  function browserZoomPhysics () {
-    if (devicePixelRatio !== window.devicePixelRatio) {
-      devicePixelRatio = window.devicePixelRatio
-
-      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
-    }
-  }
-
-  function draw () {
-    if (canWeDraw === false) { return }
-    if (visible === false) { return }
-    drawBackground()
-    thisObject.floatingLayer.draw()
-  }
-
-  function drawBackground () {
-    browserCanvasContext.beginPath()
-
-    browserCanvasContext.rect(thisObject.container.frame.position.x, thisObject.container.frame.position.y, thisObject.container.frame.width, thisObject.container.frame.height)
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', 1)'
-
-    browserCanvasContext.closePath()
-    browserCanvasContext.fill()
-  }
 }

Spaces/PanelsSpace.js

@@ -1,379 +1,379 @@
- /*
+/*
 
 The Panel Space y the place wehre all panels live, no matter who create them.
 
 */
 
-function newPanelsSpace () {
-  let thisObject = {
-    visible: true,
-    container: undefined,
-    unHide: unHide,
-    hide: hide,
-    createNewPanel: createNewPanel,
-    destroyPanel: destroyPanel,
-    getPanel: getPanel,
-    physics: physics,
-    draw: draw,
-    panels: [],
-    getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
-    initialize: initialize
-  }
+function newPanelsSpace() {
+    let thisObject = {
+        visible: true,
+        container: undefined,
+        unHide: unHide,
+        hide: hide,
+        createNewPanel: createNewPanel,
+        destroyPanel: destroyPanel,
+        getPanel: getPanel,
+        physics: physics,
+        draw: draw,
+        panels: [],
+        getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
+        initialize: initialize
+    }
 
-  let container = newContainer()
-  container.initialize()
-  thisObject.container = container
-  thisObject.container.isDraggeable = false
+    let container = newContainer()
+    container.initialize()
+    thisObject.container = container
+    thisObject.container.isDraggeable = false
 
-  container.frame.containerName = 'Panels Space'
+    container.frame.containerName = 'Panels Space'
 
-  return thisObject
+    return thisObject
 
-  function initialize () {
+    function initialize() {
 
         /* The space does not create any Panels for itself, it just sits and waits others need panels. */
 
-  }
-
-  function createNewPanel (pType, pParameters, pOwner, pSession) {
-    let panel
-
-    switch (pType) {
-
-      case 'Layers Panel':
-        {
-          panel = newLayersPanel()
-          panel.fitFunction = canvas.chartingSpace.fitFunction
-          panel.container.isVisibleFunction = canvas.chartingSpace.isThisPointVisible
-          panel.type = 'Layers Panel'
-          break
-        }
-      case 'Plotter Panel':
-        {
-          if (pParameters.panelNode.config.isLegacy !== true) {
-            panel = newPlotterPanel()
-            panel.fitFunction = canvas.chartingSpace.fitFunction
-            panel.container.isVisibleFunction = canvas.chartingSpace.isThisPointVisible
-            panel.session = pSession
-            panel.initialize(pParameters.panelNode)
-          } else {
-            panel = getNewPlotterPanel(pParameters.dataMine, pParameters.plotterCodeName, pParameters.moduleCodeName, pParameters.panelNode.config.codeName)
-            panel.fitFunction = canvas.chartingSpace.fitFunction
-            panel.container.isVisibleFunction = canvas.chartingSpace.isThisPointVisible
-            panel.session = pSession
-            panel.initialize()
-          }
-          panel.type = 'Plotter Panel'
-          break
-        }
     }
 
-    panel.owner = pOwner
-    thisObject.panels.push(panel)
+    function createNewPanel(pType, pParameters, pOwner, pSession) {
+        let panel
 
-    panel.handle = newUniqueId()
+        switch (pType) {
 
-    return panel.handle
-  }
-
-  function unHide (owner, type) {
-    for (let i = 0; i < thisObject.panels.length; i++) {
-      let panel = thisObject.panels[i]
-      if (panel.owner === owner && panel.type === type) {
-        panel.isHidden = false
-      }
-    }
-  }
-
-  function hide (owner, type) {
-    for (let i = 0; i < thisObject.panels.length; i++) {
-      let panel = thisObject.panels[i]
-      if (panel.owner === owner && panel.type === type) {
-        panel.isHidden = true
-      }
-    }
-  }
-
-  function destroyPanel (pPanelHandle) {
-    for (let i = 0; i < thisObject.panels.length; i++) {
-      let panel = thisObject.panels[i]
-
-      if (panel.handle === pPanelHandle) {
-        if (panel.finalize !== undefined) {
-          panel.finalize()
+            case 'Layers Panel':
+                {
+                    panel = newLayersPanel()
+                    panel.fitFunction = canvas.chartingSpace.fitFunction
+                    panel.container.isVisibleFunction = canvas.chartingSpace.isThisPointVisible
+                    panel.type = 'Layers Panel'
+                    break
+                }
+            case 'Plotter Panel':
+                {
+                    if (pParameters.panelNode.config.isLegacy !== true) {
+                        panel = newPlotterPanel()
+                        panel.fitFunction = canvas.chartingSpace.fitFunction
+                        panel.container.isVisibleFunction = canvas.chartingSpace.isThisPointVisible
+                        panel.session = pSession
+                        panel.initialize(pParameters.panelNode)
+                    } else {
+                        panel = getNewPlotterPanel(pParameters.dataMine, pParameters.plotterCodeName, pParameters.moduleCodeName, pParameters.panelNode.config.codeName)
+                        panel.fitFunction = canvas.chartingSpace.fitFunction
+                        panel.container.isVisibleFunction = canvas.chartingSpace.isThisPointVisible
+                        panel.session = pSession
+                        panel.initialize()
+                    }
+                    panel.type = 'Plotter Panel'
+                    break
+                }
         }
 
-        thisObject.panels.splice(i, 1)  // Delete item from array.
-        return
-      }
+        panel.owner = pOwner
+        thisObject.panels.push(panel)
+
+        panel.handle = newUniqueId()
+
+        return panel.handle
     }
-  }
 
-  function getPanel (pPanelHandle) {
-    for (let i = 0; i < thisObject.panels.length; i++) {
-      let panel = thisObject.panels[i]
-
-      if (panel.handle === pPanelHandle) {
-        return panel
-      }
-    }
-  }
-
-  function physics () {
-    if (thisObject.visible !== true) { return }
-
-    childrenPhysics()
-    positioningPhysics()
-  }
-
-  function childrenPhysics () {
-    if (thisObject.panels !== undefined) {
-      for (let i = 0; i < thisObject.panels.length; i++) {
-        let panel = thisObject.panels[i]
-        let owner = canvas.chartingSpace.inViewport.get(panel.owner)
-        if (owner !== undefined) {
-          if (panel.physics !== undefined) {
-            panel.physics()
-          }
-        }
-      }
-    }
-  }
-
-  function positioningPhysics () {
-    if (thisObject.panels !== undefined) {
-      for (let i = 0; i < thisObject.panels.length; i++) {
-        let panel = thisObject.panels[i]
-        if (panel.isVisible === false || panel.isHidden === true) { continue }
-        /* setting the speed of the panel */
-        if (panel.container.speed === undefined) {
-          panel.container.speed = {
-            x: 2,
-            y: 2
-          }
-        }
-
-        /* Trying to move the panel and see if it is possible */
-        let centerPoint = {
-          x: panel.container.frame.position.x,
-          y: panel.container.frame.position.y
-        }
-        centerPoint.x = centerPoint.x + panel.container.frame.width / 2
-        centerPoint.y = centerPoint.y + panel.container.frame.height / 2
-
-        /* Lets see which quadrant the panel is at */
-        let verticalLine = (canvas.chartingSpace.viewport.visibleArea.topRight.x - canvas.chartingSpace.viewport.visibleArea.topLeft.x) / 2 + canvas.chartingSpace.viewport.visibleArea.topLeft.x
-        let horizontalLine = (canvas.chartingSpace.viewport.visibleArea.bottomRight.y - canvas.chartingSpace.viewport.visibleArea.topRight.y) / 2 + canvas.chartingSpace.viewport.visibleArea.topRight.y
-
-        if (panel.upDownButton !== undefined) {
-          if (panel.upDownButton.status === 'up') {
-            if (panel.leftRightButton !== undefined) {
-              if (panel.leftRightButton.status === 'left') {
-                panel.gravitatesTowards = 'topLeft'
-              } else {
-                panel.gravitatesTowards = 'topRight'
-              }
-            } else {
-              if (centerPoint.x < verticalLine) {
-                panel.gravitatesTowards = 'topLeft'
-              } else {
-                panel.gravitatesTowards = 'topRight'
-              }
+    function unHide(owner, type) {
+        for (let i = 0; i < thisObject.panels.length; i++) {
+            let panel = thisObject.panels[i]
+            if (panel.owner === owner && panel.type === type) {
+                panel.isHidden = false
             }
-          } else {
-            if (panel.leftRightButton !== undefined) {
-              if (panel.leftRightButton.status === 'left') {
-                panel.gravitatesTowards = 'bottomLeft'
-              } else {
-                panel.gravitatesTowards = 'bottomRight'
-              }
-            } else {
-              if (centerPoint.x < verticalLine) {
-                panel.gravitatesTowards = 'bottomLeft'
-              } else {
-                panel.gravitatesTowards = 'bottomRight'
-              }
-            }
-          }
-        } else {
-          if (centerPoint.x < verticalLine && centerPoint.y < horizontalLine) {
-            panel.gravitatesTowards = 'topLeft'
-          }
-          if (centerPoint.x >= verticalLine && centerPoint.y < horizontalLine) {
-            panel.gravitatesTowards = 'topRight'
-          }
-          if (centerPoint.x < verticalLine && centerPoint.y >= horizontalLine) {
-            panel.gravitatesTowards = 'bottomLeft'
-          }
-          if (centerPoint.x >= verticalLine && centerPoint.y >= horizontalLine) {
-            panel.gravitatesTowards = 'bottomRight'
-          }
         }
-
-        /* According to the quadrant we push the panels to the sides */
-        if (panel.gravitatesTowards === 'topLeft' || panel.gravitatesTowards === 'bottomLeft') {
-          panel.container.frame.position.x = panel.container.frame.position.x - panel.container.speed.x
-          if (panel.leftRightButton !== undefined) {
-            if (panel.leftRightButton.status === 'left' || panel.leftRightButton.status === 'right') { // we avoid pushing other panels while in transition
-            }
-          }
-          isOverlapping(i, panel.container)
-          if (panel.container.frame.position.x < 0) {
-            panel.container.frame.position.x = 0
-          }
-        } else {
-          panel.container.frame.position.x = panel.container.frame.position.x + panel.container.speed.x
-          isOverlapping(i, panel.container)
-          if (panel.container.frame.position.x + panel.container.frame.width > browserCanvas.width) {
-            panel.container.frame.position.x = browserCanvas.width - panel.container.frame.width
-          }
-        }
-        if (panel.container.frame.height <= canvas.chartingSpace.viewport.visibleArea.bottomRight.y - canvas.chartingSpace.viewport.visibleArea.topRight.y) {
-          if (panel.gravitatesTowards === 'topLeft' || panel.gravitatesTowards === 'topRight') {
-            panel.container.frame.position.y = panel.container.frame.position.y - panel.container.speed.y
-            isOverlapping(i, panel.container)
-            if (panel.container.frame.position.y < canvas.chartingSpace.viewport.visibleArea.topLeft.y) {
-              panel.container.frame.position.y = canvas.chartingSpace.viewport.visibleArea.topLeft.y
-            }
-          } else {
-            panel.container.frame.position.y = panel.container.frame.position.y + panel.container.speed.y
-            isOverlapping(i, panel.container)
-            if (panel.container.frame.position.y + panel.container.frame.height > canvas.chartingSpace.viewport.visibleArea.bottomRight.y) {
-              panel.container.frame.position.y = canvas.chartingSpace.viewport.visibleArea.bottomRight.y - panel.container.frame.height
-            }
-          }
-        }
-      }
     }
 
-    function isOverlapping (currentIndex, currentContainer) {
-      let corner1 = {
-        x: currentContainer.frame.position.x,
-        y: currentContainer.frame.position.y
-      }
-      let corner2 = {
-        x: currentContainer.frame.position.x + currentContainer.frame.width,
-        y: currentContainer.frame.position.y
-      }
-      let corner3 = {
-        x: currentContainer.frame.position.x + currentContainer.frame.width,
-        y: currentContainer.frame.position.y + currentContainer.frame.height
-      }
-      let corner4 = {
-        x: currentContainer.frame.position.x,
-        y: currentContainer.frame.position.y + currentContainer.frame.height
-      }
-
-      for (let i = 0; i < currentIndex; i++) {
-        let panel = thisObject.panels[i]
-        if (panel.leftRightButton !== undefined) {
-          if (panel.leftRightButton.status !== 'left' && panel.leftRightButton.status !== 'right') { // we avoid pushing other panels while in transition
-            continue
-          }
+    function hide(owner, type) {
+        for (let i = 0; i < thisObject.panels.length; i++) {
+            let panel = thisObject.panels[i]
+            if (panel.owner === owner && panel.type === type) {
+                panel.isHidden = true
+            }
         }
-        if (panel.isVisible === true && panel.isHidden === false) {
-          if (isThisPointInsideThisFrame(corner1, panel.container.frame) === true) {
-            pushOut(currentContainer, panel.container, panel.gravitatesTowards)
-          }
-          if (isThisPointInsideThisFrame(corner2, panel.container.frame) === true) {
-            pushOut(currentContainer, panel.container, panel.gravitatesTowards)
-          }
-          if (isThisPointInsideThisFrame(corner3, panel.container.frame) === true) {
-            pushOut(currentContainer, panel.container, panel.gravitatesTowards)
-          }
-          if (isThisPointInsideThisFrame(corner4, panel.container.frame) === true) {
-            pushOut(currentContainer, panel.container, panel.gravitatesTowards)
-          }
-        }
-      }
-
-      function pushOut (currentContainer, controlContainer, corner) {
-        switch (corner) {
-          case 'topLeft': {
-            currentContainer.frame.position.x = controlContainer.frame.position.x + controlContainer.frame.width
-            break
-          }
-          case 'topRight': {
-            currentContainer.frame.position.x = controlContainer.frame.position.x - currentContainer.frame.width
-            break
-          }
-          case 'bottomLeft': {
-            currentContainer.frame.position.x = controlContainer.frame.position.x + controlContainer.frame.width
-            break
-          }
-          case 'bottomRight': {
-            currentContainer.frame.position.x = controlContainer.frame.position.x - currentContainer.frame.width
-            break
-          }
-        }
-      }
-
-      function isThisPointInsideThisFrame (point, frame) {
-        let corner1 = {
-          x: frame.position.x,
-          y: frame.position.y
-        }
-        let corner2 = {
-          x: frame.position.x + frame.width,
-          y: frame.position.y
-        }
-        let corner3 = {
-          x: frame.position.x + frame.width,
-          y: frame.position.y + frame.height
-        }
-        let corner4 = {
-          x: frame.position.x,
-          y: frame.position.y + frame.height
-        }
-        if (point.x >= corner1.x && point.y >= corner1.y && point.x <= corner3.x && point.y <= corner3.y) {
-          return true
-        } else {
-          return false
-        }
-      }
-      return false
     }
-  }
 
-  function draw () {
-    if (canWeDraw === false) { return }
-    if (thisObject.visible !== true) { return }
+    function destroyPanel(pPanelHandle) {
+        for (let i = 0; i < thisObject.panels.length; i++) {
+            let panel = thisObject.panels[i]
 
-    thisObject.container.frame.draw(false, false)
+            if (panel.handle === pPanelHandle) {
+                if (panel.finalize !== undefined) {
+                    panel.finalize()
+                }
 
-    for (let i = 0; i < thisObject.panels.length; i++) {
-      let panel = thisObject.panels[i]
-      let owner = canvas.chartingSpace.inViewport.get(panel.owner)
-      if (owner !== undefined) {
-        if (panel.isVisible === true && panel.isHidden === false) {
-          panel.draw()
+                thisObject.panels.splice(i, 1)  // Delete item from array.
+                return
+            }
         }
-      }
     }
-  }
 
-  function getContainer (point, purpose) {
-    if (thisObject.visible !== true) { return }
+    function getPanel(pPanelHandle) {
+        for (let i = 0; i < thisObject.panels.length; i++) {
+            let panel = thisObject.panels[i]
 
-    let container
-      /*
-      We search for the container of panels in the oposite direction than we do it for drawing them,
-      so panels overlapping others are picked firt although they are drawn last.
-      */
-    for (let i = thisObject.panels.length - 1; i >= 0; i--) {
-      let panel = thisObject.panels[i]
-      let owner = canvas.chartingSpace.inViewport.get(panel.owner)
-      if (owner !== undefined) {
-        if (panel.isVisible === true && panel.isHidden === false) {
-          container = panel.getContainer(point, purpose)
+            if (panel.handle === pPanelHandle) {
+                return panel
+            }
         }
-      }
-      if (container !== undefined) {
-        container.space = 'Panels Space'
-        return container
-      }
     }
-    // thisObject.container.space = 'Panels Space'
-    // return thisObject.container
-  }
+
+    function physics() {
+        if (thisObject.visible !== true) { return }
+
+        childrenPhysics()
+        positioningPhysics()
+    }
+
+    function childrenPhysics() {
+        if (thisObject.panels !== undefined) {
+            for (let i = 0; i < thisObject.panels.length; i++) {
+                let panel = thisObject.panels[i]
+                let owner = canvas.chartingSpace.inViewport.get(panel.owner)
+                if (owner !== undefined) {
+                    if (panel.physics !== undefined) {
+                        panel.physics()
+                    }
+                }
+            }
+        }
+    }
+
+    function positioningPhysics() {
+        if (thisObject.panels !== undefined) {
+            for (let i = 0; i < thisObject.panels.length; i++) {
+                let panel = thisObject.panels[i]
+                if (panel.isVisible === false || panel.isHidden === true) { continue }
+                /* setting the speed of the panel */
+                if (panel.container.speed === undefined) {
+                    panel.container.speed = {
+                        x: 2,
+                        y: 2
+                    }
+                }
+
+                /* Trying to move the panel and see if it is possible */
+                let centerPoint = {
+                    x: panel.container.frame.position.x,
+                    y: panel.container.frame.position.y
+                }
+                centerPoint.x = centerPoint.x + panel.container.frame.width / 2
+                centerPoint.y = centerPoint.y + panel.container.frame.height / 2
+
+                /* Lets see which quadrant the panel is at */
+                let verticalLine = (canvas.chartingSpace.viewport.visibleArea.topRight.x - canvas.chartingSpace.viewport.visibleArea.topLeft.x) / 2 + canvas.chartingSpace.viewport.visibleArea.topLeft.x
+                let horizontalLine = (canvas.chartingSpace.viewport.visibleArea.bottomRight.y - canvas.chartingSpace.viewport.visibleArea.topRight.y) / 2 + canvas.chartingSpace.viewport.visibleArea.topRight.y
+
+                if (panel.upDownButton !== undefined) {
+                    if (panel.upDownButton.status === 'up') {
+                        if (panel.leftRightButton !== undefined) {
+                            if (panel.leftRightButton.status === 'left') {
+                                panel.gravitatesTowards = 'topLeft'
+                            } else {
+                                panel.gravitatesTowards = 'topRight'
+                            }
+                        } else {
+                            if (centerPoint.x < verticalLine) {
+                                panel.gravitatesTowards = 'topLeft'
+                            } else {
+                                panel.gravitatesTowards = 'topRight'
+                            }
+                        }
+                    } else {
+                        if (panel.leftRightButton !== undefined) {
+                            if (panel.leftRightButton.status === 'left') {
+                                panel.gravitatesTowards = 'bottomLeft'
+                            } else {
+                                panel.gravitatesTowards = 'bottomRight'
+                            }
+                        } else {
+                            if (centerPoint.x < verticalLine) {
+                                panel.gravitatesTowards = 'bottomLeft'
+                            } else {
+                                panel.gravitatesTowards = 'bottomRight'
+                            }
+                        }
+                    }
+                } else {
+                    if (centerPoint.x < verticalLine && centerPoint.y < horizontalLine) {
+                        panel.gravitatesTowards = 'topLeft'
+                    }
+                    if (centerPoint.x >= verticalLine && centerPoint.y < horizontalLine) {
+                        panel.gravitatesTowards = 'topRight'
+                    }
+                    if (centerPoint.x < verticalLine && centerPoint.y >= horizontalLine) {
+                        panel.gravitatesTowards = 'bottomLeft'
+                    }
+                    if (centerPoint.x >= verticalLine && centerPoint.y >= horizontalLine) {
+                        panel.gravitatesTowards = 'bottomRight'
+                    }
+                }
+
+                /* According to the quadrant we push the panels to the sides */
+                if (panel.gravitatesTowards === 'topLeft' || panel.gravitatesTowards === 'bottomLeft') {
+                    panel.container.frame.position.x = panel.container.frame.position.x - panel.container.speed.x
+                    if (panel.leftRightButton !== undefined) {
+                        if (panel.leftRightButton.status === 'left' || panel.leftRightButton.status === 'right') { // we avoid pushing other panels while in transition
+                        }
+                    }
+                    isOverlapping(i, panel.container)
+                    if (panel.container.frame.position.x < 0) {
+                        panel.container.frame.position.x = 0
+                    }
+                } else {
+                    panel.container.frame.position.x = panel.container.frame.position.x + panel.container.speed.x
+                    isOverlapping(i, panel.container)
+                    if (panel.container.frame.position.x + panel.container.frame.width > browserCanvas.width) {
+                        panel.container.frame.position.x = browserCanvas.width - panel.container.frame.width
+                    }
+                }
+                if (panel.container.frame.height <= canvas.chartingSpace.viewport.visibleArea.bottomRight.y - canvas.chartingSpace.viewport.visibleArea.topRight.y) {
+                    if (panel.gravitatesTowards === 'topLeft' || panel.gravitatesTowards === 'topRight') {
+                        panel.container.frame.position.y = panel.container.frame.position.y - panel.container.speed.y
+                        isOverlapping(i, panel.container)
+                        if (panel.container.frame.position.y < canvas.chartingSpace.viewport.visibleArea.topLeft.y) {
+                            panel.container.frame.position.y = canvas.chartingSpace.viewport.visibleArea.topLeft.y
+                        }
+                    } else {
+                        panel.container.frame.position.y = panel.container.frame.position.y + panel.container.speed.y
+                        isOverlapping(i, panel.container)
+                        if (panel.container.frame.position.y + panel.container.frame.height > canvas.chartingSpace.viewport.visibleArea.bottomRight.y) {
+                            panel.container.frame.position.y = canvas.chartingSpace.viewport.visibleArea.bottomRight.y - panel.container.frame.height
+                        }
+                    }
+                }
+            }
+        }
+
+        function isOverlapping(currentIndex, currentContainer) {
+            let corner1 = {
+                x: currentContainer.frame.position.x,
+                y: currentContainer.frame.position.y
+            }
+            let corner2 = {
+                x: currentContainer.frame.position.x + currentContainer.frame.width,
+                y: currentContainer.frame.position.y
+            }
+            let corner3 = {
+                x: currentContainer.frame.position.x + currentContainer.frame.width,
+                y: currentContainer.frame.position.y + currentContainer.frame.height
+            }
+            let corner4 = {
+                x: currentContainer.frame.position.x,
+                y: currentContainer.frame.position.y + currentContainer.frame.height
+            }
+
+            for (let i = 0; i < currentIndex; i++) {
+                let panel = thisObject.panels[i]
+                if (panel.leftRightButton !== undefined) {
+                    if (panel.leftRightButton.status !== 'left' && panel.leftRightButton.status !== 'right') { // we avoid pushing other panels while in transition
+                        continue
+                    }
+                }
+                if (panel.isVisible === true && panel.isHidden === false) {
+                    if (isThisPointInsideThisFrame(corner1, panel.container.frame) === true) {
+                        pushOut(currentContainer, panel.container, panel.gravitatesTowards)
+                    }
+                    if (isThisPointInsideThisFrame(corner2, panel.container.frame) === true) {
+                        pushOut(currentContainer, panel.container, panel.gravitatesTowards)
+                    }
+                    if (isThisPointInsideThisFrame(corner3, panel.container.frame) === true) {
+                        pushOut(currentContainer, panel.container, panel.gravitatesTowards)
+                    }
+                    if (isThisPointInsideThisFrame(corner4, panel.container.frame) === true) {
+                        pushOut(currentContainer, panel.container, panel.gravitatesTowards)
+                    }
+                }
+            }
+
+            function pushOut(currentContainer, controlContainer, corner) {
+                switch (corner) {
+                    case 'topLeft': {
+                        currentContainer.frame.position.x = controlContainer.frame.position.x + controlContainer.frame.width
+                        break
+                    }
+                    case 'topRight': {
+                        currentContainer.frame.position.x = controlContainer.frame.position.x - currentContainer.frame.width
+                        break
+                    }
+                    case 'bottomLeft': {
+                        currentContainer.frame.position.x = controlContainer.frame.position.x + controlContainer.frame.width
+                        break
+                    }
+                    case 'bottomRight': {
+                        currentContainer.frame.position.x = controlContainer.frame.position.x - currentContainer.frame.width
+                        break
+                    }
+                }
+            }
+
+            function isThisPointInsideThisFrame(point, frame) {
+                let corner1 = {
+                    x: frame.position.x,
+                    y: frame.position.y
+                }
+                let corner2 = {
+                    x: frame.position.x + frame.width,
+                    y: frame.position.y
+                }
+                let corner3 = {
+                    x: frame.position.x + frame.width,
+                    y: frame.position.y + frame.height
+                }
+                let corner4 = {
+                    x: frame.position.x,
+                    y: frame.position.y + frame.height
+                }
+                if (point.x >= corner1.x && point.y >= corner1.y && point.x <= corner3.x && point.y <= corner3.y) {
+                    return true
+                } else {
+                    return false
+                }
+            }
+            return false
+        }
+    }
+
+    function draw() {
+        if (canWeDraw === false) { return }
+        if (thisObject.visible !== true) { return }
+
+        thisObject.container.frame.draw(false, false)
+
+        for (let i = 0; i < thisObject.panels.length; i++) {
+            let panel = thisObject.panels[i]
+            let owner = canvas.chartingSpace.inViewport.get(panel.owner)
+            if (owner !== undefined) {
+                if (panel.isVisible === true && panel.isHidden === false) {
+                    panel.draw()
+                }
+            }
+        }
+    }
+
+    function getContainer(point, purpose) {
+        if (thisObject.visible !== true) { return }
+
+        let container
+        /*
+        We search for the container of panels in the oposite direction than we do it for drawing them,
+        so panels overlapping others are picked firt although they are drawn last.
+        */
+        for (let i = thisObject.panels.length - 1; i >= 0; i--) {
+            let panel = thisObject.panels[i]
+            let owner = canvas.chartingSpace.inViewport.get(panel.owner)
+            if (owner !== undefined) {
+                if (panel.isVisible === true && panel.isHidden === false) {
+                    container = panel.getContainer(point, purpose)
+                }
+            }
+            if (container !== undefined) {
+                container.space = 'Panels Space'
+                return container
+            }
+        }
+        // thisObject.container.space = 'Panels Space'
+        // return thisObject.container
+    }
 }

Spaces/SideSpace.js

@@ -1,168 +1,168 @@
-function newSideSpace () {
-  const MODULE_NAME = 'Side Space'
-  let thisObject = {
-    sidePanelTab: undefined,
-    container: undefined,
-    physics: physics,
-    draw: draw,
-    getContainer: getContainer,
-    initialize: initialize,
-    finalize: finalize
-  }
-
-  let isInitialized = false
-
-  thisObject.container = newContainer()
-  thisObject.container.name = MODULE_NAME
-  thisObject.container.initialize()
-  thisObject.container.isClickeable = true
-  thisObject.container.isDraggeable = false
-  thisObject.container.detectMouseOver = true
-  thisObject.container.status = 'hidden'
-
-  let listView
-
-  resize()
-
-  let openingEventSubscriptionId
-  let closedEventSubscriptionId
-  let browserResizedEventSubscriptionId
-  return thisObject
-
-  function initialize () {
-    thisObject.sidePanelTab = newSidePanelTab()
-    thisObject.sidePanelTab.container.connectToParent(thisObject.container, false, false)
-    thisObject.sidePanelTab.initialize()
-
-    browserResizedEventSubscriptionId = canvas.eventHandler.listenToEvent('Browser Resized', resize)
-
-    initializeListView()
-    isInitialized = true
-  }
-
-  function finalize () {
-    canvas.eventHandler.stopListening(browserResizedEventSubscriptionId)
-    thisObject.sidePanelTab.container.eventHandler.stopListening(openingEventSubscriptionId)
-    thisObject.sidePanelTab.container.eventHandler.stopListening(closedEventSubscriptionId)
-  }
-
-  function initializeListView () {
-    listView = newListView()
-    listView.initialize()
-    listView.container.connectToParent(thisObject.container, false, false)
-    openingEventSubscriptionId = thisObject.sidePanelTab.container.eventHandler.listenToEvent('opening', listView.turnOn)
-    closedEventSubscriptionId = thisObject.sidePanelTab.container.eventHandler.listenToEvent('closed', listView.turnOff)
-  }
-
-  function resize () {
-    thisObject.container.frame.width = SIDE_PANEL_WIDTH
-    thisObject.container.frame.height = browserCanvas.height // - TOP_SPACE_HEIGHT
-    thisObject.container.frame.position.x = -SIDE_PANEL_WIDTH
-    thisObject.container.frame.position.y = 0 // TOP_SPACE_HEIGHT
-
-    if (listView !== undefined) {
-      listView.resize()
+function newSideSpace() {
+    const MODULE_NAME = 'Side Space'
+    let thisObject = {
+        sidePanelTab: undefined,
+        container: undefined,
+        physics: physics,
+        draw: draw,
+        getContainer: getContainer,
+        initialize: initialize,
+        finalize: finalize
     }
 
-    if (thisObject.sidePanelTab !== undefined) {
-      thisObject.sidePanelTab.resize()
-    }
-  }
+    let isInitialized = false
 
-  function getContainer (point, purpose) {
-    let container
+    thisObject.container = newContainer()
+    thisObject.container.name = MODULE_NAME
+    thisObject.container.initialize()
+    thisObject.container.isClickeable = true
+    thisObject.container.isDraggeable = false
+    thisObject.container.detectMouseOver = true
+    thisObject.container.status = 'hidden'
 
-    container = thisObject.sidePanelTab.getContainer(point, purpose)
-    if (container !== undefined) { return container }
+    let listView
 
-    container = listView.getContainer(point, purpose)
-    if (container !== undefined) { return container }
+    resize()
 
-    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-      return thisObject.container
-    } else {
-      return undefined
-    }
-  }
+    let openingEventSubscriptionId
+    let closedEventSubscriptionId
+    let browserResizedEventSubscriptionId
+    return thisObject
 
-  function physics () {
-    thisObject.sidePanelTab.physics()
-    listView.physics()
-  }
+    function initialize() {
+        thisObject.sidePanelTab = newSidePanelTab()
+        thisObject.sidePanelTab.container.connectToParent(thisObject.container, false, false)
+        thisObject.sidePanelTab.initialize()
 
-  function draw () {
-    if (canWeDraw === false) { return }
-    if (isInitialized === false) { return }
-    borders()
-    thisObject.sidePanelTab.draw()
-    listView.draw()
-  }
+        browserResizedEventSubscriptionId = canvas.eventHandler.listenToEvent('Browser Resized', resize)
 
-  function borders () {
-    let point1
-    let point2
-    let point3
-    let point4
-
-    point1 = {
-      x: 0,
-      y: 0
+        initializeListView()
+        isInitialized = true
     }
 
-    point2 = {
-      x: thisObject.container.frame.width,
-      y: 0
+    function finalize() {
+        canvas.eventHandler.stopListening(browserResizedEventSubscriptionId)
+        thisObject.sidePanelTab.container.eventHandler.stopListening(openingEventSubscriptionId)
+        thisObject.sidePanelTab.container.eventHandler.stopListening(closedEventSubscriptionId)
     }
 
-    point3 = {
-      x: thisObject.container.frame.width,
-      y: thisObject.container.frame.height
+    function initializeListView() {
+        listView = newListView()
+        listView.initialize()
+        listView.container.connectToParent(thisObject.container, false, false)
+        openingEventSubscriptionId = thisObject.sidePanelTab.container.eventHandler.listenToEvent('opening', listView.turnOn)
+        closedEventSubscriptionId = thisObject.sidePanelTab.container.eventHandler.listenToEvent('closed', listView.turnOff)
     }
 
-    point4 = {
-      x: 0,
-      y: thisObject.container.frame.height
+    function resize() {
+        thisObject.container.frame.width = SIDE_PANEL_WIDTH
+        thisObject.container.frame.height = browserCanvas.height // - TOP_SPACE_HEIGHT
+        thisObject.container.frame.position.x = -SIDE_PANEL_WIDTH
+        thisObject.container.frame.position.y = 0 // TOP_SPACE_HEIGHT
+
+        if (listView !== undefined) {
+            listView.resize()
+        }
+
+        if (thisObject.sidePanelTab !== undefined) {
+            thisObject.sidePanelTab.resize()
+        }
     }
 
-    point1 = thisObject.container.frame.frameThisPoint(point1)
-    point2 = thisObject.container.frame.frameThisPoint(point2)
-    point3 = thisObject.container.frame.frameThisPoint(point3)
-    point4 = thisObject.container.frame.frameThisPoint(point4)
+    function getContainer(point, purpose) {
+        let container
 
-    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.lineTo(point4.x, point4.y)
-    browserCanvasContext.lineTo(point1.x, point1.y)
-    browserCanvasContext.closePath()
+        container = thisObject.sidePanelTab.getContainer(point, purpose)
+        if (container !== undefined) { return container }
 
-    let opacity = 1
+        container = listView.getContainer(point, purpose)
+        if (container !== undefined) { return container }
 
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.LIGHT_GREY + ', ' + opacity + ''
-    browserCanvasContext.fill()
+        if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+            return thisObject.container
+        } else {
+            return undefined
+        }
+    }
 
-    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREY + ', ' + opacity + ''
-    browserCanvasContext.lineWidth = 0.3
-    browserCanvasContext.stroke()
+    function physics() {
+        thisObject.sidePanelTab.physics()
+        listView.physics()
+    }
 
-    /* Shadow */
+    function draw() {
+        if (canWeDraw === false) { return }
+        if (isInitialized === false) { return }
+        borders()
+        thisObject.sidePanelTab.draw()
+        listView.draw()
+    }
 
-    if (thisObject.container.status !== 'hidden') {
-      for (let i = 0; i <= 30; i++) {
-        opacity = 1 - (i / 300) - 0.95
+    function borders() {
+        let point1
+        let point2
+        let point3
+        let point4
+
+        point1 = {
+            x: 0,
+            y: 0
+        }
+
+        point2 = {
+            x: thisObject.container.frame.width,
+            y: 0
+        }
+
+        point3 = {
+            x: thisObject.container.frame.width,
+            y: thisObject.container.frame.height
+        }
+
+        point4 = {
+            x: 0,
+            y: thisObject.container.frame.height
+        }
+
+        point1 = thisObject.container.frame.frameThisPoint(point1)
+        point2 = thisObject.container.frame.frameThisPoint(point2)
+        point3 = thisObject.container.frame.frameThisPoint(point3)
+        point4 = thisObject.container.frame.frameThisPoint(point4)
 
         browserCanvasContext.setLineDash([0, 0])
         browserCanvasContext.beginPath()
-        browserCanvasContext.moveTo(point2.x + i, point2.y)
-        browserCanvasContext.lineTo(point3.x + i, point3.y)
+        browserCanvasContext.moveTo(point1.x, point1.y)
+        browserCanvasContext.lineTo(point2.x, point2.y)
+        browserCanvasContext.lineTo(point3.x, point3.y)
+        browserCanvasContext.lineTo(point4.x, point4.y)
+        browserCanvasContext.lineTo(point1.x, point1.y)
         browserCanvasContext.closePath()
 
-        browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + opacity + ''
-        browserCanvasContext.lineWidth = 1
+        let opacity = 1
+
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.LIGHT_GREY + ', ' + opacity + ''
+        browserCanvasContext.fill()
+
+        browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREY + ', ' + opacity + ''
+        browserCanvasContext.lineWidth = 0.3
         browserCanvasContext.stroke()
-      }
+
+        /* Shadow */
+
+        if (thisObject.container.status !== 'hidden') {
+            for (let i = 0; i <= 30; i++) {
+                opacity = 1 - (i / 300) - 0.95
+
+                browserCanvasContext.setLineDash([0, 0])
+                browserCanvasContext.beginPath()
+                browserCanvasContext.moveTo(point2.x + i, point2.y)
+                browserCanvasContext.lineTo(point3.x + i, point3.y)
+                browserCanvasContext.closePath()
+
+                browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + opacity + ''
+                browserCanvasContext.lineWidth = 1
+                browserCanvasContext.stroke()
+            }
+        }
     }
-  }
 }

Spaces/TopSpace.js

@@ -1,109 +1,109 @@
 
-function newTopSpace () {
-  let thisObject = {
-    container: undefined,
-    draw: draw,
-    getContainer: getContainer,
-    initialize: initialize
-  }
-
-  thisObject.container = newContainer()
-  thisObject.container.initialize()
-
-  resize()
-
-  thisObject.container.isDraggeable = false
-  let backgroundImage
-  let logoImage
-  return thisObject
-
-  function initialize () {
-    canvas.eventHandler.listenToEvent('Browser Resized', resize)
-
-    backgroundImage = new Image()
-    logoImage = new Image()
-
-    loadImage('superalgos-header-background', backgroundImage)
-    loadImage('superalgos-logo-for-color-background', logoImage)
-
-    function loadImage (name, image) {
-      const PATH = 'Images/'
-
-      image.onload = onImageLoad
-      image.fileName = name
-
-      function onImageLoad () {
-        image.canDraw = true
-      }
-      image.src = window.canvasApp.urlPrefix + PATH + name + '.png'
+function newTopSpace() {
+    let thisObject = {
+        container: undefined,
+        draw: draw,
+        getContainer: getContainer,
+        initialize: initialize
     }
-  }
 
-  function resize () {
-    thisObject.container.frame.width = browserCanvas.width
-    thisObject.container.frame.height = TOP_SPACE_HEIGHT
+    thisObject.container = newContainer()
+    thisObject.container.initialize()
 
-    thisObject.container.frame.position.x = 0
-    try {
-      thisObject.container.frame.position.y = canvas.chartingSpace.viewport.visibleArea.bottomLeft.y
-    } catch (e) { }
-  }
+    resize()
 
-  function getContainer (point) {
+    thisObject.container.isDraggeable = false
+    let backgroundImage
+    let logoImage
+    return thisObject
 
-  }
+    function initialize() {
+        canvas.eventHandler.listenToEvent('Browser Resized', resize)
 
-  function draw () {
-    if (canWeDraw === false) { return }
-    thisObject.container.frame.draw(false, false)
+        backgroundImage = new Image()
+        logoImage = new Image()
 
-    drawBackground()
-    return
-  }
+        loadImage('superalgos-header-background', backgroundImage)
+        loadImage('superalgos-logo-for-color-background', logoImage)
 
-  function drawBackground () {
-    /* Solid Color */
-    let opacity = 1
-    browserCanvasContext.beginPath()
-    browserCanvasContext.rect(0, 0, thisObject.container.frame.width, thisObject.container.frame.height)
-    if (ARE_WE_RECORDING_A_VIDEO === true) {
-      browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', ' + opacity + ')'
-    } else {
-      browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')'
+        function loadImage(name, image) {
+            const PATH = 'Images/'
+
+            image.onload = onImageLoad
+            image.fileName = name
+
+            function onImageLoad() {
+                image.canDraw = true
+            }
+            image.src = window.canvasApp.urlPrefix + PATH + name + '.png'
+        }
     }
-    browserCanvasContext.closePath()
-    browserCanvasContext.fill()
 
-    /* Background Image */
-    if (backgroundImage !== undefined) {
-      if (backgroundImage.canDraw === true) {
-        let imagePosition = {
-          x: 0,
-          y: 0
+    function resize() {
+        thisObject.container.frame.width = browserCanvas.width
+        thisObject.container.frame.height = TOP_SPACE_HEIGHT
+
+        thisObject.container.frame.position.x = 0
+        try {
+            thisObject.container.frame.position.y = canvas.chartingSpace.viewport.visibleArea.bottomLeft.y
+        } catch (e) { }
+    }
+
+    function getContainer(point) {
+
+    }
+
+    function draw() {
+        if (canWeDraw === false) { return }
+        thisObject.container.frame.draw(false, false)
+
+        drawBackground()
+        return
+    }
+
+    function drawBackground() {
+        /* Solid Color */
+        let opacity = 1
+        browserCanvasContext.beginPath()
+        browserCanvasContext.rect(0, 0, thisObject.container.frame.width, thisObject.container.frame.height)
+        if (ARE_WE_RECORDING_A_VIDEO === true) {
+            browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', ' + opacity + ')'
+        } else {
+            browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')'
+        }
+        browserCanvasContext.closePath()
+        browserCanvasContext.fill()
+
+        /* Background Image */
+        if (backgroundImage !== undefined) {
+            if (backgroundImage.canDraw === true) {
+                let imagePosition = {
+                    x: 0,
+                    y: 0
+                }
+
+                browserCanvasContext.drawImage(
+                    backgroundImage, imagePosition.x,
+                    imagePosition.y,
+                    browserCanvas.width,
+                    TOP_SPACE_HEIGHT - 2)
+            }
         }
 
-        browserCanvasContext.drawImage(
-          backgroundImage, imagePosition.x,
-          imagePosition.y,
-          browserCanvas.width,
-          TOP_SPACE_HEIGHT - 2)
-      }
-    }
+        /* Logo Image */
+        if (logoImage !== undefined) {
+            if (logoImage.canDraw === true) {
+                let imagePosition = {
+                    x: 10,
+                    y: 0
+                }
 
-    /* Logo Image */
-    if (logoImage !== undefined) {
-      if (logoImage.canDraw === true) {
-        let imagePosition = {
-          x: 10,
-          y: 0
+                browserCanvasContext.drawImage(
+                    logoImage, imagePosition.x,
+                    imagePosition.y,
+                    150,
+                    TOP_SPACE_HEIGHT - 2)
+            }
         }
-
-        browserCanvasContext.drawImage(
-          logoImage, imagePosition.x,
-          imagePosition.y,
-          150,
-          TOP_SPACE_HEIGHT - 2)
-      }
     }
-  }
 }

SplashScreen.js

@@ -1,160 +1,160 @@
- /*
+/*
 
 The Splash Screen is to show some 'loading...' controls while the app is being loaded on the background. After the loading is complete the Splash Screens dissapears for good.
 
 */
 
-function newSplashScreen () {
-  let thisObject = {
-    container: undefined,
-    draw: draw,
-    timeMachines: [],
-    getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
-    initialize: initialize
-  }
-
-  let container = newContainer()
-  container.initialize()
-  thisObject.container = container
-
-  resize()
-
-  container.frame.containerName = 'Splash Screen'
-
-  container.frame.position.x = 0
-  container.frame.position.y = 0
-
-  container.isDraggeable = false
-
-  let fadeOutCounter = 0
-  let opacity = 1
-
-  let logo
-  let canDrawLogo = false
-  let isInitialized = false
-  let splashScreenNeeded = true
-
-  return thisObject
-
-  function initialize () {
-    logo = new Image()
-    logo.onload = onImageLoad
-
-    function onImageLoad () {
-      canDrawLogo = true
-    }
-    logo.src = window.canvasApp.urlPrefix + 'Images/superalgos-logo.png'
-    canvas.eventHandler.listenToEvent('Browser Resized', resize)
-
-    isInitialized = true
-  }
-
-  function resize () {
-    thisObject.container.frame.width = browserCanvas.width
-    thisObject.container.frame.height = browserCanvas.height
-  }
-
-  function draw () {
-    if (isInitialized === false) { return }
-    if (splashScreenNeeded === false) {
-      stepsInitializationCounter = 100
-      canDrawLogo = false
-
-      fadeOutCounter++
-
-      if (fadeOutCounter > 2) {
-        return
-      }
-      opacity = opacity - 1
+function newSplashScreen() {
+    let thisObject = {
+        container: undefined,
+        draw: draw,
+        timeMachines: [],
+        getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
+        initialize: initialize
     }
 
-    thisObject.container.frame.draw(false, false)
+    let container = newContainer()
+    container.initialize()
+    thisObject.container = container
+
+    resize()
+
+    container.frame.containerName = 'Splash Screen'
+
+    container.frame.position.x = 0
+    container.frame.position.y = 0
+
+    container.isDraggeable = false
+
+    let fadeOutCounter = 0
+    let opacity = 1
+
+    let logo
+    let canDrawLogo = false
+    let isInitialized = false
+    let splashScreenNeeded = true
+
+    return thisObject
+
+    function initialize() {
+        logo = new Image()
+        logo.onload = onImageLoad
+
+        function onImageLoad() {
+            canDrawLogo = true
+        }
+        logo.src = window.canvasApp.urlPrefix + 'Images/superalgos-logo.png'
+        canvas.eventHandler.listenToEvent('Browser Resized', resize)
+
+        isInitialized = true
+    }
+
+    function resize() {
+        thisObject.container.frame.width = browserCanvas.width
+        thisObject.container.frame.height = browserCanvas.height
+    }
+
+    function draw() {
+        if (isInitialized === false) { return }
+        if (splashScreenNeeded === false) {
+            stepsInitializationCounter = 100
+            canDrawLogo = false
+
+            fadeOutCounter++
+
+            if (fadeOutCounter > 2) {
+                return
+            }
+            opacity = opacity - 1
+        }
+
+        thisObject.container.frame.draw(false, false)
 
         /* Set the background. */
 
-    browserCanvasContext.beginPath()
-    browserCanvasContext.rect(0, 0, thisObject.container.frame.width, thisObject.container.frame.height)
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')'
-    browserCanvasContext.closePath()
-    browserCanvasContext.fill()
+        browserCanvasContext.beginPath()
+        browserCanvasContext.rect(0, 0, thisObject.container.frame.width, thisObject.container.frame.height)
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')'
+        browserCanvasContext.closePath()
+        browserCanvasContext.fill()
 
-    if (canDrawLogo === false) { return }
+        if (canDrawLogo === false) { return }
 
         /* First the AA Logo. */
 
-    let imageHeight = 192 / 2
-    let imageWidth = 720 / 2
-    let yDisplacement = -60
-    let xDisplacement = -60
+        let imageHeight = 192 / 2
+        let imageWidth = 720 / 2
+        let yDisplacement = -60
+        let xDisplacement = -60
 
-    let imagePoint = {
-      x: thisObject.container.frame.width * 1 / 2 - imageWidth / 2 + xDisplacement,
-      y: thisObject.container.frame.height * 1 / 2 - imageHeight / 2 + yDisplacement
-    }
+        let imagePoint = {
+            x: thisObject.container.frame.width * 1 / 2 - imageWidth / 2 + xDisplacement,
+            y: thisObject.container.frame.height * 1 / 2 - imageHeight / 2 + yDisplacement
+        }
 
-    imagePoint = thisObject.container.frame.frameThisPoint(imagePoint)
+        imagePoint = thisObject.container.frame.frameThisPoint(imagePoint)
 
-    browserCanvasContext.drawImage(logo, imagePoint.x, imagePoint.y, imageWidth, imageHeight)
+        browserCanvasContext.drawImage(logo, imagePoint.x, imagePoint.y, imageWidth, imageHeight)
 
         /* Second the % of Advance. */
 
-    let label = '' + Math.trunc(stepsInitializationCounter) + ' %'
-    stepsInitializationCounter = stepsInitializationCounter + 5.0
+        let label = '' + Math.trunc(stepsInitializationCounter) + ' %'
+        stepsInitializationCounter = stepsInitializationCounter + 5.0
 
-    if (stepsInitializationCounter > 99) {
-      splashScreenNeeded = false
-      canWeDraw = true
-      stepsInitializationCounter = 99
-    }
+        if (stepsInitializationCounter > 99) {
+            splashScreenNeeded = false
+            canWeDraw = true
+            stepsInitializationCounter = 99
+        }
 
-    let fontSize = 15
+        let fontSize = 15
 
-    let labelPoint = {
-      x: thisObject.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 22,
-      y: thisObject.container.frame.height / 2 + fontSize / 2 + fontSize * 0.1 + 90 + yDisplacement
-    }
+        let labelPoint = {
+            x: thisObject.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 22,
+            y: thisObject.container.frame.height / 2 + fontSize / 2 + fontSize * 0.1 + 90 + yDisplacement
+        }
 
-    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-    browserCanvasContext.fillStyle = 'rgba(0, 0, 0,  ' + opacity + ')'
-    browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
+        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+        browserCanvasContext.fillStyle = 'rgba(0, 0, 0,  ' + opacity + ')'
+        browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
 
-    let title
-    let titlePoint
+        let title
+        let titlePoint
 
         /* Algo Bots Competitions Sub Title */
 
-    fontSize = 35
+        fontSize = 35
 
-    title = 'Beta 6'
+        title = 'Beta 6'
 
-    titlePoint = {
-      x: thisObject.container.frame.width / 2 - title.length / 2 * fontSize * FONT_ASPECT_RATIO - 20,
-      y: thisObject.container.frame.height / 2 + 70 + yDisplacement
+        titlePoint = {
+            x: thisObject.container.frame.width / 2 - title.length / 2 * fontSize * FONT_ASPECT_RATIO - 20,
+            y: thisObject.container.frame.height / 2 + 70 + yDisplacement
+        }
+
+        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+        browserCanvasContext.font = 'Saira Condensed'
+        browserCanvasContext.fillStyle = 'rgba(0, 0, 0,  ' + opacity + ')'
+        browserCanvasContext.fillText(title, titlePoint.x, titlePoint.y)
     }
 
-    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-    browserCanvasContext.font = 'Saira Condensed'
-    browserCanvasContext.fillStyle = 'rgba(0, 0, 0,  ' + opacity + ')'
-    browserCanvasContext.fillText(title, titlePoint.x, titlePoint.y)
-  }
-
-  function getContainer (point) {
-    var container
+    function getContainer(point) {
+        var container
 
         /* First we check if this point is inside this space. */
 
-    if (thisObject.container.frame.isThisPointHere(point) === true) {
+        if (thisObject.container.frame.isThisPointHere(point) === true) {
             /* Now we see which is the inner most container that has it */
 
             // add validation of inner most containers here.
 
             /* The point does not belong to any inner container, so we return the current container. */
 
-      return thisObject.container
-    } else {
+            return thisObject.container
+        } else {
             /* This point does not belong to this space. */
 
-      return undefined
+            return undefined
+        }
     }
-  }
 }

Utilities.js

@@ -1,90 +1,90 @@
-function getNodeDefinition (node) {
-  let key = node.type
-  return APP_SCHEMA_MAP.get(key)
+function getNodeDefinition(node) {
+    let key = node.type
+    return APP_SCHEMA_MAP.get(key)
 }
 
-function dynamicDecimals (value, minDecimals) {
-  if (minDecimals === undefined) {
-    minDecimals = 0
-  }
-  let decimals = 2
-  if (value < 1) { decimals = 4 }
-  if (Math.abs(Math.trunc(value * 100)) < 1) { decimals = 6 }
-  if (Math.abs(Math.trunc(value * 10000)) < 1) { decimals = 8 }
-  if (Math.abs(Math.trunc(value * 1000000)) < 1) { decimals = 10 }
-  if (Math.abs(Math.trunc(value * 100000000)) < 1) { decimals = 12 }
-  if (Math.abs(Math.trunc(value * 10000000000)) < 1) { value = 0; decimals = 0 }
-  if (Math.trunc(value) === value) { decimals = minDecimals }
-  let returnValue = Number(value).toFixed(decimals)
-  return returnValue
-}
-
-function convertTimeFrameToName (pTimeFrame) {
-  for (let i = 0; i < dailyFilePeriods.length; i++) {
-    let period = dailyFilePeriods[i]
-    if (period[0] === pTimeFrame) {
-      return period[1]
+function dynamicDecimals(value, minDecimals) {
+    if (minDecimals === undefined) {
+        minDecimals = 0
     }
-  }
+    let decimals = 2
+    if (value < 1) { decimals = 4 }
+    if (Math.abs(Math.trunc(value * 100)) < 1) { decimals = 6 }
+    if (Math.abs(Math.trunc(value * 10000)) < 1) { decimals = 8 }
+    if (Math.abs(Math.trunc(value * 1000000)) < 1) { decimals = 10 }
+    if (Math.abs(Math.trunc(value * 100000000)) < 1) { decimals = 12 }
+    if (Math.abs(Math.trunc(value * 10000000000)) < 1) { value = 0; decimals = 0 }
+    if (Math.trunc(value) === value) { decimals = minDecimals }
+    let returnValue = Number(value).toFixed(decimals)
+    return returnValue
+}
 
-  for (let i = 0; i < marketFilesPeriods.length; i++) {
-    let period = marketFilesPeriods[i]
-    if (period[0] === pTimeFrame) {
-      return period[1]
+function convertTimeFrameToName(pTimeFrame) {
+    for (let i = 0; i < dailyFilePeriods.length; i++) {
+        let period = dailyFilePeriods[i]
+        if (period[0] === pTimeFrame) {
+            return period[1]
+        }
     }
-  }
-}
 
-function nextPorwerOf10 (number) {
-  for (let i = -10; i <= 10; i++) {
-    if (number < Math.pow(10, i)) {
-      return Math.pow(10, i)
+    for (let i = 0; i < marketFilesPeriods.length; i++) {
+        let period = marketFilesPeriods[i]
+        if (period[0] === pTimeFrame) {
+            return period[1]
+        }
     }
-  }
 }
 
-function pad (str, max) {
-  str = str.toString()
-  return str.length < max ? pad('0' + str, max) : str
+function nextPorwerOf10(number) {
+    for (let i = -10; i <= 10; i++) {
+        if (number < Math.pow(10, i)) {
+            return Math.pow(10, i)
+        }
+    }
 }
 
-function moveToUserPosition (container, currentDate, currentRate, coordinateSystem, ignoreX, ignoreY, mousePosition, fitFunction) {
-  let targetPoint = {
-    x: currentDate.valueOf(),
-    y: currentRate
-  }
-
-  /* Put this point in the coordinate system of the canvas.chartingSpace.viewport */
-  targetPoint = coordinateSystem.transformThisPoint(targetPoint)
-  targetPoint = transformThisPoint(targetPoint, container)
-
-  let displaceVector
-
-  let targetNoZoom = canvas.chartingSpace.viewport.unTransformThisPoint(targetPoint)
-  let mouseNoZoom = canvas.chartingSpace.viewport.unTransformThisPoint(mousePosition)
-
-  displaceVector = {
-    x: mouseNoZoom.x - targetNoZoom.x,
-    y: mouseNoZoom.y - targetNoZoom.y
-  }
-
-  if (ignoreX) { displaceVector.x = 0 }
-  if (ignoreY) { displaceVector.y = 0 }
-
-  container.displace(displaceVector)
+function pad(str, max) {
+    str = str.toString()
+    return str.length < max ? pad('0' + str, max) : str
 }
 
-function removeTime (datetime) {
-  if (datetime === undefined) { return }
+function moveToUserPosition(container, currentDate, currentRate, coordinateSystem, ignoreX, ignoreY, mousePosition, fitFunction) {
+    let targetPoint = {
+        x: currentDate.valueOf(),
+        y: currentRate
+    }
 
-  let dateOnly = new Date(Math.trunc(datetime.valueOf() / ONE_DAY_IN_MILISECONDS) * ONE_DAY_IN_MILISECONDS)
+    /* Put this point in the coordinate system of the canvas.chartingSpace.viewport */
+    targetPoint = coordinateSystem.transformThisPoint(targetPoint)
+    targetPoint = transformThisPoint(targetPoint, container)
 
-  return dateOnly
+    let displaceVector
+
+    let targetNoZoom = canvas.chartingSpace.viewport.unTransformThisPoint(targetPoint)
+    let mouseNoZoom = canvas.chartingSpace.viewport.unTransformThisPoint(mousePosition)
+
+    displaceVector = {
+        x: mouseNoZoom.x - targetNoZoom.x,
+        y: mouseNoZoom.y - targetNoZoom.y
+    }
+
+    if (ignoreX) { displaceVector.x = 0 }
+    if (ignoreY) { displaceVector.y = 0 }
+
+    container.displace(displaceVector)
 }
 
-function newUniqueId () {
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-    var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8)
-    return v.toString(16)
-  })
+function removeTime(datetime) {
+    if (datetime === undefined) { return }
+
+    let dateOnly = new Date(Math.trunc(datetime.valueOf() / ONE_DAY_IN_MILISECONDS) * ONE_DAY_IN_MILISECONDS)
+
+    return dateOnly
+}
+
+function newUniqueId() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8)
+        return v.toString(16)
+    })
 }

Utilities/CoordinateTransformations.js

@@ -1,18 +1,18 @@
-function transformThisPoint (point, container) {
+function transformThisPoint(point, container) {
     /* We make the point relative to the current frame */
 
-  point = container.frame.frameThisPoint(point)
+    point = container.frame.frameThisPoint(point)
 
     /* We pass this point through the canvas.chartingSpace.viewport lends, meaning we apply the canvas.chartingSpace.viewport zoom and displacement. */
 
-  point = canvas.chartingSpace.viewport.transformThisPoint(point)
+    point = canvas.chartingSpace.viewport.transformThisPoint(point)
 
-  return point
+    return point
 }
 
-function unTransformThisPoint (point, container) {
-  point = canvas.chartingSpace.viewport.unTransformThisPoint(point)
-  point = container.frame.unframeThisPoint(point)
+function unTransformThisPoint(point, container) {
+    point = canvas.chartingSpace.viewport.unTransformThisPoint(point)
+    point = container.frame.unframeThisPoint(point)
 
-  return point
+    return point
 }

Utilities/DateRateTransformations.js

@@ -1,53 +1,53 @@
-function getDateFromPointAtBrowserCanvas (point, container, coordinateSystem) {
-  point = unTransformThisPoint(point, container)
-  point = coordinateSystem.unInverseTransform(point, container.frame.height)
+function getDateFromPointAtBrowserCanvas(point, container, coordinateSystem) {
+    point = unTransformThisPoint(point, container)
+    point = coordinateSystem.unInverseTransform(point, container.frame.height)
 
-  let date = new Date(point.x)
+    let date = new Date(point.x)
 
-  return date
+    return date
 }
 
-function getDateFromPointAtChartsSpace (point, container, coordinateSystem) {
-  point = container.frame.unframeThisPoint(point)
-  point = coordinateSystem.unInverseTransform(point, container.frame.height)
+function getDateFromPointAtChartsSpace(point, container, coordinateSystem) {
+    point = container.frame.unframeThisPoint(point)
+    point = coordinateSystem.unInverseTransform(point, container.frame.height)
 
-  let date = new Date(point.x)
+    let date = new Date(point.x)
 
-  return date
+    return date
 }
 
-function getDateFromPointAtContainer (point, container, coordinateSystem) {
-  point = coordinateSystem.unInverseTransform(point, container.frame.height)
+function getDateFromPointAtContainer(point, container, coordinateSystem) {
+    point = coordinateSystem.unInverseTransform(point, container.frame.height)
 
-  let date = new Date(point.x)
+    let date = new Date(point.x)
 
-  return date
+    return date
 }
 
-function getRateFromPointAtBrowserCanvas (point, container, coordinateSystem) {
-  point = unTransformThisPoint(point, container)
-  point = coordinateSystem.unInverseTransform(point, container.frame.height)
+function getRateFromPointAtBrowserCanvas(point, container, coordinateSystem) {
+    point = unTransformThisPoint(point, container)
+    point = coordinateSystem.unInverseTransform(point, container.frame.height)
 
-  return point.y
+    return point.y
 }
 
-function getRateFromPointAtChartingSpace (point, container, coordinateSystem) {
-  point = container.frame.unframeThisPoint(point)
-  point = coordinateSystem.unInverseTransform(point, container.frame.height)
+function getRateFromPointAtChartingSpace(point, container, coordinateSystem) {
+    point = container.frame.unframeThisPoint(point)
+    point = coordinateSystem.unInverseTransform(point, container.frame.height)
 
-  return point.y
+    return point.y
 }
 
-function getRateFromPointAtContainer (point, container, coordinateSystem) {
-  point = coordinateSystem.unInverseTransform(point, container.frame.height)
+function getRateFromPointAtContainer(point, container, coordinateSystem) {
+    point = coordinateSystem.unInverseTransform(point, container.frame.height)
 
-  return point.y
+    return point.y
 }
 
-function getMilisecondsFromPoint (point, container, coordinateSystem) {
-  point = unTransformThisPoint(point, container)
-  point = coordinateSystem.unInverseTransform(point, container.frame.height)
+function getMilisecondsFromPoint(point, container, coordinateSystem) {
+    point = unTransformThisPoint(point, container)
+    point = coordinateSystem.unInverseTransform(point, container.frame.height)
 
-  return point.x
+    return point.x
 }
 

Utilities/Download.js

@@ -1,58 +1,58 @@
-function downloadText (filename, text) {
-  let element = document.createElement('a')
-  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
-  element.setAttribute('download', filename)
-  element.style.display = 'none'
-  document.body.appendChild(element)
-  element.click()
-  document.body.removeChild(element)
+function downloadText(filename, text) {
+    let element = document.createElement('a')
+    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
+    element.setAttribute('download', filename)
+    element.style.display = 'none'
+    document.body.appendChild(element)
+    element.click()
+    document.body.removeChild(element)
 }
 
-function downloadCanvas (filename, canvasToUse) {
-  let data = canvasToUse.toDataURL('image/png', 1)
-  /* Change MIME type to trick the browser to downlaod the file instead of displaying it */
-  data = data.replace(/^data:image\/[^;]*/, 'data:application/octet-stream')
+function downloadCanvas(filename, canvasToUse) {
+    let data = canvasToUse.toDataURL('image/png', 1)
+    /* Change MIME type to trick the browser to downlaod the file instead of displaying it */
+    data = data.replace(/^data:image\/[^;]*/, 'data:application/octet-stream')
 
-  /* In addition to <a>'s "download" attribute, you can define HTTP-style headers */
-  data = data.replace(/^data:application\/octet-stream/, 'data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=' + filename + '.png')
+    /* In addition to <a>'s "download" attribute, you can define HTTP-style headers */
+    data = data.replace(/^data:application\/octet-stream/, 'data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=' + filename + '.png')
 
-  let element = document.createElement('a')
-  element.setAttribute('href', data)
-  element.setAttribute('download', filename + '.PNG')
-  element.style.display = 'none'
-  document.body.appendChild(element)
-  element.click()
-  document.body.removeChild(element)
+    let element = document.createElement('a')
+    element.setAttribute('href', data)
+    element.setAttribute('download', filename + '.PNG')
+    element.style.display = 'none'
+    document.body.appendChild(element)
+    element.click()
+    document.body.removeChild(element)
 };
 
-function downloadPanorama (filename) {
-  let INITIAL_WIDTH = 800
-  let FINAL_WIDTH = browserCanvas.width - INITIAL_WIDTH
+function downloadPanorama(filename) {
+    let INITIAL_WIDTH = 800
+    let FINAL_WIDTH = browserCanvas.width - INITIAL_WIDTH
 
-  if (ARE_WE_RECORDING_A_MARKET_PANORAMA === false) {
-    /* We start recording the panorame. */
-    ARE_WE_RECORDING_A_MARKET_PANORAMA = true
-    marketPanoramaCanvas = document.createElement('canvas')
-    marketPanoramaCanvas.width = INITIAL_WIDTH * 50
-    marketPanoramaCanvas.height = browserCanvas.height
-    marketPanoramaCanvas.getContext('2d').drawImage(browserCanvas, 0, 0, INITIAL_WIDTH, browserCanvas.height, 0, 0, INITIAL_WIDTH, browserCanvas.height)
-    CURRENT_PANORAMA_POSITION = INITIAL_WIDTH
-  } else {
-    /* We stop recording and download the resulting image. */
-    ARE_WE_RECORDING_A_MARKET_PANORAMA = false
-    marketPanoramaCanvas.getContext('2d').drawImage(browserCanvas, browserCanvas.width - FINAL_WIDTH, 0, FINAL_WIDTH, browserCanvas.height, CURRENT_PANORAMA_POSITION, 0, FINAL_WIDTH, browserCanvas.height)
-    let finalResultCanvas = document.createElement('canvas')
-    finalResultCanvas.width = CURRENT_PANORAMA_POSITION + FINAL_WIDTH
-    finalResultCanvas.height = browserCanvas.height
-    finalResultCanvas.getContext('2d').drawImage(marketPanoramaCanvas, 0, 0, finalResultCanvas.width, browserCanvas.height, 0, 0, finalResultCanvas.width, browserCanvas.height)
-    downloadCanvas(filename, finalResultCanvas)
-    marketPanoramaCanvas = undefined
-  }
+    if (ARE_WE_RECORDING_A_MARKET_PANORAMA === false) {
+        /* We start recording the panorame. */
+        ARE_WE_RECORDING_A_MARKET_PANORAMA = true
+        marketPanoramaCanvas = document.createElement('canvas')
+        marketPanoramaCanvas.width = INITIAL_WIDTH * 50
+        marketPanoramaCanvas.height = browserCanvas.height
+        marketPanoramaCanvas.getContext('2d').drawImage(browserCanvas, 0, 0, INITIAL_WIDTH, browserCanvas.height, 0, 0, INITIAL_WIDTH, browserCanvas.height)
+        CURRENT_PANORAMA_POSITION = INITIAL_WIDTH
+    } else {
+        /* We stop recording and download the resulting image. */
+        ARE_WE_RECORDING_A_MARKET_PANORAMA = false
+        marketPanoramaCanvas.getContext('2d').drawImage(browserCanvas, browserCanvas.width - FINAL_WIDTH, 0, FINAL_WIDTH, browserCanvas.height, CURRENT_PANORAMA_POSITION, 0, FINAL_WIDTH, browserCanvas.height)
+        let finalResultCanvas = document.createElement('canvas')
+        finalResultCanvas.width = CURRENT_PANORAMA_POSITION + FINAL_WIDTH
+        finalResultCanvas.height = browserCanvas.height
+        finalResultCanvas.getContext('2d').drawImage(marketPanoramaCanvas, 0, 0, finalResultCanvas.width, browserCanvas.height, 0, 0, finalResultCanvas.width, browserCanvas.height)
+        downloadCanvas(filename, finalResultCanvas)
+        marketPanoramaCanvas = undefined
+    }
 }
 
-function addToMarketPanorama () {
-  let SECTION_WIDTH = 80 * 2
-  let INITIAL_POSITION = 800 - SECTION_WIDTH
-  marketPanoramaCanvas.getContext('2d').drawImage(browserCanvas, INITIAL_POSITION, 0, SECTION_WIDTH, browserCanvas.height, CURRENT_PANORAMA_POSITION, 0, SECTION_WIDTH, browserCanvas.height)
-  CURRENT_PANORAMA_POSITION = CURRENT_PANORAMA_POSITION + SECTION_WIDTH
+function addToMarketPanorama() {
+    let SECTION_WIDTH = 80 * 2
+    let INITIAL_POSITION = 800 - SECTION_WIDTH
+    marketPanoramaCanvas.getContext('2d').drawImage(browserCanvas, INITIAL_POSITION, 0, SECTION_WIDTH, browserCanvas.height, CURRENT_PANORAMA_POSITION, 0, SECTION_WIDTH, browserCanvas.height)
+    CURRENT_PANORAMA_POSITION = CURRENT_PANORAMA_POSITION + SECTION_WIDTH
 }

Utilities/DrawPrint.js

@@ -1,221 +1,221 @@
-function roundedCornersBackground (params) {
-  if (params.xOffset === undefined) { params.xOffset = 0 }
-  borderPoint1 = {
-    x: params.cornerRadius + params.xOffset,
-    y: params.cornerRadius
-  }
-
-  borderPoint2 = {
-    x: params.container.frame.width - params.cornerRadius,
-    y: params.cornerRadius
-  }
-
-  borderPoint3 = {
-    x: params.container.frame.width - params.cornerRadius,
-    y: params.container.frame.height - params.cornerRadius
-  }
-
-  borderPoint4 = {
-    x: params.cornerRadius + params.xOffset,
-    y: params.container.frame.height - params.cornerRadius
-  }
-
-      /* Now the transformations. */
-
-  if (params.coordinateSystem !== undefined) { // For instance Candles would use this
-    borderPoint1 = params.coordinateSystem.transformThisPoint(borderPoint1)
-    borderPoint2 = params.coordinateSystem.transformThisPoint(borderPoint2)
-    borderPoint3 = params.coordinateSystem.transformThisPoint(borderPoint3)
-    borderPoint4 = params.coordinateSystem.transformThisPoint(borderPoint4)
-  } else {
-    if (params.outsideViewPort === true) { // If the element is not affected by zoom
-      borderPoint1 = transformThisPoint(borderPoint1, params.container)
-      borderPoint2 = transformThisPoint(borderPoint2, params.container)
-      borderPoint3 = transformThisPoint(borderPoint3, params.container)
-      borderPoint4 = transformThisPoint(borderPoint4, params.container)
-    } else { // For instance Panels use this
-      borderPoint1 = params.container.frame.frameThisPoint(borderPoint1)
-      borderPoint2 = params.container.frame.frameThisPoint(borderPoint2)
-      borderPoint3 = params.container.frame.frameThisPoint(borderPoint3)
-      borderPoint4 = params.container.frame.frameThisPoint(borderPoint4)
+function roundedCornersBackground(params) {
+    if (params.xOffset === undefined) { params.xOffset = 0 }
+    borderPoint1 = {
+        x: params.cornerRadius + params.xOffset,
+        y: params.cornerRadius
     }
-  }
 
-  if (params.fitFunction !== undefined) {
-    borderPoint1 = params.fitFunction(borderPoint1)
-    borderPoint2 = params.fitFunction(borderPoint2)
-    borderPoint3 = params.fitFunction(borderPoint3)
-    borderPoint4 = params.fitFunction(borderPoint4)
-  }
+    borderPoint2 = {
+        x: params.container.frame.width - params.cornerRadius,
+        y: params.cornerRadius
+    }
 
-  browserCanvasContext.setLineDash([0, 0])
+    borderPoint3 = {
+        x: params.container.frame.width - params.cornerRadius,
+        y: params.container.frame.height - params.cornerRadius
+    }
 
-        /* Shadow  */
+    borderPoint4 = {
+        x: params.cornerRadius + params.xOffset,
+        y: params.container.frame.height - params.cornerRadius
+    }
 
-  if (params.castShadow === true) {
-    let SHADOW_OFFSET = 2
+    /* Now the transformations. */
+
+    if (params.coordinateSystem !== undefined) { // For instance Candles would use this
+        borderPoint1 = params.coordinateSystem.transformThisPoint(borderPoint1)
+        borderPoint2 = params.coordinateSystem.transformThisPoint(borderPoint2)
+        borderPoint3 = params.coordinateSystem.transformThisPoint(borderPoint3)
+        borderPoint4 = params.coordinateSystem.transformThisPoint(borderPoint4)
+    } else {
+        if (params.outsideViewPort === true) { // If the element is not affected by zoom
+            borderPoint1 = transformThisPoint(borderPoint1, params.container)
+            borderPoint2 = transformThisPoint(borderPoint2, params.container)
+            borderPoint3 = transformThisPoint(borderPoint3, params.container)
+            borderPoint4 = transformThisPoint(borderPoint4, params.container)
+        } else { // For instance Panels use this
+            borderPoint1 = params.container.frame.frameThisPoint(borderPoint1)
+            borderPoint2 = params.container.frame.frameThisPoint(borderPoint2)
+            borderPoint3 = params.container.frame.frameThisPoint(borderPoint3)
+            borderPoint4 = params.container.frame.frameThisPoint(borderPoint4)
+        }
+    }
+
+    if (params.fitFunction !== undefined) {
+        borderPoint1 = params.fitFunction(borderPoint1)
+        borderPoint2 = params.fitFunction(borderPoint2)
+        borderPoint3 = params.fitFunction(borderPoint3)
+        borderPoint4 = params.fitFunction(borderPoint4)
+    }
+
+    browserCanvasContext.setLineDash([0, 0])
+
+    /* Shadow  */
+
+    if (params.castShadow === true) {
+        let SHADOW_OFFSET = 2
+
+        browserCanvasContext.beginPath()
+
+        browserCanvasContext.arc(borderPoint1.x + SHADOW_OFFSET, borderPoint1.y + SHADOW_OFFSET, params.cornerRadius, 1.0 * Math.PI, 1.5 * Math.PI)
+        browserCanvasContext.lineTo(borderPoint2.x + SHADOW_OFFSET, borderPoint2.y - params.cornerRadius + SHADOW_OFFSET)
+        browserCanvasContext.arc(borderPoint2.x + SHADOW_OFFSET, borderPoint2.y + SHADOW_OFFSET, params.cornerRadius, 1.5 * Math.PI, 2.0 * Math.PI)
+        browserCanvasContext.lineTo(borderPoint3.x + params.cornerRadius + SHADOW_OFFSET, borderPoint3.y + SHADOW_OFFSET)
+        browserCanvasContext.arc(borderPoint3.x + SHADOW_OFFSET, borderPoint3.y + SHADOW_OFFSET, params.cornerRadius, 0 * Math.PI, 0.5 * Math.PI)
+        browserCanvasContext.lineTo(borderPoint4.x + SHADOW_OFFSET, borderPoint4.y + params.cornerRadius + SHADOW_OFFSET)
+        browserCanvasContext.arc(borderPoint4.x + SHADOW_OFFSET, borderPoint4.y + SHADOW_OFFSET, params.cornerRadius, 0.5 * Math.PI, 1.0 * Math.PI)
+        browserCanvasContext.lineTo(borderPoint1.x - params.cornerRadius + SHADOW_OFFSET, borderPoint1.y + SHADOW_OFFSET)
+
+        browserCanvasContext.closePath()
+
+        browserCanvasContext.lineWidth = 10
+        browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + 0.01 + ')'
+        browserCanvasContext.stroke()
+
+        browserCanvasContext.lineWidth = 5
+        browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + 0.01 + ')'
+        browserCanvasContext.stroke()
+
+        browserCanvasContext.lineWidth = 1
+        browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + 0.15 + ')'
+        browserCanvasContext.stroke()
+    }
+
+    /* Background  */
 
     browserCanvasContext.beginPath()
 
-    browserCanvasContext.arc(borderPoint1.x + SHADOW_OFFSET, borderPoint1.y + SHADOW_OFFSET, params.cornerRadius, 1.0 * Math.PI, 1.5 * Math.PI)
-    browserCanvasContext.lineTo(borderPoint2.x + SHADOW_OFFSET, borderPoint2.y - params.cornerRadius + SHADOW_OFFSET)
-    browserCanvasContext.arc(borderPoint2.x + SHADOW_OFFSET, borderPoint2.y + SHADOW_OFFSET, params.cornerRadius, 1.5 * Math.PI, 2.0 * Math.PI)
-    browserCanvasContext.lineTo(borderPoint3.x + params.cornerRadius + SHADOW_OFFSET, borderPoint3.y + SHADOW_OFFSET)
-    browserCanvasContext.arc(borderPoint3.x + SHADOW_OFFSET, borderPoint3.y + SHADOW_OFFSET, params.cornerRadius, 0 * Math.PI, 0.5 * Math.PI)
-    browserCanvasContext.lineTo(borderPoint4.x + SHADOW_OFFSET, borderPoint4.y + params.cornerRadius + SHADOW_OFFSET)
-    browserCanvasContext.arc(borderPoint4.x + SHADOW_OFFSET, borderPoint4.y + SHADOW_OFFSET, params.cornerRadius, 0.5 * Math.PI, 1.0 * Math.PI)
-    browserCanvasContext.lineTo(borderPoint1.x - params.cornerRadius + SHADOW_OFFSET, borderPoint1.y + SHADOW_OFFSET)
+    browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, params.cornerRadius, 1.0 * Math.PI, 1.5 * Math.PI)
+    browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - params.cornerRadius)
+    browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, params.cornerRadius, 1.5 * Math.PI, 2.0 * Math.PI)
+    browserCanvasContext.lineTo(borderPoint3.x + params.cornerRadius, borderPoint3.y)
+    browserCanvasContext.arc(borderPoint3.x, borderPoint3.y, params.cornerRadius, 0 * Math.PI, 0.5 * Math.PI)
+    browserCanvasContext.lineTo(borderPoint4.x, borderPoint4.y + params.cornerRadius)
+    browserCanvasContext.arc(borderPoint4.x, borderPoint4.y, params.cornerRadius, 0.5 * Math.PI, 1.0 * Math.PI)
+    browserCanvasContext.lineTo(borderPoint1.x - params.cornerRadius, borderPoint1.y)
 
     browserCanvasContext.closePath()
 
-    browserCanvasContext.lineWidth = 10
-    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + 0.01 + ')'
+    browserCanvasContext.fillStyle = 'rgba(' + params.backgroundColor + ', ' + params.opacity + ')'
+
+    browserCanvasContext.fill()
+
+    browserCanvasContext.lineWidth = params.lineWidth
+    browserCanvasContext.strokeStyle = 'rgba(' + params.borderColor + ', ' + params.opacity + ')'
     browserCanvasContext.stroke()
-
-    browserCanvasContext.lineWidth = 5
-    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + 0.01 + ')'
-    browserCanvasContext.stroke()
-
-    browserCanvasContext.lineWidth = 1
-    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + 0.15 + ')'
-    browserCanvasContext.stroke()
-  }
-
-        /* Background  */
-
-  browserCanvasContext.beginPath()
-
-  browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, params.cornerRadius, 1.0 * Math.PI, 1.5 * Math.PI)
-  browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - params.cornerRadius)
-  browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, params.cornerRadius, 1.5 * Math.PI, 2.0 * Math.PI)
-  browserCanvasContext.lineTo(borderPoint3.x + params.cornerRadius, borderPoint3.y)
-  browserCanvasContext.arc(borderPoint3.x, borderPoint3.y, params.cornerRadius, 0 * Math.PI, 0.5 * Math.PI)
-  browserCanvasContext.lineTo(borderPoint4.x, borderPoint4.y + params.cornerRadius)
-  browserCanvasContext.arc(borderPoint4.x, borderPoint4.y, params.cornerRadius, 0.5 * Math.PI, 1.0 * Math.PI)
-  browserCanvasContext.lineTo(borderPoint1.x - params.cornerRadius, borderPoint1.y)
-
-  browserCanvasContext.closePath()
-
-  browserCanvasContext.fillStyle = 'rgba(' + params.backgroundColor + ', ' + params.opacity + ')'
-
-  browserCanvasContext.fill()
-
-  browserCanvasContext.lineWidth = params.lineWidth
-  browserCanvasContext.strokeStyle = 'rgba(' + params.borderColor + ', ' + params.opacity + ')'
-  browserCanvasContext.stroke()
 }
 
-function drawLabel (label, xFactor, yFactor, xOffset, yOffset, fontSize, container, fontColor, noFrameX, noFrameY, opacity) {
-  if (label === undefined) { return }
-  if (fontColor === undefined) { fontColor = UI_COLOR.WHITE }
-  let fontOffset = label.length * fontSize * FONT_ASPECT_RATIO + 10
-  if (opacity === undefined) { opacity = 1 }
+function drawLabel(label, xFactor, yFactor, xOffset, yOffset, fontSize, container, fontColor, noFrameX, noFrameY, opacity) {
+    if (label === undefined) { return }
+    if (fontColor === undefined) { fontColor = UI_COLOR.WHITE }
+    let fontOffset = label.length * fontSize * FONT_ASPECT_RATIO + 10
+    if (opacity === undefined) { opacity = 1 }
 
-  let labelPoint = {
-    x: container.frame.width * xFactor + xOffset - fontOffset / 2,
-    y: container.frame.height * yFactor + yOffset
-  }
-
-  labelPoint = container.frame.frameThisPoint(labelPoint)
-
-  if (noFrameX !== undefined) {
-    labelPoint.x = noFrameX + xOffset
-  }
-
-  if (noFrameY !== undefined) {
-    labelPoint.y = noFrameY + yOffset
-  }
-
-  browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-  browserCanvasContext.fillStyle = 'rgba(' + fontColor + ', ' + opacity + ')'
-
-  browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
-}
-
-function drawIcon (icon, xFactor, yFactor, xOffset, yOffset, imageSize, container) {
-  if (icon !== undefined) {
-    if (icon.canDrawIcon === true) {
-      let imagePosition = {
-        x: container.frame.width * xFactor + xOffset - imageSize / 2,
-        y: container.frame.height * yFactor + yOffset - imageSize / 2
-      }
-
-      imagePosition = container.frame.frameThisPoint(imagePosition)
-
-      browserCanvasContext.drawImage(
-        icon, imagePosition.x,
-        imagePosition.y,
-        imageSize,
-        imageSize)
+    let labelPoint = {
+        x: container.frame.width * xFactor + xOffset - fontOffset / 2,
+        y: container.frame.height * yFactor + yOffset
     }
-  }
-}
 
-function drawContainerBackground (container, color, opacity, fitFunction) {
-  let fromPoint = {
-    x: 0,
-    y: 0
-  }
-
-  let toPoint = {
-    x: container.frame.width,
-    y: container.frame.height
-  }
-
-  fromPoint = transformThisPoint(fromPoint, container)
-  toPoint = transformThisPoint(toPoint, container)
-
-  fromPoint = fitFunction(fromPoint)
-  toPoint = fitFunction(toPoint)
-
-  browserCanvasContext.beginPath()
-  browserCanvasContext.rect(fromPoint.x, fromPoint.y, toPoint.x - fromPoint.x, toPoint.y - fromPoint.y)
-  browserCanvasContext.fillStyle = 'rgba(' + color + ', ' + opacity + ')'
-  browserCanvasContext.closePath()
-  browserCanvasContext.fill()
-}
-
-function printLabel (labelToPrint, x, y, opacity, fontSize, color, center, container, fitFunction, noDecimals, fixedDecimals) {
-  if (labelToPrint === undefined) { return }
-  let labelPoint
-  if (color === undefined) { color = UI_COLOR.DARK }
-  if (fontSize === undefined) { fontSize = 10 };
-
-  browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-  let label = labelToPrint
-  if (isNaN(label) === false && label !== '') {
-    if (fixedDecimals !== true) {
-      label = dynamicDecimals(labelToPrint)
-    }
-    label = label.toLocaleString()
-    if (noDecimals === true) {
-      label = Math.trunc(label)
-    }
-  }
-
-  let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO
-
-  if (center === true) {
-    labelPoint = {
-      x: x - xOffset,
-      y: y
-    }
-  } else {
-    labelPoint = {
-      x: x,
-      y: y
-    }
-  }
-
-  if (container !== undefined) {
     labelPoint = container.frame.frameThisPoint(labelPoint)
-  }
 
-  if (fitFunction !== undefined) {
-    labelPoint = fitFunction(labelPoint)
-  }
+    if (noFrameX !== undefined) {
+        labelPoint.x = noFrameX + xOffset
+    }
 
-  browserCanvasContext.fillStyle = 'rgba(' + color + ', ' + opacity + ')'
-  browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
+    if (noFrameY !== undefined) {
+        labelPoint.y = noFrameY + yOffset
+    }
+
+    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+    browserCanvasContext.fillStyle = 'rgba(' + fontColor + ', ' + opacity + ')'
+
+    browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
+}
+
+function drawIcon(icon, xFactor, yFactor, xOffset, yOffset, imageSize, container) {
+    if (icon !== undefined) {
+        if (icon.canDrawIcon === true) {
+            let imagePosition = {
+                x: container.frame.width * xFactor + xOffset - imageSize / 2,
+                y: container.frame.height * yFactor + yOffset - imageSize / 2
+            }
+
+            imagePosition = container.frame.frameThisPoint(imagePosition)
+
+            browserCanvasContext.drawImage(
+                icon, imagePosition.x,
+                imagePosition.y,
+                imageSize,
+                imageSize)
+        }
+    }
+}
+
+function drawContainerBackground(container, color, opacity, fitFunction) {
+    let fromPoint = {
+        x: 0,
+        y: 0
+    }
+
+    let toPoint = {
+        x: container.frame.width,
+        y: container.frame.height
+    }
+
+    fromPoint = transformThisPoint(fromPoint, container)
+    toPoint = transformThisPoint(toPoint, container)
+
+    fromPoint = fitFunction(fromPoint)
+    toPoint = fitFunction(toPoint)
+
+    browserCanvasContext.beginPath()
+    browserCanvasContext.rect(fromPoint.x, fromPoint.y, toPoint.x - fromPoint.x, toPoint.y - fromPoint.y)
+    browserCanvasContext.fillStyle = 'rgba(' + color + ', ' + opacity + ')'
+    browserCanvasContext.closePath()
+    browserCanvasContext.fill()
+}
+
+function printLabel(labelToPrint, x, y, opacity, fontSize, color, center, container, fitFunction, noDecimals, fixedDecimals) {
+    if (labelToPrint === undefined) { return }
+    let labelPoint
+    if (color === undefined) { color = UI_COLOR.DARK }
+    if (fontSize === undefined) { fontSize = 10 };
+
+    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+    let label = labelToPrint
+    if (isNaN(label) === false && label !== '') {
+        if (fixedDecimals !== true) {
+            label = dynamicDecimals(labelToPrint)
+        }
+        label = label.toLocaleString()
+        if (noDecimals === true) {
+            label = Math.trunc(label)
+        }
+    }
+
+    let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO
+
+    if (center === true) {
+        labelPoint = {
+            x: x - xOffset,
+            y: y
+        }
+    } else {
+        labelPoint = {
+            x: x,
+            y: y
+        }
+    }
+
+    if (container !== undefined) {
+        labelPoint = container.frame.frameThisPoint(labelPoint)
+    }
+
+    if (fitFunction !== undefined) {
+        labelPoint = fitFunction(labelPoint)
+    }
+
+    browserCanvasContext.fillStyle = 'rgba(' + color + ', ' + opacity + ')'
+    browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
 }
 

Utilities/HiriarchyMap.js

@@ -2,46 +2,46 @@
 This function scans a node hiriatchy recursively and creates a Map by Id of all the nodes of it.
 */
 
-function getHiriarchyMap (rootNode) {
-  let hiriatchyMap = new Map()
-  evalNode(rootNode)
-  return hiriatchyMap
+function getHiriarchyMap(rootNode) {
+    let hiriatchyMap = new Map()
+    evalNode(rootNode)
+    return hiriatchyMap
 
-  function evalNode (node) {
-    if (node === undefined) { return }
+    function evalNode(node) {
+        if (node === undefined) { return }
 
-    hiriatchyMap.set(node.id, node)
+        hiriatchyMap.set(node.id, node)
 
-  /* Now we go down through all this node children */
-    let nodeDefinition = APP_SCHEMA_MAP.get(node.type)
-    if (nodeDefinition === undefined) { return }
+        /* Now we go down through all this node children */
+        let nodeDefinition = APP_SCHEMA_MAP.get(node.type)
+        if (nodeDefinition === undefined) { return }
 
-    if (nodeDefinition.properties !== undefined) {
-      let previousPropertyName // Since there are cases where there are many properties with the same name,because they can hold nodes of different types but only one at the time, we have to avoind counting each property of those as individual children.
-      for (let i = 0; i < nodeDefinition.properties.length; i++) {
-        let property = nodeDefinition.properties[i]
+        if (nodeDefinition.properties !== undefined) {
+            let previousPropertyName // Since there are cases where there are many properties with the same name,because they can hold nodes of different types but only one at the time, we have to avoind counting each property of those as individual children.
+            for (let i = 0; i < nodeDefinition.properties.length; i++) {
+                let property = nodeDefinition.properties[i]
 
-        switch (property.type) {
-          case 'node': {
-            if (property.name !== previousPropertyName) {
-              if (node[property.name] !== undefined) {
-                evalNode(node[property.name])
-              }
-              previousPropertyName = property.name
+                switch (property.type) {
+                    case 'node': {
+                        if (property.name !== previousPropertyName) {
+                            if (node[property.name] !== undefined) {
+                                evalNode(node[property.name])
+                            }
+                            previousPropertyName = property.name
+                        }
+                        break
+                    }
+                    case 'array': {
+                        if (node[property.name] !== undefined) {
+                            let nodePropertyArray = node[property.name]
+                            for (let m = 0; m < nodePropertyArray.length; m++) {
+                                evalNode(nodePropertyArray[m])
+                            }
+                        }
+                        break
+                    }
+                }
             }
-            break
-          }
-          case 'array': {
-            if (node[property.name] !== undefined) {
-              let nodePropertyArray = node[property.name]
-              for (let m = 0; m < nodePropertyArray.length; m++) {
-                evalNode(nodePropertyArray[m])
-              }
-            }
-            break
-          }
         }
-      }
     }
-  }
 }

Utilities/LoadSaveFrame.js

@@ -1,24 +1,24 @@
-function saveFrame (payload, frame) {
-  payload.frame = {
-    position: {
-      x: frame.position.x,
-      y: frame.position.y
-    },
-    width: frame.width,
-    height: frame.height,
-    radius: frame.radius
-  }
+function saveFrame(payload, frame) {
+    payload.frame = {
+        position: {
+            x: frame.position.x,
+            y: frame.position.y
+        },
+        width: frame.width,
+        height: frame.height,
+        radius: frame.radius
+    }
 }
 
-function loadFrame (payload, frame) {
-  if (payload.node.savedPayload !== undefined) {
-    if (payload.node.savedPayload.frame !== undefined) {
-      frame.position.x = payload.node.savedPayload.frame.position.x
-      frame.position.y = payload.node.savedPayload.frame.position.y
-      frame.width = payload.node.savedPayload.frame.width
-      frame.height = payload.node.savedPayload.frame.height
-      frame.radius = payload.node.savedPayload.frame.radius
-      payload.node.savedPayload.frame = undefined
+function loadFrame(payload, frame) {
+    if (payload.node.savedPayload !== undefined) {
+        if (payload.node.savedPayload.frame !== undefined) {
+            frame.position.x = payload.node.savedPayload.frame.position.x
+            frame.position.y = payload.node.savedPayload.frame.position.y
+            frame.width = payload.node.savedPayload.frame.width
+            frame.height = payload.node.savedPayload.frame.height
+            frame.radius = payload.node.savedPayload.frame.radius
+            payload.node.savedPayload.frame = undefined
+        }
     }
-  }
 }

Utilities/NodeConfig.js

@@ -1,18 +1,18 @@
-function savePropertyAtNodeConfig (payload, propertyName, value) {
-  try {
-    let config = JSON.parse(payload.node.config)
-    config[propertyName] = value
-    payload.node.config = JSON.stringify(config, null, 4)
-  } catch (err) {
-     // we ignore errors here since most likely they will be parsing errors.
-  }
+function savePropertyAtNodeConfig(payload, propertyName, value) {
+    try {
+        let config = JSON.parse(payload.node.config)
+        config[propertyName] = value
+        payload.node.config = JSON.stringify(config, null, 4)
+    } catch (err) {
+        // we ignore errors here since most likely they will be parsing errors.
+    }
 }
 
-function loadPropertyFromNodeConfig (payload, propertyName) {
-  try {
-    let config = JSON.parse(payload.node.config)
-    return config[propertyName]
-  } catch (err) {
-     // we ignore errors here since most likely they will be parsing errors.
-  }
+function loadPropertyFromNodeConfig(payload, propertyName) {
+    try {
+        let config = JSON.parse(payload.node.config)
+        return config[propertyName]
+    } catch (err) {
+        // we ignore errors here since most likely they will be parsing errors.
+    }
 }

VideoRecorder.js

@@ -1,218 +1,218 @@
-function newVideoRecorder () {
-  let thisObject = {
-    recordCanvas: recordCanvas,
-    physics: physics
-  }
-  let lastAction
-  let wheelAnimationCounter = 0
-  let lastWheelPointerIcon
-  return thisObject
-
-  function physics () {
-    wheelAnimationCounter--
-    if (wheelAnimationCounter < 0) {
-      wheelAnimationCounter = 0
+function newVideoRecorder() {
+    let thisObject = {
+        recordCanvas: recordCanvas,
+        physics: physics
     }
-  }
+    let lastAction
+    let wheelAnimationCounter = 0
+    let lastWheelPointerIcon
+    return thisObject
 
-  function recordCanvas () {
-    {
-      const DISTANCE_BETWEEN_ICONS = 35
-      const ICON_SIZES = 50
-
-      let mousePointerIcon = canvas.designSpace.iconCollection.get('mouse-pointer')
-      let draggingIcon = canvas.designSpace.iconCollection.get('hand-drag')
-
-      let leftClickIcon = canvas.designSpace.iconCollection.get('mouse-left-click')
-      let rightClickIcon = canvas.designSpace.iconCollection.get('mouse-right-click')
-      let wheelClickIcon = canvas.designSpace.iconCollection.get('mouse-wheel-click')
-
-      let imagePosition
-      let buttonPressedIcon
-
-      if (canvas.mouse.action === 'key down' && lastAction === 'dragging') {
-        canvas.mouse.action = 'dragging'
-      }
-      switch (canvas.mouse.action) {
-        case 'moving': {
-          pointerIcon = mousePointerIcon
-          break
+    function physics() {
+        wheelAnimationCounter--
+        if (wheelAnimationCounter < 0) {
+            wheelAnimationCounter = 0
+        }
+    }
+
+    function recordCanvas() {
+        {
+            const DISTANCE_BETWEEN_ICONS = 35
+            const ICON_SIZES = 50
+
+            let mousePointerIcon = canvas.designSpace.iconCollection.get('mouse-pointer')
+            let draggingIcon = canvas.designSpace.iconCollection.get('hand-drag')
+
+            let leftClickIcon = canvas.designSpace.iconCollection.get('mouse-left-click')
+            let rightClickIcon = canvas.designSpace.iconCollection.get('mouse-right-click')
+            let wheelClickIcon = canvas.designSpace.iconCollection.get('mouse-wheel-click')
+
+            let imagePosition
+            let buttonPressedIcon
+
+            if (canvas.mouse.action === 'key down' && lastAction === 'dragging') {
+                canvas.mouse.action = 'dragging'
+            }
+            switch (canvas.mouse.action) {
+                case 'moving': {
+                    pointerIcon = mousePointerIcon
+                    break
+                }
+                case 'dragging': {
+                    pointerIcon = draggingIcon
+                    break
+                }
+                case 'wheel': {
+                    wheelAnimationCounter = 25
+                    if (canvas.mouse.event.delta > 0) {
+                        pointerIcon = canvas.designSpace.iconCollection.get('mouse-wheel-up')
+                        lastWheelPointerIcon = pointerIcon
+                    } else {
+                        pointerIcon = canvas.designSpace.iconCollection.get('mouse-wheel-down')
+                        lastWheelPointerIcon = pointerIcon
+                    }
+
+                    break
+                }
+                case 'key down': {
+                    if (wheelAnimationCounter > 0) {
+                        pointerIcon = lastWheelPointerIcon
+                    } else {
+                        pointerIcon = mousePointerIcon
+                    }
+                    let key = canvas.mouse.event.key
+                    if (key === undefined) { break }
+                    switch (key.toLowerCase()) {
+                        case 'Escape':
+                            {
+                                pointerIcon = canvas.designSpace.iconCollection.get('key-m')
+                                break
+                            }
+                        case 'm':
+                            {
+                                pointerIcon = canvas.designSpace.iconCollection.get('key-m')
+                                break
+                            }
+                        case 'a':
+                            {
+                                pointerIcon = canvas.designSpace.iconCollection.get('key-a')
+                                break
+                            }
+                        case 'r':
+                            {
+                                pointerIcon = canvas.designSpace.iconCollection.get('key-r')
+                                break
+                            }
+                        case 'c':
+                            {
+                                pointerIcon = canvas.designSpace.iconCollection.get('key-r')
+                                break
+                            }
+                    }
+                    break
+                }
+                case 'key up': {
+                    pointerIcon = mousePointerIcon
+                    break
+                }
+            }
+
+            lastAction = canvas.mouse.action
+
+            imagePosition = {
+                x: canvas.mouse.position.x,
+                y: canvas.mouse.position.y
+            }
+            drawMousePointer(pointerIcon, imagePosition, ICON_SIZES)
+
+            switch (canvas.mouse.event.buttons) {
+                case 0: {
+                    buttonPressedIcon = undefined
+                    break
+                }
+                case 1: {
+                    buttonPressedIcon = leftClickIcon
+                    break
+                }
+                case 2: {
+                    buttonPressedIcon = rightClickIcon
+                    break
+                }
+                case 3: {
+                    buttonPressedIcon = undefined
+                    break
+                }
+                case 4: {
+                    buttonPressedIcon = wheelClickIcon
+                    break
+                }
+            }
+
+            let firstRow = DISTANCE_BETWEEN_ICONS * 1 + ICON_SIZES * 1
+            let secondRow = DISTANCE_BETWEEN_ICONS * 1 + ICON_SIZES * 2
+            let icon
+
+            imagePosition = {
+                x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS * 2,
+                y: canvas.mouse.position.y
+            }
+            drawMousePointer(buttonPressedIcon, imagePosition, ICON_SIZES)
+
+            if (canvas.mouse.event.shiftKey === true) {
+                icon = canvas.designSpace.iconCollection.get('key-shift')
+                imagePosition = {
+                    x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS * 3,
+                    y: canvas.mouse.position.y + firstRow
+                }
+                drawMousePointer(icon, imagePosition, ICON_SIZES)
+            }
+
+            if (canvas.mouse.event.ctrlKey === true || canvas.mouse.event.metaKey === true) {
+                icon = canvas.designSpace.iconCollection.get('key-ctrl')
+                imagePosition = {
+                    x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS * 3,
+                    y: canvas.mouse.position.y + secondRow
+                }
+                drawMousePointer(icon, imagePosition, ICON_SIZES)
+            }
+
+            if (canvas.mouse.event.altKey === true) {
+                icon = canvas.designSpace.iconCollection.get('key-alt')
+                imagePosition = {
+                    x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS * 3 + ICON_SIZES * 0,
+                    y: canvas.mouse.position.y + secondRow
+                }
+                drawMousePointer(icon, imagePosition, ICON_SIZES)
+            }
+
+            if (canvas.mouse.event.code === 'ArrowUp') {
+                icon = canvas.designSpace.iconCollection.get('key-up')
+                imagePosition = {
+                    x: canvas.mouse.position.x - 0,
+                    y: canvas.mouse.position.y + firstRow
+                }
+                drawMousePointer(icon, imagePosition, ICON_SIZES)
+            }
+
+            if (canvas.mouse.event.code === 'ArrowDown') {
+                icon = canvas.designSpace.iconCollection.get('key-down')
+                imagePosition = {
+                    x: canvas.mouse.position.x - 0,
+                    y: canvas.mouse.position.y + secondRow
+                }
+                drawMousePointer(icon, imagePosition, ICON_SIZES)
+            }
+
+            if (canvas.mouse.event.code === 'ArrowLeft') {
+                icon = canvas.designSpace.iconCollection.get('key-left')
+                imagePosition = {
+                    x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS * 0 - ICON_SIZES * 1,
+                    y: canvas.mouse.position.y + secondRow
+                }
+                drawMousePointer(icon, imagePosition, ICON_SIZES)
+            }
+
+            if (canvas.mouse.event.code === 'ArrowRight') {
+                icon = canvas.designSpace.iconCollection.get('key-right')
+                imagePosition = {
+                    x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS * 0 + ICON_SIZES * 1,
+                    y: canvas.mouse.position.y + secondRow
+                }
+                drawMousePointer(icon, imagePosition, ICON_SIZES)
+            }
+
+            function drawMousePointer(icon, imagePosition, imageSize) {
+                if (icon !== undefined) {
+                    if (icon.canDrawIcon === true) {
+                        browserCanvasContext.drawImage(
+                            icon, imagePosition.x,
+                            imagePosition.y,
+                            imageSize,
+                            imageSize)
+                    }
+                }
+            }
+            mediaRecorder.capture(browserCanvas)
         }
-        case 'dragging': {
-          pointerIcon = draggingIcon
-          break
-        }
-        case 'wheel': {
-          wheelAnimationCounter = 25
-          if (canvas.mouse.event.delta > 0) {
-            pointerIcon = canvas.designSpace.iconCollection.get('mouse-wheel-up')
-            lastWheelPointerIcon = pointerIcon
-          } else {
-            pointerIcon = canvas.designSpace.iconCollection.get('mouse-wheel-down')
-            lastWheelPointerIcon = pointerIcon
-          }
-
-          break
-        }
-        case 'key down': {
-          if (wheelAnimationCounter > 0) {
-            pointerIcon = lastWheelPointerIcon
-          } else {
-            pointerIcon = mousePointerIcon
-          }
-          let key = canvas.mouse.event.key
-          if (key === undefined) { break }
-          switch (key.toLowerCase()) {
-            case 'Escape':
-              {
-                pointerIcon = canvas.designSpace.iconCollection.get('key-m')
-                break
-              }
-            case 'm':
-              {
-                pointerIcon = canvas.designSpace.iconCollection.get('key-m')
-                break
-              }
-            case 'a':
-              {
-                pointerIcon = canvas.designSpace.iconCollection.get('key-a')
-                break
-              }
-            case 'r':
-              {
-                pointerIcon = canvas.designSpace.iconCollection.get('key-r')
-                break
-              }
-            case 'c':
-              {
-                pointerIcon = canvas.designSpace.iconCollection.get('key-r')
-                break
-              }
-          }
-          break
-        }
-        case 'key up': {
-          pointerIcon = mousePointerIcon
-          break
-        }
-      }
-
-      lastAction = canvas.mouse.action
-
-      imagePosition = {
-        x: canvas.mouse.position.x,
-        y: canvas.mouse.position.y
-      }
-      drawMousePointer(pointerIcon, imagePosition, ICON_SIZES)
-
-      switch (canvas.mouse.event.buttons) {
-        case 0: {
-          buttonPressedIcon = undefined
-          break
-        }
-        case 1: {
-          buttonPressedIcon = leftClickIcon
-          break
-        }
-        case 2: {
-          buttonPressedIcon = rightClickIcon
-          break
-        }
-        case 3: {
-          buttonPressedIcon = undefined
-          break
-        }
-        case 4: {
-          buttonPressedIcon = wheelClickIcon
-          break
-        }
-      }
-
-      let firstRow = DISTANCE_BETWEEN_ICONS * 1 + ICON_SIZES * 1
-      let secondRow = DISTANCE_BETWEEN_ICONS * 1 + ICON_SIZES * 2
-      let icon
-
-      imagePosition = {
-        x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS * 2,
-        y: canvas.mouse.position.y
-      }
-      drawMousePointer(buttonPressedIcon, imagePosition, ICON_SIZES)
-
-      if (canvas.mouse.event.shiftKey === true) {
-        icon = canvas.designSpace.iconCollection.get('key-shift')
-        imagePosition = {
-          x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS * 3,
-          y: canvas.mouse.position.y + firstRow
-        }
-        drawMousePointer(icon, imagePosition, ICON_SIZES)
-      }
-
-      if (canvas.mouse.event.ctrlKey === true || canvas.mouse.event.metaKey === true) {
-        icon = canvas.designSpace.iconCollection.get('key-ctrl')
-        imagePosition = {
-          x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS * 3,
-          y: canvas.mouse.position.y + secondRow
-        }
-        drawMousePointer(icon, imagePosition, ICON_SIZES)
-      }
-
-      if (canvas.mouse.event.altKey === true) {
-        icon = canvas.designSpace.iconCollection.get('key-alt')
-        imagePosition = {
-          x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS * 3 + ICON_SIZES * 0,
-          y: canvas.mouse.position.y + secondRow
-        }
-        drawMousePointer(icon, imagePosition, ICON_SIZES)
-      }
-
-      if (canvas.mouse.event.code === 'ArrowUp') {
-        icon = canvas.designSpace.iconCollection.get('key-up')
-        imagePosition = {
-          x: canvas.mouse.position.x - 0,
-          y: canvas.mouse.position.y + firstRow
-        }
-        drawMousePointer(icon, imagePosition, ICON_SIZES)
-      }
-
-      if (canvas.mouse.event.code === 'ArrowDown') {
-        icon = canvas.designSpace.iconCollection.get('key-down')
-        imagePosition = {
-          x: canvas.mouse.position.x - 0,
-          y: canvas.mouse.position.y + secondRow
-        }
-        drawMousePointer(icon, imagePosition, ICON_SIZES)
-      }
-
-      if (canvas.mouse.event.code === 'ArrowLeft') {
-        icon = canvas.designSpace.iconCollection.get('key-left')
-        imagePosition = {
-          x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS * 0 - ICON_SIZES * 1,
-          y: canvas.mouse.position.y + secondRow
-        }
-        drawMousePointer(icon, imagePosition, ICON_SIZES)
-      }
-
-      if (canvas.mouse.event.code === 'ArrowRight') {
-        icon = canvas.designSpace.iconCollection.get('key-right')
-        imagePosition = {
-          x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS * 0 + ICON_SIZES * 1,
-          y: canvas.mouse.position.y + secondRow
-        }
-        drawMousePointer(icon, imagePosition, ICON_SIZES)
-      }
-
-      function drawMousePointer (icon, imagePosition, imageSize) {
-        if (icon !== undefined) {
-          if (icon.canDrawIcon === true) {
-            browserCanvasContext.drawImage(
-              icon, imagePosition.x,
-              imagePosition.y,
-              imageSize,
-              imageSize)
-          }
-        }
-      }
-      mediaRecorder.capture(browserCanvas)
     }
-  }
 }

WebDebugLog.js

@@ -1,21 +1,21 @@
- function newWebDebugLog () {
-   try {
-     let thisObject = {
-       write: write,
-       fileName: 'undefined'
-     }
+function newWebDebugLog() {
+    try {
+        let thisObject = {
+            write: write,
+            fileName: 'undefined'
+        }
 
-     return thisObject
+        return thisObject
 
-     function write (pText) {
-       console.log(spacePad(thisObject.fileName, 50) + ' : ' + pText)
+        function write(pText) {
+            console.log(spacePad(thisObject.fileName, 50) + ' : ' + pText)
 
-       function spacePad (str, max) {
-         str = str.toString()
-         return str.length < max ? spacePad(' ' + str, max) : str
-       }
-     }
-   } catch (err) {
-     console.log(spacePad(MODULE_NAME, 50) + ' : ' + '[ERROR]  WebDebugLog --> err = ' + err.stack)
-   }
- }
+            function spacePad(str, max) {
+                str = str.toString()
+                return str.length < max ? spacePad(' ' + str, max) : str
+            }
+        }
+    } catch (err) {
+        console.log(spacePad(MODULE_NAME, 50) + ' : ' + '[ERROR]  WebDebugLog --> err = ' + err.stack)
+    }
+}