How to control rectangle resize in square aspect ratio?

šŸ“Š Plotly Python
1

Iā€™m currently working on image annotations in which Iā€™m looking for a possibility that the rectangle could be resized in a square aspect ratio.

In my attachment below, an editable rectangle worked perfectly but in my case but what I do want is an editable square that can be resized in a square aspect ratio because the square shape used to annotate the object in the image matters the most in my requirement.

Screen Shot 2021-05-07 at 10.22.49 AM
Screen Shot 2021-05-07 at 10.22.49 AM2694Ɨ1242 182 KB

Also, I would like to listen to the event when the user drags the point to resize the shape. Is it possible?

Here is an extracted code example in the attachment:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
  
import plotly.express as px
import pandas as pd
import json

import skimage
import skimage.io

image_url = 'wall.jpg' # url: "https://raw.githubusercontent.com/michaelbabyn/plot_data/master/bridge.jpg"
img = skimage.io.imread(image_url)
fig = px.imshow(img, binary_string=True)

fig.update_layout(dragmode="drawrect")

fig.add_shape(editable=True, type="rect",
  xref="x", yref="y",
  x0=200, y0=0,
  x1=300, y1=200,
  line=dict(
    color="RoyalBlue",
    width=1,  
  ),
  fillcolor="LightSkyBlue",
)
# Set dragmode and newshape properties; add modebar buttons
fig.update_layout(
  dragmode='drawrect',
  newshape=dict(line_color='cyan'),
  title_text='Drag to add annotations - use modebar to change drawing tool',
  height=680
)

config={
  'modeBarButtonsToAdd': [ 
    'drawline',
    'drawrect',
    'eraseshape'
  ]
}

app = dash.Dash(__name__)
app.layout = html.Div(
  [
    dcc.Graph(id="graph-pic", figure=fig, config=config),
  ]
)

if __name__ == "__main__":
  app.run_server(debug=True)