Fix the color picker and the swatches

PixiEditor · Sep 1, 2021 · daec773 · daec773
1 parent 73dfc8a
commit daec773
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 31 deletions.
diff --git a/PixiEditor/Helpers/Converters/SKColorToMediaColorConverter.cs b/PixiEditor/Helpers/Converters/SKColorToMediaColorConverter.cs
@@ -0,0 +1,23 @@
+using SkiaSharp;
+using System;
+using System.Globalization;
+using System.Windows.Data;
+using System.Windows.Media;
+
+namespace PixiEditor.Helpers.Converters
+{
+    class SKColorToMediaColorConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            var skcolor = (SKColor)value;
+            return Color.FromArgb(skcolor.Alpha, skcolor.Red, skcolor.Green, skcolor.Blue);
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            var color = (Color)value;
+            return new SKColor(color.R, color.G, color.B, color.A);
+        }
+    }
+}
diff --git a/PixiEditor/Views/MainWindow.xaml b/PixiEditor/Views/MainWindow.xaml
@@ -30,6 +30,7 @@
             <converters:DoubleToIntConverter x:Key="DoubleToIntConverter"/>
             <converters:IsSpecifiedTypeConverter SpecifiedType="{x:Type tools:ZoomTool}" x:Key="IsZoomToolConverter"/>
             <converters:IsSpecifiedTypeConverter SpecifiedType="{x:Type tools:MoveViewportTool}" x:Key="IsMoveViewportToolConverter"/>
+            <converters:SKColorToMediaColorConverter x:Key="SKColorToMediaColorConverter"/>
             <ResourceDictionary.MergedDictionaries>
                 <ResourceDictionary Source="pack://application:,,,/ColorPicker;component/Styles/DefaultColorPickerStyle.xaml" />
             </ResourceDictionary.MergedDictionaries>
@@ -301,8 +302,8 @@
                                     <LayoutAnchorable ContentId="colorPicker" Title="Color Picker" CanHide="False"
                                                              CanClose="False" CanAutoHide="False" x:Name="colorPickerPanel"
                                                              CanDockAsTabbedDocument="False" CanFloat="True">
-                                        <usercontrols:SmallColorPicker SelectedColor="{Binding ColorsSubViewModel.PrimaryColor, Mode=TwoWay}"
-                                                                         SecondaryColor="{Binding ColorsSubViewModel.SecondaryColor, Mode=TwoWay}" 
+                                        <usercontrols:SmallColorPicker SelectedColor="{Binding ColorsSubViewModel.PrimaryColor, Mode=TwoWay, Converter={StaticResource SKColorToMediaColorConverter}}"
+                                                                         SecondaryColor="{Binding ColorsSubViewModel.SecondaryColor, Mode=TwoWay, Converter={StaticResource SKColorToMediaColorConverter}}" 
                                                                          Style="{StaticResource DefaultColorPickerStyle}" x:Name="mainColorPicker">
                                             <i:Interaction.Behaviors>
                                                 <behaviours:GlobalShortcutFocusBehavior/>
@@ -354,7 +355,7 @@
                                                       CanDockAsTabbedDocument="False" CanFloat="True">
                                         <usercontrols:PreviewWindow 
                                             Document="{Binding BitmapManager.ActiveDocument}"
-                                            PrimaryColor="{Binding ColorsSubViewModel.PrimaryColor, Mode=TwoWay}"/>
+                                            PrimaryColor="{Binding ColorsSubViewModel.PrimaryColor, Mode=TwoWay, Converter={StaticResource SKColorToMediaColorConverter}}"/>
                                     </LayoutAnchorable>
                                 </LayoutAnchorablePane>
                             </LayoutAnchorablePaneGroup>
@@ -366,30 +367,30 @@
 
         <Border Grid.Row="2" Grid.Column="0"
                     Background="{StaticResource AccentColor}" Grid.RowSpan="2" CornerRadius="5,0,5,5">
-        <StackPanel Orientation="Vertical" Cursor="Arrow" >
+            <StackPanel Orientation="Vertical" Cursor="Arrow" >
 
-            <ItemsControl ItemsSource="{Binding ToolsSubViewModel.ToolSet}">
-                <ItemsControl.ItemTemplate>
-                    <DataTemplate>
-                        <Button BorderBrush="White"                                
+                <ItemsControl ItemsSource="{Binding ToolsSubViewModel.ToolSet}">
+                    <ItemsControl.ItemTemplate>
+                        <DataTemplate>
+                            <Button BorderBrush="White"                                
                                 BorderThickness="{Binding IsActive, Converter={StaticResource BoolToIntConverter}}"
                                 Style="{StaticResource ToolButtonStyle}"
                                 Command="{Binding Path=DataContext.ToolsSubViewModel.SelectToolCommand,
                             RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
                                 CommandParameter="{Binding}" ToolTip="{Binding Tooltip}">
