Calling scaleTo with outside control returns element to start position

[maestor]

Hi! Thanks for great library! I have one issue which can't solve and don't understand why it happens, so write here.

Use case:

• Draggable and zoomable item should be zoomIn and zoomOut also by keyboard or zoom buttons

Own expectations:

• Position would stay where it was when press the button

Actually happens:

• Element scale correctly, but onUpdate will called as long as x and y are back to 0

Codesandbox: https://codesandbox.io/s/sad-dijkstra-x98nd

• To reproduce: Zoom container for example with wheel, drag it somewhere. Press then - or + button which trigger scaleTo
• I have much more stuff inside children than one image, but this is simplest example and children div styles are same than mine real implementation. Also QuickPinchZoom component props are same than mine real case.

So, am I doing something wrong here? How I get the position staying to where it have dragged? I can see scaleTo took first correct position and moves there, then start this onUpdate iterating back to initial position.

[mimoro]

Hi there! I am trying to implement + and - zoom buttons too and I'm running into the same issues as stated above. After scaleTo is triggered with the new scale by clicking on the zoom button, onUpdate is called multiple times: first with the original/previous scale and current correct coordinates and then it's called again with the new scale but different x and y values until they are 0.

I'd really appreciate your help! Thanks!

[retyui]

@maestor you can't reuse x,y cords from an onUpdate event, as it ONLY for css translation function!

to make zoom in \ zoom out you need to remember a poison of cursor\touches to continue scaling at that point

[retyui]

You can use internal methods to make this functionality:

import QuickPinchZoom from "react-quick-pinch-zoom";

class MyPinchZoom extends QuickPinchZoom {
  _lastScaleToCenter = { x: 0, y: 0 };

  // owerwrite private method
  _scaleTo = (zoomFactor: number, center: Point) => {
    this._lastScaleToCenter = center; // remember the last center
    this._scale(zoomFactor / this._zoomFactor, center);
  };

  zoomIn() {
    this._stopAnimation();
    this._scaleTo(this._zoomFactor * 1.2, this._lastScaleToCenter);
    this._update();
  }

  zoomOut() {
    this._stopAnimation();
    this._scaleTo(this._zoomFactor / 1.2, this._lastScaleToCenter);
    this._update();
  }
}

// ------------------
// Usage

<>
  <MyPinchZoom ref={ref} />;
  <button onClick={() => ref.current?.zoomIn()}>+</button>
  <button onClick={() => ref.current?.zoomOut()}>+</button>
</>;

---

Also if you want to implement this functionality out of box, PR your welcome!