add basic zooming (lots of fun)

This commit is contained in:
crystal heart 2024-06-04 15:14:02 +02:00
parent a0d42e7709
commit cae53a5e5d
2 changed files with 36 additions and 5 deletions

View file

@ -15,6 +15,9 @@ function update(e) {
canvas.addEventListener("mousedown", update);
canvas.addEventListener("mouseup", update);
canvas.addEventListener("mousemove", update);
canvas.addEventListener("contextmenu", (e) => {
e.preventDefault();
});
export function get_x() {
return state.x;

View file

@ -6,7 +6,8 @@ import * as cursor from "./cursor.js";
// CONSTANTS
const MIN_SCALE = 4;
const MIN_SCALE = 32;
const MIN_DRAW_RES = 1;
// QUADTREE
@ -52,7 +53,7 @@ function Tree() {
function draw_tree(tree, x, y, size) {
fill_rect(x, y, size, size, tree.get_color());
if (size < MIN_SCALE) { return; }
if (size < MIN_DRAW_RES) { return; }
tree.get_children()
.none(None)
@ -97,6 +98,23 @@ function color_pixel(tree, root_x, root_y, x, y, scale, color) {
// MAIN
const root = Tree();
let pos = root;
function zoom(node, x, y, scale) {
// TODO replace with call to find_containing_node;
// edit that function to allow for max depth param.
let index = 0;
if (x >= scale/2) {
index += 1;
}
if (y >= scale/2) {
index += 2;
}
node.create_children();
return node.get_children().some(c => {
return c[index];
});
}
function render(tree) {
clear("#000000");
@ -109,6 +127,17 @@ function init() {
root.get_children().none(None).some(c => {
c[0].set_color("#f80");
});
canvas.addEventListener("mousedown", e => {
if (e.button === 2) {
pos = zoom(pos, cursor.get_x(), cursor.get_y(), 512);
}
});
document.body.addEventListener("keydown", e => {
if (e.key === " ") {
pos.get_parent().some(p => pos = p);
}
});
console.log(root.to_string());
}
@ -116,11 +145,10 @@ function init() {
function main() {
if (cursor.button_pressed(0)) {
color_pixel(root, 0, 0, cursor.get_x(), cursor.get_y(), 512, "#000");
render(root);
color_pixel(pos, 0, 0, cursor.get_x(), cursor.get_y(), 512, "#000");
}
render(root);
render(pos);
requestAnimationFrame(main);
}