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 - WIP commit

Browse Source
This commit is contained in:
Robert 2020-03-10 19:34:17 +01:00
parent 2aec2ab000
commit f95aaf2443
10 changed files with 217 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/Artemis.Core/Models/Profile/ColorGradient.cs
View File

@ -1,38 +1,35 @@
using System.ComponentModel;
using System;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using Artemis.Core.Annotations;
using PropertyChanged;
using SkiaSharp;
using Stylet;
namespace Artemis.Core.Models.Profile
{
[DoNotNotify]
public class ColorGradient : INotifyPropertyChanged
{
private float _rotation;
public ColorGradient()
{
Colors = new BindableCollection<ColorGradientColor>();
}
public BindableCollection<ColorGradientColor> Colors { get; }
public float Rotation { get; set; }
public float Rotation
public SKColor[] GetColorsArray()
{
get => _rotation;
set
{
if (_rotation != value)
{
_rotation = value;
OnPropertyChanged(nameof(Rotation));
}
}
return Colors.OrderBy(c => c.Position).Select(c => c.Color).ToArray();
}
public float[] GetColorPositionsArray()
{
return Colors.OrderBy(c => c.Position).Select(c => c.Position).ToArray();
}
#region PropertyChanged
public event PropertyChangedEventHandler PropertyChanged;
[NotifyPropertyChangedInvocator]
@ -41,13 +38,15 @@ namespace Artemis.Core.Models.Profile
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
public SKColor[] GetColorsArray()
#endregion
public void OnColorValuesUpdated()
{
return Colors.Select(c => c.Color).ToArray();
OnPropertyChanged(nameof(Colors));
}
}
public struct ColorGradientColor
public class ColorGradientColor : INotifyPropertyChanged
{
public ColorGradientColor(SKColor color, float position)
{
@ -57,5 +56,17 @@ namespace Artemis.Core.Models.Profile
public SKColor Color { get; set; }
public float Position { get; set; }
#region PropertyChanged
public event PropertyChangedEventHandler PropertyChanged;
[NotifyPropertyChangedInvocator]
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
#endregion
}
}

20
src/Artemis.UI.Shared/Converters/ColorGradientToGradientStopsConverter.cs
View File

@ -1,9 +1,11 @@
using System;
using System.Globalization;
using System.Linq;
using System.Windows.Data;
using System.Windows.Media;
using Artemis.Core.Models.Profile;
using SkiaSharp;
using Stylet;
namespace Artemis.UI.Shared.Converters
{
@ -12,17 +14,17 @@ namespace Artemis.UI.Shared.Converters
/// Converts <see cref="T:Artemis.Core.Models.Profile.ColorGradient" /> into a
/// <see cref="T:System.Windows.Media.GradientStopCollection" />.
/// </summary>
[ValueConversion(typeof(ColorGradient), typeof(GradientStopCollection))]
[ValueConversion(typeof(BindableCollection<ColorGradientColor>), typeof(GradientStopCollection))]
public class ColorGradientToGradientStopsConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var colorGradient = (ColorGradient) value;
var colorGradients = (BindableCollection<ColorGradientColor>) value;
var collection = new GradientStopCollection();
if (colorGradient == null)
if (colorGradients == null)
return collection;
foreach (var c in colorGradient.Colors)
foreach (var c in colorGradients.OrderBy(s => s.Position))
collection.Add(new GradientStop(Color.FromArgb(c.Color.Alpha, c.Color.Red, c.Color.Green, c.Color.Blue), c.Position));
return collection;
}
@ -30,13 +32,13 @@ namespace Artemis.UI.Shared.Converters
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
var collection = (GradientStopCollection) value;
var colorGradient = new ColorGradient();
var colorGradients = new BindableCollection<ColorGradientColor>();
if (collection == null)
return colorGradient;
return colorGradients;
foreach (var c in collection)
colorGradient.Colors.Add(new ColorGradientColor(new SKColor(c.Color.R, c.Color.G, c.Color.B, c.Color.A), (float) c.Offset));
return colorGradient;
foreach (var c in collection.OrderBy(s => s.Offset))
colorGradients.Add(new ColorGradientColor(new SKColor(c.Color.R, c.Color.G, c.Color.B, c.Color.A), (float) c.Offset));
return colorGradients;
}
}
}

2
src/Artemis.UI.Shared/GradientPicker.xaml
View File

@ -43,7 +43,7 @@
<Ellipse Stroke="{DynamicResource NormalBorderBrush}" Cursor="Hand" MouseUp="UIElement_OnMouseUp">
<Ellipse.Fill>
<LinearGradientBrush
GradientStops="{Binding ColorGradient, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}, Converter={StaticResource ColorGradientToGradientStopsConverter}}" />
GradientStops="{Binding ColorGradient.Colors, Mode=OneWay, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}, Converter={StaticResource ColorGradientToGradientStopsConverter}}" />
</Ellipse.Fill>
</Ellipse>
</Border>

