<script setup lang="ts">
import { computed } from "vue";
import { Position, Handle, useVueFlow } from "@vue-flow/core";
import HandleComponents from "./HandleComponents.vue";

const props = defineProps(["id", "data", "position"]);

const x = computed(() => `${Math.round(props.position.x)}px`);
const y = computed(() => `${Math.round(props.position.y)}px`);
// const props = defineProps<NodeProps>()
const { addNodes, addEdges } = useVueFlow();


</script>

<template>
  <div class="vue-flow__node-default">
    <HandleComponents :position="position" :id="id" :data="data" type="target" handleType="special" />
    
    <div>{{ data.label }}</div>
    <div>{{ x }} {{ y }}</div>

    <HandleComponents :position="position" :id="id" :data="data" type="source" handleType="special" />
  </div>
</template>