@dragonworks/ngx-dashboard 20.0.6 → 20.1.0

package/src/lib/dashboard/dashboard.component.ts

@@ -1,187 +0,0 @@
-// dashboard.component.ts
-//
-// A performant, modular, and fully reactive Angular dashboard container that orchestrates between
-// editing and viewing modes — with clean component separation and no external dependencies.
-
-import { CommonModule } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  effect,
-  inject,
-  input,
-  viewChild,
-  DestroyRef,
-  OnChanges,
-  SimpleChanges,
-  untracked,
-  computed,
-} from '@angular/core';
-import { DashboardViewerComponent } from '../dashboard-viewer/dashboard-viewer.component';
-import { DashboardEditorComponent } from '../dashboard-editor/dashboard-editor.component';
-import { DashboardStore } from '../store/dashboard-store';
-import { DashboardDataDto } from '../models/dashboard-data.dto';
-import { DashboardBridgeService } from '../services/dashboard-bridge.service';
-import { DashboardViewportService } from '../services/dashboard-viewport.service';
-import { ReservedSpace } from '../models/reserved-space';
-
-@Component({
-  selector: 'ngx-dashboard',
-  standalone: true,
-  imports: [CommonModule, DashboardViewerComponent, DashboardEditorComponent],
-  providers: [DashboardStore, DashboardViewportService],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './dashboard.component.html',
-  styleUrl: './dashboard.component.scss',
-  host: {
-    '[style.--rows]': 'store.rows()',
-    '[style.--columns]': 'store.columns()',
-    '[style.--gutter-size]': 'store.gutterSize()',
-    '[style.--gutters]': 'store.columns() + 1',
-    '[class.is-edit-mode]': 'editMode()',
-    '[style.max-width.px]': 'viewport.constraints().maxWidth',
-    '[style.max-height.px]': 'viewport.constraints().maxHeight',
-  },
-})
-export class DashboardComponent implements OnChanges {
-  #store = inject(DashboardStore);
-  #bridge = inject(DashboardBridgeService);
-  #viewport = inject(DashboardViewportService);
-  #destroyRef = inject(DestroyRef);
-
-  // Public accessors for template
-  protected readonly store = this.#store;
-  protected readonly viewport = this.#viewport;
-
-  // Component inputs
-  dashboardData = input.required<DashboardDataDto>();
-  editMode = input<boolean>(false);
-  reservedSpace = input<ReservedSpace>();
-
-  // Store signals - shared by both child components
-  cells = this.#store.cells;
-
-  // ViewChild references for export/import functionality
-  private dashboardEditor = viewChild(DashboardEditorComponent);
-  private dashboardViewer = viewChild(DashboardViewerComponent);
-
-  // Track if we're in the middle of preserving states
-  #isPreservingStates = false;
-  // Track if component has been initialized
-  #isInitialized = false;
-
-  constructor() {
-    // Cleanup registration when component is destroyed
-    this.#destroyRef.onDestroy(() => {
-      this.#bridge.unregisterDashboard(this.#store);
-    });
-
-    // Initialize from dashboardData
-    effect(() => {
-      const data = this.dashboardData();
-      if (data) {
-        this.#store.initializeFromDto(data);
-        // Register with bridge service after dashboard ID is set
-        this.#bridge.updateDashboardRegistration(this.#store);
-        this.#isInitialized = true;
-      }
-    });
-
-    // Sync edit mode with store (without triggering state preservation)
-    effect(() => {
-      const editMode = this.editMode();
-      untracked(() => {
-        this.#store.setEditMode(editMode);
-      });
-    });
-
-    // Sync reserved space input with viewport service
-    effect(() => {
-      const reserved = this.reservedSpace();
-      if (reserved) {
-        this.#viewport.setReservedSpace(reserved);
-      }
-    });
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    // Handle edit mode changes after initialization
-    if (
-      changes['editMode'] &&
-      !changes['editMode'].firstChange &&
-      this.#isInitialized
-    ) {
-      const previousValue = changes['editMode'].previousValue;
-      const currentValue = changes['editMode'].currentValue;
-
-      if (previousValue !== currentValue) {
-        // Preserve widget states before the mode switch
-        this.#preserveWidgetStatesBeforeModeSwitch(previousValue);
-      }
-    }
-  }
-
-  // Public export/import methods
-  exportDashboard(): DashboardDataDto {
-    // Delegate to the active child component
-    if (this.editMode()) {
-      const editor = this.dashboardEditor();
-      return editor ? editor.exportDashboard() : this.#store.exportDashboard();
-    } else {
-      const viewer = this.dashboardViewer();
-      return viewer ? viewer.exportDashboard() : this.#store.exportDashboard();
-    }
-  }
-
-  loadDashboard(data: DashboardDataDto): void {
-    this.#store.loadDashboard(data);
-  }
-
-  getCurrentDashboardData(): DashboardDataDto {
-    return this.exportDashboard();
-  }
-
-  clearDashboard(): void {
-    this.#store.clearDashboard();
-  }
-
-  /**
-   * Preserve widget states before switching modes by collecting live states
-   * from the currently active component and updating the store.
-   */
-  #preserveWidgetStatesBeforeModeSwitch(previousEditMode: boolean): void {
-    // Prevent re-entrant calls
-    if (this.#isPreservingStates) {
-      return;
-    }
-
-    this.#isPreservingStates = true;
-
-    try {
-      let currentWidgetStates: Map<string, unknown> | null = null;
-
-      if (previousEditMode) {
-        // Previously in edit mode, collect states from editor
-        const editor = this.dashboardEditor();
-        if (editor) {
-          currentWidgetStates = editor.getCurrentWidgetStates();
-        }
-      } else {
-        // Previously in view mode, collect states from viewer
-        const viewer = this.dashboardViewer();
-        if (viewer) {
-          currentWidgetStates = viewer.getCurrentWidgetStates();
-        }
-      }
-
-      // Update the store with the live widget states using untracked to avoid triggering effects
-      if (currentWidgetStates && currentWidgetStates.size > 0) {
-        untracked(() => {
-          this.#store.updateAllWidgetStates(currentWidgetStates);
-        });
-      }
-    } finally {
-      this.#isPreservingStates = false;
-    }
-  }
-}

