updated after time

fixed padx/y and ipadx/y
added license comment
2025-04-01 20:47:25 +05:30 · 2025-04-01 20:42:14 +05:30 · 2025-04-01 19:00:20 +05:30 · 2025-04-01 18:50:14 +05:30 · 2025-03-31 20:38:25 +05:30 · 2025-03-30 05:46:03 +05:30
28 changed files with 6325 additions and 2126 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -7,6 +7,7 @@
 .env-cmdrc.json
 build
 dist
 python-tests/
--- a/README.md
+++ b/README.md
@@ -30,7 +30,7 @@ https://github.com/user-attachments/assets/ac91aa98-843d-4578-b646-88e66bc113de
 <sub>**Don't like background music? fell free to mute it**</sub>
 ## Try PyUIBuilder
-Try [PyUIBuilder](https://pyuibuilder.pages.dev/)
+Try [PyUIBuilder](https://pyuibuilder.com)
 ## Table of contents
@@ -53,7 +53,7 @@ Try [PyUIBuilder](https://pyuibuilder.pages.dev/)
 ## Docs - Getting started
-Read the docs on the [Docs page](https://pyuibuilder-docs.pages.dev/)
+Read the docs on the [Docs page](https://docs.pyuibuilder.com/)
 ## Example app
@@ -109,7 +109,7 @@ While there are a lot of features, here are few you need to know.
 * Framework agnostic - Can outputs code in multiple frameworks.
 * Pre-built UI widgets
 * Plugins to extend 3rd party UI libraries
-* Supports layout managers, such as flex, grid and absolute positioning [read docs](https://pyuibuilder-docs.pages.dev/)
+* Supports layout managers, such as flex, grid and absolute positioning [read docs](https://docs.pyuibuilder.com/)
 * Generates python Code.
 * Support to upload local assets.
 * Generates requirements.txt file when needed
--- a/landingpages/landingpage/index.html
+++ b/landingpages/landingpage/index.html
@@ -249,7 +249,7 @@
                    </ul>
                    <a
-                        href="https://pyuibuilder.pages.dev/"
+                        href="https://pyuibuilder.com"
                        target="_blank"
                        rel="noreferrer noopener"
                        class=" !tw-bg-[#0F1727] tw-duration-[0.3s] hover:tw-transition-transform hover:tw-scale-[1.01] !tw-mt-auto !tw-text-white tw-gap-2 tw-text-lg tw-rounded-md tw-w-full tw-flex tw-place-content-center tw-p-2 tw-mx-2"
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -35,8 +35,8 @@
    "web-vitals": "^2.1.4"
  },
  "scripts": {
-    "start": "react-scripts start",
+    "start": "env-cmd -e development cross-env NODE_ENV=development webpack serve",
-    "build": "GENERATE_SOURCEMAP=false react-scripts build",
+    "build": "env-cmd -e production cross-env NODE_ENV=production webpack",
    "build:local": "GENERATE_SOURCEMAP=false env-cmd -e production react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
@@ -63,8 +63,28 @@
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.26.10",
    "@babel/preset-env": "^7.26.9",
    "@babel/preset-react": "^7.26.3",
    "@svgr/webpack": "^8.1.0",
    "ajv": "^7.2.4",
    "babel-loader": "^10.0.0",
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^13.0.0",
    "css-loader": "^7.1.2",
    "css-minimizer-webpack-plugin": "^7.0.2",
    "docsify-cli": "^4.4.4",
-    "typescript": "^4.9.5"
+    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.6.3",
    "mini-css-extract-plugin": "^2.9.2",
    "raw-loader": "^4.0.2",
    "react-app-rewired": "^2.2.1",
    "sass-loader": "^16.0.5",
    "style-loader": "^4.0.0",
    "terser-webpack-plugin": "^5.3.14",
    "typescript": "^4.9.5",
    "webpack": "^5.98.0",
    "webpack-cli": "^6.0.1",
    "webpack-dev-server": "^5.2.1"
  }
 }
--- a/public/index.html
+++ b/public/index.html
@@ -2,31 +2,31 @@
 <html lang="en">
  <head>
    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="A python GUI builder. Create tkinter, Customtk, Kivy and PySide using GUI builder"
    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="manifest.json" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css" integrity="sha512-dPXYcDub/aeb08c63jRq/k6GaKccl256JQy/AnOq7CAnEZ9FzSL9wSbcZkMp4R26vBsMLFYH4kQ67/bbV8XaCQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script async src="https://tally.so/widgets/embed.js"></script>
    <!-- Google tag (gtag.js) -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=%REACT_APP_ANALYTICS_SCRIPT_ID%"></script>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=<%= REACT_APP_ANALYTICS_SCRIPT_ID %>"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
-      gtag('config', '%REACT_APP_ANALYTICS_SCRIPT_ID%');
+      gtag('config', '<%= REACT_APP_ANALYTICS_SCRIPT_ID %>');
    </script>
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
+  "short_name": "PyUiBuilder",
-  "name": "Create React App Sample",
+  "name": "PyUiBuilder - Python GUI Builder",
  "icons": [
    {
      "src": "favicon.ico",
--- a/src/App.js
+++ b/src/App.js
@@ -61,21 +61,23 @@ function App() {
 	useEffect(() => {
-		if (shownNotChromiumAlert){
+		if (!shownNotChromiumAlert){
-			return
+			// this modal may rerender twice only in dev mode because of how react works
 			isChromium().then((isChrome) => {
 				if (!isChrome){
 					Modal.warning({
 						title: "Use Chromium browser",
 						onOk: () => setShownNotChromiumAlert(true),
 						content: (<span>We recommend using Chromium based browser such as Chrome, Brave, Edge etc for best results. 
 									<br />
 									Join us on 
 									<a href="https://discord.gg/dHXjrrCA7G" target='_blank' rel='noreferrer noopener'> Discord</a> for help and updates</span>)
 					})
 				}
 			})
 		}
-
+		setShownNotChromiumAlert(true)		
 		isChromium().then((isChrome) => {
 			if (!isChrome){
 				Modal.warning({
 					title: "Not Chromium browser",
 					content: "We recommend using Chromium based browser such as Chrome, Brave, Edge etc."
 				})
 				setShownNotChromiumAlert(true)
 			}
 		})
 	}, [shownNotChromiumAlert])
@@ -123,7 +125,6 @@ function App() {
 			const widgetCenterX = (TkMainWindow.initialSize.width - canvasBoundingBox.left) / 2
 			const widgetCenterY = (TkMainWindow.initialSize.height - canvasBoundingBox.top) / 2
 			canvasRef?.current?.createWidget(TkMainWindow, {x: canvasCenterX - widgetCenterX, y: canvasCenterY - widgetCenterY}, ({id, widgetRef}) => {
 				// center the widget when adding to canvas
@@ -140,7 +141,12 @@ function App() {
 			})
 		}else if (UIFramework === FrameWorks.CUSTOMTK){
-			canvasRef?.current?.createWidget(CTkMainWindow, ({id, widgetRef}) => {
+
 			const widgetCenterX = (TkMainWindow.initialSize.width - canvasBoundingBox.left) / 2
 			const widgetCenterY = (TkMainWindow.initialSize.height - canvasBoundingBox.top) / 2
 			canvasRef?.current?.createWidget(CTkMainWindow, {x: canvasCenterX - widgetCenterX, y: canvasCenterY - widgetCenterY}, ({id, widgetRef}) => {
 				// center the widget when adding to canvas
 				if (!widgetRef.current){
@@ -152,7 +158,7 @@ function App() {
 				const widgetCenterY = (widgetBoundingBox.height - widgetBoundingBox.top) / 2
-				widgetRef.current?.setPos(canvasCenterX-widgetCenterX, canvasCenterY-widgetCenterY)
+				// widgetRef.current?.setPos(canvasCenterX-widgetCenterX, canvasCenterY-widgetCenterY)
 			})
 		}
--- a/src/canvas/canvas.js
+++ b/src/canvas/canvas.js
@@ -19,7 +19,8 @@ import { removeDuplicateObjects } from "../utils/common"
 // import DotsBackground from "../assets/background/dots.svg"
-import { ReactComponent as DotsBackground } from "../assets/background/dots.svg"
+// import { ReactComponent as DotsBackground } from "../assets/background/dots.svg"
 import DotsBackground from "../assets/background/dots.svg";
 import DroppableWrapper from "../components/draggable/droppable"
--- a/src/canvas/widgets/base.js
+++ b/src/canvas/widgets/base.js
@@ -41,6 +41,8 @@ class Widget extends React.Component {
    static requirements = [] // requirements for the widgets (libraries) eg: tkvideoplayer, tktimepicker
    static requiredImports = [] // import statements
    static requiredCustomPyFiles = [] //  custom widgets inside of pythonWidgets don't add .py at the end
    // static contextType = ActiveWidgetContext
    constructor(props) {
@@ -185,6 +187,7 @@ class Widget extends React.Component {
        this.getImports = this.getImports.bind(this)
        this.getRequirements = this.getRequirements.bind(this)
        this.getRequiredCustomPyFiles = this.getRequiredCustomPyFiles.bind(this)
        // this.openRenaming = this.openRenaming.bind(this)
@@ -215,7 +218,6 @@ class Widget extends React.Component {
        this.stateUpdateCallback = null // allowing other components such as toolbar to subscribe to changes in this widget
        this.resizeObserver = null
    }
    componentDidMount() {
@@ -427,6 +429,10 @@ class Widget extends React.Component {
        return this.constructor.requiredImports
    }
    getRequiredCustomPyFiles(){
        return this.constructor.requiredCustomPyFiles
    }
    generateCode(){
        throw new NotImplementedError("generateCode() must be implemented by the subclass")
    }
@@ -704,8 +710,7 @@ class Widget extends React.Component {
    }
    getLayout(){
-
+        return this.getAttrValue("layout") || {layout: Layouts.PLACE}
        return this.getAttrValue("layout") || Layouts.PLACE
    }
    setLayout(value) {
@@ -918,6 +923,8 @@ class Widget extends React.Component {
            pos
        }
        const {layout} = attrs
        this.setState(newData,  () => {
            // Updates attrs
            let newAttrs = { ...this.state.attrs }
@@ -949,6 +956,10 @@ class Widget extends React.Component {
            if (selected){
                this.select()
            }
            if (layout){
                this.setLayout(layout)
            } 
        })  
--- a/src/frameworks/customtk/constants/cursor.js
+++ b/src/frameworks/customtk/constants/cursor.js
@@ -2,6 +2,7 @@
 export const Tkinter_TO_WEB_CURSOR_MAPPING = {
    "": "",
    "arrow": "default",
    "circle": "wait",
    "clock": "wait",
--- a/src/frameworks/customtk/constants/styling.js
+++ b/src/frameworks/customtk/constants/styling.js
@@ -20,5 +20,25 @@ export const ANCHOR = [
    "s",
    "e",
    "w",
-    "center"
+    "center",
-]
+    "ne", 
    "se", 
    "sw",
    "nw",
 ]
 export const GRID_STICKY = {
    N: "n",
    S: "s",
    E: "e",
    W: "w",
    WE: "we",
    NS: "ns",
    NW: "nw",
    NE: "ne",
    SW: "sw",
    SE: "se",
    NEWS: "news",
    NONE: "",
 }
--- a/src/frameworks/customtk/widgets/base.js
+++ b/src/frameworks/customtk/widgets/base.js
--- a/src/frameworks/customtk/widgets/frame.js
+++ b/src/frameworks/customtk/widgets/frame.js
@@ -1,3 +1,5 @@
 import { Layouts } from "../../../canvas/constants/layouts"
 import Tools from "../../../canvas/constants/tools"
 import Widget from "../../../canvas/widgets/base"
 import { CustomTkBase } from "./base"
@@ -17,7 +19,99 @@ class Frame extends CustomTkBase{
        this.state = {
            ...this.state,
            fitContent: {width: true, height: true},
-            widgetName: "Frame"
+            widgetName: "Frame",
            attrs: {
                ...this.state.attrs,
                padding: {
                    label: "padding",
                    padX: {
                        label: "Pad X",
                        tool: Tools.NUMBER_INPUT,
                        toolProps: {min: 0, max: 140},
                        value: null,
                        onChange: (value) => {
                            // this.setWidgetInnerStyle("paddingLeft", `${value}px`)
                            // this.setWidgetInnerStyle("paddingRight", `${value}px`)
                            // const widgetStyle = {
                            // }
                            this.setState((prevState) => ({
                                widgetInnerStyling: {
                                    ...prevState.widgetInnerStyling,
                                    paddingLeft: `${value}px`,
                                    paddingRight: `${value}px`
                                }
                            }))
                            this.setAttrValue("padding.padX", value)
                        }
                    },
                    padY: {
                        label: "Pad Y",
                        tool: Tools.NUMBER_INPUT,
                        toolProps: {min: 0, max: 140},
                        value: null,
                        onChange: (value) => {
                            this.setState((prevState) => ({
                                widgetInnerStyling: {
                                    ...prevState.widgetInnerStyling,
                                    paddingTop: `${value}px`,
                                    paddingBottom: `${value}px`
                                }
                            }))
                            // this.setState({
                            //     widgetInnerStyling: widgetStyle
                            // })
                            this.setAttrValue("padding.padY", value)
                        }
                    },
                },
                margin: {
                    label: "Margin",
                    marginX: {
                        label: "Margin X",
                        tool: Tools.NUMBER_INPUT,
                        toolProps: {min: 0, max: 140},
                        value: null,
                        onChange: (value) => {
                            this.updateState((prev) => ({
                                widgetOuterStyling: {
                                    ...prev.widgetOuterStyling,
                                    marginLeft: `${value}px`,
                                    marginRight: `${value}px`
                                },
                            }))
                            this.setAttrValue("margin.marginX", value)
                        }
                    },
                    marginY: {
                        label: "Margin Y",
                        tool: Tools.NUMBER_INPUT,
                        toolProps: {min: 0, max: 140},
                        value: null,
                        onChange: (value) => {
                            this.updateState((prev) => ({
                                widgetOuterStyling: {
                                    ...prev.widgetOuterStyling,
                                    marginTop: `${value}px`,
                                    marginBottom: `${value}px`
                                },
                            }))
                            this.setAttrValue("margin.marginY", value)
                        }
                    },
                },  
            }
        }
    }
@@ -27,6 +121,34 @@ class Frame extends CustomTkBase{
        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()
        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")
@@ -34,12 +156,26 @@ class Frame extends CustomTkBase{
        return [
                `${variableName} = ctk.CTkFrame(master=${parent})`,
                `${variableName}.configure(fg_color="${bg}")`,
-                `${variableName}.${this.getLayoutCode()}`
+                `${variableName}.${this.getLayoutCode()}`,
                ...this.getGridLayoutConfigurationCode(variableName)
            ]
    }
-    
+    getToolbarAttrs(){
        const {layout, gridConfig, gridWeights, ...toolBarAttrs} = super.getToolbarAttrs()
        // places layout at the end
        return ({
            id: this.__id,
            ...toolBarAttrs,
            padding: this.state.attrs.padding,
            margin: this.state.attrs.margin,
            layout,
            gridConfig,
            gridWeights
        })
    }
    renderContent(){
        // console.log("bounding rect: ", this.getBoundingRect())
@@ -49,7 +185,7 @@ class Frame extends CustomTkBase{
                <div className="tw-p-2 tw-w-full tw-h-full tw-content-start" 
                        ref={this.styleAreaRef}
                        style={this.getInnerRenderStyling()}>
-                    {this.props.children}
+                    {this.renderTkinterLayout()}
                </div>
            </div>
        )
--- a/src/frameworks/customtk/widgets/label.js
+++ b/src/frameworks/customtk/widgets/label.js
@@ -116,6 +116,22 @@ class Label extends CustomTkWidgetBase{
        })
    }
    getAnchorStyle = (anchor) => {
        const anchorStyles = {
            n: { justifyContent: 'center', alignItems: 'flex-start' },
            s: { justifyContent: 'center', alignItems: 'flex-end' },
            e: { justifyContent: 'flex-end', alignItems: 'center' },
            w: { justifyContent: 'flex-start', alignItems: 'center' },
            ne: { justifyContent: 'flex-end', alignItems: 'flex-start' },
            se: { justifyContent: 'flex-end', alignItems: 'flex-end' },
            nw: { justifyContent: 'flex-start', alignItems: 'flex-start' },
            sw: { justifyContent: 'flex-start', alignItems: 'flex-end' },
            center: { justifyContent: 'center', alignItems: 'center' }
        }
        return anchorStyles[anchor] || anchorStyles["w"];
    }
    renderContent(){
        const image = this.getAttrValue("imageUpload")
@@ -137,7 +153,10 @@ class Label extends CustomTkWidgetBase{
                            <img src={image.previewUrl} className="tw-bg-contain tw-w-full tw-h-full" />
                        )
                    }
-                    <div className="" style={{color: this.getAttrValue("styling.foregroundColor")}}>
+                    <div className={`tw-flex ${!image ? "tw-w-full tw-h-full" : ""}`} style={{
                                        color: this.getAttrValue("styling.foregroundColor"),
                                        ...this.getAnchorStyle(this.getAttrValue("styling.anchor"))
                                        }}>
                        {this.getAttrValue("labelWidget")}
                    </div>
                </div>
--- a/src/frameworks/customtk/widgets/mainWindow.js
+++ b/src/frameworks/customtk/widgets/mainWindow.js
@@ -1,6 +1,7 @@
 import Widget from "../../../canvas/widgets/base"
 import Tools from "../../../canvas/constants/tools"
 import { CustomTkBase } from "./base"
 import { getPythonAssetPath } from "../../utils/pythonFilePath"
 class MainWindow extends CustomTkBase{
@@ -8,6 +9,13 @@ class MainWindow extends CustomTkBase{
    static widgetType = "main_window"
    static displayName = "Main Window"
    static initialSize = {
        width: 700,
        height: 400
    }
    constructor(props) {
        super(props)
@@ -27,6 +35,13 @@ class MainWindow extends CustomTkBase{
                    toolProps: {placeholder: "Window title", maxLength: 40}, 
                    value: "Main Window",
                    onChange: (value) => this.setAttrValue("title", value)
                },
                logo: {
                    label: "Window Logo",
                    tool: Tools.UPLOADED_LIST, 
                    toolProps: {filterOptions: ["image/jpg", "image/jpeg", "image/png"]}, 
                    value: "",
                    onChange: (value) => this.setAttrValue("logo", value)
                }
            }
@@ -43,12 +58,48 @@ class MainWindow extends CustomTkBase{
    generateCode(variableName, parent){
        const backgroundColor = this.getAttrValue("styling.backgroundColor")
        const logo = this.getAttrValue("logo")
-        return [
+        const {width, height} = this.getSize()
-                `${variableName} = ctk.CTk()`,
+
-                `${variableName}.configure(fg_color="${backgroundColor}")`,
+        const code = [
-                `${variableName}.title("${this.getAttrValue("title")}")`
+            `${variableName} = ctk.CTk()`,
-            ]
+            `${variableName}.configure(fg_color="${backgroundColor}")`,
            `${variableName}.title("${this.getAttrValue("title")}")`, 
            `${variableName}.geometry("${width}x${height}")`,
            ...this.getGridLayoutConfigurationCode(variableName)
        ]
        if (logo?.name){
            // code.push(`\n`)
            code.push(`${variableName}_img = Image.open(${getPythonAssetPath(logo.name, "image")})`)
            code.push(`${variableName}_img = ImageTk.PhotoImage(${variableName}_img)`)
            code.push(`${variableName}.iconphoto(False, ${variableName}_img)`)
            // code.push("\n")
        }
        return code
    }
    getImports(){
        const imports = super.getImports()
        if (this.getAttrValue("logo"))
            imports.push("import os", "from PIL import Image, ImageTk", )
        return imports
    }
    getRequirements(){
        const requirements = super.getRequirements()
        if (this.getAttrValue("logo"))
            requirements.push("pillow")
        return requirements
    }
    getToolbarAttrs(){
@@ -58,8 +109,8 @@ class MainWindow extends CustomTkBase{
            id: this.__id,
            widgetName: toolBarAttrs.widgetName,
            title: this.state.attrs.title,
            logo: this.state.attrs.logo,
            size: toolBarAttrs.size,
            ...this.state.attrs,
        })
@@ -83,7 +134,7 @@ class MainWindow extends CustomTkBase{
                <div className="tw-p-2 tw-w-full tw-relative tw-h-full tw-overflow-hidden tw-content-start" 
                        ref={this.styleAreaRef}
                        style={this.state.widgetInnerStyling}>
-                    {this.props.children}
+                    {this.renderTkinterLayout()}
                </div>
            </div>
        )
--- a/src/frameworks/customtk/widgets/toplevel.js
+++ b/src/frameworks/customtk/widgets/toplevel.js
@@ -1,8 +1,10 @@
 import Widget from "../../../canvas/widgets/base"
 import Tools from "../../../canvas/constants/tools"
 import { getPythonAssetPath } from "../../utils/pythonFilePath"
 import { CustomTkBase } from "./base"
-class TopLevel extends Widget{
+class TopLevel extends CustomTkBase{
    static widgetType = "toplevel"
    static displayName = "Top Level"
@@ -27,6 +29,13 @@ class TopLevel extends Widget{
                    toolProps: {placeholder: "Window title", maxLength: 40}, 
                    value: "Top level",
                    onChange: (value) => this.setAttrValue("title", value)
                },
                logo: {
                    label: "Toplevel Logo",
                    tool: Tools.UPLOADED_LIST, 
                    toolProps: {filterOptions: ["image/jpg", "image/jpeg", "image/png"]}, 
                    value: "",
                    onChange: (value) => this.setAttrValue("logo", value)
                }
            }
@@ -42,11 +51,49 @@ class TopLevel extends Widget{
        const backgroundColor = this.getAttrValue("styling.backgroundColor")
-        return [
+        const logo = this.getAttrValue("logo")
-                `${variableName} = ctk.CTkToplevel(master=${parent})`,
+
-                `${variableName}.configure(fg_color="${backgroundColor}")`,
+        const {width, height} = this.getSize()
-                `${variableName}.title("${this.getAttrValue("title")}")`
+
-            ]
+        const code = [
            `${variableName} = ctk.CTkToplevel(master=${parent})`,
            `${variableName}.configure(fg_color="${backgroundColor}")`,
            `${variableName}.title("${this.getAttrValue("title")}")`,
            `${variableName}.geometry("${width}x${height}")`,
            ...this.getGridLayoutConfigurationCode(variableName)
        ]
        if (logo?.name){
            // code.push(`\n`)
            code.push(`${variableName}_img = Image.open(${getPythonAssetPath(logo.name, "image")})`)
            code.push(`${variableName}_img = ImageTk.PhotoImage(${variableName}_img)`)
            code.push(`${variableName}.iconphoto(False, ${variableName}_img)`)
            // code.push("\n")
        }
        return code
    }
    getImports(){
        const imports = super.getImports()
        if (this.getAttrValue("logo"))
            imports.push("import os", "from PIL import Image, ImageTk", )
        return imports
    }
    getRequirements(){
        const requirements = super.getRequirements()
        if (this.getAttrValue("logo"))
            requirements.push("pillow")
        return requirements
    }
    getToolbarAttrs(){
@@ -55,8 +102,8 @@ class TopLevel extends Widget{
        return ({
            widgetName: toolBarAttrs.widgetName,
            title: this.state.attrs.title,
            logo: this.state.attrs.logo,
            size: toolBarAttrs.size,
            ...this.state.attrs,
        })
@@ -80,7 +127,7 @@ class TopLevel extends Widget{
                <div className="tw-p-2 tw-w-full tw-h-full tw-content-start" 
                    ref={this.styleAreaRef}
                    style={this.state.widgetInnerStyling}>
-                    {this.props.children}
+                    {this.renderTkinterLayout()}
                </div>
            </div>
        )
--- a/src/frameworks/tkinter/constants/cursor.js
+++ b/src/frameworks/tkinter/constants/cursor.js
@@ -2,6 +2,7 @@
 export const Tkinter_TO_WEB_CURSOR_MAPPING = {
    "": "",
    "arrow": "default",
    "circle": "wait",
    "clock": "wait",
--- a/src/frameworks/tkinter/engine/code.js
+++ b/src/frameworks/tkinter/engine/code.js
@@ -4,6 +4,8 @@ import MainWindow from "../widgets/mainWindow"
 import { message } from "antd"
 import TopLevel from "../widgets/toplevel"
 const pythonFiles = require.context("../pythonWidgets", false, /\.py$/)
 // FIXME: if the toplevel comes first, before the MainWindow in widgetlist the root may become null
 // Recursive function to generate the code list, imports, requirements, and track mainVariable
@@ -13,6 +15,8 @@ function generateTkinterCodeList(widgetList = [], widgetRefs = [], parentVariabl
    let requirements = new Set([])
    let code = []
    let customPythonWidgets = new Set([])
    for (let widget of widgetList) {
        const widgetRef = widgetRefs[widget.id].current
        let varName = widgetRef.getVariableName()
@@ -20,6 +24,7 @@ function generateTkinterCodeList(widgetList = [], widgetRefs = [], parentVariabl
        // Add imports and requirements to sets
        widgetRef.getImports().forEach(importItem => imports.add(importItem))
        widgetRef.getRequirements().forEach(requirementItem => requirements.add(requirementItem))
        widgetRef.getRequiredCustomPyFiles().forEach(customFile => customPythonWidgets.add(customFile))
        // Set main variable if the widget is MainWindow
        if (widget.widgetType === MainWindow) {
@@ -68,6 +73,8 @@ function generateTkinterCodeList(widgetList = [], widgetRefs = [], parentVariabl
            // Merge child imports, requirements, and code
            imports = new Set([...imports, ...childResult.imports])
            requirements = new Set([...requirements, ...childResult.requirements])
            customPythonWidgets = new Set([...customPythonWidgets, ...childResult.customPythonWidgets])
            code.push(...childResult.code)
            mainVariable = childResult.mainVariable || mainVariable // the main variable is the main window variable
@@ -78,6 +85,7 @@ function generateTkinterCodeList(widgetList = [], widgetRefs = [], parentVariabl
        imports: Array.from(imports),
        code: code,
        requirements: Array.from(requirements),
        customPythonWidgets: Array.from(customPythonWidgets),
        mainVariable
    }
 }
@@ -113,9 +121,13 @@ async function generateTkinterCode(projectName, widgetList=[], widgetRefs=[], as
    const generatedObject = generateTkinterCodeList(filteredWidgetList, widgetRefs.current, "", "")
-    const {code: codeLines, imports, requirements, mainVariable} = generatedObject
+    const {code: codeLines, imports, requirements, mainVariable, customPythonWidgets} = generatedObject
    console.log("custom python widgets: ", customPythonWidgets)
    // TODO: avoid adding \n inside the list instead rewrite using code.join("\n")
    // TODO: import customWidgets
    const code = [
        "# This code is generated by PyUIbuilder: https://pyuibuilder.com",
        "\n\n",
@@ -147,6 +159,32 @@ async function generateTkinterCode(projectName, widgetList=[], widgetRefs=[], as
        })
    }
    for (let customWidget of customPythonWidgets){
        let [fileName, extension] = customWidget.split(".")
        if (!extension){
            fileName = `${fileName}.py`
        }
        const fileContent = pythonFiles(`./${fileName}`).default
        createFileList.push({
            fileData: new Blob([fileContent], { type: "text/plain" }),
            fileName: fileName,
            folder: "customWidgets"
        })
    }
    if (customPythonWidgets.length > 0){
        createFileList.push({
            fileData: new Blob([''], { type: "text/plain" }),
            fileName: '__init__.py',
            folder: "customWidgets"
        })
    }
    for (let asset of assetFiles){
        if (asset.fileType === "image"){
--- a/src/frameworks/tkinter/pythonWidgets/imageLabel.py
+++ b/src/frameworks/tkinter/pythonWidgets/imageLabel.py
@@ -0,0 +1,92 @@
 # Author: Paul: https://github.com/PaulleDemon
 # Made using PyUibuilder: https://pyuibuilder.com
 # MIT License - keep the copy of this license
 # By default Label grows to fit the image, which isn't ideal for many use cases (image should grow to fit/cover the image instead)
 import tkinter as tk
 from PIL import Image, ImageTk
 class ImageLabel(tk.Label):
    def __init__(self, master, image_path=None, mode="cover", width=100, height=100, *args, **kwargs):
        """
        mode:
        - "fit" -> Keeps aspect ratio, fits inside label
        - "cover" -> Covers label fully, cropping excess
        """
        super().__init__(master, width=width, height=height, *args, **kwargs) 
        self.parent = master
        self.image_path = image_path
        self.mode = mode
        self.original_image = None
        self.photo = None
        self.resize_job = None  # Debounce job reference
        if mode not in ['fit', 'cover']:
            raise Exception("Mode can only be fit or cover.")
        if image_path:
            try:
                self.original_image = Image.open(image_path)
                self.photo = ImageTk.PhotoImage(self.original_image)
                self.config(image=self.photo)
                self.force_resize() 
            except Exception as e:
                print(f"Error loading image: {e}")
        self.after(100, self.init_events)
    def init_events(self):
        self.parent.bind("<Configure>", self.on_resize)
    def on_resize(self, event=None):
        """Debounce resizing to prevent rapid execution."""
        if self.resize_job:
            self.after_cancel(self.resize_job)
        self.resize_job = self.after(1, self.force_resize)  # Debounce
    def force_resize(self):
        """Resize image using actual widget size."""
        if self.original_image is None:
            return  # Do nothing if no image is loaded
        width = self.winfo_width()  
        height = self.winfo_height()  
        if width < 5 or height < 5:
            return
        aspect_ratio = self.original_image.width / self.original_image.height
        if self.mode == "fit":
            if width / height > aspect_ratio:
                new_width = int(height * aspect_ratio)
                new_height = height
            else:
                new_width = width
                new_height = int(width / aspect_ratio)
            resized = self.original_image.resize((new_width, new_height), Image.LANCZOS)
        elif self.mode == "cover":
            if width / height > aspect_ratio:
                new_width = width
                new_height = int(width / aspect_ratio)
            else:
                new_width = int(height * aspect_ratio)
                new_height = height
            resized = self.original_image.resize((new_width, new_height), Image.LANCZOS)
            # Crop excess
            left = (new_width - width) // 2
            top = (new_height - height) // 2
            right = left + width
            bottom = top + height
            resized = resized.crop((left, top, right, bottom))
        # Update image
        self.photo = ImageTk.PhotoImage(resized)
        self.config(image=self.photo)
--- a/src/frameworks/tkinter/pythonWidgets/readme.md
+++ b/src/frameworks/tkinter/pythonWidgets/readme.md
@@ -0,0 +1 @@
 # contains python coded custom widgets 
--- a/src/frameworks/tkinter/widgets/base.js
+++ b/src/frameworks/tkinter/widgets/base.js
@@ -59,13 +59,34 @@ export class TkinterBase extends Widget {
        const absolutePositioning = this.getAttrValue("positioning")  
        let layoutManager = `pack()`
        const marginX = this.getAttrValue("margin.marginX")
        const marginY = this.getAttrValue("margin.marginY")
        const paddingX = this.getAttrValue("padding.padX")
        const paddingY = this.getAttrValue("padding.padY")
        let config = {}
        if (marginX){
            config["padx"] = marginX
        }
        if (marginY){
            config["pady"] = marginY
        }
        if (paddingX){
            config["ipadx"] = paddingX
        }
        if (paddingY){
            config["ipady"] = paddingY
        }
        if (parentLayout === Layouts.PLACE || absolutePositioning){
-            const config = {
+            config['x'] = Math.trunc(this.state.pos.x)
-                x: Math.trunc(this.state.pos.x),
+            config['y'] = Math.trunc(this.state.pos.y)
                y: Math.trunc(this.state.pos.y),
            }
            config["width"] = Math.trunc(this.state.size.width)
            config["height"] = Math.trunc(this.state.size.height)
@@ -85,14 +106,6 @@ export class TkinterBase extends Widget {
            const packSide = this.getAttrValue("flexManager.side")
            const marginX = this.getAttrValue("margin.marginX")
            const marginY = this.getAttrValue("margin.marginY")
            const paddingX = this.getAttrValue("padding.padX")
            const paddingY = this.getAttrValue("padding.padY")
            const config = {}
            if (packSide === "" || packSide === "top"){
                config['side'] = `tk.TOP`
@@ -114,21 +127,6 @@ export class TkinterBase extends Widget {
            //     config["pady"] = gap
            // }
            if (marginX){
                config["padx"] = marginX
            }
            if (marginY){
                config["pady"] = marginY
            }
            if (paddingX){
                config["ipadx"] = paddingX
            }
            if (paddingY){
                config["ipady"] = paddingY
            }
            // if (align === "start"){
            //     config["anchor"] = "'nw'"
@@ -168,10 +166,8 @@ export class TkinterBase extends Widget {
            const sticky = this.getAttrValue("gridManager.sticky")
-            const config = {
+            config['row'] = row - 1 // unlike css grid tkinter grid starts from 0
-                row: row-1, // unlike css grid tkinter grid starts from 0
+            config['column'] = column - 1 // unlike css grid tkinter grid starts from 0 
                column: column-1, // unlike css grid tkinter grid starts from 0 
            }
            if (rowSpan > 1){
                config['rowspan'] = rowSpan
@@ -561,7 +557,8 @@ export class TkinterBase extends Widget {
        const { side = "top", expand = false, anchor } = widgetRef.getPackAttrs() || {};
        // console.log("rerendering:", side, expand);
-    
+
        const directionMap = {
            top: "column",
            bottom: "column-reverse",
@@ -570,17 +567,29 @@ export class TkinterBase extends Widget {
        }
        const currentWidgetDirection = directionMap[side] || "column"; // Default to "column"
        const isSameSide = lastSide === side;
        const isVertical = ["top", "bottom"].includes(side);
        let expandValue = expand ? (isSameSide ? previousExpandValue : widgets.length - index) : 1;
-        if ((expand && previousExpandValue === 0) || (expand && expandValue === 0)){
+        const isSameSide = lastSide === side
        const isOppositeSide = ((lastSide === "top" && side === "bottom") || (lastSide === "left" && side === "right"))
        const isDiagonal = (!isSameSide && !isOppositeSide && lastSide !== "") // bottom and right, top and left
        let expandValue = expand ? ((isSameSide || isOppositeSide) ? previousExpandValue : (widgets.length - index) + 1) : (previousExpandValue > 0) ? 0 : 1
        if (expand && expandValue === 0){
            expandValue = 1 // if there is expand it should expand
        }
-        if (expand && !isSameSide) previousExpandValue = expandValue;
+        if (expand && isDiagonal){
-    
+            expandValue = 1
        }
        // TODO: if the child widget as fillx or y use flex grow
        if ((expand && !isSameSide) || (expand && previousExpandValue === 0)){
             previousExpandValue = expandValue;
        }
        lastSide = side; // Update last side for recursion
        const anchorStyles = {
@@ -598,7 +607,10 @@ export class TkinterBase extends Widget {
        const stretchClass = isVertical ? "tw-flex-grow" : "tw-h-full"; // Allow only horizontal growth for top/bottom
-    
+        // TODO: if previous expand value is greater than 0 and current doesn't have expand then it should be 0
        // const fill = this.getAttrValue("flexManager.fillX") || this.getAttrValue("flexManager.fillY")
        if (isSameSide) {
            return (
                <>
@@ -627,11 +639,12 @@ export class TkinterBase extends Widget {
        return (
            <div
                data-pack-container={side}
-                className={`tw-flex ${isVertical ? "!tw-h-full" : "!tw-w-full"}`} 
+                className={`tw-flex tw-flex-auto`} 
                // className={`tw-flex ${isVertical ? "!tw-h-full" : "!tw-w-full"}`} 
                style={{
                    display: "flex",
                    flexDirection: currentWidgetDirection,
-                    flexGrow: expand ? expandValue : 1, //((widgets.length - 1) === index) ? 1 : 0, // last index will always have flex-grow 1
+                    flexGrow: expandValue, //((widgets.length - 1) === index) ? 1 : 0, // last index will always have flex-grow 1
                    flexShrink: expand ? 0 : 1,
                    flexBasis: "auto",
                    minWidth: isVertical ? "0" : "auto",
@@ -659,7 +672,7 @@ export class TkinterBase extends Widget {
                {this.renderPackWidgetsRecursively(widgets, index + 1, side, previousExpandValue)}
            </div>
        );
-    };
+    }
@@ -687,9 +700,13 @@ export class TkinterBase extends Widget {
    setLayout(value) {
        const { layout, direction, grid = { rows: 1, cols: 1 }, gap = 10, align } = value
-
+        const gridRow = this.getAttrValue("gridConfig.noOfRows") || 3 // suppose its loaded using this.load, we need this
        const gridCol = this.getAttrValue("gridConfig.noOfCols") || 3
        if (layout === Layouts.GRID){
            const rowWeight = this.getAttrValue("gridWeights.rowWeights") || undefined // suppose its loaded via this.load
            const colWeight = this.getAttrValue("gridWeights.colWeights") || undefined // suppose its loaded via this.load
            const {...restAttrs} =  this.state.attrs
@@ -703,7 +720,7 @@ export class TkinterBase extends Widget {
                            label: "No of rows",
                            tool: Tools.NUMBER_INPUT, 
                            toolProps: { placeholder: "no of rows", max: 1000, min: 1 },
-                            value: 3,
+                            value: gridRow,
                            onChange: (value) => {
                                this.setAttrValue("gridConfig.noOfRows", value)
@@ -729,7 +746,7 @@ export class TkinterBase extends Widget {
                            label: "No of cols",
                            tool: Tools.NUMBER_INPUT, 
                            toolProps: { placeholder: "no of cols", max: 1000, min: 1 },
-                            value: 3,
+                            value: gridCol,
                            onChange: (value) => {
                                this.setAttrValue("gridConfig.noOfCols", value)
@@ -753,7 +770,7 @@ export class TkinterBase extends Widget {
                                        // placeholder: "weight", 
                                        // defaultWeightMapping: this.getAttrValue("gridWeights.rowWeights"),
                                     },
-                            value: undefined,
+                            value: rowWeight,
                            Component: DynamicGridWeightInput, 
                            onChange: (value) => {
@@ -781,7 +798,7 @@ export class TkinterBase extends Widget {
                                        // placeholder: "weight", 
                                        // defaultWeightMapping: {0: {weight: 0, gridNo: 0}}
                                     },
-                            value: undefined,
+                            value: colWeight,
                            Component: DynamicGridWeightInput, 
                            onChange: (value) => {
@@ -812,8 +829,6 @@ export class TkinterBase extends Widget {
        }else if (layout === Layouts.FLEX){
            const {gridConfig, gridWeights, ...restAttrs} =  this.state.attrs
            console.log("Flex: ", restAttrs)
            this.updateState((prevState) => ({attrs: {...restAttrs}}))
        }
@@ -827,8 +842,8 @@ export class TkinterBase extends Widget {
                flexDirection: "column",
                // flexDirection: direction,
                gap: `${gap}px`,
-                gridTemplateColumns: "repeat(3, max-content)",
+                gridTemplateColumns: `repeat(${gridRow}, max-content)`,
-                gridTemplateRows: "repeat(3, max-content)",
+                gridTemplateRows: `repeat(${gridCol}, max-content)`,
                // gridTemplateColumns: "repeat(auto-fill, minmax(100px, auto))",
                // gridTemplateRows: "repeat(auto-fill, minmax(100px, auto))",  
            }
@@ -842,18 +857,6 @@ export class TkinterBase extends Widget {
        const {layout: parentLayout, direction, gap} = this.getParentLayout() || {}
        // 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
        //     if (fillX || fillY){
        //         width = "100%"
        //         height = "100%"
        //     }
        // }
        const styling = {
            ...this.state.widgetInnerStyling,
@@ -900,6 +903,19 @@ export class TkinterBase extends Widget {
    }
    getToolbarAttrs(){
        const {layout, gridConfig, gridWeights, ...toolBarAttrs} = super.getToolbarAttrs()
        // places layout at the end
        return ({
            id: this.__id,
            ...toolBarAttrs,
            layout,
            gridConfig,
            gridWeights
        })
    }
    serialize(){
        return ({
            ...super.serialize(),
@@ -950,8 +966,10 @@ export class TkinterBase extends Widget {
            ...layoutUpdates,
            pos
        }
        const {layout} = attrs
        this.setState(newData,  () => {
            let layoutAttrs = this.setParentLayout(parentLayout).attrs || {}
@@ -977,15 +995,21 @@ export class TkinterBase extends Widget {
            if (newAttrs?.styling?.backgroundColor){
-                // TODO: find a better way to apply innerStyles
+                // TODO: find a better way to apply innerStyles (we may not need this anymore)
                this.setWidgetInnerStyle("backgroundColor", newAttrs.styling.backgroundColor.value)
            }
            this.updateState({ attrs: newAttrs }, callback)
            // FIXME: when changing layouts all the widgets are being selected
            if (selected){
                this.select()
-            } 
+            }
            if (layout){
                this.setLayout(layout)
            }
        })  
@@ -1201,23 +1225,23 @@ export class TkinterWidgetBase extends TkinterBase{
        if (this.getAttrValue("cursor"))
            config["cursor"] = `"${this.getAttrValue("cursor")}"`
-        if (this.getAttrValue("padding.padX")){
+        // if (this.getAttrValue("padding.padX")){
-            // inner padding
+        //     // inner padding
-            config["ipadx"] = this.getAttrValue("padding.padX")
+        //     config["ipadx"] = this.getAttrValue("padding.padX")
-        }
+        // }
-        if (this.getAttrValue("padding.padY")){
+        // if (this.getAttrValue("padding.padY")){
-            config["ipady"] = this.getAttrValue("padding.padY")
+        //     config["ipady"] = this.getAttrValue("padding.padY")
-        }
+        // }
-        if (this.getAttrValue("margin.marginX")){
+        // if (this.getAttrValue("margin.marginX")){
-            config["padx"] = this.getAttrValue("margin.marginX")
+        //     config["padx"] = this.getAttrValue("margin.marginX")
-        }
+        // }
-        if (this.getAttrValue("margin.marginY")){
+        // if (this.getAttrValue("margin.marginY")){
-            config["pady"] = this.getAttrValue("margin.marginY")
+        //     config["pady"] = this.getAttrValue("margin.marginY")
-        }
+        // }
        // FIXME: add width and height, the scales may not be correct as the width and height are based on characters in label and grid not pixels
        // if (!this.state.fitContent.width){
--- a/src/frameworks/tkinter/widgets/frame.js
+++ b/src/frameworks/tkinter/widgets/frame.js
@@ -161,7 +161,20 @@ class Frame extends TkinterBase{
            ]
    }
-    
+    getToolbarAttrs(){
        const {layout, gridConfig, gridWeights, ...toolBarAttrs} = super.getToolbarAttrs()
        // places layout at the end
        return ({
            id: this.__id,
            ...toolBarAttrs,
            padding: this.state.attrs.padding,
            margin: this.state.attrs.margin,
            layout,
            gridConfig,
            gridWeights
        })
    }    
    renderContent(){
        // console.log("bounding rect: ", this.getBoundingRect())
--- a/src/frameworks/tkinter/widgets/label.js
+++ b/src/frameworks/tkinter/widgets/label.js
@@ -1,3 +1,5 @@
 import { useEffect, useState } from "react"
 import { Layouts } from "../../../canvas/constants/layouts"
 import Tools from "../../../canvas/constants/tools"
 import { convertObjectToKeyValueString } from "../../../utils/common"
 import { getPythonAssetPath } from "../../utils/pythonFilePath"
@@ -10,6 +12,7 @@ class Label extends TkinterWidgetBase{
    static widgetType = "label"
    static displayName = "Label"
    // static requiredCustomPyFiles = ["imageLabel"]
    constructor(props) {
        super(props)
@@ -55,6 +58,34 @@ class Label extends TkinterWidgetBase{
                    value: "",
                    onChange: (value) => this.setAttrValue("imageUpload", value)
                },
                imageSize: {
                    label: "Image size",
                    display: "horizontal",
                    // width: {
                    //     label: "Width",
                    //     tool: Tools.NUMBER_INPUT, // the tool to display, can be either HTML ELement or a constant string
                    //     toolProps: { placeholder: "width", max: 3000, min: 1 },
                    //     value: 150,
                    //     onChange: (value) => this.setWidgetSize(value, null)
                    // },
                    // height: {
                    //     label: "Height",
                    //     tool: Tools.NUMBER_INPUT,
                    //     toolProps: { placeholder: "height", max: 3000, min: 1  },
                    //     value: 150,
                    //     onChange: (value) => this.setWidgetSize(null, value)
                    // },
                    mode: {
                        label: "Image mode",
                        tool: Tools.SELECT_DROPDOWN,
                        options: ["fit", "cover"].map((val) => ({value: val, label: val})),
                        value: "cover",
                        onChange: (value) => {
                            this.setAttrValue("imageSize.mode", value)
                        }
                    }
                },
            }
        }
@@ -73,11 +104,20 @@ class Label extends TkinterWidgetBase{
        const imports = super.getImports()
        if (this.getAttrValue("imageUpload"))
-            imports.push("import os", "from PIL import Image, ImageTk", )
+            imports.push("import os", "from PIL import Image, ImageTk", "from customWidgets.imageLabel import ImageLabel")
        return imports
    }
    getRequiredCustomPyFiles(){
        const requiredCustomFiles = super.getRequiredCustomPyFiles()
        if (this.getAttrValue("imageUpload"))
            requiredCustomFiles.push("imageLabel")
        return requiredCustomFiles
    }
    getRequirements(){
        const requirements = super.getRequirements()
@@ -92,10 +132,28 @@ class Label extends TkinterWidgetBase{
        const config = super.getConfigCode()
        const anchor = this.getAttrValue("styling.anchor")
        const fitWidth = this.state.fitContent.width
        const fitHeight = this.state.fitContent.height
        const {width, height} = this.getSize()
        const {layout} = this.getParentLayout()
        if (anchor)
            config['anchor'] = `"${anchor}"`
        // LABEL width and height are not pixel based instead its character based
        // if (layout !== Layouts.PLACE){
        //     if (!fitWidth){
        //         config['width'] = width
        //     }
        //     if (!fitHeight){
        //         config['height'] = height
        //     }
        // }
        return config
    }
@@ -112,10 +170,10 @@ class Label extends TkinterWidgetBase{
        const code = []
        if (image?.name){
-            code.push(`${variableName}_img = Image.open(${getPythonAssetPath(image.name, "image")})`)
+            // code.push(`${variableName}_img = Image.open(${getPythonAssetPath(image.name, "image")})`)
-            code.push(`${variableName}_img = ImageTk.PhotoImage(${variableName}_img)`)
+            // code.push(`${variableName}_img = ImageTk.PhotoImage(${variableName}_img)`)
            // code.push("\n")
-            labelInitialization = `${variableName} = tk.Label(master=${parent}, image=${variableName}_img, text="${labelText}", compound=tk.TOP)`
+            labelInitialization = `${variableName} = ImageLabel(master=${parent}, image_path=${getPythonAssetPath(image.name, "image")}, text="${labelText}", compound=tk.TOP, mode="${this.getAttrValue("imageSize.mode")}")`
        }
        // code.push("\n")
@@ -155,36 +213,53 @@ class Label extends TkinterWidgetBase{
            center: { justifyContent: 'center', alignItems: 'center' }
        }
-        return anchorStyles[anchor] || anchorStyles["w"];
+        return anchorStyles[anchor] || anchorStyles["center"];
    }
    renderContent(){
-
+        //FIXME: label image causing issues
        const image = this.getAttrValue("imageUpload")
-        
+        const imageMode = this.getAttrValue("imageSize.mode") || "cover"
        const imgClassName = imageMode === "fit" ? "tw-object-contain" : (imageMode === "cover" ? "tw-object-cover" : "")
        return (
-            <div className="tw-w-flex tw-flex-col tw-w-full tw-content-start tw-h-full tw-rounded-md tw-overflow-hidden"
+            <div className="tw-flex tw-flex-col tw-w-full tw-relative tw-content-start tw-h-full tw-rounded-md tw-overflow-hidden"
-                    style={{
+                    // style={{
-                        flexGrow: 1, // Ensure the content grows to fill the parent
+                    //     flexGrow: 1, // Ensure the content grows to fill the parent
-                        minWidth: '100%', // Force the width to 100% of the parent
+                    //     minWidth: '100%', // Force the width to 100% of the parent
-                        minHeight: '100%', // Force the height to 100% of the parent
+                    //     minHeight: '100%', // Force the height to 100% of the parent
-                    }}
+                    // }}
                >
-                <div className="tw-p-2 tw-w-full tw-h-full tw-flex tw-place-content-center tw-place-items-center " 
+                <div className="tw-p-2 tw-w-full tw-h-full tw-overflow-hidden tw-flex tw-place-content-center tw-place-items-center" 
                        ref={this.styleAreaRef}
                        style={this.getInnerRenderStyling()}>
-                    {/* {this.props.children} */}
+                        {/* {this.props.children} */}
-                    {
+                        {
-                        image && (
+                            image ? (
-                            <img src={image.previewUrl} className="tw-bg-contain tw-w-full tw-h-full" />
+                                <div className="tw-relative tw-w-full tw-h-full tw-overflow-hidden">
-                        )
+                                    <img src={image.previewUrl}
-                    }
+                                        className={`${imgClassName}`}
-                    <div className={`tw-flex ${!image ? "tw-w-full tw-h-full" : ""}`} style={{
+                                        alt={this.getAttrValue("widgetName")}
-                            color: this.getAttrValue("styling.foregroundColor"),
+                                        style={{
-                            ...this.getAnchorStyle(this.getAttrValue("styling.anchor"))
+                                            width: "100%",
-                        }}>
+                                            height: "100%",
-                        {this.getAttrValue("labelWidget")}
+                                            position: "absolute",
-                    </div>
+                                            top: '0px',
                                            left: '0px',
                                        }}
                                        // className="tw-object-cover"
                                        />
                                </div> 
                            ) : null
                        }
                        <div className={`tw-flex ${!image ? "tw-w-full tw-h-full" : ""}`} style={{
                                color: this.getAttrValue("styling.foregroundColor"),
                                ...this.getAnchorStyle(this.getAttrValue("styling.anchor"))
                            }}>
                            {this.getAttrValue("labelWidget")}
                        </div>
                </div>
            </div>
        )
@@ -193,4 +268,44 @@ class Label extends TkinterWidgetBase{
 }
 function LabelImage({imageSrc, alt, styleAreaRef}){
    const [size, setSize] = useState({
        width: 0, 
        height: 0
    })
    useEffect(() => {
        if (!styleAreaRef.current) return;
        // Function to update size
        const updateSize = () => {
            const boundingBox = styleAreaRef.current.getBoundingClientRect();
            setSize({ width: boundingBox.width, height: boundingBox.height });
        };
        // Initial size update
        updateSize();
        // Observe size changes
        const resizeObserver = new ResizeObserver(updateSize);
        resizeObserver.observe(styleAreaRef.current);
        return () => resizeObserver.disconnect();
    }, [styleAreaRef])
    return (
        <img src={imageSrc} alt={alt}  className="tw-object-cover"
            style={{
                position: "absolute",
                top: '0px',
                left: '0px',
                width: "100%", // Prevent overflow
                height: "100%", // Prevent overflow
            }}
            />
    )
 }
 export default Label
--- a/src/index.js
+++ b/src/index.js
@@ -14,6 +14,9 @@ import "./styles/index.css";
 import { FileUploadProvider } from "./contexts/fileUploadContext";
 window.React = React
 const originalSetItem = localStorage.setItem;
 // triggers itemsChaned event whenever the item in localstorage is chanegd.
 localStorage.setItem = function (key, value) {
--- a/src/sidebar/sidebar.js
+++ b/src/sidebar/sidebar.js
@@ -4,7 +4,7 @@
 */
 import { useEffect, useRef, useMemo, useState } from "react";
-import { BookOutlined, CloseCircleFilled, CrownFilled, GithubFilled, ShareAltOutlined } from "@ant-design/icons";
+import { BookOutlined, CloseCircleFilled, CrownFilled, DiscordFilled, GithubFilled, ShareAltOutlined } from "@ant-design/icons";
 import KO_FI from "../assets/logo/ko-fi.png"
 import Premium from "./utils/premium";
@@ -88,6 +88,11 @@ function Sidebar({tabs}){
                }
                <div className="tw-flex tw-flex-col tw-place-content-items tw-place-items-center tw-gap-3 tw-mt-auto">
                    <a href="https://discord.gg/dHXjrrCA7G" target="_blank"
                        title="discord invite"
                        rel="noopener noreferrer" className="tw-text-3xl tw-cursor-pointer tw-text-[#5562EA]">
                        <DiscordFilled />
                    </a>
                    <Premium className="tw-text-2xl tw-bg-purple-700 tw-text-center 
                                    tw-w-[35px] tw-h-[35px] tw-rounded-md 
                                    tw-cursor-pointer tw-text-white 
@@ -107,9 +112,9 @@ function Sidebar({tabs}){
                        rel="noopener noreferrer" className="tw-text-2xl tw-cursor-pointer tw-text-black">
                        <GithubFilled />
                    </a>
-                    <a href="https://ko-fi.com/artpaul" className="tw-cursor-pointer ">
+                    {/* <a href="https://ko-fi.com/artpaul" className="tw-cursor-pointer ">
                        <img src={KO_FI} alt="ko-fi" className="tw-w-[30px] tw-h-[30px]"/>
-                    </a>
+                    </a> */}
                </div>
            </div>
--- a/src/sidebar/utils/premium.js
+++ b/src/sidebar/utils/premium.js
@@ -38,11 +38,7 @@ function Premium({ children, className = "" }) {
                    If you find this tool useful and want to fund and support it's development, consider buying a <b>one time license</b>.
                    <br />
                    <br />
-                    I am working on PYUI builder full time to help you easily build GUI's in python. However as a solo-dev, its super hard 
+                    By pre-ordering license, you get discounted price, advance features, priority support, early access, upcoming features, and &nbsp;
                    to keep working on it without enough funding. 
                    <br />
                    <br />
                    By buying pre-order license, I get to complete this faster and you get discounted price, advance features, priority support, early access, upcoming features, and &nbsp;
                    <a
                        href="https://github.com/PaulleDemon/PyUIBuilder/blob/main/roadmap.md"
                        target="_blank"
@@ -51,6 +47,10 @@ function Premium({ children, className = "" }) {
                    >
                        more.
                    </a> 
                    <br />
                    <br />
                    Premium features will start rolling out phase wise from mid of April, after which there would be a price increase.
                </div>
@@ -145,7 +145,7 @@ function Premium({ children, className = "" }) {
                                Support open-source development 🚀. Plus, get added benefits.
                            </p>
                            <hr />
-                            <ul className="tw-mt-4 tw-flex tw-flex-col tw-gap-3 tw-text-xl tw-text-gray-600">
+                            <ul className="tw-mt-4 tw-flex tw-flex-col tw-gap-3 tw-text-xl tw-text-black">
                                <li className="tw-flex tw-place-items-center tw-gap-2">
                                    <i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
                                    <span>Access to web-based editor</span>
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -0,0 +1,110 @@
 const webpack = require('webpack');
 const path = require("path");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 const dotenv = require('dotenv');
 const fs = require('fs');
 const isProduction = process.env.NODE_ENV === "production";
 // Load .env-cmdrc.json based on NODE_ENV
 const envFile = `.env-cmdrc.json`;
 const envConfig = JSON.parse(fs.readFileSync(envFile, 'utf8'))[process.env.NODE_ENV] || {};
 // Convert JSON to a format Webpack understands
 const envKeys = Object.keys(envConfig).reduce((prev, next) => {
  prev[`process.env.${next}`] = JSON.stringify(envConfig[next]);
  return prev;
 }, {});
 module.exports = {
  mode: isProduction ? "production" : "development",
  watch: !isProduction,
  watchOptions: {
    ignored: /node_modules/,
  },
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: isProduction ? "js/[name].[contenthash].js" : "js/[name].js",
    publicPath: "/",
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader",  "postcss-loader",],
      },
      {
        test: /\.py$/,
        use: "raw-loader", // Load Python files as raw text
      },
      {
        test: /\.svg$/,
        use: ["@svgr/webpack"], // Enables importing SVGs as React components
      },
      {
        test: /\.(png|jpe?g|gif|ico)$/,
        type: "asset/resource", // Handles image files
      },
    ],
  },
  plugins: [
    new webpack.DefinePlugin(envKeys),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      minify: isProduction,
      inject: true,
      templateParameters: envConfig
    }),
    (isProduction ? new MiniCssExtractPlugin({ filename: 'styles.[contenthash].css' }) : new MiniCssExtractPlugin()),
    new CopyWebpackPlugin({
        patterns: [
          {
            from: path.resolve(__dirname, "src/assets"), 
            to: "assets", // Copies to `dist/assets`
            noErrorOnMissing: true, // Prevents errors if the folder is missing
          },
          { from: 'public', to: '', noErrorOnMissing: true, globOptions: { ignore: ['**/index.html'] }}, // Copies everything else from public to dist
        ],
    }),
    new webpack.EnvironmentPlugin({
      REACT_APP_ANALYTICS_SCRIPT_ID: process.env.REACT_APP_ANALYTICS_SCRIPT_ID || '', // Default empty value
      API_URL: 'https://default.api.com'
    })
  ],
  optimization: isProduction
    ? {
        minimize: true,
        minimizer: [new CssMinimizerPlugin()],
      }
    : {},
  devServer: {
    static: path.join(__dirname, "public"),
    port: 3000,
    hot: true,
    historyApiFallback: true,
  },
 };
Author	SHA1	Message	Date
paul	fff10097fd	updated after time	2025-04-01 20:47:25 +05:30
paul	d10928bb5a	fixed padx/y and ipadx/y	2025-04-01 20:42:14 +05:30
paul	0243b3b9e8	added license comment	2025-04-01 19:00:20 +05:30
paul	66d7dfc45f	added webpack and fixed ImageLabel	2025-04-01 18:50:14 +05:30
paul	a38cd90c16	working on label image resize fix	2025-03-31 20:38:25 +05:30
paul	bdd3bab3a5	corrected grid weight and grid config position in toolbar	2025-03-30 05:46:03 +05:30
paul	53aaa8a670	fix: fixed grid row col on load	2025-03-30 05:23:18 +05:30
paul	64631caaaa	fix: fixed setState warning	2025-03-29 21:03:02 +05:30
paul	8e1f042350	fix: fixed parentLayout taking place on changing layout	2025-03-29 21:00:45 +05:30
paul	128a7c49b9	updated readme	2025-03-28 18:48:41 +05:30
paul	e0fa421459	Merge branch 'customtk-fixes'	2025-03-28 17:14:51 +05:30
paul	0438480620	fixes: corrected tk to ctk in customtk	2025-03-28 17:14:03 +05:30
Art/Paul	d64f87847c	Merge pull request #12 from PaulleDemon/customtk-fixes fixing customtk layout	2025-03-28 17:13:21 +05:30
paul	c6fd4a8275	fixing customtk layout	2025-03-28 15:56:17 +05:30
paul	bfeb1c55b9	added discord invite	2025-03-28 11:17:48 +05:30
paul	9949fb8335	updated manifest	2025-03-27 18:43:56 +05:30
paul	86f84ef998	updated premium message	2025-03-27 17:18:30 +05:30
paul	fc68d407b7	added discord invite	2025-03-27 15:31:27 +05:30