Updating connections after dynamically changing a node

[verloka]

Hi.

When I change the contents of a node, the connection is displayed incorrectly. To fix this, you need to distort the node by moving it. I've call node.update() it does not help. I am using Vue Render.

[vamidi]

Same issue!

[EDIT] I fixed this by adding the new outputs first and then hit this.editor.view.updateConnections({ node: currentNode }); This might not work exactly in your case, because in my case I had basically replace the connection with a new dynamic socket.

example code in my case

        const input = new Input('OptionIn_' + <string>inputs['OptionIn_-1'][0],
					'In ID [ ' + <string>inputs['OptionIn_-1'][0] + ' ]', dialogueOptionSocket);
	// set the value of the old in the new key
	currentNode.addInput(input);
	currentNode.update();

	const output = currentNode.inputs.get('OptionIn_-1').connections[0].output;
	this.editor.removeConnection(currentNode.inputs.get('OptionIn_-1').connections[0]);
	currentNode.removeInput(currentNode.inputs.get('OptionIn_-1'));
	this.editor.connect(output, input);
	this.editor.view.updateConnections({ node: currentNode });
	this.editor.view.resize();

[verloka]

example code in my case

@vamidi this is not an elegant solution. I hope there is an internal method that can solve this problem, or another solution should be invented

[Ni55aN]

await node.update();
this.editor.view.updateConnections({ node })

[verloka]

await node.update();
this.editor.view.updateConnections({ node })

Yes it helps, thanks.

[v1talii-dev]

await node.update();
this.editor.view.updateConnections({ node })

work only if use next code:

async builder(node) {
  // Load data from API and call addInput(), addOutput() functions
  // ...
  
  await node.update();
  setTimeout(() => {
    this.editor.view.updateConnections({ node });
  }, 100);
}

why doesn't it work without setTimeout?

[savanthvinay]

https://github.com/retejs/rete/issues/417#issue-565236334 Hi I am also having the same problem ,when I expand my node connection do not update, I am using Angular prime Ng can u help me out.

[Ni55aN]

@savanthvinay are you using Rete.js v1?

[savanthvinay]

@Ni55aN Yes

[Ni55aN]

@savanthvinay this should work for you https://github.com/retejs/rete/issues/417#issuecomment-752506526

[stallboy]

how to do this on rete": "^2.0.2"， on react，it has not editor.view api。 i tried area.update('node', nodeid), it worked on node update but area.update('connection', connectionid) does not work

[Ni55aN]

@stallboy rea.update('connection', connectionid) is supposed to work. Does it have correct connectionid?

[stallboy]

@Ni55aN it will begin update connection only after a mouse click on area.

area.update('connection', connectionid) does not work! the code i tried is:

                await area.update('node', node.id);
                const connections = editor.getConnections();
                const incomingConnections = connections.filter(connection => connection.target === node.id);
                for (let ic of incomingConnections) {
                    await area.update('connection', ic.id);
                }

after node changed, update this node and all incoming connections. but it does not update connection.

I also tried removeConnection then addConnection, then update, even setTimeout... still does not work.

setTimeout(() => {
    const connections = editor.getConnections();
    const incomingConnections = connections.filter(connection => connection.target === node.id);
    for (let ic of incomingConnections) {
        await editor.removeConnection(ic.id);
        let fromNode = editor.getNode(ic.source);
        let toNode = editor.getNode(ic.target);
        let conn = new EntityConnection(fromNode, ic.sourceOutput, toNode, ic.targetInput);
        conn.connectionType = ic.connectionType ?? EntityConnectionType.Normal;
        await editor.addConnection(conn);
        await area.update('connection', conn.id);
    }
}, 100);

the code is at https://github.com/stallboy/cfggen/blob/master/cfgeditor/src/editor.tsx , you can find the place by search Ni55aN. thanks, i tried spend some time on some rete plugins to found why it does not work, but failed. i am not a pro web develper.

after i click the 35 fields to unfold the connection can not update

[Ni55aN]

@stallboy according to the screnshots, you have a problem with updating socket positions (not connections UI component directly). It can be updated on socket update or noderesized event

https://github.com/retejs/render-utils/blob/6ba258e88eb59eeb42d2a65df3c3d11d30b36303/src/sockets-position/base-socket-position.ts#L76

How to launch it?

[stallboy]

@Ni55aN Give me 30 minutes. I will write a English README.md soon

[Ni55aN]

@stallboy np, anyway I'll be able to check it in a few hours or tomorrow

[stallboy]

@Ni55aN english readme done

build backend server

Prerequisites

• jdk21
• gradle

build, generate cfggen.jar.

genjar.bat

run backend server

cd cfgeditor
java -jar ../cfggen.jar -datadir ../example/config  -gen server

run cfgeditor front server

pnpm run dev

browser

http://localhost:5173/

[stallboy]

@stallboy according to the screnshots, you have a problem with updating socket positions (not connections UI component directly). It can be updated on socket update or noderesized event

add await area.update('socket', node.inputs[0]?.socket.name as string); still not work

[Ni55aN]

@stallboy the problem is that the node has a transition, so the socket positions are recalculated only once at the beginning of the animation.

But.. this is half the problem 🙄 The second part is that there is a bug in two packages, which specifically affects updating the positions of input sockets

I'll fix this as soon as I have time

At the moment a workaround is:

await area.update('node', node.id);
setTimeout(async () => {
  await area.update('node', node.id);
}, 200)

You can replace setTimeout with animation ticker if it's ok for you in terms of performance. After the fix this will be replaced by the faster method area.resize

[stallboy]

that's great. thanks a lot. I didn't expect antd animation.

[stallboy]

in fact, my real problem is "automatically set node width/height by custom control change and update related connection" . can it be done automatically by rete?

[rete-js[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.

[rete-js[bot]]

This issue was closed because it has been stalled for 10 days with no activity.