diff --git a/src/display/canvas.js b/src/display/canvas.js index f2898d2d67fc05..805ca0b78fcf3c 100644 --- a/src/display/canvas.js +++ b/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"; // 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 })); } diff --git a/src/display/color_utils.js b/src/display/color_utils.js index d97e51ada59d85..dbf99b58e8b35c 100644 --- a/src/display/color_utils.js +++ 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 };