Merge pull request #46110 from gongpha/colorbar-in-colorpicker

Add color interpolation bar on each channel in ColorPicker

doc/classes/ColorPicker.xml

@@ -91,6 +91,9 @@
 		<theme_item name="add_preset" type="Texture2D">
 			The icon for the "Add Preset" button.
 		</theme_item>
+		<theme_item name="bar_arrow" type="Texture2D">
+			The texture for the arrow grabber.
+		</theme_item>
 		<theme_item name="color_hue" type="Texture2D">
 			Custom texture for the hue selection slider on the right.
 		</theme_item>

editor/editor_themes.cpp

@@ -1283,6 +1283,7 @@ Ref<Theme> create_editor_theme(const Ref<Theme> p_theme) {
 	theme->set_icon("add_preset", "ColorPicker", theme->get_icon("Add", "EditorIcons"));
 	theme->set_icon("preset_bg", "ColorPicker", theme->get_icon("GuiMiniCheckerboard", "EditorIcons"));
 	theme->set_icon("overbright_indicator", "ColorPicker", theme->get_icon("OverbrightIndicator", "EditorIcons"));
+	theme->set_icon("bar_arrow", "ColorPicker", theme->get_icon("ColorPickerBarArrow", "EditorIcons"));
 
 	theme->set_icon("bg", "ColorPickerButton", theme->get_icon("GuiMiniCheckerboard", "EditorIcons"));
 

editor/icons/ColorPickerBarArrow.svg

@@ -0,0 +1 @@
+<svg height="20" viewBox="0 0 16 20" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m2 16h12l-6-6z" fill="#e0e0e0" stroke-width="2"/></svg>

scene/gui/color_picker.cpp

@@ -113,6 +113,24 @@ void ColorPicker::_update_controls() {
 		btn_hsv->set_disabled(false);
 	}
 
+	if (raw_mode_enabled) {
+		for (int i = 0; i < 3; i++) {
+			scroll[i]->add_theme_icon_override("grabber", Ref<Texture2D>());
+			scroll[i]->add_theme_icon_override("grabber_highlight", Ref<Texture2D>());
+			scroll[i]->add_theme_style_override("slider", Ref<StyleBox>());
+			scroll[i]->add_theme_style_override("grabber_area", Ref<StyleBox>());
+			scroll[i]->add_theme_style_override("grabber_area_highlight", Ref<StyleBox>());
+		}
+	} else {
+		for (int i = 0; i < 3; i++) {
+			scroll[i]->add_theme_icon_override("grabber", get_theme_icon("bar_arrow"));
+			scroll[i]->add_theme_icon_override("grabber_highlight", get_theme_icon("bar_arrow"));
+			scroll[i]->add_theme_style_override("slider", Ref<StyleBoxEmpty>(memnew(StyleBoxEmpty)));
+			scroll[i]->add_theme_style_override("grabber_area", Ref<StyleBoxEmpty>(memnew(StyleBoxEmpty)));
+			scroll[i]->add_theme_style_override("grabber_area_highlight", Ref<StyleBoxEmpty>(memnew(StyleBoxEmpty)));
+		}
+	}
+
 	if (edit_alpha) {
 		values[3]->show();
 		scroll[3]->show();
@@ -243,6 +261,9 @@ void ColorPicker::_update_color(bool p_update_sliders) {
 	sample->update();
 	uv_edit->update();
 	w_edit->update();
+	for (int i = 0; i < 4; i++) {
+		scroll[i]->update();
+	}
 	updating = false;
 }
 
@@ -456,6 +477,69 @@ void ColorPicker::_hsv_draw(int p_which, Control *c) {
 	}
 }
 
+void ColorPicker::_slider_draw(int p_which) {
+	Vector<Vector2> pos;
+	pos.resize(4);
+	Vector<Color> col;
+	col.resize(4);
+	Size2 size = scroll[p_which]->get_size();
+	Color left_color;
+	Color right_color;
+#ifdef TOOLS_ENABLED
+	const real_t margin = 4 * EDSCALE;
+#else
+	const real_t margin = 4;
+#endif
+
+	if (p_which == 3) {
+		scroll[p_which]->draw_texture_rect(get_theme_icon("preset_bg", "ColorPicker"), Rect2(Point2(0, margin), Size2(size.x, margin)), true);
+
+		left_color = color;
+		left_color.a = 0;
+		right_color = color;
+		right_color.a = 1;
+	} else {
+		if (raw_mode_enabled) {
+			return;
+		}
+		if (hsv_mode_enabled) {
+			if (p_which == 0) {
+				Ref<Texture2D> hue = get_theme_icon("color_hue", "ColorPicker");
+				scroll[p_which]->draw_set_transform(Point2(), -Math_PI / 2, Size2(1.0, 1.0));
+				scroll[p_which]->draw_texture_rect(hue, Rect2(Vector2(margin * -2, 0), Vector2(scroll[p_which]->get_size().x, margin)), false, Color(1, 1, 1), true);
+				return;
+			}
+			Color s_col;
+			Color v_col;
+			s_col.set_hsv(h, 0, v);
+			left_color = (p_which == 1) ? s_col : Color(0, 0, 0);
+			s_col.set_hsv(h, 1, v);
+			v_col.set_hsv(h, s, 1);
+			right_color = (p_which == 1) ? s_col : v_col;
+		} else {
+			left_color = Color(
+					p_which == 0 ? 0 : color.r,
+					p_which == 1 ? 0 : color.g,
+					p_which == 2 ? 0 : color.b);
+			right_color = Color(
+					p_which == 0 ? 1 : color.r,
+					p_which == 1 ? 1 : color.g,
+					p_which == 2 ? 1 : color.b);
+		}
+	}
+
+	col.set(0, left_color);
+	col.set(1, right_color);
+	col.set(2, right_color);
+	col.set(3, left_color);
+	pos.set(0, Vector2(0, margin));
+	pos.set(1, Vector2(size.x, margin));
+	pos.set(2, Vector2(size.x, margin * 2));
+	pos.set(3, Vector2(0, margin * 2));
+
+	scroll[p_which]->draw_polygon(pos, col);
+}
+
 void ColorPicker::_uv_input(const Ref<InputEvent> &p_event) {
 	Ref<InputEventMouseButton> bev = p_event;
 
@@ -799,10 +883,16 @@ ColorPicker::ColorPicker() :
 		scroll[i]->set_h_size_flags(SIZE_EXPAND_FILL);
 
 		scroll[i]->connect("value_changed", callable_mp(this, &ColorPicker::_value_changed));
+		scroll[i]->connect("draw", callable_mp(this, &ColorPicker::_slider_draw), make_binds(i));
 
 		vbr->add_child(hbc);
 	}
 	labels[3]->set_text("A");
+	scroll[3]->add_theme_icon_override("grabber", get_theme_icon("bar_arrow"));
+	scroll[3]->add_theme_icon_override("grabber_highlight", get_theme_icon("bar_arrow"));
+	scroll[3]->add_theme_style_override("slider", Ref<StyleBoxEmpty>(memnew(StyleBoxEmpty)));
+	scroll[3]->add_theme_style_override("grabber_area", Ref<StyleBoxEmpty>(memnew(StyleBoxEmpty)));
+	scroll[3]->add_theme_style_override("grabber_area_highlight", Ref<StyleBoxEmpty>(memnew(StyleBoxEmpty)));
 
 	HBoxContainer *hhb = memnew(HBoxContainer);
 	vbr->add_child(hhb);

scene/gui/color_picker.h

@@ -91,6 +91,7 @@ private:
 	void _text_type_toggled();
 	void _sample_draw();
 	void _hsv_draw(int p_which, Control *c);
+	void _slider_draw(int p_which);
 
 	void _uv_input(const Ref<InputEvent> &p_event);
 	void _w_input(const Ref<InputEvent> &p_event);

scene/resources/default_theme/default_theme.cpp

@@ -884,6 +884,7 @@ void fill_default_theme(Ref<Theme> &theme, const Ref<Font> &default_font, const
 	theme->set_icon("color_sample", "ColorPicker", make_icon(color_picker_sample_png));
 	theme->set_icon("preset_bg", "ColorPicker", make_icon(mini_checkerboard_png));
 	theme->set_icon("overbright_indicator", "ColorPicker", make_icon(overbright_indicator_png));
+	theme->set_icon("bar_arrow", "ColorPicker", make_icon(bar_arrow_png));
 
 	theme->set_icon("bg", "ColorPickerButton", make_icon(mini_checkerboard_png));
 

scene/resources/default_theme/theme_data.h

@@ -14,6 +14,10 @@ static const unsigned char arrow_right_png[] = {
 	0x89, 0x50, 0x4e, 0x47, 0xd, 0xa, 0x1a, 0xa, 0x0, 0x0, 0x0, 0xd, 0x49, 0x48, 0x44, 0x52, 0x0, 0x0, 0x0, 0xc, 0x0, 0x0, 0x0, 0xc, 0x8, 0x4, 0x0, 0x0, 0x0, 0xfc, 0x7c, 0x94, 0x6c, 0x0, 0x0, 0x0, 0x2e, 0x49, 0x44, 0x41, 0x54, 0x78, 0xda, 0x63, 0x20, 0x17, 0x3c, 0xf8, 0xf, 0x82, 0xf7, 0x13, 0x70, 0x48, 0x3c, 0xf8, 0xf2, 0x50, 0x1b, 0x43, 0x2, 0xa, 0xaf, 0xbe, 0xe0, 0xc6, 0x2e, 0xf1, 0xff, 0xe1, 0x7c, 0x12, 0x24, 0x10, 0x46, 0x11, 0xb6, 0x1c, 0xe1, 0x5c, 0xa, 0x0, 0x0, 0xe0, 0x14, 0x48, 0xb1, 0x3d, 0x1b, 0x7a, 0xf0, 0x0, 0x0, 0x0, 0x0, 0x49, 0x45, 0x4e, 0x44, 0xae, 0x42, 0x60, 0x82
 };
 
+static const unsigned char bar_arrow_png[] = {
+	0x89, 0x50, 0x4e, 0x47, 0xd, 0xa, 0x1a, 0xa, 0x0, 0x0, 0x0, 0xd, 0x49, 0x48, 0x44, 0x52, 0x0, 0x0, 0x0, 0x10, 0x0, 0x0, 0x0, 0x14, 0x8, 0x4, 0x0, 0x0, 0x0, 0x2e, 0x6b, 0x75, 0xfc, 0x0, 0x0, 0x0, 0x4, 0x67, 0x41, 0x4d, 0x41, 0x0, 0x0, 0xb1, 0x8f, 0xb, 0xfc, 0x61, 0x5, 0x0, 0x0, 0x0, 0x1, 0x73, 0x52, 0x47, 0x42, 0x0, 0xae, 0xce, 0x1c, 0xe9, 0x0, 0x0, 0x0, 0x9, 0x70, 0x48, 0x59, 0x73, 0x0, 0x0, 0xe, 0xc0, 0x0, 0x0, 0xe, 0xc0, 0x1, 0x6a, 0xd6, 0x89, 0x9, 0x0, 0x0, 0x0, 0x65, 0x49, 0x44, 0x41, 0x54, 0x28, 0xcf, 0x63, 0xfc, 0xcf, 0x80, 0x1f, 0x30, 0x8e, 0x20, 0x5, 0x8c, 0x38, 0x24, 0xff, 0x53, 0x5f, 0xc1, 0xb, 0xee, 0x9f, 0x53, 0x18, 0x18, 0xd8, 0x73, 0x24, 0xbe, 0x62, 0x55, 0x70, 0x5f, 0x83, 0x61, 0x15, 0xa3, 0x2e, 0x3, 0x3, 0xc3, 0xd, 0xe6, 0x30, 0xd9, 0xcb, 0x18, 0xa, 0x1e, 0xc6, 0xfd, 0x9f, 0xc6, 0xc0, 0xd, 0x35, 0xea, 0x3b, 0x63, 0x81, 0xfc, 0x2c, 0x14, 0x5, 0xf, 0x2a, 0x18, 0xda, 0xd1, 0x1c, 0x50, 0xa9, 0xd0, 0x1, 0x57, 0xf0, 0x10, 0x53, 0x9a, 0x81, 0x81, 0x81, 0xa1, 0x52, 0xbe, 0x83, 0x81, 0x81, 0xf1, 0x3f, 0x2e, 0x69, 0xa8, 0x12, 0x3a, 0x4, 0x14, 0x0, 0x7b, 0xda, 0x34, 0x1, 0xbb, 0xb5, 0x3e, 0x6c, 0x0, 0x0, 0x0, 0x0, 0x49, 0x45, 0x4e, 0x44, 0xae, 0x42, 0x60, 0x82
+};
+
 static const unsigned char bookmark_png[] = {
 	0x89, 0x50, 0x4e, 0x47, 0xd, 0xa, 0x1a, 0xa, 0x0, 0x0, 0x0, 0xd, 0x49, 0x48, 0x44, 0x52, 0x0, 0x0, 0x0, 0x10, 0x0, 0x0, 0x0, 0x10, 0x8, 0x6, 0x0, 0x0, 0x0, 0x1f, 0xf3, 0xff, 0x61, 0x0, 0x0, 0x0, 0x4, 0x73, 0x42, 0x49, 0x54, 0x8, 0x8, 0x8, 0x8, 0x7c, 0x8, 0x64, 0x88, 0x0, 0x0, 0x0, 0x57, 0x49, 0x44, 0x41, 0x54, 0x38, 0x8d, 0xed, 0x93, 0x31, 0xa, 0xc0, 0x30, 0xc, 0x3, 0xa5, 0xd0, 0xff, 0x7f, 0x59, 0x1d, 0x8a, 0x42, 0x8, 0x9, 0x95, 0xc9, 0xd2, 0xa1, 0x9a, 0x8c, 0xf1, 0xdd, 0x62, 0x1b, 0x38, 0xc, 0x87, 0x5a, 0x5, 0xae, 0x79, 0xde, 0x2, 0x1, 0x80, 0x94, 0x39, 0x48, 0x76, 0x49, 0x17, 0xa4, 0xf0, 0x24, 0x61, 0x2b, 0x51, 0x8b, 0xfc, 0x82, 0xcf, 0xb, 0x48, 0x7a, 0xdf, 0x75, 0x81, 0xf, 0xe5, 0x29, 0xf7, 0x92, 0x6b, 0x3, 0x1a, 0x1e, 0xda, 0x7c, 0x3d, 0x77, 0x21, 0x7b, 0xa8, 0x74, 0x2e, 0xcb, 0xd, 0xc8, 0x75, 0x13, 0x28, 0x9, 0xed, 0xc2, 0xc8, 0x0, 0x0, 0x0, 0x0, 0x49, 0x45, 0x4e, 0x44, 0xae, 0x42, 0x60, 0x82
 };