Unable to change GraphView's Edge color

Hello,
We’ve been dabbling with the Graph View to create an internal tool for enemies.

We’ve followed most of the available examples (which there aren’t many as of now), but there’s something we’re unable to do, which is change the Edge’s color while not selected.

This is a class that we’re adding to the Edge’s stylesheets:

.edge.disabled
{
    --selected-edge-color: #FF0000;
    --ghost-edge-color: #FF0000;
    --edge-color: #FF0000;
}

This only works if the Edge is selected. If the Edge is not selected, the colors fall back to their defaults.
Basically, it only works if the PseudoState is not set to None.

It’s not possible to change the colors directly in Edge variables either since they’re private.

Can anyone else help us with this issue?

With the understanding the GraphView is not officially supported, here’s some things you can try:

  1. Add your own .my-edge class to your edges and use a more specific “.edge.my-edge” selector. This might win the contest over the default “.edge” selector in GraphView’s base USS.
  2. Look at the Elements/Edge.cs and EdgeControl.cs source for more clues as to how the color is being actually set. Because a lot of it comes from the colors of the input and output ports. It’s not just a flat color. You can find the source here:
    UnityCsReference/Modules/GraphViewEditor at master · Unity-Technologies/UnityCsReference · GitHub

Thank you for the response Damian!

As for number 1, we’ve already tried that and we have the result that you see on the screenshots.
We didn’t find the Graph View code before, but now with this we’ll see what we can do. Maybe we can override something or find what was missing on our approach, thanks!

EDIT: Found the problem. It really uses the ports’ colors when unselected, but giving a little feedback about this, it’s weirdly placed and not intuitive.
public Color defaultColor
This property is set with the USS stylesheet, however it is never used in the script. Having to use stylesheets for selected lines and having to change the colors of ports through code for unselected lines is not intuitive at all.
Just trying to give some feedback about this to improve for further versions. Maybe it should have a flag to use gradients instead of line default colors, and that way people can make the gradients if they want to. If not, just use the default color set in the stylesheet, which is more intuitive to handle since selected lines also use the stylesheet’s set color.

1 Like

Thanks for the feedback. Glad to hear you’re unstuck somewhat. Friendly reminded, as I noted in my first post, that GraphView was never released for public use and is not supported. It is unlikely to receive any updates.

Which port, input or output? And which color, background, foreground, other?

Edit: the answer is, Port has an extra property called portColor. The style property is a red herring.

Edit: Ah, but this won’t do, because now some edges are half colored that way. I want to display a “winning” path through the graph, so I want particular edges to be colored.

Edit: Looking at the source, it so happens that UpdateEdgeControlColorsAndWidth is called from four overridable methods, so if I override them all, and don’t call base implementation, and copy-paste code into them to do the same thing except do colors like I want, it would work. Except I’m on 2019.4, and there is no way to hijack the node’s logic in any way in that version. :frowning:

Edit: Node class has a constructor that accepts not a VisualTreeAsset, but a path that’s relative to Assets/Editor Default Resources, but it’s rude to pollute a global folder that’s outside your module like that. :frowning:

2 Likes

Does anyone here know if its possible to change the icon of a port? I tried my luck on changing the background image on the “connector” and the “cap” but didn’t yield the result I was looking for…

For anyone else stumbling on this, the entire edge color can be updated via the EdgeControl:

Edge edge = …
var edgeControl = edge.edgeControl; // Get EdgeControl from the Edge
edgeControl.inputColor = color;
edgeControl.outputColor = color;