revisit rangeslider & selections stroke and fill style

Author: archmoj

src/components/rangeslider/draw.js

@@ -1,6 +1,5 @@
 'use strict';
 
-var tinycolor = require('tinycolor2');
 var d3 = require('@plotly/d3');
 
 var Registry = require('../../registry');
@@ -396,24 +395,14 @@ 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: fillRGB,
-        'fill-opacity': fillAlpha,
-        stroke: strokeRGB,
-        'stroke-opacity': strokeAlpha,
         'stroke-width': lw
-    });
+    })
+    .call(Color.stroke, opts.bordercolor)
+    .call(Color.fill, opts.bgcolor);
 }
 
 function addClipPath(rangeSlider, gd, axisOpts, opts) {

src/components/selections/select.js

@@ -1,6 +1,5 @@
 'use strict';
 
-var tinycolor = require('tinycolor2');
 var polybool = require('polybooljs');
 var pointInPolygon = require('point-in-polygon/nested'); // could we use contains lib/polygon instead?
 
@@ -114,33 +113,24 @@ function prepSelect(evt, startX, startY, dragOptions, mode) {
         fullLayout.newselection;
 
     var fillC = (isDrawMode && !isOpenMode) ? newStyle.fillcolor : 'rgba(0,0,0,0)';
-    var fillColor = tinycolor(fillC);
-    var fillAlpha = fillColor.getAlpha();
-    var fillRGB = Color.tinyRGB(fillColor);
 
     var strokeC = newStyle.line.color || (
         isCartesian ?
             Color.contrast(gd._fullLayout.plot_bgcolor) :
             '#7f7f7f' // non-cartesian subplot
     );
 
-    var strokeColor = tinycolor(strokeC);
-    var strokeAlpha = strokeColor.getAlpha();
-    var strokeRGB = Color.tinyRGB(strokeColor);
-
     outlines.enter()
         .append('path')
         .attr('class', 'select-outline select-outline-' + plotinfo.id)
         .style({
             opacity: isDrawMode ? newStyle.opacity / 2 : 1,
-            fill: fillRGB,
-            'fill-opacity': fillAlpha,
-            stroke: strokeRGB,
-            'stroke-opacity': strokeAlpha,
             '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)

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('rgb(250, 250, 250)');
-            expect(bg.getAttribute('stroke')).toBe('rgb(0, 0, 0)');
+            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('rgb(255, 255, 128)');
-            expect(bg.getAttribute('stroke')).toBe('rgb(64, 64, 64)');
+            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('rgb(255, 0, 0)');
-            expect(bg.getAttribute('stroke')).toBe('rgb(0, 0, 0)');
+            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('rgb(255, 0, 0)');
-            expect(bg.getAttribute('stroke')).toBe('rgb(0, 0, 255)');
+            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('rgb(255, 0, 0)');
-            expect(bg.getAttribute('stroke')).toBe('rgb(0, 0, 255)');
+            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);