自己动手写一个流程图蛇形排列

流程图蛇形排列

前言
公司项目需求要做一个流程图展示，内容需要用户自己创建开始结点、普通结点、判断结点、拒绝跳转结点，结束结点，最后来组合成一个流程图，要支持响应式的变化，拒绝结点的判断也需要合理的展示。流程图需要采用前端mxGraph的技术，所以前期需要预研。

思路
刚开始我是先画了一个草图，在图形上看排列的规律，发现每次item要转折的时候是他的下标正好是一行最大排列数的倍数，利用这个规律就可以很快找到转折点了。
流程图样式已经被UI确定，所以我们可以分为以下几个步骤：
1、首先定义每个流程图item的宽高，以便确定在一个容器里一行可以放下多少个item；
2、获取容器的宽度，容器的宽度除以item的宽度，运用Math.floor()向下取整就可以算出最多能一行放下几个item,
3、转折点的下标计算，利用每个item的下标除以一行所能放下流程图的最大个数，如果是整数就说明是转折点，并且可以得出规律，奇数是反向排列，偶数是正向排列，通过directionFlag标识，当方向改变时，相应的布尔值也变化；
4、最后定义两个变量，分别是X轴和Y轴的标识，每次++，需要依次算出相应的X轴和Y轴的坐标，在每次转折的时候需要重新初始化为0。

待优化：
1、计算每个转折点的方法是需要先定义每个item的宽度，如果宽度不固定改如何处理；
2、一行若出现多个拒绝结点，结点线的样式问题；
3、流程图个数要是非常多的情况下怎么展示
针对这些问题，流程图还需要更多的优化。

代码实现
说明： 因为要标识每个item所在的行的位置，所以加了level字段，以便于标注拒绝结点线的位置，同一行的结点线每次减一定距离，这样会避免线的重合问题，每次拒绝结点之间的连线位置在同一行都会不同。

let boxWidth = this.container.offsetWidth
      let model = graph.getModel();
      model.clear();
      var parent = graph.getDefaultParent();
      model.beginUpdate();
      // let _self = this;
      try {
        let graphData = this.processData  // 获取数据
        let itemWidth = this.vertexWidth + 30 // 定义item的宽度
        let itemHeight = this.vertexHeight + 60 // 定义item的高度
        let maxCount = Math.floor(boxWidth / itemWidth); // 获取一行所能放下item的最大个数
        let m = 0; // Y轴
        let n = 0; // X轴
        let directionFlag = true   // 为true-从左到右 反之 从右到左  蛇形排列
        graphData.map((val, i) => {
          let levelNum = i / maxCount
          if (directionFlag) {
            val.x = itemWidth * m
            val.y = itemHeight + itemHeight * n
            val.level = Math.ceil(levelNum) === levelNum ? levelNum + 1 : Math.ceil(levelNum); // 给每个item定义一个所在行的位置
            m++; // 坐标依次推进
            this.paddWidth = (boxWidth - (175 * m)) / 2  // 居中
          }
          if (!directionFlag) {
            val.x = itemWidth * (m - 2)
            val.y = itemHeight + itemHeight * n
            val.level = Math.ceil(levelNum) === levelNum ? levelNum + 1 : Math.ceil(levelNum);
            m--
          }
          if ((i / maxCount) % 1 === 0 && (i / maxCount) % 2 !== 0) { // 如果是偶数，反向排列
            directionFlag = false
            m = maxCount
            this.paddWidth = (boxWidth - (175 * m)) / 2
            n++
            val.x = itemWidth * (m - 1)
            val.y = itemHeight + itemHeight * n
            val.level = Math.ceil(levelNum) === levelNum ? levelNum + 1 : Math.ceil(levelNum);
          }
          if (i > maxCount && (i / maxCount) % 1 === 0 && (i / maxCount) % 2 === 0) { // 如果是奇数，正向排列
            directionFlag = true
            m = 0
            n++
            val.x = itemWidth * m
            val.y = itemHeight + itemHeight * n
            val.level = Math.ceil(levelNum) === levelNum ? levelNum + 1 : Math.ceil(levelNum);
            m++
          } else {
            this.paddWidth = (boxWidth - (175 * maxCount)) / 2
          }
          if (itemWidth * i < boxWidth) {
            this.paddWidth = (boxWidth - (175 * (i + 1))) / 2
          }
        })
      } finally {
        model.endUpdate();
      }