JSPlumb Zoom Issue

HTML

<link rel="stylesheet" href="https://jsplumbtoolkit.com/demo/statemachine/demo.css">
<link rel="stylesheet" href="https://jsplumbtoolkit.com/css/jsplumb.css">
<script src="https://jsplumbtoolkit.com/js/jquery.jsPlumb-1.7.2.js"></script>
<div id="main">
           <!-- demo -->
            <div class="demo statemachine-demo" id="statemachine-demo">
                
                <div class="w" id="opened">BEGIN<div class="ep"></div></div>
                <div class="w" id="phone1">PHONE INTERVIEW 1<div class="ep"></div></div>
                <div class="w" id="phone2">PHONE INTERVIEW 2<div class="ep"></div></div>
                <div class="w" id="inperson">IN PERSON<div class="ep"></div></div>
                <div class="w" id="rejected">REJECTED<div class="ep"></div></div>
            </div>
            <!-- /demo -->
        </div>

CSS

#main {
    width: 100%;
    height:100%;
    margin:0px;
    padding: 15px;

}
.demo {
    margin:0px;
    border: 1px solid black;
}

JavaScript

jsPlumb.ready(function(instance) {

    
    jsPlumb.connect({source:"opened", target:"phone1"});
    
    jsPlumb.draggable($(".w"));
    
    window.setZoom = function (zoom, instance, transformOrigin, el) {
        transformOrigin = transformOrigin || [0.5, 0.5];
	    instance = instance || jsPlumb;
	    el = el || instance.getContainer();
	    var p = ["webkit", "moz", "ms", "o"],
            s = "scale(" + zoom + ")",
            oString = (transformOrigin[0] * 100) + "% " + (transformOrigin[1] * 100) + "%";

	    for (var i = 0; i < p.length; i++) {
	        el.style[p[i] + "Transform"] = s;
	        el.style[p[i] + "TransformOrigin"] = oString;
	    }

	    el.style["transform"] = s;
	    el.style["transformOrigin"] = oString;

	    instance.setZoom(zoom, true);
	    instance.repaintEverything();
	    
	};
    
    
    
setZoom(1.5);
//	    jsPlumb.repaintEverything();
    
});