Start working on a simple graphical font editor.

Editing fonts by editing text files is really slow and boring.
A simple font editor seems like a good way to take LibGUI for a spin.

FontEditor/.gitignore

@@ -0,0 +1,3 @@
+*.o
+*.d
+FontEditor

FontEditor/FontEditor.cpp

@@ -0,0 +1,192 @@
+#include "FontEditor.h"
+#include <SharedGraphics/Painter.h>
+#include <LibGUI/GLabel.h>
+
+FontEditorWidget::FontEditorWidget(GWidget* parent)
+    : GWidget(parent)
+{
+    auto mutable_font = Font::default_font().clone();
+
+    m_glyph_map_widget = new GlyphMapWidget(*mutable_font, this);
+    m_glyph_map_widget->move_to({ 90, 5 });
+
+    m_glyph_editor_widget = new GlyphEditorWidget(*mutable_font, this);
+    m_glyph_editor_widget->move_to({ 5, 5 });
+
+    auto* label = new GLabel(this);
+    label->set_relative_rect({ 5, 110, 140, 20 });
+
+    m_glyph_editor_widget->on_glyph_altered = [this] {
+        m_glyph_map_widget->update();
+    };
+
+    m_glyph_map_widget->on_glyph_selected = [this, label] (byte glyph) {
+        m_glyph_editor_widget->set_glyph(glyph);
+        label->set_text(String::format("Glyph: 0x%b (%c)", glyph, glyph));
+    };
+
+    m_glyph_map_widget->set_selected_glyph('A');
+}
+
+FontEditorWidget::~FontEditorWidget()
+{
+}
+
+GlyphMapWidget::GlyphMapWidget(Font& mutable_font, GWidget* parent)
+    : GWidget(parent)
+    , m_font(mutable_font)
+{
+    set_relative_rect({ 0, 0, preferred_width(), preferred_height() });
+}
+
+GlyphMapWidget::~GlyphMapWidget()
+{
+}
+
+int GlyphMapWidget::preferred_width() const
+{
+    return columns() * (font().glyph_width() + m_horizontal_spacing);
+}
+
+int GlyphMapWidget::preferred_height() const
+{
+    return rows() * (font().glyph_height() + m_vertical_spacing);
+}
+
+void GlyphMapWidget::set_selected_glyph(byte glyph)
+{
+    if (m_selected_glyph == glyph)
+        return;
+    m_selected_glyph = glyph;
+    if (on_glyph_selected)
+        on_glyph_selected(glyph);
+    update();
+}
+
+Rect GlyphMapWidget::get_outer_rect(byte glyph) const
+{
+    int row = glyph / columns();
+    int column = glyph % columns();
+    return {
+        column * (font().glyph_width() + m_horizontal_spacing),
+        row * (font().glyph_height() + m_vertical_spacing),
+        font().glyph_width() + m_horizontal_spacing,
+        font().glyph_height() + m_horizontal_spacing
+    };
+}
+
+void GlyphMapWidget::paint_event(GPaintEvent&)
+{
+    Painter painter(*this);
+    painter.set_font(font());
+    painter.fill_rect(rect(), Color::White);
+
+    byte glyph = 0;
+
+    for (int row = 0; row < rows(); ++row) {
+        for (int column = 0; column < columns(); ++column, ++glyph) {
+            Rect outer_rect = get_outer_rect(glyph);
+            Rect inner_rect(
+                outer_rect.x() + m_horizontal_spacing / 2,
+                outer_rect.y() + m_vertical_spacing / 2,
+                font().glyph_width(),
+                font().glyph_height()
+            );
+            if (glyph == m_selected_glyph) {
+                painter.fill_rect(outer_rect, Color::Red);
+                painter.draw_glyph(inner_rect.location(), glyph, Color::White);
+            } else {
+                painter.draw_glyph(inner_rect.location(), glyph, Color::Black);
+            }
+        }
+    }
+}
+
+void GlyphMapWidget::mousedown_event(GMouseEvent& event)
+{
+    // FIXME: This is a silly loop.
+    for (unsigned glyph = 0; glyph < 256; ++glyph) {
+        if (get_outer_rect(glyph).contains(event.position())) {
+            set_selected_glyph(glyph);
+            break;
+        }
+    }
+}
+
+GlyphEditorWidget::GlyphEditorWidget(Font& mutable_font, GWidget* parent)
+    : GWidget(parent)
+    , m_font(mutable_font)
+{
+    set_relative_rect({ 0, 0, preferred_width(), preferred_height() });
+}
+
+GlyphEditorWidget::~GlyphEditorWidget()
+{
+}
+
+void GlyphEditorWidget::set_glyph(byte glyph)
+{
+    if (m_glyph == glyph)
+        return;
+    m_glyph = glyph;
+    update();
+}
+
+void GlyphEditorWidget::paint_event(GPaintEvent&)
+{
+    Painter painter(*this);
+    painter.fill_rect(rect(), Color::White);
+    painter.draw_rect(rect(), Color::Black);
+
+    auto& bitmap = font().glyph_bitmap(m_glyph);
+
+    for (int y = 0; y < font().glyph_height(); ++y) {
+        for (int x = 0; x < font().glyph_width(); ++x) {
+            Rect rect { x * m_scale, y * m_scale, m_scale, m_scale };
+            painter.fill_rect(rect, bitmap.bit_at(x, y) ? Color::Black : Color::White);
+        }
+    }
+}
+
+void GlyphEditorWidget::mousedown_event(GMouseEvent& event)
+{
+    draw_at_mouse(event);
+}
+
+void GlyphEditorWidget::mousemove_event(GMouseEvent& event)
+{
+    if (event.buttons() & (GMouseButton::Left | GMouseButton::Right))
+        draw_at_mouse(event);
+}
+
+void GlyphEditorWidget::draw_at_mouse(const GMouseEvent& event)
+{
+    bool set = event.buttons() & GMouseButton::Left;
+    bool unset = event.buttons() & GMouseButton::Right;
+    if (!(set ^ unset))
+        return;
+    byte new_bit = set ? '#' : ' ';
+    int x = event.x() / m_scale;
+    int y = event.y() / m_scale;
+    auto& bitmap = font().glyph_bitmap(m_glyph);
+    auto* mutable_bits = const_cast<char*>(bitmap.bits());
+    ASSERT((unsigned)x < bitmap.width());
+    ASSERT((unsigned)y < bitmap.height());
+    auto& bit = mutable_bits[y * bitmap.width() + x];
+    if (bit == new_bit)
+        return;
+    bit = new_bit;
+    if (on_glyph_altered)
+        on_glyph_altered();
+    update();
+}
+
+int GlyphEditorWidget::preferred_width() const
+{
+    return font().glyph_width() * m_scale;
+}
+
+int GlyphEditorWidget::preferred_height() const
+{
+    return font().glyph_height() * m_scale;
+}

