Multiple connection styles

[Photon-Engineer]

Is it possible to apply different styles to the various connections based on some logic? Specifically such as what type of socket they are connected to, or what type of data the connection is associated with?

For example, I'd like to have, say, a blue connection line for numeric data and a white connection line for string data.

I'm not sure if the render plugin makes a difference for this, but in case it does, I'm mostly using the react-render-plugin.

Thank you, and great work!

[Hatead1]

https://gitter.im/retejs/Lobby - post dated 07 apr.

[Photon-Engineer]

I ended up finding a different way to do it using the renderconnection event to get access to the connection html element in the dom.

I think this way works better for me, but I appreciate your help.

this.editor.on('renderconnection', (connection) => {
            const key = connection.connection.output.key;
            const node = connection.connection.output.node;
            const type = node.outputs.get(key).socket.name; // Get the name of the output socket
            var connectionClass;
            if (type === "string") {
                connectionClass = "string-connection";
            }else if (type === "number") {
                connectionClass = "number-connection";
            }
            var c = connection.el.children;
            for (var i = 0; i < c.length; i++) {
                c[i].children[0].classList.add(connectionClass);
            }
        });

Then I just create the string-connection and number-connection styles with css.

[Hatead1]

I think there are a couple more ways we can do that.

[RemiRigal]

If you look at the render function of connections, it adds the socket type to the SVG container as classes: https://github.com/retejs/connection-plugin/blob/7a4b68409982691ea14ab0018ca23d8d057e48b8/src/utils.ts#L36

So if you have two sockets number and string you can apply the following style:

svg.connection.socket-input-number,
svg.connection.socket-output-number {
  path.main-path {
    stroke: blue;
  }
}

svg.connection.socket-input-string,
svg.connection.socket-output-string {
  path.main-path {
    stroke: red;
  }
}

And if you need a default style:

svg.connection {
  path.main-path {
    stroke: gray;
  }
}

When dragging the connection, the default color will be used until connected though, I'm still trying to find a way to solve that without changing the library's code.

[Photon-Engineer]

@RemiRigal Thank you, I like that much better than what I was doing. Nice catch in the source code!

[Hatead1]

This does not work if the names are not in English.

[RemiRigal]

@Hatead1 English is not my native language but I still think it's a bad practice to use non ASCII characters in code and identifiers. You should try to have a clear limit between logic code and displayed text.

[Hatead1]

You should try to have

me?? Tell me what to do if i need title in my language? node.addOutput(new Rete.Output('help', 'Поле ввода/вывода', helpSocket));

[Hatead1]

Ok, do it in English. I want to call the socket "Extend the connection from this point to anywhere in the graph." Result: svg class="connection output-extend-the-connection-from-this-point-to-anywhere-in-the-graph."

[RemiRigal]

@Hatead1 I was talking about the name of the Socket, which acts as a unique string identifier, not the output/input name you provide when calling addOutput or addInput functions in the node builder.

If you look at the code I pointed out, they are both added as classes, so instead of using the class output-CONNECTION-NAME use socket-output-SOCKET-NAME (or same with input) to style your connections. But I agree with you that the connection name should not be added as a class, only the socket name.

[Hatead1]

they are both added as classes

Its bad practice. Such things have to be done through class functions, not hardcoded string.

[RemiRigal]

they are both added as classes

Its bad practice. Such things have to be done through class functions, not hardcoded string.

I agree with you, if I have the time I will try to do a PR on this.

[Hatead1]

OK, deal :)