Bug with not clearing previous touches

[Hovo Menejyan]

I just discovered a new bug in newer versions of JSXGraph which wreaks havoc with our implementation of JSXGraph in our project :) 

Basically, if we call board.fullUpdate() inside board down, the touches resulting from touch-drag actions are not cleared on board up. (You might be wondering why I need to call board.fullUpdate() inside here, in our project it looks a bit different but trust me, I have a reason :) )

The issue can be observed in the following JSFiddle.

http://jsfiddle.net/tqpbchgm/

Steps to reproduce.
Make sure you go to touch mode in the browser to simulate a phone with touch events. On Chrome it`s (Ctrl+Shift+M).

Touch drag anywhere on the board, the board will stop panning and in the console you can see that previously created touch events are not cleared and the program thinks that we are touching the board with multiple fingers.

Alfred, if this is an easy fix, I will be eternally grateful if we can handle this soon, this will allow me to migrate to the newer versions of JSXGraph finally.

Thanks.

Best wishes,

Hovo M.
VP Eng, ClassCalc

[Alfred Wassermann]

Dear Hovo,

this is a fascinating problem.Fortunately, there is a very quick fix:

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

The problem is a little bit involved and I still do not understand all details, but it seems to be like this:

The default value of JXG.Options.board.minimizeReflow is 'svg' or 'all' which means that before the SVG nodes of a construction are updated, the SVG root node is taken out of the DOM and the update is done in a shadow DOM. This results in a certain performance improvement (I did not check if this is performance improvement still exists).

On the other hand, board.fullUpdate() also checks the size of all text elements - with an asynchronous setTimeout call in text.updateSize().

If in your example a down event happens, board.fullUpdate() is triggered. If a down event is followed immediately by a move event, the next board.update()

starts while the timeout call in text.updateSize() has not been finished, yet. But the new board.update() call takes out the svg-root of the DOM.

For some reason, touch events can not handle this situation, however with pointer events it seem to be fine.

In summary, do not use this minimizeReflow optimization in that case.

Best wishes,

Alfred

[Hovo Menejyan]

Thank you very much Alfred.

Do you remember in which scenarios the optimization for minimizeReflow was tested? Just want to make sure I am not loosing some good optimizations by setting it to none.

[Leslie Wong]

Hi Alfred, 

I noticed a phenomenon in my game of life implementation, which may be related to this SVG render bug.

I am using a laptop with a touchscreen. When I am creating and destroying 3*3 points randomly using mouse or finger intermittently, somehow I can not use finger or mouse to create points at some empty crosses. It looks like that the board.create("point") execution has been occupied by the previous mouse or finger-touch event.

V1.2.2 used. 

Please help address this. 

[Hovo Menejyan]

Hi Alfred, thank you for the solution, I tried it and it for sure solves the issue(Although it is worrisome since the bug still exists :) )


I also tried JXG.Options.renderer = 'none'; vs JXG.Options.renderer = 'svg'; speeds by using the following speed test from the JSXGraph wiki Speed Test

Did not notice any speed differences whatsoever. Not sure if this is a good test for this scenario though since I am not even sure what optimizations  JXG.Options.renderer = 'svg'; Introduces.

[Alfred Wassermann]

Dear Hovo,

after testing with that speed test example from the JSXGraph wiki on various systems ad browser, I'm meanwhile convinced that this feature is obsolete now and the default value will be set  to 'none' in future versions.

It seems to even slow down the animation speed.

As I said, it takes out the JSXGraph root node before redrawing and puts it back after the redrawing.

Setting the value to 'all' takes out the complete div, while with 'svg' just the SVG node is taken out of the DOM.

Best wishes,

Alfred