106 lines
2.8 KiB
JavaScript
106 lines
2.8 KiB
JavaScript
import React, {
|
|
useRef,
|
|
useEffect,
|
|
useCallback,
|
|
useState,
|
|
useMemo
|
|
} from "react";
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import {
|
|
AlgorithmModals,
|
|
IntroductionModal,
|
|
Layout,
|
|
MapPlot,
|
|
Menu,
|
|
SEO,
|
|
ThemeToggle,
|
|
Navbar
|
|
} from "../components";
|
|
import { useSolverWorker, useAlgorithmInfo } from "../hooks";
|
|
import * as selectors from "../store/selectors";
|
|
import * as actions from "../store/actions";
|
|
|
|
|
|
const IndexPage = () => {
|
|
const mapRef = useRef(null);
|
|
const dispatch = useDispatch();
|
|
|
|
const algorithm = useSelector(selectors.selectAlgorithm);
|
|
const algorithmInfo = useAlgorithmInfo();
|
|
const delay = useSelector(selectors.selectDelay);
|
|
const evaluatingDetailLevel = useSelector(
|
|
selectors.selectEvaluatingDetailLevel
|
|
);
|
|
const points = useSelector(selectors.selectPoints);
|
|
const pointCount = useSelector(selectors.selectPointCount);
|
|
const definingPoints = useSelector(selectors.selectDefiningPoints);
|
|
|
|
const solver = useSolverWorker(dispatch, algorithm);
|
|
|
|
const onRandomizePoints = useCallback(() => {
|
|
if (!definingPoints) {
|
|
const bounds = mapRef.current.getBounds();
|
|
dispatch(actions.randomizePoints(bounds, pointCount));
|
|
}
|
|
}, [mapRef, dispatch, pointCount, definingPoints]);
|
|
|
|
const start = useCallback(() => {
|
|
dispatch(actions.startSolving(points, delay, evaluatingDetailLevel));
|
|
solver.postMessage(
|
|
actions.startSolvingAction(points, delay, evaluatingDetailLevel)
|
|
);
|
|
}, [solver, dispatch, delay, points, evaluatingDetailLevel]);
|
|
|
|
const fullSpeed = useCallback(() => {
|
|
dispatch(actions.goFullSpeed());
|
|
solver.postMessage(actions.goFullSpeed());
|
|
}, [solver, dispatch]);
|
|
|
|
const pause = useCallback(() => {
|
|
dispatch(actions.pause());
|
|
solver.postMessage(actions.pause());
|
|
}, [solver, dispatch]);
|
|
|
|
const unpause = useCallback(() => {
|
|
dispatch(actions.unpause());
|
|
solver.postMessage(actions.unpause());
|
|
}, [solver, dispatch]);
|
|
|
|
const stop = useCallback(() => {
|
|
dispatch(actions.stopSolving());
|
|
solver.terminate();
|
|
}, [solver, dispatch]);
|
|
|
|
useEffect(() => {
|
|
solver.postMessage(actions.setDelay(delay));
|
|
}, [delay, solver]);
|
|
|
|
useEffect(() => {
|
|
solver.postMessage(actions.setEvaluatingDetailLevel(evaluatingDetailLevel));
|
|
}, [evaluatingDetailLevel, solver]);
|
|
|
|
const algTitle = useMemo(() => {
|
|
const alg = algorithmInfo.find(alg => alg.solverKey === algorithm);
|
|
return alg.friendlyName;
|
|
}, [algorithm, algorithmInfo]);
|
|
|
|
return (
|
|
<Layout>
|
|
<SEO subtitle={algTitle} />
|
|
<IntroductionModal />
|
|
<AlgorithmModals />
|
|
<Navbar />
|
|
<Menu
|
|
onStart={start}
|
|
onPause={pause}
|
|
onUnPause={unpause}
|
|
onFullSpeed={fullSpeed}
|
|
onStop={stop}
|
|
onRandomizePoints={onRandomizePoints}
|
|
/>
|
|
<MapPlot ref={mapRef}></MapPlot>
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
export default IndexPage;
|