antv x6文档笔记一（vue2）

<template>
  <div class="page_box">
    <!-- 深度分析 -->
    <div id="container"></div>
    <el-button @click="add"> 新增一个节点</el-button>
    <el-button @click="exportData"> 导出数据</el-button>
    <el-button @click="importData"> 导入数据</el-button>
    <el-button @click="start"> 开始动画</el-button>

    <img src="../../assets/img/common/go.png" alt="" />
  </div>
</template>
<script>
import { Graph ,Vector} from "@antv/x6";
import { insertCss } from "insert-css";
export default {
  data() {
    return {
      graph: null,
      baseData: null,
    };
  },
  computed: {
    node() {
      return {
        // 节点
        nodes: [
          {
            id: "node1", // String，可选，节点的唯一标识
            x: 40, // Number，必选，节点位置的 x 值
            y: 40, // Number，必选，节点位置的 y 值
            width: 180, // Number，可选，节点大小的 width 值
            height: 140, // Number，可选，节点大小的 height 值
            label: "hello", // String，节点标签
            data: {
              // 关联的业务数据
              name: "sz",
              age: 18,
            },
            ports: [
              // 定义连接点
              {
                id: "port1",
                attrs: {
                  //定义连接点的样式
                  circle: {
                    r: 6, // 半径
                    magnet: true, //使链接桩在连线交互时可以被连接上
                    stroke: "#31d0c6", // 边框颜色
                    strokeWidth: 2, // 边框宽度
                    fill: "#fff",
                  },
                },
              },
              { id: "port2" },
              { id: "port3" },
            ],
          },
          {
            id: "node2", // String，节点的唯一标识
            x: 160, // Number，必选，节点位置的 x 值
            y: 180, // Number，必选，节点位置的 y 值
            width: 180, // Number，可选，节点大小的 width 值
            height: 140, // Number，可选，节点大小的 height 值
            label: "world", // String，节点标签
            ports: [
              // 定义连接点
              {
                id: "port1",
                attrs: {
                  //定义连接点的样式
                  circle: {
                    r: 6, // 半径
                    magnet: true, //使链接桩在连线交互时可以被连接上
                    stroke: "#31d0c6", // 边框颜色
                    strokeWidth: 2, // 边框宽度
                    fill: "#fff",
                  },
                },
              },
              { id: "port2" },
              { id: "port3" },
            ],
          },
        ],
        // 边 连线
        edges: [
          {
            id:'line1',
            source: "node1", // String，必须，起始节点 id
            target: "node2", // String，必须，目标节点 id
            shape: "shadow-edge", //  线的形状     double-edge
            attrs: {
              line: {
                stroke: "orange", //线的颜色
              },
            },
          },
        ],
      };
    },
  },

  methods: {
    // 初始化函数
    render() {
      // 初始化画布
      const graph = new Graph({
        container: document.getElementById("container"),
        width: 800, // 画布宽高
        height: 600,
        background: {
          // color: "#fffbe6", // 设置画布背景颜色
          // image: "https://img0.baidu.com/it/u=1985782942,2642646797&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333", // 必须为网图 或者base64
          // image: "./excel.png", // 这个图片 必须在 public 中
          // size: {
          //   width: 1800,
          //   height: 1600,
          // },
        },
        // history:true,  // 是否允许撤销  和重做  // 需要回调处理
        selecting: {
          enabled: true, // 是否允许点选 或者框选
          className: "my-selecting", //  定制样式 所加的类名
          rubberband: true, // 启用框选
          showNodeSelectionBox: true,
        },

        resizing: {
          //调整节点大小
          enabled: true,
        },
        rotating: {
          // 调整节点旋转
          enabled: true,
        },
        translating: {
          // 调整节点移动范围
          restrict: true, // 如果为ture  不能超过边界    可以为一个详细对象  配置 可移动范围
        },
        grid: {
          size: 10, // 网格大小 10px
          visible: true, // 渲染网格背景
        },
      });
      this.graph = graph;
      graph.zoom(-0.5);
      graph.translate(80, 40);
      // 渲染节点和边
      graph.fromJSON(this.node);

    

   
    },
    add() {
      // 创建节点
      const wrap = document.createElement("div");
      wrap.innerHTML = ` <a href="#" class="my-btn">Submit</a>`;
      wrap.style.width = "300px";
      wrap.style.height = "300px";
      wrap.style.display = "flex";
      wrap.style.alignItems = "center";
      wrap.style.justifyContent = "center";
      wrap.style.background = "#ffd591";
      wrap.style.border = "2px solid #ffa940";
      wrap.style.borderRadius = "4px";
      // wrap.innerText = "World";

      // 插入节点样式
      insertCss(`
          .my-btn{
            position: relative;
            display: inline-block;
            padding: 10px 20px;
            color: #03e9f4;
            font-size: 16px;
            text-decoration: none;
            text-transform: uppercase;
            overflow: hidden;
            transition: .3s;
            margin-top: 40px;
            letter-spacing: 3px
          }
          .my-btn:hover {
            background: #03e9f4;
            color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 5px #03e9f4,
                        0 0 25px #03e9f4,
                        0 0 50px #03e9f4,
                        0 0 100px #03e9f4;
          }
        `);
      // 新增节点
      const target = this.graph.addNode({
        shape: "html",
        x: 320,
        y: 260,
        width: 120,
        height: 50,
        html: wrap,
      });
    },
    // 导出数据
    exportData() {
      this.baseData = this.graph.toJSON();
      console.log(this.baseData);
    },
    // 导入数据
    importData() {
      this.graph.fromJSON(this.baseData);
    },
    // 动画  未完全实现
    
    start(){
      const view = this.graph.findViewByCell('line1') 
      console.log('view',view);
      const token = Vector.create('circle', { r: 10, fill: 'green' })
      // setTimeout(()=>{
      //   view.sendToken(token.node, 1000)
      // },2000)
      const stop = view.sendToken(token.node, 1000)
      
      // setTimeout(stop, 5000)
    }
  },
  mounted() {
    this.render();
    // 节点/线  被框选时触发
    this.graph.on("selection:changed", (args) => {
      // code here
      console.log("args", args);
    });
    // 节点被点击了
    this.graph.on("node:click", ({ e, x, y, node, view }) => {
      console.log("节点被点击了", node);
    });
    // 线被点击了
    this.graph.on("edge:click", ({ e, x, y, edge, view }) => {
      console.log("线被点击了", edge);
    });
    this.graph.on("cell:mouseenter", ({ cell }) => {
      if (cell.isNode()) {
        cell.addTools([
          {
            name: "button-remove",
            args: {
              x: 0,
              y: 0,
              offset: { x: 10, y: 10 },
            },
          },
        ]);
      } else {
        cell.addTools(["vertices", "segments"]);
      }
    });

    this.graph.on("cell:mouseleave", ({ cell }) => {
      cell.removeTools();
    });
  },
};
</script>
<style lang="less" scoped>
// .container{
//   background:url('../../assets/img/common/center-box.png');
// }
</style>