Thanks to visit codestin.com
Credit goes to github.com

Skip to content

0.14 - Aspect Ratio Elements, Better Clipping

Latest
Latest

Choose a tag to compare

View all tags
@nicbarker nicbarker released this 06 Jun 01:16
· 45 commits to main since this release
v0.14
b25a31c

New Features

Non-image aspect ratio scaling elements, image stretching

Previously, only image elements supported aspect ratio scaling. The new .aspectRatio element configuration option allows you to specify a fixed width / height aspect ratio for any element. This also allows you to create image elements with no specified aspect ratio, allowing for stretched / distorted images with a different aspect ratio to their source dimensions. Different images rendering modes similar to the CSS concepts of contain and cover, as well as 9-slice support are scheduled for 0.15.

// Old
CLAY({
  .image = { .imageData = &myImage, .sourceDimensions = { 1024, 768 } }
});

// New
CLAY({
  .aspectRatio = 1024.0 / 768.0,
  .image = { .imageData = &myImage }
});

Improved .clip configuration option replaces .scroll

As part of our longer term effort to separate interaction handling from the core layout library, the .scroll configuration option has been replace with .clip. This new configuration options allows:

  • Cllipping of elements without enabling scrolling, similar to CSS's overflow:hidden
  • Immediate mode scroll handling, by providing scroll offset directly to .clip.childOffset.

To use Clay's internal scroll handling (i.e. emulate the old .scroll behaviour, you can use the new function, Clay_GetScrollOffset function.

// Old
CLAY({
  .scroll = { .vertical = true } // scrolling was automatically handled internally
});

// New, using clay's built in scroll handling
CLAY({
  .clip = {
    .vertical = true,
    .childOffset = Clay_GetScrollOffset() // This function is context dependent and will automatically track scrolling for this element across frames
  }
});

// New, providing your own scroll handling
Clay_Vector2 scrollOffset = { 0, 120 };

CLAY({
  .clip = {
    .vertical = true,
    .childOffset = scrollOffset // This will offset all children by the provided Vector2 this frame, so scrolling can be handled externally
  }
});

// New, clipping overflow without enabling scrolling
CLAY({
  .clip = { .vertical = true }
});

New Renderers

We now have a simple ANSI terminal renderer (thanks to @EmmanuelMess), a Playdate renderer (thanks to @mattahj), a Windows GDI renderer (thanks to @hexmaster111), and a Sokol renderer (thanks to @nkorth). All of them look great!

image
Terminal Renderer

download.mov

Playdate Renderer

image
Windows GDI renderer

Small Changes

  • Hashing of text contents for the text measurement cache is now the default behaviour, and has a reasonably performant SIMD implementation both for x64 and ARM. Using a frame arena or scratch storage for text element strings should now work much more reliably.
  • Layout calculations for some GROW edge cases, as well as aspect ratio scaling, have been improved.
  • A new function, Clay_GetPointerOverIds is now available, which will return a z-sorted list of IDs of elements that the cursor is currently over.

Migration Guide

  1. Convert any .scroll configuration usage into .clip, and add .childOffset = Clay_GetScrollOffset() to emulate existing behaviour
