Layer properties - Restored much functionality on the reworked VMs

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/Timeline/TimelineEasingViewModel.cs

@@ -18,7 +18,7 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
             EasingFunction = easingFunction;
             Description = easingFunction.Humanize();
 
-            CreateGeometry();
+            CreateEasingPoints();
         }
 
         public Easings.Functions EasingFunction { get; }
@@ -36,7 +36,7 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
             }
         }
 
-        private void CreateGeometry()
+        private void CreateEasingPoints()
         {
             EasingPoints = new PointCollection();
             for (var i = 1; i <= 10; i++)

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/Timeline/TimelineKeyframeViewModel.cs

@@ -45,7 +45,7 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
         #endregion
     }
 
-    public abstract class TimelineKeyframeViewModel
+    public abstract class TimelineKeyframeViewModel : PropertyChangedBase
     {
         private readonly IProfileEditorService _profileEditorService;
         private readonly TimelineViewModel _timelineViewModel;
@@ -56,6 +56,7 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
             _profileEditorService = profileEditorService;
             _timelineViewModel = timelineViewModel;
             BaseLayerPropertyKeyframe = baseLayerPropertyKeyframe;
+            EasingViewModels = new BindableCollection<TimelineEasingViewModel>();
         }
 
         public BaseLayerPropertyKeyframe BaseLayerPropertyKeyframe { get; }
@@ -139,6 +140,16 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
 
         #region Easing
 
