JSXGraph. Limited area of points

Question

On the graph there are several closely spaced points. By hover some points highlighted (it's bug), but infobox correctly showing for one point. Аre there any methods to limit the area of events?

Answer 1

In JSXGraph, the sensitive area of elements is enhanced by purpose to enable a better handling, especially for lines. For points, the sensitive area is a quadrangle with side length r + 2 pixel, where r is the maximum of the radius of the point (in case of a circle shape) and the attribute JXG.Options.precision.hasPoint. The default value of JXG.Options.precision.hasPoint depends on the pointer device type, i.e. either mouse or touch. It can be controlled by setting to small values

JXG.Options.precision.mouse = 1; // default is 4
JXG.Options.precision.touch = 1; // default is 30

before calling JXG.JSXGraph.initBoard().

If you want to define your own sensitive are, the method hasPoint can be overwritten. The default method looks like:

JXG.Point.hasPoint = function (x, y) {
    var coordsScr = this.coords.scrCoords, r;

    r = parseFloat(this.visProp.size) +
        parseFloat(this.visProp.strokewidth) * 0.5;

    if (r < this.board.options.precision.hasPoint) {
        r = this.board.options.precision.hasPoint;
    }

    return ((Math.abs(coordsScr[1] - x) < r + 2) && 
            (Math.abs(coordsScr[2] - y) < r + 2));
};