From 9e52d4bec33e20311137fea8eb413ba9557c5a94 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Sun, 9 Feb 2020 12:32:47 +0100
Subject: [PATCH 01/81] less time to see status

---
 FloatingSpace/CircularMenuItem.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js
index 4a66f3679..e4355e01c 100644
--- a/FloatingSpace/CircularMenuItem.js
+++ b/FloatingSpace/CircularMenuItem.js
@@ -307,7 +307,7 @@ function newCircularMenuItem () {
 
         if (event !== undefined) {
           if (event.type === 'Secondary Action Already Executed') {
-            setStatus(thisObject.secondaryWorkDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 250, STATUS_SECONDARY_WORK_DONE)
+            setStatus(thisObject.secondaryWorkDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 100, STATUS_SECONDARY_WORK_DONE)
             return
           }
         }
@@ -316,11 +316,11 @@ function newCircularMenuItem () {
         if (thisObject.secondaryAction === undefined) { // This means there are no more possible actions.
           if (err.result === GLOBAL.DEFAULT_OK_RESPONSE.result) {
             if (thisObject.workDoneLabel !== undefined) {
-              setStatus(thisObject.workDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 250, STATUS_PRIMARY_WORK_DONE)
+              setStatus(thisObject.workDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 100, STATUS_PRIMARY_WORK_DONE)
             }
           } else {
             if (thisObject.workFailedLabel != undefined) {
-              setStatus(thisObject.workFailedLabel, UI_COLOR.TITANIUM_YELLOW, 250, STATUS_PRIMARY_WORK_FAILED)
+              setStatus(thisObject.workFailedLabel, UI_COLOR.TITANIUM_YELLOW, 100, STATUS_PRIMARY_WORK_FAILED)
             }
           }
         } else {
@@ -331,7 +331,7 @@ function newCircularMenuItem () {
             }
           } else {
             if (thisObject.workFailedLabel != undefined) {
-              setStatus(thisObject.workFailedLabel, UI_COLOR.TITANIUM_YELLOW, 250, STATUS_PRIMARY_WORK_FAILED)
+              setStatus(thisObject.workFailedLabel, UI_COLOR.TITANIUM_YELLOW, 100, STATUS_PRIMARY_WORK_FAILED)
             }
           }
         }
@@ -339,11 +339,11 @@ function newCircularMenuItem () {
       function onSecondaryCallBack (err) {
         if (err.result === GLOBAL.DEFAULT_OK_RESPONSE.result) {
           if (thisObject.secondaryWorkDoneLabel !== undefined) {
-            setStatus(thisObject.secondaryWorkDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 250, STATUS_SECONDARY_WORK_DONE)
+            setStatus(thisObject.secondaryWorkDoneLabel, UI_COLOR.PATINATED_TURQUOISE, 100, STATUS_SECONDARY_WORK_DONE)
           }
         } else {
           if (thisObject.secondaryWorkFailedLabel != undefined) {
-            setStatus(thisObject.secondaryWorkFailedLabel, UI_COLOR.TITANIUM_YELLOW, 250, STATUS_SECONDARY_WORK_FAILED)
+            setStatus(thisObject.secondaryWorkFailedLabel, UI_COLOR.TITANIUM_YELLOW, 100, STATUS_SECONDARY_WORK_FAILED)
           }
         }
       }

From e8c54b17fbb1717dc4908a998a0ec0f69152c54e Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Sun, 9 Feb 2020 13:00:16 +0100
Subject: [PATCH 02/81] Panels Dissapearing when zoomout

---
 ChartsSpace/TimeMachine.js |  2 +-
 ChartsSpace/ViewPort.js    |  2 +-
 Spaces/PanelsSpace.js      | 10 +++++++---
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js
index 02c872aed..0713d6d5d 100644
--- a/ChartsSpace/TimeMachine.js
+++ b/ChartsSpace/TimeMachine.js
@@ -391,7 +391,7 @@ function newTimeMachine () {
   }
 
   function panelPhysics () {
-    if (thisObject.container.frame.isInViewPort()) {
+    if (thisObject.container.frame.isInViewPort() && canvas.chartSpace.viewport.zoomTargetLevel > 10) {
       canvas.panelsSpace.makeVisible(thisObject.payload.node.id, 'Layers Panel')
     } else {
       canvas.panelsSpace.makeInvisible(thisObject.payload.node.id, 'Layers Panel')
diff --git a/ChartsSpace/ViewPort.js b/ChartsSpace/ViewPort.js
index 354c43747..680508668 100644
--- a/ChartsSpace/ViewPort.js
+++ b/ChartsSpace/ViewPort.js
@@ -213,7 +213,7 @@ function newViewport () {
     } else {
       newEvent.type = 'Zoom Out'
     }
-
+    console.log(thisObject.zoomTargetLevel)
     thisObject.eventHandler.raiseEvent('Zoom Changed', newEvent)
     return true
   }
diff --git a/Spaces/PanelsSpace.js b/Spaces/PanelsSpace.js
index 52f4fa087..e52819191 100644
--- a/Spaces/PanelsSpace.js
+++ b/Spaces/PanelsSpace.js
@@ -144,7 +144,7 @@ function newPanelsSpace () {
     if (thisObject.panels !== undefined) {
       for (let i = 0; i < thisObject.panels.length; i++) {
         let panel = thisObject.panels[i]
-
+        if (panel.isVisible === false) { continue }
         /* setting the speed of the panel */
         if (panel.container.speed === undefined) {
           panel.container.speed = {
@@ -319,7 +319,9 @@ function newPanelsSpace () {
       let panel = thisObject.panels[i]
       let owner = canvas.chartSpace.inViewport.get(panel.owner)
       if (owner !== undefined) {
-        panel.draw()
+        if (panel.isVisible === true) {
+          panel.draw()
+        }
       }
     }
   }
@@ -336,7 +338,9 @@ function newPanelsSpace () {
       let panel = thisObject.panels[i]
       let owner = canvas.chartSpace.inViewport.get(panel.owner)
       if (owner !== undefined) {
-        container = panel.getContainer(point)
+        if (panel.isVisible === true) {
+          container = panel.getContainer(point)
+        }
       }
       if (container !== undefined) {
         return container

From 8ee3732b7e76fdf05328e199463e18de2edbef1a Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Sun, 9 Feb 2020 18:17:48 +0100
Subject: [PATCH 03/81] Zoom out changes the time frame automatically

---
 ChartsSpace/TimeMachine.js |  2 +-
 Globals.js                 |  1 +
 Scales/TimeFrameScale.js   | 27 ++++++++++++++++++++++-----
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js
index 0713d6d5d..519f54a3e 100644
--- a/ChartsSpace/TimeMachine.js
+++ b/ChartsSpace/TimeMachine.js
@@ -391,7 +391,7 @@ function newTimeMachine () {
   }
 
   function panelPhysics () {
-    if (thisObject.container.frame.isInViewPort() && canvas.chartSpace.viewport.zoomTargetLevel > 10) {
+    if (thisObject.container.frame.isInViewPort() && canvas.chartSpace.viewport.zoomTargetLevel > ZOOM_OUT_THRESHOLD) {
       canvas.panelsSpace.makeVisible(thisObject.payload.node.id, 'Layers Panel')
     } else {
       canvas.panelsSpace.makeInvisible(thisObject.payload.node.id, 'Layers Panel')
diff --git a/Globals.js b/Globals.js
index 22a3d5d2d..5fc02bfdc 100644
--- a/Globals.js
+++ b/Globals.js
@@ -41,6 +41,7 @@ UI_FONT = {
     SECONDARY: "Source Code Pro"
 };
 
+const ZOOM_OUT_THRESHOLD = 10 // This regulates some behavious changes that happens when the user zoom out below this level.
 let FONT_ASPECT_RATIO = 0.32;
 
 
diff --git a/Scales/TimeFrameScale.js b/Scales/TimeFrameScale.js
index 0f684274f..e9695b4c4 100644
--- a/Scales/TimeFrameScale.js
+++ b/Scales/TimeFrameScale.js
@@ -21,7 +21,8 @@ function newTimeFrameScale () {
   const TIME_PERIOD_DEFAULT_VALUE = 0
   const MIN_HEIGHT = 50
 
-  let visible = true
+  let previousIsVisible = true
+  let greyOutCoverLayer = false
   let isMouseOver
 
   let filePeriodIndex = FILES_PERIOD_DEFAULT_VALUE
@@ -88,12 +89,12 @@ function newTimeFrameScale () {
   function onMouseOverSomeTimeMachineContainer (event) {
     if (event.containerId === undefined) {
       /* This happens when the mouse over was not at the instance of a certain scale, but anywhere else. */
-      visible = true
+      greyOutCoverLayer = false
     } else {
       if (event.containerId === thisObject.container.id) {
-        visible = true
+        greyOutCoverLayer = false
       } else {
-        visible = false
+        greyOutCoverLayer = true
         turnOnCounter = 0
       }
     }
@@ -118,6 +119,22 @@ function newTimeFrameScale () {
   function physics () {
     readObjectState()
     positioningPhysics()
+    zoomOutPhysics()
+  }
+
+  function zoomOutPhysics () {
+    if (thisObject.isVisible === true && previousIsVisible === false) {
+      let event = {}
+      event.timeFrame = thisObject.timeFrame
+      thisObject.container.eventHandler.raiseEvent('Time Frame Value Changed', event)
+      previousIsVisible = true
+    }
+    if (thisObject.isVisible === false && previousIsVisible === true) {
+      let event = {}
+      event.timeFrame = ONE_DAY_IN_MILISECONDS
+      thisObject.container.eventHandler.raiseEvent('Time Frame Value Changed', event)
+      previousIsVisible = false
+    }
   }
 
   function positioningPhysics () {
@@ -303,7 +320,7 @@ function newTimeFrameScale () {
 
   function draw () {
     drawScaleBox()
-    if (visible === false) {
+    if (greyOutCoverLayer === true) {
       drawScaleDisplayCover(thisObject.container)
     }
   }

From 84e00a9cecac83ba5524b566cc785b2b2fc5f9e3 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Sun, 9 Feb 2020 18:28:26 +0100
Subject: [PATCH 04/81] All panels dissapearing well

---
 ChartsSpace/TimeMachine.js | 2 ++
 ChartsSpace/ViewPort.js    | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js
index 519f54a3e..4f783a125 100644
--- a/ChartsSpace/TimeMachine.js
+++ b/ChartsSpace/TimeMachine.js
@@ -393,8 +393,10 @@ function newTimeMachine () {
   function panelPhysics () {
     if (thisObject.container.frame.isInViewPort() && canvas.chartSpace.viewport.zoomTargetLevel > ZOOM_OUT_THRESHOLD) {
       canvas.panelsSpace.makeVisible(thisObject.payload.node.id, 'Layers Panel')
+      canvas.panelsSpace.makeVisible(thisObject.payload.node.id, 'Plotter Panel')
     } else {
       canvas.panelsSpace.makeInvisible(thisObject.payload.node.id, 'Layers Panel')
+      canvas.panelsSpace.makeInvisible(thisObject.payload.node.id, 'Plotter Panel')
     }
   }
 
diff --git a/ChartsSpace/ViewPort.js b/ChartsSpace/ViewPort.js
index 680508668..354c43747 100644
--- a/ChartsSpace/ViewPort.js
+++ b/ChartsSpace/ViewPort.js
@@ -213,7 +213,7 @@ function newViewport () {
     } else {
       newEvent.type = 'Zoom Out'
     }
-    console.log(thisObject.zoomTargetLevel)
+
     thisObject.eventHandler.raiseEvent('Zoom Changed', newEvent)
     return true
   }

From a42bbb25c680c129c4262e51db4fae13250348e0 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Sun, 9 Feb 2020 18:38:36 +0100
Subject: [PATCH 05/81] ZOOM_OUT_THRESHOLD

---
 ChartsSpace/TimeMachine.js | 2 +-
 Globals.js                 | 4 +++-
 Scales/TimeFrameScale.js   | 4 ++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js
index 4f783a125..16c1b5cf6 100644
--- a/ChartsSpace/TimeMachine.js
+++ b/ChartsSpace/TimeMachine.js
@@ -391,7 +391,7 @@ function newTimeMachine () {
   }
 
   function panelPhysics () {
-    if (thisObject.container.frame.isInViewPort() && canvas.chartSpace.viewport.zoomTargetLevel > ZOOM_OUT_THRESHOLD) {
+    if (thisObject.container.frame.isInViewPort() && canvas.chartSpace.viewport.zoomTargetLevel > ZOOM_OUT_THRESHOLD_FOR_HIDDING_PANELS) {
       canvas.panelsSpace.makeVisible(thisObject.payload.node.id, 'Layers Panel')
       canvas.panelsSpace.makeVisible(thisObject.payload.node.id, 'Plotter Panel')
     } else {
diff --git a/Globals.js b/Globals.js
index 5fc02bfdc..74e3acce9 100644
--- a/Globals.js
+++ b/Globals.js
@@ -41,7 +41,9 @@ UI_FONT = {
     SECONDARY: "Source Code Pro"
 };
 
-const ZOOM_OUT_THRESHOLD = 10 // This regulates some behavious changes that happens when the user zoom out below this level.
+const ZOOM_OUT_THRESHOLD_FOR_HIDDING_PANELS = 10 // 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. 
+
 let FONT_ASPECT_RATIO = 0.32;
 
 
diff --git a/Scales/TimeFrameScale.js b/Scales/TimeFrameScale.js
index e9695b4c4..3a2b3fd97 100644
--- a/Scales/TimeFrameScale.js
+++ b/Scales/TimeFrameScale.js
@@ -123,13 +123,13 @@ function newTimeFrameScale () {
   }
 
   function zoomOutPhysics () {
-    if (thisObject.isVisible === true && previousIsVisible === false) {
+    if ((thisObject.isVisible === true && previousIsVisible === false) && (canvas.chartSpace.viewport.zoomTargetLevel >= ZOOM_OUT_THRESHOLD_FOR_CHANGING_TIME_FRAME)) {
       let event = {}
       event.timeFrame = thisObject.timeFrame
       thisObject.container.eventHandler.raiseEvent('Time Frame Value Changed', event)
       previousIsVisible = true
     }
-    if (thisObject.isVisible === false && previousIsVisible === true) {
+    if ((thisObject.isVisible === false && previousIsVisible === true) || (canvas.chartSpace.viewport.zoomTargetLevel < ZOOM_OUT_THRESHOLD_FOR_CHANGING_TIME_FRAME)) {
       let event = {}
       event.timeFrame = ONE_DAY_IN_MILISECONDS
       thisObject.container.eventHandler.raiseEvent('Time Frame Value Changed', event)

From 0f0dbe4f0e6340880c3689652e60ffd2e648189d Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Sun, 9 Feb 2020 19:46:57 +0100
Subject: [PATCH 06/81] Time Machine Labeling implemented

---
 ChartsSpace/TimeMachine.js            | 26 ++++++++++++++++++++++++++
 Utilities/RoundedCornersBackground.js |  1 +
 2 files changed, 27 insertions(+)

diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js
index 16c1b5cf6..a44a3c01a 100644
--- a/ChartsSpace/TimeMachine.js
+++ b/ChartsSpace/TimeMachine.js
@@ -578,6 +578,32 @@ function newTimeMachine () {
         lineDash: [1, 3]
       }
       thisObject.container.frame.draw(false, true, false, thisObject.fitFunction, style)
+      drawLabel()
+    }
+  }
+
+  function drawLabel () {
+  /* Draw Title Above the Container */
+    let position = {
+      x: 0,
+      y: 0
+    }
+    let imageSize = 25
+    let fontSize = 25
+    let opacity = 1
+    let icon = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.type)
+
+    position = transformThisPoint(position, thisObject.container)
+    printLabel(thisObject.payload.node.name, position.x + 30, position.y - 10, opacity, fontSize)
+
+    if (icon !== undefined) {
+      if (icon.canDrawIcon === true) {
+        browserCanvasContext.drawImage(
+        icon, position.x - 0,
+        position.y - 30,
+        imageSize,
+        imageSize)
+      }
     }
   }
 
diff --git a/Utilities/RoundedCornersBackground.js b/Utilities/RoundedCornersBackground.js
index f534964ca..7ce98884c 100644
--- a/Utilities/RoundedCornersBackground.js
+++ b/Utilities/RoundedCornersBackground.js
@@ -131,6 +131,7 @@ function drawIcon (icon, xFactor, yFactor, xOffset, yOffset, imageSize, containe
       }
 
       imagePosition = container.frame.frameThisPoint(imagePosition)
+
       browserCanvasContext.drawImage(
         icon, imagePosition.x,
         imagePosition.y,

From 7e559abe57a079cffc5bf6cc7a16011c85a77b23 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Sun, 9 Feb 2020 20:01:20 +0100
Subject: [PATCH 07/81] Panels Hidden bug fixed

---
 ChartsSpace/TimeMachine.js |  8 ++++----
 Spaces/PanelsSpace.js      | 20 ++++++++++----------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js
index a44a3c01a..87571461a 100644
--- a/ChartsSpace/TimeMachine.js
+++ b/ChartsSpace/TimeMachine.js
@@ -392,11 +392,11 @@ function newTimeMachine () {
 
   function panelPhysics () {
     if (thisObject.container.frame.isInViewPort() && canvas.chartSpace.viewport.zoomTargetLevel > ZOOM_OUT_THRESHOLD_FOR_HIDDING_PANELS) {
-      canvas.panelsSpace.makeVisible(thisObject.payload.node.id, 'Layers Panel')
-      canvas.panelsSpace.makeVisible(thisObject.payload.node.id, 'Plotter Panel')
+      canvas.panelsSpace.unHide(thisObject.payload.node.id, 'Layers Panel')
+      canvas.panelsSpace.unHide(thisObject.payload.node.id, 'Plotter Panel')
     } else {
-      canvas.panelsSpace.makeInvisible(thisObject.payload.node.id, 'Layers Panel')
-      canvas.panelsSpace.makeInvisible(thisObject.payload.node.id, 'Plotter Panel')
+      canvas.panelsSpace.hide(thisObject.payload.node.id, 'Layers Panel')
+      canvas.panelsSpace.hide(thisObject.payload.node.id, 'Plotter Panel')
     }
   }
 
diff --git a/Spaces/PanelsSpace.js b/Spaces/PanelsSpace.js
index e52819191..efe7e03b9 100644
--- a/Spaces/PanelsSpace.js
+++ b/Spaces/PanelsSpace.js
@@ -8,8 +8,8 @@ function newPanelsSpace () {
   let thisObject = {
     visible: true,
     container: undefined,
-    makeVisible: makeVisible,
-    makeInvisible: makeInvisible,
+    unHide: unHide,
+    hide: hide,
     createNewPanel: createNewPanel,
     destroyPanel: destroyPanel,
     getPanel: getPanel,
@@ -76,20 +76,20 @@ function newPanelsSpace () {
     return panel.handle
   }
 
-  function makeVisible (owner, type) {
+  function unHide (owner, type) {
     for (let i = 0; i < thisObject.panels.length; i++) {
       let panel = thisObject.panels[i]
       if (panel.owner === owner && panel.type === type) {
-        panel.isVisible = true
+        panel.isHidden = false
       }
     }
   }
 
-  function makeInvisible (owner, type) {
+  function hide (owner, type) {
     for (let i = 0; i < thisObject.panels.length; i++) {
       let panel = thisObject.panels[i]
       if (panel.owner === owner && panel.type === type) {
-        panel.isVisible = false
+        panel.isHidden = true
       }
     }
   }
@@ -144,7 +144,7 @@ function newPanelsSpace () {
     if (thisObject.panels !== undefined) {
       for (let i = 0; i < thisObject.panels.length; i++) {
         let panel = thisObject.panels[i]
-        if (panel.isVisible === false) { continue }
+        if (panel.isVisible === false || panel.isHidden === true) { continue }
         /* setting the speed of the panel */
         if (panel.container.speed === undefined) {
           panel.container.speed = {
@@ -246,7 +246,7 @@ function newPanelsSpace () {
 
       for (let i = 0; i < currentIndex; i++) {
         let panel = thisObject.panels[i]
-        if (panel.isVisible === true) {
+        if (panel.isVisible === true && panel.isHidden === false) {
           if (isThisPointInsideThisFrame(corner1, panel.container.frame) === true) {
             pushOut(currentContainer, panel.container, panel.gravitatesTowards)
           }
@@ -319,7 +319,7 @@ function newPanelsSpace () {
       let panel = thisObject.panels[i]
       let owner = canvas.chartSpace.inViewport.get(panel.owner)
       if (owner !== undefined) {
-        if (panel.isVisible === true) {
+        if (panel.isVisible === true && panel.isHidden === false) {
           panel.draw()
         }
       }
@@ -338,7 +338,7 @@ function newPanelsSpace () {
       let panel = thisObject.panels[i]
       let owner = canvas.chartSpace.inViewport.get(panel.owner)
       if (owner !== undefined) {
-        if (panel.isVisible === true) {
+        if (panel.isVisible === true && panel.isHidden === false) {
           container = panel.getContainer(point)
         }
       }

From d3599dd3f5c2b1f6941a5b942efbc1dfa3f5c5da Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Mon, 10 Feb 2020 00:13:54 +0100
Subject: [PATCH 08/81] Saving Video

---
 Animation.js                         |  8 +++++++-
 Canvas.js                            | 30 ++++++++++++++++------------
 DesignerSpace/Workspace/Workspace.js | 10 +++++-----
 Globals.js                           |  5 ++++-
 Spaces/TopSpace.js                   |  6 +++++-
 Utilities.js                         |  4 ++--
 6 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/Animation.js b/Animation.js
index cd00a0fb7..d141301f1 100644
--- a/Animation.js
+++ b/Animation.js
@@ -121,6 +121,13 @@ function newAnimation () {
         browserCanvas.height = 1
       }
 
+      /* Gif Recording */
+
+      if (areWeRecording === true) {
+        console.log('ADDING FRAME')
+        mediaRecorder.capture(browserCanvas)
+      }
+
       /* We request the next frame to be drawn, and stablishing a loop */
 
       /* Use this code for full animation speed. */
@@ -148,4 +155,3 @@ function newAnimation () {
     browserCanvasContext.fill()
   }
 }
-
diff --git a/Canvas.js b/Canvas.js
index a37e2f31e..1246f2476 100644
--- a/Canvas.js
+++ b/Canvas.js
@@ -194,7 +194,24 @@ function newCanvas () {
     }
   }
 
+  function checkGifRecording (event) {
+    if (event.keyCode === 121) { //  F10
+      if (areWeRecording === false) {
+        mediaRecorder = new CCapture({ format: 'webm', framerate: 12, name: 'Superalgos.video' })
+        mediaRecorder.start()
+        areWeRecording = true
+        console.log('RECORDING')
+      } else {
+        console.log('SAVING')
+        areWeRecording = false
+        mediaRecorder.stop()
+        mediaRecorder.save()
+      }
+    }
+  }
   function onKeyDown (event) {
+    checkGifRecording(event)
+
     let nodeOnFocus = canvas.designerSpace.workspace.getNodeThatIsOnFocus()
     if (nodeOnFocus !== undefined) {
       if (nodeOnFocus.payload.uiObject.codeEditor !== undefined) {
@@ -231,19 +248,6 @@ function newCanvas () {
       }
     }
 
-    if ((event.ctrlKey === true || event.metaKey === true) && event.altKey === true && event.shiftKey === true && event.keyCode === 122) { // Regenerates APP SCHEMA FILE
-      /*
-      for (let i = 0; i < APP_SCHEMA_ARRAY.length; i++) {
-        let schemaNode = APP_SCHEMA_ARRAY[i]
-        schemaNode.addLeftIcons = true
-      }
-      */
-      let text = JSON.stringify(APP_SCHEMA_ARRAY)
-      let fileName = 'AppSchema.json'
-      download(fileName, text)
-      return
-    }
-
     if (event.altKey === true && event.code === 'ArrowUp') {
       thisObject.cockpitSpace.toTop()
       return
diff --git a/DesignerSpace/Workspace/Workspace.js b/DesignerSpace/Workspace/Workspace.js
index 9c2bb4721..657b55f13 100644
--- a/DesignerSpace/Workspace/Workspace.js
+++ b/DesignerSpace/Workspace/Workspace.js
@@ -260,14 +260,14 @@ function newWorkspace () {
         {
           let text = stringifyWorkspace(true)
           let fileName = 'Share - ' + payload.node.type + ' - ' + payload.node.name + '.json'
-          download(fileName, text)
+          downloadText(fileName, text)
         }
         break
       case 'Backup Workspace':
         {
           let text = stringifyWorkspace(false)
           let fileName = 'Backup - ' + payload.node.type + ' - ' + payload.node.name + '.json'
-          download(fileName, text)
+          downloadText(fileName, text)
         }
         break
       case 'Edit Code':
@@ -284,7 +284,7 @@ function newWorkspace () {
             nodeName = '.' + nodeName
           }
           let fileName = 'Share - ' + payload.node.type + ' - ' + nodeName + '.json'
-          download(fileName, text)
+          downloadText(fileName, text)
         }
 
         break
@@ -299,7 +299,7 @@ function newWorkspace () {
             nodeName = ' ' + nodeName
           }
           let fileName = 'Backup - ' + payload.node.type + ' - ' + nodeName + '.json'
-          download(fileName, text)
+          downloadText(fileName, text)
         }
 
         break
@@ -314,7 +314,7 @@ function newWorkspace () {
             nodeName = ' ' + nodeName
           }
           let fileName = 'Clone - ' + payload.node.type + ' - ' + nodeName + '.json'
-          download(fileName, text)
+          downloadText(fileName, text)
         }
 
         break
diff --git a/Globals.js b/Globals.js
index 74e3acce9..0a7a91072 100644
--- a/Globals.js
+++ b/Globals.js
@@ -42,7 +42,7 @@ UI_FONT = {
 };
 
 const ZOOM_OUT_THRESHOLD_FOR_HIDDING_PANELS = 10 // 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_CHANGING_TIME_FRAME = 5  // This help regulate when to change the Time Frame base on the level of zoom out.
 
 let FONT_ASPECT_RATIO = 0.32;
 
@@ -211,6 +211,9 @@ We define here the size of the chartSpace. It has to bee enough big in order to
 const TIME_MACHINE_WIDTH = 250;
 const TIME_MACHINE_HEIGHT = 250 / 50;
 
+let mediaRecorder // to downloadText canvas animation as a mediaRecorder
+let areWeRecording = false
+
 function toRadians(angle) {
     return angle * (Math.PI / 180);
 }
diff --git a/Spaces/TopSpace.js b/Spaces/TopSpace.js
index 7a2b22fb6..a9295b91a 100644
--- a/Spaces/TopSpace.js
+++ b/Spaces/TopSpace.js
@@ -59,7 +59,11 @@ function newTopSpace () {
     browserCanvasContext.beginPath()
 
     browserCanvasContext.rect(0, 0, thisObject.container.frame.width, thisObject.container.frame.height)
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', ' + opacity + ')'
+    if (areWeRecording === true) {
+      browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')'
+    } else {
+      browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', ' + opacity + ')'
+    }
 
     browserCanvasContext.closePath()
 
diff --git a/Utilities.js b/Utilities.js
index d9c134816..d95e06b72 100644
--- a/Utilities.js
+++ b/Utilities.js
@@ -82,10 +82,10 @@ function convertTimeFrameToName (pTimeFrame) {
   }
 }
 
-function download (filename, text) {
+function downloadText (filename, text) {
   let element = document.createElement('a')
   element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
-  element.setAttribute('download', filename)
+  element.setAttribute('downloadText', filename)
   element.style.display = 'none'
   document.body.appendChild(element)
   element.click()

From 3aee61a083237b4221eb6798461f8f8d8debca28 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Mon, 10 Feb 2020 09:04:22 +0100
Subject: [PATCH 09/81] Downloading PNG implemented

---
 Animation.js |  4 +---
 Canvas.js    | 34 ++++++++++++++++++++++++++++------
 Utilities.js | 17 +++++++++++++++++
 3 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/Animation.js b/Animation.js
index d141301f1..53fd737a7 100644
--- a/Animation.js
+++ b/Animation.js
@@ -121,10 +121,8 @@ function newAnimation () {
         browserCanvas.height = 1
       }
 
-      /* Gif Recording */
-
+      /* Media Recording */
       if (areWeRecording === true) {
-        console.log('ADDING FRAME')
         mediaRecorder.capture(browserCanvas)
       }
 
diff --git a/Canvas.js b/Canvas.js
index 1246f2476..3253906ca 100644
--- a/Canvas.js
+++ b/Canvas.js
@@ -194,15 +194,37 @@ function newCanvas () {
     }
   }
 
-  function checkGifRecording (event) {
-    if (event.keyCode === 121) { //  F10
+  function checkMediaRecording (event) {
+    if ((event.ctrlKey === true || event.metaKey === true)) {
+      let constructorParams
+      switch (event.keyCode) {
+        case 118: { //  F7
+          downloadCanvas('Superalgos.image.capture')
+          return
+          break
+        }
+        case 119: { //  F8
+          constructorParams = { format: 'png', name: 'Superalgos.image.capture' }
+          break
+        }
+        case 120: { //  F9
+          constructorParams = { format: 'gif', workersPath: 'externalScripts/', framerate: 12, name: 'Superalgos.video.capture'}
+          break
+        }
+        case 121: { //  F10
+          constructorParams = { format: 'webm', framerate: 12, name: 'Superalgos.video.capture' }
+          break
+        }
+        default: return
+      }
+
       if (areWeRecording === false) {
-        mediaRecorder = new CCapture({ format: 'webm', framerate: 12, name: 'Superalgos.video' })
+        console.log('RECORDING', constructorParams.format)
+        mediaRecorder = new CCapture(constructorParams)
         mediaRecorder.start()
         areWeRecording = true
-        console.log('RECORDING')
       } else {
-        console.log('SAVING')
+        console.log('SAVING', constructorParams.format)
         areWeRecording = false
         mediaRecorder.stop()
         mediaRecorder.save()
@@ -210,7 +232,7 @@ function newCanvas () {
     }
   }
   function onKeyDown (event) {
-    checkGifRecording(event)
+    checkMediaRecording(event)
 
     let nodeOnFocus = canvas.designerSpace.workspace.getNodeThatIsOnFocus()
     if (nodeOnFocus !== undefined) {
diff --git a/Utilities.js b/Utilities.js
index d95e06b72..ddf1f302a 100644
--- a/Utilities.js
+++ b/Utilities.js
@@ -92,6 +92,23 @@ function downloadText (filename, text) {
   document.body.removeChild(element)
 }
 
+function downloadCanvas (filename) {
+  let data = browserCanvas.toDataURL('image/png', 1)
+  /* Change MIME type to trick the browser to downlaod the file instead of displaying it */
+  data = data.replace(/^data:image\/[^;]*/, 'data:application/octet-stream')
+
+  /* In addition to <a>'s "download" attribute, you can define HTTP-style headers */
+  data = data.replace(/^data:application\/octet-stream/, 'data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=' + filename + '.png')
+
+  let element = document.createElement('a')
+  element.setAttribute('href', data)
+  element.setAttribute('download', filename + '.PNG')
+  element.style.display = 'none'
+  document.body.appendChild(element)
+  element.click()
+  document.body.removeChild(element)
+};
+
 function transformThisPoint (point, container) {
     /* We make the point relative to the current frame */
 

From 0e731242f5a1e4c2b79e47a9c814bdab20d87ac4 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Mon, 10 Feb 2020 09:19:18 +0100
Subject: [PATCH 10/81] final

---
 Canvas.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/Canvas.js b/Canvas.js
index 3253906ca..cc1dad187 100644
--- a/Canvas.js
+++ b/Canvas.js
@@ -198,15 +198,11 @@ function newCanvas () {
     if ((event.ctrlKey === true || event.metaKey === true)) {
       let constructorParams
       switch (event.keyCode) {
-        case 118: { //  F7
+        case 119: { //  F8
           downloadCanvas('Superalgos.image.capture')
           return
           break
         }
-        case 119: { //  F8
-          constructorParams = { format: 'png', name: 'Superalgos.image.capture' }
-          break
-        }
         case 120: { //  F9
           constructorParams = { format: 'gif', workersPath: 'externalScripts/', framerate: 12, name: 'Superalgos.video.capture'}
           break

From 2ea8355289520c1a0f14858af116cc90e252dfd0 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Mon, 10 Feb 2020 09:39:36 +0100
Subject: [PATCH 11/81] Cockpit resize fixed

---
 Canvas.js              |  4 ++--
 Spaces/CockpitSpace.js | 11 +++++++++++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/Canvas.js b/Canvas.js
index cc1dad187..8db9aceb5 100644
--- a/Canvas.js
+++ b/Canvas.js
@@ -204,11 +204,11 @@ function newCanvas () {
           break
         }
         case 120: { //  F9
-          constructorParams = { format: 'gif', workersPath: 'externalScripts/', framerate: 12, name: 'Superalgos.video.capture'}
+          constructorParams = { format: 'gif', workersPath: 'externalScripts/', framerate: 8, name: 'Superalgos.video.capture'}
           break
         }
         case 121: { //  F10
-          constructorParams = { format: 'webm', framerate: 12, name: 'Superalgos.video.capture' }
+          constructorParams = { format: 'webm', framerate: 8, name: 'Superalgos.video.capture' }
           break
         }
         default: return
diff --git a/Spaces/CockpitSpace.js b/Spaces/CockpitSpace.js
index 3fd7ac075..4293483e7 100644
--- a/Spaces/CockpitSpace.js
+++ b/Spaces/CockpitSpace.js
@@ -80,6 +80,17 @@
    function resize () {
      thisObject.container.frame.width = browserCanvas.width
      thisObject.container.frame.height = COCKPIT_SPACE_HEIGHT
+
+     switch (thisObject.status) {
+       case 'BOTTOM': {
+         thisObject.container.frame.position.y = browserCanvas.height - COCKPIT_SPACE_HEIGHT
+         break
+       }
+       case 'TOP': {
+         thisObject.container.frame.position.y = 0
+         break
+       }
+     }
    }
 
    function toTop () {

From 90d0d520602dce9e87ead6812e2a63cf8af2af64 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Mon, 10 Feb 2020 09:50:48 +0100
Subject: [PATCH 12/81] Preventing Panel access when hidden

---
 Panels/LayersPanel.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/Panels/LayersPanel.js b/Panels/LayersPanel.js
index 98684a18e..bfc43216f 100644
--- a/Panels/LayersPanel.js
+++ b/Panels/LayersPanel.js
@@ -27,7 +27,6 @@ function newLayersPanel () {
 
   const LAYER_SEPARATION = 0
 
-  let visible = true
   let headerHeight = 40
   let footerHeight = 10
   let layerHeight = 70
@@ -188,12 +187,14 @@ function newLayersPanel () {
   }
 
   function panelSizePhysics () {
+    if (isInitialized === false || thisObject.visible === false || thisObject.isHidden === true) { return }
+
     let viewPortHeight = canvas.chartSpace.viewport.visibleArea.bottomLeft.y - canvas.chartSpace.viewport.visibleArea.topLeft.y
 
     if (viewPortHeight < headerHeight) {
-      visible = false
+      thisObject.visible = false
     } else {
-      visible = true
+      thisObject.visible = true
     }
 
     if (desiredPanelHeight > viewPortHeight) {
@@ -239,6 +240,7 @@ function newLayersPanel () {
   }
 
   function getContainer (point) {
+    if (isInitialized === false || thisObject.visible === false || thisObject.isHidden === true) { return }
     let container
 
     container = thisObject.panelTabButton.getContainer(point)
@@ -367,7 +369,7 @@ function newLayersPanel () {
   }
 
   function draw () {
-    if (isInitialized === false || visible === false) { return }
+    if (isInitialized === false || thisObject.visible === false || thisObject.isHidden === true) { return }
 
     // thisObject.container.frame.draw(false, false, false, thisObject.fitFunction)
 

From 5661f9e429e0de1dec7c7395ee235ccbb92503ce Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Mon, 10 Feb 2020 09:57:54 +0100
Subject: [PATCH 13/81] Bug with browser zooming

---
 ChartsSpace/ViewPort.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ChartsSpace/ViewPort.js b/ChartsSpace/ViewPort.js
index 354c43747..77c7063b0 100644
--- a/ChartsSpace/ViewPort.js
+++ b/ChartsSpace/ViewPort.js
@@ -174,6 +174,7 @@ function newViewport () {
   }
 
   function onMouseWheel (event) {
+    if ((event.ctrlKey === true || event.metaKey === true)) { return }
     let morePower = 1
     let amount = event.delta
     if (event.buttons === 4) { morePower = 2 } // Mouse wheel pressed.

From 871679820681402d32c309fec8dba4ae160e7372 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Mon, 10 Feb 2020 11:37:22 +0100
Subject: [PATCH 14/81] Header upgraded

---
 Globals.js         |  2 +-
 Spaces/TopSpace.js | 69 ++++++++++++++++++++++++++++++++++++++--------
 SplashScreen.js    |  2 +-
 3 files changed, 60 insertions(+), 13 deletions(-)

diff --git a/Globals.js b/Globals.js
index 0a7a91072..a8204598e 100644
--- a/Globals.js
+++ b/Globals.js
@@ -178,7 +178,7 @@ maxDate.setDate(maxDate.getDate() + 365 * 1);  // We might have charts that proj
 const MIN_PLOTABLE_DATE = new Date(2015, 0, 1, 0, 0, 0);
 const MAX_PLOTABLE_DATE = maxDate;
 
-const TOP_SPACE_HEIGHT = 2
+const TOP_SPACE_HEIGHT = 40
 const COCKPIT_SPACE_HEIGHT = 30;
 const BREAKPOINT_HEIGHT = 15;
 const SIDE_PANEL_WIDTH = 450
diff --git a/Spaces/TopSpace.js b/Spaces/TopSpace.js
index a9295b91a..3fd2bc7de 100644
--- a/Spaces/TopSpace.js
+++ b/Spaces/TopSpace.js
@@ -7,27 +7,45 @@ function newTopSpace () {
     initialize: initialize
   }
 
-  let container = newContainer()
-  container.initialize()
-  thisObject.container = container
+  thisObject.container = newContainer()
+  thisObject.container.initialize()
 
   resize()
 
-  container.isDraggeable = false
-
+  thisObject.container.isDraggeable = false
+  let backgroundImage
+  let logoImage
   return thisObject
 
   function initialize () {
     canvas.eventHandler.listenToEvent('Browser Resized', resize)
+
+    backgroundImage = new Image()
+    logoImage = new Image()
+
+    loadImage('superalgos-header-background', backgroundImage)
+    loadImage('superalgos-logo-for-color-background', logoImage)
+
+    function loadImage (name, image) {
+      const PATH = 'Images/'
+
+      image.onload = onImageLoad
+      image.fileName = name
+
+      function onImageLoad () {
+        image.canDraw = true
+      }
+      image.src = window.canvasApp.urlPrefix + PATH + name + '.png'
+    }
   }
 
   function resize () {
     thisObject.container.frame.width = browserCanvas.width
     thisObject.container.frame.height = TOP_SPACE_HEIGHT
 
-    container.frame.position.x = 0
+    thisObject.container.frame.position.x = 0
     try {
-      container.frame.position.y = canvas.chartSpace.viewport.visibleArea.bottomLeft.y
+      thisObject.container.frame.position.y = canvas.chartSpace.viewport.visibleArea.bottomLeft.y
     } catch (e) { }
   }
 
@@ -54,19 +72,48 @@ function newTopSpace () {
   }
 
   function drawBackground () {
+    /* Solid Color */
     let opacity = 1
-
     browserCanvasContext.beginPath()
-
     browserCanvasContext.rect(0, 0, thisObject.container.frame.width, thisObject.container.frame.height)
     if (areWeRecording === true) {
       browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')'
     } else {
       browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', ' + opacity + ')'
     }
-
     browserCanvasContext.closePath()
-
     browserCanvasContext.fill()
+
+    /* Background Image */
+    if (backgroundImage !== undefined) {
+      if (backgroundImage.canDraw === true) {
+        let imagePosition = {
+          x: 0,
+          y: 0
+        }
+
+        browserCanvasContext.drawImage(
+          backgroundImage, imagePosition.x,
+          imagePosition.y,
+          browserCanvas.width,
+          TOP_SPACE_HEIGHT - 2)
+      }
+    }
+
+    /* Logo Image */
+    if (logoImage !== undefined) {
+      if (logoImage.canDraw === true) {
+        let imagePosition = {
+          x: 10,
+          y: 0
+        }
+
+        browserCanvasContext.drawImage(
+          logoImage, imagePosition.x,
+          imagePosition.y,
+          150,
+          TOP_SPACE_HEIGHT - 2)
+      }
+    }
   }
 }
diff --git a/SplashScreen.js b/SplashScreen.js
index 9768aaa82..1fa6b751f 100644
--- a/SplashScreen.js
+++ b/SplashScreen.js
@@ -43,7 +43,7 @@ function newSplashScreen () {
       canDrawLogo = true
     }
 
-    logo.src = window.canvasApp.urlPrefix + 'Images/Superalgos-logo-horz-sm-t.png'
+    logo.src = window.canvasApp.urlPrefix + 'Images/superalgos-logo.png'
 
     canvas.eventHandler.listenToEvent('Browser Resized', resize)
   }

From 6a6da5c2dd2de0823ec04121d1c853f3b53e6763 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Mon, 10 Feb 2020 12:35:39 +0100
Subject: [PATCH 15/81] bug in positioning at the top

---
 Spaces/CockpitSpace.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/Spaces/CockpitSpace.js b/Spaces/CockpitSpace.js
index 4293483e7..d5296ae1e 100644
--- a/Spaces/CockpitSpace.js
+++ b/Spaces/CockpitSpace.js
@@ -87,14 +87,14 @@
          break
        }
        case 'TOP': {
-         thisObject.container.frame.position.y = 0
+         thisObject.container.frame.position.y = TOP_SPACE_HEIGHT
          break
        }
      }
    }
 
    function toTop () {
-     thisObject.container.frame.position.y = 0
+     thisObject.container.frame.position.y = COCKPIT_SPACE_HEIGHT
    }
 
    function toBottom () {
@@ -148,8 +148,8 @@
        canvas.floatingSpace.makeVisible()
      }
 
-     if (thisObject.container.frame.position.y < browserCanvas.height * 0.5 / 100) {
-       thisObject.container.frame.position.y = 0
+     if (thisObject.container.frame.position.y < browserCanvas.height * 0.5 / 100 + TOP_SPACE_HEIGHT) {
+       thisObject.container.frame.position.y = TOP_SPACE_HEIGHT
        thisObject.status = 'TOP'
        canvas.panelsSpace.visible = false
      } else {

From c1214b6655106116a521878a30d34f62cd9bd5c2 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Mon, 10 Feb 2020 12:42:58 +0100
Subject: [PATCH 16/81] Bug fixed at moving cockspit with keys

---
 Canvas.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/Canvas.js b/Canvas.js
index 8db9aceb5..e42ba92c4 100644
--- a/Canvas.js
+++ b/Canvas.js
@@ -227,6 +227,7 @@ function newCanvas () {
       }
     }
   }
+
   function onKeyDown (event) {
     checkMediaRecording(event)
 
@@ -266,27 +267,27 @@ function newCanvas () {
       }
     }
 
-    if (event.altKey === true && event.code === 'ArrowUp') {
+    if (event.altKey === true && (event.ctrlKey === true || event.metaKey === true) && event.code === 'ArrowUp') {
       thisObject.cockpitSpace.toTop()
       return
     }
 
-    if (event.altKey === true && event.code === 'ArrowDown') {
+    if (event.altKey === true && (event.ctrlKey === true || event.metaKey === true) && event.code === 'ArrowDown') {
       thisObject.cockpitSpace.toBottom()
       return
     }
 
-    if (event.altKey === true && event.code === 'ArrowLeft' || event.altKey === true && event.code === 'ArrowRight') {
+    if (event.altKey === true && (event.ctrlKey === true || event.metaKey === true) && event.code === 'ArrowLeft' || event.altKey === true && (event.ctrlKey === true || event.metaKey === true) && event.code === 'ArrowRight') {
       thisObject.cockpitSpace.toMiddle()
       return
     }
 
-    if (event.shiftKey === true && event.ctrlKey && event.code === 'ArrowUp') {
+    if (event.shiftKey === true && (event.ctrlKey === true || event.metaKey === true) && event.code === 'ArrowUp') {
       thisObject.cockpitSpace.moveUp()
       return
     }
 
-    if (event.shiftKey === true && event.ctrlKey && event.code === 'ArrowDown') {
+    if (event.shiftKey === true && (event.ctrlKey === true || event.metaKey === true) && event.code === 'ArrowDown') {
       thisObject.cockpitSpace.moveDown()
       return
     }

From 0ff3c1fa8b1ddd382093c1c19fadc9f472cbeca6 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Mon, 10 Feb 2020 12:49:14 +0100
Subject: [PATCH 17/81] Minor improvements

---
 Spaces/CockpitSpace.js | 4 ++--
 Spaces/TopSpace.js     | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/Spaces/CockpitSpace.js b/Spaces/CockpitSpace.js
index d5296ae1e..e7ac6a068 100644
--- a/Spaces/CockpitSpace.js
+++ b/Spaces/CockpitSpace.js
@@ -106,14 +106,14 @@
    }
 
    function moveUp () {
-     thisObject.container.frame.position.y = thisObject.container.frame.position.y - browserCanvas.height / 10
+     thisObject.container.frame.position.y = thisObject.container.frame.position.y - COCKPIT_SPACE_HEIGHT * 2
      if (thisObject.container.frame.position.y < 0) {
        thisObject.container.frame.position.y = 0
      }
    }
 
    function moveDown () {
-     thisObject.container.frame.position.y = thisObject.container.frame.position.y + browserCanvas.height / 10
+     thisObject.container.frame.position.y = thisObject.container.frame.position.y + COCKPIT_SPACE_HEIGHT * 2
      if (thisObject.container.frame.position.y > browserCanvas.height - COCKPIT_SPACE_HEIGHT) {
        thisObject.container.frame.position.y = browserCanvas.height - COCKPIT_SPACE_HEIGHT
      }
diff --git a/Spaces/TopSpace.js b/Spaces/TopSpace.js
index 3fd2bc7de..8ed4149c4 100644
--- a/Spaces/TopSpace.js
+++ b/Spaces/TopSpace.js
@@ -77,9 +77,9 @@ function newTopSpace () {
     browserCanvasContext.beginPath()
     browserCanvasContext.rect(0, 0, thisObject.container.frame.width, thisObject.container.frame.height)
     if (areWeRecording === true) {
-      browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')'
-    } else {
       browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.PATINATED_TURQUOISE + ', ' + opacity + ')'
+    } else {
+      browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + opacity + ')'
     }
     browserCanvasContext.closePath()
     browserCanvasContext.fill()

From bda9a9af0974b3f5bbbb640c5bf5ab04921fd449 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Mon, 10 Feb 2020 13:04:10 +0100
Subject: [PATCH 18/81] More fixes and improvement at flash screen

---
 Canvas.js       | 13 ++++---------
 SplashScreen.js | 15 ++++++---------
 2 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/Canvas.js b/Canvas.js
index e42ba92c4..f0920a50f 100644
--- a/Canvas.js
+++ b/Canvas.js
@@ -267,27 +267,22 @@ function newCanvas () {
       }
     }
 
-    if (event.altKey === true && (event.ctrlKey === true || event.metaKey === true) && event.code === 'ArrowUp') {
+    if ((event.ctrlKey === true || event.metaKey === true) && event.code === 'ArrowUp') {
       thisObject.cockpitSpace.toTop()
       return
     }
 
-    if (event.altKey === true && (event.ctrlKey === true || event.metaKey === true) && event.code === 'ArrowDown') {
+    if ((event.ctrlKey === true || event.metaKey === true) && event.code === 'ArrowDown') {
       thisObject.cockpitSpace.toBottom()
       return
     }
 
-    if (event.altKey === true && (event.ctrlKey === true || event.metaKey === true) && event.code === 'ArrowLeft' || event.altKey === true && (event.ctrlKey === true || event.metaKey === true) && event.code === 'ArrowRight') {
-      thisObject.cockpitSpace.toMiddle()
-      return
-    }
-
-    if (event.shiftKey === true && (event.ctrlKey === true || event.metaKey === true) && event.code === 'ArrowUp') {
+    if (event.shiftKey === true && (event.ctrlKey === true || event.metaKey === true) && event.code === 'ArrowLeft') {
       thisObject.cockpitSpace.moveUp()
       return
     }
 
-    if (event.shiftKey === true && (event.ctrlKey === true || event.metaKey === true) && event.code === 'ArrowDown') {
+    if (event.shiftKey === true && (event.ctrlKey === true || event.metaKey === true) && event.code === 'ArrowRight') {
       thisObject.cockpitSpace.moveDown()
       return
     }
diff --git a/SplashScreen.js b/SplashScreen.js
index 1fa6b751f..b81e8352a 100644
--- a/SplashScreen.js
+++ b/SplashScreen.js
@@ -71,12 +71,9 @@ function newSplashScreen () {
         /* Set the background. */
 
     browserCanvasContext.beginPath()
-
     browserCanvasContext.rect(0, 0, thisObject.container.frame.width, thisObject.container.frame.height)
     browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ')'
-
     browserCanvasContext.closePath()
-
     browserCanvasContext.fill()
 
     if (canDrawLogo === false) { return }
@@ -100,18 +97,18 @@ function newSplashScreen () {
         /* Second the % of Advance. */
 
     let label = '' + Math.trunc(stepsInitializationCounter) + ' %'
-    stepsInitializationCounter = stepsInitializationCounter + 5.0
+    stepsInitializationCounter = stepsInitializationCounter + 2.0
 
     if (stepsInitializationCounter > 99) {
       splashScreenNeeded = false
       stepsInitializationCounter = 99
     }
 
-    let fontSize = 10
+    let fontSize = 15
 
     let labelPoint = {
-      x: thisObject.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 25,
-      y: thisObject.container.frame.height / 2 + fontSize / 2 + fontSize * 0.1 + 80 + yDisplacement
+      x: thisObject.container.frame.width / 2 - label.length / 2 * fontSize * FONT_ASPECT_RATIO - 22,
+      y: thisObject.container.frame.height / 2 + fontSize / 2 + fontSize * 0.1 + 90 + yDisplacement
     }
 
     browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
@@ -123,13 +120,13 @@ function newSplashScreen () {
 
         /* Algo Bots Competitions Sub Title */
 
-    fontSize = 15
+    fontSize = 35
 
     title = 'Beta'
 
     titlePoint = {
       x: thisObject.container.frame.width / 2 - title.length / 2 * fontSize * FONT_ASPECT_RATIO - 20,
-      y: thisObject.container.frame.height / 2 - fontSize * 2 + 80 + yDisplacement
+      y: thisObject.container.frame.height / 2 + 70 + yDisplacement
     }
 
     browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY

From cac58db47af6645bdeda5bb35896995e4cc8f6cf Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Mon, 10 Feb 2020 18:32:31 +0100
Subject: [PATCH 19/81] edge editor first part implemented

---
 ChartsSpace/EdgeEditor.js  | 247 +++++++++++++++++++++++++++++++++++++
 ChartsSpace/TimeMachine.js |  21 ++--
 Frame.js                   |  10 +-
 Scales/TimeScale.js        |   2 +
 4 files changed, 269 insertions(+), 11 deletions(-)
 create mode 100644 ChartsSpace/EdgeEditor.js

diff --git a/ChartsSpace/EdgeEditor.js b/ChartsSpace/EdgeEditor.js
new file mode 100644
index 000000000..06e82d9cb
--- /dev/null
+++ b/ChartsSpace/EdgeEditor.js
@@ -0,0 +1,247 @@
+function newEdgeEditor () {
+  const MODULE_NAME = 'Edge Editor'
+
+  let thisObject = {
+    container: undefined,
+    fitFunction: undefined,
+    isVisible: true,
+    physics: physics,
+    drawForeground: drawForeground,
+    getContainer: getContainer,
+    initialize: initialize,
+    finalize: finalize
+  }
+
+  const EDGE_SIZE = 6
+
+  thisObject.container = newContainer()
+  thisObject.container.initialize(MODULE_NAME)
+
+  thisObject.container.isDraggeable = true
+  thisObject.container.isClickeable = false
+  thisObject.container.isWheelable = false
+  thisObject.container.detectMouseOver = true
+
+  let isMouseOver
+  let whereIsMouseOver = 'outside'
+
+  let onMouseOverEventSubscriptionId
+  let onMouseNotOverEventSubscriptionId
+
+  let mouse = {
+    position: {
+      x: 0,
+      y: 0
+    }
+  }
+
+  return thisObject
+
+  function finalize () {
+    thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
+    thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
+
+    thisObject.container.finalize()
+    thisObject.container = undefined
+    thisObject.fitFunction = undefined
+
+    mouse = undefined
+  }
+
+  function initialize () {
+    onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
+    onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
+  }
+
+  function onMouseOver (event) {
+    isMouseOver = true
+  }
+
+  function onMouseNotOver () {
+    isMouseOver = false
+  }
+
+  function getContainer (mousePoint) {
+    if (thisObject.container.frame.isThisPointHere(mousePoint, undefined, undefined, -EDGE_SIZE) === true) {
+      console.log('isThisPointHere ', true)
+
+      let point = {
+        x: mousePoint.x,
+        y: mousePoint.y
+      }
+      point = unTransformThisPoint(point, thisObject.container)
+
+      if (point.x <= 0) {
+        whereIsMouseOver = 'left'
+        return thisObject.container
+      }
+
+      if (point.x >= thisObject.container.frame.width) {
+        whereIsMouseOver = 'right'
+        return thisObject.container
+      }
+
+      if (point.y <= 0) {
+        whereIsMouseOver = 'top'
+        return thisObject.container
+      }
+
+      if (point.y >= thisObject.container.frame.height) {
+        whereIsMouseOver = 'bottom'
+        return thisObject.container
+      }
+
+      whereIsMouseOver = 'center'
+    } else {
+      isMouseOver = false
+      whereIsMouseOver = 'outside'
+    }
+  }
+
+  function physics () {
+
+  }
+
+  function drawForeground () {
+    let edgeSize
+    let lineWidth
+
+    if (whereIsMouseOver === 'outside') {
+      edgeSize = EDGE_SIZE / 2
+      lineWidth = 0.1
+    } else {
+      edgeSize = EDGE_SIZE
+      lineWidth = 0.5
+    }
+
+    const OPACITY = 1
+
+    console.log('whereIsMouseOver ', whereIsMouseOver, 'isMouseOver ' + isMouseOver)
+
+    pointA1 = {
+      x: 0,
+      y: 0
+    }
+
+    pointA2 = {
+      x: thisObject.container.frame.width,
+      y: 0
+    }
+
+    pointA3 = {
+      x: thisObject.container.frame.width,
+      y: thisObject.container.frame.height
+    }
+
+    pointA4 = {
+      x: 0,
+      y: thisObject.container.frame.height
+    }
+
+    pointB1 = {
+      x: 0,
+      y: 0
+    }
+
+    pointB2 = {
+      x: thisObject.container.frame.width,
+      y: 0
+    }
+
+    pointB3 = {
+      x: thisObject.container.frame.width,
+      y: thisObject.container.frame.height
+    }
+
+    pointB4 = {
+      x: 0,
+      y: thisObject.container.frame.height
+    }
+
+    pointA1 = transformThisPoint(pointA1, thisObject.container)
+    pointA2 = transformThisPoint(pointA2, thisObject.container)
+    pointA3 = transformThisPoint(pointA3, thisObject.container)
+    pointA4 = transformThisPoint(pointA4, thisObject.container)
+
+    pointB1 = transformThisPoint(pointB1, thisObject.container)
+    pointB2 = transformThisPoint(pointB2, thisObject.container)
+    pointB3 = transformThisPoint(pointB3, thisObject.container)
+    pointB4 = transformThisPoint(pointB4, thisObject.container)
+
+    pointB1 = {
+      x: pointB1.x - edgeSize,
+      y: pointB1.y - edgeSize
+    }
+
+    pointB2 = {
+      x: pointB2.x + edgeSize,
+      y: pointB2.y - edgeSize
+    }
+
+    pointB3 = {
+      x: pointB3.x + edgeSize,
+      y: pointB3.y + edgeSize
+    }
+
+    pointB4 = {
+      x: pointB4.x - edgeSize,
+      y: pointB4.y + edgeSize
+    }
+
+    browserCanvasContext.setLineDash([0, 0])
+
+    browserCanvasContext.beginPath()
+    browserCanvasContext.moveTo(pointA1.x, pointA1.y)
+    browserCanvasContext.lineTo(pointA2.x, pointA2.y)
+    browserCanvasContext.lineTo(pointB2.x, pointB2.y)
+    browserCanvasContext.lineTo(pointB1.x, pointB1.y)
+    browserCanvasContext.lineTo(pointA1.x, pointA1.y)
+    browserCanvasContext.closePath()
+
+    drawEdge('top')
+
+    browserCanvasContext.beginPath()
+    browserCanvasContext.moveTo(pointA2.x, pointA2.y)
+    browserCanvasContext.lineTo(pointA3.x, pointA3.y)
+    browserCanvasContext.lineTo(pointB3.x, pointB3.y)
+    browserCanvasContext.lineTo(pointB2.x, pointB2.y)
+    browserCanvasContext.lineTo(pointA2.x, pointA2.y)
+    browserCanvasContext.closePath()
+
+    drawEdge('right')
+
+    browserCanvasContext.beginPath()
+    browserCanvasContext.moveTo(pointA3.x, pointA3.y)
+    browserCanvasContext.lineTo(pointA4.x, pointA4.y)
+    browserCanvasContext.lineTo(pointB4.x, pointB4.y)
+    browserCanvasContext.lineTo(pointB3.x, pointB3.y)
+    browserCanvasContext.lineTo(pointA3.x, pointA3.y)
+    browserCanvasContext.closePath()
+
+    drawEdge('bottom')
+
+    browserCanvasContext.beginPath()
+    browserCanvasContext.moveTo(pointA4.x, pointA4.y)
+    browserCanvasContext.lineTo(pointA1.x, pointA1.y)
+    browserCanvasContext.lineTo(pointB1.x, pointB1.y)
+    browserCanvasContext.lineTo(pointB4.x, pointB4.y)
+    browserCanvasContext.lineTo(pointA4.x, pointA4.y)
+    browserCanvasContext.closePath()
+
+    drawEdge('left')
+
+    function drawEdge (edgeType) {
+      if (whereIsMouseOver === edgeType && isMouseOver === true) {
+        browserCanvasContext.lineWidth = lineWidth
+        browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + OPACITY + ')'
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')'
+      } else {
+        browserCanvasContext.lineWidth = lineWidth
+        browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + OPACITY + ')'
+        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + OPACITY + ')'
+      }
+      browserCanvasContext.fill()
+      browserCanvasContext.stroke()
+    }
+  }
+}
diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js
index 87571461a..99e663d52 100644
--- a/ChartsSpace/TimeMachine.js
+++ b/ChartsSpace/TimeMachine.js
@@ -21,6 +21,7 @@ function newTimeMachine () {
     timeScale: undefined,
     rateScale: undefined,
     payload: undefined,
+    edgeEditor: undefined,
     timelineCharts: [],
     fitFunction: fitFunction,
     physics: physics,
@@ -101,6 +102,7 @@ function newTimeMachine () {
     thisObject.container.finalize()
     thisObject.container = undefined
     thisObject.payload = undefined
+    thisObject.edgeEditor = undefined
 
     mouse = undefined
     timelineChartsMap = undefined
@@ -149,6 +151,10 @@ function newTimeMachine () {
     onViewportPositionChangedEventSuscriptionId = canvas.chartSpace.viewport.eventHandler.listenToEvent('Position Changed', onViewportPositionChanged)
     onViewportZoomChangedEventSuscriptionId = canvas.chartSpace.viewport.eventHandler.listenToEvent('Zoom Changed', onViewportZoomChanged)
 
+    thisObject.edgeEditor = newEdgeEditor()
+    thisObject.edgeEditor.initialize()
+    thisObject.edgeEditor.container.connectToParent(thisObject.container, true, true, false, true)
+
     callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE)
   }
 
@@ -269,6 +275,13 @@ function newTimeMachine () {
   function getContainer (point, purpose) {
     let container
 
+    container = thisObject.edgeEditor.getContainer(point)
+    if (container !== undefined) {
+      if (container.isForThisPurpose(purpose)) {
+        return container
+      }
+    }
+
     if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) {
       container = thisObject.rateScale.getContainer(point)
       if (container !== undefined) {
@@ -571,14 +584,8 @@ function newTimeMachine () {
         if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) { thisObject.rateScale.drawForeground() }
       }
 
-      let style = {
-        color: UI_COLOR.BLACK,
-        opacity: 1,
-        lineWidth: 1,
-        lineDash: [1, 3]
-      }
-      thisObject.container.frame.draw(false, true, false, thisObject.fitFunction, style)
       drawLabel()
+      thisObject.edgeEditor.drawForeground()
     }
   }
 
diff --git a/Frame.js b/Frame.js
index ed8a0a25d..46fb4e32c 100644
--- a/Frame.js
+++ b/Frame.js
@@ -160,11 +160,13 @@ function newFrame () {
     return point
   }
 
-  function isThisPointHere (point, outsideViewPort, dontTransform) {
- // The second parameter is usefull when you want to check a point that you already know is outside the viewport.
+  function isThisPointHere (point, outsideViewPort, dontTransform, padding) {
+    // The second parameter is usefull when you want to check a point that you already know is outside the viewport.
+    // The padding is a distance to the borders of the container. Can be either negative (outside, to increase the cointainer size) or positive (inside to decrease the cointainer size)
+
+    if (padding === undefined) { padding = 0 }
 
        /* We need not to modify the point received, so me make a copy of it. */
-
     let checkPoint = {
       x: point.x,
       y: point.y
@@ -193,7 +195,7 @@ function newFrame () {
     }
 
     if (thisObject.type === 'Rectangle') {
-      if (checkPoint.x < 0 || checkPoint.y < 0 || checkPoint.x > thisObject.width || checkPoint.y > thisObject.height) {
+      if (checkPoint.x < 0 + padding || checkPoint.y < 0 + padding || checkPoint.x > thisObject.width + padding || checkPoint.y > thisObject.height + padding) {
         return false
       } else {
         return true
diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js
index 7e822a723..7078991d4 100644
--- a/Scales/TimeScale.js
+++ b/Scales/TimeScale.js
@@ -405,6 +405,8 @@ function newTimeScale () {
       browserCanvasContext.lineTo(point8.x, point8.y)
       browserCanvasContext.lineTo(point9.x, point9.y)
 
+      browserCanvasContext.closePath()
+
       browserCanvasContext.lineWidth = LINE_WIDTH
       browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')'
       browserCanvasContext.stroke()

From 10ec007ff2816014bba34195db226bcca6c2d9d7 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Mon, 10 Feb 2020 18:43:54 +0100
Subject: [PATCH 20/81] Bug Fixed

---
 Frame.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Frame.js b/Frame.js
index 46fb4e32c..fc38fea12 100644
--- a/Frame.js
+++ b/Frame.js
@@ -195,7 +195,7 @@ function newFrame () {
     }
 
     if (thisObject.type === 'Rectangle') {
-      if (checkPoint.x < 0 + padding || checkPoint.y < 0 + padding || checkPoint.x > thisObject.width + padding || checkPoint.y > thisObject.height + padding) {
+      if (checkPoint.x < 0 + padding || checkPoint.y < 0 + padding || checkPoint.x > thisObject.width - padding || checkPoint.y > thisObject.height - padding) {
         return false
       } else {
         return true

From 0936f6c388dbf9ea51af7b9c2d7b4d185b29b0b2 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Mon, 10 Feb 2020 18:52:34 +0100
Subject: [PATCH 21/81] Bug Fixed

---
 Spaces/ChartSpace.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js
index d5cc45486..c7480606e 100644
--- a/Spaces/ChartSpace.js
+++ b/Spaces/ChartSpace.js
@@ -123,23 +123,29 @@ function newChartSpace () {
       }
     }
 
-    /* Now we see which is the inner most container that has it */
+    /*
+    Now we see which is the inner most container that has it.
+    In this case we will ask all the time machines even if one of them already returned a matching container.
+    This will help the others know they are not on ofcus
+    */
+    let containerFound
     for (let i = 0; i < thisObject.timeMachines.length; i++) {
       container = thisObject.timeMachines[i].getContainer(point, purpose)
       if (container !== undefined) {
         if (purpose !== undefined) {
           if (container.isForThisPurpose(purpose)) {
             if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-              return container
+              containerFound = container
             }
           }
         } else {
           if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-            return container
+            containerFound = container
           }
         }
       }
     }
+    if (containerFound !== undefined) { return containerFound }
 
     if (thisObject.container.frame.isThisPointHere(point, true) === true) {
       return thisObject.container

From ac4e95d3fd8b76a469b06b5fb37ce1759ae51b5c Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Mon, 10 Feb 2020 19:32:51 +0100
Subject: [PATCH 22/81] All edges working

---
 ChartsSpace/EdgeEditor.js  | 43 +++++++++++++++++++++++++++++---------
 ChartsSpace/TimeMachine.js | 10 ++++-----
 2 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/ChartsSpace/EdgeEditor.js b/ChartsSpace/EdgeEditor.js
index 06e82d9cb..c94b495fd 100644
--- a/ChartsSpace/EdgeEditor.js
+++ b/ChartsSpace/EdgeEditor.js
@@ -28,13 +28,6 @@ function newEdgeEditor () {
   let onMouseOverEventSubscriptionId
   let onMouseNotOverEventSubscriptionId
 
-  let mouse = {
-    position: {
-      x: 0,
-      y: 0
-    }
-  }
-
   return thisObject
 
   function finalize () {
@@ -44,8 +37,6 @@ function newEdgeEditor () {
     thisObject.container.finalize()
     thisObject.container = undefined
     thisObject.fitFunction = undefined
-
-    mouse = undefined
   }
 
   function initialize () {
@@ -99,7 +90,39 @@ function newEdgeEditor () {
   }
 
   function physics () {
-
+    if (thisObject.container.frame.position.x === 0 && thisObject.container.frame.position.y === 0) { return }
+    switch (whereIsMouseOver) {
+      case 'top' : {
+        thisObject.container.parentContainer.frame.position.y = thisObject.container.parentContainer.frame.position.y + thisObject.container.frame.position.y
+        thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height - thisObject.container.frame.position.y
+        thisObject.container.frame.position.x = 0
+        thisObject.container.frame.position.y = 0
+        thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
+        break
+      }
+      case 'bottom' : {
+        thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height + thisObject.container.frame.position.y
+        thisObject.container.frame.position.x = 0
+        thisObject.container.frame.position.y = 0
+        thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
+        break
+      }
+      case 'left' : {
+        thisObject.container.parentContainer.frame.position.x = thisObject.container.parentContainer.frame.position.x + thisObject.container.frame.position.x
+        thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width - thisObject.container.frame.position.x
+        thisObject.container.frame.position.x = 0
+        thisObject.container.frame.position.y = 0
+        thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
+        break
+      }
+      case 'right' : {
+        thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width + thisObject.container.frame.position.x
+        thisObject.container.frame.position.x = 0
+        thisObject.container.frame.position.y = 0
+        thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
+        break
+      }
+    }
   }
 
   function drawForeground () {
diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js
index 99e663d52..dda14a48a 100644
--- a/ChartsSpace/TimeMachine.js
+++ b/ChartsSpace/TimeMachine.js
@@ -202,11 +202,11 @@ function newTimeMachine () {
       if (event.isUserAction === true) {
         let currentDate = getDateFromPoint(event.mousePosition, thisObject.container, timeMachineCoordinateSystem)
         let currentRate = getRateFromPoint(event.mousePosition, thisObject.container, timeMachineCoordinateSystem)
-        thisObject.container.frame.width = TIME_MACHINE_WIDTH + TIME_MACHINE_WIDTH * event.scale
+        // thisObject.container.frame.width = TIME_MACHINE_WIDTH + TIME_MACHINE_WIDTH * event.scale
         recalculateCoordinateSystem()
         moveToUserPosition(thisObject.container, currentDate, currentRate, timeMachineCoordinateSystem, false, true, event.mousePosition)
       } else {
-        thisObject.container.frame.width = TIME_MACHINE_WIDTH + TIME_MACHINE_WIDTH * event.scale
+        // thisObject.container.frame.width = TIME_MACHINE_WIDTH + TIME_MACHINE_WIDTH * event.scale
         recalculateCoordinateSystem()
       }
       thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
@@ -277,9 +277,7 @@ function newTimeMachine () {
 
     container = thisObject.edgeEditor.getContainer(point)
     if (container !== undefined) {
-      if (container.isForThisPurpose(purpose)) {
-        return container
-      }
+      return container
     }
 
     if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) {
@@ -395,6 +393,8 @@ function newTimeMachine () {
   }
 
   function physics () {
+    thisObject.edgeEditor.physics()
+
     saveFrame(thisObject.payload, thisObject.container.frame)
     if (thisObject.container.frame.isInViewPort()) {
       childrenPhysics()

From edefade22a04c5416389ed424a308c459492f699 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Mon, 10 Feb 2020 19:52:05 +0100
Subject: [PATCH 23/81] Borders with limits

---
 ChartsSpace/EdgeEditor.js | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/ChartsSpace/EdgeEditor.js b/ChartsSpace/EdgeEditor.js
index c94b495fd..5ddad9ca7 100644
--- a/ChartsSpace/EdgeEditor.js
+++ b/ChartsSpace/EdgeEditor.js
@@ -91,8 +91,17 @@ function newEdgeEditor () {
 
   function physics () {
     if (thisObject.container.frame.position.x === 0 && thisObject.container.frame.position.y === 0) { return }
+
+    const MIN_WIDTH = 100
+    const MIN_HEIGHT = 50
+
     switch (whereIsMouseOver) {
       case 'top' : {
+        if (thisObject.container.parentContainer.frame.height - thisObject.container.frame.position.y < MIN_HEIGHT) {
+          thisObject.container.frame.position.x = 0
+          thisObject.container.frame.position.y = 0
+          return
+        }
         thisObject.container.parentContainer.frame.position.y = thisObject.container.parentContainer.frame.position.y + thisObject.container.frame.position.y
         thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height - thisObject.container.frame.position.y
         thisObject.container.frame.position.x = 0
@@ -101,6 +110,11 @@ function newEdgeEditor () {
         break
       }
       case 'bottom' : {
+        if (thisObject.container.parentContainer.frame.height + thisObject.container.frame.position.y < MIN_HEIGHT) {
+          thisObject.container.frame.position.x = 0
+          thisObject.container.frame.position.y = 0
+          return
+        }
         thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height + thisObject.container.frame.position.y
         thisObject.container.frame.position.x = 0
         thisObject.container.frame.position.y = 0
@@ -108,6 +122,11 @@ function newEdgeEditor () {
         break
       }
       case 'left' : {
+        if (thisObject.container.parentContainer.frame.width - thisObject.container.frame.position.x < MIN_WIDTH) {
+          thisObject.container.frame.position.x = 0
+          thisObject.container.frame.position.y = 0
+          return
+        }
         thisObject.container.parentContainer.frame.position.x = thisObject.container.parentContainer.frame.position.x + thisObject.container.frame.position.x
         thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width - thisObject.container.frame.position.x
         thisObject.container.frame.position.x = 0
@@ -116,6 +135,11 @@ function newEdgeEditor () {
         break
       }
       case 'right' : {
+        if (thisObject.container.parentContainer.frame.width + thisObject.container.frame.position.x < MIN_WIDTH) {
+          thisObject.container.frame.position.x = 0
+          thisObject.container.frame.position.y = 0
+          return
+        }
         thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width + thisObject.container.frame.position.x
         thisObject.container.frame.position.x = 0
         thisObject.container.frame.position.y = 0

From d383bb09c3465f92b02e2528f96de0b88e979f0b Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Mon, 10 Feb 2020 20:00:55 +0100
Subject: [PATCH 24/81] Bug Fixes

---
 ChartsSpace/TimeMachine.js | 4 ++--
 Scales/TimeFrameScale.js   | 3 ++-
 Scales/TimeScale.js        | 3 ++-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js
index dda14a48a..9a044f572 100644
--- a/ChartsSpace/TimeMachine.js
+++ b/ChartsSpace/TimeMachine.js
@@ -230,11 +230,11 @@ function newTimeMachine () {
         let currentDate = getDateFromPoint(event.mousePosition, thisObject.container, timeMachineCoordinateSystem)
         let currentRate = getRateFromPoint(event.mousePosition, thisObject.container, timeMachineCoordinateSystem)
 
-        thisObject.container.frame.height = TIME_MACHINE_HEIGHT + TIME_MACHINE_HEIGHT * event.scale
+        // thisObject.container.frame.height = TIME_MACHINE_HEIGHT + TIME_MACHINE_HEIGHT * event.scale
         recalculateCoordinateSystem()
         moveToUserPosition(thisObject.container, currentDate, currentRate, timeMachineCoordinateSystem, true, false, event.mousePosition)
       } else {
-        thisObject.container.frame.height = TIME_MACHINE_HEIGHT + TIME_MACHINE_HEIGHT * event.scale
+        // thisObject.container.frame.height = TIME_MACHINE_HEIGHT + TIME_MACHINE_HEIGHT * event.scale
         recalculateCoordinateSystem()
       }
       thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
diff --git a/Scales/TimeFrameScale.js b/Scales/TimeFrameScale.js
index 3a2b3fd97..d75038abd 100644
--- a/Scales/TimeFrameScale.js
+++ b/Scales/TimeFrameScale.js
@@ -203,7 +203,8 @@ function newTimeFrameScale () {
     thisObject.isVisible = true
     thisObject.payload.isVisible = true
     if (thisObject.container.frame.position.y + thisObject.container.frame.height > bottonCorner.y ||
-        thisObject.container.frame.position.y - thisObject.container.frame.height * 3 < upCorner.y) {
+        thisObject.container.frame.position.y - thisObject.container.frame.height * 3 < upCorner.y ||
+      thisObject.container.frame.position.x < upCorner.x) {
       thisObject.isVisible = false
       thisObject.payload.isVisible = false
     }
diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js
index 7078991d4..881061cca 100644
--- a/Scales/TimeScale.js
+++ b/Scales/TimeScale.js
@@ -269,7 +269,8 @@ function newTimeScale () {
 
     thisObject.isVisible = true
     if (thisObject.container.frame.position.y + thisObject.container.frame.height * 4 > bottonCorner.y ||
-        thisObject.container.frame.position.y < upCorner.y) {
+        thisObject.container.frame.position.y < upCorner.y ||
+      thisObject.container.frame.position.x < upCorner.x) {
       thisObject.isVisible = false
     }
   }

From 01190c3d165a1c191fe856bdece7cbfeca2aac30 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Tue, 11 Feb 2020 12:52:58 +0100
Subject: [PATCH 25/81] canvas corrected

---
 Canvas.js                  | 41 +++++++++----------
 ChartsSpace/EdgeEditor.js  | 82 ++++++++++++++++++++++++--------------
 ChartsSpace/TimeMachine.js | 10 ++---
 3 files changed, 73 insertions(+), 60 deletions(-)

diff --git a/Canvas.js b/Canvas.js
index f0920a50f..a9e8bd1f8 100644
--- a/Canvas.js
+++ b/Canvas.js
@@ -452,11 +452,10 @@ function newCanvas () {
 
   function onMouseDown (event) {
     try {
-      let point = {
-        x: event.pageX,
-        y: event.pageY - CURRENT_TOP_MARGIN,
-        button: event.button
-      }
+      let point = event
+      point.x = event.pageX
+      point.y = event.pageY - CURRENT_TOP_MARGIN
+      point.button = event.button
 
       dragVector.downX = point.x
       dragVector.downY = point.y
@@ -509,7 +508,7 @@ function newCanvas () {
 
       container = thisObject.panelsSpace.getContainer(point)
 
-      if (container !== undefined && container.isDraggeable === true && event.button === 2) {
+      if (container !== undefined && container.isDraggeable === true && event.shiftKey === false) {
         containerBeingDragged = container
         containerDragStarted = true
         containerBeingDragged.eventHandler.raiseEvent('onDragStarted', point)
@@ -526,7 +525,7 @@ function newCanvas () {
       container = thisObject.chartSpace.getContainer(point)
 
       if (container !== undefined) {
-        if (container.isDraggeable === true && event.button === 2) {
+        if (container.isDraggeable === true) {
           containerBeingDragged = container
           containerDragStarted = true
           containerBeingDragged.eventHandler.raiseEvent('onDragStarted', point)
@@ -562,10 +561,10 @@ function newCanvas () {
         ignoreNextClick = false
         return
       }
-      let point = {
-        x: event.pageX,
-        y: event.pageY - CURRENT_TOP_MARGIN
-      }
+      let point = event
+      point.x = event.pageX
+      point.y = event.pageY - CURRENT_TOP_MARGIN
+      point.button = event.button
 
       let container
 
@@ -644,10 +643,10 @@ function newCanvas () {
   function onMouseMove (event) {
     try {
       /* Processing the event */
-      let point = {
-        x: event.pageX,
-        y: event.pageY - CURRENT_TOP_MARGIN
-      }
+      let point = event
+      point.x = event.pageX
+      point.y = event.pageY - CURRENT_TOP_MARGIN
+      point.button = event.button
 
       if (canvas.chartSpace.viewport !== undefined) {
         canvas.chartSpace.viewport.mousePosition.x = point.x
@@ -691,20 +690,16 @@ function newCanvas () {
 
   function onMouseOver (event) {
     try {
+      let point = event
+      point.x = event.pageX
+      point.y = event.pageY - CURRENT_TOP_MARGIN
+      point.button = event.button
       if (containerDragStarted === true) {
-        let point = {
-          x: event.pageX,
-          y: event.pageY - CURRENT_TOP_MARGIN
-        }
         containerBeingDragged.eventHandler.raiseEvent('onMouseOver', point)
         return
       }
 
        /* Then we check who is the current object underneeth the mounse. */
-      let point = {
-        x: event.pageX,
-        y: event.pageY - CURRENT_TOP_MARGIN
-      }
 
       let container
 
diff --git a/ChartsSpace/EdgeEditor.js b/ChartsSpace/EdgeEditor.js
index 5ddad9ca7..7fc921ccd 100644
--- a/ChartsSpace/EdgeEditor.js
+++ b/ChartsSpace/EdgeEditor.js
@@ -22,17 +22,20 @@ function newEdgeEditor () {
   thisObject.container.isWheelable = false
   thisObject.container.detectMouseOver = true
 
+  let buttonUsedForDragging
   let isMouseOver
   let whereIsMouseOver = 'outside'
 
   let onMouseOverEventSubscriptionId
   let onMouseNotOverEventSubscriptionId
+  let onDragStartedEventSubscriptionId
 
   return thisObject
 
   function finalize () {
     thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
     thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
+    thisObject.container.eventHandler.stopListening(onDragStartedEventSubscriptionId)
 
     thisObject.container.finalize()
     thisObject.container = undefined
@@ -42,6 +45,7 @@ function newEdgeEditor () {
   function initialize () {
     onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
     onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
+    onDragStartedEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onDragStarted', onDragStarted)
   }
 
   function onMouseOver (event) {
@@ -52,13 +56,26 @@ function newEdgeEditor () {
     isMouseOver = false
   }
 
-  function getContainer (mousePoint) {
-    if (thisObject.container.frame.isThisPointHere(mousePoint, undefined, undefined, -EDGE_SIZE) === true) {
+  function onDragStarted (event) {
+    switch (event.button) {
+      case 1: {
+        buttonUsedForDragging = 'left'
+        break
+      }
+      case 2: {
+        buttonUsedForDragging = 'right'
+        break
+      }
+    }
+  }
+
+  function getContainer (event) {
+    if (thisObject.container.frame.isThisPointHere(event, undefined, undefined, -EDGE_SIZE) === true && event.shiftKey !== true) {
       console.log('isThisPointHere ', true)
 
       let point = {
-        x: mousePoint.x,
-        y: mousePoint.y
+        x: event.x,
+        y: event.y
       }
       point = unTransformThisPoint(point, thisObject.container)
 
@@ -83,6 +100,7 @@ function newEdgeEditor () {
       }
 
       whereIsMouseOver = 'center'
+      return thisObject.container
     } else {
       isMouseOver = false
       whereIsMouseOver = 'outside'
@@ -92,57 +110,61 @@ function newEdgeEditor () {
   function physics () {
     if (thisObject.container.frame.position.x === 0 && thisObject.container.frame.position.y === 0) { return }
 
+    let newPosition = {
+      x: thisObject.container.frame.position.x,
+      y: thisObject.container.frame.position.y
+    }
+
+    thisObject.container.frame.position.x = 0
+    thisObject.container.frame.position.y = 0
+
+    // newPosition = transformThisPoint(newPosition, thisObject.container)
+
     const MIN_WIDTH = 100
     const MIN_HEIGHT = 50
 
     switch (whereIsMouseOver) {
+      case 'center': {
+        /* 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 + newPosition.x
+        thisObject.container.parentContainer.frame.position.y = thisObject.container.parentContainer.frame.position.y + newPosition.y
+        break
+      }
       case 'top' : {
-        if (thisObject.container.parentContainer.frame.height - thisObject.container.frame.position.y < MIN_HEIGHT) {
-          thisObject.container.frame.position.x = 0
-          thisObject.container.frame.position.y = 0
+        if (thisObject.container.parentContainer.frame.height - newPosition.y < MIN_HEIGHT) {
           return
         }
-        thisObject.container.parentContainer.frame.position.y = thisObject.container.parentContainer.frame.position.y + thisObject.container.frame.position.y
-        thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height - thisObject.container.frame.position.y
-        thisObject.container.frame.position.x = 0
-        thisObject.container.frame.position.y = 0
+        thisObject.container.parentContainer.frame.position.y = thisObject.container.parentContainer.frame.position.y + newPosition.y
+        thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height - newPosition.y
+
         thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
         break
       }
       case 'bottom' : {
-        if (thisObject.container.parentContainer.frame.height + thisObject.container.frame.position.y < MIN_HEIGHT) {
-          thisObject.container.frame.position.x = 0
-          thisObject.container.frame.position.y = 0
+        if (thisObject.container.parentContainer.frame.height + newPosition.y < MIN_HEIGHT) {
           return
         }
-        thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height + thisObject.container.frame.position.y
-        thisObject.container.frame.position.x = 0
-        thisObject.container.frame.position.y = 0
+        thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height + newPosition.y
+
         thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
         break
       }
       case 'left' : {
-        if (thisObject.container.parentContainer.frame.width - thisObject.container.frame.position.x < MIN_WIDTH) {
-          thisObject.container.frame.position.x = 0
-          thisObject.container.frame.position.y = 0
+        if (thisObject.container.parentContainer.frame.width - newPosition.x < MIN_WIDTH) {
           return
         }
-        thisObject.container.parentContainer.frame.position.x = thisObject.container.parentContainer.frame.position.x + thisObject.container.frame.position.x
-        thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width - thisObject.container.frame.position.x
-        thisObject.container.frame.position.x = 0
-        thisObject.container.frame.position.y = 0
+        thisObject.container.parentContainer.frame.position.x = thisObject.container.parentContainer.frame.position.x + newPosition.x
+        thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width - newPosition.x
+
         thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
         break
       }
       case 'right' : {
-        if (thisObject.container.parentContainer.frame.width + thisObject.container.frame.position.x < MIN_WIDTH) {
-          thisObject.container.frame.position.x = 0
-          thisObject.container.frame.position.y = 0
+        if (thisObject.container.parentContainer.frame.width + newPosition.x < MIN_WIDTH) {
           return
         }
-        thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width + thisObject.container.frame.position.x
-        thisObject.container.frame.position.x = 0
-        thisObject.container.frame.position.y = 0
+        thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width + newPosition.x
+
         thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
         break
       }
diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js
index 9a044f572..287c4e7fa 100644
--- a/ChartsSpace/TimeMachine.js
+++ b/ChartsSpace/TimeMachine.js
@@ -275,11 +275,6 @@ function newTimeMachine () {
   function getContainer (point, purpose) {
     let container
 
-    container = thisObject.edgeEditor.getContainer(point)
-    if (container !== undefined) {
-      return container
-    }
-
     if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) {
       container = thisObject.rateScale.getContainer(point)
       if (container !== undefined) {
@@ -318,8 +313,9 @@ function newTimeMachine () {
       }
     }
 
-    if (thisObject.container.frame.isThisPointHere(point) === true) {
-      return thisObject.container
+    container = thisObject.edgeEditor.getContainer(point)
+    if (container !== undefined) {
+      return container
     }
   }
 

From 606e578b51b06aa54798c933c79583bc27af459f Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Tue, 11 Feb 2020 13:22:24 +0100
Subject: [PATCH 26/81] Canvas BUG in dragging fixed

---
 Canvas.js                 | 18 ++++++++----------
 ChartsSpace/EdgeEditor.js |  2 +-
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/Canvas.js b/Canvas.js
index a9e8bd1f8..49b3c3ab8 100644
--- a/Canvas.js
+++ b/Canvas.js
@@ -872,13 +872,18 @@ function newCanvas () {
         browserCanvas.style.cursor = 'grabbing'
         thisObject.eventHandler.raiseEvent('Dragging', undefined)
 
-        if (containerDragStarted || viewPortBeingDragged) {
+        if (viewPortBeingDragged) {
           let displaceVector = {
             x: dragVector.upX - dragVector.downX,
             y: dragVector.upY - dragVector.downY
           }
 
-          if (containerBeingDragged !== undefined && containerBeingDragged.insideViewport === true) {
+          if (viewPortBeingDragged) {
+            canvas.chartSpace.viewport.displace(displaceVector)
+          }
+        }
+        if (containerDragStarted) {
+          if (containerBeingDragged !== undefined) {
             let downCopy = {
               x: dragVector.downX,
               y: dragVector.downY
@@ -899,13 +904,7 @@ function newCanvas () {
               x: upNoZoom.x - downNoZoom.x,
               y: upNoZoom.y - downNoZoom.y
             }
-          }
 
-          if (viewPortBeingDragged) {
-            canvas.chartSpace.viewport.displace(displaceVector)
-          }
-
-          if (containerBeingDragged !== undefined) {
             let moveSucceed = containerBeingDragged.displace(displaceVector)
             if (moveSucceed === false) {
               deactivateDragging(event)
@@ -913,8 +912,7 @@ function newCanvas () {
           }
         }
 
-               /* Finally we set the starting point of the new dragVector at this current point. */
-
+        /* Finally we set the starting point of the new dragVector at this current point. */
         dragVector.downX = dragVector.upX
         dragVector.downY = dragVector.upY
       }
diff --git a/ChartsSpace/EdgeEditor.js b/ChartsSpace/EdgeEditor.js
index 7fc921ccd..df2b922ca 100644
--- a/ChartsSpace/EdgeEditor.js
+++ b/ChartsSpace/EdgeEditor.js
@@ -118,7 +118,7 @@ function newEdgeEditor () {
     thisObject.container.frame.position.x = 0
     thisObject.container.frame.position.y = 0
 
-    // newPosition = transformThisPoint(newPosition, thisObject.container)
+    // newPosition = thisObject.container.frame.frameThisPoint(newPosition)
 
     const MIN_WIDTH = 100
     const MIN_HEIGHT = 50

From 41685949d7727814a1a94ae18dafb46a00d37dda Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Tue, 11 Feb 2020 13:53:55 +0100
Subject: [PATCH 27/81] Scale boxes working again

---
 ChartsSpace/EdgeEditor.js  | 13 +++++++------
 ChartsSpace/TimeMachine.js | 10 ++++++++--
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/ChartsSpace/EdgeEditor.js b/ChartsSpace/EdgeEditor.js
index df2b922ca..ad013ce5a 100644
--- a/ChartsSpace/EdgeEditor.js
+++ b/ChartsSpace/EdgeEditor.js
@@ -20,7 +20,7 @@ function newEdgeEditor () {
   thisObject.container.isDraggeable = true
   thisObject.container.isClickeable = false
   thisObject.container.isWheelable = false
-  thisObject.container.detectMouseOver = true
+  thisObject.container.detectMouseOver = false // The mouse over event will be detected by the Time Machine, and this container will get it because is connected to its parent.
 
   let buttonUsedForDragging
   let isMouseOver
@@ -69,7 +69,7 @@ function newEdgeEditor () {
     }
   }
 
-  function getContainer (event) {
+  function getContainer (event, purpose) {
     if (thisObject.container.frame.isThisPointHere(event, undefined, undefined, -EDGE_SIZE) === true && event.shiftKey !== true) {
       console.log('isThisPointHere ', true)
 
@@ -100,11 +100,12 @@ function newEdgeEditor () {
       }
 
       whereIsMouseOver = 'center'
-      return thisObject.container
-    } else {
-      isMouseOver = false
-      whereIsMouseOver = 'outside'
+      if (thisObject.container.isForThisPurpose(purpose) === true) {
+        return thisObject.container
+      }
     }
+    isMouseOver = false
+    whereIsMouseOver = 'outside'
   }
 
   function physics () {
diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js
index 287c4e7fa..4a58fb4a2 100644
--- a/ChartsSpace/TimeMachine.js
+++ b/ChartsSpace/TimeMachine.js
@@ -153,7 +153,7 @@ function newTimeMachine () {
 
     thisObject.edgeEditor = newEdgeEditor()
     thisObject.edgeEditor.initialize()
-    thisObject.edgeEditor.container.connectToParent(thisObject.container, true, true, false, true)
+    thisObject.edgeEditor.container.connectToParent(thisObject.container, true, true, false, true, true, true)
 
     callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE)
   }
@@ -313,9 +313,15 @@ function newTimeMachine () {
       }
     }
 
-    container = thisObject.edgeEditor.getContainer(point)
+    container = thisObject.edgeEditor.getContainer(point, purpose)
     if (container !== undefined) {
       return container
+    } else {
+      if (thisObject.container.isForThisPurpose(purpose) === true) {
+        if (thisObject.container.frame.isThisPointHere(point) === true) {
+          return thisObject.container
+        }
+      }
     }
   }
 

From 03c8db171c73a8c8148cc2b922234c2b49877eb9 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Tue, 11 Feb 2020 14:32:17 +0100
Subject: [PATCH 28/81] All ready to next phase

---
 Canvas.js                  |  2 +-
 ChartsSpace/EdgeEditor.js  | 15 +++++++++------
 ChartsSpace/TimeMachine.js |  4 ++--
 Spaces/ChartSpace.js       |  6 +-----
 4 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/Canvas.js b/Canvas.js
index 49b3c3ab8..b365ca00b 100644
--- a/Canvas.js
+++ b/Canvas.js
@@ -522,7 +522,7 @@ function newCanvas () {
 
            /*  we check if it is over any of the existing containers at the Chart Space. */
 
-      container = thisObject.chartSpace.getContainer(point)
+      container = thisObject.chartSpace.getContainer(point, GET_CONTAINER_PURPOSE.DRAGGING)
 
       if (container !== undefined) {
         if (container.isDraggeable === true) {
diff --git a/ChartsSpace/EdgeEditor.js b/ChartsSpace/EdgeEditor.js
index ad013ce5a..53bd96910 100644
--- a/ChartsSpace/EdgeEditor.js
+++ b/ChartsSpace/EdgeEditor.js
@@ -20,7 +20,7 @@ function newEdgeEditor () {
   thisObject.container.isDraggeable = true
   thisObject.container.isClickeable = false
   thisObject.container.isWheelable = false
-  thisObject.container.detectMouseOver = false // The mouse over event will be detected by the Time Machine, and this container will get it because is connected to its parent.
+  thisObject.container.detectMouseOver = true
 
   let buttonUsedForDragging
   let isMouseOver
@@ -100,12 +100,15 @@ function newEdgeEditor () {
       }
 
       whereIsMouseOver = 'center'
-      if (thisObject.container.isForThisPurpose(purpose) === true) {
-        return thisObject.container
+      switch (purpose) {
+        case GET_CONTAINER_PURPOSE.MOUSE_OVER:
+          return // We will let the Time Machine to handle this situation.
+          break
+        case GET_CONTAINER_PURPOSE.DRAGGING:
+          return thisObject.container
+          break
       }
     }
-    isMouseOver = false
-    whereIsMouseOver = 'outside'
   }
 
   function physics () {
@@ -176,7 +179,7 @@ function newEdgeEditor () {
     let edgeSize
     let lineWidth
 
-    if (whereIsMouseOver === 'outside') {
+    if (whereIsMouseOver === 'outside' || isMouseOver === false) {
       edgeSize = EDGE_SIZE / 2
       lineWidth = 0.1
     } else {
diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js
index 4a58fb4a2..0f8a215dd 100644
--- a/ChartsSpace/TimeMachine.js
+++ b/ChartsSpace/TimeMachine.js
@@ -64,7 +64,7 @@ function newTimeMachine () {
     thisObject.container = newContainer()
     thisObject.container.initialize(MODULE_NAME)
     thisObject.container.fitFunction = thisObject.fitFunction
-    thisObject.container.isDraggeable = true
+    thisObject.container.isDraggeable = false
     thisObject.container.insideViewport = true
     thisObject.container.detectMouseOver = true
 
@@ -317,7 +317,7 @@ function newTimeMachine () {
     if (container !== undefined) {
       return container
     } else {
-      if (thisObject.container.isForThisPurpose(purpose) === true) {
+      if (thisObject.container.isForThisPurpose(purpose)) {
         if (thisObject.container.frame.isThisPointHere(point) === true) {
           return thisObject.container
         }
diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js
index c7480606e..333b98fc5 100644
--- a/Spaces/ChartSpace.js
+++ b/Spaces/ChartSpace.js
@@ -133,11 +133,7 @@ function newChartSpace () {
       container = thisObject.timeMachines[i].getContainer(point, purpose)
       if (container !== undefined) {
         if (purpose !== undefined) {
-          if (container.isForThisPurpose(purpose)) {
-            if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-              containerFound = container
-            }
-          }
+          containerFound = container
         } else {
           if (thisObject.container.frame.isThisPointHere(point, true) === true) {
             containerFound = container

From 3bcb7f6cfb9c023311288a20a1d053d163a0b9a0 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Tue, 11 Feb 2020 16:38:10 +0100
Subject: [PATCH 29/81] Dragging the center finished

---
 Canvas.js                  |  5 +--
 ChartsSpace/EdgeEditor.js  | 79 ++++++++++++++++++++++++++++----------
 ChartsSpace/TimeMachine.js |  2 +-
 3 files changed, 60 insertions(+), 26 deletions(-)

diff --git a/Canvas.js b/Canvas.js
index b365ca00b..d3e67e5d1 100644
--- a/Canvas.js
+++ b/Canvas.js
@@ -455,7 +455,6 @@ function newCanvas () {
       let point = event
       point.x = event.pageX
       point.y = event.pageY - CURRENT_TOP_MARGIN
-      point.button = event.button
 
       dragVector.downX = point.x
       dragVector.downY = point.y
@@ -564,7 +563,6 @@ function newCanvas () {
       let point = event
       point.x = event.pageX
       point.y = event.pageY - CURRENT_TOP_MARGIN
-      point.button = event.button
 
       let container
 
@@ -646,7 +644,6 @@ function newCanvas () {
       let point = event
       point.x = event.pageX
       point.y = event.pageY - CURRENT_TOP_MARGIN
-      point.button = event.button
 
       if (canvas.chartSpace.viewport !== undefined) {
         canvas.chartSpace.viewport.mousePosition.x = point.x
@@ -693,7 +690,7 @@ function newCanvas () {
       let point = event
       point.x = event.pageX
       point.y = event.pageY - CURRENT_TOP_MARGIN
-      point.button = event.button
+
       if (containerDragStarted === true) {
         containerBeingDragged.eventHandler.raiseEvent('onMouseOver', point)
         return
diff --git a/ChartsSpace/EdgeEditor.js b/ChartsSpace/EdgeEditor.js
index 53bd96910..f26b7775e 100644
--- a/ChartsSpace/EdgeEditor.js
+++ b/ChartsSpace/EdgeEditor.js
@@ -26,10 +26,18 @@ function newEdgeEditor () {
   let isMouseOver
   let whereIsMouseOver = 'outside'
 
+  let coordinateSystem
+
   let onMouseOverEventSubscriptionId
   let onMouseNotOverEventSubscriptionId
   let onDragStartedEventSubscriptionId
 
+  let mouse = {
+    position: {
+      x: 0,
+      y: 0
+    }
+  }
   return thisObject
 
   function finalize () {
@@ -40,9 +48,12 @@ function newEdgeEditor () {
     thisObject.container.finalize()
     thisObject.container = undefined
     thisObject.fitFunction = undefined
+    mouse = undefined
   }
 
-  function initialize () {
+  function initialize (pCoordinateSystem) {
+    coordinateSystem = pCoordinateSystem
+
     onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
     onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
     onDragStartedEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onDragStarted', onDragStarted)
@@ -50,6 +61,12 @@ function newEdgeEditor () {
 
   function onMouseOver (event) {
     isMouseOver = true
+    mouse = {
+      position: {
+        x: event.x,
+        y: event.y
+      }
+    }
   }
 
   function onMouseNotOver () {
@@ -57,7 +74,7 @@ function newEdgeEditor () {
   }
 
   function onDragStarted (event) {
-    switch (event.button) {
+    switch (event.buttons) {
       case 1: {
         buttonUsedForDragging = 'left'
         break
@@ -71,8 +88,6 @@ function newEdgeEditor () {
 
   function getContainer (event, purpose) {
     if (thisObject.container.frame.isThisPointHere(event, undefined, undefined, -EDGE_SIZE) === true && event.shiftKey !== true) {
-      console.log('isThisPointHere ', true)
-
       let point = {
         x: event.x,
         y: event.y
@@ -114,60 +129,84 @@ function newEdgeEditor () {
   function physics () {
     if (thisObject.container.frame.position.x === 0 && thisObject.container.frame.position.y === 0) { return }
 
+    let dragVector = {
+      x: thisObject.container.frame.position.x,
+      y: thisObject.container.frame.position.y
+    }
+
+    thisObject.container.frame.position.x = 0 - dragVector.x / 2
+    thisObject.container.frame.position.y = 0 - dragVector.y / 2
+
     let newPosition = {
       x: thisObject.container.frame.position.x,
       y: thisObject.container.frame.position.y
     }
 
+    newPosition = transformThisPoint(newPosition, thisObject.container)
+
     thisObject.container.frame.position.x = 0
     thisObject.container.frame.position.y = 0
 
-    // newPosition = thisObject.container.frame.frameThisPoint(newPosition)
-
     const MIN_WIDTH = 100
     const MIN_HEIGHT = 50
 
     switch (whereIsMouseOver) {
       case 'center': {
-        /* 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 + newPosition.x
-        thisObject.container.parentContainer.frame.position.y = thisObject.container.parentContainer.frame.position.y + newPosition.y
+        switch (buttonUsedForDragging) {
+          case 'left': {
+            /* 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
+            break
+          }
+          case 'right': {
+            let newMinDate = getDateFromPoint(newPosition, thisObject.container.parentContainer, coordinateSystem)
+            let newMaxRate = getRateFromPoint(newPosition, thisObject.container.parentContainer, coordinateSystem)
+            let xDifferenceMaxMin = coordinateSystem.max.x - coordinateSystem.min.x
+            let yDifferenceMaxMin = coordinateSystem.max.y - coordinateSystem.min.y
+            coordinateSystem.min.x = newMinDate.valueOf()
+            coordinateSystem.max.x = newMinDate.valueOf() + xDifferenceMaxMin
+            coordinateSystem.min.y = newMaxRate - yDifferenceMaxMin
+            coordinateSystem.max.y = newMaxRate
+            coordinateSystem.recalculateScale()
+          }
+        }
         break
       }
       case 'top' : {
-        if (thisObject.container.parentContainer.frame.height - newPosition.y < MIN_HEIGHT) {
+        if (thisObject.container.parentContainer.frame.height - dragVector.y < MIN_HEIGHT) {
           return
         }
-        thisObject.container.parentContainer.frame.position.y = thisObject.container.parentContainer.frame.position.y + newPosition.y
-        thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height - newPosition.y
+        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
 
         thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
         break
       }
       case 'bottom' : {
-        if (thisObject.container.parentContainer.frame.height + newPosition.y < MIN_HEIGHT) {
+        if (thisObject.container.parentContainer.frame.height + dragVector.y < MIN_HEIGHT) {
           return
         }
-        thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height + newPosition.y
+        thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height + dragVector.y
 
         thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
         break
       }
       case 'left' : {
-        if (thisObject.container.parentContainer.frame.width - newPosition.x < MIN_WIDTH) {
+        if (thisObject.container.parentContainer.frame.width - dragVector.x < MIN_WIDTH) {
           return
         }
-        thisObject.container.parentContainer.frame.position.x = thisObject.container.parentContainer.frame.position.x + newPosition.x
-        thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width - newPosition.x
+        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
 
         thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
         break
       }
       case 'right' : {
-        if (thisObject.container.parentContainer.frame.width + newPosition.x < MIN_WIDTH) {
+        if (thisObject.container.parentContainer.frame.width + dragVector.x < MIN_WIDTH) {
           return
         }
-        thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width + newPosition.x
+        thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width + dragVector.x
 
         thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
         break
@@ -189,8 +228,6 @@ function newEdgeEditor () {
 
     const OPACITY = 1
 
-    console.log('whereIsMouseOver ', whereIsMouseOver, 'isMouseOver ' + isMouseOver)
-
     pointA1 = {
       x: 0,
       y: 0
diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js
index 0f8a215dd..1c7767c10 100644
--- a/ChartsSpace/TimeMachine.js
+++ b/ChartsSpace/TimeMachine.js
@@ -152,7 +152,7 @@ function newTimeMachine () {
     onViewportZoomChangedEventSuscriptionId = canvas.chartSpace.viewport.eventHandler.listenToEvent('Zoom Changed', onViewportZoomChanged)
 
     thisObject.edgeEditor = newEdgeEditor()
-    thisObject.edgeEditor.initialize()
+    thisObject.edgeEditor.initialize(timeMachineCoordinateSystem)
     thisObject.edgeEditor.container.connectToParent(thisObject.container, true, true, false, true, true, true)
 
     callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE)

From 6db2394051c1c81cce9c14e2b25ae7212889308d Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Tue, 11 Feb 2020 16:52:28 +0100
Subject: [PATCH 30/81] Bug fixed

---
 ChartsSpace/EdgeEditor.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ChartsSpace/EdgeEditor.js b/ChartsSpace/EdgeEditor.js
index f26b7775e..5ed2e5968 100644
--- a/ChartsSpace/EdgeEditor.js
+++ b/ChartsSpace/EdgeEditor.js
@@ -171,6 +171,7 @@ function newEdgeEditor () {
             coordinateSystem.recalculateScale()
           }
         }
+        thisObject.container.parentContainer.eventHandler.raiseEvent('onMouseOver', mouse.position)
         break
       }
       case 'top' : {

From 2a9c9c108f30b5c3b9e364696d603f64cfb8202a Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Tue, 11 Feb 2020 20:06:09 +0100
Subject: [PATCH 31/81] Manipulation by teh sides implemented.

---
 ChartsSpace/EdgeEditor.js | 120 +++++++++++++++++++++++++++++++++-----
 1 file changed, 107 insertions(+), 13 deletions(-)

diff --git a/ChartsSpace/EdgeEditor.js b/ChartsSpace/EdgeEditor.js
index 5ed2e5968..ac8e7943e 100644
--- a/ChartsSpace/EdgeEditor.js
+++ b/ChartsSpace/EdgeEditor.js
@@ -76,11 +76,11 @@ function newEdgeEditor () {
   function onDragStarted (event) {
     switch (event.buttons) {
       case 1: {
-        buttonUsedForDragging = 'left'
+        buttonUsedForDragging = 'left mouse button'
         break
       }
       case 2: {
-        buttonUsedForDragging = 'right'
+        buttonUsedForDragging = 'right mouse button'
         break
       }
     }
@@ -134,16 +134,50 @@ function newEdgeEditor () {
       y: thisObject.container.frame.position.y
     }
 
-    thisObject.container.frame.position.x = 0 - dragVector.x / 2
-    thisObject.container.frame.position.y = 0 - dragVector.y / 2
+    /* Calculating the Direct Position, that will be needed to manipulate the coordinate system */
+    thisObject.container.frame.position.x = 0 + dragVector.x
+    thisObject.container.frame.position.y = 0 + dragVector.y
 
-    let newPosition = {
+    let directPositionA = {
       x: thisObject.container.frame.position.x,
       y: thisObject.container.frame.position.y
     }
 
-    newPosition = transformThisPoint(newPosition, thisObject.container)
+    directPositionA = transformThisPoint(directPositionA, thisObject.container)
 
+    thisObject.container.frame.position.x = 0 + dragVector.x / 2
+    thisObject.container.frame.position.y = 0 + dragVector.y / 2
+
+    let directPositionB = {
+      x: thisObject.container.frame.position.x,
+      y: thisObject.container.frame.position.y
+    }
+
+    directPositionB = transformThisPoint(directPositionB, thisObject.container)
+
+    /* Calculating the Inverted Position, that will be needed to manipulate the coordinate system */
+    thisObject.container.frame.position.x = 0 - dragVector.x
+    thisObject.container.frame.position.y = 0 - dragVector.y
+
+    let invertedPositionA = {
+      x: thisObject.container.frame.position.x,
+      y: thisObject.container.frame.position.y
+    }
+
+    invertedPositionA = transformThisPoint(invertedPositionA, thisObject.container)
+
+    /* Calculating the Inverted Position, that will be needed to manipulate the coordinate system */
+    thisObject.container.frame.position.x = 0 - dragVector.x / 2
+    thisObject.container.frame.position.y = 0 - dragVector.y / 2
+
+    let invertedPositionB = {
+      x: thisObject.container.frame.position.x,
+      y: thisObject.container.frame.position.y
+    }
+
+    invertedPositionB = transformThisPoint(invertedPositionB, thisObject.container)
+
+    /* Finally we reset this */
     thisObject.container.frame.position.x = 0
     thisObject.container.frame.position.y = 0
 
@@ -153,15 +187,15 @@ function newEdgeEditor () {
     switch (whereIsMouseOver) {
       case 'center': {
         switch (buttonUsedForDragging) {
-          case 'left': {
+          case 'left mouse button': {
             /* 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
             break
           }
-          case 'right': {
-            let newMinDate = getDateFromPoint(newPosition, thisObject.container.parentContainer, coordinateSystem)
-            let newMaxRate = getRateFromPoint(newPosition, thisObject.container.parentContainer, coordinateSystem)
+          case 'right mouse button': {
+            let newMinDate = getDateFromPoint(invertedPositionB, thisObject.container.parentContainer, coordinateSystem)
+            let newMaxRate = getRateFromPoint(invertedPositionB, thisObject.container.parentContainer, coordinateSystem)
             let xDifferenceMaxMin = coordinateSystem.max.x - coordinateSystem.min.x
             let yDifferenceMaxMin = coordinateSystem.max.y - coordinateSystem.min.y
             coordinateSystem.min.x = newMinDate.valueOf()
@@ -180,8 +214,22 @@ function newEdgeEditor () {
         }
         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
-
         thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
+
+        switch (buttonUsedForDragging) {
+          case 'left mouse button': {
+            let newMaxRate = getRateFromPoint(directPositionB, thisObject.container.parentContainer, coordinateSystem)
+            coordinateSystem.max.y = newMaxRate
+            coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height
+            coordinateSystem.recalculateScale()
+            break
+          }
+          case 'right mouse button': {
+            coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height
+            coordinateSystem.recalculateScale()
+            break
+          }
+        }
         break
       }
       case 'bottom' : {
@@ -189,8 +237,22 @@ function newEdgeEditor () {
           return
         }
         thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height + dragVector.y
-
         thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
+
+        switch (buttonUsedForDragging) {
+          case 'left mouse button': {
+            let newMaxRate = getRateFromPoint(directPositionA, thisObject.container.parentContainer, coordinateSystem)
+            coordinateSystem.min.y = coordinateSystem.min.y - (coordinateSystem.max.y - newMaxRate)
+            coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height
+            coordinateSystem.recalculateScale()
+            break
+          }
+          case 'right mouse button': {
+            coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height
+            coordinateSystem.recalculateScale()
+            break
+          }
+        }
         break
       }
       case 'left' : {
@@ -199,8 +261,24 @@ function newEdgeEditor () {
         }
         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
-
         thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
+
+        switch (buttonUsedForDragging) {
+          case 'left mouse button': {
+            let newMinDate = getDateFromPoint(directPositionA, thisObject.container.parentContainer, coordinateSystem)
+            coordinateSystem.min.x = newMinDate.valueOf()
+            coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width
+            coordinateSystem.recalculateScale()
+            break
+          }
+          case 'right mouse button': {
+            let newMinDate = getDateFromPoint(directPositionB, thisObject.container.parentContainer, coordinateSystem)
+            coordinateSystem.min.x = newMinDate.valueOf()
+            coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width
+            coordinateSystem.recalculateScale()
+            break
+          }
+        }
         break
       }
       case 'right' : {
@@ -210,6 +288,22 @@ function newEdgeEditor () {
         thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width + dragVector.x
 
         thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
+
+        switch (buttonUsedForDragging) {
+          case 'left mouse button': {
+            let newMinDate = getDateFromPoint(invertedPositionB, thisObject.container.parentContainer, coordinateSystem)
+            let xDifferenceMaxMin = coordinateSystem.min.x - newMinDate.valueOf()
+            coordinateSystem.max.x = coordinateSystem.max.x + xDifferenceMaxMin
+            coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width
+            coordinateSystem.recalculateScale()
+            break
+          }
+          case 'right mouse button': {
+            coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width
+            coordinateSystem.recalculateScale()
+            break
+          }
+        }
         break
       }
     }

From 70e4b5c4d0062f9842a723b9b9aa1b8e8141b7b7 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Tue, 11 Feb 2020 20:18:11 +0100
Subject: [PATCH 32/81] margin

---
 ChartsSpace/EdgeEditor.js | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/ChartsSpace/EdgeEditor.js b/ChartsSpace/EdgeEditor.js
index ac8e7943e..e402404ec 100644
--- a/ChartsSpace/EdgeEditor.js
+++ b/ChartsSpace/EdgeEditor.js
@@ -310,6 +310,7 @@ function newEdgeEditor () {
   }
 
   function drawForeground () {
+    let MARGIN = 1
     let edgeSize
     let lineWidth
 
@@ -373,6 +374,26 @@ function newEdgeEditor () {
     pointB3 = transformThisPoint(pointB3, thisObject.container)
     pointB4 = transformThisPoint(pointB4, thisObject.container)
 
+    pointA1 = {
+      x: pointA1.x - MARGIN,
+      y: pointA1.y - MARGIN
+    }
+
+    pointA2 = {
+      x: pointA2.x + MARGIN,
+      y: pointA2.y - MARGIN
+    }
+
+    pointA3 = {
+      x: pointA3.x + MARGIN,
+      y: pointA3.y + MARGIN
+    }
+
+    pointA4 = {
+      x: pointA4.x - MARGIN,
+      y: pointA4.y + MARGIN
+    }
+
     pointB1 = {
       x: pointB1.x - edgeSize,
       y: pointB1.y - edgeSize

From 2e944c6d01bd24a95bb4a320bd866ac926093538 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Wed, 12 Feb 2020 08:07:54 +0100
Subject: [PATCH 33/81] Bug Fixed

---
 ChartsSpace/ViewPort.js | 11 ++++++++---
 Spaces/ChartSpace.js    |  1 +
 SplashScreen.js         |  2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/ChartsSpace/ViewPort.js b/ChartsSpace/ViewPort.js
index 77c7063b0..d2bced074 100644
--- a/ChartsSpace/ViewPort.js
+++ b/ChartsSpace/ViewPort.js
@@ -34,6 +34,7 @@ function newViewport () {
     transformThisPoint: transformThisPoint,
     unTransformThisPoint: unTransformThisPoint,
     isThisPointVisible: isThisPointVisible,
+    isThisPointInViewport: isThisPointInViewport,
     fitIntoVisibleArea: fitIntoVisibleArea,
     displace: displace,
     physics: physics,
@@ -311,11 +312,15 @@ function newViewport () {
   }
 
   function isThisPointVisible (point) {
-    if (visibleArea === undefined) {
-      getVisibleArea()
+    if (point.x < thisObject.visibleArea.topLeft.x || point.x > thisObject.visibleArea.bottomRight.x || point.y < thisObject.visibleArea.topLeft.y || point.y > thisObject.visibleArea.bottomRight.y) {
+      return false
+    } else {
+      return true
     }
+  }
 
-    if (point.x < visibleArea.topLeft.x || point.x > visibleArea.bottomRight.x || point.y < visibleArea.topLeft.y || point.y > visibleArea.bottomRight.y) {
+  function isThisPointInViewport (point) {
+    if (point.y > browserCanvas.height - COCKPIT_SPACE_POSITION) {
       return false
     } else {
       return true
diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js
index 333b98fc5..44c85fe49 100644
--- a/Spaces/ChartSpace.js
+++ b/Spaces/ChartSpace.js
@@ -112,6 +112,7 @@ function newChartSpace () {
 
   function getContainer (point, purpose) {
     if (thisObject.visible !== true) { return }
+    if (thisObject.viewport.isThisPointInViewport(point) === false) { return }
 
     let container
 
diff --git a/SplashScreen.js b/SplashScreen.js
index b81e8352a..5fe6da376 100644
--- a/SplashScreen.js
+++ b/SplashScreen.js
@@ -97,7 +97,7 @@ function newSplashScreen () {
         /* Second the % of Advance. */
 
     let label = '' + Math.trunc(stepsInitializationCounter) + ' %'
-    stepsInitializationCounter = stepsInitializationCounter + 2.0
+    stepsInitializationCounter = stepsInitializationCounter + 5.0
 
     if (stepsInitializationCounter > 99) {
       splashScreenNeeded = false

From d96fdc7e3f58ed9fb200db8cecbe681698fd618e Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Wed, 12 Feb 2020 08:21:39 +0100
Subject: [PATCH 34/81] Bug fixed with borders going out of viewport

---
 ChartsSpace/EdgeEditor.js | 10 ++++++++++
 ChartsSpace/ViewPort.js   | 40 +++++++++++++++++++++++++++------------
 2 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/ChartsSpace/EdgeEditor.js b/ChartsSpace/EdgeEditor.js
index e402404ec..649ec2538 100644
--- a/ChartsSpace/EdgeEditor.js
+++ b/ChartsSpace/EdgeEditor.js
@@ -414,6 +414,16 @@ function newEdgeEditor () {
       y: pointB4.y + edgeSize
     }
 
+    pointA1 = canvas.chartSpace.viewport.fitIntoViewport(pointA1)
+    pointA2 = canvas.chartSpace.viewport.fitIntoViewport(pointA2)
+    pointA3 = canvas.chartSpace.viewport.fitIntoViewport(pointA3)
+    pointA4 = canvas.chartSpace.viewport.fitIntoViewport(pointA4)
+
+    pointB1 = canvas.chartSpace.viewport.fitIntoViewport(pointB1)
+    pointB2 = canvas.chartSpace.viewport.fitIntoViewport(pointB2)
+    pointB3 = canvas.chartSpace.viewport.fitIntoViewport(pointB3)
+    pointB4 = canvas.chartSpace.viewport.fitIntoViewport(pointB4)
+
     browserCanvasContext.setLineDash([0, 0])
 
     browserCanvasContext.beginPath()
diff --git a/ChartsSpace/ViewPort.js b/ChartsSpace/ViewPort.js
index d2bced074..2a054191c 100644
--- a/ChartsSpace/ViewPort.js
+++ b/ChartsSpace/ViewPort.js
@@ -36,6 +36,7 @@ function newViewport () {
     isThisPointVisible: isThisPointVisible,
     isThisPointInViewport: isThisPointInViewport,
     fitIntoVisibleArea: fitIntoVisibleArea,
+    fitIntoViewport: fitIntoViewport,
     displace: displace,
     physics: physics,
     raiseEvents: raiseEvents,
@@ -221,25 +222,40 @@ function newViewport () {
   }
 
   function fitIntoVisibleArea (point) {
-       /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */
-
-    if (point.x > thisObject.visibleArea.bottomRight.x + 1) {
-      point.x = thisObject.visibleArea.bottomRight.x + 1
+    let pointCopy = {
+      x: point.x,
+      y: point.y
     }
 
-    if (point.x < thisObject.visibleArea.topLeft.x - 1) {
-      point.x = thisObject.visibleArea.topLeft.x - 1
+    /* Here we check the boundaries of the resulting points, so they dont go out of the visible area. */
+    if (pointCopy.x > thisObject.visibleArea.bottomRight.x + 1) {
+      pointCopy.x = thisObject.visibleArea.bottomRight.x + 1
     }
 
-    if (point.y > thisObject.visibleArea.bottomRight.y + 1) {
-      point.y = thisObject.visibleArea.bottomRight.y + 1
+    if (pointCopy.x < thisObject.visibleArea.topLeft.x - 1) {
+      pointCopy.x = thisObject.visibleArea.topLeft.x - 1
     }
 
-    if (point.y < thisObject.visibleArea.topLeft.y - 1) {
-      point.y = thisObject.visibleArea.topLeft.y - 1
+    if (pointCopy.y > thisObject.visibleArea.bottomRight.y + 1) {
+      pointCopy.y = thisObject.visibleArea.bottomRight.y + 1
     }
 
-    return point
+    if (pointCopy.y < thisObject.visibleArea.topLeft.y - 1) {
+      pointCopy.y = thisObject.visibleArea.topLeft.y - 1
+    }
+
+    return pointCopy
+  }
+
+  function fitIntoViewport (point) {
+    let pointCopy = {
+      x: point.x,
+      y: point.y
+    }
+    if (pointCopy.y > COCKPIT_SPACE_POSITION) {
+      pointCopy.y = COCKPIT_SPACE_POSITION
+    }
+    return pointCopy
   }
 
   function displace (displaceVector, recalculate) {
@@ -320,7 +336,7 @@ function newViewport () {
   }
 
   function isThisPointInViewport (point) {
-    if (point.y > browserCanvas.height - COCKPIT_SPACE_POSITION) {
+    if (point.y > COCKPIT_SPACE_POSITION) {
       return false
     } else {
       return true

From cc5d697818d03cf736ebf5ec4047aabe59bf072f Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Wed, 12 Feb 2020 10:56:21 +0100
Subject: [PATCH 35/81] both scales working with the coordinate system

---
 ChartsSpace/CoordinateSystem.js | 32 ++++++++++++++++++++++++++++++++
 Scales/RateScale.js             | 20 ++++++++++++++++----
 Scales/TimeScale.js             | 14 ++++++++------
 3 files changed, 56 insertions(+), 10 deletions(-)

diff --git a/ChartsSpace/CoordinateSystem.js b/ChartsSpace/CoordinateSystem.js
index 6edfffcab..2652cbf0f 100644
--- a/ChartsSpace/CoordinateSystem.js
+++ b/ChartsSpace/CoordinateSystem.js
@@ -15,6 +15,8 @@ function newCoordinateSystem () {
     maxWidth: undefined,
     scale: undefined,
     eventHandler: undefined,
+    zoomX: zoomX,
+    zoomY: zoomY,
     recalculateScale: recalculateScale,
     transformThisPoint: transformThisPoint,
     transformThisPoint2: transformThisPoint2,
@@ -63,6 +65,36 @@ function newCoordinateSystem () {
     recalculateScale()
   }
 
+  function zoomX (factor, mousePosition, container) {
+    let mouseAtCointainer = unTransformThisPoint(mousePosition, container)
+    let leftDistance = mouseAtCointainer.x
+    let rightDistance = container.frame.width - mouseAtCointainer.x
+    let diff = thisObject.max.x - thisObject.min.x
+    let min = thisObject.min.x + diff * factor * leftDistance / (container.frame.width / 2)
+    let max = thisObject.max.x - diff * factor * rightDistance / (container.frame.width / 2)
+
+    if (min < max) {
+      thisObject.min.x = min
+      thisObject.max.x = max
+      thisObject.recalculateScale()
+    }
+  }
+
+  function zoomY (factor, mousePosition, container) {
+    let mouseAtCointainer = unTransformThisPoint(mousePosition, container)
+    let topDistance = mouseAtCointainer.y
+    let bottomDistance = container.frame.height - mouseAtCointainer.y
+    let diff = thisObject.max.y - thisObject.min.y
+    let min = thisObject.min.y + diff * factor * bottomDistance / (container.frame.height / 2)
+    let max = thisObject.max.y - diff * factor * topDistance / (container.frame.height / 2)
+
+    if (min < max) {
+      thisObject.min.y = min
+      thisObject.max.y = max
+      thisObject.recalculateScale()
+    }
+  }
+
   function recalculateScale () {
     /* Defines the initial Zoom level at center position. */
     thisObject.scale.x = thisObject.maxWidth / (thisObject.max.x - thisObject.min.x)
diff --git a/Scales/RateScale.js b/Scales/RateScale.js
index 9536a0b82..26f470c05 100644
--- a/Scales/RateScale.js
+++ b/Scales/RateScale.js
@@ -138,12 +138,10 @@ function newRateScale () {
   }
 
   function onMouseWheel (event) {
-    let morePower = 1
-    let delta
-
     if (event.shiftKey === true) {
+      let morePower = 1
       if (event.buttons === 4) { morePower = 10 } // Mouse wheel pressed.
-      delta = event.wheelDelta
+      let delta = event.wheelDelta
       if (delta < 0) {
         thisObject.offset = thisObject.offset - STEP_OFFSET * morePower
         if (thisObject.offset < MIN_OFFSET) { thisObject.offset = STEP_OFFSET }
@@ -168,6 +166,20 @@ function newRateScale () {
       offsetTimer = 100
       scaleTimer = 0
     } else {
+      let factor
+      let morePower = 1
+      if (event.buttons === 4) { morePower = 10 } // Mouse wheel pressed.
+
+      let delta = event.wheelDelta
+      if (delta < 0) {
+        factor = -0.01 * morePower
+      } else {
+        factor = 0.01 * morePower
+      }
+
+      coordinateSystem.zoomY(factor, event, limitingContainer)
+
+      return
       if (event.buttons === 4) { morePower = 5 } // Mouse wheel pressed.
       delta = event.wheelDelta
       if (delta < 0) {
diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js
index 881061cca..20aad59d8 100644
--- a/Scales/TimeScale.js
+++ b/Scales/TimeScale.js
@@ -121,18 +121,20 @@ function newTimeScale () {
   }
 
   function onMouseWheel (event) {
+    let factor
     let morePower = 1
-    if (event.buttons === 4) { morePower = 5 } // Mouse wheel pressed.
+    if (event.buttons === 4) { morePower = 10 } // Mouse wheel pressed.
 
-    delta = event.wheelDelta
+    let delta = event.wheelDelta
     if (delta < 0) {
-      thisObject.scale = thisObject.scale - STEP_SCALE * morePower
-      if (thisObject.scale < MIN_SCALE) { thisObject.scale = MIN_SCALE }
+      factor = -0.01 * morePower
     } else {
-      thisObject.scale = thisObject.scale + STEP_SCALE * morePower
-      if (thisObject.scale > MAX_SCALE) { thisObject.scale = MAX_SCALE }
+      factor = 0.01 * morePower
     }
 
+    coordinateSystem.zoomX(factor, event, limitingContainer)
+
+    return
     if (
       thisObject.scale <= DEFAULT_SCALE + SNAP_THRESHOLD_SCALE &&
       thisObject.scale >= DEFAULT_SCALE - SNAP_THRESHOLD_SCALE

From 5a171d95ce270b2b5eb293299e2d4b0ac4f19934 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Wed, 12 Feb 2020 11:07:13 +0100
Subject: [PATCH 36/81] Cleaning Arrows

---
 Scales/RateScale.js | 106 +------------------------------------------
 Scales/TimeScale.js | 108 +-------------------------------------------
 2 files changed, 4 insertions(+), 210 deletions(-)

diff --git a/Scales/RateScale.js b/Scales/RateScale.js
index 26f470c05..c3793b8c7 100644
--- a/Scales/RateScale.js
+++ b/Scales/RateScale.js
@@ -167,8 +167,8 @@ function newRateScale () {
       scaleTimer = 0
     } else {
       let factor
-      let morePower = 1
-      if (event.buttons === 4) { morePower = 10 } // Mouse wheel pressed.
+      let morePower = 10
+      if (event.buttons === 4) { morePower = 1 } // Mouse wheel pressed.
 
       let delta = event.wheelDelta
       if (delta < 0) {
@@ -407,7 +407,6 @@ function newRateScale () {
   function drawForeground () {
     if (isMouseOver === true) {
       drawScaleBox()
-      drawArrows()
     }
   }
 
@@ -446,105 +445,4 @@ function newRateScale () {
 
     drawScaleDisplay(label1, label2, label3, 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor)
   }
-
-  function drawArrows () {
-    if (visible === false || thisObject.rate === undefined) { return }
-
-    const X_OFFSET = thisObject.container.frame.width / 2
-    const Y_OFFSET = thisObject.container.frame.height / 2
-    const HEIGHT = 6
-    const WIDTH = 18
-    const LINE_WIDTH = 3
-    const OPACITY = 0.2
-    const DISTANCE_BETWEEN_ARROWS = 10
-    const MIN_DISTANCE_FROM_CENTER = 30
-    const CURRENT_SCALE_DISTANCE = MIN_DISTANCE_FROM_CENTER + thisObject.scale
-    const MAX_DISTANCE_FROM_CENTER = MIN_DISTANCE_FROM_CENTER + 215 + DISTANCE_BETWEEN_ARROWS
-
-    let ARROW_DIRECTION = 0
-
-    ARROW_DIRECTION = -1
-    drawTwoArrows()
-    ARROW_DIRECTION = 1
-    drawTwoArrows()
-
-    function drawTwoArrows () {
-      point1 = {
-        x: X_OFFSET - WIDTH / 2,
-        y: Y_OFFSET + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION
-      }
-
-      point2 = {
-        x: X_OFFSET,
-        y: Y_OFFSET + HEIGHT * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION
-      }
-
-      point3 = {
-        x: X_OFFSET + WIDTH / 2,
-        y: Y_OFFSET + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION
-      }
-
-      point1 = thisObject.container.frame.frameThisPoint(point1)
-      point2 = thisObject.container.frame.frameThisPoint(point2)
-      point3 = thisObject.container.frame.frameThisPoint(point3)
-
-      point4 = {
-        x: X_OFFSET - WIDTH / 2,
-        y: Y_OFFSET - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION
-      }
-
-      point5 = {
-        x: X_OFFSET,
-        y: Y_OFFSET + HEIGHT * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION
-      }
-
-      point6 = {
-        x: X_OFFSET + WIDTH / 2,
-        y: Y_OFFSET - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION
-      }
-
-      point4 = thisObject.container.frame.frameThisPoint(point4)
-      point5 = thisObject.container.frame.frameThisPoint(point5)
-      point6 = thisObject.container.frame.frameThisPoint(point6)
-
-      point7 = {
-        x: X_OFFSET - WIDTH / 2,
-        y: Y_OFFSET - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION
-      }
-
-      point8 = {
-        x: X_OFFSET,
-        y: Y_OFFSET - HEIGHT * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION
-      }
-
-      point9 = {
-        x: X_OFFSET + WIDTH / 2,
-        y: Y_OFFSET - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION
-      }
-
-      point7 = thisObject.container.frame.frameThisPoint(point7)
-      point8 = thisObject.container.frame.frameThisPoint(point8)
-      point9 = thisObject.container.frame.frameThisPoint(point9)
-
-      browserCanvasContext.setLineDash([0, 0])
-
-      browserCanvasContext.beginPath()
-
-      browserCanvasContext.moveTo(point1.x, point1.y)
-      browserCanvasContext.lineTo(point2.x, point2.y)
-      browserCanvasContext.lineTo(point3.x, point3.y)
-
-      browserCanvasContext.moveTo(point4.x, point4.y)
-      browserCanvasContext.lineTo(point5.x, point5.y)
-      browserCanvasContext.lineTo(point6.x, point6.y)
-
-      browserCanvasContext.moveTo(point7.x, point7.y)
-      browserCanvasContext.lineTo(point8.x, point8.y)
-      browserCanvasContext.lineTo(point9.x, point9.y)
-
-      browserCanvasContext.lineWidth = LINE_WIDTH
-      browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')'
-      browserCanvasContext.stroke()
-    }
-  }
 }
diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js
index 20aad59d8..e3a45b031 100644
--- a/Scales/TimeScale.js
+++ b/Scales/TimeScale.js
@@ -122,8 +122,8 @@ function newTimeScale () {
 
   function onMouseWheel (event) {
     let factor
-    let morePower = 1
-    if (event.buttons === 4) { morePower = 10 } // Mouse wheel pressed.
+    let morePower = 10
+    if (event.buttons === 4) { morePower = 1 } // Mouse wheel pressed.
 
     let delta = event.wheelDelta
     if (delta < 0) {
@@ -287,7 +287,6 @@ function newTimeScale () {
   function drawForeground () {
     if (isMouseOver === true) {
       drawScaleBox()
-      drawArrows()
     }
   }
 
@@ -312,107 +311,4 @@ function newTimeScale () {
 
     drawScaleDisplay(label1, label2, label3, 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor)
   }
-
-  function drawArrows () {
-    if (visible === false || thisObject.date === undefined) { return }
-
-    const X_OFFSET = thisObject.container.frame.width / 2
-    const Y_OFFSET = thisObject.container.frame.height / 2 - 10
-    const HEIGHT = 18
-    const WIDTH = 6
-    const LINE_WIDTH = 3
-    const OPACITY = 0.2
-    const DISTANCE_BETWEEN_ARROWS = 10
-    const MIN_DISTANCE_FROM_CENTER = 110
-    const CURRENT_SCALE_DISTANCE = MIN_DISTANCE_FROM_CENTER + thisObject.scale
-    const MAX_DISTANCE_FROM_CENTER = MIN_DISTANCE_FROM_CENTER + MAX_SCALE + DISTANCE_BETWEEN_ARROWS
-
-    let ARROW_DIRECTION = 0
-
-    ARROW_DIRECTION = -1
-    drawTwoArrows()
-    ARROW_DIRECTION = 1
-    drawTwoArrows()
-
-    function drawTwoArrows () {
-      point1 = {
-        x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION,
-        y: Y_OFFSET - 0
-      }
-
-      point2 = {
-        x: X_OFFSET + WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION,
-        y: Y_OFFSET + HEIGHT / 2
-      }
-
-      point3 = {
-        x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION,
-        y: Y_OFFSET + HEIGHT
-      }
-
-      point1 = thisObject.container.frame.frameThisPoint(point1)
-      point2 = thisObject.container.frame.frameThisPoint(point2)
-      point3 = thisObject.container.frame.frameThisPoint(point3)
-
-      point4 = {
-        x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION,
-        y: Y_OFFSET - 0
-      }
-
-      point5 = {
-        x: X_OFFSET + WIDTH / 2 * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION,
-        y: Y_OFFSET + HEIGHT / 2
-      }
-
-      point6 = {
-        x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION - DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + CURRENT_SCALE_DISTANCE * ARROW_DIRECTION,
-        y: Y_OFFSET + HEIGHT
-      }
-
-      point4 = thisObject.container.frame.frameThisPoint(point4)
-      point5 = thisObject.container.frame.frameThisPoint(point5)
-      point6 = thisObject.container.frame.frameThisPoint(point6)
-
-      point7 = {
-        x: X_OFFSET + WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION,
-        y: Y_OFFSET - 0
-      }
-
-      point8 = {
-        x: X_OFFSET - WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION,
-        y: Y_OFFSET + HEIGHT / 2
-      }
-
-      point9 = {
-        x: X_OFFSET + WIDTH / 2 * ARROW_DIRECTION + DISTANCE_BETWEEN_ARROWS / 2 * ARROW_DIRECTION + MAX_DISTANCE_FROM_CENTER * ARROW_DIRECTION,
-        y: Y_OFFSET + HEIGHT
-      }
-
-      point7 = thisObject.container.frame.frameThisPoint(point7)
-      point8 = thisObject.container.frame.frameThisPoint(point8)
-      point9 = thisObject.container.frame.frameThisPoint(point9)
-
-      browserCanvasContext.setLineDash([0, 0])
-
-      browserCanvasContext.beginPath()
-
-      browserCanvasContext.moveTo(point1.x, point1.y)
-      browserCanvasContext.lineTo(point2.x, point2.y)
-      browserCanvasContext.lineTo(point3.x, point3.y)
-
-      browserCanvasContext.moveTo(point4.x, point4.y)
-      browserCanvasContext.lineTo(point5.x, point5.y)
-      browserCanvasContext.lineTo(point6.x, point6.y)
-
-      browserCanvasContext.moveTo(point7.x, point7.y)
-      browserCanvasContext.lineTo(point8.x, point8.y)
-      browserCanvasContext.lineTo(point9.x, point9.y)
-
-      browserCanvasContext.closePath()
-
-      browserCanvasContext.lineWidth = LINE_WIDTH
-      browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', ' + OPACITY + ')'
-      browserCanvasContext.stroke()
-    }
-  }
 }

From 9d84be843a28ef1efc2586ac402ae3df8de1aa15 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Wed, 12 Feb 2020 13:47:31 +0100
Subject: [PATCH 37/81] peace restored

---
 ChartsSpace/EdgeEditor.js  | 106 +++++++++++++++----------------------
 ChartsSpace/TimeMachine.js |  23 ++------
 Plotter.js                 |  10 ++--
 Scales/RateScale.js        |   2 +-
 Scales/TimeScale.js        |  12 ++---
 Utilities.js               |  34 +++++++++++-
 6 files changed, 91 insertions(+), 96 deletions(-)

diff --git a/ChartsSpace/EdgeEditor.js b/ChartsSpace/EdgeEditor.js
index 649ec2538..a9dfee62b 100644
--- a/ChartsSpace/EdgeEditor.js
+++ b/ChartsSpace/EdgeEditor.js
@@ -134,53 +134,6 @@ function newEdgeEditor () {
       y: thisObject.container.frame.position.y
     }
 
-    /* Calculating the Direct Position, that will be needed to manipulate the coordinate system */
-    thisObject.container.frame.position.x = 0 + dragVector.x
-    thisObject.container.frame.position.y = 0 + dragVector.y
-
-    let directPositionA = {
-      x: thisObject.container.frame.position.x,
-      y: thisObject.container.frame.position.y
-    }
-
-    directPositionA = transformThisPoint(directPositionA, thisObject.container)
-
-    thisObject.container.frame.position.x = 0 + dragVector.x / 2
-    thisObject.container.frame.position.y = 0 + dragVector.y / 2
-
-    let directPositionB = {
-      x: thisObject.container.frame.position.x,
-      y: thisObject.container.frame.position.y
-    }
-
-    directPositionB = transformThisPoint(directPositionB, thisObject.container)
-
-    /* Calculating the Inverted Position, that will be needed to manipulate the coordinate system */
-    thisObject.container.frame.position.x = 0 - dragVector.x
-    thisObject.container.frame.position.y = 0 - dragVector.y
-
-    let invertedPositionA = {
-      x: thisObject.container.frame.position.x,
-      y: thisObject.container.frame.position.y
-    }
-
-    invertedPositionA = transformThisPoint(invertedPositionA, thisObject.container)
-
-    /* Calculating the Inverted Position, that will be needed to manipulate the coordinate system */
-    thisObject.container.frame.position.x = 0 - dragVector.x / 2
-    thisObject.container.frame.position.y = 0 - dragVector.y / 2
-
-    let invertedPositionB = {
-      x: thisObject.container.frame.position.x,
-      y: thisObject.container.frame.position.y
-    }
-
-    invertedPositionB = transformThisPoint(invertedPositionB, thisObject.container)
-
-    /* Finally we reset this */
-    thisObject.container.frame.position.x = 0
-    thisObject.container.frame.position.y = 0
-
     const MIN_WIDTH = 100
     const MIN_HEIGHT = 50
 
@@ -194,8 +147,12 @@ function newEdgeEditor () {
             break
           }
           case 'right mouse button': {
-            let newMinDate = getDateFromPoint(invertedPositionB, thisObject.container.parentContainer, coordinateSystem)
-            let newMaxRate = getRateFromPoint(invertedPositionB, thisObject.container.parentContainer, coordinateSystem)
+            let point = {
+              x: -thisObject.container.frame.position.x,
+              y: -thisObject.container.frame.position.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
             coordinateSystem.min.x = newMinDate.valueOf()
@@ -212,13 +169,18 @@ function newEdgeEditor () {
         if (thisObject.container.parentContainer.frame.height - dragVector.y < MIN_HEIGHT) {
           return
         }
+
+        let point = {
+          x: thisObject.container.frame.position.x,
+          y: thisObject.container.frame.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
-        thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
 
         switch (buttonUsedForDragging) {
           case 'left mouse button': {
-            let newMaxRate = getRateFromPoint(directPositionB, thisObject.container.parentContainer, coordinateSystem)
             coordinateSystem.max.y = newMaxRate
             coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height
             coordinateSystem.recalculateScale()
@@ -230,19 +192,25 @@ function newEdgeEditor () {
             break
           }
         }
+        thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
         break
       }
       case 'bottom' : {
         if (thisObject.container.parentContainer.frame.height + dragVector.y < MIN_HEIGHT) {
           return
         }
+
+        let point = {
+          x: thisObject.container.frame.position.x,
+          y: thisObject.container.frame.position.y + thisObject.container.frame.height
+        }
+        let newMinRate = getRateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
+
         thisObject.container.parentContainer.frame.height = thisObject.container.parentContainer.frame.height + dragVector.y
-        thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
 
         switch (buttonUsedForDragging) {
           case 'left mouse button': {
-            let newMaxRate = getRateFromPoint(directPositionA, thisObject.container.parentContainer, coordinateSystem)
-            coordinateSystem.min.y = coordinateSystem.min.y - (coordinateSystem.max.y - newMaxRate)
+            coordinateSystem.min.y = newMinRate
             coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height
             coordinateSystem.recalculateScale()
             break
@@ -253,47 +221,54 @@ function newEdgeEditor () {
             break
           }
         }
+        thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
         break
       }
       case 'left' : {
         if (thisObject.container.parentContainer.frame.width - dragVector.x < MIN_WIDTH) {
           return
         }
+        let point = {
+          x: thisObject.container.frame.position.x,
+          y: thisObject.container.frame.position.y
+        }
+        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
-        thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
 
         switch (buttonUsedForDragging) {
           case 'left mouse button': {
-            let newMinDate = getDateFromPoint(directPositionA, thisObject.container.parentContainer, coordinateSystem)
             coordinateSystem.min.x = newMinDate.valueOf()
             coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width
             coordinateSystem.recalculateScale()
             break
           }
           case 'right mouse button': {
-            let newMinDate = getDateFromPoint(directPositionB, thisObject.container.parentContainer, coordinateSystem)
-            coordinateSystem.min.x = newMinDate.valueOf()
             coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width
             coordinateSystem.recalculateScale()
             break
           }
         }
+        thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
         break
       }
       case 'right' : {
         if (thisObject.container.parentContainer.frame.width + dragVector.x < MIN_WIDTH) {
           return
         }
-        thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width + dragVector.x
 
-        thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
+        let point = {
+          x: thisObject.container.frame.position.x + thisObject.container.frame.width,
+          y: thisObject.container.frame.position.y
+        }
+        let newMaxDate = getDateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
+
+        thisObject.container.parentContainer.frame.width = thisObject.container.parentContainer.frame.width + dragVector.x
 
         switch (buttonUsedForDragging) {
           case 'left mouse button': {
-            let newMinDate = getDateFromPoint(invertedPositionB, thisObject.container.parentContainer, coordinateSystem)
-            let xDifferenceMaxMin = coordinateSystem.min.x - newMinDate.valueOf()
-            coordinateSystem.max.x = coordinateSystem.max.x + xDifferenceMaxMin
+            coordinateSystem.max.x = newMaxDate.valueOf()
             coordinateSystem.maxWidth = thisObject.container.parentContainer.frame.width
             coordinateSystem.recalculateScale()
             break
@@ -304,9 +279,14 @@ function newEdgeEditor () {
             break
           }
         }
+        thisObject.container.parentContainer.eventHandler.raiseEvent('Dimmensions Changed', event)
         break
       }
     }
+
+    /* Finally we reset this */
+    thisObject.container.frame.position.x = 0
+    thisObject.container.frame.position.y = 0
   }
 
   function drawForeground () {
diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js
index 1c7767c10..0a2d68f58 100644
--- a/ChartsSpace/TimeMachine.js
+++ b/ChartsSpace/TimeMachine.js
@@ -50,7 +50,6 @@ function newTimeMachine () {
   let onViewportZoomChangedEventSuscriptionId
   let onMouseOverEventSuscriptionId
   let onMouseNotOverEventSuscriptionId
-  let timeScaleValueEventSuscriptionId
   let timeScaleMouseOverEventSuscriptionId
   let rateScaleValueEventSuscriptionId
   let rateScaleMouseOverEventSuscriptionId
@@ -114,7 +113,6 @@ function newTimeMachine () {
   function finalizeTimeScale () {
     if (thisObject.timeScale === undefined) { return }
 
-    thisObject.timeScale.container.eventHandler.stopListening(timeScaleValueEventSuscriptionId)
     thisObject.timeScale.container.eventHandler.stopListening(timeScaleMouseOverEventSuscriptionId)
     thisObject.timeScale.finalize()
     thisObject.timeScale = undefined
@@ -142,6 +140,9 @@ function newTimeMachine () {
     timeFrame = INITIAL_TIME_PERIOD
     loadFrame(thisObject.payload, thisObject.container.frame)
 
+    // thisObject.container.frame.position.x = 0
+    // thisObject.container.frame.position.y = 0
+
     recalculateCoordinateSystem()
     recalculateCurrentDatetime()
 
@@ -194,23 +195,9 @@ function newTimeMachine () {
     thisObject.timeScale.fitFunction = thisObject.fitFunction
     thisObject.timeScale.payload = thisObject.payload.node.timeScale.payload
 
-    timeScaleValueEventSuscriptionId = thisObject.timeScale.container.eventHandler.listenToEvent('Time Scale Value Changed', timeScaleValueChanged)
     timeScaleMouseOverEventSuscriptionId = thisObject.timeScale.container.eventHandler.listenToEvent('onMouseOverScale', timeScaleMouseOver)
     thisObject.timeScale.initialize(timeMachineCoordinateSystem, thisObject.container)
 
-    function timeScaleValueChanged (event) {
-      if (event.isUserAction === true) {
-        let currentDate = getDateFromPoint(event.mousePosition, thisObject.container, timeMachineCoordinateSystem)
-        let currentRate = getRateFromPoint(event.mousePosition, thisObject.container, timeMachineCoordinateSystem)
-        // thisObject.container.frame.width = TIME_MACHINE_WIDTH + TIME_MACHINE_WIDTH * event.scale
-        recalculateCoordinateSystem()
-        moveToUserPosition(thisObject.container, currentDate, currentRate, timeMachineCoordinateSystem, false, true, event.mousePosition)
-      } else {
-        // thisObject.container.frame.width = TIME_MACHINE_WIDTH + TIME_MACHINE_WIDTH * event.scale
-        recalculateCoordinateSystem()
-      }
-      thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
-    }
     function timeScaleMouseOver (event) {
       thisObject.container.eventHandler.raiseEvent('onMouseOver', event)
     }
@@ -227,8 +214,8 @@ function newTimeMachine () {
 
     function rateScaleValueChanged (event) {
       if (event.isUserAction === true) {
-        let currentDate = getDateFromPoint(event.mousePosition, thisObject.container, timeMachineCoordinateSystem)
-        let currentRate = getRateFromPoint(event.mousePosition, thisObject.container, timeMachineCoordinateSystem)
+        let currentDate = getDateFromPointAtBrowserCanvas(event.mousePosition, thisObject.container, timeMachineCoordinateSystem)
+        let currentRate = getRateFromPointAtBrowserCanvas(event.mousePosition, thisObject.container, timeMachineCoordinateSystem)
 
         // thisObject.container.frame.height = TIME_MACHINE_HEIGHT + TIME_MACHINE_HEIGHT * event.scale
         recalculateCoordinateSystem()
diff --git a/Plotter.js b/Plotter.js
index 97b818a28..0f90ee3c5 100644
--- a/Plotter.js
+++ b/Plotter.js
@@ -146,7 +146,7 @@ function newPlotter () {
   }
 
   function onMouseOver (event) {
-    let userPosition = getDateFromPoint(event, thisObject.container, coordinateSystem)
+    let userPosition = getDateFromPointAtBrowserCanvas(event, thisObject.container, coordinateSystem)
     userPositionDate = userPosition.valueOf()
   }
 
@@ -374,8 +374,8 @@ function newPlotter () {
 
       let daysOnSides = getSideDays(timeFrame)
 
-      let leftDate = getDateFromPoint(canvas.chartSpace.viewport.visibleArea.topLeft, thisObject.container, coordinateSystem)
-      let rightDate = getDateFromPoint(canvas.chartSpace.viewport.visibleArea.topRight, thisObject.container, coordinateSystem)
+      let leftDate = getDateFromPointAtBrowserCanvas(canvas.chartSpace.viewport.visibleArea.topLeft, thisObject.container, coordinateSystem)
+      let rightDate = getDateFromPointAtBrowserCanvas(canvas.chartSpace.viewport.visibleArea.topRight, thisObject.container, coordinateSystem)
 
       let dateDiff = rightDate.valueOf() - leftDate.valueOf()
 
@@ -427,8 +427,8 @@ function newPlotter () {
 
       let daysOnSides = getSideDays(timeFrame)
 
-      let leftDate = getDateFromPoint(canvas.chartSpace.viewport.visibleArea.topLeft, thisObject.container, coordinateSystem)
-      let rightDate = getDateFromPoint(canvas.chartSpace.viewport.visibleArea.topRight, thisObject.container, coordinateSystem)
+      let leftDate = getDateFromPointAtBrowserCanvas(canvas.chartSpace.viewport.visibleArea.topLeft, thisObject.container, coordinateSystem)
+      let rightDate = getDateFromPointAtBrowserCanvas(canvas.chartSpace.viewport.visibleArea.topRight, thisObject.container, coordinateSystem)
 
       let dateDiff = rightDate.valueOf() - leftDate.valueOf()
 
diff --git a/Scales/RateScale.js b/Scales/RateScale.js
index c3793b8c7..ece23b55e 100644
--- a/Scales/RateScale.js
+++ b/Scales/RateScale.js
@@ -362,7 +362,7 @@ function newRateScale () {
       y: mouse.position.y + thisObject.offset
     }
 
-    thisObject.rate = getRateFromPoint(ratePoint, rateCalculationsContainer, coordinateSystem)
+    thisObject.rate = getRateFromPointAtBrowserCanvas(ratePoint, rateCalculationsContainer, coordinateSystem)
 
     /* rateScale Positioning */
     ratePoint = {
diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js
index e3a45b031..6e59aa2c0 100644
--- a/Scales/TimeScale.js
+++ b/Scales/TimeScale.js
@@ -86,7 +86,6 @@ function newTimeScale () {
 
     let event = {}
     event.scale = thisObject.scale
-    thisObject.container.eventHandler.raiseEvent('Time Scale Value Changed', event)
   }
 
   function onMouseOverSomeTimeMachineContainer (event) {
@@ -133,7 +132,7 @@ function newTimeScale () {
     }
 
     coordinateSystem.zoomX(factor, event, limitingContainer)
-
+    saveObjectState()
     return
     if (
       thisObject.scale <= DEFAULT_SCALE + SNAP_THRESHOLD_SCALE &&
@@ -145,7 +144,6 @@ function newTimeScale () {
     }
 
     event.isUserAction = true
-    thisObject.container.eventHandler.raiseEvent('Time Scale Value Changed', event)
 
     saveObjectState()
     scaleTimer = 100
@@ -162,8 +160,8 @@ function newTimeScale () {
       let code = JSON.parse(thisObject.payload.node.code)
       code.scale = thisObject.scale / MAX_SCALE * 100
       code.scale = code.scale.toFixed(0)
-      code.fromDate = (new Date(thisObject.fromDate)).toISOString()
-      code.toDate = (new Date(thisObject.toDate)).toISOString()
+      code.fromDate = (new Date(coordinateSystem.min.x)).toISOString()
+      code.toDate = (new Date(coordinateSystem.max.x)).toISOString()
       thisObject.payload.node.code = JSON.stringify(code, null, 4)
     } catch (err) {
        // we ignore errors here since most likely they will be parsing errors.
@@ -171,6 +169,7 @@ function newTimeScale () {
   }
 
   function readObjectState () {
+    return
     try {
       let code = JSON.parse(thisObject.payload.node.code)
 
@@ -192,7 +191,6 @@ function newTimeScale () {
           } else {
             event.scale = thisObject.scale
           }
-          thisObject.container.eventHandler.raiseEvent('Time Scale Value Changed', event)
         }
       }
 
@@ -247,7 +245,7 @@ function newTimeScale () {
       y: 0
     }
 
-    let mouseDate = getDateFromPoint(timePoint, limitingContainer, coordinateSystem)
+    let mouseDate = getDateFromPointAtBrowserCanvas(timePoint, limitingContainer, coordinateSystem)
 
     thisObject.date = new Date(mouseDate)
 
diff --git a/Utilities.js b/Utilities.js
index ddf1f302a..6bf221203 100644
--- a/Utilities.js
+++ b/Utilities.js
@@ -141,7 +141,7 @@ function pad (str, max) {
   return str.length < max ? pad('0' + str, max) : str
 }
 
-function getDateFromPoint (point, container, coordinateSystem) {
+function getDateFromPointAtBrowserCanvas (point, container, coordinateSystem) {
   point = unTransformThisPoint(point, container)
   point = coordinateSystem.unInverseTransform(point, container.frame.height)
 
@@ -150,13 +150,43 @@ function getDateFromPoint (point, container, coordinateSystem) {
   return date
 }
 
-function getRateFromPoint (point, container, coordinateSystem) {
+function getDateFromPointAtChartsSpace (point, container, coordinateSystem) {
+  point = container.frame.unframeThisPoint(point)
+  point = coordinateSystem.unInverseTransform(point, container.frame.height)
+
+  let date = new Date(point.x)
+
+  return date
+}
+
+function getDateFromPointAtContainer (point, container, coordinateSystem) {
+  point = coordinateSystem.unInverseTransform(point, container.frame.height)
+
+  let date = new Date(point.x)
+
+  return date
+}
+
+function getRateFromPointAtBrowserCanvas (point, container, coordinateSystem) {
   point = unTransformThisPoint(point, container)
   point = coordinateSystem.unInverseTransform(point, container.frame.height)
 
   return point.y
 }
 
+function getRateFromPointAtChartSpace (point, container, coordinateSystem) {
+  point = container.frame.unframeThisPoint(point)
+  point = coordinateSystem.unInverseTransform(point, container.frame.height)
+
+  return point.y
+}
+
+function getRateFromPointAtContainer (point, container, coordinateSystem) {
+  point = coordinateSystem.unInverseTransform(point, container.frame.height)
+
+  return point.y
+}
+
 function getMilisecondsFromPoint (point, container, coordinateSystem) {
   point = unTransformThisPoint(point, container)
   point = coordinateSystem.unInverseTransform(point, container.frame.height)

From 441ae5bc1d16bd19153be9ce67f7767e96c25906 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Wed, 12 Feb 2020 13:59:39 +0100
Subject: [PATCH 38/81] bug fixed

---
 ChartsSpace/EdgeEditor.js | 27 +++++++++++++--------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/ChartsSpace/EdgeEditor.js b/ChartsSpace/EdgeEditor.js
index a9dfee62b..ed951f8ae 100644
--- a/ChartsSpace/EdgeEditor.js
+++ b/ChartsSpace/EdgeEditor.js
@@ -134,6 +134,9 @@ function newEdgeEditor () {
       y: thisObject.container.frame.position.y
     }
 
+    thisObject.container.frame.position.x = 0
+    thisObject.container.frame.position.y = 0
+
     const MIN_WIDTH = 100
     const MIN_HEIGHT = 50
 
@@ -148,8 +151,8 @@ function newEdgeEditor () {
           }
           case 'right mouse button': {
             let point = {
-              x: -thisObject.container.frame.position.x,
-              y: -thisObject.container.frame.position.y
+              x: -dragVector.x,
+              y: -dragVector.y
             }
             let newMinDate = getDateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
             let newMaxRate = getRateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
@@ -171,8 +174,8 @@ function newEdgeEditor () {
         }
 
         let point = {
-          x: thisObject.container.frame.position.x,
-          y: thisObject.container.frame.position.y
+          x: dragVector.x,
+          y: dragVector.y
         }
         let newMaxRate = getRateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
 
@@ -201,8 +204,8 @@ function newEdgeEditor () {
         }
 
         let point = {
-          x: thisObject.container.frame.position.x,
-          y: thisObject.container.frame.position.y + thisObject.container.frame.height
+          x: dragVector.x,
+          y: dragVector.y + thisObject.container.frame.height
         }
         let newMinRate = getRateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
 
@@ -229,8 +232,8 @@ function newEdgeEditor () {
           return
         }
         let point = {
-          x: thisObject.container.frame.position.x,
-          y: thisObject.container.frame.position.y
+          x: dragVector.x,
+          y: dragVector.y
         }
         let newMinDate = getDateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
 
@@ -259,8 +262,8 @@ function newEdgeEditor () {
         }
 
         let point = {
-          x: thisObject.container.frame.position.x + thisObject.container.frame.width,
-          y: thisObject.container.frame.position.y
+          x: dragVector.x + thisObject.container.frame.width,
+          y: dragVector.y
         }
         let newMaxDate = getDateFromPointAtContainer(point, thisObject.container.parentContainer, coordinateSystem)
 
@@ -283,10 +286,6 @@ function newEdgeEditor () {
         break
       }
     }
-
-    /* Finally we reset this */
-    thisObject.container.frame.position.x = 0
-    thisObject.container.frame.position.y = 0
   }
 
   function drawForeground () {

From 3a58288babc9bbd91cff0967b778d6f830279fd9 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Wed, 12 Feb 2020 14:55:10 +0100
Subject: [PATCH 39/81] timeScale implementation completed

---
 ChartsSpace/TimeMachine.js | 10 ------
 Scales/TimeScale.js        | 66 ++++----------------------------------
 2 files changed, 7 insertions(+), 69 deletions(-)

diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js
index 0a2d68f58..0f1cc99ee 100644
--- a/ChartsSpace/TimeMachine.js
+++ b/ChartsSpace/TimeMachine.js
@@ -614,16 +614,6 @@ function newTimeMachine () {
       y: nextPorwerOf10(MAX_DEFAULT_RATE_SCALE_VALUE) / 4
     }
 
-    if (thisObject.timeScale !== undefined) {
-      minValue.x = thisObject.timeScale.fromDate
-      maxValue.x = thisObject.timeScale.toDate
-    }
-
-    if (thisObject.rateScale !== undefined) {
-      minValue.y = thisObject.rateScale.minValue
-      maxValue.y = thisObject.rateScale.maxValue
-    }
-
     timeMachineCoordinateSystem.initialize(
           minValue,
           maxValue,
diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js
index 6e59aa2c0..60f064126 100644
--- a/Scales/TimeScale.js
+++ b/Scales/TimeScale.js
@@ -2,7 +2,6 @@ function newTimeScale () {
   const MODULE_NAME = 'Time Scale'
 
   let thisObject = {
-    scale: undefined,
     container: undefined,
     date: undefined,
     fitFunction: undefined,
@@ -19,12 +18,6 @@ function newTimeScale () {
     finalize: finalize
   }
 
-  const DEFAULT_SCALE = 0
-  const STEP_SCALE = 2.5
-  const MIN_SCALE = 0
-  const MAX_SCALE = 250
-  const SNAP_THRESHOLD_SCALE = 0
-
   thisObject.container = newContainer()
   thisObject.container.initialize(MODULE_NAME)
 
@@ -42,6 +35,7 @@ function newTimeScale () {
   let onMouseWheelEventSubscriptionId
   let onMouseOverEventSubscriptionId
   let onMouseNotOverEventSubscriptionId
+  let onScaleChangedEventSubscriptionId
 
   let coordinateSystem
   let limitingContainer
@@ -52,13 +46,14 @@ function newTimeScale () {
       y: 0
     }
   }
-  let scaleTimer = 0
+
   return thisObject
 
   function finalize () {
     thisObject.container.eventHandler.stopListening(onMouseWheelEventSubscriptionId)
     thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
     thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
+    coordinateSystem.eventHandler.stopListening(onScaleChangedEventSubscriptionId)
 
     thisObject.container.finalize()
     thisObject.container = undefined
@@ -74,18 +69,12 @@ function newTimeScale () {
     coordinateSystem = pCoordinateSystem
     limitingContainer = pLimitingContainer
 
-    thisObject.fromDate = coordinateSystem.min.x
-    thisObject.toDate = coordinateSystem.max.x
-
     onMouseWheelEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
     onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
     onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
+    onScaleChangedEventSubscriptionId = coordinateSystem.eventHandler.listenToEvent('Scale Changed', onScaleChanged)
 
-    thisObject.scale = DEFAULT_SCALE
     readObjectState()
-
-    let event = {}
-    event.scale = thisObject.scale
   }
 
   function onMouseOverSomeTimeMachineContainer (event) {
@@ -116,7 +105,6 @@ function newTimeScale () {
 
   function onMouseNotOver () {
     isMouseOver = false
-    scaleTimer = 0
   }
 
   function onMouseWheel (event) {
@@ -131,22 +119,11 @@ function newTimeScale () {
       factor = 0.01 * morePower
     }
 
-    coordinateSystem.zoomX(factor, event, limitingContainer)
-    saveObjectState()
-    return
-    if (
-      thisObject.scale <= DEFAULT_SCALE + SNAP_THRESHOLD_SCALE &&
-      thisObject.scale >= DEFAULT_SCALE - SNAP_THRESHOLD_SCALE
-    ) {
-      event.scale = DEFAULT_SCALE
-    } else {
-      event.scale = thisObject.scale
-    }
-
-    event.isUserAction = true
+    coordinateSystem.zoomX(factor, event, limitingContainer, MODULE_NAME)
+  }
 
+  function onScaleChanged () {
     saveObjectState()
-    scaleTimer = 100
   }
 
   function getContainer (point) {
@@ -158,8 +135,6 @@ function newTimeScale () {
   function saveObjectState () {
     try {
       let code = JSON.parse(thisObject.payload.node.code)
-      code.scale = thisObject.scale / MAX_SCALE * 100
-      code.scale = code.scale.toFixed(0)
       code.fromDate = (new Date(coordinateSystem.min.x)).toISOString()
       code.toDate = (new Date(coordinateSystem.max.x)).toISOString()
       thisObject.payload.node.code = JSON.stringify(code, null, 4)
@@ -173,27 +148,6 @@ function newTimeScale () {
     try {
       let code = JSON.parse(thisObject.payload.node.code)
 
-      if (isNaN(code.scale) || code.scale === null || code.scale === undefined) {
-         // not using this value
-      } else {
-        code.scale = code.scale / 100 * MAX_SCALE
-        if (code.scale < MIN_SCALE) { code.scale = MIN_SCALE }
-        if (code.scale > MAX_SCALE) { code.scale = MAX_SCALE }
-
-        if (code.scale !== thisObject.scale) {
-          thisObject.scale = code.scale
-          let event = {}
-          if (
-            thisObject.scale <= DEFAULT_SCALE + SNAP_THRESHOLD_SCALE &&
-            thisObject.scale >= DEFAULT_SCALE - SNAP_THRESHOLD_SCALE
-          ) {
-            event.scale = DEFAULT_SCALE
-          } else {
-            event.scale = thisObject.scale
-          }
-        }
-      }
-
       if (
       (isNaN(Date.parse(code.fromDate)) || code.fromDate === null || code.fromDate === undefined) ||
       (isNaN(Date.parse(code.toDate)) || code.toDate === null || code.toDate === undefined)
@@ -215,7 +169,6 @@ function newTimeScale () {
   }
 
   function physics () {
-    scaleTimer--
     readObjectState()
     positioningPhysics()
   }
@@ -302,11 +255,6 @@ function newTimeScale () {
 
     let backgroundColor = UI_COLOR.BLACK
 
-    if (scaleTimer > 0) {
-      label2 = (thisObject.scale / MAX_SCALE * 100).toFixed(0)
-      label3 = 'SCALE'
-    }
-
     drawScaleDisplay(label1, label2, label3, 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor)
   }
 }

From b4d5c763cbab718ba4856c0a648b5a0f5781a064 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Wed, 12 Feb 2020 15:53:17 +0100
Subject: [PATCH 40/81] Scales in Time Machines Workingn well

---
 ChartsSpace/EdgeEditor.js    |  8 +--
 ChartsSpace/TimeMachine.js   | 18 -------
 ChartsSpace/TimelineChart.js | 23 ---------
 Scales/RateScale.js          | 94 ++++--------------------------------
 Scales/TimeScale.js          |  2 +-
 5 files changed, 15 insertions(+), 130 deletions(-)

diff --git a/ChartsSpace/EdgeEditor.js b/ChartsSpace/EdgeEditor.js
index ed951f8ae..ea72c3213 100644
--- a/ChartsSpace/EdgeEditor.js
+++ b/ChartsSpace/EdgeEditor.js
@@ -169,7 +169,7 @@ function newEdgeEditor () {
         break
       }
       case 'top' : {
-        if (thisObject.container.parentContainer.frame.height - dragVector.y < MIN_HEIGHT) {
+        if (thisObject.container.parentContainer.frame.height - dragVector.y < MIN_HEIGHT && dragVector.y > 0) {
           return
         }
 
@@ -199,7 +199,7 @@ function newEdgeEditor () {
         break
       }
       case 'bottom' : {
-        if (thisObject.container.parentContainer.frame.height + dragVector.y < MIN_HEIGHT) {
+        if (thisObject.container.parentContainer.frame.height + dragVector.y < MIN_HEIGHT && dragVector.y < 0) {
           return
         }
 
@@ -228,7 +228,7 @@ function newEdgeEditor () {
         break
       }
       case 'left' : {
-        if (thisObject.container.parentContainer.frame.width - dragVector.x < MIN_WIDTH) {
+        if (thisObject.container.parentContainer.frame.width - dragVector.x < MIN_WIDTH && dragVector.x > 0) {
           return
         }
         let point = {
@@ -257,7 +257,7 @@ function newEdgeEditor () {
         break
       }
       case 'right' : {
-        if (thisObject.container.parentContainer.frame.width + dragVector.x < MIN_WIDTH) {
+        if (thisObject.container.parentContainer.frame.width + dragVector.x < MIN_WIDTH && dragVector.x < 0) {
           return
         }
 
diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js
index 0f1cc99ee..89c59aa18 100644
--- a/ChartsSpace/TimeMachine.js
+++ b/ChartsSpace/TimeMachine.js
@@ -51,7 +51,6 @@ function newTimeMachine () {
   let onMouseOverEventSuscriptionId
   let onMouseNotOverEventSuscriptionId
   let timeScaleMouseOverEventSuscriptionId
-  let rateScaleValueEventSuscriptionId
   let rateScaleMouseOverEventSuscriptionId
   let timeFrameScaleEventSuscriptionId
   let timeFrameScaleMouseOverEventSuscriptionId
@@ -121,7 +120,6 @@ function newTimeMachine () {
   function finalizeRateScale () {
     if (thisObject.rateScale === undefined) { return }
 
-    thisObject.rateScale.container.eventHandler.stopListening(rateScaleValueEventSuscriptionId)
     thisObject.rateScale.container.eventHandler.stopListening(rateScaleMouseOverEventSuscriptionId)
     thisObject.rateScale.finalize()
     thisObject.rateScale = undefined
@@ -208,25 +206,9 @@ function newTimeMachine () {
     thisObject.rateScale.fitFunction = thisObject.fitFunction
     thisObject.rateScale.payload = thisObject.payload.node.rateScale.payload
 
-    rateScaleValueEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('Rate Scale Value Changed', rateScaleValueChanged)
     rateScaleMouseOverEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('onMouseOverScale', rateScaleMouseOver)
     thisObject.rateScale.initialize(timeMachineCoordinateSystem, thisObject.container, thisObject.container)
 
-    function rateScaleValueChanged (event) {
-      if (event.isUserAction === true) {
-        let currentDate = getDateFromPointAtBrowserCanvas(event.mousePosition, thisObject.container, timeMachineCoordinateSystem)
-        let currentRate = getRateFromPointAtBrowserCanvas(event.mousePosition, thisObject.container, timeMachineCoordinateSystem)
-
-        // thisObject.container.frame.height = TIME_MACHINE_HEIGHT + TIME_MACHINE_HEIGHT * event.scale
-        recalculateCoordinateSystem()
-        moveToUserPosition(thisObject.container, currentDate, currentRate, timeMachineCoordinateSystem, true, false, event.mousePosition)
-      } else {
-        // thisObject.container.frame.height = TIME_MACHINE_HEIGHT + TIME_MACHINE_HEIGHT * event.scale
-        recalculateCoordinateSystem()
-      }
-      thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
-      thisObject.container.eventHandler.raiseEvent('Upstream Rate Scale Value Changed', event)
-    }
     function rateScaleMouseOver (event) {
       thisObject.container.eventHandler.raiseEvent('onMouseOver', event)
     }
diff --git a/ChartsSpace/TimelineChart.js b/ChartsSpace/TimelineChart.js
index fa6b444aa..5bed029e2 100644
--- a/ChartsSpace/TimelineChart.js
+++ b/ChartsSpace/TimelineChart.js
@@ -38,11 +38,9 @@ function newTimelineChart () {
 
   let onMouseOverEventSuscriptionId
   let onMouseNotOverEventSuscriptionId
-  let rateScaleValueEventSuscriptionId
   let rateScaleUpstreamEventSuscriptionId
   let rateScaleMouseOverEventSuscriptionId
   let rateScaleOffsetEventSuscriptionId
-  let rateScaleUpstreamDimensionsEventSuscriptionId
   let timeFrameScaleEventSuscriptionId
   let timeFrameScaleMouseOverEventSuscriptionId
   let scaleChangedEventSubscriptionId
@@ -125,10 +123,8 @@ function newTimelineChart () {
     if (thisObject.rateScale === undefined) { return }
 
     thisObject.rateScale.container.eventHandler.stopListening(rateScaleOffsetEventSuscriptionId)
-    thisObject.rateScale.container.eventHandler.stopListening(rateScaleValueEventSuscriptionId)
     thisObject.rateScale.container.eventHandler.stopListening(rateScaleMouseOverEventSuscriptionId)
     thisObject.container.parentContainer.eventHandler.stopListening(rateScaleUpstreamEventSuscriptionId)
-    thisObject.container.parentContainer.eventHandler.stopListening(rateScaleUpstreamDimensionsEventSuscriptionId)
     thisObject.rateScale.finalize()
     thisObject.rateScale = undefined
 
@@ -182,22 +178,9 @@ function newTimelineChart () {
     thisObject.rateScale.payload = thisObject.payload.node.rateScale.payload
 
     rateScaleOffsetEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('Rate Scale Offset Changed', rateScaleOffsetChanged)
-    rateScaleValueEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('Rate Scale Value Changed', rateScaleValueChanged)
     rateScaleMouseOverEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('onMouseOverScale', rateScaleMouseOver)
-    rateScaleUpstreamEventSuscriptionId = thisObject.container.parentContainer.eventHandler.listenToEvent('Upstream Rate Scale Value Changed', rateScaleUpstreamChanged)
-    rateScaleUpstreamDimensionsEventSuscriptionId = thisObject.container.parentContainer.eventHandler.listenToEvent('Dimmensions Changed', rateScaleUpstreamDimensioinsChanged)
     thisObject.rateScale.initialize(timelineChartCoordinateSystem, thisObject.container.parentContainer, thisObject.container)
 
-    function rateScaleUpstreamDimensioinsChanged () {
-      thisObject.container.frame.height = TIME_MACHINE_HEIGHT + TIME_MACHINE_HEIGHT * thisObject.rateScale.scale
-      recalculateCoordinateSystem()
-      thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
-    }
-
-    function rateScaleUpstreamChanged (event) {
-      // thisObject.rateScale.setScale(event.scale)
-    }
-
     function rateScaleOffsetChanged (event) {
       if (thisObject.container.frame.offset.y !== event.offset) {
         thisObject.container.frame.offset.y = event.offset
@@ -205,12 +188,6 @@ function newTimelineChart () {
       }
     }
 
-    function rateScaleValueChanged (event) {
-      thisObject.container.frame.height = TIME_MACHINE_HEIGHT + TIME_MACHINE_HEIGHT * event.scale
-      recalculateCoordinateSystem()
-      thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
-    }
-
     function rateScaleMouseOver (event) {
       thisObject.container.eventHandler.raiseEvent('onChildrenMouseOver', event)
     }
diff --git a/Scales/RateScale.js b/Scales/RateScale.js
index ece23b55e..82e0e18a0 100644
--- a/Scales/RateScale.js
+++ b/Scales/RateScale.js
@@ -6,13 +6,11 @@ function newRateScale () {
     rate: undefined,
     fitFunction: undefined,
     payload: undefined,
-    scale: undefined,
     offset: undefined,
     minValue: undefined,
     maxValue: undefined,
     isVisible: true,
     layersOn: undefined,
-    setScale: setScale,
     onMouseOverSomeTimeMachineContainer: onMouseOverSomeTimeMachineContainer,
     physics: physics,
     draw: draw,
@@ -22,12 +20,6 @@ function newRateScale () {
     finalize: finalize
   }
 
-  const DEFAULT_SCALE = 50
-  const STEP_SCALE = 1
-  const MIN_SCALE = 0
-  const MAX_SCALE = 100
-  const SNAP_THRESHOLD_SCALE = 1
-
   const DEFAULT_OFFSET = 0
   const STEP_OFFSET = 1
   const MIN_OFFSET = -1000
@@ -53,6 +45,7 @@ function newRateScale () {
   let onMouseWheelEventSubscriptionId
   let onMouseOverEventSubscriptionId
   let onMouseNotOverEventSubscriptionId
+  let onScaleChangedEventSubscriptionId
 
   let coordinateSystem
   let limitingContainer
@@ -66,13 +59,13 @@ function newRateScale () {
   }
 
   let offsetTimer = 0
-  let scaleTimer = 0
   return thisObject
 
   function finalize () {
     thisObject.container.eventHandler.stopListening(onMouseWheelEventSubscriptionId)
     thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
     thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
+    coordinateSystem.eventHandler.stopListening(onScaleChangedEventSubscriptionId)
 
     thisObject.container.finalize()
     thisObject.container = undefined
@@ -96,13 +89,9 @@ function newRateScale () {
     onMouseWheelEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
     onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
     onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
+    onScaleChangedEventSubscriptionId = coordinateSystem.eventHandler.listenToEvent('Scale Changed', onScaleChanged)
 
-    thisObject.scale = DEFAULT_SCALE
     readObjectState()
-
-    let event = {}
-    event.scale = thisObject.scale
-    thisObject.container.eventHandler.raiseEvent('Rate Scale Value Changed', event)
   }
 
   function onMouseOverSomeTimeMachineContainer (event) {
@@ -125,6 +114,10 @@ function newRateScale () {
     }
   }
 
+  function onScaleChanged () {
+    saveObjectState()
+  }
+
   function onMouseOver (event) {
     isMouseOver = true
     event.containerId = thisObject.container.id
@@ -134,7 +127,6 @@ function newRateScale () {
   function onMouseNotOver () {
     isMouseOver = false
     offsetTimer = 0
-    scaleTimer = 0
   }
 
   function onMouseWheel (event) {
@@ -164,7 +156,6 @@ function newRateScale () {
 
       saveObjectState()
       offsetTimer = 100
-      scaleTimer = 0
     } else {
       let factor
       let morePower = 10
@@ -178,45 +169,9 @@ function newRateScale () {
       }
 
       coordinateSystem.zoomY(factor, event, limitingContainer)
-
-      return
-      if (event.buttons === 4) { morePower = 5 } // Mouse wheel pressed.
-      delta = event.wheelDelta
-      if (delta < 0) {
-        thisObject.scale = thisObject.scale - STEP_SCALE * morePower
-        if (thisObject.scale < MIN_SCALE) { thisObject.scale = MIN_SCALE }
-      } else {
-        thisObject.scale = thisObject.scale + STEP_SCALE * morePower
-        if (thisObject.scale > MAX_SCALE) { thisObject.scale = MAX_SCALE }
-      }
-
-      finishScaleChange(event)
     }
   }
 
-  function setScale (scale) {
-    thisObject.scale = scale
-    let event = {}
-    finishScaleChange(event)
-  }
-
-  function finishScaleChange (event) {
-    if (
-      thisObject.scale <= DEFAULT_SCALE + SNAP_THRESHOLD_SCALE &&
-      thisObject.scale >= DEFAULT_SCALE - SNAP_THRESHOLD_SCALE
-    ) {
-      event.scale = DEFAULT_SCALE
-    } else {
-      event.scale = thisObject.scale
-    }
-    event.isUserAction = true
-    thisObject.container.eventHandler.raiseEvent('Rate Scale Value Changed', event)
-
-    saveObjectState()
-    offsetTimer = 0
-    scaleTimer = 100
-  }
-
   function getContainer (point) {
     if (thisObject.container.frame.isThisPointHere(point, true) === true) {
       return thisObject.container
@@ -226,11 +181,10 @@ function newRateScale () {
   function saveObjectState () {
     try {
       let code = JSON.parse(thisObject.payload.node.code)
-      code.scale = thisObject.scale / MAX_SCALE * 100
-      code.scale = code.scale.toFixed(0)
+      code.scale = undefined
       code.offset = thisObject.offset
-      code.minValue = thisObject.minValue
-      code.maxValue = thisObject.maxValue
+      code.minValue = coordinateSystem.min.y
+      code.maxValue = coordinateSystem.max.y
       thisObject.payload.node.code = JSON.stringify(code, null, 4)
     } catch (err) {
        // we ignore errors here since most likely they will be parsing errors.
@@ -241,28 +195,6 @@ function newRateScale () {
     try {
       let code = JSON.parse(thisObject.payload.node.code)
 
-      if (isNaN(code.scale) || code.scale === null || code.scale === undefined) {
-        // not using this value
-      } else {
-        code.scale = code.scale / 100 * MAX_SCALE
-        if (code.scale < MIN_SCALE) { code.scale = MIN_SCALE }
-        if (code.scale > MAX_SCALE) { code.scale = MAX_SCALE }
-
-        if (code.scale !== thisObject.scale) {
-          thisObject.scale = code.scale
-          let event = {}
-          if (
-            thisObject.scale <= DEFAULT_SCALE + SNAP_THRESHOLD_SCALE &&
-            thisObject.scale >= DEFAULT_SCALE - SNAP_THRESHOLD_SCALE
-          ) {
-            event.scale = DEFAULT_SCALE
-          } else {
-            event.scale = thisObject.scale
-          }
-          thisObject.container.eventHandler.raiseEvent('Rate Scale Value Changed', event)
-        }
-      }
-
       if (isNaN(code.offset) || code.offset === null || code.offset === undefined) {
         // not using this value
       } else {
@@ -306,7 +238,6 @@ function newRateScale () {
 
   function physics () {
     offsetTimer--
-    scaleTimer--
     readObjectState()
     positioningPhysics()
   }
@@ -438,11 +369,6 @@ function newRateScale () {
       label3 = 'OFFSET'
     }
 
-    if (scaleTimer > 0) {
-      label2 = (thisObject.scale / MAX_SCALE * 100).toFixed(0)
-      label3 = 'SCALE'
-    }
-
     drawScaleDisplay(label1, label2, label3, 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor)
   }
 }
diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js
index 60f064126..203a657ff 100644
--- a/Scales/TimeScale.js
+++ b/Scales/TimeScale.js
@@ -135,6 +135,7 @@ function newTimeScale () {
   function saveObjectState () {
     try {
       let code = JSON.parse(thisObject.payload.node.code)
+      code.scale = undefined
       code.fromDate = (new Date(coordinateSystem.min.x)).toISOString()
       code.toDate = (new Date(coordinateSystem.max.x)).toISOString()
       thisObject.payload.node.code = JSON.stringify(code, null, 4)
@@ -144,7 +145,6 @@ function newTimeScale () {
   }
 
   function readObjectState () {
-    return
     try {
       let code = JSON.parse(thisObject.payload.node.code)
 

From c270163a8326745f53489f0384e05f9bad224a75 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Wed, 12 Feb 2020 17:20:24 +0100
Subject: [PATCH 41/81] note neede

---
 Scales/RateScale.js | 1 -
 Scales/TimeScale.js | 1 -
 2 files changed, 2 deletions(-)

diff --git a/Scales/RateScale.js b/Scales/RateScale.js
index 82e0e18a0..dfecbec10 100644
--- a/Scales/RateScale.js
+++ b/Scales/RateScale.js
@@ -181,7 +181,6 @@ function newRateScale () {
   function saveObjectState () {
     try {
       let code = JSON.parse(thisObject.payload.node.code)
-      code.scale = undefined
       code.offset = thisObject.offset
       code.minValue = coordinateSystem.min.y
       code.maxValue = coordinateSystem.max.y
diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js
index 203a657ff..3a4ef74ad 100644
--- a/Scales/TimeScale.js
+++ b/Scales/TimeScale.js
@@ -135,7 +135,6 @@ function newTimeScale () {
   function saveObjectState () {
     try {
       let code = JSON.parse(thisObject.payload.node.code)
-      code.scale = undefined
       code.fromDate = (new Date(coordinateSystem.min.x)).toISOString()
       code.toDate = (new Date(coordinateSystem.max.x)).toISOString()
       thisObject.payload.node.code = JSON.stringify(code, null, 4)

From e8eaa7168fd75f226c0ee74dbd7eb4e503d1b557 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Wed, 12 Feb 2020 18:40:33 +0100
Subject: [PATCH 42/81] Performance Improvements

---
 Animation.js                         | 22 +++++++++++++---------
 Canvas.js                            | 15 ++++++++++++---
 DesignerSpace/Workspace/Workspace.js | 10 +++++++---
 Globals.js                           |  2 +-
 Utilities.js                         | 10 ++++------
 5 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/Animation.js b/Animation.js
index 53fd737a7..4042960c6 100644
--- a/Animation.js
+++ b/Animation.js
@@ -73,8 +73,9 @@ function newAnimation () {
         let mustExecute
 
         // console.clear()
-
+        let row = 0
         for (const [key, callBackFunction] of callBackFunctions.entries()) {
+          row++
           switch (key) {
             case 'Floating Space Physics':
               chanceToExecute = 50
@@ -86,14 +87,13 @@ function newAnimation () {
             }
 
           }
+          let timeConsumed = 0
           if (mustExecute === true) {
             let t0 = performance.now()
             callBackFunction()
             let t1 = performance.now()
-            let timeConsumed = t1 - t0
+            timeConsumed = t1 - t0
             if (key === 'Chart Space Draw') {
-              // console.log(key, (totalConsumption / totalCounter).toFixed(1))
-
               if (Math.random() * 100 > 99) {
                 totalConsumption = 0
                 totalCounter = 0
@@ -109,11 +109,15 @@ function newAnimation () {
         }
 
         /* Performance Check */
-
-        for (const [key, timeConsumed] of performanceMap.entries()) {
-          let percentage = timeConsumed * 100 / totalTimeConsumed
-          if (key === 'Chart Space Draw') {
-                      // console.log(key, percentage.toFixed(0))
+        if (SHOW_ANIMATION_PERFORMACE === true) {
+          row = 0
+          for (const [key, timeConsumed] of performanceMap.entries()) {
+            row++
+            labelToPrint = key + '   ' + timeConsumed.toFixed(4)
+            printLabel(labelToPrint, 10, 100 + row * 30, 1, 20, UI_COLOR.RED)
+            let percentage = timeConsumed * 100 / totalTimeConsumed
+            labelToPrint = key + '   ' + percentage.toFixed(1) + '%'
+            printLabel(labelToPrint, 300, 100 + row * 30, 1, 20, UI_COLOR.RED)
           }
         }
       } else {
diff --git a/Canvas.js b/Canvas.js
index d3e67e5d1..97a8ec5ce 100644
--- a/Canvas.js
+++ b/Canvas.js
@@ -123,7 +123,7 @@ function newCanvas () {
       animation.addCallBackFunction('CockpitSpace Physics', thisObject.cockpitSpace.physics)
       animation.addCallBackFunction('Floating Space Physics', thisObject.floatingSpace.physics)
       animation.addCallBackFunction('Chart Space Physics', thisObject.chartSpace.physics)
-      animation.addCallBackFunction('Strategy Space Physics', thisObject.designerSpace.physics)
+      animation.addCallBackFunction('Designer Space Physics', thisObject.designerSpace.physics)
       animation.addCallBackFunction('Panels Space Physics', thisObject.panelsSpace.physics)
 
       /* Spcaces Drawing */
@@ -267,6 +267,15 @@ function newCanvas () {
       }
     }
 
+    if ((event.ctrlKey === true || event.metaKey === true) && event.altKey === true && event.shiftKey === true && event.keyCode === 122) { // Dev Tool when used with F11
+      if (SHOW_ANIMATION_PERFORMACE === false) {
+        SHOW_ANIMATION_PERFORMACE = true
+      } else {
+        SHOW_ANIMATION_PERFORMACE = false
+      }
+      return
+    }
+
     if ((event.ctrlKey === true || event.metaKey === true) && event.code === 'ArrowUp') {
       thisObject.cockpitSpace.toTop()
       return
@@ -461,7 +470,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 Designer Space / */
 
       container = thisObject.designerSpace.getContainer(point)
 
@@ -566,7 +575,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 Designer Space / */
 
       container = thisObject.designerSpace.getContainer(point)
 
diff --git a/DesignerSpace/Workspace/Workspace.js b/DesignerSpace/Workspace/Workspace.js
index 657b55f13..f5d85214d 100644
--- a/DesignerSpace/Workspace/Workspace.js
+++ b/DesignerSpace/Workspace/Workspace.js
@@ -87,6 +87,8 @@ function newWorkspace () {
       }
       functionLibraryUiObjectsFromNodes.recreateWorkspace(thisObject.workspaceNode)
       thisObject.enabled = true
+
+      setInterval(saveWorkspace, 5000)
     } catch (err) {
       if (ERROR_LOG === true) { logger.write('[ERROR] initialize -> err = ' + err.stack) }
     }
@@ -108,11 +110,13 @@ function newWorkspace () {
     functionLibraryReferenceAttachDetach.referenceAttachNode(node, attachToNode, thisObject.workspaceNode.rootNodes)
   }
 
-  function physics () {
-    if (thisObject.enabled !== true) { return }
-
+  function saveWorkspace () {
     let textToSave = stringifyWorkspace()
     window.localStorage.setItem(CANVAS_APP_NAME + '.' + 'Workspace', textToSave)
+  }
+
+  function physics () {
+    if (thisObject.enabled !== true) { return }
 
     if (workingAtTask > 0) {
       circularProgressBar.physics()
diff --git a/Globals.js b/Globals.js
index a8204598e..771fecd62 100644
--- a/Globals.js
+++ b/Globals.js
@@ -119,7 +119,7 @@ let dailyFilePeriods =
 
 dailyFilePeriods = JSON.parse(dailyFilePeriods);
 
-window.AT_BREAKPOINT = false;
+SHOW_ANIMATION_PERFORMACE = false;
 
 let testUser = window.localStorage.getItem("test_user")
 let LOGGED_IN_USER_LOCAL_STORAGE_KEY
diff --git a/Utilities.js b/Utilities.js
index 6bf221203..8079fe872 100644
--- a/Utilities.js
+++ b/Utilities.js
@@ -85,7 +85,7 @@ function convertTimeFrameToName (pTimeFrame) {
 function downloadText (filename, text) {
   let element = document.createElement('a')
   element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
-  element.setAttribute('downloadText', filename)
+  element.setAttribute('download', filename)
   element.style.display = 'none'
   document.body.appendChild(element)
   element.click()
@@ -228,16 +228,14 @@ function removeTime (datetime) {
   return dateOnly
 }
 
-function printLabel (labelToPrint, x, y, opacity, fontSize) {
+function printLabel (labelToPrint, x, y, opacity, fontSize, color) {
   let labelPoint
+  if (color === undefined) { color = UI_COLOR.DARK }
 
   browserCanvasContext.font = fontSize + 'px ' + UI_FONT.PRIMARY
-
   let label = '' + labelToPrint
-
   let xOffset = label.length / 2 * fontSize * FONT_ASPECT_RATIO
-
-  browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', ' + opacity + ')'
+  browserCanvasContext.fillStyle = 'rgba(' + color + ', ' + opacity + ')'
   browserCanvasContext.fillText(label, x, y)
 }
 

From 1cef961f24511702fada64bb277bae54cee08d2c Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Wed, 12 Feb 2020 18:51:23 +0100
Subject: [PATCH 43/81] bug fixed

---
 Canvas.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Canvas.js b/Canvas.js
index 97a8ec5ce..be1c4f70d 100644
--- a/Canvas.js
+++ b/Canvas.js
@@ -276,12 +276,12 @@ function newCanvas () {
       return
     }
 
-    if ((event.ctrlKey === true || event.metaKey === true) && event.code === 'ArrowUp') {
+    if (event.shiftKey === true && (event.ctrlKey === true || event.metaKey === true) && event.code === 'ArrowUp') {
       thisObject.cockpitSpace.toTop()
       return
     }
 
-    if ((event.ctrlKey === true || event.metaKey === true) && event.code === 'ArrowDown') {
+    if (event.shiftKey === true && (event.ctrlKey === true || event.metaKey === true) && event.code === 'ArrowDown') {
       thisObject.cockpitSpace.toBottom()
       return
     }

From 2fc39c76e873ce3cd9d62882ae586454e4ed01c5 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Wed, 12 Feb 2020 19:15:04 +0100
Subject: [PATCH 44/81] Bug fixed

---
 Canvas.js               | 53 ++++++++++++++++++++++++-----------------
 Spaces/ChartSpace.js    |  6 ++++-
 Spaces/CockpitSpace.js  |  1 +
 Spaces/DesignerSpace.js |  5 +++-
 Spaces/FloatingSpace.js |  6 ++++-
 Spaces/PanelsSpace.js   |  2 ++
 Spaces/TopSpace.js      | 11 ---------
 7 files changed, 48 insertions(+), 36 deletions(-)

diff --git a/Canvas.js b/Canvas.js
index be1c4f70d..d74198e6a 100644
--- a/Canvas.js
+++ b/Canvas.js
@@ -884,36 +884,45 @@ function newCanvas () {
             y: dragVector.upY - dragVector.downY
           }
 
-          if (viewPortBeingDragged) {
-            canvas.chartSpace.viewport.displace(displaceVector)
-          }
+          canvas.chartSpace.viewport.displace(displaceVector)
         }
         if (containerDragStarted) {
           if (containerBeingDragged !== undefined) {
-            let downCopy = {
-              x: dragVector.downX,
-              y: dragVector.downY
-            }
+            if (containerBeingDragged.space === 'Charting Space') {
+              let downCopy = {
+                x: dragVector.downX,
+                y: dragVector.downY
+              }
 
-            let downNoZoom
-            downNoZoom = canvas.chartSpace.viewport.unTransformThisPoint(downCopy)
+              let downNoZoom
+              downNoZoom = canvas.chartSpace.viewport.unTransformThisPoint(downCopy)
 
-            let upCopy = {
-              x: dragVector.upX,
-              y: dragVector.upY
-            }
+              let upCopy = {
+                x: dragVector.upX,
+                y: dragVector.upY
+              }
 
-            let upNoZoom
-            upNoZoom = canvas.chartSpace.viewport.unTransformThisPoint(upCopy)
+              let upNoZoom
+              upNoZoom = canvas.chartSpace.viewport.unTransformThisPoint(upCopy)
 
-            displaceVector = {
-              x: upNoZoom.x - downNoZoom.x,
-              y: upNoZoom.y - downNoZoom.y
-            }
+              displaceVector = {
+                x: upNoZoom.x - downNoZoom.x,
+                y: upNoZoom.y - downNoZoom.y
+              }
 
-            let moveSucceed = containerBeingDragged.displace(displaceVector)
-            if (moveSucceed === false) {
-              deactivateDragging(event)
+              let moveSucceed = containerBeingDragged.displace(displaceVector)
+              if (moveSucceed === false) {
+                deactivateDragging(event)
+              }
+            } else {
+              let displaceVector = {
+                x: dragVector.upX - dragVector.downX,
+                y: dragVector.upY - dragVector.downY
+              }
+              let moveSucceed = containerBeingDragged.displace(displaceVector)
+              if (moveSucceed === false) {
+                deactivateDragging(event)
+              }
             }
           }
         }
diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js
index 44c85fe49..3636bd1bc 100644
--- a/Spaces/ChartSpace.js
+++ b/Spaces/ChartSpace.js
@@ -142,9 +142,13 @@ function newChartSpace () {
         }
       }
     }
-    if (containerFound !== undefined) { return containerFound }
+    if (containerFound !== undefined) {
+      containerFound.space = 'Charting Space'
+      return containerFound
+    }
 
     if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+      thisObject.container.space = 'Charting Space'
       return thisObject.container
     } else {
       return undefined
diff --git a/Spaces/CockpitSpace.js b/Spaces/CockpitSpace.js
index e7ac6a068..e866d859d 100644
--- a/Spaces/CockpitSpace.js
+++ b/Spaces/CockpitSpace.js
@@ -173,6 +173,7 @@
      // if (container !== undefined) { return container }
 
      if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+       thisObject.container.space = 'Cockpit Space'
        return thisObject.container
      } else {
        return undefined
diff --git a/Spaces/DesignerSpace.js b/Spaces/DesignerSpace.js
index add5dd2f2..bf6a78ee5 100644
--- a/Spaces/DesignerSpace.js
+++ b/Spaces/DesignerSpace.js
@@ -280,7 +280,10 @@ function newDesignerSpace () {
 
     if (thisObject.sidePanel !== undefined) {
       container = thisObject.sidePanel.getContainer(point)
-      if (container !== undefined) { return container }
+      if (container !== undefined) {
+        container.space = 'Designer Space'
+        return container
+      }
     }
 
     return
diff --git a/Spaces/FloatingSpace.js b/Spaces/FloatingSpace.js
index 0737e8ed0..bd84fd983 100644
--- a/Spaces/FloatingSpace.js
+++ b/Spaces/FloatingSpace.js
@@ -237,9 +237,13 @@ function newFloatingSpace () {
     let container
 
     container = thisObject.floatingLayer.getContainer(point)
-    if (container !== undefined) { return container }
+    if (container !== undefined) {
+      container.space = 'Floating Space'
+      return container
+    }
 
     if (visible === true) {
+      thisObject.container.space = 'Floating Space'
       return thisObject.container
     }
   }
diff --git a/Spaces/PanelsSpace.js b/Spaces/PanelsSpace.js
index efe7e03b9..6efa86a7a 100644
--- a/Spaces/PanelsSpace.js
+++ b/Spaces/PanelsSpace.js
@@ -343,9 +343,11 @@ function newPanelsSpace () {
         }
       }
       if (container !== undefined) {
+        container.space = 'Panels Space'
         return container
       }
     }
+    thisObject.container.space = 'Panels Space'
     return thisObject.container
   }
 }
diff --git a/Spaces/TopSpace.js b/Spaces/TopSpace.js
index 8ed4149c4..ff1b7786f 100644
--- a/Spaces/TopSpace.js
+++ b/Spaces/TopSpace.js
@@ -50,18 +50,7 @@ function newTopSpace () {
   }
 
   function getContainer (point) {
-    let container
-    return
 
-    container = thisObject.currentEvent.getContainer(point)
-    if (container !== undefined) { return container }
-
-    container = thisObject.login.getContainer(point)
-    if (container !== undefined) { return container }
-
-        /* The point does not belong to any inner container, so we return the current container. */
-
-    return thisObject.container
   }
 
   function draw () {

From cffeb5c16ad5fb2859ba6aafb0f47426c603be5f Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Wed, 12 Feb 2020 21:53:39 +0100
Subject: [PATCH 45/81] Bug Fixes

---
 ChartsSpace/TimelineChart.js | 56 ++++++++++++++++++------------------
 Globals.js                   |  2 +-
 Scales/RateScale.js          |  3 ++
 3 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/ChartsSpace/TimelineChart.js b/ChartsSpace/TimelineChart.js
index 5bed029e2..81ae1e2d0 100644
--- a/ChartsSpace/TimelineChart.js
+++ b/ChartsSpace/TimelineChart.js
@@ -63,7 +63,7 @@ function newTimelineChart () {
   }
 
   function finalize () {
-    coordinateSystem.eventHandler.stopListening(timelineChartCoordinateSystem)
+    coordinateSystem.eventHandler.stopListening(scaleChangedEventSubscriptionId)
 
     if (thisObject.layersManager !== undefined) {
       finalizeLayersManager()
@@ -131,8 +131,8 @@ function newTimelineChart () {
     /* Resets the local container with the dimessions of its parent, the Time Machine */
     thisObject.container.frame.position.x = 0
     thisObject.container.frame.position.y = 0
-    thisObject.container.frame.height = TIME_MACHINE_HEIGHT
-    thisObject.container.frame.width = TIME_MACHINE_WIDTH
+    thisObject.container.frame.height = thisObject.container.parentContainer.frame.height
+    thisObject.container.frame.width = thisObject.container.parentContainer.frame.width
   }
 
   function initialize (pTimeMachineCoordinateSystem) {
@@ -140,7 +140,7 @@ function newTimelineChart () {
 
     timeMachineCoordinateSystem = pTimeMachineCoordinateSystem
     coordinateSystem = timeMachineCoordinateSystem
-    onScaleChanged()
+    initializeCoordinateSystem()
 
     timeFrame = INITIAL_TIME_PERIOD
 
@@ -149,6 +149,30 @@ function newTimelineChart () {
     scaleChangedEventSubscriptionId = timeMachineCoordinateSystem.eventHandler.listenToEvent('Scale Changed', onScaleChanged)
   }
 
+  function initializeCoordinateSystem () {
+    let minValue = {
+      x: timeMachineCoordinateSystem.min.x,
+      y: 0
+    }
+
+    let maxValue = {
+      x: timeMachineCoordinateSystem.max.x,
+      y: nextPorwerOf10(MAX_DEFAULT_RATE_SCALE_VALUE) / 4
+    }
+
+    if (thisObject.rateScale !== undefined) {
+      minValue.y = thisObject.rateScale.minValue
+      maxValue.y = thisObject.rateScale.maxValue
+    }
+
+    timelineChartCoordinateSystem.initialize(
+          minValue,
+          maxValue,
+          thisObject.container.frame.width,
+          thisObject.container.frame.height
+      )
+  }
+
   function initializeLayersManager () {
     let owner = thisObject.payload.node.payload.parentNode.id // The real owner is the Time Machine
     layersPanelHandle = canvas.panelsSpace.createNewPanel('Layers Panel', undefined, owner)
@@ -377,28 +401,4 @@ function newTimelineChart () {
   function drawChartsBackground () {
     drawContainerBackground(thisObject.container, UI_COLOR.WHITE, 0, thisObject.fitFunction)
   }
-
-  function recalculateCoordinateSystem () {
-    let minValue = {
-      x: timelineChartCoordinateSystem.min.x,
-      y: 0
-    }
-
-    let maxValue = {
-      x: timelineChartCoordinateSystem.max.x,
-      y: nextPorwerOf10(MAX_DEFAULT_RATE_SCALE_VALUE) / 4
-    }
-
-    if (thisObject.rateScale !== undefined) {
-      minValue.y = thisObject.rateScale.minValue
-      maxValue.y = thisObject.rateScale.maxValue
-    }
-
-    timelineChartCoordinateSystem.initialize(
-          minValue,
-          maxValue,
-          thisObject.container.frame.width,
-          thisObject.container.frame.height
-      )
-  }
 }
diff --git a/Globals.js b/Globals.js
index 771fecd62..8ec77286f 100644
--- a/Globals.js
+++ b/Globals.js
@@ -209,7 +209,7 @@ We define here the size of the chartSpace. It has to bee enough big in order to
 */
 
 const TIME_MACHINE_WIDTH = 250;
-const TIME_MACHINE_HEIGHT = 250 / 50;
+const TIME_MACHINE_HEIGHT = 50;
 
 let mediaRecorder // to downloadText canvas animation as a mediaRecorder
 let areWeRecording = false
diff --git a/Scales/RateScale.js b/Scales/RateScale.js
index dfecbec10..228dd2c5f 100644
--- a/Scales/RateScale.js
+++ b/Scales/RateScale.js
@@ -342,6 +342,8 @@ function newRateScale () {
 
   function drawScaleBox () {
     if (thisObject.rate === undefined) { return }
+    if (thisObject.payload === undefined) { return }
+    if (thisObject.payload.node === undefined) { return }
 
     let rate = thisObject.rate
 
@@ -357,6 +359,7 @@ function newRateScale () {
     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.designerSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
     let icon2 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.type)

From 60bf0ef7cab1cf05a616d44dac3657dd90b0b4a8 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Thu, 13 Feb 2020 08:30:34 +0100
Subject: [PATCH 46/81] Bug fixed

---
 ChartsSpace/TimelineChart.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/ChartsSpace/TimelineChart.js b/ChartsSpace/TimelineChart.js
index 81ae1e2d0..69e2d65ed 100644
--- a/ChartsSpace/TimelineChart.js
+++ b/ChartsSpace/TimelineChart.js
@@ -347,10 +347,16 @@ function newTimelineChart () {
     if (thisObject.payload.node.rateScale === undefined && thisObject.rateScale !== undefined) {
       finalizeRateScale()
       coordinateSystem = timeMachineCoordinateSystem
+      if (thisObject.plotterManager !== undefined) {
+        thisObject.plotterManager.setCoordinateSystem(coordinateSystem)
+      }
     }
     if (thisObject.payload.node.rateScale !== undefined && thisObject.rateScale === undefined) {
       initializeRateScale()
       coordinateSystem = timelineChartCoordinateSystem
+      if (thisObject.plotterManager !== undefined) {
+        thisObject.plotterManager.setCoordinateSystem(coordinateSystem)
+      }
     }
     if (thisObject.payload.node.timeFrameScale === undefined && thisObject.timeFrameScale !== undefined) {
       finalizeTimeFrameScale()

From 54b27cd584ba024987d2329f6cab32d69dab3889 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Thu, 13 Feb 2020 11:09:59 +0100
Subject: [PATCH 47/81] Dragging implenented on rate scale

---
 ChartsSpace/TimeMachine.js   |  6 +++---
 ChartsSpace/TimelineChart.js |  4 ++--
 Scales/RateScale.js          | 35 ++++++++++++++++++++++++++++++++++-
 3 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js
index 89c59aa18..6435b4270 100644
--- a/ChartsSpace/TimeMachine.js
+++ b/ChartsSpace/TimeMachine.js
@@ -245,7 +245,7 @@ function newTimeMachine () {
     let container
 
     if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) {
-      container = thisObject.rateScale.getContainer(point)
+      container = thisObject.rateScale.getContainer(point, purpose)
       if (container !== undefined) {
         if (container.isForThisPurpose(purpose)) {
           return container
@@ -254,7 +254,7 @@ function newTimeMachine () {
     }
 
     if (thisObject.timeScale !== undefined && thisObject.timeScale.isVisible === true) {
-      container = thisObject.timeScale.getContainer(point)
+      container = thisObject.timeScale.getContainer(point, purpose)
       if (container !== undefined) {
         if (container.isForThisPurpose(purpose)) {
           return container
@@ -263,7 +263,7 @@ function newTimeMachine () {
     }
 
     if (thisObject.timeFrameScale !== undefined && thisObject.timeFrameScale.isVisible === true) {
-      container = thisObject.timeFrameScale.getContainer(point)
+      container = thisObject.timeFrameScale.getContainer(point, purpose)
       if (container !== undefined) {
         if (container.isForThisPurpose(purpose)) {
           return container
diff --git a/ChartsSpace/TimelineChart.js b/ChartsSpace/TimelineChart.js
index 69e2d65ed..a7ce14665 100644
--- a/ChartsSpace/TimelineChart.js
+++ b/ChartsSpace/TimelineChart.js
@@ -293,7 +293,7 @@ function newTimelineChart () {
     let container
 
     if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) {
-      container = thisObject.rateScale.getContainer(point)
+      container = thisObject.rateScale.getContainer(point, purpose)
       if (container !== undefined) {
         if (container.isForThisPurpose(purpose)) {
           return container
@@ -302,7 +302,7 @@ function newTimelineChart () {
     }
 
     if (thisObject.timeFrameScale !== undefined && thisObject.timeFrameScale.isVisible === true) {
-      container = thisObject.timeFrameScale.getContainer(point)
+      container = thisObject.timeFrameScale.getContainer(point, purpose)
       if (container !== undefined) {
         if (container.isForThisPurpose(purpose)) {
           return container
diff --git a/Scales/RateScale.js b/Scales/RateScale.js
index 228dd2c5f..1c7290efd 100644
--- a/Scales/RateScale.js
+++ b/Scales/RateScale.js
@@ -39,6 +39,10 @@ function newRateScale () {
 
   thisObject.offset = DEFAULT_OFFSET
 
+  let draggeableContainer = newContainer()
+  draggeableContainer.initialize(MODULE_NAME + ' Draggeable')
+  draggeableContainer.isDraggeable = true
+
   let visible = true
   let isMouseOver
 
@@ -172,8 +176,12 @@ function newRateScale () {
     }
   }
 
-  function getContainer (point) {
+  function getContainer (point, purpose) {
     if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+      if (purpose === GET_CONTAINER_PURPOSE.DRAGGING) {
+        return draggeableContainer
+      }
+
       return thisObject.container
     }
   }
@@ -239,6 +247,31 @@ function newRateScale () {
     offsetTimer--
     readObjectState()
     positioningPhysics()
+    draggingPhysics()
+  }
+
+  function draggingPhysics () {
+    if (draggeableContainer.frame.position.y === 0) { return }
+
+    let dragVector = {
+      x: draggeableContainer.frame.position.x,
+      y: draggeableContainer.frame.position.y
+    }
+
+    draggeableContainer.frame.position.x = 0
+    draggeableContainer.frame.position.y = 0
+
+    let point = {
+      x: 0,
+      y: -dragVector.y
+    }
+
+    let newMaxRate = getRateFromPointAtContainer(point, limitingContainer, coordinateSystem)
+    let yDifferenceMaxMin = coordinateSystem.max.y - coordinateSystem.min.y
+
+    coordinateSystem.min.y = newMaxRate - yDifferenceMaxMin
+    coordinateSystem.max.y = newMaxRate
+    coordinateSystem.recalculateScale()
   }
 
   function positioningPhysics () {

From a3fef54edd098d92f386208b9ae92adf315f5200 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Thu, 13 Feb 2020 11:23:24 +0100
Subject: [PATCH 48/81] bug fixed

---
 ChartsSpace/TimeMachine.js   | 2 +-
 ChartsSpace/TimelineChart.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js
index 6435b4270..170dd6d3a 100644
--- a/ChartsSpace/TimeMachine.js
+++ b/ChartsSpace/TimeMachine.js
@@ -461,7 +461,7 @@ function newTimeMachine () {
       timelineChart.container.frame.height = thisObject.container.frame.height
       timelineChart.container.frame.position.x = 0
       timelineChart.container.frame.position.y = 0
-      timelineChart.initialize(timeMachineCoordinateSystem)
+      timelineChart.initialize(timeMachineCoordinateSystem, timeFrame)
 
       /* we will store the event suscription id as a property of the timelineChart, to avoid keeping it an a separate array */
       timelineChart.onChildrenMouseOverEventSuscriptionId = timelineChart.container.eventHandler.listenToEvent('onChildrenMouseOver', onChildrenMouseOver)
diff --git a/ChartsSpace/TimelineChart.js b/ChartsSpace/TimelineChart.js
index a7ce14665..b3b20e19e 100644
--- a/ChartsSpace/TimelineChart.js
+++ b/ChartsSpace/TimelineChart.js
@@ -135,14 +135,14 @@ function newTimelineChart () {
     thisObject.container.frame.width = thisObject.container.parentContainer.frame.width
   }
 
-  function initialize (pTimeMachineCoordinateSystem) {
+  function initialize (pTimeMachineCoordinateSystem, pTimeFrame) {
      /* We load the logow we will need for the background. */
 
     timeMachineCoordinateSystem = pTimeMachineCoordinateSystem
     coordinateSystem = timeMachineCoordinateSystem
     initializeCoordinateSystem()
 
-    timeFrame = INITIAL_TIME_PERIOD
+    timeFrame = pTimeFrame
 
     onMouseOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
     onMouseNotOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)

From 5c50f92899d073be38b53fcc88f36f4896694759 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Thu, 13 Feb 2020 11:32:23 +0100
Subject: [PATCH 49/81] Scale being displayed

---
 Scales/RateScale.js | 59 ++++++++++++---------------------------------
 1 file changed, 16 insertions(+), 43 deletions(-)

diff --git a/Scales/RateScale.js b/Scales/RateScale.js
index 1c7290efd..aa684f1a4 100644
--- a/Scales/RateScale.js
+++ b/Scales/RateScale.js
@@ -62,7 +62,7 @@ function newRateScale () {
     }
   }
 
-  let offsetTimer = 0
+  let scaleDisplayTimer = 0
   return thisObject
 
   function finalize () {
@@ -130,50 +130,23 @@ function newRateScale () {
 
   function onMouseNotOver () {
     isMouseOver = false
-    offsetTimer = 0
+    scaleDisplayTimer = 0
   }
 
   function onMouseWheel (event) {
-    if (event.shiftKey === true) {
-      let morePower = 1
-      if (event.buttons === 4) { morePower = 10 } // Mouse wheel pressed.
-      let delta = event.wheelDelta
-      if (delta < 0) {
-        thisObject.offset = thisObject.offset - STEP_OFFSET * morePower
-        if (thisObject.offset < MIN_OFFSET) { thisObject.offset = STEP_OFFSET }
-      } else {
-        thisObject.offset = thisObject.offset + STEP_OFFSET * morePower
-        if (thisObject.offset > MAX_OFFSET) { thisObject.offset = MAX_OFFSET }
-      }
+    let factor
+    let morePower = 10
+    if (event.buttons === 4) { morePower = 1 } // Mouse wheel pressed.
 
-      if (
-        thisObject.offset <= DEFAULT_OFFSET + SNAP_THRESHOLD_OFFSET &&
-        thisObject.offset >= DEFAULT_OFFSET - SNAP_THRESHOLD_OFFSET
-      ) {
-        event.offset = 0
-      } else {
-        event.offset = -thisObject.offset
-      }
-
-      event.isUserAction = true
-      thisObject.container.eventHandler.raiseEvent('Rate Scale Offset Changed', event)
-
-      saveObjectState()
-      offsetTimer = 100
+    let delta = event.wheelDelta
+    if (delta < 0) {
+      factor = -0.01 * morePower
     } else {
-      let factor
-      let morePower = 10
-      if (event.buttons === 4) { morePower = 1 } // Mouse wheel pressed.
-
-      let delta = event.wheelDelta
-      if (delta < 0) {
-        factor = -0.01 * morePower
-      } else {
-        factor = 0.01 * morePower
-      }
-
-      coordinateSystem.zoomY(factor, event, limitingContainer)
+      factor = 0.01 * morePower
     }
+
+    coordinateSystem.zoomY(factor, event, limitingContainer)
+    scaleDisplayTimer = 100
   }
 
   function getContainer (point, purpose) {
@@ -244,7 +217,7 @@ function newRateScale () {
   }
 
   function physics () {
-    offsetTimer--
+    scaleDisplayTimer--
     readObjectState()
     positioningPhysics()
     draggingPhysics()
@@ -399,9 +372,9 @@ function newRateScale () {
 
     let backgroundColor = UI_COLOR.BLACK
 
-    if (offsetTimer > 0) {
-      label2 = thisObject.offset.toFixed(0)
-      label3 = 'OFFSET'
+    if (scaleDisplayTimer > 0) {
+      label2 = (coordinateSystem.scale.y * 10000).toFixed(2)
+      label3 = 'SCALE'
     }
 
     drawScaleDisplay(label1, label2, label3, 0, 0, 0, icon1, icon2, thisObject.container, backgroundColor)

From d638ef2820ed701957cba5f68c743ea807b10751 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Thu, 13 Feb 2020 11:41:07 +0100
Subject: [PATCH 50/81] offest concept removed

---
 Scales/RateScale.js | 33 +--------------------------------
 1 file changed, 1 insertion(+), 32 deletions(-)

diff --git a/Scales/RateScale.js b/Scales/RateScale.js
index aa684f1a4..17053f6e8 100644
--- a/Scales/RateScale.js
+++ b/Scales/RateScale.js
@@ -6,7 +6,6 @@ function newRateScale () {
     rate: undefined,
     fitFunction: undefined,
     payload: undefined,
-    offset: undefined,
     minValue: undefined,
     maxValue: undefined,
     isVisible: true,
@@ -20,12 +19,6 @@ function newRateScale () {
     finalize: finalize
   }
 
-  const DEFAULT_OFFSET = 0
-  const STEP_OFFSET = 1
-  const MIN_OFFSET = -1000
-  const MAX_OFFSET = 1000
-  const SNAP_THRESHOLD_OFFSET = 3
-
   thisObject.container = newContainer()
   thisObject.container.initialize(MODULE_NAME)
 
@@ -37,8 +30,6 @@ function newRateScale () {
   thisObject.container.frame.width = UI_PANEL.WIDTH.NORMAL
   thisObject.container.frame.height = 40
 
-  thisObject.offset = DEFAULT_OFFSET
-
   let draggeableContainer = newContainer()
   draggeableContainer.initialize(MODULE_NAME + ' Draggeable')
   draggeableContainer.isDraggeable = true
@@ -162,7 +153,6 @@ function newRateScale () {
   function saveObjectState () {
     try {
       let code = JSON.parse(thisObject.payload.node.code)
-      code.offset = thisObject.offset
       code.minValue = coordinateSystem.min.y
       code.maxValue = coordinateSystem.max.y
       thisObject.payload.node.code = JSON.stringify(code, null, 4)
@@ -175,27 +165,6 @@ function newRateScale () {
     try {
       let code = JSON.parse(thisObject.payload.node.code)
 
-      if (isNaN(code.offset) || code.offset === null || code.offset === undefined) {
-        // not using this value
-      } else {
-        if (code.offset < MIN_OFFSET) { code.offset = MIN_OFFSET }
-        if (code.offset > MAX_OFFSET) { code.offset = MAX_OFFSET }
-
-        if (code.offset !== thisObject.offset) {
-          thisObject.offset = code.offset
-          let event = {}
-          if (
-            thisObject.offset <= DEFAULT_OFFSET + SNAP_THRESHOLD_OFFSET &&
-            thisObject.offset >= DEFAULT_OFFSET - SNAP_THRESHOLD_OFFSET
-          ) {
-            event.offset = 0
-          } else {
-            event.offset = -thisObject.offset
-          }
-          thisObject.container.eventHandler.raiseEvent('Rate Scale Offset Changed', event)
-        }
-      }
-
       if (
       (isNaN(code.minValue) || code.minValue === null || code.minValue === undefined) ||
       (isNaN(code.maxValue) || code.maxValue === null || code.maxValue === undefined)
@@ -295,7 +264,7 @@ function newRateScale () {
     /* Mouse Position Rate Calculation */
     let ratePoint = {
       x: 0,
-      y: mouse.position.y + thisObject.offset
+      y: mouse.position.y
     }
 
     thisObject.rate = getRateFromPointAtBrowserCanvas(ratePoint, rateCalculationsContainer, coordinateSystem)

From 1102baa30ea1b83777f655c0d47ebdad68d0265b Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Thu, 13 Feb 2020 12:08:13 +0100
Subject: [PATCH 51/81] Bug Fixed

---
 Plotter.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/Plotter.js b/Plotter.js
index 0f90ee3c5..32a4f3ff4 100644
--- a/Plotter.js
+++ b/Plotter.js
@@ -8,6 +8,7 @@ function newPlotter () {
   let thisObject = {
     currentRecord: undefined,
     container: undefined,
+    fitFunction: undefined,
     onDailyFileLoaded: onDailyFileLoaded,
     initialize: initialize,
     finalize: finalize,
@@ -67,6 +68,7 @@ function newPlotter () {
       marketFiles.eventHandler.stopListening(marketFilesUpdatedEventSubscriptionId)
       dailyFiles.eventHandler.stopListening(dailyFilesUpdatedEventSubscriptionId)
       thisObject.container.eventHandler.stopListening(onDisplaceEventSubscriptionId)
+      thisObject.fitFunction = undefined
 
       /* Clear References */
       marketFiles = undefined
@@ -724,6 +726,7 @@ function newPlotter () {
               }
               /* We make sure the points do not fall outside the viewport visible area. This step allways need to be done.  */
               dataPoint = canvas.chartSpace.viewport.fitIntoVisibleArea(dataPoint)
+              dataPoint = thisObject.fitFunction(dataPoint)
               if (k === 0) {
                 browserCanvasContext.moveTo(dataPoint.x, dataPoint.y)
               } else {

From c23ab1859217c5c22893917a022463eef4dd09b5 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Thu, 13 Feb 2020 12:17:16 +0100
Subject: [PATCH 52/81] bug fixed

---
 ChartsSpace/EdgeEditor.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ChartsSpace/EdgeEditor.js b/ChartsSpace/EdgeEditor.js
index ea72c3213..de0f5dfc2 100644
--- a/ChartsSpace/EdgeEditor.js
+++ b/ChartsSpace/EdgeEditor.js
@@ -147,6 +147,7 @@ function newEdgeEditor () {
             /* 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.eventHandler.raiseEvent('onDisplace')
             break
           }
           case 'right mouse button': {

From fbd78cd413f3e27ca0e591d1ca537e3efa77f0e8 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Thu, 13 Feb 2020 12:53:00 +0100
Subject: [PATCH 53/81] Removing offSet

---
 ChartsSpace/TimelineChart.js | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/ChartsSpace/TimelineChart.js b/ChartsSpace/TimelineChart.js
index b3b20e19e..6da054d46 100644
--- a/ChartsSpace/TimelineChart.js
+++ b/ChartsSpace/TimelineChart.js
@@ -40,7 +40,6 @@ function newTimelineChart () {
   let onMouseNotOverEventSuscriptionId
   let rateScaleUpstreamEventSuscriptionId
   let rateScaleMouseOverEventSuscriptionId
-  let rateScaleOffsetEventSuscriptionId
   let timeFrameScaleEventSuscriptionId
   let timeFrameScaleMouseOverEventSuscriptionId
   let scaleChangedEventSubscriptionId
@@ -122,7 +121,6 @@ function newTimelineChart () {
   function finalizeRateScale () {
     if (thisObject.rateScale === undefined) { return }
 
-    thisObject.rateScale.container.eventHandler.stopListening(rateScaleOffsetEventSuscriptionId)
     thisObject.rateScale.container.eventHandler.stopListening(rateScaleMouseOverEventSuscriptionId)
     thisObject.container.parentContainer.eventHandler.stopListening(rateScaleUpstreamEventSuscriptionId)
     thisObject.rateScale.finalize()
@@ -201,17 +199,9 @@ function newTimelineChart () {
     thisObject.rateScale.fitFunction = thisObject.fitFunction
     thisObject.rateScale.payload = thisObject.payload.node.rateScale.payload
 
-    rateScaleOffsetEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('Rate Scale Offset Changed', rateScaleOffsetChanged)
     rateScaleMouseOverEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('onMouseOverScale', rateScaleMouseOver)
     thisObject.rateScale.initialize(timelineChartCoordinateSystem, thisObject.container.parentContainer, thisObject.container)
 
-    function rateScaleOffsetChanged (event) {
-      if (thisObject.container.frame.offset.y !== event.offset) {
-        thisObject.container.frame.offset.y = event.offset
-        thisObject.container.eventHandler.raiseEvent('onDisplace')
-      }
-    }
-
     function rateScaleMouseOver (event) {
       thisObject.container.eventHandler.raiseEvent('onChildrenMouseOver', event)
     }
@@ -244,6 +234,8 @@ function newTimelineChart () {
   function onScaleChanged () {
     timelineChartCoordinateSystem.min.x = timeMachineCoordinateSystem.min.x
     timelineChartCoordinateSystem.max.x = timeMachineCoordinateSystem.max.x
+    timelineChartCoordinateSystem.maxHeight = timeMachineCoordinateSystem.maxHeight
+    timelineChartCoordinateSystem.maxWidth = timeMachineCoordinateSystem.maxWidth
     timelineChartCoordinateSystem.recalculateScale()
   }
 

From f670bb2ffc7dc1778b1fcc2e6676f5d9ae492621 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Thu, 13 Feb 2020 13:27:44 +0100
Subject: [PATCH 54/81] All working good (scales)

---
 ChartsSpace/CoordinateSystem.js |  4 ++--
 ChartsSpace/EdgeEditor.js       | 12 ++++++++++--
 ChartsSpace/TimelineChart.js    |  5 ++++-
 Scales/RateScale.js             | 27 +++++++++++++++++++++++++++
 4 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/ChartsSpace/CoordinateSystem.js b/ChartsSpace/CoordinateSystem.js
index 2652cbf0f..18e51602f 100644
--- a/ChartsSpace/CoordinateSystem.js
+++ b/ChartsSpace/CoordinateSystem.js
@@ -95,12 +95,12 @@ function newCoordinateSystem () {
     }
   }
 
-  function recalculateScale () {
+  function recalculateScale (event) {
     /* Defines the initial Zoom level at center position. */
     thisObject.scale.x = thisObject.maxWidth / (thisObject.max.x - thisObject.min.x)
     thisObject.scale.y = thisObject.maxHeight / (thisObject.max.y - thisObject.min.y)
 
-    thisObject.eventHandler.raiseEvent('Scale Changed')
+    thisObject.eventHandler.raiseEvent('Scale Changed', event)
   }
 
   function initializeX (minValue, maxValue, maxWidth) {
diff --git a/ChartsSpace/EdgeEditor.js b/ChartsSpace/EdgeEditor.js
index de0f5dfc2..16cb52358 100644
--- a/ChartsSpace/EdgeEditor.js
+++ b/ChartsSpace/EdgeEditor.js
@@ -187,7 +187,11 @@ function newEdgeEditor () {
           case 'left mouse button': {
             coordinateSystem.max.y = newMaxRate
             coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height
-            coordinateSystem.recalculateScale()
+            let event = {
+              border: 'top',
+              dragVector: dragVector
+            }
+            coordinateSystem.recalculateScale(event)
             break
           }
           case 'right mouse button': {
@@ -216,7 +220,11 @@ function newEdgeEditor () {
           case 'left mouse button': {
             coordinateSystem.min.y = newMinRate
             coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height
-            coordinateSystem.recalculateScale()
+            let event = {
+              border: 'bottom',
+              dragVector: dragVector
+            }
+            coordinateSystem.recalculateScale(event)
             break
           }
           case 'right mouse button': {
diff --git a/ChartsSpace/TimelineChart.js b/ChartsSpace/TimelineChart.js
index 6da054d46..25fc0c616 100644
--- a/ChartsSpace/TimelineChart.js
+++ b/ChartsSpace/TimelineChart.js
@@ -231,7 +231,10 @@ function newTimelineChart () {
     }
   }
 
-  function onScaleChanged () {
+  function onScaleChanged (event) {
+    if (thisObject.rateScale !== undefined) {
+      thisObject.rateScale.onBorderChanged(event)
+    }
     timelineChartCoordinateSystem.min.x = timeMachineCoordinateSystem.min.x
     timelineChartCoordinateSystem.max.x = timeMachineCoordinateSystem.max.x
     timelineChartCoordinateSystem.maxHeight = timeMachineCoordinateSystem.maxHeight
diff --git a/Scales/RateScale.js b/Scales/RateScale.js
index 17053f6e8..687fa4c73 100644
--- a/Scales/RateScale.js
+++ b/Scales/RateScale.js
@@ -10,6 +10,7 @@ function newRateScale () {
     maxValue: undefined,
     isVisible: true,
     layersOn: undefined,
+    onBorderChanged: onBorderChanged,
     onMouseOverSomeTimeMachineContainer: onMouseOverSomeTimeMachineContainer,
     physics: physics,
     draw: draw,
@@ -216,6 +217,32 @@ function newRateScale () {
     coordinateSystem.recalculateScale()
   }
 
+  function onBorderChanged (event) {
+    if (event === undefined) { return }
+    if (event.border === 'top') {
+      let point = {
+        x: event.dragVector.x,
+        y: event.dragVector.y
+      }
+      let newMaxRate = getRateFromPointAtContainer(point, rateCalculationsContainer, coordinateSystem)
+
+      coordinateSystem.max.y = newMaxRate
+      coordinateSystem.maxHeight = rateCalculationsContainer.frame.height
+      coordinateSystem.recalculateScale()
+    }
+    if (event.border === 'bottom') {
+      let point = {
+        x: event.dragVector.x,
+        y: event.dragVector.y + rateCalculationsContainer.frame.height
+      }
+      let newMinRate = getRateFromPointAtContainer(point, rateCalculationsContainer, coordinateSystem)
+
+      coordinateSystem.min.y = newMinRate
+      coordinateSystem.maxHeight = rateCalculationsContainer.frame.height
+      coordinateSystem.recalculateScale()
+    }
+  }
+
   function positioningPhysics () {
     /* Container Limits */
 

From da3e8184de549d2e7f7728e3edfae71c964875d4 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Thu, 13 Feb 2020 16:29:35 +0100
Subject: [PATCH 55/81] Autoscaling working

---
 ChartsSpace/CoordinateSystem.js | 29 ++++++++++++++++++++++++++++-
 ChartsSpace/TimeMachine.js      |  1 +
 Scales/RateScale.js             |  1 +
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/ChartsSpace/CoordinateSystem.js b/ChartsSpace/CoordinateSystem.js
index 18e51602f..d302b080e 100644
--- a/ChartsSpace/CoordinateSystem.js
+++ b/ChartsSpace/CoordinateSystem.js
@@ -15,6 +15,9 @@ function newCoordinateSystem () {
     maxWidth: undefined,
     scale: undefined,
     eventHandler: undefined,
+    autosScale: true,
+    physics: physics,
+    reportValue: reportValue,
     zoomX: zoomX,
     zoomY: zoomY,
     recalculateScale: recalculateScale,
@@ -44,6 +47,9 @@ function newCoordinateSystem () {
   thisObject.eventHandler = newEventHandler()
   thisObject.eventHandler.name = 'Coordinate System'
 
+  let newMax = -VERY_LARGE_NUMBER
+  let newMin = VERY_LARGE_NUMBER
+
   return thisObject
 
   function finalize () {
@@ -65,6 +71,28 @@ function newCoordinateSystem () {
     recalculateScale()
   }
 
+  function physics () {
+    if (thisObject.autosScale === true) {
+      if (thisObject.max.y !== newMax || thisObject.min.y !== newMin) {
+        thisObject.min.y = newMin
+        thisObject.max.y = newMax
+
+        thisObject.scale.x = thisObject.maxWidth / (thisObject.max.x - thisObject.min.x)
+        thisObject.scale.y = thisObject.maxHeight / (thisObject.max.y - thisObject.min.y)
+      }
+
+      newMax = -VERY_LARGE_NUMBER
+      newMin = VERY_LARGE_NUMBER
+    }
+  }
+
+  function reportValue (value) {
+    if (thisObject.autosScale === true) {
+      if (value > newMax) { newMax = value }
+      if (value < newMin) { newMin = value }
+    }
+  }
+
   function zoomX (factor, mousePosition, container) {
     let mouseAtCointainer = unTransformThisPoint(mousePosition, container)
     let leftDistance = mouseAtCointainer.x
@@ -96,7 +124,6 @@ function newCoordinateSystem () {
   }
 
   function recalculateScale (event) {
-    /* Defines the initial Zoom level at center position. */
     thisObject.scale.x = thisObject.maxWidth / (thisObject.max.x - thisObject.min.x)
     thisObject.scale.y = thisObject.maxHeight / (thisObject.max.y - thisObject.min.y)
 
diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js
index 170dd6d3a..64e5d2246 100644
--- a/ChartsSpace/TimeMachine.js
+++ b/ChartsSpace/TimeMachine.js
@@ -365,6 +365,7 @@ function newTimeMachine () {
 
   function physics () {
     thisObject.edgeEditor.physics()
+    timeMachineCoordinateSystem.physics()
 
     saveFrame(thisObject.payload, thisObject.container.frame)
     if (thisObject.container.frame.isInViewPort()) {
diff --git a/Scales/RateScale.js b/Scales/RateScale.js
index 687fa4c73..150a65fc3 100644
--- a/Scales/RateScale.js
+++ b/Scales/RateScale.js
@@ -163,6 +163,7 @@ function newRateScale () {
   }
 
   function readObjectState () {
+    return
     try {
       let code = JSON.parse(thisObject.payload.node.code)
 

From 612c32204b804c645389810fdd9a90284d2a7e0d Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Thu, 13 Feb 2020 19:19:36 +0100
Subject: [PATCH 56/81] Autoscaling implementation finished

---
 Animation.js                    | 11 ++++++++
 ChartsSpace/CoordinateSystem.js | 47 ++++++++++++++++++++++-----------
 Globals.js                      |  3 ++-
 Plotter.js                      | 10 +++++--
 Scales/RateScale.js             | 16 +++++++++--
 5 files changed, 67 insertions(+), 20 deletions(-)

diff --git a/Animation.js b/Animation.js
index 4042960c6..02182b246 100644
--- a/Animation.js
+++ b/Animation.js
@@ -119,6 +119,17 @@ function newAnimation () {
             labelToPrint = key + '   ' + percentage.toFixed(1) + '%'
             printLabel(labelToPrint, 300, 100 + row * 30, 1, 20, UI_COLOR.RED)
           }
+
+          /* Other Variables */
+          row++
+          printLabel(DEBUG.variable1, 300, 100 + row * 30, 1, 20, UI_COLOR.RED)
+          row++
+          printLabel(DEBUG.variable2, 300, 100 + row * 30, 1, 20, UI_COLOR.RED)
+          row++
+          printLabel(DEBUG.variable3, 300, 100 + row * 30, 1, 20, UI_COLOR.RED)
+          row++
+          printLabel(DEBUG.variable4, 300, 100 + row * 30, 1, 20, UI_COLOR.RED)
+          console.log(DEBUG.variable4)
         }
       } else {
         browserCanvas.width = 1
diff --git a/ChartsSpace/CoordinateSystem.js b/ChartsSpace/CoordinateSystem.js
index d302b080e..ed6996e5e 100644
--- a/ChartsSpace/CoordinateSystem.js
+++ b/ChartsSpace/CoordinateSystem.js
@@ -15,7 +15,8 @@ function newCoordinateSystem () {
     maxWidth: undefined,
     scale: undefined,
     eventHandler: undefined,
-    autosScale: true,
+    autoMinScale: true,
+    autoMaxScale: true,
     physics: physics,
     reportValue: reportValue,
     zoomX: zoomX,
@@ -49,6 +50,7 @@ function newCoordinateSystem () {
 
   let newMax = -VERY_LARGE_NUMBER
   let newMin = VERY_LARGE_NUMBER
+  let notValueReported = true
 
   return thisObject
 
@@ -59,11 +61,11 @@ function newCoordinateSystem () {
 
   function initialize (minValue, maxValue, pMaxWidth, pMaxHeight) {
     /* Defines the min and max value of rate that we are going to transport to the available screen at the center position. */
-    thisObject.min.x = minValue.x // * 0.999; // 0.1% less
-    thisObject.max.x = maxValue.x // * 1.001; // 0.1% more
+    thisObject.min.x = minValue.x
+    thisObject.max.x = maxValue.x
 
-    thisObject.min.y = minValue.y // * 0.999; // 0.1% less
-    thisObject.max.y = maxValue.y // * 1.001; // 0.1% more
+    thisObject.min.y = minValue.y
+    thisObject.max.y = maxValue.y
 
     thisObject.maxWidth = pMaxWidth
     thisObject.maxHeight = pMaxHeight
@@ -72,24 +74,39 @@ function newCoordinateSystem () {
   }
 
   function physics () {
-    if (thisObject.autosScale === true) {
-      if (thisObject.max.y !== newMax || thisObject.min.y !== newMin) {
-        thisObject.min.y = newMin
-        thisObject.max.y = newMax
+    if ((thisObject.autoMinScale === true || thisObject.autoMaxScale === true) && notValueReported === false) {
+      let mustRecalculate = false
 
-        thisObject.scale.x = thisObject.maxWidth / (thisObject.max.x - thisObject.min.x)
-        thisObject.scale.y = thisObject.maxHeight / (thisObject.max.y - thisObject.min.y)
+      if (thisObject.autoMaxScale === true && thisObject.max.y !== newMax) {
+        thisObject.max.y = newMax
+        newMax = -VERY_LARGE_NUMBER
+        mustRecalculate = true
       }
 
-      newMax = -VERY_LARGE_NUMBER
-      newMin = VERY_LARGE_NUMBER
+      if (thisObject.autoMinScale === true && thisObject.min.y !== newMin) {
+        thisObject.min.y = newMin
+        newMin = VERY_LARGE_NUMBER
+        mustRecalculate = true
+      }
+
+      if (mustRecalculate === true) {
+        recalculateScale()
+      }
+
+      /* Reseting this to start over at each cycle. */
+
+      notValueReported = true
     }
   }
 
   function reportValue (value) {
-    if (thisObject.autosScale === true) {
-      if (value > newMax) { newMax = value }
+    if (thisObject.autoMinScale === true) {
       if (value < newMin) { newMin = value }
+      notValueReported = false
+    }
+    if (thisObject.autoMaxScale === true) {
+      if (value > newMax) { newMax = value }
+      notValueReported = false
     }
   }
 
diff --git a/Globals.js b/Globals.js
index 8ec77286f..1f38f538a 100644
--- a/Globals.js
+++ b/Globals.js
@@ -41,7 +41,8 @@ UI_FONT = {
     SECONDARY: "Source Code Pro"
 };
 
-const ZOOM_OUT_THRESHOLD_FOR_HIDDING_PANELS = 10 // This regulates some behavious changes that happens when the user zoom out below this level.
+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.
 
 let FONT_ASPECT_RATIO = 0.32;
diff --git a/Plotter.js b/Plotter.js
index 32a4f3ff4..095b1d6f5 100644
--- a/Plotter.js
+++ b/Plotter.js
@@ -547,7 +547,6 @@ function newPlotter () {
 
         if (productDefinition.referenceParent.shapes === undefined) { continue }
         if (productDefinition.referenceParent.shapes.chartPoints === undefined) { continue }
-
         let dataPoints = new Map()
         if (record.dataPoints !== undefined && mustRecalculateDataPoints === false) {
           /* We use the datapoints already calculated. */
@@ -569,6 +568,8 @@ function newPlotter () {
                   x: x,
                   y: y
                 }
+                /* Contributing to Auto-Scale */
+                coordinateSystem.reportValue(dataPoint.y)
 
               /*
               The information we store in files is independent from the charing system and its coordinate systems.
@@ -768,7 +769,12 @@ function newPlotter () {
         }
       }
 
-      mustRecalculateDataPoints = false
+      if (coordinateSystem.autoMinScale === true || coordinateSystem.autosMaxScale === true) {
+        mustRecalculateDataPoints = true
+      } else {
+        mustRecalculateDataPoints = false
+      }
+
       logged = false
     } catch (err) {
       if (ERROR_LOG === true) { logger.write('[ERROR] plotChart -> err = ' + err.stack) }
diff --git a/Scales/RateScale.js b/Scales/RateScale.js
index 150a65fc3..ee6c4ab88 100644
--- a/Scales/RateScale.js
+++ b/Scales/RateScale.js
@@ -156,6 +156,8 @@ function newRateScale () {
       let code = JSON.parse(thisObject.payload.node.code)
       code.minValue = coordinateSystem.min.y
       code.maxValue = coordinateSystem.max.y
+      code.autoMinScale = coordinateSystem.autoMinScale
+      code.autoMaxScale = coordinateSystem.autoMaxScale
       thisObject.payload.node.code = JSON.stringify(code, null, 4)
     } catch (err) {
        // we ignore errors here since most likely they will be parsing errors.
@@ -163,7 +165,6 @@ function newRateScale () {
   }
 
   function readObjectState () {
-    return
     try {
       let code = JSON.parse(thisObject.payload.node.code)
 
@@ -173,11 +174,22 @@ function newRateScale () {
         ) {
         // not using this value
       } else {
-        if (thisObject.minValue !== code.minValue || thisObject.maxValue !== code.maxValue) {
+        if (
+          thisObject.minValue !== code.minValue ||
+          thisObject.maxValue !== code.maxValue ||
+          coordinateSystem.autoMinScale !== code.autoMinScale ||
+          coordinateSystem.autoMaxScale !== code.autoMaxScale
+        ) {
           thisObject.minValue = code.minValue
           thisObject.maxValue = code.maxValue
           coordinateSystem.min.y = thisObject.minValue
           coordinateSystem.max.y = thisObject.maxValue
+          if (code.autoMinScale !== undefined && (code.autoMinScale === true || code.autoMinScale === false)) {
+            coordinateSystem.autoMinScale = code.autoMinScale
+          }
+          if (code.autoMaxScale !== undefined && (code.autoMaxScale === true || code.autoMaxScale === false)) {
+            coordinateSystem.autoMaxScale = code.autoMaxScale
+          }
           coordinateSystem.recalculateScale()
         }
       }

From 05bdab8d7864a57fafba704fca120c5a721e9831 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Thu, 13 Feb 2020 19:57:55 +0100
Subject: [PATCH 57/81] Bug Fixed

---
 Animation.js                    | 1 -
 ChartsSpace/CoordinateSystem.js | 9 ++++++++-
 ChartsSpace/TimelineChart.js    | 2 +-
 Scales/RateScale.js             | 2 ++
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/Animation.js b/Animation.js
index 02182b246..4a0e1e72d 100644
--- a/Animation.js
+++ b/Animation.js
@@ -129,7 +129,6 @@ function newAnimation () {
           printLabel(DEBUG.variable3, 300, 100 + row * 30, 1, 20, UI_COLOR.RED)
           row++
           printLabel(DEBUG.variable4, 300, 100 + row * 30, 1, 20, UI_COLOR.RED)
-          console.log(DEBUG.variable4)
         }
       } else {
         browserCanvas.width = 1
diff --git a/ChartsSpace/CoordinateSystem.js b/ChartsSpace/CoordinateSystem.js
index ed6996e5e..9d2ce752c 100644
--- a/ChartsSpace/CoordinateSystem.js
+++ b/ChartsSpace/CoordinateSystem.js
@@ -79,16 +79,23 @@ function newCoordinateSystem () {
 
       if (thisObject.autoMaxScale === true && thisObject.max.y !== newMax) {
         thisObject.max.y = newMax
-        newMax = -VERY_LARGE_NUMBER
         mustRecalculate = true
       }
 
+      if (thisObject.autoMaxScale === true) {
+        newMax = -VERY_LARGE_NUMBER
+      }
+
       if (thisObject.autoMinScale === true && thisObject.min.y !== newMin) {
         thisObject.min.y = newMin
         newMin = VERY_LARGE_NUMBER
         mustRecalculate = true
       }
 
+      if (thisObject.autoMinScale === true) {
+        newMin = VERY_LARGE_NUMBER
+      }
+
       if (mustRecalculate === true) {
         recalculateScale()
       }
diff --git a/ChartsSpace/TimelineChart.js b/ChartsSpace/TimelineChart.js
index 25fc0c616..c92c946b6 100644
--- a/ChartsSpace/TimelineChart.js
+++ b/ChartsSpace/TimelineChart.js
@@ -316,7 +316,7 @@ function newTimelineChart () {
   }
 
   function thisObjectPhysics () {
-
+    timelineChartCoordinateSystem.physics()
   }
 
   function syncWithDesignerLayersManager () {
diff --git a/Scales/RateScale.js b/Scales/RateScale.js
index ee6c4ab88..1d4225c58 100644
--- a/Scales/RateScale.js
+++ b/Scales/RateScale.js
@@ -152,6 +152,7 @@ function newRateScale () {
   }
 
   function saveObjectState () {
+    return
     try {
       let code = JSON.parse(thisObject.payload.node.code)
       code.minValue = coordinateSystem.min.y
@@ -165,6 +166,7 @@ function newRateScale () {
   }
 
   function readObjectState () {
+    return
     try {
       let code = JSON.parse(thisObject.payload.node.code)
 

From aa1828ec1d5cb31cc197dde648db34d50f34001c Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Fri, 14 Feb 2020 07:48:17 +0100
Subject: [PATCH 58/81] Bug Fixed, button not working

---
 Globals.js                    | 4 ++--
 Panels/PanelsVisibleButton.js | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/Globals.js b/Globals.js
index 1f38f538a..d0441e059 100644
--- a/Globals.js
+++ b/Globals.js
@@ -209,8 +209,8 @@ const PERIOD_01_MIN = "01-min";
 We define here the size of the chartSpace. It has to bee enough big in order to accomodate all the charts we expect to display in this space.
 */
 
-const TIME_MACHINE_WIDTH = 250;
-const TIME_MACHINE_HEIGHT = 50;
+const TIME_MACHINE_WIDTH = 320;
+const TIME_MACHINE_HEIGHT = 120;
 
 let mediaRecorder // to downloadText canvas animation as a mediaRecorder
 let areWeRecording = false
diff --git a/Panels/PanelsVisibleButton.js b/Panels/PanelsVisibleButton.js
index fe8d20e08..89bb719a0 100644
--- a/Panels/PanelsVisibleButton.js
+++ b/Panels/PanelsVisibleButton.js
@@ -16,6 +16,7 @@ function newPanelsVisibleButton () {
   thisObject.container.name = 'Panels Visible Button'
   thisObject.container.initialize()
   thisObject.container.isClickeable = true
+  thisObject.container.isDraggeable = false
   thisObject.container.frame.containerName = 'Panels Visible Button'
 
   let onMouseClickEventSuscriptionId

From 276b23f823d0f3b2ccc3ce918c40e1af1ddbb4cf Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Fri, 14 Feb 2020 09:32:26 +0100
Subject: [PATCH 59/81] Button for swithing between automatic scales
 implemented

---
 Canvas.js                  |   7 ++-
 ChartsSpace/TimeMachine.js |  11 ++++
 Scales/AutoScaleButton.js  | 115 +++++++++++++++++++++++++++++++++++++
 Scales/RateScale.js        |  20 ++++++-
 4 files changed, 149 insertions(+), 4 deletions(-)
 create mode 100644 Scales/AutoScaleButton.js

diff --git a/Canvas.js b/Canvas.js
index d74198e6a..9920a5ccc 100644
--- a/Canvas.js
+++ b/Canvas.js
@@ -539,7 +539,9 @@ function newCanvas () {
           containerBeingDragged.eventHandler.raiseEvent('onDragStarted', point)
           return
         } else {
-          viewPortBeingDragged = true
+          if (container.isClickeable === false) {
+            viewPortBeingDragged = true
+          }
           return
         }
       }
@@ -565,6 +567,7 @@ function newCanvas () {
 
   function onMouseClick (event) {
     try {
+      console.log('ignoreNextClick', ignoreNextClick)
       if (ignoreNextClick === true) {
         ignoreNextClick = false
         return
@@ -613,7 +616,7 @@ function newCanvas () {
 
            /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */
 
-      container = thisObject.chartSpace.getContainer(point)
+      container = thisObject.chartSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_CLICK)
 
       if (container !== undefined && container.isClickeable === true) {
         container.eventHandler.raiseEvent('onMouseClick', point)
diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js
index 64e5d2246..4391283f8 100644
--- a/ChartsSpace/TimeMachine.js
+++ b/ChartsSpace/TimeMachine.js
@@ -249,6 +249,10 @@ function newTimeMachine () {
       if (container !== undefined) {
         if (container.isForThisPurpose(purpose)) {
           return container
+        } else {
+          if (purpose === GET_CONTAINER_PURPOSE.DRAGGING && container.isClickeable === true) {
+            return container
+          }
         }
       }
     }
@@ -274,10 +278,17 @@ function newTimeMachine () {
     for (let i = 0; i < thisObject.timelineCharts.length; i++) {
       container = thisObject.timelineCharts[i].getContainer(point, purpose)
       if (container !== undefined) {
+        console.log('IN TIME MACHINE GOT THIS CONTAINER: ' + container.name)
         if (container.isForThisPurpose(purpose)) {
           if (thisObject.container.frame.isThisPointHere(point) === true) {
             return container
           }
+        } else {
+          if (purpose === GET_CONTAINER_PURPOSE.DRAGGING && container.isClickeable === true) {
+            if (thisObject.container.frame.isThisPointHere(point) === true) {
+              return container
+            }
+          }
         }
       }
     }
diff --git a/Scales/AutoScaleButton.js b/Scales/AutoScaleButton.js
new file mode 100644
index 000000000..4add5d534
--- /dev/null
+++ b/Scales/AutoScaleButton.js
@@ -0,0 +1,115 @@
+function newAutoScaleButton () {
+  let thisObject = {
+    container: undefined,
+    fitFunction: undefined,
+    parentContainer: undefined,
+    autoMinScale: undefined,
+    autoMaxScale: undefined,
+    draw: draw,
+    getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
+    initialize: initialize,
+    finalize: finalize
+  }
+
+   /* Cointainer stuff */
+  thisObject.container = newContainer()
+  thisObject.container.name = 'Auto Scale Button'
+  thisObject.container.initialize()
+  thisObject.container.isClickeable = true
+  thisObject.container.isDraggeable = false
+  thisObject.container.frame.containerName = 'Auto Scale Button'
+
+  let onMouseClickEventSuscriptionId
+  let coordinateSystem
+
+  return thisObject
+
+  function finalize () {
+    thisObject.container.eventHandler.stopListening(onMouseClickEventSuscriptionId)
+    thisObject.container.finalize()
+    thisObject.container = undefined
+    thisObject.fitFunction = undefined
+    thisObject.parentContainer = undefined
+    thisObject.panels = undefined
+
+    coordinateSystem = undefined
+  }
+
+  function initialize (pCoordinateSystem) {
+    coordinateSystem = pCoordinateSystem
+    thisObject.autoMinScale = coordinateSystem.autoMinScale
+    thisObject.autoMaxScale = coordinateSystem.autoMaxScale
+
+    thisObject.container.frame.width = 25
+    thisObject.container.frame.height = 25
+
+    let position = {
+      x: thisObject.container.parentContainer.frame.width * 5 / 8,
+      y: thisObject.container.parentContainer.frame.height / 2 - thisObject.container.frame.height / 2
+    }
+
+    thisObject.container.frame.position = position
+
+    /* Lets listen to our own events to react when we have a Mouse Click */
+    onMouseClickEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
+  }
+
+  function onMouseClick (event) {
+    if (thisObject.autoMinScale === false && thisObject.autoMaxScale === false) {
+      thisObject.autoMinScale = true
+      thisObject.autoMaxScale = false
+      update()
+      return
+    }
+    if (thisObject.autoMinScale === true && thisObject.autoMaxScale === false) {
+      thisObject.autoMinScale = false
+      thisObject.autoMaxScale = true
+      update()
+      return
+    }
+    if (thisObject.autoMinScale === false && thisObject.autoMaxScale === true) {
+      thisObject.autoMinScale = true
+      thisObject.autoMaxScale = true
+      update()
+      return
+    }
+    if (thisObject.autoMinScale === true && thisObject.autoMaxScale === true) {
+      thisObject.autoMinScale = false
+      thisObject.autoMaxScale = false
+      update()
+      return
+    }
+
+    function update () {
+      coordinateSystem.autoMinScale = thisObject.autoMinScale
+      coordinateSystem.autoMaxScale = thisObject.autoMaxScale
+      coordinateSystem.recalculateScale()
+    }
+  }
+
+  function getContainer (point, purpose) {
+    console.log('INSIDE BUTTON')
+    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+      console.log('RETURNING BUTTON FROM BUTTON')
+      return thisObject.container
+    }
+  }
+
+  function draw () {
+    let icon
+    if (thisObject.autoMinScale === false && thisObject.autoMaxScale === false) {
+      icon = canvas.designerSpace.iconCollection.get('plotter-panel')
+    }
+    if (thisObject.autoMinScale === true && thisObject.autoMaxScale === false) {
+      icon = canvas.designerSpace.iconCollection.get('shapes-polygon-body')
+    }
+    if (thisObject.autoMinScale === false && thisObject.autoMaxScale === true) {
+      icon = canvas.designerSpace.iconCollection.get('social-bot')
+    }
+    if (thisObject.autoMinScale === true && thisObject.autoMaxScale === true) {
+      icon = canvas.designerSpace.iconCollection.get('startup')
+    }
+
+    drawIcon(icon, 1 / 2, 1 / 2, 0, 0, 14, thisObject.container)
+  }
+}
diff --git a/Scales/RateScale.js b/Scales/RateScale.js
index 1d4225c58..e89378762 100644
--- a/Scales/RateScale.js
+++ b/Scales/RateScale.js
@@ -55,6 +55,7 @@ function newRateScale () {
   }
 
   let scaleDisplayTimer = 0
+  let autoScaleButton
   return thisObject
 
   function finalize () {
@@ -72,6 +73,9 @@ function newRateScale () {
     limitingContainer = undefined
     rateCalculationsContainer = undefined
     mouse = undefined
+
+    autoScaleButton.finalize()
+    autoScaleButton = undefined
   }
 
   function initialize (pCoordinateSystem, pLimitingContainer, pRateCalculationsContainer) {
@@ -88,6 +92,10 @@ function newRateScale () {
     onScaleChangedEventSubscriptionId = coordinateSystem.eventHandler.listenToEvent('Scale Changed', onScaleChanged)
 
     readObjectState()
+
+    autoScaleButton = newAutoScaleButton()
+    autoScaleButton.container.connectToParent(thisObject.container)
+    autoScaleButton.initialize(coordinateSystem)
   }
 
   function onMouseOverSomeTimeMachineContainer (event) {
@@ -142,7 +150,15 @@ function newRateScale () {
   }
 
   function getContainer (point, purpose) {
+    console.log(purpose, point.x, point.y)
     if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+      console.log('INSIDE')
+      let container = autoScaleButton.getContainer(point, purpose)
+      if (container !== undefined) {
+        console.log('RETURNING BUTTON FROM SCALE')
+        return container
+      }
+
       if (purpose === GET_CONTAINER_PURPOSE.DRAGGING) {
         return draggeableContainer
       }
@@ -152,7 +168,6 @@ function newRateScale () {
   }
 
   function saveObjectState () {
-    return
     try {
       let code = JSON.parse(thisObject.payload.node.code)
       code.minValue = coordinateSystem.min.y
@@ -166,7 +181,6 @@ function newRateScale () {
   }
 
   function readObjectState () {
-    return
     try {
       let code = JSON.parse(thisObject.payload.node.code)
 
@@ -346,6 +360,7 @@ function newRateScale () {
 
   function draw () {
     drawScaleBox()
+    autoScaleButton.draw()
     if (visible === false) {
       drawScaleDisplayCover(thisObject.container)
     }
@@ -354,6 +369,7 @@ function newRateScale () {
   function drawForeground () {
     if (isMouseOver === true) {
       drawScaleBox()
+      autoScaleButton.draw()
     }
   }
 

From 11a3d80d6a12f8e0898784aeff1689f04fa907cf Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Fri, 14 Feb 2020 11:54:01 +0100
Subject: [PATCH 60/81] Cleaning

---
 Canvas.js                  | 1 -
 ChartsSpace/TimeMachine.js | 1 -
 Scales/AutoScaleButton.js  | 2 --
 Scales/RateScale.js        | 3 ---
 4 files changed, 7 deletions(-)

diff --git a/Canvas.js b/Canvas.js
index 9920a5ccc..7a29f3d29 100644
--- a/Canvas.js
+++ b/Canvas.js
@@ -567,7 +567,6 @@ function newCanvas () {
 
   function onMouseClick (event) {
     try {
-      console.log('ignoreNextClick', ignoreNextClick)
       if (ignoreNextClick === true) {
         ignoreNextClick = false
         return
diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js
index 4391283f8..223b4a0ed 100644
--- a/ChartsSpace/TimeMachine.js
+++ b/ChartsSpace/TimeMachine.js
@@ -278,7 +278,6 @@ function newTimeMachine () {
     for (let i = 0; i < thisObject.timelineCharts.length; i++) {
       container = thisObject.timelineCharts[i].getContainer(point, purpose)
       if (container !== undefined) {
-        console.log('IN TIME MACHINE GOT THIS CONTAINER: ' + container.name)
         if (container.isForThisPurpose(purpose)) {
           if (thisObject.container.frame.isThisPointHere(point) === true) {
             return container
diff --git a/Scales/AutoScaleButton.js b/Scales/AutoScaleButton.js
index 4add5d534..0bfd649e2 100644
--- a/Scales/AutoScaleButton.js
+++ b/Scales/AutoScaleButton.js
@@ -88,9 +88,7 @@ function newAutoScaleButton () {
   }
 
   function getContainer (point, purpose) {
-    console.log('INSIDE BUTTON')
     if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-      console.log('RETURNING BUTTON FROM BUTTON')
       return thisObject.container
     }
   }
diff --git a/Scales/RateScale.js b/Scales/RateScale.js
index e89378762..907136c4b 100644
--- a/Scales/RateScale.js
+++ b/Scales/RateScale.js
@@ -150,12 +150,9 @@ function newRateScale () {
   }
 
   function getContainer (point, purpose) {
-    console.log(purpose, point.x, point.y)
     if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-      console.log('INSIDE')
       let container = autoScaleButton.getContainer(point, purpose)
       if (container !== undefined) {
-        console.log('RETURNING BUTTON FROM SCALE')
         return container
       }
 

From 762e9a12f73b1d855d9b054bc4e510de616fffae Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Fri, 14 Feb 2020 11:57:24 +0100
Subject: [PATCH 61/81] Bug fixed

---
 Scales/RateScale.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/Scales/RateScale.js b/Scales/RateScale.js
index 907136c4b..9273c3b80 100644
--- a/Scales/RateScale.js
+++ b/Scales/RateScale.js
@@ -197,11 +197,14 @@ function newRateScale () {
           thisObject.maxValue = code.maxValue
           coordinateSystem.min.y = thisObject.minValue
           coordinateSystem.max.y = thisObject.maxValue
+
           if (code.autoMinScale !== undefined && (code.autoMinScale === true || code.autoMinScale === false)) {
             coordinateSystem.autoMinScale = code.autoMinScale
+            autoScaleButton.autoMinScale = code.autoMinScale
           }
           if (code.autoMaxScale !== undefined && (code.autoMaxScale === true || code.autoMaxScale === false)) {
             coordinateSystem.autoMaxScale = code.autoMaxScale
+            autoScaleButton.autoMaxScale = code.autoMaxScale
           }
           coordinateSystem.recalculateScale()
         }

From eb141575166d61ef4d06221adec0800c24877b7b Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Fri, 14 Feb 2020 13:36:52 +0100
Subject: [PATCH 62/81] Cluster

---
 ChartsSpace/TimeMachine.js |  2 +-
 Spaces/ChartSpace.js       | 28 ++++++++++++++--------------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/ChartsSpace/TimeMachine.js b/ChartsSpace/TimeMachine.js
index 223b4a0ed..406d5090d 100644
--- a/ChartsSpace/TimeMachine.js
+++ b/ChartsSpace/TimeMachine.js
@@ -154,7 +154,7 @@ function newTimeMachine () {
     thisObject.edgeEditor.initialize(timeMachineCoordinateSystem)
     thisObject.edgeEditor.container.connectToParent(thisObject.container, true, true, false, true, true, true)
 
-    callBackFunction(GLOBAL.DEFAULT_OK_RESPONSE)
+    callBackFunction()
   }
 
   function onMouseOver (event) {
diff --git a/Spaces/ChartSpace.js b/Spaces/ChartSpace.js
index 3636bd1bc..1251ceeb2 100644
--- a/Spaces/ChartSpace.js
+++ b/Spaces/ChartSpace.js
@@ -265,16 +265,21 @@ function newChartSpace () {
     if (thisObject.payload.node === undefined) { return }
     syncWithDesignerLoop = syncWithDesignerLoop + 0.00000000001
 
-    if (thisObject.payload.node.timeMachines !== undefined) {
-      for (let j = 0; j < thisObject.payload.node.timeMachines.length; j++) {
-        let node = thisObject.payload.node.timeMachines[j]
-        let timeMachine = timeMachinesMap.get(node.id)
-        if (timeMachine === undefined) {
+    if (thisObject.payload.node.clusters !== undefined) {
+      for (let i = 0; i < thisObject.payload.node.clusters.length; i++) {
+        let cluster = thisObject.payload.node.clusters[i]
+        if (cluster.timeMachines !== undefined) {
+          for (let j = 0; j < cluster.timeMachines.length; j++) {
+            let node = cluster.timeMachines[j]
+            let timeMachine = timeMachinesMap.get(node.id)
+            if (timeMachine === undefined) {
               /* The time machine node is new, thus we need to initialize a new timeMachine */
-          initializeTimeMachine(node, syncWithDesignerLoop)
-        } else {
+              initializeTimeMachine(node, syncWithDesignerLoop)
+            } else {
               /* The time machine already exists, we tag it as existing at the current loop. */
-          timeMachine.syncWithDesignerLoop = syncWithDesignerLoop
+              timeMachine.syncWithDesignerLoop = syncWithDesignerLoop
+            }
+          }
         }
       }
     }
@@ -309,12 +314,7 @@ function newChartSpace () {
       timeMachine.container.frame.position.y = browserCanvas.height / 2 - TIME_MACHINE_HEIGHT / 2
       timeMachine.initialize(onTimeMachineInitialized)
 
-      function onTimeMachineInitialized (err) {
-        if (err.result !== GLOBAL.DEFAULT_OK_RESPONSE.result) {
-          if (ERROR_LOG === true) { logger.write('[ERROR] syncWithDesigner -> initializeTimeMachine -> Initialization Failed. -> Err ' + err.message) }
-          return
-        }
-
+      function onTimeMachineInitialized () {
         thisObject.timeMachines.push(timeMachine)
         timeMachine.payload.uiObject.setValue('')
         if (canvas.chartSpace.viewport !== undefined) {

From 13052bb8b9789359330a9cd8a64f02d5f23e6ba8 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Fri, 14 Feb 2020 13:58:33 +0100
Subject: [PATCH 63/81] Refactoring ChartsSpace

---
 Animation.js                                  |  2 +-
 Canvas.js                                     | 52 +++++++++----------
 .../ChartUtilities.js                         |  0
 .../CoordinateSystem.js                       |  0
 {ChartsSpace => ChartingSpace}/EdgeEditor.js  | 16 +++---
 .../PlottersManager.js                        |  0
 {ChartsSpace => ChartingSpace}/TimeMachine.js | 18 +++----
 .../TimelineChart.js                          |  0
 .../ViewPort.js => ChartingSpace/Viewport.js  |  0
 DesignerSpace/Workspace/Workspace.js          |  2 +-
 Frame.js                                      |  4 +-
 Globals.js                                    |  6 +--
 Panels/LayersPanel.js                         |  6 +--
 Panels/PanelTabButton.js                      |  6 +--
 Panels/PlotterPanel.js                        |  4 +-
 Plotter.js                                    | 30 +++++------
 Project.njsproj                               |  2 +-
 Scales/TimeFrameScale.js                      |  8 +--
 Spaces/{ChartSpace.js => ChartingSpace.js}    | 20 +++----
 Spaces/CockpitSpace.js                        |  4 +-
 Spaces/PanelsSpace.js                         | 32 ++++++------
 Spaces/TopSpace.js                            |  2 +-
 Utilities.js                                  | 14 ++---
 23 files changed, 114 insertions(+), 114 deletions(-)
 rename {ChartsSpace => ChartingSpace}/ChartUtilities.js (100%)
 rename {ChartsSpace => ChartingSpace}/CoordinateSystem.js (100%)
 rename {ChartsSpace => ChartingSpace}/EdgeEditor.js (96%)
 rename {ChartsSpace => ChartingSpace}/PlottersManager.js (100%)
 rename {ChartsSpace => ChartingSpace}/TimeMachine.js (95%)
 rename {ChartsSpace => ChartingSpace}/TimelineChart.js (100%)
 rename ChartsSpace/ViewPort.js => ChartingSpace/Viewport.js (100%)
 rename Spaces/{ChartSpace.js => ChartingSpace.js} (95%)

diff --git a/Animation.js b/Animation.js
index 4a0e1e72d..9163e8a69 100644
--- a/Animation.js
+++ b/Animation.js
@@ -93,7 +93,7 @@ function newAnimation () {
             callBackFunction()
             let t1 = performance.now()
             timeConsumed = t1 - t0
-            if (key === 'Chart Space Draw') {
+            if (key === 'Charting Space Draw') {
               if (Math.random() * 100 > 99) {
                 totalConsumption = 0
                 totalCounter = 0
diff --git a/Canvas.js b/Canvas.js
index 7a29f3d29..13b89c586 100644
--- a/Canvas.js
+++ b/Canvas.js
@@ -32,7 +32,7 @@ function newCanvas () {
   let thisObject = {
     eventHandler: undefined,
     topSpace: undefined,
-    chartSpace: undefined,
+    chartingSpace: undefined,
     floatingSpace: undefined,
     panelsSpace: undefined,
     cockpitSpace: undefined,
@@ -53,7 +53,7 @@ function newCanvas () {
 
   function finalize () {
     try {
-      thisObject.chartSpace.finalize()
+      thisObject.chartingSpace.finalize()
       thisObject.floatingSpace.finalize()
 
       browserCanvas.removeEventListener('mousedown', onMouseDown, false)
@@ -104,8 +104,8 @@ function newCanvas () {
       thisObject.panelsSpace = newPanelsSpace()
       thisObject.panelsSpace.initialize()
 
-      thisObject.chartSpace = newChartSpace()
-      thisObject.chartSpace.initialize()
+      thisObject.chartingSpace = newChartingSpace()
+      thisObject.chartingSpace.initialize()
 
       thisObject.bottomSpace = thisObject.cockpitSpace
 
@@ -122,13 +122,13 @@ function newCanvas () {
       /* Spcaces Physics */
       animation.addCallBackFunction('CockpitSpace Physics', thisObject.cockpitSpace.physics)
       animation.addCallBackFunction('Floating Space Physics', thisObject.floatingSpace.physics)
-      animation.addCallBackFunction('Chart Space Physics', thisObject.chartSpace.physics)
+      animation.addCallBackFunction('Charting Space Physics', thisObject.chartingSpace.physics)
       animation.addCallBackFunction('Designer Space Physics', thisObject.designerSpace.physics)
       animation.addCallBackFunction('Panels Space Physics', thisObject.panelsSpace.physics)
 
       /* Spcaces Drawing */
       animation.addCallBackFunction('Floating Space Draw', thisObject.floatingSpace.draw)
-      animation.addCallBackFunction('Chart Space Draw', thisObject.chartSpace.draw)
+      animation.addCallBackFunction('Charting Space Draw', thisObject.chartingSpace.draw)
       animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw)
       animation.addCallBackFunction('CockpitSpace Draw', thisObject.cockpitSpace.draw)
       animation.addCallBackFunction('Designer Space Draw', thisObject.designerSpace.draw)
@@ -297,22 +297,22 @@ function newCanvas () {
     }
 
     if (event.shiftKey === true && event.ctrlKey === false && event.code === 'ArrowLeft') {
-      canvas.chartSpace.oneScreenLeft()
+      canvas.chartingSpace.oneScreenLeft()
       return
     }
 
     if (event.shiftKey === true && event.ctrlKey === false && event.code === 'ArrowRight') {
-      canvas.chartSpace.oneScreenRight()
+      canvas.chartingSpace.oneScreenRight()
       return
     }
 
     if (event.shiftKey === true && event.code === 'ArrowUp') {
-      canvas.chartSpace.oneScreenUp()
+      canvas.chartingSpace.oneScreenUp()
       return
     }
 
     if (event.shiftKey === true && event.code === 'ArrowDown') {
-      canvas.chartSpace.oneScreenDown()
+      canvas.chartingSpace.oneScreenDown()
       return
     }
 
@@ -528,9 +528,9 @@ function newCanvas () {
         return
       }
 
-           /*  we check if it is over any of the existing containers at the Chart Space. */
+           /*  we check if it is over any of the existing containers at the Charting Space. */
 
-      container = thisObject.chartSpace.getContainer(point, GET_CONTAINER_PURPOSE.DRAGGING)
+      container = thisObject.chartingSpace.getContainer(point, GET_CONTAINER_PURPOSE.DRAGGING)
 
       if (container !== undefined) {
         if (container.isDraggeable === true) {
@@ -613,9 +613,9 @@ function newCanvas () {
         return
       }
 
-           /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */
+           /* If it is not, then we check if it is over any of the existing containers at the Charting Space. */
 
-      container = thisObject.chartSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_CLICK)
+      container = thisObject.chartingSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_CLICK)
 
       if (container !== undefined && container.isClickeable === true) {
         container.eventHandler.raiseEvent('onMouseClick', point)
@@ -656,9 +656,9 @@ function newCanvas () {
       point.x = event.pageX
       point.y = event.pageY - CURRENT_TOP_MARGIN
 
-      if (canvas.chartSpace.viewport !== undefined) {
-        canvas.chartSpace.viewport.mousePosition.x = point.x
-        canvas.chartSpace.viewport.mousePosition.y = point.y
+      if (canvas.chartingSpace.viewport !== undefined) {
+        canvas.chartingSpace.viewport.mousePosition.x = point.x
+        canvas.chartingSpace.viewport.mousePosition.y = point.y
       }
 
       if (containerDragStarted === true || floatingObjectDragStarted === true || viewPortBeingDragged === true) {
@@ -751,9 +751,9 @@ function newCanvas () {
         }
       }
 
-       /* If it is not, then we check if it is over any of the existing containers at the Chart Space. */
-      if (thisObject.chartSpace !== undefined) {
-        container = thisObject.chartSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER)
+       /* If it is not, then we check if it is over any of the existing containers at the Charting Space. */
+      if (thisObject.chartingSpace !== undefined) {
+        container = thisObject.chartingSpace.getContainer(point, GET_CONTAINER_PURPOSE.MOUSE_OVER)
 
         if (container !== undefined && container.detectMouseOver === true) {
           containerFound()
@@ -816,16 +816,16 @@ function newCanvas () {
         return false  // This instructs the browser not to take the event and scroll the page.
       }
 
-          /*   Chart Space. */
+          /*   Charting Space. */
 
-      container = canvas.chartSpace.getContainer({ x: point.x, y: point.y }, GET_CONTAINER_PURPOSE.MOUSE_WHEEL)
+      container = canvas.chartingSpace.getContainer({ x: point.x, y: point.y }, GET_CONTAINER_PURPOSE.MOUSE_WHEEL)
       if (container !== undefined && container.isWheelable === true) {
         container.eventHandler.raiseEvent('onMouseWheel', event)
         return false  // This instructs the browser not to take the event and scroll the page.
       }
 
       if (container !== undefined) {
-        canvas.chartSpace.viewport.onMouseWheel(event)
+        canvas.chartingSpace.viewport.onMouseWheel(event)
         return false
       }
 
@@ -886,7 +886,7 @@ function newCanvas () {
             y: dragVector.upY - dragVector.downY
           }
 
-          canvas.chartSpace.viewport.displace(displaceVector)
+          canvas.chartingSpace.viewport.displace(displaceVector)
         }
         if (containerDragStarted) {
           if (containerBeingDragged !== undefined) {
@@ -897,7 +897,7 @@ function newCanvas () {
               }
 
               let downNoZoom
-              downNoZoom = canvas.chartSpace.viewport.unTransformThisPoint(downCopy)
+              downNoZoom = canvas.chartingSpace.viewport.unTransformThisPoint(downCopy)
 
               let upCopy = {
                 x: dragVector.upX,
@@ -905,7 +905,7 @@ function newCanvas () {
               }
 
               let upNoZoom
-              upNoZoom = canvas.chartSpace.viewport.unTransformThisPoint(upCopy)
+              upNoZoom = canvas.chartingSpace.viewport.unTransformThisPoint(upCopy)
 
               displaceVector = {
                 x: upNoZoom.x - downNoZoom.x,
diff --git a/ChartsSpace/ChartUtilities.js b/ChartingSpace/ChartUtilities.js
similarity index 100%
rename from ChartsSpace/ChartUtilities.js
rename to ChartingSpace/ChartUtilities.js
diff --git a/ChartsSpace/CoordinateSystem.js b/ChartingSpace/CoordinateSystem.js
similarity index 100%
rename from ChartsSpace/CoordinateSystem.js
rename to ChartingSpace/CoordinateSystem.js
diff --git a/ChartsSpace/EdgeEditor.js b/ChartingSpace/EdgeEditor.js
similarity index 96%
rename from ChartsSpace/EdgeEditor.js
rename to ChartingSpace/EdgeEditor.js
index 16cb52358..78f327139 100644
--- a/ChartsSpace/EdgeEditor.js
+++ b/ChartingSpace/EdgeEditor.js
@@ -402,15 +402,15 @@ function newEdgeEditor () {
       y: pointB4.y + edgeSize
     }
 
-    pointA1 = canvas.chartSpace.viewport.fitIntoViewport(pointA1)
-    pointA2 = canvas.chartSpace.viewport.fitIntoViewport(pointA2)
-    pointA3 = canvas.chartSpace.viewport.fitIntoViewport(pointA3)
-    pointA4 = canvas.chartSpace.viewport.fitIntoViewport(pointA4)
+    pointA1 = canvas.chartingSpace.viewport.fitIntoViewport(pointA1)
+    pointA2 = canvas.chartingSpace.viewport.fitIntoViewport(pointA2)
+    pointA3 = canvas.chartingSpace.viewport.fitIntoViewport(pointA3)
+    pointA4 = canvas.chartingSpace.viewport.fitIntoViewport(pointA4)
 
-    pointB1 = canvas.chartSpace.viewport.fitIntoViewport(pointB1)
-    pointB2 = canvas.chartSpace.viewport.fitIntoViewport(pointB2)
-    pointB3 = canvas.chartSpace.viewport.fitIntoViewport(pointB3)
-    pointB4 = canvas.chartSpace.viewport.fitIntoViewport(pointB4)
+    pointB1 = canvas.chartingSpace.viewport.fitIntoViewport(pointB1)
+    pointB2 = canvas.chartingSpace.viewport.fitIntoViewport(pointB2)
+    pointB3 = canvas.chartingSpace.viewport.fitIntoViewport(pointB3)
+    pointB4 = canvas.chartingSpace.viewport.fitIntoViewport(pointB4)
 
     browserCanvasContext.setLineDash([0, 0])
 
diff --git a/ChartsSpace/PlottersManager.js b/ChartingSpace/PlottersManager.js
similarity index 100%
rename from ChartsSpace/PlottersManager.js
rename to ChartingSpace/PlottersManager.js
diff --git a/ChartsSpace/TimeMachine.js b/ChartingSpace/TimeMachine.js
similarity index 95%
rename from ChartsSpace/TimeMachine.js
rename to ChartingSpace/TimeMachine.js
index 406d5090d..502f5dbb9 100644
--- a/ChartsSpace/TimeMachine.js
+++ b/ChartingSpace/TimeMachine.js
@@ -71,8 +71,8 @@ function newTimeMachine () {
   }
 
   function finalize () {
-    canvas.chartSpace.viewport.eventHandler.stopListening(onViewportPositionChangedEventSuscriptionId)
-    canvas.chartSpace.viewport.eventHandler.stopListening(onViewportZoomChangedEventSuscriptionId)
+    canvas.chartingSpace.viewport.eventHandler.stopListening(onViewportPositionChangedEventSuscriptionId)
+    canvas.chartingSpace.viewport.eventHandler.stopListening(onViewportZoomChangedEventSuscriptionId)
 
     if (thisObject.timeScale !== undefined) {
       finalizeTimeScale()
@@ -147,8 +147,8 @@ function newTimeMachine () {
     onMouseOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
     onMouseNotOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
 
-    onViewportPositionChangedEventSuscriptionId = canvas.chartSpace.viewport.eventHandler.listenToEvent('Position Changed', onViewportPositionChanged)
-    onViewportZoomChangedEventSuscriptionId = canvas.chartSpace.viewport.eventHandler.listenToEvent('Zoom Changed', onViewportZoomChanged)
+    onViewportPositionChangedEventSuscriptionId = canvas.chartingSpace.viewport.eventHandler.listenToEvent('Position Changed', onViewportPositionChanged)
+    onViewportZoomChangedEventSuscriptionId = canvas.chartingSpace.viewport.eventHandler.listenToEvent('Zoom Changed', onViewportZoomChanged)
 
     thisObject.edgeEditor = newEdgeEditor()
     thisObject.edgeEditor.initialize(timeMachineCoordinateSystem)
@@ -322,8 +322,8 @@ function newTimeMachine () {
      must calculate.
      */
     let center = {
-      x: (canvas.chartSpace.viewport.visibleArea.bottomRight.x - canvas.chartSpace.viewport.visibleArea.bottomLeft.x) / 2,
-      y: (canvas.chartSpace.viewport.visibleArea.bottomRight.y - canvas.chartSpace.viewport.visibleArea.topRight.y) / 2
+      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
     }
 
     center = unTransformThisPoint(center, thisObject.container)
@@ -338,7 +338,7 @@ function newTimeMachine () {
   }
 
   function fitFunction (point, fullVisible, margin, topMargin, bottomMargin) {
-     /* We prevent a point to be out of the container AND out of the Chart Space in general */
+     /* We prevent a point to be out of the container AND out of the Charting Space in general */
 
     let returnPoint = {
       x: point.x,
@@ -368,7 +368,7 @@ function newTimeMachine () {
     if (returnPoint.y - margin - topMargin < upCorner.y) { returnPoint.y = upCorner.y + margin + topMargin }
     if (returnPoint.y + margin + bottomMargin > bottonCorner.y) { returnPoint.y = bottonCorner.y - margin - bottomMargin }
 
-    returnPoint = canvas.chartSpace.fitFunction(returnPoint, fullVisible)
+    returnPoint = canvas.chartingSpace.fitFunction(returnPoint, fullVisible)
 
     return returnPoint
   }
@@ -386,7 +386,7 @@ function newTimeMachine () {
   }
 
   function panelPhysics () {
-    if (thisObject.container.frame.isInViewPort() && canvas.chartSpace.viewport.zoomTargetLevel > ZOOM_OUT_THRESHOLD_FOR_HIDDING_PANELS) {
+    if (thisObject.container.frame.isInViewPort() && canvas.chartingSpace.viewport.zoomTargetLevel > 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 {
diff --git a/ChartsSpace/TimelineChart.js b/ChartingSpace/TimelineChart.js
similarity index 100%
rename from ChartsSpace/TimelineChart.js
rename to ChartingSpace/TimelineChart.js
diff --git a/ChartsSpace/ViewPort.js b/ChartingSpace/Viewport.js
similarity index 100%
rename from ChartsSpace/ViewPort.js
rename to ChartingSpace/Viewport.js
diff --git a/DesignerSpace/Workspace/Workspace.js b/DesignerSpace/Workspace/Workspace.js
index f5d85214d..d061988c8 100644
--- a/DesignerSpace/Workspace/Workspace.js
+++ b/DesignerSpace/Workspace/Workspace.js
@@ -140,7 +140,7 @@ function newWorkspace () {
           workingAtTask++
           break
         case 5:
-          canvas.chartSpace.reset()
+          canvas.chartingSpace.reset()
           workingAtTask++
           break
         case 6:
diff --git a/Frame.js b/Frame.js
index fc38fea12..3f8bb1590 100644
--- a/Frame.js
+++ b/Frame.js
@@ -52,7 +52,7 @@ function newFrame () {
   }
 
   function isInViewPort () {
-   /* This function is usefull to know if the object who has this frame is currently appearing at least in part at the canvas.chartSpace.viewport */
+   /* 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: 0,
@@ -69,7 +69,7 @@ function newFrame () {
     point1 = transformThisPoint(point1, thisObject.container)
     point3 = transformThisPoint(point3, thisObject.container)
 
-    if (point1.x < canvas.chartSpace.viewport.visibleArea.topRight.x && point1.y < canvas.chartSpace.viewport.visibleArea.bottomRight.y && point3.x > canvas.chartSpace.viewport.visibleArea.bottomLeft.x && point3.y > canvas.chartSpace.viewport.visibleArea.topLeft.y) {
+    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
diff --git a/Globals.js b/Globals.js
index d0441e059..27c3cde52 100644
--- a/Globals.js
+++ b/Globals.js
@@ -164,9 +164,9 @@ 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.chartSpace.viewport.initialize if the user had a prevous session with this same browser.
+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.chartSpace.viewport.initialize if the user had a prevous session with this same browser.
+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.
 let VERY_LARGE_NUMBER = 100000000000
 
 let CURRENT_TOP_MARGIN = window.canvasApp.topMargin
@@ -206,7 +206,7 @@ const PERIOD_05_MIN = "05-min";
 const PERIOD_01_MIN = "01-min";
 
 /*
-We define here the size of the chartSpace. It has to bee enough big in order to accomodate all the charts we expect to display in this space.
+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;
diff --git a/Panels/LayersPanel.js b/Panels/LayersPanel.js
index bfc43216f..ad3fd6190 100644
--- a/Panels/LayersPanel.js
+++ b/Panels/LayersPanel.js
@@ -60,8 +60,8 @@ function newLayersPanel () {
     thisObject.container.frame.height = headerHeight
 
     let position = { // Default position
-      x: canvas.chartSpace.viewport.visibleArea.topLeft.x,
-      y: canvas.chartSpace.viewport.visibleArea.topLeft.y
+      x: canvas.chartingSpace.viewport.visibleArea.topLeft.x,
+      y: canvas.chartingSpace.viewport.visibleArea.topLeft.y
     }
 
     thisObject.container.frame.position = position
@@ -189,7 +189,7 @@ function newLayersPanel () {
   function panelSizePhysics () {
     if (isInitialized === false || thisObject.visible === false || thisObject.isHidden === true) { return }
 
-    let viewPortHeight = canvas.chartSpace.viewport.visibleArea.bottomLeft.y - canvas.chartSpace.viewport.visibleArea.topLeft.y
+    let viewPortHeight = canvas.chartingSpace.viewport.visibleArea.bottomLeft.y - canvas.chartingSpace.viewport.visibleArea.topLeft.y
 
     if (viewPortHeight < headerHeight) {
       thisObject.visible = false
diff --git a/Panels/PanelTabButton.js b/Panels/PanelTabButton.js
index 484fa66a8..2d4b37565 100644
--- a/Panels/PanelTabButton.js
+++ b/Panels/PanelTabButton.js
@@ -58,7 +58,7 @@ function newPanelTabButton () {
     upPosition.y = thisObject.parentContainer.frame.position.y
 
     downPosition.x = thisObject.parentContainer.frame.position.x
-    downPosition.y = canvas.chartSpace.viewport.visibleArea.bottomRight.y
+    downPosition.y = canvas.chartingSpace.viewport.visibleArea.bottomRight.y
 
     transitionPosition.x = upPosition.x
     transitionPosition.y = upPosition.y
@@ -96,10 +96,10 @@ function newPanelTabButton () {
     if (isInitialized === false) { return }
 
     upPosition.x = thisObject.parentContainer.frame.position.x
-    upPosition.y = canvas.chartSpace.viewport.visibleArea.topRight.y
+    upPosition.y = canvas.chartingSpace.viewport.visibleArea.topRight.y
 
     downPosition.x = thisObject.parentContainer.frame.position.x
-    downPosition.y = canvas.chartSpace.viewport.visibleArea.bottomRight.y
+    downPosition.y = canvas.chartingSpace.viewport.visibleArea.bottomRight.y
 
     if (thisObject.status === 'going down') {
       if (transitionPosition.y < downPosition.y) {
diff --git a/Panels/PlotterPanel.js b/Panels/PlotterPanel.js
index 28d38f488..24ef4f91f 100644
--- a/Panels/PlotterPanel.js
+++ b/Panels/PlotterPanel.js
@@ -47,8 +47,8 @@ function newPlotterPanel () {
     thisObject.container.frame.width = UI_PANEL.WIDTH.NORMAL
     thisObject.container.frame.height = UI_PANEL.HEIGHT.NORMAL
 
-    thisObject.container.frame.position.x = canvas.chartSpace.viewport.visibleArea.topRight.x - thisObject.container.frame.width - thisObject.container.frame.width * Math.random() * 8
-    thisObject.container.frame.position.y = canvas.chartSpace.viewport.visibleArea.bottomLeft.y - thisObject.container.frame.height - thisObject.container.frame.height * Math.random() * 1.5
+    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
diff --git a/Plotter.js b/Plotter.js
index 095b1d6f5..398d96b2b 100644
--- a/Plotter.js
+++ b/Plotter.js
@@ -25,7 +25,7 @@ function newPlotter () {
 
   let coordinateSystem
   let plotterModuleConfig
-  let slotHeight = (canvas.chartSpace.viewport.visibleArea.bottomRight.y - canvas.chartSpace.viewport.visibleArea.topLeft.y) / 10  // This is the amount of slots available
+  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()
   let atMousePositionStrokeStyles = new Map()
@@ -61,8 +61,8 @@ function newPlotter () {
     try {
       /* Stop listening to the necesary events. */
       thisObject.container.eventHandler.stopListening(onMouseOverEventSuscriptionId)
-      canvas.chartSpace.viewport.eventHandler.stopListening(zoomChangedEventSubscriptionId)
-      canvas.chartSpace.viewport.eventHandler.stopListening(offsetChangedEventSubscriptionId)
+      canvas.chartingSpace.viewport.eventHandler.stopListening(zoomChangedEventSubscriptionId)
+      canvas.chartingSpace.viewport.eventHandler.stopListening(offsetChangedEventSubscriptionId)
       canvas.eventHandler.stopListening(dragFinishedEventSubscriptionId)
       thisObject.container.eventHandler.stopListening(dimmensionsChangedEventSubscriptionId)
       marketFiles.eventHandler.stopListening(marketFilesUpdatedEventSubscriptionId)
@@ -113,8 +113,8 @@ function newPlotter () {
       fileCursor = dailyFiles.getFileCursor(pTimeFrame)
 
       /* Listen to the necesary events. */
-      zoomChangedEventSubscriptionId = canvas.chartSpace.viewport.eventHandler.listenToEvent('Zoom Changed', onViewportZoomChanged)
-      offsetChangedEventSubscriptionId = canvas.chartSpace.viewport.eventHandler.listenToEvent('Position Changed', onViewportPositionChanged)
+      zoomChangedEventSubscriptionId = canvas.chartingSpace.viewport.eventHandler.listenToEvent('Zoom Changed', onViewportZoomChanged)
+      offsetChangedEventSubscriptionId = canvas.chartingSpace.viewport.eventHandler.listenToEvent('Position Changed', onViewportPositionChanged)
       dragFinishedEventSubscriptionId = canvas.eventHandler.listenToEvent('Drag Finished', onDragFinished)
       marketFilesUpdatedEventSubscriptionId = marketFiles.eventHandler.listenToEvent('Files Updated', onMarketFilesUpdated)
       dailyFilesUpdatedEventSubscriptionId = dailyFiles.eventHandler.listenToEvent('Files Updated', onDailyFilesUpdated)
@@ -376,8 +376,8 @@ function newPlotter () {
 
       let daysOnSides = getSideDays(timeFrame)
 
-      let leftDate = getDateFromPointAtBrowserCanvas(canvas.chartSpace.viewport.visibleArea.topLeft, thisObject.container, coordinateSystem)
-      let rightDate = getDateFromPointAtBrowserCanvas(canvas.chartSpace.viewport.visibleArea.topRight, thisObject.container, coordinateSystem)
+      let leftDate = getDateFromPointAtBrowserCanvas(canvas.chartingSpace.viewport.visibleArea.topLeft, thisObject.container, coordinateSystem)
+      let rightDate = getDateFromPointAtBrowserCanvas(canvas.chartingSpace.viewport.visibleArea.topRight, thisObject.container, coordinateSystem)
 
       let dateDiff = rightDate.valueOf() - leftDate.valueOf()
 
@@ -429,8 +429,8 @@ function newPlotter () {
 
       let daysOnSides = getSideDays(timeFrame)
 
-      let leftDate = getDateFromPointAtBrowserCanvas(canvas.chartSpace.viewport.visibleArea.topLeft, thisObject.container, coordinateSystem)
-      let rightDate = getDateFromPointAtBrowserCanvas(canvas.chartSpace.viewport.visibleArea.topRight, thisObject.container, coordinateSystem)
+      let leftDate = getDateFromPointAtBrowserCanvas(canvas.chartingSpace.viewport.visibleArea.topLeft, thisObject.container, coordinateSystem)
+      let rightDate = getDateFromPointAtBrowserCanvas(canvas.chartingSpace.viewport.visibleArea.topRight, thisObject.container, coordinateSystem)
 
       let dateDiff = rightDate.valueOf() - leftDate.valueOf()
 
@@ -520,13 +520,13 @@ function newPlotter () {
         beginPoint = transformThisPoint(beginPoint, thisObject.container)
         endPoint = transformThisPoint(endPoint, thisObject.container)
 
-        beginPoint = canvas.chartSpace.viewport.fitIntoVisibleArea(beginPoint)
-        endPoint = canvas.chartSpace.viewport.fitIntoVisibleArea(endPoint)
+        beginPoint = canvas.chartingSpace.viewport.fitIntoVisibleArea(beginPoint)
+        endPoint = canvas.chartingSpace.viewport.fitIntoVisibleArea(endPoint)
 
         beginPoint = thisObject.fitFunction(beginPoint)
         endPoint = thisObject.fitFunction(endPoint)
 
-        if (endPoint.x < canvas.chartSpace.viewport.visibleArea.bottomLeft.x || beginPoint.x > canvas.chartSpace.viewport.visibleArea.bottomRight.x) {
+        if (endPoint.x < canvas.chartingSpace.viewport.visibleArea.bottomLeft.x || beginPoint.x > canvas.chartingSpace.viewport.visibleArea.bottomRight.x) {
           continue
         }
 
@@ -577,7 +577,7 @@ function newPlotter () {
               */
                 dataPoint = coordinateSystem.transformThisPoint(dataPoint)
                 dataPoint = transformThisPoint(dataPoint, thisObject.container)
-                dataPoint = canvas.chartSpace.viewport.fitIntoVisibleArea(dataPoint)
+                dataPoint = canvas.chartingSpace.viewport.fitIntoVisibleArea(dataPoint)
                 dataPoint = thisObject.fitFunction(dataPoint)
 
               /* Store the data point at the local map */
@@ -586,7 +586,7 @@ function newPlotter () {
                 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.chartSpace.viewport.visibleArea.topLeft.y
+                    dataPoint.y = (-1) * y * coordinateSystem.scale.y + (plotterModuleConfig.slot.number - 1) * slotHeight + canvas.chartingSpace.viewport.visibleArea.topLeft.y
                   }
                 }
               }
@@ -726,7 +726,7 @@ function newPlotter () {
                 y: dataPointObject.y
               }
               /* We make sure the points do not fall outside the viewport visible area. This step allways need to be done.  */
-              dataPoint = canvas.chartSpace.viewport.fitIntoVisibleArea(dataPoint)
+              dataPoint = canvas.chartingSpace.viewport.fitIntoVisibleArea(dataPoint)
               dataPoint = thisObject.fitFunction(dataPoint)
               if (k === 0) {
                 browserCanvasContext.moveTo(dataPoint.x, dataPoint.y)
diff --git a/Project.njsproj b/Project.njsproj
index 3dedf7ed3..886b43884 100644
--- a/Project.njsproj
+++ b/Project.njsproj
@@ -145,7 +145,7 @@
     <Compile Include="Candle.js" />
     <Compile Include="Canvas.js" />
     <Compile Include="Scales\ChartGrid.js" />
-    <Compile Include="Spaces\ChartSpace.js" />
+    <Compile Include="Spaces\ChartingSpace.js" />
     <Compile Include="ChartUtilities.js" />
     <Compile Include="Container.js" />
     <Compile Include="Dashboard.js" />
diff --git a/Scales/TimeFrameScale.js b/Scales/TimeFrameScale.js
index d75038abd..d4fc855e7 100644
--- a/Scales/TimeFrameScale.js
+++ b/Scales/TimeFrameScale.js
@@ -61,7 +61,7 @@ function newTimeFrameScale () {
 
   function finalize () {
     thisObject.container.eventHandler.stopListening(onMouseWheelEventSubscriptionId)
-    canvas.chartSpace.viewport.eventHandler.stopListening(onViewportZoomChangedEventSubscriptionId)
+    canvas.chartingSpace.viewport.eventHandler.stopListening(onViewportZoomChangedEventSubscriptionId)
     thisObject.container.eventHandler.stopListening(onMouseOverEventSubscriptionId)
     thisObject.container.eventHandler.stopListening(onMouseNotOverEventSubscriptionId)
 
@@ -81,7 +81,7 @@ function newTimeFrameScale () {
     newTimeFrame()
 
     onMouseWheelEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
-    onViewportZoomChangedEventSubscriptionId = canvas.chartSpace.viewport.eventHandler.listenToEvent('Zoom Changed', onViewportZoomChanged)
+    onViewportZoomChangedEventSubscriptionId = canvas.chartingSpace.viewport.eventHandler.listenToEvent('Zoom Changed', onViewportZoomChanged)
     onMouseOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
     onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
   }
@@ -123,13 +123,13 @@ function newTimeFrameScale () {
   }
 
   function zoomOutPhysics () {
-    if ((thisObject.isVisible === true && previousIsVisible === false) && (canvas.chartSpace.viewport.zoomTargetLevel >= ZOOM_OUT_THRESHOLD_FOR_CHANGING_TIME_FRAME)) {
+    if ((thisObject.isVisible === true && previousIsVisible === false) && (canvas.chartingSpace.viewport.zoomTargetLevel >= ZOOM_OUT_THRESHOLD_FOR_CHANGING_TIME_FRAME)) {
       let event = {}
       event.timeFrame = thisObject.timeFrame
       thisObject.container.eventHandler.raiseEvent('Time Frame Value Changed', event)
       previousIsVisible = true
     }
-    if ((thisObject.isVisible === false && previousIsVisible === true) || (canvas.chartSpace.viewport.zoomTargetLevel < ZOOM_OUT_THRESHOLD_FOR_CHANGING_TIME_FRAME)) {
+    if ((thisObject.isVisible === false && previousIsVisible === true) || (canvas.chartingSpace.viewport.zoomTargetLevel < ZOOM_OUT_THRESHOLD_FOR_CHANGING_TIME_FRAME)) {
       let event = {}
       event.timeFrame = ONE_DAY_IN_MILISECONDS
       thisObject.container.eventHandler.raiseEvent('Time Frame Value Changed', event)
diff --git a/Spaces/ChartSpace.js b/Spaces/ChartingSpace.js
similarity index 95%
rename from Spaces/ChartSpace.js
rename to Spaces/ChartingSpace.js
index 1251ceeb2..93b053060 100644
--- a/Spaces/ChartSpace.js
+++ b/Spaces/ChartingSpace.js
@@ -6,8 +6,8 @@ changes, then all charts in it are replotted with the corresponging data.
 
 */
 
-function newChartSpace () {
-  const MODULE_NAME = 'Chart Space'
+function newChartingSpace () {
+  const MODULE_NAME = 'Charting Space'
   const ERROR_LOG = true
   const logger = newWebDebugLog()
   logger.fileName = MODULE_NAME
@@ -167,7 +167,7 @@ function newChartSpace () {
       y: browserCanvas.height * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100
     }
 
-    canvas.chartSpace.viewport.displace(displaceVector)
+    canvas.chartingSpace.viewport.displace(displaceVector)
   }
 
   function oneScreenDown () {
@@ -176,7 +176,7 @@ function newChartSpace () {
       y: -browserCanvas.height * PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT / 100
     }
 
-    canvas.chartSpace.viewport.displace(displaceVector)
+    canvas.chartingSpace.viewport.displace(displaceVector)
   }
 
   function oneScreenLeft () {
@@ -185,7 +185,7 @@ function newChartSpace () {
       y: 0
     }
 
-    canvas.chartSpace.viewport.displace(displaceVector, true)
+    canvas.chartingSpace.viewport.displace(displaceVector, true)
   }
 
   function oneScreenRight () {
@@ -194,7 +194,7 @@ function newChartSpace () {
       y: 0
     }
 
-    canvas.chartSpace.viewport.displace(displaceVector, true)
+    canvas.chartingSpace.viewport.displace(displaceVector, true)
   }
 
   function fitFunction (point, fullVisible) {
@@ -317,8 +317,8 @@ function newChartSpace () {
       function onTimeMachineInitialized () {
         thisObject.timeMachines.push(timeMachine)
         timeMachine.payload.uiObject.setValue('')
-        if (canvas.chartSpace.viewport !== undefined) {
-          canvas.chartSpace.viewport.raiseEvents() // These events will impacts on objects just initialized.
+        if (canvas.chartingSpace.viewport !== undefined) {
+          canvas.chartingSpace.viewport.raiseEvents() // These events will impacts on objects just initialized.
         }
       }
     }
@@ -333,8 +333,8 @@ function newChartSpace () {
       thisObject.visible = true
     }
 
-    if (canvas.chartSpace.viewport !== undefined) {
-      canvas.chartSpace.viewport.resize()
+    if (canvas.chartingSpace.viewport !== undefined) {
+      canvas.chartingSpace.viewport.resize()
     }
   }
 
diff --git a/Spaces/CockpitSpace.js b/Spaces/CockpitSpace.js
index e866d859d..b2d04b483 100644
--- a/Spaces/CockpitSpace.js
+++ b/Spaces/CockpitSpace.js
@@ -161,8 +161,8 @@
        spacePosition: COCKPIT_SPACE_POSITION
      }
      window.localStorage.setItem(MODULE_NAME, JSON.stringify(storage))
-     if (canvas.chartSpace.viewport !== undefined) {
-       canvas.chartSpace.viewport.resize()
+     if (canvas.chartingSpace.viewport !== undefined) {
+       canvas.chartingSpace.viewport.resize()
      }
    }
 
diff --git a/Spaces/PanelsSpace.js b/Spaces/PanelsSpace.js
index 6efa86a7a..b1bd3ebc6 100644
--- a/Spaces/PanelsSpace.js
+++ b/Spaces/PanelsSpace.js
@@ -43,8 +43,8 @@ function newPanelsSpace () {
       case 'Layers Panel':
         {
           panel = newLayersPanel()
-          panel.fitFunction = canvas.chartSpace.fitFunction
-          panel.container.isVisibleFunction = canvas.chartSpace.isThisPointVisible
+          panel.fitFunction = canvas.chartingSpace.fitFunction
+          panel.container.isVisibleFunction = canvas.chartingSpace.isThisPointVisible
           panel.type = 'Layers Panel'
           break
         }
@@ -52,14 +52,14 @@ function newPanelsSpace () {
         {
           if (pParameters.panelNode.code.isLegacy !== true) {
             panel = newPlotterPanel()
-            panel.fitFunction = canvas.chartSpace.fitFunction
-            panel.container.isVisibleFunction = canvas.chartSpace.isThisPointVisible
+            panel.fitFunction = canvas.chartingSpace.fitFunction
+            panel.container.isVisibleFunction = canvas.chartingSpace.isThisPointVisible
             panel.session = pSession
             panel.initialize(pParameters.panelNode)
           } else {
             panel = getNewPlotterPanel(pParameters.dataMine, pParameters.plotterCodeName, pParameters.moduleCodeName, pParameters.panelNode.code.codeName)
-            panel.fitFunction = canvas.chartSpace.fitFunction
-            panel.container.isVisibleFunction = canvas.chartSpace.isThisPointVisible
+            panel.fitFunction = canvas.chartingSpace.fitFunction
+            panel.container.isVisibleFunction = canvas.chartingSpace.isThisPointVisible
             panel.session = pSession
             panel.initialize()
           }
@@ -130,7 +130,7 @@ function newPanelsSpace () {
     if (thisObject.panels !== undefined) {
       for (let i = 0; i < thisObject.panels.length; i++) {
         let panel = thisObject.panels[i]
-        let owner = canvas.chartSpace.inViewport.get(panel.owner)
+        let owner = canvas.chartingSpace.inViewport.get(panel.owner)
         if (owner !== undefined) {
           if (panel.physics !== undefined) {
             panel.physics()
@@ -162,8 +162,8 @@ function newPanelsSpace () {
         centerPoint.y = centerPoint.y + panel.container.frame.height / 2
 
         /* Lets see which quadrant the panel is at */
-        let verticalLine = (canvas.chartSpace.viewport.visibleArea.topRight.x - canvas.chartSpace.viewport.visibleArea.topLeft.x) / 2 + canvas.chartSpace.viewport.visibleArea.topLeft.x
-        let horizontalLine = (canvas.chartSpace.viewport.visibleArea.bottomRight.y - canvas.chartSpace.viewport.visibleArea.topRight.y) / 2 + canvas.chartSpace.viewport.visibleArea.topRight.y
+        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') {
@@ -208,18 +208,18 @@ function newPanelsSpace () {
             panel.container.frame.position.x = browserCanvas.width - panel.container.frame.width
           }
         }
-        if (panel.container.frame.height <= canvas.chartSpace.viewport.visibleArea.bottomRight.y - canvas.chartSpace.viewport.visibleArea.topRight.y) {
+        if (panel.container.frame.height <= canvas.chartingSpace.viewport.visibleArea.bottomRight.y - canvas.chartingSpace.viewport.visibleArea.topRight.y) {
           if (panel.gravitatesTowards === 'topLeft' || panel.gravitatesTowards === 'topRight') {
             panel.container.frame.position.y = panel.container.frame.position.y - panel.container.speed.y
             isOverlapping(i, panel.container)
-            if (panel.container.frame.position.y < canvas.chartSpace.viewport.visibleArea.topLeft.y) {
-              panel.container.frame.position.y = canvas.chartSpace.viewport.visibleArea.topLeft.y
+            if (panel.container.frame.position.y < canvas.chartingSpace.viewport.visibleArea.topLeft.y) {
+              panel.container.frame.position.y = canvas.chartingSpace.viewport.visibleArea.topLeft.y
             }
           } else {
             panel.container.frame.position.y = panel.container.frame.position.y + panel.container.speed.y
             isOverlapping(i, panel.container)
-            if (panel.container.frame.position.y + panel.container.frame.height > canvas.chartSpace.viewport.visibleArea.bottomRight.y) {
-              panel.container.frame.position.y = canvas.chartSpace.viewport.visibleArea.bottomRight.y - panel.container.frame.height
+            if (panel.container.frame.position.y + panel.container.frame.height > canvas.chartingSpace.viewport.visibleArea.bottomRight.y) {
+              panel.container.frame.position.y = canvas.chartingSpace.viewport.visibleArea.bottomRight.y - panel.container.frame.height
             }
           }
         }
@@ -317,7 +317,7 @@ function newPanelsSpace () {
 
     for (let i = 0; i < thisObject.panels.length; i++) {
       let panel = thisObject.panels[i]
-      let owner = canvas.chartSpace.inViewport.get(panel.owner)
+      let owner = canvas.chartingSpace.inViewport.get(panel.owner)
       if (owner !== undefined) {
         if (panel.isVisible === true && panel.isHidden === false) {
           panel.draw()
@@ -336,7 +336,7 @@ function newPanelsSpace () {
       */
     for (let i = thisObject.panels.length - 1; i >= 0; i--) {
       let panel = thisObject.panels[i]
-      let owner = canvas.chartSpace.inViewport.get(panel.owner)
+      let owner = canvas.chartingSpace.inViewport.get(panel.owner)
       if (owner !== undefined) {
         if (panel.isVisible === true && panel.isHidden === false) {
           container = panel.getContainer(point)
diff --git a/Spaces/TopSpace.js b/Spaces/TopSpace.js
index ff1b7786f..905a93894 100644
--- a/Spaces/TopSpace.js
+++ b/Spaces/TopSpace.js
@@ -45,7 +45,7 @@ function newTopSpace () {
 
     thisObject.container.frame.position.x = 0
     try {
-      thisObject.container.frame.position.y = canvas.chartSpace.viewport.visibleArea.bottomLeft.y
+      thisObject.container.frame.position.y = canvas.chartingSpace.viewport.visibleArea.bottomLeft.y
     } catch (e) { }
   }
 
diff --git a/Utilities.js b/Utilities.js
index 8079fe872..2588156b9 100644
--- a/Utilities.js
+++ b/Utilities.js
@@ -114,15 +114,15 @@ function transformThisPoint (point, container) {
 
   point = container.frame.frameThisPoint(point)
 
-    /* We pass this point through the canvas.chartSpace.viewport lends, meaning we apply the canvas.chartSpace.viewport zoom and displacement. */
+    /* We pass this point through the canvas.chartingSpace.viewport lends, meaning we apply the canvas.chartingSpace.viewport zoom and displacement. */
 
-  point = canvas.chartSpace.viewport.transformThisPoint(point)
+  point = canvas.chartingSpace.viewport.transformThisPoint(point)
 
   return point
 }
 
 function unTransformThisPoint (point, container) {
-  point = canvas.chartSpace.viewport.unTransformThisPoint(point)
+  point = canvas.chartingSpace.viewport.unTransformThisPoint(point)
   point = container.frame.unframeThisPoint(point)
 
   return point
@@ -174,7 +174,7 @@ function getRateFromPointAtBrowserCanvas (point, container, coordinateSystem) {
   return point.y
 }
 
-function getRateFromPointAtChartSpace (point, container, coordinateSystem) {
+function getRateFromPointAtChartingSpace (point, container, coordinateSystem) {
   point = container.frame.unframeThisPoint(point)
   point = coordinateSystem.unInverseTransform(point, container.frame.height)
 
@@ -200,14 +200,14 @@ function moveToUserPosition (container, currentDate, currentRate, coordinateSyst
     y: currentRate
   }
 
-  /* Put this point in the coordinate system of the canvas.chartSpace.viewport */
+  /* Put this point in the coordinate system of the canvas.chartingSpace.viewport */
   targetPoint = coordinateSystem.transformThisPoint(targetPoint)
   targetPoint = transformThisPoint(targetPoint, container)
 
   let displaceVector
 
-  let targetNoZoom = canvas.chartSpace.viewport.unTransformThisPoint(targetPoint)
-  let mouseNoZoom = canvas.chartSpace.viewport.unTransformThisPoint(mousePosition)
+  let targetNoZoom = canvas.chartingSpace.viewport.unTransformThisPoint(targetPoint)
+  let mouseNoZoom = canvas.chartingSpace.viewport.unTransformThisPoint(mousePosition)
 
   displaceVector = {
     x: mouseNoZoom.x - targetNoZoom.x,

From e68d3d90d6c86a58de4432a0cb11e61d8fb7012c Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Fri, 14 Feb 2020 14:24:31 +0100
Subject: [PATCH 64/81] new icons

---
 Panels/PanelsVisibleButton.js | 2 +-
 Scales/AutoScaleButton.js     | 8 ++++----
 Spaces/DesignerSpace.js       | 8 +++++++-
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/Panels/PanelsVisibleButton.js b/Panels/PanelsVisibleButton.js
index 89bb719a0..17629f229 100644
--- a/Panels/PanelsVisibleButton.js
+++ b/Panels/PanelsVisibleButton.js
@@ -76,7 +76,7 @@ function newPanelsVisibleButton () {
     if (thisObject.showPanels === true) {
       icon = canvas.designerSpace.iconCollection.get('plotter-panel')
     } else {
-      icon = canvas.designerSpace.iconCollection.get('social-bot')
+      icon = canvas.designerSpace.iconCollection.get('toggle-panel-off')
     }
 
     drawIcon(icon, 1 / 2, 1 / 2, 0, 0, 14, thisObject.container)
diff --git a/Scales/AutoScaleButton.js b/Scales/AutoScaleButton.js
index 0bfd649e2..595f9df7d 100644
--- a/Scales/AutoScaleButton.js
+++ b/Scales/AutoScaleButton.js
@@ -96,16 +96,16 @@ function newAutoScaleButton () {
   function draw () {
     let icon
     if (thisObject.autoMinScale === false && thisObject.autoMaxScale === false) {
-      icon = canvas.designerSpace.iconCollection.get('plotter-panel')
+      icon = canvas.designerSpace.iconCollection.get('toggle-auto-scale-manual')
     }
     if (thisObject.autoMinScale === true && thisObject.autoMaxScale === false) {
-      icon = canvas.designerSpace.iconCollection.get('shapes-polygon-body')
+      icon = canvas.designerSpace.iconCollection.get('toggle-auto-scale-auto-min')
     }
     if (thisObject.autoMinScale === false && thisObject.autoMaxScale === true) {
-      icon = canvas.designerSpace.iconCollection.get('social-bot')
+      icon = canvas.designerSpace.iconCollection.get('toggle-auto-scale-auto-max')
     }
     if (thisObject.autoMinScale === true && thisObject.autoMaxScale === true) {
-      icon = canvas.designerSpace.iconCollection.get('startup')
+      icon = canvas.designerSpace.iconCollection.get('toggle-auto-scale-auto-min-max')
     }
 
     drawIcon(icon, 1 / 2, 1 / 2, 0, 0, 14, thisObject.container)
diff --git a/Spaces/DesignerSpace.js b/Spaces/DesignerSpace.js
index bf6a78ee5..2cd81dc8e 100644
--- a/Spaces/DesignerSpace.js
+++ b/Spaces/DesignerSpace.js
@@ -241,7 +241,13 @@ function newDesignerSpace () {
       'task-manager',
       'session-based-data',
       'session-independent-data',
-      'session-reference'
+      'session-reference',
+      'cluster',
+      'toggle-auto-scale-manual',
+      'toggle-auto-scale-auto-min-max',
+      'toggle-auto-scale-auto-max',
+      'toggle-auto-scale-auto-min',
+      'toggle-panel-off'
     ]
 
     for (let i = 0; i < iconsNames.length; i++) {

From da6836f77c7c6e6ed80fa6b2b465def6b844c64f Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Fri, 14 Feb 2020 14:48:57 +0100
Subject: [PATCH 65/81] Designer Refactoring

---
 Canvas.js                                     | 28 +++++++++----------
 ChartingSpace/TimeMachine.js                  |  4 +--
 Dashboard.js                                  |  2 +-
 .../FunctionLibraries/ChainAttachDetach.js    |  0
 .../FunctionLibraries/NodeChildren.js         |  0
 .../FunctionLibraries/NodeCloning.js          |  0
 .../FunctionLibraries/NodeDeleter.js          |  0
 .../Workspace/FunctionLibraries/OnFocus.js    |  0
 .../FunctionLibraries/ProtocolNode.js         |  0
 .../ReferenceAttachDetach.js                  |  0
 .../FunctionLibraries/SessionFunctions.js     |  0
 .../FunctionLibraries/ShortcutKeys.js         |  0
 .../FunctionLibraries/TaskFunctions.js        |  0
 .../FunctionLibraries/UiObjectsFromNodes.js   |  2 +-
 .../Workspace/Workspace.js                    |  0
 FloatingSpace/CircularMenuItem.js             | 16 +++++------
 FloatingSpace/FloatingObject.js               |  2 +-
 FloatingSpace/UiObject.js                     | 14 +++++-----
 Panels/Layer.js                               |  6 ++--
 Panels/LayersPanel.js                         |  4 +--
 Panels/PanelsVisibleButton.js                 |  4 +--
 Scales/AutoScaleButton.js                     |  8 +++---
 Scales/RateScale.js                           |  4 +--
 Scales/TimeFrameScale.js                      |  4 +--
 Scales/TimeScale.js                           |  4 +--
 Spaces/ChartingSpace.js                       |  4 +--
 Spaces/CockpitSpace.js                        | 10 +++----
 Spaces/{DesignerSpace.js => DesignSpace.js}   |  4 +--
 28 files changed, 60 insertions(+), 60 deletions(-)
 rename {DesignerSpace => DesignSpace}/Workspace/FunctionLibraries/ChainAttachDetach.js (100%)
 rename {DesignerSpace => DesignSpace}/Workspace/FunctionLibraries/NodeChildren.js (100%)
 rename {DesignerSpace => DesignSpace}/Workspace/FunctionLibraries/NodeCloning.js (100%)
 rename {DesignerSpace => DesignSpace}/Workspace/FunctionLibraries/NodeDeleter.js (100%)
 rename {DesignerSpace => DesignSpace}/Workspace/FunctionLibraries/OnFocus.js (100%)
 rename {DesignerSpace => DesignSpace}/Workspace/FunctionLibraries/ProtocolNode.js (100%)
 rename {DesignerSpace => DesignSpace}/Workspace/FunctionLibraries/ReferenceAttachDetach.js (100%)
 rename {DesignerSpace => DesignSpace}/Workspace/FunctionLibraries/SessionFunctions.js (100%)
 rename {DesignerSpace => DesignSpace}/Workspace/FunctionLibraries/ShortcutKeys.js (100%)
 rename {DesignerSpace => DesignSpace}/Workspace/FunctionLibraries/TaskFunctions.js (100%)
 rename {DesignerSpace => DesignSpace}/Workspace/FunctionLibraries/UiObjectsFromNodes.js (99%)
 rename {DesignerSpace => DesignSpace}/Workspace/Workspace.js (100%)
 rename Spaces/{DesignerSpace.js => DesignSpace.js} (98%)

diff --git a/Canvas.js b/Canvas.js
index 13b89c586..f2fd2a639 100644
--- a/Canvas.js
+++ b/Canvas.js
@@ -37,7 +37,7 @@ function newCanvas () {
     panelsSpace: undefined,
     cockpitSpace: undefined,
     bottomSpace: undefined,
-    designerSpace: undefined,
+    designSpace: undefined,
     animation: undefined,
     initialize: initialize,
     finalize: finalize
@@ -95,8 +95,8 @@ function newCanvas () {
       thisObject.topSpace = newTopSpace()
       thisObject.topSpace.initialize()
 
-      thisObject.designerSpace = newDesignerSpace()
-      thisObject.designerSpace.initialize()
+      thisObject.designSpace = newDesignSpace()
+      thisObject.designSpace.initialize()
 
       thisObject.cockpitSpace = newCockpitSpace()
       thisObject.cockpitSpace.initialize()
@@ -123,7 +123,7 @@ function newCanvas () {
       animation.addCallBackFunction('CockpitSpace Physics', thisObject.cockpitSpace.physics)
       animation.addCallBackFunction('Floating Space Physics', thisObject.floatingSpace.physics)
       animation.addCallBackFunction('Charting Space Physics', thisObject.chartingSpace.physics)
-      animation.addCallBackFunction('Designer Space Physics', thisObject.designerSpace.physics)
+      animation.addCallBackFunction('Design Space Physics', thisObject.designSpace.physics)
       animation.addCallBackFunction('Panels Space Physics', thisObject.panelsSpace.physics)
 
       /* Spcaces Drawing */
@@ -131,7 +131,7 @@ function newCanvas () {
       animation.addCallBackFunction('Charting Space Draw', thisObject.chartingSpace.draw)
       animation.addCallBackFunction('Panels Space', thisObject.panelsSpace.draw)
       animation.addCallBackFunction('CockpitSpace Draw', thisObject.cockpitSpace.draw)
-      animation.addCallBackFunction('Designer Space Draw', thisObject.designerSpace.draw)
+      animation.addCallBackFunction('Design Space Draw', thisObject.designSpace.draw)
       animation.addCallBackFunction('Top Space Draw', thisObject.topSpace.draw)
       animation.addCallBackFunction('Splash Screen Draw', splashScreen.draw)
       animation.start()
@@ -231,7 +231,7 @@ function newCanvas () {
   function onKeyDown (event) {
     checkMediaRecording(event)
 
-    let nodeOnFocus = canvas.designerSpace.workspace.getNodeThatIsOnFocus()
+    let nodeOnFocus = canvas.designSpace.workspace.getNodeThatIsOnFocus()
     if (nodeOnFocus !== undefined) {
       if (nodeOnFocus.payload.uiObject.codeEditor !== undefined) {
         if (nodeOnFocus.payload.uiObject.codeEditor.visible === true) {
@@ -360,7 +360,7 @@ function newCanvas () {
         /* From here we prevent the default behaviour */
         event.preventDefault()
 
-        let nodeUsingThisKey = canvas.designerSpace.workspace.getNodeByShortcutKey(event.key)
+        let nodeUsingThisKey = canvas.designSpace.workspace.getNodeByShortcutKey(event.key)
 
         if (nodeOnFocus === undefined && nodeUsingThisKey !== undefined) {
           /* Then we displace the whole workspace to center it at the node using this key */
@@ -451,7 +451,7 @@ function newCanvas () {
             x: event.x,
             y: event.y
           }
-          thisObject.designerSpace.workspace.spawn(reader.result, mousePosition)
+          thisObject.designSpace.workspace.spawn(reader.result, mousePosition)
         }
       }
     } catch (err) {
@@ -470,9 +470,9 @@ function newCanvas () {
 
       let container
 
-            /* We check if the mouse is over an element of the Designer Space / */
+            /* We check if the mouse is over an element of the Design Space / */
 
-      container = thisObject.designerSpace.getContainer(point)
+      container = thisObject.designSpace.getContainer(point)
 
       if (container !== undefined && container.isDraggeable === true) {
         containerBeingDragged = container
@@ -577,9 +577,9 @@ function newCanvas () {
 
       let container
 
-            /* We check if the mouse is over an element of the Designer Space / */
+            /* We check if the mouse is over an element of the Design Space / */
 
-      container = thisObject.designerSpace.getContainer(point)
+      container = thisObject.designSpace.getContainer(point)
 
       if (container !== undefined && container.isClickeable === true) {
         container.eventHandler.raiseEvent('onMouseClick', point)
@@ -712,8 +712,8 @@ function newCanvas () {
       let container
 
       /* We check if the mouse is over an element of the Strategy Space / */
-      if (thisObject.designerSpace !== undefined) {
-        container = thisObject.designerSpace.getContainer(point)
+      if (thisObject.designSpace !== undefined) {
+        container = thisObject.designSpace.getContainer(point)
 
         if (container !== undefined && container.detectMouseOver === true) {
           containerFound()
diff --git a/ChartingSpace/TimeMachine.js b/ChartingSpace/TimeMachine.js
index 502f5dbb9..0d559967f 100644
--- a/ChartingSpace/TimeMachine.js
+++ b/ChartingSpace/TimeMachine.js
@@ -530,7 +530,7 @@ function newTimeMachine () {
         if (thisObject.rateScale !== undefined && thisObject.rateScale.isVisible === true) { thisObject.rateScale.draw() }
       }
     } else {
-      let icon = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.type)
+      let icon = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type)
       if (icon !== undefined) {
         if (icon.canDrawIcon === true) {
           let imageSize = 40
@@ -580,7 +580,7 @@ function newTimeMachine () {
     let imageSize = 25
     let fontSize = 25
     let opacity = 1
-    let icon = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.type)
+    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)
diff --git a/Dashboard.js b/Dashboard.js
index 3d82092d0..5b33252a4 100644
--- a/Dashboard.js
+++ b/Dashboard.js
@@ -88,7 +88,7 @@ function newDashboard () {
   function setBrowserEvents () {
     window.onbeforeunload = onBrowserClosed
     function onBrowserClosed () {
-      // canvas.designerSpace.workspace.stopAllRunningTasks()
+      // canvas.designSpace.workspace.stopAllRunningTasks()
     }
   }
 }
diff --git a/DesignerSpace/Workspace/FunctionLibraries/ChainAttachDetach.js b/DesignSpace/Workspace/FunctionLibraries/ChainAttachDetach.js
similarity index 100%
rename from DesignerSpace/Workspace/FunctionLibraries/ChainAttachDetach.js
rename to DesignSpace/Workspace/FunctionLibraries/ChainAttachDetach.js
diff --git a/DesignerSpace/Workspace/FunctionLibraries/NodeChildren.js b/DesignSpace/Workspace/FunctionLibraries/NodeChildren.js
similarity index 100%
rename from DesignerSpace/Workspace/FunctionLibraries/NodeChildren.js
rename to DesignSpace/Workspace/FunctionLibraries/NodeChildren.js
diff --git a/DesignerSpace/Workspace/FunctionLibraries/NodeCloning.js b/DesignSpace/Workspace/FunctionLibraries/NodeCloning.js
similarity index 100%
rename from DesignerSpace/Workspace/FunctionLibraries/NodeCloning.js
rename to DesignSpace/Workspace/FunctionLibraries/NodeCloning.js
diff --git a/DesignerSpace/Workspace/FunctionLibraries/NodeDeleter.js b/DesignSpace/Workspace/FunctionLibraries/NodeDeleter.js
similarity index 100%
rename from DesignerSpace/Workspace/FunctionLibraries/NodeDeleter.js
rename to DesignSpace/Workspace/FunctionLibraries/NodeDeleter.js
diff --git a/DesignerSpace/Workspace/FunctionLibraries/OnFocus.js b/DesignSpace/Workspace/FunctionLibraries/OnFocus.js
similarity index 100%
rename from DesignerSpace/Workspace/FunctionLibraries/OnFocus.js
rename to DesignSpace/Workspace/FunctionLibraries/OnFocus.js
diff --git a/DesignerSpace/Workspace/FunctionLibraries/ProtocolNode.js b/DesignSpace/Workspace/FunctionLibraries/ProtocolNode.js
similarity index 100%
rename from DesignerSpace/Workspace/FunctionLibraries/ProtocolNode.js
rename to DesignSpace/Workspace/FunctionLibraries/ProtocolNode.js
diff --git a/DesignerSpace/Workspace/FunctionLibraries/ReferenceAttachDetach.js b/DesignSpace/Workspace/FunctionLibraries/ReferenceAttachDetach.js
similarity index 100%
rename from DesignerSpace/Workspace/FunctionLibraries/ReferenceAttachDetach.js
rename to DesignSpace/Workspace/FunctionLibraries/ReferenceAttachDetach.js
diff --git a/DesignerSpace/Workspace/FunctionLibraries/SessionFunctions.js b/DesignSpace/Workspace/FunctionLibraries/SessionFunctions.js
similarity index 100%
rename from DesignerSpace/Workspace/FunctionLibraries/SessionFunctions.js
rename to DesignSpace/Workspace/FunctionLibraries/SessionFunctions.js
diff --git a/DesignerSpace/Workspace/FunctionLibraries/ShortcutKeys.js b/DesignSpace/Workspace/FunctionLibraries/ShortcutKeys.js
similarity index 100%
rename from DesignerSpace/Workspace/FunctionLibraries/ShortcutKeys.js
rename to DesignSpace/Workspace/FunctionLibraries/ShortcutKeys.js
diff --git a/DesignerSpace/Workspace/FunctionLibraries/TaskFunctions.js b/DesignSpace/Workspace/FunctionLibraries/TaskFunctions.js
similarity index 100%
rename from DesignerSpace/Workspace/FunctionLibraries/TaskFunctions.js
rename to DesignSpace/Workspace/FunctionLibraries/TaskFunctions.js
diff --git a/DesignerSpace/Workspace/FunctionLibraries/UiObjectsFromNodes.js b/DesignSpace/Workspace/FunctionLibraries/UiObjectsFromNodes.js
similarity index 99%
rename from DesignerSpace/Workspace/FunctionLibraries/UiObjectsFromNodes.js
rename to DesignSpace/Workspace/FunctionLibraries/UiObjectsFromNodes.js
index 40466a029..96f7bfef3 100644
--- a/DesignerSpace/Workspace/FunctionLibraries/UiObjectsFromNodes.js
+++ b/DesignSpace/Workspace/FunctionLibraries/UiObjectsFromNodes.js
@@ -384,7 +384,7 @@ function newUiObjectsFromNodes () {
     payload.node = node
     payload.parentNode = parentNode
     payload.chainParent = chainParent
-    payload.onMenuItemClick = canvas.designerSpace.workspace.onMenuItemClick
+    payload.onMenuItemClick = canvas.designSpace.workspace.onMenuItemClick
 
     node.payload = payload
     node.type = uiObjectType
diff --git a/DesignerSpace/Workspace/Workspace.js b/DesignSpace/Workspace/Workspace.js
similarity index 100%
rename from DesignerSpace/Workspace/Workspace.js
rename to DesignSpace/Workspace/Workspace.js
diff --git a/FloatingSpace/CircularMenuItem.js b/FloatingSpace/CircularMenuItem.js
index e4355e01c..b54779f50 100644
--- a/FloatingSpace/CircularMenuItem.js
+++ b/FloatingSpace/CircularMenuItem.js
@@ -203,19 +203,19 @@ function newCircularMenuItem () {
       temporaryStatus === STATUS_SECONDARY_WORK_FAILED
     ) && thisObject.secondaryAction !== undefined
       ) {
-      thisObject.iconOn = canvas.designerSpace.iconCollection.get(thisObject.secondaryIcon)
-      thisObject.iconOff = canvas.designerSpace.iconCollection.get(thisObject.secondaryIcon)
+      thisObject.iconOn = canvas.designSpace.iconCollection.get(thisObject.secondaryIcon)
+      thisObject.iconOff = canvas.designSpace.iconCollection.get(thisObject.secondaryIcon)
     } else {
       if (thisObject.relatedUiObject !== undefined) {
-        thisObject.iconOn = canvas.designerSpace.iconByUiObjectType.get(thisObject.relatedUiObject)
-        thisObject.iconOff = canvas.designerSpace.iconByUiObjectType.get(thisObject.relatedUiObject)
+        thisObject.iconOn = canvas.designSpace.iconByUiObjectType.get(thisObject.relatedUiObject)
+        thisObject.iconOff = canvas.designSpace.iconByUiObjectType.get(thisObject.relatedUiObject)
       } else {
         if (thisObject.iconPathOn !== undefined && thisObject.iconPathOff !== undefined) {
-          thisObject.iconOn = canvas.designerSpace.iconCollection.get(thisObject.iconPathOn)
-          thisObject.iconOff = canvas.designerSpace.iconCollection.get(thisObject.iconPathOff)
+          thisObject.iconOn = canvas.designSpace.iconCollection.get(thisObject.iconPathOn)
+          thisObject.iconOff = canvas.designSpace.iconCollection.get(thisObject.iconPathOff)
         } else {
-          thisObject.iconOn = canvas.designerSpace.iconCollection.get(thisObject.icons[thisObject.actionStatus()])
-          thisObject.iconOff = canvas.designerSpace.iconCollection.get(thisObject.icons[thisObject.actionStatus()])
+          thisObject.iconOn = canvas.designSpace.iconCollection.get(thisObject.icons[thisObject.actionStatus()])
+          thisObject.iconOff = canvas.designSpace.iconCollection.get(thisObject.icons[thisObject.actionStatus()])
         }
       }
     }
diff --git a/FloatingSpace/FloatingObject.js b/FloatingSpace/FloatingObject.js
index bc83446dd..6e9ce5833 100644
--- a/FloatingSpace/FloatingObject.js
+++ b/FloatingSpace/FloatingObject.js
@@ -261,7 +261,7 @@ function newFloatingObject () {
       if (parent.payload.position === undefined) { return }
 
       let distanceToParent = Math.sqrt(Math.pow(parent.payload.position.x - thisObject.container.frame.position.x, 2) + Math.pow(parent.payload.position.y - thisObject.container.frame.position.y, 2))  // ... we calculate the distance ...
-      let parentChildren = canvas.designerSpace.workspace.nodeChildren.childrenCount(parent, thisObject.payload.node)
+      let parentChildren = canvas.designSpace.workspace.nodeChildren.childrenCount(parent, thisObject.payload.node)
       let axisCount = parentChildren.childrenCount
       let axisIndex = parentChildren.childIndex
       let baseAngle = 0
diff --git a/FloatingSpace/UiObject.js b/FloatingSpace/UiObject.js
index 77996ee22..ee4510d2c 100644
--- a/FloatingSpace/UiObject.js
+++ b/FloatingSpace/UiObject.js
@@ -427,7 +427,7 @@ function newUiObject () {
 
     if (previousDistanceToChainParent !== undefined) {
       if (ratio > THRESHOLD) {
-        canvas.designerSpace.workspace.chainDetachNode(thisObject.payload.node)
+        canvas.designSpace.workspace.chainDetachNode(thisObject.payload.node)
       }
     }
   }
@@ -534,7 +534,7 @@ function newUiObject () {
 
     if (previousDistanceToReferenceParent !== undefined) {
       if (ratio > THRESHOLD) {
-        canvas.designerSpace.workspace.referenceDetachNode(thisObject.payload.node)
+        canvas.designSpace.workspace.referenceDetachNode(thisObject.payload.node)
       }
     }
   }
@@ -657,7 +657,7 @@ function newUiObject () {
   }
 
   function iconPhysics () {
-    icon = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.type)
+    icon = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.type)
     let nodeDefinition = APP_SCHEMA_MAP.get(thisObject.payload.node.type)
     if (nodeDefinition.alternativeIcons !== undefined) {
       let nodeToUse = thisObject.payload.node
@@ -685,7 +685,7 @@ function newUiObject () {
             iconName = alternativeIcon.iconName
           }
         }
-        let newIcon = canvas.designerSpace.iconCollection.get(iconName)
+        let newIcon = canvas.designSpace.iconCollection.get(iconName)
         if (newIcon !== undefined) {
           icon = newIcon
         }
@@ -694,7 +694,7 @@ function newUiObject () {
       }
     }
 
-    executingIcon = canvas.designerSpace.iconCollection.get('attractive')
+    executingIcon = canvas.designSpace.iconCollection.get('attractive')
   }
 
   function onFocus () {
@@ -748,12 +748,12 @@ function newUiObject () {
 
   function onDragFinished (event) {
     if (isChainAttaching === true) {
-      canvas.designerSpace.workspace.chainAttachNode(thisObject.payload.node, chainAttachToNode)
+      canvas.designSpace.workspace.chainAttachNode(thisObject.payload.node, chainAttachToNode)
       chainAttachToNode = undefined
       isChainAttaching = false
     }
     if (isReferenceAttaching === true) {
-      canvas.designerSpace.workspace.referenceAttachNode(thisObject.payload.node, referenceAttachToNode)
+      canvas.designSpace.workspace.referenceAttachNode(thisObject.payload.node, referenceAttachToNode)
       referenceAttachToNode = undefined
       isReferenceAttaching = false
     }
diff --git a/Panels/Layer.js b/Panels/Layer.js
index 85300f606..f17574b6c 100644
--- a/Panels/Layer.js
+++ b/Panels/Layer.js
@@ -472,7 +472,7 @@ function newLayer () {
 
     let icon2
     if (plotterModule.code.icon !== undefined) {
-      icon2 = canvas.designerSpace.iconCollection.get(plotterModule.code.icon)
+      icon2 = canvas.designSpace.iconCollection.get(plotterModule.code.icon)
     }
 
     let icon3 = getIcon(baseAsset)
@@ -490,9 +490,9 @@ function newLayer () {
         }
       }
       if (iconName !== undefined) {
-        icon = canvas.designerSpace.iconCollection.get(iconName)
+        icon = canvas.designSpace.iconCollection.get(iconName)
       } else {
-        icon = canvas.designerSpace.iconCollection.get(nodeDefinition.icon)
+        icon = canvas.designSpace.iconCollection.get(nodeDefinition.icon)
       }
       return icon
     }
diff --git a/Panels/LayersPanel.js b/Panels/LayersPanel.js
index ad3fd6190..9381a844b 100644
--- a/Panels/LayersPanel.js
+++ b/Panels/LayersPanel.js
@@ -386,8 +386,8 @@ function newLayersPanel () {
     let label2 = thisObject.payload.node.payload.parentNode.name.substring(0, 18)
     let label3 = ''
 
-    let icon1 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.payload.parentNode.type)
-    let icon2 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
+    let icon1 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.payload.parentNode.type)
+    let icon2 = canvas.designSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
 
     let backgroundColor = UI_COLOR.BLACK
 
diff --git a/Panels/PanelsVisibleButton.js b/Panels/PanelsVisibleButton.js
index 17629f229..b2266845e 100644
--- a/Panels/PanelsVisibleButton.js
+++ b/Panels/PanelsVisibleButton.js
@@ -74,9 +74,9 @@ function newPanelsVisibleButton () {
   function draw () {
     let icon
     if (thisObject.showPanels === true) {
-      icon = canvas.designerSpace.iconCollection.get('plotter-panel')
+      icon = canvas.designSpace.iconCollection.get('plotter-panel')
     } else {
-      icon = canvas.designerSpace.iconCollection.get('toggle-panel-off')
+      icon = canvas.designSpace.iconCollection.get('toggle-panel-off')
     }
 
     drawIcon(icon, 1 / 2, 1 / 2, 0, 0, 14, thisObject.container)
diff --git a/Scales/AutoScaleButton.js b/Scales/AutoScaleButton.js
index 595f9df7d..465843d92 100644
--- a/Scales/AutoScaleButton.js
+++ b/Scales/AutoScaleButton.js
@@ -96,16 +96,16 @@ function newAutoScaleButton () {
   function draw () {
     let icon
     if (thisObject.autoMinScale === false && thisObject.autoMaxScale === false) {
-      icon = canvas.designerSpace.iconCollection.get('toggle-auto-scale-manual')
+      icon = canvas.designSpace.iconCollection.get('toggle-auto-scale-manual')
     }
     if (thisObject.autoMinScale === true && thisObject.autoMaxScale === false) {
-      icon = canvas.designerSpace.iconCollection.get('toggle-auto-scale-auto-min')
+      icon = canvas.designSpace.iconCollection.get('toggle-auto-scale-auto-min')
     }
     if (thisObject.autoMinScale === false && thisObject.autoMaxScale === true) {
-      icon = canvas.designerSpace.iconCollection.get('toggle-auto-scale-auto-max')
+      icon = canvas.designSpace.iconCollection.get('toggle-auto-scale-auto-max')
     }
     if (thisObject.autoMinScale === true && thisObject.autoMaxScale === true) {
-      icon = canvas.designerSpace.iconCollection.get('toggle-auto-scale-auto-min-max')
+      icon = canvas.designSpace.iconCollection.get('toggle-auto-scale-auto-min-max')
     }
 
     drawIcon(icon, 1 / 2, 1 / 2, 0, 0, 14, thisObject.container)
diff --git a/Scales/RateScale.js b/Scales/RateScale.js
index 9273c3b80..f549fc85f 100644
--- a/Scales/RateScale.js
+++ b/Scales/RateScale.js
@@ -394,8 +394,8 @@ function newRateScale () {
     let label3 = labelArray[1]
     if (label3 === undefined) { label3 = '00' }
 
-    let icon1 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
-    let icon2 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.type)
+    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
 
diff --git a/Scales/TimeFrameScale.js b/Scales/TimeFrameScale.js
index d4fc855e7..5015c1e31 100644
--- a/Scales/TimeFrameScale.js
+++ b/Scales/TimeFrameScale.js
@@ -340,8 +340,8 @@ function newTimeFrameScale () {
     let label2 = label[0]
     let label3 = label[1].toUpperCase()
 
-    let icon1 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
-    let icon2 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.type)
+    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
 
diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js
index 3a4ef74ad..84cd47a66 100644
--- a/Scales/TimeScale.js
+++ b/Scales/TimeScale.js
@@ -249,8 +249,8 @@ function newTimeScale () {
     let label2 = labelArray[1] + ' ' + labelArray[2] + ' ' + labelArray[3]
     let label3 = labelArray[4]
 
-    let icon1 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.payload.parentNode.type)
-    let icon2 = canvas.designerSpace.iconByUiObjectType.get(thisObject.payload.node.type)
+    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
 
diff --git a/Spaces/ChartingSpace.js b/Spaces/ChartingSpace.js
index 93b053060..81e30a962 100644
--- a/Spaces/ChartingSpace.js
+++ b/Spaces/ChartingSpace.js
@@ -84,7 +84,7 @@ function newChartingSpace () {
   }
 
   function initialize () {
-    let rootNodes = canvas.designerSpace.workspace.workspaceNode.rootNodes
+    let rootNodes = canvas.designSpace.workspace.workspaceNode.rootNodes
     for (let i = 0; i < rootNodes.length; i++) {
       let rootNode = rootNodes[i]
       if (rootNode.type === 'Charting Space') {
@@ -93,7 +93,7 @@ function newChartingSpace () {
     }
 
     if (thisObject.payload === undefined) {
-      if (ERROR_LOG === true) { logger.write('[WARN] initialize -> There must exist a Charting Space at the Designer Space in order to enable Charts. PLease create one and refreash your browser. ') }
+      if (ERROR_LOG === true) { logger.write('[WARN] initialize -> There must exist a Charting Space at the Design Space in order to enable Charts. PLease create one and refreash your browser. ') }
       return
     }
 
diff --git a/Spaces/CockpitSpace.js b/Spaces/CockpitSpace.js
index b2d04b483..01fea0e08 100644
--- a/Spaces/CockpitSpace.js
+++ b/Spaces/CockpitSpace.js
@@ -48,7 +48,7 @@
      thisObject.container.frame.position.x = 0
 
      let INITIAL_POSITION
-     if (canvas.designerSpace.workspace.enabled === true) {
+     if (canvas.designSpace.workspace.enabled === true) {
        let localStorage = window.localStorage.getItem(MODULE_NAME)
        if (localStorage !== null) {
          storage = JSON.parse(localStorage)
@@ -132,7 +132,7 @@
 
      thisObject.status = 'MIDDLE'
 
-     if (canvas.designerSpace.workspace.enabled === true) {
+     if (canvas.designSpace.workspace.enabled === true) {
        thisObject.container.isDraggeable = true
      } else {
        thisObject.container.isDraggeable = false
@@ -141,10 +141,10 @@
      if (thisObject.container.frame.position.y > browserCanvas.height * 99.5 / 100 - COCKPIT_SPACE_HEIGHT) {
        thisObject.container.frame.position.y = browserCanvas.height - COCKPIT_SPACE_HEIGHT
        thisObject.status = 'BOTTOM'
-       canvas.designerSpace.makeInvisible()
+       canvas.designSpace.makeInvisible()
        canvas.floatingSpace.makeInvisible()
      } else {
-       canvas.designerSpace.makeVisible()
+       canvas.designSpace.makeVisible()
        canvas.floatingSpace.makeVisible()
      }
 
@@ -219,7 +219,7 @@
      browserCanvasContext.closePath()
      browserCanvasContext.fill()
 
-     if (canvas.designerSpace.workspace.enabled === true) {
+     if (canvas.designSpace.workspace.enabled === true) {
        arrow()
      }
    }
diff --git a/Spaces/DesignerSpace.js b/Spaces/DesignSpace.js
similarity index 98%
rename from Spaces/DesignerSpace.js
rename to Spaces/DesignSpace.js
index 2cd81dc8e..f18183387 100644
--- a/Spaces/DesignerSpace.js
+++ b/Spaces/DesignSpace.js
@@ -1,5 +1,5 @@
 
-function newDesignerSpace () {
+function newDesignSpace () {
   const MODULE_NAME = 'Strategy Space'
   let thisObject = {
     sidePanel: undefined,
@@ -287,7 +287,7 @@ function newDesignerSpace () {
     if (thisObject.sidePanel !== undefined) {
       container = thisObject.sidePanel.getContainer(point)
       if (container !== undefined) {
-        container.space = 'Designer Space'
+        container.space = 'Design Space'
         return container
       }
     }

From 95364f52336936d65290f8d88d951a18d8199cd9 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Fri, 14 Feb 2020 17:23:32 +0100
Subject: [PATCH 66/81] Giving Space for X Auto Scale

---
 ChartingSpace/CoordinateSystem.js | 30 +++++++++++++++---------------
 Plotter.js                        |  4 ++--
 Scales/AutoScaleButton.js         |  8 ++++----
 Scales/RateScale.js               | 12 ++++++------
 Spaces/DesignSpace.js             |  6 +++++-
 5 files changed, 32 insertions(+), 28 deletions(-)

diff --git a/ChartingSpace/CoordinateSystem.js b/ChartingSpace/CoordinateSystem.js
index 9d2ce752c..6295c8529 100644
--- a/ChartingSpace/CoordinateSystem.js
+++ b/ChartingSpace/CoordinateSystem.js
@@ -15,10 +15,10 @@ function newCoordinateSystem () {
     maxWidth: undefined,
     scale: undefined,
     eventHandler: undefined,
-    autoMinScale: true,
-    autoMaxScale: true,
+    autoMinYScale: true,
+    autoMaxYScale: true,
     physics: physics,
-    reportValue: reportValue,
+    reportYValue: reportYValue,
     zoomX: zoomX,
     zoomY: zoomY,
     recalculateScale: recalculateScale,
@@ -50,7 +50,7 @@ function newCoordinateSystem () {
 
   let newMax = -VERY_LARGE_NUMBER
   let newMin = VERY_LARGE_NUMBER
-  let notValueReported = true
+  let noYValueReported = true
 
   return thisObject
 
@@ -74,25 +74,25 @@ function newCoordinateSystem () {
   }
 
   function physics () {
-    if ((thisObject.autoMinScale === true || thisObject.autoMaxScale === true) && notValueReported === false) {
+    if ((thisObject.autoMinYScale === true || thisObject.autoMaxYScale === true) && noYValueReported === false) {
       let mustRecalculate = false
 
-      if (thisObject.autoMaxScale === true && thisObject.max.y !== newMax) {
+      if (thisObject.autoMaxYScale === true && thisObject.max.y !== newMax) {
         thisObject.max.y = newMax
         mustRecalculate = true
       }
 
-      if (thisObject.autoMaxScale === true) {
+      if (thisObject.autoMaxYScale === true) {
         newMax = -VERY_LARGE_NUMBER
       }
 
-      if (thisObject.autoMinScale === true && thisObject.min.y !== newMin) {
+      if (thisObject.autoMinYScale === true && thisObject.min.y !== newMin) {
         thisObject.min.y = newMin
         newMin = VERY_LARGE_NUMBER
         mustRecalculate = true
       }
 
-      if (thisObject.autoMinScale === true) {
+      if (thisObject.autoMinYScale === true) {
         newMin = VERY_LARGE_NUMBER
       }
 
@@ -102,18 +102,18 @@ function newCoordinateSystem () {
 
       /* Reseting this to start over at each cycle. */
 
-      notValueReported = true
+      noYValueReported = true
     }
   }
 
-  function reportValue (value) {
-    if (thisObject.autoMinScale === true) {
+  function reportYValue (value) {
+    if (thisObject.autoMinYScale === true) {
       if (value < newMin) { newMin = value }
-      notValueReported = false
+      noYValueReported = false
     }
-    if (thisObject.autoMaxScale === true) {
+    if (thisObject.autoMaxYScale === true) {
       if (value > newMax) { newMax = value }
-      notValueReported = false
+      noYValueReported = false
     }
   }
 
diff --git a/Plotter.js b/Plotter.js
index 398d96b2b..e23e87dc3 100644
--- a/Plotter.js
+++ b/Plotter.js
@@ -569,7 +569,7 @@ function newPlotter () {
                   y: y
                 }
                 /* Contributing to Auto-Scale */
-                coordinateSystem.reportValue(dataPoint.y)
+                coordinateSystem.reportYValue(dataPoint.y)
 
               /*
               The information we store in files is independent from the charing system and its coordinate systems.
@@ -769,7 +769,7 @@ function newPlotter () {
         }
       }
 
-      if (coordinateSystem.autoMinScale === true || coordinateSystem.autosMaxScale === true) {
+      if (coordinateSystem.autoMinYScale === true || coordinateSystem.autosMaxScale === true) {
         mustRecalculateDataPoints = true
       } else {
         mustRecalculateDataPoints = false
diff --git a/Scales/AutoScaleButton.js b/Scales/AutoScaleButton.js
index 465843d92..02cff0502 100644
--- a/Scales/AutoScaleButton.js
+++ b/Scales/AutoScaleButton.js
@@ -37,8 +37,8 @@ function newAutoScaleButton () {
 
   function initialize (pCoordinateSystem) {
     coordinateSystem = pCoordinateSystem
-    thisObject.autoMinScale = coordinateSystem.autoMinScale
-    thisObject.autoMaxScale = coordinateSystem.autoMaxScale
+    thisObject.autoMinScale = coordinateSystem.autoMinYScale
+    thisObject.autoMaxScale = coordinateSystem.autoMaxYScale
 
     thisObject.container.frame.width = 25
     thisObject.container.frame.height = 25
@@ -81,8 +81,8 @@ function newAutoScaleButton () {
     }
 
     function update () {
-      coordinateSystem.autoMinScale = thisObject.autoMinScale
-      coordinateSystem.autoMaxScale = thisObject.autoMaxScale
+      coordinateSystem.autoMinYScale = thisObject.autoMinScale
+      coordinateSystem.autoMaxYScale = thisObject.autoMaxScale
       coordinateSystem.recalculateScale()
     }
   }
diff --git a/Scales/RateScale.js b/Scales/RateScale.js
index f549fc85f..e1a9651ec 100644
--- a/Scales/RateScale.js
+++ b/Scales/RateScale.js
@@ -169,8 +169,8 @@ function newRateScale () {
       let code = JSON.parse(thisObject.payload.node.code)
       code.minValue = coordinateSystem.min.y
       code.maxValue = coordinateSystem.max.y
-      code.autoMinScale = coordinateSystem.autoMinScale
-      code.autoMaxScale = coordinateSystem.autoMaxScale
+      code.autoMinScale = coordinateSystem.autoMinYScale
+      code.autoMaxScale = coordinateSystem.autoMaxYScale
       thisObject.payload.node.code = JSON.stringify(code, null, 4)
     } catch (err) {
        // we ignore errors here since most likely they will be parsing errors.
@@ -190,8 +190,8 @@ function newRateScale () {
         if (
           thisObject.minValue !== code.minValue ||
           thisObject.maxValue !== code.maxValue ||
-          coordinateSystem.autoMinScale !== code.autoMinScale ||
-          coordinateSystem.autoMaxScale !== code.autoMaxScale
+          coordinateSystem.autoMinYScale !== code.autoMinScale ||
+          coordinateSystem.autoMaxYScale !== code.autoMaxScale
         ) {
           thisObject.minValue = code.minValue
           thisObject.maxValue = code.maxValue
@@ -199,11 +199,11 @@ function newRateScale () {
           coordinateSystem.max.y = thisObject.maxValue
 
           if (code.autoMinScale !== undefined && (code.autoMinScale === true || code.autoMinScale === false)) {
-            coordinateSystem.autoMinScale = code.autoMinScale
+            coordinateSystem.autoMinYScale = code.autoMinScale
             autoScaleButton.autoMinScale = code.autoMinScale
           }
           if (code.autoMaxScale !== undefined && (code.autoMaxScale === true || code.autoMaxScale === false)) {
-            coordinateSystem.autoMaxScale = code.autoMaxScale
+            coordinateSystem.autoMaxYScale = code.autoMaxScale
             autoScaleButton.autoMaxScale = code.autoMaxScale
           }
           coordinateSystem.recalculateScale()
diff --git a/Spaces/DesignSpace.js b/Spaces/DesignSpace.js
index f18183387..c2cba9767 100644
--- a/Spaces/DesignSpace.js
+++ b/Spaces/DesignSpace.js
@@ -247,7 +247,11 @@ function newDesignSpace () {
       'toggle-auto-scale-auto-min-max',
       'toggle-auto-scale-auto-max',
       'toggle-auto-scale-auto-min',
-      'toggle-panel-off'
+      'toggle-panel-off',
+      'toggle-auto-time-scale-auto-min',
+      'toggle-auto-time-scale-auto-max',
+      'toggle-auto-time-scale-auto-min-max',
+      'toggle-auto-time-scale-manual'
     ]
 
     for (let i = 0; i < iconsNames.length; i++) {

From 48ab3c0b20ea80dc933a06b2d73ffa59c982ef35 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Fri, 14 Feb 2020 19:47:44 +0100
Subject: [PATCH 67/81] x axis auto scale implemented

---
 ChartingSpace/CoordinateSystem.js | 77 ++++++++++++++++++------
 ChartingSpace/TimeMachine.js      | 12 +++-
 Globals.js                        |  2 +-
 Scales/AutoScaleButton.js         | 98 +++++++++++++++++++++++--------
 Scales/RateScale.js               |  6 +-
 Scales/TimeScale.js               | 27 ++++++++-
 6 files changed, 174 insertions(+), 48 deletions(-)

diff --git a/ChartingSpace/CoordinateSystem.js b/ChartingSpace/CoordinateSystem.js
index 6295c8529..4fbfc24bd 100644
--- a/ChartingSpace/CoordinateSystem.js
+++ b/ChartingSpace/CoordinateSystem.js
@@ -15,9 +15,12 @@ function newCoordinateSystem () {
     maxWidth: undefined,
     scale: undefined,
     eventHandler: undefined,
+    autoMinXScale: true,
+    autoMaxXScale: true,
     autoMinYScale: true,
     autoMaxYScale: true,
     physics: physics,
+    reportXValue: reportXValue,
     reportYValue: reportYValue,
     zoomX: zoomX,
     zoomY: zoomY,
@@ -48,8 +51,12 @@ function newCoordinateSystem () {
   thisObject.eventHandler = newEventHandler()
   thisObject.eventHandler.name = 'Coordinate System'
 
-  let newMax = -VERY_LARGE_NUMBER
-  let newMin = VERY_LARGE_NUMBER
+  let newXMax = -VERY_LARGE_NUMBER
+  let newXMin = VERY_LARGE_NUMBER
+  let noXValueReported = true
+
+  let newYMax = -VERY_LARGE_NUMBER
+  let newYMin = VERY_LARGE_NUMBER
   let noYValueReported = true
 
   return thisObject
@@ -74,45 +81,79 @@ function newCoordinateSystem () {
   }
 
   function physics () {
-    if ((thisObject.autoMinYScale === true || thisObject.autoMaxYScale === true) && noYValueReported === false) {
-      let mustRecalculate = false
+    let mustRecalculate = false
 
-      if (thisObject.autoMaxYScale === true && thisObject.max.y !== newMax) {
-        thisObject.max.y = newMax
+    if ((thisObject.autoMinXScale === true || thisObject.autoMaxXScale === true) && noXValueReported === false) {
+      if (thisObject.autoMaxXScale === true && thisObject.max.x !== newXMax) {
+        thisObject.max.x = newXMax
+        mustRecalculate = true
+      }
+
+      if (thisObject.autoMaxXScale === true) {
+        newXMax = -VERY_LARGE_NUMBER
+      }
+
+      if (thisObject.autoMinXScale === true && thisObject.min.x !== newXMin) {
+        thisObject.min.x = newXMin
+        newXMin = VERY_LARGE_NUMBER
+        mustRecalculate = true
+      }
+
+      if (thisObject.autoMinXScale === true) {
+        newXMin = VERY_LARGE_NUMBER
+      }
+
+      /* Reseting this to start over at each cycle. */
+      noXValueReported = true
+    }
+
+    if ((thisObject.autoMinYScale === true || thisObject.autoMaxYScale === true) && noYValueReported === false) {
+      if (thisObject.autoMaxYScale === true && thisObject.max.y !== newYMax) {
+        thisObject.max.y = newYMax
         mustRecalculate = true
       }
 
       if (thisObject.autoMaxYScale === true) {
-        newMax = -VERY_LARGE_NUMBER
+        newYMax = -VERY_LARGE_NUMBER
       }
 
-      if (thisObject.autoMinYScale === true && thisObject.min.y !== newMin) {
-        thisObject.min.y = newMin
-        newMin = VERY_LARGE_NUMBER
+      if (thisObject.autoMinYScale === true && thisObject.min.y !== newYMin) {
+        thisObject.min.y = newYMin
+        newYMin = VERY_LARGE_NUMBER
         mustRecalculate = true
       }
 
       if (thisObject.autoMinYScale === true) {
-        newMin = VERY_LARGE_NUMBER
-      }
-
-      if (mustRecalculate === true) {
-        recalculateScale()
+        newYMin = VERY_LARGE_NUMBER
       }
 
       /* Reseting this to start over at each cycle. */
-
       noYValueReported = true
     }
+
+    if (mustRecalculate === true) {
+      recalculateScale()
+    }
+  }
+
+  function reportXValue (value) {
+    if (thisObject.autoMinXScale === true) {
+      if (value < newXMin) { newXMin = value }
+      noXValueReported = false
+    }
+    if (thisObject.autoMaxXScale === true) {
+      if (value > newXMax) { newXMax = value }
+      noXValueReported = false
+    }
   }
 
   function reportYValue (value) {
     if (thisObject.autoMinYScale === true) {
-      if (value < newMin) { newMin = value }
+      if (value < newYMin) { newYMin = value }
       noYValueReported = false
     }
     if (thisObject.autoMaxYScale === true) {
-      if (value > newMax) { newMax = value }
+      if (value > newYMax) { newYMax = value }
       noYValueReported = false
     }
   }
diff --git a/ChartingSpace/TimeMachine.js b/ChartingSpace/TimeMachine.js
index 0d559967f..d11bacf51 100644
--- a/ChartingSpace/TimeMachine.js
+++ b/ChartingSpace/TimeMachine.js
@@ -54,6 +54,7 @@ function newTimeMachine () {
   let rateScaleMouseOverEventSuscriptionId
   let timeFrameScaleEventSuscriptionId
   let timeFrameScaleMouseOverEventSuscriptionId
+  let onScaleChangedEventSubscriptionId
 
   setupContainer()
   return thisObject
@@ -73,6 +74,7 @@ function newTimeMachine () {
   function finalize () {
     canvas.chartingSpace.viewport.eventHandler.stopListening(onViewportPositionChangedEventSuscriptionId)
     canvas.chartingSpace.viewport.eventHandler.stopListening(onViewportZoomChangedEventSuscriptionId)
+    timeMachineCoordinateSystem.eventHandler.stopListening(onScaleChangedEventSubscriptionId)
 
     if (thisObject.timeScale !== undefined) {
       finalizeTimeScale()
@@ -146,9 +148,9 @@ 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()
     thisObject.edgeEditor.initialize(timeMachineCoordinateSystem)
@@ -262,6 +264,10 @@ function newTimeMachine () {
       if (container !== undefined) {
         if (container.isForThisPurpose(purpose)) {
           return container
+        } else {
+          if (purpose === GET_CONTAINER_PURPOSE.DRAGGING && container.isClickeable === true) {
+            return container
+          }
         }
       }
     }
@@ -316,6 +322,10 @@ function newTimeMachine () {
     }
   }
 
+  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
diff --git a/Globals.js b/Globals.js
index 27c3cde52..cbe56aae1 100644
--- a/Globals.js
+++ b/Globals.js
@@ -167,7 +167,7 @@ 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.
-let VERY_LARGE_NUMBER = 100000000000
+let VERY_LARGE_NUMBER = 100000000000000
 
 let CURRENT_TOP_MARGIN = window.canvasApp.topMargin
 let AT_FULL_SCREEN_MODE = false
diff --git a/Scales/AutoScaleButton.js b/Scales/AutoScaleButton.js
index 02cff0502..88fd7fe81 100644
--- a/Scales/AutoScaleButton.js
+++ b/Scales/AutoScaleButton.js
@@ -21,7 +21,7 @@ function newAutoScaleButton () {
 
   let onMouseClickEventSuscriptionId
   let coordinateSystem
-
+  let axis
   return thisObject
 
   function finalize () {
@@ -33,23 +33,42 @@ function newAutoScaleButton () {
     thisObject.panels = undefined
 
     coordinateSystem = undefined
+    axis = undefined
   }
 
-  function initialize (pCoordinateSystem) {
+  function initialize (pAxis, pCoordinateSystem) {
+    axis = pAxis
     coordinateSystem = pCoordinateSystem
     thisObject.autoMinScale = coordinateSystem.autoMinYScale
     thisObject.autoMaxScale = coordinateSystem.autoMaxYScale
 
-    thisObject.container.frame.width = 25
-    thisObject.container.frame.height = 25
+    switch (axis) {
+      case 'X': {
+        thisObject.container.frame.width = 20
+        thisObject.container.frame.height = 20
 
-    let position = {
-      x: thisObject.container.parentContainer.frame.width * 5 / 8,
-      y: thisObject.container.parentContainer.frame.height / 2 - thisObject.container.frame.height / 2
+        let position = {
+          x: thisObject.container.parentContainer.frame.width / 2 - thisObject.container.frame.width / 2,
+          y: thisObject.container.parentContainer.frame.height / 2 - thisObject.container.frame.height / 2
+        }
+
+        thisObject.container.frame.position = position
+        break
+      }
+      case 'Y': {
+        thisObject.container.frame.width = 20
+        thisObject.container.frame.height = 20
+
+        let position = {
+          x: thisObject.container.parentContainer.frame.width / 2 - thisObject.container.frame.width / 2,
+          y: thisObject.container.parentContainer.frame.height / 2 - thisObject.container.frame.height / 2
+        }
+
+        thisObject.container.frame.position = position
+        break
+      }
     }
 
-    thisObject.container.frame.position = position
-
     /* Lets listen to our own events to react when we have a Mouse Click */
     onMouseClickEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
   }
@@ -81,8 +100,19 @@ function newAutoScaleButton () {
     }
 
     function update () {
-      coordinateSystem.autoMinYScale = thisObject.autoMinScale
-      coordinateSystem.autoMaxYScale = thisObject.autoMaxScale
+      switch (axis) {
+        case 'X': {
+          coordinateSystem.autoMinXScale = thisObject.autoMinScale
+          coordinateSystem.autoMaxXScale = thisObject.autoMaxScale
+          break
+        }
+        case 'Y': {
+          coordinateSystem.autoMinYScale = thisObject.autoMinScale
+          coordinateSystem.autoMaxYScale = thisObject.autoMaxScale
+          break
+        }
+      }
+
       coordinateSystem.recalculateScale()
     }
   }
@@ -95,19 +125,39 @@ function newAutoScaleButton () {
 
   function draw () {
     let icon
-    if (thisObject.autoMinScale === false && thisObject.autoMaxScale === false) {
-      icon = canvas.designSpace.iconCollection.get('toggle-auto-scale-manual')
+    switch (axis) {
+      case 'X': {
+        if (thisObject.autoMinScale === false && thisObject.autoMaxScale === false) {
+          icon = canvas.designSpace.iconCollection.get('toggle-auto-time-scale-manual')
+        }
+        if (thisObject.autoMinScale === true && thisObject.autoMaxScale === false) {
+          icon = canvas.designSpace.iconCollection.get('toggle-auto-time-scale-auto-min')
+        }
+        if (thisObject.autoMinScale === false && thisObject.autoMaxScale === true) {
+          icon = canvas.designSpace.iconCollection.get('toggle-auto-time-scale-auto-max')
+        }
+        if (thisObject.autoMinScale === true && thisObject.autoMaxScale === true) {
+          icon = canvas.designSpace.iconCollection.get('toggle-auto-time-scale-auto-min-max')
+        }
+        drawIcon(icon, 6 / 8, 0, 0, 28, 12, thisObject.container.parentContainer)
+        break
+      }
+      case 'Y': {
+        if (thisObject.autoMinScale === false && thisObject.autoMaxScale === false) {
+          icon = canvas.designSpace.iconCollection.get('toggle-auto-scale-manual')
+        }
+        if (thisObject.autoMinScale === true && thisObject.autoMaxScale === false) {
+          icon = canvas.designSpace.iconCollection.get('toggle-auto-scale-auto-min')
+        }
+        if (thisObject.autoMinScale === false && thisObject.autoMaxScale === true) {
+          icon = canvas.designSpace.iconCollection.get('toggle-auto-scale-auto-max')
+        }
+        if (thisObject.autoMinScale === true && thisObject.autoMaxScale === true) {
+          icon = canvas.designSpace.iconCollection.get('toggle-auto-scale-auto-min-max')
+        }
+        drawIcon(icon, 6 / 8, 0, 0, 28, 12, thisObject.container.parentContainer)
+        break
+      }
     }
-    if (thisObject.autoMinScale === true && thisObject.autoMaxScale === false) {
-      icon = canvas.designSpace.iconCollection.get('toggle-auto-scale-auto-min')
-    }
-    if (thisObject.autoMinScale === false && thisObject.autoMaxScale === true) {
-      icon = canvas.designSpace.iconCollection.get('toggle-auto-scale-auto-max')
-    }
-    if (thisObject.autoMinScale === true && thisObject.autoMaxScale === true) {
-      icon = canvas.designSpace.iconCollection.get('toggle-auto-scale-auto-min-max')
-    }
-
-    drawIcon(icon, 1 / 2, 1 / 2, 0, 0, 14, thisObject.container)
   }
 }
diff --git a/Scales/RateScale.js b/Scales/RateScale.js
index e1a9651ec..d55eb2fc1 100644
--- a/Scales/RateScale.js
+++ b/Scales/RateScale.js
@@ -91,11 +91,11 @@ function newRateScale () {
     onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
     onScaleChangedEventSubscriptionId = coordinateSystem.eventHandler.listenToEvent('Scale Changed', onScaleChanged)
 
-    readObjectState()
-
     autoScaleButton = newAutoScaleButton()
     autoScaleButton.container.connectToParent(thisObject.container)
-    autoScaleButton.initialize(coordinateSystem)
+    autoScaleButton.initialize('Y', coordinateSystem)
+
+    readObjectState()
   }
 
   function onMouseOverSomeTimeMachineContainer (event) {
diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js
index 84cd47a66..f7e3b1106 100644
--- a/Scales/TimeScale.js
+++ b/Scales/TimeScale.js
@@ -30,6 +30,7 @@ function newTimeScale () {
   thisObject.container.frame.height = 40
 
   let visible = true
+  let autoScaleButton
   let isMouseOver
 
   let onMouseWheelEventSubscriptionId
@@ -63,6 +64,9 @@ function newTimeScale () {
     coordinateSystem = undefined
     limitingContainer = undefined
     mouse = undefined
+
+    autoScaleButton.finalize()
+    autoScaleButton = undefined
   }
 
   function initialize (pCoordinateSystem, pLimitingContainer) {
@@ -74,6 +78,10 @@ function newTimeScale () {
     onMouseNotOverEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseNotOver', onMouseNotOver)
     onScaleChangedEventSubscriptionId = coordinateSystem.eventHandler.listenToEvent('Scale Changed', onScaleChanged)
 
+    autoScaleButton = newAutoScaleButton()
+    autoScaleButton.container.connectToParent(thisObject.container)
+    autoScaleButton.initialize('X', coordinateSystem)
+
     readObjectState()
   }
 
@@ -126,8 +134,12 @@ function newTimeScale () {
     saveObjectState()
   }
 
-  function getContainer (point) {
+  function getContainer (point, purpose) {
     if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+      let container = autoScaleButton.getContainer(point, purpose)
+      if (container !== undefined) {
+        return container
+      }
       return thisObject.container
     }
   }
@@ -137,6 +149,8 @@ function newTimeScale () {
       let code = JSON.parse(thisObject.payload.node.code)
       code.fromDate = (new Date(coordinateSystem.min.x)).toISOString()
       code.toDate = (new Date(coordinateSystem.max.x)).toISOString()
+      code.autoMinScale = coordinateSystem.autoMinXScale
+      code.autoMaxScale = coordinateSystem.autoMaxXScale
       thisObject.payload.node.code = JSON.stringify(code, null, 4)
     } catch (err) {
        // we ignore errors here since most likely they will be parsing errors.
@@ -158,6 +172,15 @@ function newTimeScale () {
           thisObject.toDate = Date.parse(code.toDate)
           coordinateSystem.min.x = thisObject.fromDate
           coordinateSystem.max.x = thisObject.toDate
+
+          if (code.autoMinScale !== undefined && (code.autoMinScale === true || code.autoMinScale === false)) {
+            coordinateSystem.autoMinXScale = code.autoMinScale
+            autoScaleButton.autoMinScale = code.autoMinScale
+          }
+          if (code.autoMaxScale !== undefined && (code.autoMaxScale === true || code.autoMaxScale === false)) {
+            coordinateSystem.autoMaxXScale = code.autoMaxScale
+            autoScaleButton.autoMaxScale = code.autoMaxScale
+          }
           coordinateSystem.recalculateScale()
         }
       }
@@ -229,6 +252,7 @@ function newTimeScale () {
 
   function draw () {
     drawScaleBox()
+    autoScaleButton.draw()
     if (visible === false) {
       drawScaleDisplayCover(thisObject.container)
     }
@@ -237,6 +261,7 @@ function newTimeScale () {
   function drawForeground () {
     if (isMouseOver === true) {
       drawScaleBox()
+      autoScaleButton.draw()
     }
   }
 

From 3b2c3d3d61c0e9192fb28954c98994c4588ccb3a Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Fri, 14 Feb 2020 20:22:43 +0100
Subject: [PATCH 68/81] Reimplementation of auto scales with mouse wheel

---
 Scales/AutoScaleButton.js | 74 +++++++++++++++++++++++++++------------
 Scales/RateScale.js       | 18 +++++-----
 Scales/TimeScale.js       | 15 ++++----
 3 files changed, 66 insertions(+), 41 deletions(-)

diff --git a/Scales/AutoScaleButton.js b/Scales/AutoScaleButton.js
index 88fd7fe81..12c9301c4 100644
--- a/Scales/AutoScaleButton.js
+++ b/Scales/AutoScaleButton.js
@@ -5,6 +5,7 @@ function newAutoScaleButton () {
     parentContainer: undefined,
     autoMinScale: undefined,
     autoMaxScale: undefined,
+    setStatus: setStatus,
     draw: draw,
     getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
     initialize: initialize,
@@ -19,13 +20,14 @@ function newAutoScaleButton () {
   thisObject.container.isDraggeable = false
   thisObject.container.frame.containerName = 'Auto Scale Button'
 
-  let onMouseClickEventSuscriptionId
+  let onMouseWheelEventSubscriptionId
   let coordinateSystem
   let axis
+  let currentStatus
   return thisObject
 
   function finalize () {
-    thisObject.container.eventHandler.stopListening(onMouseClickEventSuscriptionId)
+    thisObject.container.eventHandler.stopListening(onMouseWheelEventSubscriptionId)
     thisObject.container.finalize()
     thisObject.container = undefined
     thisObject.fitFunction = undefined
@@ -68,35 +70,63 @@ function newAutoScaleButton () {
         break
       }
     }
-
-    /* Lets listen to our own events to react when we have a Mouse Click */
-    onMouseClickEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
+    onMouseWheelEventSubscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseWheel', onMouseWheel)
   }
 
-  function onMouseClick (event) {
+  function setStatus (autoMinScale, autoMaxScale) {
+    thisObject.autoMinScale = autoMinScale
+    thisObject.autoMaxScale = autoMaxScale
+
     if (thisObject.autoMinScale === false && thisObject.autoMaxScale === false) {
-      thisObject.autoMinScale = true
-      thisObject.autoMaxScale = false
-      update()
-      return
+      currentStatus = 1
     }
     if (thisObject.autoMinScale === true && thisObject.autoMaxScale === false) {
-      thisObject.autoMinScale = false
-      thisObject.autoMaxScale = true
-      update()
-      return
+      currentStatus = 2
     }
     if (thisObject.autoMinScale === false && thisObject.autoMaxScale === true) {
-      thisObject.autoMinScale = true
-      thisObject.autoMaxScale = true
-      update()
-      return
+      currentStatus = 3
     }
     if (thisObject.autoMinScale === true && thisObject.autoMaxScale === true) {
-      thisObject.autoMinScale = false
-      thisObject.autoMaxScale = false
-      update()
-      return
+      currentStatus = 4
+    }
+  }
+  function onMouseWheel (event) {
+    let factor
+    let delta = event.wheelDelta
+    if (delta < 0) {
+      delta = -1
+    } else {
+      delta = 1
+    }
+    currentStatus = currentStatus + delta
+    if (currentStatus === 5) { currentStatus = 1 }
+    if (currentStatus === 0) { currentStatus = 4 }
+
+    switch (currentStatus) {
+      case 1: {
+        thisObject.autoMinScale = false
+        thisObject.autoMaxScale = false
+        update()
+        return
+      }
+      case 2: {
+        thisObject.autoMinScale = true
+        thisObject.autoMaxScale = false
+        update()
+        return
+      }
+      case 3: {
+        thisObject.autoMinScale = false
+        thisObject.autoMaxScale = true
+        update()
+        return
+      }
+      case 4: {
+        thisObject.autoMinScale = true
+        thisObject.autoMaxScale = true
+        update()
+        return
+      }
     }
 
     function update () {
diff --git a/Scales/RateScale.js b/Scales/RateScale.js
index d55eb2fc1..c91043535 100644
--- a/Scales/RateScale.js
+++ b/Scales/RateScale.js
@@ -134,6 +134,11 @@ function newRateScale () {
   }
 
   function onMouseWheel (event) {
+    if (event.shiftKey === true) {
+      autoScaleButton.container.eventHandler.raiseEvent('onMouseWheel', event)
+      return
+    }
+
     let factor
     let morePower = 10
     if (event.buttons === 4) { morePower = 1 } // Mouse wheel pressed.
@@ -151,11 +156,6 @@ function newRateScale () {
 
   function getContainer (point, purpose) {
     if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-      let container = autoScaleButton.getContainer(point, purpose)
-      if (container !== undefined) {
-        return container
-      }
-
       if (purpose === GET_CONTAINER_PURPOSE.DRAGGING) {
         return draggeableContainer
       }
@@ -198,14 +198,12 @@ function newRateScale () {
           coordinateSystem.min.y = thisObject.minValue
           coordinateSystem.max.y = thisObject.maxValue
 
-          if (code.autoMinScale !== undefined && (code.autoMinScale === true || code.autoMinScale === false)) {
+          if (code.autoMinScale !== undefined && (code.autoMinScale === true || code.autoMinScale === false) && code.autoMaxScale !== undefined && (code.autoMaxScale === true || code.autoMaxScale === false)) {
             coordinateSystem.autoMinYScale = code.autoMinScale
-            autoScaleButton.autoMinScale = code.autoMinScale
-          }
-          if (code.autoMaxScale !== undefined && (code.autoMaxScale === true || code.autoMaxScale === false)) {
             coordinateSystem.autoMaxYScale = code.autoMaxScale
-            autoScaleButton.autoMaxScale = code.autoMaxScale
+            autoScaleButton.setStatus(code.autoMinScale, code.autoMaxScale)
           }
+
           coordinateSystem.recalculateScale()
         }
       }
diff --git a/Scales/TimeScale.js b/Scales/TimeScale.js
index f7e3b1106..f87354e66 100644
--- a/Scales/TimeScale.js
+++ b/Scales/TimeScale.js
@@ -116,6 +116,10 @@ function newTimeScale () {
   }
 
   function onMouseWheel (event) {
+    if (event.shiftKey === true) {
+      autoScaleButton.container.eventHandler.raiseEvent('onMouseWheel', event)
+      return
+    }
     let factor
     let morePower = 10
     if (event.buttons === 4) { morePower = 1 } // Mouse wheel pressed.
@@ -136,10 +140,6 @@ function newTimeScale () {
 
   function getContainer (point, purpose) {
     if (thisObject.container.frame.isThisPointHere(point, true) === true) {
-      let container = autoScaleButton.getContainer(point, purpose)
-      if (container !== undefined) {
-        return container
-      }
       return thisObject.container
     }
   }
@@ -173,13 +173,10 @@ function newTimeScale () {
           coordinateSystem.min.x = thisObject.fromDate
           coordinateSystem.max.x = thisObject.toDate
 
-          if (code.autoMinScale !== undefined && (code.autoMinScale === true || code.autoMinScale === false)) {
+          if (code.autoMinScale !== undefined && (code.autoMinScale === true || code.autoMinScale === false) && code.autoMaxScale !== undefined && (code.autoMaxScale === true || code.autoMaxScale === false)) {
             coordinateSystem.autoMinXScale = code.autoMinScale
-            autoScaleButton.autoMinScale = code.autoMinScale
-          }
-          if (code.autoMaxScale !== undefined && (code.autoMaxScale === true || code.autoMaxScale === false)) {
             coordinateSystem.autoMaxXScale = code.autoMaxScale
-            autoScaleButton.autoMaxScale = code.autoMaxScale
+            autoScaleButton.setStatus(code.autoMinScale, code.autoMaxScale)
           }
           coordinateSystem.recalculateScale()
         }

From 312050b8be350891a327ea4708d7fa4a272dcf22 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Fri, 14 Feb 2020 20:51:25 +0100
Subject: [PATCH 69/81] Bug Fixed

---
 ChartingSpace/TimelineChart.js |  2 ++
 Dashboard.js => PostLoader.js  |  0
 Spaces/ChartingSpace.js        | 12 ++++++------
 Spaces/DesignSpace.js          |  2 +-
 4 files changed, 9 insertions(+), 7 deletions(-)
 rename Dashboard.js => PostLoader.js (100%)

diff --git a/ChartingSpace/TimelineChart.js b/ChartingSpace/TimelineChart.js
index c92c946b6..4444579bb 100644
--- a/ChartingSpace/TimelineChart.js
+++ b/ChartingSpace/TimelineChart.js
@@ -239,6 +239,8 @@ function newTimelineChart () {
     timelineChartCoordinateSystem.max.x = timeMachineCoordinateSystem.max.x
     timelineChartCoordinateSystem.maxHeight = timeMachineCoordinateSystem.maxHeight
     timelineChartCoordinateSystem.maxWidth = timeMachineCoordinateSystem.maxWidth
+    timelineChartCoordinateSystem.autoMinXScale = timeMachineCoordinateSystem.autoMinXScale
+    timelineChartCoordinateSystem.autoMaxXScale = timeMachineCoordinateSystem.autoMaxXScale
     timelineChartCoordinateSystem.recalculateScale()
   }
 
diff --git a/Dashboard.js b/PostLoader.js
similarity index 100%
rename from Dashboard.js
rename to PostLoader.js
diff --git a/Spaces/ChartingSpace.js b/Spaces/ChartingSpace.js
index 81e30a962..be86e976b 100644
--- a/Spaces/ChartingSpace.js
+++ b/Spaces/ChartingSpace.js
@@ -265,12 +265,12 @@ function newChartingSpace () {
     if (thisObject.payload.node === undefined) { return }
     syncWithDesignerLoop = syncWithDesignerLoop + 0.00000000001
 
-    if (thisObject.payload.node.clusters !== undefined) {
-      for (let i = 0; i < thisObject.payload.node.clusters.length; i++) {
-        let cluster = thisObject.payload.node.clusters[i]
-        if (cluster.timeMachines !== undefined) {
-          for (let j = 0; j < cluster.timeMachines.length; j++) {
-            let node = cluster.timeMachines[j]
+    if (thisObject.payload.node.dashboards !== undefined) {
+      for (let i = 0; i < thisObject.payload.node.dashboards.length; i++) {
+        let dashboard = thisObject.payload.node.dashboards[i]
+        if (dashboard.timeMachines !== undefined) {
+          for (let j = 0; j < dashboard.timeMachines.length; j++) {
+            let node = dashboard.timeMachines[j]
             let timeMachine = timeMachinesMap.get(node.id)
             if (timeMachine === undefined) {
               /* The time machine node is new, thus we need to initialize a new timeMachine */
diff --git a/Spaces/DesignSpace.js b/Spaces/DesignSpace.js
index c2cba9767..77485025f 100644
--- a/Spaces/DesignSpace.js
+++ b/Spaces/DesignSpace.js
@@ -242,7 +242,7 @@ function newDesignSpace () {
       'session-based-data',
       'session-independent-data',
       'session-reference',
-      'cluster',
+      'dashboard',
       'toggle-auto-scale-manual',
       'toggle-auto-scale-auto-min-max',
       'toggle-auto-scale-auto-max',

From 7f8ab6ede1bfdbb3a93182417aaa08b5236d7895 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Fri, 14 Feb 2020 21:54:06 +0100
Subject: [PATCH 70/81] for special effect

---
 Globals.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Globals.js b/Globals.js
index cbe56aae1..24454d260 100644
--- a/Globals.js
+++ b/Globals.js
@@ -44,6 +44,7 @@ UI_FONT = {
 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  
 
 let FONT_ASPECT_RATIO = 0.32;
 

From c6a152d1af339c306bad63464ecf933ffea49aa6 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Sat, 15 Feb 2020 13:03:06 +0100
Subject: [PATCH 71/81] buttons positioning

---
 Scales/AutoScaleButton.js | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/Scales/AutoScaleButton.js b/Scales/AutoScaleButton.js
index 12c9301c4..1034443ca 100644
--- a/Scales/AutoScaleButton.js
+++ b/Scales/AutoScaleButton.js
@@ -20,6 +20,7 @@ function newAutoScaleButton () {
   thisObject.container.isDraggeable = false
   thisObject.container.frame.containerName = 'Auto Scale Button'
 
+  const ICON_SIZE = 36
   let onMouseWheelEventSubscriptionId
   let coordinateSystem
   let axis
@@ -46,24 +47,24 @@ function newAutoScaleButton () {
 
     switch (axis) {
       case 'X': {
-        thisObject.container.frame.width = 20
-        thisObject.container.frame.height = 20
+        thisObject.container.frame.width = ICON_SIZE
+        thisObject.container.frame.height = ICON_SIZE
 
         let position = {
-          x: thisObject.container.parentContainer.frame.width / 2 - thisObject.container.frame.width / 2,
-          y: thisObject.container.parentContainer.frame.height / 2 - thisObject.container.frame.height / 2
+          x: thisObject.container.parentContainer.frame.width * 7 / 8,
+          y: thisObject.container.parentContainer.frame.height / 2
         }
 
         thisObject.container.frame.position = position
         break
       }
       case 'Y': {
-        thisObject.container.frame.width = 20
-        thisObject.container.frame.height = 20
+        thisObject.container.frame.width = ICON_SIZE
+        thisObject.container.frame.height = ICON_SIZE
 
         let position = {
-          x: thisObject.container.parentContainer.frame.width / 2 - thisObject.container.frame.width / 2,
-          y: thisObject.container.parentContainer.frame.height / 2 - thisObject.container.frame.height / 2
+          x: thisObject.container.parentContainer.frame.width * 7 / 8,
+          y: thisObject.container.parentContainer.frame.height / 2
         }
 
         thisObject.container.frame.position = position
@@ -169,7 +170,7 @@ function newAutoScaleButton () {
         if (thisObject.autoMinScale === true && thisObject.autoMaxScale === true) {
           icon = canvas.designSpace.iconCollection.get('toggle-auto-time-scale-auto-min-max')
         }
-        drawIcon(icon, 6 / 8, 0, 0, 28, 12, thisObject.container.parentContainer)
+        drawIcon(icon, 0, 0, 0, 0, ICON_SIZE, thisObject.container)
         break
       }
       case 'Y': {
@@ -185,7 +186,7 @@ function newAutoScaleButton () {
         if (thisObject.autoMinScale === true && thisObject.autoMaxScale === true) {
           icon = canvas.designSpace.iconCollection.get('toggle-auto-scale-auto-min-max')
         }
-        drawIcon(icon, 6 / 8, 0, 0, 28, 12, thisObject.container.parentContainer)
+        drawIcon(icon, 0, 0, 0, 0, ICON_SIZE, thisObject.container)
         break
       }
     }

From 2d4eac8e15f7c6de00b929fb44366cb4f3fed523 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Sat, 15 Feb 2020 13:14:39 +0100
Subject: [PATCH 72/81] bug fixed

---
 ChartingSpace/TimeMachine.js       |  2 ++
 DesignSpace/Workspace/Workspace.js | 20 +++++++++++++++++---
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/ChartingSpace/TimeMachine.js b/ChartingSpace/TimeMachine.js
index d11bacf51..948938cd1 100644
--- a/ChartingSpace/TimeMachine.js
+++ b/ChartingSpace/TimeMachine.js
@@ -528,6 +528,8 @@ function newTimeMachine () {
   }
 
   function draw () {
+    if (thisObject.payload === undefined) { return }
+    if (thisObject.payload.node === undefined) { return }
     if (thisObject.container.frame.isInViewPort()) {
       for (let i = 0; i < thisObject.timelineCharts.length; i++) {
         let timelineChart = thisObject.timelineCharts[thisObject.timelineCharts.length - i - 1]
diff --git a/DesignSpace/Workspace/Workspace.js b/DesignSpace/Workspace/Workspace.js
index d061988c8..e9075d8a7 100644
--- a/DesignSpace/Workspace/Workspace.js
+++ b/DesignSpace/Workspace/Workspace.js
@@ -182,9 +182,23 @@ function newWorkspace () {
         if (rootNode.networkNodes !== undefined) {
           for (let j = 0; j < rootNode.networkNodes.length; j++) {
             let networkNode = rootNode.networkNodes[j]
-            for (let i = 0; i < networkNode.taskManagers.length; i++) {
-              let taskManager = networkNode.taskManagers[i]
-              taskManager.payload.uiObject.menu.internalClick('Stop All Tasks')
+            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')
+              }
+            }
+            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')
+              }
+            }
+            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')
+              }
             }
           }
         }

From fb83ffb852844a75a75f161b2240111754d8c726 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Tue, 18 Feb 2020 09:33:44 +0100
Subject: [PATCH 73/81] Dragging from the center impacts all scales downstream

---
 ChartingSpace/EdgeEditor.js    | 10 +++++++---
 ChartingSpace/TimelineChart.js |  2 +-
 Scales/RateScale.js            | 24 ++++++++++++++++++++----
 3 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/ChartingSpace/EdgeEditor.js b/ChartingSpace/EdgeEditor.js
index 78f327139..ccffbfc4c 100644
--- a/ChartingSpace/EdgeEditor.js
+++ b/ChartingSpace/EdgeEditor.js
@@ -163,7 +163,11 @@ function newEdgeEditor () {
             coordinateSystem.max.x = newMinDate.valueOf() + xDifferenceMaxMin
             coordinateSystem.min.y = newMaxRate - yDifferenceMaxMin
             coordinateSystem.max.y = newMaxRate
-            coordinateSystem.recalculateScale()
+            let event = {
+              type: 'center dragged',
+              dragVector: dragVector
+            }
+            coordinateSystem.recalculateScale(event)
           }
         }
         thisObject.container.parentContainer.eventHandler.raiseEvent('onMouseOver', mouse.position)
@@ -188,7 +192,7 @@ function newEdgeEditor () {
             coordinateSystem.max.y = newMaxRate
             coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height
             let event = {
-              border: 'top',
+              type: 'top dragged',
               dragVector: dragVector
             }
             coordinateSystem.recalculateScale(event)
@@ -221,7 +225,7 @@ function newEdgeEditor () {
             coordinateSystem.min.y = newMinRate
             coordinateSystem.maxHeight = thisObject.container.parentContainer.frame.height
             let event = {
-              border: 'bottom',
+              type: 'bottom dragged',
               dragVector: dragVector
             }
             coordinateSystem.recalculateScale(event)
diff --git a/ChartingSpace/TimelineChart.js b/ChartingSpace/TimelineChart.js
index 4444579bb..ce39cf53d 100644
--- a/ChartingSpace/TimelineChart.js
+++ b/ChartingSpace/TimelineChart.js
@@ -233,7 +233,7 @@ function newTimelineChart () {
 
   function onScaleChanged (event) {
     if (thisObject.rateScale !== undefined) {
-      thisObject.rateScale.onBorderChanged(event)
+      thisObject.rateScale.onUpstreamScaleChanged(event)
     }
     timelineChartCoordinateSystem.min.x = timeMachineCoordinateSystem.min.x
     timelineChartCoordinateSystem.max.x = timeMachineCoordinateSystem.max.x
diff --git a/Scales/RateScale.js b/Scales/RateScale.js
index c91043535..07b2396a7 100644
--- a/Scales/RateScale.js
+++ b/Scales/RateScale.js
@@ -10,7 +10,7 @@ function newRateScale () {
     maxValue: undefined,
     isVisible: true,
     layersOn: undefined,
-    onBorderChanged: onBorderChanged,
+    onUpstreamScaleChanged: onUpstreamScaleChanged,
     onMouseOverSomeTimeMachineContainer: onMouseOverSomeTimeMachineContainer,
     physics: physics,
     draw: draw,
@@ -244,9 +244,25 @@ function newRateScale () {
     coordinateSystem.recalculateScale()
   }
 
-  function onBorderChanged (event) {
+  function onUpstreamScaleChanged (event) {
     if (event === undefined) { return }
-    if (event.border === 'top') {
+    if (event.type === 'center dragged') {
+      let point = {
+        x: event.dragVector.x,
+        y: -event.dragVector.y
+      }
+      let newMinDate = getDateFromPointAtContainer(point, rateCalculationsContainer, coordinateSystem)
+      let newMaxRate = getRateFromPointAtContainer(point, rateCalculationsContainer, coordinateSystem)
+      let xDifferenceMaxMin = coordinateSystem.max.x - coordinateSystem.min.x
+      let yDifferenceMaxMin = coordinateSystem.max.y - coordinateSystem.min.y
+      coordinateSystem.min.x = newMinDate.valueOf()
+      coordinateSystem.max.x = newMinDate.valueOf() + xDifferenceMaxMin
+      coordinateSystem.min.y = newMaxRate - yDifferenceMaxMin
+      coordinateSystem.max.y = newMaxRate
+
+      coordinateSystem.recalculateScale()
+    }
+    if (event.type === 'top dragged') {
       let point = {
         x: event.dragVector.x,
         y: event.dragVector.y
@@ -257,7 +273,7 @@ function newRateScale () {
       coordinateSystem.maxHeight = rateCalculationsContainer.frame.height
       coordinateSystem.recalculateScale()
     }
-    if (event.border === 'bottom') {
+    if (event.type === 'bottom dragged') {
       let point = {
         x: event.dragVector.x,
         y: event.dragVector.y + rateCalculationsContainer.frame.height

From e50f1bde4eccae18724543c199ff5984a8443bdd Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Tue, 18 Feb 2020 09:53:20 +0100
Subject: [PATCH 74/81] cleaning

---
 PostLoader.js | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/PostLoader.js b/PostLoader.js
index 5b33252a4..bb34c97ea 100644
--- a/PostLoader.js
+++ b/PostLoader.js
@@ -45,18 +45,6 @@ function newDashboard () {
 
         if (canvas !== undefined) { canvas.finalize() }
 
-        /* Here we check where we are executing. In case we are Local we need to create a Local Dummy User and Data Mine. */
-
-        if (window.canvasApp.executingAt === 'Local') {
-          window.localStorage.setItem(LOGGED_IN_ACCESS_TOKEN_LOCAL_STORAGE_KEY, 'Local Access Token')       // Dummy Access Token
-          window.localStorage.setItem(LOGGED_IN_USER_LOCAL_STORAGE_KEY, '{"authId":"x|x","alias":"user"}')  // Dummy Local User
-        }
-
-        /* Here we used to have a call to the DataMines Module to get the profile pictures. That was removed but to keep things working, we do this: */
-
-        window.canvasApp.context.dataMineProfileImages = new Map()
-        window.canvasApp.context.fbProfileImages = new Map()
-
         setTimeout(delayedStart, DEBUG_START_UP_DELAY)
       }
     } catch (err) {

From 04f304908ad087c0f17abb4b17504fbb362060d4 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Tue, 18 Feb 2020 10:11:08 +0100
Subject: [PATCH 75/81] Dragging improved

---
 ChartingSpace/EdgeEditor.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ChartingSpace/EdgeEditor.js b/ChartingSpace/EdgeEditor.js
index ccffbfc4c..f40dffd2f 100644
--- a/ChartingSpace/EdgeEditor.js
+++ b/ChartingSpace/EdgeEditor.js
@@ -143,14 +143,14 @@ function newEdgeEditor () {
     switch (whereIsMouseOver) {
       case 'center': {
         switch (buttonUsedForDragging) {
-          case 'left mouse button': {
+          case 'right mouse button': {
             /* 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.eventHandler.raiseEvent('onDisplace')
             break
           }
-          case 'right mouse button': {
+          case 'left mouse button': {
             let point = {
               x: -dragVector.x,
               y: -dragVector.y

From 617d4992953c5f5b9534d5d20c3a0622969d07b4 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Tue, 18 Feb 2020 13:51:26 +0100
Subject: [PATCH 76/81] capturing mouse and keys activity while recording

---
 Animation.js          | 150 +++++++++++++++++++++++++++++++++++++++++-
 Canvas.js             |  50 ++++++++++++++
 Spaces/DesignSpace.js |   7 +-
 3 files changed, 205 insertions(+), 2 deletions(-)

diff --git a/Animation.js b/Animation.js
index 9163e8a69..59b2db74e 100644
--- a/Animation.js
+++ b/Animation.js
@@ -27,11 +27,12 @@ function newAnimation () {
 
   let totalConsumption = 0
   let totalCounter = 0
-
+  let pointerIcon
   return thisObject
 
   function finalize () {
     thisObject.stop()
+    pointerIcon = undefined
   }
 
   function initialize () {
@@ -137,6 +138,153 @@ function newAnimation () {
 
       /* Media Recording */
       if (areWeRecording === true) {
+        const DISTANCE_BETWEEN_ICONS = 60
+        const ICON_SIZES = 50
+
+        let mousePointerIcon = canvas.designSpace.iconCollection.get('mouse-pointer')
+        let wheelIcon = canvas.designSpace.iconCollection.get('mouse-wheel')
+        let draggingIcon = canvas.designSpace.iconCollection.get('support')
+        let keyDownIcon = canvas.designSpace.iconCollection.get('tron')
+
+        let leftClickIcon = canvas.designSpace.iconCollection.get('mouse-left-click')
+        let rightClickIcon = canvas.designSpace.iconCollection.get('mouse-right-click')
+        let wheelClickIcon = canvas.designSpace.iconCollection.get('mouse-wheel-click')
+
+        let imagePosition
+        let buttonPressedIcon
+
+        switch (canvas.mouse.action) {
+          case 'moving': {
+            pointerIcon = mousePointerIcon
+            break
+          }
+          case 'dragging': {
+            pointerIcon = draggingIcon
+            break
+          }
+          case 'wheel': {
+            pointerIcon = wheelIcon
+            break
+          }
+          case 'key down': {
+            pointerIcon = mousePointerIcon
+            break
+          }
+          case 'key up': {
+            pointerIcon = mousePointerIcon
+            break
+          }
+        }
+
+        imagePosition = {
+          x: canvas.mouse.position.x,
+          y: canvas.mouse.position.y
+        }
+        drawMousePointer(pointerIcon, imagePosition, ICON_SIZES)
+
+        switch (canvas.mouse.event.buttons) {
+          case 0: {
+            buttonPressedIcon = undefined
+            break
+          }
+          case 1: {
+            buttonPressedIcon = leftClickIcon
+            break
+          }
+          case 2: {
+            buttonPressedIcon = rightClickIcon
+            break
+          }
+          case 3: {
+            buttonPressedIcon = undefined
+            break
+          }
+          case 4: {
+            buttonPressedIcon = wheelClickIcon
+            break
+          }
+        }
+
+        imagePosition = {
+          x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS,
+          y: canvas.mouse.position.y
+        }
+        drawMousePointer(buttonPressedIcon, imagePosition, ICON_SIZES)
+
+        if (canvas.mouse.event.shiftKey === true) {
+          let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
+          imagePosition = {
+            x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
+            y: canvas.mouse.position.y - DISTANCE_BETWEEN_ICONS
+          }
+          drawMousePointer(icon, imagePosition, ICON_SIZES)
+        }
+
+        if (canvas.mouse.event.ctrlKey === true || canvas.mouse.event.metaKey === true) {
+          let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
+          imagePosition = {
+            x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
+            y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS
+          }
+          drawMousePointer(icon, imagePosition, ICON_SIZES)
+        }
+
+        if (canvas.mouse.event.altKey === true) {
+          let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
+          imagePosition = {
+            x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
+            y: canvas.mouse.position.y - 0
+          }
+          drawMousePointer(icon, imagePosition, ICON_SIZES)
+        }
+
+        if (canvas.mouse.event.code === 'ArrowUp') {
+          let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
+          imagePosition = {
+            x: canvas.mouse.position.x - 0,
+            y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS
+          }
+          drawMousePointer(icon, imagePosition, ICON_SIZES)
+        }
+
+        if (canvas.mouse.event.code === 'ArrowDown') {
+          let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
+          imagePosition = {
+            x: canvas.mouse.position.x - 0,
+            y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS * 2
+          }
+          drawMousePointer(icon, imagePosition, ICON_SIZES)
+        }
+
+        if (canvas.mouse.event.code === 'ArrowLeft') {
+          let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
+          imagePosition = {
+            x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
+            y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS * 2
+          }
+          drawMousePointer(icon, imagePosition, ICON_SIZES)
+        }
+
+        if (canvas.mouse.event.code === 'ArrowRight') {
+          let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
+          imagePosition = {
+            x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS,
+            y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS * 2
+          }
+          drawMousePointer(icon, imagePosition, ICON_SIZES)
+        }
+
+        function drawMousePointer (icon, imagePosition, imageSize) {
+          if (icon !== undefined) {
+            if (icon.canDrawIcon === true) {
+              browserCanvasContext.drawImage(
+                icon, imagePosition.x,
+                imagePosition.y,
+                imageSize,
+                imageSize)
+            }
+          }
+        }
         mediaRecorder.capture(browserCanvas)
       }
 
diff --git a/Canvas.js b/Canvas.js
index f2fd2a639..50e4a896e 100644
--- a/Canvas.js
+++ b/Canvas.js
@@ -39,6 +39,7 @@ function newCanvas () {
     bottomSpace: undefined,
     designSpace: undefined,
     animation: undefined,
+    mouse: undefined,
     initialize: initialize,
     finalize: finalize
   }
@@ -49,6 +50,13 @@ function newCanvas () {
   let lastContainerMouseOver
   let lastShortcutKeyRejection
 
+  thisObject.mouse = {
+    position: {
+      x: 0,
+      y: 0
+    },
+    action: ''
+  }
   return thisObject
 
   function finalize () {
@@ -73,9 +81,12 @@ function newCanvas () {
       browserCanvas.removeEventListener('drop', onDragDrop, false)
 
       browserCanvas.removeEventListener('keydown', onKeyDown, false)
+      browserCanvas.removeEventListener('keyup', onKeyUp, false)
 
       splashScreen = undefined
       lastContainerMouseOver = undefined
+
+      hisObject.mouse = undefined
     } catch (err) {
       if (ERROR_LOG === true) { logger.write('[ERROR] finalize -> err = ' + err.stack) }
     }
@@ -155,6 +166,7 @@ function newCanvas () {
 
       /* Keyboard events */
       window.addEventListener('keydown', onKeyDown, true)
+      window.addEventListener('keyup', onKeyUp, true)
 
       /* Mouse Events */
       browserCanvas.addEventListener('mousedown', onMouseDown, false)
@@ -228,7 +240,15 @@ function newCanvas () {
     }
   }
 
+  function onKeyUp (event) {
+    thisObject.mouse.event = event
+    thisObject.mouse.action = 'key up'
+  }
+
   function onKeyDown (event) {
+    thisObject.mouse.event = event
+    thisObject.mouse.action = 'key down'
+
     checkMediaRecording(event)
 
     let nodeOnFocus = canvas.designSpace.workspace.getNodeThatIsOnFocus()
@@ -461,6 +481,20 @@ function newCanvas () {
 
   function onMouseDown (event) {
     try {
+      thisObject.mouse.event = event
+      thisObject.mouse.position.x = event.pageX
+      thisObject.mouse.position.y = event.pageY - CURRENT_TOP_MARGIN
+      switch (event.buttons) {
+        case 1: {
+          thisObject.mouse.action = 'clicking with left button'
+          break
+        }
+        case 2: {
+          thisObject.mouse.action = 'clicking with right button'
+          break
+        }
+      }
+
       let point = event
       point.x = event.pageX
       point.y = event.pageY - CURRENT_TOP_MARGIN
@@ -571,6 +605,7 @@ function newCanvas () {
         ignoreNextClick = false
         return
       }
+
       let point = event
       point.x = event.pageX
       point.y = event.pageY - CURRENT_TOP_MARGIN
@@ -651,6 +686,11 @@ function newCanvas () {
 
   function onMouseMove (event) {
     try {
+      thisObject.mouse.event = event
+      thisObject.mouse.position.x = event.pageX
+      thisObject.mouse.position.y = event.pageY - CURRENT_TOP_MARGIN
+      thisObject.mouse.action = 'moving'
+
       /* Processing the event */
       let point = event
       point.x = event.pageX
@@ -787,6 +827,11 @@ function newCanvas () {
 
   function onMouseWheel (event) {
     try {
+      thisObject.mouse.event = event
+      thisObject.mouse.position.x = event.pageX
+      thisObject.mouse.position.y = event.pageY - CURRENT_TOP_MARGIN
+      thisObject.mouse.action = 'wheel'
+
            // cross-browser wheel delta
       var event = window.event || event // old IE support
       event.delta = Math.max(-1, Math.min(1, event.wheelDelta || -event.detail))
@@ -877,6 +922,11 @@ 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'
+
         browserCanvas.style.cursor = 'grabbing'
         thisObject.eventHandler.raiseEvent('Dragging', undefined)
 
diff --git a/Spaces/DesignSpace.js b/Spaces/DesignSpace.js
index 77485025f..4754fe82a 100644
--- a/Spaces/DesignSpace.js
+++ b/Spaces/DesignSpace.js
@@ -251,7 +251,12 @@ function newDesignSpace () {
       'toggle-auto-time-scale-auto-min',
       'toggle-auto-time-scale-auto-max',
       'toggle-auto-time-scale-auto-min-max',
-      'toggle-auto-time-scale-manual'
+      'toggle-auto-time-scale-manual',
+      'mouse-pointer',
+      'mouse-left-click',
+      'mouse-right-click',
+      'mouse-wheel',
+      'mouse-wheel-click'
     ]
 
     for (let i = 0; i < iconsNames.length; i++) {

From 783ce5526badd21593a075121e5d0f50ec6124c4 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Tue, 18 Feb 2020 13:57:00 +0100
Subject: [PATCH 77/81] new file

---
 Animation.js | 149 +-------------------------------------------------
 Recording.js | 152 +++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 153 insertions(+), 148 deletions(-)
 create mode 100644 Recording.js

diff --git a/Animation.js b/Animation.js
index 59b2db74e..b2684f834 100644
--- a/Animation.js
+++ b/Animation.js
@@ -138,154 +138,7 @@ function newAnimation () {
 
       /* Media Recording */
       if (areWeRecording === true) {
-        const DISTANCE_BETWEEN_ICONS = 60
-        const ICON_SIZES = 50
-
-        let mousePointerIcon = canvas.designSpace.iconCollection.get('mouse-pointer')
-        let wheelIcon = canvas.designSpace.iconCollection.get('mouse-wheel')
-        let draggingIcon = canvas.designSpace.iconCollection.get('support')
-        let keyDownIcon = canvas.designSpace.iconCollection.get('tron')
-
-        let leftClickIcon = canvas.designSpace.iconCollection.get('mouse-left-click')
-        let rightClickIcon = canvas.designSpace.iconCollection.get('mouse-right-click')
-        let wheelClickIcon = canvas.designSpace.iconCollection.get('mouse-wheel-click')
-
-        let imagePosition
-        let buttonPressedIcon
-
-        switch (canvas.mouse.action) {
-          case 'moving': {
-            pointerIcon = mousePointerIcon
-            break
-          }
-          case 'dragging': {
-            pointerIcon = draggingIcon
-            break
-          }
-          case 'wheel': {
-            pointerIcon = wheelIcon
-            break
-          }
-          case 'key down': {
-            pointerIcon = mousePointerIcon
-            break
-          }
-          case 'key up': {
-            pointerIcon = mousePointerIcon
-            break
-          }
-        }
-
-        imagePosition = {
-          x: canvas.mouse.position.x,
-          y: canvas.mouse.position.y
-        }
-        drawMousePointer(pointerIcon, imagePosition, ICON_SIZES)
-
-        switch (canvas.mouse.event.buttons) {
-          case 0: {
-            buttonPressedIcon = undefined
-            break
-          }
-          case 1: {
-            buttonPressedIcon = leftClickIcon
-            break
-          }
-          case 2: {
-            buttonPressedIcon = rightClickIcon
-            break
-          }
-          case 3: {
-            buttonPressedIcon = undefined
-            break
-          }
-          case 4: {
-            buttonPressedIcon = wheelClickIcon
-            break
-          }
-        }
-
-        imagePosition = {
-          x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS,
-          y: canvas.mouse.position.y
-        }
-        drawMousePointer(buttonPressedIcon, imagePosition, ICON_SIZES)
-
-        if (canvas.mouse.event.shiftKey === true) {
-          let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
-          imagePosition = {
-            x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
-            y: canvas.mouse.position.y - DISTANCE_BETWEEN_ICONS
-          }
-          drawMousePointer(icon, imagePosition, ICON_SIZES)
-        }
-
-        if (canvas.mouse.event.ctrlKey === true || canvas.mouse.event.metaKey === true) {
-          let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
-          imagePosition = {
-            x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
-            y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS
-          }
-          drawMousePointer(icon, imagePosition, ICON_SIZES)
-        }
-
-        if (canvas.mouse.event.altKey === true) {
-          let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
-          imagePosition = {
-            x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
-            y: canvas.mouse.position.y - 0
-          }
-          drawMousePointer(icon, imagePosition, ICON_SIZES)
-        }
-
-        if (canvas.mouse.event.code === 'ArrowUp') {
-          let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
-          imagePosition = {
-            x: canvas.mouse.position.x - 0,
-            y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS
-          }
-          drawMousePointer(icon, imagePosition, ICON_SIZES)
-        }
-
-        if (canvas.mouse.event.code === 'ArrowDown') {
-          let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
-          imagePosition = {
-            x: canvas.mouse.position.x - 0,
-            y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS * 2
-          }
-          drawMousePointer(icon, imagePosition, ICON_SIZES)
-        }
-
-        if (canvas.mouse.event.code === 'ArrowLeft') {
-          let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
-          imagePosition = {
-            x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
-            y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS * 2
-          }
-          drawMousePointer(icon, imagePosition, ICON_SIZES)
-        }
-
-        if (canvas.mouse.event.code === 'ArrowRight') {
-          let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
-          imagePosition = {
-            x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS,
-            y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS * 2
-          }
-          drawMousePointer(icon, imagePosition, ICON_SIZES)
-        }
-
-        function drawMousePointer (icon, imagePosition, imageSize) {
-          if (icon !== undefined) {
-            if (icon.canDrawIcon === true) {
-              browserCanvasContext.drawImage(
-                icon, imagePosition.x,
-                imagePosition.y,
-                imageSize,
-                imageSize)
-            }
-          }
-        }
-        mediaRecorder.capture(browserCanvas)
+        recordCanvas()
       }
 
       /* We request the next frame to be drawn, and stablishing a loop */
diff --git a/Recording.js b/Recording.js
new file mode 100644
index 000000000..613f664c9
--- /dev/null
+++ b/Recording.js
@@ -0,0 +1,152 @@
+function recordCanvas () {
+  {
+    const DISTANCE_BETWEEN_ICONS = 60
+    const ICON_SIZES = 50
+
+    let mousePointerIcon = canvas.designSpace.iconCollection.get('mouse-pointer')
+    let wheelIcon = canvas.designSpace.iconCollection.get('mouse-wheel')
+    let draggingIcon = canvas.designSpace.iconCollection.get('support')
+    let keyDownIcon = canvas.designSpace.iconCollection.get('tron')
+
+    let leftClickIcon = canvas.designSpace.iconCollection.get('mouse-left-click')
+    let rightClickIcon = canvas.designSpace.iconCollection.get('mouse-right-click')
+    let wheelClickIcon = canvas.designSpace.iconCollection.get('mouse-wheel-click')
+
+    let imagePosition
+    let buttonPressedIcon
+
+    switch (canvas.mouse.action) {
+      case 'moving': {
+        pointerIcon = mousePointerIcon
+        break
+      }
+      case 'dragging': {
+        pointerIcon = draggingIcon
+        break
+      }
+      case 'wheel': {
+        pointerIcon = wheelIcon
+        break
+      }
+      case 'key down': {
+        pointerIcon = mousePointerIcon
+        break
+      }
+      case 'key up': {
+        pointerIcon = mousePointerIcon
+        break
+      }
+    }
+
+    imagePosition = {
+      x: canvas.mouse.position.x,
+      y: canvas.mouse.position.y
+    }
+    drawMousePointer(pointerIcon, imagePosition, ICON_SIZES)
+
+    switch (canvas.mouse.event.buttons) {
+      case 0: {
+        buttonPressedIcon = undefined
+        break
+      }
+      case 1: {
+        buttonPressedIcon = leftClickIcon
+        break
+      }
+      case 2: {
+        buttonPressedIcon = rightClickIcon
+        break
+      }
+      case 3: {
+        buttonPressedIcon = undefined
+        break
+      }
+      case 4: {
+        buttonPressedIcon = wheelClickIcon
+        break
+      }
+    }
+
+    imagePosition = {
+      x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS,
+      y: canvas.mouse.position.y
+    }
+    drawMousePointer(buttonPressedIcon, imagePosition, ICON_SIZES)
+
+    if (canvas.mouse.event.shiftKey === true) {
+      let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
+      imagePosition = {
+        x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
+        y: canvas.mouse.position.y - DISTANCE_BETWEEN_ICONS
+      }
+      drawMousePointer(icon, imagePosition, ICON_SIZES)
+    }
+
+    if (canvas.mouse.event.ctrlKey === true || canvas.mouse.event.metaKey === true) {
+      let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
+      imagePosition = {
+        x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
+        y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS
+      }
+      drawMousePointer(icon, imagePosition, ICON_SIZES)
+    }
+
+    if (canvas.mouse.event.altKey === true) {
+      let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
+      imagePosition = {
+        x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
+        y: canvas.mouse.position.y - 0
+      }
+      drawMousePointer(icon, imagePosition, ICON_SIZES)
+    }
+
+    if (canvas.mouse.event.code === 'ArrowUp') {
+      let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
+      imagePosition = {
+        x: canvas.mouse.position.x - 0,
+        y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS
+      }
+      drawMousePointer(icon, imagePosition, ICON_SIZES)
+    }
+
+    if (canvas.mouse.event.code === 'ArrowDown') {
+      let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
+      imagePosition = {
+        x: canvas.mouse.position.x - 0,
+        y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS * 2
+      }
+      drawMousePointer(icon, imagePosition, ICON_SIZES)
+    }
+
+    if (canvas.mouse.event.code === 'ArrowLeft') {
+      let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
+      imagePosition = {
+        x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
+        y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS * 2
+      }
+      drawMousePointer(icon, imagePosition, ICON_SIZES)
+    }
+
+    if (canvas.mouse.event.code === 'ArrowRight') {
+      let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
+      imagePosition = {
+        x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS,
+        y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS * 2
+      }
+      drawMousePointer(icon, imagePosition, ICON_SIZES)
+    }
+
+    function drawMousePointer (icon, imagePosition, imageSize) {
+      if (icon !== undefined) {
+        if (icon.canDrawIcon === true) {
+          browserCanvasContext.drawImage(
+            icon, imagePosition.x,
+            imagePosition.y,
+            imageSize,
+            imageSize)
+        }
+      }
+    }
+    mediaRecorder.capture(browserCanvas)
+  }
+}

From 3adb49cb9363fc6c551670bd8eaf80118b7b9c36 Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Tue, 18 Feb 2020 15:04:24 +0100
Subject: [PATCH 78/81] new file video recorder

---
 Animation.js                         |   6 +-
 FloatingSpace/UiObjectConstructor.js |  15 +--
 FloatingSpace/UiObjectTitle.js       |   2 +-
 Recording.js                         | 152 ------------------------
 Spaces/DesignSpace.js                |   6 +-
 VideoRecorder.js                     | 166 +++++++++++++++++++++++++++
 6 files changed, 184 insertions(+), 163 deletions(-)
 delete mode 100644 Recording.js
 create mode 100644 VideoRecorder.js

diff --git a/Animation.js b/Animation.js
index b2684f834..41ec4c976 100644
--- a/Animation.js
+++ b/Animation.js
@@ -28,15 +28,17 @@ function newAnimation () {
   let totalConsumption = 0
   let totalCounter = 0
   let pointerIcon
+  let videoRecorder
   return thisObject
 
   function finalize () {
     thisObject.stop()
     pointerIcon = undefined
+    videoRecorder = undefined
   }
 
   function initialize () {
-
+    videoRecorder = newVideoRecorder()
   }
 
   function start () {
@@ -138,7 +140,7 @@ function newAnimation () {
 
       /* Media Recording */
       if (areWeRecording === true) {
-        recordCanvas()
+        videoRecorder.recordCanvas()
       }
 
       /* We request the next frame to be drawn, and stablishing a loop */
diff --git a/FloatingSpace/UiObjectConstructor.js b/FloatingSpace/UiObjectConstructor.js
index 1df4c95a6..ac5ee4dd3 100644
--- a/FloatingSpace/UiObjectConstructor.js
+++ b/FloatingSpace/UiObjectConstructor.js
@@ -327,6 +327,7 @@ function newUiObjectConstructor () {
   function setFloatingObjectBasicProperties (floatingObject, payload) {
     const FRICTION = 0.95
     const INITIAL_FRICTION = 0.97
+    const INITIAL_FONT_SIZE = 12
 
     switch (payload.node.type) {
       case 'Workspace': {
@@ -375,7 +376,7 @@ function newUiObjectConstructor () {
       floatingObject.initializeMass(500)
       floatingObject.initializeRadius(45)
       floatingObject.initializeImageSize(80)
-      floatingObject.initializeFontSize(10)
+      floatingObject.initializeFontSize(INITIAL_FONT_SIZE)
 
       floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
     }
@@ -386,7 +387,7 @@ function newUiObjectConstructor () {
       floatingObject.initializeMass(600)
       floatingObject.initializeRadius(45)
       floatingObject.initializeImageSize(80)
-      floatingObject.initializeFontSize(10)
+      floatingObject.initializeFontSize(INITIAL_FONT_SIZE)
 
       floatingObject.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 1)'
 
@@ -401,7 +402,7 @@ function newUiObjectConstructor () {
       floatingObject.initializeMass(300)
       floatingObject.initializeRadius(40)
       floatingObject.initializeImageSize(70)
-      floatingObject.initializeFontSize(10)
+      floatingObject.initializeFontSize(INITIAL_FONT_SIZE)
 
       floatingObject.fillStyle = 'rgba(' + UI_COLOR.GREEN + ', 1)'
 
@@ -416,7 +417,7 @@ function newUiObjectConstructor () {
       floatingObject.initializeMass(150)
       floatingObject.initializeRadius(35)
       floatingObject.initializeImageSize(60)
-      floatingObject.initializeFontSize(10)
+      floatingObject.initializeFontSize(INITIAL_FONT_SIZE)
 
       floatingObject.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', 1)'
 
@@ -431,7 +432,7 @@ function newUiObjectConstructor () {
       floatingObject.initializeMass(75)
       floatingObject.initializeRadius(30)
       floatingObject.initializeImageSize(50)
-      floatingObject.initializeFontSize(10)
+      floatingObject.initializeFontSize(INITIAL_FONT_SIZE)
 
       floatingObject.fillStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', 1)'
 
@@ -446,7 +447,7 @@ function newUiObjectConstructor () {
       floatingObject.initializeMass(50)
       floatingObject.initializeRadius(25)
       floatingObject.initializeImageSize(40)
-      floatingObject.initializeFontSize(10)
+      floatingObject.initializeFontSize(INITIAL_FONT_SIZE)
 
       floatingObject.fillStyle = 'rgba(' + UI_COLOR.RED + ', 1)'
     }
@@ -457,7 +458,7 @@ function newUiObjectConstructor () {
       floatingObject.initializeMass(25)
       floatingObject.initializeRadius(20)
       floatingObject.initializeImageSize(30)
-      floatingObject.initializeFontSize(10)
+      floatingObject.initializeFontSize(INITIAL_FONT_SIZE)
 
       floatingObject.fillStyle = 'rgba(' + UI_COLOR.RED + ', 1)'
     }
diff --git a/FloatingSpace/UiObjectTitle.js b/FloatingSpace/UiObjectTitle.js
index b014cd958..efb8a1da2 100644
--- a/FloatingSpace/UiObjectTitle.js
+++ b/FloatingSpace/UiObjectTitle.js
@@ -273,7 +273,7 @@ function newUiObjectTitle () {
           label = trimTitle(label)
 
           labelPoint = {
-            x: 0,
+            x: 5,
             y: thisObject.container.frame.height * 0.8
           }
 
diff --git a/Recording.js b/Recording.js
deleted file mode 100644
index 613f664c9..000000000
--- a/Recording.js
+++ /dev/null
@@ -1,152 +0,0 @@
-function recordCanvas () {
-  {
-    const DISTANCE_BETWEEN_ICONS = 60
-    const ICON_SIZES = 50
-
-    let mousePointerIcon = canvas.designSpace.iconCollection.get('mouse-pointer')
-    let wheelIcon = canvas.designSpace.iconCollection.get('mouse-wheel')
-    let draggingIcon = canvas.designSpace.iconCollection.get('support')
-    let keyDownIcon = canvas.designSpace.iconCollection.get('tron')
-
-    let leftClickIcon = canvas.designSpace.iconCollection.get('mouse-left-click')
-    let rightClickIcon = canvas.designSpace.iconCollection.get('mouse-right-click')
-    let wheelClickIcon = canvas.designSpace.iconCollection.get('mouse-wheel-click')
-
-    let imagePosition
-    let buttonPressedIcon
-
-    switch (canvas.mouse.action) {
-      case 'moving': {
-        pointerIcon = mousePointerIcon
-        break
-      }
-      case 'dragging': {
-        pointerIcon = draggingIcon
-        break
-      }
-      case 'wheel': {
-        pointerIcon = wheelIcon
-        break
-      }
-      case 'key down': {
-        pointerIcon = mousePointerIcon
-        break
-      }
-      case 'key up': {
-        pointerIcon = mousePointerIcon
-        break
-      }
-    }
-
-    imagePosition = {
-      x: canvas.mouse.position.x,
-      y: canvas.mouse.position.y
-    }
-    drawMousePointer(pointerIcon, imagePosition, ICON_SIZES)
-
-    switch (canvas.mouse.event.buttons) {
-      case 0: {
-        buttonPressedIcon = undefined
-        break
-      }
-      case 1: {
-        buttonPressedIcon = leftClickIcon
-        break
-      }
-      case 2: {
-        buttonPressedIcon = rightClickIcon
-        break
-      }
-      case 3: {
-        buttonPressedIcon = undefined
-        break
-      }
-      case 4: {
-        buttonPressedIcon = wheelClickIcon
-        break
-      }
-    }
-
-    imagePosition = {
-      x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS,
-      y: canvas.mouse.position.y
-    }
-    drawMousePointer(buttonPressedIcon, imagePosition, ICON_SIZES)
-
-    if (canvas.mouse.event.shiftKey === true) {
-      let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
-      imagePosition = {
-        x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
-        y: canvas.mouse.position.y - DISTANCE_BETWEEN_ICONS
-      }
-      drawMousePointer(icon, imagePosition, ICON_SIZES)
-    }
-
-    if (canvas.mouse.event.ctrlKey === true || canvas.mouse.event.metaKey === true) {
-      let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
-      imagePosition = {
-        x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
-        y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS
-      }
-      drawMousePointer(icon, imagePosition, ICON_SIZES)
-    }
-
-    if (canvas.mouse.event.altKey === true) {
-      let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
-      imagePosition = {
-        x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
-        y: canvas.mouse.position.y - 0
-      }
-      drawMousePointer(icon, imagePosition, ICON_SIZES)
-    }
-
-    if (canvas.mouse.event.code === 'ArrowUp') {
-      let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
-      imagePosition = {
-        x: canvas.mouse.position.x - 0,
-        y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS
-      }
-      drawMousePointer(icon, imagePosition, ICON_SIZES)
-    }
-
-    if (canvas.mouse.event.code === 'ArrowDown') {
-      let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
-      imagePosition = {
-        x: canvas.mouse.position.x - 0,
-        y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS * 2
-      }
-      drawMousePointer(icon, imagePosition, ICON_SIZES)
-    }
-
-    if (canvas.mouse.event.code === 'ArrowLeft') {
-      let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
-      imagePosition = {
-        x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
-        y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS * 2
-      }
-      drawMousePointer(icon, imagePosition, ICON_SIZES)
-    }
-
-    if (canvas.mouse.event.code === 'ArrowRight') {
-      let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
-      imagePosition = {
-        x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS,
-        y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS * 2
-      }
-      drawMousePointer(icon, imagePosition, ICON_SIZES)
-    }
-
-    function drawMousePointer (icon, imagePosition, imageSize) {
-      if (icon !== undefined) {
-        if (icon.canDrawIcon === true) {
-          browserCanvasContext.drawImage(
-            icon, imagePosition.x,
-            imagePosition.y,
-            imageSize,
-            imageSize)
-        }
-      }
-    }
-    mediaRecorder.capture(browserCanvas)
-  }
-}
diff --git a/Spaces/DesignSpace.js b/Spaces/DesignSpace.js
index 4754fe82a..346285d0e 100644
--- a/Spaces/DesignSpace.js
+++ b/Spaces/DesignSpace.js
@@ -256,7 +256,11 @@ function newDesignSpace () {
       'mouse-left-click',
       'mouse-right-click',
       'mouse-wheel',
-      'mouse-wheel-click'
+      'mouse-wheel-click',
+      'key-alt',
+      'key-shift',
+      'key-ctrl',
+      'hand-drag'
     ]
 
     for (let i = 0; i < iconsNames.length; i++) {
diff --git a/VideoRecorder.js b/VideoRecorder.js
new file mode 100644
index 000000000..9a85e41b5
--- /dev/null
+++ b/VideoRecorder.js
@@ -0,0 +1,166 @@
+function newVideoRecorder () {
+  let thisObject = {
+    recordCanvas: recordCanvas
+  }
+  let lastAction
+  return thisObject
+
+  function recordCanvas () {
+    {
+      const DISTANCE_BETWEEN_ICONS = 60
+      const ICON_SIZES = 50
+
+      let mousePointerIcon = canvas.designSpace.iconCollection.get('mouse-pointer')
+      let wheelIcon = canvas.designSpace.iconCollection.get('mouse-wheel')
+      let draggingIcon = canvas.designSpace.iconCollection.get('hand-drag')
+      let keyDownIcon = canvas.designSpace.iconCollection.get('tron')
+
+      let leftClickIcon = canvas.designSpace.iconCollection.get('mouse-left-click')
+      let rightClickIcon = canvas.designSpace.iconCollection.get('mouse-right-click')
+      let wheelClickIcon = canvas.designSpace.iconCollection.get('mouse-wheel-click')
+
+      let imagePosition
+      let buttonPressedIcon
+
+      if (canvas.mouse.action === 'key down' && lastAction === 'dragging') {
+        canvas.mouse.action = 'dragging'
+      }
+      switch (canvas.mouse.action) {
+        case 'moving': {
+          pointerIcon = mousePointerIcon
+          break
+        }
+        case 'dragging': {
+          pointerIcon = draggingIcon
+          break
+        }
+        case 'wheel': {
+          pointerIcon = wheelIcon
+          break
+        }
+        case 'key down': {
+          pointerIcon = mousePointerIcon
+          break
+        }
+        case 'key up': {
+          pointerIcon = mousePointerIcon
+          break
+        }
+      }
+
+      lastAction = canvas.mouse.action
+
+      imagePosition = {
+        x: canvas.mouse.position.x,
+        y: canvas.mouse.position.y
+      }
+      drawMousePointer(pointerIcon, imagePosition, ICON_SIZES)
+
+      switch (canvas.mouse.event.buttons) {
+        case 0: {
+          buttonPressedIcon = undefined
+          break
+        }
+        case 1: {
+          buttonPressedIcon = leftClickIcon
+          break
+        }
+        case 2: {
+          buttonPressedIcon = rightClickIcon
+          break
+        }
+        case 3: {
+          buttonPressedIcon = undefined
+          break
+        }
+        case 4: {
+          buttonPressedIcon = wheelClickIcon
+          break
+        }
+      }
+
+      imagePosition = {
+        x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS,
+        y: canvas.mouse.position.y
+      }
+      drawMousePointer(buttonPressedIcon, imagePosition, ICON_SIZES)
+
+      if (canvas.mouse.event.shiftKey === true) {
+        let icon = canvas.designSpace.iconCollection.get('key-shift')
+        imagePosition = {
+          x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
+          y: canvas.mouse.position.y - DISTANCE_BETWEEN_ICONS
+        }
+        drawMousePointer(icon, imagePosition, ICON_SIZES)
+      }
+
+      if (canvas.mouse.event.ctrlKey === true || canvas.mouse.event.metaKey === true) {
+        let icon = canvas.designSpace.iconCollection.get('key-ctrl')
+        imagePosition = {
+          x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
+          y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS
+        }
+        drawMousePointer(icon, imagePosition, ICON_SIZES)
+      }
+
+      if (canvas.mouse.event.altKey === true) {
+        let icon = canvas.designSpace.iconCollection.get('key-alt')
+        imagePosition = {
+          x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
+          y: canvas.mouse.position.y - 0
+        }
+        drawMousePointer(icon, imagePosition, ICON_SIZES)
+      }
+
+      if (canvas.mouse.event.code === 'ArrowUp') {
+        let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
+        imagePosition = {
+          x: canvas.mouse.position.x - 0,
+          y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS
+        }
+        drawMousePointer(icon, imagePosition, ICON_SIZES)
+      }
+
+      if (canvas.mouse.event.code === 'ArrowDown') {
+        let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
+        imagePosition = {
+          x: canvas.mouse.position.x - 0,
+          y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS * 2
+        }
+        drawMousePointer(icon, imagePosition, ICON_SIZES)
+      }
+
+      if (canvas.mouse.event.code === 'ArrowLeft') {
+        let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
+        imagePosition = {
+          x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
+          y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS * 2
+        }
+        drawMousePointer(icon, imagePosition, ICON_SIZES)
+      }
+
+      if (canvas.mouse.event.code === 'ArrowRight') {
+        let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
+        imagePosition = {
+          x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS,
+          y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS * 2
+        }
+        drawMousePointer(icon, imagePosition, ICON_SIZES)
+      }
+
+      function drawMousePointer (icon, imagePosition, imageSize) {
+        if (icon !== undefined) {
+          if (icon.canDrawIcon === true) {
+            browserCanvasContext.drawImage(
+              icon, imagePosition.x,
+              imagePosition.y,
+              imageSize,
+              imageSize)
+          }
+        }
+      }
+      mediaRecorder.capture(browserCanvas)
+    }
+  }
+}
+

From c2053e91c78d0437e5c1eff6dd39cb8cd7e5bfad Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Tue, 18 Feb 2020 16:22:38 +0100
Subject: [PATCH 79/81] more icons

---
 Spaces/DesignSpace.js |  9 +++++++--
 VideoRecorder.js      | 18 ++++++++++--------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/Spaces/DesignSpace.js b/Spaces/DesignSpace.js
index 346285d0e..d1c1f7faf 100644
--- a/Spaces/DesignSpace.js
+++ b/Spaces/DesignSpace.js
@@ -255,12 +255,17 @@ function newDesignSpace () {
       'mouse-pointer',
       'mouse-left-click',
       'mouse-right-click',
-      'mouse-wheel',
+      'mouse-wheel-up',
+      'mouse-wheel-down',
       'mouse-wheel-click',
       'key-alt',
       'key-shift',
       'key-ctrl',
-      'hand-drag'
+      'hand-drag',
+      'key-down',
+      'key-left',
+      'key-right',
+      'key-up'
     ]
 
     for (let i = 0; i < iconsNames.length; i++) {
diff --git a/VideoRecorder.js b/VideoRecorder.js
index 9a85e41b5..99b9af090 100644
--- a/VideoRecorder.js
+++ b/VideoRecorder.js
@@ -11,9 +11,7 @@ function newVideoRecorder () {
       const ICON_SIZES = 50
 
       let mousePointerIcon = canvas.designSpace.iconCollection.get('mouse-pointer')
-      let wheelIcon = canvas.designSpace.iconCollection.get('mouse-wheel')
       let draggingIcon = canvas.designSpace.iconCollection.get('hand-drag')
-      let keyDownIcon = canvas.designSpace.iconCollection.get('tron')
 
       let leftClickIcon = canvas.designSpace.iconCollection.get('mouse-left-click')
       let rightClickIcon = canvas.designSpace.iconCollection.get('mouse-right-click')
@@ -35,7 +33,12 @@ function newVideoRecorder () {
           break
         }
         case 'wheel': {
-          pointerIcon = wheelIcon
+          if (canvas.mouse.event.delta > 0) {
+            pointerIcon = canvas.designSpace.iconCollection.get('mouse-wheel-up')
+          } else {
+            pointerIcon = canvas.designSpace.iconCollection.get('mouse-wheel-down')
+          }
+
           break
         }
         case 'key down': {
@@ -113,7 +116,7 @@ function newVideoRecorder () {
       }
 
       if (canvas.mouse.event.code === 'ArrowUp') {
-        let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
+        let icon = canvas.designSpace.iconCollection.get('key-up')
         imagePosition = {
           x: canvas.mouse.position.x - 0,
           y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS
@@ -122,7 +125,7 @@ function newVideoRecorder () {
       }
 
       if (canvas.mouse.event.code === 'ArrowDown') {
-        let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
+        let icon = canvas.designSpace.iconCollection.get('key-down')
         imagePosition = {
           x: canvas.mouse.position.x - 0,
           y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS * 2
@@ -131,7 +134,7 @@ function newVideoRecorder () {
       }
 
       if (canvas.mouse.event.code === 'ArrowLeft') {
-        let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
+        let icon = canvas.designSpace.iconCollection.get('key-left')
         imagePosition = {
           x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
           y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS * 2
@@ -140,7 +143,7 @@ function newVideoRecorder () {
       }
 
       if (canvas.mouse.event.code === 'ArrowRight') {
-        let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
+        let icon = canvas.designSpace.iconCollection.get('key-right')
         imagePosition = {
           x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS,
           y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS * 2
@@ -163,4 +166,3 @@ function newVideoRecorder () {
     }
   }
 }
-

From 53b039320fb0b9ac0a3a9a50ec203d73c91cf11d Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Tue, 18 Feb 2020 17:20:07 +0100
Subject: [PATCH 80/81] video recorder final

---
 VideoRecorder.js | 47 ++++++++++++++++++++++++++---------------------
 1 file changed, 26 insertions(+), 21 deletions(-)

diff --git a/VideoRecorder.js b/VideoRecorder.js
index 99b9af090..e84336c95 100644
--- a/VideoRecorder.js
+++ b/VideoRecorder.js
@@ -7,7 +7,7 @@ function newVideoRecorder () {
 
   function recordCanvas () {
     {
-      const DISTANCE_BETWEEN_ICONS = 60
+      const DISTANCE_BETWEEN_ICONS = 35
       const ICON_SIZES = 50
 
       let mousePointerIcon = canvas.designSpace.iconCollection.get('mouse-pointer')
@@ -82,71 +82,75 @@ function newVideoRecorder () {
         }
       }
 
+      let firstRow = DISTANCE_BETWEEN_ICONS * 1 + ICON_SIZES * 1
+      let secondRow = DISTANCE_BETWEEN_ICONS * 1 + ICON_SIZES * 2
+      let icon
+
       imagePosition = {
-        x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS,
+        x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS * 2,
         y: canvas.mouse.position.y
       }
       drawMousePointer(buttonPressedIcon, imagePosition, ICON_SIZES)
 
       if (canvas.mouse.event.shiftKey === true) {
-        let icon = canvas.designSpace.iconCollection.get('key-shift')
+        icon = canvas.designSpace.iconCollection.get('key-shift')
         imagePosition = {
-          x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
-          y: canvas.mouse.position.y - DISTANCE_BETWEEN_ICONS
+          x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS * 3,
+          y: canvas.mouse.position.y + firstRow
         }
         drawMousePointer(icon, imagePosition, ICON_SIZES)
       }
 
       if (canvas.mouse.event.ctrlKey === true || canvas.mouse.event.metaKey === true) {
-        let icon = canvas.designSpace.iconCollection.get('key-ctrl')
+        icon = canvas.designSpace.iconCollection.get('key-ctrl')
         imagePosition = {
-          x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
-          y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS
+          x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS * 3,
+          y: canvas.mouse.position.y + secondRow
         }
         drawMousePointer(icon, imagePosition, ICON_SIZES)
       }
 
       if (canvas.mouse.event.altKey === true) {
-        let icon = canvas.designSpace.iconCollection.get('key-alt')
+        icon = canvas.designSpace.iconCollection.get('key-alt')
         imagePosition = {
-          x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
-          y: canvas.mouse.position.y - 0
+          x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS * 3 + ICON_SIZES * 0,
+          y: canvas.mouse.position.y + secondRow
         }
         drawMousePointer(icon, imagePosition, ICON_SIZES)
       }
 
       if (canvas.mouse.event.code === 'ArrowUp') {
-        let icon = canvas.designSpace.iconCollection.get('key-up')
+        icon = canvas.designSpace.iconCollection.get('key-up')
         imagePosition = {
           x: canvas.mouse.position.x - 0,
-          y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS
+          y: canvas.mouse.position.y + firstRow
         }
         drawMousePointer(icon, imagePosition, ICON_SIZES)
       }
 
       if (canvas.mouse.event.code === 'ArrowDown') {
-        let icon = canvas.designSpace.iconCollection.get('key-down')
+        icon = canvas.designSpace.iconCollection.get('key-down')
         imagePosition = {
           x: canvas.mouse.position.x - 0,
-          y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS * 2
+          y: canvas.mouse.position.y + secondRow
         }
         drawMousePointer(icon, imagePosition, ICON_SIZES)
       }
 
       if (canvas.mouse.event.code === 'ArrowLeft') {
-        let icon = canvas.designSpace.iconCollection.get('key-left')
+        icon = canvas.designSpace.iconCollection.get('key-left')
         imagePosition = {
-          x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
-          y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS * 2
+          x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS * 0 - ICON_SIZES * 1,
+          y: canvas.mouse.position.y + secondRow
         }
         drawMousePointer(icon, imagePosition, ICON_SIZES)
       }
 
       if (canvas.mouse.event.code === 'ArrowRight') {
-        let icon = canvas.designSpace.iconCollection.get('key-right')
+        icon = canvas.designSpace.iconCollection.get('key-right')
         imagePosition = {
-          x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS,
-          y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS * 2
+          x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS * 0 + ICON_SIZES * 1,
+          y: canvas.mouse.position.y + secondRow
         }
         drawMousePointer(icon, imagePosition, ICON_SIZES)
       }
@@ -166,3 +170,4 @@ function newVideoRecorder () {
     }
   }
 }
+

From 6a76efb924c69b85e77923167f11f1cece34fb3f Mon Sep 17 00:00:00 2001
From: Luis Fernando Molina <Luis-Fernando-Molina@users.noreply.github.com>
Date: Tue, 18 Feb 2020 18:59:09 +0100
Subject: [PATCH 81/81] Possible bug fix when crash and loses timemachine
 coordinates

---
 ChartingSpace/TimeMachine.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/ChartingSpace/TimeMachine.js b/ChartingSpace/TimeMachine.js
index 948938cd1..71122a7d9 100644
--- a/ChartingSpace/TimeMachine.js
+++ b/ChartingSpace/TimeMachine.js
@@ -139,9 +139,7 @@ function newTimeMachine () {
   function initialize (callBackFunction) {
     timeFrame = INITIAL_TIME_PERIOD
     loadFrame(thisObject.payload, thisObject.container.frame)
-
-    // thisObject.container.frame.position.x = 0
-    // thisObject.container.frame.position.y = 0
+    saveFrame(thisObject.payload, thisObject.container.frame)
 
     recalculateCoordinateSystem()
     recalculateCurrentDatetime()