Properties.bubble.is_visible() does not work

Plugin builders
1

Hi all!
Question about the “is_visible” parameter.

properties.bubble.is_visible() fires only once when the page is loaded and does not change again. Further, the “update” function does not respond to changes in the visibility of the element.

Those. if the element is hidden when loading the application (Layout → This element is visible on page load = false), then properties.bubble.is_visible() = false and will not change anymore even if the element is shown. If the plugin element is not hidden when the page loads, then properties.bubble.is_visible() will always be “true”

Is it normal that the “update” function does not respond to changes in the visibility of an element? Or am I missing something?
Is there anything that can be done about this?

2 Likes
2

I’ve made a couple posts about this topic before. The only solution is to use a mutation observer. The only thing that sucks is that mutation observer’s are long to set up. I use libraries to make my life easier, such as this one:

It’s been like this for about a year. Yep, bubble properties for plugins have been broken for a year, you heard it here folks.

3 Likes
3

Thank you. Yes, I know about these libraries and about MutationObserver: observe() method. I wanted to take the easy route and hoped that it would be possible to use the built-in function.
Unfortunately, I need to use MutationObserver or third party libraries.

4

For anyone coming across this, since I ran into this earlier today.

If you’re using the canvas in a way like this, then the example below will monitor the visibility and just output a console log reporting it.


 // create element, append to canvas
    let randomId = Math.floor((Math.random() * 100000) + 1);
    let elementId = 'aiagent_avatar' + randomId;
    instance.canvas.append("<div id='"+elementId+"'style='width:100%; height:100%;'></div>");
    
 // mutation observer to monitor visibility
    let observer = new MutationObserver((mutations) => {
        let isVisible = instance.canvas[0].style.display !== 'none';
        console.log(isVisible ? 'Visible' : 'Not Visible');
    });
    observer.observe(instance.canvas[0], {
        attributes: true,
        attributeFilter: ['style']
    });

Paul