Improve StyleBox preview

* Show checkerboard on background.
* Add margins.
* Show Ninepatch lines (toggleable).
* Move the region to its own section so it does not pollute.
This commit is contained in:
reduz 2022-05-23 23:17:12 +02:00
parent 3bee0689bc
commit b4c6900123
5 changed files with 74 additions and 7 deletions

View File

@ -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>

After

Width:  |  Height:  |  Size: 993 B

View File

@ -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>

After

Width:  |  Height:  |  Size: 978 B

View File

@ -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() {

View File

@ -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();

View File

@ -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);