33 lines
751 B
TypeScript
33 lines
751 B
TypeScript
|
import React, { useEffect } from "react"
|
||
|
|
import state from "state"
|
||
|
|
|
||
|
|
/**
|
||
|
|
* When the state's camera changes, update the transform of
|
||
|
|
* the SVG group to reflect the correct zoom and pan.
|
||
|
|
* @param ref
|
||
|
|
*/
|
||
|
|
export default function useZoomPanEffect(
|
||
|
|
ref: React.MutableRefObject<SVGGElement>
|
||
|
|
) {
|
||
|
|
useEffect(() => {
|
||
|
|
let { camera } = state.data
|
||
|
|
|
||
|
|
return state.onUpdate(({ data }) => {
|
||
|
|
const g = ref.current
|
||
|
|
if (!g) return
|
||
|
|
|
||
|
|
const { point, zoom } = data.camera
|
||
|
|
|
||
|
|
if (point !== camera.point || zoom !== camera.zoom) {
|
||
|
|
console.log("changed!")
|
||
|
|
g.setAttribute(
|
||
|
|
"transform",
|
||
|
|
`scale(${zoom}) translate(${point[0]} ${point[1]})`
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
camera = data.camera
|
||
|
|
})
|
||
|
|
}, [state])
|
||
|
|
}
|