title: How i can make a circle with port in joint JS
body: <p>i wanna   create an application for drawing graph is comprised of circle and arrows exactly like this :<a href="http://jointjs.com/demos/shortest-path" rel="nofollow">http://jointjs.com/demos/shortest-path</a> so how can i make a circle with ports
  in that code i make a application for making graph with rectangle and arrows i can't make circle instead of rectangle ?
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;link rel="stylesheet" href="joint.css" /&gt;
  &lt;script src="joint.js"&gt;&lt;/script&gt;
  &lt;/head&gt;        
  
  &lt;body&gt;
  &lt;div id="myholder"&gt;&lt;/div&gt;
  
  
  &lt;script type="text/javascript"&gt;
  var graph = new joint.dia.Graph;
  
  var paper = new joint.dia.Paper({
      el: $('#myholder'),
      width: 10000,
      height: 600,
      model: graph
         /* defaultLink: new joint.dia.Link({
          attrs: { '.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z' } }*/
          
  });
  
  var MyElementWithPorts = joint.shapes.basic.Generic.extend({
  
    defaults: joint.util.deepSupplement({
  
     markup: [
         '&lt;g class="rotatable"&gt;',
         '&lt;g class="scalable"&gt;',
         '&lt;rect/&gt;',
         '&lt;/g&gt;',
         '&lt;g class="inPorts"&gt;',
         '&lt;g class="port1"&gt;&lt;circle/&gt;&lt;text/&gt;&lt;/g&gt;',
         '&lt;/g&gt;',
         '&lt;g class="outPorts"&gt;',
         '&lt;g class="port3"&gt;&lt;circle/&gt;&lt;text/&gt;&lt;/g&gt;',
         '&lt;/g&gt;',
         '&lt;/g&gt;'
     ].join(''),
  
     type: 'basic.Generic',
     attrs: {
         '.': { magnet: false },
         rect: {
             width: 150, height: 250,
             stroke: 'black'
         },
         circle: {
             r: 5,
             magnet: true,
             stroke: 'black'
         },
         text: {
             fill: 'black',
             'pointer-events': 'none'
         },
         '.label': { text: 'Model', dx: 5, dy: 5 },
         '.inPorts text': { dx:-15, 'text-anchor': 'end' },
         '.outPorts text':{ dx: 15 },
         '.inPorts circle': { fill: 'PaleGreen' },
         '.outPorts circle': { fill: 'Tomato' }
     }
  
   }, joint.shapes.basic.Generic.prototype.defaults)
  });
  
  var rect = new MyElementWithPorts({
  position: { x: 100, y: 30 },
  size: { width: 100, height: 30 },
  attrs: {
      '.port1 text': { text: 'port1' },
      '.port2 text': { text: 'port2' },
      '.port3 text': { text: 'port3' },
      '.port4 text': { text: 'port4' },
      '.port1': { ref: 'rect', 'ref-y': .2 },
      '.port2': { ref: 'rect', 'ref-y': .4 },
      '.port3': { ref: 'rect', 'ref-y': .2, 'ref-dx': 0 },
      '.port4': { ref: 'rect', 'ref-y': .4, 'ref-dx': 0 }        
  }
  });
  
  
  
  
  var rect2 = rect.clone();
  
  rect2.translate(600);
  
  rect2.attr({
      rect: { fill: 'red' },
      text: { fill: 'white', 'font-size': 15 ,text: 'noeud2'},
      '.myrect2': { fill: 'red' }
  });                            
  //rect2.rotate(30);
  //rect2.toFront();
  //rect2.embed (rect);
  
  var link = new joint.dia.Link({
      source: { id: rect.id },
      target: { id: rect2.id }
  });
  
  graph.addCells([rect, rect2, link]);
  link.attr({
      '.connection': { stroke: 'blue' },
      '.marker-source': { fill: 'red', d: 'M 10 0 L 0 5 L 10 10 z' },
      '.marker-target': { fill: 'yellow', d: 'M 10 0 L 0 5 L 10 10 z' }
  });
  
  paper.on('blank:pointerdblclick', function(evt, x, y) { 
      //alert('pointerdown on a blank area in the paper.')
      
      var rect3 = rect.clone();
      rect3.translate(x-80,y-80);
      rect3.attr({
      rect: { fill: 'red' },
      text: { fill: 'white', 'font-size': 15 ,text: 'noeud3'},
      '.myrect2': { fill: 'red' }
  });                            
  
     graph.addCells([rect, rect2,rect3,link]);
         //graph.addCells(rect3);
  
  
  });
  
  
  
  
  
  &lt;/script&gt;
  &lt;/body&gt;
  
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>in that code i make a application for making graph with rectangle and arrows i can't make circle instead of rectangle </p>