Rename ChunkSize to PxToPercent for clarity

src/__tests__/pxToPercent.test.ts

@@ -0,0 +1,16 @@
+import { PxToPercent } from '../components/pxToPercent'
+
+const itemSize = 25
+const wiewInPx = 1000
+const pxToPercent = PxToPercent(wiewInPx)
+
+describe('PxToPercent', () => {
+  test('Exposes correct totalPercent', () => {
+    expect(pxToPercent.totalPercent).toBe(100)
+  })
+
+  test('Converts given pixels to percentage of view', () => {
+    const measure = pxToPercent.measure(itemSize)
+    expect(measure).toBe(2.5)
+  })
+})

src/__tests__/scrollLooper.test.ts

@@ -1,4 +1,4 @@
-import { ChunkSize } from '../components/chunkSize'
+import { PxToPercent } from '../components/pxToPercent'
 import { ScrollLooper } from '../components/scrollLooper'
 import { Vector1D } from '../components/vector1d'
 import { Limit } from '../components/limit'
@@ -10,7 +10,7 @@ const minLimit = 0
 const maxLimit = 10
 const contentSize = 10
 const limit = Limit({ min: minLimit, max: maxLimit })
-const chunkSize = ChunkSize(1000)
+const pxToPercent = PxToPercent(1000)
 const vectorOneInitialValue = 5
 const vectorTwoInitialValue = 10
 
@@ -21,7 +21,7 @@ beforeEach(() => {
     Vector1D(vectorTwoInitialValue),
   ]
   scrollLooper = ScrollLooper({
-    chunkSize,
+    pxToPercent,
     limit,
     location,
     contentSize,

src/__tests__/slideLooper.test.ts

@@ -1,12 +1,12 @@
 import { AlignSize, Alignments } from '../components/alignSize'
-import { ChunkSize } from '../components/chunkSize'
+import { PxToPercent } from '../components/pxToPercent'
 import { SlideLooper } from '../components/slideLooper'
 import { Vector1D } from '../components/vector1d'
 
 const slideLooperParams = (align: Alignments) => {
   const location = Vector1D(0)
-  const chunkSize = ChunkSize(950)
-  const viewSize = chunkSize.root
+  const pxToPercent = PxToPercent(950)
+  const viewSize = pxToPercent.totalPercent
   const alignSize = AlignSize({ align, viewSize })
   const slideSizes = [15, 30, 15, 15, 70, 15, 15, 15]
   const scrollSnaps = slideSizes.map(alignSize.measure)

src/components/engine.ts

@@ -1,13 +1,13 @@
 import { AlignSize } from './alignSize'
 import { Animation } from './animation'
-import { ChunkSize } from './chunkSize'
 import { Counter } from './counter'
 import { DragBehaviour } from './dragBehaviour'
 import { EventDispatcher } from './eventDispatcher'
 import { Limit } from './limit'
 import { Mover } from './mover'
 import { Options } from './options'
 import { Pointer } from './pointer'
+import { PxToPercent } from './pxToPercent'
 import { ScrollBounds } from './scrollBounds'
 import { ScrollBy } from './scrollBy'
 import { ScrollContain } from './scrollContain'
@@ -59,10 +59,10 @@ export function Engine(
 
   // Measurements
   const containerSize = rectWidth(container)
-  const chunkSize = ChunkSize(containerSize)
-  const viewSize = chunkSize.root
+  const pxToPercent = PxToPercent(containerSize)
+  const viewSize = pxToPercent.totalPercent
   const slideIndexes = Object.keys(slides).map(Number)
-  const slideSizes = slides.map(rectWidth).map(chunkSize.measure)
+  const slideSizes = slides.map(rectWidth).map(pxToPercent.measure)
   const groupedSizes = groupNumbers(slideSizes, slidesToScroll)
   const snapSizes = groupedSizes.map(g => g.reduce((a, s) => a + s))
   const contentSize = slideSizes.reduce((a, s) => a + s)
@@ -153,7 +153,7 @@ export function Engine(
     location,
     loop,
     mover,
-    pointer: Pointer(chunkSize),
+    pointer: Pointer(pxToPercent),
     scrollTo,
     snapSizes,
     target,
@@ -180,10 +180,10 @@ export function Engine(
       target,
     }),
     scrollLooper: ScrollLooper({
-      chunkSize,
       contentSize,
       limit,
       location,
+      pxToPercent,
       vectors: [location, target],
     }),
     scrollProgress: ScrollProgress({

src/components/pointer.ts

@@ -1,5 +1,5 @@
-import { ChunkSize } from './chunkSize'
 import { Direction } from './direction'
+import { PxToPercent } from './pxToPercent'
 import { Vector1D } from './vector1d'
 
 type Axis = 'x' | 'y'
@@ -18,7 +18,7 @@ export type Pointer = {
   read: (evt: any, axis: Axis) => Vector1D
 }
 
-export function Pointer(size: ChunkSize): Pointer {
+export function Pointer(pxToPercent: PxToPercent): Pointer {
   const coords = { x: 'clientX', y: 'clientY' }
   const startDrag = Vector1D(0)
   const diffDrag = Vector1D(0)
@@ -43,7 +43,7 @@ export function Pointer(size: ChunkSize): Pointer {
     const point = read(evt, 'x')
     startDrag.set(point)
     lastDrag.set(point)
-    return size.measure(startDrag.get())
+    return pxToPercent.measure(startDrag.get())
   }
 
   function move(evt: Event): number {
@@ -59,7 +59,7 @@ export function Pointer(size: ChunkSize): Pointer {
     diffDrag.set(point).subtract(lastDrag)
     direction.set(diffDrag)
     lastDrag.set(point)
-    return size.measure(diffDrag.get())
+    return pxToPercent.measure(diffDrag.get())
   }
 
   function up(): number {
@@ -76,7 +76,7 @@ export function Pointer(size: ChunkSize): Pointer {
     )
 
     state.trackPoints = []
-    return size.measure(lastDrag.get())
+    return pxToPercent.measure(lastDrag.get())
   }
 
   const self: Pointer = {

src/components/pxToPercent.ts

@@ -0,0 +1,18 @@
+export type PxToPercent = {
+  measure: (n: number) => number
+  totalPercent: number
+}
+
+export function PxToPercent(viewInPx: number): PxToPercent {
+  const totalPercent = 100
+
+  function measure(n: number): number {
+    return (n / viewInPx) * totalPercent
+  }
+
+  const self: PxToPercent = {
+    measure,
+    totalPercent,
+  }
+  return Object.freeze(self)
+}

src/components/scrollLooper.ts

@@ -1,12 +1,12 @@
-import { ChunkSize } from './chunkSize'
 import { Limit } from './limit'
+import { PxToPercent } from './pxToPercent'
 import { Vector1D } from './vector1d'
 
 type Params = {
-  chunkSize: ChunkSize
   contentSize: number
   limit: Limit
   location: Vector1D
+  pxToPercent: PxToPercent
   vectors: Vector1D[]
 }
 
@@ -15,9 +15,10 @@ export type ScrollLooper = {
 }
 
 export function ScrollLooper(params: Params): ScrollLooper {
-  const { limit, location, chunkSize, contentSize, vectors } = params
-  const min = limit.min + chunkSize.measure(0.1)
-  const max = limit.max + chunkSize.measure(0.1)
+  const { contentSize, location, vectors } = params
+  const { limit, pxToPercent } = params
+  const min = limit.min + pxToPercent.measure(0.1)
+  const max = limit.max + pxToPercent.measure(0.1)
   const { reachedMin, reachedMax } = Limit({ min, max })
 
   function shouldLoop(direction: number): boolean {