先来看看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
});
其中：
-
elementView用于定义个性化的组件渲染类，如果你希望你的组件显示得与众不同，这个类是必须要自己重写的，我这里就重写了这个类，加入了一些特殊decorate。 -
highlighting参数用于控制如何展示高亮组件，其中name参数表示了几种高亮方法，可选值如下：
stroke：针对不同的对象（circle、rect、path等），再生成一个高亮的svg对象，用于表示高亮；
addClass：不生成svg对象，而是在原来的对象上增加一个classname，由options参数指定；
opacity：也是增加一个classname，不过这个是内置的classname，效果已经预先设置为半透明。
-
defaultLink用于定义缺省连线的形状，例如当进行拖拽连接时就用这个参数来生成连线，因此可以设置为特殊样式，以适应不同的场景； -
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值。
