onZoomStart not triggered
ashking opened this issue · 1 comments
ashking commented
HI,
I am trying to get onZoomStart triggered when the zoom happens -
import React, { useCallback, useRef } from "react";
import QuickPinchZoom, { make3dTransformValue } from "react-quick-pinch-zoom";
const IMG_URL =
"https://user-images.githubusercontent.com/4661784/" +
"56037265-88219f00-5d37-11e9-95ef-9cb24be0190e.png";
export const App = () => {
const imgRef = useRef();
const onUpdate = useCallback(({ x, y, scale }) => {
const { current: img } = imgRef;
if (img) {
const value = make3dTransformValue({ x, y, scale });
console.log(value)
img.style.setProperty("transform", value);
}
}, []);
return (
<QuickPinchZoom minZoom={0.1} onUpdate={onUpdate} onZoomStart={() => console.log(" --- onZoomStart")}>
<img ref={imgRef} src={IMG_URL} />
</QuickPinchZoom>
);
};
But nothing gets logged.
Also on zoom out when the scale is < 1, it resets back to 1.
I am doing simple logging at onUpdate function -
here is the output when I zoom out
{x: 72.83009088725078, y: 55.54549531761776, scale: 0.9178569267690161}
Panner.js?9bbc:41 {x: 119.7066319161354, y: 86.69372323812661, scale: 0.8686783502995947}
Panner.js?9bbc:41 {x: 308.07706112986756, y: 211.86091633409336, scale: 0.7147810028493384}
Panner.js?9bbc:41 {x: 481.9505963415516, y: 327.3953048629097, scale: 0.6143219803273658}
Panner.js?9bbc:41 {x: 589.6057507255324, y: 398.9293219206864, scale: 0.5651434038579445}
Panner.js?9bbc:41 {x: 1102.290229507924, y: 739.5946663747756, scale: 0.40915739521384054}
Panner.js?9bbc:41 {x: 1625.9387979364026, y: 1087.5453598700144, scale: 0.31917693123221214}
Panner.js?9bbc:41 {x: 1821.9788167700958, y: 1217.8087934371395, scale: 0.29489774689078146}
Panner.js?9bbc:41 {x: 1821.7349318776428, y: 1217.6457810223505, scale: 0.29492558284567405}
Panner.js?9bbc:41 {x: 1797.8472706236953, y: 1201.6792924649944, scale: 0.2976777178255819}
Panner.js?9bbc:41 {x: 1657.1039106653482, y: 1107.6065733984744, scale: 0.31499649768602667}
Panner.js?9bbc:41 {x: 1445.90928142397, y: 966.4442973887088, scale: 0.3451268847537115}
Panner.js?9bbc:41 {x: 1189.6146038851614, y: 795.1371948334756, scale: 0.39045016262500487}
Panner.js?9bbc:41 {x: 954.9099893865093, y: 638.2608685195243, scale: 0.44382496618667916}
Panner.js?9bbc:41 {x: 733.6860260135514, y: 490.39499574708645, scale: 0.5094696462981266}
Panner.js?9bbc:41 {x: 548.667697418752, y: 366.7289325437731, scale: 0.5813873798929099}
Panner.js?9bbc:41 {x: 399.0464075267813, y: 266.72221411284124, scale: 0.6563085169043642}
Panner.js?9bbc:41 {x: 286.84672120504086, y: 191.72805755852505, scale: 0.7265157828713544}
Panner.js?9bbc:41 {x: 193.42002850346924, y: 129.28175090199713, scale: 0.7975578423502805}
Panner.js?9bbc:41 {x: 122.22329286193744, y: 81.69392500071638, scale: 0.8617753847643028}
Panner.js?9bbc:41 {x: 72.28253621004039, y: 48.31357390014767, scale: 0.9133610474292736}
Panner.js?9bbc:41 {x: 32.9914008730863, y: 22.051418886569806, scale: 0.9585016392742813}
Panner.js?9bbc:41 {x: 11.308433829813163, y: 7.558545703819909, scale: 0.9853768099906063}
Panner.js?9bbc:41 {x: 0.7640230903436237, y: 0.5106722587800954, scale: 0.9989983670862254}
Panner.js?9bbc:41 {x: 1.8363088827300092e-13, y: 1.1579626146840385e-13, scale: 0.9999999999999999}
Panner.js?9bbc:41 {x: 39.3088725093902, y: 26.119711338476375, scale: 0.9508214235305785}
Panner.js?9bbc:41 {x: 75.15894041432026, y: 49.941138038462796, scale: 0.9100064229965209}
Panner.js?9bbc:41 {x: 183.70169213405478, y: 122.06494016802324, scale: 0.8053392362594604}
Panner.js?9bbc:41 {x: 362.13627794255433, y: 240.63002679077624, scale: 0.6772795915603638}
Panner.js?9bbc:41 {x: 645.5440714007531, y: 428.9470474439214, scale: 0.540715880393982}
Panner.js?9bbc:41 {x: 848.6590395776715, y: 563.9115986667422, scale: 0.4724431848526002}
Panner.js?9bbc:41 {x: 2248.704283126769, y: 1494.2048197092347, scale: 0.25260043144226085}
Panner.js?9bbc:41 {x: 6172.842747117509, y: 4101.691562229398, scale: 0.10962314128875743}
Panner.js?9bbc:41 {x: 6839.999999999998, y: 4545, scale: 0.1}
Panner.js?9bbc:41 {x: 6839.999999999998, y: 4545, scale: 0.1}
Panner.js?9bbc:41 {x: 6839.999999999998, y: 4545, scale: 0.1}
Panner.js?9bbc:41 {x: 6839.999999999998, y: 4545, scale: 0.1}
Panner.js?9bbc:41 {x: 6837.30067084508, y: 4543.206366811534, scale: 0.10003553010828276}
Panner.js?9bbc:41 {x: 6470.746398599763, y: 4299.64069906958, scale: 0.1051067148679387}
Panner.js?9bbc:41 {x: 5197.524540594338, y: 3453.618280263343, scale: 0.12756976405575668}
Panner.js?9bbc:41 {x: 3709.2097857707063, y: 2464.6722918607984, scale: 0.17005243352409322}
Panner.js?9bbc:41 {x: 2490.537112040962, y: 1654.896370500902, scale: 0.23380751359051788}
Panner.js?9bbc:41 {x: 1738.9926431630201, y: 1155.514848417533, scale: 0.30412254396957894}
Panner.js?9bbc:41 {x: 1217.3955006847718, y: 808.9272734813285, scale: 0.3843439512918948}
Panner.js?9bbc:41 {x: 815.4610012184941, y: 541.852375809657, scale: 0.48239848489565923}
Panner.js?9bbc:41 {x: 554.2973871113915, y: 368.31602696217436, scale: 0.5782557337881911}
Panner.js?9bbc:41 {x: 378.78375987474476, y: 251.69184044308668, scale: 0.6673786778304536}
Panner.js?9bbc:41 {x: 250.94420630828623, y: 166.745821296953, scale: 0.7517724472405145}
Panner.js?9bbc:41 {x: 152.95555854114355, y: 101.63494350431215, scale: 0.8324611125808152}
Panner.js?9bbc:41 {x: 87.52287423688446, y: 58.15664669687682, scale: 0.896730959249105}
Panner.js?9bbc:41 {x: 38.127642230095454, y: 25.334814902892017, scale: 0.9522286408680687}
Panner.js?9bbc:41 {x: 12.026836739087496, y: 7.991516517419623, scale: 0.9844217374749732}
Panner.js?9bbc:41 {x: 0.43220649374257186, y: 0.28718984123648095, scale: 0.9994316304727078}
Panner.js?9bbc:41 {x: -9.99200722162641e-16, y: -3.603228826420946e-13, scale: 0.9999999999999999}
The scale goes to the minimum but resets back to 1.
Do you know why?