Skip to content

Improve Plotly.toImage #1939

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 16 commits into from
Aug 14, 2017
Merged

Improve Plotly.toImage #1939

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
f758c35
add isPlainObject test case for HTML <div>
etpinard Aug 4, 2017
3d19676
make gl3d, gl2d and mapbox .destroy() idempotent
etpinard Aug 4, 2017
dd003ce
set setBackground config option in setPlotContext
etpinard Aug 8, 2017
9128e13
add 'blend' setBackground value
etpinard Aug 8, 2017
5d2b635
robustify toImage tests
etpinard Aug 8, 2017
8866525
improve Plotly.toImage
etpinard Aug 8, 2017
b3fac37
add 'webp' to list of available formats in svgToImg error msg
etpinard Aug 8, 2017
32f46c5
add tolerance for jpeg image length test
etpinard Aug 8, 2017
e5e35c0
Merge branch 'master' into improve-toimage
etpinard Aug 14, 2017
22a598b
rm 'blend' special setBackground value
etpinard Aug 14, 2017
43a6150
lint (use toThrow, instead of error msg comparison)
etpinard Aug 14, 2017
7565d0b
allow plotGlPixelRatio to be overrode by user config
etpinard Aug 14, 2017
3c42efb
rename isBadlySet -> isImpliedOrValid
etpinard Aug 14, 2017
4ec3e0f
move IE-specific SVG string tweaks to toSVG
etpinard Aug 14, 2017
816df16
purge cloneGd before resolving/rejecting convert promise
etpinard Aug 14, 2017
640503a
lint
etpinard Aug 14, 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
31 changes: 27 additions & 4 deletions src/plot_api/plot_api.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ var Polar = require('../plots/polar');
var initInteractions = require('../plots/cartesian/graph_interact');

var Drawing = require('../components/drawing');
var Color = require('../components/color');
var ErrorBars = require('../components/errorbars');
var xmlnsNamespaces = require('../constants/xmlns_namespaces');
var svgTextUtils = require('../lib/svg_text_utils');
Expand Down Expand Up @@ -390,10 +391,22 @@ Plotly.plot = function(gd, data, layout, config) {
});
};

function setBackground(gd, bgColor) {
try {
gd._fullLayout._paper.style('background', bgColor);
} catch(e) {
Lib.error(e);
}
}

function opaqueSetBackground(gd, bgColor) {
gd._fullLayout._paperdiv.style('background', 'white');
Plotly.defaultConfig.setBackground(gd, bgColor);
setBackground(gd, bgColor);
}

function blendSetBackground(gd, bgColor) {
var blend = Color.combine(bgColor, 'white');
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Implements this (old) image server logic in plotly.js

Copy link
Collaborator

Choose a reason for hiding this comment

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

doesn't this end up visually equivalent to opaqueSetBackground? And if so can we remove opaqueSetBackground?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Maybe?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

RE 'opaque' vs 'blend', they don't generate the same PNG (gm compare generates a diff) but I can't find a case where the diff is detectable to my 👀

So, I guess a can make the new image server use 'opaque' instead of 'blend' and 🔪 blendSetBackground.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

done in 22a598b

setBackground(gd, blend);
}

function setPlotContext(gd, config) {
Expand All @@ -408,10 +421,15 @@ function setPlotContext(gd, config) {
key = keys[i];
if(key === 'editable' || key === 'edits') continue;
if(key in context) {
if(key === 'setBackground' && config[key] === 'opaque') {
context[key] = opaqueSetBackground;
if(key === 'setBackground') {
if(config[key] === 'opaque') {
context[key] = opaqueSetBackground;
} else if(config[key] === 'blend') {
context[key] = blendSetBackground;
}
} else {
context[key] = config[key];
}
else context[key] = config[key];
}
}

Expand Down Expand Up @@ -460,6 +478,11 @@ function setPlotContext(gd, config) {
if(context.displayModeBar === 'hover' && !hasHover) {
context.displayModeBar = true;
}

// default and fallback for setBackground
if(context.setBackground === 'transparent' || typeof context.setBackground !== 'function') {
context.setBackground = setBackground;
}
}

function plotPolar(gd, data, layout) {
Expand Down
21 changes: 4 additions & 17 deletions src/plot_api/plot_config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@

'use strict';

/* eslint-disable no-console */

/**
* This will be transferred over to gd and overridden by
* config args to Plotly.plot.
Expand Down Expand Up @@ -109,8 +107,10 @@ module.exports = {
plotGlPixelRatio: 2,

// function to add the background color to a different container
// or 'opaque' to ensure there's white behind it
setBackground: defaultSetBackground,
// or 'opaque' to ensure there's white behind it,
// or 'blend' to blend bg color with white,
// or any other custom function of gd
setBackground: 'transparent',

// URL to topojson files used in geo charts
topojsonURL: 'https://cdn.plot.ly/',
Expand All @@ -128,16 +128,3 @@ module.exports = {
// specification needed
globalTransforms: []
};

// where and how the background gets set can be overridden by context
// so we define the default (plotly.js) behavior here
function defaultSetBackground(gd, bgColor) {
try {
gd._fullLayout._paper.style('background', bgColor);
}
catch(e) {
if(module.exports.logging > 0) {
console.error(e);
}
}
}
2 changes: 2 additions & 0 deletions src/plots/gl2d/scene2d.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -356,6 +356,8 @@ proto.handleAnnotations = function() {
};

proto.destroy = function() {
if(!this.glplot) return;

var traces = this.traces;

if(traces) {
Expand Down
2 changes: 2 additions & 0 deletions src/plots/gl3d/scene.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -593,6 +593,8 @@ proto.plot = function(sceneData, fullLayout, layout) {
};

proto.destroy = function() {
if(!this.glplot) return;

this.camera.mouseListener.enabled = false;
this.container.removeEventListener('wheel', this.camera.wheelListener);
this.camera = this.glplot.camera = null;
Expand Down
2 changes: 1 addition & 1 deletion src/plots/mapbox/mapbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -454,8 +454,8 @@ proto.destroy = function() {
if(this.map) {
this.map.remove();
this.map = null;
this.container.removeChild(this.div);
}
this.container.removeChild(this.div);
};

proto.toImage = function() {
Expand Down
3 changes: 2 additions & 1 deletion test/jasmine/tests/is_plain_object_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,8 @@ describe('isPlainObject', function() {
new Array(10),
new Date(),
new RegExp('foo'),
new String('string')
new String('string'),
document.createElement('div')
];

shouldPass.forEach(function(obj) {
Expand Down