mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 06:20:11 +00:00
Summary Fully Refactored the Load3D module to improve architecture and maintainability by consolidating functionality into a centralized composable pattern and simplifying component structure. and support VueNodes system Changes - Architecture: Introduced new useLoad3d composable to centralize 3D loading logic and state management - Component Simplification: Removed redundant components (Load3DAnimation.vue, Load3DAnimationScene.vue, PreviewManager.ts) - Support VueNodes - improve config store - remove lineart output due Animation doesnot support it, may add it back later - remove Preview screen and keep scene in fixed ratio in load3d (not affect preview3d) - improve record video feature which will already record video by same ratio as scene Need BE change https://github.com/comfyanonymous/ComfyUI/pull/10025 https://github.com/user-attachments/assets/9e038729-84a0-45ad-b0f2-11c57d7e0c9a ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5765-refactor-refactor-load3d-2796d73d365081728297cc486e2e9052) by [Unito](https://www.unito.io)
73 lines
1.8 KiB
Vue
73 lines
1.8 KiB
Vue
<template>
|
|
<div
|
|
ref="container"
|
|
class="relative h-full w-full"
|
|
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
|
|
ref="loadingOverlayRef"
|
|
: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/load3d/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 loadingOverlayRef = ref<InstanceType<typeof LoadingOverlay> | 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>
|