Added font picker to text edit gui

This commit is contained in:
Yousef Khadadeh 2025-11-08 20:50:23 +03:00
parent 644655544c
commit d4492807fe
10 changed files with 243 additions and 25 deletions

View file

@ -0,0 +1,160 @@
#include "FontPicker.hpp"
#include "Helpers/ConvertVec.hpp"
#include <algorithm>
#include <modules/skparagraph/include/DartTypes.h>
#include <modules/skparagraph/include/ParagraphStyle.h>
#include <modules/skparagraph/src/ParagraphBuilderImpl.h>
#include <modules/skunicode/include/SkUnicode_icu.h>
#include <Helpers/Random.hpp>
bool GUIStuff::FontPicker::update(UpdateInputData& io, std::string* fontName, GUIManager* gui) {
if(sortedFontList.empty()) {
auto icu = SkUnicodes::ICU::Make();
for(int i = 0; i < io.textFontMgr->countFamilies(); i++) {
SkString familyNameSkString;
io.textFontMgr->getFamilyName(i, &familyNameSkString);
std::string familyName(familyNameSkString.c_str(), familyNameSkString.size());
sortedFontList.emplace_back(familyName);
std::transform(familyName.begin(), familyName.end(), familyName.begin(), ::tolower);
sortedFontListLowercase.emplace_back(familyName);
}
std::sort(sortedFontList.begin(), sortedFontList.end());
std::sort(sortedFontListLowercase.begin(), sortedFontListLowercase.end());
}
if(!fontName)
return false;
bool fontChangedFromTextbox = false;
bool fontChangedFromSelection = false;
bool clickedOut = io.mouse.leftClick;
const float ENTRY_HEIGHT = 25.0f;
CLAY({
.layout = {
.sizing = {.width = CLAY_SIZING_FIXED(250), .height = CLAY_SIZING_FIT(0)},
.childGap = 4
}
}) {
fontChangedFromTextbox = gui->input_text("Font textbox", fontName, true, [&](SelectionHelper& s) {
if(s.selected) {
dropdownOpen = true;
clickedOut = false;
}
});
auto it = std::lower_bound(sortedFontList.begin(), sortedFontList.end(), *fontName);
size_t val = (it != sortedFontList.end() && *it == *fontName) ? (it - sortedFontList.begin()): std::numeric_limits<size_t>::max();
if(val == std::numeric_limits<size_t>::max()) {
std::string lowerFamilyName = *fontName;
std::transform(lowerFamilyName.begin(), lowerFamilyName.end(), lowerFamilyName.begin(), ::tolower);
auto itLower = std::lower_bound(sortedFontListLowercase.begin(), sortedFontListLowercase.end(), lowerFamilyName);
val = (itLower != sortedFontListLowercase.end() && *itLower == *fontName) ? (itLower - sortedFontListLowercase.begin()): std::numeric_limits<size_t>::max();
if(val != std::numeric_limits<size_t>::max())
*fontName = sortedFontList[val];
}
if(gui->svg_icon_button("Open font dropdown", "data/icons/droparrow.svg", dropdownOpen, GUIManager::SMALL_BUTTON_SIZE)) {
dropdownOpen = !dropdownOpen;
clickedOut = false;
}
if(dropdownOpen) {
CLAY({
.layout = {
.sizing = {.width = CLAY_SIZING_FIXED(250), .height = CLAY_SIZING_FIT(0, 300)},
},
.backgroundColor = convert_vec4<Clay_Color>(io.theme->backColor1),
.cornerRadius = CLAY_CORNER_RADIUS(4),
.floating = {
.offset = {
.y = 2
},
.attachPoints = {
.element = CLAY_ATTACH_POINT_LEFT_TOP,
.parent = CLAY_ATTACH_POINT_LEFT_BOTTOM
},
.attachTo = CLAY_ATTACH_TO_PARENT
},
.border = {
.color = convert_vec4<Clay_Color>(io.theme->fillColor2),
.width = CLAY_BORDER_OUTSIDE(1)
}
}) {
gui->obstructing_window();
if(Clay_Hovered())
clickedOut = false;
gui->scroll_bar_many_entries_area("Font Selector", ENTRY_HEIGHT, sortedFontList.size(), [fontName, gui, &fontChangedFromSelection, &sortedFontList = sortedFontList, val, &io = io](size_t i, bool listHovered) {
bool selectedEntry = val == i;
skia::textlayout::ParagraphStyle pStyle;
pStyle.setTextAlign(skia::textlayout::TextAlign::kLeft);
pStyle.setTextHeightBehavior(skia::textlayout::kDisableAll);
skia::textlayout::StrutStyle strutStyle;
strutStyle.setStrutEnabled(true);
strutStyle.setForceStrutHeight(true);
pStyle.setStrutStyle(strutStyle);
skia::textlayout::TextStyle tStyle;
tStyle.setFontSize(io.fontSize);
tStyle.setFontFamilies({SkString{sortedFontList[i].c_str()}, SkString{"Roboto"}});
tStyle.setForegroundColor(SkPaint{io.theme->frontColor1});
pStyle.setTextStyle(tStyle);
skia::textlayout::ParagraphBuilderImpl pBuilder(pStyle, io.fontCollection, SkUnicodes::ICU::Make());
tStyle.setFontStyle(SkFontStyle::Normal());
pBuilder.pushStyle(tStyle);
pBuilder.addText(sortedFontList[i].c_str(), sortedFontList[i].size());
auto p = pBuilder.Build();
CLAY({
.layout = {
.sizing = {.width = CLAY_SIZING_FIXED(250), .height = CLAY_SIZING_FIXED(25)},
.childGap = 1,
.childAlignment = {.x = CLAY_ALIGN_X_LEFT, .y = CLAY_ALIGN_Y_TOP},
.layoutDirection = CLAY_TOP_TO_BOTTOM
}
}) {
SkColor4f entryColor;
if(selectedEntry)
entryColor = io.theme->backColor2;
else if(Clay_Hovered())
entryColor = io.theme->backColor2;
else
entryColor = io.theme->backColor1;
CLAY({
.layout = {
.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0)},
.padding = {.left = 2, .right = 2},
.childAlignment = {.x = CLAY_ALIGN_X_LEFT, .y = CLAY_ALIGN_Y_CENTER}
},
.backgroundColor = convert_vec4<Clay_Color>(entryColor)
}) {
gui->text_paragraph("font name", std::move(p), std::numeric_limits<float>::max());
if(io.mouse.leftClick && Clay_Hovered()) {
*fontName = sortedFontList[i];
fontChangedFromSelection = true;
}
}
}
}, [ENTRY_HEIGHT, fontChangedFromTextbox, io = &io, val](float scrollContentHeight, float containerHeight, float& scrollAmount) {
if(fontChangedFromTextbox && !io->mouse.leftClick && val != std::numeric_limits<size_t>::max())
scrollAmount = -static_cast<float>(val) * ENTRY_HEIGHT;
});
}
}
}
if(clickedOut)
dropdownOpen = false;
return fontChangedFromSelection | fontChangedFromTextbox;
}
void GUIStuff::FontPicker::clay_draw(SkCanvas* canvas, UpdateInputData& io, Clay_RenderCommand* command) {
}