25
src/Artemis.UI.Shared/Screens/GradientEditor/GradientEditor.xaml
View File

@ -13,7 +13,6 @@
Title="Gradient Editor"
Background="{DynamicResource MaterialDesignPaper}"
FontFamily="pack://application:,,,/MaterialDesignThemes.Wpf;component/Resources/Roboto/#Roboto"
UseLayoutRounding="True"
Width="500"
Height="600"
ResizeMode="NoResize"
@ -42,20 +41,24 @@
<TextBlock Margin="15 15 0 0">Gradient</TextBlock>
<Separator Margin="15 5" />
<ItemsControl ItemsSource="{Binding ColorGradient.Colors, Mode=OneWay}" ClipToBounds="False" Margin="15 0">
<ItemsControl ItemsSource="{Binding ColorGradient.Colors}" ClipToBounds="False" Margin="15 0">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas Height="60" Width="435" x:Name="PreviewCanvas" >
<Canvas Height="60" Width="437" x:Name="PreviewCanvas">
<Canvas.Background>
<VisualBrush Stretch="None" AlignmentY="Top">
<VisualBrush.Visual>
<Border Width="{Binding ActualWidth, ElementName=PreviewCanvas}" Height="50">
<Rectangle x:Name="Preview" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<materialDesign:Card materialDesign:ShadowAssist.ShadowDepth="Depth1" Margin="15">
<Rectangle x:Name="Preview"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Width="{Binding ActualWidth, ElementName=PreviewCanvas}"
Height="35">
<Rectangle.Fill>
<LinearGradientBrush GradientStops="{Binding ColorGradient, Mode=OneWay, Converter={StaticResource ColorGradientToGradientStopsConverter}}" />
<LinearGradientBrush GradientStops="{Binding ColorGradient.Colors, Converter={StaticResource ColorGradientToGradientStopsConverter}}" />
</Rectangle.Fill>
</Rectangle>
</Border>
</materialDesign:Card>
</VisualBrush.Visual>
</VisualBrush>
</Canvas.Background>
@ -64,16 +67,18 @@
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Canvas.Top" Value="50" />
<Setter Property="Canvas.Top" Value="40" />
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<local:GradientEditorColor GradientColor="{Binding}"></local:GradientEditorColor>
<local:GradientEditorColor
ColorGradient="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=controls:MaterialWindow}, Path=ColorGradient}"
GradientColor="{Binding}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<TextBlock Margin="15 15 0 0">Stops</TextBlock>
<Separator Margin="15 5" />

8
src/Artemis.UI.Shared/Screens/GradientEditor/GradientEditor.xaml.cs
View File

@ -1,4 +1,5 @@
using System.ComponentModel;
using System;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows;
using Artemis.Core.Models.Profile;
@ -26,11 +27,12 @@ namespace Artemis.UI.Shared.Screens.GradientEditor
public GradientEditor(ColorGradient colorGradient)
{
InitializeComponent();
DataContext = this;
InitializeComponent();
ColorGradient = colorGradient;
}
public ColorGradient ColorGradient
{
get => (ColorGradient) GetValue(ColorGradientProperty);

13
src/Artemis.UI.Shared/Screens/GradientEditor/GradientEditorColor.xaml
View File

@ -4,22 +4,29 @@
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="White"
Stroke="{DynamicResource NormalBorderBrush}"
StrokeThickness="2"
Cursor="Hand">
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.5" ScaleY="0.5" />
<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>

80
src/Artemis.UI.Shared/Screens/GradientEditor/GradientEditorColor.xaml.cs
View File

@ -1,10 +1,14 @@
using System.ComponentModel;
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
{
@ -13,14 +17,32 @@ namespace Artemis.UI.Shared.Screens.GradientEditor
/// </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
@ -44,28 +66,52 @@ namespace Artemis.UI.Shared.Screens.GradientEditor
return;
self._inCallback = true;
self.OnPropertyChanged(nameof(GradientColor));
// Get the parent canvas
DependencyObject parent = null;
DependencyObject current = self;
while (current != null && !(parent is Canvas))
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))
{
parent = VisualTreeHelper.GetParent(current);
current = parent;
}
if (parent is Canvas canvas)
self.ColorStop.SetValue(Canvas.LeftProperty, (double) 435f * self.GradientColor.Position);
((IInputElement) sender).ReleaseMouseCapture();
}
self.ColorStop.Fill = new SolidColorBrush(Color.FromArgb(
self.GradientColor.Color.Alpha,
self.GradientColor.Color.Red,
self.GradientColor.Color.Green,
self.GradientColor.Color.Blue
));
private void ColorStop_MouseMove(object sender, MouseEventArgs e)
{
if (!((IInputElement) sender).IsMouseCaptured)
return;
self._inCallback = false;
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();
}
}
}

