Commit 7862a61

authored

Merge pull request #6953 from plotly/hover-zorder

Fix closest hover and click+select with `zorder`

2 parents bc0a6fe + 7a8e35e commit 7862a61Copy full SHA for 7862a61

File tree

+59

-4

lines changed

+59

-4

lines changed

Lines changed: 2 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
`1`		-- Add a new attribute `zorder` to SVG based Cartesian traces (not to WebGL traces). Traces with higher `zorder` values are drawn in front of traces with lower `zorder` values. This feature was anonymously sponsored: thank you to our sponsor!
	`1`	`+ - Add zorder attribute to control stacking order of SVG traces drawn into cartesian subplots [[#6918](https://github.com/plotly/plotly.js/pull/6918), [#6953](https://github.com/plotly/plotly.js/pull/6953)],`
	`2`	`+ This feature was anonymously sponsored: thank you to our sponsor!`

Lines changed: 10 additions & 2 deletions

Original file line number	Diff line number	Diff line change
`@@ -381,8 +381,16 @@ function _hover(gd, evt, subplot, noHoverEvent, eventTarget) {`
`381`	`381`	`}`
`382`	`382`	`}`
`383`	`383`	`} else {`
`384`		`- for(curvenum = 0; curvenum < gd.calcdata.length; curvenum++) {`
`385`		`- cd = gd.calcdata[curvenum];`
	`384`	`+ // take into account zorder`
	`385`	`+ var zorderedCalcdata = gd.calcdata.slice();`
	`386`	`+ zorderedCalcdata.sort(function(a, b) {`
	`387`	`+ var aZorder = a[0].trace.zorder \|\| 0;`
	`388`	`+ var bZorder = b[0].trace.zorder \|\| 0;`
	`389`	`+ return aZorder - bZorder;`
	`390`	`+ });`
	`391`	`+`
	`392`	`+ for(curvenum = 0; curvenum < zorderedCalcdata.length; curvenum++) {`
	`393`	`+ cd = zorderedCalcdata[curvenum];`
`386`	`394`	`trace = cd[0].trace;`
`387`	`395`	`if(trace.hoverinfo !== 'skip' && helpers.isTraceInSubplots(trace, subplots)) {`
`388`	`396`	`searchData.push(cd);`

Lines changed: 46 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -4780,6 +4780,52 @@ describe('hover distance', function() {`
`4780`	`4780`	`});`
`4781`	`4781`	`});`
`4782`	`4782`
	`4783`	`+describe('hover working with zorder', function() {`
	`4784`	`+ 'use strict';`
	`4785`	`+`
	`4786`	`+ var mock = {`
	`4787`	`+ data: [{`
	`4788`	`+ zorder: 100,`
	`4789`	`+ marker: {size: 50},`
	`4790`	`+ text: ['A', 'B'],`
	`4791`	`+ y: [0, 1]`
	`4792`	`+ }, {`
	`4793`	`+ marker: {size: 50},`
	`4794`	`+ text: ['C', 'D'],`
	`4795`	`+ y: [2, 1]`
	`4796`	`+ }],`
	`4797`	`+ layout: {`
	`4798`	`+ width: 400,`
	`4799`	`+ height: 400,`
	`4800`	`+ showlegend: false,`
	`4801`	`+ hovermode: 'closest'`
	`4802`	`+ }`
	`4803`	`+ };`
	`4804`	`+`
	`4805`	`+ afterEach(destroyGraphDiv);`
	`4806`	`+`
	`4807`	`+ beforeEach(function(done) {`
	`4808`	`+ Plotly.newPlot(createGraphDiv(), mock).then(done);`
	`4809`	`+ });`
	`4810`	`+`
	`4811`	`+ it('pick the trace on top', function() {`
	`4812`	`+ var gd = document.getElementById('graph');`
	`4813`	`+ Fx.hover('graph', {xval: 1}, 'xy');`
	`4814`	`+`
	`4815`	`+ expect(gd._hoverdata.length).toEqual(1);`
	`4816`	`+`
	`4817`	`+ assertHoverLabelContent({`
	`4818`	`+ nums: '(1, 1)\nB',`
	`4819`	`+ name: 'trace 0'`
	`4820`	`+ });`
	`4821`	`+`
	`4822`	`+ var hoverTrace = gd._hoverdata[0];`
	`4823`	`+ expect(hoverTrace.text).toEqual('B');`
	`4824`	`+ expect(hoverTrace.curveNumber).toEqual(0);`
	`4825`	`+ expect(hoverTrace.pointNumber).toEqual(1);`
	`4826`	`+ });`
	`4827`	`+});`
	`4828`	`+`
`4783`	`4829`	`describe('hover label rotation:', function() {`
`4784`	`4830`	`var gd;`
`4785`	`4831`

Lines changed: 1 addition & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -301,7 +301,7 @@ describe('Click-to-select', function() {`
`301`	`301`	`return _immediateClickPt({ x: 130, y: 250 });`
`302`	`302`	`})`
`303`	`303`	`.then(function() {`
`304`		`- assertSelectedPoints([], [1], []);`
	`304`	`+ assertSelectedPoints([0], [], []);`
`305`	`305`	`})`
`306`	`306`	`.then(done, done.fail);`
`307`	`307`	`});`

Comments

(0)