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

added more attributes and generateCode to more widgets

Browse Source
This commit is contained in:
paul
2024-09-27 19:22:33 +05:30
parent 77b1c5a0f0
commit 2c7a1ada48
13 changed files with 252 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,12 +1,11 @@
import Widget from "../../../canvas/widgets/base"
import Tools from "../../../canvas/constants/tools"
import { removeKeyFromObject } from "../../../utils/common"
import { convertObjectToKeyValueString, removeKeyFromObject } from "../../../utils/common"
import { CheckSquareFilled } from "@ant-design/icons"
import {TkinterBase} from "./base"
import { TkinterWidgetBase } from "./base"
export class CheckBox extends TkinterBase{
export class CheckBox extends TkinterWidgetBase{
static widgetType = "check_button"
constructor(props) {
@@ -63,12 +62,11 @@ export class CheckBox extends TkinterBase{
generateCode(variableName, parent){
const labelText = this.getAttrValue("checkLabel")
const bg = this.getAttrValue("styling.backgroundColor")
const fg = this.getAttrValue("styling.foregroundColor")
const config = convertObjectToKeyValueString(this.getConfigCode())
const code = [
`${variableName} = tk.Checkbutton(master=${parent}, text="${labelText}")`,
`${variableName}.config(bg="${bg}", fg="${fg}")`,
`${variableName}.config(${config})`,
]
if (this.getAttrValue("defaultChecked")){
@@ -122,43 +120,22 @@ export class CheckBox extends TkinterBase{
}
export class RadioButton extends TkinterBase{
export class RadioButton extends TkinterWidgetBase{
// FIXME: the radio buttons are not visible because of the default heigh provided
static widgetType = "radio_button"
constructor(props) {
super(props)
this.droppableTags = null // disables drops
// const {layout, ...newAttrs} = this.state.attrs // Removes the layout attribute
let newAttrs = removeKeyFromObject("layout", this.state.attrs)
newAttrs = removeKeyFromObject("styling.backgroundColor", newAttrs)
this.minSize = {width: 50, height: 30}
this.state = {
...this.state,
size: { width: 120, height: 'fit' },
widgetName: "Radio button",
attrs: {
...newAttrs,
styling: {
...newAttrs.styling,
foregroundColor: {
label: "Foreground Color",
tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string
value: "#000",
onChange: (value) => {
this.setWidgetInnerStyle("color", value)
this.setAttrValue("styling.foregroundColor", value)
}
}
},
...this.state.attrs,
radios: {
label: "Radio Group",
tool: Tools.INPUT_RADIO_LIST,
@@ -180,8 +157,8 @@ export class RadioButton extends TkinterBase{
generateCode(variableName, parent){
const bg = this.getAttrValue("styling.backgroundColor")
const fg = this.getAttrValue("styling.foregroundColor")
const config = convertObjectToKeyValueString(this.getConfigCode())
const code = [
`${variableName}_var = tk.IntVar()`,
@@ -193,7 +170,7 @@ export class RadioButton extends TkinterBase{
const radioBtnVariable = `${variableName}_${idx}`
code.push(`\n`)
code.push(`${radioBtnVariable} = tk.Radiobutton(master=${parent}, variable=${variableName}_var, text="${radio_text}")`)
code.push(`${radioBtnVariable}.config(bg="${bg}", fg="${fg}", value=${idx})`)
code.push(`${radioBtnVariable}.config(${config}, value=${idx})`)
code.push(`${radioBtnVariable}.${this.getLayoutCode()}`)
})

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

@@ -4,7 +4,7 @@ import Widget from "../../../canvas/widgets/base"
import { removeKeyFromObject } from "../../../utils/common"
import { Tkinter_TO_WEB_CURSOR_MAPPING } from "../constants/cursor"
import { Tkinter_To_GFonts } from "../constants/fontFamily"
import { RELIEF } from "../constants/styling"
import { JUSTIFY, RELIEF } from "../constants/styling"
// TODO: add full width and full height in base widget
// TODO: the pack should configure width and height of widgets
@@ -204,7 +204,7 @@ export class TkinterBase extends Widget {
...layoutUpdates
}
console.log("new data: ", newData)
console.log("new data: ", newData, data)
this.setState(newData, () => {
let layoutAttrs = this.setParentLayout(parentLayout) || {}
@@ -286,12 +286,66 @@ export class TkinterWidgetBase extends TkinterBase{
label: "Relief",
tool: Tools.SELECT_DROPDOWN,
options: RELIEF.map((val) => ({value: val, label: val})),
value: "Arial",
value: "",
onChange: (value) => {
this.setWidgetInnerStyle("fontFamily", Tkinter_To_GFonts[value])
this.setAttrValue("font.fontFamily", value)
// this.setWidgetInnerStyle("fontFamily", Tkinter_To_GFonts[value])
this.setAttrValue("styling.relief", value)
}
}
},
// justify: {
// label: "Justify",
// tool: Tools.SELECT_DROPDOWN,
// options: JUSTIFY.map((val) => ({value: val, label: val})),
// value: "",
// onChange: (value) => {
// this.setWidgetInnerStyle("text-align", value)
// this.setAttrValue("styling.justify", value)
// }
// }
},
padding: {
label: "padding",
padX: {
label: "Pad X",
tool: Tools.NUMBER_INPUT,
toolProps: {min: 1, max: 140},
value: null,
onChange: (value) => {
// this.setWidgetInnerStyle("paddingLeft", `${value}px`)
// this.setWidgetInnerStyle("paddingRight", `${value}px`)
const widgetStyle = {
...this.state.widgetInnerStyling,
paddingLeft: `${value}px`,
paddingRight: `${value}px`
}
this.setState({
widgetInnerStyling: widgetStyle
})
this.setAttrValue("padding.padX", value)
}
},
padY: {
label: "Pad Y",
tool: Tools.NUMBER_INPUT,
toolProps: {min: 1, max: 140},
value: null,
onChange: (value) => {
const widgetStyle = {
...this.state.widgetInnerStyling,
paddingTop: `${value}px`,
paddingBottom: `${value}px`
}
this.setState({
widgetInnerStyling: widgetStyle
})
this.setAttrValue("padding.padX", value)
}
},
},
font: {
label: "font",
@@ -309,9 +363,8 @@ export class TkinterWidgetBase extends TkinterBase{
label: "font size",
tool: Tools.NUMBER_INPUT,
toolProps: {min: 1, max: 140},
value: 14,
value: null,
onChange: (value) => {
console.log("font size: ", value)
this.setWidgetInnerStyle("fontSize", `${value}px`)
this.setAttrValue("font.fontSize", value)
}
@@ -321,7 +374,7 @@ export class TkinterWidgetBase extends TkinterBase{
label: "Cursor",
tool: Tools.SELECT_DROPDOWN,
toolProps: {placeholder: "select cursor"},
value: Tkinter_TO_WEB_CURSOR_MAPPING["arrow"],
value: "",
options: Object.keys(Tkinter_TO_WEB_CURSOR_MAPPING).map((val) => ({value: val, label: val})),
onChange: (value) => {
this.setWidgetInnerStyle("cursor", Tkinter_TO_WEB_CURSOR_MAPPING[value])
@@ -330,6 +383,39 @@ export class TkinterWidgetBase extends TkinterBase{
},
}
}
this.getConfigCode = this.getConfigCode.bind(this)
}
getConfigCode(){
const code = {
bg: `"${this.getAttrValue("styling.backgroundColor")}"`,
fg: `"${this.getAttrValue("styling.foregroundColor")}"`,
}
if (this.getAttrValue("styling.borderWidth"))
code["bd"] = this.getAttrValue("styling.borderWidth")
if (this.getAttrValue("styling.relief"))
code["relief"] = `"${this.getAttrValue("styling.relief")}"`
if (this.getAttrValue("font.fontFamily") || this.getAttrValue("font.fontSize")){
code["font"] = [`"${this.getAttrValue("font.fontFamily")}"`, this.getAttrValue("font.fontSize"), ]
}
if (this.getAttrValue("cursor"))
code["cursor"] = `"${this.getAttrValue("cursor")}"`
if (this.getAttrValue("padding.padX")){
code["padx"] = this.getAttrValue("padding.padX")
}
if (this.getAttrValue("padding.padY")){
code["pady"] = this.getAttrValue("padding.padY")
}
return code
}
}

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

@@ -1,37 +1,21 @@
import Widget from "../../../canvas/widgets/base"
import Tools from "../../../canvas/constants/tools"
import { removeKeyFromObject } from "../../../utils/common"
import {TkinterBase} from "./base"
import { convertObjectToKeyValueString } from "../../../utils/common"
import { TkinterWidgetBase } from "./base"
class Button extends TkinterBase{
class Button extends TkinterWidgetBase{
static widgetType = "button"
constructor(props) {
super(props)
this.droppableTags = null
const newAttrs = removeKeyFromObject("layout", this.state.attrs)
this.state = {
...this.state,
size: { width: 80, height: 40 },
widgetName: "Button",
attrs: {
...newAttrs,
styling: {
...newAttrs.styling,
foregroundColor: {
label: "Foreground Color",
tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string
value: "#000",
onChange: (value) => {
this.setWidgetInnerStyle("color", value)
this.setAttrValue("styling.foregroundColor", value)
}
}
},
...this.state.attrs,
buttonLabel: {
label: "Button Label",
tool: Tools.INPUT, // the tool to display, can be either HTML ELement or a constant string
@@ -53,11 +37,12 @@ class Button extends TkinterBase{
generateCode(variableName, parent){
const labelText = this.getAttrValue("buttonLabel")
const bg = this.getAttrValue("styling.backgroundColor")
const fg = this.getAttrValue("styling.foregroundColor")
const config = convertObjectToKeyValueString(this.getConfigCode())
return [
`${variableName} = tk.Button(master=${parent}, text="${labelText}")`,
`${variableName}.config(bg="${bg}", fg="${fg}")`,
`${variableName}.config(${config})`,
`${variableName}.${this.getLayoutCode()}`
]
}

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

@@ -1,38 +1,21 @@
import Widget from "../../../canvas/widgets/base"
import Tools from "../../../canvas/constants/tools"
import { removeKeyFromObject } from "../../../utils/common"
import {TkinterBase} from "./base"
import { convertObjectToKeyValueString } from "../../../utils/common"
import { TkinterWidgetBase } from "./base"
export class Input extends TkinterBase{
export class Input extends TkinterWidgetBase{
static widgetType = "entry"
constructor(props) {
super(props)
this.droppableTags = null // disables drops
const newAttrs = removeKeyFromObject("layout", this.state.attrs)
this.state = {
...this.state,
size: { width: 120, height: 40 },
widgetName: "Entry",
attrs: {
...newAttrs,
styling: {
...newAttrs.styling,
foregroundColor: {
label: "Foreground Color",
tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string
value: "#000",
onChange: (value) => {
this.setWidgetInnerStyle("color", value)
this.setAttrValue("styling.foregroundColor", value)
}
}
},
...this.state.attrs,
placeHolder: {
label: "PlaceHolder",
tool: Tools.INPUT, // the tool to display, can be either HTML ELement or a constant string
@@ -52,12 +35,13 @@ export class Input extends TkinterBase{
generateCode(variableName, parent){
const placeHolderText = this.getAttrValue("labelWidget")
const bg = this.getAttrValue("styling.backgroundColor")
const fg = this.getAttrValue("styling.foregroundColor")
const placeHolderText = this.getAttrValue("placeHolder")
const config = convertObjectToKeyValueString(this.getConfigCode())
return [
`${variableName} = tk.Entry(master=${parent}, text="${placeHolderText}")`,
`${variableName}.config(bg="${bg}", fg="${fg}")`,
`${variableName}.config(${config})`,
`${variableName}.${this.getLayoutCode()}`
]
}
@@ -92,34 +76,18 @@ export class Input extends TkinterBase{
}
export class Text extends TkinterBase{
export class Text extends TkinterWidgetBase{
static widgetType = "Text"
constructor(props) {
super(props)
this.droppableTags = null
const newAttrs = removeKeyFromObject("layout", this.state.attrs)
this.state = {
...this.state,
size: { width: 120, height: 80 },
attrs: {
...newAttrs,
styling: {
...newAttrs.styling,
foregroundColor: {
label: "Foreground Color",
tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string
value: "#000",
onChange: (value) => {
this.setWidgetInnerStyle("color", value)
this.setAttrValue("styling.foregroundColor", value)
}
}
},
...this.state.attrs,
placeHolder: {
label: "PlaceHolder",
tool: Tools.INPUT, // the tool to display, can be either HTML ELement or a constant string
@@ -138,6 +106,19 @@ export class Text extends TkinterBase{
this.setWidgetName("text")
}
generateCode(variableName, parent){
const placeHolderText = this.getAttrValue("placeHolder")
const config = convertObjectToKeyValueString(this.getConfigCode())
return [
`${variableName} = tk.Text(master=${parent}, text="${placeHolderText}")`,
`${variableName}.config(${config})`,
`${variableName}.${this.getLayoutCode()}`
]
}
getToolbarAttrs(){
const toolBarAttrs = super.getToolbarAttrs()

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

@@ -1,8 +1,6 @@
import Widget from "../../../canvas/widgets/base"
import Tools from "../../../canvas/constants/tools"
import { removeKeyFromObject } from "../../../utils/common"
import {TkinterBase, TkinterWidgetBase} from "./base"
import { Layouts } from "../../../canvas/constants/layouts"
import { convertObjectToKeyValueString } from "../../../utils/common"
import { TkinterWidgetBase } from "./base"
class Label extends TkinterWidgetBase{
@@ -12,29 +10,13 @@ class Label extends TkinterWidgetBase{
constructor(props) {
super(props)
this.droppableTags = null
const newAttrs = removeKeyFromObject("layout", this.state.attrs)
this.state = {
...this.state,
widgetName: "Label",
size: { width: 80, height: 40 },
attrs: {
...newAttrs,
styling: {
...newAttrs.styling,
foregroundColor: {
label: "Foreground Color",
tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string
value: "#000",
onChange: (value) => {
this.setWidgetInnerStyle("color", value)
this.setAttrValue("styling.foregroundColor", value)
}
}
},
...this.state.attrs,
labelWidget: {
label: "Text",
tool: Tools.INPUT,
@@ -67,11 +49,11 @@ class Label extends TkinterWidgetBase{
generateCode(variableName, parent){
const labelText = this.getAttrValue("labelWidget")
const bg = this.getAttrValue("styling.backgroundColor")
const fg = this.getAttrValue("styling.foregroundColor")
const config = convertObjectToKeyValueString(this.getConfigCode())
return [
`${variableName} = tk.Label(master=${parent}, text="${labelText}")`,
`${variableName}.config(bg="${bg}", fg="${fg}")`,
`${variableName}.config(${config})`,
`${variableName}.${this.getLayoutCode()}`
]
}

4
src/frameworks/tkinter/widgets/mainWindow.js
View File

@@ -1,8 +1,9 @@
import Widget from "../../../canvas/widgets/base"
import Tools from "../../../canvas/constants/tools"
import { TkinterBase } from "./base"
class MainWindow extends Widget{
class MainWindow extends TkinterBase{
static widgetType = "main_window"
@@ -29,6 +30,7 @@ class MainWindow extends Widget{
}
}
}
componentDidMount(){

59
src/frameworks/tkinter/widgets/optionMenu.js
View File

@@ -1,47 +1,27 @@
import Widget from "../../../canvas/widgets/base"
import Tools from "../../../canvas/constants/tools"
import { removeKeyFromObject } from "../../../utils/common"
import { ArrowDownOutlined, DownOutlined } from "@ant-design/icons"
import {TkinterBase} from "./base"
import { DownOutlined } from "@ant-design/icons"
import { TkinterWidgetBase} from "./base"
import { convertObjectToKeyValueString } from "../../../utils/common"
class OptionMenu extends TkinterBase{
class OptionMenu extends TkinterWidgetBase{
static widgetType = "option_menu"
// FIXME: the radio buttons are not visible because of the default heigh provided
constructor(props) {
super(props)
this.droppableTags = null // disables drops
// const {layout, ...newAttrs} = this.state.attrs // Removes the layout attribute
const newAttrs = removeKeyFromObject("layout", this.state.attrs)
this.minSize = {width: 50, height: 30}
this.state = {
...this.state,
isDropDownOpen: false,
widgetName: "Option menu",
size: { width: 120, height: 'fit' },
attrs: {
...newAttrs,
styling: {
label: "styling",
foregroundColor: {
label: "Foreground Color",
tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string
value: "#000",
onChange: (value) => {
this.setWidgetInnerStyle("color", value)
this.setAttrValue("styling.foregroundColor", value)
}
}
},
...this.state.attrs,
defaultValue: {
label: "Default Value",
tool: Tools.INPUT,
@@ -50,17 +30,19 @@ class OptionMenu extends TkinterBase{
this.setAttrValue("options", {inputs, selectedRadio})
}
},
options: {
widgetOptions: {
label: "Options",
tool: Tools.INPUT_RADIO_LIST,
value: {inputs: ["option 1"], selectedRadio: -1},
onChange: ({inputs, selectedRadio}) => {
this.setAttrValue("options", {inputs, selectedRadio})
this.setAttrValue("widgetOptions", {inputs, selectedRadio})
}
}
}
}
console.log("attrs1: ", this.state.attrs)
}
componentDidMount(){
@@ -68,11 +50,28 @@ class OptionMenu extends TkinterBase{
this.setWidgetInnerStyle("backgroundColor", "#fff")
}
generateCode(variableName, parent){
const config = convertObjectToKeyValueString(this.getConfigCode())
const defaultValue = this.getAttrValue("defaultValue")
const options = JSON.stringify(this.getAttrValue("widgetOptions").inputs)
return [
`${variableName}_options = ${options}`,
`${variableName} = tk.OptionMenu(master=${parent}, ${defaultValue}, *${variableName}_options)`,
`${variableName}.config(${config})`,
`${variableName}.${this.getLayoutCode()}`
]
}
getToolbarAttrs(){
const toolBarAttrs = super.getToolbarAttrs()
const attrs = this.state.attrs
console.log("attrs: ", attrs)
return ({
id: this.__id,
widgetName: toolBarAttrs.widgetName,
@@ -90,7 +89,7 @@ class OptionMenu extends TkinterBase{
renderContent(){
const {inputs, selectedRadio} = this.getAttrValue("options")
const {inputs, selectedRadio} = this.getAttrValue("widgetOptions")
return (
<div className="tw-flex tw-p-1 tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden"

46
src/frameworks/tkinter/widgets/slider.js
View File

@@ -1,35 +1,32 @@
import Widget from "../../../canvas/widgets/base"
import Tools from "../../../canvas/constants/tools"
import { removeKeyFromObject } from "../../../utils/common"
import {TkinterBase} from "./base"
import { convertObjectToKeyValueString, removeKeyFromObject } from "../../../utils/common"
import {TkinterBase, TkinterWidgetBase} from "./base"
class Slider extends TkinterBase{
class Slider extends TkinterWidgetBase{
static widgetType = "scale"
constructor(props) {
super(props)
this.droppableTags = null // disables drops
const newAttrs = removeKeyFromObject("layout", this.state.attrs)
this.state = {
...this.state,
widgetName: "Scale",
size: { width: 'fit', height: 'fit' },
attrs: {
...newAttrs,
...this.state.attrs,
styling: {
...newAttrs.styling,
foregroundColor: {
label: "Foreground Color",
tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string
value: "#000",
...this.state.attrs.styling,
// TODO: trough color
troughColor: {
label: "Trough Color",
tool: Tools.COLOR_PICKER,
value: "#fff",
onChange: (value) => {
this.setWidgetInnerStyle("color", value)
this.setAttrValue("styling.foregroundColor", value)
// this.setWidgetInnerStyle("color", value)
this.setAttrValue("styling.troughColor", value)
}
}
},
@@ -75,6 +72,25 @@ class Slider extends TkinterBase{
this.setAttrValue("styling.backgroundColor", "#fff")
}
generateCode(variableName, parent){
// TODO: add orientation
const config = this.getConfigCode()
config["_from"] = this.getAttrValue("scale.min")
config["to"] = this.getAttrValue("scale.max")
config["resolution"] = this.getAttrValue("scale.step")
const defaultValue = this.getAttrValue("defaultValue")
return [
`${variableName}_var = tk.DoubleVar(${defaultValue})`,
`${variableName} = tk.Scale(master=${parent}, variable=${variableName}_var)`,
`${variableName}.config(${config})`,
`${variableName}.${this.getLayoutCode()}`
]
}
getToolbarAttrs(){
const toolBarAttrs = super.getToolbarAttrs()

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

@@ -1,39 +1,23 @@
import Widget from "../../../canvas/widgets/base"
import Tools from "../../../canvas/constants/tools"
import { removeKeyFromObject } from "../../../utils/common"
import { convertObjectToKeyValueString, removeKeyFromObject } from "../../../utils/common"
import { DownOutlined, UpOutlined } from "@ant-design/icons"
import {TkinterBase} from "./base"
import {TkinterBase, TkinterWidgetBase} from "./base"
class SpinBox extends TkinterBase{
class SpinBox extends TkinterWidgetBase{
static widgetType = "spin_box"
constructor(props) {
super(props)
this.droppableTags = null // disables drops
const newAttrs = removeKeyFromObject("layout", this.state.attrs)
this.state = {
...this.state,
size: { width: 70, height: 'fit' },
widgetName: "Spin box",
attrs: {
...newAttrs,
styling: {
...newAttrs.styling,
foregroundColor: {
label: "Foreground Color",
tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string
value: "#000",
onChange: (value) => {
this.setWidgetInnerStyle("color", value)
this.setAttrValue("styling.foregroundColor", value)
}
}
},
...this.state.attrs,
spinProps: {
label: "Properties",
display: "horizontal",
@@ -81,14 +65,27 @@ class SpinBox extends TkinterBase{
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 defaultValue = this.getAttrValue("spinProps.default")
const config = {
from_: min,
to: max,
increment: step,
value: defaultValue,
...this.getConfigCode()
}
const code = []
let spinBox = `${variableName} = tk.Spinbox(master=${parent})`
if (defaultValue){
code.push(`${variableName}_var = tk.IntVar(${defaultValue})`)
spinBox = `${variableName} = tk.Spinbox(master=${parent}, textvariable=${variableName}_var)`
}
code.push(spinBox)
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})`,
...code,
`${variableName}.config(${convertObjectToKeyValueString(config)})`,
`${variableName}.${this.getLayoutCode()}`
]
}