FontEditor: Add 'New Font' wizard to editor

Take a comfy guided tour through new font creation.

6 files changed, 620 insertions, 1 deletions

diff --git a/Userland/Applications/FontEditor/CMakeLists.txt b/Userland/Applications/FontEditor/CMakeLists.txt
index eb760d4401..80d30b66b6 100644
--- a/Userland/Applications/FontEditor/CMakeLists.txt
+++ b/Userland/Applications/FontEditor/CMakeLists.txt
@@ -1,5 +1,7 @@
 include_directories(${CMAKE_CURRENT_BINARY_DIR})
 compile_gml(FontEditorWindow.gml FontEditorWindowGML.h font_editor_window_gml)
+compile_gml(NewFontDialogPage1.gml NewFontDialogPage1GML.h new_font_dialog_page_1_gml)
+compile_gml(NewFontDialogPage2.gml NewFontDialogPage2GML.h new_font_dialog_page_2_gml)
 
 set(SOURCES
     FontEditor.cpp
@@ -7,6 +9,9 @@ set(SOURCES
     GlyphEditorWidget.cpp
     GlyphMapWidget.cpp
     main.cpp
+    NewFontDialog.cpp
+    NewFontDialogPage1GML.h
+    NewFontDialogPage2GML.h
 )
 
 serenity_app(FontEditor ICON app-font-editor)
diff --git a/Userland/Applications/FontEditor/FontEditor.cpp b/Userland/Applications/FontEditor/FontEditor.cpp
index 8d44690be4..bd123909f9 100644
--- a/Userland/Applications/FontEditor/FontEditor.cpp
+++ b/Userland/Applications/FontEditor/FontEditor.cpp
@@ -27,6 +27,7 @@
 #include "FontEditor.h"
 #include "GlyphEditorWidget.h"
 #include "GlyphMapWidget.h"
+#include "NewFontDialog.h"
 #include <AK/StringBuilder.h>
 #include <Applications/FontEditor/FontEditorWindowGML.h>
 #include <LibDesktop/Launcher.h>
@@ -123,7 +124,42 @@ FontEditorWidget::FontEditorWidget(const String& path, RefPtr<Gfx::BitmapFont>&&
             m_font_preview_window->update();
     };
 
-    auto open_action = GUI::CommonActions::make_open_action([&](auto&) {
+    m_new_action = GUI::Action::create("New Font...", { Mod_Ctrl, Key_N }, Gfx::Bitmap::load_from_file("/res/icons/16x16/filetype-font.png"), [&](auto&) {
+        auto new_font_wizard = NewFontDialog::construct(window());
+        if (new_font_wizard->exec() == GUI::Dialog::ExecOK) {
+            auto metadata = new_font_wizard->new_font_metadata();
+
+            String name = metadata.name;
+            auto parts = name.split(' ');
+            if (parts.size() > 1)
+                name = parts[0];
+            parts.clear();
+
+            String weight = GUI::weight_to_name(metadata.weight).to_string();
+            parts = weight.split(' ');
+            if (parts.size() > 1)
+                weight = String::formatted("{}{}", parts[0], parts[1]);
+
+            RefPtr<Gfx::BitmapFont> new_font = Gfx::BitmapFont::create(metadata.glyph_height, metadata.glyph_width, metadata.is_fixed_width, metadata.type);
+            String path = String::formatted("/tmp/{}{}{}.font", name, weight, metadata.presentation_size);
+            if (!new_font) {
+                String message = String::formatted("Failed to create new font: {}\n", path);
+                GUI::MessageBox::show(window(), message, "Font Editor", GUI::MessageBox::Type::Error);
+                return;
+            }
+
+            new_font->set_name(metadata.name);
+            new_font->set_family(metadata.family);
+            new_font->set_presentation_size(metadata.presentation_size);
+            new_font->set_weight(metadata.weight);
+            new_font->set_baseline(metadata.baseline);
+            new_font->set_mean_line(metadata.mean_line);
+
+            window()->set_title(String::formatted("{} - Font Editor", path));
+            initialize(path, move(new_font));
+        }
+    });
+    m_open_action = GUI::CommonActions::make_open_action([&](auto&) {
         Optional<String> open_path = GUI::FilePicker::get_open_filepath(window(), {}, "/res/fonts/");
         if (!open_path.has_value())
             return;
diff --git a/Userland/Applications/FontEditor/NewFontDialog.cpp b/Userland/Applications/FontEditor/NewFontDialog.cpp
new file mode 100644
index 0000000000..c2d4e416d0
--- /dev/null
+++ b/Userland/Applications/FontEditor/NewFontDialog.cpp
@@ -0,0 +1,246 @@
+/*
+ * Copyright (c) 2021, the SerenityOS developers
+ * All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *
+ * 1. Redistributions of source code must retain the above copyright notice, this
+ *    list of conditions and the following disclaimer.
+ *
+ * 2. Redistributions in binary form must reproduce the above copyright notice,
+ *    this list of conditions and the following disclaimer in the documentation
+ *    and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+ * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+ * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+ * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+ * CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+ * OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+#include "NewFontDialog.h"
+#include <AK/StringBuilder.h>
+#include <Applications/FontEditor/NewFontDialogPage1GML.h>
+#include <Applications/FontEditor/NewFontDialogPage2GML.h>
+#include <LibGUI/Button.h>
+#include <LibGUI/CheckBox.h>
+#include <LibGUI/ComboBox.h>
+#include <LibGUI/FontPickerWeightModel.h>
+#include <LibGUI/Label.h>
+#include <LibGUI/MessageBox.h>
+#include <LibGUI/Painter.h>
+#include <LibGUI/SpinBox.h>
+#include <LibGUI/TextBox.h>
+#include <LibGUI/Widget.h>
+#include <LibGUI/Wizards/WizardDialog.h>
+#include <LibGfx/BitmapFont.h>
+#include <LibGfx/Font.h>
+#include <LibGfx/Palette.h>
+
+namespace GUI {
+
+class GlyphPreviewWidget final : public Frame {
+    C_OBJECT(GlyphPreviewWidget)
+public:
+    void set_preview_size(int width, int height)
+    {
+        m_width = width;
+        m_height = height;
+        m_glyph_width = width;
+        if (m_width > 25 || m_height > 20)
+            set_scale(6);
+        if (m_width <= 25 && m_height <= 20)
+            set_scale(10);
+        set_fixed_width(frame_thickness() * 2 + (m_width * m_scale) - 1);
+        set_fixed_height(frame_thickness() * 2 + (m_height * m_scale) - 1);
+    }
+
+    void set_scale(int scale) { m_scale = scale; }
+    void set_baseline(int i) { m_baseline = i; }
+    void set_mean_line(int i) { m_mean_line = i; }
+
+private:
+    GlyphPreviewWidget()
+    {
+        set_preview_size(m_width, m_height);
+    }
+    virtual void paint_event(PaintEvent& event) override
+    {
+        Frame::paint_event(event);
+        Painter painter(*this);
+        painter.add_clip_rect(frame_inner_rect());
+        painter.add_clip_rect(event.rect());
+        painter.fill_rect(frame_inner_rect(), palette().base());
+        painter.translate(frame_thickness(), frame_thickness());
+
+        painter.translate(-1, -1);
+        for (int y = 1; y < m_height; ++y) {
+            int y_below = y - 1;
+            bool bold_line = y_below == m_baseline || y_below == m_mean_line;
+            painter.draw_line({ 0, y * m_scale }, { m_width * m_scale, y * m_scale }, palette().threed_shadow2(), bold_line ? 2 : 1);
+        }
+
+        for (int x = 1; x < m_width; ++x)
+            painter.draw_line({ x * m_scale, 0 }, { x * m_scale, m_height * m_scale }, palette().threed_shadow2());
+
+        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) {
+                    painter.fill_rect(rect, palette().threed_shadow1());
+                } else {
+                    if (m_bits[x][y])
+                        painter.fill_rect(rect, palette().base_text());
+                }
+            }
+        }
+    }
+    virtual void mousedown_event(MouseEvent& event) override
+    {
+        draw_at_mouse(event);
+    }
+    virtual void mousemove_event(MouseEvent& event) override
+    {
+        if (event.buttons() & (GUI::MouseButton::Left | GUI::MouseButton::Right))
+            draw_at_mouse(event);
+    }
+    void draw_at_mouse(const MouseEvent& event)
+    {
+        bool set = event.buttons() & MouseButton::Left;
+        bool unset = event.buttons() & MouseButton::Right;
+        if (!(set ^ unset))
+            return;
+        int x = (event.x() - 1) / m_scale;
+        int y = (event.y() - 1) / m_scale;
+        if (x < 0 || x >= m_width)
+            return;
+        if (y < 0 || y >= m_height)
+            return;
+        if (m_bits[x][y] == set)
+            return;
+        m_bits[x][y] = set;
+        update();
+    }
+
+    int m_scale { 20 };
+    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[34][34] {};
+};
+
+}
+
+NewFontDialog::NewFontDialog(GUI::Window* parent_window)
+    : GUI::WizardDialog(parent_window)
+{
+    set_title("New Font");
+
+    m_font_properties_page = GUI::WizardPage::construct("Font properties", "Edit details about this font.");
+    m_font_properties_page->body_widget().load_from_gml(new_font_dialog_page_1_gml);
+
+    m_name_textbox = m_font_properties_page->body_widget().find_descendant_of_type_named<GUI::TextBox>("name_textbox");
+    m_family_textbox = m_font_properties_page->body_widget().find_descendant_of_type_named<GUI::TextBox>("family_textbox");
+    m_type_combobox = m_font_properties_page->body_widget().find_descendant_of_type_named<GUI::ComboBox>("type_combobox");
+    m_type_info_label = m_font_properties_page->body_widget().find_descendant_of_type_named<GUI::Label>("type_info_label");
+    m_weight_combobox = m_font_properties_page->body_widget().find_descendant_of_type_named<GUI::ComboBox>("weight_combobox");
+    m_presentation_spinbox = m_font_properties_page->body_widget().find_descendant_of_type_named<GUI::SpinBox>("presentation_spinbox");
+
+    m_type_info_label->set_text("\xE2\x84\xB9\t");
+    m_type_info_label->set_tooltip("Font type governs maximum glyph count");
+
+    for (auto& it : GUI::font_weight_names)
+        m_font_weight_list.append(it.name);
+    m_weight_combobox->set_model(*GUI::ItemListModel<String>::create(m_font_weight_list));
+    m_weight_combobox->set_selected_index(3);
+
+    StringBuilder type_count;
+    for (int i = 0; i < Gfx::FontTypes::__Count; i++) {
+        type_count.appendff("{} ({})",
+            Gfx::BitmapFont::type_name_by_type(static_cast<Gfx::FontTypes>(i)),
+            Gfx::BitmapFont::glyph_count_by_type(static_cast<Gfx::FontTypes>(i)));
+        m_font_type_list.append(type_count.to_string());
+        type_count.clear();
+    }
+    m_type_combobox->set_model(*GUI::ItemListModel<String>::create(m_font_type_list));
+    m_type_combobox->set_selected_index(0);
+
+    m_presentation_spinbox->set_value(12);
+
+    m_font_properties_page->on_page_enter = [&]() {
+        m_name_textbox->set_focus(true);
+    };
+    m_font_properties_page->on_next_page = [&]() {
+        return m_glyph_properties_page;
+    };
+
+    m_glyph_properties_page = GUI::WizardPage::construct("Glyph properties", "Edit details about this font.");
+    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");
+    m_mean_line_spinbox = m_glyph_properties_page->body_widget().find_descendant_of_type_named<GUI::SpinBox>("mean_line_spinbox");
+    m_spacing_spinbox = m_glyph_properties_page->body_widget().find_descendant_of_type_named<GUI::SpinBox>("spacing_spinbox");
+    m_fixed_width_checkbox = m_glyph_properties_page->body_widget().find_descendant_of_type_named<GUI::CheckBox>("fixed_width_checkbox");
+
+    m_glyph_height_spinbox->set_value(20);
+    m_glyph_width_spinbox->set_value(20);
+    m_mean_line_spinbox->set_value(3);
+    m_baseline_spinbox->set_value(16);
+    m_spacing_spinbox->set_value(1);
+    m_fixed_width_checkbox->set_checked(false);
+
+    auto& preview_editor = m_glyph_editor_container->add<GUI::GlyphPreviewWidget>();
+    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);
+        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);
+        preview_editor.update();
+    };
+    m_mean_line_spinbox->on_change = [&](int value) {
+        preview_editor.set_mean_line(value);
+        preview_editor.update();
+    };
+
+    push_page(*m_font_properties_page);
+}
+
+void NewFontDialog::save_metadata()
+{
+    m_new_font_metadata.name = m_name_textbox->text();
+    m_new_font_metadata.family = m_family_textbox->text();
+    m_new_font_metadata.weight = GUI::name_to_weight(m_weight_combobox->text());
+    m_new_font_metadata.type = static_cast<Gfx::FontTypes>(m_type_combobox->selected_index());
+    m_new_font_metadata.presentation_size = m_presentation_spinbox->value();
+
+    m_new_font_metadata.baseline = m_baseline_spinbox->value();
+    m_new_font_metadata.mean_line = m_mean_line_spinbox->value();
+    m_new_font_metadata.glyph_height = m_glyph_height_spinbox->value();
+    m_new_font_metadata.glyph_width = m_glyph_width_spinbox->value();
+    m_new_font_metadata.glyph_spacing = m_spacing_spinbox->value();
+    m_new_font_metadata.is_fixed_width = m_fixed_width_checkbox->is_checked();
+}
diff --git a/Userland/Applications/FontEditor/NewFontDialog.h b/Userland/Applications/FontEditor/NewFontDialog.h
new file mode 100644
index 0000000000..a5cf9f82e5
--- /dev/null
+++ b/Userland/Applications/FontEditor/NewFontDialog.h
@@ -0,0 +1,89 @@
+/*
+ * Copyright (c) 2021, the SerenityOS developers
+ * All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *
+ * 1. Redistributions of source code must retain the above copyright notice, this
+ *    list of conditions and the following disclaimer.
+ *
+ * 2. Redistributions in binary form must reproduce the above copyright notice,
+ *    this list of conditions and the following disclaimer in the documentation
+ *    and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+ * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+ * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+ * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+ * CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+ * OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+#pragma once
+
+#include <LibGUI/Window.h>
+#include <LibGUI/Wizards/WizardDialog.h>
+#include <LibGUI/Wizards/WizardPage.h>
+#include <LibGfx/BitmapFont.h>
+
+class NewFontDialog final : public GUI::WizardDialog {
+    C_OBJECT(NewFontDialog);
+
+public:
+    auto new_font_metadata()
+    {
+        save_metadata();
+        return m_new_font_metadata;
+    }
+
+private:
+    NewFontDialog(GUI::Window* parent_window);
+
+    void save_metadata();
+
+    RefPtr<Gfx::BitmapFont> m_font_clone;
+
+    struct NewFontMetadata {
+        u8 glyph_width;
+        u8 glyph_height;
+        u8 glyph_spacing;
+        u8 baseline;
+        u8 mean_line;
+        u8 presentation_size;
+        u16 weight;
+        String name;
+        String family;
+        Gfx::FontTypes type;
+        bool is_fixed_width;
+    } m_new_font_metadata;
+
+    RefPtr<GUI::WizardPage> m_font_selection_page;
+    RefPtr<GUI::ComboBox> m_select_font_combobox;
+    RefPtr<GUI::Button> m_browse_button;
+
+    RefPtr<GUI::WizardPage> m_font_properties_page;
+    RefPtr<GUI::TextBox> m_name_textbox;
+    RefPtr<GUI::TextBox> m_family_textbox;
+    RefPtr<GUI::ComboBox> m_type_combobox;
+    RefPtr<GUI::Label> m_type_info_label;
+    RefPtr<GUI::ComboBox> m_weight_combobox;
+    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;
+    RefPtr<GUI::SpinBox> m_mean_line_spinbox;
+    RefPtr<GUI::SpinBox> m_spacing_spinbox;
+    RefPtr<GUI::CheckBox> m_fixed_width_checkbox;
+
+    Vector<String> m_font_list;
+    Vector<String> m_font_type_list;
+    Vector<String> m_font_weight_list;
+};
diff --git a/Userland/Applications/FontEditor/NewFontDialogPage1.gml b/Userland/Applications/FontEditor/NewFontDialogPage1.gml
new file mode 100644
index 0000000000..0f560d1c2c
--- /dev/null
+++ b/Userland/Applications/FontEditor/NewFontDialogPage1.gml
@@ -0,0 +1,103 @@
+@GUI::Widget {
+    layout: @GUI::VerticalBoxLayout {
+        margins: [20, 20, 20, 20]
+    }
+
+    @GUI::Widget {
+        fixed_height: 160
+        layout: @GUI::VerticalBoxLayout {
+        }
+
+        @GUI::Widget {
+            layout: @GUI::HorizontalBoxLayout {
+            }
+
+            @GUI::Label {
+                fixed_width: 100
+                text_alignment: "CenterLeft"
+                text: "Name:"
+            }
+
+            @GUI::TextBox {
+                name: "name_textbox"
+            }
+        }
+
+        @GUI::Widget {
+            layout: @GUI::HorizontalBoxLayout {
+            }
+
+            @GUI::Label {
+                fixed_width: 100
+                text_alignment: "CenterLeft"
+                text: "Family:"
+            }
+
+            @GUI::TextBox {
+                name: "family_textbox"
+            }
+        }
+
+        @GUI::HorizontalSeparator {
+            fixed_height: 22
+        }
+
+        @GUI::Widget {
+            layout: @GUI::HorizontalBoxLayout {
+            }
+
+            @GUI::Label {
+                fixed_width: 100
+                text_alignment: "CenterLeft"
+                text: "Type:"
+            }
+
+            @GUI::ComboBox {
+                name: "type_combobox"
+                fixed_width: 180
+                model_only: true
+            }
+
+            @GUI::Label {
+                name: "type_info_label"
+                text_alignment: "CenterLeft"
+                autosize: true
+            }
+        }
+
+        @GUI::Widget {
+            layout: @GUI::HorizontalBoxLayout {
+            }
+
+            @GUI::Label {
+                text: "Weight:"
+                fixed_width: 100
+                text_alignment: "CenterLeft"
+            }
+
+            @GUI::ComboBox {
+                name: "weight_combobox"
+                fixed_width: 180
+                model_only: true
+            }
+        }
+
+        @GUI::Widget {
+            layout: @GUI::HorizontalBoxLayout {
+            }
+
+            @GUI::Label {
+                fixed_width: 100
+                text_alignment: "CenterLeft"
+                text: "Presentation size:"
+            }
+
+            @GUI::SpinBox {
+                name: "presentation_spinbox"
+                min: 0
+                max: 255
+                fixed_width: 180
+            }
+        }
+    }
+}
diff --git a/Userland/Applications/FontEditor/NewFontDialogPage2.gml b/Userland/Applications/FontEditor/NewFontDialogPage2.gml
new file mode 100644
index 0000000000..9576615287
--- /dev/null
+++ b/Userland/Applications/FontEditor/NewFontDialogPage2.gml
@@ -0,0 +1,140 @@
+@GUI::Widget {
+    layout: @GUI::VerticalBoxLayout {
+        margins: [20, 20, 20, 20]
+    }
+
+    @GUI::Widget {
+        layout: @GUI::HorizontalBoxLayout {
+        }
+
+        @GUI::GroupBox {
+            title: "Metadata"
+            fixed_width: 200
+            layout: @GUI::VerticalBoxLayout {
+                margins: [8, 16, 8, 8]
+            }
+
+            @GUI::Widget {
+                layout: @GUI::HorizontalBoxLayout {
+                }
+
+                @GUI::Label {
+                    fixed_width: 80
+                    text_alignment: "CenterLeft"
+                    text: "Height:"
+                }
+
+                @GUI::SpinBox {
+                    name: "height_spinbox"
+                    min: 0
+                    max: 34
+                }
+            }
+
+            @GUI::Widget {
+                layout: @GUI::HorizontalBoxLayout {
+                }
+
+                @GUI::Label {
+                    fixed_width: 80
+                    text_alignment: "CenterLeft"
+                    text: "Width:"
+                }
+
+                @GUI::SpinBox {
+                    name: "width_spinbox"
+                    min: 0
+                    max: 34
+                }
+            }
+
+            @GUI::Widget {
+                layout: @GUI::HorizontalBoxLayout {
+                }
+
+                @GUI::Label {
+                    fixed_width: 80
+                    text_alignment: "CenterLeft"
+                    text: "Mean line:"
+                }
+
+                @GUI::SpinBox {
+                    name: "mean_line_spinbox"
+                    min: 0
+                    max: 32
+                }
+            }
+
+            @GUI::Widget {
+                layout: @GUI::HorizontalBoxLayout {
+                }
+
+                @GUI::Label {
+                    fixed_width: 80
+                    text_alignment: "CenterLeft"
+                    text: "Baseline:"
+                }
+
+                @GUI::SpinBox {
+                    name: "baseline_spinbox"
+                    min: 0
+                    max: 32
+                }
+            }
+
+            @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::CheckBox {
+                    name: "fixed_width_checkbox"
+                    text: "Fixed width"
+                    autosize: true
+                }
+
+                @GUI::Widget {
+                }
+            }
+        }
+
+        @GUI::Widget {
+            layout: @GUI::VerticalBoxLayout {
+            }
+
+            @GUI::Widget {
+            }
+
+            @GUI::Widget {
+                name: "glyph_editor_container"
+                layout: @GUI::VerticalBoxLayout {
+                    margins: [0, 5, 0, 0]
+                }
+            }
+
+            @GUI::Widget {
+            }
+        }
+    }
+}