Controlling zoom state via shared state

[SpaceTimeEvent]

I have a component which (supposed to) help zooming the picture, which shows alongside the window of zoom pan pinch, like this:

_<CustomSlider commonZoomValue={commonZoomValue} handleSliderChange={handleSliderChange} />

const [commonZoomValue, setCommonZoomValue] = useState(30);

function handleSliderChange(newZoomValue) { setCommonZoomValue(newZoomValue); }_

I need to syncronize the state of zoom between the slider and zoompincher, I managed to syncronize zoompinch -> slider like this:

_function handleZoomChange(newZoomValue) { setCommonZoomValue(newZoomValue); }

<TransformWrapper onZoom={(e) => handleZoomChange(e.state.scale * 100)}_

and the "dot" of the slider changes it position correctly, when I zoom in or zoom out in zoompinch window using mouse scroll wheel.

But I can't figure out how to syncronize the zoom state from slider to zoompincher.

In summary, how can I set the zoom value directly from commonZoomValue state to zoompincher (TransformWrapper)?

[hy2850]

You want to make zoom-in/out event with the slider, right? Probably use setTransform handler that is provided via render props? It seems like a function that allows the user to control the zooming behavior (please refer to the code below)

docs : https://prc5.github.io/react-zoom-pan-pinch/?path=/story/docs-handlers--page code : https://github.com/prc5/react-zoom-pan-pinch/blob/72fd37e7555f169b2b83b96973cea606f5c96fa3/src/core/handlers/handlers.logic.ts#L43-L65

Plus) I think this guy is doing the similar thing as you are https://github.com/prc5/react-zoom-pan-pinch/issues/276#issuecomment-1481391712

[SpaceTimeEvent]

You want to make zoom-in/out event with the slider, right? Probably use setTransform handler that is provided via render props? It seems like a function that allows the user to control the zooming behavior (please refer to the code below)

docs : https://prc5.github.io/react-zoom-pan-pinch/?path=/story/docs-handlers--page code :

https://github.com/prc5/react-zoom-pan-pinch/blob/72fd37e7555f169b2b83b96973cea606f5c96fa3/src/core/handlers/handlers.logic.ts#L43-L65

Plus) I think this guy is doing the similar thing as you are #276 (comment)

It worked! Thank you very much! )))) The final piece code for future visitors (although there some glitching going on when I extremely zoom out, I guess i'll figure it out later):

useEffect(() => { const targetScale = parseFloat(commonZoomValue / 100); const zoomCurrent = zoomerRef.current const zoomInstance = zoomCurrent?.instance const currentScale = zoomInstance?.transformState?.scale; const factor = Math.log(targetScale / currentScale);

/*
factor -0.20479441264601314
targetScale 1.1
currentScale 1.35
*/

if (targetScale > currentScale) {
  zoomCurrent?.zoomIn(factor, 0);
} else {
  zoomCurrent?.zoomOut(-factor, 0);
}

}, [commonZoomValue])

Also found working demo https://codesandbox.io/s/loving-mccarthy-2ejsz?file=/src/App.js