前端流程图之JointJS（二）

先来看看paper的参数定义

var paper = new joint.dia.Paper({
    el: document.getElementById('paper'),
    width: 2800,
    height: 400,
    gridSize: 1,
    model: graph,
    snapLinks: true,
    linkPinning: false,
    elementView: joint.shapes.custom.ModelView,
    highlighting: {
        'default': {
            name: 'addClass',
            options: {
                className: 'highlighting'
            }
        }
    },
    defaultLink: new joint.dia.Link({
        attrs: { '.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z' } }
    }),
    validateConnection: function(sourceView, sourceMagnet, targetView, targetMagnet) {
        return sourceMagnet != targetMagnet;
    },
    markAvailable: false
});

其中：

1. elementView用于定义个性化的组件渲染类，如果你希望你的组件显示得与众不同，这个类是必须要自己重写的，我这里就重写了这个类，加入了一些特殊decorate。
2. highlighting参数用于控制如何展示高亮组件，其中name参数表示了几种高亮方法，可选值如下：

stroke：针对不同的对象（circle、rect、path等），再生成一个高亮的svg对象，用于表示高亮；
addClass：不生成svg对象，而是在原来的对象上增加一个classname，由options参数指定；
opacity：也是增加一个classname，不过这个是内置的classname，效果已经预先设置为半透明。

3. defaultLink用于定义缺省连线的形状，例如当进行拖拽连接时就用这个参数来生成连线，因此可以设置为特殊样式，以适应不同的场景；
4. validateConnection可以用于控制是否将当前这四个参数传递到下面的paper事件中，如果返回true，则参数会被传递下去，否则仅传递当前鼠标的位置，需要注意的是，不论true/false，对应的paper事件始终会被调用，区别仅在于参数不同。

// Create a new link by dragging
'cell:pointerup': function(cellView) {
        // We don't want a Halo for links.
        if (cellView.model instanceof joint.dia.Link) {
        console.log(cellView);

        var source = cellView.model.get('source');
        var target = cellView.model.get('target');

        graph.removeCells(cellView.model);

        if (target.id) {
            if (target.id == source.id) return;
            console.log(source.id + ": " + target.id);
            var cell = connect(source, target, source.port);
            graph.addCell(cell);
        }
    }
}

当validateConnection
返回true时，target就是目标对象，包含了id（必然）和port（可能）属性；
返回false时，target就仅包含x和y值。