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

fixed sidebar drop position using dnd-kit

Browse Source
This commit is contained in:
paul
2025-03-02 10:29:59 +05:30
parent a47191ee72
commit cc84a9f2d7
4 changed files with 58 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/canvas/canvas.js
View File

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

5
src/canvas/widgets/base.js
View File

@@ -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 (
// <DragContext.Consumer>
<>
<DragContext.Consumer>
{
({ draggedElement, widgetClass, onDragStart, onDragEnd, overElement, setOverElement }) => {
@@ -1259,7 +1260,7 @@ class Widget extends React.Component {
}
}
</>
</DragContext.Consumer>
)
}

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

@@ -57,17 +57,19 @@ function Draggable(props) {
}
// TODO: remove element meta data from props
return (
<div className={`${props.className}`}
<div
{...props}
ref={draggableRef}
className={`${props.className}`}
// style={!disableStyle ? style : null} //enable this to show like the original item is moving, if commented out the original item will not have css effects
draggable
data-drag-start-within // this attribute indicates that the drag is occurring from within the project and not a outside file drop
data-draggable-type={dragElementType}
{...listeners}
{...attributes}
{...props}
>
{props.children}
</div>

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

@@ -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 (
<div ref={droppableRef} style={style} className={props.className || ''}>
{props.children}