Styled timeline

src/PixiEditor.AvaloniaUI/Helpers/Converters/TimelineSliderValueToMarginConverter.cs

@@ -3,7 +3,8 @@ using Avalonia;
 
 namespace PixiEditor.AvaloniaUI.Helpers.Converters;
 
-internal class TimelineSliderValueToMarginConverter : SingleInstanceMultiValueConverter<TimelineSliderValueToMarginConverter>
+internal class
+    TimelineSliderValueToMarginConverter : SingleInstanceMultiValueConverter<TimelineSliderValueToMarginConverter>
 {
     public override object Convert(object value, Type targetType, object parameter, CultureInfo culture)
     {
@@ -12,14 +13,20 @@ internal class TimelineSliderValueToMarginConverter : SingleInstanceMultiValueCo
 
     public override object? Convert(IList<object?> values, Type targetType, object? parameter, CultureInfo culture)
     {
-        if (values.Count != 4)
+        if (values.Count == 3)
         {
-            throw new ArgumentException("TimelineSliderValueToMarginConverter requires 3 values");
+            if (values[0] is double minimum && values[1] is double scale && values[2] is Vector offset)
+            {
+                return new Thickness((-minimum) * scale - offset.X, 0, 0, 0);
+            }
         }
-
-        if (values[0] is int frame && values[1] is double minimum && values[2] is double scale && values[3] is Vector offset)
+        else if (values.Count == 4)
         {
-            return new Thickness((frame - minimum) * scale - offset.X, 0, 0, 0);
+            if (values[0] is int frame && values[1] is double minimum && values[2] is double scale &&
+                values[3] is Vector offset)
+            {
+                return new Thickness((frame - minimum) * scale - offset.X, 0, 0, 0);
+            }
         }
 
         return new Thickness();

src/PixiEditor.AvaloniaUI/Styles/Templates/Timeline.axaml

@@ -27,8 +27,8 @@
                     <Border Grid.Row="0" Grid.Column="0" BorderThickness="0 0 1 0"
                             BorderBrush="{DynamicResource ThemeBorderMidBrush}">
                         <input:SizeInput Unit="FPS"
-                            Width="80" Height="25" HorizontalAlignment="Left"
-                            Size="{Binding Fps, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" />
+                                         Width="80" Height="25" HorizontalAlignment="Left"
+                                         Size="{Binding Fps, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" />
                     </Border>
                     <Border Grid.Row="0" Grid.Column="1">
                         <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Margin="5">
@@ -41,12 +41,13 @@
                                             <MultiBinding.Converter>
                                                 <converters:FrameToTimeConverter />
                                             </MultiBinding.Converter>
-                                            <Binding Path="ActiveFrame" RelativeSource="{RelativeSource TemplatedParent}" />
+                                            <Binding Path="ActiveFrame"
+                                                     RelativeSource="{RelativeSource TemplatedParent}" />
                                             <Binding Path="Fps" RelativeSource="{RelativeSource TemplatedParent}" />
                                         </MultiBinding>
                                     </Run.Text>
                                 </Run>
-                                <Run Text="/"/>
+                                <Run Text="/" />
                                 <Run>
                                     <Run.Text>
                                         <MultiBinding>
@@ -149,7 +150,7 @@
                                       Grid.Row="1" Grid.Column="0">
                             <StackPanel Orientation="Vertical" Background="{DynamicResource ThemeBackgroundBrush1}">
                                 <ItemsControl
-                                              ItemsSource="{Binding KeyFrames, RelativeSource={RelativeSource TemplatedParent}}">
+                                    ItemsSource="{Binding KeyFrames, RelativeSource={RelativeSource TemplatedParent}}">
                                     <ItemsControl.DataTemplates>
                                         <DataTemplate DataType="document:KeyFrameGroupViewModel">
                                             <animations:TimelineGroupHeader Height="70"

src/PixiEditor.AvaloniaUI/ViewModels/Document/AnimationDataViewModel.cs

@@ -71,7 +71,7 @@ internal class AnimationDataViewModel : ObservableObject, IAnimationHandler
     {
         if (!Document.UpdateableChangeActive)
         {
-            Internals.ActionAccumulator.AddFinishedActions(new CreateRasterKeyFrame_Action(targetLayerGuid, Guid.NewGuid(), frame,
+            Internals.ActionAccumulator.AddFinishedActions(new CreateRasterKeyFrame_Action(targetLayerGuid, Guid.NewGuid(), Math.Max(1, frame),
                 frameToCopyFrom ?? -1, toCloneFrom ?? Guid.Empty));
         }
     }

src/PixiEditor.AvaloniaUI/Views/Animations/TimelineTickBar.cs

@@ -95,7 +95,7 @@ public class TimelineTickBar : Control
         Pen largeTickPen = new Pen(Fill, thickness: 2);
         Pen smallTickPen = new Pen(Fill, 1.5);
         
-        int largeStart = visibleMin - (visibleMin % largeTickInterval);
+        int largeStart = visibleMin - (visibleMin % largeTickInterval) - MinValue;
         
         RenderBigTicks(context, largeStart, visibleMax, largeTickInterval, frameWidth, largeTickPen, height);
         

src/PixiEditor.ChangeableDocument/Changes/Animation/CreateRasterKeyFrame_Change.cs

@@ -27,7 +27,7 @@ internal class CreateRasterKeyFrame_Change : Change
 
     public override bool InitializeAndValidate(Document target)
     {
-        return target.TryFindMember(_targetLayerGuid, out _layer);
+        return _frame != 0 && target.TryFindMember(_targetLayerGuid, out _layer);
     }
 
     public override OneOf<None, IChangeInfo, List<IChangeInfo>> Apply(Document target, bool firstApply,