SVG Pan Zoom: On Click Center Group Inside SVG to the Viewport

Question

I am using this SVG Pan Zoom Library: https://github.com/bumbu/svg-pan-zoom

I have prepared a CodePen for you: https://codepen.io/ItsBenedict/pen/vYMbjpK

If you click on a category, the group should be centered to the viewport. The relevant code I am using here is starting at line 36.

var button1 = document.getElementById("cat-1")
button1.addEventListener("click", function() {
    const { left, width, top, height } = button1.getBoundingClientRect();
    customPanBy({x: width/2 - left, y: height/2 - top});
});

At the moment the group is moving to the top left so I guess the calculations are wrong. It looks like I need to use the getSizes from this plugin but I don't know how to use it. Here is another question but I am not really experienced with JavaScript, so I can't get it to work by myself: svg-pan-zoom pan/zoom to any object

If anyone could help me, it would me much appreciated!

Answer 1

I think things got a little confused with the width and height values - this is the repaired JS calculation, using window innerHeight and innerWidth

function customPanBy(amount){ // {x: 1, y: 2}
    var animationTime = 300 // ms
    , animationStepTime = 15 // one frame per 30 ms
    , animationSteps = animationTime / animationStepTime
    , animationStep = 0
    , intervalID = null
    , destX = (window.innerWidth/2) - amount.x
    , destY = (window.innerHeight/2) - amount.y
    , stepX = destX / animationSteps
    , stepY = destY / animationSteps
    

    intervalID = setInterval(function(){
    if (animationStep++ < animationSteps) {
        panZoom.panBy({x: stepX, y: stepY})
    } else {
        // Cancel interval
        clearInterval(intervalID)
    }
    }, animationStepTime)
}

And the update to the button code

var button1 = document.getElementById("cat-1")
button1.addEventListener("click", function() {
    const { left, width, top, height } = button1.getBoundingClientRect();
customPanBy({x: left + width/2, y: top + height/2});
});

And here is the updated codepen: https://codepen.io/lexicalnoscope/pen/NWmoQVM