Darken ink and text annotation color when rendering

zotero · Nov 17, 2023 · c348923 · c348923
1 parent 6e226a2
commit c348923
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 5 deletions.
diff --git a/src/common/defines.js b/src/common/defines.js
@@ -14,6 +14,8 @@ export let EXTRA_INK_AND_TEXT_COLORS = [
 	['general.black', '#000000']
 ];
 
+export const DARKEN_INK_AND_TEXT_COLOR = 5; // percent
+
 // https://developer.mozilla.org/en-US/docs/Web/CSS/system-color
 //export let SELECTION_COLOR = navigator.platform.includes('Mac') ? '#71ADFD' : 'Highlight';
 // TEMP: Use Mac color everywhere, since Highlight is too dark on Windows without opacity

diff --git a/src/pdf/lib/utilities.js b/src/pdf/lib/utilities.js
@@ -507,3 +507,25 @@ export function getRotationDegrees(m) {
 	let degrees = theta * (180 / Math.PI);
 	return normalizeDegrees(degrees);
 }
+
+export function hexToRgb(hex) {
+	let r = parseInt(hex.slice(1, 3), 16),
+		g = parseInt(hex.slice(3, 5), 16),
+		b = parseInt(hex.slice(5, 7), 16);
+	return `rgb(${r}, ${g}, ${b})`;
+}
+
+export function rgbToHex(r, g, b) {
+	return "#" + [r, g, b].map(x => {
+		let hex = x.toString(16);
+		return hex.length === 1 ? "0" + hex : hex;
+	}).join('');
+}
+
+export function darkenHex(hex, percent) {
+	let [r, g, b] = hexToRgb(hex).match(/\d+/g).map(Number);
+	r = Math.max(0, r * (1 - percent / 100));
+	g = Math.max(0, g * (1 - percent / 100));
+	b = Math.max(0, b * (1 - percent / 100));
+	return rgbToHex(Math.round(r), Math.round(g), Math.round(b));
+}
diff --git a/src/pdf/page.js b/src/pdf/page.js
@@ -8,8 +8,9 @@ import {
 	getRotationDegrees,
 	normalizeDegrees
 } from './lib/utilities';
-import { MIN_IMAGE_ANNOTATION_SIZE, SELECTION_COLOR } from '../common/defines';
+import { DARKEN_INK_AND_TEXT_COLOR, MIN_IMAGE_ANNOTATION_SIZE, SELECTION_COLOR } from '../common/defines';
 import { getRectRotationOnText } from './selection';
+import { darkenHex } from './lib/utilities';
 
 export default class Page {
 	constructor(layer, originalPage) {
@@ -335,7 +336,7 @@ export default class Page {
 		let position = this.p2v(annotation.position);
 		this.actualContext.save();
 		this.actualContext.beginPath();
-		this.actualContext.strokeStyle = annotation.color;
+		this.actualContext.strokeStyle = darkenHex(annotation.color, DARKEN_INK_AND_TEXT_COLOR);
 		this.actualContext.lineWidth = position.width;
 		this.actualContext.lineCap = 'round';
 		this.actualContext.lineJoin = 'round';
@@ -404,7 +405,7 @@ export default class Page {
 					`min-height: calc(${position.fontSize}px * var(--scale-factor))`,
 					`width: calc(${width}px * var(--scale-factor))`,
 					`height: calc(${height}px * var(--scale-factor))`,
-					`color: ${annotation.color}`,
+					`color: ${darkenHex(annotation.color, DARKEN_INK_AND_TEXT_COLOR)}`,
 					`font-size: calc(${position.fontSize}px * var(--scale-factor))`,
 					`font-family: ${window.computedFontFamily}`
 				];

diff --git a/src/pdf/pdf-renderer.js b/src/pdf/pdf-renderer.js
@@ -1,5 +1,6 @@
-import { fitRectIntoRect, getPositionBoundingRect } from './lib/utilities';
+import { darkenHex, fitRectIntoRect, getPositionBoundingRect } from './lib/utilities';
 import { p2v } from './lib/coordinates';
+import { DARKEN_INK_AND_TEXT_COLOR } from '../common/defines';
 
 const SCALE = 4;
 const PATH_BOX_PADDING = 10; // pt
@@ -109,7 +110,7 @@ class PDFRenderer {
 			ctx.lineJoin = 'round';
 			ctx.lineWidth = position.width;
 			ctx.beginPath();
-			ctx.strokeStyle = color;
+			ctx.strokeStyle = darkenHex(color, DARKEN_INK_AND_TEXT_COLOR);
 			for (let path of position.paths) {
 				for (let i = 0; i < path.length - 1; i += 2) {
 					let x = path[i];