0

i wanna create an application for drawing graph is comprised of circle and arrows exactly like this :http://jointjs.com/demos/shortest-path 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 ? 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="joint.css" />
<script src="joint.js"></script>
</head>        

<body>
<div id="myholder"></div>


<script type="text/javascript">
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: [
       '<g class="rotatable">',
       '<g class="scalable">',
       '<rect/>',
       '</g>',
       '<g class="inPorts">',
       '<g class="port1"><circle/><text/></g>',
       '</g>',
       '<g class="outPorts">',
       '<g class="port3"><circle/><text/></g>',
       '</g>',
       '</g>'
   ].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);


});





</script>
</body>


</html>

in that code i make a application for making graph with rectangle and arrows i can't make circle instead of rectangle

kittu
  • 6,662
  • 21
  • 91
  • 185
issam zebdi
  • 39
  • 6
  • Here's a related SO question: http://stackoverflow.com/questions/31368160/joint-js-add-custom-ports-with-path-class-for-custom-elements. It shows how to create a custom shape with but you can follow the same logic to create a custom shape with ports. – dave Nov 10 '15 at 10:25

2 Answers2

1

The snippet below shows a circle element with rectangular ports.

var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
  el: $('#paper'),
  width: 400,
  height: 200,
  gridSize: 20,
  model: graph
});

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

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

var circleModel = new joint.shapes.devs.CircleModel({
  position: {
    x: 150,
    y: 100
  },
  size: {
    width: 100,
    height: 100
  },
  inPorts: ['a'],
  outPorts: ['b']
});
graph.addCell(circleModel);
#paper {
  display: inline-block;
  border: 1px solid gray;
}
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.7/joint.min.js"></script>
<div id="paper"></div>
Roman
  • 1,652
  • 11
  • 15
-2

just change the markup. but this time change rect for circle and change the attrs accordingly to the new shape.

unifield
  • 1