JointJS Shape with Ports from Existing SVG

Create a shape with ports from an existing SVG File

by stanvishne

HTML

<script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.7/joint.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.7/joint.css">
<!-- JointJS Fiddle -->
<div id="paper"></div>

CSS

#paper {
  display: inline-block;
  border: 1px solid blue;
  background: white;
}

JavaScript

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

var svgFile = [
  '<?xml version="1.0" standalone="no"?>',
  '<svg viewBox="0 0 1024 768" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" stroke-linecap="round" stroke-linejoin="round" fill-rule="evenodd" xml:space="preserve" >',
  '<defs >',
  '<clipPath id="clipId0" >',
  '<path d="M0,768 1024,768 1024,0 0,0 z" />',
  '</clipPath>',
  '</defs>',
  '<g stroke-width="0.1" clip-path="url(#clipId0)" fill="none" stroke="rgb(0,0,0)" />',
  '<g stroke-width="0.25" clip-path="url(#clipId0)" fill="rgb(0,0,0)" stroke="none" >',
  '<path d="M1013.96,634.98 10.0392,634.98 1013.96,133.02 z" />',
  '</g>',
  '<g stroke-width="0.25" clip-path="url(#clipId0)" fill="none" stroke="rgb(0,0,0)" >',
  '<polyline points="10.0392,133.02 1013.96,133.02 1013.96,634.98 10.0392,634.98 10.0392,133.02 " />',
  '<polyline points="10.0392,634.98 1013.96,133.02 " />',
  '</g>',
  '</svg>'
].join('');


var el1 = new joint.shapes.devs.Model({
  markup: '<g class="rotatable"><g class="scalable"><image class="body"/></g><text class="label"/><g class="inPorts"/><g class="outPorts"/></g>',
  size: {
    width: 100,
    height: 100
  },
  position: {
    x: 100,
    y: 100
  },
  attrs: {
    '.body': {
      width: 1024,
      height: 768,
      'xlink:href': 'data:image/svg+xml;utf8,' + encodeURIComponent(svgFile),
      preserveAspectRatio: 'none'
    }
  },
  inPorts: ['a','b'],
  outPorts: ['c','d']
});

var el2 = el1.clone().position(300, 300).attr('.label/text','Model 2').resize(200, 200);

graph.addCells([el1, el2]);