web-page/src/pages/agent-office/hooks/useOfficeCanvas.js

// src/pages/agent-office/hooks/useOfficeCanvas.js
import { useRef, useEffect, useCallback } from 'react';
import { OfficeRenderer } from '../canvas/OfficeRenderer.js';

export function useOfficeCanvas() {
  const canvasRef = useRef(null);
  const rendererRef = useRef(null);

  useEffect(() => {
    if (!canvasRef.current) return;

    const renderer = new OfficeRenderer(canvasRef.current);
    rendererRef.current = renderer;
    renderer.start();

    const handleResize = () => renderer.resize();
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
      renderer.destroy();
      rendererRef.current = null;
    };
  }, []);

  const updateAgentState = useCallback((agentId, state, detail) => {
    rendererRef.current?.updateAgentState(agentId, state, detail);
  }, []);

  const setAgentNotification = useCallback((agentId, count) => {
    rendererRef.current?.setAgentNotification(agentId, count);
  }, []);

  const setTheme = useCallback((themeName) => {
    rendererRef.current?.setTheme(themeName);
  }, []);

  const setZoom = useCallback((level) => {
    rendererRef.current?.setZoom(level);
  }, []);

  const hitTest = useCallback((clientX, clientY) => {
    return rendererRef.current?.hitTest(clientX, clientY) || { type: 'empty' };
  }, []);

  const getZoom = useCallback(() => {
    return rendererRef.current?.zoom || 2;
  }, []);

  const wasDragging = useCallback(() => {
    return rendererRef.current?.wasDragging?.() || false;
  }, []);

  return {
    canvasRef,
    updateAgentState,
    setAgentNotification,
    setTheme,
    setZoom,
    hitTest,
    getZoom,
    wasDragging
  };
}