jsPlumb flowchart experience summary

在使用jsPlumb过程中,所遇到的问题,以及解决方案,文中引用了《数据结构与算法JavaScript描述》的相关图片和一部分代
码.截图是有点多,有时比较懒,没有太多的时间去详细的编辑.

Preface

First is the UML class diagram

Then is the flow chart

Using the related functions of jsPlumb, you can see the prototype of the first version. It took almost two months, interspersed with other work intermittently, but the basic functions were still completed.

In fact, do it After finishing it, I discovered that only a small part of the functions of jsPlumb were used, and more was the understanding and implementation of the internal data structure. It can only be said that the data is updated synchronously, and there is still a certain distance from the data drive.

Here we will summarize and record the problems encountered in the project and the solutions. If there is a better method, please point it out.

Handling of multiple tags on the connection

As shown in the picture above, at first we thought about configuring two overlays when connecting.

    var j = jsPlumb.getInstance();

    j.connect({
        source:source,
        target:target,
        overlays:[
            "Arrow",
            ["label",{label:"foo1",location:0.2jsPlumb flowchart experience summary,id:"m1"}],
            ["label",{label:"foo2",location:0.jsPlumb flowchart experience summaryjsPlumb flowchart experience summary,id:"m2"}]
        ]
    })

Of course, there are pitfalls here. If the id is repeated, the last one will be used. There will be no overlap, including the data cached within jsPlumb, only the last one will be left.

Later I found out that in fact, the configuration items can also be dynamically modified through the importDefaults function.

    j.importDefaults({
        ConnectionOverlays: [
            ["Arrow", { location: 1, id: "arrow", length: jsPlumb flowchart experience summary, foldback: 0, width: jsPlumb flowchart experience summary }],
            ["Label", { label: "n", id: "label-n", location: 0.2jsPlumb flowchart experience summary, cssClass: "jspl-label" }],
            ["Label", { label: "1", id: "label-1", location: 0.jsPlumb flowchart experience summaryjsPlumb flowchart experience summary, cssClass: "jspl-label" }]
        ]
    })

It’s just that, only the two labels can be displayed in the connection after running the function, and the previous ones cannot be changed together.
So for the sake of convenience, they are modified directly in the initialization .

Use of Groups

Group is indeed a problem when making flow charts. In the infinite nesting level as shown above, you cannot use the Groups function provided by jsPlumb. .
According to the document, if an element is marked as a group, the elements in the group will move with the movement of the group, as will the connections, but the problem is that once an element becomes a group, it is unacceptable. Other group elements. In other words, the Groups method it provides has only one layer, which naturally cannot meet the requirements.
First post the summarized usage of groups:

    j.addGroup({
        el:el,
        id:"one"
        constrain:true, // 子元素仅限在元素内拖动
        droppable:true, // 子元素是否可以放置其他元素
        draggable:true, // 默认为true,组是否可以拖动
        dropOverride:true ,// 组中的元素是否可以拓展到其他组,为true时表示否,这里的拓展会对dom结构进行修改,而非单纯的位置移动
        ghost:true, // 是否创建一个子元素的副本元素
        revert:true, // 元素是否可以拖到只有边框可以重合
    })

The new method will be used later method, dynamically refresh the connection when the node moves

    j.repaintEverything();

In order not to block the page, you need to use the function throttlingthrottle()

    function throttle(fn,interval){
        var canRun = true;

        return function(){
            if(!canRun) return;
            canRun = false;
            setTimeout(function(){
                fn.apply(this,arguments);
                canRun = true;
            },interval ? interval : jsPlumb flowchart experience summary00);
        };
    };

