From 53aaa8a670f7882e9e4656343edca30d709011ea Mon Sep 17 00:00:00 2001 From: paul Date: Sun, 30 Mar 2025 05:23:18 +0530 Subject: [PATCH] fix: fixed grid row col on load --- src/frameworks/customtk/widgets/base.js | 13 +++++++++---- src/frameworks/customtk/widgets/frame.js | 11 +++++++++++ src/frameworks/tkinter/widgets/base.js | 24 +++++++++++++++--------- src/frameworks/tkinter/widgets/frame.js | 12 +++++++++++- 4 files changed, 46 insertions(+), 14 deletions(-) diff --git a/src/frameworks/customtk/widgets/base.js b/src/frameworks/customtk/widgets/base.js index d942fe2..41a50a1 100644 --- a/src/frameworks/customtk/widgets/base.js +++ b/src/frameworks/customtk/widgets/base.js @@ -686,9 +686,14 @@ export class CustomTkBase extends Widget { setLayout(value) { const { layout, direction, grid = { rows: 1, cols: 1 }, gap = 10, align } = value + const gridRow = this.getAttrValue("gridConfig.noOfRows") || 3 // suppose its loaded using this.load, we need this + const gridCol = this.getAttrValue("gridConfig.noOfCols") || 3 if (layout === Layouts.GRID){ + const rowWeight = this.getAttrValue("gridWeights.rowWeights") || undefined // suppose its loaded via this.load + const colWeight = this.getAttrValue("gridWeights.colWeights") || undefined // suppose its loaded via this.load + const {...restAttrs} = this.state.attrs @@ -702,7 +707,7 @@ export class CustomTkBase extends Widget { label: "No of rows", tool: Tools.NUMBER_INPUT, toolProps: { placeholder: "no of rows", max: 1000, min: 1 }, - value: 3, + value: gridRow, onChange: (value) => { this.setAttrValue("gridConfig.noOfRows", value) @@ -728,7 +733,7 @@ export class CustomTkBase extends Widget { label: "No of cols", tool: Tools.NUMBER_INPUT, toolProps: { placeholder: "no of cols", max: 1000, min: 1 }, - value: 3, + value: gridCol, onChange: (value) => { this.setAttrValue("gridConfig.noOfCols", value) @@ -752,7 +757,7 @@ export class CustomTkBase extends Widget { // placeholder: "weight", // defaultWeightMapping: this.getAttrValue("gridWeights.rowWeights"), }, - value: undefined, + value: rowWeight, Component: DynamicGridWeightInput, onChange: (value) => { @@ -780,7 +785,7 @@ export class CustomTkBase extends Widget { // placeholder: "weight", // defaultWeightMapping: {0: {weight: 0, gridNo: 0}} }, - value: undefined, + value: colWeight, Component: DynamicGridWeightInput, onChange: (value) => { diff --git a/src/frameworks/customtk/widgets/frame.js b/src/frameworks/customtk/widgets/frame.js index 26261d1..59e4407 100644 --- a/src/frameworks/customtk/widgets/frame.js +++ b/src/frameworks/customtk/widgets/frame.js @@ -161,6 +161,17 @@ class Frame extends CustomTkBase{ ] } + getToolbarAttrs(){ + const {layout, ...toolBarAttrs} = super.getToolbarAttrs() + // places layout at the end + return ({ + id: this.__id, + ...toolBarAttrs, + padding: this.state.attrs.padding, + margin: this.state.attrs.margin, + layout + }) + } renderContent(){ // console.log("bounding rect: ", this.getBoundingRect()) diff --git a/src/frameworks/tkinter/widgets/base.js b/src/frameworks/tkinter/widgets/base.js index 633d945..4dd1639 100644 --- a/src/frameworks/tkinter/widgets/base.js +++ b/src/frameworks/tkinter/widgets/base.js @@ -687,9 +687,13 @@ export class TkinterBase extends Widget { setLayout(value) { const { layout, direction, grid = { rows: 1, cols: 1 }, gap = 10, align } = value - + const gridRow = this.getAttrValue("gridConfig.noOfRows") || 3 // suppose its loaded using this.load, we need this + const gridCol = this.getAttrValue("gridConfig.noOfCols") || 3 + if (layout === Layouts.GRID){ + const rowWeight = this.getAttrValue("gridWeights.rowWeights") || undefined // suppose its loaded via this.load + const colWeight = this.getAttrValue("gridWeights.colWeights") || undefined // suppose its loaded via this.load const {...restAttrs} = this.state.attrs @@ -703,7 +707,7 @@ export class TkinterBase extends Widget { label: "No of rows", tool: Tools.NUMBER_INPUT, toolProps: { placeholder: "no of rows", max: 1000, min: 1 }, - value: 3, + value: gridRow, onChange: (value) => { this.setAttrValue("gridConfig.noOfRows", value) @@ -729,7 +733,7 @@ export class TkinterBase extends Widget { label: "No of cols", tool: Tools.NUMBER_INPUT, toolProps: { placeholder: "no of cols", max: 1000, min: 1 }, - value: 3, + value: gridCol, onChange: (value) => { this.setAttrValue("gridConfig.noOfCols", value) @@ -753,7 +757,7 @@ export class TkinterBase extends Widget { // placeholder: "weight", // defaultWeightMapping: this.getAttrValue("gridWeights.rowWeights"), }, - value: undefined, + value: rowWeight, Component: DynamicGridWeightInput, onChange: (value) => { @@ -781,7 +785,7 @@ export class TkinterBase extends Widget { // placeholder: "weight", // defaultWeightMapping: {0: {weight: 0, gridNo: 0}} }, - value: undefined, + value: colWeight, Component: DynamicGridWeightInput, onChange: (value) => { @@ -825,8 +829,8 @@ export class TkinterBase extends Widget { flexDirection: "column", // flexDirection: direction, gap: `${gap}px`, - gridTemplateColumns: "repeat(3, max-content)", - gridTemplateRows: "repeat(3, max-content)", + gridTemplateColumns: `repeat(${gridRow}, max-content)`, + gridTemplateRows: `repeat(${gridCol}, max-content)`, // gridTemplateColumns: "repeat(auto-fill, minmax(100px, auto))", // gridTemplateRows: "repeat(auto-fill, minmax(100px, auto))", } @@ -939,7 +943,7 @@ export class TkinterBase extends Widget { const {layout} = attrs - + this.setState(newData, () => { let layoutAttrs = this.setParentLayout(parentLayout).attrs || {} @@ -968,16 +972,18 @@ export class TkinterBase extends Widget { // TODO: find a better way to apply innerStyles (we may not need this anymore) this.setWidgetInnerStyle("backgroundColor", newAttrs.styling.backgroundColor.value) } + this.updateState({ attrs: newAttrs }, callback) // FIXME: when changing layouts all the widgets are being selected if (selected){ this.select() - } + } if (layout){ this.setLayout(layout) } + }) diff --git a/src/frameworks/tkinter/widgets/frame.js b/src/frameworks/tkinter/widgets/frame.js index 509b99b..22f7ded 100644 --- a/src/frameworks/tkinter/widgets/frame.js +++ b/src/frameworks/tkinter/widgets/frame.js @@ -161,7 +161,17 @@ class Frame extends TkinterBase{ ] } - + getToolbarAttrs(){ + const {layout, ...toolBarAttrs} = super.getToolbarAttrs() + // places layout at the end + return ({ + id: this.__id, + ...toolBarAttrs, + padding: this.state.attrs.padding, + margin: this.state.attrs.margin, + layout + }) + } renderContent(){ // console.log("bounding rect: ", this.getBoundingRect())