JointJS:创建时需要目标元素 link
JointJS: Require target element when creating link
我试图避免 links 以 space 结束,我只想允许 links 将一个元素与另一个元素连接起来。我当前的代码是:
new joint.shapes.basic.Rect({
id: id,
size: {
width: width,
height: height
},
attrs: {
text: {
text: label,
'font-size': letterSize
},
rect: {
width: width,
height: height,
rx: 5,
ry: 5,
stroke: '#555',
'magnet': true
}
}
});
对于论文:
var paper = new joint.dia.Paper({
el: $('#paper-basic'),
width: 1250,
height: 1000,
model: graph,
gridSize: 1,
validateConnection: function(cellViewS, magnetS, cellViewT, magnetT, end, linkView) {
// Prevent linking from output ports to input ports within one element.
if (cellViewS === cellViewT) return false;
// Prevent linking to input ports.
return magnetT;
},
markAvailable: true
});
如何要求每个 link 都有一个源和一个目标?也许通过扩展 validateConnection
?
Validate Connection 只会帮助验证磁铁,当 link 的末尾随机 space 在纸上时,它不会被调用。您可以使用以下方法删除不完整的 links:
// keep links from being incomplete
function isLinkInvalid(link){
return (!link.prop('source/id') || !link.prop('target/id'));
}
paper.on('cell:pointerup', function(cellView) {
if (! (cellView.model instanceof joint.dia.Link) ) return; // if it's not a link, don't worry about it
// otherwise, add an event listener to it.
cellView.model.on('batch:stop', function(){
var links = graph.getLinks();
links.forEach(function(link){
if(isLinkInvalid(link)){
link.remove();
}});
});
});
它向 link 添加了一个 eventListener。在 'cell:pointerup'
上执行此操作很重要,因为在创建 link 时会调用 'batch:stop'
。如果 link 没有目标 ID,则它没有连接到端口。
如果这仍然相关,现在 Paper
元素上有一个名为 linkPinning
的选项:
http://jointjs.com/api#dia.Paper.prototype.options
linkPinning - when set to true (the default), links can be pinned to
the paper meaning a source or target of a link can be a point. If you
do not want to let the user to drag a link and drop it somewhere in a
blank paper area, set this to false. The effect is that the link will
be returned to its original position whenever the user drops it
somewhere in a blank paper area.
略different/shorter回答结合@Anora s和https://groups.google.com/forum/#!topic/jointjs/vwGWDFWVDJI
paper.on('cell:pointerup', function (cellView, evt) {
var elem = cellView.model
var source = elem.get('source')
var target = elem.get('target')
if (elem instanceof joint.dia.Link && (!source.id || !target.id)) {
elem.remove()
}
})
我试图避免 links 以 space 结束,我只想允许 links 将一个元素与另一个元素连接起来。我当前的代码是:
new joint.shapes.basic.Rect({
id: id,
size: {
width: width,
height: height
},
attrs: {
text: {
text: label,
'font-size': letterSize
},
rect: {
width: width,
height: height,
rx: 5,
ry: 5,
stroke: '#555',
'magnet': true
}
}
});
对于论文:
var paper = new joint.dia.Paper({
el: $('#paper-basic'),
width: 1250,
height: 1000,
model: graph,
gridSize: 1,
validateConnection: function(cellViewS, magnetS, cellViewT, magnetT, end, linkView) {
// Prevent linking from output ports to input ports within one element.
if (cellViewS === cellViewT) return false;
// Prevent linking to input ports.
return magnetT;
},
markAvailable: true
});
如何要求每个 link 都有一个源和一个目标?也许通过扩展 validateConnection
?
Validate Connection 只会帮助验证磁铁,当 link 的末尾随机 space 在纸上时,它不会被调用。您可以使用以下方法删除不完整的 links:
// keep links from being incomplete
function isLinkInvalid(link){
return (!link.prop('source/id') || !link.prop('target/id'));
}
paper.on('cell:pointerup', function(cellView) {
if (! (cellView.model instanceof joint.dia.Link) ) return; // if it's not a link, don't worry about it
// otherwise, add an event listener to it.
cellView.model.on('batch:stop', function(){
var links = graph.getLinks();
links.forEach(function(link){
if(isLinkInvalid(link)){
link.remove();
}});
});
});
它向 link 添加了一个 eventListener。在 'cell:pointerup'
上执行此操作很重要,因为在创建 link 时会调用 'batch:stop'
。如果 link 没有目标 ID,则它没有连接到端口。
如果这仍然相关,现在 Paper
元素上有一个名为 linkPinning
的选项:
http://jointjs.com/api#dia.Paper.prototype.options
linkPinning - when set to true (the default), links can be pinned to the paper meaning a source or target of a link can be a point. If you do not want to let the user to drag a link and drop it somewhere in a blank paper area, set this to false. The effect is that the link will be returned to its original position whenever the user drops it somewhere in a blank paper area.
略different/shorter回答结合@Anora s和https://groups.google.com/forum/#!topic/jointjs/vwGWDFWVDJI
paper.on('cell:pointerup', function (cellView, evt) {
var elem = cellView.model
var source = elem.get('source')
var target = elem.get('target')
if (elem instanceof joint.dia.Link && (!source.id || !target.id)) {
elem.remove()
}
})