import React from "react"; import { CodeEditor, CodeEditorRef } from "../ui/code-editor"; import { InputEditor, InputEditorRef } from "../ui/input-editor"; import { MainLayout } from "../ui/MainLayout"; import { useExecController } from "../ui/use-exec-controller"; import { LanguageProvider, StepExecutionResult } from "../engines/types"; import BrainfuckProvider from "../engines/brainfuck"; import { OutputViewer, OutputViewerRef } from "../ui/output-viewer"; import { ExecutionControls } from "./execution-controls"; import { RendererRef, RendererWrapper } from "./renderer-wrapper"; /** * React component that contains and controls the entire IDE. * * For performance reasons, Mainframe makes spare use of state hooks. This * component is rather expensive to render, and will block the main thread on * small execution intervals if rendered on every execution. All state management * is delegated to imperatively controlled child components. */ export const Mainframe = () => { // Language provider and engine const providerRef = React.useRef>(BrainfuckProvider); const execController = useExecController(); // Refs for controlling UI components const codeEditorRef = React.useRef(null); const inputEditorRef = React.useRef(null); const outputEditorRef = React.useRef(null); const rendererRef = React.useRef>(null); // Interval of execution const [execInterval, setExecInterval] = React.useState(20); /** Utility that updates UI with the provided execution result */ const updateWithResult = (result: StepExecutionResult) => { rendererRef.current!.updateState(result.rendererState); codeEditorRef.current!.updateHighlights(result.nextStepLocation); outputEditorRef.current!.append(result.output); }; /** Reset and begin a new execution */ const runProgram = async () => { // Check if controller is free for execution const readyStates = ["empty", "done"]; if (!readyStates.includes(execController.state)) { console.error(`Controller not ready: state is ${execController.state}`); return; } // Reset any existing execution state outputEditorRef.current!.reset(); await execController.resetState(); await execController.prepare( codeEditorRef.current!.getValue(), inputEditorRef.current!.getValue() ); // Begin execution await execController.execute(updateWithResult, execInterval); }; /** Pause the ongoing execution */ const pauseExecution = async () => { // Check if controller is indeed executing code if (execController.state !== "processing") { console.error("Controller not processing any code"); return; } await execController.pauseExecution(); }; /** Run a single step of execution */ const executeStep = async () => { // Check if controller is paused if (execController.state !== "paused") { console.error("Controller not paused"); return; } // Run and update execution states const result = await execController.executeStep(); updateWithResult(result); }; /** Resume the currently paused execution */ const resumeExecution = async () => { // Check if controller is indeed paused if (execController.state !== "paused") { console.error("Controller is not paused"); return; } // Begin execution await execController.execute(updateWithResult, execInterval); }; /** Stop the currently active execution */ const stopExecution = async () => { // Check if controller has execution if (!["paused", "processing"].includes(execController.state)) { console.error("No active execution in controller"); return; } // If currently processing, pause execution loop first if (execController.state === "processing") await execController.pauseExecution(); // Reset all execution states await execController.resetState(); outputEditorRef.current!.reset(); rendererRef.current!.updateState(null); codeEditorRef.current!.updateHighlights(null); }; /** Translate execution controller state to debug controls state */ const getDebugState = () => { const currState = execController.state; if (currState === "processing") return "running"; else if (currState === "paused") return "paused"; else return "off"; }; return ( ( execController.updateBreakpoints(newPoints) } /> )} renderRenderer={() => ( )} renderInput={() => } renderOutput={() => } renderExecControls={() => ( )} /> ); };