feat: added basic tkinter widgets
This commit is contained in:
paul
104
src/frameworks/tkinter/widgets/button.js
Normal file
104
src/frameworks/tkinter/widgets/button.js
Normal file
@@ -0,0 +1,104 @@
|
||||
import Widget from "../../../canvas/widgets/base"
|
||||
import Tools from "../../../canvas/constants/tools"
|
||||
|
||||
|
||||
class Button extends Widget{
|
||||
|
||||
static widgetType = "button"
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
||||
// TODO: disable drop
|
||||
|
||||
this.droppableTags = {
|
||||
// TODO: exclude all
|
||||
exclude: ["image", "video", "media", "main_window", "toplevel"]
|
||||
}
|
||||
|
||||
this.state = {
|
||||
...this.state,
|
||||
size: { width: 80, height: 40 },
|
||||
attrs: {
|
||||
...this.state.attrs,
|
||||
styling: {
|
||||
...this.state.attrs.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)
|
||||
}
|
||||
}
|
||||
},
|
||||
buttonLabel: {
|
||||
label: "Button Label",
|
||||
tool: Tools.INPUT, // the tool to display, can be either HTML ELement or a constant string
|
||||
toolProps: {placeholder: "Button label", maxLength: 100},
|
||||
value: "Button",
|
||||
onChange: (value) => this.setAttrValue("buttonLabel", value)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
super.componentDidMount()
|
||||
this.setAttrValue("styling.backgroundColor", "#E4E2E2")
|
||||
}
|
||||
|
||||
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)
|
||||
},
|
||||
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)
|
||||
},
|
||||
},
|
||||
|
||||
...this.state.attrs,
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
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-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")}}>
|
||||
{this.getAttrValue("buttonLabel")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
export default Button
|
||||
40
src/frameworks/tkinter/widgets/frame.js
Normal file
40
src/frameworks/tkinter/widgets/frame.js
Normal file
@@ -0,0 +1,40 @@
|
||||
import Widget from "../../../canvas/widgets/base"
|
||||
|
||||
|
||||
class Frame extends Widget{
|
||||
|
||||
static widgetType = "frame"
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
||||
this.droppableTags = {
|
||||
exclude: ["image", "video", "media"]
|
||||
}
|
||||
|
||||
this.state = {
|
||||
...this.state,
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
super.componentDidMount()
|
||||
this.setAttrValue("styling.backgroundColor", "#EDECEC")
|
||||
this.setWidgetName("frame")
|
||||
}
|
||||
|
||||
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-content-start" style={this.state.widgetStyling}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
export default Frame
|
||||
101
src/frameworks/tkinter/widgets/input.js
Normal file
101
src/frameworks/tkinter/widgets/input.js
Normal file
@@ -0,0 +1,101 @@
|
||||
import Widget from "../../../canvas/widgets/base"
|
||||
import Tools from "../../../canvas/constants/tools"
|
||||
|
||||
|
||||
class Input extends Widget{
|
||||
|
||||
static widgetType = "input"
|
||||
// TODO: override the widgetName value
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
||||
this.droppableTags = {
|
||||
// TODO: exclude all
|
||||
exclude: ["image", "video", "media", "main_window", "toplevel"]
|
||||
}
|
||||
|
||||
this.state = {
|
||||
...this.state,
|
||||
size: { width: 120, height: 40 },
|
||||
attrs: {
|
||||
...this.state.attrs,
|
||||
styling: {
|
||||
...this.state.attrs.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)
|
||||
}
|
||||
}
|
||||
},
|
||||
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")
|
||||
}
|
||||
|
||||
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)
|
||||
},
|
||||
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)
|
||||
},
|
||||
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)
|
||||
},
|
||||
},
|
||||
|
||||
...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-content-start " style={this.state.widgetStyling}>
|
||||
<div className="tw-text-sm tw-text-gray-300">
|
||||
{this.getAttrValue("placeHolder")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
export default Input
|
||||
102
src/frameworks/tkinter/widgets/label.js
Normal file
102
src/frameworks/tkinter/widgets/label.js
Normal file
@@ -0,0 +1,102 @@
|
||||
import Widget from "../../../canvas/widgets/base"
|
||||
import Tools from "../../../canvas/constants/tools"
|
||||
|
||||
|
||||
class Label extends Widget{
|
||||
|
||||
static widgetType = "label"
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
||||
this.droppableTags = {
|
||||
// TODO: exclude all
|
||||
exclude: ["image", "video", "media", "main_window", "toplevel"]
|
||||
}
|
||||
|
||||
this.state = {
|
||||
...this.state,
|
||||
size: { width: 80, height: 40 },
|
||||
attrs: {
|
||||
...this.state.attrs,
|
||||
styling: {
|
||||
...this.state.attrs.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)
|
||||
}
|
||||
}
|
||||
},
|
||||
labelWidget: {
|
||||
label: "Text",
|
||||
tool: Tools.INPUT, // the tool to display, can be either HTML ELement or a constant string
|
||||
toolProps: {placeholder: "text", maxLength: 100},
|
||||
value: "Label",
|
||||
onChange: (value) => this.setAttrValue("labelWidget", value)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
super.componentDidMount()
|
||||
this.setAttrValue("styling.backgroundColor", "#E4E2E2")
|
||||
}
|
||||
|
||||
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)
|
||||
},
|
||||
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)
|
||||
},
|
||||
},
|
||||
|
||||
...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-content-start " style={this.state.widgetStyling}>
|
||||
{/* {this.props.children} */}
|
||||
<div className="tw-text-sm" style={{color: this.getAttrValue("styling.foregroundColor")}}>
|
||||
{this.getAttrValue("labelWidget")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
export default Label
|
||||
@@ -1,5 +1,5 @@
|
||||
import { CloseCircleFilled, ExpandOutlined, MinusCircleFilled } from "@ant-design/icons"
|
||||
import Widget from "../../../canvas/widgets/base"
|
||||
import Tools from "../../../canvas/constants/tools"
|
||||
|
||||
|
||||
class MainWindow extends Widget{
|
||||
@@ -10,21 +10,73 @@ class MainWindow extends Widget{
|
||||
super(props)
|
||||
|
||||
this.droppableTags = {
|
||||
exclude: ["image", "video", "media"]
|
||||
exclude: ["image", "video", "media", "main_window", "toplevel"]
|
||||
}
|
||||
|
||||
this.state = {
|
||||
...this.state,
|
||||
size: { width: 700, height: 400 },
|
||||
attrs: {
|
||||
...this.state.attrs,
|
||||
title: {
|
||||
label: "Window Title",
|
||||
tool: Tools.INPUT, // the tool to display, can be either HTML ELement or a constant string
|
||||
toolProps: {placeholder: "Window title", maxLength: 40},
|
||||
value: "Main Window",
|
||||
onChange: (value) => this.setAttrValue("title", value)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
super.componentDidMount()
|
||||
this.setAttrValue("styling.backgroundColor", "#E4E2E2")
|
||||
}
|
||||
|
||||
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)
|
||||
},
|
||||
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)
|
||||
},
|
||||
},
|
||||
|
||||
...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-flex tw-w-full tw-h-[25px] tw-bg-[#adadad] tw-shadow-md">
|
||||
<div className="tw-ml-auto tw-flex tw-gap-1 tw-p-1 tw-place-items-center">
|
||||
<div className="tw-flex tw-w-full tw-h-[25px] tw-bg-[#c7c7c7] tw-p-1
|
||||
tw-overflow-hidden tw-shadow-xl tw-place-items-center">
|
||||
<div className="tw-text-sm">{this.getAttrValue("title")}</div>
|
||||
<div className="tw-ml-auto tw-flex tw-gap-1 tw-place-items-center">
|
||||
<div className="tw-bg-yellow-400 tw-rounded-full tw-w-[15px] tw-h-[15px]">
|
||||
</div>
|
||||
<div className="tw-bg-blue-400 tw-rounded-full tw-w-[15px] tw-h-[15px]">
|
||||
|
||||
99
src/frameworks/tkinter/widgets/toplevel.js
Normal file
99
src/frameworks/tkinter/widgets/toplevel.js
Normal file
@@ -0,0 +1,99 @@
|
||||
import Widget from "../../../canvas/widgets/base"
|
||||
import Tools from "../../../canvas/constants/tools"
|
||||
|
||||
|
||||
class TopLevel extends Widget{
|
||||
|
||||
static widgetType = "toplevel"
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
||||
this.droppableTags = {
|
||||
exclude: ["image", "video", "media", "main_window", "toplevel"]
|
||||
}
|
||||
this.maxSize = { width: 2000, height: 2000 } // disables resizing above this number
|
||||
|
||||
this.state = {
|
||||
...this.state,
|
||||
size: { width: 450, height: 200 },
|
||||
attrs: {
|
||||
...this.state.attrs,
|
||||
title: {
|
||||
label: "Window Title",
|
||||
tool: Tools.INPUT, // the tool to display, can be either HTML ELement or a constant string
|
||||
toolProps: {placeholder: "Window title", maxLength: 40},
|
||||
value: "Top level",
|
||||
onChange: (value) => this.setAttrValue("title", value)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
super.componentDidMount()
|
||||
this.setAttrValue("styling.backgroundColor", "#E4E2E2")
|
||||
}
|
||||
|
||||
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)
|
||||
},
|
||||
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)
|
||||
},
|
||||
},
|
||||
|
||||
...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-flex tw-w-full tw-h-[25px] tw-bg-[#c7c7c7] tw-p-1
|
||||
tw-overflow-hidden tw-shadow-xl tw-place-items-center">
|
||||
<div className="tw-text-sm">{this.getAttrValue("title")}</div>
|
||||
<div className="tw-ml-auto tw-flex tw-gap-1 tw-place-items-center">
|
||||
<div className="tw-bg-yellow-400 tw-rounded-full tw-w-[15px] tw-h-[15px]">
|
||||
</div>
|
||||
<div className="tw-bg-blue-400 tw-rounded-full tw-w-[15px] tw-h-[15px]">
|
||||
</div>
|
||||
<div className="tw-bg-red-400 tw-rounded-full tw-w-[15px] tw-h-[15px]">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="tw-p-2 tw-w-full tw-h-full tw-content-start" style={this.state.widgetStyling}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
export default TopLevel
|
||||
Reference in New Issue
Block a user