🔧 Use GTK for color conversion

src/effects/AuraGlow.js

@@ -22,6 +22,10 @@ import * as utils from '../utils.js';
 // only uses the static metadata of the effect.
 const ShaderFactory = await utils.importInShellOnly('./ShaderFactory.js');
 
+// We import Gtk for the color preview in the preferences dialog. This is only available
+// and required in the preferences process.
+const Gtk = await utils.importInPrefsOnly('gi://Gtk');
+
 const _ = await utils.importGettext();
 
 //////////////////////////////////////////////////////////////////////////////////////////
@@ -106,15 +110,15 @@ export default class Effect {
     dialog.getBuilder()
       .get_object('aura-glow-hue-preview')
       .set_draw_func((area, cairo) => {
-        const hueScale = dialog.getBuilder().get_object('aura-glow-start-hue-slider');
+        const hueScale  = dialog.getBuilder().get_object('aura-glow-start-hue-slider');
-        const satScale = dialog.getBuilder().get_object('aura-glow-saturation-slider');
+        const satScale  = dialog.getBuilder().get_object('aura-glow-saturation-slider');
-        const color    = utils.hsvToRgb(hueScale.get_value(), satScale.get_value(), 1);
+        const [r, g, b] = Gtk.hsv_to_rgb(hueScale.get_value(), satScale.get_value(), 1);
-        const height   = area.get_allocated_height();
+        const height    = area.get_allocated_height();
-        const width    = area.get_allocated_width();
+        const width     = area.get_allocated_width();
-        cairo.setSourceRGB(color.r, color.g, color.b);
+        cairo.setSourceRGB(r, g, b);
         cairo.arc(width / 2, height / 2, width / 2, 0.0, 2 * Math.PI);
         cairo.fill();
-    });
+      });
 
     function redrawHuePreview() {
       dialog.getBuilder().get_object('aura-glow-hue-preview').queue_draw();

src/utils.js

@@ -102,6 +102,15 @@ export async function importInShellOnly(module) {
   return null;
 }
 
+// This method can be used to import a module in the preferences process only. The same as
+// importInShellOnly(), but the other way around.
+export async function importInPrefsOnly(module) {
+  if (typeof global === 'undefined') {
+    return (await import(module)).default;
+  }
+  return null;
+}
+
 // This method can be used to import gettext. This is done differently in the
 // GNOME Shell process and in the preferences process.
 export async function importGettext() {
@@ -195,42 +204,3 @@ export function parseColor(string) {
 
   return [color.red / 255, color.green / 255, color.blue / 255, color.alpha / 255];
 }
-
-// Converts a color in hsv space into rgb.
-// https://stackoverflow.com/a/17243070
-export function hsvToRgb(h, s, v) {
-  var r, g, b, i, f, p, q, t;
-  if (arguments.length === 1) {
-    (s = h.s), (v = h.v), (h = h.h);
-  }
-  i = Math.floor(h * 6);
-  f = h * 6 - i;
-  p = v * (1 - s);
-  q = v * (1 - f * s);
-  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,
-    g,
-    b,
-  };
-}