Color Picker For Color Controllers (#140)

* Initial work on color picker - gradient rendering

FEAT: Color picker rendering progress. The selected color, HSL, and RGB gradients all render
FEAT: Added new method for rendering a rainbow in the AbstractWidget class
FEAT: Added a new method for rendering a sideways gradient in the AbstractWidget class
TEST: Added mouse-only detection for enabling/disabling the color picker. It needs some work to allow for controller support(e.g. a button instead of the current mouseX/mouseY detection)
TEST: Started work on the RGB slider detection. Needs a lot of work, and probably needs to be moved as well
TEST: Added an extra color option in the "aaaaaaaaaaaa..." category
BUG: The color picker has some "z-fighting" issues with options behind it
BUG: The color picker needs to be in its own widget, not the way it is right now

Everything is still heavy WIP, I just needed a checkpoint/backup for my work thus far

* Official color picker element

REFACTOR: Moved almost all of the color picker code/rendering outside of the ColorControllerElement and into a new ColorPickerElement
REFACTOR: Renamed a few variables

* Slider x calculation

FEAT: Added a method which determines the slider's x pos based upon the pending value's hue
BUG: If the color is completely black or white, the slider automatically goes to the beginning, as if the color was completely red
BUG: The color picker "z-fighting" with the option behind it is still an issue

* Some "z-fighting" fixing

FIX: Fixed majority of the z-fighting with the color picker
BUG: The option behind the color picker still gets selected. For example, the string controller behind the color picker can be typed in after clicking the color picker

* Sound effect changes

FEAT: Made the down button sound only play when clicking the color preview, which enables the color picker
FIX: Fixed a bug where the down button sound would play upon clicking the color option(doesn't occur with other string related controllers)

* Back to work! - Some refactors I don't remember the point of

REFACTOR: I seemed to have refactored a few things. I did this a month ago, and don't remember anything. It probably doesn't matter, because I have plans for a huge refactor anyways in the near futre

* Beginning of the end (Huge improvements, technical challenge overcome)

FEAT: Began work on the hue slider's hue choosing mechanisms. It took slightly longer than I feel like it should've to figure this out, but I'm happy with its current implementation, and the ideas I have to improve it.
REFACTOR: Huge refactor on the color picker and how it is rendered. Firstly, the values are now almost not-hardcoded at all, being dynamic to the screen's gui size.
REFACTOR: Moved the whole color picker to its own class
REFACTOR: Removed the test color variable in the "aaaaaaaaa..." category
BUG: Color picker's x/xLimit seems to be flipped incorrectly
BUG: HUGE lag spike while choosing the value's hue(I'm unsure how I'm going to fix this)
TODO: Possible better implementation of the color picker as a whole to be clicked on not using the temporary workaround

This is more of a checkpoint for me than anything. I've spent multiple hours each night working on this, and losing this progress would be terrible.

* Bug fixes, some gradient refactoring, small commented out code cleanup

FIX: Apparently fixed the huge lag spike when changing the hue... sometimes. It seems to have something to do with hotswapping, which shouldn't affect anybody outside of dev. env.(will do more testing later)
FIX: Fixed the hue slider gradient being incorrectly displayed
REFACTOR: Updated the param. usage in gradient related methods. For some reason, I had them sorta pretty janky when being used. While the code for the actual methods seem more confusing, using said methods is now less confusing. Will probably come back to this later
REFACTOR: Deleted small bits of commented out code

* Mouse click checkpoint

WIP: Some code for the color picker clicking stuff. Hopefully to be improved soon, but this prototype actually fully works(just implemented in a way I'm not currently happy with)

* Mouse click checkpoint 2

REFACTOR: Cleaned up some of the prototype mouse click code
BUG: Dragging the color picker doesn't work

I'm saving this incase I want to revert later. I'm very confident there is a better way than this, however. Which is why I'm going to continue testing new ideas until I find something better.

* Color picker widget correct mouse clicking

FEAT: Made it so that the color picker element from a color controller gets added to the YACL Screen's children, which handles rendering and mouse click events
FIX: Finally, at last, fixed the color picker mouse clicking z-fighting
BUG: Changing the color from the color picker, then typing in the color controller crashes the game

This took many hours. I spent a long time trying to fix the color picker being removed crashing the game. I thought there were 5 different reasons for as to why it was crashing before finally finding out the true reason. A huge cleanup and possibly making the ColorPickerElement extend the AbstractWidget class instead of the StringElement class might be better.

* Mouse clicking cleanup

REFACTOR: Removed commented out code which previously handled the mouse clicking for the color picker
BUG: Attempting to scroll through the YACL screen while hovering over the color picker ceases all scrolling

* Even more cleanup

REFACTOR: Cleaned up the ColorPickerElement class, making it only have methods and variables it needs/will need
REFACTOR: Optmizied imports for ColorController class and updated some FIXMEs
REFACTOR: Removed old, unused test method in YACLScreen class

* Color picker - clicking does cool things now

FEAT: Made it so that clicking on the hue slider of the color picker will now result with the controller's hue changing
REFACTOR: Made it so that the hue slider thumb now properly moves only when it should
REFACTOR: Clicking on the saturation/light gradient no longer changes the hue(will have proper support for sat/light gradient soon)

* Initial work on color picker redesign

REFACTOR: Updated the background for the color picker, now looking like an inventory container background
TODO: I'm most likely going to touch up on most of the main rendering code, as it is a mess

* Color picker visual redesign

REFACTOR: Completely redesigned the color picker's looks, having an inventory container like background now.
REFACTOR: I think I increased the hue slider thumb's height by 2 pixels to adjust for the new redesign to stay satisfying
FIX: Fixed the colorPickerDim.y and colorPickerDim.yLimit being flipped(that was easier and harder than I thought it would be both at the same time)
FIX: Cleaned up a bunch of messy rendering code. Turns out, it worked, but wasn't as easy to change as I thought. Should be somewhat better now, I might come back and clean it up some more though

* Saturation/Light Picking + Bug fixes + Better mini preview outline

FEAT: Made it so that you can now choose the saturation and light values of a color! Holding down the mouse button allows you to leave the dedicated box for easier color picking. Doing the same with the hue slider doesn't affect the saturation/light picking either
REFACTOR: If a color is very bright, the mini color preview outline will change to a light grey upon hovering instead of plain white. This is to indicate to new users who may have a very bright color as an option that it can still be clicked on.
FIX: Fixed a bug where choosing a color that was too dark would result in the saturation being reset
FIX: Fixed a bug where having too dark of a color would mess up the hue slider
TEST: Tried making the background of the color picker a texture. I was unsuccessful this time, but I'm going to try again soon.

* Typing bug fix and temporary float color picker fix

FIX: Fixed a bug where typing in the color controller while the color picker is visible would result in the color picker desyncing
TEMPFIX: Added a temporary workaround to the color picker floating when the color controller wasn't visible anymore. A better fix will be added in the future. The current workaround probably isn't great for performance.

* Color picker texture background

FEAT: Color picker background texture
FEAT: Transparent square texture
REFACTOR: Made the background of the color picker use a texture instead of manual rendering
REFACTOR: Removed code for manual rendering of the color picker background, as it has been replaced
REFACTOR: Removed unused code from the YACLScreen which I didn't mean to commit in the first place
CHORE: Optimized imports for ColorController

* Some comments I guess?

FEAT: Added some comments a couple weeks ago.

I'm going to look into the popupscreen now.

* Popup Color Picker Screen

FEAT: Started work on testing the Color Picker as a popup screen

Oh, oh my! I've managed to solve more problems in 3 hours than I was able to in 3 weeks with the popup screen-like function!

* General improvements to the Popup Color Picker Screen

FIX: Fixed the color picker not always appearing on first click after closing
FIX: Fixed the color picker scrolling when it shouldn't be
FIX: Fixed the color picker's color controller's color preview's outline(goodness) not highlighting while the color picker was visible

* Color Picker Test category, beginning of alpha in color picker, move color picker if there isn't room above the controller, and another scrolling bug fix

TEST: Added a new Color Picker test category
FEAT: Made it so that if there isn't enough room for a color picker to be easily usable above a color controller, the color picker will appear beneath the color controller
FEAT: Started work on alpha-related stuff for the color picker
FIX: Fixed a bug where there were about 2 pixels worth of area where scrolling would result in the color picker "desyncing" from the color controller

* Finished Alpha slider

FEAT: Finished the alpha slider if the color picker's color controller has it enabled
FEAT: Added some extra color options to the test config to showcase other features of the color picker

* Cleanup and bug fixes

FIX: Fixed a bug where the "fillSidewaysGradient" method was just completely broken and made zero sense.
REFACTOR: Improved(hopefully) the "drawRainbowGradient" method's code
REFACTOR: Cleaned up some unused methods in the ColorPickerElement
REFACTOR: Changed the transparent texture's sizing to 7x7, so that is doesn't clip vertically (still clips a little bit horizontally)
REFACTOR: Removed some commented out code in some other classes from previous testing

* More cleanup

REFACTOR: Did some additional cleanup in the ColorController.java class to remove really old code that was added before hte ColorPickerElement class was moved outside the ColorController class

* Optimize imports

REFACTOR: Optimize imports

Forgot I told IntelliJ not to do that automatically, oops

* Color Picker Changes 1

FIX: Fixed a bug where you could type while the color picker was active without first clicking anywhere
REFACTOR: Removed unused accessWideners
REFACTOR: Changed the Color Picker Popup title to a translatable string
REFACTOR: Cleanup in ColorController.java, including using the protected screen variable and using the Dimension#isPointInside method
REFACTOR: Cleanup in ColorPickerElement.java including:
 - Remove full paths for ResourceLocations
 - Not capturing the YACLScreen
 - Using "control.allowAlpha" instead of storing the boolean
 - No longer saving the ColorController
 - All variables related to the color picker's dimensions are now private final
 - Changed the order of the rendered items to more closely respect their z-level
 - Names of some methods

* Extracted PopupColorPickerScreen.java to PopupControllerScreen

REFACTOR: Generalized all popup related stuff from color picker to controller
FIX: Actually fixed keyboard/typed character actions on the color picker without first clicking anywhere

* Color preview outline fading

FEAT: Added color preview outline fading to the color controller. The color preview outline will slowly flash from white to black indicating to a user to press it to enable the color picker. It has a boolean ready to be changed to a config option for when that gets added.

* Popup Controller Future Proofing 1

FIX: Made changes based on feedback to ensure that all popup controller widget related items can easily be used for the dropdown controller, and any future controllers that may need it.

* Color picker y is now controlled by the color controller

REFACTOR: Made it so that the color picker y is now set by the color controller
REFACTOR: The color picker now gets removed if the color controller is partially offscreen
REFACTOR: Removed all code related to the manual scrolling of the color picker/popup widget

* Fix option widget list being given

FIX: Removed the option widget list parameter for the PopupControllerScreen, because it isn't used anymore

* ColorPickerWidget

REFACTOR: Renamed ColorPickerElement to ColorPickerWidget
FIX: Small changes when YaclScreen#clearPopupControllerWidget is called.

* Attempt 2 at fixing weird clearing popup controller loop

FIX: (Hopefully) fixed a bug where the YaclScreen#clearPopupController method would get called twice, instead of just once.

* Color picker indicator automatically disables upon discovery

FEAT: Added a boolean to the YACLConfig which determines if a color controller's color preview's outline(color picker indicator) should flash or not. This boolean is on by default, and automatically disables itself upon the color picker's first opening.

* Moving color picker beneath controller better detection implementation + config fix

REFACTOR: Improved the color picker's implementation detecting if it should be beneath the controller or not(moved order of operations)
FIX: Fixed the config option for flashing the color picker indicator not being a serial entry

* Add multi-version support

---------

Co-authored-by: isXander <xander@isxander.dev>

3 files changed, 75 insertions, 4 deletions

diff --git a/src/testmod/java/dev/isxander/yacl3/test/AutogenConfigTest.java b/src/testmod/java/dev/isxander/yacl3/test/AutogenConfigTest.java
index b3b49b6..9bb361e 100644
--- a/src/testmod/java/dev/isxander/yacl3/test/AutogenConfigTest.java
+++ b/src/testmod/java/dev/isxander/yacl3/test/AutogenConfigTest.java
@@ -24,7 +24,7 @@ import java.util.List;
 
 public class AutogenConfigTest {
     public static final ConfigClassHandler<AutogenConfigTest> INSTANCE = ConfigClassHandler.createBuilder(AutogenConfigTest.class)
-            .id(new ResourceLocation("yacl3", "config"))
+            .id(new ResourceLocation("yacl3-test", "config"))
             .serializer(config -> GsonConfigSerializerBuilder.create(config)
                     .setPath(YACLPlatform.getConfigDir().resolve("yacl-test-v2.json5"))
                     .setJson5(true)
diff --git a/src/testmod/java/dev/isxander/yacl3/test/ConfigTest.java b/src/testmod/java/dev/isxander/yacl3/test/ConfigTest.java
index a8f49b0..72c4454 100644
--- a/src/testmod/java/dev/isxander/yacl3/test/ConfigTest.java
+++ b/src/testmod/java/dev/isxander/yacl3/test/ConfigTest.java
@@ -37,6 +37,16 @@ public class ConfigTest {
     @SerialEntry
     public Color colorOption = Color.red;
     @SerialEntry
+    public Color topColorOption = Color.blue;
+    @SerialEntry
+    public Color alphaColorOption = Color.green;
+    @SerialEntry
+    public Color buttonColorOption = new Color(0, 255, 255);
+    @SerialEntry
+    public Color alternativePreviewOutline = Color.white;
+    @SerialEntry
+    public Color anotherAlphaColorOption = new Color(3, 24, 255, 158);
+    @SerialEntry
     public double doubleField = 0.5;
     @SerialEntry
     public float floatField = 0.5f;
diff --git a/src/testmod/java/dev/isxander/yacl3/test/GuiTest.java b/src/testmod/java/dev/isxander/yacl3/test/GuiTest.java
index 473b04a..34ae06a 100644
--- a/src/testmod/java/dev/isxander/yacl3/test/GuiTest.java
+++ b/src/testmod/java/dev/isxander/yacl3/test/GuiTest.java
@@ -83,7 +83,7 @@ public class GuiTest {
                                                                     .append(Component.literal("e").withStyle(style -> style.withHoverEvent(new HoverEvent(HoverEvent.Action.SHOW_TEXT, Component.literal("e")))))
                                                                     .withStyle(style -> style.withClickEvent(new ClickEvent(ClickEvent.Action.OPEN_URL, "https://isxander.dev")))
                                                             )
-                                                            .webpImage(new ResourceLocation("yacl3", "reach-around-placement.webp"))
+                                                            .webpImage(new ResourceLocation("yacl3-test", "reach-around-placement.webp"))
                                                             .build())
                                                     .binding(
                                                             defaults.booleanToggle,
@@ -100,7 +100,6 @@ public class GuiTest {
                                                 .name(Component.literal("Custom Boolean Toggle"))
                                                 .description(val -> OptionDescription.createBuilder()
                                                         .text(Component.literal("You can customize controllers like so! YACL is truly infinitely customizable! This tooltip is long in order to demonstrate the cool, smooth scrolling of these descriptions. Did you know, they are also super clickable?! I know, cool right, YACL 3.x really is amazing."))
-                                                        .image(Path.of("D:\\Xander\\Downloads\\_MG_0860-Enhanced-NR.png"), new ResourceLocation("yacl", "f.webp")) // TODO: Add img file to git?
                                                         .build())
                                                 .binding(
                                                         defaults.customBooleanToggle,
@@ -180,7 +179,8 @@ public class GuiTest {
                                                         () -> config.colorOption,
                                                         value -> config.colorOption = value
                                                 )
-                                                .customController(ColorController::new)
+                                                .controller(opt -> ColorControllerBuilder.create(opt)
+                                                        .allowAlpha(true))
                                                 .build())
                                         .build())
                                 .group(OptionGroup.createBuilder()
@@ -389,6 +389,67 @@ public class GuiTest {
                                         .build())
                                 .build())
                         .category(ConfigCategory.createBuilder()
+                                .name(Component.literal("Color Picker Test"))
+                                .option(Option.<Color>createBuilder()
+                                        .name(Component.literal("Top Color Option"))
+                                        .binding(
+                                                defaults.topColorOption,
+                                                () -> config.topColorOption,
+                                                value -> config.topColorOption = value
+                                        )
+                                        .customController(ColorController::new)
+                                        .description(OptionDescription.of(Component.literal("A Color Controller's Color Picker will appear beneath the color if there is not enough room above it.")))
+                                        .build())
+                                .option(LabelOption.create(Component.literal("Enabling a Color Controller's Color Picker at the top of the screen will appear beneath it if there isn't enough room above. This also applies to color controllers with alpha enabled.")))
+                                .option(Option.<Color>createBuilder()
+                                        .name(Component.literal("Alpha Color Option"))
+                                        .binding(
+                                                defaults.alphaColorOption,
+                                                () -> config.alphaColorOption,
+                                                value -> config.alphaColorOption = value
+                                        )
+                                        .customController(opt -> new ColorController(opt, true))
+                                        .description(OptionDescription.of(Component.literal("A Color Picker will also allow you to choose a Color Controller's alpha if it is enabled.")))
+                                        .build())
+                                .option(ButtonOption.createBuilder()
+                                        .name(Component.literal("Button \"Option\""))
+                                        .action((screen, opt) -> opt.setAvailable(false))
+                                        .build())
+                                .option(LabelOption.create(Component.literal("You can try and hit the button above while the color picker below is visible, but you shouldn't be able to.")))
+                                .option(Option.<Color>createBuilder()
+                                        .name(Component.literal("Button Color Option"))
+                                        .binding(
+                                                defaults.buttonColorOption,
+                                                () -> config.buttonColorOption,
+                                                value -> config.buttonColorOption = value
+                                        )
+                                        .customController(ColorController::new)
+                                        .description(OptionDescription.of(Component.literal("Other controller's buttons are disabled while a color picker is visible!")))
+                                        .build())
+                                .option(LabelOption.create(Component.literal("The color picker button will be outlined with a light grey color instead of white if the controller's color is very light. This is all determined using the hue and value(brightness) of the color.")))
+                                .option(Option.<Color>createBuilder()
+                                        .name(Component.literal("Alternative Color Outline"))
+                                        .binding(
+                                                defaults.alternativePreviewOutline,
+                                                () -> config.alternativePreviewOutline,
+                                                value -> config.alternativePreviewOutline = value
+                                        )
+                                        .customController(opt -> new ColorController(opt, true))
+                                        .description(OptionDescription.of(Component.literal("This helps users who don't know about the color picker discover it, even if a developer chooses a lighter color")))
+                                        .build())
+                                .option(LabelOption.create(Component.literal("An extra color controller with alpha enabled to show that it too has the alternative color outline")))
+                                .option(Option.<Color>createBuilder()
+                                        .name(Component.literal("Alpha Color Option 2"))
+                                        .binding(
+                                                defaults.anotherAlphaColorOption,
+                                                () -> config.anotherAlphaColorOption,
+                                                value -> config.anotherAlphaColorOption = value
+                                        )
+                                        .customController(opt -> new ColorController(opt, true))
+                                        .description(OptionDescription.of(Component.literal("Yay!!!!!!")))
+                                        .build())
+                                .build())
+                        .category(ConfigCategory.createBuilder()
                                 .name(Component.literal("Category Test"))
                                 .option(LabelOption.create(Component.literal("This is a test category!")))
                                 .build())