Show FOV and zoom info

TODO

@@ -29,5 +29,4 @@
 --- NOW
 
 - Select component
-- show info (fov, zoom)
 - Readme!

src/components/GenericView.tsx

@@ -11,14 +11,15 @@ import { SupportedViewIds } from 'features/screenshot/dimensions';
 import ScreenshotManager from './three/ScreenshotManager';
 import CameraManager from './three/CameraManager';
 
-const ViewStyles = styled.div<{ textColor: string }>`
+const ViewStyles = styled.div<{ textColor: string; backgroundColor: string }>`
     position: relative;
     min-width: 0;
     min-height: 0;
 
     .overlay {
         position: absolute;
         color: ${props => props.textColor};
+        background-color: ${props => props.backgroundColor};
         opacity: 0.2;
         z-index: 100;
 
@@ -73,7 +74,11 @@ function GenericView({ viewId, label, controlsProps, className, children }: Prop
     const ContextBridge = useContextBridge(ReactReduxContext);
 
     return (
-        <ViewStyles className={className} textColor={style.overlayColor}>
+        <ViewStyles
+            className={className}
+            textColor={style.overlayColor}
+            backgroundColor={style.clearColor}
+        >
             <div className="overlay camera" ref={setCameraControlsContainer} />
             <span className="overlay label">{label}</span>
             <div className="overlay actions">

src/components/three/CameraManager.tsx

@@ -1,4 +1,4 @@
-import { Size, useThree } from '@react-three/fiber';
+import { Size, useFrame, useThree } from '@react-three/fiber';
 import { useCallback, useState } from 'react';
 import { OrthographicCamera, PerspectiveCamera } from 'three';
 import { render } from 'react-dom';
@@ -99,10 +99,21 @@ function CameraManager({ cameraControlsContainer, orbitControls }: Props): null
         invalidate();
     };
 
+    const getCameraStats = () => ({
+        fov: camera instanceof PerspectiveCamera ? camera.fov : 0,
+        zoom: camera.zoom.toFixed(2),
+    });
+
+    const [cameraStats, setCameraStats] = useState(getCameraStats());
+
+    useFrame(() => setCameraStats(getCameraStats()));
+
     if (cameraControlsContainer) {
         render(
             <ControlsStyles>
                 <span className="panel-label">Camera controls</span>
+                {camera instanceof PerspectiveCamera && <div>FOV: {cameraStats.fov} deg</div>}
+                {camera instanceof OrthographicCamera && <div>Zoom: {cameraStats.zoom}x</div>}
                 <div className="btn-pair">
                     <button type="button" onClick={handleSave}>
                         Save