CODEWITHSUNDEEP
javascriptcssrete
joeybab3
joeybab3

Reputation: 317

ReteJS add class to individual node/connection

I've just started using ReteJS, and the React Renderer but in Vanilla JS. While it makes setting up simple nodes and connections super easy, I'm having trouble figuring out how to add a class/color/style to a single connection or node.

So far I have had no trouble coloring all of them by doing something like:

div[data-testid="node"] {
    background-color: #0D1117;
    border: 1px solid #495057;
}

span[data-testid="output-socket"] > div > div, span[data-testid="input-socket"] > div > div {
    background-color: #0D1117;
    border: 1px solid #495057;
}

svg[data-testid="connection"] > path {
    stroke: #0D6EFD;
    stroke-width: 4px;
}

This produces a result like so: Correctly colored connections, but its all of them

I have tried to create extensions of the connection class:

class ActiveConnection extends Classic.Connection {
    constructor(source, sourceSlot, target, targetSlot) {
        super(source, sourceSlot, target, targetSlot);
        this.data = { label: 'Label' };
    }
    getStyle() {
        return active_styles;
    }
}

One way I can theorize to do it would be to keep a separate list of added nodes and when I add a connection I can see which node has been added with a query selector and diff the previous list. This seems like a hacky workaround though and I don't see this working in all situations.

Upvotes: 1

Views: 575

Answers (0)

Related Questions