View file

@ -0,0 +1,18 @@
#pragma once
#include "Element.hpp"
#include "../GUIManager.hpp"
namespace GUIStuff {
class FontPicker : public Element {
public:
bool update(UpdateInputData& io, std::string* fontName, GUIManager* gui);
virtual void clay_draw(SkCanvas* canvas, UpdateInputData& io, Clay_RenderCommand* command) override;
SelectionHelper selection;
private:
std::vector<std::string> sortedFontList;
std::vector<std::string> sortedFontListLowercase;
bool dropdownOpen = false;
};
}

View file

@ -32,7 +32,7 @@ template <typename T> class TextBox : public Element {
if(data && selection.selected) {
io.richTextBoxEdit(textbox, cur);
textbox->process_mouse_left_button(*cur, io.mouse.pos - bb.min, io.mouse.leftClick, io.mouse.leftHeld, io.key.leftShift);
if(updateEveryEdit || io.key.enter) {
if((updateEveryEdit && textbox->inputChangedTextBox) || io.key.enter) {
update_on_edit();
isUpdating = true;
}
@ -48,6 +48,9 @@ template <typename T> class TextBox : public Element {
elemUpdate(selection);
}
if(textbox)
textbox->inputChangedTextBox = false;
return isUpdating;
}

View file

@ -5,6 +5,7 @@
#include <include/core/SkFontMetrics.h>
#include <include/core/SkPath.h>
#include "Elements/SVGIcon.hpp"
#include "Elements/FontPicker.hpp"
#include "Elements/SelectableButton.hpp"
#include "Elements/RotateWheel.hpp"
#include "Elements/TextParagraph.hpp"
@ -22,6 +23,7 @@
#include <modules/skparagraph/include/FontCollection.h>
#include <modules/skparagraph/include/TextStyle.h>
#include <modules/skunicode/include/SkUnicode_icu.h>
#include <Helpers/Random.hpp>
namespace GUIStuff {
@ -342,10 +344,10 @@ void GUIManager::checkbox(const std::string& id, bool* val, const std::function<
pop_id();
}
void GUIManager::input_text_field(const std::string& id, const std::string& name, std::string* val, const std::function<void(SelectionHelper&)>& elemUpdate) {
void GUIManager::input_text_field(const std::string& id, const std::string& name, std::string* val, bool updateEveryEdit, const std::function<void(SelectionHelper&)>& elemUpdate) {
left_to_right_line_layout([&]() {
text_label(name);
input_text(id, val, elemUpdate);
input_text(id, val, updateEveryEdit, elemUpdate);
});
}
@ -392,16 +394,17 @@ bool GUIManager::input_color_component_255(const std::string& id, float* val, co
return isUpdating;
}
void GUIManager::input_text(const std::string& id, std::string* val, const std::function<void(SelectionHelper&)>& elemUpdate) {
bool GUIManager::input_text(const std::string& id, std::string* val, bool updateEveryEdit, const std::function<void(SelectionHelper&)>& elemUpdate) {
push_id(id);
insert_element<TextBox<std::string>>()->update(*io, val,
bool toRet = insert_element<TextBox<std::string>>()->update(*io, val,
[&](const std::string& str) {
return str;
},
[&](const std::string& str) {
return str;
}, true, true, elemUpdate);
}, true, updateEveryEdit, elemUpdate);
pop_id();
return toRet;
}
bool GUIManager::selectable_button(const std::string& id, const std::function<void(SelectionHelper&, bool)>& elemUpdate, GUIStuff::SelectableButton::DrawType drawType, bool isSelected) {
@ -552,6 +555,13 @@ void GUIManager::tab_list(const std::string& id, const std::vector<std::pair<std
pop_id();
}
bool GUIManager::font_picker(const std::string& id, std::string* fontName) {
push_id(id);
bool toRet = insert_element<FontPicker>()->update(*io, fontName, this);
pop_id();
return toRet;
}
void GUIManager::dropdown_select(const std::string& id, size_t* val, const std::vector<std::string>& selections, float width, const std::function<void()>& hoverboxElemUpdate) {
push_id(id);
bool& dropDownOpen = insert_any_with_id(0, false);
@ -648,7 +658,7 @@ void GUIManager::dropdown_select(const std::string& id, size_t* val, const std::
pop_id();
}
void GUIManager::scroll_bar_area(const std::string& uniqueId, const std::function<void(float, float, float)>& elemUpdate) {
void GUIManager::scroll_bar_area(const std::string& id, const std::function<void(float, float, float&)>& elemUpdate) {
CLAY({
.layout = {
.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0)},
@ -661,12 +671,16 @@ void GUIManager::scroll_bar_area(const std::string& uniqueId, const std::functio
bool isMoving = false;
float contentDimensions = 100.0f;
float containerDimensions = 100.0f;
std::string uniqueID;
};
push_id(uniqueId);
ScrollAreaData& sD = insert_any(ScrollAreaData{});
push_id(id);
ScrollAreaData& sD = insert_any(ScrollAreaData{
.uniqueID = Random::get().alphanumeric_str(30)
});
pop_id();
Clay_ElementId clayID = Clay_GetElementId(strArena.std_str_to_clay_str(uniqueId));
Clay_ElementId clayID = Clay_GetElementId(strArena.std_str_to_clay_str(sD.uniqueID));
CLAY({
.id = clayID,
@ -675,7 +689,7 @@ void GUIManager::scroll_bar_area(const std::string& uniqueId, const std::functio
.childAlignment = {.x = CLAY_ALIGN_X_LEFT, .y = CLAY_ALIGN_Y_TOP},
.layoutDirection = CLAY_TOP_TO_BOTTOM
},
.clip = {.vertical = true, .childOffset = Clay_GetScrollOffset()}
.clip = {.horizontal = true, .vertical = true, .childOffset = {.x = 0, .y = Clay_GetScrollOffset().y}}
}) {
elemUpdate(sD.contentDimensions, sD.containerDimensions, sD.currentScrollPos);
}
@ -742,17 +756,16 @@ void GUIManager::scroll_bar_area(const std::string& uniqueId, const std::functio
}
void GUIManager::scroll_bar_many_entries_area(const std::string& uniqueId, float entryHeight, size_t entryCount, const std::function<void(size_t, bool)>& entryUpdate, const std::function<void(float, float, float)>& elemUpdate) {
push_id(uniqueId);
scroll_bar_area(uniqueId, [&](float scrollContentHeight, float containerHeight, float scrollAmount) {
void GUIManager::scroll_bar_many_entries_area(const std::string& id, float entryHeight, size_t entryCount, const std::function<void(size_t, bool)>& entryUpdate, const std::function<void(float, float, float&)>& elemUpdate) {
push_id(id);
scroll_bar_area(id, [&](float scrollContentHeight, float containerHeight, float& scrollAmount) {
if(elemUpdate)
elemUpdate(scrollContentHeight, containerHeight, scrollAmount);
bool listHovered = Clay_Hovered();
scrollAmount = std::fabs(scrollAmount);
float entryHeight = 25.0f;
size_t startPoint = scrollAmount / entryHeight;
float absScrollAmount = std::fabs(scrollAmount);
size_t startPoint = absScrollAmount / entryHeight;
size_t elementsContainable = (containerHeight / entryHeight) + 2; // Displaying 2 more elements ensures that there isn't any empty space in the container
size_t endPoint = std::min(entryCount, startPoint + elementsContainable);

View file

@ -48,7 +48,7 @@ class GUIManager {
Vector2f screen_pos_to_window_pos(const Vector2f& screenPos);
Vector2f get_mouse_pos();
void input_text_field(const std::string& id, const std::string& name, std::string* val, const std::function<void(SelectionHelper&)>& elemUpdate = nullptr);
void input_text_field(const std::string& id, const std::string& name, std::string* val, bool updateEveryEdit = true, const std::function<void(SelectionHelper&)>& elemUpdate = nullptr);
void text_paragraph(const std::string& id, std::unique_ptr<skia::textlayout::Paragraph> paragraph, float width, const std::function<void()>& elemUpdate = nullptr);
void text_label_color(const std::string& val, const SkColor4f& color);
@ -80,11 +80,11 @@ class GUIManager {
void push_id(const std::string& id);
void pop_id();
void scroll_bar_area(const std::string& uniqueId, const std::function<void(float scrollContentHeight, float containerHeight, float scrollAmount)>& elemUpdate);
void scroll_bar_many_entries_area(const std::string& uniqueId, float entryHeight, size_t entryCount, const std::function<void(size_t elementIndex, bool listHovered)>& entryUpdate, const std::function<void(float scrollContentHeight, float containerHeight, float scrollAmount)>& elemUpdate = nullptr);
void scroll_bar_area(const std::string& id, const std::function<void(float scrollContentHeight, float containerHeight, float& scrollAmount)>& elemUpdate);
void scroll_bar_many_entries_area(const std::string& id, float entryHeight, size_t entryCount, const std::function<void(size_t elementIndex, bool listHovered)>& entryUpdate, const std::function<void(float scrollContentHeight, float containerHeight, float& scrollAmount)>& elemUpdate = nullptr);
bool input_color_component_255(const std::string& id, float* val, const std::function<void(SelectionHelper&)>& elemUpdate = nullptr);
void input_text(const std::string& id, std::string* val, const std::function<void(SelectionHelper&)>& elemUpdate = nullptr);
bool input_text(const std::string& id, std::string* val, bool updateEveryEdit = true, const std::function<void(SelectionHelper&)>& elemUpdate = nullptr);
bool radio_button(const std::string& id, bool val, const std::function<void()>& elemUpdate = nullptr);
bool radio_button_field(const std::string& id, const std::string& name, bool val, const std::function<void()>& elemUpdate = nullptr);
@ -289,6 +289,8 @@ class GUIManager {
return isUpdating;
}
bool font_picker(const std::string& id, std::string* fontName);
template <typename T> bool color_picker_items(const std::string& id, T* val, bool selectAlpha) {
bool isUpdating = false;
push_id(id);