Merge pull request #61337 from reduz/improve-stylebox-preview

Improve StyleBox preview

editor/icons/StyleBoxGridInvisible.svg

@@ -0,0 +1 @@
+<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>

editor/icons/StyleBoxGridVisible.svg

@@ -0,0 +1 @@
+<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;fill-opacity:1;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:1;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>

editor/plugins/style_box_editor_plugin.cpp

@@ -32,6 +32,13 @@
 
 #include "editor/editor_scale.h"
 
+bool StyleBoxPreview::grid_preview_enabled = true;
+
+void StyleBoxPreview::_grid_preview_toggled(bool p_active) {
+	grid_preview_enabled = p_active;
+	preview->update();
+}
+
 bool EditorInspectorPluginStyleBox::can_handle(Object *p_object) {
 	return Object::cast_to<StyleBox>(p_object) != nullptr;
 }
@@ -53,6 +60,8 @@ void StyleBoxPreview::edit(const Ref<StyleBox> &p_stylebox) {
 		preview->add_theme_style_override("panel", stylebox);
 		stylebox->connect("changed", callable_mp(this, &StyleBoxPreview::_sb_changed));
 	}
+	Ref<StyleBoxTexture> sbt = p_stylebox;
+	grid_preview->set_visible(sbt.is_valid());
 	_sb_changed();
 }
 
@@ -60,9 +69,31 @@ void StyleBoxPreview::_sb_changed() {
 	preview->update();
 }
 
+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_normal_texture(get_theme_icon(SNAME("StyleBoxGridInvisible"), SNAME("EditorIcons")));
+			grid_preview->set_pressed_texture(get_theme_icon(SNAME("StyleBoxGridVisible"), SNAME("EditorIcons")));
+			grid_preview->set_hover_texture(get_theme_icon(SNAME("StyleBoxGridVisible"), SNAME("EditorIcons")));
+			checkerboard->set_texture(get_theme_icon(SNAME("Checkerboard"), SNAME("EditorIcons")));
+		} 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;
 
 		// Re-adjust preview panel to fit all drawn content
 		Rect2 draw_rect = stylebox->get_draw_rect(preview_rect);
@@ -70,6 +101,21 @@ void StyleBoxPreview::_redraw() {
 		preview_rect.position -= draw_rect.position - preview_rect.position;
 
 		preview->draw_style_box(stylebox, preview_rect);
+
+		Ref<StyleBoxTexture> sbt = stylebox;
+		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);
+			}
+		}
 	}
 }
 
@@ -77,11 +123,23 @@ 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_custom_minimum_size(Size2(0, 150 * EDSCALE));
 	preview->set_clip_contents(true);
 	preview->connect("draw", callable_mp(this, &StyleBoxPreview::_redraw));
