Color Picker For Color Controllers

common/src/main/java/dev/isxander/yacl3/platform/YACLConfig.java

@@ -0,0 +1,18 @@
+package dev.isxander.yacl3.platform;
+
+import dev.isxander.yacl3.config.v2.api.ConfigClassHandler;
+import dev.isxander.yacl3.config.v2.api.SerialEntry;
+import dev.isxander.yacl3.config.v2.api.serializer.GsonConfigSerializerBuilder;
+
+public class YACLConfig {
+    public static final ConfigClassHandler<YACLConfig> HANDLER = ConfigClassHandler.createBuilder(YACLConfig.class)
+            .id(YACLPlatform.rl("config"))
+            .serializer(config -> GsonConfigSerializerBuilder.create(config)
+                    .setPath(YACLPlatform.getConfigDir().resolve("yacl.json5"))
+                    .setJson5(true)
+                    .build())
+            .build();
+
+    @SerialEntry
+    public boolean showColorPickerIndicator = true;
+}

common/src/main/resources/assets/yet_another_config_lib/textures/gui/sprites/controller/colorpicker.png.mcmeta

@@ -0,0 +1,10 @@
+{
+  "gui": {
+    "scaling": {
+      "type": "nine_slice",
+      "width": 236,
+      "height": 34,
+      "border": 3
+    }
+  }
+}

common/src/main/resources/assets/yet_another_config_lib/textures/gui/sprites/controller/transparent.png.mcmeta

@@ -0,0 +1,10 @@
+{
+  "gui": {
+    "scaling": {
+      "type": "tile",
+      "width": 7,
+      "height": 7,
+      "border": 3
+    }
+  }
+}

src/main/java/dev/isxander/yacl3/gui/AbstractWidget.java

@@ -1,16 +1,19 @@
 package dev.isxander.yacl3.gui;
 
+import com.mojang.blaze3d.vertex.VertexConsumer;
 import dev.isxander.yacl3.api.utils.Dimension;
-import dev.isxander.yacl3.gui.utils.ButtonTextureRenderer;
+import dev.isxander.yacl3.gui.utils.YACLRenderHelper;
 import net.minecraft.client.Minecraft;
 import net.minecraft.client.gui.Font;
 import net.minecraft.client.gui.GuiGraphics;
 import net.minecraft.client.gui.components.Renderable;
 import net.minecraft.client.gui.components.events.GuiEventListener;
 import net.minecraft.client.gui.narration.NarratableEntry;
 import net.minecraft.client.gui.narration.NarrationElementOutput;
+import net.minecraft.client.renderer.RenderType;
 import net.minecraft.client.resources.sounds.SimpleSoundInstance;
 import net.minecraft.sounds.SoundEvents;
+import org.joml.Matrix4f;
 
 import java.awt.Color;
 
