handle transparent colors in rangeslider

Author: archmoj

src/components/rangeslider/draw.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var tinycolor = require('tinycolor2');
 var d3 = require('@plotly/d3');
 
 var Registry = require('../../registry');
@@ -395,12 +396,22 @@ function drawBg(rangeSlider, gd, axisOpts, opts) {
     var offsetShift = -opts._offsetShift;
     var lw = Drawing.crispRound(gd, opts.borderwidth);
 
+    var fillColor = tinycolor(opts.bgcolor);
+    var fillAlpha = fillColor.getAlpha();
+    var fillRGB = Color.tinyRGB(fillColor);
+
+    var strokeColor = tinycolor(opts.bordercolor);
+    var strokeAlpha = strokeColor.getAlpha();
+    var strokeRGB = Color.tinyRGB(strokeColor);
+
     bg.attr({
         width: opts._width + borderCorrect,
         height: opts._height + borderCorrect,
         transform: strTranslate(offsetShift, offsetShift),
-        fill: opts.bgcolor,
-        stroke: opts.bordercolor,
+        fill: fillRGB,
+        'fill-opacity': fillAlpha,
+        stroke: strokeRGB,
+        'stroke-opacity': strokeAlpha,
         'stroke-width': lw
     });
 }

test/jasmine/tests/range_slider_test.js

@@ -75,8 +75,8 @@ describe('Visible rangesliders', function() {
             expect(+bg.getAttribute('width')).toEqual(expectedWidth);
             expect(+bg.getAttribute('height')).toEqual(66);
 
-            expect(bg.getAttribute('fill')).toBe('#fafafa');
-            expect(bg.getAttribute('stroke')).toBe('black');
+            expect(bg.getAttribute('fill')).toBe('rgb(250, 250, 250)');
+            expect(bg.getAttribute('stroke')).toBe('rgb(0, 0, 0)');
             expect(+bg.getAttribute('stroke-width')).toBe(2);
 
             return Plotly.relayout(gd, {
@@ -91,8 +91,8 @@ describe('Visible rangesliders', function() {
 
             expect(+bg.getAttribute('height')).toEqual(32);
 
-            expect(bg.getAttribute('fill')).toBe('#ffff80');
-            expect(bg.getAttribute('stroke')).toBe('#404040');
+            expect(bg.getAttribute('fill')).toBe('rgb(255, 255, 128)');
+            expect(bg.getAttribute('stroke')).toBe('rgb(64, 64, 64)');
             expect(+bg.getAttribute('stroke-width')).toBe(1);
         })
         .then(done, done.fail);
@@ -366,8 +366,8 @@ describe('Visible rangesliders', function() {
             expect(+maskMin.getAttribute('width')).toEqual(maskMinWidth);
             expect(+maskMax.getAttribute('width')).toEqual(maskMaxWidth);
 
-            expect(bg.getAttribute('fill')).toBe('red');
-            expect(bg.getAttribute('stroke')).toBe('black');
+            expect(bg.getAttribute('fill')).toBe('rgb(255, 0, 0)');
+            expect(bg.getAttribute('stroke')).toBe('rgb(0, 0, 0)');
             expect(bg.getAttribute('stroke-width')).toBe('2');
 
             return Plotly.relayout(gd, 'xaxis.rangeslider.bordercolor', 'blue');
@@ -376,8 +376,8 @@ describe('Visible rangesliders', function() {
             expect(+maskMin.getAttribute('width')).toEqual(maskMinWidth);
             expect(+maskMax.getAttribute('width')).toEqual(maskMaxWidth);
 
-            expect(bg.getAttribute('fill')).toBe('red');
-            expect(bg.getAttribute('stroke')).toBe('blue');
+            expect(bg.getAttribute('fill')).toBe('rgb(255, 0, 0)');
+            expect(bg.getAttribute('stroke')).toBe('rgb(0, 0, 255)');
             expect(bg.getAttribute('stroke-width')).toBe('2');
 
             return Plotly.relayout(gd, 'xaxis.rangeslider.borderwidth', 3);
@@ -386,8 +386,8 @@ describe('Visible rangesliders', function() {
             expect(+maskMin.getAttribute('width')).toEqual(maskMinWidth);
             expect(+maskMax.getAttribute('width')).toEqual(maskMaxWidth);
 
-            expect(bg.getAttribute('fill')).toBe('red');
-            expect(bg.getAttribute('stroke')).toBe('blue');
+            expect(bg.getAttribute('fill')).toBe('rgb(255, 0, 0)');
+            expect(bg.getAttribute('stroke')).toBe('rgb(0, 0, 255)');
             expect(bg.getAttribute('stroke-width')).toBe('3');
         })
         .then(done, done.fail);