ui useDragAndDrop.ts

0% Statements 0/37
0% Branches 0/1
0% Functions 0/1
0% Lines 0/37
Press n or j to go to the next uncovered block, b, p or k for the previous block.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { ref, computed } from 'vue'
 
export type DragType = 'variable' | 'field' | 'node'
 
export interface DragData {
  type: DragType
  data: string
  metadata?: Record<string, any>
}
 
/**
 * Global drag and drop state management
 */
const isDragging = ref(false)
const dragData = ref<DragData | null>(null)
const dragTarget = ref<HTMLElement | null>(null)
 
export function useDragAndDrop() {
  /**
   * Start dragging with data
   */
  const startDrag = (type: DragType, data: string, metadata?: Record<string, any>) => {
    isDragging.value = true
    dragData.value = { type, data, metadata }
  }
 
  /**
   * End dragging and clear data
   */
  const endDrag = () => {
    isDragging.value = false
    dragData.value = null
    dragTarget.value = null
  }
 
  /**
   * Set the current drag target element
   */
  const setDragTarget = (element: HTMLElement | null) => {
    dragTarget.value = element
  }
 
  /**
   * Check if currently dragging a specific type
   */
  const isDraggingType = (type: DragType) => {
    return computed(() => isDragging.value && dragData.value?.type === type)
  }
 
  /**
   * Get current drag data
   */
  const getCurrentDragData = computed(() => dragData.value)
 
  /**
   * Check if a drop target should be active
   */
  const isDropTarget = (element: HTMLElement | null) => {
    return computed(
      () => isDragging.value && element && dragTarget.value === element
    )
  }
 
  return {
    isDragging: computed(() => isDragging.value),
    dragData: getCurrentDragData,
    dragTarget: computed(() => dragTarget.value),
    startDrag,
    endDrag,
    setDragTarget,
    isDraggingType,
    isDropTarget
  }
}