From 1151350ee4b2db163bd1a3e5c71c149d0eb1cff9 Mon Sep 17 00:00:00 2001
From: Austin Mroz <austin@comfy.org>
Date: Tue, 30 Dec 2025 21:09:05 -0800
Subject: [PATCH] Drag/drop support for linear mode

Causes some border woes which need fixing
---
 .../extensions/linearMode/DropZone.vue        | 37 +++++++++++++++++++
 src/views/LinearView.vue                      | 18 ++++++---
 2 files changed, 50 insertions(+), 5 deletions(-)
 create mode 100644 src/renderer/extensions/linearMode/DropZone.vue

diff --git a/src/renderer/extensions/linearMode/DropZone.vue b/src/renderer/extensions/linearMode/DropZone.vue
new file mode 100644
index 000000000..8bcf93ee7
--- /dev/null
+++ b/src/renderer/extensions/linearMode/DropZone.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+
+defineProps<{
+  onDragOver?: (e: DragEvent) => boolean
+  onDragDrop?: (e: DragEvent) => Promise<boolean> | boolean
+  dropIndicator?: { label?: string; iconClass?: string }
+}>()
+
+const canAcceptDrop = ref(false)
+</script>
+<template>
+  <drop-wrapper
+    v-if="onDragOver && onDragDrop"
+    :class="cn(canAcceptDrop && 'ring-1 ring-primary-500 bg-primary-500/10')"
+    @dragover.prevent="(e: DragEvent) => (canAcceptDrop = onDragOver!(e))"
+    @dragleave="canAcceptDrop = false"
+    @drop.stop.prevent="
+      (e: DragEvent) => {
+        onDragDrop!(e)
+        canAcceptDrop = false
+      }
+    "
+  >
+    <slot />
+    <div
+      v-if="dropIndicator"
+      class="flex flex-col items-center align-center border-dashed rounded-lg border grow-1 w-full border-border-subtle my-3"
+    >
+      <span v-if="dropIndicator.label" v-text="dropIndicator.label" />
+      <i v-if="dropIndicator.iconClass" :class="dropIndicator.iconClass" />
+    </div>
+  </drop-wrapper>
+  <slot v-else />
+</template>
diff --git a/src/views/LinearView.vue b/src/views/LinearView.vue
index 67933988d..04d6b29f4 100644
--- a/src/views/LinearView.vue
+++ b/src/views/LinearView.vue
@@ -35,6 +35,7 @@ import { useTelemetry } from '@/platform/telemetry'
 import { useWorkflowStore } from '@/platform/workflow/management/stores/workflowStore'
 import type { ComfyWorkflowJSON } from '@/platform/workflow/validation/schemas/workflowSchema'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
+import DropZone from '@/renderer/extensions/linearMode/DropZone.vue'
 import NodeWidgets from '@/renderer/extensions/vueNodes/components/NodeWidgets.vue'
 import WidgetInputNumberInput from '@/renderer/extensions/vueNodes/widgets/components/WidgetInputNumber.vue'
 import { app } from '@/scripts/app'
@@ -84,7 +85,9 @@ const nodeDatas = computed(() => {
       mode: 0,
       selected: false,
       executing: false,
-      widgets
+      widgets,
+      onDragOver: node.onDragOver,
+      onDragDrop: node.onDragDrop
     }
   }
   return graphNodes.value
@@ -573,12 +576,17 @@ onKeyStroke('ArrowUp', gotoPreviousOutput)
           <linear-widgets
             class="grow-1 justify-start flex-col overflow-y-auto contain-size *:max-h-100 flex"
           >
-            <NodeWidgets
+            <DropZone
               v-for="nodeData of nodeDatas"
               :key="nodeData.id"
-              :node-data
-              class="border-b-1 border-node-component-border pt-1 pb-2 last:border-none **:[.col-span-2]:grid-cols-1 not-has-[textarea]:flex-0"
-            />
+              :on-drag-over="nodeData.onDragOver"
+              :on-drag-drop="nodeData.onDragDrop"
+            >
+              <NodeWidgets
+                :node-data
+                class="border-b-1 border-node-component-border pt-1 pb-2 last:border-none **:[.col-span-2]:grid-cols-1 not-has-[textarea]:flex-0"
+              />
+            </DropZone>
           </linear-widgets>
           <linear-run-button
             class="p-4 pb-6 border-t border-node-component-border"