From 80c384a57a098f1ea38367ef4e6a915281490015 Mon Sep 17 00:00:00 2001 From: paul Date: Tue, 11 Mar 2025 06:41:52 +0530 Subject: [PATCH] Fixed small bugs with resizable rendering --- roadmap.md | 4 +- src/canvas/widgets/base.js | 52 +++++--------------- src/frameworks/tkinter/widgets/mainWindow.js | 2 +- src/index.js | 1 + src/sidebar/utils/premium.js | 6 +-- 5 files changed, 19 insertions(+), 46 deletions(-) diff --git a/roadmap.md b/roadmap.md index 68aa347..c673bfe 100644 --- a/roadmap.md +++ b/roadmap.md @@ -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 diff --git a/src/canvas/widgets/base.js b/src/canvas/widgets/base.js index 800cf8b..b050d5e 100644 --- a/src/canvas/widgets/base.js +++ b/src/canvas/widgets/base.js @@ -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({ @@ -1234,6 +1212,8 @@ class Widget extends React.Component { // const boundingRect = this.getBoundingRect const {zoom: canvasZoom, pan: canvasPan} = this.canvasMetaData + + const elementRect = this.elementRef.current?.getBoundingClientRect() return ( @@ -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 { > - {/*
*/} - {/* helps with swappable: if the mouse is in this area while hovering/dropping, then swap */} - {/*
*/}
@@ -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, }} > diff --git a/src/frameworks/tkinter/widgets/mainWindow.js b/src/frameworks/tkinter/widgets/mainWindow.js index 5f8f13b..c8cb70c 100644 --- a/src/frameworks/tkinter/widgets/mainWindow.js +++ b/src/frameworks/tkinter/widgets/mainWindow.js @@ -88,7 +88,7 @@ class MainWindow extends TkinterBase{
+ style={{...this.getInnerRenderStyling(), width: "100%", height: "calc(100% - 25px)"}}> {this.props.children}
diff --git a/src/index.js b/src/index.js index 4c87c12..9af7e82 100644 --- a/src/index.js +++ b/src/index.js @@ -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; diff --git a/src/sidebar/utils/premium.js b/src/sidebar/utils/premium.js index f62a8b4..910d744 100644 --- a/src/sidebar/utils/premium.js +++ b/src/sidebar/utils/premium.js @@ -44,7 +44,7 @@ function Premium({ children, className = "" }) {
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  
- Pre-order time offer + Pre-order offer
Hobby @@ -201,7 +201,7 @@ function Premium({ children, className = "" }) {
- Pre-order time offer + Pre-order offer
Commercial