Merge pull request #6323 from plotly/more-drawing-rgba-colors

Fix exporting transparent colors in `rangeslider` & `selections`

Author: archmoj

src/components/rangeslider/draw.js

@@ -399,10 +399,10 @@ function drawBg(rangeSlider, gd, axisOpts, opts) {
         width: opts._width + borderCorrect,
         height: opts._height + borderCorrect,
         transform: strTranslate(offsetShift, offsetShift),
-        fill: opts.bgcolor,
-        stroke: opts.bordercolor,
         'stroke-width': lw
-    });
+    })
+    .call(Color.stroke, opts.bordercolor)
+    .call(Color.fill, opts.bgcolor);
 }
 
 function addClipPath(rangeSlider, gd, axisOpts, opts) {

src/components/selections/select.js

@@ -112,21 +112,25 @@ function prepSelect(evt, startX, startY, dragOptions, mode) {
         fullLayout.newshape :
         fullLayout.newselection;
 
+    var fillC = (isDrawMode && !isOpenMode) ? newStyle.fillcolor : 'rgba(0,0,0,0)';
+
+    var strokeC = newStyle.line.color || (
+        isCartesian ?
+            Color.contrast(gd._fullLayout.plot_bgcolor) :
+            '#7f7f7f' // non-cartesian subplot
+    );
+
     outlines.enter()
         .append('path')
         .attr('class', 'select-outline select-outline-' + plotinfo.id)
         .style({
             opacity: isDrawMode ? newStyle.opacity / 2 : 1,
-            fill: (isDrawMode && !isOpenMode) ? newStyle.fillcolor : 'none',
-            stroke: newStyle.line.color || (
-                isCartesian ?
-                    Color.contrast(gd._fullLayout.plot_bgcolor) :
-                    '#7f7f7f' // non-cartesian subplot
-            ),
             'stroke-dasharray': dashStyle(newStyle.line.dash, newStyle.line.width),
             'stroke-width': newStyle.line.width + 'px',
             'shape-rendering': 'crispEdges'
         })
+        .call(Color.stroke, strokeC)
+        .call(Color.fill, fillC)
         .attr('fill-rule', 'evenodd')
         .classed('cursor-move', isDrawMode ? true : false)
         .attr('transform', transform)

src/traces/violin/hover.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var Color = require('../../components/color');
 var Lib = require('../../lib');
 var Axes = require('../../plots/cartesian/axes');
 var boxHoverPoints = require('../box/hover');
@@ -75,7 +76,7 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode, opts) {
 
                 closeData.push(kdePointData);
 
-                violinLineAttrs = {stroke: pointData.color};
+                violinLineAttrs = {};
                 violinLineAttrs[pLetter + '1'] = Lib.constrain(paOffset + pOnPath[0], paOffset, paOffset + paLength);
                 violinLineAttrs[pLetter + '2'] = Lib.constrain(paOffset + pOnPath[1], paOffset, paOffset + paLength);
                 violinLineAttrs[vLetter + '1'] = violinLineAttrs[vLetter + '2'] = vAxis._offset + vValPx;
@@ -98,7 +99,7 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode, opts) {
         .classed('violinline-' + trace.uid, true)
         .attr('stroke-width', 1.5);
     violinLine.exit().remove();
-    violinLine.attr(violinLineAttrs);
+    violinLine.attr(violinLineAttrs).call(Color.stroke, pointData.color);
 
     // same combine logic as box hoverPoints
     if(hovermode === 'closest') {

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.style.fill).toBe('rgb(250, 250, 250)');
+            expect(bg.style.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.style.fill).toBe('rgb(255, 255, 128)');
+            expect(bg.style.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.style.fill).toBe('rgb(255, 0, 0)');
+            expect(bg.style.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.style.fill).toBe('rgb(255, 0, 0)');
+            expect(bg.style.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.style.fill).toBe('rgb(255, 0, 0)');
+            expect(bg.style.stroke).toBe('rgb(0, 0, 255)');
             expect(bg.getAttribute('stroke-width')).toBe('3');
         })
         .then(done, done.fail);