diff --git a/package-lock.json b/package-lock.json index d804fafa8ab..af6a963adff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4932,9 +4932,9 @@ } }, "gl-mesh3d": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/gl-mesh3d/-/gl-mesh3d-2.2.0.tgz", - "integrity": "sha512-wO6EKjBUo/k7ZLGsMACWGETjmjfsGwwoDWEKjDbjyjo1qPvgkTQQB9Y8p+OKGjE6GeihsfQuoqGBUTu9tiAOmg==", + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/gl-mesh3d/-/gl-mesh3d-2.2.1.tgz", + "integrity": "sha512-5CNkp/0ojfhgOmVPzostNha166SQWnyESDLMmpJUK9vEgszNVw/jr08OXqKqPpeI98ptM28I1Fls6fU68YsLeA==", "requires": { "barycentric": "^1.0.1", "colormap": "^2.3.1", diff --git a/package.json b/package.json index f53eb27d1f9..11a277ace72 100644 --- a/package.json +++ b/package.json @@ -80,7 +80,7 @@ "gl-heatmap2d": "^1.0.5", "gl-line3d": "^1.1.11", "gl-mat4": "^1.2.0", - "gl-mesh3d": "^2.2.0", + "gl-mesh3d": "^2.2.1", "gl-plot2d": "^1.4.2", "gl-plot3d": "^2.4.0", "gl-pointcloud2d": "^1.0.2", diff --git a/test/image/baselines/gl3d_mesh3d_coloring.png b/test/image/baselines/gl3d_mesh3d_coloring.png new file mode 100644 index 00000000000..9249a3800bc Binary files /dev/null and b/test/image/baselines/gl3d_mesh3d_coloring.png differ diff --git a/test/image/mocks/gl3d_mesh3d_coloring.json b/test/image/mocks/gl3d_mesh3d_coloring.json new file mode 100644 index 00000000000..1cc56d1d2e3 --- /dev/null +++ b/test/image/mocks/gl3d_mesh3d_coloring.json @@ -0,0 +1,139 @@ +{ + "data": [{ + "showlegend": true, + "x": [0, 1, 0, 1, 0, 1, 0, 1], + "y": [0, 0, 1, 1, 0, 0, 1, 1], + "z": [0, 0, 0, 0, 1, 1, 1, 1], + "i": [0, 3, 4, 7, 0, 6, 1, 7, 0, 5, 2, 7], + "j": [1, 2, 5, 6, 2, 4, 3, 5, 4, 1, 6, 3], + "k": [3, 0, 7, 4, 6, 0, 7, 1, 5, 0, 7, 2], + "vertexcolor": ["#000", "#00F", "#0F0", "#0FF", "#F00", "#F0F", "#FF0", "#FFF"], + "hovertemplate": "x: %{x}
y: %{y}
z: %{z}
vertex color: %{vertexcolor}", + "flatshading": true, + "lightposition": { "x": 1000, "y": 1000, "z": 0 }, + "type": "mesh3d", + "name": "vertex color", + "scene": "scene1" + }, { + "showlegend": true, + "x": [0, 1, 0, 1, 0, 1, 0, 1], + "y": [0, 0, 1, 1, 0, 0, 1, 1], + "z": [0, 0, 0, 0, 1, 1, 1, 1], + "i": [0, 3, 4, 7, 0, 6, 1, 7, 0, 5, 2, 7], + "j": [1, 2, 5, 6, 2, 4, 3, 5, 4, 1, 6, 3], + "k": [3, 0, 7, 4, 6, 0, 7, 1, 5, 0, 7, 2], + "facecolor": [ + "#000", "#000", + "#00F", "#00F", + "#0F0", "#0F0", + "#0FF", "#0FF", + "#F00", "#F00", + "#F0F", "#F0F", + "#FF0", "#FF0", + "#FFF", "#FFF" + ], + "hovertemplate": "x: %{x}
y: %{y}
z: %{z}
face color: %{facecolor}", + "flatshading": true, + "lightposition": { "x": 1000, "y": 1000, "z": 0 }, + "type": "mesh3d", + "name": "face color", + "scene": "scene2" + }, { + "showlegend": true, + "x": [0, 1, 0, 1, 0, 1, 0, 1], + "y": [0, 0, 1, 1, 0, 0, 1, 1], + "z": [0, 0, 0, 0, 1, 1, 1, 1], + "i": [0, 3, 4, 7, 0, 6, 1, 7, 0, 5, 2, 7], + "j": [1, 2, 5, 6, 2, 4, 3, 5, 4, 1, 6, 3], + "k": [3, 0, 7, 4, 6, 0, 7, 1, 5, 0, 7, 2], + "intensity": [1, 2, 3, 4, 5, 6, 7, 8], + "hovertemplate": "x: %{x}
y: %{y}
z: %{z}
vertex intensity: %{intensity}", + "showscale": true, + "colorscale": "Portland", + "colorbar": { + "title": "vertex
intensity", + "len": 0.5, + "y": 0, + "yanchor": "bottom" + }, + "flatshading": true, + "lightposition": { "x": 1000, "y": 1000, "z": 0 }, + "type": "mesh3d", + "name": "vertex intensity", + "scene": "scene3" + }, { + "showlegend": true, + "x": [0, 1, 0, 1, 0, 1, 0, 1], + "y": [0, 0, 1, 1, 0, 0, 1, 1], + "z": [0, 0, 0, 0, 1, 1, 1, 1], + "i": [0, 3, 4, 7, 0, 6, 1, 7, 0, 5, 2, 7], + "j": [1, 2, 5, 6, 2, 4, 3, 5, 4, 1, 6, 3], + "k": [3, 0, 7, 4, 6, 0, 7, 1, 5, 0, 7, 2], + "intensity": [ + 1, 1, + 2, 2, + 3, 3, + 4, 4, + 5, 5, + 6, 6 + ], + "intensitymode": "cell", + "hovertemplate": "x: %{x}
y: %{y}
z: %{z}
cell intensity: %{intensity}", + "showscale": true, + "colorbar": { + "title": "cell
intensity", + "len": 0.5, + "y": 0.5, + "yanchor": "bottom" + }, + "flatshading": true, + "lightposition": { "x": 1000, "y": 1000, "z": 0 }, + "type": "mesh3d", + "name": "cell intensity", + "scene": "scene4" + }], + "layout": { + "width": 800, + "height": 800, + "legend": { + "bgcolor": "#eee", + "orientation": "h", + "title": { + "text": "mesh3d with different coloring:", + "side": "top left" + } + }, + "scene1": { + "bgcolor": "#eee", + "domain": { + "x": [0, 0.5], + "y": [0, 0.5] + }, + "camera": { "eye": { "x": 2, "y": -1.5, "z": 1 } } + }, + "scene2": { + "bgcolor": "#eee", + "domain": { + "x": [0, 0.5], + "y": [0.5, 1] + }, + "camera": { "eye": { "x": 2, "y": -1.5, "z": 1 } } + }, + "scene3": { + "bgcolor": "#eee", + "domain": { + "x": [0.5, 1], + "y": [0, 0.5] + }, + "camera": { "eye": { "x": 2, "y": -1.5, "z": 1 } } + }, + "scene4": { + "bgcolor": "#eee", + "domain": { + "x": [0.5, 1], + "y": [0.5, 1] + }, + "camera": { "eye": { "x": 2, "y": -1.5, "z": 1 } } + } + } +} diff --git a/test/jasmine/tests/gl3d_hover_click_test.js b/test/jasmine/tests/gl3d_hover_click_test.js index 34ff57afc14..1c78346db90 100644 --- a/test/jasmine/tests/gl3d_hover_click_test.js +++ b/test/jasmine/tests/gl3d_hover_click_test.js @@ -13,6 +13,7 @@ var assertHoverLabelStyle = customAssertions.assertHoverLabelStyle; var assertHoverLabelContent = customAssertions.assertHoverLabelContent; var mock = require('@mocks/gl3d_marker-arrays.json'); +var mesh3dcoloringMock = require('@mocks/gl3d_mesh3d_coloring.json'); var multipleScatter3dMock = require('@mocks/gl3d_multiple-scatter3d-traces.json'); // lines, markers, text, error bars and surfaces each @@ -466,7 +467,7 @@ describe('Test gl3d trace click/hover:', function() { .then(_click) .then(delay(20)) .then(function() { - assertEventData(134.03, -163.59, -163.59, 0, 3); + assertEventData(140.72, -96.97, -96.97, 0, 2); }) .then(done); }); @@ -501,21 +502,21 @@ describe('Test gl3d trace click/hover:', function() { .then(_hover) .then(delay(20)) .then(function() { - assertHoverText('x: 4', 'y: 5', 'z: 3.5', 'ts: 4\nhz: 5\nftt:3.5'); + assertHoverText('x: 3', 'y: 4', 'z: 5', 'ts: 3\nhz: 4\nftt:5'); }) .then(function() { return Plotly.restyle(gd, 'hoverinfo', 'x+y'); }) .then(delay(20)) .then(function() { - assertHoverText('(4, 5)'); + assertHoverText('(3, 4)'); }) .then(function() { return Plotly.restyle(gd, 'hoverinfo', 'text'); }) .then(delay(20)) .then(function() { - assertHoverText('ts: 4\nhz: 5\nftt:3.5'); + assertHoverText('ts: 3\nhz: 4\nftt:5'); }) .then(function() { return Plotly.restyle(gd, 'text', 'yo!'); @@ -531,14 +532,67 @@ describe('Test gl3d trace click/hover:', function() { }) .then(delay(20)) .then(function() { - assertHoverText(null, null, null, 'ts: 4\nhz: 5\nftt:3.5 !!'); + assertHoverText(null, null, null, 'ts: 3\nhz: 4\nftt:5 !!'); }) .then(function() { return Plotly.restyle(gd, 'hovertemplate', '%{x}-%{y}-%{z}'); }) .then(delay(20)) .then(function() { - assertHoverText(null, null, null, '4-5-3.5'); + assertHoverText(null, null, null, '3-4-5'); + }) + .catch(failTest) + .then(done); + }); + + it('@gl should display correct face colors', function(done) { + var fig = mesh3dcoloringMock; + + Plotly.newPlot(gd, fig) + .then(delay(20)) + .then(function() { mouseEvent('mouseover', 200, 200); }) + .then(delay(20)) + .then(function() { + assertHoverText( + 'x: 1', + 'y: 0', + 'z: 1', + 'face color: #0F0', + 'face color' + ); + }) + .then(function() { mouseEvent('mouseover', 300, 200); }) + .then(delay(20)) + .then(function() { + assertHoverText( + 'x: 1', + 'y: 1', + 'z: 1', + 'face color: #0FF', + 'face color' + ); + }) + .then(function() { mouseEvent('mouseover', 300, 300); }) + .then(delay(20)) + .then(function() { + assertHoverText( + 'x: 1', + 'y: 1', + 'z: 0', + 'face color: #00F', + 'face color' + ); + }) + .then(function() { mouseEvent('mouseover', 200, 300); }) + .then(delay(20)) + .then(function() { + assertHoverText( + 'x: 0', + 'y: 0', + 'z: 0', + 'face color: #000', + 'face color' + ); }) .catch(failTest) .then(done); diff --git a/test/jasmine/tests/isosurface_test.js b/test/jasmine/tests/isosurface_test.js index ade91c673af..2421ca8460d 100644 --- a/test/jasmine/tests/isosurface_test.js +++ b/test/jasmine/tests/isosurface_test.js @@ -324,16 +324,27 @@ describe('Test isosurface', function() { function _hover1() { mouseEvent('mouseover', 200, 200); + return delay(20)(); } function _hover2() { mouseEvent('mouseover', 100, 100); + return delay(20)(); + } + + function _hover3() { + mouseEvent('mouseover', 300, 150); + return delay(20)(); + } + + function _hover4() { + mouseEvent('mouseover', 150, 300); + return delay(20)(); } Plotly.plot(gd, fig) .then(delay(20)) .then(_hover1) - .then(delay(20)) .then(function() { assertHoverLabelContent({ nums: [ @@ -346,47 +357,61 @@ describe('Test isosurface', function() { }) .then(delay(20)) .then(_hover2) - .then(delay(20)) .then(function() { assertHoverLabelContent({ nums: [ - 'x: 0.4', + 'x: 0.3', 'y: 0.001', - 'z: −8', - 'value: −1.28' + 'z: −16', + 'value: −0.27' ].join('\n') }); }) + .then(delay(20)) + .then(_hover3) .then(function() { - return Plotly.restyle(gd, 'hovertext', [ - fig.data[0].value.map(function(v) { return '!! ' + v + ' !!'; }) - ]); + assertHoverLabelContent({ + nums: [ + 'x: 0.2', + 'y: 100μ', + 'z: −16', + 'value: −1.12' + ].join('\n') + }); }) .then(delay(20)) - .then(_hover2) + .then(_hover4) .then(function() { assertHoverLabelContent({ nums: [ 'x: 0.4', - 'y: 0.001', - 'z: −8', - 'value: −1.28', - '!! -1.28 !!' + 'y: 100μ', + 'z: −4', + 'value: −1.3' ].join('\n') }); }) .then(function() { - return Plotly.restyle(gd, 'hovertemplate', '%{value}
(%{x},%{y},%{z})!!'); + return Plotly.restyle(gd, 'hovertext', [ + fig.data[0].value.map(function(v) { return '!! ' + v + ' !!'; }) + ]); }) .then(delay(20)) - .then(_hover2) - .then(delay(20)) + .then(_hover4) .then(function() { assertHoverLabelContent({ - nums: '−1.28\n(0.4,0.001,−8)', - name: '!!' + nums: [ + 'x: 0.4', + 'y: 100μ', + 'z: −4', + 'value: −1.3', + '!! -1.3 !!' + ].join('\n') }); }) + .then(function() { + return Plotly.restyle(gd, 'hovertemplate', '%{value}
(%{x},%{y},%{z})!!'); + }) .catch(failTest) .then(done); }); diff --git a/test/jasmine/tests/volume_test.js b/test/jasmine/tests/volume_test.js index 8965220c9ef..8a3ecf6be89 100644 --- a/test/jasmine/tests/volume_test.js +++ b/test/jasmine/tests/volume_test.js @@ -351,8 +351,8 @@ describe('Test volume', function() { nums: [ 'x: 0.4', 'y: 100μ', - 'z: −8', - 'value: −1.31' + 'z: −16', + 'value: −1.32' ].join('\n') }); }) @@ -361,10 +361,10 @@ describe('Test volume', function() { .then(function() { assertHoverLabelContent({ nums: [ - 'x: 0.4', + 'x: 0.3', 'y: 0.001', 'z: −16', - 'value: −0.32' + 'value: −0.27' ].join('\n') }); }) @@ -375,8 +375,8 @@ describe('Test volume', function() { nums: [ 'x: 0.3', 'y: 100μ', - 'z: −8', - 'value: −1.19' + 'z: −16', + 'value: −1.2' ].join('\n') }); }) @@ -386,9 +386,9 @@ describe('Test volume', function() { assertHoverLabelContent({ nums: [ 'x: 0.4', - 'y: 0.001', - 'z: −2', - 'value: −1.26' + 'y: 100μ', + 'z: −4', + 'value: −1.3' ].join('\n') }); }) @@ -403,10 +403,10 @@ describe('Test volume', function() { assertHoverLabelContent({ nums: [ 'x: 0.4', - 'y: 0.001', - 'z: −2', - 'value: −1.26', - '!! -1.26 !!' + 'y: 100μ', + 'z: −4', + 'value: −1.3', + '!! -1.3 !!' ].join('\n') }); })