gtk-demo: Make a more interesting constraints demo

Show various ways to influence spacing. This is more or
less modeled on the way Androids constraint layout lets
you set up 'chains'.

2 files changed, 405 insertions, 49 deletions

diff --git a/demos/gtk-demo/constraints_builder.c b/demos/gtk-demo/constraints_builder.c
index 1233adaed1..5d8b6a9413 100644
--- a/demos/gtk-demo/constraints_builder.c
+++ b/demos/gtk-demo/constraints_builder.c
@@ -1,8 +1,10 @@
 /* Constraints/Builder
  *
- * GtkConstraintLayouts can be created in .ui files, and constraints can be
- * set up at that time as well, as this example demonstrates. It uses the
- * same setup as the “Simple” constraints demo.
+ * GtkConstraintLayouts can be created in .ui files, and constraints can
+ * be set up at that time as well, as this example demonstrates. It shows
+ * various ways to do spacing and sizing with constraints.
+ *
+ * Make the window wider to see the rows react differently
  */
 
 #include <glib/gi18n.h>
diff --git a/demos/gtk-demo/constraints_builder.ui b/demos/gtk-demo/constraints_builder.ui
index 1766f931c7..c5748e7f42 100644
--- a/demos/gtk-demo/constraints_builder.ui
+++ b/demos/gtk-demo/constraints_builder.ui
@@ -5,99 +5,453 @@
     <property name="default-width">260</property>
     <child>
       <object class="ConstraintsGrid">
+        <property name="halign">fill</property>
+        <property name="valign">fill</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>
         <property name="layout-manager">
           <object class="GtkConstraintLayout">
             <constraints>
-              <guide name="space"
-                     min-width="10" min-height="10"
-                     nat-width="100" nat-height="10"
-                     max-width="200" max-height="20"
-                     strength="strong"/>
-              <constraint target="button1" target-attribute="width"
-                          relation="le"
-                          constant="200"
+              <guide name="guide1" min-width="10" nat-width="200" strength="weak"/>
+              <guide name="guide2" min-width="10" nat-width="200" strength="weak"/>
+              <guide name="guide3" min-width="10" nat-width="200" strength="weak"/>
+              <guide name="guide4" min-width="10" nat-width="200" strength="weak"/>
+              <guide name="guide5" min-width="10" nat-width="200" strength="weak"/>
+              <guide name="guide6" min-width="10" nat-width="200" strength="weak"/>
+              <guide name="guide7" min-width="10" nat-width="200" strength="weak"/>
+              <guide name="guide8" min-width="10" nat-width="200" strength="weak"/>
+              <guide name="guide9" min-width="0" nat-width="200" strength="weak"/>
+              <guide name="guide10" min-width="0" nat-width="200" strength="weak"/>
+              <guide name="barrier1" min-height="10"/>
+              <guide name="barrier2" min-height="10"/>
+              <guide name="barrier3" min-height="10"/>
+              <guide name="barrier4" min-height="10"/>
+
+              <!-- Spread Chain -->
+              <constraint target="super" target-attribute="top"
+                          relation="eq"
+                          source="button1" source-attribute="top"
                           strength="required"/>
-              <constraint target="super" target-attribute="start"
+              <constraint target="super" target-attribute="top"
                           relation="eq"
-                          source="button1" source-attribute="start"
-                          constant="-8"
+                          source="button2" source-attribute="top"
                           strength="required"/>
-              <constraint target="button1" target-attribute="width"
+              <constraint target="super" target-attribute="top"
                           relation="eq"
-                          source="button2" source-attribute="width"
+                          source="button3" source-attribute="top"
                           strength="required"/>
-              <constraint target="button1" target-attribute="end"
+
+              <constraint target="super" target-attribute="left"
                           relation="eq"
-                          source="space" source-attribute="start"
+                          source="guide1" source-attribute="left"
                           strength="required"/>
-              <constraint target="space" target-attribute="end"
+              <constraint target="button1" target-attribute="left"
                           relation="eq"
-                          source="button2" source-attribute="start"
+                          source="guide1" source-attribute="right"
                           strength="required"/>
-              <constraint target="super" target-attribute="end"
+              <constraint target="guide2" target-attribute="left"
                           relation="eq"
-                          source="button2" source-attribute="end"
-                          constant="8"
+                          source="button1" source-attribute="right"
                           strength="required"/>
