Gradient editor - Implemented stop create/remove and edit

src/Artemis.UI.Shared/Screens/GradientEditor/ColorStopView.xaml

@@ -6,20 +6,61 @@
              xmlns:local="clr-namespace:Artemis.UI.Shared.Screens.GradientEditor"
              xmlns:s="https://github.com/canton7/Stylet"
              xmlns:converters="clr-namespace:Artemis.UI.Shared.Converters"
+             xmlns:utilities="clr-namespace:Artemis.UI.Shared.Utilities"
+             xmlns:animationTimeline="clr-namespace:Artemis.UI.Shared.AnimationTimeline"
              mc:Ignorable="d"
              d:DesignHeight="450" d:DesignWidth="800"
-             d:DataContext="{d:DesignInstance local:ColorStopViewModel}">
+             d:DataContext="{d:DesignInstance local:ColorStopViewModel}" Opacity="1">
     <UserControl.Resources>
         <converters:SKColorToColorConverter x:Key="SKColorToColorConverter" />
+        <Style TargetType="Path" x:Key="ColorStopStyle">
+            <Style.Triggers>
+                <DataTrigger Binding="{Binding WillRemoveColorStop}" Value="True">
+                    <DataTrigger.EnterActions>
+                        <BeginStoryboard>
+                            <Storyboard TargetProperty="Opacity">
+                                <DoubleAnimation From="1" To="0" Duration="0:0:0.1" />
+                            </Storyboard>
+                        </BeginStoryboard>
+                    </DataTrigger.EnterActions>
+                    <DataTrigger.ExitActions>
+                        <BeginStoryboard>
+                            <Storyboard TargetProperty="Opacity">
+                                <DoubleAnimation From="0" To="1" Duration="0:0:0.2" />
+                            </Storyboard>
+                        </BeginStoryboard>
+                    </DataTrigger.ExitActions>
+                </DataTrigger>
+                <DataTrigger Binding="{Binding IsSelected}" Value="True">
+                    <DataTrigger.EnterActions>
+                        <BeginStoryboard>
+                            <Storyboard TargetProperty="StrokeThickness">
+                                <DoubleAnimation To="2" Duration="0:0:0.1" />
+                            </Storyboard>
+                        </BeginStoryboard>
+                    </DataTrigger.EnterActions>
+                    <DataTrigger.ExitActions>
+                        <BeginStoryboard>
+                            <Storyboard TargetProperty="StrokeThickness">
+                                <DoubleAnimation To="0" Duration="0:0:0.1" />
+                            </Storyboard>
+                        </BeginStoryboard>
+                    </DataTrigger.ExitActions>
+                </DataTrigger>
+            </Style.Triggers>
+        </Style>
     </UserControl.Resources>
-    <Path Data="M13.437011,33.065002 C9.7268463,29.334181 7.812011,26.379009 4.874511,23.379009 1.687011,19.566509 0.12600673,17.206803 5.6843419E-14,14.127608 0.062010996,2.0027046 11.158781,-0.062991121 13.43702,0.0014351187 M13.438011,33.065016 C17.148173,29.334199 19.063008,26.379023 22.00051,23.379017 25.188007,19.566519 26.749013,17.206806 26.875018,14.127613 26.813007,2.002704 15.716239,-0.062987381 13.438,0.0014388781"
-          Stroke="{DynamicResource NormalBorderBrush}"
-          StrokeThickness="2"
+    <Path Style="{StaticResource ColorStopStyle}"
+          Data="M13.437011,33.065002 C9.7268463,29.334181 7.812011,26.379009 4.874511,23.379009 1.687011,19.566509 0.12600673,17.206803 5.6843419E-14,14.127608 0.062010996,2.0027046 11.158781,-0.062991121 13.43702,0.0014351187 M13.438011,33.065016 C17.148173,29.334199 19.063008,26.379023 22.00051,23.379017 25.188007,19.566519 26.749013,17.206806 26.875018,14.127613 26.813007,2.002704 15.716239,-0.062987381 13.438,0.0014388781"
+          Stroke="{DynamicResource MaterialDesignBody}"
+          StrokeThickness="0"
           Cursor="Hand"
           MouseDown="{s:Action StopMouseDown}"
           MouseUp="{s:Action StopMouseUp}"
-          MouseMove="{s:Action StopMouseMove}"
-          Fill="{Binding Path=Color, Converter={StaticResource SKColorToColorConverter}}">
+          MouseMove="{s:Action StopMouseMove}">
+        <Path.Fill>
+            <SolidColorBrush Color="{Binding Path=ColorStop.Color, Converter={StaticResource SKColorToColorConverter}}" />
+        </Path.Fill>
         <Path.RenderTransform>
             <TransformGroup>
                 <RotateTransform Angle="180" />

