collision detection + stacking prototype

public/css/style.css

@@ -345,13 +345,13 @@ stroke: black;
 .relation,
 .metarelation {
   fill: (0, 0, 0, 0);
-  /* stroke: #1f77b4; */
+  stroke: red;
   /* fill: red; */
   fill-opacity: 0;
   position: absolute;
 /* 
   stroke: var(--shade, #EEE); */
-  stroke-width: 27;
+  stroke-width: 30;
   stroke-opacity: 1;
 }
 
@@ -363,7 +363,7 @@ html.shades-alternate .metarelation {
 body:not(.mousedown) .metarelation:hover {
       transform: translate3d(0,0,0);
        filter: url("#glowFilter");
-       stroke: blue;
+       /* stroke: blue; */
        stroke-width: 20px;
 }
 .extraselectedmetarelation {
@@ -405,12 +405,12 @@ body:not(.mousedown) .shift-pressed .relation:hover {
 body:not(.mousedown) .extraselectedrelation:hover {
     transform : translate3d(0,0,0);
     filter : url("#glowFilter");
-    stroke: red;
+    /* stroke: red; */
     stroke-width: 15px;
     stroke-opacity: 0.8;
 }
 .extraselectedrelation {
-    /* fill-opacity : 0.7; */
+    fill-opacity : 0.7;
     stroke-opacity : 0.8;
     /* stroke: red; */
     stroke-dasharray: 80 80;

src/js/app.js

@@ -47,6 +47,7 @@ import {
 import {
   add_mei_node_for,
   check_for_duplicate_relations,
+  stacker,
   fix_synonyms,
   fix_corresp,
   fix_layers,
@@ -167,6 +168,8 @@ export function do_relation(type, id, redoing = false) {
   changes = true
   var he_id, mei_elems
   if (selected.concat(extraselected)[0].classList.contains('relation')) {
+    var stack = stacker(extraselected, selected)
+    console.log(stack)
     var types = []
     selected.concat(extraselected).forEach((he) => {
       // TODO: move type_synonym application so that this
@@ -182,6 +185,8 @@ export function do_relation(type, id, redoing = false) {
     // update_text()
     undo_actions.push(['change relation type', types.reverse(), selected, extraselected])
   } else if (selected.concat(extraselected)[0].classList.contains('note')) {
+    var stack = stacker(extraselected, selected)
+    console.log('STACK VALUE:', stack)
     check_for_duplicate_relations(type, extraselected, selected)
     var added = []
     // Add new nodes for all notes
@@ -191,7 +196,7 @@ export function do_relation(type, id, redoing = false) {
     [he_id, mei_elems] = add_relation(mei_graph, primaries, secondaries, type, id)
     added.push(mei_elems)
     for (var i = 0; i < draw_contexts.length; i++) {
-      let g_elem = draw_relation(draw_contexts[i], mei_graph, get_by_id(mei_graph.getRootNode(), he_id))
+      let g_elem = draw_relation(draw_contexts[i], mei_graph, get_by_id(mei_graph.getRootNode(), he_id), stack)
       if (g_elem) {
         added.push(g_elem) // Draw the edge
         mark_secondaries(draw_contexts[i], mei_graph, get_by_id(mei_graph.getRootNode(), he_id))
@@ -372,7 +377,7 @@ export function draw_graph(draw_context) {
   // Get the nodes representing metarelations
   var metarelations_nodes = nodes_array.filter((x) => { return x.getAttribute('type') == 'metarelation' })
   relations_nodes.forEach((g_elem) => {
-    if (draw_relation(draw_context, mei_graph, g_elem))
+    if (draw_relation(draw_context, mei_graph, g_elem, true))
       mark_secondaries(draw_context, mei_graph, g_elem)
   })
   metarelations_nodes.forEach((g_elem) => draw_metarelation(draw_context, mei_graph, g_elem))

src/js/coordinates.js

@@ -204,6 +204,7 @@ function closest_note(dc, pt, staff) {
     return notes[index_maybe - 1][1]
   else
     return notes[index_maybe][1]
+  console.log(notes)
 }
 
 function note_params() {

src/js/delete.js

@@ -21,6 +21,7 @@ function delete_relation(elem) {
   var svg_hes = []
   var metarel = get_class_from_classlist(elem) == 'metarelation'
   var mei_graph = getMeiGraph()
+  console.log(mei_graph)
   var draw_contexts = getDrawContexts()
   for (const draw_context of draw_contexts) {
     let svg_he = get_by_id(document, draw_context.id_prefix + mei_id)

src/js/draw.js

@@ -30,11 +30,19 @@ import {
 
 // Given a draw context ('score') and a graph node representing a relation, draw the
 // relation in the draw context.
-export function draw_relation(draw_context, mei_graph, g_elem) {
+export function draw_relation(draw_context, mei_graph, g_elem, stacker) {
+  // console.log(stacker)
   var added = []
   // Where are we drawing, and with what prefix?
   var svg_elem = draw_context.svg_elem
   var id_prefix = draw_context.id_prefix
+  // var nodes_array = Array.from(mei_graph.getElementsByTagName('arc'))
+  // var relations_nodes = nodes_array.filter((x) => { return x.getAttribute('type') == 'relation' })
+  var nodes_array = Array.from(mei_graph.getElementsByTagName('arc'))
+  // console.log(nodes_array)
+  // for (var i = 0; i < relations_nodes.length; i++) {
+  //   console.log(relations_nodes[i].outerHTML)
+  // }
   // ID and type
   var id = id_prefix + g_elem.getAttribute('xml:id')
   var type = relation_type(g_elem)
@@ -62,7 +70,7 @@ export function draw_relation(draw_context, mei_graph, g_elem) {
   // TODO: Other ways to draw the relations - retain as a single tree with
   // ID and type. TODO: Use classlist also for types, as in type:<type> or
   // similar
-  var elem = roundedHull(notes.map(note_coords))
+  var elem = roundedHull(notes.map(note_coords), stacker)
   elem.setAttribute('id', id)
   if (id_prefix != '')
     elem.setAttribute('oldid', g_elem.getAttribute('xml:id'))
@@ -94,6 +102,7 @@ export function draw_relation(draw_context, mei_graph, g_elem) {
       return false
     }
     const mei_graph = getMeiGraph()
+    // console.log(mei_graph)
     if (g_elem.getAttribute('type') == 'relation')
       unmark_secondaries(draw_context, mei_graph, mei_he) // @todo: Where does mei_he come from?
     var primaries = relation_primaries(mei_graph, g_elem).map(
@@ -136,7 +145,7 @@ function redraw_relation(draw_context, g_elem) {
   }
   unmark_secondaries(draw_context, mei_graph, g_elem)
   svg_g_elem.parentElement.removeChild(svg_g_elem)
-  svg_g_elem = draw_relation(draw_context, mei_graph, g_elem)
+  svg_g_elem = draw_relation(draw_context, mei_graph, g_elem, false)
   mark_secondaries(draw_context, mei_graph, g_elem)
   return svg_g_elem[0]
 }
@@ -268,7 +277,7 @@ export function draw_metarelation(draw_context, mei_graph, g_elem) {
     return []
   }
 
-  // console.log(svg_elem)
+  console.log(svg_elem.outerHTML)
   // Where are our targets
   var coords = targets.map(get_metarelation_target)
   // What's midpoint above them?

src/js/graph.js

@@ -28,6 +28,9 @@ export function add_relation(mei_graph, primaries, secondaries, type, he_id_para
   he_elem.setAttribute('xml:id', he_id)
   mei_graph.appendChild(he_elem)
   added.push(he_elem)
+  // for (var i = 0; i < added.length; i++) {
+  //   console.log('graph:', mei_graph)
+  // }
   // Set up the connections to the given primaries and secondaries
   for (var i = 0; i < primaries.length; i++) {
     var elem = mei.createElement('arc')

src/js/slicing.js

@@ -30,6 +30,7 @@ function slicify(draw_context, mdiv_elem, tied = false) {
   vrvToolkit.loadData(data2)
   vrvToolkit.renderToMIDI()
   var notes = Array.from(mei2.getElementsByTagName('note'))
+  console.log(notes)
   var ids = notes.map((n) => n.getAttribute('xml:id'))
   var time_id_map = {}
   ids.forEach((id) => {

src/js/utils.js

@@ -12,6 +12,7 @@ import { polygonHull } from 'd3-polygon'
 import { getDrawContexts, getMeiGraph, getVerovioToolkit } from './app'
 import { strip_xml_tags } from './conf'
 import { getCurrentDrawContext, toggle_selected } from './ui'
+// import { draw_relation_stacked } from './draw'
 
 // Vector operations, taken from
 // http://bl.ocks.org/hollasch/f70f1fe7700f092b5a505e3efd1d9232
@@ -90,14 +91,13 @@ var roundedHullN = function (polyPoints, hullPadding) {
   // return segments.join(' ')
 }
 
-export function roundedHull(points) {
+export function roundedHull(points, stacker) {
   const drawContexts = getDrawContexts()
   // Calculate the maximum distance along the x-axis between points
   let len = points.length - 1
   let maxXDistance = points[0][0] - points[len][0]
-  let hullPadding = maxXDistance * 0.2 // Adjust the factor as needed
-  // console.log(points)
-  // console.log(hullPadding)
+  var hullfactor = stacker
+  var hullPadding = maxXDistance * hullfactor * 0.1 // Adjust the factor as needed
   // Returns an SVG path for a rounded hull around the points
   const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
   // path.setAttribute('stroke', 'red') // Set stroke color to red
@@ -1051,9 +1051,75 @@ export function sanitize_xml(xml) {
   return sanitized_xml
 }
 
+// export function check_for_duplicate_relations(type, prospective_primaries, prospective_secondaries) {
+//   var mei_graph = getMeiGraph()
+
+//   var primaries = prospective_primaries
+//     .map(p => p.getAttribute('id').replace(/(^\d+-?)/, 'gn-'))
+//     .sort((a, b) => a < b)
+//   var secondaries = prospective_secondaries
+//     .map(p => p.getAttribute('id').replace(/(^\d+-?)/, 'gn-'))
+//     .sort((a, b) => a < b)
+
+//   var same_type_relations = Array
+//     .from(mei_graph.querySelectorAll('[type=\'relation\']'))
+//     .filter(n => n.children[0].getAttribute('type') == type)
+
+//   same_type_relations.forEach(r => {
+//     var p_s = relation_get_notes_separated(r)
+//     var p = p_s[0]
+//     var s = p_s[1]
+//     p = p.map(i => i.getAttribute('xml:id'))
+//       .sort((a, b) => a < b)
+//     s = s.map(i => i.getAttribute('xml:id'))
+//       .sort((a, b) => a < b)
+//     if (JSON.stringify(primaries) == JSON.stringify(p)
+//           && JSON.stringify(secondaries) == JSON.stringify(s)) {
+//       alert('Warning: This relation already exists.\nCreating a duplicate anyway.')
+//       return false
+//     }
+//   })
+//   return true
+// }
 export function check_for_duplicate_relations(type, prospective_primaries, prospective_secondaries) {
-  var mei_graph = getMeiGraph()
+  return []
+}
+
+// export function stacker(prospective_primaries, prospective_secondaries) {
+//   var stack = false
+//   var mei_graph = getMeiGraph()
+//   var primaries = prospective_primaries
+//     .map(p => p.getAttribute('id').replace(/(^\d+-?)/, 'gn-'))
+//     .sort((a, b) => a < b)
+//   var secondaries = prospective_secondaries
+//     .map(p => p.getAttribute('id').replace(/(^\d+-?)/, 'gn-'))
+//     .sort((a, b) => a < b)
+
+//   var same_type_relations = Array
+//     .from(mei_graph.querySelectorAll('[type=\'relation\']'))
+
+//   same_type_relations.forEach(r => {
+//     var p_s = relation_get_notes_separated(r)
+//     var p = p_s[0]
+//     var s = p_s[1]
+//     p = p.map(i => i.getAttribute('xml:id'))
+//       .sort((a, b) => a < b)
+//     s = s.map(i => i.getAttribute('xml:id'))
+//       .sort((a, b) => a < b)
+//     if (JSON.stringify(primaries) == JSON.stringify(p)
+//           && JSON.stringify(secondaries) == JSON.stringify(s)) {
+//       alert('Warning: creating a stack of relations')
+//       stack = true
+//     }
+//   })
+
+//   return stack
+// }
 
+export function stacker(prospective_primaries, prospective_secondaries) {
+  var count = 0 // Initialize count variable
+
+  var mei_graph = getMeiGraph()
   var primaries = prospective_primaries
     .map(p => p.getAttribute('id').replace(/(^\d+-?)/, 'gn-'))
     .sort((a, b) => a < b)
@@ -1063,7 +1129,6 @@ export function check_for_duplicate_relations(type, prospective_primaries, prosp
 
   var same_type_relations = Array
     .from(mei_graph.querySelectorAll('[type=\'relation\']'))
-    .filter(n => n.children[0].getAttribute('type') == type)
 
   same_type_relations.forEach(r => {
     var p_s = relation_get_notes_separated(r)
@@ -1075,13 +1140,12 @@ export function check_for_duplicate_relations(type, prospective_primaries, prosp
       .sort((a, b) => a < b)
     if (JSON.stringify(primaries) == JSON.stringify(p)
           && JSON.stringify(secondaries) == JSON.stringify(s)) {
-      alert('Warning: This relation already exists.\nCreating a duplicate anyway.')
-      return false
+      count++ // Increment the count when a stack is found
     }
   })
-  return true
-}
 
+  return count // Return the count of repetitions as a number
+}
 export function draw_context_of(elem) {
   return getDrawContexts().find(dc => dc.svg_elem.contains(elem))
 }

src/js/visualizations.js

@@ -124,7 +124,7 @@ export function draw_hierarchy_graph(draw_context, hullPadding = 200, roots_low
     let nodes = relation_allnodes(getMeiGraph(), r)
     let node_coords = nodes.map((n) => layers_coords.find((x) => x[0] == n)[1])
 
-    let elem = roundedHull(node_coords, hullPadding)
+    let elem = roundedHull(node_coords, 0.1)
     elem.setAttribute('id', 'hier' + id)
     if (id_prefix != '')
       elem.setAttribute('oldid', g_elem.getAttribute('xml:id'))