working on custom tk

2024-09-30 15:54:09 +05:30
parent b8bd0c74a6
commit b2b6eb0b75
46 changed files with 3146 additions and 10 deletions
--- a/src/frameworks/customtk/widgets/mainWindow.js
+++ b/src/frameworks/customtk/widgets/mainWindow.js
@@ -0,0 +1,93 @@
+import Widget from "../../../canvas/widgets/base"
+import Tools from "../../../canvas/constants/tools"
+import { CustomTkBase } from "./base"
+
+
+class MainWindow extends CustomTkBase{
+
+    static widgetType = "main_window"
+
+    constructor(props) {
+        super(props)
+
+        this.droppableTags = {
+            exclude: ["image", "video", "media", "main_window", "toplevel"]
+        }
+
+        this.state = {
+            ...this.state,
+            size: { width: 700, height: 400 },
+            widgetName: "main",
+            attrs: {
+                ...this.state.attrs,
+                title: {
+                    label: "Window Title",
+                    tool: Tools.INPUT, // the tool to display, can be either HTML ELement or a constant string
+                    toolProps: {placeholder: "Window title", maxLength: 40}, 
+                    value: "Main Window",
+                    onChange: (value) => this.setAttrValue("title", value)
+                }
+
+            }
+        }
+
+    }
+
+    componentDidMount(){
+        super.componentDidMount()
+        this.setAttrValue("styling.backgroundColor", "#E4E2E2")
+        // this.setWidgetName("main") // Don't do this as this will cause conflicts while loading names
+    }
+
+    generateCode(variableName, parent){
+
+        const backgroundColor = this.getAttrValue("styling.backgroundColor")
+
+        return [
+                `${variableName} = tk.Tk()`,
+                `${variableName}.config(bg="${backgroundColor}")`,
+                `${variableName}.title("${this.getAttrValue("title")}")`
+            ]
+    }
+
+    getToolbarAttrs(){
+        const toolBarAttrs = super.getToolbarAttrs()
+
+        return ({
+            id: this.__id,
+            widgetName: toolBarAttrs.widgetName,
+            title: this.state.attrs.title,
+            size: toolBarAttrs.size,
+
+            ...this.state.attrs,
+
+        })
+    }
+
+    renderContent(){
+        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">
+                    <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]">
+                        </div>
+                        <div className="tw-bg-blue-400 tw-rounded-full tw-w-[15px] tw-h-[15px]">
+                        </div>
+                        <div className="tw-bg-red-400 tw-rounded-full tw-w-[15px] tw-h-[15px]">
+                        </div>
+                    </div>
+                </div>
+                <div className="tw-p-2 tw-w-full tw-relative tw-h-full tw-overflow-hidden tw-content-start" 
+                        style={this.state.widgetInnerStyling}>
+                    {this.props.children}
+                </div>
+            </div>
+        )
+    }
+
+}
+
+
+export default MainWindow