CLAY({
-  .scroll = {
+  .clip = {
    .vertical = true,
+  .childOffset = Clay_GetScrollOffset()
  }
})
  1. Split any .image configuration into .image and .aspectRatio
CLAY({
  .image = {
    .imageData = &myImage,
-   .sourceDimensions = { 1024, 768 }
  },
+ .aspectRatio = { 1024.0 / 768.0 }
})
  1. Remove any references to .hashStringContents in CLAY_TEXT_CONFIG, this is now the default behaviour and no longer needed.
CLAY_TEXT(CLAY_STRING("hello"), CLAY_TEXT_CONFIG({
-  .hashStringContents = true
}));

Changelist

  • [Renderers/SDL3] Use text engine to render text on the SDL3 renderer by @ernestoyaquello in #256
  • [Renderers/SDL3] Add image rendering and scissor support to SDL3 renderer by @steviegt6 in #246
  • [Renderers/SDL2] add rounded corner borders and fixed maximum radius issues. by @TimothyHoytBSME in #258
  • [Renderers/SDL3] Enable sdl3 alpha blending by @irfan-zahir in #261
  • [Renderers/SDL2] Make SDL_RenderCornerBorder static by @TimothyHoytBSME in #263
  • [Renderers/Raylib] Convert Image usage to Texture by @CrackedPixel in #266
  • [Examples/SDL2] opengl, antialiasing, vsync, alpha blending by @TimothyHoytBSME in #264
  • [Bindings/Odin] add missing bindings, fix binding, improve ergonomics of userdata, conform to stricter style flags by @laytan in #270
  • Make Clay_MinMemorySize accurate based on word cache count by @alecks in #269
  • Fix inverted condition for setting booleanWarnings.maxTextMeasureCacheExceeded by @mizmar in #275
  • [Documentation] Update README.md for Odin bindings to reflect the latest API changes. by @benjamindblock in #281
  • [Compilers] Added DLL macro to support .dll building by @Orcolom in #278
  • [Macros] Add versions of the CLAY_ID macros that take Clay_String by @FintasticMan in #285
  • [Core] Improve & streamline grow / shrink handling by @nicbarker in #296
  • [Bindings/Odin] fix CreateArenaWithCapacityAndMemory capacity type by @laytan in #306
  • [Renderers/Raylib] Use RayLib Default font if user font failed to load or was not specified. by @hexmaster111 in #305
  • [Documentation] fix example in README by @RicoP in #307
  • [Documentation] Fix typo in "vertiically" by @bowbahdoe in #315
  • [Core] Add a userData pointer to Clay_TextElementConfig by @mikejsavage in #274
  • [Compilers] Fixed SIMD related compile error on some ARM compilers by @emoon in #316
  • [Core] Support passing declaration by pointer as well by @emoon in #319
  • [Documentation] Update README.md: it's gotten bigger by @joshuahhh in #300
  • [Renderers/SDL2] Enable live resizing of layout during window resize in SDL2 by @shakkar23 in #320
  • [Renderers\win32_gdi] Create initial WinGDI renderer by @hexmaster111 in #322
  • [Compilers] Fix integer truncation warnings with explicit casts by @Nelarius in #317
  • [Renderers/Raylib] Reuse memory in raylib renderer for temporary string allocations by @hexmaster111 in #298
  • [Renderers/SDL2] Fix rounded corner border index by @mizmar in #295
  • [Renderers/SDL2] Added explicit include of math.h in SDL2 renderer by @Emerald-Ruby in #327
  • [Bindings/Odin] expose _OpenElement and _CloseElement by @lzurbriggen in #301
  • [Core] Switch text content hashing to default behaviour by @nicbarker in #335
  • [Core] Guard against hashmap item null dereference by @igadmg in #338
  • [Bindings/Odin] Remove field hashStringContents in odin bindings by @ellie-but-backwards in #350
  • [Core] Fix CLAY__ELEMENT_DEFINITION_LATCH overflow in CLAY macro if 256 loops end at the same time by @PiggybankStudios in #349
  • [Cmake] Basic CMake support for easier import into CMake projects by @Qualadia in #345
  • [Renderers/WinGDI] Working on Win32 GDI renderer and example by @Philosoph228 in #344
  • [Renderers/Sokol] Sokol renderer & examples by @nkorth in #373
  • [Renderers/Raylib] Add explicit type cast for malloc by @boringlily in #379
  • [Renderers/Raylib] fix bottom left corner radius of border by @timlueg in #378
  • [Documentation] Fix Clay_String definition in README.md file. by @Oglo12 in #374
  • [Core] Fix a string hash bug with single characters by @nicbarker in #384
  • [Core] Replace .scroll config with .clip by @nicbarker in #376
  • [Bindings/Odin] Odin Raylib renderer rewrite by @rats159 in #395
  • [Bindings/Odin] Updated odin bindings with new clip config by @A1029384756 in #397
  • [Renderers/SDL3] Use SDL_Texture instead of SDL_Surface for images by @linkdd in #402
  • [Debug] Update Clay__RenderDebugLayoutSizing to handle more sizing types. by @tritao in #392
  • Fix README: use correct anchor to Clay_CustomElementConfig by @dgellow in #403
  • [Bindings/Odin] Add missing border macros to Odin bindings by @Kelimion in #407
  • [Core] Add Clay_GetPointerOverIds function to the public API. by @tritao in #389
  • [Core] Add Clay_FloatingClipToElement by @pdoane in #413
  • [Core] restore compatibility with C99 by @gmasil in #412
  • [Documentation] Add Go rewrites of clay to README by @soypat in #411
  • [Renderers/Cairo] Fix cairo renderer and example by @zordythezordan in #416
  • [Renderers/Playdate] Playdate console example by @mattahj in #404
  • [Renderers/Terminal] Add initial implementation of terminal renderer by @EmmanuelMess in #91
  • Add struct names to public structs by @Nelarius in #336
  • [CMake] Indent SDL2's CMakeLists.txt consistently by @weslord in #424
  • [Core] Fix sign comparison warning by @boreals-back-again in #427
  • [Core] Split aspect ratio scaling into its own config by @nicbarker in #426
  • [Core] Fix dimension calculation that would always result in 0 by @michael-tanner-coder in #428
  • [CMake] Set CMake FetchContent GIT_TAG for SDL_ttf by @weslord in #423
  • [Bindings/Odin] Update README to better match official website example. by @rats159 in #422
  • [Renderers/Raylib] Fix element float distortion by @rootBrz in #430

New Contributors

Full Changelog: v0.13...v0.14

Contributors

linkdd, RicoP, and 45 other contributors
Assets 4
Loading