@dragonworks/ngx-dashboard 20.0.4 → 20.0.6

package/src/lib/store/features/drag-drop.feature.ts

@@ -0,0 +1,140 @@
+import {
+  signalStoreFeature,
+  withMethods,
+  withState,
+  withComputed,
+  patchState,
+} from '@ngrx/signals';
+import { computed } from '@angular/core';
+import {
+  CellId,
+  CellIdUtils,
+  CellData,
+  DragData,
+  WidgetFactory,
+  WidgetId,
+} from '../../models';
+import {
+  calculateCollisionInfo,
+  calculateHighlightedZones,
+} from './utils/collision.utils';
+import { DashboardService } from '../../services/dashboard.service';
+
+export interface DragDropState {
+  dragData: DragData | null;
+  hoveredDropZone: { row: number; col: number } | null;
+}
+
+const initialDragDropState: DragDropState = {
+  dragData: null,
+  hoveredDropZone: null,
+};
+
+export const withDragDrop = () =>
+  signalStoreFeature(
+    withState<DragDropState>(initialDragDropState),
+    withComputed((store) => ({
+      // Highlighted zones during drag
+      highlightedZones: computed(() =>
+        calculateHighlightedZones(store.dragData(), store.hoveredDropZone()),
+      ),
+    })),
+    withComputed((store) => ({
+      // Map for quick highlight lookup - reuse highlightedZones computation
+      highlightMap: computed(() => {
+        const zones = store.highlightedZones();
+        const map = new Set<CellId>();
+
+        for (const z of zones) {
+          map.add(CellIdUtils.create(z.row, z.col));
+        }
+
+        return map;
+      }),
+    })),
+    withMethods((store) => ({
+      startDrag(dragData: DragData) {
+        patchState(store, { dragData });
+      },
+
+      endDrag() {
+        patchState(store, {
+          dragData: null,
+          hoveredDropZone: null,
+        });
+      },
+
+      setHoveredDropZone(zone: { row: number; col: number } | null) {
+        patchState(store, { hoveredDropZone: zone });
+      },
+    })),
+
+    // Second withMethods block for drop handling that can access endDrag
+    withMethods((store) => ({
+      // Drop handling logic with dependency injection
+      _handleDrop(
+        dragData: DragData,
+        targetPosition: { row: number; col: number },
+        dependencies: {
+          cells: CellData[];
+          rows: number;
+          columns: number;
+          dashboardService: DashboardService;
+          createWidget: (
+            row: number,
+            col: number,
+            factory: WidgetFactory,
+            widgetState?: string,
+          ) => void;
+          updateWidgetPosition: (
+            widgetId: WidgetId,
+            row: number,
+            col: number,
+          ) => void;
+        },
+      ): boolean {
+        // 1. Validate placement using existing collision detection
+        const collisionInfo = calculateCollisionInfo(
+          dragData,
+          targetPosition,
+          dependencies.cells,
+          dependencies.rows,
+          dependencies.columns,
+        );
+
+        // 2. End drag state first
+        store.endDrag();
+
+        // 3. Early return if invalid placement
+        if (collisionInfo.hasCollisions || collisionInfo.outOfBounds) {
+          return false;
+        }
+
+        // 4. Handle widget creation from palette
+        if (dragData.kind === 'widget') {
+          const factory = dependencies.dashboardService.getFactory(
+            dragData.content.widgetTypeid,
+          );
+          dependencies.createWidget(
+            targetPosition.row,
+            targetPosition.col,
+            factory,
+            undefined,
+          );
+          return true;
+        }
+
+        // 5. Handle cell movement
+        if (dragData.kind === 'cell') {
+          dependencies.updateWidgetPosition(
+            dragData.content.widgetId,  // Use widgetId instead of cellId
+            targetPosition.row,
+            targetPosition.col,
+          );
+          return true;
+        }
+
+        return false;
+      },
+    })),
+  );

package/src/lib/store/features/grid-config.feature.ts

@@ -0,0 +1,43 @@
+import { signalStoreFeature, withMethods, withState, patchState } from '@ngrx/signals';
+
+export interface GridConfigState {
+  rows: number;
+  columns: number;
+  gutterSize: string;
+  isEditMode: boolean;
+  gridCellDimensions: { width: number; height: number };
+}
+
+const initialGridConfigState: GridConfigState = {
+  rows: 8,
+  columns: 16,
+  gutterSize: '0.5em',
+  isEditMode: false,
+  gridCellDimensions: { width: 0, height: 0 },
+};
+
+export const withGridConfig = () =>
+  signalStoreFeature(
+    withState<GridConfigState>(initialGridConfigState),
+    withMethods((store) => ({
+      setGridConfig(config: {
+        rows?: number;
+        columns?: number;
+        gutterSize?: string;
+      }) {
+        patchState(store, config);
+      },
+
+      setGridCellDimensions(width: number, height: number) {
+        patchState(store, { gridCellDimensions: { width, height } });
+      },
+
+      toggleEditMode() {
+        patchState(store, { isEditMode: !store.isEditMode() });
+      },
+
+      setEditMode(isEditMode: boolean) {
+        patchState(store, { isEditMode });
+      },
+    }))
+  );

