Demo of SVG Pan and Zoom combined with Jointjs

<!DOCTYPE html>
<html>

  <head>
  </head>

  <body>
    <h1>Demo of SVG Pan and Zoom combined with Jointjs</h1>
  <div id="graph"></div>
    <script data-require="jquery@2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script data-require="lodash.js@3.10.0" data-semver="3.10.0" src="http://jointjs.com/js/vendor/lodash/lodash.min.js"></script>
    <script data-require="backbone.js@1.1.2" data-semver="1.1.2" src="http://jointjs.com/js/vendor/backbone/backbone-min.js"></script>
    <link data-require="jointjs@0.8.1" data-semver="0.8.1" rel="stylesheet" href="http://jointjs.com/cms/downloads/joint.min.css" />
    <script data-require="jointjs@0.8.1" data-semver="0.8.1" src="http://jointjs.com/cms/downloads/joint.min.js"></script>
    <script src="https://cdn.rawgit.com/ariutta/svg-pan-zoom/master/dist/svg-pan-zoom.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </body>
</html>

//Initial Parameters
var gridsize = 1;
var currentScale = 1;


//Get the div that will hold the graph
var targetElement= $('#graph')[0];


//Setup the graph and paper
var graph = new joint.dia.Graph();
var paper = new joint.dia.Paper({
    el: $('#graph'),
    width: 800,
    height: 600,
    gridSize: gridsize,
    model: graph,
    snapLinks: true,
    linkPinning: false,
    embeddingMode: true
});


//Bonus function use (see below) - create dotted grid
setGrid(paper, gridsize*15, '#808080');
  
  
//Create test cell and add to graph
var cell = new joint.shapes.devs.Atomic({
    position: { x: 400, y: 150 },
    size: { width: 100, height: 100 }
});
graph.addCells([cell]);

//Setup  svgpan and zoom, with handlers that set the grid sizing on zoom and pan
//Handlers not needed if you don't want the dotted grid
panAndZoom = svgPanZoom(targetElement.childNodes[0], 
{
    viewportSelector: targetElement.childNodes[0].childNodes[0],
    fit: false,
    zoomScaleSensitivity: 0.4,
    panEnabled: false,
    onZoom: function(scale){
        currentScale = scale;
        setGrid(paper, gridsize*15*currentScale, '#808080');
    },
    beforePan: function(oldpan, newpan){
        setGrid(paper, gridsize*15*currentScale, '#808080', newpan);
    }
});

//Enable pan when a blank area is click (held) on
paper.on('blank:pointerdown', function (evt, x, y) {
    panAndZoom.enablePan();
    //console.log(x + ' ' + y);
});

//Disable pan when the mouse button is released
paper.on('cell:pointerup blank:pointerup', function(cellView, event) {
  panAndZoom.disablePan();
});


//BONUS function - will add a css background of a dotted grid that will scale reasonably
//well with zooming and panning.
function setGrid(paper, size, color, offset) {
    // Set grid size on the JointJS paper object (joint.dia.Paper instance)
    paper.options.gridsize = gridsize;
    // Draw a grid into the HTML 5 canvas and convert it to a data URI image
    var canvas = $('<canvas/>', { width: size, height: size });
    canvas[0].width = size;
    canvas[0].height = size;
    var context = canvas[0].getContext('2d');
    context.beginPath();
    context.rect(1, 1, 1, 1);
    context.fillStyle = color || '#AAAAAA';
    context.fill();
    // Finally, set the grid background image of the paper container element.
    var gridBackgroundImage = canvas[0].toDataURL('image/png');
    $(paper.el.childNodes[0]).css('background-image', 'url("' + gridBackgroundImage + '")');
    if(typeof(offset) != 'undefined'){  
        $(paper.el.childNodes[0]).css('background-position', offset.x + 'px ' + offset.y + 'px');
    }
}

/* Styles go here */