29 lines
786 B
JavaScript
29 lines
786 B
JavaScript
|
import React, { useState, useMemo } from 'react'
|
||
|
|
|
||
|
|
export const PanZoomContext = React.createContext({})
|
||
|
|
|
||
|
|
export const PanZoomContextProvider = ({ children }) => {
|
||
|
|
const [zoomed, setZoomed] = useState(false)
|
||
|
|
const [_zoomFunctions, setZoomFunctions] = useState(false)
|
||
|
|
|
||
|
|
const value = useMemo(() => {
|
||
|
|
const onTransformed = (_ref, state) => {
|
||
|
|
setZoomed(state.scale !== 1)
|
||
|
|
}
|
||
|
|
|
||
|
|
const reset = () => {
|
||
|
|
setZoomed(false)
|
||
|
|
_zoomFunctions.resetTransform()
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
zoomed,
|
||
|
|
zoomFunctions: _zoomFunctions ? { ..._zoomFunctions, reset } : false,
|
||
|
|
setZoomFunctions,
|
||
|
|
onTransformed,
|
||
|
|
}
|
||
|
|
}, [zoomed, setZoomed, _zoomFunctions, setZoomFunctions])
|
||
|
|
|
||
|
|
return <PanZoomContext.Provider value={value}>{children}</PanZoomContext.Provider>
|
||
|
|
}
|