<template><div id="container"></div> </template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { Graph } from '@antv/x6';

  export default defineComponent({
    name: 'NsFlowChart',
    setup() {},
    mounted() {
      const data = {
        // 节点
        nodes: [
          {
            id: 'node1', // String，可选，节点的唯一标识
            x: 40, // Number，必选，节点位置的 x 值
            y: 40, // Number，必选，节点位置的 y 值
            width: 80, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            label: 'hello', // String，节点标签
            line: {
              stroke: 'orange',
            },
          },
          {
            id: 'node2', // String，节点的唯一标识
            x: 160, // Number，必选，节点位置的 x 值
            y: 180, // Number，必选，节点位置的 y 值
            width: 80, // Number，可选，节点大小的 width 值
            height: 40, // Number，可选，节点大小的 height 值
            label: 'world', // String，节点标签
          },
        ],
        // 边
        edges: [
          {
            source: 'node1', // String，必须，起始节点 id
            target: 'node2', // String，必须，目标节点 id
          },
        ],
      };
      const graph = new Graph({
        container: document.getElementById('container') as HTMLElement,

        background: {
          color: '#191F27', // 设置画布背景颜色
        },
        grid: {
          size: 10, // 网格大小 10px
          type: 'dot',
          visible: false, // 渲染网格背景
          args: {
            color: '#fff', // 网格线/点颜色
            thickness: 0.5, // 网格线宽度/网格点大小
          },
        },
        snapline: {
          enabled: true,
          className: 'my-snapline',
        },
      });

      graph.fromJSON(data);
    },
  });
</script>
<style lang="less" scoped>
  #container {
    width: 1000px;
    height: 100%;
  }
</style>