Update release branch

.github/FUNDING.yml

@@ -1,3 +1,4 @@
 # These are supported funding model platforms
 
 github: miroiu
+custom: ["https://www.buymeacoffee.com/miroiu", "https://paypal.me/miroiuemanuel"]

CHANGELOG.md

@@ -6,6 +6,26 @@
 > - Features:
 > - Bugfixes:
 
+#### **Version 5.1.0**
+
+> - Breaking Changes:
+> - Features:
+>   - Added ItemContainer.SelectedBorderThickness dependency property
+>   - Added NodifyEditor.GetLocationInsideEditor
+> - Bugfixes:
+>   - Fixed PendingConnection.PreviewTarget not being set to null when there is no actual target
+>   - Fixed PendingConnection.PreviewTarget not being set on Connector.PendingConnectionStartedEvent
+>   - Fixed PendingConnection.PreviewTarget not being set to null on Connector.PendingConnectionCompletedEvent
+>   - Fixed connectors panel not being affected by Node.VerticalAlignment
+>   - Changing BorderThickness causes layout shift when selecting an item container
+>   - Fixed the unintentional movement caused by snapping correction
+
+#### **Version 5.0.2**
+
+> - Bugfixes:
+>   - Fixed NodeOutput content horizontal alignment
+>   - Fixed Connector not opening Context Menu
+
 #### **Version 5.0.1**
 
 > - Bugfixes:

Examples/Nodify.Calculator/EditorView.xaml

@@ -6,6 +6,7 @@
              xmlns:local="clr-namespace:Nodify.Calculator"
              xmlns:nodify="https://miroiu.github.io/nodify"
              xmlns:shared="clr-namespace:Nodify;assembly=Nodify.Shared" 
+             xmlns:sys="clr-namespace:System;assembly=System.Runtime"
              d:DataContext="{d:DesignInstance Type=local:EditorViewModel}"
              mc:Ignorable="d"
              d:DesignHeight="450" d:DesignWidth="800">
@@ -33,6 +34,40 @@
                       Transform="{Binding ViewportTransform, ElementName=Editor}"
                       Drawing="{StaticResource LargeGridGeometry}" />
 
+        <LinearGradientBrush x:Key="AnimatedBrush" StartPoint="0 0" EndPoint="1 0">
+            <GradientStop Color="#6366f1" Offset="0" />
+            <GradientStop Color="#a855f7" Offset="0.5" />
+            <GradientStop Color="#ec4899" Offset="1" />
+        </LinearGradientBrush>
+        <Border x:Key="AnimatedBorderPlaceholder" BorderBrush="{StaticResource AnimatedBrush}" />
+
+        <Storyboard x:Key="AnimateBorder" RepeatBehavior="Forever">
+            <PointAnimation Storyboard.TargetProperty="BorderBrush.(LinearGradientBrush.StartPoint)"
+                                                    Storyboard.Target="{StaticResource AnimatedBorderPlaceholder}"
+                                    Duration="0:0:2" To="1 0" />
+            <PointAnimation Storyboard.TargetProperty="BorderBrush.(LinearGradientBrush.StartPoint)"
+                                                    Storyboard.Target="{StaticResource AnimatedBorderPlaceholder}" 
+                                    Duration="0:0:2" To="1 1" BeginTime="0:0:2" />
+            <PointAnimation Storyboard.TargetProperty="BorderBrush.(LinearGradientBrush.StartPoint)"
+                                                    Storyboard.Target="{StaticResource AnimatedBorderPlaceholder}" 
+                                    Duration="0:0:2" To="0 1" BeginTime="0:0:4" />
+            <PointAnimation Storyboard.TargetProperty="BorderBrush.(LinearGradientBrush.StartPoint)"
+                                                    Storyboard.Target="{StaticResource AnimatedBorderPlaceholder}" 
+                                    Duration="0:0:2" To="0 0" BeginTime="0:0:6" />
+            <PointAnimation Storyboard.TargetProperty="BorderBrush.(LinearGradientBrush.EndPoint)"
+                                                    Storyboard.Target="{StaticResource AnimatedBorderPlaceholder}" 
+                                    Duration="0:0:2" To="1 1" />
+            <PointAnimation Storyboard.TargetProperty="BorderBrush.(LinearGradientBrush.EndPoint)" 
+                                                    Storyboard.Target="{StaticResource AnimatedBorderPlaceholder}"
+                                    Duration="0:0:2" To="0 1" BeginTime="0:0:2" />
+            <PointAnimation Storyboard.TargetProperty="BorderBrush.(LinearGradientBrush.EndPoint)"
+                                                    Storyboard.Target="{StaticResource AnimatedBorderPlaceholder}" 
+                                    Duration="0:0:2" To="0 0" BeginTime="0:0:4" />
+            <PointAnimation Storyboard.TargetProperty="BorderBrush.(LinearGradientBrush.EndPoint)"
+                                                    Storyboard.Target="{StaticResource AnimatedBorderPlaceholder}" 
+                                    Duration="0:0:2" To="1 0" BeginTime="0:0:6" />
+        </Storyboard>
+
         <local:ItemToListConverter x:Key="ItemToListConverter" />
 
         <DataTemplate x:Key="ConnectionTemplate"
