Centering strategy parts

ControlsToolBox/SidePanel.js

@@ -9,9 +9,6 @@ function newSidePanel () {
     initialize: initialize
   }
 
-  const SIDE_PANEL_WIDTH = 450
-  const SIDE_PANEL_TAB_WIDTH = 400
-
   let isInitialized = false
 
   thisObject.container = newContainer()

Globals.js

@@ -162,7 +162,8 @@ const MAX_PLOTABLE_DATE = maxDate;
 const TOP_SPACE_HEIGHT = 5;
 const BOTTOM_SPACE_HEIGHT = 35;
 const BREAKPOINT_HEIGHT = 15;
-
+const SIDE_PANEL_WIDTH = 450
+  
 const PRODUCT_CARD_STATUS = {
     ON: 'on',
     LOADING: 'loading',

StrategySpace/StrategyCollectionItem.js

@@ -20,7 +20,7 @@ function newStrategyCollectionItem () {
   return thisObject
 
   function initialize () {
-    const ITEM_WIDTH = 430
+    const ITEM_WIDTH = SIDE_PANEL_WIDTH - 20
     const ITEM_HEIGHT = 80
 
     thisObject.container.frame.width = ITEM_WIDTH
@@ -41,8 +41,8 @@ function newStrategyCollectionItem () {
     let payload = {
       profile: {
         position: {
-          x: 500,
-          y: 500
+          x: (viewPort.width - SIDE_PANEL_WIDTH) / 2 + SIDE_PANEL_WIDTH,
+          y: viewPort.height / 2
         },
         visible: true
       },

ViewPort.js

@@ -23,6 +23,8 @@ function newViewPort () {
 
   let thisObject = {
     visibleArea: undefined,
+    width: undefined,
+    height: undefined,
     eventHandler: undefined,
     zoomTargetLevel: undefined,
     zoomLevel: undefined,
@@ -81,6 +83,9 @@ function newViewPort () {
       bottomLeft: { x: LEFT_MARGIN, y: browserCanvas.height - BOTTOM_MARGIN}
     }
 
+    thisObject.width = thisObject.visibleArea.topRight.x - thisObject.visibleArea.topLeft.x
+    thisObject.height = thisObject.visibleArea.bottomRight.y - thisObject.visibleArea.topLeft.y
+
     readObjectState()
   }