diff --git a/src/canvas/canvas.js b/src/canvas/canvas.js index bcc4bb0..03bc17a 100644 --- a/src/canvas/canvas.js +++ b/src/canvas/canvas.js @@ -695,30 +695,30 @@ class Canvas extends React.Component { // const {x: draggedElementInitialX, y: draggedElementInitialY} = draggedElement.getBoundingClientRect() - // const { clientX, clientY } = e - const { x: clientX, y: clientY} = e.delta; - const {clientX: draggedElementInitialX, clientY: draggedElementInitialY} = e.activatorEvent + const { clientX, clientY } = e.nativeEvent + // const { x: clientX, y: clientY} = e.delta; + // const {clientX: draggedElementInitialX, clientY: draggedElementInitialY} = e.activatorEvent - console.log("wirking: ", clientX, clientY, e, draggedElementInitialX, draggedElementInitialY) + // console.log("wirking: ", clientX, clientY, e, draggedElementInitialX, draggedElementInitialY) - // let finalPosition = { - // x: (clientX - canvasRect.left) / this.state.zoom, - // y: (clientY - canvasRect.top) / this.state.zoom, - // } + let finalPosition = { + x: (clientX - canvasRect.left) / this.state.zoom, + y: (clientY - canvasRect.top) / this.state.zoom, + } // let finalPosition = { // x: ((draggedElementInitialX + clientX) - canvasRect.left) / (this.state.zoom), // y: ((draggedElementInitialY + clientY) - canvasRect.top) / (this.state.zoom), // } - let finalPosition = { - x: (e.activatorEvent.pageX - canvasRect.left) / (this.state.zoom), - y: (e.activatorEvent.pageY - canvasRect.top) / (this.state.zoom), - } + // let finalPosition = { + // x: (e.activatorEvent.pageX - canvasRect.left) / (this.state.zoom), + // y: (e.activatorEvent.pageY - canvasRect.top) / (this.state.zoom), + // } // FIXME: error in canvasRect.top - console.log("final position: ", finalPosition, draggedElementInitialX, clientX, canvasRect, "Top: ", - canvasRect.top, clientY, draggedElementInitialY) + // console.log("final position: ", finalPosition, draggedElementInitialX, clientX, canvasRect, "Top: ", + // canvasRect.top, clientY, draggedElementInitialY) if (container === WidgetContainer.SIDEBAR) { diff --git a/src/components/draggable/dnd/draggableDnd.js b/src/components/draggable/dnd/draggableDnd.js index 4001a4c..f913999 100644 --- a/src/components/draggable/dnd/draggableDnd.js +++ b/src/components/draggable/dnd/draggableDnd.js @@ -1,12 +1,12 @@ import React, { useEffect, useRef } from "react" -import { useDraggable } from "@dnd-kit/react" +import { useDragDropManager, useDraggable } from "@dnd-kit/react" import { CSS } from "@dnd-kit/utilities" import { useDragContext } from "../draggableContext" function Draggable(props) { - const draggableRef = useRef(null) + const draggableRef = useRef(null); const { ref } = useDraggable({ id: props.id, @@ -16,7 +16,20 @@ function Draggable(props) { const {onDragStart, onDragEnd, disableStyle=false} = useDragContext() - // TODO: add monitor and handle drag events ASAP + const manager = useDragDropManager() + + useEffect(() => { + + manager?.monitor?.addEventListener("dragstart", handleDragStart) + manager?.monitor?.addEventListener("dragend", handleDragEnd) + + + return () => { + manager?.monitor?.removeEventListener("dragstart", handleDragStart) + manager?.monitor?.removeEventListener("dragend", handleDragEnd) + } + + }, [manager]) // useDndMonitor({ // onDragStart(event){ @@ -31,31 +44,41 @@ function Draggable(props) { // }, // }) - // useEffect(() => { - - // if (draggableRef.current) - // setNodeRef(draggableRef.current) - - // }, [draggableRef.current, setNodeRef]) const { dragElementType, dragWidgetClass = null, elementMetaData } = props // const style = transform ? { // transform: CSS.Translate.toString(transform), // } : undefined + const handleRef = (node) => { + draggableRef.current = node + ref(node) + } + const handleDragStart = (event) => { - console.log("Drag start1: ", elementMetaData) + const {source} = event.operation + + if (source && source?.id !== props?.id){ + return + } + // event.dataTransfer.setData("text/plain", "") // onDragStart(draggableRef?.current, dragWidgetClass) onDragStart(draggableRef?.current, dragWidgetClass, elementMetaData) } - const handleDragEnd = (e) => { + const handleDragEnd = (event) => { // console.log("Drag end: ", e, e.target.closest('div')) + const {source} = event.operation + + if (source && source?.id !== props?.id){ + return + } + console.log("Drage ended") onDragEnd() } @@ -64,7 +87,7 @@ function Draggable(props) { return (
{ - - manager?.monitor?.addEventListener("dragstart", handleDragEnter) - manager?.monitor?.addEventListener("dragend", handleDragLeave) - manager?.monitor?.addEventListener("dragover", handleDragOver) - - - return () => { - manager?.monitor?.removeEventListener("dragstart", handleDragEnter) - manager?.monitor?.removeEventListener("dragend", handleDragLeave) - manager?.monitor?.removeEventListener("dragover", handleDragOver) - } - }, [manager]) - const { droppableTags, onDrop } = props const { draggedElement, overElement, setOverElement, widgetClass } = useDragContext() // const {} - + const [allowDrop, setAllowDrop] = useState(false) // indicator if the draggable can be dropped on the droppable - // useEffect(() => { + useEffect(() => { - // if (droppableRef.current) - // setNodeRef(droppableRef.current) + manager?.monitor?.addEventListener("dragstart", handleDragEnter) + manager?.monitor?.addEventListener("dragend", handleDragLeave) + manager?.monitor?.addEventListener("dragmove", handleDragOver) + + + return () => { + manager?.monitor?.removeEventListener("dragstart", handleDragEnter) + manager?.monitor?.removeEventListener("dragend", handleDragLeave) + manager?.monitor?.removeEventListener("dragmove", handleDragOver) + } + }, [manager, draggedElement]) - // }, [droppableRef.current, setNodeRef]) // TODO: handle Drop on Canvas @@ -87,6 +81,7 @@ function Droppable(props) { 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 @@ -95,6 +90,7 @@ function Droppable(props) { const dragElementType = draggedElement.getAttribute("data-draggable-type") + console.log("Over element: ", e) setOverElement(document.getElementById(e.over.id)) const allowDrop = (droppableTags && droppableTags !== null && (Object.keys(droppableTags).length === 0 || @@ -113,7 +109,7 @@ function Droppable(props) { if (target && target?.id !== props?.id){ return } - console.log("Over sir1: ", draggedElement) + // console.log("Over sir1: ", draggedElement) if (!draggedElement || !draggedElement.getAttribute("data-drag-start-within")) { @@ -129,9 +125,6 @@ function Droppable(props) { (droppableTags.exclude?.length > 0 && !droppableTags.exclude?.includes(dragElementType)) )) - console.log("Over sir: ", allowDrop) - - setAllowDrop(allowDrop) // if (allowDrop) { // e.preventDefault() // this is necessary to allow drop to take place diff --git a/src/components/draggable/draggableContext.js b/src/components/draggable/draggableContext.js index ab260f7..2cee1f6 100644 --- a/src/components/draggable/draggableContext.js +++ b/src/components/draggable/draggableContext.js @@ -20,6 +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)