mirror of
https://github.com/nicbarker/clay.git
synced 2025-04-20 05:08:04 +00:00
Updates and remove console logs
This commit is contained in:
parent
a75860ca57
commit
902487638c
@ -271,10 +271,8 @@
|
|||||||
if (event.key === "ArrowUp") {
|
if (event.key === "ArrowUp") {
|
||||||
window.arrowKeyUpPressedThisFrame = true;
|
window.arrowKeyUpPressedThisFrame = true;
|
||||||
}
|
}
|
||||||
console.log(event.key);
|
|
||||||
if (event.key === "d") {
|
if (event.key === "d") {
|
||||||
window.dKeyPressedThisFrame = true;
|
window.dKeyPressedThisFrame = true;
|
||||||
console.log('test');
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -653,13 +651,6 @@
|
|||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case (CLAY_RENDER_COMMAND_TYPE_SCISSOR_START): {
|
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.save();
|
||||||
window.canvasContext.beginPath();
|
window.canvasContext.beginPath();
|
||||||
window.canvasContext.rect(boundingBox.x.value * scale, boundingBox.y.value * scale, boundingBox.width.value * scale, boundingBox.height.value * scale);
|
window.canvasContext.rect(boundingBox.x.value * scale, boundingBox.y.value * scale, boundingBox.width.value * scale, boundingBox.height.value * scale);
|
||||||
@ -669,13 +660,6 @@
|
|||||||
}
|
}
|
||||||
case (CLAY_RENDER_COMMAND_TYPE_SCISSOR_END): {
|
case (CLAY_RENDER_COMMAND_TYPE_SCISSOR_END): {
|
||||||
window.canvasContext.restore();
|
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;
|
break;
|
||||||
}
|
}
|
||||||
case (CLAY_RENDER_COMMAND_TYPE_IMAGE): {
|
case (CLAY_RENDER_COMMAND_TYPE_IMAGE): {
|
||||||
|
@ -111,6 +111,7 @@
|
|||||||
{ name: 'fontSize', type: 'uint16_t' },
|
{ name: 'fontSize', type: 'uint16_t' },
|
||||||
{ name: 'letterSpacing', type: 'uint16_t' },
|
{ name: 'letterSpacing', type: 'uint16_t' },
|
||||||
{ name: 'lineSpacing', type: 'uint16_t' },
|
{ name: 'lineSpacing', type: 'uint16_t' },
|
||||||
|
{ name: 'wrapMode', type: 'uint32_t' },
|
||||||
{ name: 'disablePointerEvents', type: 'uint8_t' }
|
{ name: 'disablePointerEvents', type: 'uint8_t' }
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
@ -259,6 +260,18 @@
|
|||||||
window.mouseDown = true;
|
window.mouseDown = true;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
document.addEventListener("keydown", (event) => {
|
||||||
|
if (event.key === "ArrowDown") {
|
||||||
|
window.arrowKeyDownPressedThisFrame = true;
|
||||||
|
}
|
||||||
|
if (event.key === "ArrowUp") {
|
||||||
|
window.arrowKeyUpPressedThisFrame = true;
|
||||||
|
}
|
||||||
|
if (event.key === "d") {
|
||||||
|
window.dKeyPressedThisFrame = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
const importObject = {
|
const importObject = {
|
||||||
clay: {
|
clay: {
|
||||||
measureTextFunction: (addressOfDimensions, textToMeasure, addressOfConfig) => {
|
measureTextFunction: (addressOfDimensions, textToMeasure, addressOfConfig) => {
|
||||||
@ -288,26 +301,22 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function renderLoopCanvas() {
|
function renderLoopCanvas() {
|
||||||
// Note: Rendering to canvas needs to be scaled up by window.devicePixelRatio in both width and height.
|
// Note: Rendering to canvas needs to be scaled up by window.devicePixelRatio in both width and height.
|
||||||
// e.g. if we're working on a device where devicePixelRatio is 2, we need to render
|
// e.g. if we're working on a device where devicePixelRatio is 2, we need to render
|
||||||
// everything at width^2 x height^2 resolution, then scale back down with css to get the correct pixel density.
|
// everything at width^2 x height^2 resolution, then scale back down with css to get the correct pixel density.
|
||||||
let capacity = memoryDataView.getUint32(scratchSpaceAddress, true);
|
let capacity = memoryDataView.getUint32(scratchSpaceAddress, true);
|
||||||
let length = memoryDataView.getUint32(scratchSpaceAddress + 4, true);
|
let length = memoryDataView.getUint32(scratchSpaceAddress + 4, true);
|
||||||
let arrayOffset = memoryDataView.getUint32(scratchSpaceAddress + 8, true);
|
let arrayOffset = memoryDataView.getUint32(scratchSpaceAddress + 8, true);
|
||||||
if (window.previousWidth !== window.innerWidth) {
|
window.canvasRoot.width = window.innerWidth * window.devicePixelRatio;
|
||||||
window.canvasRoot.width = window.innerWidth * window.devicePixelRatio;
|
window.canvasRoot.height = window.innerHeight * window.devicePixelRatio;
|
||||||
window.previousWidth = window.innerWidth;
|
window.canvasRoot.style.width = window.innerWidth + 'px';
|
||||||
}
|
window.canvasRoot.style.height = window.innerHeight + 'px';
|
||||||
if (window.previousHeight !== window.innerHeight) {
|
|
||||||
window.canvasRoot.height = window.innerHeight * window.devicePixelRatio;
|
|
||||||
window.previousHeight = window.innerHeight;
|
|
||||||
}
|
|
||||||
let ctx = window.canvasContext;
|
let ctx = window.canvasContext;
|
||||||
let scale = window.devicePixelRatio;
|
let scale = window.devicePixelRatio;
|
||||||
for (let i = 0; i < length; i++, arrayOffset += renderCommandSize) {
|
for (let i = 0; i < length; i++, arrayOffset += renderCommandSize) {
|
||||||
let renderCommand = readStructAtAddress(arrayOffset, renderCommandDefinition);
|
let renderCommand = readStructAtAddress(arrayOffset, renderCommandDefinition);
|
||||||
let boundingBox = renderCommand.boundingBox;
|
let boundingBox = renderCommand.boundingBox;
|
||||||
switch (renderCommand.commandType.value) {
|
switch(renderCommand.commandType.value) {
|
||||||
case (CLAY_RENDER_COMMAND_TYPE_NONE): {
|
case (CLAY_RENDER_COMMAND_TYPE_NONE): {
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
@ -315,7 +324,7 @@
|
|||||||
let config = readStructAtAddress(renderCommand.config.value, rectangleConfigDefinition);
|
let config = readStructAtAddress(renderCommand.config.value, rectangleConfigDefinition);
|
||||||
let color = config.color;
|
let color = config.color;
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
window.canvasContext.fillStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value})`;
|
window.canvasContext.fillStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`;
|
||||||
window.canvasContext.roundRect(
|
window.canvasContext.roundRect(
|
||||||
boundingBox.x.value * scale, // x
|
boundingBox.x.value * scale, // x
|
||||||
boundingBox.y.value * scale, // y
|
boundingBox.y.value * scale, // y
|
||||||
@ -326,7 +335,8 @@
|
|||||||
ctx.closePath();
|
ctx.closePath();
|
||||||
// Handle link clicks
|
// Handle link clicks
|
||||||
let linkContents = config.link.length.value > 0 ? textDecoder.decode(new Uint8Array(memoryDataView.buffer.slice(config.link.chars.value, config.link.chars.value + config.link.length.value))) : 0;
|
let linkContents = config.link.length.value > 0 ? textDecoder.decode(new Uint8Array(memoryDataView.buffer.slice(config.link.chars.value, config.link.chars.value + config.link.length.value))) : 0;
|
||||||
if (linkContents.length > 0 && (window.mouseDown || window.touchDown) && instance.exports.Clay_PointerOver(renderCommand.id.value)) {
|
memoryDataView.setUint32(0, renderCommand.id.value, true);
|
||||||
|
if (linkContents.length > 0 && (window.mouseDownThisFrame || window.touchDown) && instance.exports.Clay_PointerOver(0)) {
|
||||||
window.location.href = linkContents;
|
window.location.href = linkContents;
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
@ -342,7 +352,7 @@
|
|||||||
ctx.moveTo((boundingBox.x.value + halfLineWidth) * scale, (boundingBox.y.value + config.cornerRadius.topLeft.value + halfLineWidth) * scale);
|
ctx.moveTo((boundingBox.x.value + halfLineWidth) * scale, (boundingBox.y.value + config.cornerRadius.topLeft.value + halfLineWidth) * scale);
|
||||||
let color = config.top.color;
|
let color = config.top.color;
|
||||||
ctx.lineWidth = lineWidth * scale;
|
ctx.lineWidth = lineWidth * scale;
|
||||||
ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value})`;
|
ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`;
|
||||||
ctx.arcTo((boundingBox.x.value + halfLineWidth) * scale, (boundingBox.y.value + halfLineWidth) * scale, (boundingBox.x.value + config.cornerRadius.topLeft.value + halfLineWidth) * scale, (boundingBox.y.value + halfLineWidth) * scale, config.cornerRadius.topLeft.value * scale);
|
ctx.arcTo((boundingBox.x.value + halfLineWidth) * scale, (boundingBox.y.value + halfLineWidth) * scale, (boundingBox.x.value + config.cornerRadius.topLeft.value + halfLineWidth) * scale, (boundingBox.y.value + halfLineWidth) * scale, config.cornerRadius.topLeft.value * scale);
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
}
|
}
|
||||||
@ -352,7 +362,7 @@
|
|||||||
let halfLineWidth = lineWidth / 2;
|
let halfLineWidth = lineWidth / 2;
|
||||||
let color = config.top.color;
|
let color = config.top.color;
|
||||||
ctx.lineWidth = lineWidth * scale;
|
ctx.lineWidth = lineWidth * scale;
|
||||||
ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value})`;
|
ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`;
|
||||||
ctx.moveTo((boundingBox.x.value + config.cornerRadius.topLeft.value + halfLineWidth) * scale, (boundingBox.y.value + halfLineWidth) * scale);
|
ctx.moveTo((boundingBox.x.value + config.cornerRadius.topLeft.value + halfLineWidth) * scale, (boundingBox.y.value + halfLineWidth) * scale);
|
||||||
ctx.lineTo((boundingBox.x.value + boundingBox.width.value - config.cornerRadius.topRight.value - halfLineWidth) * scale, (boundingBox.y.value + halfLineWidth) * scale);
|
ctx.lineTo((boundingBox.x.value + boundingBox.width.value - config.cornerRadius.topRight.value - halfLineWidth) * scale, (boundingBox.y.value + halfLineWidth) * scale);
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
@ -364,7 +374,7 @@
|
|||||||
ctx.moveTo((boundingBox.x.value + boundingBox.width.value - config.cornerRadius.topRight.value - halfLineWidth) * scale, (boundingBox.y.value + halfLineWidth) * scale);
|
ctx.moveTo((boundingBox.x.value + boundingBox.width.value - config.cornerRadius.topRight.value - halfLineWidth) * scale, (boundingBox.y.value + halfLineWidth) * scale);
|
||||||
let color = config.top.color;
|
let color = config.top.color;
|
||||||
ctx.lineWidth = lineWidth * scale;
|
ctx.lineWidth = lineWidth * scale;
|
||||||
ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value})`;
|
ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`;
|
||||||
ctx.arcTo((boundingBox.x.value + boundingBox.width.value - halfLineWidth) * scale, (boundingBox.y.value + halfLineWidth) * scale, (boundingBox.x.value + boundingBox.width.value - halfLineWidth) * scale, (boundingBox.y.value + config.cornerRadius.topRight.value + halfLineWidth) * scale, config.cornerRadius.topRight.value * scale);
|
ctx.arcTo((boundingBox.x.value + boundingBox.width.value - halfLineWidth) * scale, (boundingBox.y.value + halfLineWidth) * scale, (boundingBox.x.value + boundingBox.width.value - halfLineWidth) * scale, (boundingBox.y.value + config.cornerRadius.topRight.value + halfLineWidth) * scale, config.cornerRadius.topRight.value * scale);
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
}
|
}
|
||||||
@ -374,7 +384,7 @@
|
|||||||
let lineWidth = config.right.width.value;
|
let lineWidth = config.right.width.value;
|
||||||
let halfLineWidth = lineWidth / 2;
|
let halfLineWidth = lineWidth / 2;
|
||||||
ctx.lineWidth = lineWidth * scale;
|
ctx.lineWidth = lineWidth * scale;
|
||||||
ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value})`;
|
ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`;
|
||||||
ctx.moveTo((boundingBox.x.value + boundingBox.width.value - halfLineWidth) * scale, (boundingBox.y.value + config.cornerRadius.topRight.value + halfLineWidth) * scale);
|
ctx.moveTo((boundingBox.x.value + boundingBox.width.value - halfLineWidth) * scale, (boundingBox.y.value + config.cornerRadius.topRight.value + halfLineWidth) * scale);
|
||||||
ctx.lineTo((boundingBox.x.value + boundingBox.width.value - halfLineWidth) * scale, (boundingBox.y.value + boundingBox.height.value - config.cornerRadius.topRight.value - halfLineWidth) * scale);
|
ctx.lineTo((boundingBox.x.value + boundingBox.width.value - halfLineWidth) * scale, (boundingBox.y.value + boundingBox.height.value - config.cornerRadius.topRight.value - halfLineWidth) * scale);
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
@ -386,7 +396,7 @@
|
|||||||
let halfLineWidth = lineWidth / 2;
|
let halfLineWidth = lineWidth / 2;
|
||||||
ctx.moveTo((boundingBox.x.value + boundingBox.width.value - halfLineWidth) * scale, (boundingBox.y.value + boundingBox.height.value - config.cornerRadius.bottomRight.value - halfLineWidth) * scale);
|
ctx.moveTo((boundingBox.x.value + boundingBox.width.value - halfLineWidth) * scale, (boundingBox.y.value + boundingBox.height.value - config.cornerRadius.bottomRight.value - halfLineWidth) * scale);
|
||||||
ctx.lineWidth = lineWidth * scale;
|
ctx.lineWidth = lineWidth * scale;
|
||||||
ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value})`;
|
ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`;
|
||||||
ctx.arcTo((boundingBox.x.value + boundingBox.width.value - halfLineWidth) * scale, (boundingBox.y.value + boundingBox.height.value - halfLineWidth) * scale, (boundingBox.x.value + boundingBox.width.value - config.cornerRadius.bottomRight.value - halfLineWidth) * scale, (boundingBox.y.value + boundingBox.height.value - halfLineWidth) * scale, config.cornerRadius.bottomRight.value * scale);
|
ctx.arcTo((boundingBox.x.value + boundingBox.width.value - halfLineWidth) * scale, (boundingBox.y.value + boundingBox.height.value - halfLineWidth) * scale, (boundingBox.x.value + boundingBox.width.value - config.cornerRadius.bottomRight.value - halfLineWidth) * scale, (boundingBox.y.value + boundingBox.height.value - halfLineWidth) * scale, config.cornerRadius.bottomRight.value * scale);
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
}
|
}
|
||||||
@ -396,7 +406,7 @@
|
|||||||
let lineWidth = config.bottom.width.value;
|
let lineWidth = config.bottom.width.value;
|
||||||
let halfLineWidth = lineWidth / 2;
|
let halfLineWidth = lineWidth / 2;
|
||||||
ctx.lineWidth = lineWidth * scale;
|
ctx.lineWidth = lineWidth * scale;
|
||||||
ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value})`;
|
ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`;
|
||||||
ctx.moveTo((boundingBox.x.value + config.cornerRadius.bottomLeft.value + halfLineWidth) * scale, (boundingBox.y.value + boundingBox.height.value - halfLineWidth) * scale);
|
ctx.moveTo((boundingBox.x.value + config.cornerRadius.bottomLeft.value + halfLineWidth) * scale, (boundingBox.y.value + boundingBox.height.value - halfLineWidth) * scale);
|
||||||
ctx.lineTo((boundingBox.x.value + boundingBox.width.value - config.cornerRadius.bottomRight.value - halfLineWidth) * scale, (boundingBox.y.value + boundingBox.height.value - halfLineWidth) * scale);
|
ctx.lineTo((boundingBox.x.value + boundingBox.width.value - config.cornerRadius.bottomRight.value - halfLineWidth) * scale, (boundingBox.y.value + boundingBox.height.value - halfLineWidth) * scale);
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
@ -408,7 +418,7 @@
|
|||||||
let halfLineWidth = lineWidth / 2;
|
let halfLineWidth = lineWidth / 2;
|
||||||
ctx.moveTo((boundingBox.x.value + config.cornerRadius.bottomLeft.value + halfLineWidth) * scale, (boundingBox.y.value + boundingBox.height.value - halfLineWidth) * scale);
|
ctx.moveTo((boundingBox.x.value + config.cornerRadius.bottomLeft.value + halfLineWidth) * scale, (boundingBox.y.value + boundingBox.height.value - halfLineWidth) * scale);
|
||||||
ctx.lineWidth = lineWidth * scale;
|
ctx.lineWidth = lineWidth * scale;
|
||||||
ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value})`;
|
ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`;
|
||||||
ctx.arcTo((boundingBox.x.value + halfLineWidth) * scale, (boundingBox.y.value + boundingBox.height.value - halfLineWidth) * scale, (boundingBox.x.value + halfLineWidth) * scale, (boundingBox.y.value + boundingBox.height.value - config.cornerRadius.bottomLeft.value - halfLineWidth) * scale, config.cornerRadius.bottomLeft.value * scale);
|
ctx.arcTo((boundingBox.x.value + halfLineWidth) * scale, (boundingBox.y.value + boundingBox.height.value - halfLineWidth) * scale, (boundingBox.x.value + halfLineWidth) * scale, (boundingBox.y.value + boundingBox.height.value - config.cornerRadius.bottomLeft.value - halfLineWidth) * scale, config.cornerRadius.bottomLeft.value * scale);
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
}
|
}
|
||||||
@ -418,7 +428,7 @@
|
|||||||
let lineWidth = config.left.width.value;
|
let lineWidth = config.left.width.value;
|
||||||
let halfLineWidth = lineWidth / 2;
|
let halfLineWidth = lineWidth / 2;
|
||||||
ctx.lineWidth = lineWidth * scale;
|
ctx.lineWidth = lineWidth * scale;
|
||||||
ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value})`;
|
ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`;
|
||||||
ctx.moveTo((boundingBox.x.value + halfLineWidth) * scale, (boundingBox.y.value + boundingBox.height.value - config.cornerRadius.bottomLeft.value - halfLineWidth) * scale);
|
ctx.moveTo((boundingBox.x.value + halfLineWidth) * scale, (boundingBox.y.value + boundingBox.height.value - config.cornerRadius.bottomLeft.value - halfLineWidth) * scale);
|
||||||
ctx.lineTo((boundingBox.x.value + halfLineWidth) * scale, (boundingBox.y.value + config.cornerRadius.bottomRight.value + halfLineWidth) * scale);
|
ctx.lineTo((boundingBox.x.value + halfLineWidth) * scale, (boundingBox.y.value + config.cornerRadius.bottomRight.value + halfLineWidth) * scale);
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
@ -434,14 +444,16 @@
|
|||||||
ctx.font = `${fontSize}px ${fontsById[config.fontId.value]}`;
|
ctx.font = `${fontSize}px ${fontsById[config.fontId.value]}`;
|
||||||
let color = config.textColor;
|
let color = config.textColor;
|
||||||
ctx.textBaseline = 'middle';
|
ctx.textBaseline = 'middle';
|
||||||
ctx.fillStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value})`;
|
ctx.fillStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`;
|
||||||
ctx.fillText(textDecoder.decode(stringContents), boundingBox.x.value * scale, (boundingBox.y.value + boundingBox.height.value / 2 + 1) * scale);
|
ctx.fillText(textDecoder.decode(stringContents), boundingBox.x.value * scale, (boundingBox.y.value + boundingBox.height.value / 2 + 1) * scale);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case (CLAY_RENDER_COMMAND_TYPE_SCISSOR_START): {
|
case (CLAY_RENDER_COMMAND_TYPE_SCISSOR_START): {
|
||||||
|
window.canvasContext.save();
|
||||||
window.canvasContext.beginPath();
|
window.canvasContext.beginPath();
|
||||||
window.canvasContext.rect(boundingBox.x.value * scale, boundingBox.y.value * scale, boundingBox.width.value * scale, boundingBox.height.value * scale);
|
window.canvasContext.rect(boundingBox.x.value * scale, boundingBox.y.value * scale, boundingBox.width.value * scale, boundingBox.height.value * scale);
|
||||||
window.canvasContext.clip();
|
window.canvasContext.clip();
|
||||||
|
window.canvasContext.closePath();
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case (CLAY_RENDER_COMMAND_TYPE_SCISSOR_END): {
|
case (CLAY_RENDER_COMMAND_TYPE_SCISSOR_END): {
|
||||||
|
@ -51,7 +51,7 @@
|
|||||||
|
|
||||||
.text {
|
.text {
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
white-space: nowrap;
|
white-space: pre;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
@ -279,12 +279,13 @@
|
|||||||
|
|
||||||
document.addEventListener("keydown", (event) => {
|
document.addEventListener("keydown", (event) => {
|
||||||
if (event.key === "ArrowDown") {
|
if (event.key === "ArrowDown") {
|
||||||
console.log("arrowdown");
|
window.arrowKeyDownPressedThisFrame = true;
|
||||||
}
|
}
|
||||||
if (event.key === "ArrowUp") {
|
if (event.key === "ArrowUp") {
|
||||||
console.log("arrowup");
|
window.arrowKeyUpPressedThisFrame = true;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const importObject = {
|
const importObject = {
|
||||||
clay: {
|
clay: {
|
||||||
measureTextFunction: (addressOfDimensions, textToMeasure, addressOfConfig) => {
|
measureTextFunction: (addressOfDimensions, textToMeasure, addressOfConfig) => {
|
||||||
@ -361,7 +362,7 @@
|
|||||||
let elementData = elementCache[renderCommand.id.value];
|
let elementData = elementCache[renderCommand.id.value];
|
||||||
element = elementData.element;
|
element = elementData.element;
|
||||||
if (Array.prototype.indexOf.call(parentElement.element.children, element) !== parentElement.nextElementIndex) {
|
if (Array.prototype.indexOf.call(parentElement.element.children, element) !== parentElement.nextElementIndex) {
|
||||||
if (parentElement.nextElementIndex === 0) {
|
if (parentElement.nextElementIndex === 0 || !parentElement.element.childNodes[parentElement.nextElementIndex - 1]) {
|
||||||
parentElement.element.insertAdjacentElement('afterbegin', element);
|
parentElement.element.insertAdjacentElement('afterbegin', element);
|
||||||
} else {
|
} else {
|
||||||
parentElement.element.childNodes[parentElement.nextElementIndex - 1].insertAdjacentElement('afterend', element);
|
parentElement.element.childNodes[parentElement.nextElementIndex - 1].insertAdjacentElement('afterend', element);
|
||||||
@ -390,7 +391,8 @@
|
|||||||
let config = readStructAtAddress(renderCommand.config.value, rectangleConfigDefinition);
|
let config = readStructAtAddress(renderCommand.config.value, rectangleConfigDefinition);
|
||||||
let configMemory = new Uint8Array(memoryDataView.buffer.slice(renderCommand.config.value, renderCommand.config.value + config.__size));
|
let configMemory = new Uint8Array(memoryDataView.buffer.slice(renderCommand.config.value, renderCommand.config.value + config.__size));
|
||||||
let linkContents = config.link.length.value > 0 ? textDecoder.decode(new Uint8Array(memoryDataView.buffer.slice(config.link.chars.value, config.link.chars.value + config.link.length.value))) : 0;
|
let linkContents = config.link.length.value > 0 ? textDecoder.decode(new Uint8Array(memoryDataView.buffer.slice(config.link.chars.value, config.link.chars.value + config.link.length.value))) : 0;
|
||||||
if (linkContents.length > 0 && (window.mouseDownThisFrame || window.touchDown) && instance.exports.Clay_PointerOver(renderCommand.id.value)) {
|
memoryDataView.setUint32(0, renderCommand.id.value, true);
|
||||||
|
if (linkContents.length > 0 && (window.mouseDownThisFrame || window.touchDown) && instance.exports.Clay_PointerOver(0)) {
|
||||||
window.location.href = linkContents;
|
window.location.href = linkContents;
|
||||||
}
|
}
|
||||||
if (!dirty && !MemoryIsDifferent(configMemory, elementData.previousMemoryConfig, config.__size)) {
|
if (!dirty && !MemoryIsDifferent(configMemory, elementData.previousMemoryConfig, config.__size)) {
|
||||||
|
Loading…
Reference in New Issue
Block a user