80 lines
2.5 KiB
TypeScript
80 lines
2.5 KiB
TypeScript
// @ts-ignore
|
|
const {$, doAfterLoad, footer, header, nav} = window.fwdekker;
|
|
|
|
import {GridModel} from "./Model";
|
|
import {Painter} from "./Painter";
|
|
|
|
|
|
// Set up template
|
|
doAfterLoad(() => {
|
|
$("#nav").appendChild(nav("/Tools/Prime Map Generator/"));
|
|
$("#header").appendChild(header({
|
|
title: "Prime Map Generator",
|
|
description: "Visualizes prime numbers"
|
|
}));
|
|
$("#footer").appendChild(footer({
|
|
vcsURL: "https://git.fwdekker.com/tools/prime-map-generator/",
|
|
version: "v%%VERSION_NUMBER%%"
|
|
}));
|
|
$("main").classList.remove("hidden");
|
|
});
|
|
|
|
|
|
doAfterLoad(async () => {
|
|
const canvas = $("#canvas");
|
|
canvas.classList.remove("invisible");
|
|
|
|
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 = $("#gridCols");
|
|
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);
|
|
}
|
|
}
|
|
});
|
|
});
|