Merge pull request #77418 from MewPurPur/unify-stylebox-grid-textures

Improve StyleBox preview a little

5 files changed, 69 insertions, 85 deletions

diff --git a/editor/icons/StyleBoxGrid.svg b/editor/icons/StyleBoxGrid.svg
new file mode 100644
index 0000000000..9702421881
--- /dev/null
+++ b/editor/icons/StyleBoxGrid.svg
@@ -0,0 +1 @@
+<svg height="16" width="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill="#000b" d="M0 0h16v16H0z"/><path fill="none" stroke-width="2" stroke="#e0e0e0" d="M5 1v14m6 0V1m4 4H1m0 6h14"/></svg>
diff --git a/editor/icons/StyleBoxGridInvisible.svg b/editor/icons/StyleBoxGridInvisible.svg
deleted file mode 100644
index 88f0585bfe..0000000000
--- a/editor/icons/StyleBoxGridInvisible.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg"><rect style="fill:#000;stroke-width:6.081;stroke-linejoin:round;stroke-miterlimit:5;fill-opacity:.75294119" width="16.032" height="16.025" x=".023" y="-.006" rx="0" ry="1.188"/><path style="fill:#656565;fill-opacity:.50196081;stroke-width:6.081;stroke-linejoin:round;stroke-miterlimit:5" d="M11.92 1.37v2.835h.549V1.37zm-5.7.017v2.818h.55V1.387zm8.776 3.18v1.595H11.92v3.57h.549V6.523h3.076V4.566ZM1.599 6.161v.361h2.717v-.36Zm4.621 0v3.57h.55V6.523h3.21v-.36Zm8.833 3.932v1.601H11.92v3.336h-1.39v.362h1.939v-3.335H15.6v-1.963ZM1.63 11.695v.362h2.685v-.362zm4.59 0v3.328H4.864v.362h1.904v-3.328H9.98v-.362z"/><path style="fill:#e0e0e0;fill-opacity:.50196081;stroke-width:6.081;stroke-linejoin:round;stroke-miterlimit:5" d="M9.98 1.008v3.197H6.22v-3.18H4.316v3.18H1.051v1.957h3.265v3.57H1.082v1.963h3.234v3.328H6.22v-3.327h3.76v3.333h1.94v-3.334h3.133V9.733H11.92v-3.57h3.076V4.204H11.92V1.008zM6.22 6.162h3.76v3.57H6.22Z"/></svg>
diff --git a/editor/icons/StyleBoxGridVisible.svg b/editor/icons/StyleBoxGridVisible.svg
deleted file mode 100644
index b13ee1023a..0000000000
--- a/editor/icons/StyleBoxGridVisible.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg"><rect style="fill:#000;stroke-width:6.081;stroke-linejoin:round;stroke-miterlimit:5;fill-opacity:.75294119" width="16.131" height="16.131" x="-.008" y="-.006" rx="0" ry="1.188"/><path style="fill:#656565;stroke-width:6.081;stroke-linejoin:round;stroke-miterlimit:5" d="M11.92 1.37v2.835h.549V1.37zm-5.7.017v2.818h.55V1.387zm8.776 3.18v1.595H11.92v3.57h.549V6.523h3.076V4.566ZM1.599 6.161v.361h2.717v-.36Zm4.621 0v3.57h.55V6.523h3.21v-.36Zm8.833 3.932v1.601H11.92v3.336h-1.39v.362h1.939v-3.335H15.6v-1.963ZM1.63 11.695v.362h2.685v-.362zm4.59 0v3.328H4.864v.362h1.904v-3.328H9.98v-.362z"/><path style="fill:#e0e0e0;stroke-width:6.081;stroke-linejoin:round;stroke-miterlimit:5" d="M9.98 1.008v3.197H6.22v-3.18H4.316v3.18H1.051v1.957h3.265v3.57H1.082v1.963h3.234v3.328H6.22v-3.327h3.76v3.333h1.94v-3.334h3.133V9.733H11.92v-3.57h3.076V4.204H11.92V1.008zM6.22 6.162h3.76v3.57H6.22Z"/></svg>
diff --git a/editor/plugins/style_box_editor_plugin.cpp b/editor/plugins/style_box_editor_plugin.cpp
index 37fec97c37..c126aec008 100644
--- a/editor/plugins/style_box_editor_plugin.cpp
+++ b/editor/plugins/style_box_editor_plugin.cpp
@@ -31,116 +31,105 @@
 #include "style_box_editor_plugin.h"
 
 #include "editor/editor_scale.h"
