FontEditor: Update GML for new layout system

This patch removes deprecated GML properties and manual sizing
calculations in favor of the new UIDimensions, and registers more
widgets in the FontEditor namespace to simplify widget setup.

Userland/Applications/FontEditor/FontEditor.cpp

@@ -23,6 +23,7 @@
 #include <LibGUI/Clipboard.h>
 #include <LibGUI/ComboBox.h>
 #include <LibGUI/FilePicker.h>
+#include <LibGUI/GlyphMapWidget.h>
 #include <LibGUI/GroupBox.h>
 #include <LibGUI/InputBox.h>
 #include <LibGUI/ItemListModel.h>
@@ -40,10 +41,11 @@
 #include <LibGfx/Font/BitmapFont.h>
 #include <LibGfx/Font/Emoji.h>
 #include <LibGfx/Font/FontStyleMapping.h>
-#include <LibGfx/Palette.h>
 #include <LibGfx/TextDirection.h>
 #include <LibUnicode/CharacterTypes.h>
 
+namespace FontEditor {
+
 static constexpr Array pangrams = {
     "quick fox jumps nightly above wizard",
     "five quacking zephyrs jolt my wax bed",
@@ -387,13 +389,9 @@ FontEditorWidget::FontEditorWidget()
 
     m_font_metadata_groupbox = find_descendant_of_type_named<GUI::GroupBox>("font_metadata_groupbox");
     m_unicode_block_container = find_descendant_of_type_named<GUI::Widget>("unicode_block_container");
-    m_glyph_editor_container = *find_descendant_of_type_named<GUI::Widget>("glyph_editor_container");
-    m_left_column_container = *find_descendant_of_type_named<GUI::Widget>("left_column_container");
-
-    auto& glyph_map_container = *find_descendant_of_type_named<GUI::Widget>("glyph_map_container");
-    m_glyph_editor_widget = m_glyph_editor_container->add<GlyphEditorWidget>();
-    m_glyph_map_widget = glyph_map_container.add<GUI::GlyphMapWidget>();
 
+    m_glyph_map_widget = find_descendant_of_type_named<GUI::GlyphMapWidget>("glyph_map_widget");
+    m_glyph_editor_widget = find_descendant_of_type_named<GlyphEditorWidget>("glyph_editor_widget");
     m_glyph_editor_widget->on_glyph_altered = [this](int glyph) {
         m_glyph_map_widget->update_glyph(glyph);
         update_preview();
@@ -569,7 +567,7 @@ ErrorOr<void> FontEditorWidget::initialize(String const& path, RefPtr<Gfx::Bitma
 
     m_glyph_map_widget->set_font(*m_edited_font);
     m_glyph_editor_widget->initialize(*m_edited_font);
-    did_resize_glyph_editor();
+    m_glyph_editor_widget->set_fixed_size(m_glyph_editor_widget->preferred_width(), m_glyph_editor_widget->preferred_height());
 
     m_glyph_editor_width_spinbox->set_visible(!m_edited_font->is_fixed_width());
     m_glyph_editor_width_spinbox->set_max(m_edited_font->max_glyph_width(), GUI::AllowCallback::No);
@@ -899,16 +897,6 @@ void FontEditorWidget::drop_event(GUI::DropEvent& event)
     }
 }
 
-void FontEditorWidget::did_resize_glyph_editor()
-{
-    constexpr int button_width = 22;
-    constexpr int buttons_per_bar = 4;
-    constexpr int spacing = (buttons_per_bar - 1) * 2 + 10;
-    constexpr int glyph_toolbars_width = button_width * buttons_per_bar + spacing;
-    m_glyph_editor_container->set_fixed_size(m_glyph_editor_widget->preferred_width(), m_glyph_editor_widget->preferred_height());
-    m_left_column_container->set_fixed_width(max(m_glyph_editor_widget->preferred_width(), glyph_toolbars_width));
-}
-
 void FontEditorWidget::set_scale(i32 scale)
 {
     m_glyph_editor_widget->set_scale(scale);
@@ -918,7 +906,7 @@ void FontEditorWidget::set_scale_and_save(i32 scale)
 {
     set_scale(scale);
     Config::write_i32("FontEditor", "GlyphEditor", "Scale", scale);
-    did_resize_glyph_editor();
+    m_glyph_editor_widget->set_fixed_size(m_glyph_editor_widget->preferred_width(), m_glyph_editor_widget->preferred_height());
 }
 
 void FontEditorWidget::copy_selected_glyphs()
@@ -1011,3 +999,5 @@ void FontEditorWidget::delete_selected_glyphs()
     m_glyph_map_widget->update();
     update_statusbar();
 }
+
+}

Userland/Applications/FontEditor/FontEditor.h

@@ -15,6 +15,8 @@
 #include <LibGUI/Widget.h>
 #include <LibGfx/Font/BitmapFont.h>
 
+namespace FontEditor {
+
 class GlyphEditorWidget;
 
 class FontEditorWidget final : public GUI::Widget {
@@ -63,7 +65,6 @@ private:
     void undo();
     void redo();
     void did_modify_font();
-    void did_resize_glyph_editor();
     void update_statusbar();
     void update_preview();
     void set_scale(i32);
@@ -123,8 +124,6 @@ private:
     RefPtr<GUI::Action> m_rotate_counterclockwise_action;
 
     RefPtr<GUI::Statusbar> m_statusbar;
-    RefPtr<GUI::Widget> m_left_column_container;
-    RefPtr<GUI::Widget> m_glyph_editor_container;
     RefPtr<GUI::Widget> m_unicode_block_container;
     RefPtr<GUI::ComboBox> m_weight_combobox;
     RefPtr<GUI::ComboBox> m_slope_combobox;
@@ -156,3 +155,5 @@ private:
     bool m_unicode_blocks { true };
     Unicode::CodePointRange m_range { 0x0000, 0x10FFFF };
 };
+
+}

Userland/Applications/FontEditor/FontEditorWindow.gml

@@ -17,23 +17,25 @@
 
         @GUI::Widget {
             name: "left_column_container"
+            preferred_width: "shrink"
             layout: @GUI::VerticalBoxLayout {}
 
-            @GUI::Widget {
+            @FontEditor::GlyphEditorWidget {
-                name: "glyph_editor_container"
+                name: "glyph_editor_widget"
-                layout: @GUI::VerticalBoxLayout {}
             }
 
             @GUI::Widget {
-                shrink_to_fit: true
+                preferred_height: "shrink"
                 layout: @GUI::VerticalBoxLayout {}
 
                 @GUI::SpinBox {
                     name: "glyph_editor_width_spinbox"
+                    preferred_width: "fit"
                 }
 
                 @GUI::CheckBox {
                     name: "glyph_editor_present_checkbox"
+                    preferred_width: "fit"
                     text: "Present"
                     focus_policy: "TabFocus"
                 }
@@ -64,21 +66,19 @@
                 @GUI::Widget {
                     layout: @GUI::VerticalBoxLayout {}
 
-                    @GUI::Widget {
+                    @GUI::GlyphMapWidget {
-                        name: "glyph_map_container"
+                        name: "glyph_map_widget"
-                        layout: @GUI::VerticalBoxLayout {}
                     }
 
                     @GUI::GroupBox {
                         name: "font_metadata_groupbox"
                         title: "Metadata"
-                        shrink_to_fit: true
+                        preferred_height: "shrink"
                         layout: @GUI::VerticalBoxLayout {
                             margins: [6, 6, 6, 6]
                         }
 
                         @GUI::Widget {
-                            fixed_height: 22
                             layout: @GUI::HorizontalBoxLayout {}
 
                             @GUI::Label {
@@ -94,7 +94,6 @@
                         }
 
                         @GUI::Widget {
-                            fixed_height: 22
                             layout: @GUI::HorizontalBoxLayout {}
 
                             @GUI::Label {
@@ -110,7 +109,6 @@
                         }
 
                         @GUI::Widget {
-                            fixed_height: 22
                             layout: @GUI::HorizontalBoxLayout {}
 
                             @GUI::Label {
@@ -127,7 +125,6 @@
                         }
 
                         @GUI::Widget {
-                            fixed_height: 22
                             layout: @GUI::HorizontalBoxLayout {}
 
                             @GUI::Label {
@@ -144,7 +141,6 @@
                         }
 
                         @GUI::Widget {
-                            fixed_height: 22
                             layout: @GUI::HorizontalBoxLayout {}
 
                             @GUI::Label {
@@ -162,7 +158,6 @@
                         }
 
                         @GUI::Widget {
-                            fixed_height: 22
                             layout: @GUI::HorizontalBoxLayout {}
 
                             @GUI::Label {
@@ -179,7 +174,6 @@
                         }
 
                         @GUI::Widget {
-                            fixed_height: 22
                             layout: @GUI::HorizontalBoxLayout {}
 
                             @GUI::Label {
@@ -196,7 +190,6 @@
                         }
 
                         @GUI::Widget {
-                            fixed_height: 22
                             layout: @GUI::HorizontalBoxLayout {}
 
                             @GUI::Label {

Userland/Applications/FontEditor/GlyphEditorWidget.cpp

@@ -14,6 +14,10 @@
 #include <LibGfx/Palette.h>
 #include <string.h>
 
+REGISTER_WIDGET(FontEditor, GlyphEditorWidget);
+
+namespace FontEditor {
+
 void GlyphEditorWidget::initialize(Gfx::BitmapFont& mutable_font)
 {
     if (m_font == mutable_font)
@@ -271,3 +275,5 @@ void GlyphEditorWidget::set_scale(int scale)
     m_scale = clamp(scale, 1, 15);
     update();
 }
+
+}

Userland/Applications/FontEditor/GlyphEditorWidget.h

@@ -11,6 +11,8 @@
 #include <LibGUI/Frame.h>
 #include <LibGfx/Font/BitmapFont.h>
 
+namespace FontEditor {
+
 class GlyphEditorWidget final : public GUI::Frame {
     C_OBJECT(GlyphEditorWidget)
 public:
@@ -71,3 +73,5 @@ private:
     Mode m_mode { Paint };
     bool m_is_clicking_valid_cell { false };
 };
+
+}

Userland/Applications/FontEditor/NewFontDialog.cpp

@@ -23,16 +23,15 @@
 #include <LibGfx/Font/FontStyleMapping.h>
 #include <LibGfx/Palette.h>
 
-namespace GUI {
+namespace FontEditor {
 
-class GlyphPreviewWidget final : public Frame {
+class GlyphPreviewWidget final : public GUI::Frame {
     C_OBJECT(GlyphPreviewWidget)
 public:
     void set_preview_size(int width, int height)
     {
         m_width = width;
         m_height = height;
-        m_glyph_width = width;
         for (int i = 10; i > 0; i--) {
             if ((frame_thickness() * 2 + (m_width * i) - 1) <= 250
                 && (frame_thickness() * 2 + (m_height * i) - 1) <= 205) {
@@ -53,10 +52,10 @@ private:
     {
         set_preview_size(m_width, m_height);
     }
-    virtual void paint_event(PaintEvent& event) override
+    virtual void paint_event(GUI::PaintEvent& event) override
     {
-        Frame::paint_event(event);
+        GUI::Frame::paint_event(event);
-        Painter painter(*this);
+        GUI::Painter painter(*this);
         painter.add_clip_rect(frame_inner_rect());
         painter.add_clip_rect(event.rect());
         painter.fill_rect(frame_inner_rect(), palette().base());
@@ -75,7 +74,7 @@ private:
         for (int y = 0; y < m_height; ++y) {
             for (int x = 0; x < m_width; ++x) {
                 Gfx::IntRect rect { x * m_scale, y * m_scale, m_scale, m_scale };
-                if (x >= m_glyph_width) {
+                if (x >= m_width) {
                     painter.fill_rect(rect, palette().threed_shadow1());
                 } else {
                     if (m_bits[x][y])
@@ -84,19 +83,19 @@ private:
             }
         }
     }
-    virtual void mousedown_event(MouseEvent& event) override
+    virtual void mousedown_event(GUI::MouseEvent& event) override
     {
         draw_at_mouse(event);
     }
-    virtual void mousemove_event(MouseEvent& event) override
+    virtual void mousemove_event(GUI::MouseEvent& event) override
     {
         if (event.buttons() & (GUI::MouseButton::Primary | GUI::MouseButton::Secondary))
             draw_at_mouse(event);
     }
-    void draw_at_mouse(MouseEvent const& event)
+    void draw_at_mouse(GUI::MouseEvent const& event)
     {
-        bool set = event.buttons() & MouseButton::Primary;
+        bool set = event.buttons() & GUI::MouseButton::Primary;
-        bool unset = event.buttons() & MouseButton::Secondary;
+        bool unset = event.buttons() & GUI::MouseButton::Secondary;
         if (!(set ^ unset))
             return;
         int x = (event.x() - 1) / m_scale;
@@ -114,7 +113,6 @@ private:
     int m_scale { 10 };
     int m_width { 20 };
     int m_height { 20 };
-    int m_glyph_width { 20 };
     int m_mean_line { 2 };
     int m_baseline { 16 };
     u8 m_bits[Gfx::GlyphBitmap::max_width()][Gfx::GlyphBitmap::max_height()] {};
@@ -122,6 +120,8 @@ private:
 
 }
 
+REGISTER_WIDGET(FontEditor, GlyphPreviewWidget);
+
 NewFontDialog::NewFontDialog(GUI::Window* parent_window)
     : GUI::WizardDialog(parent_window)
 {
@@ -159,7 +159,6 @@ NewFontDialog::NewFontDialog(GUI::Window* parent_window)
     m_glyph_properties_page->body_widget().load_from_gml(new_font_dialog_page_2_gml);
     m_glyph_properties_page->set_is_final_page(true);
 
-    m_glyph_editor_container = m_glyph_properties_page->body_widget().find_descendant_of_type_named<GUI::Widget>("glyph_editor_container");
     m_glyph_height_spinbox = m_glyph_properties_page->body_widget().find_descendant_of_type_named<GUI::SpinBox>("height_spinbox");
     m_glyph_width_spinbox = m_glyph_properties_page->body_widget().find_descendant_of_type_named<GUI::SpinBox>("width_spinbox");
     m_baseline_spinbox = m_glyph_properties_page->body_widget().find_descendant_of_type_named<GUI::SpinBox>("baseline_spinbox");
@@ -178,23 +177,15 @@ NewFontDialog::NewFontDialog(GUI::Window* parent_window)
     m_spacing_spinbox->set_value(1);
     m_fixed_width_checkbox->set_checked(false);
 
-    auto& preview_editor = m_glyph_editor_container->add<GUI::GlyphPreviewWidget>();
+    auto& preview_editor = *m_glyph_properties_page->body_widget().find_descendant_of_type_named<FontEditor::GlyphPreviewWidget>("glyph_preview_widget");
-    preview_editor.set_preview_size(20, 20);
-    m_glyph_editor_container->set_fixed_height(20 * 20 + preview_editor.frame_thickness() * 4);
 
     m_glyph_width_spinbox->on_change = [&](int value) {
         preview_editor.set_preview_size(value, m_glyph_height_spinbox->value());
-        deferred_invoke([&] {
-            m_glyph_editor_container->set_fixed_height(1 + preview_editor.height() + preview_editor.frame_thickness() * 2);
-        });
     };
     m_glyph_height_spinbox->on_change = [&](int value) {
         preview_editor.set_preview_size(m_glyph_width_spinbox->value(), value);
         m_mean_line_spinbox->set_max(max(value - 2, 0));
         m_baseline_spinbox->set_max(max(value - 2, 0));
-        deferred_invoke([&] {
-            m_glyph_editor_container->set_fixed_height(1 + preview_editor.height() + preview_editor.frame_thickness() * 2);
-        });
     };
     m_baseline_spinbox->on_change = [&](int value) {
         preview_editor.set_baseline(value);

Userland/Applications/FontEditor/NewFontDialog.h

@@ -52,7 +52,6 @@ private:
     RefPtr<GUI::SpinBox> m_presentation_spinbox;
 
     RefPtr<GUI::WizardPage> m_glyph_properties_page;
-    RefPtr<GUI::Widget> m_glyph_editor_container;
     RefPtr<GUI::SpinBox> m_glyph_height_spinbox;
     RefPtr<GUI::SpinBox> m_glyph_width_spinbox;
     RefPtr<GUI::SpinBox> m_baseline_spinbox;

Userland/Applications/FontEditor/NewFontDialogPage2.gml

@@ -1,127 +1,119 @@
 @GUI::Widget {
-    layout: @GUI::VerticalBoxLayout {
+    layout: @GUI::HorizontalBoxLayout {
         margins: [20]
     }
 
-    @GUI::Widget {
+    @GUI::GroupBox {
-        layout: @GUI::HorizontalBoxLayout {}
+        title: "Metadata"
+        fixed_width: 200
+        layout: @GUI::VerticalBoxLayout {
+            margins: [6]
+        }
 
-        @GUI::GroupBox {
+        @GUI::Widget {
-            title: "Metadata"
+            layout: @GUI::HorizontalBoxLayout {}
-            fixed_width: 200
+
-            layout: @GUI::VerticalBoxLayout {
+            @GUI::Label {
-                margins: [6]
+                fixed_width: 80
+                text_alignment: "CenterLeft"
+                text: "Height:"
             }
 
-            @GUI::Widget {
+            @GUI::SpinBox {
-                layout: @GUI::HorizontalBoxLayout {}
+                name: "height_spinbox"
-
+                min: 1
-                @GUI::Label {
-                    fixed_width: 80
-                    text_alignment: "CenterLeft"
-                    text: "Height:"
-                }
-
-                @GUI::SpinBox {
-                    name: "height_spinbox"
-                    min: 1
-                }
-            }
-
-            @GUI::Widget {
-                layout: @GUI::HorizontalBoxLayout {}
-
-                @GUI::Label {
-                    fixed_width: 80
-                    text_alignment: "CenterLeft"
-                    text: "Width:"
-                }
-
-                @GUI::SpinBox {
-                    name: "width_spinbox"
-                    min: 1
-                }
-            }
-
-            @GUI::Widget {
-                layout: @GUI::HorizontalBoxLayout {}
-
-                @GUI::Label {
-                    fixed_width: 80
-                    text_alignment: "CenterLeft"
-                    text: "Mean line:"
-                }
-
-                @GUI::SpinBox {
-                    name: "mean_line_spinbox"
-                    min: 0
-                }
-            }
-
-            @GUI::Widget {
-                layout: @GUI::HorizontalBoxLayout {}
-
-                @GUI::Label {
-                    fixed_width: 80
-                    text_alignment: "CenterLeft"
-                    text: "Baseline:"
-                }
-
-                @GUI::SpinBox {
-                    name: "baseline_spinbox"
-                    min: 0
-                }
-            }
-
-            @GUI::HorizontalSeparator {
-                fixed_height: 22
-            }
-
-            @GUI::Widget {
-                layout: @GUI::HorizontalBoxLayout {}
-
-                @GUI::Label {
-                    fixed_width: 80
-                    text_alignment: "CenterLeft"
-                    text: "Spacing:"
-                }
-
-                @GUI::SpinBox {
-                    name: "spacing_spinbox"
-                    min: 0
-                    max: 255
-                }
-            }
-
-            @GUI::Widget {
-                fixed_height: 22
-                layout: @GUI::HorizontalBoxLayout {}
-
-                @GUI::Widget {
-                    fixed_width: 80
-                }
-
-                @GUI::CheckBox {
-                    name: "fixed_width_checkbox"
-                    text: "Fixed width"
-                    autosize: true
-                }
             }
         }
 
         @GUI::Widget {
-            layout: @GUI::VerticalBoxLayout {}
+            layout: @GUI::HorizontalBoxLayout {}
 
-            @GUI::Widget {}
+            @GUI::Label {
-
+                fixed_width: 80
-            @GUI::Widget {
+                text_alignment: "CenterLeft"
-                name: "glyph_editor_container"
+                text: "Width:"
-                layout: @GUI::VerticalBoxLayout {
-                    margins: [5, 0, 0]
-                }
             }
 
-            @GUI::Widget {}
+            @GUI::SpinBox {
+                name: "width_spinbox"
+                min: 1
+            }
+        }
+
+        @GUI::Widget {
+            layout: @GUI::HorizontalBoxLayout {}
+
+            @GUI::Label {
+                fixed_width: 80
+                text_alignment: "CenterLeft"
+                text: "Mean line:"
+            }
+
+            @GUI::SpinBox {
+                name: "mean_line_spinbox"
+                min: 0
+            }
+        }
+
+        @GUI::Widget {
+            layout: @GUI::HorizontalBoxLayout {}
+
+            @GUI::Label {
+                fixed_width: 80
+                text_alignment: "CenterLeft"
+                text: "Baseline:"
+            }
+
+            @GUI::SpinBox {
+                name: "baseline_spinbox"
+                min: 0
+            }
+        }
+
+        @GUI::HorizontalSeparator {
+            fixed_height: 22
+        }
+
+        @GUI::Widget {
+            layout: @GUI::HorizontalBoxLayout {}
+
+            @GUI::Label {
+                fixed_width: 80
+                text_alignment: "CenterLeft"
+                text: "Spacing:"
+            }
+
+            @GUI::SpinBox {
+                name: "spacing_spinbox"
+                min: 0
+                max: 255
+            }
+        }
+
+        @GUI::Widget {
+            layout: @GUI::HorizontalBoxLayout {}
+
+            @GUI::Widget {
+                fixed_width: 80
+            }
+
+            @GUI::CheckBox {
+                name: "fixed_width_checkbox"
+                text: "Fixed width"
+            }
         }
     }
+
+    @GUI::Widget {
+        layout: @GUI::VerticalBoxLayout {}
+
+        @GUI::Layout::Spacer {}
+
+        @FontEditor::GlyphPreviewWidget {
+            name: "glyph_preview_widget"
+            layout: @GUI::VerticalBoxLayout {}
+        }
+
+        @GUI::Layout::Spacer {}
+    }
 }

Userland/Applications/FontEditor/main.cpp

@@ -42,7 +42,7 @@ ErrorOr<int> serenity_main(Main::Arguments arguments)
     window->set_icon(app_icon.bitmap_for_size(16));
     window->resize(640, 470);
 
-    auto font_editor = TRY(window->try_set_main_widget<FontEditorWidget>());
+    auto font_editor = TRY(window->try_set_main_widget<FontEditor::FontEditorWidget>());
     TRY(font_editor->initialize_menubar(*window));
 
     if (path) {