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

centered widget on open

Browse Source
This commit is contained in:
paul
2025-03-14 16:42:27 +05:30
parent dc892e6f61
commit ee57b43d0e
5 changed files with 127 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/App.js
View File

@@ -85,15 +85,49 @@ function App() {
useEffect(() => {
if (!canvasRef)
return
const canvasBoundingBox = canvasRef.current.getCanvasContainerBoundingRect()
const canvasCenterX = (canvasBoundingBox.width - canvasBoundingBox.left) / 2
const canvasCenterY = (canvasBoundingBox.height - canvasBoundingBox.top) / 2
if (UIFramework === FrameWorks.TKINTER){
canvasRef?.current?.createWidget(TkMainWindow)
canvasRef?.current?.createWidget(TkMainWindow, ({id, widgetRef}) => {
// center the widget when adding to canvas
if (!widgetRef.current){
return
}
const widgetBoundingBox = widgetRef.current?.getBoundingRect()
const widgetCenterX = (widgetBoundingBox.width - widgetBoundingBox.left) / 2
const widgetCenterY = (widgetBoundingBox.height - widgetBoundingBox.top) / 2
widgetRef.current?.setPos(canvasCenterX-widgetCenterX, canvasCenterY-widgetCenterY)
})
}else if (UIFramework === FrameWorks.CUSTOMTK){
canvasRef?.current?.createWidget(CTkMainWindow)
canvasRef?.current?.createWidget(CTkMainWindow, ({id, widgetRef}) => {
// center the widget when adding to canvas
if (!widgetRef.current){
return
}
const widgetBoundingBox = widgetRef.current?.getBoundingRect()
const widgetCenterX = (widgetBoundingBox.width - widgetBoundingBox.left) / 2
const widgetCenterY = (widgetBoundingBox.height - widgetBoundingBox.top) / 2
widgetRef.current?.setPos(canvasCenterX-widgetCenterX, canvasCenterY-widgetCenterY)
})
}
}, [UIFramework])
}, [UIFramework, canvasRef])
// const handleDragStart = (event) => {
// console.log("Drag start: ", event)
@@ -169,7 +203,6 @@ function App() {
const handleWidgetAddedToCanvas = (widgets) => {
setCanvasWidgets(widgets)
console.log("widget added: ", widgets)
}
const handleCodeGen = () => {
@@ -223,7 +256,7 @@ function App() {
{/* <ActiveWidgetProvider> */}
<Canvas ref={canvasRef} widgets={canvasWidgets}
onWidgetAdded={handleWidgetAddedToCanvas}/>
/>
{/* </ActiveWidgetProvider> */}
</div>
{/* dragOverlay (dnd-kit) helps move items from one container to another */}

18
src/canvas/canvas.js
View File

@@ -50,7 +50,7 @@ class Canvas extends React.Component {
constructor(props) {
super(props)
const { canvasWidgets, onWidgetListUpdated } = props
// const { canvasWidgets, onWidgetListUpdated } = props
this.canvasRef = React.createRef()
this.canvasContainerRef = React.createRef()
@@ -90,7 +90,7 @@ class Canvas extends React.Component {
toolbarAttrs: null
}
this._onWidgetListUpdated = onWidgetListUpdated // a function callback when the widget is added to the canvas
// this._onWidgetListUpdated = onWidgetListUpdated // a function callback when the widget is added to the canvas
this.resetTransforms = this.resetTransforms.bind(this)
this.renderWidget = this.renderWidget.bind(this)
@@ -1068,8 +1068,8 @@ class Canvas extends React.Component {
if (callback)
callback({ id, widgetRef })
if (this._onWidgetListUpdated)
this._onWidgetListUpdated(widgets) // inform the parent container
// if (this._onWidgetListUpdated)
// this._onWidgetListUpdated(widgets) // inform the parent container
}, 1)
// Update the state to include the new widget's type and ID
@@ -1128,8 +1128,8 @@ class Canvas extends React.Component {
// widgets: []
// })
if (this._onWidgetListUpdated)
this._onWidgetListUpdated([])
// if (this._onWidgetListUpdated)
// this._onWidgetListUpdated([])
}
getWidgetByIdFromWidgetList = (widgetId) => {
@@ -1165,8 +1165,8 @@ class Canvas extends React.Component {
// })
this.setWidgets(widgets)
if (this._onWidgetListUpdated)
this._onWidgetListUpdated(widgets)
// if (this._onWidgetListUpdated)
// this._onWidgetListUpdated(widgets)
}
onActiveWidgetUpdate(widgetId) {
@@ -1268,7 +1268,7 @@ class Canvas extends React.Component {
return (<div className="tw-relative tw-overflow-hidden tw-flex tw-w-full tw-h-full tw-max-h-[100vh]">
<div className="tw-absolute tw-p-2 tw-bg-white tw-z-10 tw-min-w-[100px] tw-h-[50px] tw-gap-2
tw-top-4 tw-place-items-center tw-right-4 tw-shadow-md tw-rounded-md tw-flex">
tw-top-4 tw-place-items-center tw-left-4 tw-shadow-md tw-rounded-md tw-flex">
<Tooltip title="Reset viewport">
<Button icon={<ReloadOutlined />} onClick={this.resetTransforms} />

4
src/canvas/toolbar.js
View File

@@ -394,9 +394,9 @@ const CanvasToolBar = memo(({ isOpen, widgetType, attrs = {} }) => {
return (
<div
className={`tw-absolute tw-top-20 tw-right-5 tw-bg-white
className={`tw-absolute tw-top-10 tw-right-5 tw-bg-white
${toolbarOpen ? "tw-translate-x-0" : "tw-translate-x-full"}
tw-w-[280px] tw-px-3 tw-p-2 tw-h-[600px] tw-rounded-md tw-z-[1000] tw-shadow-lg
tw-w-[280px] tw-px-3 tw-p-2 tw-h-[80vh] tw-rounded-md tw-z-[1000] tw-shadow-lg
tw-transition-transform tw-duration-[0.3s] tw-overflow-x-hidden
tw-flex tw-flex-col tw-gap-2 tw-overflow-y-auto tw-border-[2px]
tw-border-solid tw-border-gray-300`}

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

@@ -508,7 +508,7 @@ export class TkinterWidgetBase extends TkinterBase{
padX: {
label: "Pad X",
tool: Tools.NUMBER_INPUT,
toolProps: {min: 1, max: 140},
toolProps: {min: 0, max: 140},
value: null,
onChange: (value) => {
// this.setWidgetInnerStyle("paddingLeft", `${value}px`)
@@ -531,7 +531,7 @@ export class TkinterWidgetBase extends TkinterBase{
padY: {
label: "Pad Y",
tool: Tools.NUMBER_INPUT,
toolProps: {min: 1, max: 140},
toolProps: {min: 0, max: 140},
value: null,
onChange: (value) => {
const widgetStyle = {
@@ -547,6 +547,46 @@ export class TkinterWidgetBase extends TkinterBase{
}
},
},
margin: {
label: "Margin",
marginX: {
label: "Margin X",
tool: Tools.NUMBER_INPUT,
toolProps: {min: 0, max: 140},
value: null,
onChange: (value) => {
const widgetStyle = {
...this.state.widgetOuterStyling,
marginLeft: `${value}px`,
marginRight: `${value}px`
}
this.updateState({
widgetOuterStyling: widgetStyle,
})
this.setAttrValue("margin.marginX", value)
}
},
marginY: {
label: "Margin Y",
tool: Tools.NUMBER_INPUT,
toolProps: {min: 0, max: 140},
value: null,
onChange: (value) => {
const widgetStyle = {
...this.state.widgetOuterStyling,
marginTop: `${value}px`,
marginBottom: `${value}px`
}
this.updateState({
widgetOuterStyling: widgetStyle,
})
this.setAttrValue("margin.marginY", value)
}
},
},
font: {
label: "font",
fontFamily: {
@@ -608,11 +648,21 @@ export class TkinterWidgetBase extends TkinterBase{
config["cursor"] = `"${this.getAttrValue("cursor")}"`
if (this.getAttrValue("padding.padX")){
config["padx"] = this.getAttrValue("padding.padX")
// inner padding
config["ipadx"] = this.getAttrValue("padding.padX")
}
if (this.getAttrValue("padding.padY")){
config["pady"] = this.getAttrValue("padding.padY")
config["ipady"] = this.getAttrValue("padding.padY")
}
if (this.getAttrValue("margin.marginX")){
config["padx"] = this.getAttrValue("margin.marginX")
}
if (this.getAttrValue("margin.marginY")){
config["pady"] = this.getAttrValue("margin.marginY")
}
// FIXME: add width and height, the scales may not be correct as the width and height are based on characters in pack and grid not pixels

24
src/sidebar/utils/premium.js
View File

@@ -78,6 +78,14 @@ function Premium({ children, className = "" }) {
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Commercial use</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
<span>Premium widgets</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
<span>Premium Templates</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-x-circle-fill tw-text-red-600 tw-text-base"></i>
<span>Downloadable UI builder exe for local development</span>
@@ -147,6 +155,14 @@ function Premium({ children, className = "" }) {
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Downloadable UI builder exe for local development</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Premium widgets</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Premium Templates</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Preview live</span>
@@ -226,6 +242,14 @@ function Premium({ children, className = "" }) {
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Downloadable UI builder exe for local development</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Premium widgets</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Premium Templates</span>
</li>
<li className="tw-flex tw-place-items-center tw-gap-2">
<i className="bi bi-check-circle-fill tw-text-green-600 tw-text-base"></i>
<span>Preview live</span>