From 910ff813427ffc6cbc29b1ddd064de46e72615ac Mon Sep 17 00:00:00 2001 From: paul Date: Wed, 5 Mar 2025 18:05:59 +0530 Subject: [PATCH] fixed initial offset problem --- src/canvas/canvas.js | 31 ++++++++++++++------ src/canvas/widgets/widgetDnd.js | 17 ++++++----- src/components/draggable/dnd/droppableDnd.js | 8 ++--- src/components/draggable/draggableContext.js | 4 +-- 4 files changed, 37 insertions(+), 23 deletions(-) diff --git a/src/canvas/canvas.js b/src/canvas/canvas.js index 6aa7033..1b73b6c 100644 --- a/src/canvas/canvas.js +++ b/src/canvas/canvas.js @@ -665,9 +665,9 @@ 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, initialOffset={x: 0, y: 0}) => { + handleDropEvent = (e, draggedElement, widgetClass = null, posMetaData) => { - console.log("event: ", e, draggedElement, widgetClass, initialOffset) + console.log("event: ", e, draggedElement, widgetClass, posMetaData) // e.preventDefault() @@ -693,18 +693,16 @@ class Canvas extends React.Component { const { transform } = e.operation console.log("event: ", e) // const { x: clientX, y: clientY} = e.delta; - const {clientX: draggedElementInitialX, clientY: draggedElementInitialY} = e.operation.activatorEvent const { initial, current } = e.operation.shape console.log("wirking: ", transform) - // TODO: + initial cursor position - final cursor position let finalPosition = { x: ((clientX - canvasRect.left) / this.state.zoom), y: ((clientY - canvasRect.top) / this.state.zoom), } - console.log("container: ", container) + console.log("container: ", initial, current) if (container === WidgetContainer.SIDEBAR) { @@ -727,11 +725,26 @@ class Canvas extends React.Component { // y: (clientY - canvasRect.top) / this.state.zoom - (elementHeight / 2) / this.state.zoom, // } - finalPosition = { - x: finalPosition.x - initialOffset.x, - y: finalPosition.y - initialOffset.y + // const initialOffset = { + // x: (clientX - canvasBoundingRect.left) - currentPos.x, + // y: (clientY - canvasBoundingRect.top) - currentPos.y + // } + + const canvasBoundingRect = this.getCanvasBoundingRect() + + console.log("meta data: ") + + const {dragStartCursorPos, initialPos} = posMetaData + + 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: finalPosition.x - initialOffset.x - this.state.currentTranslate.x, + y: finalPosition.y - initialOffset.y - this.state.currentTranslate.y } - console.log(initial, current) let widgetId = draggedElement.getAttribute("data-widget-id") const widgetObj = this.getWidgetById(widgetId) diff --git a/src/canvas/widgets/widgetDnd.js b/src/canvas/widgets/widgetDnd.js index 44e2fe9..0f13771 100644 --- a/src/canvas/widgets/widgetDnd.js +++ b/src/canvas/widgets/widgetDnd.js @@ -14,7 +14,7 @@ function WidgetDnd({widgetId, canvas, widgetRef, droppableTags,onMousePress, onD const {dragElementType} = props - const { draggedElement, setOverElement, widgetClass, setInitialOffset } = useDragContext() + const { draggedElement, setOverElement, widgetClass, setPosMetaData } = useDragContext() const [isDropDisabled, setIsDropDisabled] = useState(false); @@ -80,7 +80,7 @@ function WidgetDnd({widgetId, canvas, widgetRef, droppableTags,onMousePress, onD } - }, [manager, draggedElement, widgetClass, canvas]) + }, [manager, draggedElement, widgetClass, canvas, currentPos]) const handleRef = (node) => { @@ -97,19 +97,20 @@ function WidgetDnd({widgetId, canvas, widgetRef, droppableTags,onMousePress, onD return } - console.log("canvas bounding rect: ", canvas.getBoundingClientRect()) + console.log("canvas bounding rect: ", canvas.getBoundingClientRect(), widgetRef.current) const {clientX, clientY} = e const canvasBoundingRect = canvas.getBoundingClientRect() - const initialOffset = { - x: clientX - (currentPos.x + canvasBoundingRect.left), - y: clientY - (currentPos.y + canvasBoundingRect.top) + // FIXME: initial offset is off + const posMetaData = { + dragStartCursorPos: {x: clientX, y: clientY}, + initialPos: currentPos } - setInitialOffset(initialOffset) - console.log("initial position calc: ", initialOffset, clientX, clientY) + setPosMetaData(posMetaData) + console.log("initial position calc: ", posMetaData, currentPos, (clientX - canvasBoundingRect.left), (clientY - canvasBoundingRect.top), "client: ", clientX, clientY, canvasBoundingRect) } diff --git a/src/components/draggable/dnd/droppableDnd.js b/src/components/draggable/dnd/droppableDnd.js index ceb4bff..24d8cbf 100644 --- a/src/components/draggable/dnd/droppableDnd.js +++ b/src/components/draggable/dnd/droppableDnd.js @@ -8,7 +8,7 @@ function Droppable(props) { const droppableRef = useRef(null) const { droppableTags, onDrop } = props - const { draggedElement, setOverElement, widgetClass, initialOffset } = useDragContext() + const { draggedElement, setOverElement, widgetClass, posMetaData } = useDragContext() const { ref, isDropTarget, droppable} = useDroppable({ id: props.id, @@ -40,7 +40,7 @@ function Droppable(props) { manager?.monitor?.removeEventListener("dragend", handleDragLeave) manager?.monitor?.removeEventListener("dragmove", handleDragOver) } - }, [manager, draggedElement, widgetClass, initialOffset]) + }, [manager, draggedElement, widgetClass, posMetaData]) const handleRef = (node) => { @@ -132,9 +132,9 @@ function Droppable(props) { (droppableTags.exclude?.length > 0 && !droppableTags.exclude?.includes(dragElementType)) )) - console.log("initial POs: ", initialOffset) + console.log("initial POs: ", posMetaData) if (onDrop && dropAllowed) { - onDrop(e, draggedElement, widgetClass, initialOffset) + onDrop(e, draggedElement, widgetClass, posMetaData) } setTimeout(() => setAllowDrop({allow: true, show: false}), 10) diff --git a/src/components/draggable/draggableContext.js b/src/components/draggable/draggableContext.js index 5493432..949e9f3 100644 --- a/src/components/draggable/draggableContext.js +++ b/src/components/draggable/draggableContext.js @@ -12,7 +12,7 @@ export const DragProvider = ({ children }) => { const [draggedElement, setDraggedElement] = useState(null) const [overElement, setOverElement] = useState(null) // the element the dragged items is over - const [initialOffset, setInitialOffset] = useState({x: 0, y: 0}) + const [posMetaData, setPosMetaData] = useState({dragStartCursorPos: {x: 0, y: 0}, initialPos: {x: 0, y: 0}}) const [dragElementMetaData, setDragElementMetaData] = useState({}) @@ -48,7 +48,7 @@ export const DragProvider = ({ children }) => { {children}