@vc-shell/framework 1.0.341 → 1.1.0-alpha.10

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

@@ -0,0 +1,219 @@
+import { ref } from "vue";
+import type { IDashboardWidget, DashboardWidgetPosition } from "../types";
+
+/**
+ * Composables for detecting and handling collisions between widgets
+ *
+ * Provides functions for checking widget intersections and calculating
+ * new positions for displaced widgets
+ *
+ * @returns An object with functions for working with collisions
+ */
+export function useCollisionDetection() {
+  // Map of displaced widgets: widget id -> new position
+  const displacedWidgets = ref<Map<string, DashboardWidgetPosition>>(new Map());
+
+  /**
+   * Checks the intersection of two widgets
+   *
+   * @param widgetA The first widget
+   * @param posA The position of the first widget
+   * @param widgetB The second widget
+   * @param posB The position of the second widget
+   * @returns true if the widgets intersect
+   */
+  const intersect = (
+    widgetA: IDashboardWidget,
+    posA: DashboardWidgetPosition,
+    widgetB: IDashboardWidget,
+    posB: DashboardWidgetPosition,
+  ): boolean => {
+    // Early check by Y axis (if the difference is greater than the sum of heights, there is no intersection)
+    const verticalDistance = Math.abs(posA.y - posB.y);
+    if (verticalDistance > widgetA.size.height + widgetB.size.height) {
+      return false;
+    }
+
+    // Early check by X axis (if the difference is greater than the sum of widths, there is no intersection)
+    const horizontalDistance = Math.abs(posA.x - posB.x);
+    if (horizontalDistance > widgetA.size.width + widgetB.size.width) {
+      return false;
+    }
+
+    // Standard 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);
+  };
+
+  /**
+   * Updates the list of displaced widgets based on the current position of the dragged widget
+   *
+   * @param draggedWidget The dragged widget
+   * @param previewPosition The current position of the dragged widget
+   * @param widgets All widgets on the dashboard
+   * @param layout The current dashboard layout (widget id -> position map)
+   */
+  const updateDisplacedWidgets = (
+    draggedWidget: IDashboardWidget | null,
+    previewPosition: DashboardWidgetPosition | null,
+    widgets: IDashboardWidget[],
+    layout: Map<string, DashboardWidgetPosition>,
+  ) => {
+    if (!draggedWidget || !previewPosition) {
+      displacedWidgets.value.clear();
+      return;
+    }
+
+    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) {
+      if (widget.id === draggedWidget.id) continue;
+
+      const pos = layout.get(widget.id);
+      if (!pos) continue;
+
+      if (intersect(draggedWidget, previewPosition, widget, pos)) {
+        directCollisionWidgets.add(widget.id);
+      }
+    }
+
+    // If there are no direct collisions, skip additional calculations
+    if (directCollisionWidgets.size === 0) {
+      displacedWidgets.value = newDisplacements;
+      return;
+    }
+
+    // Sort widgets from top to bottom for more natural rearrangement
+    const sortedWidgets = [...widgets]
+      .filter((w) => w.id !== draggedWidget.id)
+      .sort((a, b) => {
+        const posA = layout.get(a.id);
+        const posB = layout.get(b.id);
+        if (!posA || !posB) return 0;
+        // Sort first by Y, 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 the dragged widget
+      let hasCollision = intersect(draggedWidget, previewPosition, widget, position);
+
+      // Check intersections with already displaced widgets, if there is no collision with the dragged widget
+      if (!hasCollision) {
+        for (const [id, pos] of newDisplacements) {
+          const w = widgets.find((w) => w.id === id);
+          if (w && intersect(widget, position, w, pos)) {
+            hasCollision = true;
+            break;
+          }
+        }
+      }
+
+      collisionCache.set(cacheKey, hasCollision);
+      return hasCollision;
+    };
+
+    // First process widgets with direct collisions
+    for (const widget of sortedWidgets) {
+      if (processedWidgets.has(widget.id)) continue;
+
+      const currentPos = layout.get(widget.id);
+      if (!currentPos) continue;
+
+      // First focus on widgets with direct collisions
+      if (!directCollisionWidgets.has(widget.id) && newDisplacements.size === 0) continue;
+
+      // Check collisions in the current position
+      const hasCollision = checkCollision(widget, currentPos);
+
+      if (hasCollision) {
+        // Find a new position below the dragged widget
+        const newY = Math.max(previewPosition.y + draggedWidget.size.height, currentPos.y + 1);
+        let finalY = newY;
+
+        // Find the nearest position without collisions
+        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 have displaced a widget with a direct collision, check if we have 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;
+  };
+
+  /**
+   * Clears the list of displaced widgets
+   */
+  const clearDisplacedWidgets = () => {
+    displacedWidgets.value.clear();
+  };
+
+  /**
+   * Checks if the widget is displaced
+   *
+   * @param widgetId The ID of the widget
+   * @returns true if the widget is displaced
+   */
+  const isWidgetDisplaced = (widgetId: string) => {
+    return displacedWidgets.value.has(widgetId);
+  };
+
+  /**
+   * Gets the new position for the displaced widget
+   *
+   * @param widgetId The ID of the widget
+   * @returns The new position or undefined if the widget is not displaced
+   */
+  const getDisplacedPosition = (widgetId: string) => {
+    return displacedWidgets.value.get(widgetId);
+  };
+
+  return {
+    displacedWidgets,
+    intersect,
+    updateDisplacedWidgets,
+    clearDisplacedWidgets,
+    isWidgetDisplaced,
+    getDisplacedPosition,
+  };
+}

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

@@ -0,0 +1,342 @@
+import { ref, computed, onUnmounted } from "vue";
+import type { IDashboardWidget, DashboardWidgetPosition } from "../types";
+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,
+) {
+  const dashboard = useDashboard();
+  const widgets = computed(() => dashboard.getWidgets());
+  const gridContainer = ref<HTMLElement | null>(null);
+
+  // Dragging state
+  const draggedWidget = ref<IDashboardWidget | null>(null);
+  const isDragging = ref(false);
+
+  // 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 {
+      cellWidth: rect.width / GRID_COLUMNS,
+      cellHeight: CELL_HEIGHT,
+    };
+  };
+
+  // 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 may be unavailable in requestAnimationFrame
+    const coords = getEventCoordinates(event);
+
+    // Use requestAnimationFrame for UI optimization
+    requestAnimationFrame(() => {
+      if (!gridContainer.value || !draggedWidget.value || !dragClone.value) return;
+
+      const rect = gridContainer.value.getBoundingClientRect();
+      const cellSize = calculateCellSize();
+
+      // 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,
+      };
+
+      updateDragClonePosition(deltaX, deltaY);
+
+      // Calculate the scroll offset of the container
+      const scrollOffset = {
+        left: gridContainer.value.scrollLeft,
+        top: gridContainer.value.scrollTop,
+      };
+
+      // 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,
+        };
+
+        updatePreviewPosition(newPosition);
+
+        // Recalculate displaced widgets when the position changes
+        updateDisplacedWidgets(draggedWidget.value, newPosition, widgets.value, new Map(dashboard.getLayout()));
+      }
+    });
+  };
+
+  // Mouse move event handler
+  const handleMouseMove = (event: MouseEvent) => {
+    if (!isDragging.value || !draggedWidget.value || !gridContainer.value || !dragClone.value) return;
+    updateDragPosition(event);
+  };
+
+  // Touch move event handler
+  const handleTouchMove = (event: TouchEvent) => {
+    if (!isDragging.value || !draggedWidget.value || !gridContainer.value || !dragClone.value) return;
+
+    // Prevent page scrolling during dragging
+    event.preventDefault();
+
+    updateDragPosition(event);
+  };
+
+  // Mouse up event handler
+  const handleMouseUp = () => {
+    finishDrag();
+  };
+
+  const handleTouchEnd = () => {
+    finishDrag();
+  };
+
+  // Common function for finishing the dragging
+  const finishDrag = () => {
+    if (!isDragging.value || !draggedWidget.value || !previewPosition.value) return;
+
+    // Get the necessary data
+    const draggedWidgetId = draggedWidget.value.id;
+    const finalPosition = previewPosition.value;
+
+    // When there is a clone, finish the dragging smoothly
+    if (dragClone.value) {
+      // Get the DOM element of the original widget
+      const originalWidget = document.querySelector(`.dashboard-widget[data-id="${draggedWidgetId}"]`) as HTMLElement;
+
+      if (originalWidget) {
+        const cellSize = calculateCellSize();
+        const widgetGap = 20; // Widget gap in pixels
+
+        // Get the current position of the clone (where the user released the mouse)
+        const cloneRect = dragClone.value.getBoundingClientRect();
+
+        // Get the page scroll
+        const scrollX = window.scrollX || window.pageXOffset;
+        const scrollY = window.scrollY || window.pageYOffset;
+
+        // 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 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 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, 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 the clone immediately, as the original is in its place
+        removeDragClone();
+
+        // Force reflow for applying styles
+        originalWidget.offsetHeight; // eslint-disable-line
+
+        // Update the position in the data store
+        updateWidgetPosition(draggedWidgetId, finalPosition);
+
+        // Update the positions of all displaced widgets
+        for (const [widgetId, position] of displacedWidgets.value.entries()) {
+          updateWidgetPosition(widgetId, 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 for correct style application
+      } else {
+        // If the original is not found, simply remove the clone and update the data
+        removeDragClone();
+
+        // Update the position in the data store
+        updateWidgetPosition(draggedWidgetId, finalPosition);
+
+        // Update the positions of all displaced widgets
+        for (const [widgetId, position] of displacedWidgets.value.entries()) {
+          updateWidgetPosition(widgetId, position);
+        }
+      }
+    } else {
+      // If there is no clone, simply update the data
+      updateWidgetPosition(draggedWidgetId, finalPosition);
+
+      // Update the positions of all displaced widgets
+      for (const [widgetId, position] of displacedWidgets.value.entries()) {
+        updateWidgetPosition(widgetId, position);
+      }
+    }
+
+    // Remove event handlers
+    document.removeEventListener("mousemove", handleMouseMove);
+    document.removeEventListener("mouseup", handleMouseUp);
+    document.removeEventListener("touchmove", handleTouchMove, { passive: false } as EventListenerOptions);
+    document.removeEventListener("touchend", handleTouchEnd);
+    document.removeEventListener("touchcancel", handleTouchEnd);
+
+    // Reset the state with a delay, so the animation has time to finish
+    setTimeout(() => {
+      isDragging.value = false;
+      draggedWidget.value = null;
+      resetPosition();
+    }, 50);
+  };
+
+  // Mouse/touch event handler with passive listeners
+  const handleMouseDown = (event: MouseEvent | TouchEvent, widget: IDashboardWidget, element: HTMLElement) => {
+    if (!gridContainer.value) return;
+
+    // Check the event type
+    if ("touches" in event) {
+      isTouchDevice.value = true;
+    }
+
+    // Use preventDefault only for mouse events, for touch events use passive: false
+    if (!isTouchDevice.value) {
+      event.preventDefault();
+    }
+    event.stopPropagation();
+
+    // Save the initial position for determining the dragging
+    saveInitialPosition(event);
+    let hasDragStarted = false;
+
+    // Find the parent widget element
+    const widgetElement = element.closest(".dashboard-widget") as HTMLElement;
+    if (!widgetElement) return;
+
+    const cellSize = calculateCellSize();
+
+    // Temporary handler for movement to determine the start of dragging
+    const tempMoveHandler = (moveEvent: MouseEvent | TouchEvent) => {
+      if (hasDragStarted) return;
+
+      const currentCoords = getEventCoordinates(moveEvent);
+
+      // Start dragging only if the mouse has moved more than 3 pixels
+      if (hasMovedBeyondThreshold(currentCoords, 3)) {
+        hasDragStarted = true;
+        isDragging.value = true;
+        draggedWidget.value = widget;
+
+        // Calculate the drag offset
+        calculateDragOffset(event, widgetElement, cellSize);
+
+        // Create a clone for dragging
+        createDragClone(element);
+
+        // Remove temporary handlers
+        document.removeEventListener("mousemove", tempMoveHandler);
+        document.removeEventListener("touchmove", tempMoveHandler);
+        document.removeEventListener("mouseup", tempUpHandler);
+        document.removeEventListener("touchend", tempUpHandler);
+
+        // Add the dragging handlers
+        if (isTouchDevice.value) {
+          document.addEventListener("touchmove", handleTouchMove, { passive: false } as EventListenerOptions);
+          document.addEventListener("touchend", handleTouchEnd);
+          document.addEventListener("touchcancel", handleTouchEnd);
+        } else {
+          document.addEventListener("mousemove", handleMouseMove, { passive: true });
+          document.addEventListener("mouseup", handleMouseUp);
+        }
+      }
+    };
+
+    // Temporary handler for releasing to cancel the determination of dragging
+    const tempUpHandler = () => {
+      if (!hasDragStarted) {
+        document.removeEventListener("mousemove", tempMoveHandler);
+        document.removeEventListener("touchmove", tempMoveHandler);
+        document.removeEventListener("mouseup", tempUpHandler);
+        document.removeEventListener("touchend", tempUpHandler);
+      }
+    };
+
+    // Add temporary handlers for determining the start of dragging
+    if (isTouchDevice.value) {
+      document.addEventListener("touchmove", tempMoveHandler, { passive: true });
+      document.addEventListener("touchend", tempUpHandler);
+    } else {
+      document.addEventListener("mousemove", tempMoveHandler, { passive: true });
+      document.addEventListener("mouseup", tempUpHandler);
+    }
+  };
+
+  const setGridContainer = (container: HTMLElement) => {
+    gridContainer.value = container;
+  };
+
+  // Clear event handlers when the component is unmounted
+  onUnmounted(() => {
+    finishDrag();
+  });
+
+  return {
+    draggedWidget,
+    previewPosition,
+    displacedWidgets,
+    isDragging,
+    handleMouseDown, // Now handles both mouse and touch events
+    setGridContainer,
+    isWidgetDisplaced,
+    getDisplacedPosition,
+  };
+}

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

@@ -0,0 +1,104 @@
+import { computed } from "vue";
+import type { IDashboardWidget, DashboardWidgetPosition } from "../types";
+import { useDashboard } from "../../../../core/composables/useDashboard";
+import { useLayoutPersistence } from "./useLayoutPersistence";
+import { useGridSystem } from "./useGridSystem";
+import { useWidgetLayout } from "./useWidgetLayout";
+
+// LocalStorage key for dashboard layout
+const DASHBOARD_LAYOUT_KEY = "vc-dashboard-layout";
+
+/**
+ * Main composable for managing the dashboard
+ *
+ * Combines functionality for working with the grid, widget placement, and layout persistence
+ *
+ * @returns An object with functions for working with the dashboard
+ */
+export function useDashboardGrid() {
+  // Dashboard service
+  const dashboard = useDashboard();
+
+  // Reactive properties of widgets and layout
+  const widgets = computed(() => dashboard.getWidgets());
+  const layout = computed(() => dashboard.getLayout());
+
+  // Initialize subsystems
+  const grid = useGridSystem();
+
+  const widgetLayout = useWidgetLayout(dashboard.updateWidgetPosition);
+
+  // Hook for working with localStorage
+  const persistence = useLayoutPersistence(DASHBOARD_LAYOUT_KEY, dashboard.updateWidgetPosition);
+
+  /**
+   * Gets the current number of rows in the grid
+   */
+  const getGridRows = (): number => {
+    return grid.updateGridRows(widgets.value, layout.value);
+  };
+
+  /**
+   * Saves the current layout to localStorage
+   */
+  const saveLayoutToLocalStorage = (): void => {
+    persistence.saveLayout(layout.value);
+  };
+
+  /**
+   * Loads the layout from localStorage
+   *
+   * @returns true if the layout was successfully loaded
+   */
+  const loadLayoutFromLocalStorage = (): boolean => {
+    return persistence.loadLayout(widgets.value);
+  };
+
+  /**
+   * Arranges widgets in rows
+   *
+   * @param widgetsToArrange An array of widgets to arrange
+   */
+  const arrangeWidgetsInRows = (widgetsToArrange: IDashboardWidget[]): void => {
+    widgetLayout.arrangeWidgetsInRows(widgetsToArrange, widgets.value, layout.value);
+  };
+
+  /**
+   * Initializes widgets with their built-in positions
+   *
+   * @returns true if at least one widget had a built-in position
+   */
+  const initializeWithBuiltInPositions = (): boolean => {
+    return widgetLayout.initializeWithBuiltInPositions(widgets.value, layout.value);
+  };
+
+  /**
+   * Initializes the initial positions of widgets
+   */
+  const initializeLayout = (): void => {
+    // Priority 1: Loading from localStorage
+    const layoutLoadedFromStorage = loadLayoutFromLocalStorage();
+
+    // Priority 2: Using built-in widget positions
+    if (!layoutLoadedFromStorage) {
+      const usedBuiltInPositions = initializeWithBuiltInPositions();
+
+      // Priority 3: Standard initialization
+      if (!usedBuiltInPositions) {
+        arrangeWidgetsInRows(widgets.value);
+      }
+    }
+  };
+
+  return {
+    widgets,
+    layout,
+    GRID_COLUMNS: grid.GRID_COLUMNS,
+    getGridRows,
+    saveLayoutToLocalStorage,
+    loadLayoutFromLocalStorage,
+    arrangeWidgetsInRows,
+    initializeWithBuiltInPositions,
+    initializeLayout,
+  };
+}