FontEditor/FontEditor.h

@@ -0,0 +1,77 @@
+#pragma once
+
+#include <LibGUI/GWidget.h>
+#include <AK/Function.h>
+
+class GlyphEditorWidget;
+class GlyphMapWidget;
+
+class FontEditorWidget final : public GWidget {
+public:
+    FontEditorWidget(GWidget* parent = nullptr);
+    virtual ~FontEditorWidget() override;
+
+private:
+    GlyphMapWidget* m_glyph_map_widget { nullptr };
+    GlyphEditorWidget* m_glyph_editor_widget { nullptr };
+};
+
+class GlyphMapWidget final : public GWidget {
+public:
+    GlyphMapWidget(Font&, GWidget* parent);
+    virtual ~GlyphMapWidget() override;
+
+    byte selected_glyph() const { return m_selected_glyph; }
+    void set_selected_glyph(byte);
+
+    int rows() const { return m_rows; }
+    int columns() const { return 256 / m_rows; }
+
+    int preferred_width() const;
+    int preferred_height() const;
+
+    Font& font() { return *m_font; }
+    const Font& font() const { return *m_font; }
+
+    Function<void(byte)> on_glyph_selected;
+
+private:
+    virtual void paint_event(GPaintEvent&) override;
+    virtual void mousedown_event(GMouseEvent&) override;
+
+    Rect get_outer_rect(byte glyph) const;
+
+    RetainPtr<Font> m_font;
+    int m_rows { 8 };
+    int m_horizontal_spacing { 2 };
+    int m_vertical_spacing { 2 };
+    byte m_selected_glyph { 0 };
+};
+
+class GlyphEditorWidget final : public GWidget {
+public:
+    GlyphEditorWidget(Font&, GWidget* parent);
+    virtual ~GlyphEditorWidget() override;
+
+    byte glyph() const { return m_glyph; }
+    void set_glyph(byte);
+
+    int preferred_width() const;
+    int preferred_height() const;
+
+    Font& font() { return *m_font; }
+    const Font& font() const { return *m_font; }
+
+    Function<void()> on_glyph_altered;
+
+private:
+    virtual void paint_event(GPaintEvent&) override;
+    virtual void mousedown_event(GMouseEvent&) override;
+    virtual void mousemove_event(GMouseEvent&) override;
+
+    void draw_at_mouse(const GMouseEvent&);
+
+    RetainPtr<Font> m_font;
+    byte m_glyph { 0 };
+    int m_scale { 10 };
+};

