angular - How to programmatically update position of a nodegroup? - Stack Overflow

admin管理员组

文章数量:1393060

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

Share Improve this question Follow edited Mar 12 at 10:11 ahuemmer 2,0591313 gold badges2727 silver badges3636 bronze badges asked Mar 11 at 20:10 Arthur KleinArthur Klein 1

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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);
    }
});

本文标签： angularHow to programmatically update position of a nodegroupStack Overflow