Make color_utils more minimal

src/display/canvas.js

@@ -28,7 +28,7 @@ import {
   warn,
 } from "../shared/util.js";
 import { getShadingPattern, TilingPattern } from "./pattern_helper.js";
-import { modifyColor, parseRGB } from "./color_utils.js";
+import { modifyColor } from "./color_utils.js";
 
 // <canvas> contexts store most of the state we need natively.
 // However, PDF needs a bit more state, which we store here.
@@ -2184,12 +2184,7 @@ const CanvasGraphics = (function CanvasGraphicsClosure() {
       // which is something that the modifier doesn't really modify well.
       if (this.current.darkMode) {
         if (r === 255 && g === 255 && b === 255) {
-          const {
-            r: rf,
-            g: gf,
-            b: bf,
-          } = parseRGB(this.current.backgroundColor);
-          color = Util.makeHexColor(rf, gf, bf);
+          color = this.current.backgroundColor;
         } else {
           color = Util.makeHexColor(...modifyColor({ r, g, b }));
         }

src/display/color_utils.js

@@ -14,69 +14,26 @@
  */
 
 const colorModificationCache = new Map();
-
 const rgbCacheKeys = ["r", "g", "b"];
-const themeCacheKeys = ["brightness", "contrast", "sepia"];
-
-function getCacheId(rgb, theme) {
-  return rgbCacheKeys
-    .map(k => rgb[k])
-    .concat(themeCacheKeys.map(k => theme[k]))
-    .join(";");
-}
-
-function getNumbersFromString(str, splitter, range, units) {
-  const raw = str.split(splitter).filter(x => x);
-  const unitsList = Object.entries(units);
-  const numbers = raw
-    .map(r => r.trim())
-    .map((r, i) => {
-      let n;
-      const unit = unitsList.find(([u]) => r.endsWith(u));
-      if (unit) {
-        n =
-          (parseFloat(r.substring(0, r.length - unit[0].length)) / unit[1]) *
-          range[i];
-      } else {
-        n = parseFloat(r);
-      }
-      if (range[i] > 1) {
-        return Math.round(n);
-      }
-      return n;
-    });
-  return numbers;
-}
-
-const rgbSplitter = /rgba?|\(|\)|\/|,|\s/gi;
-const rgbRange = [255, 255, 255, 1];
-const rgbUnits = { "%": 100 };
 
-function parseRGB($rgb) {
-  const [r, g, b, a = 1] = getNumbersFromString(
-    $rgb,
-    rgbSplitter,
-    rgbRange,
-    rgbUnits
-  );
-  return { r, g, b, a };
+function getCacheId(rgb) {
+  return rgbCacheKeys.map(k => rgb[k]).join(";");
 }
 
-function modifyColorWithCache(rgb, theme) {
-  const id = getCacheId(rgb, theme);
+function modifyColorWithCache(rgb) {
+  const id = getCacheId(rgb);
   if (colorModificationCache.has(id)) {
     return colorModificationCache.get(id);
   }
-  const matrix = createFilterMatrix(theme);
-  const { r, g, b } = rgb;
-  const [rf, gf, bf] = applyColorMatrix([r, g, b], matrix);
+  const matrix = createFilterMatrix();
+  const [r, g, b] = applyColorMatrix(id.split(";"), matrix);
 
-  colorModificationCache.set(id, [rf, gf, bf]);
-  return [rf, gf, bf];
+  colorModificationCache.set(id, [r, g, b]);
+  return [r, g, b];
 }
 
 function modifyColor(rgb) {
-  return modifyColorWithCache(rgb, { mode: 1, sepia: 15, brightness: 80 });
+  return modifyColorWithCache(rgb);
 }
 
 function clamp(value, min, max) {
@@ -89,20 +46,11 @@ function applyColorMatrix([r, g, b], matrix) {
   return [0, 1, 2].map(i => clamp(Math.round(result[i][0] * 255), 0, 255));
 }
 
-function createFilterMatrix(config) {
+const BRIGHTNESS_VALUE = 80;
+function createFilterMatrix() {
   let m = Matrix.identity();
-  if (config.sepia && config.sepia !== 0) {
-    m = multiplyMatrices(m, Matrix.sepia(config.sepia / 100));
-  }
-  if (config.contrast && config.contrast !== 100) {
-    m = multiplyMatrices(m, Matrix.contrast(config.contrast / 100));
-  }
-  if (config.brightness && config.brightness !== 100) {
-    m = multiplyMatrices(m, Matrix.brightness(config.brightness / 100));
-  }
-  if (config.mode && config.mode === 1) {
-    m = multiplyMatrices(m, Matrix.invertNHue());
-  }
+  m = multiplyMatrices(m, Matrix.brightness(BRIGHTNESS_VALUE / 100));
+  m = multiplyMatrices(m, Matrix.invertNHue());
   return m;
 }
 
@@ -136,45 +84,6 @@ const Matrix = {
       [0, 0, 0, 0, 1],
     ];
   },
-
-  contrast(v) {
-    const t = (1 - v) / 2;
-    return [
-      [v, 0, 0, 0, t],
-      [0, v, 0, 0, t],
-      [0, 0, v, 0, t],
-      [0, 0, 0, 1, 0],
-      [0, 0, 0, 0, 1],
-    ];
-  },
-
-  sepia(v) {
-    return [
-      [
-        0.393 + 0.607 * (1 - v),
-        0.769 - 0.769 * (1 - v),
-        0.189 - 0.189 * (1 - v),
-        0,
-        0,
-      ],
-      [
-        0.349 - 0.349 * (1 - v),
-        0.686 + 0.314 * (1 - v),
-        0.168 - 0.168 * (1 - v),
-        0,
-        0,
-      ],
-      [
-        0.272 - 0.272 * (1 - v),
-        0.534 - 0.534 * (1 - v),
-        0.131 + 0.869 * (1 - v),
-        0,
-        0,
-      ],
-      [0, 0, 0, 1, 0],
-      [0, 0, 0, 0, 1],
-    ];
-  },
 };
 
 function multiplyMatrices(m1, m2) {
@@ -192,4 +101,4 @@ function multiplyMatrices(m1, m2) {
   return result;
 }
 
-export { modifyColor, parseRGB };
+export { modifyColor };