Nodify学习 伍：添加移除连接控制器,设置节点初始位置

高明远

前置

移除连接

要删除连接，只需监听来自连接器本身或编辑器的断开连接事件，并删除具有连接器作为源或目标的连接。为了简单起见，我们将为 NodifyEditor 实现 DisconnectConnectorCommand。首先让我们将其添加到 EditorViewModel。
 

1. public class EditorViewModel
2. {
3.     public ICommand DisconnectConnectorCommand { get; }
4. [code]...
6. public EditorViewModel()
7. {
8.     DisconnectConnectorCommand = new DelegateCommand<ConnectorViewModel>(connector =>
9.     {
10.         var connection = Connections.First(x => x.Source == connector || x.Target == connector);
11.         connection.Source.IsConnected = false;  将连接器属性设为false
12.         connection.Target.IsConnected = false;
13.         Connections.Remove(connection);
14.     });
16.   <nodify:NodifyEditor ItemsSource="{Binding Nodes}"
17.                      Connections="{Binding Connections}"
18.                      PendingConnection="{Binding PendingConnection}"
19.                      DisconnectConnectorCommand="{Binding DisconnectConnectorCommand}">
20.   ...
21. <p></nodify:NodifyEditor></p>}

复制代码

}
[/code]
Xaml

1. <nodify:NodifyEditor ItemsSource="{Binding Nodes}"
2.                      Connections="{Binding Connections}"
3.                      PendingConnection="{Binding PendingConnection}"
4.                      DisconnectConnectorCommand="{Binding DisconnectConnectorCommand}">
5.   ...
6. <p></nodify:NodifyEditor></p>

复制代码

 
控制节点位置

如你所见，节点总是在屏幕的左上角。这是因为它们在图中的位置是 (0, 0)。让我们来改变这一点！
在 中添加一个 属性，类型为 ，并触发 事件。NodeViewModelLocationSystem.Windows.PointPropertyChanged

1. public class NodeViewModel : NotifyPropertyBase
2. {
3.      public string Title { get; set; }
4. [code] private Point _location;
5. public Point Location
6. {
7.      get => _location;
8.      set => Set(ref _location, value);
9. }
10. public ObservableCollection<ConnectorViewModel> Input { get; set; } = new ObservableCollection<ConnectorViewModel>();
11. public ObservableCollection<ConnectorViewModel> Output { get; set; } = new ObservableCollection<ConnectorViewModel>();

复制代码

}
[/code]
 
Xaml

1. <nodify:NodifyEditor ItemsSource="{Binding Nodes}"
2.                      Connections="{Binding Connections}"
3.                      PendingConnection="{Binding PendingConnection}">
4. [code]<nodify:NodifyEditor.ItemContainerStyle>
5.     <Style TargetType="{x:Type nodify:ItemContainer}">
6.         <Setter Property="Location"
7.                 Value="{Binding Location}" />
8.     </Style>
9. </nodify:NodifyEditor.ItemContainerStyle>
11. ...

复制代码

[/code]
现在你可以在构造节点时设置它们的位置。
源码

github：zt199510/NodifySamples (github.com)

来源:https://www.cnblogs.com/zt199510/p/18315740
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！