+        public void ContextMenuOpening()
+        {
+            CreateEasingViewModels();
+        }
+
+        public void ContextMenuClosing()
+        {
+            EasingViewModels.Clear();
+        }
+
         private void CreateEasingViewModels()
         {
             EasingViewModels.AddRange(Enum.GetValues(typeof(Easings.Functions)).Cast<Easings.Functions>().Select(v => new TimelineEasingViewModel(this, v)));

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/Timeline/TimelinePropertyGroupView.xaml

@@ -12,72 +12,82 @@
              d:DataContext="{d:DesignInstance local:TimelinePropertyGroupViewModel}">
     <Grid>
         <Grid.RowDefinitions>
-            <RowDefinition Height="25" />
+            <RowDefinition Height="24" />
+            <RowDefinition Height="1" />
             <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
-        <Border Height="25" BorderThickness="0,0,0,1" BorderBrush="{DynamicResource MaterialDesignDivider}" Grid.Row="0">
-            <ItemsControl ItemsSource="{Binding TimelineKeyframeViewModels}"
+
+        <ItemsControl Grid.Row="0"
+                      Height="24"
+                      Visibility="{Binding LayerPropertyGroupViewModel.IsExpanded, Converter={x:Static s:BoolToVisibilityConverter.InverseInstance}, Mode=OneWay}"
+                      ItemsSource="{Binding TimelineKeyframeViewModels}"
                       Background="{DynamicResource MaterialDesignToolBarBackground}"
                       HorizontalAlignment="Left">
-                <ItemsControl.ItemsPanel>
-                    <ItemsPanelTemplate>
-                        <Canvas />
-                    </ItemsPanelTemplate>
-                </ItemsControl.ItemsPanel>
-                <ItemsControl.ItemContainerStyle>
-                    <Style TargetType="{x:Type ContentPresenter}">
-                        <Setter Property="Canvas.Left" Value="{Binding X}" />
-                    </Style>
-                </ItemsControl.ItemContainerStyle>
-                <ItemsControl.ItemTemplate>
-                    <DataTemplate>
-                        <Ellipse Fill="{StaticResource PrimaryHueMidBrush}"
+            <ItemsControl.ItemsPanel>
+                <ItemsPanelTemplate>
+                    <Canvas />
+                </ItemsPanelTemplate>
+            </ItemsControl.ItemsPanel>
+            <ItemsControl.ItemContainerStyle>
+                <Style TargetType="{x:Type ContentPresenter}">
+                    <Setter Property="Canvas.Left" Value="{Binding X}" />
+                </Style>
+            </ItemsControl.ItemContainerStyle>
+            <ItemsControl.ItemTemplate>
+                <DataTemplate>
+                    <Ellipse Fill="{StaticResource PrimaryHueMidBrush}"
                              Stroke="White"
                              StrokeThickness="0"
                              Width="10"
                              Height="10"
                              Margin="-5,6,0,0"
                              s:View.ActionTarget="{Binding}">
-                            <Ellipse.Style>
-                                <Style TargetType="{x:Type Ellipse}">
-                                    <Style.Triggers>
-                                        <DataTrigger Binding="{Binding IsSelected}" Value="True">
-                                            <DataTrigger.EnterActions>
-                                                <BeginStoryboard>
-                                                    <Storyboard>
-                                                        <DoubleAnimation Storyboard.TargetProperty="StrokeThickness" To="1" Duration="0:0:0.25" />
-                                                    </Storyboard>
-                                                </BeginStoryboard>
-                                            </DataTrigger.EnterActions>
-                                            <DataTrigger.ExitActions>
-                                                <BeginStoryboard>
-                                                    <Storyboard>
-                                                        <DoubleAnimation Storyboard.TargetProperty="StrokeThickness" To="0" Duration="0:0:0.25" />
-                                                    </Storyboard>
-                                                </BeginStoryboard>
-                                            </DataTrigger.ExitActions>
-                                        </DataTrigger>
-                                    </Style.Triggers>
-                                </Style>
-                            </Ellipse.Style>
-                        </Ellipse>
-                    </DataTemplate>
-                </ItemsControl.ItemTemplate>
-            </ItemsControl>
-        </Border>
-        <ItemsControl ItemsSource="{Binding LayerPropertyGroupViewModel.Children}" Grid.Row="1">
+                        <Ellipse.Style>
+                            <Style TargetType="{x:Type Ellipse}">
+                                <Style.Triggers>
+                                    <DataTrigger Binding="{Binding IsSelected}" Value="True">
+                                        <DataTrigger.EnterActions>
+                                            <BeginStoryboard>
+                                                <Storyboard>
+                                                    <DoubleAnimation Storyboard.TargetProperty="StrokeThickness"
+                                                                     To="1" Duration="0:0:0.25" />
+                                                </Storyboard>
+                                            </BeginStoryboard>
+                                        </DataTrigger.EnterActions>
+                                        <DataTrigger.ExitActions>
+                                            <BeginStoryboard>
+                                                <Storyboard>
+                                                    <DoubleAnimation Storyboard.TargetProperty="StrokeThickness"
+                                                                     To="0" Duration="0:0:0.25" />
+                                                </Storyboard>
+                                            </BeginStoryboard>
+                                        </DataTrigger.ExitActions>
+                                    </DataTrigger>
+                                </Style.Triggers>
+                            </Style>
+                        </Ellipse.Style>
+                    </Ellipse>
+                </DataTemplate>
+            </ItemsControl.ItemTemplate>
+        </ItemsControl>
+
+        <Rectangle Grid.Row="1" HorizontalAlignment="Stretch" Fill="{DynamicResource MaterialDesignDivider}" Height="1" />
+
+        <ItemsControl Grid.Row="2"
+                      Visibility="{Binding LayerPropertyGroupViewModel.IsExpanded, Converter={x:Static s:BoolToVisibilityConverter.Instance}, Mode=OneWay}"
+                      ItemsSource="{Binding LayerPropertyGroupViewModel.Children}">
             <ItemsControl.Resources>
                 <DataTemplate DataType="{x:Type layerProperties:LayerPropertyGroupViewModel}">
                     <ContentControl s:View.Model="{Binding TimelinePropertyGroupViewModel}"
-                                    VerticalContentAlignment="Stretch"
-                                    HorizontalContentAlignment="Stretch"
-                                    IsTabStop="False" />
+                                        VerticalContentAlignment="Stretch"
+                                        HorizontalContentAlignment="Stretch"
+                                        IsTabStop="False" />
                 </DataTemplate>
                 <DataTemplate DataType="{x:Type layerProperties:LayerPropertyViewModel}">
                     <ContentControl s:View.Model="{Binding TimelinePropertyBaseViewModel}"
-                                    VerticalContentAlignment="Stretch"
-                                    HorizontalContentAlignment="Stretch"
-                                    IsTabStop="False" />
+                                        VerticalContentAlignment="Stretch"
+                                        HorizontalContentAlignment="Stretch"
+                                        IsTabStop="False" />
                 </DataTemplate>
             </ItemsControl.Resources>
         </ItemsControl>

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/Timeline/TimelinePropertyView.xaml

@@ -1,12 +1,12 @@
 <UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline.TimelinePropertyView"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:local="clr-namespace:Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline"
              xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
              xmlns:s="https://github.com/canton7/Stylet"
-             mc:Ignorable="d" 
+             mc:Ignorable="d"
              d:DesignHeight="450" d:DesignWidth="800"
              d:DataContext="{d:DesignInstance local:TimelinePropertyViewModel}">
     <Border Height="25" BorderThickness="0,0,0,1" BorderBrush="{DynamicResource MaterialDesignDivider}">
@@ -35,7 +35,9 @@
                              s:View.ActionTarget="{Binding}"
                              MouseDown="{s:Action KeyframeMouseDown}"
                              MouseUp="{s:Action KeyframeMouseUp}"
-                             MouseMove="{s:Action KeyframeMouseMove}">
+                             MouseMove="{s:Action KeyframeMouseMove}"
+                             ContextMenuOpening="{s:Action ContextMenuOpening}"
+                             ContextMenuClosing="{s:Action ContextMenuClosing}">
                         <Ellipse.Style>
                             <Style TargetType="{x:Type Ellipse}">
                                 <Style.Triggers>
@@ -72,6 +74,9 @@
                                 </MenuItem>
                                 <Separator />
                                 <MenuItem Header="Easing" ItemsSource="{Binding EasingViewModels}">
+                                    <MenuItem.Icon>
+                                        <materialDesign:PackIcon Kind="Creation" />
+                                    </MenuItem.Icon>
                                     <MenuItem.ItemContainerStyle>
                                         <Style TargetType="{x:Type MenuItem}" BasedOn="{StaticResource MaterialDesignMenuItem}">
                                             <Setter Property="IsCheckable" Value="True" />
@@ -105,4 +110,4 @@
             </ItemsControl.ItemTemplate>
         </ItemsControl>
     </Border>
-</UserControl>
+</UserControl>

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/Timeline/TimelinePropertyViewModel.cs

@@ -1,4 +1,6 @@
-using System.Linq;
+using System;
+using System.Linq;
+using Artemis.UI.Exceptions;
 using Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Abstract;
 using Artemis.UI.Services.Interfaces;
 using Stylet;
@@ -13,27 +15,53 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
         {
             _profileEditorService = profileEditorService;
             LayerPropertyViewModel = (LayerPropertyViewModel<T>) layerPropertyBaseViewModel;
+
+            LayerPropertyViewModel.LayerProperty.KeyframeAdded += LayerPropertyOnKeyframeModified;
+            LayerPropertyViewModel.LayerProperty.KeyframeRemoved += LayerPropertyOnKeyframeModified;
+            LayerPropertyViewModel.LayerProperty.KeyframesToggled += LayerPropertyOnKeyframeModified;
+        }
+
+        private void LayerPropertyOnKeyframeModified(object sender, EventArgs e)
+        {
+            UpdateKeyframes();
         }
 
         public LayerPropertyViewModel<T> LayerPropertyViewModel { get; }
 
-        public override void UpdateKeyframes(TimelineViewModel timelineViewModel)
+        public override void UpdateKeyframes()
         {
-            var keyframes = LayerPropertyViewModel.LayerProperty.Keyframes.ToList();
-            TimelineKeyframeViewModels.RemoveRange(
-                TimelineKeyframeViewModels.Where(t => !keyframes.Contains(t.BaseLayerPropertyKeyframe))
-            );
-            TimelineKeyframeViewModels.AddRange(
-                keyframes.Where(k => TimelineKeyframeViewModels.All(t => t.BaseLayerPropertyKeyframe != k))
-                    .Select(k => new TimelineKeyframeViewModel<T>(_profileEditorService, timelineViewModel, k))
-            );
+            if (TimelineViewModel == null)
+                throw new ArtemisUIException("Timeline view model must be set before keyframes can be updated");
+
+            // Only show keyframes if they are enabled
+            if (LayerPropertyViewModel.LayerProperty.KeyframesEnabled)
+            {
+                var keyframes = LayerPropertyViewModel.LayerProperty.Keyframes.ToList();
+                var toRemove = TimelineKeyframeViewModels.Where(t => !keyframes.Contains(t.BaseLayerPropertyKeyframe)).ToList();
+                TimelineKeyframeViewModels.RemoveRange(toRemove);
+                TimelineKeyframeViewModels.AddRange(
+                    keyframes.Where(k => TimelineKeyframeViewModels.All(t => t.BaseLayerPropertyKeyframe != k))
+                        .Select(k => new TimelineKeyframeViewModel<T>(_profileEditorService, TimelineViewModel, k))
+                );
+            }
+            else
+            {
+                TimelineKeyframeViewModels.Clear();
+            }
 
             foreach (var timelineKeyframeViewModel in TimelineKeyframeViewModels)
                 timelineKeyframeViewModel.Update(_profileEditorService.PixelsPerSecond);
         }
+
+        public override void Dispose()
+        {
+            LayerPropertyViewModel.LayerProperty.KeyframeAdded -= LayerPropertyOnKeyframeModified;
+            LayerPropertyViewModel.LayerProperty.KeyframeRemoved -= LayerPropertyOnKeyframeModified;
+            LayerPropertyViewModel.LayerProperty.KeyframesToggled -= LayerPropertyOnKeyframeModified;
+        }
     }
 
