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

bug fixes related to code generation

Browse Source
This commit is contained in:
paul
2024-09-30 15:30:46 +05:30
parent c39960348d
commit b8bd0c74a6
14 changed files with 98 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/index.html
View File

@@ -55,6 +55,10 @@
</script>
<style>
.markdown-section{
max-width: 1000px;
}
.icon{
font-size: 30px;
}
@@ -92,7 +96,7 @@
padding: 15px;
margin: 15px 0;
border-radius: 4px;
/* background-color: #f6f8fa; */
background-color: #f2f2f239;
border-left: 4px solid;
}

2
docs/intro.md
View File

@@ -2,7 +2,7 @@
<div class="alert alert-note">
<div class="alert-title">NOTE ⚠️</div>
Work in progress. This page will be updated from time to time. This contains the basic documentation for PYUIBuilder
This page is still under work in progress. This page will be updated from time to time. This contains the basic documentation for PYUIBuilder
</div>
## UI Basics

14
src/canvas/toolbar.js
View File

@@ -165,6 +165,20 @@ const CanvasToolBar = memo(({ isOpen, widgetType, attrs = {} }) => {
onChange={(value) => handleChange({ ...val.value, direction: value }, val.onChange)}
/>
</div>
<div className="tw-flex tw-flex-col tw-gap-1">
<span className="tw-text-sm">Align items</span>
<Select
options={[
{ value: "start", label: "Start" },
{ value: "center", label: "Center" },
{ value: "end", label: "End" },
]}
showSearch
value={val.value?.align || "start"}
placeholder={`${val.label}`}
onChange={(value) => handleChange({ ...val.value, align: value }, val.onChange)}
/>
</div>
<div className="tw-flex tw-flex-col">
<span className="tw-text-sm">Gap</span>
<InputNumber

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

@@ -570,7 +570,7 @@ class Widget extends React.Component {
}
setLayout(value) {
const { layout, direction, grid = { rows: 1, cols: 1 }, gap = 10 } = value
const { layout, direction, grid = { rows: 1, cols: 1 }, gap = 10, align } = value
// console.log("layout value: ", value)
// FIXME: In grid layout the layout doesn't adapt to the size of the child if resized
@@ -586,6 +586,16 @@ class Widget extends React.Component {
// gridAutoCols: 'minmax(100px, auto)', // Cols with minimum height of 100px, and grow to fit content
}
if (align === "start"){
widgetStyle["alignItems"] = "flex-start"
}else if (align === "center"){
widgetStyle["alignItems"] = "center"
}else if (align === "end"){
widgetStyle["alignItems"] = "flex-end"
}else{
widgetStyle["alignItems"] = "unset"
}
this.updateState({
widgetInnerStyling: widgetStyle
})

9
src/frameworks/tkinter/constants/styling.js
View File

@@ -12,4 +12,13 @@ export const JUSTIFY = [
"LEFT",
"CENTER",
"RIGHT"
]
export const ANCHOR = [
"n",
"s",
"e",
"w",
"center"
]

3
src/frameworks/tkinter/engine/code.js
View File

@@ -130,6 +130,8 @@ async function generateTkinterCode(projectName, widgetList=[], widgetRefs=[], as
message.info("starting zipping files, download will start in a few seconds")
return
const createFileList = [
{
fileData: code.join(""),
@@ -138,7 +140,6 @@ async function generateTkinterCode(projectName, widgetList=[], widgetRefs=[], as
}
]
console.log("requirements: ", requirements)
if (requirements.length > 0){
createFileList.push({

6
src/frameworks/tkinter/plugins/analogTimepicker.js
View File

@@ -84,7 +84,7 @@ class AnalogTimePicker extends TkinterBase{
handleColor: {
label: "Handle Color",
tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string
value: "#000000c0",
value: "#000000",
onChange: (value) => {
this.setAttrValue("styling.handleColor", value)
}
@@ -178,7 +178,7 @@ class AnalogTimePicker extends TkinterBase{
const handleColor = this.getAttrValue("styling.handleColor")
const code = [
`${variableName} = AnalogPicker(master=${parent}, type=${mode===12 ? "constants.HOURS12" : "constants.HOURS24"})`,
`${variableName} = AnalogPicker(parent=${parent}, type=${mode===12 ? "constants.HOURS12" : "constants.HOURS24"})`,
]
if (theme){
@@ -198,7 +198,7 @@ class AnalogTimePicker extends TkinterBase{
"canvas_bg": `"${bgColor}"`,
"textcolor": `"${numColor}"`,
"bg": `"${clockColor}"`,
"handlecolor": `"${handleColor}"`,
"handcolor": `"${handleColor}"`,
"headcolor": `"${handleColor}"`
}

6
src/frameworks/tkinter/plugins/pandasTable.js
View File

@@ -157,7 +157,10 @@ class PandasTable extends TkinterBase{
const enableEdit = this.getAttrValue("enableEdit")
const code = [
`${variableName} = Table(master=${parent})`,
`${variableName}_table_frame = tk.Frame(master=${parent})`,
`${variableName}_table_frame.${this.getLayoutCode()}`,
`${variableName} = Table(parent=${variableName}_table_frame)`,
`${variableName}.editable = ${enableEdit ? "True" : "False"}`,
]
@@ -179,7 +182,6 @@ class PandasTable extends TkinterBase{
return [
...code,
`${variableName}.show()`,
`${variableName}.${this.getLayoutCode()}`
]
}

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

@@ -19,7 +19,7 @@ export class TkinterBase extends Widget {
}
getLayoutCode(){
const {layout: parentLayout, direction, gap} = this.getParentLayout()
const {layout: parentLayout, direction, gap, align="start"} = this.getParentLayout()
const absolutePositioning = this.getAttrValue("positioning")
@@ -32,23 +32,39 @@ export class TkinterBase extends Widget {
y: this.state.pos.y,
}
if (!this.state.fitContent.width){
config["width"] = this.state.size.width
}
if (!this.state.fitContent.height){
config["height"] = this.state.size.height
}
config["width"] = this.state.size.width
config["height"] = this.state.size.height
// if (!this.state.fitContent.width){
// config["width"] = this.state.size.width
// }
// if (!this.state.fitContent.height){
// config["height"] = this.state.size.height
// }
const configStr = convertObjectToKeyValueString(config)
layoutManager = `place(${configStr})`
}if (parentLayout === Layouts.FLEX){
}else if (parentLayout === Layouts.FLEX){
const config = {
side: direction === "row" ? "tk.LEFT" : "tk.TOP",
}
if (gap > 0){
config["padx"] = gap
config["pady"] = gap
}
if (align === "start"){
config["anchor"] = "'nw'"
}else if (align === "center"){
config["anchor"] = "'center'"
}else if (align === "end"){
config["anchor"] = "'se'"
}
const fillX = this.getAttrValue("flexManager.fillX")
const fillY = this.getAttrValue("flexManager.fillY")
const expand = this.getAttrValue("flexManager.expand")
@@ -73,8 +89,8 @@ export class TkinterBase extends Widget {
}else if (parentLayout === Layouts.GRID){
const row = this.getAttrValue("gridManager.row")
const col = this.getAttrValue("gridManager.col")
layoutManager = `grid(row=${row}, col=${col})`
const col = this.getAttrValue("gridManager.column")
layoutManager = `grid(row=${row}, column=${col})`
}
return layoutManager

16
src/frameworks/tkinter/widgets/input.js
View File

@@ -89,13 +89,13 @@ export class Text extends TkinterWidgetBase{
size: { width: 120, height: 80 },
attrs: {
...this.state.attrs,
placeHolder: {
label: "PlaceHolder",
tool: Tools.INPUT, // the tool to display, can be either HTML ELement or a constant string
toolProps: {placeholder: "text", maxLength: 100},
value: "placeholder text",
onChange: (value) => this.setAttrValue("placeHolder", value)
}
// placeHolder: {
// label: "PlaceHolder",
// tool: Tools.INPUT, // the tool to display, can be either HTML ELement or a constant string
// toolProps: {placeholder: "text", maxLength: 100},
// value: "placeholder text",
// onChange: (value) => this.setAttrValue("placeHolder", value)
// }
}
}
@@ -114,7 +114,7 @@ export class Text extends TkinterWidgetBase{
const config = convertObjectToKeyValueString(this.getConfigCode())
return [
`${variableName} = tk.Text(master=${parent}, text="${placeHolderText}")`,
`${variableName} = tk.Text(master=${parent})`,
`${variableName}.config(${config})`,
`${variableName}.${this.getLayoutCode()}`
]

2
src/frameworks/tkinter/widgets/label.js
View File

@@ -81,7 +81,7 @@ class Label extends TkinterWidgetBase{
code.push(`${variableName}_img = Image.open(${getPythonAssetPath(image.name, "image")})`)
code.push(`${variableName}_img = ImageTk.PhotoImage(${variableName}_img)`)
// code.push("\n")
labelInitialization = `${variableName} = tk.Label(master=${parent}, image="${variableName}_img", text="${labelText}")`
labelInitialization = `${variableName} = tk.Label(master=${parent}, image=${variableName}_img, text="${labelText}", compound=tk.TOP)`
}
// code.push("\n")

10
src/frameworks/tkinter/widgets/optionMenu.js
View File

@@ -57,9 +57,15 @@ class OptionMenu extends TkinterWidgetBase{
const defaultValue = this.getAttrValue("defaultValue")
const options = JSON.stringify(this.getAttrValue("widgetOptions").inputs)
const code = [
`${variableName}_options = ${options}`,
`${variableName}_var = tk.StringVar(value="${defaultValue || options.at(1) || ""}")`,
`${variableName} = tk.OptionMenu(${parent}, ${variableName}_var, *${variableName}_options)`
]
return [
`${variableName}_options = ${options}`,
`${variableName} = tk.OptionMenu(master=${parent}, ${defaultValue}, *${variableName}_options)`,
...code,
`${variableName}.config(${config})`,
`${variableName}.${this.getLayoutCode()}`
]

10
src/frameworks/tkinter/widgets/slider.js
View File

@@ -7,7 +7,7 @@ import {TkinterBase, TkinterWidgetBase} from "./base"
class Slider extends TkinterWidgetBase{
static widgetType = "scale"
// FIXME: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use
constructor(props) {
super(props)
@@ -98,7 +98,7 @@ class Slider extends TkinterWidgetBase{
const config = this.getConfigCode()
config["_from"] = this.getAttrValue("scale.min")
config["from_"] = this.getAttrValue("scale.min")
config["to"] = this.getAttrValue("scale.max")
config["resolution"] = this.getAttrValue("scale.step")
@@ -106,12 +106,12 @@ class Slider extends TkinterWidgetBase{
config["orientation"] = this.getAttrValue("orientation")
}
const defaultValue = this.getAttrValue("defaultValue")
const defaultValue = this.getAttrValue("scale.default")
return [
`${variableName}_var = tk.DoubleVar(${defaultValue})`,
`${variableName}_var = tk.DoubleVar(value=${defaultValue})`,
`${variableName} = tk.Scale(master=${parent}, variable=${variableName}_var)`,
`${variableName}.config(${config})`,
`${variableName}.config(${convertObjectToKeyValueString(config)})`,
`${variableName}.${this.getLayoutCode()}`
]
}

2
src/frameworks/tkinter/widgets/toplevel.js
View File

@@ -42,7 +42,7 @@ class TopLevel extends Widget{
const backgroundColor = this.getAttrValue("styling.backgroundColor")
return [
`${variableName} = tk.TopLevel(root=${parent})`,
`${variableName} = tk.Toplevel(master=${parent})`,
`${variableName}.config(bg="${backgroundColor}")`,
`${variableName}.title("${this.getAttrValue("title")}")`
]