drag

Author: jtydhr88

src/components/load3d/Load3D.vue

@@ -14,6 +14,7 @@
       :cleanup="cleanup"
       :loading="loading"
       :loading-message="loadingMessage"
+      :on-model-drop="handleModelDrop"
     />
     <div class="absolute top-0 left-0 w-full h-full pointer-events-none">
       <Load3DControls
@@ -128,6 +129,7 @@ const {
   handleClearRecording,
   handleBackgroundImageUpdate,
   handleExportModel,
+  handleModelDrop,
   cleanup
 } = useLoad3d(node as Ref<LGraphNode | null>)
 

src/components/load3d/Load3DScene.vue

@@ -10,29 +10,89 @@
     @mousemove.stop
     @mouseup.stop
     @contextmenu.stop.prevent
+    @dragover.prevent.stop="handleDragOver"
+    @dragleave.stop="handleDragLeave"
+    @drop.prevent.stop="handleDrop"
   >
     <LoadingOverlay
       ref="loadingOverlayRef"
       :loading="props.loading"
       :loading-message="props.loadingMessage"
     />
+    <div
+      v-if="isDragging"
+      class="absolute inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm pointer-events-none"
+    >
+      <div
+        class="px-6 py-4 bg-blue-500/20 border-2 border-dashed border-blue-400 rounded-lg text-blue-100 text-lg font-medium"
+      >
+        {{ dragMessage }}
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue'
 
 import LoadingOverlay from '@/components/load3d/LoadingOverlay.vue'
+import { t } from '@/i18n'
+import { useToastStore } from '@/platform/updates/common/toastStore'
 
 const props = defineProps<{
   initializeLoad3d: (containerRef: HTMLElement) => Promise<void>
   cleanup: () => void
   loading: boolean
   loadingMessage: string
+  onModelDrop?: (file: File) => void | Promise<void>
 }>()
 
 const container = ref<HTMLElement | null>(null)
 const loadingOverlayRef = ref<InstanceType<typeof LoadingOverlay> | null>(null)
