Active layer in timeline

src/PixiEditor/Styles/Templates/Timeline.axaml

@@ -11,7 +11,8 @@
                     xmlns:system="clr-namespace:System;assembly=System.Runtime"
                     xmlns:ui1="clr-namespace:PixiEditor.UI.Common.Localization;assembly=PixiEditor.UI.Common"
                     xmlns:controls="clr-namespace:PixiEditor.UI.Common.Controls;assembly=PixiEditor.UI.Common"
-                    xmlns:behaviors="clr-namespace:PixiEditor.UI.Common.Behaviors;assembly=PixiEditor.UI.Common">
+                    xmlns:behaviors="clr-namespace:PixiEditor.UI.Common.Behaviors;assembly=PixiEditor.UI.Common"
+                    xmlns:viewModels="clr-namespace:PixiEditor.ViewModels">
     <ControlTheme TargetType="animations:Timeline" x:Key="{x:Type animations:Timeline}">
         <Setter Property="Template">
             <ControlTemplate>
@@ -277,7 +278,8 @@
                                     <ItemsControl.DataTemplates>
                                         <DataTemplate DataType="document:CelGroupViewModel">
                                             <animations:TimelineGroupHeader Height="70"
-                                                                            Item="{Binding}" />
+                                                                            SelectCommand="{xaml:Command PixiEditor.Layer.SelectActiveMember, UseProvided=True}"
+                                                                            Item="{Binding}"/>
                                         </DataTemplate>
                                     </ItemsControl.DataTemplates>
                                     <ItemsControl.Styles>
@@ -331,6 +333,7 @@
                                                 Scale="{Binding Scale, RelativeSource={RelativeSource FindAncestor, AncestorType=animations:Timeline}}"
                                                 IsEnabled="{Binding IsVisible}"
                                                 IsSelected="{Binding IsSelected, Mode=TwoWay}"
+                                                SelectLayerCommand="{xaml:Command PixiEditor.Layer.SelectActiveMember, UseProvided=True}"
                                                 IsCollapsed="{Binding IsCollapsed}"
                                                 Min="{Binding ElementName=PART_TimelineSlider, Path=Minimum}"
                                                 Item="{Binding}">

src/PixiEditor/Styles/Templates/TimelineGroupHeader.axaml

@@ -7,7 +7,8 @@
     <ControlTheme TargetType="animations:TimelineGroupHeader" x:Key="{x:Type animations:TimelineGroupHeader}">
         <Setter Property="Template">
             <ControlTemplate>
-                <Border BorderBrush="{DynamicResource ThemeBorderMidBrush}" BorderThickness="0 0 1 1">
+                <Border Background="{TemplateBinding Background}" BorderBrush="{DynamicResource ThemeBorderMidBrush}"
+                        BorderThickness="0 0 1 1">
                     <DockPanel LastChildFill="False" VerticalAlignment="Center">
                         <CheckBox VerticalAlignment="Center" Classes="ImageCheckBox" DockPanel.Dock="Left"
                                   IsChecked="{Binding Item.IsVisible, RelativeSource={RelativeSource TemplatedParent}}" />
@@ -29,11 +30,18 @@
                                 Width="60" Height="60" RenderOptions.BitmapInterpolationMode="None"/>
                         </Border>
                         <TextBlock Margin="5 0 0 0" VerticalAlignment="Center" Text="{Binding Item.LayerName, RelativeSource={RelativeSource TemplatedParent}}" />
-                        <ToggleButton Name="PART_CollapseButton" Margin="0 0 5 0" DockPanel.Dock="Right" Classes="ExpandCollapseToggleStyle" HorizontalAlignment="Right" VerticalAlignment="Center" />
+                        <ToggleButton Background="Transparent" Name="PART_CollapseButton" Margin="0 0 5 0" DockPanel.Dock="Right" Classes="ExpandCollapseToggleStyle" HorizontalAlignment="Right" VerticalAlignment="Center" />
                     </DockPanel>
                 </Border>
             </ControlTemplate>
         </Setter>
+
+        <Style Selector="^">
+            <Setter Property="Background" Value="Transparent" />
+        </Style>
+        <Style Selector="^:selected">
+            <Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush2}" />
+        </Style>
     </ControlTheme>
 
 </ResourceDictionary>

src/PixiEditor/ViewModels/Document/AnimationDataViewModel.cs

@@ -499,9 +499,11 @@ internal class AnimationDataViewModel : ObservableObject, IAnimationHandler
             return true;
         }
 
+        var reversedLayers = allLayers.Reverse().ToList();
+
         for (int i = 0; i < groups.Count; i++)
         {
-            if (groups[i].LayerGuid != allLayers.ElementAt(i).Id)
+            if (groups[0].LayerGuid != reversedLayers.ElementAt(i).Id)
             {
                 return true;
             }

src/PixiEditor/ViewModels/Document/CelGroupViewModel.cs

@@ -2,6 +2,7 @@
 using System.Collections.Specialized;
 using System.ComponentModel;
 using System.Reactive.Linq;
+using PixiEditor.Models.Controllers;
 using PixiEditor.Models.DocumentModels;
 using PixiEditor.Models.Handlers;
 
@@ -22,6 +23,8 @@ internal class CelGroupViewModel : CelViewModel, ICelGroupHandler
 
     public string LayerName => Document.StructureHelper.Find(LayerGuid).NodeNameBindable;
 
+    public bool IsGroupSelected => Document.SelectedStructureMember.Id == LayerGuid;
+
     public bool IsCollapsed
     {
         get => _isCollapsed;
@@ -65,6 +68,16 @@ internal class CelGroupViewModel : CelViewModel, ICelGroupHandler
                 OnPropertyChanged(nameof(LayerName));
             }
         };
