working in AuraColorPicker.cs

themucha · Nov 6, 2021 · dd2ecc2 · dd2ecc2
1 parent 915efa3
commit dd2ecc2
Show file tree

Hide file tree

Showing 12 changed files with 226 additions and 53 deletions.
diff --git a/samples/MiniSample/Views/MainWindow.axaml b/samples/MiniSample/Views/MainWindow.axaml
@@ -13,7 +13,7 @@
   </Design.DataContext>
 
   <StackPanel Margin="20">
-    <AuraColorPicker Name="cp" Width="200" Height="200" StrokeWidth="10"/>
+    <AuraColorPicker SelectedColor="Red" Name="cp" Width="300" Height="300" StrokeWidth="20"/>
     <TextBlock Height="50" Foreground="Black" Text="{Binding #cp.SelectedColor}"/>
   </StackPanel>
 </Window>
diff --git a/src/Aura.UI.FluentTheme/AuraUI.xaml b/src/Aura.UI.FluentTheme/AuraUI.xaml
@@ -34,4 +34,5 @@
   <StyleInclude Source="/Controls/HueColorSelector.axaml"/>
   <StyleInclude Source="/Controls/SaturationValueColorSelector.axaml"/>
   <StyleInclude Source="/Controls/AuraColorPicker.axaml"/>
+  <StyleInclude Source="/Controls/HSVViewer.axaml"/>
 </Styles>  
diff --git a/src/Aura.UI.FluentTheme/Controls/AuraColorPicker.axaml b/src/Aura.UI.FluentTheme/Controls/AuraColorPicker.axaml
@@ -6,44 +6,46 @@
             <AuraColorPicker Width="300" Height="300" StrokeWidth="10"/>
         </Border>
     </Design.PreviewWith>
-
-  <Styles.Resources>
-    <conv:HSVToColorConverter x:Key="hsv"/>
-  </Styles.Resources>
 
   <Style Selector="AuraColorPicker">
     <Setter Property="Template">
       <ControlTemplate>
         <Grid RowDefinitions="*,60">
-          <HueColorSelector Name="PART_Hue" Maximum="360" StrokeWidth="{Binding $parent[AuraColorPicker].StrokeWidth}"/>
+          <HueColorSelector Name="PART_Hue"
+                            Maximum="360"
+                            StrokeWidth="{Binding $parent[AuraColorPicker].StrokeWidth}">
+            <HueColorSelector.ThumbTemplate>
+              <ControlTemplate>
+                <Ellipse Stroke="Black" StrokeThickness="1">
+                  <Ellipse.Fill>
+                    <SolidColorBrush Color="{Binding #PART_Hue.RawColor}"/>
+                  </Ellipse.Fill>
+                </Ellipse>
+              </ControlTemplate>
+            </HueColorSelector.ThumbTemplate>
+          </HueColorSelector>
           <SaturationValueColorSelector 
             Name="PART_SV"
+            ColorToShow="{Binding #PART_Hue.RawColor}"
             StrokeWidth="{Binding $parent[AuraColorPicker].StrokeWidth}">
+            <SaturationValueColorSelector.ThumbTemplate>
+              <ControlTemplate>
+                <Ellipse Stroke="Black" StrokeThickness="1">
+                  <Ellipse.Fill>
+                    <SolidColorBrush Color="{Binding #PART_HSV.SelectedColor}"/>
+                  </Ellipse.Fill>
+                </Ellipse>
+              </ControlTemplate>
+            </SaturationValueColorSelector.ThumbTemplate>
             <SaturationValueColorSelector.RenderTransform>
               <RotateTransform Angle="{Binding #PART_Hue.Value}"/>
             </SaturationValueColorSelector.RenderTransform>
           </SaturationValueColorSelector>
