feat: add color picker with palette component

Dalamud/Interface/Components/ComponentDemoWindow.cs

@@ -2,6 +2,7 @@ using System;
 using System.Collections.Generic;
 using System.Numerics;
 
+using Dalamud.Interface.Colors;
 using Dalamud.Interface.Windowing;
 using ImGuiNET;
 
@@ -13,6 +14,7 @@ namespace Dalamud.Interface.Components
     internal class ComponentDemoWindow : Window
     {
         private readonly List<KeyValuePair<string, Action>> componentDemos;
+        private Vector4 defaultColor = ImGuiColors.DalamudOrange;
 
         /// <summary>
         /// Initializes a new instance of the <see cref="ComponentDemoWindow"/> class.
@@ -28,6 +30,7 @@ namespace Dalamud.Interface.Components
                 Demo("HelpMarker", HelpMarkerDemo),
                 Demo("IconButton", IconButtonDemo),
                 Demo("TextWithLabel", TextWithLabelDemo),
+                Demo("ColorPickerWithPalette", this.ColorPickerWithPaletteDemo),
             };
         }
 
@@ -82,5 +85,12 @@ namespace Dalamud.Interface.Components
         {
             return new KeyValuePair<string, Action>(name, func);
         }
+
+        private void ColorPickerWithPaletteDemo()
+        {
+            ImGui.Text("Click on the color button to use the picker.");
+            ImGui.SameLine();
+            this.defaultColor = ImGuiComponents.ColorPickerWithPalette(1, "ColorPickerWithPalette Demo", this.defaultColor);
+        }
     }
 }

Dalamud/Interface/Components/ImGuiComponents.ColorPickerWithPalette.cs

@@ -0,0 +1,70 @@
+using System.Numerics;
+
+using ImGuiNET;
+
+namespace Dalamud.Interface.Components
+{
+    /// <summary>
+    /// Class containing various methods providing ImGui components.
+    /// </summary>
+    public static partial class ImGuiComponents
+    {
+        /// <summary>
+        /// ColorPicker with palette.
+        /// </summary>
+        /// <param name="id">Id for the color picker.</param>
+        /// <param name="description">The description of the color picker.</param>
+        /// <param name="originalColor">The current color.</param>
+        /// <returns>Selected color.</returns>
+        public static Vector4 ColorPickerWithPalette(int id, string description, Vector4 originalColor)
+        {
+            const ImGuiColorEditFlags flags = ImGuiColorEditFlags.NoSidePreview | ImGuiColorEditFlags.NoSmallPreview;
+            return ColorPickerWithPalette(id, description, originalColor, flags);
+        }
+
+        /// <summary>
+        /// ColorPicker with palette with color picker options.
+        /// </summary>
+        /// <param name="id">Id for the color picker.</param>
+        /// <param name="description">The description of the color picker.</param>
+        /// <param name="originalColor">The current color.</param>
+        /// <param name="flags">Flags to customize color picker.</param>
+        /// <returns>Selected color.</returns>
+        public static Vector4 ColorPickerWithPalette(int id, string description, Vector4 originalColor, ImGuiColorEditFlags flags)
+        {
+            var existingColor = originalColor;
+            var selectedColor = originalColor;
+            var colorPalette = ImGuiHelpers.DefaultColorPalette(36);
+            if (ImGui.ColorButton($"{description}###ColorPickerButton{id}", originalColor))
+            {
+                ImGui.OpenPopup($"###ColorPickerPopup{id}");
+            }
+
+            if (ImGui.BeginPopup($"###ColorPickerPopup{id}"))
+            {
+                if (ImGui.ColorPicker4($"###ColorPicker{id}", ref existingColor, flags))
+                {
+                    selectedColor = existingColor;
+                }
+
+                for (var i = 0; i < 4; i++)
+                {
+                    ImGui.Spacing();
+                    for (var j = i * 9; j < (i * 9) + 9; j++)
+                    {
+                        if (ImGui.ColorButton($"###ColorPickerSwatch{id}{i}{j}", colorPalette[j]))
+                        {
+                            selectedColor = colorPalette[j];
+                        }
+
+                        ImGui.SameLine();
+                    }
+                }
+
+                ImGui.EndPopup();
+            }
+
+            return selectedColor;
+        }
+    }
+}

Dalamud/Interface/ImGuiHelpers.cs

@@ -1,3 +1,4 @@
+using System.Collections.Generic;
 using System.Numerics;
 using ImGuiNET;
 
@@ -57,6 +58,23 @@ namespace Dalamud.Interface
             string name, Vector2 position, ImGuiCond condition = ImGuiCond.None)
             => ImGui.SetWindowPos(position + MainViewport.Pos, condition);
 
+        /// <summary>
+        /// Creates default color palette for use with color pickers.
+        /// </summary>
+        /// <param name="swatchCount">The total number of swatches to use.</param>
+        /// <returns>Default color palette.</returns>
+        public static List<Vector4> DefaultColorPalette(int swatchCount = 32)
+        {
+            var colorPalette = new List<Vector4>();
+            for (var i = 0; i < swatchCount; i++)
+            {
+                ImGui.ColorConvertHSVtoRGB(i / 31.0f, 0.7f, 0.8f, out var r, out var g, out var b);
+                colorPalette.Add(new Vector4(r, g, b, 1.0f));
+            }
+
+            return colorPalette;
+        }
+
         /// <summary>
         /// Get data needed for each new frame.
         /// </summary>