From 0f589ec57e0cc74894b665229f5e227ebdece1a0 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Fri, 21 Jun 2024 13:44:41 +0200
Subject: [PATCH] signature: POC of showing PDF with pdfjs-dist

---
 .../public/vuejs/DocumentSignature/App.vue    | 53 +++++++++++++++----
 1 file changed, 42 insertions(+), 11 deletions(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index eab7d64aa..e4ed22cd6 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
@@ -6,16 +6,23 @@
       <button :disabled="page >= pageCount" @click="turnPage">❯</button>
     </span>
   </div>
-  <VuePdfEmbed :source="pdfSource" :page="page"/>
-  <!-- <canvas id="canvas"></canvas> -->
+  <!-- <VuePdfEmbed :source="pdfSource" :page="page"/> -->
+  <canvas id="canvas"></canvas>
 </template>
 
 <script setup lang="ts">
 import { ref, Ref } from "vue";
-import VuePdfEmbed from "vue-pdf-embed";
-import "vue-pdf-embed/dist/style/index.css";
+// import VuePdfEmbed from "vue-pdf-embed";
+// import "vue-pdf-embed/dist/style/index.css";
 import { SignatureZone } from "../../types";
-//import * as pdfjsLib from "pdfjs-dist";
+import * as pdfjsLib from "pdfjs-dist";
+
+// @ts-ignore
+import * as PdfWorker from 'pdfjs-dist/build/pdf.worker.mjs';
+pdfjsLib.GlobalWorkerOptions.workerSrc = import.meta.url + 'pdfjs-dist/build/pdf.worker.mjs';
+console.log(PdfWorker) // incredible but this is needed
+// import { PdfWorker } from 'pdfjs-dist/build/pdf.worker.mjs'
+// pdfjsLib.GlobalWorkerOptions.workerSrc = PdfWorker;
 
 import {
   build_download_info_link,
@@ -27,8 +34,6 @@ const pageCount: Ref<number> = ref(3); //TODO get page count from PDF loaded, ca
 let userSignatureZones = {} as SignatureZone;
 let pdfSource: Ref<string> = ref("");
 
-//console.log('signature', window.signature);
-
 const signature = {
   id: 1,
   // storedObject: {
@@ -81,6 +86,32 @@ const signature = {
 
 const urlInfo = build_download_info_link(signature.storedObject.filename);
 
+const showPdf = async (url: string) => {
+  const loadingTask = pdfjsLib.getDocument(url);
+  const pdf = await loadingTask.promise;
+
+  // Load information from the first page.
+  const page = await pdf.getPage(1);
+
+  const scale = 1;
+  const viewport = page.getViewport({ scale });
+
+  // Apply page dimensions to the `<canvas>` element.
+  const canvas = document.querySelectorAll("canvas")[0] as HTMLCanvasElement;
+  const context = canvas.getContext("2d") as CanvasRenderingContext2D;
+  canvas.height = viewport.height;
+  canvas.width = viewport.width;
+
+  // Render the page into the `<canvas>` element.
+  const renderContext = {
+    canvasContext: context,
+    viewport: viewport,
+  };
+  await page.render(renderContext);
+  console.log("Page rendered!");
+};
+
+
 async function download_and_open(): Promise<Blob> {
   let raw;
   try {
@@ -89,8 +120,8 @@ async function download_and_open(): Promise<Blob> {
       signature.storedObject.keyInfos,
       new Uint8Array(signature.storedObject.iv)
     );
-    pdfSource.value = URL.createObjectURL(raw);
-    setTimeout(() => init_pdf(), 2000); //TODO gestion async
+    await showPdf(URL.createObjectURL(raw));
+    init_pdf();
   } catch (e) {
     console.error("error while downloading and decrypting document", e);
     throw e;
@@ -99,13 +130,13 @@ async function download_and_open(): Promise<Blob> {
 }
 
 const init_pdf = () => {
-  const canvas = document.querySelectorAll("canvas")[0];
+  const canvas = document.querySelectorAll("canvas")[0] as HTMLCanvasElement;
   canvas.addEventListener(
     "pointerup",
     (e: PointerEvent) => canvas_click(e),
     false
   );
-  add_zones();
+  setTimeout(() => add_zones(), 200);
 };
 
 const canvas_click = (e: PointerEvent) => {