diff --git a/src/components/draggable/dnd/draggableDnd.js b/src/components/draggable/dnd/draggableDnd.js index f913999..61ece43 100644 --- a/src/components/draggable/dnd/draggableDnd.js +++ b/src/components/draggable/dnd/draggableDnd.js @@ -9,8 +9,9 @@ function Draggable(props) { const draggableRef = useRef(null); const { ref } = useDraggable({ - id: props.id, - feedback: "clone" + id: props.dragElementType, + feedback: "clone", + type: props.dragElementType // data: { title: props.children } }) @@ -31,19 +32,6 @@ function Draggable(props) { }, [manager]) - // useDndMonitor({ - // onDragStart(event){ - // if (event.active.id === props.id) { // Ensure only this element triggers it - // handleDragStart() - // } - // }, - // onDragEnd(event){ - // if (event.active.id === props.id) { // Ensure only this element triggers it - // handleDragEnd() - // } - // }, - // }) - const { dragElementType, dragWidgetClass = null, elementMetaData } = props // const style = transform ? { @@ -59,11 +47,12 @@ function Draggable(props) { const handleDragStart = (event) => { const {source} = event.operation - - if (source && source?.id !== props?.id){ + + if (!source || (source && source.id !== props.dragElementType)){ + return + } if (!source || (source && source.id !== props.dragElementType)){ return } - // event.dataTransfer.setData("text/plain", "") // onDragStart(draggableRef?.current, dragWidgetClass) onDragStart(draggableRef?.current, dragWidgetClass, elementMetaData) @@ -74,11 +63,10 @@ function Draggable(props) { // console.log("Drag end: ", e, e.target.closest('div')) const {source} = event.operation - if (source && source?.id !== props?.id){ + if (!source || (source && source.id !== props.dragElementType)){ return } - console.log("Drage ended") onDragEnd() } diff --git a/src/components/draggable/dnd/droppableDnd.js b/src/components/draggable/dnd/droppableDnd.js index a4c2d96..8ec0983 100644 --- a/src/components/draggable/dnd/droppableDnd.js +++ b/src/components/draggable/dnd/droppableDnd.js @@ -6,55 +6,29 @@ import { useDragContext } from '../draggableContext' function Droppable(props) { const droppableRef = useRef(null) - - const { isOver, ref, isDropTarget, droppable } = useDroppable({ - id: props.id, - - }) - - const style = { - backgroundColor: isOver ? 'green' : '', - } - - // const manager = useDragDropManager({ - // onDragStart: (event) => { - // if (event.over?.id === props.id){ - // handleDragEnter(event) - // // setDragPosition({ - // // ...dragPosition, - // // startX: event.over. - // // }) - - // } - // console.log("starting: ", event) - // }, - // onDragMove: (event) => { - // console.log("Drag move: ", event.active.rect) - // if (event.over?.id === props.id) - // handleDragOver(event) - // }, - // onDragEnd: (event) => { - - // if (event.over?.id === props.id){ - // if (event.over) { - // handleDropEvent(event) // Item was dropped inside a valid container - // } else { - // handleDragLeave(event) // Drag was canceled - // } - // } - // }, - // }) - - const manager = useDragDropManager() - - const { droppableTags, onDrop } = props const { draggedElement, overElement, setOverElement, widgetClass } = useDragContext() + const { ref, isDropTarget, droppable} = useDroppable({ + id: props.id, + accept: (draggable) => { + + const allowDrop = (droppableTags && droppableTags !== null && (Object.keys(droppableTags).length === 0 || + (droppableTags.include?.length > 0 && droppableTags.include?.includes(draggable.type)) || + (droppableTags.exclude?.length > 0 && !droppableTags.exclude?.includes(draggable.type)) + )) + + return allowDrop + } + }) + + + const manager = useDragDropManager() + // const {} - const [allowDrop, setAllowDrop] = useState(false) // indicator if the draggable can be dropped on the droppable + const [allowDrop, setAllowDrop] = useState({show: false, allow: false}) // indicator if the draggable can be dropped on the droppable useEffect(() => { @@ -62,7 +36,6 @@ function Droppable(props) { manager?.monitor?.addEventListener("dragend", handleDragLeave) manager?.monitor?.addEventListener("dragmove", handleDragOver) - return () => { manager?.monitor?.removeEventListener("dragstart", handleDragEnter) manager?.monitor?.removeEventListener("dragend", handleDragLeave) @@ -71,17 +44,20 @@ function Droppable(props) { }, [manager, draggedElement]) + const handleRef = (node) => { + droppableRef.current = node + ref(node) + } // TODO: handle Drop on Canvas const handleDragEnter = (e) => { - - const {target} = e.operation + const {target, source} = e.operation if (target && target?.id !== props?.id){ return } - console.log("Over element: ", e) + if (!draggedElement || !draggedElement.getAttribute("data-drag-start-within")) { // if the drag is starting from outside (eg: file drop) or if drag doesn't exist @@ -90,15 +66,17 @@ function Droppable(props) { const dragElementType = draggedElement.getAttribute("data-draggable-type") - console.log("Over element: ", e) - setOverElement(document.getElementById(e.over.id)) + setOverElement(document.getElementById(source.id)) - const allowDrop = (droppableTags && droppableTags !== null && (Object.keys(droppableTags).length === 0 || + const dropAllowed = (droppableTags && droppableTags !== null && (Object.keys(droppableTags).length === 0 || (droppableTags.include?.length > 0 && droppableTags.include?.includes(dragElementType)) || (droppableTags.exclude?.length > 0 && !droppableTags.exclude?.includes(dragElementType)) )) - setAllowDrop(allowDrop) + console.log("droppable tags: ", dropAllowed) + + + setAllowDrop({allow: dropAllowed, show: true}) } @@ -120,12 +98,14 @@ function Droppable(props) { // console.log("Drag over: ", e.dataTransfer.getData("text/plain"), e.dataTransfer) const dragElementType = draggedElement.getAttribute("data-draggable-type") - const allowDrop = (droppableTags && droppableTags !== null && (Object.keys(droppableTags).length === 0 || + const dropAllowed = (droppableTags && droppableTags !== null && (Object.keys(droppableTags).length === 0 || (droppableTags.include?.length > 0 && droppableTags.include?.includes(dragElementType)) || (droppableTags.exclude?.length > 0 && !droppableTags.exclude?.includes(dragElementType)) )) - setAllowDrop(allowDrop) + + setAllowDrop({allow: dropAllowed, show: true}) + // if (allowDrop) { // e.preventDefault() // this is necessary to allow drop to take place // } @@ -140,7 +120,8 @@ function Droppable(props) { return } - setAllowDrop(false) + setAllowDrop({allow: false, show: false}) + if (!draggedElement || !draggedElement.getAttribute("data-drag-start-within")) { // if the drag is starting from outside (eg: file drop) or if drag doesn't exist @@ -148,17 +129,16 @@ function Droppable(props) { } // e.stopPropagation() - console.log("Drag ended: ", e) const dragElementType = draggedElement.getAttribute("data-draggable-type") - const allowDrop = (droppableTags && droppableTags !== null && (Object.keys(droppableTags).length === 0 || + const dropAllowed = (droppableTags && droppableTags !== null && (Object.keys(droppableTags).length === 0 || (droppableTags.include?.length > 0 && droppableTags.include?.includes(dragElementType)) || (droppableTags.exclude?.length > 0 && !droppableTags.exclude?.includes(dragElementType)) )) - if (onDrop && allowDrop) { + if (onDrop && dropAllowed) { onDrop(e, draggedElement, widgetClass) } } @@ -168,17 +148,17 @@ function Droppable(props) { const {target} = e.operation - console.log("Drag: ", target?.id, props.id) if (target && target.id === props.id){ handleDropEvent(e) }else{ - setAllowDrop(false) + setAllowDrop({allow: false, show: false}) + } } return ( -
+
{props.children} {/* { showDroppable.show && @@ -190,8 +170,8 @@ function Droppable(props) { } */} { - isDropTarget && -
diff --git a/src/components/draggable/draggableContext.js b/src/components/draggable/draggableContext.js index 2cee1f6..55eb741 100644 --- a/src/components/draggable/draggableContext.js +++ b/src/components/draggable/draggableContext.js @@ -20,7 +20,7 @@ export const DragProvider = ({ children }) => { const [isDragging, setIsDragging] = useState(false) const onDragStart = (element, widgetClass=null, metaData={}, pos={x: 0, y: 0}) => { - console.log("element yaa: ", element) + setDraggedElement(element) setIsDragging(true) setDragElementMetaData(metaData)