DarthAffe/Artemis
1
0
Fork 0
mirror of https://github.com/Artemis-RGB/Artemis synced 2025-12-13 05:48:35 +00:00
Code Issues Releases Wiki Activity

Gradient editor - Implemented stop create/remove and edit

Browse Source
This commit is contained in:
SpoinkyNL 2020-03-15 10:42:23 +01:00
parent d0fbd63592
commit 0de9604ca0
12 changed files with 318 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/Artemis.UI.Shared/AnimationTimeline/BrushAnimation.cs Normal file
View File

@ -0,0 +1,76 @@
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
namespace Artemis.UI.Shared.AnimationTimeline
{
public class BrushAnimation : System.Windows.Media.Animation.AnimationTimeline
{
public static readonly DependencyProperty FromProperty =
DependencyProperty.Register("From", typeof(Brush), typeof(BrushAnimation));
public static readonly DependencyProperty ToProperty =
DependencyProperty.Register("To", typeof(Brush), typeof(BrushAnimation));
public override Type TargetPropertyType => typeof(Brush);
//we must define From and To, AnimationTimeline does not have this properties
public Brush From
{
get => (Brush) GetValue(FromProperty);
set => SetValue(FromProperty, value);
}
public Brush To
{
get => (Brush) GetValue(ToProperty);
set => SetValue(ToProperty, value);
}
public override object GetCurrentValue(object defaultOriginValue,
object defaultDestinationValue,
AnimationClock animationClock)
{
return GetCurrentValue(defaultOriginValue as Brush,
defaultDestinationValue as Brush,
animationClock);
}
public object GetCurrentValue(Brush defaultOriginValue,
Brush defaultDestinationValue,
AnimationClock animationClock)
{
if (!animationClock.CurrentProgress.HasValue)
return Brushes.Transparent;
//use the standard values if From and To are not set
//(it is the value of the given property)
defaultOriginValue = From ?? defaultOriginValue;
defaultDestinationValue = To ?? defaultDestinationValue;
if (animationClock.CurrentProgress.Value == 0)
return defaultOriginValue;
if (animationClock.CurrentProgress.Value == 1)
return defaultDestinationValue;
return new VisualBrush(new Border
{
Width = 1,
Height = 1,
Background = defaultOriginValue,
Child = new Border
{
Background = defaultDestinationValue,
Opacity = animationClock.CurrentProgress.Value
}
});
}
protected override Freezable CreateInstanceCore()
{
return new BrushAnimation();
}
}
}

53
src/Artemis.UI.Shared/Screens/GradientEditor/ColorStopView.xaml
View File

@ -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" />

116
src/Artemis.UI.Shared/Screens/GradientEditor/ColorStopViewModel.cs
View File

@ -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));
ColorStop.Position = (float) newPosition;
NotifyOfPropertyChange(() => Offset);
NotifyOfPropertyChange(() => Color);
var parent = VisualTreeUtilities.FindParent<Canvas>((DependencyObject) sender, null);
var position = e.GetPosition(parent);
if (position.Y > 50)
{
WillRemoveColorStop = true;
return;
}
private Point GetPositionInPreview(object sender, MouseEventArgs e)
{
var parent = VisualTreeHelper.GetParent((DependencyObject) sender);
return e.GetPosition((IInputElement) parent);
WillRemoveColorStop = false;
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);
}
}
}

23
src/Artemis.UI.Shared/Screens/GradientEditor/GradientEditorView.xaml
View File

@ -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>

67
src/Artemis.UI.Shared/Screens/GradientEditor/GradientEditorViewModel.cs
View File

@ -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 ColorStopViewModel SelectedColorStopViewModel
{
get => _selectedColorStopViewModel;
set
{
SetAndNotify(ref _selectedColorStopViewModel, value);
NotifyOfPropertyChange(nameof(HasSelectedColorStopViewModel));
}
}
public bool HasSelectedColorStopViewModel => SelectedColorStopViewModel != null;
public ColorGradient ColorGradient { get; }
public double PreviewWidth => 440;
public double PreviewWidth => 437.5;
private void ColorGradientOnPropertyChanged(object sender, PropertyChangedEventArgs e)
public void AddColorStop(object sender, MouseEventArgs e)
{
if (e.PropertyName == nameof(ColorGradient.Stops))
UpdateColorStopViewModels();
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);
}
private void UpdateColorStopViewModels()
public void RemoveColorStop(ColorStopViewModel colorStopViewModel)
{
while (ColorGradient.Stops.Count > ColorStopViewModels.Count)
ColorStopViewModels.Add(new ColorStopViewModel(this));
while (ColorGradient.Stops.Count < ColorStopViewModels.Count)
ColorStopViewModels.RemoveAt(0);
ColorStopViewModels.Remove(colorStopViewModel);
ColorGradient.Stops.Remove(colorStopViewModel.ColorStop);
ColorGradient.OnColorValuesUpdated();
var index = 0;
foreach (var colorStop in ColorGradient.Stops.OrderBy(s => s.Position))
SelectColorStop(null);
}
public Point GetPositionInPreview(object sender, MouseEventArgs e)
{
var viewModel = ColorStopViewModels[index];
viewModel.Update(colorStop);
index++;
}
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;
}
}
}

