refactor: move components out of SideDrawer

Author: Oskar Widmark

src/App.tsx

@@ -27,6 +27,12 @@ import {
 } from './constants';
 import { SortAppBar } from './AppBar';
 import { CanvasController } from './canvas-controller';
+import { Colors } from './Colors';
+import { ColumnSlider } from './ColumnSlider';
+import { Options } from './Options';
+import { ResetPresetSelect } from './ResetPresetSelect';
+import { SortingAlgorithmSelect } from './SortingAlgorithmSelect';
+import { TimeSlider } from './TimeSlider';
 
 type Props = {
   playSound: () => void;
@@ -431,28 +437,48 @@ class App extends React.Component<Props> {
           </div>
           <SideDrawer
             areSettingsOpen={this.state.areSettingsOpen}
-            resetPreset={this.state.settings.resetPreset}
-            chosenSortAlg={this.state.settings.chosenSortAlg}
             toggleDisplaySettings={this.toggleDisplaySettings}
-            chooseSortAlg={this.chooseSortAlg}
-            chooseResetPreset={this.chooseResetPreset}
-            changeColumnNbr={this.changeColumnNbr}
-            changeSwapTime={this.changeSwapTime}
-            changeCompareTime={this.changeCompareTime}
-            columnNbr={this.state.settings.columnNbr}
-            swapTime={this.state.settings.swapTime}
-            compareTime={this.state.settings.compareTime}
-            algorithmOptions={this.state.settings.algorithmOptions}
-            setAlgorithmOption={this.setAlgorithmOption}
-            colorPreset={this.state.settings.colorPreset}
-            columnColor={this.state.settings.columnColor}
-            backgroundColor={this.state.settings.backgroundColor}
-            highlightColor={this.state.settings.highlightColor}
-            setColorPreset={this.setColorPreset}
-            setColumnColor={this.setColumnColor}
-            setBackgroundColor={this.setBackgroundColor}
-            setHighlightColor={this.setHighlightColor}
-          />
+          >
+            <SortingAlgorithmSelect
+              chosenSortAlg={this.state.settings.chosenSortAlg}
+              chooseSortAlg={this.chooseSortAlg}
+            />
+            <Options
+              chosenSortAlg={this.state.settings.chosenSortAlg}
+              algorithmOptions={this.state.settings.algorithmOptions}
+              setAlgorithmOption={this.setAlgorithmOption}
+            />
+            <ColumnSlider
+              columnNbr={this.state.settings.columnNbr}
+              chosenSortAlg={this.state.settings.chosenSortAlg}
+              algorithmOptions={this.state.settings.algorithmOptions}
+              changeColumnNbr={this.changeColumnNbr}
+            />
+            <TimeSlider
+              title="Time per swap (ms)"
+              time={this.state.settings.swapTime}
+              changeTime={this.changeSwapTime}
+            />
+            <TimeSlider
+              title="Time per comparison (ms)"
+              time={this.state.settings.compareTime}
+              changeTime={this.changeCompareTime}
+            />
+            <ResetPresetSelect
+              resetPreset={this.state.settings.resetPreset}
+              chooseResetPreset={this.chooseResetPreset}
+            />
+            <Colors
+              colorPreset={this.state.settings.colorPreset}
+              columnColor={this.state.settings.columnColor}
+              backgroundColor={this.state.settings.backgroundColor}
+              highlightColor={this.state.settings.highlightColor}
+              setColorPreset={this.setColorPreset}
+              setColumnColor={this.setColumnColor}
+              setBackgroundColor={this.setBackgroundColor}
+              setHighlightColor={this.setHighlightColor}
+            />
+          </SideDrawer>
         </div>
       </div>
     );

src/Colors.tsx

@@ -0,0 +1,91 @@
+import {
+  FormControl,
+  Typography,
+  Stack,
+  TextField,
+  MenuItem,
+  Grid2,
+} from '@mui/material';
+import { ColorPreset } from './types';
+
+export function Colors(props: {
+  colorPreset: ColorPreset;
+  setColorPreset: (string: ColorPreset) => void;
+  columnColor: string;
+  setColumnColor: (string: string) => void;
+  backgroundColor: string;
+  setBackgroundColor: (string: string) => void;
+  highlightColor: string;
+  setHighlightColor: (string: string) => void;
+}) {
+  const {
+    colorPreset,
+    setColorPreset,
+    columnColor,
+    setColumnColor,
+    backgroundColor,
+    setBackgroundColor,
+    highlightColor,
+    setHighlightColor,
+  } = props;
+
+  return (
+    <div className="select-wrapper">
+      <FormControl component="fieldset">
+        <Typography
+          align="left"
+          variant="h6"
+          color="textSecondary"
+          gutterBottom
+        >
+          Colors
+        </Typography>
+        <Stack direction="column" spacing={2} alignItems="left">
+          <TextField
+            value={colorPreset}
+            label="Preset"
+            size="small"
+            select
+            onChange={(e) => setColorPreset(e.target.value as ColorPreset)}
+          >
+            {Object.values(ColorPreset).map((v) => (
+              <MenuItem value={v} key={v}>
+                <Typography align="left" variant="body1" color="textSecondary">
+                  {v}
+                </Typography>
+              </MenuItem>
+            ))}
+          </TextField>
+          {colorPreset === ColorPreset.Custom && (
+            <Grid2 container spacing={2}>
+              <TextField
+                label="Columns"
+                value={columnColor}
+                type="color"
+                size="small"
+                sx={{ width: 100 }}
+                onChange={(e) => setColumnColor(e.target.value)}
+              />
+              <TextField
+                label="Background"
+                value={backgroundColor}
+                type="color"
+                size="small"
+                sx={{ width: 100 }}
+                onChange={(e) => setBackgroundColor(e.target.value)}
+              />
+              <TextField
+                label="Highlight"
+                value={highlightColor}
+                type="color"
+                size="small"
+                sx={{ width: 100 }}
+                onChange={(e) => setHighlightColor(e.target.value)}
+              />
+            </Grid2>
+          )}
+        </Stack>
+      </FormControl>
+    </div>
+  );
+}

src/ColumnSlider.tsx

@@ -0,0 +1,51 @@
+import { Typography, Slider } from '@mui/material';
+import { POWERS_OF_TWO } from './constants';
+import { useEffect } from 'react';
+import { AlgorithmOptions, SortName } from './types';
+
+export function ColumnSlider(props: {
+  columnNbr: number;
+  chosenSortAlg: SortName;
+  algorithmOptions: AlgorithmOptions;
+  changeColumnNbr: (_: unknown, value: number | number[]) => void;
+}) {
+  const { columnNbr, chosenSortAlg, algorithmOptions, changeColumnNbr } = props;
+
+  // Bitonic Sort and recursive Odd-even mergesort requires a power of two
+  const requiresPowerOfTwoColumns =
+    chosenSortAlg === SortName.BitonicSort ||
+    (chosenSortAlg === SortName.OddEvenMergesort &&
+      algorithmOptions.type === 'recursive');
+
+  useEffect(() => {
+    if (requiresPowerOfTwoColumns) {
+      changeColumnNbr(undefined, 2 ** Math.floor(Math.log2(columnNbr)));
+    }
+  }, [requiresPowerOfTwoColumns, changeColumnNbr, columnNbr]);
+
+  return (
+    <div>
+      <Typography align="left" variant="h6" color="textSecondary" gutterBottom>
+        # Columns
+      </Typography>
+      <div className="col-slider">
+        <Slider
+          defaultValue={columnNbr}
+          aria-labelledby="discrete-slider"
+          valueLabelDisplay="auto"
+          min={8}
+          max={1024}
+          step={requiresPowerOfTwoColumns ? null : 1}
+          marks={
+            requiresPowerOfTwoColumns
+              ? POWERS_OF_TWO.map((value) => ({
+                  value,
+                }))
+              : false
+          }
+          onChangeCommitted={changeColumnNbr}
+        />
+      </div>
+    </div>
+  );
+}

src/ResetPresetSelect.tsx

@@ -0,0 +1,43 @@
+import {
+  SelectChangeEvent,
+  FormControl,
+  Typography,
+  Select,
+  MenuItem,
+} from '@mui/material';
+import { ResetPreset } from './types';
+
+export function ResetPresetSelect(props: {
+  resetPreset: ResetPreset;
+  chooseResetPreset: (event: SelectChangeEvent<ResetPreset>) => void;
+}) {
+  const { resetPreset, chooseResetPreset } = props;
+  return (
+    <div className="select-wrapper">
+      <FormControl component="fieldset">
+        <Typography
+          align="left"
+          variant="h6"
+          color="textSecondary"
+          gutterBottom
+        >
+          Reset Preset
+        </Typography>
+        <Select
+          defaultValue={resetPreset}
+          value={resetPreset}
+          onChange={chooseResetPreset}
+          size="small"
+        >
+          {Object.values(ResetPreset).map((v) => (
+            <MenuItem value={v} key={v}>
+              <Typography align="left" variant="body1" color="textSecondary">
+                {v}
+              </Typography>
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </div>
+  );
+}