package/src/lib/dashboard-editor/dashboard-editor.component.html

@@ -1,57 +0,0 @@
-<!-- dashboard-editor.component.html -->
-<div class="grid-container">
-  <!-- Bottom grid with drop zones -->
-  <div class="grid" id="bottom-grid" #bottomGrid>
-    @for (position of dropzonePositions(); track position.id) {
-    <lib-drop-zone
-      class="drop-zone"
-      [row]="position.row"
-      [col]="position.col"
-      [index]="position.index"
-      [highlight]="highlightMap().has(createCellId(position.row, position.col))"
-      [highlightInvalid]="
-        invalidHighlightMap().has(createCellId(position.row, position.col))
-      "
-      [highlightResize]="
-        resizePreviewMap().has(createCellId(position.row, position.col))
-      "
-      [editMode]="true"
-      (dragEnter)="onDragEnter($event)"
-      (dragExit)="onDragExit()"
-      (dragOver)="onDragOver($event)"
-      (dragDrop)="onDragDrop($event)"
-    ></lib-drop-zone>
-    }
-  </div>
-
-  <!-- Top grid with interactive cells -->
-  <div class="grid" id="top-grid">
-    @for (cell of cells(); track cell.widgetId) {
-    <lib-cell
-      class="grid-cell"
-      [widgetId]="cell.widgetId"
-      [cellId]="cell.cellId"
-      [isEditMode]="true"
-      [draggable]="true"
-      [row]="cell.row"
-      [column]="cell.col"
-      [rowSpan]="cell.rowSpan"
-      [colSpan]="cell.colSpan"
-      [flat]="cell.flat"
-      [widgetFactory]="cell.widgetFactory"
-      [widgetState]="cell.widgetState"
-      (dragStart)="onCellDragStart($event)"
-      (dragEnd)="dragEnd()"
-      (delete)="onCellDelete($event)"
-      (settings)="onCellSettings($event)"
-      (resizeStart)="onCellResizeStart($event)"
-      (resizeMove)="onCellResizeMove($event)"
-      (resizeEnd)="onCellResizeEnd($event)"
-    >
-    </lib-cell>
-    }
-  </div>
-</div>
-
-<!-- Context menu -->
-<lib-cell-context-menu></lib-cell-context-menu>

package/src/lib/dashboard-editor/dashboard-editor.component.scss

