Merge pull request #82 from miroiu/feature/drag-drop

Added drag and drop example in Calculator app
miroiu · Jan 14, 2024 · 3732c8f · 3732c8f
2 parents 8064823 + 441e3fc
commit 3732c8f
Show file tree

Hide file tree

Showing 6 changed files with 169 additions and 64 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 > - 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

diff --git a/Examples/Nodify.Calculator/EditorView.xaml b/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">
@@ -98,7 +99,7 @@
             <Setter Property="BorderThickness" Value="2" />
         </Style>
     </UserControl.Resources>
-    
+
     <Grid>
         <nodify:NodifyEditor DataContext="{Binding Calculator}"
                              ItemsSource="{Binding Operations}"
@@ -111,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}"
@@ -287,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>
@@ -350,8 +355,48 @@
                 </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>
diff --git a/Examples/Nodify.Calculator/EditorView.xaml.cs b/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);
+            }
+        }
     }
 }
diff --git a/Examples/Nodify.Calculator/MainWindow.xaml b/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>

diff --git a/Nodify.sln b/Nodify.sln
@@ -1,7 +1,7 @@
 
 Microsoft Visual Studio Solution File, Format Version 12.00
-# Visual Studio Version 16
-VisualStudioVersion = 16.0.30406.217
+# Visual Studio Version 17
+VisualStudioVersion = 17.8.34330.188
 MinimumVisualStudioVersion = 10.0.40219.1
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Nodify", "Nodify\Nodify.csproj", "{A4349FD1-2774-42F2-90FD-7D8F4CA8BB71}"
 EndProject
@@ -13,7 +13,12 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Nodify.StateMachine", "Exam
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Nodify.Shared", "Examples\Nodify.Shared\Nodify.Shared.csproj", "{499C8539-9973-4102-B976-57DB3F3C7DF3}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Nodify.Calculator", "Examples\Nodify.Calculator\Nodify.Calculator.csproj", "{7ADD1DAF-B589-4742-8E72-872D2842E73D}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Nodify.Calculator", "Examples\Nodify.Calculator\Nodify.Calculator.csproj", "{7ADD1DAF-B589-4742-8E72-872D2842E73D}"
+EndProject
+Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution Items", "{88D231A7-D09F-492F-887F-DDBC46398284}"
+	ProjectSection(SolutionItems) = preProject
+		CHANGELOG.md = CHANGELOG.md
+	EndProjectSection
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution

diff --git a/Nodify/NodifyEditor.cs b/Nodify/NodifyEditor.cs
@@ -1359,5 +1359,34 @@ protected override void OnRenderSizeChanged(SizeChangedInfo sizeInfo)
 
             OnViewportUpdated();
         }
+
+        #region Utilities
+
+        /// <summary>
+        /// Translates the specified location to graph space coordinates (relative to the <see cref="ItemsHost" />).
+        /// </summary>
+        /// <param name="location">The location coordinates relative to <paramref name="relativeTo"/></param>
+        /// <param name="relativeTo">The element where the <paramref name="location"/> was calculated from.</param>
+        /// <returns>A location inside the graph.</returns>
+        public Point GetLocationInsideEditor(Point location, UIElement relativeTo)
+            => relativeTo.TranslatePoint(location, ItemsHost);
+
+        /// <summary>
+        /// Translates the event location to graph space coordinates (relative to the <see cref="ItemsHost" />).
+        /// </summary>
+        /// <param name="args">The drag event.</param>
+        /// <returns>A location inside the graph</returns>
+        public Point GetLocationInsideEditor(DragEventArgs args)
+            => args.GetPosition(ItemsHost);
+
+        /// <summary>
+        /// Translates the event location to graph space coordinates (relative to the <see cref="ItemsHost" />).
+        /// </summary>
+        /// <param name="args">The mouse event.</param>
+        /// <returns>A location inside the graph</returns>
+        public Point GetLocationInsideEditor(MouseEventArgs args)
+            => args.GetPosition(ItemsHost);
+
+        #endregion
     }
 }