@@ -60,8 +95,11 @@
                     Value="{Binding IsSelected}" />
             <Setter Property="ActualSize"
                     Value="{Binding Size, Mode=OneWayToSource}" />
+            <Setter Property="BorderBrush" Value="{Binding BorderBrush, Source={StaticResource AnimatedBorderPlaceholder}}" />
+            <Setter Property="BorderThickness" Value="2" />
         </Style>
     </UserControl.Resources>
+
     <Grid>
         <nodify:NodifyEditor DataContext="{Binding Calculator}"
                              ItemsSource="{Binding Operations}"
@@ -74,6 +112,8 @@
                              Background="{StaticResource SmallGridLinesDrawingBrush}"
                              ItemContainerStyle="{StaticResource ItemContainerStyle}"
                              GridCellSize="15"
+                             AllowDrop="True"
+                             Drop="OnDropNode"
                              x:Name="Editor">
             <nodify:NodifyEditor.Resources>
                 <Style TargetType="{x:Type nodify:NodeInput}"
@@ -250,7 +290,9 @@
                                                  ConnectionTemplate="{StaticResource ConnectionTemplate}"
                                                  ItemContainerStyle="{StaticResource ItemContainerStyle}"
                                                  Background="Transparent"
-                                                 GridCellSize="15"
+                                                 GridCellSize="15"                    
+                                                 AllowDrop="True"
+                                                 Drop="OnDropNode"
                                                  Visibility="{Binding DataContext.IsExpanded, RelativeSource={RelativeSource AncestorType=nodify:GroupingNode}, Converter={shared:BooleanToVisibilityConverter}}">
 
                                 <nodify:NodifyEditor.InputBindings>
@@ -300,15 +342,61 @@
                             Command="{Binding GroupSelectionCommand}" />
             </nodify:NodifyEditor.InputBindings>
 
+            <nodify:NodifyEditor.Triggers>
+                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
+                    <BeginStoryboard Name="AnimateBorder" Storyboard="{StaticResource AnimateBorder}" />
+                </EventTrigger>
+            </nodify:NodifyEditor.Triggers>
+
             <CompositeCollection>
                 <nodify:DecoratorContainer DataContext="{Binding OperationsMenu}"
                                            Location="{Binding Location}">
                     <local:OperationsMenuView />
                 </nodify:DecoratorContainer>
             </CompositeCollection>
         </nodify:NodifyEditor>
-        
+
         <Grid Background="{StaticResource LargeGridLinesDrawingBrush}"
               Panel.ZIndex="-2" />
+
+        <Border HorizontalAlignment="Right" 
+                MinWidth="200"
+                MaxWidth="300"
+                Padding="7"
+                Margin="10"
+                CornerRadius="3"
+                BorderThickness="2">
+            <Border.Background>
+                <SolidColorBrush Color="{DynamicResource BackgroundColor}"
+                                 Opacity="0.7" />
+            </Border.Background>
+            <ScrollViewer>
+                <ItemsControl ItemsSource="{Binding Calculator.OperationsMenu.AvailableOperations}">
+                    <ItemsControl.ItemContainerStyle>
+                        <Style>
+                            <Setter Property="FrameworkElement.Margin" Value="5"/>
+                            <Setter Property="FrameworkElement.HorizontalAlignment" Value="Left"/>
+                            <Setter Property="FrameworkElement.Cursor" Value="Hand"/>
+                            <Setter Property="FrameworkElement.ToolTip" Value="Drag and drop into the editor"/>
+                        </Style>
+                    </ItemsControl.ItemContainerStyle>
+                    <ItemsControl.ItemTemplate>
+                        <DataTemplate DataType="{x:Type local:OperationViewModel}">
+                            <nodify:Node Content="{Binding Title}"
+                                     Input="{Binding Input}"
+                                     BorderBrush="{StaticResource AnimatedBrush}"
+                                     BorderThickness="2"
+                                     MouseMove="OnNodeDrag">
+                                <nodify:Node.Output>
+                                    <CompositeCollection>
+                                        <sys:String>Output</sys:String>
+                                    </CompositeCollection>
+                                </nodify:Node.Output>
+                            </nodify:Node>
+                        </DataTemplate>
+                    </ItemsControl.ItemTemplate>
+                </ItemsControl>
+            </ScrollViewer>
+        </Border>
     </Grid>
 </UserControl>

