Color Picker Rewrite - Alpha Slider & Presets, Color Pickers Everywhere!

src/main/java/dev/hephaestus/glowcase/client/gui/screen/ingame/ColorPickerIncludedScreen.java

@@ -1,11 +1,90 @@
 package dev.hephaestus.glowcase.client.gui.screen.ingame;
 
-import dev.hephaestus.glowcase.client.gui.widget.ingame.ColorPickerWidget;
+import dev.hephaestus.glowcase.client.gui.widget.ingame.color.picker.ColorPickerWidget;
+import dev.hephaestus.glowcase.client.util.ColorUtil;
 import net.minecraft.ChatFormatting;
+import net.minecraft.client.gui.GuiGraphicsExtractor;
+import net.minecraft.client.gui.components.events.GuiEventListener;
+import net.minecraft.client.gui.screens.Screen;
+import net.minecraft.client.input.KeyEvent;
+import net.minecraft.client.input.MouseButtonEvent;
+import org.lwjgl.glfw.GLFW;
 
+/**
+ * Main interface for any Screen wishing to implement a {@link ColorPickerWidget}.<br><br>
+ * Each ColorPickerIncludedScreen has *one* Color Picker widget which gets shared among all things using it.<br>
+ * Steps for adding a Color Picker to a screen:
+ * <ol type="0">
+ *     <li>Implement this interface, and return a private ColorPickerWidget in {@link ColorPickerIncludedScreen#getColorPickerWidget()}.</li>
+ *     <li>Initialize your ColorPickerWidget in {@link Screen#init()} via {@link ColorPickerWidget#builder(ColorPickerIncludedScreen)}. You do *not* need to add it as a renderableWidget.</li>
+ *     <li>Include {@link ColorPickerIncludedScreen#extractColorPicker(GuiGraphicsExtractor, int, int, float)} at the very bottom of {@link Screen#extractRenderState(GuiGraphicsExtractor, int, int, float)} to ensure it renders atop of everything else.</li>
+ *     <li>Include {@link ColorPickerIncludedScreen#mouseClickedColorPicker(MouseButtonEvent, boolean)} at the very top of {@link Screen#mouseClicked(MouseButtonEvent, boolean)}, return true if color picker was clicked, otherwise continue with method.</li>
+ *     <li>Include {@link ColorPickerIncludedScreen#keyPressedColorPicker(KeyEvent)} at the very top of {@link Screen#keyPressed(KeyEvent)}, return true if color picker key pressed, otherwise continue with method.</li>
+ *     <li>Booyah!</li>
+ * </ol>
+ * @author Superkat32
+ */
 public interface ColorPickerIncludedScreen {
-	ColorPickerWidget colorPickerWidget();
-	void toggleColorPicker(boolean active);
-	void insertHexTag(String hex);
-	void insertFormattingTag(ChatFormatting formatting);
+	ColorPickerWidget getColorPickerWidget();
+
+	default ColorPickerWidget createColorPickerWidget() {
+		return ColorPickerWidget.builder(this).build();
+	}
+
+	default void extractColorPicker(GuiGraphicsExtractor graphics, int mouseX, int mouseY, float delta) {
+		this.getColorPickerWidget().extractRenderState(graphics, mouseX, mouseY, delta);
+	}
+
+	default boolean mouseClickedColorPicker(MouseButtonEvent event, boolean doubleClick) {
+		double mouseX = event.x();
+		double mouseY = event.y();
+		ColorPickerWidget colorPickerWidget = this.getColorPickerWidget();
+
+		if (colorPickerWidget.isActive() && colorPickerWidget.visible) {
+			if (colorPickerWidget.isMouseOver(mouseX, mouseY)) {
+				colorPickerWidget.mouseClicked(event, doubleClick);
+				Screen self = (Screen) this;
+				self.setFocused(colorPickerWidget);
+				self.setDragging(true);
+				return true;
+			} else if (colorPickerWidget.targetElement == null || !colorPickerWidget.targetElement.isMouseOver(mouseX, mouseY)) {
+				this.hideColorPickerWidget();
+			}
+		}
+		return false;
+	}
+
+	default boolean keyPressedColorPicker(KeyEvent event) {
+		int keyCode = event.key();
+		ColorPickerWidget colorPickerWidget = this.getColorPickerWidget();
+		if (colorPickerWidget.isActive()) {
+			Screen self = (Screen) this;
+			switch (keyCode) {
+				case GLFW.GLFW_KEY_ENTER, GLFW.GLFW_KEY_KP_ENTER -> colorPickerWidget.confirm();
+				case GLFW.GLFW_KEY_ESCAPE -> colorPickerWidget.cancel();
+				default -> {
+					GuiEventListener pickerTarget = colorPickerWidget.targetElement;
+					if (pickerTarget != null) {
+						self.setFocused(pickerTarget);
+						pickerTarget.keyPressed(event);
+						return true;
+					}
+				}
+			}
+			self.setFocused(null);
+			return true;
+		}
+		return false;
+	}
+
+	default void hideColorPickerWidget() {
+		this.getColorPickerWidget().hide();
+	}
+
+	default void insertHexTag(String hex) {}
+	default void insertFormattingTag(ChatFormatting formatting) {}
+	default void insertHexColor(int color) {
+		String hex = ColorUtil.toHex(color);
+		this.insertHexTag(hex);
+	}
 }

