working on sidebar and widget context

src/canvas/canvas.js

@@ -798,32 +798,32 @@ class Canvas extends React.Component {
     __checkClosestShiftElement = ({ event, parentWidgetId, dragElementID }) => {
         
         // NOTE: work on this more maybe even check all four corners
-        const parentWidget = this.findWidgetFromListById(parentWidgetId);
-        if (!parentWidget) return;
+        const parentWidget = this.findWidgetFromListById(parentWidgetId)
+        if (!parentWidget) return
 
-        const dropX = event.clientX;
-        const dropY = event.clientY;
+        const dropX = event.clientX
+        const dropY = event.clientY
 
-        let closestChild = null;
-        let closestIndex = parentWidget.children.length;
-        let minDistance = Infinity;
+        let closestChild = null
+        let closestIndex = parentWidget.children.length
+        let minDistance = Infinity
 
         // Only check the first level of children
         parentWidget.children.forEach((child, index) => {
             if (child.id !== dragElementID) {
                 const childElement = this.widgetRefs[child.id]
 
-                if (!childElement) return;
+                if (!childElement) return
 
                 const rect = childElement.current.getBoundingRect()
                 const childTopRightX = rect.right
                 const childTopRightY = rect.top
 
                 // Compute Euclidean distance from drop position
-                const distance = Math.hypot(childTopRightX - dropX, childTopRightY - dropY);
+                const distance = Math.hypot(childTopRightX - dropX, childTopRightY - dropY)
                 if (distance < minDistance) {
-                    minDistance = distance;
-                    closestChild = child;
+                    minDistance = distance
+                    closestChild = child
                     closestIndex = index + 1
                 }
             }
@@ -836,7 +836,7 @@ class Canvas extends React.Component {
             const rect = childElement.current.getBoundingRect()
 
             // Closest is first child, check if dropped before or after
-            closestIndex = dropX < rect.left ? 0 : 1;
+            closestIndex = dropX < rect.left ? 0 : 1
         } 
 
         return {closestChild, closestIndex}

src/canvas/context/widgetContext.js

@@ -1,35 +1,19 @@
-import React, { createContext, Component } from 'react'
+import React, { createContext, useContext, useState } from 'react';
 
-const WidgetContext = createContext()
+const widgetContext = createContext()
 
-// NOTE: Don't use this context provider
+export const useSelectedWidgetContext = () => useContext(widgetContext)
 
-class WidgetProvider extends Component {
-    state = {
-        activeWidget: null,  // Keeps track of the active widget's data
-        widgetMethods: null,  // Function to update active widget's state
-    }
 
-    setActiveWidget = (widgetData, widgetMethods) => {
-        this.setState({
-            activeWidget: widgetData,
-            widgetMethods: widgetMethods,  // Store the update function of the active widget
-        })
-    }
+export const WidgetContextProvider = ({ children }) => {
+    const [widgets, setWidgets] = useState(null)
 
-    render() {
-        return (
-            <WidgetContext.Provider
-                value={{
-                    activeWidget: this.state.activeWidget,
-                    setActiveWidget: this.setActiveWidget,
-                    widgetMethods: this.state.widgetMethods,  // Expose the update function
-                }}
-            >
-                {this.props.children}
-            </WidgetContext.Provider>
-        )
-    }
+    const [widgetRef, setWidgetRef] = useState({})
+    // const []
+
+    return (
+        <widgetContext.Provider value={{ widgets, setWidgets, widgetRef, setWidgetRef }}>
+            {children}
+        </widgetContext.Provider>
+    )
 }
-
-export { WidgetContext, WidgetProvider }