FontEditor/Makefile

@@ -0,0 +1,35 @@
+OBJS = \
+    FontEditor.o \
+    main.o
+
+APP = FontEditor
+
+ARCH_FLAGS =
+STANDARD_FLAGS = -std=c++17 -nostdinc++ -nostdlib -nostdinc
+USERLAND_FLAGS = -ffreestanding -fno-stack-protector -fno-ident
+WARNING_FLAGS = -Wextra -Wall -Wundef -Wcast-qual -Wwrite-strings
+FLAVOR_FLAGS = -march=i386 -mregparm=3 -m32 -fno-exceptions -fno-rtti -fmerge-all-constants -fno-unroll-loops -fno-pie -fno-pic
+OPTIMIZATION_FLAGS = -Oz -fno-asynchronous-unwind-tables
+INCLUDE_FLAGS = -I.. -I. -I../LibC
+
+DEFINES = -DSERENITY -DSANITIZE_PTRS -DUSERLAND
+
+CXXFLAGS = -MMD -MP $(WARNING_FLAGS) $(OPTIMIZATION_FLAGS) $(USERLAND_FLAGS) $(FLAVOR_FLAGS) $(ARCH_FLAGS) $(STANDARD_FLAGS) $(INCLUDE_FLAGS) $(DEFINES)
+CXX = clang
+LD = ld
+AR = ar
+LDFLAGS = -static --strip-debug -melf_i386 --build-id=none -z norelro -z now -e _start --gc-sections
+
+all: $(APP)
+
+$(APP): $(OBJS)
+	$(LD) -o $(APP) $(LDFLAGS) $(OBJS) ../LibGUI/LibGUI.a ../LibC/LibC.a
+
+.cpp.o:
+	@echo "CXX $<"; $(CXX) $(CXXFLAGS) -o $@ -c $<
+
+-include $(OBJS:%.o=%.d)
+
+clean:
+	@echo "CLEAN"; rm -f $(APPS) $(OBJS) *.d
+

FontEditor/main.cpp

@@ -0,0 +1,20 @@
+#include "FontEditor.h"
+#include <LibGUI/GEventLoop.h>
+#include <LibGUI/GWindow.h>
+#include <stdio.h>
+
+int main(int argc, char** argv)
+{
+    (void) argc;
+    (void) argv;
+
+    GEventLoop loop;
+    auto* window = new GWindow;
+    window->set_title("FontEditor");
+    window->set_rect({ 50, 50, 420, 200 });
+    auto* font_editor = new FontEditorWidget;
+    font_editor->set_relative_rect({ 0, 0, 420, 200 });
+    window->set_main_widget(font_editor);
+    window->show();
+    return loop.exec();
+}

Kernel/init.cpp

@@ -26,6 +26,7 @@
 
 //#define SPAWN_GUITEST
 #define SPAWN_GUITEST2
+#define SPAWN_FONTEDITOR
 //#define SPAWN_MULTIPLE_SHELLS
 //#define STRESS_TEST_SPAWNING
 
@@ -110,6 +111,9 @@ static void init_stage2()
 #ifdef SPAWN_GUITEST2
     Process::create_user_process("/bin/guitest2", (uid_t)100, (gid_t)100, (pid_t)0, error, { }, move(environment), tty0);
 #endif
