Skip to content

Commit

Permalink
fix(point): fix data.onclick working with sensitivity function
Browse files Browse the repository at this point in the history
Fix to consider point.sensitivity as function value when
determining mouse pointer is within the point

Fix #3912
  • Loading branch information
netil authored Nov 14, 2024
1 parent 05e43ed commit 587d71e
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 5 deletions.
9 changes: 6 additions & 3 deletions src/ChartInternal/shape/point.ts
Original file line number Diff line number Diff line change
Expand Up @@ -378,9 +378,12 @@ export default {
const mouse = getPointer(state.event, node);
const element = d3Select(node);
const prefix = this.isCirclePoint(node) ? "c" : "";
const sensitivity = config.point_sensitivity === "radius" ?
let pointSensitivity = config.point_sensitivity;

pointSensitivity = pointSensitivity === "radius" ?
node.getAttribute("r") :
config.point_sensitivity;
(isFunction(pointSensitivity) ? node && pointSensitivity(node) : pointSensitivity);

let cx = +element.attr(`${prefix}x`);
let cy = +element.attr(`${prefix}y`);

Expand All @@ -394,7 +397,7 @@ export default {

return Math.sqrt(
Math.pow(cx - mouse[0], 2) + Math.pow(cy - mouse[1], 2)
) < (r || sensitivity);
) < (r || pointSensitivity);
},

/**
Expand Down
42 changes: 40 additions & 2 deletions test/shape/point-spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -277,7 +277,7 @@ describe("SHAPE POINT", () => {
tooltip: {
grouped: false
}
};
};
});

it("default sensitivity", () => {
Expand Down Expand Up @@ -431,8 +431,46 @@ describe("SHAPE POINT", () => {

expect(args.data.onclick.called).to.be.true;
});
});

it("set options", () => {
args = {
data: {
columns: [
["data1", 450],
],
onclick: sinon.spy(function() {
console.log("3333333")
}),
type: "line"
},
point: {
sensitivity: function(r) {
return 10;
},
r: 10,
focus: {
expand: {
r: 10
}
}
},
};
});

it("should data.onclick callback called.", () => {
const {circles} = chart.$;
const {$el: {eventRect}} = chart.internal;
const rect = circles.node().getBoundingClientRect();

fireEvent(eventRect.node(), "click", {
clientX: 300,
clientY: 40
}, chart);

expect(args.data.onclick.called).to.be.true;
});
});

describe("point.focus.only", () => {
beforeAll(() => {
args = {
Expand Down

0 comments on commit 587d71e

Please sign in to comment.