async callback and ui element with Element.on method

[SebastienDorgan]

Hi,

I try to implement a drop and drop mechanism to draw a flow chart.

I am starting to get an interesting result but I face a problem that is blocking me.
I need to define asynchronous callbacks in which I can add graphical components, I have tried a lot of different things but the result stays the same:

  File "/home/sdorgan/miniconda3/envs/shunter/lib/python3.11/site-packages/nicegui/globals.py", line 76, in get_slot
    return get_slot_stack()[-1]
           ~~~~~~~~~~~~~~~~^^^^
IndexError: list index out of range

To be clearer, this code is working:

def bind_drag_events_list(card: ui.card, app: Application):
    def on_drag_end(evt: Any):
        x = float(evt["args"]["clientX"])
        y = float(evt["args"]["clientY"])
        # assert canvas is not None
        # rec = await get_element_bounding_rectangle(canvas.id)
        rec = canvas_rectangle.content
        if rec is not None and inside(x, y, rec):
            absolute_app_card(app, x - rec.x, y - rec.y)

    card.on("dragend", on_drag_end, ["clientX", "clientY"])

But if I make this function asynchronous and uncomment, I can call get_element_bounding_rectangle but absolute_app_card raises the exception.
get_element_bounding_rectangle

async def get_element_bounding_rectangle(elt_id: int) -> Rectangle | None:
    elt = await ui.run_javascript(f'document.getElementById("{elt_id}").getBoundingClientRect()', timeout=2.)
    if elt is not None:
        return Rectangle.parse_obj(elt)
    return None

absolute_app_card

def absolute_app_card(app: Application, x: float, y: float):
    with ui.card().tight().classes("rounded px-2 py-1 -my-1 absolute h-15 w-60").props("draggable").style(
        f"top: {y}px; left: {x}px;"
    ) as card:
        bind_drag_events_canvas(card)
        card_content(app)

Can you help me?

[falkoschindler]

It looks like there is a limitation in the generic event subscription using .on(). Here is a minimum reproduction:

import asyncio
from nicegui import ui

async def handle_click():
    await asyncio.sleep(0.1)
    ui.notify('clicked')

ui.button('Works', on_click=handle_click)
ui.button('Fails').on('click', lambda _: handle_click())

ui.run()

The event handler for on_click will automatically keep the current UI context open as long as some async function is awaited. .on() should do that as well. I'll open a new issue.

---

A workaround for you would be to explicitly set the context in on_drag_end somehow like this:

with card:
    absolute_app_card(app, x - rec.x, y - rec.y)

This way the ui.card() in absolute_app_card knows where to place the new card.

Let me know if this works.

[SebastienDorgan]

Unfortunately not, the original problem is that I need to refresh the bounding box of the card to prevent weird behaviors when the window is resized.

[falkoschindler]

Sorry, but I'm not sure if I understand the problem. Is it intended that absolute_app_card creates a new card every time?
Maybe you can strip down your code to a minimum example and describe again what is happening and what is supposed to happen.

[SebastienDorgan]

Yes, absolute_app_card creates a new card every time because the same card can be dropped several times.
The point is that I wanted to manage the resizing of the dropping area, thus I needed to know the new size of the dropping area before dropping.
At the end, it was not a good idea, I will keep the dropping area large (larger than the screen) and fixed sized and manage the window resizing using scrollbars.

[rodja]

The event subscription has become more generic in 1.1.4. Now async callbacks work as expected. See #305.

[SebastienDorgan]

Thank you very much!