From cadd06864a6622b939ab8e518dc2bdeec8eb2053 Mon Sep 17 00:00:00 2001 From: reschan Date: Sat, 9 Jul 2022 10:56:13 +0700 Subject: [PATCH 1/4] fix: remove connector logic, add lookup table instead --- js/atree.js | 77 +++++++++++++++++++++++++++++++++-------------------- 1 file changed, 48 insertions(+), 29 deletions(-) diff --git a/js/atree.js b/js/atree.js index 41d6979..630dbc4 100644 --- a/js/atree.js +++ b/js/atree.js @@ -1041,30 +1041,34 @@ 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"); + console.log(lookup_str); + + 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 +1146,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 +1166,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 +1187,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 +1205,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", rotate: 0}, + "1001": {attrib: "_2_a", rotate: "flip"}, + "0101": {attrib: "_2_a", rotate: 0}, + "1101": {attrib: "_3", rotate: 0}, + }, + 90: { + "1010": {attrib: "_2_a", rotate: "flip"}, + "1001": {attrib: "_2_a", rotate: 90}, + "0011": {attrib: "_2_l", rotate: 90}, + "1011": {attrib: "_3", rotate: 90} + }, + 270: { + "0110": {attrib: "_2_a", rotate: 270}, + "0101": {attrib: "_2_a", rotate: "flip"}, + "0011": {attrib: "_2_l", rotate: 270}, + "0111": {attrib: "_3", rotate: 270} + } }; let res = ""; @@ -1211,14 +1230,14 @@ 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.img = "../media/atree/highlight_" + type + ret.attrib + ".png"; return ret; From 07c39c0780dee7a6ee9647e2d783595f7512c79a Mon Sep 17 00:00:00 2001 From: reschan Date: Sat, 9 Jul 2022 11:13:09 +0700 Subject: [PATCH 2/4] fix: multiple transform on an image --- js/atree.js | 10 ++++++---- media/atree/highlight_t_2_a_f.png | Bin 0 -> 5881 bytes 2 files changed, 6 insertions(+), 4 deletions(-) create mode 100644 media/atree/highlight_t_2_a_f.png diff --git a/js/atree.js b/js/atree.js index 630dbc4..6f160a9 100644 --- a/js/atree.js +++ b/js/atree.js @@ -1168,7 +1168,9 @@ function atree_set_edge(atree_connectors_map, parent, child, state) { let connector_img = atree_parse_connector(render_state, ctype, rotate); connector_img_elem.src = connector_img.img - connector_elem.className = ""; + if (connector_img.rotate != "flip") { + connector_elem.className = ""; + } connector_elem.classList.add("rotate-" + connector_img.rotate); connector_elem.replaceChildren(connector_img_elem); continue; @@ -1207,19 +1209,19 @@ function atree_parse_connector(orient, type, rotate) { let t_connector_dict = { 0: { "1100": {attrib: "_2_l", rotate: 0}, - "1001": {attrib: "_2_a", rotate: "flip"}, + "1001": {attrib: "_2_a_f", rotate: 0}, "0101": {attrib: "_2_a", rotate: 0}, "1101": {attrib: "_3", rotate: 0}, }, 90: { - "1010": {attrib: "_2_a", rotate: "flip"}, + "1010": {attrib: "_2_a_f", rotate: 90}, "1001": {attrib: "_2_a", rotate: 90}, "0011": {attrib: "_2_l", rotate: 90}, "1011": {attrib: "_3", rotate: 90} }, 270: { "0110": {attrib: "_2_a", rotate: 270}, - "0101": {attrib: "_2_a", rotate: "flip"}, + "0101": {attrib: "_2_a_f", rotate: 270}, "0011": {attrib: "_2_l", rotate: 270}, "0111": {attrib: "_3", rotate: 270} } 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 0000000000000000000000000000000000000000..08d4a3402fe1d030d6c425d157387f6a52887b74 GIT binary patch literal 5881 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 Date: Sat, 9 Jul 2022 11:14:38 +0700 Subject: [PATCH 3/4] remove extraneous/debug code --- js/atree.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/js/atree.js b/js/atree.js index 6f160a9..58e64f1 100644 --- a/js/atree.js +++ b/js/atree.js @@ -1063,7 +1063,6 @@ function set_connector_type(connector_info) { // left right up down lookup_str += 0; } } - console.log(lookup_str); connector_info.type = connector_dict[lookup_str].type; connector_info.rotate = connector_dict[lookup_str].rotate; @@ -1168,9 +1167,7 @@ function atree_set_edge(atree_connectors_map, parent, child, state) { let connector_img = atree_parse_connector(render_state, ctype, rotate); connector_img_elem.src = connector_img.img - if (connector_img.rotate != "flip") { - connector_elem.className = ""; - } + connector_elem.className = ""; connector_elem.classList.add("rotate-" + connector_img.rotate); connector_elem.replaceChildren(connector_img_elem); continue; From c2a41b2e7909f8a9910503804689d6bd7f53b4a8 Mon Sep 17 00:00:00 2001 From: reschan Date: Sat, 9 Jul 2022 11:16:44 +0700 Subject: [PATCH 4/4] remove duplicates --- js/atree.js | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/js/atree.js b/js/atree.js index 58e64f1..6796b77 100644 --- a/js/atree.js +++ b/js/atree.js @@ -1205,22 +1205,22 @@ function atree_parse_connector(orient, type, rotate) { let t_connector_dict = { 0: { - "1100": {attrib: "_2_l", rotate: 0}, - "1001": {attrib: "_2_a_f", rotate: 0}, - "0101": {attrib: "_2_a", rotate: 0}, - "1101": {attrib: "_3", rotate: 0}, + "1100": {attrib: "_2_l"}, + "1001": {attrib: "_2_a_f"}, + "0101": {attrib: "_2_a"}, + "1101": {attrib: "_3"}, }, 90: { - "1010": {attrib: "_2_a_f", rotate: 90}, - "1001": {attrib: "_2_a", rotate: 90}, - "0011": {attrib: "_2_l", rotate: 90}, - "1011": {attrib: "_3", rotate: 90} + "1010": {attrib: "_2_a_f"}, + "1001": {attrib: "_2_a"}, + "0011": {attrib: "_2_l"}, + "1011": {attrib: "_3"} }, 270: { - "0110": {attrib: "_2_a", rotate: 270}, - "0101": {attrib: "_2_a_f", rotate: 270}, - "0011": {attrib: "_2_l", rotate: 270}, - "0111": {attrib: "_3", rotate: 270} + "0110": {attrib: "_2_a"}, + "0101": {attrib: "_2_a_f"}, + "0011": {attrib: "_2_l"}, + "0111": {attrib: "_3"} } }; @@ -1237,6 +1237,7 @@ function atree_parse_connector(orient, type, rotate) { ret = c_connector_dict[res]; } else { ret = t_connector_dict[rotate][res]; + ret.rotate = rotate; }; ret.img = "../media/atree/highlight_" + type + ret.attrib + ".png"; return ret;