From e55eb48f45f1b701679178400587237da86b3b09 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Tue, 28 Jan 2025 09:37:33 +0100
Subject: [PATCH] improve comments system

---
 public/site/plugins/classes/Position.php |  2 +-
 src/components/comments/Comment.vue      | 16 +++---
 src/components/comments/Comments.vue     |  8 +--
 src/components/project/PdfViewer.vue     | 15 +++---
 src/stores/dialog.js                     | 63 +++++++++++++++---------
 5 files changed, 63 insertions(+), 41 deletions(-)

diff --git a/public/site/plugins/classes/Position.php b/public/site/plugins/classes/Position.php
index 29c8dca..3e95783 100644
--- a/public/site/plugins/classes/Position.php
+++ b/public/site/plugins/classes/Position.php
@@ -22,7 +22,7 @@ class Position
     public function toArray() {
         $array = [];
 
-        if ($this->pageIndex) {
+        if (isset($this->pageIndex)) {
             $array["pageIndex"] = $this->pageIndex;
         }
 
diff --git a/src/components/comments/Comment.vue b/src/components/comments/Comment.vue
index 5803e9b..273386a 100644
--- a/src/components/comments/Comment.vue
+++ b/src/components/comments/Comment.vue
@@ -101,7 +101,7 @@ const route = useRoute();
 const userStore = useUserStore();
 const api = useApiStore();
 const dialog = useDialogStore();
-const { activeTracks, openedComment } = storeToRefs(useDialogStore());
+const { activeTracks, openedComment, vpvRef } = storeToRefs(useDialogStore());
 const draftText = ref(comment.text);
 const editField = ref(null);
 const commentNode = useTemplateRef("comment-node");
@@ -157,11 +157,15 @@ async function read() {
 }
 
 function scrollTo() {
-  const correspondingMarker = document.querySelector(
-    `.comment-marker[href="#comment-${comment.id}"]`
-  );
-  if (!correspondingMarker) return;
-  correspondingMarker.scrollIntoView();
+  vpvRef.value.goToPage(comment.position.pageIndex);
+  setTimeout(() => {
+    const correspondingMarker = document.querySelector(
+      `.comment-marker[href="#comment-${comment.id}"]`
+    );
+    console.log(correspondingMarker);
+    if (!correspondingMarker) return;
+    correspondingMarker.scrollIntoView();
+  }, 1000);
 }
 
 async function deleteComment(event) {
diff --git a/src/components/comments/Comments.vue b/src/components/comments/Comments.vue
index 24501cf..5a947b0 100644
--- a/src/components/comments/Comments.vue
+++ b/src/components/comments/Comments.vue
@@ -219,6 +219,7 @@ async function addComment(newComment) {
     /projects\/.*?(?=\/[^/]+\/[^/]+$)/
   );
   newComment.fileParentUri = matchFileParentUri ? matchFileParentUri[0] : null;
+  console.log(newComment);
   const newFile = await api.addComment(newComment);
   resetDraftComment();
   isAddOpen.value = false;
@@ -271,10 +272,7 @@ function prepareDraftCommentInPdf(event) {
   const pageContainer = event.target.closest(".page-inner-container");
   if (!pageContainer || !viewContainer) return;
 
-  const pageLabel = pageContainer
-    .closest(".vpv-page-inner-container")
-    .getAttribute("aria-label");
-  const pageIndex = pageLabel.charAt(pageLabel.length - 1);
+  const pageIndex = parseInt(pageContainer.dataset.pageIndex) + 1;
 
   const viewRect = viewContainer.getBoundingClientRect();
   const pageRect = pageContainer.getBoundingClientRect();
@@ -287,8 +285,6 @@ function prepareDraftCommentInPdf(event) {
   const relativeX = (x / pageRect.width) * 100;
   const relativeY = (y / pageRect.height) * 100;
 
-  console.log(pageIndex);
-
   draftComment.value.position = {
     x: relativeX,
     y: relativeY,
diff --git a/src/components/project/PdfViewer.vue b/src/components/project/PdfViewer.vue
index 82c872c..72f7aef 100644
--- a/src/components/project/PdfViewer.vue
+++ b/src/components/project/PdfViewer.vue
@@ -6,6 +6,7 @@
     :src="openedFile.url"
     local="fr_FR"
     @loaded="onPdfLoaded"
+    ref="vpvRef"
   />
   <button
     id="toggle-comments"
@@ -23,18 +24,17 @@
 
 <script setup>
 import Comments from "../comments/Comments.vue";
-import { ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import { useDialogStore } from "../../stores/dialog";
 import { storeToRefs } from "pinia";
 import { VPdfViewer, useLicense } from "@vue-pdf-viewer/viewer";
-import { useRoute, useRouter } from "vue-router";
 
-const licenseKey = import.meta.env.VITE_VPV_LICENSE ?? 'd0ab730a-ebba-4060-856c-76d322565645';
+const licenseKey =
+  import.meta.env.VITE_VPV_LICENSE ?? "d0ab730a-ebba-4060-856c-76d322565645";
 useLicense({ licenseKey });
 
-const { openedFile, isCommentsOpen, comments, draftComment } = storeToRefs(
-  useDialogStore()
-);
+const { openedFile, isCommentsOpen, vpvRef } = storeToRefs(useDialogStore());
+const { resetCommentMarkers } = useDialogStore();
 
 const currentPageIndex = ref(1);
 
@@ -46,6 +46,9 @@ const onPdfLoaded = () => {
     (entries) => {
       entries.forEach((entry, index) => {
         if (entry.intersectionRatio > 0.5) {
+          if (isCommentsOpen.value) {
+            resetCommentMarkers();
+          }
           currentPageIndex.value = parseInt(
             entry.target.getAttribute("aria-label").split(" ")[1]
           );
diff --git a/src/stores/dialog.js b/src/stores/dialog.js
index 437477a..2658c33 100644
--- a/src/stores/dialog.js
+++ b/src/stores/dialog.js
@@ -6,6 +6,7 @@ export const useDialogStore = defineStore("dialog", () => {
   const content = ref(null);
   const openedFile = ref(null);
   const activeTracks = ref(null);
+  const vpvRef = ref(null);
 
   const comments = computed(() => {
     if (activeTracks.value?.length > 0) {
@@ -35,23 +36,6 @@ export const useDialogStore = defineStore("dialog", () => {
     },
     { deep: true }
   );
-  function showDraftMarker(draftComment) {
-    const bubble = document.createElement("a");
-
-    bubble.classList.add("comment-marker");
-    bubble.classList.add("comment-marker--draft");
-    bubble.style.left = draftComment.position.x + "%";
-    bubble.style.top = draftComment.position.y + "%";
-    bubble.href = "#comment-" + draftComment.id;
-
-    const container = draftComment.position.pageIndex
-      ? document.querySelector(
-          `.vpv-page-inner-container[aria-label="page ${draftComment.position.pageIndex}"] .page-inner-container`
-        )
-      : document.querySelector(".track");
-
-    container.appendChild(bubble);
-  }
 
   const isViewerDisabled = ref(false);
   watch(isCommentsOpen, (newVal) => {
@@ -81,14 +65,43 @@ export const useDialogStore = defineStore("dialog", () => {
     }, 100);
   });
 
+  function resetCommentMarkers() {
+    removeCommentMarkers();
+    setCommentMarkers();
+  }
+
+  function showDraftMarker(draftComment) {
+    const bubble = document.createElement("a");
+
+    bubble.classList.add("comment-marker");
+    bubble.classList.add("comment-marker--draft");
+    bubble.style.left = draftComment.position.x + "%";
+    bubble.style.top = draftComment.position.y + "%";
+    bubble.href = "#comment-" + draftComment.id;
+
+    const container = draftComment.position.pageIndex
+      ? document.querySelector(
+          `.vpv-page-inner-container[aria-label="page ${draftComment.position.pageIndex}"] .page-inner-container`
+        )
+      : document.querySelector(".track");
+
+    try {
+      container.appendChild(bubble);
+    } catch (error) {
+      console.log(
+        `Can't show draft comment on page ${draftComment.position.pageIndex} : `,
+        error
+      );
+    }
+  }
   function setCommentMarkers() {
     if (!comments.value) return;
     comments.value.forEach((comment) => {
-      const correspondingMarker = document.querySelector(
-        `.comment-marker[href="#comment-${comment.id}"]`
-      );
       if (comment.location.file.uuid !== openedFile.value.uuid) return;
       if (comment.type === "comment-reply") return;
+      let correspondingMarker = document.querySelector(
+        `.comment-marker[href="#comment-${comment.id}"]`
+      );
       if (correspondingMarker) return;
 
       const bubble = document.createElement("a");
@@ -106,20 +119,24 @@ export const useDialogStore = defineStore("dialog", () => {
 
       const timeOut = container ? 0 : 500;
       setTimeout(() => {
-        container = comment.position?.pageIndex
+        container = comment.position?.hasOwnProperty("pageIndex")
           ? document.querySelector(
               `.vpv-page-inner-container[aria-label="page ${comment.position.pageIndex}"] .page-inner-container`
             )
           : document.querySelector(".track");
 
         try {
+          correspondingMarker = document.querySelector(
+            `.comment-marker[href="#comment-${comment.id}"]`
+          );
+          if (correspondingMarker) return;
           container.appendChild(bubble);
           setTimeout(() => {
             bubble.addEventListener("mouseenter", () => highlight(comment));
             bubble.addEventListener("mouseleave", () => unhighlight(comment));
           }, 100);
         } catch (error) {
-          console.error(
+          console.log(
             `Impossible de monter la bulle du commentaire ${comment.id}. La page n°${comment.position.pageIndex} n'existe pas dans le DOM.`
           );
         }
@@ -153,5 +170,7 @@ export const useDialogStore = defineStore("dialog", () => {
     isCommentPanelEnabled,
     updateFile,
     openedComment,
+    resetCommentMarkers,
+    vpvRef,
   };
 });