<script setup lang="ts">

import { ref, onMounted } from 'vue'
import HeaderBlock from './HeaderBlock.vue';
import { Network } from 'vis-network'
import { getGraph } from './client';

const network = ref<HTMLElement>()

onMounted(async () => {
  if (!network.value) return

  const graph = await getGraph()

  const data = {
    nodes: graph.nodes,
    edges: graph.edges
  }

  const options = {}
  new Network(network.value, data, options)
})
</script>

<template>
  <HeaderBlock>
    <div>
      Редактор сценариев
    </div>
  </HeaderBlock>

  <div ref="network" class="graph-container"></div>
</template>

<style scoped>
.graph-container {
  width: 100%;
  height: calc(100vh - 50px);
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}
</style>
