Svg-pan-zoom is not supported by Jointjs v3.1.1?

Question

I build a gragh using Jointjs v1.0.3, and adding svg-pan-zoom.js to it , it worked well. but recently I change the Jointjs v1.0.3 to Jointjs v3.1.1, it does not work.

so Svg-pan-zoom is not supported by Jointjs v3.1.1 anymore ?

the following code works well with Jointjs v1.0.3, but when I change it to Jointjs v3.1.1, pan and zoom does not work .

it is wired , because I think svg-pan-zoom is worked for all the svg graph, no matter how jointjs.js code changed ,it is still a svg graph,so not sure why it won't work.

var gridsie = 1;
var currentSle = 1;
var realscale = 1;
var targetElt = $('#paper')[0];

var graph = new joint.dia.Graph; 
var paper = new joint.dia.Paper({
    el: $('#paper'),
    width: 1200,
    height: 600,
    gridsize: gridsie,
    model: graph,
    snapLinks: true,
    linkPinning: false,
    embeddingMode: true
});

var cell = new joint.shapes.devs.Atomic({
    position: { x: 400, y: 150 },
    size: { width: 100, height: 100 }
});
graph.addCells([cell]);

setGrid(paper, gridsie * 0.1, '#000000');

//Enable pan when a blank area is click (held) on
paper.on('blank:pointerdown', function(evt, mouseX, mouseY) {
        panAndZoom.enablePan();
});

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

panAndZoom = svgPanZoom(targetElt.childNodes[0],
        {
            viewportSelector : targetElt.childNodes[0].childNodes[0],
            fit : false,
            zoomScaleSensitivity : 0.4,
            panEnabled : false,
            minZoom : 0.01,
            center : false,
            onZoom : function(scale) {
                currentSle = scale;
                setGrid(paper, gridsie * 15 * currentSle, '#808080');
            },
            beforePan : function(oldpan, newpan) {
                setGrid(paper, gridsie * 15 * currentSle, '#808080', newpan);

            },
            beforeZoom : function() {
                realscale = panAndZoom.getSizes().realZoom;
            }
        });
//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.gridsie = gridsie;
    // 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 || '#666666';
    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');
    }
}

there is a similiar question here ,How to make a paper draggable

Answer 1

Finally I figure out what's wrong.

changing targetElt.childNodes[0] to document.getElementById('paper').childNodes[2] and changing targetElt.childNodes[0].childNodes[0] to document.getElementById('paper').childNodes[2].childNodes[1]

it worked.