Mouseover highlighting is off when scrolling

[davidbrochart]

In the simple music editor example, if you make the container scrollable:

<div id="outer-container", style="overflow-y: scroll">
</div>

and scroll a little bit, you can see that the highlighting of the mouseover is off.
I'm not sure how to take into account the scrolling, do you have any idea?

[AaronDavidNewman]

Oh, good catch. There is a 'handleScrollEvent' method in the 'real' application event handler, that is not present in this simple application. src/application/eventHandler.ts is the code. I'll try to add it when I get a chance.

It should work just to add that code to the html script in an 'onscroll' handler. You can replace $(SuiEventHandler.scrollable) with $('#outer-handler'). And you can either replace 'trackScrolling' with a local 'var'. Or you can just skip it - it (trackScrolling) handles the race condition when there are multiple scroll events, so it doesn't try to redraw the screen more than once per 500ms.

[AaronDavidNewman]

OK this is fixed:

    const musicRoot = document.getElementById('outer-container');
    musicRoot.onscroll = (ev) => {
        view.tracker.scroller.handleScroll(musicRoot.scrollLeft, musicRoot.scrollTop);
    }

I also added an API in ScoreView: handleScrollEvent(leftScroll, rightScroll). So in the future you can just go view.handleScrollEvent(leftScroll, topScroll). No need to know about the low-level objects in renderer.

[AaronDavidNewman]

Fixed per above.

[davidbrochart]

Thanks for the quick answer.
I'm not sure it's the right fix in my case, since it's not the element where Smoosic is rendered that is scrolled, but some parent in the DOM hierarchy (that I have no control of), so musicRoot.onscroll never gets called.

[AaronDavidNewman]

I'm not sure what you mean by 'my case'. Is there a fiddle or a branch that I can see? You used the example codepen, so I am talking about the link you included above. 'outer-container' there does receive scroll events, now that I've set the overflow.

The element you define when you create the application is the top level, that is the one that is scrolled. So you do have control over it. You don't have control directly over the contained div and svg, but you can control them indirectly by defining the page size, global scale and zoom level within Smoosic API.

The element you define to Smoosic, 'outer-container' in the sample code, is the element that receives the scrolling events. The application creates a div that has the 'true size' of your score inside of that, based on the size of the score (page size * number of pages). The SVG element is created inside of the second div, with a viewport size determined by the zoom and global scale.

You should make sure that 1) your top-level container has an ID (that you pass to the application), and 2) that it has a natural size that can be determined from the DOM. But if these were your problems, I'd expect you wouldn't see the music at all.

[davidbrochart]

Thanks for the details.
I'm actually implementing a Jupyter widget for music rendering, so the score would be displayed in a notebook cell's output. The user can scroll the notebook, that's how I saw that mouseover highlighting was off. I tried your recommendations but as I said the element's onscroll method never gets called, because it's not this element that is scrolled, it's the notebook which is somewhere up in the hierarchy.
I hope this gives a better idea of my use-case. There is this PR if you want to take a look.

[AaronDavidNewman]

Wow, neat. Are you going to create a natural language model for Smoosic?

There can be more than one scrolling region. One overall for the notebook and one for the music div. Do you see a scroll bar around the music div? If you're not, there may be some issue with the css. If you are, then maybe the div isn't created when you try to bind the event.

[davidbrochart]

Are you going to create a natural language model for Smoosic?

Ahah I don't know, but the integration with Python will open new possibilities for sure.

Do you see a scroll bar around the music div?

No, but maybe there should be, so that we can scroll through a large score. Anyway, if there was a scroll bar around the music div, my understanding was that the way you handle scrolling was not taking into account the scrolling of the notebook, but maybe I'm wrong?

[AaronDavidNewman]

Even if there is no scrollbar, there is still a left/top offset from the top of the page to the music div. Smoosic assumes that never changes unless we get a screen resize event (in which case we reset the scroll object), but maybe that is not the case in the notebook.

[davidbrochart]

Yes I don't think this is the case in the notebook, see:

Peek.2024-01-03.22-39.mp4