test: test 환경 오차 범위 수정 및 centerStartIndex의 수정

Author: daybrush

packages/infinitegrid/src/Infinite.ts

@@ -466,12 +466,18 @@ export class Infinite extends Component<InfiniteEvents> {
     return this.itemKeys[key];
   }
   public getItemPartByKey(partKey: string | number) {
-    let itemPart!: InfiniteItemPart;
+    let itemPart!: {
+      itemIndex: number;
+      part: InfiniteItemPart;
+    };
 
-    this.items.forEach((item) => {
+    this.items.forEach((item, itemIndex) => {
       item.parts?.forEach((part) => {
         if (part.key === partKey) {
-          itemPart = part;
+          itemPart = {
+            itemIndex: itemIndex,
+            part,
+          };
         }
       });
     });
@@ -491,38 +497,55 @@ export class Infinite extends Component<InfiniteEvents> {
    * 보이는 영역의 가운데를 기준으로 스크롤을 한다.
    */
   public getVisibleAreaByParts(parts: InfiniteItemPart[]) {
-    const nextParts = parts.map((part) => this.getItemPartByKey(part.key))
-      .filter(Boolean)
-      .filter((p) => p.pos !== INVISIBLE_POS);
+    const nextPartInfos = parts.map((part) => this.getItemPartByKey(part.key))
+      .filter(Boolean);
 
-    if (!nextParts.length) {
+    if (!nextPartInfos.length) {
       return null;
     }
+
+    let startCursor = Infinity;
+    let endCursor = -1;
+
+    nextPartInfos.forEach(part => {
+      startCursor = Math.min(part.itemIndex, startCursor);
+      endCursor = Math.min(part.itemIndex, endCursor);
+    });
+    const nextParts = nextPartInfos.map(({ part }) => part);
     const centerPos = getCenterPosByParts(nextParts);
 
     return {
       parts: nextParts,
       centerPos,
+      startCursor,
+      endCursor,
     };
   }
   /**
    * 스크롤 가운데 위치에 가장 가까운 요소들
    */
   public getVisibleArea(scrollPos: number) {
+    const items = this.items;
     const centerScrollPos = scrollPos + this.size / 2;
     const visibleItems = this.getRenderedVisibleItems();
 
     if (!visibleItems.length) {
       return null;
     }
-    const minParts: Array<[number, InfiniteItemPart]> = [];
+    const minParts: Array<[number, {
+      itemIndex: number;
+      part: InfiniteItemPart;
+    }]> = [];
 
     visibleItems.forEach((item) => {
-      item.parts?.forEach((part) => {
+      item.parts?.filter((p) => p.pos !== INVISIBLE_POS).forEach((part) => {
         const centerPos = part.pos + part.size / 2;
         const minDist = Math.abs(centerScrollPos - centerPos);
 
-        minParts.push([minDist, part]);
+        minParts.push([minDist, {
+          part,
+          itemIndex: items.findIndex(allItem => allItem.key === item.key),
+        }]);
       });
     });
 
@@ -537,16 +560,21 @@ export class Infinite extends Component<InfiniteEvents> {
       return null;
     }
 
-    const visibleParts = minParts.sort(([minPos1], [minPos2]) => {
+    const visiblePartInfos = minParts.sort(([minPos1], [minPos2]) => {
       return minPos1 - minPos2;
     }).slice(0, maxOutlineLength).map(([, part]) => part);
 
-    if (!visibleParts.length)  {
+    if (!visiblePartInfos.length)  {
       return null;
     }
+
+    const visibleParts = visiblePartInfos.map(({ part }) => part);
     const centerPos = getCenterPosByParts(visibleParts);
+    const centerIndexes = visiblePartInfos.map((part) => part.itemIndex);
 
     return {
+      centerStartIndex: Math.min(...centerIndexes),
+      centerEndIndex: Math.max(...centerIndexes),
       parts: visibleParts,
       centerPos,
     };

packages/infinitegrid/src/InfiniteGrid.ts

@@ -918,25 +918,21 @@ class InfiniteGrid<Options extends InfiniteGridOptions = InfiniteGridOptions> ex
     const prevScrollSize = infinite.getScrollSize();
     const prevContainerSize = infinite.getSize();
     const prevVisibleArea = infinite.getVisibleArea(scrollPos);
-    const prevStartCursor = infinite.getStartCursor();
 
 
     this._syncInfinite();
 
     if (prevVisibleArea) {
+      // 화면의 가운데가 어디에 위치해있는지 확인
       const prevParts = prevVisibleArea.parts.filter((p) => p.pos !== INVISIBLE_POS);
       const nextVisibleArea = infinite.getVisibleAreaByParts(prevParts);
 
-      // 같아야 비교대상이 되고 위치 보정이 가능하다.
-      const nextParts = nextVisibleArea?.parts ?? [];
       if (
         nextVisibleArea
         // 커서가 시작이 아니어야 그룹들의 위치 보정이 가능하다.
         // end direction만 해당
         // startCursor가 0이면 위의 아이템들의 위치가 심각하게 흔들릴 가능성이 매우 높다.
-        && (direction !== "end" || prevStartCursor > 0)
-        // 기존 개수가 같아야 하고
-        && prevParts.length === nextParts.length
+        && (direction !== "end" || prevVisibleArea.centerStartIndex !== 0)
       ) {
         let offset = nextVisibleArea.centerPos - prevVisibleArea.centerPos;
 

packages/infinitegrid/test/unit/InfiniteGrid.spec.ts

@@ -422,19 +422,18 @@ describe("test InfiniteGrid", () => {
         ig!.append([0, 1, 2, 3, 4].map((child) => {
           return {
             groupKey: Math.floor(child / 5),
-            key: child,
-            html: `<div style="height: 200px;">${child}</div>`,
+            key: `${child}`,
+            html: `<div style="height: 200px;width: 2px;">${child}</div>`,
           };
         }));
 
         await waitEvent(ig!, "renderComplete");
 
-
         ig!.prepend([5, 6, 7, 8, 9].map((child) => {
           return {
             groupKey: Math.floor(child / 5),
             key: child,
-            html: `<div style="height: 200px;">${child}</div>`,
+            html: `<div style="height: 200px;width: 2px;">${child}</div>`,
           };
         }));
 
@@ -448,9 +447,8 @@ describe("test InfiniteGrid", () => {
         expect(ig!.getVisibleGroups().map((group) => group.groupKey)).to.be.deep.equals([1, 0]);
         expect(ig!.getScrollContainerElement().scrollTop).to.be.equals(1000);
         expect(children.length).to.be.equals(10);
-
         children.forEach((child, i) => {
-          expect(child.style.top).to.be.equals(`${i * 200}px`);
+          expect(child.style.top).to.be.equals(`${i * 200}px`, `Index ${i} Error`);
         });
       });
       it("should check if item can be inserted in the center", async () => {
@@ -1606,7 +1604,7 @@ describe("test InfiniteGrid", () => {
       await waitEvent(ig!, "renderComplete");
 
 
-      ig!.getScrollContainerElement().scrollTop = 300;
+      ig!.getScrollContainerElement().scrollTop = 320;
 
       // 스크롤 이동에 따른 보이는 아이템 자동 변경: change cursor (0, 3)
       await waitEvent(ig!, "renderComplete");
@@ -1625,9 +1623,9 @@ describe("test InfiniteGrid", () => {
 
       // Then
       const correctedPos = ig!.getScrollContainerElement().scrollTop;
-      expect(correctedPos).to.be.equals(300);
-      expect(ig!.getStartCursor()).to.be.equals(0);
-      expect(ig!.getEndCursor()).to.be.equals(1);
+      expect(correctedPos).to.be.equals(670);
+      expect(ig!.getStartCursor()).to.be.equals(1);
+      expect(ig!.getEndCursor()).to.be.equals(2);
     });
   it(`should check if scroll position is corrected when size, pos, window size is changed (startCursor > 0)`, async () => {
       // Given
@@ -1647,7 +1645,7 @@ describe("test InfiniteGrid", () => {
       await waitEvent(ig!, "renderComplete");
 
 
-      ig!.getScrollContainerElement().scrollTop = 800;
+      ig!.getScrollContainerElement().scrollTop = 750;
 
       // 스크롤 이동에 따른 보이는 아이템 자동 변경: change cursor (2, 4)
       // 6 ~ 14 9개
@@ -1677,7 +1675,7 @@ describe("test InfiniteGrid", () => {
       expect(prevStartCursor).to.be.equals(2);
       expect(prevEndCursor).to.be.equals(4);
       const correctedPos = ig!.getScrollContainerElement().scrollTop;
-      expect(correctedPos).to.be.equals(1250);
+      expect(correctedPos).to.be.equals(1200);
       expect(ig!.getStartCursor()).to.be.equals(2);
       expect(ig!.getEndCursor()).to.be.equals(4);
     });