@difizen/libro-virtualized 0.1.2

package/src/grid/index.ts

@@ -0,0 +1,14 @@
+export { default as accessibilityOverscanIndicesGetter } from './accessibility-overscanIndices-getter.js';
+export { default as defaultCellRangeRenderer } from './default-cell-range-renderer.js';
+export { default as defaultOverscanIndicesGetter } from './default-overscanIndices-getter.js';
+export { default, default as Grid } from './grid.js';
+export type {
+  Alignment,
+  CellPosition,
+  CellRendererParams,
+  CellSize,
+  NoContentRenderer,
+  OverscanIndicesGetter,
+  RenderedSection,
+  Scroll,
+} from './types.js';

package/src/grid/types.ts

@@ -0,0 +1,112 @@
+import type * as React from 'react';
+
+import type ScalingCellSizeAndPositionManager from './utils/scaling-cell-size-and-position-manager.js';
+
+export type CellPosition = { columnIndex: number; rowIndex: number };
+
+export type CellRendererParams = {
+  columnIndex: number;
+  isScrolling: boolean;
+  isVisible: boolean;
+  key: string;
+  parent: object;
+  rowIndex: number;
+  style: object;
+};
+
+export type CellRenderer = (props: CellRendererParams) => React.ReactNode;
+
+export type CellCache = Record<string, React.ReactNode>;
+export type StyleCache = Record<string, object>;
+
+export type CellRangeRendererParams = {
+  cellCache: CellCache;
+  cellRenderer: CellRenderer;
+  columnSizeAndPositionManager: ScalingCellSizeAndPositionManager;
+  columnStartIndex: number;
+  columnStopIndex: number;
+  deferredMeasurementCache?: object;
+  horizontalOffsetAdjustment: number;
+  isScrolling: boolean;
+  isScrollingOptOut: boolean;
+  parent: object;
+  rowSizeAndPositionManager: ScalingCellSizeAndPositionManager;
+  rowStartIndex: number;
+  rowStopIndex: number;
+  scrollLeft: number;
+  scrollTop: number;
+  styleCache: StyleCache;
+  verticalOffsetAdjustment: number;
+  visibleColumnIndices: Record<any, any>;
+  visibleRowIndices: Record<any, any>;
+};
+
+export type CellRangeRenderer = (params: CellRangeRendererParams) => React.ReactNode[];
+
+export type CellSizeGetter = (params: { index: number }) => number;
+
+export type CellSize = CellSizeGetter | number;
+
+export type NoContentRenderer = () => React.ReactNode | null;
+
+export type Scroll = {
+  clientHeight: number;
+  clientWidth: number;
+  scrollHeight: number;
+  scrollLeft: number;
+  scrollTop: number;
+  scrollWidth: number;
+};
+
+export type ScrollbarPresenceChange = {
+  horizontal: boolean;
+  vertical: boolean;
+  size: number;
+};
+
+export type RenderedSection = {
+  columnOverscanStartIndex: number;
+  columnOverscanStopIndex: number;
+  columnStartIndex: number;
+  columnStopIndex: number;
+  rowOverscanStartIndex: number;
+  rowOverscanStopIndex: number;
+  rowStartIndex: number;
+  rowStopIndex: number;
+};
+
+export type OverscanIndicesGetterParams = {
+  // One of SCROLL_DIRECTION_HORIZONTAL or SCROLL_DIRECTION_VERTICAL
+  direction: 'horizontal' | 'vertical';
+
+  // One of SCROLL_DIRECTION_BACKWARD or SCROLL_DIRECTION_FORWARD
+  scrollDirection: -1 | 1;
+
+  // Number of rows or columns in the current axis
+  cellCount: number;
+
+  // Maximum number of cells to over-render in either direction
+  overscanCellsCount: number;
+
+  // Begin of range of visible cells
+  startIndex: number;
+
+  // End of range of visible cells
+  stopIndex: number;
+};
+
+export type OverscanIndices = {
+  overscanStartIndex: number;
+  overscanStopIndex: number;
+};
+
+export type OverscanIndicesGetter = (
+  params: OverscanIndicesGetterParams,
+) => OverscanIndices;
+
+export type Alignment = 'auto' | 'end' | 'start' | 'center';
+
+export type VisibleCellRange = {
+  start?: number;
+  stop?: number;
+};

package/src/grid/utils/calculate-size-and-position-data-and-update-scroll-offset.ts

