From 4769d4c69fb751fb09d76a126f14626569399910 Mon Sep 17 00:00:00 2001 From: crystal heart <> Date: Tue, 4 Jun 2024 19:40:36 +0200 Subject: [PATCH] misc refactors and goodies --- js/main.js | 73 ++++++++---------------------------------------------- js/tree.js | 41 ++++++++++++++++++++++++++++++ 2 files changed, 52 insertions(+), 62 deletions(-) diff --git a/js/main.js b/js/main.js index 39983e0..7e38623 100644 --- a/js/main.js +++ b/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); } } diff --git a/js/tree.js b/js/tree.js index fb0ece5..4547ed2 100644 --- a/js/tree.js +++ b/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); + }); +}