Merge d7104efa69 into 9d3fba39be

CMakeLists.txt

@@ -9,6 +9,7 @@ add_subdirectory("examples/raylib-sidebar-scrolling-container")
 #  add_subdirectory("examples/cairo-pdf-rendering") Some issue with github actions populating cairo, disable for now
 if(NOT MSVC)
   add_subdirectory("examples/clay-official-website")
+  add_subdirectory("examples/ncurses-sidebar-scrolling-container")
 endif()
 add_subdirectory("examples/introducing-clay-video-demo")
 add_subdirectory("examples/SDL2-video-demo")

bindings/zig/README

@@ -0,0 +1,2 @@
+https://codeberg.org/Zettexe/clay-zig
+https://github.com/johan0A/clay-zig-bindings

examples/SDL2-video-demo/CMakeLists.txt

@@ -23,6 +23,15 @@ FetchContent_Declare(
 )
 FetchContent_MakeAvailable(SDL2_ttf)
 
+FetchContent_Declare(
+    SDL2_image
+    GIT_REPOSITORY "https://github.com/libsdl-org/SDL_image.git"
+    GIT_TAG "release-2.8.4"
+    GIT_PROGRESS TRUE
+    GIT_SHALLOW TRUE
+)
+FetchContent_MakeAvailable(SDL2_image)
+
 add_executable(SDL2_video_demo main.c)
 
 target_compile_options(SDL2_video_demo PUBLIC)
@@ -32,6 +41,7 @@ target_link_libraries(SDL2_video_demo PUBLIC
     SDL2::SDL2main
     SDL2::SDL2-static
     SDL2_ttf::SDL2_ttf-static
+    SDL2_image::SDL2_image-static
 )
 
 if(MSVC)

examples/SDL2-video-demo/main.c

@@ -13,6 +13,8 @@
 const int FONT_ID_BODY_16 = 0;
 Clay_Color COLOR_WHITE = { 255, 255, 255, 255};
 
