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

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

@@ -1,250 +1,104 @@
-import { computed, ref, watch } from "vue";
-import type { IDashboardWidget, DashboardWidgetPosition, DashboardGridConfig } from "../types";
+import { computed } from "vue";
+import type { IDashboardWidget, DashboardWidgetPosition } from "../types";
 import { useDashboard } from "../../../../core/composables/useDashboard";
-
-// Constants for grid
-export const GRID_COLUMNS = 12;
-// Initial rows, but now it's the minimum value
-export const MIN_GRID_ROWS = 12;
-// Increase height buffer for "infinite" scroll
-const ROWS_BUFFER = 10;
-// Dynamically calculated number of rows
-const dynamicRows = ref(MIN_GRID_ROWS);
-
-// Constants for position search optimization
-const SEARCH_DIRECTIONS = [
-  { dx: 0, dy: 0 }, // Current position
-  { dx: 0, dy: 1 }, // Down
-  { dx: 1, dy: 0 }, // Right
-  { dx: 0, dy: -1 }, // Up
-  { dx: -1, dy: 0 }, // Left
-  { dx: 1, dy: 1 }, // Right-down
-  { dx: -1, dy: 1 }, // Left-down
-  { dx: 1, dy: -1 }, // Right-up
-  { dx: -1, dy: -1 }, // Left-up
-];
-
+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());
 
