Fixed small bugs with resizable rendering

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

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 {
                                         
                                     >
                                     
-                                    {/* <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,
+                                            // width: this.state.size.width + 20,
-                                            height: this.state.size.height + 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,
                                         }}
                                         >

src/frameworks/tkinter/widgets/mainWindow.js

@@ -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>

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;

src/sidebar/utils/premium.js

@@ -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