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

fix: atree img display relatively to parent

Browse source
This commit is contained in:
reschan 2022-06-28 14:10:25 +07:00
parent 815cbfacd1
commit 881467cf0b
2 changed files with 24 additions and 14 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>
<div class = "col dark-6 rounded-bottom my-3 my-xl-1" id = "atree-dropdown" style = "display:none;"> <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="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>
<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> </div>
</div> </div>

34
js/atree.js
View file

@ -180,14 +180,10 @@ function render_AT(UI_elem, list_elem, tree) {
let row = document.createElement('div'); let row = document.createElement('div');
row.classList.add("row"); row.classList.add("row");
row.id = "atree-row-" + j; 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++) { for (let k = 0; k < 9; k++) {
col = document.createElement('div'); col = document.createElement('div');
col.classList.add('col', 'px-0'); col.classList.add('col', 'px-0');
col.style.minHeight = UI_elem.scrollWidth / 9 + "px";
row.appendChild(col); row.appendChild(col);
} }
UI_elem.appendChild(row); UI_elem.appendChild(row);
@ -242,7 +238,10 @@ function render_AT(UI_elem, list_elem, tree) {
if (icon === undefined) { if (icon === undefined) {
icon = "node"; 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"); node_elem.classList.add("atree-circle");
// add tooltip // add tooltip
@ -380,8 +379,11 @@ function atree_render_connection(atree_connectors_map) {
for (let i of atree_connectors_map.keys()) { for (let i of atree_connectors_map.keys()) {
let connector_info = atree_connectors_map.get(i); let connector_info = atree_connectors_map.get(i);
let connector_elem = connector_info.connector; let connector_elem = connector_info.connector;
let connector_img = document.createElement('img');
set_connector_type(connector_info); 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]; connector_info.highlight = [0, 0, 0, 0];
console.log(i + ", " + connector_info.type); console.log(i + ", " + connector_info.type);
let target_elem = document.getElementById("atree-row-" + i.split(",")[0]).children[i.split(",")[1]]; let target_elem = document.getElementById("atree-row-" + i.split(",")[0]).children[i.split(",")[1]];
@ -414,7 +416,10 @@ function atree_toggle_state(atree_connectors_map, node_wrapper) {
function atree_update_connector() { function atree_update_connector() {
atree_connectors_map.forEach((v) => { atree_connectors_map.forEach((v) => {
if (v.length != 0) { 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) => { atree_map.forEach((v) => {
@ -436,6 +441,8 @@ function atree_set_edge(atree_connectors_map, parent, child, state) {
let connector_info = atree_connectors_map.get(connector_label); let connector_info = atree_connectors_map.get(connector_label);
let connector_elem = connector_info.connector; let connector_elem = connector_info.connector;
let highlight_state = connector_info.highlight; // left right up down 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; const ctype = connector_info.type;
if (ctype === 't' || ctype === 'c') { if (ctype === 't' || ctype === 'c') {
// c, t // c, t
@ -457,18 +464,21 @@ function atree_set_edge(atree_connectors_map, parent, child, state) {
let render_state = highlight_state.map(x => (x > 0 ? 1 : 0)); let render_state = highlight_state.map(x => (x > 0 ? 1 : 0));
let connector_img = atree_parse_connector(render_state, ctype); let connector_img = atree_parse_connector(render_state, ctype);
connector_img_elem.src = connector_img.img
connector_elem.className = ""; connector_elem.className = "";
connector_elem.classList.add("rotate-" + connector_img.rotate); connector_elem.classList.add("rotate-" + connector_img.rotate);
connector_elem.style.backgroundImage = connector_img.img; connector_elem.replaceChildren(connector_img_elem);
continue; continue;
} }
// lol bad overloading, [0] is just the whole state // lol bad overloading, [0] is just the whole state
highlight_state[0] += state_delta; highlight_state[0] += state_delta;
if (highlight_state[0] > 0) { 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 { 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 +513,7 @@ function atree_parse_connector(orient, type) {
res += i; res += i;
} }
if (res === "0000") { if (res === "0000") {
return {img: "url('../media/atree/connect_" + type + ".png')", rotate: 0}; return {img: "../media/atree/connect_" + type + ".png", rotate: 0};
} }
let ret; let ret;
@ -512,6 +522,6 @@ function atree_parse_connector(orient, type) {
} else { } else {
ret = t_connector_dict[res]; 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; return ret;
}; };