cpp binding folder with clayman folder with document

bindings/cpp/ClayMan/ClayMan.md

@@ -0,0 +1,192 @@
+# ClayMan - A Cpp Wrapper Library For Clay
+
+[https://github.com/TimothyHoytBSME/ClayMan/](https://github.com/TimothyHoytBSME/ClayMan/)
+
+### ClayMan is a C++ wrapper library for the `clay.h` library. This library is a work in progress, but is ready to be used.
+
+## Features
+
+- Handles the initialization of Clay.
+- Exposes the underlying functions of Clay in a simplified form.
+- Manages Clay_Strings to allow for std::string usage.
+- Provides handy utility functions for configuration parameters.
+- Allows to still use classic Clay layout macros.
+- Holds closely to Clay's original macro API.
+- Creates text element as a single function call.
+- Provides several flexible ways to create your layout
+
+## There are several ways to create your elements
+
+- Pass params and child-lambda:
+  ```cpp
+  ClayMan.element(
+      "someID", 
+      (Clay_LayoutConfig){.padding = {1, 2, 3, 4}},
+      [&]{
+          /*children here*/
+      }
+  );
+  ```
+
+- Or pass params then manually close:
+  ```cpp
+  ClayMan.openElementWithParams(
+      "someID", 
+      {.padding = {1, 2, 3, 4}}
+  );{
+      /*children here*/
+  } ClayMan.closeElement();
+  ```
+
+- Or manually open, configure, and close:
+  ```cpp
+  ClayMan.openElement();
+  ClayMan.applyID("someID");
+  ClayMan.applyLayout({.padding = {1, 2, 3, 4}});
+  ClayMan.endConfig();  
+  {
+      /*children here*/
+  } ClayMan.closeElement();
+  ```
+
+- Or use classic Clay macros:
+  ```cpp
+  CLAY(
+      CLAY_ID("someID")
+      CLAY_LAYOUT({.padding = {1, 2, 3, 4}})
+  ){
+      /*children here*/ 
+  }
+  ```
+
+
+## Create text elements with single function call
+
+```cpp
+Clay_TextElementConfig textConfig = { 
+    .textColor = COLOR_WHITE, 
+    .fontId = 0, 
+    .fontSize = 16 
+};
+
+
+ClayMan.textElement("Text Here", textConfig); 
+```
+
+## Any method can be nested inside another, just be sure that each element sticks to one method:
+
+```cpp
+ClayMan.openElementWithParams( //openElementWithParams METHOD
+    "greatgreatgrandparent",
+    (Clay_LayoutConfig){.padding = {4, 5, 6, 7}}
+);{ 
+    //children of "greatgreatgrandparent" inside this block
+    ClayMan.element( //element METHOD
+        "greatgrandparent",
+        (Clay_LayoutConfig){.padding = {4, 5, 6, 7}}
+        [&]{ 
+            //children of "greatgrandparent" inside this lambda
+            CLAY( //classic macro METHOD
+                CLAY_ID("grandparent")
+                CLAY_LAYOUT({.padding = 1, 2, 3, 4})
+            ){ 
+                //children of "grandparent" inside this block
+                ClayMan.openElement(); //manual METHOD
+                ClayMan.applyID("parent");
+                ClayMan.applyLayout({.padding = {4, 5, 6, 7}});
+                ClayMan.endConfig(); //end "parent" config
+                {
+                    //children of "parent" in this block
+                    ClayMan.openElementWithParams("child", {.padding = {1, 2, 3, 4}});//openElementWithParams METHOD
+                    {
+                        //children of "child" inside this block
+                    } ClayMan.closeElement(); //close "child"
+                } ClayMan.closeElement(); //close "parent"
+
+                Clay_TextElementConfig textConfig = { 
+                    .textColor = COLOR_WHITE, 
+                    .fontId = 0, 
+                    .fontSize = 16 
+                };
+
+                ClayMan.element( //element METHOD
+                    "sibling",
+                    (Clay_LayoutConfig){.padding = {4, 5, 6, 7}},
+                    [&]{
+                        //Children of "sibling" inside this block
+                        ClayMan.textElement("Sibling Text", textConfig); 
+                    }
+                );
+            }
+        }
+    );
+} ClayMan.closeElement(); //close "greatgreatgrandparent"
+```
+
+## How to use ClayMan
+To use this library in your project, simply copy the `clayman.hpp` header, as well as the `include` folder (which has the compatible version of `clay.h` as well as the Raylib renderer) into your working directory. Then you will include the header, include the renderer, create an instance of ClayMan, initialize your renderer, then create your app. Full instructions and examples are available in the [repository](https://github.com/TimothyHoytBSME/ClayMan/).
+
+```cpp
+#include "clayman.hpp"
+#include "include/raylib/clay_renderer_raylib.c"
+
+ClayMan Clay(1024, 786, Raylib_MeasureText);
+
+void myLayout(){
+    //Example full-window parent container
+    ClayMan.element(
+        "YourElement", 
+        (Clay_LayoutConfig){
+            .sizing = ClayMan.expandXY(), 
+            .padding = ClayMan.padAll(16), 
+            .childGap = 16, 
+            .layoutDirection = CLAY_TOP_TO_BOTTOM
+        },
+        [&]{
+            //Child elements here
+        }
+    );
+}
+
+int main(void) {
+
+    //Initialize Raylib as usual
+    Clay_Raylib_Initialize(ClayMan.width, ClayMan.height, "Your Project Title", FLAG_WINDOW_RESIZABLE | FLAG_WINDOW_HIGHDPI | FLAG_MSAA_4X_HINT | FLAG_VSYNC_HINT);
+    Raylib_fonts[0] = (Raylib_Font) { 
+        .fontId = 0,
+        .font = LoadFontEx("resources/Roboto-Regular.ttf", 48, 0, 400)
+    };
+    SetTextureFilter(Raylib_fonts[0].font.texture, TEXTURE_FILTER_BILINEAR);
+
+    //Raylib render loop
+    while (!WindowShouldClose()) { 
+       
+        //Raylib mouse position and scroll vectors
+        Vector2 mousePosition = GetMousePosition(); 
+        Vector2 scrollDelta = GetMouseWheelMoveV(); 
+        
+        //Update clay state (window size, mouse position/scroll, time delta, left button state)
+        ClayMan.updateClayState(
+            GetScreenWidth(), //raylib window width
+            GetScreenHeight(), //raylib window height
+            mousePosition.x, 
+            mousePosition.y, 
+            scrollDelta.x, 
+            scrollDelta.y, 
+            GetFrameTime(), //raylib frame delta
+            IsMouseButtonDown(0) //raylib left button down
+        );
+
+        //Pass your layout to the manager to get the render commands
+        Clay_RenderCommandArray renderCommands = ClayMan.buildLayout(myLayout); 
+
+        //Render as usual
+        BeginDrawing();
+        ClearBackground(BLACK);
+        Clay_Raylib_Render(renderCommands);
+        EndDrawing();
+        
+    }
+    return 0;
+}
+```