+SDL_Surface *sample_image;
+
 void RenderHeaderButton(Clay_String text) {
     CLAY(
         CLAY_LAYOUT({ .padding = { 16, 16, 8, 8 }}),
@@ -111,9 +113,18 @@ static Clay_RenderCommandArray CreateLayout() {
             })
         ) {
             // Header buttons go here
+            CLAY(
+                CLAY_LAYOUT({ .padding = { 16, 16, 8, 8 }}),
+                CLAY_BORDER_ALL({ 2, COLOR_WHITE })
+            ) {
+                CLAY(
+                    CLAY_LAYOUT({ .padding = { 8, 8, 8, 8 }}),
+                    CLAY_IMAGE({ sample_image, { 23, 42 } })
+                ) {}
+            }
             CLAY(
                 CLAY_ID("FileButton"),
-                CLAY_LAYOUT({ .padding = { 16, 8 }}),
+                CLAY_LAYOUT({ .padding = { 16, 16, 8, 8 }}),
                 CLAY_RECTANGLE({
                     .color = { 140, 140, 140, 255 },
                     .cornerRadius = 5
@@ -278,6 +289,10 @@ int main(int argc, char *argv[]) {
         fprintf(stderr, "Error: could not initialize TTF: %s\n", TTF_GetError());
         return 1;
     }
+    if (IMG_Init(IMG_INIT_PNG) < 0) {
+        fprintf(stderr, "Error: could not initialize IMG: %s\n", IMG_GetError());
+        return 1;
+    }
 
     TTF_Font *font = TTF_OpenFont("resources/Roboto-Regular.ttf", 16);
     if (!font) {
@@ -289,6 +304,8 @@ int main(int argc, char *argv[]) {
         .font = font,
     };
 
+    sample_image = IMG_Load("resources/sample.png");
+
     SDL_Window *window = NULL;
     SDL_Renderer *renderer = NULL;
     if (SDL_CreateWindowAndRenderer(800, 600, SDL_WINDOW_RESIZABLE, &window, &renderer) < 0) {
@@ -352,6 +369,7 @@ int main(int argc, char *argv[]) {
 quit:
     SDL_DestroyRenderer(renderer);
     SDL_DestroyWindow(window);
+    IMG_Quit();
     TTF_Quit();
     SDL_Quit();
     return 0;

examples/ncurses-sidebar-scrolling-container/CMakeLists.txt

@@ -0,0 +1,18 @@
+cmake_minimum_required(VERSION 3.27)
+project(clay_examples_textui_sidebar_scrolling_container C)
+set(CMAKE_C_STANDARD 99)
+
+add_executable(clay_examples_textui_sidebar_scrolling_container main.c multi-compilation-unit.c)
+
+target_compile_options(clay_examples_textui_sidebar_scrolling_container PUBLIC)
+target_include_directories(clay_examples_textui_sidebar_scrolling_container PUBLIC .)
+
+target_link_libraries(clay_examples_textui_sidebar_scrolling_container PUBLIC ncurses)
+set(CMAKE_CXX_FLAGS_DEBUG "-Wall -Werror -DCLAY_DEBUG")
+set(CMAKE_CXX_FLAGS_RELEASE "-O3")
+
+add_custom_command(
+        TARGET clay_examples_textui_sidebar_scrolling_container POST_BUILD
+        COMMAND ${CMAKE_COMMAND} -E copy_directory
+        ${CMAKE_CURRENT_SOURCE_DIR}/resources
+        ${CMAKE_CURRENT_BINARY_DIR}/resources)

examples/ncurses-sidebar-scrolling-container/Readme.md

@@ -0,0 +1,39 @@
+# textui/console renderer example
+
+## Introduction
+This renderer example utilizes ncurses and a mostly implemented library which converts the clay draw commands into ncurses commands.
+A console rendering is very limited, and all coordinates are simply rounded via integer division to the coordinate system of a terminal.
+
+## What works
+- Rectangles draw approximately correctly with the right color
+- Text wraps, and is well placed
+- Clicking a location on a scroll bar moves the scrolled area
+- Debug mode highlights on click
+- Window resize and layout reaction
+
+## What doesn't work
+- Image rendering
+- Sub character rectangles
+- Text fonts and colors
+- Clay extensions
+- Clay scissor mode
+
+## Reasonable expectations
+This renderer is intended to allow for a nearly dependency free implementation of Clay, and nearly all linux distributions have ncurses installed.
+This renderer will allow for quick visualization of layouts. There is no graphics acceleration though this example is quite responsive.
+The unit of a terminal is a character, not a pixel, so there is only so much detail that can be rendered. The default character size defined in the renderer is 5x8 pixels.
+
+## What could work
+- More precise rendering of borders and rectangles, this could be implemented with box-drawing characters: https://en.wikipedia.org/wiki/Box-drawing_characters
+- The mouse wheel on some terminals
+- Images with an additional dependency on something like kitty: https://sw.kovidgoyal.net/kitty/graphics-protocol/
+- Better text coloring by matching the background
+
+## Setup
+You'll have to setup an event loop using getch(), and pay attention to the various init functions in main.c
+Then it's the regular Clay layout definition and calls to the renderer function.
+
+## Conclusion
+The truth is that if you're willing to learn ncurses and how it handles windows you can get a better terminal experience without Clay.
+This example shows that for quick terminal apps, Clay could be extremely effective for organizing a user interface in the terminal.
+I hope that this renderer helps many people build fun and cool projects by lowering the barrier to a framwork.

examples/ncurses-sidebar-scrolling-container/multi-compilation-unit.c

@@ -0,0 +1,9 @@
+#include "../../clay.h"
+
+// NOTE: This file only exists to make sure that clay works when included in multiple translation units.
+
+void SatisfyCompiler() {
+    CLAY(CLAY_ID("SatisfyCompiler"), CLAY_LAYOUT({})) {
+      CLAY_TEXT(CLAY_STRING("Test"), CLAY_TEXT_CONFIG({ .fontId = 0, .fontSize = 24 }));
+    }
+}

renderers/SDL2/README

@@ -1,7 +1,5 @@
 Please note, the SDL2 renderer is not 100% feature complete. It is currently missing:
 
-- Border rendering
-- Image rendering
 - Rounded rectangle corners
 
 Note: on Mac OSX, SDL2 for some reason decides to automatically disable momentum scrolling on macbook trackpads.
@@ -10,4 +8,4 @@ You can re enable it in objective C using:
 ```C
 [[NSUserDefaults standardUserDefaults] setBool: YES
                                        forKey: @"AppleMomentumScrollSupported"];
-```
+```

renderers/SDL2/clay_renderer_SDL2.c

@@ -1,8 +1,11 @@
 #include "../../clay.h"
 #include <SDL.h>
 #include <SDL_ttf.h>
+#include <SDL_image.h>
 #include <stdio.h>
 
+#define CLAY_COLOR_TO_SDL_COLOR_ARGS(color) color.r, color.g, color.b, color.a
+
 typedef struct
 {
     uint32_t fontId;
@@ -93,10 +96,55 @@ static void Clay_SDL2_Render(SDL_Renderer *renderer, Clay_RenderCommandArray ren
                 SDL_RenderSetClipRect(renderer, NULL);
                 break;
             }
+            case CLAY_RENDER_COMMAND_TYPE_IMAGE: {
+                SDL_Surface *image = (SDL_Surface *)renderCommand->config.imageElementConfig->imageData;
+
+                SDL_Texture *texture = SDL_CreateTextureFromSurface(renderer, image);
+
+                SDL_Rect destination = (SDL_Rect){
+                    .x = boundingBox.x,
+                    .y = boundingBox.y,
+                    .w = boundingBox.width,
+                    .h = boundingBox.height,
+                };
+
+                SDL_RenderCopy(renderer, texture, NULL, &destination);
+                break;
+            }
+            case CLAY_RENDER_COMMAND_TYPE_BORDER: {
+                Clay_BorderElementConfig *config = renderCommand->config.borderElementConfig;
+
+                if (config->left.width > 0) {
+                    SDL_SetRenderDrawColor(renderer, CLAY_COLOR_TO_SDL_COLOR_ARGS(config->left.color));
+                    SDL_RenderFillRectF(renderer, &(SDL_FRect){ boundingBox.x, boundingBox.y + config->cornerRadius.topLeft, config->left.width, boundingBox.height - config->cornerRadius.topLeft - config->cornerRadius.bottomLeft });
+                }
+
+                if (config->right.width > 0) {
+                    SDL_SetRenderDrawColor(renderer, CLAY_COLOR_TO_SDL_COLOR_ARGS(config->right.color));
+                    SDL_RenderFillRectF(renderer, &(SDL_FRect){ boundingBox.x + boundingBox.width - config->right.width, boundingBox.y + config->cornerRadius.topRight, config->right.width, boundingBox.height - config->cornerRadius.topRight - config->cornerRadius.bottomRight });
+                }
+
+                if (config->right.width > 0) {
+                    SDL_SetRenderDrawColor(renderer, CLAY_COLOR_TO_SDL_COLOR_ARGS(config->right.color));
+                    SDL_RenderFillRectF(renderer, &(SDL_FRect){ boundingBox.x + boundingBox.width - config->right.width, boundingBox.y + config->cornerRadius.topRight, config->right.width, boundingBox.height - config->cornerRadius.topRight - config->cornerRadius.bottomRight });
+                }
+
+                if (config->top.width > 0) {
+                    SDL_SetRenderDrawColor(renderer, CLAY_COLOR_TO_SDL_COLOR_ARGS(config->right.color));
+                    SDL_RenderFillRectF(renderer, &(SDL_FRect){ boundingBox.x + config->cornerRadius.topLeft, boundingBox.y, boundingBox.width - config->cornerRadius.topLeft - config->cornerRadius.topRight, config->top.width });
+                }
+
+                if (config->bottom.width > 0) {
+                    SDL_SetRenderDrawColor(renderer, CLAY_COLOR_TO_SDL_COLOR_ARGS(config->bottom.color));
+                    SDL_RenderFillRectF(renderer, &(SDL_FRect){ boundingBox.x + config->cornerRadius.bottomLeft, boundingBox.y + boundingBox.height - config->bottom.width, boundingBox.width - config->cornerRadius.bottomLeft - config->cornerRadius.bottomRight, config->bottom.width });
+                }
+
+                break;
+            }
             default: {
                 fprintf(stderr, "Error: unhandled render command: %d\n", renderCommand->commandType);
                 exit(1);
             }
         }
     }
-}
+}

renderers/ncurses/clay_renderer_ncurses.c

@@ -0,0 +1,129 @@
+//#include <stdio.h>
+#include <curses.h>
+#define CLAY_IMPLEMENTATION
+#include "../../clay.h"
+
+#define HPIXELS_PER_CHAR 5 //these are used to convert between Clay pixel space and terminal character locations
+#define VPIXELS_PER_CHAR 8
+
+void Clay_ncurses_Render(WINDOW * win, Clay_RenderCommandArray renderCommands);
+
+void Clay_ncurses_Render(WINDOW * win, Clay_RenderCommandArray renderCommands){
+    short color_pair = 1; //increment on use, 0 is reserved
+    short color = 10; //get passed reserved colors
+    //maybe keep a list of Clay colors and only init a new color if required.
+    //clear the screen/window
+    clear();//sets cursor to 0,0
+    for(int i = 0; i < renderCommands.length; i++){
+        //handle every command
+        switch (renderCommands.internalArray[i].commandType){
+            case CLAY_RENDER_COMMAND_TYPE_NONE:
+                continue;
+            case CLAY_RENDER_COMMAND_TYPE_RECTANGLE:
+                Clay_RectangleElementConfig *rectangle_config = renderCommands.internalArray[i].config.rectangleElementConfig;
+                init_color(color, rectangle_config->color.r, rectangle_config->color.g, rectangle_config->color.b);
+                init_pair(color_pair, color, color);
+                attr_on(color_set(color_pair,0),0);
+                for(int j = 0; j < renderCommands.internalArray[i].boundingBox.height/VPIXELS_PER_CHAR; j++){
+                    mvhline(renderCommands.internalArray[i].boundingBox.y/VPIXELS_PER_CHAR + j, renderCommands.internalArray[i].boundingBox.x/HPIXELS_PER_CHAR, '#', renderCommands.internalArray[i].boundingBox.width/HPIXELS_PER_CHAR);
+                }
+                attr_off(color_set(color_pair,0),0);
+                color_pair++;
+                color++;
+                //TODO render radius corners
+                break;
+            case CLAY_RENDER_COMMAND_TYPE_BORDER:
+                Clay_BorderElementConfig *border_config = renderCommands.internalArray[i].config.borderElementConfig;
+                //just get a border on there for now
+                if(border_config->top.width > 0){
+                    init_color(color, border_config->top.color.r, border_config->top.color.g, border_config->top.color.b);
+                    init_pair(color_pair, color, COLOR_CYAN);//TODO get color at target location and init pair with that background
+                    attr_on(color_set(color_pair,0),0);
+                    mvhline(renderCommands.internalArray[i].boundingBox.y/VPIXELS_PER_CHAR, renderCommands.internalArray[i].boundingBox.x/HPIXELS_PER_CHAR + 1, '-', renderCommands.internalArray[i].boundingBox.width/HPIXELS_PER_CHAR - 2);
+                    attr_off(color_set(color_pair,0),0);
+                    color_pair++; //can we just check of the color requested is already there?
+                    color++;
+                }
+                if(border_config->bottom.width > 0){
+                    init_color(color, border_config->bottom.color.r, border_config->bottom.color.g, border_config->bottom.color.b);
+                    init_pair(color_pair, color, COLOR_CYAN);//TODO get color at target location and init pair with that background
+                    attr_on(color_set(color_pair,0),0);
+                    mvhline(renderCommands.internalArray[i].boundingBox.y/VPIXELS_PER_CHAR + renderCommands.internalArray[i].boundingBox.height/VPIXELS_PER_CHAR, renderCommands.internalArray[i].boundingBox.x/HPIXELS_PER_CHAR + 1, '-', renderCommands.internalArray[i].boundingBox.width/HPIXELS_PER_CHAR - 2);
+                    attr_off(color_set(color_pair,0),0);
+                    color_pair++;
+                    color++;
+                }
+                if(border_config->left.width > 0){
+                    init_color(color, border_config->left.color.r, border_config->left.color.g, border_config->left.color.b);
+                    init_pair(color_pair, color, COLOR_CYAN);//TODO get color at target location and init pair with that background
+                    attr_on(color_set(color_pair,0),0);
+                    mvvline(renderCommands.internalArray[i].boundingBox.y/VPIXELS_PER_CHAR + 1, renderCommands.internalArray[i].boundingBox.x/HPIXELS_PER_CHAR, '|', renderCommands.internalArray[i].boundingBox.height/VPIXELS_PER_CHAR - 1);
+                    attr_off(color_set(color_pair,0),0);
+                    color_pair++;
+                    color++;
+                }
+                if(border_config->right.width > 0){
+                    init_color(color, border_config->right.color.r, border_config->right.color.g, border_config->right.color.b);
+                    init_pair(color_pair, color, COLOR_CYAN);//TODO get color at target location and init pair with that background
+                    attr_on(color_set(color_pair,0),0);
+                    mvvline(renderCommands.internalArray[i].boundingBox.y/VPIXELS_PER_CHAR + 1, renderCommands.internalArray[i].boundingBox.x/HPIXELS_PER_CHAR + renderCommands.internalArray[i].boundingBox.width/HPIXELS_PER_CHAR - 1, '|', renderCommands.internalArray[i].boundingBox.height/VPIXELS_PER_CHAR - 1);
+                    attr_off(color_set(color_pair,0),0);
+                    color_pair++;
+                    color++;
+                }
+                break;
+            case CLAY_RENDER_COMMAND_TYPE_TEXT:
+                Clay_TextElementConfig *text_config = renderCommands.internalArray[i].config.textElementConfig;
+                attr_on(color_set(0,0),0);
+                int x = renderCommands.internalArray[i].boundingBox.x/HPIXELS_PER_CHAR;
+                int y = renderCommands.internalArray[i].boundingBox.y/VPIXELS_PER_CHAR; //text is referenced from bottom corner?
+                int w = renderCommands.internalArray[i].boundingBox.width/HPIXELS_PER_CHAR;
+                int h = renderCommands.internalArray[i].boundingBox.height/VPIXELS_PER_CHAR;
+                int line = 0;
+                int column = 0;
+                for (int k = 0; k < renderCommands.internalArray[i].text.length; k++) {
+                    if (column >= w) {
+                        column = 0;
+                        line += 1;
+                    }
+                    mvaddch(y + line, x + column, renderCommands.internalArray[i].text.chars[k]);
+                    column += 1;
+                }
+                break;
+            case CLAY_RENDER_COMMAND_TYPE_IMAGE:
+            case CLAY_RENDER_COMMAND_TYPE_SCISSOR_START:
+            case CLAY_RENDER_COMMAND_TYPE_SCISSOR_END:
+            case CLAY_RENDER_COMMAND_TYPE_CUSTOM:
+            default: continue;
+        }
+    }
+    attr_on(color_set(0,0),0);
+    mvwprintw(win, 0, 0, "Number of color pairs used: %i", color_pair);
+    refresh();//update the screen/window
+}
+
+
+//written by EmmanuelMess: https://github.com/nicbarker/clay/pull/91/commits/7ce74ba46c01f32e4517032e9da76bf54ecf7a43
+static inline Clay_Dimensions ncurses_MeasureText(Clay_String *text, Clay_TextElementConfig *config) {
+	Clay_Dimensions textSize = { 0 };
+	float maxTextWidth = 0.0f;
+	float lineTextWidth = 0;
+	float textHeight = 1;
+
+	for (int i = 0; i < text->length; ++i)
+	{
+		if (text->chars[i] == '\n') {
+			maxTextWidth = maxTextWidth > lineTextWidth ? maxTextWidth : lineTextWidth;
+			lineTextWidth = 0;
+			textHeight++;
+			continue;
+		}
+		lineTextWidth++;
+	}
+	maxTextWidth = maxTextWidth > lineTextWidth ? maxTextWidth : lineTextWidth;
+
+	textSize.width = maxTextWidth*HPIXELS_PER_CHAR;
+	textSize.height = textHeight*VPIXELS_PER_CHAR;
+
+	return textSize;
+}