Function useEngine

packages/editor-app/src/hooks/useEngine.ts:101–230

(
    canvasIdOrOptions: string | UseEngineOptions,
    autoInit?: boolean
)

export function useEngine(canvasId: string, autoInit?: boolean): UseEngineReturn;
export function useEngine(options: UseEngineOptions): UseEngineReturn;
export function useEngine(
    canvasIdOrOptions: string | UseEngineOptions,
    autoInit?: boolean
): UseEngineReturn {
    // Parse options
    const options: UseEngineOptions = typeof canvasIdOrOptions === 'string'
        ? {
            viewportId: canvasIdOrOptions, // Use canvasId as viewportId for backward compatibility
            canvasId: canvasIdOrOptions,
            showGrid: true,
            showGizmos: true,
            autoInit
        }
        : {
            showGrid: true,
            showGizmos: true,
            autoInit: true,
            ...canvasIdOrOptions
        };

    const engineRef = useRef<EngineService>(EngineService.getInstance());
    const statsIntervalRef = useRef<number | null>(null);
    const viewportRegisteredRef = useRef(false);

    const [state, setState] = useState<EngineState>({
        initialized: engineInitialized,
        running: false,
        fps: 0,
        drawCalls: 0,
        spriteCount: 0,
        error: null
    });

    // Initialize engine and register viewport
    useEffect(() => {
        if (!options.autoInit) return;

        const init = async () => {
            try {
                // Initialize engine with primary canvas (first viewport)
                await initializeEngine(options.canvasId);
                setState((prev) => ({ ...prev, initialized: true, error: null }));

                // Register this viewport
                if (!viewportRegisteredRef.current) {
                    engineRef.current.registerViewport(options.viewportId, options.canvasId);
                    engineRef.current.setViewportConfig(
                        options.viewportId,
                        options.showGrid ?? true,
                        options.showGizmos ?? true
                    );
                    viewportRegisteredRef.current = true;
                }

                // Start stats update interval
                if (!statsIntervalRef.current) {
                    statsIntervalRef.current = window.setInterval(() => {
                        const stats = engineRef.current.getStats();