import { useThree } from '@react-three/fiber'; import { useCameraState } from '../hooks'; import type { AxisOffsets } from '../models'; import { getVisibleDomains } from '../utils'; import Axis from './Axis'; import styles from './AxisSystem.module.css'; import { useAxisSystemContext } from './AxisSystemProvider'; import Html from './Html'; interface Props { axisOffsets: AxisOffsets; title?: string; } function AxisSystem(props: Props) { const { axisOffsets, title } = props; const gl = useThree((state) => state.gl); const canvasSize = useThree((state) => state.size); const { width, height } = canvasSize; const { abscissaConfig, ordinateConfig } = useAxisSystemContext(); const { xVisibleDomain, yVisibleDomain } = useCameraState( getVisibleDomains, [] ); return ( // Append to `canvasWrapper` instead of default container `r3fRoot`, which hides overflow

{title &&

{title}

}

); } export default AxisSystem;