Layers - Finished effects on layers, groups still missing

Effects - Added filter effect with different SkiaSharp image filters

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/LayerPropertiesViewModel.cs

@@ -1,5 +1,6 @@
 using System;
 using System.Collections.Generic;
+using System.Diagnostics;
 using System.Linq;
 using System.Windows;
 using System.Windows.Input;
@@ -14,13 +15,17 @@ using Artemis.UI.Ninject.Factories;
 using Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.LayerEffects;
 using Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline;
 using Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Tree;
+using Artemis.UI.Screens.Module.ProfileEditor.ProfileTree;
+using Artemis.UI.Screens.Module.ProfileEditor.ProfileTree.TreeItem;
 using Artemis.UI.Shared.Events;
 using Artemis.UI.Shared.Services.Interfaces;
+using GongSolutions.Wpf.DragDrop;
 using Stylet;
+using static Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.LayerPropertyGroupViewModel.ViewModelType;
 
 namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties
 {
-    public class LayerPropertiesViewModel : ProfileEditorPanelViewModel
+    public class LayerPropertiesViewModel : ProfileEditorPanelViewModel, IDropTarget
     {
         private readonly ILayerPropertyVmFactory _layerPropertyVmFactory;
         private LayerPropertyGroupViewModel _brushPropertyGroup;
@@ -215,6 +220,7 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties
                 LayerPropertyGroups.Add(_brushPropertyGroup);
             }
 
+            SortProperties();
             TimelineViewModel.UpdateKeyframes();
         }
 
@@ -244,9 +250,100 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties
                 LayerPropertyGroups.Add(_layerPropertyVmFactory.LayerPropertyGroupViewModel(layerEffect.BaseProperties, brushDescription));
             }
 
+            SortProperties();
             TimelineViewModel.UpdateKeyframes();
         }
 
+        private void SortProperties()
+        {
+            // Get all non-effect properties
+            var nonEffectProperties = LayerPropertyGroups.Where(l => l.GroupType != LayerEffectRoot).ToList();
+            // Order the effects
+            var effectProperties = LayerPropertyGroups.Where(l => l.GroupType == LayerEffectRoot).OrderBy(l => l.LayerPropertyGroup.LayerEffect.Order).ToList();
+
+            // Put the non-effect properties in front
+            for (var index = 0; index < nonEffectProperties.Count; index++)
+            {
+                var layerPropertyGroupViewModel = nonEffectProperties[index];
+                LayerPropertyGroups.Move(LayerPropertyGroups.IndexOf(layerPropertyGroupViewModel), index);
+            }
+
+            // Put the effect properties after, sorted by their order
+            for (var index = 0; index < effectProperties.Count; index++)
+            {
+                var layerPropertyGroupViewModel = effectProperties[index];
+                LayerPropertyGroups.Move(LayerPropertyGroups.IndexOf(layerPropertyGroupViewModel), index + nonEffectProperties.Count);
+            }
+        }
+
+        #endregion
+
+        #region Drag and drop
+
+        public void DragOver(IDropInfo dropInfo)
+        {
+            // Workaround for https://github.com/punker76/gong-wpf-dragdrop/issues/344
+            // Luckily we know the index can never be 1 so it's an easy enough fix
+            if (dropInfo.InsertIndex == 1)
+                return;
+
+            var source = dropInfo.Data as LayerPropertyGroupViewModel;
+            var target = dropInfo.TargetItem as LayerPropertyGroupViewModel;
+
+            if (source == target || target?.GroupType != LayerEffectRoot || source?.GroupType != LayerEffectRoot)
+                return;
+            
+            dropInfo.DropTargetAdorner = DropTargetAdorners.Insert;
+            dropInfo.Effects = DragDropEffects.Move;
+        }
+
+        public void Drop(IDropInfo dropInfo)
+        {
+            // Workaround for https://github.com/punker76/gong-wpf-dragdrop/issues/344
+            // Luckily we know the index can never be 1 so it's an easy enough fix
+            if (dropInfo.InsertIndex == 1)
+                return;
+
+            var source = dropInfo.Data as LayerPropertyGroupViewModel;
+            var target = dropInfo.TargetItem as LayerPropertyGroupViewModel;
+
+            if (source == target || target?.GroupType != LayerEffectRoot || source?.GroupType != LayerEffectRoot)
+                return;
+
+            if (dropInfo.InsertPosition == RelativeInsertPosition.BeforeTargetItem)
+                MoveBefore(source, target);
+            else if (dropInfo.InsertPosition == RelativeInsertPosition.AfterTargetItem)
+                MoveAfter(source, target);
+
+            ApplyCurrentEffectsOrder();
+            ProfileEditorService.UpdateSelectedProfile(true);
+        }
+
+        private void MoveBefore(LayerPropertyGroupViewModel source, LayerPropertyGroupViewModel target)
+        {
+            if (LayerPropertyGroups.IndexOf(target) == LayerPropertyGroups.IndexOf(source) + 1)
+                return;
+
+            LayerPropertyGroups.Move(LayerPropertyGroups.IndexOf(source), LayerPropertyGroups.IndexOf(target));
+        }
+
+        private void MoveAfter(LayerPropertyGroupViewModel source, LayerPropertyGroupViewModel target)
+        {
+            LayerPropertyGroups.Remove(source);
+            LayerPropertyGroups.Insert(LayerPropertyGroups.IndexOf(target) + 1, source);
+        }
+
+        private void ApplyCurrentEffectsOrder()
+        {
+            var order = 1;
+            foreach (var groupViewModel in LayerPropertyGroups.Where(p => p.GroupType == LayerEffectRoot))
+            {
+                
+                groupViewModel.UpdateOrder(order);
+                order++;
+            }
+        }
+
         #endregion
 
         #region Controls

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/LayerPropertyGroupViewModel.cs

