widget-factory: Add an hdr image example

This uses the heif loader to show an image in
the 'color profile' notebook. The current image
isn't a very good HDR example, and should be
replaced by a more suitable image.

.gitlab-ci.yml

@@ -25,7 +25,7 @@ variables:
   BACKEND_FLAGS: "-Dx11-backend=true -Dwayland-backend=true -Dbroadway-backend=true"
   FEATURE_FLAGS: "-Dvulkan=enabled -Dcloudproviders=enabled"
   MESON_TEST_TIMEOUT_MULTIPLIER: 3
-  FEDORA_IMAGE: "registry.gitlab.gnome.org/gnome/gtk/fedora:v36"
+  FEDORA_IMAGE: "registry.gitlab.gnome.org/gnome/gtk/fedora:v37"
   FLATPAK_IMAGE: "registry.gitlab.gnome.org/gnome/gnome-runtime-images/gnome:master"
 
 .only-default:

.gitlab-ci/fedora.Dockerfile

@@ -42,6 +42,7 @@ RUN dnf -y install \
     iso-codes \
     itstool \
     json-glib-devel \
+    lcms2-devel \
     lcov \
     libasan \
     libattr-devel \
@@ -71,6 +72,7 @@ RUN dnf -y install \
     mesa-libEGL-devel \
     mesa-libGLES-devel \
     meson \
+    mutter \
     ninja-build \
     pango-devel \
     pcre-devel \

.gitlab-ci/test-msys2.sh

@@ -33,6 +33,10 @@ pacman --noconfirm -S --needed \
     mingw-w64-$MSYS2_ARCH-gst-plugins-bad-libs \
     mingw-w64-$MSYS2_ARCH-shared-mime-info \
     mingw-w64-$MSYS2_ARCH-python-gobject
+    mingw-w64-$MSYS2_ARCH-libpng \
+    mingw-w64-$MSYS2_ARCH-libjpeg-turbo \
+    mingw-w64-$MSYS2_ARCH-libtiff \
+    mingw-w64-$MSYS2_ARCH-lcms2
 
 mkdir -p _ccache
 export CCACHE_BASEDIR="$(pwd)"

NEWS

@@ -1,3 +1,153 @@
+Overview of Changes in 4.7.0, 07-05-2022
+========================================
+
+* GtkTextView:
+ - Reduce overdraws
+
+* GtkViewport:
+ - Default scroll-to-focus to TRUE
+
+* GtkText:
+ - Stop blinking when we lose focus
+
+* GtkSearchEntry:
+ - Make search delay configurable
+
+* GtkPopoverMenu:
+ - Fix RTL positioning of buttons
+
+* GtkLabel:
+ - Fix focus keynav with links
+
+* GtkFileChooser:
+ - Prevent undesirable completion popups
+ - Fix a corner case in save mode
+ - Keep the portal filechooser alive long enough
+
+* GtkCheckButton:
+ - Allow setting a custom child
+
+* GtkEditableLabel:
+ - Make the :editing property writable
+
+* GtkColumnView:
+ - Various optimizations to improve scrolling performance
+
+* GtkTreeStore:
+ - Allow populating tree stores from ui files
+
+* GtkBoxLayout:
+ - Avoid infinite loops
+
+* CSS:
+ - Optimize reordering within the same parent
+
+* Emoji:
+ - Update to CLDR v40 / Unicode 14
+ - Add more locales
+
+* Input:
+ - Add scroll unit handling
+ - Handle display changes in GtkIMMultiContext
+ - Always populate GDK_AXIS_X/Y in event history
+ - Don't crash for large compose tables
+
+* Accessibility:
+ - Fix a crash at start when orca is running
+
+* Theme:
+ - Refresh icons
+ - Fix selection in vertical spin buttons
+ - Fix selection in editable labels
+
+* gdk:
+ - Optimize pixel format conversions
+ - Use EGL_KHR_swap_buffers_with_damage for NVidia
+
+* gsk:
+ - Handle large viewports
+ - Prepare texture libraries for glyphy rendering
+ - Don't leak big glyphs in the glyph cache
+ - Align offscreen rendering with th pixel grid
+ - Check for half-float support before using it
+
+* Wayland:
+ - Use xdg-activation protocol
+ - Fix text caret coordinates
+ - Fix on-screen keyboard activation
+
+* MacOS:
+ - Fix sluggish and reversed scrolling
+ - Improve monitor detection
+ - Event handling fixes
+ - Fix keyboard input on popovers
+ - Support OpenGL-based video playback
+ - Suport fullscreen
+ - Improve native filechoooser size allocation
+ - Use CALayer and IOSurface for rendering
+ - Use a per-monitor CVDisplayLink
+ - Fix kinetic scrolling
+ - Improve window placement
+ - Improve multi-monitor handling
+ - Start applications in the foreground
+ - Fix cursor blink time
+
+* Windows:
+ - Fix preedit window placement on HiDPI
+
+* Tools:
+ - gtk4-builder-tool: Don't require a display for all commands
+ - gtk4-builder-tool: Add a screenshot command
+ - gtk4-node-editor: Install this utility
+
+* Debugging:
+ - inspector: Show more application data
+ - inspector: Allow viewing PangoAttrList properties
+
+* Documentation:
+ - Use the gtk-builder-tool to generate screenshots
+
+* Build:
+ - Fix cross-compilation
+ - Fix build on aarch64
+ - Fix build with gcc 12
+
+* Translation updates
+ Basque
+ Brazilian Portuguese
+ British English
+ Catalan
+ Chinese (China)
+ Chinese (Taiwan)
+ Croatian
+ Czech
+ Danish
+ Finnish
+ Galician
+ Georgian
+ German
+ Hebrew
+ Hungarian
+ Indonesian
+ Italian
+ Kazakh
+ Korean
+ Latvian
+ Lithuanian
+ Norwegian Bokmål
+ Persian
+ Polish
+ Portuguese
+ Russian
+ Serbian
+ Slovak
+ Slovenian
+ Spanish
+ Swedish
+ Turkish
+ Ukrainian
+
+
 Overview of Changes in 4.6.1, 11-02-2022
 ========================================
 

demos/gtk-demo/colorprofiles.c

@@ -0,0 +1,86 @@
+/* Color Profiles
+ *
+ * Demonstrates support for color profiles.
+ *
+ * The test images used here are taken from http://displaycal.net/icc-color-management-test/
+ * and are licensed under the Creative Commons BY-SA 4.0 International License
+ */
+
+#include <gtk/gtk.h>
+
+static GtkWidget *jpeg;
+static GtkWidget *png;
+static GtkWidget *tiff;
+static GtkWidget *noprofile;
+static GtkWidget *test1;
+static GtkWidget *test2;
+
+static void
+on_changed (GtkCheckButton *button,
+            gpointer        user_data)
+{
+  GdkTexture *texture;
+  const char *extension = NULL;
+  char *path;
+
+  if (!gtk_check_button_get_active (GTK_CHECK_BUTTON (button)))
+    return;
+
+  if (gtk_check_button_get_active (GTK_CHECK_BUTTON (jpeg)))
+    extension = ".jpg";
+  else if (gtk_check_button_get_active (GTK_CHECK_BUTTON (png)))
+    extension = ".png";
+  else if (gtk_check_button_get_active (GTK_CHECK_BUTTON (tiff)))
+    extension = ".tif";
+  else if (gtk_check_button_get_active (GTK_CHECK_BUTTON (noprofile)))
+    extension = "-expected-result-no-cm.png";
+
+  path = g_strconcat ("/colorprofiles/sRGB_Gray", extension, NULL);
+  texture = gdk_texture_new_from_resource (path);
+  gtk_picture_set_paintable (GTK_PICTURE (test1), GDK_PAINTABLE (texture));
+  g_object_unref (texture);
+
+  path = g_strconcat ("/colorprofiles/ICC-Rendering-Intent-Test", extension, NULL);
+  texture = gdk_texture_new_from_resource (path);
+  gtk_picture_set_paintable (GTK_PICTURE (test2), GDK_PAINTABLE (texture));
+  g_object_unref (texture);
+}
+
+GtkWidget*
+do_colorprofiles (GtkWidget *do_widget)
+{
+  static GtkWidget *window;
+
+  if (!window)
+    {
+      GtkBuilder *builder;
+      GtkBuilderScope *scope;
+
+      scope = gtk_builder_cscope_new ();
+      gtk_builder_cscope_add_callback_symbol (GTK_BUILDER_CSCOPE (scope),
+                                              "on_changed", G_CALLBACK (on_changed));
+
+      builder = gtk_builder_new ();
+      gtk_builder_set_scope (builder, scope);
+      gtk_builder_add_from_resource (builder, "/colorprofiles/colorprofiles.ui", NULL);
+      window = GTK_WIDGET (gtk_builder_get_object (builder, "window"));
+      jpeg = GTK_WIDGET (gtk_builder_get_object (builder, "jpeg"));
+      png = GTK_WIDGET (gtk_builder_get_object (builder, "png"));
+      tiff = GTK_WIDGET (gtk_builder_get_object (builder, "tiff"));
+      noprofile = GTK_WIDGET (gtk_builder_get_object (builder, "noprofile"));
+      test1 = GTK_WIDGET (gtk_builder_get_object (builder, "test1"));
+      test2 = GTK_WIDGET (gtk_builder_get_object (builder, "test2"));
+      gtk_window_set_display (GTK_WINDOW (window),
+                              gtk_widget_get_display (do_widget));
+      g_object_add_weak_pointer (G_OBJECT (window), (gpointer *)&window);
+      g_object_unref (builder);
+      g_object_unref (scope);
+    }
+
+  if (!gtk_widget_get_visible (window))
+    gtk_widget_show (window);
+  else
+    gtk_window_destroy (GTK_WINDOW (window));
+
+  return window;
+}

demos/gtk-demo/colorprofiles.ui

@@ -0,0 +1,94 @@
+<interface>
+  <object class="GtkWindow" id="window">
+    <property name="default-width">660</property>
+    <property name="default-height">660</property>
+    <property name="resizable">false</property>
+    <property name="title">Color Profiles</property>
+    <child>
+      <object class="GtkScrolledWindow">
+        <child>
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <property name="spacing">10</property>
+            <property name="margin-top">10</property>
+            <property name="margin-bottom">10</property>
+            <property name="margin-start">10</property>
+            <property name="margin-end">10</property>
+            <child>
+              <object class="GtkBox">
+                <property name="spacing">10</property>
+                <child>
+                  <object class="GtkLabel">
+                    <property name="label">File format:</property>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkCheckButton" id="jpeg">
+                    <property name="label">JPEG</property>
+                    <property name="active">1</property>
+                    <signal name="notify::active" handler="on_changed"/>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkCheckButton" id="png">
+                    <property name="label">PNG</property>
+                    <property name="group">jpeg</property>
+                    <signal name="notify::active" handler="on_changed"/>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkCheckButton" id="tiff">
+                    <property name="label">TIFF</property>
+                    <property name="group">png</property>
+                    <signal name="notify::active" handler="on_changed"/>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkCheckButton" id="noprofile">
+                    <property name="label">No profile</property>
+                    <property name="group">tiff</property>
+                    <signal name="notify::active" handler="on_changed"/>
+                  </object>
+                </child>
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel">
+                <property name="label">Test 1: Matrix-based profile</property>
+                <style>
+                  <class name="title-3"/>
+                </style>
+              </object>
+            </child>
+            <child>
+              <object class="GtkPicture" id="test1">
+                <property name="hexpand">1</property>
+                <property name="vexpand">1</property>
+                <property name="can-shrink">1</property>
+                <property name="keep-aspect-ratio">1</property>
+                <property name="file">resource:///colorprofiles/sRGB_Gray.jpg</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel">
+                <property name="label">Test 2: Lookup table-based profile</property>
+                <style>
+                  <class name="title-3"/>
+                </style>
+              </object>
+            </child>
+            <child>
+              <object class="GtkPicture" id="test2">
+                <property name="hexpand">1</property>
+                <property name="vexpand">1</property>
+                <property name="can-shrink">1</property>
+                <property name="keep-aspect-ratio">1</property>
+                <property name="file">resource:///colorprofiles/ICC-Rendering-Intent-Test.jpg</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

demos/gtk-demo/curve-editor.h

@@ -1,36 +0,0 @@
-#pragma once
-
-#include <gtk/gtk.h>
-
-G_BEGIN_DECLS
-
-#define CURVE_TYPE_EDITOR (curve_editor_get_type ())
-G_DECLARE_FINAL_TYPE (CurveEditor, curve_editor, CURVE, EDITOR, GtkWidget)
-
-GtkWidget *       curve_editor_new              (void);
-
-void              curve_editor_set_edit         (CurveEditor *self,
-                                                 gboolean     edit);
-
-void              curve_editor_set_path         (CurveEditor *self,
-                                                 GskPath     *path);
-
-GskPath *         curve_editor_get_path         (CurveEditor *self);
-
-void              curve_editor_set_stroke       (CurveEditor *self,
-                                                 GskStroke   *stroke);
-
-const GskStroke * curve_editor_get_stroke       (CurveEditor *self);
-
-
-void              curve_editor_set_color        (CurveEditor *self,
-                                                 GdkRGBA     *color);
-
-const GdkRGBA *   curve_editor_get_color        (CurveEditor *self);
-
-gboolean          curve_editor_get_show_outline (CurveEditor *self);
-
-void              curve_editor_set_show_outline (CurveEditor *self,
-                                                 gboolean     show_outline);
-
-G_END_DECLS

demos/gtk-demo/curve.c

