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

fixed position

Browse Source
This commit is contained in:
paul
2025-03-02 22:17:06 +05:30
parent 62caafcf23
commit 4df0e664ba
4 changed files with 66 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/canvas/canvas.js
View File

@@ -695,30 +695,30 @@ class Canvas extends React.Component {
// const {x: draggedElementInitialX, y: draggedElementInitialY} = draggedElement.getBoundingClientRect()
// const { clientX, clientY } = e
const { x: clientX, y: clientY} = e.delta;
const {clientX: draggedElementInitialX, clientY: draggedElementInitialY} = e.activatorEvent
const { clientX, clientY } = e.nativeEvent
// const { x: clientX, y: clientY} = e.delta;
// const {clientX: draggedElementInitialX, clientY: draggedElementInitialY} = e.activatorEvent
console.log("wirking: ", clientX, clientY, e, draggedElementInitialX, draggedElementInitialY)
// console.log("wirking: ", clientX, clientY, e, draggedElementInitialX, draggedElementInitialY)
// 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,
}
// let finalPosition = {
// x: ((draggedElementInitialX + clientX) - canvasRect.left) / (this.state.zoom),
// y: ((draggedElementInitialY + clientY) - canvasRect.top) / (this.state.zoom),
// }
let finalPosition = {
x: (e.activatorEvent.pageX - canvasRect.left) / (this.state.zoom),
y: (e.activatorEvent.pageY - canvasRect.top) / (this.state.zoom),
}
// let finalPosition = {
// x: (e.activatorEvent.pageX - canvasRect.left) / (this.state.zoom),
// 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)
// console.log("final position: ", finalPosition, draggedElementInitialX, clientX, canvasRect, "Top: ",
// canvasRect.top, clientY, draggedElementInitialY)
if (container === WidgetContainer.SIDEBAR) {

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

@@ -1,12 +1,12 @@
import React, { useEffect, useRef } from "react"
import { useDraggable } from "@dnd-kit/react"
import { useDragDropManager, useDraggable } from "@dnd-kit/react"
import { CSS } from "@dnd-kit/utilities"
import { useDragContext } from "../draggableContext"
function Draggable(props) {
const draggableRef = useRef(null)
const draggableRef = useRef(null);
const { ref } = useDraggable({
id: props.id,
@@ -16,7 +16,20 @@ function Draggable(props) {
const {onDragStart, onDragEnd, disableStyle=false} = useDragContext()
// TODO: add monitor and handle drag events ASAP
const manager = useDragDropManager()
useEffect(() => {
manager?.monitor?.addEventListener("dragstart", handleDragStart)
manager?.monitor?.addEventListener("dragend", handleDragEnd)
return () => {
manager?.monitor?.removeEventListener("dragstart", handleDragStart)
manager?.monitor?.removeEventListener("dragend", handleDragEnd)
}
}, [manager])
// useDndMonitor({
// onDragStart(event){
@@ -31,31 +44,41 @@ function Draggable(props) {
// },
// })
// useEffect(() => {
// if (draggableRef.current)
// setNodeRef(draggableRef.current)
// }, [draggableRef.current, setNodeRef])
const { dragElementType, dragWidgetClass = null, elementMetaData } = props
// const style = transform ? {
// transform: CSS.Translate.toString(transform),
// } : undefined
const handleRef = (node) => {
draggableRef.current = node
ref(node)
}
const handleDragStart = (event) => {
console.log("Drag start1: ", elementMetaData)
const {source} = event.operation
if (source && source?.id !== props?.id){
return
}
// event.dataTransfer.setData("text/plain", "")
// onDragStart(draggableRef?.current, dragWidgetClass)
onDragStart(draggableRef?.current, dragWidgetClass, elementMetaData)
}
const handleDragEnd = (e) => {
const handleDragEnd = (event) => {
// console.log("Drag end: ", e, e.target.closest('div'))
const {source} = event.operation
if (source && source?.id !== props?.id){
return
}
console.log("Drage ended")
onDragEnd()
}
@@ -64,7 +87,7 @@ function Draggable(props) {
return (
<div
{...props}
ref={ref}
ref={handleRef}
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

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

@@ -47,35 +47,29 @@ function Droppable(props) {
const manager = useDragDropManager()
useEffect(() => {
manager?.monitor?.addEventListener("dragstart", handleDragEnter)
manager?.monitor?.addEventListener("dragend", handleDragLeave)
manager?.monitor?.addEventListener("dragover", handleDragOver)
return () => {
manager?.monitor?.removeEventListener("dragstart", handleDragEnter)
manager?.monitor?.removeEventListener("dragend", handleDragLeave)
manager?.monitor?.removeEventListener("dragover", handleDragOver)
}
}, [manager])
const { droppableTags, onDrop } = props
const { draggedElement, overElement, setOverElement, widgetClass } = useDragContext()
// const {}
const [allowDrop, setAllowDrop] = useState(false) // indicator if the draggable can be dropped on the droppable
// useEffect(() => {
useEffect(() => {
// if (droppableRef.current)
// setNodeRef(droppableRef.current)
manager?.monitor?.addEventListener("dragstart", handleDragEnter)
manager?.monitor?.addEventListener("dragend", handleDragLeave)
manager?.monitor?.addEventListener("dragmove", handleDragOver)
return () => {
manager?.monitor?.removeEventListener("dragstart", handleDragEnter)
manager?.monitor?.removeEventListener("dragend", handleDragLeave)
manager?.monitor?.removeEventListener("dragmove", handleDragOver)
}
}, [manager, draggedElement])
// }, [droppableRef.current, setNodeRef])
// TODO: handle Drop on Canvas
@@ -87,6 +81,7 @@ function Droppable(props) {
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
@@ -95,6 +90,7 @@ function Droppable(props) {
const dragElementType = draggedElement.getAttribute("data-draggable-type")
console.log("Over element: ", e)
setOverElement(document.getElementById(e.over.id))
const allowDrop = (droppableTags && droppableTags !== null && (Object.keys(droppableTags).length === 0 ||
@@ -113,7 +109,7 @@ function Droppable(props) {
if (target && target?.id !== props?.id){
return
}
console.log("Over sir1: ", draggedElement)
// console.log("Over sir1: ", draggedElement)
if (!draggedElement || !draggedElement.getAttribute("data-drag-start-within")) {
@@ -129,9 +125,6 @@ function Droppable(props) {
(droppableTags.exclude?.length > 0 && !droppableTags.exclude?.includes(dragElementType))
))
console.log("Over sir: ", allowDrop)
setAllowDrop(allowDrop)
// if (allowDrop) {
// e.preventDefault() // this is necessary to allow drop to take place

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

@@ -20,6 +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)