Gradient editor - WIP commit

2026-11-12 11:56:30 +00:00 · 2020-03-13 13:05:33 +01:00
1 parent 19eb9c3275
commit 81ec5bfe8f
@@ -0,0 +1,34 @@
+<UserControl x:Class="Artemis.UI.Shared.Screens.GradientEditor.ColorStopView"
+             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:local="clr-namespace:Artemis.UI.Shared.Screens.GradientEditor"
+             xmlns:s="https://github.com/canton7/Stylet"
+             xmlns:converters="clr-namespace:Artemis.UI.Shared.Converters"
+             mc:Ignorable="d"
+             d:DesignHeight="450" d:DesignWidth="800"
+             d:DataContext="{d:DesignInstance local:ColorStopViewModel}">
+    <UserControl.Resources>
+        <converters:SKColorToColorConverter x:Key="SKColorToColorConverter" />
+    </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"
+          Cursor="Hand"
+          MouseDown="{s:Action StopMouseDown}"
+          MouseUp="{s:Action StopMouseUp}"
+          MouseMove="{s:Action StopMouseMove}"
+          Fill="{Binding Path=Color, Converter={StaticResource SKColorToColorConverter}}">
+        <Path.RenderTransform>
+            <TransformGroup>
+                <RotateTransform Angle="180" />
+                <TranslateTransform X="14" Y="33" />
+                <ScaleTransform ScaleX="0.45" ScaleY="0.5" />
+            </TransformGroup>
+        </Path.RenderTransform>
+        <Path.Effect>
+            <DropShadowEffect BlurRadius="15" Opacity="0.25" Direction="180" />
+        </Path.Effect>
+    </Path>
+</UserControl>
@@ -0,0 +1,80 @@
+using System;
+using System.Windows;
+using System.Windows.Input;
+using System.Windows.Media;
+using Artemis.Core.Models.Profile;
+using PropertyChanged;
+using SkiaSharp;
+using Stylet;
+
+namespace Artemis.UI.Shared.Screens.GradientEditor
+{
+    public class ColorStopViewModel : PropertyChangedBase
+    {
+        private readonly GradientEditorViewModel _gradientEditorViewModel;
+
+        public ColorStopViewModel(GradientEditorViewModel gradientEditorViewModel)
+        {
+            _gradientEditorViewModel = gradientEditorViewModel;
+        }
+
+        public ColorGradientStop ColorStop { get; set; }
+        public double Offset => ColorStop.Position * _gradientEditorViewModel.PreviewWidth;
+        public SKColor Color => ColorStop.Color;
+
+        #region Movement
+
+        private double _mouseDownOffset;
+        private DateTime _mouseDownTime;
+
+        public void StopMouseDown(object sender, MouseButtonEventArgs e)
+        {
+            var position = GetPositionInPreview(sender, e);
+            ((IInputElement) sender).CaptureMouse();
+            _mouseDownOffset = Offset - position.X;
+            _mouseDownTime = DateTime.Now;
+        }
+
+        public void StopMouseUp(object sender, MouseButtonEventArgs e)
+        {
+            // On regular click, select this color stop
+            if (DateTime.Now - _mouseDownTime <= TimeSpan.FromMilliseconds(250))
+            {
+            }
+
+            ((IInputElement) sender).ReleaseMouseCapture();
+            e.Handled = true;
+        }
+
+        public void StopMouseMove(object sender, MouseEventArgs e)
+        {
+            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));
+
+            ColorStop.Position = (float) newPosition;
+            NotifyOfPropertyChange(() => Offset);
+            NotifyOfPropertyChange(() => Color);
+        }
+
+        private Point GetPositionInPreview(object sender, MouseEventArgs e)
+        {
+            var parent = VisualTreeHelper.GetParent((DependencyObject) sender);
+            return e.GetPosition((IInputElement) parent);
+        }
+
+        #endregion
+
+        public void Update(ColorGradientStop colorStop)
+        {
+            ColorStop = colorStop;
+            NotifyOfPropertyChange(() => Offset);
+            NotifyOfPropertyChange(() => Color);
+        }
+    }
+}
@@ -1,70 +0,0 @@
-using System;
-using System.ComponentModel;
-using System.Runtime.CompilerServices;
-using System.Windows;
-using Artemis.Core.Models.Profile;
-using Artemis.UI.Shared.Annotations;
-using MaterialDesignExtensions.Controls;
-
-namespace Artemis.UI.Shared.Screens.GradientEditor
-{
-    /// <summary>
-    ///     Interaction logic for GradientEditor.xaml
-    /// </summary>
-    public partial class GradientEditor : MaterialWindow, INotifyPropertyChanged
-    {
-        public static readonly DependencyProperty ColorGradientProperty = DependencyProperty.Register(nameof(ColorGradient), typeof(ColorGradient), typeof(GradientEditor),
-            new FrameworkPropertyMetadata(default(ColorGradient), FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, ColorGradientPropertyChangedCallback));
-
-        public static readonly RoutedEvent ColorGradientChangedEvent =
-            EventManager.RegisterRoutedEvent(
-                nameof(ColorGradient),
-                RoutingStrategy.Bubble,
-                typeof(RoutedPropertyChangedEventHandler<ColorGradient>),
-                typeof(GradientEditor));
-
-        private bool _inCallback;
-
-        public GradientEditor(ColorGradient colorGradient)
-        {
-            DataContext = this;
-
-            InitializeComponent();
-            ColorGradient = colorGradient;
-        }
-
-        public ColorGradient ColorGradient
-        {
-            get => (ColorGradient) GetValue(ColorGradientProperty);
-            set => SetValue(ColorGradientProperty, value);
-        }
-
-        public event PropertyChangedEventHandler PropertyChanged;
-
-        [NotifyPropertyChangedInvocator]
-        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
-        {
-            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
-        }
-
-        private static void ColorGradientPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
-        {
-            var editor = (GradientEditor) d;
-            if (editor._inCallback)
-                return;
-
-            editor._inCallback = true;
-            editor.OnPropertyChanged(nameof(ColorGradient));
-            editor._inCallback = false;
-        }
-
-        private void Rectangle_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
-        {
-            var position = e.GetPosition((IInputElement) sender);
-            // Position ranges from 0.0 to 1.0
-            var newPosition = (float) Math.Min(1, Math.Max(0, Math.Round((position.X) / 435.0, 3, MidpointRounding.AwayFromZero)));
-
-            ColorGradient.Colors.Add(new ColorGradientColor(ColorGradient.GetColor(newPosition), newPosition));
-        }
-    }
-}
@@ -1,32 +0,0 @@
-<UserControl
-    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:local="clr-namespace:Artemis.UI.Shared.Screens.GradientEditor"
-    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
-    x:Class="Artemis.UI.Shared.Screens.GradientEditor.GradientEditorColor"
-    mc:Ignorable="d"
-    d:DesignHeight="450" d:DesignWidth="800">
-    <Canvas>
-        <Path x:Name="ColorStop"
-              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"
-              Cursor="Hand"
-              MouseDown="ColorStop_MouseDown"
-              MouseUp="ColorStop_MouseUp"
-              MouseMove="ColorStop_MouseMove">
-            <Path.RenderTransform>
-                <TransformGroup>
-                    <RotateTransform Angle="180" />
-                    <TranslateTransform X="14" Y="33" />
-                    <ScaleTransform ScaleX="0.45" ScaleY="0.5" />
-                </TransformGroup>
-            </Path.RenderTransform>
-            <Path.Effect>
-                <DropShadowEffect BlurRadius="15" Opacity="0.25" Direction="180"></DropShadowEffect>
-            </Path.Effect>
-        </Path>
-    </Canvas>
-</UserControl>
@@ -1,118 +0,0 @@
-using System;
-using System.ComponentModel;
-using System.Linq;
-using System.Runtime.CompilerServices;
-using System.Windows;
-using System.Windows.Controls;
-using System.Windows.Input;
-using System.Windows.Media;
-using Artemis.Core.Models.Profile;
-using Artemis.UI.Shared.Annotations;
-using Artemis.UI.Shared.Utilities;
-
-namespace Artemis.UI.Shared.Screens.GradientEditor
-{
-    /// <summary>
-    ///     Interaction logic for GradientEditorColor.xaml
-    /// </summary>
-    public partial class GradientEditorColor : UserControl, INotifyPropertyChanged
-    {
-        private const double CanvasWidth = 435.0;
-
-        public static readonly DependencyProperty ColorGradientColorProperty = DependencyProperty.Register(nameof(GradientColor), typeof(ColorGradientColor), typeof(GradientEditorColor),
-            new FrameworkPropertyMetadata(default(ColorGradientColor), ColorGradientColorPropertyChangedCallback));
-
-        public static readonly DependencyProperty ColorGradientProperty = DependencyProperty.Register(nameof(ColorGradient), typeof(ColorGradient), typeof(GradientEditorColor),
-            new FrameworkPropertyMetadata(default(ColorGradient)));
-
-        private readonly Canvas _previewCanvas;
-
-        private bool _inCallback;
-        private double _mouseDownOffset;
-        private DateTime _mouseDownTime;
-
-        public GradientEditorColor()
-        {
-            InitializeComponent();
-
-            var window = Application.Current.Windows.OfType<GradientEditor>().FirstOrDefault();
-            _previewCanvas = UIUtilities.FindChild<Canvas>(window, "PreviewCanvas");
-        }
-
-        public ColorGradient ColorGradient
-        {
-            get => (ColorGradient) GetValue(ColorGradientProperty);
-            set => SetValue(ColorGradientProperty, value);
-        }
-
-        public ColorGradientColor GradientColor
-        {
-            get => (ColorGradientColor) GetValue(ColorGradientColorProperty);
-            set => SetValue(ColorGradientColorProperty, value);
-        }
-
-        public event PropertyChangedEventHandler PropertyChanged;
-
-        [NotifyPropertyChangedInvocator]
-        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
-        {
-            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
-        }
-
-        private static void ColorGradientColorPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
-        {
-            var self = (GradientEditorColor) d;
-            if (self._inCallback)
-                return;
-
-            self._inCallback = true;
-
-
-            self.OnPropertyChanged(nameof(GradientColor));
-            self.Update();
-            self._inCallback = false;
-        }
-
-        private void Update()
-        {
-            ColorStop.SetValue(Canvas.LeftProperty, CanvasWidth * GradientColor.Position);
-            ColorStop.Fill = new SolidColorBrush(Color.FromArgb(
-                GradientColor.Color.Alpha,
-                GradientColor.Color.Red,
-                GradientColor.Color.Green,
-                GradientColor.Color.Blue
-            ));
-        }
-
-        private void ColorStop_MouseDown(object sender, MouseButtonEventArgs e)
-        {
-            ((IInputElement) sender).CaptureMouse();
-            _mouseDownOffset = (double) ColorStop.GetValue(Canvas.LeftProperty) - e.GetPosition(_previewCanvas).X;
-            _mouseDownTime = DateTime.Now;
-        }
-
-        private void ColorStop_MouseUp(object sender, MouseButtonEventArgs e)
-        {
-            // On regular click, select this color stop
-            if (DateTime.Now - _mouseDownTime <= TimeSpan.FromMilliseconds(250))
-            {
-            }
-
-            ((IInputElement) sender).ReleaseMouseCapture();
-            e.Handled = true;
-        }
-
-        private void ColorStop_MouseMove(object sender, MouseEventArgs e)
-        {
-            if (!((IInputElement) sender).IsMouseCaptured)
-                return;
-
-            var position = e.GetPosition(_previewCanvas);
-            // Position ranges from 0.0 to 1.0
-            var newPosition = Math.Min(1, Math.Max(0, Math.Round((position.X + _mouseDownOffset) / CanvasWidth, 3, MidpointRounding.AwayFromZero)));
-            GradientColor.Position = (float) newPosition;
-            ColorGradient.OnColorValuesUpdated();
-            Update();
-        }
-    }
-}
@@ -1,14 +1,14 @@
-<controls:MaterialWindow x:Class="Artemis.UI.Shared.Screens.GradientEditor.GradientEditor"
+<controls:MaterialWindow x:Class="Artemis.UI.Shared.Screens.GradientEditor.GradientEditorView"
                         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                         xmlns:local="clr-namespace:Artemis.UI.Shared.Screens.GradientEditor"
                         xmlns:controls="clr-namespace:MaterialDesignExtensions.Controls;assembly=MaterialDesignExtensions"
