Revert "improve comments system"

This reverts commit e55eb48f45.

public/site/plugins/classes/Position.php

@@ -22,7 +22,7 @@ class Position
     public function toArray() {
         $array = [];
 
-        if (isset($this->pageIndex)) {
+        if ($this->pageIndex) {
             $array["pageIndex"] = $this->pageIndex;
         }
 

src/components/comments/Comment.vue

@@ -101,7 +101,7 @@ const route = useRoute();
 const userStore = useUserStore();
 const api = useApiStore();
 const dialog = useDialogStore();
-const { activeTracks, openedComment, vpvRef } = storeToRefs(useDialogStore());
+const { activeTracks, openedComment } = storeToRefs(useDialogStore());
 const draftText = ref(comment.text);
 const editField = ref(null);
 const commentNode = useTemplateRef("comment-node");
@@ -157,15 +157,11 @@ async function read() {
 }
 
 function scrollTo() {
-  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);
+  const correspondingMarker = document.querySelector(
+    `.comment-marker[href="#comment-${comment.id}"]`
+  );
+  if (!correspondingMarker) return;
+  correspondingMarker.scrollIntoView();
 }
 
 async function deleteComment(event) {

src/components/comments/Comments.vue

@@ -219,7 +219,6 @@ async function addComment(newComment) {
     /projects\/.*?(?=\/[^/]+\/[^/]+$)/
   );
   newComment.fileParentUri = matchFileParentUri ? matchFileParentUri[0] : null;
-  console.log(newComment);
   const newFile = await api.addComment(newComment);
   resetDraftComment();
   isAddOpen.value = false;
@@ -272,7 +271,10 @@ function prepareDraftCommentInPdf(event) {
   const pageContainer = event.target.closest(".page-inner-container");
   if (!pageContainer || !viewContainer) return;
 
-  const pageIndex = parseInt(pageContainer.dataset.pageIndex) + 1;
+  const pageLabel = pageContainer
+    .closest(".vpv-page-inner-container")
+    .getAttribute("aria-label");
+  const pageIndex = pageLabel.charAt(pageLabel.length - 1);
 
   const viewRect = viewContainer.getBoundingClientRect();
   const pageRect = pageContainer.getBoundingClientRect();
@@ -285,6 +287,8 @@ 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,7 +6,6 @@
     :src="openedFile.url"
     local="fr_FR"
     @loaded="onPdfLoaded"
-    ref="vpvRef"
   />
   <button
     id="toggle-comments"
@@ -24,17 +23,18 @@
 
 <script setup>
 import Comments from "../comments/Comments.vue";
-import { computed, ref, watch } from "vue";
+import { 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, vpvRef } = storeToRefs(useDialogStore());
-const { resetCommentMarkers } = useDialogStore();
+const { openedFile, isCommentsOpen, comments, draftComment } = storeToRefs(
+  useDialogStore()
+);
 
 const currentPageIndex = ref(1);
 
@@ -46,9 +46,6 @@ 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]
           );

src/stores/dialog.js

@@ -6,7 +6,6 @@ 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) {
@@ -36,6 +35,23 @@ 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) => {
@@ -65,43 +81,14 @@ 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) => {
-      if (comment.location.file.uuid !== openedFile.value.uuid) return;
-      if (comment.type === "comment-reply") return;
-      let correspondingMarker = document.querySelector(
+      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;
       if (correspondingMarker) return;
 
       const bubble = document.createElement("a");
@@ -119,24 +106,20 @@ export const useDialogStore = defineStore("dialog", () => {
 
       const timeOut = container ? 0 : 500;
       setTimeout(() => {
-        container = comment.position?.hasOwnProperty("pageIndex")
+        container = comment.position?.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.log(
+          console.error(
             `Impossible de monter la bulle du commentaire ${comment.id}. La page n°${comment.position.pageIndex} n'existe pas dans le DOM.`
           );
         }
@@ -170,7 +153,5 @@ export const useDialogStore = defineStore("dialog", () => {
     isCommentPanelEnabled,
     updateFile,
     openedComment,
-    resetCommentMarkers,
-    vpvRef,
   };
 });