From dcc90dd954143bb3933f66ca9df876f78faf3003 Mon Sep 17 00:00:00 2001
From: paul <paul.sajo.official@gmail.com>
Date: Tue, 25 Mar 2025 19:11:37 +0530
Subject: [PATCH] added main window and toplevel logo

---
 src/App.js                                   | 11 ++-
 src/canvas/toolbar.js                        |  1 +
 src/frameworks/tkinter/widgets/mainWindow.js | 80 +++++++++++++++-----
 src/frameworks/tkinter/widgets/toplevel.js   | 71 +++++++++++++++--
 4 files changed, 135 insertions(+), 28 deletions(-)

diff --git a/src/App.js b/src/App.js
index 0ec4492..65526ce 100644
--- a/src/App.js
+++ b/src/App.js
@@ -46,8 +46,8 @@ function App() {
 
 	const [projectName, setProjectName] = useState('untitled project')
 	const [UIFramework, setUIFramework] = useState(FrameWorks.TKINTER)
-
-	// const [notChromiumAlert, setShowNotChromiumAlert] = useState(false) // if the user isn't using a chromium based browser alerts the user
+	
+	const [shownNotChromiumAlert, setShownNotChromiumAlert] = useState(false) // if the user isn't using a chromium based browser alerts the user
 
     // const [uploadedAssets, setUploadedAssets] = useState([]) //  a global storage for assets, since redux can't store files(serialize files)
 
@@ -61,6 +61,10 @@ function App() {
 
 	useEffect(() => {
 
+		if (shownNotChromiumAlert){
+			return
+		}
+
 		isChromium().then((isChrome) => {
 
 			if (!isChrome){
@@ -68,11 +72,12 @@ function App() {
 					title: "Not Chromium browser",
 					content: "We recommend using Chromium based browser such as Chrome, Brave, Edge etc."
 				})
+				setShownNotChromiumAlert(true)
 			}
 		})
 		
 
-	}, [])
+	}, [shownNotChromiumAlert])
 
 	const sidebarTabs = [
 		{
diff --git a/src/canvas/toolbar.js b/src/canvas/toolbar.js
index 405770f..c4bcca6 100644
--- a/src/canvas/toolbar.js
+++ b/src/canvas/toolbar.js
@@ -171,6 +171,7 @@ const CanvasToolBar = memo(({ isOpen, widgetType, }) => {
                     placeholder="select content"
                     showSearch
                     className="tw-w-full"
+                    notFoundContent="Start uploading from uploads tab"
                     value={val.value?.name || ""}
                     onChange={(value) =>  {
 
diff --git a/src/frameworks/tkinter/widgets/mainWindow.js b/src/frameworks/tkinter/widgets/mainWindow.js
index 0333bfd..83f58b7 100644
--- a/src/frameworks/tkinter/widgets/mainWindow.js
+++ b/src/frameworks/tkinter/widgets/mainWindow.js
@@ -2,6 +2,7 @@ import Widget from "../../../canvas/widgets/base"
 import Tools from "../../../canvas/constants/tools"
 import { TkinterBase } from "./base"
 import { removeKeyFromObject } from "../../../utils/common"
+import { getPythonAssetPath } from "../../utils/pythonFilePath"
 
 
 class MainWindow extends TkinterBase{
@@ -35,6 +36,13 @@ class MainWindow extends TkinterBase{
                     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)
                 }
 
             }
@@ -42,30 +50,58 @@ class MainWindow extends TkinterBase{
 
     }
 
+
     // componentDidMount(){
-
+    //     // this.setAttrValue("styling.backgroundColor", "#E4E2E2")
     //     super.componentDidMount()
-
-    //     //this.setAttrValue("styling", { backgroundColor: "#E4E2E2" }) refactor to something like this?
-    //     this.setAttrValue("styling.backgroundColor", "#E4E2E2")
-    //     console.log("mounted: ", this.state)
     // }
 
-    componentDidMount(){
-        // this.setAttrValue("styling.backgroundColor", "#E4E2E2")
-        super.componentDidMount()
-    }
-
     generateCode(variableName, parent){
 
         const backgroundColor = this.getAttrValue("styling.backgroundColor")
 
-        return [
-                `${variableName} = tk.Tk()`,
-                `${variableName}.config(bg="${backgroundColor}")`,
-                `${variableName}.title("${this.getAttrValue("title")}")`,
-                ...this.getGridLayoutConfigurationCode(variableName)
-            ]
+        const logo = this.getAttrValue("logo")
+
+        const {width, height} = this.getSize()
+
+        const code = [
+            `${variableName} = tk.Tk()`,
+            `${variableName}.config(bg="${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(){
@@ -83,10 +119,20 @@ class MainWindow extends TkinterBase{
     }
 
     renderContent(){
+
+        const logo = this.getAttrValue("logo")
+
         return (
             <div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden">
+               
                 <div className="tw-flex tw-w-full tw-h-[25px] tw-bg-[#c7c7c7] tw-p-1
-                                tw-overflow-hidden tw-shadow-xl tw-place-items-center">
+                                tw-overflow-hidden tw-shadow-xl tw-place-items-center tw-gap-1">
+                    {
+                        logo && (
+                            <img src={logo.previewUrl} alt={logo.name} 
+                                    className="tw-bg-contain tw-w-[15px] tw-h-[15px] tw-rounded-sm" />
+                        )
+                    }
                     <div className="tw-text-sm">{this.getAttrValue("title")}</div>
                     <div className="tw-ml-auto tw-flex tw-gap-1  tw-place-items-center">
                         <div className="tw-bg-yellow-400 tw-rounded-full tw-w-[15px] tw-h-[15px]">
diff --git a/src/frameworks/tkinter/widgets/toplevel.js b/src/frameworks/tkinter/widgets/toplevel.js
index 367077d..8e0d717 100644
--- a/src/frameworks/tkinter/widgets/toplevel.js
+++ b/src/frameworks/tkinter/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 { TkinterBase } from "./base"
 
 
-class TopLevel extends Widget{
+class TopLevel extends TkinterBase{
 
     static widgetType = "toplevel"
     static displayName = "Top Level"
@@ -28,6 +30,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)
                 }
 
             }
@@ -39,16 +48,54 @@ class TopLevel extends Widget{
         super.componentDidMount()
     }
 
+
     generateCode(variableName, parent){
 
         const backgroundColor = this.getAttrValue("styling.backgroundColor")
 
-        return [
-                `${variableName} = tk.Toplevel(master=${parent})`,
-                `${variableName}.config(bg="${backgroundColor}")`,
-                `${variableName}.title("${this.getAttrValue("title")}")`,
-                ...this.getGridLayoutConfigurationCode(variableName)
-            ]
+        const logo = this.getAttrValue("logo")
+
+        const {width, height} = this.getSize()
+
+        const code = [
+            `${variableName} = tk.Toplevel(master=${parent})`,
+            `${variableName}.config(bg="${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(){
@@ -65,10 +112,18 @@ class TopLevel extends Widget{
     }
 
     renderContent(){
+        const logo = this.getAttrValue("logo")
+
         return (
             <div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden">
-                <div className="tw-flex tw-w-full tw-h-[25px] tw-bg-[#c7c7c7] tw-p-1
+                <div className="tw-flex tw-w-full tw-h-[25px] tw-bg-[#c7c7c7] tw-p-1 tw-gap-1
                                 tw-overflow-hidden tw-shadow-xl tw-place-items-center">
+                    {
+                        logo && (
+                            <img src={logo.previewUrl} alt={logo.name} 
+                                    className="tw-bg-contain tw-w-[15px] tw-h-[15px] tw-rounded-sm" />
+                        )
+                    }
                     <div className="tw-text-sm">{this.getAttrValue("title")}</div>
                     <div className="tw-ml-auto tw-flex tw-gap-1  tw-place-items-center">
                         <div className="tw-bg-yellow-400 tw-rounded-full tw-w-[15px] tw-h-[15px]">