[refactor] refactor load3d (#5765)

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)

src/components/load3d/Load3DScene.vue

@@ -1,238 +1,72 @@
 <template>
-  <div ref="container" class="relative h-full w-full">
-    <LoadingOverlay ref="loadingOverlayRef" />
+  <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 { onMounted, onUnmounted, ref, toRaw, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 import LoadingOverlay from '@/components/load3d/LoadingOverlay.vue'
-import type Load3d from '@/extensions/core/load3d/Load3d'
-import type Load3dAnimation from '@/extensions/core/load3d/Load3dAnimation'
-import type {
-  CameraType,
-  MaterialMode,
-  UpDirection
-} from '@/extensions/core/load3d/interfaces'
-import { t } from '@/i18n'
-import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import type { CustomInputSpec } from '@/schemas/nodeDef/nodeDefSchemaV2'
-import { useLoad3dService } from '@/services/load3dService'
+import { useLoad3dDrag } from '@/composables/useLoad3dDrag'
 
 const props = defineProps<{
-  node: LGraphNode
-  inputSpec: CustomInputSpec
-  backgroundColor: string
-  showGrid: boolean
-  lightIntensity: number
-  fov: number
-  cameraType: CameraType
-  showPreview: boolean
-  backgroundImage: string
-  upDirection: UpDirection
-  materialMode: MaterialMode
-  edgeThreshold?: number
-  extraListeners?: Record<string, (value: any) => void>
+  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 node = ref(props.node)
-const load3d = ref<Load3d | Load3dAnimation | null>(null)
 const loadingOverlayRef = ref<InstanceType<typeof LoadingOverlay> | null>(null)
 
-const eventConfig = {
-  materialModeChange: (value: string) =>
-    emit('materialModeChange', value as MaterialMode),
-  backgroundColorChange: (value: string) =>
-    emit('backgroundColorChange', value),
-  lightIntensityChange: (value: number) => emit('lightIntensityChange', value),
-  fovChange: (value: number) => emit('fovChange', value),
-  cameraTypeChange: (value: string) =>
-    emit('cameraTypeChange', value as CameraType),
-  showGridChange: (value: boolean) => emit('showGridChange', value),
-  showPreviewChange: (value: boolean) => emit('showPreviewChange', value),
-  backgroundImageChange: (value: string) =>
-    emit('backgroundImageChange', value),
-  backgroundImageLoadingStart: () =>
-    loadingOverlayRef.value?.startLoading(t('load3d.loadingBackgroundImage')),
-  backgroundImageLoadingEnd: () => loadingOverlayRef.value?.endLoading(),
-  upDirectionChange: (value: string) =>
-    emit('upDirectionChange', value as UpDirection),
-  edgeThresholdChange: (value: number) => emit('edgeThresholdChange', value),
-  modelLoadingStart: () =>
-    loadingOverlayRef.value?.startLoading(t('load3d.loadingModel')),
-  modelLoadingEnd: () => loadingOverlayRef.value?.endLoading(),
-  materialLoadingStart: () =>
-    loadingOverlayRef.value?.startLoading(t('load3d.switchingMaterialMode')),
-  materialLoadingEnd: () => loadingOverlayRef.value?.endLoading(),
-  exportLoadingStart: (message: string) => {
-    loadingOverlayRef.value?.startLoading(message || t('load3d.exportingModel'))
-  },
-  exportLoadingEnd: () => {
-    loadingOverlayRef.value?.endLoading()
-  },
-  recordingStatusChange: (value: boolean) =>
-    emit('recordingStatusChange', value)
-} as const
-
-watch(
-  () => props.showPreview,
-  (newValue) => {
-    if (load3d.value) {
-      const rawLoad3d = toRaw(load3d.value) as Load3d
-
-      rawLoad3d.togglePreview(newValue)
-    }
-  }
-)
-
-watch(
-  () => props.cameraType,
-  (newValue) => {
-    if (load3d.value) {
-      const rawLoad3d = toRaw(load3d.value) as Load3d
-
-      rawLoad3d.toggleCamera(newValue)
-    }
-  }
-)
-
-watch(
-  () => props.fov,
-  (newValue) => {
-    if (load3d.value) {
-      const rawLoad3d = toRaw(load3d.value) as Load3d
-
-      rawLoad3d.setFOV(newValue)
-    }
-  }
-)
-
-watch(
-  () => props.lightIntensity,
-  (newValue) => {
-    if (load3d.value) {
-      const rawLoad3d = toRaw(load3d.value) as Load3d
-
-      rawLoad3d.setLightIntensity(newValue)
-    }
-  }
-)
-
-watch(
-  () => props.showGrid,
-  (newValue) => {
-    if (load3d.value) {
-      const rawLoad3d = toRaw(load3d.value) as Load3d
-
-      rawLoad3d.toggleGrid(newValue)
-    }
-  }
-)
-
-watch(
-  () => props.backgroundColor,
-  (newValue) => {
-    if (load3d.value) {
-      const rawLoad3d = toRaw(load3d.value) as Load3d
-
-      rawLoad3d.setBackgroundColor(newValue)
-    }
-  }
-)
-
-watch(
-  () => props.backgroundImage,
-  async (newValue) => {
-    if (load3d.value) {
-      const rawLoad3d = toRaw(load3d.value) as Load3d
-
-      await rawLoad3d.setBackgroundImage(newValue)
-    }
-  }
-)
-
-watch(
-  () => props.upDirection,
-  (newValue) => {
-    if (load3d.value) {
-      const rawLoad3d = toRaw(load3d.value) as Load3d
-
-      rawLoad3d.setUpDirection(newValue)
-    }
-  }
-)
-
-watch(
-  () => props.materialMode,
-  (newValue) => {
-    if (load3d.value) {
-      const rawLoad3d = toRaw(load3d.value) as Load3d
-
-      rawLoad3d.setMaterialMode(newValue)
-    }
-  }
-)
-
-watch(
-  () => props.edgeThreshold,
-  (newValue) => {
-    if (load3d.value && newValue) {
-      const rawLoad3d = toRaw(load3d.value) as Load3d
-
-      rawLoad3d.setEdgeThreshold(newValue)
-    }
-  }
-)
-
-const emit = defineEmits<{
-  (e: 'materialModeChange', materialMode: MaterialMode): void
-  (e: 'backgroundColorChange', color: string): void
-  (e: 'lightIntensityChange', lightIntensity: number): void
-  (e: 'fovChange', fov: number): void
-  (e: 'cameraTypeChange', cameraType: CameraType): void
-  (e: 'showGridChange', showGrid: boolean): void
-  (e: 'showPreviewChange', showPreview: boolean): void
-  (e: 'backgroundImageChange', backgroundImage: string): void
-  (e: 'upDirectionChange', upDirection: UpDirection): void
-  (e: 'edgeThresholdChange', threshold: number): void
-  (e: 'recordingStatusChange', status: boolean): void
-}>()
-
-const handleEvents = (action: 'add' | 'remove') => {
-  if (!load3d.value) return
-
-  Object.entries(eventConfig).forEach(([event, handler]) => {
-    const method = `${action}EventListener` as const
-    load3d.value?.[method](event, handler)
+const { isDragging, dragMessage, handleDragOver, handleDragLeave, handleDrop } =
+  useLoad3dDrag({
+    onModelDrop: async (file) => {
+      if (props.onModelDrop) {
+        await props.onModelDrop(file)
+      }
+    },
+    disabled: computed(() => props.isPreview)
   })
 
-  if (props.extraListeners) {
-    Object.entries(props.extraListeners).forEach(([event, handler]) => {
-      const method = `${action}EventListener` as const
-      load3d.value?.[method](event, handler)
-    })
-  }
-}
-
 onMounted(() => {
   if (container.value) {
-    load3d.value = useLoad3dService().registerLoad3d(
-      node.value as LGraphNode,
-      container.value,
-      props.inputSpec
-    )
+    void props.initializeLoad3d(container.value)
   }
-  handleEvents('add')
 })
 
 onUnmounted(() => {
-  handleEvents('remove')
-  useLoad3dService().removeLoad3d(node.value as LGraphNode)
-})
-
-defineExpose({
-  load3d
+  props.cleanup()
 })
 </script>