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

feat: added checkbox and other widgets for tkinter

Browse Source
This commit is contained in:
paul
2024-09-23 12:31:01 +05:30
parent 1b9e049d91
commit 5d40894a40
18 changed files with 437 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,9 +2,10 @@
import Widget from "../../canvas/widgets/base"
import ButtonWidget from "./assets/widgets/button.png"
import { CheckBox } from "./widgets/ checkButton"
import Button from "./widgets/button"
import Frame from "./widgets/frame"
import Input from "./widgets/input"
import { Input, Text } from "./widgets/input"
import Label from "./widgets/label"
import MainWindow from "./widgets/mainWindow"
import TopLevel from "./widgets/toplevel"
@@ -42,12 +43,50 @@ const TkinterSidebar = [
widgetClass: Button
},
{
name: "Input",
name: "Entry",
img: ButtonWidget,
link: "https://github.com",
widgetClass: Input
},
{
name: "Text",
img: ButtonWidget,
link: "https://github.com",
widgetClass: Text
},
{
name: "CheckBox",
img: ButtonWidget,
link: "https://github.com",
widgetClass: CheckBox
},
]
export default TkinterSidebar
export default TkinterSidebar
/**
* widgets = {
"Tk": set(),
"Label": set(),
"Button": set(),
"Entry": set(),
"CheckButton": set(),
"RadioButton": set(),
"Scale": set(),
"ListBox": set(),
"Frame": set(),
"LabelFrame": set(),
"PanedWindow": set(),
"SpinBox": set(),
"OptionMenu": set(),
"Canvas": set(),
"TopLevel": set(),
"Message": set(),
"Menu": set(),
"MenuButton": set(),
"ScrollBar": set(),
"Text": set()
}
*/

106
src/frameworks/tkinter/widgets/ checkButton.js Normal file
View File

@@ -0,0 +1,106 @@
import Widget from "../../../canvas/widgets/base"
import Tools from "../../../canvas/constants/tools"
import { Checkbox } from "antd"
import { removeKeyFromObject } from "../../../utils/common"
import { CheckOutlined, CheckSquareFilled } from "@ant-design/icons"
export class CheckBox extends Widget{
static widgetType = "check_button"
// TODO: remove layouts
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: 30 },
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)
}
}
},
checkLabel: {
label: "Check Label",
tool: Tools.INPUT, // the tool to display, can be either HTML ELement or a constant string
toolProps: {placeholder: "Button label", maxLength: 100},
value: "Checkbox",
onChange: (value) => this.setAttrValue("checkLabel", value)
},
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)
}
}
}
}
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(){
return (
<div className="tw-flex tw-p-1 tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden"
style={this.state.widgetStyling}
>
<div className="tw-flex tw-gap-2 tw-w-full tw-h-full tw-place-items-center tw-place-content-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-md tw-overflow-hidden">
{
this.getAttrValue("defaultChecked") === true &&
<CheckSquareFilled className="tw-text-[20px]" />
}
</div>
{this.getAttrValue("checkLabel")}
</div>
</div>
)
}
}

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

