Profile editor - Changed approach to one timeline split into segments

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/Timeline/Controls/PropertyTimelineHeader.cs

@@ -23,6 +23,9 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
         public static readonly DependencyProperty VisibleWidthProperty = DependencyProperty.Register(nameof(VisibleWidth), typeof(double), typeof(PropertyTimelineHeader),
             new FrameworkPropertyMetadata(default(double), FrameworkPropertyMetadataOptions.AffectsRender));
 
+        public static readonly DependencyProperty OffsetFirstValueProperty = DependencyProperty.Register(nameof(OffsetFirstValue), typeof(bool), typeof(PropertyTimelineHeader),
+            new FrameworkPropertyMetadata(default(bool), FrameworkPropertyMetadataOptions.AffectsRender));
+
         private double _subd1;
         private double _subd2;
         private double _subd3;
@@ -57,6 +60,12 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
             set => SetValue(VisibleWidthProperty, value);
         }
 
+        public bool OffsetFirstValue
+        {
+            get => (bool) GetValue(OffsetFirstValueProperty);
+            set => SetValue(OffsetFirstValueProperty, value);
+        }
+
         protected override void OnRender(DrawingContext drawingContext)
         {
             base.OnRender(drawingContext);
@@ -73,7 +82,7 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
             var count = (width + offsetUnits) / units;
             for (var i = 0; i < count; i++)
             {
-                var x = i * units - offsetUnits + 1;
+                var x = i * units - offsetUnits;
                 // Add a 100px margin to allow the text to partially render when needed
                 if (x < HorizontalOffset - 100 || x > HorizontalOffset + width)
                     continue;
@@ -95,8 +104,10 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
             count = (width + offsetUnits) / units;
             for (var i = 0; i < count; i++)
             {
-                var x = i * units - offsetUnits + 1;
-                if (x > HorizontalOffset && x < HorizontalOffset + width)
+                var x = i * units - offsetUnits;
+                if (x == 0 && OffsetFirstValue)
+                    drawingContext.DrawLine(linePen, new Point(1, 20), new Point(1, 30));
+                else if (x > HorizontalOffset && x < HorizontalOffset + width)
                     drawingContext.DrawLine(linePen, new Point(x, 20), new Point(x, 30));
             }
 
@@ -107,7 +118,7 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
             for (var i = 0; i < count; i++)
             {
                 if (Math.Abs(i % mul) < 0.001) continue;
-                var x = i * units - offsetUnits + 1;
+                var x = i * units - offsetUnits;
                 if (x > HorizontalOffset && x < HorizontalOffset + width)
                     drawingContext.DrawLine(linePen, new Point(x, 25), new Point(x, 30));
             }
@@ -117,8 +128,8 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
         {
             var typeFace = new Typeface(FontFamily, new FontStyle(), new FontWeight(), new FontStretch());
             var formattedText = new FormattedText(text, CultureInfo.CurrentUICulture, FlowDirection.LeftToRight, typeFace, 9, Fill, null, VisualTreeHelper.GetDpi(this).PixelsPerDip);
-            if (x == 1)
-                drawingContext.DrawText(formattedText, new Point(x, 2));
+            if (x == 0 && OffsetFirstValue)
+                drawingContext.DrawText(formattedText, new Point(2, 2));
             else
                 drawingContext.DrawText(formattedText, new Point(x - formattedText.Width / 2, 2));
         }

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

@@ -27,7 +27,6 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
             var newKeyframe = new LayerPropertyKeyframe<T>(
                 LayerPropertyKeyframe.Value,
                 LayerPropertyKeyframe.Position,
-                LayerPropertyKeyframe.Timeline,
                 LayerPropertyKeyframe.EasingFunction,
                 LayerPropertyKeyframe.LayerProperty
             );

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

@@ -35,7 +35,6 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
         {
             TimelineKeyframeViewModels.Clear();
             TimelineKeyframeViewModels.AddRange(LayerPropertyGroupViewModel.GetKeyframes(false)
-                .Where(k => k.Timeline == _profileEditorService.CurrentTimeline)
                 .Select(k => LayerPropertyGroupViewModel.ProfileEditorService.PixelsPerSecond * k.Position.TotalSeconds));
         }
 

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

@@ -28,9 +28,7 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
             // Only show keyframes if they are enabled
             if (LayerPropertyViewModel.LayerProperty.KeyframesEnabled)
             {
-                var keyframes = LayerPropertyViewModel.LayerProperty.Keyframes
-                    .Where(k => k.Timeline == _profileEditorService.CurrentTimeline)
-                    .ToList();
+                var keyframes = LayerPropertyViewModel.LayerProperty.Keyframes.ToList();
                 var toRemove = TimelineKeyframeViewModels.Where(t => !keyframes.Contains(t.BaseLayerPropertyKeyframe)).ToList();
                 TimelineKeyframeViewModels.RemoveRange(toRemove);
                 TimelineKeyframeViewModels.AddRange(

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

@@ -9,11 +9,11 @@
              d:DesignHeight="25"
              d:DesignWidth="800"
              d:DataContext="{d:DesignInstance local:TimelineViewModel}">
-    <Grid Background="{DynamicResource MaterialDesignToolBarBackground}"
+    <Grid x:Name="TimelineContainerGrid"
+          Background="{DynamicResource MaterialDesignToolBarBackground}"
           MouseDown="{s:Action TimelineCanvasMouseDown}"
           MouseUp="{s:Action TimelineCanvasMouseUp}"
-          MouseMove="{s:Action TimelineCanvasMouseMove}"
-          HorizontalAlignment="Stretch">
+          MouseMove="{s:Action TimelineCanvasMouseMove}">
         <Grid.Triggers>
             <EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown">
                 <BeginStoryboard>
@@ -41,6 +41,29 @@
             </ItemsControl.ItemTemplate>
         </ItemsControl>
 
+        <Line Stroke="{StaticResource PrimaryHueDarkBrush}"
+              Opacity="0.5"
+              StrokeDashArray="4 2"
+              X1="{Binding StartSegmentEndPosition}"
+              X2="{Binding StartSegmentEndPosition}"
+              Y1="0"
+              Y2="{Binding ActualHeight, ElementName=TimelineContainerGrid}"
+              HorizontalAlignment="Left" />
+        <Line Stroke="{StaticResource PrimaryHueDarkBrush}"
+              Opacity="0.5"
+              StrokeDashArray="4 2"
+              X1="{Binding MainSegmentEndPosition}"
+              X2="{Binding MainSegmentEndPosition}"
+              Y1="0"
+              Y2="{Binding ActualHeight, ElementName=TimelineContainerGrid}" />
+        <Line Stroke="{StaticResource PrimaryHueDarkBrush}"
+              Opacity="0.5"
+              StrokeDashArray="4 2"
+              X1="{Binding EndSegmentEndPosition}"
+              X2="{Binding EndSegmentEndPosition}"
+              Y1="0"
+              Y2="{Binding ActualHeight, ElementName=TimelineContainerGrid}" />
+
         <!-- Multi-selection rectangle -->
         <Path x:Name="MultiSelectionPath"
               Data="{Binding SelectionRectangle}"

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

@@ -13,21 +13,23 @@ using Stylet;
 
 namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
 {
-    public class TimelineViewModel : Screen
+    public class TimelineViewModel : PropertyChangedBase, IViewAware, IDisposable
     {
         private readonly LayerPropertiesViewModel _layerPropertiesViewModel;
         private readonly IProfileEditorService _profileEditorService;
         private RectangleGeometry _selectionRectangle;
 
-        public TimelineViewModel(LayerPropertiesViewModel layerPropertiesViewModel, BindableCollection<LayerPropertyGroupViewModel> layerPropertyGroups,
-            IProfileEditorService profileEditorService)
+        public TimelineViewModel(LayerPropertiesViewModel layerPropertiesViewModel, BindableCollection<LayerPropertyGroupViewModel> layerPropertyGroups, IProfileEditorService profileEditorService)
         {
             _layerPropertiesViewModel = layerPropertiesViewModel;
             _profileEditorService = profileEditorService;
+
             LayerPropertyGroups = layerPropertyGroups;
             SelectionRectangle = new RectangleGeometry();
 
-            UpdateKeyframes();
+            _profileEditorService.PixelsPerSecondChanged += ProfileEditorServiceOnPixelsPerSecondChanged;
+
+            Update();
         }
 
         public BindableCollection<LayerPropertyGroupViewModel> LayerPropertyGroups { get; }
@@ -38,7 +40,19 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
             set => SetAndNotify(ref _selectionRectangle, value);
         }
 
-        public void UpdateKeyframes()
+        public double StartSegmentWidth => _profileEditorService.PixelsPerSecond * _profileEditorService.SelectedProfileElement?.StartSegmentLength.TotalSeconds ?? 0;
+        public double StartSegmentEndPosition => StartSegmentWidth;
+        public double MainSegmentWidth => _profileEditorService.PixelsPerSecond * _profileEditorService.SelectedProfileElement?.MainSegmentLength.TotalSeconds ?? 0;
+        public double MainSegmentEndPosition => StartSegmentWidth + MainSegmentWidth;
+        public double EndSegmentWidth => _profileEditorService.PixelsPerSecond * _profileEditorService.SelectedProfileElement?.EndSegmentLength.TotalSeconds ?? 0;
+        public double EndSegmentEndPosition => StartSegmentWidth + MainSegmentWidth + EndSegmentWidth;
+
+        public void Dispose()
+        {
+            _profileEditorService.PixelsPerSecondChanged -= ProfileEditorServiceOnPixelsPerSecondChanged;
+        }
+
+        public void Update()
         {
             foreach (var layerPropertyGroupViewModel in LayerPropertyGroups)
             {
@@ -52,6 +66,16 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
             }
         }
 
+        private void ProfileEditorServiceOnPixelsPerSecondChanged(object sender, EventArgs e)
+        {
+            NotifyOfPropertyChange(nameof(StartSegmentWidth));
+            NotifyOfPropertyChange(nameof(StartSegmentEndPosition));
+            NotifyOfPropertyChange(nameof(MainSegmentWidth));
+            NotifyOfPropertyChange(nameof(MainSegmentEndPosition));
+            NotifyOfPropertyChange(nameof(EndSegmentWidth));
+            NotifyOfPropertyChange(nameof(EndSegmentEndPosition));
+        }
+
         #region Command handlers
 
         public void KeyframeMouseDown(object sender, MouseButtonEventArgs e)
@@ -274,5 +298,19 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
         }
 
         #endregion
+
+        #region IViewAware
+
+        public void AttachView(UIElement view)
+        {
+            if (View != null)
+                throw new InvalidOperationException(string.Format("Tried to attach View {0} to ViewModel {1}, but it already has a view attached", view.GetType().Name, GetType().Name));
+
+            View = view;
+        }
+
+        public UIElement View { get; set; }
+
+        #endregion
     }
 }