11
src/Artemis.UI.Shared/Services/Dialog/DialogService.cs
View File

@ -95,7 +95,14 @@ namespace Artemis.UI.Shared.Services.Dialog
new ConstructorArgument("message", message),
new ConstructorArgument("exception", exception)
};
await Execute.OnUIThreadAsync(async () => await ShowDialog<ExceptionDialogViewModel>(arguments));
try
{
await Execute.OnUIThreadAsync(async () => await ShowDialog<ExceptionDialogViewModel>(arguments));
}
catch (Exception)
{
//ignored
}
}
private async Task<object> ShowDialog(string identifier, DialogViewModelBase viewModel)
@ -105,7 +112,7 @@ namespace Artemis.UI.Shared.Services.Dialog
{
var view = _viewManager.CreateViewForModel(viewModel);
_viewManager.BindViewToModel(view, viewModel);
if (identifier == null)
result = DialogHost.Show(view, viewModel.OnDialogOpened, viewModel.OnDialogClosed);
else

63
src/Artemis.UI.Shared/Utilities/UIUtilities.cs Normal file
View File

@ -0,0 +1,63 @@
using System.Windows;
using System.Windows.Media;
namespace Artemis.UI.Shared.Utilities
{
// ReSharper disable once InconsistentNaming
public static class UIUtilities
{
/// <summary>
/// Finds a Child of a given item in the visual tree.
/// </summary>
/// <param name="parent">A direct parent of the queried item.</param>
/// <typeparam name="T">The type of the queried item.</typeparam>
/// <param name="childName">x:Name or Name of child. </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 FindChild<T>(DependencyObject parent, string childName) where T : DependencyObject
{
// Confirm parent and childName are valid.
if (parent == null) return null;
T foundChild = null;
var childrenCount = VisualTreeHelper.GetChildrenCount(parent);
for (var i = 0; i < childrenCount; i++)
{
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)
{
// recursively drill down the tree
foundChild = FindChild<T>(child, childName);
// If the child is found, break so we do not overwrite the found child.
if (foundChild != null) break;
}
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 the child's name is of the request name
foundChild = (T) child;
break;
}
}
else
{
// child element found.
foundChild = (T) child;
break;
}
}
return foundChild;
}
}
}

16
src/Plugins/Artemis.Plugins.LayerBrushes.Color/ColorBrush.cs
View File

@ -1,5 +1,4 @@
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using Artemis.Core.Models.Profile;
@ -26,7 +25,8 @@ namespace Artemis.Plugins.LayerBrushes.Color
CreateShader(_shaderBounds);
Layer.RenderPropertiesUpdated += (sender, args) => CreateShader(_shaderBounds);
GradientTypeProperty.ValueChanged += (sender, args) => CreateShader(_shaderBounds);
GradientProperty.ValueChanged += (sender, args) => CreateShader(_shaderBounds);
GradientProperty.Value.PropertyChanged += (sender, args) => CreateShader(_shaderBounds);
if (!GradientProperty.Value.Colors.Any())
{
for (var i = 0; i < 9; i++)
@ -72,13 +72,19 @@ namespace Artemis.Plugins.LayerBrushes.Color
shader = SKShader.CreateColor(_color);
break;
case GradientType.LinearGradient:
shader = SKShader.CreateLinearGradient(new SKPoint(0, 0), new SKPoint(pathBounds.Width, 0), GradientProperty.Value.GetColorsArray(), SKShaderTileMode.Repeat);
shader = SKShader.CreateLinearGradient(new SKPoint(0, 0), new SKPoint(pathBounds.Width, 0),
GradientProperty.Value.GetColorsArray(),
GradientProperty.Value.GetColorPositionsArray(), SKShaderTileMode.Repeat);
break;
case GradientType.RadialGradient:
shader = SKShader.CreateRadialGradient(center, Math.Min(pathBounds.Width, pathBounds.Height), GradientProperty.Value.GetColorsArray(), SKShaderTileMode.Repeat);
shader = SKShader.CreateRadialGradient(center, Math.Min(pathBounds.Width, pathBounds.Height),
GradientProperty.Value.GetColorsArray(),
GradientProperty.Value.GetColorPositionsArray(), SKShaderTileMode.Repeat);
break;
case GradientType.SweepGradient:
shader = SKShader.CreateSweepGradient(center, GradientProperty.Value.GetColorsArray(), null, SKShaderTileMode.Clamp, 0, 360);
shader = SKShader.CreateSweepGradient(center,
GradientProperty.Value.GetColorsArray(),
GradientProperty.Value.GetColorPositionsArray(), SKShaderTileMode.Clamp, 0, 360);
break;
default:
throw new ArgumentOutOfRangeException();