63 lines
No EOL
2.2 KiB
TypeScript
63 lines
No EOL
2.2 KiB
TypeScript
import { useEffect, useRef, useState } from "react";
|
|
import { Circuit } from "../../../features/apps/logic-sim/core/circuit";
|
|
import styles from "./CircuitView.module.css";
|
|
import { DropdownAction } from "../../actions/actions/DropdownAction";
|
|
import { HeaderMenu } from "../_utils/header-menu/HeaderMenu";
|
|
import { ClickAction } from "../../actions/actions/ClickAction";
|
|
import { ChipsManager } from "../../../features/apps/logic-sim/chips/chipsManager";
|
|
import { App } from "../../../features/apps/app";
|
|
import { useAppFolder } from "../../../hooks/apps/appFolder";
|
|
import { openUrl } from "../../../features/_utils/browser.utils";
|
|
|
|
interface CircuitViewProps {
|
|
app?: App;
|
|
}
|
|
|
|
export function CircuitView({ app }: CircuitViewProps) {
|
|
const virtualFolder = useAppFolder(app);
|
|
const [circuit] = useState(new Circuit("Chip", "#000", 2, 1));
|
|
const canvasRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
if (canvasRef.current == null && circuit.canvas != null)
|
|
return;
|
|
|
|
circuit.init(canvasRef.current as unknown as HTMLCanvasElement);
|
|
|
|
return () => {
|
|
circuit.cleanup();
|
|
};
|
|
}, [canvasRef, circuit]);
|
|
|
|
return <>
|
|
<HeaderMenu>
|
|
<DropdownAction label="Circuit" showOnHover={false}>
|
|
<ClickAction label="New" onTrigger={() => { circuit.reset(); }}/>
|
|
<ClickAction label="Save" onTrigger={() => {
|
|
if (virtualFolder != null)
|
|
ChipsManager.saveCircuit(circuit, virtualFolder);
|
|
}}/>
|
|
<ClickAction label="Load" onTrigger={() => {
|
|
if (virtualFolder != null)
|
|
ChipsManager.loadCircuit(circuit, virtualFolder);
|
|
}}/>
|
|
</DropdownAction>
|
|
<DropdownAction label="Add" showOnHover={false}>
|
|
<ClickAction label="AND gate" onTrigger={() => {
|
|
circuit.inputHandler.startChipPlacement(ChipsManager.CHIPS.AND);
|
|
}}/>
|
|
<ClickAction label="NOT gate" onTrigger={() => {
|
|
circuit.inputHandler.startChipPlacement(ChipsManager.CHIPS.NOT);
|
|
}}/>
|
|
</DropdownAction>
|
|
<DropdownAction label="Help" showOnHover={false}>
|
|
<ClickAction label="Digital Electronics Glossary" onTrigger={() => {
|
|
openUrl("http://www.pmcgibbon.net/teachcte/electron/degloss1.htm");
|
|
}}/>
|
|
</DropdownAction>
|
|
</HeaderMenu>
|
|
<div className={styles.CircuitView}>
|
|
<canvas ref={canvasRef} className={styles.Canvas}/>
|
|
</div>
|
|
</>;
|
|
} |