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

fix: fixed column span problem , now if row is incremented the columnSpan follows, same for col

Browse Source
This commit is contained in:
paul
2024-09-25 19:20:05 +05:30
parent ba1bfa9e03
commit 2c093c2d2d
9 changed files with 39 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@@ -3,16 +3,16 @@
<p align="center">
<a href="https://twitter.com/share?url=https://github.com/PaulleDemon/tkbuilder&text=Check out PyUIBuilder tool">
<img src="./assets/share/1.png" height="35" />
<img src="./repo-assets/share/1.png" height="35" />
</a>
<a href="https://www.reddit.com/submit?url=https://github.com/PaulleDemon/tkbuilder&title=Check out PyUIBuilder tool">
<img src="./assets/share/4.png" height="35" />
<img src="./repo-assets/share/4.png" height="35" />
</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://github.com/PaulleDemon/tkbuilder&title=check out PyUIBuilder tool">
<img src="./assets/share/2.png" height="35" />
<img src="./repo-assets/share/2.png" height="35" />
</a>
<a href="https://youtube.com/">
<img src="./assets/share/3.png" height="35" />
<img src="./repo-assets/share/3.png" height="35" />
</a>
</p>

BIN
demos/grid-demo.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 MiB

0
assets/share/1.png → repo-assets/share/1.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.2 KiB

After

Width:  |  Height:  |  Size: 8.2 KiB

0
assets/share/2.png → repo-assets/share/2.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

0
assets/share/3.png → repo-assets/share/3.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

0
assets/share/4.png → repo-assets/share/4.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

9
src/canvas/canvas.js
View File

@@ -237,7 +237,7 @@ class Canvas extends React.Component {
this.state.selectedWidget?.setZIndex(0)
selectedWidget.setZIndex(1000)
selectedWidget.select()
console.log("selected widget", selectedWidget.getToolbarAttrs(), selectedWidget, this.state.selectedWidget)
// console.log("selected widget", selectedWidget.getToolbarAttrs(), selectedWidget, this.state.selectedWidget)
this.setState({
selectedWidget: selectedWidget,
toolbarAttrs: selectedWidget.getToolbarAttrs()
@@ -672,8 +672,6 @@ class Canvas extends React.Component {
}
console.log("droped on canvas: ", container)
if (container === WidgetContainer.SIDEBAR) {
if (!widgetClass) {
@@ -723,7 +721,6 @@ class Canvas extends React.Component {
widgetContainer: WidgetContainer.CANVAS
}
}
console.log("dropped to canvas: ", updatedChildWidget)
let updatedWidgets = this.removeWidgetFromCurrentList(widgetObj.current.getId())
@@ -820,7 +817,6 @@ class Canvas extends React.Component {
const parentLayout = parentWidget.getLayout()?.layout || null
console.log("parent layout child add: ", parentLayout, parentWidget.getLayout(), parentWidget)
dragWidget.current.setPos(finalPosition.x, finalPosition.y)
const updatedDragWidget = {
...dragWidgetObj,
@@ -835,9 +831,6 @@ class Canvas extends React.Component {
}
}
console.log("updated widget: ", updatedDragWidget)
const updatedDropWidget = {
...dropWidgetObj,
children: [...dropWidgetObj.children, updatedDragWidget]

2
src/canvas/widgets/base.js
View File

@@ -719,7 +719,7 @@ class Widget extends React.Component {
})
// Set the value at the last key
if (nestedObject[lastKey])
if (nestedObject[lastKey]) // TODO: remove this check, else won't be able to catch buggy data
nestedObject[lastKey].value = value
})

61
src/frameworks/tkinter/widgets/base.js
View File

@@ -5,13 +5,6 @@ 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){
@@ -19,7 +12,6 @@ class TkinterBase extends Widget {
let updates = {
parentLayout: layout,
}
console.log("Parent layout updated1: ", layout)
this.removeAttr("gridManager")
if (layout === Layouts.FLEX || layout === Layouts.GRID) {
@@ -28,7 +20,7 @@ class TkinterBase extends Widget {
...updates,
positionType: PosType.NONE
}
console.log("Manager1 :", layout)
if (layout === Layouts.GRID) {
// Set attributes related to grid layout manager
updates = {
@@ -44,13 +36,18 @@ class TkinterBase extends Widget {
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)
let [_row=1, rowSpan=1] = previousRow.replace(/\s+/g, '').split("/").map(Number)
if (value > rowSpan){
// rowSpan should always be greater than or eq to row
rowSpan = value
this.setAttrValue("gridManager.rowSpan", rowSpan)
}
this.setAttrValue("gridManager.row", value)
this.setWidgetOuterStyle("gridRow", `${value+' / '+rowSpan}`)
}
},
@@ -60,12 +57,16 @@ class TkinterBase extends Widget {
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)
if (value < row){
value = row + 1
}
this.setAttrValue("gridManager.rowSpan", value)
this.setWidgetOuterStyle("gridRow", `${row + ' / ' +value}`)
}
},
@@ -75,12 +76,18 @@ class TkinterBase extends Widget {
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)
let [_col=1, colSpan=1] = previousRow.replace(/\s+/g, '').split("/").map(Number)
if (value > colSpan){
// The colSpan has always be equal or greater than col
colSpan = value
this.setAttrValue("gridManager.columnSpan", colSpan)
}
this.setAttrValue("gridManager.column", value)
this.setWidgetOuterStyle("gridColumn", `${value +' / ' + colSpan}`)
}
},
@@ -90,14 +97,16 @@ class TkinterBase extends Widget {
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)
if (value < col){
value = col + 1
}
this.setAttrValue("gridManager.columnSpan", value)
this.setWidgetOuterStyle("gridColumn", `${col + ' / ' + value}`)
}
},
@@ -114,8 +123,6 @@ class TkinterBase extends Widget {
}
}
console.log("Parent layout updated2: ", updates)
this.updateState(updates)
return updates
@@ -159,8 +166,6 @@ class TkinterBase extends Widget {
this.setState(newData, () => {
let layoutAttrs = this.setParentLayout(parentLayout).attrs || {}
console.log("loaded layout2: ", layoutUpdates)
// UPdates attrs
let newAttrs = { ...this.state.attrs, ...layoutAttrs }