-#include "scene/gui/texture_button.h"
+#include "scene/gui/button.h"
 
 bool StyleBoxPreview::grid_preview_enabled = true;
 
 void StyleBoxPreview::_grid_preview_toggled(bool p_active) {
 	grid_preview_enabled = p_active;
-	preview->queue_redraw();
-}
-
-bool EditorInspectorPluginStyleBox::can_handle(Object *p_object) {
-	return Object::cast_to<StyleBox>(p_object) != nullptr;
-}
-
-void EditorInspectorPluginStyleBox::parse_begin(Object *p_object) {
-	Ref<StyleBox> sb = Ref<StyleBox>(Object::cast_to<StyleBox>(p_object));
-
-	StyleBoxPreview *preview = memnew(StyleBoxPreview);
-	preview->edit(sb);
-	add_custom_control(preview);
+	queue_redraw();
 }
 
 void StyleBoxPreview::edit(const Ref<StyleBox> &p_stylebox) {
 	if (stylebox.is_valid()) {
-		stylebox->disconnect("changed", callable_mp(this, &StyleBoxPreview::_sb_changed));
+		stylebox->disconnect("changed", callable_mp((CanvasItem *)this, &CanvasItem::queue_redraw));
 	}
 	stylebox = p_stylebox;
-	if (p_stylebox.is_valid()) {
-		preview->add_theme_style_override("panel", stylebox);
-		stylebox->connect("changed", callable_mp(this, &StyleBoxPreview::_sb_changed));
+	if (stylebox.is_valid()) {
+		stylebox->connect("changed", callable_mp((CanvasItem *)this, &CanvasItem::queue_redraw));
 	}
-	Ref<StyleBoxTexture> sbt = p_stylebox;
+	Ref<StyleBoxTexture> sbt = stylebox;
 	grid_preview->set_visible(sbt.is_valid());
-	_sb_changed();
-}
-
-void StyleBoxPreview::_sb_changed() {
-	preview->queue_redraw();
+	queue_redraw();
 }
 
 void StyleBoxPreview::_notification(int p_what) {
 	switch (p_what) {
-		case NOTIFICATION_ENTER_TREE:
 		case NOTIFICATION_THEME_CHANGED: {
-			if (!is_inside_tree()) {
-				// TODO: This is a workaround because `NOTIFICATION_THEME_CHANGED`
-				// is getting called for some reason when the `TexturePreview` is
-				// getting destroyed, which causes `get_theme_font()` to return `nullptr`.
-				// See https://github.com/godotengine/godot/issues/50743.
-				break;
-			}
-			grid_preview->set_texture_normal(get_theme_icon(SNAME("StyleBoxGridInvisible"), SNAME("EditorIcons")));
-			grid_preview->set_texture_pressed(get_theme_icon(SNAME("StyleBoxGridVisible"), SNAME("EditorIcons")));
-			grid_preview->set_texture_hover(get_theme_icon(SNAME("StyleBoxGridVisible"), SNAME("EditorIcons")));
-			checkerboard->set_texture(get_theme_icon(SNAME("Checkerboard"), SNAME("EditorIcons")));
+			set_texture(get_theme_icon(SNAME("Checkerboard"), SNAME("EditorIcons")));
+			grid_preview->set_icon(get_theme_icon(SNAME("StyleBoxGrid"), SNAME("EditorIcons")));
+		} break;
+		case NOTIFICATION_DRAW: {
+			_redraw();
 		} break;
 	}
 }
 
 void StyleBoxPreview::_redraw() {
 	if (stylebox.is_valid()) {
-		Ref<Texture2D> grid_texture_disabled = get_theme_icon(SNAME("StyleBoxGridInvisible"), SNAME("EditorIcons"));
-		Rect2 preview_rect = preview->get_rect();
-		preview_rect.position += grid_texture_disabled->get_size();
-		preview_rect.size -= grid_texture_disabled->get_size() * 2;
+		float grid_button_width = get_theme_icon(SNAME("StyleBoxGrid"), SNAME("EditorIcons"))->get_size().x;
+		Rect2 preview_rect = get_rect();
+		preview_rect = preview_rect.grow(-grid_button_width);
 
-		// Re-adjust preview panel to fit all drawn content
-		Rect2 draw_rect = stylebox->get_draw_rect(preview_rect);
-		preview_rect.size -= draw_rect.size - preview_rect.size;
-		preview_rect.position -= draw_rect.position - preview_rect.position;
+		// Re-adjust preview panel to fit all drawn content.
+		Rect2 drawing_rect = stylebox->get_draw_rect(preview_rect);
+		preview_rect.size -= drawing_rect.size - preview_rect.size;
+		preview_rect.position -= drawing_rect.position - preview_rect.position;
 
-		preview->draw_style_box(stylebox, preview_rect);
+		draw_style_box(stylebox, preview_rect);
 
 		Ref<StyleBoxTexture> sbt = stylebox;
+		// Draw the "grid". Use white lines, as well as subtle black lines to ensure contrast.
 		if (sbt.is_valid() && grid_preview->is_pressed()) {
-			for (int i = 0; i < 2; i++) {
-				Color c = i == 1 ? Color(1, 1, 1, 0.8) : Color(0, 0, 0, 0.4);
-				int x = draw_rect.position.x + sbt->get_margin(SIDE_LEFT) + (1 - i);
-				preview->draw_line(Point2(x, 0), Point2(x, preview->get_size().height), c);
-				int x2 = draw_rect.position.x + draw_rect.size.width - sbt->get_margin(SIDE_RIGHT) + (1 - i);
-				preview->draw_line(Point2(x2, 0), Point2(x2, preview->get_size().height), c);
-				int y = draw_rect.position.y + sbt->get_margin(SIDE_TOP) + (1 - i);
-				preview->draw_line(Point2(0, y), Point2(preview->get_size().width, y), c);
-				int y2 = draw_rect.position.y + draw_rect.size.height - sbt->get_margin(SIDE_BOTTOM) + (1 - i);
-				preview->draw_line(Point2(0, y2), Point2(preview->get_size().width, y2), c);
-			}
+			const Color dark_color = Color(0, 0, 0, 0.4);
+			const Color bright_color = Color(1, 1, 1, 0.8);
+			int x_left = drawing_rect.position.x + sbt->get_margin(SIDE_LEFT);
+			int x_right = drawing_rect.position.x + drawing_rect.size.width - sbt->get_margin(SIDE_RIGHT);
+			int y_top = drawing_rect.position.y + sbt->get_margin(SIDE_TOP);
+			int y_bottom = drawing_rect.position.y + drawing_rect.size.height - sbt->get_margin(SIDE_BOTTOM);
+
+			draw_line(Point2(x_left + 2, 0), Point2(x_left + 2, get_size().height), dark_color);
+			draw_line(Point2(x_right + 1, 0), Point2(x_right + 1, get_size().height), dark_color);
+			draw_line(Point2(0, y_top + 2), Point2(get_size().width, y_top + 2), dark_color);
+			draw_line(Point2(0, y_bottom + 1), Point2(get_size().width, y_bottom + 1), dark_color);
+
+			draw_line(Point2(x_left + 1, 0), Point2(x_left + 1, get_size().height), bright_color);
+			draw_line(Point2(x_right, 0), Point2(x_right, get_size().height), bright_color);
+			draw_line(Point2(0, y_top + 1), Point2(get_size().width, y_top + 1), bright_color);
+			draw_line(Point2(0, y_bottom), Point2(get_size().width, y_bottom), bright_color);
 		}
 	}
 }
 
-void StyleBoxPreview::_bind_methods() {
-}
-
 StyleBoxPreview::StyleBoxPreview() {
-	checkerboard = memnew(TextureRect);
-	checkerboard->set_stretch_mode(TextureRect::STRETCH_TILE);
-	checkerboard->set_texture_repeat(CanvasItem::TEXTURE_REPEAT_ENABLED);
-	checkerboard->set_custom_minimum_size(Size2(0.0, 150.0) * EDSCALE);
-
-	preview = memnew(Control);
-	preview->set_clip_contents(true);
-	preview->connect("draw", callable_mp(this, &StyleBoxPreview::_redraw));
-	checkerboard->add_child(preview);
-	preview->set_anchors_and_offsets_preset(PRESET_FULL_RECT);
-
-	add_margin_child(TTR("Preview:"), checkerboard);
-	grid_preview = memnew(TextureButton);
-	preview->add_child(grid_preview);
+	set_clip_contents(true);
+	set_custom_minimum_size(Size2(0, 150) * EDSCALE);
+	set_stretch_mode(TextureRect::STRETCH_TILE);
+	set_texture_repeat(CanvasItem::TEXTURE_REPEAT_ENABLED);
+	set_anchors_and_offsets_preset(PRESET_FULL_RECT);
+
+	grid_preview = memnew(Button);
 	grid_preview->set_toggle_mode(true);
 	grid_preview->connect("toggled", callable_mp(this, &StyleBoxPreview::_grid_preview_toggled));
 	grid_preview->set_pressed(grid_preview_enabled);
+	grid_preview->set_flat(true);
+	grid_preview->add_theme_style_override("normal", memnew(StyleBoxEmpty));
+	grid_preview->add_theme_style_override("hover", memnew(StyleBoxEmpty));
+	grid_preview->add_theme_style_override("focus", memnew(StyleBoxEmpty));
+	grid_preview->add_theme_style_override("pressed", memnew(StyleBoxEmpty));
+	add_child(grid_preview);
+}
+
+bool EditorInspectorPluginStyleBox::can_handle(Object *p_object) {
+	return Object::cast_to<StyleBox>(p_object) != nullptr;
+}
+
+void EditorInspectorPluginStyleBox::parse_begin(Object *p_object) {
+	Ref<StyleBox> sb = Ref<StyleBox>(Object::cast_to<StyleBox>(p_object));
+
+	StyleBoxPreview *preview = memnew(StyleBoxPreview);
+	preview->edit(sb);
+	add_custom_control(preview);
 }
 
 StyleBoxEditorPlugin::StyleBoxEditorPlugin() {
diff --git a/editor/plugins/style_box_editor_plugin.h b/editor/plugins/style_box_editor_plugin.h
index d589bd9fe2..824f8db8e4 100644
--- a/editor/plugins/style_box_editor_plugin.h
+++ b/editor/plugins/style_box_editor_plugin.h
@@ -33,28 +33,24 @@
 
 #include "editor/editor_inspector.h"
 #include "editor/editor_plugin.h"
-#include "scene/gui/option_button.h"
 #include "scene/gui/texture_rect.h"
-#include "scene/resources/style_box.h"
 
-class TextureButton;
+class Button;
+class StyleBox;
 
-class StyleBoxPreview : public VBoxContainer {
-	GDCLASS(StyleBoxPreview, VBoxContainer);
+class StyleBoxPreview : public TextureRect {
+	GDCLASS(StyleBoxPreview, TextureRect);
 
-	TextureRect *checkerboard = nullptr;
-	TextureButton *grid_preview = nullptr;
-	Control *preview = nullptr;
+	Button *grid_preview = nullptr;
 	Ref<StyleBox> stylebox;
 
 	void _sb_changed();
 	void _redraw();
-	void _notification(int p_what);
 	static bool grid_preview_enabled;
 	void _grid_preview_toggled(bool p_active);
 
 protected:
-	static void _bind_methods();
+	void _notification(int p_what);
 
 public:
 	void edit(const Ref<StyleBox> &p_stylebox);