64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
// @ts-ignore
|
|
const {$, doAfterLoad} = window.fwdekker;
|
|
|
|
import {GridModel} from "./Model";
|
|
import {Painter} from "./Painter";
|
|
|
|
|
|
doAfterLoad(async () => {
|
|
const canvas = $("#canvas");
|
|
|
|
const resize = () => {
|
|
canvas.width = canvas.clientWidth;
|
|
canvas.height = canvas.clientHeight;
|
|
};
|
|
window.addEventListener("resize", resize, false);
|
|
resize();
|
|
|
|
const painter = new Painter(canvas);
|
|
const model = new GridModel();
|
|
painter.model = model;
|
|
painter.startDrawLoop();
|
|
|
|
const gridCols = $("#grid-cols");
|
|
gridCols.addEventListener("change", () => model.cols = parseInt(gridCols.value));
|
|
|
|
|
|
let dragStart: [number, number] | null = null;
|
|
canvas.addEventListener("mousedown", (event: MouseEvent) => {
|
|
dragStart = [event.clientX, event.clientY];
|
|
});
|
|
document.addEventListener("mouseup", () => {
|
|
dragStart = null;
|
|
});
|
|
document.addEventListener("mousemove", (event: MouseEvent) => {
|
|
if (dragStart === null) return;
|
|
|
|
const moved = [event.clientX - dragStart[0], event.clientY - dragStart[1]];
|
|
if (Math.abs(moved[0]) > painter.scale) {
|
|
const squaresToMove = Math.sign(moved[0]) * Math.floor(Math.abs(moved[0]) / painter.scale);
|
|
painter.scrollX -= squaresToMove;
|
|
dragStart[0] += squaresToMove * painter.scale;
|
|
}
|
|
|
|
if (Math.abs(moved[1]) > painter.scale) {
|
|
const squaresToMove = Math.sign(moved[1]) * Math.floor(Math.abs(moved[1]) / painter.scale);
|
|
painter.scrollY -= squaresToMove;
|
|
dragStart[1] += squaresToMove * painter.scale;
|
|
}
|
|
});
|
|
canvas.addEventListener("wheel", (event: WheelEvent) => {
|
|
event.preventDefault();
|
|
|
|
if (event.ctrlKey) {
|
|
painter.scale -= Math.sign(event.deltaY);
|
|
} else {
|
|
if (event.shiftKey) {
|
|
painter.scrollX += Math.sign(event.deltaY);
|
|
} else {
|
|
painter.scrollY += Math.sign(event.deltaY);
|
|
}
|
|
}
|
|
});
|
|
});
|