riki/rkgk
riki/rkgk
1
Fork 0
Code Issues 57 Pull requests Projects 1 Activity

introduce tags, structs, and reticles

Browse source 
this was meant to be split into smaller changes, but I realised I edited my existing revision too late.
This commit is contained in:
りき萌 2024-09-08 13:53:29 +02:00
parent 8356b6c750
commit 5b7d9586ea
26 changed files with 1113 additions and 351 deletions
Download patch file Download diff file Expand all files Collapse all files

108
static/canvas-renderer.js
View file

@ -19,7 +19,7 @@ class CanvasRenderer extends HTMLElement {
this.#cursorReportingBehaviour();
this.#panningBehaviour();
this.#zoomingBehaviour();
this.#paintingBehaviour();
this.#interactionBehaviour();
this.addEventListener("contextmenu", (event) => event.preventDefault());
}
@ -388,18 +388,6 @@ class CanvasRenderer extends HTMLElement {
// Behaviours
async #cursorReportingBehaviour() {
while (true) {
let event = await listen([this, "mousemove"]);
let [x, y] = this.viewport.toViewportSpace(
event.clientX - this.clientLeft,
event.offsetY - this.clientTop,
this.getWindowSize(),
);
this.dispatchEvent(Object.assign(new Event(".cursor"), { x, y }));
}
}
sendViewportUpdate() {
this.dispatchEvent(new Event(".viewportUpdate"));
}
@ -443,24 +431,28 @@ class CanvasRenderer extends HTMLElement {
);
}
async #paintingBehaviour() {
const paint = (x, y) => {
let [wallX, wallY] = this.viewport.toViewportSpace(x, y, this.getWindowSize());
this.dispatchEvent(Object.assign(new Event(".paint"), { x: wallX, y: wallY }));
};
async #cursorReportingBehaviour() {
while (true) {
let event = await listen([this, "mousemove"]);
let [x, y] = this.viewport.toViewportSpace(
event.clientX - this.clientLeft,
event.offsetY - this.clientTop,
this.getWindowSize(),
);
this.dispatchEvent(Object.assign(new Event(".cursor"), { x, y }));
}
}
async #interactionBehaviour() {
while (true) {
let mouseDown = await listen([this, "mousedown"]);
if (mouseDown.button == 0) {
paint(mouseDown.offsetX, mouseDown.offsetY);
while (true) {
let event = await listen([window, "mousemove"], [window, "mouseup"]);
if (event.type == "mousemove") {
paint(event.clientX - this.clientLeft, event.offsetY - this.clientTop);
} else if (event.type == "mouseup") {
break;
}
}
let [mouseX, mouseY] = this.viewport.toViewportSpace(
mouseDown.clientX - this.clientLeft,
mouseDown.clientY - this.clientTop,
this.getWindowSize(),
);
notifyInteraction(this, "start", { mouseX, mouseY, num: 0 });
}
}
}
@ -468,6 +460,68 @@ class CanvasRenderer extends HTMLElement {
customElements.define("rkgk-canvas-renderer", CanvasRenderer);
function notifyInteraction(canvasRenderer, kind, fields) {
canvasRenderer.dispatchEvent(
Object.assign(new InteractEvent(canvasRenderer), { interactionKind: kind, ...fields }),
);
}
class InteractEvent extends Event {
constructor(canvasRenderer) {
super(".interact");
this.canvasRenderer = canvasRenderer;
}
continueAsDotter() {
(async () => {
let event = await listen(
[this.canvasRenderer, "mousemove"],
[this.canvasRenderer, "mouseup"],
);
if (event.type == "mousemove") {
let [mouseX, mouseY] = this.canvasRenderer.viewport.toViewportSpace(
event.clientX - this.canvasRenderer.clientLeft,
event.clientY - this.canvasRenderer.clientTop,
this.canvasRenderer.getWindowSize(),
);
notifyInteraction(this.canvasRenderer, "dotter", {
previousX: this.mouseX,
previousY: this.mouseY,
mouseX,
mouseY,
num: this.num + 1,
});
}
if (event.type == "mouseup" && event.button == 0) {
// Break the loop.
return;
}
})();
if (this.previousX != null && this.previousY != null) {
return {
fromX: this.previousX,
fromY: this.previousY,
toX: this.mouseX,
toY: this.mouseY,
num: this.num,
};
} else {
return {
fromX: this.mouseX,
fromY: this.mouseY,
toX: this.mouseX,
toY: this.mouseY,
num: this.num,
};
}
}
}
class Atlas {
static getInitBuffer(chunkSize, nChunks) {
let imageSize = chunkSize * nChunks;