working on sortable

src/canvas/canvas.js

@@ -667,7 +667,6 @@ class Canvas extends React.Component {
      */
       handleDropEvent = (e, draggedElement, widgetClass = null, posMetaData) => {
 
-        console.log("event: ", e, draggedElement, widgetClass, posMetaData)
 
         // e.preventDefault()
 
@@ -682,28 +681,14 @@ class Canvas extends React.Component {
         const container = draggedElement.getAttribute("data-container")
         
         const canvasRect = this.canvasRef.current.getBoundingClientRect()
-        const draggedElementRect = draggedElement.getBoundingClientRect()
-        const elementWidth = draggedElementRect.width
-        const elementHeight = draggedElementRect.height
-
-        // const {x: draggedElementInitialX, y: draggedElementInitialY} = draggedElement.getBoundingClientRect()
         
         const { clientX, clientY } = e.nativeEvent
 
-        const { transform } = e.operation
-        console.log("event: ", e)
-        // const { x: clientX, y: clientY} = e.delta;
-        const { initial, current } = e.operation.shape
-
-        console.log("wirking: ", transform)
-
         let finalPosition = {
             x: ((clientX - canvasRect.left) / this.state.zoom),
             y: ((clientY - canvasRect.top) / this.state.zoom),
         }
 
-        console.log("container: ", initial, current)
-
         if (container === WidgetContainer.SIDEBAR) {
 
             if (!widgetClass) {
@@ -725,17 +710,11 @@ class Canvas extends React.Component {
             //     y: (clientY - canvasRect.top) / this.state.zoom - (elementHeight / 2) / this.state.zoom,
             // }
 
-            // 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
 
+            // 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
@@ -745,18 +724,16 @@ class Canvas extends React.Component {
                 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")
 
             const widgetObj = this.getWidgetById(widgetId)
 
-            console.log("current pos: ", finalPosition, widgetId, widgetObj)
-
             // console.log("WidgetObj: ", widgetObj)
             if (container === WidgetContainer.CANVAS) {
 
                 widgetObj.current.setPos(finalPosition.x, finalPosition.y)
 
-                console.log("current pos: ", finalPosition)
 
             } else if (container === WidgetContainer.WIDGET) {
 

src/canvas/widgets/base.js

@@ -12,7 +12,7 @@ import WidgetContainer from "../constants/containers"
 import { DragContext } from "../../components/draggable/draggableContext"
 import { isNumeric, removeKeyFromObject } from "../../utils/common"
 import { info } from "autoprefixer"
-import { message } from "antd"
+import { Layout, message } from "antd"
 import WidgetDnd from "./widgetDnd"
 
 
@@ -1062,6 +1062,7 @@ class Widget extends React.Component {
             opacity: this.state.isDragging ? 0.6 : 1,
         }
 
+        const isSortable = this.getParentLayout() === Layouts.FLEX || this.getParentLayout() === Layouts.GRID
         // const boundingRect = this.getBoundingRect
         // FIXME: if the parent container has tw-overflow-none, then the resizable indicator are also hidden
         // FIXME: re-enable pointer events
@@ -1090,6 +1091,9 @@ class Widget extends React.Component {
                                 onDragEnter={(e) => this.handleDragEnter(e, draggedElement)} // this is by droppable
                                 widgetRef={this.elementRef}
 
+                                isSortable={isSortable}
+                                sortableIndex={0}
+
                                 canvas={this.canvas}
 
                                 // onDragOver={(e) => this.handleDragOver(e, draggedElement)}

src/canvas/widgets/widgetDnd.js

@@ -5,9 +5,9 @@ import WidgetContainer from '../constants/containers'
 import { useSortable } from '@dnd-kit/react/sortable'
 
 
-// FIXME: widget class is null
 function WidgetDnd({widgetId, canvas, widgetRef, droppableTags,onMousePress, onDrop, onDragStart, 
                         onDragEnd, onDragEnter, onDragOver, currentPos={x: 0, y: 0},
+                        isSortable=false, sortableIndex=0,
                             ...props}) {
 
     const dndRef = useRef(null)
@@ -42,7 +42,11 @@ function WidgetDnd({widgetId, canvas, widgetRef, droppableTags,onMousePress, onD
 	})
 
 
-    // const sortable = useSortable()
+    const {ref: sortableRef} = useSortable({
+        id: widgetId,
+        index: sortableIndex,
+        disabled: isSortable
+    })
  
     const manager = useDragDropManager()
 
@@ -88,6 +92,7 @@ function WidgetDnd({widgetId, canvas, widgetRef, droppableTags,onMousePress, onD
         widgetRef.current = node
 		dropRef(node)
 		dragRef(node)
+        sortableRef(node)
 	}
 
     const handleInitialPosOffset = (e) => {