From 4df7f92a569644929fb560d83eb878854f95d6f8 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Wed, 9 Mar 2022 15:34:26 -0800
Subject: [PATCH] Working conversion

---
 .../common/input/color/color.component.html   |  2 +-
 .../common/input/color/color.component.ts     | 23 ++-----
 .../manage/settings/settings.component.html   |  2 +-
 src-ui/src/app/services/settings.service.ts   |  7 ++-
 src-ui/src/app/utils/color.ts                 | 60 +++++++++++++------
 5 files changed, 55 insertions(+), 39 deletions(-)

diff --git a/src-ui/src/app/components/common/input/color/color.component.html b/src-ui/src/app/components/common/input/color/color.component.html
index d7b84566c..08cbf0bab 100644
--- a/src-ui/src/app/components/common/input/color/color.component.html
+++ b/src-ui/src/app/components/common/input/color/color.component.html
@@ -6,7 +6,7 @@
 
       <ng-template #popContent>
         <div style="min-width: 200px;" class="pb-3">
-          <color-slider [color]="value" (onChangeComplete)="sliderChanged($event)"></color-slider>
+          <color-slider [color]="value" (onChangeComplete)="colorChanged($event.color.hex)"></color-slider>
         </div>
 
       </ng-template>
diff --git a/src-ui/src/app/components/common/input/color/color.component.ts b/src-ui/src/app/components/common/input/color/color.component.ts
index ebaa50327..a7f3452f2 100644
--- a/src-ui/src/app/components/common/input/color/color.component.ts
+++ b/src-ui/src/app/components/common/input/color/color.component.ts
@@ -1,7 +1,6 @@
-import { Component, Input, forwardRef } from '@angular/core';
+import { Component, forwardRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { ColorEvent, ColorMode } from 'ngx-color';
-import { randomColor, hslToHex } from 'src/app/utils/color';
+import { randomColor } from 'src/app/utils/color';
 import { AbstractInputComponent } from '../abstract-input';
 
 @Component({
@@ -16,26 +15,16 @@ import { AbstractInputComponent } from '../abstract-input';
 })
 export class ColorComponent extends AbstractInputComponent<string> {
 
-  @Input()
-  colorMode: ColorMode = ColorMode.HEX
-
   constructor() {
     super()
   }
 
   randomize() {
-    const color = randomColor(this.colorMode)
-    let colorHex = color
-    if (this.colorMode == ColorMode.HSL) {
-      const hsl = color.split(',')
-      colorHex = hslToHex(+hsl[0], +hsl[1], +hsl[2])
-    }
-    this.value = colorHex
-    this.onChange(color)
+    this.colorChanged(randomColor())
   }
 
-  sliderChanged(colorEvent:ColorEvent) {
-    this.value = colorEvent.color.hex
-    this.onChange(colorEvent.color[this.colorMode].toString())
+  colorChanged(value) {
+    this.value = value
+    this.onChange(value)
   }
 }
diff --git a/src-ui/src/app/components/manage/settings/settings.component.html b/src-ui/src/app/components/manage/settings/settings.component.html
index ac37547a6..dac266277 100644
--- a/src-ui/src/app/components/manage/settings/settings.component.html
+++ b/src-ui/src/app/components/manage/settings/settings.component.html
@@ -105,7 +105,7 @@
             <span i18n>Theme Color</span>
           </div>
           <div class="col-3">
-            <app-input-color i18n-title colorMode="hsl" formControlName="themeColor" [error]="error?.color"></app-input-color>
+            <app-input-color i18n-title formControlName="themeColor" [error]="error?.color"></app-input-color>
           </div>
           <div class="col-2">
             <button class="btn btn-link btn-sm pt-2 ps-0" [disabled]="!this.settingsForm.get('themeColor').value" (click)="clearThemeColor()">
diff --git a/src-ui/src/app/services/settings.service.ts b/src-ui/src/app/services/settings.service.ts
index ecc13fcbf..b3a745b69 100644
--- a/src-ui/src/app/services/settings.service.ts
+++ b/src-ui/src/app/services/settings.service.ts
@@ -2,6 +2,7 @@ import { DOCUMENT } from '@angular/common';
 import { Inject, Injectable, LOCALE_ID, Renderer2, RendererFactory2, RendererStyleFlags2 } from '@angular/core';
 import { Meta } from '@angular/platform-browser';
 import { CookieService } from 'ngx-cookie-service';
+import { hexToHsl } from 'src/app/utils/color';
 
 export interface PaperlessSettings {
   key: string
@@ -87,9 +88,9 @@ export class SettingsService {
     }
 
     if (themeColor) {
-      const hsl = themeColor.split(',')
-      this.renderer.setStyle(document.documentElement, '--pngx-primary',`${+hsl[0] * 360},${hsl[1] * 100}%`, RendererStyleFlags2.DashCase)
-      this.renderer.setStyle(document.documentElement, '--pngx-primary-lightness',`${hsl[2] * 100}%`, RendererStyleFlags2.DashCase)
+      const hsl = hexToHsl(themeColor)
+      this.renderer.setStyle(document.documentElement, '--pngx-primary',`${+hsl.h * 360},${hsl.s * 100}%`, RendererStyleFlags2.DashCase)
+      this.renderer.setStyle(document.documentElement, '--pngx-primary-lightness',`${hsl.l * 100}%`, RendererStyleFlags2.DashCase)
     } else {
       this.renderer.removeStyle(document.documentElement, '--pngx-primary', RendererStyleFlags2.DashCase)
       this.renderer.removeStyle(document.documentElement, '--pngx-primary-lightness', RendererStyleFlags2.DashCase)
diff --git a/src-ui/src/app/utils/color.ts b/src-ui/src/app/utils/color.ts
index 72462cc37..068851209 100644
--- a/src-ui/src/app/utils/color.ts
+++ b/src-ui/src/app/utils/color.ts
@@ -1,4 +1,4 @@
-import { ColorMode } from "ngx-color"
+import { HSL } from "ngx-color"
 
 function componentToHex(c) {
   var hex = Math.floor(c).toString(16)
@@ -6,8 +6,8 @@ function componentToHex(c) {
 }
 
 /**
- * https://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c
  *
+ * https://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c
  * Converts an HSL color value to RGB. Conversion formula
  * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
  * Assumes h, s, and l are contained in the set [0, 1] and
@@ -43,21 +43,47 @@ function hslToRgb(h, s, l){
   return [r * 255, g * 255, b * 255]
 }
 
-export function hslToHex(h: number, s: number, l:number): string {
-  const rgb = hslToRgb(h,s,l)
-  return `#${componentToHex(rgb[0])}${componentToHex(rgb[1])}${componentToHex(rgb[2])}`
+/**
+ * https://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c
+ * Converts an RGB color value to HSL. Conversion formula
+ * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
+ * Assumes r, g, and b are contained in the set [0, 255] and
+ * returns h, s, and l in the set [0, 1].
+ *
+ * @param   Number  r       The red color value
+ * @param   Number  g       The green color value
+ * @param   Number  b       The blue color value
+ * @return  Array           The HSL representation
+ */
+ export function rgbToHsl(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, l = (max + min) / 2;
+
+  if(max == min){
+      h = s = 0; // achromatic
+  }else{
+      var d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      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, l];
 }
 
-export function randomColor(colorMode: ColorMode = ColorMode.HEX) {
-  const h = Math.random()
-  const s = 0.6
-  const l = Math.random() * 0.4 + 0.4
-  switch (colorMode) {
-    case ColorMode.HSL:
-      return `${h},${s},${l}`
-      break;
-    default: // HEX
-      return hslToHex(h,s,l)
-      break;
-  }
+export function hexToHsl(hex: string): HSL {
+  hex = hex.replace('#', '')
+  let aRgbHex = hex.match(/.{1,2}/g)
+  const hsl = rgbToHsl(parseInt(aRgbHex[0], 16), parseInt(aRgbHex[1], 16), parseInt(aRgbHex[2], 16))
+  return { h: hsl[0], s: hsl[1], l: hsl[2] }
+}
+
+export function randomColor() {
+  let rgb = hslToRgb(Math.random(), 0.6, Math.random() * 0.4 + 0.4)
+  return `#${componentToHex(rgb[0])}${componentToHex(rgb[1])}${componentToHex(rgb[2])}`
 }