Examples/Nodify.Calculator/EditorView.xaml.cs

@@ -34,5 +34,27 @@ private void CloseOperationsMenu(object sender, RoutedEventArgs e)
                 calculator.OperationsMenu.Close();
             }
         }
+
+        private void OnDropNode(object sender, DragEventArgs e)
+        {
+            if(e.Source is NodifyEditor editor && editor.DataContext is CalculatorViewModel calculator
+                && e.Data.GetData(typeof(OperationInfoViewModel)) is OperationInfoViewModel operation)
+            {
+                OperationViewModel op = OperationFactory.GetOperation(operation);
+                op.Location = editor.GetLocationInsideEditor(e);
+                calculator.Operations.Add(op);
+
+                e.Handled = true;
+            }
+        }
+
+        private void OnNodeDrag(object sender, MouseEventArgs e)
+        {
+            if(e.LeftButton == MouseButtonState.Pressed && ((FrameworkElement)sender).DataContext is OperationInfoViewModel operation)
+            { 
+                var data = new DataObject(typeof(OperationInfoViewModel), operation);
+                DragDrop.DoDragDrop(this, data, DragDropEffects.Copy);
+            }
+        }
     }
 }

Examples/Nodify.Calculator/MainWindow.xaml

@@ -54,77 +54,80 @@
                 </Style>
             </shared:TabControlEx.ItemContainerStyle>
         </shared:TabControlEx>
-        
+
         <Expander Header="Click to hide/show"
                   IsExpanded="True"
                   Margin="10"
                   HorizontalAlignment="Left"
                   VerticalAlignment="Bottom">
             <Border MaxWidth="325"
+                    MaxHeight="300"
                     CornerRadius="3">
                 <Border.Background>
                     <SolidColorBrush Color="{DynamicResource BackgroundColor}"
                                      Opacity="0.7" />
                 </Border.Background>
-                <StackPanel Margin="10"
-                            IsHitTestVisible="False">
-                    <StackPanel.Resources>
-                        <Style TargetType="{x:Type TextBlock}"
-                               BasedOn="{StaticResource {x:Type TextBlock}}">
-                            <Setter Property="Margin"
-                                    Value="0 0 0 5" />
-                        </Style>
-                    </StackPanel.Resources>
+                <ScrollViewer HorizontalScrollBarVisibility="Disabled">
+                    <StackPanel Margin="10"
+                                IsHitTestVisible="False">
+                        <StackPanel.Resources>
+                            <Style TargetType="{x:Type TextBlock}"
+                                   BasedOn="{StaticResource {x:Type TextBlock}}">
+                                <Setter Property="Margin"
+                                        Value="0 0 0 5" />
+                            </Style>
+                        </StackPanel.Resources>
 
-                    <StackPanel Margin="0 0 0 20">
-                        <TextBlock Text="(New) Drag a connection and drop it on the editor"
-                               TextWrapping="Wrap"
-                               Foreground="{DynamicResource NodeInput.BorderBrush}"
-                               FontWeight="Bold"/>
-                        <TextBlock Text="(New) CTRL + N : open new editor"
-                               TextWrapping="Wrap"
-                               Foreground="{DynamicResource NodeInput.BorderBrush}"
-                               FontWeight="Bold"/>
-                        <TextBlock Text="(New) CTRL + W : close current editor"
-                               TextWrapping="Wrap"
-                               Foreground="{DynamicResource NodeInput.BorderBrush}"
-                               FontWeight="Bold"/>
+                        <StackPanel Margin="0 0 0 20">
+                            <TextBlock Text="(New) Drag and drop nodes from the toolbox"
+                                   TextWrapping="Wrap"
+                                   Foreground="{DynamicResource NodeInput.BorderBrush}"
+                                   FontWeight="Bold"/>
+                        </StackPanel>
+                        <TextBlock TextWrapping="Wrap">
+                            <Run Foreground="Red"
+                                    FontWeight="Bold">CTRL + N/W</Run>
+                            <Run>: open/close editor</Run>
+                        </TextBlock>
+                        <TextBlock TextWrapping="Wrap">
+                            <Run Foreground="Red"
+                                    FontWeight="Bold">ALT + Click</Run>
+                            <Run>: disconnect connector</Run>
+                        </TextBlock>
+                        <TextBlock TextWrapping="Wrap">
+                            <Run Foreground="Red"
+                                    FontWeight="Bold">Right Click</Run>
+                            <Run>: show operations menu (create nodes)</Run>
+                        </TextBlock>
+                        <TextBlock TextWrapping="Wrap">
+                            <Run Foreground="Red"
+                                    FontWeight="Bold">Delete</Run>
+                            <Run>:  delete selection</Run>
+                        </TextBlock>
+                        <TextBlock TextWrapping="Wrap">
+                            <Run Foreground="Red"
+                                    FontWeight="Bold">CTRL + T</Run>
+                            <Run>: change theme</Run>
+                        </TextBlock>
+                        <TextBlock TextWrapping="Wrap">
+                            <Run Foreground="Red"
+                                    FontWeight="Bold">C</Run>
+                            <Run>: group selection (hold SHIFT and mouse drag the header to move the group node alone)</Run>
+                        </TextBlock>
+                        <TextBlock Text="Drag a connection and drop it on the editor"
+                                TextWrapping="Wrap"
+                                FontWeight="Bold" />
+                        <TextBlock Text="Hover over a connector to see its value"
+                                   TextWrapping="Wrap"
+                                   FontWeight="Bold" />
+                        <TextBlock Text="Create a Calculator node and double click it to open"
+                                   TextWrapping="Wrap"
+                                   FontWeight="Bold" />
+                        <TextBlock Text="Create an Operation Graph and add operations to it"
+                                   TextWrapping="Wrap"
+                                   FontWeight="Bold" />
                     </StackPanel>
