From 1ee137085ebcd43f3b4d741af06571530521c5b9 Mon Sep 17 00:00:00 2001 From: paul Date: Tue, 4 Mar 2025 11:45:26 +0530 Subject: [PATCH] bud fixes for dnd --- src/canvas/canvas.js | 8 - src/canvas/widgets/base.js | 11 +- src/canvas/widgets/widgetDnd.js | 146 ++++++++++--------- src/components/cards.js | 79 +++++----- src/components/draggable/dnd/draggableDnd.js | 19 +-- src/components/draggable/dnd/droppableDnd.js | 19 +-- 6 files changed, 134 insertions(+), 148 deletions(-) diff --git a/src/canvas/canvas.js b/src/canvas/canvas.js index 903ff39..f855d1f 100644 --- a/src/canvas/canvas.js +++ b/src/canvas/canvas.js @@ -673,9 +673,7 @@ class Canvas extends React.Component { 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 @@ -710,12 +708,6 @@ class Canvas extends React.Component { // 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) - - if (container === WidgetContainer.SIDEBAR) { if (!widgetClass) { diff --git a/src/canvas/widgets/base.js b/src/canvas/widgets/base.js index bf6c0a1..440b768 100644 --- a/src/canvas/widgets/base.js +++ b/src/canvas/widgets/base.js @@ -1105,9 +1105,9 @@ class Widget extends React.Component { ...this.state.widgetOuterStyling, cursor: this.cursor, zIndex: this.state.zIndex, - // position: this.state.positionType, // don't change this if it has to be movable on the canvas - // top: `${this.state.pos.y}px`, - // left: `${this.state.pos.x}px`, + position: this.state.positionType, // don't change this if it has to be movable on the canvas + top: `${this.state.pos.y}px`, + left: `${this.state.pos.x}px`, width: width, height: height, minWidth: minWidth, @@ -1128,10 +1128,11 @@ class Widget extends React.Component { return ( - this.handleDragOver(e, draggedElement)} // onDrop={(e) => {this.handleDropEvent(e, draggedElement, widgetClass); onDragEnd()}} @@ -1140,7 +1141,7 @@ class Widget extends React.Component { // onDragStart={(e) => this.handleDragStart(e, onDragStart)} // onDragEnd={(e) => this.handleDragEnd(onDragEnd)} - // style={outerStyle} + style={outerStyle} >
{ // const allowDrop = (droppableTags && droppableTags !== null && (Object.keys(droppableTags).length === 0 || @@ -27,7 +26,7 @@ function WidgetDnd({droppableTags, }) const { ref: dragRef, draggable } = useDraggable({ - id: dragElementType, + id: widgetId, feedback: "default", type: dragElementType, disabled: props.disabled, @@ -68,66 +67,75 @@ function WidgetDnd({droppableTags, const handleDragEnter = (e) => { const {target, source} = e.operation - - console.log("is drag source: ", props.id, draggable.isDragSource) if (draggable.isDragSource){ - onDragStart(dndRef?.current, widgetClass) + // if the current widget is being dragged + onDragStart(dndRef?.current, widgetClass) - } + dndRef.current.style.zIndex = 10 - if (target && target?.id !== props?.id){ + return + }else if (droppable.isDropTarget){ + + if (!draggedElement || !draggedElement.getAttribute("data-drag-start-within")) { + // if the drag is starting from outside (eg: file drop) or if drag doesn't exist return } - - - if (!draggedElement || !draggedElement.getAttribute("data-drag-start-within")) { - // if the drag is starting from outside (eg: file drop) or if drag doesn't exist - return + + const dragElementType = draggedElement.getAttribute("data-draggable-type") + + setOverElement(dndRef.current) + + 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)) + )) + + console.log("droppable tags: ", dropAllowed) + + + setAllowDrop({allow: dropAllowed, show: true}) + } - const dragElementType = draggedElement.getAttribute("data-draggable-type") - - setOverElement(document.getElementById(source.id)) - - 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)) - )) - - console.log("droppable tags: ", dropAllowed) - setAllowDrop({allow: dropAllowed, show: true}) } const handleDragOver = (e) => { - const {target} = e.operation + + // if (draggable.isDragSource){ + // onDragStart(dndRef?.current, widgetClass) + + // // TODO + // dndRef.current.style.zIndex = 10 + // } + - if (target && target?.id !== props?.id){ - return + if (droppable.isDropTarget){ + if (!draggedElement || !draggedElement.getAttribute("data-drag-start-within")) { + // if the drag is starting from outside (eg: file drop) or if drag doesn't exist + return + } + + // console.log("Drag over: ", e.dataTransfer.getData("text/plain"), e.dataTransfer) + const dragElementType = draggedElement.getAttribute("data-draggable-type") + + 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({allow: dropAllowed, show: true}) + } // console.log("Over sir1: ", draggedElement) - if (!draggedElement || !draggedElement.getAttribute("data-drag-start-within")) { - // if the drag is starting from outside (eg: file drop) or if drag doesn't exist - return - } - - // console.log("Drag over: ", e.dataTransfer.getData("text/plain"), e.dataTransfer) - const dragElementType = draggedElement.getAttribute("data-draggable-type") - - 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({allow: dropAllowed, show: true}) // if (allowDrop) { // e.preventDefault() // this is necessary to allow drop to take place @@ -139,31 +147,34 @@ function WidgetDnd({droppableTags, const {target} = e.operation - if (target && target?.id !== props?.id){ - return - } + if (draggable.isDragSource){ + onDragEnd() - setAllowDrop({allow: false, show: false}) + }else if (droppable.isDropTarget){ + 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 - return - } + if (!draggedElement || !draggedElement.getAttribute("data-drag-start-within")) { + // if the drag is starting from outside (eg: file drop) or if drag doesn't exist + return + } - // e.stopPropagation() + // e.stopPropagation() - const dragElementType = draggedElement.getAttribute("data-draggable-type") + const dragElementType = draggedElement.getAttribute("data-draggable-type") - 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)) - )) + 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 && dropAllowed) { - // onDrop(e, draggedElement, widgetClass) - // } + if (onDrop && dropAllowed && (droppable.isDropTarget && !draggable.isDragSource)) { + onDrop(e, draggedElement, widgetClass) + } + } + + } @@ -208,21 +219,16 @@ function WidgetDnd({droppableTags, return (
+ className={`${props.className} tw-relative tw-h-fit tw-w-fit tw-outline-none`} + > + {props.children} - {/* { - showDroppable.show && -
-
- } */} { - droppable.isDropTarget && + (droppable.isDropTarget && !draggable.isDragSource) &&
- {/* */} - -
-
- {name} -
- {name} -
- - - {urlIcon} - - - {license?.name && - -
- { - license.url ? - - {license.name} - - : -
- {license.name} -
- } -
- } -
- + +
+
+ {name}
- {/* */} + {name} +
+ + + {urlIcon} + + + {license?.name && + +
+ { + license.url ? + + {license.name} + + : +
+ {license.name} +
+ } +
+ } +
+ +
) diff --git a/src/components/draggable/dnd/draggableDnd.js b/src/components/draggable/dnd/draggableDnd.js index 40c68f0..d4b9bdc 100644 --- a/src/components/draggable/dnd/draggableDnd.js +++ b/src/components/draggable/dnd/draggableDnd.js @@ -4,14 +4,14 @@ import { CSS } from "@dnd-kit/utilities" import { useDragContext } from "../draggableContext" -function Draggable(props) { +function Draggable({dragElementType, dragWidgetClass = null, elementMetaData, ...props}) { const draggableRef = useRef(null); - const { ref } = useDraggable({ - id: props.dragElementType, + const { ref, draggable } = useDraggable({ + id: dragElementType, feedback: props.draggableType || "default", - type: props.dragElementType + type: dragElementType // data: { title: props.children } }) @@ -33,7 +33,6 @@ function Draggable(props) { }, [manager]) - const { dragElementType, dragWidgetClass = null, elementMetaData } = props // const style = transform ? { // transform: CSS.Translate.toString(transform), // } : undefined @@ -48,11 +47,10 @@ function Draggable(props) { const {source} = event.operation - if (!source || (source && source.id !== props.dragElementType)){ - return - } if (!source || (source && source.id !== props.dragElementType)){ + if (!draggable.isDragSource){ return } + // event.dataTransfer.setData("text/plain", "") // onDragStart(draggableRef?.current, dragWidgetClass) onDragStart(draggableRef?.current, dragWidgetClass, elementMetaData) @@ -63,7 +61,7 @@ function Draggable(props) { // console.log("Drag end: ", e, e.target.closest('div')) const {source} = event.operation - if (!source || (source && source.id !== props.dragElementType)){ + if (!draggable.isDragSource){ return } @@ -74,13 +72,12 @@ 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 8ec0983..acefe71 100644 --- a/src/components/draggable/dnd/droppableDnd.js +++ b/src/components/draggable/dnd/droppableDnd.js @@ -23,9 +23,8 @@ function Droppable(props) { } }) - - const manager = useDragDropManager() + const manager = useDragDropManager() // const {} const [allowDrop, setAllowDrop] = useState({show: false, allow: false}) // indicator if the draggable can be dropped on the droppable @@ -41,7 +40,7 @@ function Droppable(props) { manager?.monitor?.removeEventListener("dragend", handleDragLeave) manager?.monitor?.removeEventListener("dragmove", handleDragOver) } - }, [manager, draggedElement]) + }, [manager, draggedElement, widgetClass]) const handleRef = (node) => { @@ -138,6 +137,8 @@ function Droppable(props) { (droppableTags.exclude?.length > 0 && !droppableTags.exclude?.includes(dragElementType)) )) + console.log("Widget class1: ", widgetClass, draggedElement) + if (onDrop && dropAllowed) { onDrop(e, draggedElement, widgetClass) } @@ -159,24 +160,18 @@ function Droppable(props) { return (
+ {props.children} - {/* { - showDroppable.show && -
-
- } */} { allowDrop.show &&
} +
) }