@@ -1,272 +0,0 @@
-/* Path/Curve Editor
- *
- * This demo shows an elaborate curve editor that you would expect to find
- * in a vector graphics editor. It is built on top of GTK's path APIs.
- */
-
-#include <gtk/gtk.h>
-#include "curve-editor.h"
-
-
-static GskPath *
-make_circle_path (void)
-{
-  float w = 310;
-  float h = 310;
-  float cx = w / 2;
-  float cy = h / 2;
-  float pad = 20;
-  float r = (w - 2 * pad) / 2;
-  float k = 0.55228;
-  float kr = k  * r;
-  GskPathBuilder *builder;
-
-  builder = gsk_path_builder_new ();
-
-  gsk_path_builder_move_to (builder,  cx, pad);
-  gsk_path_builder_curve_to (builder, cx + kr, pad,
-                                      w - pad, cy - kr,
-                                      w - pad, cy);
-  gsk_path_builder_curve_to (builder, w - pad, cy + kr,
-                                      cx + kr, h - pad,
-                                      cx, h - pad);
-  gsk_path_builder_curve_to (builder, cx - kr, h - pad,
-                                      pad, cy + kr,
-                                      pad, cy);
-  gsk_path_builder_curve_to (builder, pad, cy - kr,
-                                      cx - kr, pad,
-                                      cx, pad);
-  gsk_path_builder_close (builder);
-
-  return gsk_path_builder_free_to_path (builder);
-}
-
-static void
-edit_changed (GtkToggleButton *button,
-              GParamSpec      *pspec,
-              CurveEditor     *editor)
-{
-  curve_editor_set_edit (editor, gtk_toggle_button_get_active (button));
-}
-
-static void
-reset (GtkButton   *button,
-       CurveEditor *editor)
-{
-  GskPath *path;
-
-  path = make_circle_path ();
-  curve_editor_set_path (editor, path);
-  gsk_path_unref (path);
-}
-
-static void
-line_width_changed (GtkSpinButton *spin,
-                    CurveEditor   *editor)
-{
-  GskStroke *stroke;
-
-  stroke = gsk_stroke_copy (curve_editor_get_stroke (editor));
-  gsk_stroke_set_line_width (stroke, gtk_spin_button_get_value (spin));
-  curve_editor_set_stroke (editor, stroke);
-  gsk_stroke_free (stroke);
-}
-
-static void
-cap_changed (GtkDropDown *combo,
-             GParamSpec  *pspec,
-             CurveEditor *editor)
-{
-  GskStroke *stroke;
-
-  stroke = gsk_stroke_copy (curve_editor_get_stroke (editor));
-  gsk_stroke_set_line_cap (stroke, (GskLineCap)gtk_drop_down_get_selected (combo));
-  curve_editor_set_stroke (editor, stroke);
-  gsk_stroke_free (stroke);
-}
-
-static void
-join_changed (GtkDropDown *combo,
-              GParamSpec  *pspec,
-              CurveEditor *editor)
-{
-  GskStroke *stroke;
-
-  stroke = gsk_stroke_copy (curve_editor_get_stroke (editor));
-  gsk_stroke_set_line_join (stroke, (GskLineJoin)gtk_drop_down_get_selected (combo));
-  curve_editor_set_stroke (editor, stroke);
-  gsk_stroke_free (stroke);
-}
-
-static void
-color_changed (GtkColorChooser *chooser,
-               GParamSpec      *pspec,
-               CurveEditor     *editor)
-{
-  GdkRGBA color;
-
-  gtk_color_chooser_get_rgba (chooser, &color);
-  curve_editor_set_color (editor, &color);
-}
-
-static void
-stroke_toggled (GtkCheckButton *button,
-                CurveEditor    *editor)
-{
-  curve_editor_set_show_outline (editor, gtk_check_button_get_active (button));
-  gtk_widget_queue_draw (GTK_WIDGET (editor));
-}
-
-static void
-limit_changed (GtkSpinButton *spin,
-               CurveEditor   *editor)
-{
-  GskStroke *stroke;
-
-  stroke = gsk_stroke_copy (curve_editor_get_stroke (editor));
-  gsk_stroke_set_miter_limit (stroke, gtk_spin_button_get_value (spin));
-  curve_editor_set_stroke (editor, stroke);
-  gsk_stroke_free (stroke);
-}
-
-static void
-dashes_changed (GtkEntry    *entry,
-                GParamSpec  *spec,
-                CurveEditor *editor)
-{
-  const char *text;
-  char **split;
-  GArray *dash;
-  GskStroke *stroke;
-
-  text = gtk_editable_get_text (GTK_EDITABLE (entry));
-  split = g_strsplit (text, " ", 0);
-
-  dash = g_array_new (FALSE, FALSE, sizeof (float));
-  for (int i = 0; split[i] != NULL; i++)
-    {
-      double d;
-      char *endp = 0;
-
-      d = g_strtod (split[i], &endp);
-      if (*endp == '\0')
-        g_array_append_vals (dash, (float[1]) { d }, 1);
-    }
-
-  g_strfreev (split);
-
-  stroke = gsk_stroke_copy (curve_editor_get_stroke (editor));
-  gsk_stroke_set_dash (stroke, (const float *)dash->data, dash->len);
-  curve_editor_set_stroke (editor, stroke);
-  gsk_stroke_free (stroke);
-
-  g_array_free (dash, TRUE);
-}
-
-GtkWidget *
-do_curve (GtkWidget *do_widget)
-{
-  static GtkWidget *window = NULL;
-  GtkWidget *demo;
-  GtkWidget *edit_toggle;
-  GtkWidget *reset_button;
-  GtkWidget *titlebar;
-  GtkWidget *stroke_toggle;
-  GtkWidget *line_width_spin;
-  GtkWidget *stroke_button;
-  GtkWidget *popover;
-  GtkWidget *grid;
-  GtkWidget *cap_combo;
-  GtkWidget *join_combo;
-  GtkWidget *color_button;
-  GtkWidget *limit_spin;
-  GtkWidget *dash_entry;
-
-  if (!window)
-    {
-      window = gtk_window_new ();
-      gtk_window_set_title (GTK_WINDOW (window), "Curve Editor");
-      g_object_add_weak_pointer (G_OBJECT (window), (gpointer *)&window);
-      gtk_window_set_default_size (GTK_WINDOW (window), 315, 350);
-
-      edit_toggle = gtk_toggle_button_new ();
-      gtk_button_set_icon_name (GTK_BUTTON (edit_toggle), "document-edit-symbolic");
-
-      reset_button = gtk_button_new_from_icon_name ("edit-undo-symbolic");
-
-      stroke_button = gtk_menu_button_new ();
-      gtk_menu_button_set_icon_name (GTK_MENU_BUTTON (stroke_button), "open-menu-symbolic");
-      popover = gtk_popover_new ();
-      gtk_menu_button_set_popover (GTK_MENU_BUTTON (stroke_button), popover);
-
-      grid = gtk_grid_new ();
-      gtk_grid_set_row_spacing (GTK_GRID (grid), 6);
-      gtk_grid_set_column_spacing (GTK_GRID (grid), 6);
-      gtk_popover_set_child (GTK_POPOVER (popover), grid);
-
-      gtk_grid_attach (GTK_GRID (grid), gtk_label_new ("Color:"), 0, 0, 1, 1);
-      color_button = gtk_color_button_new_with_rgba (&(GdkRGBA){ 0., 0., 0., 1.});
-      gtk_grid_attach (GTK_GRID (grid), color_button, 1, 0, 1, 1);
-
-      gtk_grid_attach (GTK_GRID (grid), gtk_label_new ("Line width:"), 0, 1, 1, 1);
-      line_width_spin = gtk_spin_button_new_with_range (1, 20, 1);
-      gtk_spin_button_set_value (GTK_SPIN_BUTTON (line_width_spin), 1);
-      gtk_grid_attach (GTK_GRID (grid), line_width_spin, 1, 1, 1, 1);
-
-      gtk_grid_attach (GTK_GRID (grid), gtk_label_new ("Line cap:"), 0, 2, 1, 1);
-      cap_combo = gtk_drop_down_new_from_strings ((const char *[]){"Butt", "Round", "Square", NULL});
-      gtk_grid_attach (GTK_GRID (grid), cap_combo, 1, 2, 1, 1);
-
-      gtk_grid_attach (GTK_GRID (grid), gtk_label_new ("Line join:"), 0, 3, 1, 1);
-      join_combo = gtk_drop_down_new_from_strings ((const char *[]){"Miter", "Miter-clip", "Round", "Bevel", "Arcs", NULL});
-      gtk_grid_attach (GTK_GRID (grid), join_combo, 1, 3, 1, 1);
-
-      gtk_grid_attach (GTK_GRID (grid), gtk_label_new ("Miter limit:"), 0, 4, 1, 1);
-      limit_spin = gtk_spin_button_new_with_range (0, 10, 1);
-      gtk_spin_button_set_digits (GTK_SPIN_BUTTON (limit_spin), 1);
-      gtk_spin_button_set_value (GTK_SPIN_BUTTON (limit_spin), 4);
-      gtk_grid_attach (GTK_GRID (grid), limit_spin, 1, 4, 1, 1);
-
-      gtk_grid_attach (GTK_GRID (grid), gtk_label_new ("Dashes:"), 0, 5, 1, 1);
-      dash_entry = gtk_entry_new ();
-      gtk_grid_attach (GTK_GRID (grid), dash_entry, 1, 5, 1, 1);
-
-      stroke_toggle = gtk_check_button_new_with_label ("Show outline");
-      gtk_grid_attach (GTK_GRID (grid), stroke_toggle, 1, 6, 1, 1);
-
-      titlebar = gtk_header_bar_new ();
-      gtk_header_bar_pack_start (GTK_HEADER_BAR (titlebar), edit_toggle);
-      gtk_header_bar_pack_start (GTK_HEADER_BAR (titlebar), reset_button);
-      gtk_header_bar_pack_start (GTK_HEADER_BAR (titlebar), stroke_button);
-
-      gtk_window_set_titlebar (GTK_WINDOW (window), titlebar);
-
-      demo = curve_editor_new ();
-
-      g_signal_connect (stroke_toggle, "toggled", G_CALLBACK (stroke_toggled), demo);
-      g_signal_connect (edit_toggle, "notify::active", G_CALLBACK (edit_changed), demo);
-      g_signal_connect (reset_button, "clicked", G_CALLBACK (reset), demo);
-      g_signal_connect (cap_combo, "notify::selected", G_CALLBACK (cap_changed), demo);
-      g_signal_connect (join_combo, "notify::selected", G_CALLBACK (join_changed), demo);
-      g_signal_connect (color_button, "notify::rgba", G_CALLBACK (color_changed), demo);
-      g_signal_connect (line_width_spin, "value-changed", G_CALLBACK (line_width_changed), demo);
-      g_signal_connect (limit_spin, "value-changed", G_CALLBACK (limit_changed), demo);
-      g_signal_connect (dash_entry, "notify::text", G_CALLBACK (dashes_changed), demo);
-
-      reset (NULL, CURVE_EDITOR (demo));
-
-      gtk_spin_button_set_value (GTK_SPIN_BUTTON (line_width_spin), 6);
-      gtk_color_chooser_set_rgba (GTK_COLOR_CHOOSER (color_button), &(GdkRGBA) { 1, 0, 0, 1 });
-      gtk_drop_down_set_selected (GTK_DROP_DOWN (cap_combo), GSK_LINE_CAP_ROUND);
-      gtk_editable_set_text (GTK_EDITABLE (dash_entry), "0 8");
-
-      gtk_window_set_child (GTK_WINDOW (window), demo);
-    }
-
-  if (!gtk_widget_get_visible (window))
-    gtk_widget_show (window);
-  else
-    gtk_window_destroy (GTK_WINDOW (window));
-
-  return window;
-}

demos/gtk-demo/demo.gresource.xml

@@ -19,6 +19,17 @@
     <file>demoimage.c</file>
     <file>demoimage.h</file>
   </gresource>
+  <gresource prefix="/colorprofiles">
+    <file>colorprofiles.ui</file>
+    <file>sRGB_Gray.jpg</file>
+    <file>sRGB_Gray.png</file>
+    <file>sRGB_Gray.tif</file>
+    <file>sRGB_Gray-expected-result-no-cm.png</file>
+    <file>ICC-Rendering-Intent-Test.png</file>
+    <file>ICC-Rendering-Intent-Test.jpg</file>
+    <file>ICC-Rendering-Intent-Test.tif</file>
+    <file>ICC-Rendering-Intent-Test-expected-result-no-cm.png</file>
+  </gresource>
   <gresource prefix="/constraints_builder">
     <file>constraints_builder.ui</file>
   </gresource>
@@ -128,7 +139,6 @@
     <file>fishbowl.ui</file>
     <file>gtkfishbowl.c</file>
     <file>gtkfishbowl.h</file>
-    <file>tiger.node</file>
   </gresource>
   <gresource prefix="/frames">
     <file>frames.ui</file>
@@ -251,15 +261,12 @@
   <gresource prefix="/video-player">
     <file>bbb.png</file>
   </gresource>
-  <gresource prefix="/curve">
-    <file>curve-editor.c</file>
-    <file>curve-editor.h</file>
-  </gresource>
   <gresource prefix="/sources">
     <file>application_demo.c</file>
     <file>assistant.c</file>
     <file>builder.c</file>
     <file>clipboard.c</file>
+    <file>colorprofiles.c</file>
     <file>combobox.c</file>
     <file>constraints.c</file>
     <file>constraints_interactive.c</file>
@@ -272,7 +279,6 @@
     <file>css_pixbufs.c</file>
     <file>css_shadows.c</file>
     <file>cursors.c</file>
-    <file>curve.c</file>
     <file>dialog.c</file>
     <file>drawingarea.c</file>
     <file>dropdown.c</file>
@@ -293,7 +299,6 @@
     <file>gears.c</file>
     <file>gestures.c</file>
     <file>glarea.c</file>
-    <file>glyphs.c</file>
     <file>gltransition.c</file>
     <file>headerbar.c</file>
     <file>hypertext.c</file>
@@ -332,9 +337,6 @@
     <file>paintable_symbolic.c</file>
     <file>panes.c</file>
     <file>password_entry.c</file>
-    <file>path_fill.c</file>
-    <file>path_maze.c</file>
-    <file>path_text.c</file>
     <file>peg_solitaire.c</file>
     <file>pickers.c</file>
     <file>printing.c</file>
@@ -419,9 +421,6 @@
   <gresource prefix="/fontrendering">
     <file>fontrendering.ui</file>
   </gresource>
-  <gresource prefix="/path_text">
-    <file>path_text.ui</file>
-  </gresource>
   <gresource prefix="/org/gtk/Demo4">
     <file>icons/16x16/actions/application-exit.png</file>
     <file>icons/16x16/actions/document-new.png</file>

demos/gtk-demo/fishbowl.c

@@ -11,9 +11,6 @@
 #include "gtkgears.h"
 #include "gskshaderpaintable.h"
 
-#include "nodewidget.h"
-#include "graphwidget.h"
-
 const char *const css =
 ".blurred-button {"
 "  box-shadow: 0px 0px 5px 10px rgba(0, 0, 0, 0.5);"
@@ -204,18 +201,6 @@ create_menu_button (void)
   return w;
 }
 
