diff --git a/src/app/components/App.tsx b/src/app/components/App.tsx index becc421..c765699 100644 --- a/src/app/components/App.tsx +++ b/src/app/components/App.tsx @@ -13,6 +13,7 @@ const JSON_URL = const App: FC = () => { const [data, setData] = useState(); + const [physicsSimulation, setPhysicsSimulation] = useState(true); const moduleDeps = useMemo(() => data && parseModuleDeps(data), [data]); @@ -36,8 +37,14 @@ const App: FC = () => { moduleDeps={moduleDeps} filters={filters} onSubmit={setFilters} + physicsSimulation={physicsSimulation} + setPhysicsSimulation={setPhysicsSimulation} + /> + - ); }; diff --git a/src/app/components/ControlPanel.tsx b/src/app/components/ControlPanel.tsx index 3aee315..f051417 100644 --- a/src/app/components/ControlPanel.tsx +++ b/src/app/components/ControlPanel.tsx @@ -16,9 +16,17 @@ type Props = { moduleDeps: ModuleDeps; filters: Filters; onSubmit?: (filters: Filters) => void; + physicsSimulation: boolean; + setPhysicsSimulation: (enable: boolean) => void; }; -const ControlPanel: FC = ({ moduleDeps, filters, onSubmit }) => { +const ControlPanel: FC = ({ + moduleDeps, + filters, + onSubmit, + physicsSimulation, + setPhysicsSimulation, +}) => { const modules = useMemo(() => getModules(moduleDeps), [moduleDeps]); const [targetModules, setTargetModules] = useState( @@ -81,6 +89,13 @@ const ControlPanel: FC = ({ moduleDeps, filters, onSubmit }) => { + diff --git a/src/app/components/DepGraph.tsx b/src/app/components/DepGraph.tsx index 258bf92..2e8ff2a 100644 --- a/src/app/components/DepGraph.tsx +++ b/src/app/components/DepGraph.tsx @@ -10,11 +10,12 @@ import { DepGraph, Filters, ModuleDeps } from '../utils/types'; type Props = { moduleDeps: ModuleDeps; filters: Filters; + physicsSimulation: boolean; }; type Stage = 'idle' | 'computing' | 'drawing'; -const DepGraph: FC = ({ moduleDeps, filters }) => { +const DepGraph: FC = ({ moduleDeps, filters, physicsSimulation }) => { const containerRef = useRef(null); const [graph, setGraph] = useState(); @@ -22,6 +23,7 @@ const DepGraph: FC = ({ moduleDeps, filters }) => { const [worker, setWorker] = useState(); const [stage, setStage] = useState('idle'); + const [network, setNetwork] = useState(); useEffect(() => { setStage('computing'); @@ -59,10 +61,11 @@ const DepGraph: FC = ({ moduleDeps, filters }) => { }), ); - const network = new Network( + const newNetwork = new Network( containerRef.current, { edges, nodes }, { + physics: { enabled: physicsSimulation }, nodes: { shape: 'image', shapeProperties: { @@ -85,12 +88,23 @@ const DepGraph: FC = ({ moduleDeps, filters }) => { }, ); - network.on('afterDrawing', () => { + newNetwork.on('afterDrawing', () => { setStage('idle'); }); + + setNetwork(newNetwork); } }, [containerRef.current, graph]); + useEffect(() => { + if (physicsSimulation) { + network?.startSimulation(); + } else { + network?.stopSimulation(); + } + network?.setOptions({ physics: { enabled: physicsSimulation } }); + }, [physicsSimulation, network]); + const handleTerminate = () => { if (worker != null) { worker.terminate();