Feature/#117 distribute button

Apps/frontend/cypress/e2e/3-control-panel-top/distribute-button.cy.js

@@ -0,0 +1,16 @@
+/// <reference types="cypress" />
+
+describe("distributeButton", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:5173/");
+  });
+
+  it("is visible", () => {
+    cy.get(".control-panel--top_general").should("be.visible");
+    cy.get('[data-cy="distribute-button"]').should("be.visible");
+  });
+
+  it("is clickable", () => {
+    cy.get('[data-cy="distribute-button"]').click();
+  });
+});

Apps/frontend/cypress/e2e/4-control-panel-bottom/start-stop-switch.cy.js

@@ -19,4 +19,10 @@ describe("startStopSwitch", () => {
         .should("have.attr", "aria-checked", "true");
     });
   });
+
+  it("has default off/false", () => {
+    cy.get('[data-cy="startStopSwitch-0"]')
+      .find('[role="switch"]')
+      .should("have.attr", "aria-checked", "false");
+  });
 });

Apps/frontend/src/app.scss

@@ -125,18 +125,19 @@ nav {
 
   &--waves {
     position: absolute;
+    margin-top: 0.1vw;
     inset: 0;
   }
 }
 
 .control-panel {
   &--top {
     &_general {
-      grid-column: 2;
+      grid-column: 2/6;
       grid-row: 1;
       display: flex;
       align-self: center;
-      justify-content: space-evenly;
+      justify-content: start;
     }
   }
 
@@ -264,4 +265,8 @@ nav {
   &--drop-down {
     background-image: url("./assets/mui_drop-down.svg");
   }
+
+  &--distribute {
+    background-image: url("./assets/mui_distribute.svg");
+  }
 }

Apps/frontend/src/components/DistributeOffsetButton.svelte

@@ -0,0 +1,24 @@
+<script>
+  import { NUM_CHANNELS } from "../const";
+  import { channelActivated, offsetAdjustment } from "../stores";
+
+  function calculateOffset() {
+    // offset is calculated based on the number of channels between -1 and 1
+    return 2 / ($channelActivated.filter(Boolean).length + 1);
+  }
+</script>
+
+<button
+  class="icon-button mui-icon--distribute"
+  on:click={() => {
+    let baseOffset = calculateOffset();
+    let offsetY = 1 - baseOffset;
+    for (let index = 0; index < NUM_CHANNELS; index++) {
+      if ($channelActivated[index]) {
+        $offsetAdjustment[index] = offsetY;
+        offsetY -= baseOffset;
+      }
+    }
+  }}
+  data-cy="distribute-button"
+/>

Apps/frontend/src/components/Slider.svelte

@@ -1,9 +1,4 @@
 <script>
-  export let onInput = (value) => {
-    console.error(`Missing implementation of Slider.onInput(${value})!`);
-    return value;
-  };
-
   export let value = 1;
   export let min = 0;
   export let max = 10;
@@ -12,18 +7,12 @@
   export let dataCy = undefined;
   export let className = undefined;
   export let calculateDisplayedValue = undefined;
+
+  export let onInput = () => {};
 </script>
 
 <div class={className} data-cy={dataCy}>
-  <input
-    {id}
-    type="range"
-    on:input={() => onInput(value)}
-    bind:value
-    {min}
-    {max}
-    {step}
-  />
+  <input {id} type="range" bind:value on:input={onInput} {min} {max} {step} />
   {#if calculateDisplayedValue !== undefined}
     <span>{calculateDisplayedValue(value)}</span>
   {/if}

Apps/frontend/src/components/StartStopSwitch.svelte

@@ -0,0 +1,17 @@
+<script>
+  import Switch from "svelte-toggle";
+  import { LINE_COLORS_RGBA } from "../const.js";
+  import { channelActivated } from "../stores.js";
+  export let channel;
+
+  let color = LINE_COLORS_RGBA[channel];
+</script>
+
+<div class="control-panel--bottom_switch" data-cy="startStopSwitch-{channel}">
+  <Switch
+    hideLabel
+    small
+    bind:toggled={$channelActivated[channel]}
+    toggledColor={color}
+  />
+</div>

Apps/frontend/src/components/ThicknessSwitch.svelte

@@ -1,11 +1,7 @@
 <script>
   import Switch from "svelte-toggle";
   import { LINE_COLORS_RGBA } from "../const.js";
-  import { channelConfig } from "../stores.js";
-
-  export let onClick = (event) => {
-    console.error(`Missing implementation for thickness)!`);
-  };
+  import { thicknessAdjustment } from "../stores.js";
 
   export let channel;
 </script>
@@ -14,10 +10,7 @@
   <Switch
     hideLabel
     small
-    bind:toggled={$channelConfig[channel].thickness}
-    on:click={() => {
-      onClick();
-    }}
+    bind:toggled={$thicknessAdjustment[channel]}
     toggledColor={LINE_COLORS_RGBA[channel]}
   />
 </div>