Merge branch 'main' of https://github.com/JannexNet/SHX-Theme

snippets/shx-3d-render-input.liquid

@@ -195,9 +195,60 @@
 
     
 
-    // sort FilamentList by 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 sortedFilementIDs = Object.keys(FilamentList).sort((a, b) => {
-        return FilamentList[a].hex.localeCompare(FilamentList[b].hex);
+        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) {
@@ -289,15 +340,15 @@
 
             console.log(color);
             html += `
-                <input type="radio" id="${inputID}-${color}" form="product-form-${section_id}" name="properties[${inputName}]" value="${options[color].name} #${color}" ${inputVal === color ? 'checked' : ''}>
-                <label for="${inputID}-${color}" style="background-color: ${options[color].hex};">
+                <input type="radio" id="${inputID}-${color}" form="product-form-${section_id}" name="properties[${inputName}]" value="${FilamentList[color].name} #${color}" ${inputVal === color ? 'checked' : ''}>
+                <label for="${inputID}-${color}" style="background-color: ${FilamentList[color].hex};">
             `;
 
-            if(options[color].matte) {
+            if(FilamentList[color].matte) {
                 html += `<span class="shx-mat-matte"></span>`;
             }
 
-            if(options[color].silk) {
+            if(FilamentList[color].silk) {
                 html += `<span class="shx-mat-silk"></span>`;
             }