argent-grid 0.1.0 → 0.2.0

package/demo-app/package.json

@@ -1,36 +0,0 @@
-{
-  "name": "argent-grid-demo",
-  "version": "1.0.0",
-  "description": "Live demo for ArgentGrid - Canvas-based high-performance Angular grid",
-  "private": true,
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
-    "watch": "ng build --watch --configuration development",
-    "build:gh-pages": "ng build --base-href /ArgentGrid/ --configuration production"
-  },
-  "dependencies": {
-    "@angular/animations": "^18.0.0",
-    "@angular/cdk": "^18.0.0",
-    "@angular/common": "^18.0.0",
-    "@angular/compiler": "^18.0.0",
-    "@angular/core": "^18.0.0",
-    "@angular/forms": "^18.0.0",
-    "@angular/platform-browser": "^18.0.0",
-    "@angular/platform-browser-dynamic": "^18.0.0",
-    "@angular/router": "^18.0.0",
-    "argent-grid": "file:../dist",
-    "rxjs": "~7.8.0",
-    "tslib": "^2.3.0",
-    "exceljs": "^4.4.0"
-  },
-  "devDependencies": {
-    "@angular-devkit/build-angular": "^18.0.0",
-    "@angular/cli": "^18.0.0",
-    "@angular/compiler-cli": "^18.0.0",
-    "@playwright/test": "^1.58.2",
-    "@types/exceljs": "^1.3.2",
-    "typescript": "~5.4.0"
-  }
-}

package/demo-app/playwright-test-menu.js

@@ -1,19 +0,0 @@
-const { chromium } = require('playwright');
-(async () => {
-  const browser = await chromium.launch({ headless: true });
-  const page = await browser.newPage();
-  await page.goto('http://localhost:4201');
-  
-  // wait for grid
-  await page.waitForSelector('.argent-grid-container');
-  
-  // hover over first header
-  await page.hover('.argent-grid-header-cell:nth-child(2)');
-  
-  // click menu icon
-  await page.click('.argent-grid-header-cell:nth-child(2) .argent-grid-header-menu-icon');
-  
-  // screenshot
-  await page.screenshot({ path: 'demo-app/e2e/screenshots/menu-open.png' });
-  await browser.close();
-})();

package/demo-app/playwright.config.ts

@@ -1,23 +0,0 @@
-import { defineConfig, devices } from '@playwright/test';
-
-export default defineConfig({
-  testDir: './e2e',
-  fullyParallel: true,
-  forbidOnly: !!process.env['CI'],
-  retries: process.env['CI'] ? 2 : 0,
-  workers: process.env['CI'] ? 1 : undefined,
-  reporter: 'list',
-  use: {
-    baseURL: 'http://localhost:4200',
-    trace: 'on-first-retry',
-  },
-  projects: [
-    {
-      name: 'chromium',
-      use: { 
-        ...devices['Desktop Chrome'],
-        viewport: { width: 1920, height: 1080 }
-      },
-    },
-  ],
-});

package/demo-app/src/app/app.component.ts

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
-
-@Component({
-  standalone: true,
-  imports: [RouterOutlet],
-  selector: 'app-root',
-  template: `<router-outlet />`,
-})
-export class AppComponent {}

package/demo-app/src/app/app.config.ts

@@ -1,13 +0,0 @@
-import { ApplicationConfig, provideExperimentalZonelessChangeDetection } from '@angular/core';
-import { provideRouter } from '@angular/router';
-import { provideAnimations } from '@angular/platform-browser/animations';
-
-import { routes } from './app.routes';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideExperimentalZonelessChangeDetection(),
-    provideRouter(routes),
-    provideAnimations(),
-  ],
-};

package/demo-app/src/app/app.routes.ts

@@ -1,7 +0,0 @@
-import { Routes } from '@angular/router';
-import { DemoPageComponent } from './demo-page/demo-page.component';
-
-export const routes: Routes = [
-  { path: '', component: DemoPageComponent },
-  { path: '**', redirectTo: '' },
-];

package/demo-app/src/app/demo-page/demo-page.component.css