+#ifdef SPAWN_FONTEDITOR
+    Process::create_user_process("/bin/FontEditor", (uid_t)100, (gid_t)100, (pid_t)0, error, { }, move(environment), tty0);
+#endif
 #ifdef SPAWN_MULTIPLE_SHELLS
     Process::create_user_process("/bin/sh", (uid_t)100, (gid_t)100, (pid_t)0, error, { }, { }, tty1);
     Process::create_user_process("/bin/sh", (uid_t)100, (gid_t)100, (pid_t)0, error, { }, { }, tty2);

Kernel/makeall.sh

@@ -10,6 +10,8 @@ make -C ../Userland clean && \
 make -C ../Userland && \
 make -C ../Terminal clean && \
 make -C ../Terminal && \
+make -C ../FontEditor clean && \
+make -C ../FontEditor && \
 make clean &&\
 make && \
 sudo ./sync.sh

Kernel/mkf.sh

@@ -0,0 +1,8 @@
+#!/bin/bash
+
+sudo id
+
+make -C ../FontEditor clean && \
+make -C ../FontEditor && \
+sudo ./sync.sh
+

Kernel/sync.sh

@@ -43,6 +43,8 @@ cp -v ../Userland/guitest mnt/bin/guitest
 cp -v ../Userland/guitest2 mnt/bin/guitest2
 cp -v ../Userland/sysctl mnt/bin/sysctl
 cp -v ../Terminal/Terminal mnt/bin/Terminal
+cp -v ../FontEditor/FontEditor mnt/bin/FontEditor
+ln -s FontEditor mnt/bin/ff
 cp -v ../Userland/dmesg mnt/bin/dmesg
 cp -v ../Userland/chmod mnt/bin/chmod
 sh sync-local.sh

LibGUI/GEvent.h

@@ -77,7 +77,7 @@ public:
     }
 };
 
-enum class GMouseButton : byte {
+enum GMouseButton : byte {
     None = 0,
     Left = 1,
     Right = 2,

LibGUI/GWidget.cpp

@@ -70,7 +70,10 @@ void GWidget::paint_event(GPaintEvent& event)
     }
     for (auto* ch : children()) {
         auto* child = (GWidget*)ch;
-        child->event(event);
+        if (child->relative_rect().intersects(event.rect())) {
+            // FIXME: Pass localized rect?
+            child->event(event);
+        }
     }
 }
 

LibGUI/GWidget.h

@@ -56,6 +56,7 @@ public:
     virtual const char* class_name() const override { return "GWidget"; }
 
     void set_relative_rect(const Rect&);
+    void move_to(const Point& point) { set_relative_rect({ point, relative_rect().size() }); }
 
     Color background_color() const { return m_background_color; }
     Color foreground_color() const { return m_foreground_color; }

SharedGraphics/CharacterBitmap.h

@@ -9,6 +9,7 @@ public:
     static RetainPtr<CharacterBitmap> create_from_ascii(const char* asciiData, unsigned width, unsigned height);
     ~CharacterBitmap();
 
+    bool bit_at(unsigned x, unsigned y) const { return m_bits[y * width() + x] == '#'; }
     const char* bits() const { return m_bits; }
 
     Size size() const { return m_size; }

SharedGraphics/Font.cpp

@@ -4,6 +4,21 @@
 
 #define DEFAULT_FONT_NAME Liza8x10
 
+static const byte error_glyph_width = 8;
+static const byte error_glyph_height = 10;
+static constexpr const char* error_glyph {
+    "  ####  "
+    " #    # "
+    " #    # "
+    " # ## # "
+    " # ## # "
+    "  ####  "
+    "   ##   "
+    " ###### "
+    "   ##   "
+    "   ##   ",
+};
+
 static Font* s_default_font;
 
 void Font::initialize()
@@ -18,6 +33,22 @@ Font& Font::default_font()
     return *s_default_font;
 }
 
