How to change the default Link name of the graph in jointJS - Rappid

Question

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' } } }
        ]
            }),

score 0 · Answer 1 · answered Nov 24 '17 at 11:28

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
            });
        }

How to change the default Link name of the graph in jointJS - Rappid

1 Answers1