Annotations offline

src/components/colorbar/draw.js

@@ -304,7 +304,7 @@ module.exports = function draw(gd, id) {
                     lineSize = 15.6;
                 if(titleText.node()) {
                     lineSize =
-                        parseInt(titleText.style('font-size'), 10) * LINE_SPACING;
+                        parseInt(titleText.node().style.fontSize, 10) * LINE_SPACING;
                 }
                 if(mathJaxNode) {
                     titleHeight = Drawing.bBox(mathJaxNode).height;

src/components/drawing/index.js

@@ -110,12 +110,6 @@ drawing.hideOutsideRangePoints = function(points, subplot) {
     });
 };
 
-drawing.getPx = function(s, styleAttr) {
-    // helper to pull out a px value from a style that may contain px units
-    // s is a d3 selection (will pull from the first one)
-    return Number(s.style(styleAttr).replace(/px$/, ''));
-};
-
 drawing.crispRound = function(gd, lineWidth, dflt) {
     // for lines that disable antialiasing we want to
     // make sure the width is an integer, and at least 1 if it's nonzero

src/lib/svg_text_utils.js

@@ -77,7 +77,8 @@ exports.convertToTspans = function(_context, gd, _callback) {
     if(tex) {
         ((gd && gd._promises) || []).push(new Promise(function(resolve) {
             _context.style('display', 'none');
-            var config = {fontSize: parseInt(_context.style('font-size'), 10)};
+            var fontSize = parseInt(_context.node().style.fontSize, 10);
+            var config = {fontSize: fontSize};
 
             texToSVG(tex[2], config, function(_svgEl, _glyphDefs, _svgBBox) {
                 parent.selectAll('svg.' + svgClass).remove();
@@ -113,16 +114,15 @@ exports.convertToTspans = function(_context, gd, _callback) {
                 })
                 .style({overflow: 'visible', 'pointer-events': 'none'});
 
-                var fill = _context.style('fill') || 'black';
+                var fill = _context.node().style.fill || 'black';
                 newSvg.select('g').attr({fill: fill, stroke: fill});
 
                 var newSvgW = getSize(newSvg, 'width'),
                     newSvgH = getSize(newSvg, 'height'),
                     newX = +_context.attr('x') - newSvgW *
                         {start: 0, middle: 0.5, end: 1}[_context.attr('text-anchor') || 'start'],
                     // font baseline is about 1/4 fontSize below centerline
-                    textHeight = parseInt(_context.style('font-size'), 10) ||
-                        getSize(_context, 'height'),
+                    textHeight = fontSize || getSize(_context, 'height'),
                     dy = -textHeight / 4;
 
                 if(svgClass[0] === 'y') {
@@ -598,19 +598,22 @@ exports.makeEditable = function(context, options) {
     }
 
     function appendEditable() {
-        var plotDiv = d3.select(gd),
-            container = plotDiv.select('.svg-container'),
-            div = container.append('div');
+        var plotDiv = d3.select(gd);
+        var container = plotDiv.select('.svg-container');
+        var div = container.append('div');
+        var cStyle = context.node().style;
+        var fontSize = parseFloat(cStyle.fontSize || 12);
+
         div.classed('plugin-editable editable', true)
             .style({
                 position: 'absolute',
-                'font-family': context.style('font-family') || 'Arial',
-                'font-size': context.style('font-size') || 12,
-                color: options.fill || context.style('fill') || 'black',
+                'font-family': cStyle.fontFamily || 'Arial',
+                'font-size': fontSize,
+                color: options.fill || cStyle.fill || 'black',
                 opacity: 1,
                 'background-color': options.background || 'transparent',
                 outline: '#ffffff33 1px solid',
-                margin: [-parseFloat(context.style('font-size')) / 8 + 1, 0, 0, -1].join('px ') + 'px',
+                margin: [-fontSize / 8 + 1, 0, 0, -1].join('px ') + 'px',
                 padding: '0',
                 'box-sizing': 'border-box'
             })

src/plots/plots.js

@@ -212,7 +212,12 @@ plots.redrawText = function(gd) {
 plots.resize = function(gd) {
     return new Promise(function(resolve, reject) {
 
-        if(!gd || d3.select(gd).style('display') === 'none') {
+        function isHidden(gd) {
+            var display = getComputedStyle(gd).display;
+            return !display || display === 'none';
+        }
+
+        if(!gd || isHidden(gd)) {
             reject(new Error('Resize must be passed a plot div element.'));
         }
 

src/plots/polar/micropolar.js

@@ -432,13 +432,13 @@ var µ = module.exports = { version: '0.2.2' };
             });
             svg.selectAll('.geometry-group .mark').on('mouseover.tooltip', function(d, i) {
                 var el = d3.select(this);
-                var color = el.style('fill');
+                var color = this.style.fill;
                 var newColor = 'black';
-                var opacity = el.style('opacity') || 1;
+                var opacity = this.style.opacity || 1;
                 el.attr({
                     'data-opacity': opacity
                 });
-                if (color != 'none') {
+                if (color && color !== 'none') {
                     el.attr({
                         'data-fill': color
                     });
@@ -461,7 +461,7 @@ var µ = module.exports = { version: '0.2.2' };
                     }).text(text);
                     geometryTooltip.move(pos);
                 } else {
-                    color = el.style('stroke');
+                    color = this.style.stroke || 'black';
                     el.attr({
                         'data-stroke': color
                     });

src/snapshot/tosvg.js

@@ -97,7 +97,7 @@ module.exports = function toSVG(gd, format, scale) {
             // but in a static plot it's useless and it can confuse batik
             // we've tried to standardize on display:none but make sure we still
             // catch visibility:hidden if it ever arises
-            if(txt.style('visibility') === 'hidden' || txt.style('display') === 'none') {
+            if(this.style.visibility === 'hidden' || this.style.display === 'none') {
                 txt.remove();
                 return;
             }
@@ -110,15 +110,15 @@ module.exports = function toSVG(gd, format, scale) {
             // Font family styles break things because of quotation marks,
             // so we must remove them *after* the SVG DOM has been serialized
             // to a string (browsers convert singles back)
-            var ff = txt.style('font-family');
+            var ff = this.style.fontFamily;
             if(ff && ff.indexOf('"') !== -1) {
                 txt.style('font-family', ff.replace(DOUBLEQUOTE_REGEX, DUMMY_SUB));
             }
         });
 
     svg.selectAll('.point,.scatterpts').each(function() {
         var pt = d3.select(this);
-        var fill = pt.style('fill');
+        var fill = this.style.fill;
 
         // similar to font family styles above,
         // we must remove " after the SVG DOM has been serialized

test/image/strict-d3.js

@@ -34,7 +34,8 @@ selProto.style = function() {
         if(typeof obj === 'string') {
             if(arguments.length === 1) {
                 throw new Error('d3 selection.style called as getter: ' +
-                    'disallowed as it can fail for unattached elements');
+                    'disallowed as it can fail for unattached elements. ' +
+                    'Use node.style.attribute instead.');
             }
             checkStyleVal(sel, obj, arguments[1]);
         } else {

test/jasmine/assets/custom_assertions.js

@@ -37,16 +37,28 @@ exports.assertStyle = function(dims, color, opacity) {
             .toEqual(dims[i], 'to have correct number of pts in trace ' + i);
 
         points.each(function() {
-            var point = d3.select(this);
-
-            expect(point.style('fill'))
+            expect(this.style.fill)
                 .toEqual(color[i], 'to have correct pt color');
-            expect(+point.style('opacity'))
+            var op = this.style.opacity;
+            expect(op === undefined ? 1 : +op)
                 .toEqual(opacity[i], 'to have correct pt opacity');
         });
     });
 };
 
+exports.assertHoverLabelStyle = function(g, expectation, msg, textSelector) {
+    if(!msg) msg = '';
+
+    var path = g.select('path').node();
+    expect(getComputedStyle(path).fill).toBe(expectation.bgcolor, msg + ': bgcolor');
+    expect(getComputedStyle(path).stroke).toBe(expectation.bordercolor, msg + ': bordercolor');
+
+    var text = g.select(textSelector || 'text.nums').node();
+    expect(getComputedStyle(text).fontFamily.split(',')[0]).toBe(expectation.fontFamily, msg + ': font.family');
+    expect(parseInt(getComputedStyle(text).fontSize)).toBe(expectation.fontSize, msg + ': font.size');
+    expect(getComputedStyle(text).fill).toBe(expectation.fontColor, msg + ': font.color');
+};
+
 exports.assertClip = function(sel, isClipped, size, msg) {
     expect(sel.size()).toBe(size, msg + ' clip path (selection size)');
 

test/jasmine/tests/animate_test.js

@@ -804,13 +804,14 @@ describe('animating scatter traces', function() {
             opacity: 1
         }]).then(function() {
             trace = Plotly.d3.selectAll('g.scatter.trace');
-            expect(trace.style('opacity')).toEqual('1');
+            // d3 style getter is disallowed by strict-d3
+            expect(trace.node().style.opacity).toEqual('1');
 
             return Plotly.animate(gd, [{
                 data: [{opacity: 0.1}]
             }], {transition: {duration: 0}, frame: {duration: 0, redraw: false}});
         }).then(function() {
-            expect(trace.style('opacity')).toEqual('0.1');
+            expect(trace.node().style.opacity).toEqual('0.1');
         }).catch(fail).then(done);
     });
 

test/jasmine/tests/annotations_test.js

@@ -1321,7 +1321,7 @@ describe('annotation effects', function() {
             }
 
             function checkLink(link) {
-                expect(link.style('cursor')).toBe('pointer');
+                expect(link.node().style.cursor).toBe('pointer');
                 expect(link.attr('xlink:href')).toBe('https://plot.ly');
                 expect(link.attr('xlink:show')).toBe('new');
             }
@@ -1349,7 +1349,7 @@ describe('animating annotations', function() {
 
     afterEach(destroyGraphDiv);
 
-    it('updates annoations when no axis update present', function(done) {
+    it('updates annotations when no axis update present', function(done) {
 
         function assertAnnotations(expected) {
             var texts = Plotly.d3.select(gd).selectAll('.annotation .annotation-text');
@@ -1366,7 +1366,7 @@ describe('animating annotations', function() {
             expect(expected.length).toEqual(paths.size());
 
             paths.each(function(d, i) {
-                expect(Plotly.d3.select(this).style('fill')).toEqual(expected[i]);
+                expect(this.style.fill).toEqual(expected[i]);
             });
         }
 

test/jasmine/tests/fx_test.js

@@ -204,7 +204,7 @@ describe('relayout', function() {
                 node = mainDrag.node();
 
             expect(mainDrag.classed('cursor-' + cursor)).toBe(true, 'cursor ' + cursor);
-            expect(mainDrag.style('pointer-events')).toEqual('all', 'pointer event');
+            expect(node.style.pointerEvents).toEqual('all', 'pointer event');
             expect(!!node.onmousedown).toBe(isActive, 'mousedown handler');
         }
 

test/jasmine/tests/geo_test.js

@@ -611,9 +611,9 @@ describe('Test geo interactions', function() {
                 .then(function() {
                     mouseEventScatterGeo('mousemove');
 
-                    var path = d3.selectAll('g.hovertext').select('path');
-                    expect(path.style('fill')).toEqual('rgb(255, 0, 0)', 'bgcolor');
-                    expect(path.style('stroke')).toEqual('rgb(0, 0, 255)', 'bordecolor[0]');
+                    var path = d3.selectAll('g.hovertext').select('path').node();
+                    expect(getComputedStyle(path).fill).toEqual('rgb(255, 0, 0)', 'bgcolor');
+                    expect(getComputedStyle(path).stroke).toEqual('rgb(0, 0, 255)', 'bordecolor[0]');
                 })
                 .then(done);
             });

test/jasmine/tests/gl2d_click_test.js

@@ -5,6 +5,7 @@ var d3 = require('d3');
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
 var fail = require('../assets/fail_test.js');
+var assertHoverLabelStyle = require('../assets/custom_assertions').assertHoverLabelStyle;
 
 // cartesian click events events use the hover data
 // from the mousemove events and then simulate
@@ -130,22 +131,6 @@ describe('Test hover and click interactions', function() {
         expect(String(pt.pointNumber)).toBe(String(expected.pointNumber), msg + ' - point number');
     }
 
-    function assertHoverLabelStyle(sel, expected, msg) {
-        if(sel.node() === null) {
-            expect(expected.noHoverLabel).toBe(true);
-            return;
-        }
-
-        var path = sel.select('path');
-        expect(path.style('fill')).toBe(expected.bgColor, msg + ' - bgcolor');
-        expect(path.style('stroke')).toBe(expected.borderColor, msg + ' - bordercolor');
-
-        var text = sel.select('text.nums');
-        expect(parseInt(text.style('font-size'))).toBe(expected.fontSize, msg + ' - font.size');
-        expect(text.style('font-family').split(',')[0]).toBe(expected.fontFamily, msg + ' - font.family');
-        expect(text.style('fill')).toBe(expected.fontColor, msg + ' - font.color');
-    }
-
     function assertHoveLabelContent(expected) {
         var label = expected.label;
 
@@ -181,7 +166,11 @@ describe('Test hover and click interactions', function() {
                 .then(_hover)
                 .then(function(eventData) {
                     assertEventData(eventData, expected);
-                    assertHoverLabelStyle(d3.select('g.hovertext'), expected, opts.msg);
+                    var g = d3.select('g.hovertext');
+                    if(g.node() === null) {
+                        expect(expected.noHoverLabel).toBe(true);
+                    }
+                    else assertHoverLabelStyle(g, expected, opts.msg);
                     assertHoveLabelContent(expected);
                 })
                 .then(_click)
@@ -225,8 +214,8 @@ describe('Test hover and click interactions', function() {
             label: ['0.387'],
             curveNumber: 0,
             pointNumber: 33,
-            bgColor: 'rgb(0, 0, 255)',
-            borderColor: 'rgb(255, 0, 0)',
+            bgcolor: 'rgb(0, 0, 255)',
+            bordercolor: 'rgb(255, 0, 0)',
             fontSize: 20,
             fontFamily: 'Arial',
             fontColor: 'rgb(255, 255, 0)'
@@ -273,8 +262,8 @@ describe('Test hover and click interactions', function() {
             y: 9,
             curveNumber: 2,
             pointNumber: 1,
-            bgColor: 'rgb(0, 128, 0)',
-            borderColor: 'rgb(255, 255, 255)',
+            bgcolor: 'rgb(0, 128, 0)',
+            bordercolor: 'rgb(255, 255, 255)',
             fontSize: 8,
             fontFamily: 'Arial',
             fontColor: 'rgb(255, 255, 255)'
@@ -305,8 +294,8 @@ describe('Test hover and click interactions', function() {
             y: 3,
             curveNumber: 0,
             pointNumber: [3, 3],
-            bgColor: 'rgb(68, 68, 68)',
-            borderColor: 'rgb(255, 255, 255)',
+            bgcolor: 'rgb(68, 68, 68)',
+            bordercolor: 'rgb(255, 255, 255)',
             fontSize: 20,
             fontFamily: 'Roboto',
             fontColor: 'rgb(255, 255, 255)'
@@ -338,8 +327,8 @@ describe('Test hover and click interactions', function() {
             y: 1,
             curveNumber: 0,
             pointNumber: [1, 2],
-            bgColor: 'rgb(0, 0, 0)',
-            borderColor: 'rgb(255, 255, 255)',
+            bgcolor: 'rgb(0, 0, 0)',
+            bordercolor: 'rgb(255, 255, 255)',
             fontSize: 13,
             fontFamily: 'Arial',
             fontColor: 'rgb(255, 255, 255)'
@@ -362,8 +351,8 @@ describe('Test hover and click interactions', function() {
             y: 18,
             curveNumber: 2,
             pointNumber: 0,
-            bgColor: 'rgb(44, 160, 44)',
-            borderColor: 'rgb(255, 255, 255)',
+            bgcolor: 'rgb(44, 160, 44)',
+            bordercolor: 'rgb(255, 255, 255)',
             fontSize: 13,
             fontFamily: 'Arial',
             fontColor: 'rgb(255, 255, 255)'
@@ -377,8 +366,8 @@ describe('Test hover and click interactions', function() {
             y: 18,
             curveNumber: 2,
             pointNumber: 0,
-            bgColor: 'rgb(255, 127, 14)',
-            borderColor: 'rgb(68, 68, 68)',
+            bgcolor: 'rgb(255, 127, 14)',
+            bordercolor: 'rgb(68, 68, 68)',
             fontSize: 13,
             fontFamily: 'Arial',
             fontColor: 'rgb(68, 68, 68)'
@@ -407,8 +396,8 @@ describe('Test hover and click interactions', function() {
             y: 18,
             curveNumber: 2,
             pointNumber: 0,
-            bgColor: 'rgb(44, 160, 44)',
-            borderColor: 'rgb(255, 255, 255)',
+            bgcolor: 'rgb(44, 160, 44)',
+            bordercolor: 'rgb(255, 255, 255)',
             fontSize: 13,
             fontFamily: 'Arial',
             fontColor: 'rgb(255, 255, 255)'
@@ -425,8 +414,8 @@ describe('Test hover and click interactions', function() {
             y: 18,
             curveNumber: 2,
             pointNumber: 0,
-            bgColor: 'rgb(255, 127, 14)',
-            borderColor: 'rgb(68, 68, 68)',
+            bgcolor: 'rgb(255, 127, 14)',
+            bordercolor: 'rgb(68, 68, 68)',
             fontSize: 13,
             fontFamily: 'Arial',
             fontColor: 'rgb(68, 68, 68)'
@@ -456,8 +445,8 @@ describe('Test hover and click interactions', function() {
             y: 3,
             curveNumber: 0,
             pointNumber: [3, 3],
-            bgColor: 'rgb(68, 68, 68)',
-            borderColor: 'rgb(255, 255, 255)',
+            bgcolor: 'rgb(68, 68, 68)',
+            bordercolor: 'rgb(255, 255, 255)',
             fontSize: 20,
             fontFamily: 'Arial',
             fontColor: 'rgb(255, 255, 255)'