bug fixes related to code generation

src/frameworks/tkinter/widgets/base.js

@@ -19,7 +19,7 @@ export class TkinterBase extends Widget {
     }
 
     getLayoutCode(){
-        const {layout: parentLayout, direction, gap} = this.getParentLayout()
+        const {layout: parentLayout, direction, gap, align="start"} = this.getParentLayout()
 
         const absolutePositioning = this.getAttrValue("positioning")  
 
@@ -32,23 +32,39 @@ export class TkinterBase extends Widget {
                 y: this.state.pos.y,
             }
 
-            if (!this.state.fitContent.width){
-                config["width"] = this.state.size.width
-            }
-            if (!this.state.fitContent.height){
-                config["height"] = this.state.size.height
-            }
+            config["width"] = this.state.size.width
+            config["height"] = this.state.size.height
+
+            // if (!this.state.fitContent.width){
+            //     config["width"] = this.state.size.width
+            // }
+            // if (!this.state.fitContent.height){
+            //     config["height"] = this.state.size.height
+            // }
 
             const configStr = convertObjectToKeyValueString(config)
 
             layoutManager = `place(${configStr})`
 
-        }if (parentLayout === Layouts.FLEX){
+        }else if (parentLayout === Layouts.FLEX){
 
             const config = {
                 side: direction === "row" ? "tk.LEFT" : "tk.TOP",
             }
 
+            if (gap > 0){
+                config["padx"] = gap
+                config["pady"] = gap
+            }
+
+            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")
             const expand = this.getAttrValue("flexManager.expand")
@@ -73,8 +89,8 @@ export class TkinterBase extends Widget {
 
         }else if (parentLayout === Layouts.GRID){
             const row = this.getAttrValue("gridManager.row")
-            const col = this.getAttrValue("gridManager.col")
-            layoutManager = `grid(row=${row}, col=${col})`
+            const col = this.getAttrValue("gridManager.column")
+            layoutManager = `grid(row=${row}, column=${col})`
         }
 
         return layoutManager

src/frameworks/tkinter/widgets/input.js

@@ -89,13 +89,13 @@ export class Text extends TkinterWidgetBase{
             size: { width: 120, height: 80 },
             attrs: {
                 ...this.state.attrs,
-                placeHolder: {
-                    label: "PlaceHolder",
-                    tool: Tools.INPUT, // the tool to display, can be either HTML ELement or a constant string
-                    toolProps: {placeholder: "text", maxLength: 100}, 
-                    value: "placeholder text",
-                    onChange: (value) => this.setAttrValue("placeHolder", value)
-                }
+                // placeHolder: {
+                //     label: "PlaceHolder",
+                //     tool: Tools.INPUT, // the tool to display, can be either HTML ELement or a constant string
+                //     toolProps: {placeholder: "text", maxLength: 100}, 
+                //     value: "placeholder text",
+                //     onChange: (value) => this.setAttrValue("placeHolder", value)
+                // }
 
             }
         }
@@ -114,7 +114,7 @@ export class Text extends TkinterWidgetBase{
         const config = convertObjectToKeyValueString(this.getConfigCode())
 
         return [
-                `${variableName} = tk.Text(master=${parent}, text="${placeHolderText}")`,
+                `${variableName} = tk.Text(master=${parent})`,
                 `${variableName}.config(${config})`,
                 `${variableName}.${this.getLayoutCode()}`
             ]

src/frameworks/tkinter/widgets/label.js

@@ -81,7 +81,7 @@ class Label extends TkinterWidgetBase{
             code.push(`${variableName}_img = Image.open(${getPythonAssetPath(image.name, "image")})`)
             code.push(`${variableName}_img = ImageTk.PhotoImage(${variableName}_img)`)
             // code.push("\n")
-            labelInitialization = `${variableName} = tk.Label(master=${parent}, image="${variableName}_img", text="${labelText}")`
+            labelInitialization = `${variableName} = tk.Label(master=${parent}, image=${variableName}_img, text="${labelText}", compound=tk.TOP)`
         }
 
         // code.push("\n")

src/frameworks/tkinter/widgets/optionMenu.js

@@ -57,9 +57,15 @@ class OptionMenu extends TkinterWidgetBase{
         const defaultValue = this.getAttrValue("defaultValue")
         const options = JSON.stringify(this.getAttrValue("widgetOptions").inputs)
 
+        const code = [
+            `${variableName}_options = ${options}`,
+            `${variableName}_var = tk.StringVar(value="${defaultValue || options.at(1) || ""}")`,
+            `${variableName} = tk.OptionMenu(${parent}, ${variableName}_var, *${variableName}_options)`
+        ]
+
+
         return [
-                `${variableName}_options = ${options}`,
-                `${variableName} = tk.OptionMenu(master=${parent}, ${defaultValue}, *${variableName}_options)`,
+                ...code,
                 `${variableName}.config(${config})`,
                 `${variableName}.${this.getLayoutCode()}`
             ]

src/frameworks/tkinter/widgets/slider.js

@@ -7,7 +7,7 @@ import {TkinterBase, TkinterWidgetBase} from "./base"
 class Slider extends TkinterWidgetBase{
 
     static widgetType = "scale"
-
+    // FIXME: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use 
     constructor(props) {
         super(props)
 
@@ -98,7 +98,7 @@ class Slider extends TkinterWidgetBase{
         
         const config = this.getConfigCode()
 
-        config["_from"] = this.getAttrValue("scale.min")
+        config["from_"] = this.getAttrValue("scale.min")
         config["to"] = this.getAttrValue("scale.max")
         config["resolution"] = this.getAttrValue("scale.step")
 
@@ -106,12 +106,12 @@ class Slider extends TkinterWidgetBase{
             config["orientation"] = this.getAttrValue("orientation")
         }
 
-        const defaultValue = this.getAttrValue("defaultValue")
+        const defaultValue = this.getAttrValue("scale.default")
 
         return [
-                `${variableName}_var = tk.DoubleVar(${defaultValue})`,
+                `${variableName}_var = tk.DoubleVar(value=${defaultValue})`,
                 `${variableName} = tk.Scale(master=${parent}, variable=${variableName}_var)`,
-                `${variableName}.config(${config})`,
+                `${variableName}.config(${convertObjectToKeyValueString(config)})`,
                 `${variableName}.${this.getLayoutCode()}`
             ]
     }

src/frameworks/tkinter/widgets/toplevel.js

@@ -42,7 +42,7 @@ class TopLevel extends Widget{
         const backgroundColor = this.getAttrValue("styling.backgroundColor")
 
         return [
-                `${variableName} = tk.TopLevel(root=${parent})`,
+                `${variableName} = tk.Toplevel(master=${parent})`,
                 `${variableName}.config(bg="${backgroundColor}")`,
                 `${variableName}.title("${this.getAttrValue("title")}")`
             ]