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

working on dnd aaaaa..... screammmmm

Browse Source
This commit is contained in:
paul
2025-03-04 19:15:09 +05:30
parent 1ee137085e
commit b1c707a21d
6 changed files with 259 additions and 377 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/canvas/widgets/widgetDnd.js
View File

@@ -1,9 +1,12 @@
import React, { useEffect, useRef, useState } from 'react'
import { useDragDropManager, useDroppable, useDraggable } from '@dnd-kit/react'
import { useDragContext } from '../../components/draggable/draggableContext'
import WidgetContainer from '../constants/containers'
function WidgetDnd({widgetId, droppableTags, onDrop,
// FIXME: widget class is null
function WidgetDnd({widgetId, widgetRef, droppableTags, onDrop, onDragStart,
onDragEnd, onDragEnter, onDragOver, initialPos,
...props}) {
const dndRef = useRef(null)
@@ -27,7 +30,7 @@ function WidgetDnd({widgetId, droppableTags, onDrop,
const { ref: dragRef, draggable } = useDraggable({
id: widgetId,
feedback: "default",
feedback: "move",
type: dragElementType,
disabled: props.disabled,
@@ -38,9 +41,8 @@ function WidgetDnd({widgetId, droppableTags, onDrop,
const manager = useDragDropManager()
// const {}
const {onDragStart, onDragEnd, disableStyle=false} = useDragContext()
const [allowDrop, setAllowDrop] = useState({show: false, allow: false}) // indicator if the draggable can be dropped on the droppable
const {onDragStart: onDragContextStart, onDragEnd: onDragContextEnd, disableStyle=false} = useDragContext()
const [allowDrop, setAllowDrop] = useState(false) // indicator if the draggable can be dropped on the droppable
useEffect(() => {
@@ -49,33 +51,37 @@ function WidgetDnd({widgetId, droppableTags, onDrop,
manager?.monitor?.addEventListener("dragmove", handleDragOver)
// manager?.monitor?.addEventListener("dragover", onDragEndhandleDragOver)
return () => {
manager?.monitor?.removeEventListener("dragstart", handleDragEnter)
manager?.monitor?.removeEventListener("dragend", handleDropEvent)
manager?.monitor?.removeEventListener("dragmove", handleDragOver)
}
}, [manager, draggedElement])
}, [manager, draggedElement, widgetClass])
const handleRef = (node) => {
dndRef.current = node
widgetRef.current = node
dropRef(node)
dragRef(node)
}
const handleDragEnter = (e) => {
const {target, source} = e.operation
if (draggable.isDragSource){
console.log("widget class: ", widgetClass)
// if the current widget is being dragged
onDragStart(dndRef?.current, widgetClass)
onDragContextStart(dndRef?.current, widgetClass, {}, initialPos)
dndRef.current.style.zIndex = 10
onDragStart(e)
return
}else if (droppable.isDropTarget){
if (!draggedElement || !draggedElement.getAttribute("data-drag-start-within")) {
@@ -92,28 +98,14 @@ function WidgetDnd({widgetId, droppableTags, onDrop,
(droppableTags.exclude?.length > 0 && !droppableTags.exclude?.includes(dragElementType))
))
console.log("droppable tags: ", dropAllowed)
setAllowDrop({allow: dropAllowed, show: true})
setAllowDrop(dropAllowed)
}
}
const handleDragOver = (e) => {
const {target} = e.operation
// if (draggable.isDragSource){
// onDragStart(dndRef?.current, widgetClass)
// // TODO
// dndRef.current.style.zIndex = 10
// }
if (droppable.isDropTarget){
if (!draggedElement || !draggedElement.getAttribute("data-drag-start-within")) {
@@ -130,28 +122,21 @@ function WidgetDnd({widgetId, droppableTags, onDrop,
))
setAllowDrop({allow: dropAllowed, show: true})
setAllowDrop(dropAllowed)
onDragOver(e)
}
// console.log("Over sir1: ", draggedElement)
// if (allowDrop) {
// e.preventDefault() // this is necessary to allow drop to take place
// }
}
const handleDropEvent = (e) => {
const {target} = e.operation
if (draggable.isDragSource){
onDragEnd()
onDragContextEnd()
onDragEnd(e)
}else if (droppable.isDropTarget){
setAllowDrop({allow: false, show: false})
setAllowDrop(false)
if (!draggedElement || !draggedElement.getAttribute("data-drag-start-within")) {
@@ -159,11 +144,8 @@ function WidgetDnd({widgetId, droppableTags, onDrop,
return
}
// e.stopPropagation()
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))
@@ -172,64 +154,27 @@ function WidgetDnd({widgetId, droppableTags, onDrop,
if (onDrop && dropAllowed && (droppable.isDropTarget && !draggable.isDragSource)) {
onDrop(e, draggedElement, widgetClass)
}
}
}
// const handleDragLeave = (e) => {
// const {target} = e.operation
// if (target && target.id === props.id){
// handleDropEvent(e)
// }else{
// setAllowDrop({allow: false, show: false})
// }
// }
// const handleDragStart = (event) => {
// const {source} = event.operation
// 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)
// }
// const handleDragEnd = (event) => {
// // console.log("Drag end: ", e, e.target.closest('div'))
// const {source} = event.operation
// if (!source || (source && source.id !== props.dragElementType)){
// return
// }
// // onDragEnd()
// }
return (
<div ref={handleRef} data-drag-start-within
{...props}
draggable
data-widget-id={widgetId}
data-container={WidgetContainer.CANVAS}
data-draggable-type={dragElementType}
className={`${props.className} tw-relative tw-h-fit tw-w-fit tw-outline-none`}
className={`${props.className || ''} tw-relative tw-h-max tw-w-max tw-outline-none`}
>
{props.children}
{
(droppable.isDropTarget && !draggable.isDragSource) &&
<div className={`${allowDrop.allow ? "tw-bg-[#82ff1c6e]" : "tw-bg-[#eb5d366e]"}
<div className={`${allowDrop.allow ? "tw-bg-[#82ff1c55]" : "tw-bg-[#eb5d3662]"}
tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-z-[3]
tw-border-2 tw-border-dashed tw-rounded-lg tw-pointer-events-none
`}>