add: show annotations

windingwind · Jul 16, 2022 · cdf8757 · cdf8757
1 parent 52cf1db
commit cdf8757
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 10 deletions.
diff --git a/addon/chrome/content/preferences.xul b/addon/chrome/content/preferences.xul
@@ -8,6 +8,7 @@
       <preferences id="zotero-preferences-__addonRef__">
         <preference id="pref-__addonRef__-enable" name="extensions.zotero.__addonRef__.enable" type="bool" />
         <preference id="pref-__addonRef__-autoPreview" name="extensions.zotero.__addonRef__.autoPreview" type="bool" />
+        <preference id="pref-__addonRef__-showAnnotations" name="extensions.zotero.__addonRef__.showAnnotations" type="bool" />
         <preference id="pref-__addonRef__-darkMode" name="extensions.zotero.__addonRef__.darkMode" type="bool" />
         <preference id="pref-__addonRef__-previewPageNum" name="extensions.zotero.__addonRef__.previewPageNum" type="string" />
         <preference id="pref-__addonRef__-previewTabName" name="extensions.zotero.__addonRef__.previewTabName" type="string" />
@@ -19,6 +20,9 @@
         <row>
           <checkbox id="zotero-prefpane-__addonRef__-settings-autoPreview" preference="pref-__addonRef__-autoPreview" label="&zotero.__addonRef__.pref.autoPreview.label;" />
         </row>
+        <row>
+          <checkbox id="zotero-prefpane-__addonRef__-settings-showAnnotations" preference="pref-__addonRef__-showAnnotations" label="&zotero.__addonRef__.pref.showAnnotations.label;" />
+        </row>
         <row>
           <checkbox id="zotero-prefpane-__addonRef__-settings-darkMode" preference="pref-__addonRef__-darkMode" label="&zotero.__addonRef__.pref.darkMode.label;" />
         </row>

diff --git a/addon/chrome/content/previewPDF.html b/addon/chrome/content/previewPDF.html
@@ -36,10 +36,12 @@
     <script>
       var itemID = -1;
       var pdf;
-      function renderPage(currentPdf, pageNumber, canvas, width) {
+      function renderPage(currentPdf, pageNumber, canvas, width, annotations) {
         currentPdf.getPage(pageNumber).then(function (page) {
           const W = page.view[2];
-          viewport = page.getViewport({ scale: width / W });
+          const H = page.view[3];
+          const totalScale = width / W;
+          viewport = page.getViewport({ scale: totalScale });
           const ctx = canvas.getContext("2d");
           const dpr = window.devicePixelRatio || 1;
           const bsr =
@@ -56,14 +58,64 @@
           canvas.style.height = viewport.height + "px";
           ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
           console.log("Rendering", pageNumber);
-          page.render({
-            canvasContext: ctx,
-            viewport: viewport,
-          });
+          page
+            .render({
+              canvasContext: ctx,
+              viewport: viewport,
+            })
+            .promise.then(() => {
+              // Render annotations
+              for (const annot of annotations) {
+                _ctx = canvas.getContext("2d");
+                _ctx.globalAlpha = 0.5;
+                _ctx.fillStyle = annot.color;
+                _ctx.strokeStyle = annot.color;
+                if (annot.type === "highlight") {
+                  // Rectangle
+                  for (rect of annot.position.rects) {
+                    _ctx.fillRect(
+                      rect[0] * totalScale,
+                      (H - rect[3]) * totalScale,
+                      (rect[2] - rect[0]) * totalScale,
+                      (rect[3] - rect[1]) * totalScale
+                    );
+                  }
+                } else if (annot.type === "image" || annot.type === "note") {
+                  // Box
+                  for (rect of annot.position.rects) {
+                    _ctx.strokeRect(
+                      rect[0] * totalScale,
+                      (H - rect[3]) * totalScale,
+                      (rect[2] - rect[0]) * totalScale,
+                      (rect[3] - rect[1]) * totalScale
+                    );
+                  }
+                } else if (annot.type === "ink") {
+                  // Lines
+                  _ctx.lineWidth = annot.position.width;
+                  _ctx.lineCap = "round";
+                  _ctx.lineJoin = "round";
+                  _ctx.beginPath();
+                  _ctx.moveTo(
+                    annot.position.paths[0][0] * totalScale,
+                    (H - annot.position.paths[1][0]) * totalScale
+                  );
+                  for (i = 1; i < annot.position.paths[0].length; i++) {
+                    _ctx.lineTo(
+                      annot.position.paths[0][i] * totalScale,
+                      (H - annot.position.paths[1][i]) * totalScale
+                    );
+                  }
+                  _ctx.stroke();
+                } else {
+                  continue;
+                }
+              }
+            });
         });
       }
 
-      async function renderPreview(id, width) {
+      async function renderPreview(id, width, annotations) {
         // let item = Zotero.PDFPreview.preview.item;
         // Block other possible renders
         Zotero.PDFPreview.preview._loadingPromise = Zotero.Promise.defer();
@@ -88,10 +140,14 @@
               console.log(id, itemID, "Eraly stop rendering");
               break;
             }
+            const currentAnnotations = annotations.filter(
+              (annot) => Number(annot.pageLabel) === i
+            );
+            console.log(annotations, currentAnnotations);
             canvas = document.createElement("canvas");
             canvas.className = "pdf-page-canvas flexPage";
             viewer.appendChild(canvas);
-            renderPage(pdf, i, canvas, width);
+            renderPage(pdf, i, canvas, width, currentAnnotations);
           }
           Zotero.PDFPreview.preview._loadingPromise.resolve();
         } catch (e) {
@@ -114,7 +170,7 @@
             delete e.data.buffer;
             itemID = e.data.itemID;
           }
