diff --git a/assets/style.css b/assets/style.css index 2a14911..046caac 100644 --- a/assets/style.css +++ b/assets/style.css @@ -132,4 +132,14 @@ body { .mantine-Text-root.mantine-Modal-title { font-weight: 700 !important; +} + +/* used to display viewfinder */ +.visible { + display: block; +} + +/* used to hide viewfinder */ +.hidden { + display: none; } \ No newline at end of file diff --git a/callbacks/image_viewer.py b/callbacks/image_viewer.py index a351660..d574c72 100644 --- a/callbacks/image_viewer.py +++ b/callbacks/image_viewer.py @@ -210,6 +210,17 @@ def keybind_image_slider( return new_slice, notification +@callback( + Output("image-viewfinder", "className", allow_duplicate=True), + Input("toggle-viewfinder", "checked"), + prevent_initial_call=True, +) +def toggle_viewdinfer(viewfinder_enabled): + if viewfinder_enabled: + return "visible" + return "hidden" + + @callback( Output("image-viewfinder", "figure", allow_duplicate=True), Input("image-viewer", "relayoutData"), diff --git a/components/control_bar.py b/components/control_bar.py index 02f29a5..42bfde2 100644 --- a/components/control_bar.py +++ b/components/control_bar.py @@ -659,6 +659,7 @@ def drawer_section(children): ), create_reset_view_affix(), create_info_card_affix(), + create_viewfinder_affix(), dmc.NotificationsProvider(html.Div(id="notifications-container")), dcc.Download(id="export-annotation-metadata"), dcc.Download(id="export-annotation-mask"), @@ -711,6 +712,25 @@ def create_reset_view_affix(): ) +def create_viewfinder_affix(): + return dmc.Affix( + position={"top": 10, "right": 10}, + zIndex=9999999, + children=_tooltip( + "Toggle viewfinder", + dmc.Switch( + size="md", + radius="lg", + id="toggle-viewfinder", + checked=True, + onLabel="ON", + offLabel="OFF", + color="gray", + ), + ), + ) + + def create_info_card_affix(): return dmc.Affix( position={"bottom": 20, "right": 20}, diff --git a/components/image_viewer.py b/components/image_viewer.py index f52f035..ce06516 100644 --- a/components/image_viewer.py +++ b/components/image_viewer.py @@ -37,7 +37,6 @@ def layout(): "width": "100vw", "height": "100vh", "position": "fixed", - "zIndex": 1, }, ), ], @@ -49,8 +48,8 @@ def layout(): config={"displayModeBar": False}, style={ "position": "absolute", - "top": "30px", - "right": "10px", + "top": "35px", + "right": "15px", }, ), ],