Bare Bones GraphView Example?

[paladinrose]

Hey all,

I’m presently converting many of my editor tools over to use the new UIElements.

Many of my tools use node based graphs and I’m eager to make use of the experimental GraphView system to handle those tools, since it has support for tons of features that my own graphs didn’t (like good looking zooming! )

I’ll be honest: I’m out of my depth. I’ve seen rygo6’s example system, and I’ve been picking my way through the code on the Shader Graph and VFX Graph githubs, but it is a lot to take in.

Here’s what I was hoping: Is there anyone who can provide me a thorough, but bare-bones example?
How would I get this example code working to the point that I can see a GraphView with a boring old labeled node?

public class TestGraphWindow : EditorWindow
{
    public static void OpenWindow()
    {
        TestGraphWindow wnd = GetWindow<TestGraphWindow>();
        wnd.titleContent = new GUIContent("Test Graph Window");
       
        wnd.CreateElement();
    }

    private void CreateElement()
    {

        TestGraphView graphView = new TestGraphView() { name = "Graph View" };

        graphView.styleSheets.Add(AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/UI/TestGraphView.uss"));

        GridBackground gridBackground = new GridBackground();
        gridBackground.name = "Grid";
        graphView.Add(gridBackground);

        graphView.SetupZoom(0.05f, ContentZoomer.DefaultMaxScale);
        graphView.AddManipulator(new ContentDragger());
        graphView.AddManipulator(new SelectionDragger());
        graphView.AddManipulator(new RectangleSelector());
        graphView.AddManipulator(new ClickSelector());
      
        rootVisualElement.Add(graphView);

        TestNode exampleNode = new TestNode() { name = "Example Node" };

        exampleNode.styleSheets.Add(AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/UI/TestNode.uss"));

        graphView.AddElement(exampleNode);
    }

}

Right now, this seems to be showing me the gray background of the grid background, but no node. I have experimented enough to find that I can add a button to the node and if I hunt, I can find that button and successfully click it… I just can’t see the node at all.

So that’s as far as I’m trying get right now. No ports, inputs, outputs, or edges. Even the graph view manipulators are extra: I don’t mind removing them if that helps me get this first part working.
So far, I just want to make a GraphView named “GraphView”, with a grid background and an example node called “Example Node”.
I just want a gray box of a node with a label that reads “Example Node”. And that’s all. Just so I have a good toe in the water to start from.

A few questions:
-What, if any, UXML files might I need?
-What info do I need in TestGraphView.uss and TestNode.uss?

Thank you, genuinely, to any kind soul that can help.

[paladinrose]

Well, no replies so far. I’m going to try again to build a working example, and I’ll post my notes and progress in this thread, throughout, in case it’s a help to anyone else, moving forward.

My first guess is that the style sheet properties - particularly for the node - are not set, so there’s nothing to show… which is maybe a bit of an odd default state, but hey! Who am I to judge, huh?
I’m going to start my work by getting a complete list of the visual elements in my test node. Then I’m going to start at the top of the list and set the style sheet settings explicitly for each of them until I’ve got something visible.

As always if anyone has any recommendations, please post! I’d love to get any feedback I can.

[paladinrose]

Some starting success!

First, our data objects. These are presently empty placeholders and you can absolutely omit them and this still works. Later, they’ll be responsible for holding all of our graphs serialized info:

[System.Serializable]
public class TestNode { }

[System.Serializable]
public class TestGraph { }

[CreateAssetMenu(menuName ="Ideam Tests/Test Graph Object")]
public class TestGraphObject : ScriptableObject
{

    public TestGraph[] graphs = new TestGraph[0];

}

Next, some example editors:

public class TestNodeElement : Node
{
    TestNode node;
    public TestNodeElement(TestNode testNode)
    {
        node = testNode;
    }

    public void InitializeNode()
    {
        //This was a big part of the issue, right here. In custom nodes, this doesn't get called automatically.
        //Short of supplying your own stylesheet that covers all the bases, this needs to be explicitly called to give a node visible attributes.
        UseDefaultStyling();

        VisualElement contents = this.Q<VisualElement>("contents");

        Button contentsButton = new Button(() => { Debug.Log("Clicked!"); });
        contentsButton.text = contentsButton.name = "Test Button";
        contents.Add(contentsButton);
        title = "Test Node";
       
        SetPosition(new Rect(50, 50, 0, 0));
       
        MarkDirtyRepaint();
    }
}

public class TestGraphView : GraphView
{
    public TestGraph graph;
    public TestGraphView() { }
}

There’s also an editor for the TestGraphObject, but all it does is provide a button that opens the TestGraphWindow.

Lastly, our example window brings everything together:

public class TestGraphWindow : EditorWindow
{
    public static void OpenWindow(TestGraphObject graphObject)
    {
        TestGraphWindow wnd = GetWindow<TestGraphWindow>();
        wnd.titleContent = new GUIContent("Test Graph Window");
        wnd.graphObject = graphObject;
        wnd.CreateElement();
    }

    TestGraphObject graphObject;

    private void CreateElement()
    {
        rootVisualElement.Clear();

        if (graphObject.graphs.Length == 0) { graphObject.graphs = new TestGraph[1]; graphObject.graphs[0] = new TestGraph(); }

        TestGraphView graphView = new TestGraphView() { name = "Test Graph", viewDataKey = "TestGraphView", graph = graphObject.graphs[0] };

        graphView.SetupZoom(0.05f, ContentZoomer.DefaultMaxScale);

        graphView.AddManipulator(new ContentDragger());
        graphView.AddManipulator(new SelectionDragger());
        graphView.AddManipulator(new RectangleSelector());
        graphView.AddManipulator(new ClickSelector());
       
        graphView.RegisterCallback<KeyDownEvent>(KeyDown);

        graphView.graphViewChanged = GraphViewChanged;

        rootVisualElement.Add(graphView);
        graphView.StretchToParentSize();


        GridBackground gridBackground = new GridBackground() { name = "Grid" };
        graphView.Add(gridBackground);
        gridBackground.SendToBack();


        TestNode eNode = new TestNode();

        TestNodeElement exampleNode = new TestNodeElement(eNode) {name = "Example Node" };
        graphView.AddElement(exampleNode);
        exampleNode.InitializeNode();

        rootVisualElement.MarkDirtyRepaint();

    }

    //Placeholder functions
    private GraphViewChange GraphViewChanged(GraphViewChange graphViewChange)
    {
       

        return graphViewChange;
    }


    private void KeyDown(KeyDownEvent evt)
    {
       
    }
}

And my results: