Merge pull request #44 from AAMasters/develop

Manipulate Strategies from Charting System

BottomSpace/UIControl.js

@@ -37,7 +37,7 @@ function newUIControl () {
   }
 
   function getContainer (point) {
-    var container
+    let container
 
        /* First we check if thisObject point is inside thisObject space. */
 

Canvas.js

@@ -9,7 +9,6 @@ function newCanvas () {
   const MODULE_NAME = 'Canvas'
   const INFO_LOG = false
   const ERROR_LOG = true
-  const INTENSIVE_LOG = false
   const logger = newWebDebugLog()
   logger.fileName = MODULE_NAME
 
@@ -47,7 +46,7 @@ function newCanvas () {
   thisObject.eventHandler = newEventHandler()
 
   let splashScreen
-
+  let lastContainerMouseOver
   return thisObject
 
 /*
@@ -96,6 +95,7 @@ function newCanvas () {
       browserCanvas.removeEventListener('mouseup', onMouseUp, false)
       browserCanvas.removeEventListener('mousemove', onMouseMove, false)
       browserCanvas.removeEventListener('click', onMouseClick, false)
+      browserCanvas.removeEventListener('mouseout', onMouseOut, false)
 
            /* Mouse wheel events. */
 
@@ -167,16 +167,18 @@ function newCanvas () {
 
                    /* Here we add all the functions that will be called during the animation cycle. */
 
-          animation.addCallBackFunction('ViewPort Draw', viewPort.draw, onFunctionAdded)
+          animation.addCallBackFunction('Floating Space Draw', thisObject.floatingSpace.draw, onFunctionAdded)
+          animation.addCallBackFunction('Floating Space Physics', thisObject.floatingSpace.physics, onFunctionAdded)
           animation.addCallBackFunction('Chart Space Background', thisObject.chartSpace.drawBackground, onFunctionAdded)
-          animation.addCallBackFunction('Chart Space', thisObject.chartSpace.draw, onFunctionAdded)
+          animation.addCallBackFunction('Chart Space Draw', thisObject.chartSpace.draw, onFunctionAdded)
+          animation.addCallBackFunction('Chart Space Physics', thisObject.chartSpace.physics, onFunctionAdded)
           animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw, onFunctionAdded)
           animation.addCallBackFunction('ViewPort Animate', viewPort.animate, onFunctionAdded)
-          animation.addCallBackFunction('Bottom Space', thisObject.bottomSpace.draw, onFunctionAdded)
-          animation.addCallBackFunction('Top Space', thisObject.topSpace.draw, onFunctionAdded)
-          animation.addCallBackFunction('Strategy Space', thisObject.strategySpace.draw, onFunctionAdded)
-          animation.addCallBackFunction('Floating Space', thisObject.floatingSpace.floatingLayer.physicsLoop, onFunctionAdded)
-          animation.addCallBackFunction('Splash Screen', splashScreen.draw, onFunctionAdded)
+          animation.addCallBackFunction('Bottom Space Draw', thisObject.bottomSpace.draw, onFunctionAdded)
+          animation.addCallBackFunction('Bottom Space Physics', thisObject.bottomSpace.physics, onFunctionAdded)
+          animation.addCallBackFunction('Top Space Draw', thisObject.topSpace.draw, onFunctionAdded)
+          animation.addCallBackFunction('Strategy Space Draw', thisObject.strategySpace.draw, onFunctionAdded)
+          animation.addCallBackFunction('Splash Screen Draw', splashScreen.draw, onFunctionAdded)
           animation.start(onStart)
 
           function onFunctionAdded (err) {
@@ -259,6 +261,7 @@ function newCanvas () {
       browserCanvas.addEventListener('mouseup', onMouseUp, false)
       browserCanvas.addEventListener('mousemove', onMouseMove, false)
       browserCanvas.addEventListener('click', onMouseClick, false)
+      browserCanvas.addEventListener('mouseout', onMouseOut, false)
 
            /* Mouse wheel events. */
 
@@ -356,26 +359,34 @@ function newCanvas () {
         return
       }
 
-           /* We check if the mouse is over a floatingObject/ */
-
-      floatingObjectBeingDragged = thisObject.floatingSpace.floatingLayer.isInside(point.x, point.y)
-
-      if (floatingObjectBeingDragged >= 0) {
-        floatingObjectDragStarted = true
-        return
-      }
-
-           /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */
+           /*  we check if it is over any of the existing containers at the Chart Space. */
 
       container = thisObject.chartSpace.getContainer(point)
 
+      if (container !== undefined) {
+        if (container.isDraggeable === true) {
+          containerBeingDragged = container
+          containerDragStarted = true
+          return
+        } else {
+          viewPortBeingDragged = true
+          return
+        }
+      }
+
+      container = thisObject.floatingSpace.getContainer(point)
+
       if (container !== undefined && container.isDraggeable === true) {
         containerBeingDragged = container
         containerDragStarted = true
+        floatingObjectDragStarted = true
         return
       }
 
-      viewPortBeingDragged = true
+      if (container !== undefined && container.isClickeable === true) {
+       /* We dont want to mess up with the click */
+        return
+      }
     } catch (err) {
       if (ERROR_LOG === true) { logger.write('[ERROR] onMouseDown -> err = ' + err.stack) }
     }
@@ -429,17 +440,6 @@ function newCanvas () {
 
       if (container !== undefined && container.isClickeable === true) {
         container.eventHandler.raiseEvent('onMouseClick', point)
-        return
-      }
-
-           /* We check if the mouse is over a floatingObject/ */
-
-      let floatingObjectBeingClicked = thisObject.floatingSpace.floatingLayer.isInside(point.x, point.y)
-
-      if (floatingObjectBeingClicked >= 0) {
-        let floatingObject = thisObject.floatingSpace.floatingLayer.getFloatingObject(undefined, floatingObjectBeingClicked)
-        floatingObject.eventHandler.raiseEvent('onMouseClick', point)
-
         return
       }
 
@@ -451,15 +451,36 @@ function newCanvas () {
         container.eventHandler.raiseEvent('onMouseClick', point)
         return
       }
+
+      /* We check if the mouse is over a floatingObject/ */
+      container = thisObject.floatingSpace.getContainer(point)
+
+      if (container !== undefined && container.isClickeable === true) {
+        container.eventHandler.raiseEvent('onMouseClick', point)
+        return
+      }
     } catch (err) {
       if (ERROR_LOG === true) { logger.write('[ERROR] onMouseClick -> err = ' + err.stack) }
     }
   }
 
-  function onMouseUp (event) {
-    try {
-      if (INFO_LOG === true) { logger.write('[INFO] onMouseUp -> Entering function.') }
+  function onMouseOut (event) {
+    deactivateDragging(event)
 
+    /* When the mouse leaves the canvas, our elements needs to react to the fact that the mouse is over a far away place */
+    let thisEvent = {
+      pageX: VERY_LARGE_NUMBER,
+      pageY: VERY_LARGE_NUMBER
+    }
+    onMouseOver(thisEvent)
+  }
+
+  function onMouseUp (event) {
+    deactivateDragging(event)
+  }
+
+  function deactivateDragging (event) {
+    try {
       if (containerDragStarted || viewPortBeingDragged || floatingObjectDragStarted) {
         thisObject.eventHandler.raiseEvent('Drag Finished', undefined)
       }
@@ -487,8 +508,6 @@ function newCanvas () {
 
   function onMouseMove (event) {
     try {
-      if (INTENSIVE_LOG === true) { logger.write('[INFO] onMouseMove -> Entering function.') }
-
       let point = {
         x: event.pageX,
         y: event.pageY - window.canvasApp.topMargin
@@ -499,12 +518,22 @@ function newCanvas () {
 
       if (containerDragStarted === true || floatingObjectDragStarted === true || viewPortBeingDragged === true) {
         if (floatingObjectDragStarted === true) {
-          if (thisObject.floatingSpace.floatingLayer.isInsideFloatingObject(floatingObjectBeingDragged, point.x, point.y) === false) {
-                       /* This means that the user stop moving the mouse and the floatingObject floatingObject out of the pointer.
-                       In this case we cancell the drag operation . */
-
+          let targetContainer = thisObject.floatingSpace.getContainer(point)
+          if (targetContainer !== undefined) {
+            if (targetContainer.id !== containerBeingDragged.id) {
+              containerBeingDragged = undefined
+              containerDragStarted = false
+              floatingObjectDragStarted = false
+              browserCanvas.style.cursor = 'auto'
+              ignoreNextClick = true
+              return
+            }
+          } else {
+            containerDragStarted = false
+            containerBeingDragged = undefined
             floatingObjectDragStarted = false
             browserCanvas.style.cursor = 'auto'
+            ignoreNextClick = true
             return
           }
         }
@@ -523,12 +552,6 @@ function newCanvas () {
 
   function onMouseOver (event) {
     try {
-      if (INFO_LOG === true) { logger.write('[INFO] onMouseOver -> Entering function.') }
-
-           /* First we raise the event signaling theat the mouse is potentially over another item, so that the current item can turn itself off. */
-
-      thisObject.eventHandler.raiseEvent('onMouseNotOver')
-
            /* Then we check who is the current object underneeth the mounse. */
 
       let point = {
@@ -544,7 +567,7 @@ function newCanvas () {
         container = thisObject.strategySpace.getContainer(point)
 
         if (container !== undefined && container.detectMouseOver === true) {
-          container.eventHandler.raiseEvent('onMouseOver', point)
+          containerFound()
           return
         }
       }
@@ -555,7 +578,7 @@ function newCanvas () {
         container = thisObject.topSpace.getContainer(point)
 
         if (container !== undefined && container.detectMouseOver === true) {
-          container.eventHandler.raiseEvent('onMouseOver', point)
+          containerFound()
           return
         }
       }
@@ -566,7 +589,7 @@ function newCanvas () {
         container = thisObject.bottomSpace.getContainer(point)
 
         if (container !== undefined && container.detectMouseOver === true) {
-          container.eventHandler.raiseEvent('onMouseOver', point)
+          containerFound()
           return
         }
       }
@@ -577,19 +600,7 @@ function newCanvas () {
         container = thisObject.panelsSpace.getContainer(point)
 
         if (container !== undefined && container.detectMouseOver === true) {
-          container.eventHandler.raiseEvent('onMouseOver', point)
-          return
-        }
-      }
-
-           /* We check if the mouse is over a floatingObject/ */
-      if (thisObject.floatingSpace !== undefined) {
-        let floatingObjectBeingClicked = thisObject.floatingSpace.floatingLayer.isInside(point.x, point.y)
-
-        if (floatingObjectBeingClicked >= 0) {
-          let floatingObject = thisObject.floatingSpace.floatingLayer.getFloatingObject(undefined, floatingObjectBeingClicked)
-          floatingObject.eventHandler.raiseEvent('onMouseOver', point)
-
+          containerFound()
           return
         }
       }
@@ -600,10 +611,31 @@ function newCanvas () {
         container = thisObject.chartSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER)
 
         if (container !== undefined && container.detectMouseOver === true) {
-          container.eventHandler.raiseEvent('onMouseOver', point)
+          containerFound()
           return
         }
       }
+
+      /* We check if the mouse is over a floatingObject/ */
+      if (thisObject.floatingSpace !== undefined) {
+        container = thisObject.floatingSpace.getContainer(point)
+
+        if (container !== undefined && container.detectMouseOver === true) {
+          containerFound()
+          return
+        }
+      }
+
+      function containerFound () {
+        if (lastContainerMouseOver !== undefined) {
+          if (container.id !== lastContainerMouseOver.id) {
+            lastContainerMouseOver.eventHandler.raiseEvent('onMouseNotOver', point)
+          }
+        }
+
+        container.eventHandler.raiseEvent('onMouseOver', point)
+        lastContainerMouseOver = container
+      }
     } catch (err) {
       if (ERROR_LOG === true) { logger.write('[ERROR] onMouseOver -> err = ' + err.stack) }
     }
@@ -625,45 +657,46 @@ function newCanvas () {
       }
 
       event.mousePosition = point
+      let container
+      container = canvas.panelsSpace.getContainer({ x: point.x, y: point.y })
 
-      let panelContainer = canvas.panelsSpace.getContainer({ x: point.x, y: point.y })
-
-      if (panelContainer !== undefined && panelContainer.isWheelable === true) {
-        panelContainer.eventHandler.raiseEvent('Mouse Wheel', event)
-        return false  // This instructs the browser not to take the event and scroll the page.
-      }
-
-           /* We try second with floating objects. */
-
-      let floatingObjectIndex = canvas.floatingSpace.floatingLayer.isInside(point.x, point.y)
-
-      if (floatingObjectIndex > 0) {
-        canvas.floatingSpace.floatingLayer.changeTargetRepulsion(event.wheelDelta)
+      if (container !== undefined && container.isWheelable === true) {
+        container.eventHandler.raiseEvent('onMouseWheel', event)
         return false  // This instructs the browser not to take the event and scroll the page.
       }
 
            /* We try the Bottom Space. */
 
-      let bottomContainer = canvas.bottomSpace.getContainer({ x: point.x, y: point.y })
+      container = canvas.bottomSpace.getContainer({ x: point.x, y: point.y })
 
-      if (bottomContainer !== undefined && bottomContainer.isWheelable === true) {
-        bottomContainer.eventHandler.raiseEvent('Mouse Wheel', event)
+      if (container !== undefined && container.isWheelable === true) {
+        container.eventHandler.raiseEvent('onMouseWheel', event)
         return false  // This instructs the browser not to take the event and scroll the page.
       }
 
-           /* Finally we try the Chart Space. */
+          /*   Chart Space. */
 
-      let chartContainer = canvas.chartSpace.getContainer({ x: point.x, y: point.y }, GET_CONTAINER_PURPOSE.MOUSE_WHEEL)
-
-      if (chartContainer !== undefined && chartContainer.isWheelable === true) {
-        chartContainer.eventHandler.raiseEvent('Mouse Wheel', event)
+      container = canvas.chartSpace.getContainer({ x: point.x, y: point.y }, GET_CONTAINER_PURPOSE.MOUSE_WHEEL)
+      if (container !== undefined && container.isWheelable === true) {
+        container.eventHandler.raiseEvent('onMouseWheel', event)
         return false  // This instructs the browser not to take the event and scroll the page.
-      } else {
-               /* If all the above fails, we fallback into applying zoom to the viewPort */
+      }
 
+      if (container !== undefined) {
         viewPort.applyZoom(delta)
+        return false
+      }
+
+         /* We try second with floating objects. */
+
+      container = canvas.floatingSpace.getContainer({ x: point.x, y: point.y })
+
+      if (container !== undefined && container.isWheelable === true) {
+        container.eventHandler.raiseEvent('onMouseWheel', event)
         return false  // This instructs the browser not to take the event and scroll the page.
       }
+
+      return false
     } catch (err) {
       if (ERROR_LOG === true) { logger.write('[ERROR] onMouseWheel -> err = ' + err.stack) }
     }
@@ -671,8 +704,6 @@ function newCanvas () {
 
   function checkDrag (event) {
     try {
-      if (INTENSIVE_LOG === true) { logger.write('[INFO] checkDrag -> Entering function.') }
-
       if (containerDragStarted === true || floatingObjectDragStarted === true || viewPortBeingDragged === true) {
         let point = {
           x: event.pageX,
@@ -682,15 +713,6 @@ function newCanvas () {
         browserCanvas.style.cursor = 'grabbing'
         thisObject.eventHandler.raiseEvent('Dragging', undefined)
 
-        let targetFloatingObject = thisObject.floatingSpace.floatingLayer.isInside(point.x, point.y)
-
-        if (floatingObjectDragStarted) {
-          let floatingObject = thisObject.floatingSpace.floatingLayer.getFloatingObject(undefined, floatingObjectBeingDragged)
-
-          floatingObject.currentPosition.x = dragVector.upX
-          floatingObject.currentPosition.y = dragVector.upY
-        }
-
         if (containerDragStarted || viewPortBeingDragged) {
                    /* The parameters received have been captured with zoom applied. We must remove the zoom in order to correctly modify the displacement. */
 
@@ -721,8 +743,10 @@ function newCanvas () {
           }
 
           if (containerBeingDragged !== undefined) {
-            containerBeingDragged.frame.position.x = containerBeingDragged.frame.position.x + displaceVector.x
-            containerBeingDragged.frame.position.y = containerBeingDragged.frame.position.y + displaceVector.y
+            let moveSucceed = containerBeingDragged.displace(displaceVector)
+            if (moveSucceed === false) {
+              deactivateDragging(event)
+            }
           }
         }
 
@@ -736,3 +760,4 @@ function newCanvas () {
     }
   }
 }
+

ChartsSpace/PlottersManager.js

@@ -221,7 +221,7 @@ function newPlottersManager () {
 
           let plotter = getNewPlotter(competition.plotter.host, competition.plotter.codeName, competition.plotter.moduleName)
 
-          plotter.container.connectToParent(thisObject.container, true, true)
+          plotter.container.connectToParent(thisObject.container, true, true, false, true, true, true)
 
           plotter.container.frame.position.x = thisObject.container.frame.width / 2 - plotter.container.frame.width / 2
           plotter.container.frame.position.y = thisObject.container.frame.height / 2 - plotter.container.frame.height / 2
@@ -285,7 +285,7 @@ function newPlottersManager () {
 
                   botAvatar.src = window.canvasApp.context.fbProfileImages.get(TEAM + '-' + BOT)
 
-                  competitionPlotter.plotter.payload[k].profile.downLabel = bot.displayName
+                  competitionPlotter.plotter.payload[k].profile.title = bot.displayName
                   competitionPlotter.plotter.payload[k].profile.imageId = imageId
                   competitionPlotter.plotter.payload[k].profile.botAvatar = botAvatar
 
@@ -463,7 +463,7 @@ function newPlottersManager () {
 
           let plotter = getNewPlotter(pProductCard.product.plotter.devTeam, pProductCard.product.plotter.codeName, pProductCard.product.plotter.moduleName)
 
-          plotter.container.connectToParent(thisObject.container, true, true)
+          plotter.container.connectToParent(thisObject.container, true, true, false, true, true, true)
 
           plotter.container.frame.position.x = thisObject.container.frame.width / 2 - plotter.container.frame.width / 2
           plotter.container.frame.position.y = thisObject.container.frame.height / 2 - plotter.container.frame.height / 2
@@ -525,8 +525,8 @@ function newPlottersManager () {
               if (productPlotter.plotter.payload !== undefined) {
                 let imageId = pProductCard.bot.devTeam + '.' + pProductCard.bot.profilePicture
 
-                productPlotter.plotter.payload.profile.upLabel = pProductCard.product.shortDisplayName
-                productPlotter.plotter.payload.profile.downLabel = pProductCard.bot.displayName
+                productPlotter.plotter.payload.profile.subTitle = pProductCard.product.shortDisplayName
+                productPlotter.plotter.payload.profile.title = pProductCard.bot.displayName
                 productPlotter.plotter.payload.profile.imageId = imageId
                 productPlotter.plotter.payload.profile.botAvatar = pProductCard.bot.avatar
 

ChartsSpace/TimeMachine.js

@@ -1,4 +1,4 @@
- /*
+/*
 
 Markets are a function of time. When watching them, end users must be positioned at one particular point in time. The system currently allows users
 to position themselves at any time they like.
@@ -37,7 +37,7 @@ function newTimeMachine () {
   thisObject.container.frame.position.y = browserCanvas.height / 2 - TIME_MACHINE_HEIGHT / 2
 
   let controlPanelHandle             // We need this to destroy the Panel when this object is itself destroyed or no longer needs it...
-                                    // ... also to request a reference to the object for the cases we need it.
+                                   // ... also to request a reference to the object for the cases we need it.
   const SEPARATION_BETWEEN_TIMELINE_CHARTS = 1.5
 
   let timeScale
@@ -63,7 +63,7 @@ function newTimeMachine () {
   function initialize (callBackFunction) {
     if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') }
 
-      /* Each Time Machine has a Control Panel. */
+     /* Each Time Machine has a Control Panel. */
 
     let panelOwner = 'Global'
     controlPanelHandle = canvas.panelsSpace.createNewPanel('Time Control Panel', undefined, panelOwner)
@@ -76,13 +76,13 @@ function newTimeMachine () {
       moveToUserPosition(thisObject.container, timeLineCoordinateSystem, false, false, event.mousePosition)
     })
 
-      /* First, we initialize the market that we are going to show first on screen. Later all the other markets will be initialized on the background. */
+     /* First, we initialize the market that we are going to show first on screen. Later all the other markets will be initialized on the background. */
 
     let position = 0 // This defines the position of each chart respect to each other.
 
     let timelineChart = newTimelineChart()
 
-    timelineChart.container.connectToParent(thisObject.container, true, true)
+    timelineChart.container.connectToParent(thisObject.container, true, true, false, true, true, true)
     timelineChart.container.frame.height = thisObject.container.frame.height
 
     timelineChart.container.frame.position.x = thisObject.container.frame.width / 2 - timelineChart.container.frame.width / 2
@@ -103,10 +103,10 @@ function newTimeMachine () {
       controlPanel.container.eventHandler.listenToEvent('Datetime Changed', timelineChart.setDatetime, undefined)
       timelineChart.container.eventHandler.listenToEvent('Datetime Changed', controlPanel.setDatetime)
 
-      /* Each Time Machine has a Time Scale and a Right Scale. */
+     /* Each Time Machine has a Time Scale and a Right Scale. */
 
       timeScale = newTimeScale()
-      timeScale.container.connectToParent(thisObject.container, false, false)
+      timeScale.container.connectToParent(thisObject.container, false, false, false, true, true, true)
       timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) {
         thisObject.container.frame.width = TIME_MACHINE_WIDTH * event.lenghtPercentage / 100
         thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
@@ -115,7 +115,7 @@ function newTimeMachine () {
       timeScale.initialize(timeLineCoordinateSystem)
 
       rigthScale = newRateScale()
-      rigthScale.container.connectToParent(thisObject.container, false, false)
+      rigthScale.container.connectToParent(thisObject.container, false, false, false, true, true, true)
       rigthScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) {
         thisObject.container.frame.height = TIME_MACHINE_HEIGHT * event.heightPercentage / 100
         thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
@@ -143,10 +143,10 @@ function newTimeMachine () {
           let market = SUPPORTED_MARKETS[j]
 
           if (
-            exchange === DEFAULT_EXCHANGE &&
-            market.assetA === DEFAULT_MARKET.assetA &&
-            market.assetB === DEFAULT_MARKET.assetB
-          ) { continue }
+           exchange === DEFAULT_EXCHANGE &&
+           market.assetA === DEFAULT_MARKET.assetA &&
+           market.assetB === DEFAULT_MARKET.assetB
+         ) { continue }
 
           initializeTimelineChart(exchange, market)
         }
@@ -157,7 +157,7 @@ function newTimeMachine () {
 
         let timelineChart = newTimelineChart()
 
-        timelineChart.container.connectToParent(thisObject.container, true, true)
+        timelineChart.container.connectToParent(thisObject.container, true, true, false, true, true, true)
 
         timelineChart.container.frame.height = thisObject.container.frame.height
 
@@ -186,27 +186,6 @@ function newTimeMachine () {
     }
   }
 
-  function drawBackground () {
-    for (let i = 0; i < this.charts.length; i++) {
-      let chart = this.charts[i]
-      chart.drawBackground()
-    }
-  }
-
-  function draw () {
-    if (thisObject.container.frame.isInViewPort()) {
-      for (let i = 0; i < this.charts.length; i++) {
-        let chart = this.charts[i]
-        chart.draw()
-      }
-
-      if (timeScale !== undefined) { timeScale.draw() }
-      if (rigthScale !== undefined) { rigthScale.draw() }
-
-      // thisObject.container.frame.draw(false, true, false)
-    }
-  }
-
   function getContainer (point, purpose) {
     let container
 
@@ -232,7 +211,9 @@ function newTimeMachine () {
       container = this.charts[i].getContainer(point)
       if (container !== undefined) {
         if (container.isForThisPurpose(purpose)) {
-          return container
+          if (thisObject.container.frame.isThisPointHere(point) === true) {
+            return container
+          }
         }
       }
     }
@@ -247,6 +228,46 @@ function newTimeMachine () {
     }
   }
 
+  function drawBackground () {
+    thisBackground()
+
+    if (thisObject.container.frame.isInViewPort()) {
+      for (let i = 0; i < this.charts.length; i++) {
+        let chart = this.charts[i]
+        chart.drawBackground()
+      }
+    }
+  }
+
+  function draw () {
+    if (thisObject.container.frame.isInViewPort()) {
+      for (let i = 0; i < this.charts.length; i++) {
+        let chart = this.charts[i]
+        chart.draw()
+      }
+
+      if (timeScale !== undefined) { timeScale.draw() }
+      if (rigthScale !== undefined) { rigthScale.draw() }
+
+     // thisObject.container.frame.draw(false, true, false)
+    }
+  }
+
+  function thisBackground () {
+    let params = {
+      cornerRadius: 15,
+      lineWidth: 5,
+      opacity: 1,
+      container: thisObject.container,
+      borderColor: UI_COLOR.RUSTED_RED,
+      backgroundColor: UI_COLOR.WHITE,
+      fitFunction: thisObject.fitFunction,
+      coordinateSystem: timeLineCoordinateSystem
+    }
+
+    roundedCornersBackground(params)
+  }
+
   function recalculateScale () {
     if (INFO_LOG === true) { logger.write('[INFO] recalculateScale -> Entering function.') }
 
@@ -261,10 +282,10 @@ function newTimeMachine () {
     }
 
     timeLineCoordinateSystem.initialize(
-           minValue,
-           maxValue,
-           thisObject.container.frame.width,
-           thisObject.container.frame.height
-       )
+          minValue,
+          maxValue,
+          thisObject.container.frame.width,
+          thisObject.container.frame.height
+      )
   }
 }

ChartsSpace/TimelineChart.js

@@ -0,0 +1,511 @@
+function newTimelineChart () {
+  const MODULE_NAME = 'Timeline Chart'
+  const INFO_LOG = false
+  const INTENSIVE_LOG = false
+  const ERROR_LOG = true
+  const logger = newWebDebugLog()
+  logger.fileName = MODULE_NAME
+
+  let timeLineCoordinateSystem
+
+  let timePeriod = INITIAL_TIME_PERIOD
+  let datetime = NEW_SESSION_INITIAL_DATE
+
+  let thisObject = {
+    container: undefined,
+    fitFunction: undefined,
+    setDatetime: setDatetime,
+    drawBackground: drawBackground,
+    draw: draw,
+    getContainer: getContainer,
+    initialize: initialize,
+    finalize: finalize
+  }
+
+  thisObject.container = newContainer()
+  thisObject.container.initialize(MODULE_NAME)
+  thisObject.container.detectMouseOver = true
+
+  thisObject.fitFunction = canvas.chartSpace.fitIntoVisibleArea
+
+  let initializationReady = false
+
+  let productsPanel
+
+   /* Background */
+  let logoAssetA
+  let logoAssetB
+  let logoExchange
+  let logoAA
+  let canDrawLogoA = false
+  let canDrawLogoB = false
+  let canDrawLogoExchange = false
+  let canDrawLogoAA = false
+
+  let plotterManager
+  let exchange
+  let market
+
+  let productsPanelHandle
+  let timePeriodScale
+
+  return thisObject
+
+  function finalize () {
+    try {
+      if (INFO_LOG === true) { logger.write('[INFO] finalize -> Entering function.') }
+
+      plotterManager.finalize()
+    } catch (err) {
+      if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) }
+    }
+  }
+
+  function initialize (pExchange, pMarket, pTimeLineCoordinateSystem, callBackFunction) {
+    try {
+      if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') }
+
+           /* We load the logow we will need for the background. */
+      exchange = pExchange
+      market = pMarket
+      timeLineCoordinateSystem = pTimeLineCoordinateSystem
+
+      thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) {
+        saveUserPosition(thisObject.container, timeLineCoordinateSystem, event)
+      })
+
+      let panelOwner = exchange + ' ' + market.assetB + '/' + market.assetA
+      productsPanelHandle = canvas.panelsSpace.createNewPanel('Products Panel', undefined, panelOwner)
+      let productsPanel = canvas.panelsSpace.getPanel(productsPanelHandle, panelOwner)
+      productsPanel.initialize(exchange, market)
+
+      logoA = new Image()
+      logoB = new Image()
+      logoExchange = new Image()
+      logoAA = new Image()
+
+      logoA.onload = onImageALoaded
+
+      function onImageALoaded () {
+        canDrawLogoA = true
+      }
+
+      logoB.onload = onImageBLoaded
+
+      function onImageBLoaded () {
+        canDrawLogoB = true
+      }
+
+      logoExchange.onload = onImageExchangeLoaded
+
+      function onImageExchangeLoaded () {
+        canDrawLogoExchange = true
+      }
+
+      logoAA.onload = onImageAALoaded
+
+      function onImageAALoaded () {
+        canDrawLogoAA = true
+      }
+
+      logoA.src = window.canvasApp.urlPrefix + 'Images/tether-logo-background.png'
+      logoB.src = window.canvasApp.urlPrefix + 'Images/bitcoin-logo-background.png'
+      logoExchange.src = window.canvasApp.urlPrefix + 'Images/' + exchange + '-logo-background.png'
+      logoAA.src = window.canvasApp.urlPrefix + 'Images/sa-logo-background.png'
+
+      // moveToUserPosition(thisObject.container, timeLineCoordinateSystem, undefined, undefined, undefined, true)
+      timePeriod = INITIAL_TIME_PERIOD
+      datetime = NEW_SESSION_INITIAL_DATE
+
+           /* Event Subscriptions - we need this events to be fired first here and then in active Plotters. */
+
+      viewPort.eventHandler.listenToEvent('Offset Changed', onOffsetChanged)
+      viewPort.eventHandler.listenToEvent('Zoom Changed', onZoomChanged)
+
+           /* Initialize the Plotter Manager */
+
+      plotterManager = newPlottersManager()
+
+      plotterManager.container.connectToParent(thisObject.container, true, true, false, true, true, true)
+
+      plotterManager.container.frame.position.x = 0
+      plotterManager.container.frame.position.y = 0
+
+      plotterManager.initialize(productsPanel, pExchange, pMarket, onPlotterManagerReady)
+
+      function onPlotterManagerReady (err) {
+        if (INFO_LOG === true) { logger.write('[INFO] initialize -> onPlotterManagerReady -> Entering function.') }
+
+        if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) {
+          if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onPlotterManagerReady -> Plotter Manager Initialization Failed. ') }
+          if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onPlotterManagerReady -> err= ' + err.stack) }
+
+          callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
+          return
+        }
+
+        timePeriodScale = newTimePeriodScale()
+        timePeriodScale.container.connectToParent(thisObject.container, false, false, false, true, true, true)
+        timePeriodScale.container.eventHandler.listenToEvent('Time Period Changed', function (event) {
+          let currentTimePeriod = timePeriod
+          timePeriod = event.timePeriod
+          if (timePeriod !== currentTimePeriod) {
+            plotterManager.setTimePeriod(timePeriod)
+          }
+        })
+
+        timePeriodScale.initialize(timeLineCoordinateSystem)
+
+        initializationReady = true
+        callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE)
+        return
+      }
+    } catch (err) {
+      if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) }
+      callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
+    }
+  }
+
+  function onZoomChanged (event) {
+    if (INFO_LOG === true) { logger.write('[INFO] onZoomChanged -> Entering function.') }
+
+    if (initializationReady === true) {
+      recalculateCurrentDatetime()
+
+      // saveUserPosition(thisObject.container, timeLineCoordinateSystem)
+    }
+  }
+
+  function setDatetime (pDatetime) {
+    if (INFO_LOG === true) { logger.write('[INFO] setDatetime -> Entering function.') }
+
+       /* This function is used when the time is changed through the user interface, but without zooming or panning. */
+       /* No matter if the day changed or not, we need to inform all visible Plotters. */
+
+    if (thisObject.container.frame.isInViewPort()) {
+      plotterManager.setDatetime(pDatetime)
+      plotterManager.positionAtDatetime(pDatetime)
+    }
+  }
+
+  function onOffsetChanged () {
+    if (INFO_LOG === true) { logger.write('[INFO] onOffsetChanged -> Entering function.') }
+
+    if (initializationReady === true) {
+      if (thisObject.container.frame.isInViewPort()) {
+        recalculateCurrentDatetime()
+        // saveUserPosition(thisObject.container, timeLineCoordinateSystem)
+      }
+    }
+  }
+
+  function recalculateCurrentDatetime () {
+    if (INFO_LOG === true) { logger.write('[INFO] recalculateCurrentDatetime -> Entering function.') }
+
+       /*
+
+       The view port was moved or the view port zoom level was changed and the center of the screen points to a different datetime that we
+       must calculate.
+
+       */
+
+    let center = {
+      x: (viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.bottomLeft.x) / 2,
+      y: (viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y) / 2
+    }
+
+    center = unTransformThisPoint(center, thisObject.container)
+    center = timeLineCoordinateSystem.unInverseTransform(center, thisObject.container.frame.height)
+
+    let newDate = new Date(0)
+    newDate.setUTCSeconds(center.x / 1000)
+
+    datetime = newDate
+
+    plotterManager.setDatetime(datetime)
+
+    thisObject.container.eventHandler.raiseEvent('Datetime Changed', datetime)
+  }
+
+  function getContainer (point) {
+    if (INFO_LOG === true) { logger.write('[INFO] getContainer -> Entering function.') }
+
+    let container
+
+    container = timePeriodScale.getContainer(point)
+
+    if (container !== undefined) { return container }
+
+    return container
+  }
+
+  function tooTiny () {
+    if (viewPort.zoomLevel < Math.trunc(-28.25 * 100) / 100) {
+      return true
+    } else {
+      return false
+    }
+  }
+
+  function tooSmall () {
+    if (viewPort.zoomLevel < Math.trunc(-27.25 * 100) / 100) {
+      return true
+    } else {
+      return false
+    }
+  }
+
+  function drawBackground () {
+    if (thisObject.container.frame.isInViewPort()) {
+      if (window.CHART_ON_FOCUS === '') {
+        window.CHART_ON_FOCUS = exchange + ' ' + market.assetB + '/' + market.assetA
+
+        drawChartsBackgroundImages()
+      }
+    }
+  }
+
+  function draw () {
+    if (thisObject.container.frame.isInViewPort()) {
+      drawChartsBackground()
+      plotterManager.draw()
+      timePeriodScale.draw()
+    }
+  }
+
+  function drawChartsBackground () {
+       /* We will paint some transparent background here. */
+
+    let opacity = '0.9'
+
+    let fromPoint = {
+      x: 0,
+      y: 0
+    }
+
+    let toPoint = {
+      x: thisObject.container.frame.width,
+      y: thisObject.container.frame.height
+    }
+
+    fromPoint = transformThisPoint(fromPoint, thisObject.container)
+    toPoint = transformThisPoint(toPoint, thisObject.container)
+
+    fromPoint = canvas.chartSpace.fitIntoVisibleArea(fromPoint)
+    toPoint = canvas.chartSpace.fitIntoVisibleArea(toPoint)
+
+    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 drawChartsBackgroundImages () {
+    if (canDrawLogoA === false || canDrawLogoB === false || canDrawLogoExchange === false || canDrawLogoAA === false) { return }
+
+    /* Fist we calculate the corners of the current frame so as not to draw imaages ourside of it */
+
+    let fromPoint = {
+      x: 0,
+      y: 0
+    }
+
+    let toPoint = {
+      x: thisObject.container.frame.width,
+      y: thisObject.container.frame.height
+    }
+
+    fromPoint = transformThisPoint(fromPoint, thisObject.container)
+    toPoint = transformThisPoint(toPoint, thisObject.container)
+
+    /* Second we calculate the points for the images themselves */
+
+    let backgroundLogoPoint1
+    let backgroundLogoPoint2
+
+    let imageHeight = 42
+    let imageWidth = 150
+
+    const MAX_COLUMNS = 16
+    const MAX_ROWS = 5
+    const Y_TOP_MARGIN = 30
+    const MIN_ROW_HIGHT = 100
+
+    let point1 = {
+      x: viewPort.visibleArea.topLeft.x,
+      y: viewPort.visibleArea.topLeft.y
+    }
+
+    backgroundLogoPoint1 = {
+      x: getDateFromPoint(point1, thisObject.container, timeLineCoordinateSystem).valueOf(),
+      y: getRateFromPoint(point1, thisObject.container, timeLineCoordinateSystem)
+    }
+
+    let point2 = {
+      x: viewPort.visibleArea.topLeft.x + imageWidth * 8,
+      y: viewPort.visibleArea.topLeft.y
+    }
+
+    backgroundLogoPoint2 = {
+      x: getDateFromPoint(point2, thisObject.container, timeLineCoordinateSystem).valueOf(),
+      y: getRateFromPoint(point2, thisObject.container, timeLineCoordinateSystem)
+    }
+
+    let currentCorner = {
+      x: getDateFromPoint(viewPort.visibleArea.topLeft, thisObject.container, timeLineCoordinateSystem).valueOf(),
+      y: getRateFromPoint(viewPort.visibleArea.topLeft, thisObject.container, timeLineCoordinateSystem)
+    }
+
+    currentCorner.x = Math.trunc(currentCorner.x / (backgroundLogoPoint2.x - backgroundLogoPoint1.x)) * (backgroundLogoPoint2.x - backgroundLogoPoint1.x)
+
+    let rowHight = (viewPort.visibleArea.bottomLeft.y - viewPort.visibleArea.topLeft.y) / 4.5
+    if (rowHight < MIN_ROW_HIGHT) { rowHight = MIN_ROW_HIGHT }
+
+    imagePoint = timeLineCoordinateSystem.transformThisPoint(currentCorner)
+    imagePoint = transformThisPoint(imagePoint, thisObject.container)
+
+    let offSet = 0
+    let imagePosition = {
+      x: 0,
+      y: 0
+    }
+
+    for (let j = 0; j < MAX_ROWS; j++) {
+      if (offSet === -imageWidth * 8) {
+        offSet = -imageWidth * 4 - imageWidth
+      } else {
+        offSet = -imageWidth * 8
+      }
+
+      for (let i = 0; i < MAX_COLUMNS; i = i + 4) {
+        let logo = logoA
+
+        imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet
+        imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN
+
+        if (
+          imagePosition.x > fromPoint.x &&
+          imagePosition.x + imageWidth < toPoint.x &&
+          imagePosition.y > fromPoint.y &&
+          imagePosition.y + imageHeight < toPoint.y
+        ) {
+          let checkPoint = {
+            x: imagePosition.x,
+            y: imagePosition.y + imageHeight
+          }
+
+          checkPoint = thisObject.fitFunction(checkPoint)
+          if (checkPoint.y === imagePosition.y + imageHeight) {
+            browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight)
+          }
+        }
+      }
+    }
+
+    offSet = 0
+
+    for (let j = 0; j < MAX_ROWS; j++) {
+      if (offSet === -imageWidth * 8) {
+        offSet = -imageWidth * 4 - imageWidth
+      } else {
+        offSet = -imageWidth * 8
+      }
+
+      for (let i = 1; i < MAX_COLUMNS; i = i + 4) {
+        let logo = logoB
+
+        imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet
+        imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN
+
+        if (
+          imagePosition.x > fromPoint.x &&
+          imagePosition.x + imageWidth < toPoint.x &&
+          imagePosition.y > fromPoint.y &&
+          imagePosition.y + imageHeight < toPoint.y
+        ) {
+          let checkPoint = {
+            x: imagePosition.x,
+            y: imagePosition.y + imageHeight
+          }
+
+          checkPoint = thisObject.fitFunction(checkPoint)
+          if (checkPoint.y === imagePosition.y + imageHeight) {
+            browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight)
+          }
+        }
+      }
+    }
+
+    offSet = 0
+
+    for (let j = 0; j < MAX_ROWS; j++) {
+      if (offSet === -imageWidth * 8) {
+        offSet = -imageWidth * 4 - imageWidth
+      } else {
+        offSet = -imageWidth * 8
+      }
+
+      for (let i = 2; i < MAX_COLUMNS; i = i + 4) {
+        let logo = logoExchange
+
+        imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet
+        imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN
+
+        if (
+          imagePosition.x > fromPoint.x &&
+          imagePosition.x + imageWidth < toPoint.x &&
+          imagePosition.y > fromPoint.y &&
+          imagePosition.y + imageHeight < toPoint.y
+        ) {
+          let checkPoint = {
+            x: imagePosition.x,
+            y: imagePosition.y + imageHeight
+          }
+
+          checkPoint = thisObject.fitFunction(checkPoint)
+          if (checkPoint.y === imagePosition.y + imageHeight) {
+            browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight)
+          }
+        }
+      }
+    }
+
+    offSet = 0
+
+    for (let j = 0; j < MAX_ROWS; j++) {
+      if (offSet === -imageWidth * 8) {
+        offSet = -imageWidth * 4 - imageWidth
+      } else {
+        offSet = -imageWidth * 8
+      }
+
+      for (let i = 3; i < MAX_COLUMNS; i = i + 4) {
+        let logo = logoAA
+
+        imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet
+        imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN
+
+        if (
+          imagePosition.x > fromPoint.x &&
+          imagePosition.x + imageWidth < toPoint.x &&
+          imagePosition.y > fromPoint.y &&
+          imagePosition.y + imageHeight < toPoint.y
+        ) {
+          let checkPoint = {
+            x: imagePosition.x,
+            y: imagePosition.y + imageHeight
+          }
+
+          checkPoint = thisObject.fitFunction(checkPoint)
+          if (checkPoint.y === imagePosition.y + imageHeight) {
+            browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight)
+          }
+        }
+      }
+    }
+  }
+}

ChartsSpace/ViewPort.js

@@ -10,11 +10,12 @@ function newViewPort () {
   const CONSOLE_LOG = true
 
   let ANIMATION_INCREMENT = 0.25
-  const TOP_MARGIN = 15 + TOP_SPACE_HEIGHT
-  const BOTTOM_MARGIN = 15 + BOTTOM_SPACE_HEIGHT
-  const LEFT_MARGIN = 50
-  const RIGHT_MARGIN = 50
-  const MARGINS = {
+
+  let TOP_MARGIN = 15 + TOP_SPACE_HEIGHT
+  let BOTTOM_MARGIN = 20 + BOTTOM_SPACE_HEIGHT
+  let LEFT_MARGIN = 50
+  let RIGHT_MARGIN = 50
+  let MARGINS = {
     TOP: TOP_MARGIN,
     BOTTOM: BOTTOM_MARGIN,
     LEFT: LEFT_MARGIN,
@@ -44,6 +45,7 @@ function newViewPort () {
     animate: animate,
     draw: draw,
     raiseEvents: raiseEvents,
+    resize: resize,
     initialize: initialize
   }
 
@@ -76,6 +78,22 @@ function newViewPort () {
   return thisObject
 
   function initialize () {
+    resize()
+    readObjectState()
+  }
+
+  function resize () {
+    TOP_MARGIN = 15 + TOP_SPACE_HEIGHT
+    BOTTOM_MARGIN = 20 + browserCanvas.height - BOTTOM_SPACE_POSITION
+    LEFT_MARGIN = 50
+    RIGHT_MARGIN = 50
+    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 },
@@ -85,8 +103,6 @@ function newViewPort () {
 
     thisObject.width = thisObject.visibleArea.topRight.x - thisObject.visibleArea.topLeft.x
     thisObject.height = thisObject.visibleArea.bottomRight.y - thisObject.visibleArea.topLeft.y
-
-    readObjectState()
   }
 
   function getDisplacement () {

CompetitionStorage.js

@@ -94,7 +94,7 @@ function newCompetitionStorage (pName) {
 
                 case GLOBAL.CUSTOM_FAIL_RESPONSE.result: {
                   if (INFO_LOG === true) { logger.write('[INFO] initialize -> onFileSequenceReady -> Received CUSTOM FAIL Response.') }
-                  if (INFO_LOG === true) { logger.write('[INFO] initialize -> onFileSequenceReady -> err.message = ' + err.message) }
+                  if (INFO_LOG === true) { logger.write('[INFO] initialize -> onFileSequenceReady -> err= ' + err.stack) }
                   if (INFO_LOG === true) { logger.write('[INFO] initialize -> onFileSequenceReady -> This bot has not starting competing yet.') }
 
                   break

Container.js

@@ -1,14 +1,22 @@
 
 function newContainer () {
   let thisObject = {
+    id: Math.trunc(Math.random() * 10000000),
+    type: 'Rectangle',
     frame: undefined,
     displacement: 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,
@@ -17,11 +25,23 @@ function newContainer () {
 
   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 isConnectedToParent = false
 
   let dimensionsChangedEventSubscriptionId
   let onMouseOverEventSubscriptionId
   let onMouseNotOverEventSubscriptionId
+  let onFocusEventSubscriptionId
+  let onNotFocusEventSubscriptionId
+  let onDisplaceEventSubscriptionId
 
   return thisObject
 
@@ -30,14 +50,21 @@ function newContainer () {
       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 = undefined
+      thisObject.eventHandler.finalize()
     }
   }
 
-  function initialize (pName) {
+  function initialize (pName, pType) {
     thisObject.name = pName
+    thisObject.type = pType
 
     thisObject.frame = newFrame()
-    thisObject.frame.initialize()
+    thisObject.frame.initialize(pType)
     thisObject.frame.containerName = pName
     thisObject.frame.container = thisObject
 
@@ -49,18 +76,53 @@ function newContainer () {
     thisObject.displacement.containerName = pName
   }
 
-  function connectToParent (parentContainer, onWidth, onHeight) {
+  function connectToParent (
+    parentContainer,
+    onWidth,
+    onHeight,
+    onRadius,
+    onDimmensionsChangedEvent,
+    onMouseOverEvent,
+    onMouseNotOverEvent,
+    onFocusEvent,
+    onNotFocusEvent,
+    onDisplaceEvent
+  ) {
     connectedToParentWidth = onWidth
     connectedToParentHeight = onHeight
+    connectedToParentRadius = onRadius
+
+    onDimmensionsChangedParentEvent = onDimmensionsChangedEvent
+    onMouseOverParentEvent = onMouseOverEvent
+    onMouseNotOverParentEvent = onMouseNotOverEvent
+    onFocusParentEvent = onFocusEvent
+    onNotFocusParentEvent = onNotFocusEvent
+    onDisplaceParentEvent = onDisplaceEvent
+
     isConnectedToParent = true
 
     thisObject.displacement.parentDisplacement = parentContainer.displacement
     thisObject.frame.parentFrame = parentContainer.frame
     thisObject.parentContainer = parentContainer
 
-    dimensionsChangedEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('Dimmensions Changed', onParentDimmensionsChanged)
-    onMouseOverEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onMouseOver', onMouseOver)
-    onMouseNotOverEventSubscriptionId = thisObject.parentContainer.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
+    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 (connectedToParentWidth) {
       thisObject.frame.width = thisObject.parentContainer.frame.width
@@ -68,6 +130,9 @@ function newContainer () {
     if (connectedToParentHeight) {
       thisObject.frame.height = thisObject.parentContainer.frame.height
     }
+    if (connectedToParentRadius) {
+      thisObject.frame.radius = thisObject.parentContainer.frame.radius
+    }
   }
 
   function onParentDimmensionsChanged (event) {
@@ -80,6 +145,10 @@ function newContainer () {
       thisObject.frame.height = thisObject.parentContainer.frame.height
       dimmensionsChanged = true
     }
+    if (connectedToParentRadius) {
+      thisObject.frame.radius = thisObject.parentContainer.frame.radius
+      dimmensionsChanged = true
+    }
 
     if (dimmensionsChanged) {
       thisObject.eventHandler.raiseEvent('Dimmensions Changed', event)
@@ -94,6 +163,18 @@ function newContainer () {
     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 isForThisPurpose (purpose) {
     if (purpose !== undefined) {
       switch (purpose) {
@@ -118,4 +199,37 @@ function newContainer () {
     }
     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.
+
+    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)
+    }
+  }
 }

EventHandler.js

@@ -4,13 +4,18 @@ function newEventHandler () {
     name: undefined,                            // This is for debugging purposes only.
     listenToEvent: listenToEvent,
     stopListening: stopListening,
-    raiseEvent: raiseEvent
+    raiseEvent: raiseEvent,
+    finalize: finalize
   }
 
-  var eventHandlers = []        // Here we store all the functions we will call when an event is raiseed.
+  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 = Math.trunc(Math.random() * 1000000)
     eventHandlers.push([eventType, handler, extraData, eventSubscriptionId])

FloatingSpace/CircularMenu.js

@@ -0,0 +1,132 @@
+
+function newCircularMenu () {
+  const MODULE_NAME = 'Circular Menu'
+
+  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 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()
+    }
+
+    menuItems = undefined
+  }
+
+  function initialize (menuItemsInitialValues, payload) {
+/* Create the array of Menu Items */
+
+    for (let i = 0; i < menuItemsInitialValues.length; i++) {
+      let menuItem = newCircularMenuItem()
+      let menuItemInitialValue = menuItemsInitialValues[i]
+
+      menuItem.action = menuItemInitialValue.action
+      menuItem.actionFunction = menuItemInitialValue.actionFunction
+      menuItem.label = menuItemInitialValue.label
+      menuItem.workingLabel = menuItemInitialValue.workingLabel
+      menuItem.workDoneLabel = menuItemInitialValue.workDoneLabel
+      menuItem.workFailedLabel = menuItemInitialValue.workFailedLabel
+      menuItem.visible = menuItemInitialValue.visible
+      menuItem.imagePathOn = menuItemInitialValue.imagePathOn
+      menuItem.imagePathOff = menuItemInitialValue.imagePathOff
+      menuItem.rawRadius = menuItemInitialValue.rawRadius
+      menuItem.targetRadius = menuItemInitialValue.label
+      menuItem.currentRadius = menuItemInitialValue.currentRadius
+      menuItem.angle = menuItemInitialValue.angle
+
+      if (menuItem.label === undefined) {
+        menuItem.type = 'Icon Only'
+      } else {
+        menuItem.type = 'Icon & Text'
+      }
+
+      menuItem.initialize(payload)
+      menuItem.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true)
+      menuItems.push(menuItem)
+    }
+
+    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 menutItem = menuItems[i]
+        container = menutItem.getContainer(point)
+        if (container !== undefined) { return container }
+      }
+    }
+  }
+
+  function physics () {
+    for (let i = 0; i < menuItems.length; i++) {
+      let menutItem = menuItems[i]
+      menutItem.physics()
+    }
+  }
+
+  function onFocus () {
+    for (let i = 0; i < menuItems.length; i++) {
+      let menutItem = menuItems[i]
+      menutItem.targetRadius = menutItem.rawRadius * 1.5
+      menutItem.isDeployed = true
+    }
+    thisObject.isDeployed = true
+  }
+
+  function onNotFocus () {
+    for (let i = 0; i < menuItems.length; i++) {
+      let menutItem = menuItems[i]
+      menutItem.targetRadius = menutItem.rawRadius * 0 - i * 5
+      menutItem.isDeployed = false
+    }
+    thisObject.isDeployed = false
+  }
+
+  function drawBackground (pFloatingObject) {
+    for (let i = 0; i < menuItems.length; i++) {
+      let menutItem = menuItems[i]
+      menutItem.drawBackground()
+    }
+  }
+
+  function drawForeground (pFloatingObject) {
+    for (let i = 0; i < menuItems.length; i++) {
+      let menutItem = menuItems[i]
+      menutItem.drawForeground()
+    }
+  }
+}

FloatingSpace/CircularMenuItem.js

@@ -0,0 +1,239 @@
+
+function newCircularMenuItem () {
+  const MODULE_NAME = 'Circular Menu Iem'
+
+  let thisObject = {
+    type: undefined,
+    isDeployed: undefined,
+    iconOn: undefined,
+    iconOff: undefined,
+    action: undefined,
+    actionFunction: undefined,
+    label: undefined,
+    workingLabel: undefined,
+    workDoneLabel: undefined,
+    workFailedLabel: undefined,
+    visible: false,
+    imagePathOn: undefined,
+    imagePathOff: undefined,
+    rawRadius: undefined,
+    targetRadius: undefined,
+    currentRadius: undefined,
+    angle: undefined,
+    container: undefined,
+    payload: undefined,
+    physics: physics,
+    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 = 30
+
+  let isMouseOver = false
+
+  let selfMouseOverEventSubscriptionId
+  let selfMouseClickEventSubscriptionId
+  let selfMouseNotOverEventSubscriptionId
+
+  let labelToPrint = ''
+  let defaultBackgroudColor = UI_COLOR.RED
+  let backgroundColorToUse = UI_COLOR.RED
+  let temporaryStatus = 0
+
+  const EXTRA_MOUSE_OVER_ICON_SIZE = 2
+  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.payload = undefined
+    thisObject.actionFunction = undefined
+  }
+
+  function initialize (pPayload) {
+    thisObject.payload = pPayload
+    /* Load Menu Images */
+
+    thisObject.iconOn = new Image()
+    thisObject.iconOn.onload = onImageLoad
+
+    function onImageLoad () {
+      thisObject.iconOff = new Image()
+      thisObject.iconOff.onload = onImageLoad
+
+      function onImageLoad () {
+        thisObject.canDrawIcon = true
+      }
+      thisObject.iconOff.src = window.canvasApp.urlPrefix + thisObject.imagePathOff
+    }
+    thisObject.iconOn.src = window.canvasApp.urlPrefix + thisObject.imagePathOn
+    thisObject.icon = thisObject.iconOn // The default value is ON.
+
+    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 = 150
+    } else {
+      thisObject.container.frame.width = 50
+    }
+  }
+
+  function getContainer (point) {
+    let container
+    if (thisObject.isDeployed === true) {
+      if (thisObject.container.frame.isThisPointHere(point, true, false) === true) {
+        return thisObject.container
+      } else {
+        return undefined
+      }
+    }
+  }
+
+  function physics () {
+    const INCREASE_STEP = 0.25
+
+    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
+      }
+    }
+
+    thisObject.container.frame.position.x = thisObject.container.frame.radius * 3 / 7 * Math.cos(toRadians(thisObject.angle)) - thisObject.currentRadius * 1.5
+    thisObject.container.frame.position.y = thisObject.container.frame.radius * 3 / 7 * Math.sin(toRadians(thisObject.angle)) - thisObject.container.frame.height / 2
+
+    temporaryStatus--
+    if (temporaryStatus < 0) {
+      temporaryStatus = 0
+    }
+    if (temporaryStatus === 0) {
+      labelToPrint = thisObject.label
+      backgroundColorToUse = defaultBackgroudColor
+    }
+  }
+
+  function onMouseOver (point) {
+    if (thisObject.container.frame.isThisPointHere(point, true, false) === true) {
+      isMouseOver = true
+    } else {
+      isMouseOver = false
+    }
+  }
+
+  function onMouseNotOver (point) {
+    isMouseOver = false
+  }
+
+  async function onMouseClick (event) {
+    if (temporaryStatus === 0) {
+      if (thisObject.workingLabel !== undefined) {
+        setTemporaryStatus(thisObject.workingLabel, UI_COLOR.GREY, 500)
+      }
+
+      let result = await thisObject.actionFunction(thisObject.payload, thisObject.action)
+
+      if (result === true) {
+        if (thisObject.workDoneLabel !== undefined) {
+          setTemporaryStatus(thisObject.workDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 250)
+        }
+      } else {
+        if (thisObject.workFailedLabel != undefined) {
+          setTemporaryStatus(thisObject.workFailedLabel, UI_COLOR.TITANIUM_YELLOW, 500)
+        }
+      }
+    }
+  }
+
+  function setTemporaryStatus (text, backgroundColor, waitingCycles) {
+    labelToPrint = text
+    backgroundColorToUse = backgroundColor
+    temporaryStatus = waitingCycles
+  }
+
+  function drawBackground () {
+    if (thisObject.container.frame.position.x > 0 && thisObject.isDeployed === true && thisObject.currentRadius >= thisObject.targetRadius) {
+      if (thisObject.type === 'Icon & Text') {
+        let params = {
+          cornerRadius: 3,
+          lineWidth: 0.1,
+          container: thisObject.container,
+          borderColor: UI_COLOR.DARK,
+          backgroundColor: backgroundColorToUse,
+          castShadow: false
+        }
+
+        if (isMouseOver === true) {
+          params.opacity = 1
+        } else {
+          params.opacity = 0.8
+        }
+
+        roundedCornersBackground(params)
+      }
+    }
+  }
+
+  function drawForeground () {
+    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.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') {
+        let labelPoint
+        let fontSize = 10
+
+        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+
+        if (thisObject.currentRadius >= thisObject.targetRadius) {
+          labelPoint = {
+            x: menuPosition.x + thisObject.currentRadius + 10,
+            y: menuPosition.y + fontSize * FONT_ASPECT_RATIO
+          }
+
+          browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+          browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
+          browserCanvasContext.fillText(labelToPrint, labelPoint.x, labelPoint.y)
+        }
+      }
+    }
+  }
+}
+

FloatingSpace/CodeEditor.js

@@ -0,0 +1,215 @@
+
+function newCodeEditor () {
+  const MODULE_NAME = 'Circular Menu Iem'
+
+  let thisObject = {
+    isVisibleFunction: undefined,
+    iconOK: undefined,
+    iconNOT_OK: 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
+
+  return thisObject
+
+  function finalize () {
+    thisObject.container.finalize()
+    thisObject.container = undefined
+    thisObject.iconOK = undefined
+    thisObject.iconNOT_OK = undefined
+    thisObject.payload = undefined
+    thisObject.isVisibleFunction = undefined
+  }
+
+  function initialize () {
+    /* Load Images */
+
+    thisObject.iconOK = new Image()
+    thisObject.iconOK.onload = onImageLoad
+
+    function onImageLoad () {
+      thisObject.iconNOT_OK = new Image()
+      thisObject.iconNOT_OK.onload = onImageLoad
+
+      function onImageLoad () {
+        thisObject.canDrawIcon = true
+      }
+      thisObject.iconNOT_OK.src = window.canvasApp.urlPrefix + thisObject.imagePathNOT_OK
+    }
+    thisObject.iconOK.src = window.canvasApp.urlPrefix + thisObject.imagePathOK
+    thisObject.icon = thisObject.iconOK // The default value is ON.
+  }
+
+  function deactivate () {
+    if (thisObject.visible === true) {
+      thisObject.visible = false
+      let textArea = document.getElementById('textArea')
+      textArea.style.display = 'none'
+      thisObject.payload.node.code = textArea.value
+    }
+  }
+
+  function activate (payload) {
+    thisObject.visible = true
+    thisObject.payload = payload
+    thisObject.rawRadius = 8
+    thisObject.targetRadius = thisObject.container.frame.radius
+    thisObject.currentRadius = 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: 12px;' +
+                     'background-color: rgb(204, 88, 53);' +
+                     'color:rgb(255, 255, 255);' +
+                     'width: ' + thisObject.container.frame.width + 'px;' +
+                     'height: ' + thisObject.container.frame.height + 'px'
+    textArea.style.display = 'block'
+    textArea.focus()
+  }
+
+  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
+      }
+    }
+
+    thisObject.container.frame.position.x = 0
+    thisObject.container.frame.position.y = 0
+
+    thisObject.container.frame.width = thisObject.container.frame.radius * 2.2
+    thisObject.container.frame.height = thisObject.container.frame.radius * 1
+
+    let textAreaPosition = {
+      x: 0 - thisObject.container.frame.width / 2,
+      y: 0
+    }
+
+    textAreaPosition = thisObject.container.frame.frameThisPoint(textAreaPosition)
+    if (thisObject.visible === true) {
+      let checkPosition = {
+        x: textAreaPosition.x,
+        y: textAreaPosition.y - window.canvasApp.topMargin
+      }
+      if (thisObject.isVisibleFunction(checkPosition) === false) {
+        deactivate()
+      }
+    }
+    if (thisObject.visible === true) {
+      let textAreaDiv = document.getElementById('textAreaDiv')
+      textAreaDiv.style = 'position:absolute; 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
+
+      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/FloatingObject.js

@@ -1,168 +1,220 @@
- 
+
 function newFloatingObject () {
   const MODULE_NAME = 'Floating Object'
-  const INFO_LOG = false
-  const INTENSIVE_LOG = false
   const ERROR_LOG = true
 
   const logger = newWebDebugLog()
   logger.fileName = MODULE_NAME
 
   let thisObject = {
-
-    physicsLoop: physicsLoop,
-    eventHandler: undefined,
-
+    fitFunction: undefined,
+    container: undefined,
+    positionLocked: false,
+    isOnFocus: false,
     payload: undefined,                     // This is a reference to an object controlled by a Plotter. The plotter can change its internal value and we will see them from here.
     type: undefined,                        // Currently there are two types of Floating Objects: Profile Balls, and Notes.
-
-    physicsEnabled: false,
-
+    currentSpeed: 0,                        // This is the current speed of the floating object.
+    currentMass: 0,                         // This is the current mass of the floating object, including its zoom applied.
+    friction: 0,                            // This is a factor that will ultimatelly desacelerate the floating object.
+    rawMass: 0,                             // This is the mass value without zoom.
+    rawRadius: 0,                           // This is the radius of this floating object without zoom.
+    targetRadius: 0,                        // This is the target radius of the floating object with zoom applied. It should be animated until reaching this value.
+    isPinned: undefined,
+    pinToggle: pinToggle,
+    physics: physics,
     initializeMass: initializeMass,
     initializeRadius: initializeRadius,
     initializeImageSize: initializeImageSize,
     initializeFontSize: initializeFontSize,
-
-    imageId: undefined,
-
-    currentPosition: 0,                     // Current x,y position of the floating object at the floating object's layer, where there is no displacement or zoom. This position is always changing towards the target position.
-    currentSpeed: 0,                        // This is the current speed of the floating object.
-    currentRadius: 0,                       // This is the current radius of the floating object, including its zoom applied.
-    currentMass: 0,                         // This is the current mass of the floating object, including its zoom applied.
-
-    friction: 0,                            // This is a factor that will ultimatelly desacelerate the floating object.
-
-    rawMass: 0,                             // This is the mass value without zoom.
-    rawRadius: 0,                           // This is the radius of this floating object without zoom.
-
-    targetRadius: 0,                        // This is the target radius of the floating object with zoom applied. It should be animated until reaching this value.
-
-    fillStyle: '',
-
-    labelStrokeStyle: '',
-
     radomizeCurrentPosition: radomizeCurrentPosition,
     radomizeCurrentSpeed: radomizeCurrentSpeed,
-
     drawBackground: drawBackground,
+    drawMiddleground: drawMiddleground,
     drawForeground: drawForeground,
-
+    drawOnFocus: drawOnFocus,
     updateMass: updateMass,                 // Function to update the mass when the zoom level changed.
     updateRadius: updateRadius,             // Function to update the radius when the zoom level changed.
-
-    linkedObject: undefined,                // This is a reference to the object that this floating object is representing.
-    linkedObjectType: '',                   // Since there might be floating objects for different types of objects, here we store the type of object we are linking to.
-
-    container: undefined,                    // This is a pointer to the object where the floating object belongs to.
+    getContainer: getContainer,
+    finalize: finalize,
     initialize: initialize
-
   }
 
-  let underlayingObject
+  thisObject.container = newContainer()
+  thisObject.container.initialize(MODULE_NAME, 'Circle')
+  thisObject.container.isClickeable = true
+  thisObject.container.isDraggeable = true
+  thisObject.container.detectMouseOver = true
+  thisObject.container.frame.radius = 0
+  thisObject.container.frame.position.x = 0
+  thisObject.container.frame.position.y = 0
 
-  thisObject.eventHandler = newEventHandler()
+  let selfMouseOverEventSubscriptionId
+  let selfMouseClickEventSubscriptionId
+  let spaceMouseOverEventSubscriptionId
+  let spaceFocusAquiredEventSubscriptionId
 
   return thisObject
 
-  function initialize (pType, floatingLayer, callBackFunction) {
-    try {
-      if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') }
+  function finalize () {
+    thisObject.container.eventHandler.stopListening(selfMouseOverEventSubscriptionId)
+    thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId)
+    canvas.floatingSpace.container.eventHandler.stopListening(spaceMouseOverEventSubscriptionId)
+    canvas.floatingSpace.container.eventHandler.stopListening(spaceFocusAquiredEventSubscriptionId)
 
-      switch (pType) {
+    thisObject.container.finalize()
+    thisObject.container = undefined
+    thisObject.payload = undefined
+    thisObject.fitFunction = undefined
+  }
 
-        case 'Profile Ball': {
-          underlayingObject = newProfileBall()
-          underlayingObject.initialize(onInitialized)
+  function initialize (type, payload) {
+    thisObject.payload = payload
+    thisObject.type = type
 
-          function onInitialized (err) {
+    selfMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
+    selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
 
-          }
+      /* To consider that this object lost the focus, we monitor the space for 2 key events */
+    spaceMouseOverEventSubscriptionId = canvas.floatingSpace.container.eventHandler.listenToEvent('onMouseOver', mouseOverFlotingSpace)
+    spaceFocusAquiredEventSubscriptionId = canvas.floatingSpace.container.eventHandler.listenToEvent('onFocusAquired', someoneAquiredFocus)
 
-          break
-        }
-        case 'Note': {
-          underlayingObject = newNote()
-          underlayingObject.initialize(onInitialized)
+    /* Assign a position and speed */
 
-          function onInitialized (err) {
+    thisObject.radomizeCurrentPosition(thisObject.payload.targetPosition)
+    thisObject.radomizeCurrentSpeed()
+  }
 
-          }
-          break
-        }
+  function getContainer (point) {
+    let container
 
-        case 'Strategy Part': {
-          underlayingObject = newStrategyPart()
-          underlayingObject.initialize(floatingLayer, onInitialized)
+    container = thisObject.payload.uiObject.getContainer(point)
+    if (container !== undefined) { return container }
 
-          function onInitialized (err) {
+    if (thisObject.container.frame.isThisScreenPointHere(point) === true) {
+      return thisObject.container
+    } else {
+      return undefined
+    }
+  }
 
-          }
+  function pinToggle () {
+    if (thisObject.isPinned !== true) {
+      thisObject.isPinned = true
+      thisObject.positionLocked = true
+    } else {
+      thisObject.isPinned = false
+    }
+  }
 
-          break
-        }
-        default: {
-          if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Unsopported type received -> pType = ' + pType) }
-          callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
-          break
-        }
+  function physics () {
+    thisObjectPhysics()
+    thisObject.payload.uiObject.physics()
+  }
+
+  function thisObjectPhysics () {
+                           // The radius also have a target.
+
+    if (Math.abs(thisObject.container.frame.radius - thisObject.targetRadius) >= 3) {
+      if (thisObject.container.frame.radius < thisObject.targetRadius) {
+        thisObject.container.frame.radius = thisObject.container.frame.radius + 3
+      } else {
+        thisObject.container.frame.radius = thisObject.container.frame.radius - 3
       }
+      thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
+    }
 
-      thisObject.type = pType
+                           // The imageSize also have a target.
 
-      thisObject.eventHandler.listenToEvent('onMouseOver', onMouseOver)
-      canvas.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
-      thisObject.eventHandler.listenToEvent('onMouseClick', onMouseClick)
+    if (Math.abs(thisObject.currentImageSize - thisObject.targetImageSize) >= 1) {
+      if (thisObject.currentImageSize < thisObject.targetImageSize) {
+        thisObject.currentImageSize = thisObject.currentImageSize + 2
+      } else {
+        thisObject.currentImageSize = thisObject.currentImageSize - 2
+      }
+    }
 
-      if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) }
-    } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err.message = ' + err.message) }
-      if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) }
+                           // The fontSize also have a target.
+
+    if (Math.abs(thisObject.currentFontSize - thisObject.targetFontSize) >= 0.2) {
+      if (thisObject.currentFontSize < thisObject.targetFontSize) {
+        thisObject.currentFontSize = thisObject.currentFontSize + 0.2
+      } else {
+        thisObject.currentFontSize = thisObject.currentFontSize - 0.2
+      }
+    }
+
+    /* Floating object position in screen coordinates */
+
+    thisObject.payload.position.x = thisObject.container.frame.position.x
+    thisObject.payload.position.y = thisObject.container.frame.position.y
+  }
+
+  function onMouseOver (point) {
+    if (thisObject.isOnFocus === false) {
+      thisObject.targetRadius = thisObject.rawRadius * 6.0
+      thisObject.targetImageSize = thisObject.rawImageSize * 2.0
+      thisObject.targetFontSize = thisObject.rawFontSize * 2.0
+
+      thisObject.payload.uiObject.container.eventHandler.raiseEvent('onFocus', point)
+
+      thisObject.positionLocked = true
+
+      canvas.floatingSpace.container.eventHandler.raiseEvent('onFocusAquired', thisObject.container)
+      thisObject.isOnFocus = true
     }
   }
 
-  function physicsLoop (callBackFunction) {
-    try {
-      if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') }
+  function mouseOverFlotingSpace (point) {
+    removeFocus()
+  }
 
-      underlayingObject.physicsLoop()
-
-      if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE) }
-    } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] physicsLoop -> err.message = ' + err.message) }
-      if (callBackFunction !== undefined) { callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE) }
+  function someoneAquiredFocus (container) {
+    if (container.id !== thisObject.container.id) {
+      removeFocus()
     }
   }
 
-  function onMouseOver () {
-    thisObject.targetRadius = thisObject.rawRadius * 2.5
-    thisObject.targetImageSize = thisObject.rawImageSize * 2.5
-    thisObject.targetFontSize = thisObject.rawFontSize * 2.5
+  function removeFocus () {
+    if (thisObject.isOnFocus === true) {
+      thisObject.targetRadius = thisObject.rawRadius * 1
+      thisObject.targetImageSize = thisObject.rawImageSize * 1
+      thisObject.targetFontSize = thisObject.rawFontSize * 1
 
-    underlayingObject.onMouseOver()
-  }
+      thisObject.payload.uiObject.container.eventHandler.raiseEvent('onNotFocus')
 
-  function onMouseNotOver () {
-    thisObject.targetRadius = thisObject.rawRadius * 1
-    thisObject.targetImageSize = thisObject.rawImageSize * 1
-    thisObject.targetFontSize = thisObject.rawFontSize * 1
-
-    underlayingObject.onMouseNotOver()
+      if (thisObject.isPinned !== true) {
+        thisObject.positionLocked = false
+      }
+      thisObject.isOnFocus = false
+    }
   }
 
   function onMouseClick (pPoint) {
-    underlayingObject.onMouseClick(pPoint, thisObject)
+    let event = {
+      point: pPoint,
+      parent: thisObject
+    }
+    thisObject.payload.uiObject.container.eventHandler.raiseEvent('onMouseClick', event)
   }
 
   function drawBackground () {
-    underlayingObject.drawBackground(thisObject)
+    thisObject.payload.uiObject.drawBackground()
+  }
+
+  function drawMiddleground () {
+    thisObject.payload.uiObject.drawMiddleground()
   }
 
   function drawForeground () {
-    underlayingObject.drawForeground(thisObject)
+    thisObject.payload.uiObject.drawForeground()
+  }
+
+  function drawOnFocus () {
+    thisObject.payload.uiObject.drawOnFocus()
   }
 
   function initializeMass (suggestedValue) {
-    var mass = suggestedValue
+    let mass = suggestedValue
     if (mass < 0.1) {
       mass = 0.1
     }
@@ -172,14 +224,16 @@ function newFloatingObject () {
   }
 
   function initializeRadius (suggestedValue) {
-    var radius = suggestedValue
+    let radius = suggestedValue
     if (radius < 2) {
       radius = 2
     }
 
     thisObject.rawRadius = radius
     thisObject.targetRadius = radius
-    thisObject.currentRadius = radius / 3
+    thisObject.container.frame.radius = radius / 3
+
+    thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
   }
 
   function initializeImageSize (suggestedValue) {
@@ -205,12 +259,19 @@ function newFloatingObject () {
   }
 
   function radomizeCurrentPosition (arroundPoint) {
-    var position = {
+    let position = {
       x: Math.floor((Math.random() * (200) - 100)) + arroundPoint.x,
       y: Math.floor((Math.random() * (200) - 100)) + arroundPoint.y
     }
 
-    thisObject.currentPosition = position
+    // thisObject.container.frame.position = thisObject.container.frame.frameThisPoint(position)
+
+    thisObject.container.frame.position.x = position.x
+    thisObject.container.frame.position.y = position.y
+
+    thisObject.payload.position = {}
+    thisObject.payload.position.x = position.x
+    thisObject.payload.position.y = position.y
   }
 
   function radomizeCurrentSpeed () {
@@ -240,14 +301,8 @@ function newFloatingObject () {
 
   function updateMass () {
 
-        // thisObject.currentMass = thisObject.rawMass + thisObject.rawMass * thisObject.container.zoom.incrementM * thisObject.container.zoom.levelM;
-
   }
 
   function updateRadius () {
-
-        // thisObject.targetRadius = thisObject.rawRadius + thisObject.rawRadius * thisObject.container.zoom.incrementR * thisObject.container.zoom.levelR;
-
   }
 }
-

FloatingSpace/Note.js

@@ -1,24 +1,45 @@
  
 function newNote () {
+  const MODULE_NAME = 'Note'
+
   let thisObject = {
-
-    physicsLoop: physicsLoop,
-    onMouseOver: onMouseOver,
-    onMouseClick: onMouseClick,
-    onMouseNotOver: onMouseNotOver,
+    container: undefined,
+    physics: physics,
     drawBackground: drawBackground,
+    drawMiddleground: drawMiddleground,
     drawForeground: drawForeground,
+    drawOnFocus: drawOnFocus,
+    getContainer: getContainer,
     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
+
   return thisObject
 
-  function initialize (callBackFunction) {
-    callBackFunction()
+  function initialize () {
+    thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
+    thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
+    thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
   }
 
-  function physicsLoop () {
+  function getContainer (point) {
+    let container
+
+    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+      return thisObject.container
+    } else {
+      return undefined
+    }
+  }
+
+  function physics () {
 
   }
 
@@ -30,8 +51,9 @@ function newNote () {
 
   }
 
-  function onMouseClick (pPoint, pFloatingObject) {
-
+  function onMouseClick (event) {
+    pPoint = event.point
+    pFloatingObject = event.parent
   }
 
   function drawBackground (pFloatingObject) {
@@ -42,11 +64,11 @@ function newNote () {
 
     point = viewPort.fitIntoVisibleArea(point)
 
-    if (pFloatingObject.currentRadius > 1) {
+    if (pFloatingObject.container.frame.radius > 1) {
             /* Target Line */
 
       browserCanvasContext.beginPath()
-      browserCanvasContext.moveTo(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y)
+      browserCanvasContext.moveTo(pFloatingObject.container.frame.position.x, pFloatingObject.container.frame.position.y)
       browserCanvasContext.lineTo(point.x, point.y)
       browserCanvasContext.strokeStyle = 'rgba(204, 204, 204, 0.5)'
       browserCanvasContext.setLineDash([4, 2])
@@ -55,7 +77,7 @@ function newNote () {
       browserCanvasContext.setLineDash([0, 0])
     }
 
-    if (pFloatingObject.currentRadius > 0.5) {
+    if (pFloatingObject.container.frame.radius > 0.5) {
             /* Target Spot */
 
       var radius = 1
@@ -68,12 +90,20 @@ function newNote () {
     }
   }
 
+  function drawOnFocus () {
+
+  }
+
+  function drawMiddleground () {
+
+  }
+
   function drawForeground (pFloatingObject) {
-    const BUBBLE_CORNERS_RADIOUS = 5
+    const BUBBLE_CORNERS_RADIUS = 5
     const TITLE_BAR_HEIGHT = 14
 
-    const BUBBLE_WIDTH = BUBBLE_CORNERS_RADIOUS + pFloatingObject.currentRadius * 4
-    const BUBBLE_HEIGHT = BUBBLE_CORNERS_RADIOUS + pFloatingObject.currentRadius * 2
+    const BUBBLE_WIDTH = BUBBLE_CORNERS_RADIUS + pFloatingObject.container.frame.radius * 4
+    const BUBBLE_HEIGHT = BUBBLE_CORNERS_RADIUS + pFloatingObject.container.frame.radius * 2
 
     let borderPoint1
     let borderPoint2
@@ -81,31 +111,31 @@ function newNote () {
     let borderPoint4
 
     let intialDisplace = {
-      x: pFloatingObject.currentPosition.x - BUBBLE_WIDTH / 2,
-      y: pFloatingObject.currentPosition.y - BUBBLE_HEIGHT / 2
+      x: pFloatingObject.container.frame.position.x - BUBBLE_WIDTH / 2,
+      y: pFloatingObject.container.frame.position.y - BUBBLE_HEIGHT / 2
     }
 
-    if (pFloatingObject.currentRadius > 5) {
+    if (pFloatingObject.container.frame.radius > 5) {
             /* Rounded Background */
 
       borderPoint1 = {
-        x: intialDisplace.x + BUBBLE_CORNERS_RADIOUS,
-        y: intialDisplace.y + BUBBLE_CORNERS_RADIOUS
+        x: intialDisplace.x + BUBBLE_CORNERS_RADIUS,
+        y: intialDisplace.y + BUBBLE_CORNERS_RADIUS
       }
 
       borderPoint2 = {
-        x: intialDisplace.x + BUBBLE_WIDTH - BUBBLE_CORNERS_RADIOUS,
-        y: intialDisplace.y + BUBBLE_CORNERS_RADIOUS
+        x: intialDisplace.x + BUBBLE_WIDTH - BUBBLE_CORNERS_RADIUS,
+        y: intialDisplace.y + BUBBLE_CORNERS_RADIUS
       }
 
       borderPoint3 = {
-        x: intialDisplace.x + BUBBLE_WIDTH - BUBBLE_CORNERS_RADIOUS,
-        y: intialDisplace.y + BUBBLE_HEIGHT - BUBBLE_CORNERS_RADIOUS
+        x: intialDisplace.x + BUBBLE_WIDTH - BUBBLE_CORNERS_RADIUS,
+        y: intialDisplace.y + BUBBLE_HEIGHT - BUBBLE_CORNERS_RADIUS
       }
 
       borderPoint4 = {
-        x: intialDisplace.x + BUBBLE_CORNERS_RADIOUS,
-        y: intialDisplace.y + +BUBBLE_HEIGHT - BUBBLE_CORNERS_RADIOUS
+        x: intialDisplace.x + BUBBLE_CORNERS_RADIUS,
+        y: intialDisplace.y + +BUBBLE_HEIGHT - BUBBLE_CORNERS_RADIUS
       }
 
       titleBarPoint1 = {
@@ -123,14 +153,14 @@ function newNote () {
       browserCanvasContext.fillStyle = 'rgba(255, 249, 196, 0.75)'
       browserCanvasContext.beginPath()
 
-      browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, BUBBLE_CORNERS_RADIOUS, 1.0 * Math.PI, 1.5 * Math.PI)
-      browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - BUBBLE_CORNERS_RADIOUS)
-      browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, BUBBLE_CORNERS_RADIOUS, 1.5 * Math.PI, 2.0 * Math.PI)
-      browserCanvasContext.lineTo(borderPoint3.x + BUBBLE_CORNERS_RADIOUS, borderPoint3.y)
-      browserCanvasContext.arc(borderPoint3.x, borderPoint3.y, BUBBLE_CORNERS_RADIOUS, 0 * Math.PI, 0.5 * Math.PI)
-      browserCanvasContext.lineTo(borderPoint4.x, borderPoint4.y + BUBBLE_CORNERS_RADIOUS)
-      browserCanvasContext.arc(borderPoint4.x, borderPoint4.y, BUBBLE_CORNERS_RADIOUS, 0.5 * Math.PI, 1.0 * Math.PI)
-      browserCanvasContext.lineTo(borderPoint1.x - BUBBLE_CORNERS_RADIOUS, borderPoint1.y)
+      browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, BUBBLE_CORNERS_RADIUS, 1.0 * Math.PI, 1.5 * Math.PI)
+      browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - BUBBLE_CORNERS_RADIUS)
+      browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, BUBBLE_CORNERS_RADIUS, 1.5 * Math.PI, 2.0 * Math.PI)
+      browserCanvasContext.lineTo(borderPoint3.x + BUBBLE_CORNERS_RADIUS, borderPoint3.y)
+      browserCanvasContext.arc(borderPoint3.x, borderPoint3.y, BUBBLE_CORNERS_RADIUS, 0 * Math.PI, 0.5 * Math.PI)
+      browserCanvasContext.lineTo(borderPoint4.x, borderPoint4.y + BUBBLE_CORNERS_RADIUS)
+      browserCanvasContext.arc(borderPoint4.x, borderPoint4.y, BUBBLE_CORNERS_RADIUS, 0.5 * Math.PI, 1.0 * Math.PI)
+      browserCanvasContext.lineTo(borderPoint1.x - BUBBLE_CORNERS_RADIUS, borderPoint1.y)
 
       browserCanvasContext.closePath()
 
@@ -146,10 +176,10 @@ function newNote () {
       browserCanvasContext.beginPath()
 
       browserCanvasContext.moveTo(titleBarPoint1.x, titleBarPoint1.y)
-      browserCanvasContext.lineTo(borderPoint1.x - BUBBLE_CORNERS_RADIOUS, borderPoint1.y)
-      browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, BUBBLE_CORNERS_RADIOUS, 1.0 * Math.PI, 1.5 * Math.PI)
-      browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - BUBBLE_CORNERS_RADIOUS)
-      browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, BUBBLE_CORNERS_RADIOUS, 1.5 * Math.PI, 2.0 * Math.PI)
+      browserCanvasContext.lineTo(borderPoint1.x - BUBBLE_CORNERS_RADIUS, borderPoint1.y)
+      browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, BUBBLE_CORNERS_RADIUS, 1.0 * Math.PI, 1.5 * Math.PI)
+      browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - BUBBLE_CORNERS_RADIUS)
+      browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, BUBBLE_CORNERS_RADIUS, 1.5 * Math.PI, 2.0 * Math.PI)
       browserCanvasContext.lineTo(titleBarPoint2.x, titleBarPoint2.y)
 
       browserCanvasContext.closePath()
@@ -160,12 +190,12 @@ function newNote () {
       browserCanvasContext.stroke()
     }
 
-    if (pFloatingObject.currentRadius > 0.5) {
+    if (pFloatingObject.container.frame.radius > 0.5) {
             /* Image */
 
       let imagePosition = {
-        x: pFloatingObject.currentPosition.x,
-        y: pFloatingObject.currentPosition.y + BUBBLE_HEIGHT / 2
+        x: pFloatingObject.container.frame.position.x,
+        y: pFloatingObject.container.frame.position.y + BUBBLE_HEIGHT / 2
       }
 
       if (pFloatingObject.payloadImageId !== undefined) {
@@ -187,10 +217,10 @@ function newNote () {
 
             /* Labels */
 
-      if (pFloatingObject.currentRadius > 6) {
+      if (pFloatingObject.container.frame.radius > 6) {
         browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle
 
-        const SIZE_PERCENTAGE = Math.trunc(pFloatingObject.currentRadius / pFloatingObject.targetRadius * 100) / 100
+        const SIZE_PERCENTAGE = Math.trunc(pFloatingObject.container.frame.radius / pFloatingObject.targetRadius * 100) / 100
         let ALPHA
 
         if (pFloatingObject.targetRadius > 0) {
@@ -198,7 +228,7 @@ function newNote () {
         } else {
  // Object is dying...
 
-          ALPHA = Math.trunc((0.5 - (100 - pFloatingObject.currentRadius / 100)) * 100) / 100
+          ALPHA = Math.trunc((0.5 - (100 - pFloatingObject.container.frame.radius / 100)) * 100) / 100
 
           if (ALPHA < 0) { ALPHA = 0 }
         }
@@ -214,7 +244,7 @@ function newNote () {
 
         if (label !== undefined) {
           if (SIZE_PERCENTAGE > 0.9) {
-            browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY  
+            browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
 
             let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO
             let yOffset = (TITLE_BAR_HEIGHT - fontSize) / 2 + 2
@@ -283,8 +313,8 @@ function newNote () {
               let labelRow = labelRows[i]
 
               let startingPosition = {
-                x: pFloatingObject.currentPosition.x,
-                y: pFloatingObject.currentPosition.y - labelRows.length / 2 * (fontSize * FONT_ASPECT_RATIO + 10)
+                x: pFloatingObject.container.frame.position.x,
+                y: pFloatingObject.container.frame.position.y - labelRows.length / 2 * (fontSize * FONT_ASPECT_RATIO + 10)
               }
 
               labelPoint = {
@@ -292,7 +322,7 @@ function newNote () {
                 y: startingPosition.y + (i + 1) * (fontSize * FONT_ASPECT_RATIO + 10)
               }
 
-              browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY  
+              browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
               browserCanvasContext.fillStyle = 'rgba(60, 60, 60, ' + ALPHA + ')'
               browserCanvasContext.fillText(labelRow, labelPoint.x, labelPoint.y)
             }

FloatingSpace/NoteSets.js

@@ -23,7 +23,8 @@ function newNoteSets () {
   let thisObject = {
     createNoteSet: createNoteSet,
     destroyNoteSet: destroyNoteSet,
-    initialize: initialize
+    initialize: initialize,
+    finalize: finalize
   }
 
   let noteSets = []
@@ -35,6 +36,11 @@ function newNoteSets () {
     floatingLayer = pFloatingLayer
   }
 
+  function finalize () {
+    floatingLayer.finalize()
+    floatingLayer = undefined
+  }
+
   function createNoteSet (pPayload, pEventHandler, callBackFunction) {
     try {
             /*
@@ -118,19 +124,7 @@ function newNoteSets () {
                             Each time we identify a floatingObject that is not at the raw data anymore, we request the floatinglayer to kill it.
                             */
 
-              floatingLayer.killFloatingObject(floatingNote.floatingHandle, onObjectKilled)
-
-              function onObjectKilled (err) {
-                if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) {
-                  if (ERROR_LOG === true) { logger.write('[ERROR] createNoteSet -> onNotesChanged -> Remove old Notes -> Floating Object Not Found.') }
-                  if (ERROR_LOG === true) { logger.write('[ERROR] createNoteSet -> onNotesChanged -> Remove old Notes -> Floating Object cannot be killed.') }
-                  if (ERROR_LOG === true) { logger.write('[ERROR] createNoteSet -> onNotesChanged -> Remove old Notes -> floatingNote.floatingHandle = ' + floatingNote.floatingHandle) }
-                  return
-                }
-
-                if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Remove old Notes -> floatingNote.floatingHandle = ' + floatingNote.floatingHandle) }
-                if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Remove old Notes -> Removed from Layer.') }
-              }
+              floatingLayer.removeFloatingObject(floatingNote.floatingHandle)
             } else {
               newFloatingNotes.push(floatingNote)
 
@@ -219,21 +213,18 @@ function newNoteSets () {
                             */
 
               let floatingObject = newFloatingObject()
-              floatingObject.initialize('Note', floatingLayer, onInitialized)
+              floatingObject.initialize('Note', '', floatingLayer)
 
-              function onInitialized (err) {
-                if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Add new Notes -> onInitialized -> Entering function.') }
+              floatingObject.payload = noteSet.payload
+              floatingObject.payloadNoteIndex = i
+              floatingObject.payloadImageId = noteSet.imageId
 
-                floatingObject.payload = noteSet.payload
-                floatingObject.payloadNoteIndex = i
-                floatingObject.payloadImageId = noteSet.imageId
+              floatingObject.friction = 0.995
 
-                floatingObject.friction = 0.995
-
-                floatingObject.initializeMass(200)
+              floatingObject.initializeMass(200)
 
                                 // let bodyText = pNewNotes[i].body;
-                let radius
+              let radius
 
                                 /*
                                 if (bodyText.length < 100) {
@@ -242,27 +233,26 @@ function newNoteSets () {
                                     radius = bodyText.length;
                                 }
                                 */
-                radius = 50
+              radius = 50
 
-                floatingObject.initializeRadius(radius)
-                floatingObject.initializeImageSize(15)
+              floatingObject.initializeRadius(radius)
+              floatingObject.initializeImageSize(15)
 
-                floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 0.5)'
-                floatingObject.labelStrokeStyle = 'rgba(60, 60, 60, 0.50)'
+              floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 0.5)'
+              floatingObject.labelStrokeStyle = 'rgba(60, 60, 60, 0.50)'
 
-                floatingLayer.addFloatingObject(floatingObject)
+              floatingLayer.addFloatingObject(floatingObject)
 
-                if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Add new Notes -> onInitialized -> New Note added to Layer.') }
+              if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Add new Notes -> onInitialized -> New Note added to Layer.') }
 
-                plotterNote.floatingHandle = floatingObject.handle
+              plotterNote.floatingHandle = floatingObject.handle
 
-                if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Add new Notes -> plotterNote.floatingHandle = ' + plotterNote.floatingHandle) }
+              if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Add new Notes -> plotterNote.floatingHandle = ' + plotterNote.floatingHandle) }
 
-                newFloatingNotes.push(plotterNote)
+              newFloatingNotes.push(plotterNote)
 
-                if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Add new Notes -> onInitialized -> Added to newFloatingNotes.') }
-                if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Add new Notes -> onInitialized -> newFloatingNotes.length = ' + newFloatingNotes.length) }
-              }
+              if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Add new Notes -> onInitialized -> Added to newFloatingNotes.') }
+              if (INFO_LOG === true) { logger.write('[INFO] createNoteSet -> onNotesChanged -> Add new Notes -> onInitialized -> newFloatingNotes.length = ' + newFloatingNotes.length) }
             } else {
               newFloatingNotes.push(floatingNote)
 
@@ -309,7 +299,7 @@ function newNoteSets () {
           for (let j = 0; j < noteSet.floatingNotes.length; j++) {
             let floatingNote = noteSet.floatingNotes[j]
 
-            floatingLayer.killFloatingObject(floatingNote.floatingHandle)
+            floatingLayer.removeFloatingObject(floatingNote.floatingHandle)
           }
 
           noteSets.splice(i, 1)  // Delete item from array.

FloatingSpace/ProfileBall.js

@@ -1,17 +1,26 @@
 
 function newProfileBall () {
+  const MODULE_NAME = 'Profile Ball'
+
   let thisObject = {
-
-    physicsLoop: physicsLoop,
-    onMouseOver: onMouseOver,
-    onMouseClick: onMouseClick,
-    onMouseNotOver: onMouseNotOver,
+    container: undefined,
+    physics: physics,
     drawBackground: drawBackground,
+    drawMiddleground: drawMiddleground,
     drawForeground: drawForeground,
+    drawOnFocus: drawOnFocus,
+    getContainer: getContainer,
     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 ballStringMenu = [
     {
       visible: false,
@@ -53,35 +62,39 @@ function newProfileBall () {
 
   return thisObject
 
-  function initialize (callBackFunction) {
+  function initialize () {
     for (let i = 0; i < ballStringMenu.length; i++) {
       let menuItem = ballStringMenu[i]
-
       menuItem.iconOn = new Image()
-
       menuItem.iconOn.onload = onImageLoad
-
       function onImageLoad () {
         menuItem.iconOff = new Image()
-
         menuItem.iconOff.onload = onImageLoad
-
         function onImageLoad () {
           menuItem.canDrawIcon = true
         }
-
         menuItem.iconOff.src = window.canvasApp.urlPrefix + menuItem.imagePathOff
       }
-
       menuItem.iconOn.src = window.canvasApp.urlPrefix + menuItem.imagePathOn
-
       menuItem.icon = menuItem.iconOn // The default value is ON.
     }
 
-    callBackFunction()
+    thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
+    thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
+    thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
   }
 
-  function physicsLoop () {
+  function getContainer (point) {
+    let container
+
+    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+      return thisObject.container
+    } else {
+      return undefined
+    }
+  }
+
+  function physics () {
         // The menuItems also have a target.
 
     for (let i = 0; i < ballStringMenu.length; i++) {
@@ -113,9 +126,12 @@ function newProfileBall () {
     }
   }
 
-  function onMouseClick (pPoint, pFloatingObject) {
+  function onMouseClick (event) {
         /* What we need to do here is to check which menu item was clicked, if any. */
 
+    pPoint = event.point
+    pFloatingObject = event.parent
+
     let menuItemIndex
 
     for (let i = 0; i < ballStringMenu.length; i++) {
@@ -123,8 +139,8 @@ function newProfileBall () {
 
       if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) {
         let position = {
-          x: pFloatingObject.currentPosition.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)),
-          y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle))
+          x: pFloatingObject.container.frame.position.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)),
+          y: pFloatingObject.container.frame.position.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle))
         }
 
         browserCanvasContext.drawImage(menuItem.icon, position.x, position.y, menuItem.currentRadius * 2, menuItem.currentRadius * 2)
@@ -169,17 +185,17 @@ function newProfileBall () {
 
   function drawBackground (pFloatingObject) {
     let point = {
-      x: pFloatingObject.payload.profile.position.x,
-      y: pFloatingObject.payload.profile.position.y
+      x: pFloatingObject.payload.targetPosition.x,
+      y: pFloatingObject.payload.targetPosition.y
     }
 
     point = viewPort.fitIntoVisibleArea(point)
 
-    if (pFloatingObject.currentRadius > 1) {
+    if (pFloatingObject.container.frame.radius > 1) {
             /* Target Line */
 
       browserCanvasContext.beginPath()
-      browserCanvasContext.moveTo(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y)
+      browserCanvasContext.moveTo(pFloatingObject.container.frame.position.x, pFloatingObject.container.frame.position.y)
       browserCanvasContext.lineTo(point.x, point.y)
       browserCanvasContext.strokeStyle = 'rgba(204, 204, 204, 0.5)'
       browserCanvasContext.setLineDash([4, 2])
@@ -188,7 +204,7 @@ function newProfileBall () {
       browserCanvasContext.setLineDash([0, 0])
     }
 
-    if (pFloatingObject.currentRadius > 0.5) {
+    if (pFloatingObject.container.frame.radius > 0.5) {
             /* Target Spot */
 
       var radius = 1
@@ -201,24 +217,32 @@ function newProfileBall () {
     }
   }
 
+  function drawOnFocus () {
+
+  }
+
+  function drawMiddleground () {
+
+  }
+
   function drawForeground (pFloatingObject) {
-    if (pFloatingObject.currentRadius > 5) {
+    if (pFloatingObject.container.frame.radius > 5) {
             /* Contourn */
 
       browserCanvasContext.beginPath()
-      browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true)
+      browserCanvasContext.arc(pFloatingObject.container.frame.position.x, pFloatingObject.container.frame.position.y, pFloatingObject.container.frame.radius, 0, Math.PI * 2, true)
       browserCanvasContext.closePath()
       browserCanvasContext.strokeStyle = 'rgba(30, 30, 30, 0.75)'
       browserCanvasContext.lineWidth = 1
       browserCanvasContext.stroke()
     }
 
-    if (pFloatingObject.currentRadius > 0.5) {
+    if (pFloatingObject.container.frame.radius > 0.5) {
             /* Main FloatingObject */
 
       var alphaA
 
-      if (pFloatingObject.currentRadius < 3) {
+      if (pFloatingObject.container.frame.radius < 3) {
         alphaA = 1
       } else {
         alphaA = 0.75
@@ -227,7 +251,7 @@ function newProfileBall () {
       alphaA = 0.75
 
       browserCanvasContext.beginPath()
-      browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true)
+      browserCanvasContext.arc(pFloatingObject.container.frame.position.x, pFloatingObject.container.frame.position.y, pFloatingObject.container.frame.radius, 0, Math.PI * 2, true)
       browserCanvasContext.closePath()
 
       browserCanvasContext.fillStyle = pFloatingObject.fillStyle
@@ -243,12 +267,12 @@ function newProfileBall () {
       if (image !== null && image !== undefined) {
         browserCanvasContext.save()
         browserCanvasContext.beginPath()
-        browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true)
+        browserCanvasContext.arc(pFloatingObject.container.frame.position.x, pFloatingObject.container.frame.position.y, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true)
         browserCanvasContext.closePath()
         browserCanvasContext.clip()
-        browserCanvasContext.drawImage(image, pFloatingObject.currentPosition.x - pFloatingObject.currentImageSize / 2, pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize, pFloatingObject.currentImageSize)
+        browserCanvasContext.drawImage(image, pFloatingObject.container.frame.position.x - pFloatingObject.currentImageSize / 2, pFloatingObject.container.frame.position.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize, pFloatingObject.currentImageSize)
         browserCanvasContext.beginPath()
-        browserCanvasContext.arc(pFloatingObject.currentPosition.x - pFloatingObject.currentImageSize / 2, pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true)
+        browserCanvasContext.arc(pFloatingObject.container.frame.position.x - pFloatingObject.currentImageSize / 2, pFloatingObject.container.frame.position.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true)
         browserCanvasContext.clip()
         browserCanvasContext.closePath()
         browserCanvasContext.restore()
@@ -262,8 +286,8 @@ function newProfileBall () {
 
       if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) {
         let position = {
-          x: pFloatingObject.currentPosition.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)),
-          y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle))
+          x: pFloatingObject.container.frame.position.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)),
+          y: pFloatingObject.container.frame.position.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle))
         }
 
         browserCanvasContext.drawImage(menuItem.icon, position.x - menuItem.currentRadius, position.y - menuItem.currentRadius, menuItem.currentRadius * 2, menuItem.currentRadius * 2)
@@ -272,38 +296,38 @@ function newProfileBall () {
 
         /* Label Text */
 
-    if (pFloatingObject.currentRadius > 6) {
+    if (pFloatingObject.container.frame.radius > 6) {
       browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle
 
       let labelPoint
       let fontSize = pFloatingObject.currentFontSize
 
-      browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY  
+      browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
 
       let label
 
-      label = pFloatingObject.payload.profile.upLabel
+      label = pFloatingObject.payload.profile.subTitle
 
       if (label !== undefined) {
         labelPoint = {
-          x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO,
-          y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 - fontSize * FONT_ASPECT_RATIO - 10
+          x: pFloatingObject.container.frame.position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO,
+          y: pFloatingObject.container.frame.position.y - pFloatingObject.currentImageSize / 2 - fontSize * FONT_ASPECT_RATIO - 10
         }
 
-        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY  
+        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
         browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle
         browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
       }
 
-      label = pFloatingObject.payload.profile.downLabel
+      label = pFloatingObject.payload.profile.title
 
       if (label !== undefined) {
         labelPoint = {
-          x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO,
-          y: pFloatingObject.currentPosition.y + pFloatingObject.currentImageSize / 2 + fontSize * FONT_ASPECT_RATIO + 15
+          x: pFloatingObject.container.frame.position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO,
+          y: pFloatingObject.container.frame.position.y + pFloatingObject.currentImageSize / 2 + fontSize * FONT_ASPECT_RATIO + 15
         }
 
-        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY  
+        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
         browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle
         browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
       }

FloatingSpace/ProfileBalls.js

@@ -25,45 +25,38 @@ function newProfileBalls () {
 
   return thisObject
 
-  function finalize () {
-    try {
-      if (INFO_LOG === true) { logger.write('[INFO] finalize -> Entering function.') }
-
-      floatingLayer.finalize()
-    } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) }
-    }
-  }
-
   function initialize (pFloatingLayer) {
     floatingLayer = pFloatingLayer
   }
 
+  function finalize () {
+    floatingLayer.finalize()
+    floatingLayer = undefined
+  }
+
   function createNewProfileBall (pPayload, callBackFunction) {
     let floatingObject = newFloatingObject()
-    floatingObject.initialize('Profile Ball', floatingLayer, onInitialized)
+    floatingObject.initialize('Profile Ball', '', floatingLayer)
 
-    function onInitialized (err) {
-      floatingObject.payload = pPayload
+    floatingObject.payload = pPayload
 
-      floatingObject.friction = 0.995
+    floatingObject.friction = 0.995
 
-      floatingObject.initializeMass(100)
-      floatingObject.initializeRadius(30)
-      floatingObject.initializeImageSize(50)
-      floatingObject.initializeFontSize(10)
+    floatingObject.initializeMass(100)
+    floatingObject.initializeRadius(30)
+    floatingObject.initializeImageSize(50)
+    floatingObject.initializeFontSize(10)
 
-      floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 0.5)'
-      floatingObject.labelStrokeStyle = 'rgba(60, 60, 60, 0.50)'
+    floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 0.5)'
+    floatingObject.labelStrokeStyle = 'rgba(60, 60, 60, 0.50)'
 
-      floatingLayer.addFloatingObject(floatingObject)
+    floatingLayer.addFloatingObject(floatingObject)
 
-      callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE, floatingObject.handle)
-    }
+    callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE, floatingObject.handle)
   }
 
   function destroyProfileBall (pFloatingObjectHandle) {
-    floatingLayer.killFloatingObject(pFloatingObjectHandle)
+    floatingLayer.removeFloatingObject(pFloatingObjectHandle)
   }
 }
 

FloatingSpace/StrategyPart.js

@@ -1,333 +1,373 @@
 
 function newStrategyPart () {
+  const MODULE_NAME = 'Strategy Part'
+  const ERROR_LOG = true
+
+  const logger = newWebDebugLog()
+  logger.fileName = MODULE_NAME
+
   let thisObject = {
-
-    physicsLoop: physicsLoop,
-    onMouseOver: onMouseOver,
-    onMouseClick: onMouseClick,
-    onMouseNotOver: onMouseNotOver,
+    fitFunction: undefined,
+    isVisibleFunction: undefined,
+    type: undefined,
+    menu: undefined,
+    isOnFocus: false,
+    container: undefined,
+    payload: undefined,
+    codeEditor: undefined,
+    partTitle: undefined,
+    physics: physics,
     drawBackground: drawBackground,
+    drawMiddleground: drawMiddleground,
     drawForeground: drawForeground,
+    drawOnFocus: drawOnFocus,
+    getContainer: getContainer,
+    finalize: finalize,
     initialize: initialize
-
   }
 
-  let ballStringMenu = [
-    {
-      visible: false,
-      imagePathOn: 'Images/menu.icon.on.1.gif',
-      imagePathOff: 'Images/menu.icon.off.1.gif',
-      rawRadius: 8,
-      targetRadius: 0,
-      currentRadius: 0,
-      angle: 60
-    },
-    {
-      visible: false,
-      imagePathOn: 'Images/menu.icon.on.2.gif',
-      imagePathOff: 'Images/menu.icon.off.2.gif',
-      rawRadius: 8,
-      targetRadius: 0,
-      currentRadius: 0,
-      angle: 20 * 1
-    },
-    {
-      visible: false,
-      imagePathOn: 'Images/menu.icon.on.3.gif',
-      imagePathOff: 'Images/menu.icon.off.3.gif',
-      rawRadius: 8,
-      targetRadius: 0,
-      currentRadius: 0,
-      angle: -20
-    },
-    {
-      visible: false,
-      imagePathOn: 'Images/menu.icon.on.4.gif',
-      imagePathOff: 'Images/menu.icon.off.4.gif',
-      rawRadius: 8,
-      targetRadius: 0,
-      currentRadius: 0,
-      angle: -60
-    }
-  ]
+  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 floatingLayer
-  let isMouseOver = false
+  let image
+  let imagePath
+
+  let selfFocusEventSubscriptionId
+  let selfNotFocuskEventSubscriptionId
+  let selfDisplaceEventSubscriptionId
 
   return thisObject
 
-  function initialize (pFloatingLayer, callBackFunction) {
-    floatingLayer = pFloatingLayer
+  function finalize () {
+    thisObject.container.eventHandler.stopListening(selfFocusEventSubscriptionId)
+    thisObject.container.eventHandler.stopListening(selfNotFocuskEventSubscriptionId)
+    thisObject.container.eventHandler.stopListening(selfDisplaceEventSubscriptionId)
 
-    for (let i = 0; i < ballStringMenu.length; i++) {
-      let menuItem = ballStringMenu[i]
+    thisObject.container.finalize()
+    thisObject.container = undefined
+    thisObject.payload = undefined
+    thisObject.menu.finalize()
+    thisObject.menu = undefined
+    thisObject.partTitle.finalize()
+    thisObject.partTitle = undefined
+    thisObject.fitFunction = undefined
+    thisObject.isVisibleFunction = undefined
 
-      menuItem.iconOn = new Image()
+    if (thisObject.codeEditor !== undefined) {
+      thisObject.codeEditor.finalize()
+      thisObject.codeEditor = undefined
+    }
 
-      menuItem.iconOn.onload = onImageLoad
+    image = undefined
+    imagePath = undefined
+  }
+
+  function initialize (payload, menuItemsInitialValues) {
+    thisObject.payload = payload
+
+/* Initialize the Menu */
+
+    thisObject.menu = newCircularMenu()
+    thisObject.menu.initialize(menuItemsInitialValues, thisObject.payload)
+    thisObject.menu.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true)
+
+/* Initialize Part Title */
+
+    thisObject.partTitle = newStrategyPartTitle()
+    thisObject.partTitle.isVisibleFunction = thisObject.isVisibleFunction
+    thisObject.partTitle.container.connectToParent(thisObject.container, false, false, true, true, false, false, true, true)
+    thisObject.partTitle.initialize(thisObject.payload)
+
+/* Load Part Image */
+
+    if (thisObject.imagePath !== undefined) {
+      image = new Image()
+      image.onload = onImageLoad
 
       function onImageLoad () {
-        menuItem.iconOff = new Image()
-
-        menuItem.iconOff.onload = onImageLoad
-
-        function onImageLoad () {
-          menuItem.canDrawIcon = true
-        }
-
-        menuItem.iconOff.src = window.canvasApp.urlPrefix + menuItem.imagePathOff
+        image.canDrawIcon = true
       }
-
-      menuItem.iconOn.src = window.canvasApp.urlPrefix + menuItem.imagePathOn
-
-      menuItem.icon = menuItem.iconOn // The default value is ON.
+      image.src = window.canvasApp.urlPrefix + thisObject.imagePath
     }
 
-    callBackFunction()
+    selfFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onFocus', onFocus)
+    selfNotFocuskEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus)
+    selfDisplaceEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onDisplace', onDisplace)
   }
 
-  function physicsLoop () {
-        // The menuItems also have a target.
+  function getContainer (point) {
+    let container
 
-    for (let i = 0; i < ballStringMenu.length; i++) {
-      let menuItem = ballStringMenu[i]
+    if (thisObject.codeEditor !== undefined) {
+      container = thisObject.codeEditor.getContainer(point)
+      if (container !== undefined) { return container }
+    }
 
-      if (Math.abs(menuItem.currentRadius - menuItem.targetRadius) >= 0.5) {
-        if (menuItem.currentRadius < menuItem.targetRadius) {
-          menuItem.currentRadius = menuItem.currentRadius + 0.5
-        } else {
-          menuItem.currentRadius = menuItem.currentRadius - 0.5
+    container = thisObject.partTitle.getContainer(point)
+    if (container !== undefined) { return container }
+
+    container = thisObject.menu.getContainer(point)
+    if (container !== undefined) { return container }
+
+    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+      return thisObject.container
+    } else {
+      return undefined
+    }
+  }
+
+  function physics () {
+    thisObject.menu.physics()
+    thisObject.partTitle.physics()
+
+    if (thisObject.codeEditor !== undefined) {
+      thisObject.codeEditor.physics()
+    }
+
+    if (thisObject.payload.chainParent === undefined) {
+      thisObject.payload.targetPosition.x = canvas.floatingSpace.container.frame.width / 2,
+      thisObject.payload.targetPosition.y = canvas.floatingSpace.container.frame.height / 2
+    } else {
+      thisObject.payload.targetPosition.x = thisObject.payload.chainParent.payload.position.x
+      thisObject.payload.targetPosition.y = thisObject.payload.chainParent.payload.position.y
+    }
+  }
+
+  function onFocus () {
+    thisObject.isOnFocus = true
+  }
+
+  function onNotFocus () {
+    thisObject.isOnFocus = false
+    if (thisObject.codeEditor !== undefined) {
+      thisObject.codeEditor.deactivate()
+    }
+  }
+
+  function onDisplace (event) {
+    thisObject.partTitle.exitEditMode()
+  }
+
+  function drawBackground () {
+    if (thisObject.isOnFocus === false) {
+      drawConnectingLine()
+      thisObject.menu.drawBackground()
+    }
+  }
+
+  function drawMiddleground () {
+    if (thisObject.isOnFocus === false) {
+      drawText()
+      thisObject.partTitle.draw()
+    }
+  }
+
+  function drawForeground () {
+    if (thisObject.isOnFocus === false) {
+      drawBodyAndPicture()
+      thisObject.menu.drawForeground()
+    }
+  }
+
+  function drawOnFocus () {
+    if (thisObject.isOnFocus === true) {
+      drawConnectingLine()
+      thisObject.menu.drawBackground()
+
+      if (thisObject.codeEditor !== undefined) {
+        thisObject.codeEditor.drawBackground()
+        thisObject.codeEditor.drawForeground()
+      }
+
+      drawText()
+      thisObject.partTitle.draw()
+
+      if (thisObject.codeEditor !== undefined) {
+        if (thisObject.codeEditor.visible === false) {
+          drawBodyAndPicture()
+          thisObject.menu.drawForeground()
         }
+      } else {
+        drawBodyAndPicture()
+        thisObject.menu.drawForeground()
       }
     }
   }
 
-  function onMouseOver () {
-    for (let i = 0; i < ballStringMenu.length; i++) {
-      let menuItem = ballStringMenu[i]
+  function drawConnectingLine () {
+    if (thisObject.payload.chainParent === undefined) { return }
 
-      menuItem.targetRadius = menuItem.rawRadius * 2.5
+    let targetPoint = {
+      x: thisObject.payload.targetPosition.x,
+      y: thisObject.payload.targetPosition.y
     }
 
-    isMouseOver = true
-  }
-
-  function onMouseNotOver () {
-    for (let i = 0; i < ballStringMenu.length; i++) {
-      let menuItem = ballStringMenu[i]
-
-      menuItem.targetRadius = menuItem.rawRadius * 0 - i * 5
+    let position = {
+      x: 0,
+      y: 0
     }
 
-    isMouseOver = false
-  }
+    targetPoint = canvas.floatingSpace.container.frame.frameThisPoint(targetPoint)
+    position = thisObject.container.frame.frameThisPoint(position)
 
-  function onMouseClick (pPoint, pFloatingObject) {
-        /* What we need to do here is to check which menu item was clicked, if any. */
-
-    let menuItemIndex
-
-    for (let i = 0; i < ballStringMenu.length; i++) {
-      let menuItem = ballStringMenu[i]
-
-      if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) {
-        let position = {
-          x: pFloatingObject.currentPosition.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)),
-          y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle))
-        }
-
-        browserCanvasContext.drawImage(menuItem.icon, position.x, position.y, menuItem.currentRadius * 2, menuItem.currentRadius * 2)
-
-        let distance = Math.sqrt(Math.pow(position.x - pPoint.x, 2) + Math.pow(position.y - pPoint.y, 2))
-
-        if (distance < menuItem.currentRadius) {
-          menuItemIndex = i
-        }
-      }
-    }
-
-    if (menuItemIndex !== undefined) {
-      switch (menuItemIndex) {
-
-        case 0: {
- // This menu item is to turn ON / OFF the plotting of this bot.
-
-          if (pFloatingObject.payload.profile.plot === true) {
-            pFloatingObject.payload.profile.plot = false
-
-            let menuItem = ballStringMenu[0]
-            menuItem.icon = menuItem.iconOff
-          } else {
-            pFloatingObject.payload.profile.plot = true
-
-            let menuItem = ballStringMenu[0]
-            menuItem.icon = menuItem.iconOn
-          }
-
-          break
-        }
-
-        case 1: {
- // This menu item is to turn ON the Debug Log pannel for the bot.
-
-          break
-        }
-      }
-    }
-  }
-
-  function drawBackground (pFloatingObject) {
-    /* Here we do the trick of recalculation the position of the anchor by setting it to the position of its parent */
-
-    if (pFloatingObject.payload.parentNode !== undefined) {
-      let parentFloatingObject = floatingLayer.getFloatingObject(pFloatingObject.payload.parentNode.handle)
-
-      pFloatingObject.payload.profile.position.x = parentFloatingObject.currentPosition.x
-      pFloatingObject.payload.profile.position.y = parentFloatingObject.currentPosition.y
-    }
-
-   /* Here I continue painting the background */
-
-    let point = {
-      x: pFloatingObject.payload.profile.position.x,
-      y: pFloatingObject.payload.profile.position.y
-    }
-
-    point = viewPort.fitIntoVisibleArea(point)
-
-    if (pFloatingObject.currentRadius > 1) {
+    if (thisObject.container.frame.radius > 1) {
             /* Target Line */
 
       browserCanvasContext.beginPath()
-      browserCanvasContext.moveTo(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y)
-      browserCanvasContext.lineTo(point.x, point.y)
+      browserCanvasContext.moveTo(position.x, position.y)
+      browserCanvasContext.lineTo(targetPoint.x, targetPoint.y)
       browserCanvasContext.strokeStyle = 'rgba(204, 204, 204, 0.5)'
-      browserCanvasContext.setLineDash([4, 2])
+      browserCanvasContext.setLineDash([1, 4])
       browserCanvasContext.lineWidth = 1
       browserCanvasContext.stroke()
       browserCanvasContext.setLineDash([0, 0])
     }
 
-    if (pFloatingObject.currentRadius > 0.5) {
+    if (thisObject.container.frame.radius > 0.5) {
             /* Target Spot */
 
-      var radius = 1
+      let radius = 1
 
       browserCanvasContext.beginPath()
-      browserCanvasContext.arc(point.x, point.y, radius, 0, Math.PI * 2, true)
+      browserCanvasContext.arc(targetPoint.x, targetPoint.y, radius, 0, Math.PI * 2, true)
       browserCanvasContext.closePath()
       browserCanvasContext.fillStyle = 'rgba(30, 30, 30, 1)'
       browserCanvasContext.fill()
     }
   }
 
-  function drawForeground (pFloatingObject) {
-    if (pFloatingObject.currentRadius > 5) {
-            /* Contourn */
-
-      browserCanvasContext.beginPath()
-      browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true)
-      browserCanvasContext.closePath()
-      browserCanvasContext.strokeStyle = 'rgba(30, 30, 30, 0.75)'
-      browserCanvasContext.lineWidth = 1
-      browserCanvasContext.stroke()
+  function drawText () {
+/* Text Follows */
+    let position = {
+      x: 0,
+      y: 0
     }
 
-    if (pFloatingObject.currentRadius > 0.5) {
-            /* Main FloatingObject */
+    position = thisObject.container.frame.frameThisPoint(position)
 
-      var alphaA
+    let radius = thisObject.container.frame.radius
+            /* Label Text */
+    let labelPoint
+    let fontSize = thisObject.payload.floatingObject.currentFontSize
+    let label
 
-      if (pFloatingObject.currentRadius < 3) {
-        alphaA = 1
-      } else {
-        alphaA = 0.75
+    if (radius > 6) {
+      const MAX_LABEL_LENGTH = 30
+
+      label = thisObject.payload.subTitle
+      label = addIndexNumber(label)
+
+      if (label !== undefined) {
+        if (label.length > MAX_LABEL_LENGTH) {
+          label = label.substring(0, MAX_LABEL_LENGTH) + '...'
+        }
+
+        labelPoint = {
+          x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO,
+          y: position.y + radius * 2 / 3 + fontSize * FONT_ASPECT_RATIO + 15
+        }
+
+        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+        browserCanvasContext.fillStyle = thisObject.payload.floatingObject.labelStrokeStyle
+        browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
+      }
+    }
+  }
+
+  function addIndexNumber (label) {
+    switch (thisObject.payload.node.type) {
+      case 'Phase': {
+        let parent = thisObject.payload.parentNode
+        for (let i = 0; i < parent.phases.length; i++) {
+          let phase = parent.phases[i]
+          if (phase.id === thisObject.payload.node.id) {
+            label = label + ' #' + (i + 1)
+            return label
+          }
+        }
+        break
+      }
+      case 'Situation': {
+        let parent = thisObject.payload.parentNode
+        for (let i = 0; i < parent.situations.length; i++) {
+          let situation = parent.situations[i]
+          if (situation.id === thisObject.payload.node.id) {
+            label = label + ' #' + (i + 1)
+            return label
+          }
+        }
+        break
+      }
+      case 'Condition': {
+        let parent = thisObject.payload.parentNode
+        for (let i = 0; i < parent.conditions.length; i++) {
+          let condition = parent.conditions[i]
+          if (condition.id === thisObject.payload.node.id) {
+            label = label + ' #' + (i + 1)
+            return label
+          }
+        }
+        break
+      }
+      default: {
+        return label
+      }
+    }
+  }
+
+  function drawBodyAndPicture () {
+    let position = {
+      x: thisObject.container.frame.position.x,
+      y: thisObject.container.frame.position.y
+    }
+
+    position = thisObject.container.frame.frameThisPoint(position)
+
+    let radius = thisObject.container.frame.radius
+
+    if (radius > 0.5) {
+      const VISIBLE_RADIUS = 5
+
+      let visiblePosition = {
+        x: thisObject.container.frame.position.x,
+        y: thisObject.container.frame.position.y
       }
 
-      alphaA = 0.75
+      visiblePosition = thisObject.container.frame.frameThisPoint(visiblePosition)
+      visiblePosition = thisObject.fitFunction(visiblePosition)
 
       browserCanvasContext.beginPath()
-      browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius * 2 / 3, 0, Math.PI * 2, true)
+      browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
       browserCanvasContext.closePath()
 
-      browserCanvasContext.fillStyle = pFloatingObject.fillStyle
+      browserCanvasContext.fillStyle = thisObject.payload.floatingObject.fillStyle
+
+      browserCanvasContext.fill()
+
+      browserCanvasContext.beginPath()
+      browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS / 2, 0, Math.PI * 2, true)
+      browserCanvasContext.closePath()
+
+      browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', 1)'
 
       browserCanvasContext.fill()
     }
 
         /* Image */
 
-    if (pFloatingObject.payload.profile.imageId !== undefined) {
-      let image = pFloatingObject.payload.profile.botAvatar
-
-      if (image !== null && image !== undefined) {
-        browserCanvasContext.save()
-        browserCanvasContext.beginPath()
-        browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true)
-        browserCanvasContext.closePath()
-        browserCanvasContext.clip()
-        browserCanvasContext.drawImage(image, pFloatingObject.currentPosition.x - pFloatingObject.currentImageSize / 2, pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize, pFloatingObject.currentImageSize)
-        browserCanvasContext.beginPath()
-        browserCanvasContext.arc(pFloatingObject.currentPosition.x - pFloatingObject.currentImageSize / 2, pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize / 2, 0, Math.PI * 2, true)
-        browserCanvasContext.clip()
-        browserCanvasContext.closePath()
-        browserCanvasContext.restore()
-      }
-    }
-
-        /* StringBall Menu */
-
-    for (let i = 0; i < ballStringMenu.length; i++) {
-      let menuItem = ballStringMenu[i]
-
-      if (menuItem.canDrawIcon === true && menuItem.currentRadius > 1) {
-        let position = {
-          x: pFloatingObject.currentPosition.x + pFloatingObject.currentImageSize / 2 * Math.cos(toRadians(menuItem.angle)),
-          y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 * Math.sin(toRadians(menuItem.angle))
-        }
-
-        browserCanvasContext.drawImage(menuItem.icon, position.x - menuItem.currentRadius, position.y - menuItem.currentRadius, menuItem.currentRadius * 2, menuItem.currentRadius * 2)
-      }
-    }
-
-        /* Label Text */
-
-    if (pFloatingObject.currentRadius > 6) {
-      browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle
-
-      let labelPoint
-      let fontSize = pFloatingObject.currentFontSize
-
-      browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-
-      let label
-
-      label = pFloatingObject.payload.profile.upLabel
-
-      if (label !== undefined) {
-        labelPoint = {
-          x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO,
-          y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 - fontSize * FONT_ASPECT_RATIO - 10
-        }
-
-        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-        browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle
-        browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
-      }
-
-      label = pFloatingObject.payload.profile.downLabel
-
-      if (label !== undefined && isMouseOver === true) {
-        labelPoint = {
-          x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO,
-          y: pFloatingObject.currentPosition.y + pFloatingObject.currentImageSize / 2 + fontSize * FONT_ASPECT_RATIO + 15
-        }
-
-        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-        browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle
-        browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
+    if (image !== undefined) {
+      if (image.canDrawIcon === true) {
+        browserCanvasContext.drawImage(
+          image, position.x - thisObject.payload.floatingObject.currentImageSize / 2,
+          position.y - thisObject.payload.floatingObject.currentImageSize / 2,
+          thisObject.payload.floatingObject.currentImageSize,
+          thisObject.payload.floatingObject.currentImageSize)
       }
     }
   }
 }
-

FloatingSpace/StrategyPartConstructor.js

@@ -0,0 +1,488 @@
+
+function newStrategyPartConstructor () {
+  const MODULE_NAME = 'Strategy Part Constructor'
+  const ERROR_LOG = true
+  const logger = newWebDebugLog()
+  logger.fileName = MODULE_NAME
+
+  let thisObject = {
+
+    createStrategyPart: createStrategyPart,
+    destroyStrategyPart: destroyStrategyPart,
+    initialize: initialize,
+    finalize: finalize
+
+  }
+
+  let floatingLayer
+
+  return thisObject
+
+  function finalize () {
+    floatingLayer = undefined
+
+    payload.uiObject.finalize()
+    payload.uiObject = undefined
+  }
+
+  function initialize (pFloatingLayer) {
+    floatingLayer = pFloatingLayer
+  }
+
+  function createStrategyPart (payload) {
+    let floatingObject = newFloatingObject()
+    floatingObject.fitFunction = canvas.floatingSpace.fitIntoVisibleArea
+    floatingObject.container.connectToParent(canvas.floatingSpace.container, false, false, false, false, false, false, false, false)
+    floatingObject.initialize('Strategy Part', payload)
+    payload.floatingObject = floatingObject
+
+    let strategyPart = newStrategyPart()
+    strategyPart.fitFunction = canvas.floatingSpace.fitIntoVisibleArea
+    strategyPart.isVisibleFunction = canvas.floatingSpace.isThisPointVisible
+    let menuItemsInitialValues = getMenuItemsInitialValues(strategyPart, floatingObject, payload)
+    strategyPart.initialize(payload, menuItemsInitialValues)
+    strategyPart.container.connectToParent(floatingObject.container, false, false, true, true, false, false, true, true, true)
+    payload.uiObject = strategyPart
+
+    setFloatingObjectBasicProperties(floatingObject, payload)
+
+    floatingLayer.addFloatingObject(floatingObject)
+
+    return
+  }
+
+  function getMenuItemsInitialValues (strategyPart, floatingObject, payload) {
+    let menuItemsInitialValues = []
+    switch (payload.node.type) {
+      case 'Trading System': {
+        strategyPart.imagePath = 'Images/icons/style-01/analysis.png'
+        menuItemsInitialValues = [
+          {
+            action: 'Pin / Unpin',
+            actionFunction: floatingObject.pinToggle,
+            label: undefined,
+            visible: false,
+            imagePathOn: 'Images/icons/style-01/target.png',
+            imagePathOff: 'Images/icons/style-01/target.png',
+            rawRadius: 8,
+            targetRadius: 0,
+            currentRadius: 0,
+            angle: -120
+          },
+          {
+            action: 'Reload Trading System',
+            actionFunction: payload.onMenuItemClick,
+            label: 'Reload',
+            visible: false,
+            imagePathOn: 'Images/icons/style-01/vector.png',
+            imagePathOff: 'Images/icons/style-01/target.png',
+            rawRadius: 8,
+            targetRadius: 0,
+            currentRadius: 0,
+            angle: -60
+          },
+          {
+            action: 'Save Trading System',
+            actionFunction: payload.onMenuItemClick,
+            label: 'Save Changes',
+            workingLabel: 'Saving...',
+            workDoneLabel: 'Saved',
+            workFailedLabel: 'Not Saved',
+            visible: false,
+            imagePathOn: 'Images/icons/style-01/upload.png',
+            imagePathOff: 'Images/icons/style-01/target.png',
+            rawRadius: 8,
+            targetRadius: 0,
+            currentRadius: 0,
+            angle: -20
+          },
+          {
+            action: 'New Strategy',
+            actionFunction: payload.onMenuItemClick,
+            label: 'New Strategy',
+            visible: false,
+            imagePathOn: 'Images/icons/style-01/quality.png',
+            imagePathOff: 'Images/icons/style-01/target.png',
+            rawRadius: 8,
+            targetRadius: 0,
+            currentRadius: 0,
+            angle: 20
+          },
+          {
+            action: 'Open Settings',
+            actionFunction: payload.onMenuItemClick,
+            label: 'Settings',
+            visible: false,
+            imagePathOn: 'Images/icons/style-01/tools.png',
+            imagePathOff: 'Images/icons/style-01/target.png',
+            rawRadius: 8,
+            targetRadius: 0,
+            currentRadius: 0,
+            angle: 60
+          }]
+        break
+      }
+      case 'Strategy': {
+        strategyPart.imagePath = 'Images/icons/style-01/quality.png'
+        menuItemsInitialValues = [
+          {
+            action: 'Delete Strategy',
+            actionFunction: payload.onMenuItemClick,
+            label: 'Delete This Strategy',
+            visible: false,
+            imagePathOn: 'Images/icons/style-01/trash.png',
+            imagePathOff: 'Images/icons/style-01/target.png',
+            rawRadius: 8,
+            targetRadius: 0,
+            currentRadius: 0,
+            angle: -20
+          },
+          {
+            action: 'Open Settings',
+            actionFunction: payload.onMenuItemClick,
+            label: 'Settings',
+            visible: false,
+            imagePathOn: 'Images/icons/style-01/tools.png',
+            imagePathOff: 'Images/icons/style-01/target.png',
+            rawRadius: 8,
+            targetRadius: 0,
+            currentRadius: 0,
+            angle: 20
+          }]
+        break
+      }
+      case 'Strategy Entry Event': {
+        strategyPart.imagePath = 'Images/icons/style-01/startup.png'
+        menuItemsInitialValues = [
+          {
+            action: 'Add Situation',
+            actionFunction: payload.onMenuItemClick,
+            label: 'Add Situation',
+            visible: false,
+            imagePathOn: 'Images/icons/style-01/attractive.png',
+            imagePathOff: 'Images/icons/style-01/target.png',
+            rawRadius: 8,
+            targetRadius: 0,
+            currentRadius: 0,
+            angle: 0
+          }]
+        break
+      }
+      case 'Strategy Exit Event': {
+        strategyPart.imagePath = 'Images/icons/style-01/support.png'
+        menuItemsInitialValues = [
+          {
+            action: 'Add Situation',
+            actionFunction: payload.onMenuItemClick,
+            label: 'Add Situation',
+            visible: false,
+            imagePathOn: 'Images/icons/style-01/attractive.png',
+            imagePathOff: 'Images/icons/style-01/target.png',
+            rawRadius: 8,
+            targetRadius: 0,
+            currentRadius: 0,
+            angle: 0
+          }]
+        break
+      }
+      case 'Trade Entry Event': {
+        strategyPart.imagePath = 'Images/icons/style-01/compass.png'
+        menuItemsInitialValues = [
+          {
+            action: 'Add Situation',
+            actionFunction: payload.onMenuItemClick,
+            label: 'Add Situation',
+            visible: false,
+            imagePathOn: 'Images/icons/style-01/attractive.png',
+            imagePathOff: 'Images/icons/style-01/target.png',
+            rawRadius: 8,
+            targetRadius: 0,
+            currentRadius: 0,
+            angle: 0
+          }]
+        break
+      }
+      case 'Stop': {
+        strategyPart.imagePath = 'Images/icons/style-01/pixel.png'
+        menuItemsInitialValues = [
+          {
+            action: 'Add Phase',
+            actionFunction: payload.onMenuItemClick,
+            label: 'Add Phase',
+            visible: false,
+            imagePathOn: 'Images/icons/style-01/placeholder.png',
+            imagePathOff: 'Images/icons/style-01/target.png',
+            rawRadius: 8,
+            targetRadius: 0,
+            currentRadius: 0,
+            angle: 0
+          }]
+        break
+      }
+      case 'Take Profit': {
+        strategyPart.imagePath = 'Images/icons/style-01/competition.png'
+        menuItemsInitialValues = [
+          {
+            action: 'Add Phase',
+            actionFunction: payload.onMenuItemClick,
+            label: 'Add Phase',
+            visible: false,
+            imagePathOn: 'Images/icons/style-01/placeholder.png',
+            imagePathOff: 'Images/icons/style-01/target.png',
+            rawRadius: 8,
+            targetRadius: 0,
+            currentRadius: 0,
+            angle: 0
+          }]
+        break
+      }
+      case 'Phase': {
+        strategyPart.imagePath = 'Images/icons/style-01/placeholder.png'
+        strategyPart.codeEditor = newCodeEditor()
+        strategyPart.codeEditor.isVisibleFunction = strategyPart.isVisibleFunction
+        strategyPart.codeEditor.initialize()
+        strategyPart.codeEditor.container.connectToParent(strategyPart.container, false, false, true, true, false, false, false, false)
+
+        menuItemsInitialValues = [
+          {
+            action: 'Edit Code',
+            actionFunction: strategyPart.codeEditor.activate,
+            label: 'Edit Code',
+            visible: false,
+            imagePathOn: 'Images/icons/style-01/html.png',
+            imagePathOff: 'Images/icons/style-01/target.png',
+            rawRadius: 8,
+            targetRadius: 0,
+            currentRadius: 0,
+            angle: 40
+          },
+          {
+            action: 'Add Situation',
+            actionFunction: payload.onMenuItemClick,
+            label: 'Add Situation',
+            visible: false,
+            imagePathOn: 'Images/icons/style-01/attractive.png',
+            imagePathOff: 'Images/icons/style-01/target.png',
+            rawRadius: 8,
+            targetRadius: 0,
+            currentRadius: 0,
+            angle: 0
+          },
+          {
+            action: 'Delete Phase',
+            actionFunction: payload.onMenuItemClick,
+            label: 'Delete This Phase',
+            visible: false,
+            imagePathOn: 'Images/icons/style-01/trash.png',
+            imagePathOff: 'Images/icons/style-01/target.png',
+            rawRadius: 8,
+            targetRadius: 0,
+            currentRadius: 0,
+            angle: -40
+          }]
+        break
+      }
+      case 'Situation': {
+        strategyPart.imagePath = 'Images/icons/style-01/attractive.png'
+        menuItemsInitialValues = [
+          {
+            action: 'Add Condition',
+            actionFunction: payload.onMenuItemClick,
+            label: 'Add Condition',
+            visible: false,
+            imagePathOn: 'Images/icons/style-01/testing.png',
+            imagePathOff: 'Images/icons/style-01/target.png',
+            rawRadius: 8,
+            targetRadius: 0,
+            currentRadius: 0,
+            angle: 20
+          },
+          {
+            action: 'Delete Situation',
+            actionFunction: payload.onMenuItemClick,
+            label: 'Delete This Situation',
+            visible: false,
+            imagePathOn: 'Images/icons/style-01/trash.png',
+            imagePathOff: 'Images/icons/style-01/target.png',
+            rawRadius: 8,
+            targetRadius: 0,
+            currentRadius: 0,
+            angle: -20
+          }]
+        break
+      }
+      case 'Condition': {
+        strategyPart.imagePath = 'Images/icons/style-01/testing.png'
+        strategyPart.codeEditor = newCodeEditor()
+        strategyPart.codeEditor.isVisibleFunction = strategyPart.isVisibleFunction
+        strategyPart.codeEditor.initialize()
+        strategyPart.codeEditor.container.connectToParent(strategyPart.container, false, false, true, true, false, false, false, false)
+
+        menuItemsInitialValues = [
+          {
+            action: 'Edit Code',
+            actionFunction: strategyPart.codeEditor.activate,
+            label: 'Edit Code',
+            visible: false,
+            imagePathOn: 'Images/icons/style-01/html.png',
+            imagePathOff: 'Images/icons/style-01/target.png',
+            rawRadius: 8,
+            targetRadius: 0,
+            currentRadius: 0,
+            angle: 20
+          },
+          {
+            action: 'Delete Condition',
+            actionFunction: payload.onMenuItemClick,
+            label: 'Delete This Condition',
+            visible: false,
+            imagePathOn: 'Images/icons/style-01/trash.png',
+            imagePathOff: 'Images/icons/style-01/target.png',
+            rawRadius: 8,
+            targetRadius: 0,
+            currentRadius: 0,
+            angle: -20
+          }]
+        break
+      }
+      default: {
+        if (ERROR_LOG === true) { logger.write('[ERROR] getMenuItemsInitialValues -> Part Type not Recognized -> type = ' + payload.node.type) }
+      }
+    }
+
+    return menuItemsInitialValues
+  }
+
+  function setFloatingObjectBasicProperties (floatingObject, payload) {
+    const FRICTION = 0.97
+
+    switch (payload.node.type) {
+      case 'Trading System': {
+        level_0()
+        break
+      }
+      case 'Strategy': {
+        level_1()
+        break
+      }
+      case 'Strategy Entry Event': {
+        level_2()
+        break
+      }
+      case 'Strategy Exit Event': {
+        level_2()
+        break
+      }
+      case 'Trade Entry Event': {
+        level_2()
+        break
+      }
+      case 'Trade Exit Event': {
+        level_2()
+        break
+      }
+      case 'Stop': {
+        level_2()
+        break
+      }
+      case 'Take Profit': {
+        level_2()
+        break
+      }
+      case 'Phase': {
+        level_3()
+        break
+      }
+      case 'Situation': {
+        level_4()
+        break
+      }
+      case 'Condition': {
+        level_5()
+        break
+      }
+      default: {
+        if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Part Type not Recognized -> type = ' + payload.node.type) }
+        return
+      }
+    }
+
+    function level_0 () {
+      floatingObject.friction = 0.93
+
+      floatingObject.initializeMass(500)
+      floatingObject.initializeRadius(45)
+      floatingObject.initializeImageSize(80)
+      floatingObject.initializeFontSize(10)
+
+      floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
+    }
+
+    function level_1 () {
+      floatingObject.friction = 0.94
+
+      floatingObject.initializeMass(250)
+      floatingObject.initializeRadius(45)
+      floatingObject.initializeImageSize(80)
+      floatingObject.initializeFontSize(10)
+
+      floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
+    }
+
+    function level_2 () {
+      floatingObject.friction = FRICTION
+
+      floatingObject.initializeMass(50)
+      floatingObject.initializeRadius(40)
+      floatingObject.initializeImageSize(70)
+      floatingObject.initializeFontSize(10)
+
+      floatingObject.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 1)'
+    }
+
+    function level_3 () {
+      floatingObject.friction = FRICTION
+
+      floatingObject.initializeMass(10)
+      floatingObject.initializeRadius(35)
+      floatingObject.initializeImageSize(60)
+      floatingObject.initializeFontSize(10)
+
+      floatingObject.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)'
+    }
+
+    function level_4 () {
+      floatingObject.friction = FRICTION
+
+      floatingObject.initializeMass(10)
+      floatingObject.initializeRadius(30)
+      floatingObject.initializeImageSize(50)
+      floatingObject.initializeFontSize(10)
+
+      floatingObject.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 1)'
+    }
+
+    function level_5 () {
+      floatingObject.friction = FRICTION
+
+      floatingObject.initializeMass(10)
+      floatingObject.initializeRadius(25)
+      floatingObject.initializeImageSize(30)
+      floatingObject.initializeFontSize(10)
+
+      floatingObject.fillStyle = 'rgba(' + UI_COLOR.RED + ', 1)'
+    }
+
+    floatingObject.labelStrokeStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
+  }
+
+  function destroyStrategyPart (payload) {
+    floatingLayer.removeFloatingObject(payload.floatingObject.handle)
+
+    payload.floatingObject.finalize()
+    payload.floatingObject = undefined
+
+    payload.uiObject.finalize()
+    payload.uiObject = undefined
+  }
+}

FloatingSpace/StrategyPartTitle.js

@@ -0,0 +1,260 @@
+
+function newStrategyPartTitle () {
+  const MODULE_NAME = 'Strategy Part Title'
+  const ERROR_LOG = true
+
+  const logger = newWebDebugLog()
+  logger.fileName = MODULE_NAME
+
+  let thisObject = {
+    isVisibleFunction: undefined,
+    allwaysVisible: undefined,
+    editMode: undefined,
+    container: undefined,
+    payload: 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
+  }
+
+  function initialize (payload) {
+    thisObject.payload = payload
+
+    switch (payload.node.type) {
+      case 'Trading System': {
+        break
+      }
+      case 'Strategy': {
+        thisObject.allwaysVisible = true
+        break
+      }
+      case 'Strategy Entry Event': {
+        break
+      }
+      case 'Strategy Exit Event': {
+        break
+      }
+      case 'Trade Entry Event': {
+        break
+      }
+      case 'Stop': {
+        break
+      }
+      case 'Take Profit': {
+        break
+      }
+      case 'Phase': {
+        break
+      }
+      case 'Situation': {
+        break
+      }
+      case 'Condition': {
+        break
+      }
+      default: {
+        if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Part Type not Recognized -> type = ' + payload.node.type) }
+      }
+    }
+
+    selfFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onFocus', onFocus)
+    selfNotFocuskEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus)
+    selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
+  }
+
+  function getContainer (point) {
+    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
+      }
+    }
+    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+      return thisObject.container
+    } else {
+      return undefined
+    }
+  }
+
+  function physics () {
+    let title = trimTitle(thisObject.payload.title)
+
+    const FRAME_HEIGHT = 25
+    const FRAME_WIDTH = title.length / 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 - 10 - FRAME_HEIGHT
+
+    thisObject.container.frame.width = FRAME_WIDTH
+    thisObject.container.frame.height = FRAME_HEIGHT
+
+    if (thisObject.editMode === true) {
+      let inputPosition = {
+        x: 0,
+        y: 0 + window.canvasApp.topMargin
+      }
+
+      inputPosition = thisObject.container.frame.frameThisPoint(inputPosition)
+
+      if (inputPosition.y < window.canvasApp.topMargin) { 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 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
+      }
+    }
+  }
+
+  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; 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) {
+      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)) {
+        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: 0,
+            y: thisObject.container.frame.height * 0.8
+          }
+
+          labelPoint = thisObject.container.frame.frameThisPoint(labelPoint)
+
+          browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+          browserCanvasContext.fillStyle = thisObject.payload.floatingObject.labelStrokeStyle
+          browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
+        }
+      }
+    }
+  }
+
+  function trimTitle (title) {
+    const MAX_LABEL_LENGTH = 25
+    if (title.length > MAX_LABEL_LENGTH) {
+      title = title.substring(0, MAX_LABEL_LENGTH) + '...'
+    }
+    return title
+  }
+}
+

FloatingSpace/StrategyParts.js

@@ -1,155 +0,0 @@
-
-function newStrategyParts () {
-  const MODULE_NAME = 'Strategy Parts'
-  const ERROR_LOG = true
-  const logger = newWebDebugLog()
-  logger.fileName = MODULE_NAME
-
-   /*
-
-   This object deals with Strategy Parts, a type of Floating Object that shows together with other parts a graphical representation of a strategy.
-
-   */
-
-  let thisObject = {
-
-    createNewStrategyPart: createNewStrategyPart,
-    destroyStrategyPart: destroyStrategyPart,
-    initialize: initialize,
-    finalize: finalize
-
-  }
-
-  let floatingLayer
-
-  return thisObject
-
-  function finalize () {
-    floatingLayer.finalize()
-  }
-
-  function initialize (pFloatingLayer) {
-    floatingLayer = pFloatingLayer
-  }
-
-  function createNewStrategyPart (type, pPayload, callBackFunction) {
-    let floatingObject = newFloatingObject()
-    floatingObject.initialize('Strategy Part', floatingLayer, onInitialized)
-
-    function onInitialized (err) {
-      const FRICTION = 0.97
-      floatingObject.payload = pPayload
-
-      switch (type) {
-        case 'Strategy': {
-          level_1()
-          break
-        }
-        case 'Strategy Entry': {
-          level_2()
-          break
-        }
-        case 'Strategy Exit': {
-          level_2()
-          break
-        }
-        case 'Trade Entry': {
-          level_2()
-          break
-        }
-        case 'Trade Exit': {
-          level_2()
-          break
-        }
-        case 'Stop': {
-          level_2()
-          break
-        }
-        case 'Take Profit': {
-          level_2()
-          break
-        }
-        case 'Phase': {
-          level_3()
-          break
-        }
-        case 'Situation': {
-          level_4()
-          break
-        }
-        case 'Condition': {
-          level_5()
-          break
-        }
-        default: {
-          if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> Part Type not Recognized -> type = ' + type) }
-        }
-      }
-
-      function level_1 () {
-        floatingObject.friction = FRICTION
-
-        floatingObject.initializeMass(100)
-        floatingObject.initializeRadius(60)
-        floatingObject.initializeImageSize(110)
-        floatingObject.initializeFontSize(10)
-
-        floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
-      }
-
-      function level_2 () {
-        floatingObject.friction = FRICTION
-
-        floatingObject.initializeMass(50)
-        floatingObject.initializeRadius(45)
-        floatingObject.initializeImageSize(80)
-        floatingObject.initializeFontSize(10)
-
-        floatingObject.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 1)'
-      }
-
-      function level_3 () {
-        floatingObject.friction = FRICTION
-
-        floatingObject.initializeMass(10)
-        floatingObject.initializeRadius(40)
-        floatingObject.initializeImageSize(70)
-        floatingObject.initializeFontSize(10)
-
-        floatingObject.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)'
-      }
-
-      function level_4 () {
-        floatingObject.friction = FRICTION
-
-        floatingObject.initializeMass(10)
-        floatingObject.initializeRadius(35)
-        floatingObject.initializeImageSize(60)
-        floatingObject.initializeFontSize(10)
-
-        floatingObject.fillStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', 1)'
-      }
-
-      function level_5 () {
-        floatingObject.friction = FRICTION
-
-        floatingObject.initializeMass(10)
-        floatingObject.initializeRadius(30)
-        floatingObject.initializeImageSize(50)
-        floatingObject.initializeFontSize(10)
-
-        floatingObject.fillStyle = 'rgba(' + UI_COLOR.MANGANESE_PURPLE + ', 1)'
-      }
-
-      floatingObject.labelStrokeStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
-
-      floatingLayer.addFloatingObject(floatingObject)
-
-      callBackFunction(GLOBAL.CUSTOM_OK_RESPONSE, floatingObject.handle)
-    }
-  }
-
-  function destroyStrategyPart (pFloatingObjectHandle) {
-    floatingLayer.killFloatingObject(pFloatingObjectHandle)
-  }
-}

Frame.js

@@ -1,57 +1,63 @@
- 
+
 function newFrame () {
-  const PANEL_CORNERS_RADIOUS = 5
+  const PANEL_CORNERS_RADIUS = 5
   const TITLE_BAR_HEIGHT = 15 // this must be grater than radius
 
-  let frame = {
+  let thisObject = {
+    type: 'Rectangle',
     containerName: '',                  // This is for debugging purposes only.
     parentFrame: undefined,             // Here we store the parent cointainer zoom object.
+    radius: 0,
+    position: undefined,
+    container: undefined,
     width: browserCanvas.width,
     height: browserCanvas.height,
-    position: undefined,
     getBodyHeight: getBodyHeight,
     draw: draw,
-    container: undefined,
+    fitIntoFrame: fitIntoFrame,
     frameThisPoint: frameThisPoint,     // This function changes the actual frame coordinate system to the screen coordinate system.
     unframeThisPoint: unframeThisPoint,
-    fitIntoFrame: fitIntoFrame,
     isThisPointHere: isThisPointHere,   // This function return true is the point received as parameter lives within this frame.
+    isThisScreenPointHere: isThisScreenPointHere,
     isInViewPort: isInViewPort,
     canYouMoveHere: canYouMoveHere,
-    canYouZoomHere: canYouZoomHere,
     initialize: initialize
   }
 
-  return frame
+  return thisObject
 
-  function initialize () {
-    var position = {
+  function initialize (pType) {
+    if (pType !== undefined) { thisObject.type = pType }
+
+    let position = {
       x: 0,
       y: 0
     }
 
-    this.position = position
+    thisObject.position = position
   }
 
   function getBodyHeight () {
-    return frame.height - TITLE_BAR_HEIGHT
+    return thisObject.height - TITLE_BAR_HEIGHT
   }
 
   function isInViewPort () {
+   /* This function is usefull to know if the object who has this frame is currently appearing at least in part at the viewPort */
+
     point1 = {
       x: 0,
       y: 0
     }
 
     point3 = {
-      x: frame.width,
-      y: frame.height
+      x: thisObject.width,
+      y: thisObject.height
     }
 
-        /* Now the transformations. */
+       /* Now the transformations. */
 
-    point1 = transformThisPoint(point1, frame.container)
-    point3 = transformThisPoint(point3, frame.container)
+    point1 = transformThisPoint(point1, thisObject.container)
+    point3 = transformThisPoint(point3, thisObject.container)
 
     if (point1.x < viewPort.visibleArea.topRight.x && point1.y < viewPort.visibleArea.bottomRight.y && point3.x > viewPort.visibleArea.bottomLeft.x && point3.y > viewPort.visibleArea.topLeft.y) {
       return true
@@ -60,19 +66,81 @@ function newFrame () {
     }
   }
 
+  function frameThisPoint (point) {
+   /* We need not to modify the point received, so me make a copy of it. */
+
+    let checkPoint = {
+      x: point.x,
+      y: point.y
+    }
+
+    let parentPoint = {
+      x: 0,
+      y: 0
+    }
+
+    let returnPoint = {
+      x: 0,
+      y: 0
+    }
+
+    if (thisObject.parentFrame !== undefined) {
+      parentPoint = thisObject.parentFrame.frameThisPoint(checkPoint)
+
+      returnPoint.x = parentPoint.x + thisObject.position.x
+      returnPoint.y = parentPoint.y + thisObject.position.y
+    } else {
+      returnPoint.x = checkPoint.x + thisObject.position.x
+      returnPoint.y = checkPoint.y + thisObject.position.y
+    }
+
+    return returnPoint
+  }
+
+  function unframeThisPoint (point) {
+   /* We need not to modify the point received, so me make a copy of it. */
+
+    let checkPoint = {
+      x: point.x,
+      y: point.y
+    }
+
+    let parentPoint = {
+      x: 0,
+      y: 0
+    }
+
+    let returnPoint = {
+      x: 0,
+      y: 0
+    }
+
+    if (thisObject.parentFrame !== undefined) {
+      parentPoint = thisObject.parentFrame.unframeThisPoint(checkPoint)
+
+      returnPoint.x = parentPoint.x - thisObject.position.x
+      returnPoint.y = parentPoint.y - thisObject.position.y
+    } else {
+      returnPoint.x = checkPoint.x - thisObject.position.x
+      returnPoint.y = checkPoint.y - thisObject.position.y
+    }
+
+    return returnPoint
+  }
+
   function fitIntoFrame (point) {
         /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */
 
-    if (point.x > frame.width) {
-      point.x = frame.width
+    if (point.x > thisObject.width) {
+      point.x = thisObject.width
     }
 
     if (point.x < 0) {
       point.x = 0
     }
 
-    if (point.y > frame.height) {
-      point.y = frame.height
+    if (point.y > thisObject.height) {
+      point.y = thisObject.height
     }
 
     if (point.y < 0) {
@@ -82,158 +150,71 @@ function newFrame () {
     return point
   }
 
-  function frameThisPoint (point) {
-    if (this.parentFrame !== undefined) {
-      point = this.parentFrame.frameThisPoint(point)
-    }
-
-    point.x = point.x + frame.position.x
-    point.y = point.y + frame.position.y
-
-    return point
-  }
-
-  function unframeThisPoint (point) {
-    if (this.parentFrame !== undefined) {
-      point = this.parentFrame.unframeThisPoint(point)
-    }
-
-    point.x = point.x - this.position.x
-    point.y = point.y - this.position.y
-
-    return point
-  }
-
   function canYouMoveHere (tempDisplacement) {
-        /*
+       /*
 
-        The current frame has a position and a displacement. We need to check that none of the boundaries points of the frame fall outside of its container frame.
-        First we apply the theoreticall displacement.
+       The current frame has a position and a displacement. We need to check that none of the boundaries points of the frame fall outside of its container frame.
+       First we apply the theoreticall displacement.
 
-        */
+       */
 
     point1 = {
-      x: this.position.x,
-      y: this.position.y
+      x: thisObject.position.x,
+      y: thisObject.position.y
     }
 
     point2 = {
-      x: this.position.x + this.width,
-      y: this.position.y
+      x: thisObject.position.x + thisObject.width,
+      y: thisObject.position.y
     }
 
     point3 = {
-      x: this.position.x + this.width,
-      y: this.position.y + this.height
+      x: thisObject.position.x + thisObject.width,
+      y: thisObject.position.y + thisObject.height
     }
 
     point4 = {
-      x: this.position.x,
-      y: this.position.y + this.height
+      x: thisObject.position.x,
+      y: thisObject.position.y + thisObject.height
     }
 
-        /* Now the transformations. */
+       /* Now the transformations. */
 
-    if (this.parentFrame !== undefined) {
-   // If there is not a parent then there is no point to check bounderies.
+    if (thisObject.parentFrame !== undefined) {
+  // If there is not a parent then there is no point to check bounderies.
 
-      point1 = this.parentFrame.frameThisPoint(point1)
-      point2 = this.parentFrame.frameThisPoint(point2)
-      point3 = this.parentFrame.frameThisPoint(point3)
-      point4 = this.parentFrame.frameThisPoint(point4)
+      point1 = thisObject.parentFrame.frameThisPoint(point1)
+      point2 = thisObject.parentFrame.frameThisPoint(point2)
+      point3 = thisObject.parentFrame.frameThisPoint(point3)
+      point4 = thisObject.parentFrame.frameThisPoint(point4)
 
-            /* We apply the temporary displacement. */
+           /* We apply the temporary displacement. */
 
       point1 = tempDisplacement.displaceThisPoint(point1)
       point2 = tempDisplacement.displaceThisPoint(point2)
       point3 = tempDisplacement.displaceThisPoint(point3)
       point4 = tempDisplacement.displaceThisPoint(point4)
 
-            /* We add the actual displacement. */
+           /* We add the actual displacement. */
 
-      point1 = this.container.displacement.displaceThisPoint(point1)
-      point2 = this.container.displacement.displaceThisPoint(point2)
-      point3 = this.container.displacement.displaceThisPoint(point3)
-      point4 = this.container.displacement.displaceThisPoint(point4)
+      point1 = thisObject.container.displacement.displaceThisPoint(point1)
+      point2 = thisObject.container.displacement.displaceThisPoint(point2)
+      point3 = thisObject.container.displacement.displaceThisPoint(point3)
+      point4 = thisObject.container.displacement.displaceThisPoint(point4)
 
-      if (this.parentFrame.isThisPointHere(point1) === false) {
+      if (thisObject.parentFrame.isThisPointHere(point1) === false) {
         return false
       }
 
-      if (this.parentFrame.isThisPointHere(point2) === false) {
+      if (thisObject.parentFrame.isThisPointHere(point2) === false) {
         return false
       }
 
-      if (this.parentFrame.isThisPointHere(point3) === false) {
+      if (thisObject.parentFrame.isThisPointHere(point3) === false) {
         return false
       }
 
-      if (this.parentFrame.isThisPointHere(point4) === false) {
-        return false
-      }
-    }
-
-    return true
-  }
-
-  function canYouZoomHere (tempZoom) {
-    point1 = {
-      x: this.position.x,
-      y: this.position.y
-    }
-
-    point2 = {
-      x: this.position.x + this.width,
-      y: this.position.y
-    }
-
-    point3 = {
-      x: this.position.x + this.width,
-      y: this.position.y + this.height
-    }
-
-    point4 = {
-      x: this.position.x,
-      y: this.position.y + this.height
-    }
-
-        /* Now the transformations. */
-
-    if (this.parentFrame !== undefined) {
-  // If there is not a parent then there is no point to check bounderies.
-
-      point1 = this.parentFrame.frameThisPoint(point1)
-      point2 = this.parentFrame.frameThisPoint(point2)
-      point3 = this.parentFrame.frameThisPoint(point3)
-      point4 = this.parentFrame.frameThisPoint(point4)
-
-            /* We add the actual displacement. */
-
-      point1 = this.container.displacement.displaceThisPoint(point1)
-      point2 = this.container.displacement.displaceThisPoint(point2)
-      point3 = this.container.displacement.displaceThisPoint(point3)
-      point4 = this.container.displacement.displaceThisPoint(point4)
-
-            /* We temp zoom. */
-
-      point1 = tempZoom.zoomThisPoint(point1)
-      point2 = tempZoom.zoomThisPoint(point2)
-      point3 = tempZoom.zoomThisPoint(point3)
-      point4 = tempZoom.zoomThisPoint(point4)
-
-      if (this.parentFrame.isThisPointHere(point1) === false) {
-        return false
-      }
-
-      if (this.parentFrame.isThisPointHere(point2) === false) {
-        return false
-      }
-
-      if (this.parentFrame.isThisPointHere(point3) === false) {
-        return false
-      }
-
-      if (this.parentFrame.isThisPointHere(point4) === false) {
+      if (thisObject.parentFrame.isThisPointHere(point4) === false) {
         return false
       }
     }
@@ -242,61 +223,104 @@ function newFrame () {
   }
 
   function isThisPointHere (point, outsideViewPort, dontTransform) {
-  // The second parameter is usefull when you want to check a point that you already know is outside the viewport.
+ // The second parameter is usefull when you want to check a point that you already know is outside the viewport.
 
-        /* We need not to modify the point received, so me make a copy of it. */
+       /* We need not to modify the point received, so me make a copy of it. */
 
-    var checkPoint = {
+    let checkPoint = {
       x: point.x,
       y: point.y
     }
 
-        /* The point received is on the screen coordinates system, which already has zoom and displacement applied. We need to remove the zoom and displacement
-        in order to have the point on the containers coordinate system and be able to compare it with its dimmensions. */
+       /* The point received is on the screen coordinates system, which already has zoom and displacement applied. We need to remove the zoom and displacement
+       in order to have the point on the containers coordinate system and be able to compare it with its dimmensions. */
     if (dontTransform === false || dontTransform === undefined) {
       if (outsideViewPort === true) {
-        checkPoint = this.container.displacement.undisplaceThisPoint(checkPoint)
-        checkPoint = this.container.frame.unframeThisPoint(checkPoint)
+        checkPoint = thisObject.container.displacement.undisplaceThisPoint(checkPoint)
+        checkPoint = thisObject.container.frame.unframeThisPoint(checkPoint)
       } else {
-        checkPoint = unTransformThisPoint(checkPoint, frame.container)
+        checkPoint = unTransformThisPoint(checkPoint, thisObject.container)
       }
     }
 
-        /* Now we check if the resulting point is whin the current Frame. */
+   /* Now we check if the resulting point is whin the current Frame. */
 
-    if (checkPoint.x < 0 || checkPoint.y < 0 || checkPoint.x > frame.width || checkPoint.y > frame.height) {
-            /* The point received is not in this frame */
+    if (thisObject.type === 'Circle') {
+      let distance = Math.sqrt(Math.pow(thisObject.position.x - point.x, 2) + Math.pow(thisObject.position.y - point.y, 2))
 
-      return false
-    } else {
-            /* The point is within this frame. */
+      if (distance < thisObject.radius) {
+        return true
+      } else {
+        return false
+      }
+    }
 
-      return true
+    if (thisObject.type === 'Rectangle') {
+      if (checkPoint.x < 0 || checkPoint.y < 0 || checkPoint.x > thisObject.width || checkPoint.y > thisObject.height) {
+        return false
+      } else {
+        return true
+      }
     }
   }
 
-  function draw (drawGrid, drawBorders, drawBackground) {
+  function isThisScreenPointHere (point) {
+    let checkPoint = {
+      x: point.x,
+      y: point.y
+    }
+
+    let thisPoint = {
+      x: thisObject.position.x,
+      y: thisObject.position.y
+    }
+
+    thisPoint = thisObject.parentFrame.frameThisPoint(thisPoint)
+
+   /* Now we check if the resulting point is whin the current Frame. */
+
+    if (thisObject.type === 'Circle') {
+      let distance = Math.sqrt(Math.pow(thisPoint.x - checkPoint.x, 2) + Math.pow(thisPoint.y - checkPoint.y, 2))
+
+      if (distance < thisObject.radius) {
+        return true
+      } else {
+        return false
+      }
+    }
+
+    if (thisObject.type === 'Rectangle') {
+      if (checkPoint.x < 0 || checkPoint.y < 0 || checkPoint.x > thisObject.width || checkPoint.y > thisObject.height) {
+        return false
+      } else {
+        return true
+      }
+    }
+  }
+
+  function draw (drawGrid, drawBorders, drawBackground, fitFunction) {
     if (drawBorders === true) {
-      borders()
+      borders(fitFunction)
     }
 
     if (drawGrid === true) {
-      grid()
+      grid(fitFunction)
     }
 
     if (drawBackground === true) {
-      background()
+      background(fitFunction)
     }
   }
 
-  function background () {
+  function background (fitFunction) {
     let params = {
-      cornerRadious: 5,
+      cornerRadius: 5,
       lineWidth: 0.1,
       opacity: 0.75,
-      container: frame.container,
+      container: thisObject.container,
       borderColor: UI_COLOR.DARK,
-      backgroundColor: UI_COLOR.WHITE
+      backgroundColor: UI_COLOR.WHITE,
+      fitFunction: fitFunction
     }
 
     roundedCornersBackground(params)
@@ -307,25 +331,30 @@ function newFrame () {
     }
 
     titleBarPoint2 = {
-      x: frame.width,
+      x: thisObject.width,
       y: TITLE_BAR_HEIGHT
     }
 
-        /* Now the transformations. */
+       /* Now the transformations. */
 
     titleBarPoint1 = frameThisPoint(titleBarPoint1)
     titleBarPoint2 = frameThisPoint(titleBarPoint2)
 
-        /* We paint the title bar now */
+    if (fitFunction !== undefined) {
+      titleBarPoint1 = fitFunction(titleBarPoint1)
+      titleBarPoint2 = fitFunction(titleBarPoint2)
+    }
 
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 0.75)'
+       /* We paint the title bar now */
+
+    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 1)'
     browserCanvasContext.beginPath()
 
     browserCanvasContext.moveTo(titleBarPoint1.x, titleBarPoint1.y)
-    browserCanvasContext.lineTo(borderPoint1.x - PANEL_CORNERS_RADIOUS, borderPoint1.y)
-    browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, PANEL_CORNERS_RADIOUS, 1.0 * Math.PI, 1.5 * Math.PI)
-    browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - PANEL_CORNERS_RADIOUS)
-    browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, PANEL_CORNERS_RADIOUS, 1.5 * Math.PI, 2.0 * Math.PI)
+    browserCanvasContext.lineTo(borderPoint1.x - PANEL_CORNERS_RADIUS, borderPoint1.y)
+    browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, PANEL_CORNERS_RADIUS, 1.0 * Math.PI, 1.5 * Math.PI)
+    browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - PANEL_CORNERS_RADIUS)
+    browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, PANEL_CORNERS_RADIUS, 1.5 * Math.PI, 2.0 * Math.PI)
     browserCanvasContext.lineTo(titleBarPoint2.x, titleBarPoint2.y)
 
     browserCanvasContext.closePath()
@@ -335,31 +364,35 @@ function newFrame () {
     browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.MANGANESE_PURPLE + ', 0.75)'
     browserCanvasContext.stroke()
 
-        /* print the title */
+       /* print the title */
 
     let labelPoint
     let fontSize = 10
 
     browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
 
-    let label = frame.containerName
+    let label = thisObject.containerName
 
     let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO
     let yOffset = (TITLE_BAR_HEIGHT - fontSize) / 2 + 2
 
     labelPoint = {
-      x: frame.width / 2 - xOffset,
+      x: thisObject.width / 2 - xOffset,
       y: TITLE_BAR_HEIGHT - yOffset
     }
 
-    labelPoint = frame.frameThisPoint(labelPoint)
+    labelPoint = thisObject.frameThisPoint(labelPoint)
+
+    if (fitFunction !== undefined) {
+      labelPoint = fitFunction(labelPoint)
+    }
 
     browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
     browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
   }
 
-  function borders () {
-        /* Lest get the important points of the drawing so as to apply the needed transformations. */
+  function borders (fitFunction) {
+       /* Lest get the important points of the drawing so as to apply the needed transformations. */
 
     let point1
     let point2
@@ -372,28 +405,35 @@ function newFrame () {
     }
 
     point2 = {
-      x: frame.width,
+      x: thisObject.width,
       y: 0
     }
 
     point3 = {
-      x: frame.width,
-      y: frame.height
+      x: thisObject.width,
+      y: thisObject.height
     }
 
     point4 = {
       x: 0,
-      y: frame.height
+      y: thisObject.height
     }
 
-        /* Now the transformations. */
+       /* Now the transformations. */
 
-    point1 = transformThisPoint(point1, frame.container)
-    point2 = transformThisPoint(point2, frame.container)
-    point3 = transformThisPoint(point3, frame.container)
-    point4 = transformThisPoint(point4, frame.container)
+    point1 = transformThisPoint(point1, thisObject.container)
+    point2 = transformThisPoint(point2, thisObject.container)
+    point3 = transformThisPoint(point3, thisObject.container)
+    point4 = transformThisPoint(point4, thisObject.container)
 
-        /* Lets start the drawing. */
+    if (fitFunction !== undefined) {
+      point1 = fitFunction(point1)
+      point2 = fitFunction(point2)
+      point3 = fitFunction(point3)
+      point4 = fitFunction(point4)
+    }
+
+       /* Lets start the drawing. */
 
     browserCanvasContext.beginPath()
     browserCanvasContext.moveTo(point1.x, point1.y)
@@ -410,45 +450,55 @@ function newFrame () {
     browserCanvasContext.closePath()
   }
 
-  function grid (smallLines) {
+  function grid (fitFunction, smallLines) {
     if (smallLines === true) {
-            /* Small Lines */
+           /* Small Lines */
 
-      var step = frame.width / 100
+      let step = thisObject.width / 100
 
       browserCanvasContext.beginPath()
 
-      for (var i = 0; i < frame.width; i = i + step) {
-        for (var j = 0; j < frame.height; j = j + step) {
+      for (let i = 0; i < thisObject.width; i = i + step) {
+        for (let j = 0; j < thisObject.height; j = j + step) {
           let point1 = {
             x: 0,
             y: j
           }
 
           let point2 = {
-            x: frame.width,
+            x: thisObject.width,
             y: j
           }
 
-          point1 = transformThisPoint(point1, frame.container)
-          point2 = transformThisPoint(point2, frame.container)
+          point1 = transformThisPoint(point1, thisObject.container)
+          point2 = transformThisPoint(point2, thisObject.container)
+
+          if (fitFunction !== undefined) {
+            point1 = fitFunction(point1)
+            point2 = fitFunction(point2)
+          }
 
           browserCanvasContext.moveTo(point1.x, point1.y)
           browserCanvasContext.lineTo(point2.x, point2.y)
         }
 
         let point3 = {
-          x: frame.width,
-          y: frame.height
+          x: thisObject.width,
+          y: thisObject.height
         }
 
         let point4 = {
           x: 0,
-          y: frame.height
+          y: thisObject.height
         }
 
-        point3 = transformThisPoint(point3, frame.container)
-        point4 = transformThisPoint(point4, frame.container)
+        point3 = transformThisPoint(point3, thisObject.container)
+        point4 = transformThisPoint(point4, thisObject.container)
+
+        if (fitFunction !== undefined) {
+          point3 = fitFunction(point3)
+          point4 = fitFunction(point4)
+        }
 
         browserCanvasContext.moveTo(point3.x, point3.y)
         browserCanvasContext.lineTo(point4.x, point4.y)
@@ -459,26 +509,31 @@ function newFrame () {
       browserCanvasContext.stroke()
     }
 
-        /* Main Lines */
+       /* Main Lines */
 
-    var step = frame.width / 20
+    let step = thisObject.width / 20
 
     browserCanvasContext.beginPath()
 
-    for (var i = 0; i < frame.width; i = i + step) {
-      for (var j = 0; j < frame.height; j = j + step) {
+    for (let i = 0; i < thisObject.width; i = i + step) {
+      for (let j = 0; j < thisObject.height; j = j + step) {
         let point1 = {
           x: 0,
           y: j
         }
 
         let point2 = {
-          x: frame.width,
+          x: thisObject.width,
           y: j
         }
 
-        point1 = transformThisPoint(point1, frame.container)
-        point2 = transformThisPoint(point2, frame.container)
+        point1 = transformThisPoint(point1, thisObject.container)
+        point2 = transformThisPoint(point2, thisObject.container)
+
+        if (fitFunction !== undefined) {
+          point1 = fitFunction(point1)
+          point2 = fitFunction(point2)
+        }
 
         browserCanvasContext.moveTo(point1.x, point1.y)
         browserCanvasContext.lineTo(point2.x, point2.y)
@@ -491,11 +546,16 @@ function newFrame () {
 
       let point4 = {
         x: i,
-        y: frame.height
+        y: thisObject.height
       }
 
-      point3 = transformThisPoint(point3, frame.container)
-      point4 = transformThisPoint(point4, frame.container)
+      point3 = transformThisPoint(point3, thisObject.container)
+      point4 = transformThisPoint(point4, thisObject.container)
+
+      if (fitFunction !== undefined) {
+        point3 = fitFunction(point3)
+        point4 = fitFunction(point4)
+      }
 
       browserCanvasContext.moveTo(point3.x, point3.y)
       browserCanvasContext.lineTo(point4.x, point4.y)

Globals.js

@@ -19,7 +19,7 @@ UI_COLOR = {
     DARK: "48, 48, 54",
     LIGHT: "234, 226, 222",
     GREY: "150, 150, 150",
-    LIGHT_GREY: "247, 247, 247",    
+    LIGHT_GREY: "247, 247, 247",
     WHITE: "255, 255, 255",
     BLACK: "0, 0, 0",
     GOLDEN_ORANGE: "240, 162, 2",
@@ -121,6 +121,8 @@ function convertTimePeriodToName(pTimePeriod) {
 window.AT_BREAKPOINT = false;
 
 
+const LOGGED_IN_USER_LOCAL_STORAGE = "xuser"
+const LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE =  "xaccess_token"
 
 const USDT_BTC_HTH = 19900; // This is needed to know the scale of the market time line.
 
@@ -151,6 +153,7 @@ const _1_MINUTE_IN_MILISECONDS = 1 * 60 * 1000;
 let NEW_SESSION_INITIAL_DATE = new Date();  // This value will be overwritten at the viewPort.initialize if the user had a prevous session with this same browser.
 let INITIAL_ZOOM_LEVEL = -28.25       // This is the zoom level at the view port in which the APP starts.
 let INITIAL_TIME_PERIOD = ONE_DAY_IN_MILISECONDS  // This value will be overwritten at the viewPort.initialize if the user had a prevous session with this same browser.
+let VERY_LARGE_NUMBER = 100000000000
 
 let maxDate = new Date();
 maxDate.setMilliseconds(0);
@@ -160,10 +163,11 @@ const MIN_PLOTABLE_DATE = new Date(2015, 0, 1, 0, 0, 0);
 const MAX_PLOTABLE_DATE = maxDate;
 
 const TOP_SPACE_HEIGHT = 5;
-const BOTTOM_SPACE_HEIGHT = 35;
+const BOTTOM_SPACE_HEIGHT = 40;
 const BREAKPOINT_HEIGHT = 15;
 const SIDE_PANEL_WIDTH = 450
-  
+let BOTTOM_SPACE_POSITION = browserCanvas.height - BOTTOM_SPACE_HEIGHT
+
 const PRODUCT_CARD_STATUS = {
     ON: 'on',
     LOADING: 'loading',

Panels/PanelTabButton.js

@@ -1,8 +1,9 @@
 function newPanelTabButton () {
   let thisObject = {
     container: undefined,
-    draw: draw,
+    fitFunction: undefined,
     parentContainer: undefined,
+    draw: draw,
     getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
     initialize: initialize
   }
@@ -203,6 +204,12 @@ function newPanelTabButton () {
     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)
+    }
+
         /* Lets start the drawing. */
 
     browserCanvasContext.beginPath()
@@ -220,4 +227,3 @@ function newPanelTabButton () {
     browserCanvasContext.fill()
   }
 }
-

Panels/ProductCard.js

@@ -16,15 +16,13 @@ function newProductCard () {
     bot: undefined,
     product: undefined,
     code: undefined,
-
+    fitFunction: undefined,
     setDatetime: setDatetime,
     setTimePeriod: setTimePeriod,
-
     onMarketFileLoaded: onMarketFileLoaded,
     onDailyFileLoaded: onDailyFileLoaded,
     onSingleFileLoaded: onSingleFileLoaded,
     onFileSequenceLoaded: onFileSequenceLoaded,
-
     getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
     initialize: initialize
   }
@@ -429,6 +427,11 @@ function newProductCard () {
 
        */
 
+    let fitImagePoint = {
+      x: 0,
+      y: 0
+    }
+
     const devTeamImageSize = 20
     const botImageSize = 20
     const plotterImageSize = {
@@ -448,6 +451,8 @@ function newProductCard () {
 
       teamImagePoint = thisObject.container.frame.frameThisPoint(teamImagePoint)
 
+      fitImagePoint = thisObject.fitFunction(teamImagePoint)
+
       let teamImage
 
       if (legacyTeamAvatarLoaded === true) {
@@ -458,7 +463,7 @@ function newProductCard () {
         teamImage = teamAvatar
       }
 
-      if (teamImage !== undefined) {
+      if (teamImage !== undefined && teamImagePoint.y === fitImagePoint.y) {
         if (teamImage.naturalHeight !== 0) {
          /* The image is rounded before being displayed. */
 
@@ -485,6 +490,7 @@ function newProductCard () {
         }
 
         botImagePoint = thisObject.container.frame.frameThisPoint(botImagePoint)
+        fitImagePoint = thisObject.fitFunction(botImagePoint)
 
         let imageId = thisObject.bot.devTeam + '.' + thisObject.bot.profilePicture
 
@@ -493,7 +499,7 @@ function newProductCard () {
 
         botImage = thisObject.bot.avatar
 
-        if (botImage !== undefined) {
+        if (botImage !== undefined && botImagePoint.y === fitImagePoint.y) {
           if (botImage.naturalHeight !== 0) {
              /* The image is rounded before being displayed. */
 
@@ -522,11 +528,17 @@ function newProductCard () {
       }
 
       plotterImagePoint = thisObject.container.frame.frameThisPoint(plotterImagePoint)
+      fitImagePoint = {
+        x: 0,
+        y: plotterImagePoint.y + plotterImageSize.height
+      }
+
+      fitImagePoint = thisObject.fitFunction(fitImagePoint)
 
       let imageId = thisObject.product.plotter.devTeam + '.' + thisObject.product.plotter.codeName + '.' + thisObject.product.plotter.moduleName + '.' + thisObject.product.plotter.profilePicture
       let plotterImage = legacyPlotterBanner
 
-      if (plotterImage !== undefined) {
+      if (plotterImage !== undefined && plotterImagePoint.y + plotterImageSize.height === fitImagePoint.y) {
         if (plotterImage.naturalHeight !== 0) {
           browserCanvasContext.drawImage(plotterImage, plotterImagePoint.x, plotterImagePoint.y, plotterImageSize.width, plotterImageSize.height)
         }
@@ -588,6 +600,11 @@ function newProductCard () {
       point3 = thisObject.container.frame.frameThisPoint(point3)
       point4 = thisObject.container.frame.frameThisPoint(point4)
 
+      point1 = thisObject.fitFunction(point1)
+      point2 = thisObject.fitFunction(point2)
+      point3 = thisObject.fitFunction(point3)
+      point4 = thisObject.fitFunction(point4)
+
       browserCanvasContext.beginPath()
       browserCanvasContext.moveTo(point1.x, point1.y)
       browserCanvasContext.lineTo(point2.x, point2.y)
@@ -609,7 +626,7 @@ function newProductCard () {
     let labelPoint
     let fontSize = 10
 
-    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY  
+    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
 
     let label
 
@@ -625,8 +642,9 @@ function newProductCard () {
       }
 
       labelPoint = thisObject.container.frame.frameThisPoint(labelPoint)
+      labelPoint = thisObject.fitFunction(labelPoint)
 
-      browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY  
+      browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
       browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)'
       browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
 
@@ -641,8 +659,9 @@ function newProductCard () {
       }
 
       labelPoint = thisObject.container.frame.frameThisPoint(labelPoint)
+      labelPoint = thisObject.fitFunction(labelPoint)
 
-      browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY  
+      browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
       browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)'
       browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
     }
@@ -664,8 +683,9 @@ function newProductCard () {
     }
 
     labelPoint = thisObject.container.frame.frameThisPoint(labelPoint)
+    labelPoint = thisObject.fitFunction(labelPoint)
 
-    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY  
+    browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
     browserCanvasContext.fillStyle = 'rgba(60, 60, 60, 0.50)'
     browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
 
@@ -728,6 +748,11 @@ function newProductCard () {
     point3 = thisObject.container.frame.frameThisPoint(point3)
     point4 = thisObject.container.frame.frameThisPoint(point4)
 
+    point1 = thisObject.fitFunction(point1)
+    point2 = thisObject.fitFunction(point2)
+    point3 = thisObject.fitFunction(point3)
+    point4 = thisObject.fitFunction(point4)
+
     browserCanvasContext.beginPath()
     browserCanvasContext.moveTo(point1.x, point1.y)
     browserCanvasContext.lineTo(point2.x, point2.y)
@@ -790,6 +815,11 @@ function newProductCard () {
     point3 = thisObject.container.frame.frameThisPoint(point3)
     point4 = thisObject.container.frame.frameThisPoint(point4)
 
+    point1 = thisObject.fitFunction(point1)
+    point2 = thisObject.fitFunction(point2)
+    point3 = thisObject.fitFunction(point3)
+    point4 = thisObject.fitFunction(point4)
+
     browserCanvasContext.beginPath()
     browserCanvasContext.moveTo(point1.x, point1.y)
     browserCanvasContext.lineTo(point2.x, point2.y)
@@ -852,6 +882,11 @@ function newProductCard () {
     point3 = thisObject.container.frame.frameThisPoint(point3)
     point4 = thisObject.container.frame.frameThisPoint(point4)
 
+    point1 = thisObject.fitFunction(point1)
+    point2 = thisObject.fitFunction(point2)
+    point3 = thisObject.fitFunction(point3)
+    point4 = thisObject.fitFunction(point4)
+
     browserCanvasContext.beginPath()
     browserCanvasContext.moveTo(point1.x, point1.y)
     browserCanvasContext.lineTo(point2.x, point2.y)
@@ -914,6 +949,11 @@ function newProductCard () {
     point3 = thisObject.container.frame.frameThisPoint(point3)
     point4 = thisObject.container.frame.frameThisPoint(point4)
 
+    point1 = thisObject.fitFunction(point1)
+    point2 = thisObject.fitFunction(point2)
+    point3 = thisObject.fitFunction(point3)
+    point4 = thisObject.fitFunction(point4)
+
     browserCanvasContext.beginPath()
     browserCanvasContext.moveTo(point1.x, point1.y)
     browserCanvasContext.lineTo(point2.x, point2.y)
@@ -929,4 +969,3 @@ function newProductCard () {
     browserCanvasContext.stroke()
   }
 }
-

Panels/ProductsPanel.js

@@ -1,245 +1,260 @@
- function newProductsPanel () {
-   let thisObject = {
-     container: undefined,
-     getLoadingProductCards: getLoadingProductCards,
-     draw: draw,
-     getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
-     initialize: initialize
-   }
+function newProductsPanel () {
+  let thisObject = {
+    fitFunction: undefined,
+    container: undefined,
+    getLoadingProductCards: getLoadingProductCards,
+    draw: draw,
+    getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
+    initialize: initialize
+  }
 
-    /* Cointainer stuff */
+   /* Cointainer stuff */
 
-   var container = newContainer()
+  let container = newContainer()
 
-   container.initialize()
+  container.initialize()
 
-   container.isDraggeable = true
-   container.isWheelable = true
+  container.isDraggeable = true
+  container.isWheelable = true
 
-   thisObject.container = container
+  thisObject.container = container
 
-   let isInitialized = false
-   let productCards = []
+  let isInitialized = false
+  let productCards = []
 
-   let visibleProductCards = []
-   let firstVisibleCard = 1
+  let visibleProductCards = []
+  let firstVisibleCard = 1
 
-    /* Needed Variables */
+   /* Needed Variables */
 
-   let lastY = 5
-   let panelTabButton
+  let lastY = 5
+  let panelTabButton
 
-   let exchange
-   let market
+  let exchange
+  let market
 
-   return thisObject
+  return thisObject
 
-   function initialize (pExchange, pMarket) {
-     exchange = pExchange
-     market = pMarket
+  function initialize (pExchange, pMarket) {
+    exchange = pExchange
+    market = pMarket
 
-     thisObject.container.name = 'Layers @ ' + exchange + ' ' + market.assetB + '/' + market.assetA
-     thisObject.container.frame.containerName = thisObject.container.name
-     thisObject.container.frame.width = UI_PANEL.WIDTH.LARGE
-     thisObject.container.frame.height = UI_PANEL.HEIGHT.LARGE // viewPort.visibleArea.bottomLeft.y - viewPort.visibleArea.topLeft.y // UI_PANEL.HEIGHT.LARGE;
+    thisObject.container.name = 'Layers @ ' + exchange + ' ' + market.assetB + '/' + market.assetA
+    thisObject.container.frame.containerName = thisObject.container.name
+    thisObject.container.frame.width = UI_PANEL.WIDTH.LARGE
+    thisObject.container.frame.height = UI_PANEL.HEIGHT.LARGE // viewPort.visibleArea.bottomLeft.y - viewPort.visibleArea.topLeft.y // UI_PANEL.HEIGHT.LARGE;
 
-     var position = {
-       x: viewPort.visibleArea.topLeft.x,
-       y: viewPort.visibleArea.topLeft.y// viewPort.visibleArea.bottomLeft.y - thisObject.container.frame.height
-     }
+    let position = {
+      x: viewPort.visibleArea.topLeft.x,
+      y: viewPort.visibleArea.topLeft.y// viewPort.visibleArea.bottomLeft.y - thisObject.container.frame.height
+    }
 
-     thisObject.container.frame.position = position
+    thisObject.container.frame.position = position
 
-     panelTabButton = newPanelTabButton()
-     panelTabButton.parentContainer = thisObject.container
-     panelTabButton.container.frame.parentFrame = thisObject.container.frame
-     panelTabButton.initialize()
+    panelTabButton = newPanelTabButton()
+    panelTabButton.parentContainer = thisObject.container
+    panelTabButton.container.frame.parentFrame = thisObject.container.frame
+    panelTabButton.fitFunction = thisObject.fitFunction
+    panelTabButton.initialize()
 
-     /* Get the current teams of the logged in user. */
+    /* Get the current teams of the logged in user. */
 
-     let storedTeams = window.localStorage.getItem('userTeams')
-     let userTeams
-     let userTeam = {slug: ''}
-     if (storedTeams !== null && storedTeams !== undefined && storedTeams !== '') {
-       userTeams = JSON.parse(storedTeams)
-       userTeam = userTeams[0] // Currently we assume a user can be at only one team.
-     }
-     if (userTeam === undefined) { userTeam = {slug: ''} }
+    let storedTeams = window.localStorage.getItem('userTeams')
+    let userTeams
+    let userTeam = {slug: ''}
+    if (storedTeams !== null && storedTeams !== undefined && storedTeams !== '') {
+      userTeams = JSON.parse(storedTeams)
+      userTeam = userTeams[0] // Currently we assume a user can be at only one team.
+    }
+    if (userTeam === undefined) { userTeam = {slug: ''} }
 
-        /* First thing is to build the productCards array */
+       /* First thing is to build the productCards array */
 
-     let devTeams = ecosystem.getTeams()
+    let devTeams = ecosystem.getTeams()
 
-     for (let i = 0; i < devTeams.length; i++) {
-       let devTeam = devTeams[i]
+    for (let i = 0; i < devTeams.length; i++) {
+      let devTeam = devTeams[i]
 
-       for (let j = 0; j < devTeam.bots.length; j++) {
-         let bot = devTeam.bots[j]
+      for (let j = 0; j < devTeam.bots.length; j++) {
+        let bot = devTeam.bots[j]
 
-         if (bot.type !== 'Indicator' && bot.cloneId === undefined) { continue }
-         if (bot.type === 'Indicator' && (devTeam.codeName !== 'AAMasters' && devTeam.codeName !== userTeam.slug)) { continue }
+        if (bot.type !== 'Indicator' && bot.cloneId === undefined) { continue }
+        if (bot.type === 'Indicator' && (devTeam.codeName !== 'AAMasters' && devTeam.codeName !== userTeam.slug)) { continue }
 
-         if (bot.products !== undefined) {
-           for (let k = 0; k < bot.products.length; k++) {
-             let product = bot.products[k]
+        if (bot.products !== undefined) {
+          for (let k = 0; k < bot.products.length; k++) {
+            let product = bot.products[k]
 
-             if (window.localStorage.getItem('Show AAMaster Layers') === null) {
-               if (product.shareWith !== 'Public' && devTeam.codeName !== userTeam.slug) { continue }
-             }
-                        /* Now we create Product objects */
+            if (window.localStorage.getItem('Show AAMaster Layers') === null) {
+              if (product.shareWith !== 'Public' && devTeam.codeName !== userTeam.slug) { continue }
+            }
+                       /* Now we create Product objects */
 
-             let productCard = newProductCard()
+            let productCard = newProductCard()
 
-             productCard.devTeam = devTeam
-             productCard.bot = bot
-             productCard.product = product
+            productCard.devTeam = devTeam
+            productCard.bot = bot
+            productCard.product = product
+            productCard.fitFunction = thisObject.fitFunction
+            productCard.code = exchange + '-' + market.assetB + '/' + market.assetA + '-' + devTeam.codeName + '-' + bot.codeName + '-' + product.codeName
 
-             productCard.code = exchange + '-' + market.assetB + '/' + market.assetA + '-' + devTeam.codeName + '-' + bot.codeName + '-' + product.codeName
+                       /* Initialize it */
 
-                        /* Initialize it */
+            productCard.initialize()
 
-             productCard.initialize()
+                       /* Container Stuff */
 
-                        /* Container Stuff */
+            productCard.container.displacement.parentDisplacement = thisObject.container.displacement
+            productCard.container.frame.parentFrame = thisObject.container.frame
+            productCard.container.parentContainer = thisObject.container
+            productCard.container.isWheelable = true
 
-             productCard.container.displacement.parentDisplacement = thisObject.container.displacement
-             productCard.container.frame.parentFrame = thisObject.container.frame
-             productCard.container.parentContainer = thisObject.container
-             productCard.container.isWheelable = true
+                       /* Positioning within thisObject Panel */
 
-                        /* Positioning within thisObject Panel */
+            let position = {
+              x: 10,
+              y: thisObject.container.frame.height - thisObject.container.frame.getBodyHeight()
+            }
 
-             let position = {
-               x: 10,
-               y: thisObject.container.frame.height - thisObject.container.frame.getBodyHeight()
-             }
+            productCard.container.frame.position.x = position.x
+            productCard.container.frame.position.y = position.y + lastY
 
-             productCard.container.frame.position.x = position.x
-             productCard.container.frame.position.y = position.y + lastY
+            lastY = lastY + productCard.container.frame.height
 
-             lastY = lastY + productCard.container.frame.height
+                       /* Add to the Product Array */
 
-                        /* Add to the Product Array */
+            productCards.push(productCard)
 
-             productCards.push(productCard)
+                       /* Add to Visible Product Array */
 
-                        /* Add to Visible Product Array */
+            if (productCard.container.frame.position.y + productCard.container.frame.height < thisObject.container.frame.height) {
+              visibleProductCards.push(productCard)
+            }
 
-             if (productCard.container.frame.position.y + productCard.container.frame.height < thisObject.container.frame.height) {
-               visibleProductCards.push(productCard)
-             }
+                       /* Listen to Status Changes Events */
 
-                        /* Listen to Status Changes Events */
+            productCard.container.eventHandler.listenToEvent('Status Changed', onProductCardStatusChanged)
+            productCard.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
+          }
+        }
+      }
+    }
 
-             productCard.container.eventHandler.listenToEvent('Status Changed', onProductCardStatusChanged)
-             productCard.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel)
-           }
-         }
-       }
-     }
+    thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
+    isInitialized = true
+  }
 
-     thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel)
-     isInitialized = true
-   }
+  function onMouseWheel (event) {
+    delta = event.wheelDelta
+    if (delta > 0) {
+      delta = -1
+    } else {
+      delta = 1
+    }
 
-   function onMouseWheel (event) {
-     delta = event.wheelDelta
-     if (delta > 0) {
-       delta = -1
-     } else {
-       delta = 1
-     }
+    firstVisibleCard = firstVisibleCard + delta
 
-     firstVisibleCard = firstVisibleCard + delta
+    let availableSlots = visibleProductCards.length
 
-     let availableSlots = visibleProductCards.length
+    if (firstVisibleCard < 1) { firstVisibleCard = 1 }
+    if (firstVisibleCard > (productCards.length - availableSlots + 1)) { firstVisibleCard = productCards.length - availableSlots + 1 }
 
-     if (firstVisibleCard < 1) { firstVisibleCard = 1 }
-     if (firstVisibleCard > (productCards.length - availableSlots + 1)) { firstVisibleCard = productCards.length - availableSlots + 1 }
+    visibleProductCards = []
+    let lastY = 5
 
-     visibleProductCards = []
-     var lastY = 5
+    for (let i = 0; i < productCards.length; i++) {
+      if (i + 1 >= firstVisibleCard && i + 1 < firstVisibleCard + availableSlots) {
+        let productCard = productCards[i]
 
-     for (let i = 0; i < productCards.length; i++) {
-       if (i + 1 >= firstVisibleCard && i + 1 < firstVisibleCard + availableSlots) {
-         let productCard = productCards[i]
+               /* Positioning within thisObject Panel */
 
-                /* Positioning within thisObject Panel */
+        let position = {
+          x: 10,
+          y: thisObject.container.frame.height - thisObject.container.frame.getBodyHeight()
+        }
+        productCard.container.frame.position.x = position.x
+        productCard.container.frame.position.y = position.y + lastY
 
-         let position = {
-           x: 10,
-           y: thisObject.container.frame.height - thisObject.container.frame.getBodyHeight()
-         }
-         productCard.container.frame.position.x = position.x
-         productCard.container.frame.position.y = position.y + lastY
+        lastY = lastY + productCard.container.frame.height
 
-         lastY = lastY + productCard.container.frame.height
+               /* Add to Visible Product Array */
 
-                /* Add to Visible Product Array */
+        visibleProductCards.push(productCard)
+      }
+    }
+  }
 
-         visibleProductCards.push(productCard)
-       }
-     }
-   }
+  function onProductCardStatusChanged (pProductCard) {
+    thisObject.container.eventHandler.raiseEvent('Product Card Status Changed', pProductCard)
+  }
 
-   function onProductCardStatusChanged (pProductCard) {
-     thisObject.container.eventHandler.raiseEvent('Product Card Status Changed', pProductCard)
-   }
+  function getLoadingProductCards () {
+       /* Returns all productCards which status is LOADING */
 
-   function getLoadingProductCards () {
-        /* Returns all productCards which status is LOADING */
+    let onProducts = []
 
-     let onProducts = []
+    for (let i = 0; i < productCards.length; i++) {
+      if (productCards[i].status === PRODUCT_CARD_STATUS.LOADING) {
+        onProducts.push(productCards[i])
+      }
+    }
 
-     for (let i = 0; i < productCards.length; i++) {
-       if (productCards[i].status === PRODUCT_CARD_STATUS.LOADING) {
-         onProducts.push(productCards[i])
-       }
-     }
+    return onProducts
+  }
 
-     return onProducts
-   }
+  function getContainer (point) {
+    let container
 
-   function getContainer (point) {
-     var container
+    container = panelTabButton.getContainer(point)
+    if (container !== undefined) { return container }
 
-     container = panelTabButton.getContainer(point)
-     if (container !== undefined) { return container }
+       /* First we check if thisObject point is inside thisObject space. */
 
-        /* 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 */
 
-     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 < visibleProductCards.length; i++) {
+        container = visibleProductCards[i].getContainer(point)
 
-       for (var i = 0; i < visibleProductCards.length; i++) {
-         container = visibleProductCards[i].getContainer(point)
+        if (container !== undefined) {
+          let checkPoint = {
+            x: point.x,
+            y: point.y
+          }
 
-         if (container !== undefined) {
-                    /* We found an inner container which has the point. We return it. */
+          checkPoint = thisObject.fitFunction(checkPoint)
 
-           return container
-         }
-       }
+          if (point.x === checkPoint.x && point.y === checkPoint.y) {
+            return container
+          }
+        }
+      }
 
-            /* The point does not belong to any inner container, so we return the current container. */
+           /* The point does not belong to any inner container, so we return the current container. */
 
-       return thisObject.container
-     } else {
-            /* This point does not belong to thisObject space. */
+      let checkPoint = {
+        x: point.x,
+        y: point.y
+      }
 
-       return undefined
-     }
-   }
+      checkPoint = thisObject.fitFunction(checkPoint)
 
-   function draw () {
-     if (isInitialized === false) { return }
+      if (point.x === checkPoint.x && point.y === checkPoint.y) {
+        return thisObject.container
+      }
+    }
+  }
 
-     thisObject.container.frame.draw(false, false, true)
+  function draw () {
+    if (isInitialized === false) { return }
 
-     for (let i = 0; i < visibleProductCards.length; i++) {
-       visibleProductCards[i].draw()
-     }
+    thisObject.container.frame.draw(false, false, true, thisObject.fitFunction)
+
+    for (let i = 0; i < visibleProductCards.length; i++) {
+      visibleProductCards[i].draw()
+    }
+
+    panelTabButton.draw()
+  }
+}
 
-     panelTabButton.draw()
-   }
- }

ProductStorage.js

@@ -171,7 +171,7 @@ function newProductStorage (pName) {
 
               case GLOBAL.CUSTOM_FAIL_RESPONSE.result: {
                 if (INFO_LOG === true) { logger.write('[INFO] initialize -> onMarketFileReady -> Received CUSTOM FAIL Response.') }
-                if (INFO_LOG === true) { logger.write('[INFO] initialize -> onMarketFileReady -> err.message = ' + err.message) }
+                if (INFO_LOG === true) { logger.write('[INFO] initialize -> onMarketFileReady -> err= ' + err.stack) }
 
                 callBackFunction(err)
                 return
@@ -227,7 +227,7 @@ function newProductStorage (pName) {
 
               case GLOBAL.CUSTOM_FAIL_RESPONSE.result: {
                 if (INFO_LOG === true) { logger.write('[INFO] initialize -> onDailyFileReady -> Received CUSTOM FAIL Response.') }
-                if (INFO_LOG === true) { logger.write('[INFO] initialize -> onDailyFileReady -> err.message = ' + err.message) }
+                if (INFO_LOG === true) { logger.write('[INFO] initialize -> onDailyFileReady -> err= ' + err.stack) }
 
                 callBackFunction(err)
                 return
@@ -282,7 +282,7 @@ function newProductStorage (pName) {
 
               case GLOBAL.CUSTOM_FAIL_RESPONSE.result: {
                 if (INFO_LOG === true) { logger.write('[INFO] initialize -> onSingleFileReady -> Received CUSTOM FAIL Response.') }
-                if (INFO_LOG === true) { logger.write('[INFO] initialize -> onSingleFileReady -> err.message = ' + err.message) }
+                if (INFO_LOG === true) { logger.write('[INFO] initialize -> onSingleFileReady -> err= ' + err.stack) }
 
                 callBackFunction(err)
                 return
@@ -334,7 +334,7 @@ function newProductStorage (pName) {
 
               case GLOBAL.CUSTOM_FAIL_RESPONSE.result: {
                 if (INFO_LOG === true) { logger.write('[INFO] initialize -> onFileSequenceReady -> Received CUSTOM FAIL Response.') }
-                if (INFO_LOG === true) { logger.write('[INFO] initialize -> onFileSequenceReady -> err.message = ' + err.message) }
+                if (INFO_LOG === true) { logger.write('[INFO] initialize -> onFileSequenceReady -> err= ' + err.stack) }
 
                 callBackFunction(err)
                 return

Scales/RateScale.js

@@ -33,7 +33,7 @@ function newRateScale () {
     }
   }
 
-  let visible = false
+  let visible = true
   let timeLineCoordinateSystem
 
   return thisObject
@@ -41,7 +41,7 @@ function newRateScale () {
   function initialize (pTimeLineCoordinateSystem) {
     timeLineCoordinateSystem = pTimeLineCoordinateSystem
 
-    thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel)
+    thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
 
     thisObject.heightPercentage = window.localStorage.getItem(MODULE_NAME)
     if (!thisObject.heightPercentage) {

Scales/TimePeriodScale.js

@@ -27,7 +27,7 @@ function newTimePeriodScale () {
     }
   }
 
-  let visible = false
+  let visible = true
   let timeLineCoordinateSystem
   let objectStorage = {}
   let filePeriodIndex = FILES_PERIOD_DEFAULT_VALUE
@@ -40,7 +40,7 @@ function newTimePeriodScale () {
   function initialize (pTimeLineCoordinateSystem) {
     timeLineCoordinateSystem = pTimeLineCoordinateSystem
 
-    thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel)
+    thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
 
     readObjectState()
     newTimePeriod()
@@ -220,7 +220,7 @@ to be visible at the top of the viewPort. */
   /* We draw the circle container */
 
     const RED_LINE_HIGHT = 5
-    const RADIOUS = 25
+    const RADIUS = 25
     const OPACITY = 1
 
     let centerPoint = {
@@ -229,14 +229,14 @@ to be visible at the top of the viewPort. */
     }
 
     browserCanvasContext.beginPath()
-    browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIOUS + RED_LINE_HIGHT, 0.0 * Math.PI, 2.0 * Math.PI)
+    browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIUS + RED_LINE_HIGHT, 0.0 * Math.PI, 2.0 * Math.PI)
     browserCanvasContext.closePath()
 
     browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + OPACITY + ')'
     browserCanvasContext.fill()
 
     browserCanvasContext.beginPath()
-    browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIOUS, 0.0 * Math.PI, 2.0 * Math.PI)
+    browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIUS, 0.0 * Math.PI, 2.0 * Math.PI)
     browserCanvasContext.closePath()
 
     browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')'

Scales/TimeScale.js

@@ -27,7 +27,7 @@ function newTimeScale () {
     }
   }
 
-  let visible = false
+  let visible = true
   let timeLineCoordinateSystem
 
   return thisObject
@@ -35,7 +35,7 @@ function newTimeScale () {
   function initialize (pTimeLineCoordinateSystem) {
     timeLineCoordinateSystem = pTimeLineCoordinateSystem
 
-    thisObject.container.eventHandler.listenToEvent('Mouse Wheel', onMouseWheel)
+    thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
 
     thisObject.lenghtPercentage = window.localStorage.getItem(MODULE_NAME)
     if (!thisObject.lenghtPercentage) {

Spaces/BottomSpace.js

@@ -1,154 +1,308 @@
- 
-function newBottomSpace () {
-  let thisObject = {
 
-    container: undefined,
-    draw: draw,
-    getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
-    createNewControl: createNewControl,
-    destroyControl: destroyControl,
-    getControl: getControl,
-    initialize: initialize
-  }
+ function newBottomSpace () {
+   const MODULE_NAME = 'Bottom Space'
+   const ERROR_LOG = true
 
-  var container = newContainer()
-  container.initialize()
-  thisObject.container = container
+   let thisObject = {
+     container: undefined,
+     status: 'BOTTOM',
+     draw: draw,
+     physics: physics,
+     getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
+     createNewControl: createNewControl,
+     destroyControl: destroyControl,
+     getControl: getControl,
+     finalize: finalize,
+     initialize: initialize
+   }
 
-  container.isDraggeable = false
+   thisObject.container = newContainer()
+   thisObject.container.initialize(MODULE_NAME)
+   thisObject.container.isClickeable = false
+   thisObject.container.isDraggeable = true
+   thisObject.container.notDraggingOnX = true
 
-  controlsMap = new Map()
-  resize()
+   controlsMap = new Map()
+   resize()
 
-  return thisObject
+   let selfMouseClickEventSubscriptionId
+   let canvasBrowserResizedEventSubscriptionId
 
-  function initialize () {
-    window.canvasApp.eventHandler.listenToEvent('Browser Resized', resize)
-  }
+   return thisObject
 
-  function createNewControl (pType, pDrawFunction, pOwner) {
-    let control
+   function finalize () {
+     thisObject.container.eventHandler.stopListening(selfMouseClickEventSubscriptionId)
+     thisObject.container.eventHandler.stopListening(canvasBrowserResizedEventSubscriptionId)
 
-    switch (pType) {
+     thisObject.container.finalize()
+     thisObject.container = undefined
+   }
 
-      case 'Over The Line':
-        {
-          control = newUIControl()
-          control.initialize()
-          control.drawFunction = pDrawFunction
-          break
-        }
-    }
+   function initialize () {
+     canvasBrowserResizedEventSubscriptionId = window.canvasApp.eventHandler.listenToEvent('Browser Resized', resize)
+     selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
+   }
 
-    let controlArray = controlsMap.get(pOwner)
-    if (controlArray === undefined) {
-      controlArray = []
-      controlsMap.set(pOwner, controlArray)
-    }
+   function onMouseClick (event) {
+     // canvas.strategySpace.tradingSystemWorkspace.showUp()
+   }
 
-    controlArray.push(control)
+   function resize () {
+     thisObject.container.frame.position.x = 0
+     thisObject.container.frame.position.y = browserCanvas.height - BOTTOM_SPACE_HEIGHT
 
-    control.handle = Math.floor((Math.random() * 10000000) + 1)
+     thisObject.container.frame.width = browserCanvas.width
+     thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT
+   }
 
-    return control.handle
-  }
+   function physics () {
+     /* Check the limits */
 
-  function destroyControl (pControlHandle) {
-    thisObject.controls = controlsMap.get('Global')
-    if (thisObject.controls !== undefined) {
-      for (let i = 0; i < thisObject.controls.length; i++) {
-        let control = thisObject.controls[i]
-        if (control.handle === pControlHandle) {
-          thisObject.controls.splice(i, 1)  // Delete item from array.
-          return
-        }
-      }
-    }
+     thisObject.status = 'MIDDLE'
 
-    thisObject.controls = controlsMap.get(window.CHART_ON_FOCUS)
-    if (thisObject.controls !== undefined) {
-      for (let i = 0; i < thisObject.controls.length; i++) {
-        let control = thisObject.controls[i]
-        if (control.handle === pControlHandle) {
-          thisObject.controls.splice(i, 1)  // Delete item from array.
-          return
-        }
-      }
-    }
-  }
+     let user = window.localStorage.getItem(LOGGED_IN_USER_LOCAL_STORAGE)
+     if (user !== null) { // Only if user is logged in
+       thisObject.container.isDraggeable = true
+     } else {
+       thisObject.container.isDraggeable = false
+     }
 
-  function getControl (pControlHandle, pOwner) {
-    thisObject.controls = controlsMap.get(pOwner)
-    if (thisObject.controls != undefined) {
-      for (let i = 0; i < thisObject.controls.length; i++) {
-        let control = thisObject.controls[i]
+     if (thisObject.container.frame.position.y > browserCanvas.height * 99.5 / 100 - BOTTOM_SPACE_HEIGHT) {
+       thisObject.container.frame.position.y = browserCanvas.height - BOTTOM_SPACE_HEIGHT
+       thisObject.status = 'BOTTOM'
+       canvas.strategySpace.makeInvisible()
+     } else {
+       canvas.strategySpace.makeVisible()
+     }
 
-        if (control.handle === pControlHandle) {
-          return control
-        }
-      }
-    }
-  }
+     if (thisObject.container.frame.position.y < browserCanvas.height * 0.5 / 100) {
+       thisObject.container.frame.position.y = 0
+       thisObject.status = 'TOP'
+       canvas.panelsSpace.visible = false
+     } else {
+       canvas.panelsSpace.visible = true
+     }
 
-  function resize () {
-    container.frame.position.x = 0
-    container.frame.position.y = viewPort.visibleArea.bottomLeft.y
+     BOTTOM_SPACE_POSITION = thisObject.container.frame.position.y
+     viewPort.resize()
+   }
 
-    thisObject.container.frame.width = browserCanvas.width
-    thisObject.container.frame.height = BOTTOM_SPACE_HEIGHT
-  }
+   function createNewControl (pType, pDrawFunction, pOwner) {
+     let control
 
-  function getContainer (point) {
-    let container
+     switch (pType) {
 
-    return thisObject.container
-  }
+       case 'Over The Line':
+         {
+           control = newUIControl()
+           control.initialize()
+           control.drawFunction = pDrawFunction
+           break
+         }
+     }
 
-  function draw () {
-    thisObject.container.frame.draw(false, false)
+     let controlArray = controlsMap.get(pOwner)
+     if (controlArray === undefined) {
+       controlArray = []
+       controlsMap.set(pOwner, controlArray)
+     }
 
-    drawBackground()
+     controlArray.push(control)
 
-    thisObject.controls = controlsMap.get('Global')
-    if (thisObject.controls !== undefined) {
-      for (let i = 0; i < thisObject.controls.length; i++) {
-        let control = thisObject.controls[i]
-        control.draw()
-      }
-    }
+     control.handle = Math.floor((Math.random() * 10000000) + 1)
 
-    thisObject.controls = controlsMap.get(window.CHART_ON_FOCUS)
-    if (thisObject.controls !== undefined) {
-      for (let i = 0; i < thisObject.controls.length; i++) {
-        let control = thisObject.controls[i]
-        control.draw()
-      }
-    }
-  }
+     return control.handle
+   }
 
-  function drawBackground () {
-    let opacity = 1
+   function destroyControl (pControlHandle) {
+     thisObject.controls = controlsMap.get('Global')
+     if (thisObject.controls !== undefined) {
+       for (let i = 0; i < thisObject.controls.length; i++) {
+         let control = thisObject.controls[i]
+         if (control.handle === pControlHandle) {
+           thisObject.controls.splice(i, 1)  // Delete item from array.
+           return
+         }
+       }
+     }
 
-    let zeroPoint = {
-      x: 0,
-      y: 0
-    }
+     thisObject.controls = controlsMap.get(window.CHART_ON_FOCUS)
+     if (thisObject.controls !== undefined) {
+       for (let i = 0; i < thisObject.controls.length; i++) {
+         let control = thisObject.controls[i]
+         if (control.handle === pControlHandle) {
+           thisObject.controls.splice(i, 1)  // Delete item from array.
+           return
+         }
+       }
+     }
+   }
 
-    zeroPoint = thisObject.container.frame.frameThisPoint(zeroPoint)
+   function getControl (pControlHandle, pOwner) {
+     thisObject.controls = controlsMap.get(pOwner)
+     if (thisObject.controls != undefined) {
+       for (let i = 0; i < thisObject.controls.length; i++) {
+         let control = thisObject.controls[i]
 
-    let breakpointsHeight = 15
-    const RED_LINE_HIGHT = 5
+         if (control.handle === pControlHandle) {
+           return control
+         }
+       }
+     }
+   }
 
-    browserCanvasContext.beginPath()
-    browserCanvasContext.rect(zeroPoint.x, zeroPoint.y + breakpointsHeight, thisObject.container.frame.width, thisObject.container.frame.height)
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + opacity + ')'
-    browserCanvasContext.closePath()
-    browserCanvasContext.fill()
+   function getContainer (point) {
+     if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+       return thisObject.container
+     } else {
+       return undefined
+     }
+   }
+
+   function draw () {
+     thisObject.container.frame.draw(false, false)
+
+     drawBackground()
+
+     thisObject.controls = controlsMap.get('Global')
+     if (thisObject.controls !== undefined) {
+       for (let i = 0; i < thisObject.controls.length; i++) {
+         let control = thisObject.controls[i]
+         control.draw()
+       }
+     }
+
+     thisObject.controls = controlsMap.get(window.CHART_ON_FOCUS)
+     if (thisObject.controls !== undefined) {
+       for (let i = 0; i < thisObject.controls.length; i++) {
+         let control = thisObject.controls[i]
+         control.draw()
+       }
+     }
+   }
+
+   function drawBackground () {
+     let opacity = 1
+
+     let zeroPoint = {
+       x: 0,
+       y: 0
+     }
+
+     const RED_LINE_HIGHT = 5
+
+     zeroPoint = thisObject.container.frame.frameThisPoint(zeroPoint)
+
+     browserCanvasContext.beginPath()
+     browserCanvasContext.rect(zeroPoint.x, zeroPoint.y, thisObject.container.frame.width, thisObject.container.frame.height)
+     browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + 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()
+
+     let user = window.localStorage.getItem(LOGGED_IN_USER_LOCAL_STORAGE)
+     if (user !== null) { // Only if user is logged in
+       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
+
+     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
+       }
+     }
+
+     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
+     }
+
+     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)
+
+     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
+     }
+
+     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)
+
+     browserCanvasContext.setLineDash([0, 0])
+
+     browserCanvasContext.beginPath()
+
+     browserCanvasContext.moveTo(point1.x, point1.y)
+     browserCanvasContext.lineTo(point2.x, point2.y)
+     browserCanvasContext.lineTo(point3.x, point3.y)
+
+     browserCanvasContext.moveTo(point4.x, point4.y)
+     browserCanvasContext.lineTo(point5.x, point5.y)
+     browserCanvasContext.lineTo(point6.x, point6.y)
+
+     browserCanvasContext.lineWidth = LINE_WIDTH
+     browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')'
+     browserCanvasContext.stroke()
+   }
+ }
 
-    browserCanvasContext.beginPath()
-    browserCanvasContext.rect(zeroPoint.x, zeroPoint.y + breakpointsHeight, thisObject.container.frame.width, RED_LINE_HIGHT)
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')'
-    browserCanvasContext.closePath()
-    browserCanvasContext.fill()
-  }
-}

Spaces/ChartSpace.js

@@ -1,4 +1,4 @@
- /*
+/*
 
 The chart space is where all the charts live. What this space contains is a type of object we call Time Machine. A Time Machine is a cointainer of
 charts objects. The idea is simple, all the chart objects are ploted according to the time of the Time Machine object. When the time of the Time Machine
@@ -8,7 +8,6 @@ changes, then all charts in it are replotted with the corresponging data.
 
 function newChartSpace () {
   const MODULE_NAME = 'Chart Space'
-  const INFO_LOG = false
   const ERROR_LOG = true
   const logger = newWebDebugLog()
   logger.fileName = MODULE_NAME
@@ -16,6 +15,9 @@ function newChartSpace () {
   let thisObject = {
     visible: true,
     container: undefined,
+    fitIntoVisibleArea: fitIntoVisibleArea,
+    isThisPointVisible: isThisPointVisible,
+    physics: physics,
     drawBackground: drawBackground,
     draw: draw,
     timeMachines: [],
@@ -28,13 +30,12 @@ function newChartSpace () {
   thisObject.container.initialize(MODULE_NAME)
 
   thisObject.container.isDraggeable = false
+  thisObject.container.isWheelable = false
 
   return thisObject
 
   function finalize () {
     try {
-      if (INFO_LOG === true) { logger.write('[INFO] finalize -> Entering function.') }
-
       for (let i = 0; i < thisObject.timeMachines.length; i++) {
         let timeMachine = thisObject.timeMachines[i]
         timeMachine.finalize()
@@ -45,32 +46,24 @@ function newChartSpace () {
   }
 
   function initialize (callBackFunction) {
-    if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') }
-
     let initializedCounter = 0
     let toInitialize = 1
 
-        /* We create the first of many possible time machines that could live at the Chart Space. */
+       /* We create the first of many possible time machines that could live at the Chart Space. */
 
-    var timeMachine = newTimeMachine()
+    let timeMachine = newTimeMachine()
 
-    // timeMachine.container.connectToParent(thisObject.container, true, true)
-
-        /* We make the time machine a little bit smaller than the current space. */
-
-    timeMachine.container.frame.position.x = this.container.frame.width / 2 - timeMachine.container.frame.width / 2
-    timeMachine.container.frame.position.y = this.container.frame.height / 2 - timeMachine.container.frame.height / 2
+       /* We make the time machine a little bit smaller than the current space. */
 
+    timeMachine.container.frame.position.x = thisObject.container.frame.width / 2 - timeMachine.container.frame.width / 2
+    timeMachine.container.frame.position.y = thisObject.container.frame.height / 2 - timeMachine.container.frame.height / 2
+    timeMachine.container.fitFunction = fitIntoVisibleArea
     timeMachine.initialize(onTimeMachineInitialized)
 
     function onTimeMachineInitialized (err) {
-      if (INFO_LOG === true) { logger.write('[INFO] initialize -> onTimeMachineInitialized -> Entering function.') }
-
       initializedCounter++
 
       if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) {
-        if (INFO_LOG === true) { logger.write('[INFO] initialize -> onTimeMachineInitialized -> Initialization of a Time Machine failed.') }
-
         callBackFunction(err)
         return
       }
@@ -83,39 +76,127 @@ function newChartSpace () {
     }
   }
 
-  function drawBackground () {
-    if (thisObject.visible !== true) { return }
-
-    for (var i = 0; i < thisObject.timeMachines.length; i++) {
-      var timeMachine = thisObject.timeMachines[i]
-      timeMachine.drawBackground()
-    }
-  }
-
-  function draw () {
-    if (thisObject.visible !== true) { return }
-
-    for (var i = 0; i < thisObject.timeMachines.length; i++) {
-      var timeMachine = thisObject.timeMachines[i]
-      timeMachine.draw()
-    }
-  }
-
   function getContainer (point, purpose) {
     if (thisObject.visible !== true) { return }
 
     let container
 
-        /* Now we see which is the inner most container that has it */
+       /* Now we see which is the inner most container that has it */
 
-    for (var i = 0; i < this.timeMachines.length; i++) {
-      container = this.timeMachines[i].getContainer(point, purpose)
+    for (let i = 0; i < thisObject.timeMachines.length; i++) {
+      container = thisObject.timeMachines[i].getContainer(point, purpose)
       if (container !== undefined) {
         if (container.isForThisPurpose(purpose)) {
-          return container
+          if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+            return container
+          }
         }
       }
     }
-    return this.container
+
+    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+      return thisObject.container
+    } else {
+      return undefined
+    }
+  }
+
+  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
+    }
+
+    if (point.x > browserCanvas.width) {
+      returnPoint.x = browserCanvas.width
+    }
+
+    if (point.x < 0) {
+      returnPoint.x = 0
+    }
+
+    if (point.y > BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2) {
+      returnPoint.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2
+    }
+
+    if (point.y < 0) {
+      returnPoint.y = 0
+    }
+
+    return returnPoint
+  }
+
+  function isThisPointVisible (point) {
+    if (point.x > browserCanvas.width) {
+      return false
+    }
+
+    if (point.x < 0) {
+      return false
+    }
+
+    if (point.y > BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT / 2) {
+      return false
+    }
+
+    if (point.y < 0) {
+      return false
+    }
+
+    return true
+  }
+
+  function physics () {
+    thisObject.container.frame.height = BOTTOM_SPACE_POSITION
+
+    if (thisObject.container.frame.height <= 0 / 100) {
+      thisObject.visible = false
+    } else {
+      thisObject.visible = true
+    }
+
+    viewPort.resize()
+  }
+
+  function drawBackground () {
+    if (thisObject.visible !== true) { return }
+
+    drawSpaceBackground()
+
+    for (let i = 0; i < thisObject.timeMachines.length; i++) {
+      let timeMachine = thisObject.timeMachines[i]
+      timeMachine.drawBackground()
+    }
+  }
+
+  function drawSpaceBackground () {
+    let opacity = '1'
+    let fromPoint = {
+      x: 0,
+      y: 0
+    }
+
+    let toPoint = {
+      x: browserCanvas.width,
+      y: BOTTOM_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()
+  }
+
+  function draw () {
+    if (thisObject.visible !== true) { return }
+
+    for (let i = 0; i < thisObject.timeMachines.length; i++) {
+      let timeMachine = thisObject.timeMachines[i]
+      timeMachine.draw()
+    }
   }
 }
+

Spaces/FloatingSpace.js

@@ -1,34 +1,50 @@
- 
+
 function newFloatingSpace () {
   const MODULE_NAME = 'Floating Space'
-  const INFO_LOG = false
   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.
-    */
+   /*
+   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
     profileBalls: undefined,
-    strategyParts: undefined,
+    strategyPartConstructor: undefined,
     noteSets: undefined,
+    container: undefined,
+    fitIntoVisibleArea: fitIntoVisibleArea,
+    isThisPointVisible: isThisPointVisible,
+    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.frame.radius = 0
+  thisObject.container.frame.width = browserCanvas.width * 10
+  thisObject.container.frame.height = browserCanvas.height * 10
+  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
+
   return thisObject
 
   function finalize () {
-    try {
-      if (INFO_LOG === true) { logger.write('[INFO] finalize -> Entering function.') }
-
-      thisObject.floatingLayer.finalize()
-      thisObject.profileBalls.finalize()
-      thisObject.strategyParts.finalize()
-    } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) }
-    }
+    thisObject.floatingLayer.finalize()
+    thisObject.profileBalls.finalize()
+    thisObject.strategyPartConstructor.finalize()
+    thisObject.noteSets.finalize()
   }
 
   function initialize (callBackFunction) {
@@ -41,8 +57,102 @@ function newFloatingSpace () {
     thisObject.noteSets = newNoteSets()
     thisObject.noteSets.initialize(thisObject.floatingLayer)
 
-    thisObject.strategyParts = newStrategyParts()
-    thisObject.strategyParts.initialize(thisObject.floatingLayer)
+    thisObject.strategyPartConstructor = newStrategyPartConstructor()
+    thisObject.strategyPartConstructor.initialize(thisObject.floatingLayer)
+
+    thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
+  }
+
+  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
+    }
+
+    if (point.x > browserCanvas.width) {
+      returnPoint.x = browserCanvas.width
+    }
+
+    if (point.x < 0) {
+      returnPoint.x = 0
+    }
+
+    if (point.y < BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT) {
+      returnPoint.y = BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT
+    }
+
+    if (point.y > browserCanvas.height) {
+      returnPoint.y = browserCanvas.height
+    }
+
+    return returnPoint
+  }
+
+  function isThisPointVisible (point) {
+    if (point.x > browserCanvas.width) {
+      return false
+    }
+
+    if (point.x < 0) {
+      return false
+    }
+
+    if (point.y < BOTTOM_SPACE_POSITION + BOTTOM_SPACE_HEIGHT) {
+      return false
+    }
+
+    if (point.y > browserCanvas.height) {
+      return false
+    }
+
+    return true
+  }
+
+  function onMouseWheel (event) {
+    thisObject.floatingLayer.changeTargetRepulsion(event.wheelDelta)
+  }
+
+  function makeVisible () {
+    visible = true
+  }
+
+  function makeInvisible () {
+    visible = false
+  }
+
+  function getContainer (point) {
+    let container
+
+    container = thisObject.floatingLayer.getContainer(point)
+    if (container !== undefined) { return container }
+
+    if (visible === true) {
+      return thisObject.container
+    }
+  }
+
+  function physics () {
+    thisObject.floatingLayer.physics()
+  }
+
+  function draw () {
+    if (visible === true) {
+      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

@@ -49,11 +49,15 @@ function newPanelsSpace () {
       case 'Products Panel':
         {
           panel = newProductsPanel()
+          panel.fitFunction = canvas.chartSpace.fitIntoVisibleArea
+          panel.container.isVisibleFunction = canvas.chartSpace.isThisPointVisible
           break
         }
       case 'Plotter Panel':
         {
           panel = getNewPlotterPanel(pParameters.devTeam, pParameters.plotterCodeName, pParameters.moduleCodeName, pParameters.panelCodeName)
+          panel.fitFunction = canvas.chartSpace.fitIntoVisibleArea
+          panel.container.isVisibleFunction = canvas.chartSpace.isThisPointVisible
           panel.initialize()
           break
         }

Spaces/StrategySpace.js

@@ -3,10 +3,12 @@ function newStrategySpace () {
   const MODULE_NAME = 'Strategy Space'
   let thisObject = {
     sidePanel: undefined,
-    strategyCollection: undefined,
+    workplace: undefined,
     container: undefined,
     draw: draw,
     getContainer: getContainer,
+    makeVisible: makeVisible,
+    makeInvisible: makeInvisible,
     initialize: initialize
   }
 
@@ -19,21 +21,34 @@ function newStrategySpace () {
   return thisObject
 
   async function initialize () {
-    thisObject.sidePanel = newSidePanel()
-    thisObject.sidePanel.initialize()
+    // thisObject.sidePanel = newSidePanel()
+    // thisObject.sidePanel.initialize()
 
-    thisObject.strategyCollection = newStrategyCollection()
-    thisObject.strategyCollection.container.connectToParent(thisObject.sidePanel.container, true, true)
-    await thisObject.strategyCollection.initialize()
+    thisObject.workplace = newWorkspace()
+    // thisObject.workplace.container.connectToParent(thisObject.sidePanel.container, true, true)
+    thisObject.workplace.initialize()
+    await thisObject.workplace.loadFromStrategyzer()
 
-    thisObject.sidePanel.areas.push(thisObject.strategyCollection)
+    // thisObject.sidePanel.areas.push(thisObject.workplace)
+  }
+
+  function makeVisible () {
+    if (thisObject.workplace.isDeployed !== true) {
+      thisObject.workplace.deploydTradingSystem()
+    }
+    canvas.floatingSpace.makeVisible()
+    visible = true
+  }
+
+  function makeInvisible () {
+    visible = false
   }
 
   function getContainer (point) {
     let container
 
-    if (thisObject.strategyCollection !== undefined) {
-      container = thisObject.strategyCollection.getContainer(point)
+    if (thisObject.workplace !== undefined) {
+      container = thisObject.workplace.getContainer(point)
       if (container !== undefined) { return container }
     }
 
@@ -46,7 +61,8 @@ function newStrategySpace () {
   }
 
   function draw () {
-    thisObject.sidePanel.draw()
+    if (thisObject.sidePanel !== undefined) {
+      thisObject.sidePanel.draw()
+    }
   }
 }
-

StrategySpace/ConstGetStrategies.js

@@ -0,0 +1,87 @@
+const GRAPHQL_QUERY_GET_STRATEGIES = Apollo.gql`
+    query($fbSlug: String!){
+
+              strategizer_StrategyByFb(fbSlug: $fbSlug){
+              id
+              subStrategies(activeOnly: true){
+                  name
+                  active
+                  entryPoint{
+                  situations{
+                      name
+                      conditions{
+                      name
+                      code
+                      }
+                  }
+                  }
+                  exitPoint{
+                  situations{
+                      name
+                      conditions{
+                      name
+                      code
+                      }
+                  }
+                  }
+                  sellPoint{
+                  situations{
+                      name
+                      conditions{
+                      name
+                      code
+                      }
+                  }
+                  }
+                  buyPoint{
+                  situations{
+                      name
+                      conditions{
+                      name
+                      code
+                      }
+                  }
+                  }
+                  stopLoss{
+                  phases{
+                      name
+                      code
+                      situations{
+                      name
+                      conditions{
+                          name
+                          code
+                      }
+                      }
+                  }
+                  }
+                  buyOrder{
+                  phases{
+                      name
+                      code
+                      situations{
+                      name
+                      conditions{
+                          name
+                          code
+                      }
+                      }
+                  }
+                  }
+                  sellOrder{
+                  phases{
+                      name
+                      code
+                      situations{
+                      name
+                      conditions{
+                          name
+                          code
+                      }
+                      }
+                  }
+                  }
+              }
+              }
+          }
+        `

StrategySpace/ConstUpdateStrategy.js

@@ -0,0 +1,7 @@
+const GRAPHQL_MUTATION_UPDATE_STRATEGIES = Apollo.gql`
+  mutation strategizer_EditStrategy($id: ID!, $strategy: strategizer_StrategyInput!) {
+    strategizer_EditStrategy(id: $id, strategy: $strategy) {
+      id
+    }
+  }
+`

StrategySpace/StrategyCollection.js

@@ -1,258 +0,0 @@
-
-function newStrategyCollection () {
-  const MODULE_NAME = 'Strategy Collection'
-  const ERROR_LOG = true
-  const logger = newWebDebugLog()
-  logger.fileName = MODULE_NAME
-
-  let thisObject = {
-    strategies: undefined,
-    container: undefined,
-    draw: draw,
-    getContainer: getContainer,
-    initialize: initialize
-  }
-
-  let colletionItems = []
-
-  thisObject.container = newContainer()
-  thisObject.container.name = MODULE_NAME
-  thisObject.container.initialize()
-
-  thisObject.container.frame.width = 0
-  thisObject.container.frame.height = 0
-
-  thisObject.container.frame.position.x = 0
-  thisObject.container.frame.position.y = 0
-
-  thisObject.container.isDraggeable = false
-  thisObject.container.isClickeable = false
-
-  return thisObject
-
-  async function initialize () {
-    try {
-      const accessToken = window.localStorage.getItem('xaccess_token')
-      let user = window.localStorage.getItem('xuser')
-
-      if (user === null) {
-              // if there is no user that means that we are logged off, which means this object can not be used.
-        return
-      }
-
-      user = JSON.parse(user)
-
-      const authId = user.authId
-
-      let sessionToken
-
-      const apolloClient = new Apollo.lib.ApolloClient({
-        networkInterface: Apollo.lib.createNetworkInterface({
-          uri: window.canvasApp.graphQL.masterAppApiUrl,
-          transportBatching: true
-        }),
-        connectToDevTools: true
-      })
-
-      /* Getting the FB that own the Strategies */
-
-      let strategySimulationClone = ''
-      let clones = window.localStorage.getItem('userClones')
-      if (clones === null || clones === '') {
-        if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> no user clones found at local storage. Can not get Strategies without them. ') }
-        return
-      }
-      clones = JSON.parse(clones)
-      for (let i = 0; i < clones.length; i++) {
-        let clone = clones[i]
-        if (clone.botType === 'Indicator') {
-          strategySimulationClone = clone.botSlug
-        }
-      }
-
-      /* Getting all Strategies */
-
-      const networkInterface = Apollo.lib.createNetworkInterface({
-        uri: window.canvasApp.graphQL.masterAppApiUrl
-      })
-
-      networkInterface.use([{
-        applyMiddleware (req, next) {
-          req.options.headers = {
-            authorization: `Bearer ${accessToken}`
-          }
-          next()
-        }
-      }])
-
-      const QUERY = Apollo.gql`
-          query($fbSlug: String!){
-
-                    strategizer_StrategyByFb(fbSlug: $fbSlug){
-                    subStrategies(activeOnly: true){
-                        name
-                        entryPoint{
-                        situations{
-                            name
-                            conditions{
-                            name
-                            code
-                            }
-                        }
-                        }
-                        exitPoint{
-                        situations{
-                            name
-                            conditions{
-                            name
-                            code
-                            }
-                        }
-                        }
-                        sellPoint{
-                        situations{
-                            name
-                            conditions{
-                            name
-                            code
-                            }
-                        }
-                        }
-                        buyPoint{
-                        situations{
-                            name
-                            conditions{
-                            name
-                            code
-                            }
-                        }
-                        }
-                        stopLoss{
-                        phases{
-                            name
-                            code
-                            situations{
-                            name
-                            conditions{
-                                name
-                                code
-                            }
-                            }
-                        }
-                        }
-                        buyOrder{
-                        phases{
-                            name
-                            code
-                            situations{
-                            name
-                            conditions{
-                                name
-                                code
-                            }
-                            }
-                        }
-                        }
-                        sellOrder{
-                        phases{
-                            name
-                            code
-                            situations{
-                            name
-                            conditions{
-                                name
-                                code
-                            }
-                            }
-                        }
-                        }
-                    }
-                    }
-                }
-              `
-
-      const getStrategies = () => {
-        return new Promise((resolve, reject) => {
-          apolloClient.query({
-            query: QUERY,
-            variables: { fbSlug: strategySimulationClone}
-          })
-                  .then(response => {
-                    window.localStorage.setItem('userStrategies', JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies))
-                    thisObject.strategies = JSON.parse(JSON.stringify(response.data.strategizer_StrategyByFb.subStrategies))
-                    createCollectionItems()
-                    resolve({ strategies: response.data.strategizer_StrategyByFb.subStrategies})
-                  })
-                  .catch(error => {
-                    console.log('apolloClient error getting user strategies', error.graphQLErrors, error.stack)
-                    reject(error)
-                  })
-        })
-      }
-
-          // To avoid race conditions, add asynchronous fetches to array
-      let fetchDataPromises = []
-
-      fetchDataPromises.push(getStrategies())
-
-          // When all asynchronous fetches resolve, authenticate user or throw error.
-      await Promise.all(fetchDataPromises).then(result => {
-
-      }, err => {
-        console.error('[ERROR] Login -> GraphQL Fetch Error -> err = ', err.stack)
-      })
-    } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) }
-    }
-  }
-
-  function createCollectionItems () {
-    const TOP_MARGIN = 100
-    const ITEMS_SEPARATION = 90
-
-    for (let i = 0; i < thisObject.strategies.length; i++) {
-      let strategy = thisObject.strategies[i]
-      let collectionItem = newStrategyCollectionItem()
-
-      collectionItem.container.connectToParent(thisObject.container, false, false)
-      collectionItem.initialize()
-      collectionItem.strategy = strategy
-      collectionItem.container.frame.position.y = i * ITEMS_SEPARATION + TOP_MARGIN
-
-      colletionItems.push(collectionItem)
-
-      /* Load Strategies Icons */
-
-      let imageIndex = i + 1
-      if (imageIndex > 14) { imageIndex = 14 }
-
-      let strategyImage = loadEmoji('Symbols/Emoji Symbols-' + (112 + imageIndex) + '.png')
-      collectionItem.icon = strategyImage
-    }
-  }
-
-  function getContainer (point) {
-    let container
-
-    for (let i = 0; i < colletionItems.length; i++) {
-      let item = colletionItems[i]
-      container = item.getContainer(point)
-      if (container !== undefined) {
-        return container
-      }
-    }
-
-    return undefined
-  }
-
-  function draw () {
-    if (colletionItems === undefined) {
-      return
-    }
-
-    for (let i = 0; i < colletionItems.length; i++) {
-      let item = colletionItems[i]
-      item.draw()
-    }
-  }
-}

StrategySpace/StrategyCollectionItem.js

@@ -2,6 +2,7 @@ function newStrategyCollectionItem () {
   const MODULE_NAME = 'Strategy Collection Item'
   let thisObject = {
     icon: undefined,
+    strategySource: undefined,
     strategy: undefined,
     container: undefined,
     draw: draw,
@@ -17,11 +18,13 @@ function newStrategyCollectionItem () {
   thisObject.container.isClickeable = true
   thisObject.container.isDraggeable = false
 
-  let visible = false
+  let status = 'off'
 
   return thisObject
 
-  function initialize () {
+  function initialize (strategy) {
+    thisObject.strategySource = strategy
+
     const ITEM_WIDTH = SIDE_PANEL_WIDTH - 20
     const ITEM_HEIGHT = 80
 
@@ -39,210 +42,15 @@ function newStrategyCollectionItem () {
   }
 
   function onMouseClick (event) {
-    if (visible === false) {
-      canvas.chartSpace.visible = false
-      canvas.panelsSpace.visible = false
-      generateStrategyParts()
-      visible = true
+    if (status === 'off') {
+      canvas.floatingSpace.makeVisible()
+      thisObject.strategy = newTradingSystem()
+      thisObject.strategy.initialize(thisObject.strategySource)
+      status = 'on'
     } else {
-      canvas.chartSpace.visible = true
-      canvas.panelsSpace.visible = true
-      destroyStrategyParts()
-      visible = false
-    }
-  }
-
-  function createPart (partType, name, node, parentNode, title) {
-    let payload = {
-      profile: {
-        position: {
-          x: (viewPort.width - SIDE_PANEL_WIDTH) / 2 + SIDE_PANEL_WIDTH,
-          y: viewPort.height / 2
-        },
-        visible: true
-      },
-      notes: []
-    }
-
-    let imageId // 'My Image.png'
-
-    if (title !== undefined) {
-      payload.profile.upLabel = title
-    } else {
-      payload.profile.upLabel = partType
-    }
-
-    payload.profile.downLabel = name
-    payload.profile.imageId = imageId
-    payload.profile.botAvatar = 'dont know what this is'
-    payload.parentNode = parentNode
-
-    node.payload = payload
-
-    canvas.floatingSpace.strategyParts.createNewStrategyPart(partType, payload, onStrategyPartCreated)
-
-    function onStrategyPartCreated (err, pPartHandle) {
-      node.handle = pPartHandle
-    }
-  }
-
-  function destroyPart (node) {
-    canvas.floatingSpace.strategyParts.destroyStrategyPart(node.handle)
-  }
-
-  function generateStrategyParts () {
-    let lastPhase
-    let strategy = thisObject.strategy
-    createPart('Strategy', strategy.name, strategy, undefined)
-
-    createPart('Strategy Entry', '', strategy.entryPoint, strategy)
-    for (let k = 0; k < strategy.entryPoint.situations.length; k++) {
-      let situation = strategy.entryPoint.situations[k]
-      createPart('Situation', situation.name, situation, strategy.entryPoint, 'Situation' + ' ' + (k + 1))
-
-      for (let m = 0; m < situation.conditions.length; m++) {
-        let condition = situation.conditions[m]
-        createPart('Condition', condition.name, condition, situation, 'Condition' + ' ' + (m + 1))
-      }
-    }
-
-    createPart('Strategy Exit', '', strategy.exitPoint, strategy)
-    for (let k = 0; k < strategy.exitPoint.situations.length; k++) {
-      let situation = strategy.exitPoint.situations[k]
-      createPart('Situation', situation.name, situation, strategy.exitPoint, 'Situation' + ' ' + (k + 1))
-
-      for (let m = 0; m < situation.conditions.length; m++) {
-        let condition = situation.conditions[m]
-        createPart('Condition', condition.name, condition, situation, 'Condition' + ' ' + (m + 1))
-      }
-    }
-
-    createPart('Trade Entry', '', strategy.sellPoint, strategy)
-    for (let k = 0; k < strategy.sellPoint.situations.length; k++) {
-      let situation = strategy.sellPoint.situations[k]
-      createPart('Situation', situation.name, situation, strategy.sellPoint, 'Situation' + ' ' + (k + 1))
-
-      for (let m = 0; m < situation.conditions.length; m++) {
-        let condition = situation.conditions[m]
-        createPart('Condition', condition.name, condition, situation, 'Condition' + ' ' + (m + 1))
-      }
-    }
-
-    createPart('Stop', '', strategy.stopLoss, strategy)
-    for (let p = 0; p < strategy.stopLoss.phases.length; p++) {
-      let phase = strategy.stopLoss.phases[p]
-
-      let parent
-      if (p === 0) {
-        parent = strategy.stopLoss
-      } else {
-        parent = lastPhase
-      }
-      lastPhase = phase
-      createPart('Phase', phase.name, phase, parent, 'Phase' + ' ' + (p + 1))
-
-      for (let k = 0; k < phase.situations.length; k++) {
-        let situation = phase.situations[k]
-        createPart('Situation', situation.name, situation, phase, 'Situation' + ' ' + (k + 1))
-
-        for (let m = 0; m < situation.conditions.length; m++) {
-          let condition = situation.conditions[m]
-          createPart('Condition', condition.name, condition, situation, 'Condition' + ' ' + (m + 1))
-        }
-      }
-    }
-
-    createPart('Take Profit', '', strategy.buyOrder, strategy)
-    for (let p = 0; p < strategy.buyOrder.phases.length; p++) {
-      let phase = strategy.buyOrder.phases[p]
-      let parent
-      if (p === 0) {
-        parent = strategy.buyOrder
-      } else {
-        parent = lastPhase
-      }
-      lastPhase = phase
-      createPart('Phase', phase.name, phase, parent, 'Phase' + ' ' + (p + 1))
-
-      for (let k = 0; k < phase.situations.length; k++) {
-        let situation = phase.situations[k]
-        createPart('Situation', situation.name, situation, phase, 'Situation' + ' ' + (k + 1))
-
-        for (let m = 0; m < situation.conditions.length; m++) {
-          let condition = situation.conditions[m]
-          createPart('Condition', condition.name, condition, situation, 'Condition' + ' ' + (m + 1))
-        }
-      }
-    }
-  }
-
-  function destroyStrategyParts () {
-    let strategy = thisObject.strategy
-    destroyPart(strategy)
-
-    destroyPart(strategy.entryPoint)
-    for (let k = 0; k < strategy.entryPoint.situations.length; k++) {
-      let situation = strategy.entryPoint.situations[k]
-      destroyPart(situation)
-
-      for (let m = 0; m < situation.conditions.length; m++) {
-        let condition = situation.conditions[m]
-        destroyPart(condition)
-      }
-    }
-
-    destroyPart(strategy.exitPoint)
-    for (let k = 0; k < strategy.exitPoint.situations.length; k++) {
-      let situation = strategy.exitPoint.situations[k]
-      destroyPart(situation)
-
-      for (let m = 0; m < situation.conditions.length; m++) {
-        let condition = situation.conditions[m]
-        destroyPart(condition)
-      }
-    }
-
-    destroyPart(strategy.sellPoint)
-    for (let k = 0; k < strategy.sellPoint.situations.length; k++) {
-      let situation = strategy.sellPoint.situations[k]
-      destroyPart(situation)
-
-      for (let m = 0; m < situation.conditions.length; m++) {
-        let condition = situation.conditions[m]
-        destroyPart(condition)
-      }
-    }
-
-    destroyPart(strategy.stopLoss)
-    for (let p = 0; p < strategy.stopLoss.phases.length; p++) {
-      let phase = strategy.stopLoss.phases[p]
-      destroyPart(strategy.stopLoss)
-
-      for (let k = 0; k < phase.situations.length; k++) {
-        let situation = phase.situations[k]
-        destroyPart(situation)
-
-        for (let m = 0; m < situation.conditions.length; m++) {
-          let condition = situation.conditions[m]
-          destroyPart(condition)
-        }
-      }
-    }
-
-    destroyPart(strategy.buyOrder)
-    for (let p = 0; p < strategy.buyOrder.phases.length; p++) {
-      let phase = strategy.buyOrder.phases[p]
-      destroyPart(strategy.buyOrder)
-
-      for (let k = 0; k < phase.situations.length; k++) {
-        let situation = phase.situations[k]
-        destroyPart(situation)
-
-        for (let m = 0; m < situation.conditions.length; m++) {
-          let condition = situation.conditions[m]
-          destroyPart(condition)
-        }
-      }
+      canvas.floatingSpace.makeInvisible()
+      thisObject.strategy.finalize()
+      status = 'off'
     }
   }
 
@@ -262,30 +70,17 @@ function newStrategyCollectionItem () {
     text()
     arrow()
     icon()
-    floatingBackground()
-  }
-
-  function floatingBackground () {
-    if (visible === false) { return }
-
-    browserCanvasContext.beginPath()
-
-    browserCanvasContext.rect(SIDE_PANEL_WIDTH, 0, browserCanvas.width - SIDE_PANEL_WIDTH, browserCanvas.height)
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', 1)'
-
-    browserCanvasContext.closePath()
-    browserCanvasContext.fill()
   }
 
   function text () {
-    if (thisObject.strategy === undefined) {
+    if (thisObject.strategySource === undefined) {
       return
     }
 
     const LEFT_MARGIN = 80
     const TOP_MARGIN = 45
 
-    let strategy = thisObject.strategy
+    let strategy = thisObject.strategySource
 
     let labelpoint = {
       x: LEFT_MARGIN,
@@ -295,7 +90,7 @@ function newStrategyCollectionItem () {
     labelpoint = thisObject.container.frame.frameThisPoint(labelpoint)
 
     let labelToPrint = strategy.name
-    labelToPrint = labelToPrint.toUpperCase()
+    labelToPrint = ''
     labelToPrint = labelToPrint.substring(0, 30)
     let opacity = 1
     let fontSize = 15
@@ -305,7 +100,7 @@ function newStrategyCollectionItem () {
 
   function borders () {
     let params = {
-      cornerRadious: 8,
+      cornerRadius: 8,
       lineWidth: 0.1,
       opacity: 1,
       container: thisObject.container,
@@ -380,4 +175,3 @@ function newStrategyCollectionItem () {
     browserCanvasContext.drawImage(thisObject.icon, point1.x - IMAGE_SIZE / 2, point1.y - IMAGE_SIZE / 2, IMAGE_SIZE, IMAGE_SIZE)
   }
 }
-

StrategySpace/TradingSystem.js

@@ -0,0 +1,410 @@
+
+function newTradingSystem () {
+  const MODULE_NAME = 'Trading System'
+
+  let thisObject = {
+    protocolData: undefined,
+    container: undefined,
+    getContainer: getContainer,
+    initialize: initialize,
+    finalize: finalize
+  }
+
+  thisObject.container = newContainer()
+  thisObject.container.initialize(MODULE_NAME)
+  thisObject.container.isClickeable = false
+  thisObject.container.isDraggeable = false
+  thisObject.container.isWheelable = 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 = 0
+  thisObject.container.frame.height = 0
+
+  return thisObject
+
+  function finalize () {
+    destroyStrategyParts()
+    thisObject.protocolData = undefined
+    thisObject.container.finalize()
+    thisObject.container = undefined
+  }
+
+  function initialize (protocolData) {
+    thisObject.protocolData = {
+      id: protocolData.id,
+      strategies: protocolData.subStrategies
+    }
+    generateStrategyParts()
+  }
+
+  function getContainer (point) {
+
+  }
+
+  function createPart (partType, name, node, parentNode, chainParent, title) {
+    let payload = {}
+    if (chainParent === undefined) {
+      payload.targetPosition = {
+        x: canvas.floatingSpace.container.frame.width / 2,
+        y: canvas.floatingSpace.container.frame.height / 2
+      }
+    } else {
+      payload.targetPosition = {
+        x: chainParent.payload.position.x,
+        y: chainParent.payload.position.y
+      }
+    }
+
+    if (title !== undefined) {
+      payload.subTitle = title
+    } else {
+      payload.subTitle = partType
+    }
+
+    payload.visible = true
+    payload.title = name
+    payload.node = node
+    payload.parentNode = parentNode
+    payload.chainParent = chainParent
+    payload.onMenuItemClick = onMenuItemClick
+
+    if (node.id === undefined) {
+      node.id = newUniqueId()
+    }
+    node.payload = payload
+    node.type = partType
+    canvas.floatingSpace.strategyPartConstructor.createStrategyPart(payload)
+  }
+
+  function destroyPart (node) {
+    canvas.floatingSpace.strategyPartConstructor.destroyStrategyPart(node.payload)
+  }
+
+  function generateStrategyParts () {
+    let lastPhase
+    let tradingSystem = thisObject.protocolData
+
+    createPart('Trading System', '', tradingSystem, undefined, undefined)
+
+    for (m = 0; m < tradingSystem.strategies.length; m++) {
+      let strategy = tradingSystem.strategies[m]
+      createPart('Strategy', strategy.name, strategy, tradingSystem, tradingSystem)
+
+      createPart('Strategy Entry Event', '', strategy.entryPoint, strategy, strategy)
+      for (let k = 0; k < strategy.entryPoint.situations.length; k++) {
+        let situation = strategy.entryPoint.situations[k]
+        createPart('Situation', situation.name, situation, strategy.entryPoint, strategy.entryPoint, 'Strategy Entry' + ' ' + 'Situation')
+
+        for (let m = 0; m < situation.conditions.length; m++) {
+          let condition = situation.conditions[m]
+          createPart('Condition', condition.name, condition, situation, situation, 'Condition')
+        }
+      }
+
+      createPart('Strategy Exit Event', '', strategy.exitPoint, strategy, strategy)
+      for (let k = 0; k < strategy.exitPoint.situations.length; k++) {
+        let situation = strategy.exitPoint.situations[k]
+        createPart('Situation', situation.name, situation, strategy.exitPoint, strategy.exitPoint, 'Strategy Exit' + ' ' + 'Situation')
+
+        for (let m = 0; m < situation.conditions.length; m++) {
+          let condition = situation.conditions[m]
+          createPart('Condition', condition.name, condition, situation, situation, 'Condition')
+        }
+      }
+
+      createPart('Trade Entry Event', '', strategy.sellPoint, strategy, strategy)
+      for (let k = 0; k < strategy.sellPoint.situations.length; k++) {
+        let situation = strategy.sellPoint.situations[k]
+        createPart('Situation', situation.name, situation, strategy.sellPoint, strategy.sellPoint, 'Trade Entry' + ' ' + 'Situation')
+
+        for (let m = 0; m < situation.conditions.length; m++) {
+          let condition = situation.conditions[m]
+          createPart('Condition', condition.name, condition, situation, situation, 'Condition')
+        }
+      }
+
+      createPart('Stop', '', strategy.stopLoss, strategy, strategy)
+      for (let p = 0; p < strategy.stopLoss.phases.length; p++) {
+        let phase = strategy.stopLoss.phases[p]
+
+        let chainParent
+        if (p === 0) {
+          chainParent = strategy.stopLoss
+        } else {
+          chainParent = lastPhase
+        }
+        lastPhase = phase
+        createPart('Phase', phase.name, phase, strategy.stopLoss, chainParent, 'Stop Phase')
+
+        for (let k = 0; k < phase.situations.length; k++) {
+          let situation = phase.situations[k]
+          createPart('Situation', situation.name, situation, phase, phase, 'Situation')
+
+          for (let m = 0; m < situation.conditions.length; m++) {
+            let condition = situation.conditions[m]
+            createPart('Condition', condition.name, condition, situation, situation, 'Condition')
+          }
+        }
+      }
+
+      createPart('Take Profit', '', strategy.buyOrder, strategy, strategy)
+      for (let p = 0; p < strategy.buyOrder.phases.length; p++) {
+        let phase = strategy.buyOrder.phases[p]
+        let chainParent
+        if (p === 0) {
+          chainParent = strategy.buyOrder
+        } else {
+          chainParent = lastPhase
+        }
+        lastPhase = phase
+        createPart('Phase', phase.name, phase, strategy.buyOrder, chainParent, 'Take Profit Phase')
+
+        for (let k = 0; k < phase.situations.length; k++) {
+          let situation = phase.situations[k]
+          createPart('Situation', situation.name, situation, phase, phase, 'Situation')
+
+          for (let m = 0; m < situation.conditions.length; m++) {
+            let condition = situation.conditions[m]
+            createPart('Condition', condition.name, condition, situation, situation, 'Condition')
+          }
+        }
+      }
+    }
+  }
+
+  function destroyStrategyParts () {
+    let strategy = thisObject.protocolData
+    destroyPart(strategy)
+
+    destroyPart(strategy.entryPoint)
+    for (let k = 0; k < strategy.entryPoint.situations.length; k++) {
+      let situation = strategy.entryPoint.situations[k]
+      destroyPart(situation)
+
+      for (let m = 0; m < situation.conditions.length; m++) {
+        let condition = situation.conditions[m]
+        destroyPart(condition)
+      }
+    }
+
+    destroyPart(strategy.exitPoint)
+    for (let k = 0; k < strategy.exitPoint.situations.length; k++) {
+      let situation = strategy.exitPoint.situations[k]
+      destroyPart(situation)
+
+      for (let m = 0; m < situation.conditions.length; m++) {
+        let condition = situation.conditions[m]
+        destroyPart(condition)
+      }
+    }
+
+    destroyPart(strategy.sellPoint)
+    for (let k = 0; k < strategy.sellPoint.situations.length; k++) {
+      let situation = strategy.sellPoint.situations[k]
+      destroyPart(situation)
+
+      for (let m = 0; m < situation.conditions.length; m++) {
+        let condition = situation.conditions[m]
+        destroyPart(condition)
+      }
+    }
+
+    destroyPart(strategy.stopLoss)
+    for (let p = 0; p < strategy.stopLoss.phases.length; p++) {
+      let phase = strategy.stopLoss.phases[p]
+      destroyPart(strategy.stopLoss)
+
+      for (let k = 0; k < phase.situations.length; k++) {
+        let situation = phase.situations[k]
+        destroyPart(situation)
+
+        for (let m = 0; m < situation.conditions.length; m++) {
+          let condition = situation.conditions[m]
+          destroyPart(condition)
+        }
+      }
+    }
+
+    destroyPart(strategy.buyOrder)
+    for (let p = 0; p < strategy.buyOrder.phases.length; p++) {
+      let phase = strategy.buyOrder.phases[p]
+      destroyPart(strategy.buyOrder)
+
+      for (let k = 0; k < phase.situations.length; k++) {
+        let situation = phase.situations[k]
+        destroyPart(situation)
+
+        for (let m = 0; m < situation.conditions.length; m++) {
+          let condition = situation.conditions[m]
+          destroyPart(condition)
+        }
+      }
+    }
+  }
+
+  async function onMenuItemClick (payload, action) {
+    switch (action) {
+      case 'Save Trading System':
+        {
+          let result = await canvas.strategySpace.workplace.saveToStrategyzer()
+          return result
+          break
+        }
+
+      case 'Open Settings':
+        break
+      case 'Delete Strategy':
+
+        break
+
+      case 'Reload Strategy':
+
+        break
+
+      case 'Save Strategy':
+
+        break
+
+      case 'Edit Code':
+
+        break
+      case 'Add Phase':
+        {
+          let phaseParent = payload.node
+          let m = phaseParent.phases.length
+          let phase = {
+            name: 'New Phase',
+            code: '',
+            situations: []
+          }
+          phaseParent.phases.push(phase)
+          let phaseChainParent
+          if (m > 0) {
+            phaseChainParent = phaseParent.phases[m - 1]
+          } else {
+            phaseChainParent = phaseParent
+          }
+          createPart('Phase', phase.name, phase, phaseParent, phaseChainParent, 'Phase')
+        }
+        break
+      case 'Add Situation':
+        {
+          let phase = payload.node
+          let m = phase.situations.length
+          let situation = {
+            name: 'New Situation',
+            conditions: []
+          }
+          phase.situations.push(situation)
+          createPart('Situation', situation.name, situation, phase, phase, 'Situation')
+        }
+        break
+      case 'Add Condition':
+        {
+          let situation = payload.node
+          let m = situation.conditions.length
+          let condition = {
+            name: 'New Condition',
+            code: ''
+          }
+          situation.conditions.push(condition)
+          createPart('Condition', condition.name, condition, situation, situation, 'Condition')
+        }
+        break
+      case 'Delete Phase': {
+        deletePhase(payload.node)
+        break
+      }
+      case 'Delete Situation': {
+        deleteSituation(payload.node)
+        break
+      }
+      case 'Delete Condition': {
+        deleteCondition(payload.node)
+        break
+      }
+      default:
+
+    }
+  }
+
+  function deletePhase (node) {
+    let payload = node.payload
+    for (let k = 0; k < payload.parentNode.phases.length; k++) {
+      let phase = payload.parentNode.phases[k]
+      if (phase.id === node.id) {
+        for (let j = 0; j < phase.situations.length; j++) {
+          let situation = phase.situations[j]
+          for (let i = 0; i < situation.conditions.length; i++) {
+            let condition = situation.conditions[i]
+            destroyPart(condition)
+            cleanNode(condition)
+          }
+          situation.conditions = []
+          destroyPart(situation)
+          phase.situations.splice(j, 1)
+          cleanNode(situation)
+        }
+        phase.situations = []
+        /* Before deleting this phase we need to give its chainParent to the next phase down the chain */
+        if (k < payload.parentNode.phases.length - 1) {
+          payload.parentNode.phases[k + 1].payload.chainParent = payload.chainParent
+        }
+        /* Continue destroying this phase */
+        destroyPart(phase)
+        payload.parentNode.phases.splice(k, 1)
+        cleanNode(phase)
+        return
+      }
+    }
+  }
+
+  function deleteSituation (node) {
+    let payload = node.payload
+    for (let j = 0; j < payload.parentNode.situations.length; j++) {
+      let situation = payload.parentNode.situations[j]
+      if (situation.id === node.id) {
+        for (let i = 0; i < situation.conditions.length; i++) {
+          let condition = situation.conditions[i]
+          destroyPart(condition)
+          cleanNode(condition)
+        }
+        situation.conditions = []
+        destroyPart(situation)
+        payload.parentNode.situations.splice(j, 1)
+        cleanNode(situation)
+        return
+      }
+    }
+  }
+
+  function deleteCondition (node) {
+    let payload = node.payload
+    for (let i = 0; i < payload.parentNode.conditions.length; i++) {
+      let condition = payload.parentNode.conditions[i]
+      if (condition.id === node.id) {
+        destroyPart(node)
+        payload.parentNode.conditions.splice(i, 1)
+        cleanNode(condition)
+        return
+      }
+    }
+  }
+
+  function cleanNode (node) {
+    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
+  }
+}

StrategySpace/Workspace.js

@@ -0,0 +1,359 @@
+
+function newWorkspace () {
+  const MODULE_NAME = 'Workspace'
+  const ERROR_LOG = true
+  const logger = newWebDebugLog()
+  logger.fileName = MODULE_NAME
+
+  let thisObject = {
+    isDeployed: false,
+    strategizerData: undefined,
+    container: undefined,
+    tradingSystem: undefined,
+    loadFromStrategyzer: loadFromStrategyzer,
+    saveToStrategyzer: saveToStrategyzer,
+    deploydTradingSystem: deploydTradingSystem,
+    draw: draw,
+    getContainer: getContainer,
+    initialize: initialize
+  }
+
+  let colletionItems = []
+
+  thisObject.container = newContainer()
+  thisObject.container.name = MODULE_NAME
+  thisObject.container.initialize()
+
+  thisObject.container.frame.width = 0
+  thisObject.container.frame.height = 0
+
+  thisObject.container.frame.position.x = 0
+  thisObject.container.frame.position.y = 0
+
+  thisObject.container.isDraggeable = false
+  thisObject.container.isClickeable = false
+
+  return thisObject
+
+  function initialize () {
+
+  }
+
+  async function saveToStrategyzer () {
+    try {
+      const accessToken = window.localStorage.getItem(LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE)
+
+      let user = window.localStorage.getItem(LOGGED_IN_USER_LOCAL_STORAGE)
+      if (user === null) {
+        if (ERROR_LOG === true) { logger.write('[ERROR] saveToStrategyzer -> Can not save because user is not logged in. ') }
+        return
+      }
+
+      user = JSON.parse(user)
+
+      const authId = user.authId
+
+      const apolloClient = new Apollo.lib.ApolloClient({
+        networkInterface: Apollo.lib.createNetworkInterface({
+          uri: window.canvasApp.graphQL.masterAppApiUrl,
+          transportBatching: true
+        }),
+        connectToDevTools: true
+      })
+
+      /* Updating all Strategies */
+
+      const networkInterface = Apollo.lib.createNetworkInterface({
+        uri: window.canvasApp.graphQL.masterAppApiUrl
+      })
+
+      networkInterface.use([{
+        applyMiddleware (req, next) {
+          req.options.headers = {
+            authorization: `Bearer ${accessToken}`
+          }
+          next()
+        }
+      }])
+
+      let dataToSave = buildGraphQLDataToSave()
+
+      const updateStrategies = () => {
+        return new Promise((resolve, reject) => {
+          apolloClient.mutate({
+            mutation: GRAPHQL_MUTATION_UPDATE_STRATEGIES,
+            variables: {
+              id: thisObject.strategizerData.id,
+              strategy: dataToSave.strategy
+            }
+          })
+                  .then(response => {
+                    resolve(true)
+                  })
+                  .catch(err => {
+                    if (ERROR_LOG === true) { logger.write('[ERROR] saveToStrategyzer -> ApolloClient error getting user strategies -> err = ' + err.stack) }
+                    reject(err)
+                  })
+        })
+      }
+
+      let result = await updateStrategies()
+
+      return result
+    } catch (err) {
+      if (ERROR_LOG === true) { logger.write('[ERROR] saveToStrategyzer -> err = ' + err.stack) }
+    }
+  }
+
+  function buildGraphQLDataToSave () {
+    let graphQL_Mutation = ''
+
+    let dataToSave = {
+      strategy: {
+        subStrategies: []
+      }
+    }
+
+    for (m = 0; m < thisObject.tradingSystem.protocolData.strategies.length; m++) {
+      let workspaceStrategy = thisObject.tradingSystem.protocolData.strategies[m]
+      let strategy = {
+        name: workspaceStrategy.name,
+        active: workspaceStrategy.active,
+        entryPoint: {
+          situations: []
+        },
+        exitPoint: {
+          situations: []
+        },
+        sellPoint: {
+          situations: []
+        },
+        stopLoss: {
+          phases: []
+        },
+        buyOrder: {
+          phases: []
+        }
+      }
+
+      for (let k = 0; k < workspaceStrategy.entryPoint.situations.length; k++) {
+        let workspaceSituation = workspaceStrategy.entryPoint.situations[k]
+        let situation = {
+          name: workspaceSituation.name,
+          conditions: []
+        }
+
+        for (let m = 0; m < workspaceSituation.conditions.length; m++) {
+          let workspaceCondition = workspaceSituation.conditions[m]
+          let condition = {
+            name: workspaceCondition.name,
+            code: workspaceCondition.code
+          }
+          situation.conditions.push(condition)
+        }
+        strategy.entryPoint.situations.push(situation)
+      }
+
+      for (let k = 0; k < workspaceStrategy.exitPoint.situations.length; k++) {
+        let workspaceSituation = workspaceStrategy.exitPoint.situations[k]
+        let situation = {
+          name: workspaceSituation.name,
+          conditions: []
+        }
+
+        for (let m = 0; m < workspaceSituation.conditions.length; m++) {
+          let workspaceCondition = workspaceSituation.conditions[m]
+          let condition = {
+            name: workspaceCondition.name,
+            code: workspaceCondition.code
+          }
+          situation.conditions.push(condition)
+        }
+        strategy.exitPoint.situations.push(situation)
+      }
+
+      for (let k = 0; k < workspaceStrategy.sellPoint.situations.length; k++) {
+        let workspaceSituation = workspaceStrategy.sellPoint.situations[k]
+        let situation = {
+          name: workspaceSituation.name,
+          conditions: []
+        }
+
+        for (let m = 0; m < workspaceSituation.conditions.length; m++) {
+          let workspaceCondition = workspaceSituation.conditions[m]
+          let condition = {
+            name: workspaceCondition.name,
+            code: workspaceCondition.code
+          }
+          situation.conditions.push(condition)
+        }
+        strategy.sellPoint.situations.push(situation)
+      }
+
+      for (let p = 0; p < workspaceStrategy.stopLoss.phases.length; p++) {
+        let workspacePhase = workspaceStrategy.stopLoss.phases[p]
+        let phase = {
+          name: workspacePhase.name,
+          code: workspacePhase.code,
+          situations: []
+        }
+
+        for (let k = 0; k < workspacePhase.situations.length; k++) {
+          let workspaceSituation = workspacePhase.situations[k]
+          let situation = {
+            name: workspaceSituation.name,
+            conditions: []
+          }
+
+          for (let m = 0; m < workspaceSituation.conditions.length; m++) {
+            let workspaceCondition = workspaceSituation.conditions[m]
+            let condition = {
+              name: workspaceCondition.name,
+              code: workspaceCondition.code
+            }
+            situation.conditions.push(condition)
+          }
+          phase.situations.push(situation)
+        }
+        strategy.stopLoss.phases.push(phase)
+      }
+
+      for (let p = 0; p < workspaceStrategy.buyOrder.phases.length; p++) {
+        let workspacePhase = workspaceStrategy.buyOrder.phases[p]
+        let phase = {
+          name: workspacePhase.name,
+          code: workspacePhase.code,
+          situations: []
+        }
+
+        for (let k = 0; k < workspacePhase.situations.length; k++) {
+          let workspaceSituation = workspacePhase.situations[k]
+          let situation = {
+            name: workspaceSituation.name,
+            conditions: []
+          }
+
+          for (let m = 0; m < workspaceSituation.conditions.length; m++) {
+            let workspaceCondition = workspaceSituation.conditions[m]
+            let condition = {
+              name: workspaceCondition.name,
+              code: workspaceCondition.code
+            }
+            situation.conditions.push(condition)
+          }
+          phase.situations.push(situation)
+        }
+        strategy.buyOrder.phases.push(phase)
+      }
+      dataToSave.strategy.subStrategies.push(strategy)
+    }
+
+    return dataToSave
+  }
+
+  async function loadFromStrategyzer () {
+    try {
+      const accessToken = window.localStorage.getItem(LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE)
+
+      let user = window.localStorage.getItem(LOGGED_IN_USER_LOCAL_STORAGE)
+      if (user === null) {
+              // if there is no user that means that we are logged off, which means this object can not be used.
+        return
+      }
+
+      user = JSON.parse(user)
+
+      const authId = user.authId
+
+      let sessionToken
+
+      const apolloClient = new Apollo.lib.ApolloClient({
+        networkInterface: Apollo.lib.createNetworkInterface({
+          uri: window.canvasApp.graphQL.masterAppApiUrl,
+          transportBatching: true
+        }),
+        connectToDevTools: true
+      })
+
+      /* Getting the FB that own the Strategies */
+
+      let tradingSystemSimulationClone = ''
+      let clones = window.localStorage.getItem('userClones')
+      if (clones === null || clones === '') {
+        if (ERROR_LOG === true) { logger.write('[ERROR] loadFromStrategyzer -> no user clones found at local storage. Can not get Strategies without them. ') }
+        return
+      }
+      clones = JSON.parse(clones)
+      for (let i = 0; i < clones.length; i++) {
+        let clone = clones[i]
+        if (clone.botType === 'Indicator') {
+          tradingSystemSimulationClone = clone.botSlug
+        }
+      }
+
+      /* Getting all Strategies */
+
+      const networkInterface = Apollo.lib.createNetworkInterface({
+        uri: window.canvasApp.graphQL.masterAppApiUrl
+      })
+
+      networkInterface.use([{
+        applyMiddleware (req, next) {
+          req.options.headers = {
+            authorization: `Bearer ${accessToken}`
+          }
+          next()
+        }
+      }])
+
+      const getStrategies = () => {
+        return new Promise((resolve, reject) => {
+          apolloClient.query({
+            query: GRAPHQL_QUERY_GET_STRATEGIES,
+            variables: { fbSlug: tradingSystemSimulationClone}
+          })
+                  .then(response => {
+                    window.localStorage.setItem('userStrategies', JSON.stringify(response.data.strategizer_StrategyByFb))
+                    thisObject.strategizerData = JSON.parse(JSON.stringify(response.data.strategizer_StrategyByFb))
+
+                    resolve({ strategies: response.data.strategizer_StrategyByFb.subStrategies})
+                  })
+                  .catch(err => {
+                    if (ERROR_LOG === true) { logger.write('[ERROR] loadFromStrategyzer -> ApolloClient error getting user strategies -> err = ' + err.stack) }
+                    reject(err)
+                  })
+        })
+      }
+
+          // To avoid race conditions, add asynchronous fetches to array
+      let fetchDataPromises = []
+
+      fetchDataPromises.push(getStrategies())
+
+          // When all asynchronous fetches resolve, authenticate user or throw error.
+      await Promise.all(fetchDataPromises).then(result => {
+
+      }, err => {
+        if (ERROR_LOG === true) { logger.write('[ERROR] loadFromStrategyzer -> GraphQL Fetch Error -> err = ' + err.stack) }
+      })
+    } catch (err) {
+      if (ERROR_LOG === true) { logger.write('[ERROR] loadFromStrategyzer -> err = ' + err.stack) }
+    }
+  }
+
+  function deploydTradingSystem () {
+    thisObject.tradingSystem = newTradingSystem()
+    thisObject.tradingSystem.initialize(thisObject.strategizerData)
+    thisObject.isDeployed = true
+  }
+
+  function getContainer (point) {
+    let container
+
+    return undefined
+  }
+
+  function draw () {
+
+  }
+}

TimelineChart.js

@@ -1,484 +0,0 @@
- function newTimelineChart () {
-   const MODULE_NAME = 'Timeline Chart'
-   const INFO_LOG = false
-   const INTENSIVE_LOG = false
-   const ERROR_LOG = true
-   const logger = newWebDebugLog()
-   logger.fileName = MODULE_NAME
-
-   let timeLineCoordinateSystem
-
-   let timePeriod = INITIAL_TIME_PERIOD
-   let datetime = NEW_SESSION_INITIAL_DATE
-
-   let thisObject = {
-     setDatetime: setDatetime,
-     container: undefined,
-     drawBackground: drawBackground,
-     draw: draw,
-     getContainer: getContainer,
-     initialize: initialize,
-     finalize: finalize
-   }
-
-   thisObject.container = newContainer()
-   thisObject.container.initialize(MODULE_NAME)
-   thisObject.container.detectMouseOver = true
-
-   let initializationReady = false
-
-   let productsPanel
-
-    /* Background */
-   let logoAssetA
-   let logoAssetB
-   let logoExchange
-   let logoAA
-   let canDrawLogoA = false
-   let canDrawLogoB = false
-   let canDrawLogoExchange = false
-   let canDrawLogoAA = false
-
-   let plotterManager
-   let exchange
-   let market
-
-   let productsPanelHandle
-   let timePeriodScale
-
-   return thisObject
-
-   function finalize () {
-     try {
-       if (INFO_LOG === true) { logger.write('[INFO] finalize -> Entering function.') }
-
-       plotterManager.finalize()
-     } catch (err) {
-       if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) }
-     }
-   }
-
-   function initialize (pExchange, pMarket, pTimeLineCoordinateSystem, callBackFunction) {
-     try {
-       if (INFO_LOG === true) { logger.write('[INFO] initialize -> Entering function.') }
-
-            /* We load the logow we will need for the background. */
-       exchange = pExchange
-       market = pMarket
-       timeLineCoordinateSystem = pTimeLineCoordinateSystem
-
-       thisObject.container.eventHandler.listenToEvent('onMouseOver', function (event) {
-         saveUserPosition(thisObject.container, timeLineCoordinateSystem, event)
-       })
-
-       let panelOwner = exchange + ' ' + market.assetB + '/' + market.assetA
-       productsPanelHandle = canvas.panelsSpace.createNewPanel('Products Panel', undefined, panelOwner)
-       let productsPanel = canvas.panelsSpace.getPanel(productsPanelHandle, panelOwner)
-       productsPanel.initialize(exchange, market)
-
-       logoA = new Image()
-       logoB = new Image()
-       logoExchange = new Image()
-       logoAA = new Image()
-
-       logoA.onload = onImageALoaded
-
-       function onImageALoaded () {
-         canDrawLogoA = true
-       }
-
-       logoB.onload = onImageBLoaded
-
-       function onImageBLoaded () {
-         canDrawLogoB = true
-       }
-
-       logoExchange.onload = onImageExchangeLoaded
-
-       function onImageExchangeLoaded () {
-         canDrawLogoExchange = true
-       }
-
-       logoAA.onload = onImageAALoaded
-
-       function onImageAALoaded () {
-         canDrawLogoAA = true
-       }
-
-       logoA.src = window.canvasApp.urlPrefix + 'Images/tether-logo-background.png'
-       logoB.src = window.canvasApp.urlPrefix + 'Images/bitcoin-logo-background.png'
-       logoExchange.src = window.canvasApp.urlPrefix + 'Images/' + exchange + '-logo-background.png'
-       logoAA.src = window.canvasApp.urlPrefix + 'Images/sa-logo-background.png'
-
-       // moveToUserPosition(thisObject.container, timeLineCoordinateSystem, undefined, undefined, undefined, true)
-       timePeriod = INITIAL_TIME_PERIOD
-       datetime = NEW_SESSION_INITIAL_DATE
-
-            /* Event Subscriptions - we need this events to be fired first here and then in active Plotters. */
-
-       viewPort.eventHandler.listenToEvent('Offset Changed', onOffsetChanged)
-       viewPort.eventHandler.listenToEvent('Zoom Changed', onZoomChanged)
-
-            /* Initialize the Plotter Manager */
-
-       plotterManager = newPlottersManager()
-
-       plotterManager.container.connectToParent(thisObject.container, true, true)
-
-       plotterManager.container.frame.position.x = 0
-       plotterManager.container.frame.position.y = 0
-
-       plotterManager.initialize(productsPanel, pExchange, pMarket, onPlotterManagerReady)
-
-       function onPlotterManagerReady (err) {
-         if (INFO_LOG === true) { logger.write('[INFO] initialize -> onPlotterManagerReady -> Entering function.') }
-
-         if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) {
-           if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onPlotterManagerReady -> Plotter Manager Initialization Failed. ') }
-           if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> onPlotterManagerReady -> err.message = ' + err.message) }
-
-           callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
-           return
-         }
-
-         timePeriodScale = newTimePeriodScale()
-         timePeriodScale.container.connectToParent(thisObject.container, false, false)
-         timePeriodScale.container.eventHandler.listenToEvent('Time Period Changed', function (event) {
-           let currentTimePeriod = timePeriod
-           timePeriod = event.timePeriod
-           if (timePeriod !== currentTimePeriod) {
-             plotterManager.setTimePeriod(timePeriod)
-           }
-         })
-
-         timePeriodScale.initialize(timeLineCoordinateSystem)
-
-         initializationReady = true
-         callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE)
-         return
-       }
-     } catch (err) {
-       if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) }
-       callBackFunction(GLOBAL.DEFAULT_FAIL_RESPONSE)
-     }
-   }
-
-   function onZoomChanged (event) {
-     if (INFO_LOG === true) { logger.write('[INFO] onZoomChanged -> Entering function.') }
-
-     if (initializationReady === true) {
-       recalculateCurrentDatetime()
-
-       // saveUserPosition(thisObject.container, timeLineCoordinateSystem)
-     }
-   }
-
-   function setDatetime (pDatetime) {
-     if (INFO_LOG === true) { logger.write('[INFO] setDatetime -> Entering function.') }
-
-        /* This function is used when the time is changed through the user interface, but without zooming or panning. */
-        /* No matter if the day changed or not, we need to inform all visible Plotters. */
-
-     if (thisObject.container.frame.isInViewPort()) {
-       plotterManager.setDatetime(pDatetime)
-       plotterManager.positionAtDatetime(pDatetime)
-     }
-   }
-
-   function onOffsetChanged () {
-     if (INFO_LOG === true) { logger.write('[INFO] onOffsetChanged -> Entering function.') }
-
-     if (initializationReady === true) {
-       if (thisObject.container.frame.isInViewPort()) {
-         recalculateCurrentDatetime()
-         // saveUserPosition(thisObject.container, timeLineCoordinateSystem)
-       }
-     }
-   }
-
-   function recalculateCurrentDatetime () {
-     if (INFO_LOG === true) { logger.write('[INFO] recalculateCurrentDatetime -> Entering function.') }
-
-        /*
-
-        The view port was moved or the view port zoom level was changed and the center of the screen points to a different datetime that we
-        must calculate.
-
-        */
-
-     let center = {
-       x: (viewPort.visibleArea.bottomRight.x - viewPort.visibleArea.bottomLeft.x) / 2,
-       y: (viewPort.visibleArea.bottomRight.y - viewPort.visibleArea.topRight.y) / 2
-     }
-
-     center = unTransformThisPoint(center, thisObject.container)
-     center = timeLineCoordinateSystem.unInverseTransform(center, thisObject.container.frame.height)
-
-     let newDate = new Date(0)
-     newDate.setUTCSeconds(center.x / 1000)
-
-     datetime = newDate
-
-     plotterManager.setDatetime(datetime)
-
-     thisObject.container.eventHandler.raiseEvent('Datetime Changed', datetime)
-   }
-
-   function getContainer (point) {
-     if (INFO_LOG === true) { logger.write('[INFO] getContainer -> Entering function.') }
-
-     let container
-
-     container = timePeriodScale.getContainer(point)
-
-     if (container !== undefined) { return container }
-
-     return container
-   }
-
-   function tooTiny () {
-     if (INTENSIVE_LOG === true) { logger.write('[INFO] tooTiny -> Entering function.') }
-
-     if (viewPort.zoomLevel < Math.trunc(-28.25 * 100) / 100) {
-       return true
-     } else {
-       return false
-     }
-   }
-
-   function tooSmall () {
-     if (INFO_LOG === true) { logger.write('[INFO] tooSmall -> Entering function.') }
-
-     if (viewPort.zoomLevel < Math.trunc(-27.25 * 100) / 100) {
-       return true
-     } else {
-       return false
-     }
-   }
-
-   function drawBackground () {
-     if (INTENSIVE_LOG === true) { logger.write('[INFO] drawBackground -> Entering function.') }
-
-     if (thisObject.container.frame.isInViewPort()) {
-       if (window.CHART_ON_FOCUS === '') {
-         window.CHART_ON_FOCUS = exchange + ' ' + market.assetB + '/' + market.assetA
-
-         drawChartsBackgroundImages()
-       }
-     }
-   }
-
-   function draw () {
-     if (INTENSIVE_LOG === true) { logger.write('[INFO] draw -> Entering function.') }
-
-     if (thisObject.container.frame.isInViewPort()) {
-       drawChartsBackground()
-
-       // chartGrid.draw(thisObject.container, timeLineCoordinateSystem)
-
-       timePeriodScale.draw()
-       plotterManager.draw()
-     }
-   }
-
-   function drawChartsBackground () {
-        /* We will paint some transparent background here. */
-
-     let opacity = '0.9'
-
-     let fromPoint = {
-       x: 0,
-       y: 0
-     }
-
-     let toPoint = {
-       x: thisObject.container.frame.width,
-       y: thisObject.container.frame.height
-     }
-
-     fromPoint = transformThisPoint(fromPoint, thisObject.container)
-     toPoint = transformThisPoint(toPoint, thisObject.container)
-
-     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 drawChartsBackgroundImages () {
-     if (INTENSIVE_LOG === true) { logger.write('[INFO] drawChartsBackground -> Entering function.') }
-
-     if (canDrawLogoA === false || canDrawLogoB === false || canDrawLogoExchange === false || canDrawLogoAA === false) { return }
-
-     /* Fist we calculate the corners of the current frame so as not to draw imaages ourside of it */
-
-     let fromPoint = {
-       x: 0,
-       y: 0
-     }
-
-     let toPoint = {
-       x: thisObject.container.frame.width,
-       y: thisObject.container.frame.height
-     }
-
-     fromPoint = transformThisPoint(fromPoint, thisObject.container)
-     toPoint = transformThisPoint(toPoint, thisObject.container)
-
-     /* Second we calculate the points for the images themselves */
-
-     let backgroundLogoPoint1
-     let backgroundLogoPoint2
-
-     let imageHeight = 42
-     let imageWidth = 150
-
-     let MAX_COLUMNS = 16
-     let MAX_ROWS = 7
-     let Y_TOP_MARGIN = 30
-
-     let point1 = {
-       x: viewPort.visibleArea.topLeft.x,
-       y: viewPort.visibleArea.topLeft.y
-     }
-
-     backgroundLogoPoint1 = {
-       x: getDateFromPoint(point1, thisObject.container, timeLineCoordinateSystem).valueOf(),
-       y: getRateFromPoint(point1, thisObject.container, timeLineCoordinateSystem)
-     }
-
-     let point2 = {
-       x: viewPort.visibleArea.topLeft.x + imageWidth * 8,
-       y: viewPort.visibleArea.topLeft.y
-     }
-
-     backgroundLogoPoint2 = {
-       x: getDateFromPoint(point2, thisObject.container, timeLineCoordinateSystem).valueOf(),
-       y: getRateFromPoint(point2, thisObject.container, timeLineCoordinateSystem)
-     }
-
-     let currentCorner = {
-       x: getDateFromPoint(viewPort.visibleArea.topLeft, thisObject.container, timeLineCoordinateSystem).valueOf(),
-       y: getRateFromPoint(viewPort.visibleArea.topLeft, thisObject.container, timeLineCoordinateSystem)
-     }
-
-     currentCorner.x = Math.trunc(currentCorner.x / (backgroundLogoPoint2.x - backgroundLogoPoint1.x)) * (backgroundLogoPoint2.x - backgroundLogoPoint1.x)
-
-     let rowHight = (viewPort.visibleArea.bottomLeft.y - viewPort.visibleArea.topLeft.y) / 4.5
-
-     imagePoint = timeLineCoordinateSystem.transformThisPoint(currentCorner)
-     imagePoint = transformThisPoint(imagePoint, thisObject.container)
-
-     let offSet = 0
-     let imagePosition = {
-       x: 0,
-       y: 0
-     }
-
-     for (let j = 0; j < MAX_ROWS; j++) {
-       if (offSet === -imageWidth * 8) {
-         offSet = -imageWidth * 4 - imageWidth
-       } else {
-         offSet = -imageWidth * 8
-       }
-
-       for (let i = 0; i < MAX_COLUMNS; i = i + 4) {
-         let logo = logoA
-
-         imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet
-         imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN
-
-         if (
-           imagePosition.x > fromPoint.x &&
-           imagePosition.x + imageWidth < toPoint.x &&
-           imagePosition.y > fromPoint.y &&
-           imagePosition.y + imageHeight < toPoint.y
-         ) {
-           browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight)
-         }
-       }
-     }
-
-     offSet = 0
-
-     for (let j = 0; j < MAX_ROWS; j++) {
-       if (offSet === -imageWidth * 8) {
-         offSet = -imageWidth * 4 - imageWidth
-       } else {
-         offSet = -imageWidth * 8
-       }
-
-       for (let i = 1; i < MAX_COLUMNS; i = i + 4) {
-         let logo = logoB
-
-         imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet
-         imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN
-
-         if (
-           imagePosition.x > fromPoint.x &&
-           imagePosition.x + imageWidth < toPoint.x &&
-           imagePosition.y > fromPoint.y &&
-           imagePosition.y + imageHeight < toPoint.y
-         ) {
-           browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight)
-         }
-       }
-     }
-
-     offSet = 0
-
-     for (let j = 0; j < MAX_ROWS; j++) {
-       if (offSet === -imageWidth * 8) {
-         offSet = -imageWidth * 4 - imageWidth
-       } else {
-         offSet = -imageWidth * 8
-       }
-
-       for (let i = 2; i < MAX_COLUMNS; i = i + 4) {
-         let logo = logoExchange
-
-         imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet
-         imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN
-
-         if (
-           imagePosition.x > fromPoint.x &&
-           imagePosition.x + imageWidth < toPoint.x &&
-           imagePosition.y > fromPoint.y &&
-           imagePosition.y + imageHeight < toPoint.y
-         ) {
-           browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight)
-         }
-       }
-     }
-
-     offSet = 0
-
-     for (let j = 0; j < MAX_ROWS; j++) {
-       if (offSet === -imageWidth * 8) {
-         offSet = -imageWidth * 4 - imageWidth
-       } else {
-         offSet = -imageWidth * 8
-       }
-
-       for (let i = 3; i < MAX_COLUMNS; i = i + 4) {
-         let logo = logoAA
-
-         imagePosition.x = imagePoint.x + i * imageWidth * 2 + offSet
-         imagePosition.y = imagePoint.y + j * rowHight + Y_TOP_MARGIN
-
-         if (
-           imagePosition.x > fromPoint.x &&
-           imagePosition.x + imageWidth < toPoint.x &&
-           imagePosition.y > fromPoint.y &&
-           imagePosition.y + imageHeight < toPoint.y
-         ) {
-           browserCanvasContext.drawImage(logo, imagePosition.x, imagePosition.y, imageWidth, imageHeight)
-         }
-       }
-     }
-   }
- }

Utilities.js

@@ -172,7 +172,7 @@ function loadEmoji (pPath) {
 function printLabel (labelToPrint, x, y, opacity, fontSize) {
   let labelPoint
 
-  browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY  
+  browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
 
   let label = '' + labelToPrint
 
@@ -181,3 +181,10 @@ function printLabel (labelToPrint, x, y, opacity, fontSize) {
   browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + opacity + ')'
   browserCanvasContext.fillText(label, x, y)
 }
+
+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/RoundedCornersBackground.js

@@ -1,30 +1,51 @@
 function roundedCornersBackground (params) {
   borderPoint1 = {
-    x: params.cornerRadious,
-    y: params.cornerRadious
+    x: params.cornerRadius,
+    y: params.cornerRadius
   }
 
   borderPoint2 = {
-    x: params.container.frame.width - params.cornerRadious,
-    y: params.cornerRadious
+    x: params.container.frame.width - params.cornerRadius,
+    y: params.cornerRadius
   }
 
   borderPoint3 = {
-    x: params.container.frame.width - params.cornerRadious,
-    y: params.container.frame.height - params.cornerRadious
+    x: params.container.frame.width - params.cornerRadius,
+    y: params.container.frame.height - params.cornerRadius
   }
 
   borderPoint4 = {
-    x: params.cornerRadious,
-    y: params.container.frame.height - params.cornerRadious
+    x: params.cornerRadius,
+    y: params.container.frame.height - params.cornerRadius
   }
 
       /* Now the transformations. */
 
-  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.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])
 
@@ -35,14 +56,14 @@ function roundedCornersBackground (params) {
 
     browserCanvasContext.beginPath()
 
-    browserCanvasContext.arc(borderPoint1.x + SHADOW_OFFSET, borderPoint1.y + SHADOW_OFFSET, params.cornerRadious, 1.0 * Math.PI, 1.5 * Math.PI)
-    browserCanvasContext.lineTo(borderPoint2.x + SHADOW_OFFSET, borderPoint2.y - params.cornerRadious + SHADOW_OFFSET)
-    browserCanvasContext.arc(borderPoint2.x + SHADOW_OFFSET, borderPoint2.y + SHADOW_OFFSET, params.cornerRadious, 1.5 * Math.PI, 2.0 * Math.PI)
-    browserCanvasContext.lineTo(borderPoint3.x + params.cornerRadious + SHADOW_OFFSET, borderPoint3.y + SHADOW_OFFSET)
-    browserCanvasContext.arc(borderPoint3.x + SHADOW_OFFSET, borderPoint3.y + SHADOW_OFFSET, params.cornerRadious, 0 * Math.PI, 0.5 * Math.PI)
-    browserCanvasContext.lineTo(borderPoint4.x + SHADOW_OFFSET, borderPoint4.y + params.cornerRadious + SHADOW_OFFSET)
-    browserCanvasContext.arc(borderPoint4.x + SHADOW_OFFSET, borderPoint4.y + SHADOW_OFFSET, params.cornerRadious, 0.5 * Math.PI, 1.0 * Math.PI)
-    browserCanvasContext.lineTo(borderPoint1.x - params.cornerRadious + SHADOW_OFFSET, borderPoint1.y + SHADOW_OFFSET)
+    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()
 
@@ -63,14 +84,14 @@ function roundedCornersBackground (params) {
 
   browserCanvasContext.beginPath()
 
-  browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, params.cornerRadious, 1.0 * Math.PI, 1.5 * Math.PI)
-  browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - params.cornerRadious)
-  browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, params.cornerRadious, 1.5 * Math.PI, 2.0 * Math.PI)
-  browserCanvasContext.lineTo(borderPoint3.x + params.cornerRadious, borderPoint3.y)
-  browserCanvasContext.arc(borderPoint3.x, borderPoint3.y, params.cornerRadious, 0 * Math.PI, 0.5 * Math.PI)
-  browserCanvasContext.lineTo(borderPoint4.x, borderPoint4.y + params.cornerRadious)
-  browserCanvasContext.arc(borderPoint4.x, borderPoint4.y, params.cornerRadious, 0.5 * Math.PI, 1.0 * Math.PI)
-  browserCanvasContext.lineTo(borderPoint1.x - params.cornerRadious, borderPoint1.y)
+  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()
 
@@ -82,4 +103,3 @@ function roundedCornersBackground (params) {
   browserCanvasContext.strokeStyle = 'rgba(' + params.borderColor + ', ' + params.opacity + ')'
   browserCanvasContext.stroke()
 }
-