add basic zooming (lots of fun)

js/cursor.js

@@ -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;

js/main.js

@@ -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");
+		color_pixel(pos, 0, 0, cursor.get_x(), cursor.get_y(), 512, "#000");
-		render(root);
 	}
 
-	render(root);
+	render(pos);
 
 	requestAnimationFrame(main);
 }