This is a simple The implementation method is mainly to reduce the repeated calls of events when moving events in the dom, and at the same time achieve the purpose of executing events (only allowing a function to be executed once within The
_.throttle() function can also achieve the purpose.

The html structure here uses nested levels, and the parent and child levels are saved internally using this level. In the data source

Multi-layer or one-layer data structure analysis

There are two methods for similar data bodies that actually have nested relationships. For management,

• Multi-level nesting: similar to

      [
          {
              id:"1",
              child:{
                  id:"2",
                  child:{
                      id:"jsPlumb flowchart experience summary",
                      child:{}
                  }
              }
          }
      ]

  , if used for management, the advantage is that it is intuitive, and you can know what the overall structure is based on the level, and convert It is also very convenient to convert it into xml or html.

  But the disadvantage is that it is not so convenient to search and modify.
  

• Display all nodes in one layer: similar

      [
          {
              id:"1",
              child:[{
                  id:"2"
              }]
          },
          {
              id:"2",
              parentId:"1",
              child:[{
                  id:"jsPlumb flowchart experience summary"
              }]
          },
          {
              id:"jsPlumb flowchart experience summary",
              parentId:"2",
              child:[]
          }
      ]

  The advantage of this structure is that it is all in one level. It is very convenient to search and modify the data. If you want to parse it into a multi-level structure, you only need to use recursion to generate a new structure:

  function mt(){
      var OBJ;
      this.root = null;
      this.Node = function(e) {
          this.id = e.id;
          this.name = e.name;
          this.parentId = e.parentId;
          this.children = [];
      };
  
      this.insert=function(e,key){
          function add(obj,e){
              if(obj.id == e.parentId){
                  obj.children.push(e);
              } else {
                  for (var i = 0; i < obj.children.length; i++) {
                      add(obj.children[i], e);
                  }
              }
          }
  
          if (e != undefined) {
              e = new this.Node(e);
          } else {
              return;
          }
  
          if (this.root == null) {
              this.root = e;
          } else {
              OBJ = this.root;
              add(OBJ, e);
          }
      }
  
      this.init = function(data){
          var _this = this;
          for(var i = 0;i<data.length;i++){
              _this.insert(data[i]);
          }
  
          return OBJ;
      }
  }

  The array can be converted into a multi-level array through the initialization function

  init
  

If you want to convert it into an html structure, you only need to slightly change the function , it can be realized.

Verify whether there is a dead end in the process (whether there is a point on the path that cannot reach the end of the graph)

This is completely achieved by the algorithm. First of all, for The key point is to understand the picture

I am too lazy to type, so I will express it directly with a picture. The basic picture is roughly like this, and the specific expression is

It can be seen that the basic graph representation can be represented by an adjacency list;

And for implementation, you can see the following code:

function Graph1(v) {
  this.vertices = v; // 总顶点
  this.edges = 0; // 图的边数
  this.adj = [];

  // 通过 for 循环为数组中的每个元素添加一个子数组来存储所有的相邻顶点，[并将所有元素初始化为空字符串。]?
  for (var i = 0; i < this.vertices; ++i) {
    this.adj[i] = [];
  }

  /**
   * 当调用这个函数并传入顶点 v 和 w 时，函数会先查找顶点 v 的邻接表，将顶点 w 添加到列表中
   * 然后再查找顶点 w 的邻接表，将顶点 v 加入列表。最后，这个函数会将边数加 1。
   * @param {[type]} v [第一个顶点]
   * @param {[type]} w [第二个顶点]
   */
  this.addEdge = function(v, w) {
    this.adj[v].push(w);
    this.adj[w].push(v);
    this.edges++;
  }

  /**
   * 打印所有顶点的关系简单表现形式
   * @return {[type]} [description]
   */
  this.showGraph = function() {
    for (var i = 0; i < this.vertices; ++i) {
      var str = i + " ->";
      for (var j = 0; j < this.vertices; ++j) {
        if (this.adj[i][j] != undefined) {
          str += this.adj[i][j] + &#jsPlumb flowchart experience summaryjsPlumb flowchart experience summary; &#jsPlumb flowchart experience summaryjsPlumb flowchart experience summary;
        }
      }

      console.log("表现形式为：" + str);
    }

    console.log(this.adj);
  }
}

And light Building is not enough, so let’s look at the basic search methods:

Depth first search and breadth first search;

Depth first searchStart accessing from the initial node and mark it as The visited state, and then recursively visit other unvisited nodes in the adjacency list of the initial node. After that, all nodes can be visited.

  /**
   * 深度优先搜索算法
   * 这里不需要顶点，也就是邻接表的初始点
   */
    this.dfs = (v) {
        this.marked[v] = true;
        for (var w of this.adj[v]) {
            if (!this.marked[w]) {
                this.dfs(w);
            }
        }
    }

According to From the picture and the above code, you can see that deep search can actually do many other extensions

Breadth-first search

  /**
   * 广度优先搜索算法
   * @param  {[type]} s [description]
   */
  this.bfs = function(s) {
    var queue = [];
    this.marked[s] = true;
    queue.push(s); // 添加到队尾
    while (queue.length > 0) {
      var v = queue.shift(); // 从队首移除
      console.log("Visisted vertex: " + v);
      for (var w of this.adj[v]) {
        if (!this.marked[w]) {
          this.edgeTo[w] = v;
          this.marked[w] = true;
          queue.push(w);
        }
      }
    }
  }

而如果看了《数据结构与算法JavaScript描述》这本书,有兴趣的可以去实现下查找最短路径和拓扑排序;

两点之间所有路径

这算是找到的比较能理解的方式来计算

以上图为例,这是一个简单的流程图,可以很简单的看出,右边的流程实际上是未完成的,因为无法到达终点,所以是一个非法点,而通过上面的深度搜索,可以看出,只要对深度优先搜索算法进行一定的修改,那么就可以找到从开始到结束的所有的路径,再通过对比,就可以知道哪些点无法到达终点,从而确定非法点.
上代码:

    /**
     * 深度搜索,dfs,解两点之间所有路径
     * @param  {[type]} v [description]
     * @return {[type]}   [description]
     */
    function Graph2(v) {
        var _this = this;

        this.vertices = v; // 总顶点
        this.edges = 0; //图的起始边数
        this.adj = []; //内部邻接表表现形式
        this.marked = []; // 内部顶点访问状态,与邻接表对应
        this.path = []; // 路径表示
        this.lines = []; // 所有路径汇总

        for (var i = 0; i < this.vertices; ++i) {
            _this.adj[i] = [];
        }

        /**
         * 初始化访问状态
         * @return {[type]} [description]
         */
        this.initMarked = function() {
            for (var i = 0; i < _this.vertices; ++i) {
                _this.marked[i] = false;
            }
        };

        /**
         * 在邻接表中增加节点
         * @param {[type]} v [description]
         * @param {[type]} w [description]
         */
        this.addEdge = function(v, w) {
            this.adj[v].push(w);
            this.edges++;
        };

        /**
         * 返回生成的邻接表
         * @return {[type]} [description]
         */
        this.showGraph = function() {
            return this.adj;
        };

        /**
         * 深度搜索算法
         * @param  {[type]} v    [起点]
         * @param  {[type]} d    [终点]
         * @param  {[type]} path [路径]
         * @return {[type]}      [description]
         */
        this.dfs = function(v, d, path) {
            var _this = this;

            this.marked[v] = true;
            path.push(v);

            if (v == d) {
                var arr = [];
                for (var i = 0; i < path.length; i++) {
                    arr.push(path[i]);
                }

                _this.lines.push(arr);
            } else {
                for (var w of this.adj[v]) {
                    if (!this.marked[w]) {
                        this.dfs(w, d, path);
                    }
                }
            }

            path.pop();
            this.marked[v] = false;
        };

        this.verify = function(arr, start, end) {

            this.initMarked();

            for (var i = 0; i < arr.length; i++) {
                _this.addEdge(arr[i].from, arr[i].to);
            }

            this.dfs(start, end, this.path);
            return this.lines;
        };
    }

可以看出修改了addEdge()函数,将邻接表中的双向记录改为单向记录,可以有效避免下图的错误计算:

只计算起点到终点的所有连线有时并不客观,如果出现

这种情况的话,实际上深度遍历并不能计算出最右边的节点是合法的,那么就需要重新修改起点和终点,来推导是否能够到达终点.从而判定该点是否合法.至于其他的,只是多了个返回值,存储了一下计算出来的所有路径.
而在dfs函数中,当满足能够从起点走到终点的,则记录下当前的path中的值,保存到lines中去,而每一次对于path的推入或者推出,保证了只有满足条件的点,才能被返回;
而this.marked[v] = false,则确保了,在每一次重新计算路径时,都会验证每个点是否存在不同的相对于终点能够到达的路径是否存在.
当然,一定会有更加简单的方法,我这里只是稍微修改了下基础的代码!

redo和undo

这是我觉得最简单却耗时最久的功能,思路都知道:创建一个队列,记录每一次创建一个流程节点,删除一个流程节点,建立一个新的关联关系,删除一个新的关联关系等,都需要记录下来,再通过统一的接口来访问队列,执行操作.
但在具体实现上,jsPlumb的remove确实需要注意一下:
首先,如果需要删除连线,那么使用jsPlumb提供的detach()方法,就可以删除连线,注意,传入的数据应该是connection对象.
当然,也可以使用remove()方法,参数为选择器或者element对象都可以,这个方法删除的是一个节点,包括节点上所有的线.
而jsPlumb中会内部缓存所有的数据,用于刷新,和重连.
那么当我移除一个多层级且内部有连线的情况时,如果只删除最外层的元素,那么内部的连线实际上并没有清除,所以当redo或者移动时,会出现连线的端点有一端会跑到坐标原点,也就是p上(0,0)的地方去.所以清除时,需要注意,要把内部的所有节点依次清除,才不会发生一些莫名其妙的bug.

而在删除和连接连线上,我使用了jsPlumb提供的事件bind(&#jsPlumb flowchart experience summaryjsPlumb flowchart experience summary;connection&#jsPlumb flowchart experience summaryjsPlumb flowchart experience summary;)和bind("connectionDetached"),用于判断一条连线被连接或者删除.而在记录这里的redo和undo事件时,尤其要注意,需要首先确定删除和连接时的连线的类型,否则会产生额外的队列事件.
因此,在使用连接事件时,就可以使用

jsPlumb.connect({
    source:"foo",
    target:"bar",
    parameters:{
        "p1":jsPlumb flowchart experience summaryjsPlumb flowchart experience summary,
        "p2":new Date(),
        "pjsPlumb flowchart experience summary":function() { console.log("i am pjsPlumb flowchart experience summary"); }
    }
});

来进行类型的传参,这样事件触发时就可以分类处理.
也可以使用connection.setData()事件,参数可以指定任意的值,通过connection.getData()方法,就可以拿到相应的数据了.
而redo和undo本身确实没有什么东西

    var defaults = {
        &#jsPlumb flowchart experience summaryjsPlumb flowchart experience summary;name&#jsPlumb flowchart experience summaryjsPlumb flowchart experience summary;: "mutation",
        &#jsPlumb flowchart experience summaryjsPlumb flowchart experience summary;afterAddServe&#jsPlumb flowchart experience summaryjsPlumb flowchart experience summary;:$.noop,
        &#jsPlumb flowchart experience summaryjsPlumb flowchart experience summary;afterUndo&#jsPlumb flowchart experience summaryjsPlumb flowchart experience summary;:$.noop,
        &#jsPlumb flowchart experience summaryjsPlumb flowchart experience summary;afterRedo&#jsPlumb flowchart experience summaryjsPlumb flowchart experience summary;:$.noop
    }

    var mutation = function(options){
        this.options = $.extend(true,{},defaults,options);

        this.list = [];
        this.index = 0;
    };

    mutation.prototype = {
        addServe:function(undo,redo){
            if(!_.isFunction(undo) || !_.isFunction(redo)) return false;

            // 说明是在有后续操作时,更新了队列
            if(this.canRedo){
                this.splice(this.index+1);
            };
            this.list.push({
                undo:undo,
                redo:redo
            });

            console.log(this.list);

            this.index = this.list.length - 1;

            _.isFunction(this.options.afterAddServe) && this.options.afterAddServe(this.canUndo(),this.canRedo());
        },
        /**
         * 相当于保存之后清空之前的所有保存的操作
         * @return {[type]} [description]
         */
        reset:function(){
            this.list = [];
            this.index = 0;
        },
        /**
         * 当破坏原来队列时,需要对队列进行修改,
         * index开始的所有存储值都没有用了
         * @param  {[type]} index [description]
         * @return {[type]}       [description]
         */
        splice:function(index){
            this.list.splice(index);
        },
        /**
         * 撤销操作
         * @return {[type]} [description]
         */
        undo:function(){
            if(this.canUndo()){
                this.list[this.index].undo();
                this.index--;

                _.isFunction(this.options.afterUndo) && this.options.afterUndo(this.canUndo(),this.canRedo());
            }
        },
        /**
         * 重做操作
         * @return {[type]} [description]
         */
        redo:function(){
            if(this.canRedo()){
                this.index++;
                this.list[this.index].redo();

                _.isFunction(this.options.afterRedo) && this.options.afterRedo(this.canUndo(),this.canRedo());
            }
        },
        canUndo:function(){
            return this.index !== -1;
        },
        canRedo:function(){
            return this.list.length - 1 !== this.index;
        }
    }

    return mutation;

每次在使用redo或者undo时,只需要判断当前是否是队列的尾端或者起始端,再确定是否redo或者undo就可以了.
调用时的undo()和redo()通过传参,将不同的函数封装进队列里,就可以减少耦合度.

放大缩小

这里想了想还是记录一下,方法采用了最简单的mousedown和mousemove,让元素在节流中动态的变化大小,就可以了,

只需要用一个节点,在点击元素时,根据元素的大小来确定该辅助节点四个点的位置,就可以了,只要监听了这四个点的位置,再同步给该定位元素,就能实现这一效果,方法就不贴了,没有太多东西

Summary

I personally find this project quite interesting. I can learn new algorithms, understand new data structures, including design patterns, and also integrate them into code integration. Both the middleware model and the publish-subscriber model gave me a new understanding of js. Although require has been used to manage modules, the structure is still highly coupled and should still be restricted.
As a resignation Regarding the last project before, I actually feel that my coding ability still hasn’t changed much from the beginning of the year. Maybe it’s time to break away from the comfortable environment and start over.

The above is the detailed content of jsPlumb flowchart experience summary. For more information, please follow other related articles on the PHP Chinese website!