@@ -0,0 +1,62 @@
+// @flow
+
+/**
+ * Helper method that determines when to recalculate row or column metadata.
+ */
+
+type Params<T> = {
+  // Number of rows or columns in the current axis
+  cellCount: number;
+
+  // Width or height of cells for the current axis
+  cellSize?: number | null;
+
+  // Method to invoke if cell metadata should be recalculated
+  computeMetadataCallback: (props: T) => void;
+
+  // Parameters to pass to :computeMetadataCallback
+  computeMetadataCallbackProps: T;
+
+  // Newly updated number of rows or columns in the current axis
+  nextCellsCount: number;
+
+  // Newly updated width or height of cells for the current axis
+  nextCellSize?: number | null;
+
+  // Newly updated scroll-to-index
+  nextScrollToIndex: number;
+
+  // Scroll-to-index
+  scrollToIndex: number;
+
+  // Callback to invoke if the scroll position should be recalculated
+  updateScrollOffsetForScrollToIndex: () => void;
+};
+
+export default function calculateSizeAndPositionDataAndUpdateScrollOffset({
+  cellCount,
+  cellSize,
+  computeMetadataCallback,
+  computeMetadataCallbackProps,
+  nextCellsCount,
+  nextCellSize,
+  nextScrollToIndex,
+  scrollToIndex,
+  updateScrollOffsetForScrollToIndex,
+}: Params<any>) {
+  // Don't compare cell sizes if they are functions because inline functions would cause infinite loops.
+  // In that event users should use the manual recompute methods to inform of changes.
+  if (
+    cellCount !== nextCellsCount ||
+    ((typeof cellSize === 'number' || typeof nextCellSize === 'number') &&
+      cellSize !== nextCellSize)
+  ) {
+    computeMetadataCallback(computeMetadataCallbackProps);
+
+    // Updated cell metadata may have hidden the previous scrolled-to item.
+    // In this case we should also update the scrollTop to ensure it stays visible.
+    if (scrollToIndex >= 0 && scrollToIndex === nextScrollToIndex) {
+      updateScrollOffsetForScrollToIndex();
+    }
+  }
+}

package/src/grid/utils/cell-size-and-position-manager-row.ts

