Nodify学习 四：预先连接

前置

预先连接

可以从连接器创建预先连接，并可以放置在ItemContainer或Connector上（如果AllowOnlyConnectors为false）。

预先连接的Content可以使用ContentTemplate进行自定义。如果EnablePreview为true，PreviewTarget将更新为鼠标光标下的连接器或项目容器，或者为null（如果没有这样的元素）

预先连接的可见性可以使用IsVisible依赖属性进行控制。

连接器的连接捕捉可以使用EnableSnapping依赖属性启用。

Source和Target属性是连接器的数据上下文，预先连接完成时Target将更新。

还有一个StartedCommand，参数是Source，以及一个CompletedCommand，参数是Target。

提示：取消预先连接的方法是释放右键。

预先连接从一个 Source 开始，当放置到一个 Target 上时将完成。源始终是一个连接器，目标可以是一个连接器、一个项目容器或 null。我们现在只关心其他连接器。当连接开始时，执行 StartedCommand，该命令接收 Source 作为参数。当连接完成时，执行 CompletedCommand，该命令接收 Target 作为参数。

操作

首先我们需要创建预先连接的视图模型类，并将其添加到 EditorViewModel 中。

public class PendingConnectionViewModel : ObservableObject
{
    private readonly EditorViewModel _editor;
    private ConnectorViewModel _source;

    public PendingConnectionViewModel(EditorViewModel editor)
    {
        _editor = editor;
        StartCommand = new DelegateCommand<ConnectorViewModel>(source => _source = source);
        FinishCommand = new DelegateCommand<ConnectorViewModel>(target =>
        {
            if (target != null)
                _editor.Connect(_source, target);
        });
    }

    public ICommand StartCommand { get; }
    public ICommand FinishCommand { get; }
}

 public class EditorViewModel
 {
     public ObservableCollection<NodeViewModel> Nodes { get; } = new ObservableCollection<NodeViewModel>();
     public ObservableCollection<ConnectionViewModel> Connections { get; } = new ObservableCollection<ConnectionViewModel>();

     public PendingConnectionViewModel PendingConnection { get; }
     public EditorViewModel()
     {

         PendingConnection  = new PendingConnectionViewModel(this);
         var welcome = new NodeViewModel
         {
             Title = "我的第一个节点",
             Input = new ObservableCollection<ConnectorViewModel>
         {
             new ConnectorViewModel
             {
                 Title = "输入"
             }
         },
             Output = new ObservableCollection<ConnectorViewModel>
         {
             new ConnectorViewModel
             {
                 Title = "输出"
             }
         }
         };

         var nodify = new NodeViewModel
         {
             Title = "节点1",
             Input = new ObservableCollection<ConnectorViewModel>
         {
             new ConnectorViewModel
             {
                 Title = "输入"
             }
         }
         };
         Nodes.Add(welcome);
         Nodes.Add(nodify);

     }

     public void Connect(ConnectorViewModel source, ConnectorViewModel target)
     {
         var newConnection = new ConnectionViewModel(source, target);

         // 检查是否已经存在相同的连接
         if (!Connections.Contains(newConnection))
         {
             Connections.Add(newConnection);
         }
     }
 }

<nodify:NodifyEditor PendingConnection="{Binding PendingConnection}">
...
    <nodify:NodifyEditor.PendingConnectionTemplate>
        <DataTemplate DataType="{x:Type local:PendingConnectionViewModel}">
            <nodify:PendingConnection StartedCommand="{Binding StartCommand}"
                                      CompletedCommand="{Binding FinishCommand}"
                                      AllowOnlyConnectors="True" />
        </DataTemplate>
    </nodify:NodifyEditor.PendingConnectionTemplate>
...
</nodify:NodifyEditor>

这就是创建连接的全部内容。现在你应该可以在连接器之间创建连接了。

代码地址

Github（NodifySamples4）：zt199510/NodifySamples (github.com)