Disable or change default JSXgraph listeners?

Question

The default drag option will take a point, make the color a little bit grey, && show the coordinates while dragging.

I'd like to change this default functionality to something else and/or disable it, but I haven't been able to find a solution after a lot of searching.

Any chance you guys might know something about this?

Thanks.

Answer 1

The easy answer is, you can

1. set an event handler for the 'drag' event, see https://jsxgraph.org/docs/symbols/JXG.GeometryElement.html for a list of all available events.
2. set all attributes starting with "highlight" to other values, see also https://jsxgraph.org/docs/symbols/JXG.GeometryElement.html for an overview.
3. Highlighting can be turned off by the attribute highlight: false

The more complex question is, how to manipulate the small "infobox" with the point coordinates?

1. For any point you can set the attribute showInfobox:false.
2. You can customize the infobox function, see https://jsfiddle.net/25Lbdrkt/ :

JXG.Options.infobox.anchorY = 'bottom';
JXG.Options.infobox.anchorX = 'right';
JXG.Options.infobox.strokeColor = 'blue';

const board = JXG.JSXGraph.initBoard('jxgbox', { 
    boundingbox: [-5, 5, 5, -5], axis:true
});

board.infobox.distanceX = 0;
board.infobox.distanceY = 10;

board.highlightInfobox = function(x, y , el) {
        this.infobox.setText( x + '<br>' + y + '<br> digits: ' + el.visProp.infoboxdigits );
};

var p = board.create('point', [1, 1], {
            showInfobox: true, 
            infoboxDigits:4
        });