@@ -0,0 +1,365 @@
+/* eslint-disable prefer-const */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable no-param-reassign */
+
+import type { Alignment, CellSizeGetter, VisibleCellRange } from '../types.js';
+
+type CellSizeAndPositionManagerParams = {
+  cellCount: number;
+  cellSizeGetter: CellSizeGetter;
+  estimatedCellSize: number;
+  cellsHeight: number[];
+  editorAreaHeight: number[];
+  totalSize: number;
+  editorsOffset: number[];
+};
+
+type ConfigureParams = {
+  cellCount: number;
+  estimatedCellSize: number;
+  cellSizeGetter: CellSizeGetter;
+  cellsHeight: number[];
+  editorAreaHeight: number[];
+  totalSize: number;
+  editorsOffset: number[];
+};
+
+type GetUpdatedOffsetForIndex = {
+  align: Alignment;
+  containerSize: number;
+  currentOffset: number;
+  targetIndex: number;
+};
+
+type GetVisibleCellRangeParams = {
+  containerSize: number;
+  offset: number;
+};
+
+type SizeAndPositionData = {
+  offset: number;
+  size: number;
+};
+
+/**
+ * Just-in-time calculates and caches size and position information for a collection of cells.
+ */
+
+export default class RowCellSizeAndPositionManager {
+  // Cache of size and position data for cells, mapped by cell index.
+  // Note that invalid values may exist in this map so only rely on cells up to this._lastMeasuredIndex
+  _cellSizeAndPositionData: any = {};
+
+  // Measurements for cells up to this index can be trusted; cells afterward should be estimated.
+  _lastMeasuredIndex = -1;
+
+  // Used in deferred mode to track which cells have been queued for measurement.
+  _lastBatchedIndex = -1;
+
+  _cellCount: number;
+  _cellSizeGetter: CellSizeGetter;
+  _estimatedCellSize: number;
+
+  _cellsHeight: number[];
+
+  _editorAreaHeight: number[];
+
+  _totalSize: number;
+
+  _editorsOffset: number[];
+
+  constructor({
+    cellCount,
+    cellSizeGetter,
+    estimatedCellSize,
+    cellsHeight,
+    editorAreaHeight,
+    totalSize,
+    editorsOffset,
+  }: CellSizeAndPositionManagerParams) {
+    // this._cellSizeGetter = cellSizeGetter;
+    this._cellCount = cellCount;
+    this._estimatedCellSize = estimatedCellSize;
+    this._cellsHeight = cellsHeight;
+    this._editorAreaHeight = editorAreaHeight;
+    this._editorsOffset = editorsOffset;
+
+    this._totalSize = totalSize;
+
+    this._lastMeasuredIndex = -1;
+    this._cellSizeAndPositionData = {};
+
+    // this._cellSizeGetter = (params: { index: number }) => {
+    //   // return this._cellsHeight[params.index];
+    //   return this._editorAreaHeight[params.index];
+    // };
+  }
+
+  areOffsetsAdjusted() {
+    return false;
+  }
+
+  configure({
+    cellCount,
+    estimatedCellSize,
+    cellSizeGetter,
+    cellsHeight,
+    editorAreaHeight,
+    totalSize,
+    editorsOffset,
+  }: ConfigureParams) {
+    this._cellCount = cellCount;
+    this._estimatedCellSize = estimatedCellSize;
+    // this._cellSizeGetter = cellSizeGetter;
+    this._cellsHeight = cellsHeight;
+
+    this._editorAreaHeight = editorAreaHeight;
+    this._editorsOffset = editorsOffset;
+
+    this._totalSize = totalSize;
+
+    this._lastMeasuredIndex = -1;
+    this._cellSizeAndPositionData = {};
+  }
+
+  getCellCount(): number {
+    return this._cellCount;
+  }
+
+  getEstimatedCellSize(): number {
+    return this._estimatedCellSize;
+  }
+
+  getLastMeasuredIndex(): number {
+    return this._lastMeasuredIndex;
+  }
+
+  getOffsetAdjustment() {
+    return 0;
+  }
+
+  /**
+   * This method returns the size and position for the cell at the specified index.
+   * It just-in-time calculates (or used cached values) for cells leading up to the index.
+   */
+  getSizeAndPositionOfCell(index: number): SizeAndPositionData {
+    if (index < 0 || index >= this._cellCount) {
+      throw Error(`Requested index ${index} is outside of range 0..${this._cellCount}`);
+    }
+
+    if (index > this._lastMeasuredIndex) {
+      const lastMeasuredCellSizeAndPosition =
+        this.getSizeAndPositionOfLastMeasuredCell();
+      let offset = lastMeasuredCellSizeAndPosition.offset; // + lastMeasuredCellSizeAndPosition.size;
+
+      for (let i = this._lastMeasuredIndex + 1; i <= index; i++) {
+        // const size = this._cellSizeGetter({ index: i });
+        const size = this._editorAreaHeight[i];
+        offset = this._editorsOffset[i]; // 上border高度
+
+        // undefined or NaN probably means a logic error in the size getter.
+        // null means we're using CellMeasurer and haven't yet measured a given index.
+        if (size === undefined || isNaN(size)) {
+          throw Error(`Invalid size returned for cell ${i} of value ${size}`);
+        } else if (size === null) {
+          this._cellSizeAndPositionData[i] = {
+            offset,
+            size: 0,
+          };
+
+          this._lastBatchedIndex = index;
+        } else {
+          this._cellSizeAndPositionData[i] = {
+            offset,
+            size,
+          };
+
+          this._lastMeasuredIndex = index;
+        }
+      }
+    }
+
+    return this._cellSizeAndPositionData[index];
+  }
+
+  getSizeAndPositionOfLastMeasuredCell(): SizeAndPositionData {
+    return this._lastMeasuredIndex >= 0
+      ? this._cellSizeAndPositionData[this._lastMeasuredIndex]
+      : {
+          offset: 0,
+          size: 0,
+        };
+  }
+
+  /**
+   * Total size of all cells being measured.
+   * This value will be completely estimated initially.
+   * As cells are measured, the estimate will be updated.
+   */
+  getTotalSize(): number {
+    return this._totalSize;
+
+    // const lastMeasuredCellSizeAndPosition = this.getSizeAndPositionOfLastMeasuredCell();
+    // const totalSizeOfMeasuredCells =
+    //   lastMeasuredCellSizeAndPosition.offset + lastMeasuredCellSizeAndPosition.size;
+    // const numUnmeasuredCells = this._cellCount - this._lastMeasuredIndex - 1;
+    // const totalSizeOfUnmeasuredCells = numUnmeasuredCells * this._estimatedCellSize;
+    // return totalSizeOfMeasuredCells + totalSizeOfUnmeasuredCells;
+  }
+
+  /**
+   * Determines a new offset that ensures a certain cell is visible, given the current offset.
+   * If the cell is already visible then the current offset will be returned.
+   * If the current offset is too great or small, it will be adjusted just enough to ensure the specified index is visible.
+   *
+   * @param align Desired alignment within container; one of "auto" (default), "start", or "end"
+   * @param containerSize Size (width or height) of the container viewport
+   * @param currentOffset Container's current (x or y) offset
+   * @param totalSize Total size (width or height) of all cells
+   * @return Offset to use to ensure the specified cell is visible
+   */
+  getUpdatedOffsetForIndex({
+    align = 'auto',
+    containerSize,
+    currentOffset,
+    targetIndex,
+  }: GetUpdatedOffsetForIndex): number {
+    if (containerSize <= 0) {
+      return 0;
+    }
+
+    const datum = this.getSizeAndPositionOfCell(targetIndex);
+    const minOffset = datum.offset;
+
+    const maxOffset = datum.offset + datum.size - containerSize;
+
+    let idealOffset;
+
+    switch (align) {
+      case 'start':
+        idealOffset = minOffset;
+        break;
+      case 'end':
+        idealOffset = maxOffset;
+        break;
+      case 'center':
+        idealOffset = minOffset + datum.size / 2;
+        break;
+      default:
+        idealOffset = minOffset;
+        break;
+    }
+
+    const totalSize = this.getTotalSize();
+
+    return Math.max(0, Math.min(totalSize - containerSize, idealOffset));
+  }
+
+  getVisibleCellRange(params: GetVisibleCellRangeParams): VisibleCellRange {
+    let { containerSize, offset } = params;
+
+    const totalSize = this.getTotalSize();
+
+    if (totalSize === 0) {
+      return {};
+    }
+
+    const maxOffset = offset + containerSize;
+    const start = this._findNearestCell(offset);
+
+    const datum = this.getSizeAndPositionOfCell(start);
+    offset = datum.offset;
+
+    let stop = start;
+
+    while (offset < maxOffset && stop < this._cellCount - 1) {
+      stop++;
+
+      offset = this.getSizeAndPositionOfCell(stop).offset;
+    }
+
+    return {
+      start,
+      stop,
+    };
+  }
+
+  /**
+   * Clear all cached values for cells after the specified index.
+   * This method should be called for any cell that has changed its size.
+   * It will not immediately perform any calculations; they'll be performed the next time getSizeAndPositionOfCell() is called.
+   */
+  resetCell(index: number): void {
+    this._lastMeasuredIndex = Math.min(this._lastMeasuredIndex, index - 1);
+  }
+
+  _binarySearch(high: number, low: number, offset: number): number {
+    while (low <= high) {
+      const middle = low + Math.floor((high - low) / 2);
+      const currentOffset =
+        this.getSizeAndPositionOfCell(middle).offset ||
+        (middle > 0 ? this.getSizeAndPositionOfCell(middle - 1).offset || 0 : 0);
+
+      if (currentOffset === offset) {
+        return middle;
+      } else if (currentOffset < offset) {
+        low = middle + 1;
+      } else if (currentOffset > offset) {
+        high = middle - 1;
+      }
+    }
+
+    if (low > 0) {
+      return low - 1;
+    } else {
+      return 0;
+    }
+  }
+
+  _exponentialSearch(index: number, offset: number): number {
+    let interval = 1;
+
+    while (
+      index < this._cellCount &&
+      this.getSizeAndPositionOfCell(index).offset < offset
+    ) {
+      index += interval;
+      interval *= 2;
+    }
+
+    return this._binarySearch(
+      Math.min(index, this._cellCount - 1),
+      Math.floor(index / 2),
+      offset,
+    );
+  }
+
+  /**
+   * Searches for the cell (index) nearest the specified offset.
+   *
+   * If no exact match is found the next lowest cell index will be returned.
+   * This allows partially visible cells (with offsets just before/above the fold) to be visible.
+   */
+  _findNearestCell(offset: number): number {
+    if (isNaN(offset)) {
+      throw Error(`Invalid offset ${offset} specified`);
+    }
+
+    // Our search algorithms find the nearest match at or below the specified offset.
+    // So make sure the offset is at least 0 or no match will be found.
+    offset = Math.max(0, offset);
+
+    const lastMeasuredCellSizeAndPosition = this.getSizeAndPositionOfLastMeasuredCell();
+    const lastMeasuredIndex = Math.max(0, this._lastMeasuredIndex);
+
+    if (lastMeasuredCellSizeAndPosition.offset >= offset) {
+      // If we've already measured cells within this range just use a binary search as it's faster.
+      return this._binarySearch(lastMeasuredIndex, 0, offset);
+    } else {
+      // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
+      // The exponential search avoids pre-computing sizes for the full set of cells as a binary search would.
+      // The overall complexity for this approach is O(log n).
+      return this._exponentialSearch(lastMeasuredIndex, offset);
+    }
+  }
+}