fumblehool/jointjs

## jointjs
<html>
<head>
	<title>example for joint js</title>
  <!-- Required Scripts & css -->
  <link rel="stylesheet" type="text/css" href="./libs/css/joint.css"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script>
  <script src="./libs/joint.js"></script>
</head>

<body>

    <button onclick="createNewBox()">Create a new box</button>
    This button creates a new box.
    <button onclick="convertToJSON()">Create json</button>
    This button writes graph's data to log on the debugging console
    <div id="myholder"></div>
    <script type="text/javascript">

      //Graph
      var graph = new joint.dia.Graph;
      //Paper
      var paper = new joint.dia.Paper({
          el: $('#myholder'),
          width: 900,
          height: 400,
          model: graph,
          gridSize: 1,
          snapLinks: { radius: 75 },
          defaultLink: new joint.dia.Link({
            attrs: { '.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z' } }
          })
      });

      //My Box
      var rect = new joint.shapes.basic.Rect({
          position: { x: 100, y: 30 },
          size: { width: 100, height: 30 },
          attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
      });

      //My Box 2
      var rect2 = rect.clone();
      rect2.translate(400);

      //Link between My Box 1 and My Box 2
      var link = new joint.dia.Link({
          source: { id: rect.id },
          target: { id: rect2.id }
      });
      link.attr({
        '.connection': { stroke: 'black' },
        '.marker-source': { fill: 'red', d: 'M 10 0 L 0 5 L 10 10 z' },
        '.marker-target': { fill: 'green', d: 'M 10 0 L 0 5 L 10 10 z' }
      });
      graph.addCells([rect, rect2, link]);
      graph.on('all', function(eventName, cell) {
        console.log(arguments);
      });

      //Create new box
      function createNewBox(){
        var m1 = new joint.shapes.devs.Model({
          position: { x: 300, y: 60 },
          size: { width: 90, height: 90 },
          inPorts: ['port1','port2'],
          outPorts: ['port3', 'port4'],
          ports: {
              groups: {
                  'in': {
                      attrs: {
                          '.port-body': {
                              fill: '#16A085'
                          }
                      }
                  },
                  'out': {
                      attrs: {
                          '.port-body': {
                              fill: '#E74C3C'
                          }
                      }
                  }
              }
          },
          attrs: {
              '.label': { text: 'Model', 'ref-x': .5, 'ref-y': .2 },
              rect: { fill: '#2ECC71' }
          }
      });

      //Set custom attribute
        m1.set('mycustom2', 'bar')
        graph.addCells([m1]);
        console.log("created");
        console.log(m1.get('mycustom2'));
      };

      //Convert graph to json
      function convertToJSON(){
        console.log(JSON.stringify(graph));
      };

      //On click
      paper.on('cell:pointerdown',
        function(cellView, evt, x, y) {
          console.log('cell view ' + cellView.model.id + ' was clicked');
        }
      );

      //On mouse hover
      paper.on('cell:mouseover',
        function(cellView, evt, x, y) {
          console.log('cell view ' + cellView.model.id + ' hover');
        }
      );

    </script>
</body>
</html>
	<html>
	<head>
	<title>example for joint js</title>
	<!-- Required Scripts & css -->
	<link rel="stylesheet" type="text/css" href="./libs/css/joint.css"/>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script>
	<script src="./libs/joint.js"></script>
	</head>

	<body>

	<button onclick="createNewBox()">Create a new box</button>
	This button creates a new box.
	<button onclick="convertToJSON()">Create json</button>
	This button writes graph's data to log on the debugging console
	<div id="myholder"></div>
	<script type="text/javascript">

	//Graph
	var graph = new joint.dia.Graph;
	//Paper
	var paper = new joint.dia.Paper({
	el: $('#myholder'),
	width: 900,
	height: 400,
	model: graph,
	gridSize: 1,
	snapLinks: { radius: 75 },
	defaultLink: new joint.dia.Link({
	attrs: { '.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z' } }
	})
	});

	//My Box
	var rect = new joint.shapes.basic.Rect({
	position: { x: 100, y: 30 },
	size: { width: 100, height: 30 },
	attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white' } }
	});

	//My Box 2
	var rect2 = rect.clone();
	rect2.translate(400);

	//Link between My Box 1 and My Box 2
	var link = new joint.dia.Link({
	source: { id: rect.id },
	target: { id: rect2.id }
	});
	link.attr({
	'.connection': { stroke: 'black' },
	'.marker-source': { fill: 'red', d: 'M 10 0 L 0 5 L 10 10 z' },
	'.marker-target': { fill: 'green', d: 'M 10 0 L 0 5 L 10 10 z' }
	});
	graph.addCells([rect, rect2, link]);
	graph.on('all', function(eventName, cell) {
	console.log(arguments);
	});

	//Create new box
	function createNewBox(){
	var m1 = new joint.shapes.devs.Model({
	position: { x: 300, y: 60 },
	size: { width: 90, height: 90 },
	inPorts: ['port1','port2'],
	outPorts: ['port3', 'port4'],
	ports: {
	groups: {
	'in': {
	attrs: {
	'.port-body': {
	fill: '#16A085'
	}
	}
	},
	'out': {
	attrs: {
	'.port-body': {
	fill: '#E74C3C'
	}
	}
	}
	}
	},
	attrs: {
	'.label': { text: 'Model', 'ref-x': .5, 'ref-y': .2 },
	rect: { fill: '#2ECC71' }
	}
	});

	//Set custom attribute
	m1.set('mycustom2', 'bar')
	graph.addCells([m1]);
	console.log("created");
	console.log(m1.get('mycustom2'));
	};

	//Convert graph to json
	function convertToJSON(){
	console.log(JSON.stringify(graph));
	};

	//On click
	paper.on('cell:pointerdown',
	function(cellView, evt, x, y) {
	console.log('cell view ' + cellView.model.id + ' was clicked');
	}
	);

	//On mouse hover
	paper.on('cell:mouseover',
	function(cellView, evt, x, y) {
	console.log('cell view ' + cellView.model.id + ' hover');
	}
	);

	</script>
	</body>
	</html>