fixed drag and drop issue

src/canvas/canvas.js

@@ -734,16 +734,28 @@ class Canvas extends React.Component {
             const canvasBoundingRect = this.getCanvasBoundingRect()
 
             // calculate the initial offset from the div to the cursor grab
+            // const initialOffset = {
+            //     x: ((dragStartCursorPos.x - canvasBoundingRect.left) / this.state.zoom - this.state.currentTranslate.x) - initialPos.x,
+            //     y: ((dragStartCursorPos.y - canvasBoundingRect.top) / this.state.zoom - this.state.currentTranslate.y) - initialPos.y
+            // }
+
             const initialOffset = {
-                x: ((dragStartCursorPos.x - canvasBoundingRect.left) / this.state.zoom - this.state.currentTranslate.x) - initialPos.x,
+                x: ((dragStartCursorPos.x - canvasBoundingRect.left) / this.state.zoom) - (initialPos.x/this.state.zoom),
-                y: ((dragStartCursorPos.y - canvasBoundingRect.top) / this.state.zoom - this.state.currentTranslate.y) - initialPos.y
+                y: ((dragStartCursorPos.y - canvasBoundingRect.top) / this.state.zoom) - (initialPos.y/this.state.zoom)
             }
 
+            console.log("initial offset:")
+
             // finalPosition = {
             //     x: finalPosition.x - initialOffset.x - this.state.currentTranslate.x,
             //     y: finalPosition.y - initialOffset.y - this.state.currentTranslate.y
             // }
 
+            finalPosition = {
+                x: finalPosition.x - initialOffset.x,
+                y: finalPosition.y - initialOffset.y
+            }
+
             let widgetId = draggedElement.getAttribute("data-widget-id")
 
             const widgetObj = this.getWidgetById(widgetId)
@@ -927,9 +939,14 @@ class Canvas extends React.Component {
             // } 
 
             // TODO: add offset to get the cursor to the correct div 
+            // const initialOffset = {
+            //     x: ((dragStartCursorPos.x - canvasBoundingRect.left) / this.state.zoom - this.state.currentTranslate.x) - initialPos.x,
+            //     y: ((dragStartCursorPos.y - canvasBoundingRect.top) / this.state.zoom - this.state.currentTranslate.y) - initialPos.y
+            // }
+
             const initialOffset = {
-                x: ((dragStartCursorPos.x - canvasBoundingRect.left) / this.state.zoom - this.state.currentTranslate.x) - initialPos.x,
+                x: ((dragStartCursorPos.x - canvasBoundingRect.left) / this.state.zoom) - (initialPos.x/this.state.zoom),
-                y: ((dragStartCursorPos.y - canvasBoundingRect.top) / this.state.zoom - this.state.currentTranslate.y) - initialPos.y
+                y: ((dragStartCursorPos.y - canvasBoundingRect.top) / this.state.zoom) - (initialPos.y/this.state.zoom)
             }
 
 
@@ -943,6 +960,12 @@ class Canvas extends React.Component {
             //     y: (finalPosition.y - parentRect.top) / this.state.zoom
             // };
             
+
+            finalPosition = {
+                x: finalPosition.x - initialOffset.x,
+                y: finalPosition.y - initialOffset.y 
+            }
+
             let updatedWidgets = this.removeWidgetFromCurrentList(dragElementID)
                 
             const parentLayout = parentWidget.getLayout()?.layout || null
@@ -1081,7 +1104,7 @@ class Canvas extends React.Component {
 
         let activeWidgets = removeDuplicateObjects([...widgets, this.selectedWidget], "__id")
 
-        this.selectedWidget(null)
+        this.setSelectedWidget(null)
 
         this.setState({
             toolbarAttrs: null,

src/canvas/widgets/base.js

@@ -1200,17 +1200,17 @@ class Widget extends React.Component {
                 y: elementRect.top - canvasInnerRect.top
             }
 
-            let parent = this.props.parentWidgetRef?.current;
+            // let parent = this.props.parentWidgetRef?.current;
 
-            while (parent) {
+            // while (parent) {
-                // accounting for nested parents
+            //     // accounting for nested parents
-                const parentRect = parent.getBoundingRect()
+            //     const parentRect = parent.getBoundingRect()
-                initialPos.x -= parentRect.left - canvasInnerRect.left
+            //     initialPos.x -= parentRect.left - canvasInnerRect.left
-                initialPos.y -= parentRect.top - canvasInnerRect.top
+            //     initialPos.y -= parentRect.top - canvasInnerRect.top
 
-                // Move up to the next parent (if any)
+            //     // Move up to the next parent (if any)
-                parent = parent.parentWidgetRef?.current
+            //     parent = parent.parentWidgetRef?.current
-            }
+            // }
 
             const posMetaData = {
                 dragStartCursorPos: {x: clientX, y: clientY},
@@ -1232,7 +1232,7 @@ class Widget extends React.Component {
                     ({ draggedElement, widgetClass, onDragStart, onDragEnd, overElement, setOverElement, posMetaData, setPosMetaData }) => {
 
                         // const canvasRect = this.canvas.getBoundingClientRect()
-                        const canvasRectInner = this.props.canvasInnerContainerRef?.current.getBoundingClientRect()
+                        const canvasRectInner = this.props.canvasInnerContainerRef?.current?.getBoundingClientRect()
 
                         const elementRect = this.getBoundingRect()
 

src/components/cards.js

@@ -183,7 +183,7 @@ export const TreeViewCard = memo(({widgetRef, title, isTopLevel}) => {
             <div className="tw-ml-auto tw-flex tw-gap-1">
                 <Button color="danger" title="delete" onClick={onDelete} size="small" variant="text" danger 
                 icon={<DeleteOutlined />}></Button>
-                <Button variant="text" title="hide" onClick={toggleHideShowWidget} size="small" 
+                <Button variant="text" type="text" title="hide" onClick={toggleHideShowWidget} size="small" 
                 icon={widgetVisible ? <EyeInvisibleOutlined/> : <EyeOutlined />}></Button>
             </div>
         </div>

src/sidebar/pluginsContainer.js

@@ -78,7 +78,7 @@ function PluginsContainer({sidebarContent, onWidgetsUpdate}){
                     target="_blank" rel="noopener noreferrer"
                     className="tw-flex tw-mt-6 btn"
                     >
-                Request new plugin support
+                Request new plugin
             </Button>
         </div>
     )

src/sidebar/treeviewContainer.js

@@ -18,7 +18,7 @@ function transformWidgets(widgets, widgetRefs, isTopLevel=true) {
       isTopLevel: isTopLevel,
       widgetRef: widgetRefs.current[widget.id],
       children: widget.children.length > 0 ? transformWidgets(widget.children, widgetRefs, false) : []
-    }));
+    }))
   }
   
 
@@ -62,6 +62,13 @@ function TreeviewContainer() {
                   
                 </Tree>
 
+                {
+                    Object.keys(transformedContent || {}).length === 0 && 
+                    <div className="tw-text-sm tw-place-content-center">
+                        Start adding widgets to view it in tree view
+                    </div>
+                }
+
             </div>
         </div>
     )

src/sidebar/utils/share.js

@@ -45,6 +45,10 @@ function Share({children, className=""}){
                     footer={null}
                     open={shareModalOpen}>
                 
+                <div className="tw-text-lg">
+                    Share and help speed up development
+                </div>
+
                 <div className="tw-mt-5 tw-flex tw-place-content-center tw-w-full tw-place-items-center">
                     <a onClick={onCopy}
                         className="hover:!tw-bg-gray-100 hover:!tw-color-black !tw-text-4xl"