<template>
  <div class="graph-chart-wrapper" id="graph">

  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount } from 'vue';
import setChart from '@/utils/setChart';
import getGraphChart from './graphChart';

const emits = defineEmits(["handleClickNode"])
const props = defineProps({
  nodes: {
    type: Array,
    default: []
  },
  links: {
    type: Array,
    default: []
  },
  layoutType: {
    type: String,
    default: 'force'
  },
  width: {
    type: String,
    default: 'force'
  },
  height: {
    type: String,
    default: 'force'
  }
})

let chart = null
onMounted(() => {
  const graph = getGraphChart(props.nodes, props.links, props.layoutType)
  chart = setChart(graph, 'graph')
  chart.on("click", (event) => { emits("handleClickNode", event) })
})

onBeforeUnmount(() => {
  chart.off("click")
  chart.dispose()
})

</script>


<style lang="scss" scoped>
.graph-chart-wrapper {
  width: 100%;
  height: 100%;
  // width: 800px;
  // height: 500px;
}
</style>