-              <constraint target="super" target-attribute="start"
+              <constraint target="button2" target-attribute="left"
                           relation="eq"
-                          source="button3" source-attribute="start"
-                          constant="-8"
+                          source="guide2" source-attribute="right"
                           strength="required"/>
-              <constraint target="super" target-attribute="end"
+              <constraint target="guide3" target-attribute="left"
                           relation="eq"
-                          source="button3" source-attribute="end"
-                          constant="8"
+                          source="button2" source-attribute="right"
                           strength="required"/>
-              <constraint target="super" target-attribute="top"
+              <constraint target="button3" target-attribute="left"
                           relation="eq"
-                          source="button1" source-attribute="top"
-                          constant="-8"
+                          source="guide3" source-attribute="right"
                           strength="required"/>
-              <constraint target="super" target-attribute="top"
+              <constraint target="guide4" target-attribute="left"
                           relation="eq"
-                          source="button2" source-attribute="top"
-                          constant="-8"
+                          source="button3" source-attribute="right"
+                          strength="required"/>
+              <constraint target="super" target-attribute="right"
+                          relation="eq"
+                          source="guide4" source-attribute="right"
+                          strength="required"/>
+
+              <constraint target="guide1" target-attribute="width"
+                          relation="eq"
+                          source="guide2" source-attribute="width"
                           strength="required"/>
+              <constraint target="guide2" target-attribute="width"
+                          relation="eq"
+                          source="guide3" source-attribute="width"
+                          strength="required"/>
+              <constraint target="guide3" target-attribute="width"
+                          relation="eq"
+                          source="guide4" source-attribute="width"
+                          strength="required"/>
+
+              <constraint target="button1" target-attribute="width"
+                          relation="eq"
+                          source="button2" source-attribute="width"
+                          strength="required"/>
+              <constraint target="button2" target-attribute="width"
+                          relation="eq"
+                          source="button3" source-attribute="width"
+                          strength="required"/>
+
               <constraint target="button1" target-attribute="bottom"
                           relation="eq"
-                          source="button3" source-attribute="top"
-                          constant="-12"
+                          source="barrier1" source-attribute="top"
                           strength="required"/>
               <constraint target="button2" target-attribute="bottom"
                           relation="eq"
-                          source="button3" source-attribute="top"
-                          constant="-12"
+                          source="barrier1" source-attribute="top"
                           strength="required"/>
-              <constraint target="button3" target-attribute="height"
+              <constraint target="button3" target-attribute="bottom"
                           relation="eq"
-                          source="button1" source-attribute="height"
+                          source="barrier1" source-attribute="top"
                           strength="required"/>
-              <constraint target="button3" target-attribute="height"
+
+              <!-- Spread Inside Chain -->
+
+              <constraint target="super" target-attribute="left"
                           relation="eq"
-                          source="button2" source-attribute="height"
+                          source="button4" source-attribute="left"
                           strength="required"/>
