From 0d37c5ad426c0f0bbb31703471ab6dc06fb6b2d9 Mon Sep 17 00:00:00 2001
From: Jan Umbach <jan@umbach.dev>
Date: Sat, 22 Jun 2024 13:58:47 +0200
Subject: [PATCH] shx-3d-render

---
 snippets/shx-3d-render-input.liquid | 57 +++++++++++++++++++++++++++--
 1 file changed, 54 insertions(+), 3 deletions(-)

diff --git a/snippets/shx-3d-render-input.liquid b/snippets/shx-3d-render-input.liquid
index 0641588..40c1433 100644
--- a/snippets/shx-3d-render-input.liquid
+++ b/snippets/shx-3d-render-input.liquid
@@ -195,9 +195,60 @@
 
     
 
-    // sort FilamentList by hex
-    const sortedFilementIDs = Object.keys(FilamentList).sort((a, b) => {
-        return FilamentList[a].hex.localeCompare(FilamentList[b].hex);
+    // Helper function to convert Hex to RGB
+    function hexToRgb(hex) {
+        let r = 0, g = 0, b = 0;
+        // 3 digits
+        if (hex.length === 4) {
+            r = parseInt(hex[1] + hex[1], 16);
+            g = parseInt(hex[2] + hex[2], 16);
+            b = parseInt(hex[3] + hex[3], 16);
+        }
+        // 6 digits
+        else if (hex.length === 7) {
+            r = parseInt(hex[1] + hex[2], 16);
+            g = parseInt(hex[3] + hex[4], 16);
+            b = parseInt(hex[5] + hex[6], 16);
+        }
+        return [r, g, b];
+    }
+
+    // Helper function to convert RGB to HSL
+    function rgbToHsl(r, g, b) {
+        r /= 255, g /= 255, b /= 255;
+        let max = Math.max(r, g, b), min = Math.min(r, g, b);
+        let h, s, l = (max + min) / 2;
+
+        if (max === min) {
+            h = s = 0; // achromatic
+        } else {
+            let 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];
+    }
+
+    // Sort FilamentList by HSL
+    const sortedFilamentIDs = Object.keys(FilamentList).sort((a, b) => {
+        let rgbA = hexToRgb(FilamentList[a].hex);
+        let hslA = rgbToHsl(...rgbA);
+        let rgbB = hexToRgb(FilamentList[b].hex);
+        let hslB = rgbToHsl(...rgbB);
+
+        // Compare by Hue, then Saturation, then Lightness
+        for (let i = 0; i < 3; i++) {
+            if (hslA[i] !== hslB[i]) {
+                return hslA[i] - hslB[i];
+            }
+        }
+        return 0; // identical colors
     });
 
     function SHX_getFilamentById(id) {