From b8bd0c74a6f308c66fca432de31d436d473cce33 Mon Sep 17 00:00:00 2001
From: paul <paul.sajo.official@gmail.com>
Date: Mon, 30 Sep 2024 15:30:46 +0530
Subject: [PATCH] bug fixes related to code generation

---
 docs/index.html                               |  6 +++-
 docs/intro.md                                 |  2 +-
 src/canvas/toolbar.js                         | 14 ++++++++
 src/canvas/widgets/base.js                    | 12 ++++++-
 src/frameworks/tkinter/constants/styling.js   |  9 +++++
 src/frameworks/tkinter/engine/code.js         |  3 +-
 .../tkinter/plugins/analogTimepicker.js       |  6 ++--
 src/frameworks/tkinter/plugins/pandasTable.js |  6 ++--
 src/frameworks/tkinter/widgets/base.js        | 36 +++++++++++++------
 src/frameworks/tkinter/widgets/input.js       | 16 ++++-----
 src/frameworks/tkinter/widgets/label.js       |  2 +-
 src/frameworks/tkinter/widgets/optionMenu.js  | 10 ++++--
 src/frameworks/tkinter/widgets/slider.js      | 10 +++---
 src/frameworks/tkinter/widgets/toplevel.js    |  2 +-
 14 files changed, 98 insertions(+), 36 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index b8d8784..b151bd0 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -55,6 +55,10 @@
   </script>
   <style>
 
+    .markdown-section{
+      max-width: 1000px;
+    }
+
     .icon{
       font-size: 30px;
     }
@@ -92,7 +96,7 @@
       padding: 15px;
       margin: 15px 0;
       border-radius: 4px;
-      /* background-color: #f6f8fa; */
+      background-color: #f2f2f239;
       border-left: 4px solid;
     }
     
diff --git a/docs/intro.md b/docs/intro.md
index 666f028..c3abc54 100644
--- a/docs/intro.md
+++ b/docs/intro.md
@@ -2,7 +2,7 @@
 
 <div class="alert alert-note">
   <div class="alert-title">NOTE ⚠️</div>
-  Work in progress. This page will be updated from time to time. This contains the basic documentation for PYUIBuilder
+  This page is still under work in progress. This page will be updated from time to time. This contains the basic documentation for PYUIBuilder
 </div>
 
 ## UI Basics