-          <!--<Border Grid.Row="1">
-            <Border.Background>
-              <SolidColorBrush>
-                <SolidColorBrush.Color>
-                  <MultiBinding Converter="{StaticResource hsv}">
-                    <Binding Path="Hue" ElementName="PART_Hue"/>
-                    <Binding Path="Saturation" ElementName="PART_SV"/>
-                    <Binding Path="Value" ElementName="PART_SV"/>
-                  </MultiBinding>
-                </SolidColorBrush.Color>
-              </SolidColorBrush>
-            </Border.Background>
-          </Border>-->
-          <Grid Grid.Row="1" ColumnDefinitions="100,auto" RowDefinitions="auto,auto,auto">
-            <TextBlock Grid.Column="0" Grid.Row="0" Text="Hue"/>
-            <TextBlock Grid.Column="0" Grid.Row="1" Text="Saturation"/>
-            <TextBlock Grid.Column="0" Grid.Row="2" Text="Value"/>
-            <TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding #PART_Hue.Value}"/>
-            <TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding #PART_SV.Saturation}"/>
-            <TextBlock Grid.Column="1" Grid.Row="2" Text="{Binding #PART_SV.Value}"/>
-          </Grid>
+
+          <HSVViewer Grid.Row="1" Name="PART_HSV" 
+                     Hue="{Binding #PART_Hue.Value}"
+                     Saturation="{Binding #PART_SV.Saturation}"
+                     Value="{Binding #PART_SV.Value}"/>
         </Grid>
       </ControlTemplate>
     </Setter> 

diff --git a/src/Aura.UI.FluentTheme/Controls/HSVViewer.axaml b/src/Aura.UI.FluentTheme/Controls/HSVViewer.axaml
@@ -0,0 +1,20 @@
+<Styles xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <Design.PreviewWith>
+    <Border Padding="20">
+      <HSVViewer Width="100" Height="100" Hue="360" Saturation="0.7" Value="0.5"/>
+    </Border>
+  </Design.PreviewWith>
+
+  <Style Selector="HSVViewer">
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Border>
+          <Border.Background>
+            <SolidColorBrush Color="{Binding $parent[HSVViewer].SelectedColor}"/>
+          </Border.Background>
+        </Border>
+      </ControlTemplate>
+    </Setter>
+  </Style>
+</Styles>
diff --git a/src/Aura.UI.FluentTheme/Controls/HueColorSelector.axaml b/src/Aura.UI.FluentTheme/Controls/HueColorSelector.axaml
@@ -12,10 +12,11 @@
         <Grid>
           <ColorWheel StrokeWidth="{TemplateBinding StrokeWidth}"/>
           <ContentControl Width="{TemplateBinding StrokeWidth}">
-            <Ellipse
+            <TemplatedControl
               Width="{TemplateBinding StrokeWidth}"
-              Height="{TemplateBinding StrokeWidth}" 
-              Fill="White" VerticalAlignment="Top"/>
+              Height="{TemplateBinding StrokeWidth}"
+              VerticalAlignment="Top"
+              Template="{TemplateBinding ThumbTemplate}"/>
             <ContentControl.RenderTransform>
               <RotateTransform Angle="{Binding $parent[HueColorSelector].YAngle}"/>
             </ContentControl.RenderTransform>

diff --git a/src/Aura.UI.FluentTheme/Controls/SaturationValueColorSelector.axaml b/src/Aura.UI.FluentTheme/Controls/SaturationValueColorSelector.axaml
@@ -14,25 +14,26 @@
     </Border>
   </Design.PreviewWith>
 
-  <Styles.Resources>
-    <conv:SideByWidthConverter x:Key="heightConverter"/>
-  </Styles.Resources>  
   <Style Selector="SaturationValueColorSelector">
     <!--<Setter Property="Height" Value="{Binding $parent[SaturationValueColorSelector].Width, Converter={StaticResource heightConverter}}"/>-->
     <Setter Property="Template">
       <ControlTemplate>
         <Grid>
           <TriangleColorWheel Color="{TemplateBinding ColorToShow}" StrokeWidth="{TemplateBinding StrokeWidth}"/>
-          <Ellipse Width="10" Height="10" Fill="SkyBlue" VerticalAlignment="Top" HorizontalAlignment="Left">
-            <Ellipse.RenderTransform>
+          <TemplatedControl Width="10" 
+                            Height="10" 
+                            VerticalAlignment="Top" 
+                            HorizontalAlignment="Left"
+                            Template="{TemplateBinding ThumbTemplate}">
+            <TemplatedControl.RenderTransform>
               <TransformGroup>
                 <TranslateTransform 
                   X="{Binding $parent[SaturationValueColorSelector].XPosition}"
                   Y="{Binding $parent[SaturationValueColorSelector].YPosition}"/>
                 <TranslateTransform X="-5" Y="-5"/>
               </TransformGroup>
-            </Ellipse.RenderTransform>
-          </Ellipse>
+            </TemplatedControl.RenderTransform>
+          </TemplatedControl>
         </Grid>
       </ControlTemplate>
     </Setter>

