Reputation:
In every new created link in jointJS, over this link there is the default name "Name". How will I change it to my own name, e.x. the content of a var test ?
My link javascript code is the following:
//New Transition
this.paper = new joint.dia.Paper({
width: 1000,
height: 1000,
gridSize: 10,
model: this.graph,
defaultLink: new joint.dia.Link({
//Code alteration to mimic label functionality-adding labels:
attrs: {
'.marker-source': { d: 'M 10 0 L 0 5 L 10 10 z', transform: 'scale(0.001)' }, // scale(0)(0.001)' }, // scale(0) fails in Firefox
'.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z' },
'.connection': { stroke: 'black' }
},
router: { name: 'manhattan' },
labels:[
{ position: 0.5, attrs: { text: { text: 'Name' } } }
]
}),
Upvotes: 0
Views: 1427
Reputation: 1499
I had a similar use case and wanted the source ports label to be set as the label for the link . Couldn't get it work with any examples provided in the documentation But made it work by :
/**
* Function Creates the default link for the flow chart
*/
function createLink() {
var link = new joint.dia.Link({
attrs: { ".marker-target": { d: "M 10 0 L 0 5 L 10 10 z" } },
labels: [{
position: 0.5,
attrs: {
'.connection': { stroke: 'blue' },
}
}]
});
return link;
}
// Function creates a paper for the graph with default overrides if required any
function newDiagram(height, width, gridSize, graph) {
return new joint.dia.Paper({
width: width,
height: height,
gridSize: gridSize,
model: graph,
linkPinning: false,
defaultLink: function (cellView, magnet, link) {
var link = createLink();
// Short hack for setting label name from port
link.prop(['labels', 0, 'attrs', 'text', 'text'], magnet.getAttribute('port'));
return link;
},
interactive: {
vertexAdd: false
},
validateConnection: function (cellViewS, magnetS, cellViewT, magnetT, end, linkView) {
// Prevent linking from input ports.
if (magnetS && magnetS.getAttribute("port-group") === "in") return false;
// Prevent linking from output ports to input ports within one element.
if (cellViewS === cellViewT) return false;
// Prevent linking to input ports.
return magnetT && magnetT.getAttribute("port-group") === "in";
},
// Enable marking available cells & magnets
markAvailable: true
});
}
Upvotes: 0