Skip to content

Commit c17371a

Browse files
committed
Switch color library
1 parent 04441f9 commit c17371a

File tree

3 files changed

+135
-75
lines changed

3 files changed

+135
-75
lines changed

package-lock.json

Lines changed: 61 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@
7777
"@turf/centroid": "^7.1.0",
7878
"base64-arraybuffer": "^1.0.2",
7979
"canvas-fit": "^1.5.0",
80+
"color": "^5.0.0",
8081
"color-alpha": "1.0.4",
8182
"color-normalize": "1.5.0",
8283
"color-parse": "2.0.0",

src/components/color/index.js

Lines changed: 73 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,48 @@
11
'use strict';
22

3-
var tinycolor = require('tinycolor2');
4-
var isNumeric = require('fast-isnumeric');
5-
var isTypedArray = require('../../lib/array').isTypedArray;
3+
const isNumeric = require('fast-isnumeric');
4+
const isTypedArray = require('../../lib/array').isTypedArray;
5+
const color = require('color').default
66

7-
var color = module.exports = {};
7+
const { background, defaultLine, defaults, lightLine } = require('./attributes');
88

9-
var colorAttrs = require('./attributes');
10-
color.defaults = colorAttrs.defaults;
11-
var defaultLine = color.defaultLine = colorAttrs.defaultLine;
12-
color.lightLine = colorAttrs.lightLine;
13-
var background = color.background = colorAttrs.background;
14-
15-
/*
16-
* tinyRGB: turn a tinycolor into an rgb string, but
17-
* unlike the built-in tinycolor.toRgbString this never includes alpha
18-
*/
19-
color.tinyRGB = function(tc) {
20-
var c = tc.toRgb();
21-
return 'rgb(' + Math.round(c.r) + ', ' +
22-
Math.round(c.g) + ', ' + Math.round(c.b) + ')';
23-
};
24-
25-
color.rgb = function(cstr) { return color.tinyRGB(tinycolor(cstr)); };
9+
const rgb = cstr => {
10+
const { r, g, b } = color(cstr).rgb().object();
11+
return `rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)})`;
12+
}
2613

27-
color.opacity = function(cstr) { return cstr ? tinycolor(cstr).getAlpha() : 0; };
14+
const opacity = cstr => cstr ? color(cstr).alpha() : 0;
2815

