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

fixed drag position

Browse Source
This commit is contained in:
paul
2025-03-06 14:32:00 +05:30
parent ed333d6ee6
commit f3cd37b1f9
8 changed files with 1481 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/canvas/canvas.js
View File

@@ -665,7 +665,7 @@ class Canvas extends React.Component {
* Handles drop event to canvas from the sidebar and on canvas widget movement
* @param {DragEvent} e
*/
handleDropEvent = (e, draggedElement, widgetClass = null) => {
handleDropEvent = (e, draggedElement, widgetClass = null, posMetaData) => {
e.preventDefault()
// console.log("Drop event")
@@ -706,9 +706,24 @@ class Canvas extends React.Component {
} else if ([WidgetContainer.CANVAS, WidgetContainer.WIDGET].includes(container)) {
// snaps to center
// finalPosition = {
// x: (clientX - canvasRect.left) / this.state.zoom - (elementWidth / 2) / this.state.zoom,
// y: (clientY - canvasRect.top) / this.state.zoom - (elementHeight / 2) / this.state.zoom,
// }
const {dragStartCursorPos, initialPos} = posMetaData
const canvasBoundingRect = this.getCanvasBoundingRect()
// calculate the initial offset from the div to the cursor grab
const initialOffset = {
x: ((dragStartCursorPos.x - canvasBoundingRect.left) / this.state.zoom - this.state.currentTranslate.x) - initialPos.x,
y: ((dragStartCursorPos.y - canvasBoundingRect.top) / this.state.zoom - this.state.currentTranslate.y) - initialPos.y
}
finalPosition = {
x: (clientX - canvasRect.left) / this.state.zoom - (elementWidth / 2) / this.state.zoom,
y: (clientY - canvasRect.top) / this.state.zoom - (elementHeight / 2) / this.state.zoom,
x: finalPosition.x - initialOffset.x - this.state.currentTranslate.x,
y: finalPosition.y - initialOffset.y - this.state.currentTranslate.y
}
let widgetId = draggedElement.getAttribute("data-widget-id")

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

@@ -821,11 +821,13 @@ class Widget extends React.Component {
// const offsetY = e.clientY - rect.top
// snap to middle
const offsetX = rect.width / 2
const offsetY = rect.height / 2
// const offsetX = rect.width / 2
// const offsetY = rect.height / 2
// Set the custom drag image with correct offset to avoid snapping to the top-left corner
e.dataTransfer.setDragImage(dragImage, offsetX, offsetY)
const offsetX = e.clientX - rect.left;
const offsetY = e.clientY - rect.top;
e.dataTransfer.setDragImage(dragImage, offsetX, offsetY);
// Remove the custom drag image after some time to avoid leaving it in the DOM
@@ -1113,6 +1115,20 @@ class Widget extends React.Component {
opacity: this.state.isDragging ? 0.3 : 1,
}
const handleSetInitialPosition = (e, setPosMetaData) => {
const {clientX, clientY} = e
const posMetaData = {
dragStartCursorPos: {x: clientX, y: clientY},
initialPos: this.getPos()
}
setPosMetaData(posMetaData)
console.log("handle initial data: ", posMetaData)
}
// const boundingRect = this.getBoundingRect
// FIXME: if the parent container has tw-overflow-none, then the resizable indicator are also hidden
@@ -1120,7 +1136,7 @@ class Widget extends React.Component {
<DragContext.Consumer>
{
({ draggedElement, widgetClass, onDragStart, onDragEnd, overElement, setOverElement }) => {
({ draggedElement, widgetClass, onDragStart, onDragEnd, overElement, setOverElement, setPosMetaData }) => {
return (
@@ -1143,6 +1159,9 @@ class Widget extends React.Component {
onDragStart={(e) => this.handleDragStart(e, onDragStart)}
onDragEnd={(e) => this.handleDragEnd(onDragEnd)}
// onPointerDown={setInitialPos}
onPointerDown={(e) => handleSetInitialPosition(e, setPosMetaData)}
>
{/* FIXME: Swappable when the parent layout is flex/grid and gap is more, this trick won't work, add bg color to check */}
{/* FIXME: Swappable, when the parent layout is gap is 0, it doesn't work well */}