diff --git a/src/traces/scattergl/index.js b/src/traces/scattergl/index.js index 5a722ce79db..59b0bd585a0 100644 --- a/src/traces/scattergl/index.js +++ b/src/traces/scattergl/index.js @@ -390,6 +390,19 @@ function plot(gd, subplot, cdata) { // update main marker options if(scene.glText) { + if(scene.count > scene.glText.length) { + // add gl text marker + var textsToAdd = scene.count - scene.glText.length; + for(i = 0; i < textsToAdd; i++) { + scene.glText.push(new Text(regl)); + } + } else if(scene.count < scene.glText.length) { + // remove gl text marker + var textsToRemove = scene.glText.length - scene.count; + var removedTexts = scene.glText.splice(scene.count, textsToRemove); + removedTexts.forEach(function(text) { text.destroy(); }); + } + for(i = 0; i < scene.count; i++) { scene.glText[i].update(scene.textOptions[i]); } diff --git a/test/jasmine/tests/scattergl_test.js b/test/jasmine/tests/scattergl_test.js new file mode 100644 index 00000000000..5cea5515c4c --- /dev/null +++ b/test/jasmine/tests/scattergl_test.js @@ -0,0 +1,97 @@ +var Plotly = require('@lib/index'); +var createGraphDiv = require('../assets/create_graph_div'); +var destroyGraphDiv = require('../assets/destroy_graph_div'); +var failTest = require('../assets/fail_test'); + +describe('end-to-end scattergl tests', function() { + var gd; + + beforeEach(function() { + gd = createGraphDiv(); + }); + + afterEach(destroyGraphDiv); + + it('should create a plot with text labels', function(done) { + Plotly.react(gd, [{ + type: 'scattergl', + mode: 'text+lines', + x: [1, 2, 3, 4, 5, 6, 7], + y: [2, 3, 4, 5, 6, 7, 8], + text: 'Test' + }]).then(function() { + var fullLayout = gd._fullLayout; + var subplot = fullLayout._plots.xy; + var scene = subplot._scene; + expect(scene.glText.length).toEqual(1); + }).catch(failTest).then(done); + }); + + it('should update a plot with text labels', function(done) { + Plotly.react(gd, [{ + type: 'scattergl', + mode: 'text+lines', + x: [1, 2, 3, 4, 5, 6, 7], + y: [2, 3, 4, 5, 6, 7, 8], + text: 'Test' + }]).then(function() { + var fullLayout = gd._fullLayout; + var subplot = fullLayout._plots.xy; + var scene = subplot._scene; + expect(scene.glText.length).toEqual(1); + + // add plots + return Plotly.react(gd, [ + { + type: 'scattergl', + mode: 'text+lines', + x: [1, 2, 3, 4, 5, 6, 7], + y: [2, 3, 4, 5, 6, 7, 8], + text: 'Test' + }, + { + type: 'scattergl', + mode: 'text+lines', + x: [1, 2, 3, 4, 5, 6, 7], + y: [3, 4, 5, 6, 7, 8, 9], + text: 'Test 2' + }, + { + type: 'scattergl', + mode: 'text+lines', + x: [1, 2, 3, 4, 5, 6, 7], + y: [4, 5, 6, 7, 8, 9, 10], + text: 'Test 3' + } + ]); + }).then(function() { + var fullLayout = gd._fullLayout; + var subplot = fullLayout._plots.xy; + var scene = subplot._scene; + expect(scene.glText.length).toEqual(3); + + // remove plots + return Plotly.react(gd, [ + { + type: 'scattergl', + mode: 'text+lines', + x: [1, 2, 3, 4, 5, 6, 7], + y: [2, 3, 4, 5, 6, 7, 8], + text: 'Test' + }, + { + type: 'scattergl', + mode: 'text+lines', + x: [1, 2, 3, 4, 5, 6, 7], + y: [3, 4, 5, 6, 7, 8, 9], + text: 'Test 2' + } + ]); + }).then(function() { + var fullLayout = gd._fullLayout; + var subplot = fullLayout._plots.xy; + var scene = subplot._scene; + expect(scene.glText.length).toEqual(2); + }).catch(failTest).then(done); + }); +});