@@ -155,5 +155,11 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties
         {
             NotifyOfPropertyChange(nameof(IsVisible));
         }
+
+        public void UpdateOrder(int order)
+        {
+            LayerPropertyGroup.LayerEffect.Order = order;
+            NotifyOfPropertyChange(nameof(IsExpanded));
+        }
     }
 }

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/Tree/TreePropertyGroupView.xaml

@@ -7,6 +7,7 @@
              xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
              xmlns:s="https://github.com/canton7/Stylet"
              xmlns:converters="clr-namespace:Artemis.UI.Converters"
+             xmlns:dd="urn:gong-wpf-dragdrop"
              mc:Ignorable="d"
              d:DataContext="{d:DesignInstance local:TreePropertyGroupViewModel}"
              d:DesignHeight="450" d:DesignWidth="800">
@@ -16,6 +17,7 @@
     <StackPanel>
         <!-- Type: None -->
         <TextBlock
+            dd:DragDrop.DragSourceIgnore="True"
             Text="{Binding LayerPropertyGroupViewModel.PropertyGroupDescription.Name}"
             ToolTip="{Binding LayerPropertyGroupViewModel.PropertyGroupDescription.Description}"
             VerticalAlignment="Center"
@@ -33,7 +35,7 @@
         </TextBlock>
 
         <!-- Type: General -->
-        <StackPanel Orientation="Horizontal" Margin="0 5">
+        <StackPanel Orientation="Horizontal" Margin="0 5" dd:DragDrop.DragSourceIgnore="True">
             <StackPanel.Style>
                 <Style TargetType="{x:Type StackPanel}">
                     <Setter Property="Visibility" Value="Collapsed" />
@@ -49,7 +51,7 @@
         </StackPanel>
 
         <!-- Type: Transform -->
-        <StackPanel Orientation="Horizontal" Margin="0 5">
+        <StackPanel Orientation="Horizontal" Margin="0 5" dd:DragDrop.DragSourceIgnore="True">
             <StackPanel.Style>
                 <Style TargetType="{x:Type StackPanel}">
                     <Setter Property="Visibility" Value="Collapsed" />
@@ -65,7 +67,7 @@
         </StackPanel>
 
         <!-- Type: LayerBrushRoot -->
