42 lines
1.6 KiB
JavaScript
42 lines
1.6 KiB
JavaScript
import React, { createContext, useContext, useState } from 'react'
|
|
import { isSubClassOfWidget } from '../../utils/widget'
|
|
// import Widget from '../../canvas/widgets/base'
|
|
|
|
export const DragContext = createContext()
|
|
|
|
export const useDragContext = () => useContext(DragContext)
|
|
|
|
// Provider component to wrap around parts of your app that need drag-and-drop functionality
|
|
export const DragProvider = ({ children }) => {
|
|
const [draggedElement, setDraggedElement] = useState(null)
|
|
const [overElement, setOverElement] = useState(null) // the element the dragged items is over
|
|
|
|
const [posMetaData, setPosMetaData] = useState({dragStartCursorPos: {x: 0, y: 0},
|
|
initialPos: {x: 0, y: 0}})
|
|
|
|
|
|
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,
|
|
widgetClass, onDragStart, onDragEnd, posMetaData,
|
|
setPosMetaData }}>
|
|
{children}
|
|
</DragContext.Provider>
|
|
)
|
|
}
|