mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-03-24 14:42:11 -03:00
checkpoint
This commit is contained in:
Will Miao
411
static/js/utils/VirtualScroller.js
Normal file
411
static/js/utils/VirtualScroller.js
Normal file
@@ -0,0 +1,411 @@
|
||||
import { state, getCurrentPageState } from '../state/index.js';
|
||||
import { showToast } from './uiHelpers.js';
|
||||
|
||||
export class VirtualScroller {
|
||||
constructor(options) {
|
||||
// Configuration
|
||||
this.gridElement = options.gridElement;
|
||||
this.createItemFn = options.createItemFn;
|
||||
this.fetchItemsFn = options.fetchItemsFn;
|
||||
this.overscan = options.overscan || 5; // Extra items to render above/below viewport
|
||||
this.containerElement = options.containerElement || this.gridElement.parentElement;
|
||||
this.batchSize = options.batchSize || 50;
|
||||
this.pageSize = options.pageSize || 100;
|
||||
this.itemAspectRatio = 896/1152; // Aspect ratio of cards
|
||||
|
||||
// State
|
||||
this.items = []; // All items metadata
|
||||
this.renderedItems = new Map(); // Map of rendered DOM elements by index
|
||||
this.totalItems = 0;
|
||||
this.isLoading = false;
|
||||
this.hasMore = true;
|
||||
this.lastScrollTop = 0;
|
||||
this.scrollDirection = 'down';
|
||||
this.lastRenderRange = { start: 0, end: 0 };
|
||||
this.pendingScroll = null;
|
||||
this.resizeObserver = null;
|
||||
|
||||
// Responsive layout state
|
||||
this.itemWidth = 0;
|
||||
this.itemHeight = 0;
|
||||
this.columnsCount = 0;
|
||||
this.gridPadding = 12; // Gap between cards
|
||||
this.columnGap = 12; // Horizontal gap
|
||||
|
||||
// Initialize
|
||||
this.initializeContainer();
|
||||
this.setupEventListeners();
|
||||
this.calculateLayout();
|
||||
}
|
||||
|
||||
initializeContainer() {
|
||||
// Add virtual scroll class to grid
|
||||
this.gridElement.classList.add('virtual-scroll');
|
||||
|
||||
// Set the container to have relative positioning
|
||||
if (getComputedStyle(this.containerElement).position === 'static') {
|
||||
this.containerElement.style.position = 'relative';
|
||||
}
|
||||
|
||||
// Create a spacer element with the total height
|
||||
this.spacerElement = document.createElement('div');
|
||||
this.spacerElement.className = 'virtual-scroll-spacer';
|
||||
this.spacerElement.style.width = '100%';
|
||||
this.spacerElement.style.height = '0px'; // Will be updated as items are loaded
|
||||
this.spacerElement.style.pointerEvents = 'none';
|
||||
|
||||
// The grid will be used for the actual visible items
|
||||
this.gridElement.style.position = 'relative';
|
||||
this.gridElement.style.minHeight = '0';
|
||||
|
||||
// Place the spacer inside the grid container
|
||||
this.gridElement.appendChild(this.spacerElement);
|
||||
}
|
||||
|
||||
calculateLayout() {
|
||||
// Get container width
|
||||
const containerWidth = this.containerElement.clientWidth;
|
||||
|
||||
// Calculate ideal card width based on breakpoints
|
||||
let baseCardWidth = 260; // Default for 1080p
|
||||
|
||||
// Adjust card width based on screen width
|
||||
if (window.innerWidth >= 3000) { // 4K
|
||||
baseCardWidth = 280;
|
||||
} else if (window.innerWidth >= 2000) { // 2K/1440p
|
||||
baseCardWidth = 270;
|
||||
}
|
||||
|
||||
// Calculate how many columns can fit
|
||||
const availableWidth = Math.min(
|
||||
containerWidth,
|
||||
window.innerWidth >= 3000 ? 2400 : // 4K
|
||||
window.innerWidth >= 2000 ? 1800 : // 2K
|
||||
1400 // 1080p
|
||||
);
|
||||
|
||||
// Calculate column count based on available width and card width
|
||||
this.columnsCount = Math.max(1, Math.floor((availableWidth + this.columnGap) / (baseCardWidth + this.columnGap)));
|
||||
|
||||
// Calculate actual item width based on container and column count
|
||||
this.itemWidth = (availableWidth - (this.columnsCount - 1) * this.columnGap) / this.columnsCount;
|
||||
|
||||
// Calculate height based on aspect ratio
|
||||
this.itemHeight = this.itemWidth / this.itemAspectRatio;
|
||||
|
||||
// Calculate the left offset to center the grid
|
||||
this.leftOffset = Math.max(0, (containerWidth - availableWidth) / 2);
|
||||
|
||||
// Log layout info
|
||||
console.log('Virtual Scroll Layout:', {
|
||||
containerWidth,
|
||||
availableWidth,
|
||||
columnsCount: this.columnsCount,
|
||||
itemWidth: this.itemWidth,
|
||||
itemHeight: this.itemHeight,
|
||||
leftOffset: this.leftOffset
|
||||
});
|
||||
|
||||
// Update grid element max-width to match available width
|
||||
this.gridElement.style.maxWidth = `${availableWidth}px`;
|
||||
|
||||
// Update spacer height
|
||||
this.updateSpacerHeight();
|
||||
|
||||
// Re-render with new layout
|
||||
this.clearRenderedItems();
|
||||
this.scheduleRender();
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
// Debounced scroll handler
|
||||
this.scrollHandler = this.debounce(() => this.handleScroll(), 10);
|
||||
this.containerElement.addEventListener('scroll', this.scrollHandler);
|
||||
|
||||
// Window resize handler for layout recalculation
|
||||
this.resizeHandler = this.debounce(() => {
|
||||
this.calculateLayout();
|
||||
}, 150);
|
||||
|
||||
window.addEventListener('resize', this.resizeHandler);
|
||||
|
||||
// Use ResizeObserver for more accurate container size detection
|
||||
if (typeof ResizeObserver !== 'undefined') {
|
||||
this.resizeObserver = new ResizeObserver(this.debounce(() => {
|
||||
this.calculateLayout();
|
||||
}, 150));
|
||||
|
||||
this.resizeObserver.observe(this.containerElement);
|
||||
}
|
||||
}
|
||||
|
||||
async initialize() {
|
||||
try {
|
||||
await this.loadInitialBatch();
|
||||
this.scheduleRender();
|
||||
} catch (err) {
|
||||
console.error('Failed to initialize virtual scroller:', err);
|
||||
showToast('Failed to load items', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
async loadInitialBatch() {
|
||||
const pageState = getCurrentPageState();
|
||||
if (this.isLoading) return;
|
||||
|
||||
this.isLoading = true;
|
||||
try {
|
||||
const { items, totalItems, hasMore } = await this.fetchItemsFn(1, this.pageSize);
|
||||
this.items = items || [];
|
||||
this.totalItems = totalItems || 0;
|
||||
this.hasMore = hasMore;
|
||||
|
||||
// Update the spacer height based on the total number of items
|
||||
this.updateSpacerHeight();
|
||||
|
||||
// Reset page state to sync with our virtual scroller
|
||||
pageState.currentPage = 2; // Next page to load would be 2
|
||||
pageState.hasMore = this.hasMore;
|
||||
pageState.isLoading = false;
|
||||
|
||||
return { items, totalItems, hasMore };
|
||||
} catch (err) {
|
||||
console.error('Failed to load initial batch:', err);
|
||||
this.isLoading = false;
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
async loadMoreItems() {
|
||||
const pageState = getCurrentPageState();
|
||||
if (this.isLoading || !this.hasMore) return;
|
||||
|
||||
this.isLoading = true;
|
||||
pageState.isLoading = true;
|
||||
|
||||
try {
|
||||
const { items, hasMore } = await this.fetchItemsFn(pageState.currentPage, this.pageSize);
|
||||
|
||||
if (items && items.length > 0) {
|
||||
this.items = [...this.items, ...items];
|
||||
this.hasMore = hasMore;
|
||||
pageState.hasMore = hasMore;
|
||||
|
||||
// Update page for next request
|
||||
pageState.currentPage++;
|
||||
|
||||
// Update the spacer height
|
||||
this.updateSpacerHeight();
|
||||
|
||||
// Render the newly loaded items if they're in view
|
||||
this.scheduleRender();
|
||||
} else {
|
||||
this.hasMore = false;
|
||||
pageState.hasMore = false;
|
||||
}
|
||||
|
||||
return items;
|
||||
} catch (err) {
|
||||
console.error('Failed to load more items:', err);
|
||||
showToast('Failed to load more items', 'error');
|
||||
} finally {
|
||||
this.isLoading = false;
|
||||
pageState.isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
updateSpacerHeight() {
|
||||
if (this.columnsCount === 0) return;
|
||||
|
||||
// Calculate total rows needed based on total items and columns
|
||||
const totalRows = Math.ceil(this.totalItems / this.columnsCount);
|
||||
const totalHeight = totalRows * this.itemHeight;
|
||||
|
||||
// Update spacer height to represent all items
|
||||
this.spacerElement.style.height = `${totalHeight}px`;
|
||||
}
|
||||
|
||||
getVisibleRange() {
|
||||
const scrollTop = this.containerElement.scrollTop;
|
||||
const viewportHeight = this.containerElement.clientHeight;
|
||||
|
||||
// Calculate the visible row range
|
||||
const startRow = Math.floor(scrollTop / this.itemHeight);
|
||||
const endRow = Math.ceil((scrollTop + viewportHeight) / this.itemHeight);
|
||||
|
||||
// Add overscan for smoother scrolling
|
||||
const overscanRows = this.overscan;
|
||||
const firstRow = Math.max(0, startRow - overscanRows);
|
||||
const lastRow = Math.min(Math.ceil(this.totalItems / this.columnsCount), endRow + overscanRows);
|
||||
|
||||
// Calculate item indices
|
||||
const firstIndex = firstRow * this.columnsCount;
|
||||
const lastIndex = Math.min(this.totalItems, lastRow * this.columnsCount);
|
||||
|
||||
return { start: firstIndex, end: lastIndex };
|
||||
}
|
||||
|
||||
scheduleRender() {
|
||||
if (this.renderScheduled) return;
|
||||
|
||||
this.renderScheduled = true;
|
||||
requestAnimationFrame(() => {
|
||||
this.renderItems();
|
||||
this.renderScheduled = false;
|
||||
});
|
||||
}
|
||||
|
||||
renderItems() {
|
||||
if (this.items.length === 0 || this.columnsCount === 0) return;
|
||||
|
||||
const { start, end } = this.getVisibleRange();
|
||||
|
||||
// Check if render range has significantly changed
|
||||
const isSameRange =
|
||||
start >= this.lastRenderRange.start &&
|
||||
end <= this.lastRenderRange.end &&
|
||||
Math.abs(start - this.lastRenderRange.start) < 10;
|
||||
|
||||
if (isSameRange) return;
|
||||
|
||||
this.lastRenderRange = { start, end };
|
||||
|
||||
// Determine which items need to be added and removed
|
||||
const currentIndices = new Set();
|
||||
for (let i = start; i < end && i < this.items.length; i++) {
|
||||
currentIndices.add(i);
|
||||
}
|
||||
|
||||
// Remove items that are no longer visible
|
||||
for (const [index, element] of this.renderedItems.entries()) {
|
||||
if (!currentIndices.has(index)) {
|
||||
element.remove();
|
||||
this.renderedItems.delete(index);
|
||||
}
|
||||
}
|
||||
|
||||
// Add new visible items
|
||||
for (let i = start; i < end && i < this.items.length; i++) {
|
||||
if (!this.renderedItems.has(i)) {
|
||||
const item = this.items[i];
|
||||
const element = this.createItemElement(item, i);
|
||||
this.gridElement.appendChild(element);
|
||||
this.renderedItems.set(i, element);
|
||||
}
|
||||
}
|
||||
|
||||
// If we're close to the end and have more items to load, fetch them
|
||||
if (end > this.items.length - (this.columnsCount * 2) && this.hasMore && !this.isLoading) {
|
||||
this.loadMoreItems();
|
||||
}
|
||||
}
|
||||
|
||||
clearRenderedItems() {
|
||||
this.renderedItems.forEach(element => element.remove());
|
||||
this.renderedItems.clear();
|
||||
this.lastRenderRange = { start: 0, end: 0 };
|
||||
}
|
||||
|
||||
refreshWithData(items, totalItems, hasMore) {
|
||||
this.items = items || [];
|
||||
this.totalItems = totalItems || 0;
|
||||
this.hasMore = hasMore;
|
||||
this.updateSpacerHeight();
|
||||
|
||||
// Clear all rendered items and redraw
|
||||
this.clearRenderedItems();
|
||||
this.scheduleRender();
|
||||
}
|
||||
|
||||
createItemElement(item, index) {
|
||||
// Create the DOM element
|
||||
const element = this.createItemFn(item);
|
||||
|
||||
// Add virtual scroll item class
|
||||
element.classList.add('virtual-scroll-item');
|
||||
|
||||
// Calculate the position
|
||||
const row = Math.floor(index / this.columnsCount);
|
||||
const col = index % this.columnsCount;
|
||||
|
||||
// Calculate precise positions
|
||||
const topPos = row * this.itemHeight;
|
||||
const leftPos = this.leftOffset + (col * (this.itemWidth + this.columnGap));
|
||||
|
||||
// Position the element with absolute positioning
|
||||
element.style.position = 'absolute';
|
||||
element.style.left = `${leftPos}px`;
|
||||
element.style.top = `${topPos}px`;
|
||||
element.style.width = `${this.itemWidth}px`;
|
||||
element.style.height = `${this.itemHeight}px`;
|
||||
|
||||
return element;
|
||||
}
|
||||
|
||||
handleScroll() {
|
||||
// Determine scroll direction
|
||||
const scrollTop = this.containerElement.scrollTop;
|
||||
this.scrollDirection = scrollTop > this.lastScrollTop ? 'down' : 'up';
|
||||
this.lastScrollTop = scrollTop;
|
||||
|
||||
// Render visible items
|
||||
this.scheduleRender();
|
||||
|
||||
// If we're near the bottom and have more items, load them
|
||||
const { clientHeight, scrollHeight } = this.containerElement;
|
||||
const scrollBottom = scrollTop + clientHeight;
|
||||
const scrollThreshold = scrollHeight - (this.itemHeight * this.overscan);
|
||||
|
||||
if (scrollBottom >= scrollThreshold && this.hasMore && !this.isLoading) {
|
||||
this.loadMoreItems();
|
||||
}
|
||||
}
|
||||
|
||||
reset() {
|
||||
// Remove all rendered items
|
||||
this.clearRenderedItems();
|
||||
|
||||
// Reset state
|
||||
this.items = [];
|
||||
this.totalItems = 0;
|
||||
this.hasMore = true;
|
||||
|
||||
// Reset spacer height
|
||||
this.spacerElement.style.height = '0px';
|
||||
|
||||
// Schedule a re-render
|
||||
this.scheduleRender();
|
||||
}
|
||||
|
||||
dispose() {
|
||||
// Remove event listeners
|
||||
this.containerElement.removeEventListener('scroll', this.scrollHandler);
|
||||
window.removeEventListener('resize', this.resizeHandler);
|
||||
|
||||
// Clean up the resize observer if present
|
||||
if (this.resizeObserver) {
|
||||
this.resizeObserver.disconnect();
|
||||
}
|
||||
|
||||
// Remove rendered elements
|
||||
this.clearRenderedItems();
|
||||
|
||||
// Remove spacer
|
||||
this.spacerElement.remove();
|
||||
|
||||
// Remove virtual scroll class
|
||||
this.gridElement.classList.remove('virtual-scroll');
|
||||
}
|
||||
|
||||
// Utility method for debouncing
|
||||
debounce(func, wait) {
|
||||
let timeout;
|
||||
return function(...args) {
|
||||
const context = this;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(() => func.apply(context, args), wait);
|
||||
};
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user