Miko/PyUIBuilder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working on drop

Browse Source
This commit is contained in:
paul
2025-03-03 11:56:41 +05:30
parent 4df0e664ba
commit 72aafd17fe
3 changed files with 51 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/draggable/dnd/draggableDnd.js
View File

@@ -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()
}

104
src/components/draggable/dnd/droppableDnd.js
View File

@@ -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 (
<div ref={ref} style={style} className={props.className || ''}>
<div ref={handleRef} className={props.className || ''}>
{props.children}
{/* {
showDroppable.show &&
@@ -190,8 +170,8 @@ function Droppable(props) {
} */}
{
isDropTarget &&
<div className={`${allowDrop ? "tw-bg-[#82ff1c6e]" : "tw-bg-[#eb5d366e]"}
allowDrop.show &&
<div className={`${allowDrop.allow ? "tw-bg-[#82ff1c6e]" : "tw-bg-[#eb5d366e]"}
tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-z-[999]
tw-border-2 tw-border-dashed tw-rounded-lg tw-pointer-events-none
`}>

2
src/components/draggable/draggableContext.js
View File

@@ -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)