feat: add color presets

Author: Oskar Widmark

src/App.css

@@ -8,7 +8,6 @@
 }
 
 .App-header {
-  background-color: #282c34;
   height: 100vh;
   color: white;
   display: flex;

src/App.tsx

@@ -9,6 +9,7 @@ import {
   Operator,
   SortType,
   AlgorithmOptions,
+  ColorPreset,
 } from './types';
 import { SortingAlgorithms } from './sorting-algorithms';
 import {
@@ -24,6 +25,10 @@ import {
   INIT_SWAP_TIME,
   INIT_COMPARE_TIME,
   DEFAULT_ALGORITHM_OPTIONS,
+  DEFAULT_COLUMN_COLOR,
+  DEFAULT_BACKGROUND_COLOR,
+  DEFAULT_HIGHLIGHT_COLOR,
+  RAINBOW_BACKGROUND_COLOR,
 } from './constants';
 import { SortAppBar } from './AppBar';
 import { CanvasController } from './canvas-controller';
@@ -55,6 +60,10 @@ class App extends React.Component<Props> {
     shouldHighlightComparisons: boolean;
     shouldPlaySound: boolean;
     algorithmOptions: AlgorithmOptions;
+    colorPreset: ColorPreset;
+    columnColor: string;
+    backgroundColor: string;
+    highlightColor: string;
   };
   canvasController: CanvasController;
 
@@ -84,6 +93,10 @@ class App extends React.Component<Props> {
       shouldHighlightComparisons: false,
       shouldPlaySound: false,
       algorithmOptions: DEFAULT_ALGORITHM_OPTIONS,
+      colorPreset: ColorPreset.Rainbow,
+      columnColor: DEFAULT_COLUMN_COLOR,
+      backgroundColor: DEFAULT_BACKGROUND_COLOR,
+      highlightColor: DEFAULT_HIGHLIGHT_COLOR,
     };
 
     this.resetPresets = {
@@ -97,6 +110,9 @@ class App extends React.Component<Props> {
     this.canvasController = new CanvasController(
       ref as React.RefObject<HTMLCanvasElement>,
       INIT_COLUMN_NUMBER,
+      this.state.colorPreset,
+      this.state.columnColor,
+      this.state.highlightColor,
     );
   }
 
@@ -326,9 +342,46 @@ class App extends React.Component<Props> {
     }));
   };
 
