How to determine the size of a component?

[docm64]

Is there a way to retrieve the height and width of a justpy component as it is rendered?
In Quasar there is a QResizeObserver class but this doesn't seem supported in JustPy.
Any idea how to solve it?

[elimintz]

No, this component is not yet supported. Adding this is not difficult but it is not a python only change. The Vue component defined in quasar_components.js also needs to be modified to support the resize event.

[docm64]

Thank you! For you it may be an easy change. I tried to implement a QResizeObserver class but I don't get any resize events. This is what I did (analogous to QScrollObserver):

In quasarcomponents.py I added this code

@parse_dict
class QResizeObserver(QDiv):

    html_tag = 'q-resize-observer'

    def __init__(self, **kwargs):

        self.debounce = 300
        super().__init__(**kwargs)
        self.prop_list = ['debounce']
        self.allowed_events = ['resize']
        self.set_keyword_events(**kwargs)

In quasar_components.js I added two pieces of code
1.) In the render function I added a case to the switch statement

                // docm64: For QResizeObserver
                case 'resize':
                    fn = this.resizeEvent;
                    break;

2. In the methods part I added this function

        // docm64: added
        resizeEvent: (function (event) {
            this.eventFunction(event, 'resize');
        }),

Unfortunately this didn't bring me success. I created an instance of QResizeObserver as a child component of a QScrollArea the size of which adapts to the browser screen size. And linked an event function to it. Unfortunately it is never invoked. Any idea, what went wrong?

[docm64]

Some additional information:
In the browser I checked the source code of the generated webpage and I found my js code snippets as expected.
Then I logged justpy.handle_event() and found that it is never invoked with a resize event. Looks like the js doesn't send it.
I am using latest Firefox version and the QResizeObserver example in the Quasar tutorial works in my browser.
Still no idea what is causing the problem.

[docm64]

Breakthrough: The code snippets in my first reply really enabled the QResizeProvider and the 'resize' event.
There is a simple reason, why it was not triggered: I had placed it as child of a QScrollArea object. And the 'size' of it does not change with the screen size, because QScrollArea has a sort of virtual size depending on its content. It is the parent object of the QScrollArea which I have to observe.

Now I am getting 'resize' events whenever the observed object resizes.

So in principle we could close this topic. However there is still a smaller (?) issue.
In the Quasar documentation of QResizeObserver, there is the following note:

Please note that QResizeObserver will issue an event as soon as it gets rendered and attached to DOM, so you can have the initial size of the container.

This first event does not come! Maybe this is an issue somehow deeper in the approach how the js part of Justpy renders the dict. I suspect that by the time the QResizeObserver is attached to DOM, the event handler as not yet been attached so the event will not be send out over the websocket. But that's just a suspicion. I am really lacking the level of js knowledge needed to debug it further. Which is one of the reasons I am using this great JustPy framework!
elimintz maybe you can look into this point, if your time allows.

[elimintz]

Very nice work! The good news is that you do not need anymore JavaScript to get the initial size.
You need to use the page_ready event and run the trigger method of the QResizeObserver from within it (in the quasar docs you will see the that QResizeObserver has a trigger method in addition to the resize event).
page_ready is described here: https://justpy.io/tutorial/page_events/
How to run Quasar component methods is described here: https://justpy.io/quasar_tutorial/introduction/#running-quasar-component-methods

So what you need to do, is run the trigger method from page_ready and this should work. If you put together a simple example and it does not work, I would be happy to take a look at it. (Don't forget to set temp=False when you create the resize instance)

[docm64]

Hi, I tried but the event doesn't come. I created a minimal example to allow you to reproduce.

Prerequisites: Added class QResizeObserver to quasarcomponents.py and 'rezise' event to quasar_components.js as described above
Code example

import justpy as jp

def on_resize(observer,msg):
    print ('resize')
    print (msg)
    
async def on_click(b,msg):
    observer = msg.page.resizeobserver
    print (observer)
    try:
        await observer.run_method('trigger(1)',msg.websocket)
        print('run_method(): success')
    except:
        print('run_method(): failed')
                                
def quasar_example():
    wp=jp.QuasarPage()
    wp.div_content = jp.QDiv(classes='bg-grey-13',style='height: 100px', a=wp)
    wp.resizeobserver = jp.QResizeObserver(a=wp.div_content,temp=False)
    wp.resizeobserver.on('resize',on_resize)
    wp.b = jp.QBtn(text='this should trigger "resize", but...',a=wp)
    wp.b.on('click',on_click)
    return wp

jp.justpy(quasar_example)

Observations:
When the browser window is resized, 'resize' events are generated. Good!
When the button is clicked, on_click() is invoked. observer refers to the right object and it has a valid id
run_method() completes without exception. Good!
However, no 'resize' event is generated. Oops!

If there is any problem in my code, please help me to find it. I am more tempted to believe that something fails internally. I already experimented with different arguments, e.g. trigger(0), trigger(true) and different debounce values (as I was thinking in the direction of a race condition). But no effect.

[elimintz]

Thanks for the example. I looked at it and the problem seems to be with Quasar. The trigger method is in fact executed but there is no resize emitted. I think it is a Quasar bug, but not 100% sure.

However, the initial resize event is emitted and the reason it does not get to the server, is because it is emitted before the websocket connection is established. So far the event handler would ignore such events. I have made a change for this to be handled. Please add the line:

setTimeout(function(){ eventHandler(props, event, form_data, aux); }, 100);

between lines 14 and 15 here: https://github.com/elimintz/justpy/blob/master/justpy/templates/js/event_handler.js#L14

It will be a permanent part of the next version, but should work with the above change. Thank you for highlighting this issue.

[docm64]

Hi elimintz,
Thanks for this quick fix. I applied it and the initial 'resize' event is now working. 👍
Would be great if the next version also includes the QResizeObserver