From cc84a9f2d78f943f64e41e1df7fb9b6942d87cf3 Mon Sep 17 00:00:00 2001 From: paul Date: Sun, 2 Mar 2025 10:29:59 +0530 Subject: [PATCH] fixed sidebar drop position using dnd-kit --- src/canvas/canvas.js | 38 ++++++++++++++++---- src/canvas/widgets/base.js | 5 +-- src/components/draggable/dnd/draggableDnd.js | 8 +++-- src/components/draggable/dnd/droppableDnd.js | 30 ++++++++++------ 4 files changed, 58 insertions(+), 23 deletions(-) diff --git a/src/canvas/canvas.js b/src/canvas/canvas.js index b04a43e..95154d2 100644 --- a/src/canvas/canvas.js +++ b/src/canvas/canvas.js @@ -191,6 +191,8 @@ class Canvas extends React.Component { getWidgetFromTarget(target) { // TODO: improve search, currently O(n), but can be improved via this.state.widgets or something + console.log("Target: ", target, ) + let innerWidget = null for (let [key, ref] of Object.entries(this.widgetRefs)) { @@ -199,9 +201,11 @@ class Canvas extends React.Component { break } + console.log("ref: ", ref.current) + // console.log("refs: ", ref) // TODO: remove the ref.current? if there are bugs it would become hard to debug - if (ref.current?.getElement().contains(target)) { + if (ref.current?.getElement()?.contains(target)) { if (!innerWidget) { innerWidget = ref.current @@ -668,12 +672,16 @@ class Canvas extends React.Component { */ handleDropEvent = (e, draggedElement, widgetClass = null) => { - e.preventDefault() - // console.log("Drop event") + console.log("event: ", e, draggedElement, widgetClass) + + // e.preventDefault() this.setState({ isWidgetDragging: false }) + console.log("Drop outside1") if (!draggedElement || !draggedElement.getAttribute("data-drag-start-within")) { + console.log("Drop outside") + // if the drag is starting from outside (eg: file drop) or if drag doesn't exist return } @@ -685,13 +693,25 @@ class Canvas extends React.Component { const elementWidth = draggedElementRect.width const elementHeight = draggedElementRect.height - const { clientX, clientY } = e + const {x: draggedElementInitialX, y: draggedElementInitialY} = draggedElement.getBoundingClientRect() + // const { clientX, clientY } = e + const { x: clientX, y: clientY} = e.delta; + + console.log("wirking: ", clientX, clientY, draggedElement.getBoundingClientRect()) + + + // 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, + x: ((draggedElementInitialX + clientX) - canvasRect.left) / (1 || this.state.zoom), + y: ((draggedElementInitialY + clientY) - canvasRect.top) / (1 ||this.state.zoom), } + console.log("final position: ", finalPosition, draggedElementInitialX, clientX, canvasRect.left) + if (container === WidgetContainer.SIDEBAR) { @@ -699,9 +719,13 @@ class Canvas extends React.Component { throw new Error("WidgetClass has to be passed for widgets dropped from sidebar") } + // if the widget is being dropped from the sidebar, use the info to create the widget first this.createWidget(widgetClass, ({ id, widgetRef }) => { widgetRef.current.setPos(finalPosition.x, finalPosition.y) + // widgetRef.current.setPos(10, 10) + console.log("hell ya ", widgetRef.current.setPos, finalPosition) + }) } else if ([WidgetContainer.CANVAS, WidgetContainer.WIDGET].includes(container)) { @@ -783,7 +807,7 @@ class Canvas extends React.Component { // console.log("event: ", event) // widgets data structure { id, widgetType: widgetComponentType, children: [], parent: "" } const dropWidgetObj = this.findWidgetFromListById(parentWidgetId) - // Find the dragged widget object + // Find the dragged wihandleAddWidgetChilddget object let dragWidgetObj = this.findWidgetFromListById(dragElementID) // console.log("Drag widget obj: ", dragWidgetObj, dropWidgetObj) diff --git a/src/canvas/widgets/base.js b/src/canvas/widgets/base.js index 7853566..2231965 100644 --- a/src/canvas/widgets/base.js +++ b/src/canvas/widgets/base.js @@ -365,6 +365,7 @@ class Widget extends React.Component { } setPos(x, y) { + console.log("position set: ", x, y) this.setState({ pos: { x, y } @@ -1119,7 +1120,7 @@ class Widget extends React.Component { return ( // - <> + { ({ draggedElement, widgetClass, onDragStart, onDragEnd, overElement, setOverElement }) => { @@ -1259,7 +1260,7 @@ class Widget extends React.Component { } } - + ) } diff --git a/src/components/draggable/dnd/draggableDnd.js b/src/components/draggable/dnd/draggableDnd.js index 372b497..aa15f90 100644 --- a/src/components/draggable/dnd/draggableDnd.js +++ b/src/components/draggable/dnd/draggableDnd.js @@ -57,17 +57,19 @@ function Draggable(props) { } - + // TODO: remove element meta data from props return ( -
{props.children}
diff --git a/src/components/draggable/dnd/droppableDnd.js b/src/components/draggable/dnd/droppableDnd.js index 2c7448c..7914050 100644 --- a/src/components/draggable/dnd/droppableDnd.js +++ b/src/components/draggable/dnd/droppableDnd.js @@ -7,6 +7,13 @@ function Droppable(props) { const droppableRef = useRef(null) + // const [dragPosition, setDragPosition] = useState({ + // startX: 0, + // startY: 0, + // endX: 0, + // endY: 0 + // }) + const { isOver, setNodeRef } = useDroppable({ id: props.id, }) @@ -17,16 +24,23 @@ function Droppable(props) { useDndMonitor({ onDragStart: (event) => { - if (event.over?.id === props.id) + if (event.over?.id === props.id){ handleDragEnter(event) + // setDragPosition({ + // ...dragPosition, + // startX: event.over. + // }) + + console.log("starting: ", event) + } }, onDragMove: (event) => { - console.log("Drag start") + 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 @@ -73,7 +87,6 @@ function Droppable(props) { const dragElementType = draggedElement.getAttribute("data-draggable-type") - console.log("Drag eneter:", e, e.over.id) setOverElement(document.getElementById(e.over.id)) const allowDrop = (droppableTags && droppableTags !== null && (Object.keys(droppableTags).length === 0 || @@ -81,8 +94,6 @@ function Droppable(props) { (droppableTags.exclude?.length > 0 && !droppableTags.exclude?.includes(dragElementType)) )) - console.log("allow drop: ", allowDrop) - setAllowDrop(allowDrop) } @@ -102,8 +113,7 @@ function Droppable(props) { (droppableTags.exclude?.length > 0 && !droppableTags.exclude?.includes(dragElementType)) )) - console.log("allow drop: ", allowDrop) - setAllowDrop({allow: allowDrop}) + setAllowDrop(allowDrop) // if (allowDrop) { // e.preventDefault() // this is necessary to allow drop to take place // } @@ -123,7 +133,7 @@ function Droppable(props) { } // e.stopPropagation() - + console.log("Drag ended: ", e) const dragElementType = draggedElement.getAttribute("data-draggable-type") @@ -148,8 +158,6 @@ function Droppable(props) { } } - - // TODO: from here return (
{props.children}