VisJs Timeline: How to show updated start/endtime in the timeline?

Question

I have a timeline where I have nodes one after another like A-B-C-D-E. If a user moves for example the B node to the right, all the other nodes have to move accordingly, to prevent overlapping and have the right order. I do this with the onMoving : function. This is working on the code side, however the changes are only visible if I either move the timeline in any direction or zoom in or out. It seems like the direct update is missing, because after moving or zooming, all the nodes are at their correct spots. So the data/model is updated correctly but the changes are only visible in the timeline after zooming or moving.

I tried inserting a timeline.redraw() into the onMoving function and I tried redrawing in the items.on('update', function). I also tried using the itemsData.update() function mentioned in another SO answer (see the commented out code line below), nothing seems to work.

The strange thing is that it IS updating BUT only after moving or zooming once.

Here is my full code for both of the functions/event handlers:

onMoving : function (item, callback) {

    let nodes = viewModelCutover.timeline.timelineObject.itemSet.items;
    let node = nodes[item.id];

    let distanceMoved = node.data.start.valueOf() - item.start.valueOf()
    
    for (let nodeObject in nodes) {
        nodes[nodeObject]["data"]["start"] = new Date(nodes[nodeObject]["data"]["start"].valueOf() - distanceMoved);
        if (nodes[nodeObject]["data"]["end"]) {
            nodes[nodeObject]["data"]["end"] = new Date(nodes[nodeObject]["data"]["end"].valueOf() - distanceMoved);
        }
        //viewModelCutover.timeline.timelineObject.itemSet.itemsData.update(nodes[nodeObject]);
    }

    //viewModelCutover.timeline.timelineObject.redraw()
    callback(item); // send back adjusted item
}

...

items.on('update', function (event, properties) {
    viewModelCutover.timeline.timelineObject.redraw();
});

Maybe someone has an idea on what I am missing here or doing wrong. Thanks in advance!

Answer 1

I found the problem:

let nodes = viewModelCutover.timeline.timelineObject.itemSet.items;

This call was not referencing to the original object which was created with the vis.DataSet constructor but rather the same content as a regular array.