How to use a predefined function with R.zipWith - ramda.js

Question

This is the initial data set.
const Main = {
  ratio : [ 0.5, 1, 2 ],
focusPoint : [ 0.1, 0.2, 0.3 ],
}
I want this object calculated with a predefined function.
const width =  window.innerWidth
const height = window.innerHeight
const ratioViewport = width / height
const resultY = ( x, y ) => 0.5 * ( x / ratioViewport ) - y
Here is the final part with R.zipWith to evaluate the function.
const getPositionMain = applySpec ( {
ratio : R.prop ('ratio'),
resultY : R.zipWith ( resultY, R.prop ('ratio') , R.prop ('focusPoint') ),
} )
const positionMain = getPositionMain ( Main )
console.log( 'positionMain : ', positionMain )
// Desired output (positionMain) : [ 0.5 * (1 / ratioViewport) - 0.1, 0.5 * (2 / ratioViewport) - 0.2, 0.5 * (3 / ratioViewport) - 0.3 ]
But, I am not getting it right.
What am I doing wrong at here?
REPL

Answer 1

It's not quite clear to me what you want. Are you looking for something like this?
const getPositionMain = (w, ratioViewport = w.innerWidth / w.innerHeight) => main =>
zipWith ((x, y) => 0.5 * (x / ratioViewport) - y) (main .ratio, main .focusPoint)
const _window = {innerWidth: 600, innerHeight: 400}
const Main = {
ratio : [ 0.5, 1, 2 ],
focusPoint : [ 0.1, 0.2, 0.3 ],
}
console .log (getPositionMain (_window) (Main))
<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.27.1/ramda.js"></script>
<script> const {zipWith} = R </script>
Or something more like this?:
const getPositionMain = (w, ratioViewport = w.innerWidth / w.innerHeight) => (main) => ({
ratio: main .ratio,
resultY: zipWith ((x, y) => 0.5 * (x / ratioViewport) - y) (main .ratio, main .focusPoint)
})
const _window = {innerWidth: 600, innerHeight: 400}
const Main = {
ratio : [ 0.5, 1, 2 ],
focusPoint : [ 0.1, 0.2, 0.3 ],
}
console .log (getPositionMain (_window) (Main))
<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.27.1/ramda.js"></script>
<script> const {zipWith} = R </script>
In either case, the code is much the same, just with a different format for the output results.
The working version I can get to closest to your attempt would look like this:
const getPositionMain = (w, ratioViewport = w.innerWidth / w.innerHeight) => applySpec ({
ratio : prop ('ratio'),
resultY : lift (zipWith ((x, y) => 0.5 * (x / ratioViewport) - y))
(prop ('ratio') , prop ('focusPoint'))
})
Note that zipWith takes a function and two lists. You were passing it the initial function and two functions that would resolve to lists when called properly. Functions that will resolve to specific types can be thought of as containers of those types. lift takes a function that operates on values and lifts it up to become a function that operates on containers of those values. So lift (resultY) (f, g) is approximately main => resultY (f (main), g (main)), and we can then use it in applySpec.
In every version here, I avoid the global variables you have of ratioViewport, calculating it from a Window object as a parameter. I find this much cleaner, but YMMV.
But we could skip that variable altogether by performing the inexpensive viewport calculation inside the main function, like this:
const getPositionMain = ({innerWidth, innerHeight}) => ({ratio, focusPoint}) =>
zipWith ((x, y) => 0.5 * (x / innerWidth * innerHeight) - y, ratio, focusPoint)
or like this:
const getPositionMain = ({innerWidth, innerHeight}) => ({ratio, focusPoint}) => ({
ratio,
resultY: zipWith ((x, y) => 0.5 * (x / innerWidth * innerHeight) - y, ratio, focusPoint)
})
Those are the versions I prefer.