Could anyone help me with this algorithm?

powerpolygon-viewport-method

/*
Goal:
The idea here is to apply a zoom effect to the current slide, centering the mouse position when the user uses the scroll.

Problem:
The first zoom works fine, but after the first zoom, the visual reference of the pointer is different from the real mouse position, what makes the user apply the zoom effect in different coordinates!

How it is done:
PowerPolygon offers a method called PPW.viewport() which receives an object to apply zoom centering the given x and y coordinates, described here: https://github.com/braziljs/power-polygon/wiki/API%20-%20Power%20Polygon

This method sets the transofmr-origin to the given coordinates and applies the given zoom as a transform:scale() on the css of the current slide.

When the user scrolls the mouse, it should call the private method _zoomBy, which is basically an alias to increment or decrement the current zoom using the viewport method.

What happens is that, after zooming the fisrt time, if the user moves the cursor to a different point, the cursor is now visually on a point, but its coordinates are in a different point!

The method which takes care of this is at:
https://github.com/braziljs/power-polygon/blob/master/ppw/ppw.js#L1105

*/

/*
Goal:
The idea here is to apply a zoom effect to the current slide, centering the mouse position when the user uses the scroll.

Idéia:
A idéia aqui é aplicar um efeito de zoom no slide corrente, centralizando a posição do mouse quando o usuario der o scroll.

Problem:
The first zoom works fine, but after the first zoom, the visual reference of the pointer is different from the real mouse position, what makes the user apply the zoom effect in different coordinates!

O problema:
O primeiro zoom funciona bem, mas depois deste, a referencia visual do ponteiro é diferente da referencia real do mouse, o que faz o usuário dar o zoom em diferentes coordenadas.

How it is done:
PowerPolygon offers a method called PPW.viewport() which receives an object to apply zoom centering the given x and y coordinates, described here: https://github.com/braziljs/power-polygon/wiki/API%20-%20Power%20Polygon

This method sets the transofmr-origin to the given coordinates and applies the given zoom as a transform:scale() on the css of the current slide.

When the user scrolls the mouse, it should call the private method _zoomBy, which is basically an alias to increment or decrement the current zoom using the viewport method.

What happens is that, after zooming the fisrt time, if the user moves the cursor to a different point, the cursor is now visually on a point, but its coordinates are in a different point!

The method which takes care of this is at:
https://github.com/braziljs/power-polygon/blob/master/ppw/ppw.js#L1105

Como é feito:
O PowerPolygon oferece um método chamado PPW.viewport() que recebe um objeto pra aplicar o zoom, centralizando as coordenadas x e y informadas como descrito aqui:
https://github.com/braziljs/power-polygon/wiki/API%20-%20Power%20Polygon

O método seta o transofmr-origin para as coordenadas e aplica o zoom como transform:scale() no css do slide corrente.

Quando o usuario ativa o scroll do mouse, isso deve chamar um método privado _zoomBy, o qual é basicamente um alias para incrementar ou decrementar o zoom corrente usando o método viewport.

O que acontece é o seguinte, quando da-se o zoom pela primeira vez, se o usuário mover o cursor para uma diferente posição, o cursor agora é vizualizado em um ponto mas as coordenadas são diferentes do ponto.

O método que toma conta disso está em:
https://github.com/braziljs/power-polygon/blob/master/ppw/ppw.js#L1105

*/

var targetX = clickPositionInCanvasX || canvasWidth / 2
  , targetY = clickPositionInCanvasY || canvasHeight / 2
  , newScale = scale + step
  , ratio = newScale / scale

obj = {
    x: targetX - (targetX - obj.x) * ratio
  , y: targetY - (targetY - obj.y) * ratio
}

scale = newScale