@dragonworks/ngx-dashboard 20.0.4 → 20.0.6

package/src/lib/drop-zone/__tests__/drop-zone.component.spec.ts

@@ -0,0 +1,465 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ElementRef } from '@angular/core';
+import { DropZoneComponent } from '../drop-zone.component';
+import { DashboardStore } from '../../store/dashboard-store';
+import { DragData, CellIdUtils, WidgetIdUtils, WidgetMetadata } from '../../models';
+import { DashboardService } from '../../services/dashboard.service';
+
+describe('DropZoneComponent - Focused Regression Tests', () => {
+  let component: DropZoneComponent;
+  let fixture: ComponentFixture<DropZoneComponent>;
+  let store: InstanceType<typeof DashboardStore>;
+  let dashboardService: jasmine.SpyObj<DashboardService>;
+
+  const testWidgetMetadata: WidgetMetadata = {
+    widgetTypeid: 'test-widget',
+    name: 'Test Widget',
+    description: 'A test widget',
+    svgIcon: '<svg></svg>'
+  };
+
+  const cellDragData: DragData = {
+    kind: 'cell',
+    content: {
+      cellId: CellIdUtils.create(2, 2),
+      widgetId: WidgetIdUtils.generate(),
+      row: 2,
+      col: 2,
+      rowSpan: 1,
+      colSpan: 1
+    }
+  };
+
+  const widgetDragData: DragData = {
+    kind: 'widget',
+    content: testWidgetMetadata
+  };
+
+  beforeEach(async () => {
+    const spy = jasmine.createSpyObj('DashboardService', ['getFactory']);
+
+    await TestBed.configureTestingModule({
+      imports: [DropZoneComponent],
+      providers: [
+        DashboardStore,
+        { provide: DashboardService, useValue: spy }
+      ]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DropZoneComponent);
+    component = fixture.componentInstance;
+    store = TestBed.inject(DashboardStore);
+    dashboardService = TestBed.inject(DashboardService) as jasmine.SpyObj<DashboardService>;
+    
+    // Set required inputs
+    fixture.componentRef.setInput('row', 3);
+    fixture.componentRef.setInput('col', 4);
+    fixture.componentRef.setInput('index', 12);
+    
+    fixture.detectChanges();
+  });
+
+  describe('Critical Drag & Drop Event Handling', () => {
+    it('should prevent default and stop propagation on dragenter', () => {
+      const event = new DragEvent('dragenter', { bubbles: true });
+      spyOn(event, 'preventDefault');
+      spyOn(event, 'stopPropagation');
+      
+      component.onDragEnter(event);
+      
+      expect(event.preventDefault).toHaveBeenCalled();
+      expect(event.stopPropagation).toHaveBeenCalled();
+    });
+
+    it('should prevent default and stop propagation on dragover', () => {
+      const event = new DragEvent('dragover', { bubbles: true });
+      Object.defineProperty(event, 'dataTransfer', {
+        value: { dropEffect: 'none' }
+      });
+      spyOn(event, 'preventDefault');
+      spyOn(event, 'stopPropagation');
+      
+      component.onDragOver(event);
+      
+      expect(event.preventDefault).toHaveBeenCalled();
+      expect(event.stopPropagation).toHaveBeenCalled();
+    });
+
+    it('should prevent default and stop propagation on dragleave', () => {
+      const event = new DragEvent('dragleave', { bubbles: true });
+      spyOn(event, 'preventDefault');
+      spyOn(event, 'stopPropagation');
+      
+      component.onDragLeave(event);
+      
+      expect(event.preventDefault).toHaveBeenCalled();
+      expect(event.stopPropagation).toHaveBeenCalled();
+    });
+
+    it('should prevent default and stop propagation on drop', () => {
+      const event = new DragEvent('drop', { bubbles: true });
+      Object.defineProperty(event, 'dataTransfer', {
+        value: {}
+      });
+      spyOn(event, 'preventDefault');
+      spyOn(event, 'stopPropagation');
+      
+      component.onDrop(event);
+      
+      expect(event.preventDefault).toHaveBeenCalled();
+      expect(event.stopPropagation).toHaveBeenCalled();
+    });
+
+    it('should return move drop effect for cell drag data', () => {
+      store.startDrag(cellDragData);
+      fixture.detectChanges();
+      
+      expect(component.dropEffect()).toBe('move');
+    });
+
+    it('should return copy drop effect for widget drag data', () => {
+      store.startDrag(widgetDragData);
+      fixture.detectChanges();
+      
+      expect(component.dropEffect()).toBe('copy');
+    });
+
+    it('should return none drop effect for invalid drops', () => {
+      store.endDrag();
+      fixture.componentRef.setInput('highlightInvalid', true);
+      fixture.detectChanges();
+      
+      expect(component.dropEffect()).toBe('none');
+    });
+
+    it('should return none drop effect when no drag data', () => {
+      store.endDrag();
+      fixture.detectChanges();
+      
+      expect(component.dropEffect()).toBe('none');
+    });
+
+    it('should detect when mouse leaves element boundaries through dragExit behavior', () => {
+      spyOn(component.dragExit, 'emit');
+      const mockBoundingRect = {
+        left: 100,
+        right: 200,
+        top: 50,
+        bottom: 150
+      };
+      spyOn(component.nativeElement, 'getBoundingClientRect').and.returnValue(mockBoundingRect as DOMRect);
+      
+      // Mouse outside left boundary - should emit dragExit
+      const event1 = new DragEvent('dragleave', { clientX: 90, clientY: 100 });
+      component.onDragLeave(event1);
+      expect(component.dragExit.emit).toHaveBeenCalled();
+      
+      // Reset spy
+      (component.dragExit.emit as jasmine.Spy).calls.reset();
+      
+      // Mouse inside boundaries - should not emit dragExit
+      const event2 = new DragEvent('dragleave', { clientX: 150, clientY: 100 });
+      component.onDragLeave(event2);
+      expect(component.dragExit.emit).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Output Event Emission', () => {
+    it('should emit dragEnter with correct row and col data', () => {
+      spyOn(component.dragEnter, 'emit');
+      const event = new DragEvent('dragenter');
+      
+      component.onDragEnter(event);
+      
+      expect(component.dragEnter.emit).toHaveBeenCalledWith({ row: 3, col: 4 });
+    });
+
+    it('should emit dragOver with correct row and col data', () => {
+      spyOn(component.dragOver, 'emit');
+      const event = new DragEvent('dragover');
+      Object.defineProperty(event, 'dataTransfer', {
+        value: { dropEffect: 'none' }
+      });
+      
+      component.onDragOver(event);
+      
+      expect(component.dragOver.emit).toHaveBeenCalledWith({ row: 3, col: 4 });
+    });
+
+    it('should emit dragDrop with correct data structure when drag data exists', () => {
+      spyOn(component.dragDrop, 'emit');
+      store.startDrag(cellDragData);
+      fixture.detectChanges();
+      
+      const event = new DragEvent('drop');
+      Object.defineProperty(event, 'dataTransfer', {
+        value: {}
+      });
+      
+      component.onDrop(event);
+      
+      expect(component.dragDrop.emit).toHaveBeenCalledWith({
+        data: cellDragData,
+        target: { row: 3, col: 4 }
+      });
+    });
+
+    it('should not emit dragDrop when no drag data exists', () => {
+      spyOn(component.dragDrop, 'emit');
+      store.endDrag();
+      fixture.detectChanges();
+      
+      const event = new DragEvent('drop');
+      Object.defineProperty(event, 'dataTransfer', {
+        value: {}
+      });
+      
+      component.onDrop(event);
+      
+      expect(component.dragDrop.emit).not.toHaveBeenCalled();
+    });
+
+    it('should not emit dragDrop when dataTransfer is missing', () => {
+      spyOn(component.dragDrop, 'emit');
+      store.startDrag(cellDragData);
+      fixture.detectChanges();
+      
+      const event = new DragEvent('drop');
+      
+      component.onDrop(event);
+      
+      expect(component.dragDrop.emit).not.toHaveBeenCalled();
+    });
+
+    it('should emit dragExit only when actually leaving element', () => {
+      spyOn(component.dragExit, 'emit');
+      const mockBoundingRect = {
+        left: 100,
+        right: 200,
+        top: 50,
+        bottom: 150
+      };
+      spyOn(component.nativeElement, 'getBoundingClientRect').and.returnValue(mockBoundingRect as DOMRect);
+      
+      // Mouse outside boundaries - should emit
+      const event = new DragEvent('dragleave', { clientX: 90, clientY: 100 });
+      component.onDragLeave(event);
+      
+      expect(component.dragExit.emit).toHaveBeenCalled();
+    });
+
+    it('should not emit dragExit when not leaving element', () => {
+      spyOn(component.dragExit, 'emit');
+      const mockBoundingRect = {
+        left: 100,
+        right: 200,
+        top: 50,
+        bottom: 150
+      };
+      spyOn(component.nativeElement, 'getBoundingClientRect').and.returnValue(mockBoundingRect as DOMRect);
+      
+      // Mouse inside boundaries - should not emit
+      const event = new DragEvent('dragleave', { clientX: 150, clientY: 100 });
+      component.onDragLeave(event);
+      
+      expect(component.dragExit.emit).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Visual State Management', () => {
+    it('should apply highlight class when highlight is true and highlightInvalid is false', () => {
+      fixture.componentRef.setInput('highlight', true);
+      fixture.componentRef.setInput('highlightInvalid', false);
+      fixture.detectChanges();
+      
+      const dropZone = fixture.nativeElement.querySelector('.drop-zone');
+      expect(dropZone.classList).toContain('drop-zone--highlight');
+    });
+
+    it('should not apply highlight class when highlightInvalid is true', () => {
+      fixture.componentRef.setInput('highlight', true);
+      fixture.componentRef.setInput('highlightInvalid', true);
+      fixture.detectChanges();
+      
+      const dropZone = fixture.nativeElement.querySelector('.drop-zone');
+      expect(dropZone.classList).not.toContain('drop-zone--highlight');
+    });
+
+    it('should apply invalid class when highlightInvalid is true', () => {
+      fixture.componentRef.setInput('highlightInvalid', true);
+      fixture.detectChanges();
+      
+      const dropZone = fixture.nativeElement.querySelector('.drop-zone');
+      expect(dropZone.classList).toContain('drop-zone--invalid');
+    });
+
+    it('should apply resize class when highlightResize is true', () => {
+      fixture.componentRef.setInput('highlightResize', true);
+      fixture.detectChanges();
+      
+      const dropZone = fixture.nativeElement.querySelector('.drop-zone');
+      expect(dropZone.classList).toContain('drop-zone--resize');
+    });
+
+    it('should display edit mode cell numbers with correct values', () => {
+      fixture.componentRef.setInput('editMode', true);
+      fixture.detectChanges();
+      
+      const cellNumber = fixture.nativeElement.querySelector('.edit-mode-cell-number');
+      expect(cellNumber).toBeTruthy();
+      expect(cellNumber.textContent.trim()).toBe('12 3,4');
+    });
+
+    it('should not display edit mode cell numbers when editMode is false', () => {
+      fixture.componentRef.setInput('editMode', false);
+      fixture.detectChanges();
+      
+      const cellNumber = fixture.nativeElement.querySelector('.edit-mode-cell-number');
+      expect(cellNumber).toBeFalsy();
+    });
+  });
+
+  describe('Integration & Edge Cases', () => {
+    it('should correctly read dragData from store', () => {
+      store.startDrag(cellDragData);
+      fixture.detectChanges();
+      
+      expect(component.dragData()).toEqual(cellDragData);
+    });
+
+    it('should handle null dragData gracefully', () => {
+      store.endDrag();
+      fixture.detectChanges();
+      
+      expect(component.dragData()).toBeNull();
+      expect(component.dropEffect()).toBe('none');
+    });
+
+    it('should set dataTransfer dropEffect on dragover when drag data exists', () => {
+      store.startDrag(cellDragData);
+      fixture.detectChanges();
+      
+      const mockDataTransfer = { dropEffect: 'none' };
+      const event = new DragEvent('dragover');
+      Object.defineProperty(event, 'dataTransfer', {
+        value: mockDataTransfer
+      });
+      
+      component.onDragOver(event);
+      
+      expect(mockDataTransfer.dropEffect).toBe('move');
+    });
+
+    it('should not set dataTransfer dropEffect when no drag data', () => {
+      store.endDrag();
+      fixture.detectChanges();
+      
+      const mockDataTransfer = { dropEffect: 'copy' };
+      const event = new DragEvent('dragover');
+      Object.defineProperty(event, 'dataTransfer', {
+        value: mockDataTransfer
+      });
+      
+      component.onDragOver(event);
+      
+      expect(mockDataTransfer.dropEffect).toBe('copy'); // Should remain unchanged
+    });
+
+    it('should generate unique dropZoneId', () => {
+      expect(component.dropZoneId()).toBe('drop-zone-3-4');
+    });
+
+    it('should provide correct dropData object', () => {
+      expect(component.dropData()).toEqual({ row: 3, col: 4 });
+    });
+
+    it('should handle rapid drag events without state corruption', () => {
+      spyOn(component.dragEnter, 'emit');
+      spyOn(component.dragExit, 'emit');
+      
+      const mockBoundingRect = {
+        left: 100,
+        right: 200,
+        top: 50,
+        bottom: 150
+      };
+      spyOn(component.nativeElement, 'getBoundingClientRect').and.returnValue(mockBoundingRect as DOMRect);
+      
+      const enterEvent = new DragEvent('dragenter');
+      const leaveEvent = new DragEvent('dragleave', { clientX: 90, clientY: 100 }); // Outside bounds
+      
+      // Rapid fire events
+      component.onDragEnter(enterEvent);
+      component.onDragLeave(leaveEvent);
+      component.onDragEnter(enterEvent);
+      component.onDragLeave(leaveEvent);
+      
+      expect(component.dragEnter.emit).toHaveBeenCalledTimes(2);
+      expect(component.dragExit.emit).toHaveBeenCalledTimes(2);
+    });
+
+    it('should handle drag events in correct sequence', () => {
+      spyOn(component.dragEnter, 'emit');
+      spyOn(component.dragOver, 'emit');
+      spyOn(component.dragExit, 'emit');
+      spyOn(component.dragDrop, 'emit');
+      
+      const mockBoundingRect = {
+        left: 100,
+        right: 200,
+        top: 50,
+        bottom: 150
+      };
+      spyOn(component.nativeElement, 'getBoundingClientRect').and.returnValue(mockBoundingRect as DOMRect);
+      
+      store.startDrag(cellDragData);
+      fixture.detectChanges();
+      
+      const enterEvent = new DragEvent('dragenter');
+      const overEvent = new DragEvent('dragover');
+      Object.defineProperty(overEvent, 'dataTransfer', {
+        value: { dropEffect: 'none' }
+      });
+      const dropEvent = new DragEvent('drop');
+      Object.defineProperty(dropEvent, 'dataTransfer', {
+        value: {}
+      });
+      const leaveEvent = new DragEvent('dragleave', { clientX: 90, clientY: 100 }); // Outside bounds
+      
+      component.onDragEnter(enterEvent);
+      component.onDragOver(overEvent);
+      component.onDrop(dropEvent);
+      component.onDragLeave(leaveEvent);
+      
+      expect(component.dragEnter.emit).toHaveBeenCalledWith({ row: 3, col: 4 });
+      expect(component.dragOver.emit).toHaveBeenCalledWith({ row: 3, col: 4 });
+      expect(component.dragDrop.emit).toHaveBeenCalledWith({
+        data: cellDragData,
+        target: { row: 3, col: 4 }
+      });
+      expect(component.dragExit.emit).toHaveBeenCalled();
+    });
+  });
+
+  describe('Grid Positioning', () => {
+    it('should apply correct grid positioning styles', () => {
+      fixture.detectChanges();
+      
+      const dropZone = fixture.nativeElement.querySelector('.drop-zone');
+      expect(dropZone.style.gridRow).toBe('3');
+      expect(dropZone.style.gridColumn).toBe('4');
+    });
+
+    it('should update positioning when inputs change', () => {
+      fixture.componentRef.setInput('row', 5);
+      fixture.componentRef.setInput('col', 6);
+      fixture.detectChanges();
+      
+      const dropZone = fixture.nativeElement.querySelector('.drop-zone');
+      expect(dropZone.style.gridRow).toBe('5');
+      expect(dropZone.style.gridColumn).toBe('6');
+      expect(component.dropZoneId()).toBe('drop-zone-5-6');
+      expect(component.dropData()).toEqual({ row: 5, col: 6 });
+    });
+  });
+});

package/src/lib/drop-zone/drop-zone.component.html

@@ -0,0 +1,20 @@
+<!-- drop-zone.component.html -->
+<div
+  class="drop-zone"
+  [class.drop-zone--highlight]="highlight() && !highlightInvalid()"
+  [class.drop-zone--invalid]="highlightInvalid()"
+  [class.drop-zone--resize]="highlightResize()"
+  [style.grid-row]="row()"
+  [style.grid-column]="col()"
+  (dragenter)="onDragEnter($event)"
+  (dragover)="onDragOver($event)"
+  (dragleave)="onDragLeave($event)"
+  (drop)="onDrop($event)"
+>
+  @if (editMode()) {
+    <div class="edit-mode-cell-number">
+      {{ index() }}<br />
+      {{ row() }},{{ col() }}
+    </div>
+  }
+</div>

package/src/lib/drop-zone/drop-zone.component.scss

@@ -0,0 +1,67 @@
+// drop-zone.component.scss
+
+.drop-zone {
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+
+  // Ensure proper alignment when explicitly positioned in CSS Grid
+  align-self: stretch;
+  justify-self: stretch;
+
+  // Ensure the drop zone takes up the full grid area
+  display: block;
+  box-sizing: border-box;
+}
+
+.drop-zone--active {
+  background-color: rgba(128, 128, 128, 0.5);
+  // background-color: var(--mat-sys-surface-dim);
+}
+
+.drop-zone--highlight {
+  background-color: rgba(128, 128, 128, 0.5);
+  // background-color: var(--mat-sys-surface-dim);
+}
+
+.drop-zone--invalid {
+  // background-color: var(--mat-sys-error);
+  // background-color: color-mix(in srgb, var(--mat-sys-error) 50%, transparent);
+  //background-color: rgba(255, 0, 0, 0.2);
+
+  background-color: light-dark(
+    color-mix(in srgb, var(--mat-sys-error) 40%, white),
+    color-mix(in srgb, var(--mat-sys-error) 80%, black)
+  );
+}
+
+.drop-zone--resize {
+  background-color: rgba(33, 150, 243, 0.3);
+  outline: 1px solid rgba(33, 150, 243, 0.6);
+}
+
+// Edit mode cell numbers - centered in cell
+.edit-mode-cell-number {
+  // Text styling
+  font-size: 10px;
+  // color: var(-mat-sys-surface-container-highest);
+  color: rgba(100, 100, 100, 0.6);
+  // color: color-mix(in srgb, var(--mat-sys-surface-on-dim) 40%, transparent);
+
+  pointer-events: none;
+  user-select: none;
+  z-index: -1;
+
+  // Center in cell
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+
+  // Take up entire cell area
+  width: 100%;
+  height: 100%;
+
+  // background-color: rgba(255, 255, 255, 0.1);
+}

package/src/lib/drop-zone/drop-zone.component.ts

@@ -0,0 +1,122 @@
+// drop-zone.component.ts
+import {
+  Component,
+  ElementRef,
+  inject,
+  input,
+  output,
+  computed,
+  ChangeDetectionStrategy,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DashboardStore } from '../store/dashboard-store';
+import { DragData } from '../models';
+
+@Component({
+  selector: 'lib-drop-zone',
+  standalone: true,
+  imports: [CommonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './drop-zone.component.html',
+  styleUrl: './drop-zone.component.scss',
+})
+export class DropZoneComponent {
+  // Required inputs
+  row = input.required<number>();
+  col = input.required<number>();
+  index = input.required<number>();
+
+  // Optional inputs with defaults
+  highlight = input(false);
+  highlightInvalid = input(false);
+  highlightResize = input(false);
+  editMode = input(false);
+
+  // Outputs
+  dragEnter = output<{ row: number; col: number }>();
+  dragExit = output<void>();
+  dragOver = output<{ row: number; col: number }>();
+  dragDrop = output<{
+    data: DragData;
+    target: { row: number; col: number };
+  }>();
+
+  // Computed properties
+  dropZoneId = computed(() => `drop-zone-${this.row()}-${this.col()}`);
+
+  dropData = computed(() => ({
+    row: this.row(),
+    col: this.col(),
+  }));
+
+  // Abstract drag state from store
+  dragData = computed(() => this.#store.dragData());
+  
+  // Computed drop effect based on drag data and validity
+  dropEffect = computed(() => {
+    const data = this.dragData();
+    if (!data || this.highlightInvalid()) {
+      return 'none';
+    }
+    return data.kind === 'cell' ? 'move' : 'copy';
+  });
+
+  readonly #store = inject(DashboardStore);
+  readonly #elementRef = inject(ElementRef);
+
+  get nativeElement(): HTMLElement {
+    return this.#elementRef.nativeElement;
+  }
+
+  onDragEnter(event: DragEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this.dragEnter.emit({ row: this.row(), col: this.col() });
+  }
+
+  onDragOver(event: DragEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (event.dataTransfer && this.dragData()) {
+      event.dataTransfer.dropEffect = this.dropEffect();
+    }
+
+    this.dragOver.emit({ row: this.row(), col: this.col() });
+  }
+
+  onDragLeave(event: DragEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+
+    // Only emit if actually leaving the element (not entering a child)
+    if (this.#isLeavingElement(event)) {
+      this.dragExit.emit();
+    }
+  }
+
+  #isLeavingElement(event: DragEvent): boolean {
+    const rect = this.#elementRef.nativeElement.getBoundingClientRect();
+    return (
+      event.clientX <= rect.left ||
+      event.clientX >= rect.right ||
+      event.clientY <= rect.top ||
+      event.clientY >= rect.bottom
+    );
+  }
+
+  onDrop(event: DragEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (!event.dataTransfer) return;
+
+    const data = this.dragData();
+    if (data) {
+      this.dragDrop.emit({
+        data,
+        target: { row: this.row(), col: this.col() },
+      });
+    }
+  }
+}