ui.Stencil: drag and drop links

[umairshahid436]

i have made a toolbox where different links drawn there but when i select that link and want to drop on paper nothing is happened. please help

[kumilingus]

Could you please elaborate more on this? Are you trying to drag links from the stencil and drop them into the paper?

[umairshahid436]

Yes i was trying to drag links from stencil and drop on paper. On 31 Aug 2015 23:57, "Roman Bruckner" notifications@github.com wrote:

Could you please elaborate more on this? Are you trying to drag links from the stencil and drop them into the paper?

— Reply to this email directly or view it on GitHub https://github.com/clientIO/JointJS_plus/issues/62#issuecomment-136466098 .

[kumilingus]

Hi, unfortunately using links in the stencil is not supported. We are considering to implement this feature and include it in the next release (coming out in 2 weeks) though.

For time being I'm posting here a snippet showing how to achieve this in the current Rappid version. Basically you can create an element that looks like a link and swap it with a real link as soon as it's dropped on the paper.

joint.shapes.basic.LinkElement = joint.shapes.basic.Generic.extend({

    markup: '<g class="rotatable"><g class="scalable"><rect/><path/></g></g>',

    defaults: joint.util.deepSupplement({

        type: 'basic.LinkElement',
        attrs: {
            // creating a transparent rectangle under the path to make the dragging easier.
            'rect': { fill: 'transparent', stroke: 'none', width: 50, height: 50 },
            // path representing a link
            'path': { stroke: '#000000', d: 'M 0 0 50 50' }
        }

    }, joint.shapes.basic.Generic.prototype.defaults)
});

var stencilLink = new joint.shapes.basic.LinkElement({
    position: { x: 130, y: 50 }, // the position in your stencil
    size: { width: 50, height: 50 }
});

stencil.load([stencilLink]);

graph.on('add', function(cell, collection, opt) {

    // replace new linkElements with the real links
    if (opt.stencil && cell instanceof joint.shapes.basic.LinkElement) {
        var bbox = cell.getBBox();
        var link = new joint.dia.Link({ source: bbox.origin(), target: bbox.corner() });
        cell.remove();
        link.addTo(graph);
    }
});

Sorry for late reply.

[kumilingus]

Planned for Rappid release v1.8.