JSXGraph: Move grouped objects by code, not by mouse

Question

I would like to move the points in a group by some dedicated code, however moving a group seems to be possible only by mouse events.

In more detail, I have a group containing the vertices of a polygon and some extra points. On "mouseup" of the polygon I call the following code, which should move the 0th vertex to a grid point along with all other points in the group.

    var dx=this.vertices[0].X(); dx-=Math.floor(dx);
    var dy=this.vertices[0].Y(); dy-=Math.floor(dy);
    var obj=this.grp.objects; // I added the group with the polygon and extra points as "grp" attribute to the polygon
    for (var i=0; i<obj.length; i++) {
      obj[i].moveTo([obj[i].X()-dx, obj[i].Y()-dy]);
    }

Neither the polygon vertices nor the other points change their positions.

Any suggestion what I am doing wrong? Is a jsxgraph-group not the right object for this? Any work-around, maybe calling an EventEmitter on any of the grouped points?

Answer 1

If you intent that the first polygon vertex should only attain integer valued coordinates then there are (at least) two possibilities, both use a group : Your approach using a group works fine, but it suffices to move only the first point. The other vertices will follow automatically because of the group property.

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

var p1 = board.create('point', [1, -1]);
var p2 = board.create('point', [2.5, -2]);
var p3 = board.create('point', [1, -3]);
var pol = board.create('polygon', [p1, p2, p3], {hasInnerPoints: true});

var group = board.create('group',[p1, p2, p3]);

pol.on('up', function() {
    var dx = Math.round(this.vertices[0].X());
    var dy = Math.round(this.vertices[0].Y());

    p1.moveTo([dx, dy]);
});

See it live at https://jsfiddle.net/4gzhb127/ .

The other approach is to simply give the first vertext the attribute snapToGrid: true , see it live at https://jsfiddle.net/bo7aks30/ :

    const board = JXG.JSXGraph.initBoard('jxgbox', { 
        boundingbox: [-5, 5, 5, -5], axis:true
    });
var p1 = board.create('point', [1, -1], {snapToGrid: true});
var p2 = board.create('point', [2.5, -2]);
var p3 = board.create('point', [1, -3]);
var pol = board.create('polygon', [p1, p2, p3], {hasInnerPoints: true});
var group = board.create('group',[p1, p2, p3]);    

Answer 2

In addition, I tried something similar with rotations of the group. Just in case someone wants to do the same in the future, you only need to modify Alfred's first approach a bit:

    ...
    var pol = board.create('polygon', [p1, p2, p3], {hasInnerPoints: true});

    var group = board.create('group',[p1, p2, p3]);
    group.addRotationPoint(p2);

    pol.on('up', function() {
            var cx=0, cy=0;
        for (var i=0; i<3; i++) {
            cx+=this.vertices[i].X()/3;
            cy+=this.vertices[i].Y()/3;
        }
        var angle=Math.PI/8;
        var cos=Math.cos(angle), sin=Math.sin(angle);
        var dx=this.vertices[1].X()-cx,
                    dy=this.vertices[1].Y()-cy;
        var xrot = cx+cos*dx-sin*dy;
        var yrot = cy+sin*dx+cos*dy;

        p2.moveTo([xrot,yrot]);
    });```