-        <StackPanel Orientation="Horizontal" Margin="0 5">
+        <StackPanel Orientation="Horizontal" Margin="0 5" dd:DragDrop.DragSourceIgnore="True">
             <StackPanel.Style>
                 <Style TargetType="{x:Type StackPanel}">
                     <Setter Property="Visibility" Value="Collapsed" />
@@ -83,7 +85,7 @@
         </StackPanel>
 
         <!-- Type: LayerEffectRoot -->
-        <Grid Height="24">
+        <Grid Height="24" Cursor="SizeNS">
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="Auto" />
                 <ColumnDefinition Width="Auto" />

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/Tree/TreePropertyView.xaml

@@ -44,17 +44,14 @@
                 </Style>
             </ContentControl.Resources>
         </ContentControl>
-
+        
         <Button Grid.Column="3"
-                Style="{StaticResource MaterialDesignOutlinedButton}"
-                Margin="0,1,0,1.2"
-                Padding="0"
-                Width="80"
-                Height="20"
+                Style="{StaticResource MaterialDesignIconButton}"
                 ToolTip="Change the property's data binding"
-                VerticalAlignment="Center"
-                IsEnabled="False">
-            <TextBlock FontSize="10">DATA BINDING</TextBlock>
+                Width="24"
+                Height="24"
+                VerticalAlignment="Center">
+            <materialDesign:PackIcon Kind="VectorLink" Height="16" Width="16" />
         </Button>
     </Grid>
 </UserControl>

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/Tree/TreeView.xaml

@@ -8,6 +8,7 @@
              xmlns:converters="clr-namespace:Artemis.UI.Converters"
              xmlns:abstract="clr-namespace:Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Abstract"
              xmlns:layerProperties="clr-namespace:Artemis.UI.Screens.Module.ProfileEditor.LayerProperties"
+             xmlns:dd="urn:gong-wpf-dragdrop"
              mc:Ignorable="d"
              d:DesignHeight="450" d:DesignWidth="800"
              d:DataContext="{d:DesignInstance {x:Type local:TreeViewModel}}">
@@ -87,6 +88,9 @@
               HorizontalContentAlignment="Stretch"
               Background="{DynamicResource MaterialDesignToolBarBackground}"
               PreviewMouseWheel="{s:Action PropertyTreePreviewMouseWheel}"
+              dd:DragDrop.IsDragSource="True"
+              dd:DragDrop.IsDropTarget="True"
+              dd:DragDrop.DropHandler="{Binding LayerPropertiesViewModel}"
               Margin="0 -1">
         <TreeView.ItemContainerStyle>
             <Style TargetType="TreeViewItem" BasedOn="{StaticResource PropertyTreeStyle}">
@@ -99,7 +103,7 @@
                 <ContentControl s:View.Model="{Binding TreePropertyGroupViewModel}" />
             </HierarchicalDataTemplate>
             <DataTemplate DataType="{x:Type layerProperties:LayerPropertyViewModel}">
-                <ContentControl s:View.Model="{Binding TreePropertyBaseViewModel}" />
+                <ContentControl s:View.Model="{Binding TreePropertyBaseViewModel}" dd:DragDrop.DragSourceIgnore="True" />
             </DataTemplate>
         </TreeView.Resources>
     </TreeView>

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/Tree/TreeViewModel.cs

@@ -7,14 +7,14 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Tree
 {
     public class TreeViewModel : PropertyChangedBase
     {
-        private readonly LayerPropertiesViewModel _layerPropertiesViewModel;
 
         public TreeViewModel(LayerPropertiesViewModel layerPropertiesViewModel, BindableCollection<LayerPropertyGroupViewModel> layerPropertyGroups)
         {
-            _layerPropertiesViewModel = layerPropertiesViewModel;
+            LayerPropertiesViewModel = layerPropertiesViewModel;
             LayerPropertyGroups = layerPropertyGroups;
         }
 
+        public LayerPropertiesViewModel LayerPropertiesViewModel { get; }
         public BindableCollection<LayerPropertyGroupViewModel> LayerPropertyGroups { get; }
 
         public void PropertyTreePreviewMouseWheel(object sender, MouseWheelEventArgs e)