@dragonworks/ngx-dashboard 20.0.4 → 20.0.6

package/src/lib/cell/cell-context-menu.service.ts

@@ -0,0 +1,36 @@
+import { Injectable, signal } from '@angular/core';
+
+export type CellContextMenuItem =
+  | {
+      label: string;
+      icon?: string;  // Material icon name (e.g., 'edit', 'settings', 'delete')
+      action: () => void;
+      disabled?: boolean;
+      divider?: false;
+    }
+  | {
+      divider: true;
+      label?: never;
+      icon?: never;
+      action?: never;
+      disabled?: never;
+    };
+
+@Injectable()
+export class CellContextMenuService {
+  #activeMenu = signal<{
+    x: number;
+    y: number;
+    items: CellContextMenuItem[];
+  } | null>(null);
+
+  activeMenu = this.#activeMenu.asReadonly();
+
+  show(x: number, y: number, items: CellContextMenuItem[]) {
+    this.#activeMenu.set({ x, y, items });
+  }
+
+  hide() {
+    this.#activeMenu.set(null);
+  }
+}

package/src/lib/cell/cell.component.html

@@ -0,0 +1,37 @@
+<!-- cell.component.html -->
+<div
+  class="cell"
+  [class.is-resizing]="isResizing()"
+  [class.flat]="flat() === true"
+  [draggable]="draggable()"
+  (dragstart)="onDragStart($event)"
+  (dragend)="onDragEnd()"
+  (contextmenu)="onContextMenu($event)"
+>
+  <div class="content-area">
+    <ng-template #container></ng-template>
+  </div>
+  @if (isEditMode() && !isDragging()) {
+  <!-- Right resize handle -->
+  <div
+    class="resize-handle resize-handle--right"
+    (mousedown)="onResizeStart($event, 'horizontal')"
+  >
+    <div class="resize-handle-line"></div>
+  </div>
+  <!-- Bottom resize handle -->
+  <div
+    class="resize-handle resize-handle--bottom"
+    (mousedown)="onResizeStart($event, 'vertical')"
+  >
+    <div class="resize-handle-line"></div>
+  </div>
+  }
+</div>
+
+@if (isResizing()) {
+<div class="resize-preview">
+  {{ resizeData()?.previewColSpan ?? colSpan() }} ×
+  {{ resizeData()?.previewRowSpan ?? rowSpan() }}
+</div>
+}

package/src/lib/cell/cell.component.scss

