Mirrors/Chart.js
2
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2026-03-15 04:36:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

Trigger legend onLeave when the mouse leaves the canvas (#10301)

Browse Source
This commit is contained in:
Evert Timberg
2022-04-15 19:36:42 -04:00
committed by GitHub
parent 5c3dc932b6
commit 54dcd6a6d3
2 changed files with 42 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/plugins/plugin.legend.js
View File

@@ -524,7 +524,7 @@ export class Legend extends Element {
// Chart event already has relative position in it
const hoveredItem = this._getLegendItemAt(e.x, e.y);
if (e.type === 'mousemove') {
if (e.type === 'mousemove' || e.type === 'mouseout') {
const previous = this._hoveredItem;
const sameItem = itemsEqual(previous, hoveredItem);
if (previous && !sameItem) {
@@ -543,7 +543,7 @@ export class Legend extends Element {
}
function isListened(type, opts) {
if (type === 'mousemove' && (opts.onHover || opts.onLeave)) {
if ((type === 'mousemove' || type === 'mouseout') && (opts.onHover || opts.onLeave)) {
return true;
}
if (opts.onClick && (type === 'click' || type === 'mouseup')) {

40
test/specs/plugin.legend.tests.js
View File

@@ -997,6 +997,46 @@ describe('Legend block tests', function() {
expect(leaveItem).toBe(chart.legend.legendItems[0]);
});
it('should call onLeave when the mouse leaves the canvas', async function() {
var hoverItem = null;
var leaveItem = null;
var chart = acquireChart({
type: 'line',
data: {
labels: ['A', 'B', 'C', 'D'],
datasets: [{
data: [10, 20, 30, 100]
}]
},
options: {
plugins: {
legend: {
onHover: function(_, item) {
hoverItem = item;
},
onLeave: function(_, item) {
leaveItem = item;
}
}
}
}
});
var hb = chart.legend.legendHitBoxes[0];
var el = {
x: hb.left + (hb.width / 2),
y: hb.top + (hb.height / 2)
};
await jasmine.triggerMouseEvent(chart, 'mousemove', el);
expect(hoverItem).toBe(chart.legend.legendItems[0]);
await jasmine.triggerMouseEvent(chart, 'mouseout');
expect(leaveItem).toBe(chart.legend.legendItems[0]);
});
it('should call onClick for the correct item when in RTL mode', async function() {
var clickItem = null;