Add visual feedback when hovering layer checkboxes in the Inspector

This also changes how checkboxes are selected, which makes it possible
to click in the small area between two checkboxes and
still toggle a value successfully (which is arguably less frustrating).

1 files changed, 64 insertions, 39 deletions

diff --git a/editor/editor_properties.cpp b/editor/editor_properties.cpp
index 81c4e48974..cfa0c7a063 100644
--- a/editor/editor_properties.cpp
+++ b/editor/editor_properties.cpp
@@ -581,6 +581,7 @@ public:
 	Vector<Rect2> flag_rects;
 	Vector<String> names;
 	Vector<String> tooltips;
+	int hovered_index;
 
 	virtual Size2 get_minimum_size() const {
 		Ref<Font> font = get_theme_font("font", "Label");
@@ -596,56 +597,79 @@ public:
 		return String();
 	}
 	void _gui_input(const Ref<InputEvent> &p_ev) {
-		Ref<InputEventMouseButton> mb = p_ev;
-		if (mb.is_valid() && mb->get_button_index() == BUTTON_LEFT && mb->is_pressed()) {
+		const Ref<InputEventMouseMotion> mm = p_ev;
+
+		if (mm.is_valid()) {
 			for (int i = 0; i < flag_rects.size(); i++) {
-				if (flag_rects[i].has_point(mb->get_position())) {
-					//toggle
-					if (value & (1 << i)) {
-						value &= ~(1 << i);
-					} else {
-						value |= (1 << i);
-					}
-					emit_signal("flag_changed", value);
+				if (flag_rects[i].has_point(mm->get_position())) {
+					// Used to highlight the hovered flag in the layers grid.
+					hovered_index = i;
 					update();
+					break;
 				}
 			}
 		}
-	}
 
-	void _notification(int p_what) {
-		if (p_what == NOTIFICATION_DRAW) {
-			Rect2 rect;
-			rect.size = get_size();
-			flag_rects.clear();
+		const Ref<InputEventMouseButton> mb = p_ev;
 
-			int bsize = (rect.size.height * 80 / 100) / 2;
+		if (mb.is_valid() && mb->get_button_index() == BUTTON_LEFT && mb->is_pressed()) {
+			// Toggle the flag.
+			// We base our choice on the hovered flag, so that it always matches the hovered flag.
+			if (value & (1 << hovered_index)) {
+				value &= ~(1 << hovered_index);
+			} else {
+				value |= (1 << hovered_index);
+			}
 
-			int h = bsize * 2 + 1;
-			int vofs = (rect.size.height - h) / 2;
+			emit_signal("flag_changed", value);
+			update();
+		}
+	}
 
-			Color color = get_theme_color("highlight_color", "Editor");
-			for (int i = 0; i < 2; i++) {
-				Point2 ofs(4, vofs);
-				if (i == 1) {
-					ofs.y += bsize + 1;
-				}
+	void _notification(int p_what) {
+		switch (p_what) {
+			case NOTIFICATION_DRAW: {
+				Rect2 rect;
+				rect.size = get_size();
+				flag_rects.clear();
+
+				const int bsize = (rect.size.height * 80 / 100) / 2;
+				const int h = bsize * 2 + 1;
+				const int vofs = (rect.size.height - h) / 2;
+
+				Color color = get_theme_color("highlight_color", "Editor");
+				for (int i = 0; i < 2; i++) {
+					Point2 ofs(4, vofs);
+					if (i == 1)
+						ofs.y += bsize + 1;
+
+					ofs += rect.position;
+					for (int j = 0; j < 10; j++) {
+						Point2 o = ofs + Point2(j * (bsize + 1), 0);
+						if (j >= 5)
+							o.x += 1;
+
+						const int idx = i * 10 + j;
+						const bool on = value & (1 << idx);
+						Rect2 rect2 = Rect2(o, Size2(bsize, bsize));
+
+						color.a = on ? 0.6 : 0.2;
+						if (idx == hovered_index) {
+							// Add visual feedback when hovering a flag.
+							color.a += 0.15;
+						}
 
-				ofs += rect.position;
-				for (int j = 0; j < 10; j++) {
-					Point2 o = ofs + Point2(j * (bsize + 1), 0);
-					if (j >= 5) {
-						o.x += 1;
+						draw_rect(rect2, color);
+						flag_rects.push_back(rect2);
 					}
-
-					uint32_t idx = i * 10 + j;
-					bool on = value & (1 << idx);
-					Rect2 rect2 = Rect2(o, Size2(bsize, bsize));
-					color.a = on ? 0.6 : 0.2;
-					draw_rect(rect2, color);
-					flag_rects.push_back(rect2);
 				}
-			}
+			} break;
+			case NOTIFICATION_MOUSE_EXIT: {
+				hovered_index = -1;
+				update();
+			} break;
+			default:
+				break;
 		}
 	}
 
@@ -661,6 +685,7 @@ public:
 
 	EditorPropertyLayersGrid() {
 		value = 0;
+		hovered_index = -1; // Nothing is hovered.
 	}
 };
 void EditorPropertyLayers::_grid_changed(uint32_t p_grid) {
@@ -752,7 +777,7 @@ EditorPropertyLayers::EditorPropertyLayers() {
 	hb->add_child(grid);
 	button = memnew(Button);
 	button->set_toggle_mode(true);
-	button->set_text("..");
+	button->set_text("...");
 	button->connect("pressed", callable_mp(this, &EditorPropertyLayers::_button_pressed));
 	hb->add_child(button);
 	set_bottom_editor(hb);