From 1c794a49c5f8357870dca923b3784836668a0a67 Mon Sep 17 00:00:00 2001
From: Thomas Weber <weber_t@mailbox.org>
Date: Fri, 24 Sep 2021 20:23:11 -0500
Subject: [PATCH 1/5] fancy new color pickers

---
 src/locales/en.json           |  14 +++
 src/p4/ColorPicker.svelte     | 191 +++++++++++++++++++++++++++++++++-
 src/p4/ColorSlider.svelte     |  62 +++++++++++
 src/p4/PackagerOptions.svelte |  26 ++---
 src/p4/color-utils.js         |  68 ++++++++++++
 test/p4/color-utils.test.js   |  27 +++++
 6 files changed, 375 insertions(+), 13 deletions(-)
 create mode 100644 src/p4/ColorSlider.svelte
 create mode 100644 src/p4/color-utils.js
 create mode 100644 test/p4/color-utils.test.js

diff --git a/src/locales/en.json b/src/locales/en.json
index aa115244..107bdcc1 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -437,6 +437,20 @@
       "context": "Prompt to confirm user wants to reset settings"
     }
   },
+  "color": {
+    "color": {
+      "string": "Color",
+      "context": "Refers to the hue of a color"
+    },
+    "saturation": {
+      "string": "Saturation",
+      "context": "Refers to the saturation of a color"
+    },
+    "brightness": {
+      "string": "Brightness",
+      "context": "Refers to the brightness of a color"
+    }
+  },
   "preview": {
     "loading": {
       "string": "Loading Preview"
diff --git a/src/p4/ColorPicker.svelte b/src/p4/ColorPicker.svelte
index 76ec07bd..1b8ffdf0 100644
--- a/src/p4/ColorPicker.svelte
+++ b/src/p4/ColorPicker.svelte
@@ -1,5 +1,194 @@
 <script>
+  import ColorSlider from './ColorSlider.svelte';
+  import {hexToRGb, rgbToHex, rgbToHsv, hsvToRgb} from './color-utils';
+  import {_} from '../locales';
+
   export let value;
+  export let defaultColor;
+
+  let editorElement;
+  let valueAsHsv;
+  let open = false;
+
+  const handleOpen = () => {
+    open = !open;
+  };
+  const checkClickedOutside = (e) => {
+    if (open && editorElement && !editorElement.contains(e.target)) {
+      open = false;
+    }
+  };
+
+  const setHsv = (hsv) => {
+    const rgb = hsvToRgb(...hsv);
+    const hex = rgbToHex(...rgb);
+    value = hex;
+    valueAsHsv = hsv;
+  };
+  const setHex = (hex) => {
+    const valueAsRgb = hexToRGb(hex);
+    value = hex;
+    valueAsHsv = rgbToHsv(...valueAsRgb);
+  };
+  setHex(value);
+
+  const hsvChangeFactory = (index) => (e) => {
+    const newColor = [...valueAsHsv];
+    newColor[index] = e.detail;
+    setHsv(newColor);
+  };
+  const generateHueSteps = (hsv) => {
+    const result = [];
+    for (let i = 0; i < 1; i += 0.1) {
+      result.push(rgbToHex(...hsvToRgb(i, hsv[1], hsv[2])));
+    }
+    return result;
+  };
+  const generateSaturationSteps = (hsv) => {
+    const result = [];
+    for (let i = 0; i < 1; i += 0.1) {
+      result.push(rgbToHex(...hsvToRgb(hsv[0], i, hsv[2])));
+    }
+    return result;
+  };
+  const generateBrightnessSteps = (hsv) => {
+    const result = [];
+    for (let i = 0; i < 1; i += 0.1) {
+      result.push(rgbToHex(...hsvToRgb(hsv[0], hsv[1], i)));
+    }
+    return result;
+  };
+
+  const handleSetHex = (e) => {
+    setHex(e.target.value);
+  };
+  const reset = () => {
+    setHex(defaultColor);
+  };
 </script>
 
-<input type="color" bind:value />
+<style>
+  .container {
+    position: relative;
+    margin-right: 4px;
+  }
+  .button, .editor {
+    border: 1px solid rgb(160, 160, 160);
+  }
+  .button {
+    background-color: #eee;
+    width: 40px;
+    height: 2em;
+    border-radius: 2px;
+    margin: 0;
+    padding: 3px;
+    box-sizing: border-box;
+  }
+  .button:hover {
+    background-color: #ddd;
+  }
+  .button:active {
+    background-color: #ccc;
+  }
+  .color-preview {
+    width: 100%;
+    height: 100%;
+  }
+  .editor {
+    background: white;
+    position: absolute;
+    z-index: 10;
+    top: 100%;
+    border-radius: 4px;
+    padding: 8px;
+    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5);
+  }
+  .slider-section {
+    margin-bottom: 12px;
+  }
+  .label {
+    display: flex;
+    font-weight: bold;
+  }
+  .value {
+    font-weight: normal;
+    margin-left: 12px;
+  }
+  .bottom-section {
+    display: flex;
+    align-items: center;
+  }
+  .hex-text {
+    width: 60px;
+  }
+  .reset-button {
+    margin-left: 8px;
+  }
+
+  :global([theme="dark"]) .button,
+  :global([theme="dark"]) .editor {
+    background-color: #333;
+    border-color: #888;
+  }
+  :global([theme="dark"]) .button:hover {
+    background-color: #444;
+  }
+  :global([theme="dark"]) .button:active {
+    background-color: #555;
+  }
+</style>
+
+<svelte:body on:mousedown={checkClickedOutside} />
+
+<div class="container" bind:this={editorElement}>
+  <button class="button" on:click={handleOpen}>
+    <div class="color-preview" style={`background-color: ${value}`}></div>
+  </button>
+  {#if open}
+    <div class="editor">
+      <div class="slider-section">
+        <div class="label">
+          {$_('color.color')}
+          <div class="value">{Math.round(valueAsHsv[0] * 100)}</div>
+        </div>
+        <div class="slider">
+          <ColorSlider
+            value={valueAsHsv[0]}
+            steps={generateHueSteps(valueAsHsv)}
+            on:change={hsvChangeFactory(0)}
+          />
+        </div>
+      </div>
+      <div class="slider-section">
+        <div class="label">
+          {$_('color.saturation')}
+          <div class="value">{Math.round(valueAsHsv[1] * 100)}</div>
+        </div>
+        <div class="slider">
+          <ColorSlider
+            value={valueAsHsv[1]}
+            steps={generateSaturationSteps(valueAsHsv)}
+            on:change={hsvChangeFactory(1)}
+          />
+        </div>
+      </div>
+      <div class="slider-section">
+        <div class="label">
+          {$_('color.brightness')}
+          <div class="value">{Math.round(valueAsHsv[2] * 100)}</div>
+        </div>
+        <div class="slider">
+          <ColorSlider
+            value={valueAsHsv[2]}
+            steps={generateBrightnessSteps(valueAsHsv)}
+            on:change={hsvChangeFactory(2)}
+          />
+        </div>
+      </div>
+      <div class="bottom-section">
+        <input class="hex-text" type="text" value={value} on:input={handleSetHex} />
+        <button class="reset-button" on:click={reset}>{$_('reset.reset')}</button>
+      </div>
+    </div>
+  {/if}
+</div>
diff --git a/src/p4/ColorSlider.svelte b/src/p4/ColorSlider.svelte
new file mode 100644
index 00000000..090fcc32
--- /dev/null
+++ b/src/p4/ColorSlider.svelte
@@ -0,0 +1,62 @@
+<script>
+  import {createEventDispatcher} from 'svelte';
+
+  export let value = 0;
+  export let steps = [];
+
+  const dispatch = createEventDispatcher();
+
+  let rect;
+  let element;
+  let isMoving = false;
+
+  $: background = `linear-gradient(to right, ${steps.join(',')})`;
+
+  const setMousePosition = (clientX) => {
+    const unclamped = (clientX - rect.left - 10) / rect.width;
+    value = Math.max(0, Math.min(1, unclamped));
+    dispatch('change', value);
+  };
+  const onMouseMove = (e) => {
+    if (!isMoving) return;
+    setMousePosition(e.clientX);
+  };
+  const onMouseDown = (e) => {
+    rect = element.getBoundingClientRect();
+    isMoving = true;
+    setMousePosition(e.clientX);
+  };
+  const onMouseUp = (e) => {
+    if (!isMoving) return;
+    isMoving = false;
+  }
+</script>
+
+<style>
+  .slider {
+    position: relative;
+    width: 150px;
+    height: 25px;
+    border-radius: 12px;
+    cursor: pointer;
+  }
+  .knob {
+    position: absolute;
+    width: 25px;
+    height: 25px;
+    border-radius: 100%;
+    background: white;
+    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.3);
+  }
+</style>
+
+<svelte:body on:mousemove={onMouseMove} on:mouseup={onMouseUp} />
+
+<div
+  class="slider"
+  on:mousedown|preventDefault={onMouseDown}
+  bind:this={element}
+  style={`background: ${background}`}
+>
+  <div class="knob" style={`left: ${value * 100}%; transform: translateX(-50%);`}></div>
+</div>
diff --git a/src/p4/PackagerOptions.svelte b/src/p4/PackagerOptions.svelte
index 0e112b07..2c2509f4 100644
--- a/src/p4/PackagerOptions.svelte
+++ b/src/p4/PackagerOptions.svelte
@@ -175,6 +175,11 @@
   .group {
     margin: 12px 0;
   }
+  .color {
+    display: flex;
+    align-items: center;
+    margin-bottom: 4px;
+  }
   p {
     margin: 8px 0;
   }
@@ -403,21 +408,18 @@
     <p>{$_('options.controlsHelp')}</p>
 
     <h3>{$_('options.colors')}</h3>
-    <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label class="option">
-      <ColorPicker bind:value={$options.appearance.background} />
+    <div class="option color">
+      <ColorPicker bind:value={$options.appearance.background} defaultColor={defaultOptions.appearance.background} />
       {$_('options.backgroundColor')}
-    </label>
-    <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label class="option">
-      <ColorPicker bind:value={$options.appearance.foreground} />
+    </div>
+    <div class="option color">
+      <ColorPicker bind:value={$options.appearance.foreground} defaultColor={defaultOptions.appearance.foreground} />
       {$_('options.foregroundColor')}
-    </label>
-    <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label class="option">
-      <ColorPicker bind:value={$options.appearance.accent} />
+    </div>
+    <div class="option color">
+      <ColorPicker bind:value={$options.appearance.accent} defaultColor={defaultOptions.appearance.accent} />
       {$_('options.accentColor')}
-    </label>
+    </div>
 
     <h3>{$_('options.monitors')}</h3>
     <label class="option">
diff --git a/src/p4/color-utils.js b/src/p4/color-utils.js
new file mode 100644
index 00000000..efdca348
--- /dev/null
+++ b/src/p4/color-utils.js
@@ -0,0 +1,68 @@
+// For all color operations:
+//  - The R, G, B channels of RGB[A] are in [0-255]
+//  - The H, S, V channels of HSV[A] are in [0-1]
+//  - The A channel is always in [0-1]
+
+export const hexToRGb = (hex) => {
+  hex = hex.trim();
+  if (hex.startsWith('#')) {
+    hex = hex.substr(1);
+  }
+  if (hex.length === 3) {
+    hex = hex.split('').map(i => i + i).join('');
+  }
+  const parsed = parseInt(hex, 16);
+  return [
+    (parsed >> 16) & 0xff,
+    (parsed >> 8) & 0xff,
+    parsed & 0xff
+  ];
+};
+
+export const rgbToHex = (r, g, b) => {
+  return '#' + Math.round(r).toString(16).padStart(2, '0') + Math.round(b).toString(16).padStart(2, '0') + Math.round(g).toString(16).padStart(2, '0');
+};
+
+export const rgbToHsv = (r, g, b) => {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  var max = Math.max(r, g, b), min = Math.min(r, g, b);
+  var h, s, v = max;
+  var d = max - min;
+  s = max == 0 ? 0 : d / max;
+  if (max == min) {
+    h = 0;
+    if (min === 0 || min === 1) {
+      // Saturation does not matter in the case of pure white or black
+      // In these cases we'll set saturation 1 to provide a better editing experience
+      s = 1;
+    }
+  } else {
+    switch (max) {
+      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+      case g: h = (b - r) / d + 2; break;
+      case b: h = (r - g) / d + 4; break;
+    }
+    h /= 6;
+  }
+  return [h, s, v];
+};
+
+export const hsvToRgb = (h, s, v) => {
+  var r, g, b;
+  var i = Math.floor(h * 6);
+  var f = h * 6 - i;
+  var p = v * (1 - s);
+  var q = v * (1 - f * s);
+  var t = v * (1 - (1 - f) * s);
+  switch (i % 6) {
+    case 0: r = v, g = t, b = p; break;
+    case 1: r = q, g = v, b = p; break;
+    case 2: r = p, g = v, b = t; break;
+    case 3: r = p, g = q, b = v; break;
+    case 4: r = t, g = p, b = v; break;
+    case 5: r = v, g = p, b = q; break;
+  }
+  return [r * 255, g * 255, b * 255];
+};
diff --git a/test/p4/color-utils.test.js b/test/p4/color-utils.test.js
new file mode 100644
index 00000000..6749657b
--- /dev/null
+++ b/test/p4/color-utils.test.js
@@ -0,0 +1,27 @@
+import {hexToRGb, rgbToHex, rgbToHsv, hsvToRgb} from '../../src/p4/color-utils';
+
+test('hexToRGb', () => {
+  expect(hexToRGb('#000000')).toEqual([0, 0, 0]);
+  expect(hexToRGb('#fffFFf')).toEqual([255, 255, 255]);
+  expect(hexToRGb('#abcdef')).toEqual([0xab, 0xcd, 0xef]);
+  expect(hexToRGb('abcdef')).toEqual([0xab, 0xcd, 0xef]);
+  expect(hexToRGb(' abcdef ')).toEqual([0xab, 0xcd, 0xef]);
+  expect(hexToRGb('#fff')).toEqual([255, 255, 255]);
+  expect(hexToRGb('abc')).toEqual([0xaa, 0xbb, 0xcc]);
+});
+
+test('rgbToHex', () => {
+  expect(rgbToHex(0, 0, 0)).toEqual('#000000');
+  expect(rgbToHex(255, 255, 255)).toEqual('#ffffff');
+  expect(rgbToHex(255, 0, 0)).toEqual('#ff0000');
+});
+
+test('rgbToHsv', () => {
+  expect(rgbToHsv(0, 0, 0)[0]).toEqual(0);
+  expect(rgbToHsv(0, 0, 0)[2]).toEqual(0);
+  expect(rgbToHsv(255, 0, 0)).toEqual([0, 1, 1]);
+});
+
+test('hsvToRgb', () => {
+  expect(hsvToRgb(0, 0, 0)).toEqual([0, 0, 0]);
+});

From 73f9b2cd3d3661d03d68051d516408ce58f279e3 Mon Sep 17 00:00:00 2001
From: Thomas Weber <weber_t@mailbox.org>
Date: Fri, 24 Sep 2021 20:52:57 -0500
Subject: [PATCH 2/5] Fix typo

---
 src/p4/ColorPicker.svelte   |  4 ++--
 src/p4/color-utils.js       |  2 +-
 test/p4/color-utils.test.js | 18 +++++++++---------
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/p4/ColorPicker.svelte b/src/p4/ColorPicker.svelte
index 1b8ffdf0..dcc18969 100644
--- a/src/p4/ColorPicker.svelte
+++ b/src/p4/ColorPicker.svelte
@@ -1,6 +1,6 @@
 <script>
   import ColorSlider from './ColorSlider.svelte';
-  import {hexToRGb, rgbToHex, rgbToHsv, hsvToRgb} from './color-utils';
+  import {hexToRgb, rgbToHex, rgbToHsv, hsvToRgb} from './color-utils';
   import {_} from '../locales';
 
   export let value;
@@ -26,7 +26,7 @@
     valueAsHsv = hsv;
   };
   const setHex = (hex) => {
-    const valueAsRgb = hexToRGb(hex);
+    const valueAsRgb = hexToRgb(hex);
     value = hex;
     valueAsHsv = rgbToHsv(...valueAsRgb);
   };
