Miko/PyUIBuilder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working on code generation

Browse Source
This commit is contained in:
paul
2024-09-26 23:16:43 +05:30
parent 7bba819c38
commit 5be078f846
11 changed files with 256 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/frameworks/tkinter/widgets/ checkButton.js
View File

@@ -64,6 +64,26 @@ export class CheckBox extends TkinterBase{
this.setWidgetInnerStyle("backgroundColor", "#fff0")
}
generateCode(variableName, parent){
const labelText = this.getAttrValue("checkLabel")
const bg = this.getAttrValue("styling.backgroundColor")
const fg = this.getAttrValue("styling.foregroundColor")
const code = [
`${variableName} = tk.Checkbutton(master=${parent}, text="${labelText}")`,
`${variableName}.config(bg="${bg}", fg="${fg}")`,
]
if (this.getAttrValue("defaultChecked")){
code.push(`${variableName}.select()`)
}
code.push(`${variableName}.${this.getLayoutCode()}`)
return code
}
getToolbarAttrs(){
const toolBarAttrs = super.getToolbarAttrs()
@@ -109,7 +129,7 @@ export class CheckBox extends TkinterBase{
export class RadioButton extends Widget{
static widgetType = "radio_button"
// FIXME: the radio buttons are not visible because of the default height provided
constructor(props) {
super(props)
@@ -162,6 +182,28 @@ export class RadioButton extends Widget{
this.setWidgetInnerStyle("backgroundColor", "#fff0")
}
generateCode(variableName, parent){
const bg = this.getAttrValue("styling.backgroundColor")
const fg = this.getAttrValue("styling.foregroundColor")
const radios = this.getAttrValue("radios")
// TODO: from here
const code = [
`${variableName}_var = tk.IntVar()`,
`${variableName} = tk.Radiobutton(master=${parent}, text="")`,
`${variableName}.config(bg="${bg}", fg="${fg}")`,
]
if (this.getAttrValue("defaultChecked")){
code.push(`${variableName}.select()`)
}
code.push(`${variableName}.${this.getLayoutCode()}`)
return code
}
getToolbarAttrs(){
const toolBarAttrs = super.getToolbarAttrs()

8
src/frameworks/tkinter/widgets/base.js
View File

@@ -2,7 +2,8 @@ import { Layouts, PosType } from "../../../canvas/constants/layouts"
import Tools from "../../../canvas/constants/tools"
import Widget from "../../../canvas/widgets/base"
// TODO: add full width and full height in base widget
// TODO: the pack should configure width and height of widgets
class TkinterBase extends Widget {
@@ -20,7 +21,7 @@ class TkinterBase extends Widget {
let layoutManager = `pack()`
if (parentLayout === Layouts.FLEX){
layoutManager = `pack(${direction === "horizontal"? "tk.LEFT" : "tk.TOP"})`
layoutManager = `pack(side=${direction === "row" ? "tk.LEFT" : "tk.TOP"})`
}else if (parentLayout === Layouts.GRID){
const row = this.getAttrValue("gridManager.row")
const col = this.getAttrValue("gridManager.col")
@@ -34,7 +35,6 @@ class TkinterBase extends Widget {
}
setParentLayout(parentLayout){
console.log("parent layout: ", parentLayout)
const {layout, direction, gap} = parentLayout
@@ -195,7 +195,7 @@ class TkinterBase extends Widget {
}
this.setState(newData, () => {
let layoutAttrs = this.setParentLayout(parentLayout).attrs || {}
let layoutAttrs = this.setParentLayout(parentLayout) || {}
// UPdates attrs
let newAttrs = { ...this.state.attrs, ...layoutAttrs }

16
src/frameworks/tkinter/widgets/button.js
View File

@@ -43,12 +43,25 @@ class Button extends TkinterBase{
}
}
componentDidMount(){
super.componentDidMount()
this.setWidgetName("button")
this.setAttrValue("styling.backgroundColor", "#E4E2E2")
}
generateCode(variableName, parent){
const labelText = this.getAttrValue("buttonLabel")
const bg = this.getAttrValue("styling.backgroundColor")
const fg = this.getAttrValue("styling.foregroundColor")
return [
`${variableName} = tk.Button(master=${parent}, text="${labelText}")`,
`${variableName}.config(bg="${bg}", fg="${fg}")`,
`${variableName}.${this.getLayoutCode()}`
]
}
getToolbarAttrs(){
const toolBarAttrs = super.getToolbarAttrs()
@@ -69,7 +82,8 @@ class Button extends TkinterBase{
return (
<div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md
tw-border tw-border-solid tw-border-gray-400 tw-overflow-hidden">
<div className="tw-p-2 tw-w-full tw-flex tw-place-content-center tw-place-items-center tw-h-full tw-text-center" style={this.state.widgetInnerStyling}>
<div className="tw-p-2 tw-w-full tw-flex tw-place-content-center tw-place-items-center tw-h-full tw-text-center"
style={this.state.widgetInnerStyling}>
{/* {this.props.children} */}
<div className="tw-text-sm" style={{color: this.getAttrValue("styling.foregroundColor")}}>
{this.getAttrValue("buttonLabel")}

12
src/frameworks/tkinter/widgets/frame.js
View File

@@ -12,11 +12,17 @@ class Frame extends TkinterBase{
this.droppableTags = {
exclude: ["image", "video", "media", "toplevel", "main_window"]
}
}
this.state = {
...this.state,
generateCode(variableName, parent){
}
const bg = this.getAttrValue("styling.backgroundColor")
return [
`${variableName} = tk.Frame(master=${parent})`,
`${variableName}.config(bg="${bg}")`,
`${variableName}.${this.getLayoutCode()}`
]
}
componentDidMount(){

12
src/frameworks/tkinter/widgets/input.js
View File

@@ -50,6 +50,18 @@ export class Input extends TkinterBase{
this.setWidgetName("Entry")
}
generateCode(variableName, parent){
const placeHolderText = this.getAttrValue("labelWidget")
const bg = this.getAttrValue("styling.backgroundColor")
const fg = this.getAttrValue("styling.foregroundColor")
return [
`${variableName} = tk.Entry(master=${parent}, text="${placeHolderText}")`,
`${variableName}.config(bg="${bg}", fg="${fg}")`,
`${variableName}.${this.getLayoutCode()}`
]
}
getToolbarAttrs(){
const toolBarAttrs = super.getToolbarAttrs()

28
src/frameworks/tkinter/widgets/label.js
View File

@@ -46,22 +46,26 @@ class Label extends TkinterBase{
}
}
generateCode(parent){
const label = this.getAttrValue("labelWidget")
return (`
${this.getWidgetName()} = tk.Label(master=${parent}, text="${label}")
${this.getWidgetName()}.${this.getLayoutCode()}
`)
}
componentDidMount(){
super.componentDidMount()
this.setAttrValue("styling.backgroundColor", "#fff0")
this.setWidgetInnerStyle("backgroundColor", "#fff0")
this.setAttrValue("styling.backgroundColor", "#E4E2E2")
this.setWidgetName("label")
}
generateCode(variableName, parent){
const labelText = this.getAttrValue("labelWidget")
const bg = this.getAttrValue("styling.backgroundColor")
const fg = this.getAttrValue("styling.foregroundColor")
return [
`${variableName} = tk.Label(master=${parent}, text="${labelText}")`,
`${variableName}.config(bg="${bg}", fg="${fg}")`,
`${variableName}.${this.getLayoutCode()}`
]
}
getToolbarAttrs(){
const toolBarAttrs = super.getToolbarAttrs()

18
src/frameworks/tkinter/widgets/spinBox.js
View File

@@ -8,6 +8,7 @@ import TkinterBase from "./base"
class SpinBox extends TkinterBase{
static widgetType = "spin_box"
constructor(props) {
super(props)
@@ -75,6 +76,23 @@ class SpinBox extends TkinterBase{
this.setWidgetName("SpinBox")
}
generateCode(variableName, parent){
const min = this.getAttrValue("spinProps.min")
const max = this.getAttrValue("spinProps.max")
const step = this.getAttrValue("spinProps.step")
const defaultValue = this.getAttrValue("spinProps.defaultValue")
const bg = this.getAttrValue("styling.backgroundColor")
const fg = this.getAttrValue("styling.foregroundColor")
return [
`${variableName} = tk.Spinbox(master=${parent})`,
`${variableName}.config(bg="${bg}", fg="${fg}", from_=${min}, to=${max},
increment=${step})`,
`${variableName}.${this.getLayoutCode()}`
]
}
getToolbarAttrs(){
const toolBarAttrs = super.getToolbarAttrs()