Merge pull request #109 from AAMasters/develop

Release to Master Branch

Animation.js

@@ -61,11 +61,11 @@ function newAnimation () {
     try {
       if (window.canvasApp.visible === true) {
         /* We set the canvas to its normal width and height */
-        browserCanvas.width = window.innerWidth
-        browserCanvas.height = window.innerHeight - CURRENT_TOP_MARGIN
+        // browserCanvas.width = window.innerWidth
+        // browserCanvas.height = window.innerHeight - CURRENT_TOP_MARGIN
 
         /* First thing is to clear the actual canvas */
-        // clearBrowserCanvas()
+        clearBrowserCanvas()
 
         /* We loop through the callback functions collections and execute them all. */
         let performanceMap = new Map()
@@ -139,6 +139,7 @@ function newAnimation () {
       }
 
       /* Media Recording */
+      videoRecorder.physics()
       if (areWeRecording === true) {
         videoRecorder.recordCanvas()
       }
@@ -161,12 +162,7 @@ function newAnimation () {
   }
 
   function clearBrowserCanvas () {
-    browserCanvasContext.beginPath()
-
-    browserCanvasContext.rect(0, 0, browserCanvas.width, browserCanvas.height)
     browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
-
-    browserCanvasContext.closePath()
-    browserCanvasContext.fill()
+    browserCanvasContext.clearRect(0, 0, browserCanvas.width, browserCanvas.height)
   }
 }

Canvas.js

@@ -250,6 +250,29 @@ function newCanvas () {
     thisObject.mouse.action = 'key down'
 
     checkMediaRecording(event)
+    canvas.chartingSpace.onKeyPressed(event)
+
+    if (event.key === 'Escape' && canvas.floatingSpace.inMapMode === true) {
+      canvas.floatingSpace.exitMapMode()
+    }
+
+    if (event.shiftKey === true && (event.ctrlKey === true || event.metaKey === true) && (event.key === 'M' || event.key === 'm')) {
+      canvas.floatingSpace.toggleMapMode()
+      event.preventDefault()
+      return
+    }
+
+    if (event.shiftKey === true && (event.ctrlKey === true || event.metaKey === true) && (event.key === 'R' || event.key === 'r')) {
+      canvas.floatingSpace.toggleDrawReferenceLines()
+      event.preventDefault()
+      return
+    }
+
+    if (event.shiftKey === true && (event.ctrlKey === true || event.metaKey === true) && (event.key === 'C' || event.key === 'c')) {
+      canvas.floatingSpace.toggleDrawChainLines()
+      event.preventDefault()
+      return
+    }
 
     let nodeOnFocus = canvas.designSpace.workspace.getNodeThatIsOnFocus()
     if (nodeOnFocus !== undefined) {
@@ -377,7 +400,7 @@ function newCanvas () {
 
     if ((event.ctrlKey === true || event.metaKey === true) && event.altKey === true) {
       if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 65 && event.keyCode <= 90)) {
-        /* From here we prevent the default behaviour */
+        /* From here we prevent the default behaviour. Putting it earlier prevents imput box and text area to receive keystrokes */
         event.preventDefault()
 
         let nodeUsingThisKey = canvas.designSpace.workspace.getNodeByShortcutKey(event.key)
@@ -548,13 +571,17 @@ function newCanvas () {
 
            /* We check if the mouse is over a panel/ */
 
-      container = thisObject.panelsSpace.getContainer(point)
+      container = thisObject.panelsSpace.getContainer(point, GET_CONTAINER_PURPOSE.DRAGGING)
 
-      if (container !== undefined && container.isDraggeable === true && event.shiftKey === false) {
-        containerBeingDragged = container
-        containerDragStarted = true
-        containerBeingDragged.eventHandler.raiseEvent('onDragStarted', point)
-        return
+      if (container !== undefined && event.shiftKey === false) {
+        if (container.isDraggeable === true) {
+          containerBeingDragged = container
+          containerDragStarted = true
+          containerBeingDragged.eventHandler.raiseEvent('onDragStarted', point)
+          return
+        } else {
+          return
+        }
       }
 
       if (container !== undefined && container.isClickeable === true) {
@@ -574,7 +601,9 @@ function newCanvas () {
           return
         } else {
           if (container.isClickeable === false) {
-            viewPortBeingDragged = true
+            if (event.buttons === 2) {
+              viewPortBeingDragged = true
+            }
           }
           return
         }
@@ -587,6 +616,12 @@ function newCanvas () {
         containerDragStarted = true
         floatingObjectDragStarted = true
         containerBeingDragged.eventHandler.raiseEvent('onDragStarted', point)
+
+        if (event.candelDragging === true) {
+          containerBeingDragged = undefined
+          containerDragStarted = false
+          floatingObjectDragStarted = false
+        }
         return
       }
 
@@ -641,7 +676,7 @@ function newCanvas () {
 
            /* We check if the mouse is over a panel/ */
 
-      container = thisObject.panelsSpace.getContainer(point)
+      container = thisObject.panelsSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_CLICK)
 
       if (container !== undefined && container.isClickeable === true) {
         container.eventHandler.raiseEvent('onMouseClick', point)
@@ -751,7 +786,7 @@ function newCanvas () {
 
       let container
 
-      /* We check if the mouse is over an element of the Strategy Space / */
+      /* We check if the mouse is over an element of the Designe Space / */
       if (thisObject.designSpace !== undefined) {
         container = thisObject.designSpace.getContainer(point)
 
@@ -783,7 +818,7 @@ function newCanvas () {
 
        /* We check if the mouse is over a panel/ */
       if (thisObject.panelsSpace !== undefined) {
-        container = thisObject.panelsSpace.getContainer(point)
+        container = thisObject.panelsSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER)
 
         if (container !== undefined && container.detectMouseOver === true) {
           containerFound()
@@ -835,6 +870,9 @@ function newCanvas () {
            // cross-browser wheel delta
       var event = window.event || event // old IE support
       event.delta = Math.max(-1, Math.min(1, event.wheelDelta || -event.detail))
+      if (IS_MAC) {
+        event.delta = event.delta / MAC_AMOUNT_FACTOR
+      }
 
            /* We try first with panels. */
 
@@ -900,7 +938,7 @@ function newCanvas () {
      floatingObjectDragStarted ||
      viewPortBeingDragged
      ) {
-        ignoreNextClick = true
+        ignoreNextClick = false
       }
            /* Turn off all the possible things that can be dragged. */
 
@@ -922,10 +960,12 @@ function newCanvas () {
   function checkDrag (event) {
     try {
       if (containerDragStarted === true || floatingObjectDragStarted === true || viewPortBeingDragged === true) {
-        thisObject.mouse.event = event
-        thisObject.mouse.position.x = event.pageX
-        thisObject.mouse.position.y = event.pageY - CURRENT_TOP_MARGIN
-        thisObject.mouse.action = 'dragging'
+        if (event !== undefined) {
+          thisObject.mouse.event = event
+          thisObject.mouse.position.x = event.pageX
+          thisObject.mouse.position.y = event.pageY - CURRENT_TOP_MARGIN
+          thisObject.mouse.action = 'dragging'
+        }
 
         browserCanvas.style.cursor = 'grabbing'
         thisObject.eventHandler.raiseEvent('Dragging', undefined)

ChartingSpace/EdgeEditor.js

@@ -5,6 +5,9 @@ function newEdgeEditor () {
     container: undefined,
     fitFunction: undefined,
     isVisible: true,
+    isMouseOver: undefined,
+    resetAspectRatio: resetAspectRatio,
+    onKeyPressed: onKeyPressed,
     physics: physics,
     drawForeground: drawForeground,
     getContainer: getContainer,
@@ -22,11 +25,11 @@ function newEdgeEditor () {
   thisObject.container.isWheelable = false
   thisObject.container.detectMouseOver = true
 
-  let buttonUsedForDragging
-  let isMouseOver
+  let whatHappened
   let whereIsMouseOver = 'outside'
 
   let coordinateSystem
+  let coordinateSystemWhenDragStarted
 
   let onMouseOverEventSubscriptionId
   let onMouseNotOverEventSubscriptionId
@@ -38,6 +41,25 @@ function newEdgeEditor () {
       y: 0
     }
   }
+
+  mouseWhenDragStarted = {
+    position: {
+      x: 0,
+      y: 0
+    }
+  }
+
+  parentFrameWhenDragStarted = {
+    position: {
+      x: 0,
+      y: 0
+    },
+    width: 0,
+    height: 0
+  }
+
+  let doubleClickCounter = 0
+
   return thisObject
 
   function finalize () {
@@ -49,6 +71,16 @@ function newEdgeEditor () {
     thisObject.container = undefined
     thisObject.fitFunction = undefined
     mouse = undefined
+    mouseWhenDragStarted = undefined
+    parentFrameWhenDragStarted = undefined
+
+    coordinateSystem = undefined
+
+    if (coordinateSystemWhenDragStarted !== undefined) {
+      coordinateSystemWhenDragStarted.finalize()
+    }
+
+    coordinateSystemWhenDragStarted = undefined
   }
 
   function initialize (pCoordinateSystem) {
@@ -60,7 +92,7 @@ function newEdgeEditor () {
   }
 
   function onMouseOver (event) {
-    isMouseOver = true
+    thisObject.isMouseOver = true
     mouse = {
       position: {
         x: event.x,
@@ -70,24 +102,121 @@ function newEdgeEditor () {
   }
 
   function onMouseNotOver () {
-    isMouseOver = false
+    thisObject.isMouseOver = false
+  }
+
+  function resetAspectRatio () {
+  /* Resize the Time Machine to match the current screen aspect ration */
+
+    thisObject.container.parentContainer.frame.width = browserCanvas.width / TIME_MACHINE_WIDTH
+    thisObject.container.parentContainer.frame.height = (browserCanvas.height - TOP_SPACE_HEIGHT - COCKPIT_SPACE_HEIGHT) / TIME_MACHINE_HEIGHT
+    coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height
+    coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width
+    coordinateSystem.recalculateScale()
+    thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
+  }
+
+  function onDoubleClick (event) {
+    doubleClickCounter = 0
+    if (canvas.chartingSpace.viewport.zoomLevel === DOUBLE_CLICK_ZOOM_OUT_LEVEL) {
+      canvas.chartingSpace.viewport.displaceToContainer(thisObject.container.parentContainer)
+      canvas.chartingSpace.viewport.zoomAtCenter(DOUBLE_CLICK_ZOOM_IN_LEVEL)
+      return
+    }
+    if (canvas.chartingSpace.viewport.zoomLevel === DOUBLE_CLICK_ZOOM_IN_LEVEL) {
+      canvas.chartingSpace.viewport.zoomAtCenter(DOUBLE_CLICK_ZOOM_IN_IN_LEVEL)
+      return
+    }
   }
 
   function onDragStarted (event) {
+    if (doubleClickCounter > 0) {
+      onDoubleClick(event)
+      return
+    } else {
+      doubleClickCounter = 50
+    }
+
+    mouseWhenDragStarted = {
+      position: {
+        x: event.x,
+        y: event.y
+      }
+    }
+
+    parentFrameWhenDragStarted = {
+      position: {
+        x: thisObject.container.parentContainer.frame.position.x,
+        y: thisObject.container.parentContainer.frame.position.y
+      },
+      width: thisObject.container.parentContainer.frame.width,
+      height: thisObject.container.parentContainer.frame.height
+    }
+
+    coordinateSystemWhenDragStarted = newCoordinateSystem()
+
+    let minValue = {
+      x: coordinateSystem.min.x,
+      y: coordinateSystem.min.y
+    }
+
+    let maxValue = {
+      x: coordinateSystem.max.x,
+      y: coordinateSystem.max.y
+    }
+
+    coordinateSystemWhenDragStarted.initialize(minValue, maxValue, coordinateSystem.maxWidth, coordinateSystem.maxHeight)
+
     switch (event.buttons) {
       case 1: {
-        buttonUsedForDragging = 'left mouse button'
+        whatHappened = 'left mouse button'
+        if (event.shiftKey === true) {
+          whatHappened = 'left mouse button + SHIFT'
+        }
         break
       }
       case 2: {
-        buttonUsedForDragging = 'right mouse button'
+        whatHappened = 'right mouse button' // this will never happen as of today
         break
       }
     }
   }
 
+  function onKeyPressed (event) {
+    const STEP = 10
+
+    if (event.shiftKey === false && event.code === 'ArrowLeft') {
+      thisObject.container.frame.position.x = thisObject.container.frame.position.x + STEP
+      whatHappened = 'left or right arrow key pressed'
+      return
+    }
+
+    if (event.shiftKey === false && event.code === 'ArrowRight') {
+      thisObject.container.frame.position.x = thisObject.container.frame.position.x - STEP
+      whatHappened = 'left or right arrow key pressed'
+      return
+    }
+
+    if (event.shiftKey === false && event.code === 'ArrowUp') {
+      thisObject.container.frame.position.y = thisObject.container.frame.position.y + STEP
+      whatHappened = 'up or down arrow key pressed'
+      return
+    }
+
+    if (event.shiftKey === false && event.code === 'ArrowDown') {
+      thisObject.container.frame.position.y = thisObject.container.frame.position.y - STEP
+      whatHappened = 'up or down arrow key pressed'
+      return
+    }
+
+    if (event.shiftKey === true && (event.ctrlKey === true || event.metaKey === true) && (event.key === 'A' || event.key === 'a')) {
+      resetAspectRatio()
+      return
+    }
+  }
+
   function getContainer (event, purpose) {
-    if (thisObject.container.frame.isThisPointHere(event, undefined, undefined, -EDGE_SIZE) === true && event.shiftKey !== true) {
+    if (thisObject.container.frame.isThisPointHere(event, undefined, undefined, -EDGE_SIZE) === true && event.buttons !== 2) {
       let point = {
         x: event.x,
         y: event.y
@@ -127,8 +256,28 @@ function newEdgeEditor () {
   }
 
   function physics () {
+    draggingPhysics()
+    doubleClickPhysics()
+  }
+
+  function doubleClickPhysics () {
+    doubleClickCounter--
+    if (doubleClickCounter < 0) {
+      doubleClickCounter = 0
+    }
+  }
+
+  function draggingPhysics () {
     if (thisObject.container.frame.position.x === 0 && thisObject.container.frame.position.y === 0) { return }
 
+    let mouseNoZoom = canvas.chartingSpace.viewport.unTransformThisPoint(mouse.position)
+    let mouseWhenDragStartedNoZoom = canvas.chartingSpace.viewport.unTransformThisPoint(mouseWhenDragStarted.position)
+
+    let dragVectorWhenDragStarted = {
+      x: mouseNoZoom.x - mouseWhenDragStartedNoZoom.x,
+      y: mouseNoZoom.y - mouseWhenDragStartedNoZoom.y
+    }
+
     let dragVector = {
       x: thisObject.container.frame.position.x,
       y: thisObject.container.frame.position.y
@@ -137,28 +286,31 @@ function newEdgeEditor () {
     thisObject.container.frame.position.x = 0
     thisObject.container.frame.position.y = 0
 
-    const MIN_WIDTH = 100
-    const MIN_HEIGHT = 50
+    const MIN_WIDTH = 200
+    const MIN_HEIGHT = 100
 
     switch (whereIsMouseOver) {
       case 'center': {
-        switch (buttonUsedForDragging) {
-          case 'right mouse button': {
+        switch (whatHappened) {
+          case 'left mouse button + SHIFT': {
             /* This is equivalent to drag the whole Time Machine, so we will apply the translation received onto the Time Machine container. */
-            thisObject.container.parentContainer.frame.position.x = thisObject.container.parentContainer.frame.position.x + dragVector.x
-            thisObject.container.parentContainer.frame.position.y = thisObject.container.parentContainer.frame.position.y + dragVector.y
+            thisObject.container.parentContainer.frame.position.x = parentFrameWhenDragStarted.position.x + dragVectorWhenDragStarted.x
+            thisObject.container.parentContainer.frame.position.y = parentFrameWhenDragStarted.position.y + dragVectorWhenDragStarted.y
+            snapPointToGrid(thisObject.container.parentContainer.frame.position)
             thisObject.container.parentContainer.eventHandler.raiseEvent('onDisplace')
             break
           }
           case 'left mouse button': {
             let point = {
-              x: -dragVector.x,
-              y: -dragVector.y
+              x: (-dragVectorWhenDragStarted.x),
+              y: (-dragVectorWhenDragStarted.y)
             }
-            let newMinDate = getDateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
-            let newMaxRate = getRateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
-            let xDifferenceMaxMin = coordinateSystem.max.x - coordinateSystem.min.x
-            let yDifferenceMaxMin = coordinateSystem.max.y - coordinateSystem.min.y
+
+            let newMinDate = getDateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystemWhenDragStarted)
+            let newMaxRate = getRateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystemWhenDragStarted)
+
+            let xDifferenceMaxMin = coordinateSystemWhenDragStarted.max.x - coordinateSystemWhenDragStarted.min.x
+            let yDifferenceMaxMin = coordinateSystemWhenDragStarted.max.y - coordinateSystemWhenDragStarted.min.y
             coordinateSystem.min.x = newMinDate.valueOf()
             coordinateSystem.max.x = newMinDate.valueOf() + xDifferenceMaxMin
             coordinateSystem.min.y = newMaxRate - yDifferenceMaxMin
@@ -169,25 +321,67 @@ function newEdgeEditor () {
             }
             coordinateSystem.recalculateScale(event)
           }
+            break
+          case 'left or right arrow key pressed': {
+            let point = {
+              x: -dragVector.x,
+              y: 0
+            }
+
+            let newMinDate = getDateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
+            let xDifferenceMaxMin = coordinateSystem.max.x - coordinateSystem.min.x
+            coordinateSystem.min.x = newMinDate.valueOf()
+            coordinateSystem.max.x = newMinDate.valueOf() + xDifferenceMaxMin
+            let event = {
+              type: 'center dragged',
+              dragVector: dragVector
+            }
+            coordinateSystem.recalculateScale(event)
+          }
+            break
+          case 'up or down arrow key pressed': {
+            let point = {
+              x: 0,
+              y: -dragVector.y
+            }
+
+            let newMaxRate = getRateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
+            let yDifferenceMaxMin = coordinateSystem.max.y - coordinateSystem.min.y
+            coordinateSystem.min.y = newMaxRate - yDifferenceMaxMin
+            coordinateSystem.max.y = newMaxRate
+            let event = {
+              type: 'center dragged',
+              dragVector: dragVector
+            }
+            coordinateSystem.recalculateScale(event)
+          }
+            break
         }
         thisObject.container.parentContainer.eventHandler.raiseEvent('onMouseOver', mouse.position)
         break
       }
       case 'top' : {
-        if (thisObject.container.parentContainer.frame.height - dragVector.y < MIN_HEIGHT && dragVector.y > 0) {
-          return
+        dragVectorWhenDragStarted.x = 0
+
+        let newHight = parentFrameWhenDragStarted.height - dragVectorWhenDragStarted.y
+        if (newHight < MIN_HEIGHT && dragVectorWhenDragStarted.y > 0) {
+          dragVectorWhenDragStarted.y = parentFrameWhenDragStarted.height - MIN_HEIGHT
         }
 
+        thisObject.container.parentContainer.frame.position.y = parentFrameWhenDragStarted.position.y + dragVectorWhenDragStarted.y
+        snapPointToGrid(thisObject.container.parentContainer.frame.position)
+        thisObject.container.parentContainer.frame.height = parentFrameWhenDragStarted.height + (parentFrameWhenDragStarted.position.y - thisObject.container.parentContainer.frame.position.y)
+
         let point = {
-          x: dragVector.x,
-          y: dragVector.y
+          x: 0,
+          y: (thisObject.container.parentContainer.frame.position.y - parentFrameWhenDragStarted.position.y)
         }
-        let newMaxRate = getRateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
 
-        thisObject.container.parentContainer.frame.position.y = thisObject.container.parentContainer.frame.position.y + dragVector.y
-        thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height - dragVector.y
+        /* This is equivalent to getRateFromPointAtContainer, but as we do not have a container anymore because we already change it, we do it like this. */
+        point = coordinateSystemWhenDragStarted.unInverseTransform(point, parentFrameWhenDragStarted.height)
+        let newMaxRate = point.y
 
-        switch (buttonUsedForDragging) {
+        switch (whatHappened) {
           case 'left mouse button': {
             coordinateSystem.max.y = newMaxRate
             coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height
@@ -198,7 +392,7 @@ function newEdgeEditor () {
             coordinateSystem.recalculateScale(event)
             break
           }
-          case 'right mouse button': {
+          case 'left mouse button + SHIFT': {
             coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height
             coordinateSystem.recalculateScale()
             break
@@ -208,19 +402,27 @@ function newEdgeEditor () {
         break
       }
       case 'bottom' : {
-        if (thisObject.container.parentContainer.frame.height + dragVector.y < MIN_HEIGHT && dragVector.y < 0) {
-          return
+        dragVectorWhenDragStarted.x = 0
+
+        let newHight = dragVectorWhenDragStarted.y + parentFrameWhenDragStarted.height
+        if (newHight < MIN_HEIGHT && dragVectorWhenDragStarted.y < 0) {
+          dragVectorWhenDragStarted.y = MIN_HEIGHT - parentFrameWhenDragStarted.height
         }
 
         let point = {
-          x: dragVector.x,
-          y: dragVector.y + thisObject.container.frame.height
+          x: 0,
+          y: dragVectorWhenDragStarted.y + parentFrameWhenDragStarted.height + parentFrameWhenDragStarted.position.y
         }
-        let newMinRate = getRateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
+        snapPointToGrid(point)
+        point.y = point.y - parentFrameWhenDragStarted.position.y
 
-        thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height + dragVector.y
+        thisObject.container.parentContainer.frame.height = point.y
 
-        switch (buttonUsedForDragging) {
+        /* This is equivalent to getRateFromPointAtContainer, but as we do not have a container anymore because we already change it, we do it like this. */
+        point = coordinateSystemWhenDragStarted.unInverseTransform(point, parentFrameWhenDragStarted.height)
+        let newMinRate = point.y
+
+        switch (whatHappened) {
           case 'left mouse button': {
             coordinateSystem.min.y = newMinRate
             coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height
@@ -231,7 +433,7 @@ function newEdgeEditor () {
             coordinateSystem.recalculateScale(event)
             break
           }
-          case 'right mouse button': {
+          case 'left mouse button + SHIFT': {
             coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height
             coordinateSystem.recalculateScale()
             break
@@ -241,26 +443,34 @@ function newEdgeEditor () {
         break
       }
       case 'left' : {
-        if (thisObject.container.parentContainer.frame.width - dragVector.x < MIN_WIDTH && dragVector.x > 0) {
-          return
+        dragVectorWhenDragStarted.y = 0
+
+        let newWidth = parentFrameWhenDragStarted.width - dragVectorWhenDragStarted.x
+        if (newWidth < MIN_WIDTH && dragVectorWhenDragStarted.x > 0) {
+          dragVectorWhenDragStarted.x = parentFrameWhenDragStarted.width - MIN_WIDTH
         }
+
+        thisObject.container.parentContainer.frame.position.x = parentFrameWhenDragStarted.position.x + dragVectorWhenDragStarted.x
+        snapPointToGrid(thisObject.container.parentContainer.frame.position)
+        thisObject.container.parentContainer.frame.width = parentFrameWhenDragStarted.width + (parentFrameWhenDragStarted.position.x - thisObject.container.parentContainer.frame.position.x)
+
         let point = {
-          x: dragVector.x,
-          y: dragVector.y
+          x: (thisObject.container.parentContainer.frame.position.x - parentFrameWhenDragStarted.position.x),
+          y: 0
         }
-        let newMinDate = getDateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
 
-        thisObject.container.parentContainer.frame.position.x = thisObject.container.parentContainer.frame.position.x + dragVector.x
-        thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width - dragVector.x
+        /* This is equivalent to getDateFromPointAtContainer, but as we do not have a container anymore because we already change it, we do it like this. */
+        point = coordinateSystemWhenDragStarted.unInverseTransform(point, parentFrameWhenDragStarted.width)
+        let newMinDate = point.x
 
-        switch (buttonUsedForDragging) {
+        switch (whatHappened) {
           case 'left mouse button': {
             coordinateSystem.min.x = newMinDate.valueOf()
             coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width
             coordinateSystem.recalculateScale()
             break
           }
-          case 'right mouse button': {
+          case 'left mouse button + SHIFT': {
             coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width
             coordinateSystem.recalculateScale()
             break
@@ -270,26 +480,34 @@ function newEdgeEditor () {
         break
       }
       case 'right' : {
-        if (thisObject.container.parentContainer.frame.width + dragVector.x < MIN_WIDTH && dragVector.x < 0) {
-          return
+        dragVectorWhenDragStarted.y = 0
+
+        let newWidth = dragVectorWhenDragStarted.x + parentFrameWhenDragStarted.width
+        if (newWidth < MIN_WIDTH && dragVectorWhenDragStarted.x < 0) {
+          dragVectorWhenDragStarted.x = MIN_WIDTH - parentFrameWhenDragStarted.width
         }
 
         let point = {
-          x: dragVector.x + thisObject.container.frame.width,
-          y: dragVector.y
+          x: dragVectorWhenDragStarted.x + parentFrameWhenDragStarted.width + parentFrameWhenDragStarted.position.x,
+          y: 0
         }
-        let newMaxDate = getDateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
+        snapPointToGrid(point)
+        point.x = point.x - parentFrameWhenDragStarted.position.x
 
-        thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width + dragVector.x
+        thisObject.container.parentContainer.frame.width = point.x
 
-        switch (buttonUsedForDragging) {
+        /* This is equivalent to getRateFromPointAtContainer, but as we do not have a container anymore because we already change it, we do it like this. */
+        point = coordinateSystemWhenDragStarted.unInverseTransform(point, parentFrameWhenDragStarted.width)
+        let newMaxDate = point.x
+
+        switch (whatHappened) {
           case 'left mouse button': {
             coordinateSystem.max.x = newMaxDate.valueOf()
             coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width
             coordinateSystem.recalculateScale()
             break
           }
-          case 'right mouse button': {
+          case 'left mouse button + SHIFT': {
             coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width
             coordinateSystem.recalculateScale()
             break
@@ -299,6 +517,22 @@ function newEdgeEditor () {
         break
       }
     }
+
+    function snapPointToGrid (point) {
+      point.x = snapScalarToGrid(point.x)
+      point.y = snapScalarToGrid(point.y)
+    }
+
+    function snapScalarToGrid (scalar) {
+      let sign
+      if (scalar < 0) {
+        sign = -1
+      } else {
+        sign = 1
+      }
+      const GRID_SIZE = 10
+      return Math.trunc(scalar / GRID_SIZE) * GRID_SIZE + GRID_SIZE / 2 * sign
+    }
   }
 
   function drawForeground () {
@@ -306,8 +540,8 @@ function newEdgeEditor () {
     let edgeSize
     let lineWidth
 
-    if (whereIsMouseOver === 'outside' || isMouseOver === false) {
-      edgeSize = EDGE_SIZE / 2
+    if (whereIsMouseOver === 'outside' || thisObject.isMouseOver === false) {
+      edgeSize = 2
       lineWidth = 0.1
     } else {
       edgeSize = EDGE_SIZE
@@ -459,7 +693,7 @@ function newEdgeEditor () {
     drawEdge('left')
 
     function drawEdge (edgeType) {
-      if (whereIsMouseOver === edgeType && isMouseOver === true) {
+      if (whereIsMouseOver === edgeType && thisObject.isMouseOver === true) {
         browserCanvasContext.lineWidth = lineWidth
         browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + OPACITY + ')'
         browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')'

ChartingSpace/PlottersManager.js

@@ -301,9 +301,16 @@ function newPlottersManager () {
   function draw () {
     if (thisObject.connectors === undefined) { return } // We need to wait
         /* First the Product Plotters. */
+    let maxElementsPlotted = 0
     for (let i = 0; i < thisObject.connectors.length; i++) {
       let connector = thisObject.connectors[thisObject.connectors.length - i - 1]
-      connector.plotter.draw()
+      let elementsPlotted = connector.plotter.draw()
+      if (elementsPlotted !== undefined) {
+        if (elementsPlotted > maxElementsPlotted) {
+          maxElementsPlotted = elementsPlotted
+        }
+      }
     }
+    return maxElementsPlotted
   }
 }

ChartingSpace/TimeMachine.js

@@ -22,6 +22,8 @@ function newTimeMachine () {
     rateScale: undefined,
     payload: undefined,
     edgeEditor: undefined,
+    onFocus: undefined,
+    onKeyPressed: onKeyPressed,
     timelineCharts: [],
     fitFunction: fitFunction,
     physics: physics,
@@ -42,12 +44,14 @@ function newTimeMachine () {
     }
   }
 
+  let tabAnimation = 0
+  let tabAnimationStatus = 'Close'
+  let tabAnimationCounter = 0
+  let wasOnFocus = false
   let drawScales = false
   let syncWithDesignerLoop = 0
   let timelineChartsMap = new Map()
 
-  let onViewportPositionChangedEventSuscriptionId
-  let onViewportZoomChangedEventSuscriptionId
   let onMouseOverEventSuscriptionId
   let onMouseNotOverEventSuscriptionId
   let timeScaleMouseOverEventSuscriptionId
@@ -67,13 +71,11 @@ function newTimeMachine () {
     thisObject.container.insideViewport = true
     thisObject.container.detectMouseOver = true
 
-    thisObject.container.frame.width = TIME_MACHINE_WIDTH
-    thisObject.container.frame.height = TIME_MACHINE_HEIGHT
+    thisObject.container.frame.width = browserCanvas.width / TIME_MACHINE_WIDTH
+    thisObject.container.frame.height = (browserCanvas.height - TOP_SPACE_HEIGHT - COCKPIT_SPACE_HEIGHT) / TIME_MACHINE_HEIGHT
   }
 
   function finalize () {
-    canvas.chartingSpace.viewport.eventHandler.stopListening(onViewportPositionChangedEventSuscriptionId)
-    canvas.chartingSpace.viewport.eventHandler.stopListening(onViewportZoomChangedEventSuscriptionId)
     timeMachineCoordinateSystem.eventHandler.stopListening(onScaleChangedEventSubscriptionId)
 
     if (thisObject.timeScale !== undefined) {
@@ -146,8 +148,6 @@ function newTimeMachine () {
 
     onMouseOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
     onMouseNotOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
-    onViewportPositionChangedEventSuscriptionId = canvas.chartingSpace.viewport.eventHandler.listenToEvent('Position Changed', onViewportPositionChanged)
-    onViewportZoomChangedEventSuscriptionId = canvas.chartingSpace.viewport.eventHandler.listenToEvent('Zoom Changed', onViewportZoomChanged)
     onScaleChangedEventSubscriptionId = timeMachineCoordinateSystem.eventHandler.listenToEvent('Scale Changed', onScaleChanged)
 
     thisObject.edgeEditor = newEdgeEditor()
@@ -157,6 +157,10 @@ function newTimeMachine () {
     callBackFunction()
   }
 
+  function onKeyPressed (event) {
+    thisObject.edgeEditor.onKeyPressed(event)
+  }
+
   function onMouseOver (event) {
     drawScales = true
 
@@ -308,36 +312,17 @@ function newTimeMachine () {
     }
   }
 
-  function onViewportZoomChanged (event) {
-    if (thisObject.container.frame.isInViewPort()) {
-      recalculateCurrentDatetime()
-    }
-  }
-
-  function onViewportPositionChanged () {
-    if (thisObject.container.frame.isInViewPort()) {
-      recalculateCurrentDatetime()
-    }
-  }
-
   function onScaleChanged () {
     recalculateCurrentDatetime()
   }
 
   function recalculateCurrentDatetime () {
-     /*
-     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: (canvas.chartingSpace.viewport.visibleArea.bottomRight.x - canvas.chartingSpace.viewport.visibleArea.bottomLeft.x) / 2,
-      y: (canvas.chartingSpace.viewport.visibleArea.bottomRight.y - canvas.chartingSpace.viewport.visibleArea.topRight.y) / 2
+      x: thisObject.container.frame.width / 2,
+      y: thisObject.container.frame.height / 2
     }
 
-    center = unTransformThisPoint(center, thisObject.container)
-    center = timeMachineCoordinateSystem.unInverseTransform(center, thisObject.container.frame.height)
-
-    datetime = new Date(center.x)
+    datetime = new Date(getDateFromPointAtContainer(center, thisObject.container, timeMachineCoordinateSystem))
 
     for (let i = 0; i < thisObject.timelineCharts.length; i++) {
       let timelineChart = thisObject.timelineCharts[i]
@@ -391,10 +376,59 @@ function newTimeMachine () {
       syncWithDesigner()
     }
     panelPhysics()
+    onFocusPhysics()
+    tabAnimationPhysics()
+  }
+
+  function tabAnimationPhysics () {
+    const MAX_COUNTER_VALUE = 40
+    const STEP = 10
+
+    if (wasOnFocus === true && thisObject.onFocus === false) {
+      tabAnimationStatus = 'Closing'
+    }
+    if (wasOnFocus === false && thisObject.onFocus === true) {
+      tabAnimationStatus = 'Opening'
+    }
+
+    if (tabAnimationStatus === 'Closing') {
+      tabAnimationCounter = tabAnimationCounter - STEP
+      if (tabAnimationCounter <= 0) {
+        tabAnimationCounter = 0
+        tabAnimationStatus = 'Closed'
+      }
+    }
+    if (tabAnimationStatus === 'Opening') {
+      tabAnimationCounter = tabAnimationCounter + STEP
+      if (tabAnimationCounter >= MAX_COUNTER_VALUE) {
+        tabAnimationCounter = MAX_COUNTER_VALUE
+        tabAnimationStatus = 'Open'
+      }
+    }
+  }
+
+  function onFocusPhysics () {
+    wasOnFocus = thisObject.onFocus
+    if (thisObject.edgeEditor.isMouseOver === true) {
+      thisObject.onFocus = true
+    } else {
+      thisObject.onFocus = false
+    }
   }
 
   function panelPhysics () {
-    if (thisObject.container.frame.isInViewPort() && canvas.chartingSpace.viewport.zoomTargetLevel > ZOOM_OUT_THRESHOLD_FOR_HIDDING_PANELS) {
+    if (
+      thisObject.container.frame.isInViewPort() &&
+      canvas.chartingSpace.viewport.zoomLevel >= ZOOM_OUT_THRESHOLD_FOR_NOT_HIDDING_PANELS) {
+      canvas.panelsSpace.unHide(thisObject.payload.node.id, 'Layers Panel')
+      canvas.panelsSpace.unHide(thisObject.payload.node.id, 'Plotter Panel')
+      return
+    }
+
+    if (
+      thisObject.container.frame.isCenterInViewPort() &&
+      canvas.chartingSpace.viewport.zoomLevel >= ZOOM_OUT_THRESHOLD_FOR_HIDDING_PANELS
+    ) {
       canvas.panelsSpace.unHide(thisObject.payload.node.id, 'Layers Panel')
       canvas.panelsSpace.unHide(thisObject.payload.node.id, 'Plotter Panel')
     } else {
@@ -514,9 +548,23 @@ function newTimeMachine () {
   function drawBackground () {
     drawChartsBackground()
     if (thisObject.container.frame.isInViewPort()) {
+      if (drawScales === true) {
+        if (thisObject.timeScale !== undefined && thisObject.timeScale.isVisible === true) { thisObject.timeScale.drawBackground() }
+        if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) { thisObject.rateScale.drawBackground() }
+      }
+
+      let maxElementsPlotted = 0
       for (let i = 0; i < thisObject.timelineCharts.length; i++) {
         let timelineChart = thisObject.timelineCharts[thisObject.timelineCharts.length - i - 1]
-        timelineChart.drawBackground()
+        let elementsPlotted = timelineChart.drawBackground()
+        if (elementsPlotted !== undefined) {
+          if (elementsPlotted > maxElementsPlotted) {
+            maxElementsPlotted = elementsPlotted
+          }
+        }
+      }
+      if (thisObject.timeFrameScale !== undefined) {
+        thisObject.timeFrameScale.adjustTimeFrame(maxElementsPlotted)
       }
     }
   }
@@ -540,24 +588,26 @@ function newTimeMachine () {
         if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) { thisObject.rateScale.draw() }
       }
     } else {
-      let icon = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type)
-      if (icon !== undefined) {
-        if (icon.canDrawIcon === true) {
-          let imageSize = 40
-          let imagePosition = {
-            x: thisObject.container.frame.width / 2,
-            y: thisObject.container.frame.height / 2
+      if (canvas.chartingSpace.viewport.zoomTargetLevel < ZOOM_OUT_THRESHOLD_FOR_DISPLAYING_TIME_MACHINES_ICONIZED) {
+        let icon = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type)
+        if (icon !== undefined) {
+          if (icon.canDrawIcon === true) {
+            let imageSize = 40
+            let imagePosition = {
+              x: thisObject.container.frame.width / 2,
+              y: thisObject.container.frame.height / 2
+            }
+
+            imagePosition = transformThisPoint(imagePosition, thisObject.container)
+            imagePosition = thisObject.fitFunction(imagePosition, true)
+
+            browserCanvasContext.drawImage(
+               icon,
+               imagePosition.x - imageSize / 2,
+               imagePosition.y - imageSize / 2,
+               imageSize,
+               imageSize)
           }
-
-          imagePosition = transformThisPoint(imagePosition, thisObject.container)
-          imagePosition = thisObject.fitFunction(imagePosition, true)
-
-          browserCanvasContext.drawImage(
-             icon,
-             imagePosition.x - imageSize / 2,
-             imagePosition.y - imageSize / 2,
-             imageSize,
-             imageSize)
         }
       }
     }
@@ -582,28 +632,172 @@ function newTimeMachine () {
   }
 
   function drawLabel () {
+    if (thisObject.payload.node === undefined) { return }
+    if (thisObject.payload === undefined) { return }
   /* Draw Title Above the Container */
     let position = {
       x: 0,
       y: 0
     }
-    let imageSize = 25
-    let fontSize = 25
+    let imageSize = 13
+    let fontSize = 15
     let opacity = 1
     let icon = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type)
 
     position = transformThisPoint(position, thisObject.container)
-    printLabel(thisObject.payload.node.name, position.x + 30, position.y - 10, opacity, fontSize)
+
+    let label = thisObject.payload.node.name
+    let description = loadPropertyFromNodeConfig(thisObject.payload, 'description')
+
+    if (description !== undefined) {
+      label = description
+    }
+    printLabel(label, position.x + 20, position.y - 10, opacity, fontSize)
 
     if (icon !== undefined) {
       if (icon.canDrawIcon === true) {
         browserCanvasContext.drawImage(
-        icon, position.x - 0,
-        position.y - 30,
+        icon, position.x + 5,
+        position.y - 22,
         imageSize,
         imageSize)
       }
     }
+
+    imageSize = 13
+    fontSize = 15
+    let exchangeMarkets = new Map()
+
+    for (let i = 0; i < thisObject.timelineCharts.length; i++) {
+      let timelinechart = thisObject.timelineCharts[i]
+      if (timelinechart.layersManager !== undefined) {
+        for (let j = 0; j < timelinechart.layersManager.layers.length; j++) {
+          let layer = timelinechart.layersManager.layers[j]
+
+          exchangeMarket = {
+            exchangeName: layer.exchange.name,
+            marketName: layer.market,
+            exchangeIcon: layer.exchangeIcon,
+            baseAssetIcon: layer.baseAssetIcon,
+            quotedAssetIcon: layer.quotedAssetIcon
+          }
+          exchangeMarkets.set(exchangeMarket.exchangeName + '-' + exchangeMarket.marketName, exchangeMarket)
+        }
+      }
+    }
+
+    drawTab(0, 0, exchangeMarkets.size * tabAnimationCounter, 90, thisObject.container)
+
+    const INTER_EXCHANGE_SPACE = 60
+    const INTER_MARKET_SPACE = -100
+
+    if (tabAnimationStatus === 'Open') {
+      drawMarketNames()
+    }
+
+    function drawMarketNames () {
+      exchangeMarkets.forEach((exchangeMarket, i) => {
+        browserCanvasContext.save()
+        browserCanvasContext.translate(position.x, position.y)
+        browserCanvasContext.rotate(-Math.PI / 2)
+
+        let xOffSet = -80
+
+        icon = exchangeMarket.exchangeIcon
+
+        if (icon !== undefined) {
+          if (icon.canDrawIcon === true) {
+            browserCanvasContext.drawImage(
+        icon,
+        -20 + xOffSet,
+         -43,
+        imageSize,
+        imageSize)
+          }
+        }
+
+        printLabel(exchangeMarket.exchangeName, -5 + xOffSet, -30, opacity, fontSize, UI_COLOR.GREY)
+
+        position.x = position.x + INTER_EXCHANGE_SPACE
+
+        icon = exchangeMarket.baseAssetIcon
+        if (icon !== undefined) {
+          if (icon.canDrawIcon === true) {
+            browserCanvasContext.drawImage(
+        icon,
+        -20 + xOffSet,
+         -22,
+        imageSize,
+        imageSize)
+          }
+        }
+
+        printLabel(exchangeMarket.marketName, -5 + xOffSet, -10, opacity, fontSize, UI_COLOR.GREY)
+
+        icon = exchangeMarket.quotedAssetIcon
+        if (icon !== undefined) {
+          if (icon.canDrawIcon === true) {
+            browserCanvasContext.drawImage(
+        icon,
+        +50 + xOffSet,
+         -22,
+        imageSize,
+        imageSize)
+          }
+        }
+
+        position.x = position.x + INTER_MARKET_SPACE
+
+        browserCanvasContext.restore()
+      })
+    }
+
+    function drawTab (x, y, width, height, container) {
+      const GRADIENT = 0
+      const X_OFFSET = -3
+      const Y_OFFSET = 13
+      const TAB_CORNERS_RADIUS = 5
+
+      let point = {
+        x: x,
+        y: y
+      }
+      point = transformThisPoint(point, container)
+
+      let point1 = {
+        x: point.x + X_OFFSET,
+        y: point.y + Y_OFFSET
+      }
+
+      let point2 = {
+        x: point.x + X_OFFSET,
+        y: point.y + height + Y_OFFSET
+      }
+
+      let point3 = {
+        x: point.x - width + X_OFFSET,
+        y: point.y + height - GRADIENT + Y_OFFSET
+      }
+
+      let point4 = {
+        x: point.x - width + X_OFFSET,
+        y: point.y + GRADIENT + Y_OFFSET
+      }
+
+      browserCanvasContext.beginPath()
+      browserCanvasContext.moveTo(point1.x, point1.y)
+      browserCanvasContext.lineTo(point2.x, point2.y)
+      browserCanvasContext.lineTo(point3.x, point3.y)
+      browserCanvasContext.arc(point3.x, point3.y - TAB_CORNERS_RADIUS, TAB_CORNERS_RADIUS, 0.5 * Math.PI, 1.0 * Math.PI)
+      // browserCanvasContext.lineTo(point4.x, point4.y)
+      browserCanvasContext.arc(point4.x, point4.y + TAB_CORNERS_RADIUS, TAB_CORNERS_RADIUS, 1.0 * Math.PI, 1.5 * Math.PI)
+      browserCanvasContext.closePath()
+      browserCanvasContext.lineWidth = 1
+      browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ''
+      browserCanvasContext.stroke()
+      browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ''
+      browserCanvasContext.fill()
+    }
   }
 
   function recalculateCoordinateSystem () {

ChartingSpace/TimelineChart.js

@@ -318,6 +318,8 @@ function newTimelineChart () {
   }
 
   function thisObjectPhysics () {
+    timelineChartCoordinateSystem.reportXValue(timeMachineCoordinateSystem.min.x)
+    timelineChartCoordinateSystem.reportXValue(timeMachineCoordinateSystem.max.x)
     timelineChartCoordinateSystem.physics()
   }
 
@@ -376,9 +378,17 @@ function newTimelineChart () {
 
   function drawBackground () {
     if (thisObject.container.frame.isInViewPort()) {
+      if (drawScales === true) {
+        if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) { thisObject.rateScale.drawBackground() }
+      }
       drawChartsBackground()
       if (thisObject.plotterManager !== undefined) {
-        thisObject.plotterManager.draw()
+        let elementsPlotted = thisObject.plotterManager.draw()
+        if (thisObject.timeFrameScale !== undefined) {
+          thisObject.timeFrameScale.adjustTimeFrame(elementsPlotted)
+        } else {
+          return elementsPlotted
+        }
       }
     }
   }

ChartingSpace/Viewport.js

@@ -20,6 +20,7 @@ function newViewport () {
   }
 
   let thisObject = {
+    visible: false,
     visibleArea: undefined,
     width: undefined,
     height: undefined,
@@ -29,6 +30,7 @@ function newViewport () {
     mousePosition: undefined,
     margins: MARGINS,
     payload: undefined,
+    zoomAtCenter: zoomAtCenter,
     changeZoom: changeZoom,
     onMouseWheel: onMouseWheel,
     transformThisPoint: transformThisPoint,
@@ -38,6 +40,7 @@ function newViewport () {
     fitIntoVisibleArea: fitIntoVisibleArea,
     fitIntoViewport: fitIntoViewport,
     displace: displace,
+    displaceToContainer: displaceToContainer,
     physics: physics,
     raiseEvents: raiseEvents,
     resize: resize,
@@ -49,14 +52,7 @@ function newViewport () {
     x: 0,
     y: 0
   }
-  let targetPosition = {
-    x: 0,
-    y: 0
-  }
-  let positionIncrement = {
-    x: 0,
-    y: 0
-  }
+
   thisObject.mousePosition = {
     x: 0,
     y: 0
@@ -68,6 +64,8 @@ function newViewport () {
   thisObject.zoomTargetLevel = MIN_ZOOM_LEVEL
   INITIAL_TIME_PERIOD = recalculatePeriod(thisObject.zoomLevel)
 
+  let overrideMousePositionCounter = 0
+
   return thisObject
 
   function finalize () {
@@ -128,6 +126,7 @@ function newViewport () {
   }
 
   function raiseEvents () {
+    if (thisObject.visible === false) { return }
     let event = {
       newPosition: position
     }
@@ -135,13 +134,43 @@ function newViewport () {
     thisObject.eventHandler.raiseEvent('Position Changed', event)
   }
 
+  function displaceToContainer (container) {
+    let targetPoint = {
+      x: -container.frame.position.x - container.frame.width / 2,
+      y: -container.frame.position.y - container.frame.height / 2
+    }
+    position.x = targetPoint.x + browserCanvas.width / 2
+    position.y = targetPoint.y + (browserCanvas.height - COCKPIT_SPACE_HEIGHT - TOP_SPACE_HEIGHT) / 2 + TOP_SPACE_HEIGHT
+  }
+
+  function zoomAtCenter (level) {
+    thisObject.zoomTargetLevel = level
+    overrideMousePositionCounter = 50
+    ANIMATION_INCREMENT = 0.5
+  }
+
+  function mousePositionPhysics () {
+    if (overrideMousePositionCounter > 0) {
+      thisObject.mousePosition.x = browserCanvas.width / 2
+      thisObject.mousePosition.y = (browserCanvas.height - TOP_SPACE_HEIGHT - COCKPIT_SPACE_HEIGHT) / 2 + TOP_SPACE_HEIGHT
+
+      overrideMousePositionCounter--
+      if (overrideMousePositionCounter < 0) {
+        overrideMousePositionCounter = 0
+      }
+    }
+  }
+
   function physics () {
+    if (thisObject.visible === false) { return }
+    mousePositionPhysics()
     animationPhysics()
     positioningPhysics()
     readObjectState()
   }
 
   function positioningPhysics () {
+    if (thisObject.visible === false) { return }
     if (thisObject.payload === undefined) { return }
     /* Save the position at the frame lavel */
     let frame = {}
@@ -152,37 +181,28 @@ function newViewport () {
   function animationPhysics () {
     if (thisObject.zoomLevel < thisObject.zoomTargetLevel) {
       if (thisObject.zoomTargetLevel - thisObject.zoomLevel < ANIMATION_INCREMENT) {
-        ANIMATION_INCREMENT = Math.abs(thisObject.zoomTargetLevel - thisObject.zoomLevel)
+        ANIMATION_INCREMENT = Math.round(Math.abs(thisObject.zoomTargetLevel - thisObject.zoomLevel) * 100) / 100
       }
-      thisObject.zoomLevel = thisObject.zoomLevel + ANIMATION_INCREMENT
+      thisObject.zoomLevel = Math.round((thisObject.zoomLevel + ANIMATION_INCREMENT) * 100) / 100
       changeZoom(thisObject.zoomLevel - ANIMATION_INCREMENT, thisObject.zoomLevel)
     }
 
     if (thisObject.zoomLevel > thisObject.zoomTargetLevel) {
       if (thisObject.zoomLevel - thisObject.zoomTargetLevel < ANIMATION_INCREMENT) {
-        ANIMATION_INCREMENT = Math.abs(thisObject.zoomTargetLevel - thisObject.zoomLevel)
+        ANIMATION_INCREMENT = Math.round(Math.abs(thisObject.zoomTargetLevel - thisObject.zoomLevel) * 100) / 100
       }
-      thisObject.zoomLevel = thisObject.zoomLevel - ANIMATION_INCREMENT
+      thisObject.zoomLevel = Math.round((thisObject.zoomLevel - ANIMATION_INCREMENT) * 100) / 100
       changeZoom(thisObject.zoomLevel + ANIMATION_INCREMENT, thisObject.zoomLevel)
     }
-
-    if (positionIncrement.y !== 0) {
-      if (Math.trunc(Math.abs(targetPosition.y - position.y) * 1000) >= Math.trunc(Math.abs(positionIncrement.y) * 1000)) {
-        position.y = position.y + positionIncrement.y
-      } else {
-        positionIncrement.y = 0
-      }
-    }
   }
 
   function onMouseWheel (event) {
+    if (thisObject.visible === false) { return }
     if ((event.ctrlKey === true || event.metaKey === true)) { return }
     let morePower = 1
     let amount = event.delta
     if (event.buttons === 4) { morePower = 2 } // Mouse wheel pressed.
        /* We adjust the sensitivity for Mac Users */
-    let isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0
-    if (isMac) { amount = amount / 5 }
 
     if (thisObject.zoomTargetLevel > 10) {
       amount = amount * 2
@@ -200,9 +220,9 @@ function newViewport () {
     if (thisObject.zoomTargetLevel + amount * morePower < MIN_ZOOM_LEVEL) {
       return false
     }
-    thisObject.zoomTargetLevel = thisObject.zoomTargetLevel + amount * morePower
+    thisObject.zoomTargetLevel = Math.round((thisObject.zoomTargetLevel + amount * morePower) * MAC_AMOUNT_FACTOR) / MAC_AMOUNT_FACTOR
 
-    ANIMATION_INCREMENT = Math.abs(thisObject.zoomTargetLevel - thisObject.zoomLevel) / ANIMATION_STEPS
+    ANIMATION_INCREMENT = Math.round(Math.abs(thisObject.zoomTargetLevel - thisObject.zoomLevel) / ANIMATION_STEPS * 100) / 100
 
     let newEvent = {
       newLevel: thisObject.zoomTargetLevel,
@@ -259,6 +279,7 @@ function newViewport () {
   }
 
   function displace (displaceVector, recalculate) {
+    if (thisObject.visible === false) { return }
     position.x = position.x + displaceVector.x
     position.y = position.y + displaceVector.y
 
@@ -273,28 +294,20 @@ function newViewport () {
   }
 
   function changeZoom (oldLevel, newLevel) {
+    if (thisObject.visible === false) { return }
     let oldMouse = unTransformThisPoint(thisObject.mousePosition, oldLevel)
     let newMouse = transformThisPoint(oldMouse, newLevel)
 
     position.x = position.x - newMouse.x + thisObject.mousePosition.x
     position.y = position.y - newMouse.y + thisObject.mousePosition.y
 
-    let testPoint = unTransformThisPoint(thisObject.mousePosition, newLevel)
-
     saveObjectState()
 
-    targetPosition.x = position.x
-    targetPosition.y = position.y
-
-    positionIncrement = {
-      x: 0,
-      y: 0
-    }
-
     thisObject.eventHandler.raiseEvent('Zoom Changed')
   }
 
   function transformThisPoint (point, level) {
+    if (thisObject.visible === false) { return }
     let transformedPoint = {
       x: 0,
       y: 0
@@ -328,6 +341,7 @@ function newViewport () {
   }
 
   function isThisPointVisible (point) {
+    if (thisObject.visible === false) { return }
     if (point.x < thisObject.visibleArea.topLeft.x || point.x > thisObject.visibleArea.bottomRight.x || point.y < thisObject.visibleArea.topLeft.y || point.y > thisObject.visibleArea.bottomRight.y) {
       return false
     } else {
@@ -336,6 +350,7 @@ function newViewport () {
   }
 
   function isThisPointInViewport (point) {
+    if (thisObject.visible === false) { return }
     if (point.y > COCKPIT_SPACE_POSITION) {
       return false
     } else {
@@ -382,7 +397,7 @@ function newViewport () {
     }
 
     function newZoomLevel (level) {
-      thisObject.zoomLevel = level
+      thisObject.zoomLevel = Math.round(level)
       thisObject.zoomTargetLevel = level
       INITIAL_TIME_PERIOD = recalculatePeriod(level)
       saveObjectState()

CockpitSpace/AssetBalances.js

@@ -1,5 +1,5 @@
 
-function newQuotedAssetalances () {
+function newAssetalances () {
   const MODULE_NAME = 'Asset Balances'
 
   let thisObject = {
@@ -38,6 +38,9 @@ function newQuotedAssetalances () {
       let speedometer = newSpeedometer()
 
       speedometer.initialize()
+      speedometer.container.connectToParent(thisObject.container)
+      speedometer.container.frame.position.x = thisObject.container.frame.width / 2
+      speedometer.container.frame.position.y = thisObject.container.frame.height * (2 + i * 2) / 5
       thisObject.speedometers.push(speedometer)
     }
   }

CockpitSpace/Speedometer.js

@@ -56,12 +56,14 @@ function newSpeedometer () {
     const OPACITY = 1
 
     let centerPoint = {
-      x: thisObject.params.LEFT_OFFSET,
-      y: COCKPIT_SPACE_POSITION - COCKPIT_SPACE_HEIGHT / 2 - 9
+      x: 0,
+      y: 0
     }
 
+    centerPoint = thisObject.container.frame.frameThisPoint(centerPoint)
+
     browserCanvasContext.beginPath()
-    browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIUS + RED_LINE_HIGHT, 0.85 * Math.PI, 2.15 * Math.PI)
+    browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIUS + RED_LINE_HIGHT, 0 * Math.PI, 2.0 * Math.PI)
     browserCanvasContext.closePath()
 
     browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + OPACITY + ')'
@@ -196,8 +198,8 @@ function newSpeedometer () {
     if (isNaN(label) === false) {
       label = Number(label)
 
-      label = Math.trunc(label * Math.pow(10, thisObject.params.DECIMALS)) / Math.pow(10, thisObject.params.DECIMALS)
-      if (label === 0) { label = label.toFixed(2) } else { label = label.toLocaleString() }
+      label = dynamicDecimals(label, 2)
+      if (label === 0) { label = label.toFixed(2) }
     }
 
     // label = label.substring(0, 6)

DesignSpace/Workspace/FunctionLibraries/CCXTFunctions.js

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

DesignSpace/Workspace/FunctionLibraries/ChainAttachDetach.js

@@ -7,6 +7,7 @@ function newChainAttachDetach () {
   return thisObject
 
   function chainDetachNode (node, rootNodes) {
+    if (node.payload.parentNode === undefined) { return }
     switch (node.type) {
       case 'Phase': {
         let payload = node.payload

DesignSpace/Workspace/FunctionLibraries/NodeDeleter.js

@@ -56,38 +56,40 @@ function newNodeDeleter () {
       }
 
       /* Remove node from parent */
-      if (node.payload.parentNode !== undefined) {
-        let parentNodeDefinition = APP_SCHEMA_MAP.get(node.payload.parentNode.type)
-        if (parentNodeDefinition !== undefined) {
-          if (parentNodeDefinition.properties !== undefined) {
-            for (let i = 0; i < parentNodeDefinition.properties.length; i++) {
-              let property = parentNodeDefinition.properties[i]
-              if (nodeDefinition.propertyNameAtParent === property.name) {
-                switch (property.type) {
-                  case 'node': {
-                    node.payload.parentNode[property.name] = undefined
-                  }
-                    break
-                  case 'array': {
-                    let nodePropertyArray = node.payload.parentNode[property.name]
-                    if (nodePropertyArray !== undefined) {
-                      for (let j = 0; j < nodePropertyArray.length; j++) {
-                        let arrayItem = nodePropertyArray[j]
-                        if (arrayItem.id === node.id) {
+      if (node.payload !== undefined) {
+        if (node.payload.parentNode !== undefined) {
+          let parentNodeDefinition = APP_SCHEMA_MAP.get(node.payload.parentNode.type)
+          if (parentNodeDefinition !== undefined) {
+            if (parentNodeDefinition.properties !== undefined) {
+              for (let i = 0; i < parentNodeDefinition.properties.length; i++) {
+                let property = parentNodeDefinition.properties[i]
+                if (nodeDefinition.propertyNameAtParent === property.name) {
+                  switch (property.type) {
+                    case 'node': {
+                      node.payload.parentNode[property.name] = undefined
+                    }
+                      break
+                    case 'array': {
+                      let nodePropertyArray = node.payload.parentNode[property.name]
+                      if (nodePropertyArray !== undefined) {
+                        for (let j = 0; j < nodePropertyArray.length; j++) {
+                          let arrayItem = nodePropertyArray[j]
+                          if (arrayItem.id === node.id) {
                           /* If this object is chained to the ones of the same type we need to give the next in the chain the reference to the current chain parent */
-                          if (nodeDefinition.chainedToSameType === true) {
-                            if (j < nodePropertyArray.length - 1) {
-                              let nextArrayItem = nodePropertyArray[j + 1]
-                              nextArrayItem.payload.chainParent = node.payload.chainParent
+                            if (nodeDefinition.chainedToSameType === true) {
+                              if (j < nodePropertyArray.length - 1) {
+                                let nextArrayItem = nodePropertyArray[j + 1]
+                                nextArrayItem.payload.chainParent = node.payload.chainParent
+                              }
                             }
-                          }
 
-                          nodePropertyArray.splice(j, 1)
+                            nodePropertyArray.splice(j, 1)
+                          }
                         }
                       }
                     }
+                      break
                   }
-                    break
                 }
               }
             }
@@ -112,6 +114,9 @@ function newNodeDeleter () {
   }
 
   function cleanNode (node) {
+    if (node.payload === undefined) { return }
+    if (node === undefined) { return }
+
     node.payload.targetPosition.x = undefined
     node.payload.targetPosition.y = undefined
     node.payload.visible = undefined

DesignSpace/Workspace/FunctionLibraries/ReferenceAttachDetach.js

@@ -20,5 +20,8 @@ function newReferenceAttachDetach () {
 
   function completeDetachment (node) {
     node.payload.referenceParent = undefined
+    if (node.savedPayload !== undefined) {
+      node.savedPayload.referenceParent = undefined
+    }
   }
 }

DesignSpace/Workspace/FunctionLibraries/SessionFunctions.js

@@ -33,7 +33,7 @@ function newSessionFunctions () {
     let lightingPath = '' +
     'Trading System->' +
     'Parameters->' +
-    'Base Asset->Time Range->Time Frame->Slippage->Fee Structure->' +
+    'Base Asset->Quoted Asset->Time Range->Time Frame->Slippage->Fee Structure->' +
     'Exchange Account Asset->Asset->' +
     'Strategy->' +
     'Trigger Stage->Trigger On Event->Trigger Off Event->Take Position Event->' +
@@ -53,7 +53,7 @@ function newSessionFunctions () {
     lightingPath = '' +
     'Backtesting Session->Paper Trading Session->Fordward Testing Session->Live Trading Session->' +
     'Parameters->' +
-    'Base Asset->Time Range->Time Frame->Slippage->Fee Structure->' +
+    'Base Asset->Quoted Asset->Time Range->Time Frame->Slippage->Fee Structure->' +
     'Exchange Account Asset->Asset->'
 
     let session = functionLibraryProtocolNode.getProtocolNode(node, false, true, true, false, false, lightingPath)

DesignSpace/Workspace/FunctionLibraries/SuperScripts.js

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

DesignSpace/Workspace/FunctionLibraries/TaskFunctions.js

@@ -3,7 +3,11 @@ function newTaskFunctions () {
     runTask: runTask,
     stopTask: stopTask,
     runAllTasks: runAllTasks,
-    stopAllTasks: stopAllTasks
+    stopAllTasks: stopAllTasks,
+    runAllTaskManagers: runAllTaskManagers,
+    stopAllTaskManagers: stopAllTaskManagers,
+    runAllExchangeTasks: runAllExchangeTasks,
+    stopAllExchangeTasks: stopAllExchangeTasks
   }
 
   return thisObject
@@ -77,9 +81,9 @@ function newTaskFunctions () {
       taskId: node.id,
       taskName: node.name
     }
-    systemEventHandler.raiseEvent('Task Manager', 'Stop Task', event)
 
     node.payload.uiObject.stop(callBackFunction)
+    systemEventHandler.raiseEvent('Task Manager', 'Stop Task', event)
 
     if (node.bot === undefined) { return }
     if (node.bot.processes.length === 0) { return }
@@ -107,4 +111,43 @@ function newTaskFunctions () {
       menu.internalClick('Stop Task')
     }
   }
+
+  function runAllTaskManagers (parent, functionLibraryProtocolNode) {
+    for (let i = 0; i < parent.taskManagers.length; i++) {
+      let node = parent.taskManagers[i]
+      let menu = node.payload.uiObject.menu
+
+      menu.internalClick('Run All Tasks')
+      menu.internalClick('Run All Tasks')
+    }
+  }
+
+  function stopAllTaskManagers (parent, functionLibraryProtocolNode) {
+    for (let i = 0; i < parent.taskManagers.length; i++) {
+      let node = parent.taskManagers[i]
+      let menu = node.payload.uiObject.menu
+
+      menu.internalClick('Stop All Tasks')
+      menu.internalClick('Stop All Tasks')
+    }
+  }
+  function runAllExchangeTasks (parent, functionLibraryProtocolNode) {
+    for (let i = 0; i < parent.exchangeTasks.length; i++) {
+      let node = parent.exchangeTasks[i]
+      let menu = node.payload.uiObject.menu
+
+      menu.internalClick('Run All Task Managers')
+      menu.internalClick('Run All Task Managers')
+    }
+  }
+
+  function stopAllExchangeTasks (parent, functionLibraryProtocolNode) {
+    for (let i = 0; i < parent.exchangeTasks.length; i++) {
+      let node = parent.exchangeTasks[i]
+      let menu = node.payload.uiObject.menu
+
+      menu.internalClick('Stop All Task Managers')
+      menu.internalClick('Stop All Task Managers')
+    }
+  }
 }

DesignSpace/Workspace/FunctionLibraries/UiObjectsFromNodes.js

@@ -159,102 +159,92 @@ function newUiObjectsFromNodes () {
     }
 
     let parentNodeDefinition = APP_SCHEMA_MAP.get(parentNode.type)
-    if (parentNodeDefinition !== undefined) {
+    if (parentNodeDefinition === undefined) {
+      console.log('Cannot addUIOBject from parent of ' + type + ' because that type it is not defined at the APP_SCHEMA.')
+    }
       /* Resolve Initial Values */
-      let nodeDefinition = APP_SCHEMA_MAP.get(object.type)
+    let nodeDefinition = APP_SCHEMA_MAP.get(object.type)
 
-      if (nodeDefinition.isHierarchyHead === true) {
-        parentNode.rootNodes.push(object)
-        createUiObject(true, object.type, object.name, object, parentNode, undefined)
-        return object
+    if (nodeDefinition === undefined) {
+      console.log('Cannot addUIOBject of ' + type + ' because that type it is not defined at the APP_SCHEMA.')
+    }
+
+    if (nodeDefinition.initialValues !== undefined) {
+      if (nodeDefinition.initialValues.code !== undefined) {
+        object.code = nodeDefinition.initialValues.code
       }
+    }
+
+    if (nodeDefinition.isHierarchyHead === true) {
+      parentNode.rootNodes.push(object)
+      createUiObject(true, object.type, object.name, object, parentNode, undefined)
+      return object
+    }
 
       /* For the cases where an node is not chained to its parent but to the one at the parent before it at its collection */
-      let chainParent = parentNode
-      if (nodeDefinition.chainedToSameType === true) {
-        if (parentNodeDefinition.properties !== undefined) {
-          for (let i = 0; i < parentNodeDefinition.properties.length; i++) {
-            let property = parentNodeDefinition.properties[i]
-            if (property.childType === type) {
-              if (property.type === 'array') {
-                if (parentNode[property.name] !== undefined) {
-                  if (parentNode[property.name].length > 0) {
-                    let nodeChildren = parentNode[property.name]
-                    chainParent = nodeChildren[nodeChildren.length - 1]
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-
-      if (nodeDefinition !== undefined) {
-        if (nodeDefinition.initialValues !== undefined) {
-          if (nodeDefinition.initialValues.code !== undefined) {
-            object.code = nodeDefinition.initialValues.code
-          }
-        }
-      }
-
-      /* Connect to Parent */
+    let chainParent = parentNode
+    if (nodeDefinition.chainedToSameType === true) {
       if (parentNodeDefinition.properties !== undefined) {
-        let previousPropertyName // Since there are cases where there are many properties with the same name,because they can hold nodes of different types but only one at the time, we have to avoind counting each property of those as individual children.
         for (let i = 0; i < parentNodeDefinition.properties.length; i++) {
           let property = parentNodeDefinition.properties[i]
           if (property.childType === type) {
-            switch (property.type) {
-              case 'node': {
-                if (property.name !== previousPropertyName) {
-                  parentNode[property.name] = object
-                  previousPropertyName = property.name
+            if (property.type === 'array') {
+              if (parentNode[property.name] !== undefined) {
+                if (parentNode[property.name].length > 0) {
+                  let nodeChildren = parentNode[property.name]
+                  chainParent = nodeChildren[nodeChildren.length - 1]
                 }
               }
-                break
-              case 'array': {
-                if (parentNode[property.name] === undefined) {
-                  parentNode[property.name] = []
-                }
-                if (property.maxItems !== undefined) {
-                  if (parentNode[property.name].length < property.maxItems) {
-                    parentNode[property.name].push(object)
-                  } else {
-                    return // Object can not be created.
-                  }
-                } else {
-                  parentNode[property.name].push(object)
-                }
-              }
-                break
             }
           }
         }
       }
+    }
 
-      createUiObject(true, object.type, object.name, object, parentNode, chainParent)
+      /* Create Empty Arrays for properties of type Array */
+    if (nodeDefinition.properties !== undefined) {
+      for (let i = 0; i < nodeDefinition.properties.length; i++) {
+        let property = nodeDefinition.properties[i]
+        if (property.type === 'array') {
+          object[property.name] = []
+        }
+      }
+    }
 
-      /* Auto Add more Children */
-      if (nodeDefinition.properties !== undefined) {
-        let previousPropertyName // Since there are cases where there are many properties with the same name,because they can hold nodes of different types but only one at the time, we have to avoind counting each property of those as individual children.
-        for (let i = 0; i < nodeDefinition.properties.length; i++) {
-          let property = nodeDefinition.properties[i]
+    if (nodeDefinition !== undefined) {
+      if (nodeDefinition.initialValues !== undefined) {
+        if (nodeDefinition.initialValues.code !== undefined) {
+          object.code = nodeDefinition.initialValues.code
+        }
+      }
+    }
 
+      /* Connect to Parent */
+    if (parentNodeDefinition.properties !== undefined) {
+      let previousPropertyName // Since there are cases where there are many properties with the same name,because they can hold nodes of different types but only one at the time, we have to avoind counting each property of those as individual children.
+      for (let i = 0; i < parentNodeDefinition.properties.length; i++) {
+        let property = parentNodeDefinition.properties[i]
+        if (property.childType === type) {
           switch (property.type) {
             case 'node': {
               if (property.name !== previousPropertyName) {
-                if (property.autoAdd === true) {
-                  addUIObject(object, property.childType)
-                  previousPropertyName = property.name
-                }
+                parentNode[property.name] = object
+                previousPropertyName = property.name
               }
             }
               break
             case 'array': {
-              if (property.autoAdd === true) {
-                if (object[property.name] === undefined) {
-                  object[property.name] = []
+              if (parentNode[property.name] === undefined) {
+                parentNode[property.name] = []
+              }
+              if (property.maxItems !== undefined) {
+                if (parentNode[property.name].length < property.maxItems) {
+                  parentNode[property.name].push(object)
+                } else {
+                  return // Object can not be created.
                 }
-                addUIObject(object, property.childType)
+              } else {
+                parentNode[property.name].push(object)
               }
             }
               break
@@ -262,6 +252,38 @@ function newUiObjectsFromNodes () {
         }
       }
     }
+
+    createUiObject(true, object.type, object.name, object, parentNode, chainParent)
+
+      /* Auto Add more Children */
+    if (nodeDefinition.properties !== undefined) {
+      let previousPropertyName // Since there are cases where there are many properties with the same name,because they can hold nodes of different types but only one at the time, we have to avoind counting each property of those as individual children.
+      for (let i = 0; i < nodeDefinition.properties.length; i++) {
+        let property = nodeDefinition.properties[i]
+
+        switch (property.type) {
+          case 'node': {
+            if (property.name !== previousPropertyName) {
+              if (property.autoAdd === true) {
+                addUIObject(object, property.childType)
+                previousPropertyName = property.name
+              }
+            }
+          }
+            break
+          case 'array': {
+            if (property.autoAdd === true) {
+              if (object[property.name] === undefined) {
+                object[property.name] = []
+              }
+              addUIObject(object, property.childType)
+            }
+          }
+            break
+        }
+      }
+    }
+
     return object
   }
 
@@ -389,6 +411,27 @@ function newUiObjectsFromNodes () {
     node.payload = payload
     node.type = uiObjectType
 
+    /*
+    Now we copy the possible frame saved to the payload where it can be used. A saved frame stores the position of a a chartingSpace object related to a node.
+    This will prevent that if those charting space objects never get activated, that the frame information is lost when the workspace is saved.
+    */
+    if (node.savedPayload !== undefined) {
+      if (node.savedPayload.frame !== undefined) {
+        let frame = {
+          position: {
+            x: 0,
+            y: 0
+          }
+        }
+        frame.position.x = node.savedPayload.frame.position.x
+        frame.position.y = node.savedPayload.frame.position.y
+        frame.width = node.savedPayload.frame.width
+        frame.height = node.savedPayload.frame.height
+        frame.radius = node.savedPayload.frame.radius
+        saveFrame(payload, frame)
+      }
+    }
+
     /* Now we mount the floating object where the UIOBject will be laying on top of */
     canvas.floatingSpace.uiObjectConstructor.createUiObject(userAddingNew, payload)
 
@@ -397,7 +440,9 @@ function newUiObjectsFromNodes () {
     /* Check if there are tasks to run */
     if (userAddingNew === false && uiObjectType === 'Task' && node.savedPayload !== undefined) {
       if (node.savedPayload.uiObject.isRunning === true) {
-        tasksToRun.push(node)
+        if (node.payload.parentNode !== undefined) {
+          tasksToRun.push(node)
+        }
       }
     }
 
@@ -405,7 +450,9 @@ function newUiObjectsFromNodes () {
     if (userAddingNew === false && node.savedPayload !== undefined) {
       if (uiObjectType === 'Live Trading Session' || uiObjectType === 'Fordward Testing Session' || uiObjectType === 'Backtesting Session' || uiObjectType === 'Paper Trading Session') {
         if (node.savedPayload.uiObject.isRunning === true) {
-          sessionsToRun.push(node)
+          if (node.payload.parentNode !== undefined) {
+            sessionsToRun.push(node)
+          }
         }
       }
     }

DesignSpace/Workspace/Workspace.js

@@ -11,6 +11,7 @@ function newWorkspace () {
     container: undefined,
     enabled: false,
     nodeChildren: undefined,
+    getHierarchyHeads: getHierarchyHeads,
     getNodeThatIsOnFocus: getNodeThatIsOnFocus,
     getNodeByShortcutKey: getNodeByShortcutKey,
     stopAllRunningTasks: stopAllRunningTasks,
@@ -56,6 +57,8 @@ function newWorkspace () {
   let functionLibrarySessionFunctions = newSessionFunctions()
   let functionLibraryShortcutKeys = newShortcutKeys()
   let functionLibraryOnFocus = newOnFocus()
+  let functionLibrarySuperScripts = newSuperScriptsFunctions()
+  let functionLibraryCCXTFunctions = newCCXTFunctions()
 
   thisObject.nodeChildren = newNodeChildren()
 
@@ -80,15 +83,14 @@ function newWorkspace () {
       let savedWorkspace = window.localStorage.getItem(CANVAS_APP_NAME + '.' + 'Workspace')
 
       if (savedWorkspace === null) {
-        thisObject.workspaceNode.type = 'Workspace'
-        thisObject.workspaceNode.name = 'My Workspace'
+        thisObject.workspaceNode = getWorkspace()
       } else {
         thisObject.workspaceNode = JSON.parse(savedWorkspace)
       }
       functionLibraryUiObjectsFromNodes.recreateWorkspace(thisObject.workspaceNode)
       thisObject.enabled = true
 
-      setInterval(saveWorkspace, 5000)
+      setInterval(saveWorkspace, 10000)
     } catch (err) {
       if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) }
     }
@@ -183,22 +185,16 @@ function newWorkspace () {
           for (let j = 0; j < rootNode.networkNodes.length; j++) {
             let networkNode = rootNode.networkNodes[j]
             if (networkNode.dataMining !== undefined) {
-              for (let i = 0; i < networkNode.dataMining.taskManagers.length; i++) {
-                let taskManager = networkNode.dataMining.taskManagers[i]
-                taskManager.payload.uiObject.menu.internalClick('Stop All Tasks')
-              }
+              networkNode.dataMining.payload.uiObject.menu.internalClick('Stop All Exchange Tasks')
+              networkNode.dataMining.payload.uiObject.menu.internalClick('Stop All Exchange Tasks')
             }
             if (networkNode.testingEnvironment !== undefined) {
-              for (let i = 0; i < networkNode.testingEnvironment.taskManagers.length; i++) {
-                let taskManager = networkNode.testingEnvironment.taskManagers[i]
-                taskManager.payload.uiObject.menu.internalClick('Stop All Tasks')
-              }
+              networkNode.testingEnvironment.payload.uiObject.menu.internalClick('Stop All Exchange Tasks')
+              networkNode.testingEnvironment.payload.uiObject.menu.internalClick('Stop All Exchange Tasks')
             }
             if (networkNode.productionEnvironment !== undefined) {
-              for (let i = 0; i < networkNode.productionEnvironment.taskManagers.length; i++) {
-                let taskManager = networkNode.productionEnvironment.taskManagers[i]
-                taskManager.payload.uiObject.menu.internalClick('Stop All Tasks')
-              }
+              networkNode.productionEnvironment.payload.uiObject.menu.internalClick('Stop All Exchange Tasks')
+              networkNode.productionEnvironment.payload.uiObject.menu.internalClick('Stop All Exchange Tasks')
             }
           }
         }
@@ -222,6 +218,20 @@ function newWorkspace () {
     }
   }
 
+  function getHierarchyHeads () {
+    let nodes = []
+    for (let i = 0; i < thisObject.workspaceNode.rootNodes.length; i++) {
+      let rootNode = thisObject.workspaceNode.rootNodes[i]
+      let nodeDefinition = APP_SCHEMA_MAP.get(rootNode.type)
+      if (nodeDefinition !== undefined) {
+        if (nodeDefinition.isHierarchyHead === true) {
+          nodes.push(rootNode)
+        }
+      }
+    }
+    return nodes
+  }
+
   function spawn (nodeText, mousePointer) {
     try {
       let point = {
@@ -356,6 +366,42 @@ function newWorkspace () {
           functionLibraryTaskFunctions.stopAllTasks(payload.node, functionLibraryProtocolNode)
         }
         break
+      case 'Run All Task Managers':
+        {
+          functionLibraryTaskFunctions.runAllTaskManagers(payload.node, functionLibraryProtocolNode)
+        }
+        break
+      case 'Stop All Task Managers':
+        {
+          functionLibraryTaskFunctions.stopAllTaskManagers(payload.node, functionLibraryProtocolNode)
+        }
+        break
+      case 'Run All Exchange Tasks':
+        {
+          functionLibraryTaskFunctions.runAllExchangeTasks(payload.node, functionLibraryProtocolNode)
+        }
+        break
+      case 'Stop All Exchange Tasks':
+        {
+          functionLibraryTaskFunctions.stopAllExchangeTasks(payload.node, functionLibraryProtocolNode)
+        }
+        break
+      case 'Add Missing Crypto Exchanges':
+        {
+          functionLibraryCCXTFunctions.addMissingExchanges(payload.node, functionLibraryUiObjectsFromNodes)
+        }
+        break
+      case 'Add Missing Assets':
+        {
+          functionLibraryCCXTFunctions.addMissingAssets(payload.node, functionLibraryUiObjectsFromNodes)
+        }
+        break
+      case 'Add Missing Markets':
+        {
+          functionLibraryCCXTFunctions.addMissingMarkets(payload.node, functionLibraryUiObjectsFromNodes, functionLibraryNodeCloning)
+        }
+        break
+
       case 'Run Session':
         {
           functionLibrarySessionFunctions.runSession(payload.node, functionLibraryProtocolNode, callBackFunction)
@@ -366,6 +412,32 @@ function newWorkspace () {
           functionLibrarySessionFunctions.stopSession(payload.node, functionLibraryProtocolNode, callBackFunction)
         }
         break
+      case 'Run Super Action':
+        {
+          functionLibrarySuperScripts.runSuperScript(payload.node, thisObject.workspaceNode.rootNodes, functionLibraryNodeCloning, functionLibraryUiObjectsFromNodes, functionLibraryNodeDeleter)
+        }
+        break
+      case 'Remove Parent':
+        {
+          chainDetachNode(payload.node)
+        }
+        break
+      case 'Remove Reference':
+        {
+          referenceDetachNode(payload.node)
+        }
+        break
+      case 'Open Documentation':
+        {
+          let definition = APP_SCHEMA_MAP.get(payload.node.type)
+          if (definition !== undefined) {
+            if (definition.docURL !== undefined) {
+              let newTab = window.open(definition.docURL, '_blank')
+              newTab.focus()
+            }
+          }
+        }
+        break
     }
   }
 }

FloatingSpace/CircularMenu.js

@@ -49,7 +49,7 @@ function newCircularMenu () {
 
     let iconAndTextArray = []
     let iconOnlyArray
-    let ringsArray = [[], [], []]
+    let ringsArray = [[], [], [], []]
 
     for (let i = 0; i < menuItemsInitialValues.length; i++) {
       let menuItem = newCircularMenuItem()
@@ -103,15 +103,18 @@ function newCircularMenu () {
       menuItems.push(menuItem)
     }
 
-    /* There are 3 possible rings of icons, we will go through each of them here. */
-    let amplitudeArray = [80, 50, 40]
-    let initialAngleArray = [220, 205, 200]
-    for (let j = 1; j < 4; j++) {
+    /* There are 4 possible rings of icons, we will go through each of them here. */
+    let amplitudeArray = [80, 50, 40, 80]
+    let initialAngleArray = [220, 205, 200, 180]
+    for (let j = 1; j < ringsArray.length + 1; j++) {
       let iconOnlyArray = ringsArray[j - 1]
       /* Here we calculate the angles for each menu item, and then apply it if it was not previously defined. */
       let amplitude = amplitudeArray[j - 1]
       let initialAngle = initialAngleArray[j - 1]
       let step = amplitude / (iconOnlyArray.length - 1)
+      if (iconOnlyArray.length === 1) {
+        step = 0
+      }
 
       for (let i = 0; i < iconOnlyArray.length; i++) {
         let menuItem = iconOnlyArray[i]

FloatingSpace/CircularMenuItem.js

@@ -57,7 +57,7 @@ function newCircularMenuItem () {
   thisObject.container.frame.position.x = 0
   thisObject.container.frame.position.y = 0
   thisObject.container.frame.width = 0
-  thisObject.container.frame.height = 30
+  thisObject.container.frame.height = 40
 
   let isMouseOver = false
 
@@ -112,7 +112,7 @@ function newCircularMenuItem () {
     selfMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
 
     if (thisObject.type === 'Icon & Text') {
-      thisObject.container.frame.width = 150
+      thisObject.container.frame.width = 220
     } else {
       thisObject.container.frame.width = 50
     }
@@ -150,15 +150,19 @@ function newCircularMenuItem () {
     if (thisObject.type === 'Icon Only') {
       switch (thisObject.ring) {
         case 1: {
-          radiusGrowthFactor = 5
+          radiusGrowthFactor = 6.5
           break
         }
         case 2: {
-          radiusGrowthFactor = 3.5
+          radiusGrowthFactor = 5.0
           break
         }
         case 3: {
-          radiusGrowthFactor = 2
+          radiusGrowthFactor = 3.5
+          break
+        }
+        case 4: {
+          radiusGrowthFactor = 2.5
           break
         }
       }
@@ -275,6 +279,7 @@ function newCircularMenuItem () {
       /* A Click during confirmation executes the pre-defined action. */
       if (temporaryStatus === STATUS_WAITING_CONFIRMATION || temporaryStatus === STATUS_PRIMARY_WORK_DONE) {
         executeAction()
+        setStatus(thisObject.workDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 100, STATUS_SECONDARY_WORK_DONE)
         return
       }
     }
@@ -370,13 +375,13 @@ function newCircularMenuItem () {
           backgroundColor = UI_COLOR.GREY
         }
         let params = {
-          cornerRadius: 3,
+          cornerRadius: 5,
           lineWidth: 0.1,
           container: thisObject.container,
           borderColor: UI_COLOR.DARK,
           backgroundColor: backgroundColor,
           castShadow: false,
-          xOffset: 40
+          xOffset: 60
         }
 
         if (isMouseOver === true) {
@@ -417,13 +422,13 @@ function newCircularMenuItem () {
 
       if (thisObject.type === 'Icon & Text') {
         let labelPoint
-        let fontSize = 10
+        let fontSize = 15
 
         browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
 
         if (thisObject.currentRadius >= thisObject.targetRadius) {
           labelPoint = {
-            x: menuPosition.x + thisObject.currentRadius + 20,
+            x: menuPosition.x + thisObject.currentRadius + 25,
             y: menuPosition.y + fontSize * FONT_ASPECT_RATIO
           }
 

FloatingSpace/CircularProgressBar.js

@@ -55,10 +55,21 @@ function newCircularProgressBar () {
     if (thisObject.payload === undefined) { return }
     if (thisObject.payload.uiObject === undefined) { return }
     opacityCounters[message.event.seconds] = 2000
-    thisObject.payload.uiObject.setValue(message.event.processingDate)
+    if (message.event.processingDate !== undefined) {
+      thisObject.payload.uiObject.setValue(message.event.processingDate, 2000)
+    }
+    if (message.event.percentage !== undefined) {
+      thisObject.payload.uiObject.setPercentage(message.event.percentage, 2000)
+    }
+    if (message.event.status !== undefined) {
+      thisObject.payload.uiObject.setStatus(message.event.status, 200000)
+    }
+
+    thisObject.payload.uiObject.heartBeat()
   }
 
   function getContainer (point) {
+    if (canvas.floatingSpace.inMapMode === true) { return }
     let container
 
     for (let i = 0; i < menuItems.length; i++) {
@@ -83,6 +94,7 @@ function newCircularProgressBar () {
   }
 
   function drawBackground (pFloatingObject) {
+    if (canvas.floatingSpace.inMapMode === true) { return }
     const VISIBLE_RADIUS = thisObject.container.frame.radius * 2
 
     let visiblePosition = {

FloatingSpace/CodeEditor.js

@@ -90,7 +90,7 @@ function newCodeEditor () {
                      'box-shadow: none;' +
                      'overflow:hidden;' +
                      'font-family: ' + UI_FONT.PRIMARY + ';' +
-                     'font-size: 12px;' +
+                     'font-size: 14px;' +
                      'background-color: rgb(' + UI_COLOR.RUSTED_RED + ');' +
                      'color:rgb(255, 255, 255);' +
                     'width: ' + thisObject.container.frame.width + 'px;' +
@@ -129,8 +129,8 @@ function newCodeEditor () {
     thisObject.container.frame.position.x = 0
     thisObject.container.frame.position.y = 0
 
-    thisObject.container.frame.width = thisObject.container.frame.radius * 1.8 * 2
-    thisObject.container.frame.height = thisObject.container.frame.radius * 1 * 2
+    thisObject.container.frame.width = thisObject.container.frame.radius * 1.8 * 1.5
+    thisObject.container.frame.height = thisObject.container.frame.radius * 1 * 1.4
 
     let textAreaPosition = {
       x: 0 - thisObject.container.frame.width / 2,
@@ -162,7 +162,7 @@ function newCodeEditor () {
 
       position = thisObject.container.frame.frameThisPoint(position)
 
-      let radius = thisObject.container.frame.radius * 2
+      let radius = thisObject.container.frame.radius * 1.5
 
       if (radius > 0.5) {
         browserCanvasContext.beginPath()

FloatingSpace/ConditionEditor.js

@@ -90,7 +90,7 @@ function newConditionEditor () {
                      'box-shadow: none;' +
                      'overflow:hidden;' +
                      'font-family: ' + UI_FONT.PRIMARY + ';' +
-                     'font-size: 12px;' +
+                     'font-size: 14px;' +
                      'background-color: rgb(' + UI_COLOR.GREEN + ');' +
                      'color:rgb(255, 255, 255);' +
                     'width: ' + thisObject.container.frame.width + 'px;' +

FloatingSpace/ConfigEditor.js

@@ -34,7 +34,7 @@ function newConfigEditor () {
   thisObject.container.frame.position.y = 0
 
   let isMouseOver = false
-  let SIZE_FACTOR = 0.6
+  let SIZE_FACTOR = 0.8
 
   return thisObject
 
@@ -97,7 +97,7 @@ function newConfigEditor () {
                      'box-shadow: none;' +
                      'overflow:hidden;' +
                      'font-family: ' + UI_FONT.PRIMARY + ';' +
-                     'font-size: 12px;' +
+                     'font-size: 14px;' +
                      'background-color: rgb(' + UI_COLOR.DARK_TURQUOISE + ');' +
                      'color:rgb(255, 255, 255);' +
                     'width: ' + thisObject.container.frame.width + 'px;' +

FloatingSpace/FloatingLayer.js

@@ -24,7 +24,6 @@ function newFloatingLayer () {
     removeFloatingObject: removeFloatingObject,
     getFloatingObject: getFloatingObject,
     physics: physics,
-    changeTargetRepulsion: changeTargetRepulsion,
     draw: draw,
     getContainer: getContainer,
     initialize: initialize,
@@ -200,10 +199,24 @@ function newFloatingLayer () {
     }
   }
 
+  function collapsePhysics (thisObject) {
+    let parent = thisObject.payload.chainParent
+    if (parent === undefined) { return }
+    if (parent.payload === undefined) { return }
+    if (parent.payload.floatingObject === undefined) { return }
+
+    thisObject.isParentCollapsed = parent.payload.floatingObject.isCollapsed
+    if (thisObject.collapsedManually === false) {
+      thisObject.isCollapsed = parent.payload.floatingObject.isCollapsed
+    }
+  }
+
   function makeVisible () {
     for (let i = 0; i < invisibleFloatingObjects.length; i++) {
       let floatingObject = invisibleFloatingObjects[i]
 
+      collapsePhysics(floatingObject)
+
       if (floatingObject.isFrozen === false && floatingObject.isParentCollapsed === false) {
         visibleFloatingObjects.push(floatingObject)
         invisibleFloatingObjects.splice(i, 1)  // Delete item from array.
@@ -217,6 +230,8 @@ function newFloatingLayer () {
     for (let i = 0; i < visibleFloatingObjects.length; i++) {
       let floatingObject = visibleFloatingObjects[i]
 
+      collapsePhysics(floatingObject)
+
       if (floatingObject.isFrozen === true || floatingObject.isParentCollapsed === true) {
         invisibleFloatingObjects.push(floatingObject)
         visibleFloatingObjects.splice(i, 1)  // Delete item from array.
@@ -256,10 +271,8 @@ function newFloatingLayer () {
                 /* This function makes all the calculations to apply phisycs on all visible floatingObjects in this layer. */
 
         try {
-          for (let i = 0; i < invisibleFloatingObjects.length; i++) {
-            let floatingObject = invisibleFloatingObjects[i]
-            floatingObject.physics()
-          }
+          DEBUG.variable1 = 'Invisible Floating Objets: ' + invisibleFloatingObjects.length
+          DEBUG.variable2 = 'Visible Floating Objets: ' + visibleFloatingObjects.length
 
           for (let i = 0; i < visibleFloatingObjects.length; i++) {
             let floatingObject = visibleFloatingObjects[i]
@@ -605,24 +618,6 @@ function newFloatingLayer () {
     }
   }
 
-  function changeTargetRepulsion (pDelta) {
-    try {
-      if (pDelta > 0) {
-        pDelta = 1
-      } else {
-        pDelta = -1
-      }
-
-      maxTargetRepulsionForce = maxTargetRepulsionForce + pDelta / 1000
-
-      if (maxTargetRepulsionForce < 0.0000000001) {
-        maxTargetRepulsionForce = 0.0000000001
-      }
-    } catch (err) {
-      if (ERROR_LOG === true) { logger.write('[ERROR] changeTargetRepulsion -> err= ' + err.stack) }
-    }
-  }
-
   function colliding (floatingObject1, floatingObject2) {
     try {
             /* This function detects weather 2 floatingObjects collide with each other. */

FloatingSpace/FloatingObject.js

@@ -45,6 +45,7 @@ function newFloatingObject () {
     initializeRadius: initializeRadius,
     initializeImageSize: initializeImageSize,
     initializeFontSize: initializeFontSize,
+    initializeHierarchyRing: initializeHierarchyRing,
     initializeCurrentPosition: initializeCurrentPosition,
     radomizeCurrentSpeed: radomizeCurrentSpeed,
     drawBackground: drawBackground,
@@ -107,6 +108,7 @@ function newFloatingObject () {
 
   function getContainer (point) {
     if ((thisObject.isCollapsed === true && thisObject.collapsedManually === false) || thisObject.isParentCollapsed === true) { return }
+    if (canvas.floatingSpace.inMapMode === true) { return }
     let container
 
     container = thisObject.payload.uiObject.getContainer(point)
@@ -219,12 +221,13 @@ function newFloatingObject () {
   }
 
   function physics () {
-    collapsePhysics()
     frozenPhysics()
     /* From here on, only if they are not too far. */
     if (canvas.floatingSpace.isItFar(thisObject.payload)) { return }
     thisObjectPhysics()
-    thisObject.payload.uiObject.physics()
+    if (thisObject.payload.uiObject !== undefined) {
+      thisObject.payload.uiObject.physics()
+    }
     positionContraintsPhysics()
   }
 
@@ -241,18 +244,6 @@ function newFloatingObject () {
     }
   }
 
-  function collapsePhysics () {
-    let parent = thisObject.payload.chainParent
-    if (parent === undefined) { return }
-    if (parent.payload === undefined) { return }
-    if (parent.payload.floatingObject === undefined) { return }
-
-    thisObject.isParentCollapsed = parent.payload.floatingObject.isCollapsed
-    if (thisObject.collapsedManually === false) {
-      thisObject.isCollapsed = parent.payload.floatingObject.isCollapsed
-    }
-  }
-
   function positionContraintsPhysics () {
     if (thisObject.angleToParent !== ANGLE_TO_PARENT.NOT_FIXED && thisObject.isOnFocus !== true) {
       let parent = thisObject.payload.chainParent
@@ -330,7 +321,7 @@ function newFloatingObject () {
 
       thisObject.payload.distance = distanceToParent
 
-      if (distanceToParent > 2000 || thisObject.isPinned === true) { return } // this is introduced to avoid edges cases when importing workspaces.
+      if (distanceToParent > 3000 || thisObject.isPinned === true) { return } // this is introduced to avoid edges cases when importing workspaces.
 
       newPosition = {
         x: parent.payload.position.x + distanceToParent * Math.cos(toRadians(thisObject.payload.angle)),
@@ -348,11 +339,11 @@ function newFloatingObject () {
   function thisObjectPhysics () {
                            // The radius also have a target.
 
-    if (Math.abs(thisObject.container.frame.radius - thisObject.targetRadius) >= 15) {
+    if (Math.abs(thisObject.container.frame.radius - thisObject.targetRadius) >= 10) {
       if (thisObject.container.frame.radius < thisObject.targetRadius) {
-        thisObject.container.frame.radius = thisObject.container.frame.radius + 15
+        thisObject.container.frame.radius = thisObject.container.frame.radius + 10
       } else {
-        thisObject.container.frame.radius = thisObject.container.frame.radius - 15
+        thisObject.container.frame.radius = thisObject.container.frame.radius - 10
       }
       thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
     }
@@ -377,6 +368,14 @@ function newFloatingObject () {
       }
     }
 
+    if (Math.abs(thisObject.currentHierarchyRing - thisObject.targetHierarchyRing) >= 10) {
+      if (thisObject.currentHierarchyRing < thisObject.targetHierarchyRing) {
+        thisObject.currentHierarchyRing = thisObject.currentHierarchyRing + 10
+      } else {
+        thisObject.currentHierarchyRing = thisObject.currentHierarchyRing - 10
+      }
+    }
+
     /* Floating object position in screen coordinates */
 
     thisObject.payload.position.x = thisObject.container.frame.position.x
@@ -388,6 +387,7 @@ function newFloatingObject () {
       thisObject.targetRadius = thisObject.rawRadius * 6.0
       thisObject.targetImageSize = thisObject.rawImageSize * 2.0
       thisObject.targetFontSize = thisObject.rawFontSize * 2.0
+      thisObject.targetHierarchyRing = thisObject.rawHierarchyRing * 8.0
 
       thisObject.payload.uiObject.container.eventHandler.raiseEvent('onFocus', point)
 
@@ -420,6 +420,7 @@ function newFloatingObject () {
       thisObject.targetRadius = thisObject.rawRadius * 1
       thisObject.targetImageSize = thisObject.rawImageSize * 1
       thisObject.targetFontSize = thisObject.rawFontSize * 1
+      thisObject.targetHierarchyRing = thisObject.rawHierarchyRing * 1
 
       thisObject.payload.uiObject.container.eventHandler.raiseEvent('onNotFocus')
 
@@ -478,13 +479,13 @@ function newFloatingObject () {
 
     thisObject.rawRadius = radius
     thisObject.targetRadius = radius
-    thisObject.container.frame.radius = radius / 3
+    thisObject.container.frame.radius = radius / 5
 
     thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
   }
 
   function initializeImageSize (suggestedValue) {
-    var size = suggestedValue
+    let size = suggestedValue
     if (size < 2) {
       size = 2
     }
@@ -495,7 +496,7 @@ function newFloatingObject () {
   }
 
   function initializeFontSize (suggestedValue) {
-    var size = suggestedValue
+    let size = suggestedValue
     if (size < 3) {
       size = 3
     }
@@ -505,6 +506,17 @@ function newFloatingObject () {
     thisObject.currentFontSize = size / 3
   }
 
+  function initializeHierarchyRing (suggestedValue) {
+    let radius = suggestedValue
+    if (radius < 3) {
+      radius = 3
+    }
+
+    thisObject.rawHierarchyRing = radius
+    thisObject.targetHierarchyRing = radius
+    thisObject.currentHierarchyRing = radius
+  }
+
   function initializeCurrentPosition (arroundPoint) {
     let position = {}
 

FloatingSpace/FormulaEditor.js

@@ -90,7 +90,7 @@ function newFormulaEditor () {
                      'box-shadow: none;' +
                      'overflow:hidden;' +
                      'font-family: ' + UI_FONT.PRIMARY + ';' +
-                     'font-size: 12px;' +
+                     'font-size: 14px;' +
                      'background-color: rgb(' + UI_COLOR.MANGANESE_PURPLE + ');' +
                      'color:rgb(255, 255, 255);' +
                     'width: ' + thisObject.container.frame.width + 'px;' +

FloatingSpace/UiObject.js

@@ -25,6 +25,7 @@ function newUiObject () {
     shortcutKey: undefined,
     run: run,
     stop: stop,
+    heartBeat: heartBeat,
     getReadyToChainAttach: getReadyToChainAttach,
     showAvailabilityToChainAttach: showAvailabilityToChainAttach,
     getReadyToReferenceAttach: getReadyToReferenceAttach,
@@ -32,6 +33,8 @@ function newUiObject () {
     highlight: highlight,
     setErrorMessage: setErrorMessage,
     setValue: setValue,
+    setPercentage: setPercentage,
+    setStatus: setStatus,
     physics: physics,
     drawBackground: drawBackground,
     drawMiddleground: drawMiddleground,
@@ -54,7 +57,7 @@ function newUiObject () {
   let executingIcon
 
   let selfFocusEventSubscriptionId
-  let selfNotFocuskEventSubscriptionId
+  let selfNotFocusEventSubscriptionId
   let selfDisplaceEventSubscriptionId
   let selfDragStartedEventSubscriptionId
   let selfDragFinishedEventSubscriptionId
@@ -68,6 +71,12 @@ function newUiObject () {
   let hasValue
   let valueCounter = 0
 
+  let hasPercentage
+  let percentageCounter = 0
+
+  let hasStatus
+  let statusCounter = 0
+
   let previousDistanceToChainParent
   let readyToChainAttachDisplayCounter = 5
   let readyToChainAttachDisplayIncrement = 0.1
@@ -92,20 +101,29 @@ function newUiObject () {
 
   let errorMessage = ''
   let currentValue = 0
+  let currentPercentage = ''
+  let currentStatus = ''
   let rightDragging = false
 
-  let eventSubscriptionIdHeartbeat
+  let eventSubscriptionIdOnRunning
   let eventSubscriptionIdOnStopped
+  let lastHeartBeat
+  let onRunningCallBackFunction
+  let onRunningCallBackFunctionWasCalled = false
+
+  let newUiObjectCounter = 25
+  let referenceLineCounter = 0
+  let chainLineCounter = 0
 
   return thisObject
 
   function finalize () {
     let key = thisObject.payload.node.name + '-' + thisObject.payload.node.type + '-' + thisObject.payload.node.id
-    systemEventHandler.stopListening(key, eventSubscriptionIdHeartbeat, 'UiObject')
+    systemEventHandler.stopListening(key, eventSubscriptionIdOnRunning, 'UiObject')
     systemEventHandler.stopListening(key, eventSubscriptionIdOnStopped, 'UiObject')
 
     thisObject.container.eventHandler.stopListening(selfFocusEventSubscriptionId)
-    thisObject.container.eventHandler.stopListening(selfNotFocuskEventSubscriptionId)
+    thisObject.container.eventHandler.stopListening(selfNotFocusEventSubscriptionId)
     thisObject.container.eventHandler.stopListening(selfDisplaceEventSubscriptionId)
     thisObject.container.eventHandler.stopListening(selfDragStartedEventSubscriptionId)
     thisObject.container.eventHandler.stopListening(selfDragFinishedEventSubscriptionId)
@@ -143,6 +161,9 @@ function newUiObject () {
     icon = undefined
     chainAttachToNode = undefined
     referenceAttachToNode = undefined
+    lastHeartBeat = undefined
+
+    onRunningCallBackFunction = undefined
   }
 
   function initialize (payload, menuItemsInitialValues) {
@@ -166,7 +187,7 @@ function newUiObject () {
     iconPhysics()
 
     selfFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onFocus', onFocus)
-    selfNotFocuskEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus)
+    selfNotFocusEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onNotFocus', onNotFocus)
     selfDisplaceEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onDisplace', onDisplace)
     selfDragStartedEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onDragStarted', onDragStarted)
     selfDragFinishedEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onDragFinished', onDragFinished)
@@ -273,10 +294,83 @@ function newUiObject () {
     highlightPhisycs()
     errorMessagePhisycs()
     valuePhisycs()
+    percentagePhisycs()
+    statusPhisycs()
     chainDetachingPhysics()
     chainAttachingPhysics()
     referenceDetachingPhysics()
     referenceAttachingPhysics()
+    childrenRunningPhysics()
+    newObjectPhysics()
+    referenceLinePhysics()
+    chainLinePhysics()
+  }
+
+  function referenceLinePhysics () {
+    referenceLineCounter = referenceLineCounter + 2
+    if (referenceLineCounter > 500) {
+      referenceLineCounter = 0
+    }
+  }
+
+  function chainLinePhysics () {
+    chainLineCounter = chainLineCounter - 5
+    if (chainLineCounter < 0) {
+      chainLineCounter = 500
+    }
+  }
+
+  function newObjectPhysics () {
+    newUiObjectCounter--
+    if (newUiObjectCounter < 0) {
+      newUiObjectCounter = 0
+    }
+  }
+
+  function heartBeatPhysics () {
+    if (lastHeartBeat !== undefined) {
+      const ONE_MIN = 60000
+      nowTimestamp = (new Date()).valueOf()
+      if (nowTimestamp - lastHeartBeat.valueOf() > ONE_MIN) {
+        lastHeartBeat = undefined
+        thisObject.isRunning = false
+        valueCounter = 0
+      }
+    } else {
+      thisObject.isRunning = false
+    }
+  }
+
+  function childrenRunningPhysics () {
+    let nodeDefinition = APP_SCHEMA_MAP.get(thisObject.payload.node.type)
+    if (nodeDefinition.properties === undefined) { return }
+    let monitorChildrenRunning = false
+    for (let i = 0; i < nodeDefinition.properties.length; i++) {
+      let property = nodeDefinition.properties[i]
+      if (property.monitorChildrenRunning === true) {
+        let children = thisObject.payload.node[property.name]
+        if (children === undefined) { continue }
+        let totalRunning = 0
+        for (let j = 0; j < children.length; j++) {
+          let child = children[j]
+          if (child.payload.uiObject.isRunning === true) {
+            totalRunning++
+          }
+        }
+        if (totalRunning > 0) {
+          setValue(totalRunning + ' / ' + children.length + ' Running')
+          thisObject.isRunning = true
+        } else {
+          thisObject.isRunning = false
+          valueCounter = 0
+        }
+        monitorChildrenRunning = true
+        return
+      }
+    }
+    if (monitorChildrenRunning === false) {
+      heartBeatPhysics()
+    }
   }
 
   function chainAttachingPhysics () {
@@ -563,6 +657,22 @@ function newUiObject () {
     }
   }
 
+  function percentagePhisycs () {
+    percentageCounter--
+    if (percentageCounter < 0) {
+      percentageCounter = 0
+      hasPercentage = false
+    }
+  }
+
+  function statusPhisycs () {
+    statusCounter--
+    if (statusCounter < 0) {
+      statusCounter = 0
+      hasStatus = false
+    }
+  }
+
   function highlight () {
     isHighlighted = true
     highlightCounter = 30
@@ -577,11 +687,51 @@ function newUiObject () {
     }
   }
 
-  function setValue (value) {
+  function setValue (value, counter) {
     if (value !== undefined) {
       currentValue = value
       hasValue = true
-      valueCounter = 500
+      if (counter !== undefined) {
+        valueCounter = counter
+      } else {
+        valueCounter = 100
+      }
+    }
+  }
+
+  function setPercentage (percentage, counter) {
+    if (percentage !== undefined) {
+      currentPercentage = percentage
+      hasPercentage = true
+      if (counter !== undefined) {
+        percentageCounter = counter
+      } else {
+        percentageCounter = 100
+      }
+    }
+  }
+
+  function setStatus (status, counter) {
+    if (status !== undefined) {
+      currentStatus = status
+      hasStatus = true
+      if (counter !== undefined) {
+        statusCounter = counter
+      } else {
+        statusCounter = 100
+      }
+    }
+  }
+
+  function heartBeat () {
+    lastHeartBeat = new Date()
+    thisObject.isRunning = true
+
+    if (onRunningCallBackFunctionWasCalled === false) {
+      onRunningCallBackFunctionWasCalled = true
+      if (onRunningCallBackFunction !== undefined) {
+        onRunningCallBackFunction(GLOBAL.DEFAULT_OK_RESPONSE)
+      }
     }
   }
 
@@ -598,19 +748,25 @@ function newUiObject () {
 
     /* We will wait to hear the first onHeartBeat in order to confirm the execution was really started */
     let key = thisObject.payload.node.name + '-' + thisObject.payload.node.type + '-' + thisObject.payload.node.id
-    systemEventHandler.listenToEvent(key, 'Heartbeat', undefined, 'UiObject', onResponse, onHeartBeat)
+    systemEventHandler.listenToEvent(key, 'Running', undefined, 'UiObject', onResponse, onRunning)
+
+    onRunningCallBackFunction = callBackFunction
 
     function onResponse (message) {
-      eventSubscriptionIdHeartbeat = message.eventSubscriptionId
+      eventSubscriptionIdOnRunning = message.eventSubscriptionId
     }
 
-    function onHeartBeat () {
+    function onRunning () {
       if (thisObject.payload === undefined) { return }
+
       let key = thisObject.payload.node.name + '-' + thisObject.payload.node.type + '-' + thisObject.payload.node.id
-      systemEventHandler.stopListening(key, eventSubscriptionIdHeartbeat, 'UiObject')
+      systemEventHandler.stopListening(key, eventSubscriptionIdOnRunning, 'UiObject')
+
+      thisObject.isRunning = true
 
       if (callBackFunction !== undefined) {
         callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE)
+        onRunningCallBackFunctionWasCalled = true
       }
     }
 
@@ -629,8 +785,6 @@ function newUiObject () {
       type: 'Secondary Action Already Executed'
     }
     stop(callBackFunction, event)
-
-    thisObject.isRunning = true
   }
 
   function stop (callBackFunction, event) {
@@ -653,6 +807,10 @@ function newUiObject () {
         thisObject.circularProgressBar = undefined
       }
       thisObject.isRunning = false
+      hasValue = false
+      hasPercentage = false
+      hasStatus = false
+      lastHeartBeat = undefined
     }
   }
 
@@ -668,8 +826,10 @@ function newUiObject () {
       }
       if (nodeDefinition.alternativeIcons === 'Use Reference Grandparent') {
         if (thisObject.payload.node.payload.referenceParent !== undefined) {
-          if (thisObject.payload.node.payload.referenceParent.payload.referenceParent !== undefined) {
-            nodeToUse = thisObject.payload.node.payload.referenceParent.payload.referenceParent
+          if (thisObject.payload.node.payload.referenceParent.payload !== undefined) {
+            if (thisObject.payload.node.payload.referenceParent.payload.referenceParent !== undefined) {
+              nodeToUse = thisObject.payload.node.payload.referenceParent.payload.referenceParent
+            }
           }
         }
       }
@@ -778,6 +938,8 @@ function newUiObject () {
   function drawMiddleground () {
     if (thisObject.isOnFocus === false) {
       drawValue()
+      drawPercentage()
+      drawStatus()
       drawText()
       thisObject.uiObjectTitle.draw()
     }
@@ -856,6 +1018,8 @@ function newUiObject () {
 
       drawErrorMessage()
       drawValue()
+      drawPercentage()
+      drawStatus()
       drawText()
 
       if (drawTitle === true) {
@@ -865,6 +1029,7 @@ function newUiObject () {
   }
 
   function drawChainLine () {
+    if (canvas.floatingSpace.drawChainLines === false) { return }
     if (thisObject.payload.chainParent === undefined) { return }
 
     let targetPoint = {
@@ -880,6 +1045,11 @@ function newUiObject () {
     targetPoint = canvas.floatingSpace.container.frame.frameThisPoint(targetPoint)
     position = thisObject.container.frame.frameThisPoint(position)
 
+    if (canvas.floatingSpace.inMapMode === true) {
+      targetPoint = canvas.floatingSpace.transformPointToMap(targetPoint)
+      position = canvas.floatingSpace.transformPointToMap(position)
+    }
+
     if (thisObject.container.frame.radius > 1) {
       let LINE_STYLE = UI_COLOR.TITANIUM_YELLOW
       if (thisObject.payload.floatingObject.angleToParent !== ANGLE_TO_PARENT.NOT_FIXED) {
@@ -888,6 +1058,18 @@ function newUiObject () {
       if (thisObject.payload.floatingObject.isFrozen === true) {
         LINE_STYLE = UI_COLOR.TURQUOISE
       }
+      if (newUiObjectCounter > 0) {
+        LINE_STYLE = UI_COLOR.GREY
+      }
+
+      browserCanvasContext.beginPath()
+      browserCanvasContext.moveTo(position.x, position.y)
+      browserCanvasContext.lineTo(targetPoint.x, targetPoint.y)
+      browserCanvasContext.strokeStyle = 'rgba(' + LINE_STYLE + ', 1)'
+      browserCanvasContext.setLineDash([0, chainLineCounter, 2, 3, 0, 500 - chainLineCounter])
+      browserCanvasContext.lineWidth = 2
+      browserCanvasContext.stroke()
+      browserCanvasContext.setLineDash([0, 0])
 
       browserCanvasContext.beginPath()
       browserCanvasContext.moveTo(position.x, position.y)
@@ -920,6 +1102,7 @@ function newUiObject () {
   }
 
   function drawReferenceLine () {
+    if (canvas.floatingSpace.drawReferenceLines === false) { return }
     if (thisObject.payload.referenceParent === undefined) { return }
     if (thisObject.payload.referenceParent.payload === undefined) { return }
     if (thisObject.payload.referenceParent.payload.floatingObject === undefined) { return }
@@ -938,6 +1121,11 @@ function newUiObject () {
     targetPoint = canvas.floatingSpace.container.frame.frameThisPoint(targetPoint)
     position = thisObject.container.frame.frameThisPoint(position)
 
+    if (canvas.floatingSpace.inMapMode === true) {
+      position = canvas.floatingSpace.transformPointToMap(position)
+      targetPoint = canvas.floatingSpace.transformPointToMap(targetPoint)
+    }
+
     let LINE_STYLE = UI_COLOR.GREY
 
     if (thisObject.container.frame.radius > 1) {
@@ -954,7 +1142,7 @@ function newUiObject () {
       browserCanvasContext.moveTo(position.x, position.y)
       browserCanvasContext.lineTo(targetPoint.x, targetPoint.y)
       browserCanvasContext.strokeStyle = 'rgba(' + LINE_STYLE + ', 1)'
-      browserCanvasContext.setLineDash([1, 9, 2, 8, 3, 7, 4, 6, 0, 500])
+      browserCanvasContext.setLineDash([0, referenceLineCounter, 1, 9, 2, 8, 3, 7, 4, 6, 0, 500 - referenceLineCounter])
       browserCanvasContext.lineWidth = 4
       browserCanvasContext.stroke()
       browserCanvasContext.setLineDash([0, 0])
@@ -980,6 +1168,10 @@ function newUiObject () {
 
     position = thisObject.container.frame.frameThisPoint(position)
 
+    if (canvas.floatingSpace.inMapMode === true) {
+      position = canvas.floatingSpace.transformPointToMap(position)
+    }
+
     let radius = thisObject.container.frame.radius
             /* Label Text */
     let labelPoint
@@ -1002,6 +1194,16 @@ function newUiObject () {
           y: position.y + radius * 4 / 5 + fontSize * FONT_ASPECT_RATIO + 15
         }
 
+        if (canvas.floatingSpace.inMapMode === true) {
+          labelPoint.y = labelPoint.y - 20
+          let nodeDefinition = APP_SCHEMA_MAP.get(thisObject.payload.node.type)
+          if (nodeDefinition !== undefined) {
+            if (nodeDefinition.isHierarchyHead !== true) {
+              return
+            }
+          }
+        }
+
         browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
         browserCanvasContext.fillStyle = thisObject.payload.floatingObject.labelStrokeStyle
         browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
@@ -1020,6 +1222,10 @@ function newUiObject () {
 
     position = thisObject.container.frame.frameThisPoint(position)
 
+    if (canvas.floatingSpace.inMapMode === true) {
+      position = canvas.floatingSpace.transformPointToMap(position)
+    }
+
     let radius = thisObject.container.frame.radius * 3.5
             /* Label Text */
     let labelPoint
@@ -1050,6 +1256,8 @@ function newUiObject () {
 
   function drawValue () {
     if (hasValue === false) { return }
+    if (canvas.floatingSpace.inMapMode === true) { return }
+    // if (currentValue === undefined || currentValue === '') { return }
 
 /* Text Follows */
     let position = {
@@ -1059,7 +1267,11 @@ function newUiObject () {
 
     position = thisObject.container.frame.frameThisPoint(position)
 
-    let radius = thisObject.container.frame.radius * 1.5
+    if (canvas.floatingSpace.inMapMode === true) {
+      position = canvas.floatingSpace.transformPointToMap(position)
+    }
+
+    let radius = thisObject.container.frame.radius * 1.35
             /* Label Text */
     let labelPoint
     let fontSize = thisObject.payload.floatingObject.currentFontSize * 6 / 4
@@ -1075,6 +1287,53 @@ function newUiObject () {
         }
       }
 
+      if (label !== undefined) {
+        if (label.length > MAX_LABEL_LENGTH) {
+          label = label.substring(0, MAX_LABEL_LENGTH) + '...'
+        }
+
+        if (label.length > 30) {
+          fontSize = fontSize / 2
+        }
+
+        labelPoint = {
+          x: position.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 10,
+          y: position.y + radius * 7 / 5 + fontSize * FONT_ASPECT_RATIO + 15
+        }
+
+        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TURQUOISE + ', 1)'
+        browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
+      }
+    }
+  }
+
+  function drawPercentage () {
+    if (hasPercentage === false) { return }
+    if (canvas.floatingSpace.inMapMode === true) { return }
+
+    let position = {
+      x: 0,
+      y: 0
+    }
+
+    position = thisObject.container.frame.frameThisPoint(position)
+
+    if (canvas.floatingSpace.inMapMode === true) {
+      position = canvas.floatingSpace.transformPointToMap(position)
+    }
+
+    let radius = thisObject.container.frame.radius * 1.75
+            /* Label Text */
+    let labelPoint
+    let fontSize = thisObject.payload.floatingObject.currentFontSize * 6 / 4
+    let label
+
+    if (radius > 6) {
+      const MAX_LABEL_LENGTH = 65
+
+      label = Number(currentPercentage).toFixed(0) + '%'
+
       if (label !== undefined) {
         if (label.length > MAX_LABEL_LENGTH) {
           label = label.substring(0, MAX_LABEL_LENGTH) + '...'
@@ -1092,6 +1351,49 @@ function newUiObject () {
     }
   }
 
+  function drawStatus () {
+    if (hasStatus === false) { return }
+    if (canvas.floatingSpace.inMapMode === true) { return }
+
+    let position = {
+      x: 0,
+      y: 0
+    }
+
+    position = thisObject.container.frame.frameThisPoint(position)
+
+    if (canvas.floatingSpace.inMapMode === true) {
+      position = canvas.floatingSpace.transformPointToMap(position)
+    }
+
+    let radius = thisObject.container.frame.radius * 1.4
+            /* Label Text */
+    let labelPoint
+    let fontSize = thisObject.payload.floatingObject.currentFontSize * 6 / 4 / 2
+    let label
+
+    if (radius > 6) {
+      const MAX_LABEL_LENGTH = 65
+
+      label = currentStatus
+
+      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 - 10,
+          y: position.y - radius * 7 / 5 + fontSize * FONT_ASPECT_RATIO + 15
+        }
+
+        browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 1)'
+        browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
+      }
+    }
+  }
+
   function addIndexNumber (label) {
     switch (thisObject.payload.node.type) {
       case 'Phase': {
@@ -1162,6 +1464,10 @@ function newUiObject () {
 
     position = thisObject.container.frame.frameThisPoint(position)
 
+    if (canvas.floatingSpace.inMapMode === true) {
+      position = canvas.floatingSpace.transformPointToMap(position)
+    }
+
     let radius = thisObject.container.frame.radius
 
     if (radius > 0.5) {
@@ -1173,7 +1479,14 @@ function newUiObject () {
       }
 
       visiblePosition = thisObject.container.frame.frameThisPoint(visiblePosition)
-      visiblePosition = thisObject.fitFunction(visiblePosition)
+
+      if (canvas.floatingSpace.inMapMode === true) {
+        visiblePosition = canvas.floatingSpace.transformPointToMap(visiblePosition)
+        radius = canvas.floatingSpace.transformRadiusToMap(radius)
+        VISIBLE_RADIUS = canvas.floatingSpace.transformRadiusToMap(VISIBLE_RADIUS)
+      } else {
+        visiblePosition = thisObject.fitFunction(visiblePosition)
+      }
 
       browserCanvasContext.beginPath()
       browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
@@ -1194,7 +1507,10 @@ function newUiObject () {
       let nodeDefinition = APP_SCHEMA_MAP.get(thisObject.payload.node.type)
       if (nodeDefinition !== undefined) {
         if (nodeDefinition.isHierarchyHead === true) {
-          VISIBLE_RADIUS = thisObject.container.frame.radius * 2
+          VISIBLE_RADIUS = thisObject.payload.floatingObject.currentHierarchyRing * 2.8
+          if (canvas.floatingSpace.inMapMode === true) {
+            VISIBLE_RADIUS = canvas.floatingSpace.transformRadiusToMap(VISIBLE_RADIUS)
+          }
           let OPACITY = 1
 
           browserCanvasContext.beginPath()
@@ -1364,7 +1680,15 @@ function newUiObject () {
         let additionalImageSize = 0
         if (thisObject.isExecuting === true || isReadyToReferenceAttach === true || isReadyToChainAttach === true) { additionalImageSize = 20 }
         let totalImageSize = additionalImageSize + thisObject.payload.floatingObject.currentImageSize
-
+        if (canvas.floatingSpace.inMapMode === true) {
+          totalImageSize = canvas.floatingSpace.transformImagesizeToMap(totalImageSize)
+          let nodeDefinition = APP_SCHEMA_MAP.get(thisObject.payload.node.type)
+          if (nodeDefinition !== undefined) {
+            if (nodeDefinition.isHierarchyHead !== true) {
+              totalImageSize = totalImageSize / 4
+            }
+          }
+        }
         browserCanvasContext.drawImage(
           icon, position.x - totalImageSize / 2,
           position.y - totalImageSize / 2,
@@ -1389,3 +1713,4 @@ function newUiObject () {
     }
   }
 }
+

FloatingSpace/UiObjectConstructor.js

@@ -84,7 +84,7 @@ function newUiObjectConstructor () {
         for (let j = 0; j < menuItems.length; j++) {
           let item = menuItems[j]
           item.angle = undefined
-          if (item.action.indexOf('Add ') >= 0 && item.action.indexOf('Missing') >= 0) {
+          if (item.action.indexOf('Add Missing Children') >= 0) {
             item.action = 'Add Missing Children'
           }
           if (item.action.indexOf('Delete ') >= 0) {
@@ -134,7 +134,7 @@ function newUiObjectConstructor () {
         visible: true,
         iconPathOn: 'menu-fix-pinned',
         iconPathOff: 'menu-fix-unpinned',
-        rawRadius: 8,
+        rawRadius: 12,
         targetRadius: 0,
         currentRadius: 0,
         ring: 1
@@ -149,7 +149,7 @@ function newUiObjectConstructor () {
         label: undefined,
         visible: true,
         icons: ['angle-to-parent-000', 'angle-to-parent-360', 'angle-to-parent-180', 'angle-to-parent-090', 'angle-to-parent-045'],
-        rawRadius: 8,
+        rawRadius: 12,
         targetRadius: 0,
         currentRadius: 0,
         ring: 1
@@ -164,7 +164,7 @@ function newUiObjectConstructor () {
         label: undefined,
         visible: true,
         icons: ['distance-to-parent-000', 'distance-to-parent-025', 'distance-to-parent-050', 'distance-to-parent-100', 'distance-to-parent-150', 'distance-to-parent-200'],
-        rawRadius: 8,
+        rawRadius: 12,
         targetRadius: 0,
         currentRadius: 0,
         ring: 1
@@ -180,7 +180,7 @@ function newUiObjectConstructor () {
         visible: true,
         iconPathOn: 'menu-mobility-unfreeze',
         iconPathOff: 'menu-mobility-freeze',
-        rawRadius: 8,
+        rawRadius: 12,
         targetRadius: 0,
         currentRadius: 0,
         ring: 1
@@ -196,7 +196,7 @@ function newUiObjectConstructor () {
         visible: true,
         iconPathOn: 'menu-tree-plus',
         iconPathOff: 'menu-tree-minus',
-        rawRadius: 8,
+        rawRadius: 12,
         targetRadius: 0,
         currentRadius: 0,
         ring: 1
@@ -210,7 +210,7 @@ function newUiObjectConstructor () {
         visible: true,
         iconPathOn: 'menu-backup',
         iconPathOff: 'menu-backup',
-        rawRadius: 8,
+        rawRadius: 12,
         targetRadius: 0,
         currentRadius: 0,
         ring: 2
@@ -224,7 +224,7 @@ function newUiObjectConstructor () {
         visible: true,
         iconPathOn: 'clone',
         iconPathOff: 'clone',
-        rawRadius: 8,
+        rawRadius: 12,
         targetRadius: 0,
         currentRadius: 0,
         ring: 2
@@ -239,13 +239,56 @@ function newUiObjectConstructor () {
           visible: true,
           iconPathOn: 'menu-share',
           iconPathOff: 'menu-share',
-          rawRadius: 8,
+          rawRadius: 12,
           targetRadius: 0,
           currentRadius: 0,
           ring: 2
         }
       )
     }
+    menuItemsInitialValues.push(
+      {
+        action: 'Remove Parent',
+        actionFunction: floatingObject.payload.onMenuItemClick,
+        label: undefined,
+        visible: true,
+        iconPathOn: 'detach',
+        iconPathOff: 'detach',
+        rawRadius: 12,
+        targetRadius: 0,
+        currentRadius: 0,
+        ring: 3
+      }
+        )
+    menuItemsInitialValues.push(
+      {
+        action: 'Remove Reference',
+        actionFunction: floatingObject.payload.onMenuItemClick,
+        label: undefined,
+        visible: true,
+        iconPathOn: 'delink',
+        iconPathOff: 'delink',
+        rawRadius: 12,
+        targetRadius: 0,
+        currentRadius: 0,
+        ring: 3
+      }
+            )
+
+    menuItemsInitialValues.push(
+      {
+        action: 'Open Documentation',
+        actionFunction: floatingObject.payload.onMenuItemClick,
+        label: undefined,
+        visible: true,
+        iconPathOn: 'help',
+        iconPathOff: 'help',
+        rawRadius: 12,
+        targetRadius: 0,
+        currentRadius: 0,
+        ring: 4
+      }
+    )
   }
 
   function getMenuItemsInitialValues (uiObject, floatingObject, payload) {
@@ -304,7 +347,7 @@ function newUiObjectConstructor () {
         }
 
         if (newMenuItem.rawRadius === undefined) {
-          newMenuItem.rawRadius = 8
+          newMenuItem.rawRadius = 12
         }
 
         if (newMenuItem.targetRadius === undefined) {
@@ -327,7 +370,10 @@ function newUiObjectConstructor () {
   function setFloatingObjectBasicProperties (floatingObject, payload) {
     const FRICTION = 0.95
     const INITIAL_FRICTION = 0.97
-    const INITIAL_FONT_SIZE = 12
+    const INITIAL_FONT_SIZE = 12 * 1.5
+    const INITIAL_RADIOUS = 45 * 1.5
+    const INITIAL_IMAGE_SIZE = 80 * 1.2
+    const INITIAL_HIERARCHY_RING = 20
 
     switch (payload.node.type) {
       case 'Workspace': {
@@ -374,8 +420,9 @@ function newUiObjectConstructor () {
       floatingObject.friction = INITIAL_FRICTION
 
       floatingObject.initializeMass(500)
-      floatingObject.initializeRadius(45)
-      floatingObject.initializeImageSize(80)
+      floatingObject.initializeRadius(INITIAL_RADIOUS)
+      floatingObject.initializeHierarchyRing(INITIAL_HIERARCHY_RING)
+      floatingObject.initializeImageSize(INITIAL_IMAGE_SIZE)
       floatingObject.initializeFontSize(INITIAL_FONT_SIZE)
 
       floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
@@ -385,8 +432,9 @@ function newUiObjectConstructor () {
       floatingObject.friction = INITIAL_FRICTION
 
       floatingObject.initializeMass(600)
-      floatingObject.initializeRadius(45)
-      floatingObject.initializeImageSize(80)
+      floatingObject.initializeRadius(INITIAL_RADIOUS)
+      floatingObject.initializeHierarchyRing(INITIAL_HIERARCHY_RING)
+      floatingObject.initializeImageSize(INITIAL_IMAGE_SIZE)
       floatingObject.initializeFontSize(INITIAL_FONT_SIZE)
 
       floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
@@ -400,8 +448,9 @@ function newUiObjectConstructor () {
       floatingObject.friction = INITIAL_FRICTION
 
       floatingObject.initializeMass(300)
-      floatingObject.initializeRadius(40)
-      floatingObject.initializeImageSize(70)
+      floatingObject.initializeRadius(INITIAL_RADIOUS - 5)
+      floatingObject.initializeHierarchyRing(INITIAL_HIERARCHY_RING)
+      floatingObject.initializeImageSize(INITIAL_IMAGE_SIZE - 10)
       floatingObject.initializeFontSize(INITIAL_FONT_SIZE)
 
       floatingObject.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 1)'
@@ -415,8 +464,9 @@ function newUiObjectConstructor () {
       floatingObject.friction = INITIAL_FRICTION
 
       floatingObject.initializeMass(150)
-      floatingObject.initializeRadius(35)
-      floatingObject.initializeImageSize(60)
+      floatingObject.initializeRadius(INITIAL_RADIOUS - 10)
+      floatingObject.initializeHierarchyRing(INITIAL_HIERARCHY_RING)
+      floatingObject.initializeImageSize(INITIAL_IMAGE_SIZE - 20)
       floatingObject.initializeFontSize(INITIAL_FONT_SIZE)
 
       floatingObject.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)'
@@ -430,8 +480,9 @@ function newUiObjectConstructor () {
       floatingObject.friction = INITIAL_FRICTION
 
       floatingObject.initializeMass(75)
-      floatingObject.initializeRadius(30)
-      floatingObject.initializeImageSize(50)
+      floatingObject.initializeRadius(INITIAL_RADIOUS - 15)
+      floatingObject.initializeHierarchyRing(INITIAL_HIERARCHY_RING)
+      floatingObject.initializeImageSize(INITIAL_IMAGE_SIZE - 30)
       floatingObject.initializeFontSize(INITIAL_FONT_SIZE)
 
       floatingObject.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 1)'
@@ -445,8 +496,9 @@ function newUiObjectConstructor () {
       floatingObject.friction = INITIAL_FRICTION
 
       floatingObject.initializeMass(50)
-      floatingObject.initializeRadius(25)
-      floatingObject.initializeImageSize(40)
+      floatingObject.initializeRadius(INITIAL_RADIOUS - 20)
+      floatingObject.initializeHierarchyRing(INITIAL_HIERARCHY_RING)
+      floatingObject.initializeImageSize(INITIAL_IMAGE_SIZE - 40)
       floatingObject.initializeFontSize(INITIAL_FONT_SIZE)
 
       floatingObject.fillStyle = 'rgba(' + UI_COLOR.RED + ', 1)'
@@ -456,8 +508,9 @@ function newUiObjectConstructor () {
       floatingObject.friction = INITIAL_FRICTION
 
       floatingObject.initializeMass(25)
-      floatingObject.initializeRadius(20)
-      floatingObject.initializeImageSize(30)
+      floatingObject.initializeRadius(INITIAL_RADIOUS - 25)
+      floatingObject.initializeHierarchyRing(INITIAL_HIERARCHY_RING)
+      floatingObject.initializeImageSize(INITIAL_IMAGE_SIZE - 50)
       floatingObject.initializeFontSize(INITIAL_FONT_SIZE)
 
       floatingObject.fillStyle = 'rgba(' + UI_COLOR.RED + ', 1)'
@@ -467,6 +520,7 @@ function newUiObjectConstructor () {
   }
 
   function destroyUiObject (payload) {
+    if (payload === undefined) { return }
     floatingLayer.removeFloatingObject(payload.floatingObject.handle)
 
     payload.floatingObject.finalize()

FloatingSpace/UiObjectTitle.js

@@ -136,11 +136,38 @@ function newUiObjectTitle () {
             }
             break
           }
+          case 'Use Reference Parent Parent Parent': {
+            let nodeToUse = thisObject.payload.node.payload.referenceParent
+            if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
+              nodeToUse = thisObject.payload.node.payload.referenceParent.payload.parentNode
+              if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
+                nodeToUse = thisObject.payload.node.payload.referenceParent.payload.parentNode.payload.parentNode
+                if (nodeToUse !== undefined && nodeToUse.payload !== undefined) {
+                  thisObject.payload.title = thisObject.payload.title + separator + nodeToUse.payload.title
+                  thisObject.payload.node.name = thisObject.payload.node.name + separator + nodeToUse.payload.node.name
+                }
+              }
+            }
+            break
+          }
+          default: {
+            if (titleReference.indexOf('Use Child @') === 0) {
+              let propertyName = titleReference.substring(titleReference.indexOf('@') + 1, titleReference.length)
+              let childNode = thisObject.payload.node[propertyName]
+              thisObject.payload.title = thisObject.payload.title + separator + childNode.name
+              thisObject.payload.node.name = thisObject.payload.node.name + separator + childNode.name
+            }
+          }
         }
         separator = ' '
       }
     }
 
+    /* The name becomes the title. */
+    if (thisObject.payload.node.name !== undefined) {
+      thisObject.payload.title = thisObject.payload.node.name
+    }
+
     let title = trimTitle(thisObject.payload.title)
 
     /* Here we set the dimensions and position of this object */
@@ -202,6 +229,8 @@ function newUiObjectTitle () {
         thisObject.payload.node.name = input.value
       }
     }
+    let inputDiv = document.getElementById('inputDiv')
+    inputDiv.style = 'position:absolute; top:' + '-100' + 'px; left:' + '-100' + 'px; z-index:1; '
   }
 
   function enterEditMode () {
@@ -279,6 +308,19 @@ function newUiObjectTitle () {
 
           labelPoint = thisObject.container.frame.frameThisPoint(labelPoint)
 
+          if (canvas.floatingSpace.inMapMode === true) {
+            labelPoint = canvas.floatingSpace.transformPointToMap(labelPoint)
+            labelPoint.x = labelPoint.x - label.length / 2 * fontSize * FONT_ASPECT_RATIO
+            labelPoint.y = labelPoint.y - 35
+
+            let nodeDefinition = APP_SCHEMA_MAP.get(thisObject.payload.node.type)
+            if (nodeDefinition !== undefined) {
+              if (nodeDefinition.isHierarchyHead !== true) {
+                return
+              }
+            }
+          }
+
           browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
           browserCanvasContext.fillStyle = thisObject.payload.floatingObject.labelStrokeStyle
           browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
@@ -296,3 +338,4 @@ function newUiObjectTitle () {
     return title
   }
 }
+

Frame.js

@@ -21,6 +21,7 @@ function newFrame () {
     isThisPointHere: isThisPointHere,   // This function return true is the point received as parameter lives within this frame.
     isThisScreenPointHere: isThisScreenPointHere,
     isInViewPort: isInViewPort,
+    isCenterInViewPort: isCenterInViewPort,
     initialize: initialize,
     finalize: finalize
   }
@@ -76,6 +77,31 @@ function newFrame () {
     }
   }
 
+  function isCenterInViewPort () {
+    /* This function is usefull to know if the object who has this frame is currently appearing at least in part at the canvas.chartingSpace.viewport */
+
+    point1 = {
+      x: thisObject.width * 40 / 100,
+      y: thisObject.height * 40 / 100
+    }
+
+    point3 = {
+      x: thisObject.width * 40 / 100,
+      y: thisObject.height * 40 / 100
+    }
+
+        /* Now the transformations. */
+
+    point1 = transformThisPoint(point1, thisObject.container)
+    point3 = transformThisPoint(point3, thisObject.container)
+
+    if (point1.x < canvas.chartingSpace.viewport.visibleArea.topRight.x && point1.y < canvas.chartingSpace.viewport.visibleArea.bottomRight.y && point3.x > canvas.chartingSpace.viewport.visibleArea.bottomLeft.x && point3.y > canvas.chartingSpace.viewport.visibleArea.topLeft.y) {
+      return true
+    } else {
+      return false
+    }
+  }
+
   function frameThisPoint (point) {
    /* We need not to modify the point received, so me make a copy of it. */
 
@@ -183,7 +209,7 @@ function newFrame () {
     }
 
    /* Now we check if the resulting point is whin the current Frame. */
-
+    if (isNaN(checkPoint.x) || isNaN(checkPoint.y)) { return false }
     if (thisObject.type === 'Circle') {
       let distance = Math.sqrt(Math.pow(thisObject.position.x - point.x, 2) + Math.pow(thisObject.position.y - point.y, 2))
 

Globals.js

@@ -3,20 +3,7 @@
 
 const CANVAS_APP_NAME = 'Canvas App'
 
-const SUPPORTED_EXCHANGES = ["Poloniex"];
-const SUPPORTED_MARKETS = [
-  {
-      baseAsset: "USDT",
-      quotedAsset: "BTC",
-  }
-];
-const DEFAULT_EXCHANGE = "Poloniex";
-const DEFAULT_MARKET = {
-    baseAsset: "USDT",
-    quotedAsset: "BTC",
-};
-
-UI_COLOR = {
+const UI_COLOR = {
     DARK: "48, 48, 54",
     LIGHT: "234, 226, 222",
     GREY: "150, 150, 150",
@@ -36,15 +23,26 @@ UI_COLOR = {
 
 /* User Interface Fonts */
 
-UI_FONT = {
+const UI_FONT = {
     PRIMARY: "Saira Condensed",
     SECONDARY: "Source Code Pro"
 };
 
+const MAC_AMOUNT_FACTOR = 5
+const IS_MAC = navigator.platform.toUpperCase().indexOf('MAC') >= 0
+
+const DOUBLE_CLICK_ZOOM_OUT_LEVEL = 0
+const DOUBLE_CLICK_ZOOM_IN_LEVEL = 6
+const DOUBLE_CLICK_ZOOM_IN_IN_LEVEL = 7
+
 const DEBUG = {}
-const ZOOM_OUT_THRESHOLD_FOR_HIDDING_PANELS = 5 // This regulates some behavious changes that happens when the user zoom out below this level.
-const ZOOM_OUT_THRESHOLD_FOR_CHANGING_TIME_FRAME = 5  // This help regulate when to change the Time Frame base on the level of zoom out.
-const ZOOM_OUT_THRESHOLD_FOR_PACKING_OBJECTS_AT_THE_BOTTOM_OR_TOP_OF_VIEWPORT = 5  
+const ZOOM_OUT_THRESHOLD_FOR_NOT_HIDDING_PANELS = 12
+const ZOOM_OUT_THRESHOLD_FOR_HIDDING_PANELS = 7 
+const ZOOM_OUT_THRESHOLD_FOR_CHANGING_TIME_FRAME = 3  // This help regulate when to change the Time Frame base on the level of zoom out.
+const ZOOM_OUT_THRESHOLD_FOR_PACKING_OBJECTS_AT_THE_BOTTOM_OR_TOP_OF_VIEWPORT = 2
+const ZOOM_OUT_THRESHOLD_FOR_PLOTTING_IN_LOW_RESOLUTION = 3
+const ZOOM_OUT_THRESHOLD_FOR_DISPLAYING_TIME_MACHINES_ICONIZED = 5
+const ZOOM_OUT_THRESHOLD_FOR_DISPLAYING_SCALES = 3
 
 let FONT_ASPECT_RATIO = 0.32;
 
@@ -75,7 +73,7 @@ const DISTANCE_TO_PARENT = {
 
 /* User Interface Panels */
 
-UI_PANEL = {
+const UI_PANEL = {
     WIDTH: {
         SMALL: 100,
         NORMAL: 150,
@@ -121,7 +119,7 @@ let dailyFilePeriods =
 
 dailyFilePeriods = JSON.parse(dailyFilePeriods);
 
-SHOW_ANIMATION_PERFORMACE = false;
+let SHOW_ANIMATION_PERFORMACE = false;
 
 let testUser = window.localStorage.getItem("test_user")
 let LOGGED_IN_USER_LOCAL_STORAGE_KEY
@@ -135,10 +133,6 @@ if (testUser !== null) {
   LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE_KEY = "access_token"
 }
 
-const DEFAULT_CONFIG_TEXT = '// Write your config here'
-const DEFAULT_FORMULA_TEXT = '// Write your formula here'
-const DEFAULT_CODE_TEXT = '// Write your code here'
-
 const MAX_DEFAULT_RATE_SCALE_VALUE = 35000; // This is needed to know the scale of the market time line.
 
 const WIDHTER_VOLUME_BAR_BASE_FACTOR = 2.5;
@@ -165,6 +159,8 @@ const _3_MINUTES_IN_MILISECONDS = 3 * 60 * 1000;
 const _2_MINUTES_IN_MILISECONDS = 2 * 60 * 1000;
 const _1_MINUTE_IN_MILISECONDS = 1 * 60 * 1000;
 
+
+
 let NEW_SESSION_INITIAL_DATE = new Date();  // This value will be overwritten at the canvas.chartingSpace.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 canvas.chartingSpace.viewport.initialize if the user had a prevous session with this same browser.
@@ -210,8 +206,8 @@ const PERIOD_01_MIN = "01-min";
 We define here the size of the chartingSpace. It has to bee enough big in order to accomodate all the charts we expect to display in this space.
 */
 
-const TIME_MACHINE_WIDTH = 320;
-const TIME_MACHINE_HEIGHT = 120;
+const TIME_MACHINE_WIDTH = 8;
+const TIME_MACHINE_HEIGHT = 8;
 
 let mediaRecorder // to downloadText canvas animation as a mediaRecorder
 let areWeRecording = false

Panels/Layer.js

@@ -11,6 +11,16 @@ function newLayer () {
     payload: undefined,
     definition: undefined,
     panels: undefined,
+    baseAsset: undefined,
+    quotedAsset: undefined,
+    market: undefined,
+    exchange: undefined,
+    plotterModule: undefined,
+    exchangeIcon: undefined,
+    plotterTypeIcon: undefined,
+    baseAssetIcon: undefined,
+    quotedAssetIcon: undefined,
+    checkStatusAtShutDown: checkStatusAtShutDown,
     physics: physics,
     draw: draw,
     turnOff: turnOff,
@@ -79,6 +89,8 @@ function newLayer () {
   return thisObject
 
   function finalize () {
+    thisObject.container.eventHandler.stopListening(onMouseClickEventSuscriptionId)
+
     thisObject.container.finalize()
     thisObject.eventHandler.finalize()
     thisObject.container = undefined
@@ -107,7 +119,15 @@ function newLayer () {
 
     panelsVisibleButton = undefined
 
-    thisObject.container.eventHandler.stopListening(onMouseClickEventSuscriptionId)
+    thisObject.baseAsset = undefined
+    thisObject.quotedAsset = undefined
+    thisObject.market = undefined
+    thisObject.exchange = undefined
+    thisObject.plotterModule = undefined
+    thisObject.exchangeIcon = undefined
+    thisObject.plotterTypeIcon = undefined
+    thisObject.baseAssetIcon = undefined
+    thisObject.quotedAssetIcon = undefined
   }
 
   function initialize (callBackFunction) {
@@ -170,12 +190,58 @@ function newLayer () {
        /* Lets listen to our own events to react when we have a Mouse Click */
       onMouseClickEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
 
+      /* Get ready to draw this layer */
+      thisObject.baseAsset = thisObject.definition.referenceParent.parentNode.referenceParent.baseAsset.referenceParent
+      thisObject.quotedAsset = thisObject.definition.referenceParent.parentNode.referenceParent.quotedAsset.referenceParent
+      thisObject.market = thisObject.baseAsset.code.codeName + '/' + thisObject.quotedAsset.code.codeName
+      thisObject.exchange = thisObject.definition.referenceParent.parentNode.referenceParent.parentNode.parentNode
+      thisObject.plotterModule = thisObject.definition.referenceParent.referenceParent.referenceParent
+
+      thisObject.exchangeIcon = getIcon(thisObject.exchange)
+
+      if (thisObject.plotterModule.code.icon !== undefined) {
+        thisObject.plotterTypeIcon = canvas.designSpace.iconCollection.get(thisObject.plotterModule.code.icon)
+      }
+
+      thisObject.baseAssetIcon = getIcon(thisObject.baseAsset)
+      thisObject.quotedAssetIcon = getIcon(thisObject.quotedAsset)
+
+      function getIcon (node) {
+        let nodeDefinition = APP_SCHEMA_MAP.get(node.type)
+        let iconName
+        if (nodeDefinition.alternativeIcons !== undefined) {
+          for (let i = 0; i < nodeDefinition.alternativeIcons.length; i++) {
+            alternativeIcon = nodeDefinition.alternativeIcons[i]
+            if (alternativeIcon.codeName === node.code.codeName) {
+              iconName = alternativeIcon.iconName
+            }
+          }
+        }
+        if (iconName !== undefined) {
+          icon = canvas.designSpace.iconCollection.get(iconName)
+        } else {
+          icon = canvas.designSpace.iconCollection.get(nodeDefinition.icon)
+        }
+        return icon
+      }
+
       callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE)
     } catch (err) {
       if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) }
     }
   }
 
+  function checkStatusAtShutDown () {
+    /* Mechanism to recover a layer that was left loading the last time the browser was shut dowm. */
+    let storedValue = loadPropertyFromNodeConfig(thisObject.payload, 'status')
+    if (storedValue !== undefined) {
+      if (storedValue === LAYER_STATUS.LOADING) {
+        resetProgressBars()
+        changeStatusTo(LAYER_STATUS.LOADING)
+      }
+    }
+  }
+
   function getContainer (point) {
     if (panelsVisibleButton !== undefined) {
       let container = panelsVisibleButton.getContainer(point)
@@ -454,49 +520,14 @@ function newLayer () {
   }
 
   function drawLayerDisplay () {
-    let baseAsset = thisObject.definition.referenceParent.parentNode.referenceParent.baseAsset.referenceParent
-    let quotedAsset = thisObject.definition.referenceParent.parentNode.referenceParent.quotedAsset.referenceParent
-    let market = baseAsset.code.codeName + '/' + quotedAsset.code.codeName
-    let exchange = thisObject.definition.referenceParent.parentNode.referenceParent.parentNode.parentNode
-    let plotterModule = thisObject.definition.referenceParent.referenceParent.referenceParent
-
     let label1 = thisObject.payload.node.name
-    let label2 = exchange.name.substring(0, 15) + ' - ' + market
+    let label2 = thisObject.exchange.name.substring(0, 15) + ' - ' + thisObject.market
     let label3 = thisObject.status.toUpperCase()
 
     if (label1 !== undefined) {
       label1 = label1.substring(0, 22)
     }
 
-    let icon1 = getIcon(exchange)
-
-    let icon2
-    if (plotterModule.code.icon !== undefined) {
-      icon2 = canvas.designSpace.iconCollection.get(plotterModule.code.icon)
-    }
-
-    let icon3 = getIcon(baseAsset)
-    let icon4 = getIcon(quotedAsset)
-
-    function getIcon (node) {
-      let nodeDefinition = APP_SCHEMA_MAP.get(node.type)
-      let iconName
-      if (nodeDefinition.alternativeIcons !== undefined) {
-        for (let i = 0; i < nodeDefinition.alternativeIcons.length; i++) {
-          alternativeIcon = nodeDefinition.alternativeIcons[i]
-          if (alternativeIcon.codeName === node.code.codeName) {
-            iconName = alternativeIcon.iconName
-          }
-        }
-      }
-      if (iconName !== undefined) {
-        icon = canvas.designSpace.iconCollection.get(iconName)
-      } else {
-        icon = canvas.designSpace.iconCollection.get(nodeDefinition.icon)
-      }
-      return icon
-    }
-
     let backgroundColor = UI_COLOR.BLACK
 
     const RED_LINE_HIGHT = 4
@@ -523,9 +554,9 @@ function newLayer () {
     drawProgressBar(singleFileProgressBar, 1, -47)
     drawProgressBar(fileSequenceProgressBar, 1, -48)
 
-    drawIcon(icon1, 1 / 8, 2 / 10, 0, 0, 14, thisObject.container)
-    drawIcon(icon2, 7 / 8, 2 / 10, 0, 0, 14, thisObject.container)
-    drawIcon(icon3, 3.4 / 8, 2 / 10, 0, 0, 14, thisObject.container)
-    drawIcon(icon4, 4.6 / 8, 2 / 10, 0, 0, 14, thisObject.container)
+    drawIcon(thisObject.exchangeIcon, 1 / 8, 2 / 10, 0, 0, 14, thisObject.container)
+    drawIcon(thisObject.plotterTypeIcon, 7 / 8, 2 / 10, 0, 0, 14, thisObject.container)
+    drawIcon(thisObject.baseAssetIcon, 3.4 / 8, 2 / 10, 0, 0, 14, thisObject.container)
+    drawIcon(thisObject.quotedAssetIcon, 4.6 / 8, 2 / 10, 0, 0, 14, thisObject.container)
   }
 }

Panels/LayersPanel.js

@@ -6,7 +6,8 @@ function newLayersPanel () {
     layers: [],
     payload: undefined,
     isVisible: true,
-    panelTabButton: undefined,
+    upDownButton: undefined,
+    leftRightButton: undefined,
     physics: physics,
     draw: draw,
     getContainer: getContainer,
@@ -18,8 +19,10 @@ function newLayersPanel () {
   thisObject.container.initialize()
   thisObject.container.isDraggeable = true
   thisObject.container.isWheelable = true
+  thisObject.container.detectMouseOver = true
 
   let isInitialized = false
+  let mouseOverCounter = 0
 
   let layersMap = new Map()
   let visibleLayers = []
@@ -36,13 +39,23 @@ function newLayersPanel () {
   let posiblePanelHeight = (layerHeight + LAYER_SEPARATION) * posibleVisibleLayers + headerHeight + footerHeight
 
   let onMouseWheelEventSuscriptionId
+  let onMouseOverEventSubscriptionId
+  let onMouseNotOverEventSubscriptionId
+
+  let isMouseOver
   return thisObject
 
   function finalize () {
     thisObject.container.eventHandler.stopListening(onMouseWheelEventSuscriptionId)
+    thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
+    thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
+
+    thisObject.upDownButton.finalize()
+    thisObject.upDownButton = undefined
+
+    thisObject.leftRightButton.finalize()
+    thisObject.leftRightButton = undefined
 
-    thisObject.panelTabButton.finalize()
-    thisObject.panelTabButton = undefined
     layersMap = undefined
     visibleLayers = undefined
 
@@ -67,25 +80,45 @@ function newLayersPanel () {
     thisObject.container.frame.position = position
     loadFrame(thisObject.payload, thisObject.container.frame)
 
-    thisObject.panelTabButton = newPanelTabButton()
-    thisObject.panelTabButton.parentContainer = thisObject.container
-    thisObject.panelTabButton.container.frame.parentFrame = thisObject.container.frame
-    thisObject.panelTabButton.fitFunction = thisObject.fitFunction
-    thisObject.panelTabButton.initialize()
+    thisObject.upDownButton = newUpDownButton()
+    thisObject.upDownButton.parentContainer = thisObject.container
+    thisObject.upDownButton.container.frame.parentFrame = thisObject.container.frame
+    thisObject.upDownButton.fitFunction = thisObject.fitFunction
+    thisObject.upDownButton.initialize()
+
+    thisObject.leftRightButton = newLeftRightButton()
+    thisObject.leftRightButton.parentContainer = thisObject.container
+    thisObject.leftRightButton.container.frame.parentFrame = thisObject.container.frame
+    thisObject.leftRightButton.fitFunction = thisObject.fitFunction
+    thisObject.leftRightButton.initialize()
 
     onMouseWheelEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
+    onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
+    onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
 
     readObjectState()
 
     isInitialized = true
   }
 
+  function onMouseOver (event) {
+    isMouseOver = true
+  }
+
+  function onMouseNotOver () {
+    isMouseOver = false
+  }
+
   function saveObjectStateVisibleLayers () {
     savePropertyAtNodeConfig(thisObject.payload, 'visibleLayers', desiredVisibleLayers)
   }
 
   function saveObjectStatePanelLocation () {
-    savePropertyAtNodeConfig(thisObject.payload, 'panelLocation', thisObject.panelTabButton.status)
+    let panelLocation = {
+      upOrDown: thisObject.upDownButton.status,
+      leftOrRight: thisObject.leftRightButton.status
+    }
+    savePropertyAtNodeConfig(thisObject.payload, 'panelLocation', panelLocation)
   }
 
   function readObjectState () {
@@ -117,11 +150,16 @@ function newLayersPanel () {
       saveObjectStatePanelLocation() // this overrides any invalid value at the config.
       return
     } else {
-      if (storedValue !== 'up' && storedValue !== 'down') {
+      if (storedValue.upOrDown !== 'up' && storedValue.upOrDown !== 'down') {
         saveObjectStatePanelLocation() // this overrides any invalid value at the config.
         return
       }
-      thisObject.panelTabButton.setStatus(storedValue)
+      if (storedValue.leftOrRight !== 'left' && storedValue.leftOrRight !== 'right') {
+        saveObjectStatePanelLocation() // this overrides any invalid value at the config.
+        return
+      }
+      thisObject.upDownButton.setStatus(storedValue.upOrDown)
+      thisObject.leftRightButton.setStatus(storedValue.leftOrRight)
       saveObjectStatePanelLocation()
     }
   }
@@ -161,7 +199,9 @@ function newLayersPanel () {
         layer.onLayerStatusChangedEventSuscriptionId = layer.container.eventHandler.listenToEvent('Status Changed', onLayerStatusChanged)
         layer.onMouseWheelEventSuscriptionId = layer.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
 
-        return layer
+        layer.checkStatusAtShutDown()
+
+        return
       }
     }
   }
@@ -239,12 +279,17 @@ function newLayersPanel () {
     thisObject.container.eventHandler.raiseEvent('Layer Status Changed', layer)
   }
 
-  function getContainer (point) {
+  function getContainer (point, purpose) {
     if (isInitialized === false || thisObject.visible === false || thisObject.isHidden === true) { return }
     let container
 
-    container = thisObject.panelTabButton.getContainer(point)
-    if (container !== undefined) { return container }
+    if (isMouseOver === true && purpose !== GET_CONTAINER_PURPOSE.MOUSE_OVER) {
+      container = thisObject.upDownButton.getContainer(point)
+      if (container !== undefined) { return container }
+
+      container = thisObject.leftRightButton.getContainer(point)
+      if (container !== undefined) { return container }
+    }
 
      /* First we check if thisObject point is inside thisObject space. */
     if (thisObject.container.frame.isThisPointHere(point, true) === true) {
@@ -261,7 +306,9 @@ function newLayersPanel () {
           checkPoint = thisObject.fitFunction(checkPoint)
 
           if (point.x === checkPoint.x && point.y === checkPoint.y) {
-            return container
+            if (purpose !== GET_CONTAINER_PURPOSE.MOUSE_OVER) {
+              return container
+            }
           }
         }
       }
@@ -293,7 +340,10 @@ function newLayersPanel () {
 
   function physics () {
     if (isInitialized === false) { return }
-    thisObject.panelTabButton.physics()
+    if (thisObject.payload.node === undefined) { return }
+
+    thisObject.upDownButton.physics()
+    thisObject.leftRightButton.physics()
     saveFrame(thisObject.payload, thisObject.container.frame)
     syncWithConfigPhysics()
 
@@ -321,6 +371,7 @@ function newLayersPanel () {
     calculateVisbleLayers()
 
     function syncWithDesignerLayers () {
+      if (thisObject.payload.node === undefined) { return }
       let layerManager = thisObject.payload.node
       for (let p = 0; p < layerManager.layers.length; p++) {
         let layerNode = layerManager.layers[p]
@@ -378,10 +429,18 @@ function newLayersPanel () {
       visibleLayers[i].draw()
     }
     drawScrollBar()
-    thisObject.panelTabButton.draw()
+    if (isMouseOver === true) {
+      thisObject.upDownButton.draw()
+      thisObject.leftRightButton.draw()
+    }
   }
 
   function drawHeader () {
+    if (thisObject.payload === undefined) { return }
+    if (thisObject.payload.node === undefined) { return }
+    if (thisObject.payload.node.payload.parentNode === undefined) { return }
+    if (thisObject.payload.node.payload.parentNode.payload.parentNode === undefined) { return }
+
     let label1 = thisObject.payload.node.payload.parentNode.payload.parentNode.name.substring(0, 18)
     let label2 = thisObject.payload.node.payload.parentNode.name.substring(0, 18)
     let label3 = ''

Panels/LeftRightButton.js

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

Panels/PlotterPanel.js

@@ -22,7 +22,7 @@ function newPlotterPanel () {
 
   let heightFactor = 1
   let currentRecord
-  let panelTabButton
+  let upDownButton
   let panelNode
 
   return thisObject
@@ -35,8 +35,8 @@ function newPlotterPanel () {
 
     heightFactor = undefined
     currentRecord = undefined
-    panelTabButton.finalize()
-    panelTabButton = undefined
+    upDownButton.finalize()
+    upDownButton = undefined
     panelNode = undefined
   }
 
@@ -50,18 +50,18 @@ function newPlotterPanel () {
     thisObject.container.frame.position.x = canvas.chartingSpace.viewport.visibleArea.topRight.x - thisObject.container.frame.width - thisObject.container.frame.width * Math.random() * 8
     thisObject.container.frame.position.y = canvas.chartingSpace.viewport.visibleArea.bottomLeft.y - thisObject.container.frame.height - thisObject.container.frame.height * Math.random() * 1.5
 
-    panelTabButton = newPanelTabButton()
-    panelTabButton.parentContainer = thisObject.container
-    panelTabButton.container.frame.parentFrame = thisObject.container.frame
-    panelTabButton.fitFunction = thisObject.fitFunction
-    panelTabButton.initialize()
+    upDownButton = newUpDownButton()
+    upDownButton.parentContainer = thisObject.container
+    upDownButton.container.frame.parentFrame = thisObject.container.frame
+    upDownButton.fitFunction = thisObject.fitFunction
+    upDownButton.initialize()
   }
 
   function getContainer (point) {
     if (thisObject.isVisible !== true) { return }
     let container
 
-    container = panelTabButton.getContainer(point)
+    container = upDownButton.getContainer(point)
     if (container !== undefined) { return container }
 
     if (thisObject.container.frame.isThisPointHere(point, true) === true) {
@@ -87,7 +87,7 @@ function newPlotterPanel () {
 
     thisObject.container.frame.draw(false, false, true, thisObject.fitFunction)
     plotCurrentRecordData()
-    panelTabButton.draw()
+    upDownButton.draw()
   }
 
   function plotCurrentRecordData () {
@@ -153,33 +153,8 @@ function newPlotterPanel () {
         valuePosition = panelData.code.valuePosition
       }
 
-      printLabel(labelText, X_AXIS, PANEL_HEIGHT * labelPosition / 100 / heightFactor, '1')
-      printLabel(value, X_AXIS, PANEL_HEIGHT * valuePosition / 100 / heightFactor, '0.50')
+      printLabel(labelText, X_AXIS, PANEL_HEIGHT * labelPosition / 100 / heightFactor, '0.60', undefined, undefined, true, thisObject.container, thisObject.fitFunction)
+      printLabel(value, X_AXIS, PANEL_HEIGHT * valuePosition / 100 / heightFactor, '1.00', 15, undefined, true, thisObject.container, thisObject.fitFunction)
     }
-
-    function printLabel (labelToPrint, x, y, opacity) {
-      let labelPoint
-      let fontSize = 10
-
-      browserCanvasContext.font = fontSize + 'px ' + UI_FONT.SECONDARY
-
-      let label = '' + labelToPrint
-
-      let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO
-
-      labelPoint = {
-        x: x - xOffset,
-        y: y
-      }
-
-      labelPoint = thisObject.container.frame.frameThisPoint(labelPoint)
-      labelPoint = thisObject.fitFunction(labelPoint)
-
-      browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + opacity + ')'
-      browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
-    }
-
-    browserCanvasContext.closePath()
-    browserCanvasContext.fill()
   }
 }

Panels/UpDownButton.js

@@ -1,4 +1,4 @@
-function newPanelTabButton () {
+function newUpDownButton () {
   let thisObject = {
     container: undefined,
     fitFunction: undefined,
@@ -16,12 +16,12 @@ function newPanelTabButton () {
    /* Cointainer stuff */
 
   thisObject.container = newContainer()
-  thisObject.container.name = 'Panel Tab Button'
+  thisObject.container.name = 'Up Down Button'
   thisObject.container.initialize()
   thisObject.container.isClickeable = true
-  thisObject.container.frame.containerName = 'Panel Tab Button'
+  thisObject.container.isDraggeable = false
+  thisObject.container.frame.containerName = 'Up Down Button'
 
-  /* Animation to hide the pannel */
   thisObject.status = 'up'
   let upPosition = {}
   let downPosition = {}
@@ -44,12 +44,12 @@ function newPanelTabButton () {
   }
 
   function initialize () {
-    thisObject.container.frame.width = 10
-    thisObject.container.frame.height = 10
+    thisObject.container.frame.width = 12
+    thisObject.container.frame.height = 12
 
-    var position = {
-      x: thisObject.parentContainer.frame.width - 14,
-      y: 1
+    let position = {
+      x: thisObject.container.frame.parentFrame.width * 5.75 / 8 - thisObject.container.frame.width / 2,
+      y: 40 * 4 / 8 - thisObject.container.frame.height / 2
     }
 
     thisObject.container.frame.position = position
@@ -127,19 +127,10 @@ function newPanelTabButton () {
     drawButton()
   }
 
-  function getContainer (point) {
+  function getContainer (point, purpose) {
     let container
-
-       /* First we check if thisObject point is inside thisObject space. */
-
     if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-           /* Now we see which is the inner most container that has it */
-
       return thisObject.container
-    } else {
-           /* This point does not belong to thisObject space. */
-
-      return undefined
     }
   }
 

Plotter.js

@@ -24,7 +24,6 @@ function newPlotter () {
   thisObject.container = container
 
   let coordinateSystem
-  let plotterModuleConfig
   let slotHeight = (canvas.chartingSpace.viewport.visibleArea.bottomRight.y - canvas.chartingSpace.viewport.visibleArea.topLeft.y) / 10  // This is the amount of slots available
   let mustRecalculateDataPoints = false
   let atMousePositionFillStyles = new Map()
@@ -82,7 +81,6 @@ function newPlotter () {
 
       finalizeCoordinateSystem()
       coordinateSystem = undefined
-      plotterModuleConfig = undefined
       slotHeight = undefined
       mustRecalculateDataPoints = undefined
       atMousePositionFillStyles = undefined
@@ -498,6 +496,10 @@ function newPlotter () {
       for (let i = 0; i < records.length; i++) {
         let record = records[i]
 
+        /*
+        In the formulas to create plotters, we allos users to reference the previous record.
+        To enable that we need to link all records to the previous one in this way.
+        */
         if (i == 0) {
           record.previous = record
         } else {
@@ -555,7 +557,7 @@ function newPlotter () {
           if (logged === false) {
             logged = true
           }
-          /* Only calculate the datapoints for this record, if we have not calculate it before. */
+          /* It seems we need to calculate the data points this time. */
           for (let k = 0; k < productDefinition.referenceParent.shapes.chartPoints.length; k++) {
             let chartPoints = productDefinition.referenceParent.shapes.chartPoints[k]
             for (let j = 0; j < chartPoints.points.length; j++) {
@@ -582,13 +584,6 @@ function newPlotter () {
 
               /* Store the data point at the local map */
                 dataPoints.set(point.id, dataPoint)
-
-                if (plotterModuleConfig !== undefined) {
-                  if (plotterModuleConfig.slot !== undefined) {
-                  /* We reset the y coordinate since it will be transformed with another coordinate system to fit into a slot. */
-                    dataPoint.y = (-1) * y * coordinateSystem.scale.y + (plotterModuleConfig.slot.number - 1) * slotHeight + canvas.chartingSpace.viewport.visibleArea.topLeft.y
-                  }
-                }
               }
             }
           }
@@ -769,7 +764,7 @@ function newPlotter () {
         }
       }
 
-      if (coordinateSystem.autoMinYScale === true || coordinateSystem.autosMaxScale === true) {
+      if (coordinateSystem.autoMinYScale === true || coordinateSystem.autoMinYScale === true) {
         mustRecalculateDataPoints = true
       } else {
         mustRecalculateDataPoints = false

PostLoader.js

@@ -1,6 +1,5 @@
 let canvas
 let markets
-let ecosystem = newEcosystem()
 let systemEventHandler
 
 let APP_SCHEMA_MAP = new Map()

Scales/RateScale.js

@@ -14,6 +14,7 @@ function newRateScale () {
     onMouseOverSomeTimeMachineContainer: onMouseOverSomeTimeMachineContainer,
     physics: physics,
     draw: draw,
+    drawBackground: drawBackground,
     drawForeground: drawForeground,
     getContainer: getContainer,
     initialize: initialize,
@@ -56,6 +57,10 @@ function newRateScale () {
 
   let scaleDisplayTimer = 0
   let autoScaleButton
+
+  let wheelDeltaDirection
+  let wheelDeltaCounter = 0
+
   return thisObject
 
   function finalize () {
@@ -134,6 +139,42 @@ function newRateScale () {
   }
 
   function onMouseWheel (event) {
+    if (IS_MAC) {
+      let sensitivity
+      if (event.wheelDelta < 0) {
+        if (event.shiftKey === true) {
+          sensitivity = 20
+        } else {
+          sensitivity = 5
+        }
+        if (wheelDeltaDirection === -1) {
+          wheelDeltaCounter++
+          if (wheelDeltaCounter < sensitivity) {
+            return
+          } else {
+            wheelDeltaCounter = 0
+          }
+        } else {
+          wheelDeltaCounter = 0
+          wheelDeltaDirection = -1
+          return
+        }
+      } else {
+        if (wheelDeltaDirection === 1) {
+          wheelDeltaCounter++
+          if (wheelDeltaCounter < sensitivity) {
+            return
+          } else {
+            wheelDeltaCounter = 0
+          }
+        } else {
+          wheelDeltaCounter = 0
+          wheelDeltaDirection = 1
+          return
+        }
+      }
+    }
+
     if (event.shiftKey === true) {
       autoScaleButton.container.eventHandler.raiseEvent('onMouseWheel', event)
       return
@@ -370,6 +411,10 @@ function newRateScale () {
       thisObject.isVisible = false
       thisObject.payload.isVisible = false
     }
+
+    if (canvas.chartingSpace.viewport.zoomTargetLevel < ZOOM_OUT_THRESHOLD_FOR_DISPLAYING_SCALES) {
+      thisObject.isVisible = false
+    }
   }
 
   function draw () {
@@ -387,13 +432,54 @@ function newRateScale () {
     }
   }
 
+  function drawBackground () {
+    drawScale()
+  }
+
+  function drawScale () {
+    const SEPARATION = 50
+    const NUMBER_OF_LABELS = Math.trunc(canvas.chartingSpace.viewport.height / SEPARATION)
+    const FONT_SIZE = 15
+
+    for (let i = 0; i <= NUMBER_OF_LABELS; i++) {
+      let ratePoint1 = {
+        x: 0,
+        y: TOP_SPACE_HEIGHT + SEPARATION * (i + 1)
+      }
+      let ratePoint2 = {
+        x: 0,
+        y: TOP_SPACE_HEIGHT + SEPARATION * (i + 0)
+      }
+
+      let rate = getRateFromPointAtBrowserCanvas(ratePoint1, rateCalculationsContainer, coordinateSystem)
+      let labels = scaleLabels(rate)
+      let decimalsDisplace = labels[1].length * FONT_SIZE * FONT_ASPECT_RATIO
+
+      let fitPoint1 = thisObject.fitFunction(ratePoint1)
+      let fitPoint2 = thisObject.fitFunction(ratePoint2)
+
+      if (fitPoint1.y === ratePoint1.y && fitPoint2.y === ratePoint2.y) {
+        drawLabel(labels[1], 1 / 2, 0, 0, 0, FONT_SIZE, thisObject.container, UI_COLOR.GREY, undefined, ratePoint1.y)
+        drawLabel(labels[2], 1 / 2, 0, decimalsDisplace, -5, 9, thisObject.container, UI_COLOR.GREY, undefined, ratePoint1.y)
+      }
+    }
+  }
+
   function drawScaleBox () {
     if (thisObject.rate === undefined) { return }
     if (thisObject.payload === undefined) { return }
     if (thisObject.payload.node === undefined) { return }
 
-    let rate = thisObject.rate
+    let icon1 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
+    let icon2 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type)
 
+    let backgroundColor = UI_COLOR.BLACK
+    let labels = scaleLabels(thisObject.rate)
+
+    drawScaleDisplay(labels[0], labels[1], labels[2], 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor)
+  }
+
+  function scaleLabels (rate) {
     if (rate < coordinateSystem.min.y) {
       rate = coordinateSystem.min.y
     }
@@ -401,23 +487,23 @@ function newRateScale () {
       rate = coordinateSystem.max.y
     }
 
-    let label = (rate - Math.trunc(rate)).toFixed(2)
+    let label = dynamicDecimals(rate)
     let labelArray = label.split('.')
     let label1 = thisObject.payload.node.payload.parentNode.name
     let label2 = (Math.trunc(rate)).toLocaleString()
     let label3 = labelArray[1]
     if (label3 === undefined) { label3 = '00' }
 
-    let icon1 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
-    let icon2 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type)
-
-    let backgroundColor = UI_COLOR.BLACK
+    if (rate < 1) {
+      label2 = label
+      label3 = ''
+    }
 
     if (scaleDisplayTimer > 0) {
       label2 = (coordinateSystem.scale.y * 10000).toFixed(2)
       label3 = 'SCALE'
     }
 
-    drawScaleDisplay(label1, label2, label3, 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor)
+    return [label1, label2, label3]
   }
 }

Scales/TimeFrameScale.js

@@ -8,6 +8,7 @@ function newTimeFrameScale () {
     payload: undefined,
     isVisible: true,
     layersOn: undefined,
+    adjustTimeFrame: adjustTimeFrame,
     onMouseOverSomeTimeMachineContainer: onMouseOverSomeTimeMachineContainer,
     draw: draw,
     drawForeground: drawForeground,
@@ -21,7 +22,7 @@ function newTimeFrameScale () {
   const TIME_PERIOD_DEFAULT_VALUE = 0
   const MIN_HEIGHT = 50
 
-  let previousIsVisible = true
+  let displayingRealTimeFrame = true
   let greyOutCoverLayer = false
   let isMouseOver
 
@@ -44,6 +45,10 @@ function newTimeFrameScale () {
     }
   }
   setupContainer()
+
+  let wheelDeltaDirection
+  let wheelDeltaCounter = 0
+
   return thisObject
 
   function setupContainer () {
@@ -119,21 +124,28 @@ function newTimeFrameScale () {
   function physics () {
     readObjectState()
     positioningPhysics()
-    zoomOutPhysics()
   }
 
-  function zoomOutPhysics () {
-    if ((thisObject.isVisible === true && previousIsVisible === false) && (canvas.chartingSpace.viewport.zoomTargetLevel >= ZOOM_OUT_THRESHOLD_FOR_CHANGING_TIME_FRAME)) {
+  function adjustTimeFrame (elementsPlotted) {
+    const ELEMENTS_PLOTTED_THREASHOLD = 500
+    if (
+      canvas.chartingSpace.viewport.zoomTargetLevel >= ZOOM_OUT_THRESHOLD_FOR_CHANGING_TIME_FRAME &&
+      displayingRealTimeFrame === false
+    ) {
       let event = {}
       event.timeFrame = thisObject.timeFrame
       thisObject.container.eventHandler.raiseEvent('Time Frame Value Changed', event)
-      previousIsVisible = true
+      displayingRealTimeFrame = true
     }
-    if ((thisObject.isVisible === false && previousIsVisible === true) || (canvas.chartingSpace.viewport.zoomTargetLevel < ZOOM_OUT_THRESHOLD_FOR_CHANGING_TIME_FRAME)) {
+    if (
+      elementsPlotted > ELEMENTS_PLOTTED_THREASHOLD &&
+      canvas.chartingSpace.viewport.zoomTargetLevel < ZOOM_OUT_THRESHOLD_FOR_CHANGING_TIME_FRAME &&
+      displayingRealTimeFrame === true
+    ) {
       let event = {}
       event.timeFrame = ONE_DAY_IN_MILISECONDS
       thisObject.container.eventHandler.raiseEvent('Time Frame Value Changed', event)
-      previousIsVisible = false
+      displayingRealTimeFrame = false
     }
   }
 
@@ -212,6 +224,10 @@ function newTimeFrameScale () {
       thisObject.isVisible = false
       thisObject.payload.isVisible = false
     }
+
+    if (canvas.chartingSpace.viewport.zoomTargetLevel < ZOOM_OUT_THRESHOLD_FOR_DISPLAYING_SCALES) {
+      thisObject.isVisible = false
+    }
   }
 
   function onViewportZoomChanged (event) {
@@ -237,7 +253,43 @@ function newTimeFrameScale () {
   }
 
   function onMouseWheel (event) {
-    delta = event.wheelDelta
+    if (IS_MAC) {
+      let sensitivity
+      if (event.wheelDelta < 0) {
+        if (event.shiftKey === true) {
+          sensitivity = 20
+        } else {
+          sensitivity = 5
+        }
+        if (wheelDeltaDirection === -1) {
+          wheelDeltaCounter++
+          if (wheelDeltaCounter < sensitivity) {
+            return
+          } else {
+            wheelDeltaCounter = 0
+          }
+        } else {
+          wheelDeltaCounter = 0
+          wheelDeltaDirection = -1
+          return
+        }
+      } else {
+        if (wheelDeltaDirection === 1) {
+          wheelDeltaCounter++
+          if (wheelDeltaCounter < sensitivity) {
+            return
+          } else {
+            wheelDeltaCounter = 0
+          }
+        } else {
+          wheelDeltaCounter = 0
+          wheelDeltaDirection = 1
+          return
+        }
+      }
+    }
+
+    let delta = event.wheelDelta
     if (delta < 0) {
       timeFrameIndex--
       if (timeFrameIndex < 0) {

Scales/TimeScale.js

@@ -12,6 +12,7 @@ function newTimeScale () {
     onMouseOverSomeTimeMachineContainer: onMouseOverSomeTimeMachineContainer,
     physics: physics,
     draw: draw,
+    drawBackground: drawBackground,
     drawForeground: drawForeground,
     getContainer: getContainer,
     initialize: initialize,
@@ -48,6 +49,9 @@ function newTimeScale () {
     }
   }
 
+  let wheelDeltaDirection
+  let wheelDeltaCounter = 0
+
   return thisObject
 
   function finalize () {
@@ -116,6 +120,42 @@ function newTimeScale () {
   }
 
   function onMouseWheel (event) {
+    if (IS_MAC) {
+      let sensitivity
+      if (event.wheelDelta < 0) {
+        if (event.shiftKey === true) {
+          sensitivity = 20
+        } else {
+          sensitivity = 5
+        }
+        if (wheelDeltaDirection === -1) {
+          wheelDeltaCounter++
+          if (wheelDeltaCounter < sensitivity) {
+            return
+          } else {
+            wheelDeltaCounter = 0
+          }
+        } else {
+          wheelDeltaCounter = 0
+          wheelDeltaDirection = -1
+          return
+        }
+      } else {
+        if (wheelDeltaDirection === 1) {
+          wheelDeltaCounter++
+          if (wheelDeltaCounter < sensitivity) {
+            return
+          } else {
+            wheelDeltaCounter = 0
+          }
+        } else {
+          wheelDeltaCounter = 0
+          wheelDeltaDirection = 1
+          return
+        }
+      }
+    }
+
     if (event.shiftKey === true) {
       autoScaleButton.container.eventHandler.raiseEvent('onMouseWheel', event)
       return
@@ -245,6 +285,48 @@ function newTimeScale () {
       thisObject.container.frame.position.x < upCorner.x) {
       thisObject.isVisible = false
     }
+
+    if (canvas.chartingSpace.viewport.zoomTargetLevel < ZOOM_OUT_THRESHOLD_FOR_DISPLAYING_SCALES) {
+      thisObject.isVisible = false
+    }
+  }
+
+  function drawBackground () {
+    drawScale()
+  }
+
+  function drawScale () {
+    const SEPARATION = 150
+    const NUMBER_OF_LABELS = Math.trunc(canvas.chartingSpace.viewport.width / SEPARATION)
+    const FONT_SIZE = 15
+
+    for (let i = 0; i <= NUMBER_OF_LABELS; i++) {
+      let timePoint = {
+        x: SEPARATION * (i + 1),
+        y: 0
+      }
+
+      let time = getDateFromPointAtBrowserCanvas(timePoint, limitingContainer, coordinateSystem)
+      let labels = scaleLabels(time, true)
+      let labelDisplace = labels[1].length * FONT_SIZE * FONT_ASPECT_RATIO
+
+      let timePoint1 = {
+        x: SEPARATION * (i + 1) - labelDisplace,
+        y: 0
+      }
+      let timePoint2 = {
+        x: SEPARATION * (i + 1) + labelDisplace,
+        y: 0
+      }
+
+      let fitPoint1 = thisObject.fitFunction(timePoint1)
+      let fitPoint2 = thisObject.fitFunction(timePoint2)
+
+      if (fitPoint1.x === timePoint1.x && fitPoint2.x === timePoint2.x) {
+        drawLabel(labels[1], 1 / 2, 0, 18, 17, FONT_SIZE, thisObject.container, UI_COLOR.GREY, timePoint1.x, undefined)
+        drawLabel(labels[2], 1 / 2, 0, 18, 30, 12, thisObject.container, UI_COLOR.GREY, timePoint1.x, undefined)
+      }
+    }
   }
 
   function draw () {
@@ -265,17 +347,27 @@ function newTimeScale () {
   function drawScaleBox () {
     if (thisObject.date === undefined) { return }
 
-    let label = thisObject.date.toUTCString()
+    let icon1 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
+    let icon2 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type)
+
+    let backgroundColor = UI_COLOR.BLACK
+    let labels = scaleLabels(thisObject.date)
+
+    drawScaleDisplay(labels[0], labels[1], labels[2], 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor)
+  }
+
+  function scaleLabels (date, excludeYear) {
+    let label = date.toUTCString()
     let labelArray = label.split(' ')
     let label1 = thisObject.payload.node.payload.parentNode.name
     let label2 = labelArray[1] + ' ' + labelArray[2] + ' ' + labelArray[3]
     let label3 = labelArray[4]
 
-    let icon1 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
-    let icon2 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type)
+    if (excludeYear === true) {
+      label2 = labelArray[1] + ' ' + labelArray[2]
+    }
 
-    let backgroundColor = UI_COLOR.BLACK
-
-    drawScaleDisplay(label1, label2, label3, 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor)
+    return [label1, label2, label3]
   }
 }
+

Spaces/ChartingSpace.js

@@ -13,12 +13,13 @@ function newChartingSpace () {
   logger.fileName = MODULE_NAME
 
   let thisObject = {
-    visible: undefined,
+    visible: false,
     container: undefined,
     inViewport: undefined,
     timeMachines: undefined,
     viewport: undefined,
     payload: undefined,
+    onKeyPressed: onKeyPressed,
     reset: reset,
     oneScreenUp: oneScreenUp,
     oneScreenDown: oneScreenDown,
@@ -77,8 +78,10 @@ function newChartingSpace () {
     thisObject.container.finalize()
     thisObject.container = undefined
 
-    thisObject.viewport.finalize()
-    thisObject.viewport = undefined
+    if (thisObject.viewport !== undefined) {
+      thisObject.viewport.finalize()
+      thisObject.viewport = undefined
+    }
 
     thisObject.payload = undefined
   }
@@ -112,6 +115,7 @@ function newChartingSpace () {
 
   function getContainer (point, purpose) {
     if (thisObject.visible !== true) { return }
+    if (thisObject.viewport === undefined) { return }
     if (thisObject.viewport.isThisPointInViewport(point) === false) { return }
 
     let container
@@ -134,10 +138,14 @@ function newChartingSpace () {
       container = thisObject.timeMachines[i].getContainer(point, purpose)
       if (container !== undefined) {
         if (purpose !== undefined) {
-          containerFound = container
+          if (containerFound === undefined) {
+            containerFound = container
+          }
         } else {
           if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-            containerFound = container
+            if (containerFound === undefined) {
+              containerFound = container
+            }
           }
         }
       }
@@ -162,6 +170,7 @@ function newChartingSpace () {
   }
 
   function oneScreenUp () {
+    if (thisObject.visible === false) { return }
     let displaceVector = {
       x: 0,
       y: browserCanvas.height * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100
@@ -171,6 +180,7 @@ function newChartingSpace () {
   }
 
   function oneScreenDown () {
+    if (thisObject.visible === false) { return }
     let displaceVector = {
       x: 0,
       y: -browserCanvas.height * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100
@@ -180,6 +190,7 @@ function newChartingSpace () {
   }
 
   function oneScreenLeft () {
+    if (thisObject.visible === false) { return }
     let displaceVector = {
       x: browserCanvas.width * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100,
       y: 0
@@ -189,6 +200,7 @@ function newChartingSpace () {
   }
 
   function oneScreenRight () {
+    if (thisObject.visible === false) { return }
     let displaceVector = {
       x: -browserCanvas.width * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100,
       y: 0
@@ -251,15 +263,25 @@ function newChartingSpace () {
   }
 
   function physics () {
+    thisObjectPhysics()
+    if (thisObject.visible !== true) { return }
     if (thisObject.viewport !== undefined) {
       thisObject.viewport.physics()
     }
-
-    thisObjectPhysics()
     childrenPhysics()
     syncWithDesigner()
   }
 
+  function onKeyPressed (event) {
+    if (thisObject.visible !== true) { return }
+    for (let j = 0; j < thisObject.timeMachines.length; j++) {
+      let timeMachine = thisObject.timeMachines[j]
+      if (timeMachine.onFocus === true) {
+        timeMachine.onKeyPressed(event)
+      }
+    }
+  }
+
   function syncWithDesigner () {
     if (thisObject.payload === undefined) { return }
     if (thisObject.payload.node === undefined) { return }
@@ -310,8 +332,8 @@ function newChartingSpace () {
       timeMachine.payload.uiObject.setValue('Loading...')
 
       /* Setting up the new time machine. */
-      timeMachine.container.frame.position.x = browserCanvas.width / 2 - TIME_MACHINE_WIDTH / 2
-      timeMachine.container.frame.position.y = browserCanvas.height / 2 - TIME_MACHINE_HEIGHT / 2
+      timeMachine.container.frame.position.x = browserCanvas.width / 2 - browserCanvas.width / TIME_MACHINE_WIDTH / 2
+      timeMachine.container.frame.position.y = browserCanvas.height / 2 - (browserCanvas.height - TOP_SPACE_HEIGHT - COCKPIT_SPACE_HEIGHT) / TIME_MACHINE_HEIGHT / 2
       timeMachine.initialize(onTimeMachineInitialized)
 
       function onTimeMachineInitialized () {
@@ -327,10 +349,16 @@ function newChartingSpace () {
   function thisObjectPhysics () {
     thisObject.container.frame.height = COCKPIT_SPACE_POSITION
 
-    if (thisObject.container.frame.height <= 0 / 100) {
+    if (thisObject.container.frame.height <= TOP_SPACE_HEIGHT) {
       thisObject.visible = false
+      if (thisObject.viewport !== undefined) {
+        thisObject.viewport.visible = false
+      }
     } else {
       thisObject.visible = true
+      if (thisObject.viewport !== undefined) {
+        thisObject.viewport.visible = true
+      }
     }
 
     if (canvas.chartingSpace.viewport !== undefined) {
@@ -355,6 +383,7 @@ function newChartingSpace () {
   }
 
   function drawBackground () {
+    if (thisObject.visible === false) { return }
     drawSpaceBackground()
 
     for (let i = 0; i < thisObject.timeMachines.length; i++) {
@@ -364,7 +393,7 @@ function newChartingSpace () {
   }
 
   function draw () {
-    if (thisObject.visible !== true) { return }
+    if (thisObject.visible === false) { return }
     drawBackground()
 
     for (let i = 0; i < thisObject.timeMachines.length; i++) {

Spaces/CockpitSpace.js

@@ -5,7 +5,6 @@
    let thisObject = {
      container: undefined,
      status: 'BOTTOM',
-     assetBalances: undefined,
      fullscreen: undefined,
      toTop: toTop,
      toBottom: toBottom,
@@ -40,7 +39,6 @@
 
      thisObject.container.finalize()
      thisObject.container = undefined
-     thisObject.assetBalances = undefined
      thisObject.fullscreen = undefined
    }
 
@@ -65,9 +63,6 @@
      canvasBrowserResizedEventSubscriptionId = canvas.eventHandler.listenToEvent('Browser Resized', resize)
      selfMouseClickEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
 
-     thisObject.assetBalances = newQuotedAssetalances()
-     thisObject.assetBalances.initialize()
-
      thisObject.fullscreen = newFullScreen()
      thisObject.fullscreen.container.connectToParent(thisObject.container)
      thisObject.fullscreen.initialize()
@@ -185,7 +180,6 @@
 
      drawBackground()
 
-     thisObject.assetBalances.draw()
      // thisObject.fullscreen.draw()
    }
 

Spaces/DesignSpace.js

@@ -1,6 +1,6 @@
 
 function newDesignSpace () {
-  const MODULE_NAME = 'Strategy Space'
+  const MODULE_NAME = 'Designe Space'
   let thisObject = {
     sidePanel: undefined,
     container: undefined,
@@ -265,7 +265,20 @@ function newDesignSpace () {
       'key-down',
       'key-left',
       'key-right',
-      'key-up'
+      'key-up',
+      'master-script',
+      'scripts-library',
+      'super-action',
+      'super-scripts',
+      'template-script',
+      'template-structure',
+      'template-target',
+      'delink',
+      'detach',
+      'help',
+      'key-a',
+      'key-m',
+      'key-r'
     ]
 
     for (let i = 0; i < iconsNames.length; i++) {

Spaces/FloatingSpace.js

@@ -11,6 +11,17 @@ function newFloatingSpace () {
     floatingLayer: undefined,               // This is the array of floatingObjects being displayed
     uiObjectConstructor: undefined,
     container: undefined,
+    inMapMode: false,
+    drawReferenceLines: false,
+    drawChainLines: true,
+    toggleDrawChainLines: toggleDrawChainLines,
+    toggleDrawReferenceLines: toggleDrawReferenceLines,
+    toggleMapMode: toggleMapMode,
+    enterMapMode: enterMapMode,
+    exitMapMode: exitMapMode,
+    transformPointToMap: transformPointToMap,
+    transformRadiusToMap: transformRadiusToMap,
+    transformImagesizeToMap: transformImagesizeToMap,
     oneScreenUp: oneScreenUp,
     oneScreenDown: oneScreenDown,
     oneScreenLeft: oneScreenLeft,
@@ -34,6 +45,7 @@ function newFloatingSpace () {
   thisObject.container.isDraggeable = true
   thisObject.container.isWheelable = true
   thisObject.container.detectMouseOver = true
+  thisObject.container.isClickeable = false
   thisObject.container.frame.radius = 0
 
   let devicePixelRatio = window.devicePixelRatio
@@ -47,12 +59,12 @@ function newFloatingSpace () {
   let visible = false
 
   const PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT = 25
-  let eventSubscriptionId
+  let onDragStartedEventSubscriptionId
 
   return thisObject
 
   function finalize () {
-    thisObject.container.eventHandler.stopListening(eventSubscriptionId)
+    thisObject.container.eventHandler.stopListening(onDragStartedEventSubscriptionId)
 
     thisObject.floatingLayer.finalize()
     thisObject.uiObjectConstructor.finalize()
@@ -70,12 +82,111 @@ function newFloatingSpace () {
     thisObject.uiObjectConstructor = newUiObjectConstructor()
     thisObject.uiObjectConstructor.initialize(thisObject.floatingLayer)
 
-    eventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
+    onDragStartedEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onDragStarted', onDragStarted)
+  }
+
+  function toggleDrawReferenceLines () {
+    if (thisObject.drawReferenceLines === true) {
+      thisObject.drawReferenceLines = false
+    } else {
+      thisObject.drawReferenceLines = true
+    }
+  }
+
+  function toggleDrawChainLines () {
+    if (thisObject.drawChainLines === true) {
+      thisObject.drawChainLines = false
+    } else {
+      thisObject.drawChainLines = true
+    }
+  }
+
+  function transformPointToMap (point) {
+    let returnPoint = {
+      x: point.x - thisObject.container.frame.position.x,
+      y: point.y - thisObject.container.frame.position.y
+    }
+    returnPoint.x = returnPoint.x / SPACE_SIZE * browserCanvas.width
+    returnPoint.y = returnPoint.y / SPACE_SIZE * browserCanvas.height
+    return returnPoint
+  }
+
+  function transformRadiusToMap (radius) {
+    const RADIUS_REDUCTION_FACTOR = 2
+    return radius / RADIUS_REDUCTION_FACTOR
+  }
+
+  function transformImagesizeToMap (imageSize) {
+    const IMAGE_REDUCTION_FACTOR = 3
+    return imageSize / IMAGE_REDUCTION_FACTOR
+  }
+
+  function enterMapMode () {
+    thisObject.inMapMode = true
+  }
+
+  function exitMapMode () {
+    thisObject.inMapMode = false
+  }
+
+  function toggleMapMode () {
+    if (thisObject.inMapMode === false) {
+      enterMapMode()
+    } else {
+      exitMapMode()
+    }
+  }
+
+  function onDragStarted (event) {
+    if (thisObject.inMapMode === false) {
+      if (event.buttons !== 2) { return }
+      event.candelDragging = true
+      enterMapMode()
+    } else {
+      if (event.buttons !== 1) {
+        event.candelDragging = true
+        return
+      }
+
+      let mousePosition = {
+        x: event.x,
+        y: event.y
+      }
+
+      let mouseAtSpace = {
+        x: mousePosition.x / browserCanvas.width * SPACE_SIZE,
+        y: mousePosition.y / browserCanvas.height * SPACE_SIZE
+      }
+      /* Let's see if we can snap to some of the root nodes that are isHierarchyHead */
+      let snapCandidateNodes = canvas.designSpace.workspace.getHierarchyHeads()
+      for (let i = 0; i < snapCandidateNodes.length; i++) {
+        let node = snapCandidateNodes[i]
+        let nodePosition = {
+          x: node.payload.floatingObject.container.frame.position.x,
+          y: node.payload.floatingObject.container.frame.position.y
+        }
+        // nodePosition = node.payload.floatingObject.container.frame.frameThisPoint(nodePosition)
+
+        let distance = Math.sqrt(Math.pow(mouseAtSpace.x - nodePosition.x, 2) + Math.pow(mouseAtSpace.y - nodePosition.y, 2))
+        const SNAP_THREASHOLD = 1000
+        if (distance < SNAP_THREASHOLD) {
+          mousePosition.x = nodePosition.x / SPACE_SIZE * browserCanvas.width
+          mousePosition.y = nodePosition.y / SPACE_SIZE * browserCanvas.height
+        }
+      }
+
+      /* Movign the Floating Space to where the mouse is. */
+      thisObject.container.frame.position.x = -mousePosition.x / browserCanvas.width * SPACE_SIZE + browserCanvas.width / 2
+      thisObject.container.frame.position.y = -mousePosition.y / browserCanvas.height * SPACE_SIZE + browserCanvas.height / 2
+
+      exitMapMode()
+    }
   }
 
   function isItFar (payload, dontCheckParent) {
     /* If for any reason the paylaod is undefined we return false */
     if (payload === undefined) { return false }
+    if (thisObject.inMapMode === true) { return false }
 
     let radarFactor = 2 // How big is the margin
 
@@ -92,7 +203,8 @@ function newFloatingSpace () {
       payload.node.type === 'Network' ||
       payload.node.type === 'Crypto Ecosystem' ||
       payload.node.type === 'Charting Space' ||
-      payload.node.type === 'Data Mine'
+      payload.node.type === 'Data Mine' ||
+      payload.node.type === 'Super Scripts'
   ) {
       return false
     }
@@ -151,6 +263,7 @@ function newFloatingSpace () {
   }
 
   function oneScreenUp () {
+    if (visible === false) { return }
     let displaceVector = {
       x: 0,
       y: browserCanvas.height * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100
@@ -161,6 +274,7 @@ function newFloatingSpace () {
   }
 
   function oneScreenDown () {
+    if (visible === false) { return }
     let displaceVector = {
       x: 0,
       y: -browserCanvas.height * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100
@@ -171,6 +285,7 @@ function newFloatingSpace () {
   }
 
   function oneScreenLeft () {
+    if (visible === false) { return }
     let displaceVector = {
       x: browserCanvas.width * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100,
       y: 0
@@ -181,6 +296,7 @@ function newFloatingSpace () {
   }
 
   function oneScreenRight () {
+    if (visible === false) { return }
     let displaceVector = {
       x: -browserCanvas.width * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100,
       y: 0
@@ -221,10 +337,6 @@ function newFloatingSpace () {
     return true
   }
 
-  function onMouseWheel (event) {
-    thisObject.floatingLayer.changeTargetRepulsion(event.wheelDelta)
-  }
-
   function makeVisible () {
     visible = true
   }
@@ -234,6 +346,7 @@ function newFloatingSpace () {
   }
 
   function getContainer (point) {
+    if (visible === false) { return }
     let container
 
     container = thisObject.floatingLayer.getContainer(point)
@@ -249,9 +362,24 @@ function newFloatingSpace () {
   }
 
   function physics () {
-    if (visible === true) {
-      browserZoomPhysics()
-      thisObject.floatingLayer.physics()
+    if (visible === false) { return }
+    browserZoomPhysics()
+    positionContraintsPhysics()
+    thisObject.floatingLayer.physics()
+  }
+
+  function positionContraintsPhysics () {
+    if (thisObject.container.frame.position.x > 0) {
+      thisObject.container.frame.position.x = 0
+    }
+    if (thisObject.container.frame.position.y > 0) {
+      thisObject.container.frame.position.y = 0
+    }
+    if (thisObject.container.frame.position.x + thisObject.container.frame.width < browserCanvas.width) {
+      thisObject.container.frame.position.x = browserCanvas.width - thisObject.container.frame.width
+    }
+    if (thisObject.container.frame.position.y + thisObject.container.frame.height < browserCanvas.height) {
+      thisObject.container.frame.position.y = browserCanvas.height - thisObject.container.frame.height
     }
   }
 
@@ -265,10 +393,9 @@ function newFloatingSpace () {
   }
 
   function draw () {
-    if (visible === true) {
-      drawBackground()
-      thisObject.floatingLayer.draw()
-    }
+    if (visible === false) { return }
+    drawBackground()
+    thisObject.floatingLayer.draw()
   }
 
   function drawBackground () {

Spaces/PanelsSpace.js

@@ -165,18 +165,34 @@ function newPanelsSpace () {
         let verticalLine = (canvas.chartingSpace.viewport.visibleArea.topRight.x - canvas.chartingSpace.viewport.visibleArea.topLeft.x) / 2 + canvas.chartingSpace.viewport.visibleArea.topLeft.x
         let horizontalLine = (canvas.chartingSpace.viewport.visibleArea.bottomRight.y - canvas.chartingSpace.viewport.visibleArea.topRight.y) / 2 + canvas.chartingSpace.viewport.visibleArea.topRight.y
 
-        if (panel.panelTabButton !== undefined) {
-          if (panel.panelTabButton.status === 'up') {
-            if (centerPoint.x < verticalLine) {
-              panel.gravitatesTowards = 'topLeft'
+        if (panel.upDownButton !== undefined) {
+          if (panel.upDownButton.status === 'up') {
+            if (panel.leftRightButton !== undefined) {
+              if (panel.leftRightButton.status === 'left') {
+                panel.gravitatesTowards = 'topLeft'
+              } else {
+                panel.gravitatesTowards = 'topRight'
+              }
             } else {
-              panel.gravitatesTowards = 'topRight'
+              if (centerPoint.x < verticalLine) {
+                panel.gravitatesTowards = 'topLeft'
+              } else {
+                panel.gravitatesTowards = 'topRight'
+              }
             }
           } else {
-            if (centerPoint.x < verticalLine) {
-              panel.gravitatesTowards = 'bottomLeft'
+            if (panel.leftRightButton !== undefined) {
+              if (panel.leftRightButton.status === 'left') {
+                panel.gravitatesTowards = 'bottomLeft'
+              } else {
+                panel.gravitatesTowards = 'bottomRight'
+              }
             } else {
-              panel.gravitatesTowards = 'bottomRight'
+              if (centerPoint.x < verticalLine) {
+                panel.gravitatesTowards = 'bottomLeft'
+              } else {
+                panel.gravitatesTowards = 'bottomRight'
+              }
             }
           }
         } else {
@@ -197,6 +213,10 @@ function newPanelsSpace () {
         /* According to the quadrant we push the panels to the sides */
         if (panel.gravitatesTowards === 'topLeft' || panel.gravitatesTowards === 'bottomLeft') {
           panel.container.frame.position.x = panel.container.frame.position.x - panel.container.speed.x
+          if (panel.leftRightButton !== undefined) {
+            if (panel.leftRightButton.status === 'left' || panel.leftRightButton.status === 'right') { // we avoid pushing other panels while in transition
+            }
+          }
           isOverlapping(i, panel.container)
           if (panel.container.frame.position.x < 0) {
             panel.container.frame.position.x = 0
@@ -246,6 +266,11 @@ function newPanelsSpace () {
 
       for (let i = 0; i < currentIndex; i++) {
         let panel = thisObject.panels[i]
+        if (panel.leftRightButton !== undefined) {
+          if (panel.leftRightButton.status !== 'left' && panel.leftRightButton.status !== 'right') { // we avoid pushing other panels while in transition
+            continue
+          }
+        }
         if (panel.isVisible === true && panel.isHidden === false) {
           if (isThisPointInsideThisFrame(corner1, panel.container.frame) === true) {
             pushOut(currentContainer, panel.container, panel.gravitatesTowards)
@@ -326,7 +351,7 @@ function newPanelsSpace () {
     }
   }
 
-  function getContainer (point) {
+  function getContainer (point, purpose) {
     if (thisObject.visible !== true) { return }
 
     let container
@@ -339,7 +364,7 @@ function newPanelsSpace () {
       let owner = canvas.chartingSpace.inViewport.get(panel.owner)
       if (owner !== undefined) {
         if (panel.isVisible === true && panel.isHidden === false) {
-          container = panel.getContainer(point)
+          container = panel.getContainer(point, purpose)
         }
       }
       if (container !== undefined) {
@@ -347,7 +372,7 @@ function newPanelsSpace () {
         return container
       }
     }
-    thisObject.container.space = 'Panels Space'
-    return thisObject.container
+    // thisObject.container.space = 'Panels Space'
+    // return thisObject.container
   }
 }

Utilities.js

@@ -22,6 +22,22 @@ function drawContainerBackground (container, color, opacity, fitFunction) {
   browserCanvasContext.fill()
 }
 
+function dynamicDecimals (value, minDecimals) {
+  if (minDecimals === undefined) {
+    minDecimals = 0
+  }
+  let decimals = 2
+  if (value < 1) { decimals = 4 }
+  if (Math.abs(Math.trunc(value * 100)) < 1) { decimals = 6 }
+  if (Math.abs(Math.trunc(value * 10000)) < 1) { decimals = 8 }
+  if (Math.abs(Math.trunc(value * 1000000)) < 1) { decimals = 10 }
+  if (Math.abs(Math.trunc(value * 100000000)) < 1) { decimals = 12 }
+  if (Math.abs(Math.trunc(value * 10000000000)) < 1) { value = 0; decimals = 0 }
+  if (Math.trunc(value) === value) { decimals = minDecimals }
+  let returnValue = Number(value).toFixed(decimals)
+  return returnValue
+}
+
 function savePropertyAtNodeConfig (payload, propertyName, value) {
   try {
     let code = JSON.parse(payload.node.code)
@@ -194,7 +210,7 @@ function getMilisecondsFromPoint (point, container, coordinateSystem) {
   return point.x
 }
 
-function moveToUserPosition (container, currentDate, currentRate, coordinateSystem, ignoreX, ignoreY, mousePosition) {
+function moveToUserPosition (container, currentDate, currentRate, coordinateSystem, ignoreX, ignoreY, mousePosition, fitFunction) {
   let targetPoint = {
     x: currentDate.valueOf(),
     y: currentRate
@@ -228,15 +244,45 @@ function removeTime (datetime) {
   return dateOnly
 }
 
-function printLabel (labelToPrint, x, y, opacity, fontSize, color) {
+function printLabel (labelToPrint, x, y, opacity, fontSize, color, center, container, fitFunction, noDecimals) {
   let labelPoint
   if (color === undefined) { color = UI_COLOR.DARK }
+  if (fontSize === undefined) { fontSize = 10 };
 
   browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-  let label = '' + labelToPrint
+  let label = labelToPrint
+  if (isNaN(label) === false && label !== '') {
+    label = dynamicDecimals(labelToPrint)
+    label = label.toLocaleString()
+    if (noDecimals === true) {
+      label = Math.trunc(label)
+    }
+  }
+
   let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO
+
+  if (center === true) {
+    labelPoint = {
+      x: x - xOffset,
+      y: y
+    }
+  } else {
+    labelPoint = {
+      x: x,
+      y: y
+    }
+  }
+
+  if (container !== undefined) {
+    labelPoint = container.frame.frameThisPoint(labelPoint)
+  }
+
+  if (fitFunction !== undefined) {
+    labelPoint = fitFunction(labelPoint)
+  }
+
   browserCanvasContext.fillStyle = 'rgba(' + color + ', ' + opacity + ')'
-  browserCanvasContext.fillText(label, x, y)
+  browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
 }
 
 function newUniqueId () {

Utilities/RoundedCornersBackground.js

@@ -105,8 +105,9 @@ function roundedCornersBackground (params) {
   browserCanvasContext.stroke()
 }
 
-function drawLabel (label, xFactor, yFactor, xOffset, yOffset, fontSize, container) {
+function drawLabel (label, xFactor, yFactor, xOffset, yOffset, fontSize, container, fontColor, noFrameX, noFrameY) {
   if (label === undefined) { return }
+  if (fontColor === undefined) { fontColor = UI_COLOR.WHITE }
   let fontOffset = label.length * fontSize * FONT_ASPECT_RATIO + 10
 
   let labelPoint = {
@@ -116,8 +117,16 @@ function drawLabel (label, xFactor, yFactor, xOffset, yOffset, fontSize, contain
 
   labelPoint = container.frame.frameThisPoint(labelPoint)
 
+  if (noFrameX !== undefined) {
+    labelPoint.x = noFrameX + xOffset
+  }
+
+  if (noFrameY !== undefined) {
+    labelPoint.y = noFrameY + yOffset
+  }
+
   browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-  browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
+  browserCanvasContext.fillStyle = 'rgba(' + fontColor + ', 1)'
 
   browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y)
 }

VideoRecorder.js

@@ -1,10 +1,20 @@
 function newVideoRecorder () {
   let thisObject = {
-    recordCanvas: recordCanvas
+    recordCanvas: recordCanvas,
+    physics: physics
   }
   let lastAction
+  let wheelAnimationCounter = 0
+  let lastWheelPointerIcon
   return thisObject
 
+  function physics () {
+    wheelAnimationCounter--
+    if (wheelAnimationCounter < 0) {
+      wheelAnimationCounter = 0
+    }
+  }
+
   function recordCanvas () {
     {
       const DISTANCE_BETWEEN_ICONS = 35
@@ -33,16 +43,52 @@ function newVideoRecorder () {
           break
         }
         case 'wheel': {
+          wheelAnimationCounter = 25
           if (canvas.mouse.event.delta > 0) {
             pointerIcon = canvas.designSpace.iconCollection.get('mouse-wheel-up')
+            lastWheelPointerIcon = pointerIcon
           } else {
             pointerIcon = canvas.designSpace.iconCollection.get('mouse-wheel-down')
+            lastWheelPointerIcon = pointerIcon
           }
 
           break
         }
         case 'key down': {
-          pointerIcon = mousePointerIcon
+          if (wheelAnimationCounter > 0) {
+            pointerIcon = lastWheelPointerIcon
+          } else {
+            pointerIcon = mousePointerIcon
+          }
+          let key = canvas.mouse.event.key
+          if (key === undefined) { break }
+          switch (key.toLowerCase()) {
+            case 'Escape':
+              {
+                pointerIcon = canvas.designSpace.iconCollection.get('key-m')
+                break
+              }
+            case 'm':
+              {
+                pointerIcon = canvas.designSpace.iconCollection.get('key-m')
+                break
+              }
+            case 'a':
+              {
+                pointerIcon = canvas.designSpace.iconCollection.get('key-a')
+                break
+              }
+            case 'r':
+              {
+                pointerIcon = canvas.designSpace.iconCollection.get('key-r')
+                break
+              }
+            case 'c':
+              {
+                pointerIcon = canvas.designSpace.iconCollection.get('key-r')
+                break
+              }
+          }
           break
         }
         case 'key up': {
@@ -170,4 +216,3 @@ function newVideoRecorder () {
     }
   }
 }
-