-                         xmlns:s="https://github.com/canton7/Stylet"
+                         xmlns:converters="clr-namespace:Artemis.UI.Shared.Converters"
                         xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
                         xmlns:shared="clr-namespace:Artemis.UI.Shared"
-                         xmlns:converters="clr-namespace:Artemis.UI.Shared.Converters"
+                         xmlns:s="https://github.com/canton7/Stylet"
                         mc:Ignorable="d"
                         Title="Gradient Editor"
                         Background="{DynamicResource MaterialDesignPaper}"
@@ -19,7 +19,8 @@
                         Icon="/Resources/Images/Logo/logo-512.png"
                         FadeContentIfInactive="False"
                         d:DesignHeight="450"
-                         d:DesignWidth="800">
+                         d:DesignWidth="800"
+                         d:DataContext="{d:DesignInstance local:GradientEditorViewModel}">
    <controls:MaterialWindow.Resources>
        <converters:ColorGradientToGradientStopsConverter x:Key="ColorGradientToGradientStopsConverter" />
    </controls:MaterialWindow.Resources>
@@ -41,43 +42,31 @@
                <TextBlock Margin="15 15 0 0">Gradient</TextBlock>
                <Separator Margin="15 5" />

-                <Grid>
-                    <ItemsControl ItemsSource="{Binding ColorGradient.Colors}" ClipToBounds="False" Margin="15 0" MouseLeftButtonUp="Rectangle_MouseLeftButtonUp" Cursor="Cross">
-                        <ItemsControl.ItemsPanel>
-                            <ItemsPanelTemplate>
-                                <Canvas Height="60" Width="437" x:Name="PreviewCanvas">
-                                    <Canvas.Background>
-                                        <VisualBrush Stretch="None" AlignmentY="Top">
-                                            <VisualBrush.Visual>
-                                                <materialDesign:Card materialDesign:ShadowAssist.ShadowDepth="Depth1" Margin="15">
-                                                    <Rectangle x:Name="Preview" Width="{Binding ActualWidth, ElementName=PreviewCanvas}">
-                                                        <Rectangle.Fill>
-                                                            <LinearGradientBrush GradientStops="{Binding ColorGradient.Colors, Converter={StaticResource ColorGradientToGradientStopsConverter}}" />
-                                                        </Rectangle.Fill>
-                                                    </Rectangle>
-                                                </materialDesign:Card>
-                                            </VisualBrush.Visual>
-                                        </VisualBrush>
-                                    </Canvas.Background>
-                                </Canvas>
-                            </ItemsPanelTemplate>
-                        </ItemsControl.ItemsPanel>
-                        <ItemsControl.ItemContainerStyle>
-                            <Style TargetType="ContentPresenter">
-                                <Setter Property="Canvas.Top" Value="40" />
-                            </Style>
-                        </ItemsControl.ItemContainerStyle>
-                        <ItemsControl.ItemTemplate>
-                            <DataTemplate>
-                                <local:GradientEditorColor
-                                    ColorGradient="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=controls:MaterialWindow}, Path=ColorGradient}"
-                                    GradientColor="{Binding}" />
-                            </DataTemplate>
-                        </ItemsControl.ItemTemplate>
-                    </ItemsControl>
-                </Grid>
+                <Rectangle x:Name="Preview" Width="440" Height="40" Margin="15 0">
+                    <Rectangle.Fill>
+                        <LinearGradientBrush GradientStops="{Binding ColorGradient.Stops, Converter={StaticResource ColorGradientToGradientStopsConverter}}" />
+                    </Rectangle.Fill>
+                </Rectangle>