29-
color.addOpacity = function(cstr, op) {
30-
var c = tinycolor(cstr).toRgb();
31-
return 'rgba(' + Math.round(c.r) + ', ' +
32-
Math.round(c.g) + ', ' + Math.round(c.b) + ', ' + op + ')';
16+
const addOpacity = (cstr, op) => {
17+
const c = color(cstr).rgb().object();
18+
return `rgba(${Math.round(c.r)}, ${Math.round(c.g)}, ${Math.round(c.b)}, ${op})`;
3319
};
3420

3521
// combine two colors into one apparent color
3622
// if back has transparency or is missing,
37-
// color.background is assumed behind it
38-
color.combine = function(front, back) {
39-
var fc = tinycolor(front).toRgb();
40-
if(fc.a === 1) return tinycolor(front).toRgbString();
41-
42-
var bc = tinycolor(back || background).toRgb();
43-
var bcflat = bc.a === 1 ? bc : {
44-
r: 255 * (1 - bc.a) + bc.r * bc.a,
45-
g: 255 * (1 - bc.a) + bc.g * bc.a,
46-
b: 255 * (1 - bc.a) + bc.b * bc.a
23+
// background is assumed behind it
24+
const combine = (front, back = background) => {
25+
const fc = color(front).rgb().object();
26+
fc.alpha ||= 1;
27+
if(fc.alpha === 1) return color(front).rgb().string();
28+
29+
const bc = color(back).rgb().object;
30+
bc.alpha ||= 1;
31+
const bcflat = bc.alpha === 1
32+
? bc
33+
: {
34+
r: 255 * (1 - bc.alpha) + bc.r * bc.alpha,
35+
g: 255 * (1 - bc.alpha) + bc.g * bc.alpha,
36+
b: 255 * (1 - bc.alpha) + bc.b * bc.alpha
37+
};
38+
39+
const fcflat = {
40+
r: bcflat.r * (1 - fc.alpha) + fc.r * fc.alpha,
41+
g: bcflat.g * (1 - fc.alpha) + fc.g * fc.alpha,
42+
b: bcflat.b * (1 - fc.alpha) + fc.b * fc.alpha
4743
};
48-
var fcflat = {
49-
r: bcflat.r * (1 - fc.a) + fc.r * fc.a,
50-
g: bcflat.g * (1 - fc.a) + fc.g * fc.a,
51-
b: bcflat.b * (1 - fc.a) + fc.b * fc.a
52-
};
53-
return tinycolor(fcflat).toRgbString();
44+
45+
return color(fcflat).string();
5446
};
5547

5648
/*
@@ -59,17 +51,17 @@ color.combine = function(front, back) {
5951
* Ignores alpha channel values.
6052
* The resulting color is computed as: factor * first + (1 - factor) * second.
6153
*/
62-
color.interpolate = function(first, second, factor) {
63-
var fc = tinycolor(first).toRgb();
64-
var sc = tinycolor(second).toRgb();
54+
const interpolate = (first, second, factor) => {
55+
const fc = color(first).rgb().object();
56+
const sc = color(second).rgb().object();
6557

66-
var ic = {
58+
const ic = {
6759
r: factor * fc.r + (1 - factor) * sc.r,
6860
g: factor * fc.g + (1 - factor) * sc.g,
6961
b: factor * fc.b + (1 - factor) * sc.b,
7062
};
7163

72-
return tinycolor(ic).toRgbString();
64+
return color(ic).rgb().string();
7365
};
7466

7567
/*
@@ -80,34 +72,27 @@ color.interpolate = function(first, second, factor) {
8072
* If lightAmount / darkAmount are used, we adjust by these percentages,
8173
* otherwise we go all the way to white or black.
8274
*/
83-
color.contrast = function(cstr, lightAmount, darkAmount) {
84-
var tc = tinycolor(cstr);
75+
const contrast = (cstr, lightAmount, darkAmount) => {
76+
let c = color(cstr)
8577

86-
if(tc.getAlpha() !== 1) tc = tinycolor(color.combine(cstr, background));
78+
if(c.alpha() !== 1) c = color(combine(cstr, background));
8779

88-
var newColor = tc.isDark() ?
89-
(lightAmount ? tc.lighten(lightAmount) : background) :
90-
(darkAmount ? tc.darken(darkAmount) : defaultLine);
80+
const newColor = color(
81+
c.isDark()
82+
? (lightAmount ? c.lighten(lightAmount / 100) : background)
83+
: (darkAmount ? c.darken(darkAmount / 100) : defaultLine)
84+
);
9185

92-
return newColor.toString();
86+
return newColor.rgb().string();
9387
};
9488

95-
color.stroke = function(s, c) {
96-
var tc = tinycolor(c);
97-
s.style({stroke: color.tinyRGB(tc), 'stroke-opacity': tc.getAlpha()});
98-
};
89+
const stroke = (s, cstr) => s.style({ stroke: rgb(cstr), 'stroke-opacity': opacity(cstr) });
9990

100-
color.fill = function(s, c) {
101-
var tc = tinycolor(c);
102-
s.style({
103-
fill: color.tinyRGB(tc),
104-
'fill-opacity': tc.getAlpha()
105-
});
106-
};
91+
const fill = (s, cstr) => s.style({ fill: rgb(cstr), 'fill-opacity': opacity(cstr) });
10792

10893
// search container for colors with the deprecated rgb(fractions) format
10994
// and convert them to rgb(0-255 values)
110-
color.clean = function(container) {
95+
const clean = container => {
11196
if(!container || typeof container !== 'object') return;
11297

11398
var keys = Object.keys(container);
@@ -134,13 +119,13 @@ color.clean = function(container) {
134119

135120
var el0 = val[0];
136121
if(!Array.isArray(el0) && el0 && typeof el0 === 'object') {
137-
for(j = 0; j < val.length; j++) color.clean(val[j]);
122+
for(j = 0; j < val.length; j++) clean(val[j]);
138123
}
139-
} else if(val && typeof val === 'object' && !isTypedArray(val)) color.clean(val);
124+
} else if(val && typeof val === 'object' && !isTypedArray(val)) clean(val);
140125
}
141126
};
142127

143-
function cleanOne(val) {
128+
const cleanOne = val => {
144129
if(isNumeric(val) || typeof val !== 'string') return val;
145130

146131
var valTrim = val.trim();
@@ -181,3 +166,22 @@ function cleanOne(val) {
181166
if(rgba) return 'rgba(' + rgbStr + ', ' + parts[3] + ')';
182167
return 'rgb(' + rgbStr + ')';
183168
}
169+
170+
const isDark = cstr => color(cstr).isDark()
171+
172+
module.exports = {
173+
addOpacity,
174+
background,
175+
clean,
176+
combine,
177+
contrast,
178+
defaultLine,
179+
defaults,
180+
fill,
181+
interpolate,
182+
isDark,
183+
lightLine,
184+
opacity,
185+
rgb,
186+
stroke
187+
}

0 commit comments

Comments
 (0)