Connect 2 elements jointjs

Question

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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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.