diff --git a/callbacks/control_bar.py b/callbacks/control_bar.py index ad6537d8..5e0b1c83 100644 --- a/callbacks/control_bar.py +++ b/callbacks/control_bar.py @@ -1,4 +1,14 @@ -from dash import Input, Output, State, callback, Patch, ALL, ctx, clientside_callback +from dash import ( + Input, + Output, + State, + callback, + Patch, + ALL, + ctx, + clientside_callback, + no_update, +) import dash_mantine_components as dmc import json from utils.data_utils import convert_hex_to_rgba, data @@ -6,6 +16,11 @@ @callback( Output("image-viewer", "figure", allow_duplicate=True), + Output("open-freeform", "style"), + Output("closed-freeform", "style"), + Output("circle", "style"), + Output("rectangle", "style"), + Output("drawing-off", "style"), Input("open-freeform", "n_clicks"), Input("closed-freeform", "n_clicks"), Input("circle", "n_clicks"), @@ -17,17 +32,27 @@ def annotation_mode(open, closed, circle, rect, off_mode): """This callback determines which drawing mode the graph is in""" patched_figure = Patch() triggered = ctx.triggered_id + open_style = {"border": "1px solid"} + close_style = {"border": "1px solid"} + circle_style = {"border": "1px solid"} + rect_style = {"border": "1px solid"} + pan_style = {"border": "1px solid"} if triggered == "open-freeform" and open > 0: patched_figure["layout"]["dragmode"] = "drawopenpath" + open_style = {"border": "3px solid black"} if triggered == "closed-freeform" and closed > 0: patched_figure["layout"]["dragmode"] = "drawclosedpath" + close_style = {"border": "3px solid black"} if triggered == "circle" and circle > 0: patched_figure["layout"]["dragmode"] = "drawcircle" + circle_style = {"border": "3px solid black"} if triggered == "rectangle" and rect > 0: patched_figure["layout"]["dragmode"] = "drawrect" + rect_style = {"border": "3px solid black"} if triggered == "drawing-off" and off_mode > 0: patched_figure["layout"]["dragmode"] = "pan" - return patched_figure + pan_style = {"border": "3px solid black"} + return patched_figure, open_style, close_style, circle_style, rect_style, pan_style @callback( diff --git a/callbacks/image_viewer.py b/callbacks/image_viewer.py index 779cb089..a10504e8 100644 --- a/callbacks/image_viewer.py +++ b/callbacks/image_viewer.py @@ -30,7 +30,7 @@ def render_image( margin=dict(l=0, r=0, t=0, b=0), xaxis=dict(visible=False), yaxis=dict(visible=False), - dragmode="pan", + dragmode="drawopenpath", height=620, width=620, paper_bgcolor="rgba(0,0,0,0)", diff --git a/components/control_bar.py b/components/control_bar.py index dcf502e2..f6f2a172 100644 --- a/components/control_bar.py +++ b/components/control_bar.py @@ -123,68 +123,63 @@ def layout(): ), dmc.Space(h=20), dmc.Text("Annotation mode", size="sm"), - dmc.Grid( + dmc.Group( + spacing="xs", + grow=True, children=[ - dmc.Col( - span=7, - children=[ - dmc.Button( - "Open Freeform", - id="open-freeform", - variant="outline", - color="gray", - leftIcon=DashIconify(icon="mdi:draw"), - style={"width": "100%"}, - ), - dmc.Space(h=5), - dmc.Button( - "Closed Freeform", - id="closed-freeform", - variant="outline", - color="gray", - leftIcon=DashIconify( - icon="fluent:draw-shape-20-regular" - ), - style={"width": "100%"}, + dmc.Tooltip( + dmc.ActionIcon( + id="open-freeform", + variant="outline", + color="gray", + children=DashIconify(icon="mdi:draw"), + style={"border": "3px solid black"}, + ), + label="Open Freeform", + ), + dmc.Tooltip( + dmc.ActionIcon( + id="closed-freeform", + variant="outline", + color="gray", + children=DashIconify( + icon="fluent:draw-shape-20-regular" ), - ], + ), + label="Closed Freeform", ), - dmc.Col( - span=5, - children=[ - dmc.Button( - "Circle", - id="circle", - variant="outline", - color="gray", - leftIcon=DashIconify( - icon="gg:shape-circle" - ), - style={"width": "100%"}, + dmc.Tooltip( + dmc.ActionIcon( + id="circle", + variant="outline", + color="gray", + children=DashIconify( + icon="gg:shape-circle" ), - dmc.Space(h=5), - dmc.Button( - "Rectangle", - id="rectangle", - variant="outline", - color="gray", - leftIcon=DashIconify( - icon="gg:shape-square" - ), - style={"width": "100%"}, + ), + label="Circle", + ), + dmc.Tooltip( + dmc.ActionIcon( + id="rectangle", + variant="outline", + color="gray", + children=DashIconify( + icon="gg:shape-square" ), - ], + ), + label="Rectangle", ), - ] - ), - dmc.Space(h=5), - dmc.Button( - "Stop Drawing", - id="drawing-off", - variant="outline", - color="gray", - leftIcon=DashIconify(icon="el:off"), - style={"width": "100%"}, + dmc.Tooltip( + dmc.ActionIcon( + id="drawing-off", + variant="outline", + color="gray", + children=DashIconify(icon="el:off"), + ), + label="Stop Drawing", + ), + ], ), dmc.Space(h=20), dmc.Text("Paintbrush size", size="sm"),