misc refactors and goodies

js/main.js

@@ -3,7 +3,7 @@
 import {None, Some} from "./option.js";
 import {canvas, fill_rect, clear} from "./canvas.js";
 import * as cursor from "./cursor.js";
-import {Tree} from "./tree.js";
+import {Tree, draw_tree, find_containing_node} from "./tree.js";
 import * as ui from "./ui.js";
 
 // CONSTANTS
@@ -11,54 +11,15 @@ import * as ui from "./ui.js";
 const MIN_SCALE = 16;
 const MIN_DRAW_RES = 1;
 
-// TREE GRAPHICS
-
-function draw_tree(tree, x, y, size) {
-	fill_rect(x, y, size, size, tree.get_color());
-
-	if (size < MIN_DRAW_RES) { return; }
-
-	tree.get_children()
-		.none(None)
-		.some(c => {
-			const new_size = size / 2;
-			draw_tree(c[0], x, y, new_size);
-			draw_tree(c[1], x + new_size, y, new_size);
-			draw_tree(c[2], x, y + new_size, new_size);
-			draw_tree(c[3], x + new_size, y + new_size, new_size);
-		});
-}
-
-function find_containing_node(node, root_x, root_y, x, y, scale, min_scale) {
-	if (scale <= min_scale) {
-		return node;
-	}
-
-	node.create_children();
-	return node.get_children().none(None).some(c => {
-		let index = 0;
-		scale /= 2;
-		if (x >= scale) {
-			index += 1;
-			root_x += scale;
-			x -= scale;
-		}
-		if (y >= scale) {
-			index += 2;
-			root_y += scale;
-			y -= scale;
-		}
-
-		return find_containing_node(c[index], root_x, root_y, x, y, scale, min_scale);
-	});
-}
 
 function color_pixel(tree, root_x, root_y, x, y, scale, color, min_scale) {
-	const node = find_containing_node(tree, 0, 0, x, y, 512, min_scale);
+	const node = find_containing_node(tree, 0, 0, x, y, 512, min_scale, 16);
 	node.set_color(color);
 }
 
-// MISC
+function zoom(node, x, y, scale) {
+	return find_containing_node(node, 0, 0, x, y, scale, MIN_DRAW_RES, 1);
+}
 
 // TODO move root and pos into state
 const state = {
@@ -68,21 +29,6 @@ const state = {
 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];
-	});
-}
 
 // UI
 
@@ -97,7 +43,7 @@ export function size_button(size) {
 
 function render(tree) {
 	clear("#000000");
-	draw_tree(tree, 0, 0, 512);
+	draw_tree(tree, 0, 0, 512, MIN_DRAW_RES);
 }
 
 
@@ -110,9 +56,12 @@ function init() {
 		}
 	});
 	document.body.addEventListener("keydown", e => {
-		if (e.key === " ") {
+		if (e.key === " " || e.key === "z") {
 			pos.get_parent().some(p => pos = p);
 		}
+		else if (e.key === "x") {
+			pos = zoom(pos, cursor.get_x(), cursor.get_y(), 512);
+		}
 	});
 
 	color_button("white", "#fff");
@@ -131,7 +80,7 @@ function init() {
 
 	ui.br();
 
-	for (let size = 4; size <= 128; size *= 2) {
+	for (let size = 4; size <= 256; size *= 2) {
 		size_button(size);
 	}
 }

js/tree.js

@@ -1,6 +1,7 @@
 // QUADTREE
 
 import {None, Some} from "./option.js";
+import {fill_rect} from "./canvas.js";
 
 export const Kind = {
 	color: "color",
@@ -45,3 +46,43 @@ export function Tree() {
 
 	return node;
 }
+
+export function draw_tree(tree, x, y, size, min_size) {
+	fill_rect(x, y, size, size, tree.get_color());
+
+	if (size < min_size) { return; }
+
+	tree.get_children()
+		.none(None)
+		.some(c => {
+			const new_size = size / 2;
+			draw_tree(c[0], x, y, new_size);
+			draw_tree(c[1], x + new_size, y, new_size);
+			draw_tree(c[2], x, y + new_size, new_size);
+			draw_tree(c[3], x + new_size, y + new_size, new_size);
+		});
+}
+
+export function find_containing_node(node, root_x, root_y, x, y, scale, min_scale, max_depth) {
+	if (scale <= min_scale || max_depth < 1) {
+		return node;
+	}
+
+	node.create_children();
+	return node.get_children().none(None).some(c => {
+		let index = 0;
+		scale /= 2;
+		if (x >= scale) {
+			index += 1;
+			root_x += scale;
+			x -= scale;
+		}
+		if (y >= scale) {
+			index += 2;
+			root_y += scale;
+			y -= scale;
+		}
+
+		return find_containing_node(c[index], root_x, root_y, x, y, scale, min_scale, max_depth - 1);
+	});
+}