feat: added sidebar widget drop

fix: corrected color picker value, drag and drop

src/components/draggable/draggable.js

@@ -7,7 +7,7 @@ import { useDragContext } from "./draggableContext"
  * @param {string} - dragElementType - this will set the data-draggable-type which can be accessed on droppable to check if its allowed or not
  * @returns 
  */
-const DraggableWrapper = memo(({dragElementType, className, children, ...props}) => {
+const DraggableWrapper = memo(({dragElementType, dragWidgetClass=null, className, children, ...props}) => {
 
     const { onDragStart, onDragEnd } = useDragContext()
 
@@ -20,10 +20,7 @@ const DraggableWrapper = memo(({dragElementType, className, children, ...props})
     const handleDragStart = (event) => {
         
         // event.dataTransfer.setData("text/plain", "")
-        
-        if (onDragStart)
-            onDragStart(draggableRef?.current)
-
+        onDragStart(draggableRef?.current, dragWidgetClass)
 
     }
 

src/components/draggable/draggableContext.js

@@ -1,4 +1,6 @@
 import React, { createContext, useContext, useState } from 'react'
+import { isSubClassOfWidget } from '../../utils/widget'
+// import Widget from '../../canvas/widgets/base'
 
 export const DragContext = createContext()
 
@@ -9,16 +11,25 @@ export const DragProvider = ({ children }) => {
     const [draggedElement, setDraggedElement] = useState(null)
     const [overElement, setOverElement] = useState(null) // the element the dragged items is over
 
-    const onDragStart = (element) => {
+    const [widgetClass, setWidgetClass] = useState(null) // helper to help pass the widget type from sidebar to canvas
+
+    const onDragStart = (element, widgetClass=null) => {
         setDraggedElement(element)
+
+        if (widgetClass && !isSubClassOfWidget(widgetClass))
+            throw new Error("widgetClass must inherit from the Widget base class")
+
+        setWidgetClass(() => widgetClass) // store the class so later it can be passed to the canvas from sidebar
     }
 
     const onDragEnd = () => {
         setDraggedElement(null)
+        setWidgetClass(null)
     }
 
     return (
-        <DragContext.Provider value={{ draggedElement, overElement, setOverElement, onDragStart, onDragEnd }}>
+        <DragContext.Provider value={{ draggedElement, overElement, setOverElement, 
+                                            widgetClass, onDragStart, onDragEnd }}>
             {children}
         </DragContext.Provider>
     )

src/components/draggable/droppable.js

@@ -5,7 +5,7 @@ import { useDragContext } from "./draggableContext"
 const DroppableWrapper = memo(({onDrop, droppableTags=["widget"], ...props}) => {
 
 
-    const { draggedElement, overElement, setOverElement } = useDragContext()
+    const { draggedElement, overElement, setOverElement, widgetClass } = useDragContext()
 
     const [showDroppable, setShowDroppable] = useState({
                                                             show: false, 
@@ -53,7 +53,7 @@ const DroppableWrapper = memo(({onDrop, droppableTags=["widget"], ...props}) =>
         })
 
         if(onDrop){
-            onDrop(e, draggedElement)
+            onDrop(e, draggedElement, widgetClass)
         }
     }