@anymux/ui-kit 0.1.0

package/src/list/utils/DragDropManager.ts

@@ -0,0 +1,320 @@
+import { ListItemData } from '../types/ListTypes';
+import { benchmark } from './BenchmarkLogger';
+
+// AICODE-NOTE: Enhanced drag and drop manager for better visual feedback and performance
+
+export interface DragDropState {
+  isDragging: boolean;
+  draggedItems: ListItemData[];
+  dragOverItem: string | null;
+  dragOverPosition: 'before' | 'after' | 'inside' | null;
+  dragStartPosition: { x: number; y: number } | null;
+  dragCurrentPosition: { x: number; y: number } | null;
+}
+
+export interface DragDropCallbacks {
+  onDragStart?: (items: ListItemData[], event: DragEvent) => void;
+  onDragEnd?: (items: ListItemData[], success: boolean) => void;
+  onDrop?: (draggedItems: ListItemData[], targetItem: ListItemData | null, position: 'before' | 'after' | 'inside', event: DragEvent) => boolean;
+  canDragItem?: (item: ListItemData) => boolean;
+  canDropItems?: (draggedItems: ListItemData[], targetItem: ListItemData | null, position: 'before' | 'after' | 'inside') => boolean;
+}
+
+export class DragDropManager {
+  private state: DragDropState = {
+    isDragging: false,
+    draggedItems: [],
+    dragOverItem: null,
+    dragOverPosition: null,
+    dragStartPosition: null,
+    dragCurrentPosition: null
+  };
+
+  private callbacks: DragDropCallbacks = {};
+  private dragPreviewElement: HTMLElement | null = null;
+  private dragThreshold = 5; // pixels to move before starting drag
+
+  constructor(callbacks: DragDropCallbacks = {}) {
+    this.callbacks = callbacks;
+  }
+
+  /**
+   * Update callbacks
+   */
+  updateCallbacks(callbacks: DragDropCallbacks): void {
+    this.callbacks = { ...this.callbacks, ...callbacks };
+  }
+
+  /**
+   * Get current drag drop state
+   */
+  getState(): DragDropState {
+    return { ...this.state };
+  }
+
+  /**
+   * Check if an item can be dragged
+   */
+  canDragItem(item: ListItemData): boolean {
+    return this.callbacks.canDragItem?.(item) ?? true;
+  }
+
+  /**
+   * Check if items can be dropped on target
+   */
+  canDropItems(draggedItems: ListItemData[], targetItem: ListItemData | null, position: 'before' | 'after' | 'inside'): boolean {
+    return this.callbacks.canDropItems?.(draggedItems, targetItem, position) ?? true;
+  }
+
+  /**
+   * Start drag operation
+   */
+  startDrag(items: ListItemData[], event: DragEvent): void {
+    benchmark.start('drag-operation', { itemCount: items.length });
+    
+    // Check if any items can be dragged
+    const draggableItems = items.filter(item => this.canDragItem(item));
+    if (draggableItems.length === 0) {
+      benchmark.end('drag-operation', { result: 'no-draggable-items' });
+      return;
+    }
+
+    this.state = {
+      ...this.state,
+      isDragging: true,
+      draggedItems: draggableItems,
+      dragStartPosition: { x: event.clientX, y: event.clientY },
+      dragCurrentPosition: { x: event.clientX, y: event.clientY }
+    };
+
+    // Set drag data
+    const itemIds = draggableItems.map(item => item.id);
+    event.dataTransfer?.setData('application/json', JSON.stringify({
+      type: 'list-items',
+      itemIds,
+      itemCount: draggableItems.length
+    }));
+
+    // Set drag effect
+    if (event.dataTransfer) {
+      event.dataTransfer.effectAllowed = 'move';
+      event.dataTransfer.dropEffect = 'move';
+    }
+
+    // Create custom drag preview
+    this.createDragPreview(draggableItems, event);
+
+    // Notify callback
+    this.callbacks.onDragStart?.(draggableItems, event);
+
+    console.log('🚀 [DRAG] Started dragging', draggableItems.length, 'items');
+  }
+
+  /**
+   * Update drag over state
+   */
+  updateDragOver(itemId: string | null, position: 'before' | 'after' | 'inside' | null, event?: DragEvent): void {
+    if (!this.state.isDragging) return;
+
+    // Update current position if event provided
+    if (event) {
+      this.state.dragCurrentPosition = { x: event.clientX, y: event.clientY };
+    }
+
+    // Only update if changed
+    if (this.state.dragOverItem !== itemId || this.state.dragOverPosition !== position) {
+      this.state.dragOverItem = itemId;
+      this.state.dragOverPosition = position;
+      
+      console.log('📍 [DRAG] Drag over:', itemId, position);
+    }
+  }
+
+  /**
+   * Handle drop operation
+   */
+  handleDrop(targetItem: ListItemData | null, position: 'before' | 'after' | 'inside', event: DragEvent): boolean {
+    if (!this.state.isDragging || this.state.draggedItems.length === 0) {
+      return false;
+    }
+
+    benchmark.start('drop-operation');
+
+    // Check if drop is allowed
+    if (!this.canDropItems(this.state.draggedItems, targetItem, position)) {
+      console.log('❌ [DROP] Drop not allowed');
+      this.endDrag(false);
+      benchmark.end('drop-operation', { result: 'not-allowed' });
+      return false;
+    }
+
+    // Notify callback
+    const success = this.callbacks.onDrop?.(this.state.draggedItems, targetItem, position, event) ?? true;
+    
+    console.log(success ? '✅ [DROP] Drop successful' : '❌ [DROP] Drop failed');
+    
+    this.endDrag(success);
+    benchmark.end('drop-operation', { result: success ? 'success' : 'failed' });
+    
+    return success;
+  }
+
+  /**
+   * End drag operation
+   */
+  endDrag(success: boolean): void {
+    if (!this.state.isDragging) return;
+
+    const draggedItems = [...this.state.draggedItems];
+
+    // Clean up drag preview
+    this.removeDragPreview();
+
+    // Reset state
+    this.state = {
+      isDragging: false,
+      draggedItems: [],
+      dragOverItem: null,
+      dragOverPosition: null,
+      dragStartPosition: null,
+      dragCurrentPosition: null
+    };
+
+    // Notify callback
+    this.callbacks.onDragEnd?.(draggedItems, success);
+
+    benchmark.end('drag-operation', { 
+      result: success ? 'success' : 'cancelled',
+      itemCount: draggedItems.length 
+    });
+
+    console.log('🏁 [DRAG] Ended drag operation:', success ? 'success' : 'cancelled');
+  }
+
+  /**
+   * Calculate drop position based on mouse position within element
+   */
+  calculateDropPosition(event: DragEvent, element: HTMLElement): 'before' | 'after' | 'inside' {
+    const rect = element.getBoundingClientRect();
+    const y = event.clientY - rect.top;
+    const height = rect.height;
+
+    // Divide element into three zones
+    if (y < height * 0.25) {
+      return 'before';
+    } else if (y > height * 0.75) {
+      return 'after';
+    } else {
+      return 'inside';
+    }
+  }
+
+  /**
+   * Create custom drag preview element
+   */
+  private createDragPreview(items: ListItemData[], event: DragEvent): void {
+    // Remove existing preview
+    this.removeDragPreview();
+
+    // Create preview element
+    const preview = document.createElement('div');
+    preview.className = 'drag-preview';
+    preview.style.cssText = `
+      position: fixed;
+      top: -1000px;
+      left: -1000px;
+      z-index: 9999;
+      pointer-events: none;
+      background: white;
+      border: 1px solid #ccc;
+      border-radius: 8px;
+      padding: 8px 12px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+      font-size: 14px;
+      max-width: 200px;
+    `;
+
+    // Set preview content
+    if (items.length === 1) {
+      preview.textContent = items[0]?.name || 'Item';
+    } else {
+      preview.innerHTML = `
+        <div style="font-weight: 500;">${items[0]?.name || 'Item'}</div>
+        <div style="font-size: 12px; color: #666; margin-top: 2px;">+${items.length - 1} more items</div>
+      `;
+    }
+
+    document.body.appendChild(preview);
+    this.dragPreviewElement = preview;
+
+    // Set as drag image
+    if (event.dataTransfer) {
+      event.dataTransfer.setDragImage(preview, 10, 10);
+    }
+
+    // Clean up after a short delay
+    setTimeout(() => {
+      if (preview.parentNode) {
+        preview.parentNode.removeChild(preview);
+      }
+    }, 100);
+  }
+
+  /**
+   * Remove drag preview element
+   */
+  private removeDragPreview(): void {
+    if (this.dragPreviewElement && this.dragPreviewElement.parentNode) {
+      this.dragPreviewElement.parentNode.removeChild(this.dragPreviewElement);
+      this.dragPreviewElement = null;
+    }
+  }
+
+  /**
+   * Get visual feedback classes for drag state
+   */
+  getDragClasses(itemId: string): string {
+    const classes: string[] = [];
+
+    if (this.state.isDragging) {
+      // Item being dragged
+      if (this.state.draggedItems.some(item => item.id === itemId)) {
+        classes.push('dragging', 'opacity-50');
+      }
+
+      // Item being dragged over
+      if (this.state.dragOverItem === itemId) {
+        classes.push('drag-over');
+        
+        switch (this.state.dragOverPosition) {
+          case 'before':
+            classes.push('drag-over-before');
+            break;
+          case 'after':
+            classes.push('drag-over-after');
+            break;
+          case 'inside':
+            classes.push('drag-over-inside');
+            break;
+        }
+      }
+    }
+
+    return classes.join(' ');
+  }
+
+  /**
+   * Cleanup resources
+   */
+  destroy(): void {
+    this.removeDragPreview();
+    this.state = {
+      isDragging: false,
+      draggedItems: [],
+      dragOverItem: null,
+      dragOverPosition: null,
+      dragStartPosition: null,
+      dragCurrentPosition: null
+    };
+  }
+} 