@@ -1,5 +1,6 @@
import Widget from "../../../canvas/widgets/base"
import Tools from "../../../canvas/constants/tools"
import { removeKeyFromObject } from "../../../utils/common"
class Button extends Widget{
@@ -15,14 +16,15 @@ class Button extends Widget{
// TODO: exclude all
exclude: ["image", "video", "media", "main_window", "toplevel"]
}
const newAttrs = removeKeyFromObject("layout", this.state.attrs)
this.state = {
...this.state,
size: { width: 80, height: 40 },
attrs: {
...this.state.attrs,
...newAttrs,
styling: {
...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
@@ -47,38 +49,20 @@ class Button extends Widget{
componentDidMount(){
super.componentDidMount()
this.setWidgetName("button")
this.setAttrValue("styling.backgroundColor", "#E4E2E2")
}
getToolbarAttrs(){
const toolBarAttrs = super.getToolbarAttrs()
return ({
id: this.__id,
widgetName: {
label: "Widget Name",
tool: Tools.INPUT, // the tool to display, can be either HTML ELement or a constant string
toolProps: { placeholder: "Widget name", maxLength: 40 },
value: this.state.widgetName,
onChange: (value) => this.setWidgetName(value)
},
widgetName: toolBarAttrs.widgetName,
buttonLabel: this.state.attrs.buttonLabel,
size: {
label: "Size",
display: "horizontal",
width: {
label: "Width",
tool: Tools.NUMBER_INPUT, // the tool to display, can be either HTML ELement or a constant string
toolProps: { placeholder: "width", max: this.maxSize.width, min: this.minSize.width },
value: this.state.size.width || 100,
onChange: (value) => this.setWidgetSize(value, null)
},
height: {
label: "Height",
tool: Tools.NUMBER_INPUT,
toolProps: { placeholder: "height", max: this.maxSize.height, min: this.minSize.height },
value: this.state.size.height || 100,
onChange: (value) => this.setWidgetSize(null, value)
},
},
size: toolBarAttrs.widgetName,
...this.state.attrs,
@@ -87,7 +71,8 @@ class Button extends Widget{
renderContent(){
return (
<div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md tw-border tw-border-solid tw-overflow-hidden">
<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-h-full tw-content-start " style={this.state.widgetStyling}>
{/* {this.props.children} */}
<div className="tw-text-sm" style={{color: this.getAttrValue("styling.foregroundColor")}}>

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

@@ -1,26 +1,26 @@
import Widget from "../../../canvas/widgets/base"
import Tools from "../../../canvas/constants/tools"
import { removeKeyFromObject } from "../../../utils/common"
class Input extends Widget{
export class Input extends Widget{
static widgetType = "input"
// TODO: override the widgetName value
static widgetType = "entry"
// TODO: remove layouts
constructor(props) {
super(props)
this.droppableTags = {
// TODO: exclude all
exclude: ["image", "video", "media", "main_window", "toplevel"]
}
this.droppableTags = null // disables drops
const newAttrs = removeKeyFromObject("layout", this.state.attrs)
this.state = {
...this.state,
size: { width: 120, height: 40 },
attrs: {
...this.state.attrs,
...newAttrs,
styling: {
...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
@@ -46,37 +46,93 @@ class Input extends Widget{
componentDidMount(){
super.componentDidMount()
this.setAttrValue("styling.backgroundColor", "#fff")
this.setWidgetName("Entry")
}
getToolbarAttrs(){
const toolBarAttrs = super.getToolbarAttrs()
return ({
id: this.__id,
widgetName: {
label: "Widget Name",
tool: Tools.INPUT, // the tool to display, can be either HTML ELement or a constant string
toolProps: { placeholder: "Widget name", maxLength: 40 },
value: this.state.widgetName,
onChange: (value) => this.setWidgetName(value)
},
widgetName: toolBarAttrs.widgetName,
placeHolder: this.state.attrs.placeHolder,
size: {
label: "Size",
display: "horizontal",
width: {
label: "Width",
tool: Tools.NUMBER_INPUT, // the tool to display, can be either HTML ELement or a constant string
toolProps: { placeholder: "width", max: this.maxSize.width, min: this.minSize.width },
value: this.state.size.width || 100,
onChange: (value) => this.setWidgetSize(value, null)
size: toolBarAttrs.widgetName,
...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 class Text extends Widget{
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.setWidgetStyling("color", value)
this.setAttrValue("styling.foregroundColor", value)
}
}
},
height: {
label: "Height",
tool: Tools.NUMBER_INPUT,
toolProps: { placeholder: "height", max: this.maxSize.height, min: this.minSize.height },
value: this.state.size.height || 100,
onChange: (value) => this.setWidgetSize(null, value)
},
},
placeHolder: {
label: "PlaceHolder",
tool: Tools.INPUT, // the tool to display, can be either HTML ELement or a constant string
toolProps: {placeholder: "text", maxLength: 100},
value: "placeholder text",
onChange: (value) => this.setAttrValue("placeHolder", value)
}
}
}
}
componentDidMount(){
super.componentDidMount()
this.setAttrValue("styling.backgroundColor", "#fff")
this.setWidgetName("text")
}
getToolbarAttrs(){
const toolBarAttrs = super.getToolbarAttrs()
return ({
id: this.__id,
widgetName: toolBarAttrs.widgetName,
placeHolder: this.state.attrs.placeHolder,
size: toolBarAttrs.size,
...this.state.attrs,
@@ -96,6 +152,3 @@ class Input extends Widget{
}
}
export default Input

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

@@ -1,5 +1,6 @@
import Widget from "../../../canvas/widgets/base"
import Tools from "../../../canvas/constants/tools"
import { removeKeyFromObject } from "../../../utils/common"
class Label extends Widget{
@@ -14,13 +15,16 @@ class Label extends Widget{
exclude: ["image", "video", "media", "main_window", "toplevel"]
}
const newAttrs = removeKeyFromObject("layout", this.state.attrs)
this.state = {
...this.state,
size: { width: 80, height: 40 },
attrs: {
...this.state.attrs,
...newAttrs,
styling: {
...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
@@ -45,38 +49,18 @@ class Label extends Widget{
componentDidMount(){
super.componentDidMount()
this.setAttrValue("styling.backgroundColor", "#E4E2E2")
this.setAttrValue("styling.backgroundColor", "#fff")
this.setWidgetStyling("backgroundColor", "#fff0")
}
getToolbarAttrs(){
const toolBarAttrs = super.getToolbarAttrs()
return ({
id: this.__id,
widgetName: {
label: "Widget Name",
tool: Tools.INPUT, // the tool to display, can be either HTML ELement or a constant string
toolProps: { placeholder: "Widget name", maxLength: 40 },
value: this.state.widgetName,
onChange: (value) => this.setWidgetName(value)
},
widgetName: toolBarAttrs.widgetName,
labelWidget: this.state.attrs.labelWidget,
size: {
label: "Size",
display: "horizontal",
width: {
label: "Width",
tool: Tools.NUMBER_INPUT, // the tool to display, can be either HTML ELement or a constant string
toolProps: { placeholder: "width", max: this.maxSize.width, min: this.minSize.width },
value: this.state.size.width || 100,
onChange: (value) => this.setWidgetSize(value, null)
},
height: {
label: "Height",
tool: Tools.NUMBER_INPUT,
toolProps: { placeholder: "height", max: this.maxSize.height, min: this.minSize.height },
value: this.state.size.height || 100,
onChange: (value) => this.setWidgetSize(null, value)
},
},
size: toolBarAttrs.size,
...this.state.attrs,

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

@@ -33,37 +33,17 @@ class MainWindow extends Widget{
componentDidMount(){
super.componentDidMount()
this.setAttrValue("styling.backgroundColor", "#E4E2E2")
this.setWidgetName("main")
}
getToolbarAttrs(){
const toolBarAttrs = super.getToolbarAttrs()
return ({
id: this.__id,
widgetName: {
label: "Widget Name",
tool: Tools.INPUT, // the tool to display, can be either HTML ELement or a constant string
toolProps: { placeholder: "Widget name", maxLength: 40 },
value: this.state.widgetName,
onChange: (value) => this.setWidgetName(value)
},
widgetName: toolBarAttrs.widgetName,
title: this.state.attrs.title,
size: {
label: "Size",
display: "horizontal",
width: {
label: "Width",
tool: Tools.NUMBER_INPUT, // the tool to display, can be either HTML ELement or a constant string
toolProps: { placeholder: "width", max: this.maxSize.width, min: this.minSize.width },
value: this.state.size.width || 100,
onChange: (value) => this.setWidgetSize(value, null)
},
height: {
label: "Height",
tool: Tools.NUMBER_INPUT,
toolProps: { placeholder: "height", max: this.maxSize.height, min: this.minSize.height },
value: this.state.size.height || 100,
onChange: (value) => this.setWidgetSize(null, value)
},
},
size: toolBarAttrs.size,
...this.state.attrs,

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

@@ -34,37 +34,16 @@ class TopLevel extends Widget{
componentDidMount(){
super.componentDidMount()
this.setAttrValue("styling.backgroundColor", "#E4E2E2")
this.setWidgetName("toplevel")
}
getToolbarAttrs(){
const toolBarAttrs = super.getToolbarAttrs()
return ({
id: this.__id,
widgetName: {
label: "Widget Name",
tool: Tools.INPUT, // the tool to display, can be either HTML ELement or a constant string
toolProps: { placeholder: "Widget name", maxLength: 40 },
value: this.state.widgetName,
onChange: (value) => this.setWidgetName(value)
},
widgetName: toolBarAttrs.widgetName,
title: this.state.attrs.title,
size: {
label: "Size",
display: "horizontal",
width: {
label: "Width",
tool: Tools.NUMBER_INPUT, // the tool to display, can be either HTML ELement or a constant string
toolProps: { placeholder: "width", max: this.maxSize.width, min: this.minSize.width },
value: this.state.size.width || 100,
onChange: (value) => this.setWidgetSize(value, null)
},
height: {
label: "Height",
tool: Tools.NUMBER_INPUT,
toolProps: { placeholder: "height", max: this.maxSize.height, min: this.minSize.height },
value: this.state.size.height || 100,
onChange: (value) => this.setWidgetSize(null, value)
},
},
size: toolBarAttrs.size,
...this.state.attrs,