+RetainPtr<Font> Font::clone() const
+{
+    size_t bytes_per_glyph = glyph_width() * glyph_height();
+    // FIXME: This is leaked!
+    char** new_glyphs = static_cast<char**>(malloc(sizeof(char*) * 256));
+    for (unsigned i = 0; i < 256; ++i) {
+        new_glyphs[i] = static_cast<char*>(malloc(bytes_per_glyph));
+        if (i >= m_first_glyph && i <= m_last_glyph) {
+            memcpy(new_glyphs[i], m_glyphs[i - m_first_glyph], bytes_per_glyph);
+        } else {
+            memset(new_glyphs[i], ' ', bytes_per_glyph);
+        }
+    }
+    return adopt(*new Font(new_glyphs, m_glyph_width, m_glyph_height, 0, 255));
+}
+
 Font::Font(const char* const* glyphs, byte glyph_width, byte glyph_height, byte first_glyph, byte last_glyph)
     : m_glyphs(glyphs)
     , m_glyph_width(glyph_width)
@@ -25,7 +56,9 @@ Font::Font(const char* const* glyphs, byte glyph_width, byte glyph_height, byte
     , m_first_glyph(first_glyph)
     , m_last_glyph(last_glyph)
 {
-    m_error_bitmap = CharacterBitmap::create_from_ascii(DEFAULT_FONT_NAME::error_glyph, m_glyph_width, m_glyph_height);
+    ASSERT(m_glyph_width == error_glyph_width);
+    ASSERT(m_glyph_height == error_glyph_height);
+    m_error_bitmap = CharacterBitmap::create_from_ascii(error_glyph, error_glyph_width, error_glyph_height);
     for (unsigned ch = 0; ch < 256; ++ch) {
         if (ch < m_first_glyph || ch > m_last_glyph) {
             m_bitmaps[ch] = m_error_bitmap.copy_ref();

SharedGraphics/Font.h

@@ -9,6 +9,8 @@ class Font : public Retainable<Font> {
 public:
     static Font& default_font();
 
+    RetainPtr<Font> clone() const;
+
     ~Font();
 
     const CharacterBitmap& glyph_bitmap(char ch) const { return *m_bitmaps[(byte)ch]; }
@@ -19,7 +21,7 @@ public:
     static void initialize();
 
 private:
-    Font(const char* const* glyphs, byte glyph_width, byte glyph_height, byte firstGlyph, byte lastGlyph);
+    Font(const char* const* glyphs, byte glyph_width, byte glyph_height, byte first_glyph, byte last_glyph);
 
     const char* const* m_glyphs { nullptr };
     mutable RetainPtr<CharacterBitmap> m_bitmaps[256];

SharedGraphics/Liza8x10.h

@@ -7,19 +7,6 @@ static constexpr char last_glyph = '~';
 static constexpr byte glyph_width = 8;
 static constexpr byte glyph_height = 10;
 
-static constexpr const char* error_glyph {
-    "  ####  "
-    " #    # "
-    " #    # "
-    " # ## # "
-    " # ## # "
-    "  ####  "
-    "   ##   "
-    " ###### "
-    "   ##   "
-    "   ##   ",
-};
-
 static constexpr const char* glyphs[] {
 
     "   ##   "

SharedGraphics/Painter.h

@@ -36,6 +36,7 @@ public:
     void draw_glyph(const Point&, char, Color);
 
     const Font& font() const { return *m_font; }
+    void set_font(Font& font) { m_font = &font; }
 
     enum class DrawOp { Copy, Xor };
     void set_draw_op(DrawOp op) { m_draw_op = op; }

Userland/guitest2.cpp

@@ -87,7 +87,7 @@ GWindow* make_font_test_window()
 {
     auto* window = new GWindow;
     window->set_title("Font test");
-    window->set_rect({ 440, 100, 300, 80 });
+    window->set_rect({ 480, 100, 300, 80 });
 
     auto* widget = new GWidget;
     window->set_main_widget(widget);
@@ -191,7 +191,7 @@ GWindow* make_clock_window()
 {
     auto* window = new GWindow;
     window->set_title("Clock");
-    window->set_rect({ 200, 200, 100, 40 });
+    window->set_rect({ 900, 700, 100, 40 });
 
     auto* clock_widget = new ClockWidget;
     clock_widget->set_relative_rect({ 0, 0, 100, 40 });