endernon/wynnbuilder-forked-for-changes
1
0
Fork 0
forked from morphNon/wynnbuilder-idk
Code Pull requests Activity

quick documentation + refactoring to add new param for render_AT()

Browse source
This commit is contained in:
ferricles 2022-06-27 16:49:21 -07:00
parent ebcdbc14fc
commit 2db1a3a336
1 changed files with 18 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
js/atree.js
View file

@ -61,7 +61,7 @@ const atree_render = new (class extends ComputeNode {
}
//for some reason we have to cast to string
if (atree) { render_AT(document.getElementById("atree-ui"), atree); }
if (atree) { render_AT(document.getElementById("atree-ui"), document.getElementById("atree-active"), atree); }
if (document.getElementById("toggle-atree").classList.contains("toggleOn")) {
toggle_tab('atree-dropdown');
@ -101,10 +101,17 @@ function topological_sort_tree(tree, res, mark_state) {
// }
}
function render_AT(elem, tree) {
/** The main function for rendering an ability tree.
*
* @param {Element} UI_elem - the DOM element to draw the atree within.
* @param {Element} list_elem - the DOM element to list selected abilities within.
* @param {*} tree - the ability tree to work with.
*/
function render_AT(UI_elem, list_elem, tree) {
console.log("constructing ability tree UI");
document.getElementById("atree-active").innerHTML = ""; //reset all atree actives - should be done in a more general way later
elem.innerHTML = ""; //reset the atree in the DOM
list_elem.innerHTML = ""; //reset all atree actives - should be done in a more general way later
UI_elem.innerHTML = ""; //reset the atree in the DOM
// add in the "Active" title to atree
let active_row = document.createElement("div");
@ -144,7 +151,7 @@ function render_AT(elem, tree) {
active_row.appendChild(active_word);
active_row.appendChild(active_AP_container);
document.getElementById("atree-active").appendChild(active_row);
list_elem.appendChild(active_row);
let atree_map = new Map();
let atree_connectors_map = new Map()
@ -173,18 +180,17 @@ function render_AT(elem, tree) {
let row = document.createElement('div');
row.classList.add("row");
row.id = "atree-row-" + j;
//was causing atree rows to be 0 height
// TODO: do this more dynamically
row.style.minHeight = elem.scrollWidth / 9 + "px";
//row.style.minHeight = elem.getBoundingClientRect().width / 9 + "px";
row.style.minHeight = UI_elem.scrollWidth / 9 + "px";
//row.style.minHeight = UI_elem.getBoundingClientRect().width / 9 + "px";
for (let k = 0; k < 9; k++) {
col = document.createElement('div');
col.classList.add('col', 'px-0');
col.style.minHeight = elem.scrollWidth / 9 + "px";
col.style.minHeight = UI_elem.scrollWidth / 9 + "px";
row.appendChild(col);
}
elem.appendChild(row);
UI_elem.appendChild(row);
}
for (const _node of tree) {
@ -258,8 +264,7 @@ function render_AT(elem, tree) {
let active_tooltip = document.createElement('div');
active_tooltip.classList.add("rounded-bottom", "dark-4", "border", "p-0", "mx-2", "my-4", "dark-shadow");
//was causing active element boxes to be 0 width
active_tooltip.style.maxWidth = elem.getBoundingClientRect().width * .80 + "px";
active_tooltip.style.maxWidth = UI_elem.getBoundingClientRect().width * .80 + "px";
active_tooltip.style.display = "none";
// tooltip text formatting
@ -288,7 +293,7 @@ function render_AT(elem, tree) {
node_tooltip.style.zIndex = "100";
node_elem.appendChild(node_tooltip);
document.getElementById("atree-active").appendChild(active_tooltip);
list_elem.appendChild(active_tooltip);
node_elem.addEventListener('click', function(e) {
if (e.target !== this && e.target!== this.children[0]) {return;}