fixed anchor and side for flex layout

src/canvas/canvas.js

@@ -1259,30 +1259,37 @@ class Canvas extends React.Component {
     }
 
     updateWidgetAndChildren = (widgetId) => {
-         const serializeWidgetRecursively = (widget) => {
-        const widgetObj = this.getWidgetById(widget.id)?.current;
-        if (!widgetObj) return widget; // If no widget reference found, return unchanged
-
-        return {
-            ...widget,
-            initialData: {
-                ...widget.initialData,
-                ...widgetObj.serialize()
-            },
-            children: widget.children?.map(serializeWidgetRecursively) || [] // Recursively serialize children
+        const serializeWidgetRecursively = (widget) => {
+            const widgetObj = this.getWidgetById(widget.id)?.current;
+            if (!widgetObj) return widget; // If no widget reference found, return unchanged
+            return {
+                ...widget,
+                initialData: {
+                    ...widget.initialData,
+                    ...widgetObj.serialize()
+                },
+                children: widget.children?.map(serializeWidgetRecursively) || [] // Recursively serialize children
+            };
         };
-    };
+
 
         this.setWidgets(prevWidgets => {
             const updateWidgets = (widgets) => {
-                return widgets.map(widget => 
-                    widget.id === widgetId ? serializeWidgetRecursively(widget) : widget
-                );
-            };
+                return widgets.map(widget => {
+                    if (widget.id === widgetId) {
+                        return serializeWidgetRecursively(widget)
+                    }
+                    // Search inside children recursively
+                    return {
+                        ...widget,
+                        children: updateWidgets(widget.children || [])
+                    }
+                })
+            }
 
-            return updateWidgets(prevWidgets);
-        });
-    };
+            return updateWidgets(prevWidgets)
+        })
+    }
     
 
     renderWidget = (widget) => {

src/canvas/widgets/base.js

@@ -136,7 +136,7 @@ class Widget extends React.Component {
                     label: "Layout",
                     tool: Tools.LAYOUT_MANAGER, // the tool to display, can be either HTML ELement or a constant string
                     value: {
-                        layout: "flex",
+                        layout: Layouts.PLACE,
                         direction: "row",
                         // grid: {
                         //     rows: 12,
@@ -243,6 +243,7 @@ class Widget extends React.Component {
     }
 
     componentDidUpdate(prevProps, prevState) {
+        
         if (prevProps !== this.props) {
             this.canvasMetaData = this.props.canvasMetaData
         }
@@ -704,7 +705,7 @@ class Widget extends React.Component {
 
     getLayout(){
 
-        return this.state?.attrs?.layout?.value || Layouts.FLEX
+        return this.getAttrValue("layout") || Layouts.PLACE
     }
 
     setLayout(value) {
@@ -734,13 +735,13 @@ class Widget extends React.Component {
         //     widgetStyle["placeContent"] = "unset"
         // }
 
-        this.updateState({
-            widgetInnerStyling: widgetStyle
+        this.setAttrValue("layout", value, () => {
+            this.updateState({
+                widgetInnerStyling: widgetStyle
+            })
+            this.props.onLayoutUpdate({parentId: this.__id, parentLayout: value})// inform children about the layout update
         })
 
-        this.setAttrValue("layout", value)
-        this.props.onLayoutUpdate({parentId: this.__id, parentLayout: value})// inform children about the layout update
-
     }
 
     getWidgetInnerStyle = (key) => {