feat: highlight color based on action type

Author: Oskar Widmark

TODO.md

@@ -5,7 +5,7 @@ Features:
 - [ ] Merge sort
 - [x] 2D color matrix visualization
 - [ ] Spiral visualization
-- [ ] Highlight color based on action type
+- [x] Highlight color based on action type
 - [ ] Mobile browser support
 
 Fixes:

src/App.tsx

@@ -210,7 +210,7 @@ class App extends React.Component<Props> {
       this.setState((prevState: AppState) => ({
         nbrOfSwaps: prevState.nbrOfSwaps + 1,
       }));
-      this.canvasController.highlight(arr, [i1, i2], drawIteration);
+      this.canvasController.highlight(arr, [i1, i2], 'swap', drawIteration);
       await sleep(this.state.settings.swapTime, this.swapCounter++);
     }
   };
@@ -268,7 +268,12 @@ class App extends React.Component<Props> {
         nbrOfComparisons: prevState.nbrOfComparisons + 1,
       }));
       const indexes = 'value' in params ? [i1] : [i1, params.i2];
-      this.canvasController.highlight(arr, indexes, drawIteration);
+      this.canvasController.highlight(
+        arr,
+        indexes,
+        'comparison',
+        drawIteration,
+      );
       await sleep(this.state.settings.compareTime, this.comparisonCounter++);
     }
 
@@ -313,7 +318,7 @@ class App extends React.Component<Props> {
       this.setState((prevState: AppState) => ({
         nbrOfAuxWrites: prevState.nbrOfAuxWrites + 1,
       }));
-      this.canvasController.highlight(arr, [i], drawIteration);
+      this.canvasController.highlight(arr, [i], 'auxWrite', drawIteration);
       await sleep(this.state.settings.auxWriteTime, this.auxWriteCounter++);
     }
   };

src/ColorTab.tsx

@@ -8,6 +8,7 @@ import {
 import { TitledSelect } from './components/TitledSelect';
 import { ColorField } from './components/ColorField';
 import { TitledSlider } from './components/TitledSlider';
+import { HIGHLIGHT_TYPES } from './constants';
 
 export function ColorTab(props: {
   settings: ColorSettings;
@@ -18,7 +19,7 @@ export function ColorTab(props: {
       colorPreset,
       columnColor1,
       columnColor2,
-      highlightColor,
+      highlightColors,
       backgroundColor,
       visualizationType,
       displayType,
@@ -64,13 +65,17 @@ export function ColorTab(props: {
                   setColorSettings({ backgroundColor: value })
                 }
               />
-              <ColorField
-                label="Highlight"
-                color={highlightColor}
-                setColor={(value) =>
-                  setColorSettings({ highlightColor: value })
-                }
-              />
+              {HIGHLIGHT_TYPES.map((type) => (
+                <ColorField
+                  label={`Highlight (${type[0].toUpperCase()})`}
+                  color={highlightColors[type]}
+                  setColor={(value) =>
+                    setColorSettings({
+                      highlightColors: { ...highlightColors, [type]: value },
+                    })
+                  }
+                />
+              ))}
             </Grid2>
           )}
         </Stack>

src/canvas-controller.ts

@@ -5,6 +5,7 @@ import {
   DrawData,
   SortValue,
   VisualizationType,
+  HighlightType,
 } from './types';
 import { hsvToRgbHex, rgbHexToHsv } from './utils';
 
@@ -139,11 +140,11 @@ export class CanvasController {
     }
   }
 
-  getHighlightColor() {
+  getHighlightColor(type: HighlightType) {
     switch (this.context.colorPreset) {
       case ColorPreset.Custom:
       case ColorPreset.CustomGradient:
-        return this.context.highlightColor;
+        return this.context.highlightColors[type];
       case ColorPreset.Rainbow:
         return '#FFFFFF';
     }
@@ -173,7 +174,12 @@ export class CanvasController {
     this.drawAll(arr);
   };
 
-  highlight = (arr: SortValue[], indices: number[], drawIteration?: number) => {
+  highlight = (
+    arr: SortValue[],
+    indices: number[],
+    type: HighlightType = 'comparison',
+    drawIteration?: number,
+  ) => {
     if (drawIteration == null || drawIteration !== this.currentDrawIteration) {
       if (this.highlightIndices.length) {
         for (const idx of this.highlightIndices) {
@@ -192,11 +198,11 @@ export class CanvasController {
 
     for (const idx of indices) {
       if (this.context.visualizationType === VisualizationType.Matrix) {
-        this.redrawCellRow(arr, idx, this.getHighlightColor());
-        this.redrawCellColumn(arr, idx, this.getHighlightColor());
+        this.redrawCellRow(arr, idx, this.getHighlightColor(type));
+        this.redrawCellColumn(arr, idx, this.getHighlightColor(type));
         continue;
       }
-      this.redrawColumn(arr, idx, this.getHighlightColor());
+      this.redrawColumn(arr, idx, this.getHighlightColor(type));
     }
   };
 
@@ -278,7 +284,7 @@ export class CanvasController {
   };
 
   private removeHighlight = (arr: SortValue[]) => {
-    this.highlight(arr, [], -1);
+    this.highlight(arr, []);
   };
 
   private redrawColumn = (arr: SortValue[], i: number, color?: string) => {

src/constants.ts

@@ -6,6 +6,7 @@ import {
   Settings,
   SortName,
   VisualizationType,
+  HighlightType,
 } from './types';
 
 export const RAINBOW_BACKGROUND_COLOR = '#282c34';
@@ -41,7 +42,11 @@ export const INIT_SETTINGS: Settings = {
   columnColor1: '#ffffff',
   columnColor2: '#ffffff',
   backgroundColor: '#000000',
-  highlightColor: '#ff0000',
+  highlightColors: {
+    comparison: '#ff0000',
+    swap: '#00ff00',
+    auxWrite: '#ffff00',
+  },
   visualizationType: VisualizationType.Bars,
   displayType: DisplayType.Full,
   gapSize: 0,
@@ -52,3 +57,9 @@ export const INIT_SETTINGS: Settings = {
   playSoundOnComparison: true,
   playSoundOnAuxWrite: false,
 };
+
+export const HIGHLIGHT_TYPES: HighlightType[] = [
+  'swap',
+  'comparison',
+  'auxWrite',
+];

src/types.ts

@@ -95,13 +95,19 @@ export type ColorSettings = {
   colorPreset: ColorPreset;
   columnColor1: string;
   columnColor2: string;
-  highlightColor: string;
+  highlightColors: HighlightColors;
   backgroundColor: string;
   visualizationType: VisualizationType;
   displayType: DisplayType;
   gapSize: number;
 };
 
+export type HighlightType = 'comparison' | 'swap' | 'auxWrite';
+
+type HighlightColors = {
+  [key in HighlightType]: string;
+};
+
 export type SoundSettings = {
   soundType: NonCustomOscillatorType;
   soundVolume: number;