From 5f2d80755e479615f6e052e1c56ff51c48c9a0b6 Mon Sep 17 00:00:00 2001
From: paul <paul.sajo.official@gmail.com>
Date: Sun, 16 Mar 2025 10:01:35 +0530
Subject: [PATCH] fix: fixed uncontrolled state updates

---
 src/canvas/canvas.js                         |  33 ++-
 src/canvas/toolbar.js                        |   4 +-
 src/canvas/widgets/base.js                   | 141 ++++++----
 src/components/header.js                     |   2 +-
 src/frameworks/tkinter/widgets/base.js       | 260 ++++++++++++++-----
 src/frameworks/tkinter/widgets/mainWindow.js |  11 +-
 6 files changed, 324 insertions(+), 127 deletions(-)

diff --git a/src/canvas/canvas.js b/src/canvas/canvas.js
index 504bf2f..db12b58 100644
--- a/src/canvas/canvas.js
+++ b/src/canvas/canvas.js
@@ -244,6 +244,15 @@ class Canvas extends React.Component {
 
     }
 
+    openToolbar = (widget) => {
+        this.setState({
+            // selectedWidget: selectedWidget,
+            toolbarAttrs: widget.getToolbarAttrs(),
+            toolbarOpen: true
+        })
+
+    }
+
     mouseDownEvent(event) {
 
         this.mousePos = { x: event.clientX, y: event.clientY }
@@ -263,11 +272,12 @@ class Canvas extends React.Component {
                     selectedWidget.setZIndex(1000)
                     selectedWidget.select()
                     // console.log("selected widget", selectedWidget.getToolbarAttrs(), selectedWidget, this.state.selectedWidget)
-                    this.setState({
-                        // selectedWidget: selectedWidget,
-                        toolbarAttrs: selectedWidget.getToolbarAttrs(),
-                        toolbarOpen: true
-                    })
+                    // this.setState({
+                    //     // selectedWidget: selectedWidget,
+                    //     toolbarAttrs: selectedWidget.getToolbarAttrs(),
+                    //     toolbarOpen: true
+                    // })
+                    // this.openToolbar(selectedWidget)
 
                     this.setSelectedWidget(selectedWidget)
 
@@ -1216,6 +1226,17 @@ class Canvas extends React.Component {
             })
         }
 
+        const handleWidgetSelect = (widgetId) => {
+            
+            if (this.selectedWidget && this.selectedWidget.getId() !== widgetId){
+                this.selectedWidget?.deSelect() // deselect the previous widget before adding the new one
+            }
+
+            const widget = this.getWidgetById(widgetId)?.current
+            this.setSelectedWidget(widget)
+            this.openToolbar(widget)
+        }
+
         return (
 
             <ComponentType
@@ -1231,7 +1252,7 @@ class Canvas extends React.Component {
                     pan: this.state.currentTranslate
                 }}
 
-                onSelect={(widgetId) => this.setSelectedWidget(this.getWidgetById(widgetId)?.current)}
+                onSelect={handleWidgetSelect}
                 
                 onWidgetDeleteRequest={this.removeWidget}
 
