feat: Use objects as grid values

README.md

@@ -35,7 +35,7 @@ const coonsPatch = getCoonsPatch(
 const point = coonsPatch.api.getPoint(0.5, 0.75)
 
 // Get an object wity `xAxis` and `yAxis` keys. Each key contains an Array containing data representing all the sub-curves that make up each curve along that axis.
-const curves = coonsPatch.api.getyLines()
+const curves = coonsPatch.api.getLines()
 
 // Get an array of points representing every grid intersection
 const intersections = coonsPatch.api.getIntersections()
@@ -126,7 +126,7 @@ The `coonsPatch` object comprises of two fields, `config` and `api`.
 
 TBD
 
-#### getyLines
+#### getLines
 
 TBD
 

package.json

@@ -31,6 +31,7 @@
     "prepare": "husky",
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js ./tests",
     "test-watch": "node --experimental-vm-modules node_modules/jest/bin/jest.js ./tests --watchAll",
+    "test-snapshot": "node ./tests/snapshotData",
     "lint": "pnpm run lint-prettier && pnpm run lint-eslint",
     "lint-prettier": "prettier . --write",
     "lint-eslint": "eslint './**/*.{js,jsx,cjs}'",

src/utils/getCoonsPatch.js

@@ -12,7 +12,7 @@ import {
   getStraightLineOnXAxis,
   getStraightLineOnYAxis,
 } from './surface'
-import { isArray } from './types'
+import { isInt, isPlainObj } from './types'
 import {
   validateBoundingCurves,
   validateGetSquareArguments,
@@ -26,11 +26,22 @@ import {
 const buildStepSpacing = (v) => {
   const spacing = []
   for (let idx = 0; idx < v; idx++) {
-    spacing.push(1)
+    spacing.push({ value: 1 })
   }
   return spacing
 }
 
+const processSteps = (steps) =>
+  steps.map((step) => {
+    if (isPlainObj(step)) {
+      return step
+    } else {
+      return {
+        value: step,
+      }
+    }
+  })
+
 // -----------------------------------------------------------------------------
 // Exports
 // -----------------------------------------------------------------------------
@@ -39,23 +50,16 @@ const getCoonsPatch = (boundingCurves, grid) => {
   validateBoundingCurves(boundingCurves)
   validateGrid(grid)
 
-  // Columns can be either an int, or an array containing ints, each
-  // representing the width of that column. If the total widths are different to
-  // the width of the shape described by the bounding curves, they will be
-  // mapped to the the width of the shape, acting as ratios instead of absolute
-  // widths. If the supplied value is an int, we create an array with a length
-  // of the int, with a uniform value for each item.
-  const columns = isArray(grid.columns)
-    ? grid.columns
-    : buildStepSpacing(grid.columns)
-
-  // Rows can be either an int, or an array containing ints, each representing
-  // the height of that column. If the total heights are different to the height
-  // of the shape described by the bounding curves, they will be mapped to the
-  // the height of the shape, acting as ratios instead of absolute heights. If
-  // the supplied value is an int, we create an array with a length of the int,
-  // with a uniform value for each item.
-  const rows = isArray(grid.rows) ? grid.rows : buildStepSpacing(grid.rows)
+  const columns = isInt(grid.columns)
+    ? buildStepSpacing(grid.columns)
+    : processSteps(grid.columns)
+
+  const rows = isInt(grid.rows)
+    ? buildStepSpacing(grid.rows)
+    : processSteps(grid.rows)
+
+  console.log('@columns', columns)
+  console.log('@rows', rows)
 
   const gutter = grid.gutter
 

src/utils/interpolate/even.js

@@ -51,7 +51,6 @@ const findClosestPointOnCurve = (lut, curve, targetLength, precision) => {
 
 // We only want to do this once per curve as it is very expensive
 const getLutForCurve = memoize((curve, precision) => {
-  console.log(curve)
   const pointsApproximate = getApproximatePointsOnCurve(curve, precision)
   return getLut(pointsApproximate)
 })

src/utils/surface.js

@@ -31,7 +31,7 @@ const getCoordinateOnSurface = (
   )
 }
 
-const addAll = (list) => list.reduce((total, value) => total + value, 0)
+const addAll = (list) => list.reduce((total, { value }) => total + value, 0)
 
 // -----------------------------------------------------------------------------
 // Exports
@@ -224,13 +224,13 @@ export const getLinesOnXAxis = (
 
   for (let columnIdx = 0; columnIdx <= columnsTotalCount; columnIdx++) {
     const lineSections = []
-    const columnValue = columns[columnIdx]
+    const columnValue = columns[columnIdx]?.value
     const columnWidthRatio = columnValue / columnsTotalValue
 
     let rowStartRatio = 0
 
     for (let rowIdx = 0; rowIdx < rowsTotalCount; rowIdx++) {
-      const rowValue = rows[rowIdx]
+      const rowValue = rows[rowIdx]?.value
       const rowRatio = rowValue / rowsTotalValue
       const rowEndRatio = rowStartRatio + rowRatio
 
@@ -280,13 +280,13 @@ export const getLinesOnYAxis = (
 
   for (let rowIdx = 0; rowIdx <= rowsTotalCount; rowIdx++) {
     const lineSections = []
-    const rowValue = rows[rowIdx]
+    const rowValue = rows[rowIdx]?.value
     const rowRatio = rowValue / rowsTotalValue
 
     let columnStartRatio = 0
 
     for (let columnIdx = 0; columnIdx < columnsTotalCount; columnIdx++) {
-      const columnValue = columns[columnIdx]
+      const columnValue = columns[columnIdx]?.value
       const columnWidthRatio = columnValue / columnsTotalValue
       const columnEndRatio = columnStartRatio + columnWidthRatio
 
@@ -327,13 +327,13 @@ export const getGridIntersections = (
   let rowStartRatio = 0
 
   for (let rowIdx = 0; rowIdx <= rowsTotal; rowIdx++) {
-    const rowValue = rows[rowIdx]
+    const rowValue = rows[rowIdx]?.value
     const rowRatio = rowValue / rowsTotalValue
 
     let columnStartRatio = 0
 
     for (let columnIdx = 0; columnIdx <= columnsTotal; columnIdx++) {
-      const columnValue = columns[columnIdx]
+      const columnValue = columns[columnIdx]?.value
       const columnWidthRatio = columnValue / columnsTotalValue
 
       const point = getPointOnSurface(

src/utils/validation.js

@@ -102,14 +102,18 @@ export const validateGrid = (grid) => {
   }
 
   if (!isArray(grid.rows) && !isInt(grid.rows)) {
-    throw new Error('grid.rows must be an Array of Ints or Int')
+    throw new Error(
+      'grid.rows must be an Int, an Array of Ints, or an Array of objects'
+    )
   }
 }
 
 export const validateGetSquareArguments = (x, y, columns, rows) => {
-  if (x >= columns || y >= rows) {
+  const columnCount = columns.length
+  const rowCount = rows.length
+  if (x >= columnCount || y >= rowCount) {
     throw new Error(
-      `Grid is '${columns}' x '${rows}' but you passed x:'${x}' and y:'${y}'`
+      `Grid is '${columnCount}' x '${rowCount}' but you passed x:'${x}' and y:'${y}'`
     )
   }
 }

tests/fixtures.js

@@ -0,0 +1,78 @@
+// -----------------------------------------------------------------------------
+// Const
+// -----------------------------------------------------------------------------
+
+export const boundsValid = {
+  top: {
+    startPoint: { x: 0, y: 0 },
+    endPoint: { x: 100, y: 0 },
+    controlPoint1: { x: 10, y: -10 },
+    controlPoint2: { x: 90, y: -10 },
+  },
+  bottom: {
+    startPoint: { x: 0, y: 100 },
+    endPoint: { x: 100, y: 100 },
+    controlPoint1: { x: -10, y: 110 },
+    controlPoint2: { x: 110, y: 110 },
+  },
+  left: {
+    startPoint: { x: 0, y: 0 },
+    endPoint: { x: 0, y: 100 },
+    controlPoint1: { x: -10, y: -10 },
+    controlPoint2: { x: -10, y: 110 },
+  },
+  right: {
+    startPoint: { x: 100, y: 0 },
+    endPoint: { x: 100, y: 100 },
+    controlPoint1: { x: 110, y: -10 },
+    controlPoint2: { x: 110, y: 110 },
+  },
+}
+
+// -----------------------------------------------------------------------------
+// Exports
+// -----------------------------------------------------------------------------
+
+// Define different sets of params to test
+// Save the results to JSON files to import into tests
+// Set 'skipSnapshot' to 'true' for each item to skip the snapshot
+const fixtures = [
+  {
+    name: '3x3 grid',
+    skipSnapshot: true,
+    skipTest: false,
+    input: {
+      bounds: boundsValid,
+      grid: {
+        columns: 3,
+        rows: 3,
+      },
+    },
+  },
+  {
+    name: '3x3 grid with gutters',
+    skipSnapshot: true,
+    skipTest: true,
+    input: {
+      bounds: boundsValid,
+      grid: {
+        columns: 3,
+        rows: 3,
+        gutters: 0.1,
+      },
+    },
+  },
+  {
+    name: 'Variant columns and rows',
+    skipSnapshot: true,
+    input: {
+      bounds: boundsValid,
+      grid: {
+        columns: [5, 1, 5, 4, 5, 1, 5, 1, 5],
+        rows: [5, 1, 5, 3, 5, 1, 10],
+      },
+    },
+  },
+]
+
+export default fixtures