improve comments system

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) {

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,

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]
           );