Rearrange workflow tabs

src/components/topbar/WorkflowTabs.vue

@@ -8,11 +8,22 @@
     optionLabel="label"
     dataKey="value"
   >
-    <template #option="{ option }">
+    <template #option="{ option, index }">
       <div
-        class="flex p-2 gap-2"
+        :class="[
+          'flex p-2 gap-2 workflow-tab',
+          { 'border border-dashed': index === draggingTabIndex },
+          {
+            'border-r-4 border-0 border-solid':
+              targetTabIndex === index && draggingTabIndex < index
+          },
+          {
+            'border-l-4 border-0 border-solid':
+              targetTabIndex === index && draggingTabIndex > index
+          }
+        ]"
         @contextmenu="showContextMenu($event, option)"
-        @click.middle="onCloseWorkflow(option)"
+        @click.middle="onCloseWorkflow(option, index)"
       >
         <span
           class="workflow-label text-sm max-w-[150px] truncate inline-block"
@@ -35,7 +46,7 @@
             text
             severity="secondary"
             size="small"
-            @click.stop="onCloseWorkflow(option)"
+            @click.stop="onCloseWorkflow(option, index)"
           />
         </div>
       </div>
@@ -57,11 +68,15 @@ import { useWorkflowStore } from '@/stores/workflowStore'
 import { useCommandStore } from '@/stores/commandStore'
 import SelectButton from 'primevue/selectbutton'
 import Button from 'primevue/button'
-import { computed, ref } from 'vue'
+import { computed, ref, watch, nextTick, onUnmounted } from 'vue'
 import { workflowService } from '@/services/workflowService'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import ContextMenu from 'primevue/contextmenu'
 import { useI18n } from 'vue-i18n'
+import {
+  draggable,
+  dropTargetForElements
+} from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
 
 interface WorkflowOption {
   value: string
@@ -122,8 +137,12 @@ const closeWorkflows = async (options: WorkflowOption[]) => {
   }
 }
 
-const onCloseWorkflow = (option: WorkflowOption) => {
+const onCloseWorkflow = (option: WorkflowOption, index: number) => {
   closeWorkflows([option])
+  cleanups[index].forEach((cb) => {
+    cb()
+  })
+  cleanups.splice(index, 1)
 }
 
 const contextMenuItems = computed(() => {
@@ -143,7 +162,7 @@ const contextMenuItems = computed(() => {
     },
     {
       label: t('tabMenu.closeTab'),
-      command: () => onCloseWorkflow(tab)
+      command: () => onCloseWorkflow(tab, index)
     },
     {
       label: t('tabMenu.closeTabsToLeft'),
@@ -166,8 +185,65 @@ const contextMenuItems = computed(() => {
     }
   ]
 })
-
 const commandStore = useCommandStore()
+
+const draggingTabIndex = ref<number | null>(null)
+const targetTabIndex = ref<number | null>(null)
+let cleanups = []
+const runCleanups = (cleanups: (() => void)[]) => {
+  cleanups.forEach((cb) => {
+    cb()
+  })
+}
+watch(options, () => {
+  nextTick(() => {
+    const tabs = document.querySelectorAll('.workflow-tab')
+    cleanups = []
+    tabs.forEach((tab, index) => {
+      const cleanupDraggable = draggable({
+        element: tab as HTMLElement,
+        getInitialData: (e) => {
+          return {
+            tabIndex: index
+          }
+        },
+        onDrag: () => {
+          draggingTabIndex.value = index
+        },
+        onDrop: () => {
+          draggingTabIndex.value = null
+        }
+      })
+
+      const cleanupDropTarget = dropTargetForElements({
+        element: tab as HTMLElement,
+        getData: () => {
+          return {
+            tabIndex: index
+          }
+        },
+        onDrop: (e) => {
+          const fromIndex = e.source.data.tabIndex as number
+          const toIndex = e.location.current.dropTargets[0].data
+            .tabIndex as number
+          if (fromIndex !== toIndex) {
+            workflowStore.reorderWorkflows(fromIndex, toIndex)
+          }
+          targetTabIndex.value = null
+        },
+        onDropTargetChange: (e) => {
+          targetTabIndex.value = e.location.current.dropTargets[0].data
+            .tabIndex as number
+        }
+      })
+
+      cleanups.push([cleanupDraggable, cleanupDropTarget])
+    })
+  })
+})
+onUnmounted(() => {
+  runCleanups(cleanups)
+})
 </script>
 
 <style scoped>

src/stores/workflowStore.ts

@@ -145,6 +145,7 @@ export interface WorkflowStore {
   modifiedWorkflows: ComfyWorkflow[]
   getWorkflowByPath: (path: string) => ComfyWorkflow | null
   syncWorkflows: (dir?: string) => Promise<void>
+  reorderWorkflows: (from: number, to: number) => void
 }
 
 export const useWorkflowStore = defineStore('workflow', () => {
@@ -202,6 +203,11 @@ export const useWorkflowStore = defineStore('workflow', () => {
   const openWorkflows = computed(() =>
     openWorkflowPaths.value.map((path) => workflowLookup.value[path])
   )
+  const reorderWorkflows = (from: number, to: number) => {
+    const movedTab = openWorkflowPaths.value[from]
+    openWorkflowPaths.value.splice(from, 1)
+    openWorkflowPaths.value.splice(to, 0, movedTab)
+  }
   const isOpen = (workflow: ComfyWorkflow) =>
     openWorkflowPathSet.value.has(workflow.path)
 
@@ -388,6 +394,7 @@ export const useWorkflowStore = defineStore('workflow', () => {
     renameWorkflow,
     deleteWorkflow,
     saveWorkflow,
+    reorderWorkflows,
 
     workflows,
     bookmarkedWorkflows,