-	add_margin_child(TTR("Preview:"), preview);
+	checkerboard->add_child(preview);
+	preview->set_anchors_and_offsets_preset(PRESET_WIDE);
+
+	add_margin_child(TTR("Preview:"), checkerboard);
+	grid_preview = memnew(TextureButton);
+	preview->add_child(grid_preview);
+	grid_preview->set_toggle_mode(true);
+	grid_preview->connect("toggled", callable_mp(this, &StyleBoxPreview::_grid_preview_toggled));
+	grid_preview->set_pressed(grid_preview_enabled);
 }
 
 StyleBoxEditorPlugin::StyleBoxEditorPlugin() {

editor/plugins/style_box_editor_plugin.h

@@ -40,11 +40,16 @@
 class StyleBoxPreview : public VBoxContainer {
 	GDCLASS(StyleBoxPreview, VBoxContainer);
 
+	TextureRect *checkerboard = nullptr;
+	TextureButton *grid_preview = nullptr;
 	Control *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();

scene/resources/style_box.cpp

@@ -122,7 +122,7 @@ void StyleBox::_bind_methods() {
 
 	ClassDB::bind_method(D_METHOD("draw", "canvas_item", "rect"), &StyleBox::draw);
 
-	ADD_GROUP("Content Margin", "content_margin_");
+	ADD_GROUP("Content Margins", "content_margin_");
 	ADD_PROPERTYI(PropertyInfo(Variant::FLOAT, "content_margin_left", PROPERTY_HINT_RANGE, "-1,2048,1"), "set_default_margin", "get_default_margin", SIDE_LEFT);
 	ADD_PROPERTYI(PropertyInfo(Variant::FLOAT, "content_margin_top", PROPERTY_HINT_RANGE, "-1,2048,1"), "set_default_margin", "get_default_margin", SIDE_TOP);
 	ADD_PROPERTYI(PropertyInfo(Variant::FLOAT, "content_margin_right", PROPERTY_HINT_RANGE, "-1,2048,1"), "set_default_margin", "get_default_margin", SIDE_RIGHT);
@@ -315,15 +315,14 @@ void StyleBoxTexture::_bind_methods() {
 	ClassDB::bind_method(D_METHOD("get_v_axis_stretch_mode"), &StyleBoxTexture::get_v_axis_stretch_mode);
 
 	ADD_PROPERTY(PropertyInfo(Variant::OBJECT, "texture", PROPERTY_HINT_RESOURCE_TYPE, "Texture2D"), "set_texture", "get_texture");
-	ADD_PROPERTY(PropertyInfo(Variant::RECT2, "region_rect"), "set_region_rect", "get_region_rect");
 
-	ADD_GROUP("Margin", "margin_");
+	ADD_GROUP("Margins", "margin_");
 	ADD_PROPERTYI(PropertyInfo(Variant::FLOAT, "margin_left", PROPERTY_HINT_RANGE, "0,2048,1"), "set_margin_size", "get_margin_size", SIDE_LEFT);
 	ADD_PROPERTYI(PropertyInfo(Variant::FLOAT, "margin_top", PROPERTY_HINT_RANGE, "0,2048,1"), "set_margin_size", "get_margin_size", SIDE_TOP);
 	ADD_PROPERTYI(PropertyInfo(Variant::FLOAT, "margin_right", PROPERTY_HINT_RANGE, "0,2048,1"), "set_margin_size", "get_margin_size", SIDE_RIGHT);
 	ADD_PROPERTYI(PropertyInfo(Variant::FLOAT, "margin_bottom", PROPERTY_HINT_RANGE, "0,2048,1"), "set_margin_size", "get_margin_size", SIDE_BOTTOM);
 
-	ADD_GROUP("Expand Margin", "expand_margin_");
+	ADD_GROUP("Expand Margins", "expand_margin_");
 	ADD_PROPERTYI(PropertyInfo(Variant::FLOAT, "expand_margin_left", PROPERTY_HINT_RANGE, "0,2048,1"), "set_expand_margin_size", "get_expand_margin_size", SIDE_LEFT);
 	ADD_PROPERTYI(PropertyInfo(Variant::FLOAT, "expand_margin_top", PROPERTY_HINT_RANGE, "0,2048,1"), "set_expand_margin_size", "get_expand_margin_size", SIDE_TOP);
 	ADD_PROPERTYI(PropertyInfo(Variant::FLOAT, "expand_margin_right", PROPERTY_HINT_RANGE, "0,2048,1"), "set_expand_margin_size", "get_expand_margin_size", SIDE_RIGHT);
@@ -333,6 +332,9 @@ void StyleBoxTexture::_bind_methods() {
 	ADD_PROPERTY(PropertyInfo(Variant::INT, "axis_stretch_horizontal", PROPERTY_HINT_ENUM, "Stretch,Tile,Tile Fit"), "set_h_axis_stretch_mode", "get_h_axis_stretch_mode");
 	ADD_PROPERTY(PropertyInfo(Variant::INT, "axis_stretch_vertical", PROPERTY_HINT_ENUM, "Stretch,Tile,Tile Fit"), "set_v_axis_stretch_mode", "get_v_axis_stretch_mode");
 
+	ADD_GROUP("Sub-Region", "region_");
+	ADD_PROPERTY(PropertyInfo(Variant::RECT2, "region_rect"), "set_region_rect", "get_region_rect");
+
 	ADD_GROUP("Modulate", "modulate_");
 	ADD_PROPERTY(PropertyInfo(Variant::COLOR, "modulate_color"), "set_modulate", "get_modulate");
 	ADD_PROPERTY(PropertyInfo(Variant::BOOL, "draw_center"), "set_draw_center", "is_draw_center_enabled");
@@ -921,7 +923,7 @@ void StyleBoxFlat::_bind_methods() {
 
 	ADD_PROPERTY(PropertyInfo(Variant::INT, "corner_detail", PROPERTY_HINT_RANGE, "1,20,1"), "set_corner_detail", "get_corner_detail");
 
-	ADD_GROUP("Expand Margin", "expand_margin_");
+	ADD_GROUP("Expand Margins", "expand_margin_");
 	ADD_PROPERTYI(PropertyInfo(Variant::FLOAT, "expand_margin_left", PROPERTY_HINT_RANGE, "0,2048,1"), "set_expand_margin", "get_expand_margin", SIDE_LEFT);
 	ADD_PROPERTYI(PropertyInfo(Variant::FLOAT, "expand_margin_top", PROPERTY_HINT_RANGE, "0,2048,1"), "set_expand_margin", "get_expand_margin", SIDE_TOP);
 	ADD_PROPERTYI(PropertyInfo(Variant::FLOAT, "expand_margin_right", PROPERTY_HINT_RANGE, "0,2048,1"), "set_expand_margin", "get_expand_margin", SIDE_RIGHT);