From 565b69db9f5a02dcedfa22fa17f95dd0259d81e6 Mon Sep 17 00:00:00 2001 From: paul Date: Tue, 25 Mar 2025 15:34:18 +0530 Subject: [PATCH] fixed flex side issue --- src/App.js | 46 ++++++++--- src/canvas/widgets/base.js | 3 +- src/frameworks/tkinter/widgets/base.js | 108 +++++++++++++++---------- src/utils/system.js | 9 +++ 4 files changed, 111 insertions(+), 55 deletions(-) create mode 100644 src/utils/system.js diff --git a/src/App.js b/src/App.js index 452c636..0ec4492 100644 --- a/src/App.js +++ b/src/App.js @@ -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}>

Are you sure you want to change the framework? This will clear the canvas.

*/} + - - -
- - - {/* */} - - {/* */} -
- {/* dragOverlay (dnd-kit) helps move items from one container to another */} - - + + +
+ + + {/* */} + + {/* */} +
+ {/* dragOverlay (dnd-kit) helps move items from one container to another */} + + ) } diff --git a/src/canvas/widgets/base.js b/src/canvas/widgets/base.js index 8e5b7f4..8d6b583 100644 --- a/src/canvas/widgets/base.js +++ b/src/canvas/widgets/base.js @@ -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 diff --git a/src/frameworks/tkinter/widgets/base.js b/src/frameworks/tkinter/widgets/base.js index 7aa4e17..a12b3ed 100644 --- a/src/frameworks/tkinter/widgets/base.js +++ b/src/frameworks/tkinter/widgets/base.js @@ -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} */} -
+
{widget}
{/* {widget} */} - {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 ( -
+
-
+
{widget}
- {this.renderPackWidgetsRecursively(widgets, index + 1, side)} + {this.renderPackWidgetsRecursively(widgets, index + 1, side, previousExpandValue)}
); - }; + } /** diff --git a/src/utils/system.js b/src/utils/system.js new file mode 100644 index 0000000..533b884 --- /dev/null +++ b/src/utils/system.js @@ -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 + } + \ No newline at end of file