diff --git a/js/trees.js b/js/trees.js index c7da33f0..7d732af3 100644 --- a/js/trees.js +++ b/js/trees.js @@ -220,16 +220,10 @@ function align_tree(draw_context) { function draw_tree(draw_context, baseline=0, min_dist=-1000) { var svg_elem = draw_context.svg_elem; var id_prefix = draw_context.id_prefix; - - var svg_height = svg_elem.children[0].getAttribute("height"); - var svg_viewbox = svg_elem.getElementsByClassName("definition-scale")[0].getAttribute("viewBox"); // find top of system var svg_top = baseline; - var tree_g = svg_elem.getRootNode().getElementById("tree"+id_prefix); - var existing = tree_g ? true : false; - if(existing) - tree_g.parentNode.removeChild(tree_g); + var existing = clear_top(draw_context); var obj = get_tree_from_input(draw_context); if(!obj){ @@ -263,17 +257,7 @@ function draw_tree(draw_context, baseline=0, min_dist=-1000) { // Adjust height // change viewport - if(!existing){ - var [x,y,w,h] = svg_viewbox.split(" "); - var ydiff = -obj.y; - draw_context.old_viewbox = [x,y,w,h].join(" "); - svg_elem.getElementsByClassName("definition-scale")[0].setAttribute("viewBox",[x,Number(y)-ydiff,w,Number(h)+ydiff].join(" ")); - - var svg_num_height = Number(svg_height.split("p")[0]); //Assume "XYZpx" - draw_context.old_height = svg_height; - // change height - svg_elem.children[0].setAttribute("height", (svg_num_height * ((h-(y-ydiff))/(h - y))) + "px"); - }// Else do Smart Calculations on old_viewbox + adjust_top(draw_context,-obj.y); } diff --git a/js/ui.js b/js/ui.js index 4010c671..cc4f4865 100644 --- a/js/ui.js +++ b/js/ui.js @@ -152,9 +152,9 @@ function add_buttons(draw_context) { var hierbutton = button("Show/update hierarchy"); hierbutton.classList.add("hierarchybutton"); hierbutton.id = (draw_context.id_prefix+"hierarchybutton"); - var hidehierbutton = button("Hide hierarchy"); - hidehierbutton.classList.add("hidehierarchybutton"); - hidehierbutton.id = (draw_context.id_prefix+"hidehierarchybutton"); + var hidetopbutton = button("Hide tree/hierarchy"); + hidetopbutton.classList.add("hidetopbutton"); + hidetopbutton.id = (draw_context.id_prefix+"hidetopbutton"); var hiercheck = checkbox("Roots low"); hiercheck.id = (draw_context.id_prefix+"hierarchycb"); hiercheck.checked = true; @@ -164,7 +164,7 @@ function add_buttons(draw_context) { newlayerbutton.onclick = () =>{ create_new_layer(new_draw_context,slicecheck.checked);} playbutton.onclick = () =>{play_midi_reduction(new_draw_context);} hierbutton.onclick = () =>{draw_hierarchy_graph(new_draw_context,50,hiercheck.checked);} - hidehierbutton.onclick = () =>{hide_hierarchy_graph(new_draw_context);} + hidetopbutton.onclick = () =>{hide_top(new_draw_context);} buttondiv.appendChild(document.createTextNode("\u25BC")); buttondiv.appendChild(document.createElement("br")); @@ -195,8 +195,6 @@ function add_buttons(draw_context) { buttondiv.appendChild(hierbutton); buttondiv.appendChild(document.createElement("br")); - buttondiv.appendChild(hidehierbutton); - buttondiv.appendChild(document.createElement("br")); buttondiv.appendChild(hiercheck); var roots_low_label = document.createElement("label") roots_low_label.htmlFor = draw_context.id_prefix+"hierarchycb"; @@ -204,6 +202,9 @@ function add_buttons(draw_context) { buttondiv.append(roots_low_label); buttondiv.appendChild(document.createElement("br")); buttondiv.appendChild(document.createElement("br")); + buttondiv.appendChild(hidetopbutton); + buttondiv.appendChild(document.createElement("br")); + buttondiv.appendChild(document.createElement("br")); // Tree stuff var treetext = document.createElement("textarea"); diff --git a/js/visualizations.js b/js/visualizations.js index 024dfd59..dc40c4b9 100644 --- a/js/visualizations.js +++ b/js/visualizations.js @@ -25,12 +25,10 @@ function calc_hierarchy(notes, relations, roots_low=true) { function draw_hierarchy_graph(draw_context, hullPadding=200, roots_low=true) { var svg_elem = draw_context.svg_elem; var id_prefix = draw_context.id_prefix; - var g_elem = svg_elem.getRootNode().getElementById("hier"+id_prefix); - var existing = g_elem ? true : false; - if(!existing) - g_elem = g(); - else - g_elem.innerHTML = ""; + var existing = clear_top(draw_context); + var g_elem = g(); + g_elem.id="hier"+id_prefix; + // find layers var current_note_nodes = Array.from(svg_elem. getElementsByClassName("note")). @@ -43,8 +41,6 @@ function draw_hierarchy_graph(draw_context, hullPadding=200, roots_low=true) { map((id) => get_by_id(mei,id)); var layers = calc_hierarchy(current_note_nodes,current_relation_nodes, roots_low); - var svg_height = svg_elem.children[0].getAttribute("height"); - var svg_viewbox = svg_elem.getElementsByClassName("definition-scale")[0].getAttribute("viewBox"); // find top of system var svg_top = 0; var layer_dist = 500; @@ -133,33 +129,11 @@ function draw_hierarchy_graph(draw_context, hullPadding=200, roots_low=true) { g_elem.appendChild(elem); }); - g_elem.id="hier"+id_prefix; add_to_svg_bg(svg_elem,g_elem); // change viewport - if(!existing){ - var [x,y,w,h] = svg_viewbox.split(" "); - var ydiff = (layers.length*layer_dist); - draw_context.old_viewbox = [x,y,w,h].join(" "); - svg_elem.getElementsByClassName("definition-scale")[0].setAttribute("viewBox",[x,Number(y)-ydiff,w,Number(h)+ydiff].join(" ")); - - var svg_num_height = Number(svg_height.split("p")[0]); //Assume "XYZpx" - draw_context.old_height = svg_height; - // change height - svg_elem.children[0].setAttribute("height", (svg_num_height * ((h-(y-ydiff))/(h - y))) + "px"); - } -} - - -function hide_hierarchy_graph(draw_context) { - var svg_elem = draw_context.svg_elem; - var id_prefix = draw_context.id_prefix; - var g_elem = svg_elem.getRootNode().getElementById("hier"+id_prefix); - if(g_elem){ - svg_elem.getElementsByClassName("definition-scale")[0].setAttribute("viewBox",draw_context.old_viewbox); - svg_elem.children[0].setAttribute("height", draw_context.old_height); - g_elem.parentElement.removeChild(g_elem); - } + adjust_top(draw_context,(layers.length*layer_dist)); + }