@@ -1,87 +0,0 @@
-/* dashboard-editor.component.scss */
-@use "../styles/dashboard-grid-vars" as *;
-
-:host {
-  @include dashboard-grid-vars;
-
-  display: block;
-  container-type: inline-size;
-  box-sizing: border-box;
-  aspect-ratio: var(--columns) / var(--rows);
-  width: 100%;
-  height: auto;
-}
-
-/* ── Grid-line overlay (visual only) ──────────────────────────────── */
-:host .grid {
-  /* Three layers:
-     1) vertical hair-lines (repeat)
-     2) horizontal centred hair-lines (repeat)
-     3) *single* horizontal hair-line flush with the bottom edge (no-repeat) */
-  background-image: linear-gradient(
-      to right,
-      rgba(100 100 100 / 0.12) 1px,
-      transparent 1px
-    ),
-    linear-gradient(to bottom, rgba(100 100 100 / 0.12) 1px, transparent 1px),
-    linear-gradient(to bottom, rgba(100 100 100 / 0.12) 1px, transparent 1px);
-
-  background-size: var(--tile-size) var(--tile-size),
-    /* vertical lines tile */ var(--tile-size) var(--tile-size),
-    /* horizontal centred lines tile */ 100% 1px; /* bottom edge only  */
-
-  background-position: var(--tile-offset) var(--tile-offset),
-    /* vertical-line grid   */ var(--tile-offset) var(--tile-offset),
-    /* horizontal centred   */ bottom; /* bottom hair-line     */
-
-  background-repeat: repeat, repeat, no-repeat;
-
-  // background-color: rgba(245 245 245 / 0.5);
-  //border: 1px solid rgba(245 245 245 / 0.1);
-}
-/* ── Structural wrappers ─────────────────────────────────────────── */
-.grid-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  // background-color: var(--grid-background-color);
-}
-
-/* Real CSS Grid that holds widgets */
-.grid {
-  display: grid;
-  gap: var(--gutter-size);
-  padding: var(--gutter-size);
-
-  position: absolute;
-  inset: 0; /* top/right/bottom/left: 0 */
-
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-
-  align-items: stretch;
-  justify-items: stretch;
-
-  grid-template-columns: repeat(var(--columns), var(--cell-size));
-  grid-template-rows: repeat(var(--rows), var(--cell-size));
-}
-
-/* ── Layering & DnD helpers ──────────────────────────────────────── */
-#bottom-grid {
-  z-index: 1;
-}
-
-#top-grid {
-  z-index: 2;
-  pointer-events: none; /* overlay shouldn’t block interactions */
-}
-
-.grid-cell {
-  pointer-events: auto; /* re-enable for actual content */
-}
-
-.grid-cell.is-dragging {
-  pointer-events: none; /* don’t block drop zones while lifted */
-  opacity: 0.5;
-}

package/src/lib/dashboard-editor/dashboard-editor.component.ts

