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

fixed grid layout

Browse Source
This commit is contained in:
paul
2024-09-25 17:27:12 +05:30
parent 492115bb4c
commit ba1bfa9e03
19 changed files with 350 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/frameworks/tkinter/plugins/analogTimepicker.js
View File

@@ -34,7 +34,7 @@ class AnalogTimePicker extends Widget{
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.setWidgetInnerStyle("color", value)
this.setAttrValue("styling.foregroundColor", value)
}
}
@@ -92,7 +92,7 @@ class AnalogTimePicker extends Widget{
<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 tw-pointer-events-none"
style={this.state.widgetStyling} ref={this.timePickerRef}>
style={this.state.widgetInnerStyling} ref={this.timePickerRef}>
</div>
</div>

2
src/frameworks/tkinter/plugins/mapview.js
View File

@@ -52,7 +52,7 @@ class MapView extends Widget{
<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 tw-pointer-events-none"
style={this.state.widgetStyling}>
style={this.state.widgetInnerStyling}>
<div className="tw-relative tw-w-full tw-h-full">
<div className="tw-absolute tw-left-5 tw-top-3 tw-flex tw-flex-col tw-gap-2">
<div className="tw-text-white tw-bg-black tw-text-center

2
src/frameworks/tkinter/plugins/pandasTable.js
View File

@@ -107,7 +107,7 @@ class PandasTable extends Widget{
<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 tw-pointer-events-none"
style={this.state.widgetStyling}>
style={this.state.widgetInnerStyling}>
<ResizableTable />
</div>
</div>

2
src/frameworks/tkinter/plugins/videoPlayer.js
View File

@@ -51,7 +51,7 @@ class VideoPlayer extends Widget{
<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 tw-pointer-events-none"
style={this.state.widgetStyling}>
style={this.state.widgetInnerStyling}>
<div className="tw-relative tw-w-full tw-h-full">
<div className="tw-absolute tw-text-white tw-left-1/2 tw-top-1/2
tw--translate-x-1/2 tw--translate-y-1/2">

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

@@ -1,12 +1,12 @@
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"
import { CheckSquareFilled } from "@ant-design/icons"
import TkinterBase from "./base"
export class CheckBox extends Widget{
export class CheckBox extends TkinterBase{
static widgetType = "check_button"
// TODO: remove layouts
@@ -34,7 +34,7 @@ export class CheckBox extends Widget{
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.setWidgetInnerStyle("color", value)
this.setAttrValue("styling.foregroundColor", value)
}
}
@@ -61,7 +61,7 @@ export class CheckBox extends Widget{
super.componentDidMount()
// this.setAttrValue("styling.backgroundColor", "#fff")
this.setWidgetName("Checkbox")
this.setWidgetStyling("backgroundColor", "#fff0")
this.setWidgetInnerStyle("backgroundColor", "#fff0")
}
getToolbarAttrs(){
@@ -81,7 +81,7 @@ export class CheckBox extends Widget{
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}
style={this.state.widgetInnerStyling}
>
<div className="tw-flex tw-gap-2 tw-w-full tw-h-full tw-place-items-center tw-place-content-center">
@@ -135,7 +135,7 @@ export class RadioButton extends Widget{
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.setWidgetInnerStyle("color", value)
this.setAttrValue("styling.foregroundColor", value)
}
}
@@ -158,8 +158,8 @@ export class RadioButton extends Widget{
componentDidMount(){
super.componentDidMount()
// this.setAttrValue("styling.backgroundColor", "#fff")
this.setWidgetName("Checkbox")
this.setWidgetStyling("backgroundColor", "#fff0")
this.setWidgetName("Radio button")
this.setWidgetInnerStyle("backgroundColor", "#fff0")
}
getToolbarAttrs(){
@@ -182,7 +182,7 @@ export class RadioButton extends Widget{
return (
<div className="tw-flex tw-p-1 tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden"
style={this.state.widgetStyling}
style={this.state.widgetInnerStyling}
>
{
@@ -201,7 +201,7 @@ export class RadioButton extends Widget{
</div>
}
</div>
<span className="tw-text-base" style={{color: this.state.widgetStyling.foregroundColor}}>
<span className="tw-text-base" style={{color: this.state.widgetInnerStyling.foregroundColor}}>
{value}
</span>
</div>

197
src/frameworks/tkinter/widgets/base.js Normal file
View File

@@ -0,0 +1,197 @@
import { Layouts, PosType } from "../../../canvas/constants/layouts"
import Tools from "../../../canvas/constants/tools";
import Widget from "../../../canvas/widgets/base";
class TkinterBase extends Widget {
componentDidMount(){
super.componentDidMount()
console.log("parent layout: ", this.state.parentLayout)
// this.setParentLayout(this.props.initialData)
}
setParentLayout(layout){
// show attributes related to the layout manager
let updates = {
parentLayout: layout,
}
console.log("Parent layout updated1: ", layout)
this.removeAttr("gridManager")
if (layout === Layouts.FLEX || layout === Layouts.GRID) {
updates = {
...updates,
positionType: PosType.NONE
}
console.log("Manager1 :", layout)
if (layout === Layouts.GRID) {
// Set attributes related to grid layout manager
updates = {
...updates,
attrs: {
...this.state.attrs,
gridManager: {
label: "Grid manager",
display: "horizontal",
row: {
label: "Row",
tool: Tools.NUMBER_INPUT,
toolProps: { placeholder: "width", max: 1000, min: 1 },
value: 1,
onChange: (value) => {
this.setAttrValue("gridManager.row", value)
const previousRow = this.getWidgetOuterStyle("gridRow") || "1/1"
const [_row=1, rowSpan=1] = previousRow.replace(/\s+/g, '').split("/").map(Number)
this.setWidgetOuterStyle("gridRow", `${value+' / '+rowSpan}`)
}
},
rowSpan: {
label: "Row span",
tool: Tools.NUMBER_INPUT,
toolProps: { placeholder: "height", max: 1000, min: 1 },
value: 1,
onChange: (value) => {
this.setAttrValue("gridManager.rowSpan", value)
const previousRow = this.getWidgetOuterStyle("gridRow") || "1/1"
const [row=1, _rowSpan=1] = previousRow.replace(/\s+/g, '').split("/").map(Number)
this.setWidgetOuterStyle("gridRow", `${row + ' / ' +value}`)
}
},
column: {
label: "Column",
tool: Tools.NUMBER_INPUT,
toolProps: { placeholder: "height", max: 1000, min: 1 },
value: 1,
onChange: (value) => {
this.setAttrValue("gridManager.column", value)
const previousRow = this.getWidgetOuterStyle("gridColumn") || "1/1"
const [_col=1, colSpan=1] = previousRow.replace(/\s+/g, '').split("/").map(Number)
console.log("column: ", value, colSpan)
this.setWidgetOuterStyle("gridColumn", `${value +' / ' + colSpan}`)
}
},
columnSpan: {
label: "Column span",
tool: Tools.NUMBER_INPUT,
toolProps: { placeholder: "height", max: 1000, min: 1 },
value: 1,
onChange: (value) => {
this.setAttrValue("gridManager.columnSpan", value)
const previousCol = this.getWidgetOuterStyle("gridColumn") || "1/1"
console.log("Value: ", previousCol)
const [col=1, _colSpan=1] = previousCol.replace(/\s+/g, '').split("/").map(Number)
this.setWidgetOuterStyle("gridColumn", `${col + ' / ' + value}`)
}
},
}
}
}
}
} else if (layout === Layouts.PLACE) {
updates = {
...updates,
positionType: PosType.ABSOLUTE
}
}
console.log("Parent layout updated2: ", updates)
this.updateState(updates)
return updates
}
/**
* loads the data
* @param {object} data
*/
load = (data) => {
if (Object.keys(data).length === 0) return // no data to load
data = {...data} // create a shallow copy
const {attrs, parentLayout, ...restData} = data
let layoutUpdates = {
parentLayout: parentLayout
}
if (parentLayout === Layouts.FLEX || parentLayout === Layouts.GRID){
layoutUpdates = {
...layoutUpdates,
positionType: PosType.NONE
}
}else if (parentLayout === Layouts.PLACE){
layoutUpdates = {
...layoutUpdates,
positionType: PosType.ABSOLUTE
}
}
const newData = {
...restData,
...layoutUpdates
}
this.setState(newData, () => {
let layoutAttrs = this.setParentLayout(parentLayout).attrs || {}
console.log("loaded layout2: ", layoutUpdates)
// UPdates attrs
let newAttrs = { ...this.state.attrs, ...layoutAttrs }
// Iterate over each path in the updates object
Object.entries(attrs).forEach(([path, value]) => {
const keys = path.split('.')
const lastKey = keys.pop()
// Traverse the nested object within attrs
let nestedObject = newAttrs
keys.forEach(key => {
nestedObject[key] = { ...nestedObject[key] } // Ensure immutability for each nested level
nestedObject = nestedObject[key]
})
// Set the value at the last key
if (nestedObject[lastKey])
nestedObject[lastKey].value = value
})
this.updateState({ attrs: newAttrs })
})
}
}
export default TkinterBase

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

@@ -1,9 +1,10 @@
import Widget from "../../../canvas/widgets/base"
import Tools from "../../../canvas/constants/tools"
import { removeKeyFromObject } from "../../../utils/common"
import TkinterBase from "./base"
class Button extends Widget{
class Button extends TkinterBase{
static widgetType = "button"
@@ -25,7 +26,7 @@ class Button extends Widget{
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.setWidgetInnerStyle("color", value)
this.setAttrValue("styling.foregroundColor", value)
}
}
@@ -68,7 +69,7 @@ class Button extends Widget{
return (
<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}>
<div className="tw-p-2 tw-w-full tw-h-full tw-content-start " style={this.state.widgetInnerStyling}>
{/* {this.props.children} */}
<div className="tw-text-sm" style={{color: this.getAttrValue("styling.foregroundColor")}}>
{this.getAttrValue("buttonLabel")}

6
src/frameworks/tkinter/widgets/frame.js
View File

@@ -1,7 +1,8 @@
import Widget from "../../../canvas/widgets/base"
import TkinterBase from "./base"
class Frame extends Widget{
class Frame extends TkinterBase{
static widgetType = "frame"
@@ -25,9 +26,10 @@ class Frame extends Widget{
}
renderContent(){
// console.log("widget styling: ", this.state.widgetInnerStyling)
return (
<div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-relative 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-p-2 tw-w-full tw-h-full tw-content-start" style={this.state.widgetInnerStyling}>
{this.props.children}
</div>
</div>

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

@@ -1,9 +1,10 @@
import Widget from "../../../canvas/widgets/base"
import Tools from "../../../canvas/constants/tools"
import { removeKeyFromObject } from "../../../utils/common"
import TkinterBase from "./base"
export class Input extends Widget{
export class Input extends TkinterBase{
static widgetType = "entry"
@@ -26,7 +27,7 @@ export class Input extends Widget{
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.setWidgetInnerStyle("color", value)
this.setAttrValue("styling.foregroundColor", value)
}
}
@@ -67,7 +68,7 @@ export class Input extends Widget{
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-p-2 tw-w-full tw-h-full tw-flex tw-place-items-center" style={this.state.widgetInnerStyling}>
<div className="tw-text-sm tw-text-gray-300">
{this.getAttrValue("placeHolder")}
</div>
@@ -79,7 +80,7 @@ export class Input extends Widget{
}
export class Text extends Widget{
export class Text extends TkinterBase{
static widgetType = "Text"
@@ -102,7 +103,7 @@ export class Text extends Widget{
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.setWidgetInnerStyle("color", value)
this.setAttrValue("styling.foregroundColor", value)
}
}
@@ -142,7 +143,7 @@ export class Text extends Widget{
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-p-2 tw-w-full tw-h-full tw-content-start " style={this.state.widgetInnerStyling}>
<div className="tw-text-sm tw-text-gray-300">
{this.getAttrValue("placeHolder")}
</div>

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

@@ -1,19 +1,17 @@
import Widget from "../../../canvas/widgets/base"
import Tools from "../../../canvas/constants/tools"
import { removeKeyFromObject } from "../../../utils/common"
import TkinterBase from "./base"
class Label extends Widget{
class Label extends TkinterBase{
static widgetType = "label"
constructor(props) {
super(props)
this.droppableTags = {
// TODO: exclude all
exclude: ["image", "video", "media", "main_window", "toplevel"]
}
this.droppableTags = null
const newAttrs = removeKeyFromObject("layout", this.state.attrs)
@@ -30,7 +28,7 @@ class Label extends Widget{
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.setWidgetInnerStyle("color", value)
this.setAttrValue("styling.foregroundColor", value)
}
}
@@ -50,7 +48,7 @@ class Label extends Widget{
componentDidMount(){
super.componentDidMount()
this.setAttrValue("styling.backgroundColor", "#fff")
this.setWidgetStyling("backgroundColor", "#fff0")
this.setWidgetInnerStyle("backgroundColor", "#fff0")
}
getToolbarAttrs(){
@@ -70,7 +68,7 @@ class Label extends Widget{
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-p-2 tw-w-full tw-h-full tw-content-start " style={this.state.widgetInnerStyling}>
{/* {this.props.children} */}
<div className="tw-text-sm" style={{color: this.getAttrValue("styling.foregroundColor")}}>
{this.getAttrValue("labelWidget")}

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

@@ -65,7 +65,7 @@ class MainWindow extends Widget{
</div>
</div>
</div>
<div className="tw-p-2 tw-w-full tw-relative tw-h-full tw-overflow-hidden tw-content-start" style={this.state.widgetStyling}>
<div className="tw-p-2 tw-w-full tw-relative tw-h-full tw-overflow-hidden tw-content-start" style={this.state.widgetInnerStyling}>
{this.props.children}
</div>
</div>

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

@@ -3,9 +3,10 @@ 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"
class OptionMenu extends Widget{
class OptionMenu extends TkinterBase{
static widgetType = "option_menu"
// FIXME: the radio buttons are not visible because of the default heigh provided
@@ -34,7 +35,7 @@ class OptionMenu extends Widget{
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.setWidgetInnerStyle("color", value)
this.setAttrValue("styling.foregroundColor", value)
}
}
@@ -65,7 +66,7 @@ class OptionMenu extends Widget{
super.componentDidMount()
// this.setAttrValue("styling.backgroundColor", "#fff")
this.setWidgetName("Option menu")
this.setWidgetStyling("backgroundColor", "#fff")
this.setWidgetInnerStyle("backgroundColor", "#fff")
}
getToolbarAttrs(){
@@ -94,7 +95,7 @@ class OptionMenu extends Widget{
return (
<div className="tw-flex tw-p-1 tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden"
style={this.state.widgetStyling}
style={this.state.widgetInnerStyling}
onClick={this.toggleDropDownOpen}
>
<div className="tw-flex tw-justify-between tw-gap-1">
@@ -115,7 +116,7 @@ class OptionMenu extends Widget{
<div key={index} className="tw-flex tw-gap-2 tw-w-full tw-h-full tw-place-items-center
hover:tw-bg-[#c5c5c573] tw-p-1">
<span className="tw-text-base" style={{color: this.state.widgetStyling.foregroundColor}}>
<span className="tw-text-base" style={{color: this.state.widgetInnerStyling.foregroundColor}}>
{value}
</span>
</div>

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

@@ -1,9 +1,10 @@
import Widget from "../../../canvas/widgets/base"
import Tools from "../../../canvas/constants/tools"
import { removeKeyFromObject } from "../../../utils/common"
import TkinterBase from "./base"
class Slider extends Widget{
class Slider extends TkinterBase{
static widgetType = "scale"
@@ -26,7 +27,7 @@ class Slider extends Widget{
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.setWidgetInnerStyle("color", value)
this.setAttrValue("styling.foregroundColor", value)
}
}

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

@@ -2,9 +2,10 @@ import Widget from "../../../canvas/widgets/base"
import Tools from "../../../canvas/constants/tools"
import { removeKeyFromObject } from "../../../utils/common"
import { DownOutlined, UpOutlined } from "@ant-design/icons"
import TkinterBase from "./base"
class SpinBox extends Widget{
class SpinBox extends TkinterBase{
static widgetType = "spin_box"
constructor(props) {
@@ -26,7 +27,7 @@ class SpinBox extends Widget{
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.setWidgetInnerStyle("color", value)
this.setAttrValue("styling.foregroundColor", value)
}
}
@@ -92,7 +93,7 @@ class SpinBox extends Widget{
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 tw-justify-between" style={this.state.widgetStyling}>
<div className="tw-p-2 tw-w-full tw-h-full tw-flex tw-place-items-center tw-justify-between" style={this.state.widgetInnerStyling}>
<div className="tw-text-sm ">
{this.getAttrValue("spinProps.default")}
</div>

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

@@ -65,7 +65,7 @@ class TopLevel extends Widget{
</div>
</div>
</div>
<div className="tw-p-2 tw-w-full tw-h-full tw-content-start" style={this.state.widgetStyling}>
<div className="tw-p-2 tw-w-full tw-h-full tw-content-start" style={this.state.widgetInnerStyling}>
{this.props.children}
</div>
</div>