p/fiv
1
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

Improve browser item rendition, use CSS

Browse Source 
It's not fully hardcoded anymore, and the border is better adjustable.

Item spacing and the fade constant can't be /meaningfully/ put in CSS.
This commit is contained in:
Přemysl Eric Janouch 2021-11-10 17:58:27 +01:00
parent 77f0e142c2
commit fc4eb97218
Signed by: p
GPG Key ID: A0420B94F92B9493
2 changed files with 121 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

177
fastiv-browser.c
View File

@ -35,6 +35,8 @@
// │ s p a c i n g
// │ ╭┄┄┄┄┄┄┄┄┄┄┄┄╮ ╭┄┄┄┄┄┄┄┄┄┄┄┄
//
// The glow is actually a glowing margin, the border is rendered in two parts.
//
struct _FastivBrowser {
GtkWidget parent_instance;
@ -44,6 +46,8 @@ struct _FastivBrowser {
int selected;
cairo_surface_t *glow; ///< CAIRO_FORMAT_A8 mask
int item_border_x; ///< L/R .item margin + border
int item_border_y; ///< T/B .item margin + border
};
typedef struct entry Entry;
@ -57,9 +61,6 @@ static const double g_permitted_width_multiplier = 2;
// TODO(p): Make a property for this.
static const int g_item_spacing = 1;
// All around, from the primary colour to transparency.
static const int g_item_border = 10;
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
struct entry {
@ -84,8 +85,8 @@ struct item {
struct row {
Item *items; ///< Ends with a NULL entry
int x_offset; ///< Start position including padding
int y_offset; ///< Start position including padding
int x_offset; ///< Start position outside borders
int y_offset; ///< Start position inside borders
};
static void
@ -102,7 +103,7 @@ append_row(FastivBrowser *self, int *y, int x, GArray *items_array)
if (self->layouted_rows->len)
*y += g_item_spacing;
*y += g_item_border;
*y += self->item_border_y;
g_array_append_val(self->layouted_rows, ((Row) {
.items = g_array_steal(items_array, NULL),
.x_offset = x,
@ -111,17 +112,17 @@ append_row(FastivBrowser *self, int *y, int x, GArray *items_array)
// Not trying to pack them vertically, but this would be the place to do it.
*y += g_row_height;
*y += g_item_border;
*y += self->item_border_y;
}
static int
relayout(FastivBrowser *self, int width)
{
GtkWidget *widget = GTK_WIDGET(self);
GtkStyleContext *context = gtk_widget_get_style_context(widget);
GtkStyleContext *style = gtk_widget_get_style_context(widget);
GtkBorder padding = {};
gtk_style_context_get_padding(context, GTK_STATE_FLAG_NORMAL, &padding);
gtk_style_context_get_padding(style, GTK_STATE_FLAG_NORMAL, &padding);
int available_width = width - padding.left - padding.right;
g_array_set_size(self->layouted_rows, 0);
@ -133,8 +134,8 @@ relayout(FastivBrowser *self, int width)
if (!entry->thumbnail)
continue;
int width =
cairo_image_surface_get_width(entry->thumbnail) + 2 * g_item_border;
int width = cairo_image_surface_get_width(entry->thumbnail) +
2 * self->item_border_x;
if (!items->len) {
// Just insert it, whether or not there's any space.
} else if (x + g_item_spacing + width <= available_width) {
@ -145,8 +146,8 @@ relayout(FastivBrowser *self, int width)
x = 0;
}
g_array_append_val(
items, ((Item){.entry = entry, .x_offset = x + g_item_border}));
g_array_append_val(items,
((Item) {.entry = entry, .x_offset = x + self->item_border_x}));
x += width;
}
if (items->len) {
@ -159,22 +160,23 @@ relayout(FastivBrowser *self, int width)
}
static void
draw_item_border(FastivBrowser *self, cairo_t *cr, int width, int height)
draw_outer_border(FastivBrowser *self, cairo_t *cr, int width, int height)
{
cairo_set_source_rgb(cr, .75, .75, .75);
int offset_x = cairo_image_surface_get_width(self->glow);
int offset_y = cairo_image_surface_get_height(self->glow);
cairo_pattern_t *mask = cairo_pattern_create_for_surface(self->glow);
cairo_matrix_t matrix;
cairo_pattern_set_extend(mask, CAIRO_EXTEND_PAD);
cairo_save(cr);
cairo_translate(cr, -g_item_border, -g_item_border);
cairo_rectangle(cr, 0, 0, g_item_border + width, g_item_border + height);
cairo_translate(cr, -offset_x, -offset_y);
cairo_rectangle(cr, 0, 0, offset_x + width, offset_y + height);
cairo_clip(cr);
cairo_mask(cr, mask);
cairo_restore(cr);
cairo_save(cr);
cairo_translate(cr, width + g_item_border, height + g_item_border);
cairo_rectangle(cr, 0, 0, -g_item_border - width, -g_item_border - height);
cairo_translate(cr, width + offset_x, height + offset_y);
cairo_rectangle(cr, 0, 0, -offset_x - width, -offset_y - height);
cairo_clip(cr);
cairo_scale(cr, -1, -1);
cairo_mask(cr, mask);
@ -182,21 +184,14 @@ draw_item_border(FastivBrowser *self, cairo_t *cr, int width, int height)
cairo_pattern_set_extend(mask, CAIRO_EXTEND_NONE);
cairo_matrix_init_scale(&matrix, -1, 1);
cairo_matrix_translate(&matrix, -width - g_item_border, g_item_border);
cairo_matrix_translate(&matrix, -width - offset_x, offset_y);
cairo_pattern_set_matrix(mask, &matrix);
cairo_mask(cr, mask);
cairo_matrix_init_scale(&matrix, 1, -1);
cairo_matrix_translate(&matrix, g_item_border, -height - g_item_border);
cairo_matrix_translate(&matrix, offset_x, -height - offset_y);
cairo_pattern_set_matrix(mask, &matrix);
cairo_mask(cr, mask);
// TODO(p): Distinguish between an inner and outer border,
// don't override part of the glow.
cairo_rectangle(cr, -.5, -.5, width + 1, height + 1);
cairo_set_source_rgba(cr, 1, 1, 1, 0.75);
cairo_set_line_width(cr, 1);
cairo_stroke(cr);
cairo_pattern_destroy(mask);
}
@ -233,22 +228,40 @@ entry_at(FastivBrowser *self, int x, int y)
static void
draw_row(FastivBrowser *self, cairo_t *cr, const Row *row)
{
for (Item *item = row->items; item->entry; item++) {
GdkRectangle extents = item_extents(item, row);
GtkStyleContext *style = gtk_widget_get_style_context(GTK_WIDGET(self));
gtk_style_context_save(style);
gtk_style_context_add_class(style, "item");
GdkRGBA glow_color = {};
GtkStateFlags state = gtk_style_context_get_state (style);
gtk_style_context_get_color(style, state, &glow_color);
GtkBorder border;
gtk_style_context_get_border(style, state, &border);
for (Item *item = row->items; item->entry; item++) {
cairo_save(cr);
cairo_translate(cr, extents.x, extents.y);
draw_item_border(self, cr, extents.width, extents.height);
GdkRectangle extents = item_extents(item, row);
cairo_translate(cr, extents.x - border.left, extents.y - border.top);
gdk_cairo_set_source_rgba(cr, &glow_color);
draw_outer_border(self, cr,
border.left + extents.width + border.right,
border.top + extents.height + border.bottom);
// TODO(p): See if a mild checkerboard pattern would not look nice.
cairo_rectangle(cr, 0, 0, extents.width, extents.height);
cairo_set_source_rgb(cr, .25, .25, .25);
cairo_fill(cr);
gtk_render_background(
style, cr, border.left, border.top, extents.width, extents.height);
cairo_set_source_surface(cr, item->entry->thumbnail, 0, 0);
gtk_render_frame(style, cr, 0, 0,
border.left + extents.width + border.right,
border.top + extents.height + border.bottom);
cairo_set_source_surface(
cr, item->entry->thumbnail, border.left, border.top);
cairo_paint(cr);
cairo_restore(cr);
}
gtk_style_context_restore(style);
}
// --- Boilerplate -------------------------------------------------------------
@ -287,11 +300,13 @@ static void
fastiv_browser_get_preferred_width(
GtkWidget *widget, gint *minimum, gint *natural)
{
FastivBrowser *self = FASTIV_BROWSER(widget);
GtkStyleContext *style = gtk_widget_get_style_context(widget);
GtkBorder padding = {};
GtkStyleContext *context = gtk_widget_get_style_context(widget);
gtk_style_context_get_padding(context, GTK_STATE_FLAG_NORMAL, &padding);
gtk_style_context_get_padding(style, GTK_STATE_FLAG_NORMAL, &padding);
*minimum = *natural = g_permitted_width_multiplier * g_row_height +
padding.left + 2 * g_item_border + padding.right;
padding.left + 2 * self->item_border_x + padding.right;
}
static void
@ -361,9 +376,9 @@ fastiv_browser_draw(GtkWidget *widget, cairo_t *cr)
const Row *row = &g_array_index(self->layouted_rows, Row, i);
GdkRectangle extents = {
.x = 0,
.y = row->y_offset,
.y = row->y_offset - self->item_border_y,
.width = allocation.width,
.height = g_row_height + 2 * g_item_border,
.height = g_row_height + 2 * self->item_border_y,
};
if (!have_clip || gdk_rectangle_intersect(&clip, &extents, NULL))
draw_row(self, cr, row);
@ -387,6 +402,66 @@ fastiv_browser_button_press_event(GtkWidget *widget, GdkEventButton *event)
return TRUE;
}
static void
fastiv_browser_style_updated(GtkWidget *widget)
{
GTK_WIDGET_CLASS(fastiv_browser_parent_class)->style_updated(widget);
FastivBrowser *self = FASTIV_BROWSER(widget);
GtkStyleContext *style = gtk_widget_get_style_context(widget);
GtkBorder border = {}, margin = {};
// Using a pseudo-class, because GTK+ regions are deprecated.
gtk_style_context_save(style);
gtk_style_context_add_class(style, "item");
gtk_style_context_get_margin(style, GTK_STATE_FLAG_NORMAL, &margin);
gtk_style_context_get_border(style, GTK_STATE_FLAG_NORMAL, &border);
gtk_style_context_restore(style);
const int glow_w = (margin.left + margin.right) / 2;
const int glow_h = (margin.top + margin.bottom) / 2;
// Don't set different opposing sides, it will misrender, your problem.
// When the style of the class changes, this virtual method isn't invoked,
// so the update check is mildly pointless.
int item_border_x = glow_w + (border.left + border.right) / 2;
int item_border_y = glow_h + (border.top + border.bottom) / 2;
if (item_border_x != self->item_border_x ||
item_border_y != self->item_border_y) {
self->item_border_x = item_border_x;
self->item_border_y = item_border_y;
gtk_widget_queue_resize(widget);
}
if (self->glow)
cairo_surface_destroy(self->glow);
if (glow_w <= 0 || glow_h <= 0) {
self->glow = cairo_image_surface_create(CAIRO_FORMAT_A1, 0, 0);
return;
}
self->glow =
cairo_image_surface_create(CAIRO_FORMAT_A8, glow_w, glow_h);
unsigned char *data = cairo_image_surface_get_data(self->glow);
int stride = cairo_image_surface_get_stride(self->glow);
// Smooth out the curve, so that the edge of the glow isn't too jarring.
const double fade_factor = 1.5;
const int x_max = glow_w - 1;
const int y_max = glow_h - 1;
const double x_scale = 1. / MAX(1, x_max);
const double y_scale = 1. / MAX(1, y_max);
for (int y = 0; y <= y_max; y++)
for (int x = 0; x <= x_max; x++) {
const double xn = x_scale * (x_max - x);
const double yn = y_scale * (y_max - y);
double v = MIN(sqrt(xn * xn + yn * yn), 1);
data[y * stride + x] = round(pow(1 - v, fade_factor) * 255);
}
cairo_surface_mark_dirty(self->glow);
}
static void
fastiv_browser_class_init(FastivBrowserClass *klass)
{
@ -402,6 +477,7 @@ fastiv_browser_class_init(FastivBrowserClass *klass)
widget_class->draw = fastiv_browser_draw;
widget_class->size_allocate = fastiv_browser_size_allocate;
widget_class->button_press_event = fastiv_browser_button_press_event;
widget_class->style_updated = fastiv_browser_style_updated;
browser_signals[ITEM_ACTIVATED] =
g_signal_new("item-activated", G_TYPE_FROM_CLASS(klass), 0, 0,
@ -423,24 +499,7 @@ fastiv_browser_init(FastivBrowser *self)
g_array_set_clear_func(self->layouted_rows, (GDestroyNotify) row_free);
self->selected = -1;
self->glow = cairo_image_surface_create(
CAIRO_FORMAT_A8, g_item_border, g_item_border);
unsigned char *data = cairo_image_surface_get_data(self->glow);
int stride = cairo_image_surface_get_stride(self->glow);
// Smooth out the curve, so that the edge of the glow doesn't stand out
const double fade_factor = 1.5;
const int max = g_item_border - 1;
for (int y = 0; y <= max; y++)
for (int x = 0; x <= max; x++) {
int xn = max - x;
int yn = max - y;
double v = MIN(sqrt(xn * xn + yn * yn) / max, 1);
data[y * stride + x] = round(pow(1 - v, fade_factor) * 255);
}
cairo_surface_mark_dirty(self->glow);
self->glow = cairo_image_surface_create(CAIRO_FORMAT_A1, 0, 0);
}
static cairo_surface_t *

4
fastiv.c
View File

@ -336,7 +336,9 @@ main(int argc, char *argv[])
gtk_window_set_default_icon_name(PROJECT_NAME);
const char *style = "fastiv-view, fastiv-browser { background: #222; }"
"fastiv-browser { padding: 5px; }";
"fastiv-browser { padding: 5px; } fastiv-browser.item {"
"border: 1px solid rgba(255, 255, 255, 0.5); "
"margin: 10px; color: #000; background: #444; }";
GtkCssProvider *provider = gtk_css_provider_new();
gtk_css_provider_load_from_data(provider, style, strlen(style), NULL);
gtk_style_context_add_provider_for_screen(gdk_screen_get_default(),