Skip to content

Commit

Permalink
Fix parsing coords that have a minimum range < 0 (#619)
Browse files Browse the repository at this point in the history
  • Loading branch information
lloydk authored Dec 26, 2024
1 parent a3e8958 commit 713e72c
Showing 2 changed files with 12 additions and 4 deletions.
5 changes: 3 additions & 2 deletions releases/v0.6.0.md
Original file line number Diff line number Diff line change
@@ -17,7 +17,7 @@ There is a number of breaking changes in this release, but they should only nega
As [announced](https://github.com/color-js/color.js/releases/tag/v0.5.0) in v0.5.0, we have now switched to using `null` instead of `NaN` to represent `none` values (naturally occurring when converting achromatic colors to certain color spaces).
Not only is `null` conceptually closer, but since [CSS *also* now has a `NaN` value](https://www.w3.org/TR/css-values-4/#calc-error-constants), this change allows us to represent it properly, using an actual `NaN` value.

`NaN` continues to be parsed (and becomes `NaN` in JS). Instead of being serialized to `NaN` (which is invalid in CSS), it is serialized to `calc(NaN)` which is a valid coordinate in CSS. For roundtripping to work properly, this also means we now parse `calc(NaN)` as well. Slippery slope? We’ll see. 😁
`NaN` continues to be parsed (and becomes `NaN` in JS). Instead of being serialized to `NaN` (which is invalid in CSS), it is serialized to `calc(NaN)` which is a valid coordinate in CSS. For roundtripping to work properly, this also means we now parse `calc(NaN)` as well. Slippery slope? We’ll see. 😁

If you are working with any code that needs to handle `Color` instances/objects generically, without knowing which version of Color.js they come from, you can detect which value is being used and use that instead of a hardcoded `null` or `NaN`:

@@ -84,7 +84,7 @@ If you were referencing these from their previous URL, there is a redirect in pl
## Color apps
We have now moved our [Color apps](https://apps.colorjs.io) (which also serve as Color.js demos) into their own repo and domain: https://apps.colorjs.io
We have now moved our [Color apps](https://apps.colorjs.io) (which also serve as Color.js demos) into their own repo and domain: https://apps.colorjs.io
If you have links to these, there’s nothing to worry about: the old URL still works (it just redirects to the new one).
@@ -129,6 +129,7 @@ There is also a new app:
- Do not use HSL normalized saturation and hue for certain spaces (by @facelessuser in #582)
- Avoid mutating arguments passed to the Color constructor (by @MysteryBlokHed in #603)
- Fix parsing 7-character hex colors (by @kleinfreund in #616)
- Fix parsing of percentage values for color spaces with coords that have a range property with a minimum value less than 0 (e.g. acescc) (by @lloydk in #619)
### Improvements to types
11 changes: 9 additions & 2 deletions src/Type.js
Original file line number Diff line number Diff line change
@@ -18,6 +18,7 @@ export default class Type {
}

if (coordMeta) {
this.coordMeta = coordMeta;
this.coordRange = coordMeta.range ?? coordMeta.refRange;
}

@@ -112,8 +113,14 @@ export default class Type {
* @returns {[number, number]}
*/
percentageRange (scale = 1) {
let range = this.coordRange && this.coordRange[0] < 0 ? [-1, 1] : [0, 1];
return /** @type {[number, number]} */ (range.map(v => v * scale));
let range;
if ((this.coordMeta && this.coordMeta.range) || (this.coordRange && this.coordRange[0] >= 0)) {
range = [0, 1];
}
else {
range = [-1, 1];
}
return [range[0] * scale, range[1] * scale];
}

static get (type, ...args) {

0 comments on commit 713e72c

Please sign in to comment.