How to Transform Coordinate Grid in JSXGraph

Question

I am trying to transform the coordinate grid while keeping the original grid in the background using the slider and grid.

So far I have managed to do this, but for some reason, when I move the slider, the grid does not move until I click the navigation buttons in the bottom-left corner, however, point B does move smoothly and automatically. Is there any way to fix this?

 <div id="jxgbox3" class="jxgbox" style="width:500px; height:400px;"></div>
    <script>
     var board = JXG.JSXGraph.initBoard('jxgbox3', {boundingbox: [-12, 7, 12, -7], axis: true}); //boundbox
     var gr = board.create('grid', [], {strokeColor:'red'});
     
     var s = board.create('slider',[[-2,-2],[4,-2],[0,0,0.785398]],{name:'Angle of       Rotation'});  //sliders
     
     var or = board.create('point',[0,0], {name:'A',size:1}); // rotation
     
     rot = board.create('transform', [function(){return s.Value();},or], {type:'rotate'}); 
    
     var a = board.create('point',[2,2], {name:'B',size:2});
     
     rot.bindTo([a,gr]);   
    
  </script>
  

Answer 1

Fortunately, this problem can be solved easily: For performance reasons, grid lines and axis ticks are updated only if the bounding box of the board changes. This behavior can be changed with the attribute needsRegularUpdate.

Here is the fix:

var gr = board.create('grid', [], {
    strokeColor:'red',
    needsRegularUpdate:true
});