@ppg_pl/tinting 0.0.4 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/modal-header_9.cjs.entry.js +71 -32
- package/dist/cjs/modal-header_9.cjs.entry.js.map +1 -1
- package/dist/collection/components/modal/index.js +70 -31
- package/dist/collection/components/modal/index.js.map +1 -1
- package/dist/components/index10.js +71 -32
- package/dist/components/index10.js.map +1 -1
- package/dist/esm/modal-header_9.entry.js +71 -32
- package/dist/esm/modal-header_9.entry.js.map +1 -1
- package/dist/tinting/{p-d9e19fea.entry.js → p-398633de.entry.js} +3 -3
- package/dist/tinting/p-398633de.entry.js.map +1 -0
- package/dist/tinting/tinting.esm.js +1 -1
- package/package.json +1 -1
- package/www/build/{p-d9e19fea.entry.js → p-398633de.entry.js} +3 -3
- package/www/build/p-398633de.entry.js.map +1 -0
- package/www/build/tinting.esm.js +1 -1
- package/dist/tinting/p-d9e19fea.entry.js.map +0 -1
- package/www/build/p-d9e19fea.entry.js.map +0 -1
|
@@ -6612,10 +6612,20 @@ const Modal = class {
|
|
|
6612
6612
|
let mostSimilarIndex = 0;
|
|
6613
6613
|
let minDistance = Infinity;
|
|
6614
6614
|
remainingColors.forEach((color, index) => {
|
|
6615
|
-
|
|
6616
|
-
|
|
6617
|
-
|
|
6618
|
-
|
|
6615
|
+
try {
|
|
6616
|
+
// Validate hex colors before calculating distance
|
|
6617
|
+
if (!color.hex || !lastColor.hex) {
|
|
6618
|
+
return;
|
|
6619
|
+
}
|
|
6620
|
+
const distance = chroma.distance(lastColor.hex, color.hex, 'lab');
|
|
6621
|
+
if (distance < minDistance) {
|
|
6622
|
+
minDistance = distance;
|
|
6623
|
+
mostSimilarIndex = index;
|
|
6624
|
+
}
|
|
6625
|
+
}
|
|
6626
|
+
catch (error) {
|
|
6627
|
+
console.warn(`Error calculating color distance for ${color.hex}:`, error);
|
|
6628
|
+
// Skip this color if it causes an error
|
|
6619
6629
|
}
|
|
6620
6630
|
});
|
|
6621
6631
|
// Move the most similar color to sortedColors
|
|
@@ -6624,36 +6634,65 @@ const Modal = class {
|
|
|
6624
6634
|
return sortedColors;
|
|
6625
6635
|
}
|
|
6626
6636
|
getColorHueGroup(hex) {
|
|
6627
|
-
|
|
6628
|
-
|
|
6629
|
-
|
|
6630
|
-
|
|
6631
|
-
|
|
6632
|
-
|
|
6633
|
-
|
|
6634
|
-
|
|
6635
|
-
|
|
6636
|
-
return '
|
|
6637
|
-
|
|
6638
|
-
|
|
6639
|
-
|
|
6640
|
-
|
|
6641
|
-
|
|
6642
|
-
|
|
6643
|
-
|
|
6644
|
-
|
|
6645
|
-
|
|
6646
|
-
|
|
6647
|
-
|
|
6648
|
-
|
|
6649
|
-
|
|
6650
|
-
|
|
6651
|
-
|
|
6652
|
-
|
|
6637
|
+
try {
|
|
6638
|
+
// Validate hex format and handle invalid colors
|
|
6639
|
+
if (!hex || typeof hex !== 'string') {
|
|
6640
|
+
return 'other';
|
|
6641
|
+
}
|
|
6642
|
+
// Basic hex validation
|
|
6643
|
+
const cleanHex = hex.startsWith('#') ? hex : `#${hex}`;
|
|
6644
|
+
if (!/^#[0-9A-Fa-f]{6}$/.test(cleanHex)) {
|
|
6645
|
+
console.warn(`Invalid hex color format: ${hex}`);
|
|
6646
|
+
return 'other';
|
|
6647
|
+
}
|
|
6648
|
+
const color = chroma(cleanHex);
|
|
6649
|
+
const hue = color.get('hsl.h');
|
|
6650
|
+
const saturation = color.get('hsl.s');
|
|
6651
|
+
const lightness = color.get('hsl.l');
|
|
6652
|
+
// Handle grayscale colors
|
|
6653
|
+
if (saturation < 0.1) {
|
|
6654
|
+
if (lightness < 0.2)
|
|
6655
|
+
return 'black';
|
|
6656
|
+
if (lightness > 0.8)
|
|
6657
|
+
return 'white';
|
|
6658
|
+
return 'gray';
|
|
6659
|
+
}
|
|
6660
|
+
// Group colors by hue ranges
|
|
6661
|
+
if (hue >= 330 || hue < 30)
|
|
6662
|
+
return 'red';
|
|
6663
|
+
if (hue >= 30 && hue < 90)
|
|
6664
|
+
return 'yellow';
|
|
6665
|
+
if (hue >= 90 && hue < 150)
|
|
6666
|
+
return 'green';
|
|
6667
|
+
if (hue >= 150 && hue < 210)
|
|
6668
|
+
return 'cyan';
|
|
6669
|
+
if (hue >= 210 && hue < 270)
|
|
6670
|
+
return 'blue';
|
|
6671
|
+
if (hue >= 270 && hue < 330)
|
|
6672
|
+
return 'magenta';
|
|
6673
|
+
return 'other';
|
|
6674
|
+
}
|
|
6675
|
+
catch (error) {
|
|
6676
|
+
console.warn(`Error parsing color "${hex}":`, error);
|
|
6677
|
+
return 'other';
|
|
6678
|
+
}
|
|
6653
6679
|
}
|
|
6654
6680
|
sortColorsByHueAndSimilarity(colors) {
|
|
6655
6681
|
if ((colors === null || colors === void 0 ? void 0 : colors.length) <= 1)
|
|
6656
6682
|
return colors;
|
|
6683
|
+
// Filter out colors with invalid hex values
|
|
6684
|
+
const validColors = colors.filter(color => {
|
|
6685
|
+
if (!color.hex || typeof color.hex !== 'string') {
|
|
6686
|
+
console.warn(`Color missing hex value:`, color);
|
|
6687
|
+
return false;
|
|
6688
|
+
}
|
|
6689
|
+
const cleanHex = color.hex.startsWith('#') ? color.hex : `#${color.hex}`;
|
|
6690
|
+
const isValid = /^#[0-9A-Fa-f]{6}$/.test(cleanHex);
|
|
6691
|
+
if (!isValid) {
|
|
6692
|
+
console.warn(`Invalid hex color format: ${color.hex} for color:`, color);
|
|
6693
|
+
}
|
|
6694
|
+
return isValid;
|
|
6695
|
+
});
|
|
6657
6696
|
// Group valid colors by their hue family
|
|
6658
6697
|
const colorGroups = {
|
|
6659
6698
|
red: [],
|
|
@@ -6667,7 +6706,7 @@ const Modal = class {
|
|
|
6667
6706
|
white: [],
|
|
6668
6707
|
other: [],
|
|
6669
6708
|
};
|
|
6670
|
-
|
|
6709
|
+
validColors.forEach(color => {
|
|
6671
6710
|
const group = this.getColorHueGroup(color.hex);
|
|
6672
6711
|
colorGroups[group].push(color);
|
|
6673
6712
|
});
|
|
@@ -6679,7 +6718,7 @@ const Modal = class {
|
|
|
6679
6718
|
sortedGroups.push(this.sortColorsBySimilarity(colorGroups[groupName]));
|
|
6680
6719
|
}
|
|
6681
6720
|
});
|
|
6682
|
-
// Combine all sorted groups
|
|
6721
|
+
// Combine all sorted groups
|
|
6683
6722
|
return sortedGroups.flat();
|
|
6684
6723
|
}
|
|
6685
6724
|
async fetchColorsData({ reset = false } = {}) {
|