Updated UX

PixiEditor/Models/DataHolders/Document/Document.Layers.cs

@@ -54,9 +54,12 @@ namespace PixiEditor.Models.DataHolders
             get => activeLayerGuid;
             set
             {
-                activeLayerGuid = value;
-                RaisePropertyChanged(nameof(ActiveLayerGuid));
-                RaisePropertyChanged(nameof(ActiveLayer));
+                if (value != activeLayerGuid)
+                {
+                    activeLayerGuid = value;
+                    RaisePropertyChanged(nameof(ActiveLayerGuid));
+                    RaisePropertyChanged(nameof(ActiveLayer));
+                }
             }
         }
 

PixiEditor/Models/Layers/LayerStructure.cs

@@ -123,7 +123,7 @@ namespace PixiEditor.Models.Layers
         public GuidStructureItem AddNewGroup(string groupName, Guid childLayer)
         {
             var parent = GetGroupByLayer(childLayer);
-            GuidStructureItem group = new(groupName, childLayer);
+            GuidStructureItem group = new(groupName, childLayer) { IsExpanded = true };
             if (parent == null)
             {
                 Groups.Add(group);

PixiEditor/ViewModels/SubViewModels/Main/LayersViewModel.cs

@@ -6,6 +6,7 @@ using PixiEditor.Helpers;
 using PixiEditor.Models.Controllers;
 using PixiEditor.Models.Layers;
 using PixiEditor.Models.Layers.Utils;
+using PixiEditor.Views.UserControls;
 
 namespace PixiEditor.ViewModels.SubViewModels.Main
 {
@@ -90,6 +91,10 @@ namespace PixiEditor.ViewModels.SubViewModels.Main
             {
                 DeleteGroup(group.GroupGuid);
             }
+            else if (parameter is LayerGroupControl groupControl)
+            {
+                DeleteGroup(groupControl.GroupGuid);
+            }
         }
 
         public void DeleteGroup(object parameter)
@@ -144,6 +149,7 @@ namespace PixiEditor.ViewModels.SubViewModels.Main
 
         public void NewLayer(object parameter)
         {
+            bool isCollapsed = parameter is LayerGroupControl control && !control.GroupData.IsExpanded;
             var doc = Owner.BitmapManager.ActiveDocument;
             var activeLayerParent = doc.LayerStructure.GetGroupByLayer(doc.ActiveLayerGuid);
             Guid lastActiveLayerGuid = doc.ActiveLayerGuid;
@@ -153,6 +159,12 @@ namespace PixiEditor.ViewModels.SubViewModels.Main
             if (doc.Layers.Count > 1)
             {
                 doc.MoveLayerInStructure(doc.Layers[^1].LayerGuid, lastActiveLayerGuid, true);
+                if (isCollapsed)
+                {
+                    LayerGroupControl groupControl = parameter as LayerGroupControl;
+                    doc.LayerStructure.AssignParent(doc.ActiveLayerGuid, groupControl.GroupData.Parent?.GroupGuid);
+                }
+
                 doc.UndoManager.UndoStack.Pop();
             }
         }

PixiEditor/Views/UserControls/LayerGroupControl.xaml

@@ -20,8 +20,9 @@
                 <RowDefinition Height="15"/>
                 <RowDefinition Height="10"/>
             </Grid.RowDefinitions>
-            <Grid AllowDrop="True" DragEnter="Grid_DragEnter" Drop="Grid_Drop_Top" DragLeave="Grid_DragLeave" Grid.Row="0" Grid.ColumnSpan="3" Background="Transparent"/>
-            <Grid Grid.Row="0" Grid.RowSpan="3">
+            <Grid AllowDrop="True" DragEnter="Grid_DragEnter" Drop="Grid_Drop_Top" DragLeave="Grid_DragLeave" Grid.Row="0" Grid.ColumnSpan="3" Background="Transparent" Panel.ZIndex="3"/>
+            <Grid x:Name="middleDropGrid" Grid.Row="1" AllowDrop="True" Panel.ZIndex="2" Background="Transparent" DragEnter="Grid_CenterEnter" Drop="Grid_Drop_Center" DragLeave="Grid_CenterLeave"></Grid>
+            <Grid x:Name="centerGrid" Grid.Row="0" Grid.RowSpan="3" Background="Transparent">
                 <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="30"/>
                     <ColumnDefinition Width="*"/>

PixiEditor/Views/UserControls/LayerGroupControl.xaml.cs

@@ -137,6 +137,11 @@ namespace PixiEditor.Views.UserControls
             item.Background = LayerItem.HighlightColor;
         }
 
+        private void Grid_CenterEnter(object sender, DragEventArgs e)
+        {
+            centerGrid.Background = LayerItem.HighlightColor;
+        }
+
         private void Grid_DragLeave(object sender, DragEventArgs e)
         {
             Grid grid = (Grid)sender;
@@ -144,6 +149,11 @@ namespace PixiEditor.Views.UserControls
             LayerItem.RemoveDragEffect(grid);
         }
 
+        private void Grid_CenterLeave(object sender, DragEventArgs e)
+        {
+            LayerItem.RemoveDragEffect(centerGrid);
+        }
+
         private void HandleDrop(IDataObject dataObj, Grid grid, bool above)
         {
             Guid referenceLayer = above ? GroupData.EndLayerGuid : GroupData.StartLayerGuid;
@@ -151,25 +161,28 @@ namespace PixiEditor.Views.UserControls
 
             if (dataObj.GetDataPresent(LayerContainerDataName))
             {
-                HandleLayerDrop(dataObj, above, referenceLayer);
+                HandleLayerDrop(dataObj, above, referenceLayer, false);
             }
 
             if (dataObj.GetDataPresent(LayerGroupControlDataName))
             {
-                HandleGroupControlDrop(dataObj, referenceLayer, above);
+                HandleGroupControlDrop(dataObj, referenceLayer, above, false);
             }
         }
 
-        private void HandleLayerDrop(IDataObject dataObj, bool above, Guid referenceLayer)
+        private void HandleLayerDrop(IDataObject dataObj, bool above, Guid referenceLayer, bool putItInside) // step brother
         {
             var data = (LayerStructureItemContainer)dataObj.GetData(LayerContainerDataName);
             Guid group = data.Layer.LayerGuid;
 
             data.LayerCommandsViewModel.Owner.BitmapManager.ActiveDocument.MoveLayerInStructure(group, referenceLayer, above);
-            data.LayerCommandsViewModel.Owner.BitmapManager.ActiveDocument.LayerStructure.AssignParent(group, GroupData?.Parent?.GroupGuid);
+
+            Guid? refGuid = putItInside ? GroupData?.GroupGuid : GroupData?.Parent?.GroupGuid;
+
+            data.LayerCommandsViewModel.Owner.BitmapManager.ActiveDocument.LayerStructure.AssignParent(group, refGuid);
         }
 
-        private void HandleGroupControlDrop(IDataObject dataObj, Guid referenceLayer, bool above)
+        private void HandleGroupControlDrop(IDataObject dataObj, Guid referenceLayer, bool above, bool putItInside) // daddy
         {
             var data = (LayerGroupControl)dataObj.GetData(LayerGroupControlDataName);
             var document = data.LayersViewModel.Owner.BitmapManager.ActiveDocument;
@@ -185,26 +198,50 @@ namespace PixiEditor.Views.UserControls
 
             Layer layer = document.Layers.First(x => x.LayerGuid == referenceLayer);
             int indexOfReferenceLayer = Math.Clamp(document.Layers.IndexOf(layer) + modifier, 0, document.Layers.Count);
-            MoveGroupWithTempLayer(above, document, group, indexOfReferenceLayer);
+            MoveGroupWithTempLayer(above, document, group, indexOfReferenceLayer, putItInside);
         }
 
-        private void MoveGroupWithTempLayer(bool above, Models.DataHolders.Document document, Guid group, int indexOfReferenceLayer)
+        private void MoveGroupWithTempLayer(bool above, Models.DataHolders.Document document, Guid group, int indexOfReferenceLayer, bool putItInside) // ¯\_(ツ)_/¯
         {
             // The trick here is to insert a temp layer, assign group to it, then delete it.
             Layer tempLayer = new("_temp");
             document.Layers.Insert(indexOfReferenceLayer, tempLayer);
 
-            document.LayerStructure.AssignParent(tempLayer.LayerGuid, GroupData?.Parent?.GroupGuid);
+            Guid? refGuid = putItInside ? GroupData?.GroupGuid : GroupData?.Parent?.GroupGuid;
+
+            document.LayerStructure.AssignParent(tempLayer.LayerGuid, refGuid);
             document.MoveGroupInStructure(group, tempLayer.LayerGuid, above);
             document.LayerStructure.AssignParent(tempLayer.LayerGuid, null);
             document.RemoveLayer(tempLayer, false);
+        }
+
+        private void HandleDropInside(IDataObject dataObj, Grid grid)
+        {
+            Guid referenceLayer = GroupData.EndLayerGuid;
+            LayerItem.RemoveDragEffect(grid);
+
+            if (dataObj.GetDataPresent(LayerContainerDataName))
+            {
+                HandleLayerDrop(dataObj, true, referenceLayer, true);
+            }
+
+            if (dataObj.GetDataPresent(LayerGroupControlDataName))
+            {
+                HandleGroupControlDrop(dataObj, referenceLayer, true, true);
+            }
         }
 
         private void Grid_Drop_Top(object sender, DragEventArgs e)
         {
             HandleDrop(e.Data, (Grid)sender, true);
-        }
-
+        }
+
+        private void Grid_Drop_Center(object sender, DragEventArgs e)
+        {
+            HandleDropInside(e.Data, (Grid)sender);
+            LayerItem.RemoveDragEffect(centerGrid);
+        }
+
         private void Grid_Drop_Bottom(object sender, DragEventArgs e)
         {
             HandleDrop(e.Data, (Grid)sender, false);
@@ -213,7 +250,11 @@ namespace PixiEditor.Views.UserControls
         private void Border_MouseDown(object sender, MouseButtonEventArgs e)
         {
             var doc = LayersViewModel.Owner.BitmapManager.ActiveDocument;
-            doc.SetMainActiveLayer(doc.Layers.IndexOf(doc.Layers.First(x => x.LayerGuid == GroupData.EndLayerGuid)));
+            var layer = doc.Layers.First(x => x.LayerGuid == GroupData.EndLayerGuid);
+            if (GroupData.IsExpanded && doc.ActiveLayerGuid != layer.LayerGuid)
+            {
+                doc.SetMainActiveLayer(doc.Layers.IndexOf(layer));
+            }
         }
 
         private void CheckBox_Checked(object sender, RoutedEventArgs e)

PixiEditor/Views/UserControls/LayersManager.xaml

@@ -23,20 +23,24 @@
             <StackPanel Orientation="Horizontal" DockPanel.Dock="Left">
                 <Button Command="{Binding LayerCommandsViewModel.NewLayerCommand, ElementName=layersManager}" 
                         Height="24" Width="24" Cursor="Hand" ToolTip="New Layer"
+                        CommandParameter="{Binding Path=SelectedItem, ElementName=layersManager}"
                                                 HorizontalAlignment="Stretch" Margin="5"
                                                 Style="{StaticResource ToolButtonStyle}">
                     <Button.Background>
                         <ImageBrush ImageSource="/Images/Layer-add.png"/>
                     </Button.Background>
                 </Button>
-                <Button Command="{Binding LayerCommandsViewModel.NewGroupCommand, ElementName=layersManager}" Height="24" Width="24" ToolTip="New Group" Cursor="Hand"
+                <Button Command="{Binding LayerCommandsViewModel.NewGroupCommand, ElementName=layersManager}" 
+                        CommandParameter="{Binding Path=SelectedItem, ElementName=layersManager}"
+                        Height="24" Width="24" ToolTip="New Group" Cursor="Hand"
                                                 HorizontalAlignment="Stretch" Margin="5"
                                                 Style="{StaticResource ToolButtonStyle}">
                     <Button.Background>
                         <ImageBrush ImageSource="/Images/Folder-add.png"/>
                     </Button.Background>
                 </Button>
-                <Button Command="{Binding LayerCommandsViewModel.DeleteSelectedCommand, ElementName=layersManager}" Height="24" Width="24" ToolTip="Delete selected" CommandParameter="{Binding ElementName=treeView, Path=SelectedItem}" Cursor="Hand"
+                <Button Command="{Binding LayerCommandsViewModel.DeleteSelectedCommand, ElementName=layersManager}"
+                        CommandParameter="{Binding ElementName=layersManager, Path=SelectedItem}" Height="24" Width="24" ToolTip="Delete selected" Cursor="Hand"
                                                 HorizontalAlignment="Stretch" Margin="5"
                                                 Style="{StaticResource ToolButtonStyle}">
                     <Button.Background>

PixiEditor/Views/UserControls/LayersManager.xaml.cs

@@ -1,12 +1,10 @@
 using System;
 using System.Collections.ObjectModel;
-using System.Linq;
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Media;
 using PixiEditor.Models.Controllers;
 using PixiEditor.Models.Layers;
-using PixiEditor.Models.Layers.Utils;
 using PixiEditor.Models.Undo;
 using PixiEditor.ViewModels.SubViewModels.Main;
 
@@ -16,9 +14,18 @@ namespace PixiEditor.Views.UserControls
     /// Interaction logic for LayersManager.xaml.
     /// </summary>
     public partial class LayersManager : UserControl
-    {
-        private object cachedItem;
-
+    {
+        public object SelectedItem
+        {
+            get { return (object)GetValue(SelectedItemProperty); }
+            set { SetValue(SelectedItemProperty, value); }
+        }
+
+        // Using a DependencyProperty as the backing store for SelectedItem.  This enables animation, styling, binding, etc...
+        public static readonly DependencyProperty SelectedItemProperty =
+            DependencyProperty.Register("SelectedItem", typeof(object), typeof(LayersManager), new PropertyMetadata(0));
+
+
         public ObservableCollection<object> LayerTreeRoot
         {
             get { return (ObservableCollection<object>)GetValue(LayerTreeRootProperty); }
@@ -69,8 +76,8 @@ namespace PixiEditor.Views.UserControls
                     {
                         doc.AddPropertyChangedCallback(nameof(doc.ActiveLayer), () =>
                         {
-                            manager.cachedItem = doc.ActiveLayer;
-                            manager.SetInputOpacity(manager.cachedItem);
+                            manager.SelectedItem = doc.ActiveLayer;
+                            manager.SetInputOpacity(manager.SelectedItem);
                         });
                     }
                 });
@@ -149,7 +156,7 @@ namespace PixiEditor.Views.UserControls
         {
             float val = numberInput.Value / 100f;
 
-            object item = cachedItem;
+            object item = SelectedItem;
 
             if (item is Layer layer)
             {
@@ -194,7 +201,7 @@ namespace PixiEditor.Views.UserControls
 
         private void TreeView_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
         {
-            SetInputOpacity(cachedItem);
+            SetInputOpacity(SelectedItem);
         }
 
         private void TreeView_PreviewMouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
@@ -254,7 +261,7 @@ namespace PixiEditor.Views.UserControls
 
         private void SelectActiveItem(object sender, System.Windows.Input.MouseButtonEventArgs e)
         {
-            cachedItem = sender;
+            SelectedItem = sender;
         }
     }
 }