feat: use lokesh.dhakar/quantize for consistent result

Author: maiconcarraro

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "use-material-you",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "React hook to create dynamic schemes and variants based on M3/material-color-utilities",
   "author": "Maicon Carraro (https://github.com/maiconcarraro)",
   "homepage": "https://github.com/maiconcarraro/use-material-you",
@@ -35,6 +35,7 @@
     "format:styles": "stylelint ./**/*.{css,scss} --fix"
   },
   "dependencies": {
+    "@lokesh.dhakar/quantize": "^1.4.0",
     "@material/material-color-utilities": "^0.3.0"
   },
   "peerDependencies": {

package.json

@@ -0,0 +1,7 @@
+declare module "@lokesh.dhakar/quantize" {
+  function quantize(
+    pixels: number[][],
+    maxColors: number,
+  ): { palette: () => [[number, number, number]] } | null;
+  export = quantize;
+}

src/quantize.d.ts

@@ -1,14 +1,11 @@
-import {
-  argbFromRgb,
-  QuantizerCelebi,
-  Score,
-} from "@material/material-color-utilities";
+import { argbFromRgb } from "@material/material-color-utilities";
+import quantize from "@lokesh.dhakar/quantize";
 
 export function findDominantColorsFromPixelData(
   pixelData: Uint8ClampedArray | Uint8Array,
   amount: number = 3,
 ): number[] {
-  const pixels: number[] = [];
+  const pixels: number[][] = [];
   for (let i = 0; i < pixelData.length; i += 4) {
     const r = pixelData[i]!;
     const g = pixelData[i + 1]!;
@@ -17,13 +14,26 @@ export function findDominantColorsFromPixelData(
     if (a < 255) {
       continue;
     }
-    const argb = argbFromRgb(r, g, b);
-    pixels.push(argb);
+    pixels.push([r, g, b]);
   }
 
-  const result = QuantizerCelebi.quantize(pixels, 128);
-  const ranked = Score.score(result);
-  return ranked.slice(0, amount);
+  // Replace Material quantize because of inconsistency: https://github.com/material-foundation/material-color-utilities/issues/132
+  // const result = QuantizerCelebi.quantize(pixels, 128);
+  // const ranked = Score.score(result);
+
+  try {
+    const cmap = quantize(pixels, amount);
+
+    if (!cmap) {
+      return [];
+    }
+
+    const palette = cmap.palette();
+    return palette.map(([r, g, b]) => argbFromRgb(r, g, b)).slice(0, amount);
+  } catch (err) {
+    console.error(err);
+    return [];
+  }
 }
 
 // Original function: https://github.com/material-foundation/material-color-utilities/blob/be615fc90286787bbe0c04ef58a6987e0e8fdc29/typescript/utils/image_utils.ts#L29
@@ -33,10 +43,14 @@ export async function sourceColorFromImage(
   amount: number = 3,
   grid?: Array<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9>,
 ) {
+  const isPartialImage = grid && grid.length > 0 && grid.length < 9;
+
   // Convert Image data to Pixel Array
   const imageBytes = await new Promise<Uint8ClampedArray>((resolve, reject) => {
     const canvas = document.createElement("canvas");
-    const context = canvas.getContext("2d");
+    const context = canvas.getContext("2d", {
+      willReadFrequently: isPartialImage,
+    });
     if (!context) {
       reject(new Error("Could not get canvas context"));
       return;
@@ -46,7 +60,7 @@ export async function sourceColorFromImage(
       canvas.height = image.height;
       context.drawImage(image, 0, 0);
 
-      if (grid) {
+      if (isPartialImage) {
         const cellWidth = image.width / 3;
         const cellHeight = image.height / 3;