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

fixed grid layout

Browse Source
This commit is contained in:
paul
2024-09-25 17:27:12 +05:30
parent 492115bb4c
commit ba1bfa9e03
19 changed files with 350 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
notes.md
View File

@@ -2,4 +2,8 @@
### Update to TypeScript
### Don't use delete keyword to delete keys from object, it becomes hard to debug
### 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.

12
src/canvas/canvas.js
View File

@@ -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

4
src/canvas/toolbar.js
View File

@@ -87,7 +87,7 @@ const CanvasToolBar = memo(({ isOpen, widgetType, attrs = {} }) => {
}}
/>
</div>
<div className="tw-flex tw-flex-col">
{/* <div className="tw-flex tw-flex-col">
<span className="tw-text-sm tw-font-medium">Grids</span>
<div className="tw-flex tw-gap-2">
<div className="tw-flex tw-flex-col">
@@ -123,7 +123,7 @@ const CanvasToolBar = memo(({ isOpen, widgetType, attrs = {} }) => {
/>
</div>
</div>
</div>
</div> */}
</div>
)

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

@@ -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 (
<div className="tw-w-full tw-h-full tw-p-2 tw-content-start tw-rounded-md tw-overflow-hidden" style={this.state.widgetStyling}>
<div className="tw-w-full tw-h-full tw-p-2 tw-content-start tw-rounded-md tw-overflow-hidden" style={this.state.widgetInnerStyling}>
{this.props.children}
</div>
)
@@ -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

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

