morphNon/wynnbuilder-idk
2
0
Fork 1
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Merge pull request #59 from hppeng-wynn/atree-dynamic-disp

Browse source 
fix: atree img display relatively to parent
This commit is contained in:
hppeng-wynn 2022-06-28 00:41:40 -07:00 committed by GitHub
parent 815cbfacd1 1b721cd810
commit 62b01d1ea3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
builder/index.html
View file

@ -618,10 +618,10 @@
</div>
<div class = "col dark-6 rounded-bottom my-3 my-xl-1" id = "atree-dropdown" style = "display:none;">
<div class="row row-cols-1 row-cols-xl-2">
<div class="col border border-semi-light rounded dark-9 hide-scroll" id="atree-ui" style="height: 500px; overflow-y: auto;">
<div class="col border border-semi-light rounded dark-9 hide-scroll" id="atree-ui" style="height: 50vh; overflow-y: auto;">
</div>
<div class="col mx-auto" style="height: 500px; overflow-y: auto;" id="atree-active">
<div class="col mx-auto" style="height: 50vh; overflow-y: auto;" id="atree-active">
</div>
</div>
</div>

42
js/atree.js
View file

@ -53,12 +53,6 @@ const atree_render = new (class extends ComputeNode {
compute_func(input_map) {
if (input_map.size !== 1) { throw "AbilityTreeRenderNode accepts exactly one input (atree)"; }
const [atree] = input_map.values(); // Extract values, pattern match it into size one list and bind to first element
//as of now, we NEED to have the dropdown tab visible/not hidden in order to properly display atree stuff.
// TODO: FIXME! this is a side effect of `px` based rendering.
if (!document.getElementById("toggle-atree").classList.contains("toggleOn")) {
toggle_tab('atree-dropdown');
toggleButton('toggle-atree');
}
//for some reason we have to cast to string
if (atree) { render_AT(document.getElementById("atree-ui"), document.getElementById("atree-active"), atree); }
@ -180,14 +174,10 @@ function render_AT(UI_elem, list_elem, tree) {
let row = document.createElement('div');
row.classList.add("row");
row.id = "atree-row-" + j;
// TODO: do this more dynamically
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 = UI_elem.scrollWidth / 9 + "px";
row.appendChild(col);
}
UI_elem.appendChild(row);
@ -242,7 +232,10 @@ function render_AT(UI_elem, list_elem, tree) {
if (icon === undefined) {
icon = "node";
}
node_elem.style = "background-image: url('../media/atree/"+icon+".png'); background-size: cover; width: 100%; height: 100%;";
let node_img = document.createElement('img');
node_img.src = '../media/atree/'+icon+'.png';
node_img.style = "width: 100%; height: 100%;";
node_elem.appendChild(node_img);
node_elem.classList.add("atree-circle");
// add tooltip
@ -264,7 +257,6 @@ function render_AT(UI_elem, list_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");
active_tooltip.style.maxWidth = UI_elem.getBoundingClientRect().width * .80 + "px";
active_tooltip.style.display = "none";
// tooltip text formatting
@ -319,6 +311,7 @@ function render_AT(UI_elem, list_elem, tree) {
let tooltip = this.children[this.children.length - 1];
tooltip.style.top = this.getBoundingClientRect().bottom + window.scrollY * 1.02 + "px";
tooltip.style.left = this.parentElement.parentElement.getBoundingClientRect().left + (elem.getBoundingClientRect().width * .2 / 2) + "px";
tooltip.style.maxWidth = UI_elem.getBoundingClientRect().width * .95 + "px";
tooltip.style.display = "block";
});
@ -380,8 +373,11 @@ function atree_render_connection(atree_connectors_map) {
for (let i of atree_connectors_map.keys()) {
let connector_info = atree_connectors_map.get(i);
let connector_elem = connector_info.connector;
let connector_img = document.createElement('img');
set_connector_type(connector_info);
connector_elem.style.backgroundImage = "url('../media/atree/connect_"+connector_info.type+".png')";
connector_img.src = '../media/atree/connect_'+connector_info.type+'.png';
connector_img.style = "width: 100%; height: 100%;"
connector_elem.replaceChildren(connector_img);
connector_info.highlight = [0, 0, 0, 0];
console.log(i + ", " + connector_info.type);
let target_elem = document.getElementById("atree-row-" + i.split(",")[0]).children[i.split(",")[1]];
@ -414,7 +410,10 @@ function atree_toggle_state(atree_connectors_map, node_wrapper) {
function atree_update_connector() {
atree_connectors_map.forEach((v) => {
if (v.length != 0) {
v[0].connector.style.backgroundImage = "url('../media/atree/connect_" + v[0].type + ".png')";
let connector_elem = document.createElement("img");
connector_elem.style = "width: 100%; height: 100%;";
connector_elem.src = '../media/atree/connect_' + v[0].type + '.png'
v[0].replaceChildren(connector_elem);
}
});
atree_map.forEach((v) => {
@ -436,6 +435,8 @@ function atree_set_edge(atree_connectors_map, parent, child, state) {
let connector_info = atree_connectors_map.get(connector_label);
let connector_elem = connector_info.connector;
let highlight_state = connector_info.highlight; // left right up down
let connector_img_elem = document.createElement("img");
connector_img_elem.style = "width: 100%; height: 100%;";
const ctype = connector_info.type;
if (ctype === 't' || ctype === 'c') {
// c, t
@ -457,18 +458,21 @@ function atree_set_edge(atree_connectors_map, parent, child, state) {
let render_state = highlight_state.map(x => (x > 0 ? 1 : 0));
let connector_img = atree_parse_connector(render_state, ctype);
connector_img_elem.src = connector_img.img
connector_elem.className = "";
connector_elem.classList.add("rotate-" + connector_img.rotate);
connector_elem.style.backgroundImage = connector_img.img;
connector_elem.replaceChildren(connector_img_elem);
continue;
}
// lol bad overloading, [0] is just the whole state
highlight_state[0] += state_delta;
if (highlight_state[0] > 0) {
connector_elem.style.backgroundImage = "url('../media/atree/highlight_"+ctype+".png')";
connector_img_elem.src = '../media/atree/highlight_'+ctype+'.png';
connector_elem.replaceChildren(connector_img_elem);
}
else {
connector_elem.style.backgroundImage = "url('../media/atree/connect_"+ctype+".png')";
connector_img_elem.src = '../media/atree/connect_'+ctype+'.png';
connector_elem.replaceChildren(connector_img_elem);
}
}
}
@ -503,7 +507,7 @@ function atree_parse_connector(orient, type) {
res += i;
}
if (res === "0000") {
return {img: "url('../media/atree/connect_" + type + ".png')", rotate: 0};
return {img: "../media/atree/connect_" + type + ".png", rotate: 0};
}
let ret;
@ -512,6 +516,6 @@ function atree_parse_connector(orient, type) {
} else {
ret = t_connector_dict[res];
};
ret.img = "url('../media/atree/highlight_" + type + ret.attrib + ".png')";
ret.img = "../media/atree/highlight_" + type + ret.attrib + ".png";
return ret;
};