-  // Calculate current maximum number of rows based on existing widgets
-  const currentRows = computed(() => {
-    if (widgets.value.length === 0) return MIN_GRID_ROWS;
+  // Initialize subsystems
+  const grid = useGridSystem();
 
-    const maxY = Math.max(
-      ...Array.from(layout.value.values()).map((pos: DashboardWidgetPosition, index) => {
-        const widget = widgets.value.find((w) => w.id === Array.from(layout.value.keys())[index]);
-        return widget ? pos.y + widget.size.height : pos.y + 1;
-      }),
-      0,
-    );
+  const widgetLayout = useWidgetLayout(dashboard.updateWidgetPosition);
 
-    // Update dynamic number of rows with large buffer
-    dynamicRows.value = Math.max(maxY + ROWS_BUFFER, MIN_GRID_ROWS);
-    return dynamicRows.value;
-  });
-
-  // Get current number of rows
-  const getGridRows = () => currentRows.value;
-
-  // Improved collision detection function
-  const hasCollision = (
-    widget: IDashboardWidget,
-    position: DashboardWidgetPosition,
-    excludeWidgetId?: string,
-  ): boolean => {
-    // Check only bottom grid boundary
-    if (position.x < 0 || position.x + widget.size.width > GRID_COLUMNS || position.y < 0) {
-      return true;
-    }
-
-    // Create occupied cells map for optimization
-    const occupiedCells = new Set<string>();
-
-    // Fill occupied cells map
-    widgets.value.forEach((other) => {
-      if (other.id === widget.id || (excludeWidgetId && other.id === excludeWidgetId)) {
-        return;
-      }
-
-      const otherPos = layout.value.get(other.id);
-      if (!otherPos) return;
-
-      for (let x = otherPos.x; x < otherPos.x + other.size.width; x++) {
-        for (let y = otherPos.y; y < otherPos.y + other.size.height; y++) {
-          occupiedCells.add(`${x},${y}`);
-        }
-      }
-    });
+  // Hook for working with localStorage
+  const persistence = useLayoutPersistence(DASHBOARD_LAYOUT_KEY, dashboard.updateWidgetPosition);
 
-    // Check collisions for each widget cell
-    for (let x = position.x; x < position.x + widget.size.width; x++) {
-      for (let y = position.y; y < position.y + widget.size.height; y++) {
-        if (occupiedCells.has(`${x},${y}`)) {
-          return true;
-        }
-      }
-    }
-
-    return false;
+  /**
+   * Gets the current number of rows in the grid
+   */
+  const getGridRows = (): number => {
+    return grid.updateGridRows(widgets.value, layout.value);
   };
 
-  // Improved free position search function
-  const findFreePosition = (widget: IDashboardWidget): DashboardWidgetPosition => {
-    const currentPos = layout.value.get(widget.id);
-
-    // If current position is free, use it
-    if (currentPos && !hasCollision(widget, currentPos, widget.id)) {
-      return currentPos;
-    }
-
-    // Start search from top-left corner or current position
-    const startX = currentPos?.x || 0;
-    const startY = currentPos?.y || 0;
-
-    // Spiral search for free position
-    let layer = 0;
-    const maxLayers = Math.max(GRID_COLUMNS, currentRows.value);
-
-    while (layer < maxLayers) {
-      // Check all directions in current layer
-      for (const { dx, dy } of SEARCH_DIRECTIONS) {
-        const x = startX + dx * layer;
-        const y = startY + dy * layer;
-
-        const position = { x, y };
-
-        // Check position
-        if (!hasCollision(widget, position, widget.id)) {
-          return position;
-        }
-      }
-
-      layer++;
-    }
+  /**
+   * Saves the current layout to localStorage
+   */
+  const saveLayoutToLocalStorage = (): void => {
+    persistence.saveLayout(layout.value);
+  };
 
-    // If no position found, add to the end
-    return {
-      x: 0,
-      y: currentRows.value,
-    };
+  /**
+   * Loads the layout from localStorage
+   *
+   * @returns true if the layout was successfully loaded
+   */
+  const loadLayoutFromLocalStorage = (): boolean => {
+    return persistence.loadLayout(widgets.value);
   };
 
-  // Arrange widgets in rows, minimizing empty spaces
+  /**
+   * Arranges widgets in rows
+   *
+   * @param widgetsToArrange An array of widgets to arrange
+   */
   const arrangeWidgetsInRows = (widgetsToArrange: IDashboardWidget[]): void => {
-    if (widgetsToArrange.length === 0) return;
-
-    const sortedWidgets = [...widgetsToArrange].sort((a, b) => {
-      // Sort by size (largest first)
-      const aSize = a.size.width * a.size.height;
-      const bSize = b.size.width * b.size.height;
-      return bSize - aSize;
-    });
-
-    // Current position for placement
-    let currentX = 0;
-    let currentY = 0;
-    let rowHeight = 0;
-
-    sortedWidgets.forEach((widget) => {
-      // Check if widget fits in current row
-      if (currentX + widget.size.width > GRID_COLUMNS) {
-        // If it doesn't fit, move to the next row
-        currentX = 0;
-        currentY += rowHeight;
-        rowHeight = 0;
-      }
-
-      // Place widget on current position
-      const position = { x: currentX, y: currentY };
-      dashboard.updateWidgetPosition(widget.id, position);
-
-      // Update current position
-      currentX += widget.size.width;
-
-      // Update maximum height for current row
-      rowHeight = Math.max(rowHeight, widget.size.height);
-    });
+    widgetLayout.arrangeWidgetsInRows(widgetsToArrange, widgets.value, layout.value);
   };
 
-  // Initialize initial widget positions
-  const initializeLayout = () => {
-    // Check if layout rebuild is needed
-
-    // Check if not all widgets have positioned yet
-    if (widgets.value.length !== layout.value.size) {
-      arrangeWidgetsInRows(widgets.value);
-      return;
-    }
-
-    // Check if all widgets have a position
-    const hasUnpositionedWidgets = widgets.value.some((widget: IDashboardWidget) => !layout.value.has(widget.id));
-
-    // If there are widgets without a position, then rearrange
-    if (hasUnpositionedWidgets) {
-      arrangeWidgetsInRows(widgets.value);
-      return;
-    }
-
-    // Check for collisions
-    const hasCollisions = widgets.value.some((widget: IDashboardWidget) => {
-      const pos = layout.value.get(widget.id);
-      return pos && hasCollision(widget, pos, widget.id);
-    });
-
-    // If there are collisions, then rearrange
-    if (hasCollisions) {
-      arrangeWidgetsInRows(widgets.value);
-      return;
-    }
-
-    // Check if widgets are compact
-    const maxY = Math.max(...Array.from(layout.value.values()).map((pos: DashboardWidgetPosition) => pos.y + 1), 0);
-
-    // If widgets occupy many rows but are not fully occupied, then consider this placement suboptimal
-    const totalCells = GRID_COLUMNS * maxY;
-    const occupiedCells = widgets.value.reduce((sum: number, widget: IDashboardWidget) => {
-      return sum + widget.size.width * widget.size.height;
-    }, 0);
+  /**
+   * 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);
+  };
 
-    // If less than 70% of the grid is occupied and widgets occupy many rows, then rearrange
-    const fillRatio = occupiedCells / totalCells;
-    if (maxY > 1 && fillRatio < 0.7) {
-      arrangeWidgetsInRows(widgets.value);
-      return;
-    }
+  /**
+   * Initializes the initial positions of widgets
+   */
+  const initializeLayout = (): void => {
+    // Priority 1: Loading from localStorage
+    const layoutLoadedFromStorage = loadLayoutFromLocalStorage();
 
-    // For widgets with positions, check and eliminate only collisions
-    const sortedWidgets = [...widgets.value].sort((a, b) => {
-      const posA = layout.value.get(a.id);
-      const posB = layout.value.get(b.id);
-      if (!posA && !posB) return 0;
-      if (!posA) return 1;
-      if (!posB) return -1;
-      return posA.y - posB.y || posA.x - posB.x;
-    });
+    // Priority 2: Using built-in widget positions
+    if (!layoutLoadedFromStorage) {
+      const usedBuiltInPositions = initializeWithBuiltInPositions();
 
-    // Rearrange widgets, avoiding collisions
-    sortedWidgets.forEach((widget) => {
-      const currentPos = layout.value.get(widget.id);
-      if (!currentPos) {
-        const freePosition = findFreePosition(widget);
-        dashboard.updateWidgetPosition(widget.id, freePosition);
-      } else if (hasCollision(widget, currentPos, widget.id)) {
-        const freePosition = findFreePosition(widget);
-        dashboard.updateWidgetPosition(widget.id, freePosition);
+      // Priority 3: Standard initialization
+      if (!usedBuiltInPositions) {
+        arrangeWidgetsInRows(widgets.value);
       }
-    });
+    }
   };
 
   return {
     widgets,
     layout,
+    GRID_COLUMNS: grid.GRID_COLUMNS,
+    getGridRows,
+    saveLayoutToLocalStorage,
+    loadLayoutFromLocalStorage,
     arrangeWidgetsInRows,
+    initializeWithBuiltInPositions,
     initializeLayout,
-    GRID_COLUMNS,
-    getGridRows,
   };
 }

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

@@ -0,0 +1,97 @@
+import { ref } from "vue";
+
+/**
+ * Composible for managing a widget clone during dragging
+ *
+ * Provides functions for creating, updating, and deleting a widget clone
+ * during dragging, as well as for animating the transition
+ *
+ * @returns An object with functions for working with the widget clone
+ */
+export function useDragClone() {
+  // Reference to the DOM element of the clone
+  const dragClone = ref<HTMLElement | null>(null);
+
+  /**
+   * Creates a widget clone for dragging
+   *
+   * @param element The HTML element from which dragging starts
+   * @returns The DOM element of the clone or null if the clone was not created
+   */
+  const createDragClone = (element: HTMLElement) => {
+    // Find the 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();
+
+    // Consider the page scroll
+    const scrollX = window.scrollX || window.pageXOffset;
+    const scrollY = window.scrollY || window.pageYOffset;
+
+    // Copy all computed styles from the original
+    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";
+
+    // Copy important styles from the original
+    clone.style.backgroundColor = computedStyle.backgroundColor;
+    clone.style.borderRadius = computedStyle.borderRadius;
+
+    // Add a class for styling the clone
+    clone.classList.add("dashboard-widget-clone");
+
+    // Animation of appearance
+    requestAnimationFrame(() => {
+      clone.style.transform = "scale(1.02)";
+      clone.style.opacity = "0.92";
+    });
+
+    document.body.appendChild(clone);
+    dragClone.value = clone;
+    return clone;
+  };
+
+  /**
+   * Updates the position of the clone during dragging
+   *
+   * @param deltaX The offset along the X axis
+   * @param deltaY The offset along the Y axis
+   */
+  const updateDragClonePosition = (deltaX: number, deltaY: number) => {
+    if (!dragClone.value) return;
+
+    dragClone.value.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
+  };
+
+  /**
+   * Removes the widget clone
+   */
+  const removeDragClone = () => {
+    if (!dragClone.value) return;
+
+    if (dragClone.value.parentNode) {
+      document.body.removeChild(dragClone.value);
+    }
+    dragClone.value = null;
+  };
+
+  return {
+    dragClone,
+    createDragClone,
+    updateDragClonePosition,
+    removeDragClone,
+  };
+}

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

@@ -0,0 +1,91 @@
+import { ref } from "vue";
+
+/**
+ * Interface for event coordinates
+ */
+export interface EventCoordinates {
+  clientX: number;
+  clientY: number;
+}
+
+/**
+ * Composible for processing event coordinates
+ *
+ * Provides functions for getting coordinates from different types of events,
+ * tracking the initial position, and calculating the offset
+ *
+ * @returns An object with functions for working with event coordinates
+ */
+export function useEventCoordinates() {
+  // Initial position of the mouse/touch
+  const initialPosition = ref<EventCoordinates>({ clientX: 0, clientY: 0 });
+
+  // Flag indicating whether the device is touch-enabled
+  const isTouchDevice = ref(false);
+
+  /**
+   * Gets coordinates from a mouse or touch event
+   *
+   * @param event The mouse or touch event
+   * @returns An object with coordinates clientX and clientY
+   */
+  const getEventCoordinates = (event: MouseEvent | TouchEvent): EventCoordinates => {
+    if ("touches" in event) {
+      // Touch event
+      isTouchDevice.value = true;
+      return {
+        clientX: event.touches[0].clientX,
+        clientY: event.touches[0].clientY,
+      };
+    }
+    // Mouse event
+    isTouchDevice.value = false;
+    return {
+      clientX: (event as MouseEvent).clientX,
+      clientY: (event as MouseEvent).clientY,
+    };
+  };
+
+  /**
+   * Saves the initial position of the event
+   *
+   * @param event The mouse or touch event
+   */
+  const saveInitialPosition = (event: MouseEvent | TouchEvent) => {
+    initialPosition.value = getEventCoordinates(event);
+  };
+
+  /**
+   * Calculates the offset from the initial position
+   *
+   * @param currentCoordinates The current coordinates
+   * @returns An object with the offsets along the X and Y axes
+   */
+  const calculateDelta = (currentCoordinates: EventCoordinates) => {
+    return {
+      deltaX: currentCoordinates.clientX - initialPosition.value.clientX,
+      deltaY: currentCoordinates.clientY - initialPosition.value.clientY,
+    };
+  };
+
+  /**
+   * Checks if the offset from the initial position exceeds the specified threshold
+   *
+   * @param currentCoordinates The current coordinates
+   * @param threshold The threshold of the offset in pixels
+   * @returns true if the offset exceeds the threshold
+   */
+  const hasMovedBeyondThreshold = (currentCoordinates: EventCoordinates, threshold = 3) => {
+    const { deltaX, deltaY } = calculateDelta(currentCoordinates);
+    return Math.abs(deltaX) > threshold || Math.abs(deltaY) > threshold;
+  };
+
+  return {
+    initialPosition,
+    isTouchDevice,
+    getEventCoordinates,
+    saveInitialPosition,
+    calculateDelta,
+    hasMovedBeyondThreshold,
+  };
+}

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

@@ -0,0 +1,150 @@
+import { ref } from "vue";
+import type { IDashboardWidget, DashboardWidgetPosition } from "../types";
+import type { EventCoordinates } from "./useEventCoordinates";
+
+/**
+ * Interface for the cell size
+ */
+export interface CellSize {
+  cellWidth: number;
+  cellHeight: number;
+}
+
+/**
+ * Interface for the drag offset
+ */
+export interface DragOffset {
+  x: number;
+  y: number;
+}
+
+/**
+ * Composible for calculating the position of a widget in the grid
+ *
+ * Provides functions for converting mouse coordinates to grid coordinates,
+ * considering the cell sizes, drag offset, and grid boundaries
+ *
+ * @param gridColumns The number of columns in the grid
+ * @param getGridRows The function for getting the number of rows in the grid
+ * @returns An object with functions for working with the grid position
+ */
+export function useGridPosition(gridColumns: number, getGridRows?: () => number) {
+  // Current preview position
+  const previewPosition = ref<DashboardWidgetPosition | null>(null);
+
+  // Drag offset (relative to the top left corner of the widget)
+  const dragOffset = ref<DragOffset>({ x: 0, y: 0 });
+
+  /**
+   * Calculates the drag offset
+   *
+   * @param event The mouse or touch event
+   * @param element The HTML element of the widget
+   * @param cellSize The cell sizes
+   */
+  const calculateDragOffset = (event: MouseEvent | TouchEvent, element: HTMLElement, cellSize: CellSize) => {
+    const rect = element.getBoundingClientRect();
+
+    // Get the coordinates of the event
+    let clientX: number, clientY: number;
+
+    if ("touches" in event) {
+      clientX = event.touches[0].clientX;
+      clientY = event.touches[0].clientY;
+    } else {
+      clientX = event.clientX;
+      clientY = event.clientY;
+    }
+
+    // Calculate the offset relative to the cell size
+    dragOffset.value = {
+      x: (clientX - rect.left) / cellSize.cellWidth,
+      y: (clientY - rect.top) / cellSize.cellHeight,
+    };
+  };
+
+  /**
+   * Converts mouse coordinates to grid coordinates
+   *
+   * @param coords The mouse coordinates
+   * @param containerRect The sizes and position of the grid container
+   * @param cellSize The cell sizes
+   * @param scrollOffset The scroll offset of the container
+   * @returns The coordinates in the grid
+   */
+  const mouseToGridCoordinates = (
+    coords: EventCoordinates,
+    containerRect: DOMRect,
+    cellSize: CellSize,
+    scrollOffset: { left: number; top: number },
+  ): { gridX: number; gridY: number } => {
+    // Calculate the position of the mouse relative to the container with the scroll offset
+    const mouseX = coords.clientX - containerRect.left + scrollOffset.left;
+    const mouseY = coords.clientY - containerRect.top + scrollOffset.top;
+
+    // Convert the mouse coordinates to grid coordinates with the drag offset
+    const gridX = Math.round(mouseX / cellSize.cellWidth - dragOffset.value.x);
+    const gridY = Math.round(mouseY / cellSize.cellHeight - dragOffset.value.y);
+
+    return { gridX, gridY };
+  };
+
+  /**
+   * Constrains the position of the widget to the grid boundaries
+   *
+   * @param gridX The X-coordinate in the grid
+   * @param gridY The Y-coordinate in the grid
+   * @param widgetWidth The width of the widget in cells
+   * @param widgetHeight The height of the widget in cells
+   * @returns The constrained coordinates in the grid
+   */
+  const constrainToGrid = (
+    gridX: number,
+    gridY: number,
+    widgetWidth: number,
+    widgetHeight: number,
+  ): { gridX: number; gridY: number } => {
+    // Constrain the minimum values (not less than 0)
+    gridX = Math.max(0, gridX);
+    gridY = Math.max(0, gridY);
+
+    // The right and bottom boundaries depend on the size of the widget and the size of the grid
+    const gridWidth = gridColumns;
+    const gridHeight = getGridRows?.() || 100; // Use a large value if getGridRows is not defined
+
+    // Constrain the position so that the widget remains within the grid
+    gridX = Math.min(gridX, gridWidth - widgetWidth);
+    gridY = Math.min(gridY, gridHeight - widgetHeight);
+
+    return { gridX, gridY };
+  };
+
+  /**
+   * Updates the preview position
+   *
+   * @param position The new position
+   * @returns The updated preview position
+   */
+  const updatePreviewPosition = (position: DashboardWidgetPosition): DashboardWidgetPosition => {
+    previewPosition.value = position;
+    return position;
+  };
+
+  /**
+   * Resets the preview position and drag offset
+   */
+  const resetPosition = () => {
+    previewPosition.value = null;
+    dragOffset.value = { x: 0, y: 0 };
+  };
+
+  return {
+    previewPosition,
+    dragOffset,
+    calculateDragOffset,
+    mouseToGridCoordinates,
+    constrainToGrid,
+    updatePreviewPosition,
+    resetPosition,
+  };
+}