From 105a00d3e43d6b12aa63251010a334267184c090 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Tue, 4 May 2021 22:51:28 +0200
Subject: [PATCH] Use hs color when outside of wheel (#9088)

---
 src/common/color/convert-color.ts             | 14 +++++++++++
 src/components/ha-color-picker.js             | 10 ++++++--
 .../more-info/controls/more-info-light.ts     | 24 +++++++++++--------
 3 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/src/common/color/convert-color.ts b/src/common/color/convert-color.ts
index 104c619555..b646d8e021 100644
--- a/src/common/color/convert-color.ts
+++ b/src/common/color/convert-color.ts
@@ -110,5 +110,19 @@ export const rgb2hsv = (
   return [60 * (h < 0 ? h + 6 : h), v && c / v, v];
 };
 
+export const hsv2rgb = (
+  hsv: [number, number, number]
+): [number, number, number] => {
+  const [h, s, v] = hsv;
+  const f = (n: number) => {
+    const k = (n + h / 60) % 6;
+    return v - v * s * Math.max(Math.min(k, 4 - k, 1), 0);
+  };
+  return [f(5), f(3), f(1)];
+};
+
 export const rgb2hs = (rgb: [number, number, number]): [number, number] =>
   rgb2hsv(rgb).slice(0, 2) as [number, number];
+
+export const hs2rgb = (hs: [number, number]): [number, number, number] =>
+  hsv2rgb([hs[0], hs[1], 255]);
diff --git a/src/components/ha-color-picker.js b/src/components/ha-color-picker.js
index 0a7f88d54a..e692ef3076 100644
--- a/src/components/ha-color-picker.js
+++ b/src/components/ha-color-picker.js
@@ -2,7 +2,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { EventsMixin } from "../mixins/events-mixin";
-import { rgb2hs } from "../common/color/convert-color";
+import { hs2rgb, rgb2hs } from "../common/color/convert-color";
 /**
  * Color-picker custom element
  *
@@ -291,7 +291,13 @@ class HaColorPicker extends EventsMixin(PolymerElement) {
   processUserSelect(ev) {
     const canvasXY = this.convertToCanvasCoordinates(ev.clientX, ev.clientY);
     const hs = this.getColor(canvasXY.x, canvasXY.y);
-    const rgb = this.getRgbColor(canvasXY.x, canvasXY.y);
+    let rgb;
+    if (!this.isInWheel(canvasXY.x, canvasXY.y)) {
+      const [r, g, b] = hs2rgb([hs.h, hs.s]);
+      rgb = { r, g, b };
+    } else {
+      rgb = this.getRgbColor(canvasXY.x, canvasXY.y);
+    }
     this.onColorSelect(hs, rgb);
   }
 
diff --git a/src/dialogs/more-info/controls/more-info-light.ts b/src/dialogs/more-info/controls/more-info-light.ts
index 4118e557cb..63520d1947 100644
--- a/src/dialogs/more-info/controls/more-info-light.ts
+++ b/src/dialogs/more-info/controls/more-info-light.ts
@@ -254,6 +254,7 @@ class MoreInfoLight extends LitElement {
       }
 
       let brightnessAdjust = 100;
+      this._brightnessAdjusted = undefined;
       if (
         stateObj.attributes.color_mode === LightColorModes.RGB &&
         !lightSupportsColorMode(stateObj, LightColorModes.RGBWW) &&
@@ -264,8 +265,6 @@ class MoreInfoLight extends LitElement {
           this._brightnessAdjusted = maxVal;
           brightnessAdjust = (this._brightnessAdjusted / 255) * 100;
         }
-      } else {
-        this._brightnessAdjusted = undefined;
       }
       this._brightnessSliderValue = Math.round(
         (stateObj.attributes.brightness * brightnessAdjust) / 255
@@ -415,7 +414,7 @@ class MoreInfoLight extends LitElement {
       255,
     ]) as [number, number, number];
 
-    this._setRgbColor(
+    this._setRgbWColor(
       this._adjustColorBrightness(
         // first normalize the value
         this._colorBrightnessSliderValue
@@ -457,7 +456,7 @@ class MoreInfoLight extends LitElement {
     return rgbColor;
   }
 
-  private _setRgbColor(rgbColor: [number, number, number]) {
+  private _setRgbWColor(rgbColor: [number, number, number]) {
     if (lightSupportsColorMode(this.stateObj!, LightColorModes.RGBWW)) {
       const rgbww_color: [number, number, number, number, number] = this
         .stateObj!.attributes.rgbww_color
@@ -483,12 +482,17 @@ class MoreInfoLight extends LitElement {
    * Called when a new color has been picked.
    * should be throttled with the 'throttle=' attribute of the color picker
    */
-  private _colorPicked(ev: CustomEvent) {
+  private _colorPicked(
+    ev: CustomEvent<{
+      hs: { h: number; s: number };
+      rgb: { r: number; g: number; b: number };
+    }>
+  ) {
     if (
       lightSupportsColorMode(this.stateObj!, LightColorModes.RGBWW) ||
       lightSupportsColorMode(this.stateObj!, LightColorModes.RGBW)
     ) {
-      this._setRgbColor(
+      this._setRgbWColor(
         this._colorBrightnessSliderValue
           ? this._adjustColorBrightness(
               [ev.detail.rgb.r, ev.detail.rgb.g, ev.detail.rgb.b],
@@ -497,10 +501,10 @@ class MoreInfoLight extends LitElement {
           : [ev.detail.rgb.r, ev.detail.rgb.g, ev.detail.rgb.b]
       );
     } else if (lightSupportsColorMode(this.stateObj!, LightColorModes.RGB)) {
-      const rgb_color = [ev.detail.rgb.r, ev.detail.rgb.g, ev.detail.rgb.b] as [
-        number,
-        number,
-        number
+      const rgb_color: [number, number, number] = [
+        ev.detail.rgb.r,
+        ev.detail.rgb.g,
+        ev.detail.rgb.b,
       ];
       if (this._brightnessAdjusted) {
         this.hass.callService("light", "turn_on", {