U3d杂谈 — 使用GraphView 做工具 — 01

GraphView是U3d提供一个实验性功能，可以使用这个创建节点编辑器的功能。此系统使用的是UIElement新的编辑器UI框架，类似于网页的CSS+XML的UI框架。

此处说明如何简单的使用GraphView然后如何添加节点做一个简单的计算。目的是抛砖引玉，看看如何使用。

首先，我们需要继承GraphView来实现一个自己的GraphView

using UnityEditor.Experimental.GraphView;
using UnityEngine.UIElements;
public class MyGraphView : GraphView
{
    // Start is called before the first frame update
    public MyGraphView()
    {
       //插入背景
        Insert(0, new GridBackground());
//与父类的尺寸同步
        this.StretchToParentSize();
//设置缩放的范围值
        SetupZoom(ContentZoomer.DefaultMinScale, ContentZoomer.DefaultMaxScale);
//添加选取拖动的控制器
        this.AddManipulator(new SelectionDragger());
        //graphview窗口内容的拖动
        this.AddManipulator(new ContentDragger());
    }
}

上面是最简单的GraphView，现在需要创建一个EditorWindow编辑器窗口来承载上面的View

using System.Collections;
using System.Collections.Generic;
using UnityEditor;
using UnityEngine;

public class MyGraphWindow : EditorWindow
{
    
    [MenuItem("Cmd/MyGraphView")]
    public static void OpenMyGraphView()
    {
        MyGraphWindow window = GetWindow<MyGraphWindow>("MyGraphWindow");

        MyGraphView view = new MyGraphView();
        window.rootVisualElement.Add(view);
    }
}

我们添加一个自定义菜单命令，打开一个Window窗口，然后把GraphView添加刀根视图节点里面。

完成上面的2个类，我们就能打开一个GraphView的窗口了，但是里面一片空白，我们需要响应GraphView的右键创建节点的委托函数，来创建节点，我这里直接创建一个带输入与输出的int类型节点。

我们在MyGraphView的构造函数中添加如下代码：

this.nodeCreationRequest += (NodeCreationContext t) =>{
            Node s = new Node() { title = "Node"};
            Port p = Port.Create<Edge>(Orientation.Horizontal, Direction.Input, Port.Capacity.Single, typeof(int));
            s.inputContainer.Add(p);

            Port p2 = Port.Create<Edge>(Orientation.Horizontal, Direction.Output, Port.Capacity.Single, typeof(int));
            s.outputContainer.Add(p2);

            this.AddElement(s);
        };

现在我们就能在GraphView中点击右键，会出现一个CreateView的菜单命令，点击一下就能创建一个节点。效果如下：

到达这一步，我们还不能把2个节点的输入输出端口连接起来。上面的代码中，inputContainer和outputContainer是节点默认预留的2个显示区域，位置是固定的。我们创建的Port可以根据情况任意放入任何一个容器中。除了这2个固定节点容器，还预留的有其它容器，可以看Node的定义就清楚了。

Port只能通过提供的静态Static方法创建，这很重要，如果自己通过New创建对象是没法使用的，因为Create方法中还执行了许多其它代码，有给Port添加控制器，否则不能拖出连接线。

Port需要设置连接线的方向，有水平和垂直，水平代码连接线连接节点是水平还是垂直的，主要是显示，跟功能无影响。Direction这个是Port的数据方向，代码是输入Port还是输出Port。Capacity是Port能够是多联还是单连接，根据自己情况设置即可。最后一个是Port的数据类型，正确的数值类型才能进行正确的计算，否则我们不知道啥类型而不知道如何去处理输入的数据。

为了让节点Port能够相互连接线，我们需要覆写一个函数：

  public override List<Port> GetCompatiblePorts(Port startAnchor, NodeAdapter nodeAdapter)
    {

        List<Port> compatibleList = new List<Port>();
        foreach (var port in ports.ToList())
        {
            if (startAnchor.node == port.node || startAnchor.direction == port.direction)
            {
                continue;
            }
            if (startAnchor.portType != port.portType)
            {
                if (port.portType != typeof(object) && !startAnchor.portType.IsAssignableFrom(port.portType) && !port.portType.IsAssignableFrom(startAnchor.portType))
                {
                    continue;
                }
            }
            compatibleList.Add(port);
        }

        return compatibleList;
    }

它的思想很简单，就是在牵出一个Port的线就会调用此函数，然后遍历当前GraphView中所有的Port，根据类型，方向判断哪些Port可以与当前Port连接，返回一个能连接的Port列表。

下一篇介绍如何扩展自己的Node，来通过节点进行计算。