Skip to content

Commit

Permalink
Fix Light.axaml
Browse files Browse the repository at this point in the history 
Support to override the Connect and Disconnect from NodifyEditorViewModelBase method
Update README.md
  • Loading branch information
@MakesYT
MakesYT committed Jan 28, 2024
1 parent 66758ff commit e997b97
Show file tree
Hide file tree
Showing 4 changed files with 236 additions and 5 deletions.
13 changes: 11 additions & 2 deletions NodifyM.Avalonia.Example/MainWindowViewModel.cs
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
using System.Collections.ObjectModel;
using System;
using System.Collections.ObjectModel;
using Avalonia;
using NodifyM.Avalonia.ViewModelBase;

Expand Down Expand Up @@ -74,5 +75,13 @@ public MainWindowViewModel()
input1.IsConnected = true;
}


public override void Connect(ConnectorViewModelBase source, ConnectorViewModelBase target)
{
base.Connect(source, target);
}

public override void DisconnectConnector(ConnectorViewModelBase connector)
{
base.DisconnectConnector(connector);
}
}
2 changes: 1 addition & 1 deletion NodifyM.Avalonia/ResourceDictionaries/Light.axaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

<Color x:Key="NodifyEditor.BackgroundColor">White</Color>
<Color x:Key="NodifyEditor.ForegroundColor">Black</Color>
<Color x:Key="NodifyEditor.SelectionRectangleColor"></Color>
<Color x:Key="NodifyEditor.SelectionRectangleColor">#1e90ff</Color>

<!--ITEM CONTAINER-->

