@vc-shell/framework 1.2.3-beta.1 → 1.2.4-beta.1

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

@@ -1,150 +0,0 @@
-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

@@ -1,169 +0,0 @@
-import { ref, computed } from "vue";
-import type { IDashboardWidget, DashboardWidgetPosition } from "../types";
-
-// Constants for working with the grid
-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

@@ -1,102 +0,0 @@
-import { useLocalStorage } from "@vueuse/core";
-import type { DashboardWidgetPosition } from "../types";
-import { createLogger } from "../../../../core/utilities";
-
-const logger = createLogger("use-layout-persistence");
-
-/**
- * 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) {
-      logger.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) {
-      logger.error("Failed to load dashboard layout from localStorage:", error);
-      return false;
-    }
-  };
-
-  /**
-   * Gets saved positions for specific widgets
-   *
-   * @returns The saved positions
-   */
-  const getSavedPositions = (): Record<string, DashboardWidgetPosition> => {
-    return savedLayout.value;
-  };
-
-  /**
-   * 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,
-    getSavedPositions,
-  };
-}

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

@@ -1,105 +0,0 @@
-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,
-  };
-}