+  setColorPreset = (colorPreset: ColorPreset) => {
+    this.setState({ colorPreset });
+    this.canvasController.colorPreset = colorPreset;
+    this.stopSorting();
+    this.canvasController.redraw(this.arr);
+  };
+
+  setColumnColor = (columnColor: string) => {
+    this.setState({ columnColor });
+    this.canvasController.columnColor = columnColor;
+    this.stopSorting();
+    this.canvasController.redraw(this.arr);
+  };
+
+  setBackgroundColor = (backgroundColor: string) => {
+    this.setState({ backgroundColor });
+  };
+
+  setHighlightColor = (highlightColor: string) => {
+    this.setState({ highlightColor });
+    this.canvasController.highlightColor = highlightColor;
+    this.stopSorting();
+    this.canvasController.redraw(this.arr);
+  };
+
+  getBackgroundColor = () => {
+    switch (this.state.colorPreset) {
+      case ColorPreset.Rainbow:
+        return RAINBOW_BACKGROUND_COLOR;
+      case ColorPreset.Custom:
+        return this.state.backgroundColor;
+    }
+  };
+
   render() {
     return (
-      <div className="App">
+      <div
+        className="App"
+        style={{ backgroundColor: this.getBackgroundColor() }}
+      >
         <div className="App-header">
           <SortAppBar
             arr={this.arr}
@@ -373,6 +426,14 @@ class App extends React.Component<Props> {
             columnNbr={this.state.columnNbr}
             algorithmOptions={this.state.algorithmOptions}
             setAlgorithmOption={this.setAlgorithmOption}
+            colorPreset={this.state.colorPreset}
+            columnColor={this.state.columnColor}
+            backgroundColor={this.state.backgroundColor}
+            highlightColor={this.state.highlightColor}
+            setColorPreset={this.setColorPreset}
+            setColumnColor={this.setColumnColor}
+            setBackgroundColor={this.setBackgroundColor}
+            setHighlightColor={this.setHighlightColor}
           />
         </div>
       </div>

src/SideDrawer.tsx

@@ -7,8 +7,11 @@ import {
   MenuItem,
   Slider,
   SelectChangeEvent,
+  TextField,
+  Grid2,
+  Stack,
 } from '@mui/material';
-import { SortName, ResetPreset, AlgorithmOptions } from './types';
+import { SortName, ResetPreset, AlgorithmOptions, ColorPreset } from './types';
 import { timeScale } from './utils';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import {
@@ -36,6 +39,14 @@ interface SideDrawerProps {
     key: keyof AlgorithmOptions,
     value: AlgorithmOptions[typeof key],
   ) => void;
+  colorPreset: ColorPreset;
+  columnColor: string;
+  backgroundColor: string;
+  highlightColor: string;
+  setColorPreset: (string: ColorPreset) => void;
+  setColumnColor: (string: string) => void;
+  setBackgroundColor: (string: string) => void;
+  setHighlightColor: (string: string) => void;
 }
 
 export function SideDrawer({
@@ -51,6 +62,14 @@ export function SideDrawer({
   areSettingsOpen,
   algorithmOptions,
   setAlgorithmOption,
+  colorPreset,
+  columnColor,
+  backgroundColor,
+  highlightColor,
+  setColorPreset,
+  setColumnColor,
+  setBackgroundColor,
+  setHighlightColor,
 }: SideDrawerProps) {
   const isBitonicSort = chosenSortAlg === SortName.BitonicSort;
 
@@ -195,6 +214,67 @@ export function SideDrawer({
           </Select>
         </FormControl>
       </div>
+      <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>
     </Drawer>
   );
 }

src/canvas-controller.ts

@@ -1,6 +1,5 @@
 import { MouseEvent } from 'react';
-import { HIGHLIGHT_COLOR } from './constants';
-import { DrawData, SortValue } from './types';
+import { ColorPreset, DrawData, SortValue } from './types';
 import { hsvToRgbHex } from './utils';
 
 export class CanvasController {
@@ -14,6 +13,9 @@ export class CanvasController {
   constructor(
     public canvasRef: React.RefObject<HTMLCanvasElement>,
     public columnNbr: number,
+    public colorPreset: ColorPreset,
+    public columnColor: string,
+    public highlightColor: string,
   ) {}
 
   get refCurrent() {
@@ -41,6 +43,24 @@ export class CanvasController {
     return context;
   }
 
+  getColumnColor(value: number) {
+    switch (this.colorPreset) {
+      case ColorPreset.Custom:
+        return this.columnColor;
+      case ColorPreset.Rainbow:
+        return hsvToRgbHex((360 * value) / this.columnNbr, 1, 1);
+    }
+  }
+
+  getHighlightColor() {
+    switch (this.colorPreset) {
+      case ColorPreset.Custom:
+        return this.highlightColor;
+      case ColorPreset.Rainbow:
+        return '#FFFFFF';
+    }
+  }
+
   resizeCanvas = (arr: SortValue[]) => {
     const parent = document.getElementById('canvas-wrapper');
     if (parent === null) {
@@ -66,7 +86,7 @@ export class CanvasController {
     this.prevHighlightIndices = indices;
 
     for (const idx of indices) {
-      this.redrawColumn(arr, idx, HIGHLIGHT_COLOR);
+      this.redrawColumn(arr, idx, this.getHighlightColor());
     }
   };
 
@@ -167,14 +187,12 @@ export class CanvasController {
   };
 
   private drawColumn = (arr: SortValue[], i: number, color?: string) => {
-    const arrLength = arr.length;
     const width = this.canvas2dCtx.canvas.width / this.columnNbr;
     const height =
       (this.canvas2dCtx.canvas.height / this.columnNbr) * (arr[i].value + 1);
     const startX = width * i;
 
-    this.canvas2dCtx.fillStyle =
-      color || hsvToRgbHex((360 * arr[i].value) / arrLength, 1, 1);
+    this.canvas2dCtx.fillStyle = color || this.getColumnColor(arr[i].value);
     this.fillRect(startX, 0, width, height);
   };
 

src/constants.ts

@@ -3,8 +3,11 @@ import { AlgorithmOptions } from './types';
 export const INIT_SWAP_TIME = 1;
 export const INIT_COMPARE_TIME = 1;
 export const INIT_COLUMN_NUMBER = 100;
-export const HIGHLIGHT_COLOR = '#FFFFFF';
 export const POWERS_OF_TWO = [8, 16, 32, 64, 128, 256, 512, 1024];
+export const DEFAULT_COLUMN_COLOR = '#ffffff';
+export const DEFAULT_BACKGROUND_COLOR = '#000000';
+export const DEFAULT_HIGHLIGHT_COLOR = '#ff0000';
+export const RAINBOW_BACKGROUND_COLOR = '#282c34';
 export const DEFAULT_ALGORITHM_OPTIONS: AlgorithmOptions = {
   type: 'iterative',
   base: 4,

src/types.ts

@@ -46,3 +46,8 @@ export enum SortType {
   Comparison = 'Comparison',
   Distribution = 'Distribution',
 }
+
+export enum ColorPreset {
+  Rainbow = 'Rainbow',
+  Custom = 'Custom',
+}