jlmakes / rematrix

Matrix transformations made easy.
https://rematrix.now.sh/
MIT License
430 stars 13 forks source link

Add unit type to rotation and skew methods #2

Open jlmakes opened 7 years ago

jlmakes commented 7 years ago

Something that allows you to specify the unit for rotation, such as rad or turn Rematrix.rotate(0.5, 'rad') perhaps?

— @davidkpiano

Units

Source: https://drafts.csswg.org/css-values-3/#angles

Re: #1

jlmakes commented 7 years ago

Rematrix.rotate(45) implicitly uses degrees, but CSS uses explicit unit types; if implemented, I’m leaning towards no default unit and requiring a 2nd parameter, making this a breaking change.

Example:

Rematrix.rotate(180) // throws error

Rematrix.rotate(180, 'deg')
Rematrix.rotate(0.5, 'turn')
Rematrix.rotate(200, 'grad')
Rematrix.rotate(Math.PI, 'rad')
jlmakes commented 6 years ago

It would make sense to extend support for angle unit types to skew as well... but the optional 2nd argument in Rematrix.skew makes things a bit more complicated; I don't particularly like the proposed API changes as it applies here:

Rematrix.skew(45, 'deg', 1.5, 'turn')

I don't necessarily think using regexes would be a superior implementation, but the logical grouping of using strings looks a lot better (and more closely resembles CSS):

Rematrix.skew('45deg', '1.5turn')

It’s also worth keeping in mind that only 3 lines of code would suffice for manual conversions:

const radToDeg  = angle => angle / Math.PI / 180
const gradToDeg = angle => angle / Math.PI / 200
const turnToDeg = angle => angle * 360

Still evaluating the cost and benefits of baking this into the API.

davidkpiano commented 6 years ago

Also consider static functions (a la Elm):

const { deg, rad, grad } = Rematrix;

// deg(180) would return {value: 180, unit: 'deg'}

Rematrix.rotate(deg(180))
Rematrix.rotate(turn(.5))
Rematrix.rotate(grad(200))
davidkpiano commented 6 years ago

Another option: (not a breaking change, just add static methods to the rotate() function)

Rematrix.rotate.deg(180)
Rematrix.rotate.turn(.5)
Rematrix.rotate.grad(200)
jlmakes commented 6 years ago

I rather like the first suggestion, as it handles two arguments passed to skew nicely:

const { deg, turn } = Rematrix
Rematrix.skew(deg(45), turn(0.5))