<template>
  <div class="vue-flow__node-default">
    <div>
      <el-tag>{{ data.type }}</el-tag>
      {{ data.label }}
    </div>
    <Handle type="source" :position="Position.Right"/>
    <Handle type="target" :position="Position.Left"/>
  </div>
</template>
<script setup>
import {computed} from 'vue'
import {Handle, Position} from '@vue-flow/core'

const props = defineProps({
  id: {
    type: String,
    required: true,
  },
  data: {
    type: Object,
    required: true,
  },
  position: {
    type: Object,
    required: true,
  }
})

const x = computed(() => `${Math.round(props.position.x)}px`)
const y = computed(() => `${Math.round(props.position.y)}px`)
</script>