-              <constraint target="super" target-attribute="bottom"
+              <constraint target="guide5" target-attribute="left"
+                          relation="eq"
+                          source="button4" source-attribute="right"
+                          strength="required"/>
+              <constraint target="button5" target-attribute="left"
+                          relation="eq"
+                          source="guide5" source-attribute="right"
+                          strength="required"/>
+              <constraint target="guide6" target-attribute="left"
+                          relation="eq"
+                          source="button5" source-attribute="right"
+                          strength="required"/>
+              <constraint target="button6" target-attribute="left"
+                          relation="eq"
+                          source="guide6" source-attribute="right"
+                          strength="required"/>
+              <constraint target="super" target-attribute="right"
+                          relation="eq"
+                          source="button6" source-attribute="right"
+                          strength="required"/>
+
+              <constraint target="guide5" target-attribute="width"
+                          relation="eq"
+                          source="guide6" source-attribute="width"
+                          strength="required"/>
+
+              <constraint target="button4" target-attribute="width"
+                          relation="eq"
+                          source="button5" source-attribute="width"
+                          strength="required"/>
+              <constraint target="button5" target-attribute="width"
+                          relation="eq"
+                          source="button6" source-attribute="width"
+                          strength="required"/>
+
+              <constraint target="button4" target-attribute="top"
+                          relation="eq"
+                          source="barrier1" source-attribute="bottom"
+                          strength="required"/>
+              <constraint target="button5" target-attribute="top"
+                          relation="eq"
+                          source="barrier1" source-attribute="bottom"
+                          strength="required"/>
+              <constraint target="button6" target-attribute="top"
+                          relation="eq"
+                          source="barrier1" source-attribute="bottom"
+                          strength="required"/>
+
+              <constraint target="button4" target-attribute="bottom"
+                          relation="eq"
+                          source="barrier2" source-attribute="top"
+                          strength="required"/>
+              <constraint target="button5" target-attribute="bottom"
+                          relation="eq"
+                          source="barrier2" source-attribute="top"
+                          strength="required"/>
+              <constraint target="button6" target-attribute="bottom"
+                          relation="eq"
+                          source="barrier2" source-attribute="top"
+                          strength="required"/>
+
+              <!-- Weighted Chain -->
+
+              <constraint target="super" target-attribute="left"
+                          relation="eq"
+                          source="button7" source-attribute="left"
+                          strength="required"/>
+              <constraint target="button8" target-attribute="left"
+                          relation="eq"
+                          source="button7" source-attribute="right"
+                          constant="10"
+                          strength="required"/>
+              <constraint target="button9" target-attribute="left"
+                          relation="eq"
+                          source="button8" source-attribute="right"
+                          constant="10"
+                          strength="required"/>
+              <constraint target="super" target-attribute="right"
+                          relation="eq"
+                          source="button9" source-attribute="right"
+                          strength="required"/>
+
+              <constraint target="button8" target-attribute="width"
+                          relation="eq"
+                          source="button7" source-attribute="width"
+                          multiplier="2"
+                          strength="required"/>
+              <constraint target="button9" target-attribute="width"
+                          relation="eq"
+                          source="button7" source-attribute="width"
+                          multiplier="3"
+                          strength="required"/>
+
+              <constraint target="button7" target-attribute="top"
+                          relation="eq"
+                          source="barrier2" source-attribute="bottom"
+                          strength="required"/>
+              <constraint target="button8" target-attribute="top"
+                          relation="eq"
+                          source="barrier2" source-attribute="bottom"
+                          strength="required"/>
+              <constraint target="button9" target-attribute="top"
+                          relation="eq"
+                          source="barrier2" source-attribute="bottom"
+                          strength="required"/>
+
+              <constraint target="button7" target-attribute="bottom"
+                          relation="eq"
+                          source="barrier3" source-attribute="top"
+                          strength="required"/>
+              <constraint target="button8" target-attribute="bottom"
+                          relation="eq"
+                          source="barrier3" source-attribute="top"
+                          strength="required"/>
+              <constraint target="button9" target-attribute="bottom"
+                          relation="eq"
+                          source="barrier3" source-attribute="top"
+                          strength="required"/>
+
+              <!-- Packed Chain -->
+
+              <constraint target="super" target-attribute="left"
+                          relation="eq"
+                          source="guide7" source-attribute="left"
+                          strength="required"/>
+              <constraint target="button10" target-attribute="left"
+                          relation="eq"
+                          source="guide7" source-attribute="right"
+                          strength="required"/>
+              <constraint target="button11" target-attribute="left"
+                          relation="eq"
+                          source="button10" source-attribute="right"
+                          constant="10"
+                          strength="required"/>
+              <constraint target="button12" target-attribute="left"
                           relation="eq"
