Enabling/disabling mousemove odd behavior

[jimthouston]

I have been playing with nicegui for a couple weeks. At this time of year I think I might do a GUI for an open source tax program. I'm playing with overlaying input fields over a PDF form.

Today I was trying to drawing a rubber band box by clicking and dragging the mouse.
Here is what I tried:

from nicegui import events, ui

mdx, mdy = 0, 0
down = False

def mouse_handler(e: events.MouseEventArguments):
    #ui.notify(f'{e.type} at ({e.image_x:.1f}, {e.image_y:.1f})')

    global down, mdx, mdy
    x,y = e.image_x, e.image_y
    ii = e.sender
    if e.type == 'mousedown':
        down = True
        print(f'mousedown x,y={x},{y}')
        mdx, mdy = x, y
        # ii.events = ['mousedown', 'mouseup', 'mousemove']
        ii._props['events'] = ['mousedown', 'mouseup', 'mousemove']
        ii.content += f'<circle cx="{x}" cy="{y}" r="15" fill="none" stroke="red" stroke-width="4" />'
    if e.type == 'mouseup':
        down = False
        print(f'mouseup x,y={x},{y}')
        # ii.events = ['mousedown', 'mouseup']
        ii._props['events'] = ['mousedown', 'mouseup']
#    if e.type == 'mousemove':
    if down and e.type == 'mousemove':
        h = abs(y - mdy)
        w = abs(x - mdx)
        x = min(x, mdx)
        y = min(y, mdy)
        ii.content = f'<rect x="{x}" y="{y}" width={w} height={h} fill="none" stroke="black" stroke-width="1" />'
        print(f'mousemove x={x} y={y} h={h} w={w}')

src = 'https://picsum.photos/id/565/640/360'
ii = ui.interactive_image(src, on_mouse=mouse_handler,
    events=['mousedown', 'mouseup'])

ui.run()

I tried enabling the mousemove events on mousedown and turning them off on mouseup.
There are a few things which surprised me. I thought that I could enable the
mousemove event with: ii.events = ['mousedown', 'mouseup', 'mousemove']
I found that I needed to use ii._props['events'] .
I also found that changing the events wasn't enough. I'm setting the context to draw a red circle. If I comment out this line, I never see a mousemove event.
The disable of the mousemove event doesn't take effect immediately so I need to check if I have seen the mouseup event and discard a mousemove event.

I also tried using the generic ii.on('mousemove', on_move) and was disappointed to find that the argument to on_move wasn't the same as the events function.

I guess I'm guilty of optimizing too soon. Running top, I don't see a difference in CPU load when I'm holding the mouse button and dragging the mouse around. I tried doing something similar last year using justpy and used javascript to draw the box.

Is a cleaner way to do this?

[falkoschindler]

Hi @jimthouston,

We actually never thought about changing the event list at runtime. Therefore there's no public .events property and you need to access the private _props dictionary. After doing so, you need to inform the client about the change by calling ii.update(). But you can also use the public .props() method, which calls update() internally. To assign an array to the "events" prop, you can use a colon prefix ":" to indicate a JavaScript expression that needs to be evaluated on the client:

state = {'down': False, 'x0': 0.0, 'y0': 0.0}

def mouse_handler(e: events.MouseEventArguments):
    if e.type == 'mousedown':
        state.update(down=True, x0=e.image_x, y0=e.image_y)
        ii.props(''':events="['mousedown', 'mouseup', 'mousemove']"''')
    if e.type == 'mouseup':
        state.update(down=False)
        ii.props(''':events="['mousedown', 'mouseup']"''')
    if e.type == 'mousemove' and state['down']:
        x = min(e.image_x, state['x0'])
        y = min(e.image_y, state['y0'])
        w = abs(e.image_x - state['x0'])
        h = abs(e.image_y - state['y0'])
        ii.set_content(f'<rect x="{x}" y="{y}" width="{w}" height="{h}" fill="none" stroke="black" />')

src = 'https://picsum.photos/id/565/640/360'
ii = ui.interactive_image(src, on_mouse=mouse_handler, events=['mousedown', 'mouseup'])