CODEWITHSUNDEEP
jointjs
Nguyen
Nguyen

Reputation: 43

Connect 2 elements jointjs

I'm a newbie in jointjs. Today I have a small example as below:

  1. I have a start Activity

    var startEndActivity = function (x, y, name, fillColor, textColor, size) {
fillColor = fillColor || '#007FBE';
textColor = textColor || "#000";
size = size || { width: 100, height: 40 };
var rect = new joint.shapes.basic.Rect({
    position: { x: x, y: y },
    size: size,
    attrs: {
        rect: { fill: fillColor, rx: 5, ry: 5, 'stroke-width': 1, stroke: '#002F5D' },
        text: {
            text: name, fill: textColor,
            'font-size': 14, 'font-family': 'sans-serif'
        }
    }
});
graph.addCell(rect);
return rect;}

  2. I have a condition Activity

    var activityDecision = function (x, y, name, fillColor, textColor, size{
fillColor = fillColor || '#BF664C';
textColor = textColor || "#080808";
size = size || { width: 200, height: 60 };
var node = new joint.shapes.basic.Rhombus({
    position: { x: x, y: y },
    size: size,
});
node.attr({
    rect: { fill: fillColor, 'stroke-width': 1, stroke: 'white' },
    text: {
        text: name, fill: textColor,
    }
});
graph.addCell(node);
return node;}

I want to click on start activity and I can draw a arrow to connect between 2 elements. Thank you so much

Upvotes: 1

Views: 2081

Answers (4)

Shahar Shokrani
Shahar Shokrani

Reputation: 8762

In order to connect two element you have to work with Ports (documentation):

My best advice for you is to learn how to implement ports by looking in the JointJS source code, as a reference look for object: joint.shapes.devs.Model (live demo + source code inside)

something like this:

var myRect = joint.shapes.devs.Model.extend({
    portMarkup: '<circle class="port-body myCustomClass"/>',
    defaults: _.defaultsDeep({    
        type: 'myRect',
    }, joint.shapes.basic.Generic.prototype.defaults),
});

and inside of startEndActivity function change the var rect to:

var startRect = new myRect({
    position: { x: x, y: y },
    size: size,
    attrs: {
        rect: { fill: fillColor, rx: 5, ry: 5, 'stroke-width': 1, stroke: '#002F5D' },
        text: {
            text: name, fill: textColor,
            'font-size': 14, 'font-family': 'sans-serif'
        }
    },
    ports: {
        groups: {
            'out': {
                position: {
                    name: 'right'
                },
                attrs: {
                    '.port-label': {
                        fill: '#000'
                    },
                    '.port-body': {
                        fill: '#fff',
                        stroke: '#000',
                        r: 10,
                        magnet: true
                    }
                },
                label: {
                    position: {
                        name: 'right',
                        args: {
                            y: 10
                        }
                    }
                }
            }
        }
});

do the same for the second element.

Upvotes: 0

shdr
shdr

Reputation: 966

function create(type) {
var link = new joint.dia.Link({
            source: { x: 10, y: 20 },
            target: { x: 350, y: 20 },
            attrs: {}
        });
        link.prop({...});
        link.addTo(graph)
}
//init connection:
new joint.dia.Link({
    source: { id: 'source-id' },
    target: { id: 'target-id', port: 'port_id'}
});

Upvotes: 0

Nguyen
Nguyen

Reputation: 43

I found solution for this. Thank you so much. Just add more attribute like this

el.attr('rect/magnet', true).attr('text/pointer-events', 'none');

Upvotes: 0

Mark Dyson
Mark Dyson

Reputation: 305

The most common approach that I know of is to use ports on your elements. This link should get you started on that route:

WORKING WITH PORTS

If you prefer to have the entire element behave as a port you need to look into the "magnetic" attribute. This link should help you get started researching what you need (especially the first answer):

How to interactively create links in JointJS

Upvotes: 1

Related Questions