-                <TextBlock Margin="15 15 0 0">Stops</TextBlock>
+                <ItemsControl ItemsSource="{Binding ColorStopViewModels}" Margin="15 0" MouseLeftButtonUp="{s:Action CanvasMouseDown}" Cursor="Cross">
+                    <ItemsControl.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <Canvas Height="60" Width="440" x:Name="PreviewCanvas" Background="Transparent"/>
+                        </ItemsPanelTemplate>
+                    </ItemsControl.ItemsPanel>
+                    <ItemsControl.ItemContainerStyle>
+                        <Style TargetType="ContentPresenter">
+                            <Setter Property="Canvas.Left" Value="{Binding Offset}" />
+                        </Style>
+                    </ItemsControl.ItemContainerStyle>
+                    <ItemsControl.ItemTemplate>
+                        <DataTemplate>
+                            <ContentControl s:View.Model="{Binding}" />
+                        </DataTemplate>
+                    </ItemsControl.ItemTemplate>
+                </ItemsControl>
+
+                <TextBlock Margin="15 15 0 0">Selected stop</TextBlock>
                <Separator Margin="15 5" />

                <Grid Margin="15">
@@ -0,0 +1,46 @@
+using System.ComponentModel;
+using System.Linq;
+using Artemis.Core.Models.Profile;
+using Stylet;
+
+namespace Artemis.UI.Shared.Screens.GradientEditor
+{
+    public class GradientEditorViewModel : Screen
+    {
+        public GradientEditorViewModel(ColorGradient colorGradient)
+        {
+            ColorGradient = colorGradient;
+            ColorStopViewModels = new BindableCollection<ColorStopViewModel>();
+
+            ColorGradient.PropertyChanged += ColorGradientOnPropertyChanged;
+            UpdateColorStopViewModels();
+        }
+        
+        public BindableCollection<ColorStopViewModel> ColorStopViewModels { get; set; }
+
+        public ColorGradient ColorGradient { get; }
+        public double PreviewWidth => 440;
+
+        private void ColorGradientOnPropertyChanged(object sender, PropertyChangedEventArgs e)
+        {
+            if (e.PropertyName == nameof(ColorGradient.Stops))
+                UpdateColorStopViewModels();
+        }
+
+        private void UpdateColorStopViewModels()
+        {
+            while (ColorGradient.Stops.Count > ColorStopViewModels.Count)
+                ColorStopViewModels.Add(new ColorStopViewModel(this));
+            while (ColorGradient.Stops.Count < ColorStopViewModels.Count)
+                ColorStopViewModels.RemoveAt(0);
+
+            var index = 0;
+            foreach (var colorStop in ColorGradient.Stops.OrderBy(s => s.Position))
+            {
+                var viewModel = ColorStopViewModels[index];
+                viewModel.Update(colorStop);
+                index++;
+            }
+        }
+    }
+}