Viewport position being saved at payload

Canvas.js

@@ -125,7 +125,6 @@ function newCanvas () {
       animation.addCallBackFunction('Chart Space Physics', thisObject.chartSpace.physics)
       animation.addCallBackFunction('Strategy Space Physics', thisObject.designerSpace.physics)
       animation.addCallBackFunction('Panels Space Physics', thisObject.panelsSpace.physics)
-      animation.addCallBackFunction('ViewPort physics', canvas.chartSpace.viewport.physics)
 
       /* Spcaces Drawing */
       animation.addCallBackFunction('Floating Space Draw', thisObject.floatingSpace.draw)
@@ -145,8 +144,6 @@ function newCanvas () {
     try {
       browserCanvasContext = browserCanvas.getContext('2d')
       browserCanvasContext.font = 'Saira Condensed'
-
-      canvas.chartSpace.viewport.initialize()
     } catch (err) {
       if (ERROR_LOG === true) { logger.write('[ERROR] initializeBrowserCanvas -> err = ' + err.stack) }
     }
@@ -634,8 +631,10 @@ function newCanvas () {
         y: event.pageY - CURRENT_TOP_MARGIN
       }
 
-      canvas.chartSpace.viewport.mousePosition.x = point.x
-      canvas.chartSpace.viewport.mousePosition.y = point.y
+      if (canvas.chartSpace.viewport !== undefined) {
+        canvas.chartSpace.viewport.mousePosition.x = point.x
+        canvas.chartSpace.viewport.mousePosition.y = point.y
+      }
 
       if (containerDragStarted === true || floatingObjectDragStarted === true || viewPortBeingDragged === true) {
         if (floatingObjectDragStarted === true) {

ChartsSpace/ViewPort.js

@@ -433,7 +433,7 @@ function newViewport () {
   }
 
   function saveObjectState () {
-    objectStorage.position = position
+    if (thisObject.payload === undefined) { return }
     objectStorage.zoomLevel = thisObject.zoomLevel
     window.localStorage.setItem(MODULE_NAME, JSON.stringify(objectStorage))
 
@@ -443,10 +443,24 @@ function newViewport () {
   }
 
   function readObjectState () {
+    if (thisObject.payload === undefined) { return }
+    let frame = {
+      position: {
+        x: 0,
+        y: 0
+      }
+    }
+    loadFrame(thisObject.payload, frame)
+    if (!isNaN(frame.position.x)) {
+      position.x = frame.position.x
+    }
+    if (!isNaN(frame.position.y)) {
+      position.y = frame.position.y
+    }
+
     let objectStorageString = window.localStorage.getItem(MODULE_NAME)
     if (objectStorageString !== null && objectStorageString !== '') {
       objectStorage = JSON.parse(objectStorageString)
-      position = objectStorage.position
       thisObject.zoomLevel = objectStorage.zoomLevel
       thisObject.zoomTargetLevel = objectStorage.zoomLevel
       INITIAL_TIME_PERIOD = recalculatePeriod(thisObject.zoomLevel)

Spaces/ChartSpace.js

@@ -93,7 +93,14 @@ function newChartSpace () {
     }
 
     thisObject.viewport = newViewport()
+    if (thisObject.payload.node.viewport === undefined) {
+      if (ERROR_LOG === true) { logger.write('[WARN] initialize -> There must exist a Viewport node attached to the Charting System node in order for the Viewport save its properties. ') }
+    } else {
+      thisObject.viewport.payload = thisObject.payload.node.viewport.payload
+    }
+
     thisObject.viewport.initialize()
+
     canvasBrowserResizedEventSubscriptionId = canvas.eventHandler.listenToEvent('Browser Resized', resize)
   }
 
@@ -231,6 +238,10 @@ function newChartSpace () {
   }
 
   function physics () {
+    if (thisObject.viewport !== undefined) {
+      thisObject.viewport.physics()
+    }
+
     thisObjectPhysics()
     childrenPhysics()
     syncWithDesigner()
@@ -291,7 +302,9 @@ function newChartSpace () {
 
         thisObject.timeMachines.push(timeMachine)
         timeMachine.payload.uiObject.setValue('')
-        canvas.chartSpace.viewport.raiseEvents() // These events will impacts on objects just initialized.
+        if (canvas.chartSpace.viewport !== undefined) {
+          canvas.chartSpace.viewport.raiseEvents() // These events will impacts on objects just initialized.
+        }
       }
     }
   }
@@ -305,7 +318,9 @@ function newChartSpace () {
       thisObject.visible = true
     }
 
-    canvas.chartSpace.viewport.resize()
+    if (canvas.chartSpace.viewport !== undefined) {
+      canvas.chartSpace.viewport.resize()
+    }
   }
 
   function childrenPhysics () {

Spaces/CockpitSpace.js

@@ -150,7 +150,9 @@
        spacePosition: COCKPIT_SPACE_POSITION
      }
      window.localStorage.setItem(MODULE_NAME, JSON.stringify(storage))
-     canvas.chartSpace.viewport.resize()
+     if (canvas.chartSpace.viewport !== undefined) {
+       canvas.chartSpace.viewport.resize()
+     }
    }
 
    function getContainer (point) {