Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Feature Request GraphView official support

Discussion in 'UI Toolkit' started by merpheus, May 3, 2019.

  1. merpheus

    merpheus

    Joined:
    Mar 5, 2013
    Posts:
    202
    Hi! There are UIElements examples at both in a repo from Unity over github and samples inside Unity 2019.2. But I couldn't find any official documentation about GraphView. So is there anywhere that I can find examples with the most up-to-date version of api ? Also do you have plans for making examples for GraphView as well ?
     
  2. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    1,231
    GraphView is not officially supported as a standalone API. It is only meant to be used by internal teams, like ShaderGraph. As such, there are no officially maintained examples or documentation. This could change in the future, but no such plans as of yet.
     
  3. AndrewKaninchen

    AndrewKaninchen

    Joined:
    Oct 30, 2016
    Posts:
    149
    I've been using ShaderGraph for reference ever since they released it's source code. It's useful enough and accessing it through your Package folder guarantees you're looking at the same API version your project is running on, at least.
     
    Gekigengar and merpheus like this.
  4. merpheus

    merpheus

    Joined:
    Mar 5, 2013
    Posts:
    202
    Well, I'd make a feature request but I don't think it would likely to change something. Yet, I'll do that anyways. But I must say, there are lots of people that playing with GraphView and building tools on top of it. So it would be wonderful if you guys would make this api as officially supported.

    Thank you, I've started to look into that as well. But I couldn't find where they are creating a new asset file for graph yet. I am still investigating. Although, I am open to any hints. :p
     
    Last edited: May 5, 2019
  5. MoeLang

    MoeLang

    Joined:
    Oct 8, 2016
    Posts:
    2
    Yeah, I am developing custom tools with GraphView. I also wish it could be supported in runtime mode, so we can build desktop tools with unity!
     
    MoonbladeStudios likes this.
  6. Kichang-Kim

    Kichang-Kim

    Joined:
    Oct 19, 2010
    Posts:
    1,008
    +1 here. please keep GraphView API be public at least.
     
  7. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    1,231
    Too many internal tools use it so there's very little risk the GraphView API will be removed or made private. And we do hear you! Will will eventually give GraphView more attention. We just have higher priorities at the moment.
     
  8. Dunskat

    Dunskat

    Joined:
    Oct 17, 2017
    Posts:
    11
    +1 for documented and official support for GraphView.
    making tools with it could open up doors to many time saving and improved visualizing workflow of many things, not just visual programming, but also flow charts/game progression and others.
    Right now it's not super intuitive, and requires a lot of setup that can be encapsulated into the API.
     
  9. fbmd

    fbmd

    Joined:
    Dec 4, 2016
    Posts:
    16
    Hi, would you mind sharing a little boilerplate template project of yours to get started with? That would help a lot of developers out there.
     
    MoonbladeStudios likes this.
  10. AndrewKaninchen

    AndrewKaninchen

    Joined:
    Oct 30, 2016
    Posts:
    149
    I can probably try to do that. Just need some free time.
     
    MoonbladeStudios likes this.
  11. calpolican

    calpolican

    Joined:
    Feb 2, 2015
    Posts:
    425
    +1. I just enter to ask for the same feature.
    I haven't use the graph view yet, but it would be great to be able to make GUIs with nodes, both for internal use, and for user input too. We could build our own behaviout trees, use it for our Dialogue Systems, etc. But I'd also love to see it working at runtime, so that the user can use it to control elements of the game.
     
    MoonbladeStudios likes this.
  12. skerkmann

    skerkmann

    Joined:
    Oct 18, 2018
    Posts:
    8
    +1 and im wondering if the classes could be exposed to the ui builder
     
  13. ErwanTLG

    ErwanTLG

    Joined:
    Apr 15, 2018
    Posts:
    3
  14. merpheus

    merpheus

    Joined:
    Mar 5, 2013
    Posts:
    202
    Yeah, from last year May to now, I have bugged in into shader graph source code and a few other experiments that people worked on. So I have made a series of tutorials about using GraphView Api to make a Dialogue system. But you can use this to do pretty much anything you need such as a Behavior tree or a visual scripting solution.

    Just leaving it here in case anyone is checking this tread:
     
    Olmi, DrViJ, funkyCoty and 14 others like this.
  15. SevenSolaris

    SevenSolaris

    Joined:
    Jan 14, 2019
    Posts:
    20

    I just stumbled upon this thread, and I had recently found your video when trying to figure out GraphView.

    I'm really glad that you did the work to demystify this experimental API, because it's definitely one of the hidden gems of Unity at the moment.
     
    mopthrow, acenyte and merpheus like this.
  16. darthdeus

    darthdeus

    Joined:
    Oct 13, 2013
    Posts:
    76
    Just ran into this thread. I'm curious what all of those assets that have graph editors (like Amplify Shader Editor) use for their graph view? Is there any other library, or does everyone just roll their own?

    I've been playing around with the `Unity.Experimental.GraphView` API but ughhh ... while I like UIElements I'm not sure how I feel about GraphView. Seems the API could be made simpler, especially considering how you have to keep adding everything back and forth. I'd imagine a lot of the manual work could be done with just some clever event subscription between the graph and the view.
     
  17. andybak

    andybak

    Joined:
    Jan 14, 2017
    Posts:
    569
  18. darthdeus

    darthdeus

    Joined:
    Oct 13, 2013
    Posts:
    76
    Interesting! I looked around a bit and found two different ones hehehe

    https://github.com/Seneral/Node_Editor_Framework and https://github.com/Siccity/xNode

    I guess I'll just build my asset as agnostic of the graph editing library as possible so that I could switch to a different one if needed.

    One thing I'm wondering though is why are there already four different ones with similar levels of activity + two ones from Unity. I guess the not-invented-here principle is strong :D Maybe I should roll my own as well, could be fun.
     
    richardkettlewell likes this.
  19. andybak

    andybak

    Joined:
    Jan 14, 2017
    Posts:
    569
    None of the Unity ones are official to my knowledge so I guess developers just like scratching their own itches.

    xNode is much older and doesn't use the new UI framework.
     
  20. darthdeus

    darthdeus

    Joined:
    Oct 13, 2013
    Posts:
    76
    Makes sense! I went through them and yeah looks like you're right, I guess I even prefer tha xNode uses ImGUI since it makes it really easy to change and super stable. It's not the prettiest, but looking at code size (even comparing to things like ASE or NodeCanvas implementaions) it seems like it might be easy to extend/change.

    Hopefully we'll get an official solution soon, though I'm a bit worried if it wouldn't make things too tied to Unity's architecture instead of drawing general graphs, but that's just a wild guess. Ideally I'd imagine just building an ImGUI layer directly on top of my own graph structure, without needing a copy of the graph in some UIElements data structures. Though I'm not really sure which approach would scale the best with huge graphs.
     
  21. andybak

    andybak

    Joined:
    Jan 14, 2017
    Posts:
    569
    Hehe. If you've got huge graphs then the UI framework is going to be the least of your problems!
     
  22. McManning

    McManning

    Joined:
    Oct 27, 2017
    Posts:
    4
    Hi I'm the BlueGraph guy. For me, at least, I was originally using xNode and wanted something a bit more lean / integrated in the existing Unity framework so I started playing with GraphView in the hopes it'd stabilize and release by the time I had something useful. Few months later and here we are with all sorts of projects on an experimental API. :p
     
    laurentlavigne likes this.
  23. laurentlavigne

    laurentlavigne

    Joined:
    Aug 16, 2012
    Posts:
    6,225
    Very nice clean code. It deserves traction. And this state machine need you:
    https://forum.unity.com/threads/generic-state-machine.979371/
     
  24. Xarbrough

    Xarbrough

    Joined:
    Dec 11, 2014
    Posts:
    1,188
    Thanks for making these videos! Do you happen to know how to get the size of a created Node while it is being created? I'm trying to layout my nodes programmatically, but since they all have different sizes (depending on their content), I cannot simply place them every x pixels. Instead, I'd like to place each node x pixels further than the previous node's max position. However, when creating a new node, it's rect will be not set (NaN).

    The docs mention a callback generateVisualContent, but they also advise against modifying a node within this callback, but how then should I set the initial position of my nodes? Also, I'm trying to avoid a visible frame delay.

    Any ideas?
     
    TobyWu likes this.
  25. calpolican

    calpolican

    Joined:
    Feb 2, 2015
    Posts:
    425
    I'm just amazed that we have this sort of great tutorial and people still cry over brackeys.
     
    merpheus likes this.
  26. Gekigengar

    Gekigengar

    Joined:
    Jan 20, 2013
    Posts:
    738
    Mostly because irregular updates (Once every 2 - 6 months range), and less accessible. By accessible, I mean the tutorial's editing is way less to the point than Brackeys. Slower paced, and the script structure does not help much in making advanced topic more digestible. The broad audience nowadays does not like to spend more than 10 minutes in a video.

    You can be successful with advanced topic with better editing and script.
    Here is a good example of a short and digestible video by Sebastian Lague on a relatively advanced topic.

     
    calpolican likes this.
  27. calpolican

    calpolican

    Joined:
    Feb 2, 2015
    Posts:
    425
    Well, I really liked both of those tutorials, and the subjects are amazing, I'm gonna watch more... but personally I think that this type of catchy short video is more appealing when you are not following them. To me it gives the false sense that you learn everything on the first watch, but as soon as you try to replicate it, you find that you have to pay for the video's shortness with a lot of effort on your part.
    I tend to prefer tutorials like Unity's official ones. Those that start with a flashy overview to get you engaged, but then also have small lessons that break the problem into smaller ones. The animations are also used to convey abstract stuff (like in the ones you posted). Since the subject of each video is well define, you can follow them as a big tutorial or you can only watch the chapter that has the info you're looking for, and tutorials can be as long as needed. The same principle applies for pages like Khan Academy.
    To me brackey's style is more sucessful in getting followers and likes, but unity's and others longer tuts are better to acctually transmit the knolowedge for those that actually do follow the tutorials.
     
    Last edited: Dec 16, 2020
  28. peterfiftyfour

    peterfiftyfour

    Joined:
    Jan 8, 2016
    Posts:
    20
    +1 to this! I'm loving what graphview provides so far so any updates/more support would be awesome <3
     
    Orimay likes this.
  29. imgodot

    imgodot

    Joined:
    Nov 29, 2013
    Posts:
    212
    Playing around with graphview but I am stuck on how to create links/edges between objects programmatically.

    I am creating nodes programmatically and want to link them, but I am unclear on how to create the edges on-the-fly.

    Anyone have a reference or snippet?

    Thanks.
    -- Paul
     
  30. softleitner

    softleitner

    Joined:
    Jan 10, 2021
    Posts:
    44
    I'm curently playing around with graphview and this is how i do it:

    Code (CSharp):
    1.         var porta = _graph.Nodes[0].Ports[0];
    2.         var portb = _graph.Nodes[1].Ports[0];
    3.  
    4.         var edge = new ConnectorEdge()
    5.         {
    6.             input = porta,
    7.             output = portb
    8.         };
    9.  
    10.         porta.Connect(edge);
    11.         portb.Connect(edge);
    12.  
    13.         _graph.Add(edge);
    the reference source is very helpful for this stuff https://github.com/Unity-Technologi...Modules/GraphViewEditor/Elements/Port.cs#L309
     
  31. imgodot

    imgodot

    Joined:
    Nov 29, 2013
    Posts:
    212
    softleitner,

    Thanks for the snippet, that got me where I needed to go.
    However, the API calls to graphview that I had to use were different than the ones you listed.
    It may be because the graphview code in my project is out of date because it was part of a 3rd-party project I downloaded (EDIT: alelievr / NodeGraphProcessor)

    What is the current download link for the graphview stuff?

    Thanks.
    -- Paul
     
  32. imgodot

    imgodot

    Joined:
    Nov 29, 2013
    Posts:
    212
    Question: Are there any auto-layout capabilities I can tap into in graphview when I am creating nodes programmatically?
    Like: Prevent nodes from overlapping. Arrange nodes relative to another node.

    Thanks.
    -- Paul
     
    TobyWu and livmystery like this.
  33. TobyWu

    TobyWu

    Joined:
    Oct 10, 2019
    Posts:
    7
    Same question here, are there any solutions to layout my nodes programmatically?

    Thanks.
     
  34. Kekito

    Kekito

    Joined:
    Nov 24, 2016
    Posts:
    14
    Does anyone know what in kind of state this library currently is? Will it leave "experimental" state? Tried it and it works incredibly well, just wondering if statement "very little risk of removing this library" from 2 years ago still stands.
     
  35. Nexer8

    Nexer8

    Joined:
    Dec 10, 2017
    Posts:
    271
    It will eventually be replaced by this: https://forum.unity.com/threads/graph-tool-foundation.1057667/
     
    Ivan_br and richardkettlewell like this.
  36. Kekito

    Kekito

    Joined:
    Nov 24, 2016
    Posts:
    14
    Last edited: Oct 4, 2021
  37. Nexer8

    Nexer8

    Joined:
    Dec 10, 2017
    Posts:
    271
    Might not replace Graph View, but it will eventually become the standard, which Shader Graph and similar graph tools will use.
     
    richardkettlewell likes this.
  38. Gamebient

    Gamebient

    Joined:
    Mar 8, 2019
    Posts:
    15
    One way you can customize the position when creating a node can be achieved by using the BuildContextualMenu method, storing the mouse position beforehand and setting the node to that exact position. I'll leave an example how i did it here:
    Code (CSharp):
    1. using UnityEditor;
    2. using UnityEditor.Experimental.GraphView;
    3. using UnityEngine;
    4. using UnityEngine.UIElements;
    5.  
    6. public class EditorGraphView : GraphView
    7. {
    8.     public new class UxmlFactory : UxmlFactory<EditorGraphView, UxmlTraits> { }
    9.  
    10.     ContentZoomer zoomer;
    11.  
    12.     // Called when this view gets instantiated
    13.     public EditorGraphView()
    14.     {
    15.         GridBackground gridBackground = new GridBackground();
    16.         Insert(0, gridBackground);
    17.  
    18.         StyleSheet styleSheet = AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/Editor/SceneData/EditorGraphView.uss");
    19.         styleSheets.Add(styleSheet);
    20.  
    21.         AddManipulators();
    22.     }
    23.  
    24.     // An override for the context menu
    25.     public override void BuildContextualMenu(ContextualMenuPopulateEvent evt)
    26.     {
    27.         base.BuildContextualMenu(evt);
    28.      
    29.         // Saving the mouse position and setting it to the actual
    30.         // Graph View space. Needed because manipulators were added
    31.         Vector2 mousePos = evt.localMousePosition;
    32.         mousePos = viewTransform.matrix.inverse.MultiplyPoint(mousePos);
    33.      
    34.         // Adding an action to the context menu
    35.         evt.menu.AppendAction("Add Node", (x) => AddNode(mousePos), DropdownMenuAction.Status.Normal);
    36.  
    37.         evt.menu.AppendAction("Reset View", (x) => { viewTransform.position = Vector3.zero; viewTransform.scale = Vector3.one; });
    38.     }
    39.  
    40.     // Adds manipulators to this element
    41.     void AddManipulators()
    42.     {
    43.         zoomer = new ContentZoomer();
    44.         this.AddManipulator(zoomer);
    45.         this.AddManipulator(new ContentDragger());
    46.         this.AddManipulator(new SelectionDragger());
    47.         this.AddManipulator(new RectangleSelector());
    48.         this.AddManipulator(new FreehandSelector());
    49.     }
    50.  
    51.     // Function called to add the node passing the mouse position
    52.     void AddNode(Vector2 position)
    53.     {
    54.         AddElement(new SceneNode("Node Name", new Rect(position, Vector2.zero)));
    55.     }
    56. }
    Note that "SceneNode" inherits from "Node" and in its constructor takes in the title and the position to use which gets applied by the SetPosition(Rect newPos) method.

    As to the actual size of the node I was not able to find a way to control it through script, although I found a video that makes a good basis for Graph View using the UIBuilder:
     
  39. TamasKoller

    TamasKoller

    Joined:
    Feb 19, 2021
    Posts:
    2
    Is there a way to use GraphView in Play Mode?
     
  40. uMathieu

    uMathieu

    Unity Technologies

    Joined:
    Jun 6, 2017
    Posts:
    396
    The GraphView classes are located inside editor-only assemblies.
     
  41. TamasKoller

    TamasKoller

    Joined:
    Feb 19, 2021
    Posts:
    2
    Thank you for the answer.
    Yes I know and that was my conclusion.
    BUT
    There may be a workaround of future plane to make it runtime supported.
    I cant see a blocker in theory to have it in UnityEngine namespace and have GraphViews in game to make custom behavior.
     
    MoonbladeStudios likes this.
  42. D-DutchDave

    D-DutchDave

    Joined:
    May 4, 2018
    Posts:
    36
    Hello!

    I'm using the GraphView API to develop my own node editor and have some strange behaviour going on with AddElement(). When creating nodes through the searchwindow it only adds the element once the Graphview transform has changed. Since I recreate the editor node on reload it also doesn't work properly when deserializing my graph. Any idea what is going on?

    EDIT: On further inspection they are actually created, however, they are not rendered. Only when a change on the graphview happens are they rendered on creation.

    SOLVED: The issue was related to me storing the viewTransform of the GraphView and on load only restoring the GraphViews scale on the x and y axis. After also applying the stored scale level to the z axis of the GraphView scale it works again!

    upload_2022-9-11_23-53-38.gif
     

    Attached Files:

    Last edited: Sep 12, 2022
  43. blueteak

    blueteak

    Joined:
    Feb 19, 2013
    Posts:
    140
    Apparently Graph View API is in maintenance mode and will be replaced by GraphTools Foundation in the far future - pretty disappointing to hear that a great API is being deprecated already, and we won't be getting a replacement to start playing with until after 2023 :(