Various fixes for annotator

2024-11-28 02:10:51 +01:00
parent 19e7603913
commit 985032b2fb
6 changed files with 49 additions and 41 deletions
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useFoliateEvents } from '../hooks/useFoliateEvents';
 import { BookDoc } from '@/libs/document';
 import { BookConfig, BookNote, BookSearchConfig, BookSearchResult } from '@/types/book';
@@ -72,7 +72,6 @@ const FoliateViewer: React.FC<{
 }> = ({ bookKey, bookDoc, config }) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const viewRef = useRef<FoliateView | null>(null);
-  const [viewInited, setViewInited] = useState(false);
  const isViewCreated = useRef(false);
  const isScrolling = useRef(false);
  const { getView, setView: setFoliateView, setProgress, getViewSettings } = useReaderStore();
@@ -214,7 +213,6 @@ const FoliateViewer: React.FC<{
      } else {
        await view.goToFraction(0);
      }
-      setViewInited(true);

      window.addEventListener('message', handleClickTurnPage);
    };
@@ -223,23 +221,6 @@ const FoliateViewer: React.FC<{
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

-  const initAnnotations = () => {
-    const { booknotes = [] } = config;
-    const annotations = booknotes.filter((item) => item.type === 'annotation' && item.style);
-    try {
-      Promise.all(annotations.map((annotation) => viewRef.current?.addAnnotation(annotation)));
-    } catch (e) {
-      console.error(e);
-    }
-  };
-
-  useEffect(() => {
-    if (viewInited) {
-      initAnnotations();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [viewInited]);
-
  return (
    <div
      className='foliate-viewer h-[100%] w-[100%]'
@@ -8,6 +8,7 @@ import { RiDeleteBinLine } from 'react-icons/ri';
 import { BsTranslate } from 'react-icons/bs';
 import { SiDeepl } from 'react-icons/si';

+import * as CFI from 'foliate-js/epubcfi.js';
 import { Overlayer } from 'foliate-js/overlayer.js';
 import { useEnv } from '@/context/EnvContext';
 import { BookNote, HighlightColor, HighlightStyle } from '@/types/book';
@@ -32,7 +33,6 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
  const { getProgress, getView, getViewsById } = useReaderStore();
  const { isNotebookPinned, isNotebookVisible } = useNotebookStore();
  const { setNotebookVisible, setNotebookNewAnnotation } = useNotebookStore();
-  const globalReadSettings = settings.globalReadSettings;
  const config = getConfig(bookKey)!;
  const progress = getProgress(bookKey)!;
  const bookData = getBookData(bookKey)!;
@@ -52,10 +52,10 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
  const [highlightOptionsVisible, setHighlightOptionsVisible] = useState(false);

  const [selectedStyle, setSelectedStyle] = useState<HighlightStyle>(
-    globalReadSettings.highlightStyle,
+    settings.globalReadSettings.highlightStyle,
  );
  const [selectedColor, setSelectedColor] = useState<HighlightColor>(
-    globalReadSettings.highlightStyles[selectedStyle],
+    settings.globalReadSettings.highlightStyles[selectedStyle],
  );

  const dictPopupWidth = 400;
@@ -177,9 +177,29 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
    return () => clearTimeout(timer);
  }, [toastMessage]);

+  useEffect(() => {
+    if (!progress) return;
+    const { location } = progress;
+    const start = CFI.collapse(location);
+    const end = CFI.collapse(location, true);
+    const { booknotes = [] } = config;
+    const annotations = booknotes.filter(
+      (item) =>
+        item.type === 'annotation' &&
+        item.style &&
+        CFI.compare(item.cfi, start) >= 0 &&
+        CFI.compare(item.cfi, end) <= 0,
+    );
+    try {
+      Promise.all(annotations.map((annotation) => view?.addAnnotation(annotation)));
+    } catch (e) {
+      console.error(e);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [progress]);
+
  const handleCopy = () => {
    if (!selection || !selection.text) return;
-    setShowAnnotPopup(false);
    setToastMessage('Copied to notebook');

    const { booknotes: annotations = [] } = config;
@@ -209,7 +229,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
    if (updatedConfig) {
      saveConfig(envConfig, bookKey, updatedConfig, settings);
    }
-    setHighlightOptionsVisible(false);
+    handleDismissPopupAndSelection();
    setNotebookVisible(true);
  };

@@ -220,8 +240,8 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
    const { sectionHref: href } = progress;
    const cfi = view?.getCFI(selection.index, selection.range);
    if (!cfi) return;
-    const style = globalReadSettings.highlightStyle;
-    const color = globalReadSettings.highlightStyles[style];
+    const style = settings.globalReadSettings.highlightStyle;
+    const color = settings.globalReadSettings.highlightStyles[style];
    const annotation: BookNote = {
      id: uniqueId(),
      type: 'annotation',
@@ -17,22 +17,27 @@ interface HighlightOptionsProps {

 const HighlightOptions: React.FC<HighlightOptionsProps> = ({
  style,
-  selectedStyle,
-  selectedColor,
+  selectedStyle: _selectedStyle,
+  selectedColor: _selectedColor,
  onHandleHighlight,
 }) => {
  const { settings, setSettings } = useSettingsStore();
  const globalReadSettings = settings.globalReadSettings;
+  const [selectedStyle, setSelectedStyle] = React.useState<HighlightStyle>(_selectedStyle);
+  const [selectedColor, setSelectedColor] = React.useState<HighlightColor>(_selectedColor);

  const handleSelectStyle = (style: HighlightStyle) => {
    globalReadSettings.highlightStyle = style;
    setSettings(settings);
+    setSelectedStyle(style);
+    setSelectedColor(globalReadSettings.highlightStyles[style]);
    onHandleHighlight(true);
  };
  const handleSelectColor = (color: HighlightColor) => {
    const style = globalReadSettings.highlightStyle;
    globalReadSettings.highlightStyles[style] = color;
    setSettings(settings);
+    setSelectedColor(color);
    onHandleHighlight(true);
  };
  return (
@@ -73,7 +73,7 @@ const NoteEditor: React.FC<NoteEditorProps> = ({ onSave, onEdit }) => {
          )}
          onClick={handleSaveNote}
        >
-          <div className='align-bottom text-blue-400'>Save</div>
+          <div className='pr-1 align-bottom text-xs text-blue-400'>Save</div>
        </button>
      </div>
      <div className='flex items-start pt-2'>
@@ -103,15 +103,17 @@ const BooknoteItem: React.FC<BooknoteItemProps> = ({ bookKey, item, editable = f
          onClick={(e) => e.stopPropagation()}
        >
          <div className='flex justify-end space-x-3'>
-            <button
-              className={clsx(
-                'btn btn-ghost settings-content hover:bg-transparent',
-                'flex h-4 min-h-4 items-end p-0',
-              )}
-              onClick={editNote.bind(null, item)}
-            >
-              <div className='align-bottom text-xs text-blue-400'>Edit</div>
-            </button>
+            {item.note && (
+              <button
+                className={clsx(
+                  'btn btn-ghost settings-content hover:bg-transparent',
+                  'flex h-4 min-h-4 items-end p-0',
+                )}
+                onClick={editNote.bind(null, item)}
+              >
+                <div className='align-bottom text-blue-400'>Edit</div>
+              </button>
+            )}
            <button
              className={clsx(
                'btn btn-ghost settings-content hover:bg-transparent',
@@ -119,7 +121,7 @@ const BooknoteItem: React.FC<BooknoteItemProps> = ({ bookKey, item, editable = f
              )}
              onClick={deleteNote.bind(null, item)}
            >
-              <div className='align-bottom text-xs text-red-400'>Delete</div>
+              <div className='align-bottom text-red-400'>Delete</div>
            </button>
          </div>
        </div>