Skip to content

IE9 fixes - to make SVG maps compatible #1332

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Feb 1, 2017
Merged

IE9 fixes - to make SVG maps compatible #1332

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
98adfae
IE9 fixes
alexcjohnson Jan 24, 2017
ebc1a10
explicitly, rather than implicitly, default choropleth linewidth to 1
alexcjohnson Jan 25, 2017
12aeb9d
tests for IE9 fixes
alexcjohnson Jan 25, 2017
4aa1a45
strict-d3: prevent stuff like 'nanpx' from selection.style
alexcjohnson Jan 31, 2017
61ade94
fix #1247 - titles avoid labels in IE
alexcjohnson Jan 31, 2017
2105930
fix #746 issue with newline characters in text in IE
alexcjohnson Jan 31, 2017
0d555b4
test that svg text output has no newlines in it
alexcjohnson Jan 31, 2017
66baf51
move (set|get)(translate|scale|pointgroupscale) into components/drawing
alexcjohnson Jan 31, 2017
fe12729
one more Lib->Drawing
alexcjohnson Jan 31, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions devtools/test_dashboard/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@

<script type="text/javascript" src="../../dist/extras/mathjax/MathJax.js?config=TeX-AMS-MML_SVG"></script>
<script id="source" type="text/javascript" src="../../build/plotly.js"></script>
<script type="text/javascript" src="../../test/image/strict-d3.js" charset="utf-8"></script>
<script type="text/javascript" src="../../build/test_dashboard-bundle.js"></script>
</body>
</html>
6 changes: 3 additions & 3 deletions src/components/annotations/draw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -480,7 +480,7 @@ function drawOne(gd, index, opt, value) {
annTextBG.call(Drawing.setRect, borderwidth / 2, borderwidth / 2,
outerwidth - borderwidth, outerheight - borderwidth);

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

Expand Down Expand Up @@ -601,7 +601,7 @@ function drawOne(gd, index, opt, value) {
dragElement.init({
element: arrowDrag.node(),
prepFn: function() {
var pos = Lib.getTranslate(annTextGroupInner);
var pos = Drawing.getTranslate(annTextGroupInner);

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

update[annbase + '.x'] = xa ?
xa.p2r(xa.r2p(options.x) + dx) :
Expand Down
103 changes: 103 additions & 0 deletions src/components/drawing/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@ drawing.lineGroupStyle = function(s, lw, lc, ld) {
};

drawing.dashLine = function(s, dash, lineWidth) {
lineWidth = +lineWidth || 0;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting. Maybe this also fixes #166 ?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe - I'll try that tonight and see if it implies any further fixes. Any other IE issues I should include in my testing?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this does fix #166 - and 4aa1a45 should catch any of these nanpx or undefinedpx errors, at least as long as they go through d3.

Will investigate the other two tomorrow, they may be related.

var dlw = Math.max(lineWidth, 3);

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

s.attr('clip-path', 'url(' + url + ')');
};

drawing.getTranslate = function(element) {
// Note the separator [^\d] between x and y in this regex
// We generally use ',' but IE will convert it to ' '
var re = /.*\btranslate\((\d*\.?\d*)[^\d]*(\d*\.?\d*)[^\d].*/,
getter = element.attr ? 'attr' : 'getAttribute',
transform = element[getter]('transform') || '';

var translate = transform.replace(re, function(match, p1, p2) {
return [p1, p2].join(' ');
})
.split(' ');

return {
x: +translate[0] || 0,
y: +translate[1] || 0
};
};

drawing.setTranslate = function(element, x, y) {

var re = /(\btranslate\(.*?\);?)/,
getter = element.attr ? 'attr' : 'getAttribute',
setter = element.attr ? 'attr' : 'setAttribute',
transform = element[getter]('transform') || '';

x = x || 0;
y = y || 0;

transform = transform.replace(re, '').trim();
transform += ' translate(' + x + ', ' + y + ')';
transform = transform.trim();

element[setter]('transform', transform);

return transform;
};

drawing.getScale = function(element) {

var re = /.*\bscale\((\d*\.?\d*)[^\d]*(\d*\.?\d*)[^\d].*/,
getter = element.attr ? 'attr' : 'getAttribute',
transform = element[getter]('transform') || '';

var translate = transform.replace(re, function(match, p1, p2) {
return [p1, p2].join(' ');
})
.split(' ');

return {
x: +translate[0] || 1,
y: +translate[1] || 1
};
};

drawing.setScale = function(element, x, y) {

var re = /(\bscale\(.*?\);?)/,
getter = element.attr ? 'attr' : 'getAttribute',
setter = element.attr ? 'attr' : 'setAttribute',
transform = element[getter]('transform') || '';

x = x || 1;
y = y || 1;

transform = transform.replace(re, '').trim();
transform += ' scale(' + x + ', ' + y + ')';
transform = transform.trim();

element[setter]('transform', transform);

return transform;
};

drawing.setPointGroupScale = function(selection, x, y) {
var t, scale, re;

x = x || 1;
y = y || 1;

if(x === 1 && y === 1) {
scale = '';
} else {
// The same scale transform for every point:
scale = ' scale(' + x + ',' + y + ')';
}

// A regex to strip any existing scale:
re = /\s*sc.*/;

selection.each(function() {
// Get the transform:
t = (this.getAttribute('transform') || '').replace(re, '');
t += scale;
t = t.trim();

// Append the scale transform
this.setAttribute('transform', t);
});

return scale;
};
22 changes: 11 additions & 11 deletions src/components/legend/draw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@ module.exports = function draw(gd) {

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

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

Lib.setTranslate(scrollBox, 0, 0);
Drawing.setTranslate(scrollBox, 0, 0);

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

scrollBar.call(
Drawing.setRect,
Expand All @@ -311,7 +311,7 @@ module.exports = function draw(gd) {
dragElement.init({
element: legend.node(),
prepFn: function() {
var transform = Lib.getTranslate(legend);
var transform = Drawing.getTranslate(legend);

x0 = transform.x;
y0 = transform.y;
Expand All @@ -320,7 +320,7 @@ module.exports = function draw(gd) {
var newX = x0 + dx,
newY = y0 + dy;

Lib.setTranslate(legend, newX, newY);
Drawing.setTranslate(legend, newX, newY);

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

Lib.setTranslate(mathjaxGroup, 0, (height / 4));
Drawing.setTranslate(mathjaxGroup, 0, (height / 4));
}
else {
var text = g.selectAll('.legendtext'),
Expand Down Expand Up @@ -496,7 +496,7 @@ function computeLegendDimensions(gd, groups, traces) {
if(helpers.isVertical(opts)) {
if(isGrouped) {
groups.each(function(d, i) {
Lib.setTranslate(this, 0, i * opts.tracegroupgap);
Drawing.setTranslate(this, 0, i * opts.tracegroupgap);
});
}

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

Lib.setTranslate(this,
Drawing.setTranslate(this,
borderwidth,
(5 + borderwidth + opts.height + textHeight / 2));

Expand Down Expand Up @@ -559,7 +559,7 @@ function computeLegendDimensions(gd, groups, traces) {
}

groups.each(function(d, i) {
Lib.setTranslate(this, groupXOffsets[i], 0);
Drawing.setTranslate(this, groupXOffsets[i], 0);
});

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

Lib.setTranslate(this,
Drawing.setTranslate(this,
0,
(5 + borderwidth + groupHeight + textHeight / 2));

Expand Down Expand Up @@ -626,7 +626,7 @@ function computeLegendDimensions(gd, groups, traces) {
maxTraceHeight = 0;
}

Lib.setTranslate(this,
Drawing.setTranslate(this,
(borderwidth + offsetX),
(5 + borderwidth + legendItem.height / 2) + rowHeight);

Expand Down
2 changes: 1 addition & 1 deletion src/components/modebar/modebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ proto.createButton = function(config) {
}

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

button.appendChild(this.createIcon(config.icon || Icons.question));
button.setAttribute('data-gravity', config.gravity || 'n');
Expand Down
15 changes: 7 additions & 8 deletions src/components/sliders/draw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
var d3 = require('d3');

var Plots = require('../../plots/plots');
var Lib = require('../../lib');
var Color = require('../color');
var Drawing = require('../drawing');
var svgTextUtils = require('../../lib/svg_text_utils');
Expand Down Expand Up @@ -252,7 +251,7 @@ function drawSlider(gd, sliderGroup, sliderOpts) {
.call(drawGrip, gd, sliderOpts);

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

sliderGroup.call(setGripPosition, sliderOpts, sliderOpts.active / (sliderOpts.steps.length - 1), false);
sliderGroup.call(drawCurrentValue, sliderOpts);
Expand Down Expand Up @@ -305,7 +304,7 @@ function drawCurrentValue(sliderGroup, sliderOpts, valueOverride) {
.text(str)
.call(svgTextUtils.convertToTspans);

Lib.setTranslate(text, x0, sliderOpts.currentValueHeight);
Drawing.setTranslate(text, x0, sliderOpts.currentValueHeight);

return text;
}
Expand Down Expand Up @@ -366,7 +365,7 @@ function drawLabelGroup(sliderGroup, sliderOpts) {

item.call(drawLabel, d, sliderOpts);

Lib.setTranslate(item,
Drawing.setTranslate(item,
normalizedValueToPosition(sliderOpts, d.fraction),
constants.tickOffset + sliderOpts.ticklen + sliderOpts.labelHeight + constants.labelOffset + sliderOpts.currentValueTotalHeight
);
Expand Down Expand Up @@ -489,7 +488,7 @@ function drawTicks(sliderGroup, sliderOpts) {
.attr({height: isMajor ? sliderOpts.ticklen : sliderOpts.minorticklen})
.call(Color.fill, isMajor ? sliderOpts.tickcolor : sliderOpts.tickcolor);

Lib.setTranslate(item,
Drawing.setTranslate(item,
normalizedValueToPosition(sliderOpts, i / (sliderOpts.steps.length - 1)) - 0.5 * sliderOpts.tickwidth,
(isMajor ? constants.tickOffset : constants.minorTickOffset) + sliderOpts.currentValueTotalHeight
);
Expand Down Expand Up @@ -526,7 +525,7 @@ function setGripPosition(sliderGroup, sliderOpts, position, doTransition) {
.ease(sliderOpts.transition.easing);
}

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

Lib.setTranslate(rect, 0, sliderOpts.currentValueTotalHeight);
Drawing.setTranslate(rect, 0, sliderOpts.currentValueTotalHeight);
}

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

Lib.setTranslate(rect,
Drawing.setTranslate(rect,
constants.railInset,
(sliderOpts.inputAreaWidth - constants.railWidth) * 0.5 + sliderOpts.currentValueTotalHeight
);
Expand Down
10 changes: 6 additions & 4 deletions src/components/titles/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,10 +151,12 @@ Titles.draw = function(gd, titleClass, options) {
else {
// so we don't have to offset each avoided element,
// give the title the opposite offset
titlebb.left -= avoid.offsetLeft;
titlebb.right -= avoid.offsetLeft;
titlebb.top -= avoid.offsetTop;
titlebb.bottom -= avoid.offsetTop;
var offsetLeft = avoid.offsetLeft || 0,
offsetTop = avoid.offsetTop || 0;
titlebb.left -= offsetLeft;
titlebb.right -= offsetLeft;
titlebb.top -= offsetTop;
titlebb.bottom -= offsetTop;

// iterate over a set of elements (avoid.selection)
// to avoid collisions with
Expand Down
7 changes: 3 additions & 4 deletions src/components/updatemenus/draw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
var d3 = require('d3');

var Plots = require('../../plots/plots');
var Lib = require('../../lib');
var Color = require('../color');
var Drawing = require('../drawing');
var svgTextUtils = require('../../lib/svg_text_utils');
Expand Down Expand Up @@ -220,7 +219,7 @@ function drawHeader(gd, gHeader, gButton, menuOpts) {
});

// translate header group
Lib.setTranslate(gHeader, menuOpts.lx, menuOpts.ly);
Drawing.setTranslate(gHeader, menuOpts.lx, menuOpts.ly);
}

function drawButtons(gd, gHeader, gButton, menuOpts) {
Expand Down Expand Up @@ -316,7 +315,7 @@ function drawButtons(gd, gHeader, gButton, menuOpts) {
buttons.call(styleButtons, menuOpts);

// translate button group
Lib.setTranslate(gButton, menuOpts.lx, menuOpts.ly);
Drawing.setTranslate(gButton, menuOpts.lx, menuOpts.ly);
}

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

Lib.setTranslate(item, borderWidth + posOpts.x, borderWidth + posOpts.y);
Drawing.setTranslate(item, borderWidth + posOpts.x, borderWidth + posOpts.y);

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

Expand Down
Loading