From a75860ca578a17f0598dacf89082c4b15ac8c68c Mon Sep 17 00:00:00 2001 From: Nic Barker Date: Wed, 11 Sep 2024 10:56:42 +1200 Subject: [PATCH] Fixes for html renderer and main website --- clay.h | 23 ++++++++++++----------- examples/clay-official-website/index.html | 22 +++++++++++++++++++--- examples/clay-official-website/main.c | 6 +++--- 3 files changed, 34 insertions(+), 17 deletions(-) diff --git a/clay.h b/clay.h index cb95dba..15a885e 100644 --- a/clay.h +++ b/clay.h @@ -2574,7 +2574,7 @@ void Clay__RenderDebugLayoutSizing(Clay_ElementId baseId, Clay_SizingAxis sizing } if (sizing.sizeMinMax.max != CLAY__MAXFLOAT) { CLAY_TEXT(Clay__Rehash(baseId, 6), CLAY_STRING("max: "), infoTextConfig); - CLAY_TEXT(Clay__Rehash(baseId, 7), Clay__IntToString(sizing.sizeMinMax.min), infoTextConfig); + CLAY_TEXT(Clay__Rehash(baseId, 7), Clay__IntToString(sizing.sizeMinMax.max), infoTextConfig); } CLAY_TEXT(Clay__Rehash(baseId, 8), CLAY_STRING(")"), infoTextConfig); } @@ -2733,12 +2733,13 @@ void Clay__RenderDebugView() { CLAY_TEXT(CLAY_ID("Clay__DebugViewElementInfoLayoutDirection"), layoutConfig->layoutDirection == CLAY_TOP_TO_BOTTOM ? CLAY_STRING("TOP_TO_BOTTOM") : CLAY_STRING("LEFT_TO_RIGHT"), infoTextConfig); // .sizing CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoLayoutTitle", 3), CLAY_STRING("Sizing"), infoTitleConfig); - CLAY_CONTAINER(CLAY_ID("Clay__DebugViewElementInfoSizing"), CLAY_LAYOUT(), { - CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoSizingData", 1), CLAY_STRING("{ width: "), infoTextConfig); + CLAY_CONTAINER(CLAY_ID("Clay__DebugViewElementInfoSizingWidth"), CLAY_LAYOUT(), { + CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoSizingData", 1), CLAY_STRING("width: "), infoTextConfig); Clay__RenderDebugLayoutSizing(CLAY_ID("Clay__DebugViewElementInfoSizingDataWidth"), layoutConfig->sizing.width, infoTextConfig); - CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoSizingData", 2), CLAY_STRING(", height: "), infoTextConfig); + }); + CLAY_CONTAINER(CLAY_ID("Clay__DebugViewElementInfoSizingHeight"), CLAY_LAYOUT(), { + CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoSizingData", 2), CLAY_STRING("height: "), infoTextConfig); Clay__RenderDebugLayoutSizing(CLAY_ID("Clay__DebugViewElementInfoSizingDataHeight"), layoutConfig->sizing.height, infoTextConfig); - CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoSizingData", 3), CLAY_STRING(" }"), infoTextConfig); }); // .padding CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoLayoutTitle", 4), CLAY_STRING("Padding"), infoTitleConfig); @@ -2802,12 +2803,12 @@ void Clay__RenderDebugView() { // .lineSpacing CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoRectangleFontTitle", 3), CLAY_STRING("Line Spacing"), infoTitleConfig); CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoRectangleFontBody", 3), Clay__IntToString(textConfig->lineSpacing), infoTextConfig); - // .lineSpacing + // .letterSpacing CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoRectangleFontTitle", 4), CLAY_STRING("Letter Spacing"), infoTitleConfig); CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoRectangleFontBody", 4), Clay__IntToString(textConfig->letterSpacing), infoTextConfig); // .lineSpacing CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoRectangleFontTitle", 5), CLAY_STRING("Wrap Mode"), infoTitleConfig); - Clay_String wrapMode = CLAY_STRING("ALL"); + Clay_String wrapMode = CLAY_STRING("WORDS"); if (textConfig->wrapMode == CLAY_TEXT_WRAP_NONE) { wrapMode = CLAY_STRING("NONE"); } else if (textConfig->wrapMode == CLAY_TEXT_WRAP_NEWLINES) { @@ -2815,7 +2816,7 @@ void Clay__RenderDebugView() { } CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoRectangleFontBody", 5), wrapMode, infoTextConfig); // .textColor - CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoRectangleFontTitle", 5), CLAY_STRING("Text Color"), infoTitleConfig); + CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoRectangleFontTitle", 6), CLAY_STRING("Text Color"), infoTitleConfig); Clay__RenderDebugViewColor(textConfig->textColor, infoTextConfig); }); break; @@ -2845,9 +2846,9 @@ void Clay__RenderDebugView() { CLAY_CONTAINER(CLAY_ID("Clay__DebugViewElementInfoScrollBody"), CLAY_LAYOUT(.layoutDirection = CLAY_TOP_TO_BOTTOM, .padding = {8, 8}, .childGap = 8), { // .vertical CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoScrollTitle", 1), CLAY_STRING("Vertical"), infoTitleConfig); - CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoImageVerticalData", 2), scrollConfig->vertical ? CLAY_STRING("true") : CLAY_STRING("false") , infoTextConfig); + CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoImageVerticalData", 1), scrollConfig->vertical ? CLAY_STRING("true") : CLAY_STRING("false") , infoTextConfig); // .horizontal - CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoScrollTitle", 1), CLAY_STRING("Horizontal"), infoTitleConfig); + CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoScrollTitle", 2), CLAY_STRING("Horizontal"), infoTitleConfig); CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoImageVerticalData", 2), scrollConfig->horizontal ? CLAY_STRING("true") : CLAY_STRING("false") , infoTextConfig); }); break; @@ -2904,7 +2905,7 @@ void Clay__RenderDebugView() { CLAY_TEXT(CLAY_ID("Clay__DebugViewElementInfoBorderChildrenTitle"), CLAY_STRING("Border Between Children"), infoTitleConfig); Clay__RenderDebugViewBorder(5, borderConfig->betweenChildren, infoTextConfig); // .cornerRadius - CLAY_TEXT(CLAY_ID("Clay__DebugViewElementInfoBorderCornerRadiusTitle"), CLAY_STRING("Border Between Children"), infoTitleConfig); + CLAY_TEXT(CLAY_ID("Clay__DebugViewElementInfoBorderCornerRadiusTitle"), CLAY_STRING("Corner Radius"), infoTitleConfig); Clay__RenderDebugViewCornerRadius(borderConfig->cornerRadius, infoTextConfig); }); break; diff --git a/examples/clay-official-website/index.html b/examples/clay-official-website/index.html index 42da101..6adf4c4 100644 --- a/examples/clay-official-website/index.html +++ b/examples/clay-official-website/index.html @@ -48,7 +48,7 @@ .text { pointer-events: all; - white-space: nowrap; + white-space: pre; } @@ -513,8 +513,8 @@ let arrayOffset = memoryDataView.getUint32(scratchSpaceAddress + 8, true); window.canvasRoot.width = window.innerWidth * window.devicePixelRatio; window.canvasRoot.height = window.innerHeight * window.devicePixelRatio; - window.canvasRoot.style.width = window.innerWidth; - window.canvasRoot.style.height = window.innerHeight; + window.canvasRoot.style.width = window.innerWidth + 'px'; + window.canvasRoot.style.height = window.innerHeight + 'px'; let ctx = window.canvasContext; let scale = window.devicePixelRatio; for (let i = 0; i < length; i++, arrayOffset += renderCommandSize) { @@ -653,13 +653,29 @@ break; } case (CLAY_RENDER_COMMAND_TYPE_SCISSOR_START): { + if (!window.configs) { + window.configs = {} + } + if (!window.configs[renderCommand.id.value]) { + window.configs[renderCommand.id.value] = true; + console.log('scissor', boundingBox.x.value * scale, boundingBox.y.value * scale, boundingBox.width.value * scale, boundingBox.height.value * scale); + } + window.canvasContext.save(); window.canvasContext.beginPath(); window.canvasContext.rect(boundingBox.x.value * scale, boundingBox.y.value * scale, boundingBox.width.value * scale, boundingBox.height.value * scale); window.canvasContext.clip(); + window.canvasContext.closePath(); break; } case (CLAY_RENDER_COMMAND_TYPE_SCISSOR_END): { window.canvasContext.restore(); + if (!window.configs) { + window.configs = {} + } + if (!window.configs[renderCommand.id.value]) { + window.configs[renderCommand.id.value] = true; + console.log('end scissor'); + } break; } case (CLAY_RENDER_COMMAND_TYPE_IMAGE): { diff --git a/examples/clay-official-website/main.c b/examples/clay-official-website/main.c index e053a67..cd22e06 100644 --- a/examples/clay-official-website/main.c +++ b/examples/clay-official-website/main.c @@ -5,7 +5,7 @@ double windowWidth = 1024, windowHeight = 768; float modelPageOneZRotation = 0; -int ACTIVE_RENDERER_INDEX = 0; +int ACTIVE_RENDERER_INDEX = 1; const uint32_t FONT_ID_BODY_16 = 0; const uint32_t FONT_ID_TITLE_56 = 1; @@ -135,7 +135,7 @@ void DeclarativeSyntaxPageDesktop() { CLAY_TEXT(CLAY_ID("SyntaxPageTextSubTitle3"), CLAY_STRING("Create your own library of re-usable components from UI primitives like text, images and rectangles."), CLAY_TEXT_CONFIG(.fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_RED)); }); CLAY_CONTAINER(CLAY_ID("SyntaxPageRightImage"), CLAY_LAYOUT(.sizing = { CLAY_SIZING_PERCENT(0.50) }, .childAlignment = {.x = CLAY_ALIGN_X_CENTER}), { - CLAY_IMAGE(CLAY_ID("SyntaxPageRightImage"), CLAY_LAYOUT(.sizing = { CLAY_SIZING_GROW(.max = 568) }), CLAY_IMAGE_CONFIG(.sourceDimensions = {1136, 1194}, .sourceURL = CLAY_STRING("/clay/images/declarative.png")), {}); + CLAY_IMAGE(CLAY_ID("SyntaxPageRightImageInner"), CLAY_LAYOUT(.sizing = { CLAY_SIZING_GROW(.max = 568) }), CLAY_IMAGE_CONFIG(.sourceDimensions = {1136, 1194}, .sourceURL = CLAY_STRING("/clay/images/declarative.png")), {}); }); }); }); @@ -151,7 +151,7 @@ void DeclarativeSyntaxPageMobile() { CLAY_TEXT(CLAY_ID("SyntaxPageTextSubTitle3"), CLAY_STRING("Create your own library of re-usable components from UI primitives like text, images and rectangles."), CLAY_TEXT_CONFIG(.fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_RED)); }); CLAY_CONTAINER(CLAY_ID("SyntaxPageRightImage"), CLAY_LAYOUT(.sizing = { CLAY_SIZING_GROW() }, .childAlignment = {.x = CLAY_ALIGN_X_CENTER}), { - CLAY_IMAGE(CLAY_ID("SyntaxPageRightImage"), CLAY_LAYOUT(.sizing = { CLAY_SIZING_GROW(.max = 568) }), CLAY_IMAGE_CONFIG(.sourceDimensions = {1136, 1194}, .sourceURL = CLAY_STRING("/clay/images/declarative.png")), {}); + CLAY_IMAGE(CLAY_ID("SyntaxPageRightImageInner"), CLAY_LAYOUT(.sizing = { CLAY_SIZING_GROW(.max = 568) }), CLAY_IMAGE_CONFIG(.sourceDimensions = {1136, 1194}, .sourceURL = CLAY_STRING("/clay/images/declarative.png")), {}); }); }); }