How to add ports to a circle

Question

I am able to add ports to a rectangle using joint.shapes.devs.Model but the same is not working for a circle.

Here's what I have tried to add ports to circle:

var circle1 = new joint.shapes.basic.Circle({
                            position: {x: 100, y: 225},
                            size: {width: 51, height: 51},
                            outPorts: [''],
                            attrs: {
                                '.': {magnet: true},
                                '.label': {text: '', 'ref-x': .4, 'ref-y': .2},
                                '.inPorts circle': {type: 'input'},
                                '.outPorts circle': {type: 'output'},
                                '.port-body': {r: 4}
                            }
                        });
                        graph.addCell(circle1);

I can see that Circle is created but with out ports. I couldn't find any documentation on this. Any help would be appreciated. Thanks

Answer 1

The example below shows how to define a circle element with rectangular ports.

joint.shapes.devs.CircleModel = joint.shapes.devs.Model.extend({

    markup: '<g class="rotatable"><g class="scalable"><circle class="body"/></g><text class="label"/><g class="inPorts"/><g class="outPorts"/></g>',
    portMarkup: '<g class="port port<%= id %>"><rect class="port-body"/><text class="port-label"/></g>',

    defaults: joint.util.deepSupplement({

        type: 'devs.CircleModel',
        attrs: {
            '.body': { r: 50, cx: 50, stroke: 'blue', fill: 'lightblue' },
            '.label': { text: 'Circle Model', 'ref-y': 0.5, 'y-alignment': 'middle' },
            '.port-body': { width: 10, height: 10, x: -5, stroke: 'gray', fill: 'lightgray', magnet: 'active' }
        }

    }, joint.shapes.devs.Model.prototype.defaults)
});

It's important to tell the paper not to use default dia.ElementView for rendering but the devs.ModelView instead. To do that just define the view in the same namespace as the related model and add "View" at the end of model's name.

joint.shapes.devs.CircleModelView = joint.shapes.devs.ModelView;

Usage example:

var circleModel = new joint.shapes.devs.CircleModel({
    position: { x: 500, y: 100 },
    size: { width: 100, height: 100 },
    inPorts: ['a'],
    outPorts: ['b']
});
graph.addCell(circleModel);

JS Fiddle:

http://jsfiddle.net/kumilingus/gpfu7o4f/1/