fixed fit-content layout issue and inner child swap issue
This commit is contained in:
paul
@@ -8,6 +8,7 @@ import { JUSTIFY, RELIEF } from "../constants/styling"
|
||||
|
||||
// TODO: add full width and full height in base widget
|
||||
// TODO: the pack should configure width and height of widgets
|
||||
// FIXME: the font code is not correctly generated
|
||||
|
||||
export class TkinterBase extends Widget {
|
||||
|
||||
@@ -51,6 +52,7 @@ export class TkinterBase extends Widget {
|
||||
}
|
||||
|
||||
this.removeAttr("gridManager")
|
||||
this.removeAttr("flexManager")
|
||||
if (parentLayout === Layouts.FLEX || parentLayout === Layouts.GRID) {
|
||||
|
||||
updates = {
|
||||
@@ -58,7 +60,71 @@ export class TkinterBase extends Widget {
|
||||
positionType: PosType.NONE
|
||||
}
|
||||
|
||||
if (parentLayout === Layouts.GRID) {
|
||||
if (parentLayout === Layouts.FLEX){
|
||||
updates = {
|
||||
...updates,
|
||||
attrs: {
|
||||
...this.state.attrs,
|
||||
flexManager: {
|
||||
label: "Flex Manager",
|
||||
display: "horizontal",
|
||||
fillX: {
|
||||
label: "Fill X",
|
||||
tool: Tools.CHECK_BUTTON,
|
||||
value: false,
|
||||
onChange: (value) => {
|
||||
this.setAttrValue("flexManager.fillX", value)
|
||||
const widgetStyle = {
|
||||
...this.state.widgetOuterStyling,
|
||||
flexGrow: value ? 1 : 0,
|
||||
minWidth: 0
|
||||
}
|
||||
|
||||
this.updateState({
|
||||
widgetOuterStyling: widgetStyle,
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
fillY: {
|
||||
label: "Fill Y",
|
||||
tool: Tools.CHECK_BUTTON,
|
||||
value: false,
|
||||
onChange: (value) => {
|
||||
this.setAttrValue("flexManager.fillY", value)
|
||||
|
||||
const widgetStyle = {
|
||||
...this.state.widgetOuterStyling,
|
||||
flexGrow: value ? 1 : 0,
|
||||
}
|
||||
this.updateState({
|
||||
widgetOuterStyling: widgetStyle,
|
||||
})
|
||||
}
|
||||
},
|
||||
expand: {
|
||||
label: "Expand",
|
||||
tool: Tools.CHECK_BUTTON,
|
||||
value: false,
|
||||
onChange: (value) => {
|
||||
this.setAttrValue("flexManager.expand", value)
|
||||
|
||||
const widgetStyle = {
|
||||
...this.state.widgetOuterStyling,
|
||||
flexGrow: value ? 1 : 0,
|
||||
}
|
||||
this.updateState({
|
||||
widgetOuterStyling: widgetStyle,
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
else if (parentLayout === Layouts.GRID) {
|
||||
// Set attributes related to grid layout manager
|
||||
updates = {
|
||||
...updates,
|
||||
@@ -351,7 +417,7 @@ export class TkinterWidgetBase extends TkinterBase{
|
||||
label: "font family",
|
||||
tool: Tools.SELECT_DROPDOWN,
|
||||
options: Object.keys(Tkinter_To_GFonts).map((val) => ({value: val, label: val})),
|
||||
value: "Arial",
|
||||
value: "",
|
||||
onChange: (value) => {
|
||||
this.setWidgetInnerStyle("fontFamily", Tkinter_To_GFonts[value])
|
||||
this.setAttrValue("font.fontFamily", value)
|
||||
@@ -360,7 +426,7 @@ export class TkinterWidgetBase extends TkinterBase{
|
||||
fontSize: {
|
||||
label: "font size",
|
||||
tool: Tools.NUMBER_INPUT,
|
||||
toolProps: {min: 1, max: 140},
|
||||
toolProps: {min: 3, max: 140},
|
||||
value: null,
|
||||
onChange: (value) => {
|
||||
this.setWidgetInnerStyle("fontSize", `${value}px`)
|
||||
|
||||
@@ -15,6 +15,7 @@ class Frame extends TkinterBase{
|
||||
|
||||
this.state = {
|
||||
...this.state,
|
||||
fitContent: {width: true, height: true},
|
||||
widgetName: "Frame"
|
||||
}
|
||||
|
||||
@@ -39,10 +40,12 @@ class Frame extends TkinterBase{
|
||||
|
||||
|
||||
renderContent(){
|
||||
// console.log("bounding rect: ", this.getBoundingRect())
|
||||
|
||||
// console.log("widget styling: ", this.state.widgetInnerStyling)
|
||||
return (
|
||||
<div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-relative tw-rounded-md tw-overflow-hidden">
|
||||
<div className="tw-p-2 tw-w-full tw-h-full tw-content-start" style={this.state.widgetInnerStyling}>
|
||||
<div className="tw-p-2 tw-w-full tw-h-full tw-content-start" style={this.getInnerRenderStyling()}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -109,11 +109,17 @@ class Label extends TkinterWidgetBase{
|
||||
renderContent(){
|
||||
|
||||
const image = this.getAttrValue("imageUpload")
|
||||
|
||||
|
||||
return (
|
||||
<div className="tw-w-flex tw-flex-col tw-w-full tw-content-start tw-h-full tw-rounded-md tw-overflow-hidden">
|
||||
<div className="tw-w-flex tw-flex-col tw-w-full tw-content-start tw-h-full tw-rounded-md tw-overflow-hidden"
|
||||
style={{
|
||||
flexGrow: 1, // Ensure the content grows to fill the parent
|
||||
minWidth: '100%', // Force the width to 100% of the parent
|
||||
minHeight: '100%', // Force the height to 100% of the parent
|
||||
}}
|
||||
>
|
||||
<div className="tw-p-2 tw-w-full tw-h-full tw-flex tw-place-content-center tw-place-items-center "
|
||||
style={this.state.widgetInnerStyling}>
|
||||
style={this.getInnerRenderStyling()}>
|
||||
{/* {this.props.children} */}
|
||||
{
|
||||
image && (
|
||||
|
||||
@@ -20,7 +20,6 @@ class MainWindow extends TkinterBase{
|
||||
widgetName: "main",
|
||||
attrs: {
|
||||
...this.state.attrs,
|
||||
widgetName: "main",
|
||||
title: {
|
||||
label: "Window Title",
|
||||
tool: Tools.INPUT, // the tool to display, can be either HTML ELement or a constant string
|
||||
@@ -42,8 +41,11 @@ class MainWindow extends TkinterBase{
|
||||
|
||||
generateCode(variableName, parent){
|
||||
|
||||
const backgroundColor = this.getAttrValue("styling.backgroundColor")
|
||||
|
||||
return [
|
||||
`${variableName} = tk.Tk()`,
|
||||
`${variableName}.config(bg="${backgroundColor}")`,
|
||||
`${variableName}.title("${this.getAttrValue("title")}")`
|
||||
]
|
||||
}
|
||||
|
||||
@@ -39,8 +39,11 @@ class TopLevel extends Widget{
|
||||
|
||||
generateCode(variableName, parent){
|
||||
|
||||
const backgroundColor = this.getAttrValue("styling.backgroundColor")
|
||||
|
||||
return [
|
||||
`${variableName} = tk.TopLevel(root=${parent})`,
|
||||
`${variableName}.config(bg="${backgroundColor}")`,
|
||||
`${variableName}.title("${this.getAttrValue("title")}")`
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user