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

fix: auto connector logic

Browse source
This commit is contained in:
reschan 2022-06-24 09:36:50 +07:00
parent bb98b2c5e4
commit fe3445c16b
1 changed files with 62 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

116
js/display_atree.js
View file

@ -1,4 +1,5 @@
// placeholder name, follow new schema let atree_map;
let atree_connectors_map;
function construct_AT(elem, tree) { function construct_AT(elem, tree) {
console.log("constructing ability tree UI"); console.log("constructing ability tree UI");
document.getElementById("atree-active").innerHTML = ""; //reset all atree actives - should be done in a more general way later document.getElementById("atree-active").innerHTML = ""; //reset all atree actives - should be done in a more general way later
@ -10,6 +11,12 @@ function construct_AT(elem, tree) {
active_row.textContent = "Active:"; active_row.textContent = "Active:";
document.getElementById("atree-active").appendChild(active_row); document.getElementById("atree-active").appendChild(active_row);
atree_map = new Map();
atree_connectors_map = new Map()
for (let i of tree) {
atree_map.set(i.display_name, {display: i.display, parents: i.parents, connectors: []});
}
for (let i = 0; i < tree.length; i++) { for (let i = 0; i < tree.length; i++) {
let node = tree[i]; let node = tree[i];
@ -31,12 +38,13 @@ function construct_AT(elem, tree) {
row.style.minHeight = elem.scrollWidth / 9 + "px"; row.style.minHeight = elem.scrollWidth / 9 + "px";
//row.style.minHeight = elem.getBoundingClientRect().width / 9 + "px"; //row.style.minHeight = 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 = elem.scrollWidth / 9 + "px"; col.style.minHeight = elem.scrollWidth / 9 + "px";
row.appendChild(col); row.appendChild(col);
atree_connectors_map.set(j + "," + k, [])
}; };
elem.appendChild(row); elem.appendChild(row);
}; };
@ -45,49 +53,47 @@ function construct_AT(elem, tree) {
} }
let connector_list = [] let connector_list = [];
// create connectors based on parent location // create connectors based on parent location
for (let parent of node.parents) { for (let parent of node.parents) {
let parent_node = tree.find(object => { let parent_node = atree_map.get(parent);
return object.display_name === parent;
});
let connect_elem = document.createElement("div"); let connect_elem = document.createElement("div");
connect_elem.style = "background-size: cover; width: 100%; height: 100%;"; connect_elem.style = "background-size: cover; width: 100%; height: 100%;";
// connect up // connect up
for (let i = node.display.row - 1; i > parent_node.display.row; i--) { for (let i = node.display.row - 1; i > parent_node.display.row; i--) {
let connector = connect_elem.cloneNode() let connector = connect_elem.cloneNode();
connector.style.backgroundImage = "url('../media/atree/connect_line.png')"; connector.style.backgroundImage = "url('../media/atree/connect_line.png')";
connector.id = "r" + i + "-c" + node.display.col + "-line" atree_map.get(node.display_name).connectors.push(i + "," + node.display.col);
document.getElementById("atree-row-" + i).children[node.display.col].appendChild(connector); atree_connectors_map.get(i + "," + node.display.col).push({connector: connector, type: "line"});
resolve_connector(document.getElementById("atree-row-" + i).children[node.display.col], node); resolve_connector(i + "," + node.display.col, node);
} }
// connect horizontally // connect horizontally
let min = Math.min(parent_node.display.col, node.display.col); let min = Math.min(parent_node.display.col, node.display.col);
let max = Math.max(parent_node.display.col, node.display.col); let max = Math.max(parent_node.display.col, node.display.col);
for (let i = min + 1; i < max; i++) { for (let i = min + 1; i < max; i++) {
let connector = connect_elem.cloneNode() let connector = connect_elem.cloneNode();
connector.style.backgroundImage = "url('../media/atree/connect_line.png')"; connector.style.backgroundImage = "url('../media/atree/connect_line.png')";
connector.classList.add("rotate-90"); connector.classList.add("rotate-90");
connector.id = "r" + parent_node.display.row + "-c" + i + "-line" atree_map.get(node.display_name).connectors.push(parent_node.display.row + "," + i);
document.getElementById("atree-row-" + parent_node.display.row).children[i].appendChild(connector); atree_connectors_map.get(parent_node.display.row + "," + i).push({connector: connector, type: "line"});
resolve_connector(document.getElementById("atree-row-" + parent_node.display.row).children[i], node); resolve_connector(parent_node.display.row + "," + i, node);
} }
// connect corners // connect corners
if (parent_node.display.row != node.display.row && parent_node.display.col != node.display.col) { if (parent_node.display.row != node.display.row && parent_node.display.col != node.display.col) {
let connector = connect_elem.cloneNode() let connector = connect_elem.cloneNode();
connector.style.backgroundImage = "url('../media/atree/connect_angle.png')"; connector.style.backgroundImage = "url('../media/atree/connect_angle.png')";
connector.id = "r" + parent_node.display.row + "-c" + node.display.col + "-angle" atree_map.get(node.display_name).connectors.push(parent_node.display.row + "," + node.display.col);
document.getElementById("atree-row-" + parent_node.display.row).children[node.display.col].appendChild(connector); atree_connectors_map.get(parent_node.display.row + "," + node.display.col).push({connector: connector, type: "angle"});
if (parent_node.display.col > node.display.col) { if (parent_node.display.col > node.display.col) {
connector.classList.add("rotate-180"); connector.classList.add("rotate-180");
} }
else {// if (parent_node.display.col < node.display.col && (parent_node.display.row != node.display.row)) { else {// if (parent_node.display.col < node.display.col && (parent_node.display.row != node.display.row)) {
connector.classList.add("rotate-270"); connector.classList.add("rotate-270");
} }
resolve_connector(document.getElementById("atree-row-" + parent_node.display.row).children[node.display.col], node); resolve_connector(parent_node.display.row + "," + node.display.col, node);
} }
} }
@ -159,53 +165,55 @@ function construct_AT(elem, tree) {
}); });
document.getElementById("atree-row-" + node.display.row).children[node.display.col].appendChild(node_elem); document.getElementById("atree-row-" + node.display.row).children[node.display.col].appendChild(node_elem);
}; };
atree_render_connection();
}; };
// resolve connector conflict // resolve connector conflict
function resolve_connector(elem, node) { function resolve_connector(pos, node) {
if (elem.children.length < 2) {return false;} if (atree_connectors_map.get(pos).length < 2) {return false;}
let line = 0;
let angle = 0; let line = false;
let t = 0; let angle = false;
let c = 0; let t = false;
for (let child of elem.children) { for (let i of atree_connectors_map.get(pos)) {
let type = child.id.split("-")[2] if (i.type == "line") {
if (type == "line") { line += true;
line += 1; } else if (i.type == "angle") {
} else if (type == "angle") { angle += true;
angle += 1; } else if (i.type == "t") {
} else if (type == "t") { t += true;
t += 1;
} else if (type == "c") {
c += 1;
} }
} }
let connect_elem = document.createElement("div"); let connect_elem = document.createElement("div");
//if ((line == 1 && angle == 1) || (line == 2 && angle == 2) || (line == 1 && angle == 2) || (angle == 1 && t == 1)) { if ((line && angle)) {
// connect_elem.style = "background-image: url('../media/atree/connect_t.png'); background-size: cover; width: 100%; height: 100%;"
// connect_elem.classList.add("rotate-180")
// connect_elem.id = elem.children[0].id.split("-")[0] + "-" + elem.children[0].id.split("-")[1] + "-t"
// elem.replaceChildren(connect_elem);
//}
//if (line > 1 && angle == 0) {
// elem.replaceChildren(elem.children[0])
//}
//if (t == 1 && line == 1) {
// connect_elem.style = "background-image: url('../media/atree/connect_c.png'); background-size: cover; width: 100%; height: 100%;"
// elem.replaceChildren(connect_elem);
//}
if ((line == 1 && angle == 1)) {
connect_elem.style = "background-image: url('../media/atree/connect_t.png'); background-size: cover; width: 100%; height: 100%;" connect_elem.style = "background-image: url('../media/atree/connect_t.png'); background-size: cover; width: 100%; height: 100%;"
connect_elem.classList.add("rotate-180") connect_elem.classList.add("rotate-180")
connect_elem.id = elem.children[0].id.split("-")[0] + "-" + elem.children[0].id.split("-")[1] + "-t" atree_connectors_map.set(pos, [{connector: connect_elem, type: "t"}])
elem.replaceChildren(connect_elem);
} }
if (node.parents.length == 3 && t == 1) { if (node.parents.length == 3 && t && atree_same_row(node)) {
connect_elem.style = "background-image: url('../media/atree/connect_c.png'); background-size: cover; width: 100%; height: 100%;" connect_elem.style = "background-image: url('../media/atree/connect_c.png'); background-size: cover; width: 100%; height: 100%;"
connect_elem.id = elem.children[0].id.split("-")[0] + "-" + elem.children[0].id.split("-")[1] + "-c" atree_connectors_map.set(pos, [{connector: connect_elem, type: "c"}])
elem.replaceChildren(connect_elem); }
// override the conflict with the first children
atree_connectors_map.set(pos, [atree_connectors_map.get(pos)[0]])
}
// check if a node doesn't have same row w/ its parents (used to solve conflict)
function atree_same_row(node) {
for (let i of node.parents) {
if (node.display.row == atree_map.get(i).display.row) { return false; }
}
return true;
}
// draw the connector onto the screen
function atree_render_connection() {
for (let i of atree_connectors_map.keys()) {
if (atree_connectors_map.get(i).length != 0) {
document.getElementById("atree-row-" + i.split(",")[0]).children[i.split(",")[1]].appendChild(atree_connectors_map.get(i)[0].connector)
}
} }
elem.replaceChildren(elem.children[0])
} }