When trying to redraw, the position of the node/group doesn't update on the jsPlumb 6.81.0.

The event is fired correctly, but the updateNode or Group dooes not do anything on the position.

May I know what we need to do to make it work correctly ?

surface?.bind(EVENT_NODE_MOVE, (event: VertexMovedParams<unknown>) => {
    const group = toolkit?.getGroup(`group-${event.vertex.id}`);
    console.log(group);
    if (group) {
        toolkit?.updateGroup(group, {
        left: event.pos.x - 8,
        top: event.pos.y + 217,
    });
    //surface.repaint(group, true);
}
});

I'm trying to make move my node programmatically with the bind event.

When trying to redraw, the position of the node/group doesn't update on the jsPlumb 6.81.0.

The event is fired correctly, but the updateNode or Group dooes not do anything on the position.

May I know what we need to do to make it work correctly ?

surface?.bind(EVENT_NODE_MOVE, (event: VertexMovedParams<unknown>) => {
    const group = toolkit?.getGroup(`group-${event.vertex.id}`);
    console.log(group);
    if (group) {
        toolkit?.updateGroup(group, {
        left: event.pos.x - 8,
        top: event.pos.y + 217,
    });
    //surface.repaint(group, true);
}
});

I'm trying to make move my node programmatically with the bind event.

• angular
• jsplumb
• angular18

1 Answer 1

To programmatically update the position of a node or group in jsPlumb, you must update both the toolkit model and the DOM element's position, as jsPlumb does not automatically sync rendering with model updates.

surface?.bind(EVENT_NODE_MOVE, (event: VertexMovedParams<unknown>) => {
    const group = toolkit?.getGroup(`group-${event.vertex.id}`);
    console.log(group);
    
    if (group) {
        toolkit?.updateGroup(group, {
            left: event.pos.x - 8,
            top: event.pos.y + 217,
        });

        // Update the DOM element's position programmatically
        const domElement = surface?.getRenderedGroup(group); // Get the rendered DOM element
        if (domElement) {
            domElement.style.left = `${event.pos.x - 8}px`;
            domElement.style.top = `${event.pos.y + 217}px`;
        }

        surface.repaint(group, true);
    }
});