From 7a4982b3d16cf48bdeab2b0c0c5208220d85693b Mon Sep 17 00:00:00 2001
From: Tim Slatcher <933064+zerovox@users.noreply.github.com>
Date: Thu, 19 Sep 2019 08:23:20 -0700
Subject: [PATCH 1/4] Add support for 4 and 8 digit hex codes
---
src/color.js | 11 ++++++++++-
test/color-test.js | 11 ++++++++++-
2 files changed, 20 insertions(+), 2 deletions(-)
diff --git a/src/color.js b/src/color.js
index 6f133b1..356f831 100644
--- a/src/color.js
+++ b/src/color.js
@@ -9,7 +9,9 @@ var reI = "\\s*([+-]?\\d+)\\s*",
reN = "\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)\\s*",
reP = "\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)%\\s*",
reHex3 = /^#([0-9a-f]{3})$/,
+ reHex4 = /^#([0-9a-f]{4})$/,
reHex6 = /^#([0-9a-f]{6})$/,
+ reHex8 = /^#([0-9a-f]{8})$/,
reRgbInteger = new RegExp("^rgb\\(" + [reI, reI, reI] + "\\)$"),
reRgbPercent = new RegExp("^rgb\\(" + [reP, reP, reP] + "\\)$"),
reRgbaInteger = new RegExp("^rgba\\(" + [reI, reI, reI, reN] + "\\)$"),
@@ -197,8 +199,10 @@ function color_formatRgb() {
export default function color(format) {
var m;
format = (format + "").trim().toLowerCase();
- return (m = reHex3.exec(format)) ? (m = parseInt(m[1], 16), new Rgb((m >> 8 & 0xf) | (m >> 4 & 0x0f0), (m >> 4 & 0xf) | (m & 0xf0), ((m & 0xf) << 4) | (m & 0xf), 1)) // #f00
+ return (m = reHex3.exec(format)) ? (m = parseInt(m[1], 16), new Rgb((m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), ((m & 0xf) << 4) | (m & 0xf), 1)) // #f00
+ : (m = reHex4.exec(format)) ? (m = parseInt(m[1], 16), new Rgb((m >> 12 & 0xf) | (m >> 8 & 0xf0), (m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), (((m & 0xf) << 4) | (m & 0xf)) / 0xff)) // #f000
: (m = reHex6.exec(format)) ? rgbn(parseInt(m[1], 16)) // #ff0000
+ : (m = reHex8.exec(format)) ? rgbn8(parseInt(m[1], 16)) // #ff000000
: (m = reRgbInteger.exec(format)) ? new Rgb(m[1], m[2], m[3], 1) // rgb(255, 0, 0)
: (m = reRgbPercent.exec(format)) ? new Rgb(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, 1) // rgb(100%, 0%, 0%)
: (m = reRgbaInteger.exec(format)) ? rgba(m[1], m[2], m[3], m[4]) // rgba(255, 0, 0, 1)
@@ -214,6 +218,11 @@ function rgbn(n) {
return new Rgb(n >> 16 & 0xff, n >> 8 & 0xff, n & 0xff, 1);
}
+function rgbn8(n) {
+ console.log(n);
+ return new Rgb(n >> 24 & 0xff, n >> 16 & 0xff, n >> 8 & 0xff, (n & 0xff) / 0xff);
+}
+
function rgba(r, g, b, a) {
if (a <= 0) r = g = b = NaN;
return new Rgb(r, g, b, a);
diff --git a/test/color-test.js b/test/color-test.js
index a8e9825..c2251c4 100644
--- a/test/color-test.js
+++ b/test/color-test.js
@@ -26,6 +26,16 @@ tape("color(format) parses 3-digit hexadecimal (e.g., \"#abc\")", function(test)
test.end();
});
+tape("color(format) parses 8-digit hexadecimal (e.g., \"#abcdef\")", function(test) {
+ test.rgbEqual(color.color("#abcdef33"), 171, 205, 239, 0.2);
+ test.end();
+});
+
+tape("color(format) parses 4-digit hexadecimal (e.g., \"#abc\")", function(test) {
+ test.rgbEqual(color.color("#abc3"), 170, 187, 204, 0.2);
+ test.end();
+});
+
tape("color(format) parses RGB integer format (e.g., \"rgb(12,34,56)\")", function(test) {
test.rgbEqual(color.color("rgb(12,34,56)"), 12, 34, 56, 1);
test.end();
@@ -157,7 +167,6 @@ tape("color(format) returns undefined RGB channel values for unknown formats", f
test.equal(color.color("hasOwnProperty"), null);
test.equal(color.color("__proto__"), null);
test.equal(color.color("#ab"), null);
- test.equal(color.color("#abcd"), null);
test.end();
});
From 69f83822e1ff70e2b273dfb2f28df6bef7fa91b3 Mon Sep 17 00:00:00 2001
From: Tim Slatcher <933064+zerovox@users.noreply.github.com>
Date: Thu, 19 Sep 2019 08:33:04 -0700
Subject: [PATCH 2/4] Update README.md
---
README.md | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/README.md b/README.md
index 4f761f0..890e491 100644
--- a/README.md
+++ b/README.md
@@ -63,7 +63,7 @@ var steelblue = d3.rgb("steelblue");
# d3.color(specifier) [<>](https://github.com/d3/d3-color/blob/master/src/color.js "Source")
-Parses the specified [CSS Color Module Level 3](http://www.w3.org/TR/css3-color/#colorunits) *specifier* string, returning an [RGB](#rgb) or [HSL](#hsl) color. If the specifier was not valid, null is returned. Some examples:
+Parses the specified [CSS Color Module Level 3](http://www.w3.org/TR/css3-color/#colorunits) *specifier* string, returning an [RGB](#rgb) or [HSL](#hsl) color, along with [CSS Color Module Level 4 hex](https://www.w3.org/TR/css-color-4/#hex-notation) *specifier* strings. If the specifier was not valid, null is returned. Some examples:
* `rgb(255, 255, 255)`
* `rgb(10%, 20%, 30%)`
@@ -73,6 +73,8 @@ Parses the specified [CSS Color Module Level 3](http://www.w3.org/TR/css3-color/
* `hsla(120, 50%, 20%, 0.4)`
* `#ffeeaa`
* `#fea`
+* `#ffeeaa22`
+* `#fea2`
* `steelblue`
The list of supported [named colors](http://www.w3.org/TR/SVG/types.html#ColorKeywords) is specified by CSS.
From 39f06c9c5b567251dfbb9235825a2cbbe2cfb095 Mon Sep 17 00:00:00 2001
From: Tim Slatcher <933064+zerovox@users.noreply.github.com>
Date: Thu, 19 Sep 2019 08:37:35 -0700
Subject: [PATCH 3/4] clean up
---
src/color.js | 1 -
1 file changed, 1 deletion(-)
diff --git a/src/color.js b/src/color.js
index 356f831..7638c32 100644
--- a/src/color.js
+++ b/src/color.js
@@ -219,7 +219,6 @@ function rgbn(n) {
}
function rgbn8(n) {
- console.log(n);
return new Rgb(n >> 24 & 0xff, n >> 16 & 0xff, n >> 8 & 0xff, (n & 0xff) / 0xff);
}
From 6d5e89c352c107c693adbdb889e1e3683926790c Mon Sep 17 00:00:00 2001
From: Tim Slatcher <933064+zerovox@users.noreply.github.com>
Date: Thu, 19 Sep 2019 08:38:18 -0700
Subject: [PATCH 4/4] fix test name
---
test/color-test.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/test/color-test.js b/test/color-test.js
index c2251c4..99ed663 100644
--- a/test/color-test.js
+++ b/test/color-test.js
@@ -26,12 +26,12 @@ tape("color(format) parses 3-digit hexadecimal (e.g., \"#abc\")", function(test)
test.end();
});
-tape("color(format) parses 8-digit hexadecimal (e.g., \"#abcdef\")", function(test) {
+tape("color(format) parses 8-digit hexadecimal (e.g., \"#abcdef33\")", function(test) {
test.rgbEqual(color.color("#abcdef33"), 171, 205, 239, 0.2);
test.end();
});
-tape("color(format) parses 4-digit hexadecimal (e.g., \"#abc\")", function(test) {
+tape("color(format) parses 4-digit hexadecimal (e.g., \"#abc3\")", function(test) {
test.rgbEqual(color.color("#abc3"), 170, 187, 204, 0.2);
test.end();
});