diff --git a/README.md b/README.md index 17c3ed5..63539ee 100644 --- a/README.md +++ b/README.md @@ -3,16 +3,16 @@

- + - + - + - +

diff --git a/demos/grid-demo.gif b/demos/grid-demo.gif new file mode 100644 index 0000000..afbd9b0 Binary files /dev/null and b/demos/grid-demo.gif differ diff --git a/assets/share/1.png b/repo-assets/share/1.png similarity index 100% rename from assets/share/1.png rename to repo-assets/share/1.png diff --git a/assets/share/2.png b/repo-assets/share/2.png similarity index 100% rename from assets/share/2.png rename to repo-assets/share/2.png diff --git a/assets/share/3.png b/repo-assets/share/3.png similarity index 100% rename from assets/share/3.png rename to repo-assets/share/3.png diff --git a/assets/share/4.png b/repo-assets/share/4.png similarity index 100% rename from assets/share/4.png rename to repo-assets/share/4.png diff --git a/src/canvas/canvas.js b/src/canvas/canvas.js index f0362c9..9212c7f 100644 --- a/src/canvas/canvas.js +++ b/src/canvas/canvas.js @@ -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] diff --git a/src/canvas/widgets/base.js b/src/canvas/widgets/base.js index a471267..06a896c 100644 --- a/src/canvas/widgets/base.js +++ b/src/canvas/widgets/base.js @@ -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 }) diff --git a/src/frameworks/tkinter/widgets/base.js b/src/frameworks/tkinter/widgets/base.js index 86a3b64..c72b71d 100644 --- a/src/frameworks/tkinter/widgets/base.js +++ b/src/frameworks/tkinter/widgets/base.js @@ -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 }