-          renderPreview(e.data.itemID, e.data.width);
+          renderPreview(e.data.itemID, e.data.width, e.data.annotations);
         }
       }
 

diff --git a/addon/chrome/locale/en-US/overlay.dtd b/addon/chrome/locale/en-US/overlay.dtd
@@ -1,6 +1,7 @@
 <!ENTITY zotero.__addonRef__.pref.label "Preview">
 <!ENTITY zotero.__addonRef__.pref.enable.label "Enable Preview">
 <!ENTITY zotero.__addonRef__.pref.autoPreview.label "Auto Focus Preview Tab">
+<!ENTITY zotero.__addonRef__.pref.showAnnotations.label "Show Annotations">
 <!ENTITY zotero.__addonRef__.pref.darkMode.label "Dark Mode">
 <!ENTITY zotero.__addonRef__.pref.previewPageNumBefore.label "Preview First">
 <!ENTITY zotero.__addonRef__.pref.previewPageNumAfter.label "Pages">

diff --git a/addon/chrome/locale/zh-CN/overlay.dtd b/addon/chrome/locale/zh-CN/overlay.dtd
@@ -1,6 +1,7 @@
 <!ENTITY zotero.__addonRef__.pref.label "预览">
 <!ENTITY zotero.__addonRef__.pref.enable.label "启用预览">
 <!ENTITY zotero.__addonRef__.pref.autoPreview.label "自动选中预览">
+<!ENTITY zotero.__addonRef__.pref.showAnnotations.label "显示注释">
 <!ENTITY zotero.__addonRef__.pref.darkMode.label "黑暗模式">
 <!ENTITY zotero.__addonRef__.pref.previewPageNumBefore.label "预览前">
 <!ENTITY zotero.__addonRef__.pref.previewPageNumAfter.label "页">

diff --git a/addon/defaults/preferences/defaults.js b/addon/defaults/preferences/defaults.js
@@ -1,5 +1,6 @@
 pref("extensions.zotero.pdfpreview.enable", true);
 pref("extensions.zotero.pdfpreview.autoPreview", false);
+pref("extensions.zotero.pdfpreview.showAnnotations", false);
 pref("extensions.zotero.pdfpreview.darkMode", false);
 pref("extensions.zotero.pdfpreview.previewPageNum", "10");
 pref("extensions.zotero.pdfpreview.previewTabName", "Preview");
diff --git a/src/preview.ts b/src/preview.ts
@@ -1,5 +1,17 @@
 import { AddonBase } from "./base";
 
+class Annotation {
+  type: string;
+  position: any;
+  color: string;
+  pageLabel: string;
+  constructor(type, position, color, pageLabel) {
+    this.type = type;
+    this.position = position;
+    this.color = color;
+    this.pageLabel = pageLabel;
+  }
+}
 class AddonPreview extends AddonBase {
   item: ZoteroItem;
   _initPromise: any;
@@ -90,6 +102,19 @@ class AddonPreview extends AddonBase {
           itemID: this.item.id,
           buffer: await this.getBuffer(),
           width: width - 40,
+          annotations: Zotero.Prefs.get("pdfpreview.showAnnotations")
+            ? item
+                .getAnnotations()
+                .map(
+                  (i) =>
+                    new Annotation(
+                      i.annotationType,
+                      JSON.parse(i.annotationPosition),
+                      i.annotationColor,
+                      i.annotationPageLabel
+                    )
+                )
+            : [],
         },
         "*"
       );

diff --git a/typing/global.d.ts b/typing/global.d.ts
@@ -82,7 +82,6 @@ declare const OS: {
 declare const NetUtil: { [attr: string]: any };
 
 declare interface ZoteroItem {
-  getFilePathAsync(): any;
   id: number;
   isRegularItem: () => boolean;
   isNote: () => boolean;
@@ -121,11 +120,15 @@ declare interface ZoteroItem {
   getNotes: () => ZoteroItem[];
   getCollections: () => number[];
   getAttachments: () => number[];
+  getAnnotations(): ZoteroItem[];
+  getFilePathAsync(): any;
   getTags: () => { tag: string; type: number }[];
   annotationType?: string;
   annotationComment?: string;
   annotationText?: string;
   annotationPosition: string;
+  annotationPageLabel: any;
+  annotationColor: any;
   save: (obj?: any) => Promise<void>;
   saveTx: (obj?: any) => Promise<void>;
   addToCollection(id: number);