Skip to content

Commit

Permalink
fixes: update annotation model to get all LocatorExtended saved and r…
Browse files Browse the repository at this point in the history 
…emove name properties
  • Loading branch information
@panaC
panaC committed Sep 12, 2023
1 parent 62ca7dc commit cede5ea
Show file tree
Hide file tree
Showing 5 changed files with 66 additions and 88 deletions.
11 changes: 6 additions & 5 deletions src/common/redux/states/annotation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,19 @@
// that can be found in the LICENSE file exposed on Github (readium) in the project repository.
// ==LICENSE-END==

import { IHighlightDefinition } from "@r2-navigator-js/electron/common/highlight";
import { LocatorExtended } from "@r2-navigator-js/electron/renderer";
import { IColor } from "r2-navigator-js/dist/es8-es2017/src/electron/common/highlight";
import { TPQueueState } from "readium-desktop/utils/redux-reducers/pqueue.reducer";

export type TAnnotationState = TPQueueState<number, IAnnotationState>;

export interface IAnnotationState {
uuid: string;
name: string; // like bookmark name
comment: string; // describe annotation mark
hash: string; // sha256 ( `${href}:${JSON.stringify(def)}` ))
href: string; // from IHighlightHandlerState
def: IHighlightDefinition; // from IHighlightHandlerState
// def: IHighlightDefinition; // from IHighlightHandlerState
def: LocatorExtended;
color: IColor
}