package/src/lib/store/features/resize.feature.ts

@@ -0,0 +1,140 @@
+import {
+  signalStoreFeature,
+  withMethods,
+  withState,
+  patchState,
+} from '@ngrx/signals';
+import { CellId, CellIdUtils, CellData } from '../../models';
+import { calculateResizePreview, type ResizeData } from './utils/resize.utils';
+
+export interface ResizeState {
+  resizeData: ResizeData | null;
+}
+
+const initialResizeState: ResizeState = {
+  resizeData: null,
+};
+
+// Utility functions for resize preview computations
+export const ResizePreviewUtils = {
+  computePreviewCells(
+    resizeData: ResizeData | null,
+    cells: CellData[],
+  ): { row: number; col: number }[] {
+    if (!resizeData) return [];
+
+    const cell = cells.find((cell) =>
+      CellIdUtils.equals(cell.cellId, resizeData.cellId),
+    );
+    if (!cell) return [];
+
+    const previewCells: { row: number; col: number }[] = [];
+    for (let r = 0; r < resizeData.previewRowSpan; r++) {
+      for (let c = 0; c < resizeData.previewColSpan; c++) {
+        previewCells.push({
+          row: cell.row + r,
+          col: cell.col + c,
+        });
+      }
+    }
+
+    return previewCells;
+  },
+
+  computePreviewMap(previewCells: { row: number; col: number }[]): Set<CellId> {
+    const map = new Set<CellId>();
+    for (const cell of previewCells) {
+      map.add(CellIdUtils.create(cell.row, cell.col));
+    }
+    return map;
+  },
+};
+
+export const withResize = () =>
+  signalStoreFeature(
+    withState<ResizeState>(initialResizeState),
+    withMethods((store) => ({
+      // Resize methods that need cross-feature dependencies
+      _startResize(
+        cellId: CellId,
+        dependencies: {
+          cells: CellData[];
+        },
+      ) {
+        const cell = dependencies.cells.find((c) =>
+          CellIdUtils.equals(c.cellId, cellId),
+        );
+        if (!cell) return;
+
+        patchState(store, {
+          resizeData: {
+            cellId,
+            originalRowSpan: cell.rowSpan,
+            originalColSpan: cell.colSpan,
+            previewRowSpan: cell.rowSpan,
+            previewColSpan: cell.colSpan,
+          },
+        });
+      },
+
+      _updateResizePreview(
+        direction: 'horizontal' | 'vertical',
+        delta: number,
+        dependencies: {
+          cells: CellData[];
+          rows: number;
+          columns: number;
+        },
+      ) {
+        const resizeData = store.resizeData();
+        if (!resizeData) return;
+
+        const newSpans = calculateResizePreview(
+          resizeData,
+          direction,
+          delta,
+          dependencies.cells,
+          dependencies.rows,
+          dependencies.columns,
+        );
+
+        if (newSpans) {
+          patchState(store, {
+            resizeData: {
+              ...resizeData,
+              previewRowSpan: newSpans.rowSpan,
+              previewColSpan: newSpans.colSpan,
+            },
+          });
+        }
+      },
+
+      _endResize(
+        apply: boolean,
+        dependencies: {
+          updateWidgetSpan: (
+            id: CellId,
+            rowSpan: number,
+            colSpan: number,
+          ) => void;
+        },
+      ) {
+        const resizeData = store.resizeData();
+        if (!resizeData) return;
+
+        if (
+          apply &&
+          (resizeData.previewRowSpan !== resizeData.originalRowSpan ||
+            resizeData.previewColSpan !== resizeData.originalColSpan)
+        ) {
+          dependencies.updateWidgetSpan(
+            resizeData.cellId,
+            resizeData.previewRowSpan,
+            resizeData.previewColSpan,
+          );
+        }
+
+        patchState(store, { resizeData: null });
+      },
+    })),
+  );

package/src/lib/store/features/utils/collision.utils.ts

