refactor state color computation

Author: ngocjohn

src/components/shared/range/vsc-range-item.ts

@@ -2,7 +2,7 @@ import { css, CSSResultGroup, html, nothing, PropertyValues, TemplateResult } fr
 import { customElement } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { _computeStateColor } from '../../../ha/common/entity/state_active';
+import { computeStateColor } from '../../../ha/common/color/compute-state-color';
 import { ActionsSharedConfig, hasItemAction, RangeItemConfig } from '../../../types/config';
 import { VscBaseRange } from '../../../utils/base-range';
 import { generateColorBlocks, generateGradient, getColorForLevel, getNormalizedValue } from '../../../utils/colors';
@@ -240,7 +240,7 @@ export class VscRangeItem extends VscBaseRange {
       return nothing;
     }
     const levelStateObj = this.hass.states[entity!];
-    const iconColor = icon_state_color ? _computeStateColor(levelStateObj) : undefined;
+    const iconColor = icon_state_color ? computeStateColor(levelStateObj) : undefined;
     return html`
       <div class="item" id="${type}-item">
         ${!hide_icon

src/ha/common/color/compute-state-color.ts

@@ -0,0 +1,37 @@
+import { HassEntity } from 'home-assistant-js-websocket/dist/types';
+import memoizeOne from 'memoize-one';
+
+import { computeDomain } from '../..';
+import { hsv2rgb, rgb2hex, rgb2hsv } from '../../../utils';
+import { stateActive } from '../entity/state_active';
+import { stateColorCss } from '../entity/state_color';
+import { computeCssColor } from './compute-color';
+
+export const computeStateColor = memoizeOne((stateObj: HassEntity, color?: string) => {
+  if (!stateObj) {
+    return undefined;
+  }
+  // Use custom color if active
+  if (color) {
+    return stateActive(stateObj) ? computeCssColor(color) : undefined;
+  }
+
+  // Use light color if the light support rgb
+  if (computeDomain(stateObj.entity_id) === 'light' && stateObj.attributes.rgb_color) {
+    const hsvColor = rgb2hsv(stateObj.attributes.rgb_color);
+
+    // Modify the real rgb color for better contrast
+    if (hsvColor[1] < 0.4) {
+      // Special case for very light color (e.g: white)
+      if (hsvColor[1] < 0.1) {
+        hsvColor[2] = 225;
+      } else {
+        hsvColor[1] = 0.4;
+      }
+    }
+    return rgb2hex(hsv2rgb(hsvColor));
+  }
+
+  // Fallback to state color
+  return stateColorCss(stateObj);
+});

src/ha/common/entity/state_active.ts

@@ -1,12 +1,7 @@
 import type { HassEntity } from 'home-assistant-js-websocket';
 
-import memoizeOne from 'memoize-one';
-
-import { hsv2rgb, rgb2hex, rgb2hsv } from '../../../utils';
 import { isUnavailableState, OFF, UNAVAILABLE } from '../../data/entity';
-import { computeCssColor } from '../color/compute-color';
 import { computeDomain } from './compute_domain';
-import { stateColorCss } from './state_color';
 
 export function stateActive(stateObj: HassEntity, state?: string): boolean {
   const domain = computeDomain(stateObj.entity_id);
@@ -62,32 +57,3 @@ export function stateActive(stateObj: HassEntity, state?: string): boolean {
 
   return true;
 }
-
-export const _computeStateColor = memoizeOne((stateObj: HassEntity, color?: string) => {
-  if (!stateObj) {
-    return undefined;
-  }
-  // Use custom color if active
-  if (color) {
-    return stateActive(stateObj) ? computeCssColor(color) : undefined;
-  }
-
-  // Use light color if the light support rgb
-  if (computeDomain(stateObj.entity_id) === 'light' && stateObj.attributes.rgb_color) {
-    const hsvColor = rgb2hsv(stateObj.attributes.rgb_color);
-
-    // Modify the real rgb color for better contrast
-    if (hsvColor[1] < 0.4) {
-      // Special case for very light color (e.g: white)
-      if (hsvColor[1] < 0.1) {
-        hsvColor[2] = 225;
-      } else {
-        hsvColor[1] = 0.4;
-      }
-    }
-    return rgb2hex(hsv2rgb(hsvColor));
-  }
-
-  // Fallback to state color
-  return stateColorCss(stateObj);
-});

src/utils/base-indicator.ts

@@ -26,6 +26,7 @@ import {
 import { toCommon, isEntity } from '../types/config/card/row-indicators';
 import { rgb2hex, rgb2hsv, hsv2rgb } from '../utils/colors';
 import { BaseElement } from './base-element';
+import { computeStateColor } from '../ha/common/color/compute-state-color';
 
 const cameraUrlWithWidthHeight = (base_url: string, width: number, height: number) =>
   `${base_url}&width=${width}&height=${height}`;
@@ -212,32 +213,7 @@ export class VscIndicatorItemBase<T extends IndicatorRowItem> extends BaseElemen
   }
 
   protected _computeStateColor = memoizeOne((stateObj: HassEntity, color?: string) => {
-    if (!stateObj) {
-      return undefined;
-    }
-    // Use custom color if active
-    if (color) {
-      return stateActive(stateObj) ? computeCssColor(color) : undefined;
-    }
-
-    // Use light color if the light support rgb
-    if (computeDomain(stateObj.entity_id) === 'light' && stateObj.attributes.rgb_color) {
-      const hsvColor = rgb2hsv(stateObj.attributes.rgb_color);
-
-      // Modify the real rgb color for better contrast
-      if (hsvColor[1] < 0.4) {
-        // Special case for very light color (e.g: white)
-        if (hsvColor[1] < 0.1) {
-          hsvColor[2] = 225;
-        } else {
-          hsvColor[1] = 0.4;
-        }
-      }
-      return rgb2hex(hsv2rgb(hsvColor));
-    }
-
-    // Fallback to state color
-    return stateColorCss(stateObj);
+    return computeStateColor(stateObj, color);
   });
 
   protected _renderIcon(stateObj: HassEntity): TemplateResult {