diff --git a/src/canvas/toolbar.js b/src/canvas/toolbar.js
index 3af04b2..094db7d 100644
--- a/src/canvas/toolbar.js
+++ b/src/canvas/toolbar.js
@@ -165,6 +165,20 @@ 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">
+                    <span className="tw-text-sm">Align items</span>
+                    <Select
+                        options={[
+                            { value: "start", label: "Start" },
+                            { value: "center", label: "Center" },
+                            { value: "end", label: "End" },
+                        ]}
+                        showSearch
+                        value={val.value?.align || "start"}
+                        placeholder={`${val.label}`}
+                        onChange={(value) => handleChange({ ...val.value, align: value }, val.onChange)}
+                    />
+                </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 e495ddd..b2b828a 100644
--- a/src/canvas/widgets/base.js
+++ b/src/canvas/widgets/base.js
@@ -570,7 +570,7 @@ class Widget extends React.Component {
     }
 
     setLayout(value) {
-        const { layout, direction, grid = { rows: 1, cols: 1 }, gap = 10 } = value
+        const { layout, direction, grid = { rows: 1, cols: 1 }, gap = 10, align } = value
 
         // console.log("layout value: ", value)
         // FIXME: In grid layout the layout doesn't adapt to the size of the child if resized
@@ -586,6 +586,16 @@ class Widget extends React.Component {
             // gridAutoCols: 'minmax(100px, auto)',  // Cols with minimum height of 100px, and grow to fit content
         }
 
+        if (align === "start"){
+            widgetStyle["alignItems"] = "flex-start"
+        }else if (align === "center"){
+            widgetStyle["alignItems"] = "center"
+        }else if (align === "end"){
+            widgetStyle["alignItems"] = "flex-end"
+        }else{
+            widgetStyle["alignItems"] = "unset"
+        }
+
         this.updateState({
             widgetInnerStyling: widgetStyle
         })
diff --git a/src/frameworks/tkinter/constants/styling.js b/src/frameworks/tkinter/constants/styling.js
index d5d41bb..12f132e 100644
--- a/src/frameworks/tkinter/constants/styling.js
+++ b/src/frameworks/tkinter/constants/styling.js
@@ -12,4 +12,13 @@ export const JUSTIFY = [
     "LEFT",
     "CENTER",
     "RIGHT"
+]
+
+
+export const ANCHOR = [
+    "n",
+    "s",
+    "e",
+    "w",
+    "center"
 ]
\ No newline at end of file
diff --git a/src/frameworks/tkinter/engine/code.js b/src/frameworks/tkinter/engine/code.js
index f6e2b21..6a6ac93 100644
--- a/src/frameworks/tkinter/engine/code.js
+++ b/src/frameworks/tkinter/engine/code.js
@@ -130,6 +130,8 @@ async function generateTkinterCode(projectName, widgetList=[], widgetRefs=[], as
 
     message.info("starting zipping files, download will start in a few seconds")
 
+    return
+
     const createFileList = [
         {
             fileData: code.join(""),
@@ -138,7 +140,6 @@ async function generateTkinterCode(projectName, widgetList=[], widgetRefs=[], as
         }
     ]
 
-    console.log("requirements: ", requirements)
 
     if (requirements.length > 0){
         createFileList.push({
diff --git a/src/frameworks/tkinter/plugins/analogTimepicker.js b/src/frameworks/tkinter/plugins/analogTimepicker.js
index ca631a9..41a30fc 100644
--- a/src/frameworks/tkinter/plugins/analogTimepicker.js
+++ b/src/frameworks/tkinter/plugins/analogTimepicker.js
@@ -84,7 +84,7 @@ class AnalogTimePicker extends TkinterBase{
                     handleColor: {
                         label: "Handle Color",
                         tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string
-                        value: "#000000c0",
+                        value: "#000000",
                         onChange: (value) => {
                             this.setAttrValue("styling.handleColor", value)
                         }
@@ -178,7 +178,7 @@ class AnalogTimePicker extends TkinterBase{
         const handleColor = this.getAttrValue("styling.handleColor")
 
         const code = [
-            `${variableName} = AnalogPicker(master=${parent}, type=${mode===12 ? "constants.HOURS12" : "constants.HOURS24"})`,
+            `${variableName} = AnalogPicker(parent=${parent}, type=${mode===12 ? "constants.HOURS12" : "constants.HOURS24"})`,
         ]
 
         if (theme){
@@ -198,7 +198,7 @@ class AnalogTimePicker extends TkinterBase{
                 "canvas_bg": `"${bgColor}"`,
                 "textcolor": `"${numColor}"`,
                 "bg": `"${clockColor}"`,
-                "handlecolor": `"${handleColor}"`,
+                "handcolor": `"${handleColor}"`,
                 "headcolor": `"${handleColor}"`
             }
 
diff --git a/src/frameworks/tkinter/plugins/pandasTable.js b/src/frameworks/tkinter/plugins/pandasTable.js
index a282690..14ef746 100644
--- a/src/frameworks/tkinter/plugins/pandasTable.js
+++ b/src/frameworks/tkinter/plugins/pandasTable.js
@@ -157,7 +157,10 @@ class PandasTable extends TkinterBase{
         const enableEdit = this.getAttrValue("enableEdit")
 
         const code = [
-            `${variableName} = Table(master=${parent})`,
+            `${variableName}_table_frame = tk.Frame(master=${parent})`,
+            `${variableName}_table_frame.${this.getLayoutCode()}`,
+
+            `${variableName} = Table(parent=${variableName}_table_frame)`,
             `${variableName}.editable = ${enableEdit ? "True" : "False"}`,
         ]
 
@@ -179,7 +182,6 @@ class PandasTable extends TkinterBase{
         return [
                 ...code,
                 `${variableName}.show()`,
-                `${variableName}.${this.getLayoutCode()}`
             ]
     }
 
diff --git a/src/frameworks/tkinter/widgets/base.js b/src/frameworks/tkinter/widgets/base.js
index 5c5559f..18e3682 100644
--- a/src/frameworks/tkinter/widgets/base.js
+++ b/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
diff --git a/src/frameworks/tkinter/widgets/input.js b/src/frameworks/tkinter/widgets/input.js
index f8d7519..1380204 100644
--- a/src/frameworks/tkinter/widgets/input.js
+++ b/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()}`
             ]
diff --git a/src/frameworks/tkinter/widgets/label.js b/src/frameworks/tkinter/widgets/label.js
index 4f7bcb7..1a97c5a 100644
--- a/src/frameworks/tkinter/widgets/label.js
+++ b/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")
diff --git a/src/frameworks/tkinter/widgets/optionMenu.js b/src/frameworks/tkinter/widgets/optionMenu.js
index 3ce4fc4..5bc0f1c 100644
--- a/src/frameworks/tkinter/widgets/optionMenu.js
+++ b/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()}`
             ]
diff --git a/src/frameworks/tkinter/widgets/slider.js b/src/frameworks/tkinter/widgets/slider.js
index e302261..3c9da59 100644
--- a/src/frameworks/tkinter/widgets/slider.js
+++ b/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()}`
             ]
     }
diff --git a/src/frameworks/tkinter/widgets/toplevel.js b/src/frameworks/tkinter/widgets/toplevel.js
index 3147837..e312b74 100644
--- a/src/frameworks/tkinter/widgets/toplevel.js
+++ b/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")}")`
             ]