TheZone/clay
1
0
Fork 0
mirror of https://github.com/nicbarker/clay.git synced 2025-01-23 18:06:04 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Implement native scroll containers in HTML renderer (#54)

Browse Source
This commit is contained in:
Nic Barker 2024-12-19 11:35:18 +13:00 committed by GitHub
parent b9d02330ff
commit 18f06e5faf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 201 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

202
clay.h
View File

@ -447,8 +447,10 @@ bool Clay_Hovered();
void Clay_OnHover(void (*onHoverFunction)(Clay_ElementId elementId, Clay_PointerData pointerData, intptr_t userData), intptr_t userData); void Clay_OnHover(void (*onHoverFunction)(Clay_ElementId elementId, Clay_PointerData pointerData, intptr_t userData), intptr_t userData);
Clay_ScrollContainerData Clay_GetScrollContainerData(Clay_ElementId id); Clay_ScrollContainerData Clay_GetScrollContainerData(Clay_ElementId id);
void Clay_SetMeasureTextFunction(Clay_Dimensions (*measureTextFunction)(Clay_String *text, Clay_TextElementConfig *config)); void Clay_SetMeasureTextFunction(Clay_Dimensions (*measureTextFunction)(Clay_String *text, Clay_TextElementConfig *config));
void Clay_SetQueryScrollOffsetFunction(Clay_Vector2 (*queryScrollOffsetFunction)(uint32_t elementId));
Clay_RenderCommand * Clay_RenderCommandArray_Get(Clay_RenderCommandArray* array, int32_t index); Clay_RenderCommand * Clay_RenderCommandArray_Get(Clay_RenderCommandArray* array, int32_t index);
void Clay_SetDebugModeEnabled(bool enabled); void Clay_SetDebugModeEnabled(bool enabled);
void Clay_SetCullingEnabled(bool enabled);
// Internal API functions required by macros // Internal API functions required by macros
void Clay__OpenElement(); void Clay__OpenElement();
@ -1345,6 +1347,7 @@ typedef struct
uint32_t parentId; // This can be zero in the case of the root layout tree uint32_t parentId; // This can be zero in the case of the root layout tree
uint32_t clipElementId; // This can be zero if there is no clip element uint32_t clipElementId; // This can be zero if there is no clip element
uint32_t zIndex; uint32_t zIndex;
Clay_Vector2 pointerOffset; // Only used when scroll containers are managed externally
} Clay__LayoutElementTreeRoot; } Clay__LayoutElementTreeRoot;
Clay__LayoutElementTreeRoot CLAY__LAYOUT_ELEMENT_TREE_ROOT_DEFAULT = CLAY__INIT(Clay__LayoutElementTreeRoot) {}; Clay__LayoutElementTreeRoot CLAY__LAYOUT_ELEMENT_TREE_ROOT_DEFAULT = CLAY__INIT(Clay__LayoutElementTreeRoot) {};
@ -1401,6 +1404,8 @@ Clay_Dimensions Clay__layoutDimensions = CLAY__INIT(Clay_Dimensions){};
Clay_ElementId Clay__dynamicElementIndexBaseHash = CLAY__INIT(Clay_ElementId) { .id = 128476991, .stringId = { .length = 8, .chars = "Auto ID" } }; Clay_ElementId Clay__dynamicElementIndexBaseHash = CLAY__INIT(Clay_ElementId) { .id = 128476991, .stringId = { .length = 8, .chars = "Auto ID" } };
uint32_t Clay__dynamicElementIndex = 0; uint32_t Clay__dynamicElementIndex = 0;
bool Clay__debugModeEnabled = false; bool Clay__debugModeEnabled = false;
bool Clay__disableCulling = false;
bool Clay__externalScrollHandlingEnabled = false;
uint32_t Clay__debugSelectedElementId = 0; uint32_t Clay__debugSelectedElementId = 0;
uint32_t Clay__debugViewWidth = 400; uint32_t Clay__debugViewWidth = 400;
Clay_Color Clay__debugViewHighlightColor = CLAY__INIT(Clay_Color) { 168, 66, 28, 100 }; Clay_Color Clay__debugViewHighlightColor = CLAY__INIT(Clay_Color) { 168, 66, 28, 100 };
@ -1417,6 +1422,7 @@ Clay__int32_tArray Clay__layoutElementChildrenBuffer;
Clay__TextElementDataArray Clay__textElementData; Clay__TextElementDataArray Clay__textElementData;
Clay__LayoutElementPointerArray Clay__imageElementPointers; Clay__LayoutElementPointerArray Clay__imageElementPointers;
Clay__int32_tArray Clay__reusableElementIndexBuffer; Clay__int32_tArray Clay__reusableElementIndexBuffer;
Clay__int32_tArray Clay__layoutElementClipElementIds;
// Configs // Configs
Clay__LayoutConfigArray Clay__layoutConfigs; Clay__LayoutConfigArray Clay__layoutConfigs;
Clay__ElementConfigArray Clay__elementConfigBuffer; Clay__ElementConfigArray Clay__elementConfigBuffer;
@ -1449,8 +1455,10 @@ Clay__DebugElementDataArray Clay__debugElementData;
#if CLAY_WASM #if CLAY_WASM
__attribute__((import_module("clay"), import_name("measureTextFunction"))) Clay_Dimensions Clay__MeasureText(Clay_String *text, Clay_TextElementConfig *config); __attribute__((import_module("clay"), import_name("measureTextFunction"))) Clay_Dimensions Clay__MeasureText(Clay_String *text, Clay_TextElementConfig *config);
__attribute__((import_module("clay"), import_name("queryScrollOffsetFunction"))) Clay_Vector2 Clay__QueryScrollOffset(uint32_t elementId);
#else #else
Clay_Dimensions (*Clay__MeasureText)(Clay_String *text, Clay_TextElementConfig *config); Clay_Dimensions (*Clay__MeasureText)(Clay_String *text, Clay_TextElementConfig *config);
Clay_Vector2 (*Clay__QueryScrollOffset)(uint32_t elementId);
#endif #endif
Clay_LayoutElement* Clay__GetOpenLayoutElement() { Clay_LayoutElement* Clay__GetOpenLayoutElement() {
@ -1792,6 +1800,7 @@ void Clay__ElementPostConfiguration() {
} }
} else { } else {
Clay_LayoutElementHashMapItem *parentItem = Clay__GetHashMapItem(floatingConfig->parentId); Clay_LayoutElementHashMapItem *parentItem = Clay__GetHashMapItem(floatingConfig->parentId);
clipElementId = Clay__int32_tArray_Get(&Clay__layoutElementClipElementIds, parentItem->layoutElement - Clay__layoutElements.internalArray);
if (!parentItem) { if (!parentItem) {
Clay__WarningArray_Add(&Clay_warnings, CLAY__INIT(Clay__Warning) { CLAY_STRING("Clay Warning: Couldn't find parent container to attach floating container to.") }); Clay__WarningArray_Add(&Clay_warnings, CLAY__INIT(Clay__Warning) { CLAY_STRING("Clay Warning: Couldn't find parent container to attach floating container to.") });
} }
@ -1817,7 +1826,10 @@ void Clay__ElementPostConfiguration() {
} }
} }
if (!scrollOffset) { if (!scrollOffset) {
Clay__ScrollContainerDataInternalArray_Add(&Clay__scrollContainerDatas, CLAY__INIT(Clay__ScrollContainerDataInternal){.layoutElement = openLayoutElement, .scrollOrigin = {-1,-1}, .elementId = openLayoutElement->id, .openThisFrame = true}); scrollOffset = Clay__ScrollContainerDataInternalArray_Add(&Clay__scrollContainerDatas, CLAY__INIT(Clay__ScrollContainerDataInternal){.layoutElement = openLayoutElement, .scrollOrigin = {-1,-1}, .elementId = openLayoutElement->id, .openThisFrame = true});
}
if (Clay__externalScrollHandlingEnabled) {
scrollOffset->scrollPosition = Clay__QueryScrollOffset(scrollOffset->elementId);
} }
break; break;
} }
@ -1934,6 +1946,11 @@ void Clay__OpenElement() {
Clay_LayoutElement layoutElement = CLAY__INIT(Clay_LayoutElement) {}; Clay_LayoutElement layoutElement = CLAY__INIT(Clay_LayoutElement) {};
Clay_LayoutElementArray_Add(&Clay__layoutElements, layoutElement); Clay_LayoutElementArray_Add(&Clay__layoutElements, layoutElement);
Clay__int32_tArray_Add(&Clay__openLayoutElementStack, Clay__layoutElements.length - 1); Clay__int32_tArray_Add(&Clay__openLayoutElementStack, Clay__layoutElements.length - 1);
if (Clay__openClipElementStack.length > 0) {
Clay__int32_tArray_Set(&Clay__layoutElementClipElementIds, Clay__layoutElements.length - 1, Clay__int32_tArray_Get(&Clay__openClipElementStack, (int)Clay__openClipElementStack.length - 1));
} else {
Clay__int32_tArray_Set(&Clay__layoutElementClipElementIds, Clay__layoutElements.length - 1, 0);
}
} }
void Clay__OpenTextElement(Clay_String text, Clay_TextElementConfig *textConfig) { void Clay__OpenTextElement(Clay_String text, Clay_TextElementConfig *textConfig) {
@ -2001,6 +2018,7 @@ void Clay__InitializeEphemeralMemory(Clay_Arena *arena) {
Clay__treeNodeVisited.length = Clay__treeNodeVisited.capacity; // This array is accessed directly rather than behaving as a list Clay__treeNodeVisited.length = Clay__treeNodeVisited.capacity; // This array is accessed directly rather than behaving as a list
Clay__openClipElementStack = Clay__int32_tArray_Allocate_Arena(CLAY_MAX_ELEMENT_COUNT, arena); Clay__openClipElementStack = Clay__int32_tArray_Allocate_Arena(CLAY_MAX_ELEMENT_COUNT, arena);
Clay__reusableElementIndexBuffer = Clay__int32_tArray_Allocate_Arena(CLAY_MAX_ELEMENT_COUNT, arena); Clay__reusableElementIndexBuffer = Clay__int32_tArray_Allocate_Arena(CLAY_MAX_ELEMENT_COUNT, arena);
Clay__layoutElementClipElementIds = Clay__int32_tArray_Allocate_Arena(CLAY_MAX_ELEMENT_COUNT, arena);
Clay__dynamicStringData = Clay__CharArray_Allocate_Arena(CLAY_MAX_ELEMENT_COUNT, arena); Clay__dynamicStringData = Clay__CharArray_Allocate_Arena(CLAY_MAX_ELEMENT_COUNT, arena);
} }
@ -2283,6 +2301,17 @@ void Clay__AddRenderCommand(Clay_RenderCommand renderCommand) {
} }
} }
bool Clay__ElementIsOffscreen(Clay_BoundingBox *boundingBox) {
if (Clay__disableCulling) {
return false;
}
return (boundingBox->x > (float)Clay__layoutDimensions.width) ||
(boundingBox->y > (float)Clay__layoutDimensions.height) ||
(boundingBox->x + boundingBox->width < 0) ||
(boundingBox->y + boundingBox->height < 0);
}
void Clay__CalculateFinalLayout() { void Clay__CalculateFinalLayout() {
// Calculate sizing along the X axis // Calculate sizing along the X axis
Clay__SizeContainersAlongAxis(true); Clay__SizeContainersAlongAxis(true);
@ -2468,8 +2497,26 @@ void Clay__CalculateFinalLayout() {
if (root->clipElementId) { if (root->clipElementId) {
Clay_LayoutElementHashMapItem *clipHashMapItem = Clay__GetHashMapItem(root->clipElementId); Clay_LayoutElementHashMapItem *clipHashMapItem = Clay__GetHashMapItem(root->clipElementId);
if (clipHashMapItem) { if (clipHashMapItem) {
// Floating elements that are attached to scrolling contents won't be correctly positioned if external scroll handling is enabled, fix here
if (Clay__externalScrollHandlingEnabled) {
Clay_ScrollElementConfig *scrollConfig = Clay__FindElementConfigWithType(clipHashMapItem->layoutElement, CLAY__ELEMENT_CONFIG_TYPE_SCROLL_CONTAINER).scrollElementConfig;
for (int i = 0; i < Clay__scrollContainerDatas.length; i++) {
Clay__ScrollContainerDataInternal *mapping = Clay__ScrollContainerDataInternalArray_Get(&Clay__scrollContainerDatas, i);
if (mapping->layoutElement == clipHashMapItem->layoutElement) {
root->pointerOffset = mapping->scrollPosition;
if (scrollConfig->horizontal) {
rootPosition.x += mapping->scrollPosition.x;
}
if (scrollConfig->vertical) {
rootPosition.y += mapping->scrollPosition.y;
}
break;
}
}
}
Clay__AddRenderCommand(CLAY__INIT(Clay_RenderCommand) { Clay__AddRenderCommand(CLAY__INIT(Clay_RenderCommand) {
.boundingBox = clipHashMapItem->boundingBox, .boundingBox = clipHashMapItem->boundingBox,
.config = { .scrollElementConfig = Clay__StoreScrollElementConfig(CLAY__INIT(Clay_ScrollElementConfig){}) },
.id = Clay__RehashWithNumber(rootElement->id, 10), // TODO need a better strategy for managing derived ids .id = Clay__RehashWithNumber(rootElement->id, 10), // TODO need a better strategy for managing derived ids
.commandType = CLAY_RENDER_COMMAND_TYPE_SCISSOR_START, .commandType = CLAY_RENDER_COMMAND_TYPE_SCISSOR_START,
}); });
@ -2515,6 +2562,9 @@ void Clay__CalculateFinalLayout() {
if (scrollConfig->vertical) { if (scrollConfig->vertical) {
scrollOffset.y = mapping->scrollPosition.y; scrollOffset.y = mapping->scrollPosition.y;
} }
if (Clay__externalScrollHandlingEnabled) {
scrollOffset = CLAY__INIT(Clay_Vector2) {};
}
break; break;
} }
} }
@ -2530,7 +2580,7 @@ void Clay__CalculateFinalLayout() {
sortedConfigIndexes[elementConfigIndex] = elementConfigIndex; sortedConfigIndexes[elementConfigIndex] = elementConfigIndex;
} }
int sortMax = currentElement->elementConfigs.length - 1; int sortMax = currentElement->elementConfigs.length - 1;
while (sortMax > 0) { // dumb bubble sort while (sortMax > 0) { // todo dumb bubble sort
for (int i = 0; i < sortMax; ++i) { for (int i = 0; i < sortMax; ++i) {
int current = sortedConfigIndexes[i]; int current = sortedConfigIndexes[i];
int next = sortedConfigIndexes[i + 1]; int next = sortedConfigIndexes[i + 1];
@ -2553,19 +2603,18 @@ void Clay__CalculateFinalLayout() {
.id = currentElement->id, .id = currentElement->id,
}; };
#ifndef CLAY_DISABLE_CULLING bool offscreen = Clay__ElementIsOffscreen(&currentElementBoundingBox);
// Culling - Don't bother to generate render commands for rectangles entirely outside the screen - this won't stop their children from being rendered if they overflow // Culling - Don't bother to generate render commands for rectangles entirely outside the screen - this won't stop their children from being rendered if they overflow
bool offscreen = currentElementBoundingBox.x > (float)Clay__layoutDimensions.width || currentElementBoundingBox.y > (float)Clay__layoutDimensions.height || currentElementBoundingBox.x + currentElementBoundingBox.width < 0 || currentElementBoundingBox.y + currentElementBoundingBox.height < 0;
bool shouldRender = !offscreen; bool shouldRender = !offscreen;
#elif
bool shouldRender = true;
#endif
switch (elementConfig->type) { switch (elementConfig->type) {
case CLAY__ELEMENT_CONFIG_TYPE_RECTANGLE: { case CLAY__ELEMENT_CONFIG_TYPE_RECTANGLE: {
renderCommand.commandType = CLAY_RENDER_COMMAND_TYPE_RECTANGLE; renderCommand.commandType = CLAY_RENDER_COMMAND_TYPE_RECTANGLE;
break; break;
} }
case CLAY__ELEMENT_CONFIG_TYPE_BORDER_CONTAINER: case CLAY__ELEMENT_CONFIG_TYPE_BORDER_CONTAINER: {
shouldRender = false;
break;
}
case CLAY__ELEMENT_CONFIG_TYPE_FLOATING_CONTAINER: { case CLAY__ELEMENT_CONFIG_TYPE_FLOATING_CONTAINER: {
renderCommand.commandType = CLAY_RENDER_COMMAND_TYPE_NONE; renderCommand.commandType = CLAY_RENDER_COMMAND_TYPE_NONE;
shouldRender = false; shouldRender = false;
@ -2573,6 +2622,7 @@ void Clay__CalculateFinalLayout() {
} }
case CLAY__ELEMENT_CONFIG_TYPE_SCROLL_CONTAINER: { case CLAY__ELEMENT_CONFIG_TYPE_SCROLL_CONTAINER: {
renderCommand.commandType = CLAY_RENDER_COMMAND_TYPE_SCISSOR_START; renderCommand.commandType = CLAY_RENDER_COMMAND_TYPE_SCISSOR_START;
shouldRender = true;
break; break;
} }
case CLAY__ELEMENT_CONFIG_TYPE_IMAGE: { case CLAY__ELEMENT_CONFIG_TYPE_IMAGE: {
@ -2580,6 +2630,9 @@ void Clay__CalculateFinalLayout() {
break; break;
} }
case CLAY__ELEMENT_CONFIG_TYPE_TEXT: { case CLAY__ELEMENT_CONFIG_TYPE_TEXT: {
if (!shouldRender) {
break;
}
shouldRender = false; shouldRender = false;
Clay_ElementConfigUnion configUnion = elementConfig->config; Clay_ElementConfigUnion configUnion = elementConfig->config;
Clay_TextElementConfig *textElementConfig = configUnion.textElementConfig; Clay_TextElementConfig *textElementConfig = configUnion.textElementConfig;
@ -2602,7 +2655,7 @@ void Clay__CalculateFinalLayout() {
}); });
yPosition += finalLineHeight; yPosition += finalLineHeight;
if (currentElementBoundingBox.y + yPosition > Clay__layoutDimensions.height) { if (!Clay__disableCulling && (currentElementBoundingBox.y + yPosition > Clay__layoutDimensions.height)) {
break; break;
} }
} }
@ -2673,50 +2726,57 @@ void Clay__CalculateFinalLayout() {
if (mapping->layoutElement == currentElement) { if (mapping->layoutElement == currentElement) {
if (scrollConfig->horizontal) { scrollOffset.x = mapping->scrollPosition.x; } if (scrollConfig->horizontal) { scrollOffset.x = mapping->scrollPosition.x; }
if (scrollConfig->vertical) { scrollOffset.y = mapping->scrollPosition.y; } if (scrollConfig->vertical) { scrollOffset.y = mapping->scrollPosition.y; }
if (Clay__externalScrollHandlingEnabled) {
scrollOffset = CLAY__INIT(Clay_Vector2) {};
}
break; break;
} }
} }
} }
// Todo: culling not implemented for borders
if (Clay__ElementHasConfig(currentElement, CLAY__ELEMENT_CONFIG_TYPE_BORDER_CONTAINER)) { if (Clay__ElementHasConfig(currentElement, CLAY__ELEMENT_CONFIG_TYPE_BORDER_CONTAINER)) {
Clay_LayoutElementHashMapItem *currentElementData = Clay__GetHashMapItem(currentElement->id); Clay_LayoutElementHashMapItem *currentElementData = Clay__GetHashMapItem(currentElement->id);
Clay_BoundingBox currentElementBoundingBox = currentElementData->boundingBox; Clay_BoundingBox currentElementBoundingBox = currentElementData->boundingBox;
Clay_BorderElementConfig *borderConfig = Clay__FindElementConfigWithType(currentElement, CLAY__ELEMENT_CONFIG_TYPE_BORDER_CONTAINER).borderElementConfig;
Clay_RenderCommand renderCommand = CLAY__INIT(Clay_RenderCommand) { // Culling - Don't bother to generate render commands for rectangles entirely outside the screen - this won't stop their children from being rendered if they overflow
.boundingBox = currentElementBoundingBox, if (!Clay__ElementIsOffscreen(&currentElementBoundingBox)) {
.config = { .borderElementConfig = borderConfig }, Clay_BorderElementConfig *borderConfig = Clay__FindElementConfigWithType(currentElement, CLAY__ELEMENT_CONFIG_TYPE_BORDER_CONTAINER).borderElementConfig;
.id = Clay__RehashWithNumber(currentElement->id, 4), Clay_RenderCommand renderCommand = CLAY__INIT(Clay_RenderCommand) {
.commandType = CLAY_RENDER_COMMAND_TYPE_BORDER, .boundingBox = currentElementBoundingBox,
}; .config = { .borderElementConfig = borderConfig },
Clay__AddRenderCommand(renderCommand); .id = Clay__RehashWithNumber(currentElement->id, 4),
if (borderConfig->betweenChildren.width > 0 && borderConfig->betweenChildren.color.a > 0) { .commandType = CLAY_RENDER_COMMAND_TYPE_BORDER,
Clay_RectangleElementConfig *rectangleConfig = Clay__StoreRectangleElementConfig(CLAY__INIT(Clay_RectangleElementConfig) {.color = borderConfig->betweenChildren.color}); };
Clay_Vector2 borderOffset = { (float)layoutConfig->padding.x, (float)layoutConfig->padding.y }; Clay__AddRenderCommand(renderCommand);
if (layoutConfig->layoutDirection == CLAY_LEFT_TO_RIGHT) { if (borderConfig->betweenChildren.width > 0 && borderConfig->betweenChildren.color.a > 0) {
for (int i = 0; i < currentElement->children.length; ++i) { Clay_RectangleElementConfig *rectangleConfig = Clay__StoreRectangleElementConfig(CLAY__INIT(Clay_RectangleElementConfig) {.color = borderConfig->betweenChildren.color});
Clay_LayoutElement *childElement = Clay_LayoutElementArray_Get(&Clay__layoutElements, currentElement->children.elements[i]); Clay_Vector2 borderOffset = { (float)layoutConfig->padding.x, (float)layoutConfig->padding.y };
if (i > 0) { if (layoutConfig->layoutDirection == CLAY_LEFT_TO_RIGHT) {
Clay__AddRenderCommand(CLAY__INIT(Clay_RenderCommand) { for (int i = 0; i < currentElement->children.length; ++i) {
.boundingBox = { currentElementBoundingBox.x + borderOffset.x + scrollOffset.x, currentElementBoundingBox.y + scrollOffset.y, (float)borderConfig->betweenChildren.width, currentElement->dimensions.height }, Clay_LayoutElement *childElement = Clay_LayoutElementArray_Get(&Clay__layoutElements, currentElement->children.elements[i]);
.config = { rectangleConfig }, if (i > 0) {
.id = Clay__RehashWithNumber(currentElement->id, 5 + i), Clay__AddRenderCommand(CLAY__INIT(Clay_RenderCommand) {
.commandType = CLAY_RENDER_COMMAND_TYPE_RECTANGLE, .boundingBox = { currentElementBoundingBox.x + borderOffset.x + scrollOffset.x, currentElementBoundingBox.y + scrollOffset.y, (float)borderConfig->betweenChildren.width, currentElement->dimensions.height },
}); .config = { rectangleConfig },
.id = Clay__RehashWithNumber(currentElement->id, 5 + i),
.commandType = CLAY_RENDER_COMMAND_TYPE_RECTANGLE,
});
}
borderOffset.x += (childElement->dimensions.width + (float)layoutConfig->childGap / 2);
} }
borderOffset.x += (childElement->dimensions.width + (float)layoutConfig->childGap / 2); } else {
} for (int i = 0; i < currentElement->children.length; ++i) {
} else { Clay_LayoutElement *childElement = Clay_LayoutElementArray_Get(&Clay__layoutElements, currentElement->children.elements[i]);
for (int i = 0; i < currentElement->children.length; ++i) { if (i > 0) {
Clay_LayoutElement *childElement = Clay_LayoutElementArray_Get(&Clay__layoutElements, currentElement->children.elements[i]); Clay__AddRenderCommand(CLAY__INIT(Clay_RenderCommand) {
if (i > 0) { .boundingBox = { currentElementBoundingBox.x + scrollOffset.x, currentElementBoundingBox.y + borderOffset.y + scrollOffset.y, currentElement->dimensions.width, (float)borderConfig->betweenChildren.width },
Clay__AddRenderCommand(CLAY__INIT(Clay_RenderCommand) { .config = { rectangleConfig },
.boundingBox = { currentElementBoundingBox.x + scrollOffset.x, currentElementBoundingBox.y + borderOffset.y + scrollOffset.y, currentElement->dimensions.width, (float)borderConfig->betweenChildren.width }, .id = Clay__RehashWithNumber(currentElement->id, 5 + i),
.config = { rectangleConfig }, .commandType = CLAY_RENDER_COMMAND_TYPE_RECTANGLE,
.id = Clay__RehashWithNumber(currentElement->id, 5 + i), });
.commandType = CLAY_RENDER_COMMAND_TYPE_RECTANGLE, }
}); borderOffset.y += (childElement->dimensions.height + (float)layoutConfig->childGap / 2);
} }
borderOffset.y += (childElement->dimensions.height + (float)layoutConfig->childGap / 2);
} }
} }
} }
@ -2901,12 +2961,7 @@ Clay__RenderDebugLayoutData Clay__RenderDebugLayoutElementsList(int32_t initialR
Clay__treeNodeVisited.internalArray[dfsBuffer.length - 1] = true; Clay__treeNodeVisited.internalArray[dfsBuffer.length - 1] = true;
Clay_LayoutElementHashMapItem *currentElementData = Clay__GetHashMapItem(currentElement->id); Clay_LayoutElementHashMapItem *currentElementData = Clay__GetHashMapItem(currentElement->id);
Clay_BoundingBox currentElementBoundingBox = currentElementData->boundingBox; bool offscreen = Clay__ElementIsOffscreen(&currentElementData->boundingBox);
#ifndef CLAY_DISABLE_CULLING
bool offscreen = currentElementBoundingBox.x > (float)Clay__layoutDimensions.width || currentElementBoundingBox.y > (float)Clay__layoutDimensions.height || currentElementBoundingBox.x + currentElementBoundingBox.width < 0 || currentElementBoundingBox.y + currentElementBoundingBox.height < 0;
#elif
bool offscreen = false;
#endif
if (Clay__debugSelectedElementId == currentElement->id) { if (Clay__debugSelectedElementId == currentElement->id) {
layoutData.selectedElementRowIndex = layoutData.rowCount; layoutData.selectedElementRowIndex = layoutData.rowCount;
} }
@ -2991,14 +3046,12 @@ Clay__RenderDebugLayoutData Clay__RenderDebugLayoutElementsList(int32_t initialR
if (Clay__pointerInfo.state == CLAY_POINTER_DATA_PRESSED_THIS_FRAME) { if (Clay__pointerInfo.state == CLAY_POINTER_DATA_PRESSED_THIS_FRAME) {
Clay_ElementId collapseButtonId = Clay__HashString(CLAY_STRING("Clay__DebugView_CollapseElement"), 0, 0); Clay_ElementId collapseButtonId = Clay__HashString(CLAY_STRING("Clay__DebugView_CollapseElement"), 0, 0);
if (Clay__pointerInfo.position.x > Clay__layoutDimensions.width - (float)Clay__debugViewWidth && Clay__pointerInfo.position.x < Clay__layoutDimensions.width && Clay__pointerInfo.position.y > 0 && Clay__pointerInfo.position.y < Clay__layoutDimensions.height) { for (int i = (int)Clay__pointerOverIds.length - 1; i >= 0; i--) {
for (int i = (int)Clay__pointerOverIds.length - 1; i >= 0; i--) { Clay_ElementId *elementId = Clay__ElementIdArray_Get(&Clay__pointerOverIds, i);
Clay_ElementId *elementId = Clay__ElementIdArray_Get(&Clay__pointerOverIds, i); if (elementId->baseId == collapseButtonId.baseId) {
if (elementId->baseId == collapseButtonId.baseId) { Clay_LayoutElementHashMapItem *highlightedItem = Clay__GetHashMapItem(elementId->offset);
Clay_LayoutElementHashMapItem *highlightedItem = Clay__GetHashMapItem(elementId->offset); highlightedItem->debugData->collapsed = !highlightedItem->debugData->collapsed;
highlightedItem->debugData->collapsed = !highlightedItem->debugData->collapsed; break;
break;
}
} }
} }
} }
@ -3118,7 +3171,9 @@ void Clay__RenderDebugView() {
for (int i = 0; i < Clay__scrollContainerDatas.length; ++i) { for (int i = 0; i < Clay__scrollContainerDatas.length; ++i) {
Clay__ScrollContainerDataInternal *scrollContainerData = Clay__ScrollContainerDataInternalArray_Get(&Clay__scrollContainerDatas, i); Clay__ScrollContainerDataInternal *scrollContainerData = Clay__ScrollContainerDataInternalArray_Get(&Clay__scrollContainerDatas, i);
if (scrollContainerData->elementId == scrollId.id) { if (scrollContainerData->elementId == scrollId.id) {
scrollYOffset = scrollContainerData->scrollPosition.y; if (!Clay__externalScrollHandlingEnabled) {
scrollYOffset = scrollContainerData->scrollPosition.y;
}
break; break;
} }
} }
@ -3439,6 +3494,12 @@ void Clay_SetMeasureTextFunction(Clay_Dimensions (*measureTextFunction)(Clay_Str
} }
#endif #endif
#ifndef CLAY_WASM
void Clay_SetQueryScrollOffsetFunction(Clay_Vector2 (*queryScrollOffsetFunction)(uint32_t elementId)) {
Clay__QueryScrollOffset = queryScrollOffsetFunction;
}
#endif
CLAY_WASM_EXPORT("Clay_SetLayoutDimensions") CLAY_WASM_EXPORT("Clay_SetLayoutDimensions")
void Clay_SetLayoutDimensions(Clay_Dimensions dimensions) { void Clay_SetLayoutDimensions(Clay_Dimensions dimensions) {
Clay__layoutDimensions = dimensions; Clay__layoutDimensions = dimensions;
@ -3465,11 +3526,16 @@ void Clay_SetPointerState(Clay_Vector2 position, bool isPointerDown) {
Clay__treeNodeVisited.internalArray[dfsBuffer.length - 1] = true; Clay__treeNodeVisited.internalArray[dfsBuffer.length - 1] = true;
Clay_LayoutElement *currentElement = Clay_LayoutElementArray_Get(&Clay__layoutElements, Clay__int32_tArray_Get(&dfsBuffer, (int)dfsBuffer.length - 1)); Clay_LayoutElement *currentElement = Clay_LayoutElementArray_Get(&Clay__layoutElements, Clay__int32_tArray_Get(&dfsBuffer, (int)dfsBuffer.length - 1));
Clay_LayoutElementHashMapItem *mapItem = Clay__GetHashMapItem(currentElement->id); // TODO think of a way around this, maybe the fact that it's essentially a binary tree limits the cost, but the worst case is not great Clay_LayoutElementHashMapItem *mapItem = Clay__GetHashMapItem(currentElement->id); // TODO think of a way around this, maybe the fact that it's essentially a binary tree limits the cost, but the worst case is not great
if (mapItem && Clay__PointIsInsideRect(position, mapItem->boundingBox)) { Clay_BoundingBox elementBox = mapItem->boundingBox;
if (mapItem->onHoverFunction) { elementBox.x -= root->pointerOffset.x;
mapItem->onHoverFunction(mapItem->elementId, Clay__pointerInfo, mapItem->hoverFunctionUserData); elementBox.y -= root->pointerOffset.y;
if (mapItem) {
if ((Clay__PointIsInsideRect(position, elementBox))) {
if (mapItem->onHoverFunction) {
mapItem->onHoverFunction(mapItem->elementId, Clay__pointerInfo, mapItem->hoverFunctionUserData);
}
Clay__ElementIdArray_Add(&Clay__pointerOverIds, mapItem->elementId);
} }
Clay__ElementIdArray_Add(&Clay__pointerOverIds, mapItem->elementId);
if (Clay__ElementHasConfig(currentElement, CLAY__ELEMENT_CONFIG_TYPE_TEXT)) { if (Clay__ElementHasConfig(currentElement, CLAY__ELEMENT_CONFIG_TYPE_TEXT)) {
dfsBuffer.length--; dfsBuffer.length--;
continue; continue;
@ -3743,6 +3809,16 @@ void Clay_SetDebugModeEnabled(bool enabled) {
Clay__debugModeEnabled = enabled; Clay__debugModeEnabled = enabled;
} }
CLAY_WASM_EXPORT("Clay_SetCullingEnabled")
void Clay_SetCullingEnabled(bool enabled) {
Clay__disableCulling = !enabled;
}
CLAY_WASM_EXPORT("Clay_SetExternalScrollHandlingEnabled")
void Clay_SetExternalScrollHandlingEnabled(bool enabled) {
Clay__externalScrollHandlingEnabled = enabled;
}
#endif //CLAY_IMPLEMENTATION #endif //CLAY_IMPLEMENTATION
/* /*

64
examples/clay-official-website/index.html
View File

@ -42,6 +42,7 @@
position: absolute; position: absolute;
box-sizing: border-box; box-sizing: border-box;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
pointer-events: none;
} }
a { a {
@ -53,6 +54,11 @@
pointer-events: all; pointer-events: all;
white-space: pre; white-space: pre;
} }
/* TODO special exception for text selection in debug tools */
[id='2067877626'] > * {
pointer-events: none !important;
}
</style> </style>
</head> </head>
<script type="module"> <script type="module">
@ -123,6 +129,10 @@
{ name: 'wrapMode', type: 'uint32_t' }, { name: 'wrapMode', type: 'uint32_t' },
{ name: 'disablePointerEvents', type: 'uint8_t' } { name: 'disablePointerEvents', type: 'uint8_t' }
]}; ]};
let scrollConfigDefinition = { name: 'text', type: 'struct', members: [
{ name: 'horizontal', type: 'bool' },
{ name: 'vertical', type: 'bool' },
]};
let imageConfigDefinition = { name: 'image', type: 'struct', members: [ let imageConfigDefinition = { name: 'image', type: 'struct', members: [
{ name: 'imageData', type: 'uint32_t' }, { name: 'imageData', type: 'uint32_t' },
{ name: 'sourceDimensions', type: 'struct', members: [ { name: 'sourceDimensions', type: 'struct', members: [
@ -170,6 +180,7 @@
case 'uint32_t': return 4; case 'uint32_t': return 4;
case 'uint16_t': return 2; case 'uint16_t': return 2;
case 'uint8_t': return 1; case 'uint8_t': return 1;
case 'bool': return 1;
default: { default: {
throw "Unimplemented C data type " + definition.type throw "Unimplemented C data type " + definition.type
} }
@ -196,7 +207,8 @@
case 'float': return { value: memoryDataView.getFloat32(address, true), __size: 4 }; case 'float': return { value: memoryDataView.getFloat32(address, true), __size: 4 };
case 'uint32_t': return { value: memoryDataView.getUint32(address, true), __size: 4 }; case 'uint32_t': return { value: memoryDataView.getUint32(address, true), __size: 4 };
case 'uint16_t': return { value: memoryDataView.getUint16(address, true), __size: 2 }; case 'uint16_t': return { value: memoryDataView.getUint16(address, true), __size: 2 };
case 'uint8_t': return { value: memoryDataView.getUint16(address, true), __size: 1 }; case 'uint8_t': return { value: memoryDataView.getUint8(address, true), __size: 1 };
case 'bool': return { value: memoryDataView.getUint8(address, true), __size: 1 };
default: { default: {
throw "Unimplemented C data type " + definition.type throw "Unimplemented C data type " + definition.type
} }
@ -228,7 +240,7 @@
window.arrowKeyDownPressedThisFrame = false; window.arrowKeyDownPressedThisFrame = false;
window.arrowKeyUpPressedThisFrame = false; window.arrowKeyUpPressedThisFrame = false;
let zeroTimeout = null; let zeroTimeout = null;
addEventListener("wheel", (event) => { document.addEventListener("wheel", (event) => {
window.mouseWheelXThisFrame = event.deltaX * -0.1; window.mouseWheelXThisFrame = event.deltaX * -0.1;
window.mouseWheelYThisFrame = event.deltaY * -0.1; window.mouseWheelYThisFrame = event.deltaY * -0.1;
clearTimeout(zeroTimeout); clearTimeout(zeroTimeout);
@ -241,8 +253,17 @@
function handleTouch (event) { function handleTouch (event) {
if (event.touches.length === 1) { if (event.touches.length === 1) {
window.touchDown = true; window.touchDown = true;
window.mousePositionXThisFrame = event.changedTouches[0].pageX; let target = event.target;
window.mousePositionYThisFrame = event.changedTouches[0].pageY; let scrollTop = 0;
let scrollLeft = 0;
let activeRendererIndex = memoryDataView.getUint32(instance.exports.ACTIVE_RENDERER_INDEX.value, true);
while (activeRendererIndex !== 1 && target) {
scrollLeft += target.scrollLeft;
scrollTop += target.scrollTop;
target = target.parentElement;
}
window.mousePositionXThisFrame = event.changedTouches[0].pageX + scrollLeft;
window.mousePositionYThisFrame = event.changedTouches[0].pageY + scrollTop;
} }
} }
@ -255,8 +276,17 @@
}) })
document.addEventListener("mousemove", (event) => { document.addEventListener("mousemove", (event) => {
window.mousePositionXThisFrame = event.x; let target = event.target;
window.mousePositionYThisFrame = event.y; let scrollTop = 0;
let scrollLeft = 0;
let activeRendererIndex = memoryDataView.getUint32(instance.exports.ACTIVE_RENDERER_INDEX.value, true);
while (activeRendererIndex !== 1 && target) {
scrollLeft += target.scrollLeft;
scrollTop += target.scrollTop;
target = target.parentElement;
}
window.mousePositionXThisFrame = event.x + scrollLeft;
window.mousePositionYThisFrame = event.y + scrollTop;
}); });
document.addEventListener("mousedown", (event) => { document.addEventListener("mousedown", (event) => {
@ -290,6 +320,13 @@
let sourceDimensions = getTextDimensions(text, `${Math.round(textConfig.fontSize.value * GLOBAL_FONT_SCALING_FACTOR)}px ${fontsById[textConfig.fontId.value]}`); let sourceDimensions = getTextDimensions(text, `${Math.round(textConfig.fontSize.value * GLOBAL_FONT_SCALING_FACTOR)}px ${fontsById[textConfig.fontId.value]}`);
memoryDataView.setFloat32(addressOfDimensions, sourceDimensions.width, true); memoryDataView.setFloat32(addressOfDimensions, sourceDimensions.width, true);
memoryDataView.setFloat32(addressOfDimensions + 4, sourceDimensions.height, true); memoryDataView.setFloat32(addressOfDimensions + 4, sourceDimensions.height, true);
},
queryScrollOffsetFunction: (addressOfOffset, elementId) => {
let container = document.getElementById(elementId.toString());
if (container) {
memoryDataView.setFloat32(addressOfOffset, -container.scrollLeft, true);
memoryDataView.setFloat32(addressOfOffset + 4, -container.scrollTop, true);
}
}}, }},
}; };
const { instance } = await WebAssembly.instantiateStreaming( const { instance } = await WebAssembly.instantiateStreaming(
@ -485,6 +522,15 @@
} }
case (CLAY_RENDER_COMMAND_TYPE_SCISSOR_START): { case (CLAY_RENDER_COMMAND_TYPE_SCISSOR_START): {
scissorStack.push({ nextAllocation: { x: renderCommand.boundingBox.x.value, y: renderCommand.boundingBox.y.value }, element, nextElementIndex: 0 }); scissorStack.push({ nextAllocation: { x: renderCommand.boundingBox.x.value, y: renderCommand.boundingBox.y.value }, element, nextElementIndex: 0 });
let config = readStructAtAddress(renderCommand.config.value, scrollConfigDefinition);
if (config.horizontal.value) {
element.style.overflowX = 'scroll';
element.style.pointerEvents = 'auto';
}
if (config.vertical.value) {
element.style.overflowY = 'scroll';
element.style.pointerEvents = 'auto';
}
break; break;
} }
case (CLAY_RENDER_COMMAND_TYPE_SCISSOR_END): { case (CLAY_RENDER_COMMAND_TYPE_SCISSOR_END): {
@ -698,7 +744,11 @@
const elapsed = currentTime - previousFrameTime; const elapsed = currentTime - previousFrameTime;
previousFrameTime = currentTime; previousFrameTime = currentTime;
let activeRendererIndex = memoryDataView.getUint32(instance.exports.ACTIVE_RENDERER_INDEX.value, true); let activeRendererIndex = memoryDataView.getUint32(instance.exports.ACTIVE_RENDERER_INDEX.value, true);
instance.exports.UpdateDrawFrame(scratchSpaceAddress, window.innerWidth, window.innerHeight, window.mouseWheelXThisFrame, window.mouseWheelYThisFrame, window.mousePositionXThisFrame, window.mousePositionYThisFrame, window.touchDown, window.mouseDown, window.arrowKeyDownPressedThisFrame, window.arrowKeyUpPressedThisFrame, window.dKeyPressedThisFrame, elapsed / 1000); if (activeRendererIndex === 0) {
instance.exports.UpdateDrawFrame(scratchSpaceAddress, window.innerWidth, window.innerHeight, 0, 0, window.mousePositionXThisFrame, window.mousePositionYThisFrame, window.touchDown, window.mouseDown, 0, 0, window.dKeyPressedThisFrame, elapsed / 1000);
} else {
instance.exports.UpdateDrawFrame(scratchSpaceAddress, window.innerWidth, window.innerHeight, window.mouseWheelXThisFrame, window.mouseWheelYThisFrame, window.mousePositionXThisFrame, window.mousePositionYThisFrame, window.touchDown, window.mouseDown, window.arrowKeyDownPressedThisFrame, window.arrowKeyUpPressedThisFrame, window.dKeyPressedThisFrame, elapsed / 1000);
}
let rendererChanged = activeRendererIndex !== window.previousActiveRendererIndex; let rendererChanged = activeRendererIndex !== window.previousActiveRendererIndex;
switch (activeRendererIndex) { switch (activeRendererIndex) {
case 0: { case 0: {

6
examples/clay-official-website/main.c
View File

@ -211,6 +211,8 @@ void HighPerformancePageMobile(float lerpValue) {
void HandleRendererButtonInteraction(Clay_ElementId elementId, Clay_PointerData pointerInfo, intptr_t userData) { void HandleRendererButtonInteraction(Clay_ElementId elementId, Clay_PointerData pointerInfo, intptr_t userData) {
if (pointerInfo.state == CLAY_POINTER_DATA_PRESSED_THIS_FRAME) { if (pointerInfo.state == CLAY_POINTER_DATA_PRESSED_THIS_FRAME) {
ACTIVE_RENDERER_INDEX = (uint32_t)userData; ACTIVE_RENDERER_INDEX = (uint32_t)userData;
Clay_SetCullingEnabled(ACTIVE_RENDERER_INDEX == 1);
Clay_SetExternalScrollHandlingEnabled(ACTIVE_RENDERER_INDEX == 0);
} }
} }
@ -364,7 +366,7 @@ Clay_RenderCommandArray CreateLayout(bool mobileScreen, float lerpValue) {
} }
} }
if (!mobileScreen) { if (!mobileScreen && ACTIVE_RENDERER_INDEX == 1) {
Clay_ScrollContainerData scrollData = Clay_GetScrollContainerData(Clay_GetElementId(CLAY_STRING("OuterScrollContainer"))); Clay_ScrollContainerData scrollData = Clay_GetScrollContainerData(Clay_GetElementId(CLAY_STRING("OuterScrollContainer")));
Clay_Color scrollbarColor = (Clay_Color){225, 138, 50, 120}; Clay_Color scrollbarColor = (Clay_Color){225, 138, 50, 120};
if (scrollbarData.mouseDown) { if (scrollbarData.mouseDown) {
@ -399,6 +401,8 @@ CLAY_WASM_EXPORT("UpdateDrawFrame") Clay_RenderCommandArray UpdateDrawFrame(floa
debugModeEnabled = !debugModeEnabled; debugModeEnabled = !debugModeEnabled;
Clay_SetDebugModeEnabled(debugModeEnabled); Clay_SetDebugModeEnabled(debugModeEnabled);
} }
Clay_SetCullingEnabled(ACTIVE_RENDERER_INDEX == 1);
Clay_SetExternalScrollHandlingEnabled(ACTIVE_RENDERER_INDEX == 0);
Clay__debugViewHighlightColor = (Clay_Color) {105,210,231, 120}; Clay__debugViewHighlightColor = (Clay_Color) {105,210,231, 120};