Add unit type to rotation and skew methods

[jlmakes]

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

— @davidkpiano

Units

• deg — Degrees. There are 360 degrees in a full circle.
• grad — Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.
• rad — Radians. There are 2π radians in a full circle.
• turn — Turns. There is 1 turn in a full circle.

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

Re: #1

[jlmakes]

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]

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]

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]

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]

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))