@@ -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{
<div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md
tw-border tw-border-solid tw-border-gray-400 tw-overflow-hidden">
<div className="tw-p-2 tw-w-full tw-h-full tw-content-start tw-pointer-events-none"
style={this.state.widgetStyling} ref={this.timePickerRef}>
style={this.state.widgetInnerStyling} ref={this.timePickerRef}>
</div>
</div>

2
src/frameworks/tkinter/plugins/mapview.js
View File

@@ -52,7 +52,7 @@ class MapView extends Widget{
<div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md
tw-border tw-border-solid tw-border-gray-400 tw-overflow-hidden">
<div className="tw-p-2 tw-w-full tw-h-full tw-content-start tw-pointer-events-none"
style={this.state.widgetStyling}>
style={this.state.widgetInnerStyling}>
<div className="tw-relative tw-w-full tw-h-full">
<div className="tw-absolute tw-left-5 tw-top-3 tw-flex tw-flex-col tw-gap-2">
<div className="tw-text-white tw-bg-black tw-text-center

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

@@ -107,7 +107,7 @@ class PandasTable extends Widget{
<div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md
tw-border tw-border-solid tw-border-gray-400 tw-overflow-hidden">
<div className="tw-p-2 tw-w-full tw-h-full tw-content-start tw-pointer-events-none"
style={this.state.widgetStyling}>
style={this.state.widgetInnerStyling}>
<ResizableTable />
</div>
</div>

2
src/frameworks/tkinter/plugins/videoPlayer.js
View File

@@ -51,7 +51,7 @@ class VideoPlayer extends Widget{
<div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md
tw-border tw-border-solid tw-border-gray-400 tw-overflow-hidden">
<div className="tw-p-2 tw-w-full tw-h-full tw-content-start tw-pointer-events-none"
style={this.state.widgetStyling}>
style={this.state.widgetInnerStyling}>
<div className="tw-relative tw-w-full tw-h-full">
<div className="tw-absolute tw-text-white tw-left-1/2 tw-top-1/2
tw--translate-x-1/2 tw--translate-y-1/2">

22
src/frameworks/tkinter/widgets/ checkButton.js
View File

@@ -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 (
<div className="tw-flex tw-p-1 tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden"
style={this.state.widgetStyling}
style={this.state.widgetInnerStyling}
>
<div className="tw-flex tw-gap-2 tw-w-full tw-h-full tw-place-items-center tw-place-content-center">
@@ -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 (
<div className="tw-flex tw-p-1 tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden"
style={this.state.widgetStyling}
style={this.state.widgetInnerStyling}
>
{
@@ -201,7 +201,7 @@ export class RadioButton extends Widget{
</div>
}
</div>
<span className="tw-text-base" style={{color: this.state.widgetStyling.foregroundColor}}>
<span className="tw-text-base" style={{color: this.state.widgetInnerStyling.foregroundColor}}>
{value}
</span>
</div>

197
src/frameworks/tkinter/widgets/base.js Normal file
View File

@@ -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

7
src/frameworks/tkinter/widgets/button.js
View File

@@ -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 (
<div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md
tw-border tw-border-solid tw-border-gray-400 tw-overflow-hidden">
<div className="tw-p-2 tw-w-full tw-h-full tw-content-start " style={this.state.widgetStyling}>
<div className="tw-p-2 tw-w-full tw-h-full tw-content-start " style={this.state.widgetInnerStyling}>
{/* {this.props.children} */}
<div className="tw-text-sm" style={{color: this.getAttrValue("styling.foregroundColor")}}>
{this.getAttrValue("buttonLabel")}

6
src/frameworks/tkinter/widgets/frame.js
View File

@@ -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 (
<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.widgetStyling}>
<div className="tw-p-2 tw-w-full tw-h-full tw-content-start" style={this.state.widgetInnerStyling}>
{this.props.children}
</div>
</div>

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

@@ -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 (
<div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden">
<div className="tw-p-2 tw-w-full tw-h-full tw-flex tw-place-items-center" style={this.state.widgetStyling}>
<div className="tw-p-2 tw-w-full tw-h-full tw-flex tw-place-items-center" style={this.state.widgetInnerStyling}>
<div className="tw-text-sm tw-text-gray-300">
{this.getAttrValue("placeHolder")}
</div>
@@ -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 (
<div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden">
<div className="tw-p-2 tw-w-full tw-h-full tw-content-start " style={this.state.widgetStyling}>
<div className="tw-p-2 tw-w-full tw-h-full tw-content-start " style={this.state.widgetInnerStyling}>
<div className="tw-text-sm tw-text-gray-300">
{this.getAttrValue("placeHolder")}
</div>

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

@@ -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 (
<div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden">
<div className="tw-p-2 tw-w-full tw-h-full tw-content-start " style={this.state.widgetStyling}>
<div className="tw-p-2 tw-w-full tw-h-full tw-content-start " style={this.state.widgetInnerStyling}>
{/* {this.props.children} */}
<div className="tw-text-sm" style={{color: this.getAttrValue("styling.foregroundColor")}}>
{this.getAttrValue("labelWidget")}

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

@@ -65,7 +65,7 @@ class MainWindow extends Widget{
</div>
</div>
</div>
<div className="tw-p-2 tw-w-full tw-relative tw-h-full tw-overflow-hidden tw-content-start" style={this.state.widgetStyling}>
<div className="tw-p-2 tw-w-full tw-relative tw-h-full tw-overflow-hidden tw-content-start" style={this.state.widgetInnerStyling}>
{this.props.children}
</div>
</div>

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

@@ -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 (
<div className="tw-flex tw-p-1 tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden"
style={this.state.widgetStyling}
style={this.state.widgetInnerStyling}
onClick={this.toggleDropDownOpen}
>
<div className="tw-flex tw-justify-between tw-gap-1">
@@ -115,7 +116,7 @@ class OptionMenu extends Widget{
<div key={index} className="tw-flex tw-gap-2 tw-w-full tw-h-full tw-place-items-center
hover:tw-bg-[#c5c5c573] tw-p-1">
<span className="tw-text-base" style={{color: this.state.widgetStyling.foregroundColor}}>
<span className="tw-text-base" style={{color: this.state.widgetInnerStyling.foregroundColor}}>
{value}
</span>
</div>

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

@@ -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)
}
}

7
src/frameworks/tkinter/widgets/spinBox.js
View File

@@ -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 (
<div className="tw-w-flex tw-flex-col tw-w-full tw-h-full tw-rounded-md tw-overflow-hidden">
<div className="tw-p-2 tw-w-full tw-h-full tw-flex tw-place-items-center tw-justify-between" style={this.state.widgetStyling}>
<div className="tw-p-2 tw-w-full tw-h-full tw-flex tw-place-items-center tw-justify-between" style={this.state.widgetInnerStyling}>
<div className="tw-text-sm ">
{this.getAttrValue("spinProps.default")}
</div>

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

@@ -65,7 +65,7 @@ class TopLevel extends Widget{
</div>
</div>
</div>
<div className="tw-p-2 tw-w-full tw-h-full tw-content-start" style={this.state.widgetStyling}>
<div className="tw-p-2 tw-w-full tw-h-full tw-content-start" style={this.state.widgetInnerStyling}>
{this.props.children}
</div>
</div>