src/Artemis.UI.Shared/Screens/GradientEditor/ColorStopViewModel.cs

@@ -1,10 +1,12 @@
 using System;
+using System.ComponentModel;
+using System.Drawing;
+using System.Linq;
 using System.Windows;
+using System.Windows.Controls;
 using System.Windows.Input;
-using System.Windows.Media;
 using Artemis.Core.Models.Profile;
-using PropertyChanged;
-using SkiaSharp;
+using Artemis.UI.Shared.Utilities;
 using Stylet;
 
 namespace Artemis.UI.Shared.Screens.GradientEditor
@@ -12,69 +14,107 @@ namespace Artemis.UI.Shared.Screens.GradientEditor
     public class ColorStopViewModel : PropertyChangedBase
     {
         private readonly GradientEditorViewModel _gradientEditorViewModel;
+        private bool _isSelected;
+        private bool _willRemoveColorStop;
 
-        public ColorStopViewModel(GradientEditorViewModel gradientEditorViewModel)
+        public ColorStopViewModel(GradientEditorViewModel gradientEditorViewModel, ColorGradientStop colorStop)
         {
             _gradientEditorViewModel = gradientEditorViewModel;
+            ColorStop = colorStop;
+            ColorStop.PropertyChanged += ColorStopOnPropertyChanged;
         }
 
-        public ColorGradientStop ColorStop { get; set; }
-        public double Offset => ColorStop.Position * _gradientEditorViewModel.PreviewWidth;
-        public SKColor Color => ColorStop.Color;
+        private void ColorStopOnPropertyChanged(object sender, PropertyChangedEventArgs e)
+        {
+            _gradientEditorViewModel.ColorGradient.OnColorValuesUpdated();
+        }
+
+        public ColorGradientStop ColorStop { get; }
+
+        public double Offset
+        {
+            get => ColorStop.Position * _gradientEditorViewModel.PreviewWidth;
+            set
+            {
+                ColorStop.Position = (float) Math.Round(value / _gradientEditorViewModel.PreviewWidth, 3, MidpointRounding.AwayFromZero);
+                NotifyOfPropertyChange(nameof(Offset));
+                NotifyOfPropertyChange(nameof(OffsetPercent));
+            }
+        }
+
+        public float OffsetPercent
+        {
+            get => (float) Math.Round(ColorStop.Position * 100.0, MidpointRounding.AwayFromZero);
+            set
+            {
+                ColorStop.Position = Math.Min(100, Math.Max(0, value)) / 100f;
+                NotifyOfPropertyChange(nameof(Offset));
+                NotifyOfPropertyChange(nameof(OffsetPercent));
+            }
+        }
+
+        public bool IsSelected
+        {
+            get => _isSelected;
+            set => SetAndNotify(ref _isSelected, value);
+        }
+
+        public bool WillRemoveColorStop
+        {
+            get => _willRemoveColorStop;
+            set => SetAndNotify(ref _willRemoveColorStop, value);
+        }
 
         #region Movement
-
-        private double _mouseDownOffset;
-        private DateTime _mouseDownTime;
-
+        
         public void StopMouseDown(object sender, MouseButtonEventArgs e)
         {
-            var position = GetPositionInPreview(sender, e);
+            e.Handled = true;
+
             ((IInputElement) sender).CaptureMouse();
-            _mouseDownOffset = Offset - position.X;
-            _mouseDownTime = DateTime.Now;
+            _gradientEditorViewModel.SelectColorStop(this);
         }
 
         public void StopMouseUp(object sender, MouseButtonEventArgs e)
         {
-            // On regular click, select this color stop
-            if (DateTime.Now - _mouseDownTime <= TimeSpan.FromMilliseconds(250))
-            {
-            }
+            e.Handled = true;
 
             ((IInputElement) sender).ReleaseMouseCapture();
-            e.Handled = true;
+            if (WillRemoveColorStop)
+                _gradientEditorViewModel.RemoveColorStop(this);
         }
 
         public void StopMouseMove(object sender, MouseEventArgs e)
         {
+            e.Handled = true;
+
             if (!((IInputElement) sender).IsMouseCaptured)
                 return;
 
-            var position = GetPositionInPreview(sender, e);
-            // Scale down with a precision of 3 decimals
-            var newPosition = Math.Round((position.X + _mouseDownOffset) / _gradientEditorViewModel.PreviewWidth, 3, MidpointRounding.AwayFromZero);
-            // Limit from 0.0 to 1.0
-            newPosition = Math.Min(1, Math.Max(0, newPosition));
+            var parent = VisualTreeUtilities.FindParent<Canvas>((DependencyObject) sender, null);
+            var position = e.GetPosition(parent);
+            if (position.Y > 50)
+            {
+                WillRemoveColorStop = true;
+                return;
+            }
 
-            ColorStop.Position = (float) newPosition;
-            NotifyOfPropertyChange(() => Offset);
-            NotifyOfPropertyChange(() => Color);
-        }
+            WillRemoveColorStop = false;
 
-        private Point GetPositionInPreview(object sender, MouseEventArgs e)
-        {
-            var parent = VisualTreeHelper.GetParent((DependencyObject) sender);
-            return e.GetPosition((IInputElement) parent);
+            var minValue = 0.0;
+            var maxValue = _gradientEditorViewModel.PreviewWidth;
+            var stops = _gradientEditorViewModel.ColorGradient.Stops.OrderBy(s => s.Position).ToList();
+            var previous = stops.IndexOf(ColorStop) >= 1 ? stops[stops.IndexOf(ColorStop) - 1] : null;
+            var next = stops.IndexOf(ColorStop) + 1 < stops.Count ? stops[stops.IndexOf(ColorStop) + 1] : null;
+            if (previous != null)
+                minValue = previous.Position * _gradientEditorViewModel.PreviewWidth;
+            if (next != null)
+                maxValue = next.Position * _gradientEditorViewModel.PreviewWidth;
+
+            Offset = Math.Max(minValue, Math.Min(maxValue, position.X));
+            _gradientEditorViewModel.ColorGradient.OnColorValuesUpdated();
         }
 
         #endregion
-
-        public void Update(ColorGradientStop colorStop)
-        {
-            ColorStop = colorStop;
-            NotifyOfPropertyChange(() => Offset);
-            NotifyOfPropertyChange(() => Color);
-        }
     }
 }

