fixed grid layout
This commit is contained in:
paul
197
src/frameworks/tkinter/widgets/base.js
Normal file
197
src/frameworks/tkinter/widgets/base.js
Normal 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
|
||||
Reference in New Issue
Block a user