From 0532a429ecb7450e163c46c502c05f0ce2b77ecf Mon Sep 17 00:00:00 2001
From: Ross Hill <ross@rosshill.ca>
Date: Fri, 30 Aug 2024 20:32:18 -0400
Subject: [PATCH] Collapse sidebar sections Add tests Enable sourcemaps

---
 client/css/styles.scss     | 104 ++++++++----
 client/html/index.html     | 331 ++++++++++++++++++++-----------------
 client/tsconfig.json       |   3 +-
 client/webpack.config.js   |  27 ++-
 mandelbrot/src/lib_test.rs | 105 ++++++++++++
 5 files changed, 382 insertions(+), 188 deletions(-)

diff --git a/client/css/styles.scss b/client/css/styles.scss
index ae8a3d92..f718f67c 100644
--- a/client/css/styles.scss
+++ b/client/css/styles.scss
@@ -81,22 +81,16 @@ html {
 #inputsWrapper {
   max-height: calc(100% - 52px);
   overflow-y: auto;
-
   top: 0;
   right: 0;
   display: flex;
+  padding-top: 0;
   flex-direction: column;
-  gap: 14px;
 
   .shortcutHint {
     text-decoration: underline;
   }
 
-  .inputSeparator {
-    height: 1px;
-    border-bottom: 1px solid #777;
-  }
-
   .checkboxWrapper {
     display: flex;
     align-items: center;
@@ -121,6 +115,43 @@ html {
     margin-right: 80px;
     transform: translateX(100%);
   }
+
+  details {
+    border-top: 1px solid #777;
+
+    &:first-child {
+      border-top: none;
+    }
+
+    summary {
+      cursor: pointer;
+      font-weight: bold;
+      padding: 16px 0;
+      user-select: none;
+
+      &:hover {
+        color: #ccc;
+      }
+
+      > span,
+      > label {
+        padding-left: 4px;
+      }
+
+      > label {
+        pointer-events: none;
+      }
+    }
+
+    .details-content {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      padding-bottom: 16px;
+      padding-left: 8px;
+      padding-right: 4px;
+    }
+  }
 }
 
 datalist {
@@ -132,7 +163,7 @@ datalist {
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
-  gap: 6px;
+  gap: 8px;
 
   > * {
     display: block;
@@ -176,6 +207,8 @@ datalist {
   justify-content: space-between;
   padding-left: 8px;
   padding-right: 8px;
+  padding-top: 12px;
+  border-top: 1px solid #777;
 
   > button {
     background: none;
@@ -184,25 +217,20 @@ datalist {
     height: 32px;
     width: 32px;
     font-size: 20px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
 
     &:hover {
       color: #ccc;
     }
 
-    &#hide-controls {
-      display: inline-block;
-    }
-
     &#show-controls {
       display: none;
     }
   }
 }
 
-.colorSchemeLabel {
-  font-weight: bold;
-}
-
 button.underlineButton {
   background: none;
   border: none;
@@ -216,6 +244,10 @@ button.underlineButton {
   right: 8px;
   z-index: 2000;
   display: inline-block;
+
+  .github-button {
+    display: none;
+  }
 }
 
 #save-image-modal {
@@ -291,6 +323,16 @@ input {
   .mobileHidden {
     display: none !important;
   }
+
+  #inputsWrapper {
+    padding-top: 12px;
+    padding-bottom: 0;
+
+    details {
+      border-top: none;
+    }
+  }
+
   .overlay {
     &,
     * {
@@ -320,27 +362,31 @@ input {
 
 @media (min-width: 801px) {
   body.hideOverlays {
-    #inputsWrapper > *:not(.buttonWrapper) {
-      display: none !important;
-    }
-
     .overlay {
       min-width: unset;
     }
 
-    .buttonWrapper {
-      padding: 0;
-
-      > *:not(#show-controls) {
+    #inputsWrapper {
+      > *:not(.buttonWrapper) {
         display: none !important;
       }
 
-      #hide-controls {
-        display: none;
-      }
+      .buttonWrapper {
+        padding: 0;
+        border-top: none;
+        padding-top: 8px;
 
-      #show-controls {
-        display: inline-block;
+        > button:not(#show-controls) {
+          display: none !important;
+        }
+
+        > button#hide-controls {
+          display: none !important;
+        }
+
+        > button#show-controls {
+          display: inline-flex;
+        }
       }
     }
 
diff --git a/client/html/index.html b/client/html/index.html
index 8e2fb42b..8b833ebd 100644
--- a/client/html/index.html
+++ b/client/html/index.html
@@ -103,161 +103,182 @@ <h1 class="navHeading">
       </div>
     </div>
     <div id="inputsWrapper" class="overlay">
-      <strong class="mobileHidden">Shortcuts</strong>
-      <div class="shortcutWrapper mobileHidden">
-        <code>shift + drag</code>
-        <span>Zoom in</span>
-      </div>
-      <div class="shortcutWrapper mobileHidden">
-        <code class="windowsShortcut">alt + click</code
-        ><code class="macShortcut">option + click</code>
-        <div>Center a point</div>
-      </div>
-      <div class="inputSeparator mobileHidden"></div>
-      <strong class="mobileHidden">Render settings</strong>
-      <div class="inputWrapper alignStart">
-        <label for="iterations" class="labelWithSubtitle">
-          <span>Iterations</span>
-          <span class="secondary">(Detail level)</span>
-        </label>
-        <input type="number" required id="iterations" name="iterations" />
-      </div>
-      <div class="iterationButtons">
-        <button type="button" id="iterations-mul-2" class="underlineButton">
-          &times;2
-        </button>
-        <button type="button" id="iterations-div-2" class="underlineButton">
-          &divide;2
-        </button>
-      </div>
-      <div class="inputWrapper mobileHidden">
-        <label for="exponent">Exponent</label>
-        <input type="number" required id="exponent" name="exponent" />
-      </div>
-      <div class="checkboxWrapper mobileHidden">
-        <input type="checkbox" id="highDpiTiles" name="highDpiTiles" />
-        <label for="highDpiTiles"
-          >High resolution <span class="secondary">(Slow)</span></label
-        >
-      </div>
-      <div class="inputSeparator mobileHidden"></div>
-      <label class="colorSchemeLabel mobileHidden" for="colorScheme">
-        Color scheme
-      </label>
-      <div class="inputWrapper mobileHidden">
-        <select id="colorScheme" name="colorScheme" required class="fullWidth">
-          <optgroup label="Sequential (Multi-Hue)">
-            <option value="cividis">Cividis</option>
-            <option value="cool">Cool</option>
-            <option value="cubehelix">Cubehelix</option>
-            <option value="inferno">Inferno</option>
-            <option value="magma">Magma</option>
-            <option value="plasma">Plasma</option>
-            <option value="turbo">Turbo</option>
-            <option value="viridis">Viridis</option>
-            <option value="warm">Warm</option>
-            <option value="yellowGreenBlue">Blue Green Yellow</option>
-            <option value="greenBlue">Blue Green</option>
-            <option value="purpleBlueGreen">Green Blue Purple</option>
-            <option value="yellowGreen">Green Yellow</option>
-            <option value="redPurple">Purple Red</option>
-            <option value="yellowOrangeRed">Red Orange Yellow</option>
-            <option value="orangeRed">Red Orange</option>
-            <option value="purpleRed">Red Purple</option>
-          </optgroup>
-          <optgroup label="Sequential (Single-Hue)">
-            <option value="blues">Blues</option>
-            <option value="greens">Greens</option>
-            <option value="greys">Greys</option>
-            <option value="oranges">Oranges</option>
-            <option value="purples">Purples</option>
-            <option value="reds">Reds</option>
-          </optgroup>
-          <optgroup label="Diverging">
-            <option value="spectral">Spectral</option>
-            <option value="brownGreen">Brown Green</option>
-            <option value="pinkGreen">Green Pink</option>
-            <option value="purpleGreen">Purple Green</option>
-            <option value="purpleOrange">Purple Orange</option>
-            <option value="redBlue">Red Blue</option>
-            <option value="redGrey">Red Grey</option>
-            <option value="redYellowBlue">Red Yellow Blue</option>
-            <option value="redYellowGreen">Red Yellow Green</option>
-          </optgroup>
-          <optgroup label="Cyclical">
-            <option value="rainbow">Rainbow</option>
-            <option value="sinebow">Sinebow</option>
-          </optgroup>
-        </select>
-      </div>
-      <div class="checkboxWrapper mobileHidden">
-        <input type="checkbox" id="reverseColors" name="reverseColors" />
-        <label for="reverseColors">Reverse colors</label>
-      </div>
-      <div class="inputSeparator mobileHidden"></div>
-      <strong class="mobileHidden">Adjust colors</strong>
-      <datalist id="defaultSliderPosition">
-        <option value="0"></option>
-      </datalist>
-      <div class="inputWrapper mobileHidden">
-        <label for="shiftHueAmount">Hue</label>
-        <input
-          type="range"
-          id="shiftHueAmount"
-          name="shiftHueAmount"
-          min="-180"
-          max="180"
-          list="defaultSliderPosition"
-        />
-      </div>
-      <div class="inputWrapper mobileHidden">
-        <label for="saturateAmount">Saturation</label>
-        <input
-          type="range"
-          id="saturateAmount"
-          name="saturateAmount"
-          min="-1"
-          max="1"
-          step="0.01"
-          list="defaultSliderPosition"
-        />
-      </div>
-      <div class="inputWrapper mobileHidden">
-        <label for="lightenAmount">Lightness</label>
-        <input
-          type="range"
-          id="lightenAmount"
-          name="lightenAmount"
-          min="-1"
-          max="1"
-          step="0.01"
-          list="defaultSliderPosition"
-        />
-      </div>
-      <div class="inputWrapper mobileHidden">
-        <label for="colorSpace">Color space</label>
-        <select id="colorSpace" name="colorSpace" required>
-          <option value="0">HSL</option>
-          <option value="1">HSLuv</option>
-          <option value="2">LCh</option>
-          <option value="3">Okhsl</option>
-        </select>
-      </div>
-      <div class="inputSeparator mobileHidden"></div>
-      <strong class="mobileHidden">Coordinates</strong>
-      <div class="inputWrapper mobileHidden">
-        <label for="re">Real</label>
-        <input type="number" required id="re" name="re" />
-      </div>
-      <div class="inputWrapper mobileHidden">
-        <label for="im">Imaginary</label>
-        <input type="number" required id="im" name="im" />
-      </div>
-      <div class="inputWrapper mobileHidden">
-        <label for="zoom">Zoom</label>
-        <input type="number" required id="zoom" name="zoom" />
-      </div>
-      <div class="inputSeparator mobileHidden"></div>
+      <details open class="mobileHidden">
+        <summary><span>Shortcuts</span></summary>
+        <div class="details-content">
+          <div class="shortcutWrapper">
+            <code>shift + drag</code>
+            <span>Zoom in</span>
+          </div>
+          <div class="shortcutWrapper">
+            <code class="windowsShortcut">alt + click</code
+            ><code class="macShortcut">option + click</code>
+            <div>Center a point</div>
+          </div>
+        </div>
+      </details>
+      <details open>
+        <summary class="mobileHidden"><span>Render settings</span></summary>
+        <div class="details-content">
+          <div class="inputWrapper alignStart">
+            <label for="iterations" class="labelWithSubtitle">
+              <span>Iterations</span>
+              <span class="secondary">(Detail level)</span>
+            </label>
+            <input type="number" required id="iterations" name="iterations" />
+          </div>
+          <div class="iterationButtons">
+            <button type="button" id="iterations-mul-2" class="underlineButton">
+              &times;2
+            </button>
+            <button type="button" id="iterations-div-2" class="underlineButton">
+              &divide;2
+            </button>
+          </div>
+          <div class="inputWrapper mobileHidden">
+            <label for="exponent">Exponent</label>
+            <input type="number" required id="exponent" name="exponent" />
+          </div>
+          <div class="checkboxWrapper mobileHidden">
+            <input type="checkbox" id="highDpiTiles" name="highDpiTiles" />
+            <label for="highDpiTiles"
+              >High resolution <span class="secondary">(Slow)</span></label
+            >
+          </div>
+        </div>
+      </details>
+      <details class="mobileHidden">
+        <summary>
+          <label for="colorScheme">Color scheme</label>
+        </summary>
+        <div class="details-content">
+          <div class="inputWrapper">
+            <select
+              id="colorScheme"
+              name="colorScheme"
+              required
+              class="fullWidth"
+            >
+              <optgroup label="Sequential (Multi-Hue)">
+                <option value="cividis">Cividis</option>
+                <option value="cool">Cool</option>
+                <option value="cubehelix">Cubehelix</option>
+                <option value="inferno">Inferno</option>
+                <option value="magma">Magma</option>
+                <option value="plasma">Plasma</option>
+                <option value="turbo">Turbo</option>
+                <option value="viridis">Viridis</option>
+                <option value="warm">Warm</option>
+                <option value="yellowGreenBlue">Blue Green Yellow</option>
+                <option value="greenBlue">Blue Green</option>
+                <option value="purpleBlueGreen">Green Blue Purple</option>
+                <option value="yellowGreen">Green Yellow</option>
+                <option value="redPurple">Purple Red</option>
+                <option value="yellowOrangeRed">Red Orange Yellow</option>
+                <option value="orangeRed">Red Orange</option>
+                <option value="purpleRed">Red Purple</option>
+              </optgroup>
+              <optgroup label="Cyclical">
+                <option value="rainbow">Rainbow</option>
+                <option value="sinebow">Sinebow</option>
+              </optgroup>
+              <optgroup label="Diverging">
+                <option value="spectral">Spectral</option>
+                <option value="brownGreen">Brown Green</option>
+                <option value="pinkGreen">Green Pink</option>
+                <option value="purpleGreen">Purple Green</option>
+                <option value="purpleOrange">Purple Orange</option>
+                <option value="redBlue">Red Blue</option>
+                <option value="redGrey">Red Grey</option>
+                <option value="redYellowBlue">Red Yellow Blue</option>
+                <option value="redYellowGreen">Red Yellow Green</option>
+              </optgroup>
+              <optgroup label="Sequential (Single-Hue)">
+                <option value="blues">Blues</option>
+                <option value="greens">Greens</option>
+                <option value="greys">Greys</option>
+                <option value="oranges">Oranges</option>
+                <option value="purples">Purples</option>
+                <option value="reds">Reds</option>
+              </optgroup>
+            </select>
+          </div>
+          <div class="checkboxWrapper">
+            <input type="checkbox" id="reverseColors" name="reverseColors" />
+            <label for="reverseColors">Reverse colors</label>
+          </div>
+        </div>
+      </details>
+      <details class="mobileHidden">
+        <summary><span>Adjust colors</span></summary>
+        <div class="details-content">
+          <datalist id="defaultSliderPosition">
+            <option value="0"></option>
+          </datalist>
+          <div class="inputWrapper">
+            <label for="shiftHueAmount">Hue</label>
+            <input
+              type="range"
+              id="shiftHueAmount"
+              name="shiftHueAmount"
+              min="-180"
+              max="180"
+              list="defaultSliderPosition"
+            />
+          </div>
+          <div class="inputWrapper">
+            <label for="saturateAmount">Saturation</label>
+            <input
+              type="range"
+              id="saturateAmount"
+              name="saturateAmount"
+              min="-1"
+              max="1"
+              step="0.01"
+              list="defaultSliderPosition"
+            />
+          </div>
+          <div class="inputWrapper">
+            <label for="lightenAmount">Lightness</label>
+            <input
+              type="range"
+              id="lightenAmount"
+              name="lightenAmount"
+              min="-1"
+              max="1"
+              step="0.01"
+              list="defaultSliderPosition"
+            />
+          </div>
+          <div class="inputWrapper">
+            <label for="colorSpace">Color space</label>
+            <select id="colorSpace" name="colorSpace" required>
+              <option value="0">HSL</option>
+              <option value="1">HSLuv</option>
+              <option value="2">LCh</option>
+              <option value="3">Okhsl</option>
+            </select>
+          </div>
+        </div>
+      </details>
+      <details class="mobileHidden">
+        <summary><span>Coordinates</span></summary>
+        <div class="details-content">
+          <div class="inputWrapper">
+            <label for="re">Real</label>
+            <input type="number" required id="re" name="re" />
+          </div>
+          <div class="inputWrapper">
+            <label for="im">Imaginary</label>
+            <input type="number" required id="im" name="im" />
+          </div>
+          <div class="inputWrapper">
+            <label for="zoom">Zoom</label>
+            <input type="number" required id="zoom" name="zoom" />
+          </div>
+        </div>
+      </details>
+
       <div class="buttonWrapper mobileHidden">
         <button id="save-image" title="Save image" type="button">
           <svg
diff --git a/client/tsconfig.json b/client/tsconfig.json
index b4169dc2..fb74e82a 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -7,6 +7,7 @@
     "allowJs": true,
     "moduleResolution": "node",
     "allowSyntheticDefaultImports": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "sourceMap": true
   }
 }
diff --git a/client/webpack.config.js b/client/webpack.config.js
index e6b4c7e0..d0838f14 100644
--- a/client/webpack.config.js
+++ b/client/webpack.config.js
@@ -69,7 +69,17 @@ const appConfig = {
     rules: [
       {
         test: /\.ts$/,
-        use: "ts-loader",
+        use: [
+          {
+            loader: "ts-loader",
+            options: {
+              transpileOnly: true,
+              compilerOptions: {
+                sourceMap: true,
+              },
+            },
+          },
+        ],
         exclude: /node_modules/,
       },
       {
@@ -98,6 +108,7 @@ const appConfig = {
   },
   output: { path: dist, filename: "app.js" },
   experiments: { syncWebAssembly: true },
+  devtool: "source-map",
 };
 
 const workerConfig = {
@@ -112,7 +123,17 @@ const workerConfig = {
     rules: [
       {
         test: /\.ts$/,
-        use: "ts-loader",
+        use: [
+          {
+            loader: "ts-loader",
+            options: {
+              transpileOnly: true,
+              compilerOptions: {
+                sourceMap: true,
+              },
+            },
+          },
+        ],
         exclude: /node_modules/,
       },
       {
@@ -132,8 +153,8 @@ const workerConfig = {
     extensions: [".ts", ".js", ".wasm"],
   },
   output: { path: dist, filename: "worker.js" },
-  //[DDR 2020-11-20] asyncWebAssembly is broken by webpack 5. (See https://github.com/rustwasm/wasm-bindgen/issues/2343)
   experiments: { syncWebAssembly: true },
+  devtool: "source-map",
 };
 
 module.exports = [appConfig, workerConfig];
diff --git a/mandelbrot/src/lib_test.rs b/mandelbrot/src/lib_test.rs
index 731f3542..59ad841b 100644
--- a/mandelbrot/src/lib_test.rs
+++ b/mandelbrot/src/lib_test.rs
@@ -242,4 +242,109 @@ mod lib_test {
             }
         }
     }
+
+    #[test]
+    fn test_transform_color() {
+        let original_color = colorous::Color {
+            r: 128,
+            g: 64,
+            b: 32,
+        };
+
+        // Test HSL color space
+        let transformed_hsl =
+            super::transform_color(original_color, &super::ValidColorSpace::Hsl, 90.0, 0.2, 0.1);
+        assert_eq!(transformed_hsl.r, 53);
+        assert_eq!(transformed_hsl.g, 163);
+        assert_eq!(transformed_hsl.b, 31);
+
+        // Test HSLUV color space
+        let transformed_hsluv = super::transform_color(
+            original_color,
+            &super::ValidColorSpace::Hsluv,
+            90.0,
+            0.2,
+            0.1,
+        );
+        assert_eq!(transformed_hsluv.r, 64);
+        assert_eq!(transformed_hsluv.g, 108);
+        assert_eq!(transformed_hsluv.b, 33);
+
+        // Test LCH color space
+        let transformed_lch =
+            super::transform_color(original_color, &super::ValidColorSpace::Lch, 90.0, 0.2, 0.1);
+        assert_eq!(transformed_lch.r, 1);
+        assert_eq!(transformed_lch.g, 113);
+        assert_eq!(transformed_lch.b, 32);
+
+        // Test OKHSL color space
+        let transformed_okhsl = super::transform_color(
+            original_color,
+            &super::ValidColorSpace::Okhsl,
+            90.0,
+            0.2,
+            0.1,
+        );
+        assert_eq!(transformed_okhsl.r, 71);
+        assert_eq!(transformed_okhsl.g, 113);
+        assert_eq!(transformed_okhsl.b, 47);
+    }
+
+    #[test]
+    fn test_transform_color_no_change() {
+        let original_color = colorous::Color {
+            r: 128,
+            g: 64,
+            b: 32,
+        };
+
+        let transformed =
+            super::transform_color(original_color, &super::ValidColorSpace::Hsl, 0.0, 0.0, 0.0);
+
+        assert_eq!(transformed.r, original_color.r);
+        assert_eq!(transformed.g, original_color.g);
+        assert_eq!(transformed.b, original_color.b);
+    }
+
+    #[test]
+    fn test_transform_color_extreme_values() {
+        let original_color = colorous::Color {
+            r: 128,
+            g: 64,
+            b: 32,
+        };
+
+        let transformed = super::transform_color(
+            original_color,
+            &super::ValidColorSpace::Hsl,
+            360.0,
+            1.0,
+            1.0,
+        );
+
+        assert_eq!(transformed.r, 255);
+        assert_eq!(transformed.g, 255);
+        assert_eq!(transformed.b, 255);
+    }
+
+    #[test]
+    fn test_transform_color_negative_values() {
+        let original_color = colorous::Color {
+            r: 128,
+            g: 64,
+            b: 32,
+        };
+
+        let transformed = super::transform_color(
+            original_color,
+            &super::ValidColorSpace::Hsl,
+            -90.0,
+            -0.2,
+            -0.1,
+        );
+
+        assert_eq!(transformed.r, 95);
+        assert_eq!(transformed.g, 37);
+        assert_eq!(transformed.b, 106);
+    }
 }