How to center scaling of a JointJS paper

Question

I've implemented the scaling of a paper and it works great.

I linked it to the scrolling of the mousewheel, but I still encounter one problem: In the API the scale function is defined as scale paper.scale(sx, sy, [ox, oy]) and I figured that ox and oy can center the zooming to a specific position. In my case this position should be the pointer. But although I hand over the coordinates (offsetX and offsetY of the mouse event), it has absolutly no effect.

Can someone give me an example of how to use ox and oy?

Answer 1

Don't forget to transform the mouse coordinates into the viewport coordinate system first.

function offsetToLocalPoint(offsetX, offsetY, paper) {
    var svgPoint = paper.svg.createSVGPoint();
    svgPoint.x = offsetX;
    svgPoint.y = offsetY;
    var offsetTransformed = svgPoint.matrixTransform(paper.viewport.getCTM().inverse());
    return offsetTransformed
}

And reset the previous viewport translate transformation before you call paper.scale() with the origin [ox, oy] of scale transformation specified. You can see this in the mousewheel event handler example below.

function onMouseWheel(e) {

    e.preventDefault();
    e = e.originalEvent;

    var delta = Math.max(-1, Math.min(1, e.wheelDelta)) / SPEED;
    var newScale = V(paper.viewport).scale().sx + delta;

    if (newScale > MIN_SCALE && newScale < MAX_SCALE) {
        paper.setOrigin(0, 0); // reset the previous 'translate'            
        var p = offsetToLocalPoint(e.offsetX, e.offsetY);
        paper.scale(newScale, newScale, p.x, p.y);
    }
}

A cross-browser version fiddle here.