Use the new functions for controlling the space above the score for h…

…iearchy visualisations and trees.

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);
 
 }
 

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,15 +195,16 @@ 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";
   roots_low_label.appendChild(document.createTextNode("Draw roots low"));
   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");

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));
+
 }