Saving and Loading Frame position

ChartsSpace/TimeMachine.js

@@ -132,6 +132,8 @@ function newTimeMachine () {
 
   function initialize (callBackFunction) {
     timeFrame = INITIAL_TIME_PERIOD
+    loadFrame(thisObject.payload, thisObject.container.frame)
+
     recalculateCoordinateSystem()
 
     onMouseOverEventSuscriptionId = thisObject.container.eventHandler.listenToEvent('onMouseOver', onMouseOver)
@@ -180,7 +182,7 @@ function newTimeMachine () {
     timeScaleEventSuscriptionId = thisObject.timeScale.container.eventHandler.listenToEvent('Lenght Percentage Changed', function (event) {
       thisObject.container.frame.width = TIME_MACHINE_WIDTH * event.value / 100
       recalculateCoordinateSystem()
-      moveToUserPosition(thisObject.container, timeMachineCoordinateSystem, false, true, event.mousePosition, false, true)
+      // moveToUserPosition(thisObject.container, timeMachineCoordinateSystem, false, true, event.mousePosition, false, true)
       thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
     })
 
@@ -201,7 +203,7 @@ function newTimeMachine () {
     rateScaleEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) {
       thisObject.container.frame.height = TIME_MACHINE_HEIGHT * event.value / 100
       recalculateCoordinateSystem()
-      moveToUserPosition(thisObject.container, timeMachineCoordinateSystem, true, false, event.mousePosition, false, true)
+      // moveToUserPosition(thisObject.container, timeMachineCoordinateSystem, true, false, event.mousePosition, false, true)
       thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
     })
 
@@ -328,6 +330,7 @@ function newTimeMachine () {
     thisObjectPhysics()
     childrenPhysics()
     syncWithDesigner()
+    saveFrame(thisObject.payload, thisObject.container.frame)
   }
 
   function syncWithDesigner () {

ChartsSpace/TimelineChart.js

@@ -168,7 +168,7 @@ function newTimelineChart () {
     rateScaleEventSuscriptionId = thisObject.rateScale.container.eventHandler.listenToEvent('Height Percentage Changed', function (event) {
       thisObject.container.frame.height = TIME_MACHINE_HEIGHT * event.value / 100
       recalculateCoordinateSystem()
-      moveToUserPosition(thisObject.container, timelineChartCoordinateSystem, true, false, event.mousePosition, false, true)
+      // moveToUserPosition(thisObject.container, timelineChartCoordinateSystem, true, false, event.mousePosition, false, true)
       thisObject.container.eventHandler.raiseEvent('Dimmensions Changed', event)
     })
 

CockpitSpace/Speedometer.js

@@ -52,7 +52,7 @@ function newSpeedometer () {
 
   function drawAssetCircle () {
     const RED_LINE_HIGHT = 5
-    const RADIOUS = 50
+    const RADIUS = 50
     const OPACITY = 1
 
     let centerPoint = {
@@ -61,14 +61,14 @@ function newSpeedometer () {
     }
 
     browserCanvasContext.beginPath()
-    browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIOUS + RED_LINE_HIGHT, 0.85 * Math.PI, 2.15 * Math.PI)
+    browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIUS + RED_LINE_HIGHT, 0.85 * Math.PI, 2.15 * Math.PI)
     browserCanvasContext.closePath()
 
     browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.RUSTED_RED + ', ' + OPACITY + ')'
     browserCanvasContext.fill()
 
     browserCanvasContext.beginPath()
-    browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIOUS, 0.0 * Math.PI, 2.0 * Math.PI)
+    browserCanvasContext.arc(centerPoint.x, centerPoint.y, RADIUS, 0.0 * Math.PI, 2.0 * Math.PI)
     browserCanvasContext.closePath()
 
     browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK_TURQUOISE + ', ' + OPACITY + ')'
@@ -79,7 +79,7 @@ function newSpeedometer () {
     const DEFAULT_THICKNESS = 2
     const VALUE_THICKNESS = 8
     const VALUE_BG_THICKNESS = 1
-    const BAR_RADIOUS = RADIOUS * 0.85
+    const BAR_RADIUS = RADIUS * 0.85
 
     let BAR_START_ANGLE = 0.85 * Math.PI
     let BAR_END_ANGLE = 2.15 * Math.PI
@@ -100,7 +100,7 @@ function newSpeedometer () {
       browserCanvasContext.setLineDash([0, 0])
 
       browserCanvasContext.beginPath()
-      browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIOUS, BAR_START_ANGLE, MIN_VALUE_ANGLE)
+      browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIUS, BAR_START_ANGLE, MIN_VALUE_ANGLE)
 
       browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')'
       browserCanvasContext.lineWidth = VALUE_BG_THICKNESS
@@ -108,7 +108,7 @@ function newSpeedometer () {
       browserCanvasContext.closePath()
 
       browserCanvasContext.beginPath()
-      browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIOUS, MIN_VALUE_ANGLE, CURRENT_VALUE_ANGLE)
+      browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIUS, MIN_VALUE_ANGLE, CURRENT_VALUE_ANGLE)
 
       browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')'
       browserCanvasContext.lineWidth = VALUE_BG_THICKNESS
@@ -116,7 +116,7 @@ function newSpeedometer () {
       browserCanvasContext.closePath()
 
       browserCanvasContext.beginPath()
-      browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIOUS, CURRENT_VALUE_ANGLE, INIT_VALUE_ANGLE)
+      browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIUS, CURRENT_VALUE_ANGLE, INIT_VALUE_ANGLE)
 
       browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RED + ', ' + OPACITY + ')'
       browserCanvasContext.lineWidth = VALUE_BG_THICKNESS
@@ -125,7 +125,7 @@ function newSpeedometer () {
 
       if (PROFIT_VALUE_ANGLE > INIT_VALUE_ANGLE) {
         browserCanvasContext.beginPath()
-        browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIOUS, INIT_VALUE_ANGLE, PROFIT_VALUE_ANGLE)
+        browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIUS, INIT_VALUE_ANGLE, PROFIT_VALUE_ANGLE)
 
         browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREEN + ', ' + OPACITY + ')'
         browserCanvasContext.lineWidth = VALUE_BG_THICKNESS
@@ -136,7 +136,7 @@ function newSpeedometer () {
       browserCanvasContext.setLineDash([2, 3])
 
       browserCanvasContext.beginPath()
-      browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIOUS, BAR_START_ANGLE, MIN_VALUE_ANGLE)
+      browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIUS, BAR_START_ANGLE, MIN_VALUE_ANGLE)
 
       browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.TITANIUM_YELLOW + ', ' + OPACITY + ')'
       browserCanvasContext.lineWidth = VALUE_THICKNESS
@@ -144,7 +144,7 @@ function newSpeedometer () {
       browserCanvasContext.closePath()
 
       browserCanvasContext.beginPath()
-      browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIOUS, MIN_VALUE_ANGLE, CURRENT_VALUE_ANGLE)
+      browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIUS, MIN_VALUE_ANGLE, CURRENT_VALUE_ANGLE)
 
       browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + OPACITY + ')'
       browserCanvasContext.lineWidth = VALUE_THICKNESS