-                    <TextBlock TextWrapping="Wrap">
-                <Run Foreground="Red"
-                        FontWeight="Bold">ALT + Click</Run>
-                <Run>: disconnect connector</Run>
-                    </TextBlock>
-                    <TextBlock TextWrapping="Wrap">
-                <Run Foreground="Red"
-                        FontWeight="Bold">Right Click</Run>
-                <Run>: show operations menu (create nodes)</Run>
-                    </TextBlock>
-                    <TextBlock TextWrapping="Wrap">
-                <Run Foreground="Red"
-                        FontWeight="Bold">Delete</Run>
-                <Run>:  delete selection</Run>
-                    </TextBlock>
-                    <TextBlock TextWrapping="Wrap">
-                <Run Foreground="Red"
-                        FontWeight="Bold">CTRL + T</Run>
-                <Run>: change theme</Run>
-                    </TextBlock>
-                    <TextBlock TextWrapping="Wrap">
-                <Run Foreground="Red"
-                        FontWeight="Bold">C</Run>
-                <Run>: group selection (hold SHIFT and mouse drag the header to move the group node alone)</Run>
-                    </TextBlock>
-                    <TextBlock Text="Hover over a connector to see its value"
-                               TextWrapping="Wrap"
-                               FontWeight="Bold" />
-                    <TextBlock Text="Create a Calculator node and double click it to open"
-                               TextWrapping="Wrap"
-                               FontWeight="Bold" />
-                    <TextBlock Text="Create an Operation Graph and add operations to it"
-                               TextWrapping="Wrap"
-                               FontWeight="Bold" />
-                </StackPanel>
+                </ScrollViewer>
             </Border>
         </Expander>
     </Grid>

Examples/Nodify.Calculator/Nodify.Calculator.csproj

@@ -10,7 +10,7 @@
     <LangVersion>8.0</LangVersion>
   </PropertyGroup>
   <ItemGroup>
-    <PackageReference Include="StringMath" Version="4.0.0" />
+    <PackageReference Include="StringMath" Version="4.1.1" />
   </ItemGroup>
 
   <ItemGroup>

Examples/Nodify.Playground/BaseSettingViewModel.cs

@@ -0,0 +1,40 @@
+using System;
+
+namespace Nodify.Playground
+{
+    public class BaseSettingViewModel<T> : ObservableObject, ISettingViewModel
+    {
+        public string Name { get; }
+        public string? Description { get; }
+
+        private object? _value;
+
+        object? ISettingViewModel.Value
+        {
+            get => _value;
+            set => SetProperty(ref _value, value);
+        }
+
+        public SettingsType Type { get;}
+
+        public T Value
+        {
+            get => (T)((ISettingViewModel)this).Value!;
+            set => ((ISettingViewModel)this).Value = value;
+        }
+
+        public BaseSettingViewModel(string name, string? description = default)
+        {
+            Name = name;
+            Description = description;
+            Type = typeof(T) switch
+            {
+                { } t when t == typeof(bool) => SettingsType.Boolean,
+                { } t when t == typeof(uint) || t == typeof(double) => SettingsType.Number,
+                { } t when t == typeof(PointEditor) => SettingsType.Point,
+                { IsEnum: true } => SettingsType.Option,
+                _ => throw new InvalidOperationException($"Type {typeof(T).Name} does not have a matching {nameof(SettingsType)}.")
+            };
+        }
+    }
+}