<template>
  <div class="topo_inner">
    <div id="container" ref="conCav" class="canvas"></div>
  </div>
</template>

<script>
import G6 from "@antv/g6";
export default {
  props: {
    datas: {
      type: Object,
      default: () => {
        return {
          nodes: [],
          edges: [],
        };
      },
    },
    namespace: String,
  },
  data: () => {
    return {
      options: [
        {
          value: "default",
          label: "default",
        },
        {
          value: "addNode",
          label: "addNode",
        },
        {
          value: "addEdge",
          label: "addEdge",
        },
      ],
      value: "",
      graph: null,
    };
  },
  mounted() {
    this.getCav();
  },
  watch: {
    datas(val) {},
  },
  methods: {
    getCav() {
      /**
       * 该案例演示切换交互模式，在不同模式下实现拖动节点、增加节点、增加边的交互行为。
       */
      let addedCount = 0;
      // Register a custom behavior: add a node when user click the blank part of canvas
      G6.registerBehavior("click-add-node", {
        // Set the events and the corresponding responsing function for this behavior
        getEvents() {
          // The event is canvas:click, the responsing function is onClick
          return {
            "canvas:click": "onClick",
          };
        },
        // Click event
        onClick(ev) {
          console.log(ev.canvasX, ev.canvasY);
          const self = this;
          const graph = self.graph;
          // Add a new node
          graph.addItem("node", {
            x: ev.canvasX,
            y: ev.canvasY,
            id: `node-${addedCount}`, // Generate the unique id
          });
          addedCount++;
        },
      });
      // Register a custom behavior: click two end nodes to add an edge
      G6.registerBehavior("click-add-edge", {
        // Set the events and the corresponding responsing function for this behavior
        getEvents() {
          return {
            "node:click": "onClick", // The event is canvas:click, the responsing function is onClick
            mousemove: "onMousemove", // The event is mousemove, the responsing function is onMousemove
            "edge:click": "onEdgeClick", // The event is edge:click, the responsing function is onEdgeClick
          };
        },
        // The responsing function for node:click defined in getEvents
        onClick(ev) {
          const self = this;
          const node = ev.item;
          const graph = self.graph;
          // The position where the mouse clicks
          const point = { x: ev.x, y: ev.y };
          const model = node.getModel();
          if (self.addingEdge && self.edge) {
            graph.updateItem(self.edge, {
              target: model.id,
            });

            self.edge = null;
            self.addingEdge = false;
          } else {
            // Add anew edge, the end node is the current node user clicks
            self.edge = graph.addItem("edge", {
              source: model.id,
              target: model.id,
            });
            self.addingEdge = true;
          }
        },
        // The responsing function for mousemove defined in getEvents
        onMousemove(ev) {
          const self = this;
          // The current position the mouse clicks
          const point = { x: ev.x, y: ev.y };
          if (self.addingEdge && self.edge) {
            // Update the end node to the current node the mouse clicks
            self.graph.updateItem(self.edge, {
              target: point,
            });
          }
        },
        // The responsing function for edge:click defined in getEvents
        onEdgeClick(ev) {
          const self = this;
          const currentEdge = ev.item;
          if (self.addingEdge && self.edge === currentEdge) {
            self.graph.removeItem(self.edge);
            self.edge = null;
            self.addingEdge = false;
          }
        },
      });
      // Initial data
      const data = {
        nodes: [
          {
            id: "node1",
            label: "123",
            x: 100,
            y: 200,
          },
          {
            id: "node2",
            label: "123",
            x: 300,
            y: 200,
          },
          {
            id: "node3",
            label: "123",
            x: 300,
            y: 300,
          },
        ],
        edges: [
          {
            id: "edge1",
            target: "node2",
            source: "node1",
          },
        ],
      };
      const graphContainer = document.getElementById("container");
      const width = document.getElementById("container").scrollWidth;
      const height = document.getElementById("container").scrollHeight || 500;
      const graph = new G6.Graph({
        container: "container",
        width,
        height,
        // The sets of behavior modes
        modes: {
          // Defualt mode
          default: [
            "drag-node",
            "click-select",
            "click-add-node",
            "click-add-edge",
            "zoom-canvas"
          ],
        },
        defaultNode: {
          type: "rect",
          style: {
            radius: 4,
          },
          anchorPoints: [
            [0.5, 0],
            [1, 0.5],
            [0.5, 1],
            [0, 0.5],
          ],
        },
        // The node styles in different states
        nodeStateStyles: {
          // The node styles in selected state
          selected: {
            stroke: "#666",
            lineWidth: 2,
            fill: "steelblue",
          },
        },
        defaultEdge: {
          type: "line",
          style: {
            stroke: "#F6BD16",
            endArrow: {
              path: "M 0,0 L 20,10 L 20,-10 Z",
              fill: "#F6BD16",
            },
          },
        },
      });
      graph.data(data);
      graph.render();
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.canvas {
  height: 800px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.topo_inner {
  position: relative;
}
</style>