export type IAnnotationStateWithoutUUID = Partial<Pick<IAnnotationState, "uuid">> & Pick<IAnnotationState, "name" | "comment" | "def" | "hash" | "href">;
export type IAnnotationStateWithoutUUID = Partial<Pick<IAnnotationState, "uuid">> & Pick<IAnnotationState, "comment" | "def" | "hash" | "color">;
8 changes: 4 additions & 4 deletions src/renderer/reader/components/ReaderMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -562,19 +562,19 @@ export class ReaderMenu extends React.Component<IProps, IState> {
tabIndex={0}
onClick={(e) => {
const closeNavPanel = e.shiftKey && e.altKey ? false : true;
this.goToLocator(e, this.createLocatorLink(annotation.href, annotation.def.selectionInfo.rangeInfo), closeNavPanel);
this.goToLocator(e, this.createLocatorLink(annotation.def.locator.href, annotation.def.selectionInfo.rangeInfo), closeNavPanel);
this.props.focusAnnotationHighlight(annotation);
}}
onDoubleClick={(e) => {
this.goToLocator(e, this.createLocatorLink(annotation.href, annotation.def.selectionInfo.rangeInfo), false);
this.goToLocator(e, this.createLocatorLink(annotation.def.locator.href, annotation.def.selectionInfo.rangeInfo), false);
this.props.focusAnnotationHighlight(annotation);
}}
onKeyPress=
{
(e) => {
if (e.key === "Enter" || e.key === "Space") {
const closeNavPanel = e.shiftKey && e.altKey ? false : true;
this.goToLocator(e, this.createLocatorLink(annotation.href, annotation.def.selectionInfo.rangeInfo), closeNavPanel);
this.goToLocator(e, this.createLocatorLink(annotation.def.locator.href, annotation.def.selectionInfo.rangeInfo), closeNavPanel);
this.props.focusAnnotationHighlight(annotation);
}
}
Expand All @@ -583,7 +583,7 @@ export class ReaderMenu extends React.Component<IProps, IState> {
<SVG ariaHidden={true} svg={BookmarkIcon} />

<div className={stylesReader.chapter_marker}>
<p className={stylesReader.bookmark_name} title={annotation.name}>{annotation.name}</p>
<p className={stylesReader.bookmark_name} title={annotation.def.selectionInfo.cleanText.slice(0, 20)}>{annotation.def.selectionInfo.cleanText.slice(0, 20)}</p>
</div>
</button>
<button title={ __("reader.marks.delete")}
Expand Down
28 changes: 9 additions & 19 deletions src/renderer/reader/components/picker/Annotation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
import * as React from "react";
import { connect } from "react-redux";
import { IReaderRootState } from "readium-desktop/common/redux/states/renderer/readerRootState";
import { TChangeEventOnInput, TChangeEventOnTextArea } from "readium-desktop/typings/react";
import { TChangeEventOnTextArea } from "readium-desktop/typings/react";
import { TDispatch } from "readium-desktop/typings/redux";
import { readerLocalActionAnnotationUI, readerLocalActionAnnotations, readerLocalActionPicker } from "../../redux/actions";
import { IColor } from "@r2-navigator-js/electron/common/highlight";
Expand Down Expand Up @@ -36,8 +36,6 @@ class AnnotationPicker extends React.Component<IProps, IState> {

return (
<form id="myForm" style={{ display: "block" }}>
<input type="text" id="name" name="name" value={this.props.annotation.name} maxLength={20} style={{ width: "100px" }} onChange={this.nameChange} />

<button className="color-button" style={{ width: "20px", height: "20px", backgroundColor: "red", border: "none", margin: "5px", cursor: "pointer" }} onClick={(e) => (e.preventDefault(), this.colorChange("red"))}></button>
<button className="color-button" style={{ width: "20px", height: "20px", backgroundColor: "green", border: "none", margin: "5px", cursor: "pointer" }} onClick={(e) => (e.preventDefault(), this.colorChange("green"))}></button>
<button className="color-button" style={{ width: "20px", height: "20px", backgroundColor: "blue", border: "none", margin: "5px", cursor: "pointer" }} onClick={(e) => (e.preventDefault(), this.colorChange("blue"))}></button>
Expand All @@ -51,22 +49,15 @@ class AnnotationPicker extends React.Component<IProps, IState> {
);
};

private nameChange = (e: TChangeEventOnInput) => {
const v = e.target.value;
const { comment, color, newFocusAnnotationUUID: uuid } = this.props.annotation;

this.props.updateAnnotationPicker(v, comment, color, uuid);
};

private commentChange = (e: TChangeEventOnTextArea) => {
const v = e.target.value;
const { name, color, newFocusAnnotationUUID: uuid } = this.props.annotation;
const { color, newFocusAnnotationUUID: uuid } = this.props.annotation;

this.props.updateAnnotationPicker(name, v, color, uuid);
this.props.updateAnnotationPicker(v, color, uuid);
};

private colorChange = (localColor: "red" | "green" | "blue" | "yellow") => {
const { name, comment, newFocusAnnotationUUID: uuid } = this.props.annotation;
const { comment, newFocusAnnotationUUID: uuid } = this.props.annotation;

let color: IColor;
switch (localColor) {
Expand Down Expand Up @@ -108,7 +99,7 @@ class AnnotationPicker extends React.Component<IProps, IState> {
}
}

this.props.updateAnnotationPicker(name, comment, color, uuid);
this.props.updateAnnotationPicker(comment, color, uuid);
};

}
Expand All @@ -122,18 +113,17 @@ const mapStateToProps = (state: IReaderRootState, _props: IBaseProps) => {
};

const mapDispatchToProps = (dispatch: TDispatch) => ({
updateAnnotationPicker: (name: string, comment: string, color: IColor, uuid: string) => {
dispatch(readerLocalActionAnnotationUI.picker.build(name, comment, Object.assign({}, color), uuid));
updateAnnotationPicker: (comment: string, color: IColor, uuid: string) => {
dispatch(readerLocalActionAnnotationUI.picker.build(comment, Object.assign({}, color), uuid));
},
deleteAnnotation: (annotation: IAnnotationState) => {
dispatch(readerLocalActionPicker.manager.build(false));
dispatch(readerLocalActionAnnotations.pop.build(annotation));
},
updateAnnotation: (updatedState: IAnnotationUserInterfaceState, annotation: IAnnotationState) => {
const { color, name, comment } = updatedState;
annotation.def.color = { red: color.red, green: color.green, blue: color.blue };
const { color, comment } = updatedState;
annotation.color = { red: color.red, green: color.green, blue: color.blue };
annotation.comment = comment;
annotation.name = name;
dispatch(readerLocalActionAnnotations.update.build(annotation));
},
});
Expand Down
3 changes: 1 addition & 2 deletions src/renderer/reader/redux/actions/annotationUI/picker.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,12 @@ export const ID = "READER_ANNOTATION_UPDATE_PICKER";
interface IPayload extends Partial<IAnnotationUserInterfaceState> {
}

export function build(name: string, comment: string, color: IColor, uuid: string):
export function build(comment: string, color: IColor, uuid: string):
Action<typeof ID, IPayload> {

return {
type: ID,
payload: {
name,
comment,
color,
newFocusAnnotationUUID: uuid,
Expand Down
Loading

0 comments on commit cede5ea

Please sign in to comment.