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