How to Group or lock multiple rectangles for resizing?

[Tech_data]

Summary

I am trying to draw multiple rectangles together, but i am not able to resize or position them proportionally.

For example: If I resize rectangle 0, I want rectangle 1 and rectangle 2 and other rectangles to be resized proportionally as shown in the attached picture.

[blackary]

That doesn’t seem like it’s related very closely to Streamlit – are you using a streamlit component to create that drawing?

[Tech_data]

That is a good question. Thank you.

Ya, we are building a web page which has many components like table, charts, image.

Here my query is , the image I have shared is the mechanical component, where the end user will give the width, height , x and y axis as input and the same image has to be shown.

[blackary]

Could you please share a minimal code snippet that shows what you are trying to do? How are you resizing the rectangles? Is this some component where you can click and drag to change the image? Or are you using native streamlit widgets to generate the image?

[Tech_data]

import streamlit as st
import matplotlib.pyplot as plt

# Create two columns
col1, col2 = st.columns(2)

# Add input fields to first column
with col1:
    width0 = st.number_input('Enter width of rectangle 1:')
    mid_width = width0/2
    height0 = st.number_input('Enter height of rectangle 1:')
    x0 = st.number_input('Enter x-coordinate of rectangle 1:')
    if st.button('center x'):
        x0 = 5 - mid_width
    y0 = st.number_input('Enter y-coordinate of rectangle 1:')

 width3 = (width0)*0.6
    height3 = (height0)*2
    x3 = x0 +(x0*0.25)
    y3 = y0- height3
    

with col2:
    fig, ax = plt.subplots()
    ax.add_patch(plt.Rectangle((x0, y0), width0, height0, fill=False, color='black'))
    ax.add_patch(plt.Rectangle((x3, y3), width3, height3, fill=False, color='black'))
    # ax.add_patch(plt.Rectangle((x3, y3), width3, height3, fill=False, color='black'))
    # ax.add_patch(plt.Rectangle((x4, y4), width4, height4, fill=False, color='black'))
    ax.set_xlim([0, 10])
    ax.set_ylim([0, 10])
    ax.set_aspect('equal')
    st.pyplot(fig)

This is the code used to resize adjacent rectangle. For now I am only looking to create 2 rectangles (as shown in the attached image).

Is there any other standard way to do this other than mathematical guess.?

Final goal is to achieve as shown in the attached image.

[blackary]

This seems more like a Geometry problem than anything else. If the goal is simply to make the bottom rectangle always centered on the top rectangle, you can do that with

x3 = x0 + (width0 * 0.5) - (width3 * 0.5)

[Tech_data]

Thank you for the reply.