Expose more stuff with engine, add more containScroll options, add sl…

…idesInView, remove scrollProgress actions

src/__tests__/scrollContain.test.ts

@@ -5,85 +5,93 @@ import { arrayKeys } from '../components/utils'
 
 const viewSize = 100
 const exceedsView = [20, 24, 31, 25, 36, 15]
-const doesntExceedView = [15, 20, 15]
+const doesNotExceedView = [20, 20]
 const equalsView = [50, 50]
 
-const contained = (align: Alignments, snapSizes: number[]) => {
+const getScrollSnaps = (
+  snapSizes: number[],
+  align: Alignments,
+): number[] => {
   const alignment = Alignment({ align, viewSize })
   const scrollSnap = ScrollSnap({ snapSizes, alignment, loop: false })
-  const snapIndexes = arrayKeys(snapSizes)
-  const defaultSnaps = snapIndexes.map(scrollSnap.measure)
-  const scrollContain = ScrollContain({
-    slideIndexes: arrayKeys(snapSizes),
-    contentSize: snapSizes.reduce((a, s) => a + s, 0),
-    slidesToScroll: 1,
-    alignment,
-    viewSize,
-  })
-  return {
-    snaps: scrollContain.snaps(defaultSnaps),
-    indexes: scrollContain.indexes(defaultSnaps),
-  }
+  return arrayKeys(snapSizes).map(scrollSnap.measure)
+}
+
+const getScrollContain = (
+  snapSizes: number[],
+  align: Alignments,
+): ScrollContain => {
+  const contentSize = snapSizes.reduce((a, s) => a + s, 0)
+  const alignment = Alignment({ align, viewSize })
+  return ScrollContain({ contentSize, alignment, viewSize })
 }
 
 describe('ScrollContain', () => {
-  describe('Calculates correct snaps & indexes when align is start and', () => {
-    test('Content exceeds view', () => {
-      const { snaps, indexes } = contained('start', exceedsView)
-      expect(snaps).toEqual([0, -20, -44, -51])
-      expect(indexes).toEqual([[0], [1], [2], [3, 4, 5]])
-    })
+  test('Trims duplicate snaps', () => {
+    const scrollSnaps = getScrollSnaps(exceedsView, 'start')
+    const contain = getScrollContain(exceedsView, 'start')
+    const containedSnaps = contain.snaps(scrollSnaps, true)
+    expect(containedSnaps).toEqual([0, -20, -44, -51])
+  })
 
-    test('Content doesn`t exceed view', () => {
-      const { snaps, indexes } = contained('start', doesntExceedView)
-      expect(snaps).toEqual([0])
-      expect(indexes).toEqual([[0, 1, 2]])
+  test('Aligns to start when content equals view', () => {
+    const scrollSnaps = getScrollSnaps(equalsView, 'end')
+    const contain = getScrollContain(equalsView, 'end')
+    const containedSnaps = contain.snaps(scrollSnaps, false)
+    expect(containedSnaps).toEqual([0])
+  })
+
+  describe('Contains snaps correctly when align is start and content', () => {
+    const align = 'start'
+
+    test('Exceeds view', () => {
+      const scrollSnaps = getScrollSnaps(exceedsView, align)
+      const contain = getScrollContain(exceedsView, align)
+      const containedSnaps = contain.snaps(scrollSnaps, false)
+      expect(containedSnaps).toEqual([0, -20, -44, -51, -51, -51])
     })
 
-    test('Content equals view', () => {
-      const { snaps, indexes } = contained('start', equalsView)
-      expect(snaps).toEqual([0])
-      expect(indexes).toEqual([[0, 1]])
+    test('Doesn`t exceed view', () => {
+      const scrollSnaps = getScrollSnaps(doesNotExceedView, align)
+      const contain = getScrollContain(doesNotExceedView, align)
+      const containedSnaps = contain.snaps(scrollSnaps, false)
+      expect(containedSnaps).toEqual([0])
     })
   })
 
-  describe('Calculates correct snaps & indexes when align is center and', () => {
-    test('Content exceeds view', () => {
-      const { snaps, indexes } = contained('center', exceedsView)
-      expect(snaps).toEqual([0, -9.5, -37.5, -51])
-      expect(indexes).toEqual([[0, 1], [2], [3], [4, 5]])
-    })
+  describe('Contains snaps correctly when align is center and content', () => {
+    const align = 'center'
 
-    test('Content doesn`t exceed view', () => {
-      const { snaps, indexes } = contained('center', doesntExceedView)
-      expect(snaps).toEqual([25])
-      expect(indexes).toEqual([[0, 1, 2]])
+    test('Exceeds view', () => {
+      const scrollSnaps = getScrollSnaps(exceedsView, align)
+      const contain = getScrollContain(exceedsView, align)
+      const containedSnaps = contain.snaps(scrollSnaps, false)
+      expect(containedSnaps).toEqual([0, 0, -9.5, -37.5, -51, -51])
     })
 
-    test('Content equals view', () => {
-      const { snaps, indexes } = contained('center', equalsView)
-      expect(snaps).toEqual([0])
-      expect(indexes).toEqual([[0, 1]])
+    test('Doesn`t exceed view', () => {
+      const scrollSnaps = getScrollSnaps(doesNotExceedView, align)
+      const contain = getScrollContain(doesNotExceedView, align)
+      const containedSnaps = contain.snaps(scrollSnaps, false)
+      expect(containedSnaps).toEqual([30])
     })
   })
 
-  describe('Calculates correct snaps & indexes when align is end and', () => {
-    test('Content exceeds view', () => {
-      const { snaps, indexes } = contained('end', exceedsView)
-      expect(snaps).toEqual([0, -36, -51])
-      expect(indexes).toEqual([[0, 1, 2, 3], [4], [5]])
-    })
+  describe('Contains snaps correctly when align is end and content', () => {
+    const align = 'end'
 
-    test('Content doesn`t exceed view', () => {
-      const { snaps, indexes } = contained('end', doesntExceedView)
-      expect(snaps).toEqual([50])
-      expect(indexes).toEqual([[0, 1, 2]])
+    test('Exceeds view', () => {
+      const scrollSnaps = getScrollSnaps(exceedsView, align)
+      const contain = getScrollContain(exceedsView, align)
+      const containedSnaps = contain.snaps(scrollSnaps, false)
+      expect(containedSnaps).toEqual([0, 0, 0, 0, -36, -51])
     })
 
-    test('Content equals view', () => {
-      const { snaps, indexes } = contained('end', equalsView)
-      expect(snaps).toEqual([0])
-      expect(indexes).toEqual([[0, 1]])
+    test('Doesn`t exceed view', () => {
+      const scrollSnaps = getScrollSnaps(doesNotExceedView, align)
+      const contain = getScrollContain(doesNotExceedView, align)
+      const containedSnaps = contain.snaps(scrollSnaps, false)
+      expect(containedSnaps).toEqual([60])
     })
   })
 })

src/__tests__/scrollProgress.test.ts

@@ -1,6 +1,5 @@
 import { ScrollLimit } from '../components/scrollLimit'
 import { ScrollProgress } from '../components/scrollProgress'
-import { Vector1D } from '../components/vector1d'
 
 const snapSizes = [80, 80, 80, 80, 80]
 const scrollSnaps = [0, -80, -160, -240, -320]
@@ -9,67 +8,28 @@ const loop = false
 const progressMin = 0
 const progressMax = 1
 const progressHalf = 0.5
-const target = Vector1D(0)
 const scrollLimit = ScrollLimit({ contentSize, loop })
 const limit = scrollLimit.measure(scrollSnaps)
-const scrollProgress = ScrollProgress({ target, limit, loop })
+const scrollProgress = ScrollProgress({ limit })
 const scrollEnd = limit.min
 const scrollStart = limit.max
 const scrollHalf = scrollEnd * progressHalf
-const scrollLength = Math.abs(scrollEnd)
 
 describe('ScrollProgress', () => {
-  describe('Get calculates correct progress when given location is', () => {
+  describe('Calculates correct progress when given location is', () => {
     test('Max', () => {
       const progress = scrollProgress.get(scrollStart)
       expect(progress).toEqual(-progressMin)
     })
 
-    test('Min', () => {
-      const progress = scrollProgress.get(scrollEnd)
-      expect(progress).toBe(progressMax)
-    })
-  })
-
-  describe('Set calculates correct distance to target when given progress is', () => {
-    test('Max', () => {
-      target.set(scrollStart)
-      const distance = scrollProgress.set(progressMax)
-      expect(distance).toBe(-scrollLength)
+    test('Half', () => {
+      const progress = scrollProgress.get(scrollHalf)
+      expect(progress).toBe(progressHalf)
     })
 
     test('Min', () => {
-      target.set(scrollEnd)
-      const distance = scrollProgress.set(progressMin)
-      expect(distance).toBe(scrollLength)
-    })
-  })
-
-  describe('Add calculates correct distance to target when given progress is', () => {
-    test('Positive', () => {
-      target.set(scrollStart)
-      const distance = scrollProgress.add(progressHalf)
-      expect(distance).toBe(scrollHalf)
-    })
-
-    test('Negative', () => {
-      target.set(scrollEnd)
-      const distance = scrollProgress.add(-progressHalf)
-      expect(distance).toBe(-scrollHalf)
-    })
-  })
-
-  describe('Add constrains exceeding distances to scroll limit', () => {
-    test('Max', () => {
-      target.set(scrollStart)
-      const distance = scrollProgress.add(progressMin - 0.01)
-      expect(distance).toBe(0)
-    })
-
-    test('Min', () => {
-      target.set(scrollEnd)
-      const distance = scrollProgress.add(progressMax + 0.01)
-      expect(distance).toBe(0)
+      const progress = scrollProgress.get(scrollEnd)
+      expect(progress).toBe(progressMax)
     })
   })
 })

src/__tests__/slidesInView.test.ts

@@ -0,0 +1,113 @@
+import { Alignment, Alignments } from '../components/alignment'
+import { SlidesInView } from '../components/slidesInView'
+
+const viewSize = 100
+const slideSizes = [30, 40, 30, 40, 60, 30, 50]
+const firstSlide = slideSizes[0]
+const contentSize = slideSizes.reduce((a, s) => a + s, 0)
+
+const noThreshold = 0
+const fullThreshold = 1
+
+const getAlignment = (align: Alignments): Alignment => {
+  return Alignment({ align, viewSize })
+}
+
+const getSlidesInView = (
+  loop: boolean,
+  inViewThreshold: number,
+): SlidesInView => {
+  return SlidesInView({
+    contentSize,
+    slideSizes,
+    viewSize,
+    inViewThreshold,
+    loop,
+  })
+}
+
+describe('SlidesInView', () => {
+  const startAlign = getAlignment('start').measure(firstSlide)
+  const centerAlign = getAlignment('center').measure(firstSlide)
+  const endAlign = getAlignment('end').measure(firstSlide)
+
+  describe('Finds slides in view with no threshold when', () => {
+    describe('Loop is false, and align is', () => {
+      const slidesInView = getSlidesInView(false, noThreshold)
+
+      test('Start', () => {
+        const indexesInView = slidesInView.check(startAlign)
+        expect(indexesInView).toEqual([0, 1, 2])
+      })
+
+      test('Center', () => {
+        const indexesInView = slidesInView.check(centerAlign)
+        expect(indexesInView).toEqual([0, 1])
+      })
+
+      test('End', () => {
+        const indexesInView = slidesInView.check(endAlign)
+        expect(indexesInView).toEqual([0])
+      })
+    })
+
+    describe('Loop is true, and align is', () => {
+      const slidesInView = getSlidesInView(true, noThreshold)
+
+      test('Start', () => {
+        const indexesInView = slidesInView.check(startAlign)
+        expect(indexesInView).toEqual([0, 1, 2])
+      })
+
+      test('Center', () => {
+        const indexesInView = slidesInView.check(centerAlign)
+        expect(indexesInView).toEqual([0, 1, 6])
+      })
+
+      test('End', () => {
+        const indexesInView = slidesInView.check(endAlign)
+        expect(indexesInView).toEqual([0, 5, 6])
+      })
+    })
+  })
+
+  describe('Finds slides in view with full threshold when', () => {
+    describe('Loop is false, and align is', () => {
+      const slidesInView = getSlidesInView(false, fullThreshold)
+
+      test('Start', () => {
+        const indexesInView = slidesInView.check(startAlign)
+        expect(indexesInView).toEqual([1])
+      })
+
+      test('Center', () => {
+        const indexesInView = slidesInView.check(centerAlign)
+        expect(indexesInView).toEqual([0])
+      })
+
+      test('End', () => {
+        const indexesInView = slidesInView.check(endAlign)
+        expect(indexesInView).toEqual([])
+      })
+    })
+
+    describe('Loop is true, and align is', () => {
+      const slidesInView = getSlidesInView(true, fullThreshold)
+
+      test('Start', () => {
+        const indexesInView = slidesInView.check(startAlign)
+        expect(indexesInView).toEqual([1])
+      })
+
+      test('Center', () => {
+        const indexesInView = slidesInView.check(centerAlign)
+        expect(indexesInView).toEqual([0])
+      })
+
+      test('End', () => {
+        const indexesInView = slidesInView.check(endAlign)
+        expect(indexesInView).toEqual([6])
+      })
+    })
+  })
+})

src/components/alignment.ts

@@ -11,7 +11,7 @@ export type Alignment = {
 
 export function Alignment(params: Params): Alignment {
   const { viewSize, align } = params
-  const alignment = { start, center, end }
+  const predefined = { start, center, end }
 
   function start(): number {
     return 0
@@ -31,7 +31,7 @@ export function Alignment(params: Params): Alignment {
 
   function measure(n: number): number {
     if (typeof align === 'number') return percent()
-    return alignment[align](n)
+    return predefined[align](n)
   }
 
   const self: Alignment = {