The author of this Raphael JS extension has vanished from the face of the internet, help me with his script

The extension I'm talking about is the Raphael-zpd: http://pohjoisespoo.net84.net/src/raphael-zpd.js

/* EDIT The script is added to a Raphael document with this command var zpd = new RaphaelZPD(paper, { zoom: true, pan: true, drag: false}); where paper is your canvas */

The script was originally released at the authors github http://www.github.com/somnidea which no longer exists.

What I wanted to do was run the mousewheel zoom out to the threshold as soon as the raphael is loaded. The zoomthreshold is set at the beginning of the script zoomThreshold: [-37, 20]. In the mousewheel scroll function it is compared to zoomCurrent which is by default 0 me.zoomCurrent = 0;

This is the whole mousewheel event part

me.handleMouseWheel = function(evt) {
    if (!me.opts.zoom) return;

    if (evt.preventDefault)
        evt.preventDefault();

    evt.returnValue = false;

    var svgDoc = evt.target.ownerDocument;

    var delta;

    if (evt.wheelDelta)
        delta = evt.wheelDelta / 3600; // Chrome/Safari
    else
        delta = evt.detail / -90; // Mozilla

    if (delta > 0) {
        if (me.opts.zoomThreshold) 
            if (me.opts.zoomThreshold[1] <= me.zoomCurrent) return;
        me.zoomCurrent++;
    } else {
        if (me.opts.zoomThreshold)
            if (me.opts.zoomThreshold[0] >= me.zoomCurrent) return;
        me.zoomCurrent--;
    }

    var z = 1 + delta; // Zoom factor: 0.9/1.1

    var g = svgDoc.getElementById("viewport"+me.id);

    var p = me.getEventPoint(evt);

    p = p.matrixTransform(g.getCTM().inverse());

    // Compute new scale matrix in current mouse position
    var k = me.root.createSVGMatrix().translate(p.x, p.y).scal开发者_JS百科e(z).translate(-p.x, -p.y);
    me.setCTM(g, g.getCTM().multiply(k));

    if (!me.stateTf)
        me.stateTf = g.getCTM().inverse();

    me.stateTf = me.stateTf.multiply(k.inverse());
}

The reason I can't just draw a smaller SVG to begin with is that I'm using raster images as the background and need them to be higher resolution. I would still like to start at the furthest point I've set at the threshold. Is it possible for me to somehow use this script to do this? I'm naturally using it otherwise to handle mouse zoom/pan.

//EDIT

There is also this function at the end of the script, but so far I've been unable to work it.

Raphael.fn.ZPDPanTo = function(x, y) {
var me = this;

if (me.gelem.getCTM() == null) {
    alert('failed');
    return null;
}

var stateTf = me.gelem.getCTM().inverse();

var svg = document.getElementsByTagName("svg")[0];

if (!svg.createSVGPoint) alert("no svg");        

var p = svg.createSVGPoint();

p.x = x; 
p.y = y;

p = p.matrixTransform(stateTf);

var element = me.gelem;
var matrix = stateTf.inverse().translate(p.x, p.y);

var s = "matrix(" + matrix.a + "," + matrix.b + "," + matrix.c + "," + matrix.d + "," + matrix.e + "," + matrix.f + ")";

element.setAttribute("transform", s);

return me;


}

Seems like it's used for panning through the document through say click events so that a click would execute the function with the given coordinates. However, as said I've been unable to work it. I don't know how it's supposed to function. I tried paper.ZPDPanTo(100, 100); as well as just ZPDPanTo(100,100) but nothing happens.

You may also want to check out the working branch for Raphaël 2.0, which supposedly adds support for viewBox and transforms, see https://github.com/DmitryBaranovskiy/raphael/tree/2.0.

This doesn't answer your question fully, but it seems quite possible that Raphaël 2.0 will address your use-case.

If you're using pure svg then you can manipulate the zoom&pan positions via the SVG DOM properties currentTranslate and currentScale, see this example.

An example using RAPHAEL ZPD:

var paper = Raphael("container",800,760);

window.paper = paper;

zpd = new RaphaelZPD(paper, { zoom: true, pan: true, drag: false });

paper.circle(100,100, 50).attr({fill:randomRGB(),opacity:0.95});
paper.rect(100,100, 250, 300).attr({fill:randomRGB(),opacity:0.65});
paper.circle(200,100, 50).attr({fill:randomRGB(),opacity:0.95});
paper.circle(100,200, 50).attr({fill:randomRGB(),opacity:0.95});

http://jsfiddle.net/4PkRm/1/