src/main/java/dev/hephaestus/glowcase/client/gui/screen/ingame/NoteEditScreen.java

@@ -2,7 +2,7 @@
 
 import com.mojang.datafixers.util.Pair;
 import dev.hephaestus.glowcase.Glowcase;
-import dev.hephaestus.glowcase.client.gui.widget.ingame.ColorPickerWidget;
+import dev.hephaestus.glowcase.client.gui.widget.ingame.color.picker.ColorPickerWidget;
 import dev.hephaestus.glowcase.client.util.NoteTextColorResource;
 import dev.hephaestus.glowcase.item.component.NoteComponent;
 import dev.hephaestus.glowcase.packet.C2SEditNoteItem;
@@ -187,10 +187,7 @@ protected void init() {
 		}).bounds(width / 2 + BG_WIDTH / 2 - (BG_WIDTH / 2 - 3), height / 2 + BG_HEIGHT / 2 + offset, BG_WIDTH / 2 - 3, 20).build();
 
 
-		this.colorPickerWidget = ColorPickerWidget.builder(this, 216, 10).size(182, 104).build();
-		this.colorPickerWidget.toggle(false); //start deactivated
-
-		this.addRenderableWidget(colorPickerWidget);
+		this.colorPickerWidget = this.createColorPickerWidget();
 
 		addRenderableWidget(changeAlignment);
 		addRenderableWidget(doneButton);
@@ -329,6 +326,7 @@ public void extractRenderState(GuiGraphicsExtractor graphics, int mouseX, int mo
 		}
 
 		graphics.disableScissor();
+		this.extractColorPicker(graphics, mouseX, mouseY, delta);
 	}
 
 	@Override