-    public abstract class TimelinePropertyViewModel
+    public abstract class TimelinePropertyViewModel : IDisposable
     {
         protected TimelinePropertyViewModel(LayerPropertyBaseViewModel layerPropertyBaseViewModel)
         {
@@ -42,8 +70,11 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
         }
 
         public LayerPropertyBaseViewModel LayerPropertyBaseViewModel { get; }
+        public TimelineViewModel TimelineViewModel { get; set; }
         public BindableCollection<TimelineKeyframeViewModel> TimelineKeyframeViewModels { get; set; }
 
-        public abstract void UpdateKeyframes(TimelineViewModel timelineViewModel);
+        public abstract void UpdateKeyframes();
+
+        public abstract void Dispose();
     }
 }

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/Timeline/TimelineView.xaml

@@ -1,18 +1,18 @@
 <UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline.TimelineView"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:local="clr-namespace:Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline"
-              xmlns:s="https://github.com/canton7/Stylet"
+             xmlns:s="https://github.com/canton7/Stylet"
              mc:Ignorable="d"
              d:DesignHeight="25"
              d:DesignWidth="800"
              d:DataContext="{d:DesignInstance local:TimelineViewModel}">
     <Grid Background="{DynamicResource MaterialDesignToolBarBackground}"
-            MouseDown="{s:Action TimelineCanvasMouseDown}"
-            MouseUp="{s:Action TimelineCanvasMouseUp}"
-            MouseMove="{s:Action TimelineCanvasMouseMove}">
+          MouseDown="{s:Action TimelineCanvasMouseDown}"
+          MouseUp="{s:Action TimelineCanvasMouseUp}"
+          MouseMove="{s:Action TimelineCanvasMouseMove}">
         <Grid.Triggers>
             <EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown">
                 <BeginStoryboard>
