Background Color

DesignSpace/Workspace/Workspace.js

@@ -15,6 +15,7 @@ function newWorkspace() {
         save: saveWorkspace,
         getHierarchyHeads: getHierarchyHeads,
         getHierarchyHeadsById: getHierarchyHeadsById,
+        getHierarchyHeadsByType: getHierarchyHeadsByType,
         getNodeThatIsOnFocus: getNodeThatIsOnFocus,
         getNodeByShortcutKey: getNodeByShortcutKey,
         getNodeById: getNodeById,
@@ -404,6 +405,16 @@ function newWorkspace() {
         }
     }
 
+    function getHierarchyHeadsByType(nodeType) {
+        let hiriatchyHeads = getHierarchyHeads()
+        for (let i = 0; i < hiriatchyHeads.length; i++) {
+            let hiriatchyHead = hiriatchyHeads[i]
+            if (hiriatchyHead.type === nodeType) {
+                return hiriatchyHead
+            }
+        }
+    }
+
     function replaceWorkspaceByLoadingOne(name) {
 
         let webCommand

FloatingSpace/CircularMenuItem.js

@@ -215,6 +215,11 @@ function newCircularMenuItem() {
             }
         }
         iconPhysics()
+        backgroundColorPhysics()
+    }
+
+    function backgroundColorPhysics(){
+        defaultBackgroudColor = canvas.floatingSpace.style.backgroundColor
     }
 
     function iconPhysics() {
@@ -408,7 +413,7 @@ function newCircularMenuItem() {
                     cornerRadius: 5,
                     lineWidth: 0.1,
                     container: thisObject.container,
-                    borderColor: UI_COLOR.DARK,
+                    borderColor: backgroundColor,
                     backgroundColor: backgroundColor,
                     castShadow: false,
                     xOffset: 60

FloatingSpace/UiObject.js

@@ -1890,7 +1890,7 @@ function newUiObject() {
             browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS - 2, 0, Math.PI * 2, true)
             browserCanvasContext.closePath()
 
-            browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', 1)'
+            browserCanvasContext.fillStyle = 'rgba(' + canvas.floatingSpace.style.backgroundColor + ', 1)'
 
             browserCanvasContext.fill()
 
@@ -1906,7 +1906,7 @@ function newUiObject() {
                 browserCanvasContext.beginPath()
                 browserCanvasContext.arc(visiblePosition.x, visiblePosition.y, VISIBLE_RADIUS, 0, Math.PI * 2, true)
                 browserCanvasContext.closePath()
-                browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', 0.70)'
+                browserCanvasContext.fillStyle = 'rgba(' + canvas.floatingSpace.style.backgroundColor + ', 0.70)'
                 browserCanvasContext.fill()
                 /* Border when node is in focus */
                 if (

FloatingSpace/UiObjectTitle.js

@@ -307,8 +307,8 @@ function newUiObjectTitle() {
                 cornerRadius: 3,
                 lineWidth: 0.1,
                 container: thisObject.container,
-                borderColor: UI_COLOR.BLACK,
-                backgroundColor: UI_COLOR.BLACK,
+                borderColor: canvas.floatingSpace.style.backgroundColor,
+                backgroundColor: canvas.floatingSpace.style.backgroundColor,
                 castShadow: false,
                 opacity: 0.25
             }

Spaces/FloatingSpace.js

@@ -14,6 +14,7 @@ function newFloatingSpace() {
         inMapMode: false,
         drawReferenceLines: false,
         drawChainLines: true,
+        style: undefined, 
         toggleDrawChainLines: toggleDrawChainLines,
         toggleDrawReferenceLines: toggleDrawReferenceLines,
         toggleMapMode: toggleMapMode,
@@ -62,6 +63,11 @@ function newFloatingSpace() {
     const PERCENTAGE_OF_SCREEN_FOR_DISPLACEMENT = 25
     let onDragStartedEventSubscriptionId
     let spaceFocusAquiredEventSubscriptionId
+    
+    /* Default Style */
+    thisObject.style = {
+        backgroundColor: UI_COLOR.BLACK
+    }
 
     return thisObject
 
@@ -385,11 +391,22 @@ function newFloatingSpace() {
 
     function physics() {
         if (visible === false) { return }
+        syncStylePhysics()
         browserZoomPhysics()
         positionContraintsPhysics()
         thisObject.floatingLayer.physics()
     }
 
+    function syncStylePhysics(){
+        if (canvas.designSpace === undefined) {return}
+        if (canvas.designSpace.workspace === undefined) {return}
+        let designSpaceNode = canvas.designSpace.workspace.getHierarchyHeadsByType('Design Space')
+        if (designSpaceNode.spaceStyle !== undefined) {
+            configStyle = JSON.parse(designSpaceNode.spaceStyle.config)
+            thisObject.style.backgroundColor = eval(configStyle.backgroundColor)
+        }
+    }
+
     function positionContraintsPhysics() {
         if (thisObject.container.frame.position.x > 0) {
             thisObject.container.frame.position.x = 0
@@ -425,7 +442,7 @@ function newFloatingSpace() {
         browserCanvasContext.beginPath()
 
         browserCanvasContext.rect(thisObject.container.frame.position.x, thisObject.container.frame.position.y, thisObject.container.frame.width, thisObject.container.frame.height)
-        browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.BLACK + ', 1)'
+        browserCanvasContext.fillStyle = 'rgba(' + thisObject.style.backgroundColor + ', 1)'
 
         browserCanvasContext.closePath()
         browserCanvasContext.fill()