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

fix: fixed the selection and delete widget

Browse Source
This commit is contained in:
paul
2024-09-13 12:28:32 +05:30
parent c94fd3918d
commit 23f1e08fbc
7 changed files with 170 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/App.js
View File

@@ -19,6 +19,9 @@ function App() {
* @type {Canvas | null>}
*/
const canvasRef = useRef()
const widgetOverlayRef = useRef()
const [initialPosition, setInitialPosition] = useState({ x: 0, y: 0 })
const [uploadedAssets, setUploadedAssets] = useState([]) // a global storage for assets, since redux can't store files(serialize files)
@@ -56,9 +59,23 @@ function App() {
console.log("Drag start: ", event)
const draggedItem = sidebarWidgets.find((item) => item.name === event.active.id)
setActiveSidebarWidget(draggedItem)
const activeItemElement = widgetOverlayRef.current
if (activeItemElement) {
const rect = activeItemElement.getBoundingClientRect()
// Store the initial position of the dragged element
setInitialPosition({
x: rect.left,
y: rect.top,
})
}
}
const handleDragMove = (event) => {
// console.log("drag move: ", event)
}
const handleDragEnd = (event) => {
@@ -67,10 +84,11 @@ function App() {
const {active, over, delta, activatorEvent} = event
const widgetItem = active.data.current?.title
const activeItemElement = document.getElementById(`${active.id}`)
const activeItemElement = widgetOverlayRef.current
// console.log("ended: ", activatorEvent, "delta", delta, "drag ended: ", event, "active: ", active, "over: ", over)
console.log("over: ", active, over, activeItemElement)
console.log("ended: ", activatorEvent.clientX, activatorEvent.clientY)
// console.log("over: ", active, over, activeItemElement)
if (over?.id !== "canvas-droppable" || !widgetItem) {
setDropAnimation({ duration: 250, easing: "ease" })
return
@@ -79,34 +97,40 @@ function App() {
// FIXME: drop offset is not correct
// Calculate the dragged item's bounding rectangle
// const itemRect = activeItemElement.getBoundingClientRect();
// const itemCenterX = itemRect.left + itemRect.width / 2
// const itemCenterY = itemRect.top + itemRect.height / 2
const itemRect = activeItemElement.getBoundingClientRect();
const itemCenterX = itemRect.left + itemRect.width / 2
const itemCenterY = itemRect.top + itemRect.height / 2
console.log("widget overlay: ", delta, itemRect)
// // Calculate cursor position relative to the canvas
// const cursorX = activatorEvent.clientX
// const cursorY = activatorEvent.clientY
// // Calculate the offset from the center of the item to the cursor
// const offsetX = cursorX - itemCenterX
// const offsetY = cursorY - itemCenterY
// Get widget dimensions (assuming you have a way to get these)
const widgetWidth = activeItemElement.offsetWidth; // Adjust this based on how you get widget size
const widgetHeight = activeItemElement.offsetHeight; // Adjust this based on how you get widget size
const canvasContainerRect = canvasRef.current.getCanvasContainerBoundingRect()
const canvasTranslate = canvasRef.current.getCanvasTranslation()
const zoom = canvasRef.current.getZoom()
// let finalPosition = {
// x: (delta.x - canvasContainerRect.x - canvasTranslate.x) / zoom,
// y: (delta.y - canvasContainerRect.y - canvasTranslate.y) / zoom,
// }
let finalPosition = {
x: (delta.x - canvasContainerRect.x - canvasTranslate.x) / zoom,
y: (delta.y - canvasContainerRect.y - canvasTranslate.y) / zoom,
x: (initialPosition.x + delta.x - canvasContainerRect.x - canvasTranslate.x) / zoom - (widgetWidth / 2),
y: (initialPosition.y + delta.y - canvasContainerRect.y - canvasTranslate.y) / zoom - (widgetHeight / 2),
}
// find the center of the active widget then set the final position
// finalPosition = {
// finalPosition
// }
// console.log("drop position: ", "delta: ", delta, "activator", canvasContainerRect, canvasTranslate,)
console.log("drop position: ", "delta: ", delta, "activator", finalPosition, canvasTranslate,)
canvasRef.current.addWidget(Widget, ({id, widgetRef}) => {
widgetRef.current.setPos(finalPosition.x, finalPosition.y)
@@ -126,7 +150,7 @@ function App() {
<div className="tw-w-full tw-h-[100vh] tw-flex tw-flex-col tw-bg-primaryBg">
<Header className="tw-h-[6vh]"/>
<DndContext sensors={sensors}
<DndContext
modifiers={[snapCenterToCursor]}
collisionDetection={rectIntersection}
onDragStart={handleDragStart}
@@ -140,11 +164,12 @@ function App() {
</div>
{/* dragOverlay (dnd-kit) helps move items from one container to another */}
<DragOverlay dropAnimation={dropAnimation} >
<DragOverlay dropAnimation={dropAnimation}>
{activeSidebarWidget ? (
<DraggableWidgetCard name={activeSidebarWidget.name}
img={activeSidebarWidget.img}
url={activeSidebarWidget.link}
innerRef={widgetOverlayRef}
/>
):
null}