diff --git a/src/p4/color-utils.js b/src/p4/color-utils.js
index efdca348..8f11cd2c 100644
--- a/src/p4/color-utils.js
+++ b/src/p4/color-utils.js
@@ -3,7 +3,7 @@
 //  - The H, S, V channels of HSV[A] are in [0-1]
 //  - The A channel is always in [0-1]
 
-export const hexToRGb = (hex) => {
+export const hexToRgb = (hex) => {
   hex = hex.trim();
   if (hex.startsWith('#')) {
     hex = hex.substr(1);
diff --git a/test/p4/color-utils.test.js b/test/p4/color-utils.test.js
index 6749657b..e6dcc216 100644
--- a/test/p4/color-utils.test.js
+++ b/test/p4/color-utils.test.js
@@ -1,13 +1,13 @@
-import {hexToRGb, rgbToHex, rgbToHsv, hsvToRgb} from '../../src/p4/color-utils';
+import {hexToRgb, rgbToHex, rgbToHsv, hsvToRgb} from '../../src/p4/color-utils';
 
-test('hexToRGb', () => {
-  expect(hexToRGb('#000000')).toEqual([0, 0, 0]);
-  expect(hexToRGb('#fffFFf')).toEqual([255, 255, 255]);
-  expect(hexToRGb('#abcdef')).toEqual([0xab, 0xcd, 0xef]);
-  expect(hexToRGb('abcdef')).toEqual([0xab, 0xcd, 0xef]);
-  expect(hexToRGb(' abcdef ')).toEqual([0xab, 0xcd, 0xef]);
-  expect(hexToRGb('#fff')).toEqual([255, 255, 255]);
-  expect(hexToRGb('abc')).toEqual([0xaa, 0xbb, 0xcc]);
+test('hexToRgb', () => {
+  expect(hexToRgb('#000000')).toEqual([0, 0, 0]);
+  expect(hexToRgb('#fffFFf')).toEqual([255, 255, 255]);
+  expect(hexToRgb('#abcdef')).toEqual([0xab, 0xcd, 0xef]);
+  expect(hexToRgb('abcdef')).toEqual([0xab, 0xcd, 0xef]);
+  expect(hexToRgb(' abcdef ')).toEqual([0xab, 0xcd, 0xef]);
+  expect(hexToRgb('#fff')).toEqual([255, 255, 255]);
+  expect(hexToRgb('abc')).toEqual([0xaa, 0xbb, 0xcc]);
 });
 
 test('rgbToHex', () => {

From 88b79497e7cf062bef88965d3955de9eb70ca14b Mon Sep 17 00:00:00 2001
From: Thomas Weber <weber_t@mailbox.org>
Date: Fri, 24 Sep 2021 20:56:16 -0500
Subject: [PATCH 3/5] Fix color conversion bugs

---
 src/p4/color-utils.js       |  7 +++----
 test/p4/color-utils.test.js | 26 ++++++++++++++++++++++++++
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/p4/color-utils.js b/src/p4/color-utils.js
index 8f11cd2c..12c7454c 100644
--- a/src/p4/color-utils.js
+++ b/src/p4/color-utils.js
@@ -20,7 +20,7 @@ export const hexToRgb = (hex) => {
 };
 
 export const rgbToHex = (r, g, b) => {
-  return '#' + Math.round(r).toString(16).padStart(2, '0') + Math.round(b).toString(16).padStart(2, '0') + Math.round(g).toString(16).padStart(2, '0');
+  return '#' + Math.round(r).toString(16).padStart(2, '0') + Math.round(g).toString(16).padStart(2, '0') + Math.round(b).toString(16).padStart(2, '0');
 };
 
 export const rgbToHsv = (r, g, b) => {
@@ -33,9 +33,8 @@ export const rgbToHsv = (r, g, b) => {
   s = max == 0 ? 0 : d / max;
   if (max == min) {
     h = 0;
-    if (min === 0 || min === 1) {
-      // Saturation does not matter in the case of pure white or black
-      // In these cases we'll set saturation 1 to provide a better editing experience
+    if (min === 0) {
+      // Saturation does not matter in the case of pure black, so just set it to 1 instead so the editor makes more sense
       s = 1;
     }
   } else {
diff --git a/test/p4/color-utils.test.js b/test/p4/color-utils.test.js
index e6dcc216..faaa4c30 100644
--- a/test/p4/color-utils.test.js
+++ b/test/p4/color-utils.test.js
@@ -14,14 +14,40 @@ test('rgbToHex', () => {
   expect(rgbToHex(0, 0, 0)).toEqual('#000000');
   expect(rgbToHex(255, 255, 255)).toEqual('#ffffff');
   expect(rgbToHex(255, 0, 0)).toEqual('#ff0000');
+  expect(rgbToHex(0, 255, 0)).toEqual('#00ff00');
+  expect(rgbToHex(0, 0, 255)).toEqual('#0000ff');
+  expect(rgbToHex(0xab, 0xcd, 0x12)).toEqual('#abcd12');
+  expect(rgbToHex(1, 2, 255)).toEqual('#0102ff');
 });
 
 test('rgbToHsv', () => {
   expect(rgbToHsv(0, 0, 0)[0]).toEqual(0);
+  // (saturation does not matter in pure black)
   expect(rgbToHsv(0, 0, 0)[2]).toEqual(0);
+  expect(rgbToHsv(255, 255, 255)).toEqual([0, 0, 1]);
   expect(rgbToHsv(255, 0, 0)).toEqual([0, 1, 1]);
 });
 
 test('hsvToRgb', () => {
   expect(hsvToRgb(0, 0, 0)).toEqual([0, 0, 0]);
 });
+
+test('round-trip accuracy', () => {
+  for (const color of [
+    '#4c5aff',
+    '5a4cff',
+    '000000',
+    'ffffff',
+    'abcdef',
+    '123456',
+    '002348',
+    'acbd38'
+  ]) {
+    const rgb = hexToRgb(color);
+    const hsv = rgbToHsv(...rgb);
+    const rgb2 = hsvToRgb(...hsv);
+    expect(Math.abs(rgb2[0] - rgb[0])).toBeLessThan(0.0001);
+    expect(Math.abs(rgb2[1] - rgb[1])).toBeLessThan(0.0001);
+    expect(Math.abs(rgb2[2] - rgb[2])).toBeLessThan(0.0001);
+  }
+});

From 5806428e9c55cb41d073c5a88800fcff67c41015 Mon Sep 17 00:00:00 2001
From: Thomas Weber <muffin@muffin.ink>
Date: Wed, 15 Dec 2021 16:54:56 -0600
Subject: [PATCH 4/5] Move color logic to separate folder

---
 src/p4/PackagerOptions.svelte          | 2 +-
 src/p4/{ => colors}/ColorPicker.svelte | 2 +-
 src/p4/{ => colors}/ColorSlider.svelte | 0
 src/p4/{ => colors}/color-utils.js     | 0
 4 files changed, 2 insertions(+), 2 deletions(-)
 rename src/p4/{ => colors}/ColorPicker.svelte (99%)
 rename src/p4/{ => colors}/ColorSlider.svelte (100%)
 rename src/p4/{ => colors}/color-utils.js (100%)

diff --git a/src/p4/PackagerOptions.svelte b/src/p4/PackagerOptions.svelte
index 2c2509f4..0d586af2 100644
--- a/src/p4/PackagerOptions.svelte
+++ b/src/p4/PackagerOptions.svelte
@@ -7,7 +7,7 @@
   import ImageInput from './ImageInput.svelte';
   import CustomExtensions from '../p4/CustomExtensions.svelte';
   import LearnMore from './LearnMore.svelte';
-  import ColorPicker from './ColorPicker.svelte';
+  import ColorPicker from './colors/ColorPicker.svelte';
   import writablePersistentStore from './persistent-store';
   import fileStore from './file-store';
   import {progress, currentTask} from './stores';
diff --git a/src/p4/ColorPicker.svelte b/src/p4/colors/ColorPicker.svelte
similarity index 99%
rename from src/p4/ColorPicker.svelte
rename to src/p4/colors/ColorPicker.svelte
index dcc18969..5ba1734b 100644
--- a/src/p4/ColorPicker.svelte
+++ b/src/p4/colors/ColorPicker.svelte
@@ -1,7 +1,7 @@
 <script>
   import ColorSlider from './ColorSlider.svelte';
   import {hexToRgb, rgbToHex, rgbToHsv, hsvToRgb} from './color-utils';
-  import {_} from '../locales';
+  import {_} from '../../locales';
 
   export let value;
   export let defaultColor;
diff --git a/src/p4/ColorSlider.svelte b/src/p4/colors/ColorSlider.svelte
similarity index 100%
rename from src/p4/ColorSlider.svelte
rename to src/p4/colors/ColorSlider.svelte
diff --git a/src/p4/color-utils.js b/src/p4/colors/color-utils.js
similarity index 100%
rename from src/p4/color-utils.js
rename to src/p4/colors/color-utils.js

From 0f9be80bde0ed8861d3421104d81e78fe39232c2 Mon Sep 17 00:00:00 2001
From: Thomas Weber <muffin@muffin.ink>
Date: Wed, 15 Dec 2021 17:37:19 -0600
Subject: [PATCH 5/5] WIP - more color input improvements

---
 src/p4/ResetButton.svelte        |   4 +-
 src/p4/colors/ColorPicker.svelte | 154 ++++++++++++++++++++-----------
 src/p4/colors/ColorSlider.svelte |  42 ++++++---
 src/p4/colors/color-utils.js     |   5 +
 test/p4/color-utils.test.js      |   8 +-
 5 files changed, 143 insertions(+), 70 deletions(-)

diff --git a/src/p4/ResetButton.svelte b/src/p4/ResetButton.svelte
index 2f1510f2..65d7d96a 100644
--- a/src/p4/ResetButton.svelte
+++ b/src/p4/ResetButton.svelte
@@ -3,10 +3,12 @@
   import {_} from '../locales/';
   import icon from './reset.svg';
 
+  export let confirm = true;
+
   const dispatch = createEventDispatcher();
 
   const click = () => {
-    if (confirm($_('reset.confirm'))) {
+    if (!confirm || window.confirm($_('reset.confirm'))) {
       dispatch('click');
     }
   };
diff --git a/src/p4/colors/ColorPicker.svelte b/src/p4/colors/ColorPicker.svelte
index 5ba1734b..febc83d0 100644
--- a/src/p4/colors/ColorPicker.svelte
+++ b/src/p4/colors/ColorPicker.svelte
@@ -1,14 +1,41 @@
 <script>
   import ColorSlider from './ColorSlider.svelte';
-  import {hexToRgb, rgbToHex, rgbToHsv, hsvToRgb} from './color-utils';
+  import ResetButton from '../ResetButton.svelte';
+  import {hexToRgb, rgbToHex, rgbToHsv, hsvToRgb, normalizeHex} from './color-utils';
   import {_} from '../../locales';
 
   export let value;
   export let defaultColor;
 
-  let editorElement;
-  let valueAsHsv;
+  let internalHex;
+  let internalHsv;
+
+  const updateExternalHex = () => {
+    value = internalHex;
+  };
+  const setHsv = (hsv) => {
+    const rgb = hsvToRgb(...hsv);
+    const hex = rgbToHex(...rgb);
+    internalHex = hex;
+    internalHsv = hsv;
+    updateExternalHex();
+  };
+  const setInternalHex = (hex) => {
+    const valueAsRgb = hexToRgb(hex);
+    internalHex = hex;
+    internalHsv = rgbToHsv(...valueAsRgb);
+  };
+  const setHex = (hex) => {
+    setInternalHex(hex);
+    updateExternalHex();
+  };
+  const reset = () => {
+    setHex(defaultColor);
+  };
+  $: setInternalHex(value);
+
   let open = false;
+  let editorElement;
 
   const handleOpen = () => {
     open = !open;
@@ -19,24 +46,12 @@
     }
   };
 
-  const setHsv = (hsv) => {
-    const rgb = hsvToRgb(...hsv);
-    const hex = rgbToHex(...rgb);
-    value = hex;
-    valueAsHsv = hsv;
-  };
-  const setHex = (hex) => {
-    const valueAsRgb = hexToRgb(hex);
-    value = hex;
-    valueAsHsv = rgbToHsv(...valueAsRgb);
-  };
-  setHex(value);
-
-  const hsvChangeFactory = (index) => (e) => {
-    const newColor = [...valueAsHsv];
+  const updateHsvChannelFactory = (index) => (e) => {
+    const newColor = [...internalHsv];
     newColor[index] = e.detail;
     setHsv(newColor);
   };
+
   const generateHueSteps = (hsv) => {
     const result = [];
     for (let i = 0; i < 1; i += 0.1) {
@@ -58,13 +73,6 @@
     }
     return result;
   };
-
-  const handleSetHex = (e) => {
-    setHex(e.target.value);
-  };
-  const reset = () => {
-    setHex(defaultColor);
-  };
 </script>
 
 <style>
@@ -94,6 +102,7 @@
     width: 100%;
     height: 100%;
   }
+
   .editor {
     background: white;
     position: absolute;
@@ -103,6 +112,19 @@
     padding: 8px;
     box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5);
   }
+
+  :global([theme="dark"]) .button,
+  :global([theme="dark"]) .editor {
+    background-color: #333;
+    border-color: #888;
+  }
+  :global([theme="dark"]) .button:hover {
+    background-color: #444;
+  }
+  :global([theme="dark"]) .button:active {
+    background-color: #555;
+  }
+
   .slider-section {
     margin-bottom: 12px;
   }
@@ -114,27 +136,26 @@
     font-weight: normal;
     margin-left: 12px;
   }
+
   .bottom-section {
     display: flex;
     align-items: center;
+    height: 24px;
   }
-  .hex-text {
-    width: 60px;
-  }
-  .reset-button {
-    margin-left: 8px;
-  }
-
-  :global([theme="dark"]) .button,
-  :global([theme="dark"]) .editor {
-    background-color: #333;
-    border-color: #888;
+  .native-input {
+    width: 40px;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    border: none;
   }
-  :global([theme="dark"]) .button:hover {
-    background-color: #444;
+  .hex-input {
+    width: 60px;
   }
-  :global([theme="dark"]) .button:active {
-    background-color: #555;
+  .native-input, .hex-input {
+    height: 100%;
+    margin-right: 8px;
+    box-sizing: border-box;
   }
 </style>
 
@@ -142,52 +163,75 @@
 
 <div class="container" bind:this={editorElement}>
   <button class="button" on:click={handleOpen}>
-    <div class="color-preview" style={`background-color: ${value}`}></div>
+    <div class="color-preview" style={`background-color: ${normalizeHex(internalHex)}`}></div>
   </button>
+
   {#if open}
     <div class="editor">
       <div class="slider-section">
         <div class="label">
           {$_('color.color')}
-          <div class="value">{Math.round(valueAsHsv[0] * 100)}</div>
+          <div class="value">{Math.round(internalHsv[0] * 100)}</div>
         </div>
         <div class="slider">
           <ColorSlider
-            value={valueAsHsv[0]}
-            steps={generateHueSteps(valueAsHsv)}
-            on:change={hsvChangeFactory(0)}
+            value={internalHsv[0]}
+            steps={generateHueSteps(internalHsv)}
+            on:change={updateHsvChannelFactory(0)}
           />
         </div>
       </div>
+
       <div class="slider-section">
         <div class="label">
           {$_('color.saturation')}
-          <div class="value">{Math.round(valueAsHsv[1] * 100)}</div>
+          <div class="value">{Math.round(internalHsv[1] * 100)}</div>
         </div>
         <div class="slider">
           <ColorSlider
-            value={valueAsHsv[1]}
-            steps={generateSaturationSteps(valueAsHsv)}
-            on:change={hsvChangeFactory(1)}
+            value={internalHsv[1]}
+            steps={generateSaturationSteps(internalHsv)}
+            on:change={updateHsvChannelFactory(1)}
           />
         </div>
       </div>
+
       <div class="slider-section">
         <div class="label">
           {$_('color.brightness')}
-          <div class="value">{Math.round(valueAsHsv[2] * 100)}</div>
+          <div class="value">{Math.round(internalHsv[2] * 100)}</div>
         </div>
         <div class="slider">
           <ColorSlider
-            value={valueAsHsv[2]}
-            steps={generateBrightnessSteps(valueAsHsv)}
-            on:change={hsvChangeFactory(2)}
+            value={internalHsv[2]}
+            steps={generateBrightnessSteps(internalHsv)}
+            on:change={updateHsvChannelFactory(2)}
           />
         </div>
       </div>
+
       <div class="bottom-section">
-        <input class="hex-text" type="text" value={value} on:input={handleSetHex} />
-        <button class="reset-button" on:click={reset}>{$_('reset.reset')}</button>
+        <input
+          class="native-input"
+          type="color"
+          value={normalizeHex(internalHex)}
+          on:input={(e) => {
+            setHex(e.target.value);
+          }}
+        />
+        <input
+          class="hex-input"
+          type="text"
+          value={internalHex}
+          on:input={(e) => {
+            setInternalHex(e.target.value);
+          }}
+          on:change={updateExternalHex}
+        />
+        <ResetButton
+          on:click={reset}
+          confirm={false}
+        />
       </div>
     </div>
   {/if}
diff --git a/src/p4/colors/ColorSlider.svelte b/src/p4/colors/ColorSlider.svelte
index 090fcc32..0423d67a 100644
--- a/src/p4/colors/ColorSlider.svelte
+++ b/src/p4/colors/ColorSlider.svelte
@@ -6,27 +6,38 @@
 
   const dispatch = createEventDispatcher();
 
-  let rect;
-  let element;
-  let isMoving = false;
+  let sliderRect;
+  let sliderElement;
+  let knobRect;
+  let knobElement;
 
-  $: background = `linear-gradient(to right, ${steps.join(',')})`;
+  let isMoving = false;
+  let distanceFromLeft = 0;
 
   const setMousePosition = (clientX) => {
-    const unclamped = (clientX - rect.left - 10) / rect.width;
-    value = Math.max(0, Math.min(1, unclamped));
+    const unclampedValue = (clientX - sliderRect.left) / (sliderRect.width - knobRect.width);
+    value = Math.max(0, Math.min(1, unclampedValue));
+    distanceFromLeft = value * (sliderRect.width - knobRect.width);
     dispatch('change', value);
   };
   const onMouseMove = (e) => {
     if (!isMoving) return;
     setMousePosition(e.clientX);
   };
-  const onMouseDown = (e) => {
-    rect = element.getBoundingClientRect();
+
+  const startMoving = () => {
+    sliderRect = sliderElement.getBoundingClientRect();
+    knobRect = knobElement.getBoundingClientRect();
     isMoving = true;
+  };
+  const onMouseDownSlider = (e) => {
+    startMoving();
+  };
+  const onMouseDownKnob = (e) => {
+    startMoving();
     setMousePosition(e.clientX);
   };
-  const onMouseUp = (e) => {
+  const onMouseUp = () => {
     if (!isMoving) return;
     isMoving = false;
   }
@@ -54,9 +65,14 @@
 
 <div
   class="slider"
-  on:mousedown|preventDefault={onMouseDown}
-  bind:this={element}
-  style={`background: ${background}`}
+  style={`background: linear-gradient(to right, ${steps.join(',')})`}
+  on:mousedown|preventDefault={onMouseDownSlider}
+  bind:this={sliderElement}
 >
-  <div class="knob" style={`left: ${value * 100}%; transform: translateX(-50%);`}></div>
+  <div
+    class="knob"
+    style={`left: ${distanceFromLeft}px`}
+    on:mousedown|preventDefault={onMouseDownKnob}
+    bind:this={knobElement}
+  />
 </div>
diff --git a/src/p4/colors/color-utils.js b/src/p4/colors/color-utils.js
index 12c7454c..5167242d 100644
--- a/src/p4/colors/color-utils.js
+++ b/src/p4/colors/color-utils.js
@@ -23,6 +23,11 @@ export const rgbToHex = (r, g, b) => {
   return '#' + Math.round(r).toString(16).padStart(2, '0') + Math.round(g).toString(16).padStart(2, '0') + Math.round(b).toString(16).padStart(2, '0');
 };
 
+export const normalizeHex = (hex) => {
+  const [r, g, b] = hexToRgb(hex);
+  return rgbToHex(r, g, b);
+};
+
 export const rgbToHsv = (r, g, b) => {
   r /= 255;
   g /= 255;
diff --git a/test/p4/color-utils.test.js b/test/p4/color-utils.test.js
index faaa4c30..ccde23a6 100644
--- a/test/p4/color-utils.test.js
+++ b/test/p4/color-utils.test.js
@@ -1,4 +1,4 @@
-import {hexToRgb, rgbToHex, rgbToHsv, hsvToRgb} from '../../src/p4/color-utils';
+import {hexToRgb, rgbToHex, rgbToHsv, hsvToRgb, normalizeHex} from '../../src/p4/colors/color-utils';
 
 test('hexToRgb', () => {
   expect(hexToRgb('#000000')).toEqual([0, 0, 0]);
@@ -20,6 +20,12 @@ test('rgbToHex', () => {
   expect(rgbToHex(1, 2, 255)).toEqual('#0102ff');
 });
 
+test('normalizeHex', () => {
+  expect(normalizeHex('#AbCdEf')).toEqual('#abcdef');
+  expect(normalizeHex('AbCdEf')).toEqual('#abcdef');
+  expect(normalizeHex('111')).toEqual('#111111');
+});
+
 test('rgbToHsv', () => {
   expect(rgbToHsv(0, 0, 0)[0]).toEqual(0);
   // (saturation does not matter in pure black)