From 5798d999956a3c80c01f31705346ad5da1c2fd58 Mon Sep 17 00:00:00 2001 From: Richard Date: Sat, 31 Aug 2024 14:32:29 -0700 Subject: [PATCH 1/2] Add is_target to Click event Usage of is_target mainly works for me.box. For me.button / me.content_button it will almost always be false since the buttons are composed of other sub elements. There may be cases where it is true. Updated dialog usages to utilize `is_target`. Closes #268 --- demo/dialog.py | 25 +++++++++++++------ mesop/component_helpers/helper.py | 2 ++ mesop/components/button/button.ts | 4 +++ mesop/events/events.py | 3 ++- mesop/examples/testing/__init__.py | 3 +++ mesop/examples/testing/click_is_target.py | 25 +++++++++++++++++++ mesop/protos/ui.proto | 8 +++++- mesop/tests/e2e/click_is_target_test.ts | 19 ++++++++++++++ .../component_renderer/component_renderer.ts | 4 +++ 9 files changed, 83 insertions(+), 10 deletions(-) create mode 100644 mesop/examples/testing/click_is_target.py create mode 100644 mesop/tests/e2e/click_is_target_test.ts diff --git a/demo/dialog.py b/demo/dialog.py index e683cbd6a..0a80bb0ca 100644 --- a/demo/dialog.py +++ b/demo/dialog.py @@ -1,5 +1,7 @@ """Simple dialog that looks similar to Angular Component Dialog.""" +from typing import Callable + import mesop as me @@ -17,7 +19,10 @@ class State: def app(): state = me.state(State) - with dialog(state.is_open): + with dialog( + is_open=state.is_open, + on_click_background=on_click_close_background, + ): me.text("Delete File", type="headline-5") with me.box(): me.text(text="Would you like to delete cat.jpeg?") @@ -31,6 +36,12 @@ def app(): ) +def on_click_close_background(e: me.ClickEvent): + state = me.state(State) + if e.is_target: + state.is_open = False + + def on_click_close_dialog(e: me.ClickEvent): state = me.state(State) state.is_open = False @@ -42,18 +53,15 @@ def on_click_dialog_open(e: me.ClickEvent): @me.content_component -def dialog(is_open: bool): +def dialog(*, is_open: bool, on_click_background: Callable | None = None): """Renders a dialog component. The design of the dialog borrows from the Angular component dialog. So basically rounded corners and some box shadow. - One current drawback is that it's not possible to close the dialog - by clicking on the overlay background. This is due to - https://github.com/google/mesop/issues/268. - Args: is_open: Whether the dialog is visible or not. + on_click_background: Event handler for when background is clicked """ with me.box( style=me.Style( @@ -67,14 +75,15 @@ def dialog(is_open: bool): position="fixed", width="100%", z_index=1000, - ) + ), ): with me.box( + on_click=on_click_background, style=me.Style( place_items="center", display="grid", height="100vh", - ) + ), ): with me.box( style=me.Style( diff --git a/mesop/component_helpers/helper.py b/mesop/component_helpers/helper.py index eb41a2b94..e44a33259 100644 --- a/mesop/component_helpers/helper.py +++ b/mesop/component_helpers/helper.py @@ -470,9 +470,11 @@ def register_event_mapper( ClickEvent, lambda userEvent, key: ClickEvent( key=key.key, + is_target=userEvent.click.is_target, ), ) + runtime().register_event_mapper( InputEvent, lambda userEvent, key: InputEvent( diff --git a/mesop/components/button/button.ts b/mesop/components/button/button.ts index f40977de8..90eeb4602 100644 --- a/mesop/components/button/button.ts +++ b/mesop/components/button/button.ts @@ -1,6 +1,7 @@ import {MatButtonModule} from '@angular/material/button'; import {Component, Input} from '@angular/core'; import { + ClickEvent, UserEvent, Key, Type, @@ -37,6 +38,9 @@ export class ButtonComponent { const userEvent = new UserEvent(); userEvent.setHandlerId(this.config().getOnClickHandlerId()!); userEvent.setKey(this.key); + const click = new ClickEvent(); + click.setIsTarget(event.target === event.currentTarget); + userEvent.setClick(click); this.channel.dispatch(userEvent); } diff --git a/mesop/events/events.py b/mesop/events/events.py index 0a6c946d1..ec446ba90 100644 --- a/mesop/events/events.py +++ b/mesop/events/events.py @@ -13,9 +13,10 @@ class ClickEvent(MesopEvent): Attributes: key (str): key of the component that emitted this event. + is_target (bool): Whether the clicked target contains the event handler. """ - pass + is_target: bool @dataclass(kw_only=True) diff --git a/mesop/examples/testing/__init__.py b/mesop/examples/testing/__init__.py index 7fcced9cf..667b638be 100644 --- a/mesop/examples/testing/__init__.py +++ b/mesop/examples/testing/__init__.py @@ -1,3 +1,6 @@ +from mesop.examples.testing import ( + click_is_target as click_is_target, +) from mesop.examples.testing import ( complex_layout as complex_layout, ) diff --git a/mesop/examples/testing/click_is_target.py b/mesop/examples/testing/click_is_target.py new file mode 100644 index 000000000..d8b79eb15 --- /dev/null +++ b/mesop/examples/testing/click_is_target.py @@ -0,0 +1,25 @@ +import mesop as me + + +@me.stateclass +class State: + box_clicked: bool + button_clicked: bool + + +@me.page(path="/testing/click_is_target") +def page(): + state = me.state(State) + with me.box(on_click=on_click_box, style=me.Style(background="red")): + me.button("Click", on_click=on_click_button, type="flat") + me.text(f"Box clicked: {state.box_clicked}") + me.text(f"Button clicked: {state.button_clicked}") + + +def on_click_box(e: me.ClickEvent): + if e.is_target: + me.state(State).box_clicked = True + + +def on_click_button(e: me.ClickEvent): + me.state(State).button_clicked = True diff --git a/mesop/protos/ui.proto b/mesop/protos/ui.proto index ad9d866a7..b58e6c657 100644 --- a/mesop/protos/ui.proto +++ b/mesop/protos/ui.proto @@ -24,7 +24,7 @@ message QueryParam { repeated string values = 2; } -// Next ID: 16 +// Next ID: 17 message UserEvent { optional States states = 1; @@ -46,6 +46,7 @@ message UserEvent { ResizeEvent resize = 10; bytes bytes_value = 9; ChangePrefersColorScheme change_prefers_color_scheme = 14; + ClickEvent click = 16; } optional string state_token = 12; @@ -78,6 +79,11 @@ message ArgPathSegment { } } +// Click event parameters +message ClickEvent { + optional bool is_target = 1; +} + // This is a user-triggered navigation (e.g. go back/forwards) or a hot reload event. message NavigationEvent{ } diff --git a/mesop/tests/e2e/click_is_target_test.ts b/mesop/tests/e2e/click_is_target_test.ts new file mode 100644 index 000000000..ad3a13ba0 --- /dev/null +++ b/mesop/tests/e2e/click_is_target_test.ts @@ -0,0 +1,19 @@ +import {test, expect} from '@playwright/test'; + +test('is_target', async ({page}) => { + await page.goto('/testing/click_is_target'); + await expect(page.getByText('Box clicked: False')).toBeVisible(); + await expect(page.getByText('Button clicked: False')).toBeVisible(); + + await page.getByRole('button', {name: 'Click'}).click(); + await expect(page.getByText('Box clicked: False')).toBeVisible(); + await expect(page.getByText('Button clicked: True')).toBeVisible(); + + ( + await page.locator( + '//component-renderer[contains(@style, "background: red")]', + ) + ).click(); + await expect(page.getByText('Box clicked: True')).toBeVisible(); + await expect(page.getByText('Button clicked: True')).toBeVisible(); +}); diff --git a/mesop/web/src/component_renderer/component_renderer.ts b/mesop/web/src/component_renderer/component_renderer.ts index dea15c9a2..b46813660 100644 --- a/mesop/web/src/component_renderer/component_renderer.ts +++ b/mesop/web/src/component_renderer/component_renderer.ts @@ -11,6 +11,7 @@ import { } from '@angular/core'; import {CommonModule} from '@angular/common'; import { + ClickEvent, Component as ComponentProto, UserEvent, WebComponentType, @@ -414,6 +415,9 @@ Make sure the web component name is spelled the same between Python and JavaScri const userEvent = new UserEvent(); userEvent.setHandlerId(this._boxType.getOnClickHandlerId()!); userEvent.setKey(this.component.getKey()); + const click = new ClickEvent(); + click.setIsTarget(event.target === event.currentTarget); + userEvent.setClick(click); this.channel.dispatch(userEvent); } From ff00ef6ae543a597b560899a3f6ae18f1a5081de Mon Sep 17 00:00:00 2001 From: Richard Date: Sun, 1 Sep 2024 08:41:15 -0700 Subject: [PATCH 2/2] Address code review --- mesop/events/events.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/mesop/events/events.py b/mesop/events/events.py index ec446ba90..34ea32218 100644 --- a/mesop/events/events.py +++ b/mesop/events/events.py @@ -13,7 +13,7 @@ class ClickEvent(MesopEvent): Attributes: key (str): key of the component that emitted this event. - is_target (bool): Whether the clicked target contains the event handler. + is_target (bool): Whether the clicked target is the component which attached the event handler. """ is_target: bool