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

fix: widget initialData load. feat: added more widgets

Browse Source
This commit is contained in:
paul
2024-09-23 18:25:40 +05:30
parent 5d40894a40
commit 1533888f07
11 changed files with 421 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/frameworks/tkinter/sidebarWidgets.js
View File

@@ -2,12 +2,13 @@
import Widget from "../../canvas/widgets/base"
import ButtonWidget from "./assets/widgets/button.png"
import { CheckBox } from "./widgets/ checkButton"
import { CheckBox, RadioButton } from "./widgets/ checkButton"
import Button from "./widgets/button"
import Frame from "./widgets/frame"
import { Input, Text } from "./widgets/input"
import Label from "./widgets/label"
import MainWindow from "./widgets/mainWindow"
import Slider from "./widgets/slider"
import TopLevel from "./widgets/toplevel"
@@ -60,6 +61,19 @@ const TkinterSidebar = [
link: "https://github.com",
widgetClass: CheckBox
},
{
name: "Radio button",
img: ButtonWidget,
link: "https://github.com",
widgetClass: RadioButton
},
{
name: "Scale",
img: ButtonWidget,
link: "https://github.com",
widgetClass: Slider
},
]

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

@@ -48,7 +48,6 @@ export class CheckBox extends Widget{
defaultChecked: {
label: "Checked",
tool: Tools.CHECK_BUTTON, // the tool to display, can be either HTML ELement or a constant string
toolProps: {placeholder: "text", maxLength: 100},
value: true,
onChange: (value) => this.setAttrValue("defaultChecked", value)
}
@@ -103,4 +102,113 @@ export class CheckBox extends Widget{
)
}
}
export class RadioButton extends Widget{
static widgetType = "radio_button"
// 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
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' },
attrs: {
...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.setWidgetStyling("color", value)
this.setAttrValue("styling.foregroundColor", value)
}
}
},
radios: {
label: "Radio Group",
tool: Tools.INPUT_RADIO_LIST,
value: {inputs: ["default"], selectedRadio: -1},
onChange: ({inputs, selectedRadio}) => {
this.setAttrValue("radios", {inputs, selectedRadio})
}
}
}
}
}
componentDidMount(){
super.componentDidMount()
// this.setAttrValue("styling.backgroundColor", "#fff")
this.setWidgetName("Checkbox")
this.setWidgetStyling("backgroundColor", "#fff0")
}
getToolbarAttrs(){
const toolBarAttrs = super.getToolbarAttrs()
const attrs = this.state.attrs
return ({
id: this.__id,
widgetName: toolBarAttrs.widgetName,
checkLabel: attrs.checkLabel,
size: toolBarAttrs.size,
...attrs,
})
}
renderContent(){
const {inputs, selectedRadio} = this.getAttrValue("radios")
return (
<div className="tw-flex tw-p-1 tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden"
style={this.state.widgetStyling}
>
{
inputs.map((value, index) => {
return (
<div key={index} 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
tw-rounded-full tw-overflow-hidden tw-p-1">
{
selectedRadio === index &&
<div className="tw-rounded-full tw-bg-blue-600 tw-w-full tw-h-full">
</div>
}
</div>
<span className="tw-text-base" style={{color: this.state.widgetStyling.foregroundColor}}>
{value}
</span>
</div>
)
})
}
</div>
)
}
}

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

@@ -62,7 +62,7 @@ class Button extends Widget{
id: this.__id,
widgetName: toolBarAttrs.widgetName,
buttonLabel: this.state.attrs.buttonLabel,
size: toolBarAttrs.widgetName,
size: toolBarAttrs.size,
...this.state.attrs,

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

@@ -57,7 +57,7 @@ export class Input extends Widget{
id: this.__id,
widgetName: toolBarAttrs.widgetName,
placeHolder: this.state.attrs.placeHolder,
size: toolBarAttrs.widgetName,
size: toolBarAttrs.size,
...this.state.attrs,

100
src/frameworks/tkinter/widgets/slider.js Normal file
View File

@@ -0,0 +1,100 @@
import Widget from "../../../canvas/widgets/base"
import Tools from "../../../canvas/constants/tools"
import { removeKeyFromObject } from "../../../utils/common"
class Slider extends Widget{
static widgetType = "scale"
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 },
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.setWidgetStyling("color", value)
this.setAttrValue("styling.foregroundColor", value)
}
}
},
scale: {
label: "Scale",
display: "horizontal",
min: {
label: "Min",
tool: Tools.NUMBER_INPUT, // the tool to display, can be either HTML ELement or a constant string
toolProps: { placeholder: "min" },
value: 0,
onChange: (value) => this.setAttrValue("scale.min", value)
},
max: {
label: "Max",
tool: Tools.NUMBER_INPUT,
toolProps: { placeholder: "max"},
value: 100,
onChange: (value) => this.setAttrValue("scale.max", value)
},
step: {
label: "Step",
tool: Tools.NUMBER_INPUT,
toolProps: { placeholder: "max", stringMode: true, step: "0.1"},
value: 1,
onChange: (value) => this.setAttrValue("scale.step", value)
}
},
}
}
}
componentDidMount(){
super.componentDidMount()
this.setAttrValue("styling.backgroundColor", "#fff")
this.setWidgetName("Scale")
}
getToolbarAttrs(){
const toolBarAttrs = super.getToolbarAttrs()
return ({
id: this.__id,
widgetName: toolBarAttrs.widgetName,
placeHolder: this.state.attrs.placeHolder,
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-p-2 tw-w-full tw-h-full tw-flex tw-place-items-center" style={this.state.widgetStyling}>
<div className="tw-text-sm tw-text-gray-300">
{this.getAttrValue("placeHolder")}
</div>
</div>
</div>
)
}
}
export default Slider