+const isDragging = ref(false)
+const dragMessage = ref('')
+
+const SUPPORTED_EXTENSIONS = ['.gltf', '.glb', '.obj', '.fbx', '.stl']
+
+function isValidModelFile(file: File): boolean {
+  const fileName = file.name.toLowerCase()
+  return SUPPORTED_EXTENSIONS.some((ext) => fileName.endsWith(ext))
+}
+
+function handleDragOver(event: DragEvent) {
+  if (!event.dataTransfer) return
+
+  const hasFiles = event.dataTransfer.types.includes('Files')
+
+  if (!hasFiles) return
+
+  isDragging.value = true
+
+  event.dataTransfer.dropEffect = 'copy'
+  dragMessage.value = t('load3d.dropToLoad')
+}
+
+function handleDragLeave() {
+  isDragging.value = false
+}
+
+async function handleDrop(event: DragEvent) {
+  isDragging.value = false
+
+  if (!event.dataTransfer || !props.onModelDrop) return
+
+  const files = Array.from(event.dataTransfer.files)
+
+  if (files.length === 0) return
+
+  const modelFile = files.find(isValidModelFile)
+
+  if (modelFile) {
+    await props.onModelDrop(modelFile)
+  } else {
+    useToastStore().addAlert(t('load3d.unsupportedFileType'))
+  }
+}
 
 onMounted(() => {
   if (container.value) {

src/components/load3d/Load3dViewerContent.vue

@@ -11,7 +11,20 @@
         ref="containerRef"
         class="absolute w-full h-full comfy-load-3d-viewer"
         @resize="viewer.handleResize"
+        @dragover.prevent.stop="handleDragOver"
+        @dragleave.stop="handleDragLeave"
+        @drop.prevent.stop="handleDrop"
       />
+      <div
+        v-if="isDragging"
+        class="absolute inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm pointer-events-none"
+      >
+        <div
+          class="px-6 py-4 bg-blue-500/20 border-2 border-dashed border-blue-400 rounded-lg text-blue-100 text-lg font-medium"
+        >
+          {{ dragMessage }}
+        </div>
+      </div>
     </div>
 
     <div class="w-72 flex flex-col">
@@ -77,13 +90,24 @@ import ModelControls from '@/components/load3d/controls/viewer/ViewerModelContro
 import SceneControls from '@/components/load3d/controls/viewer/ViewerSceneControls.vue'
 import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
+import { useToastStore } from '@/platform/updates/common/toastStore'
 import { useLoad3dService } from '@/services/load3dService'
 import { useDialogStore } from '@/stores/dialogStore'
 
 const props = defineProps<{
   node: LGraphNode
 }>()
 
+// Drag and drop state
+const isDragging = ref(false)
+const dragMessage = ref('')
+const SUPPORTED_EXTENSIONS = ['.gltf', '.glb', '.obj', '.fbx', '.stl']
+
+function isValidModelFile(file: File): boolean {
+  const fileName = file.name.toLowerCase()
+  return SUPPORTED_EXTENSIONS.some((ext) => fileName.endsWith(ext))
+}
+
 const viewerContentRef = ref<HTMLDivElement>()
 const containerRef = ref<HTMLDivElement>()
 const mainContentRef = ref<HTMLDivElement>()
@@ -92,6 +116,41 @@ const mutationObserver = ref<MutationObserver | null>(null)
 
 const viewer = useLoad3dService().getOrCreateViewer(toRaw(props.node))
 
+function handleDragOver(event: DragEvent) {
+  if (!event.dataTransfer) return
+
+  const hasFiles = event.dataTransfer.types.includes('Files')
+
+  if (!hasFiles) return
+
+  isDragging.value = true
+
+  event.dataTransfer.dropEffect = 'copy'
+  dragMessage.value = t('load3d.dropToLoad')
+}
+
+function handleDragLeave() {
+  isDragging.value = false
+}
+
+async function handleDrop(event: DragEvent) {
+  isDragging.value = false
+
+  if (!event.dataTransfer) return
+
+  const files = Array.from(event.dataTransfer.files)
+
+  if (files.length === 0) return
+
+  const modelFile = files.find(isValidModelFile)
+
+  if (modelFile) {
+    await viewer.handleModelDrop(modelFile)
+  } else {
+    useToastStore().addAlert(t('load3d.unsupportedFileType'))
+  }
+}
+
 onMounted(async () => {
   const source = useLoad3dService().getLoad3d(props.node)
   if (source && containerRef.value) {

src/composables/useLoad3d.ts

@@ -373,6 +373,61 @@ export const useLoad3d = (nodeOrRef: LGraphNode | Ref<LGraphNode | null>) => {
     }
   }
 
+  const handleModelDrop = async (file: File) => {
+    if (!load3d) {
+      useToastStore().addAlert(t('toastMessages.no3dScene'))
+      return
+    }
+
+    const node = toRaw(nodeRef.value)
+    if (!node) return
+
+    try {
+      const resourceFolder =
+        (node.properties['Resource Folder'] as string) || ''
+
+      const subfolder = resourceFolder.trim()
+        ? `3d/${resourceFolder.trim()}`
+        : '3d'
+
+      loading.value = true
+      loadingMessage.value = t('load3d.uploadingModel')
+
+      const uploadedPath = await Load3dUtils.uploadFile(file, subfolder)
+
+      if (!uploadedPath) {
+        useToastStore().addAlert(t('toastMessages.fileUploadFailed'))
+        return
+      }
+
+      const modelUrl = api.apiURL(
+        Load3dUtils.getResourceURL(
+          ...Load3dUtils.splitFilePath(uploadedPath),
+          isPreview.value ? 'output' : 'input'
+        )
+      )
+
+      loadingMessage.value = t('load3d.loadingModel')
+      await load3d.loadModel(modelUrl)
+
+      const modelWidget = node.widgets?.find((w) => w.name === 'model_file')
+
+      if (modelWidget) {
+        const options = modelWidget.options as { values?: string[] } | undefined
+        if (options?.values && !options.values.includes(uploadedPath)) {
+          options.values.push(uploadedPath)
+        }
+        modelWidget.value = uploadedPath
+      }
+    } catch (error) {
+      console.error('Model drop failed:', error)
+      useToastStore().addAlert(t('toastMessages.failedToLoadModel'))
+    } finally {
+      loading.value = false
+      loadingMessage.value = ''
+    }
+  }
+
   const eventConfig = {
     materialModeChange: (value: string) => {
       modelConfig.value.materialMode = value as MaterialMode
@@ -483,6 +538,7 @@ export const useLoad3d = (nodeOrRef: LGraphNode | Ref<LGraphNode | null>) => {
     handleClearRecording,
     handleBackgroundImageUpdate,
     handleExportModel,
+    handleModelDrop,
     cleanup
   }
 }

src/composables/useLoad3dViewer.ts

@@ -10,6 +10,7 @@ import type {
 import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useToastStore } from '@/platform/updates/common/toastStore'
+import { api } from '@/scripts/api'
 import { useLoad3dService } from '@/services/load3dService'
 
 interface Load3dViewerState {
@@ -367,6 +368,49 @@ export const useLoad3dViewer = (node: LGraphNode) => {
     }
   }
 
+  const handleModelDrop = async (file: File) => {
+    if (!load3d) {
+      useToastStore().addAlert(t('toastMessages.no3dScene'))
+      return
+    }
+
+    try {
+      const resourceFolder =
+        (node.properties['Resource Folder'] as string) || ''
+      const subfolder = resourceFolder.trim()
+        ? `3d/${resourceFolder.trim()}`
+        : '3d'
+
+      const uploadedPath = await Load3dUtils.uploadFile(file, subfolder)
+
+      if (!uploadedPath) {
+        useToastStore().addAlert(t('toastMessages.fileUploadFailed'))
+        return
+      }
+
+      const modelUrl = api.apiURL(
+        Load3dUtils.getResourceURL(
+          ...Load3dUtils.splitFilePath(uploadedPath),
+          'input'
+        )
+      )
+
+      await load3d.loadModel(modelUrl)
+
+      const modelWidget = node.widgets?.find((w) => w.name === 'model_file')
+      if (modelWidget) {
+        const options = modelWidget.options as { values?: string[] } | undefined
+        if (options?.values && !options.values.includes(uploadedPath)) {
+          options.values.push(uploadedPath)
+        }
+        modelWidget.value = uploadedPath
+      }
+    } catch (error) {
+      console.error('Model drop failed:', error)
+      useToastStore().addAlert(t('toastMessages.failedToLoadModel'))
+    }
+  }
+
   const cleanup = () => {
     load3d?.remove()
     load3d = null
@@ -396,6 +440,7 @@ export const useLoad3dViewer = (node: LGraphNode) => {
     applyChanges,
     refreshViewport,
     handleBackgroundImageUpdate,
+    handleModelDrop,
     cleanup
   }
 }

src/locales/en/main.json

@@ -1689,7 +1689,10 @@
       "exportSettings": "Export Settings",
       "modelSettings": "Model Settings"
     },
-    "openIn3DViewer": "Open in 3D Viewer"
+    "openIn3DViewer": "Open in 3D Viewer",
+    "dropToLoad": "Drop 3D model to load",
+    "unsupportedFileType": "Unsupported file type (supports .gltf, .glb, .obj, .fbx, .stl)",
+    "uploadingModel": "Uploading 3D model..."
   },
   "toastMessages": {
     "nothingToQueue": "Nothing to queue",
@@ -1730,7 +1733,8 @@
     "failedToConvertToSubgraph": "Failed to convert items to subgraph",
     "failedToInitializeLoad3dViewer": "Failed to initialize 3D Viewer",
     "failedToLoadBackgroundImage": "Failed to load background image",
-    "failedToLoadModel": "Failed to load 3D model"
+    "failedToLoadModel": "Failed to load 3D model",
+    "modelLoadedSuccessfully": "3D model loaded successfully"
   },
   "auth": {
     "apiKey": {