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

fixed flex side issue

Browse Source
This commit is contained in:
paul
2025-03-25 15:34:18 +05:30
parent 5004dd140e
commit 565b69db9f
4 changed files with 111 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/App.js
View File

@@ -33,6 +33,8 @@ import TkMainWindow from './frameworks/tkinter/widgets/mainWindow'
import CTkMainWindow from './frameworks/customtk/widgets/mainWindow'
import TreeviewContainer from './sidebar/treeviewContainer'
import { WidgetContextProvider } from './canvas/context/widgetContext'
import { isChromium } from './utils/system'
import { Modal } from 'antd'
function App() {
@@ -45,6 +47,8 @@ function App() {
const [projectName, setProjectName] = useState('untitled project')
const [UIFramework, setUIFramework] = useState(FrameWorks.TKINTER)
// const [notChromiumAlert, setShowNotChromiumAlert] = useState(false) // if the user isn't using a chromium based browser alerts the user
// const [uploadedAssets, setUploadedAssets] = useState([]) // a global storage for assets, since redux can't store files(serialize files)
const [sidebarWidgets, setSidebarWidgets] = useState(TkinterWidgets || [])
@@ -55,6 +59,21 @@ function App() {
// NOTE: the below reference is no longer required
const [canvasWidgets, setCanvasWidgets] = useState([]) // contains the reference to the widgets inside the canvas
useEffect(() => {
isChromium().then((isChrome) => {
if (!isChrome){
Modal.warning({
title: "Not Chromium browser",
content: "We recommend using Chromium based browser such as Chrome, Brave, Edge etc."
})
}
})
}, [])
const sidebarTabs = [
{
name: "Widgets",
@@ -254,20 +273,21 @@ function App() {
onOk={handleOk} okType={okButtonType} onCancel={handleCancel}>
<p>Are you sure you want to change the framework? This will clear the canvas.</p>
</Modal> */}
<WidgetContextProvider>
<DragProvider>
<div className="tw-w-full tw-h-[94vh] tw-flex">
<Sidebar tabs={sidebarTabs}/>
{/* <ActiveWidgetProvider> */}
<Canvas ref={canvasRef} widgets={canvasWidgets}
/>
{/* </ActiveWidgetProvider> */}
</div>
{/* dragOverlay (dnd-kit) helps move items from one container to another */}
</DragProvider>
</WidgetContextProvider>
<WidgetContextProvider>
<DragProvider>
<div className="tw-w-full tw-h-[94vh] tw-flex">
<Sidebar tabs={sidebarTabs}/>
{/* <ActiveWidgetProvider> */}
<Canvas ref={canvasRef} widgets={canvasWidgets}
/>
{/* </ActiveWidgetProvider> */}
</div>
{/* dragOverlay (dnd-kit) helps move items from one container to another */}
</DragProvider>
</WidgetContextProvider>
</div>
)
}

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

@@ -253,7 +253,8 @@ class Widget extends React.Component {
if (!lo.isEqual(lo.pick(prevState, compareAttrs), lo.pick(this.state, compareAttrs))){
// THIS IS inefficeint
// this.props.requestThisWidgetDataUpdate(this.__id)
setTimeout(() => this.props.requestWidgetDataUpdate(this.__id), 1)
// setTimeout(() => this.props.requestWidgetDataUpdate(this.__id), 1)
this.props.requestWidgetDataUpdate(this.__id)
}
// call update widgets

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

@@ -25,13 +25,12 @@ export class TkinterBase extends Widget {
this.state = {
...this.state,
packAttrs: {
packAttrs: { // This is required as during flex layout change remount happens and the state updates my not function as expected
side: "top",
anchor: "nw"
anchor: "nw",
}
}
this.getPackSide = this.getPackSide.bind(this)
this.renderTkinterLayout = this.renderTkinterLayout.bind(this)
}
@@ -211,13 +210,10 @@ export class TkinterBase extends Widget {
return ({
side: this.state.packAttrs.side,
anchor: this.state.packAttrs.anchor,
expand: this.getAttrValue("flexManager.expand"),
})
}
getPackSide(){
return this.state.packAttrs.side
}
/**
* A simple function that returns a mapping for grid sticky tkinter
*/
@@ -347,32 +343,29 @@ export class TkinterBase extends Widget {
onChange: (value) => {
this.setAttrValue("flexManager.side", value, () => {
this.updateState((prevState) => ({packAttrs: {...prevState.packAttrs, side: value}}), () => {
// this.props.parentWidgetRef.current.forceRerender()
this.props.requestWidgetDataUpdate(this.props.parentWidgetRef.current.__id)
this.stateChangeSubscriberCallback() // call this to notify the toolbar that the widget has changed state
// this.props.parentWidgetRef.current.forceRerender()
})
})
// console.log("updateing state: ", value, this.props.parentWidgetRef.current)
}
},
// 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,
// })
// }
// },
expand: {
label: "Expand",
tool: Tools.CHECK_BUTTON,
value: false,
onChange: (value) => {
this.setAttrValue("flexManager.expand", value)
// this.setWidgetOuterStyle(value ? 1 : 0)
}
},
}
}
@@ -467,7 +460,6 @@ export class TkinterBase extends Widget {
}
},
sticky: {
// TODO: from here
label: "Sticky",
tool: Tools.SELECT_DROPDOWN,
toolProps: { placeholder: "Sticky", },
@@ -580,7 +572,7 @@ export class TkinterBase extends Widget {
...baseStyle, alignSelf: "stretch", // Forces stretching in grid rows
justifySelf: "stretch", // Forces stretching in grid columns
flexGrow: (fillX || fillY) ? 1 : 0
};
}
}
@@ -590,7 +582,7 @@ export class TkinterBase extends Widget {
* @param {*} index
* @returns
*/
renderPackWidgetsRecursively = (widgets, index = 0, lastSide="") => {
renderPackWidgetsRecursively = (widgets, index = 0, lastSide="", previousExpandValue=0) => {
if (index >= widgets.length) return null
@@ -600,7 +592,10 @@ export class TkinterBase extends Widget {
if (!widgetRef) return null // Ensure ref exists before accessing
const side = widgetRef.getPackAttrs()?.side || "top"
const expand = widgetRef.getPackAttrs()?.expand || false
console.log("rerendering; ", side, expand)
const direction = (s) => {
return (s === "bottom"
? "column-reverse"
@@ -613,8 +608,21 @@ export class TkinterBase extends Widget {
const currentWidgetDirection = direction(side)
const isSameSide = lastSide === side
let expandValue = 0 // the first element will be given highest priority when expanding if expand is True
if (expand){
if (isSameSide){
expandValue = previousExpandValue // if its the same side then its value is same as the previous else widget length - index
}else{
expandValue = widgets.length - index
previousExpandValue = expandValue
}
}
lastSide = side; // Update last side for next recursion
// console.log("current widget direction: ", isSameSide, currentWidgetDirection)
@@ -627,35 +635,53 @@ export class TkinterBase extends Widget {
flexDirection: direction,
width: "100%"
}}>{widget}</div> */}
<div className="tw-flex tw-justify-center tw-items-center tw-w-full">
<div className="tw-flex tw-justify-center tw-items-center "
style={{
flexGrow: expandValue,
// flexShrink: 0, // Prevent collapsing
}}
>
{widget}
</div>
{/* <WidgetOuter key={index}>{widget}</WidgetOuter> */}
{this.renderPackWidgetsRecursively(widgets, index + 1, side)}
{this.renderPackWidgetsRecursively(widgets, index + 1, side, previousExpandValue)}
</>
)
}
// FIXME: side and expand aren't working together
// If next widget has a different side, create a new container for it
return (
<div data-pack-container={side} style={{
display: "flex",
flexDirection: currentWidgetDirection,
width: "100%",
height: "100%"
}}>
<div data-pack-container={side}
// className={`${expand ? "tw-h-full tw-w-full" : ""}
// `}
style={{
display: "flex",
flexDirection: currentWidgetDirection,
// width: "100%",
// height: "100%",
flexGrow: expandValue
// FIXME: the flex should only grow when expand is true, by default every thing should grow, but when there a expand
}}>
<div className={`tw-flex tw-justify-center tw-items-center
${(["top", "bottom"].includes(side)) ? "tw-w-full" : "tw-h-full"}`}>
<div className={`tw-flex
${(["top", "bottom"].includes(side)) ? "tw-justify-center" : "tw-items-center"}
`
}
style={{
flexGrow: expandValue,
}}
>
{widget}
</div>
{this.renderPackWidgetsRecursively(widgets, index + 1, side)}
{this.renderPackWidgetsRecursively(widgets, index + 1, side, previousExpandValue)}
</div>
);
};
}
/**

9
src/utils/system.js Normal file
View File

@@ -0,0 +1,9 @@
export async function isChromium() {
if (navigator.userAgentData) {
const brands = await navigator.userAgentData.getHighEntropyValues(["brands"])
return brands.brands.some(brand => /Chromium|Google Chrome|Microsoft Edge|Opera|Brave/i.test(brand.brand))
}
return false
}