-static GtkWidget *
-create_tiger (void)
-{
-  return node_widget_new ("/fishbowl/tiger.node");
-}
-
-static GtkWidget *
-create_graph (void)
-{
-  return graph_widget_new ();
-}
-
 static const struct {
   const char *name;
   GtkWidget * (*create_func) (void);
@@ -233,8 +218,6 @@ static const struct {
   { "Switch",     create_switch         },
   { "Menubutton", create_menu_button    },
   { "Shader",     create_cogs           },
-  { "Tiger",      create_tiger          },
-  { "Graph",      create_graph          },
 };
 
 static int selected_widget_type = -1;

demos/gtk-demo/graphwidget.c

@@ -1,164 +0,0 @@
-#include "graphwidget.h"
-
-struct _GraphWidget
-{
-  GtkWidget parent_instance;
-
-  GskPath *path;
-  GskStroke *stroke;
-  GdkRGBA color;
-  GskPath *stroke_path;
-
-  guint tick_cb;
-  guint64 start_time;
-
-  double period;
-  double amplitude;
-};
-
-struct _GraphWidgetClass
-{
-  GtkWidgetClass parent_class;
-};
-
-G_DEFINE_TYPE (GraphWidget, graph_widget, GTK_TYPE_WIDGET)
-
-static void
-update_path (GraphWidget *self,
-             float        amplitude)
-{
-  graphene_point_t p[20];
-  GskPathBuilder *builder;
-
-  g_clear_pointer (&self->path, gsk_path_unref);
-  g_clear_pointer (&self->stroke_path, gsk_path_unref);
-
-  for (int i = 0; i < 20; i++)
-    {
-      p[i].x = 10 * i;
-      p[i].y = 50;
-
-      if (i % 4 == 1 || i % 4 == 2)
-        {
-          if (i % 8 < 4)
-            p[i].y += amplitude;
-          else
-            p[i].y -= amplitude;
-        }
-    }
-
-  builder = gsk_path_builder_new ();
-  gsk_path_builder_move_to (builder, p[0].x, p[0].y);
-
-  for (int i = 0; i < 20; i += 4)
-    gsk_path_builder_curve_to (builder,
-                               p[i+1].x, p[i+1].y,
-                               p[i+2].x, p[i+2].y,
-                               p[i+3].x, p[i+3].y);
-
-  self->path = gsk_path_builder_free_to_path (builder);
-  self->stroke_path = gsk_path_stroke (self->path, self->stroke);
-}
-
-static gboolean
-tick_cb (GtkWidget     *widget,
-         GdkFrameClock *frame_clock,
-         gpointer       user_data)
-{
-  GraphWidget *self = GRAPH_WIDGET (widget);
-  guint64 now;
-  double angle;
-
-  now = gdk_frame_clock_get_frame_time (frame_clock);
-
-  if (self->start_time == 0)
-    self->start_time = now;
-
-  angle = 360 * (now - self->start_time) / (double)(self->period * G_TIME_SPAN_MINUTE);
-  update_path (self, sin (angle) * self->amplitude);
-
-  gtk_widget_queue_draw (widget);
-
-  return G_SOURCE_CONTINUE;
-}
-
-static void
-graph_widget_init (GraphWidget *self)
-{
-  self->color.red = g_random_double_range (0, 1);
-  self->color.green = g_random_double_range (0, 1);
-  self->color.blue = g_random_double_range (0, 1);
-  self->color.alpha = 1;
-
-  self->period = g_random_double_range (0.5, 1);
-  self->amplitude = g_random_double_range (10, 25);
-
-  self->stroke = gsk_stroke_new (2);
-
-  update_path (self, 0);
-
-  self->start_time = 0;
-  self->tick_cb = gtk_widget_add_tick_callback (GTK_WIDGET (self), tick_cb, NULL, NULL);
-}
-
-static void
-graph_widget_dispose (GObject *object)
-{
-  GraphWidget *self = GRAPH_WIDGET (object);
-
-  gsk_path_unref (self->path);
-  gsk_stroke_free (self->stroke);
-
-  G_OBJECT_CLASS (graph_widget_parent_class)->dispose (object);
-}
-
-static void
-graph_widget_snapshot (GtkWidget   *widget,
-                      GtkSnapshot *snapshot)
-{
-  GraphWidget *self = GRAPH_WIDGET (widget);
-  int width, height;
-
-  width = gtk_widget_get_width (widget);
-  height = gtk_widget_get_height (widget);
-
-  gtk_snapshot_push_fill (snapshot, self->stroke_path, GSK_FILL_RULE_WINDING);
-  gtk_snapshot_append_color (snapshot,
-                             &self->color,
-                             &GRAPHENE_RECT_INIT (0, 0, width, height));
-  gtk_snapshot_pop (snapshot);
-}
-
-static void
-graph_widget_measure (GtkWidget      *widget,
-                      GtkOrientation  orientation,
-                      int             for_size,
-                      int            *minimum,
-                      int            *natural,
-                      int            *minimum_baseline,
-                      int            *natural_baseline)
-{
-  if (orientation == GTK_ORIENTATION_HORIZONTAL)
-    *minimum = *natural = 200;
-  else
-    *minimum = *natural = 100;
-}
-
-
-static void
-graph_widget_class_init (GraphWidgetClass *class)
-{
-  GObjectClass *object_class = G_OBJECT_CLASS (class);
-  GtkWidgetClass *widget_class = GTK_WIDGET_CLASS (class);
-
-  object_class->dispose = graph_widget_dispose;
-
-  widget_class->snapshot = graph_widget_snapshot;
-  widget_class->measure = graph_widget_measure;
-}
-
-GtkWidget *
-graph_widget_new (void)
-{
-  return g_object_new (GRAPH_TYPE_WIDGET, NULL);
-}

demos/gtk-demo/graphwidget.h

@@ -1,8 +0,0 @@
-#pragma once
-
-#include <gtk/gtk.h>
-
-#define GRAPH_TYPE_WIDGET (graph_widget_get_type ())
-G_DECLARE_FINAL_TYPE (GraphWidget, graph_widget, GRAPH, WIDGET, GtkWidget)
-
-GtkWidget * graph_widget_new       (void);

demos/gtk-demo/hypertext.c

@@ -100,7 +100,7 @@ show_page (GtkTextView *text_view,
 
       theme = gtk_icon_theme_get_for_display (gtk_widget_get_display (GTK_WIDGET (text_view)));
       icon = gtk_icon_theme_lookup_icon (theme,
-                                         "eye-not-looking-symbolic",
+                                         "view-conceal-symbolic",
                                          NULL,
                                          16,
                                          1,

demos/gtk-demo/meson.build

@@ -5,6 +5,7 @@ demos = files([
   'assistant.c',
   'builder.c',
   'clipboard.c',
+  'colorprofiles.c',
   'combobox.c',
   'constraints.c',
   'constraints_interactive.c',
@@ -17,7 +18,6 @@ demos = files([
   'css_pixbufs.c',
   'css_shadows.c',
   'cursors.c',
-  'curve.c',
   'dialog.c',
   'drawingarea.c',
   'dnd.c',
@@ -35,7 +35,6 @@ demos = files([
   'gestures.c',
   'glarea.c',
   'gltransition.c',
-  'glyphs.c',
   'headerbar.c',
   'hypertext.c',
   'iconscroll.c',
@@ -72,9 +71,6 @@ demos = files([
   'paintable_symbolic.c',
   'panes.c',
   'password_entry.c',
-  'path_fill.c',
-  'path_maze.c',
-  'path_text.c',
   'peg_solitaire.c',
   'pickers.c',
   'printing.c',
@@ -135,9 +131,6 @@ extra_demo_sources = files([
   'unicode-names.c',
   'suggestionentry.c',
   'language-names.c',
-  'curve-editor.c',
-  'nodewidget.c',
-  'graphwidget.c',
 ])
 
 if os_unix

demos/gtk-demo/nodewidget.c

@@ -1,76 +0,0 @@
-#include "nodewidget.h"
-
-struct _NodeWidget
-{
-  GtkWidget parent_instance;
-
-  GskRenderNode *node;
-};
-
-struct _NodeWidgetClass
-{
-  GtkWidgetClass parent_class;
-};
-
-G_DEFINE_TYPE (NodeWidget, node_widget, GTK_TYPE_WIDGET)
-
-static void
-node_widget_init (NodeWidget *self)
-{
-}
-
-static void
-node_widget_dispose (GObject *object)
-{
-  NodeWidget *self = NODE_WIDGET (object);
-
-  gsk_render_node_unref (self->node);
-
-  G_OBJECT_CLASS (node_widget_parent_class)->dispose (object);
-}
-
-static void
-node_widget_snapshot (GtkWidget   *widget,
-                      GtkSnapshot *snapshot)
-{
-  NodeWidget *self = NODE_WIDGET (widget);
-
-  gtk_snapshot_append_node (snapshot, self->node);
-}
-
-static void
-node_widget_class_init (NodeWidgetClass *class)
-{
-  GObjectClass *object_class = G_OBJECT_CLASS (class);
-  GtkWidgetClass *widget_class = GTK_WIDGET_CLASS (class);
-
-  object_class->dispose = node_widget_dispose;
-
-  widget_class->snapshot = node_widget_snapshot;
-}
-
-GtkWidget *
-node_widget_new (const char *resource)
-{
-  NodeWidget *self;
-  GBytes *bytes;
-  GskRenderNode *node;
-  graphene_rect_t bounds;
-  float scale;
-  GskTransform *transform;
-
-  self = g_object_new (NODE_TYPE_WIDGET, NULL);
-
-  bytes = g_resources_lookup_data (resource, 0, NULL);
-  node = gsk_render_node_deserialize (bytes, NULL, NULL);
-  g_bytes_unref (bytes);
-
-  gsk_render_node_get_bounds (node, &bounds);
-  scale = MIN (100.0/bounds.size.width, 100.0/bounds.size.height);
-  transform = gsk_transform_scale (NULL, scale, scale);
-  self->node = gsk_transform_node_new (node, transform);
-  gsk_transform_unref (transform);
-  gsk_render_node_unref (node);
-
-  return GTK_WIDGET (self);
-}

demos/gtk-demo/nodewidget.h

@@ -1,8 +0,0 @@
-#pragma once
-
-#include <gtk/gtk.h>
-
-#define NODE_TYPE_WIDGET (node_widget_get_type ())
-G_DECLARE_FINAL_TYPE (NodeWidget, node_widget, NODE, WIDGET, GtkWidget)
-
-GtkWidget * node_widget_new       (const char *file);

demos/gtk-demo/path_fill.c

@@ -1,348 +0,0 @@
-/* Path/Text Fill
- *
- * This demo shows how to use PangoCairo to draw text with more than
- * just a single color.
- */
-
-#include <glib/gi18n.h>
-#include <gtk/gtk.h>
-
-#include "paintable.h"
-#include "gsk/gskpathdashprivate.h"
-
-#define GTK_TYPE_PATH_PAINTABLE (gtk_path_paintable_get_type ())
-G_DECLARE_FINAL_TYPE (GtkPathPaintable, gtk_path_paintable, GTK, PATH_PAINTABLE, GObject)
-
-struct _GtkPathPaintable
-{
-  GObject parent_instance;
-
-  int width;
-  int height;
-  GskPath *path;
-  GdkPaintable *background;
-};
-
-struct _GtkPathPaintableClass
-{
-  GObjectClass parent_class;
-};
-
-static int
-gtk_path_paintable_get_intrinsic_width (GdkPaintable *paintable)
-{
-  GtkPathPaintable *self = GTK_PATH_PAINTABLE (paintable);
-
-  if (self->background)
-    return MAX (gdk_paintable_get_intrinsic_width (self->background), self->width);
-  else
-    return self->width;
-}
-
-static int
-gtk_path_paintable_get_intrinsic_height (GdkPaintable *paintable)
-{
-  GtkPathPaintable *self = GTK_PATH_PAINTABLE (paintable);
-
-  if (self->background)
-    return MAX (gdk_paintable_get_intrinsic_height (self->background), self->height);
-  else
-    return self->height;
-}
-
-static void
-gtk_path_paintable_snapshot (GdkPaintable *paintable,
-                             GdkSnapshot  *snapshot,
-                             double        width,
-                             double        height)
-{
-  GtkPathPaintable *self = GTK_PATH_PAINTABLE (paintable);
-
-#if 0
-  gtk_snapshot_push_fill (snapshot, self->path, GSK_FILL_RULE_WINDING);
-#else
-  GskStroke *stroke = gsk_stroke_new (2.0);
-  gtk_snapshot_push_stroke (snapshot, self->path, stroke);
-  gsk_stroke_free (stroke);
-#endif
-
-  if (self->background)
-    {
-      gdk_paintable_snapshot (self->background, snapshot, width, height);
-    }
-  else
-    {
-      gtk_snapshot_append_linear_gradient (snapshot,
-                                           &GRAPHENE_RECT_INIT (0, 0, width, height),
-                                           &GRAPHENE_POINT_INIT (0, 0),
-                                           &GRAPHENE_POINT_INIT (width, height),
-                                           (GskColorStop[8]) {
-                                             { 0.0, { 1.0, 0.0, 0.0, 1.0 } },
-                                             { 0.2, { 1.0, 0.0, 0.0, 1.0 } },
-                                             { 0.3, { 1.0, 1.0, 0.0, 1.0 } },
-                                             { 0.4, { 0.0, 1.0, 0.0, 1.0 } },
-                                             { 0.6, { 0.0, 1.0, 1.0, 1.0 } },
-                                             { 0.7, { 0.0, 0.0, 1.0, 1.0 } },
-                                             { 0.8, { 1.0, 0.0, 1.0, 1.0 } },
-                                             { 1.0, { 1.0, 0.0, 1.0, 1.0 } }
-                                           },
-                                           8);
-    }
-
-  gtk_snapshot_pop (snapshot);
-
-}
-
-static GdkPaintableFlags
-gtk_path_paintable_get_flags (GdkPaintable *paintable)
-{
-  GtkPathPaintable *self = GTK_PATH_PAINTABLE (paintable);
-
-  if (self->background)
-    return gdk_paintable_get_flags (self->background);
-  else
-    return GDK_PAINTABLE_STATIC_CONTENTS | GDK_PAINTABLE_STATIC_SIZE;
-}
-
-static void
-gtk_path_paintable_paintable_init (GdkPaintableInterface *iface)
-{
-  iface->get_intrinsic_width = gtk_path_paintable_get_intrinsic_width;
-  iface->get_intrinsic_height = gtk_path_paintable_get_intrinsic_height;
-  iface->snapshot = gtk_path_paintable_snapshot;
-  iface->get_flags = gtk_path_paintable_get_flags;
-}
-
-/* When defining the GType, we need to implement the GdkPaintable interface */
-G_DEFINE_TYPE_WITH_CODE (GtkPathPaintable, gtk_path_paintable, G_TYPE_OBJECT,
-                         G_IMPLEMENT_INTERFACE (GDK_TYPE_PAINTABLE,
-                                                gtk_path_paintable_paintable_init))
-
-/* Here's the boilerplate for the GObject declaration.
- * We don't need to do anything special here, because we keep no
- * data of our own.
- */
-static void
-gtk_path_paintable_class_init (GtkPathPaintableClass *klass)
-{
-}
-
-static void
-gtk_path_paintable_init (GtkPathPaintable *self)
-{
-}
-
-/* And finally, we add a simple constructor.
- * It is declared in the header so that the other examples
- * can use it.
- */
-GdkPaintable *
-gtk_path_paintable_new (GskPath      *path,
-                        GdkPaintable *background,
-                        int           width,
-                        int           height)
-{
-  GtkPathPaintable *self;
-
-  self = g_object_new (GTK_TYPE_PATH_PAINTABLE, NULL);
-  self->path = path;
-  self->background = background;
-  if (self->background)
-    {
-      g_signal_connect_swapped (self->background, "invalidate-contents", G_CALLBACK (gdk_paintable_invalidate_contents), self);
-      g_signal_connect_swapped (self->background, "invalidate-size", G_CALLBACK (gdk_paintable_invalidate_size), self);
-    }
-  self->width = width;
-  self->height = height;
-
-  return GDK_PAINTABLE (self);
-}
-
-void
-gtk_path_paintable_set_path (GtkPathPaintable *self,
-                             GskPath          *path)
-{
-  g_clear_pointer (&self->path, gsk_path_unref);
-  self->path = gsk_path_ref (path);
-
-  gdk_paintable_invalidate_contents (GDK_PAINTABLE (self));
-}
-
-static GskPath *
-create_hexagon (GtkWidget *widget)
-{
-  GskPathBuilder *builder;
-
-  builder = gsk_path_builder_new ();
-
-  gsk_path_builder_move_to (builder, 120, 0);
-  gsk_path_builder_line_to (builder, 360, 0);
-  gsk_path_builder_line_to (builder, 480, 208);
-  gsk_path_builder_line_to (builder, 360, 416);
-  gsk_path_builder_line_to (builder, 120, 416);
-  gsk_path_builder_line_to (builder, 0, 208);
-  gsk_path_builder_close (builder);
-
-  return gsk_path_builder_free_to_path (builder);
-}
-
-static GskPath *
-create_path_from_text (GtkWidget *widget)
-{
-  PangoLayout *layout;
-  PangoFontDescription *desc;
-  GskPathBuilder *builder;
-
-  layout = gtk_widget_create_pango_layout (widget, "Pango power!\nPango power!\nPango power!");
-  desc = pango_font_description_from_string ("sans bold 36");
-  pango_layout_set_font_description (layout, desc);
-  pango_font_description_free (desc);
-
-  builder = gsk_path_builder_new ();
-
-  gsk_path_builder_add_layout (builder, layout);
-
-  return gsk_path_builder_free_to_path (builder);
-}
-
-static gboolean
-build_path (GskPathOperation        op,
-            const graphene_point_t *pts,
-            gsize                   n_pts,
-            float                   weight,
-            gpointer                user_data)
-{
-  GskPathBuilder *builder = user_data;
-
-  switch (op)
-  {
-    case GSK_PATH_MOVE:
-      gsk_path_builder_move_to (builder, pts[0].x, pts[0].y);
-      break;
-
-    case GSK_PATH_CLOSE:
-      gsk_path_builder_close (builder);
-      break;
-
-    case GSK_PATH_LINE:
-      gsk_path_builder_line_to (builder, pts[1].x, pts[1].y);
-      break;
-
-    case GSK_PATH_CURVE:
-      gsk_path_builder_curve_to (builder, pts[1].x, pts[1].y, pts[2].x, pts[2].y, pts[3].x, pts[3].y);
-      break;
-
-    case GSK_PATH_CONIC:
-      gsk_path_builder_conic_to (builder, pts[1].x, pts[1].y, pts[2].x, pts[2].y, weight);
-      break;
-
-    default:
-      g_assert_not_reached ();
-      break;
-  }
-
-  return TRUE;
-}
-
-
-static gboolean
-update_path (GtkWidget     *widget,
-             GdkFrameClock *frame_clock,
-             gpointer       measure)
-{
-  float progress = gdk_frame_clock_get_frame_time (frame_clock) % (60 * G_USEC_PER_SEC) / (float) (30 * G_USEC_PER_SEC);
-  GskPathBuilder *builder;
-  GskPath *path;
-  graphene_point_t pos;
-  graphene_vec2_t tangent;
-  GskStroke *stroke;
-
-  builder = gsk_path_builder_new ();
-  gsk_path_builder_add_segment (builder,
-                                measure,
-#if 1
-                                0.0, gsk_path_measure_get_length (measure));
-#else
-                                progress > 1 ? (progress - 1) * gsk_path_measure_get_length (measure) : 0.0,
-                                (progress < 1 ? progress : 1.0) * gsk_path_measure_get_length (measure));
-#endif
-
-  path = gsk_path_builder_free_to_path (builder);
-
-  stroke = gsk_stroke_new (1);
-  gsk_stroke_set_dash (stroke, (float[2]) { 10, 5 }, 2);
-  gsk_stroke_set_dash_offset (stroke, - (gdk_frame_clock_get_frame_time (frame_clock) % G_USEC_PER_SEC) * 15. / G_USEC_PER_SEC);
-  builder = gsk_path_builder_new ();
-  gsk_path_dash (path, stroke, 0.2, build_path, builder);
-  gsk_path_unref (path);
-
-  gsk_path_measure_get_point (measure,
-                              (progress > 1 ? (progress - 1) : progress) * gsk_path_measure_get_length (measure),
-                              &pos,
-                              &tangent);
-  gsk_path_builder_move_to (builder, pos.x + 5 * graphene_vec2_get_x (&tangent), pos.y + 5 * graphene_vec2_get_y (&tangent));
-  gsk_path_builder_line_to (builder, pos.x + 3 * graphene_vec2_get_y (&tangent), pos.y + 3 * graphene_vec2_get_x (&tangent));
-  gsk_path_builder_line_to (builder, pos.x - 3 * graphene_vec2_get_y (&tangent), pos.y - 3 * graphene_vec2_get_x (&tangent));
-  gsk_path_builder_close (builder);
-
-  path = gsk_path_builder_free_to_path (builder);
-
-  gtk_path_paintable_set_path (GTK_PATH_PAINTABLE (gtk_picture_get_paintable (GTK_PICTURE (widget))),
-                               path);
-  gsk_path_unref (path);
-
-  return G_SOURCE_CONTINUE;
-}
-
-GtkWidget *
-do_path_fill (GtkWidget *do_widget)
-{
-  static GtkWidget *window = NULL;
-
-  if (!window)
-    {
-      GtkWidget *picture;
-      GdkPaintable *paintable;
-      GtkMediaStream *stream;
-      GskPath *path;
-      graphene_rect_t bounds;
-      GskPathMeasure *measure;
-
-      window = gtk_window_new ();
-      gtk_window_set_resizable (GTK_WINDOW (window), TRUE);
-      gtk_window_set_title (GTK_WINDOW (window), "Path Fill");
-      g_object_add_weak_pointer (G_OBJECT (window), (gpointer *)&window);
-
-#if 0
-      stream = gtk_media_file_new_for_resource ("/images/gtk-logo.webm");
-#else
-      stream = gtk_nuclear_media_stream_new ();
-#endif
-      gtk_media_stream_play (stream);
-      gtk_media_stream_set_loop (stream, TRUE);
-
-      path = create_hexagon (window);
-      path = create_path_from_text (window);
-      gsk_path_get_bounds (path, &bounds);
-
-      paintable = gtk_path_paintable_new (path,
-                                          GDK_PAINTABLE (stream),
-                                          bounds.origin.x + bounds.size.width,
-                                          bounds.origin.y + bounds.size.height);
-      picture = gtk_picture_new_for_paintable (paintable);
-      measure = gsk_path_measure_new (path);
-      gtk_widget_add_tick_callback (picture, update_path, measure, (GDestroyNotify) gsk_path_measure_unref);
-      gtk_picture_set_keep_aspect_ratio (GTK_PICTURE (picture), FALSE);
-      gtk_picture_set_can_shrink (GTK_PICTURE (picture), FALSE);
-      g_object_unref (paintable);
-
-      gtk_window_set_child (GTK_WINDOW (window), picture);
-    }
-
-  if (!gtk_widget_get_visible (window))
-    gtk_widget_show (window);
-  else
-    gtk_window_destroy (GTK_WINDOW (window));
-
-  return window;
-}

demos/gtk-demo/path_maze.c

@@ -1,339 +0,0 @@
-/* Path/Maze
- * #Keywords: game, mouse
- *
- * This demo shows how to use a GskPath to create a maze and use
- * gsk_path_measure_get_closest_point() to check the mouse stays
- * on the path.
- *
- * It also shows off the performance of GskPath (or not) as this
- * is a rather complex path.
- */
-
-#include <glib/gi18n.h>
-#include <gtk/gtk.h>
-
-#include "paintable.h"
-
-#define MAZE_GRID_SIZE 20
-#define MAZE_STROKE_SIZE_ACTIVE (MAZE_GRID_SIZE - 4)
-#define MAZE_STROKE_SIZE_INACTIVE (MAZE_GRID_SIZE - 12)
-#define MAZE_WIDTH 31
-#define MAZE_HEIGHT 21
-
-#define GTK_TYPE_MAZE (gtk_maze_get_type ())
-G_DECLARE_FINAL_TYPE (GtkMaze, gtk_maze, GTK, MAZE, GtkWidget)
-
-struct _GtkMaze
-{
-  GtkWidget parent_instance;
-
-  int width;
-  int height;
-  GskPath *path;
-  GskPathMeasure *measure;
-  GdkPaintable *background;
-
-  gboolean active;
-};
-
-struct _GtkMazeClass
-{
-  GtkWidgetClass parent_class;
-};
-
-G_DEFINE_TYPE (GtkMaze, gtk_maze, GTK_TYPE_WIDGET)
-
-static void
-gtk_maze_measure (GtkWidget      *widget,
-                  GtkOrientation  orientation,
-                  int             for_size,
-                  int            *minimum,
-                  int            *natural,
-                  int            *minimum_baseline,
-                  int            *natural_baseline)
-{
-  GtkMaze *self = GTK_MAZE (widget);
-
-  if (orientation == GTK_ORIENTATION_HORIZONTAL)
-    *minimum = *natural = self->width;
-  else
-    *minimum = *natural = self->height;
-}
-
-static void
-gtk_maze_snapshot (GtkWidget   *widget,
-                   GdkSnapshot *snapshot)
-{
-  GtkMaze *self = GTK_MAZE (widget);
-  double width = gtk_widget_get_width (widget);
-  double height = gtk_widget_get_height (widget);
-  GskStroke *stroke;
-
-  stroke = gsk_stroke_new (MAZE_STROKE_SIZE_INACTIVE);
-  if (self->active)
-    gsk_stroke_set_line_width (stroke, MAZE_STROKE_SIZE_ACTIVE);
-  gsk_stroke_set_line_join (stroke, GSK_LINE_JOIN_ROUND);
-  gsk_stroke_set_line_cap (stroke, GSK_LINE_CAP_ROUND);
-  gtk_snapshot_push_stroke (snapshot, self->path, stroke);
-  gsk_stroke_free (stroke);
-
-  if (self->background)
-    {
-      gdk_paintable_snapshot (self->background, snapshot, width, height);
-    }
-  else
-    {
-      gtk_snapshot_append_linear_gradient (snapshot,
-                                           &GRAPHENE_RECT_INIT (0, 0, width, height),
-                                           &GRAPHENE_POINT_INIT (0, 0),
-                                           &GRAPHENE_POINT_INIT (width, height),
-                                           (GskColorStop[8]) {
-                                             { 0.0, { 1.0, 0.0, 0.0, 1.0 } },
-                                             { 0.2, { 1.0, 0.0, 0.0, 1.0 } },
-                                             { 0.3, { 1.0, 1.0, 0.0, 1.0 } },
-                                             { 0.4, { 0.0, 1.0, 0.0, 1.0 } },
-                                             { 0.6, { 0.0, 1.0, 1.0, 1.0 } },
-                                             { 0.7, { 0.0, 0.0, 1.0, 1.0 } },
-                                             { 0.8, { 1.0, 0.0, 1.0, 1.0 } },
-                                             { 1.0, { 1.0, 0.0, 1.0, 1.0 } }
-                                           },
-                                           8);
-    }
-
-  gtk_snapshot_pop (snapshot);
-
-}
-
-static void
-gtk_maze_dispose (GObject *object)
-{
-  GtkMaze *self = GTK_MAZE (object);
-
-  g_clear_pointer (&self->path, gsk_path_unref);
-  g_clear_pointer (&self->measure, gsk_path_measure_unref);
-  if (self->background)
-    {
-      g_signal_handlers_disconnect_matched (self->background, G_SIGNAL_MATCH_DATA, 0, 0, NULL, NULL, self);
-      g_clear_object (&self->background);
-    }
-
-  G_OBJECT_CLASS (gtk_maze_parent_class)->dispose (object);
-}
-
-static void
-gtk_maze_class_init (GtkMazeClass *klass)
-{
-  GtkWidgetClass *widget_class = GTK_WIDGET_CLASS (klass);
-  GObjectClass *object_class = G_OBJECT_CLASS (klass);
-
-  object_class->dispose = gtk_maze_dispose;
-
-  widget_class->measure = gtk_maze_measure;
-  widget_class->snapshot = gtk_maze_snapshot;
-}
-
-static void
-pointer_motion (GtkEventControllerMotion *controller,
-                double                    x,
-                double                    y,
-                GtkMaze                  *self)
-{
-  if (!self->active)
-    return;
-
-  if (gsk_path_measure_get_closest_point (self->measure, &GRAPHENE_POINT_INIT (x, y), NULL) <= MAZE_STROKE_SIZE_ACTIVE / 2.0f)
-    return;
-
-  self->active = FALSE;
-  gtk_widget_queue_draw (GTK_WIDGET (self));
-}
-
-static void
-pointer_leave (GtkEventControllerMotion *controller,
-               GtkMaze                  *self)
-{
-  if (!self->active)
-    {
-      self->active = TRUE;
-      gtk_widget_queue_draw (GTK_WIDGET (self));
-    }
-}
-
-static void
-gtk_maze_init (GtkMaze *self)
-{
-  GtkEventController *controller;
-
-  controller = GTK_EVENT_CONTROLLER (gtk_event_controller_motion_new ());
-  g_signal_connect (controller, "motion", G_CALLBACK (pointer_motion), self);
-  g_signal_connect (controller, "leave", G_CALLBACK (pointer_leave), self);
-  gtk_widget_add_controller (GTK_WIDGET (self), controller);
-
-  self->active = TRUE;
-}
-
-static void
-gtk_maze_set_path (GtkMaze *self,
-                   GskPath *path)
-{
-  g_clear_pointer (&self->path, gsk_path_unref);
-  g_clear_pointer (&self->measure, gsk_path_measure_unref);
-  self->path = gsk_path_ref (path);
-  self->measure = gsk_path_measure_new (path);
-
-  gtk_widget_queue_draw (GTK_WIDGET (self));
-}
-
-GtkWidget *
-gtk_maze_new (GskPath      *path,
-              GdkPaintable *background,
-              int           width,
-              int           height)
-{
-  GtkMaze *self;
-
-  self = g_object_new (GTK_TYPE_MAZE, NULL);
-
-  gtk_maze_set_path (self, path);
-  gsk_path_unref (path);
-  self->background = background;
-  if (self->background)
-    {
-      g_signal_connect_swapped (self->background, "invalidate-contents", G_CALLBACK (gtk_widget_queue_draw), self);
-      g_signal_connect_swapped (self->background, "invalidate-size", G_CALLBACK (gtk_widget_queue_resize), self);
-    }
-  self->width = width;
-  self->height = height;
-
-  return GTK_WIDGET (self);
-}
-
-static void
-add_point_to_maze (GtkBitset      *maze,
-                   GskPathBuilder *builder,
-                   guint           x,
-                   guint           y)
-{
-  gboolean set[4] = { };
-  guint dir;
-
-  gtk_bitset_add (maze, y * MAZE_WIDTH + x);
-
-  while (TRUE)
-    {
-      set[0] = set[0] || x == 0 || gtk_bitset_contains (maze, y * MAZE_WIDTH + x - 1);
-      set[1] = set[1] || y == 0 || gtk_bitset_contains (maze, (y - 1) * MAZE_WIDTH + x);
-      set[2] = set[2] || x + 1 == MAZE_WIDTH || gtk_bitset_contains (maze, y * MAZE_WIDTH + x + 1);
-      set[3] = set[3] || y + 1 == MAZE_HEIGHT || gtk_bitset_contains (maze, (y + 1) * MAZE_WIDTH + x);
-
-      if (set[0] && set[1] && set[2] && set[3])
-        return;
-
-      do
-        {
-          dir = g_random_int_range (0, 4);
-        }
-      while (set[dir]);
-
-      switch (dir)
-        {
-          case 0:
-            gsk_path_builder_move_to (builder, (x + 0.5) * MAZE_GRID_SIZE, (y + 0.5) * MAZE_GRID_SIZE);
-            gsk_path_builder_line_to (builder, (x - 0.5) * MAZE_GRID_SIZE, (y + 0.5) * MAZE_GRID_SIZE);
-            add_point_to_maze (maze, builder, x - 1, y);
-            break;
-
-          case 1:
-            gsk_path_builder_move_to (builder, (x + 0.5) * MAZE_GRID_SIZE, (y + 0.5) * MAZE_GRID_SIZE);
-            gsk_path_builder_line_to (builder, (x + 0.5) * MAZE_GRID_SIZE, (y - 0.5) * MAZE_GRID_SIZE);
-            add_point_to_maze (maze, builder, x, y - 1);
-            break;
-
-          case 2:
-            gsk_path_builder_move_to (builder, (x + 0.5) * MAZE_GRID_SIZE, (y + 0.5) * MAZE_GRID_SIZE);
-            gsk_path_builder_line_to (builder, (x + 1.5) * MAZE_GRID_SIZE, (y + 0.5) * MAZE_GRID_SIZE);
-            add_point_to_maze (maze, builder, x + 1, y);
-            break;
-
-          case 3:
-            gsk_path_builder_move_to (builder, (x + 0.5) * MAZE_GRID_SIZE, (y + 0.5) * MAZE_GRID_SIZE);
-            gsk_path_builder_line_to (builder, (x + 0.5) * MAZE_GRID_SIZE, (y + 1.5) * MAZE_GRID_SIZE);
-            add_point_to_maze (maze, builder, x, y + 1);
-            break;
-
-          default:
-            g_assert_not_reached ();
-            break;
-        }
-    }
-}
-
-static GskPath *
-create_path_for_maze (GtkWidget *widget)
-{
-  GskPathBuilder *builder;
-  GtkBitset *maze;
-
-  builder = gsk_path_builder_new ();
-  maze = gtk_bitset_new_empty ();
-  /* make sure the outer lines are unreachable:
-   * Set the full range, then remove the center again. */
-  gtk_bitset_add_range (maze, 0, MAZE_WIDTH * MAZE_HEIGHT);
-  gtk_bitset_remove_rectangle (maze, MAZE_WIDTH + 1, MAZE_WIDTH - 2, MAZE_HEIGHT - 2, MAZE_WIDTH);
-
-  /* Fill the maze */
-  add_point_to_maze (maze, builder, MAZE_WIDTH / 2, MAZE_HEIGHT / 2);
-
-  /* Add start and stop lines */
-  gsk_path_builder_move_to (builder, 1.5 * MAZE_GRID_SIZE, -0.5 * MAZE_GRID_SIZE);
-  gsk_path_builder_line_to (builder, 1.5 * MAZE_GRID_SIZE, 1.5 * MAZE_GRID_SIZE);
-  gsk_path_builder_move_to (builder, (MAZE_WIDTH - 1.5) * MAZE_GRID_SIZE, (MAZE_HEIGHT - 1.5) * MAZE_GRID_SIZE);
-  gsk_path_builder_line_to (builder, (MAZE_WIDTH - 1.5) * MAZE_GRID_SIZE, (MAZE_HEIGHT + 0.5) * MAZE_GRID_SIZE);
-
-
-  gtk_bitset_unref (maze);
-
-  return gsk_path_builder_free_to_path (builder);
-}
-
-GtkWidget *
-do_path_maze (GtkWidget *do_widget)
-{
-  static GtkWidget *window = NULL;
-
-  if (!window)
-    {
-      GtkWidget *maze;
-      GtkMediaStream *stream;
-      GskPath *path;
-
-      window = gtk_window_new ();
-      gtk_window_set_resizable (GTK_WINDOW (window), TRUE);
-      gtk_window_set_title (GTK_WINDOW (window), "Follow the maze with the mouse");
-      g_object_add_weak_pointer (G_OBJECT (window), (gpointer *)&window);
-
-#if 0
-      stream = gtk_media_file_new_for_resource ("/images/gtk-logo.webm");
-#else
-      stream = gtk_nuclear_media_stream_new ();
-#endif
-      gtk_media_stream_play (stream);
-      gtk_media_stream_set_loop (stream, TRUE);
-
-      path = create_path_for_maze (window);
-
-      maze = gtk_maze_new (path,
-                           GDK_PAINTABLE (stream),
-                           MAZE_WIDTH * MAZE_GRID_SIZE,
-                           MAZE_HEIGHT * MAZE_GRID_SIZE);
-
-      gtk_window_set_child (GTK_WINDOW (window), maze);
-    }
-
-  if (!gtk_widget_get_visible (window))
-    gtk_widget_show (window);
-  else
-    gtk_window_destroy (GTK_WINDOW (window));
-
-  return window;
-}

demos/gtk-demo/path_text.c

@@ -1,594 +0,0 @@
-/* Path/Curved Text
- *
- * This demo shows how to use GskPath to animate a path along another path.
- */
-
-#include <glib/gi18n.h>
-#include <gtk/gtk.h>
-
-#define GTK_TYPE_PATH_WIDGET (gtk_path_widget_get_type ())
-G_DECLARE_FINAL_TYPE (GtkPathWidget, gtk_path_widget, GTK, PATH_WIDGET, GtkWidget)
-
-#define POINT_SIZE 8
-
-enum {
-  PROP_0,
-  PROP_TEXT,
-  PROP_EDITABLE,
-  N_PROPS
-};
-
-struct _GtkPathWidget
-{
-  GtkWidget parent_instance;
-
-  char *text;
-  gboolean editable;
-
-  graphene_point_t points[4];
-
-  guint active_point;
-  float line_closest;
-
-  GskPath *line_path;
-  GskPathMeasure *line_measure;
-  GskPath *text_path;
-
-  GdkPaintable *background;
-};
-
-struct _GtkPathWidgetClass
-{
-  GtkWidgetClass parent_class;
-};
-
-static GParamSpec *properties[N_PROPS] = { NULL, };
-
-G_DEFINE_TYPE (GtkPathWidget, gtk_path_widget, GTK_TYPE_WIDGET)
-
-static GskPath *
-create_path_from_text (GtkWidget  *widget,
-                       const char *text)
-{
-  cairo_surface_t *surface;
-  cairo_t *cr;
-  cairo_path_t *path;
-  PangoLayout *layout;
-  PangoFontDescription *desc;
-  GskPath *result;
-
-  surface = cairo_recording_surface_create (CAIRO_CONTENT_COLOR_ALPHA, NULL);
-  cr = cairo_create (surface);
-
-  layout = gtk_widget_create_pango_layout (widget, text);
-  desc = pango_font_description_from_string ("sans bold 36");
-  pango_layout_set_font_description (layout, desc);
-  pango_font_description_free (desc);
-
-  cairo_move_to (cr, 0, - pango_layout_get_baseline (layout) / (double) PANGO_SCALE);
-  pango_cairo_layout_path (cr, layout);
-  path = cairo_copy_path (cr);
-  result = gsk_path_new_from_cairo (path);
-
-  cairo_path_destroy (path);
-  g_object_unref (layout);
-  cairo_destroy (cr);
-  cairo_surface_destroy (surface);
-
-  return result;
-}
-
-typedef struct
-{
-  GskPathMeasure *measure;
-  GskPathBuilder *builder;
-  double scale;
-} GtkPathTransform;
-
-static void
-gtk_path_transform_point (GskPathMeasure         *measure,
-                          const graphene_point_t *pt,
-                          float                   scale,
-                          graphene_point_t       *res)
-{
-  graphene_vec2_t tangent;
-
-  gsk_path_measure_get_point (measure, pt->x * scale, res, &tangent);
-
-  res->x -= pt->y * scale * graphene_vec2_get_y (&tangent);
-  res->y += pt->y * scale * graphene_vec2_get_x (&tangent);
-}
-
-static gboolean
-gtk_path_transform_op (GskPathOperation        op,
-                       const graphene_point_t *pts,
-                       gsize                   n_pts,
-                       float                   weight,
-                       gpointer                data)
-{
-  GtkPathTransform *transform = data;
-
-  switch (op)
-  {
-    case GSK_PATH_MOVE:
-      {
-        graphene_point_t res;
-        gtk_path_transform_point (transform->measure, &pts[0], transform->scale, &res);
-        gsk_path_builder_move_to (transform->builder, res.x, res.y);
-      }
-      break;
-
-    case GSK_PATH_LINE:
-      {
-        graphene_point_t res;
-        gtk_path_transform_point (transform->measure, &pts[1], transform->scale, &res);
-        gsk_path_builder_line_to (transform->builder, res.x, res.y);
-      }
-      break;
-
-    case GSK_PATH_CURVE:
-      {
-        graphene_point_t res[3];
-        gtk_path_transform_point (transform->measure, &pts[1], transform->scale, &res[0]);
-        gtk_path_transform_point (transform->measure, &pts[2], transform->scale, &res[1]);
-        gtk_path_transform_point (transform->measure, &pts[3], transform->scale, &res[2]);
-        gsk_path_builder_curve_to (transform->builder, res[0].x, res[0].y, res[1].x, res[1].y, res[2].x, res[2].y);
-      }
-      break;
-
-    case GSK_PATH_CONIC:
-      {
-        graphene_point_t res[2];
-        gtk_path_transform_point (transform->measure, &pts[1], transform->scale, &res[0]);
-        gtk_path_transform_point (transform->measure, &pts[2], transform->scale, &res[1]);
-        gsk_path_builder_conic_to (transform->builder, res[0].x, res[0].y, res[1].x, res[1].y, weight);
-      }
-      break;
-
-    case GSK_PATH_CLOSE:
-      gsk_path_builder_close (transform->builder);
-      break;
-
-    default:
-      g_assert_not_reached();
-      return FALSE;
-  }
-
-  return TRUE;
-}
-
-static GskPath *
-gtk_path_transform (GskPathMeasure *measure,
-                    GskPath        *path)
-{
-  GtkPathTransform transform = { measure, gsk_path_builder_new () };
-  graphene_rect_t bounds;
-
-  gsk_path_get_bounds (path, &bounds);
-  if (bounds.origin.x + bounds.size.width > 0)
-    transform.scale = gsk_path_measure_get_length (measure) / (bounds.origin.x + bounds.size.width);
-  else
-    transform.scale = 1.0f;
-
-  gsk_path_foreach (path, GSK_PATH_FOREACH_ALLOW_CURVE, gtk_path_transform_op, &transform);
-
-  return gsk_path_builder_free_to_path (transform.builder);
-}
-
-static void
-gtk_path_widget_clear_text_path (GtkPathWidget *self)
-{
-  g_clear_pointer (&self->text_path, gsk_path_unref);
-}
-
-static void
-gtk_path_widget_clear_paths (GtkPathWidget *self)
-{
-  gtk_path_widget_clear_text_path (self);
-
-  g_clear_pointer (&self->line_path, gsk_path_unref);
-  g_clear_pointer (&self->line_measure, gsk_path_measure_unref);
-}
-
-static void
-gtk_path_widget_create_text_path (GtkPathWidget *self)
-{
-  GskPath *path;
-
-  gtk_path_widget_clear_text_path (self);
-
-  if (self->line_measure == NULL)
-    return;
-
-  path = create_path_from_text (GTK_WIDGET (self), self->text);
-  self->text_path = gtk_path_transform (self->line_measure, path);
-
-  gsk_path_unref (path);
-}
-
-static void
-gtk_path_widget_create_paths (GtkPathWidget *self)
-{
-  double width = gtk_widget_get_width (GTK_WIDGET (self));
-  double height = gtk_widget_get_height (GTK_WIDGET (self));
-  GskPathBuilder *builder;
-
-  gtk_path_widget_clear_paths (self);
-
-  if (width <= 0 || height <= 0)
-    return;
-
-  builder = gsk_path_builder_new ();
-  gsk_path_builder_move_to (builder,
-                            self->points[0].x * width, self->points[0].y * height);
-  gsk_path_builder_curve_to (builder,
-                             self->points[1].x * width, self->points[1].y * height,
-                             self->points[2].x * width, self->points[2].y * height,
-                             self->points[3].x * width, self->points[3].y * height);
-  self->line_path = gsk_path_builder_free_to_path (builder);
-
-  self->line_measure = gsk_path_measure_new (self->line_path);
-
-  gtk_path_widget_create_text_path (self);
-}
-
-static void
-gtk_path_widget_allocate (GtkWidget *widget,
-                          int        width,
-                          int        height,
-                          int        baseline)
-{
-  GtkPathWidget *self = GTK_PATH_WIDGET (widget);
-
-  GTK_WIDGET_CLASS (gtk_path_widget_parent_class)->size_allocate (widget, width, height, baseline);
-
-  gtk_path_widget_create_paths (self);
-}
-
-static void
-gtk_path_widget_snapshot (GtkWidget   *widget,
-                          GtkSnapshot *snapshot)
-{
-  GtkPathWidget *self = GTK_PATH_WIDGET (widget);
-  double width = gtk_widget_get_width (widget);
-  double height = gtk_widget_get_height (widget);
-  GskPath *path;
-  GskStroke *stroke;
-  gsize i;
-
-  /* frosted glass the background */
-  gtk_snapshot_push_blur (snapshot, 100);
-  gdk_paintable_snapshot (self->background, snapshot, width, height);
-  gtk_snapshot_append_color (snapshot, &(GdkRGBA) { 1, 1, 1, 0.5 }, &GRAPHENE_RECT_INIT (0, 0, width, height));
-  gtk_snapshot_pop (snapshot);
-
-  /* draw the text */
-  if (self->text_path)
-    {
-      gtk_snapshot_push_fill (snapshot, self->text_path, GSK_FILL_RULE_WINDING);
-      gdk_paintable_snapshot (self->background, snapshot, width, height);
-
-      /* ... with an emboss effect */
-      stroke = gsk_stroke_new (2.0);
-      gtk_snapshot_translate (snapshot, &GRAPHENE_POINT_INIT(1, 1));
-      gtk_snapshot_push_stroke (snapshot, self->text_path, stroke);
-      gtk_snapshot_append_color (snapshot, &(GdkRGBA) { 0, 0, 0, 0.2 }, &GRAPHENE_RECT_INIT (0, 0, width, height));
-      gsk_stroke_free (stroke);
-      gtk_snapshot_pop (snapshot);
-
-      gtk_snapshot_pop (snapshot);
-    }
-
-  if (self->editable && self->line_path)
-    {
-      /* draw the control line */
-      stroke = gsk_stroke_new (1.0);
-      gtk_snapshot_push_stroke (snapshot, self->line_path, stroke);
-      gsk_stroke_free (stroke);
-      gtk_snapshot_append_color (snapshot, &(GdkRGBA) { 0, 0, 0, 1 }, &GRAPHENE_RECT_INIT (0, 0, width, height));
-      gtk_snapshot_pop (snapshot);
-    }
-
-  if (self->line_closest >= 0)
-    {
-      GskPathBuilder *builder;
-      graphene_point_t closest;
-
-      builder = gsk_path_builder_new ();
-      gsk_path_measure_get_point (self->line_measure, self->line_closest, &closest, NULL);
-      gsk_path_builder_add_circle (builder, &closest, POINT_SIZE);
-      path = gsk_path_builder_free_to_path (builder);
-
-      gtk_snapshot_push_fill (snapshot, path, GSK_FILL_RULE_WINDING);
-      gtk_snapshot_append_color (snapshot, &(GdkRGBA) { 0, 0, 1, 1 }, &GRAPHENE_RECT_INIT (0, 0, width, height));
-      gtk_snapshot_pop (snapshot);
-
-      gsk_path_unref (path);
-    }
-
-  if (self->editable && self->line_path)
-    {
-      GskPathBuilder *builder;
-
-      /* draw the points */
-      builder = gsk_path_builder_new ();
-      for (i = 0; i < 4; i++)
-        {
-          gsk_path_builder_add_circle (builder, &GRAPHENE_POINT_INIT (self->points[i].x * width, self->points[i].y * height), POINT_SIZE);
-        }
-      path = gsk_path_builder_free_to_path (builder);
-
-      gtk_snapshot_push_fill (snapshot, path, GSK_FILL_RULE_WINDING);
-      gtk_snapshot_append_color (snapshot, &(GdkRGBA) { 1, 1, 1, 1 }, &GRAPHENE_RECT_INIT (0, 0, width, height));
-      gtk_snapshot_pop (snapshot);
-
-      stroke = gsk_stroke_new (1.0);
-      gtk_snapshot_push_stroke (snapshot, path, stroke);
-      gsk_stroke_free (stroke);
-      gtk_snapshot_append_color (snapshot, &(GdkRGBA) { 0, 0, 0, 1 }, &GRAPHENE_RECT_INIT (0, 0, width, height));
-      gtk_snapshot_pop (snapshot);
-
-      gsk_path_unref (path);
-    }
-}
-
-static void
-gtk_path_widget_set_text (GtkPathWidget *self,
-                          const char    *text)
-{
-  if (g_strcmp0 (self->text, text) == 0)
-    return;
-
-  g_free (self->text);
-  self->text = g_strdup (text);
-
-  gtk_path_widget_create_paths (self);
-
-  gtk_widget_queue_draw (GTK_WIDGET (self));
-
-  g_object_notify_by_pspec (G_OBJECT (self), properties[PROP_TEXT]);
-}
-
-static void
-gtk_path_widget_set_editable (GtkPathWidget *self,
-                              gboolean       editable)
-{
-  if (self->editable == editable)
-    return;
-
-  self->editable = editable;
-
-  gtk_widget_queue_draw (GTK_WIDGET (self));
-
-  g_object_notify_by_pspec (G_OBJECT (self), properties[PROP_EDITABLE]);
-}
-
-static void
-gtk_path_widget_set_property (GObject      *object,
-                              guint         prop_id,
-                              const GValue *value,
-                              GParamSpec   *pspec)
-
-{
-  GtkPathWidget *self = GTK_PATH_WIDGET (object);
-
-  switch (prop_id)
-    {
-    case PROP_TEXT:
-      gtk_path_widget_set_text (self, g_value_get_string (value));
-      break;
-
-    case PROP_EDITABLE:
-      gtk_path_widget_set_editable (self, g_value_get_boolean (value));
-      break;
-
-    default:
-      G_OBJECT_WARN_INVALID_PROPERTY_ID (object, prop_id, pspec);
-      break;
-    }
-}
-
-static void
-gtk_path_widget_get_property (GObject    *object,
-                              guint       prop_id,
-                              GValue     *value,
-                              GParamSpec *pspec)
-{
-  GtkPathWidget *self = GTK_PATH_WIDGET (object);
-
-  switch (prop_id)
-    {
-    case PROP_TEXT:
-      g_value_set_string (value, self->text);
-      break;
-
-    case PROP_EDITABLE:
-      g_value_set_boolean (value, self->editable);
-      break;
-
-    default:
-      G_OBJECT_WARN_INVALID_PROPERTY_ID (object, prop_id, pspec);
-      break;
-    }
-}
-
-static void
-gtk_path_widget_dispose (GObject *object)
-{
-  GtkPathWidget *self = GTK_PATH_WIDGET (object);
-
-  gtk_path_widget_clear_paths (self);
-
-  G_OBJECT_CLASS (gtk_path_widget_parent_class)->dispose (object);
-}
-
-static void
-gtk_path_widget_class_init (GtkPathWidgetClass *klass)
-{
-  GtkWidgetClass *widget_class = GTK_WIDGET_CLASS (klass);
-  GObjectClass *object_class = G_OBJECT_CLASS (klass);
-
-  object_class->dispose = gtk_path_widget_dispose;
-  object_class->set_property = gtk_path_widget_set_property;
-  object_class->get_property = gtk_path_widget_get_property;
-
-  widget_class->size_allocate = gtk_path_widget_allocate;
-  widget_class->snapshot = gtk_path_widget_snapshot;
-
-  properties[PROP_TEXT] =
-    g_param_spec_string ("text",
-                         "text",
-                         "Text transformed along a path",
-                         NULL,
-                         G_PARAM_READWRITE | G_PARAM_EXPLICIT_NOTIFY | G_PARAM_STATIC_STRINGS);
-
-  properties[PROP_EDITABLE] =
-    g_param_spec_boolean ("editable",
-                          "editable",
-                          "If the path can be edited by the user",
-                          FALSE,
-                          G_PARAM_READWRITE | G_PARAM_EXPLICIT_NOTIFY | G_PARAM_STATIC_STRINGS);
-
-  g_object_class_install_properties (object_class, N_PROPS, properties);
-}
-
-static void
-drag_begin (GtkGestureDrag *gesture,
-            double          x,
-            double          y,
-            GtkPathWidget  *self)
-{
-  graphene_point_t mouse = GRAPHENE_POINT_INIT (x, y);
-  double width = gtk_widget_get_width (GTK_WIDGET (self));
-  double height = gtk_widget_get_height (GTK_WIDGET (self));
-  gsize i;
-
-  for (i = 0; i < 4; i++)
-    {
-      if (graphene_point_distance (&GRAPHENE_POINT_INIT (self->points[i].x * width, self->points[i].y * height), &mouse, NULL, NULL) <= POINT_SIZE)
-        {
-          self->active_point = i;
-          break;
-        }
-    }
-  if (i == 4)
-    {
-      gtk_gesture_set_state (GTK_GESTURE (gesture), GTK_EVENT_SEQUENCE_DENIED);
-      return;
-    }
-
-  gtk_widget_queue_draw (GTK_WIDGET (self));
-}
-
-static void
-drag_update (GtkGestureDrag *drag,
-             double          offset_x,
-             double          offset_y,
-             GtkPathWidget  *self)
-{
-  double width = gtk_widget_get_width (GTK_WIDGET (self));
-  double height = gtk_widget_get_height (GTK_WIDGET (self));
-  double start_x, start_y;
-
-  gtk_gesture_drag_get_start_point (drag, &start_x, &start_y);
-
-  self->points[self->active_point] = GRAPHENE_POINT_INIT ((start_x + offset_x) / width,
-                                                          (start_y + offset_y) / height);
-  self->points[self->active_point].x = CLAMP (self->points[self->active_point].x, 0, 1);
-  self->points[self->active_point].y = CLAMP (self->points[self->active_point].y, 0, 1);
-
-  gtk_path_widget_create_paths (self);
-
-  gtk_widget_queue_draw (GTK_WIDGET (self));
-}
-
-static void
-pointer_motion (GtkEventControllerMotion *controller,
-                double                    x,
-                double                    y,
-                GtkPathWidget            *self)
-{
-  gsk_path_measure_get_closest_point_full (self->line_measure,
-                                           &GRAPHENE_POINT_INIT (x, y),
-                                           INFINITY,
-                                           NULL, NULL,
-                                           &self->line_closest,
-                                           NULL);
-
-  gtk_widget_queue_draw (GTK_WIDGET (self));
-}
-
-static void
-pointer_leave (GtkEventControllerMotion *controller,
-               GtkPathWidget            *self)
-{
-  self->line_closest = -1;
-
-  gtk_widget_queue_draw (GTK_WIDGET (self));
-}
-
-static void
-gtk_path_widget_init (GtkPathWidget *self)
-{
-  GtkEventController *controller;
-
-  controller = GTK_EVENT_CONTROLLER (gtk_gesture_drag_new ());
-  g_signal_connect (controller, "drag-begin", G_CALLBACK (drag_begin), self);
-  g_signal_connect (controller, "drag-update", G_CALLBACK (drag_update), self);
-  g_signal_connect (controller, "drag-end", G_CALLBACK (drag_update), self);
-  gtk_widget_add_controller (GTK_WIDGET (self), controller);
-
-  controller = GTK_EVENT_CONTROLLER (gtk_event_controller_motion_new ());
-  g_signal_connect (controller, "enter", G_CALLBACK (pointer_motion), self);
-  g_signal_connect (controller, "motion", G_CALLBACK (pointer_motion), self);
-  g_signal_connect (controller, "leave", G_CALLBACK (pointer_leave), self);
-  gtk_widget_add_controller (GTK_WIDGET (self), controller);
-
-  self->line_closest = -1;
-
-  self->points[0] = GRAPHENE_POINT_INIT (0.1, 0.9);
-  self->points[1] = GRAPHENE_POINT_INIT (0.3, 0.1);
-  self->points[2] = GRAPHENE_POINT_INIT (0.7, 0.1);
-  self->points[3] = GRAPHENE_POINT_INIT (0.9, 0.9);
-
-  self->background = GDK_PAINTABLE (gdk_texture_new_from_resource ("/sliding_puzzle/portland-rose.jpg"));
-
-  gtk_path_widget_set_text (self, "It's almost working");
-}
-
-GtkWidget *
-gtk_path_widget_new (void)
-{
-  GtkPathWidget *self;
-
-  self = g_object_new (GTK_TYPE_PATH_WIDGET, NULL);
-
-  return GTK_WIDGET (self);
-}
-
-GtkWidget *
-do_path_text (GtkWidget *do_widget)
-{
-  static GtkWidget *window = NULL;
-
-  if (!window)
-    {
-      GtkBuilder *builder;
-
-      g_type_ensure (GTK_TYPE_PATH_WIDGET);
-
-      builder = gtk_builder_new_from_resource ("/path_text/path_text.ui");
-      window = GTK_WIDGET (gtk_builder_get_object (builder, "window"));
-      gtk_window_set_display (GTK_WINDOW (window),
-                              gtk_widget_get_display (do_widget));
-      g_object_add_weak_pointer (G_OBJECT (window), (gpointer *) &window);
-      g_object_unref (builder);
-    }
-
-  if (!gtk_widget_get_visible (window))
-    gtk_widget_show (window);
-  else
-    gtk_window_destroy (GTK_WINDOW (window));
-
-  return window;
-}

demos/gtk-demo/path_text.ui

@@ -1,38 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<interface>
-  <object class="GtkWindow" id="window">
-    <property name="title" translatable="yes">Text along a Path</property>
-    <child type="titlebar">
-      <object class="GtkHeaderBar">
-        <child type="end">
-          <object class="GtkToggleButton" id="edit-toggle">
-            <property name="icon-name">document-edit-symbolic</property>
-          </object>
-        </child>
-      </object>
-    </child>
-    <child>
-      <object class="GtkBox">
-        <property name="orientation">vertical</property>
-        <child>
-          <object class="GtkRevealer">
-            <property name="reveal-child" bind-source="edit-toggle" bind-property="active" bind-flags="sync-create"></property>
-            <child>
-              <object class="GtkEntry" id="text">
-                <property name="text">Through the looking glass</property>
-              </object>
-            </child>
-          </object>
-        </child>
-        <child>
-          <object class="GtkPathWidget" id="view">
-            <property name="editable" bind-source="edit-toggle" bind-property="active" bind-flags="sync-create"></property>
-            <property name="text" bind-source="text" bind-property="text" bind-flags="sync-create"></property>
-            <property name="hexpand">true</property>
-            <property name="vexpand">true</property>
-          </object>
-        </child>
-      </object>
-    </child>
-  </object>
-</interface>

demos/node-editor/meson.build

@@ -19,12 +19,24 @@ executable('gtk4-node-editor',
   ] + common_cflags,
   win_subsystem: 'windows',
   link_args: extra_demo_ldflags,
-  install: false,
+  install: true,
 )
 
-# icons, don't install them until we decide to install gtk4-node-editor
-#icontheme_dir = join_paths(gtk_datadir, 'icons/hicolor')
+# icons
+icontheme_dir = join_paths(gtk_datadir, 'icons/hicolor')
+
+foreach size: ['scalable', 'symbolic']
+  install_subdir('data/' + size, install_dir: icontheme_dir)
+endforeach
+
+# desktop file
+install_data('org.gtk.gtk4.NodeEditor.desktop', install_dir: gtk_applicationsdir)
+
+# appdata
+configure_file(
+  input: 'org.gtk.gtk4.NodeEditor.appdata.xml.in',
+  output: 'org.gtk.gtk4.NodeEditor.appdata.xml',
+  configuration: appdata_config,
+  install_dir: gtk_appdatadir
+)
 
-#foreach size: ['scalable', 'symbolic']
-#  install_subdir('data/' + size, install_dir: icontheme_dir)
-#endforeach

demos/node-editor/org.gtk.gtk4.NodeEditor.appdata.xml.in

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<component type="desktop">
+  <id>org.gtk.gtk4.NodeEditor</id>
+  <launchable type="desktop-id">org.gtk.gtk4.NodeEditor.desktop</launchable>
+  <metadata_license>CC0-1.0</metadata_license>
+  <project_license>LGPL-2.1-or-later</project_license>
+  <name>GTK Node Editor</name>
+  <summary>Program to edit render node files</summary>
+  <description>
+    <p>
+      GTK Node Editor is a simple application to show and edit
+      render node files.
+    </p>
+    <p>
+      Render node files can e.g. be created by the GTK inspector.
+    </p>
+  </description>
+  <screenshots>
+    <screenshot>
+      <image>https://static.gnome.org/appdata/gtk4-node-editor/gtk4-node-editor.png</image>
+      <caption>Node Editor</caption>
+    </screenshot>
+  </screenshots>
+  <kudos>
+    <kudo>HiDpiIcon</kudo>
+    <kudo>ModernToolkit</kudo>
+  </kudos>
+  <url type="homepage">https://www.gtk.org</url>
+  <translation type="gettext">gtk-4.0</translation>
+  <update_contact>matthias.clasen_at_gmail.com</update_contact>
+  <developer_name>Matthias Clasen and others</developer_name>
+  <content_rating type="oars-1.1"/>
+  <releases>
+    <release version="@BUILD_VERSION@">
+      <description>
+        <p>A new build of GTK.</p>
+      </description>
+    </release>
+  </releases>
+</component>

demos/node-editor/org.gtk.gtk4.NodeEditor.desktop

@@ -0,0 +1,9 @@
+[Desktop Entry]
+Name=Node Editor
+Comment=An application that edits render nodes
+Exec=gtk4-node-editor
+Icon=org.gtk.gtk4.NodeEditor
+Terminal=false
+Type=Application
+StartupNotify=true
+Categories=Development;GTK;

demos/widget-factory/heif-loader.c

@@ -0,0 +1,257 @@
+#include "heif-loader.h"
+#include <gtk/gtk.h>
+#include <libheif/heif.h>
+
+static void
+describe_nclx_color_profile (const struct heif_color_profile_nclx *nclx,
+                             GString                              *s)
+{
+  if (nclx->color_primaries == heif_color_primaries_unspecified)
+    return;
+
+  if (nclx->color_primaries == heif_color_primaries_ITU_R_BT_709_5)
+    {
+      if (nclx->transfer_characteristics == heif_transfer_characteristic_IEC_61966_2_1 &&
+          (nclx->matrix_coefficients == heif_matrix_coefficients_ITU_R_BT_470_6_System_B_G ||
+           nclx->matrix_coefficients == heif_matrix_coefficients_ITU_R_BT_601_6))
+        {
+          g_string_append (s, "sRGB");
+          return;
+        }
+
+      if (nclx->transfer_characteristics == heif_transfer_characteristic_linear &&
+          (nclx->matrix_coefficients == heif_matrix_coefficients_ITU_R_BT_470_6_System_B_G ||
+           nclx->matrix_coefficients == heif_matrix_coefficients_ITU_R_BT_601_6))
+        {
+          g_string_append (s, "sRGB linear");
+          return;
+        }
+    }
+
+ if (nclx->color_primaries == heif_color_primaries_ITU_R_BT_2020_2_and_2100_0)
+    {
+      if (nclx->transfer_characteristics == heif_transfer_characteristic_ITU_R_BT_2100_0_PQ &&
+          nclx->matrix_coefficients == heif_matrix_coefficients_ITU_R_BT_2020_2_non_constant_luminance)
+        {
+          g_string_append (s, "BT.2020 PQ");
+          return;
+        }
+
+      if (nclx->transfer_characteristics == heif_transfer_characteristic_ITU_R_BT_2100_0_HLG &&
+          nclx->matrix_coefficients == heif_matrix_coefficients_ITU_R_BT_2020_2_non_constant_luminance)
+        {
+          g_string_append (s, "BT.2020 HLG");
+          return;
+        }
+    }
+
+  if (nclx->color_primaries == heif_color_primaries_SMPTE_EG_432_1)
+    {
+      if (nclx->transfer_characteristics == heif_transfer_characteristic_ITU_R_BT_2100_0_PQ)
+        {
+          g_string_append (s, "P3 PQ");
+          return;
+        }
+    }
+
+  g_string_append_printf (s, "%d/%d/%d",
+                          nclx->color_primaries,
+                          nclx->matrix_coefficients,
+                          nclx->transfer_characteristics);
+}
+
+GdkTexture *
+load_heif_image (const char  *resource_path,
+                 GString     *details,
+                 GError     **error)
+{
+  struct heif_context *ctx;
+  struct heif_error err;
+  struct heif_image_handle *handle = NULL;
+  struct heif_image *image = NULL;
+  enum heif_chroma chroma;
+  GdkMemoryFormat format;
+  const char *format_name;
+  uint8_t *data = NULL;
+  gsize size;
+  int width, height, bpp, stride, bits;
+  GBytes *bytes;
+  GdkTexture *texture = NULL;
+  GdkColorProfile *profile = NULL;
+  char *profile_type = NULL;
+
+  ctx = heif_context_alloc ();
+
+  bytes = g_resources_lookup_data (resource_path, 0, NULL);
+  data = (uint8_t *) g_bytes_get_data (bytes, &size);
+
+  err = heif_context_read_from_memory (ctx, data, size, NULL);
+
+  g_bytes_unref (bytes);
+
+  if (err.code != heif_error_Ok)
+    {
+      g_set_error_literal (error, G_IO_ERROR, G_IO_ERROR_FAILED, err.message);
+      goto out;
+    }
+
+  err = heif_context_get_primary_image_handle (ctx, &handle);
+  if (err.code != heif_error_Ok)
+    {
+      g_set_error_literal (error, G_IO_ERROR, G_IO_ERROR_FAILED, err.message);
+      goto out;
+    }
+
+  switch (heif_image_handle_get_color_profile_type (handle))
+    {
+    case heif_color_profile_type_not_present:
+      break;
+    case heif_color_profile_type_rICC:
+    case heif_color_profile_type_prof:
+      {
+        guchar *icc_data;
+        gsize icc_size;
+
+        profile_type = g_strdup ("icc");
+        icc_size = heif_image_handle_get_raw_color_profile_size (handle);
+        icc_data = g_new0 (guchar, icc_size);
+        err = heif_image_handle_get_raw_color_profile (handle, icc_data);
+        if (err.code == heif_error_Ok)
+          {
+            bytes = g_bytes_new (icc_data, icc_size);
+            profile = gdk_color_profile_new_from_icc_bytes (bytes, NULL);
+            g_bytes_unref (bytes);
+          }
+        g_free (icc_data);
+      }
+      break;
+    case heif_color_profile_type_nclx:
+      {
+        struct heif_color_profile_nclx *nclx = NULL;
+
+        err = heif_image_handle_get_nclx_color_profile (handle, &nclx);
+        if (err.code == heif_error_Ok)
+          {
+            GString *s;
+
+            s = g_string_new ("");
+            describe_nclx_color_profile (nclx, s);
+            profile_type = g_string_free (s, FALSE);
+            profile = gdk_color_profile_new_from_cicp (nclx->color_primaries,
+                                                       nclx->transfer_characteristics,
+                                                       0,
+                                                       TRUE,
+                                                       NULL);
+            heif_nclx_color_profile_free (nclx);
+          }
+      }
+      break;
+    default:
+      g_assert_not_reached ();
+    }
+
+  g_string_append_printf (details, "%d × %d pixels\n%d bits of luma, %d bits of chroma%s\n",
+                          heif_image_handle_get_width (handle),
+                          heif_image_handle_get_height (handle),
+                          heif_image_handle_get_luma_bits_per_pixel (handle),
+                          heif_image_handle_get_chroma_bits_per_pixel (handle),
+                          heif_image_handle_has_alpha_channel (handle) ? ", with alpha" : "");
+
+  if (profile_type)
+    {
+      g_string_append_printf (details, "color profile: %s\n", profile_type);
+      g_free (profile_type);
+    }
+
+  if (profile == NULL)
+    profile = g_object_ref (gdk_color_profile_get_srgb ());
+
+  if (heif_image_handle_has_alpha_channel (handle))
+    {
+      if (heif_image_handle_get_luma_bits_per_pixel (handle) > 8 ||
+          heif_image_handle_get_chroma_bits_per_pixel (handle) > 8)
+        {
+          chroma = heif_chroma_interleaved_RRGGBBAA_BE;
+          format = GDK_MEMORY_R16G16B16A16;
+          format_name = "R<sub>16</sub>G<sub>16</sub>B<sub>16</sub>A<sub>16</sub>";
+        }
+      else
+        {
+          chroma = heif_chroma_interleaved_RGBA;
+          format = GDK_MEMORY_R8G8B8A8;
+          format_name = "R<sub>8</sub>G<sub>8</sub>B<sub>8</sub>A<sub>8</sub>";
+        }
+    }
+  else
+    {
+      if (heif_image_handle_get_luma_bits_per_pixel (handle) > 8 ||
+          heif_image_handle_get_chroma_bits_per_pixel (handle) > 8)
+        {
+          chroma = heif_chroma_interleaved_RRGGBB_BE;
+          format = GDK_MEMORY_R16G16B16;
+          format_name = "R<sub>16</sub>G<sub>16</sub>B<sub>16</sub>";
+        }
+      else
+        {
+          chroma = heif_chroma_interleaved_RGB;
+          format = GDK_MEMORY_R8G8B8;
+          format_name = "R<sub>8</sub>G<sub>8</sub>B<sub>8</sub>";
+        }
+    }
+
+  err = heif_decode_image (handle, &image, heif_colorspace_RGB, chroma, NULL);
+  if (err.code != heif_error_Ok)
+    {
+      g_set_error_literal (error, G_IO_ERROR, G_IO_ERROR_FAILED, err.message);
+      goto out;
+    }
+
+  width = heif_image_get_width (image, heif_channel_interleaved);
+  height = heif_image_get_height (image, heif_channel_interleaved);
+  bpp = heif_image_get_bits_per_pixel (image, heif_channel_interleaved);
+  data = (uint8_t*)heif_image_get_plane_readonly (image, heif_channel_interleaved, &stride);
+  bits = heif_image_get_bits_per_pixel_range (image, heif_channel_interleaved);
+
+  g_string_append_printf (details, "texture format %s", format_name);
+
+  if (format == GDK_MEMORY_R16G16B16A16 || format == GDK_MEMORY_R16G16B16)
+    {
+      /* Shift image data to full 16bit range */
+      int shift = 16 - bits;
+      if (shift > 0)
+        {
+          for (int y = 0; y < height; ++y)
+            {
+              uint8_t *row = data + y * stride;
+
+              for (int x = 0; x < stride; x += 2)
+                {
+                  uint8_t* p = &row[x];
+                  int v = (p[0] << 8) | p[1];
+                  v = (v << shift) | (v >> (16 - shift));
+                  p[1] = (uint8_t) (v >> 8);
+                  p[0] = (uint8_t) (v & 0xFF);
+                }
+            }
+        }
+    }
+
+  bytes = g_bytes_new_with_free_func (data, height * stride * bpp, (GDestroyNotify)heif_image_release, image);
+
+  image = NULL;
+
+  texture = gdk_memory_texture_new_with_color_profile (width, height,
+                                                       format, profile,
+                                                       bytes, stride);
+  g_bytes_unref (bytes);
+  g_object_unref (profile);
+
+out:
+  heif_context_free (ctx);
+  if (handle)
+    heif_image_handle_release (handle);
+  if (image)
+    heif_image_release (image);
+
+  return texture;
+}

demos/widget-factory/heif-loader.h

@@ -0,0 +1,7 @@
+#pragma once
+
+#include <gtk/gtk.h>
+
+GdkTexture *load_heif_image (const char  *resource_path,
+                             GString     *details,
+                             GError     **error);

demos/widget-factory/meson.build

@@ -73,10 +73,12 @@ else
   )
 endif
 
+libheif_dep = dependency('libheif')
+
 executable('gtk4-widget-factory',
-  sources: ['widget-factory.c', widgetfactory_resources],
+  sources: ['widget-factory.c', 'heif-loader.c', widgetfactory_resources],
   c_args: common_cflags,
-  dependencies: [ libgtk_dep, demo_conf_h ],
+  dependencies: [ libgtk_dep, libheif_dep, demo_conf_h ],
   include_directories: confinc,
   win_subsystem: 'windows',
   link_args: extra_demo_ldflags,

demos/widget-factory/widget-factory.c

@@ -27,6 +27,8 @@
 
 #include "demo_conf.h"
 
+#include "heif-loader.h"
+
 static void
 change_dark_state (GSimpleAction *action,
                     GVariant      *state,
@@ -2360,6 +2362,15 @@ activate (GApplication *app)
   model = (GMenuModel *)gtk_builder_get_object (builder, "new_style_context_menu_model");
   set_up_context_popover (widget, model);
 
+  widget = (GtkWidget *)gtk_builder_get_object (builder, "hdr_picture");
+  widget2 = (GtkWidget *)gtk_builder_get_object (builder, "hdr_label");
+  GString *details = g_string_new ("");
+  GdkTexture *texture = load_heif_image ("/org/gtk/WidgetFactory4/hdr-example.heif", details, NULL);
+  gtk_picture_set_paintable (GTK_PICTURE (widget), GDK_PAINTABLE (texture));
+  gtk_label_set_label (GTK_LABEL (widget2), details->str);
+  g_string_free (details, TRUE);
+  g_object_unref (texture);
+
   gtk_window_present (window);
 
   g_object_unref (builder);

demos/widget-factory/widget-factory.css

@@ -6,3 +6,10 @@
 .toolbar {
   -gtk-icon-style: symbolic;
 }
+
+.gtk-gradient-color {
+  background: linear-gradient(to right, lime, red);
+}
+.gtk-gradient-monochrome {
+  background: linear-gradient(to right, black, white);
+}

demos/widget-factory/widget-factory.gresource.xml

@@ -110,6 +110,7 @@
     <file>icons/scalable/status/weather-severe-alert-symbolic.svg</file>
     <file>icons/scalable/status/weather-showers-symbolic.svg</file>
     <file>icons/scalable/status/weather-snow-symbolic.svg</file>
+    <file>hdr-example.heif</file>
 
   </gresource>
   <gresource prefix="/org/gtk/WidgetFactory4">
@@ -118,5 +119,12 @@
     <file>portland-rose.jpg</file>
     <file>nyc.jpg</file>
     <file>beach.jpg</file>
+    <file>linear-gradient-color.png</file>
+    <file>linear-gradient-monochrome.png</file>
+    <file>srgb-gradient-color.png</file>
+    <file>srgb-gradient-monochrome.png</file>
+    <file>color-profile-check.png</file>
+    <file>color-profile-check.jpeg</file>
+    <file>color-profile-check.tiff</file>
   </gresource>
 </gresources>

demos/widget-factory/widget-factory.ui

@@ -1346,13 +1346,173 @@ Suspendisse feugiat quam quis dolor accumsan cursus.</property>
                             <child>
                               <object class="GtkNotebookPage">
                                 <property name="child">
-                                  <object class="GtkBox" id="box8">
-                                    <property name="orientation">1</property>
+                                  <object class="GtkGrid">
+                                    <property name="hexpand">0</property>
+                                    <property name="row-spacing">6</property>
+                                    <property name="column-spacing">6</property>
+                                    <property name="margin-start">6</property>
+                                    <property name="margin-end">6</property>
+                                    <property name="margin-top">6</property>
+                                    <property name="margin-bottom">6</property>
+                                    <property name="row-homogeneous">1</property>
+                                    <property name="valign">start</property>
+                                    <child>
+                                      <object class="GtkLabel">
+                                        <property name="label" translatable="yes">color</property>
+                                        <style>
+                                          <class name="caption-heading"/>
+                                        </style>
+                                        <layout>
+                                          <property name="column">0</property>
+                                          <property name="row">0</property>
+                                          <property name="column-span">2</property>
+                                        </layout>
+                                      </object>
+                                    </child>
+                                    <child>
+                                      <object class="GtkLabel">
+                                        <property name="label">sRGB</property>
+                                        <layout>
+                                          <property name="column">0</property>
+                                          <property name="row">1</property>
+                                        </layout>
+                                      </object>
+                                    </child>
+                                    <child>
+                                      <object class="GtkPicture">
+                                        <property name="file">resource:///org/gtk/WidgetFactory4/srgb-gradient-color.png</property>
+                                        <property name="can-shrink">0</property>
+                                        <property name="keep-aspect-ratio">0</property>
+                                        <property name="hexpand">1</property>
+                                        <layout>
+                                          <property name="column">1</property>
+                                          <property name="row">1</property>
+                                        </layout>
+                                      </object>
+                                    </child>
+                                    <child>
+                                      <object class="GtkLabel">
+                                        <property name="label">GTK</property>
+                                        <layout>
+                                          <property name="column">0</property>
+                                          <property name="row">2</property>
+                                        </layout>
+                                      </object>
+                                    </child>
+                                    <child>
+                                      <object class="GtkPicture">
+                                        <property name="width-request">128</property>
+                                        <property name="keep-aspect-ratio">0</property>
+                                        <style>
+                                          <class name="gtk-gradient-color"/>
+                                        </style>
+                                        <layout>
+                                          <property name="column">1</property>
+                                          <property name="row">2</property>
+                                        </layout>
+                                      </object>
+                                    </child>
+                                    <child>
+                                      <object class="GtkLabel">
+                                        <property name="label">linear</property>
+                                        <layout>
+                                          <property name="column">0</property>
+                                          <property name="row">3</property>
+                                        </layout>
+                                      </object>
+                                    </child>
+                                    <child>
+                                      <object class="GtkPicture">
+                                        <property name="file">resource:///org/gtk/WidgetFactory4/linear-gradient-color.png</property>
+                                        <property name="can-shrink">0</property>
+                                        <property name="keep-aspect-ratio">0</property>
+                                        <layout>
+                                          <property name="column">1</property>
+                                          <property name="row">3</property>
+                                        </layout>
+                                      </object>
+                                    </child>
+                                    <child>
+                                      <object class="GtkLabel">
+                                        <property name="label" translatable="yes">monochrome</property>
+                                        <style>
+                                          <class name="caption-heading"/>
+                                        </style>
+                                        <layout>
+                                          <property name="column">0</property>
+                                          <property name="row">4</property>
+                                          <property name="column-span">2</property>
+                                        </layout>
+                                      </object>
+                                    </child>
+                                    <child>
+                                      <object class="GtkLabel">
+                                        <property name="label">sRGB</property>
+                                        <layout>
+                                          <property name="column">0</property>
+                                          <property name="row">5</property>
+                                        </layout>
+                                      </object>
+                                    </child>
+                                    <child>
+                                      <object class="GtkPicture">
+                                        <property name="file">resource:///org/gtk/WidgetFactory4/srgb-gradient-monochrome.png</property>
+                                        <property name="can-shrink">0</property>
+                                        <property name="keep-aspect-ratio">0</property>
+                                        <property name="hexpand">1</property>
+                                        <layout>
+                                          <property name="column">1</property>
+                                          <property name="row">5</property>
+                                        </layout>
+                                      </object>
+                                    </child>
+                                    <child>
+                                      <object class="GtkLabel">
+                                        <property name="label">GTK</property>
+                                        <layout>
+                                          <property name="column">0</property>
+                                          <property name="row">6</property>
+                                        </layout>
+                                      </object>
+                                    </child>
+                                    <child>
+                                      <object class="GtkPicture">
+                                        <property name="width-request">128</property>
+                                        <property name="keep-aspect-ratio">0</property>
+                                        <style>
+                                          <class name="gtk-gradient-monochrome"/>
+                                        </style>
+                                        <layout>
+                                          <property name="column">1</property>
+                                          <property name="row">6</property>
+                                        </layout>
+                                      </object>
+                                    </child>
+                                    <child>
+                                      <object class="GtkLabel">
+                                        <property name="label">linear</property>
+                                        <layout>
+                                          <property name="column">0</property>
+                                          <property name="row">7</property>
+                                        </layout>
+                                      </object>
+                                    </child>
+                                    <child>
+                                      <object class="GtkPicture">
+                                        <property name="file">resource:///org/gtk/WidgetFactory4/linear-gradient-monochrome.png</property>
+                                        <property name="can-shrink">0</property>
+                                        <property name="keep-aspect-ratio">0</property>
+                                        <layout>
+                                          <property name="column">1</property>
+                                          <property name="row">7</property>
+                                        </layout>
+                                      </object>
+                                    </child>
                                   </object>
                                 </property>
                                 <property name="tab">
                                   <object class="GtkLabel" id="label8">
-                                    <property name="label" translatable="1">page 1</property>
+                                    <property name="label" translatable="1">Gradients</property>
                                   </object>
                                 </property>
                               </object>
@@ -1361,13 +1521,92 @@ Suspendisse feugiat quam quis dolor accumsan cursus.</property>
                               <object class="GtkNotebookPage">
                                 <property name="position">1</property>
                                 <property name="child">
-                                  <object class="GtkBox" id="box10">
-                                    <property name="orientation">1</property>
+                                  <object class="GtkGrid">
+                                    <property name="hexpand">0</property>
+                                    <property name="row-spacing">6</property>
+                                    <property name="column-spacing">6</property>
+                                    <property name="margin-start">6</property>
+                                    <property name="margin-end">6</property>
+                                    <property name="margin-top">6</property>
+                                    <property name="margin-bottom">6</property>
+                                    <property name="row-homogeneous">1</property>
+                                    <property name="valign">start</property>
+                                    <child>
+                                      <object class="GtkLabel">
+                                        <property name="label" translatable="yes">image loading</property>
+                                        <style>
+                                          <class name="caption-heading"/>
+                                        </style>
+                                        <layout>
+                                          <property name="column">0</property>
+                                          <property name="row">0</property>
+                                          <property name="column-span">2</property>
+                                        </layout>
+                                      </object>
+                                    </child>
+                                    <child>
+                                      <object class="GtkImage">
+                                        <property name="paintable">resource:///org/gtk/WidgetFactory4/color-profile-check.png</property>
+                                        <layout>
+                                          <property name="column">0</property>
+                                          <property name="row">1</property>
+                                        </layout>
+                                      </object>
+                                    </child>
+                                    <child>
+                                      <object class="GtkLabel">
+                                        <property name="label">PNG</property>
+                                        <property name="hexpand">1</property>
+                                        <layout>
+                                          <property name="column">1</property>
+                                          <property name="row">1</property>
+                                        </layout>
+                                      </object>
+                                    </child>
+                                    <child>
+                                      <object class="GtkImage">
+                                        <property name="paintable">resource:///org/gtk/WidgetFactory4/color-profile-check.jpeg</property>
+                                        <layout>
+                                          <property name="column">0</property>
+                                          <property name="row">2</property>
+                                        </layout>
+                                      </object>
+                                    </child>
+                                    <child>
+                                      <object class="GtkLabel">
+                                        <property name="label">JPEG</property>
+                                        <property name="hexpand">1</property>
+                                        <layout>
+                                          <property name="column">1</property>
+                                          <property name="row">2</property>
+                                        </layout>
+                                      </object>
+                                    </child>
+                                    <child>
+                                      <object class="GtkImage">
+                                        <property name="paintable">resource:///org/gtk/WidgetFactory4/color-profile-check.tiff</property>
+                                        <layout>
+
+                                          <property name="column">0</property>
+                                          <property name="row">3</property>
+                                        </layout>
+                                      </object>
+                                    </child>
+                                    <child>
+                                      <object class="GtkLabel">
+                                        <property name="label">TIFF</property>
+                                        <property name="hexpand">1</property>
+                                        <layout>
+                                          <property name="column">1</property>
+                                          <property name="row">3</property>
+                                        </layout>
+                                      </object>
+                                    </child>
                                   </object>
                                 </property>
                                 <property name="tab">
                                   <object class="GtkLabel" id="label9">
-                                    <property name="label" translatable="1">page 2</property>
+                                    <property name="label" translatable="1">Images</property>
                                   </object>
                                 </property>
                               </object>
@@ -1377,12 +1616,26 @@ Suspendisse feugiat quam quis dolor accumsan cursus.</property>
                                 <property name="position">2</property>
                                 <property name="child">
                                   <object class="GtkBox" id="box11">
-                                    <property name="orientation">1</property>
+                                    <property name="orientation">vertical</property>
+                                    <child>
+                                      <object class="GtkPicture" id="hdr_picture">
+                                        <property name="can-shrink">1</property>
+                                      </object>
+                                    </child>
+                                    <child>
+                                      <object class="GtkLabel" id="hdr_label">
+                                        <property name="margin-start">10</property>
+                                        <property name="margin-end">10</property>
+                                        <property name="margin-top">10</property>
+                                        <property name="margin-bottom">10</property>
+                                        <property name="use-markup">1</property>
+                                      </object>
+                                    </child>
                                   </object>
                                 </property>
                                 <property name="tab">
                                   <object class="GtkLabel" id="label10">
-                                    <property name="label" translatable="1">page 3</property>
+                                    <property name="label" translatable="1">HDR</property>
                                   </object>
                                 </property>
                               </object>

docs/reference/gtk/gtk4-builder-tool.rst

@@ -16,6 +16,7 @@ SYNOPSIS
 |   **gtk4-builder-tool** enumerate <FILE>
 |   **gtk4-builder-tool** simplify [OPTIONS...] <FILE>
 |   **gtk4-builder-tool** preview [OPTIONS...] <FILE>
+|   **gtk4-builder-tool** screenshot [OPTIONS...] <FILE>
 
 DESCRIPTION
 -----------
@@ -41,7 +42,7 @@ definition file.
 Preview
 ^^^^^^^
 
-The ``preview`` command displays the UI dfinition file.
+The ``preview`` command displays the UI definition file.
 
 This command accepts options to specify the ID of the toplevel object and a CSS
 file to use.
@@ -55,6 +56,33 @@ file to use.
 
   Load style information from the given CSS file.
 
+Screenshot
+^^^^^^^^^^
+
+The ``screenshot`` command saves a rendering of the UI definition file
+as a png image or node file. The name of the file to write can be specified as
+a second FILE argument.
+
+This command accepts options to specify the ID of the toplevel object and a CSS
+file to use.
+
+``--id=ID``
+
+  The ID of the object to preview. If not specified, gtk4-builder-tool will
+  choose a suitable object on its own.
+
+``--css=FILE``
+
+  Load style information from the given CSS file.
+
+``--node``
+
+  Write a serialized node file instead of a png image.
+
+``--force``
+
+  Overwrite an existing file.
+
 Simplification
 ^^^^^^^^^^^^^^
 

docs/reference/gtk/gtk4-node-editor.rst

@@ -0,0 +1,27 @@
+.. _gtk4-node-editor(1):
+
+=================
+gtk4-node-editor
+=================
+
+-----------------
+Editor render nodes
+-----------------
+
+SYNOPSIS
+--------
+
+|   **gtk4-node-editor** [OPTIONS...]
+
+DESCRIPTION
+-----------
+
+``gtk4-node-editor`` is a utility to show and edit render node files.
+Such render node files can be obtained e.g. from the GTK inspector.
+
+OPTIONS
+-------
+
+``-h, --help``
+
+  Show the application help.

docs/reference/gtk/images/aboutdialog.ui

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkAboutDialog">
+    <property name="program-name">GTK Code Demos</property>
+    <property name="version">4.8.0</property>
+    <property name="copyright">© 1997-2022 The GTK Team</property>
+    <property name="comments">Program to demonstrate GTK functions</property>
+    <property name="logo">gtk-logo.png</property>
+    <property name="title">About GTK Code Demos</property>
+    <property name="authors">Peter Mattis
+Spencer Kimball
+Josh MacDonald
+and many more…
+</property>
+  </object>
+</interface>

docs/reference/gtk/images/action-bar.ui

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <child>
+              <object class="GtkTextView">
+                <property name="vexpand">1</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkActionBar">
+                <child>
+                  <object class="GtkButton">
+                    <property name="icon-name">object-select-symbolic</property>
+                  </object>
+                </child>
+                <child>
+                  <object class="GtkButton">
+                    <property name="icon-name">call-start-symbolic</property>
+                  </object>
+                </child>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/appchooserbutton.ui

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <property name="spacing">3</property>
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <child>
+              <object class="GtkAppChooserButton">
+                <property name="content-type">text/plain</property>
+                <property name="halign">center</property>
+                <property name="valign">center</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel">
+                <property name="label">Application Button</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/appchooserdialog.ui

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkAppChooserDialog">
+    <property name="content-type">image/png</property>
+    <property name="default-width">200</property>
+    <property name="default-height">300</property>
+  </object>
+</interface>

docs/reference/gtk/images/assistant.ui

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkAssistant">
+    <property name="resizable">0</property>
+    <property name="default-width">300</property>
+    <property name="default-height">140</property>
+    <property name="title">Assistant</property>
+    <child>
+      <object class="GtkAssistantPage">
+        <property name="title">Assistant page</property>
+        <property name="complete">1</property>
+        <property name="child">
+          <object class="GtkLabel">
+            <property name="label">Assistant</property>
+          </object>
+        </property>
+      </object>
+    </child>
+    <child>
+      <object class="GtkAssistantPage">
+        <property name="page-type">confirm</property>
+        <property name="child">
+          <object class="GtkLabel">
+            <property name="label">You sure?</property>
+          </object>
+        </property>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/box.ui

@@ -0,0 +1,96 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+      <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkBox">
+            <property name="margin-top">10</property>
+            <property name="margin-bottom">10</property>
+            <property name="margin-start">10</property>
+            <property name="margin-end">10</property>
+            <property name="orientation">vertical</property>
+            <property name="spacing">3</property>
+            <child>
+              <object class="GtkBox">
+                <property name="orientation">horizontal</property>
+                <property name="homogeneous">1</property>
+
+                <child>
+                  <object class="GtkBox">
+                    <property name="orientation">horizontal</property>
+                    <property name="spacing">4</property>
+                    <property name="halign">center</property>
+                    <property name="valign">center</property>
+                    <child>
+                      <object class="GtkButton">
+                        <style><class name="small-button"/></style>
+                        <property name="valign">center</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton">
+                        <style><class name="small-button"/></style>
+                        <property name="valign">center</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label">⋯</property>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+
+                <child>
+                  <object class="GtkBox">
+                    <property name="orientation">vertical</property>
+                    <property name="spacing">4</property>
+                    <property name="halign">center</property>
+                    <property name="valign">center</property>
+                    <child>
+                      <object class="GtkButton">
+                        <style><class name="small-button"/></style>
+                        <property name="halign">center</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkButton">
+                        <style><class name="small-button"/></style>
+                        <property name="halign">center</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label">⋮</property>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel">
+                <property name="justify">center</property>
+                <property name="label">Horizontal and Vertical Boxes</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/button.ui

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkButton">
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <property name="label">Button</property>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/calendar.ui

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <property name="spacing">3</property>
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <property name="margin-start">10</property>
+            <property name="margin-end">10</property>
+            <property name="margin-top">10</property>
+            <property name="margin-bottom">10</property>
+            <child>
+              <object class="GtkCalendar">
+                <property name="halign">center</property>
+                <property name="valign">center</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel">
+                <property name="label">Calendar</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/centerbox.ui

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+      <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkBox">
+            <property name="margin-top">10</property>
+            <property name="margin-bottom">10</property>
+            <property name="margin-start">20</property>
+            <property name="margin-end">20</property>
+            <property name="orientation">vertical</property>
+            <property name="spacing">3</property>
+            <child>
+              <object class="GtkCenterBox">
+                <property name="orientation">horizontal</property>
+                <property name="hexpand">1</property>
+                <property name="vexpand">1</property>
+                <property name="halign">fill</property>
+                <child type="start">
+                  <object class="GtkButton">
+                    <style><class name="small-button"/></style>
+                    <property name="valign">center</property>
+                  </object>
+                </child>
+                <child type="center">
+                  <object class="GtkButton">
+                    <style><class name="small-button"/></style>
+                    <property name="valign">center</property>
+                  </object>
+                </child>
+                <child type="end">
+                  <object class="GtkButton">
+                    <style><class name="small-button"/></style>
+                    <property name="valign">center</property>
+                  </object>
+                </child>
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel">
+                <property name="justify">center</property>
+                <property name="label">Center Box</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/check-button.ui

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <property name="spacing">3</property>
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <child>
+              <object class="GtkCheckButton">
+                <property name="active">1</property>
+                <property name="label">Check Button</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkCheckButton">
+                <property name="active">0</property>
+                <property name="label">Check Button</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/color-button.ui

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <property name="spacing">3</property>
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <child>
+              <object class="GtkColorButton">
+                <property name="rgba">#1e90ff</property>
+                <property name="halign">center</property>
+                <property name="valign">center</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel">
+                <property name="label">Color Button</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/colorchooser.ui

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkColorChooserDialog">
+    <property name="title">Color Chooser Dialog</property>
+  </object>
+</interface>

docs/reference/gtk/images/combo-box-entry.ui

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkComboBox">
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <property name="has-entry">1</property>
+            <child internal-child="entry">
+              <object class="GtkEntry">
+                <property name="text">Combo Box Entry</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/combo-box-text.ui

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkComboBoxText">
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <items>
+              <item>Combo Box Text</item>
+            </items>
+            <property name="active">0</property>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/combo-box.ui

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkComboBox">
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <property name="model">
+              <object class="GtkListStore">
+                <columns>
+                  <column type="gchararray"/>
+                </columns>
+                <data>
+                  <row>
+                    <col id="0">Combo Box</col>
+                  </row>
+                </data>
+              </object>
+            </property>
+            <child>
+              <object class="GtkCellRendererText">
+              </object>
+              <attributes>
+                <attribute name="text">0</attribute>
+              </attributes>
+            </child>
+            <property name="active">0</property>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/dialog.ui

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkDialog">
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <property name="title">Dialog</property>
+    <child type="action">
+      <object class="GtkButton" id="button_cancel">
+        <property name="label">Cancel</property>
+      </object>
+    </child>
+    <child type="action">
+      <object class="GtkButton" id="button_ok">
+        <property name="label">Accept</property>
+      </object>
+    </child>
+    <child>
+      <object class="GtkLabel">
+        <property name="label">Content</property>
+        <property name="hexpand">1</property>
+        <property name="halign">center</property>
+      </object>
+    </child>
+    <action-widgets>
+      <action-widget response="ok" default="true">button_ok</action-widget>
+      <action-widget response="cancel" default="true">button_cancel</action-widget>
+    </action-widgets>
+  </object>
+</interface>

docs/reference/gtk/images/drawingarea.ui

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <property name="spacing">3</property>
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">fill</property>
+            <property name="valign">center</property>
+            <property name="margin-top">10</property>
+            <property name="margin-bottom">10</property>
+            <child>
+              <object class="GtkFrame">
+                <property name="margin-start">10</property>
+                <property name="margin-end">10</property>
+                <child>
+                  <object class="GtkPicture">
+                    <property name="paintable">drawingarea-content.png</property>
+                    <property name="halign">center</property>
+                    <property name="valign">center</property>
+                  </object>
+                </child>
+              </object>
+            </child>
+            <child>
+              <object class="GtkLabel">
+                <property name="label">Drawing Area</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/drop-down.ui

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkDropDown">
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <property name="model">
+              <object class="GtkStringList">
+                <items>
+                  <item>Drop Down</item>
+                  <item>Almost a combo</item>
+                </items>
+              </object>
+            </property>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/editable-label.ui

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <property name="focus-widget">editable2</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkBox">
+            <property name="orientation">vertical</property>
+            <property name="spacing">12</property>
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <child>
+              <object class="GtkEditableLabel">
+                <property name="text">Editable Label</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkSeparator">
+              </object>
+            </child>
+            <child>
+              <object class="GtkEditableLabel" id="editable2">
+                <property name="text">Editable Label</property>
+                <property name="editing">1</property>
+                <style>
+                  <class name="frame"/>
+                </style>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/emojichooser.ui

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+      <object class="GtkEmojiChooser">
+        <property name="autohide">0</property>
+      </object>
+</interface>

docs/reference/gtk/images/entry.ui

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkEntry">
+            <property name="hexpand">1</property>
+            <property name="vexpand">1</property>
+            <property name="halign">fill</property>
+            <property name="valign">center</property>
+            <property name="text">Entry</property>
+            <property name="margin-start">10</property>
+            <property name="margin-end">10</property>
+            <property name="margin-top">10</property>
+            <property name="margin-bottom">10</property>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/expander.ui

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <property name="default-height">120</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="shadow"/>
+          <class name="background"/>
+          <class name="frame"/>
+        </style>
+        <child>
+          <object class="GtkExpander">
+            <property name="label">Expander</property>
+            <property name="hexpand">1</property>
+            <property name="halign">center</property>
+            <property name="valign">center</property>
+            <child>
+              <object class="GtkLabel">
+                <property name="label">Hidden Content</property>
+              </object>
+            </child>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

docs/reference/gtk/images/flow-box.ui

@@ -0,0 +1,66 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="decorated">0</property>
+    <property name="resizable">0</property>
+    <property name="default-width">280</property>
+    <style>
+       <class name="nobackground"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="frame"/>
+          <class name="shadow"/>
+          <class name="background"/>
+        </style>
+        <property name="orientation">vertical</property>
+        <property name="spacing">3</property>
+        <property name="hexpand">1</property>
+        <property name="vexpand">1</property>
+        <child>
+          <object class="GtkFlowBox">
+            <property name="min-children-per-line">2</property>
+            <property name="max-children-per-line">2</property>
+            <property name="selection-mode">browse</property>
+            <child>
+              <object class="GtkLabel">
+                <property name="label">Child One</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkButton">
+                <property name="label">Child Two</property>
+              </object>
+            </child>
+            <child>
+              <object class="GtkFlowBoxChild">
+                <child>
+                  <object class="GtkBox">
+                    <property name="orientation">horizontal</property>
+                    <property name="spacing">6</property>
+                    <child>
+                      <object class="GtkLabel">
+                        <property name="label">Child Three</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkCheckButton">
+                        <property name="active">1</property>
+                      </object>
+                    </child>
+                  </object>
+                </child>
+              </object>
+            </child>
+          </object>
+        </child>
+        <child>
+          <object class="GtkLabel">
+            <property name="label">Flow Box</property>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>