annotation on/off

src/common/redux/states/annotation.ts

@@ -14,7 +14,7 @@ export interface IAnnotationState {
     uuid: string;
     name: string; // like bookmark name
     comment: string; // describe annotation mark
-    hash: string; // sha256 ( base64 ( {href, def} ))
+    hash: string; // md5 ( `${href}:${JSON.stringify(def)}` ))
     href: string; // from IHighlightHandlerState
     def: IHighlightDefinition; // from IHighlightHandlerState
 }

src/renderer/reader/redux/sagas/annotation.ts

@@ -9,14 +9,30 @@ import { nanoid } from "nanoid";
 import { takeSpawnEvery } from "readium-desktop/common/redux/sagas/takeSpawnEvery";
 import { SagaIterator } from "redux-saga";
 
-import { readerLocalActionHighlights, readerLocalActionSetLocator } from "../actions";
+import { readerLocalActionAnnotationUI, readerLocalActionAnnotations, readerLocalActionHighlights, readerLocalActionSetLocator } from "../actions";
 import { IHighlightHandlerState } from "../state/highlight";
-import { all, put as putTyped } from "typed-redux-saga";
+import { all, put as putTyped, select as selectTyped, call as callTyped } from "typed-redux-saga";
+import { IReaderRootState } from "readium-desktop/common/redux/states/renderer/readerRootState";
+import { IAnnotationStateWithoutUUID } from "readium-desktop/common/redux/states/annotation";
+import { IHighlightDefinition } from "r2-navigator-js/dist/es8-es2017/src/electron/common/highlight";
 
-//
-// WIP
-// DEMO HIGHLIGHT HANDLER
-//
+function createAnnotationHighlightObj(href: string, def: IHighlightDefinition): IHighlightHandlerState {
+    const highlight: IHighlightHandlerState = {
+        uuid: nanoid(),
+        type: "annotation",
+        href,
+        def,
+    };
+    return highlight;
+}
+
+function* createAnnotationHighlightFromAnnotationPush(action: readerLocalActionAnnotations.push.TAction): SagaIterator {
+    const {
+        href,
+        def,
+    } = action.payload;
+    yield* putTyped(readerLocalActionHighlights.handler.push.build(createAnnotationHighlightObj(href, def)));
+}
 
 function* selectionInfoWatcher(action: readerLocalActionSetLocator.TAction): SagaIterator {
     const {
@@ -26,33 +42,76 @@ function* selectionInfoWatcher(action: readerLocalActionSetLocator.TAction): Sag
     } = action.payload;
 
     // 1. Check if annotation mode is enabled
+    if (!(yield* selectTyped((store: IReaderRootState) => store.annotation.enable))) {
+        return ;
+    }
 
+    const color = yield* selectTyped((store: IReaderRootState) => store.annotation.color);
 
     // 2. Check if it is a user selection and a new selection
     if (
         selectionInfo
         && selectionIsNew
     ) {
 
-        const def: IHighlightHandlerState = {
-            uuid: nanoid(),
-            type: "annotation",
-            href,
-            def: {
-                color: {
+        const def: IHighlightDefinition = {
+            color: color.red == 0 && color.green == 0 && color.red == 0
+                ? {
                     red: 255,
                     green: 0,
                     blue: 0,
-                },
-                selectionInfo,
-            },
+                }
+                : color,
+            selectionInfo,
         };
-        yield* putTyped(readerLocalActionHighlights.handler.push.build(def));
+        const annotation: IAnnotationStateWithoutUUID = {
+            name: "",
+            comment: "",
+            hash: yield* callTyped(() => crypto.subtle.digest("SHA-256", Buffer.from(`${href}:${JSON.stringify(def)}`))
+                .then((a) => Buffer.from(a).toString("hex"))),
+            href,
+            def,
+        }
+        yield* putTyped(readerLocalActionAnnotations.push.build(annotation));
     }
+
+    crypto.subtle.digest("SHA-256", Buffer.from(""));
+}
+
+function* annotationUIEnable(_action: readerLocalActionAnnotationUI.enable.TAction): SagaIterator {
+
+    // move all anotations from reader.annotations to reader.hightlight.handler
+    const annotations = yield* selectTyped((store: IReaderRootState) => store.reader.annotation.map(([, v]) => v));
+    const annotationHightlightArray = annotations.map(({href, def}) => createAnnotationHighlightObj(href, def));
+    yield* putTyped(readerLocalActionHighlights.handler.push.build(...annotationHightlightArray));
+}
+
+function* annotationUIDisable(_action: readerLocalActionAnnotationUI.enable.TAction): SagaIterator {
+
+    const highlights = yield* selectTyped((store: IReaderRootState) => store.reader.highlight.handler.map(([, v]) => v));
+    const highlightsAnnotation = highlights.filter((v) => v.type === "annotation");
+
+    // FYI: "Uncaught SyntaxError: Too many arguments in function call (only 65535 allowed)"
+    yield* putTyped(readerLocalActionHighlights.handler.pop.build(...highlightsAnnotation))
 }
 
 export const saga = () =>
     all([
+        takeSpawnEvery(
+            readerLocalActionAnnotationUI.cancel.ID,
+            annotationUIDisable,
+            (e) => console.log("readerLocalActionAnnotationUI.cancel", e),
+        ),
+        takeSpawnEvery(
+            readerLocalActionAnnotationUI.enable.ID,
+            annotationUIEnable,
+            (e) => console.log("readerLocalActionAnnotationUI.enable", e),
+        ),
+        takeSpawnEvery(
+            readerLocalActionAnnotations.push.ID,
+            createAnnotationHighlightFromAnnotationPush,
+            (e) => console.log("readerLocalActionAnnotations.push", e),
+        ),
         takeSpawnEvery(
             readerLocalActionSetLocator.ID,
             selectionInfoWatcher,

src/renderer/reader/redux/sagas/highlight/handler.ts

@@ -18,18 +18,31 @@ import {
     getHightlightClickChannel, mountHighlight, THighlightClick, unmountHightlight,
 } from "./mounter";
 
+/**
+ * 
+ * be careful when using it in parallel, there is a bug with action.payload (not duplicated).
+ * You must used it by passing highlights array in the first parameter
+ */
 function* push(action: readerLocalActionHighlights.handler.push.TAction) {
     if (action.payload) {
 
         const href = yield* selectTyped((store: IReaderRootState) => store.reader?.locator?.locator?.href);
+
+        // TODO: fix the bug with action.payload, need to copy object before to pass it to mountHighlight
         yield call(mountHighlight, href, action.payload);
     }
 }
 
+/**
+ * 
+ * be careful when using it in parallel, there is a bug with action.payload (not duplicated).
+ * You must used it by passing highlights array in the first parameter
+ */
 function* pop(action: readerLocalActionHighlights.handler.pop.TAction) {
     if (action.payload) {
 
         const href = yield* selectTyped((store: IReaderRootState) => store.reader?.locator?.locator?.href);
+        // TODO: same here
         yield call(unmountHightlight, href, action.payload);
     }
 }