-                            <Button.Background>
-                                <ImageBrush ImageSource="{Binding ImagePath}" Stretch="Uniform" />
-                            </Button.Background>
+                                <Button.Background>
+                                    <ImageBrush ImageSource="{Binding ImagePath}" Stretch="Uniform" />
+                                </Button.Background>
                                 <Button.Resources>
                                     <Style TargetType="Border">
                                         <Setter Property="CornerRadius" Value="2.5"/>
                                     </Style>
                                 </Button.Resources>
-                        </Button>
-                    </DataTemplate>
-                </ItemsControl.ItemTemplate>
-            </ItemsControl>
-        </StackPanel>
+                            </Button>
+                        </DataTemplate>
+                    </ItemsControl.ItemTemplate>
+                </ItemsControl>
+            </StackPanel>
         </Border>
 
         <Grid Grid.Row="3" Grid.Column="1">

diff --git a/PixiEditor/Views/UserControls/SwatchesView.xaml b/PixiEditor/Views/UserControls/SwatchesView.xaml
@@ -4,8 +4,14 @@
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
              xmlns:local="clr-namespace:PixiEditor.Views.UserControls" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
+             xmlns:conv="clr-namespace:PixiEditor.Helpers.Converters"
              mc:Ignorable="d" Name="uc"
              d:DesignHeight="450" d:DesignWidth="300">
+    <UserControl.Resources>
+        <ResourceDictionary>
+            <conv:SKColorToMediaColorConverter x:Key="SKColorToMediaColorConverter"/>
+        </ResourceDictionary>
+    </UserControl.Resources>
     <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
         <ItemsControl ItemsSource="{Binding Swatches, ElementName=uc}">
             <d:ItemsControl.ItemsSource>
@@ -30,18 +36,13 @@
                     <Grid Width="45" Height="45" Margin="0 5 5 5">
                         <Border CornerRadius="5.5" Width="44" Height="44">
                             <Border.Background>
-                                <ImageBrush ImageSource="../../Images/transparentbg.png"
-                                                                        Stretch="UniformToFill">
-                                    <ImageBrush.RelativeTransform>
-                                        <ScaleTransform ScaleX="6" ScaleY="6" CenterX="0.5"
-                                                                                    CenterY="0.5" />
-                                    </ImageBrush.RelativeTransform>
-                                </ImageBrush>
+                                <ImageBrush ImageSource="../../Images/CheckerTile.png"
+                                                                        Stretch="UniformToFill" />
                             </Border.Background>
                         </Border>
                         <Border CornerRadius="5.5" BorderThickness="0 0 0 0.1" BorderBrush="White" Cursor="Hand">
                             <Border.Background>
-                                <SolidColorBrush Color="{Binding}" />
+                                <SolidColorBrush Color="{Binding Converter={StaticResource SKColorToMediaColorConverter}}" />
                             </Border.Background>
                         </Border>
                         <i:Interaction.Triggers>

diff --git a/PixiEditor/Views/UserControls/SwatchesView.xaml.cs b/PixiEditor/Views/UserControls/SwatchesView.xaml.cs
@@ -1,8 +1,8 @@
-using System.Collections.ObjectModel;
+using SkiaSharp;
+using System.Collections.ObjectModel;
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Input;
-using System.Windows.Media;
 
 namespace PixiEditor.Views.UserControls
 {
@@ -12,11 +12,11 @@ namespace PixiEditor.Views.UserControls
     public partial class SwatchesView : UserControl
     {
         public static readonly DependencyProperty SwatchesProperty =
-            DependencyProperty.Register(nameof(Swatches), typeof(ObservableCollection<Color>), typeof(SwatchesView));
+            DependencyProperty.Register(nameof(Swatches), typeof(ObservableCollection<SKColor>), typeof(SwatchesView));
 
-        public ObservableCollection<Color> Swatches
+        public ObservableCollection<SKColor> Swatches
         {
-            get => (ObservableCollection<Color>)GetValue(SwatchesProperty);
+            get => (ObservableCollection<SKColor>)GetValue(SwatchesProperty);
             set => SetValue(SwatchesProperty, value);
         }
 

diff --git a/PixiEditor/Views/UserControls/ToolSettingColorPicker.xaml.cs b/PixiEditor/Views/UserControls/ToolSettingColorPicker.xaml.cs
@@ -1,6 +1,5 @@
 using PixiEditor.Helpers;
 using PixiEditor.ViewModels;
-using SkiaSharp;
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Media;
@@ -13,7 +12,7 @@ namespace PixiEditor.Views
     public partial class ToolSettingColorPicker : UserControl
     {
         public static readonly DependencyProperty SelectedColorProperty =
-            DependencyProperty.Register(nameof(SelectedColor), typeof(SKColor), typeof(ToolSettingColorPicker));
+            DependencyProperty.Register(nameof(SelectedColor), typeof(Color), typeof(ToolSettingColorPicker));
 
         public Color SelectedColor
         {