ui-layout-manager-dev 0.0.35-dev → 0.0.36-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-layout-manager-dev",
-  "version": "0.0.35-dev",
+  "version": "0.0.36-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,11 +75,12 @@ 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.");
-            this.sendToWorker(LAYOUT_WORKER_PROTOCOL.INITIALIZE_FLEXBOX);
+            // console.log("All containers registered, layout is ready.");
+            this.sendToWorker(LAYOUT_WORKER_PROTOCOL.INITIALIZE_FLEXBOX, 
+            { sizes: this.getContainerSizes() });
         }
     }
     
@@ -91,26 +92,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() }
         );    
     }
 
@@ -170,14 +180,10 @@ export class LayoutController {
                 }
             };
             if (isInitial) {
-                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();
+                console.log("Layout is ready, hiding loading screen.");
             }
         });
     };

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

@@ -17,9 +17,12 @@ 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]);        
+    initializeFlexBox(sizes) {
+        this.initializeNode(this.ldf.containers[this.ldf.layoutRoot]);   
+        this.sizes = sizes; 
+        this.applyLayoutToNode(this.ldf.layoutRoot);           
         postMessage({
             type: LAYOUT_WORKER_PROTOCOL.INITIALIZE_FLEXBOX,
             data: this.transformations

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

@@ -17,7 +17,7 @@ self.onmessage = function (e) {
                 editor = new LayoutEditor(args.ldf);
                 break;
             case LAYOUT_WORKER_PROTOCOL.INITIALIZE_FLEXBOX:
-                editor.initializeFlexBox();
+                editor.initializeFlexBox(args.sizes);
                 break;
             case LAYOUT_WORKER_PROTOCOL.APPLY_SIZES:
                 editor.applySizes(args.sizes);