diff --git a/src/Aura.UI/Controls/Painting/AuraColorPicker.cs b/src/Aura.UI/Controls/Painting/AuraColorPicker.cs
@@ -1,4 +1,5 @@
-using Avalonia;
+using Aura.UI.Extensions;
+using Avalonia;
 using Avalonia.Controls.Primitives;
 using Avalonia.Media;
 using System;
@@ -9,6 +10,27 @@ namespace Aura.UI.Controls.Painting
 {
     public class AuraColorPicker : TemplatedControl
     {
+        HueColorSelector hueSelector;
+        SaturationValueColorSelector satValueSelector;
+
+        protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
+        {
+            base.OnApplyTemplate(e);
+
+            this.GetControl(e, "PART_Hue", out hueSelector);
+            this.GetControl(e, "PART_SV", out satValueSelector);
+
+            this.GetObservable(SelectedColorProperty).Subscribe(x =>
+            {
+                var hsv = x.ToHSV();
+
+                hueSelector.Value = hsv.H;
+                satValueSelector.Saturation = hsv.S;
+                satValueSelector.Value = hsv.V;
+                satValueSelector.UpdatePositionsFromValues(double.NaN);
+            });
+        }
+
         private Color _SelectedColor;
         public Color SelectedColor
         {
@@ -19,8 +41,6 @@ public Color SelectedColor
         public static readonly DirectProperty<AuraColorPicker, Color> SelectedColorProperty =
             AvaloniaProperty.RegisterDirect<AuraColorPicker, Color>(nameof(SelectedColor), o => o.SelectedColor, (o, v) => o.SelectedColor = v);
 
-
-
         public double StrokeWidth
         {
             get => GetValue(StrokeWidthProperty);

diff --git a/src/Aura.UI/Controls/Painting/HSVViewer.cs b/src/Aura.UI/Controls/Painting/HSVViewer.cs
@@ -0,0 +1,70 @@
+using Avalonia;
+using Avalonia.Controls.Primitives;
+using Avalonia.Media;
+using System;
+using System.Collections.Generic;
+using System.Text;
+using System.Threading.Tasks;
+using Aura.UI.Extensions;
+
+namespace Aura.UI.Controls.Painting
+{
+    public class HSVViewer : TemplatedControl
+    {
+        public HSVViewer()
+        {
+            this.GetObservable(HueProperty).Subscribe(UpdateColor);
+            this.GetObservable(ValueProperty).Subscribe(UpdateColor);
+            this.GetObservable(SaturationProperty).Subscribe(UpdateColor);
+        }
+
+        private void UpdateColor(double @object)
+        {
+            SelectedColor = new HSV(Hue, Saturation, Value).ToColor(); 
+            //await Task.Run(() =>
+            //{
+            //    
+            //});
+        }
+
+        public double Hue
+        {
+            get => GetValue(HueProperty);
+            set => SetValue(HueProperty, value);
+        }
+
+        public static readonly StyledProperty<double> HueProperty =
+            AvaloniaProperty.Register<HSVViewer, double>(nameof(Hue),0);
+
+        public double Saturation
+        {
+            get => GetValue(SaturationProperty);
+            set => SetValue(SaturationProperty, value);
+        }
+
+        public static readonly StyledProperty<double> SaturationProperty =
+            AvaloniaProperty.Register<HSVViewer, double>(nameof(Saturation),0);
+
+        public double Value
+        {
+            get => GetValue(ValueProperty);
+            set => SetValue(ValueProperty, value);
+        }
+
+        public static readonly StyledProperty<double> ValueProperty =
+            AvaloniaProperty.Register<HSVViewer, double>(nameof(Value),1);
+
+
+        private Color _SelectedColor;
+        public Color SelectedColor
+        {
+            get => _SelectedColor;
+            set => SetAndRaise(SelectedColorProperty, ref _SelectedColor, value);
+        }
+
+        public static readonly DirectProperty<HSVViewer, Color> SelectedColorProperty =
+            AvaloniaProperty.RegisterDirect<HSVViewer, Color>(nameof(SelectedColor), o => o.SelectedColor, (o, v) => o.SelectedColor = v);
+
+
+    }
+}
diff --git a/src/Aura.UI/Controls/Painting/HueColorSelector.cs b/src/Aura.UI/Controls/Painting/HueColorSelector.cs
@@ -4,6 +4,7 @@
 using Avalonia.Controls;
 using Avalonia.Controls.Presenters;
 using Avalonia.Input;
+using Avalonia.Markup.Xaml.Templates;
 using Avalonia.Media;
 using System;
 using System.Collections.Generic;
@@ -20,5 +21,35 @@ static HueColorSelector()
             MinimumProperty.OverrideMetadata<HueColorSelector>(new DirectPropertyMetadata<double>(0));
             ValueProperty.OverrideMetadata<HueColorSelector>(new DirectPropertyMetadata<double>(0));
         }
+
+        public HueColorSelector()
+        {
+            this.GetObservable(ValueProperty).Subscribe((d) =>
+            {
+                RawColor = new HSV(Value, 1,1).ToColor();
+            });
+        }
+
+        public ControlTemplate ThumbTemplate
+        {
+            get => GetValue(ThumbTemplateProperty);
+            set => SetValue(ThumbTemplateProperty, value);
+        }
+
+        public static readonly StyledProperty<ControlTemplate> ThumbTemplateProperty =
+            AvaloniaProperty.Register<HueColorSelector, ControlTemplate>(nameof(ThumbTemplate));
+
+
+        private Color _RawColor;
+        public Color RawColor
+        {
+            get => _RawColor;
+            private set => SetAndRaise(RawColorProperty, ref _RawColor, value);
+        }
+
+        public static readonly DirectProperty<HueColorSelector, Color> RawColorProperty =
+            AvaloniaProperty.RegisterDirect<HueColorSelector, Color>(nameof(RawColor), o => o.RawColor);
+
+
     }
 }
diff --git a/src/Aura.UI/Controls/Painting/SaturationValueColorSelector.cs b/src/Aura.UI/Controls/Painting/SaturationValueColorSelector.cs
@@ -11,6 +11,8 @@
 using System.Text;
 using Avalonia.Media;
 using Aura.UI.Controls.Painting;
+using Avalonia.Markup.Xaml.Templates;
+using System.Diagnostics;
 
 namespace Aura.UI.Controls.Painting
 {
@@ -66,21 +68,25 @@ protected virtual void UpdateValuesFromPoint(Point point)
 
             if (Maths.TriangleContains(a, b, c, point))
             {
-                var valueDistance = b.DistanceWith(point);
-                var saturationDistance = c.DistanceWith(point);
+                var valueDistance = c.DistanceWith(point);
+                var saturationDistance = b.DistanceWith(point);
                 var totalDistance = b.DistanceWith(c);
 
-                Value = valueDistance / totalDistance / 100;
-                Saturation =saturationDistance / totalDistance / 100;
+                Value = valueDistance / totalDistance;
+                Saturation = saturationDistance / totalDistance;
             }
         }
         protected virtual void UpdatePositionsFromPoint(Point point) => UpdatePositionsCore(point.X, point.Y);
 
-        protected virtual void UpdatePositionsFromValues(double @object)
+        protected internal virtual void UpdatePositionsFromValues(double @object)
         {
-            var totalDistance = Bounds.Width;
+            var totalDistance = a.DistanceWith(c);
 
-            UpdatePositionsCore(totalDistance * Value, totalDistance * Saturation);
+            var x = totalDistance * Saturation;
+            var y = totalDistance * Value;
+            Debug.WriteLine($"x : {x}");
+            Debug.WriteLine($"y : {y}");
+            UpdatePositionsCore(x, y);
         }
 
         private void UpdatePositionsCore(double x, double y)
@@ -150,5 +156,14 @@ public double StrokeWidth
 
         public static readonly StyledProperty<double> StrokeWidthProperty =
             AuraColorPicker.StrokeWidthProperty.AddOwner<SaturationValueColorSelector>();
+
+        public ControlTemplate ThumbTemplate
+        {
+            get => GetValue(ThumbTemplateProperty);
+            set => SetValue(ThumbTemplateProperty, value);
+        }
+
+        public static readonly StyledProperty<ControlTemplate> ThumbTemplateProperty =
+            AvaloniaProperty.Register<SaturationValueColorSelector, ControlTemplate>(nameof(ThumbTemplate));
     }
 }
diff --git a/src/Aura.UI/Rendering/SKMaths.cs b/src/Aura.UI/Rendering/SKMaths.cs
@@ -42,5 +42,13 @@ public static bool TriangleContains(SKPoint a, SKPoint b, SKPoint c, SKPoint poi
             else
                 return false;
         }
+
+        public static float DistanceBetweenTwoPoints(SKPoint p1, SKPoint p2) => DistanceBetweenTwoPoints(p1.X, p2.X, p1.Y, p2.Y);
+
+        public static float DistanceBetweenTwoPoints(float x1, float x2, float y1, float y2)
+        {
+            return ((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
+        }
+
     }
 }