@vc-shell/framework 1.1.0-alpha.4 → 1.1.0-alpha.6

package/shared/components/draggable-dashboard/composables/useDashboardDragAndDrop.ts

@@ -1,12 +1,25 @@
 import { ref, computed, onUnmounted } from "vue";
 import type { IDashboardWidget, DashboardWidgetPosition } from "../types";
-import { GRID_COLUMNS } from "./useDashboardGrid";
+import { GRID_COLUMNS } from "./useGridSystem";
 import { useDashboard } from "../../../../core/composables/useDashboard";
+import { useDragClone } from "./useDragClone";
+import { useEventCoordinates } from "./useEventCoordinates";
+import { useCollisionDetection } from "./useCollisionDetection";
+import { useGridPosition, type CellSize } from "./useGridPosition";
 
 // Cell height constant, corresponds to --dashboard-cell-height CSS variable
 // Value of 80px is defined in DraggableDashboard.vue
 const CELL_HEIGHT = 80;
 
+/**
+ * Composables for managing the dragging of widgets on the dashboard
+ *
+ * Provides functions for handling drag events, updating widget positions, and handling collisions
+ *
+ * @param updateWidgetPosition Function to update the position of a widget in the store
+ * @param getGridRows Function to get the number of rows in the grid
+ * @returns An object with functions and state for managing the dragging
+ */
 export function useDashboardDragAndDrop(
   updateWidgetPosition: (widgetId: string, position: DashboardWidgetPosition) => void,
   getGridRows?: () => number,
@@ -15,20 +28,27 @@ export function useDashboardDragAndDrop(
   const widgets = computed(() => dashboard.getWidgets());
   const gridContainer = ref<HTMLElement | null>(null);
 
-  // Drag state
+  // Dragging state
   const draggedWidget = ref<IDashboardWidget | null>(null);
-  const previewPosition = ref<DashboardWidgetPosition | null>(null);
   const isDragging = ref(false);
-  const dragOffset = ref({ x: 0, y: 0 });
-  const displacedWidgets = ref<Map<string, DashboardWidgetPosition>>(new Map());
 
-  // Drag clone
-  const dragClone = ref<HTMLElement | null>(null);
-  const initialMousePosition = ref({ x: 0, y: 0 });
-  const isTouchDevice = ref(false);
-
-  // Get cell size
-  const calculateCellSize = () => {
+  // Initialize helper composables
+  const { dragClone, createDragClone, updateDragClonePosition, removeDragClone } = useDragClone();
+  const { initialPosition, isTouchDevice, getEventCoordinates, saveInitialPosition, hasMovedBeyondThreshold } =
+    useEventCoordinates();
+  const { displacedWidgets, updateDisplacedWidgets, isWidgetDisplaced, getDisplacedPosition } = useCollisionDetection();
+  const {
+    previewPosition,
+    dragOffset,
+    calculateDragOffset,
+    mouseToGridCoordinates,
+    constrainToGrid,
+    updatePreviewPosition,
+    resetPosition,
+  } = useGridPosition(GRID_COLUMNS, getGridRows);
+
+  // Getting the size of the cell
+  const calculateCellSize = (): CellSize => {
     if (!gridContainer.value) return { cellWidth: 0, cellHeight: CELL_HEIGHT };
     const rect = gridContainer.value.getBoundingClientRect();
     return {
@@ -37,292 +57,81 @@ export function useDashboardDragAndDrop(
     };
   };
 
-  // Create widget clone for dragging
-  const createDragClone = (element: HTMLElement) => {
-    // Find parent widget element
-    const widgetElement = element.closest(".dashboard-widget") as HTMLElement;
-    if (!widgetElement) return null;
-
-    const clone = widgetElement.cloneNode(true) as HTMLElement;
-    const rect = widgetElement.getBoundingClientRect();
-
-    // Учитываем прокрутку страницы
-    const scrollX = window.scrollX || window.pageXOffset;
-    const scrollY = window.scrollY || window.pageYOffset;
-
-    // Копируем все вычисленные стили с оригинала
-    const computedStyle = window.getComputedStyle(widgetElement);
-
-    clone.style.position = "fixed";
-    clone.style.width = `${rect.width}px`;
-    clone.style.height = `${rect.height}px`;
-    clone.style.left = `${rect.left + scrollX}px`;
-    clone.style.top = `${rect.top + scrollY}px`;
-    clone.style.zIndex = "9999";
-    clone.style.pointerEvents = "none";
-    clone.style.opacity = "0.95";
-    clone.style.transform = "scale(1.02)";
-    clone.style.transition = "transform 0.1s ease, opacity 0.2s ease";
-    clone.style.boxShadow = "0 10px 25px rgba(0,0,0,0.15)";
-    clone.style.willChange = "transform";
-
-    // Копируем важные стили с оригинала
-    clone.style.backgroundColor = computedStyle.backgroundColor;
-    clone.style.borderRadius = computedStyle.borderRadius;
-
-    // Добавляем класс для стилизации клона
-    clone.classList.add("dashboard-widget-clone");
-
-    // Анимация появления
-    requestAnimationFrame(() => {
-      clone.style.transform = "scale(1.02)";
-      clone.style.opacity = "0.92";
-    });
-
-    document.body.appendChild(clone);
-    return clone;
-  };
-
-  // Optimized intersection check function
-  const intersect = (
-    widgetA: IDashboardWidget,
-    posA: DashboardWidgetPosition,
-    widgetB: IDashboardWidget,
-    posB: DashboardWidgetPosition,
-  ) => {
-    // Early Y-axis check (if difference is greater than sum of heights, no intersection)
-    const verticalDistance = Math.abs(posA.y - posB.y);
-    if (verticalDistance > widgetA.size.height + widgetB.size.height) {
-      return false;
-    }
-
-    // Early X-axis check (if difference is greater than sum of widths, no intersection)
-    const horizontalDistance = Math.abs(posA.x - posB.x);
-    if (horizontalDistance > widgetA.size.width + widgetB.size.width) {
-      return false;
-    }
-
-    // Standard rectangle intersection check
-    const aLeft = posA.x;
-    const aRight = posA.x + widgetA.size.width;
-    const aTop = posA.y;
-    const aBottom = posA.y + widgetA.size.height;
-
-    const bLeft = posB.x;
-    const bRight = posB.x + widgetB.size.width;
-    const bTop = posB.y;
-    const bBottom = posB.y + widgetB.size.height;
-
-    return !(aRight <= bLeft || aLeft >= bRight || aBottom <= bTop || aTop >= bBottom);
-  };
-
-  // Optimized function for updating displaced widgets
-  const updateDisplacedWidgets = () => {
-    if (!draggedWidget.value || !previewPosition.value || !isDragging.value) {
-      displacedWidgets.value.clear();
-      return;
-    }
-
-    const layout = new Map(dashboard.getLayout());
-    const newDisplacements = new Map<string, DashboardWidgetPosition>();
-    const processedWidgets = new Set<string>();
-
-    // Cache for initial collision checks
-    const directCollisionWidgets = new Set<string>();
-
-    // Check collisions with other widgets
-    for (const widget of widgets.value) {
-      if (widget.id === draggedWidget.value.id) continue;
-
-      const pos = layout.get(widget.id);
-      if (!pos) continue;
-
-      if (intersect(draggedWidget.value, previewPosition.value, widget, pos)) {
-        directCollisionWidgets.add(widget.id);
-      }
-    }
-
-    // If no direct collisions, skip additional displacement calculations
-    if (directCollisionWidgets.size === 0) {
-      displacedWidgets.value = newDisplacements;
-      return;
-    }
-
-    // Sort widgets top to bottom for more natural rearrangement
-    const sortedWidgets = [...widgets.value]
-      .filter((w) => w.id !== draggedWidget.value?.id)
-      .sort((a, b) => {
-        const posA = layout.get(a.id);
-        const posB = layout.get(b.id);
-        if (!posA || !posB) return 0;
-        // Sort by Y first, then by X for more stable results
-        return posA.y === posB.y ? posA.x - posB.x : posA.y - posB.y;
-      });
-
-    // Function for checking collisions with caching
-    const collisionCache = new Map<string, boolean>();
-
-    const checkCollision = (widget: IDashboardWidget, position: DashboardWidgetPosition) => {
-      const cacheKey = `${widget.id}_${position.x}_${position.y}`;
-
-      if (collisionCache.has(cacheKey)) {
-        return collisionCache.get(cacheKey);
-      }
-
-      // Check intersection with dragged widget
-      let hasCollision = intersect(draggedWidget.value!, previewPosition.value!, widget, position);
-
-      // Check intersections with already displaced widgets if no collision with dragged widget
-      if (!hasCollision) {
-        for (const [id, pos] of newDisplacements) {
-          const w = widgets.value.find((w) => w.id === id);
-          if (w && intersect(widget, position, w, pos)) {
-            hasCollision = true;
-            break;
-          }
-        }
-      }
-
-      collisionCache.set(cacheKey, hasCollision);
-      return hasCollision;
-    };
-
-    // Process widgets with direct collisions first
-    for (const widget of sortedWidgets) {
-      if (processedWidgets.has(widget.id)) continue;
-
-      const currentPos = layout.get(widget.id);
-      if (!currentPos) continue;
-
-      // Focus on widgets with direct collisions first
-      if (!directCollisionWidgets.has(widget.id) && newDisplacements.size === 0) continue;
-
-      // Check collisions at current position
-      const hasCollision = checkCollision(widget, currentPos);
-
-      if (hasCollision) {
-        // Find new position below dragged widget
-        const newY = Math.max(previewPosition.value.y + draggedWidget.value.size.height, currentPos.y + 1);
-        let finalY = newY;
-
-        // Find nearest position without collisions, optimized
-        const maxIterations = 50; // Protection against infinite loop
-        let iterations = 0;
-
-        while (checkCollision(widget, { x: currentPos.x, y: finalY }) && iterations < maxIterations) {
-          finalY++;
-          iterations++;
-        }
-
-        newDisplacements.set(widget.id, { x: currentPos.x, y: finalY });
-        processedWidgets.add(widget.id);
-
-        // If we displaced a widget with direct collision, check if we created new collisions
-        for (const w of sortedWidgets) {
-          if (w.id !== widget.id && !processedWidgets.has(w.id)) {
-            const pos = layout.get(w.id);
-            if (pos && intersect(widget, { x: currentPos.x, y: finalY }, w, pos)) {
-              directCollisionWidgets.add(w.id);
-            }
-          }
-        }
-      }
-    }
-
-    displacedWidgets.value = newDisplacements;
-  };
-
-  // Get event coordinates for either mouse or touch events
-  const getEventCoordinates = (event: MouseEvent | TouchEvent) => {
-    if ("touches" in event) {
-      // Touch event
-      return {
-        clientX: event.touches[0].clientX,
-        clientY: event.touches[0].clientY,
-      };
-    }
-    // Mouse event
-    return {
-      clientX: (event as MouseEvent).clientX,
-      clientY: (event as MouseEvent).clientY,
-    };
-  };
-
-  // Common logic for mouse and touch move events
+  // Common logic for updating the position during dragging
   const updateDragPosition = (event: MouseEvent | TouchEvent) => {
     if (!gridContainer.value || !draggedWidget.value || !dragClone.value) return;
 
-    // Save event data as it might be unavailable in requestAnimationFrame
+    // Save event data, as it may be unavailable in requestAnimationFrame
     const coords = getEventCoordinates(event);
 
-    // Use requestAnimationFrame for UI update optimization
+    // Use requestAnimationFrame for UI optimization
     requestAnimationFrame(() => {
       if (!gridContainer.value || !draggedWidget.value || !dragClone.value) return;
 
       const rect = gridContainer.value.getBoundingClientRect();
-      const { cellWidth, cellHeight } = calculateCellSize();
-
-      // Update clone position relative to initial mouse position
-      const deltaX = coords.clientX - initialMousePosition.value.x;
-      const deltaY = coords.clientY - initialMousePosition.value.y;
-
-      dragClone.value.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
-
-      // Calculate container scroll
-      const gridScrollLeft = gridContainer.value.scrollLeft;
-      const gridScrollTop = gridContainer.value.scrollTop;
+      const cellSize = calculateCellSize();
 
-      // Calculate container offset in window
-      const gridRectLeft = rect.left;
-      const gridRectTop = rect.top;
-
-      // Calculate mouse position relative to grid with scroll
-      const mouseX = coords.clientX - gridRectLeft + gridScrollLeft;
-      const mouseY = coords.clientY - gridRectTop + gridScrollTop;
-
-      // Convert mouse coordinates to grid coordinates with drag offset
-      let gridX = Math.round(mouseX / cellWidth - dragOffset.value.x);
-      let gridY = Math.round(mouseY / cellHeight - dragOffset.value.y);
+      // Update the position of the clone relative to the initial mouse position
+      const { deltaX, deltaY } = {
+        deltaX: coords.clientX - initialPosition.value.clientX,
+        deltaY: coords.clientY - initialPosition.value.clientY,
+      };
 
-      // Limit boundaries (minimum 0)
-      gridX = Math.max(0, gridX);
-      gridY = Math.max(0, gridY);
+      updateDragClonePosition(deltaX, deltaY);
 
-      // Right and bottom boundaries depend on widget size and grid dimensions
-      const gridWidth = GRID_COLUMNS;
-      const gridHeight = getGridRows?.() || 100; // Use large value if getGridRows is not defined
+      // Calculate the scroll offset of the container
+      const scrollOffset = {
+        left: gridContainer.value.scrollLeft,
+        top: gridContainer.value.scrollTop,
+      };
 
-      // Limit position to keep widget within grid boundaries
-      gridX = Math.min(gridX, gridWidth - draggedWidget.value.size.width);
-      gridY = Math.min(gridY, gridHeight - draggedWidget.value.size.height);
+      // Convert mouse coordinates to grid coordinates
+      const { gridX, gridY } = mouseToGridCoordinates(coords, rect, cellSize, scrollOffset);
+
+      // Constrain the position to the grid boundaries
+      const constrainedPosition = constrainToGrid(
+        gridX,
+        gridY,
+        draggedWidget.value.size.width,
+        draggedWidget.value.size.height,
+      );
+
+      // Update the preview position only if it has changed
+      if (
+        !previewPosition.value ||
+        previewPosition.value.x !== constrainedPosition.gridX ||
+        previewPosition.value.y !== constrainedPosition.gridY
+      ) {
+        const newPosition = {
+          x: constrainedPosition.gridX,
+          y: constrainedPosition.gridY,
+        };
 
-      // Update preview position only if it changed
-      if (!previewPosition.value || previewPosition.value.x !== gridX || previewPosition.value.y !== gridY) {
-        previewPosition.value = { x: gridX, y: gridY };
+        updatePreviewPosition(newPosition);
 
-        // Recalculate displaced widgets on position change
-        updateDisplacedWidgets();
+        // Recalculate displaced widgets when the position changes
+        updateDisplacedWidgets(draggedWidget.value, newPosition, widgets.value, new Map(dashboard.getLayout()));
       }
     });
   };
 
-  // Enhanced mouse event handler
+  // Mouse move event handler
   const handleMouseMove = (event: MouseEvent) => {
     if (!isDragging.value || !draggedWidget.value || !gridContainer.value || !dragClone.value) return;
     updateDragPosition(event);
   };
 
-  // Enhanced touch event handler
+  // Touch move event handler
   const handleTouchMove = (event: TouchEvent) => {
     if (!isDragging.value || !draggedWidget.value || !gridContainer.value || !dragClone.value) return;
 
-    // Prevent page scrolling during drag
+    // Prevent page scrolling during dragging
     event.preventDefault();
 
     updateDragPosition(event);
   };
 
-  // Enhanced drag end handlers
+  // Mouse up event handler
   const handleMouseUp = () => {
     finishDrag();
   };
@@ -331,91 +140,85 @@ export function useDashboardDragAndDrop(
     finishDrag();
   };
 
-  // Common drag finish function
+  // Common function for finishing the dragging
   const finishDrag = () => {
     if (!isDragging.value || !draggedWidget.value || !previewPosition.value) return;
 
-    // Get necessary data
+    // Get the necessary data
     const draggedWidgetId = draggedWidget.value.id;
     const finalPosition = previewPosition.value;
 
-    // When there's a clone, finish dragging smoothly
+    // When there is a clone, finish the dragging smoothly
     if (dragClone.value) {
-      // Get DOM element of original widget
+      // Get the DOM element of the original widget
       const originalWidget = document.querySelector(`.dashboard-widget[data-id="${draggedWidgetId}"]`) as HTMLElement;
 
       if (originalWidget) {
-        const { cellWidth, cellHeight } = calculateCellSize();
+        const cellSize = calculateCellSize();
         const widgetGap = 20; // Widget gap in pixels
 
-        // Get current clone position (where user released mouse)
+        // Get the current position of the clone (where the user released the mouse)
         const cloneRect = dragClone.value.getBoundingClientRect();
 
-        // Get page scroll
+        // Get the page scroll
         const scrollX = window.scrollX || window.pageXOffset;
         const scrollY = window.scrollY || window.pageYOffset;
 
-        // Get grid container position with scroll
+        // Get the position of the grid container with the scroll
         const gridRect = gridContainer.value!.getBoundingClientRect();
         const gridScrollLeft = gridContainer.value!.scrollLeft;
         const gridScrollTop = gridContainer.value!.scrollTop;
 
-        // Calculate relative clone position inside container with all scrolls
+        // Calculate the relative position of the clone inside the container with all scrolls
         const relX = cloneRect.left + scrollX - (gridRect.left + scrollX) + gridScrollLeft;
         const relY = cloneRect.top + scrollY - (gridRect.top + scrollY) + gridScrollTop;
 
-        // Calculate final coordinates where widget should move
-        const finalX = finalPosition.x * cellWidth + widgetGap / 2;
-        const finalY = finalPosition.y * cellHeight + widgetGap / 2;
+        // Calculate the final coordinates, where the widget should be moved
+        const finalX = finalPosition.x * cellSize.cellWidth + widgetGap / 2;
+        const finalY = finalPosition.y * cellSize.cellHeight + widgetGap / 2;
 
-        // First place original widget exactly at clone's position
+        // First, move the original widget exactly to the clone position
         originalWidget.style.transition = "none";
         originalWidget.style.transform = `translate(${relX}px, ${relY}px)`;
         originalWidget.style.opacity = "1";
         originalWidget.style.zIndex = "1000";
 
-        // Remove clone immediately since original is in its place
-        if (dragClone.value.parentNode) {
-          document.body.removeChild(dragClone.value);
-        }
-        dragClone.value = null;
+        // Remove the clone immediately, as the original is in its place
+        removeDragClone();
 
-        // Force reflow to apply styles
+        // Force reflow for applying styles
         originalWidget.offsetHeight; // eslint-disable-line
 
-        // Update position in data store
+        // Update the position in the data store
         updateWidgetPosition(draggedWidgetId, finalPosition);
 
-        // Update positions of all displaced widgets
+        // Update the positions of all displaced widgets
         for (const [widgetId, position] of displacedWidgets.value.entries()) {
           updateWidgetPosition(widgetId, position);
         }
 
-        // Now smoothly animate widget to its final position
+        // Now smoothly animate the widget to its final position
         setTimeout(() => {
           originalWidget.style.transition = `transform var(--dashboard-transition-duration) var(--dashboard-transition-timing)`;
           originalWidget.style.transform = `translate(${finalX}px, ${finalY}px)`;
-        }, 20); // Small delay to ensure style changes apply correctly
+        }, 20); // Small delay for correct style application
       } else {
-        // If original not found, just remove clone and update data
-        if (dragClone.value.parentNode) {
-          document.body.removeChild(dragClone.value);
-        }
-        dragClone.value = null;
+        // If the original is not found, simply remove the clone and update the data
+        removeDragClone();
 
-        // Update position in store
+        // Update the position in the data store
         updateWidgetPosition(draggedWidgetId, finalPosition);
 
-        // Update positions of all displaced widgets
+        // Update the positions of all displaced widgets
         for (const [widgetId, position] of displacedWidgets.value.entries()) {
           updateWidgetPosition(widgetId, position);
         }
       }
     } else {
-      // If no clone, just update data
+      // If there is no clone, simply update the data
       updateWidgetPosition(draggedWidgetId, finalPosition);
 
-      // Update positions of all displaced widgets
+      // Update the positions of all displaced widgets
       for (const [widgetId, position] of displacedWidgets.value.entries()) {
         updateWidgetPosition(widgetId, position);
       }
@@ -428,66 +231,56 @@ export function useDashboardDragAndDrop(
     document.removeEventListener("touchend", handleTouchEnd);
     document.removeEventListener("touchcancel", handleTouchEnd);
 
-    // Reset state with delay to allow animation to complete
+    // Reset the state with a delay, so the animation has time to finish
     setTimeout(() => {
       isDragging.value = false;
       draggedWidget.value = null;
-      previewPosition.value = null;
-      displacedWidgets.value.clear();
-      dragOffset.value = { x: 0, y: 0 };
+      resetPosition();
     }, 50);
   };
 
-  // Enhanced mousedown handler with passive listeners
+  // Mouse/touch event handler with passive listeners
   const handleMouseDown = (event: MouseEvent | TouchEvent, widget: IDashboardWidget, element: HTMLElement) => {
     if (!gridContainer.value) return;
 
-    // Check event type
-    isTouchDevice.value = "touches" in event;
+    // Check the event type
+    if ("touches" in event) {
+      isTouchDevice.value = true;
+    }
 
-    // Use preventDefault only for mouse events, use passive: false for touch
+    // Use preventDefault only for mouse events, for touch events use passive: false
     if (!isTouchDevice.value) {
       event.preventDefault();
     }
     event.stopPropagation();
 
-    // Store initial position for drag detection
-    const initialEvent = getEventCoordinates(event);
+    // Save the initial position for determining the dragging
+    saveInitialPosition(event);
     let hasDragStarted = false;
 
-    // Find parent widget element
+    // Find the parent widget element
     const widgetElement = element.closest(".dashboard-widget") as HTMLElement;
     if (!widgetElement) return;
 
-    const rect = widgetElement.getBoundingClientRect();
-    const { cellWidth, cellHeight } = calculateCellSize();
+    const cellSize = calculateCellSize();
 
-    // Temporary move handler to detect actual drag start
+    // Temporary handler for movement to determine the start of dragging
     const tempMoveHandler = (moveEvent: MouseEvent | TouchEvent) => {
       if (hasDragStarted) return;
 
       const currentCoords = getEventCoordinates(moveEvent);
-      const deltaX = Math.abs(currentCoords.clientX - initialEvent.clientX);
-      const deltaY = Math.abs(currentCoords.clientY - initialEvent.clientY);
 
-      // Start drag only if mouse moved more than 3 pixels
-      if (deltaX > 3 || deltaY > 3) {
+      // Start dragging only if the mouse has moved more than 3 pixels
+      if (hasMovedBeyondThreshold(currentCoords, 3)) {
         hasDragStarted = true;
         isDragging.value = true;
         draggedWidget.value = widget;
 
-        // Save exact coordinate offset without rounding
-        dragOffset.value = {
-          x: (initialEvent.clientX - rect.left) / cellWidth,
-          y: (initialEvent.clientY - rect.top) / cellHeight,
-        };
-
-        initialMousePosition.value = {
-          x: initialEvent.clientX,
-          y: initialEvent.clientY,
-        };
+        // Calculate the drag offset
+        calculateDragOffset(event, widgetElement, cellSize);
 
-        dragClone.value = createDragClone(element);
+        // Create a clone for dragging
+        createDragClone(element);
 
         // Remove temporary handlers
         document.removeEventListener("mousemove", tempMoveHandler);
@@ -495,7 +288,7 @@ export function useDashboardDragAndDrop(
         document.removeEventListener("mouseup", tempUpHandler);
         document.removeEventListener("touchend", tempUpHandler);
 
-        // Add actual drag handlers
+        // Add the dragging handlers
         if (isTouchDevice.value) {
           document.addEventListener("touchmove", handleTouchMove, { passive: false } as EventListenerOptions);
           document.addEventListener("touchend", handleTouchEnd);
@@ -507,7 +300,7 @@ export function useDashboardDragAndDrop(
       }
     };
 
-    // Temporary up handler to cancel drag detection
+    // Temporary handler for releasing to cancel the determination of dragging
     const tempUpHandler = () => {
       if (!hasDragStarted) {
         document.removeEventListener("mousemove", tempMoveHandler);
@@ -517,7 +310,7 @@ export function useDashboardDragAndDrop(
       }
     };
 
-    // Add temporary handlers to detect drag start
+    // Add temporary handlers for determining the start of dragging
     if (isTouchDevice.value) {
       document.addEventListener("touchmove", tempMoveHandler, { passive: true });
       document.addEventListener("touchend", tempUpHandler);
@@ -531,7 +324,7 @@ export function useDashboardDragAndDrop(
     gridContainer.value = container;
   };
 
-  // Clean up event handlers when the component is unmounted
+  // Clear event handlers when the component is unmounted
   onUnmounted(() => {
     finishDrag();
   });
@@ -543,5 +336,7 @@ export function useDashboardDragAndDrop(
     isDragging,
     handleMouseDown, // Now handles both mouse and touch events
     setGridContainer,
+    isWidgetDisplaced,
+    getDisplacedPosition,
   };
 }