Show color as a float and as a decimal value (#14548)

* #14020 and #12630 - Show color as a float and as a decimal value

* getting stuff up-to-par

* changing RGB Float to VEC4

* Getting Decimal to display correct.

* tweaking VEC4 output.  What would be better is if these actually pulled from a real output ...

* Shifting to force decimal

Co-authored-by: Clint Rutkas <crutkas@microsoft.com>

src/modules/colorPicker/ColorPickerUI/Helpers/ColorHelper.cs

@@ -44,6 +44,14 @@ namespace ColorPicker.Helpers
             return (cyan, magenta, yellow, blackKey);
         }
 
+        /// <summary>
+        /// Convert a given <see cref="Color"/> to a float color styling(0.1f, 0.1f, 0.1f)
+        /// </summary>
+        /// <param name="color">The <see cref="Color"/> to convert</param>
+        /// <returns>The int / 255d for each value to get value between 0 and 1</returns>
+        internal static (double red, double green, double blue) ConvertToDouble(Color color)
+            => (color.R / 255d, color.G / 255d, color.B / 255d);
+
         /// <summary>
         /// Convert a given <see cref="Color"/> to a HSB color (hue, saturation, brightness)
         /// </summary>

src/modules/colorPicker/ColorPickerUI/Helpers/ColorRepresentationHelper.cs

@@ -46,6 +46,8 @@ namespace ColorPicker.Helpers
                 ColorRepresentationType.RGB => ColorToRGB(color),
                 ColorRepresentationType.CIELAB => ColorToCIELAB(color),
                 ColorRepresentationType.CIEXYZ => ColorToCIEXYZ(color),
+                ColorRepresentationType.VEC4 => ColorToFloat(color),
+                ColorRepresentationType.DecimalValue => ColorToDecimal(color),
 
                 // Fall-back value, when "_userSettings.CopiedColorRepresentation.Value" is incorrect
                 _ => ColorToHex(color),
@@ -99,6 +101,29 @@ namespace ColorPicker.Helpers
                  + $", {brightness.ToString(CultureInfo.InvariantCulture)}%)";
         }
 
+        /// <summary>
+        /// Return a <see cref="string"/> representation float color styling(0.1f, 0.1f, 0.1f)
+        /// </summary>
+        /// <param name="color">The <see cref="Color"/> to convert</param>
+        /// <returns>a string value (0.1f, 0.1f, 0.1f)</returns>
+        private static string ColorToFloat(Color color)
+        {
+            var (red, green, blue) = ColorHelper.ConvertToDouble(color);
+            var precision = 2;
+
+            return $"({Math.Round(red, precision).ToString("0.##", CultureInfo.InvariantCulture)}f, {Math.Round(green, precision).ToString("0.##", CultureInfo.InvariantCulture)}f, {Math.Round(blue, precision).ToString("0.##", CultureInfo.InvariantCulture)}f, 1f)";
+        }
+
+        /// <summary>
+        /// Return a <see cref="string"/> representation decimal color value
+        /// </summary>
+        /// <param name="color">The <see cref="Color"/> to convert</param>
+        /// <returns>a string value number</returns>
+        private static string ColorToDecimal(Color color)
+        {
+            return $"{color.R + (color.G * 256) + (color.B * 65536)}";
+        }
+
         /// <summary>
         /// Return a <see cref="string"/> representation of a HSI color
         /// </summary>

src/modules/colorPicker/ColorPickerUI/ViewModels/ColorEditorViewModel.cs

@@ -216,6 +216,18 @@ namespace ColorPicker.ViewModels
                     FormatName = ColorRepresentationType.CIEXYZ.ToString(),
                     Convert = (Color color) => { return ColorRepresentationHelper.GetStringRepresentationFromMediaColor(color, ColorRepresentationType.CIEXYZ); },
                 });
+            _allColorRepresentations.Add(
+                new ColorFormatModel()
+                {
+                    FormatName = ColorRepresentationType.VEC4.ToString(),
+                    Convert = (Color color) => { return ColorRepresentationHelper.GetStringRepresentationFromMediaColor(color, ColorRepresentationType.VEC4); },
+                });
+            _allColorRepresentations.Add(
+                new ColorFormatModel()
+                {
+                    FormatName = "Decimal",
+                    Convert = (Color color) => { return ColorRepresentationHelper.GetStringRepresentationFromMediaColor(color, ColorRepresentationType.DecimalValue); },
+                });
 
             _userSettings.VisibleColorFormats.CollectionChanged += VisibleColorFormats_CollectionChanged;
 

src/modules/colorPicker/UnitTest-ColorPickerUI/Helpers/ColorRepresentationHelperTest.cs

@@ -24,6 +24,8 @@ namespace Microsoft.ColorPicker.UnitTests
         [DataRow(ColorRepresentationType.RGB, "rgb(0, 0, 0)")]
         [DataRow(ColorRepresentationType.CIELAB, "CIELab(0, 0, 0)")]
         [DataRow(ColorRepresentationType.CIEXYZ, "xyz(0, 0, 0)")]
+        [DataRow(ColorRepresentationType.VEC4, "(0f, 0f, 0f, 1f)")]
+        [DataRow(ColorRepresentationType.DecimalValue, "0")]
 
         public void GetStringRepresentationTest(ColorRepresentationType type, string expected)
         {