Trigger the "clear" event of Image Editor (#7817)

.changeset/nine-teeth-clean.md

@@ -0,0 +1,6 @@
+---
+"@gradio/imageeditor": patch
+"gradio": patch
+---
+
+fix:Trigger the "clear" event of Image Editor

js/imageeditor/shared/ImageEditor.svelte

@@ -67,6 +67,7 @@
 	export let bg = false;
 	export let sources: ("clipboard" | "webcam" | "upload")[];
 	const dispatch = createEventDispatcher<{
+		clear?: never;
 		save: void;
 	}>();
 	export let crop_constraint = false;
@@ -256,6 +257,7 @@
 		} else {
 			set_tool("bg");
 		}
+		dispatch("clear");
 	}
 
 	onMount(() => {

js/imageeditor/shared/InteractiveImageEditor.svelte

@@ -13,6 +13,7 @@
 </script>
 
 <script lang="ts">
+	import { createEventDispatcher } from "svelte";
 	import { type I18nFormatter } from "@gradio/utils";
 	import { prepare_files, upload, type FileData } from "@gradio/client";
 
@@ -41,6 +42,10 @@
 	};
 	export let transforms: "crop"[] = ["crop"];
 
+	const dispatch = createEventDispatcher<{
+		clear?: never;
+	}>();
+
 	let editor: ImageEditor;
 
 	function is_not_null(o: Blob | null): o is Blob {
@@ -118,6 +123,7 @@
 	bind:this={editor}
 	{changeable}
 	on:save
+	on:clear={() => dispatch("clear")}
 	bind:history
 	bind:bg
 	{sources}