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

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

@@ -0,0 +1,169 @@
+import { ref, computed } from "vue";
+import type { IDashboardWidget, DashboardWidgetPosition } from "../types";
+
+// Константы для работы с сеткой
+export const GRID_COLUMNS = 12;
+export const MIN_GRID_ROWS = 12;
+export const ROWS_BUFFER = 10;
+
+/**
+ * Hook for working with the dashboard grid
+ *
+ * Provides basic functions and constants for working with the grid
+ *
+ * @returns An object with functions and constants for working with the grid
+ */
+export function useGridSystem() {
+  // Dynamic number of rows in the grid
+  const dynamicRows = ref(MIN_GRID_ROWS);
+
+  /**
+   * Updates the number of rows based on the widget positions
+   *
+   * @param widgets The array of widgets
+   * @param layout The map of widget positions
+   * @returns The current number of rows
+   */
+  const updateGridRows = (widgets: IDashboardWidget[], layout: Map<string, DashboardWidgetPosition>): number => {
+    if (widgets.length === 0) {
+      dynamicRows.value = MIN_GRID_ROWS;
+      return dynamicRows.value;
+    }
+
+    // Find the maximum occupied row
+    const maxY = Math.max(
+      ...Array.from(layout.values()).map((pos, index) => {
+        const widget = widgets.find((w) => w.id === Array.from(layout.keys())[index]);
+        return widget ? pos.y + widget.size.height : pos.y + 1;
+      }),
+      0,
+    );
+
+    // Set the number of rows with a buffer for scrolling
+    dynamicRows.value = Math.max(maxY + ROWS_BUFFER, MIN_GRID_ROWS);
+    return dynamicRows.value;
+  };
+
+  /**
+   * Checks if there is a collision (overlap) of the widget in the specified position
+   *
+   * @param widget The widget to check
+   * @param position The position to check
+   * @param widgets The array of all widgets
+   * @param layout The map of widget positions
+   * @param excludeWidgetId The ID of the widget to exclude from the check (optional)
+   * @returns true if there is a collision, false otherwise
+   */
+  const hasCollision = (
+    widget: IDashboardWidget,
+    position: DashboardWidgetPosition,
+    widgets: IDashboardWidget[],
+    layout: Map<string, DashboardWidgetPosition>,
+    excludeWidgetId?: string,
+  ): boolean => {
+    // Check if the position is out of the grid
+    if (position.x < 0 || position.x + widget.size.width > GRID_COLUMNS || position.y < 0) {
+      return true;
+    }
+
+    // Create a map of occupied cells for optimization
+    const occupiedCells = new Set<string>();
+
+    // Fill the map with occupied cells
+    widgets.forEach((other) => {
+      if (other.id === widget.id || (excludeWidgetId && other.id === excludeWidgetId)) {
+        return;
+      }
+
+      const otherPos = layout.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}`);
+        }
+      }
+    });
+
+    // Check for collisions for each cell of the widget
+    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;
+  };
+
+  /**
+   * Checks if the specified area is free for placement of the widget
+   *
+   * @param x The X coordinate
+   * @param y The Y coordinate
+   * @param width The width of the widget
+   * @param height The height of the widget
+   * @param occupiedCells The set of occupied cells
+   * @returns true if the area is free, false otherwise
+   */
+  const isAreaFree = (x: number, y: number, width: number, height: number, occupiedCells: Set<string>): boolean => {
+    // Check if the area is out of the grid
+    if (x < 0 || x + width > GRID_COLUMNS || y < 0) {
+      return false;
+    }
+
+    // Check each cell in the area
+    for (let ix = x; ix < x + width; ix++) {
+      for (let iy = y; iy < y + height; iy++) {
+        if (occupiedCells.has(`${ix},${iy}`)) {
+          return false;
+        }
+      }
+    }
+    return true;
+  };
+
+  /**
+   * Creates a map of occupied cells based on the current layout
+   *
+   * @param widgets The array of widgets
+   * @param layout The map of widget positions
+   * @returns The set of occupied cells in the format "x,y"
+   */
+  const createOccupiedCellsMap = (
+    widgets: IDashboardWidget[],
+    layout: Map<string, DashboardWidgetPosition>,
+    excludeWidgetId?: string,
+  ): Set<string> => {
+    const occupiedCells = new Set<string>();
+
+    widgets.forEach((widget) => {
+      if (excludeWidgetId && widget.id === excludeWidgetId) {
+        return;
+      }
+
+      const pos = layout.get(widget.id);
+      if (!pos) return;
+
+      for (let x = pos.x; x < pos.x + widget.size.width; x++) {
+        for (let y = pos.y; y < pos.y + widget.size.height; y++) {
+          occupiedCells.add(`${x},${y}`);
+        }
+      }
+    });
+
+    return occupiedCells;
+  };
+
+  return {
+    GRID_COLUMNS,
+    MIN_GRID_ROWS,
+    ROWS_BUFFER,
+    dynamicRows,
+    updateGridRows,
+    hasCollision,
+    isAreaFree,
+    createOccupiedCellsMap,
+  };
+}

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

@@ -0,0 +1,89 @@
+import { useLocalStorage } from "@vueuse/core";
+import type { DashboardWidgetPosition } from "../types";
+
+/**
+ * Hook for managing the saving and loading of the dashboard layout
+ *
+ * Provides functions for saving and loading the dashboard layout from localStorage
+ *
+ * @param storageKey The key for local storage
+ * @param updateCallback The function for updating the position of the widget
+ * @returns An object with functions for working with the saved layout
+ */
+export function useLayoutPersistence(
+  storageKey: string,
+  updateCallback: (widgetId: string, position: DashboardWidgetPosition) => void,
+) {
+  // Use useLocalStorage for working with localStorage
+  const savedLayout = useLocalStorage<Record<string, DashboardWidgetPosition>>(storageKey, {});
+
+  /**
+   * Saves the current layout to localStorage
+   *
+   * @param layout The current layout to save
+   */
+  const saveLayout = (layout: Map<string, DashboardWidgetPosition>): void => {
+    try {
+      // Convert Map to an object for serialization
+      const layoutData: Record<string, DashboardWidgetPosition> = {};
+
+      layout.forEach((position, widgetId) => {
+        layoutData[widgetId] = position;
+      });
+
+      // Save to localStorage through the reactive variable
+      savedLayout.value = layoutData;
+    } catch (error) {
+      console.error("Failed to save dashboard layout to localStorage:", error);
+    }
+  };
+
+  /**
+   * Loads the saved layout from localStorage
+   *
+   * @param widgets The array of widgets to check for existence
+   * @returns true if the layout was successfully loaded, false otherwise
+   */
+  const loadLayout = <T extends { id: string }>(widgets: T[]): boolean => {
+    try {
+      // Check for the existence of the saved layout
+      if (!savedLayout.value || Object.keys(savedLayout.value).length === 0) {
+        return false;
+      }
+
+      // Apply positions to existing widgets
+      Object.entries(savedLayout.value).forEach(([widgetId, position]) => {
+        const widget = widgets.find((w) => w.id === widgetId);
+        if (widget) {
+          updateCallback(widgetId, position);
+        }
+      });
+
+      return true;
+    } catch (error) {
+      console.error("Failed to load dashboard layout from localStorage:", error);
+      return false;
+    }
+  };
+
+  /**
+   * Clears the saved layout from localStorage
+   */
+  const clearSavedLayout = (): void => {
+    savedLayout.value = {};
+  };
+
+  /**
+   * Checks if there is a saved layout in localStorage
+   */
+  const hasSavedLayout = (): boolean => {
+    return Object.keys(savedLayout.value).length > 0;
+  };
+
+  return {
+    saveLayout,
+    loadLayout,
+    clearSavedLayout,
+    hasSavedLayout,
+  };
+}

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

@@ -0,0 +1,105 @@
+import { ref, onUnmounted } from "vue";
+
+/**
+ * Hook for managing ResizeObserver
+ *
+ * Provides functionality for tracking changes in the sizes of elements
+ *
+ * @param callback The function called when the sizes change
+ * @param options Options
+ * @returns An object with methods for working with ResizeObserver
+ */
+export function useResizeObserver(
+  callback: (entries: ResizeObserverEntry[]) => void,
+  options?: {
+    debounceMs?: number;
+  },
+) {
+  // Instance of ResizeObserver
+  const observer = ref<ResizeObserver | null>(null);
+
+  // Timer identifier for debounce
+  const debounceTimer = ref<number | null>(null);
+
+  // Determine if the browser supports ResizeObserver
+  const isSupported = typeof window !== "undefined" && "ResizeObserver" in window;
+
+  /**
+   * The handler of the event of changing the sizes with debounce
+   *
+   * @param entries The array of ResizeObserverEntry
+   */
+  const handleResize = (entries: ResizeObserverEntry[]) => {
+    if (options?.debounceMs) {
+      // Clear the previous timer if it exists
+      if (debounceTimer.value !== null) {
+        window.clearTimeout(debounceTimer.value);
+        debounceTimer.value = null;
+      }
+
+      // Set a new timer
+      debounceTimer.value = window.setTimeout(() => {
+        callback(entries);
+      }, options.debounceMs);
+    } else {
+      // Call immediately without debounce
+      callback(entries);
+    }
+  };
+
+  /**
+   * Initializes ResizeObserver for the specified element
+   *
+   * @param element The element to monitor the sizes
+   */
+  const observe = (element: Element) => {
+    if (!isSupported) return;
+
+    // Create a new ResizeObserver if it doesn't exist
+    if (!observer.value) {
+      observer.value = new ResizeObserver(handleResize);
+    }
+
+    // Start monitoring the changes in the sizes
+    observer.value.observe(element);
+  };
+
+  /**
+   * Stops monitoring the changes in the sizes for the specified element
+   *
+   * @param element The element for which to stop monitoring
+   */
+  const unobserve = (element: Element) => {
+    if (!isSupported || !observer.value) return;
+
+    observer.value.unobserve(element);
+  };
+
+  /**
+   * Disconnects ResizeObserver and clears all resources
+   */
+  const disconnect = () => {
+    if (!isSupported || !observer.value) return;
+
+    observer.value.disconnect();
+    observer.value = null;
+
+    // Clear the debounce timer
+    if (debounceTimer.value !== null) {
+      window.clearTimeout(debounceTimer.value);
+      debounceTimer.value = null;
+    }
+  };
+
+  // Automatic cleanup when the component is unmounted
+  onUnmounted(() => {
+    disconnect();
+  });
+
+  return {
+    observe,
+    unobserve,
+    disconnect,
+    isSupported,
+  };
+}

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

@@ -0,0 +1,264 @@
+import { ref } from "vue";
+import type { IDashboardWidget, DashboardWidgetPosition } from "../types";
+import { useGridSystem } from "./useGridSystem";
+
+// Constants for finding the optimal position
+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
+];
+
+/**
+ * Hook for managing the placement of widgets on the dashboard
+ *
+ * @param updatePositionCallback The function for updating the position of the widget
+ * @returns An object with functions for working with the placement of widgets
+ */
+export function useWidgetLayout(updatePositionCallback: (widgetId: string, position: DashboardWidgetPosition) => void) {
+  const grid = useGridSystem();
+
+  /**
+   * Finds a free position for the widget
+   *
+   * @param widget The widget to place
+   * @param widgets The array of all widgets
+   * @param layout The map of widget positions
+   * @returns The free position for the widget
+   */
+  const findFreePosition = (
+    widget: IDashboardWidget,
+    widgets: IDashboardWidget[],
+    layout: Map<string, DashboardWidgetPosition>,
+  ): DashboardWidgetPosition => {
+    const currentPos = layout.get(widget.id);
+
+    // If the current position is free, use it
+    if (currentPos && !grid.hasCollision(widget, currentPos, widgets, layout, widget.id)) {
+      return currentPos;
+    }
+
+    // Start searching from the top left corner or the current position
+    const startX = currentPos?.x || 0;
+    const startY = currentPos?.y || 0;
+
+    // Spiral search for a free position
+    let layer = 0;
+    const maxLayers = Math.max(grid.GRID_COLUMNS, grid.dynamicRows.value);
+
+    while (layer < maxLayers) {
+      // Check all directions in the current layer
+      for (const { dx, dy } of SEARCH_DIRECTIONS) {
+        const x = startX + dx * layer;
+        const y = startY + dy * layer;
+
+        const position = { x, y };
+
+        // Check the position
+        if (!grid.hasCollision(widget, position, widgets, layout, widget.id)) {
+          return position;
+        }
+      }
+
+      layer++;
+    }
+
+    // If we didn't find a position, add to the end
+    return {
+      x: 0,
+      y: grid.dynamicRows.value,
+    };
+  };
+
+  /**
+   * Finds the optimal position for the widget considering the occupied cells
+   *
+   * @param widget The widget to place
+   * @param occupiedCells The set of occupied cells
+   * @param maxRows The maximum number of rows
+   * @returns The optimal position for the widget
+   */
+  const findOptimalPosition = (
+    widget: IDashboardWidget,
+    occupiedCells: Set<string>,
+    maxRows: number,
+  ): DashboardWidgetPosition => {
+    // Search for a position with the minimum Y, then with the minimum X
+    let bestPos: DashboardWidgetPosition = { x: 0, y: 0 };
+    let minY = Number.MAX_SAFE_INTEGER;
+
+    // Sliding window over the entire grid to find free space
+    for (let y = 0; y < maxRows; y++) {
+      for (let x = 0; x <= grid.GRID_COLUMNS - widget.size.width; x++) {
+        if (grid.isAreaFree(x, y, widget.size.width, widget.size.height, occupiedCells)) {
+          // Found free space
+          if (y < minY) {
+            minY = y;
+            bestPos = { x, y };
+          } else if (y === minY && x < bestPos.x) {
+            // If on the same row, choose the left one
+            bestPos = { x, y };
+          }
+
+          // If we found a place in the first row, return it immediately
+          if (y === 0) {
+            return bestPos;
+          }
+        }
+      }
+
+      // If we found something, and moved to the next row, stop searching
+      if (minY !== Number.MAX_SAFE_INTEGER && y > minY) {
+        break;
+      }
+    }
+
+    // If we didn't find a place, return the extreme position
+    if (minY === Number.MAX_SAFE_INTEGER) {
+      return { x: 0, y: maxRows };
+    }
+
+    return bestPos;
+  };
+
+  /**
+   * Places widgets in rows, minimizing empty spaces
+   *
+   * @param widgetsToArrange The array of widgets to place
+   * @param allWidgets The array of all widgets
+   * @param layout The map of widget positions
+   */
+  const arrangeWidgetsInRows = (
+    widgetsToArrange: IDashboardWidget[],
+    allWidgets: IDashboardWidget[],
+    layout: Map<string, DashboardWidgetPosition>,
+  ): void => {
+    if (widgetsToArrange.length === 0) return;
+
+    const sortedWidgets = [...widgetsToArrange].sort((a, b) => {
+      // Sort by size (bigger 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) => {
+      // Проверяем, помещается ли виджет в текущую строку
+      if (currentX + widget.size.width > grid.GRID_COLUMNS) {
+        // If it doesn't fit, move to the next row
+        currentX = 0;
+        currentY += rowHeight;
+        rowHeight = 0;
+      }
+
+      // Place the widget on the current position
+      const position = { x: currentX, y: currentY };
+      updatePositionCallback(widget.id, position);
+
+      // Update the current position
+      currentX += widget.size.width;
+
+      // Update the maximum height for the current row
+      rowHeight = Math.max(rowHeight, widget.size.height);
+    });
+  };
+
+  /**
+   * Initializes widgets with their built-in positions
+   *
+   * @param widgets The array of widgets
+   * @param layout The map of widget positions
+   * @returns true if at least one widget had a built-in position
+   */
+  const initializeWithBuiltInPositions = (
+    widgets: IDashboardWidget[],
+    layout: Map<string, DashboardWidgetPosition>,
+  ): boolean => {
+    if (widgets.length === 0) return false;
+
+    // Separate widgets into those that have built-in positions and those that don't
+    const widgetsWithPositions = widgets.filter((widget) => widget.position);
+    const widgetsWithoutPositions = widgets.filter((widget) => !widget.position);
+
+    // If there are no widgets with built-in positions, exit
+    if (widgetsWithPositions.length === 0) return false;
+
+    // Sort by rows and columns for more predictable placement
+    const sortedWidgets = [...widgetsWithPositions].sort((a, b) => {
+      if (!a.position || !b.position) return 0;
+      // First sort by y (rows)
+      if (a.position.y !== b.position.y) return a.position.y - b.position.y;
+      // Then by x (columns)
+      return a.position.x - b.position.x;
+    });
+
+    // Clear the current layout
+    layout.clear();
+
+    // Place widgets with given positions
+    sortedWidgets.forEach((widget) => {
+      if (widget.position) {
+        updatePositionCallback(widget.id, widget.position);
+      }
+    });
+
+    // Check and fix collisions for widgets with given positions
+    let hasCollisions;
+    do {
+      hasCollisions = false;
+      for (const widget of sortedWidgets) {
+        if (!widget.position) continue;
+
+        const position = layout.get(widget.id);
+        if (position && grid.hasCollision(widget, position, widgets, layout, widget.id)) {
+          hasCollisions = true;
+          const freePosition = findFreePosition(widget, widgets, layout);
+          updatePositionCallback(widget.id, freePosition);
+        }
+      }
+    } while (hasCollisions);
+
+    // Create a map of occupied cells for optimal placement of the remaining widgets
+    const occupiedCells = grid.createOccupiedCellsMap(widgets, layout);
+
+    // Sort the remaining widgets by size (bigger first)
+    const sortedRemaining = [...widgetsWithoutPositions].sort((a, b) => {
+      const aSize = a.size.width * a.size.height;
+      const bSize = b.size.width * b.size.height;
+      return bSize - aSize; // Bigger first
+    });
+
+    // Place the remaining widgets using the optimal algorithm
+    for (const widget of sortedRemaining) {
+      const position = findOptimalPosition(widget, occupiedCells, grid.dynamicRows.value + grid.ROWS_BUFFER);
+      updatePositionCallback(widget.id, position);
+
+      // Update the map of occupied cells
+      for (let x = position.x; x < position.x + widget.size.width; x++) {
+        for (let y = position.y; y < position.y + widget.size.height; y++) {
+          occupiedCells.add(`${x},${y}`);
+        }
+      }
+    }
+
+    return true;
+  };
+
+  return {
+    findFreePosition,
+    findOptimalPosition,
+    arrangeWidgetsInRows,
+    initializeWithBuiltInPositions,
+  };
+}