+
+        Document.PropertyChanged += DocumentOnPropertyChanged;
+    }
+
+    private void DocumentOnPropertyChanged(object? sender, PropertyChangedEventArgs e)
+    {
+        if(e.PropertyName == nameof(IDocument.SelectedStructureMember))
+        {
+            OnPropertyChanged(nameof(IsGroupSelected));
+        }
     }
 
     private void ChildrenOnCollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)

src/PixiEditor/ViewModels/SubViewModels/LayersViewModel.cs

@@ -186,6 +186,20 @@ internal class LayersViewModel : SubViewModel<ViewModelMain>
         layerVm.LockTransparencyBindable = !layerVm.LockTransparencyBindable;
     }
 
+    [Command.Internal("PixiEditor.Layer.SelectActiveMember", AnalyticsTrack = true)]
+    public void SelectActiveMember(Guid memberGuid)
+    {
+        var doc = Owner.DocumentManagerSubViewModel.ActiveDocument;
+        if (doc is null)
+            return;
+
+        var member = doc.StructureHelper.Find(memberGuid);
+        if (member is null)
+            return;
+
+        doc.Operations.SetSelectedMember(member.Id);
+    }
+
     [Command.Internal("PixiEditor.Layer.OpacitySliderDragStarted")]
     public void OpacitySliderDragStarted()
     {

src/PixiEditor/Views/Animations/KeyFrame.cs

@@ -1,4 +1,5 @@
-using Avalonia;
+using System.Windows.Input;
+using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Metadata;
 using Avalonia.Controls.Presenters;
@@ -60,16 +61,34 @@ internal class KeyFrame : TemplatedControl
         get { return (double)GetValue(ScaleProperty); }
         set { SetValue(ScaleProperty, value); }
     }
-    
+
+    public ICommand SelectLayerCommand
+    {
+        get { return (ICommand)GetValue(SelectLayerCommandProperty); }
+        set { SetValue(SelectLayerCommandProperty, value); }
+    }
+
     private InputElement _resizePanelRight;
     private InputElement _resizePanelLeft;
-    
+    public static readonly StyledProperty<ICommand> SelectLayerCommandProperty = AvaloniaProperty.Register<KeyFrame, ICommand>("SelectLayerCommand");
+
     static KeyFrame()
     {
         IsSelectedProperty.Changed.Subscribe(IsSelectedChanged);
         IsCollapsedProperty.Changed.Subscribe(IsCollapsedChanged);
     }
 
+    public KeyFrame()
+    {
+        PointerPressed += (sender, args) =>
+        {
+            if (args.Source is Control { DataContext: CelViewModel celViewModel })
+            {
+                SelectLayerCommand?.Execute(celViewModel.LayerGuid);
+            }
+        };
+    }
+
     protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
     {
         base.OnApplyTemplate(e);

src/PixiEditor/Views/Animations/TimelineGroupHeader.cs

@@ -1,4 +1,6 @@
-using Avalonia;
+using System.ComponentModel;
+using System.Windows.Input;
+using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Controls.Metadata;
 using Avalonia.Controls.Primitives;
@@ -12,8 +14,11 @@ namespace PixiEditor.Views.Animations;
 [PseudoClasses(":collapsed")]
 internal class TimelineGroupHeader : TemplatedControl
 {
-    public static readonly StyledProperty<CelGroupViewModel> ItemProperty = AvaloniaProperty.Register<TimelineGroupHeader, CelGroupViewModel>(
-        nameof(Item));
+    public static readonly StyledProperty<ICommand> SelectCommandProperty = AvaloniaProperty.Register<TimelineGroupHeader, ICommand>("SelectCommand");
+
+    public static readonly StyledProperty<CelGroupViewModel> ItemProperty =
+        AvaloniaProperty.Register<TimelineGroupHeader, CelGroupViewModel>(
+            nameof(Item));
 
     public CelGroupViewModel Item
     {
@@ -21,6 +26,49 @@ internal class TimelineGroupHeader : TemplatedControl
         set => SetValue(ItemProperty, value);
     }
 
+    public ICommand SelectCommand
+    {
+        get { return (ICommand)GetValue(SelectCommandProperty); }
+        set { SetValue(SelectCommandProperty, value); }
+    }
+
+    static TimelineGroupHeader()
+    {
+        ItemProperty.Changed.AddClassHandler<TimelineGroupHeader>((x, e) =>
+        {
+            if (e.OldValue is CelGroupViewModel oldItem)
+            {
+                oldItem.PropertyChanged -= x.NewItemOnPropertyChanged;
+                x.PseudoClasses.Set(":selected", oldItem.IsGroupSelected);
+            }
+
+            if (e.NewValue is CelGroupViewModel newItem)
+            {
+                newItem.PropertyChanged += x.NewItemOnPropertyChanged;
+                x.PseudoClasses.Set(":selected", newItem.IsGroupSelected);
+            }
+        });
+    }
+
+    public TimelineGroupHeader()
+    {
+        PointerPressed += (sender, args) =>
+        {
+            if (args.Source is Control { DataContext: CelGroupViewModel celGroup })
+            {
+                SelectCommand?.Execute(celGroup.LayerGuid);
+            }
+        };
+    }
+
+    private void NewItemOnPropertyChanged(object? sender, PropertyChangedEventArgs e)
+    {
+        if (e.PropertyName == nameof(CelGroupViewModel.IsGroupSelected))
+        {
+            PseudoClasses.Set(":selected", (sender as CelGroupViewModel).IsGroupSelected);
+        }
+    }
+
     protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
     {
         base.OnApplyTemplate(e);