-                          source="button3" source-attribute="bottom"
-                          constant="8"
+                          source="button11" source-attribute="right"
+                          constant="10"
+                          strength="required"/>
+              <constraint target="guide8" target-attribute="left"
+                          relation="eq"
+                          source="button12" source-attribute="right"
+                          strength="required"/>
+              <constraint target="super" target-attribute="right"
+                          relation="eq"
+                          source="guide8" source-attribute="right"
+                          strength="required"/>
+
+              <constraint target="guide7" target-attribute="width"
+                          relation="eq"
+                          source="guide8" source-attribute="width"
+                          strength="required"/>
+
+              <constraint target="button10" target-attribute="width"
+                          relation="eq"
+                          source="button11" source-attribute="width"
+                          strength="required"/>
+              <constraint target="button11" target-attribute="width"
+                          relation="eq"
+                          source="button12" source-attribute="width"
+                          strength="required"/>
+
+              <constraint target="button10" target-attribute="top"
+                          relation="eq"
+                          source="barrier3" source-attribute="bottom"
+                          strength="required"/>
+              <constraint target="button11" target-attribute="top"
+                          relation="eq"
+                          source="barrier3" source-attribute="bottom"
+                          strength="required"/>
+              <constraint target="button12" target-attribute="top"
+                          relation="eq"
+                          source="barrier3" source-attribute="bottom"
+                          strength="required"/>
+
+              <constraint target="button10" target-attribute="bottom"
+                          relation="eq"
+                          source="barrier4" source-attribute="top"
+                          strength="required"/>
+              <constraint target="button11" target-attribute="bottom"
+                          relation="eq"
+                          source="barrier4" source-attribute="top"
+                          strength="required"/>
+              <constraint target="button12" target-attribute="bottom"
+                          relation="eq"
+                          source="barrier4" source-attribute="top"
+                          strength="required"/>
+
+              <!-- Packed Chain with Bias -->
+
+              <constraint target="super" target-attribute="left"
+                          relation="eq"
+                          source="guide9" source-attribute="left"
+                          strength="required"/>
+              <constraint target="button13" target-attribute="left"
+                          relation="eq"
+                          source="guide9" source-attribute="right"
+                          constant="10"
+                          strength="required"/>
+              <constraint target="button14" target-attribute="left"
+                          relation="eq"
+                          source="button13" source-attribute="right"
+                          constant="10"
+                          strength="required"/>
+              <constraint target="button15" target-attribute="left"
+                          relation="eq"
+                          source="button14" source-attribute="right"
+                          constant="10"
+                          strength="required"/>
+              <constraint target="guide10" target-attribute="left"
+                          relation="eq"
+                          source="button15" source-attribute="right"
+                          constant="10"
+                          strength="required"/>
+              <constraint target="super" target-attribute="right"
+                          relation="eq"
+                          source="guide10" source-attribute="right"
+                          strength="required"/>
+
+              <constraint target="guide9" target-attribute="width"
+                          relation="eq"
+                          source="guide10" source-attribute="width"
+                          multiplier="4"
+                          strength="required"/>
+
+              <constraint target="button13" target-attribute="width"
+                          relation="eq"
+                          source="button14" source-attribute="width"
+                          strength="required"/>
+              <constraint target="button14" target-attribute="width"
+                          relation="eq"
+                          source="button15" source-attribute="width"
+                          strength="required"/>
+
+              <constraint target="button13" target-attribute="top"
+                          relation="eq"
+                          source="barrier4" source-attribute="bottom"
+                          strength="required"/>
+              <constraint target="button14" target-attribute="top"
+                          relation="eq"
+                          source="barrier4" source-attribute="bottom"
+                          strength="required"/>
+              <constraint target="button15" target-attribute="top"
+                          relation="eq"
+                          source="barrier4" source-attribute="bottom"
+                          strength="required"/>
+
+              <constraint target="super" target-attribute="bottom"
+                          relation="ge"
+                          source="button13" source-attribute="bottom"
+                          strength="required"/>
+              <constraint target="super" target-attribute="bottom"
+                          relation="ge"
+                          source="button14" source-attribute="bottom"
+                          strength="required"/>
+              <constraint target="super" target-attribute="bottom"
+                          relation="ge"
+                          source="button15" source-attribute="bottom"
                           strength="required"/>
             </constraints>
           </object>
         </property>
         <child>
           <object class="GtkButton" id="button1">
-            <property name="label">Child 1</property>
+            <property name="label">A</property>
           </object>
         </child>
         <child>
           <object class="GtkButton" id="button2">
-            <property name="label">Child 2</property>
+            <property name="label">B</property>
           </object>
         </child>
         <child>
           <object class="GtkButton" id="button3">
-            <property name="label">Child 3</property>
+            <property name="label">C</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton" id="button4">
+            <property name="label">A</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton" id="button5">
+            <property name="label">B</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton" id="button6">
+            <property name="label">C</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton" id="button7">
+            <property name="label">A</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton" id="button8">
+            <property name="label">B</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton" id="button9">
+            <property name="label">C</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton" id="button10">
+            <property name="label">A</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton" id="button11">
+            <property name="label">B</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton" id="button12">
+            <property name="label">C</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton" id="button13">
+            <property name="label">A</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton" id="button14">
+            <property name="label">B</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton" id="button15">
+            <property name="label">C</property>
           </object>
         </child>
       </object>