リキ萌
bff899c9c0
brush rendering is now completely client-side. the server only receives edits the client would like to do, in the form of PNG images of chunks, that are then composited onto the wall known issue: it is possible to brush up against the current 256 chunk edit limit pretty easily. I'm not sure it can be solved very easily though. the perfect solution would involve splitting up the interaction into multiple edits, and I tried to do that, but there's a noticable stutter for some reason that I haven't managed to track down yet. so it'll be kinda crap for the time being.
81 lines
2.9 KiB
JavaScript
81 lines
2.9 KiB
JavaScript
import { listen } from "rkgk/framework.js";
|
|
|
|
function numChunksInRectangle(rect, chunkSize) {
|
|
let leftChunk = Math.floor(rect.left / chunkSize);
|
|
let topChunk = Math.floor(rect.top / chunkSize);
|
|
let rightChunk = Math.ceil(rect.right / chunkSize);
|
|
let bottomChunk = Math.ceil(rect.bottom / chunkSize);
|
|
let numX = rightChunk - leftChunk;
|
|
let numY = bottomChunk - topChunk;
|
|
return numX * numY;
|
|
}
|
|
|
|
function* chunksInRectangle(rect, chunkSize) {
|
|
let leftChunk = Math.floor(rect.left / chunkSize);
|
|
let topChunk = Math.floor(rect.top / chunkSize);
|
|
let rightChunk = Math.ceil(rect.right / chunkSize);
|
|
let bottomChunk = Math.ceil(rect.bottom / chunkSize);
|
|
for (let chunkY = topChunk; chunkY < bottomChunk; ++chunkY) {
|
|
for (let chunkX = leftChunk; chunkX < rightChunk; ++chunkX) {
|
|
yield [chunkX, chunkY];
|
|
}
|
|
}
|
|
}
|
|
|
|
export function renderToChunksInArea(layer, renderArea, renderToPixmap) {
|
|
for (let [chunkX, chunkY] of chunksInRectangle(renderArea, layer.chunkSize)) {
|
|
let chunk = layer.getOrCreateChunk(chunkX, chunkY);
|
|
if (chunk == null) continue;
|
|
|
|
let translationX = -chunkX * layer.chunkSize;
|
|
let translationY = -chunkY * layer.chunkSize;
|
|
let result = renderToPixmap(chunk.pixmap, translationX, translationY);
|
|
chunk.markModified();
|
|
if (result.status != "ok") return result;
|
|
}
|
|
|
|
return { status: "ok" };
|
|
}
|
|
|
|
export function dotterRenderArea(wall, dotter) {
|
|
let halfPaintArea = wall.paintArea / 2;
|
|
return {
|
|
left: dotter.toX - halfPaintArea,
|
|
top: dotter.toY - halfPaintArea,
|
|
right: dotter.toX + halfPaintArea,
|
|
bottom: dotter.toY + halfPaintArea,
|
|
};
|
|
}
|
|
|
|
export function selfController(interactionQueue, wall, layer, event) {
|
|
let renderArea = null;
|
|
return {
|
|
async runScribble(renderToPixmap) {
|
|
interactionQueue.push({ kind: "scribble" });
|
|
if (renderArea != null) {
|
|
let numChunksToRender = numChunksInRectangle(renderArea, layer.chunkSize);
|
|
let result = renderToChunksInArea(layer, renderArea, renderToPixmap);
|
|
if (!layer.canFitNewChunks(numChunksToRender)) {
|
|
console.debug("too many chunks rendered; committing interaction early");
|
|
event.earlyCommitInteraction();
|
|
}
|
|
return result;
|
|
} else {
|
|
console.debug("render area is empty, nothing will be rendered");
|
|
}
|
|
return { status: "ok" };
|
|
},
|
|
|
|
async runDotter() {
|
|
let dotter = await event.continueAsDotter();
|
|
interactionQueue.push({
|
|
kind: "dotter",
|
|
from: { x: dotter.fromX, y: dotter.fromY },
|
|
to: { x: dotter.toX, y: dotter.toY },
|
|
num: dotter.num,
|
|
});
|
|
renderArea = dotterRenderArea(wall, dotter);
|
|
return dotter;
|
|
},
|
|
};
|
|
}
|