Skip to content

Commit af8f15f

Browse files
archmojarchmoj
authored
Merge pull request #4816 from plotly/react-plot_bgcolor
Fix react to plot_bgcolor changes
2 parents 74dfee0 + c89bcd2 commit af8f15f

File tree

3 files changed

+207
-1
lines changed

3 files changed

+207
-1
lines changed

‎src/plot_api/plot_api.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,13 @@ function plot(gd, data, layout, config) {
152152
fullLayout._replotting = true;
153153

154154
// make or remake the framework if we need to
155-
if(graphWasEmpty) makePlotFramework(gd);
155+
if(graphWasEmpty || fullLayout._shouldCreateBgLayer) {
156+
makePlotFramework(gd);
157+
158+
if(fullLayout._shouldCreateBgLayer) {
159+
delete fullLayout._shouldCreateBgLayer;
160+
}
161+
}
156162

157163
// polar need a different framework
158164
if(gd.framework !== makePlotFramework) {

‎src/plots/plots.js

+14
Original file line numberDiff line numberDiff line change
@@ -482,6 +482,20 @@ plots.supplyDefaults = function(gd, opts) {
482482
// clean subplots and other artifacts from previous plot calls
483483
plots.cleanPlot(newFullData, newFullLayout, oldFullData, oldFullLayout);
484484

485+
var hadGL2D = !!(oldFullLayout._has && oldFullLayout._has('gl2d'));
486+
var hasGL2D = !!(newFullLayout._has && newFullLayout._has('gl2d'));
487+
var hadCartesian = !!(oldFullLayout._has && oldFullLayout._has('cartesian'));
488+
var hasCartesian = !!(newFullLayout._has && newFullLayout._has('cartesian'));
489+
var hadBgLayer = hadCartesian || hadGL2D;
490+
var hasBgLayer = hasCartesian || hasGL2D;
491+
if(hadBgLayer && !hasBgLayer) {
492+
// remove bgLayer
493+
oldFullLayout._bgLayer.remove();
494+
} else if(hasBgLayer && !hadBgLayer) {
495+
// create bgLayer
496+
newFullLayout._shouldCreateBgLayer = true;
497+
}
498+
485499
// clear selection outline until we implement persistent selection,
486500
// don't clear them though when drag handlers (e.g. listening to
487501
// `plotly_selecting`) update the graph.

‎test/jasmine/tests/plot_api_react_test.js

+186
Original file line numberDiff line numberDiff line change
@@ -937,6 +937,192 @@ describe('resizing with Plotly.relayout and Plotly.react', function() {
937937
});
938938
});
939939

940+
describe('clear bglayer react', function() {
941+
var x = [1];
942+
var y = [2];
943+
var z = [3];
944+
945+
var gd;
946+
947+
beforeEach(function() {
948+
gd = createGraphDiv();
949+
});
950+
951+
afterEach(destroyGraphDiv);
952+
953+
function hasBgRect() {
954+
var bgLayer = d3.selectAll('.bglayer .bg');
955+
return bgLayer[0][0] !== undefined; // i.e. background rect
956+
}
957+
958+
it('clear plot background when react from cartesian to gl3d & back', function(done) {
959+
Plotly.newPlot(gd, {
960+
data: [{ type: 'scatter', x: x, y: y, z: z }],
961+
layout: { plot_bgcolor: 'green' }
962+
}).then(function() {
963+
expect(gd._fullLayout.plot_bgcolor).toBe('green');
964+
expect(hasBgRect()).toBe(true);
965+
}).then(function() {
966+
Plotly.react(gd, {
967+
data: [{ type: 'scatter3d', x: x, y: y, z: z }],
968+
layout: { plot_bgcolor: 'red' }
969+
});
970+
}).then(function() {
971+
expect(gd._fullLayout.plot_bgcolor).toBe(undefined);
972+
expect(hasBgRect()).toBe(false);
973+
}).then(function() {
974+
Plotly.react(gd, {
975+
data: [{ type: 'scatter', x: x, y: y, z: z }],
976+
layout: { plot_bgcolor: 'green' }
977+
});
978+
}).then(function() {
979+
expect(gd._fullLayout.plot_bgcolor).toBe('green');
980+
expect(hasBgRect()).toBe(true);
981+
})
982+
.catch(failTest)
983+
.then(done);
984+
});
985+
986+
it('clear plot background when react from gl2d to gl3d & back', function(done) {
987+
Plotly.newPlot(gd, {
988+
data: [{ type: 'scatter2d', x: x, y: y, z: z }],
989+
layout: { plot_bgcolor: 'green' }
990+
}).then(function() {
991+
expect(gd._fullLayout.plot_bgcolor).toBe('green');
992+
expect(hasBgRect()).toBe(true);
993+
}).then(function() {
994+
Plotly.react(gd, {
995+
data: [{ type: 'scatter3d', x: x, y: y, z: z }],
996+
layout: { plot_bgcolor: 'red' }
997+
});
998+
}).then(function() {
999+
expect(gd._fullLayout.plot_bgcolor).toBe(undefined);
1000+
expect(hasBgRect()).toBe(false);
1001+
}).then(function() {
1002+
Plotly.react(gd, {
1003+
data: [{ type: 'scatter2d', x: x, y: y, z: z }],
1004+
layout: { plot_bgcolor: 'green' }
1005+
});
1006+
}).then(function() {
1007+
expect(gd._fullLayout.plot_bgcolor).toBe('green');
1008+
expect(hasBgRect()).toBe(true);
1009+
})
1010+
.catch(failTest)
1011+
.then(done);
1012+
});
1013+
1014+
it('create plot background when react from gl3d to gl2d & back', function(done) {
1015+
Plotly.newPlot(gd, {
1016+
data: [{ type: 'scatter3d', x: x, y: y, z: z }],
1017+
layout: { plot_bgcolor: 'red' }
1018+
}).then(function() {
1019+
expect(gd._fullLayout.plot_bgcolor).toBe(undefined);
1020+
expect(hasBgRect()).toBe(false);
1021+
}).then(function() {
1022+
Plotly.react(gd, {
1023+
data: [{ type: 'scatter2d', x: x, y: y, z: z }],
1024+
layout: { plot_bgcolor: 'green' }
1025+
});
1026+
}).then(function() {
1027+
expect(gd._fullLayout.plot_bgcolor).toBe('green');
1028+
expect(hasBgRect()).toBe(true);
1029+
}).then(function() {
1030+
Plotly.react(gd, {
1031+
data: [{ type: 'scatter3d', x: x, y: y, z: z }],
1032+
layout: { plot_bgcolor: 'red' }
1033+
});
1034+
}).then(function() {
1035+
expect(gd._fullLayout.plot_bgcolor).toBe(undefined);
1036+
expect(hasBgRect()).toBe(false);
1037+
})
1038+
.catch(failTest)
1039+
.then(done);
1040+
});
1041+
1042+
it('create plot background when react from gl3d to cartesian & back', function(done) {
1043+
Plotly.newPlot(gd, {
1044+
data: [{ type: 'scatter3d', x: x, y: y, z: z }],
1045+
layout: { plot_bgcolor: 'red' }
1046+
}).then(function() {
1047+
expect(gd._fullLayout.plot_bgcolor).toBe(undefined);
1048+
expect(hasBgRect()).toBe(false);
1049+
}).then(function() {
1050+
Plotly.react(gd, {
1051+
data: [{ type: 'scatter', x: x, y: y, z: z }],
1052+
layout: { plot_bgcolor: 'green' }
1053+
});
1054+
}).then(function() {
1055+
expect(gd._fullLayout.plot_bgcolor).toBe('green');
1056+
expect(hasBgRect()).toBe(true);
1057+
}).then(function() {
1058+
Plotly.react(gd, {
1059+
data: [{ type: 'scatter3d', x: x, y: y, z: z }],
1060+
layout: { plot_bgcolor: 'red' }
1061+
});
1062+
}).then(function() {
1063+
expect(gd._fullLayout.plot_bgcolor).toBe(undefined);
1064+
expect(hasBgRect()).toBe(false);
1065+
})
1066+
.catch(failTest)
1067+
.then(done);
1068+
});
1069+
1070+
it('change plot background when react from cartesian to gl2d & back', function(done) {
1071+
Plotly.newPlot(gd, {
1072+
data: [{ type: 'scatter', x: x, y: y, z: z }],
1073+
layout: { plot_bgcolor: 'yellow' }
1074+
}).then(function() {
1075+
expect(gd._fullLayout.plot_bgcolor).toBe('yellow');
1076+
expect(hasBgRect()).toBe(true);
1077+
}).then(function() {
1078+
Plotly.react(gd, {
1079+
data: [{ type: 'scatter2d', x: x, y: y, z: z }],
1080+
layout: { plot_bgcolor: 'green' }
1081+
});
1082+
}).then(function() {
1083+
expect(gd._fullLayout.plot_bgcolor).toBe('green');
1084+
expect(hasBgRect()).toBe(true);
1085+
}).then(function() {
1086+
Plotly.react(gd, {
1087+
data: [{ type: 'scatter', x: x, y: y, z: z }],
1088+
layout: { plot_bgcolor: 'yellow' }
1089+
});
1090+
}).then(function() {
1091+
expect(gd._fullLayout.plot_bgcolor).toBe('yellow');
1092+
expect(hasBgRect()).toBe(true);
1093+
})
1094+
.catch(failTest)
1095+
.then(done);
1096+
});
1097+
1098+
it('change plot background when react from gl2d to cartesian & back', function(done) {
1099+
Plotly.newPlot(gd, {
1100+
data: [{ type: 'scatter2d', x: x, y: y, z: z }],
1101+
layout: { plot_bgcolor: 'yellow' }
1102+
}).then(function() {
1103+
expect(gd._fullLayout.plot_bgcolor).toBe('yellow');
1104+
expect(hasBgRect()).toBe(true);
1105+
}).then(function() {
1106+
Plotly.react(gd, {
1107+
data: [{ type: 'scatter', x: x, y: y, z: z }],
1108+
layout: { plot_bgcolor: 'green' }
1109+
});
1110+
}).then(function() {
1111+
expect(gd._fullLayout.plot_bgcolor).toBe('green');
1112+
expect(hasBgRect()).toBe(true);
1113+
}).then(function() {
1114+
Plotly.react(gd, {
1115+
data: [{ type: 'scatter2d', x: x, y: y, z: z }],
1116+
layout: { plot_bgcolor: 'yellow' }
1117+
});
1118+
}).then(function() {
1119+
expect(gd._fullLayout.plot_bgcolor).toBe('yellow');
1120+
expect(hasBgRect()).toBe(true);
1121+
})
1122+
.catch(failTest)
1123+
.then(done);
1124+
});
1125+
});
9401126

9411127
describe('Plotly.react and uirevision attributes', function() {
9421128
var gd;

0 commit comments

Comments
 (0)