search

humdrum-tools / verovio-humdrum-viewer

Verovio Humdrum Viewer
http://verovio.humdrum.org
38 stars 9 forks source link

Add verovio option svgBoundingBoxes #897

Open craigsapp opened 3 months ago

craigsapp commented 3 months ago

Add svgBoundingBoxes: "true" as a verovio option (or --svg-bounding-boxes on the command line). This make clicking on notes easier:

Screenshot 2024-08-19 at 6 59 54 PM

The blue box is the new clickable region (previously only the black pixels of the note were clickable.

For slurs, the bounding box element is before in the clicking hierarchy than the slur, but probably not a problem:

Screenshot 2024-08-19 at 7 07 51 PM

(using the example HTML code below, which will list the element ancestors of the SVG image that are <g> elements when clicking on the page.

This CSS allows the white holes in half and whole noteheads to be clickable in Chrome:

g[id^="note-"],
g[id^="rest-"],
g[id^="chord-"] {
    pointer-events: bounding-box;
}

Keeping this, but probably not necessary anymore.

Test example:

<html>
<head>
<title>My Score</title>
<script src="https://plugin.humdrum.org/scripts/humdrum-notation-plugin-worker.js"></script>
</head>
<body>
<script>
   displayHumdrum({
      source: "my-score",
      autoResize: "true",
      pageWidth: 1500,
      header: "true",
      svgBoundingBoxes: "true"
   });
</script>

<script type="text/x-humdrum" id="my-score">
!!!OTL: Twinkle, Twinkle, Little Star
!!!header-right: W.A. Mozart
**kern  **harm
*clefG2 *
*M4/4   *
=1  =1
4c  I
(4c .
4g) V
4g 4b   .
=2  =2
4a  vi
4a  .
2g  V
=3  =3
4f  IV
4f  .
4e  Ib
4e  .
=4  =4
4d  Vc
4d  .
2c  I
==  ==
*-  *-
</script>

<div id="click-elements"></div>

<script>

document.addEventListener("click", function (event) {
    let target = event.target;
    let gelements = [];
    while (target) {
        if (target.nodeName === "svg") {
            break;
        }
        if (target.nodeName === "g") {
            gelements.push(target);
        }
        target = target.parentNode;
    }
    let infoElement = document.querySelector("#click-elements");
    if (gelements.length === 0) {
        infoElement.innerHTML = "";
        return;
    }
    let output = "<table>";
    output += "<tr><th>Element</th><th>ID</th><th>Class(es)</th></tr>";
    for (let i = 0; i < gelements.length; i++) {
        output += "<tr>";
        output += `<td>${gelements[i].nodeName}</td>`;
        output += `<td>${gelements[i].id}</td>`;
        output += `<td>${gelements[i].getAttribute('class')}</td>`;
        output += "</tr>";
    }
    output += "</table>";
    infoElement.innerHTML = output;
});

</script>

<style>
svg tspan { cursor: default; }
th, td { text-align: left; }

g[id^="rest-"],
g[id^="note-"],
g[id^="chord-"] {
    pointer-events: bounding-box;
}

g[id^="harm-"]:hover,
g[id^="note-"]:hover,
g[id^="rest-"]:hover,
g[id^="tie-"]:hover,
g[id^="fermata-"]:hover,
g[id^="slur-"]:hover {
    fill: orange;
}

</style>

</body>
</html>

Remove svgBoundingBoxes: "true" to compare.