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

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,
+  };
+}

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,
+  };
+}