Skip to content

Commit 6447bd7

Browse files
alexcjohnsonalexcjohnson
committed
get rid of all other selection.style getters
1 parent 0410669 commit 6447bd7

28 files changed

+191
-167
lines changed

‎src/components/colorbar/draw.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -304,7 +304,7 @@ module.exports = function draw(gd, id) {
304304
lineSize = 15.6;
305305
if(titleText.node()) {
306306
lineSize =
307-
parseInt(titleText.style('font-size'), 10) * LINE_SPACING;
307+
parseInt(titleText.node().style.fontSize, 10) * LINE_SPACING;
308308
}
309309
if(mathJaxNode) {
310310
titleHeight = Drawing.bBox(mathJaxNode).height;

‎src/components/drawing/index.js

-6
Original file line numberDiff line numberDiff line change
@@ -110,12 +110,6 @@ drawing.hideOutsideRangePoints = function(points, subplot) {
110110
});
111111
};
112112

113-
drawing.getPx = function(s, styleAttr) {
114-
// helper to pull out a px value from a style that may contain px units
115-
// s is a d3 selection (will pull from the first one)
116-
return Number(s.style(styleAttr).replace(/px$/, ''));
117-
};
118-
119113
drawing.crispRound = function(gd, lineWidth, dflt) {
120114
// for lines that disable antialiasing we want to
121115
// make sure the width is an integer, and at least 1 if it's nonzero

‎src/lib/svg_text_utils.js

+14-11
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,8 @@ exports.convertToTspans = function(_context, gd, _callback) {
7777
if(tex) {
7878
((gd && gd._promises) || []).push(new Promise(function(resolve) {
7979
_context.style('display', 'none');
80-
var config = {fontSize: parseInt(_context.style('font-size'), 10)};
80+
var fontSize = parseInt(_context.node().style.fontSize, 10);
81+
var config = {fontSize: fontSize};
8182

8283
texToSVG(tex[2], config, function(_svgEl, _glyphDefs, _svgBBox) {
8384
parent.selectAll('svg.' + svgClass).remove();
@@ -113,16 +114,15 @@ exports.convertToTspans = function(_context, gd, _callback) {
113114
})
114115
.style({overflow: 'visible', 'pointer-events': 'none'});
115116

116-
var fill = _context.style('fill') || 'black';
117+
var fill = _context.node().style.fill || 'black';
117118
newSvg.select('g').attr({fill: fill, stroke: fill});
118119

119120
var newSvgW = getSize(newSvg, 'width'),
120121
newSvgH = getSize(newSvg, 'height'),
121122
newX = +_context.attr('x') - newSvgW *
122123
{start: 0, middle: 0.5, end: 1}[_context.attr('text-anchor') || 'start'],
123124
// font baseline is about 1/4 fontSize below centerline
124-
textHeight = parseInt(_context.style('font-size'), 10) ||
125-
getSize(_context, 'height'),
125+
textHeight = fontSize || getSize(_context, 'height'),
126126
dy = -textHeight / 4;
127127

128128
if(svgClass[0] === 'y') {
@@ -598,19 +598,22 @@ exports.makeEditable = function(context, options) {
598598
}
599599

600600
function appendEditable() {
601-
var plotDiv = d3.select(gd),
602-
container = plotDiv.select('.svg-container'),
603-
div = container.append('div');
601+
var plotDiv = d3.select(gd);
602+
var container = plotDiv.select('.svg-container');
603+
var div = container.append('div');
604+
var cStyle = context.node().style;
605+
var fontSize = parseFloat(cStyle.fontSize || 12);
606+
604607
div.classed('plugin-editable editable', true)
605608
.style({
606609
position: 'absolute',
607-
'font-family': context.style('font-family') || 'Arial',
608-
'font-size': context.style('font-size') || 12,
609-
color: options.fill || context.style('fill') || 'black',
610+
'font-family': cStyle.fontFamily || 'Arial',
611+
'font-size': fontSize,
612+
color: options.fill || cStyle.fill || 'black',
610613
opacity: 1,
611614
'background-color': options.background || 'transparent',
612615
outline: '#ffffff33 1px solid',
613-
margin: [-parseFloat(context.style('font-size')) / 8 + 1, 0, 0, -1].join('px ') + 'px',
616+
margin: [-fontSize / 8 + 1, 0, 0, -1].join('px ') + 'px',
614617
padding: '0',
615618
'box-sizing': 'border-box'
616619
})

‎src/plots/plots.js

+6-1
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,12 @@ plots.redrawText = function(gd) {
212212
plots.resize = function(gd) {
213213
return new Promise(function(resolve, reject) {
214214

215-
if(!gd || d3.select(gd).style('display') === 'none') {
215+
function isHidden(gd) {
216+
var display = getComputedStyle(gd).display;
217+
return !display || display === 'none';
218+
}
219+
220+
if(!gd || isHidden(gd)) {
216221
reject(new Error('Resize must be passed a plot div element.'));
217222
}
218223

‎src/plots/polar/micropolar.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -432,13 +432,13 @@ var µ = module.exports = { version: '0.2.2' };
432432
});
433433
svg.selectAll('.geometry-group .mark').on('mouseover.tooltip', function(d, i) {
434434
var el = d3.select(this);
435-
var color = el.style('fill');
435+
var color = this.style.fill;
436436
var newColor = 'black';
437-
var opacity = el.style('opacity') || 1;
437+
var opacity = this.style.opacity || 1;
438438
el.attr({
439439
'data-opacity': opacity
440440
});
441-
if (color != 'none') {
441+
if (color && color !== 'none') {
442442
el.attr({
443443
'data-fill': color
444444
});
@@ -461,7 +461,7 @@ var µ = module.exports = { version: '0.2.2' };
461461
}).text(text);
462462
geometryTooltip.move(pos);
463463
} else {
464-
color = el.style('stroke');
464+
color = this.style.stroke || 'black';
465465
el.attr({
466466
'data-stroke': color
467467
});

‎src/snapshot/tosvg.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ module.exports = function toSVG(gd, format, scale) {
9797
// but in a static plot it's useless and it can confuse batik
9898
// we've tried to standardize on display:none but make sure we still
9999
// catch visibility:hidden if it ever arises
100-
if(txt.style('visibility') === 'hidden' || txt.style('display') === 'none') {
100+
if(this.style.visibility === 'hidden' || this.style.display === 'none') {
101101
txt.remove();
102102
return;
103103
}
@@ -110,15 +110,15 @@ module.exports = function toSVG(gd, format, scale) {
110110
// Font family styles break things because of quotation marks,
111111
// so we must remove them *after* the SVG DOM has been serialized
112112
// to a string (browsers convert singles back)
113-
var ff = txt.style('font-family');
113+
var ff = this.style.fontFamily;
114114
if(ff && ff.indexOf('"') !== -1) {
115115
txt.style('font-family', ff.replace(DOUBLEQUOTE_REGEX, DUMMY_SUB));
116116
}
117117
});
118118

119119
svg.selectAll('.point,.scatterpts').each(function() {
120120
var pt = d3.select(this);
121-
var fill = pt.style('fill');
121+
var fill = this.style.fill;
122122

123123
// similar to font family styles above,
124124
// we must remove " after the SVG DOM has been serialized

‎test/image/strict-d3.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@ selProto.style = function() {
3434
if(typeof obj === 'string') {
3535
if(arguments.length === 1) {
3636
throw new Error('d3 selection.style called as getter: ' +
37-
'disallowed as it can fail for unattached elements');
37+
'disallowed as it can fail for unattached elements. ' +
38+
'Use node.style.attribute instead.');
3839
}
3940
checkStyleVal(sel, obj, arguments[1]);
4041
} else {

‎test/jasmine/assets/custom_assertions.js

+16-4
Original file line numberDiff line numberDiff line change
@@ -37,16 +37,28 @@ exports.assertStyle = function(dims, color, opacity) {
3737
.toEqual(dims[i], 'to have correct number of pts in trace ' + i);
3838

3939
points.each(function() {
40-
var point = d3.select(this);
41-
42-
expect(point.style('fill'))
40+
expect(this.style.fill)
4341
.toEqual(color[i], 'to have correct pt color');
44-
expect(+point.style('opacity'))
42+
var op = this.style.opacity;
43+
expect(op === undefined ? 1 : +op)
4544
.toEqual(opacity[i], 'to have correct pt opacity');
4645
});
4746
});
4847
};
4948

49+
exports.assertHoverLabelStyle = function(g, expectation, msg, textSelector) {
50+
if(!msg) msg = '';
51+
52+
var path = g.select('path').node();
53+
expect(getComputedStyle(path).fill).toBe(expectation.bgcolor, msg + ': bgcolor');
54+
expect(getComputedStyle(path).stroke).toBe(expectation.bordercolor, msg + ': bordercolor');
55+
56+
var text = g.select(textSelector || 'text.nums').node();
57+
expect(getComputedStyle(text).fontFamily.split(',')[0]).toBe(expectation.fontFamily, msg + ': font.family');
58+
expect(parseInt(getComputedStyle(text).fontSize)).toBe(expectation.fontSize, msg + ': font.size');
59+
expect(getComputedStyle(text).fill).toBe(expectation.fontColor, msg + ': font.color');
60+
};
61+
5062
exports.assertClip = function(sel, isClipped, size, msg) {
5163
expect(sel.size()).toBe(size, msg + ' clip path (selection size)');
5264

‎test/jasmine/tests/animate_test.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -804,13 +804,14 @@ describe('animating scatter traces', function() {
804804
opacity: 1
805805
}]).then(function() {
806806
trace = Plotly.d3.selectAll('g.scatter.trace');
807-
expect(trace.style('opacity')).toEqual('1');
807+
// d3 style getter is disallowed by strict-d3
808+
expect(trace.node().style.opacity).toEqual('1');
808809

809810
return Plotly.animate(gd, [{
810811
data: [{opacity: 0.1}]
811812
}], {transition: {duration: 0}, frame: {duration: 0, redraw: false}});
812813
}).then(function() {
813-
expect(trace.style('opacity')).toEqual('0.1');
814+
expect(trace.node().style.opacity).toEqual('0.1');
814815
}).catch(fail).then(done);
815816
});
816817

‎test/jasmine/tests/annotations_test.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -1321,7 +1321,7 @@ describe('annotation effects', function() {
13211321
}
13221322

13231323
function checkLink(link) {
1324-
expect(link.style('cursor')).toBe('pointer');
1324+
expect(link.node().style.cursor).toBe('pointer');
13251325
expect(link.attr('xlink:href')).toBe('https://plot.ly');
13261326
expect(link.attr('xlink:show')).toBe('new');
13271327
}
@@ -1349,7 +1349,7 @@ describe('animating annotations', function() {
13491349

13501350
afterEach(destroyGraphDiv);
13511351

1352-
it('updates annoations when no axis update present', function(done) {
1352+
it('updates annotations when no axis update present', function(done) {
13531353

13541354
function assertAnnotations(expected) {
13551355
var texts = Plotly.d3.select(gd).selectAll('.annotation .annotation-text');
@@ -1366,7 +1366,7 @@ describe('animating annotations', function() {
13661366
expect(expected.length).toEqual(paths.size());
13671367

13681368
paths.each(function(d, i) {
1369-
expect(Plotly.d3.select(this).style('fill')).toEqual(expected[i]);
1369+
expect(this.style.fill).toEqual(expected[i]);
13701370
});
13711371
}
13721372

‎test/jasmine/tests/fx_test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,7 @@ describe('relayout', function() {
204204
node = mainDrag.node();
205205

206206
expect(mainDrag.classed('cursor-' + cursor)).toBe(true, 'cursor ' + cursor);
207-
expect(mainDrag.style('pointer-events')).toEqual('all', 'pointer event');
207+
expect(node.style.pointerEvents).toEqual('all', 'pointer event');
208208
expect(!!node.onmousedown).toBe(isActive, 'mousedown handler');
209209
}
210210

‎test/jasmine/tests/geo_test.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -611,9 +611,9 @@ describe('Test geo interactions', function() {
611611
.then(function() {
612612
mouseEventScatterGeo('mousemove');
613613

614-
var path = d3.selectAll('g.hovertext').select('path');
615-
expect(path.style('fill')).toEqual('rgb(255, 0, 0)', 'bgcolor');
616-
expect(path.style('stroke')).toEqual('rgb(0, 0, 255)', 'bordecolor[0]');
614+
var path = d3.selectAll('g.hovertext').select('path').node();
615+
expect(getComputedStyle(path).fill).toEqual('rgb(255, 0, 0)', 'bgcolor');
616+
expect(getComputedStyle(path).stroke).toEqual('rgb(0, 0, 255)', 'bordecolor[0]');
617617
})
618618
.then(done);
619619
});

‎test/jasmine/tests/gl2d_click_test.js

+24-35
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ var d3 = require('d3');
55
var createGraphDiv = require('../assets/create_graph_div');
66
var destroyGraphDiv = require('../assets/destroy_graph_div');
77
var fail = require('../assets/fail_test.js');
8+
var assertHoverLabelStyle = require('../assets/custom_assertions').assertHoverLabelStyle;
89

910
// cartesian click events events use the hover data
1011
// from the mousemove events and then simulate
@@ -130,22 +131,6 @@ describe('Test hover and click interactions', function() {
130131
expect(String(pt.pointNumber)).toBe(String(expected.pointNumber), msg + ' - point number');
131132
}
132133

133-
function assertHoverLabelStyle(sel, expected, msg) {
134-
if(sel.node() === null) {
135-
expect(expected.noHoverLabel).toBe(true);
136-
return;
137-
}
138-
139-
var path = sel.select('path');
140-
expect(path.style('fill')).toBe(expected.bgColor, msg + ' - bgcolor');
141-
expect(path.style('stroke')).toBe(expected.borderColor, msg + ' - bordercolor');
142-
143-
var text = sel.select('text.nums');
144-
expect(parseInt(text.style('font-size'))).toBe(expected.fontSize, msg + ' - font.size');
145-
expect(text.style('font-family').split(',')[0]).toBe(expected.fontFamily, msg + ' - font.family');
146-
expect(text.style('fill')).toBe(expected.fontColor, msg + ' - font.color');
147-
}
148-
149134
function assertHoveLabelContent(expected) {
150135
var label = expected.label;
151136

@@ -181,7 +166,11 @@ describe('Test hover and click interactions', function() {
181166
.then(_hover)
182167
.then(function(eventData) {
183168
assertEventData(eventData, expected);
184-
assertHoverLabelStyle(d3.select('g.hovertext'), expected, opts.msg);
169+
var g = d3.select('g.hovertext');
170+
if(g.node() === null) {
171+
expect(expected.noHoverLabel).toBe(true);
172+
}
173+
else assertHoverLabelStyle(g, expected, opts.msg);
185174
assertHoveLabelContent(expected);
186175
})
187176
.then(_click)
@@ -225,8 +214,8 @@ describe('Test hover and click interactions', function() {
225214
label: ['0.387'],
226215
curveNumber: 0,
227216
pointNumber: 33,
228-
bgColor: 'rgb(0, 0, 255)',
229-
borderColor: 'rgb(255, 0, 0)',
217+
bgcolor: 'rgb(0, 0, 255)',
218+
bordercolor: 'rgb(255, 0, 0)',
230219
fontSize: 20,
231220
fontFamily: 'Arial',
232221
fontColor: 'rgb(255, 255, 0)'
@@ -273,8 +262,8 @@ describe('Test hover and click interactions', function() {
273262
y: 9,
274263
curveNumber: 2,
275264
pointNumber: 1,
276-
bgColor: 'rgb(0, 128, 0)',
277-
borderColor: 'rgb(255, 255, 255)',
265+
bgcolor: 'rgb(0, 128, 0)',
266+
bordercolor: 'rgb(255, 255, 255)',
278267
fontSize: 8,
279268
fontFamily: 'Arial',
280269
fontColor: 'rgb(255, 255, 255)'
@@ -305,8 +294,8 @@ describe('Test hover and click interactions', function() {
305294
y: 3,
306295
curveNumber: 0,
307296
pointNumber: [3, 3],
308-
bgColor: 'rgb(68, 68, 68)',
309-
borderColor: 'rgb(255, 255, 255)',
297+
bgcolor: 'rgb(68, 68, 68)',
298+
bordercolor: 'rgb(255, 255, 255)',
310299
fontSize: 20,
311300
fontFamily: 'Roboto',
312301
fontColor: 'rgb(255, 255, 255)'
@@ -338,8 +327,8 @@ describe('Test hover and click interactions', function() {
338327
y: 1,
339328
curveNumber: 0,
340329
pointNumber: [1, 2],
341-
bgColor: 'rgb(0, 0, 0)',
342-
borderColor: 'rgb(255, 255, 255)',
330+
bgcolor: 'rgb(0, 0, 0)',
331+
bordercolor: 'rgb(255, 255, 255)',
343332
fontSize: 13,
344333
fontFamily: 'Arial',
345334
fontColor: 'rgb(255, 255, 255)'
@@ -362,8 +351,8 @@ describe('Test hover and click interactions', function() {
362351
y: 18,
363352
curveNumber: 2,
364353
pointNumber: 0,
365-
bgColor: 'rgb(44, 160, 44)',
366-
borderColor: 'rgb(255, 255, 255)',
354+
bgcolor: 'rgb(44, 160, 44)',
355+
bordercolor: 'rgb(255, 255, 255)',
367356
fontSize: 13,
368357
fontFamily: 'Arial',
369358
fontColor: 'rgb(255, 255, 255)'
@@ -377,8 +366,8 @@ describe('Test hover and click interactions', function() {
377366
y: 18,
378367
curveNumber: 2,
379368
pointNumber: 0,
380-
bgColor: 'rgb(255, 127, 14)',
381-
borderColor: 'rgb(68, 68, 68)',
369+
bgcolor: 'rgb(255, 127, 14)',
370+
bordercolor: 'rgb(68, 68, 68)',
382371
fontSize: 13,
383372
fontFamily: 'Arial',
384373
fontColor: 'rgb(68, 68, 68)'
@@ -407,8 +396,8 @@ describe('Test hover and click interactions', function() {
407396
y: 18,
408397
curveNumber: 2,
409398
pointNumber: 0,
410-
bgColor: 'rgb(44, 160, 44)',
411-
borderColor: 'rgb(255, 255, 255)',
399+
bgcolor: 'rgb(44, 160, 44)',
400+
bordercolor: 'rgb(255, 255, 255)',
412401
fontSize: 13,
413402
fontFamily: 'Arial',
414403
fontColor: 'rgb(255, 255, 255)'
@@ -425,8 +414,8 @@ describe('Test hover and click interactions', function() {
425414
y: 18,
426415
curveNumber: 2,
427416
pointNumber: 0,
428-
bgColor: 'rgb(255, 127, 14)',
429-
borderColor: 'rgb(68, 68, 68)',
417+
bgcolor: 'rgb(255, 127, 14)',
418+
bordercolor: 'rgb(68, 68, 68)',
430419
fontSize: 13,
431420
fontFamily: 'Arial',
432421
fontColor: 'rgb(68, 68, 68)'
@@ -456,8 +445,8 @@ describe('Test hover and click interactions', function() {
456445
y: 3,
457446
curveNumber: 0,
458447
pointNumber: [3, 3],
459-
bgColor: 'rgb(68, 68, 68)',
460-
borderColor: 'rgb(255, 255, 255)',
448+
bgcolor: 'rgb(68, 68, 68)',
449+
bordercolor: 'rgb(255, 255, 255)',
461450
fontSize: 20,
462451
fontFamily: 'Arial',
463452
fontColor: 'rgb(255, 255, 255)'

0 commit comments

Comments
 (0)