diff --git a/src/canvas/canvas.js b/src/canvas/canvas.js index 822b332..15a59ae 100644 --- a/src/canvas/canvas.js +++ b/src/canvas/canvas.js @@ -189,7 +189,9 @@ class Canvas extends React.Component { break } - if (ref.current.getElement().contains(target)) { + // console.log("refs: ", ref) + // TODO: remove the ref.current? if there are bugs it would become hard to debug + if (ref.current?.getElement().contains(target)) { if (!innerWidget) { innerWidget = ref.current @@ -657,7 +659,7 @@ class Canvas extends React.Component { handleDropEvent = (e, draggedElement, widgetClass = null) => { e.preventDefault() - console.log("Drop event") + // console.log("Drop event") this.setState({ isWidgetDragging: false }) @@ -790,7 +792,7 @@ class Canvas extends React.Component { x: (clientX - parentRect.left) / this.state.zoom, y: (clientY - parentRect.top) / this.state.zoom, } - console.log("Swapp: ", swap) + // TODO: fix swapping for grid layouts if (swap) { // If swapping, we need to find the common parent diff --git a/src/canvas/widgets/base.js b/src/canvas/widgets/base.js index 4f17316..3eed165 100644 --- a/src/canvas/widgets/base.js +++ b/src/canvas/widgets/base.js @@ -1133,7 +1133,7 @@ class Widget extends React.Component { > {/* FIXME: Swappable when the parent layout is flex/grid and gap is more, this trick won't work, add bg color to check */} {/* FIXME: Swappable, when the parent layout is gap is 0, it doesn't work well */} -
@@ -1151,7 +1151,7 @@ class Widget extends React.Component { {/* helps with swappable: if the mouse is in this area while hovering/dropping, then swap */}
-
{this.renderContent()}
diff --git a/src/frameworks/tkinter/widgets/ checkButton.js b/src/frameworks/tkinter/widgets/ checkButton.js index 2cc42e3..0b103bc 100644 --- a/src/frameworks/tkinter/widgets/ checkButton.js +++ b/src/frameworks/tkinter/widgets/ checkButton.js @@ -95,7 +95,7 @@ export class CheckBox extends TkinterWidgetBase{ renderContent(){ return (
@@ -132,7 +132,8 @@ export class RadioButton extends TkinterWidgetBase{ this.state = { ...this.state, - size: { width: 120, height: 'fit' }, + size: { width: 80, height: 30 }, + fitContent: { width: true, height: true }, widgetName: "Radio button", attrs: { ...this.state.attrs, @@ -204,33 +205,34 @@ export class RadioButton extends TkinterWidgetBase{ return (
- - { - inputs.map((value, index) => { - return ( -
-
- - { - selectedRadio === index && -
+
+ { + inputs.map((value, index) => { + return ( +
+
+ + { + selectedRadio === index && +
-
- } +
+ } +
+ + {value} +
- - {value} - -
- ) - }) - - } + ) + }) + + } +
) } diff --git a/src/frameworks/tkinter/widgets/base.js b/src/frameworks/tkinter/widgets/base.js index 49cc19d..b25f448 100644 --- a/src/frameworks/tkinter/widgets/base.js +++ b/src/frameworks/tkinter/widgets/base.js @@ -1,14 +1,12 @@ import { Layouts, PosType } from "../../../canvas/constants/layouts" import Tools from "../../../canvas/constants/tools" import Widget from "../../../canvas/widgets/base" -import { removeKeyFromObject } from "../../../utils/common" +import { convertObjectToKeyValueString, removeKeyFromObject } from "../../../utils/common" import { Tkinter_TO_WEB_CURSOR_MAPPING } from "../constants/cursor" import { Tkinter_To_GFonts } from "../constants/fontFamily" 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 { @@ -23,16 +21,60 @@ export class TkinterBase extends Widget { getLayoutCode(){ const {layout: parentLayout, direction, gap} = this.getParentLayout() + const absolutePositioning = this.getAttrValue("positioning") + let layoutManager = `pack()` - if (parentLayout === Layouts.FLEX){ - layoutManager = `pack(side=${direction === "row" ? "tk.LEFT" : "tk.TOP"})` + if (parentLayout === Layouts.PLACE || absolutePositioning){ + + const config = { + x: this.state.pos.x, + 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 + } + + const configStr = convertObjectToKeyValueString(config) + + layoutManager = `place(${configStr})` + + }if (parentLayout === Layouts.FLEX){ + + const config = { + side: direction === "row" ? "tk.LEFT" : "tk.TOP", + } + + const fillX = this.getAttrValue("flexManager.fillX") + const fillY = this.getAttrValue("flexManager.fillY") + const expand = this.getAttrValue("flexManager.expand") + + if (fillX){ + config['fill'] = "'x'" + } + + if (fillY){ + config['fill'] = "'y'" + } + + if (fillX && fillY){ + config['fill'] = "'both'" + } + + if (expand){ + config['expand'] = 'True' + } + + layoutManager = `pack(${convertObjectToKeyValueString(config)})` + }else if (parentLayout === Layouts.GRID){ const row = this.getAttrValue("gridManager.row") const col = this.getAttrValue("gridManager.col") layoutManager = `grid(row=${row}, col=${col})` - }else{ - layoutManager = `place(x=${this.state.pos.x}, y=${this.state.pos.y})` } return layoutManager @@ -53,18 +95,36 @@ export class TkinterBase extends Widget { this.removeAttr("gridManager") this.removeAttr("flexManager") + this.removeAttr("positioning") if (parentLayout === Layouts.FLEX || parentLayout === Layouts.GRID) { updates = { ...updates, - positionType: PosType.NONE + positionType: PosType.NONE, + } + // Allow optional absolute positioning if the parent layout is flex or grid + const updateAttrs = { + ...this.state.attrs, + positioning: { + label: "Absolute positioning", + tool: Tools.CHECK_BUTTON, + value: false, + onChange: (value) => { + this.setAttrValue("positioning", value) + + this.updateState({ + positionType: value ? PosType.ABSOLUTE : PosType.NONE, + }) + + } + } } if (parentLayout === Layouts.FLEX){ updates = { ...updates, attrs: { - ...this.state.attrs, + ...updateAttrs, flexManager: { label: "Flex Manager", display: "horizontal", @@ -77,9 +137,8 @@ export class TkinterBase extends Widget { const widgetStyle = { ...this.state.widgetOuterStyling, flexGrow: value ? 1 : 0, - minWidth: 0 } - + this.updateState({ widgetOuterStyling: widgetStyle, }) @@ -129,7 +188,7 @@ export class TkinterBase extends Widget { updates = { ...updates, attrs: { - ...this.state.attrs, + ...updateAttrs, gridManager: { label: "Grid manager", display: "horizontal", @@ -231,6 +290,34 @@ export class TkinterBase extends Widget { return updates } + getInnerRenderStyling(){ + let {width, height, minWidth, minHeight} = this.getRenderSize() + + const {layout: parentLayout, direction, gap} = this.getParentLayout() || {} + + if (parentLayout === Layouts.FLEX){ + const fillX = this.getAttrValue("flexManager.fillX") + const fillY = this.getAttrValue("flexManager.fillY") + + // This is needed if fillX or fillY is true, as the parent is applied flex-grow + + if (fillX || fillY){ + width = "100%" + height = "100%" + } + + } + + const styling = { + ...this.state.widgetInnerStyling, + width, + height, + minWidth, + minHeight + } + return styling + } + /** * loads the data * @param {object} data @@ -465,7 +552,7 @@ export class TkinterWidgetBase extends TkinterBase{ code["relief"] = `"${this.getAttrValue("styling.relief")}"` if (this.getAttrValue("font.fontFamily") || this.getAttrValue("font.fontSize")){ - code["font"] = [`"${this.getAttrValue("font.fontFamily")}"`, this.getAttrValue("font.fontSize"), ] + code["font"] = `("${this.getAttrValue("font.fontFamily")}", ${this.getAttrValue("font.fontSize") || 12}, )` } if (this.getAttrValue("cursor")) diff --git a/src/frameworks/tkinter/widgets/button.js b/src/frameworks/tkinter/widgets/button.js index 1b57acb..e5b6fb9 100644 --- a/src/frameworks/tkinter/widgets/button.js +++ b/src/frameworks/tkinter/widgets/button.js @@ -68,7 +68,7 @@ class Button extends TkinterWidgetBase{
+ style={this.getInnerRenderStyling()}> {/* {this.props.children} */}
{this.getAttrValue("buttonLabel")} diff --git a/src/frameworks/tkinter/widgets/input.js b/src/frameworks/tkinter/widgets/input.js index cdb2657..f8d7519 100644 --- a/src/frameworks/tkinter/widgets/input.js +++ b/src/frameworks/tkinter/widgets/input.js @@ -64,7 +64,8 @@ export class Input extends TkinterWidgetBase{ renderContent(){ return (
-
+
{this.getAttrValue("placeHolder")}
@@ -136,7 +137,8 @@ export class Text extends TkinterWidgetBase{ renderContent(){ return (
-
+
{this.getAttrValue("placeHolder")}
diff --git a/src/frameworks/tkinter/widgets/label.js b/src/frameworks/tkinter/widgets/label.js index a45e0ca..79d104f 100644 --- a/src/frameworks/tkinter/widgets/label.js +++ b/src/frameworks/tkinter/widgets/label.js @@ -77,12 +77,12 @@ class Label extends TkinterWidgetBase{ const code = [] if (image.name){ - code.push(`${variableName}_img = Image.open("${getPythonAssetPath(image.name, "image")}")`) + code.push(`${variableName}_img = Image.open(${getPythonAssetPath(image.name, "image")})`) code.push(`${variableName}_img = ImageTk.PhotoImage(${variableName}_img)`) labelInitialization = `tk.Label(master=${parent}, image="${variableName}_img", text="${labelText}")` } - code.push("\n") + // code.push("\n") code.push(labelInitialization) return [ ...code, diff --git a/src/frameworks/tkinter/widgets/mainWindow.js b/src/frameworks/tkinter/widgets/mainWindow.js index c208df2..f3afb5f 100644 --- a/src/frameworks/tkinter/widgets/mainWindow.js +++ b/src/frameworks/tkinter/widgets/mainWindow.js @@ -79,7 +79,8 @@ class MainWindow extends TkinterBase{
-
+
{this.props.children}
diff --git a/src/frameworks/tkinter/widgets/optionMenu.js b/src/frameworks/tkinter/widgets/optionMenu.js index e1b82ed..764a036 100644 --- a/src/frameworks/tkinter/widgets/optionMenu.js +++ b/src/frameworks/tkinter/widgets/optionMenu.js @@ -93,7 +93,7 @@ class OptionMenu extends TkinterWidgetBase{ return (
diff --git a/src/frameworks/tkinter/widgets/slider.js b/src/frameworks/tkinter/widgets/slider.js index 85a63c0..e302261 100644 --- a/src/frameworks/tkinter/widgets/slider.js +++ b/src/frameworks/tkinter/widgets/slider.js @@ -135,7 +135,7 @@ class Slider extends TkinterWidgetBase{ return (
+ bg-gray-100" style={this.getInnerRenderStyling()}>
-
+
{this.getAttrValue("spinProps.default")}