@@ -152,7 +152,7 @@ function newSpeedometer () {
       browserCanvasContext.closePath()
 
       browserCanvasContext.beginPath()
-      browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIOUS, CURRENT_VALUE_ANGLE, INIT_VALUE_ANGLE)
+      browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIUS, CURRENT_VALUE_ANGLE, INIT_VALUE_ANGLE)
 
       browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.RED + ', ' + OPACITY + ')'
       browserCanvasContext.lineWidth = VALUE_THICKNESS
@@ -161,7 +161,7 @@ function newSpeedometer () {
 
       if (PROFIT_VALUE_ANGLE > INIT_VALUE_ANGLE) {
         browserCanvasContext.beginPath()
-        browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIOUS, INIT_VALUE_ANGLE, PROFIT_VALUE_ANGLE)
+        browserCanvasContext.arc(centerPoint.x, centerPoint.y, BAR_RADIUS, INIT_VALUE_ANGLE, PROFIT_VALUE_ANGLE)
 
         browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREEN + ', ' + OPACITY + ')'
         browserCanvasContext.lineWidth = VALUE_THICKNESS

DesignerSpace/Workspace/FunctionLibraries/ProtocolNode.js

@@ -157,6 +157,18 @@ function newProtocolNode () {
       }
     }
 
