fixed width and height problem with frame

src/frameworks/tkinter/engine/code.js

@@ -117,7 +117,7 @@ async function generateTkinterCode(projectName, widgetList=[], widgetRefs=[], as
 
     // TODO: avoid adding \n inside the list instead rewrite using code.join("\n")
     const code = [
-        "# This code is generated by PyUIbuilder: https://github.com/PaulleDemon/PyUIBuilder",
+        "# This code is generated by PyUIbuilder: https://pyuibuilder.com",
         "\n\n",
         ...imports.flatMap((item, index) => index < imports.length - 1 ? [item, "\n"] : [item]), //add \n to every line
         "\n\n",

src/frameworks/tkinter/widgets/base.js

@@ -527,74 +527,6 @@ export class TkinterBase extends Widget {
         return updates
     }
 
-    getFlexLayoutStyle = (side, anchor) => {
-        // NOTE: may no longer be required
-        // let baseStyle = { display: "flex", width: "100%", height: "100%", ...this.getPackAnchorStyle(anchor) }
-        let baseStyle = { }
-
-        const rowStyle = {
-            display: "flex",
-            gap: "10px",
-          }
-
-        const columnStyle = {
-            display: "flex",
-            flexDirection: "column",
-            gap: "10px",
-        }
-
-        switch (side) {
-            case "top":
-                return { gridColumn: "1 / -1", alignSelf: "stretch", ...baseStyle, ...columnStyle };
-            case "bottom":
-                return { gridColumn: "1 / -1", alignSelf: "stretch", ...baseStyle, ...columnStyle };
-            case "left":
-                return { gridRow: "2", gridColumn: "1", justifySelf: "stretch", ...baseStyle, ...rowStyle };
-            case "right":
-                return { gridRow: "2", gridColumn: "3", justifySelf: "stretch", ...baseStyle, ...rowStyle };
-            case "center":
-                return { gridRow: "2", gridColumn: "2", alignSelf: "center", justifySelf: "center", ...baseStyle, };
-            default:
-                return {};
-        }
-        
-    }
-
-    /**
-     * Pack manager has anchor parameter
-     * @param {*} anchor 
-     */
-    getPackAnchorStyle = (anchor, isColumn) => {
-        // NOTE: may no longer be required
-        const styleMap = {
-          nw: { justifyContent: "flex-start", alignItems: "flex-start" },
-          ne: { justifyContent: "flex-end", alignItems: "flex-start" },
-          sw: { justifyContent: "flex-start", alignItems: "flex-end" },
-          se: { justifyContent: "flex-end", alignItems: "flex-end" },
-          center: { justifyContent: "center", alignItems: "center" }
-        }
-        // return styleMap[anchor] || {}
-
-        const baseStyle = styleMap[anchor] || {};
-        const fillX = this.getAttrValue("flexManager.fillX")
-        const fillY = this.getAttrValue("flexManager.fillY")
-        
-        if (fillX) {
-            return { ...baseStyle, width: "100%", flexGrow: isColumn ? 0 : 1 }; 
-        } 
-        if (fillY) {
-            return { ...baseStyle, height: "100%", flexGrow: isColumn ? 1 : 0 };
-        } 
-        if (fillX && fillY) {
-            return { ...baseStyle, width: "100%", height: "100%", flexGrow: 1 };
-        }
-
-        return {
-            ...baseStyle, alignSelf: "stretch",   // Forces stretching in grid rows
-            justifySelf: "stretch", // Forces stretching in grid columns
-            flexGrow: (fillX || fillY) ? 1 : 0
-        }
-    }
       
 
     /**
@@ -612,7 +544,7 @@ export class TkinterBase extends Widget {
     
         const { side = "top", expand = false, anchor } = widgetRef.getPackAttrs() || {};
     
-        console.log("rerendering:", side, expand);
+        // console.log("rerendering:", side, expand);
     
         const directionMap = {
             top: "column",
@@ -635,7 +567,6 @@ export class TkinterBase extends Widget {
     
         lastSide = side; // Update last side for recursion
         
-        // 🟢 Mapping Tkinter anchors to Flexbox styles
         const anchorStyles = {
             n: { alignItems: "flex-start", justifyContent: "center" }, // Top-center
             s: { alignItems: "flex-end", justifyContent: "center" },   // Bottom-center
@@ -739,7 +670,6 @@ export class TkinterBase extends Widget {
     setLayout(value) {
         const { layout, direction, grid = { rows: 1, cols: 1 }, gap = 10, align } = value
 
-        // FIXME: when the layout changes the data is lost
 
         if (layout === Layouts.GRID){
 

src/frameworks/tkinter/widgets/frame.js

@@ -1,5 +1,7 @@
+import { Layouts } from "../../../canvas/constants/layouts"
 import Tools from "../../../canvas/constants/tools"
 import Widget from "../../../canvas/widgets/base"
+import { convertObjectToKeyValueString } from "../../../utils/common"
 import {TkinterBase} from "./base"
 
 
@@ -120,13 +122,42 @@ class Frame extends TkinterBase{
         this.setAttrValue("styling.backgroundColor", "#EDECEC")
     }
 
+    getConfigCode(){
+        const bg = this.getAttrValue("styling.backgroundColor")
+
+        const fitWidth = this.state.fitContent.width
+        const fitHeight = this.state.fitContent.height
+
+        const {width, height} = this.getSize()
+
+        const {layout} = this.getParentLayout()
+
+        console.log("parent layout: ", layout)
+
+        const config = {
+            bg: `"${bg}"` 
+        }
+
+        if (layout !== Layouts.PLACE){
+            if (!fitWidth){
+                config['width'] = width
+            }
+
+            if (!fitHeight){
+                config['height'] = height
+            }
+        }
+
+        return config
+    }
+
     generateCode(variableName, parent){
 
-        const bg = this.getAttrValue("styling.backgroundColor")
+        const config = convertObjectToKeyValueString(this.getConfigCode())
 
         return [
                 `${variableName} = tk.Frame(master=${parent})`,
-                `${variableName}.config(bg="${bg}")`,
+                `${variableName}.config(${config})`,
                 `${variableName}.${this.getLayoutCode()}`,
                 ...this.getGridLayoutConfigurationCode(variableName)
             ]