@ppg_pl/tinting 0.0.3 → 0.0.5

package/dist/esm/modal-header_9.entry.js

@@ -2565,10 +2565,21 @@ const fetchColors = async (filters) => {
     return [];
   }
 };
+const getSampleSortForProduct = (sample, productId) => {
+  var _a, _b;
+  const link = (_a = sample === null || sample === void 0 ? void 0 : sample.Products) === null || _a === void 0 ? void 0 : _a.find((p) => p.Product_id === productId);
+  // put null/undefined at the end
+  return (_b = link === null || link === void 0 ? void 0 : link.sort) !== null && _b !== void 0 ? _b : Number.POSITIVE_INFINITY;
+};
 const fetchSamplesColors = async (filters) => {
   try {
+    // you already include Products.* in the query
+    const { id: productId } = filters;
     const response = await ApiService.getData(`items/Sample?${fetchColorsQuery(Object.assign({}, filters))}`);
-    return (response === null || response === void 0 ? void 0 : response.data) || [];
+    const data = (response === null || response === void 0 ? void 0 : response.data) || [];
+    // order by junction sort
+    const ordered = [...data].sort((a, b) => getSampleSortForProduct(a, productId) - getSampleSortForProduct(b, productId));
+    return ordered;
   }
   catch (error) {
     console.error('Error fetching samples colors:', error);
@@ -6601,10 +6612,20 @@ const Modal = class {
       let mostSimilarIndex = 0;
       let minDistance = Infinity;
       remainingColors.forEach((color, index) => {
-        const distance = chroma.distance(lastColor.hex, color.hex, 'lab');
-        if (distance < minDistance) {
-          minDistance = distance;
-          mostSimilarIndex = index;
+        try {
+          // Validate hex colors before calculating distance
+          if (!color.hex || !lastColor.hex) {
+            return;
+          }
+          const distance = chroma.distance(lastColor.hex, color.hex, 'lab');
+          if (distance < minDistance) {
+            minDistance = distance;
+            mostSimilarIndex = index;
+          }
+        }
+        catch (error) {
+          console.warn(`Error calculating color distance for ${color.hex}:`, error);
+          // Skip this color if it causes an error
         }
       });
       // Move the most similar color to sortedColors
@@ -6613,36 +6634,65 @@ const Modal = class {
     return sortedColors;
   }
   getColorHueGroup(hex) {
-    const color = chroma(hex);
-    const hue = color.get('hsl.h');
-    const saturation = color.get('hsl.s');
-    const lightness = color.get('hsl.l');
-    // Handle grayscale colors
-    if (saturation < 0.1) {
-      if (lightness < 0.2)
-        return 'black';
-      if (lightness > 0.8)
-        return 'white';
-      return 'gray';
-    }
-    // Group colors by hue ranges
-    if (hue >= 330 || hue < 30)
-      return 'red';
-    if (hue >= 30 && hue < 90)
-      return 'yellow';
-    if (hue >= 90 && hue < 150)
-      return 'green';
-    if (hue >= 150 && hue < 210)
-      return 'cyan';
-    if (hue >= 210 && hue < 270)
-      return 'blue';
-    if (hue >= 270 && hue < 330)
-      return 'magenta';
-    return 'other';
+    try {
+      // Validate hex format and handle invalid colors
+      if (!hex || typeof hex !== 'string') {
+        return 'other';
+      }
+      // Basic hex validation
+      const cleanHex = hex.startsWith('#') ? hex : `#${hex}`;
+      if (!/^#[0-9A-Fa-f]{6}$/.test(cleanHex)) {
+        console.warn(`Invalid hex color format: ${hex}`);
+        return 'other';
+      }
+      const color = chroma(cleanHex);
+      const hue = color.get('hsl.h');
+      const saturation = color.get('hsl.s');
+      const lightness = color.get('hsl.l');
+      // Handle grayscale colors
+      if (saturation < 0.1) {
+        if (lightness < 0.2)
+          return 'black';
+        if (lightness > 0.8)
+          return 'white';
+        return 'gray';
+      }
+      // Group colors by hue ranges
+      if (hue >= 330 || hue < 30)
+        return 'red';
+      if (hue >= 30 && hue < 90)
+        return 'yellow';
+      if (hue >= 90 && hue < 150)
+        return 'green';
+      if (hue >= 150 && hue < 210)
+        return 'cyan';
+      if (hue >= 210 && hue < 270)
+        return 'blue';
+      if (hue >= 270 && hue < 330)
+        return 'magenta';
+      return 'other';
+    }
+    catch (error) {
+      console.warn(`Error parsing color "${hex}":`, error);
+      return 'other';
+    }
   }
   sortColorsByHueAndSimilarity(colors) {
     if ((colors === null || colors === void 0 ? void 0 : colors.length) <= 1)
       return colors;
+    // Filter out colors with invalid hex values
+    const validColors = colors.filter(color => {
+      if (!color.hex || typeof color.hex !== 'string') {
+        console.warn(`Color missing hex value:`, color);
+        return false;
+      }
+      const cleanHex = color.hex.startsWith('#') ? color.hex : `#${color.hex}`;
+      const isValid = /^#[0-9A-Fa-f]{6}$/.test(cleanHex);
+      if (!isValid) {
+        console.warn(`Invalid hex color format: ${color.hex} for color:`, color);
+      }
+      return isValid;
+    });
     // Group valid colors by their hue family
     const colorGroups = {
       red: [],
@@ -6656,7 +6706,7 @@ const Modal = class {
       white: [],
       other: [],
     };
-    colors.forEach(color => {
+    validColors.forEach(color => {
       const group = this.getColorHueGroup(color.hex);
       colorGroups[group].push(color);
     });
@@ -6668,7 +6718,7 @@ const Modal = class {
         sortedGroups.push(this.sortColorsBySimilarity(colorGroups[groupName]));
       }
     });
-    // Combine all sorted groups, then append invalid colors at the end
+    // Combine all sorted groups
     return sortedGroups.flat();
   }
   async fetchColorsData({ reset = false } = {}) {