fixed initial offset problem

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)

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

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)

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 }) => {
         <DragContext.Provider value={{ draggedElement, overElement, setOverElement, 
                                             widgetClass, onDragStart, onDragEnd, isDragging,
                                             dragElementMetaData, setDragElementMetaData, 
-                                            initialOffset, setInitialOffset
+                                            posMetaData, setPosMetaData
                                             }}>
             {children}
         </DragContext.Provider>