GraphView: State Machine Graph

I'm trying to make my own state machine editor for controlling character animations (This is for a custom DOTS ScriptableObject with project specific animation data, so Mecanim AnimationControllers aren't a very viable solution). So far I've been able to build out a decent set of states and transitions with it and all of the nice benefits of GraphView are great to have for fast development of these kinds of complex tools. However, unlike ShaderGraph/VFXGraph, these graphs, while having directed edges, each edge can represent multiple objects (transitions), and visually make more sense directly connecting to a node instead of ports. Having to hook up the output of a rightmost node to the input on the left is not particularly visually appealing and makes it hard to read the graph:


So my questions are as follows:

• Can I have edges coming from the center of a node without ports?
• Can I alter the way the rendering of the edges so that they can have Mecanim style "multiple selections"? (where it shows a triple >>> instead of a single > to visually signify there are multiple transitions?

These aren't blockers, but severely affect readability for our use cases since these graphs will have good number of cycles in them.

On another note: How do I enable node renaming?

 

Oh thanks for such a detailed response, on the weekend too! I was banging my head against the CsReference code and even going as far as to try to reflect into UnityEditor.Graphs to try to get something that looks remotely workable. This is great!

I noticed the mesh generation code for EdgeControl is not public and there doesn't seem to be an easy way to alter it. Might be a bit harder to add the >/>>> geometry that I want, or I might just use different colors to achieve the same goal.

EDIT: It seems like the code you provided directly uses GL to draw the arrows over the edge, which works too, though I'm not entirely sure it will work with the zoom/pan that the GraphView currently supports.

It seems like they're required to bind to a port. How do I make them invisible? Sorry I'm still a bit new to all of the controls in UIElements.

Where is this functionality shown? There's no additional context when right clicking and no text field is shown.

Out of curiosity, is there any Unity-side goals or use cases for something like this? This seems like a good fit for DOTS Animation authoring if mapping Mecanim Animation Controllers ends up being too incompatible.

I'll update the thread with any success or failures I have with this endeavor.

 

Ah so it's just like the MDN documented visibility CSS property. That's good to know.

Alright. Thanks for the snippet. I had previously just replaced it with a text-field and just used that instead. This is notably cleaner.

Perfectly understandable. This is a very widely applicable use case, though it's pretty clear from some of the changes we've highlighted in this thread it seems like there are quite a few blockers. Hopefully when the official solution is out, it'll look better than whatever I'm hacking together. Haha.

 

@james7132 where you able to achieve this?
I'm trying to do a very simple undirected graph right now. I want to use this for internal handling of the map of my game.
The issue I'm having is that ports have a direction field in them (i.e. Direction.Input), the default behaviour rejects output-output connection or input-input connections. I'd like to override this function to get just one type of port but I have no clue about what's the function that I want to override, and I'm a bit lost in the docs. Any ideas?

 

This is for a hobby project of mine, and unfortunately I haven't had any time since to try my hand at this. It'd be great if this had official support, but it seems neither I nor UT have had resources to further dedicate to this.

I ended up forking the GraphView code directly off of the CsReference GitHub repo and removing the directionality of ports, pinning them to the center of the node. This works OK-ish, though it requires a lot of additional handler code for dragging and dropping transitions, which I have had zero time to get around to doing.

 

For anyone coming across this when looking for the rename bit, I solved it using parts of @jocelyn_legault 's code and it works very nicely like this (snippet includes renaming with F2):

Code (CSharp):

1.  
2. /** part of a class for this purpose called RenamableNode **/
3.  
4.     Label titleLabel;
5.     TextField renameField;
6.  
7.     public string ID {
8.         get => title;
9.         set {
10.             if (string.IsNullOrEmpty(value) || value.Equals("(Unnamed)"))
11.             {
12.                 title = "(Unnamed)";
13.                 titleLabel.style.unityFontStyleAndWeight = FontStyle.Italic;
14.             }
15.             else
16.             {
17.                 title = value;
18.                 titleLabel.style.unityFontStyleAndWeight = FontStyle.Normal;
19.             }
20.         }
21.     }
22.  
23.     public RenamableNode()
24.     {
25.         capabilities |= Capabilities.Renamable;
26.  
27.         titleContainer.RegisterCallback<MouseDownEvent>(MouseRename, TrickleDown.TrickleDown);
28.  
29.         focusable = true;
30.         pickingMode = PickingMode.Position;
31.         RegisterCallback<KeyDownEvent>(KeyboardShortcuts, TrickleDown.TrickleDown);
32.  
33.         titleLabel = titleContainer.Q<Label>();
34.  
35.         renameField = new TextField { name = "textField", isDelayed = true };
36.         renameField.style.display = DisplayStyle.None;
37.         renameField.ElementAt(0).style.fontSize = titleLabel.style.fontSize;
38.         renameField.ElementAt(0).style.height = 18f; // still need to figure out how to make these values depend on the label's font size
39.         renameField.style.paddingTop = 8.5f;
40.         renameField.style.paddingLeft = 4f;
41.         renameField.style.paddingRight = 4f;
42.         renameField.style.paddingBottom = 7.5f;
43.         titleContainer.Insert(1, renameField);
44.  
45.         VisualElement textInput = renameField.Q(TextField.textInputUssName);
46.         textInput.RegisterCallback<FocusOutEvent>(EndRename);
47.     }
48.  
49.     void MouseRename(MouseDownEvent evt)
50.     {
51.         if(evt.clickCount == 2 && evt.button == (int)MouseButton.LeftMouse && IsRenamable())
52.             StartRename();
53.     }
54.  
55.     private void KeyboardShortcuts(KeyDownEvent evt)
56.     {
57.         if(evt.keyCode == KeyCode.F2 && IsRenamable())
58.             StartRename();
59.     }
60.  
61.     void StartRename()
62.     {
63.         titleLabel.style.display = DisplayStyle.None;
64.         renameField.SetValueWithoutNotify(ID);
65.         renameField.style.display = DisplayStyle.Flex;
66.         renameField.Q(TextField.textInputUssName).Focus();
67.         renameField.SelectAll();
68.     }
69.  
70.     void EndRename(FocusOutEvent evt)
71.     {
72.         titleLabel.style.display = DisplayStyle.Flex;
73.         renameField.style.display = DisplayStyle.None;
74.  
75.         if (ID != renameField.text)
76.         {
77.             ID = renameField.text;
78.         }
79.     }
80.  

 

Can we have this functionality somewhat officially supported in the graphview? Having just two ports, one on each side, is a bit of a mess with so many nodes in the graphview, which the situation I'm facing right now -____-

Having all ports can dynamically switching sides when moved is more robust than what the graphview has now