From 6a230b99798196730d9490ec86cebbfbd63d45a9 Mon Sep 17 00:00:00 2001
From: inokawa <48897392+inokawa@users.noreply.github.com>
Date: Wed, 27 Sep 2023 23:24:37 +0900
Subject: [PATCH] Reimplement VGrid with css grid

---
 src/core/utils.ts                |   9 ++
 src/react/VGrid.tsx              | 195 +++++++++++++++++++++----------
 stories/basics/VGrid.stories.tsx |  38 +++++-
 3 files changed, 178 insertions(+), 64 deletions(-)

diff --git a/src/core/utils.ts b/src/core/utils.ts
index 8fe017212..35c8980f3 100644
--- a/src/core/utils.ts
+++ b/src/core/utils.ts
@@ -4,6 +4,7 @@ export const abs = Math.abs;
 export const now = Date.now;
 export const values = Object.values;
 export const isArray = Array.isArray;
+export const arrayFrom = Array.from;
 export const timeout = setTimeout;
 
 export const clamp = (
@@ -14,6 +15,14 @@ export const clamp = (
 
 export const exists = <T>(v: T): v is Exclude<T, null | undefined> => v != null;
 
+export const indexes = (start: number, end: number): number[] => {
+  const array: number[] = [];
+  for (let i = start; i <= end; i++) {
+    array.push(i);
+  }
+  return array;
+};
+
 export const median = (arr: number[]): number => {
   const s = [...arr].sort((a, b) => a - b);
   const mid = (arr.length / 2) | 0;
diff --git a/src/react/VGrid.tsx b/src/react/VGrid.tsx
index c967c8196..72d71e154 100644
--- a/src/react/VGrid.tsx
+++ b/src/react/VGrid.tsx
@@ -20,7 +20,7 @@ import {
 } from "../core/store";
 import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
 import { useSelector } from "./useSelector";
-import { values } from "../core/utils";
+import { arrayFrom, indexes, values } from "../core/utils";
 import { createScroller } from "../core/scroller";
 import {
   clampEndIndex,
@@ -65,6 +65,8 @@ type CellProps = {
   _rowIndex: number;
   _colIndex: number;
   _element: "div";
+  _fixedCol?: boolean;
+  _fixedRow?: boolean;
 };
 
 const Cell = memo(
@@ -76,6 +78,8 @@ const Cell = memo(
     _rowIndex: rowIndex,
     _colIndex: colIndex,
     _element: Element,
+    _fixedCol,
+    _fixedRow,
   }: CellProps): ReactElement => {
     const ref = useRef<HTMLDivElement>(null);
 
@@ -91,18 +95,6 @@ const Cell = memo(
       UPDATE_SIZE,
       true
     );
-    const vHide = useSelector(
-      vStore,
-      () => vStore._isUnmeasuredItem(rowIndex),
-      UPDATE_SIZE,
-      true
-    );
-    const hHide = useSelector(
-      hStore,
-      () => hStore._isUnmeasuredItem(colIndex),
-      UPDATE_SIZE,
-      true
-    );
     const height = useSelector(
       vStore,
       () => vStore._getItemSize(rowIndex),
@@ -130,15 +122,34 @@ const Cell = memo(
             display: "grid",
             margin: 0,
             padding: 0,
-            position: "absolute",
-            top: top,
-            [isRtlDocument() ? "right" : "left"]: left,
-            visibility: vHide || hHide ? "hidden" : "visible",
-            minHeight: height,
-            minWidth: width,
+            gridColumn: `${colIndex + 1} / ${colIndex + 1}`,
+            gridRow: `${rowIndex + 1} / ${rowIndex + 1}`,
+            visibility: "visible",
+            // textOverflow: "ellipsis",
+            // minHeight: height,
+            // minWidth: width,
           };
+          if (_fixedCol) {
+            style.position = "sticky";
+            style[isRtlDocument() ? "right" : "left"] = left;
+            style.zIndex = 1;
+          }
+          if (_fixedRow) {
+            style.position = "sticky";
+            style.top = top;
+            style.zIndex = ((style.zIndex as number) || 0) + 1;
+          }
           return style;
-        }, [top, left, width, height, vHide, hHide])}
+        }, [
+          top,
+          left,
+          // width,
+          // height,
+          colIndex,
+          rowIndex,
+          _fixedCol,
+          _fixedRow,
+        ])}
       >
         {children}
       </Element>
@@ -207,6 +218,14 @@ export interface VGridProps extends ViewportComponentAttributes {
    * Total column length of grid.
    */
   col: number;
+  /**
+   *
+   */
+  fixedRows?: number;
+  /**
+   *
+   */
+  fixedCols?: number;
   /**
    * Cell height hint for unmeasured items. It's recommended to specify this prop if item sizes are fixed and known, or much larger than the defaultValue. It will help to reduce scroll jump when items are measured.
    * @defaultValue 40
@@ -256,9 +275,11 @@ export const VGrid = forwardRef<VGridHandle, VGridProps>(
       children,
       row: rowCount,
       col: colCount,
+      fixedCols = 0,
+      fixedRows = 0,
       cellHeight = 40,
       cellWidth = 100,
-      overscan = 2,
+      overscan = 4,
       initialRowCount,
       initialColCount,
       components: {
@@ -400,12 +421,10 @@ export const VGrid = forwardRef<VGridHandle, VGridProps>(
     const render = useMemo(() => {
       const cache = new Map<string, ReactNode>();
       return (rowIndex: number, colIndex: number) => {
-        let e: ReactNode | undefined = cache.get(genKey(rowIndex, colIndex));
+        const key = genKey(rowIndex, colIndex);
+        let e: ReactNode | undefined = cache.get(key);
         if (!e) {
-          cache.set(
-            genKey(rowIndex, colIndex),
-            (e = children({ rowIndex, colIndex }))
-          );
+          cache.set(key, (e = children({ rowIndex, colIndex })));
         }
         return e;
       };
@@ -434,49 +453,33 @@ export const VGrid = forwardRef<VGridHandle, VGridProps>(
       colCount
     );
 
-    const items = useMemo(() => {
-      const res: ReactElement[] = [];
-      for (let i = overscanedStartRowIndex; i <= overscanedEndRowIndex; i++) {
-        for (let j = overscanedStartColIndex; j <= overscanedEndColIndex; j++) {
-          res.push(
-            <Cell
-              key={genKey(i, j)}
-              _resizer={resizer}
-              _vStore={vStore}
-              _hStore={hStore}
-              _rowIndex={i}
-              _colIndex={j}
-              _element={ItemElement as "div"}
-              _children={render(i, j)}
-            />
-          );
-        }
+    let gridTemplateColumns = "";
+    for (let i = 0; i < colCount; i++) {
+      if (i !== 0) {
+        gridTemplateColumns += " ";
       }
-
-      return res;
-    }, [
-      render,
-      overscanedStartRowIndex,
-      overscanedEndRowIndex,
-      overscanedStartColIndex,
-      overscanedEndColIndex,
-    ]);
+      gridTemplateColumns += `min(${hStore._getItemSize(i)}px)`;
+    }
+    let gridTemplateRows = "";
+    for (let i = 0; i < rowCount; i++) {
+      if (i !== 0) {
+        gridTemplateRows += " ";
+      }
+      // gridTemplateRows += `min(${vStore._getItemSize(i)}px)`;
+    }
 
     return (
-      <Viewport
+      <div
         ref={rootRef}
-        width={width}
-        height={height}
-        scrolling={vScrolling || hScrolling}
-        attrs={useMemo(
+        // width={width}
+        // height={height}
+        // scrolling={vScrolling || hScrolling}
+        {...useMemo(
           () => ({
             ...viewportAttrs,
             style: {
               overflow: "auto",
               contain: "strict",
-              // transform: "translate3d(0px, 0px, 0px)",
-              // willChange: "scroll-position",
-              // backfaceVisibility: "hidden",
               width: "100%",
               height: "100%",
               ...viewportAttrs.style,
@@ -485,8 +488,76 @@ export const VGrid = forwardRef<VGridHandle, VGridProps>(
           values(viewportAttrs)
         )}
       >
-        {items}
-      </Viewport>
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: `repeat(${colCount}, 1fr)`,
+            // gridTemplateColumns,
+            // gridTemplateRows,
+            // gridTemplateRows: "auto",
+            // gridTemplateRows: "fit-content",
+            // TODO fallback with observerd size. 画面外に出たらrowが消えちゃうので。。。。。
+            gridTemplateRows: `repeat(${rowCount}, min-content)`,
+            // gridTemplateRows: "min-content",
+            // gridAutoColumns: "max-content",
+            // gridAutoRows: "max-content",
+            // gridAutoRows:  `minmax(100px, auto)`,
+            width,
+            height,
+            visibility: "hidden",
+            pointerEvents: vScrolling || hScrolling ? "none" : "auto",
+          }}
+        >
+          {useMemo(() => {
+            const elements: ReactElement[] = [];
+
+            const fixedRowsSet = new Set(indexes(0, fixedRows - 1));
+            const fixedColsSet = new Set(indexes(0, fixedCols - 1));
+
+            const renderableRows = arrayFrom(
+              new Set([
+                ...arrayFrom(fixedRowsSet),
+                ...indexes(overscanedStartRowIndex, overscanedEndRowIndex),
+              ])
+            );
+            const renderableCols = arrayFrom(
+              new Set([
+                ...arrayFrom(fixedColsSet),
+                ...indexes(overscanedStartColIndex, overscanedEndColIndex),
+              ])
+            );
+
+            for (const rowIndex of renderableRows) {
+              for (const colIndex of renderableCols) {
+                elements.push(
+                  <Cell
+                    key={genKey(rowIndex, colIndex)}
+                    _resizer={resizer}
+                    _vStore={vStore}
+                    _hStore={hStore}
+                    _rowIndex={rowIndex}
+                    _colIndex={colIndex}
+                    _element={ItemElement as "div"}
+                    _children={render(rowIndex, colIndex)}
+                    _fixedCol={fixedColsSet.has(colIndex)}
+                    _fixedRow={fixedRowsSet.has(rowIndex)}
+                  />
+                );
+              }
+            }
+
+            return elements;
+          }, [
+            render,
+            overscanedStartRowIndex,
+            overscanedEndRowIndex,
+            overscanedStartColIndex,
+            overscanedEndColIndex,
+            fixedCols,
+            fixedRows,
+          ])}
+        </div>
+      </div>
     );
   }
 );
diff --git a/stories/basics/VGrid.stories.tsx b/stories/basics/VGrid.stories.tsx
index 102ce1ebb..88d6de922 100644
--- a/stories/basics/VGrid.stories.tsx
+++ b/stories/basics/VGrid.stories.tsx
@@ -64,8 +64,8 @@ export const DynamicHeight: StoryObj = {
             <div>
               {rowIndex} / {colIndex}
             </div>
-            {Array.from({ length: (rowIndex % 8) + 1 }, () => (
-              <div>Hello world!</div>
+            {Array.from({ length: (rowIndex % 8) + 1 }, (_, i) => (
+              <div key={i}>Hello world!</div>
             ))}
           </div>
         )}
@@ -74,6 +74,40 @@ export const DynamicHeight: StoryObj = {
   },
 };
 
+export const Stiky: StoryObj = {
+  render: () => {
+    const fixedCols = 2;
+    const fixedRows = 1;
+    return (
+      <VGrid
+        style={{ height: "100vh" }}
+        row={1000}
+        col={500}
+        fixedCols={fixedCols}
+        fixedRows={fixedRows}
+      >
+        {({ rowIndex, colIndex }) => (
+          <div
+            style={{
+              border: "solid 1px gray",
+              background:
+                rowIndex < fixedRows
+                  ? "darkgray"
+                  : colIndex < fixedCols
+                  ? "lightgray"
+                  : "white",
+              color: rowIndex < fixedRows ? "white" : undefined,
+              padding: 4,
+            }}
+          >
+            {rowIndex} / {colIndex}
+          </div>
+        )}
+      </VGrid>
+    );
+  },
+};
+
 export const DynamicWidth: StoryObj = {
   render: () => {
     return (