Skip to content

Commit e7f69c9

Browse files
alexcjohnsonalexcjohnson
authored
Merge pull request #1332 from plotly/ie9-maps
IE9 fixes - to make SVG maps compatible
2 parents 1182fbe + fe12729 commit e7f69c9

File tree

29 files changed

+714
-428
lines changed

29 files changed

+714
-428
lines changed

‎devtools/test_dashboard/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121

2222
<script type="text/javascript" src="../../dist/extras/mathjax/MathJax.js?config=TeX-AMS-MML_SVG"></script>
2323
<script id="source" type="text/javascript" src="../../build/plotly.js"></script>
24+
<script type="text/javascript" src="../../test/image/strict-d3.js" charset="utf-8"></script>
2425
<script type="text/javascript" src="../../build/test_dashboard-bundle.js"></script>
2526
</body>
2627
</html>

‎src/components/annotations/draw.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -480,7 +480,7 @@ function drawOne(gd, index, opt, value) {
480480
annTextBG.call(Drawing.setRect, borderwidth / 2, borderwidth / 2,
481481
outerwidth - borderwidth, outerheight - borderwidth);
482482

483-
annTextGroupInner.call(Lib.setTranslate,
483+
annTextGroupInner.call(Drawing.setTranslate,
484484
Math.round(annPosPx.x.text - outerwidth / 2),
485485
Math.round(annPosPx.y.text - outerheight / 2));
486486

@@ -601,7 +601,7 @@ function drawOne(gd, index, opt, value) {
601601
dragElement.init({
602602
element: arrowDrag.node(),
603603
prepFn: function() {
604-
var pos = Lib.getTranslate(annTextGroupInner);
604+
var pos = Drawing.getTranslate(annTextGroupInner);
605605

606606
annx0 = pos.x;
607607
anny0 = pos.y;
@@ -617,7 +617,7 @@ function drawOne(gd, index, opt, value) {
617617
var annxy0 = applyTransform(annx0, anny0),
618618
xcenter = annxy0[0] + dx,
619619
ycenter = annxy0[1] + dy;
620-
annTextGroupInner.call(Lib.setTranslate, xcenter, ycenter);
620+
annTextGroupInner.call(Drawing.setTranslate, xcenter, ycenter);
621621

622622
update[annbase + '.x'] = xa ?
623623
xa.p2r(xa.r2p(options.x) + dx) :

‎src/components/drawing/index.js

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@ drawing.lineGroupStyle = function(s, lw, lc, ld) {
112112
};
113113

114114
drawing.dashLine = function(s, dash, lineWidth) {
115+
lineWidth = +lineWidth || 0;
115116
var dlw = Math.max(lineWidth, 3);
116117

117118
if(dash === 'solid') dash = '';
@@ -575,3 +576,105 @@ drawing.setClipUrl = function(s, localId) {
575576

576577
s.attr('clip-path', 'url(' + url + ')');
577578
};
579+
580+
drawing.getTranslate = function(element) {
581+
// Note the separator [^\d] between x and y in this regex
582+
// We generally use ',' but IE will convert it to ' '
583+
var re = /.*\btranslate\((\d*\.?\d*)[^\d]*(\d*\.?\d*)[^\d].*/,
584+
getter = element.attr ? 'attr' : 'getAttribute',
585+
transform = element[getter]('transform') || '';
586+
587+
var translate = transform.replace(re, function(match, p1, p2) {
588+
return [p1, p2].join(' ');
589+
})
590+
.split(' ');
591+
592+
return {
593+
x: +translate[0] || 0,
594+
y: +translate[1] || 0
595+
};
596+
};
597+
598+
drawing.setTranslate = function(element, x, y) {
599+
600+
var re = /(\btranslate\(.*?\);?)/,
601+
getter = element.attr ? 'attr' : 'getAttribute',
602+
setter = element.attr ? 'attr' : 'setAttribute',
603+
transform = element[getter]('transform') || '';
604+
605+
x = x || 0;
606+
y = y || 0;
607+
608+
transform = transform.replace(re, '').trim();
609+
transform += ' translate(' + x + ', ' + y + ')';
610+
transform = transform.trim();
611+
612+
element[setter]('transform', transform);
613+
614+
return transform;
615+
};
616+
617+
drawing.getScale = function(element) {
618+
619+
var re = /.*\bscale\((\d*\.?\d*)[^\d]*(\d*\.?\d*)[^\d].*/,
620+
getter = element.attr ? 'attr' : 'getAttribute',
621+
transform = element[getter]('transform') || '';
622+
623+
var translate = transform.replace(re, function(match, p1, p2) {
624+
return [p1, p2].join(' ');
625+
})
626+
.split(' ');
627+
628+
return {
629+
x: +translate[0] || 1,
630+
y: +translate[1] || 1
631+
};
632+
};
633+
634+
drawing.setScale = function(element, x, y) {
635+
636+
var re = /(\bscale\(.*?\);?)/,
637+
getter = element.attr ? 'attr' : 'getAttribute',
638+
setter = element.attr ? 'attr' : 'setAttribute',
639+
transform = element[getter]('transform') || '';
640+
641+
x = x || 1;
642+
y = y || 1;
643+
644+
transform = transform.replace(re, '').trim();
645+
transform += ' scale(' + x + ', ' + y + ')';
646+
transform = transform.trim();
647+
648+
element[setter]('transform', transform);
649+
650+
return transform;
651+
};
652+
653+
drawing.setPointGroupScale = function(selection, x, y) {
654+
var t, scale, re;
655+
656+
x = x || 1;
657+
y = y || 1;
658+
659+
if(x === 1 && y === 1) {
660+
scale = '';
661+
} else {
662+
// The same scale transform for every point:
663+
scale = ' scale(' + x + ',' + y + ')';
664+
}
665+
666+
// A regex to strip any existing scale:
667+
re = /\s*sc.*/;
668+
669+
selection.each(function() {
670+
// Get the transform:
671+
t = (this.getAttribute('transform') || '').replace(re, '');
672+
t += scale;
673+
t = t.trim();
674+
675+
// Append the scale transform
676+
this.setAttribute('transform', t);
677+
});
678+
679+
return scale;
680+
};

‎src/components/legend/draw.js

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,7 @@ module.exports = function draw(gd) {
196196

197197
// Set size and position of all the elements that make up a legend:
198198
// legend, background and border, scroll box and scroll bar
199-
Lib.setTranslate(legend, lx, ly);
199+
Drawing.setTranslate(legend, lx, ly);
200200

201201
var scrollBarYMax = legendHeight -
202202
constants.scrollBarHeight -
@@ -214,7 +214,7 @@ module.exports = function draw(gd) {
214214
y: opts.borderwidth / 2
215215
});
216216

217-
Lib.setTranslate(scrollBox, 0, 0);
217+
Drawing.setTranslate(scrollBox, 0, 0);
218218

219219
clipPath.select('rect').attr({
220220
width: legendWidth - 2 * opts.borderwidth,
@@ -289,7 +289,7 @@ module.exports = function draw(gd) {
289289
function scrollHandler(scrollBarY, scrollBoxY) {
290290
scrollBox
291291
.attr('data-scroll', scrollBoxY)
292-
.call(Lib.setTranslate, 0, scrollBoxY);
292+
.call(Drawing.setTranslate, 0, scrollBoxY);
293293

294294
scrollBar.call(
295295
Drawing.setRect,
@@ -311,7 +311,7 @@ module.exports = function draw(gd) {
311311
dragElement.init({
312312
element: legend.node(),
313313
prepFn: function() {
314-
var transform = Lib.getTranslate(legend);
314+
var transform = Drawing.getTranslate(legend);
315315

316316
x0 = transform.x;
317317
y0 = transform.y;
@@ -320,7 +320,7 @@ module.exports = function draw(gd) {
320320
var newX = x0 + dx,
321321
newY = y0 + dy;
322322

323-
Lib.setTranslate(legend, newX, newY);
323+
Drawing.setTranslate(legend, newX, newY);
324324

325325
xf = dragElement.align(newX, 0, gs.l, gs.l + gs.w, opts.xanchor);
326326
yf = dragElement.align(newY, 0, gs.t + gs.h, gs.t, opts.yanchor);
@@ -464,7 +464,7 @@ function computeTextDimensions(g, gd) {
464464
height = mathjaxBB.height;
465465
width = mathjaxBB.width;
466466

467-
Lib.setTranslate(mathjaxGroup, 0, (height / 4));
467+
Drawing.setTranslate(mathjaxGroup, 0, (height / 4));
468468
}
469469
else {
470470
var text = g.selectAll('.legendtext'),
@@ -496,7 +496,7 @@ function computeLegendDimensions(gd, groups, traces) {
496496
if(helpers.isVertical(opts)) {
497497
if(isGrouped) {
498498
groups.each(function(d, i) {
499-
Lib.setTranslate(this, 0, i * opts.tracegroupgap);
499+
Drawing.setTranslate(this, 0, i * opts.tracegroupgap);
500500
});
501501
}
502502

@@ -508,7 +508,7 @@ function computeLegendDimensions(gd, groups, traces) {
508508
textHeight = legendItem.height,
509509
textWidth = legendItem.width;
510510

511-
Lib.setTranslate(this,
511+
Drawing.setTranslate(this,
512512
borderwidth,
513513
(5 + borderwidth + opts.height + textHeight / 2));
514514

@@ -559,7 +559,7 @@ function computeLegendDimensions(gd, groups, traces) {
559559
}
560560

561561
groups.each(function(d, i) {
562-
Lib.setTranslate(this, groupXOffsets[i], 0);
562+
Drawing.setTranslate(this, groupXOffsets[i], 0);
563563
});
564564

565565
groups.each(function() {
@@ -571,7 +571,7 @@ function computeLegendDimensions(gd, groups, traces) {
571571
var legendItem = d[0],
572572
textHeight = legendItem.height;
573573

574-
Lib.setTranslate(this,
574+
Drawing.setTranslate(this,
575575
0,
576576
(5 + borderwidth + groupHeight + textHeight / 2));
577577

@@ -626,7 +626,7 @@ function computeLegendDimensions(gd, groups, traces) {
626626
maxTraceHeight = 0;
627627
}
628628

629-
Lib.setTranslate(this,
629+
Drawing.setTranslate(this,
630630
(borderwidth + offsetX),
631631
(5 + borderwidth + legendItem.height / 2) + rowHeight);
632632

‎src/components/modebar/modebar.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ proto.createButton = function(config) {
147147
}
148148

149149
button.setAttribute('data-toggle', config.toggle || false);
150-
if(config.toggle) button.classList.add('active');
150+
if(config.toggle) d3.select(button).classed('active', true);
151151

152152
button.appendChild(this.createIcon(config.icon || Icons.question));
153153
button.setAttribute('data-gravity', config.gravity || 'n');

‎src/components/sliders/draw.js

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@
1212
var d3 = require('d3');
1313

1414
var Plots = require('../../plots/plots');
15-
var Lib = require('../../lib');
1615
var Color = require('../color');
1716
var Drawing = require('../drawing');
1817
var svgTextUtils = require('../../lib/svg_text_utils');
@@ -252,7 +251,7 @@ function drawSlider(gd, sliderGroup, sliderOpts) {
252251
.call(drawGrip, gd, sliderOpts);
253252

254253
// Position the rectangle:
255-
Lib.setTranslate(sliderGroup, sliderOpts.lx + sliderOpts.pad.l, sliderOpts.ly + sliderOpts.pad.t);
254+
Drawing.setTranslate(sliderGroup, sliderOpts.lx + sliderOpts.pad.l, sliderOpts.ly + sliderOpts.pad.t);
256255

257256
sliderGroup.call(setGripPosition, sliderOpts, sliderOpts.active / (sliderOpts.steps.length - 1), false);
258257
sliderGroup.call(drawCurrentValue, sliderOpts);
@@ -305,7 +304,7 @@ function drawCurrentValue(sliderGroup, sliderOpts, valueOverride) {
305304
.text(str)
306305
.call(svgTextUtils.convertToTspans);
307306

308-
Lib.setTranslate(text, x0, sliderOpts.currentValueHeight);
307+
Drawing.setTranslate(text, x0, sliderOpts.currentValueHeight);
309308

310309
return text;
311310
}
@@ -366,7 +365,7 @@ function drawLabelGroup(sliderGroup, sliderOpts) {
366365

367366
item.call(drawLabel, d, sliderOpts);
368367

369-
Lib.setTranslate(item,
368+
Drawing.setTranslate(item,
370369
normalizedValueToPosition(sliderOpts, d.fraction),
371370
constants.tickOffset + sliderOpts.ticklen + sliderOpts.labelHeight + constants.labelOffset + sliderOpts.currentValueTotalHeight
372371
);
@@ -489,7 +488,7 @@ function drawTicks(sliderGroup, sliderOpts) {
489488
.attr({height: isMajor ? sliderOpts.ticklen : sliderOpts.minorticklen})
490489
.call(Color.fill, isMajor ? sliderOpts.tickcolor : sliderOpts.tickcolor);
491490

492-
Lib.setTranslate(item,
491+
Drawing.setTranslate(item,
493492
normalizedValueToPosition(sliderOpts, i / (sliderOpts.steps.length - 1)) - 0.5 * sliderOpts.tickwidth,
494493
(isMajor ? constants.tickOffset : constants.minorTickOffset) + sliderOpts.currentValueTotalHeight
495494
);
@@ -526,7 +525,7 @@ function setGripPosition(sliderGroup, sliderOpts, position, doTransition) {
526525
.ease(sliderOpts.transition.easing);
527526
}
528527

529-
// Lib.setTranslate doesn't work here becasue of the transition duck-typing.
528+
// Drawing.setTranslate doesn't work here becasue of the transition duck-typing.
530529
// It's also not necessary because there are no other transitions to preserve.
531530
el.attr('transform', 'translate(' + (x - constants.gripWidth * 0.5) + ',' + (sliderOpts.currentValueTotalHeight) + ')');
532531
}
@@ -558,7 +557,7 @@ function drawTouchRect(sliderGroup, gd, sliderOpts) {
558557
.call(Color.fill, sliderOpts.bgcolor)
559558
.attr('opacity', 0);
560559

561-
Lib.setTranslate(rect, 0, sliderOpts.currentValueTotalHeight);
560+
Drawing.setTranslate(rect, 0, sliderOpts.currentValueTotalHeight);
562561
}
563562

564563
function drawRail(sliderGroup, sliderOpts) {
@@ -581,7 +580,7 @@ function drawRail(sliderGroup, sliderOpts) {
581580
.call(Color.fill, sliderOpts.bgcolor)
582581
.style('stroke-width', sliderOpts.borderwidth + 'px');
583582

584-
Lib.setTranslate(rect,
583+
Drawing.setTranslate(rect,
585584
constants.railInset,
586585
(sliderOpts.inputAreaWidth - constants.railWidth) * 0.5 + sliderOpts.currentValueTotalHeight
587586
);

‎src/components/titles/index.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -151,10 +151,12 @@ Titles.draw = function(gd, titleClass, options) {
151151
else {
152152
// so we don't have to offset each avoided element,
153153
// give the title the opposite offset
154-
titlebb.left -= avoid.offsetLeft;
155-
titlebb.right -= avoid.offsetLeft;
156-
titlebb.top -= avoid.offsetTop;
157-
titlebb.bottom -= avoid.offsetTop;
154+
var offsetLeft = avoid.offsetLeft || 0,
155+
offsetTop = avoid.offsetTop || 0;
156+
titlebb.left -= offsetLeft;
157+
titlebb.right -= offsetLeft;
158+
titlebb.top -= offsetTop;
159+
titlebb.bottom -= offsetTop;
158160

159161
// iterate over a set of elements (avoid.selection)
160162
// to avoid collisions with

‎src/components/updatemenus/draw.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@
1212
var d3 = require('d3');
1313

1414
var Plots = require('../../plots/plots');
15-
var Lib = require('../../lib');
1615
var Color = require('../color');
1716
var Drawing = require('../drawing');
1817
var svgTextUtils = require('../../lib/svg_text_utils');
@@ -220,7 +219,7 @@ function drawHeader(gd, gHeader, gButton, menuOpts) {
220219
});
221220

222221
// translate header group
223-
Lib.setTranslate(gHeader, menuOpts.lx, menuOpts.ly);
222+
Drawing.setTranslate(gHeader, menuOpts.lx, menuOpts.ly);
224223
}
225224

226225
function drawButtons(gd, gHeader, gButton, menuOpts) {
@@ -316,7 +315,7 @@ function drawButtons(gd, gHeader, gButton, menuOpts) {
316315
buttons.call(styleButtons, menuOpts);
317316

318317
// translate button group
319-
Lib.setTranslate(gButton, menuOpts.lx, menuOpts.ly);
318+
Drawing.setTranslate(gButton, menuOpts.lx, menuOpts.ly);
320319
}
321320

322321
function setActive(gd, menuOpts, buttonOpts, gHeader, gButton, buttonIndex, isSilentUpdate) {
@@ -531,7 +530,7 @@ function setItemPosition(item, menuOpts, posOpts, overrideOpts) {
531530
borderWidth = menuOpts.borderwidth,
532531
index = posOpts.index;
533532

534-
Lib.setTranslate(item, borderWidth + posOpts.x, borderWidth + posOpts.y);
533+
Drawing.setTranslate(item, borderWidth + posOpts.x, borderWidth + posOpts.y);
535534

536535
var isVertical = ['up', 'down'].indexOf(menuOpts.direction) !== -1;
537536

0 commit comments

Comments
 (0)