Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

📈 Allowing component reset from Streamlit Application (Python) #148

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

📈 Allowing component reset from Streamlit Application (Python) #148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion streamlit_drawable_canvas/__init__.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ def st_canvas(
initial_drawing: dict = None,
display_toolbar: bool = True,
point_display_radius: int = 3,
reset_canvas: bool = False,
key=None,
) -> CanvasResult:
"""Create a drawing canvas in Streamlit app. Retrieve the RGBA image data into a 4D numpy array (r, g, b, alpha)
Expand Down Expand Up @@ -108,6 +109,8 @@ def st_canvas(
key: str
An optional string to use as the unique key for the widget.
Assign a key so the component is not remount every time the script is rerun.
reset_canvas: bool
Force resetting canvas to initial state from Python.

Returns
-------
Expand All @@ -123,7 +126,7 @@ def st_canvas(
background_image = _resize_img(background_image, height, width)
# Reduce network traffic and cache when switch another configure, use streamlit in-mem filemanager to convert image to URL
background_image_url = st_image.image_to_url(
background_image, width, True, "RGB", "PNG", f"drawable-canvas-bg-{md5(background_image.tobytes()).hexdigest()}-{key}"
background_image, width, True, "RGB", "PNG", f"drawable-canvas-bg-{md5(background_image.tobytes()).hexdigest()}-{key}"
)
background_image_url = st._config.get_option("server.baseUrlPath") + background_image_url
background_color = ""
Expand All @@ -149,6 +152,7 @@ def st_canvas(
displayRadius=point_display_radius,
key=key,
default=None,
resetCanvas=reset_canvas
)
if component_value is None:
return CanvasResult
Expand Down
15 changes: 15 additions & 0 deletions streamlit_drawable_canvas/frontend/src/DrawableCanvas.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ export interface PythonArgs {
initialDrawing: Object
displayToolbar: boolean
displayRadius: number
resetCanvas: boolean // Add this flag
}

/**
Expand All @@ -62,6 +63,7 @@ const DrawableCanvas = ({ args }: ComponentProps) => {
displayRadius,
initialDrawing,
displayToolbar,
resetCanvas, // Destructure the resetCanvas flag
}: PythonArgs = args

/**
Expand Down Expand Up @@ -192,6 +194,19 @@ const DrawableCanvas = ({ args }: ComponentProps) => {
forceStreamlitUpdate,
])

/**
* Handle canvas reset from Python side
*/
useEffect(() => {
if (resetCanvas) {
canvas.loadFromJSON(initialDrawing, () => {
canvas.renderAll()
resetState(initialDrawing)
Streamlit.setComponentValue({ canvasReset: true }) // Send confirmation to Streamlit
})
}
}, [resetCanvas, initialDrawing, canvas, resetState])

/**
* Render canvas w/ toolbar
*/
Expand Down