{widget}
{this.renderPackWidgetsRecursively(widgets, index + 1, side)}
);
};
/**
*
* Helps with pack layout manager and grid manager
*/
renderTkinterLayout(){
const {layout, direction, gap} = this.getLayout()
if (layout === Layouts.FLEX){
return (
<>
{this.renderPackWidgetsRecursively(this.props.children)}
)
}
return (<>{this.props.children})
}
setLayout(value) {
const { layout, direction, grid = { rows: 1, cols: 1 }, gap = 10, align } = value
// console.log("layout value: ", value)
// FIXME: In grid layout the layout doesn't adapt to the size of the child if resized
let widgetStyle = {
...this.state.widgetInnerStyling,
display: layout !== Layouts.PLACE ? (layout === "grid" ? "grid" : "flex" ) : "block",
flexDirection: "column",
// flexDirection: direction,
gap: `${gap}px`,
gridTemplateColumns: "repeat(3, max-content)",
gridTemplateRows: "repeat(3, max-content)",
// gridTemplateColumns: "repeat(auto-fill, minmax(100px, auto))",
// gridTemplateRows: "repeat(auto-fill, minmax(100px, auto))",
}
if (layout === Layouts.GRID){
const {gridManager, flexManager, positioning, ...restAttrs} = this.state.attrs
const updates = {
attrs: {
...restAttrs,
gridConfig: {
label: "Grid Configure",
display: "horizontal",
noOfRows: {
label: "No of rows",
tool: Tools.NUMBER_INPUT,
toolProps: { placeholder: "no of rows", max: 1000, min: 1 },
value: 3,
onChange: (value) => {
this.setAttrValue("gridConfig.noOfRows", value)
const gridWeights = this.getAttrValue("gridConfig.rowWeights")
let gridTemplateRows = `repeat(${value}, max-content)`
if (gridWeights){
gridTemplateRows = Array.from({ length: value }, (_, i) =>
`${gridWeights[i + 1]}fr` || "max-content"
).join(" ") // creates "max-content max-content 1fr 3fr" depending on value
}
const widgetStyle = {
...this.state.widgetInnerStyling,
gridTemplateRows: gridTemplateRows
}
this.updateState({
widgetInnerStyling: widgetStyle
})
}
},
noOfCols: {
label: "No of cols",
tool: Tools.NUMBER_INPUT,
toolProps: { placeholder: "no of cols", max: 1000, min: 1 },
value: 3,
onChange: (value) => {
this.setAttrValue("gridConfig.noOfCols", value)
const widgetStyle = {
...this.state.widgetInnerStyling,
gridTemplateColumns: `repeat(${value}, max-content)`
}
this.updateState({
widgetInnerStyling: widgetStyle
})
}
},
},
gridWeights: {
label: "Grid weights",
display: "vertical",
rowWeights: {
label: "Row weights",
tool: Tools.CUSTOM,
toolProps: {
// placeholder: "weight",
// defaultWeightMapping: this.getAttrValue("gridWeights.rowWeights"),
},
value: undefined,
Component: DynamicGridWeightInput,
onChange: (value) => {
if (!value) return
this.setAttrValue("gridWeights.rowWeights", value)
const noOfRows = this.getAttrValue("gridConfig.noOfRows")
const gridTemplateRows = Array.from({ length: noOfRows }, (_, i) => {
const row = value[i] // Get the row object
return row ? `${row.weight}fr` : "max-content"; // Use weight if available
}).join(" ") // creates "max-content max-content 1fr 3fr" depending on value
this.setWidgetInnerStyle("gridTemplateRows", gridTemplateRows)
}
},
colWeights: {
label: "Column weights",
tool: Tools.CUSTOM,
toolProps: {
// placeholder: "weight",
// defaultWeightMapping: {0: {weight: 0, gridNo: 0}}
},
value: undefined,
Component: DynamicGridWeightInput,
onChange: (value) => {
if (!value) return
this.setAttrValue("gridWeights.colWeights", value)
const noOfCols = this.getAttrValue("gridConfig.noOfCols")
const gridTemplateCol = Array.from({ length: noOfCols }, (_, i) => {
const col = value[i] // Get the row object
return col ? `${col.weight}fr` : "max-content"; // Use weight if available
}).join(" ") // creates "max-content max-content 1fr 3fr" depending on value
this.setWidgetInnerStyle("gridTemplateColumns", gridTemplateCol)
// this.setW
}
}
}
}
}
this.updateState((prevState) => ({...prevState, ...updates}))
}
this.updateState({
widgetInnerStyling: widgetStyle
})
this.setAttrValue("layout", value)
this.props.onLayoutUpdate({parentId: this.__id, parentLayout: value})// inform children about the layout update
}
getInnerRenderStyling(){
let {width, height, minWidth, minHeight} = this.getRenderSize()
const {layout: parentLayout, direction, gap} = this.getParentLayout() || {}
// if (parentLayout === Layouts.FLEX){
// const fillX = this.getAttrValue("flexManager.fillX")
// const fillY = this.getAttrValue("flexManager.fillY")
// // This is needed if fillX or fillY is true, as the parent is applied flex-grow
// if (fillX || fillY){
// width = "100%"
// height = "100%"
// }
// }
const styling = {
...this.state.widgetInnerStyling,
width,
height,
minWidth,
minHeight
}
return styling
}
getRenderSize(){
let {width, height, minWidth, minHeight} = super.getRenderSize()
let fillX = this.getAttrValue("flexManager.fillX") || false
let fillY = this.getAttrValue("flexManager.fillY") || false
const {layout: parentLayout} = (this.getParentLayout() || {})
if (fillX){
width = "100%"
}
if (fillY){
height = "100%"
}
if (parentLayout && parentLayout === Layouts.GRID){
const sticky = this.getAttrValue("gridManager.sticky")
if (sticky === GRID_STICKY.NEWS){
width = "100%"
height = "100%"
}else if (sticky === GRID_STICKY.WE){
width = "100%"
}else if (sticky === GRID_STICKY.NS){
height = "100%"
}
}
return {width, height, minWidth, minHeight}
}
serialize(){
return ({
...super.serialize(),
attrs: this.serializeAttrsValues(), // makes sure that functions are not serialized
packAttrs: this.state.packAttrs,
})
}
/**
* loads the data
* @param {object} data
*/
load(data, callback=null){
// TODO: call the base widget
if (Object.keys(data).length === 0) return // no data to load
data = {...data} // create a shallow copy
const {attrs={}, selected, pos={x: 0, y: 0}, ...restData} = data
const parentLayout = this.props.parentWidgetRef?.current?.getLayout()
let layoutUpdates = {
parentLayout: parentLayout
}
if (parentLayout){
if (parentLayout.layout === Layouts.FLEX || parentLayout.layout === Layouts.GRID){
layoutUpdates = {
...layoutUpdates,
positionType: PosType.NONE
}
}else if (parentLayout.layout === Layouts.PLACE){
layoutUpdates = {
...layoutUpdates,
positionType: PosType.ABSOLUTE
}
}
}
const newData = {
...restData,
...layoutUpdates,
pos
}
this.setState(newData, () => {
let layoutAttrs = this.setParentLayout(parentLayout).attrs || {}
// 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
})
if (newAttrs?.styling?.backgroundColor){
// TODO: find a better way to apply innerStyles
this.setWidgetInnerStyle("backgroundColor", newAttrs.styling.backgroundColor.value)
}
this.updateState({ attrs: newAttrs }, callback)
if (selected){
this.select()
}
})
}
}
// base for widgets that have common base properties such as bg, fg, cursor etc
export class TkinterWidgetBase extends TkinterBase{
constructor(props) {
super(props)
this.droppableTags = null // disables drops
const newAttrs = removeKeyFromObject("layout", this.state.attrs)
this.state = {
...this.state,
attrs: {
...newAttrs,
styling: {
...newAttrs.styling,
foregroundColor: {
label: "Foreground Color",
tool: Tools.COLOR_PICKER,
value: "#000",
onChange: (value) => {
this.setWidgetInnerStyle("color", value)
this.setAttrValue("styling.foregroundColor", value)
}
},
borderWidth: {
label: "Border thickness",
tool: Tools.NUMBER_INPUT,
toolProps: {min: 0, max: 10},
value: 0,
onChange: (value) => {
this.setWidgetInnerStyle("border", `${value}px solid black`)
this.setAttrValue("styling.borderWidth", value)
}
},
relief: {
label: "Relief",
tool: Tools.SELECT_DROPDOWN,
options: RELIEF.map((val) => ({value: val, label: val})),
value: "",
onChange: (value) => {
// this.setWidgetInnerStyle("fontFamily", Tkinter_To_GFonts[value])
this.setAttrValue("styling.relief", value)
}
},
// justify: {
// label: "Justify",
// tool: Tools.SELECT_DROPDOWN,
// options: JUSTIFY.map((val) => ({value: val, label: val})),
// value: "",
// onChange: (value) => {
// this.setWidgetInnerStyle("text-align", value)
// this.setAttrValue("styling.justify", value)
// }
// }
},
padding: {
label: "padding",
padX: {
label: "Pad X",
tool: Tools.NUMBER_INPUT,
toolProps: {min: 0, max: 140},
value: null,
onChange: (value) => {
// this.setWidgetInnerStyle("paddingLeft", `${value}px`)
// this.setWidgetInnerStyle("paddingRight", `${value}px`)
// const widgetStyle = {
// }
this.setState((prevState) => ({
widgetInnerStyling: {
...prevState.widgetInnerStyling,
paddingLeft: `${value}px`,
paddingRight: `${value}px`
}
}))
this.setAttrValue("padding.padX", value)
}
},
padY: {
label: "Pad Y",
tool: Tools.NUMBER_INPUT,
toolProps: {min: 0, max: 140},
value: null,
onChange: (value) => {
this.setState((prevState) => ({
widgetInnerStyling: {
...prevState.widgetInnerStyling,
paddingTop: `${value}px`,
paddingBottom: `${value}px`
}
}))
// this.setState({
// widgetInnerStyling: widgetStyle
// })
this.setAttrValue("padding.padX", value)
}
},
},
margin: {
label: "Margin",
marginX: {
label: "Margin X",
tool: Tools.NUMBER_INPUT,
toolProps: {min: 0, max: 140},
value: null,
onChange: (value) => {
const widgetStyle = {
...this.state.widgetOuterStyling,
marginLeft: `${value}px`,
marginRight: `${value}px`
}
this.updateState({
widgetOuterStyling: widgetStyle,
})
this.setAttrValue("margin.marginX", value)
}
},
marginY: {
label: "Margin Y",
tool: Tools.NUMBER_INPUT,
toolProps: {min: 0, max: 140},
value: null,
onChange: (value) => {
const widgetStyle = {
...this.state.widgetOuterStyling,
marginTop: `${value}px`,
marginBottom: `${value}px`
}
this.updateState({
widgetOuterStyling: widgetStyle,
})
this.setAttrValue("margin.marginY", value)
}
},
},
font: {
label: "font",
fontFamily: {
label: "font family",
tool: Tools.SELECT_DROPDOWN,
options: Object.keys(Tkinter_To_GFonts).map((val) => ({value: val, label: val})),
value: "",
onChange: (value) => {
this.setWidgetInnerStyle("fontFamily", Tkinter_To_GFonts[value])
this.setAttrValue("font.fontFamily", value)
}
},
fontSize: {
label: "font size",
tool: Tools.NUMBER_INPUT,
toolProps: {min: 3, max: 140},
value: null,
onChange: (value) => {
this.setWidgetInnerStyle("fontSize", `${value}px`)
this.setAttrValue("font.fontSize", value)
}
}
},
cursor: {
label: "Cursor",
tool: Tools.SELECT_DROPDOWN,
toolProps: {placeholder: "select cursor"},
value: "",
options: Object.keys(Tkinter_TO_WEB_CURSOR_MAPPING).map((val) => ({value: val, label: val})),
onChange: (value) => {
this.setWidgetInnerStyle("cursor", Tkinter_TO_WEB_CURSOR_MAPPING[value])
this.setAttrValue("cursor", value)
}
},
}
}
this.getConfigCode = this.getConfigCode.bind(this)
}
getConfigCode(){
const config = {
bg: `"${this.getAttrValue("styling.backgroundColor")}"`,
fg: `"${this.getAttrValue("styling.foregroundColor")}"`,
}
if (this.getAttrValue("styling.borderWidth"))
config["bd"] = this.getAttrValue("styling.borderWidth")
if (this.getAttrValue("styling.relief"))
config["relief"] = `tk.${this.getAttrValue("styling.relief")}`
if (this.getAttrValue("font.fontFamily") || this.getAttrValue("font.fontSize")){
config["font"] = `("${this.getAttrValue("font.fontFamily")}", ${this.getAttrValue("font.fontSize") || 12}, )`
}
if (this.getAttrValue("cursor"))
config["cursor"] = `"${this.getAttrValue("cursor")}"`
if (this.getAttrValue("padding.padX")){
// inner padding
config["ipadx"] = this.getAttrValue("padding.padX")
}
if (this.getAttrValue("padding.padY")){
config["ipady"] = this.getAttrValue("padding.padY")
}
if (this.getAttrValue("margin.marginX")){
config["padx"] = this.getAttrValue("margin.marginX")
}
if (this.getAttrValue("margin.marginY")){
config["pady"] = this.getAttrValue("margin.marginY")
}
// FIXME: add width and height, the scales may not be correct as the width and height are based on characters in pack and grid not pixels
// if (!this.state.fitContent.width){
// config["width"] = this.state.size.width
// }
// if (!this.state.fitContent.height){
// config["height"] = this.state.size.height
// }
return config
}
}