Function useUrlState

src/hooks/useUrlState.ts:105–194

()

 * - Handles browser back/forward navigation
 */
export function useUrlState() {
  const { controls } = useThree();
  const reconstruction = useReconstructionStore((s) => s.reconstruction);
  const flyToState = useCameraStore((s) => s.flyToState);

  // Track whether we've applied initial state from URL
  const hasAppliedInitialState = useRef(false);
  const updateTimeoutRef = useRef<number | null>(null);
  const lastEncodedState = useRef<string>('');

  /**
   * Update URL hash with current camera state (debounced)
   */
  const updateUrlHash = useCallback(() => {
    if (updateTimeoutRef.current !== null) {
      window.clearTimeout(updateTimeoutRef.current);
    }

    updateTimeoutRef.current = window.setTimeout(() => {
      const viewState = getControlsViewState(controls);
      if (!viewState) return;

      const encoded = encodeCameraState(viewState);
      const hashUpdate = getNextCameraHashUpdate({
        href: window.location.href,
        encodedState: encoded,
        lastEncodedState: lastEncodedState.current,
      });
      if (!hashUpdate) return;

      lastEncodedState.current = hashUpdate.encodedState;
      window.history.replaceState(null, '', hashUpdate.url);
    }, URL_UPDATE_DEBOUNCE_MS);
  }, [controls]);

  /**
   * Restore camera state from URL hash
   */
  const restoreFromHash = useCallback(async () => {
    const hash = window.location.hash;
    if (!hash) return false;

    const state = await decodeCameraStateFromHash(hash);
    if (!state) return false;

    flyToState(state);
    lastEncodedState.current = encodeCameraState(state);
    return true;
  }, [flyToState]);

  // Apply initial state from URL when reconstruction loads
  useEffect(() => {
    if (!reconstruction || hasAppliedInitialState.current) return;

    restoreFromHash().then((applied) => {
      hasAppliedInitialState.current = true;
      if (applied) {
        appLogger.info('[URL State] Restored camera state from URL hash');