tools: use PropertyGridSet in Preferences and Sprite Importer dialogs

tools/level_editor/preferences_dialog.vala

@@ -8,49 +8,110 @@ using Gee;
 
 namespace Crown
 {
-[GtkTemplate (ui = "/org/crown/level_editor/ui/preferences_dialog.ui")]
 public class PreferencesDialog : Gtk.Dialog
 {
 	// Data
 	public LevelEditorApplication _application;
 
 	// Widgets
-	[GtkChild]
 	public ColorButtonVector3 _grid_color_button;
-
-	[GtkChild]
 	public ColorButtonVector3 _grid_disabled_color_button;
-
-	[GtkChild]
 	public ColorButtonVector3 _axis_x_color_button;
-
-	[GtkChild]
 	public ColorButtonVector3 _axis_y_color_button;
-
-	[GtkChild]
 	public ColorButtonVector3 _axis_z_color_button;
-
-	[GtkChild]
 	public ColorButtonVector3 _axis_selected_color_button;
+	public EntryDouble _gizmo_size_spin_button;
+	public Grid _document_grid;
 
-	[GtkChild]
-	public Gtk.SpinButton _gizmo_size_spin_button;
+	public EntryDouble _level_autosave_spin_button;
+	public Grid _viewport_grid;
 
-	[GtkChild]
-	public Gtk.SpinButton _level_autosave_spin_button;
+	public EntryDouble _log_delete_after_days;
+	public Grid _system_grid;
 
-	[GtkChild]
-	public Gtk.SpinButton _log_delete_after_days;
+	public PropertyGridSet _document_set;
+	public PropertyGridSet _viewport_set;
+	public PropertyGridSet _system_set;
+	public Gtk.Notebook _notebook;
 
 	public PreferencesDialog(LevelEditorApplication app)
 	{
+		this.title = "Preferences";
+		this.border_width = 0;
+
 		// Data
 		_application = app;
 
-		this.title = "Preferences";
+		// Widgets
+		_document_set = new PropertyGridSet();
+		_document_set.border_width = 12;
+		_viewport_set = new PropertyGridSet();
+		_viewport_set.border_width = 12;
+		_system_set = new PropertyGridSet();
+		_system_set.border_width = 12;
+
+		_grid_color_button = new ColorButtonVector3();
+		_grid_color_button.value = Vector3(102.0/255.0, 102.0/255.0, 102.0/255.0);
+		_grid_color_button.value_changed.connect(on_color_set);
+		_grid_disabled_color_button = new ColorButtonVector3();
+		_grid_disabled_color_button.value = Vector3(102.0/255.0, 102.0/255.0, 102.0/255.0);
+		_grid_disabled_color_button.value_changed.connect(on_color_set);
+		_axis_x_color_button = new ColorButtonVector3();
+		_axis_x_color_button.value = Vector3(217.0/255.0, 0.0/255.0, 0.0/255.0);
+		_axis_x_color_button.value_changed.connect(on_color_set);
+		_axis_y_color_button = new ColorButtonVector3();
+		_axis_y_color_button.value = Vector3(0.0/255.0, 217.0/255.0, 0.0/255.0);
+		_axis_y_color_button.value_changed.connect(on_color_set);
+		_axis_z_color_button = new ColorButtonVector3();
+		_axis_z_color_button.value = Vector3(0.0/255.0, 0.0/255.0, 217.0/255.0);
+		_axis_z_color_button.value_changed.connect(on_color_set);
+		_axis_selected_color_button = new ColorButtonVector3();
+		_axis_selected_color_button.value = Vector3(217.0/255.0, 217.0/255.0, 0.0/255.0);
+		_axis_selected_color_button.value_changed.connect(on_color_set);
+
+		PropertyGrid cv;
+		cv = new PropertyGrid();
+		cv.add_row(           "Grid", _grid_color_button);
+		cv.add_row("Grid (Disabled)", _grid_disabled_color_button);
+		_document_set.add_property_grid(cv, "Grid");
+
+		cv = new PropertyGrid();
+		cv.add_row(  "X Axis", _axis_x_color_button);
+		cv.add_row(  "Y Axis", _axis_y_color_button);
+		cv.add_row(  "Z Axis", _axis_z_color_button);
+		cv.add_row("Selected", _axis_selected_color_button);
+		_document_set.add_property_grid(cv, "Axes");
+
+		_gizmo_size_spin_button = new EntryDouble(85, 10, 200);
+		_gizmo_size_spin_button.value_changed.connect(on_gizmo_size_value_changed);
+
+		cv = new PropertyGrid();
+		cv.add_row("Size", _gizmo_size_spin_button);
+		_document_set.add_property_grid(cv, "Gizmo");
+
+		_level_autosave_spin_button = new EntryDouble(5, 1, 60);
+		_level_autosave_spin_button.value_changed.connect(on_level_autosave_value_changed);
+
+		cv = new PropertyGrid();
+		cv.add_row("Autosave (mins)", _level_autosave_spin_button);
+		_viewport_set.add_property_grid(cv, "Level");
+
+		_log_delete_after_days = new EntryDouble(10, 0, 90);
+		cv = new PropertyGrid();
+		cv.add_row("Delete logs older than (days)", _log_delete_after_days);
+		_system_set.add_property_grid(cv, "Memory and Limits");
+
+		_notebook = new Gtk.Notebook();
+		_notebook.append_page(_document_set, new Gtk.Label("Document"));
+		_notebook.append_page(_viewport_set, new Gtk.Label("Viewport"));
+		_notebook.append_page(_system_set, new Gtk.Label("System"));
+		_notebook.vexpand = true;
+		_notebook.show_border = false;
+
+		this.get_content_area().border_width = 0;
+		this.get_content_area().add(_notebook);
 	}
 
-	[GtkCallback]
 	private void on_color_set()
 	{
 		_application._editor.send_script(LevelEditorApi.set_color("grid", _grid_color_button.value));
@@ -61,13 +122,11 @@ public class PreferencesDialog : Gtk.Dialog
 		_application._editor.send_script(LevelEditorApi.set_color("axis_selected", _axis_selected_color_button.value));
 	}
 
-	[GtkCallback]
 	private void on_gizmo_size_value_changed()
 	{
 		_application._editor.send_script("Gizmo.size = %f".printf(_gizmo_size_spin_button.value));
 	}
 
-	[GtkCallback]
 	private void on_level_autosave_value_changed()
 	{
 		_application.set_autosave_timer((uint)_level_autosave_spin_button.value);

tools/level_editor/resources/resources.gresource.xml

@@ -4,7 +4,6 @@
     <file compressed="true" preprocess="xml-stripblanks">gtk/menus.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">ui/panel_new_project.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">ui/panel_projects_list.ui</file>
-    <file compressed="true" preprocess="xml-stripblanks">ui/preferences_dialog.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">ui/toolbar.ui</file>
     <file compressed="true">css/style.css</file>
 

tools/level_editor/resources/ui/preferences_dialog.ui

@@ -1,531 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!-- Generated with glade 3.38.2 -->
-<interface>
-  <requires lib="gtk+" version="3.16"/>
-  <object class="GtkAdjustment" id="adjustment1">
-    <property name="lower">10</property>
-    <property name="upper">200</property>
-    <property name="value">85</property>
-    <property name="step-increment">1</property>
-    <property name="page-increment">10</property>
-  </object>
-  <object class="GtkAdjustment" id="adjustment2">
-    <property name="lower">1</property>
-    <property name="upper">60</property>
-    <property name="value">5</property>
-    <property name="step-increment">1</property>
-    <property name="page-increment">10</property>
-  </object>
-  <object class="GtkAdjustment" id="adjustment3">
-    <property name="upper">90</property>
-    <property name="value">10</property>
-    <property name="step-increment">1</property>
-    <property name="page-increment">10</property>
-  </object>
-  <template class="CrownPreferencesDialog" parent="GtkDialog">
-    <property name="can-focus">False</property>
-    <property name="resizable">False</property>
-    <property name="window-position">center</property>
-    <property name="type-hint">dialog</property>
-    <property name="skip-taskbar-hint">True</property>
-    <child internal-child="vbox">
-      <object class="GtkBox">
-        <property name="can-focus">False</property>
-        <property name="orientation">vertical</property>
-        <child internal-child="action_area">
-          <object class="GtkButtonBox">
-            <property name="can-focus">False</property>
-            <property name="layout-style">end</property>
-            <child>
-              <placeholder/>
-            </child>
-            <child>
-              <placeholder/>
-            </child>
-          </object>
-          <packing>
-            <property name="expand">False</property>
-            <property name="fill">False</property>
-            <property name="position">1</property>
-          </packing>
-        </child>
-        <child>
-          <object class="GtkNotebook">
-            <property name="visible">True</property>
-            <property name="can-focus">True</property>
-            <property name="show-border">False</property>
-            <child>
-              <!-- n-columns=3 n-rows=10 -->
-              <object class="GtkGrid">
-                <property name="visible">True</property>
-                <property name="can-focus">False</property>
-                <property name="margin-bottom">18</property>
-                <property name="border-width">12</property>
-                <property name="row-spacing">6</property>
-                <property name="column-spacing">12</property>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="visible">True</property>
-                    <property name="can-focus">False</property>
-                    <property name="label" translatable="yes">Grid</property>
-                    <property name="xalign">0</property>
-                    <attributes>
-                      <attribute name="weight" value="bold"/>
-                    </attributes>
-                  </object>
-                  <packing>
-                    <property name="left-attach">0</property>
-                    <property name="top-attach">0</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="CrownColorButtonVector3" id="_grid_color_button">
-                    <property name="visible">True</property>
-                    <property name="can_focus">True</property>
-                    <property name="receives_default">True</property>
-                    <property name="hexpand">True</property>
-                    <property name="use_alpha">True</property>
-                    <property name="alpha">65535</property>
-                    <property name="rgba">rgb(102,102,102)</property>
-                    <signal name="color-set" handler="on_color_set" swapped="no"/>
-                  </object>
-                  <packing>
-                    <property name="left-attach">2</property>
-                    <property name="top-attach">1</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="visible">True</property>
-                    <property name="can-focus">False</property>
-                    <property name="label" translatable="yes">Grid</property>
-                    <property name="xalign">1</property>
-                  </object>
-                  <packing>
-                    <property name="left-attach">1</property>
-                    <property name="top-attach">1</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="CrownColorButtonVector3" id="_grid_disabled_color_button">
-                    <property name="visible">True</property>
-                    <property name="can_focus">True</property>
-                    <property name="receives_default">True</property>
-                    <property name="hexpand">True</property>
-                    <property name="use_alpha">True</property>
-                    <property name="alpha">65535</property>
-                    <property name="rgba">rgb(102,102,102)</property>
-                    <signal name="color-set" handler="on_color_set" swapped="no"/>
-                  </object>
-                  <packing>
-                    <property name="left-attach">2</property>
-                    <property name="top-attach">2</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="visible">True</property>
-                    <property name="can-focus">False</property>
-                    <property name="label" translatable="yes">Grid (Disabled)</property>
-                    <property name="xalign">1</property>
-                  </object>
-                  <packing>
-                    <property name="left-attach">1</property>
-                    <property name="top-attach">2</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="visible">True</property>
-                    <property name="can-focus">False</property>
-                    <property name="label" translatable="yes">Axes</property>
-                    <property name="xalign">0</property>
-                    <attributes>
-                      <attribute name="weight" value="bold"/>
-                    </attributes>
-                  </object>
-                  <packing>
-                    <property name="left-attach">0</property>
-                    <property name="top-attach">3</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="CrownColorButtonVector3" id="_axis_x_color_button">
-                    <property name="visible">True</property>
-                    <property name="can_focus">True</property>
-                    <property name="receives_default">True</property>
-                    <property name="hexpand">True</property>
-                    <property name="use_alpha">True</property>
-                    <property name="alpha">65535</property>
-                    <property name="rgba">rgb(217,0,0)</property>
-                    <signal name="color-set" handler="on_color_set" swapped="no"/>
-                  </object>
-                  <packing>
-                    <property name="left-attach">2</property>
-                    <property name="top-attach">4</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="visible">True</property>
-                    <property name="can-focus">False</property>
-                    <property name="label" translatable="yes">X Axis</property>
-                    <property name="xalign">1</property>
-                  </object>
-                  <packing>
-                    <property name="left-attach">1</property>
-                    <property name="top-attach">4</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="visible">True</property>
-                    <property name="can-focus">False</property>
-                    <property name="label" translatable="yes">Y Axis</property>
-                    <property name="xalign">1</property>
-                  </object>
-                  <packing>
-                    <property name="left-attach">1</property>
-                    <property name="top-attach">5</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="visible">True</property>
-                    <property name="can-focus">False</property>
-                    <property name="label" translatable="yes">Z Axis</property>
-                    <property name="xalign">1</property>
-                  </object>
-                  <packing>
-                    <property name="left-attach">1</property>
-                    <property name="top-attach">6</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="CrownColorButtonVector3" id="_axis_y_color_button">
-                    <property name="visible">True</property>
-                    <property name="can_focus">True</property>
-                    <property name="receives_default">True</property>
-                    <property name="hexpand">True</property>
-                    <property name="use_alpha">True</property>
-                    <property name="alpha">65535</property>
-                    <property name="rgba">rgb(0,217,0)</property>
-                    <signal name="color-set" handler="on_color_set" swapped="no"/>
-                  </object>
-                  <packing>
-                    <property name="left-attach">2</property>
-                    <property name="top-attach">5</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="CrownColorButtonVector3" id="_axis_z_color_button">
-                    <property name="visible">True</property>
-                    <property name="can_focus">True</property>
-                    <property name="receives_default">True</property>
-                    <property name="hexpand">True</property>
-                    <property name="use_alpha">True</property>
-                    <property name="alpha">65535</property>
-                    <property name="rgba">rgb(0,0,217)</property>
-                    <signal name="color-set" handler="on_color_set" swapped="no"/>
-                  </object>
-                  <packing>
-                    <property name="left-attach">2</property>
-                    <property name="top-attach">6</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="visible">True</property>
-                    <property name="can-focus">False</property>
-                    <property name="label" translatable="yes">Selected</property>
-                    <property name="xalign">1</property>
-                  </object>
-                  <packing>
-                    <property name="left-attach">1</property>
-                    <property name="top-attach">7</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="CrownColorButtonVector3" id="_axis_selected_color_button">
-                    <property name="visible">True</property>
-                    <property name="can_focus">True</property>
-                    <property name="receives_default">True</property>
-                    <property name="use_alpha">True</property>
-                    <property name="alpha">65535</property>
-                    <property name="rgba">rgb(217,217,0)</property>
-                    <signal name="color-set" handler="on_color_set" swapped="no"/>
-                  </object>
-                  <packing>
-                    <property name="left-attach">2</property>
-                    <property name="top-attach">7</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="visible">True</property>
-                    <property name="can-focus">False</property>
-                    <property name="label" translatable="yes">Gizmo</property>
-                    <property name="xalign">0</property>
-                    <attributes>
-                      <attribute name="weight" value="bold"/>
-                    </attributes>
-                  </object>
-                  <packing>
-                    <property name="left-attach">0</property>
-                    <property name="top-attach">8</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="visible">True</property>
-                    <property name="can-focus">False</property>
-                    <property name="label" translatable="yes">Size (px)</property>
-                    <property name="xalign">1</property>
-                  </object>
-                  <packing>
-                    <property name="left-attach">1</property>
-                    <property name="top-attach">9</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="GtkSpinButton" id="_gizmo_size_spin_button">
-                    <property name="visible">True</property>
-                    <property name="can-focus">True</property>
-                    <property name="hexpand">True</property>
-                    <property name="adjustment">adjustment1</property>
-                    <property name="value">85</property>
-                    <signal name="value-changed" handler="on_gizmo_size_value_changed" swapped="no"/>
-                  </object>
-                  <packing>
-                    <property name="left-attach">2</property>
-                    <property name="top-attach">9</property>
-                  </packing>
-                </child>
-                <child>
-                  <placeholder/>
-                </child>
-                <child>
-                  <placeholder/>
-                </child>
-                <child>
-                  <placeholder/>
-                </child>
-                <child>
-                  <placeholder/>
-                </child>
-                <child>
-                  <placeholder/>
-                </child>
-                <child>
-                  <placeholder/>
-                </child>
-                <child>
-                  <placeholder/>
-                </child>
-                <child>
-                  <placeholder/>
-                </child>
-                <child>
-                  <placeholder/>
-                </child>
-                <child>
-                  <placeholder/>
-                </child>
-                <child>
-                  <placeholder/>
-                </child>
-                <child>
-                  <placeholder/>
-                </child>
-                <child>
-                  <placeholder/>
-                </child>
-              </object>
-            </child>
-            <child type="tab">
-              <object class="GtkLabel">
-                <property name="visible">True</property>
-                <property name="can-focus">False</property>
-                <property name="label" translatable="yes">Document</property>
-              </object>
-              <packing>
-                <property name="position">2</property>
-                <property name="tab-fill">False</property>
-              </packing>
-            </child>
-            <child>
-              <!-- n-columns=3 n-rows=3 -->
-              <object class="GtkGrid">
-                <property name="visible">True</property>
-                <property name="can-focus">False</property>
-                <property name="margin-bottom">18</property>
-                <property name="border-width">12</property>
-                <property name="row-spacing">6</property>
-                <property name="column-spacing">12</property>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="visible">True</property>
-                    <property name="can-focus">False</property>
-                    <property name="label" translatable="yes">Level</property>
-                    <property name="xalign">0</property>
-                    <attributes>
-                      <attribute name="weight" value="bold"/>
-                    </attributes>
-                  </object>
-                  <packing>
-                    <property name="left-attach">0</property>
-                    <property name="top-attach">0</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="visible">True</property>
-                    <property name="can-focus">False</property>
-                    <property name="label" translatable="yes">Autosave (mins)</property>
-                    <property name="xalign">1</property>
-                  </object>
-                  <packing>
-                    <property name="left-attach">1</property>
-                    <property name="top-attach">1</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="GtkSpinButton" id="_level_autosave_spin_button">
-                    <property name="visible">True</property>
-                    <property name="can-focus">True</property>
-                    <property name="hexpand">True</property>
-                    <property name="adjustment">adjustment2</property>
-                    <signal name="value-changed" handler="on_level_autosave_value_changed" swapped="no"/>
-                  </object>
-                  <packing>
-                    <property name="left-attach">2</property>
-                    <property name="top-attach">1</property>
-                  </packing>
-                </child>
-                <child>
-                  <placeholder/>
-                </child>
-                <child>
-                  <placeholder/>
-                </child>
-                <child>
-                  <placeholder/>
-                </child>
-                <child>
-                  <placeholder/>
-                </child>
-                <child>
-                  <placeholder/>
-                </child>
-                <child>
-                  <placeholder/>
-                </child>
-              </object>
-              <packing>
-                <property name="position">1</property>
-              </packing>
-            </child>
-            <child type="tab">
-              <object class="GtkLabel">
-                <property name="visible">True</property>
-                <property name="can-focus">False</property>
-                <property name="label" translatable="yes">Viewport</property>
-              </object>
-              <packing>
-                <property name="position">1</property>
-                <property name="tab-fill">False</property>
-              </packing>
-            </child>
-            <child>
-              <!-- n-columns=3 n-rows=3 -->
-              <object class="GtkGrid">
-                <property name="visible">True</property>
-                <property name="can-focus">False</property>
-                <property name="margin-bottom">18</property>
-                <property name="border-width">12</property>
-                <property name="row-spacing">6</property>
-                <property name="column-spacing">12</property>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="visible">True</property>
-                    <property name="can-focus">False</property>
-                    <property name="label" translatable="yes">Memory and Limits</property>
-                    <property name="xalign">0</property>
-                    <attributes>
-                      <attribute name="weight" value="bold"/>
-                    </attributes>
-                  </object>
-                  <packing>
-                    <property name="left-attach">0</property>
-                    <property name="top-attach">0</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="GtkLabel">
-                    <property name="visible">True</property>
-                    <property name="can-focus">False</property>
-                    <property name="label" translatable="yes">Delete logs after (days):</property>
-                    <property name="xalign">1</property>
-                  </object>
-                  <packing>
-                    <property name="left-attach">1</property>
-                    <property name="top-attach">1</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="GtkSpinButton" id="_log_delete_after_days">
-                    <property name="visible">True</property>
-                    <property name="can-focus">True</property>
-                    <property name="adjustment">adjustment3</property>
-                    <property name="value">10</property>
-                  </object>
-                  <packing>
-                    <property name="left-attach">2</property>
-                    <property name="top-attach">1</property>
-                  </packing>
-                </child>
-                <child>
-                  <placeholder/>
-                </child>
-                <child>
-                  <placeholder/>
-                </child>
-                <child>
-                  <placeholder/>
-                </child>
-                <child>
-                  <placeholder/>
-                </child>
-                <child>
-                  <placeholder/>
-                </child>
-                <child>
-                  <placeholder/>
-                </child>
-              </object>
-              <packing>
-                <property name="position">2</property>
-              </packing>
-            </child>
-            <child type="tab">
-              <object class="GtkLabel">
-                <property name="visible">True</property>
-                <property name="can-focus">False</property>
-                <property name="label" translatable="yes">System</property>
-              </object>
-              <packing>
-                <property name="position">2</property>
-                <property name="tab-fill">False</property>
-              </packing>
-            </child>
-          </object>
-          <packing>
-            <property name="expand">True</property>
-            <property name="fill">True</property>
-            <property name="position">0</property>
-          </packing>
-        </child>
-      </object>
-    </child>
-  </template>
-</interface>

tools/level_editor/sprite_import_dialog.vala

@@ -89,13 +89,6 @@ Vector2 sprite_cell_pivot_xy(int cell_w, int cell_h, int pivot)
 	return Vector2(pivot_x, pivot_y);
 }
 
-Gtk.Label label_with_alignment(string text, Gtk.Align align = Gtk.Align.END)
-{
-	var l = new Label(text);
-	l.halign = align;
-	return l;
-}
-
 public class SpriteImportDialog : Gtk.Dialog
 {
 	public Cairo.Surface _checker;
@@ -135,7 +128,7 @@ public class SpriteImportDialog : Gtk.Dialog
 	// Widgets
 	public SpriteImportDialog(string png)
 	{
-		this.border_width = 18;
+		this.border_width = 4;
 		this.title = "Import Sprite...";
 
 		try
@@ -435,92 +428,71 @@ public class SpriteImportDialog : Gtk.Dialog
 		layer = new EntryDouble(0.0, 0.0, 7.0);
 		depth = new EntryDouble(0.0, 0.0, 9999.0);
 
-		Gtk.Grid grid = new Gtk.Grid();
-		grid.attach(label_with_alignment("Resolution"),    0,  0, 1, 1);
-		grid.attach(label_with_alignment("Cells"),         0,  1, 1, 1);
-		grid.attach(label_with_alignment("Auto Size"),     0,  2, 1, 1);
-		grid.attach(label_with_alignment("Cell"),          0,  3, 1, 1);
-		grid.attach(label_with_alignment("Offset"),        0,  4, 1, 1);
-		grid.attach(label_with_alignment("Spacing"),       0,  5, 1, 1);
-		grid.attach(label_with_alignment("Pivot"),         0,  6, 1, 1);
-		grid.attach(label_with_alignment("Layer"),         0,  7, 1, 1);
-		grid.attach(label_with_alignment("Depth"),         0,  8, 1, 1);
-		grid.attach(label_with_alignment("Collision"),     0,  9, 1, 1);
-		grid.attach(label_with_alignment("Class"),         0, 10, 1, 1);
-		grid.attach(label_with_alignment("Mass"),          0, 11, 1, 1);
-		grid.attach(label_with_alignment("Lock Rotation"), 0, 12, 1, 1);
-
-		grid.attach(resolution,        1,  0, 1, 1);
-		grid.attach(cells,             1,  1, 1, 1);
-		grid.attach(cell_wh_auto,      1,  2, 1, 1);
-		grid.attach(cell,              1,  3, 1, 1);
-		grid.attach(offset,            1,  4, 1, 1);
-		grid.attach(spacing,           1,  5, 1, 1);
-		grid.attach(pivot,             1,  6, 1, 1);
-		grid.attach(layer,             1,  7, 1, 1);
-		grid.attach(depth,             1,  8, 1, 1);
-		grid.attach(collision_enabled, 1,  9, 1, 1);
-		grid.attach(actor_class,       1, 10, 1, 1);
-		grid.attach(mass,              1, 11, 1, 1);
-		grid.attach(lock_rotation_y,   1, 12, 1, 1);
-
-		Gtk.Grid square_grid = new Gtk.Grid();
-		square_grid.attach(label_with_alignment("Origin"), 0, 0, 1, 1);
-		square_grid.attach(label_with_alignment("Size"),   0, 1, 1, 1);
-		square_grid.attach(collision_xy,                   1, 0, 1, 1);
-		square_grid.attach(collision_wh,                   1, 1, 1, 1);
-		collision_xy.hexpand = true;
-		collision_wh.hexpand = true;
-		square_grid.row_spacing = 6;
-		square_grid.column_spacing = 12;
-
-		Gtk.Grid circle_grid = new Gtk.Grid();
-		circle_grid.attach(label_with_alignment("Origin"), 0, 0, 1, 1);
-		circle_grid.attach(label_with_alignment("Radius"), 0, 1, 1, 1);
-		circle_grid.attach(circle_collision_center,        1, 0, 1, 1);
-		circle_grid.attach(circle_collision_radius,        1, 1, 1, 1);
-		circle_collision_center.hexpand = true;
-		circle_collision_radius.hexpand = true;
-		circle_grid.row_spacing = 6;
-		circle_grid.column_spacing = 12;
-
-		Gtk.Grid capsule_grid = new Gtk.Grid();
-		capsule_grid.attach(label_with_alignment("Origin"), 0, 0, 1, 1);
-		capsule_grid.attach(label_with_alignment("Radius"), 0, 1, 1, 1);
-		capsule_grid.attach(label_with_alignment("Height"), 0, 2, 1, 1);
-		capsule_grid.attach(capsule_collision_center,       1, 0, 1, 1);
-		capsule_grid.attach(capsule_collision_radius,       1, 1, 1, 1);
-		capsule_grid.attach(capsule_collision_height,       1, 2, 1, 1);
-		capsule_collision_center.hexpand = true;
-		capsule_collision_radius.hexpand = true;
-		capsule_collision_height.hexpand = true;
-		capsule_grid.row_spacing = 6;
-		capsule_grid.column_spacing = 12;
+		PropertyGridSet sprite_set = new PropertyGridSet();
+		sprite_set.border_width = 6;
+
+		PropertyGrid cv;
+		cv = new PropertyGrid();
+		cv.add_row("Resolution", resolution);
+		cv.add_row("Cells", cells);
+		cv.add_row("Auto Size", cell_wh_auto);
+		cv.add_row("Cell", cell);
+		cv.add_row("Offset", offset);
+		cv.add_row("Spacing", spacing);
+		cv.add_row("Pivot", pivot);
+		sprite_set.add_property_grid(cv, "Image");
+
+		cv = new PropertyGrid();
+		cv.add_row("Layer", layer);
+		cv.add_row("Depth", depth);
+		sprite_set.add_property_grid(cv, "Sprite Renderer");
+
+		cv = new PropertyGrid();
+		cv.add_row("Collision", collision_enabled);
+		cv.add_row("Class", actor_class);
+		cv.add_row("Mass", mass);
+		cv.add_row("Lock Rotation", lock_rotation_y);
+		sprite_set.add_property_grid(cv, "Actor");
 
 		shape = new Gtk.Stack();
-		shape.add_titled(square_grid, "square_collider", "Square");
-		shape.add_titled(circle_grid, "circle_collider", "Circle");
-		shape.add_titled(capsule_grid, "capsule_collider", "Capsule");
+		shape.notify["visible-child"].connect(() => { _preview.queue_draw(); });
+
+		cv = new PropertyGrid();
+		cv.add_row("Origin", collision_xy);
+		cv.add_row("Size", collision_wh);
+		shape.add_titled(cv, "square_collider", "Square");
+
+		cv = new PropertyGrid();
+		cv.add_row("Origin", circle_collision_center);
+		cv.add_row("Radius", circle_collision_radius);
+		shape.add_titled(cv, "circle_collider", "Circle");
+
+		cv = new PropertyGrid();
+		cv.add_row("Origin", capsule_collision_center);
+		cv.add_row("Radius", capsule_collision_radius);
+		cv.add_row("Height", capsule_collision_height);
+		shape.add_titled(cv, "capsule_collider", "Capsule");
+
 		shape_switcher = new Gtk.StackSwitcher();
 		shape_switcher.set_stack(shape);
 
-		grid.attach(label_with_alignment("Collider"), 0, 13, 1, 1);
-		grid.attach(shape_switcher,                   1, 13, 1, 1);
-		grid.attach(shape,                            1, 14, 1, 1);
-		grid.row_spacing = 6;
-		grid.column_spacing = 12;
+		cv = new PropertyGrid();
+		cv.add_row("Shape Type", shape_switcher);
+		cv.add_row("Shape Data", shape);
+		sprite_set.add_property_grid(cv, "Collider");
 
-		Gtk.Box box = new Gtk.Box(Gtk.Orientation.HORIZONTAL, 12);
+		Gtk.Box box = new Gtk.Box(Gtk.Orientation.HORIZONTAL, 0);
 		box.pack_start(_scrolled_window, true, true);
 		box.pack_start(_preview, true, true);
-		box.pack_end(grid, false, false);
-		box.margin_bottom = 18;
-
-		get_content_area().pack_start(box);
 
-		add_button("Cancel", Gtk.ResponseType.CANCEL);
-		add_button("OK", Gtk.ResponseType.OK);
+		Gtk.Paned pane;
+		pane = new Gtk.Paned(Gtk.Orientation.HORIZONTAL);
+		pane.pack1(box, false, false);
+		pane.pack2(sprite_set, true, false);
 
+		this.get_content_area().add(pane);
+		this.add_button("Cancel", Gtk.ResponseType.CANCEL);
+		this.add_button("OK", Gtk.ResponseType.OK);
 		this.response.connect(on_response);
 	}