tldraw/hooks/useCamera.ts
2021-05-16 08:09:46 +01:00

31 lines
788 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 useCamera(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) {
g.setAttribute(
"transform",
`scale(${zoom}) translate(${point[0]} ${point[1]})`
)
localStorage.setItem("code_slate_camera", JSON.stringify(data.camera))
}
camera = data.camera
})
}, [state])
}