feat(Workflow): add modules

src/@core/utils/workflow.ts

@@ -0,0 +1,120 @@
+import { useVueFlow } from '@vue-flow/core'
+import { ref, watch } from 'vue'
+
+let id = 0
+
+/**
+ * @returns {string} - A unique id.
+ */
+function getId() {
+  return `dndnode_${id++}`
+}
+
+/**
+ * In a real world scenario you'd want to avoid creating refs in a global scope like this as they might not be cleaned up properly.
+ * @type {{draggedType: Ref<string|null>, isDragOver: Ref<boolean>, isDragging: Ref<boolean>}}
+ */
+const state = {
+  /**
+   * The type of the node being dragged.
+   */
+  draggedType: ref(null),
+  isDragOver: ref(false),
+  isDragging: ref(false),
+}
+
+export default function useDragAndDrop() {
+  const { draggedType, isDragOver, isDragging } = state
+
+  const { addNodes, screenToFlowCoordinate, onNodesInitialized, updateNode } = useVueFlow()
+
+  watch(isDragging, dragging => {
+    document.body.style.userSelect = dragging ? 'none' : ''
+  })
+
+  function onDragStart(event: any, type: any) {
+    if (event.dataTransfer) {
+      event.dataTransfer.setData('application/vueflow', type)
+      event.dataTransfer.effectAllowed = 'move'
+    }
+
+    draggedType.value = type
+    isDragging.value = true
+
+    document.addEventListener('drop', onDragEnd)
+  }
+
+  /**
+   * Handles the drag over event.
+   *
+   * @param {DragEvent} event
+   */
+  function onDragOver(event: any) {
+    event.preventDefault()
+
+    if (draggedType.value) {
+      isDragOver.value = true
+
+      if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = 'move'
+      }
+    }
+  }
+
+  function onDragLeave() {
+    isDragOver.value = false
+  }
+
+  function onDragEnd() {
+    isDragging.value = false
+    isDragOver.value = false
+    draggedType.value = null
+    document.removeEventListener('drop', onDragEnd)
+  }
+
+  /**
+   * Handles the drop event.
+   *
+   * @param {DragEvent} event
+   */
+  function onDrop(event: any) {
+    const position = screenToFlowCoordinate({
+      x: event.clientX,
+      y: event.clientY,
+    })
+
+    const nodeId = getId()
+
+    const newNode = {
+      id: nodeId,
+      type: draggedType.value || undefined,
+      position,
+      data: { label: nodeId },
+    }
+
+    /**
+     * Align node position after drop, so it's centered to the mouse
+     *
+     * We can hook into events even in a callback, and we can remove the event listener after it's been called.
+     */
+    const { off } = onNodesInitialized(() => {
+      updateNode(nodeId, node => ({
+        position: { x: node.position.x - node.dimensions.width / 2, y: node.position.y - node.dimensions.height / 2 },
+      }))
+
+      off()
+    })
+
+    addNodes(newNode)
+  }
+
+  return {
+    draggedType,
+    isDragOver,
+    isDragging,
+    onDragStart,
+    onDragLeave,
+    onDragOver,
+    onDrop,
+  }
+}

src/components/dialog/WorkflowEditDialog.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { VueFlow, useVueFlow } from '@vue-flow/core'
+import Sidebar from '../workflow/Sidebar.vue'
+import DropzoneBackground from '../workflow/DropzoneBackground.vue'
+import useDragAndDrop from '@core/utils/workflow'
+
+const { onConnect, addEdges } = useVueFlow()
+
+const { onDragOver, onDrop, onDragLeave, isDragOver } = useDragAndDrop()
+
+const nodes = ref([])
+
+onConnect(addEdges)
+</script>
+
+<template>
+  <div class="dnd-flow" @drop="onDrop">
+    <VueFlow :nodes="nodes" @dragover="onDragOver" @dragleave="onDragLeave">
+      <DropzoneBackground
+        :style="{
+          backgroundColor: isDragOver ? '#e7f3ff' : 'transparent',
+          transition: 'background-color 0.2s ease',
+        }"
+      >
+        <p v-if="isDragOver">Drop here</p>
+      </DropzoneBackground>
+    </VueFlow>
+
+    <Sidebar />
+  </div>
+</template>
+<style>
+@import '@vue-flow/core/dist/style.css';
+@import '@vue-flow/core/dist/theme-default.css';
+@import '@vue-flow/controls/dist/style.css';
+@import '@vue-flow/minimap/dist/style.css';
+@import '@vue-flow/node-resizer/dist/style.css';
+</style>

src/components/workflow/DropzoneBackground.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import { Background } from '@vue-flow/background'
+</script>
+
+<template>
+  <div class="dropzone-background">
+    <Background :size="2" :gap="20" pattern-color="#BDBDBD" />
+
+    <div class="overlay">
+      <slot />
+    </div>
+  </div>
+</template>

src/components/workflow/Sidebar.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import useDragAndDrop from '@core/utils/workflow'
+
+const { onDragStart } = useDragAndDrop()
+</script>
+
+<template>
+  <aside>
+    <div class="description">You can drag these nodes to the pane.</div>
+
+    <div class="nodes">
+      <div class="vue-flow__node-input" :draggable="true" @dragstart="onDragStart($event, 'input')">Input Node</div>
+
+      <div class="vue-flow__node-default" :draggable="true" @dragstart="onDragStart($event, 'default')">
+        Default Node
+      </div>
+
+      <div class="vue-flow__node-output" :draggable="true" @dragstart="onDragStart($event, 'output')">Output Node</div>
+    </div>
+  </aside>
+</template>

src/views/workflow/WorkflowListView.vue

@@ -2,6 +2,7 @@
 import api from '@/api'
 import { Workflow } from '@/api/types'
 import { useDisplay } from 'vuetify'
+import WorkflowEditDialog from '@/components/dialog/WorkflowEditDialog.vue'
 
 // APP
 const display = useDisplay()