From cef6698781926ca9fe2eb1920103093f54d1fc13 Mon Sep 17 00:00:00 2001 From: Pierre Leroux Date: Mon, 7 Oct 2024 12:35:25 +0200 Subject: [PATCH] first --- src/common/redux/reducers/creator.ts | 2 +- src/common/redux/states/creator.ts | 2 +- .../redux/states/renderer/annotation.ts | 3 + src/renderer/reader/components/ReaderMenu.tsx | 66 +++++++++++++++++-- src/renderer/reader/redux/sagas/annotation.ts | 8 +++ 5 files changed, 74 insertions(+), 7 deletions(-) diff --git a/src/common/redux/reducers/creator.ts b/src/common/redux/reducers/creator.ts index bb561e34b..f6ebd098c 100644 --- a/src/common/redux/reducers/creator.ts +++ b/src/common/redux/reducers/creator.ts @@ -44,7 +44,7 @@ try { } const initialState: IAnnotationCreator = { - id: uuidv4(), + id: "urn:uuid:" + uuidv4(), type: "Organization", name: username, }; diff --git a/src/common/redux/states/creator.ts b/src/common/redux/states/creator.ts index b40d286b0..2415cb80e 100644 --- a/src/common/redux/states/creator.ts +++ b/src/common/redux/states/creator.ts @@ -8,5 +8,5 @@ export interface IAnnotationCreator { id: string, type: "Organization" | "Person", - name: string, + name?: string, } diff --git a/src/common/redux/states/renderer/annotation.ts b/src/common/redux/states/renderer/annotation.ts index 473002950..1b9be84c7 100644 --- a/src/common/redux/states/renderer/annotation.ts +++ b/src/common/redux/states/renderer/annotation.ts @@ -8,6 +8,8 @@ import { MiniLocatorExtended } from "readium-desktop/common/redux/states/locatorInitialState"; import { TPQueueState } from "readium-desktop/utils/redux-reducers/pqueue.reducer"; +import { creatorActions } from "../../actions"; +import { IAnnotationCreator } from "../creator"; export interface IColor { red: number; @@ -25,6 +27,7 @@ export interface IAnnotationState { drawType: TDrawType; tags?: string[] | undefined; modified?: number; + creator?: IAnnotationCreator; } export type TAnnotationState = TPQueueState; diff --git a/src/renderer/reader/components/ReaderMenu.tsx b/src/renderer/reader/components/ReaderMenu.tsx index 69f1739a6..ec6870d98 100644 --- a/src/renderer/reader/components/ReaderMenu.tsx +++ b/src/renderer/reader/components/ReaderMenu.tsx @@ -683,6 +683,7 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU const [tagArrayFilter, setTagArrayFilter] = React.useState(new Set([])); const [colorArrayFilter, setColorArrayFilter] = React.useState(new Set([])); const [drawTypeArrayFilter, setDrawTypeArrayFilter] = React.useState(new Set([])); + const [creatorArrayFilter, setCreatorArrayFilter] = React.useState(new Set([])); let annotationList: TAnnotationState = []; let startPage = 1; @@ -690,14 +691,16 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU annotationList = (selectionIsSet(tagArrayFilter) && tagArrayFilter.size) || (selectionIsSet(colorArrayFilter) && colorArrayFilter.size) || - (selectionIsSet(drawTypeArrayFilter) && drawTypeArrayFilter.size) - ? annotationsQueue.filter(([, { tags, color, drawType }]) => { + (selectionIsSet(drawTypeArrayFilter) && drawTypeArrayFilter.size) || + (selectionIsSet(creatorArrayFilter) && creatorArrayFilter.size) + ? annotationsQueue.filter(([, { tags, color, drawType, creator }]) => { const colorHex = rgbToHex(color); return (!selectionIsSet(tagArrayFilter) || !tagArrayFilter.size || tags.some((tagsValueName) => tagArrayFilter.has(tagsValueName))) && (!selectionIsSet(colorArrayFilter) || !colorArrayFilter.size || colorArrayFilter.has(colorHex)) && - (!selectionIsSet(drawTypeArrayFilter) || !drawTypeArrayFilter.size || drawTypeArrayFilter.has(drawType)); + (!selectionIsSet(drawTypeArrayFilter) || !drawTypeArrayFilter.size || drawTypeArrayFilter.has(drawType)) && + (!selectionIsSet(creatorArrayFilter) || !creatorArrayFilter.size || creatorArrayFilter.has(creator?.id)); }) : annotationsQueue; @@ -732,6 +735,9 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU if (drawTypeArrayFilter !== "all" && !drawTypeArrayFilter.has(annotationFound.drawType) && drawTypeArrayFilter.size !== 0) { setDrawTypeArrayFilter(new Set([])); } + if (creatorArrayFilter !== "all" && !creatorArrayFilter.has(annotationFound.creator?.id) && creatorArrayFilter.size !== 0) { + setCreatorArrayFilter(new Set([])); + } } } resetAnnotationUUID(); @@ -800,6 +806,14 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU setTagArrayFilter(new Set(tagArrayFilterArrayDifference)); } + const creatorList = annotationList.map(([,{creator}]) => creator); + const creatorSet = creatorList.reduce>((acc, {id, name}) => { + if (!acc[id]) return {...acc, [id]: name || ""}; + return acc; + }, {}); + + const selectCreatorOptions = Object.entries(creatorSet).map(([k, v]) => ({ id: k, name: v })); + const annotationsColors = React.useMemo(() => Object.entries(annotationsColorsLight).map(([k, v]) => ({ hex: k, name: __(v) })), [__]); // 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. @@ -818,7 +832,11 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU { name: "outline", svg: TextOutlineIcon }, ]; - const nbOfFilters = ((tagArrayFilter === "all") ? selectTagOption.length : tagArrayFilter.size) + ((colorArrayFilter === "all") ? annotationsColors.length : colorArrayFilter.size) + ((drawTypeArrayFilter === "all") ? selectDrawtypesOptions.length : drawTypeArrayFilter.size); + const nbOfFilters = ((tagArrayFilter === "all") ? + selectTagOption.length : tagArrayFilter.size) + ((colorArrayFilter === "all") ? + annotationsColors.length : colorArrayFilter.size) + ((drawTypeArrayFilter === "all") ? + selectDrawtypesOptions.length : drawTypeArrayFilter.size) + ((creatorArrayFilter === "all") ? + selectCreatorOptions.length : creatorArrayFilter.size); return ( <> @@ -850,6 +868,7 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU setTagArrayFilter(new Set([])); setColorArrayFilter(new Set([])); setDrawTypeArrayFilter(new Set([])); + setCreatorArrayFilter(new Set([])); }} type="button"> {__("dialog.yes")} @@ -1028,7 +1047,44 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU - {(item) => } + {(item) => } + + + + +
+ + +
+ + +
+ + + {(item) => {item.name}}
diff --git a/src/renderer/reader/redux/sagas/annotation.ts b/src/renderer/reader/redux/sagas/annotation.ts index de0ccb570..5fc69d549 100644 --- a/src/renderer/reader/redux/sagas/annotation.ts +++ b/src/renderer/reader/redux/sagas/annotation.ts @@ -23,6 +23,8 @@ import { MiniLocatorExtended } from "readium-desktop/common/redux/states/locator import { HighlightDrawTypeBackground, HighlightDrawTypeOutline, HighlightDrawTypeStrikethrough, HighlightDrawTypeUnderline } from "@r2-navigator-js/electron/common/highlight"; import { IHighlightHandlerState } from "readium-desktop/common/redux/states/renderer/highlight"; import { diReaderGet } from "../../di"; +import { useSelector } from "readium-desktop/renderer/common/hooks/useSelector"; +import { ICommonRootState } from "readium-desktop/common/redux/states/commonRootState"; // Logger const debug = debug_("readium-desktop:renderer:reader:redux:sagas:annotation"); @@ -99,6 +101,8 @@ function* createAnnotation(locatorExtended: MiniLocatorExtended, color: IColor, // clean __selection global variable state __selectionInfoGlobal.locatorExtended = undefined; + const creator = useSelector((state: IReaderRootState) => state.creator); + debug(`Create an annotation for, [${locatorExtended.selectionInfo.cleanText.slice(0, 10)}]`); yield* put(readerActions.annotation.push.build({ color, @@ -106,6 +110,10 @@ function* createAnnotation(locatorExtended: MiniLocatorExtended, color: IColor, locatorExtended, drawType, tags, + creator: { + id: creator.id, + type: creator.type, // not used but required https://github.com/readium/annotations/?tab=readme-ov-file#11-creator + }, })); // sure! close the popover