src/Artemis.UI.Shared/Screens/GradientEditor/GradientEditorView.xaml

@@ -23,6 +23,7 @@
                          d:DataContext="{d:DesignInstance local:GradientEditorViewModel}">
     <controls:MaterialWindow.Resources>
         <converters:ColorGradientToGradientStopsConverter x:Key="ColorGradientToGradientStopsConverter" />
+        <converters:SKColorToColorConverter x:Key="SKColorToColorConverter" />
     </controls:MaterialWindow.Resources>
     <StackPanel>
         <materialDesign:Card Margin="15 15 15 7" Padding="15">
@@ -48,10 +49,10 @@
                     </Rectangle.Fill>
                 </Rectangle>
 
-                <ItemsControl ItemsSource="{Binding ColorStopViewModels}" Margin="15 0" MouseLeftButtonUp="{s:Action CanvasMouseDown}" Cursor="Cross">
+                <ItemsControl ItemsSource="{Binding ColorStopViewModels}" Margin="15 0" MouseLeftButtonUp="{s:Action AddColorStop}" Cursor="Cross">
                     <ItemsControl.ItemsPanel>
                         <ItemsPanelTemplate>
-                            <Canvas Height="60" Width="440" x:Name="PreviewCanvas" Background="Transparent"/>
+                            <Canvas Height="16" Width="440" x:Name="PreviewCanvas" Background="Transparent"/>
                         </ItemsPanelTemplate>
                     </ItemsControl.ItemsPanel>
                     <ItemsControl.ItemContainerStyle>
@@ -79,15 +80,27 @@
                     </Grid.ColumnDefinitions>
 
                     <Label Grid.Column="0" HorizontalAlignment="Right">Color:</Label>
-                    <shared:ColorPicker Grid.Row="0" Grid.Column="1" x:Name="CurrentColor" Width="85" />
+                    <shared:ColorPicker 
+                        Grid.Row="0"
+                        Grid.Column="1"
+                        x:Name="CurrentColor"
+                        Width="85" 
+                        Color="{Binding Path=SelectedColorStopViewModel.ColorStop.Color, Converter={StaticResource SKColorToColorConverter}}"
+                        IsEnabled="{Binding HasSelectedColorStopViewModel}"/>
 
                     <Label Grid.Row="0" Grid.Column="2" HorizontalAlignment="Right">Location:</Label>
                     <StackPanel Grid.Row="0" Grid.Column="3" Orientation="Horizontal">
-                        <TextBox x:Name="CurrentLocation" Width="40" />
+                        <TextBox Width="40" Text="{Binding SelectedColorStopViewModel.OffsetPercent}" IsEnabled="{Binding HasSelectedColorStopViewModel}" materialDesign:HintAssist.Hint="0"/>
                         <Label>%</Label>
                     </StackPanel>
 
