mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-06 08:00:05 +00:00
d890e7568a
## Summary Currently the delay between user action and visual response is too long and it looks like it hasn't worked. This adds a visual indicator that the action is processing. ## Changes - add loading indicator while asset is deleting ## Screenshots (if applicable) (Artifically delayed deletion) https://github.com/user-attachments/assets/a9a8b9fe-896d-4666-b643-ec8b990f6444 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7906-Add-asset-deletion-progress-indicator-2e26d73d365081ed82b8e770ba3d0615) by [Unito](https://www.unito.io) --------- Co-authored-by: Alexander Brown <drjkl@comfy.org> Co-authored-by: Jin Yi <jin12cc@gmail.com>
68 lines
1.7 KiB
Vue
68 lines
1.7 KiB
Vue
<template>
|
|
<div
|
|
ref="container"
|
|
class="relative h-full w-full min-h-[200px]"
|
|
data-capture-wheel="true"
|
|
@pointerdown.stop
|
|
@pointermove.stop
|
|
@pointerup.stop
|
|
@mousedown.stop
|
|
@mousemove.stop
|
|
@mouseup.stop
|
|
@contextmenu.stop.prevent
|
|
@dragover.prevent.stop="handleDragOver"
|
|
@dragleave.stop="handleDragLeave"
|
|
@drop.prevent.stop="handleDrop"
|
|
>
|
|
<LoadingOverlay :loading="loading" :loading-message="loadingMessage" />
|
|
<div
|
|
v-if="!isPreview && isDragging"
|
|
class="pointer-events-none absolute inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
|
|
>
|
|
<div
|
|
class="rounded-lg border-2 border-dashed border-blue-400 bg-blue-500/20 px-6 py-4 text-lg font-medium text-blue-100"
|
|
>
|
|
{{ dragMessage }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
|
|
|
import LoadingOverlay from '@/components/common/LoadingOverlay.vue'
|
|
import { useLoad3dDrag } from '@/composables/useLoad3dDrag'
|
|
|
|
const props = defineProps<{
|
|
initializeLoad3d: (containerRef: HTMLElement) => Promise<void>
|
|
cleanup: () => void
|
|
loading: boolean
|
|
loadingMessage: string
|
|
onModelDrop?: (file: File) => void | Promise<void>
|
|
isPreview: boolean
|
|
}>()
|
|
|
|
const container = ref<HTMLElement | null>(null)
|
|
|
|
const { isDragging, dragMessage, handleDragOver, handleDragLeave, handleDrop } =
|
|
useLoad3dDrag({
|
|
onModelDrop: async (file) => {
|
|
if (props.onModelDrop) {
|
|
await props.onModelDrop(file)
|
|
}
|
|
},
|
|
disabled: computed(() => props.isPreview)
|
|
})
|
|
|
|
onMounted(() => {
|
|
if (container.value) {
|
|
void props.initializeLoad3d(container.value)
|
|
}
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
props.cleanup()
|
|
})
|
|
</script>
|