From 9439eface6dc0dfbdb824be9d48e58265ec7f485 Mon Sep 17 00:00:00 2001
From: paul <paul.sajo.official@gmail.com>
Date: Thu, 6 Mar 2025 21:38:23 +0530
Subject: [PATCH] working on resize handler fix

---
 src/canvas/canvas.js       |  3 +--
 src/canvas/widgets/base.js | 24 ++++++++++++++++++------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/canvas/canvas.js b/src/canvas/canvas.js
index 7b6c4f5..63135f2 100644
--- a/src/canvas/canvas.js
+++ b/src/canvas/canvas.js
@@ -1055,7 +1055,6 @@ class Canvas extends React.Component {
             })
         }
 
-
         return (
 
             <ComponentType
@@ -1133,7 +1132,7 @@ class Canvas extends React.Component {
                                 }}
                             />
                             {/* Canvas */}
-                            <div data-canvas className="tw-w-full tw-h-full tw-absolute tw-top-0 tw-select-none"
+                            <div data-canvas className="tw-w-full tw-h-full tw-absolute tw-bg-red-300 tw-top-0 tw-select-none"
                                 ref={this.canvasRef}>
                                 <div className="tw-relative tw-w-full tw-h-full">
                                     {
diff --git a/src/canvas/widgets/base.js b/src/canvas/widgets/base.js
index bbd413e..61b401a 100644
--- a/src/canvas/widgets/base.js
+++ b/src/canvas/widgets/base.js
@@ -213,6 +213,12 @@ class Widget extends React.Component {
         this.load(this.props.initialData || {}) // load the initial data
     }
 
+    componentDidUpdate(prevProps, prevState) {
+        if (prevProps !== this.props) {
+            console.log("Updated sstare: ", this.state.pos)
+            this.canvasMetaData = this.props.canvasMetaData
+        }
+    }
 
     componentWillUnmount() {
     }
@@ -1162,7 +1168,9 @@ class Widget extends React.Component {
 
         // const boundingRect = this.getBoundingRect
 
-        const {zoom: canvasPan, pan: canvasZoom} = this.canvasMetaData
+        const {zoom: canvasZoom, pan: canvasPan} = this.canvasMetaData
+
+        console.log("Zooming and stuff: ", canvasZoom, canvasPan)
 
         // FIXME: if the parent container has tw-overflow-none, then the resizable indicator are also hidden
         return (
@@ -1174,6 +1182,7 @@ class Widget extends React.Component {
                         const canvasRect = this.canvas.getBoundingClientRect()
 
                         const elementRect = this.getBoundingRect()
+                        console.log("Canvas rect: ", canvasRect)
 
                         return ( 
                             <div data-widget-id={this.__id}
@@ -1247,11 +1256,14 @@ class Widget extends React.Component {
                                             // top: (this.state.pos.y - 10 - canvasPan.y) / canvasZoom,
                                             // left: (this.state.pos.x - 10),
                                             // top: (this.state.pos.y - 10),  
-                                            // left: ((elementRect?.x || 0) - 10),
-                                            // top: ((elementRect?.y || 0) - 10),
+                                            // left: (((elementRect?.left || 0 - canvasRect.left)/canvasZoom)) - 10 - (canvasPan.x),
+                                            // top: (((elementRect?.top || 0 - canvasRect.top)/canvasZoom)) - 10 - (canvasPan.y ),
                                             // FIXME: from here
-                                            left: ((elementRect?.left || 0) - 20 - canvasPan.x) ,
-                                            top: ((elementRect?.top || 0) - 20 - canvasPan.y) ,
+                                            // left:   ((elementRect?.left || 0) - 10 - canvasPan.x) / canvasZoom ,
+                                            // top:   ((elementRect?.top || 0) - 10 - canvasPan.y) / canvasZoom ,
+                                            left: 1,
+                                            top: 1,
+                                            position: "fixed",
                                             width: this.state.size.width + 20,
                                             height: this.state.size.height + 20,
                                             zIndex: 1,
@@ -1267,7 +1279,7 @@ class Widget extends React.Component {
                                             />
 
                                             <div
-                                                className="tw-w-2 tw-h-2 tw-absolute tw-pointer-events-auto tw--left-1 tw--top-1 tw-bg-blue-500"
+                                                className="tw-w-2 tw-bg-red-500 tw-h-2 tw-absolute tw-pointer-events-auto tw--left-1 tw--top-1 tw-bg-blue-500"
                                                 style={{ cursor: Cursor.NW_RESIZE }}
                                                 onMouseDown={(e) => {
                                                     e.stopPropagation()