-                    <Button Grid.Row="0" Grid.Column="4" Style="{StaticResource MaterialDesignRaisedButton}" Width="80" Height="25">
+                    <Button Grid.Row="0" Grid.Column="4" 
+                            Style="{StaticResource MaterialDesignRaisedButton}" 
+                            Width="80" 
+                            Height="25" 
+                            IsEnabled="{Binding HasSelectedColorStopViewModel}"
+                            Command="{s:Action RemoveColorStop}" 
+                            CommandParameter="{Binding SelectedColorStopViewModel}">
                         Delete
                     </Button>
                 </Grid>

src/Artemis.UI.Shared/Screens/GradientEditor/GradientEditorViewModel.cs

@@ -1,46 +1,79 @@
 using System.ComponentModel;
 using System.Linq;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Input;
 using Artemis.Core.Models.Profile;
+using Artemis.UI.Shared.Utilities;
 using Stylet;
 
 namespace Artemis.UI.Shared.Screens.GradientEditor
 {
     public class GradientEditorViewModel : Screen
     {
+        private ColorStopViewModel _selectedColorStopViewModel;
+
         public GradientEditorViewModel(ColorGradient colorGradient)
         {
             ColorGradient = colorGradient;
             ColorStopViewModels = new BindableCollection<ColorStopViewModel>();
 
-            ColorGradient.PropertyChanged += ColorGradientOnPropertyChanged;
-            UpdateColorStopViewModels();
+            foreach (var colorStop in ColorGradient.Stops.OrderBy(s => s.Position))
+                ColorStopViewModels.Add(new ColorStopViewModel(this, colorStop));
         }
-        
+
         public BindableCollection<ColorStopViewModel> ColorStopViewModels { get; set; }
 
-        public ColorGradient ColorGradient { get; }
-        public double PreviewWidth => 440;
-
-        private void ColorGradientOnPropertyChanged(object sender, PropertyChangedEventArgs e)
+        public ColorStopViewModel SelectedColorStopViewModel
         {
-            if (e.PropertyName == nameof(ColorGradient.Stops))
-                UpdateColorStopViewModels();
+            get => _selectedColorStopViewModel;
+            set
+            {
+                SetAndNotify(ref _selectedColorStopViewModel, value);
+                NotifyOfPropertyChange(nameof(HasSelectedColorStopViewModel));
+            }
         }
 
-        private void UpdateColorStopViewModels()
-        {
-            while (ColorGradient.Stops.Count > ColorStopViewModels.Count)
-                ColorStopViewModels.Add(new ColorStopViewModel(this));
-            while (ColorGradient.Stops.Count < ColorStopViewModels.Count)
-                ColorStopViewModels.RemoveAt(0);
+        public bool HasSelectedColorStopViewModel => SelectedColorStopViewModel != null;
 
-            var index = 0;
-            foreach (var colorStop in ColorGradient.Stops.OrderBy(s => s.Position))
-            {
-                var viewModel = ColorStopViewModels[index];
-                viewModel.Update(colorStop);
-                index++;
-            }
+        public ColorGradient ColorGradient { get; }
+        public double PreviewWidth => 437.5;
+
+        public void AddColorStop(object sender, MouseEventArgs e)
+        {
+            var child = VisualTreeUtilities.FindChild<Canvas>((DependencyObject) sender, null);
+            var position = (float) (e.GetPosition(child).X / PreviewWidth);
+            var stop = new ColorGradientStop(ColorGradient.GetColor(position), position);
+            ColorGradient.Stops.Add(stop);
+            ColorGradient.OnColorValuesUpdated();
+
+            var index = ColorGradient.Stops.OrderBy(s => s.Position).ToList().IndexOf(stop);
+            var viewModel = new ColorStopViewModel(this, stop);
+            ColorStopViewModels.Insert(index, viewModel);
+
+            SelectColorStop(viewModel);
+        }
+
+        public void RemoveColorStop(ColorStopViewModel colorStopViewModel)
+        {
+            ColorStopViewModels.Remove(colorStopViewModel);
+            ColorGradient.Stops.Remove(colorStopViewModel.ColorStop);
+            ColorGradient.OnColorValuesUpdated();
+
+            SelectColorStop(null);
+        }
+
+        public Point GetPositionInPreview(object sender, MouseEventArgs e)
+        {
+            var parent = VisualTreeUtilities.FindParent<Canvas>((DependencyObject) sender, null);
+            return e.GetPosition(parent);
+        }
+
+        public void SelectColorStop(ColorStopViewModel colorStopViewModel)
+        {
+            SelectedColorStopViewModel = colorStopViewModel;
+            foreach (var stopViewModel in ColorStopViewModels)
+                stopViewModel.IsSelected = stopViewModel == SelectedColorStopViewModel;
         }
     }
 }