argent-grid 0.1.0

package/src/lib/components/argent-grid.component.html

@@ -0,0 +1,320 @@
+<div class="argent-grid-container" [style.height]="height" [style.width]="width" (click)="onContainerClick($event)">
+  <div class="argent-grid-main-layout">
+    <div class="argent-grid-content-area">
+      <!-- Header Layer (DOM-based for accessibility) -->
+      <div class="argent-grid-header">
+        <!-- Main Header Row -->
+        <div class="argent-grid-header-row">
+          <!-- Selection Column Header -->
+          <div
+            *ngIf="showSelectionColumn"
+            class="argent-grid-header-cell argent-grid-selection-header"
+            [style.width.px]="selectionColumnWidth"
+            (click)="onSelectionHeaderClick()">
+            <input type="checkbox"
+                   [checked]="isAllSelected"
+                   [indeterminate]="isIndeterminateSelection"
+                   (change)="onSelectionHeaderChange($event)" />
+          </div>
+        
+          <!-- Left Pinned Columns -->
+          <div class="argent-grid-header-pinned-left-container"
+               cdkDropList
+               id="left-pinned"
+               [cdkDropListConnectedTo]="['scrollable', 'right-pinned']"
+               cdkDropListOrientation="horizontal"
+               (cdkDropListDropped)="onColumnDropped($event, 'left')">
+            <div
+              *ngFor="let col of getLeftPinnedColumns(); trackBy: trackByColumn"
+              class="argent-grid-header-cell argent-grid-header-cell-pinned-left"
+              [style.width.px]="getColumnWidth(col)"
+              [class.sortable]="isSortable(col)"
+              (click)="onHeaderClick(col)"
+              cdkDrag
+              [cdkDragData]="col">
+              <div class="argent-grid-header-content" cdkDragHandle>
+                <span class="header-text">{{ getHeaderName(col) }}</span>
+                <span class="sort-indicator" *ngIf="getSortIndicator(col)">{{ getSortIndicator(col) }}</span>
+              </div>
+              <div class="argent-grid-header-menu-icon" (click)="onHeaderMenuClick($event, col)" *ngIf="hasHeaderMenu(col)">
+                &#8942;
+              </div>
+              <div class="argent-grid-header-resize-handle" 
+                   *ngIf="isResizable(col)" 
+                   [class.resizing]="isResizing && resizeColumn === col"
+                   (mousedown)="onResizeMouseDown($event, col)">
+              </div>
+            </div>
+          </div>
+          
+          <!-- Scrollable Columns -->
+          <div class="argent-grid-header-scrollable"
+               #headerScrollable
+               cdkDropList
+               id="scrollable"
+               [cdkDropListConnectedTo]="['left-pinned', 'right-pinned']"
+               cdkDropListOrientation="horizontal"
+               (cdkDropListDropped)="onColumnDropped($event, 'none')">
+            <div class="argent-grid-header-row">
+              <div
+                *ngFor="let col of getNonPinnedColumns(); trackBy: trackByColumn"
+                class="argent-grid-header-cell"
+                [style.width.px]="getColumnWidth(col)"
+                [class.sortable]="isSortable(col)"
+                (click)="onHeaderClick(col)"
+                cdkDrag
+                [cdkDragData]="col">
+                <div class="argent-grid-header-content" cdkDragHandle>
+                  <span class="header-text">{{ getHeaderName(col) }}</span>
+                  <span class="sort-indicator" *ngIf="getSortIndicator(col)">{{ getSortIndicator(col) }}</span>
+                </div>
+                <div class="argent-grid-header-menu-icon" (click)="onHeaderMenuClick($event, col)" *ngIf="hasHeaderMenu(col)">
+                  &#8942;
+                </div>
+                <div class="argent-grid-header-resize-handle" 
+                     *ngIf="isResizable(col)" 
+                     [class.resizing]="isResizing && resizeColumn === col"
+                     (mousedown)="onResizeMouseDown($event, col)">
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Right Pinned Columns -->
+          <div class="argent-grid-header-pinned-right-container"
+               cdkDropList
+               id="right-pinned"
+               [cdkDropListConnectedTo]="['left-pinned', 'scrollable']"
+               cdkDropListOrientation="horizontal"
+               (cdkDropListDropped)="onColumnDropped($event, 'right')">
+            <div
+              *ngFor="let col of getRightPinnedColumns(); trackBy: trackByColumn"
+              class="argent-grid-header-cell argent-grid-header-cell-pinned-right"
+              [style.width.px]="getColumnWidth(col)"
+              [class.sortable]="isSortable(col)"
+              (click)="onHeaderClick(col)"
+              cdkDrag
+              [cdkDragData]="col">
+              <div class="argent-grid-header-content" cdkDragHandle>
+                <span class="header-text">{{ getHeaderName(col) }}</span>
+                <span class="sort-indicator" *ngIf="getSortIndicator(col)">{{ getSortIndicator(col) }}</span>
+              </div>
+              <div class="argent-grid-header-menu-icon" (click)="onHeaderMenuClick($event, col)" *ngIf="hasHeaderMenu(col)">
+                &#8942;
+              </div>
+              <div class="argent-grid-header-resize-handle" 
+                   *ngIf="isResizable(col)" 
+                   [class.resizing]="isResizing && resizeColumn === col"
+                   (mousedown)="onResizeMouseDown($event, col)">
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Floating Filter Row -->
+        <div class="argent-grid-header-row floating-filter-row" *ngIf="hasFloatingFilters()">
+          <!-- Selection Column Padding -->
+          <div *ngIf="showSelectionColumn" class="argent-grid-header-cell" [style.width.px]="selectionColumnWidth"></div>
+
+          <!-- Left Pinned Filters -->
+          <div class="argent-grid-header-pinned-left-container">
+            <div
+              *ngFor="let col of getLeftPinnedColumns(); trackBy: trackByColumn"
+              class="argent-grid-header-cell argent-grid-header-cell-pinned-left"
+              [style.width.px]="getColumnWidth(col)">
+              <div class="floating-filter-container" *ngIf="isFloatingFilterEnabled(col)">
+                <input #filterInput
+                       class="floating-filter-input"
+                       [type]="getFilterInputType(col)"
+                       [value]="getFloatingFilterValue(col)"
+                       (input)="onFloatingFilterInput($event, col)"
+                       [placeholder]="'Filter...'" />
+                <span class="floating-filter-clear"
+                      *ngIf="hasFilterValue(col, filterInput)"
+                      (click)="clearFloatingFilter(col, filterInput)">✕</span>
+              </div>
+            </div>
+          </div>
+
+          <!-- Scrollable Filters -->
+          <div class="argent-grid-header-scrollable" #headerScrollableFilter>
+            <div class="argent-grid-header-row">
+              <div
+                *ngFor="let col of getNonPinnedColumns(); trackBy: trackByColumn"
+                class="argent-grid-header-cell"
+                [style.width.px]="getColumnWidth(col)">
+                <div class="floating-filter-container" *ngIf="isFloatingFilterEnabled(col)">
+                  <input #filterInput
+                         class="floating-filter-input"
+                         [type]="getFilterInputType(col)"
+                         [value]="getFloatingFilterValue(col)"
+                         (input)="onFloatingFilterInput($event, col)"
+                         [placeholder]="'Filter...'" />
+                  <span class="floating-filter-clear"
+                        *ngIf="hasFilterValue(col, filterInput)"
+                        (click)="clearFloatingFilter(col, filterInput)">✕</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Right Pinned Filters -->
+          <div class="argent-grid-header-pinned-right-container">
+            <div
+              *ngFor="let col of getRightPinnedColumns(); trackBy: trackByColumn"
+              class="argent-grid-header-cell argent-grid-header-cell-pinned-right"
+              [style.width.px]="getColumnWidth(col)">
+              <div class="floating-filter-container" *ngIf="isFloatingFilterEnabled(col)">
+                <input #filterInput
+                       class="floating-filter-input"
+                       [type]="getFilterInputType(col)"
+                       [value]="getFloatingFilterValue(col)"
+                       (input)="onFloatingFilterInput($event, col)"
+                       [placeholder]="'Filter...'" />
+                <span class="floating-filter-clear"
+                      *ngIf="hasFilterValue(col, filterInput)"
+                      (click)="clearFloatingFilter(col, filterInput)">✕</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Canvas Layer for Data Viewport with virtual scrolling -->
+      <div class="argent-grid-viewport" #viewport>
+        <!-- Spacer to create scrollbars for virtual scrolling -->
+        <div class="argent-grid-scroll-spacer" [style.height.px]="totalHeight" [style.width.px]="totalWidth"></div>
+        
+        <canvas #gridCanvas class="argent-grid-canvas" (contextmenu)="onCanvasContextMenu($event)"></canvas>
+        
+        <!-- Cell Editor Overlay -->
+        <div class="argent-grid-cell-editor" 
+             *ngIf="isEditing"
+             [style.top.px]="editorPosition.y"
+             [style.left.px]="editorPosition.x"
+             [style.width.px]="editorPosition.width"
+             [style.height.px]="editorPosition.height"
+             (click)="$event.stopPropagation()">
+          <input #editorInput
+                 type="text"
+                 class="argent-grid-editor-input"
+                 [value]="editingValue"
+                 (input)="onEditorInput($event)"
+                 (keydown)="onEditorKeydown($event)"
+                 (blur)="onEditorBlur()"
+                 autofocus />
+        </div>
+      </div>
+    </div>
+
+    <!-- Side Bar / Tool Panels -->
+    <div class="argent-grid-side-bar" *ngIf="sideBarVisible" [class.has-active-panel]="!!activeToolPanel">
+      <div class="side-bar-buttons">
+        <div class="side-bar-button" [class.active]="activeToolPanel === 'columns'" (click)="toggleToolPanel('columns')">
+          Columns
+        </div>
+        <div class="side-bar-button" [class.active]="activeToolPanel === 'filters'" (click)="toggleToolPanel('filters')">
+          Filters
+        </div>
+      </div>
+      
+      <div class="tool-panel-content" *ngIf="activeToolPanel">
+        <!-- Columns Tool Panel -->
+        <div class="columns-tool-panel" *ngIf="activeToolPanel === 'columns'">
+          <h3>Columns</h3>
+            <div class="column-list" 
+               cdkDropList 
+               (cdkDropListDropped)="onSidebarColumnDropped($event)">
+            <div *ngFor="let col of getAllColumns()" 
+                 class="column-item" 
+                 cdkDrag
+                 [cdkDragData]="col">
+              <div *cdkDragPreview class="sidebar-drag-preview">
+                <span class="column-drag-handle">⠿</span>
+                <span>{{ getHeaderName(col) }}</span>
+              </div>
+              <div *cdkDragPlaceholder class="sidebar-drag-placeholder"></div>
+              
+              <span class="column-drag-handle" cdkDragHandle>⠿</span>
+              <input type="checkbox" [checked]="col.visible" (change)="toggleColumnVisibility(col)" />
+              <span class="column-label">{{ getHeaderName(col) }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Filters Tool Panel -->
+        <div class="filters-tool-panel" *ngIf="activeToolPanel === 'filters'">
+          <h3>Filters</h3>
+          <div class="filter-placeholder">
+            Filters coming soon...
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Overlay for loading/no rows -->
+  <div class="argent-grid-overlay" *ngIf="showOverlay">
+    <ng-content select="[overlay]"></ng-content>
+  </div>
+
+  <!-- Header Menu Overlay -->
+  <div class="argent-grid-header-menu" 
+       *ngIf="activeHeaderMenu"
+       [style.top.px]="headerMenuPosition.y"
+       [style.left.px]="headerMenuPosition.x"
+       (click)="$event.stopPropagation()">
+    <div class="menu-item" (click)="sortColumnMenu('asc')">
+      <span class="menu-icon">↑</span> Sort Ascending
+    </div>
+    <div class="menu-item" (click)="sortColumnMenu('desc')">
+      <span class="menu-icon">↓</span> Sort Descending
+    </div>
+    <div class="menu-item" (click)="sortColumnMenu(null)">
+      <span class="menu-icon">✕</span> Clear Sort
+    </div>
+    <div class="menu-divider"></div>
+    <div class="menu-item" (click)="hideColumnMenu()">
+      <span class="menu-icon">ø</span> Hide Column
+    </div>
+    <div class="menu-item" (click)="pinColumnMenu('left')">
+      <span class="menu-icon">«</span> Pin Left
+    </div>
+    <div class="menu-item" (click)="pinColumnMenu('right')">
+      <span class="menu-icon">»</span> Pin Right
+    </div>
+    <div class="menu-item" (click)="pinColumnMenu(null)">
+      <span class="menu-icon">↺</span> Unpin
+    </div>
+  </div>
+
+  <!-- Context Menu Overlay -->
+  <div class="argent-grid-context-menu" 
+       *ngIf="activeContextMenu"
+       [style.top.px]="contextMenuPosition.y"
+       [style.left.px]="contextMenuPosition.x"
+       (click)="$event.stopPropagation()">
+    <ng-container *ngFor="let item of contextMenuItems">
+      <div *ngIf="item.separator" class="menu-divider"></div>
+      <div *ngIf="!item.separator" 
+           class="menu-item" 
+           [class.disabled]="item.disabled"
+           [class.has-submenu]="item.subMenu && item.subMenu.length > 0"
+           (click)="!item.disabled && item.action(); !item.subMenu && closeContextMenu()">
+        <span class="menu-icon" *ngIf="item.icon">{{ item.icon }}</span>
+        <span class="menu-text">{{ item.name }}</span>
+        <span class="menu-arrow" *ngIf="item.subMenu && item.subMenu.length > 0">▶</span>
+        
+        <!-- Sub-menu -->
+        <div class="argent-grid-context-menu sub-menu" *ngIf="item.subMenu && item.subMenu.length > 0">
+          <div *ngFor="let subItem of item.subMenu" 
+               class="menu-item"
+               (click)="subItem.action(); closeContextMenu(); $event.stopPropagation()">
+            <span class="menu-icon" *ngIf="subItem.icon">{{ subItem.icon }}</span>
+            <span class="menu-text">{{ subItem.name }}</span>
+          </div>
+        </div>
+      </div>
+    </ng-container>
+  </div>
+</div>

package/src/lib/components/argent-grid.component.spec.ts

@@ -0,0 +1,189 @@
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { ChangeDetectorRef, provideExperimentalZonelessChangeDetection } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { ArgentGridComponent } from './argent-grid.component';
+import { GridService } from '../services/grid.service';
+import { ColDef } from '../types/ag-grid-types';
+
+// Mock canvas context
+const mockCanvasContext = {
+  clearRect: vi.fn(),
+  fillRect: vi.fn(),
+  beginPath: vi.fn(),
+  moveTo: vi.fn(),
+  lineTo: vi.fn(),
+  stroke: vi.fn(),
+  fillText: vi.fn(),
+  measureText: vi.fn(() => ({ width: 100 })),
+  scale: vi.fn(),
+  setTransform: vi.fn(),
+  font: '13px sans-serif',
+  textBaseline: 'middle',
+  fillStyle: '#000',
+  strokeStyle: '#000'
+};
+
+const mockCanvas = {
+  getContext: vi.fn(() => mockCanvasContext as any),
+  width: 800,
+  height: 600,
+  style: {},
+  addEventListener: vi.fn(),
+  getBoundingClientRect: vi.fn(() => ({ width: 800, height: 600 }))
+} as unknown as HTMLCanvasElement;
+
+interface TestData {
+  id: number;
+  name: string;
+  value: number;
+}
+
+describe('ArgentGridComponent', () => {
+  let component: ArgentGridComponent<TestData>;
+  let fixture: ComponentFixture<ArgentGridComponent<TestData>>;
+
+  // Mock getContext globally for this test suite
+  beforeAll(() => {
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockImplementation((contextId) => {
+      if (contextId === '2d') {
+        return mockCanvasContext as any;
+      }
+      return null;
+    });
+    
+    vi.spyOn(HTMLCanvasElement.prototype, 'getBoundingClientRect').mockReturnValue({
+      width: 800,
+      height: 600,
+      top: 0,
+      left: 0,
+      bottom: 600,
+      right: 800,
+      x: 0,
+      y: 0,
+      toJSON: () => {}
+    } as DOMRect);
+  });
+  
+  const testColumnDefs: (ColDef<TestData>)[] = [
+    { colId: 'id', field: 'id', headerName: 'ID', width: 100 },
+    { colId: 'name', field: 'name', headerName: 'Name', width: 150 },
+    { colId: 'value', field: 'value', headerName: 'Value', width: 100 }
+  ];
+  
+  const testRowData: TestData[] = [
+    { id: 1, name: 'Item 1', value: 100 },
+    { id: 2, name: 'Item 2', value: 200 }
+  ];
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ArgentGridComponent],
+      imports: [
+        CommonModule,
+        DragDropModule
+      ],
+      providers: [
+        provideExperimentalZonelessChangeDetection()
+      ]
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ArgentGridComponent<TestData>) as ComponentFixture<ArgentGridComponent<TestData>>;
+    component = fixture.componentInstance;
+    component.columnDefs = testColumnDefs;
+    component.rowData = testRowData;
+    
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should accept columnDefs input', () => {
+    expect(component.columnDefs).toEqual(testColumnDefs);
+  });
+
+  it('should accept rowData input', () => {
+    expect(component.rowData).toEqual(testRowData);
+  });
+
+  it('should emit gridReady event', () => {
+    component.gridReady.subscribe((api) => {
+      expect(api).toBeTruthy();
+      expect(api.getColumnDefs()).toEqual(testColumnDefs);
+    });
+  });
+
+  it('should have correct row height', () => {
+    expect(component.rowHeight).toBe(32);
+  });
+
+  it('should have viewport for virtual scrolling', () => {
+    // Virtual scrolling is now handled by the viewport container
+    expect(component.viewportRef).toBeDefined();
+  });
+
+  it('should show overlay when no data', () => {
+    // Test the logic without calling ngOnInit which triggers canvas
+    expect(component.showOverlay).toBe(false); // Initially has data
+  });
+
+  it('should hide overlay when data exists', () => {
+    expect(component.showOverlay).toBe(false);
+  });
+
+  it('should get header name from column', () => {
+    const col = testColumnDefs[0];
+    expect(component.getHeaderName(col)).toBe('ID');
+  });
+
+  it('should get header name from field if headerName not provided', () => {
+    const col: ColDef<TestData> = { field: 'name' };
+    expect(component.getHeaderName(col)).toBe('name');
+  });
+
+  it('should handle header click for sorting', () => {
+    const col = { ...testColumnDefs[0], sortable: true };
+    component.onHeaderClick(col);
+    expect(col.sort).toBe('asc');
+    
+    // Click again to toggle
+    component.onHeaderClick(col);
+    expect(col.sort).toBe('desc');
+    
+    // Click third time to clear
+    component.onHeaderClick(col);
+    expect(col.sort).toBeNull();
+  });
+
+  it('should not sort non-sortable columns', () => {
+    const col: ColDef<TestData> = { colId: 'test', sortable: false };
+    component.onHeaderClick(col);
+    expect(col.sort).toBeUndefined();
+  });
+
+  it('should get column width', () => {
+    const col = testColumnDefs[0];
+    expect(component.getColumnWidth(col)).toBe(100);
+  });
+
+  it('should use default width if not specified', () => {
+    const col: ColDef<TestData> = { colId: 'test' };
+    expect(component.getColumnWidth(col)).toBe(150);
+  });
+
+  it('should refresh grid', () => {
+    const mockRenderer = { render: vi.fn(), destroy: vi.fn() };
+    (component as any).canvasRenderer = mockRenderer;
+    component.refresh();
+    expect(mockRenderer.render).toHaveBeenCalled();
+  });
+
+  it('should get API instance', () => {
+    const api = component.getApi();
+    expect(api).toBeTruthy();
+  });
+});