Annotations offline

src/components/annotations/arrow_paths.js

@@ -12,10 +12,15 @@
  * All paths are tuned for maximum scalability of the arrowhead,
  * ie throughout arrowwidth=0.3..3 the head is joined smoothly
  * to the line, with the line coming from the left and ending at (0, 0).
+ *
  * `backoff` is the distance to move the arrowhead and the end of the line,
  * in order that the arrowhead points to the desired place, either at
  * the tip of the arrow or (in the case of circle or square)
  * the center of the symbol.
+ *
+ * `noRotate`, if truthy, says that this arrowhead should not rotate with the
+ * arrow. That's the case for squares, which should always be straight, and
+ * circles, for which it's irrelevant.
  */
 
 module.exports = [
@@ -52,11 +57,13 @@ module.exports = [
     // circle
     {
         path: 'M2,0A2,2 0 1,1 0,-2A2,2 0 0,1 2,0Z',
-        backoff: 0
+        backoff: 0,
+        noRotate: true
     },
     // square
     {
         path: 'M2,2V-2H-2V2Z',
-        backoff: 0
+        backoff: 0,
+        noRotate: true
     }
 ];

src/components/annotations/draw.js

@@ -520,7 +520,7 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
                 .style('stroke-width', strokewidth + 'px')
                 .call(Color.stroke, Color.rgb(arrowColor));
 
-            drawArrowHead(arrow, options.arrowhead, 'end', options.arrowsize, options.standoff);
+            drawArrowHead(arrow, 'end', options);
 
             // the arrow dragger is a small square right at the head, then a line to the tail,
             // all expanded by a stroke width of 6px plus the arrow line width

src/components/annotations/draw_arrow_head.js

@@ -10,42 +10,44 @@
 'use strict';
 
 var d3 = require('d3');
-var isNumeric = require('fast-isnumeric');
 
 var Color = require('../color');
-var Drawing = require('../drawing');
 
 var ARROWPATHS = require('./arrow_paths');
 
-// add arrowhead(s) to a path or line d3 element el3
-// style: 1-6, first 5 are pointers, 6 is circle, 7 is square, 8 is none
-// ends is 'start', 'end' (default), 'start+end'
-// mag is magnification vs. default (default 1)
-
-module.exports = function drawArrowHead(el3, style, ends, mag, standoff) {
-    if(!isNumeric(mag)) mag = 1;
-    var el = el3.node(),
-        headStyle = ARROWPATHS[style||0];
-
-    if(typeof ends !== 'string' || !ends) ends = 'end';
-
-    var scale = (Drawing.getPx(el3, 'stroke-width') || 1) * mag,
-        stroke = el3.style('stroke') || Color.defaultLine,
-        opacity = el3.style('stroke-opacity') || 1,
-        doStart = ends.indexOf('start') >= 0,
-        doEnd = ends.indexOf('end') >= 0,
-        backOff = headStyle.backoff * scale + standoff,
-        start,
-        end,
-        startRot,
-        endRot;
+/**
+ * Add arrowhead(s) to a path or line element
+ *
+ * @param {d3.selection} el3: a d3-selected line or path element
+ *
+ * @param {string} ends: 'start', 'end', or 'start+end' for which ends get arrowheads
+ *
+ * @param {object} options: style information. Must have all the following:
+ * @param {number} options.arrowhead: head style - see ./arrow_paths
+ * @param {number} options.arrowsize: relative size of the head vs line width
+ * @param {number} options.standoff: distance in px to move the arrow point from its target
+ * @param {number} options.arrowwidth: width of the arrow line
+ * @param {string} options.arrowcolor: color of the arrow line, for the head to match
+ *     Note that the opacity of this color is ignored, as it's assumed the container
+ *     of both the line and head has opacity applied to it so there isn't greater opacity
+ *     where they overlap.
+ */
+module.exports = function drawArrowHead(el3, ends, options) {
+    var el = el3.node();
+    var headStyle = ARROWPATHS[options.arrowhead || 0];
+    var scale = (options.arrowwidth || 1) * options.arrowsize;
+    var doStart = ends.indexOf('start') >= 0;
+    var doEnd = ends.indexOf('end') >= 0;
+    var backOff = headStyle.backoff * scale + options.standoff;
+
+    var start, end, startRot, endRot;
 
     if(el.nodeName === 'line') {
         start = {x: +el3.attr('x1'), y: +el3.attr('y1')};
         end = {x: +el3.attr('x2'), y: +el3.attr('y2')};
 
-        var dx = start.x - end.x,
-            dy = start.y - end.y;
+        var dx = start.x - end.x;
+        var dy = start.y - end.y;
 
         startRot = Math.atan2(dy, dx);
         endRot = startRot + Math.PI;
@@ -83,16 +85,19 @@ module.exports = function drawArrowHead(el3, style, ends, mag, standoff) {
         }
 
         if(doStart) {
-            var start0 = el.getPointAtLength(0),
-                dstart = el.getPointAtLength(0.1);
+            var start0 = el.getPointAtLength(0);
+            var dstart = el.getPointAtLength(0.1);
+
             startRot = Math.atan2(start0.y - dstart.y, start0.x - dstart.x);
             start = el.getPointAtLength(Math.min(backOff, pathlen));
+
             if(backOff) dashArray = '0px,' + backOff + 'px,';
         }
 
         if(doEnd) {
-            var end0 = el.getPointAtLength(pathlen),
-                dend = el.getPointAtLength(pathlen - 0.1);
+            var end0 = el.getPointAtLength(pathlen);
+            var dend = el.getPointAtLength(pathlen - 0.1);
+
             endRot = Math.atan2(end0.y - dend.y, end0.x - dend.x);
             end = el.getPointAtLength(Math.max(0, pathlen - backOff));
 
@@ -110,19 +115,19 @@ module.exports = function drawArrowHead(el3, style, ends, mag, standoff) {
 
     function drawhead(p, rot) {
         if(!headStyle.path) return;
-        if(style > 5) rot = 0; // don't rotate square or circle
+        if(headStyle.noRotate) rot = 0;
+
         d3.select(el.parentNode).append('path')
             .attr({
                 'class': el3.attr('class'),
                 d: headStyle.path,
                 transform:
                     'translate(' + p.x + ',' + p.y + ')' +
-                    'rotate(' + (rot * 180 / Math.PI) + ')' +
+                    (rot ? 'rotate(' + (rot * 180 / Math.PI) + ')' : '') +
                     'scale(' + scale + ')'
             })
             .style({
-                fill: stroke,
-                opacity: opacity,
+                fill: Color.rgb(options.arrowcolor),
                 'stroke-width': 0
             });
     }

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

@@ -32,6 +32,11 @@ selProto.style = function() {
 
     if(sel.size()) {
         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. ' +
+                    'Use node.style.attribute instead.');
+            }
             checkStyleVal(sel, obj, arguments[1]);
         } else {
             Object.keys(obj).forEach(function(key) { checkStyleVal(sel, key, obj[key]); });

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]);
             });
         }