feat: Add support for straight-line strategy

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.getCurves()
+const curves = coonsPatch.api.getyLines()
 
 // 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
 
-#### getCurves
+#### getyLines
 
 TBD
 

src/const.js

@@ -7,3 +7,8 @@ export const INTERPOLATION_STRATEGY_ID = {
   LINEAR: 'linear',
   EVEN: 'even',
 }
+
+export const LINE_STRATEGY_ID = {
+  STRAIGHT_LINES: `straightLines`,
+  CURVES: `curves`,
+}

src/utils/getCoonsPatch.js

@@ -1,12 +1,16 @@
 import memoize from 'fast-memoize'
-import { INTERPOLATION_STRATEGY_ID } from '../const'
+import { INTERPOLATION_STRATEGY_ID, LINE_STRATEGY_ID } from '../const'
 import { interpolatePointOnCurveEvenlySpaced } from './interpolate/even'
 import { interpolatePointOnCurveLinear } from './interpolate/linear'
 import {
-  getCurvesOnXAxis,
-  getCurvesOnYAxis,
+  getCurveOnXAxis,
+  getCurveOnYAxis,
   getGridIntersections,
+  getLinesOnXAxis,
+  getLinesOnYAxis,
   getPointOnSurface,
+  getStraightLineOnXAxis,
+  getStraightLineOnYAxis,
 } from './surface'
 import { isArray } from './types'
 import {
@@ -61,6 +65,15 @@ const getCoonsPatch = (boundingCurves, grid) => {
       : // Default to even
         interpolatePointOnCurveEvenlySpaced({ precision: grid.precision })
 
+  const getLineOnXAxis =
+    grid.lineStrategy === LINE_STRATEGY_ID.CURVES
+      ? getCurveOnXAxis
+      : getStraightLineOnXAxis
+  const getLineOnYAxis =
+    grid.lineStrategy === LINE_STRATEGY_ID.CURVES
+      ? getCurveOnYAxis
+      : getStraightLineOnYAxis
+
   const getPoint = memoize((ratioX, ratioY) => {
     return getPointOnSurface(
       boundingCurves,
@@ -70,18 +83,20 @@ const getCoonsPatch = (boundingCurves, grid) => {
     )
   })
 
-  const getCurves = memoize(() => {
+  const getLines = memoize(() => {
     return {
-      xAxis: getCurvesOnXAxis(
+      xAxis: getLinesOnXAxis(
         boundingCurves,
         columns,
         rows,
+        getLineOnXAxis,
         interpolatePointOnCurve
       ),
-      yAxis: getCurvesOnYAxis(
+      yAxis: getLinesOnYAxis(
         boundingCurves,
         columns,
         rows,
+        getLineOnYAxis,
         interpolatePointOnCurve
       ),
     }
@@ -101,7 +116,7 @@ const getCoonsPatch = (boundingCurves, grid) => {
   const getGridCellBounds = memoize((x, y) => {
     validateGetSquareArguments(x, y, columns, rows)
 
-    const { xAxis, yAxis } = getCurves()
+    const { xAxis, yAxis } = getLines()
 
     return {
       top: yAxis[y][x],
@@ -128,7 +143,7 @@ const getCoonsPatch = (boundingCurves, grid) => {
     },
     api: {
       getPoint,
-      getCurves,
+      getLines,
       getIntersections,
       getGridCellBounds,
       getAllGridCellBounds,

src/utils/surface.js

@@ -63,10 +63,148 @@ export const getPointOnSurface = (
   }
 }
 
-export const getCurvesOnXAxis = (
+export const getStraightLineOnXAxis = (
+  boundingCurves,
+  rowRatioTotal,
+  rowRatio,
+  rowEndRatio,
+  columnRatioTotal,
+  interpolatePointOnCurve
+) => {
+  const startPoint = getPointOnSurface(
+    boundingCurves,
+    columnRatioTotal,
+    rowRatioTotal,
+    interpolatePointOnCurve
+  )
+
+  const endPoint = getPointOnSurface(
+    boundingCurves,
+    columnRatioTotal,
+    rowEndRatio,
+    interpolatePointOnCurve
+  )
+
+  return {
+    startPoint,
+    endPoint,
+    controlPoint1: startPoint,
+    controlPoint2: endPoint,
+  }
+}
+
+export const getStraightLineOnYAxis = (
+  boundingCurves,
+  columnRatioTotal,
+  columnRatio,
+  columnEndRatio,
+  rowRatioTotal,
+  interpolatePointOnCurve
+) => {
+  const startPoint = getPointOnSurface(
+    boundingCurves,
+    columnRatioTotal,
+    rowRatioTotal,
+    interpolatePointOnCurve
+  )
+
+  const endPoint = getPointOnSurface(
+    boundingCurves,
+    columnEndRatio,
+    rowRatioTotal,
+    interpolatePointOnCurve
+  )
+
+  return {
+    startPoint,
+    endPoint,
+    controlPoint1: startPoint,
+    controlPoint2: endPoint,
+  }
+}
+
+export const getCurveOnXAxis = (
+  boundingCurves,
+  rowRatioTotal,
+  rowRatio,
+  rowEndRatio,
+  columnRatioTotal,
+  interpolatePointOnCurve
+) => {
+  const { startPoint, endPoint } = getStraightLineOnXAxis(
+    boundingCurves,
+    rowRatioTotal,
+    rowRatio,
+    rowEndRatio,
+    columnRatioTotal,
+    interpolatePointOnCurve
+  )
+
+  const midPoint1 = getPointOnSurface(
+    boundingCurves,
+    columnRatioTotal,
+    rowRatioTotal + rowRatio * RATIO_MIDPOINT_1,
+    interpolatePointOnCurve
+  )
+
+  const midPoint2 = getPointOnSurface(
+    boundingCurves,
+    columnRatioTotal,
+    rowRatioTotal + rowRatio * RATIO_MIDPOINT_2,
+    interpolatePointOnCurve
+  )
+
+  const curve = fitCubicBezierToPoints(
+    [startPoint, midPoint1, midPoint2, endPoint],
+    [0, RATIO_MIDPOINT_1, RATIO_MIDPOINT_2, 1]
+  )
+
+  return curve
+}
+
+export const getCurveOnYAxis = (
+  boundingCurves,
+  columnRatioTotal,
+  columnRatio,
+  columnEndRatio,
+  rowRatioTotal,
+  interpolatePointOnCurve
+) => {
+  const { startPoint, endPoint } = getStraightLineOnYAxis(
+    boundingCurves,
+    columnRatioTotal,
+    columnRatio,
+    columnEndRatio,
+    rowRatioTotal,
+    interpolatePointOnCurve
+  )
+
+  const midPoint1 = getPointOnSurface(
+    boundingCurves,
+    columnRatioTotal + columnRatio * RATIO_MIDPOINT_1,
+    rowRatioTotal,
+    interpolatePointOnCurve
+  )
+
+  const midPoint2 = getPointOnSurface(
+    boundingCurves,
+    columnRatioTotal + columnRatio * RATIO_MIDPOINT_2,
+    rowRatioTotal,
+    interpolatePointOnCurve
+  )
+
+  const curve = fitCubicBezierToPoints(
+    [startPoint, midPoint1, midPoint2, endPoint],
+    [0, RATIO_MIDPOINT_1, RATIO_MIDPOINT_2, 1]
+  )
+  return curve
+}
+
+export const getLinesOnYAxis = (
   boundingCurves,
   columns,
   rows,
+  getLineOnYAxis,
   interpolatePointOnCurve
 ) => {
   const columnsTotalCount = columns.length
@@ -84,7 +222,7 @@ export const getCurvesOnXAxis = (
   }
 
   for (let columnIdx = 0; columnIdx <= columnsTotalCount; columnIdx++) {
-    const curveSections = []
+    const lineSections = []
     const columnValue = columns[columnIdx]
     const columnRatio = columnValue / columnsTotalValue
 
@@ -95,56 +233,33 @@ export const getCurvesOnXAxis = (
       const rowRatio = rowValue / rowsTotalValue
       const rowEndRatio = rowRatioTotal + rowRatio
 
-      const startPoint = getPointOnSurface(
+      const curve = getLineOnYAxis(
         boundingCurves,
-        columnRatioTotal,
         rowRatioTotal,
-        interpolatePointOnCurve,
-        true
-      )
-
-      const endPoint = getPointOnSurface(
-        boundingCurves,
-        columnRatioTotal,
+        rowRatio,
         rowEndRatio,
-        interpolatePointOnCurve
-      )
-      const midPoint1 = getPointOnSurface(
-        boundingCurves,
-        columnRatioTotal,
-        rowRatioTotal + rowRatio * RATIO_MIDPOINT_1,
-        interpolatePointOnCurve
-      )
-
-      const midPoint2 = getPointOnSurface(
-        boundingCurves,
         columnRatioTotal,
-        rowRatioTotal + rowRatio * RATIO_MIDPOINT_2,
         interpolatePointOnCurve
       )
 
-      const curve = fitCubicBezierToPoints(
-        [startPoint, midPoint1, midPoint2, endPoint],
-        [0, RATIO_MIDPOINT_1, RATIO_MIDPOINT_2, 1]
-      )
-
       rowRatioTotal = rowRatioTotal + rowRatio
 
-      curveSections.push({
+      lineSections.push({
         ...curve,
       })
     }
     columnRatioTotal = columnRatioTotal + columnRatio
-    curves.push(curveSections)
+    curves.push(lineSections)
   }
 
   return curves
 }
 
-export const getCurvesOnYAxis = (
+export const getLinesOnXAxis = (
   boundingCurves,
   columns,
   rows,
+  getLineOnXAxis,
   interpolatePointOnCurve
 ) => {
   const columnsTotalCount = columns.length
@@ -162,7 +277,7 @@ export const getCurvesOnYAxis = (
   }
 
   for (let rowIdx = 0; rowIdx <= rowsTotalCount; rowIdx++) {
-    const curveSections = []
+    const lineSections = []
     const rowValue = rows[rowIdx]
     const rowRatio = rowValue / rowsTotalValue
 
@@ -173,47 +288,23 @@ export const getCurvesOnYAxis = (
       const columnRatio = columnValue / columnsTotalValue
       const columnEndRatio = columnRatioTotal + columnRatio
 
-      const startPoint = getPointOnSurface(
+      const curve = getLineOnXAxis(
         boundingCurves,
         columnRatioTotal,
-        rowRatioTotal,
-        interpolatePointOnCurve
-      )
-
-      const endPoint = getPointOnSurface(
-        boundingCurves,
+        columnRatio,
         columnEndRatio,
         rowRatioTotal,
         interpolatePointOnCurve
       )
 
-      const midPoint1 = getPointOnSurface(
-        boundingCurves,
-        columnRatioTotal + columnRatio * RATIO_MIDPOINT_1,
-        rowRatioTotal,
-        interpolatePointOnCurve
-      )
-
-      const midPoint2 = getPointOnSurface(
-        boundingCurves,
-        columnRatioTotal + columnRatio * RATIO_MIDPOINT_2,
-        rowRatioTotal,
-        interpolatePointOnCurve
-      )
-
-      const curve = fitCubicBezierToPoints(
-        [startPoint, midPoint1, midPoint2, endPoint],
-        [0, RATIO_MIDPOINT_1, RATIO_MIDPOINT_2, 1]
-      )
-
       columnRatioTotal = columnRatioTotal + columnRatio
-      curveSections.push({
+      lineSections.push({
         ...curve,
       })
     }
 
     rowRatioTotal = rowRatioTotal + rowRatio
-    curves.push(curveSections)
+    curves.push(lineSections)
   }
 
   return curves

tests/fixtures/patch3x3Grid.js

@@ -61,7 +61,7 @@ const fixture3X3Grid = {
         )
       }
     },
-    getCurves: () => {
+    getyLines: () => {
       return {
         xAxis: [
           [