import { Graph, Node } from "@/packages/dist/index";

  // 保证创建节点的子元素在实例初始化之后加载使得实例能传参
  const initGraph = ref(false);
  let graphInstance: Graph;
  // 这里需要传入画布挂载的容器
  const containerEl = xxx;
  // 创建画布
  graphInstance = new Graph({
    container: containerEl,
    width: containerEl.clientWidth,
    height: containerEl.clientHeight,
  });
  // 创建节点
  const node1 = graphInstance.createNode({
    width: 100,
    height: 40,
  });
  const node4 = new Node({
    width: 100,
    height: 40,
    x: 600,
    y: 600,
    attr: {
      label: {
        text: "8888test",
      },
    },
  });
  const node2 = graphInstance.createNode({
    width: 40,
    height: 40,
    x: 500,
    y: 200,
    attr: {
      label: {
        text: "111",
      },
    },
  });
  const node3 = graphInstance.createNode({
    width: 100,
    height: 40,
    x: 10,
    y: 200,
    attr: {
      label: {
        text: "222",
      },
    },
  });
  // 向画布挂载节点
  graphInstance.addNode([node1, node2, node3, node4]);
  node1.addPort();
  node1.addPort({
    position: {
      x: 50,
      y: 0,
    },
  });
  node1.addPort({
    position: {
      x: 200,
      y: 0,
    },
  });
  node3.addPort();
  const edge = graphInstance.createEdge({
    startPosition: {
      x: 200,
      y: 0,
    },
    endPosition: {
      x: 300,
      y: 30,
    },
    turningPoint: [{ x: 200, y: 30 }],
  });
  const edge2 = graphInstance.createEdge({
    startPosition: {
      x: 500,
      y: 0,
    },
    endPosition: {
      x: 700,
      y: 0,
    },
    turningPoint: [
      { x: 500, y: 30 },
      { x: 600, y: 30 },
      { x: 600, y: 0 },
    ],
  });
  graphInstance.addEdge(edge);
  graphInstance.addEdge(edge2);