2
src/Artemis.UI/Utilities/HitTestUtilities.cs → src/Artemis.UI.Shared/Utilities/HitTestUtilities.cs
View File

@ -2,7 +2,7 @@
using System.Windows;
using System.Windows.Media;
namespace Artemis.UI.Utilities
namespace Artemis.UI.Shared.Utilities
{
public static class HitTestUtilities
{

2
src/Artemis.UI/Utilities/ShortcutUtilities.cs → src/Artemis.UI.Shared/Utilities/ShortcutUtilities.cs
View File

@ -1,7 +1,7 @@
using System;
using System.Runtime.InteropServices;
namespace Artemis.UI.Utilities
namespace Artemis.UI.Shared.Utilities
{
public class ShortcutUtilities
{

2
src/Artemis.UI/Utilities/SizeObserver.cs → src/Artemis.UI.Shared/Utilities/SizeObserver.cs
View File

@ -1,6 +1,6 @@
using System.Windows;
namespace Artemis.UI.Utilities
namespace Artemis.UI.Shared.Utilities
{
public static class SizeObserver
{

2
src/Artemis.UI/Utilities/TriggerTracing.cs → src/Artemis.UI.Shared/Utilities/TriggerTracing.cs
View File

@ -20,7 +20,7 @@ using System.Windows.Media.Animation;
//
// As this works on anything that inherits from TriggerBase, it will also work on <MultiTrigger>.
namespace Artemis.UI.Utilities
namespace Artemis.UI.Shared.Utilities
{
#if DEBUG

42
src/Artemis.UI.Shared/Utilities/UIUtilities.cs → src/Artemis.UI.Shared/Utilities/VisualTreeUtilities.cs
View File

@ -4,7 +4,7 @@ using System.Windows.Media;
namespace Artemis.UI.Shared.Utilities
{
// ReSharper disable once InconsistentNaming
public static class UIUtilities
public static class VisualTreeUtilities
{
/// <summary>
/// Finds a Child of a given item in the visual tree.
@ -29,8 +29,7 @@ namespace Artemis.UI.Shared.Utilities
{
var child = VisualTreeHelper.GetChild(parent, i);
// If the child is not of the request child type child
var childType = child as T;
if (childType == null)
if (!(child is T))
{
// recursively drill down the tree
foundChild = FindChild<T>(child, childName);
@ -40,9 +39,8 @@ namespace Artemis.UI.Shared.Utilities
}
else if (!string.IsNullOrEmpty(childName))
{
var frameworkElement = child as FrameworkElement;
// If the child's name is set for search
if (frameworkElement != null && frameworkElement.Name == childName)
if (child is FrameworkElement frameworkElement && frameworkElement.Name == childName)
{
// if the child's name is of the request name
foundChild = (T) child;
@ -59,5 +57,39 @@ namespace Artemis.UI.Shared.Utilities
return foundChild;
}
/// <summary>
/// Finds a parent of a given item in the visual tree.
/// </summary>
/// <param name="child">A child of the queried item.</param>
/// <typeparam name="T">The type of the queried item.</typeparam>
/// <param name="parentName">x:Name or Name of parent. </param>
/// <returns>
/// The first parent item that matches the submitted type parameter.
/// If not matching item can be found,
/// a null parent is being returned.
/// </returns>
public static T FindParent<T>(DependencyObject child, string parentName) where T : DependencyObject
{
// Get parent item
var parentObject = VisualTreeHelper.GetParent(child);
// We've reached the end of the tree
if (parentObject == null)
return null;
// Check if the parent matches the type we're looking for
if (!(parentObject is T parent))
return FindParent<T>(parentObject, parentName);
// If no name is set the first matching type is a match
if (string.IsNullOrEmpty(parentName))
return parent;
// If the parent's name is set for search that must match as well
if (parent is FrameworkElement frameworkElement && frameworkElement.Name == parentName)
return parent;
return FindParent<T>(parentObject, parentName);
}
}
}

1
src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/Timeline/PropertyTimelineViewModel.cs
View File

@ -7,6 +7,7 @@ using System.Windows.Media;
using Artemis.UI.Events;
using Artemis.UI.Ninject.Factories;
using Artemis.UI.Services.Interfaces;
using Artemis.UI.Shared.Utilities;
using Artemis.UI.Utilities;
using Stylet;

2
src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/ProfileView.xaml
View File

@ -6,7 +6,7 @@
xmlns:s="https://github.com/canton7/Stylet"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:profileEditor="clr-namespace:Artemis.UI.Screens.Module.ProfileEditor.Visualization"
xmlns:utilities="clr-namespace:Artemis.UI.Utilities"
xmlns:utilities="clr-namespace:Artemis.UI.Shared.Utilities;assembly=Artemis.UI.Shared"
mc:Ignorable="d"
d:DesignHeight="510.9" d:DesignWidth="800"
d:DataContext="{d:DesignInstance {x:Type profileEditor:ProfileViewModel}}">