package/src/list/utils/GridLayoutCalculator.ts

@@ -0,0 +1,290 @@
+import { makeAutoObservable } from "mobx";
+
+// AICODE-NOTE: Grid layout calculator for precise positioning and sizing
+export interface GridLayoutConfig {
+  containerWidth: number;
+  containerHeight: number;
+  itemsPerRow: number | 'auto';
+  gap: number;
+  padding: number;
+  minItemWidth: number;
+  maxItemWidth: number;
+  aspectRatio: number; // width/height ratio for items
+}
+
+export interface GridItemLayout {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  thumbnailSize: number;
+  textHeight: number;
+}
+
+export interface GridLayoutResult {
+  itemsPerRow: number;
+  itemWidth: number;
+  itemHeight: number;
+  totalRows: number;
+  totalHeight: number;
+  items: GridItemLayout[];
+}
+
+// AICODE-NOTE: MobX-enabled calculation class for grid layouts with reactive updates
+export class GridLayoutCalculator {
+  private config: GridLayoutConfig;
+
+  constructor(config: GridLayoutConfig) {
+    this.config = config;
+    makeAutoObservable(this, {});
+  }
+
+  // AICODE-NOTE: Update configuration and trigger reactive updates
+  updateConfig(updates: Partial<GridLayoutConfig>): void {
+    this.config = { ...this.config, ...updates };
+  }
+
+  // AICODE-NOTE: Computed getter for current configuration
+  get currentConfig(): GridLayoutConfig {
+    return this.config;
+  }
+
+  // AICODE-NOTE: Calculate optimal items per row based on container width
+  calculateItemsPerRow(): number {
+    if (typeof this.config.itemsPerRow === 'number') {
+      return Math.max(1, this.config.itemsPerRow);
+    }
+
+    const { containerWidth, gap, padding, minItemWidth, maxItemWidth } = this.config;
+    const availableWidth = containerWidth - (padding * 2);
+    
+    // console.log('🔢 [ITEMS PER ROW] Calculating:', {
+    //   containerWidth,
+    //   availableWidth,
+    //   minItemWidth,
+    //   maxItemWidth,
+    //   gap,
+    //   padding
+    // });
+    
+    // If container is too small, return 1
+    if (availableWidth < minItemWidth) {
+      // console.log('🔢 [ITEMS PER ROW] Container too small, returning 1');
+      return 1;
+    }
+    
+    // Find the maximum number of items that can fit while respecting minItemWidth
+    let bestItemsPerRow = 1;
+    
+    for (let itemsPerRow = 1; itemsPerRow <= 12; itemsPerRow++) {
+      const totalGaps = (itemsPerRow - 1) * gap;
+      const itemWidth = (availableWidth - totalGaps) / itemsPerRow;
+      
+      // console.log(`🔢 [ITEMS PER ROW] Testing ${itemsPerRow} items: itemWidth=${itemWidth.toFixed(1)}, fits=${itemWidth >= minItemWidth}, withinMax=${itemWidth <= maxItemWidth}`);
+      
+      if (itemWidth >= minItemWidth) {
+        // Always use this if it fits the minimum width requirement
+        bestItemsPerRow = itemsPerRow;
+        // console.log(`🔢 [ITEMS PER ROW] Fits minimum: ${itemsPerRow} items (width: ${itemWidth.toFixed(1)})`);
+      } else {
+        // console.log(`🔢 [ITEMS PER ROW] Too narrow, breaking at ${itemsPerRow} items`);
+        break; // Too many items per row
+      }
+    }
+    
+    // console.log(`🔢 [ITEMS PER ROW] Final result: ${bestItemsPerRow} items per row (container: ${containerWidth}px, min: ${minItemWidth}px)`);
+    return bestItemsPerRow;
+  }
+
+  // AICODE-NOTE: Calculate item dimensions based on items per row
+  calculateItemDimensions(itemsPerRow: number): { width: number; height: number } {
+    const { containerWidth, gap, padding, aspectRatio } = this.config;
+    const availableWidth = containerWidth - (padding * 2);
+    const totalGaps = (itemsPerRow - 1) * gap;
+    const itemWidth = (availableWidth - totalGaps) / itemsPerRow;
+    const itemHeight = itemWidth / aspectRatio;
+    
+    // AICODE-NOTE: Ensure calculated width doesn't cause overflow
+    const maxAllowedWidth = (containerWidth - (padding * 2) - ((itemsPerRow - 1) * gap)) / itemsPerRow;
+    const safeItemWidth = Math.min(itemWidth, maxAllowedWidth);
+    const safeItemHeight = safeItemWidth / aspectRatio;
+    
+
+    
+    return {
+      width: Math.floor(safeItemWidth),
+      height: Math.floor(safeItemHeight)
+    };
+  }
+
+  // AICODE-NOTE: Calculate thumbnail size within item with proper spacing
+  calculateThumbnailSize(itemWidth: number, itemHeight: number): number {
+    const textHeight = 40; // Reserve space for text and metadata
+    const itemPadding = 8; // Internal padding around thumbnail
+    const availableWidth = itemWidth - itemPadding;
+    const availableHeight = itemHeight - textHeight - itemPadding;
+    
+    // Use the smaller dimension to ensure thumbnail fits properly
+    const maxThumbnailSize = Math.min(availableWidth, availableHeight);
+    
+    // Ensure minimum thumbnail size for usability
+    return Math.max(32, Math.floor(maxThumbnailSize));
+  }
+
+  // AICODE-NOTE: Calculate layout for all items with precise thumbnail sizing
+  calculateLayout(totalItems: number): GridLayoutResult {
+    const itemsPerRow = this.calculateItemsPerRow();
+    const { width: itemWidth, height: itemHeight } = this.calculateItemDimensions(itemsPerRow);
+    const thumbnailSize = this.calculateThumbnailSize(itemWidth, itemHeight);
+    const textHeight = 60;
+    
+    // AICODE-NOTE: Validate that layout doesn't exceed container width
+    const totalRowWidth = (itemsPerRow * itemWidth) + ((itemsPerRow - 1) * this.config.gap) + (this.config.padding * 2);
+    
+    // console.log('🧮 [GRID CALCULATOR] Layout debug:', {
+    //   totalItems,
+    //   itemsPerRow,
+    //   itemWidth,
+    //   itemHeight,
+    //   thumbnailSize,
+    //   totalRowWidth,
+    //   containerWidth: this.config.containerWidth,
+    //   exceeds: totalRowWidth > this.config.containerWidth,
+    //   config: this.config
+    // });
+    
+    const totalRows = Math.ceil(totalItems / itemsPerRow);
+    const totalHeight = (totalRows * itemHeight) + ((totalRows - 1) * this.config.gap) + (this.config.padding * 2);
+    
+    const items: GridItemLayout[] = [];
+    
+    for (let i = 0; i < totalItems; i++) {
+      const row = Math.floor(i / itemsPerRow);
+      const col = i % itemsPerRow;
+      
+      const x = this.config.padding + (col * (itemWidth + this.config.gap));
+      const y = this.config.padding + (row * (itemHeight + this.config.gap));
+      
+      // AICODE-NOTE: Ensure item doesn't exceed container bounds
+      const clampedX = Math.min(x, this.config.containerWidth - itemWidth - this.config.padding);
+      
+      items.push({
+        x: clampedX,
+        y,
+        width: itemWidth,
+        height: itemHeight,
+        thumbnailSize,
+        textHeight
+      });
+    }
+    
+    return {
+      itemsPerRow,
+      itemWidth,
+      itemHeight,
+      totalRows,
+      totalHeight,
+      items
+    };
+  }
+
+  // AICODE-NOTE: Calculate visible items for virtualization
+  calculateVisibleItems(
+    totalItems: number,
+    scrollTop: number,
+    viewportHeight: number,
+    overscan: number = 2
+  ): { startIndex: number; endIndex: number; visibleItems: GridItemLayout[] } {
+    const layout = this.calculateLayout(totalItems);
+    const rowHeight = layout.itemHeight + this.config.gap;
+    
+    // Calculate visible row range
+    const startRow = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);
+    const endRow = Math.min(
+      layout.totalRows - 1,
+      Math.ceil((scrollTop + viewportHeight) / rowHeight) + overscan
+    );
+    
+    const startIndex = startRow * layout.itemsPerRow;
+    const endIndex = Math.min(totalItems - 1, (endRow + 1) * layout.itemsPerRow - 1);
+    
+    const visibleItems = layout.items.slice(startIndex, endIndex + 1);
+    
+    return {
+      startIndex,
+      endIndex,
+      visibleItems
+    };
+  }
+
+  // AICODE-NOTE: Get item position by index
+  getItemPosition(itemIndex: number, totalItems: number): GridItemLayout | null {
+    const layout = this.calculateLayout(totalItems);
+    return layout.items[itemIndex] || null;
+  }
+
+  // AICODE-NOTE: Find item at position (for hit testing)
+  getItemAtPosition(x: number, y: number, totalItems: number): number | null {
+    const layout = this.calculateLayout(totalItems);
+    
+    for (let i = 0; i < layout.items.length; i++) {
+      const item = layout.items[i];
+      if (item && 
+        x >= item.x &&
+        x <= item.x + item.width &&
+        y >= item.y &&
+        y <= item.y + item.height
+      ) {
+        return i;
+      }
+    }
+    
+    return null;
+  }
+}
+
+// AICODE-NOTE: Factory function for common grid configurations
+export function createGridCalculator(
+  containerWidth: number,
+  containerHeight: number,
+  options: Partial<GridLayoutConfig> = {}
+): GridLayoutCalculator {
+  const defaultConfig: GridLayoutConfig = {
+    containerWidth,
+    containerHeight,
+    itemsPerRow: 'auto',
+    gap: 12,
+    padding: 16,
+    minItemWidth: 160,
+    maxItemWidth: 400,
+    aspectRatio: 0.9, // Slightly portrait for better thumbnails
+    ...options
+  };
+  
+  return new GridLayoutCalculator(defaultConfig);
+}
+
+// AICODE-NOTE: Preset configurations for different use cases
+export const GRID_PRESETS = {
+  compact: {
+    gap: 8,
+    padding: 12,
+    minItemWidth: 120,
+    maxItemWidth: 200,
+    aspectRatio: 0.85
+  },
+  comfortable: {
+    gap: 16,
+    padding: 20,
+    minItemWidth: 200,
+    maxItemWidth: 300,
+    aspectRatio: 0.9
+  },
+  spacious: {
+    gap: 24,
+    padding: 32,
+    minItemWidth: 280,
+    maxItemWidth: 400,
+    aspectRatio: 0.95
+  }
+} as const;