+    if (node.payload.frame !== undefined) {
+      savedPayload.frame = {
+        position: {
+          x: node.payload.frame.position.x,
+          y: node.payload.frame.position.y
+        },
+        width: node.payload.frame.width,
+        height: node.payload.frame.height,
+        radius: node.payload.frame.radius
+      }
+    }
+
     if (includeReferencesInSavedPayload) {
       /* Next for the ones that have a reference parent, we include it */
       if (node.payload.referenceParent !== undefined) {

FloatingSpace/CircularMenuItem.js

@@ -144,28 +144,28 @@ function newCircularMenuItem () {
       }
     }
 
-    let radiousGrowthFactor
+    let radiusGrowthFactor
     if (thisObject.type === 'Icon Only') {
       switch (thisObject.ring) {
         case 1: {
-          radiousGrowthFactor = 5
+          radiusGrowthFactor = 5
           break
         }
         case 2: {
-          radiousGrowthFactor = 3.5
+          radiusGrowthFactor = 3.5
           break
         }
         case 3: {
-          radiousGrowthFactor = 2
+          radiusGrowthFactor = 2
           break
         }
       }
     } else {
-      radiousGrowthFactor = 4
+      radiusGrowthFactor = 4
     }
 
-    thisObject.container.frame.position.x = thisObject.container.frame.radius * radiousGrowthFactor / 7 * Math.cos(toRadians(thisObject.angle)) - thisObject.currentRadius * 1.5
-    thisObject.container.frame.position.y = thisObject.container.frame.radius * radiousGrowthFactor / 7 * Math.sin(toRadians(thisObject.angle)) - thisObject.container.frame.height / 2
+    thisObject.container.frame.position.x = thisObject.container.frame.radius * radiusGrowthFactor / 7 * Math.cos(toRadians(thisObject.angle)) - thisObject.currentRadius * 1.5
+    thisObject.container.frame.position.y = thisObject.container.frame.radius * radiusGrowthFactor / 7 * Math.sin(toRadians(thisObject.angle)) - thisObject.container.frame.height / 2
 
     /* Temporary Status impacts on the label to use and the background of that label */
     if (temporaryStatusCounter > 0) {

Utilities.js

@@ -1,3 +1,29 @@
+
+function saveFrame (payload, frame) {
+  payload.frame = {
+    position: {
+      x: frame.position.x,
+      y: frame.position.y
+    },
+    width: frame.width,
+    height: frame.height,
+    radius: frame.radius
+  }
+}
+
+function loadFrame (payload, frame) {
+  if (payload.node.savedPayload !== undefined) {
+    if (payload.node.savedPayload.frame !== undefined) {
+      frame.position.x = payload.node.savedPayload.frame.position.x
+      frame.position.y = payload.node.savedPayload.frame.position.y
+      frame.width = payload.node.savedPayload.frame.width
+      frame.height = payload.node.savedPayload.frame.height
+      frame.radius = payload.node.savedPayload.frame.radius
+    }
+  }
+  payload.node.savedPayload.frame = undefined
+}
+
 function convertTimeFrameToName (pTimeFrame) {
   for (let i = 0; i < dailyFilePeriods.length; i++) {
     let period = dailyFilePeriods[i]