@@ -75,7 +78,7 @@ protected void drawButtonRect(GuiGraphics graphics, int x1, int y1, int x2, int
         int width = x2 - x1;
         int height = y2 - y1;
 
-        ButtonTextureRenderer.render(graphics, x1, y1, width, height, enabled, hovered);
+        YACLRenderHelper.renderButtonTexture(graphics, x1, y1, width, height, enabled, hovered);
     }
 
     protected void drawOutline(GuiGraphics graphics, int x1, int y1, int x2, int y2, int width, int color) {
@@ -85,6 +88,37 @@ protected void drawOutline(GuiGraphics graphics, int x1, int y1, int x2, int y2,
         graphics.fill(x1, y1, x1 + width, y2, color);
     }
 
+    protected void fillSidewaysGradient(GuiGraphics graphics, int x1, int y1, int x2, int y2, int startColor, int endColor) {
+        //Fills a gradient, left to right
+        //Uses practically the same method as the GuiGraphics class, but with the x/y moved
+        //Has a custom "z" value in case needed for later
+        VertexConsumer vertex = graphics.bufferSource().getBuffer(RenderType.gui());
+        Matrix4f matrix4f = graphics.pose().last().pose();
+        vertex.vertex(matrix4f, x1, y1, 0).color(startColor).endVertex();
+        vertex.vertex(matrix4f, x1, y2, 0).color(startColor).endVertex();
+        vertex.vertex(matrix4f, x2, y2, 0).color(endColor).endVertex();
+        vertex.vertex(matrix4f, x2, y1, 0).color(endColor).endVertex();
+    }
+
+
+    protected void drawRainbowGradient(GuiGraphics graphics, int x1, int y1, int x2, int y2) {
+        //Draws a rainbow gradient, left to right
+        int[] colors = new int[] {Color.red.getRGB(), Color.yellow.getRGB(), Color.green.getRGB(),
+        Color.cyan.getRGB(), Color.blue.getRGB(), Color.magenta.getRGB(), Color.red.getRGB()}; //all the colors in the gradient
+        int width = x2 - x1;
+        int maxColors = colors.length - 1;
+        for (int color = 0; color < maxColors; color++) {
+            //First checks if the final color is being rendered, if true -> uses x2 int instead of x1
+            //if false -> it adds the width divided by the max colors multiplied by the current color plus one to the x1 int
+            //the x2 int for the fillSidewaysGradient is the same formula, excluding the additional plus one.
+            //The gradient colors is determined by the color int and the color int plus one, which is why red is in the colors array twice
+            fillSidewaysGradient(graphics,
+                    x1 + (width / maxColors * color), y1,
+                    color == maxColors - 1 ? x2 : x1 + (width / maxColors * (color + 1)), y2,
+                    colors[color], colors[color + 1]);
+        }
+    }
+
     protected int multiplyColor(int hex, float amount) {
         Color color = new Color(hex, true);
 

src/main/java/dev/isxander/yacl3/gui/YACLScreen.java

@@ -7,19 +7,21 @@
 import dev.isxander.yacl3.api.utils.Dimension;
 import dev.isxander.yacl3.api.utils.MutableDimension;
 import dev.isxander.yacl3.api.utils.OptionUtils;
-import dev.isxander.yacl3.gui.tab.ScrollableNavigationBar;
+import dev.isxander.yacl3.gui.controllers.PopupControllerScreen;
+import dev.isxander.yacl3.gui.controllers.ControllerPopupWidget;
 import dev.isxander.yacl3.gui.tab.ListHolderWidget;
+import dev.isxander.yacl3.gui.tab.ScrollableNavigationBar;
 import dev.isxander.yacl3.gui.tab.TabExt;
 import dev.isxander.yacl3.gui.utils.GuiUtils;
 import dev.isxander.yacl3.impl.utils.YACLConstants;
 import net.minecraft.ChatFormatting;
+import net.minecraft.client.Minecraft;
 import net.minecraft.client.gui.Font;
 import net.minecraft.client.gui.GuiGraphics;
 import net.minecraft.client.gui.components.AbstractWidget;
 import net.minecraft.client.gui.components.Button;
 import net.minecraft.client.gui.components.MultiLineLabel;
 import net.minecraft.client.gui.components.Tooltip;
-import net.minecraft.client.gui.components.tabs.Tab;
 import net.minecraft.client.gui.components.tabs.TabManager;
 import net.minecraft.client.gui.components.tabs.TabNavigationBar;
 import net.minecraft.client.gui.navigation.ScreenRectangle;
@@ -34,7 +36,6 @@
 
 import java.util.HashSet;
 import java.util.Set;
-import java.util.concurrent.atomic.AtomicBoolean;
 import java.util.function.Consumer;
 
 public class YACLScreen extends Screen {
@@ -52,6 +53,9 @@ public class YACLScreen extends Screen {
 
     private boolean pendingChanges;
 
+    public ControllerPopupWidget<?> currentPopupController = null;
+    public boolean popupControllerVisible = false;
+
     public YACLScreen(YetAnotherConfigLib config, Screen parent) {
         super(config.title());
         this.config = config;
@@ -87,6 +91,33 @@ protected void init() {
         config.initConsumer().accept(this);
     }
 
+    public void addPopupControllerWidget(ControllerPopupWidget<?> controllerPopupWidget) {
+
+        //Safety check for the color picker
+        if (currentPopupController != null) {
+            clearPopupControllerWidget();
+        }
+
+        currentPopupController = controllerPopupWidget;
+        popupControllerVisible = true;
+
+        OptionListWidget optionListWidget = null;
+        if(this.tabNavigationBar.getTabManager().getCurrentTab() instanceof CategoryTab categoryTab) {
+            optionListWidget = categoryTab.optionList.getList();
+        }
+        if(optionListWidget != null) {
+            this.minecraft.setScreen(new PopupControllerScreen(this, controllerPopupWidget));
+        }
+    }
+
+    public void clearPopupControllerWidget() {
+        if(Minecraft.getInstance().screen instanceof PopupControllerScreen popupControllerScreen) {
+            popupControllerScreen.onClose();
+        }
+        popupControllerVisible = false;
+        currentPopupController = null;
+    }
+
     /*? if <=1.20.4 {*/
     @Override
     public void render(GuiGraphics graphics, int mouseX, int mouseY, float delta) {

src/main/java/dev/isxander/yacl3/gui/controllers/ColorController.java

@@ -8,6 +8,7 @@
 import dev.isxander.yacl3.gui.YACLScreen;
 import dev.isxander.yacl3.gui.controllers.string.IStringController;
 import dev.isxander.yacl3.gui.controllers.string.StringControllerElement;
+import dev.isxander.yacl3.platform.YACLConfig;
 import net.minecraft.ChatFormatting;
 import net.minecraft.client.gui.GuiGraphics;
 import net.minecraft.network.chat.Component;
@@ -101,10 +102,13 @@ public AbstractWidget provideWidget(YACLScreen screen, Dimension<Integer> widget
 
     public static class ColorControllerElement extends StringControllerElement {
         private final ColorController colorController;
+        private ColorPickerWidget colorPickerWidget;
 
         protected MutableDimension<Integer> colorPreviewDim;
-
         private final List<Character> allowedChars;
+        public boolean hoveredOverColorPreview = false;
+        private boolean colorPickerVisible = false;
+        private int previewOutlineFadeTicks = 0;
 
         public ColorControllerElement(ColorController control, YACLScreen screen, Dimension<Integer> dim) {
             super(control, screen, dim, true);
@@ -114,13 +118,18 @@ public ColorControllerElement(ColorController control, YACLScreen screen, Dimens
 
         @Override
         protected void drawValueText(GuiGraphics graphics, int mouseX, int mouseY, float delta) {
+            hovered = isMouseOver(mouseX, mouseY);
+
             if (isHovered()) {
-                colorPreviewDim.move(-inputFieldBounds.width() - 5, 0);
+                colorPreviewDim.move(-inputFieldBounds.width() - 8, -2);
+                colorPreviewDim.expand(4, 4);
+                previewOutlineFadeTicks++;
                 super.drawValueText(graphics, mouseX, mouseY, delta);
             }
 
             graphics.fill(colorPreviewDim.x(), colorPreviewDim.y(), colorPreviewDim.xLimit(), colorPreviewDim.yLimit(), colorController.option().pendingValue().getRGB());
-            drawOutline(graphics, colorPreviewDim.x(), colorPreviewDim.y(), colorPreviewDim.xLimit(), colorPreviewDim.yLimit(), 1, 0xFF000000);
+            Color outlineColor = getPreviewOutlineColor(hoveredOverColorPreview || isMouseOverColorPreview(mouseX, mouseY));
+            drawOutline(graphics, colorPreviewDim.x(), colorPreviewDim.y(), colorPreviewDim.xLimit(), colorPreviewDim.yLimit(), 1, outlineColor.getRGB());
         }
 
         @Override
@@ -193,6 +202,14 @@ public void setDimension(Dimension<Integer> dim) {
 
             int previewSize = (dim.height() - getYPadding() * 2) / 2;
             colorPreviewDim = Dimension.ofInt(dim.xLimit() - getXPadding() - previewSize, dim.centerY() - previewSize / 2, previewSize, previewSize);
+
+            if(colorPickerWidget != null) {
+                colorPickerWidget.setDimension(colorPickerWidget.getDimension().withY(this.getDimension().y()));
+                //checks if the color controller is being partially rendered offscreen
+                if(this.getDimension().y() < screen.tabArea.top() || this.getDimension().yLimit() > screen.tabArea.bottom()) {
+                    removeColorPicker();
+                }
+            }
         }
 
         @Override
@@ -210,11 +227,121 @@ public boolean keyPressed(int keyCode, int scanCode, int modifiers) {
         @Override
         public boolean mouseClicked(double mouseX, double mouseY, int button) {
             if (super.mouseClicked(mouseX, mouseY, button)) {
+                //Detects if the user has clicked the color preview
+                if(isMouseOverColorPreview(mouseX, mouseY)) {
+                        playDownSound();
+                        createOrRemoveColorPicker();
+                        if(YACLConfig.HANDLER.instance().showColorPickerIndicator) {
+                            YACLConfig.HANDLER.instance().showColorPickerIndicator = false;
+                            YACLConfig.HANDLER.save();
+                        }
+                }
                 caretPos = Math.max(1, caretPos);
                 setSelectionLength();
                 return true;
             }
+
             return false;
         }
+
+        public boolean isMouseOverColorPreview(double mouseX, double mouseY) {
+            return colorPreviewDim.isPointInside((int) mouseX, (int) mouseY);
+        }
+
+        public void createOrRemoveColorPicker() {
+            colorPickerVisible = !colorPickerVisible;
+            if(colorPickerVisible) {
+                colorPickerWidget = createColorPicker();
+                screen.addPopupControllerWidget(colorPickerWidget);
+            } else {
+                removeColorPicker();
+            }
+        }
+
+        @Override
+        public void unfocus() {
+            if(colorPickerVisible) {
+                removeColorPicker();
+            }
+            previewOutlineFadeTicks = 0;
+            super.unfocus();
+        }
+
+        public Color getPreviewOutlineColor(boolean colorPreviewHovered) {
+            Color outlineColor = new Color(0xFF000000);
+            Color highlightedColor = getHighlightedOutlineColor();
+
+            if(!hovered && !colorPreviewHovered) {
+                previewOutlineFadeTicks = 0;
+                return outlineColor;
+            }
+
+            int fadeInTicks = 80;
+            int fadeOutTicks = fadeInTicks + 120;
+
+            if(colorPreviewHovered) {
+                //white/light grey if the color preview is being hovered
+                previewOutlineFadeTicks = 0;
+                return highlightedColor;
+            } else if(YACLConfig.HANDLER.instance().showColorPickerIndicator) {
+                if(previewOutlineFadeTicks <= fadeInTicks) {
+                    //fade to white
+                    return getFadedColor(outlineColor, highlightedColor, previewOutlineFadeTicks, fadeInTicks);
+                } else if (previewOutlineFadeTicks <= fadeOutTicks) {
+                    //fade to black
+                    return getFadedColor(highlightedColor, outlineColor, previewOutlineFadeTicks - fadeInTicks, fadeOutTicks - fadeInTicks);
+                }
+
+                if(previewOutlineFadeTicks >= fadeInTicks + fadeOutTicks + 10) {
+                    //reset fade
+                    previewOutlineFadeTicks = 0;
+                }
+            }
+
+            return outlineColor;
+        }
+
+        private Color getFadedColor(Color original, Color fadeToColor, int fadeTick, int maxFadeTicks) {
+            int red = fadeToColor.getRed() - original.getRed();
+            int green = fadeToColor.getGreen() - original.getGreen();
+            int blue = fadeToColor.getBlue() - original.getBlue();
+            return new Color(
+                    original.getRed() + ((red * fadeTick) / maxFadeTicks),
+                    original.getGreen() + ((green * fadeTick) / maxFadeTicks),
+                    original.getBlue() + ((blue * fadeTick) / maxFadeTicks)
+            );
+        }
+
+        private Color getHighlightedOutlineColor() {
+            //Brightness detector in case a developer has their starting color bright
+            //Makes the outline indicating to a user that the mini color preview can be clicked a light grey rather than white
+            //For reference, there is about a 10 digit moving room in saturation and light
+            Color pendingValue = colorController.option().pendingValue();
+            float[] HSL = Color.RGBtoHSB(pendingValue.getRed(), pendingValue.getGreen(), pendingValue.getBlue(), null);
+            Color highlightedColor = new Color(0xFFFFFFFF);
+            if(HSL[1] < 0.1f && HSL[2] > 0.9f) {
+                highlightedColor = new Color(0xFFC6C6C6);
+            }
+            return highlightedColor;
+        }
+
+        public ColorPickerWidget colorPickerWidget() {
+            return colorPickerWidget;
+        }
+
+        public boolean colorPickerVisible() {
+            return colorPickerVisible;
+        }
+
+        public ColorPickerWidget createColorPicker() {
+            return new ColorPickerWidget(colorController, screen, getDimension(), this);
+        }
+
+        public void removeColorPicker() {
+            screen.clearPopupControllerWidget();
+            this.colorPickerVisible = false;
+            this.colorPickerWidget = null;
+            this.hoveredOverColorPreview = false; //set to false in favor of the manual checking here to be done
+        }
     }
 }