@@ -1,219 +0,0 @@
-// dashboard-editor.component.ts
-import { CommonModule } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  DestroyRef,
-  effect,
-  ElementRef,
-  inject,
-  input,
-  output,
-  viewChild,
-  viewChildren,
-  afterNextRender,
-} from '@angular/core';
-import { CellComponent } from '../cell/cell.component';
-import { CellContextMenuComponent } from '../cell/cell-context-menu.component';
-import { CellContextMenuService } from '../cell/cell-context-menu.service';
-import { DropZoneComponent } from '../drop-zone/drop-zone.component';
-import { CellId, CellIdUtils, WidgetId, WidgetIdUtils, DragData, CellData } from '../models';
-import { DashboardStore } from '../store/dashboard-store';
-
-@Component({
-  selector: 'ngx-dashboard-editor',
-  standalone: true,
-  imports: [
-    CellComponent,
-    CommonModule,
-    DropZoneComponent,
-    CellContextMenuComponent,
-  ],
-  providers: [
-    CellContextMenuService,
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './dashboard-editor.component.html',
-  styleUrl: './dashboard-editor.component.scss',
-  host: {
-    '[style.--rows]': 'rows()',
-    '[style.--columns]': 'columns()',
-    '[style.--gutter-size]': 'gutterSize()',
-    '[style.--gutters]': 'gutters()',
-    '[class.is-edit-mode]': 'true', // Always in edit mode
-  },
-})
-export class DashboardEditorComponent {
-  bottomGridRef = viewChild.required<ElementRef<HTMLDivElement>>('bottomGrid');
-  dropZones = viewChildren(DropZoneComponent);
-  cellComponents = viewChildren(CellComponent);
-
-  #store = inject(DashboardStore);
-  #destroyRef = inject(DestroyRef);
-  #resizeObserver?: ResizeObserver;
-
-  rows = input.required<number>();
-  columns = input.required<number>();
-  gutterSize = input<string>('1em');
-  gutters = computed(() => this.columns() + 1);
-
-  // store signals
-  cells = this.#store.cells;
-  highlightedZones = this.#store.highlightedZones;
-  highlightMap = this.#store.highlightMap;
-  invalidHighlightMap = this.#store.invalidHighlightMap;
-  hoveredDropZone = this.#store.hoveredDropZone;
-  resizePreviewMap = this.#store.resizePreviewMap;
-
-  // Generate all possible cell positions for the grid
-  dropzonePositions = computed(() => {
-    const positions = [];
-    for (let row = 1; row <= this.rows(); row++) {
-      for (let col = 1; col <= this.columns(); col++) {
-        positions.push({
-          row,
-          col,
-          id: `dropzone-${row}-${col}`,
-          index: (row - 1) * this.columns() + col,
-        });
-      }
-    }
-    return positions;
-  });
-
-  // Helper method for template
-  createCellId(row: number, col: number): CellId {
-    return CellIdUtils.create(row, col);
-  }
-
-  constructor() {
-    // Sync grid configuration with store when inputs change
-    effect(() => {
-      this.#store.setGridConfig({
-        rows: this.rows(),
-        columns: this.columns(),
-        gutterSize: this.gutterSize(),
-      });
-    });
-
-    // Observe grid size after rendering
-    afterNextRender(() => {
-      this.#observeGridSize();
-    });
-
-    // Always set edit mode to true
-    effect(() => {
-      this.#store.setEditMode(true);
-    });
-  }
-
-  #observeGridSize(): void {
-    const gridEl = this.bottomGridRef()?.nativeElement;
-    if (!gridEl || this.#resizeObserver) return;
-
-    this.#resizeObserver = new ResizeObserver(() => {
-      const dropZonesList = this.dropZones();
-      const firstDropZone = dropZonesList[0];
-      if (!firstDropZone) return;
-      const el: HTMLElement = firstDropZone.nativeElement;
-      if (!el) return;
-      const rect = el.getBoundingClientRect();
-
-      const width = rect.width;
-      const height = rect.height;
-
-      this.#store.setGridCellDimensions(width, height);
-    });
-
-    this.#resizeObserver.observe(gridEl);
-
-    // Register cleanup with DestroyRef for automatic memory management
-    this.#destroyRef.onDestroy(() => {
-      this.#resizeObserver?.disconnect();
-      this.#resizeObserver = undefined;
-    });
-  }
-
-  // Pure delegation methods - no business logic in component
-  addWidget = (cellData: CellData) => this.#store.addWidget(cellData);
-
-  updateCellPosition = (id: WidgetId, row: number, column: number) =>
-    this.#store.updateWidgetPosition(id, row, column);
-
-  updateCellSpan = (id: WidgetId, colSpan: number, rowSpan: number) =>
-    this.#store.updateWidgetSpan(id, rowSpan, colSpan);
-
-  updateCellSettings = (id: WidgetId, flat: boolean) =>
-    this.#store.updateCellSettings(id, flat);
-
-  // Pure delegation - drag and drop event handlers
-  onDragOver = (event: { row: number; col: number }) =>
-    this.#store.setHoveredDropZone(event);
-
-  onDragEnter = (event: { row: number; col: number }) => this.onDragOver(event);
-
-  onDragExit = () => this.#store.setHoveredDropZone(null);
-
-  dragEnd = () => this.#store.endDrag();
-
-  // Pure delegation - cell event handlers
-  onCellDelete = (id: WidgetId) => this.#store.removeWidget(id);
-
-  onCellSettings = (event: { id: WidgetId; flat: boolean }) =>
-    this.updateCellSettings(event.id, event.flat);
-
-  onCellResize = (event: { id: WidgetId; rowSpan: number; colSpan: number }) =>
-    this.updateCellSpan(event.id, event.colSpan, event.rowSpan);
-
-  // Handle drag events from cell component
-  onCellDragStart = (dragData: DragData) => this.#store.startDrag(dragData);
-
-  // Handle resize events from cell component
-  onCellResizeStart = (event: {
-    cellId: CellId;
-    direction: 'horizontal' | 'vertical';
-  }) => this.#store.startResize(event.cellId);
-
-  onCellResizeMove = (event: {
-    cellId: CellId;
-    direction: 'horizontal' | 'vertical';
-    delta: number;
-  }) => this.#store.updateResizePreview(event.direction, event.delta);
-
-  onCellResizeEnd = (event: { cellId: CellId; apply: boolean }) =>
-    this.#store.endResize(event.apply);
-
-  // Handle drop events by delegating to store's business logic
-  onDragDrop(event: { data: DragData; target: { row: number; col: number } }) {
-    this.#store.handleDrop(event.data, event.target);
-    // Note: Store handles all validation and error handling internally
-  }
-
-  /**
-   * Get current widget states from all cell components.
-   * Used during dashboard export to get live widget states.
-   */
-  getCurrentWidgetStates(): Map<string, unknown> {
-    const stateMap = new Map<string, unknown>();
-    
-    const cells = this.cellComponents();
-    for (const cell of cells) {
-      const cellId = cell.cellId();
-      const currentState = cell.getCurrentWidgetState();
-      if (currentState !== undefined) {
-        stateMap.set(CellIdUtils.toString(cellId), currentState);
-      }
-    }
-    
-    return stateMap;
-  }
-
-  /**
-   * Export dashboard with live widget states from current component instances.
-   * This ensures the most up-to-date widget states are captured.
-   */
-  exportDashboard() {
-    return this.#store.exportDashboard(() => this.getCurrentWidgetStates());
-  }
-}