79 lines
1.7 KiB
Svelte
79 lines
1.7 KiB
Svelte
<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>
|