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

fix: customtk error and option menu

Browse Source
This commit is contained in:
paul
2025-04-05 19:20:58 +05:30
parent 3caa84b7fb
commit 5f3525d56b
6 changed files with 123 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/frameworks/customtk/widgets/base.js
View File

@@ -88,8 +88,8 @@ export class CustomTkBase extends Widget {
config['x'] = Math.trunc(this.state.pos.x)
config['y'] = Math.trunc(this.state.pos.y)
config["width"] = Math.trunc(this.state.size.width)
config["height"] = Math.trunc(this.state.size.height)
// config["width"] = Math.trunc(this.state.size.width)
// config["height"] = Math.trunc(this.state.size.height)
// if (!this.state.fitContent.width){
// config["width"] = this.state.size.width
@@ -1017,6 +1017,7 @@ export class CustomTkWidgetBase extends CustomTkBase{
...this.state,
attrs: {
...newAttrs,
fitContent: {width: false, height: false},
styling: {
...newAttrs.styling,
foregroundColor: {
@@ -1167,7 +1168,7 @@ export class CustomTkWidgetBase extends CustomTkBase{
label: "font size",
tool: Tools.NUMBER_INPUT,
toolProps: {min: 3, max: 140},
value: null,
value: undefined,
onChange: (value) => {
this.setWidgetInnerStyle("fontSize", `${value}px`)
this.setAttrValue("font.fontSize", value)
@@ -1197,6 +1198,12 @@ export class CustomTkWidgetBase extends CustomTkBase{
fg_color: `"${this.getAttrValue("styling.backgroundColor")}"`,
}
if (!this.state.fitContent.width)
config["width"] = Math.trunc(this.state.size.width)
if (!this.state.fitContent.height)
config["height"] = Math.trunc(this.state.size.height)
if (this.getAttrValue("styling.foregroundColor")){
config["text_color"] = `"${this.getAttrValue("styling.foregroundColor")}"`
}

45
src/frameworks/customtk/widgets/checkButton.js
View File

@@ -3,6 +3,8 @@ import Tools from "../../../canvas/constants/tools"
import { convertObjectToKeyValueString, removeKeyFromObject } from "../../../utils/common"
import { CheckSquareFilled } from "@ant-design/icons"
import { CustomTkWidgetBase } from "./base"
import { Layouts } from "../../../canvas/constants/layouts"
import React from "react"
export class CheckBox extends CustomTkWidgetBase{
@@ -132,6 +134,8 @@ export class RadioButton extends CustomTkWidgetBase{
this.minSize = {width: 50, height: 30}
this.firstDivRef = React.createRef()
this.state = {
...this.state,
size: { width: 80, height: 30 },
@@ -180,7 +184,7 @@ export class RadioButton extends CustomTkWidgetBase{
code.push(`\n`)
code.push(`${radioBtnVariable} = ctk.CTkRadioButton(master=${parent}, variable=${variableName}_var, text="${radio_text}", value=${idx})`)
code.push(`${radioBtnVariable}.configure(${convertObjectToKeyValueString(config)})`)
code.push(`${radioBtnVariable}.${this.getLayoutCode()}`)
code.push(`${radioBtnVariable}.${this.getLayoutCode({index: idx})}`)
})
const defaultSelected = radios.selectedRadio
@@ -193,6 +197,39 @@ export class RadioButton extends CustomTkWidgetBase{
return code
}
/**
*
* The index is required for pack as in pack every widget would be packed on top of each other in radio button
*/
getLayoutCode({index=0}){
let layoutManager = super.getLayoutCode()
const {layout: parentLayout, direction, gap, align="start"} = this.getParentLayout()
const absolutePositioning = this.getAttrValue("positioning")
if (parentLayout === Layouts.PLACE || absolutePositioning){
const config = {}
const elementRect = this.firstDivRef.current?.getBoundingClientRect()
config['x'] = Math.trunc(this.state.pos.x)
config['y'] = Math.trunc(this.state.pos.y)
if (elementRect?.height){
config['y'] = Math.trunc(config['y'] + (index * elementRect.height)) // the index is the radiobutton index
}
const configStr = convertObjectToKeyValueString(config)
layoutManager = `place(${configStr})`
}
return layoutManager
}
getToolbarAttrs(){
const toolBarAttrs = super.getToolbarAttrs()
@@ -219,8 +256,12 @@ export class RadioButton extends CustomTkWidgetBase{
<div className="tw-flex tw-flex-col tw-gap-2 tw-w-fit tw-h-fit">
{
inputs.map((value, index) => {
const ref = index === 0 ? this.firstDivRef : null
return (
<div key={index} className="tw-flex tw-gap-2 tw-w-full tw-h-full tw-place-items-center ">
<div key={index} ref={ref} className="tw-flex tw-gap-2 tw-w-full tw-h-full tw-place-items-center ">
<div className="tw-border-solid tw-border-[#D9D9D9] tw-border-2
tw-min-w-[20px] tw-min-h-[20px] tw-w-[20px] tw-h-[20px]
tw-text-blue-600 tw-flex tw-items-center tw-justify-center

4
src/frameworks/customtk/widgets/optionMenu.js
View File

@@ -31,8 +31,8 @@ class OptionMenu extends CustomTkWidgetBase{
label: "Default Value",
tool: Tools.INPUT,
value: "Select option",
onChange: ({inputs, selectedRadio}) => {
this.setAttrValue("options", {inputs, selectedRadio})
onChange: (value) => {
this.setAttrValue("defaultValue", value)
}
},
widgetOptions: {

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

@@ -88,15 +88,15 @@ export class TkinterBase extends Widget {
config['x'] = Math.trunc(this.state.pos.x)
config['y'] = Math.trunc(this.state.pos.y)
config["width"] = Math.trunc(this.state.size.width)
config["height"] = Math.trunc(this.state.size.height)
// config["width"] = Math.trunc(this.state.size.width)
// config["height"] = Math.trunc(this.state.size.height)
// if (!this.state.fitContent.width){
// config["width"] = this.state.size.width
// }
// if (!this.state.fitContent.height){
// config["height"] = this.state.size.height
// }
if (!this.state.fitContent.width){
config["width"] = Math.trunc(this.state.size.width)
}
if (!this.state.fitContent.height){
config["height"] = Math.trunc(this.state.size.height)
}
const configStr = convertObjectToKeyValueString(config)
@@ -1034,6 +1034,7 @@ export class TkinterWidgetBase extends TkinterBase{
...this.state,
attrs: {
...newAttrs,
fitContent: {width: false, height: false},
styling: {
...newAttrs.styling,
foregroundColor: {
@@ -1181,7 +1182,7 @@ export class TkinterWidgetBase extends TkinterBase{
label: "font size",
tool: Tools.NUMBER_INPUT,
toolProps: {min: 3, max: 140},
value: null,
value: 10,
onChange: (value) => {
this.setWidgetInnerStyle("fontSize", `${value}px`)
this.setAttrValue("font.fontSize", value)

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

@@ -3,6 +3,8 @@ import Tools from "../../../canvas/constants/tools"
import { convertObjectToKeyValueString, removeKeyFromObject } from "../../../utils/common"
import { CheckSquareFilled } from "@ant-design/icons"
import { TkinterWidgetBase } from "./base"
import { Layouts } from "../../../canvas/constants/layouts"
import React from "react"
export class CheckBox extends TkinterWidgetBase{
@@ -136,6 +138,8 @@ export class RadioButton extends TkinterWidgetBase{
let newAttrs = removeKeyFromObject("layout", this.state.attrs)
this.firstDivRef = React.createRef()
this.state = {
...this.state,
size: { width: 80, height: 30 },
@@ -146,10 +150,9 @@ export class RadioButton extends TkinterWidgetBase{
radios: {
label: "Radio Group",
tool: Tools.INPUT_RADIO_LIST,
value: {inputs: ["default"], selectedRadio: null},
value: {inputs: ["default"], selectedRadio: -1},
onChange: ({inputs, selectedRadio}) => {
this.setAttrValue("radios", {inputs, selectedRadio}, () => {
console.log("attribute set: ", this.state.attrs.radios, {inputs, selectedRadio},)
})
}
}
@@ -164,6 +167,49 @@ export class RadioButton extends TkinterWidgetBase{
this.setWidgetInnerStyle("backgroundColor", "#fff0")
}
/**
*
* The index is required for pack as in pack every widget would be packed on top of each other in radio button
*/
getLayoutCode({index=0}){
let layoutManager = super.getLayoutCode()
const {layout: parentLayout, direction, gap, align="start"} = this.getParentLayout()
const absolutePositioning = this.getAttrValue("positioning")
if (parentLayout === Layouts.PLACE || absolutePositioning){
const config = {}
const elementRect = this.firstDivRef.current?.getBoundingClientRect()
config['x'] = Math.trunc(this.state.pos.x)
config['y'] = Math.trunc(this.state.pos.y)
if (elementRect?.height){
config['y'] = Math.trunc(config['y'] + (index * elementRect.height)) // the index is the radiobutton index
}
// config["width"] = Math.trunc(this.state.size.width)
// config["height"] = Math.trunc(this.state.size.height)
if (!this.state.fitContent.width){
config["width"] = Math.trunc(this.state.size.width)
}
if (!this.state.fitContent.height){
config["height"] = Math.trunc(this.state.size.height)
}
const configStr = convertObjectToKeyValueString(config)
layoutManager = `place(${configStr})`
}
return layoutManager
}
generateCode(variableName, parent){
const config = convertObjectToKeyValueString(this.getConfigCode())
@@ -178,9 +224,10 @@ export class RadioButton extends TkinterWidgetBase{
const radioBtnVariable = `${variableName}_${idx}`
code.push(`\n`)
// TODO increment the next widget with the height of the previous
code.push(`${radioBtnVariable} = tk.Radiobutton(master=${parent}, variable=${variableName}_var, text="${radio_text}")`)
code.push(`${radioBtnVariable}.config(${config}, value=${idx})`)
code.push(`${radioBtnVariable}.${this.getLayoutCode()}`)
code.push(`${radioBtnVariable}.${this.getLayoutCode({index: idx})}`)
})
const defaultSelected = radios.selectedRadio
@@ -218,8 +265,13 @@ export class RadioButton extends TkinterWidgetBase{
<div className="tw-flex tw-flex-col tw-gap-2 tw-w-fit tw-h-fit">
{
inputs.map((value, index) => {
const ref = index === 0 ? this.firstDivRef : null
return (
<div key={index} className="tw-flex tw-gap-2 tw-w-full tw-h-full tw-place-items-center ">
<div key={index}
ref={ref}
className="tw-flex tw-gap-2 tw-w-full tw-h-full tw-place-items-center ">
<div className="tw-border-solid tw-border-[#D9D9D9] tw-border-2
tw-min-w-[20px] tw-min-h-[20px] tw-w-[20px] tw-h-[20px]
tw-text-blue-600 tw-flex tw-items-center tw-justify-center

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

@@ -28,8 +28,8 @@ class OptionMenu extends TkinterWidgetBase{
label: "Default Value",
tool: Tools.INPUT,
value: "Select option",
onChange: ({inputs, selectedRadio}) => {
this.setAttrValue("options", {inputs, selectedRadio})
onChange: (value) => {
this.setAttrValue("defaultValue", value)
}
},
widgetOptions: {