From 8b9bd9e4ab0a957118aa0d7ae0e5b1154d05585e Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Tue, 19 Nov 2024 16:59:20 +0100
Subject: [PATCH] pdf viewer : show draft comment marker

---
 src/components/comments/Comments.vue       |  6 +++---
 src/components/project/brief/PdfViewer.vue | 20 +++++++++++---------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/comments/Comments.vue b/src/components/comments/Comments.vue
index 8468f66..5944e13 100644
--- a/src/components/comments/Comments.vue
+++ b/src/components/comments/Comments.vue
@@ -153,6 +153,7 @@ watch(isAddOpen, (newVal) => {
 watch(
   draftComment,
   (newVal) => {
+    console.log(newVal.position);
     if (newVal.position) {
       emits("show-draft-bubble", newVal);
     } else {
@@ -248,8 +249,6 @@ function handleCommentPositionClick(event) {
     .getAttribute("aria-label");
   const pageIndex = pageLabel.charAt(pageLabel.length - 1);
 
-  draftComment.value.pageIndex = parseInt(pageIndex);
-
   const viewRect = viewContainer.getBoundingClientRect();
   const pageRect = pageContainer.getBoundingClientRect();
   const pageScroll = viewRect.top - pageRect.top;
@@ -264,6 +263,7 @@ function handleCommentPositionClick(event) {
   draftComment.value.position = {
     x: relativeX,
     y: relativeY,
+    pageIndex: parseInt(pageIndex),
   };
   isAddOpen.value = true;
   toggleCommentPositionMode(false);
@@ -394,6 +394,6 @@ function openComment(comment) {
 }
 .comment-marker.active,
 .comment-marker:focus {
-  background-image: var(--icon-comment-focus)
+  background-image: var(--icon-comment-focus);
 }
 </style>
diff --git a/src/components/project/brief/PdfViewer.vue b/src/components/project/brief/PdfViewer.vue
index addcc12..00e8e49 100644
--- a/src/components/project/brief/PdfViewer.vue
+++ b/src/components/project/brief/PdfViewer.vue
@@ -67,17 +67,17 @@ const currentPageIndex = ref(1);
 
 watch(isCommentsOpen, (newVal) => {
   if (newVal) {
-    setCommentBubbles();
+    setCommentMarkers();
   } else {
-    removeCommentBubbles();
+    removeCommentMarkers();
   }
 });
 
 watch(openedFile, (newVal) => {
-  removeCommentBubbles();
+  removeCommentMarkers();
   if (newVal.comments) {
     console.log(newVal.comments);
-    setCommentBubbles();
+    setCommentMarkers();
   }
 });
 
@@ -122,7 +122,7 @@ const onPdfLoaded = () => {
   observePages();
 };
 
-function setCommentBubbles() {
+function setCommentMarkers() {
   if (!comments.value) return;
   comments.value.forEach((comment) => {
     const bubble = document.createElement("a");
@@ -154,26 +154,28 @@ function unhighlight(comment) {
   target.classList.remove("highlight");
 }
 
-function removeCommentBubbles() {
+function removeCommentMarkers() {
   document.querySelectorAll(".comment-marker").forEach((bubble) => {
     bubble.parentNode.removeChild(bubble);
   });
 }
 
 function showDraftBubble(draftComment) {
+  console.log(draftComment);
   const bubble = document.createElement("a");
 
-  bubble.classList.add("comment-bubble");
-  bubble.classList.add("comment-bubble--draft");
+  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 = document.querySelector(
-    `.vpv-page-inner-container[aria-label="page ${draftComment.pageIndex}"] .page-inner-container`
+    `.vpv-page-inner-container[aria-label="page ${draftComment.position.pageIndex}"] .page-inner-container`
   );
 
   container.appendChild(bubble);
+  console.log(container);
 }
 </script>