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

Fixed small bugs with resizable rendering

Browse Source
This commit is contained in:
paul
2025-03-11 06:41:52 +05:30
parent 769615c2cc
commit 80c384a57a
5 changed files with 19 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
roadmap.md
View File

@@ -9,11 +9,11 @@ Any feature that has 👑 beside it, is meant only for [premium users](./README.
### 1.2.0
- [ ] UI fixes and enhancement
- [ ] Documentation
- [ ] Tree view for elements on the canvas
- [X] Tree view for elements on the canvas
- [ ] Add text editor to support event handlers
- [ ] Support for Event handlers
- [ ] Support more pre-built widgets such as ttk.Notebook, multi-page etc.
- [ ] Rewrite DND for better feedback - (swappy/react-dnd-kit/ GSAP draggable)
- [ ] Rewrite DND for better feedback - (swappy/react-dnd-kit/ GSAP draggable) - least priority
- [ ] Duplicate widgets
### 1.5.0

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

@@ -225,29 +225,7 @@ class Widget extends React.Component {
componentWillUnmount() {
}
// __fixWidgetPosition = () => {
// if (this.state.parentLayout?.layout === Layouts.FLEX || this.state.parentLayout?.layout === Layouts.GRID ){
// const elementRect = this.elementRef.current.getBoundingClientRect()
// const {pan: canvasPan, zoom: canvasZoom} = this.canvasMetaData
// console.log("elemnt rect: ", elementRect)
// const pos = { // if the layout is flex or grid the position should be the where it stays
// // x: ((elementRect?.x || 0) - canvasPan.x) / canvasZoom,
// // y: ((elementRect?.y || 0) - canvasPan.y) / canvasZoom,
// x: elementRect?.x,
// y: elementRect?.y,
// }
// this.setState({
// ...this.state,
// pos: pos
// })
// }
// }
updateState = (newState, callback) => {
@@ -661,13 +639,13 @@ class Widget extends React.Component {
}
if (align === "start"){
widgetStyle["alignItems"] = "flex-start"
widgetStyle["placeContent"] = "flex-start"
}else if (align === "center"){
widgetStyle["alignItems"] = "center"
widgetStyle["placeContent"] = "center"
}else if (align === "end"){
widgetStyle["alignItems"] = "flex-end"
widgetStyle["placeContent"] = "flex-end"
}else{
widgetStyle["alignItems"] = "unset"
widgetStyle["placeContent"] = "unset"
}
this.updateState({
@@ -1235,6 +1213,8 @@ class Widget extends React.Component {
const {zoom: canvasZoom, pan: canvasPan} = this.canvasMetaData
const elementRect = this.elementRef.current?.getBoundingClientRect()
return (
<DragContext.Consumer>
@@ -1246,6 +1226,7 @@ class Widget extends React.Component {
const elementRect = this.getBoundingRect()
const {zoom, pan} = this.props.canvasMetaData
const left = ((elementRect?.left || 0) - canvasRectInner?.left) / canvasZoom - 10
const top = ((elementRect?.top || 0) - canvasRectInner?.top) / canvasZoom - 10
@@ -1278,18 +1259,6 @@ class Widget extends React.Component {
>
{/* <div className={`tw-absolute tw-top-[-5px] tw-left-[-5px]
tw-border-1 tw-opacity-0 tw-border-solid tw-border-black
tw-w-full tw-h-full
tw-scale-[1.1] !tw-opacity-1 tw-z-[-1] `}
style={{
width: "calc(100% + 10px)",
height: "calc(100% + 10px)",
}}
ref={this.swappableAreaRef}
> */}
{/* helps with swappable: if the mouse is in this area while hovering/dropping, then swap */}
{/* </div> */}
<div className="tw-relative tw-top-0 tw-left-0 tw-w-full tw-h-full" ref={this.innerAreaRef}
>
@@ -1319,8 +1288,11 @@ class Widget extends React.Component {
left: left,
top: top,
width: this.state.size.width + 20,
height: this.state.size.height + 20,
// width: this.state.size.width + 20,
// height: this.state.size.height + 20,
// TODO: this isn't smooth when zooming
width: (elementRect?.width/zoom || this.state.size.width) + 20,
height: (elementRect?.height/zoom || this.state.size.height) + 20,
zIndex: 1,
}}
>

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

@@ -88,7 +88,7 @@ class MainWindow extends TkinterBase{
</div>
</div>
<div className="tw-p-2 tw-w-full tw-relative tw-h-full tw-overflow-hidden tw-content-start"
style={this.getInnerRenderStyling()}>
style={{...this.getInnerRenderStyling(), width: "100%", height: "calc(100% - 25px)"}}>
{this.props.children}
</div>
</div>

1
src/index.js
View File

@@ -11,6 +11,7 @@ import { QueryClient, QueryClientProvider } from "react-query";
import "./styles/tailwind.css";
import "./styles/index.css";
import { FileUploadProvider } from "./contexts/fileUploadContext";
const originalSetItem = localStorage.setItem;

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

@@ -44,7 +44,7 @@ function Premium({ children, className = "" }) {
<br />
By buying pre-order license, I get to complete this faster and you get discounted price, advance features, priority support, early access, upcoming features, and &nbsp;
<a
href="https://github.com/PaulleDemon/tab=readme-ov-file"
href="https://github.com/PaulleDemon/PyUIBuilder/blob/main/roadmap.md"
target="_blank"
rel="noreferrer noopener"
className="!tw-text-blue-500"
@@ -122,7 +122,7 @@ function Premium({ children, className = "" }) {
<div className="tw-flex tw-w-[380px] tw-flex-col tw-place-items-center tw-gap-2 tw-rounded-lg tw-border-2 tw-border-solid
tw-border-blue-500 tw-p-8 tw-shadow-xl max-lg:tw-w-[340px]">
<div className="tw-text-white tw-p-1 tw-px-3 tw-bg-blue-500 tw-rounded-full">
Pre-order time offer
Pre-order offer
</div>
<div className="tw-text-white tw-font-medium tw-p-1 tw-px-3 tw-bg-green-700 tw-rounded-full">
Hobby
@@ -201,7 +201,7 @@ function Premium({ children, className = "" }) {
<div className="tw-flex tw-w-[380px] tw-flex-col tw-place-items-center tw-gap-2 tw-rounded-lg tw-border-3 tw-border-solid
tw-border-green-600 tw-p-8 tw-shadow-xl max-lg:tw-w-[340px]">
<div className="tw-text-white tw-p-1 tw-px-3 tw-bg-blue-500 tw-rounded-full">
Pre-order time offer
Pre-order offer
</div>
<div className="tw-text-white tw-font-medium tw-p-1 tw-px-3 tw-bg-green-700 tw-rounded-full">
Commercial