Remove image editor (#1308)

* remove tui image editor

* remove dep

ui/packages/image/package.json

@@ -13,7 +13,6 @@
 		"@gradio/upload": "workspace:^0.0.1",
 		"cropperjs": "^1.5.12",
 		"lazy-brush": "^1.0.1",
-		"resize-observer-polyfill": "^1.5.1",
-		"tui-image-editor": "^3.15.2"
+		"resize-observer-polyfill": "^1.5.1"
 	}
 }

ui/packages/image/src/Image.svelte

@@ -7,7 +7,6 @@
 	import Sketch from "./Sketch.svelte";
 	import Webcam from "./Webcam.svelte";
 	import ModifySketch from "./ModifySketch.svelte";
-	import ImageEditor from "./ImageEditor.svelte";
 
 	import { Upload, ModifyUpload } from "@gradio/upload";
 
@@ -24,7 +23,6 @@
 	export let streaming: boolean = false;
 	export let pending: boolean = false;
 
-	let mode: "edit" | "view" = "view";
 	let sketch: Sketch;
 
 	function handle_upload({ detail }: CustomEvent<string>) {
@@ -38,7 +36,6 @@
 
 	function handle_save({ detail }: { detail: string }) {
 		value = detail;
-		mode = "view";
 		dispatch(streaming ? "stream" : "edit");
 	}
 
@@ -94,14 +91,8 @@
 		{/if}
 	{:else if tool === "select"}
 		<Cropper image={value} on:crop={handle_save} />
+		<ModifyUpload on:clear={(e) => (handle_clear(e), (tool = "editor"))} />
 	{:else if tool === "editor"}
-		{#if mode === "edit"}
-			<ImageEditor
-				{value}
-				on:cancel={() => (mode = "view")}
-				on:save={handle_save}
-			/>
-		{/if}
 		<ModifyUpload
 			on:edit={() => (tool = "select")}
 			on:clear={handle_clear}
@@ -113,20 +104,3 @@
 		<img class="w-full h-full object-contain" src={value} alt="" />
 	{/if}
 </div>
-
-<style lang="postcss">
-	:global(.image_editor_buttons) {
-		width: 800px;
-		@apply flex justify-end gap-1;
-	}
-	:global(.image_editor_buttons button) {
-		@apply px-2 py-1 text-xl bg-black text-white font-semibold rounded-t;
-	}
-	:global(.tui-image-editor-header-buttons) {
-		@apply hidden;
-	}
-	:global(.tui-colorpicker-palette-button) {
-		width: 12px;
-		height: 12px;
-	}
-</style>

ui/packages/image/src/ImageEditor.svelte

@@ -1,46 +0,0 @@
-<script lang="ts">
-	import ImageEditor from "tui-image-editor";
-
-	import { createEventDispatcher, onMount } from "svelte";
-
-	export let value: string;
-	let el: HTMLDivElement;
-	let editor: ImageEditor;
-
-	const dispatch = createEventDispatcher();
-
-	function create_editor() {
-		editor = new ImageEditor(el, {
-			usageStatistics: false,
-			includeUI: {
-				loadImage: {
-					path: value,
-					name: "Edit Image"
-				},
-				menuBarPosition: "left",
-				uiSize: {
-					width: "800px",
-					height: "600px"
-				}
-			},
-			cssMaxWidth: 700,
-			cssMaxHeight: 500,
-			selectionStyle: {
-				cornerSize: 20,
-				rotatingPointOffset: 70
-			}
-		});
-	}
-
-	onMount(create_editor);
-</script>
-
-<div
-	class="fixed w-screen h-screen top-0 left-0 bg-black bg-opacity-50 z-40 flex flex-col justify-center items-center"
->
-	<div class="image_editor_buttons">
-		<button on:click={() => dispatch("save", editor.toDataURL())}>Save</button>
-		<button on:click={() => dispatch("cancel")}>Cancel</button>
-	</div>
-	<div bind:this={el} />
-</div>