links are clickable now

core/assets/js/pdf_viewer.js

@@ -47,7 +47,7 @@ export const PDFViewer = {
   renderPage(width, pageNum) {
     console.log("[PDFViewer] Render page", pageNum);
     this.pdf.getPage(pageNum).then(
-      (page) => {
+      async (page) => {
         var scale = window.devicePixelRatio;
         var viewport = page.getViewport({ scale: scale });
         if (width < viewport.width) {
@@ -62,6 +62,42 @@ export const PDFViewer = {
         const context = canvas.getContext("2d");
         page.render({ canvasContext: context, viewport: viewport });
 
+        // Make annotations clickable
+        const annotations = await page.getAnnotations()
+
+        function translateEventCoordinatesToPdfViewport(canvas, x ,y) {
+          const rect = canvas.getBoundingClientRect();
+          const newx = (x - rect.left) / scale;
+          const newy = (-1 * (y - rect.bottom)) / scale;
+          return {x: newx, y: newy}
+        }
+
+        canvas.addEventListener("click", (event) => {
+          const {x, y} = translateEventCoordinatesToPdfViewport(canvas, event.clientX, event.clientY)
+          for (let annotation of annotations) {
+            const rect  = annotation.rect
+            if (x > rect[0] && x < rect[2] && y > rect[1] && y < rect[3]) {
+              if (annotation.url) {
+                window.open(annotation.url, "_blank");
+              }
+            }
+          }
+        });
+
+        canvas.addEventListener("mousemove", (event) => {
+          const {x, y} = translateEventCoordinatesToPdfViewport(canvas, event.clientX, event.clientY)
+          for (let annotation of annotations) {
+            const rect  = annotation.rect
+            if (x > rect[0] && x < rect[2] && y > rect[1] && y < rect[3]) {
+              canvas.style.cursor = "pointer"
+              break
+            } else {
+              canvas.style.cursor = "default"
+            }
+          }
+        })
+
+
         this.renderPage(width, pageNum + 1);
       },
       () => {