Set initial scale / x /y

[nilokillian]

Hi, I've go a need to set default coordinates and scale when SVG is initially rendered. it seems like scaleTo method can set custom values for scale , x , y but it's not clear where to use it

[retyui]

@nilokillian Try to use a scaleTo() method on did mount?

import React, { useCallback, useRef, useEffect } 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 pinchZoomRef = useRef();
  const onUpdate = useCallback(({ x, y, scale }) => {
    const { current: img } = imgRef;

    if (img) {
      const value = make3dTransformValue({ x, y, scale });

      img.style.setProperty("transform", value);
    }
  }, []);

+  useEffect(() => {
+    pinchZoomRef.current?.scaleTo({...})
+  },[]);

  return (
+    <QuickPinchZoom ref={pinchZoomRef} onUpdate={onUpdate}>
      <img ref={imgRef} src={IMG_URL} />
    </QuickPinchZoom>
  );
};

[nilokillian]

even if just copy / paste the code above , it doesn't work. It looks like scaleTo has no effect on.

we've got a new ref which is not attached to anything. Is it how it should be ?

pinchZoomRef.current?.scaleTo({ x: 30, y: 40, scale: 3 });

[retyui]

@nilokillian oh I forgot to pass pinchZoomRef as ref prop to QuickPinchZoom

It should solve this problem