Joint.js Add Custom Ports With Path Class. For Custom Elements

What I am trying to do is make a element with custom class for ports and path so that I can add an element with custom path and my own markup for ports.This way when I create an el

Solution 1:

I suggest to define an element with custom markup for the shape and ports. Both markups should contain an SVG path, so you can set an arbitrary path data d via model.attr() on them.

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

    markup: '<gclass="rotatable"><gclass="scalable"><pathclass="body"/></g><textclass="label"/><gclass="inPorts"/><gclass="outPorts"/></g>',
    portMarkup: '<gclass="port port<%= id %>"><pathclass="port-body"/><textclass="port-label"/></g>',

    defaults: joint.util.deepSupplement({
        type: 'devs.GenericModel'
    }, joint.shapes.devs.Model.prototype.defaults)
});

Tell the paper to use devs.ModelView for rendering.

joint.shapes.devs.GenericModelView = joint.shapes.devs.ModelView;

Now you can set or change d attribute for the shape and ports anytime you wish.

var model = new joint.shapes.devs.GenericModel({
    attrs: {
        '.body': { d: 'M 0 0 0 50 50 50 z'},
        '.port-body': { d: 'M 0 0 10 0 10 10 0 10 z'}
    } 
});

model.attr('.body/d', 'M 25 0 50 50 0 50 z');

JS Fiddle: http://jsfiddle.net/kumilingus/kge023bc/