diff --git a/js/atree.js b/js/atree.js index 41d6979..6796b77 100644 --- a/js/atree.js +++ b/js/atree.js @@ -1041,30 +1041,33 @@ function resolve_connector(atree_connectors_map, pos, new_connector) { function set_connector_type(connector_info) { // left right up down const connections = connector_info.connections; const connector_elem = connector_info.connector; - if (connections[2]) { - if (connections[0]) { - connector_info.type = 'c'; // cross - return; - } - connector_info.type = 'line'; // vert line - return; + let connector_dict = { + "1100": {type: "line", rotate: 90}, + "1010": {type: "angle", rotate: 0}, + "1001": {type: "angle", rotate: 270}, + "0110": {type: "angle", rotate: 90}, + "0101": {type: "angle", rotate: 180}, + "0011": {type: "line", rotate: 0}, + "1110": {type: "t", rotate: 180}, + "1101": {type: "t", rotate: 0}, + "1011": {type: "t", rotate: 90}, + "0111": {type: "t", rotate: 270}, + "1111": {type: "c", rotate: 0} } - if (connections[3]) { // if down: - if (connections[0] && connections[1]) { - connector_info.type = 't'; // all 3 t - return; + + let lookup_str = ""; + for (let i of connections) { + if (i != 0) { + lookup_str += 1; + } else { + lookup_str += 0; } - connector_info.type = 'angle'; // elbow - if (connections[1]) { - connector_elem.classList.add("rotate-180"); - } - else { - connector_elem.classList.add("rotate-270"); - } - return; } - connector_info.type = 'line'; // horiz line - connector_elem.classList.add("rotate-90"); + + connector_info.type = connector_dict[lookup_str].type; + connector_info.rotate = connector_dict[lookup_str].rotate; + connector_elem.classList.add("rotate-" + connector_dict[lookup_str].rotate); + } // draw the connector onto the screen @@ -1142,6 +1145,7 @@ function atree_set_edge(atree_connectors_map, parent, child, state) { let connector_img_elem = document.createElement("img"); connector_img_elem.style = "width: 100%; height: 100%;"; const ctype = connector_info.type; + const rotate = connector_info.rotate; if (ctype === 't' || ctype === 'c') { // c, t const [connector_row, connector_col] = connector_label.split(',').map(x => parseInt(x)); @@ -1161,7 +1165,7 @@ 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); + let connector_img = atree_parse_connector(render_state, ctype, rotate); connector_img_elem.src = connector_img.img connector_elem.className = ""; connector_elem.classList.add("rotate-" + connector_img.rotate); @@ -1182,7 +1186,7 @@ function atree_set_edge(atree_connectors_map, parent, child, state) { } // parse a sequence of left, right, up, down to appropriate connector image -function atree_parse_connector(orient, type) { +function atree_parse_connector(orient, type, rotate) { // left, right, up, down let c_connector_dict = { @@ -1200,10 +1204,24 @@ function atree_parse_connector(orient, type) { }; let t_connector_dict = { - "1100": {attrib: "_2_l", rotate: 0}, - "1001": {attrib: "_2_a", rotate: "flip"}, - "0101": {attrib: "_2_a", rotate: 0}, - "1101": {attrib: "_3", rotate: 0} + 0: { + "1100": {attrib: "_2_l"}, + "1001": {attrib: "_2_a_f"}, + "0101": {attrib: "_2_a"}, + "1101": {attrib: "_3"}, + }, + 90: { + "1010": {attrib: "_2_a_f"}, + "1001": {attrib: "_2_a"}, + "0011": {attrib: "_2_l"}, + "1011": {attrib: "_3"} + }, + 270: { + "0110": {attrib: "_2_a"}, + "0101": {attrib: "_2_a_f"}, + "0011": {attrib: "_2_l"}, + "0111": {attrib: "_3"} + } }; let res = ""; @@ -1211,14 +1229,15 @@ function atree_parse_connector(orient, type) { res += i; } if (res === "0000") { - return {img: "../media/atree/connect_" + type + ".png", rotate: 0}; + return {img: "../media/atree/connect_" + type + ".png", rotate: rotate}; } let ret; if (type == "c") { ret = c_connector_dict[res]; } else { - ret = t_connector_dict[res]; + ret = t_connector_dict[rotate][res]; + ret.rotate = rotate; }; ret.img = "../media/atree/highlight_" + type + ret.attrib + ".png"; return ret; diff --git a/media/atree/highlight_t_2_a_f.png b/media/atree/highlight_t_2_a_f.png new file mode 100644 index 0000000..08d4a34 Binary files /dev/null and b/media/atree/highlight_t_2_a_f.png differ