ThorVG, SFML 2.6, and the Yoga Layout Engine Code Example.

[natalia-hultrix]

This code snippet demonstrates how to integrate ThorVG, SFML 2.6, and the Yoga Layout Engine. These three libraries provide all the necessary tools to create a comprehensive GUI toolkit.

https://github.com/SFML/SFML
https://github.com/facebook/yoga

// g++ -o sfml-app main4.cpp -lsfml-graphics -lsfml-window -lsfml-system -lthorvg -lyogacore

#include <SFML/Graphics.hpp>
#include <thorvg.h>
#include <memory>
#include <yoga/Yoga.h>

// Function to create a rounded rectangle using ThorVG
std::unique_ptr<tvg::Shape> createRoundedRect(float x, float y, float width, float height, 
                                              float topLeftRadius, float topRightRadius, 
                                              float bottomRightRadius, float bottomLeftRadius) {
    auto shape = tvg::Shape::gen();

    // Define the rounded rectangle path
    shape->moveTo(x + topLeftRadius, y);
    shape->lineTo(x + width - topRightRadius, y);
    if (topRightRadius > 0) {
        shape->cubicTo(x + width - topRightRadius, y, x + width, y, x + width, y + topRightRadius);
    }
    shape->lineTo(x + width, y + height - bottomRightRadius);
    if (bottomRightRadius > 0) {
        shape->cubicTo(x + width, y + height - bottomRightRadius, x + width, y + height, x + width - bottomRightRadius, y + height);
    }
    shape->lineTo(x + bottomLeftRadius, y + height);
    if (bottomLeftRadius > 0) {
        shape->cubicTo(x + bottomLeftRadius, y + height, x, y + height, x, y + height - bottomLeftRadius);
    }
    shape->lineTo(x, y + topLeftRadius);
    if (topLeftRadius > 0) {
        shape->cubicTo(x, y + topLeftRadius, x, y, x + topLeftRadius, y);
    }
    shape->close();
    return shape;
}

int main() {
    // Initialize SFML window
    sf::RenderWindow window(sf::VideoMode(800, 600), "Hydra v0.0.1");
    tvg::Initializer::init(1);

    // Set up Yoga layout
    YGNodeRef container = YGNodeNew();
    YGNodeStyleSetWidth(container, 800);
    YGNodeStyleSetHeight(container, 100);
    YGNodeStyleSetFlexDirection(container, YGFlexDirectionRow);
    YGNodeStyleSetPadding(container, YGEdgeAll, 20);

    // Create child nodes with flexible growth
    YGNodeRef children[3];
    for (int i = 0; i < 3; ++i) {
        children[i] = YGNodeNew();
        YGNodeStyleSetFlexGrow(children[i], 1);
        YGNodeInsertChild(container, children[i], 0);
        YGNodeStyleSetMargin(children[i], YGEdgeAll, 5);
    }
    
    // We want to change the width of the first child. Note its first in last out so the first child is in the last possition.
    // We turn flex grow of so we can set the width of the child manualy.
    YGNodeStyleSetFlexGrow(children[2], 0);
    YGNodeStyleSetWidth(children[2], 100);
    
    // Calculate all the childrens layout and sizes
    YGNodeCalculateLayout(container, YGUndefined, YGUndefined, YGDirectionLTR);

    // Prepare canvas
    static uint32_t buffer[800 * 600];
    auto canvas = tvg::SwCanvas::gen();
    canvas->target(buffer, 800, 800, 600, tvg::SwCanvas::ARGB8888);

    // Draw rounded rectangles for each child
    for (auto& child : children) {
        auto roundedRect = createRoundedRect(YGNodeLayoutGetLeft(child), YGNodeLayoutGetTop(child),
                                             YGNodeLayoutGetWidth(child), YGNodeLayoutGetHeight(child), 10, 10, 0, 0);
        roundedRect->fill(143 * (child == children[0]), 143 * (child == children[1]), 143 * (child == children[2]));
        canvas->push(std::move(roundedRect));
    }

    // Render and sync canvas
    canvas->draw();
    canvas->sync();

    // Convert color format from ARGB to RGBA
    for (int i = 0; i < 800 * 600; ++i) {
        uint32_t argb = buffer[i];
        uint32_t a = (argb & 0xFF000000);
        uint32_t r = (argb & 0x00FF0000) >> 16;
        uint32_t g = (argb & 0x0000FF00) >> 8;
        uint32_t b = (argb & 0x000000FF);
        buffer[i] = a | (b << 16) | (g << 8) | r;
    }

    // Create SFML texture from the buffer
    sf::Image image;
    image.create(800, 600, reinterpret_cast<const uint8_t*>(buffer));
    sf::Texture texture;
    texture.loadFromImage(image);
    sf::Sprite sprite(texture);

    // Main loop
    while (window.isOpen()) {
        sf::Event event;
        while (window.pollEvent(event)) {
            if (event.type == sf::Event::Closed) {
                window.close();
            }
            // catch the resize events
            if (event.type == sf::Event::Resized)
            {
                // update the view to the new size of the window
                sf::FloatRect visibleArea(0, 0, event.size.width, event.size.height);
                window.setView(sf::View(visibleArea));
            }
        }

        window.clear(sf::Color(23,23,23));
        window.draw(sprite);
        window.display();
    }

    // Clean up
    YGNodeFreeRecursive(container);
    tvg::Initializer::term();
    return 0;
}

}

[xland]

Great sharing!

However, this is still far from developing a full GUI framework—especially when it comes to text paragraphs.

Looking forward to Thorvg completing this aspect of development soon.

#3397