@@ -0,0 +1,198 @@
+// cell.component.sccs
+
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 1;
+  container-type: inline-size; // Enable container queries
+}
+
+// When any drag is active, disable pointer events on non-dragging cells
+// This allows drag events to pass through to drop zones underneath
+:host(.drag-active):not(.is-dragging) {
+  pointer-events: none;
+}
+
+:host(.is-dragging) {
+  z-index: 100; // While dragging
+  opacity: 0.5;
+  pointer-events: none; // Allow drag events to pass through to drop zones
+  
+  // Ensure content area also doesn't block events during drag
+  .content-area {
+    pointer-events: none;
+  }
+}
+
+:host(:hover) .resize-handle {
+  opacity: 1;
+}
+
+.cell {
+  width: 100%;
+  height: 100%;
+  //  background-color: white;
+  border-radius: 4px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  padding: 0;
+  box-sizing: border-box;
+  overflow: hidden;
+  position: relative; // for overlay positioning
+  container-type: inline-size; // enable container queries on cell
+
+  &:hover {
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
+    transform: translateY(-2px);
+  }
+
+  // Flat mode styles
+  &.flat {
+    box-shadow: none;
+    border: none; //1px solid #e0e0e0;
+
+    &:hover {
+      box-shadow: none;
+      transform: none;
+      border-color: #bdbdbd;
+    }
+  }
+
+  // prevent text selection during resize
+  &.resizing {
+    user-select: none;
+  }
+}
+
+.content-area {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  // Ensure widget hover events work independently of cell hover state
+  pointer-events: auto;
+  position: relative;
+  z-index: 1;
+  
+  // Isolate widget content from parent hover effects
+  &:hover {
+    // Reset any inherited hover effects that might interfere with widget hover
+    transform: initial;
+  }
+}
+
+// Ensure flat mode doesn't interfere with widget hover events
+.cell.flat .content-area {
+  // Explicitly ensure widget hover works in flat mode
+  pointer-events: auto;
+  
+  &:hover {
+    // Prevent flat mode hover reset from affecting widget content
+    transform: initial;
+  }
+}
+
+///
+/// Resize stuff
+///
+.resize-handle {
+  position: absolute;
+  z-index: 20;
+  // transition: opacity 0.2s ease;
+
+  &--right {
+    cursor: col-resize;
+    width: 16px;
+    height: 100%;
+    right: -8px;
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+
+    &:hover {
+      opacity: 1;
+
+      .resize-handle-line {
+        background-color: var(--mat-sys-primary-container);
+        // background-color: #2196f3;
+      }
+    }
+  }
+
+  &--bottom {
+    cursor: row-resize;
+    width: 100%;
+    height: 16px;
+    bottom: -8px;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+
+    &:hover {
+      opacity: 1;
+
+      .resize-handle-line {
+        background-color: var(--mat-sys-primary-container);
+        // background-color: #2196f3;
+      }
+    }
+  }
+}
+
+.resize-handle-line {
+  background-color: rgba(0, 0, 0, 0.1);
+  // transition: background-color 0.2s ease;
+
+  .resize-handle--right & {
+    width: 8px;
+    height: 40px;
+    border-radius: 2px;
+  }
+
+  .resize-handle--bottom & {
+    width: 40px;
+    height: 8px;
+    border-radius: 2px;
+  }
+}
+
+.resize-preview {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: var(--mat-sys-primary);
+  color: var(--mat-sys-on-primary);
+
+  // background: rgba(33, 150, 243, 0.9);
+  // color: white;
+  padding: 4px 12px;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  pointer-events: none;
+  z-index: 30;
+}
+
+.cell.is-resizing {
+  opacity: 0.6;
+  .resize-handle {
+    background-color: rgba(33, 150, 243, 0.5);
+  }
+}
+
+// Global cursor classes for resize operations
+// These are applied to document.body to ensure cursor shows everywhere during resize
+:root {
+  .cursor-col-resize {
+    cursor: col-resize !important;
+  }
+
+  .cursor-row-resize {
+    cursor: row-resize !important;
+  }
+}

package/src/lib/cell/cell.component.ts

