feat: gap size for elements

Author: Oskar Widmark

src/App.css

@@ -17,7 +17,7 @@
 
 .drawer > div > * {
     border-bottom: rgb(69, 69, 69) solid 4px;
-    padding: 8px;
+    padding: 8px 12px;
 
 }
 

src/App.tsx

@@ -326,7 +326,7 @@ class App extends React.Component<Props> {
     if (this.state.settings.columnNbr === columnNbr) return;
 
     this.sortingAlgorithms.columnNbr = columnNbr;
-    this.canvasController.columnNbr = columnNbr;
+    this.canvasController.context.columnNbr = columnNbr;
     this.setSettings({ columnNbr }, () => this.resetAndDraw());
   };
 
@@ -375,10 +375,8 @@ class App extends React.Component<Props> {
     this.setSettings({ ...settings });
     this.stopSorting();
     entries(settings).forEach(([key, value]) => {
-      if (key !== 'backgroundColor') {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.canvasController[key] = value as any;
-      }
+      // Probably problems with type intersections, but ok
+      this.canvasController.context[key] = value as never;
     });
 
     this.canvasController.redrawAll(this.arr);

src/ColorTab.tsx

@@ -7,6 +7,7 @@ import {
 } from './types';
 import { TitledSelect } from './components/TitledSelect';
 import { ColorField } from './components/ColorField';
+import { TitledSlider } from './components/TitledSlider';
 
 export function ColorTab(props: {
   settings: ColorSettings;
@@ -90,6 +91,15 @@ export function ColorTab(props: {
         }
         options={Object.values(DisplayType)}
       />
+      <TitledSlider
+        title="Gap size"
+        value={props.settings.gapSize}
+        min={0}
+        max={10}
+        step={1}
+        marks
+        onChange={(_, value) => setColorSettings({ gapSize: value as number })}
+      />
     </>
   );
 }

src/canvas-controller.ts

@@ -1,5 +1,6 @@
 import {
   ColorPreset,
+  ColorSettings,
   DisplayType,
   DrawData,
   SortValue,
@@ -16,16 +17,10 @@ export class CanvasController {
   _canvas2dCtx: CanvasRenderingContext2D | null = null;
 
   constructor(
-    private context: {
+    public context: {
       canvasRef: React.RefObject<HTMLCanvasElement>;
       columnNbr: number;
-      colorPreset: ColorPreset;
-      columnColor1: string;
-      columnColor2: string;
-      highlightColor: string;
-      visualizationType: VisualizationType;
-      displayType: DisplayType;
-    },
+    } & ColorSettings,
   ) {}
 
   get canvasRef() {
@@ -61,34 +56,6 @@ export class CanvasController {
     return window.devicePixelRatio || 1;
   }
 
-  set columnNbr(value: number) {
-    this.context.columnNbr = value;
-  }
-
-  set colorPreset(value: string) {
-    this.context.colorPreset = value as ColorPreset;
-  }
-
-  set columnColor1(value: string) {
-    this.context.columnColor1 = value;
-  }
-
-  set columnColor2(value: string) {
-    this.context.columnColor2 = value;
-  }
-
-  set highlightColor(value: string) {
-    this.context.highlightColor = value;
-  }
-
-  set visualizationType(value: string) {
-    this.context.visualizationType = value as VisualizationType;
-  }
-
-  set displayType(value: string) {
-    this.context.displayType = value as DisplayType;
-  }
-
   get height() {
     switch (this.context.displayType) {
       case DisplayType.Full:
@@ -417,10 +384,10 @@ export class CanvasController {
     height: number,
   ) => {
     this.canvas2dCtx.fillRect(
-      this.snap(startX),
-      this.snap(this.height - startY - height),
-      this.snap(width),
-      this.snap(height),
+      this.snap(startX + this.context.gapSize),
+      this.snap(this.height - startY - height + this.context.gapSize),
+      this.snap(width - this.context.gapSize),
+      this.snap(height - this.context.gapSize),
     );
   };
 

src/constants.ts

@@ -43,6 +43,7 @@ export const INIT_SETTINGS: Settings = {
   highlightColor: '#ff0000',
   visualizationType: VisualizationType.Bars,
   displayType: DisplayType.Full,
+  gapSize: 0,
   soundVolume: DEFAULT_SOUND_VOLUME,
   soundType: DEFAULT_SOUND_TYPE,
   frequencyRange: [200, 640],

src/types.ts

@@ -98,6 +98,7 @@ export type ColorSettings = {
   backgroundColor: string;
   visualizationType: VisualizationType;
   displayType: DisplayType;
+  gapSize: number;
 };
 
 export type SoundSettings = {