Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix parsing coords that have a minimum range < 0 #619

Merged
merged 1 commit into from
Dec 26, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions releases/v0.6.0.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`:

Expand Down Expand Up @@ -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).

Expand Down Expand Up @@ -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

Expand Down
11 changes: 9 additions & 2 deletions src/Type.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
}

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

Expand Down Expand Up @@ -112,8 +113,14 @@
* @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) {
Expand All @@ -121,6 +128,6 @@
return type;
}

return new this(type, ...args);

Check failure on line 131 in src/Type.js

View workflow job for this annotation

GitHub Actions / Lint & Test Types

A spread argument must either have a tuple type or be passed to a rest parameter.
}
}
Loading