@uxland/primary-shell 6.0.4 → 6.0.6

package/src/internal-plugins/activity-history/activity-history-item/list/UI/timeline/virtual-scroller.ts

@@ -0,0 +1,239 @@
+export interface VirtualScrollerOptions<T> {
+  items: T[];
+  estimatedItemHeight: number;
+  bufferSize: number; // percentage of viewport height
+}
+
+export interface VirtualScrollerState {
+  viewportHeight: number;
+  scrollTop: number;
+  totalHeight: number;
+  visibleRange: { start: number; end: number };
+  containerOffset: number;
+  visibleItems: any[];
+}
+
+export class VirtualScroller<T = any> {
+  private _itemHeights: Map<number, number> = new Map();
+  private _itemOffsets: Map<number, number> = new Map();
+  private _totalHeight = 0;
+  private _viewportHeight = 0;
+  private _scrollTop = 0;
+  private _visibleRange = { start: 0, end: 0 };
+  private _options: VirtualScrollerOptions<T>;
+  
+  private _viewport?: HTMLElement;
+  private _content?: HTMLElement;
+  private _resizeObserver?: ResizeObserver;
+  private _isScrolling = false;
+  private _scrollTimeout?: number;
+
+  constructor(options: VirtualScrollerOptions<T>) {
+    this._options = options;
+    this._initializeHeights();
+  }
+
+  // Initialize with estimated heights
+  private _initializeHeights() {
+    const { items, estimatedItemHeight } = this._options;
+    let totalHeight = 0;
+    
+    this._itemHeights.clear();
+    this._itemOffsets.clear();
+    
+    for (let i = 0; i < items.length; i++) {
+      this._itemOffsets.set(i, totalHeight);
+      this._itemHeights.set(i, estimatedItemHeight);
+      totalHeight += estimatedItemHeight;
+    }
+    
+    this._totalHeight = totalHeight;
+  }
+
+  // Setup DOM references and observers
+  setup(viewport: HTMLElement, content: HTMLElement, onStateChange: (state: VirtualScrollerState) => void) {
+    this._viewport = viewport;
+    this._content = content;
+    
+    // Update viewport height
+    this._viewportHeight = viewport.clientHeight;
+    
+    // Set initial content height
+    content.style.height = this._totalHeight + 'px';
+    
+    // Calculate initial visible range
+    this._updateVisibleRange();
+    
+    // Setup scroll listener
+    const onScroll = () => {
+      if (!this._viewport) return;
+      
+      this._scrollTop = this._viewport.scrollTop;
+      this._isScrolling = true;
+      
+      if (this._scrollTimeout) {
+        clearTimeout(this._scrollTimeout);
+      }
+      
+      this._scrollTimeout = window.setTimeout(() => {
+        this._isScrolling = false;
+        // Measure heights after scrolling stops
+        setTimeout(() => {
+          this._measureActualHeights();
+          onStateChange(this.getState());
+        }, 50);
+      }, 150);
+      
+      const oldRange = {...this._visibleRange};
+      this._updateVisibleRange();
+      
+      // Only update if visible range changed
+      if (Math.abs(oldRange.start - this._visibleRange.start) > 0 || 
+          Math.abs(oldRange.end - this._visibleRange.end) > 0) {
+        onStateChange(this.getState());
+      }
+    };
+    
+    viewport.addEventListener('scroll', onScroll);
+    
+    // Setup resize observer
+    this._resizeObserver = new ResizeObserver(() => {
+      this._viewportHeight = viewport.clientHeight;
+      this._updateVisibleRange();
+      onStateChange(this.getState());
+    });
+    
+    this._resizeObserver.observe(viewport);
+    
+    // Return cleanup function
+    return () => {
+      viewport.removeEventListener('scroll', onScroll);
+      this._resizeObserver?.disconnect();
+      if (this._scrollTimeout) {
+        clearTimeout(this._scrollTimeout);
+      }
+    };
+  }
+
+  // Update items (when data changes)
+  updateItems(items: T[]) {
+    this._options.items = items;
+    this._initializeHeights();
+    
+    if (this._content) {
+      this._content.style.height = this._totalHeight + 'px';
+    }
+    
+    this._updateVisibleRange();
+  }
+
+  // Measure actual heights of rendered items
+  private _measureActualHeights() {
+    if (!this._content || this._isScrolling) return;
+    
+    const visitElements = this._content.querySelectorAll('.visit');
+    if (visitElements.length === 0) return;
+    
+    let hasChanges = false;
+    
+    visitElements.forEach((element, index) => {
+      const actualHeight = element.getBoundingClientRect().height;
+      const globalIndex = this._visibleRange.start + index;
+      const currentHeight = this._itemHeights.get(globalIndex) || 0;
+      
+      // Only update if there's a significant difference
+      if (Math.abs(actualHeight - currentHeight) > 5) {
+        hasChanges = true;
+        this._itemHeights.set(globalIndex, actualHeight);
+      }
+    });
+    
+    if (hasChanges) {
+      // Recalculate offsets and total height
+      let totalHeight = 0;
+      for (let i = 0; i < this._options.items.length; i++) {
+        this._itemOffsets.set(i, totalHeight);
+        const height = this._itemHeights.get(i) || this._options.estimatedItemHeight;
+        totalHeight += height;
+      }
+      
+      this._totalHeight = totalHeight;
+      if (this._content) {
+        this._content.style.height = this._totalHeight + 'px';
+      }
+    }
+  }
+
+  // Calculate visible range based on scroll position
+  private _updateVisibleRange() {
+    if (!this._options.items.length || this._viewportHeight === 0) return;
+    
+    const buffer = Math.floor(this._viewportHeight * (this._options.bufferSize / 100));
+    const startOffset = Math.max(0, this._scrollTop - buffer);
+    const endOffset = this._scrollTop + this._viewportHeight + buffer;
+    
+    let start = 0;
+    let end = this._options.items.length - 1;
+    
+    // Find start index
+    for (let i = 0; i < this._options.items.length; i++) {
+      const offset = this._itemOffsets.get(i) || 0;
+      if (offset >= startOffset) {
+        start = Math.max(0, i - 1);
+        break;
+      }
+    }
+    
+    // Find end index
+    for (let i = start; i < this._options.items.length; i++) {
+      const offset = this._itemOffsets.get(i) || 0;
+      if (offset > endOffset) {
+        end = i;
+        break;
+      }
+    }
+    
+    this._visibleRange = { start, end };
+  }
+
+  // Scroll to specific item index
+  scrollToIndex(index: number, behavior: ScrollBehavior = 'smooth') {
+    if (!this._viewport) return;
+    
+    const offset = this._itemOffsets.get(index) || 0;
+    this._viewport.scrollTo({
+      top: offset,
+      behavior
+    });
+  }
+
+  // Get current state for rendering
+  getState(): VirtualScrollerState {
+    return {
+      viewportHeight: this._viewportHeight,
+      scrollTop: this._scrollTop,
+      totalHeight: this._totalHeight,
+      visibleRange: this._visibleRange,
+      containerOffset: this._itemOffsets.get(this._visibleRange.start) || 0,
+      visibleItems: this._options.items.slice(this._visibleRange.start, this._visibleRange.end + 1)
+    };
+  }
+
+  // Find closest item to a specific condition
+  findClosestIndex<K>(getValue: (item: T) => K, targetValue: K, compare: (a: K, b: K) => number): number {
+    let closestIndex = -1;
+    let closestDifference = Number.POSITIVE_INFINITY;
+
+    this._options.items.forEach((item, index) => {
+      const value = getValue(item);
+      const difference = Math.abs(compare(value, targetValue));
+      
+      if (difference < closestDifference) {
+        closestDifference = difference;
+        closestIndex = index;
+      }
+    });
+
+    return closestIndex;
+  }
+}