Skip to content

Commit b15bdca

Browse files
camdecostercamdecoster
committed
Switch references to new color library
1 parent d6d1e9e commit b15bdca

File tree

22 files changed

+116
-134
lines changed

22 files changed

+116
-134
lines changed

‎src/components/color/attributes.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,6 @@ exports.borderLine = '#BEC8D9';
2525

2626
// with axis.color and Color.interp we aren't using lightLine
2727
// itself anymore, instead interpolating between axis.color
28-
// and the background color using tinycolor.mix. lightFraction
28+
// and the background color using Color.mix. lightFraction
2929
// gives back exactly lightLine if the other colors are defaults.
3030
exports.lightFraction = 100 * (0xe - 0x4) / (0xf - 0x4);

‎src/components/color/index.js‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -170,10 +170,30 @@ const cleanOne = val => {
170170
const equals = (cstr1, cstr2) => cstr1 && cstr2 && color(cstr1).rgb().string() === color(cstr2).rgb().string();
171171

172172
const isValid = cstr => {
173-
try { return !!color(cstr); }
173+
try { return cstr && !!color(cstr); }
174174
catch { return false; }
175175
}
176176

177+
const mix = (cstr1, cstr2, weight) => color(cstr1).mix(color(cstr2), weight / 100).rgb().string();
178+
179+
const mostReadable = (baseColor, colorList = []) => {
180+
let bestColor;
181+
let bestContrast = -Infinity;
182+
183+
for (const cstr of colorList) {
184+
const contrast = color(baseColor).contrast(color(cstr));
185+
if (contrast > bestContrast) {
186+
bestContrast = contrast;
187+
bestColor = color(cstr).rgb().string();
188+
}
189+
}
190+
191+
// Fall back to black/white if provided colors don't have proper contrast level
192+
return bestColor && color(baseColor).level(color(bestColor))
193+
? bestColor
194+
: mostReadable(baseColor, ["#000", "#fff"]);
195+
};
196+
177197
module.exports = {
178198
addOpacity,
179199
background,
@@ -188,6 +208,8 @@ module.exports = {
188208
interpolate,
189209
isValid,
190210
lightLine,
211+
mix,
212+
mostReadable,
191213
opacity,
192214
rgb,
193215
stroke

‎src/components/colorbar/draw.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
'use strict';
22

33
var d3 = require('@plotly/d3');
4-
var tinycolor = require('tinycolor2');
54

65
var Plots = require('../../plots/plots');
76
var Registry = require('../../registry');
@@ -548,10 +547,9 @@ function drawColorBar(g, opts, gd) {
548547
if(opts._fillgradient) {
549548
Drawing.gradient(fillEl, gd, opts._id, isVertical ? 'vertical' : 'horizontalreversed', opts._fillgradient, 'fill');
550549
} else {
551-
// tinycolor can't handle exponents and
552-
// at this scale, removing it makes no difference.
550+
// The color library can't handle exponents and at this scale, removing it makes no difference.
553551
var colorString = fillColormap(d).replace('e-', '');
554-
fillEl.attr('fill', tinycolor(colorString).toHexString());
552+
fillEl.attr('fill', Color.color(colorString).hex());
555553
}
556554
});
557555

@@ -716,8 +714,8 @@ function drawColorBar(g, opts, gd) {
716714

717715
if(!isVertical && (
718716
borderwidth || (
719-
tinycolor(bgcolor).getAlpha() &&
720-
!tinycolor.equals(fullLayout.paper_bgcolor, bgcolor)
717+
Color.opacity(bgcolor) &&
718+
!Color.equals(fullLayout.paper_bgcolor, bgcolor)
721719
)
722720
)) {
723721
// for horizontal colorbars when there is a border line or having different background color

‎src/components/colorscale/helpers.js‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
'use strict';
22

33
var d3 = require('@plotly/d3');
4-
var tinycolor = require('tinycolor2');
54
var isNumeric = require('fast-isnumeric');
65

76
var Lib = require('../../lib');
@@ -167,8 +166,8 @@ function makeColorScaleFunc(specs, opts) {
167166
var _range = new Array(N);
168167

169168
for(var i = 0; i < N; i++) {
170-
var rgba = tinycolor(range[i]).toRgb();
171-
_range[i] = [rgba.r, rgba.g, rgba.b, rgba.a];
169+
const { r, g, b, alpha = 1 } = Color.color(range[i]).rgb().object();
170+
_range[i] = [r, g, b, alpha];
172171
}
173172

174173
var _sclFunc = d3.scale.linear()
@@ -189,14 +188,14 @@ function makeColorScaleFunc(specs, opts) {
189188
} else if(returnArray) {
190189
sclFunc = function(v) {
191190
if(isNumeric(v)) return _sclFunc(v);
192-
else if(tinycolor(v).isValid()) return v;
193-
else return Color.defaultLine;
191+
if(Color.isValid(v)) return v;
192+
return Color.defaultLine;
194193
};
195194
} else {
196195
sclFunc = function(v) {
197196
if(isNumeric(v)) return colorArray2rbga(_sclFunc(v));
198-
else if(tinycolor(v).isValid()) return v;
199-
else return Color.defaultLine;
197+
if(Color.isValid(v)) return v;
198+
return Color.defaultLine;
200199
};
201200
}
202201

@@ -216,10 +215,10 @@ function colorArray2rbga(colorArray) {
216215
r: colorArray[0],
217216
g: colorArray[1],
218217
b: colorArray[2],
219-
a: colorArray[3]
218+
alpha: colorArray[3]
220219
};
221220

222-
return tinycolor(colorObj).toRgbString();
221+
return Color.color(colorObj).rgb().string();
223222
}
224223

225224
module.exports = {

‎src/components/colorscale/scales.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use strict';
22

3-
var tinycolor = require('tinycolor2');
3+
const Color = require('../color');
44

55
var scales = {
66
Greys: [
@@ -170,7 +170,7 @@ function isValidScaleArray(scl) {
170170
for(var i = 0; i < scl.length; i++) {
171171
var si = scl[i];
172172

173-
if(si.length !== 2 || +si[0] < highestVal || !tinycolor(si[1]).isValid()) {
173+
if(si.length !== 2 || +si[0] < highestVal || !Color.isValid(si[1])) {
174174
return false;
175175
}
176176

‎src/components/drawing/index.js‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ var d3 = require('@plotly/d3');
44
var Lib = require('../../lib');
55
var numberFormat = Lib.numberFormat;
66
var isNumeric = require('fast-isnumeric');
7-
var tinycolor = require('tinycolor2');
87

98
var Registry = require('../../registry');
109
var Color = require('../color');
@@ -491,11 +490,10 @@ function gradientWithBounds(sel, gd, gradientID, type, colorscale, prop, start,
491490
stops.enter().append('stop');
492491

493492
stops.each(function(d) {
494-
var tc = tinycolor(d[1]);
495493
d3.select(this).attr({
496494
offset: d[0] + '%',
497-
'stop-color': Color.tinyRGB(tc),
498-
'stop-opacity': tc.getAlpha()
495+
'stop-color': Color.rgb(d[1]),
496+
'stop-opacity': Color.opacity(d[1])
499497
});
500498
});
501499
});
@@ -549,9 +547,8 @@ drawing.pattern = function(sel, calledBy, gd, patternID, shape, size, solidity,
549547
var patternTag;
550548
var patternAttrs = {};
551549

552-
var fgC = tinycolor(fgcolor);
553-
var fgRGB = Color.tinyRGB(fgC);
554-
var fgAlpha = fgC.getAlpha();
550+
var fgRGB = Color.rgb(fgcolor);
551+
var fgAlpha = Color.opacity(fgcolor);
555552
var opacity = fgopacity * fgAlpha;
556553

557554
switch(shape) {
@@ -704,9 +701,8 @@ drawing.pattern = function(sel, calledBy, gd, patternID, shape, size, solidity,
704701
});
705702

706703
if(bgcolor) {
707-
var bgC = tinycolor(bgcolor);
708-
var bgRGB = Color.tinyRGB(bgC);
709-
var bgAlpha = bgC.getAlpha();
704+
var bgRGB = Color.rgb(bgcolor);
705+
var bgAlpha = Color.opacity(bgcolor);
710706

711707
var rects = el.selectAll('rect').data([0]);
712708
rects.exit().remove();

‎src/components/fx/hover.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
var d3 = require('@plotly/d3');
44
var isNumeric = require('fast-isnumeric');
5-
var tinycolor = require('tinycolor2');
65

76
var Lib = require('../../lib');
87
var pushUnique = Lib.pushUnique;
@@ -2128,8 +2127,9 @@ function createSpikelines(gd, closestPoints, opts) {
21282127
hLinePointX = xa._offset + hLinePoint.x;
21292128
hLinePointY = ya._offset + hLinePoint.y;
21302129
}
2131-
var dfltHLineColor = tinycolor.readability(hLinePoint.color, contrastColor) < 1.5 ?
2132-
Color.contrast(contrastColor) : hLinePoint.color;
2130+
var dfltHLineColor = Color.color(hLinePoint.color).contrast(contrastColor) < 1.5
2131+
? Color.contrast(contrastColor)
2132+
: hLinePoint.color;
21332133
var yMode = ya.spikemode;
21342134
var yThickness = ya.spikethickness;
21352135
var yColor = ya.spikecolor || dfltHLineColor;
@@ -2207,8 +2207,9 @@ function createSpikelines(gd, closestPoints, opts) {
22072207
vLinePointX = xa._offset + vLinePoint.x;
22082208
vLinePointY = ya._offset + vLinePoint.y;
22092209
}
2210-
var dfltVLineColor = tinycolor.readability(vLinePoint.color, contrastColor) < 1.5 ?
2211-
Color.contrast(contrastColor) : vLinePoint.color;
2210+
var dfltVLineColor = Color.color(vLinePoint.color).contrast(contrastColor) < 1.5
2211+
? Color.contrast(contrastColor)
2212+
: vLinePoint.color;
22122213
var xMode = xa.spikemode;
22132214
var xThickness = xa.spikethickness;
22142215
var xColor = xa.spikecolor || dfltVLineColor;

‎src/lib/coerce.js‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
'use strict';
22

33
var isNumeric = require('fast-isnumeric');
4-
var tinycolor = require('tinycolor2');
54

65
var extendFlat = require('./extend').extendFlat;
76

@@ -169,7 +168,7 @@ exports.valObjectMeta = {
169168
coerceFunction: function(v, propOut, dflt) {
170169
if(isTypedArraySpec(v)) v = decodeTypedArraySpec(v);
171170

172-
if(tinycolor(v).isValid()) propOut.set(v);
171+
if(Color.isValid(v)) propOut.set(v);
173172
else propOut.set(dflt);
174173
}
175174
},
@@ -181,11 +180,8 @@ exports.valObjectMeta = {
181180
requiredOpts: [],
182181
otherOpts: ['dflt'],
183182
coerceFunction: function(v, propOut, dflt) {
184-
function isColor(color) {
185-
return tinycolor(color).isValid();
186-
}
187183
if(!Array.isArray(v) || !v.length) propOut.set(dflt);
188-
else if(v.every(isColor)) propOut.set(v);
184+
else if(v.every(color => Color.isvalid(color))) propOut.set(v);
189185
else propOut.set(dflt);
190186
}
191187
},

‎src/lib/gl_format_color.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
'use strict';
22

33
var isNumeric = require('fast-isnumeric');
4-
var tinycolor = require('tinycolor2');
54
var rgba = require('color-normalize');
65

76
var Colorscale = require('../components/colorscale');
@@ -78,11 +77,10 @@ function parseColorScale(cont) {
7877

7978
return colorscale.map(function(elem) {
8079
var index = elem[0];
81-
var color = tinycolor(elem[1]);
82-
var rgb = color.toRgb();
80+
const { r, g, b, alpha = 1 } = Color.color(elem[1]).rgb().object();
8381
return {
8482
index: index,
85-
rgb: [rgb.r, rgb.g, rgb.b, rgb.a]
83+
rgb: [r, g, b, alpha]
8684
};
8785
});
8886
}

‎src/plot_api/helpers.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -139,8 +139,7 @@ exports.cleanLayout = function(layout) {
139139
*/
140140
if(layout.dragmode === 'rotate') layout.dragmode = 'orbit';
141141

142-
// sanitize rgb(fractions) and rgba(fractions) that old tinycolor
143-
// supported, but new tinycolor does not because they're not valid css
142+
// sanitize rgb(fractions) and rgba(fractions) because they're not valid css
144143
Color.clean(layout);
145144

146145
// clean the layout container in layout.template
@@ -277,8 +276,7 @@ exports.cleanData = function(data) {
277276
if(emptyContainer(trace, 'marker')) delete trace.marker;
278277
}
279278

280-
// sanitize rgb(fractions) and rgba(fractions) that old tinycolor
281-
// supported, but new tinycolor does not because they're not valid css
279+
// sanitize rgb(fractions) and rgba(fractions) because they're not valid css
282280
Color.clean(trace);
283281

284282
// remove obsolete autobin(x|y) attributes, but only if true

0 commit comments

Comments
 (0)