ui-layout-manager-dev 0.0.35-dev → 0.0.37-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-layout-manager-dev",
-  "version": "0.0.35-dev",
+  "version": "0.0.37-dev",
   "description": "A react component to manage layout and themes in single page applications.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/LayoutManager/Controller/LayoutController.js

@@ -75,10 +75,10 @@ export class LayoutController {
         this.containers[id] = containerApi;
         this.containerRefs[id] = containerRef;
 
-        console.log(`Registered container with id: ${id} `);
+        // console.log(`Registered container with id: ${id} `);
 
         if (this.registeredContainers === this.numberOfContainers && !this.layoutLoaded) {
-            console.log("All containers registered, layout is ready.");
+            // console.log("All containers registered, layout is ready.");
             this.sendToWorker(LAYOUT_WORKER_PROTOCOL.INITIALIZE_FLEXBOX);
         }
     }
@@ -91,26 +91,35 @@ export class LayoutController {
         delete this.containers[id];
     }
 
+
     /**
-     * This function is called when the root container is resized.
-     * It will notify the worker to process the layout changes.
+     * Retuns the sizes of the containers.
+     * @return {Object} Size of containers.
      */
-    handleRootResize() { 
-        if (!this.layoutLoaded) return;
-        // console.log("Root container resized to:", width, height);
-        const sizes = {};
+    getContainerSizes() {
+        const containerSizes = {};
         for (const id in this.containerRefs) {
             if (this.containerRefs.hasOwnProperty(id)) {
                 const boundingRect = this.containerRefs[id].getBoundingClientRect();
-                sizes[id] = {
+                containerSizes[id] = {
                     width: boundingRect.width, 
                     height: boundingRect.height
                 };
             }
         }        
+        return containerSizes;
+    }
+
+    /**
+     * This function is called when the root container is resized.
+     * It will notify the worker to process the layout changes.
+     */
+    handleRootResize() { 
+        if (!this.layoutLoaded) return;
+        // console.log("Root container resized to:", width, height);
         this.sendToWorker(
             LAYOUT_WORKER_PROTOCOL.APPLY_SIZES, 
-            { sizes: sizes }
+            { sizes: this.getContainerSizes() }
         );    
     }
 
@@ -169,15 +178,16 @@ export class LayoutController {
                         break;
                 }
             };
+            if (this.layoutLoaded && !isInitial) {
+                this.containers[this.ldf.layoutRoot].current.hideLoadingScreen();
+                console.log("Layout is ready, hiding loading screen.");
+            }
             if (isInitial) {
+                // After the initial style has been applied, we request the worker
+                // to apply layout before we hide the loading screen so containers
+                // are set to correct initial state.
                 this.layoutLoaded = true;
-                // Call root resize to apply the layout rules after initial transformations
-                // are applied, this applies the layout rules to hide the containers.
                 this.handleRootResize();
-            } else {
-                // After the initial transformations have been applied, we can hide
-                // the loading screen for the root container.
-                this.containers[this.ldf.layoutRoot].current.hideLoadingScreen();
             }
         });
     };

package/src/components/LayoutManager/Controller/Worker/LayoutEditor.js

@@ -17,9 +17,10 @@ export class LayoutEditor {
 
     /**
      * Initializes flexbox layout by processing LDF file.
+     * @param {Object} sizes Initial sizes of the containers.
      */
     initializeFlexBox() {
-        this.initializeNode(this.ldf.containers[this.ldf.layoutRoot]);        
+        this.initializeNode(this.ldf.containers[this.ldf.layoutRoot]);  
         postMessage({
             type: LAYOUT_WORKER_PROTOCOL.INITIALIZE_FLEXBOX,
             data: this.transformations