@@ -42,10 +42,11 @@
         </ItemsControl>
 
         <!-- Multi-selection rectangle -->
-        <Path Data="{Binding SelectionRectangle}" Opacity="0"
+        <Path x:Name="MultiSelectionPath"
+              Data="{Binding SelectionRectangle}"
+              Opacity="0"
               Stroke="{DynamicResource PrimaryHueLightBrush}"
               StrokeThickness="1"
-              x:Name="MultiSelectionPath"
               IsHitTestVisible="False">
             <Path.Fill>
                 <SolidColorBrush Color="{DynamicResource Primary400}" Opacity="0.25" />

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/Timeline/TimelineViewModel.cs

@@ -35,7 +35,10 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
                 foreach (var layerPropertyBaseViewModel in layerPropertyGroupViewModel.GetAllChildren())
                 {
                     if (layerPropertyBaseViewModel is LayerPropertyViewModel layerPropertyViewModel)
-                        layerPropertyViewModel.TimelinePropertyBaseViewModel.UpdateKeyframes(this);
+                    {
+                        layerPropertyViewModel.TimelinePropertyBaseViewModel.TimelineViewModel = this;
+                        layerPropertyViewModel.TimelinePropertyBaseViewModel.UpdateKeyframes();
+                    }
                 }
             }
         }