Is there a way to increase hover hitbox size of elements without affecting visProps?

[Hovo Menejyan]

I want to increase the hover area for points. For example, take a look at this JSFiddle, the top point has a much better hover area

http://jsfiddle.net/21y3spko/34/

As you can see, I achieve this by actually setting a tick strokeWidth and making it transparent. This works fine but the 

issue is that if I want a point with a border, I am out of luck. I need to use the strokecolor for creating a border color for the point and at this
point, I can`t think of any way to increase the hitbox size for the point. What can I do in this scenario?

I need a way to either increase the hitbox size without touching the stroke attribute or to add border to a dot without touching the stroke attribute.

Thanks.

Best wishes,

Hovo M.
VP Eng, ClassCalc

[Murray]

Here's one possibility.  You can use 2 points one over the other and play with the size(s), strokes and strokewidths, and fills to get the effect you want. 

http://jsfiddle.net/mbourne/8ef70mtz/

I'm not sure exactly what you want - it may be possible (and better, of course) to do it with one dot.

Regards

Murray

[Alfred Wassermann]

For the time being, it is only possible to increase the "hover area" for the whole construction.

You can overwrite the values of the JXG.Options.precision opbject, see https://jsxgraph.org/docs/symbols/JXG.Options.html#.precision.

For example,

JXG.Options.precision.mouse = 20;
var board = JXG.JSXGraph.initBoard('box', {boundingbox:boxDimensions, axis:true});

would increase the hover radius of a point to 20 points. See http://jsfiddle.net/y0pk9c4b/

Best wishes,

Alfred

[Hovo Menejyan]

Alfred, So JXG.Options.precision.mouse = 20; affects all elements like curves as well huh? Is there a way to set this only for points ?

Also, any possibility to add a way to increase the hitboxes for points specifically from visProp attributes of points ?

[Alfred Wassermann]

Sorry, I was fooled by that invisible stroke line in your jsfiddle.

Indeed, this is an error on devices with pointer events (i.e. on nearly all devices).

The precision was set on down events only, not on move events. This is fixed now.

A workaround - for the moment - is to set `JXG.Options.precision.hasPoint = 20;` instead.

I fixed the problem in the sources. But beware the nightly build will create a lot of debug message, because I'm refactoring the curve plotting algorithm heavily.

Best wishes and thank you for pointing this out,

Alfred

[Hovo Menejyan]

Alfred, although

JXG.Options.precision.hasPoint = 20;

in combination with

JXG.Options.precision.mouse = 20; //If this guywill increase the area of touch down

will achieve exactly what I am looking for, there is an issue with not having control over a particular type of element.
For example, if I need to increase this area for points only, it won`t be possible, curves will be affected as well.

Are there any plans to address this and at least introduce modifiers for points and curves specifically since these are the most widely used element types?

Thanks.

Best wishes,

Hovo M.
VP Eng, ClassCalc

[Alfred Wassermann]

Finally! In the next nightly build, JSXGraph elements allow the new attribute `precision`. If enabled (by setting `enabled:true`),

these values overwrite the board-wide  values for the precision.

Example:

var li1 = board.create('line', [1, 1, 1], {strokeWidth: 3, 

            precision: {

                enabled: true,

                mouse: 50,

                touch: 70,

                pen: 50

            }

         });

As it is now, it may be problematic if labels with autoposition are used. 

Further, it only works for primitive objects like points, lines and not for composite objects.

Please, tell me your experience.

Best wishes,

Alfred

[Alfred Wassermann]

Sorry, I had to change the API again, so that his attribute acts more similar to other situations.

The attribute element.precision now takes either the value

'inherit'

or an object of the form:

precision: {

   touch: 15,

   mouse: 4,

   pen: 4

}

Before it had the the flag precision { enabled: true/false, ...}

Best wishes,

Alfred

[Hovo Menejyan]

Perfect, had the chance to play around with this and it looks good, at least for what I intended to use this for. Thank you so much for the implementation.

As a side note, when you said it only works for primitive objects, does it really only include lines and points? How about curves? 
It seems like it did work for curves but from what I tested, the results were not consistent.

[Alfred Wassermann]

Sounds good!

To be more precise on primitive objects:

The precision-object can be supplied as attribute to elements which are of one of the following types:

circle, curve, image line, point, text, and ticks.

If this attributes does not work for curves, then there might be a different problem.

Best wishes,

Alfred