Fix(annotation): annotationEdit initialise to the last color,drawType…

… & force hex color comparaison to upper case (Fixes #2548 PR #2557)

src/common/rgb.ts

@@ -5,10 +5,24 @@
 // that can be found in the LICENSE file exposed on Github (readium) in the project repository.
 // ==LICENSE-END==
 
+import { IColor } from "./redux/states/renderer/annotation";
+
 export function rgbToHex(color: { red: number; green: number; blue: number }): string {
     const { red, green, blue } = color;
     const redHex = Math.min(255, Math.max(0, red)).toString(16).padStart(2, "0");
     const greenHex = Math.min(255, Math.max(0, green)).toString(16).padStart(2, "0");
     const blueHex = Math.min(255, Math.max(0, blue)).toString(16).padStart(2, "0");
-    return `#${redHex}${greenHex}${blueHex}`;
+    return `#${redHex}${greenHex}${blueHex}`.toUpperCase();
+}
+
+export function hexToRgb(hex: string): IColor | undefined {
+
+    const rgbresultmatch = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex.toLowerCase());
+    const colorObj = rgbresultmatch ? {
+        red: parseInt(rgbresultmatch[1], 16),
+        green: parseInt(rgbresultmatch[2], 16),
+        blue: parseInt(rgbresultmatch[3], 16),
+      } : undefined;
+
+    return colorObj;
 }

src/renderer/reader/components/AnnotationEdit.tsx

@@ -29,6 +29,7 @@ import classNames from "classnames";
 import { TextArea } from "react-aria-components";
 import { ComboBox, ComboBoxItem } from "readium-desktop/renderer/common/components/ComboBox";
 import { ObjectKeys } from "readium-desktop/utils/object-keys-values";
+import { hexToRgb, rgbToHex } from "readium-desktop/common/rgb";
 
 // import { readiumCSSDefaults } from "@r2-navigator-js/electron/common/readium-css-settings";
 
@@ -74,13 +75,12 @@ export const AnnotationEdit: React.FC<IProps> = (props) => {
 
     const displayFromReaderMenu = !!uuid;
     const [__] = useTranslator();
-    const { annotation_defaultColor, annotation_defaultDrawType } = useSelector((state: IReaderRootState) => state.reader.defaultConfig);
+    const { annotation_defaultColor, annotation_defaultDrawType } = useSelector((state: IReaderRootState) => state.reader.config);
 
     const { locatorExtended } = useSelector((state: IReaderRootState) => state.annotation);
     const annotationReaderState = useSelector((state: IReaderRootState) => state.reader.annotation);
 
-    const annotationStateDEFAULT: Omit<IAnnotationState, "uuid"> = { color: annotation_defaultColor, comment: "", drawType: annotation_defaultDrawType, locatorExtended };
-    let annotationState: typeof annotationStateDEFAULT = annotationStateDEFAULT;
+    let annotationState: IAnnotationState = { uuid: "", color: annotation_defaultColor, comment: "", drawType: annotation_defaultDrawType, locatorExtended };
     if (uuid) {
         const tpl = annotationReaderState.find(([, annotationState]) => annotationState.uuid === uuid);
         if (tpl) {
@@ -91,18 +91,13 @@ export const AnnotationEdit: React.FC<IProps> = (props) => {
         }
     }
 
-    const colorStr = `#${annotationState.color.red.toString(16).padStart(2, "0")}${annotationState.color.green.toString(16).padStart(2, "0")}${annotationState.color.blue.toString(16).padStart(2, "0")}`.toUpperCase();
+    const colorStr = rgbToHex(annotationState.color);
 
     const [colorSelected, setColor] = React.useState(colorStr);
 
     const dispatch = useDispatch();
 
-    const rgbresultmatch = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(colorSelected);
-    const colorObj = rgbresultmatch ? {
-        red: parseInt(rgbresultmatch[1], 16),
-        green: parseInt(rgbresultmatch[2], 16),
-        blue: parseInt(rgbresultmatch[3], 16),
-      } : annotationState.color;
+    const colorObj = hexToRgb(colorSelected) || annotationState.color;
 
     const previousColorSelected = React.useRef<IColor>(colorObj);
 

src/renderer/reader/components/ReaderMenu.tsx

@@ -751,6 +751,7 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU
         setTagArrayFilter(new Set(tagArrayFilterArrayDifference));
     }
 
+    // TODO: it could be better to separate the color set to a table outside of the view
     const annotationsColorsLight = [
         { hex: "#eb9694", name: `${__("reader.annotations.colors.red")}` },
         { hex: "#fad0c3", name: `${__("reader.annotations.colors.orange")}` },
@@ -761,6 +762,8 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU
         { hex: "#bed3f3", name: `${__("reader.annotations.colors.cyan")}` },
         { hex: "#d4c4fb", name: `${__("reader.annotations.colors.purple")}` },
     ];
+    // hex comparaison in Thorium is on upper case
+    annotationsColorsLight.forEach((obj) => obj.hex = obj.hex.toUpperCase());
 
     // I'm disable this feature for performance reason, push new Colors from incoming publicaiton annotation, not used for the moment. So let's commented it for the moment.
     // Need to be optimised in the future.