diff --git a/src/canvas/toolbar.js b/src/canvas/toolbar.js
index 055b6d7..a5c6c30 100644
--- a/src/canvas/toolbar.js
+++ b/src/canvas/toolbar.js
@@ -165,7 +165,7 @@ const CanvasToolBar = memo(({ isOpen, widgetType, attrs = {} }) => {
                         onChange={(value) => handleChange({ ...val.value, direction: value }, val.onChange)}
                     />
                 </div>
-                <div className="tw-flex tw-flex-col tw-gap-1">
+                {/* <div className="tw-flex tw-flex-col tw-gap-1">
                     <span className="tw-text-sm">Align items</span>
                     <Select
                         options={[
@@ -178,7 +178,7 @@ const CanvasToolBar = memo(({ isOpen, widgetType, attrs = {} }) => {
                         placeholder={`${val.label}`}
                         onChange={(value) => handleChange({ ...val.value, align: value }, val.onChange)}
                     />
-                </div>
+                </div> */}
                 <div className="tw-flex tw-flex-col">
                     <span className="tw-text-sm">Gap</span>
                     <InputNumber
diff --git a/src/canvas/widgets/base.js b/src/canvas/widgets/base.js
index 09e4831..caa680d 100644
--- a/src/canvas/widgets/base.js
+++ b/src/canvas/widgets/base.js
@@ -104,10 +104,10 @@ class Widget extends React.Component {
             widgetInnerStyling: {
                 // use for widget's inner styling
                 backgroundColor: "#fff",
-                display: "flex",
-                flexDirection: "row",
+                // display: "flex",
+                // flexDirection: "row",
                 gap: 10,
-                flexWrap: "wrap"
+                // flexWrap: "wrap" // NOTE: this has been uncommented
             },
 
             attrs: {
@@ -115,7 +115,7 @@ class Widget extends React.Component {
                     backgroundColor: {
                         label: "Background Color",
                         tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string
-                        value: "#fff",
+                        value: "#E4E2E2",
                         onChange: (value) => {
                             this.setWidgetInnerStyle("backgroundColor", value)
                             this.setAttrValue("styling.backgroundColor", value)
@@ -206,10 +206,13 @@ class Widget extends React.Component {
 
     componentDidMount() {
 
-        if (this.state.attrs.layout){
-            this.setLayout(this.state.attrs.layout.value)
-            // console.log("prior layout: ", this.state.attrs.layout.value)
-        }
+        console.log("state layout: ")
+        this.setLayout({layout: Layouts.FLEX, gap: 10})
+
+        // if (this.state.attrs.layout){
+        //     this.setLayout(this.state.attrs.layout.value)
+        //     // console.log("prior layout: ", this.state.attrs.layout.value)
+        // }
         
         if (this.state.attrs.styling.backgroundColor)
             this.setWidgetInnerStyle('backgroundColor', this.state.attrs.styling?.backgroundColor.value || "#fff")
@@ -223,16 +226,19 @@ class Widget extends React.Component {
         }
     }
 
-    componentWillUnmount() {
-    }
-
-
 
+    /**
+     * This function will notify the canvas of the updates to the widgets
+     * 
+     * @param {} newState  - this can either be a callback or a new State like (prevState) => ({key: value})
+     * @param {*} callback - callback to run after setState
+     */
     updateState = (newState, callback) => {
 
+        console.log("updatstate called: ", newState, this.state.attrs)
         // FIXME: maximum recursion error when updating size, color etc
         this.setState(newState, () => {
-
+            console.log("updatinhg./..: ", this.state)
             const { onWidgetUpdate } = this.props
             if (onWidgetUpdate) {
                 onWidgetUpdate(this.__id)
@@ -311,6 +317,10 @@ class Widget extends React.Component {
         })
     }
 
+    forceRerender = () => {
+        this.forceUpdate(() => console.log("forced"))
+    }
+
     // TODO: add context menu items such as delete, add etc
     contextMenu() {
 
@@ -478,22 +488,32 @@ class Widget extends React.Component {
      * @param {any} value 
      */
     setAttrValue(path, value) {
-        const keys = path.split('.')
-        const lastKey = keys.pop()
 
-        
-        // Traverse the state and update the nested value immutably
-        let newAttrs = { ...this.state.attrs }
-        let nestedObject = newAttrs
-        
-        keys.forEach(key => {
-            nestedObject[key] = { ...nestedObject[key] } // Ensure immutability
-            nestedObject = nestedObject[key]
+        this.setState((prevState) => { // since the  setState is Async only the prevState contains the latest state
+
+            const keys = path.split('.')
+            const lastKey = keys.pop()
+
+            // Traverse the state and update the nested value immutably
+            let newAttrs = { ...prevState.attrs }
+            let nestedObject = newAttrs
+            
+            keys.forEach(key => {
+                nestedObject[key] = { ...nestedObject[key] } // Ensure immutability
+                nestedObject = nestedObject[key]
+            })
+            
+            if (nestedObject[lastKey]) {
+                nestedObject[lastKey] = { ...nestedObject[lastKey], value }
+            } else {
+                nestedObject[lastKey] = { value }
+            }
+            
+            return { attrs: newAttrs }
+
+        }, () => {
+            console.log("new data updated: ", this.state.attrs)
         })
-        
-        nestedObject[lastKey].value = value
-
-        this.updateState({ attrs: newAttrs })
     }
 
     /**
@@ -506,7 +526,6 @@ class Widget extends React.Component {
 
         // Traverse the state and get the nested value
         let nestedObject = this.state.attrs
-
         for (const key of keys) {
             if (nestedObject[key] !== undefined) {
                 nestedObject = nestedObject[key]
@@ -514,7 +533,7 @@ class Widget extends React.Component {
                 return undefined  // Return undefined if the key doesn't exist
             }
         }
-
+        console.log("found value: ", nestedObject, path)
         return nestedObject?.value  // Return the value (assuming it has a 'value' field)
     }
 
@@ -612,7 +631,7 @@ class Widget extends React.Component {
             }
         }
 
-        this.setState(updates)
+        this.setState((prevState) => ({...prevState, ...updates}))
 
         return updates
     }
@@ -636,22 +655,22 @@ class Widget extends React.Component {
             display: layout !== Layouts.PLACE ? layout : "block",
             flexDirection: direction,
             gap: `${gap}px`,
-            flexWrap: "wrap",
+            // flexWrap: "wrap",
             gridTemplateColumns: "repeat(auto-fill, minmax(100px, 1fr))",
             gridTemplateRows: "repeat(auto-fill, minmax(100px, 1fr))",  
             // gridAutoRows: 'minmax(100px, auto)',  // Rows with minimum height of 100px, and grow to fit content
             // gridAutoCols: 'minmax(100px, auto)',  // Cols with minimum height of 100px, and grow to fit content
         }
 
-        if (align === "start"){
-            widgetStyle["placeContent"] = "flex-start"
-        }else if (align === "center"){
-            widgetStyle["placeContent"] = "center"
-        }else if (align === "end"){
-            widgetStyle["placeContent"] = "flex-end"
-        }else{
-            widgetStyle["placeContent"] = "unset"
-        }
+        // if (align === "start"){
+        //     widgetStyle["placeContent"] = "flex-start"
+        // }else if (align === "center"){
+        //     widgetStyle["placeContent"] = "center"
+        // }else if (align === "end"){
+        //     widgetStyle["placeContent"] = "flex-end"
+        // }else{
+        //     widgetStyle["placeContent"] = "unset"
+        // }
 
         this.updateState({
             widgetInnerStyling: widgetStyle
@@ -676,14 +695,17 @@ class Widget extends React.Component {
      * @param {string} value - Value of the style
      */
     setWidgetOuterStyle(key, value){
-        const widgetStyle = {
-            ...this.state.widgetOuterStyling,
-            [key]: value
-        }
+        // const widgetStyle = {
+        //     ...this.state.widgetOuterStyling,
+        //     [key]: value
+        // }
 
-        this.setState({
-            widgetOuterStyling: widgetStyle
-        })
+        this.setState((prevState) => ({
+            widgetOuterStyling: {
+                ...prevState.widgetOuterStyling,
+                [key]: value
+            }
+        }))
 
     }
 
@@ -693,15 +715,20 @@ class Widget extends React.Component {
      * @param {string} value - Value of the style
      */
     setWidgetInnerStyle(key, value) {
-        
+
+        // FIXME: this one clashing with other setWidgetInner style
+
         const widgetStyle = {
             ...this.state.widgetInnerStyling,
             [key]: value
         }
 
-        this.setState({
-            widgetInnerStyling: widgetStyle
-        })
+        this.setState((prevState) => ({
+            widgetInnerStyling: {
+                ...prevState.widgetInnerStyling,
+                [key]: value
+            }
+        }))
 
     }
 
@@ -1136,6 +1163,7 @@ class Widget extends React.Component {
         let fitHeight = this.state.fitContent.height
         
         if (fitWidth){
+            // width = "max-content"
             width = "max-content"
         }
 
@@ -1146,6 +1174,12 @@ class Widget extends React.Component {
         // if fit width is enabled then the minsize is the resizable size
         let minWidth = fitWidth ? this.state.size.width : this.minSize.width
         let minHeight = fitHeight ? this.state.size.height : this.minSize.height
+
+        // let minWidth = fitWidth ? "max-content" : this.minSize.width
+        // let minHeight = fitHeight ? "max-content" : this.minSize.height
+        
+        // let minWidth = this.minSize.width
+        // let minHeight = this.minSize.height
         
         return {width, height, minWidth, minHeight}
 
@@ -1175,14 +1209,15 @@ class Widget extends React.Component {
         // NOTE: first check tkinter behaviour with the width and height
 
         let outerStyle = {
+            
             ...this.state.widgetOuterStyling,
+            width: width,
+            height: height,
             cursor: this.cursor,
             zIndex: this.state.zIndex,
             position: this.state.positionType, //  don't change this if it has to be movable on the canvas
             top: `${this.state.pos.y}px`,
             left: `${this.state.pos.x}px`,
-            width: width,
-            height: height,
             minWidth: minWidth, 
             minHeight: minHeight,
             opacity: this.state.isDragging ? 0.3 : 1,
diff --git a/src/components/header.js b/src/components/header.js
index be49931..4a23105 100644
--- a/src/components/header.js
+++ b/src/components/header.js
@@ -24,7 +24,7 @@ function Header({projectName, onProjectNameChange, framework, onFrameworkChange,
 
 
     return (
-        <div className={`tw-w-full tw-bg-primaryBg tw-p-2 tw-flex tw-place-items-center
+        <div className={`tw-w-full tw-bg-primaryBg tw-gap-2 tw-overflow-x-auto tw-p-2 tw-flex tw-place-items-center
                              ${className||''}`}>
 
             <div className="tw-flex tw-gap-2 tw-place-content-center">
diff --git a/src/frameworks/tkinter/widgets/base.js b/src/frameworks/tkinter/widgets/base.js
index 926897d..d7ebc9d 100644
--- a/src/frameworks/tkinter/widgets/base.js
+++ b/src/frameworks/tkinter/widgets/base.js
@@ -1,7 +1,7 @@
 import { Layouts, PosType } from "../../../canvas/constants/layouts"
 import Tools from "../../../canvas/constants/tools"
 import Widget from "../../../canvas/widgets/base"
-import { convertObjectToKeyValueString, removeKeyFromObject } from "../../../utils/common"
+import { convertObjectToKeyValueString, isNumeric, removeKeyFromObject } from "../../../utils/common"
 import { Tkinter_TO_WEB_CURSOR_MAPPING } from "../constants/cursor"
 import { Tkinter_To_GFonts } from "../constants/fontFamily"
 import { JUSTIFY, RELIEF } from "../constants/styling"
@@ -57,13 +57,13 @@ export class TkinterBase extends Widget {
                 config["pady"] = gap
             }
 
-            if (align === "start"){
-                config["anchor"] = "'nw'"
-            }else if (align === "center"){
-                config["anchor"] = "'center'"
-            }else if (align === "end"){
-                config["anchor"] = "'se'"
-            }
+            // if (align === "start"){
+            //     config["anchor"] = "'nw'"
+            // }else if (align === "center"){
+            //     config["anchor"] = "'center'"
+            // }else if (align === "end"){
+            //     config["anchor"] = "'se'"
+            // }
 
             const fillX = this.getAttrValue("flexManager.fillX")
             const fillY = this.getAttrValue("flexManager.fillY")
@@ -96,6 +96,13 @@ export class TkinterBase extends Widget {
         return layoutManager
     }
 
+    getPackAttrs = () => {
+
+        return {
+            side: this.getAttrValue("flexManager.side") ,
+        }
+    }
+
     setParentLayout(layout){
 
         if (!layout){
@@ -119,30 +126,6 @@ export class TkinterBase extends Widget {
 
         if (parentLayout === Layouts.FLEX || parentLayout === Layouts.GRID) {
 
-            // const elementRect = this.elementRef.current.getBoundingClientRect() 
-            // const canvasInnerRect = this.props.canvasInnerContainerRef.current.getBoundingClientRect()
-            // const {zoom, pan} = this.props.canvasMetaData
-            // console.log("pan: ", pan, zoom)
-            // let pos = {
-            //     x: ((elementRect.left - canvasInnerRect.left) - pan.x) / zoom ,
-            //     y: ((elementRect.top - canvasInnerRect.top) - pan.y)  / zoom
-            // }
-
-            // let parent = this.props.parentWidgetRef?.current;
-
-            // while (parent) {
-            //     // accounting for nested parents
-            //     const parentRect = parent.getBoundingRect()
-            //     pos.x -= ((parentRect.left - canvasInnerRect.left) - pan.x) / zoom 
-            //     pos.y -= ((parentRect.top - canvasInnerRect.top) - pan.y) / zoom 
-
-            //     // Move up to the next parent (if any)
-            //     parent = parent.parentWidgetRef?.current
-            // }
-
-            // // this.setPos(pos.x, pos.y)
-            // console.log("setting pos: ", pos, elementRect, canvasInnerRect)
-
             updates = {
                 ...updates,
                 // pos: pos,
@@ -172,8 +155,9 @@ export class TkinterBase extends Widget {
                     attrs: {
                         ...updateAttrs,
                         flexManager: {
-                            label: "Flex Manager",
+                            label: "Pack Manager",
                             display: "horizontal",
+                            
                             fillX: {
                                 label: "Fill X",
                                 tool: Tools.CHECK_BUTTON,
@@ -182,7 +166,8 @@ export class TkinterBase extends Widget {
                                     this.setAttrValue("flexManager.fillX", value)
                                     const widgetStyle = {
                                         ...this.state.widgetOuterStyling,
-                                        flexGrow: value ? 1 : 0,
+                                        // flexGrow: value ? 1 : 0,
+                                        width: "100%"
                                     }
 
                                     this.updateState({
@@ -200,7 +185,9 @@ export class TkinterBase extends Widget {
                                     
                                     const widgetStyle = {
                                         ...this.state.widgetOuterStyling,
-                                        flexGrow: value ? 1 : 0,
+                                        height: "100%"
+
+                                        // flexGrow: value ? 1 : 0,
                                     }
                                     this.updateState({
                                         widgetOuterStyling: widgetStyle,
@@ -223,6 +210,22 @@ export class TkinterBase extends Widget {
                                     })
                                 }
                             },
+
+                            side: {
+                                label: "Align Side",
+                                tool: Tools.SELECT_DROPDOWN,
+                                options: ["left", "right", "top", "bottom", ""].map(val => ({value: val, label: val})),
+                                value: "",
+                                onChange: (value) => {
+
+                                    // FIXME: force parent rerender because, here only child get rerendered, if only parent get rerendered the widget would move
+                                    this.setAttrValue("flexManager.side", value)
+                                    
+                                    // this.props.parentWidgetRef.current.forceRerender()
+                                    // setTimeout(this.props.parentWidgetRef.current.forceRerender, 1)
+                                    // console.log("updateing state: ", value, this.props.parentWidgetRef.current)
+                                }
+                            },
                             
                         }
                     }
@@ -331,28 +334,126 @@ export class TkinterBase extends Widget {
             }
         }
 
-        this.updateState(updates)
+        console.log("updates: ", updates)
+        
+        // FIXME: updates are async causing huge problems
+
+        // this.updateState(updates, () => {
+        //     console.log("updated atters: ", this.state)
+        // })
+
+        this.updateState((prevState) => ({...prevState, ...updates}))
+
 
         return updates
     }
 
+    renderTkinterLayout = () => {
+        const {layout, direction, gap} = this.getLayout()
+        console.log("rendering: ", layout, this.state)
+        if (layout === Layouts.FLEX){
+            return (
+                <>
+                    {["top", "bottom", "left", "right", "center"].map((pos) => (
+                        <div key={pos} style={this.getFlexLayoutStyle(pos)}>
+                            {this.props.children.filter(item => {
+                                const packAttrs = item.ref?.current?.getPackAttrs()
+                                console.log("side: ", packAttrs, item, item.ref?.current?.getPackAttrs())
+                                // const widgetSide = item.ref.current?.getAttrValue("flexManager.side") || "left"
+                                // console.log("widget side: ", item.ref.current?.__id, item.ref.current, item.ref.current.getAttrValue("flexManager.side"))
+                                return ((packAttrs?.side || "right") === pos)
+                            })}
+                        </div>
+                    ))}
+                </>
+            )
+        }
+        console.log("hell a")
+        return (<>{this.props.children}</>)
+    }
+
+    getFlexLayoutStyle = (side) => {
+        const rowStyle = {
+            display: "flex",
+            gap: "10px"
+          }
+
+        const columnStyle = {
+            display: "flex",
+            flexDirection: "column",
+            gap: "10px"
+        }
+
+        switch (side) {
+            case "top": return { gridColumn: "1 / -1", justifySelf: "center", ...columnStyle };
+            case "bottom": return { gridColumn: "1 / -1", justifySelf: "center", ...columnStyle };
+            case "left": return { gridRow: "2", gridColumn: "1", alignSelf: "center", ...rowStyle };
+            case "right": return { gridRow: "2", gridColumn: "3", alignSelf: "center", ...rowStyle };
+            case "center": return { gridRow: "2", gridColumn: "2", alignSelf: "center", justifySelf: "center" };
+            default: return {}
+        }
+        
+    }
+
+    setLayout(value) {
+        const { layout, direction, grid = { rows: 1, cols: 1 }, gap = 10, align } = value
+
+        console.log("setting layout: ", layout)
+
+        // FIXME the display grid is still flex
+        // FIXME: this should be grid only when the widget accepts children else flex or something tp center
+        // console.log("layout value: ", value)
+        // FIXME: In grid layout the layout doesn't adapt to the size of the child if resized
+
+        let display = "block"
+
+        if (layout !== Layouts.PLACE){
+            if (this.droppableTags !== null){
+                display = "grid"
+            }else{
+                display = "flex" // this is so that the labels and other elements are centered
+            }
+        }
+        
+        let widgetStyle = {
+            ...this.state.widgetInnerStyling,
+            // display: layout !== Layouts.PLACE ? "grid" : "block",
+            display: display,
+            // flexDirection: direction,
+            gap: `${gap}px`,
+            // flexWrap: "wrap",
+            gridTemplateColumns: layout === Layouts.FLEX ? "auto 1fr auto" : "repeat(auto-fill, minmax(100px, 1fr))",
+            gridTemplateRows: layout === Layouts.FLEX ? "auto 1fr auto" : "repeat(auto-fill, minmax(100px, 1fr))",  
+            // gridAutoRows: 'minmax(100px, auto)',  // Rows with minimum height of 100px, and grow to fit content
+            // gridAutoCols: 'minmax(100px, auto)',  // Cols with minimum height of 100px, and grow to fit content
+        }
+
+        this.updateState({
+            widgetInnerStyling: widgetStyle
+        })
+
+        this.setAttrValue("layout", value)
+        this.props.onLayoutUpdate({parentId: this.__id, parentLayout: value})// inform children about the layout update
+
+    }
+
     getInnerRenderStyling(){
         let {width, height, minWidth, minHeight} = this.getRenderSize()
 
         const {layout: parentLayout, direction, gap} = this.getParentLayout() || {}
 
-        if (parentLayout === Layouts.FLEX){
-            const fillX = this.getAttrValue("flexManager.fillX")
-            const fillY = this.getAttrValue("flexManager.fillY")
+        // if (parentLayout === Layouts.FLEX){
+        //     const fillX = this.getAttrValue("flexManager.fillX")
+        //     const fillY = this.getAttrValue("flexManager.fillY")
 
-            // This is needed if fillX or fillY is true, as the parent is applied flex-grow
+        //     // This is needed if fillX or fillY is true, as the parent is applied flex-grow
 
-            if (fillX || fillY){
-                width = "100%"
-                height = "100%"
-            }
+        //     if (fillX || fillY){
+        //         width = "100%"
+        //         height = "100%"
+        //     }
 
-        }
+        // }
 
         const styling = {
             ...this.state.widgetInnerStyling,
@@ -364,6 +465,35 @@ export class TkinterBase extends Widget {
         return styling
     }
 
+    getRenderSize(){
+
+        let {width, height, minWidth, minHeight} = super.getRenderSize()
+
+        let fillX = this.getAttrValue("flexManager.fillX") || false
+        let fillY = this.getAttrValue("flexManager.fillY") || false
+
+        if (fillX){
+            width = "100%"
+        }
+
+        if (fillY){
+            height = "100%"
+        }
+        
+        return {width, height, minWidth, minHeight}
+
+    }
+
+
+    // serialize(){
+    //     const serializedValues = super.serialize()
+    //     console.log("serialized values: ", serializedValues)
+    //     return ({
+    //         ...serializedValues,
+    //         attrs: this.serializeAttrsValues()
+    //     })
+    // }
+
     /**
      * loads the data 
      * @param {object} data 
@@ -514,15 +644,17 @@ export class TkinterWidgetBase extends TkinterBase{
                             // this.setWidgetInnerStyle("paddingLeft", `${value}px`)
                             // this.setWidgetInnerStyle("paddingRight", `${value}px`)
 
-                            const widgetStyle = {
-                                ...this.state.widgetInnerStyling,
-                                paddingLeft: `${value}px`,
-                                paddingRight: `${value}px`
-                            }
-                            this.setState({
+                            // const widgetStyle = {
+                               
+                            // }
+                            this.setState((prevState) => ({
 
-                                widgetInnerStyling: widgetStyle
-                            })
+                                widgetInnerStyling: {
+                                    ...prevState.widgetInnerStyling,
+                                    paddingLeft: `${value}px`,
+                                    paddingRight: `${value}px`
+                                }
+                            }))
 
 
                             this.setAttrValue("padding.padX", value)
@@ -534,15 +666,19 @@ export class TkinterWidgetBase extends TkinterBase{
                         toolProps: {min: 0, max: 140},
                         value: null,
                         onChange: (value) => {
-                            const widgetStyle = {
-                                ...this.state.widgetInnerStyling,
-                                paddingTop: `${value}px`,
-                                paddingBottom: `${value}px`
-                            }
-                            this.setState({
 
-                                widgetInnerStyling: widgetStyle
-                            })
+                            this.setState((prevState) => ({
+
+                                widgetInnerStyling: {
+                                    ...prevState.widgetInnerStyling,
+                                    paddingTop: `${value}px`,
+                                    paddingBottom: `${value}px`
+                                }
+                            }))
+                            // this.setState({
+
+                            //     widgetInnerStyling: widgetStyle
+                            // })
                             this.setAttrValue("padding.padX", value)
                         }
                     },
@@ -586,7 +722,7 @@ export class TkinterWidgetBase extends TkinterBase{
                             this.setAttrValue("margin.marginY", value)
                         }
                     },
-                },
+                },       
                 font: {
                     label: "font",
                     fontFamily: {
diff --git a/src/frameworks/tkinter/widgets/mainWindow.js b/src/frameworks/tkinter/widgets/mainWindow.js
index 189732e..a921a1d 100644
--- a/src/frameworks/tkinter/widgets/mainWindow.js
+++ b/src/frameworks/tkinter/widgets/mainWindow.js
@@ -1,6 +1,7 @@
 import Widget from "../../../canvas/widgets/base"
 import Tools from "../../../canvas/constants/tools"
 import { TkinterBase } from "./base"
+import { removeKeyFromObject } from "../../../utils/common"
 
 
 class MainWindow extends TkinterBase{
@@ -15,12 +16,14 @@ class MainWindow extends TkinterBase{
             exclude: ["image", "video", "media", "main_window", "toplevel"]
         }
 
+        const newAttrs = removeKeyFromObject("margin", this.state.attrs)
+
         this.state = {
             ...this.state,
             size: { width: 700, height: 400 },
             widgetName: "main",
             attrs: {
-                ...this.state.attrs,
+                ...newAttrs,
                 title: {
                     label: "Window Title",
                     tool: Tools.INPUT, // the tool to display, can be either HTML ELement or a constant string
@@ -44,7 +47,7 @@ class MainWindow extends TkinterBase{
     // }
 
     componentDidMount(){
-        this.setAttrValue("styling.backgroundColor", "#E4E2E2")
+        // this.setAttrValue("styling.backgroundColor", "#E4E2E2")
         super.componentDidMount()
     }
 
@@ -74,6 +77,7 @@ class MainWindow extends TkinterBase{
     }
 
     renderContent(){
+        console.log("inner style: ", this.getInnerRenderStyling())
         return (
             <div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden">
                 <div className="tw-flex tw-w-full tw-h-[25px] tw-bg-[#c7c7c7] tw-p-1
@@ -90,7 +94,8 @@ class MainWindow extends TkinterBase{
                 </div>
                 <div className="tw-p-2 tw-w-full tw-relative tw-h-full tw-overflow-hidden tw-content-start" 
                         style={{...this.getInnerRenderStyling(), width: "100%", height: "calc(100% - 25px)"}}>
-                    {this.props.children}
+                    {/* {this.props.children} */}
+                    {this.renderTkinterLayout()} {/* This is required for pack layouts, so if your widget accepts child widgets, ensure to add this */}
                 </div>
             </div>
         )