@@ -1,313 +0,0 @@
-/* WIP Banner */
-.wip-banner {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
-  color: #fff;
-  text-align: center;
-  padding: 12px 20px;
-  font-size: 14px;
-  font-weight: 600;
-  z-index: 9999;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-}
-
-.wip-banner .icon {
-  font-size: 18px;
-  animation: pulse 2s ease-in-out infinite;
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; transform: scale(1); }
-  50% { opacity: 0.7; transform: scale(1.1); }
-}
-
-.wip-banner a {
-  color: #fff;
-  text-decoration: underline;
-  margin-left: 10px;
-}
-
-/* Demo Container */
-.demo-container {
-  max-width: 1800px;
-  margin: 0 auto;
-  background: #fff;
-  border-radius: 12px;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-  overflow: hidden;
-  margin-top: 20px;
-  height: calc(100vh - 100px);
-  display: flex;
-  flex-direction: column;
-}
-
-.demo-header {
-  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
-  color: #fff;
-  padding: 30px 40px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 20px;
-  flex-shrink: 0;
-}
-
-.demo-header h1 {
-  font-size: 28px;
-  font-weight: 700;
-  margin: 0;
-}
-
-.demo-header p {
-  color: #a0a0a0;
-  margin-top: 8px;
-  font-size: 14px;
-}
-
-.feature-list {
-  display: flex;
-  gap: 20px;
-  flex-wrap: wrap;
-  margin-top: 20px;
-}
-
-.feature {
-  background: rgba(255, 255, 255, 0.05);
-  padding: 8px 14px;
-  border-radius: 6px;
-  font-size: 13px;
-  color: #a0a0a0;
-}
-
-.feature.highlight {
-  color: #4ade80;
-  background: rgba(74, 222, 128, 0.1);
-}
-
-.demo-stats {
-  display: flex;
-  gap: 12px;
-  flex-wrap: wrap;
-  align-items: center;
-}
-
-.stat-badge {
-  background: rgba(255, 255, 255, 0.1);
-  padding: 0 16px;
-  border-radius: 8px;
-  font-size: 14px;
-  backdrop-filter: blur(10px);
-  min-width: 100px;
-  text-align: center;
-  height: 42px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.stat-badge strong {
-  color: #4ade80;
-  font-size: 16px;
-  display: block;
-  line-height: 1.2;
-}
-
-.btn-benchmark {
-  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
-  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
-}
-
-.btn-benchmark:hover:not(:disabled) {
-  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
-}
-
-.benchmark-results {
-  background: #1a1a2e;
-  color: #fff;
-  padding: 20px 40px;
-  border-bottom: 2px solid #e11d48;
-  animation: slideDown 0.3s ease-out;
-}
-
-@keyframes slideDown {
-  from { transform: translateY(-100%); opacity: 0; }
-  to { transform: translateY(0); opacity: 1; }
-}
-
-.benchmark-results h3 {
-  margin: 0 0 15px 0;
-  font-size: 18px;
-  color: #fb7185;
-}
-
-.results-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 20px;
-  margin-bottom: 15px;
-}
-
-.result-item {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-}
-
-.result-item label {
-  font-size: 12px;
-  color: #a0a0a0;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-}
-
-.result-item span {
-  font-size: 20px;
-  font-weight: 700;
-  color: #fff;
-  font-family: 'Courier New', Courier, monospace;
-}
-
-.btn-small {
-  padding: 6px 12px;
-  font-size: 12px;
-}
-
-.demo-controls {
-  display: flex;
-  gap: 12px;
-  width: 100%;
-  margin-top: 20px;
-  padding-top: 20px;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.btn {
-  height: 42px;
-  padding: 0 20px;
-  background: #4f46e5;
-  color: white;
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 600;
-  transition: all 0.2s;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  white-space: nowrap;
-}
-
-.btn-secondary {
-  background: rgba(255, 255, 255, 0.1);
-  color: #fff;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.btn-secondary:hover:not(:disabled) {
-  background: rgba(255, 255, 255, 0.2);
-}
-
-.btn:hover:not(:disabled) {
-  background: #4338ca;
-  transform: translateY(-1px);
-}
-
-.btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.grid-wrapper {
-  flex: 1;
-  position: relative;
-  overflow: hidden;
-  background: #fafafa;
-  min-height: 0;
-}
-
-.loading {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: #666;
-}
-
-.loading-spinner {
-  width: 50px;
-  height: 50px;
-  border: 4px solid #e0e0e0;
-  border-top-color: #4f46e5;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  margin-bottom: 20px;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-.footer {
-  background: #f5f5f5;
-  padding: 15px 40px;
-  border-top: 1px solid #e0e0e0;
-  font-size: 13px;
-  color: #666;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.footer a {
-  color: #4f46e5;
-  text-decoration: none;
-}
-
-.footer a:hover {
-  text-decoration: underline;
-}
-
-/* Responsive */
-@media (max-width: 1024px) {
-  .demo-header {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .demo-stats {
-    width: 100%;
-    justify-content: flex-start;
-  }
-
-  .feature-list {
-    gap: 10px;
-  }
-}
-
-/* Override argent-grid styles for demo */
-argent-grid {
-  display: block;
-  height: 100%;
-  width: 100%;
-}
-
-argent-grid .argent-grid-container {
-  height: 100% !important;
-  border: none;
-}
-
-argent-grid .argent-grid-viewport {
-  height: calc(100% - 40px);
-}

package/demo-app/src/app/demo-page/demo-page.component.html

@@ -1,124 +0,0 @@
-<!-- WIP Banner -->
-<div class="wip-banner">
-  <span class="icon">🚧</span>
-  <span>WORK IN PROGRESS - Using ArgentGrid Component</span>
-  <a href="https://github.com/HainanZhao/ArgentGrid" target="_blank">View on GitHub →</a>
-</div>
-
-<div class="demo-container">
-  <header class="demo-header">
-    <div>
-      <h1>🎨 ArgentGrid - Canvas-Based Grid</h1>
-      <p>Ultra-High Performance - 1,000,000+ Rows at 60fps</p>
-      <div class="feature-list">
-        <span class="feature highlight">✓ Canvas Rendering</span>
-        <span class="feature highlight">✓ Zero DOM Overhead</span>
-        <span class="feature highlight">✓ GPU Accelerated</span>
-        <span class="feature">✓ AG Grid Compatible</span>
-        <span class="feature">✓ < 50KB Bundle</span>
-      </div>
-    </div>
-    <div class="demo-stats">
-      <div class="stat-badge">
-        <strong>{{ rowCount | number }}</strong> rows
-      </div>
-      <div class="stat-badge">
-        <strong>{{ renderTime }}</strong>ms load
-      </div>
-      <div class="stat-badge" title="Time taken by canvas to render the last frame">
-        <strong>{{ canvasFrameTime }}</strong>ms frame
-      </div>
-      <div class="stat-badge">
-        <strong>{{ fps }}</strong> FPS
-      </div>
-      <button class="btn btn-benchmark" (click)="runBenchmark()" [disabled]="isLoading || isBenchmarking">
-        {{ isBenchmarking ? 'Running...' : '🚀 Benchmark' }}
-      </button>
-      <button class="btn" (click)="loadData(100000)" [disabled]="isLoading || isBenchmarking">
-        {{ isLoading ? 'Loading...' : '100K' }}
-      </button>
-      <button class="btn" (click)="loadData(500000)" [disabled]="isLoading">
-        {{ isLoading ? 'Loading...' : '500K' }}
-      </button>
-      <button class="btn" (click)="loadData(1000000)" [disabled]="isLoading">
-        {{ isLoading ? 'Loading...' : '1M' }}
-      </button>
-    </div>
-    <div class="demo-controls">
-      <button class="btn btn-secondary" (click)="toggleGrouping()">
-        {{ isGrouped ? 'Ungroup' : 'Group by Dept' }}
-      </button>
-      <button class="btn btn-secondary" (click)="toggleMasterDetail()">
-        {{ isMasterDetail ? 'Disable Detail' : 'Master/Detail' }}
-      </button>
-      <button class="btn btn-secondary" (click)="togglePivotMode()">
-        {{ isPivotMode ? 'Disable Pivot' : 'Pivot Mode' }}
-      </button>
-      <button class="btn btn-secondary" (click)="toggleSideBar()">
-        {{ isSideBarVisible ? 'Hide Sidebar' : 'Show Sidebar' }}
-      </button>
-      <button class="btn btn-secondary" (click)="toggleFloatingFilter()">
-        {{ isFloatingFilterShown ? 'Hide Filters' : 'Show Filters' }}
-      </button>
-      <button class="btn btn-secondary" (click)="toggleFilter()">
-        {{ isFiltered ? 'Clear Filter' : 'Filter "Eng"' }}
-      </button>
-    </div>
-  </header>
-
-  @if (benchmarkResults) {
-    <div class="benchmark-results">
-      <h3>🚀 Benchmark Results ({{ rowCount | number }} rows)</h3>
-      <div class="results-grid">
-        <div class="result-item">
-          <label>Initial Render:</label>
-          <span>{{ benchmarkResults.initialRender.toFixed(2) }}ms</span>
-        </div>
-        <div class="result-item">
-          <label>Avg Scroll Frame:</label>
-          <span>{{ benchmarkResults.scrollFrameAverage.toFixed(2) }}ms</span>
-        </div>
-        <div class="result-item">
-          <label>Selection All:</label>
-          <span>{{ benchmarkResults.selectionUpdateTime.toFixed(2) }}ms</span>
-        </div>
-        <div class="result-item">
-          <label>Grouping Toggle:</label>
-          <span>{{ benchmarkResults.groupingUpdateTime.toFixed(2) }}ms</span>
-        </div>
-        <div class="result-item">
-          <label>Total Test Time:</label>
-          <span>{{ benchmarkResults.totalTime.toFixed(2) }}ms</span>
-        </div>
-      </div>
-      <button class="btn btn-small" (click)="benchmarkResults = null">Close</button>
-    </div>
-  }
-
-  <div class="grid-wrapper">
-    @if (isLoading) {
-      <div class="loading">
-        <div class="loading-spinner"></div>
-        <p>Loading {{ rowCount | number }} rows...</p>
-      </div>
-    } @else {
-      <argent-grid
-        [columnDefs]="columnDefs"
-        [rowData]="rowData"
-        [gridOptions]="gridOptions"
-        [rowHeight]="32"
-        [height]="'100%'"
-        [width]="'100%'"
-        (gridReady)="onGridReady($event)"
-        (rowClicked)="onRowClicked($event)"
-      />
-    }
-  </div>
-
-  <div class="footer">
-    <span>Built with Angular 18 + Canvas 2D API</span>
-    <span>
-      <a href="https://github.com/HainanZhao/ArgentGrid" target="_blank">View on GitHub →</a>
-    </span>
-  </div>
-</div>