@@ -0,0 +1,375 @@
+// cell.component.ts
+import {
+  Component,
+  ComponentRef,
+  computed,
+  DestroyRef,
+  effect,
+  inject,
+  input,
+  model,
+  signal,
+  ViewContainerRef,
+  output,
+  ElementRef,
+  viewChild,
+  Renderer2,
+  ChangeDetectionStrategy,
+} from '@angular/core';
+// RxJS removed: Using native DOM events with Renderer2 for performance
+// - Context menu uses template event binding (element-specific)
+// - Resize uses conditional document listeners (only when actively resizing)
+// - Eliminates N*mousemove performance issue with @HostListener approach
+import { CommonModule } from '@angular/common';
+import {
+  CellId,
+  CellIdUtils,
+  WidgetId,
+  DragData,
+  WidgetFactory,
+  Widget,
+} from '../models';
+import { DashboardStore } from '../store/dashboard-store';
+import { CellDisplayData } from '../models';
+import { CELL_SETTINGS_DIALOG_PROVIDER } from '../providers/cell-settings-dialog';
+import { CellContextMenuService, CellContextMenuItem } from './cell-context-menu.service';
+
+@Component({
+  selector: 'lib-cell',
+  standalone: true,
+  imports: [CommonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './cell.component.html',
+  styleUrl: './cell.component.scss',
+  host: {
+    '[style.grid-row]': 'gridRowStyle()',
+    '[style.grid-column]': 'gridColumnStyle()',
+    '[class.is-dragging]': 'isDragging()',
+    '[class.drag-active]': 'isDragActive()',
+    '[class.flat]': 'flat() === true',
+  },
+})
+export class CellComponent {
+  widgetId = input.required<WidgetId>();  // Unique widget instance identifier
+  cellId = input.required<CellId>();       // Current grid position
+  widgetFactory = input<WidgetFactory | undefined>(undefined);
+  widgetState = input<unknown | undefined>(undefined);
+  isEditMode = input<boolean>(false);
+  flat = input<boolean | undefined>(undefined);
+
+  row = model.required<number>();
+  column = model.required<number>();
+  rowSpan = input<number>(1);
+  colSpan = input<number>(1);
+  draggable = input<boolean>(false);
+
+  dragStart = output<DragData>();
+  dragEnd = output<void>();
+
+  edit = output<WidgetId>();
+  delete = output<WidgetId>();
+  settings = output<{ id: WidgetId; flat: boolean }>();
+  resizeStart = output<{ cellId: CellId; direction: 'horizontal' | 'vertical' }>();
+  resizeMove = output<{
+    cellId: CellId;
+    direction: 'horizontal' | 'vertical';
+    delta: number;
+  }>();
+  resizeEnd = output<{ cellId: CellId; apply: boolean }>();
+
+  private container = viewChild.required<ElementRef, ViewContainerRef>(
+    'container',
+    { read: ViewContainerRef }
+  );
+
+  readonly #store = inject(DashboardStore);
+  readonly #dialogProvider = inject(CELL_SETTINGS_DIALOG_PROVIDER);
+  readonly #destroyRef = inject(DestroyRef);
+  readonly #renderer = inject(Renderer2);
+  readonly #contextMenuService = inject(CellContextMenuService, {
+    optional: true,
+  });
+  readonly #elementRef = inject(ElementRef);
+
+  #widgetRef?: ComponentRef<Widget>;
+  
+  // Document event listeners cleanup function
+  // Performance: Only created when actively resizing, not for every cell
+  #documentListeners?: () => void;
+
+  isDragging = signal(false);
+
+  readonly gridRowStyle = computed(
+    () => `${this.row()} / span ${this.rowSpan()}`
+  );
+  readonly gridColumnStyle = computed(
+    () => `${this.column()} / span ${this.colSpan()}`
+  );
+
+  isResizing = computed(() => {
+    const resizeData = this.#store.resizeData();
+    return resizeData
+      ? CellIdUtils.equals(resizeData.cellId, this.cellId())
+      : false;
+  });
+
+  isDragActive = computed(() => !!this.#store.dragData());
+
+  resizeData = this.#store.resizeData;
+  gridCellDimensions = this.#store.gridCellDimensions;
+  private resizeDirection = signal<'horizontal' | 'vertical' | null>(null);
+  private resizeStartPos = signal({ x: 0, y: 0 });
+
+  constructor() {
+    // widget creation - triggers when factory or state changes
+    effect(() => {
+      const factory = this.widgetFactory();
+      const state = this.widgetState();
+      const container = this.container();
+
+      if (factory && container) {
+        // Clean up previous widget
+        this.#widgetRef?.destroy();
+
+        // Create new widget
+        container.clear();
+        try {
+          this.#widgetRef = factory.createInstance(container, state);
+        } catch (error) {
+          console.error('Failed to create widget:', error);
+          this.#widgetRef = undefined;
+        }
+      }
+    });
+
+    // Auto cleanup on destroy
+    this.#destroyRef.onDestroy(() => {
+      this.#widgetRef?.destroy();
+      this.#widgetRef = undefined;
+      // Clean up any active document listeners
+      this.#cleanupDocumentListeners();
+    });
+  }
+
+  /**
+   * Setup document-level event listeners for resize operations
+   * Performance: Only creates listeners when actively resizing (not for every cell)
+   * Angular-idiomatic: Uses Renderer2 for dynamic listener management
+   */
+  private setupDocumentListeners(): void {
+    // Clean up any existing listeners first
+    this.#cleanupDocumentListeners();
+
+    // Create document listeners with proper cleanup functions
+    const unlistenMove = this.#renderer.listen(
+      'document',
+      'mousemove',
+      this.handleResizeMove.bind(this)
+    );
+    const unlistenUp = this.#renderer.listen(
+      'document',
+      'mouseup',
+      this.handleResizeEnd.bind(this)
+    );
+
+    // Store cleanup function for later use
+    this.#documentListeners = () => {
+      unlistenMove();
+      unlistenUp();
+    };
+  }
+
+  /**
+   * Clean up document-level event listeners
+   * Called on resize end and component destruction
+   */
+  #cleanupDocumentListeners(): void {
+    if (this.#documentListeners) {
+      this.#documentListeners();
+      this.#documentListeners = undefined;
+    }
+  }
+
+  setPosition(row: number, column: number): void {
+    this.row.set(row);
+    this.column.set(column);
+  }
+
+  onDragStart(event: DragEvent): void {
+    if (!event.dataTransfer) return;
+    event.dataTransfer.effectAllowed = 'move';
+
+    const cell = {
+      cellId: this.cellId(),
+      widgetId: this.widgetId(),
+      row: this.row(),
+      col: this.column(),
+      rowSpan: this.rowSpan(),
+      colSpan: this.colSpan(),
+    };
+
+    const content: DragData = { kind: 'cell', content: cell };
+    this.dragStart.emit(content);
+    this.isDragging.set(true);
+  }
+
+  onDragEnd(/*_: DragEvent*/): void {
+    this.isDragging.set(false);
+    this.dragEnd.emit();
+  }
+
+  /**
+   * Handle context menu events (called from template)
+   * Performance: Element-specific event binding, not document-level
+   * Angular-idiomatic: Template event binding instead of fromEvent
+   */
+  onContextMenu(event: MouseEvent): void {
+    if (!this.isEditMode() || !this.#contextMenuService) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    const items: CellContextMenuItem[] = [
+      {
+        label: 'Edit Widget',
+        icon: 'edit',
+        action: () => this.onEdit(),
+        disabled: !this.canEdit(),
+      },
+      {
+        label: 'Settings',
+        icon: 'settings',
+        action: () => this.onSettings(),
+      },
+      { divider: true },
+      {
+        label: 'Delete',
+        icon: 'delete',
+        action: () => this.onDelete(),
+      },
+    ];
+
+    // Position menu at exact mouse coordinates
+    this.#contextMenuService.show(event.clientX, event.clientY, items);
+  }
+
+  canEdit(): boolean {
+    if (this.#widgetRef?.instance?.dashboardEditState) {
+      return true;
+    }
+    return false;
+  }
+
+  onEdit(): void {
+    this.edit.emit(this.widgetId());
+
+    // Call the widget's edit dialog method if it exists
+    if (this.#widgetRef?.instance?.dashboardEditState) {
+      this.#widgetRef.instance.dashboardEditState();
+    }
+  }
+
+  onDelete(): void {
+    this.delete.emit(this.widgetId());
+  }
+
+  async onSettings(): Promise<void> {
+    const currentSettings: CellDisplayData = {
+      id: CellIdUtils.toString(this.cellId()),  // Use cellId for display position
+      flat: this.flat(),
+    };
+
+    try {
+      const result = await this.#dialogProvider.openCellSettings(
+        currentSettings
+      );
+
+      if (result) {
+        this.settings.emit({
+          id: this.widgetId(),
+          flat: result.flat ?? false,
+        });
+      }
+    } catch (error) {
+      console.error('Error opening cell settings dialog:', error);
+    }
+  }
+
+  /**
+   * Start resize operation and setup document listeners
+   * Performance: Only THIS cell creates document listeners when actively resizing
+   * RxJS-free: Uses Renderer2 for dynamic listener management
+   */
+  onResizeStart(event: MouseEvent, direction: 'horizontal' | 'vertical'): void {
+    event.preventDefault();
+    event.stopPropagation();
+
+    this.resizeDirection.set(direction);
+    this.resizeStartPos.set({ x: event.clientX, y: event.clientY });
+    this.resizeStart.emit({ cellId: this.cellId(), direction });
+
+    // Setup document listeners only when actively resizing
+    this.setupDocumentListeners();
+
+    const cursorClass =
+      direction === 'horizontal' ? 'cursor-col-resize' : 'cursor-row-resize';
+    this.#renderer.addClass(document.body, cursorClass);
+  }
+
+  /**
+   * Handle resize move events (called from document listener)
+   * Performance: Only called for the actively resizing cell
+   * Bound method: Maintains component context without arrow functions
+   */
+  private handleResizeMove(event: MouseEvent): void {
+    const direction = this.resizeDirection();
+    if (!direction) return;
+
+    const startPos = this.resizeStartPos();
+    const cellSize = this.gridCellDimensions();
+
+    if (direction === 'horizontal') {
+      const deltaX = event.clientX - startPos.x;
+      const deltaSpan = Math.round(deltaX / cellSize.width);
+      this.resizeMove.emit({ cellId: this.cellId(), direction, delta: deltaSpan });
+    } else {
+      const deltaY = event.clientY - startPos.y;
+      const deltaSpan = Math.round(deltaY / cellSize.height);
+      this.resizeMove.emit({ cellId: this.cellId(), direction, delta: deltaSpan });
+    }
+  }
+
+  /**
+   * Handle resize end events (called from document listener)
+   * Performance: Cleans up document listeners immediately after resize
+   * State cleanup: Resets resize direction to stop further event processing
+   */
+  private handleResizeEnd(): void {
+    this.#renderer.removeClass(document.body, 'cursor-col-resize');
+    this.#renderer.removeClass(document.body, 'cursor-row-resize');
+
+    // Clean up document listeners immediately
+    this.#cleanupDocumentListeners();
+
+    this.resizeEnd.emit({ cellId: this.cellId(), apply: true });
+    this.resizeDirection.set(null);
+  }
+
+  /**
+   * Get the current widget state by calling dashboardGetState() on the widget instance.
+   * Used during dashboard export to get live widget state instead of stale stored state.
+   */
+  getCurrentWidgetState(): unknown | undefined {
+    if (!this.#widgetRef?.instance) {
+      return undefined;
+    }
+
+    // Call dashboardGetState() if the widget implements it
+    if (typeof this.#widgetRef.instance.dashboardGetState === 'function') {
+      return this.#widgetRef.instance.dashboardGetState();
+    }
+
+    // Fall back to stored state if widget doesn't implement dashboardGetState
+    return this.widgetState();
+  }
+}

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

@@ -0,0 +1,18 @@
+<!-- dashboard.component.html -->
+<div class="grid-container">
+  @if (editMode()) {
+  <!-- Full editor with drag & drop capabilities -->
+  <ngx-dashboard-editor
+    [rows]="store.rows()"
+    [columns]="store.columns()"
+    [gutterSize]="store.gutterSize()"
+  ></ngx-dashboard-editor>
+  } @else {
+  <!-- Read-only viewer -->
+  <ngx-dashboard-viewer
+    [rows]="store.rows()"
+    [columns]="store.columns()"
+    [gutterSize]="store.gutterSize()"
+  ></ngx-dashboard-viewer>
+  }
+</div>

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

@@ -0,0 +1,17 @@
+/* dashboard.component.scss */
+:host {
+  display: block;
+  container-type: inline-size;
+  box-sizing: border-box;
+  aspect-ratio: var(--columns) / var(--rows);
+  width: 100%;
+  height: auto;
+
+  // background-color: var(--mat-sys-surface-container);
+}
+
+.grid-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}