@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
|
@@ -6616,10 +6616,20 @@ const Modal = class {
|
|
|
6616
6616
|
let mostSimilarIndex = 0;
|
|
6617
6617
|
let minDistance = Infinity;
|
|
6618
6618
|
remainingColors.forEach((color, index) => {
|
|
6619
|
-
|
|
6620
|
-
|
|
6621
|
-
|
|
6622
|
-
|
|
6619
|
+
try {
|
|
6620
|
+
// Validate hex colors before calculating distance
|
|
6621
|
+
if (!color.hex || !lastColor.hex) {
|
|
6622
|
+
return;
|
|
6623
|
+
}
|
|
6624
|
+
const distance = chroma.distance(lastColor.hex, color.hex, 'lab');
|
|
6625
|
+
if (distance < minDistance) {
|
|
6626
|
+
minDistance = distance;
|
|
6627
|
+
mostSimilarIndex = index;
|
|
6628
|
+
}
|
|
6629
|
+
}
|
|
6630
|
+
catch (error) {
|
|
6631
|
+
console.warn(`Error calculating color distance for ${color.hex}:`, error);
|
|
6632
|
+
// Skip this color if it causes an error
|
|
6623
6633
|
}
|
|
6624
6634
|
});
|
|
6625
6635
|
// Move the most similar color to sortedColors
|
|
@@ -6628,36 +6638,65 @@ const Modal = class {
|
|
|
6628
6638
|
return sortedColors;
|
|
6629
6639
|
}
|
|
6630
6640
|
getColorHueGroup(hex) {
|
|
6631
|
-
|
|
6632
|
-
|
|
6633
|
-
|
|
6634
|
-
|
|
6635
|
-
|
|
6636
|
-
|
|
6637
|
-
|
|
6638
|
-
|
|
6639
|
-
|
|
6640
|
-
return '
|
|
6641
|
-
|
|
6642
|
-
|
|
6643
|
-
|
|
6644
|
-
|
|
6645
|
-
|
|
6646
|
-
|
|
6647
|
-
|
|
6648
|
-
|
|
6649
|
-
|
|
6650
|
-
|
|
6651
|
-
|
|
6652
|
-
|
|
6653
|
-
|
|
6654
|
-
|
|
6655
|
-
|
|
6656
|
-
|
|
6641
|
+
try {
|
|
6642
|
+
// Validate hex format and handle invalid colors
|
|
6643
|
+
if (!hex || typeof hex !== 'string') {
|
|
6644
|
+
return 'other';
|
|
6645
|
+
}
|
|
6646
|
+
// Basic hex validation
|
|
6647
|
+
const cleanHex = hex.startsWith('#') ? hex : `#${hex}`;
|
|
6648
|
+
if (!/^#[0-9A-Fa-f]{6}$/.test(cleanHex)) {
|
|
6649
|
+
console.warn(`Invalid hex color format: ${hex}`);
|
|
6650
|
+
return 'other';
|
|
6651
|
+
}
|
|
6652
|
+
const color = chroma(cleanHex);
|
|
6653
|
+
const hue = color.get('hsl.h');
|
|
6654
|
+
const saturation = color.get('hsl.s');
|
|
6655
|
+
const lightness = color.get('hsl.l');
|
|
6656
|
+
// Handle grayscale colors
|
|
6657
|
+
if (saturation < 0.1) {
|
|
6658
|
+
if (lightness < 0.2)
|
|
6659
|
+
return 'black';
|
|
6660
|
+
if (lightness > 0.8)
|
|
6661
|
+
return 'white';
|
|
6662
|
+
return 'gray';
|
|
6663
|
+
}
|
|
6664
|
+
// Group colors by hue ranges
|
|
6665
|
+
if (hue >= 330 || hue < 30)
|
|
6666
|
+
return 'red';
|
|
6667
|
+
if (hue >= 30 && hue < 90)
|
|
6668
|
+
return 'yellow';
|
|
6669
|
+
if (hue >= 90 && hue < 150)
|
|
6670
|
+
return 'green';
|
|
6671
|
+
if (hue >= 150 && hue < 210)
|
|
6672
|
+
return 'cyan';
|
|
6673
|
+
if (hue >= 210 && hue < 270)
|
|
6674
|
+
return 'blue';
|
|
6675
|
+
if (hue >= 270 && hue < 330)
|
|
6676
|
+
return 'magenta';
|
|
6677
|
+
return 'other';
|
|
6678
|
+
}
|
|
6679
|
+
catch (error) {
|
|
6680
|
+
console.warn(`Error parsing color "${hex}":`, error);
|
|
6681
|
+
return 'other';
|
|
6682
|
+
}
|
|
6657
6683
|
}
|
|
6658
6684
|
sortColorsByHueAndSimilarity(colors) {
|
|
6659
6685
|
if ((colors === null || colors === void 0 ? void 0 : colors.length) <= 1)
|
|
6660
6686
|
return colors;
|
|
6687
|
+
// Filter out colors with invalid hex values
|
|
6688
|
+
const validColors = colors.filter(color => {
|
|
6689
|
+
if (!color.hex || typeof color.hex !== 'string') {
|
|
6690
|
+
console.warn(`Color missing hex value:`, color);
|
|
6691
|
+
return false;
|
|
6692
|
+
}
|
|
6693
|
+
const cleanHex = color.hex.startsWith('#') ? color.hex : `#${color.hex}`;
|
|
6694
|
+
const isValid = /^#[0-9A-Fa-f]{6}$/.test(cleanHex);
|
|
6695
|
+
if (!isValid) {
|
|
6696
|
+
console.warn(`Invalid hex color format: ${color.hex} for color:`, color);
|
|
6697
|
+
}
|
|
6698
|
+
return isValid;
|
|
6699
|
+
});
|
|
6661
6700
|
// Group valid colors by their hue family
|
|
6662
6701
|
const colorGroups = {
|
|
6663
6702
|
red: [],
|
|
@@ -6671,7 +6710,7 @@ const Modal = class {
|
|
|
6671
6710
|
white: [],
|
|
6672
6711
|
other: [],
|
|
6673
6712
|
};
|
|
6674
|
-
|
|
6713
|
+
validColors.forEach(color => {
|
|
6675
6714
|
const group = this.getColorHueGroup(color.hex);
|
|
6676
6715
|
colorGroups[group].push(color);
|
|
6677
6716
|
});
|
|
@@ -6683,7 +6722,7 @@ const Modal = class {
|
|
|
6683
6722
|
sortedGroups.push(this.sortColorsBySimilarity(colorGroups[groupName]));
|
|
6684
6723
|
}
|
|
6685
6724
|
});
|
|
6686
|
-
// Combine all sorted groups
|
|
6725
|
+
// Combine all sorted groups
|
|
6687
6726
|
return sortedGroups.flat();
|
|
6688
6727
|
}
|
|
6689
6728
|
async fetchColorsData({ reset = false } = {}) {
|