@@ -347,12 +345,7 @@ public boolean keyPressed(KeyEvent event) {
 		boolean result;
 
 		int keyCode = event.key();
-		if (this.colorPickerWidget.active && (keyCode == GLFW.GLFW_KEY_ENTER || keyCode == GLFW.GLFW_KEY_ESCAPE)) {
-			if (keyCode == GLFW.GLFW_KEY_ENTER) {
-				this.colorPickerWidget.confirmColor();
-			} else {
-				this.colorPickerWidget.cancel();
-			}
+		if (keyPressedColorPicker(event)) {
 			result = true;
 		} else {
 			setFocused(null);
@@ -444,18 +437,7 @@ public boolean charTyped(CharacterEvent event) {
 	public boolean mouseClicked(MouseButtonEvent event, boolean doubleClick) {
 		double mouseX = event.x();
 		double mouseY = event.y();
-		if (colorPickerWidget.active && colorPickerWidget.visible) {
-			if (colorPickerWidget.isMouseOver(mouseX, mouseY)) {
-				colorPickerWidget.mouseClicked(event, doubleClick);
-				this.setFocused(colorPickerWidget);
-				this.setDragging(true);
-				return true;
-			} else {
-				if (!this.colorPickerWidget.targetElement.isMouseOver(mouseX, mouseY)) {
-					toggleColorPicker(false);
-				}
-			}
-		}
+		if (this.mouseClickedColorPicker(event, doubleClick)) return true;
 
 		boolean withinX = (mouseX >= width / 2f - BG_WIDTH / 2f && mouseX <= width / 2f + BG_WIDTH / 2f);
 		boolean withinY = (mouseY >= height / 2f - BG_HEIGHT / 2f && mouseY <= height / 2f + BG_HEIGHT / 2f);
@@ -597,13 +579,8 @@ public CustomPacketPayload getUpdatePayload() {
 	}
 
 	@Override
-	public ColorPickerWidget colorPickerWidget() {
-		return colorPickerWidget;
-	}
-
-	@Override
-	public void toggleColorPicker(boolean active) {
-		colorPickerWidget.toggle(active);
+	public ColorPickerWidget getColorPickerWidget() {
+		return this.colorPickerWidget;
 	}
 
 	@Override

src/main/java/dev/hephaestus/glowcase/client/gui/screen/ingame/OutlineBlockEditScreen.java

@@ -3,19 +3,23 @@
 import com.google.common.primitives.Ints;
 import dev.hephaestus.glowcase.block.entity.OutlineBlockEntity;
 import dev.hephaestus.glowcase.client.gui.widget.ingame.GlowcaseEditBox;
+import dev.hephaestus.glowcase.client.gui.widget.ingame.color.HexColorEditBox;
+import dev.hephaestus.glowcase.client.gui.widget.ingame.color.picker.ColorPickerWidget;
 import dev.hephaestus.glowcase.packet.C2SEditOutlineBlock;
 import dev.hephaestus.glowcase.util.InputFilters;
 import dev.hephaestus.glowcase.util.TextUtils;
+import net.minecraft.client.gui.GuiGraphicsExtractor;
 import net.minecraft.client.gui.components.StringWidget;
+import net.minecraft.client.input.KeyEvent;
+import net.minecraft.client.input.MouseButtonEvent;
 import net.minecraft.core.Vec3i;
 import net.minecraft.network.chat.Component;
-import net.minecraft.network.chat.TextColor;
 import net.minecraft.network.protocol.common.custom.CustomPacketPayload;
 import org.jetbrains.annotations.Nullable;
 
 import java.util.concurrent.atomic.AtomicInteger;
 
-public class OutlineBlockEditScreen extends BlockEditorScreen<OutlineBlockEntity> {
+public class OutlineBlockEditScreen extends BlockEditorScreen<OutlineBlockEntity> implements ColorPickerIncludedScreen {
 	private StringWidget offsetTextWidget;
 	private StringWidget scaleTextWidget;
 	private StringWidget colorTextWidget;
@@ -27,9 +31,11 @@ public class OutlineBlockEditScreen extends BlockEditorScreen<OutlineBlockEntity
 	private GlowcaseEditBox xScaleWidget;
 	private GlowcaseEditBox yScaleWidget;
 	private GlowcaseEditBox zScaleWidget;
-	private GlowcaseEditBox colorWidget;
+	private HexColorEditBox colorWidget;
 	private GlowcaseEditBox widthWidget;
 
+	private ColorPickerWidget colorPickerWidget;
+
 	public OutlineBlockEditScreen(OutlineBlockEntity blockEntity) {
 		super(blockEntity);
 	}
@@ -121,12 +127,14 @@ public void init() {
 		this.yScaleWidget.setHint(TextUtils.placeholder("gui.glowcase.y"));
 		this.zScaleWidget.setHint(TextUtils.placeholder("gui.glowcase.z"));
 
-		this.colorWidget = new GlowcaseEditBox(this.minecraft.font, width / 2 - 65, widgetY.getAndAdd(lineOffset), 50, 20, Component.empty());
-		this.colorWidget.setValue("#" + String.format("%1$06X", this.blockEntity.color & 0x00FFFFFF));
-		this.colorWidget.setResponder(string -> {
-			TextColor.parseColor(this.colorWidget.getValue())
-				.ifSuccess(color -> this.blockEntity.color = color.getValue() | 0xFF000000);
-		});
+		this.colorPickerWidget = this.createColorPickerWidget();
+
+		this.colorWidget = HexColorEditBox.builder(this.minecraft.font, width / 2 - 65, widgetY.getAndAdd(lineOffset),
+				() -> this.blockEntity.color, color -> this.blockEntity.color = color
+			)
+			.setWidth(50)
+			.setColorPickerWidget(this.colorPickerWidget)
+			.build();
 
 		this.widthWidget = new GlowcaseEditBox(this.minecraft.font, width / 2 - 65, widgetY.getAndAdd(lineOffset), 50, 20, Component.empty());
 		this.widthWidget.setValue(String.valueOf(this.blockEntity.width));
@@ -147,8 +155,31 @@ public void init() {
 		this.addRenderableWidget(this.widthWidget);
 	}
 
+	@Override
+	public void extractRenderState(GuiGraphicsExtractor graphics, int mouseX, int mouseY, float delta) {
+		super.extractRenderState(graphics, mouseX, mouseY, delta);
+		this.extractColorPicker(graphics, mouseX, mouseY, delta);
+	}
+
+	@Override
+	public boolean mouseClicked(MouseButtonEvent event, boolean doubleClick) {
+		if (this.mouseClickedColorPicker(event, doubleClick)) return true;
+		return super.mouseClicked(event, doubleClick);
+	}
+
+	@Override
+	public boolean keyPressed(KeyEvent event) {
+		if (this.keyPressedColorPicker(event)) return true;
+		return super.keyPressed(event);
+	}
+
 	@Override
 	public @Nullable CustomPacketPayload getUpdatePayload() {
 		return C2SEditOutlineBlock.of(blockEntity);
 	}
+
+	@Override
+	public ColorPickerWidget getColorPickerWidget() {
+		return this.colorPickerWidget;
+	}
 }

src/main/java/dev/hephaestus/glowcase/client/gui/screen/ingame/PopupBlockEditScreen.java

@@ -3,6 +3,8 @@
 import dev.hephaestus.glowcase.block.entity.HyperlinkBlockEntity;
 import dev.hephaestus.glowcase.block.entity.PopupBlockEntity;
 import dev.hephaestus.glowcase.block.entity.TextBlockEntity;
+import dev.hephaestus.glowcase.client.gui.widget.ingame.color.HexColorEditBox;
+import dev.hephaestus.glowcase.client.gui.widget.ingame.color.picker.ColorPickerWidget;
 import dev.hephaestus.glowcase.packet.C2SEditPopupBlock;
 import dev.hephaestus.glowcase.util.TextUtils;
 import net.minecraft.client.Minecraft;
@@ -14,20 +16,21 @@
 import net.minecraft.client.input.KeyEvent;
 import net.minecraft.client.input.MouseButtonEvent;
 import net.minecraft.network.chat.Component;
-import net.minecraft.network.chat.TextColor;
 import net.minecraft.network.protocol.common.custom.CustomPacketPayload;
 import net.minecraft.util.Mth;
 import org.jetbrains.annotations.Nullable;
 import org.lwjgl.glfw.GLFW;
 
 //TODO: multi-character selection at some point? it may be a bit complex but it'd be nice
-public class PopupBlockEditScreen extends BlockEditorScreen<PopupBlockEntity> {
+public class PopupBlockEditScreen extends BlockEditorScreen<PopupBlockEntity> implements ColorPickerIncludedScreen {
 	private TextFieldHelper selectionManager;
 	private int currentRow;
 	private long ticksSinceOpened = 0;
 	private EditBox titleEntryWidget;
 	private Button changeAlignment;
-	private EditBox colorEntryWidget;
+	private HexColorEditBox colorEntryWidget;
+
+	private ColorPickerWidget colorPickerWidget;
 
 	public PopupBlockEditScreen(PopupBlockEntity blockEntity) {
 		super(blockEntity);
@@ -76,14 +79,13 @@ public void init() {
 			));
 		}).bounds(120 + innerPadding, 20 + innerPadding, 160, 20).build();
 
-		this.colorEntryWidget = new EditBox(this.minecraft.font, 280 + innerPadding * 2, 20 + innerPadding, 50, 20, Component.empty());
-		this.colorEntryWidget.setValue("#" + Integer.toHexString(this.blockEntity.color & 0x00FFFFFF));
-		this.colorEntryWidget.setResponder(string -> {
-			TextColor.parseColor(this.colorEntryWidget.getValue()).ifSuccess(color -> {
-				this.blockEntity.color = color == null ? 0xFFFFFFFF : color.getValue() | 0xFF000000;
-				this.blockEntity.renderDirty = true;
-			});
-		});
+		this.colorPickerWidget = createColorPickerWidget();
+		this.colorEntryWidget = HexColorEditBox.builder(this.minecraft.font, 280 + innerPadding, 20 + innerPadding,
+				() -> this.blockEntity.color, color -> { this.blockEntity.color = color; this.blockEntity.renderDirty = true; }
+			)
+			.setWidth(50)
+			.setColorPickerWidget(this.colorPickerWidget)
+			.build();
 
 		this.addRenderableWidget(this.titleEntryWidget);
 		this.addRenderableWidget(this.changeAlignment);
@@ -169,6 +171,7 @@ public void extractRenderState(GuiGraphicsExtractor graphics, int mouseX, int mo
 		}
 
 		graphics.pose().popMatrix();
+		this.extractColorPicker(graphics, mouseX, mouseY, delta);
 	}
 
 	@Override
@@ -186,6 +189,7 @@ public boolean charTyped(CharacterEvent event) {
 	@Override
 	public boolean keyPressed(KeyEvent event) {
 		int keyCode = event.key();
+		if (this.keyPressedColorPicker(event)) return true;
 		if (this.titleEntryWidget.canConsumeInput()) {
 			if (keyCode == GLFW.GLFW_KEY_ESCAPE) {
 				this.onClose();
@@ -296,6 +300,7 @@ public boolean mouseClicked(MouseButtonEvent event, boolean doubleClick) {
 		double mouseX = event.x();
 		double mouseY = event.y();
 		int topOffset = (int) (40 + 2 * this.width / 100F);
+		if (this.mouseClickedColorPicker(event, doubleClick)) return true;
 		if (!this.titleEntryWidget.mouseClicked(event, doubleClick)) {
 			this.titleEntryWidget.setFocused(false);
 		}
@@ -354,4 +359,9 @@ public boolean mouseClicked(MouseButtonEvent event, boolean doubleClick) {
 			return super.mouseClicked(event, doubleClick);
 		}
 	}
+
+	@Override
+	public ColorPickerWidget getColorPickerWidget() {
+		return this.colorPickerWidget;
+	}
 }