🔥 주제

Vue-Flow에서 Node를 Drag & Drop하여 화면에 새로운 Node를 생성해 본다.

😊 내용

🌊 Vue Flow - The customizable Vue3 Flowchart Library

위 그림과 같이 좌측 Drawer에서 ‘EXAM NODE를 Drag & Drop 하여 우측의 Form` 을 갖는 Node를 하나 생성해 보자.

<aside> 💡 Drawer에 있는 Node와 생성되는 Node의 형태 및 생김새는 동일할 수도 있으나, 다른 모습으로 생성되게 할 수 있다.

</aside>

우리는 클라우드 서비스에 해당하는 노드를 생성해야 하므로, 각종 입력을 받아야 하기 때문에 Custom Node를 생성할 것이다.

Drawer

<script setup>
function onDragStart(event, nodeType) {
  if (event.dataTransfer) {
    event.dataTransfer.setData('application/vueflow', nodeType)
    event.dataTransfer.effectAllowed = 'move'
  }
}
</script>

<template>
  <v-navigation-drawer
      width="244"
    >
    <div class="nodes">
      <div class="vue-flow__node-default" :draggable="true"
      @dragstart="onDragStart($event, 'exam1')">Exam 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>
    </v-navigation-drawer>
</template>

• function onDragStart()

  Drawer에 있는 각 Node의 드래그 이벤트(@dragstart) 핸들러이다. 1) 이벤트와, 2) 노드 타입을 파라미터로 받아 전달한다.

<aside> 💡 여기서는 첫 번째 노드의 드래그 시작 핸들러에 nodeType을 exam1 으로 전달한다.

</aside>

• 각 노드

  class 의 각 값들 (vue-flow__node-{type})을 지정한다. 지금까지 파악한 바로는 default, input, output으로 지정하면 기본 제공 UI로 보인다. type 을 ASDF 로 지정하면 CSS 파일에 ASDF 에 해당하는 스타일을 제공해야 한다.

App - script setup

<script setup>
import ExamNode1 from './components/ExamNode1.vue';
import AppBar from './layouts/default/AppBar.vue'
import LeftDrawer from './layouts/default/LeftDrawer.vue'

import { VueFlow, useVueFlow } from '@vue-flow/core'
import { nextTick, watch } from 'vue'

let id = 0
function getId() {
  return `dndnode_${id++}`
}

const { findNode, onConnect, addEdges, addNodes, project, vueFlowRef } = useVueFlow({
  nodes: [],
})

function onDragOver(event) {
  event.preventDefault()

  if (event.dataTransfer) {
    event.dataTransfer.dropEffect = 'move'
  }
}

onConnect((params) => addEdges(params))

function onDrop(event) {
  const type = event.dataTransfer?.getData('application/vueflow')
  console.log(type)
  const { left, top } = vueFlowRef.value.getBoundingClientRect()

  const position = project({
    x: event.clientX - left,
    y: event.clientY - top,
  })

  const newNode = {
    id: getId(),
    type,
    position,
    label: `${type} node`,
    info: {"foo": "bar"},
  }

  addNodes([newNode])

  // align node position after drop, so it's centered to the mouse
  nextTick(() => {
    const node = findNode(newNode.id)
    const stop = watch(
      () => node.dimensions,
      (dimensions) => {
        if (dimensions.width > 0 && dimensions.height > 0) {
          node.position = { x: node.position.x - node.dimensions.width / 2, y: node.position.y - node.dimensions.height / 2 }
          stop()
        }
      },
      { deep: true, flush: 'post' },
    )
  })
}
</script>

• useVueFlow() - 지금까지 파악한 바로는, nodes 들에 대한 각종 함수를 리턴하는 것 같다.
• onDragOver() - 드래그가 끝났을 때 (@onDragOver) 이벤트 핸들러.
• onDrop() - 노드를 Drop 할 때 (@onDrop) 이벤트 핸들러.
  • type - 위 Drawer의 onDragStart() 함수에서 전달된 nodeType이다.
  • newNode, addNodes() - 전달받은 정보를 기반으로 노드를 생성해 추가한다.
  • nextTick() - 위치 지정 관련 로직 같다. 추후에 더 자세히 알아본다.

App - template, style