From ba1bfa9e0366f42e5671e6a9afb84b902af264c9 Mon Sep 17 00:00:00 2001 From: paul Date: Wed, 25 Sep 2024 17:27:12 +0530 Subject: [PATCH] fixed grid layout --- notes.md | 6 +- src/canvas/canvas.js | 12 +- src/canvas/toolbar.js | 4 +- src/canvas/widgets/base.js | 111 +++++++--- .../tkinter/plugins/analogTimepicker.js | 4 +- src/frameworks/tkinter/plugins/mapview.js | 2 +- src/frameworks/tkinter/plugins/pandasTable.js | 2 +- src/frameworks/tkinter/plugins/videoPlayer.js | 2 +- .../tkinter/widgets/ checkButton.js | 22 +- src/frameworks/tkinter/widgets/base.js | 197 ++++++++++++++++++ src/frameworks/tkinter/widgets/button.js | 7 +- src/frameworks/tkinter/widgets/frame.js | 6 +- src/frameworks/tkinter/widgets/input.js | 13 +- src/frameworks/tkinter/widgets/label.js | 14 +- src/frameworks/tkinter/widgets/mainWindow.js | 2 +- src/frameworks/tkinter/widgets/optionMenu.js | 11 +- src/frameworks/tkinter/widgets/slider.js | 5 +- src/frameworks/tkinter/widgets/spinBox.js | 7 +- src/frameworks/tkinter/widgets/toplevel.js | 2 +- 19 files changed, 350 insertions(+), 79 deletions(-) create mode 100644 src/frameworks/tkinter/widgets/base.js diff --git a/notes.md b/notes.md index 6253288..26ee4ba 100644 --- a/notes.md +++ b/notes.md @@ -2,4 +2,8 @@ ### Update to TypeScript -### Don't use delete keyword to delete keys from object, it becomes hard to debug \ No newline at end of file +### Don't use delete keyword to delete keys from object, it becomes hard to debug + + + +## F\*CK Javascript, why the fu\*k, this.bind(this), class sucks in js, you can also use arrow functions, but you won't be able to override it in the subclass, because arrow functions, inherits from the surrounding context. \ No newline at end of file diff --git a/src/canvas/canvas.js b/src/canvas/canvas.js index b06c960..f0362c9 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, this.state.selectedWidget) + console.log("selected widget", selectedWidget.getToolbarAttrs(), selectedWidget, this.state.selectedWidget) this.setState({ selectedWidget: selectedWidget, toolbarAttrs: selectedWidget.getToolbarAttrs() @@ -672,6 +672,7 @@ class Canvas extends React.Component { } + console.log("droped on canvas: ", container) if (container === WidgetContainer.SIDEBAR) { @@ -717,10 +718,12 @@ class Canvas extends React.Component { ...childData, pos: { x: finalPosition.x, y: finalPosition.y }, positionType: PosType.ABSOLUTE, // makes sure that after dropping the position is set to absolute value + parentLayout: null,// reset the parent layout when its put on the canvas zIndex: 0, widgetContainer: WidgetContainer.CANVAS } } + console.log("dropped to canvas: ", updatedChildWidget) let updatedWidgets = this.removeWidgetFromCurrentList(widgetObj.current.getId()) @@ -765,7 +768,7 @@ class Canvas extends React.Component { // Find the dragged widget object let dragWidgetObj = this.findWidgetFromListById(dragElementID) - // console.log("Drag widget obj: ", dragWidgetObj) + console.log("Drag widget obj: ", dragWidgetObj, dropWidgetObj) if (dropWidgetObj && dragWidgetObj) { const dragWidget = this.widgetRefs[dragWidgetObj.id] @@ -815,9 +818,9 @@ class Canvas extends React.Component { // Non-swap mode: Add the dragged widget as a child of the drop widget let updatedWidgets = this.removeWidgetFromCurrentList(dragElementID) - const parentLayout = parentWidget.getLayout()?.layout + const parentLayout = parentWidget.getLayout()?.layout || null - console.log("parent layout: ", parentLayout, parentWidget.getLayout(), parentWidget) + console.log("parent layout child add: ", parentLayout, parentWidget.getLayout(), parentWidget) dragWidget.current.setPos(finalPosition.x, finalPosition.y) const updatedDragWidget = { ...dragWidgetObj, @@ -825,6 +828,7 @@ class Canvas extends React.Component { initialData: { ...dragData, positionType: parentLayout === Layouts.PLACE ? PosType.ABSOLUTE : PosType.NONE, + parentLayout: parentLayout, zIndex: 0, pos: {x: finalPosition.x, y: finalPosition.y}, widgetContainer: WidgetContainer.WIDGET diff --git a/src/canvas/toolbar.js b/src/canvas/toolbar.js index 7f1f4d3..2433048 100644 --- a/src/canvas/toolbar.js +++ b/src/canvas/toolbar.js @@ -87,7 +87,7 @@ const CanvasToolBar = memo(({ isOpen, widgetType, attrs = {} }) => { }} /> -
+ {/*
Grids
@@ -123,7 +123,7 @@ const CanvasToolBar = memo(({ isOpen, widgetType, attrs = {} }) => { />
-
+
*/} ) diff --git a/src/canvas/widgets/base.js b/src/canvas/widgets/base.js index b0508aa..a471267 100644 --- a/src/canvas/widgets/base.js +++ b/src/canvas/widgets/base.js @@ -12,8 +12,10 @@ import { DragWidgetProvider } from "./draggableWidgetContext" import WidgetDraggable from "./widgetDragDrop" import WidgetContainer from "../constants/containers" import { DragContext } from "../../components/draggable/draggableContext" +import { removeKeyFromObject } from "../../utils/common" // FIXME: make it possible to have fit-width and height +// FIXME: widget styling not being applied if directly added to child instead of the canvas const ATTRS_KEYS = ['value', 'label', 'tool', 'onChange', 'toolProps'] // these are attrs keywords, don't use these keywords as keys while defining the attrs property @@ -90,7 +92,10 @@ class Widget extends React.Component { size: { width: 100, height: 100 }, positionType: PosType.ABSOLUTE, - widgetStyling: { + widgetOuterStyling: { + // responsible for stuff like position, grid placement etc + }, + widgetInnerStyling: { // use for widget's inner styling backgroundColor: "#fff", display: "flex", @@ -106,7 +111,7 @@ class Widget extends React.Component { tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string value: "#fff", onChange: (value) => { - this.setWidgetStyling("backgroundColor", value) + this.setWidgetInnerStyle("backgroundColor", value) this.setAttrValue("styling.backgroundColor", value) } }, @@ -119,10 +124,10 @@ class Widget extends React.Component { value: { layout: "flex", direction: "row", - grid: { - rows: 1, - cols: 1 - }, + // grid: { + // rows: 12, + // cols: 12 + // }, gap: 10, }, toolProps: { @@ -133,7 +138,6 @@ class Widget extends React.Component { ], }, onChange: (value) => { - console.log("changed: ", value) // this.setAttrValue("layout", value) this.setLayout(value) } @@ -168,9 +172,12 @@ class Widget extends React.Component { this.setPos = this.setPos.bind(this) this.setAttrValue = this.setAttrValue.bind(this) this.setWidgetName = this.setWidgetName.bind(this) - this.setWidgetStyling = this.setWidgetStyling.bind(this) - this.setPosType = this.setPosType.bind(this) + + this.setWidgetInnerStyle = this.setWidgetInnerStyle.bind(this) + this.setWidgetOuterStyle = this.setWidgetOuterStyle.bind(this) + this.setPosType = this.setPosType.bind(this) + this.setParentLayout = this.setParentLayout.bind(this) } componentDidMount() { @@ -183,7 +190,7 @@ class Widget extends React.Component { } if (this.state.attrs.styling.backgroundColor) - this.setWidgetStyling('backgroundColor', this.state.attrs.styling?.backgroundColor.value || "#fff") + this.setWidgetInnerStyle('backgroundColor', this.state.attrs.styling?.backgroundColor.value || "#fff") this.load(this.props.initialData || {}) // load the initial data @@ -223,6 +230,8 @@ class Widget extends React.Component { getToolbarAttrs() { + console.log("Current attributes: ", this.state.attrs) + return ({ id: this.__id, widgetName: { @@ -363,6 +372,23 @@ class Widget extends React.Component { } + /** + * + * @param {string} path - eg: styling.backgroundColor + * @returns + */ + removeAttr = (path) =>{ + + const newAttrs = removeKeyFromObject(path, this.state.attrs) + + this.setState({ + attrs: newAttrs + }) + + return newAttrs + + } + /** * Given the key as a path, sets the value for the widget attribute * @param {string} path - path to the key, eg: styling.backgroundColor @@ -460,10 +486,10 @@ class Widget extends React.Component { } /** - * + * inform the child about the parent layout changes * @param {Layouts} layout */ - setParentLayout = (layout) => { + setParentLayout(layout){ let updates = { parentLayout: layout, @@ -488,6 +514,10 @@ class Widget extends React.Component { this.setState(updates) } + getParentLayout = () => { + return this.state.parentLayout + } + getLayout = () => { return this.state?.attrs?.layout?.value || Layouts.FLEX @@ -499,17 +529,19 @@ class Widget extends React.Component { console.log("layout value: ", value) - const widgetStyle = { - ...this.state.widgetStyling, + let widgetStyle = { + ...this.state.widgetInnerStyling, display: layout !== Layouts.PLACE ? layout : "block", flexDirection: direction, gap: `${gap}px`, - flexWrap: "wrap" - // TODO: add grid rows and cols + flexWrap: "wrap", + gridTemplateColumns: "repeat(auto-fill, minmax(100px, 1fr))", + gridTemplateRows: "repeat(auto-fill, minmax(100px, 1fr))", + // gridAutoRows: "auto" } this.updateState({ - widgetStyling: widgetStyle + widgetInnerStyling: widgetStyle }) this.setAttrValue("layout", value) @@ -517,20 +549,46 @@ class Widget extends React.Component { } + getWidgetInnerStyle = (key) => { + return this.state.widgetInnerStyling[key] + } + + getWidgetOuterStyle = (key) => { + return this.state.widgetOuterStyling[key] + } + + /** + * sets outer styling like grid placement etc, don't use this for background color, foreground color etc + * @param {string} key - The string in react Style format + * @param {string} value - Value of the style + */ + setWidgetOuterStyle(key, value){ + const widgetStyle = { + ...this.state.widgetOuterStyling, + [key]: value + } + + this.setState({ + widgetOuterStyling: widgetStyle + }) + + console.log("widget styling: ", widgetStyle) + } + /** * * @param {string} key - The string in react Style format * @param {string} value - Value of the style */ - setWidgetStyling(key, value) { + setWidgetInnerStyle(key, value) { const widgetStyle = { - ...this.state.widgetStyling, + ...this.state.widgetInnerStyling, [key]: value } this.setState({ - widgetStyling: widgetStyle + widgetInnerStyling: widgetStyle }) } @@ -597,7 +655,8 @@ class Widget extends React.Component { pos: this.state.pos, size: this.state.size, widgetContainer: this.state.widgetContainer, - widgetStyling: this.state.widgetStyling, + widgetInnerStyling: this.state.widgetInnerStyling, + widgetOuterStyling: this.state.widgetOuterStyling, parentLayout: this.state.parentLayout, positionType: this.state.positionType, attrs: this.serializeAttrsValues() // makes sure that functions are not serialized @@ -638,7 +697,7 @@ class Widget extends React.Component { const newData = { ...restData, - layoutUpdates + ...layoutUpdates } console.log("loaded layout2: ", newData) @@ -660,7 +719,8 @@ class Widget extends React.Component { }) // Set the value at the last key - nestedObject[lastKey].value = value + if (nestedObject[lastKey]) + nestedObject[lastKey].value = value }) this.updateState({ attrs: newAttrs }) @@ -899,12 +959,12 @@ class Widget extends React.Component { /** * Note: you must implement this method in subclass, if you want children make sure to pass - * {this.props.children}, to modify the style add this.state.widgetStyling + * {this.props.children}, to modify the style add this.state.widgetInnerStyling */ renderContent() { // throw new NotImplementedError("render method has to be implemented") return ( -
+
{this.props.children}
) @@ -918,6 +978,7 @@ class Widget extends React.Component { render() { let outerStyle = { + ...this.state.widgetOuterStyling, cursor: this.cursor, zIndex: this.state.zIndex, position: this.state.positionType, // don't change this if it has to be movable on the canvas diff --git a/src/frameworks/tkinter/plugins/analogTimepicker.js b/src/frameworks/tkinter/plugins/analogTimepicker.js index c8db18b..7ecd96c 100644 --- a/src/frameworks/tkinter/plugins/analogTimepicker.js +++ b/src/frameworks/tkinter/plugins/analogTimepicker.js @@ -34,7 +34,7 @@ class AnalogTimePicker extends Widget{ tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string value: "#000", onChange: (value) => { - this.setWidgetStyling("color", value) + this.setWidgetInnerStyle("color", value) this.setAttrValue("styling.foregroundColor", value) } } @@ -92,7 +92,7 @@ class AnalogTimePicker extends Widget{
+ style={this.state.widgetInnerStyling} ref={this.timePickerRef}>
diff --git a/src/frameworks/tkinter/plugins/mapview.js b/src/frameworks/tkinter/plugins/mapview.js index bd6ddf4..123edd8 100644 --- a/src/frameworks/tkinter/plugins/mapview.js +++ b/src/frameworks/tkinter/plugins/mapview.js @@ -52,7 +52,7 @@ class MapView extends Widget{
+ style={this.state.widgetInnerStyling}>
+ style={this.state.widgetInnerStyling}>
diff --git a/src/frameworks/tkinter/plugins/videoPlayer.js b/src/frameworks/tkinter/plugins/videoPlayer.js index 5225e75..ef0623d 100644 --- a/src/frameworks/tkinter/plugins/videoPlayer.js +++ b/src/frameworks/tkinter/plugins/videoPlayer.js @@ -51,7 +51,7 @@ class VideoPlayer extends Widget{
+ style={this.state.widgetInnerStyling}>
diff --git a/src/frameworks/tkinter/widgets/ checkButton.js b/src/frameworks/tkinter/widgets/ checkButton.js index 2823b77..66c9e19 100644 --- a/src/frameworks/tkinter/widgets/ checkButton.js +++ b/src/frameworks/tkinter/widgets/ checkButton.js @@ -1,12 +1,12 @@ import Widget from "../../../canvas/widgets/base" import Tools from "../../../canvas/constants/tools" -import { Checkbox } from "antd" import { removeKeyFromObject } from "../../../utils/common" -import { CheckOutlined, CheckSquareFilled } from "@ant-design/icons" +import { CheckSquareFilled } from "@ant-design/icons" +import TkinterBase from "./base" -export class CheckBox extends Widget{ +export class CheckBox extends TkinterBase{ static widgetType = "check_button" // TODO: remove layouts @@ -34,7 +34,7 @@ export class CheckBox extends Widget{ tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string value: "#000", onChange: (value) => { - this.setWidgetStyling("color", value) + this.setWidgetInnerStyle("color", value) this.setAttrValue("styling.foregroundColor", value) } } @@ -61,7 +61,7 @@ export class CheckBox extends Widget{ super.componentDidMount() // this.setAttrValue("styling.backgroundColor", "#fff") this.setWidgetName("Checkbox") - this.setWidgetStyling("backgroundColor", "#fff0") + this.setWidgetInnerStyle("backgroundColor", "#fff0") } getToolbarAttrs(){ @@ -81,7 +81,7 @@ export class CheckBox extends Widget{ renderContent(){ return (
@@ -135,7 +135,7 @@ export class RadioButton extends Widget{ tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string value: "#000", onChange: (value) => { - this.setWidgetStyling("color", value) + this.setWidgetInnerStyle("color", value) this.setAttrValue("styling.foregroundColor", value) } } @@ -158,8 +158,8 @@ export class RadioButton extends Widget{ componentDidMount(){ super.componentDidMount() // this.setAttrValue("styling.backgroundColor", "#fff") - this.setWidgetName("Checkbox") - this.setWidgetStyling("backgroundColor", "#fff0") + this.setWidgetName("Radio button") + this.setWidgetInnerStyle("backgroundColor", "#fff0") } getToolbarAttrs(){ @@ -182,7 +182,7 @@ export class RadioButton extends Widget{ return (
{ @@ -201,7 +201,7 @@ export class RadioButton extends Widget{
}
- + {value}
diff --git a/src/frameworks/tkinter/widgets/base.js b/src/frameworks/tkinter/widgets/base.js new file mode 100644 index 0000000..86a3b64 --- /dev/null +++ b/src/frameworks/tkinter/widgets/base.js @@ -0,0 +1,197 @@ +import { Layouts, PosType } from "../../../canvas/constants/layouts" +import Tools from "../../../canvas/constants/tools"; +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){ + // show attributes related to the layout manager + let updates = { + parentLayout: layout, + } + console.log("Parent layout updated1: ", layout) + + this.removeAttr("gridManager") + if (layout === Layouts.FLEX || layout === Layouts.GRID) { + + updates = { + ...updates, + positionType: PosType.NONE + } + console.log("Manager1 :", layout) + if (layout === Layouts.GRID) { + // Set attributes related to grid layout manager + updates = { + ...updates, + attrs: { + ...this.state.attrs, + gridManager: { + label: "Grid manager", + display: "horizontal", + row: { + label: "Row", + tool: Tools.NUMBER_INPUT, + 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) + + + this.setWidgetOuterStyle("gridRow", `${value+' / '+rowSpan}`) + } + }, + rowSpan: { + label: "Row span", + tool: Tools.NUMBER_INPUT, + 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) + + this.setWidgetOuterStyle("gridRow", `${row + ' / ' +value}`) + } + }, + column: { + label: "Column", + tool: Tools.NUMBER_INPUT, + 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) + this.setWidgetOuterStyle("gridColumn", `${value +' / ' + colSpan}`) + } + }, + columnSpan: { + label: "Column span", + tool: Tools.NUMBER_INPUT, + 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) + + this.setWidgetOuterStyle("gridColumn", `${col + ' / ' + value}`) + } + }, + } + } + } + + } + + } else if (layout === Layouts.PLACE) { + updates = { + ...updates, + positionType: PosType.ABSOLUTE + } + } + + console.log("Parent layout updated2: ", updates) + + this.updateState(updates) + + return updates + } + + /** + * loads the data + * @param {object} data + */ + load = (data) => { + + if (Object.keys(data).length === 0) return // no data to load + + data = {...data} // create a shallow copy + + const {attrs, parentLayout, ...restData} = data + + + let layoutUpdates = { + parentLayout: parentLayout + } + + if (parentLayout === Layouts.FLEX || parentLayout === Layouts.GRID){ + + layoutUpdates = { + ...layoutUpdates, + positionType: PosType.NONE + } + + }else if (parentLayout === Layouts.PLACE){ + layoutUpdates = { + ...layoutUpdates, + positionType: PosType.ABSOLUTE + } + } + + const newData = { + ...restData, + ...layoutUpdates + } + + this.setState(newData, () => { + let layoutAttrs = this.setParentLayout(parentLayout).attrs || {} + console.log("loaded layout2: ", layoutUpdates) + + + // UPdates attrs + let newAttrs = { ...this.state.attrs, ...layoutAttrs } + + // Iterate over each path in the updates object + Object.entries(attrs).forEach(([path, value]) => { + const keys = path.split('.') + const lastKey = keys.pop() + + // Traverse the nested object within attrs + let nestedObject = newAttrs + + keys.forEach(key => { + nestedObject[key] = { ...nestedObject[key] } // Ensure immutability for each nested level + nestedObject = nestedObject[key] + }) + + // Set the value at the last key + if (nestedObject[lastKey]) + nestedObject[lastKey].value = value + }) + + this.updateState({ attrs: newAttrs }) + + }) + + + } + + +} + + +export default TkinterBase \ No newline at end of file diff --git a/src/frameworks/tkinter/widgets/button.js b/src/frameworks/tkinter/widgets/button.js index f1b49b8..362ae5c 100644 --- a/src/frameworks/tkinter/widgets/button.js +++ b/src/frameworks/tkinter/widgets/button.js @@ -1,9 +1,10 @@ import Widget from "../../../canvas/widgets/base" import Tools from "../../../canvas/constants/tools" import { removeKeyFromObject } from "../../../utils/common" +import TkinterBase from "./base" -class Button extends Widget{ +class Button extends TkinterBase{ static widgetType = "button" @@ -25,7 +26,7 @@ class Button extends Widget{ tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string value: "#000", onChange: (value) => { - this.setWidgetStyling("color", value) + this.setWidgetInnerStyle("color", value) this.setAttrValue("styling.foregroundColor", value) } } @@ -68,7 +69,7 @@ class Button extends Widget{ return (
-
+
{/* {this.props.children} */}
{this.getAttrValue("buttonLabel")} diff --git a/src/frameworks/tkinter/widgets/frame.js b/src/frameworks/tkinter/widgets/frame.js index 04b9ce7..1bf177b 100644 --- a/src/frameworks/tkinter/widgets/frame.js +++ b/src/frameworks/tkinter/widgets/frame.js @@ -1,7 +1,8 @@ import Widget from "../../../canvas/widgets/base" +import TkinterBase from "./base" -class Frame extends Widget{ +class Frame extends TkinterBase{ static widgetType = "frame" @@ -25,9 +26,10 @@ class Frame extends Widget{ } renderContent(){ + // console.log("widget styling: ", this.state.widgetInnerStyling) return (
-
+
{this.props.children}
diff --git a/src/frameworks/tkinter/widgets/input.js b/src/frameworks/tkinter/widgets/input.js index fca46fb..0530225 100644 --- a/src/frameworks/tkinter/widgets/input.js +++ b/src/frameworks/tkinter/widgets/input.js @@ -1,9 +1,10 @@ import Widget from "../../../canvas/widgets/base" import Tools from "../../../canvas/constants/tools" import { removeKeyFromObject } from "../../../utils/common" +import TkinterBase from "./base" -export class Input extends Widget{ +export class Input extends TkinterBase{ static widgetType = "entry" @@ -26,7 +27,7 @@ export class Input extends Widget{ tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string value: "#000", onChange: (value) => { - this.setWidgetStyling("color", value) + this.setWidgetInnerStyle("color", value) this.setAttrValue("styling.foregroundColor", value) } } @@ -67,7 +68,7 @@ export class Input extends Widget{ renderContent(){ return (
-
+
{this.getAttrValue("placeHolder")}
@@ -79,7 +80,7 @@ export class Input extends Widget{ } -export class Text extends Widget{ +export class Text extends TkinterBase{ static widgetType = "Text" @@ -102,7 +103,7 @@ export class Text extends Widget{ tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string value: "#000", onChange: (value) => { - this.setWidgetStyling("color", value) + this.setWidgetInnerStyle("color", value) this.setAttrValue("styling.foregroundColor", value) } } @@ -142,7 +143,7 @@ export class Text extends Widget{ renderContent(){ return (
-
+
{this.getAttrValue("placeHolder")}
diff --git a/src/frameworks/tkinter/widgets/label.js b/src/frameworks/tkinter/widgets/label.js index 3239fc4..430de65 100644 --- a/src/frameworks/tkinter/widgets/label.js +++ b/src/frameworks/tkinter/widgets/label.js @@ -1,19 +1,17 @@ import Widget from "../../../canvas/widgets/base" import Tools from "../../../canvas/constants/tools" import { removeKeyFromObject } from "../../../utils/common" +import TkinterBase from "./base" -class Label extends Widget{ +class Label extends TkinterBase{ static widgetType = "label" constructor(props) { super(props) - this.droppableTags = { - // TODO: exclude all - exclude: ["image", "video", "media", "main_window", "toplevel"] - } + this.droppableTags = null const newAttrs = removeKeyFromObject("layout", this.state.attrs) @@ -30,7 +28,7 @@ class Label extends Widget{ tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string value: "#000", onChange: (value) => { - this.setWidgetStyling("color", value) + this.setWidgetInnerStyle("color", value) this.setAttrValue("styling.foregroundColor", value) } } @@ -50,7 +48,7 @@ class Label extends Widget{ componentDidMount(){ super.componentDidMount() this.setAttrValue("styling.backgroundColor", "#fff") - this.setWidgetStyling("backgroundColor", "#fff0") + this.setWidgetInnerStyle("backgroundColor", "#fff0") } getToolbarAttrs(){ @@ -70,7 +68,7 @@ class Label extends Widget{ renderContent(){ return (
-
+
{/* {this.props.children} */}
{this.getAttrValue("labelWidget")} diff --git a/src/frameworks/tkinter/widgets/mainWindow.js b/src/frameworks/tkinter/widgets/mainWindow.js index f2e973f..0dd9762 100644 --- a/src/frameworks/tkinter/widgets/mainWindow.js +++ b/src/frameworks/tkinter/widgets/mainWindow.js @@ -65,7 +65,7 @@ class MainWindow extends Widget{
-
+
{this.props.children}
diff --git a/src/frameworks/tkinter/widgets/optionMenu.js b/src/frameworks/tkinter/widgets/optionMenu.js index fd8893e..73b3489 100644 --- a/src/frameworks/tkinter/widgets/optionMenu.js +++ b/src/frameworks/tkinter/widgets/optionMenu.js @@ -3,9 +3,10 @@ import Widget from "../../../canvas/widgets/base" import Tools from "../../../canvas/constants/tools" import { removeKeyFromObject } from "../../../utils/common" import { ArrowDownOutlined, DownOutlined } from "@ant-design/icons" +import TkinterBase from "./base" -class OptionMenu extends Widget{ +class OptionMenu extends TkinterBase{ static widgetType = "option_menu" // FIXME: the radio buttons are not visible because of the default heigh provided @@ -34,7 +35,7 @@ class OptionMenu extends Widget{ tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string value: "#000", onChange: (value) => { - this.setWidgetStyling("color", value) + this.setWidgetInnerStyle("color", value) this.setAttrValue("styling.foregroundColor", value) } } @@ -65,7 +66,7 @@ class OptionMenu extends Widget{ super.componentDidMount() // this.setAttrValue("styling.backgroundColor", "#fff") this.setWidgetName("Option menu") - this.setWidgetStyling("backgroundColor", "#fff") + this.setWidgetInnerStyle("backgroundColor", "#fff") } getToolbarAttrs(){ @@ -94,7 +95,7 @@ class OptionMenu extends Widget{ return (
@@ -115,7 +116,7 @@ class OptionMenu extends Widget{
- + {value}
diff --git a/src/frameworks/tkinter/widgets/slider.js b/src/frameworks/tkinter/widgets/slider.js index 972ee06..d75e0ce 100644 --- a/src/frameworks/tkinter/widgets/slider.js +++ b/src/frameworks/tkinter/widgets/slider.js @@ -1,9 +1,10 @@ import Widget from "../../../canvas/widgets/base" import Tools from "../../../canvas/constants/tools" import { removeKeyFromObject } from "../../../utils/common" +import TkinterBase from "./base" -class Slider extends Widget{ +class Slider extends TkinterBase{ static widgetType = "scale" @@ -26,7 +27,7 @@ class Slider extends Widget{ tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string value: "#000", onChange: (value) => { - this.setWidgetStyling("color", value) + this.setWidgetInnerStyle("color", value) this.setAttrValue("styling.foregroundColor", value) } } diff --git a/src/frameworks/tkinter/widgets/spinBox.js b/src/frameworks/tkinter/widgets/spinBox.js index 341fec4..107589e 100644 --- a/src/frameworks/tkinter/widgets/spinBox.js +++ b/src/frameworks/tkinter/widgets/spinBox.js @@ -2,9 +2,10 @@ import Widget from "../../../canvas/widgets/base" import Tools from "../../../canvas/constants/tools" import { removeKeyFromObject } from "../../../utils/common" import { DownOutlined, UpOutlined } from "@ant-design/icons" +import TkinterBase from "./base" -class SpinBox extends Widget{ +class SpinBox extends TkinterBase{ static widgetType = "spin_box" constructor(props) { @@ -26,7 +27,7 @@ class SpinBox extends Widget{ tool: Tools.COLOR_PICKER, // the tool to display, can be either HTML ELement or a constant string value: "#000", onChange: (value) => { - this.setWidgetStyling("color", value) + this.setWidgetInnerStyle("color", value) this.setAttrValue("styling.foregroundColor", value) } } @@ -92,7 +93,7 @@ class SpinBox extends Widget{ renderContent(){ return (
-
+
{this.getAttrValue("spinProps.default")}
diff --git a/src/frameworks/tkinter/widgets/toplevel.js b/src/frameworks/tkinter/widgets/toplevel.js index 731096d..6e759c0 100644 --- a/src/frameworks/tkinter/widgets/toplevel.js +++ b/src/frameworks/tkinter/widgets/toplevel.js @@ -65,7 +65,7 @@ class TopLevel extends Widget{
-
+
{this.props.children}