TheZone/clay
1
0
Fork 0
mirror of https://github.com/nicbarker/clay.git synced 2025-01-24 02:16:03 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Improved HTML renderer and official website example

Browse Source
This commit is contained in:
Nic Barker 2024-08-28 11:03:20 +12:00
parent d0694f7144
commit 52b6b0564e
3 changed files with 35 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -220,6 +220,8 @@
window.mouseWheelXThisFrame = 0; window.mouseWheelXThisFrame = 0;
window.mouseWheelYThisFrame = 0; window.mouseWheelYThisFrame = 0;
window.touchDown = false; window.touchDown = false;
window.arrowKeyDownPressedThisFrame = false;
window.arrowKeyUpPressedThisFrame = false;
let zeroTimeout = null; let zeroTimeout = null;
addEventListener("wheel", (event) => { addEventListener("wheel", (event) => {
window.mouseWheelXThisFrame = event.deltaX * 0.1; window.mouseWheelXThisFrame = event.deltaX * 0.1;
@ -261,6 +263,15 @@
window.mouseDown = false; window.mouseDown = false;
}); });
document.addEventListener("keydown", (event) => {
if (event.key === "ArrowDown") {
window.arrowKeyDownPressedThisFrame = true;
}
if (event.key === "ArrowUp") {
window.arrowKeyUpPressedThisFrame = true;
}
});
const importObject = { const importObject = {
clay: { measureTextFunction: (addressOfDimensions, textToMeasure, addressOfConfig) => { clay: { measureTextFunction: (addressOfDimensions, textToMeasure, addressOfConfig) => {
let stringLength = memoryDataView.getUint32(textToMeasure, true); let stringLength = memoryDataView.getUint32(textToMeasure, true);
@ -665,7 +676,7 @@
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, elapsed / 1000); instance.exports.UpdateDrawFrame(scratchSpaceAddress, window.innerWidth, window.innerHeight, window.mouseWheelXThisFrame, window.mouseWheelYThisFrame, window.mousePositionXThisFrame, window.mousePositionYThisFrame, window.touchDown, window.mouseDown, window.arrowKeyDownPressedThisFrame, window.arrowKeyUpPressedThisFrame, elapsed / 1000);
let rendererChanged = activeRendererIndex !== window.previousActiveRendererIndex; let rendererChanged = activeRendererIndex !== window.previousActiveRendererIndex;
switch (activeRendererIndex) { switch (activeRendererIndex) {
case 0: { case 0: {
@ -688,6 +699,8 @@
window.previousActiveRendererIndex = activeRendererIndex; window.previousActiveRendererIndex = activeRendererIndex;
requestAnimationFrame(renderLoop); requestAnimationFrame(renderLoop);
window.mouseDownThisFrame = false; window.mouseDownThisFrame = false;
window.arrowKeyUpPressedThisFrame = false;
window.arrowKeyDownPressedThisFrame = false;
} }
init(); init();
</script> </script>

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

@ -349,7 +349,7 @@ Clay_RenderCommandArray CreateLayout(float lerpValue) {
return Clay_EndLayout((int)windowWidth, (int)windowHeight); return Clay_EndLayout((int)windowWidth, (int)windowHeight);
} }
CLAY_WASM_EXPORT("UpdateDrawFrame") Clay_RenderCommandArray UpdateDrawFrame(float width, float height, float mouseWheelX, float mouseWheelY, float mousePositionX, float mousePositionY, bool isTouchDown, bool isMouseDown, float deltaTime) { CLAY_WASM_EXPORT("UpdateDrawFrame") Clay_RenderCommandArray UpdateDrawFrame(float width, float height, float mouseWheelX, float mouseWheelY, float mousePositionX, float mousePositionY, bool isTouchDown, bool isMouseDown, bool arrowKeyDownPressedThisFrame, bool arrowKeyUpPressedThisFrame, float deltaTime) {
windowWidth = width; windowWidth = width;
windowHeight = height; windowHeight = height;
if (deltaTime == deltaTime) { // NaN propagation can cause pain here if (deltaTime == deltaTime) { // NaN propagation can cause pain here
@ -395,6 +395,18 @@ CLAY_WASM_EXPORT("UpdateDrawFrame") Clay_RenderCommandArray UpdateDrawFrame(floa
} }
} }
if (arrowKeyDownPressedThisFrame) {
Clay_ScrollContainerData scrollContainerData = Clay_GetScrollContainerData(CLAY_ID("OuterScrollContainer"));
if (scrollContainerData.contentDimensions.height > 0) {
scrollContainerData.scrollPosition->y = scrollContainerData.scrollPosition->y - 50;
}
} else if (arrowKeyUpPressedThisFrame) {
Clay_ScrollContainerData scrollContainerData = Clay_GetScrollContainerData(CLAY_ID("OuterScrollContainer"));
if (scrollContainerData.contentDimensions.height > 0) {
scrollContainerData.scrollPosition->y = scrollContainerData.scrollPosition->y + 50;
}
}
Clay_UpdateScrollContainers(isTouchDown, (Clay_Vector2) {mouseWheelX, mouseWheelY}, deltaTime); Clay_UpdateScrollContainers(isTouchDown, (Clay_Vector2) {mouseWheelX, mouseWheelY}, deltaTime);
return CreateLayout(animationLerpValue < 0 ? (animationLerpValue + 1) : (1 - animationLerpValue)); return CreateLayout(animationLerpValue < 0 ? (animationLerpValue + 1) : (1 - animationLerpValue));
//---------------------------------------------------------------------------------- //----------------------------------------------------------------------------------

8
renderers/web/html/clay-html-renderer.html
View File

@ -277,6 +277,14 @@
window.mouseDown = true; window.mouseDown = true;
}); });
document.addEventListener("keydown", (event) => {
if (event.key === "ArrowDown") {
console.log("arrowdown");
}
if (event.key === "ArrowUp") {
console.log("arrowup");
}
});
const importObject = { const importObject = {
clay: { clay: {
measureTextFunction: (addressOfDimensions, textToMeasure, addressOfConfig) => { measureTextFunction: (addressOfDimensions, textToMeasure, addressOfConfig) => {