From 881467cf0be4de58590946a3b638dba3ad68e9e5 Mon Sep 17 00:00:00 2001
From: reschan <h>
Date: Tue, 28 Jun 2022 14:10:25 +0700
Subject: [PATCH] fix: atree img display relatively to parent

---
 builder/index.html |  4 ++--
 js/atree.js        | 34 ++++++++++++++++++++++------------
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/builder/index.html b/builder/index.html
index 2c3ceda..101c64d 100644
--- a/builder/index.html
+++ b/builder/index.html
@@ -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>
diff --git a/js/atree.js b/js/atree.js
index 63c75be..9ab7bd9 100644
--- a/js/atree.js
+++ b/js/atree.js
@@ -180,14 +180,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 +238,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
@@ -380,8 +379,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 +416,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 +441,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 +464,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 +513,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 +522,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;
 };