Expand Down
4 changes: 2 additions & 2 deletions NodifyM.Avalonia/ViewModelBase/NodifyEditorViewModelBase.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ public NodifyEditorViewModelBase()
PendingConnection = new PendingConnectionViewModelBase(this);
}
[RelayCommand]
private void DisconnectConnector(ConnectorViewModelBase connector)
public virtual void DisconnectConnector(ConnectorViewModelBase connector)
{
var connections = Enumerable.Where<ConnectionViewModelBase>(Connections, e => e.Source == connector || e.Target == connector).ToList();
for (var i = connections.Count - 1; i >= 0; i--)
Expand All @@ -39,7 +39,7 @@ private void DisconnectConnector(ConnectorViewModelBase connector)
}

}
public void Connect(ConnectorViewModelBase source, ConnectorViewModelBase target)
public virtual void Connect(ConnectorViewModelBase source, ConnectorViewModelBase target)
{
if (source.Flow == ConnectorViewModelBase.ConnectorFlow.Output)
{
Expand Down
222 changes: 222 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,225 @@ This project is a refactoring of [Nodify](https://github.com/miroiu/nodify) on t

## Notice
This project is still in its early stages and lacks many events compared to **Nodify**, but it is already available

## Example
#### Here is a complete example of control usage
xaml:
```xaml
<controls:NodifyEditor
Background="Transparent"
ItemsSource="{Binding Nodes }"
Connections="{Binding Connections}"
PendingConnection="{Binding PendingConnection}"
DisconnectConnectorCommand="{Binding DisconnectConnectorCommand}">
<controls:NodifyEditor.Resources>
<converters:FlowToDirectionConverter x:Key="FlowToDirectionConverter" />
</controls:NodifyEditor.Resources>
<controls:NodifyEditor.GridLineTemplate>
<DataTemplate>
<controls:LargeGridLine Width="{Binding $parent[controls:NodifyEditor].Bounds.Width}"
OffsetX="{Binding $parent[controls:NodifyEditor].OffsetX}"
OffsetY="{Binding $parent[controls:NodifyEditor].OffsetY}"
Zoom="{Binding $parent[controls:NodifyEditor].Zoom}"
Height="{Binding $parent[controls:NodifyEditor].Bounds.Height}"
Spacing="30"
Thickness="0.5"
Brush="LightGray"
ZIndex="-2"/>
</DataTemplate>
</controls:NodifyEditor.GridLineTemplate>
<controls:NodifyEditor.ConnectionTemplate>
<DataTemplate DataType="{x:Type viewModelBase:ConnectionViewModelBase}">
<Grid>
<controls:CircuitConnection
Direction="{Binding Source.Flow,Converter={StaticResource FlowToDirectionConverter}}"
Source="{Binding Source.Anchor}" Focusable="True"
Target="{Binding Target.Anchor}">
<controls:CircuitConnection.Stroke>
<SolidColorBrush Color="Red"
Opacity="0.5" />
</controls:CircuitConnection.Stroke>
</controls:CircuitConnection>
</Grid>

</DataTemplate>
</controls:NodifyEditor.ConnectionTemplate>
<controls:NodifyEditor.PendingConnectionTemplate>
<DataTemplate DataType="{x:Type viewModelBase:PendingConnectionViewModelBase}">
<controls:PendingConnection
StartedCommand="{Binding StartCommand}"
CompletedCommand="{Binding FinishCommand}"
EnablePreview="True"
EnableSnapping="True"
Direction="{Binding Source.Flow,Converter={StaticResource FlowToDirectionConverter}}"
PreviewTarget="{Binding PreviewTarget, Mode=OneWayToSource}">
<controls:PendingConnection.Stroke>
<SolidColorBrush Color="Red"
Opacity="0.5" />

</controls:PendingConnection.Stroke>
<controls:PendingConnection.Background>
<SolidColorBrush Color="DodgerBlue"
Opacity="0.8" />
</controls:PendingConnection.Background>
<TextBlock Text="{Binding PreviewText}" />


</controls:PendingConnection>

</DataTemplate>
</controls:NodifyEditor.PendingConnectionTemplate>
<controls:NodifyEditor.ItemTemplate>
<DataTemplate DataType="viewModelBase:NodeViewModelBase">
<controls:Node x:Name="Node"
Input="{Binding Input}"
Header="{Binding Title}"
VerticalAlignment="Center"
Output="{Binding Output}">
<controls:Node.Styles>
<Style Selector="controls|Node[IsSelected=False]:pointerover">
<Setter Property="BorderBrush" Value="AliceBlue"></Setter>
<Setter Property="BorderThickness" Value="2"></Setter>
</Style>
</controls:Node.Styles>
<controls:Node.InputConnectorTemplate>
<DataTemplate DataType="{x:Type viewModelBase:ConnectorViewModelBase}">
<controls:NodeInput
x:Name="NodeInput"
VerticalAlignment="Center"
IsConnected="{Binding IsConnected}"
Anchor="{Binding Anchor, Mode=OneWayToSource}">
<controls:NodeInput.Header>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center"
HorizontalAlignment="Right">

<TextBlock VerticalAlignment="Center" x:Name="textBlock"
Text="{Binding Title}" />
</StackPanel>
</controls:NodeInput.Header>
<controls:NodeInput.BorderBrush>
<SolidColorBrush
Color="CornflowerBlue"
Opacity="0.5" />
</controls:NodeInput.BorderBrush>
</controls:NodeInput>
</DataTemplate>
</controls:Node.InputConnectorTemplate>

<controls:Node.OutputConnectorTemplate>
<DataTemplate DataType="{x:Type viewModelBase:ConnectorViewModelBase}">
<controls:NodeOutput
x:Name="NodeOutput"
VerticalAlignment="Center"
IsConnected="{Binding IsConnected}"
Anchor="{Binding Anchor, Mode=OneWayToSource}">
<controls:NodeOutput.Header>
<StackPanel Orientation="Horizontal" VerticalAlignment="Center"
HorizontalAlignment="Right">

<TextBlock VerticalAlignment="Center" x:Name="textBlock"
Text="{Binding Title}" />
</StackPanel>
</controls:NodeOutput.Header>
<controls:NodeOutput.BorderBrush>
<SolidColorBrush
Color="CornflowerBlue"
Opacity="0.5" />
</controls:NodeOutput.BorderBrush>
</controls:NodeOutput>
</DataTemplate>
</controls:Node.OutputConnectorTemplate>
</controls:Node>
</DataTemplate>
</controls:NodifyEditor.ItemTemplate>

</controls:NodifyEditor>
```
ViewModel cs:
Notice: Bind ViewModel by yourself
```csharp
public partial class MainWindowViewModel : NodifyEditorViewModelBase
{
public MainWindowViewModel()
{
var input1 = new ConnectorViewModelBase()
{
Title = "AS 1",
Flow = ConnectorViewModelBase.ConnectorFlow.Input
};
var output1 = new ConnectorViewModelBase()
{
Title = "B 1",
Flow = ConnectorViewModelBase.ConnectorFlow.Output
};
Connections.Add(new ConnectionViewModelBase(output1, input1));
Nodes = new()
{
new NodeViewModelBase()
{
Location = new Point(100, 100),
Title = "Node 1",
Input = new ObservableCollection<ConnectorViewModelBase>
{
input1,

},
Output = new ObservableCollection<ConnectorViewModelBase>
{

new ConnectorViewModelBase()
{
Title = "Output 2",
Flow = ConnectorViewModelBase.ConnectorFlow.Output
}
}
},
new NodeViewModelBase()
{
Title = "Node 2",
Input = new ObservableCollection<ConnectorViewModelBase>
{
new ConnectorViewModelBase()
{
Title = "Input 1",
Flow = ConnectorViewModelBase.ConnectorFlow.Input
},
new ConnectorViewModelBase()
{
Flow = ConnectorViewModelBase.ConnectorFlow.Input,
Title = "Input 2"
}
},
Output = new ObservableCollection<ConnectorViewModelBase>
{
output1,
new ConnectorViewModelBase()
{
Flow = ConnectorViewModelBase.ConnectorFlow.Output,
Title = "Output 1"
},
new ConnectorViewModelBase()
{
Flow = ConnectorViewModelBase.ConnectorFlow.Output,
Title = "Output 2"
}
}
}
};
output1.IsConnected = true;
input1.IsConnected = true;
}
}
```
You can override Connect and Disconnect methods
```csharp
public override void Connect(ConnectorViewModelBase source, ConnectorViewModelBase target)
{
base.Connect(source, target);
}

public override void DisconnectConnector(ConnectorViewModelBase connector)
{
base.DisconnectConnector(connector);
}
```

0 comments on commit e997b97

Please sign in to comment.