Bounding boxes of notes and note heads

[WolfgangDrescher]

Is it intended that with --svg-bounding-boxes enabled the bounding box for .note does only cover the note head?

Also note that there is no bounding box for .notehead itself.

Wouldn't it be more logical if there was an additional bounding box element for note heads, and the current bounding box for notes (.note.bounding-box) contained the stem and flags, maybe even the accidental. But probably not an assigned verse element.

Beside that, is there an option to remove references to <use> elements and instead include those symbols directly into the svg?

[lpugin]

I will look at the bounding box question and how / if we can make exceptions for including children in some cases.

Beside that, is there an option to remove references to elements and instead include those symbols directly into the svg?

Why would you want this? We use <use> to avoid repetition of the graphic paths. It would be good to know in which context this is an problem.

[WolfgangDrescher]

I am adding boxes behind certain elements to highlight music theoretical moments such as cadences or single notes. But to interact with the score all notes should be clickable so I added a box around them as well (made them visible as red boxes in the screenshot):

Have a look at the website: https://lassus.mh-freiburg.de/tricinium/01-beatus-vir. You can click or double click on notes.

The problem was, that the JavaScript function getBoundingClientRect behaves different to other browsers when applied on a SVGElement in Firefox. Probably it messes up due to a different scaling of viewBox or the underlying SVG units. Additionally Firefox won't calculate getBoundingClientRect correctly when there is a <use> element involved (would have to test again how exactly, it was some weeks ago). It would be easier to calculate those bounding boxes in Firefox when there were no <use> elements (of course this should be an opt-in option and not a default). But if I remember correctly there still stays there problem with wrong values for the getBoundingClientRect on SVGElements (or maybe it was just <g>?).

I would have to check again if and why <rect>, <use> and <g> elements are calculated differently by getBoundingClientRect.

So the only workaround I found for this was by adding the --svg-bounding-boxes option and calculating the bounding box for a note by hand by handling .notehead, .stem, .flag, .dots and .accid manually. But there were some unexpected cases for .note vs. .notehead that I mentioned in my initial post.

Click to expand JS example

export function selectBBoxElem(elem, selectors) {
    const selectedElem = elem?.querySelector(selectors);
    return getBBoxElem(selectedElem);
}

export function getBBoxElem(elem) {
    return elem?.closest('svg')?.querySelector(`#bbox-${elem?.id} rect`) ?? elem;
}

function updateBoundingBoxes() {
    markerContainer.value.querySelectorAll('.note-bounding-box').forEach((elem) => elem.remove());
    scoreContainer.value.querySelectorAll('g.note:not(.bounding-box), g.rest:not(.bounding-box), g.mRest:not(.bounding-box)').forEach((elem) => {
        const noteheadRect = getBBoxElem(elem)?.getBoundingClientRect();
        const stemRect = selectBBoxElem(elem, '.stem')?.getBoundingClientRect();
        const flagRect = selectBBoxElem(elem, '.flag')?.getBoundingClientRect();
        const dotsRect = selectBBoxElem(elem, '.dots')?.getBoundingClientRect();
        const accidRect = elem.querySelector('.accid use') && selectBBoxElem(elem, '.accid')?.getBoundingClientRect();
        const rect = elem.getBoundingClientRect();

        let left = Infinity;
        let right = -Infinity;
        let top = Infinity;
        let bottom = -Infinity;
        
        if (noteheadRect) {
            left = Math.min(left, noteheadRect.left);
            right = Math.max(right, noteheadRect.right);
            top = Math.min(top, noteheadRect.top);
            bottom = Math.max(bottom, noteheadRect.bottom);
        }
        if (stemRect) {
            left = Math.min(left, stemRect.left);
            right = Math.max(right, stemRect.right);
            top = Math.min(top, stemRect.top);
            bottom = Math.max(bottom, stemRect.bottom);
        }
        if (flagRect) {
            left = Math.min(left, flagRect.left);
            right = Math.max(right, flagRect.right);
            top = Math.min(top, flagRect.top);
            bottom = Math.max(bottom, flagRect.bottom);
        }
        if (accidRect) {
            left = Math.min(left, accidRect.left);
            right = Math.max(right, accidRect.right);
            top = Math.min(top, accidRect.top);
            bottom = Math.max(bottom, accidRect.bottom);
        }
        if (dotsRect) {
            left = Math.min(left, dotsRect.left);
            right = Math.max(right, dotsRect.right);
            top = Math.min(top, dotsRect.top);
            bottom = Math.max(bottom, dotsRect.bottom);
        }

        left = left === Infinity ? rect.left : left;
        right = right === -Infinity ? rect.right : right; 
        top = top === Infinity ? rect.top : top; 
        bottom = bottom === -Infinity ? rect.bottom : bottom; 

        const sizeExtender = 20;
        const width = right - left + sizeExtender;
        const height = bottom - top + sizeExtender;

        const parentRect = scoreContainer.value.getBoundingClientRect();
        const div = document.createElement('div');
        div.classList.add('note-bounding-box');
        div.style.position = 'absolute';
        div.style.width = `${width}px`;
        div.style.height = `${height}px`;
        div.style.left = `${left - parentRect.left - sizeExtender / 2}px`;
        div.style.top = `${top - parentRect.top - sizeExtender / 2}px`;
        div.style.cursor = 'pointer';
        div.style.pointerEvents = 'auto';
        div.style.zIndex = 1;
        div.addEventListener('mouseenter', () => elem.classList.add('hover'));
        div.addEventListener('mouseleave', () => elem.classList.remove('hover'));
        div.addEventListener('click', (event) => onClickVerovioCanvas(event, elem));
        div.addEventListener('touchend', (event) => onTouchVerovioCanvas(event, elem));
        markerContainer.value.appendChild(div);
    });
}

Also have a look at this related issue: #2390