@@ -0,0 +1,89 @@
+import { CellId, CellIdUtils, CellData, DragData } from '../../../models';
+import { GridQueryInternalUtils } from './grid-query-internal.utils';
+
+export interface CollisionInfo {
+  hasCollisions: boolean;
+  invalidCells: CellId[];
+  outOfBounds: boolean;
+  footprint: { row: number; col: number }[];
+}
+
+export function calculateCollisionInfo(
+  dragData: DragData | null,
+  hovered: { row: number; col: number } | null,
+  cells: CellData[],
+  rows: number,
+  columns: number,
+): CollisionInfo {
+  if (!dragData || !hovered) {
+    return {
+      hasCollisions: false,
+      invalidCells: [],
+      outOfBounds: false,
+      footprint: [],
+    };
+  }
+
+  const isCell = dragData.kind === 'cell';
+  const rowSpan = isCell ? dragData.content.rowSpan : 1;
+  const colSpan = isCell ? dragData.content.colSpan : 1;
+
+  // Check bounds
+  const outOfBounds = GridQueryInternalUtils.isOutOfBounds(
+    hovered.row,
+    hovered.col,
+    rowSpan,
+    colSpan,
+    rows,
+    columns
+  );
+
+  // Generate footprint
+  const footprint: { row: number; col: number }[] = [];
+  for (let r = 0; r < rowSpan; r++) {
+    for (let c = 0; c < colSpan; c++) {
+      footprint.push({ row: hovered.row + r, col: hovered.col + c });
+    }
+  }
+
+  const excludeWidgetId = isCell ? dragData.content.widgetId : undefined;
+
+  // Check for actual collisions with other widgets (not self)
+  const hasCollisions = footprint.some((pos) =>
+    GridQueryInternalUtils.isCellOccupied(cells, pos.row, pos.col, excludeWidgetId)
+  );
+
+  // Generate invalid cell IDs
+  const invalidCells: CellId[] = [];
+  if (hasCollisions || outOfBounds) {
+    for (const pos of footprint) {
+      invalidCells.push(CellIdUtils.create(pos.row, pos.col));
+    }
+  }
+
+  return {
+    hasCollisions,
+    invalidCells,
+    outOfBounds,
+    footprint,
+  };
+}
+
+export function calculateHighlightedZones(
+  dragData: DragData | null,
+  hovered: { row: number; col: number } | null,
+): { row: number; col: number }[] {
+  if (!dragData || !hovered) return [];
+
+  const zones: { row: number; col: number }[] = [];
+  const rowSpan = dragData.kind === 'cell' ? dragData.content.rowSpan : 1;
+  const colSpan = dragData.kind === 'cell' ? dragData.content.colSpan : 1;
+
+  for (let r = 0; r < rowSpan; r++) {
+    for (let c = 0; c < colSpan; c++) {
+      zones.push({ row: hovered.row + r, col: hovered.col + c });
+    }
+  }
+
+  return zones;
+}

package/src/lib/store/features/utils/grid-query-internal.utils.ts

@@ -0,0 +1,37 @@
+import { CellId, CellIdUtils, CellData, WidgetId } from '../../../models';
+
+// Internal utility functions used by collision detection, resize logic, and tests
+export const GridQueryInternalUtils = {
+  isCellOccupied(cells: CellData[], row: number, col: number, excludeWidgetId?: WidgetId): boolean {
+    return cells.some((cell) => {
+      // Skip checking against the widget being dragged (use widgetId for stable identity)
+      if (excludeWidgetId && cell.widgetId === excludeWidgetId)
+        return false;
+
+      const endRow = cell.row + cell.rowSpan - 1;
+      const endCol = cell.col + cell.colSpan - 1;
+
+      return (
+        cell.row <= row && row <= endRow && cell.col <= col && col <= endCol
+      );
+    });
+  },
+
+  isOutOfBounds(
+    targetRow: number,
+    targetCol: number,
+    spanRow: number,
+    spanCol: number,
+    maxRows: number,
+    maxColumns: number,
+  ): boolean {
+    const rowLimit = targetRow + spanRow - 1;
+    const colLimit = targetCol + spanCol - 1;
+
+    return rowLimit > maxRows || colLimit > maxColumns;
+  },
+
+  getCellAt(cells: CellData[], row: number, col: number): CellData | null {
+    return cells.find((cell) => cell.row === row && cell.col === col) ?? null;
+  },
+};

package/src/lib/store/features/utils/resize.utils.ts

