View parsed A1111 prompt info

src/lib/components/DropZone.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import { writable, type Writable } from "svelte/store";
+ import type ComfyApp from "./ComfyApp";
+
+ export let app: ComfyApp;
+ let a1111Prompt: Writable<any | null> = writable(null);
+ let dropZone: HTMLDivElement | null = null;
+ let disabled = false;
+
+ $: a1111Prompt = app.a1111Prompt;
+
+ $: disabled = a1111Prompt && $a1111Prompt;
+
+ $: if (disabled) {
+     hideDropZone();
+ }
+
+ function showDropZone() {
+     if (dropZone && !disabled)
+         dropZone.style.display = "block";
+ }
+
+ function hideDropZone() {
+     if (dropZone)
+         dropZone.style.display = "none";
+ }
+
+ function allowDrag(event: DragEvent) {
+     if (disabled)
+         return
+
+     if (event.dataTransfer != null && event.dataTransfer.items?.length > 0) {
+         event.dataTransfer.dropEffect = 'copy';
+         showDropZone();
+         event.preventDefault();
+     }
+ }
+
+ async function handleDrop(event: DragEvent) {
+     if (disabled)
+         return
+
+     event.preventDefault();
+     event.stopPropagation();
+     hideDropZone();
+
+     if (event.dataTransfer != null && event.dataTransfer.files.length > 0) {
+         await app.handleFile(event.dataTransfer.files[0]);
+     }
+ }
+</script>
+
+<svelte:window on:dragenter={showDropZone} />
+
+{#if !disabled}
+    <div id="dropzone"
+         class="dropzone"
+         bind:this={dropZone}
+         on:dragover={allowDrag}
+         on:dragleave={hideDropZone}
+         on:drop={handleDrop}
+    />
+{/if}
+
+<style lang="scss">
+ .dropzone {
+     box-sizing: border-box;
+     display: none;
+     position: fixed;
+     width: 100%;
+     height: 100%;
+     left: 0;
+     top: 0;
+     z-index: 99999;
+     background: #60a7dc80;
+     border: 4px dashed #60a7dc;
+ }
+</style>