CODEWITHSUNDEEP
draggablejointjsxlink
Ashok Chandrasekaran
Ashok Chandrasekaran

Reputation: 31

Hyperlinks not working in joint.js in user draggable elements

I am using joint.js to generate a services flowchart. And I use the below code snippet to create my custom element. 

// Create a custom element.
// ------------------------

joint.shapes.custom = {};
// The following custom shape creates a link out of the whole element.
joint.shapes.custom.ElementLink = joint.shapes.basic.Rect.extend({
// Note the `<a>` SVG element surrounding the rest of the markup.
markup: '<a><g class="rotatable"><g class="scalable"><rect/></g><text/></g></a>',
defaults: joint.util.deepSupplement({
    type: 'custom.ElementLink'
}, joint.shapes.basic.Rect.prototype.defaults)
});

// Create JointJS elements and add them to the graph as usual.
// -----------------------------------------------------------

var supply = new joint.shapes.custom.ElementLink({
position: { x: 200, y: 110 }, size: { width: 250, height: 60 },
attrs: {
    rect: { fill: '#3366ff', stroke: '#1d3d9e', 'stroke-width': 5 },
    a: { 'xlink:href': 'http://www.aamrofreight.net/supply-chain-management/', cursor: 'pointer' },
    text: { text: 'Supply Chain \nManagement', fill: 'white'  }
}
});

Problem is that on a single left click on the supply element, the hyperlink does not open. Only when I drag and and release the element, the link opens in a new tab. Kindly suggest me what can be done to overcome this issue. I have disabled user dragging of elements using the var paper = new joint.dia.Paper({ el: $('#paper'), width: 1040, height: 1000, gridSize: 1, model: graph, interactive: false });

Thanks in advance!

Upvotes: 0

Views: 680

Answers (1)

Kumar
Kumar

Reputation: 197

Here is your answer... you didn't add xlink:show': 'new'. That's why it's not getting open.

create custom shap...

joint.shapes.custom = {};

joint.shapes.custom.ElementLink = joint.shapes.basic.Rect.extend({
    // Note the `<a>` SVG element surrounding the rest of the markup.
    markup: '<a><g class="rotatable"><g class="scalable"><rect/></g><text/></g></a>',
    defaults: joint.util.deepSupplement({
        type: 'custom.ElementLink'
    }, joint.shapes.basic.Rect.prototype.defaults)
});

You Data:

var supply = new joint.shapes.custom.ElementLink({
    position: { x: 200, y: 110 }, size: { width: 250, height: 60 },
    attrs: {
        rect: { fill: '#3366ff', stroke: '#1d3d9e', 'stroke-width': 5 },
        a: { 'xlink:href': 'http://www.aamrofreight.net/supply-chain-management/', 'xlink:show': 'new', cursor: 'pointer' },
        text: { text: 'Supply Chain \nManagement', fill: 'white'  }
    }

For more information..check here: [http://jointjs.com/tutorial/hyperlinks

I hope, it should work for you.

Upvotes: 2

Related Questions