@@ -0,0 +1,165 @@
+import { CellId, CellIdUtils, CellData } from '../../../models';
+
+export function getMaxColSpan(
+  cellId: CellId,
+  row: number,
+  col: number,
+  cells: CellData[],
+  columns: number,
+): number {
+  const currentCell = cells.find((c) => CellIdUtils.equals(c.cellId, cellId));
+  if (!currentCell) return 1;
+
+  // Start from current position and check each column until we hit a boundary or collision
+  let maxSpan = 1;
+
+  for (let testCol = col + 1; testCol <= columns; testCol++) {
+    // Check if this column is free for all rows the widget spans
+    let columnIsFree = true;
+
+    for (let testRow = row; testRow < row + currentCell.rowSpan; testRow++) {
+      const occupied = cells.some((cell) => {
+        if (CellIdUtils.equals(cell.cellId, cellId)) return false;
+
+        const wStartCol = cell.col;
+        const wEndCol = cell.col + cell.colSpan - 1;
+        const wStartRow = cell.row;
+        const wEndRow = cell.row + cell.rowSpan - 1;
+
+        return (
+          testCol >= wStartCol &&
+          testCol <= wEndCol &&
+          testRow >= wStartRow &&
+          testRow <= wEndRow
+        );
+      });
+
+      if (occupied) {
+        columnIsFree = false;
+        break;
+      }
+    }
+
+    if (!columnIsFree) {
+      break; // Hit a collision, stop here
+    }
+
+    maxSpan = testCol - col + 1; // Update max span to include this column
+  }
+
+  return maxSpan;
+}
+
+export function getMaxRowSpan(
+  cellId: CellId,
+  row: number,
+  col: number,
+  cells: CellData[],
+  rows: number,
+): number {
+  const currentCell = cells.find((c) => CellIdUtils.equals(c.cellId, cellId));
+  if (!currentCell) return 1;
+
+  // Start from current position and check each row until we hit a boundary or collision
+  let maxSpan = 1;
+
+  for (let testRow = row + 1; testRow <= rows; testRow++) {
+    // Check if this row is free for all columns the widget spans
+    let rowIsFree = true;
+
+    for (let testCol = col; testCol < col + currentCell.colSpan; testCol++) {
+      const occupied = cells.some((cell) => {
+        if (CellIdUtils.equals(cell.cellId, cellId)) return false;
+
+        const wStartRow = cell.row;
+        const wEndRow = cell.row + cell.rowSpan - 1;
+        const wStartCol = cell.col;
+        const wEndCol = cell.col + cell.colSpan - 1;
+
+        return (
+          testRow >= wStartRow &&
+          testRow <= wEndRow &&
+          testCol >= wStartCol &&
+          testCol <= wEndCol
+        );
+      });
+
+      if (occupied) {
+        rowIsFree = false;
+        break;
+      }
+    }
+
+    if (!rowIsFree) {
+      break; // Hit a collision, stop here
+    }
+
+    maxSpan = testRow - row + 1; // Update max span to include this row
+  }
+
+  return maxSpan;
+}
+
+export interface ResizeData {
+  cellId: CellId;
+  originalRowSpan: number;
+  originalColSpan: number;
+  previewRowSpan: number;
+  previewColSpan: number;
+}
+
+export function calculateResizePreview(
+  resizeData: ResizeData,
+  direction: 'horizontal' | 'vertical',
+  delta: number,
+  cells: CellData[],
+  rows: number,
+  columns: number,
+): { rowSpan: number; colSpan: number } | null {
+  const cell = cells.find((c) =>
+    CellIdUtils.equals(c.cellId, resizeData.cellId),
+  );
+  if (!cell) return null;
+
+  if (direction === 'horizontal') {
+    // Calculate the desired span based on the delta
+    const desiredColSpan = Math.max(1, resizeData.originalColSpan + delta);
+
+    // Get the maximum allowed span
+    const maxColSpan = getMaxColSpan(
+      cell.cellId,
+      cell.row,
+      cell.col,
+      cells,
+      columns,
+    );
+
+    // Clamp to the maximum
+    const newColSpan = Math.min(desiredColSpan, maxColSpan);
+
+    return {
+      rowSpan: resizeData.previewRowSpan,
+      colSpan: newColSpan,
+    };
+  } else {
+    // Calculate the desired span based on the delta
+    const desiredRowSpan = Math.max(1, resizeData.originalRowSpan + delta);
+
+    // Get the maximum allowed span
+    const maxRowSpan = getMaxRowSpan(
+      cell.cellId,
+      cell.row,
+      cell.col,
+      cells,
+      rows,
+    );
+
+    // Clamp to the maximum
+    const newRowSpan = Math.min(desiredRowSpan, maxRowSpan);
+
+    return {
+      rowSpan: newRowSpan,
+      colSpan: resizeData.previewColSpan,
+    };
+  }
+}