fix: fit groups' outlines for start direction (#502)

* fix: fit groups' outlines for start direction

* test: test start direction

packages/infinitegrid/src/GroupManager.ts

@@ -377,7 +377,40 @@ export class GroupManager extends Grid<GroupManagerOptions> {
       outlines: this.outlines,
     };
   }
+  protected fitOutlines(useFit = this.useFit) {
+    const groups = this.groups;
+    const firstGroup = groups[0];
+
+    if (!firstGroup) {
+      return;
+    }
+    const outlines = firstGroup.grid.getOutlines();
+    const startOutline = outlines.start;
+    const outlineOffset = startOutline.length ? Math.min(...startOutline) : 0;
+
+    // If the outline is less than 0, a fit occurs forcibly.
+    if (!useFit && outlineOffset > 0) {
+      return;
+    }
+
+    groups.forEach(({ grid }) => {
+      const { start, end } = grid.getOutlines();
 
+      grid.setOutlines({
+        start: start.map((point) => point - outlineOffset),
+        end: end.map((point) => point - outlineOffset),
+      });
+    });
+
+    this.groupItems.forEach((item) => {
+      const contentPos = item.cssContentPos;
+
+      if (!isNumber(contentPos)) {
+        return;
+      }
+      item.cssContentPos = contentPos - outlineOffset;
+    });
+  }
   public setGroupStatus(status: GroupManagerStatus) {
     this.itemKeys = {};
     this.groupItems = [];

packages/infinitegrid/src/InfiniteGrid.ts

@@ -135,6 +135,7 @@ class InfiniteGrid<Options extends InfiniteGridOptions = InfiniteGridOptions> ex
       useResizeObserver,
       resizeDebounce,
       maxResizeDebounce,
+      defaultDirection,
     } = gridOptions;
     const wrapperElement = isString(wrapper) ? document.querySelector(wrapper) as HTMLElement : wrapper;
     const scrollManager = new ScrollManager(wrapperElement, {
@@ -161,6 +162,7 @@ class InfiniteGrid<Options extends InfiniteGridOptions = InfiniteGridOptions> ex
       isConstantSize,
     });
     const infinite = new Infinite({
+      defaultDirection,
       useRecycle,
       threshold,
     }).on({
@@ -654,7 +656,7 @@ class InfiniteGrid<Options extends InfiniteGridOptions = InfiniteGridOptions> ex
   private _syncInfinite() {
     this.infinite.syncItems(this.getGroups(true).map(({ groupKey, grid, type }) => {
       const outlines = grid.getOutlines();
-
+      
       return {
         key: groupKey,
         isVirtual: type === GROUP_TYPE.VIRTUAL,

packages/infinitegrid/test/manual/reverse.html

@@ -0,0 +1,159 @@
+<h1 class="header">
+  <a href="https://github.com/naver/egjs-infinitegrid" target="_blank">Virtual Scroll - GridLayout</a>
+</h1>
+
+<div class="container gridlayout">
+</div>
+
+
+<style>
+  /* html,
+  body {
+    position: relative;
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    background: #fff;
+  } */
+
+  a {
+    color: unset;
+    text-decoration: none;
+  }
+
+  .header {
+    text-align: center;
+    background: #333;
+    color: #fff;
+    padding: 20px 0px;
+    margin: 0;
+    margin-bottom: 10px;
+  }
+
+  .description {
+    padding: 6px 30px;
+    margin: 0;
+    font-weight: 400;
+  }
+
+  .description li {
+    padding: 3px 0px;
+  }
+
+  .container {
+    width: 100%;
+    height: 600px;
+    background: #f55;
+  }
+
+  .gridlayout .item {
+    display: inline-block;
+    width: 250px;
+    opacity: 1;
+  }
+
+  .gridlayout.horizontal .item {
+    width: auto;
+    height: 250px;
+  }
+
+  .gridlayout .item .thumbnail {
+    max-height: 300px;
+    overflow: hidden;
+    border-radius: 8px;
+  }
+
+  .gridlayout.equal .item .thumbnail {
+    height: 140px;
+  }
+
+  .gridlayout.equal.horizontal .item .thumbnail {
+    height: auto;
+    width: 140px;
+  }
+
+  .gridlayout .item .thumbnail img {
+    width: 100%;
+    border-radius: 8px;
+  }
+
+  .gridlayout.horizontal .item .thumbnail img {
+    width: auto;
+    height: 210px;
+  }
+
+  .gridlayout .item .info {
+    margin-top: 10px;
+    font-weight: bold;
+    color: #777;
+  }
+
+  .gridlayout .item.animate {
+    transition: opacity ease 1s;
+    transition-delay: 0.2s;
+    opacity: 1;
+  }
+
+  .gridlayout .loading {
+    position: absolute;
+    width: 100%;
+    height: 50px;
+    display: none;
+  }
+
+  .gridlayout .loading span {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+  }
+
+  .gridlayout.horizontal .loading {
+    width: 200px;
+    height: 100%;
+  }
+  .placeholder {
+    background: #eee;
+    border-radius: 10px;
+    width: 250px;
+    height: 300px;
+  }
+</style>
+
+<script src="../../dist/infinitegrid.js"></script>
+<script>
+  const itemCount = 10;
+
+  function getItems(nextGroupKey, count) {
+    const nextItems = [];
+
+    for (let i = 0; i < count; ++i) {
+      const num = nextGroupKey * count + i;
+      nextItems.push(`<div class="item">
+    <div class="thumbnail">
+        <img src="https://naver.github.io/egjs-infinitegrid/assets/image/${(num % 33) + 1}.jpg" alt="egjs" />
+    </div>
+    <div class="info">egjs ${num}</div>
+</div>`);
+    }
+    return nextItems;
+  }
+  const ig = new InfiniteGrid.MasonryInfiniteGrid(".container", {
+    container: false,
+    useFit: true,
+    useRecycle: true,
+    horizontal: false,
+    useResizeObserver: true,
+    defaultDirection: "start",
+    gap: 5,
+  });
+
+  ig.on("requestPrepend", e => {
+    const nextGroupKey = (+e.groupKey || 0) + 1;
+
+    ig.prepend(getItems(nextGroupKey, 10), nextGroupKey);
+  }); 
+
+  ig.renderItems();
+</script>

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

@@ -293,6 +293,32 @@ describe("test InfiniteGrid", () => {
           expect(child.style.top).to.be.equals(`${i * 250}px`);
         });
       });
+      it("should check if startOutline is set to 0 when prepend", async () => {
+        // Given
+        ig!.destroy();
+        container!.innerHTML = `<div class="wrapper" style="width: 100%; height: 500px;"></div>`;
+        ig = new InfiniteGrid<InfiniteGridOptions>(container!.querySelector<HTMLElement>(".wrapper")!, {
+          gridConstructor: SampleGrid,
+          container: true,
+          defaultDirection: "start",
+        });
+        ig!.prepend([0, 1, 2, 3, 4].map((child) => {
+          return {
+            groupKey: Math.floor(child / 5),
+            key: child,
+            html: `<div style="height: 200px;">${child}</div>`,
+          };
+        }));
+
+        await waitEvent(ig!, "renderComplete");
+
+        console.log(ig.getGroups()[0].grid.getOutlines());
+        // Then
+        expect(ig!.getGroups()[0].grid.getOutlines()).to.be.deep.equals({
+          start: [0],
+          end: [1000],
+        });
+      });
       it("should check if the scroll position changes when prepend", async () => {
         // Given
         const igContainer = ig!.getContainerElement();

packages/infinitegrid/test/unit/samples/SampleGrid.ts

@@ -25,12 +25,12 @@ export class SampleGrid extends Grid<SampleGridOptions> {
   };
 
   public applyGrid(items: GridItem[], direction: "start" | "end", outline: number[]) {
-    const startOutline = outline.length ? [...outline] : [0];
-    let prevOutline = [...startOutline];
+    let startOutline = outline.length ? [...outline] : [0];
+    let endOutline = [...startOutline];
 
     if (direction === "end") {
       items.forEach((item) => {
-        const prevPos = prevOutline[0] || 0;
+        const prevPos = endOutline[0] || 0;
         const rect = item.rect;
 
 
@@ -41,12 +41,26 @@ export class SampleGrid extends Grid<SampleGridOptions> {
           inlinePos: 0,
         });
 
-        prevOutline = [prevPos + (rect?.height ?? 0) + this.gap];
+        endOutline = [prevPos + (rect?.height ?? 0) + this.gap];
+      });
+    } else {
+      items.forEach((item) => {
+        const prevPos = startOutline[0] || 0;
+        const rect = item.rect;
+
+        startOutline = [prevPos - (rect?.height ?? 0) - this.gap];
+
+        item.setCSSGridRect({
+          inlineSize: item.inlineSize,
+          contentSize: item.contentSize,
+          contentPos: startOutline[0],
+          inlinePos: 0,
+        });
       });
     }
     return {
       start: startOutline,
-      end: prevOutline,
+      end: endOutline,
     };
   }
 }